/* IT4Y_PHASE177_LIGHT_THEME_DEFAULT_V1 ─────────────────────────────────────
   * :root defines the LIGHT palette (the new default). Dark mode is an
   * override under html[data-theme="dark"]. Both palettes share variable
   * names so all components automatically re-skin via CSS vars only — no
   * JS DOM rewrites needed when the user toggles. */
  :root {
    /* Surfaces */
    --bg:#f3f5f9; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f7f9fc;
    /* Borders */
    --border:#d8dde7; --border-soft:#e6e9ef;
    /* Text */
    --text:#0d1117; --text-dim:#2d3748; --muted:#5a6578;
    /* Accent */
    --accent:#2563eb; --accent-soft:#dbeafe;
    /* Semantic */
    --ok:#15803d; --warn:#b45309; --danger:#b91c1c; --info:#2563eb;
    /* Table accents (Phase 177: extracted from inline hex colors) */
    --table-row-border:#e6e9ef; --row-hover:#eef2f8;
    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --shadow-md: 0 4px 12px rgba(15,23,42,.08);
    /* Layout */
    --admin-nav-w:260px; --header-h:56px;
  }
  html[data-theme="dark"] {
    --bg:#0a1219; --bg-2:#0c1722; --panel:#0f1e2e; --panel-2:#152a40;
    --border:#1f3a5a; --border-soft:#15273e;
    --text:#e8edf6; --text-dim:#b4c0d0; --muted:#7d8ba0;
    --accent:#3b9eff; --accent-soft:#1d3a5e;
    --ok:#34d399; --warn:#fbbf24; --danger:#f87171; --info:#60a5fa;
    --table-row-border:#131e2d; --row-hover:#11203a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  }
  /* Smooth color transitions when the user toggles themes (200ms is long
   * enough to feel intentional, short enough to not slow workflows). */
  html, body, .app-header, .card, .kpi, .panel, table, th, td,
  .tn-item, .tn-dd-item, .pill, .btn, input, select, textarea {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body { font: 14px -apple-system, "Segoe UI", system-ui, sans-serif;
         background: var(--bg); color: var(--text); }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }
  code { font: 12px ui-monospace, "SF Mono", Menlo, monospace; color: var(--info); }
  pre { font: 12px ui-monospace, "SF Mono", Menlo, monospace; }

  /* ── App layout — IT4Y_SIDEBAR_V1 ── */
  #app { display: contents; }
  .app-shell { display: flex; flex-direction: row; height: 100vh; overflow: hidden; }

  /* ── Sidebar palette (theme-aware) ── */
  html:not([data-theme="dark"]) {
    --sn-bg:#ffffff; --sn-hover:#eef2f8; --sn-active-bg:#dbeafe;
    --sn-active:#2563eb; --sn-text:#1e293b; --sn-muted:#2d3748;
    --sn-grp:#64748b; --sn-border:#e6e9ef;
  }
  html[data-theme="dark"] {
    --sn-bg:#0d1520; --sn-hover:rgba(255,255,255,.06); --sn-active-bg:rgba(74,158,255,.15);
    --sn-active:#4a9eff; --sn-text:rgba(232,241,252,.92); --sn-muted:rgba(172,198,230,.80);
    --sn-grp:rgba(148,180,218,.60); --sn-border:rgba(255,255,255,.08);
  }

  /* ── Sidebar shell ── */
  .app-sidebar {
    position: relative; flex-shrink: 0;
    width: var(--admin-nav-w); height: 100vh;
    background: var(--sn-bg); border-right: 1px solid var(--sn-border);
    display: flex; flex-direction: column; overflow: hidden;
    transition: width .22s cubic-bezier(.4,0,.2,1); z-index: 100;
  }
  .app-sidebar.sb-collapsed { width: 52px; }

  /* Sidebar header */
  .sb-header {
    display: flex; align-items: center; gap: 10px;
    padding: 0 15px; height: var(--header-h); flex-shrink: 0;
    border-bottom: 1px solid var(--sn-border); overflow: hidden; white-space: nowrap;
  }
  .sb-logo {
    width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700;
  }
  .sb-title { font-size: 14px; font-weight: 700; color: var(--sn-text);
              transition: opacity .18s; white-space: nowrap; overflow: hidden; }
  .app-sidebar.sb-collapsed .sb-title { opacity: 0; pointer-events: none; }

  /* Scrollable nav — direction:rtl pushes scrollbar to left edge */
  .sb-scroll {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 8px 6px 4px;
    direction: rtl;
    scrollbar-width: thin; scrollbar-color: transparent transparent;
    transition: scrollbar-color .2s;
  }
  .sb-scroll:hover { scrollbar-color: rgba(0,0,0,.22) transparent; }
  html[data-theme="dark"] .sb-scroll { scrollbar-color: transparent transparent; }
  html[data-theme="dark"] .sb-scroll:hover { scrollbar-color: rgba(255,255,255,.24) transparent; }
  .sb-scroll::-webkit-scrollbar { width: 4px; }
  .sb-scroll::-webkit-scrollbar-track { background: transparent; }
  .sb-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; transition: background .2s; }
  .sb-scroll:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); }
  html[data-theme="dark"] .sb-scroll:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.24); }
  .sb-inner { direction: ltr; } /* reset content to LTR */

  /* Group headers */
  .sb-group { margin-bottom: 2px; }
  .sb-grp-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 8px 3px; margin-top: 10px; cursor: pointer; user-select: none;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
    color: var(--sn-grp); border-radius: 5px; transition: color .15s;
    white-space: nowrap; overflow: hidden;
  }
  .sb-grp-hdr:hover { color: var(--sn-muted); }
  .app-sidebar.sb-collapsed .sb-grp-hdr { display: none; }
  .sb-grp-caret { font-size: 9px; opacity: .55; transition: transform .18s; flex-shrink: 0; }
  .sb-grp-hdr.sb-coll > .sb-grp-caret { transform: rotate(-90deg); }
  .sb-grp-items { overflow: hidden; transition: max-height .22s cubic-bezier(.4,0,.2,1); }

  /* Nav items */
  .sb-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px; cursor: pointer;
    color: var(--sn-muted); font-size: 13px; font-weight: 500;
    text-decoration: none; white-space: nowrap; overflow: hidden;
    transition: background .13s, color .13s; position: relative;
  }
  .sb-item:hover { background: var(--sn-hover); color: var(--sn-text); }
  .sb-item.active { background: var(--sn-active-bg); color: var(--sn-active); font-weight: 600; }
  .sb-item.active::before {
    content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
    width: 3px; background: var(--sn-active); border-radius: 0 3px 3px 0;
  }
  .sb-item-icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 14px; }
  .sb-item-lbl { transition: opacity .18s; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .app-sidebar.sb-collapsed .sb-item-lbl { opacity: 0; width: 0; }
  .sb-ext { font-size: 9px; opacity: .4; margin-left: auto; flex-shrink: 0; }
  .app-sidebar.sb-collapsed .sb-ext { display: none; }

  /* Single items (Overview, Security) */
  .sb-single { margin-top: 4px; }
  .sb-single:first-child { margin-top: 0; }

  /* Collapsed tooltip */
  .app-sidebar.sb-collapsed .sb-item { position: relative; }
  .app-sidebar.sb-collapsed .sb-item:hover::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%;
    transform: translateY(-50%); background: var(--panel); border: 1px solid var(--border);
    border-radius: 6px; padding: 5px 10px; font-size: 12px; color: var(--text);
    white-space: nowrap; box-shadow: var(--shadow-md); z-index: 600; pointer-events: none;
  }

  /* Sidebar footer */
  .sb-footer { flex-shrink: 0; padding: 6px; border-top: 1px solid var(--sn-border); }
  .sb-toggle-btn {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 9px 8px 12px; border-radius: 6px; cursor: pointer;
    color: var(--sn-muted); font-size: 13px; font-weight: 500;
    background: none; border: none; width: 100%; white-space: nowrap; overflow: hidden;
    transition: background .13s, color .13s;
  }
  .sb-toggle-btn:hover { background: var(--sn-hover); color: var(--sn-text); }
  .sb-toggle-icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 14px; }
  .sb-toggle-lbl { transition: opacity .18s; }
  .app-sidebar.sb-collapsed .sb-toggle-lbl { opacity: 0; width: 0; }

  /* ── Right column (header + main) ── */
  .app-right { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; }
  .app-header {
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
    background: var(--panel); border-bottom: 1px solid var(--border);
    padding: 0 22px; height: var(--header-h); z-index: 10;
  }
  .app-header .brand { font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 10px; }
  .app-header .brand-icon { font-size: 18px; }
  .app-header .right { display: flex; gap: 14px; align-items: center; font-size: 13px; }
  .app-header .session-info { color: var(--text-dim); }
  .app-header .session-info .email { color: var(--text); font-weight: 600; }
  .app-header .session-info .role { color: var(--accent); margin-left: 6px; }
  .app-main { padding: 22px 26px; flex: 1; overflow-y: auto; }
  @media (max-width: 900px) {
    .app-sidebar { width: 52px; }
    .app-sidebar .sb-title, .app-sidebar .sb-item-lbl,
    .app-sidebar .sb-grp-hdr, .app-sidebar .sb-toggle-lbl,
    .app-sidebar .sb-ext { display: none; }
    .app-main { padding: 14px 12px; }
  }
  .breadcrumbs { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
  .breadcrumbs a { color: var(--muted); }
  .breadcrumbs .sep { margin: 0 8px; opacity: 0.5; }
  .page-title { font-size: 22px; font-weight: 700; margin: 0 0 16px; }
  .page-subtitle { color: var(--muted); margin-top: -10px; margin-bottom: 16px; font-size: 13px; }

  /* ── Cards / KPIs ── */
  .card { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 10px;
          padding: 18px; margin-bottom: 16px; }
  .card h3 { margin: 0 0 12px 0; font-size: 15px; }
  .card-toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
  .kpi { background: var(--panel-2); padding: 14px 16px; border-radius: 8px; border: 1px solid var(--border-soft); position: relative; }
  .kpi .v { font-size: 26px; font-weight: 700; color: var(--accent); }
  .kpi .l { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.7px; margin-top: 4px; }
  /* IT4Y_PHASE184_KPI_INTERACTIVE_V1 — interactive drill-down cards */
  .kpi.clickable { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; user-select: none; }
  .kpi.clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); border-color: var(--accent); }
  .kpi.clickable:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
  .kpi.clickable:active { transform: translateY(0); }
  .kpi.clickable .arrow { position: absolute; top: 12px; right: 12px; color: var(--muted); opacity: 0; transition: opacity .12s, transform .12s; font-size: 14px; }
  .kpi.clickable:hover .arrow { opacity: 1; transform: translateX(2px); }
  .kpi.clickable .sub { font-size: 10px; color: var(--muted); margin-top: 2px; opacity: .7; }
  /* Breakdown row clickability */
  tr.row-link { cursor: pointer; transition: background .12s; }
  tr.row-link:hover { background: var(--panel-2); }
  tr.row-link td:last-child::after { content: ' ›'; color: var(--muted); opacity: 0; transition: opacity .12s; }
  tr.row-link:hover td:last-child::after { opacity: 1; }
  .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
  @media (max-width: 1100px) { .row-3 { grid-template-columns: 1fr; } .row-2 { grid-template-columns: 1fr; } }

  /* ── Tables ── */
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th { text-align: left; color: var(--muted); font-weight: 600; padding: 9px 12px;
       border-bottom: 1px solid var(--border-soft); font-size: 11px;
       text-transform: uppercase; letter-spacing: 0.6px; }
  td { padding: 9px 12px; border-bottom: 1px solid var(--table-row-border); }
  tr.clickable { cursor: pointer; }
  tr.clickable:hover td { background: var(--row-hover); }

  /* ── Pills / badges (dark-theme palette by default) ── */
  .pill { display: inline-block; padding: 2px 8px; border-radius: 11px; font-size: 10px;
          font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
          background: #1f3a5e; color: #b9d3f0; }
  .pill.green { background: #14331a; color: #b3f5c4; }
  .pill.red   { background: #3a1818; color: #fda4a4; }
  .pill.amber { background: #3a2f18; color: #fde2a4; }
  .pill.yotta { background: #14253d; color: #6fb8ff; }
  /* IT4Y_PHASE177_LIGHT_PILLS_V1 — softer pastel palette for light mode */
  html:not([data-theme="dark"]) .pill          { background:#dbeafe; color:#1e3a8a; }
  html:not([data-theme="dark"]) .pill.green    { background:#dcfce7; color:#14532d; }
  html:not([data-theme="dark"]) .pill.red      { background:#fee2e2; color:#7f1d1d; }
  html:not([data-theme="dark"]) .pill.amber    { background:#fef3c7; color:#78350f; }
  html:not([data-theme="dark"]) .pill.yotta    { background:#e0f2fe; color:#0c4a6e; }

  /* ── Forms / buttons ── */
  .field { margin: 12px 0; }
  .field label { display: block; font-size: 11px; color: var(--muted);
                 text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
  .field input, .field select, .field textarea {
    width: 100%; padding: 9px 12px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-2);
    color: var(--text); font: 13px ui-monospace, monospace; }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--accent); border-color: var(--accent); }
  .btn { padding: 8px 14px; border-radius: 6px; border: 0; cursor: pointer;
         background: var(--accent); color: #fff; font: 600 13px system-ui; transition: filter 0.15s, background-color .2s ease; }
  .btn:hover { filter: brightness(1.1); }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn.small { padding: 4px 10px; font-size: 11px; }
  .btn.ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
  .btn.warn { background: var(--warn); color: #fff; }
  .btn.danger { background: var(--danger); color: #fff; }
  html:not([data-theme="dark"]) .btn.ghost:hover { background: var(--panel-2); }

  /* ── Status / messages (dark palette by default) ── */
  .msg { padding: 11px 14px; border-radius: 6px; font-size: 13px; margin: 10px 0; }
  .msg.error { background: #3a1818; color: #fda4a4; border: 1px solid #7f3333; }
  .msg.ok    { background: #14331a; color: #b3f5c4; border: 1px solid #2f6e44; }
  .msg.info  { background: #14253d; color: #b6d4f8; border: 1px solid #2a4a76; }
  /* IT4Y_PHASE177_LIGHT_MSGS_V1 */
  html:not([data-theme="dark"]) .msg.error { background:#fef2f2; color:#7f1d1d; border-color:#fecaca; }
  html:not([data-theme="dark"]) .msg.ok    { background:#f0fdf4; color:#14532d; border-color:#bbf7d0; }
  html:not([data-theme="dark"]) .msg.info  { background:#eff6ff; color:#1e3a8a; border-color:#bfdbfe; }

  /* IT4Y_PHASE177_THEME_TOGGLE_BTN_V1 */
  .theme-toggle { background:transparent; color:var(--text-dim); border:1px solid var(--border);
                  padding:6px 10px; border-radius:6px; cursor:pointer; font-size:14px; line-height:1; }
  .theme-toggle:hover { background:var(--panel-2); color:var(--text); }

  .muted { color: var(--muted); }
  .small { font-size: 11px; }
  .right { text-align: right; }
  .center { text-align: center; }

  /* ── Loading spinner ── */
  .spinner { display: inline-block; width: 14px; height: 14px;
             border: 2px solid var(--border); border-top-color: var(--accent);
             border-radius: 50%; animation: spin 0.6s linear infinite;
             vertical-align: middle; margin-right: 6px; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-overlay { position: fixed; top: var(--header-h); left: 0; right: 0;
                     height: 2px; background: var(--accent); transform-origin: left;
                     animation: progress 1.5s linear infinite; z-index: 100; display: none; }
  .loading-overlay.active { display: block; }
  @keyframes progress { 0% { transform: scaleX(0); } 50% { transform: scaleX(0.7); } 100% { transform: scaleX(1); } }

  /* ── Login views ── */
  .auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
  .auth-card { width: 100%; max-width: 440px; background: var(--panel);
               border: 1px solid var(--border); border-radius: 12px; padding: 28px; }
  .auth-card h1 { margin: 0 0 6px; font-size: 22px; }
  .auth-card .muted { font-size: 13px; line-height: 1.5; margin-bottom: 18px; }

  /* ── IT4Y_AUTH_ACCESS_PAGE_2026_06_01 — enterprise Operator Access Required ── */
  .access-card { max-width: 460px; padding: 34px 32px; text-align: center;
                 box-shadow: var(--shadow-md); }
  .access-card #acc-title { margin: 4px 0 10px; font-size: 23px; letter-spacing: -.2px; }
  .access-brand { display: flex; align-items: center; justify-content: center; gap: 8px;
                  font-weight: 700; color: var(--accent); font-size: 15px; margin-bottom: 20px; }
  .access-brand .brand-icon-slot { font-size: 18px; line-height: 1; }
  .access-brand-sub { color: var(--muted); font-weight: 600; }
  .access-lock { width: 60px; height: 60px; margin: 4px auto 14px; border-radius: 50%;
                 display: flex; align-items: center; justify-content: center;
                 background: var(--accent-soft); color: var(--accent); }
  .access-lede { font-size: 14px; line-height: 1.6; color: var(--text-dim);
                 max-width: 380px; margin: 0 auto 20px; }
  .access-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
  .access-primary { width: 100%; padding: 12px 16px; font-size: 14px; font-weight: 600; }
  .access-secondary { width: 100%; padding: 11px 16px; font-size: 13.5px; font-weight: 500;
                      text-align: center; text-decoration: none; }
  .access-secondary:hover { text-decoration: none; }
  .access-form { text-align: left; margin-top: 6px;
                 animation: accReveal .2s ease; }
  @keyframes accReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .access-form-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
  .access-form-actions #li-btn { flex: 0 0 auto; }
  .access-form-link { font-size: 13px; }
  .access-back-link { display: inline-block; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
  .access-foot { font-size: 12.5px; margin: 22px 0 0; padding-top: 16px;
                 border-top: 1px solid var(--border-soft); color: var(--muted); }
  .access-foot a { font-weight: 600; }

  details { background: var(--panel-2); border: 1px solid var(--border-soft);
            border-radius: 6px; padding: 8px 12px; margin-top: 14px; }
  details summary { cursor: pointer; color: var(--text-dim); font-size: 12px; }
  details[open] summary { margin-bottom: 8px; }

  /* ── Conversation bubbles (tickets) ── */
  .msg-bubble { background: var(--panel-2); border: 1px solid var(--border-soft);
                border-left: 3px solid var(--accent); padding: 12px 14px;
                margin-bottom: 8px; border-radius: 0 8px 8px 0; }
  .msg-bubble.internal { border-left-color: var(--warn); background: #2b2410; }
  .msg-bubble .meta { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
  .msg-bubble pre { margin: 0; white-space: pre-wrap; font: inherit; }

/* IT4Y_TICKETS_V2 — modern ticket UI */
.tkt-live-pill { font-size:11px; padding:2px 8px; border-radius:10px; background:#e8f5ec; color:#13863c; font-weight:600 }
.tkt-live-off  { background:#fff3cd; color:#7a5a00 }
.tkt-list { display:flex; flex-direction:column; gap:8px; margin-top:10px }
.tkt-card { display:grid; grid-template-columns: 44px 1fr auto auto; gap:14px; align-items:center;
            padding:12px 14px; border:1px solid var(--it4-border, #e5e7eb); border-radius:10px;
            background:var(--it4-card-bg, #fff); transition: all .15s ease; cursor:pointer }
.tkt-card:hover { border-color:#22a0ff; transform: translateY(-1px); box-shadow:0 2px 8px rgba(34,160,255,.08) }
.tkt-card.tkt-unread { border-left:3px solid #22a0ff; background:linear-gradient(90deg, rgba(34,160,255,.04), transparent) }
.tkt-card-avatar { width:40px; height:40px; border-radius:50%; background:#e0eaf5; color:#2563a8;
                   display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px }
.tkt-card-body { min-width:0 }
.tkt-card-row1 { display:flex; align-items:center; gap:8px }
.tkt-subject { font-weight:600; color: var(--it4-text, #1a1a1a); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100% }
.tkt-unread-badge { background:#ef4444; color:#fff; font-size:11px; padding:2px 7px; border-radius:9px; font-weight:700 }
.tkt-card-row2 { margin-top:2px }
/* IT4Y_PHASE93C_TICKET_ENRICH_V1 */
.tkt-card-row3 { margin-top:5px; display:flex; flex-wrap:wrap; align-items:center; gap:5px 12px; }
.tkt-email { font-weight:600; font-size:12.5px; color:var(--it4-text,#1a1a1a); overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.tkt-plan-wrap { display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
.tkt-plan-label { font-size:11px; font-weight:600; color:var(--muted,#6b7280); }
.tkt-planchip { font-size:11px; font-weight:600; padding:1px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe; white-space:nowrap; }
.tkt-planchip-empty { background:#f3f4f6; color:#6b7280; border-color:#e5e7eb }
.tkt-card-pills { display:flex; gap:5px; flex-wrap:wrap }
.tkt-card-meta { text-align:right; min-width:90px }
.tkt-msg-count { font-size:13px; color:#666 }
.tkt-last { margin-top:3px }
.tkt-pill { display:inline-block; padding:3px 9px; border-radius:12px; font-size:11px; font-weight:600;
            background:#f1f5f9; color:#475569; text-transform:capitalize }
.tkt-pri-urgent { background:#fee2e2; color:#b91c1c }
.tkt-pri-high   { background:#fef3c7; color:#92400e }
.tkt-pri-norm   { background:#dbeafe; color:#1d4ed8 }
.tkt-pri-low    { background:#f1f5f9; color:#64748b }
.tkt-st-open               { background:#fee2e2; color:#b91c1c }
.tkt-st-pending-customer   { background:#fef3c7; color:#92400e }
.tkt-st-pending-staff      { background:#fef9c3; color:#a16207 }
.tkt-st-resolved           { background:#dcfce7; color:#166534 }
.tkt-st-closed             { background:#f1f5f9; color:#475569 }
.tkt-dept { background:#f3f0ff; color:#6d28d9 }

/* Detail view */
.tkt-detail-head .breadcrumbs { display:flex; align-items:center; gap:8px }
.tkt-pills-row { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap }
.tkt-meta-text { margin-left:8px }
.tkt-toolbar { display:flex; align-items:center; gap:14px; margin-top:14px; padding-top:12px; border-top:1px solid var(--it4-border,#eef2f6) }
.tkt-toolbar-lbl { font-size:13px; display:flex; align-items:center; gap:6px }
.tkt-toolbar-lbl select { padding:4px 8px; border:1px solid #d1d5db; border-radius:6px }
.tkt-toolbar-spacer { flex:1 }

/* Chat-bubble conversation */
.tkt-conv-card { padding:16px }
.tkt-conv { max-height:520px; overflow-y:auto; padding:6px 4px; display:flex; flex-direction:column; gap:14px }
.tkt-empty { text-align:center; padding:30px; color:#9ca3af }
.tkt-row { display:flex; gap:10px; align-items:flex-start }
.tkt-row-right { flex-direction:row-reverse }
.tkt-avatar { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
              justify-content:center; font-weight:700; font-size:12px; color:#fff }
.tkt-avatar-cust  { background:linear-gradient(135deg,#22a0ff,#1d6fbd) }
.tkt-avatar-admin { background:linear-gradient(135deg,#10b981,#0d8b67) }
.tkt-bubble { max-width:72%; padding:10px 14px; border-radius:14px; background:#f3f4f6; position:relative }
.tkt-bubble-left  { border-top-left-radius:4px }
.tkt-bubble-right { background:#dbeafe; border-top-right-radius:4px }
.tkt-bubble-internal { background:#fef9c3 !important; border:1px dashed #ca8a04 }
.tkt-internal-flag { background:#ca8a04; color:#fff; font-size:10px; padding:2px 6px; border-radius:4px; font-weight:700; margin-right:4px }
.tkt-bubble-head { font-size:12px; color:#6b7280; margin-bottom:5px }
.tkt-bubble-head strong { color:#1f2937 }
.tkt-bubble-ts { float:right; margin-left:8px }
.tkt-bubble-body { font-size:14px; line-height:1.5; color:#1f2937; word-wrap:break-word }

/* Reply card */
.tkt-reply-card { padding:16px }
.tkt-reply-hint { margin-bottom:6px }
.tkt-reply-card textarea { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #d1d5db;
                            border-radius:8px; font-family:inherit; font-size:14px; resize:vertical }
.tkt-reply-card textarea:focus { outline:none; border-color:#22a0ff; box-shadow:0 0 0 2px rgba(34,160,255,.15) }
.tkt-reply-row { display:flex; align-items:center; gap:14px; margin-top:10px; flex-wrap:wrap }
.tkt-internal-lbl { font-size:13px; color:#4b5563; display:flex; align-items:center; gap:6px; cursor:pointer }
.tkt-reply-row .btn.primary { margin-left:auto; padding:8px 16px; background:#22a0ff; color:#fff; border:none;
                                border-radius:8px; font-weight:600; cursor:pointer }
.tkt-reply-row .btn.primary:hover { background:#1d6fbd }

/* Dark theme overrides */
/* end IT4Y_TICKETS_V2 */


/* IT4Y_NOTIF_BELL_V1 — Notification bell styling */
.notif-bell-wrap { position: relative; display: inline-flex; align-items: center; margin: 0 6px; }
.notif-bell {
  background: transparent; border: 1px solid var(--border, #e5e7eb); color: var(--text-dim, #4b5563);
  width: 36px; height: 36px; border-radius: 8px; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  transition: background .15s, transform .15s;
}
.notif-bell:hover { background: var(--panel-2, #f1f5f9); color: var(--text, #111827); }
.notif-bell-ico { font-size: 17px; line-height: 1; }
.notif-bell-badge {
  position: absolute; top: -4px; right: -4px;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}
.notif-shake { animation: notif-shake .55s ease-in-out; }
@keyframes notif-shake {
  0%,100% { transform: rotate(0); }
  20%     { transform: rotate(-14deg); }
  40%     { transform: rotate(12deg); }
  60%     { transform: rotate(-8deg); }
  80%     { transform: rotate(6deg); }
}

.notif-bell-panel {
  position: absolute; top: 44px; right: 0;
  width: 380px; max-width: 92vw; max-height: 540px;
  background: var(--panel, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px; box-shadow: 0 10px 32px rgba(0,0,0,.14);
  overflow: hidden; z-index: 10000;
  display: flex; flex-direction: column;
  animation: notif-panel-in .15s ease-out;
}
@keyframes notif-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notif-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--border, #eef2f6);
  background: var(--panel-2, #f8fafc);
}
.notif-list { overflow-y: auto; flex: 1; }
.notif-empty { text-align: center; padding: 36px 16px; color: #9ca3af; }
.notif-row {
  display: grid; grid-template-columns: 38px 1fr; gap: 10px;
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border, #eef2f6);
  transition: background .12s;
}
.notif-row:hover { background: var(--panel-2, #f8fafc); }
.notif-row:last-child { border-bottom: none; }
.notif-unread { background: linear-gradient(90deg, rgba(34,160,255,.08), transparent); }
.notif-unread:hover { background: linear-gradient(90deg, rgba(34,160,255,.14), var(--panel-2,#f8fafc)); }
.notif-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: #e0eaf5; color: #2563a8;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
.notif-body { min-width: 0; }
.notif-row1 { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text, #111827); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: #22a0ff; display: inline-block; flex-shrink: 0; }
.notif-row1 strong { color: var(--text, #111827); }
.notif-ago { margin-left: auto; font-size: 11px; color: #9ca3af; }
.notif-subject { font-size: 13px; font-weight: 600; color: var(--text, #111827); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-preview { margin-top: 2px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-tid { margin-top: 4px; font-size: 11px; }
.notif-tid code { background: var(--panel-2, #f1f5f9); padding: 1px 6px; border-radius: 4px; color: #6b7280; }
.notif-footer {
  display: flex; gap: 6px; align-items: center;
  padding: 10px 12px; border-top: 1px solid var(--border, #eef2f6);
  background: var(--panel-2, #f8fafc);
}
.notif-action {
  background: transparent; border: 1px solid var(--border, #d1d5db); color: var(--text-dim, #4b5563);
  padding: 5px 10px; font-size: 12px; border-radius: 6px; cursor: pointer; text-decoration: none;
  transition: all .15s;
}
.notif-action:hover { background: var(--panel, #fff); color: var(--text, #111827); border-color: #9ca3af; }
.notif-action-primary { background: #22a0ff; color: #fff !important; border-color: #22a0ff; margin-left: auto; }
.notif-action-primary:hover { background: #1d6fbd; border-color: #1d6fbd; }

/* Dark theme overrides */
/* end IT4Y_NOTIF_BELL_V1 */


/* ════════════════════════════════════════════════════════════════════════
 *  IT4Y_DARK_MODE_COMPREHENSIVE_V1 — Complete dark-mode coverage
 *  Sidebar + header already worked. This fills every other surface.
 * ════════════════════════════════════════════════════════════════════════ */

/* Body bg in dark mode (page background behind cards) */

/* Generic card surface */
body.dark .card,
body.dark .panel,
body.dark .it4dash,
body.dash[data-theme="dark"] .card,
html[data-theme="dark"] .card {
  background: #111827 !important;
  border-color: #1f2937 !important;
  color: #e5e7eb !important;
}






/* Dark mode banner background */

/* "More" / "Less" button */
.it4y-banner-toggle {
  background: transparent !important;
  border: 1px solid var(--border, #d1d5db) !important;
  color: var(--text-dim, #6b7280) !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin-left: auto !important;
}
.it4y-banner-toggle:hover {
  background: rgba(34,160,255,.08) !important;
  color: var(--brand, #22a0ff) !important;
  border-color: var(--brand, #22a0ff) !important;
}

.it4y-banner-dismiss:hover { background: rgba(239,68,68,.12) !important; color: #ef4444 !important; }


/* end IT4Y_TKT_BANNER_COLLAPSE_V1 */

/* ════════════════════════════════════════════════════════════════════════
 *  IT4Y_ADMIN_OVERVIEW_CONTRAST_V1 — fix Overview status-pills + numbers
 * ════════════════════════════════════════════════════════════════════════ */

/* Card text + numbers in dark mode */

/* Status pills baseline (all variants) */

/* Specific status colors — keep semantic intent in dark */

/* Status pill provider hue (Yotta blue, Hetzner red, Manual gray, Mock teal) */

/* Overview "Subscriptions by status" etc. cards — force number-column readable */

/* Row spacing in those cards (numbers right-aligned, pills left) */

/* end IT4Y_ADMIN_OVERVIEW_CONTRAST_V1 */

/* ════════════════════════════════════════════════════════════════════════
 *  IT4Y_ADMIN_TICKET_PILLS_V1 — Make ticket status pills readable in dark
 * ════════════════════════════════════════════════════════════════════════ */

/* Universal ticket-row pill styling */

/* Status: Resolved (green) */

/* Status: Open (blue) */

/* Status: Pending Customer (amber) */

/* Status: On Hold (gray) */

/* Status: Closed (slate) */

/* Department / priority pills — common departments and priorities */

/* end IT4Y_ADMIN_TICKET_PILLS_V1 */

#it4y-auth-splash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg,#f8fafc);z-index:60}.it4y-splash-spin{width:34px;height:34px;border:3px solid rgba(37,99,235,.18);border-top-color:#2563eb;border-radius:50%;animation:it4y-spin .7s linear infinite;margin:0 auto 14px}@keyframes it4y-spin{to{transform:rotate(360deg)}}

/* ============================================================
   IT4Y_BILLING_BTN_2026_06_07 — Stripe-grade invoice action buttons.
   Icon-led action chips for the admin Invoices "Actions" column.
   CSP-safe (class-based, served via adminp.css), theme-aware via CSS vars.
   Presentation only — all handlers unchanged.
   ============================================================ */
.ivb-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.ivb{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:28px;padding:0 10px;box-sizing:border-box;
  font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;letter-spacing:.1px;
  border-radius:7px;border:1px solid var(--border);cursor:pointer;
  background:var(--bg-2);color:var(--text-dim);
  transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .05s ease;
  -webkit-appearance:none;appearance:none;}
.ivb:hover{background:var(--row-hover);border-color:var(--muted);color:var(--text);}
.ivb:active{transform:translateY(.5px);}
.ivb:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.ivb svg{width:14px;height:14px;flex:0 0 auto;display:block;}
.ivb-ico{padding:0 7px;}
.ivb--paid{color:#15803d;background:#ecfdf3;border-color:#a7f0c0;}
.ivb--paid:hover{color:#0f6a32;background:#d7f8e4;border-color:#15803d;}
.ivb--void{color:#b91c1c;background:#fef2f2;border-color:#fbcaca;}
.ivb--void:hover{color:#991b1b;background:#fde0e0;border-color:#b91c1c;}
.ivb--danger{color:#b91c1c;background:#fef2f2;border-color:#fbcaca;}
.ivb--danger:hover{color:#fff;background:#dc2626;border-color:#dc2626;}
.ivb--send{color:#1d4ed8;background:#eff6ff;border-color:#bcd6fb;}
.ivb--send:hover{color:#1e40af;background:#dceafe;border-color:#2563eb;}
.ivb--edit,.ivb--history{color:var(--text-dim);background:var(--bg-2);border-color:var(--border);}
.ivb--edit:hover,.ivb--history:hover{color:var(--text);background:var(--row-hover);border-color:var(--muted);}
.ivb--print{color:#fff;background:var(--accent);border-color:var(--accent);font-weight:700;padding:0 12px;box-shadow:var(--shadow-sm);}
.ivb--print:hover{background:#1d4ed8;border-color:#1d4ed8;color:#fff;box-shadow:var(--shadow-md);}
.ivb--print:focus-visible{box-shadow:0 0 0 3px var(--accent-soft);}
html[data-theme="dark"] .ivb--paid{color:#4ade80;background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.34);}
html[data-theme="dark"] .ivb--paid:hover{color:#86efac;background:rgba(34,197,94,.24);border-color:#4ade80;}
html[data-theme="dark"] .ivb--void,html[data-theme="dark"] .ivb--danger{color:#f87171;background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.34);}
html[data-theme="dark"] .ivb--void:hover{color:#fca5a5;background:rgba(239,68,68,.24);border-color:#f87171;}
html[data-theme="dark"] .ivb--danger:hover{color:#fff;background:#dc2626;border-color:#dc2626;}
html[data-theme="dark"] .ivb--send{color:#60a5fa;background:rgba(59,130,246,.16);border-color:rgba(59,130,246,.36);}
html[data-theme="dark"] .ivb--send:hover{color:#93c5fd;background:rgba(59,130,246,.26);border-color:#60a5fa;}
html[data-theme="dark"] .ivb--print{background:var(--accent);border-color:var(--accent);color:#06121f;}
html[data-theme="dark"] .ivb--print:hover{background:#5fb0ff;border-color:#5fb0ff;color:#06121f;}


/* IT4Y_ADMIN_SUBS_ACTIONS_MENU_2026_06_12 — admin subscriptions grid.
   Scoped to .subs-grid (the subscriptions table only). Base values follow the
   stylesheet's dark-first convention; light overrides ride
   html:not([data-theme="dark"]) like the existing .pill palette. */
.subs-grid th{font-size:10px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;text-align:left;vertical-align:middle;white-space:nowrap}
html:not([data-theme="dark"]) .subs-grid th{color:#64748b}
.subs-grid td{padding:10px 12px;vertical-align:middle}
.subs-grid .pill{display:inline-block;white-space:nowrap;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;letter-spacing:.04em}
.st-emails{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.st-badge{display:inline-block;white-space:nowrap;border-radius:999px;padding:3px 12px;font-size:11px;font-weight:600;letter-spacing:.03em}
.st-badge-off{background:#26303f;color:#94a3b8}
.st-badge-on{background:#14331a;color:#b3f5c4}
html:not([data-theme="dark"]) .st-badge-off{background:#f1f5f9;color:#475569}
html:not([data-theme="dark"]) .st-badge-on{background:#dcfce7;color:#15803d}
.st-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:30px;padding:0;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer}
.st-menu-btn:hover{background:var(--row-hover,rgba(100,116,139,.12));color:var(--text)}
.st-menu-btn svg{width:17px;height:17px}
.asub-pop{position:fixed;z-index:9300;min-width:236px;background:#0f172a;border:1px solid #1e293b;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.55);padding:6px;display:flex;flex-direction:column;gap:2px}
.asub-pop .sp-item{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:7px;padding:9px 12px;font-size:13px;cursor:pointer;white-space:nowrap;font-family:inherit}
.asub-pop .sp-primary{color:#93c5fd;font-weight:600}
.asub-pop .sp-secondary{color:#cbd5e1}
.asub-pop .sp-danger{color:#f87171}
.asub-pop .sp-item:hover{background:#1e293b}
.asub-pop .sp-danger:hover{background:rgba(248,113,113,.12)}
html:not([data-theme="dark"]) .asub-pop{background:#fff;border-color:#e2e8f0;box-shadow:0 12px 32px rgba(15,23,42,.18)}
html:not([data-theme="dark"]) .asub-pop .sp-primary{color:#1d4ed8}
html:not([data-theme="dark"]) .asub-pop .sp-secondary{color:#334155}
html:not([data-theme="dark"]) .asub-pop .sp-danger{color:#dc2626}
html:not([data-theme="dark"]) .asub-pop .sp-item:hover{background:#f1f5f9}
html:not([data-theme="dark"]) .asub-pop .sp-danger:hover{background:#fef2f2}

/* IT4Y_ADMIN_SUBS_CYCLE_COLUMN_2026_06_12 — dedicated billing-cycle badge.
   Neutral slate, rounded-full (light ≈ bg-slate-50 / text-slate-700 /
   border-slate-200/60); dark-first base per stylesheet convention. */
.st-cycle{display:inline-block;white-space:nowrap;border-radius:999px;padding:3px 12px;font-size:11px;font-weight:600;letter-spacing:.03em;background:#222d3d;color:#cbd5e1;border:1px solid rgba(71,85,105,.55)}
html:not([data-theme="dark"]) .st-cycle{background:#f8fafc;color:#334155;border:1px solid rgba(226,232,240,.6)}

/* IT4Y_DELETION_GRACE_2026_06_12 — scheduled VPS teardown date in the subs grid. */
.subs-grid .st-teardown{margin-top:4px;font-size:11px;font-weight:600;letter-spacing:.02em;color:#fbbf24}
html:not([data-theme="dark"]) .subs-grid .st-teardown{color:#b45309}

/* IT4Y_ADMIN_SUBS_IP_COLUMN_2026_06_12 — IP ADDRESS column: low-contrast
   monospaced system identifier + subtle inline copy button (dark-first base
   per stylesheet convention, light override = slate-500). */
.subs-grid td.st-ipcell{white-space:nowrap}
.subs-grid .st-ip{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;font-size:11px;letter-spacing:.01em;color:#94a3b8;white-space:nowrap;vertical-align:middle}
html:not([data-theme="dark"]) .subs-grid .st-ip{color:#64748b}
.subs-grid .st-ipcopy{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;padding:2px 3px;border:none;background:transparent;color:#94a3b8;opacity:.55;cursor:pointer;border-radius:4px;vertical-align:middle;line-height:0}
html:not([data-theme="dark"]) .subs-grid .st-ipcopy{color:#64748b}
.subs-grid .st-ipcopy:hover{opacity:1;background:rgba(100,116,139,.14)}

/* IT4Y_SUBS_VISUAL_POLISH_2026_06_12 — flat tab bar + search input for the subscriptions view.
   Dark-first base per stylesheet convention; html:not([data-theme="dark"])
   carries the light overrides (spec: active = border-b-2 border-blue-600 +
   text-slate-900; focus ring = border-blue-500 + 2px blue-500/20). */
/* IT4Y_SUBS_TABS_CLOUDSCAPE_2026_06_12 */
/* Cloudscape-grade tab bar: blue active label +
   3px rounded inset indicator (::after), hairline separators between tabs
   (::before), uniform 600 weight (no width shift on switch), focus ring.
   Dark-first base; light overrides per stylesheet convention. */
.st-tabs{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:14px}
.st-tabs .st-tab{appearance:none;-webkit-appearance:none;position:relative;background:transparent;border:none;padding:9px 18px 12px;font:inherit;font-size:13px;font-weight:600;line-height:1;letter-spacing:.01em;color:#94a3b8;cursor:pointer;white-space:nowrap;border-radius:0;transition:color .12s ease}
html:not([data-theme="dark"]) .st-tabs .st-tab{color:#475569}
.st-tabs .st-tab + .st-tab::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-58%);height:14px;width:1px;background:var(--border)}
.st-tabs .st-tab::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:transparent;transition:background .12s ease}
.st-tabs .st-tab:hover{color:#539fe5}
html:not([data-theme="dark"]) .st-tabs .st-tab:hover{color:#0972d3}
.st-tabs .st-tab.on{color:#539fe5}
html:not([data-theme="dark"]) .st-tabs .st-tab.on{color:#0972d3}
.st-tabs .st-tab.on::after{background:#539fe5}
html:not([data-theme="dark"]) .st-tabs .st-tab.on::after{background:#0972d3}
.st-tabs .st-tab:focus-visible{outline:2px solid #539fe5;outline-offset:-3px;border-radius:4px}
html:not([data-theme="dark"]) .st-tabs .st-tab:focus-visible{outline-color:#0972d3}
.st-tabs .st-tab-n{margin-left:7px;font-size:11px;font-weight:600;color:inherit;opacity:.62;font-variant-numeric:tabular-nums}
.st-search{position:relative;display:inline-flex;align-items:center}
.st-search-ico{position:absolute;left:10px;color:#94a3b8;opacity:.8;pointer-events:none}
html:not([data-theme="dark"]) .st-search-ico{color:#64748b}
.st-search-in{padding:8px 12px 8px 32px;border:1px solid var(--border);border-radius:6px;background:var(--bg-2);color:var(--text);min-width:280px;font:inherit;font-size:13px;transition:border-color .15s ease,box-shadow .15s ease}
.st-search-in:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.2)}
.st-search-in::placeholder{color:var(--muted);opacity:.8}

/* IT4Y_SUBS_ROW_DENSITY_2026_06_12 — high-density structured row cells for the
   subscriptions grid (dark-first base; light overrides on
   html:not([data-theme="dark"]) per stylesheet convention). */
.subs-grid tbody tr{transition:background .12s ease}
.subs-grid tbody tr:hover{background:rgba(148,163,184,.07)}
html:not([data-theme="dark"]) .subs-grid tbody tr:hover{background:#f8fafc}
.st-cell-pri{font-size:13px;font-weight:600;line-height:1.4;color:var(--text);display:flex;align-items:center;gap:6px;white-space:nowrap}
.st-cell-sub{font-size:12px;line-height:1.4;color:#94a3b8;margin-top:2px}
html:not([data-theme="dark"]) .st-cell-sub{color:#64748b}
.st-cell-sub.st-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;font-size:11px;letter-spacing:.01em;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.st-kv{display:flex;align-items:baseline;gap:6px;white-space:nowrap;line-height:1.7}
.st-kv-k{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#64748b;min-width:42px}
html:not([data-theme="dark"]) .st-kv-k{color:#94a3b8}
.st-kv-v{font-size:12px;color:#cbd5e1;font-variant-numeric:tabular-nums}
html:not([data-theme="dark"]) .st-kv-v{color:#334155}
.st-num{font-variant-numeric:tabular-nums}
.subs-grid .st-badge{font-size:10px;padding:2px 8px}
.subs-grid td code{font-size:11px}
.st-protected{font-size:11px;color:#94a3b8;white-space:nowrap}
html:not([data-theme="dark"]) .st-protected{color:#64748b}

/* IT4Y_INVOICE_PAYMENT_COLUMN_2026_06_12 — invoices grid PAYMENT STATUS pastel badges (rounded-full,
   border slate-200/.5).  Light pastels per spec; dark-theme overrides. */
.pay-badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.01em;border:1px solid transparent;white-space:nowrap}
.pay-badge.pay-paid{background:#dcfce7;color:#15803d}
.pay-badge.pay-unpaid{background:#f1f5f9;color:#475569}
.pay-badge.pay-refunded{background:#fef3c7;color:#b45309}
html[data-theme="dark"] .pay-badge.pay-paid{background:#14331a;color:#b3f5c4}
html[data-theme="dark"] .pay-badge.pay-unpaid{background:#26303f;color:#cbd5e1}
html[data-theme="dark"] .pay-badge.pay-refunded{background:#3a2e10;color:#fcd34d}


/* ════════════════════════════════════════════════════════════════════════════
   IT4Y_NOTIF_MOBILE_2026_06_22 — mobile-responsive notifications dropdown.
   The base .notif-bell-panel is position:absolute; right:0; width:380px, anchored
   to the bell. On mobile the bell sits mid-header, so right:0 pins the panel's
   right edge to the bell and it extends LEFT off the viewport (measured left:-120px
   on a 389px screen) → clipped/squished. On <=760px make it a fixed, viewport-
   anchored, near-full-width sheet just below the fixed .app-header (≈106px) so all
   notification text, dates and badges are fully visible and it never overlaps the
   sidebar toggle. Appended last to win the cascade. ═══════════════════════════ */
@media (max-width:760px){
  .notif-bell-panel{
    position: fixed !important;
    top: 112px !important;            /* clear the fixed .app-header (~106px) */
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 124px) !important;
  }
}

/* IT4Y_ADMIN_AUDIT_SUBSGRID_TABLET_2026_07_02 — wide .dgrid data tables overflowed the page in the 769-1100px tablet band (no rule existed). Contain with horizontal scroll; scoped so desktop(>1100) and mobile(<=768 card-stack) are untouched. */
@media (min-width:769px) and (max-width:1100px){
  .app-main table.dgrid{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* IT4Y_YOTTA_MOBILE_2026_07_02 — Yotta Availability tab mobile-responsive.
   Desktop >768px: identical rendering — .yotta-root/.yotta-tbl-wrap/.yotta-tbl re-apply the
   exact values moved out of inline data-sty by the paired FE patch (padding:20px; wrapper
   bg/border/radius/overflow-x:auto; table min-width:760px). Mobile <=768px: the 8-column
   table becomes labeled stacked cards (td::before = attr(data-label), same pattern as
   IT4Y_SUBS_MOBILE_LABELS) so every column, indicator and control stays visible with no
   page-level horizontal overflow. display rules are !important to beat generic mobile
   table rules from the SPA adopted stylesheets. */
.yotta-root{ padding:20px; }
.yotta-tbl-wrap{ background:#fff; border:1px solid #e2e8f0; border-radius:8px; overflow-x:auto; }
.yotta-tbl{ min-width:760px; }
@media (max-width: 768px){
  .yotta-root{ padding:10px 0; }
  .yotta-tbl-wrap{ background:transparent; border:none; border-radius:0; overflow:visible; }
  .yotta-tbl{ min-width:0; }
  .yotta-tbl, .yotta-tbl tbody, .yotta-tbl tr, .yotta-tbl td{ display:block !important; width:100% !important; box-sizing:border-box; }
  .yotta-tbl thead, #yotta-avail-root .yotta-tbl thead{ display:none !important; } /* id-scoped twin outranks any future !important generic thead rule in the SPA adopted sheets */
  .yotta-tbl tr{ background:#fff; border:1px solid #e2e8f0 !important; border-radius:10px; padding:10px 12px; margin-bottom:10px; }
  .yotta-tbl td{ display:flex !important; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:7px 0 !important; border-bottom:1px solid #f1f5f9 !important; text-align:left !important; }
  .yotta-tbl td:last-child{ border-bottom:none !important; }
  .yotta-tbl td::before{ content:attr(data-label); color:#64748b; font-size:10px; text-transform:uppercase; letter-spacing:.5px; font-weight:700; flex:0 0 auto; }
  .yotta-tbl td:first-child, .yotta-tbl td:nth-child(2){ display:inline-flex !important; width:auto !important; border-bottom:none !important; padding:0 8px 6px 0 !important; }
  .yotta-tbl td:first-child::before, .yotta-tbl td:nth-child(2)::before{ content:none !important; } /* !important: the generic td[data-label]::before rule in the SPA adopted sheets ties on specificity and comes later in cascade order */
  .yotta-tbl td:nth-child(2){ font-size:15px; }
  .yotta-tbl tr td[colspan]{ display:block !important; padding:14px 4px !important; border:none !important; } /* (0,2,2) outranks the :first-child header rule regardless of order */
  #yotta-probe-btn{ width:100% !important; }
}

/* IT4Y_SBPAR_2026_07_02 — customer-panel sidebar parity: light active text + keyboard focus ring */
html:not([data-theme="dark"]) .sb-item.active { color:#1e3a8a; }
.sb-item:focus-visible, .sb-grp-hdr:focus-visible { outline:2px solid var(--sn-active); outline-offset:-2px; }


/* ══════════════════════════════════════════════════════════════════════════
   IT4Y_SUBS_UX_2026_07_11 — Subscriptions grid UX. The 10-column .subs-grid had
   no horizontal-scroll containment (the existing overflow rule only targets
   table.dgrid), so wide content pushed the whole page sideways and the Emails /
   Actions columns fell off the viewport. Frame the table in a bordered, rounded
   data-panel that scrolls WITHIN itself; add a mobile card-stack (<=768px + the
   is-mobile / force-mobile-preview classes) that reuses the data-label attrs
   already on every <td>; and style the empty / error / loading states. Scoped to
   .subs-wrap / .subs-grid / .subs-empty / .subs-loading — nothing else affected.
   Appended last to win the cascade. ═══════════════════════════════════════════ */
.subs-wrap{ border:1px solid var(--border); border-radius:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--panel,var(--bg-2)); }
.subs-wrap .subs-grid{ margin:0; width:100%; border-collapse:collapse; }
.subs-wrap .subs-grid thead th{ position:sticky; top:0; z-index:1; background:var(--panel-2,#0f1729); }
html:not([data-theme="dark"]) .subs-wrap{ background:#fff; }
html:not([data-theme="dark"]) .subs-wrap .subs-grid thead th{ background:#f8fafc; }
.subs-grid tbody tr + tr{ border-top:1px solid var(--border-soft,var(--border)); }

/* Empty / error / loading */
.subs-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:46px 20px; text-align:center; }
.subs-empty svg{ width:40px; height:40px; color:var(--muted,#94a3b8); opacity:.6; }
.subs-empty .subs-empty-t{ font-size:14.5px; font-weight:650; color:var(--text); }
.subs-empty .subs-empty-s{ font-size:12.5px; color:var(--muted,#94a3b8); max-width:360px; line-height:1.55; }
.subs-empty .btn{ margin-top:4px; }
.subs-empty.subs-empty-err svg{ color:#f87171; opacity:.85; }
.subs-loading{ display:flex; align-items:center; gap:10px; padding:26px 2px; color:var(--muted,#94a3b8); font-size:13px; }
.subs-loading .subs-spin{ width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--accent,#2563eb); border-radius:50%; animation:subs-spin .7s linear infinite; }
@keyframes subs-spin{ to{ transform:rotate(360deg); } }

/* Mobile card-stack — real viewport (<=768px) */
@media (max-width:768px){
  .subs-wrap{ border:none; border-radius:0; overflow:visible; background:transparent; }
  .subs-grid{ display:block !important; width:100% !important; overflow:visible !important; white-space:normal !important; }
  .subs-grid thead{ display:none !important; }
  .subs-grid tbody{ display:block !important; width:100%; }
  .subs-grid tbody tr{ display:block !important; border:1px solid var(--border) !important; border-radius:12px; padding:12px 14px; margin:0 0 12px; background:var(--panel,#fff); }
  .subs-grid tbody tr + tr{ border-top:1px solid var(--border) !important; }
  .subs-grid td{ display:flex !important; align-items:flex-start; justify-content:space-between; gap:12px; width:100% !important; padding:8px 0 !important; border-bottom:1px solid var(--border-soft,#f1f5f9) !important; text-align:right; }
  .subs-grid td:last-child{ border-bottom:none !important; padding-top:12px !important; justify-content:flex-end; }
  .subs-grid td::before{ content:attr(data-label); flex:0 0 36%; text-align:left; color:var(--muted,#64748b); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding-top:3px; }
  .subs-grid td[data-label=""]::before{ content:none; }
  .subs-grid .st-emails{ align-items:flex-end; }
  .subs-grid .st-cell-pri, .subs-grid .st-kv, .subs-grid .st-cell-sub{ white-space:normal; }
  .subs-grid .st-menu-btn{ width:auto; padding:6px 14px; }
}
/* Mobile card-stack — Chrome-previewable via body.is-mobile / body.force-mobile-preview */
body.is-mobile .subs-wrap, body.force-mobile-preview .subs-wrap{ border:none !important; border-radius:0 !important; overflow:visible !important; background:transparent !important; }
body.is-mobile .subs-grid, body.force-mobile-preview .subs-grid{ display:block !important; width:100% !important; overflow:visible !important; white-space:normal !important; }
body.is-mobile .subs-grid thead, body.force-mobile-preview .subs-grid thead{ display:none !important; }
body.is-mobile .subs-grid tbody, body.force-mobile-preview .subs-grid tbody{ display:block !important; width:100%; }
body.is-mobile .subs-grid tbody tr, body.force-mobile-preview .subs-grid tbody tr{ display:block !important; border:1px solid var(--border) !important; border-radius:12px; padding:12px 14px; margin:0 0 12px; background:var(--panel,#fff); }
body.is-mobile .subs-grid tbody tr + tr, body.force-mobile-preview .subs-grid tbody tr + tr{ border-top:1px solid var(--border) !important; }
body.is-mobile .subs-grid td, body.force-mobile-preview .subs-grid td{ display:flex !important; align-items:flex-start; justify-content:space-between; gap:12px; width:100% !important; padding:8px 0 !important; border-bottom:1px solid var(--border-soft,#f1f5f9) !important; text-align:right; }
body.is-mobile .subs-grid td:last-child, body.force-mobile-preview .subs-grid td:last-child{ border-bottom:none !important; padding-top:12px !important; justify-content:flex-end; }
body.is-mobile .subs-grid td::before, body.force-mobile-preview .subs-grid td::before{ content:attr(data-label); flex:0 0 36%; text-align:left; color:var(--muted,#64748b); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding-top:3px; }
body.is-mobile .subs-grid td[data-label=""]::before, body.force-mobile-preview .subs-grid td[data-label=""]::before{ content:none; }
body.is-mobile .subs-grid .st-emails, body.force-mobile-preview .subs-grid .st-emails{ align-items:flex-end; }
body.is-mobile .subs-grid .st-cell-pri, body.force-mobile-preview .subs-grid .st-cell-pri, body.is-mobile .subs-grid .st-kv, body.force-mobile-preview .subs-grid .st-kv, body.is-mobile .subs-grid .st-cell-sub, body.force-mobile-preview .subs-grid .st-cell-sub{ white-space:normal; }
body.is-mobile .subs-grid .st-menu-btn, body.force-mobile-preview .subs-grid .st-menu-btn{ width:auto; padding:6px 14px; }


/* IT4Y_ADMIN_MOBILE_TARGETS_2026_07_24 -- mobile admin actions meet the
   44px touch-target floor without changing the desktop-density contract.
   The body/header specificity is intentional: runtime-adopted mobile sheets
   are appended after this asset and otherwise reapply 34px compact controls. */
@media (max-width:768px){
  body.is-mobile .app-header .right button.notif-bell,
  body.force-mobile-preview .app-header .right button.notif-bell,
  body.is-mobile .app-header .right button.theme-toggle,
  body.force-mobile-preview .app-header .right button.theme-toggle,
  body.is-mobile .app-header .right button.btn.small,
  body.force-mobile-preview .app-header .right button.btn.small,
  body.is-mobile .app-main button.btn.small,
  body.force-mobile-preview .app-main button.btn.small{
    min-width:44px !important;
    min-height:44px !important;
  }
  body.is-mobile .app-header .right button.btn.small,
  body.force-mobile-preview .app-header .right button.btn.small,
  body.is-mobile .app-main button.btn.small,
  body.force-mobile-preview .app-main button.btn.small{
    padding:8px 12px !important;
  }
  body.is-mobile button.p360-hamburger,
  body.force-mobile-preview button.p360-hamburger{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
  }
}