/* Veritano app styles (extracted from index.html; moved to /static/app.css) */
:root{
      --brand:#438fa0;
      --brand-2:#22c55e;
      --ink:#0f172a;
      --muted:#64748b;
      --ring:#e2e8f0;
      --bg:#f7fafc;
      --panel:#ffffff;
      --danger:#ef4444;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Inter, system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif}

    .app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
    .sidebar{background:#fff;border-right:1px solid var(--ring);padding:16px;display:flex;flex-direction:column;gap:14px}
    .brand{display:flex;align-items:center;gap:10px}
    .brand img{width:200px}
    
    .nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
}

/* Base nav button */
.nav button{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:10px 12px;
  border-radius:10px;
  font-weight:600;
  color:#0f172a;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
}

/* Big primary buttons: Overview / Incidents / My Team / New Incident */
.nav button.nav-primary{
  background:linear-gradient(180deg,#0f172a,#020617);
  color:#f9fafb;
  box-shadow:0 10px 24px rgba(15,23,42,.32);
}

/* Make the icon pop a bit on primary buttons */
.nav button.nav-primary i[data-lucide]{
  opacity:.95;
}

/* Secondary buttons (Settings, Help, etc.) hover/active */
.nav button:not(.nav-primary):hover{
  background:#f1f5f9;
}

.nav button:not(.nav-primary).active{
  background:linear-gradient(180deg,#e6f4f7,#ffffff);
  outline:1px solid var(--ring);
}

/* Sub-selection for Listings > Open / Closed */
.nav button.sub-active{
  background:linear-gradient(180deg,#e6f4f7,#ffffff);
  outline:1px solid var(--ring);
}


/* Section label stays as-is */
.nav .section{
  margin-top:12px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

    .content{display:flex;flex-direction:column;min-width:0}
    .topbar{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--ring);padding:10px 16px;display:flex;align-items:center;gap:12px;justify-content:space-between;z-index:10}
    .idpill{display:flex;gap:10px;align-items:center;color:#0f172a}
    .muted{color:var(--muted)}
    .btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border:0;border-radius:12px;padding:8px 12px;font-weight:700;cursor:pointer}
    .btn.secondary{background:#e2e8f0;color:#0f172a}
    .btn.success{background:var(--brand-2)}
    .btn.red{background:#ef4444}
    .btn:disabled{opacity:.6;cursor:not-allowed}
    .spinner, .micspinner {width:16px;height:16px;border:2px solid rgba(0,100,240,.35);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}

    .main{padding:16px;display:flex;flex-direction:column;gap:14px}
    .card{background:#fff;border:1px solid var(--ring);border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
    .card .item {margin-bottom:12px;}
    .row{display:flex;gap:12px;align-items:center}
    .row.spread{justify-content:space-between}
    .col{flex:1;min-width:0}
    form .col {margin-bottom:10px}
    .input, .select, .textarea{width:100%;background:#ffffff;color:#0f172a;border:1px solid var(--ring);border-radius:10px;padding:10px}
    .textarea{min-height:120px;resize:vertical}
    .list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
    .item{border:1px solid var(--ring);background:#ffffff;border-radius:10px;padding:12px;cursor:pointer}
    .item:hover{border-color:#3b82f6}
    .scroll{max-height:320px;overflow:auto;border:1px solid var(--ring);border-radius:10px;padding:12px;background:#ffffff}
    .divider{height:1px;background:var(--ring);margin:10px 0}
    .section-title{font-weight:800}
    .helpbox{background:linear-gradient(180deg,#e6f4f7,#ffffff);border:1px dashed var(--ring);border-radius:14px;padding:14px}
    .list-header {margin-bottom: 10px}
    .searchbar{display:flex;gap:8px}
    .searchbar input{flex:1}

    .incident-filters{
      display:flex;
      gap:6px;
    }

    .filter-chip{
      border-radius:999px;
      border:1px solid var(--ring);
      padding:4px 10px;
      font-size:12px;
      background:#f8fafc;
      cursor:pointer;
      font-weight:600;
    }

    .filter-chip.active{
      background:var(--brand, #0ea5e9);
      color:#ffffff;
      border-color:var(--brand, #0ea5e9);
    }


    .btn.icon {
      width: 28px;
      height: 28px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px; /* size of the plus */
      line-height: 1;
      border-radius: 8px;
    }
    .refesh-button { width:18px; }
    /* for doc date adjustment */

    .date-received-button{
      border:0;
      background:transparent;
      padding:0 2px;
      cursor:pointer;
      color:inherit;
      font:inherit;
    }
    .date-received-button:hover{
      text-decoration: underline;
    }

    /* Tabs */
    .tabs{display:flex;gap:8px;border-bottom:1px solid var(--ring);margin-bottom:8px;flex-wrap:wrap}
    .tab{background:#fff;border:1px solid var(--ring);border-bottom:0;border-radius:10px 10px 0 0;padding:8px 12px;font-weight:700;cursor:pointer}
    .tab.active{background:linear-gradient(180deg,#e6f4f7,#ffffff)}
    .pill{
      display:inline-block;
      min-width:20px;
      padding:0 8px;
      border-radius:999px;
      background:#bfdbfe;      /* lighter blue pill */
      color:#0f172a;           /* dark blue text */
      margin-left:6px;
      font-weight:700;
      font-size:12px;
      text-align:center;
    }

        .pill.small{
      font-size:11px;
      padding:0 6px;
      min-width:0;
    }

    .pill.bump {
        animation: pill-bump 0.32s ease-out;
      }

    @keyframes pill-bump {
      0%   { transform: scale(1); }
      30%  { transform: scale(1.15); }
      100% { transform: scale(1); }
    }
    
    /* Role pills on assignment list */
    .role-pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:4px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:700;
      text-transform:capitalize;
      background:rgba(148,163,184,.18);
      color:#0f172a;
      border:1px solid var(--ring);
    }

    .role-pill.role-admin{
      background:rgba(15,23,42,.95);
      color:#f9fafb;
      border-color:rgba(15,23,42,.85);
    }

    .role-pill.role-editor{
      background:rgba(34,197,94,.12);
      color:#166534;
      border-color:rgba(22,163,74,.45);
    }

    .role-pill.role-viewer{
      background:rgba(59,130,246,.12);
      color:#1d4ed8;
      border-color:rgba(37,99,235,.45);
    }

    .core-summary-card{
      border:1px solid var(--ring);
      border-radius:16px;
      padding:14px 16px;
      background:linear-gradient(180deg,#f9fafb,#f1f5f9);
      margin-bottom:14px;
    }

    /* Documents section */
    .docs-section-card{
      max-height:320px;
      overflow-y:auto;
    }

    /* Upload combo: button + drop zone */
    .docs-upload-combo{
      display:flex;
      align-items:stretch;
      height:32px;
    }

    .docs-upload-btn{
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0 12px;
      background:var(--brand-2);
      color:#fff;
      font-size:13px;
      font-weight:600;
      border-radius:6px 0 0 6px;
      cursor:pointer;
      white-space:nowrap;
      transition:background .15s;
    }

    .docs-upload-btn:hover{
      background:#16a34a;
    }

    .docs-drop-zone{
      display:flex;
      align-items:center;
      gap:6px;
      padding:0 12px;
      border:2px dashed var(--ring);
      border-left:none;
      border-radius:0 6px 6px 0;
      background:#fafafa;
      color:var(--muted);
      font-size:12px;
      cursor:pointer;
      transition:border-color .15s, background .15s, color .15s;
    }

    .docs-drop-zone i,
    .docs-drop-zone svg{
      width:14px;
      height:14px;
    }

    .docs-drop-zone:hover,
    .docs-upload-combo.drag-over .docs-drop-zone{
      border-color:var(--brand);
      background:rgba(59,130,246,.05);
      color:var(--brand);
    }

    .docs-upload-combo.drag-over .docs-drop-zone{
      border-style:solid;
      background:rgba(59,130,246,.1);
    }

    .docs-grid{
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
      gap:10px;
    }

    .doc-card{
      background:#fff;
      border:1px solid var(--ring);
      border-radius:10px;
      padding:10px 12px;
      cursor:pointer;
      transition:border-color .15s, box-shadow .15s;
    }

    .doc-card:hover{
      border-color:var(--brand);
      box-shadow:0 2px 8px rgba(0,0,0,.06);
    }

    .doc-card-header{
      display:flex;
      align-items:flex-start;
      gap:8px;
      flex-wrap:wrap;
    }

    .doc-card-icon{
      flex-shrink:0;
      width:20px;
      height:20px;
      color:var(--muted);
    }

    .doc-card-icon.pdf{ color:#e53e3e; }
    .doc-card-icon.doc{ color:#3182ce; }
    .doc-card-icon.xls{ color:#38a169; }
    .doc-card-icon.img{ color:#805ad5; }
    .doc-card-icon.txt{ color:#718096; }

    .doc-card-name{
      font-size:13px;
      font-weight:600;
      line-height:1.3;
      word-break:break-word;
      flex:1;
      min-width:0;
    }
    
    .doc-card-header .doc-category-pill{
      margin-left:auto;
      flex-shrink:0;
    }

    .doc-card-date{
      font-size:11px;
      color:var(--muted);
      margin-top:4px;
      display:flex;
      align-items:center;
      gap:4px;
    }

    .doc-card-date button{
      background:none;
      border:none;
      padding:0;
      color:var(--brand);
      cursor:pointer;
      font-size:11px;
    }

    .doc-card-date button:hover{
      text-decoration:underline;
    }

    .doc-card-summary{
      font-size:11px;
      color:var(--muted);
      margin-top:6px;
      line-height:1.4;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }

    .doc-card-actions{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:6px;
      margin-top:8px;
      padding-top:8px;
      border-top:1px solid var(--ring);
    }

    .doc-card-actions label{
      font-size:11px;
      display:flex;
      align-items:center;
      gap:4px;
      color:var(--muted);
    }

    .doc-card-actions input[type="checkbox"]{
      width:14px;
      height:14px;
    }

    .doc-card-edit-btn{
      background:none;
      border:none;
      padding:4px;
      cursor:pointer;
      color:var(--muted);
      border-radius:4px;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:color .15s, background .15s;
    }

    .doc-card-edit-btn:hover{
      color:var(--brand);
      background:rgba(59,130,246,.1);
    }

    .doc-card-edit-btn i,
    .doc-card-edit-btn svg{
      width:14px;
      height:14px;
    }

    .doc-card .date-editor{
      margin-top:8px;
      display:flex;
      gap:6px;
      align-items:center;
    }

    .doc-card .date-editor input{
      font-size:12px;
      padding:4px 6px;
    }

    .doc-card .date-editor button{
      font-size:11px;
      padding:4px 8px;
    }

    .summary-grid{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      margin-top:6px;
    }

    .summary-col{
      flex:1 1 260px;
    }

    .summary-group{
      border-radius:12px;
      border:1px solid var(--border);
      padding:10px 12px;
      background:#ffffff;
    }

    .summary-group-label{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:0.06em;
      color:var(--muted);
      margin-bottom:6px;
    }

    .summary-row{
      display:flex;
      justify-content:space-between;
      gap:8px;
      font-size:13px;
      margin-bottom:3px;
    }

    .summary-key{
      color:var(--muted);
      white-space:nowrap;
    }

    .summary-value{
      font-weight:500;
      text-align:right;
      max-width:60%;
      word-wrap:break-word;
      white-space:pre-wrap;
    }

    /* Inline message shown to the left of the role select */
    .role-change-indicator {
      font-size: 11px;
      line-height: 1.2;
      color: #16a34a;              /* subtle green */
      opacity: 0;
      transform: translateY(3px);
      transition: opacity 0.25s ease-out, transform 0.25s ease-out;
      pointer-events: none;
      white-space: nowrap;
    }

    /* Team assignments list – make current members look like nice rows */
    #assigneeList{
      margin-top:4px;
    }

    /* Card-style row for each assignee */
    #assigneeList .assignee-row{
      border:1px solid var(--ring);
      border-radius:12px;
      background:var(--panel);
      padding:8px 10px;
      cursor:default;           /* override .item { cursor:pointer } */
    }

    /* Space between rows */
    #assigneeList .assignee-row + .assignee-row{
      margin-top:6px;
    }

    /* Make sure the main row content is nicely aligned */
    #assigneeList .assignee-row .row.spread{
      align-items:center;
    }

    /* Slightly smaller avatar in this context, with a soft shadow */
    #assigneeList .assignee-row .avatar-circle.avatar-small{
      width:32px;
      height:32px;
      box-shadow:0 6px 14px rgba(15,23,42,.30);
    }

    /* Email line under the name */
    #assigneeList .assignee-row .muted.small{
      font-size:12px;
    }

    /* Role controls aligned nicely on the right */
    #assigneeList .assignee-row .assignee-creator-pill,
    #assigneeList .assignee-row .assignee-role-select,
    #assigneeList .assignee-row .assignee-remove-btn{
      flex-shrink:0;
    }


    .assignee-creator-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 500;
      background: rgba(15, 23, 42, 0.06);
      color: #0f172a;
      white-space: nowrap;
    }

    .assignee-creator-pill svg.lucide {
      width: 14px;
      height: 14px;
    }


    /* When JS toggles this, the text appears and then we fade it back out */
    .role-change-indicator.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Slight pulse on the whole row so the eye is drawn, but not obnoxiously */
    .assignee-row {
      transition: box-shadow 0.3s ease-out, background-color 0.3s ease-out;
    }

    .assignee-row.role-change-flash {
      background-color: rgba(22, 163, 74, 0.04);  /* very soft green tint */
      box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
    }


    /* Help */
    .help-icon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:16px;
      height:16px;
      border-radius:50%;
      border:1px solid var(--ring);
      font-size:11px;
      margin-left:4px;
      cursor:help;
    }
    .help-icon:hover{
      background:#f7fafc;
    }

    /* Incident notes */
    .note-card {
      border: 1px solid #e3e3e3;
      border-radius: 8px;
      padding: 8px 10px;
      background: #fafafa;
    }

    .note-author {
      margin-bottom: 2px;
    }

    .note-meta {
      font-size: 11px;
      margin-bottom: 6px;
    }

    .note-body {
      font-size: 13px;
      white-space: pre-line;
    }

    .note-avatar{
      width: 20px;
      height: 20px;
      margin-right: 6px;
      vertical-align: middle;
      opacity: 0.9;
    }

        .summary-details-shell{
      margin-top:8px;
    }

    .summary-details-toggle{
      border:0;
      background:transparent;
      display:inline-flex;
      align-items:center;
      gap:6px;
      font-size:13px;
      font-weight:600;
      color:var(--brand);
      cursor:pointer;
      padding:4px 0;
    }

    .summary-details-toggle. summary-details-chevron{
      font-size:12px;
      transition:transform .2s ease;
    }

    .summary-details-toggle.open .summary-details-chevron{
      transform:rotate(180deg);
    }

    .summary-details-drawer {
      border-radius:0 0 12px 12px;
      border:1px solid var(--ring);
      border-top:0;
      background:#ffffff;
      margin-top:4px;

      /* drawer animation */
      max-height:0;
      overflow:hidden;
      opacity:0;
      transform:translateY(-4px);
      padding:0 12px;
      transition:
        max-height .25s ease,
        opacity .2s ease,
        transform .2s ease,
        padding .2s ease;
    }

        .markdown-body{
      font-size:13px;
      line-height:1.35;
    }

    .markdown-body p{
      margin:2px 0;
    }

    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3{
      margin:6px 0 2px;
      font-weight:600;
    }

    .markdown-body h1{ font-size:1.05rem; }
    .markdown-body h2{ font-size:0.98rem; }
    .markdown-body h3{ font-size:0.94rem; }

    .markdown-body ul,
    .markdown-body ol{
      padding-left:1.2em;
      margin:2px 0 2px 1em;
    }

    .markdown-body code{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:0.9em;
      padding:1px 3px;
      border-radius:4px;
      background:#f1f5f9;
    }

    .markdown-body pre{
      margin:4px 0;
      padding:6px 8px;
      border-radius:8px;
      background:#0f172a;
      color:#e2e8f0;
      overflow:auto;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:0.9em;
    }

    .markdown-body blockquote{
      border-left:3px solid #e2e8f0;
      margin:2px 0 2px 4px;
      padding-left:8px;
      color:var(--muted);
    }

    .markdown-body > :first-child{
      margin-top:0;
    }

    .markdown-body > :last-child{
      margin-bottom:0;
    }

    .summary-details-drawer.open{
      max-height:1000px; /* big enough to show the grid */
      opacity:1;
      transform:translateY(0);
      padding:10px 12px 12px;
    }

    @media(max-width:980px){
      .app{grid-template-columns:1fr}
      .sidebar{position:sticky;top:0;z-index:15;border-right:0;border-bottom:1px solid var(--ring);flex-direction:row;align-items:center;justify-content:space-between}
      .nav{flex-direction:row;gap:8px;margin:0}
      .nav .section{display:none}
      .brand .title{display:none}
    }
  
    /* Upload progress panel */
    .upload-panel{
      position:fixed;
      right:16px;
      bottom:16px;
      width:420px;
      max-width:calc(100vw - 32px);
      background:#fff;
      border:1px solid var(--ring);
      border-radius:14px;
      box-shadow:0 12px 32px rgba(0,0,0,.14);
      z-index:9999;
      padding:12px;
    }
    .upload-panel.hidden{display:none}
    .upload-panel .hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
    .upload-panel .hdr .title{font-weight:800}
    .upload-panel .hdr .actions{display:flex;gap:8px;align-items:center}
    .upload-panel .mini{font-size:12px;color:var(--muted)}
    .upload-progress{height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin:8px 0 10px}
    .upload-progress .bar{height:100%;width:0%;background:var(--brand);}
    .upload-list{max-height:240px;overflow:auto;border:1px solid var(--ring);border-radius:10px;padding:8px;background:#ffffff}
    .upload-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:6px 4px;border-bottom:1px solid #f1f5f9}
    .upload-row:last-child{border-bottom:0}
    .upload-name{flex:1;min-width:0;word-break:break-word}
    .badge{font-size:12px;padding:2px 8px;border-radius:999px;background:#e2e8f0;white-space:nowrap}
    .badge.ok{background:#dcfce7;color:#166534}
    .badge.fail{background:#fee2e2;color:#991b1b}
    .badge.uploading{background:#dbeafe;color:#1e40af}
/* --- Global polish --- */
:focus-visible{
  outline: 2px solid rgba(67,143,160,.55);
  outline-offset: 2px;
}
a{ color: var(--brand); }
a:hover{ text-decoration: underline; }



/* ==========================
   Overview + modern topbar
   ========================== */

.brand{ cursor:pointer; }
.brand:focus{ outline: none; }

.topbar-left{ flex:1; min-width:0; }
.topbar-right{ display:flex; align-items:center; gap:10px; }

.searchbox{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  width:min(620px, 100%);
  background:var(--panel);
  border:1px solid var(--ring);
  border-radius:999px;
  padding:10px 12px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
.searchbox:focus-within{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34,211,238,.22);
}
.search-ico{
  color: var(--muted);
}
.search-input{
  border:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  min-width:0;
  outline:none !important;
}
.search-input:focus{
  outline:none !important;
  box-shadow:none !important;
}
.search-input::placeholder{ color: rgba(100,116,139,.9); }

/* Search results dropdown */
.search-results-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:#fff;
  border:1px solid var(--ring);
  border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.15);
  z-index:1000;
  max-height:70vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.search-results-header{
  padding:12px 16px;
  border-bottom:1px solid var(--ring);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.search-results-count{
  font-size:13px;
  color:var(--muted);
  font-weight:500;
}

.search-results-facets{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.search-facet{
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  background:#f1f5f9;
  color:#64748b;
  cursor:pointer;
  transition:background .15s, color .15s;
}

.search-facet:hover,
.search-facet.active{
  background:var(--brand);
  color:#fff;
}

.search-facet .count{
  margin-left:4px;
  opacity:0.7;
}

.search-results-list{
  flex:1;
  overflow-y:auto;
  max-height:400px;
}

.search-result-item{
  padding:12px 16px;
  border-bottom:1px solid var(--ring);
  cursor:pointer;
  transition:background .15s;
}

.search-result-item:last-child{
  border-bottom:none;
}

.search-result-item:hover{
  background:#f8fafc;
}

.search-result-type{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  padding:2px 8px;
  border-radius:4px;
  margin-bottom:4px;
}

.search-result-type.incident{
  background:rgba(59,130,246,.12);
  color:#2563eb;
}

.search-result-type.document{
  background:rgba(239,68,68,.12);
  color:#dc2626;
}

.search-result-type.contact{
  background:rgba(34,197,94,.12);
  color:#16a34a;
}

.search-result-type.timeline{
  background:rgba(168,85,247,.12);
  color:#9333ea;
}

.search-result-title{
  font-weight:600;
  font-size:14px;
  color:#0f172a;
  margin-bottom:2px;
}

.search-result-incident{
  font-size:11px;
  color:var(--muted);
  margin-bottom:4px;
}

.search-result-snippet{
  font-size:12px;
  color:#64748b;
  line-height:1.4;
}

.search-result-snippet mark{
  background:rgba(250,204,21,.4);
  color:inherit;
  padding:0 2px;
  border-radius:2px;
}

.search-results-footer{
  padding:10px 16px;
  border-top:1px solid var(--ring);
  display:flex;
  justify-content:center;
}

.search-results-empty{
  padding:32px 16px;
  text-align:center;
  color:var(--muted);
}

.search-results-loading{
  padding:32px 16px;
  text-align:center;
  color:var(--muted);
}

/* Dark mode for search results */
.theme-dark .search-results-dropdown{
  background:var(--panel);
  border-color:var(--ring);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}

.theme-dark .search-results-header,
.theme-dark .search-results-footer{
  border-color:var(--ring);
}

.theme-dark .search-result-item:hover{
  background:rgba(148,163,184,.08);
}

.theme-dark .search-result-title{
  color:var(--ink);
}

.theme-dark .search-facet{
  background:rgba(148,163,184,.12);
  color:var(--muted);
}

.icon-btn{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--ring);
  background:var(--panel);
  color: var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}
.icon-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.55);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(2,6,23,.08);
}
.clear-btn{
  width:32px;
  height:32px;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
}
.clear-btn:hover{ transform:none; box-shadow:none; }
.clear-btn svg.lucide{ width:20px; height:20px; }

.verity-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(34,211,238,.35);
  background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(2,6,23,.98));
  color:#e2e8f0;
  border-radius:999px;
  padding:9px 14px;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 12px 28px rgba(2,6,23,.16);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.verity-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.65);
  box-shadow: 0 16px 40px rgba(2,6,23,.22);
}
.pulse-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#22d3ee;
  box-shadow: 0 0 0 0 rgba(34,211,238,.55);
  animation: pulse-dot 1.6s ease-out infinite;
}
@keyframes pulse-dot{
  0%   { box-shadow: 0 0 0 0 rgba(34,211,238,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(34,211,238,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}

.overview-shell{ display:flex; flex-direction:column; gap:14px; }
.welcome-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:4px 2px;
}
.avatar-circle{
  width:46px;
  height:46px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(2,6,23,.92), rgba(15,23,42,.92));
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:.02em;
  box-shadow: 0 14px 30px rgba(2,6,23,.12);
  border: 1px solid rgba(34,211,238,.22);
}
.welcome-title{ font-size:20px; font-weight:900; color: rgba(51,65,85,1); }
.welcome-name{ color: rgba(51,65,85,1); }
.welcome-sub{ color: rgba(148,163,184,1); margin-top:2px; }

.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
.stat-card{
  background:var(--panel);
  border:1px solid var(--ring);
  border-radius:16px;
  padding:14px 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.stat-card:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.45);
  box-shadow: 0 14px 34px rgba(2,6,23,.10);
}
.stat-card.clickable{
  cursor:pointer;
}

.stat-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--muted);
  font-weight:800;
  margin-bottom:6px;
}
.stat-value{
  font-size:28px;
  line-height:1.05;
  font-weight:900;
  color: var(--ink);
}

.recent-list{ display:flex; flex-direction:column; gap:10px; }
.recent-row{
  border:1px solid var(--ring);
  border-radius:14px;
  background:var(--panel);
  padding:12px 12px;
  display:grid;
  grid-template-columns: 1.55fr .55fr .65fr .9fr 24px;
  gap:12px;
  align-items:center;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.recent-row:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.55);
  box-shadow: 0 18px 40px rgba(2,6,23,.10);
}

/* ==========================
   Incidents list rows
   ========================== */

.incident-row{
  border:1px solid var(--ring);
  border-radius:14px;
  background:var(--panel);
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.incident-row + .incident-row{
  margin-top:8px;
}

.incident-row:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.55);
  box-shadow: 0 14px 30px rgba(2,6,23,.08);
}

.incident-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.incident-icon-box{
  width:40px;
  height:40px;
  border-radius:12px;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#f9fafb;
  box-shadow:0 10px 25px rgba(88,28,135,.35);
}

.incident-icon-box i[data-lucide]{
  width:20px;
  height:20px;
}

.incident-main{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.incident-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.incident-title{
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.incident-status-pill{
  background:#020617;       /* black pill */
  color:#f9fafb;            /* white text */
  border-radius:999px;
  padding:2px 8px;
  font-size:11px;
  font-weight:600;
  text-transform:lowercase; /* shows as “active” / “closed” */
  white-space:nowrap;
}

.theme-dark .incident-status-pill{
  background:#020617;
}

.incident-meta{
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.incident-arrow{
  color:rgba(148,163,184,.95);
  flex-shrink:0;
  display:flex;
  align-items:center;
}

.incident-arrow i[data-lucide]{
  width:18px;
  height:18px;
}

/* Incident detail header */
.incident-header-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:14px;
}

.incident-header-left{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
  flex:1;
}

.incident-header-actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
  justify-content:flex-end;
}

/* Unified incident form layout (status / team / edit) */
.incident-form-shell{
  animation: incident-form-slide-in 180ms ease-out forwards;
}

.incident-form-header{
  margin-bottom:14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.incident-form-top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.incident-form-incident-name{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.incident-form-title{
  font-size:18px;
  font-weight:800;
}

.incident-form-back{
  border:0;
  background:transparent;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  padding:2px 0;
}

.incident-form-back i[data-lucide]{
  width:16px;
  height:16px;
}

.incident-form-body{
  margin-top:4px;
}

.incident-form-body-inner{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.incident-form-actions{
  justify-content:flex-end;
  gap:10px;
  margin-top:4px;
}

/* Text-style cancel buttons */
.btn-link{
  border:0;
  background:transparent;
  padding:0;
  font:inherit;
  color:var(--brand, #0ea5e9);
  cursor:pointer;
}

/* Enter animation similar to status dialog */
@keyframes incident-form-slide-in{
  from{
    opacity:0;
    transform:translateY(-6px) scale(0.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}


/* Make the status pill happy with an icon */
.incident-status-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.incident-status-pill i[data-lucide]{
  width:14px;
  height:14px;
}

/* Team pill: reuse status-pill but allow icon + text */
#incidentTeamPill{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* Shiny Generate button */
.generate-btn{
  background:linear-gradient(135deg,#a855f7,#6366f1);
  color:#f9fafb;
  box-shadow:0 10px 25px rgba(88,28,135,.35);
}

.generate-btn i[data-lucide]{
  width:16px;
  height:16px;
}

/* Status dialog container */
.status-dialog{
  margin-bottom:10px;
}

/* Enter animation */
.status-dialog-enter{
  animation: status-slide-fade-in 180ms ease-out forwards;
  transform-origin: top center;
}

/* ==========================
   Incident full-screen forms
   (status, team, edit incident)
   ========================== */

.card.incident-form-shell{
  /* Make the shell feel like a primary focus card */
  margin-bottom: 12px;
  padding: 18px 20px 20px;
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(15,23,42,.18);
  animation: incident-form-shell-enter 190ms ease-out forwards;
  transform-origin: top center;
}

/* Simple entry animation similar to status dialog */
@keyframes incident-form-shell-enter{
  from{
    opacity:0;
    transform:translateY(-6px) scale(0.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* Header (incident name + back button + title) */

.incident-form-header{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
  border-bottom:1px solid rgba(148,163,184,.35);
  padding-bottom:10px;
}

.incident-form-header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.incident-form-incident-name{
  font-size:13px;
  color:var(--muted);
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Small back / cancel chip next to the name */
.incident-form-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:none;
  background:rgba(148,163,184,.12);
  color:var(--ink);
  font-size:12px;
  font-weight:500;
  padding:4px 10px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
}

.incident-form-back i[data-lucide]{
  width:14px;
  height:14px;
}

.incident-form-back:hover{
  background:rgba(148,163,184,.22);
}

/* Main form title */
.incident-form-title{
  font-size:18px;
  font-weight:700;
  color:var(--ink);
}

/* Body + inner layout */
.incident-form-body{
  margin-top:14px;
}

.incident-form-body-inner{
  gap:12px;
  align-items:stretch;
}

/* Bottom actions row: Cancel + primary button */
.incident-form-actions{
  margin-top:18px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* Text-style cancel button at the bottom */
.btn-link{
  border:none;
  background:none;
  padding:0;
  font:inherit;
  color:#2563eb;              /* blue that fits your palette */
  cursor:pointer;
  text-decoration:none;
}

.btn-link:hover{
  text-decoration:underline;
}


@keyframes status-slide-fade-in{
  from{
    opacity:0;
    transform:translateY(-6px) scale(0.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}


.recent-title{ font-weight:900; color: var(--ink); }
.recent-meta{ font-size:12px; color: var(--muted); margin-top:2px; }
.recent-doc-count{ font-weight:900; }
.recent-updated{
  justify-self:end;
  color: var(--muted);
  font-size:13px;
  white-space:nowrap;
}
.recent-chevron{
  justify-self:end;
  color: rgba(148,163,184,.95);
}

.status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  font-weight:900;
  border:1px solid var(--ring);
}
.status-pill.active{
  background: rgba(34,211,238,.10);
  border-color: rgba(34,211,238,.28);
  color: rgba(11,114,133,1);
}
.status-pill.closed{
  background: rgba(148,163,184,.14);
  border-color: rgba(148,163,184,.25);
  color: rgba(51,65,85,1);
}

@media(max-width: 1100px){
  .stats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .recent-row{ grid-template-columns: 1.5fr .6fr .6fr .9fr 24px; }
}
@media(max-width: 620px){
  .topbar{ flex-direction:column; align-items:stretch; gap:10px; }
  .topbar-right{ justify-content:flex-end; flex-wrap:wrap; }
  .stats-grid{ grid-template-columns: 1fr; }
  .recent-row{ grid-template-columns: 1fr; gap:8px; }
  .recent-updated{ justify-self:start; }
}

/* ==========================
   Dark mode (CSS vars)
   ========================== */

.theme-dark{
  --bg:#0b1220;
  --panel:#0f1a2b;
  --ring:rgba(148,163,184,.18);
  --ink:#e5e7eb;
  --muted:#94a3b8;
}
.theme-dark body{ background: var(--bg); color: var(--ink); }
.theme-dark .sidebar{ background: rgba(13,23,40,.95); border-right:1px solid var(--ring); }
.theme-dark .topbar{ background: rgba(13,23,40,.95); border-bottom:1px solid var(--ring); }

.theme-dark .nav button{
  color:var(--ink);
}

/* Dark mode primary buttons */
.theme-dark .nav button.nav-primary{
  background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(2,6,23,.98));
  color:var(--ink);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}

/* Only apply these to secondary items (Settings/Help) */
.theme-dark .nav button:not(.nav-primary):hover{
  background:rgba(148,163,184,.08);
}

.theme-dark .nav button:not(.nav-primary).active{
  background:linear-gradient(180deg,rgba(34,211,238,.10),rgba(15,26,43,.70));
}


.theme-dark .welcome-title, .theme-dark .welcome-name{ color: var(--ink); }
.theme-dark .welcome-sub{ color: var(--muted); }
.theme-dark .status-pill.active{ color: rgba(34,211,238,.95); }


/* ==========================
   Settings: Organization branding + workflow
   ========================== */

.branding-uploader{
  display:flex;
  gap:18px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.logo-box{
  position:relative;
  width:120px;
  height:120px;
  border:2px dashed var(--ring);
  border-radius:16px;
  background: linear-gradient(180deg,#f9fafb,#ffffff);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.logo-box:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.55);
  box-shadow: 0 14px 30px rgba(2,6,23,.08);
}
.logo-box img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#ffffff;
}
.logo-box.drag{
  border-color: rgba(34,211,238,.75);
  box-shadow: 0 18px 40px rgba(2,6,23,.10);
}
.logo-spinner{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(2px);
}
.logo-box.is-uploading .logo-spinner{ display:flex; }

/* Base avatar */
.avatar-circle{
  position:relative;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#ffffff;
  overflow:hidden;
}

/* Size variants */
.avatar-circle.avatar-small{
  width:40px;
  height:40px;
  font-size:14px;
}

.avatar-circle.avatar-medium{
  width:64px;
  height:64px;
  font-size:18px;
}

.avatar-circle.avatar-large{
  width:120px;
  height:120px;
  font-size:32px;
}

/* Display style (overview header, inline avatars, etc.) */
.avatar-circle.avatar-display{
  background: linear-gradient(180deg, rgba(2,6,23,.92), rgba(15,23,42,.92));
  border:1px solid rgba(15,23,42,.65);
  box-shadow:0 10px 24px rgba(15,23,42,.35);
}

/* Upload style (settings page) */
.avatar-circle.avatar-upload{
  background:#000000;
  border:2px dashed #38bdf8;
  box-shadow:0 12px 30px rgba(15,23,42,.35);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.avatar-circle.avatar-upload:hover{
  transform: translateY(-1px);
  border-color: rgba(56,189,248,.9);
  box-shadow:0 18px 40px rgba(15,23,42,.45);
}

/* Common image behavior */
.avatar-circle img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.avatar-uploader{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:16px;
}

.avatar-circle:hover{
  transform: translateY(-1px);
  border-color: rgba(56,189,248,.9);
  box-shadow:0 18px 40px rgba(15,23,42,.45);
}

.avatar-circle.drag{
  border-color: rgba(56,189,248,1);
  box-shadow:0 20px 50px rgba(15,23,42,.55);
}

.avatar-initials{
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.avatar-spinner{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(15,23,42,.75);
  backdrop-filter: blur(2px);
}

.avatar-circle.is-uploading .avatar-spinner{
  display:flex;
}

.avatar-camera{
  position:absolute;
  right:0;
  bottom:0;
  transform: translate(25%,25%);
  width:34px;
  height:34px;
  border-radius:999px;
  background:#111827;
  border:2px solid #020617;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 14px rgba(15,23,42,.6);
}

.avatar-camera svg{
  width:16px;
  height:16px;
}

.avatar-hint{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  text-align:center;
  max-width:260px;
}


.autosave-status{
  font-size:12px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  border:0px solid var(--ring);
  color: var(--muted);
  background: rgba(256,256,256,.7);
  min-height:28px;
  display:inline-flex;
  align-items:center;
}
.autosave-status.saving{
  color: var(--ink);
  background: rgba(34,211,238,.10);
  border-color: rgba(34,211,238,.35);
}
.autosave-status.ok{
  color: var(--ink);
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.35);
}
.autosave-status.error{
  color: #b91c1c;
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.35);
}

.theme-dark .logo-spinner{
  background: rgba(2,6,23,.55);
}
.theme-dark .autosave-status{
  background: rgba(2,6,23,.35);
}
.logo-hint{
  font-size:13px;
  line-height:1.35;
}

.workflow-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wf-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 12px;
  border:1px solid var(--ring);
  border-radius:14px;
  background: var(--panel);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.wf-item:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.55);
  box-shadow: 0 14px 30px rgba(2,6,23,.08);
}
.wf-radio{ margin-top:3px; }
.wf-title{ font-weight:900; }
.wf-desc{ margin-top:2px; font-size:13px; color: var(--muted); }

.wizard-dropzone{
  border:2px dashed var(--ring);
  border-radius:16px;
  padding:18px;
  background: linear-gradient(180deg,#f9fafb,#ffffff);
  text-align:center;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.wizard-dropzone.dragover{
  border-color: rgba(34,211,238,.70);
  box-shadow: 0 18px 40px rgba(2,6,23,.08);
  transform: translateY(-1px);
}

/* Simple progress bar (matches your “app.css” style language) */
.upload-progress{
  height:10px;
  border-radius:999px;
  background: rgba(148,163,184,.20);
  overflow:hidden;
  border:1px solid var(--ring);
}
.upload-progress-bar{
  height:100%;
  width:0%;
  background: rgba(34,211,238,.85);
  transition: width .12s linear;
}


.theme-dark .logo-box{
  background: linear-gradient(180deg, rgba(15,26,43,.95), rgba(13,23,40,.95));
}
.theme-dark .wf-item{
  background: rgba(13,23,40,.65);
}

/* ==========================
   Incident Timeline (Summary)
   ========================== */

.timeline-shell{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.timeline-viewport{
  flex:1;
  /* allow horizontal scrolling of the track */
  overflow-x:auto;
  overflow-y:hidden;
  position:relative;
  /* hide scrollbars cross-browser */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/old Edge */
}

/* Chrome / Safari / new Edge */
.timeline-viewport::-webkit-scrollbar{
  display:none;
}

/* The scrolling strip of items */
.timeline-track{
  display:flex;
  align-items:flex-start;
  gap:0px;
  min-height:72px;
  padding:4px 0;
  position:relative;   /* so the baseline can anchor to the full track width */
}

/* Light grey line that runs behind ALL timeline items */
.timeline-item::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:24px;            /* vertical center through circles */
  height:2px;
  background:#d1d5db;  /* light gray */
  z-index:0;
}


.timeline-item{
  min-width:110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  position:relative;
  z-index:1;                   /* float above the baseline */
}

.timeline-circle{
  width:38px;
  height:38px;
  border-radius:999px;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(15,23,42,.35);
  cursor:default;
  position:relative;
  z-index:2;  /* above line */
}

.timeline-circle i,
.timeline-circle svg{
  width:18px;
  height:18px;
  color:#ffffff;
}

/* Color mapping – now with alpha for slight transparency */
.timeline-dot-open,
.timeline-circle.timeline-dot-open{
  background:rgba(2, 6, 23, 0.9);        /* black-ish */
}

.timeline-dot-closed,
.timeline-circle.timeline-dot-closed{
  background:rgba(6, 95, 70, 0.9);       /* dark green */
}

.timeline-dot-payment,
.timeline-circle.timeline-dot-payment{
  background:rgba(22, 163, 74, 0.9);     /* green */
}

.timeline-dot-correspondence,
.timeline-circle.timeline-dot-correspondence{
  background:rgba(29, 78, 216, 0.9);     /* blue */
}

.timeline-dot-event,
.timeline-circle.timeline-dot-event{
  background:rgba(126, 34, 206, 0.9);    /* purple */
}

.timeline-dot-deadline,
.timeline-circle.timeline-dot-deadline{
  background:rgba(185, 28, 28, 0.9);     /* red */
}

.timeline-dot-court,
.timeline-circle.timeline-dot-court{
  background:rgba(55, 48, 163, 0.9);     /* indigo */
}

.timeline-dot-note,
.timeline-circle.timeline-dot-note{
  background:rgba(180, 83, 9, 0.9);      /* dark yellow */
}

.timeline-dot-file,
.timeline-circle.timeline-dot-file{
  background:rgba(107, 114, 128, 0.9);   /* grey */
}


.timeline-circle i,
.timeline-circle svg{
  width:18px;
  height:18px;
  color:#ffffff;
}

.timeline-meta{
  text-align:center;
  font-size:12px;
  max-width:140px;
}

.timeline-label{
  font-weight:700;
}

.timeline-date{
  margin-top:1px;
}

.timeline-type{
  margin-top:1px;
  text-transform:capitalize;
}

.timeline-desc{
  margin-top:2px;
}

.timeline-empty{
  padding:6px 0;
}

.timeline-arrow{
  border:0;
  background:transparent;
  border-radius:999px;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--muted);
  transition: background .12s ease, transform .12s ease, color .12s ease;
}

.timeline-arrow:hover{
  background:rgba(148,163,184,.16);
  color:var(--ink);
  transform:translateY(-1px);
}

.timeline-slider-wrap{
  margin:6px 0 4px;
}

.timeline-slider{
  width:100%;
}

.timeline-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:6px;
  font-size:11px;
  color:var(--muted);
}

.timeline-legend-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.timeline-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  box-shadow:0 1px 2px rgba(15,23,42,.35);
}

/* Color mapping */
.timeline-dot-open,
.timeline-circle.timeline-dot-open{
  background:#020617; /* black-ish */
}

.timeline-dot-closed,
.timeline-circle.timeline-dot-closed{
  background:#065f46; /* dark green */
}

.timeline-dot-payment,
.timeline-circle.timeline-dot-payment{
  background:#16a34a; /* green */
}

.timeline-dot-correspondence,
.timeline-circle.timeline-dot-correspondence{
  background:#1d4ed8; /* blue */
}

.timeline-dot-event,
.timeline-circle.timeline-dot-event{
  background:#7e22ce; /* purple */
}

.timeline-dot-deadline,
.timeline-circle.timeline-dot-deadline{
  background:#b91c1c; /* red */
}

.timeline-dot-court,
.timeline-circle.timeline-dot-court{
  background:#3730a3; /* indigo */
}

.timeline-dot-note,
.timeline-circle.timeline-dot-note{
  background:#b45309; /* dark yellow */
}

.timeline-dot-file,
.timeline-circle.timeline-dot-file{
  background:#6b7280; /* grey */
}

/* Add panel */
/* Add panel – floating overlay */
.timeline-add-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -46%) scale(0.97);
  width:min(480px, 90vw);          /* roughly half-width on desktop */
  margin:0;
  padding:20px 24px 18px;
  border-radius:16px;
  border:1px solid var(--ring);
  background:#ffffff;
  box-shadow:0 24px 50px rgba(15,23,42,.25), 0 8px 20px rgba(15,23,42,.15);
  opacity:0;
  pointer-events:none;
  z-index:1001;
  transition:
    opacity .22s ease,
    transform .22s ease;
}

/* Dark scrim overlay behind the panel */
.timeline-panel-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.5);
  z-index:1000;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

.timeline-panel-overlay.open{
  opacity:1;
  pointer-events:auto;
}

/* Header row for add / detail timeline panels */
.timeline-add-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.timeline-add-title-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.timeline-add-title-icon{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.timeline-add-title-icon i,
.timeline-add-title-icon svg{
  width:20px;
  height:20px;
  color:var(--ink);
}

/* Close icon in the top-right of the panel */
.timeline-add-close{
  border:0;
  background:transparent;
  padding:6px;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  cursor:pointer;
  color:var(--muted);
  transition: background .12s ease, color .12s ease, transform .12s ease;
}

.timeline-add-close:hover{
  background:rgba(148,163,184,.18);
  color:var(--ink);
  transform:translateY(-1px);
}

.timeline-add-close i,
.timeline-add-close svg{
  width:18px;
  height:18px;
}


.timeline-add-panel.open{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
  pointer-events:auto;
}

/* keep "hidden" purely as an animated off-state */
.timeline-add-panel.hidden{
  opacity:0;
  pointer-events:none;
}

/* Title stays the same */
.timeline-add-title{
  font-weight:700;
  font-size:17px;
  color:var(--ink);
  margin:0;
}

/* Delete button with icon */
.timeline-delete-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--danger, #dc2626);
}

.timeline-delete-btn i,
.timeline-delete-btn svg{
  width:14px;
  height:14px;
}

.timeline-delete-btn:hover{
  color:#b91c1c;
}

/* Stack fields from the left */
.timeline-form-grid{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
}

/* Description / long fields just take full width naturally */
.timeline-form-grid .full-width{
  width:100%;
}

/* Actions row: Cancel on the left, Add on the right */
.timeline-form-grid .form-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:4px;
}


@media (max-width:640px){
  .timeline-form-grid{
    grid-template-columns:1fr;
  }
}

.timeline-circle-add{
  background:#ffffff;
  border:1px dashed #9ca3af;
  box-shadow:none;
  cursor:pointer;
}

.timeline-circle-add i,
.timeline-circle-add svg{
  color:#6b7280;
}

.timeline-item-add .timeline-label{
  font-weight:500;
  color:#6b7280;
}

.timeline-item,
.timeline-circle {
  cursor: pointer;
}

.timeline-add-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}

.timeline-add-close{
  border:0;
  background:transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px;
  border-radius:999px;
  opacity:0.7;
}

.timeline-add-close:hover{
  opacity:1;
}

.timeline-add-close i{
  width:16px;
  height:16px;
}

/* Delete button inside the detail panel */
.timeline-delete-btn{
  color:var(--danger, #ef4444);
}

/* ==========================
   Key Contacts Section
   ========================== */

/* Contacts count in section title */
.contacts-count{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  margin-left:4px;
}

.contacts-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:280px;
  overflow-y:auto;
  padding:4px;
}

.contacts-list::-webkit-scrollbar{
  width:6px;
}

.contacts-list::-webkit-scrollbar-track{
  background:rgba(148,163,184,.1);
  border-radius:999px;
}

.contacts-list::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.35);
  border-radius:999px;
}

.contacts-list::-webkit-scrollbar-thumb:hover{
  background:rgba(148,163,184,.55);
}

.contact-item{
  border:1px solid var(--ring);
  border-radius:10px;
  background:var(--panel);
  padding:10px 12px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.contact-item:hover{
  transform:translateY(-1px);
  border-color:rgba(34,211,238,.55);
  box-shadow:0 8px 20px rgba(2,6,23,.08);
}

.contact-name{
  font-weight:700;
  font-size:14px;
  color:var(--ink);
}

.contact-role{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.contacts-empty{
  font-size:13px;
  color:var(--muted);
  text-align:center;
  padding:20px 8px;
}

/* Contact detail panel (reuses timeline panel styles) */
.contact-detail-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -46%) scale(0.97);
  width:min(520px, 90vw);
  margin:0;
  padding:20px 24px 18px;
  border-radius:16px;
  border:1px solid var(--ring);
  background:#ffffff;
  box-shadow:0 24px 50px rgba(15,23,42,.25), 0 8px 20px rgba(15,23,42,.15);
  opacity:0;
  pointer-events:none;
  z-index:1001;
  transition:
    opacity .22s ease,
    transform .22s ease;
}

.contact-detail-panel.open{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
  pointer-events:auto;
}

.contact-detail-panel.hidden{
  opacity:0;
  pointer-events:none;
}

/* Contact panel overlay */
.contact-panel-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.5);
  z-index:1000;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

.contact-panel-overlay.open{
  opacity:1;
  pointer-events:auto;
}

.contact-detail-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.contact-detail-title-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.contact-detail-icon{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.contact-detail-icon i,
.contact-detail-icon svg{
  width:20px;
  height:20px;
  color:var(--ink);
}

.contact-detail-name{
  font-size:17px;
  font-weight:700;
  color:var(--ink);
  margin:0;
}

.contact-detail-role{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}

.contact-detail-close{
  border:0;
  background:transparent;
  padding:6px;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  cursor:pointer;
  color:var(--muted);
  transition: background .12s ease, color .12s ease;
}

.contact-detail-close:hover{
  background:rgba(148,163,184,.18);
  color:var(--ink);
}

.contact-detail-close i,
.contact-detail-close svg{
  width:18px;
  height:18px;
}

.contact-detail-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.contact-detail-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.contact-detail-row .contact-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:8px;
  background:rgba(148,163,184,.1);
  flex-shrink:0;
}

.contact-detail-row .contact-icon i,
.contact-detail-row .contact-icon svg{
  width:16px;
  height:16px;
  color:var(--muted);
}

.contact-detail-row .contact-icon.clickable{
  cursor:pointer;
  transition: background .12s ease, transform .12s ease;
}

.contact-detail-row .contact-icon.clickable:hover{
  background:rgba(34,211,238,.18);
  transform:translateY(-1px);
}

.contact-detail-row .contact-icon.clickable i,
.contact-detail-row .contact-icon.clickable svg{
  color:var(--brand);
}

.contact-detail-row .contact-info{
  flex:1;
  min-width:0;
}

.contact-detail-row .contact-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  margin-bottom:2px;
}

.contact-detail-row .contact-value{
  font-size:14px;
  color:var(--ink);
  word-break:break-word;
}

.contact-detail-row .contact-value a{
  color:var(--brand);
  text-decoration:none;
}

.contact-detail-row .contact-value a:hover{
  text-decoration:underline;
}

.contact-detail-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--ring);
}

.contact-delete-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--danger, #dc2626);
}

.contact-delete-btn i,
.contact-delete-btn svg{
  width:14px;
  height:14px;
}

.contact-delete-btn:hover{
  color:#b91c1c;
}

/* Contact add/edit form panel */
.contact-form-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -46%) scale(0.97);
  width:min(520px, 90vw);
  max-height:90vh;
  overflow-y:auto;
  margin:0;
  padding:20px 24px 18px;
  border-radius:16px;
  border:1px solid var(--ring);
  background:#ffffff;
  box-shadow:0 24px 50px rgba(15,23,42,.25), 0 8px 20px rgba(15,23,42,.15);
  opacity:0;
  pointer-events:none;
  z-index:1001;
  transition:
    opacity .22s ease,
    transform .22s ease;
}

.contact-form-panel.open{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
  pointer-events:auto;
}

.contact-form-panel.hidden{
  opacity:0;
  pointer-events:none;
}

.contact-form-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.contact-form-title-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.contact-form-icon{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.contact-form-icon i,
.contact-form-icon svg{
  width:20px;
  height:20px;
  color:var(--ink);
}

.contact-form-title{
  font-weight:700;
  font-size:17px;
  color:var(--ink);
  margin:0;
}

.contact-form-close{
  border:0;
  background:transparent;
  padding:6px;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  cursor:pointer;
  color:var(--muted);
  transition: background .12s ease, color .12s ease;
}

.contact-form-close:hover{
  background:rgba(148,163,184,.18);
  color:var(--ink);
}

.contact-form-close i,
.contact-form-close svg{
  width:16px;
  height:16px;
}

.contact-form-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.contact-form-grid .form-field{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.contact-form-grid .form-field label{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}

.contact-form-grid .form-field .input{
  font-size:14px;
}

.contact-form-grid .form-field textarea.input{
  min-height:70px;
  resize:vertical;
}

.contact-form-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid var(--ring);
}

/* Dark mode overrides for contacts */
.theme-dark .contact-detail-panel,
.theme-dark .contact-form-panel{
  background:var(--panel);
}

.theme-dark .contact-detail-row .contact-icon{
  background:rgba(148,163,184,.08);
}

.theme-dark .contact-item{
  background:rgba(13,23,40,.65);
}

/* =====================================================
   DARK MODE - Additional components
   ===================================================== */

/* Cards and containers */
.theme-dark .card{
  background:var(--panel);
  border-color:var(--ring);
}

.theme-dark .core-summary-card{
  background:linear-gradient(180deg,rgba(15,26,43,.95),rgba(11,18,32,.95));
  border-color:var(--ring);
}

.theme-dark .item{
  background:rgba(15,26,43,.8);
  border-color:var(--ring);
}

.theme-dark .scroll{
  background:rgba(15,26,43,.6);
  border-color:var(--ring);
}

/* Inputs and form elements */
.theme-dark .input,
.theme-dark .select,
.theme-dark .textarea{
  background:rgba(15,26,43,.8);
  color:var(--ink);
  border-color:var(--ring);
}

.theme-dark .input::placeholder,
.theme-dark .textarea::placeholder{
  color:var(--muted);
}

/* Tabs */
.theme-dark .tab{
  background:rgba(15,26,43,.6);
  border-color:var(--ring);
}

.theme-dark .tab.active{
  background:linear-gradient(180deg,rgba(34,211,238,.08),rgba(15,26,43,.9));
}

/* Document cards */
.theme-dark .doc-card{
  background:rgba(15,26,43,.8);
  border-color:var(--ring);
}

.theme-dark .doc-card:hover{
  border-color:var(--brand);
}

.theme-dark .doc-card-actions{
  border-top-color:var(--ring);
}

/* Upload combo */
.theme-dark .docs-drop-zone{
  background:rgba(15,26,43,.6);
  border-color:var(--ring);
}

.theme-dark .docs-drop-zone:hover,
.theme-dark .docs-upload-combo.drag-over .docs-drop-zone{
  background:rgba(59,130,246,.1);
}

/* Summary groups */
.theme-dark .summary-group{
  background:rgba(15,26,43,.6);
  border-color:var(--ring);
}

/* Helpbox */
.theme-dark .helpbox{
  background:linear-gradient(180deg,rgba(34,211,238,.05),rgba(15,26,43,.8));
  border-color:var(--ring);
}

/* Upload panel */
.theme-dark .upload-panel{
  background:var(--panel);
  border-color:var(--ring);
}

.theme-dark .upload-list{
  background:rgba(15,26,43,.6);
  border-color:var(--ring);
}

.theme-dark .upload-row{
  border-bottom-color:var(--ring);
}

/* Timeline */
.theme-dark .timeline-add-panel,
.theme-dark .timeline-detail-panel{
  background:var(--panel);
}

.theme-dark .timeline-item{
  background:rgba(15,26,43,.8);
  border-color:var(--ring);
}

.theme-dark .timeline-item:hover,
.theme-dark .timeline-item.selected{
  border-color:var(--brand);
}

/* Generate document modals */
.theme-dark .generate-preview-content,
.theme-dark .generate-email-modal-content{
  background:var(--panel);
}

.theme-dark .generate-preview-header,
.theme-dark .generate-preview-footer,
.theme-dark .generate-email-modal-header,
.theme-dark .generate-email-modal-footer{
  border-color:var(--ring);
}

/* Facts email modal */
.theme-dark .facts-email-modal-content{
  background:var(--panel);
}

.theme-dark .facts-email-modal-header,
.theme-dark .facts-email-modal-footer{
  border-color:var(--ring);
}

/* Letterhead */
.theme-dark .letterhead-preview{
  background:rgba(15,26,43,.8);
  border-color:var(--ring);
}

.theme-dark .letterhead-logo-area{
  background:rgba(15,26,43,.6);
  border-color:var(--ring);
}

.theme-dark .letterhead-no-edit-notice{
  background:rgba(148,163,184,.08);
}

/* Settings workflow items */
.theme-dark .wf-item{
  background:rgba(15,26,43,.6);
  border-color:var(--ring);
}

/* Popovers */
.theme-dark .status-popover,
.theme-dark .incident-popover{
  background:var(--panel);
  border-color:var(--ring);
}

/* History pane */
.theme-dark #historyPane{
  background:rgba(15,26,43,.6);
  border-color:var(--ring);
}

/* Date editor */
.theme-dark .date-editor input{
  background:rgba(15,26,43,.8);
  color:var(--ink);
  border-color:var(--ring);
}

/* =====================================================
   FACTS SHEET STYLES
   ===================================================== */

.facts-sheet{
  max-width:700px;
  margin:0 auto;
}

.facts-header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:8px;
}

.facts-title-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.facts-title-icon{
  width:24px;
  height:24px;
  color:var(--ink);
}

.facts-title{
  font-size:20px;
  font-weight:700;
  margin:0;
  color:var(--ink);
}

.facts-actions{
  display:flex;
  gap:8px;
}

.facts-tagline{
  color:var(--muted);
  font-size:14px;
  margin:0 0 20px 0;
}

.facts-incident-header{
  margin-bottom:16px;
}

.facts-incident-name{
  font-size:18px;
  font-weight:700;
  margin:0 0 8px 0;
  color:var(--ink);
}

.facts-incident-meta{
  display:flex;
  align-items:center;
  gap:12px;
}

.facts-status-pill{
  display:inline-block;
  background:#1e293b;
  color:#fff;
  font-size:12px;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
}

.facts-ref-number{
  font-size:14px;
  color:var(--muted);
}

.facts-separator{
  border:none;
  border-top:1px solid #e2e8f0;
  margin:20px 0;
}

.facts-section{
  margin-bottom:24px;
}

.facts-section-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:12px;
}

.facts-section-title i,
.facts-section-title svg{
  width:18px;
  height:18px;
  color:var(--muted);
}

.facts-contacts-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.facts-contact-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  padding:8px 12px;
  background:var(--panel);
  border:1px solid var(--ring);
  border-radius:8px;
}

.facts-contact-name{
  font-weight:600;
  color:var(--ink);
}

.facts-contact-details{
  display:flex;
  align-items:center;
  gap:16px;
  color:var(--muted);
  font-size:13px;
}

.facts-contact-phone{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.facts-contact-phone i,
.facts-contact-phone svg{
  width:14px;
  height:14px;
}

.facts-contact-email{
  color:var(--brand);
}

.facts-dates-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.facts-date-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
}

.facts-date{
  font-weight:600;
  color:var(--ink);
  min-width:110px;
}

.facts-date-label{
  color:var(--muted);
}

/* Email Modal */
.facts-email-modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.5);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:15vh;
  z-index:1000;
}

