/*
 * BellSystems v2 — Shared Component Styles
 * All pseudo-class states (:hover, :focus, :active, :disabled) live here.
 * Imported by global.css — never import directly from component files.
 *
 * Naming convention: .{component}-{variant/modifier}
 * All values must use tokens from tokens.css via var().
 */

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.8; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(calc(100% + var(--space-6))); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); max-height: 120px; margin-bottom: var(--space-2); }
  to   { opacity: 0; transform: translateX(calc(100% + var(--space-6))); max-height: 0; margin-bottom: 0; }
}

@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ==========================================================================
   BUTTON  (.btn)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast),
    filter var(--transition-fast);
}

.btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* — Sizes — */
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  gap: var(--space-1);
}

.btn-md {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-base);
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-md);
}

/* — Variants — */

/* Primary: Indigo Glow → Violet Pulse gradient */
.btn-primary {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  border-color: transparent;
}
.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: var(--shadow-primary-glow);
  filter: brightness(1.06);
}
.btn-primary:active:not(:disabled) {
  filter: brightness(0.96);
  box-shadow: none;
}

/* Secondary: Island bg + ghost border */
.btn-secondary {
  background: var(--color-bg-island);
  color: var(--color-text-secondary);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border-color: var(--color-border-focus);
  box-shadow: 0px 4px 12px rgba(192, 193, 255, 0.12);
}
.btn-secondary:active:not(:disabled) {
  background: var(--color-bg-island);
  box-shadow: none;
}

/* Ghost: transparent, on hover gets a surface tint + whisper glow */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  box-shadow: 0px 2px 8px rgba(192, 193, 255, 0.08);
}
.btn-ghost:active:not(:disabled) {
  background: var(--color-bg-island);
  box-shadow: none;
}

/* Danger: tint at rest → solid fill + coral glow on hover */
.btn-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-color: transparent;
}
.btn-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-danger);
  color: var(--color-bg-abyss);
  border-color: transparent;
  box-shadow: var(--shadow-danger-glow);
  filter: brightness(1.06);
}
.btn-danger:active:not(:disabled) {
  filter: brightness(0.94);
  box-shadow: none;
}

/* Success: tint at rest → solid fill + emerald glow on hover */
.btn-success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: transparent;
}
.btn-success:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-success);
  color: var(--color-bg-abyss);
  border-color: transparent;
  box-shadow: var(--shadow-success-glow);
  filter: brightness(1.06);
}
.btn-success:active:not(:disabled) {
  filter: brightness(0.94);
  box-shadow: none;
}

/* Info: aqua-sky tint at rest → solid fill + sky glow on hover */
.btn-info {
  background: var(--color-info-bg);
  color: var(--color-info);
  border-color: transparent;
}
.btn-info:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-info);
  color: var(--color-bg-abyss);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(123, 208, 255, 0.35);
  filter: brightness(1.06);
}
.btn-info:active:not(:disabled) {
  filter: brightness(0.94);
  box-shadow: none;
}

/* Warning: amber tint at rest → solid fill + amber glow on hover */
.btn-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: transparent;
}
.btn-warning:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-warning);
  color: var(--color-bg-abyss);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(251, 191, 36, 0.35);
  filter: brightness(1.06);
}
.btn-warning:active:not(:disabled) {
  filter: brightness(0.94);
  box-shadow: none;
}

/* Table-actions: invisible at rest, becomes secondary on row-hover or direct hover */
.btn-table-actions {
  background: transparent;
  color: var(--color-text-more-muted);
  border-color: transparent;
}
.btn-table-actions:hover:not(:disabled):not([aria-disabled="true"]),
.btn-table-actions[aria-expanded="true"],
tr:hover .btn-table-actions,
tr:focus-within .btn-table-actions {
  background: var(--color-primary-subtle);
  color: var(--color-text-secondary);
  border-color: var(--color-border-strong);
  box-shadow: 0px 4px 12px rgba(192, 193, 255, 0.12);
}
.btn-table-actions:active:not(:disabled) {
  background: var(--color-bg-island);
  box-shadow: none;
}

/* ==========================================================================
   SEGMENTED CONTROL  (.seg-ctrl)
   A row of mutually-exclusive toggle buttons sharing one visual frame.
   Each slot reuses .btn + .btn-{variant} + .btn-{size} — no extra colours.
   ========================================================================== */

.seg-ctrl {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

/* Remove individual border-radius and the outer border from every slot.
   Vertical padding + line-height match .input / .searchbar-input
   so SegmentedControl is always the same height as search inputs in toolbars. */
.seg-ctrl__btn {
  border-radius: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  position: relative;
  padding-top:    var(--space-3) !important;
  padding-bottom: var(--space-3) !important;
  line-height: var(--line-height-base) !important;
}

/* Internal dividers between buttons */
.seg-ctrl__btn + .seg-ctrl__btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--color-border-strong);
  pointer-events: none;
}

/* Active item removes the left divider line */
.seg-ctrl__btn[aria-pressed="true"]::before,
.seg-ctrl__btn[aria-pressed="true"] + .seg-ctrl__btn::before {
  opacity: 0;
}

/* ==========================================================================
   ICON BUTTON GROUP  (.icon-btn-group)
   A compact strip of icon-only action buttons: [ icon | icon | icon ]
   Each slot reuses .btn + .btn-{variant} + .btn-{size}.
   ========================================================================== */

.icon-btn-group {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.icon-btn-group__btn {
  border-radius: 0 !important;
  border: none !important;
  position: relative;
  /* Match the height of .input / .searchbar-input (12px top+bottom padding + 1.5 line-height on 14px = 45px).
     Vertical padding overrides .btn-md's 8px so the group sits flush in a toolbar row. */
  padding-top:    var(--space-3) !important;
  padding-bottom: var(--space-3) !important;
  padding-left:   var(--space-3) !important;
  padding-right:  var(--space-3) !important;
}

.icon-btn-group__btn + .icon-btn-group__btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--color-border-strong);
  pointer-events: none;
}

/* ==========================================================================
   INPUT  (.input)
   ========================================================================== */

.input {
  width: 100%;
  /* Cutout well — sits one tonal step below the card surface */
  background: var(--color-bg-abyss);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  outline: none;
  /*
   * Three-layer inset stack:
   *   1. Deep top shadow  — the "wall" above the cutout casts darkness in
   *   2. Soft ambient well — general depth across the whole recess
   *   3. Hairline bottom   — faint light bounce off the floor of the cutout
   */
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.55),
    inset 0 1px 10px rgba(0, 0, 0, 0.30),
    inset 0 -1px 0   rgba(192, 193, 255, 0.04);
  transition:
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}

.input::placeholder {
  color: var(--color-text-muted);
}

.input:focus {
  background: var(--color-bg-base);
  border-color: var(--color-border-focus);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.60),
    inset 0 1px 10px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0   rgba(192, 193, 255, 0.06),
    0 0 0 2px var(--color-border-focus);
}

.input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Remove number input spinners globally */
.input[type="number"]::-webkit-inner-spin-button,
.input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-error {
  border-color: var(--color-danger) !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.55),
    inset 0 1px 10px rgba(0, 0, 0, 0.30),
    inset 0 -1px 0   rgba(255, 92, 92, 0.06),
    0 0 0 2px rgba(255, 92, 92, 0.22) !important;
}

/* ==========================================================================
   SELECT  (.select-trigger / .select-menu)
   Custom select replaces native <select> for full design-system control.
   ========================================================================== */

/* Trigger button — inherits all .input styles */
.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  text-align: left;
}

.select-trigger:disabled {
  cursor: not-allowed;
}

.select-placeholder {
  color: var(--color-text-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  transition: transform var(--transition-fast);
}

.select-trigger-open .select-chevron {
  transform: rotate(180deg);
}

/* Floating dropdown panel */
.select-menu {
  position: fixed;
  z-index: 9999;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.4),
    0 12px 32px -4px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: var(--space-1);
  max-height: 280px;
  overflow-y: auto;
  /* Animate in */
  animation: select-open 0.12s ease-out both;
}

@keyframes select-open {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Option rows */
.select-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;
}

.select-option:hover:not(.select-option-disabled) {
  background: var(--color-bg-island);
}

.select-option-selected {
  color: var(--color-primary);
  background: rgba(192, 193, 255, 0.08);
}

.select-option-selected:hover {
  background: rgba(192, 193, 255, 0.12) !important;
}

.select-option-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.select-option-check {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* Keep old .select-wrapper for any legacy uses */
.select-wrapper {
  position: relative;
  width: 100%;
}

.select-arrow {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
}

/* Textarea */
.input.textarea {
  resize: vertical;
  min-height: 80px;
}

/* ==========================================================================
   STATUS BADGE  (.badge)
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: var(--line-height-tight);
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

.badge-success  { background: var(--color-success-bg);  color: var(--color-success);  }
.badge-warning  { background: var(--color-warning-bg);  color: var(--color-warning);  }
.badge-danger   { background: var(--color-danger-bg);   color: var(--color-danger);   }
.badge-info     { background: var(--color-info-bg);     color: var(--color-info);     }
.badge-primary  { background: var(--color-primary-subtle); color: var(--color-primary); }
.badge-neutral  {
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
}

/* ==========================================================================
   PILL BUTTON  (.pill-btn)
   Interactive badge-sized pill that opens a dropdown. Same visual weight
   as StatusBadge — sits inline with text and badges.
   ========================================================================== */

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  /* Hard-reset — overrides any inherited heading/title font size */
  font-family: var(--font-family-base) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: var(--line-height-tight);
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  vertical-align: middle;
}
.pill-btn:hover  { filter: brightness(1.12); }
.pill-btn:active { filter: brightness(0.92); }
.pill-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pill-btn-icon { display: flex; align-items: center; }

/* Colour variants — mirror badge colours */
.pill-btn-neutral { background: var(--color-bg-elevated);      color: var(--color-text-muted);  }
.pill-btn-success { background: var(--color-success-bg);        color: var(--color-success);     }
.pill-btn-warning { background: var(--color-warning-bg);        color: var(--color-warning);     }
.pill-btn-danger  { background: var(--color-danger-bg);         color: var(--color-danger);      }
.pill-btn-info    { background: var(--color-info-bg);           color: var(--color-info);        }
.pill-btn-primary { background: var(--color-primary-subtle);    color: var(--color-primary);     }

/* Dropdown menu */
.pill-btn-menu {
  min-width: 140px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pill-btn-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.pill-btn-option:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}
.pill-btn-option--active {
  color: var(--color-primary);
}
.pill-btn-option--active:hover {
  background: var(--color-primary-subtle);
}

/* ==========================================================================
   DATA TABLE  (.table)
   ========================================================================== */

.table-container {
  background: rgba(28, 32, 38, 0.30);
  backdrop-filter: var(--blur-modal);
  -webkit-backdrop-filter: var(--blur-modal);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card), var(--shadow-md);
  overflow: hidden;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table-thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: rgba(28, 32, 38, 0.50);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.table-thead th.sortable {
  cursor: pointer;
  user-select: none;
}
.table-thead th.sortable:hover {
  color: var(--color-text-primary);
}

.table-tbody tr {
  border-bottom: none;
  transition: background var(--transition-fast);
}
/* Alternating row tint — applied via data-row-tint on <td> so group-hover can
   override it cleanly without a second paint layer on <tr>. */
.table-tbody tr[data-row-tint="1"] td {
  background: var(--color-tint-row);
}
.table-tbody tr.clickable {
  cursor: pointer;
}
/* Default hover for standalone rows (no group) */
.table-tbody tr:not([data-row-group]):hover td {
  background: rgba(49, 53, 60, 0.50);
}
.table-tbody tr.selected td {
  background: rgba(49, 53, 60, 0.50);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.table-tbody td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  vertical-align: middle;
}

/* When a main row has expanded sub-rows below it, suppress its bottom padding
   so the combined main-row + sub-rows block has even top/bottom breathing room. */
.table-tbody tr.dt-has-subrows td {
  padding-bottom: var(--space-1);
}

/* Group hover: all rows in the group (main + sub-rows) tint together.
   Overrides the tint-row background on <td> since both rules target <td>. */
.table-tbody tr.dt-group-hover td {
  background: rgba(49, 53, 60, 0.50);
}

/* Skeleton loading rows */
.table-skeleton {
  display: block;
  height: 14px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

/* Empty state */
.table-empty {
  padding: var(--space-16) var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

.table-empty-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* ── DataTable: drag-to-reorder + column manager ─────────────────────────── */

/* Draggable column headers */
.dt-th--draggable {
  cursor: grab;
}
.dt-th--draggable:active {
  cursor: grabbing;
}
.dt-th--dragging {
  opacity: 0.35;
}

/* Column manager th cell — right-aligned, same padding as row cells, no cursor override */
.dt-col-mgr-th {
  padding: var(--space-3) var(--space-4) !important;
  vertical-align: middle;
  text-align: right !important;
  white-space: nowrap;
  cursor: default;
}
/* The Edit button inside dt-col-mgr-th uses .btn-table-actions — no extra CSS needed */

/* Dropdown wrapper — portalled to body, positioned via JS */
.dt-col-picker-wrap {
  position: fixed;
  z-index: 9999;
}

/* The picker panel itself */
.dt-col-picker {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  min-width: 190px;
  max-height: 340px;
  overflow-y: auto;
}

/* Each checkbox row */
.dt-col-picker-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  transition: background var(--transition-fast);
}
.dt-col-picker-item:hover {
  background: var(--color-bg-island);
}
.dt-col-picker-item--disabled {
  cursor: not-allowed;
  color: var(--color-text-muted);
  opacity: 0.6;
}

/* Sort icon wrapper */
.dt-sort-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  margin-left: var(--space-1);
  flex-shrink: 0;
  vertical-align: middle;
  margin-bottom: 1px;
}

/* ==========================================================================
   ROW ACTIONS  (.row-actions-*)
   ========================================================================== */

/* Trigger button uses .btn.btn-table-actions — no extra CSS needed here */

/* Portal dropdown panel */
.row-actions-menu {
  min-width: 168px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1) 0;
  overflow: hidden;
}

/* Each item */
.row-actions-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-base);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
}
.row-actions-item:hover {
  background: var(--color-bg-island);
}
.row-actions-item-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* ==========================================================================
   MODAL  (.modal)
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.60);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: fade-in var(--transition-base) forwards;
}

.modal {
  background: var(--color-bg-surface);
  backdrop-filter: var(--blur-modal);
  -webkit-backdrop-filter: var(--blur-modal);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--space-8));
  width: 100%;
  animation: slide-up var(--transition-base) forwards;
  overflow: hidden;
}

.modal-sm   { max-width: 480px; }
.modal-md   { max-width: 640px; }
.modal-lg   { max-width: 800px; }
.modal-xl   { max-width: 60vw;  max-height: 60dvh; }
.modal-xxl  { max-width: 85vw;  max-height: 85dvh; }
.modal-full { max-width: calc(100vw - var(--space-16)); height: calc(100dvh - var(--space-16)); }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.modal-title {
  font-family: var(--font-family-display);
  font-size: 1.125rem;             /* Barlow Condensed reads larger — 18px displays like 20px body */
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.modal-close:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}
.modal-close:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.modal-body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* ==========================================================================
   PAGE HEADER  (.page-header)
   ========================================================================== */

.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: nowrap;
}

.page-header-title {
  font-family: var(--font-family-display);
  font-size: 1.75rem;              /* 28px — Barlow Condensed reads larger than Onest at same px */
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
}

.page-header-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  margin-top: var(--space-1);
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.page-header-actions .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.btn svg {
  display: inline-block;
  flex-shrink: 0;
}

/* ==========================================================================
   PROFILE PAGE HEADER  (.profile-header)
   Entity detail pages: avatar + name + subtitle + optional actions.
   Two variants: .profile-header-inner (no actions) and
                 .profile-header-inner--with-actions (actions slot).
   ========================================================================== */

.profile-header {
  display: flex;
  flex-direction: column;
}

/* Inner row — avatar + text side by side */
.profile-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* With-actions variant: left cluster + right actions */
.profile-header-inner--with-actions {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.profile-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
}

/* Avatar */
.profile-header-avatar {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-bg-elevated);
  border: 2px solid var(--color-primary-subtle);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-header-avatar--clickable {
  cursor: pointer;
}

.profile-header-avatar--clickable:hover .profile-header-avatar-overlay {
  opacity: 1;
}

.profile-header-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-header-avatar-initial {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  user-select: none;
}

.profile-header-avatar-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 14, 20, 0.60);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
  color: var(--color-text-primary);
}

/* Text block */
.profile-header-text {
  min-width: 0;
}

.profile-header-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.profile-header-name {
  font-family: var(--font-family-display);
  font-size: 1.75rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-header-badge {
  flex-shrink: 0;
}

.profile-header-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  line-height: var(--line-height-base);
}

/* Actions slot */
.profile-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ==========================================================================
   BREADCRUMBS  (.breadcrumbs)
   ========================================================================== */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.breadcrumbs a:hover {
  color: var(--color-text-accent);
}

.breadcrumbs-sep {
  color: var(--color-border-raw);
  user-select: none;
}

.breadcrumbs-current {
  color: var(--color-text-secondary);
}

/* ==========================================================================
   PAGINATION  (.pagination)
   ========================================================================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  flex-wrap: wrap;
}

.pagination-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  user-select: none;
}
.pagination-btn:hover:not(:disabled) {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}
.pagination-btn.active {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-color: var(--color-primary-subtle);
}
.pagination-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Per-page size buttons group */
.pagination-size-group {
  display:        flex;
  align-items:    center;
  gap:            2px;
  background:     var(--color-bg-abyss);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-md);
  padding:        2px;
}
.pagination-size-btn {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  min-width:      32px;
  height:         24px;
  padding:        0 var(--space-2);
  border:         none;
  border-radius:  calc(var(--radius-md) - 2px);
  background:     transparent;
  color:          var(--color-text-muted);
  font-size:      var(--font-size-sm);
  font-family:    var(--font-family-base);
  font-weight:    var(--font-weight-normal);
  cursor:         pointer;
  transition:     background var(--transition-fast), color var(--transition-fast);
  white-space:    nowrap;
}
.pagination-size-btn:hover:not(.pagination-size-btn--active) {
  background: var(--color-bg-elevated);
  color:      var(--color-text-secondary);
}
.pagination-size-btn.pagination-size-btn--active,
.pagination-size-btn.pagination-size-btn--active:hover {
  background:  var(--color-bg-island);
  color:       var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  cursor:      default;
}

/* Per-page size selector inside pagination (legacy — keep for compat) */
.pagination-size-select {
  background:    var(--color-bg-surface);
  color:         var(--color-text-secondary);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-1) var(--space-2);
  font-size:     var(--font-size-sm);
  font-family:   var(--font-family-base);
  cursor:        pointer;
  outline:       none;
  transition:    border-color var(--transition-fast);
}
.pagination-size-select:focus {
  border-color: var(--color-border-focus);
}

/* ==========================================================================
   CARD  (.card)
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  break-inside: avoid; /* stays whole inside .masonry-grid columns */
}

.card-flat {
  background: rgba(28, 32, 38, 0.30);
  backdrop-filter: var(--blur-modal);
  -webkit-backdrop-filter: var(--blur-modal);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
}

.card-elevated {
  background: rgba(38, 42, 49, 0.40);
  backdrop-filter: var(--blur-modal);
  -webkit-backdrop-filter: var(--blur-modal);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.card-outlined {
  background: transparent;
  border: 1px solid var(--color-border-strong);
}

.card-header {
  padding: var(--space-5) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: linear-gradient(
    to bottom,
    rgba(192, 193, 255, 0.04) 0%,
    transparent 100%
  );
}

.card-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-more-muted);
}

.card-header-action {
  margin-left: auto;
}

.card-title {
  font-family: 'Inter', var(--font-family-base);
  font-size: var(--font-size-xs);   /* 11px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-text-more-muted);
  line-height: var(--line-height-tight);
}

/* Inset divider — lives inside .card-header so it respects the header's padding */
.card-header-divider {
  height: 1px;
  background: var(--color-border);
  margin-top: var(--space-5);
}

.card-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  padding-left: calc(15px + var(--space-2)); /* indent to align under title, past icon */
}

/* When there is no icon, remove the subtitle indent */
.card-header--no-icon .card-subtitle {
  padding-left: 0;
}

.card-body {
  padding: var(--space-1) var(--space-8) var(--space-8);
  flex: 1;
}

.card-body-flush {
  flex: 1;
}

/* Field label — subsection labels inside card bodies.
   Usage: <dt className="card-field-label"> or <p className="card-field-label"> */
.card-field-label {
  font-family: 'Inter', var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-more-muted);
  line-height: var(--line-height-tight);
}

.card-footer {
  padding: var(--space-4) var(--space-8);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  background: rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   TABS  (.tabs)
   ========================================================================== */

/* — Line variant — */
.tabs-line {
  width: 100%;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-line::-webkit-scrollbar { display: none; }

.tabs-line__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--space-5);
  width: 100%;
  min-width: max-content;
  max-width: 2000px;
  margin: 0 auto;
}

@media (min-width: 2001px) {
  .tabs-line__inner {
    justify-content: center;
  }
}

.tabs-line .tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast);
  user-select: none;
  font-family: var(--font-family-base);
}
.tabs-line .tab:hover { color: var(--color-text-secondary); }
.tabs-line .tab.active { color: var(--color-primary); }

/* Sliding indicator — position set via JS */
.tabs-indicator {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  transition: left var(--transition-base), width var(--transition-base);
  box-shadow: 0 0 10px rgba(192, 193, 255, 0.45);
  pointer-events: none;
}

/* — Pill variant — */
.tabs-pill {
  display: inline-flex;
}

.tabs-pill__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-bg-abyss);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
}

.tabs-pill .tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
  user-select: none;
  font-family: var(--font-family-base);
}
.tabs-pill .tab:hover {
  color: var(--color-text-secondary);
  background: var(--color-bg-elevated);
}
.tabs-pill .tab.active {
  background: var(--color-bg-island);
  color: var(--color-primary);
}

.tab-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* — Badge counts on tabs — */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background: var(--color-bg-island);
  color: var(--color-text-muted);
  line-height: 1;
}
.tab.active .tab-badge {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

/* ==========================================================================
   TOAST  (.toast-*)
   ========================================================================== */

.toast-stack {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  width: 340px;
  max-width: calc(100vw - var(--space-8));
}

.toast {
  pointer-events: all;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  animation: toast-in var(--transition-base) cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}

.toast.exiting {
  animation: toast-out var(--transition-slow) ease-in forwards;
}

/* Left accent stripe */
.toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}

/* Auto-dismiss progress bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  transform-origin: left;
  animation: toast-progress linear forwards;
  opacity: 0.45;
}

.toast-icon {
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
}

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}

.toast-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  margin-top: 2px;
}

.toast-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  margin-top: 1px;
}
.toast-close:hover {
  background: var(--color-bg-island);
  color: var(--color-text-primary);
}

/* Variant colouring */
.toast-success::before  { background: var(--color-success); }
.toast-success .toast-icon { color: var(--color-success); }
.toast-success .toast-progress { background: var(--color-success); }

.toast-warning::before  { background: var(--color-warning); }
.toast-warning .toast-icon { color: var(--color-warning); }
.toast-warning .toast-progress { background: var(--color-warning); }

.toast-danger::before   { background: var(--color-danger); }
.toast-danger .toast-icon { color: var(--color-danger); }
.toast-danger .toast-progress { background: var(--color-danger); }

.toast-info::before     { background: var(--color-info); }
.toast-info .toast-icon { color: var(--color-info); }
.toast-info .toast-progress { background: var(--color-info); }

/* ==========================================================================
   SEARCH BAR  (.searchbar)
   ========================================================================== */

.searchbar {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.searchbar-icon {
  position: absolute;
  left: var(--space-3);
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  pointer-events: none;
  transition: color var(--transition-fast);
  z-index: 1;
}

.searchbar-input {
  width: 100%;
  background: var(--color-bg-abyss);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-10) var(--space-3) var(--space-8);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  outline: none;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.55),
    inset 0 1px 10px rgba(0, 0, 0, 0.30),
    inset 0 -1px 0   rgba(192, 193, 255, 0.04);
  transition:
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.searchbar-input::placeholder { color: var(--color-text-muted); }
.searchbar-input::-webkit-search-cancel-button,
.searchbar-input::-webkit-search-decoration { display: none; appearance: none; }

.searchbar-input:focus {
  background: var(--color-bg-base);
  border-color: var(--color-border-focus);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.60),
    inset 0 1px 10px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0   rgba(192, 193, 255, 0.06),
    0 0 0 2px var(--color-border-focus);
}

.searchbar:focus-within .searchbar-icon {
  color: var(--color-primary);
}

.searchbar-clear {
  position: absolute;
  right: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-island);
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.searchbar-clear:hover {
  background: var(--color-bg-float);
  color: var(--color-text-primary);
}

/* ==========================================================================
   CONFIRM DIALOG  (.confirm-*)
   ========================================================================== */

.confirm-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

.confirm-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.confirm-icon-wrap-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid rgba(255, 92, 92, 0.20);
}

.confirm-icon-wrap-primary {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border: 1px solid rgba(192, 193, 255, 0.20);
}

.confirm-message {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 320px;
}

/* ==========================================================================
   LAYOUT — Sidebar-first fixed layout
   Sidebar : position fixed, full-height left column (224px).
   Header  : position fixed, top-right only (left: sidebar-width).
   Content : offset by sidebar margin-left + header padding-top.
   ========================================================================== */

/* Sidebar: fixed, full height — glass treatment */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100dvh;
  width: var(--sidebar-width);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  background-color: rgba(28, 32, 38, 0.40);
  backdrop-filter: var(--blur-modal);
  -webkit-backdrop-filter: var(--blur-modal);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: var(--shadow-lg);
}

/* Main area: offset from fixed sidebar — transparent so bg shows through */
.main-area {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-width: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Content: fills remaining space, scrolls internally — transparent so bg shows through */
.main-content {
  flex: 1;
  padding-top: var(--header-height);
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}

/* Sidebar brand header */
.sidebar-brand {
  padding: var(--space-5) var(--space-6);
  flex-shrink: 0;
}

.sidebar-brand-logo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Sidebar scrollable nav area */
.sidebar-nav {
  flex: 1;
  padding: var(--space-3) 0 var(--space-4);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Settings footer — pinned at bottom */
.sidebar-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-2) 0;
  flex-shrink: 0;
}

/* Section separator labels — text + soft rule to the right */
.nav-sep {
  padding: var(--space-5) var(--space-6) var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.nav-sep--first {
  padding-top: var(--space-3);
}
.nav-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-sidebar-text-more-muted);
}
.nav-sep-label {
  flex-shrink: 0;
  display: block;
  font-family: var(--font-family-sidebar);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-sidebar-text-muted);
  letter-spacing: var(--tracking-snug);
  text-transform: uppercase;
  user-select: none;
}

/* Top-level nav link
   Scoped under .sidebar to beat .app a { color } specificity (0,1,1) → this gives (0,2,1) */
.sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-6);
  text-decoration: none;
  font-family: var(--font-family-sidebar);
  font-size: var(--font-size-sm);
  color: var(--color-sidebar-text);
  font-weight: var(--font-weight-medium);
  background: transparent;
  box-shadow: inset 3px 0 0 transparent;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.sidebar .nav-link:not(.active):hover {
  background: var(--color-sidebar-hover-bg);
  color: var(--color-text-primary);
}
.sidebar .nav-link.active {
  color: var(--color-sidebar-active-text);
  font-weight: var(--font-weight-medium);
  background: var(--color-primary-subtle);
  box-shadow: inset 3px 0 0 var(--color-sidebar-active-bar);
}

/* Group toggle button */
.nav-group-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-6);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-sidebar-text);
  font-family: var(--font-family-sidebar);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: left;
  box-shadow: inset 3px 0 0 transparent;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-group-btn:hover {
  background: var(--color-sidebar-hover-bg);
  color: var(--color-text-primary);
}
.nav-group-btn--active {
  color: var(--color-sidebar-text);
  font-weight: var(--font-weight-medium);
}
.nav-group-btn--active:hover {
  background: var(--color-sidebar-hover-bg);
}
.nav-group-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.nav-group-btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

/* Chevron rotation */
.nav-chevron {
  display: inline-flex;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
  margin-left: auto;
}
.nav-chevron--open {
  transform: rotate(90deg);
}

/* Children container — vertical guide line under parent icon */
.nav-children {
  position: relative;
  padding: var(--space-1) 0;
}
.nav-children::before {
  content: '';
  position: absolute;
  left: calc(var(--space-6) + 7px);   /* centre of parent icon (24px padding + 7px ≈ icon midpoint) */
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border-strong);
  pointer-events: none;
}

/* Child nav links — indented to the right of the guide line
   Scoped under .sidebar to beat .app a { color } specificity */
.sidebar .nav-child-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-6) var(--space-2) calc(var(--space-6) + 16px + var(--space-3));
  text-decoration: none;
  font-family: var(--font-family-sidebar);
  font-size: var(--font-size-sm);
  color: var(--color-sidebar-text);
  font-weight: var(--font-weight-medium);
  box-shadow: inset 3px 0 0 transparent;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.sidebar .nav-child-link:not(.active):hover {
  color: var(--color-text-primary);
  background: var(--color-sidebar-hover-bg);
}
.sidebar .nav-child-link.active {
  color: var(--color-sidebar-active-text);
  font-weight: var(--font-weight-medium);
  background: var(--color-primary-subtle);
  box-shadow: inset 3px 0 0 var(--color-sidebar-active-bar);
}
.nav-child-link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

/* Placeholder items */
.nav-placeholder {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  opacity: 0.38;
  cursor: not-allowed;
  user-select: none;
  color: var(--color-sidebar-text);
  font-family: var(--font-family-sidebar);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.nav-placeholder--root {
  padding: var(--space-2) var(--space-6);
  border-left: 3px solid transparent;
}
.nav-placeholder--child {
  padding: var(--space-2) var(--space-6) var(--space-2) calc(var(--space-6) + 16px + var(--space-3));
  font-size: var(--font-size-sm);
  color: var(--color-sidebar-text);
}
.nav-soon-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  background-color: var(--color-bg-elevated);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* ─── HeaderSearch — top-bar only, pill-shaped, no border/shadow ─────────────
   Use this instead of <SearchBar> when placing search in the fixed header.
   Background: --color-bg-surface. Fully rounded. Completely borderless.
   ─────────────────────────────────────────────────────────────────────────── */

.topbar-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-3);
  width: 100%;
  transition: background var(--transition-fast);
}
.topbar-search:focus-within {
  background: var(--color-bg-island);
  outline: none;
  box-shadow: none;
}
.topbar-search-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
}
.topbar-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  padding: 0;
  line-height: 1;
}
.topbar-search .topbar-search-input:focus,
.topbar-search .topbar-search-input:focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
}
.topbar-search-input::placeholder {
  color: var(--color-text-muted);
}
/* Strip browser chrome from type="search" */
.topbar-search-input::-webkit-search-decoration,
.topbar-search-input::-webkit-search-cancel-button,
.topbar-search-input::-webkit-search-results-button,
.topbar-search-input::-webkit-search-results-decoration {
  display: none;
}

/* Header: fixed, covers content area only (not sidebar) — glass treatment */
.header {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--header-height);
  z-index: var(--z-sticky);
  background-color: rgba(28, 32, 38, 0.30);
  backdrop-filter: var(--blur-modal);
  -webkit-backdrop-filter: var(--blur-modal);
  border-bottom: 1px solid rgba(70, 69, 84, 0.12);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-3);
}

/* Pushes right controls to the far right */
.header-spacer {
  flex: 1;
}

/* Right control group */
.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Mobile hamburger */
.header-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  flex-shrink: 0;
  padding: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.header-hamburger:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

/* Breadcrumb trail */
.header-breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  min-width: 0;
  overflow: hidden;
}
.header-breadcrumb-link {
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
}
.header-breadcrumb-link:hover {
  color: var(--color-text-secondary);
}
.header-breadcrumb-current {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.header-breadcrumb-sep {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  opacity: 0.45;
  flex-shrink: 0;
}

/* Global search wrapper — constrained width */
.header-search {
  width: 220px;
  flex-shrink: 0;
}

/* Pill-shaped top-bar search — wrapper */
.v2-topbar-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  transition: background var(--transition-fast);
}
.v2-topbar-search:focus-within {
  background: var(--color-bg-island);
}

/* Search icon — sits in normal flow, left of the input */
.v2-topbar-search-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: var(--space-3);
  padding-right: var(--space-1);
  color: var(--color-text-muted);
  pointer-events: none;
}

/* The actual input */
.v2-topbar-search-input {
  flex: 1;
  height: 32px;
  padding: 0 var(--space-3) 0 var(--space-2);
  background: transparent;
  border: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  outline: none;
  min-width: 0;
  /* Remove browser default search input styling */
  -webkit-appearance: none;
  appearance: none;
}
.v2-topbar-search-input::placeholder {
  color: var(--color-text-muted);
}
/* Hide native clear button */
.v2-topbar-search-input::-webkit-search-cancel-button,
.v2-topbar-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* ─── Global search dropdown ─────────────────────────────────────────────── */

.gs-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  width: 572px;
  max-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-bg-void);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  padding: var(--space-3);
  animation: slide-up 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Section grouping */
.gs-group {
  padding-bottom: var(--space-1);
}

.gs-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.75;
}

.gs-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  line-height: 1;
}

.gs-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2) 0;
}

/* Result item — 2-row card */
.gs-result-item {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.1s ease;
  min-width: 0;
}

.gs-result-item--active::before {
  content: '';
  position: absolute;
  inset: 0% 0%;
  background: var(--gs-accent, var(--color-text-muted));
  border-radius: 0%;
  filter: blur(8px);
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}

.gs-result-item > * {
  position: relative;
  z-index: 1;
}

/* Icon chip */
.gs-result-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
}

/* Text block — stacked 2 rows */
.gs-result-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.gs-result-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.gs-result-sublabel {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  font-family: var(--font-family-mono);
  letter-spacing: 0.01em;
}

/* Empty state */
.gs-empty {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.gs-empty-icon {
  flex-shrink: 0;
  opacity: 0.4;
  display: flex;
}

.gs-empty em {
  font-style: normal;
  color: var(--color-text-secondary);
}

/* Icon buttons: bell, gear */
.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.header-icon-btn:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}
.header-icon-btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Vertical separator between icons and profile */
.header-vsep {
  width: 1px;
  height: 18px;
  background: var(--color-border-strong);
  flex-shrink: 0;
  margin: 0 var(--space-1);
}

/* Profile wrapper — relative so dropdown anchors to it */
.header-profile-wrap {
  position: relative;
}

/* Profile button */
.header-profile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.header-profile:hover {
  background: var(--color-bg-elevated);
}
.header-profile:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Profile info — right-aligned, stacked name + role */
.header-profile-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.header-profile-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  line-height: 1;
}
.header-profile-role {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-snug);
  line-height: 1;
}

/* Avatar — rounded box (radius-lg), not a circle */
.header-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-subtle);
  border: 1px solid var(--color-border-focus);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  flex-shrink: 0;
  font-family: var(--font-family-base);
  letter-spacing: 0;
}

/* Profile dropdown menu */
.profile-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 180px;
  background: var(--color-bg-float);
  backdrop-filter: var(--blur-modal);
  -webkit-backdrop-filter: var(--blur-modal);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  z-index: var(--z-dropdown);
}
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.profile-menu-item:hover {
  background: var(--color-bg-elevated);
}
.profile-menu-item--danger {
  color: var(--color-danger);
}
.profile-menu-item--danger:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* Mobile drawer */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: rgba(10, 14, 20, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade-in var(--transition-base) forwards;
}

.drawer-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: calc(var(--z-overlay) + 1);
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  background-color: var(--color-sidebar-bg);
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  animation: drawer-slide-in var(--transition-slow) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.drawer-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.drawer-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.drawer-close:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

.drawer-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@keyframes drawer-slide-in {
  from { transform: translateX(-100%); opacity: 0.7; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Responsive breakpoints */
@media (max-width: 767px) {
  .sidebar                  { display: none; }
  .main-area                { margin-left: 0; }
  .header                   { left: 0; }
  .header-hamburger         { display: flex !important; }
  .header-breadcrumb-nav    { display: none; }
  .header-profile-info      { display: none; }
}

@media (min-width: 768px) {
  .header-hamburger         { display: none !important; }
}

/* ==========================================================================
   COMPOSE EMAIL MODAL — Quill.js overrides
   Themes the Quill Snow editor to match the v2 design system.
   ========================================================================== */

/* Toolbar */
.quill-compose-wrapper .ql-toolbar.ql-snow {
  background-color: var(--color-bg-elevated);
  border: none;
  border-bottom: 1px solid var(--color-border) !important;
}

/* Editor area */
.quill-compose-wrapper .ql-container.ql-snow {
  border: none !important;
  background-color: var(--color-bg-surface);
  font-family: inherit;
  font-size: 13px;
}

.quill-compose-wrapper .ql-editor {
  color: var(--color-text-primary);
  line-height: 1.6;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.quill-compose-wrapper .ql-editor:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.quill-compose-wrapper .ql-editor.ql-blank::before {
  color: var(--color-text-muted);
  font-style: normal;
}

/* Toolbar icons — stroke/fill */
.quill-compose-wrapper .ql-toolbar button .ql-stroke,
.quill-compose-wrapper .ql-toolbar button .ql-stroke-miter,
.quill-compose-wrapper .ql-toolbar .ql-picker-label .ql-stroke {
  stroke: var(--color-text-secondary) !important;
}

.quill-compose-wrapper .ql-toolbar button .ql-fill,
.quill-compose-wrapper .ql-toolbar .ql-picker-label .ql-fill {
  fill: var(--color-text-secondary) !important;
}

.quill-compose-wrapper .ql-toolbar button:hover .ql-stroke,
.quill-compose-wrapper .ql-toolbar button:hover .ql-stroke-miter {
  stroke: var(--color-text-primary) !important;
}

.quill-compose-wrapper .ql-toolbar button.ql-active .ql-stroke,
.quill-compose-wrapper .ql-toolbar button.ql-active .ql-stroke-miter {
  stroke: var(--color-primary) !important;
}

.quill-compose-wrapper .ql-toolbar button.ql-active .ql-fill {
  fill: var(--color-primary) !important;
}

/* Picker labels */
.quill-compose-wrapper .ql-toolbar .ql-picker-label {
  color: var(--color-text-secondary);
  border: none !important;
  position: relative;
}

.quill-compose-wrapper .ql-toolbar .ql-picker-label:hover {
  color: var(--color-text-primary);
}

/* Picker dropdowns */
.quill-compose-wrapper .ql-toolbar .ql-picker-options {
  background-color: var(--color-bg-float);
  border: 1px solid var(--color-border-strong) !important;
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
}

.quill-compose-wrapper .ql-toolbar .ql-picker-item {
  color: var(--color-text-secondary);
}

.quill-compose-wrapper .ql-toolbar .ql-picker-item:hover,
.quill-compose-wrapper .ql-toolbar .ql-picker-item.ql-selected {
  color: var(--color-text-primary);
  background-color: var(--color-bg-elevated);
}

/* Color swatches in picker */
.quill-compose-wrapper .ql-toolbar .ql-color-picker .ql-picker-options {
  padding: 6px;
  width: auto;
}

/* Blockquote */
.quill-compose-wrapper .ql-editor blockquote {
  border-left: 3px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  padding-left: 12px;
  margin-left: 0;
}

/* Code block */
.quill-compose-wrapper .ql-editor pre.ql-syntax {
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

/* Links */
.quill-compose-wrapper .ql-editor a {
  color: var(--color-primary);
}

/* Tooltip */
.quill-compose-wrapper .ql-tooltip {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
}

.quill-compose-wrapper .ql-tooltip input[type=text] {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  color: var(--color-text-primary);
  outline: none;
}

.quill-compose-wrapper .ql-tooltip a.ql-action,
.quill-compose-wrapper .ql-tooltip a.ql-remove {
  color: var(--color-primary);
}

/* Inline images (Ctrl+V paste) */
.quill-compose-wrapper .ql-editor img {
  max-width: 100%;
  border-radius: 4px;
}

/* ==========================================================================
   DATE TIME PICKER  (.dtp-*)
   Two-column popover: left = calendar, right = Cupertino drum dials.
   ========================================================================== */

/* ── Trigger field ─────────────────────────────────────────────────────────── */

.dtp-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  text-align: left;
}
.dtp-trigger:disabled { cursor: not-allowed; }
.dtp-trigger-value {
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-family: var(--font-family-mono);
  flex: 1;
  min-width: 0;
}
.dtp-trigger-placeholder {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  flex: 1;
  min-width: 0;
}
.dtp-trigger-icon {
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}
.dtp-trigger:hover .dtp-trigger-icon,
.dtp-trigger[aria-expanded="true"] .dtp-trigger-icon { color: var(--color-primary); }

/* ── Popover shell ─────────────────────────────────────────────────────────── */

.dtp-popover {
  position: fixed;
  z-index: var(--z-toast);        /* above --z-modal (400) */
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.45),
    0 20px 48px -4px rgba(0, 0, 0, 0.60),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  width: 520px;
  animation: dtp-open 0.14s ease-out both;
  user-select: none;
}

@keyframes dtp-open {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Two-column body ───────────────────────────────────────────────────────── */

.dtp-body {
  display: flex;
  height: 274px;
}

/* Left — calendar */
.dtp-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-4) var(--space-4);
  min-width: 0;
}

/* Vertical divider */
.dtp-divider {
  width: 1px;
  background: var(--color-border);
  flex-shrink: 0;
  margin: var(--space-4) 0;
}

/* Right — time dials */
.dtp-right {
  width: 172px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-5) var(--space-3) var(--space-4);
  gap: 0;
}

