/* assets/cases.page.css (FULL CLEAN COPY)
 * Extracted from inline <style> blocks in cases.html
 * Purpose: CSP-ready enterprise polish without layout changes
 */

html.no-auth-flash #authAction{visibility:hidden}

/* Ensure auth action link never renders as underlined text */
#authAction.no-underline{ text-decoration:none; }

html.guard main.wrap{visibility:hidden}

/* ============================================================
   P0: Reduce inline-style dependencies (CSP-friendly)
   - Replace inline background/whitespace rules with classes
   ============================================================ */

/* Read-only value blocks (styled like inputs) */
.input.ro{ background:#fafafa; }

/* Preserve description formatting without inline style */
.ro-pre{ white-space:pre-wrap; word-break:break-word; min-height:120px; }

/* Utility width used by Uploaded files table header */
.w170{ width:170px; }

/* ============================================================
       Enterprise polish (no layout/structure changes)
       NOTE: Quill + legacy editor fixed-height/scroll is in assets/style.css
       ============================================================ */

    .cases-head{
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
      margin-bottom:8px;
    }
    .cases-head h1{margin:0; letter-spacing:-.01em}
    .cases-sub{margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.45}
    .cases-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
    .cases-actions .input{max-width:340px}

    /* Buttons (ensure disabled looks enterprise) */
    .btn:disabled, .cr-btn:disabled{
      opacity:.55;
      cursor:not-allowed;
      filter:saturate(.85);
    }

    .pill{
      display:inline-flex; align-items:center; justify-content:center; gap:6px;
      padding:5px 10px; border-radius:999px; border:1px solid var(--line);
      font-size:12px; font-weight:800; background:#fff;
      min-width:44px;
    }
    .sev-s1{border-color:#fecaca}
    .sev-s2{border-color:#fed7aa}
    .sev-s3{border-color:#fde68a}
    .sev-s4{border-color:#bbf7d0}

    .status{
      display:inline-flex; align-items:center; gap:8px;
      padding:5px 10px; border-radius:999px; border:1px solid var(--line);
      font-size:12px; font-weight:800; background:#fff;
      white-space:nowrap;
    }
    .status .dot{width:8px;height:8px;border-radius:50%;background:#94a3b8}
    .status.new .dot{background:#0ea5e9}
    .status.waitcust .dot{background:#f59e0b}
    .status.waitsup .dot{background:#3b82f6}
    .status.closed .dot{background:#64748b}
    .status.closure .dot{background:#a855f7}

    /* Toolbar alignment (cohesive + denser, “console”) */
    .cases-toolbar{
      display:grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.05fr) minmax(0, 0.9fr);
      gap:10px;
      align-items:start;
      margin-top:10px;
      padding:9px;
      border:1px solid var(--line);
      border-radius:12px;
      background:#fbfdff;
    }
    .tb-group{display:flex; flex-direction:column; gap:7px; min-width:0; overflow:hidden;}
    .tb-label{font-size:13px; font-weight:900; color:var(--muted); letter-spacing:.02em; white-space:nowrap;}
    .tb-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-width:0;}
    .cases-toolbar select.input,
    .cases-toolbar input.input{
      padding:8px 11px;
      border-radius:10px;
      border:1px solid var(--line);
      background:#fff;
      height:38px;
      line-height:18px;
    }
    /* Filters row: grid prevents overlap into Sort on laptop widths */
    .tb-group.filters .tb-row{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
      gap:8px;
      align-items:center;
      min-width:0;
    }
    .tb-group.filters .tb-row select.input{width:100%; min-width:0; max-width:100%;}
    .tb-group.filters .tb-row .tb-clear{justify-self:end; height:38px; padding:7px 11px; margin-left:0; white-space:nowrap;}
    .tb-group.sorting{overflow:hidden;}
    .tb-group.sorting select.input{width:100%; min-width:160px; max-width:440px;}
    .tb-pager{display:flex; flex-direction:column; gap:6px; align-items:flex-end;}
    .tb-pager .tb-row{justify-content:flex-end;}
    .cases-count,.cases-pageinfo{font-size:13px; color:var(--muted); font-weight:800; white-space:nowrap;}
    #casesPageSize{min-width:110px !important; width:auto;}
    .cases-sorthint{
      font-size:13px;
      color:var(--muted);
      font-weight:800;
      white-space:nowrap;
      opacity:.9;
    }
    #casesDensity{min-width:150px !important; width:auto;}

    /* ✅ Global time context label (enterprise) */
    .tz-note{
      margin-top:8px;
      font-size:13px;
      color:var(--muted);
      font-weight:850;
      letter-spacing:.01em;
    }
    .tz-note:empty{display:none}
    #tzNoteList{text-align:right}
    #tzNoteDetail{margin-top:6px}

    @media (max-width: 1240px) and (min-width: 981px){
      .cases-toolbar{ grid-template-columns: minmax(0, 1.75fr) minmax(0, 0.95fr) minmax(0, 0.8fr); }
    }

    /* Filters wrap nicely on laptop widths */
    @media (max-width: 1240px){
      .tb-group.filters .tb-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .tb-group.filters .tb-row .tb-clear{ grid-column: 1 / -1; justify-self:end; }
    }

    @media (max-width: 980px){
      .cases-toolbar{ grid-template-columns:1fr; }
      .tb-pager{ align-items:flex-start; }
      .tb-group.filters .tb-row{ grid-template-columns:1fr; }
      .tb-group.filters .tb-row .tb-clear{ grid-column:auto; justify-self:end; }
    }

    /* Table (denser, more “enterprise data table”) */
    .tbl{width:100%; border-collapse:separate; border-spacing:0; margin-top:10px}
    .tbl th,.tbl td{
      padding:8px 10px;
      border-bottom:1px solid var(--line);
      text-align:left;
      vertical-align:top;
      font-size:13px;
    }

    /* Enterprise alignment: right-align numeric/time columns */
    .tbl th[data-col="case"],
    .tbl td[data-col="case"],
    .tbl th[data-col="updated"],
    .tbl td[data-col="updated"]{
      text-align:right;
    }
    .tbl th{
      font-size:13px;
      color:var(--muted);
      font-weight:950;
      letter-spacing:.03em;
      text-transform:none;

      position:sticky;
      top: var(--topbar-h, 58px);
      z-index:2;

      background:#fbfdff;
      box-shadow: 0 1px 0 rgba(15,23,42,.06);
      user-select:none;
    }

    /* ✅ Enterprise: resizable columns (session only) */
    #casesTable.tbl{ table-layout:fixed; }
    #casesTable.tbl thead th:not(.col-select){ padding-right:18px; }
    #casesTable.tbl .col-resizer{
      position:absolute;
      top:0;
      right:-4px;
      width:12px;
      height:100%;
      cursor:col-resize;
      z-index:5;
    }
    #casesTable.tbl .col-resizer:after{
      content:'';
      position:absolute;
      top:18%;
      bottom:18%;
      left:5px;
      width:1px;
      background:rgba(148,163,184,.55);
      opacity:0;
      transition:opacity .15s ease;
    }
    #casesTable.tbl th:hover .col-resizer:after,
    #casesTable.tbl .col-resizer:focus:after{
      opacity:.9;
    }

    html.col-resize-active, html.col-resize-active *{ cursor:col-resize !important; }
    html.col-resize-active{ user-select:none; }

    /* ✅ Clickable sort headers + indicators */
    .th-sort{cursor:pointer; white-space:nowrap;}
    .th-sort:hover{color:var(--ink);}
    .th-sort .th-wrap{display:inline-flex; align-items:center; gap:8px;}
    .th-sort .th-ic{font-size:12px; opacity:.55; transform: translateY(-.5px);}
    .th-sort.sorted .th-ic{opacity:.95;}

    /* Subtle zebra + clearer hover */
    .tbl tbody tr:nth-child(even) td{ background:#fcfdff; }
    .tbl tr.row-open{cursor:pointer}
    .tbl tr.row-open:hover td{background:#f3f8ff}
    .tbl tr.row-open:active td{background:#eaf2ff}
    .tbl tr.row-open:focus{outline:none}
    .tbl tr.row-open:focus-visible td{
      box-shadow: inset 0 0 0 2px rgba(59,130,246,.35);
      background:#f6fbff;
    }

    /* ✅ Selected row highlight (persist last opened case) */
    .tbl tr.row-selected td{ background:#f3f8ff !important; }
    .tbl tr.row-selected td:first-child{ box-shadow: inset 3px 0 0 rgba(59,130,246,.55); }

    .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
    .case-link{font-weight:900}
    .subj{font-weight:900; font-size:14px; line-height:1.25}
    .note.tight{margin-top:2px}

    /* ✅ Enterprise: remove tutorial tip copy (keep container minimal) */
    .cases-tip{ display:none; }

    .empty{
      border:1px dashed var(--line); border-radius:12px; padding:14px; margin-top:10px;
      color:var(--muted); font-size:13px;
    }
    .empty strong{color:var(--ink)}
    .empty ul{margin:10px 0 0 18px; padding:0}
    .empty li{margin:6px 0}

    .split{
      display:grid; grid-template-columns: 1.1fr .9fr; gap:14px; margin-top:14px;
    }
    @media(max-width:900px){ .split{grid-template-columns:1fr} }

    .thread{
      border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff;
    }
    .thread-hd{
      padding:12px 14px;
      border-bottom:1px solid var(--line);
      background:#fbfdff;
      display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
    }
    .thread-hd h2{margin:0; font-size:18px}
    .thread-meta{color:var(--muted); font-size:12px; margin-top:4px}
    .thread-body{padding:12px 14px}

    /* Next-action banner */
    .case-action{
      display:none;
      margin:10px 14px 0;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid var(--line);
      font-size:13px;
      background:#fff;
    }
    .case-action.info{background:#f6fbff; border-color:#dbeafe}
    .case-action.warn{background:#fff7ed; border-color:#fed7aa}
    .case-action.ok{background:#f0f9ff; border-color:#bae6fd}
    .case-action.muted{background:#fafafa; border-color:#e5e7eb}

    /* Timeline-ish messages */
    .msg{
      border:1px solid var(--line); border-radius:12px; padding:12px; margin:10px 0;
      background:#fff;
      position:relative;
    }
    .msg.from-you{border-left:4px solid #60a5fa}
    .msg.from-support{border-left:4px solid #a855f7}
    .msg-top{display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap}
    .msg-from{font-weight:900}
    .msg-time{color:var(--muted); font-size:12px}

    /* ✅ FIX: prevent half-height/clipped text in message bodies (normal + system text) */
    .msg-text{
      margin-top:8px;
      line-height:1.55;
      overflow:visible;
      padding-top:1px;
    }
    .msg-text *{
      line-height:1.55;
    }

    .msg-text img{
      display:block;
      max-width:100%;
      margin-top:8px;
      border:1px solid var(--line);
      border-radius:10px;
    }

    .att-row{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap}
    .att{
      display:inline-flex; align-items:center; gap:8px; padding:8px 10px;
      border:1px solid var(--line); border-radius:10px; background:#fff; font-size:13px;
    }
    .att small{color:var(--muted)}
    .replybox{
      border-top:1px solid var(--line); padding:12px 14px; background:#fafafa;
    }

    .dropzone{
      border:1px dashed var(--line); border-radius:12px; padding:12px;
      background:#fff; color:var(--muted); font-size:13px;
    }
    .dropzone.drop-active{background:#fbfdff}
    .dropzone strong{color:var(--ink)}
    .filelist{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap}
    .filechip{
      border:1px solid var(--line); border-radius:999px; padding:6px 10px; background:#fff;
      display:inline-flex; align-items:center; gap:10px; font-size:13px;
    }
    .filechip button{border:0; background:transparent; cursor:pointer; font-weight:900}
    .hint{font-size:12px; color:var(--muted); margin-top:6px}
    .uploadstatus{margin-top:8px; font-size:12px; color:var(--muted); font-weight:800}

    /* ✅ Upload progress bar */
    .upl{
      margin-top:10px;
      display:none;
      gap:8px;
      align-items:center;
      flex-wrap:wrap;
    }
    .upl.show{display:flex}
    .uplbar{
      flex:1 1 240px;
      height:10px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      overflow:hidden;
      min-width:200px;
    }
    .uplbar > i{
      display:block;
      height:100%;
      width:0%;
      background:#3b82f6;
      border-radius:999px;
      transition: width .15s linear;
    }
    .uplpct{font-size:12px; color:var(--muted); font-weight:900; white-space:nowrap}

    /* ✅ Uploaded files overview table (right panel) */
    .ufiles{
      margin-top:12px;
      border-top:1px solid var(--line);
      padding-top:12px;
    }
    .ufiles .lbl{margin-bottom:6px}

    /* ✅ FIX: static height + scrollbar (prevents panel growing forever) */
    #uploadedFilesWrap{
      max-height:420px;
      overflow-y:auto;
      overflow-x:hidden;
      border-radius:12px;
      scrollbar-gutter:stable;
      -webkit-overflow-scrolling:touch;
      overscroll-behavior:contain;
    }
    /* Keep header visible inside the scroll container */
    #uploadedFilesWrap .ufiles-table thead th{
      position:sticky;
      top:0;
      z-index:3;
    }
    @media (max-width: 900px){
      #uploadedFilesWrap{ max-height:260px; }
    }

    .ufiles-table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      border:1px solid var(--line);
      border-radius:12px;
      overflow:hidden;
      background:#fff;
    }
    .ufiles-table th, .ufiles-table td{
      padding:8px 10px;
      border-bottom:1px solid var(--line);
      text-align:left;
      font-size:12.5px;
      vertical-align:top;
    }
    .ufiles-table th{
      background:#fbfdff;
      color:var(--muted);
      font-weight:950;
      letter-spacing:.03em;
      white-space:nowrap;
    }
    .ufiles-table tr:last-child td{border-bottom:0}
    .ufiles-empty{
      border:1px dashed var(--line);
      border-radius:12px;
      padding:10px 12px;
      background:#fff;
      color:var(--muted);
      font-size:12.5px;
    }

    /* ✅ Make uploaded filenames actionable without changing layout */
    .ufile-link{
      appearance:none;
      border:0;
      background:transparent;
      padding:0;
      margin:0;
      color:var(--brand);
      cursor:pointer;
      font-weight:900;
      text-align:left;
      line-height:1.25;
    }
    .ufile-link:hover{ text-decoration:underline; }
    .ufile-link:focus-visible{
      outline:none;
      box-shadow: 0 0 0 2px rgba(59,130,246,.35);
      border-radius:8px;
    }

    /* Keep your existing rte styles (used by hidden fallback editors) */
    .rte-wrap{border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden;}
    .rte-toolbar{display:flex; gap:8px; padding:10px; border-bottom:1px solid var(--line); background:#fbfdff; align-items:center; flex-wrap:wrap;}
    .rte-toolbar .btn{padding:7px 10px}
    .rte{
      min-height:140px;
      padding:10px 12px;
      outline:none;
    }
    .rte:empty:before{content: attr(data-placeholder); color:#94a3b8;}

    /* Log-friendly composing (optional toggle) */
    .rte.mono-compose{
      font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
      white-space: pre-wrap;
    }

    /* Required / error state */
    .req{color:#b23; margin-left:4px}
    .field-error{
      box-shadow: 0 0 0 2px rgba(178, 35, 51, .15);
      border-color: rgba(178, 35, 51, .35) !important;
    }
    .field-help{
      margin-top:6px;
      font-size:12px;
      color:#b23;
      font-weight:800;
      display:none;
    }

    /* ✅ Skeleton loader */
    .skel{
      height:14px;
      border-radius:999px;
      background:rgba(15,23,42,.06);
      position:relative;
      overflow:hidden;
    }
    .skel.sm{height:12px; opacity:.9}
    .skel:after{
      content:"";
      position:absolute; top:0; left:-40%;
      width:40%; height:100%;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
      animation: skel 1.2s ease-in-out infinite;
    }
    @keyframes skel{
      0%{ transform:translateX(0); }
      100%{ transform:translateX(280%); }
    }

    /* ✅ Toasts */
    .toast-host{
      position:fixed;
      right:14px;
      bottom:14px;
      display:flex;
      flex-direction:column;
      gap:10px;
      z-index:9999;
      pointer-events:none;
    }
    .toast{
      pointer-events:auto;
      background:#0b1220;
      color:#fff;
      border:1px solid rgba(255,255,255,.12);
      border-radius:12px;
      padding:10px 12px;
      min-width:260px;
      max-width:360px;
      box-shadow: 0 10px 25px rgba(2,6,23,.25);
      display:flex;
      gap:10px;
      align-items:flex-start;
    }
    .toast .t-title{font-weight:900; font-size:13px; margin:0}
    .toast .t-msg{font-size:12px; opacity:.9; margin-top:2px; line-height:1.35}
    .toast .t-x{
      margin-left:auto;
      border:0;
      background:transparent;
      color:#fff;
      font-weight:900;
      cursor:pointer;
      opacity:.85;
    }
    .toast .t-x:hover{opacity:1}

    /* ✅ Density modes */
    html.density-compact .cases-toolbar{ padding:8px; }
    html.density-compact .cases-toolbar select.input,
    html.density-compact .cases-toolbar input.input{ height:36px; padding:7px 10px; }
    html.density-compact .tbl th, html.density-compact .tbl td{ padding:7px 10px; font-size:12.5px; }
    html.density-compact .subj{ font-size:13.5px; }
    html.density-compact .pill, html.density-compact .status{ padding:4px 9px; font-size:11.5px; }
    /* ✅ Reduce noise: hide license subline in compact */
    html.density-compact .note.tight{ display:none; }

    /* =========================
       ✅ Quill in Cases (KB-like)
       ========================= */
    .case-quill-wrap{
      border:1px solid var(--line);
      border-radius:12px;
      overflow:hidden;
      background:#fff;
    }
    .case-quill-wrap .ql-toolbar.ql-snow{
      border:0;
      border-bottom:1px solid var(--line);
      background:#fbfdff;

      /* ✅ FIX: prevent overlap + keep controls aligned */
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-start;
      gap:6px;
      padding:8px 10px;
    }
    .case-quill-wrap .ql-toolbar.ql-snow .ql-formats{
      /* ✅ FIX: consistent vertical alignment + spacing */
      display:inline-flex;
      align-items:center;
      margin:0 10px 0 0;
      white-space:nowrap;
    }
    .case-quill-wrap .ql-toolbar.ql-snow .ql-formats:last-child{margin-right:0}

    /* ✅ IMPORTANT: this is the real fix (push the whole monospace group to the far right) */
    .case-quill-wrap .ql-toolbar.ql-snow .ql-formats.mono-slot{
      margin-left:auto;
      margin-right:0;
      /* Keep Monospace + Tx (clear formatting) aligned as one compact group */
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    @media (max-width: 720px){
      .case-quill-wrap .ql-toolbar.ql-snow .ql-formats.mono-slot{
        margin-left:0;
      }
    }


    /* ✅ Enterprise FIX: on laptop/desktop keep Quill toolbar single-row.
       If space is tight, allow horizontal scroll instead of wrapping (prevents Tx/Monospace dropping). */
    @media (min-width: 820px){
      .case-quill-wrap .ql-toolbar.ql-snow{
        flex-wrap:nowrap;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scrollbar-gutter:stable;
      }
      .case-quill-wrap .ql-toolbar.ql-snow .ql-formats{
        flex:0 0 auto;
      }
      .case-quill-wrap .ql-toolbar.ql-snow .ql-formats.mono-slot{
        flex:0 0 auto;
      }
    }

    /* ✅ Make Tx (ql-clean) visually match toolbar controls (height/border) */
    .case-quill-wrap .ql-toolbar.ql-snow button.ql-clean{
      width:28px;
      height:26px;
      border-radius:8px;
      border:1px solid var(--line);
      background:#fff;
      padding:0;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .case-quill-wrap .ql-container.ql-snow{
      border:0;
      background:#fff;
    }
    .case-quill-wrap .ql-editor{
      min-height:140px;
      padding:10px 12px;
    }
    .case-quill-wrap .ql-editor img{
      display:block;
      clear:both;
      max-width:100%;
      height:auto;
      margin:10px 0;
    }
    .case-quill-wrap .ql-editor.mono-compose{
      font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
      white-space: pre-wrap;
    }

    /* ✅ Make "Monospace" look like a real toolbar control (not random text) */
    .case-quill-wrap .ql-toolbar .btn.small{
      height:26px;
      padding:0 10px;
      border-radius:8px;
      border:1px solid var(--line);
      background:#fff;
      font-size:12px;
      font-weight:900;
      line-height:24px;
      cursor:pointer;
      margin-left:2px;
      white-space:nowrap;
    }
    .case-quill-wrap .ql-toolbar .btn.small[aria-pressed="true"]{
      background:#f3f8ff;
      border-color:#bfdbfe;
      box-shadow: inset 0 0 0 1px rgba(59,130,246,.25);
    }


    /* ✅ Reply meta row: keep Tip + staged message on the same row (prevents upload card height changes) */
    .composer-meta{
      margin-top:8px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .composer-meta .hint{
      margin:0;
      flex:1 1 auto;
      min-width:240px;
    }
    .composer-meta .uploadstatus{
      margin:0;
      flex:0 0 auto;
      white-space:nowrap;
      font-size:12px;
      color:var(--muted);
    }

    /* Hide legacy editor UI when Quill is active */
    .quill-active .rte-wrap.legacy-rte{ display:none !important; }

    /* ✅ Auth-gate (no structure change; only hides sections when logged out) */
    .auth-gate{
      display:none;
      margin-top:10px;
    }
    html.auth-out .auth-gate{ display:block; }
    html.auth-out #casesToolbar,
    html.auth-out #casesListWrap,
    html.auth-out #caseDetailCard{
      display:none !important;
    }

    /* ✅ FIX: If user is viewing a case when auto-logout happens, the app may have
       hidden the list card via inline style (display:none). When auth flips to OUT,
       caseDetailCard is hidden by CSS, but the list card can remain hidden, causing
       a blank page. Force the list card visible whenever signed out. */
    html.auth-out #casesListCard{ display:block !important; }

    /* ✅ FIX: Timezone context note is only meaningful when viewing cases.
       Hide it in signed-out gate state to avoid showing UTC label after auto logout. */
    html.auth-out .tz-note{ display:none !important; }

    /* ✅ Fix #1: When signed out, hide Search + New Case actions (match toolbar/list behavior) */
    html.auth-out .cases-actions{
      display:none !important;
    }


    /* ============================== */
    /* Enterprise P0/P1/P2 extensions */
    /* ============================== */

    .w50{width:50px}

    /* Strong hover/focus affordance for clickable items */
    body.page-cases a.case-link:hover,
    body.page-cases a.case-link:focus{
      text-decoration:underline;
    }
    body.page-cases tr.row-open{ cursor:pointer; }
    body.page-cases tr.row-open:focus{
      outline:2px solid var(--brand);
      outline-offset:-2px;
      border-radius:10px;
    }
    body.page-cases tr.row-open:hover .subj{
      text-decoration:underline;
      text-underline-offset:2px;
    }

    /* Sort icon spacing: keep header aligned even when icon is blank */
    .th-sort .th-ic{
      width:12px;
      display:inline-block;
      text-align:center;
    }

    /* Bulk mode: checkbox column hidden unless bulk is enabled */
    #casesTable.bulk-off [data-col="select"]{ display:none; }
    #casesTable.bulk-on  [data-col="select"]{ display:table-cell; }

    .col-select input[type="checkbox"]{
      width:16px;
      height:16px;
      cursor:pointer;
    }

    /* Bulk action bar */
    .bulkbar{
      margin-top:10px;
      padding:10px 12px;
      border:1px solid var(--line);
      border-radius:12px;
      background:#fbfdff;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .bulkbar-left{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
    .bulkbar-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

    /* Button variant for “Request closure” (destructive-ish but not alarming) */
    .btn.danger{
      background:rgba(239,68,68,.10);
      border-color:rgba(239,68,68,.22);
      color:#991b1b;
    }
    .btn.danger:hover{ background:rgba(239,68,68,.14); }

    /* Column visibility toggles */
    #casesTable.hide-col-severity [data-col="severity"]{ display:none; }
    #casesTable.hide-col-status   [data-col="status"]{ display:none; }
    #casesTable.hide-col-updated  [data-col="updated"]{ display:none; }
    #casesTable.hide-license-line .license-line{ display:none; }

    /* Tools buttons in pager area */
    .tb-pager .btn.small{ height:38px; }

    /* ✅ Fix #3: Columns modal rows (a11y-friendly labels + no inline styling needed) */
    .cd-columns-grid{
      display:grid;
      gap:10px;
    }
    .cd-col-row{
      display:flex;
      gap:10px;
      align-items:center;
      font-weight:800;
      color:var(--ink);
    }
    .cd-col-cb{
      width:16px;
      height:16px;
    }
    .cd-col-label{
      cursor:pointer;
      user-select:none;
    }



/* Strict CSP helpers */

/* Make hidden consistent across browsers */
[hidden]{ display:none !important; }

/* Visually hidden (screen-reader only) */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Utility spacing (replaces inline styles) */
.mt6{ margin-top:6px !important; }
.mt8{ margin-top:8px !important; }
.mt10{ margin-top:10px !important; }
.mt12{ margin-top:12px !important; }
.mt14{ margin-top:14px !important; }
.m0{ margin:0 !important; }
.h8{ height:8px !important; }

/* Utility helpers */
.u-hide{ display:none !important; }
.pad-1620{ padding:16px 20px !important; }
.break-word{ word-break:break-word; }
.pre-wrap{ white-space:pre-wrap; }

/* Strict modal toggle (no JS style.display) */
.cr-modal.is-open{ display:grid; }
.cd-img-lightbox.is-open{ display:flex; }

/* Auth gate inline-style replacements */
.auth-gate-actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.auth-gate-hint{ margin-top:8px; }

/* Thread header actions layout */
.thread-hd-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

/* Upload actions row */
.upload-actions-row{ margin-top:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-start; }

/* Align a column's content to end (case summary header) */
.col-end{ align-items:flex-end; justify-content:flex-end; }

/* Case summary title (keeps prior exact sizing) */
.case-summary-title{ margin:0; font-size:18px; }

/* New case error style (replaces inline styles) */
.nc-error{ color:#b23; font-weight:700; }

/* Modal body padding used by in-app modals */
.cr-bd{ padding:14px 20px; }

/* Settings modal spacing parity (matches other pages)
   - The Settings / Change password / Session modal is injected by shared auth UI.
   - On cases.html it was using the base .cr-* paddings, causing content to sit
     too close to the sheet edges.
   - Keep New Case modal unchanged by excluding #newCaseModal.
*/
body.page-cases .cr-modal:not(#newCaseModal) .cr-hd{ padding:18px 26px; }
body.page-cases .cr-modal:not(#newCaseModal) .cr-body{ padding:18px 30px 14px 30px; }
body.page-cases .cr-modal:not(#newCaseModal) .cr-ft{ padding:14px 22px; }


/* Toast transitions (no inline styles) */
.toast{
  opacity:0;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
}
.toast.is-in{ opacity:1; transform: translateY(0); }
.toast.is-out{ opacity:0; transform: translateY(6px); }

/* Skeleton width/height helpers (replaces inline styles) */
.skel.box{ border-radius:4px; }
.h12{ height:12px !important; }
.h18{ height:18px !important; }
.w18{ width:18px !important; }
.w46{ width:46px !important; }
.w60{ width:60px !important; }
.w70{ width:70px !important; }
.w120{ width:120px !important; }
.w130{ width:130px !important; }
.w140{ width:140px !important; }
.w160{ width:160px !important; }
.w180{ width:180px !important; }
.w220{ width:220px !important; }
.w260{ width:260px !important; }

/* Inline image styling inside editors (no JS inline styles) */
.rte img[data-kind="inline"],
.ql-editor img[data-kind="inline"]{
  max-width:100%;
  display:block;
  margin-top:8px;
  border-radius:10px;
}