@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ brand palette */
:root {
  --color-denim:         #0F5DDD;
  --color-mirage:        #1A2A3D;
  --color-midnight:      #00152E;
  --color-violet:        #6D0FDB;
  --color-skeptic:       #C4E7D4;
  --color-white:         #FFFFFF;
  --color-alabaster:     #F8F8F8;
  --color-silver:        #B1B1B1;
  --color-gray:          #7E7E7E;
  --color-black:         #000000;

  /* Semantic tokens — light mode */
  --bg-page:       var(--color-alabaster);
  --bg-surface:    var(--color-white);
  --bg-header:     var(--color-mirage);
  --bg-expanded:   var(--color-alabaster);
  --bg-row-hover:  #f4f6fb;
  --bg-input:      var(--color-white);
  --border:        #dde2e8;
  --border-subtle: #f0f2f5;
  --text-primary:  var(--color-mirage);
  --text-secondary:var(--color-gray);
  --text-muted:    var(--color-silver);
}

/* ------------------------------------------------------------------ dark mode tokens */
[data-theme="dark"] {
  --bg-page:       #0f1923;
  --bg-surface:    #1a2535;
  --bg-header:     #0a1520;
  --bg-expanded:   #141f2e;
  --bg-row-hover:  #1f3050;
  --bg-input:      #1a2535;
  --border:        #2a3a50;
  --border-subtle: #1e2e42;
  --text-primary:  #e8edf2;
  --text-secondary:#8a9ab5;
  --text-muted:    #4a5a70;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.icon {
  display: inline-block;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  flex-shrink: 0;
  vertical-align: middle;
}

body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  background: var(--bg-page);
  color: var(--text-primary);
}