.facts-email-modal.hidden{
  display:none;
}

.facts-email-modal-content{
  background:#fff;
  border-radius:16px;
  width:min(400px, 90vw);
  box-shadow:0 24px 50px rgba(15,23,42,.25);
  overflow:hidden;
}

.facts-email-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--ring);
}

.facts-email-modal-header h3{
  margin:0;
  font-size:17px;
  font-weight:700;
}

.facts-email-modal-close{
  border:0;
  background:transparent;
  padding:4px;
  cursor:pointer;
  color:var(--muted);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.facts-email-modal-close:hover{
  background:rgba(148,163,184,.18);
  color:var(--ink);
}

.facts-email-modal-close i,
.facts-email-modal-close svg{
  width:18px;
  height:18px;
}

.facts-email-modal-body{
  padding:20px;
}

.facts-email-modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding:16px 20px;
  border-top:1px solid var(--ring);
}

/* Print-friendly styles */
@media print{
  body{
    background:#fff !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  
  .card{
    box-shadow:none !important;
    border:none !important;
  }
  
  .incident-form-shell{
    padding:0 !important;
  }
  
  .incident-form-header,
  .incident-form-back,
  .facts-actions,
  .facts-email-modal,
  nav,
  .sidebar,
  .topbar{
    display:none !important;
  }
  
  .facts-sheet{
    max-width:100% !important;
  }
  
  .facts-status-pill{
    background:#1e293b !important;
    color:#fff !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  
  .facts-contact-row{
    border:1px solid #ccc !important;
    background:#f8fafc !important;
  }
}

/* =====================================================
   GENERATE DOCUMENT STYLES
   ===================================================== */

.generate-view{
  max-width:700px;
}

.generate-tabs{
  display:flex;
  gap:4px;
  margin-bottom:20px;
  border-bottom:1px solid var(--ring);
  padding-bottom:0;
}

.generate-tab{
  padding:10px 16px;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .15s, border-color .15s;
}

.generate-tab:hover{
  color:var(--ink);
}

.generate-tab.active{
  color:var(--brand);
  border-bottom-color:var(--brand);
}

.generate-tab-content.hidden{
  display:none;
}

.generate-checkbox-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-size:14px;
}

.generate-checkbox-label input[type="checkbox"]{
  width:16px;
  height:16px;
}

.generate-doc-type-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
}

.generate-doc-type-option{
  padding:12px 14px;
  border:1px solid var(--ring);
  border-radius:8px;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}

.generate-doc-type-option:hover{
  border-color:var(--brand);
}

.generate-doc-type-option.selected{
  border-color:var(--brand);
  background:rgba(34,211,238,.08);
}

.generate-doc-type-name{
  font-weight:600;
  font-size:14px;
  color:var(--ink);
}

.generate-doc-type-desc{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

/* Letterhead styles */
.letterhead-no-edit-notice{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  background:rgba(148,163,184,.1);
  border-radius:8px;
  margin-bottom:16px;
  font-size:13px;
  color:var(--muted);
}

.letterhead-no-edit-notice.hidden{
  display:none;
}

.letterhead-no-edit-notice i,
.letterhead-no-edit-notice svg{
  width:18px;
  height:18px;
  flex-shrink:0;
  margin-top:1px;
}

.letterhead-logo-area{
  width:200px;
  height:80px;
  border:2px dashed var(--ring);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--panel);
  cursor:pointer;
  transition:border-color .15s;
}

.letterhead-logo-area:hover{
  border-color:var(--brand);
}

.letterhead-logo-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  color:var(--muted);
  font-size:12px;
}

.letterhead-logo-placeholder.hidden{
  display:none;
}

.letterhead-logo-placeholder i,
.letterhead-logo-placeholder svg{
  width:24px;
  height:24px;
}

.letterhead-logo-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.letterhead-logo-img.hidden{
  display:none;
}

.letterhead-preview{
  border:1px solid var(--ring);
  border-radius:8px;
  padding:20px;
  background:#fff;
}

.letterhead-preview-logo{
  max-height:40px;
  margin-bottom:8px;
}

.letterhead-preview-logo.hidden{
  display:none;
}

.letterhead-preview-name{
  font-size:18px;
  font-weight:700;
  color:var(--ink);
}

.letterhead-preview-contact{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

.letterhead-preview-line{
  border:none;
  border-top:1px solid #e2e8f0;
  margin:16px 0;
}

.letterhead-preview-placeholder{
  font-style:italic;
  color:var(--muted);
  font-size:13px;
}

/* History list */
.generate-history-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.generate-history-item{
  padding:12px 14px;
  border:1px solid var(--ring);
  border-radius:8px;
  cursor:pointer;
  transition:border-color .15s, transform .15s;
}

.generate-history-item:hover{
  border-color:var(--brand);
  transform:translateY(-1px);
}

.generate-history-type{
  font-weight:600;
  font-size:14px;
  color:var(--ink);
}

.generate-history-date{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

/* Generate Popover */
.generate-popover-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.5);
  z-index:1000;
}

.generate-popover-overlay.hidden{
  display:none;
}

.generate-popover{
  position:fixed;
  top:5vh;
  left:50%;
  transform:translateX(-50%);
  width:min(800px, 95vw);
  max-height:90vh;
  background:#fff;
  border-radius:16px;
  box-shadow:0 24px 50px rgba(15,23,42,.25);
  z-index:1001;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.generate-popover.hidden{
  display:none;
}

.generate-popover-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--ring);
}

.generate-popover-title{
  font-size:17px;
  font-weight:700;
}

.generate-popover-close{
  border:0;
  background:transparent;
  padding:6px;
  cursor:pointer;
  color:var(--muted);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.generate-popover-close:hover{
  background:rgba(148,163,184,.18);
  color:var(--ink);
}

.generate-popover-close i,
.generate-popover-close svg{
  width:18px;
  height:18px;
}

.generate-popover-toolbar{
  display:flex;
  gap:8px;
  padding:12px 20px;
  border-bottom:1px solid var(--ring);
  flex-wrap:wrap;
}

.generate-share-dropdown{
  position:relative;
}

.generate-share-menu{
  position:absolute;
  top:100%;
  left:0;
  margin-top:4px;
  background:#fff;
  border:1px solid var(--ring);
  border-radius:8px;
  box-shadow:0 8px 20px rgba(15,23,42,.15);
  z-index:10;
  min-width:160px;
}

.generate-share-menu.hidden{
  display:none;
}

.generate-share-item{
  padding:10px 14px;
  font-size:14px;
  cursor:pointer;
  transition:background .12s;
}

.generate-share-item:hover{
  background:rgba(148,163,184,.12);
}

.generate-share-item:first-child{
  border-radius:8px 8px 0 0;
}

.generate-share-item:last-child{
  border-radius:0 0 8px 8px;
}

.generate-popover-letterhead{
  padding:12px 20px;
  border-bottom:1px solid var(--ring);
  display:flex;
  align-items:center;
  gap:16px;
  background:#f8fafc;
}

.letterhead-mini-preview{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.letterhead-mini-preview strong{
  font-size:14px;
}

.letterhead-mini-preview span{
  font-size:12px;
  color:var(--muted);
}

.generate-popover-body{
  flex:1;
  padding:20px;
  overflow-y:auto;
  min-height:300px;
}

.generate-editor{
  width:100%;
  height:100%;
  min-height:280px;
  resize:vertical;
  font-family:'SF Mono', Monaco, Consolas, monospace;
  font-size:13px;
  line-height:1.5;
}

.generate-popover-footer{
  padding:12px 20px;
  border-top:1px solid var(--ring);
  display:flex;
  justify-content:flex-end;
}

/* Preview Modal */
.generate-preview-modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1100;
}

.generate-preview-modal.hidden{
  display:none;
}

.generate-preview-content{
  background:#fff;
  border-radius:16px;
  width:min(700px, 95vw);
  max-height:90vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.generate-preview-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--ring);
}

.generate-preview-header h3{
  margin:0;
  font-size:17px;
}

.generate-preview-close{
  border:0;
  background:transparent;
  padding:6px;
  cursor:pointer;
  color:var(--muted);
  border-radius:999px;
}

.generate-preview-close:hover{
  background:rgba(148,163,184,.18);
  color:var(--ink);
}

.generate-preview-close i,
.generate-preview-close svg{
  width:18px;
  height:18px;
}

.generate-preview-body{
  flex:1;
  padding:24px;
  overflow-y:auto;
  line-height:1.6;
}

.generate-preview-body h1{
  font-size:24px;
  margin-bottom:16px;
}

.generate-preview-body h2{
  font-size:20px;
  margin-bottom:12px;
}

.generate-preview-body h3{
  font-size:16px;
  margin-bottom:8px;
}

.generate-preview-body p{
  margin-bottom:12px;
}

.generate-preview-body ul{
  margin-bottom:12px;
  padding-left:24px;
}

.generate-preview-body li{
  margin-bottom:4px;
}

.generate-preview-body hr{
  border:none;
  border-top:1px solid #e2e8f0;
  margin:16px 0;
}

.preview-letterhead{
  margin-bottom:20px;
}

.preview-letterhead-name{
  font-size:18px;
  font-weight:700;
}

.preview-letterhead-contact{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

.preview-letterhead-line{
  border:none;
  border-top:1px solid #e2e8f0;
  margin:12px 0 0 0;
}

.generate-preview-footer{
  padding:12px 20px;
  border-top:1px solid var(--ring);
  display:flex;
  justify-content:flex-end;
}

/* Generate Email Modal */
.generate-email-modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.5);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:15vh;
  z-index:1200;
}

.generate-email-modal.hidden{
  display:none;
}

.generate-email-modal-content{
  background:#fff;
  border-radius:16px;
  width:min(400px, 90vw);
  box-shadow:0 24px 50px rgba(15,23,42,.25);
  overflow:hidden;
}

.generate-email-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--ring);
}

.generate-email-modal-header h3{
  margin:0;
  font-size:17px;
  font-weight:700;
}

.generate-email-modal-close{
  border:0;
  background:transparent;
  padding:4px;
  cursor:pointer;
  color:var(--muted);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.generate-email-modal-close:hover{
  background:rgba(148,163,184,.18);
  color:var(--ink);
}

.generate-email-modal-close i,
.generate-email-modal-close svg{
  width:18px;
  height:18px;
}

.generate-email-modal-body{
  padding:20px;
}

.generate-email-modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding:16px 20px;
  border-top:1px solid var(--ring);
}

/* =====================================================
   TOAST NOTIFICATIONS
   ===================================================== */

.toast-container{
  position:fixed;
  top:20px;
  right:20px;
  z-index:10000;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.toast{
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:300px;
  max-width:420px;
  padding:14px 16px;
  background:#ffffff;
  border-radius:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  border:1px solid var(--ring);
  animation:toastSlideIn .3s ease;
}

.toast.toast-exiting{
  animation:toastSlideOut .25s ease forwards;
}

@keyframes toastSlideIn{
  from{
    opacity:0;
    transform:translateX(100%);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes toastSlideOut{
  from{
    opacity:1;
    transform:translateX(0);
  }
  to{
    opacity:0;
    transform:translateX(100%);
  }
}

.toast-icon{
  flex-shrink:0;
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.toast-icon i,
.toast-icon svg{
  width:14px;
  height:14px;
}

.toast.toast-success .toast-icon{
  background:rgba(34,197,94,.15);
  color:#16a34a;
}

.toast.toast-error .toast-icon{
  background:rgba(239,68,68,.15);
  color:#dc2626;
}

.toast.toast-warning .toast-icon{
  background:rgba(245,158,11,.15);
  color:#d97706;
}

.toast.toast-info .toast-icon{
  background:rgba(59,130,246,.15);
  color:#2563eb;
}

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

.toast-title{
  font-weight:600;
  font-size:14px;
  color:#0f172a;
  margin-bottom:2px;
}

.toast-message{
  font-size:13px;
  color:#64748b;
  line-height:1.4;
  word-wrap:break-word;
}

.toast-close{
  flex-shrink:0;
  background:none;
  border:none;
  padding:4px;
  cursor:pointer;
  color:#94a3b8;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, color .15s;
}

.toast-close:hover{
  background:rgba(148,163,184,.15);
  color:#475569;
}

.toast-close i,
.toast-close svg{
  width:16px;
  height:16px;
}

/* Dark mode toast */
.theme-dark .toast{
  background:var(--panel);
  border-color:var(--ring);
  box-shadow:0 8px 30px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
}

.theme-dark .toast-title{
  color:var(--ink);
}

.theme-dark .toast-message{
  color:var(--muted);
}

.theme-dark .toast-close{
  color:var(--muted);
}

.theme-dark .toast-close:hover{
  background:rgba(148,163,184,.1);
  color:var(--ink);
}

/* Document detail panel additions */
.file-replace-area{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.file-replace-area .muted{
  font-style:italic;
}

/* Scrollable AI summary container */
.doc-summary-scroll{
  max-height:120px;
  overflow-y:auto;
  padding:8px;
  border-radius:8px;
  background:var(--panel);
  border:1px solid var(--ring);
  line-height:1.5;
}

/* Confirm modal */
.confirm-modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.5);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:20vh;
  z-index:2000;
}

.confirm-modal.hidden{
  display:none;
}

.confirm-modal-content{
  background:#fff;
  border-radius:16px;
  width:min(380px, 90vw);
  box-shadow:0 24px 50px rgba(15,23,42,.25);
  overflow:hidden;
  animation:confirmSlideIn .2s ease;
}

@keyframes confirmSlideIn{
  from{
    opacity:0;
    transform:translateY(-20px) scale(0.95);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.confirm-modal-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:24px 20px 16px;
  text-align:center;
}

.confirm-modal-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.confirm-modal-icon svg,
.confirm-modal-icon i{
  width:24px;
  height:24px;
}

.confirm-modal-icon-danger{
  background:rgba(239,68,68,.12);
  color:#dc2626;
}

.confirm-modal-icon-warning{
  background:rgba(245,158,11,.12);
  color:#d97706;
}

.confirm-modal-icon-info{
  background:rgba(59,130,246,.12);
  color:#2563eb;
}

.confirm-modal-header h3{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#0f172a;
}

.confirm-modal-body{
  padding:0 20px 20px;
  text-align:center;
}

.confirm-modal-body p{
  margin:0;
  color:#64748b;
  font-size:14px;
  line-height:1.5;
}

.confirm-modal-footer{
  display:flex;
  gap:12px;
  padding:16px 20px;
  border-top:1px solid var(--ring);
  background:#f8fafc;
}

.confirm-modal-footer .btn{
  flex:1;
}

.btn.danger{
  background:#dc2626;
  color:#fff;
  border-color:#dc2626;
}

.btn.danger:hover{
  background:#b91c1c;
  border-color:#b91c1c;
}

.btn.warning{
  background:#d97706;
  color:#fff;
  border-color:#d97706;
}

.btn.warning:hover{
  background:#b45309;
  border-color:#b45309;
}

/* Dark mode for confirm modal */
.theme-dark .confirm-modal-content{
  background:var(--panel);
}

.theme-dark .confirm-modal-header h3{
  color:var(--ink);
}

.theme-dark .confirm-modal-body p{
  color:var(--muted);
}

.theme-dark .confirm-modal-footer{
  background:rgba(30,41,59,.5);
  border-color:var(--ring);
}

/* Doc card icon colors */
.doc-card-icon.pdf{ color:#dc2626; }
.doc-card-icon.word{ color:#2563eb; }
.doc-card-icon.excel{ color:#16a34a; }
.doc-card-icon.image{ color:#8b5cf6; }
.doc-card-icon.txt{ color:#64748b; }

/* Document category pills */
.doc-category-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:12px;
  font-size:11px;
  font-weight:500;
  white-space:nowrap;
  background:#e2e8f0;
  color:#475569;
}

.doc-category-pill.photo{ background:#ddd6fe; color:#7c3aed; }
.doc-category-pill.disclosure{ background:#fce7f3; color:#be185d; }
.doc-category-pill.contract{ background:#dbeafe; color:#1d4ed8; }
.doc-category-pill.marketing-material{ background:#fef3c7; color:#b45309; }
.doc-category-pill.offer{ background:#d1fae5; color:#047857; }
.doc-category-pill.inspection{ background:#e0e7ff; color:#4338ca; }
.doc-category-pill.correspondence{ background:#ede9fe; color:#6d28d9; }
.doc-category-pill.product-documentation{ background:#ccfbf1; color:#0f766e; }
.doc-category-pill.processing{ background:#fef9c3; color:#a16207; font-style:italic; }
.doc-category-pill.other{ background:#f1f5f9; color:#64748b; }

/* Dark mode category pills */
.theme-dark .doc-category-pill{ background:#334155; color:#cbd5e1; }
.theme-dark .doc-category-pill.photo{ background:#4c1d95; color:#c4b5fd; }
.theme-dark .doc-category-pill.disclosure{ background:#831843; color:#f9a8d4; }
.theme-dark .doc-category-pill.contract{ background:#1e3a8a; color:#93c5fd; }
.theme-dark .doc-category-pill.marketing-material{ background:#78350f; color:#fcd34d; }
.theme-dark .doc-category-pill.offer{ background:#064e3b; color:#6ee7b7; }
.theme-dark .doc-category-pill.inspection{ background:#312e81; color:#a5b4fc; }
.theme-dark .doc-category-pill.correspondence{ background:#4c1d95; color:#c4b5fd; }
.theme-dark .doc-category-pill.product-documentation{ background:#134e4a; color:#5eead4; }
.theme-dark .doc-category-pill.processing{ background:#713f12; color:#fde047; }
.theme-dark .doc-category-pill.other{ background:#334155; color:#94a3b8; }

/* Document folder selector */
.folder-selector{
  position:relative;
}

.folder-selector-btn{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid var(--ring);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  transition:border-color .15s, background .15s;
}

.folder-selector-btn:hover{
  border-color:var(--brand);
  background:#f8fafc;
}

.folder-selector-btn i{
  width:16px;
  height:16px;
  color:var(--muted);
}

.folder-selector-btn .folder-chevron{
  width:14px;
  height:14px;
  margin-left:2px;
}

.folder-selector-btn .folder-count{
  color:var(--muted);
  font-weight:400;
}

.folder-dropdown{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  min-width:200px;
  background:#fff;
  border:1px solid var(--ring);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(15,23,42,.15);
  z-index:100;
  overflow:hidden;
}

.folder-dropdown.hidden{
  display:none;
}

.folder-dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  cursor:pointer;
  font-size:13px;
  color:var(--ink);
  transition:background .1s;
}

.folder-dropdown-item:hover{
  background:#f1f5f9;
}

.folder-dropdown-item.active{
  background:#eff6ff;
  color:var(--brand);
  font-weight:500;
}

.folder-dropdown-item i{
  width:16px;
  height:16px;
  color:var(--muted);
}

.folder-dropdown-item.active i{
  color:var(--brand);
}

.folder-dropdown-item .folder-count{
  margin-left:auto;
  color:var(--muted);
  font-size:12px;
}

.folder-dropdown-item.folder-add-item{
  color:var(--brand);
}

.folder-dropdown-item.folder-add-item i{
  color:var(--brand);
}

.folder-dropdown-divider{
  height:1px;
  background:var(--ring);
  margin:4px 0;
}

.folder-color-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  flex-shrink:0;
}

/* Add folder modal */
.folder-add-modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.5);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:15vh;
  z-index:2000;
}

.folder-add-modal.hidden{
  display:none;
}

.folder-add-modal-content{
  background:#fff;
  border-radius:16px;
  width:min(360px, 90vw);
  box-shadow:0 24px 50px rgba(15,23,42,.25);
  overflow:hidden;
  animation:confirmSlideIn .2s ease;
}

.folder-add-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--ring);
}

.folder-add-modal-header h3{
  margin:0;
  font-size:17px;
  font-weight:700;
}

.folder-add-modal-close{
  border:0;
  background:transparent;
  padding:4px;
  cursor:pointer;
  color:var(--muted);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.folder-add-modal-close:hover{
  background:rgba(148,163,184,.18);
  color:var(--ink);
}

.folder-add-modal-close i{
  width:18px;
  height:18px;
}

.folder-add-modal-body{
  padding:20px;
}

.folder-add-modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding:16px 20px;
  border-top:1px solid var(--ring);
  background:#f8fafc;
}

/* Folder color picker */
.folder-color-picker{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.folder-color-option{
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .1s, border-color .1s;
}

.folder-color-option:hover{
  transform:scale(1.1);
}

.folder-color-option.selected{
  border-color:#0f172a;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px currentColor;
}

/* Dark mode folder selector */
.theme-dark .folder-selector-btn{
  background:var(--panel);
  border-color:var(--ring);
  color:var(--ink);
}

.theme-dark .folder-selector-btn:hover{
  background:#334155;
}

.theme-dark .folder-dropdown{
  background:var(--panel);
  border-color:var(--ring);
}

.theme-dark .folder-dropdown-item:hover{
  background:#334155;
}

.theme-dark .folder-dropdown-item.active{
  background:rgba(59,130,246,.15);
}

.theme-dark .folder-add-modal-content{
  background:var(--panel);
}

.theme-dark .folder-add-modal-footer{
  background:rgba(30,41,59,.5);
}

.theme-dark .folder-color-option.selected{
  border-color:#fff;
}

/* Document Select Mode */
.doc-select-buttons{
  display:flex;
  gap:8px;
  align-items:center;
}

.doc-select-btn{
  font-size:12px;
  padding:5px 10px;
}

.doc-select-btn.cancel-mode{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}

.doc-select-btn.cancel-mode:hover{
  background:#2563eb;
}

.doc-select-all-btn{
  font-size:12px;
  padding:5px 10px;
}

/* Document card select checkbox */
.doc-select-checkbox{
  position:absolute;
  top:8px;
  right:8px;
  z-index:10;
  cursor:pointer;
}

.doc-select-checkbox input{
  display:none;
}

.doc-select-checkmark{
  display:block;
  width:20px;
  height:20px;
  border:2px solid var(--ring);
  border-radius:4px;
  background:#fff;
  transition:all .15s;
}

.doc-select-checkbox input:checked + .doc-select-checkmark{
  background:var(--brand);
  border-color:var(--brand);
}

.doc-select-checkbox input:checked + .doc-select-checkmark::after{
  content:'';
  display:block;
  width:6px;
  height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
  margin:2px auto;
}

.doc-card{
  position:relative;
}

.doc-card.selected{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(59,130,246,.2);
}

/* Bulk Actions Bar */
.doc-bulk-actions-bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border:1px solid #bfdbfe;
  border-radius:10px;
  margin-bottom:10px;
  animation:bulkBarSlideIn .2s ease;
}

@keyframes bulkBarSlideIn{
  from{ opacity:0; transform:translateY(-10px); }
  to{ opacity:1; transform:translateY(0); }
}

.doc-bulk-actions-bar.hidden{
  display:none;
}

.doc-bulk-actions-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.doc-bulk-count{
  font-size:13px;
  color:var(--ink);
}

.doc-bulk-count strong{
  color:var(--brand);
}

/* Bulk action dropdown */
.doc-bulk-action-dropdown{
  position:relative;
}

.doc-bulk-action-btn{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border:1px solid var(--ring);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  transition:border-color .15s;
}

.doc-bulk-action-btn:hover{
  border-color:var(--brand);
}

.doc-bulk-action-btn i{
  width:14px;
  height:14px;
  color:var(--muted);
}

.doc-bulk-action-menu{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  min-width:180px;
  background:#fff;
  border:1px solid var(--ring);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(15,23,42,.15);
  z-index:100;
  overflow:hidden;
}

.doc-bulk-action-menu.hidden{
  display:none;
}

.doc-bulk-action-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  cursor:pointer;
  font-size:13px;
  color:var(--ink);
  transition:background .1s;
}

.doc-bulk-action-item:hover{
  background:#f1f5f9;
}

.doc-bulk-action-item i{
  width:16px;
  height:16px;
  color:var(--muted);
}

.doc-bulk-action-item.danger{
  color:#dc2626;
}

.doc-bulk-action-item.danger i{
  color:#dc2626;
}

.doc-bulk-action-item.danger:hover{
  background:#fef2f2;
}

.doc-bulk-action-divider{
  height:1px;
  background:var(--ring);
  margin:4px 0;
}

/* Bulk secondary options */
.doc-bulk-secondary{
  display:flex;
  align-items:center;
  gap:8px;
}

.doc-bulk-secondary.hidden{
  display:none;
}

.doc-bulk-secondary-option{
  display:flex;
  align-items:center;
  gap:8px;
}

.doc-bulk-secondary-option.hidden{
  display:none;
}

.doc-bulk-secondary-option select{
  min-width:160px;
}

/* Dark mode bulk actions */
.theme-dark .doc-bulk-actions-bar{
  background:linear-gradient(135deg, rgba(59,130,246,.1) 0%, rgba(34,197,94,.1) 100%);
  border-color:#334155;
}

.theme-dark .doc-bulk-action-btn{
  background:var(--panel);
  border-color:var(--ring);
}

.theme-dark .doc-bulk-action-menu{
  background:var(--panel);
  border-color:var(--ring);
}

.theme-dark .doc-bulk-action-item:hover{
  background:#334155;
}

.theme-dark .doc-bulk-action-item.danger:hover{
  background:rgba(220,38,38,.15);
}

.theme-dark .doc-select-checkmark{
  background:var(--panel);
  border-color:var(--ring);
}

.theme-dark .doc-card.selected{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(59,130,246,.3);
}

/* Verity AI Chat Panel */
.verity-view{
  display:flex;
  flex-direction:column;
  height:calc(100vh - 200px);
  min-height:400px;
}

.verity-history-section{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.verity-history-pane{
  flex:1;
  overflow-y:auto;
  background:#f8fafc;
  border:1px solid var(--ring);
  border-radius:12px;
  padding:16px;
}

.verity-message{
  margin-bottom:16px;
}

.verity-message:last-child{
  margin-bottom:0;
}

.verity-message-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

.verity-message-icon{
  width:16px;
  height:16px;
  color:var(--muted);
}

.verity-ai-icon{
  font-size:16px;
  color:var(--brand);
}

.verity-message-label{
  font-size:12px;
  font-weight:600;
  color:var(--ink);
}

.verity-message-time{
  font-size:11px;
  color:var(--muted);
  margin-left:auto;
}

.verity-message-content{
  padding-left:24px;
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
}

.verity-message-user .verity-message-content{
  background:#fff;
  border:1px solid var(--ring);
  border-radius:10px;
  padding:12px 16px;
  margin-left:24px;
}

.verity-message-ai .verity-message-content{
  background:linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border:1px solid #bfdbfe;
  border-radius:10px;
  padding:12px 16px;
  margin-left:24px;
}

.verity-input-section{
  margin-top:16px;
  flex-shrink:0;
}

.verity-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.verity-textarea{
  min-height:80px;
  resize:vertical;
}

.verity-form-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.verity-form-actions .btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* Dark mode Verity */
.theme-dark .verity-history-pane{
  background:rgba(30,41,59,.5);
}

.theme-dark .verity-message-user .verity-message-content{
  background:var(--panel);
}

.theme-dark .verity-message-ai .verity-message-content{
  background:linear-gradient(135deg, rgba(59,130,246,.1) 0%, rgba(34,197,94,.1) 100%);
  border-color:#334155;
}

/* Tasks Section */
.tasks-section-card{
  padding:0;
  overflow:hidden;
}

.tasks-empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  text-align:center;
}

.tasks-empty-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
}

.tasks-empty-icon i{
  width:18px;
  height:18px;
  color:#16a34a;
}

.tasks-empty-text{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:2px;
}

.tasks-empty-subtext{
  font-size:12px;
  color:var(--muted);
}

#tasksList{
  max-height:280px;
  overflow-y:auto;
}

.task-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-bottom:1px solid var(--ring);
  cursor:pointer;
  transition:background .1s;
}

.task-item:last-child{
  border-bottom:none;
}

.task-item:hover{
  background:#f8fafc;
}

.task-item.complete{
  opacity:0.6;
}

.task-item.complete .task-title{
  text-decoration:line-through;
  color:var(--muted);
}

.task-toggle-btn{
  flex-shrink:0;
  width:20px;
  height:20px;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  color:var(--muted);
  transition:color .15s;
}

.task-toggle-btn:hover{
  color:var(--brand);
}

.task-item.complete .task-toggle-btn{
  color:#16a34a;
}

.task-toggle-btn i{
  width:18px;
  height:18px;
}

.task-content{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.task-title{
  font-size:13px;
  font-weight:500;
  color:var(--ink);
}

.task-description{
  font-size:12px;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex-basis:100%;
}

.task-meta{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
}

.task-priority-badge{
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  padding:2px 6px;
  border-radius:4px;
  letter-spacing:0.5px;
}

.task-priority-badge.priority-low{
  background:#f1f5f9;
  color:#64748b;
}

.task-priority-badge.priority-medium{
  background:#dbeafe;
  color:#2563eb;
}

.task-priority-badge.priority-high{
  background:#fef3c7;
  color:#d97706;
}

.task-priority-badge.priority-urgent{
  background:#fee2e2;
  color:#dc2626;
}

.task-due{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  color:var(--muted);
}

.task-due i{
  width:12px;
  height:12px;
}

.task-due.overdue{
  color:#dc2626;
  font-weight:500;
}

.tasks-completed-divider{
  display:flex;
  align-items:center;
  padding:8px 16px;
  background:#f8fafc;
  border-top:1px solid var(--ring);
  border-bottom:1px solid var(--ring);
}

.tasks-completed-divider span{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--muted);
}

/* Priority left border indicator */
.task-item.priority-urgent{
  border-left:3px solid #dc2626;
}

.task-item.priority-high{
  border-left:3px solid #d97706;
}

.task-item.priority-medium{
  border-left:3px solid #2563eb;
}

.task-item.priority-low{
  border-left:3px solid #94a3b8;
}

/* Dark mode tasks */
.theme-dark .tasks-empty-icon{
  background:linear-gradient(135deg, rgba(34,197,94,.2) 0%, rgba(16,185,129,.2) 100%);
}

.theme-dark .tasks-empty-icon i{
  color:#4ade80;
}

.theme-dark .task-item:hover{
  background:#334155;
}

.theme-dark .task-item.complete .task-toggle-btn{
  color:#4ade80;
}

.theme-dark .task-priority-badge.priority-low{
  background:#334155;
  color:#94a3b8;
}

.theme-dark .task-priority-badge.priority-medium{
  background:rgba(59,130,246,.2);
  color:#60a5fa;
}

.theme-dark .task-priority-badge.priority-high{
  background:rgba(217,119,6,.2);
  color:#fbbf24;
}

.theme-dark .task-priority-badge.priority-urgent{
  background:rgba(220,38,38,.2);
  color:#f87171;
}

.theme-dark .tasks-completed-divider{
  background:rgba(30,41,59,.5);
}

/* Requests Section */
#requestsList{
  max-height:280px;
  overflow-y:auto;
}

.request-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-bottom:1px solid var(--ring);
  cursor:pointer;
  transition:background .1s;
}

.request-item:last-child{
  border-bottom:none;
}

.request-item:hover{
  background:#f8fafc;
}

.request-item.fulfilled{
  opacity:0.6;
}

.request-item.fulfilled .request-description{
  text-decoration:line-through;
  color:var(--muted);
}

.request-toggle-btn{
  flex-shrink:0;
  width:20px;
  height:20px;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  color:var(--muted);
  transition:color .15s;
}

.request-toggle-btn:hover{
  color:var(--brand);
}

.request-item.fulfilled .request-toggle-btn{
  color:#16a34a;
}

.request-toggle-btn i{
  width:18px;
  height:18px;
}

.request-content{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.request-description{
  font-size:13px;
  font-weight:500;
  color:var(--ink);
}

.request-meta{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
}

.request-by{
  font-size:11px;
  color:var(--muted);
  font-style:italic;
}

.request-party{
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  padding:2px 6px;
  border-radius:4px;
  letter-spacing:0.5px;
  background:#f1f5f9;
  color:#64748b;
}

.request-due{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  color:var(--muted);
}

.request-due i{
  width:12px;
  height:12px;
}

.request-due.overdue{
  color:#dc2626;
  font-weight:500;
}

/* Dark mode requests */
.theme-dark .request-item:hover{
  background:#334155;
}

.theme-dark .request-item.fulfilled .request-toggle-btn{
  color:#4ade80;
}

.theme-dark .request-party{
  background:#334155;
  color:#94a3b8;
}

/* Documents Empty State */
.docs-empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  text-align:center;
}

.docs-empty-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg, #e0e7ff 0%, #dbeafe 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
}

.docs-empty-icon i{
  width:18px;
  height:18px;
  color:#6366f1;
}

.docs-empty-text{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:2px;
}

.docs-empty-subtext{
  font-size:12px;
  color:var(--muted);
}

/* Contacts Empty State */
.contacts-empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  text-align:center;
}

.contacts-empty-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
}

.contacts-empty-icon i{
  width:18px;
  height:18px;
  color:#d97706;
}

.contacts-empty-text{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:2px;
}

.contacts-empty-subtext{
  font-size:12px;
  color:var(--muted);
}

/* Dark mode empty states */
.theme-dark .docs-empty-icon{
  background:linear-gradient(135deg, rgba(99,102,241,.2) 0%, rgba(59,130,246,.2) 100%);
}

.theme-dark .docs-empty-icon i{
  color:#818cf8;
}

.theme-dark .contacts-empty-icon{
  background:linear-gradient(135deg, rgba(217,119,6,.2) 0%, rgba(245,158,11,.2) 100%);
}

.theme-dark .contacts-empty-icon i{
  color:#fbbf24;
}