/* ── Calendar nav ──────────────────────────────────────────────────────────── */

.dtp-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}

.dtp-nav-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.dtp-nav-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-island);
}

/* Month/year label — clickable to toggle year mode */
.dtp-month-label {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.dtp-month-label:hover { background: var(--color-bg-island); }
.dtp-month-label--active { color: var(--color-primary); }
.dtp-month-caret {
  font-size: 8px;
  opacity: 0.5;
}

/* ── Calendar grid ─────────────────────────────────────────────────────────── */

.dtp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0px;
  flex: 1;
  align-content: start;
}

.dtp-dow {
  text-align: center;
  font-size: 9px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  padding: var(--space-1) 0 var(--space-2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.dtp-day {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-normal);
}
.dtp-day:hover { background: var(--color-bg-island); }
.dtp-day--other { color: var(--color-text-muted); opacity: 0.35; }
.dtp-day--today {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.dtp-day--selected {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-primary-glow);
}
.dtp-day--selected:hover { filter: brightness(1.08); }

/* ── Year scroll list ──────────────────────────────────────────────────────── */

.dtp-year-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: var(--space-1);
  /* slim scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-raw) transparent;
}
.dtp-year-list::-webkit-scrollbar { width: 4px; }
.dtp-year-list::-webkit-scrollbar-thumb { background: var(--color-border-raw); border-radius: 2px; }
.dtp-year-list::-webkit-scrollbar-track { background: transparent; }

.dtp-year-item {
  width: 100%;
  background: transparent;
  border: none;
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.dtp-year-item:hover { background: var(--color-bg-island); color: var(--color-text-primary); }
.dtp-year-item--selected {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* ── Time section labels ───────────────────────────────────────────────────── */

.dtp-time-label-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  /* Match height of .dtp-cal-nav so drums align with .dtp-dow row */
  height: 30px;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.dtp-section-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* ── Drum dials container ──────────────────────────────────────────────────── */

.dtp-drums-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.dtp-drums-sep {
  font-size: 1.4rem;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-mono);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 4px;
}

/* ── Single drum dial ──────────────────────────────────────────────────────── */

.dtp-drum {
  position: relative;
  width: 60px;
  overflow: hidden;
  cursor: ns-resize;
  border-radius: var(--radius-md);
  background: var(--color-bg-abyss);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* Selection highlight band behind the centre item */
.dtp-drum-band {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--color-primary-subtle);
  border-top: 1px solid rgba(192, 193, 255, 0.20);
  border-bottom: 1px solid rgba(192, 193, 255, 0.20);
  pointer-events: none;
  z-index: 1;
}

/* Individual drum item row */
.dtp-drum-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-mono);
  color: var(--color-text-primary);
  position: relative;
  z-index: 2;
  transition: opacity var(--transition-fast);
  cursor: pointer;
  user-select: none;
}
.dtp-drum-item--center {
  cursor: text;
  color: var(--color-primary);
}

/* Inline edit input that appears when clicking centre */
.dtp-drum-edit {
  width: 48px;
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-family-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  caret-color: var(--color-primary);
  padding: 0;
  /* Remove spinners */
  -moz-appearance: textfield;
}
.dtp-drum-edit::-webkit-inner-spin-button,
.dtp-drum-edit::-webkit-outer-spin-button { display: none; }

/* Top/bottom fade masks — give the drum a natural roll-off */
.dtp-drum-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 40%;
  pointer-events: none;
  z-index: 3;
}
.dtp-drum-fade--top {
  top: 0;
  background: linear-gradient(to bottom, var(--color-bg-abyss) 0%, transparent 100%);
}
.dtp-drum-fade--bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--color-bg-abyss) 0%, transparent 100%);
}

/* ── Now button (inside right panel) ──────────────────────────────────────── */

.dtp-now-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-bg-island);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: var(--tracking-snug);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}
.dtp-now-btn:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-color: rgba(192, 193, 255, 0.25);
}

/* ── Footer ────────────────────────────────────────────────────────────────── */

.dtp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-void);
}
.dtp-footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
}
.dtp-footer-date,
.dtp-footer-time {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.dtp-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* "Set to Now" footer button — light blue style */
.dtp-now-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-primary-subtle);
  border: 1px solid rgba(192, 193, 255, 0.20);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  flex-shrink: 0;
}
.dtp-now-btn:hover {
  background: color-mix(in srgb, var(--color-primary-subtle) 80%, var(--color-primary) 20%);
  border-color: rgba(192, 193, 255, 0.40);
  box-shadow: 0 0 0 1px rgba(192, 193, 255, 0.15);
}

.dtp-done-btn {
  background: var(--gradient-primary);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  transition: filter var(--transition-fast), box-shadow var(--transition-fast);
  flex-shrink: 0;
}
.dtp-done-btn:hover {
  filter: brightness(1.06);
  box-shadow: var(--shadow-primary-glow);
}