/* ------------------------------------------------------------------ header */
.app-header {
  background: var(--bg-header);
  color: var(--color-white);
  padding: 12px 24px;
  display: grid;
  /* minmax(0,1fr) lets the side columns shrink below their content width so the
     header never forces the page body wider than the viewport on narrow/vertical monitors */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
.app-header h1 { font-size: 1.1rem; font-weight: 500; letter-spacing: 0.01em; text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.env-badge { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 3px; background: #f59e0b; color: #fff; vertical-align: middle; }
.app-header-left { display: flex; align-items: center; gap: 10px; justify-content: flex-start; min-width: 0; }
.app-header-right { display: flex; align-items: center; gap: 10px; justify-content: flex-end; min-width: 0; }
.header-user { font-size: 13px; white-space: nowrap; }
.last-updated { font-size: 12px; color: var(--color-silver); white-space: nowrap; }

.theme-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  padding: 5px;
  line-height: 0;
  transition: background 0.15s;
}
.theme-toggle:hover { background: rgba(255,255,255,0.1); }

/* ------------------------------------------------------------------ layout */
.app-main { padding: 16px 16px; display: flex; justify-content: center; }

/* ------------------------------------------------------------------ error banner */
.error-banner {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
  text-align: center;
  box-sizing: border-box;
}
.error-detail {
  margin-top: 8px;
  background: #fff;
  border: 1px solid #fca5a5;
  border-radius: 4px;
  overflow: hidden;
}
.error-toggle {
  background: none; border: none; color: #991b1b; text-decoration: underline;
  cursor: pointer; font-size: 0.8rem; padding: 4px 0 0; display: inline-block;
}
[data-theme="dark"] .error-toggle { color: #fca5a5; }
.error-detail iframe {
  width: 100%;
  height: 100px;
  border: none;
  display: block;
}
[data-theme="dark"] .error-banner { background: #7f1d1d; border-color: #b91c1c; color: #fca5a5; }
[data-theme="dark"] .error-detail { background: #1e1e1e; border-color: #b91c1c; }
/* ------------------------------------------------------------------ pending delete dropdown */
.pending-delete-bar {
  margin: 0 auto 12px; width: fit-content;
  border: 1px solid var(--border, #d1d5db); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12); overflow: hidden;
  background: var(--bg-primary, #fff);
}
.pending-delete-toggle {
  width: 100%; display: block;
  padding: 8px 12px; font-size: 0.85rem; cursor: pointer;
  background: #6366f1; color: #fff; border: none; border-bottom: 1px solid var(--border, #d1d5db);
  font-weight: 500; text-align: center;
}
.pending-delete-toggle:hover { background: #4f46e5; }
.pending-delete-dropdown {
  max-height: 400px; overflow-y: auto; padding: 8px;
}
.pending-delete-dropdown.hidden {
  display: none !important;
}
[data-theme="dark"] .pending-delete-bar { background: #1e293b; border-color: #334155; }
.pending-delete-table {
  border-collapse: collapse; font-size: 0.8rem; white-space: nowrap;
}
.pending-delete-table th {
  text-align: center; padding: 6px 12px; font-weight: 500;
  border-bottom: 1px solid var(--border, #d1d5db); color: var(--text-muted);
}
.pending-delete-table td {
  padding: 6px 12px; color: var(--text-primary); text-align: center;
}
.pending-delete-table tbody tr:hover { background: var(--bg-hover, #f3f4f6); }
[data-theme="dark"] .pending-delete-table tbody tr:hover { background: #334155; }
.deleted-days { color: #d97706; font-weight: 500; }
.btn-restore {
  background: #059669; color: #fff; border: none; border-radius: 4px;
  padding: 3px 10px; font-size: 0.75rem; cursor: pointer; white-space: nowrap;
}
.btn-restore:hover { background: #047857; }
.btn-restore:disabled { opacity: 0.5; cursor: not-allowed; }

.hidden { display: none !important; }

/* ------------------------------------------------------------------ main table */
.content-wrapper {
  max-width: 100%;
  min-width: 0; /* allow flex item to shrink below content width so overflow scroll is reachable */
  overflow-x: auto; /* handles narrow-screen scroll now that table-wrapper is visible */
  /* symmetric so left/right page padding match; left also gives the PAG tag room to slide out */
  padding-left: 36px;
  padding-right: 36px;
}

/* ---- Stat cards ---- */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--color-denim);
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stat-card[data-stat="uptodate"] { border-left-color: #2e9e5b; }
.stat-card[data-stat="critical"] { border-left-color: #d9362b; }
.stat-card[data-stat="storage"]  { border-left-color: var(--color-violet); }
.stat-card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.stat-card-customer {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.stat-card-total {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Filter bar (token / query builder) ---- */
.filter-bar {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 12px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  cursor: text;
}
.filter-funnel {
  flex: none;
  width: 18px; height: 18px;
  background-color: var(--text-secondary);
  mask-image: url('/icons/filter.svg');
  -webkit-mask-image: url('/icons/filter.svg');
  mask-size: contain; -webkit-mask-size: contain;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-position: center; -webkit-mask-position: center;
}
/* chips flow inline as siblings of the input inside the bar */
.filter-chips { display: contents; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-denim);
  background: rgba(15, 93, 221, 0.08);
  border: 1px solid rgba(15, 93, 221, 0.25);
  border-radius: 6px;
  white-space: nowrap;
}
.filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  font-size: 15px; line-height: 1;
  color: var(--color-denim);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.filter-chip-remove:hover { background: rgba(15, 93, 221, 0.18); }
.filter-input {
  flex: 1 1 160px;
  min-width: 120px;
  padding: 4px 2px;
  font-size: 0.85rem;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
}
.filter-input::placeholder { color: var(--text-muted); }
.filter-result-count {
  flex: none;
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.filter-clear {
  flex: none;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-denim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.filter-clear:hover { background: rgba(15, 93, 221, 0.08); }

.filter-menu {
  /* fixed so it escapes the .content-wrapper horizontal-scroll clip box;
     positioned in JS relative to the bar (see filterbar.js positionMenu) */
  position: fixed;
  z-index: 100;
  min-width: 230px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.filter-menu-section {
  padding: 6px 10px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.filter-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  font-size: 0.85rem;
  text-align: left;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.filter-menu-item:hover,
.filter-menu-item.highlight { background: var(--bg-row-hover); }
.filter-menu-item .fm-eq { color: var(--text-muted); }
.filter-menu-item.fm-freetext { color: var(--color-denim); }
.filter-menu-empty {
  padding: 8px 10px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.filter-size-builder {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
}
.filter-size-ops { display: inline-flex; gap: 2px; }
.filter-size-op {
  width: 26px; height: 28px;
  font-size: 0.9rem;
  color: var(--text-primary);
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
}
.filter-size-op.active {
  color: #fff;
  background: var(--color-denim);
  border-color: var(--color-denim);
}
.filter-size-input {
  width: 76px;
  padding: 5px 8px;
  font-size: 0.85rem;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.filter-size-unit { font-size: 0.8rem; color: var(--text-secondary); }
.filter-size-add {
  margin-left: auto;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #fff;
  background: var(--color-denim);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.table-wrapper {
  background: var(--bg-surface);
  border-radius: 6px;
  border: 1px solid var(--border);
  overflow: visible; /* allows PAG tag to slide outside */
  width: fit-content;
  max-width: 100%;
}

.accounts-table {
  /* 100% (not auto) so the table fills the wrapper, which is sized by the
     widest child. When few/no rows match, the filter-bar's chips make the
     wrapper wider than the table's content — width:100% stretches the header
     and the empty-state cell to fill instead of leaving a gap on the right. */
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

.accounts-table th {
  padding: 10px 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  background: var(--bg-expanded);
  border-bottom: 1px solid var(--border);
}
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--text-primary); }
.sortable[data-dir="asc"]::after  { content: ' \25B2'; font-size: 9px; }
.sortable[data-dir="desc"]::after { content: ' \25BC'; font-size: 9px; }

.accounts-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  text-align: center;
}
/* Constrain the Notes column at the cell/column level — max-width on the inner
   div alone does NOT cap the column's intrinsic width in auto table layout, so the
   full nowrap note text would otherwise stretch the table past the viewport. */
.accounts-table th:last-child,
.accounts-table td:last-child { width: 160px; max-width: 160px; text-align: left; }

/* Same cap for the Enterprise column — names can be long; ellipsize at the
   column level so the table doesn't stretch past the viewport. */
.accounts-table th.enterprise-col,
.accounts-table td.enterprise-cell { max-width: 180px; }
.accounts-table td.enterprise-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.accounts-table tbody tr:hover > td { background: var(--bg-row-hover); }
.accounts-table tbody tr:last-child > td { border-bottom: none; }

/* PAG row accent border + sliding tag */
tr[data-is-pag="true"] > td:first-child {
  position: relative;
  border-left: 3px solid #6366f1;
}
tr[data-is-pag="true"] > td:first-child::after {
  content: 'PAG';
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background: #6366f1;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0 7px;
  border-radius: 3px 0 0 3px;
  /* start fully clipped from the left — reveals right-to-left, emerging from the table edge */
  clip-path: inset(0 0 0 100% round 3px 0 0 3px);
  pointer-events: none;
  white-space: nowrap;
  transition: clip-path 0.25s ease;
  box-shadow: -2px 0 5px rgba(0,0,0,0.18);
}
tr[data-is-pag="true"] > td:first-child:hover::after {
  clip-path: inset(0 0 0 0% round 3px 0 0 3px);
}

/* ------------------------------------------------------------------ expand button */
.expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 0;
  transition: color 0.1s;
}
.expand-btn:hover { color: var(--text-primary); }

/* ------------------------------------------------------------------ status badges */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  min-width: 76px;
}
.badge-good     { background: var(--color-skeptic); color: #065f46; }
.badge-internal { background: #dbeafe; color: #1e40af; }
.badge-warning  { background: #fef3c7; color: #92400e; }
.badge-critical    { background: #fee2e2; color: #991b1b; }
.badge-inactive    { background: #fef3c7; color: #78350f; }
.badge-closed      { background: #f1f5f9; color: #475569; }
.badge-syncing  { background: #dbeafe; color: var(--color-denim); }
.badge-idle     { background: var(--border-subtle); color: var(--text-secondary); }

[data-theme="dark"] .badge-good     { background: #14532d; color: #86efac; }
[data-theme="dark"] .badge-internal { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .badge-warning  { background: #78350f; color: #fde68a; }
[data-theme="dark"] .badge-critical    { background: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .badge-inactive    { background: #78350f; color: #fde68a; }
[data-theme="dark"] .badge-closed      { background: #334155; color: #cbd5e1; }
[data-theme="dark"] .badge-syncing  { background: #1e3a5f; color: #93c5fd; }

/* ------------------------------------------------------------------ action buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.1s;
  font-family: inherit;
  white-space: nowrap;
}
.btn-icon { padding: 5px; line-height: 0; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-danger    { background: #dc2626; color: var(--color-white); }
.btn-danger:hover:not(:disabled) { filter: brightness(0.88); }
.btn-primary   { background: var(--color-denim); color: var(--color-white); }
.btn-primary:hover:not(:disabled) { filter: brightness(0.88); }
.btn-secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-expanded); }

.actions-cell { display: flex; gap: 6px; justify-content: center; }

/* ------------------------------------------------------------------ archive button states */
.btn-undo     { background: #d97706; color: #fff; min-width: 72px; }
.btn-undo:hover:not(:disabled) { filter: brightness(0.88); }
.btn-pending  { background: #b45309; color: #fff; cursor: default; min-width: 72px; }
.btn-archived { background: #6d28d9; color: #fff; cursor: default; min-width: 72px; }
.btn-primary.btn-archive { min-width: 72px; }

/* ------------------------------------------------------------------ notes cell */
.note-display { display: flex; align-items: center; max-width: 100%; min-width: 0; }
.note-text {
  color: var(--text-secondary);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.note-text:hover { color: var(--color-denim); text-decoration: underline; }

.note-edit-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-input);
  color: var(--text-primary);
  resize: vertical;
  margin-bottom: 4px;
}
.note-edit-textarea:focus { outline: 2px solid var(--color-denim); outline-offset: 1px; }
.note-edit-footer { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.note-modified-by { font-size: 0.75rem; color: var(--text-muted); margin: 0; min-height: 1em; }
.note-char-counter { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.note-char-counter.over-limit { color: #dc2626; font-weight: 600; }

/* ------------------------------------------------------------------ loading */
.loading-cell { text-align: center; padding: 40px; color: var(--text-muted); }

/* ------------------------------------------------------------------ expanded / dropdown row */
.expanded-row td { padding: 0; }
.expanded-content {
  padding: 12px 24px 16px 40px;
  background: var(--bg-expanded);
  border-bottom: 1px solid var(--border);
}
.expanded-content h3 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

/* ---- Per-account mini metric cards (smaller mirror of the page-top cards) ---- */
.account-metrics { margin-bottom: 16px; }
.mini-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.mini-metric {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--color-denim);
  border-radius: 5px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.mini-metric[data-metric="delete-marked"] { border-left-color: var(--color-violet); }
.mini-metric[data-metric="total"]         { border-left-color: var(--text-secondary); }
.mini-metric-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-metric-value {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.mini-metric-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.history-table {
  width: auto;
  border-collapse: collapse;
  font-size: 12px;
}
.history-table th {
  text-align: center;
  color: var(--text-muted);
  font-weight: 500;
  padding: 6px 16px;
  text-transform: uppercase;
  font-size: 11px;
}
.history-table td { padding: 6px 16px; color: var(--text-primary); text-align: center; }
.history-table tr:hover td { background: var(--bg-row-hover); }

/* ------------------------------------------------------------------ storage class icons */
.sc-icon { font-size: 9px; vertical-align: middle; margin-right: 4px; }
.sc-standard     { color: #22c55e; }
.sc-ia           { color: #f59e0b; }
.sc-intelligent  { color: #3b82f6; }
.sc-glacier      { color: #06b6d4; }
.sc-deep-archive { color: #8b5cf6; }
.sc-rr           { color: #ef4444; }

/* ------------------------------------------------------------------ modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 21, 46, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal {
  background: var(--bg-surface);
  border-radius: 6px;
  padding: 24px;
  max-width: 440px;
  width: calc(100% - 32px);
  box-shadow: 0 20px 60px rgba(0,21,46,0.35);
  border: 1px solid var(--border);
}
.modal h2 { font-size: 1rem; font-weight: 500; color: var(--text-primary); margin-bottom: 12px; }
.modal p { color: var(--text-secondary); margin-bottom: 8px; font-size: 13px; }
.modal-filename { font-family: monospace; font-size: 12px; background: var(--bg-expanded); padding: 6px 8px; border-radius: 4px; word-break: break-all; color: var(--text-primary); }
.modal-warning { color: #b45309; font-size: 12px; }
[data-theme="dark"] .modal-warning { color: #fbbf24; }
.modal-warning.modal-error { color: #dc2626; font-weight: 500; }
[data-theme="dark"] .modal-warning.modal-error { color: #f87171; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }