/* =====================================================================
   Business Light — Full Drop-in Theme
   ===================================================================== */

/* ------------------------ Tokens ------------------------ */
:root{
  /* Core palette */
  /* Neutral, high-contrast (no baby-blue tables) */
  --bg:            #f6f7f9;
  --panel:         #ffffff;
  --panel-2:       #f3f4f6;
  --border:        #e5e7eb;
  --text:          #0b1220;
  --muted:         #5b6472;

  /* Accents (brand) */
  --blue:          #2a7dd1;  /* Requests button blue */
  --blue-dk:       #1f6db9;
  --ink:           #0b1830;

  /* Status */
  --green-3:       #0e9f6e;
  --red-3:         #d83a4a;
  --amber-3:       #c98300;

  /* Surfaces */
  --pill:          #eef0f3;

  /* App structure */
  --drawer-w:      360px;
  --sticky-col-w:  260px;
  --day-col-w:     180px;
  --board-pad:     12px;
  --datebar-h:     44px;

  /* Scrollbars (light) */
  --sb-track:      #eef0f3;
  --sb-thumb:      #cfd6de;
  --sb-thumb-hover:#bcc5cf;

  /* Calendar stripe */
  --day-odd:       #ffffff;
  --day-even:      #f7f7f8;   /* subtle neutral stripe */
}

/* Program Overview table hover (black row highlight with white text) */
.pmProgramTableRow:hover{
  background: #000 !important;
}
.pmProgramTableRow:hover td{
  background: #000 !important;
}
.pmProgramTableRow:hover td{
  color: #fff !important;
}
.pmProgramTableRow:hover td *{
  color: #fff !important;
}

/* Strong surfaces (rails/bars) */
:root{
  --rail-bg:       #0f2642;   /* left workspace rail */
  --bar-bg:        #0f2642;   /* top controls bar */
  --bar-border:    #0a1b32;
}

/* Card on-blue styling accents */
:root{
  --card-accent:      var(--blue);
  --card-accent-dk:   var(--blue-dk);
  --card-accent-ink:  var(--ink);
}

/* ------------------------ Resets ------------------------ */
*{ box-sizing: border-box; }
html,body,#root{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
}
a{ color:var(--blue); }
.muted{ color:var(--muted); }

/* Global scrollbars */
*{ scrollbar-width:thin; scrollbar-color:var(--sb-thumb) var(--sb-track); }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:var(--sb-track); border-radius:10px; }
*::-webkit-scrollbar-thumb{
  background:var(--sb-thumb); border:1px solid var(--border); border-radius:10px;
}
*::-webkit-scrollbar-thumb:hover{ background:var(--sb-thumb-hover); }
*::-webkit-scrollbar-corner{ background:var(--sb-track); }

/* ------------------------ App Layout ------------------------ */
.layout{ min-height:100vh; display:flex; background:var(--bg); }
.mainArea{ flex:1; height:100vh; overflow:auto; background:var(--bg); }

/* Top controls bar */
.controls{
  position:sticky; top:0; z-index:8;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; min-height:56px;
  background:var(--bar-bg); border-bottom:1px solid var(--bar-border);
  color:#e9f1ff;
}
.controls .brand{ margin:0; font-size:16px; font-weight:700; letter-spacing:.2px; color:#fff; }
.controls .select, .controls .text, .controls .date{
  background:#0f325d; color:#e9f1ff; border:1px solid #1a3d6e; border-radius:10px; padding:8px 10px;
}
.controls .btn{
  background:#0f325d; color:#e9f1ff; border:1px solid #1a3d6e; border-radius:10px; padding:8px 12px; cursor:pointer;
}
.controls .btn:hover{ border-color:#2a7dd1; }
.controlsRow{ display:flex; gap:8px; align-items:center; }
.controlsRow.right{ margin-left:auto; }

/* ------------------------ Workspace Rail ------------------------ */
/* (If you’re rendering your own <aside> rail, these classes already exist) */
.resourceDrawer{
  position:fixed; left:0; top:0; bottom:0; width:220px;
  background:var(--rail-bg); border-right:1px solid #0a1b32; padding:0;
  display:flex; flex-direction:column; z-index:5; color:#cfe1ff;
}
.resourceDrawer .drawerTitle{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; background:#10355f; border-bottom:1px solid #0a1b32; color:#fff;
}
.collapsed-rail{ display:flex; flex-direction:column; gap:8px; align-items:center; padding:8px 0; }
.rail-chip{
  width:36px; height:36px; border-radius:999px; display:grid; place-items:center; font-weight:800;
  border:1px solid #1a3d6e; background:#174a87; color:#e9f1ff;
}
.rail-chip.active{ outline:2px solid #2a7dd144; box-shadow:0 0 0 2px #2a7dd11a inset; }

/* Buttons / inputs default (elsewhere) */
.text,.select,.date{ background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 10px; }
.btn{ background:transparent; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 12px; cursor:pointer; }
.btn:hover{ border-color:var(--blue); }
.btn.toggleActive{
  background: rgba(2,6,23,.86);
  border-color: rgba(2,6,23,.86);
  color: #fff;
}
.btn.toggleActive:hover{ filter: brightness(1.02); border-color: rgba(2,6,23,.86); }

/* "looks like a link" button (used in sortable table headers) */
.linkLike{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
}
.linkLike:hover{ text-decoration: underline; }
.btn.danger{ color:var(--red-3); border-color:var(--red-3); }
.btn.requests-btn{ background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 0 6px rgba(42,125,209,0.25); }

/* =====================================================================
   UI Kit: ModalShell + DataTable (management UIs)
   ===================================================================== */

:root{
  --ui-radius: 12px;
  --ui-radius-sm: 10px;
  --ui-shadow: 0 18px 45px rgba(0,0,0,.18);
  --ui-overlay: rgba(15,23,42,.42);
  --ui-card: #ffffff;
  --ui-card-2: #f3f4f6;
  --ui-line: #e5e7eb;
  --ui-line-2: #d1d5db;
  --ui-input-bg: #f3f5f8;  /* light gray input background */
  --ui-input-bd: #d1d5db;
}

.uiBtn{
  border:1px solid var(--ui-line-2);
  background:#fff;
  color:var(--text);
  border-radius: var(--ui-radius-sm);
  padding:7px 10px;
  height:32px;
  cursor:pointer;
  font-weight:600;
  line-height:1;
}
.uiBtn:hover{ border-color: var(--blue); }
.uiBtn:focus{ outline:none; box-shadow:0 0 0 3px rgba(42,125,209,.16); border-color: var(--blue); }
.uiBtn.primary{ background:var(--blue); border-color:var(--blue); color:#fff; }
.uiBtn.primary:hover{ background:var(--blue-dk); border-color:var(--blue-dk); }
.uiBtn.danger{ background:#fff; color:var(--red-3); border-color: color-mix(in srgb, var(--red-3) 35%, var(--ui-line-2)); }
.uiBtn:disabled{ opacity:.55; cursor:not-allowed; }

.uiInput{
  background:var(--ui-input-bg);
  border:1px solid var(--ui-input-bd);
  border-radius: var(--ui-radius-sm);
  padding:7px 10px;
  height:32px;
  color:var(--text);
  outline:none;
}
.uiInput::placeholder{ color:#8a96ab; }
.uiInput:focus{ border-color: var(--blue); box-shadow:0 0 0 3px rgba(42,125,209,.14); background:#fff; }

.uiIconBtn{
  border:1px solid transparent;
  background:transparent;
  border-radius: 9px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  cursor:pointer;
  color: #51627b;
}
.uiIconBtn.ghost{ color: #51627b; }
.uiIconBtn.ghost:hover{ background: rgba(15,23,42,.06); }
.uiIconBtn:hover{ background: rgba(15,23,42,.06); }
.uiIconBtn.danger{ color: var(--red-3); }
.uiIconBtn.danger:hover{ background: color-mix(in srgb, var(--red-3) 12%, transparent); }
.uiIconBtn:focus{ outline:none; box-shadow:0 0 0 3px rgba(42,125,209,.14); }

.uiModalOverlay{
  position:fixed;
  inset:0;
  background:var(--ui-overlay);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:28px 14px;
  z-index: 9999;
  overflow:auto;
}
.uiModal{
  width: min(1100px, 100%);
  background: var(--ui-card);
  border:1px solid var(--ui-line);
  border-radius: 16px;
  box-shadow: var(--ui-shadow);
  overflow:hidden;
}
.uiModalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--ui-line);
  background: #fff;
}
.uiModalTitle{ font-size:15px; font-weight:800; letter-spacing:.2px; }
.uiModalActions{ display:flex; gap:8px; align-items:center; }
.uiModalBody{ padding:14px 16px; background: #fff; }
.uiModalFooter{ padding:10px 16px; border-top:1px solid var(--ui-line); background: #fff; color: var(--muted); font-size:12px; }

.uiTableWrap{
  background: #fff;
  border:1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  overflow:hidden;
}
.uiTableToolbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid var(--ui-line);
  background: #fff;
}
.uiTableTitle{ font-weight:800; }
.uiTableToolbarRight{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.uiSearch{ min-width: 260px; }

.uiTableScroll{ overflow:auto; }
.uiTable{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.uiTable th,
.uiTable td{
  padding: 6px 10px;
  border-bottom: 1px solid rgba(15,23,42,.07);
  vertical-align: middle;
  white-space: nowrap;
}
.uiTable thead th{
  position:sticky;
  top:0;
  z-index:2;
  background: #fff;
  font-weight: 800;
  color: #334155;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(15,23,42,.12);
}
/* rows: white baseline, very subtle hover */
.uiTable tbody tr{ background:#fff; }
.uiTable tbody tr:hover{ background: #0b1220; color:#fff; }
.uiTable tbody tr:hover .uiCellText{ color:#fff; }
.uiTable tbody tr:hover .uiIconBtn{ color:#fff; }
.uiTable tbody tr:hover .uiIconBtn:hover{ background: rgba(255,255,255,.10); }
.uiTable tbody tr:hover .uiCheck{ border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.10); }
.uiTable tbody tr:hover .uiCheck.on{ background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.65); }
.uiTable tbody tr:hover .uiCheck.on:after{ border-color: #fff; }
.uiTable td{ background: #fff; }
.uiTable tbody tr:hover td{ background: transparent; }

/* quiet cells: render as text until clicked */
.uiCellText{ display:block; padding: 2px 2px; color: var(--text); }
.uiCellText.muted{ color: var(--muted); }
.uiTable td{ cursor: text; }
.uiTable td.align-center, .uiTable td.align-right{ cursor: default; }
.uiTable td:has(.uiBtn), .uiTable td:has(button.uiCheck){ cursor: default; }

/* tiny check toggle */
.uiCheck{
  width: 16px; height: 16px;
  border: 1px solid rgba(15,23,42,.28);
  border-radius: 4px;
  background: #f1f5f9; /* visible even when "off" */
  display: inline-block;
}
.uiCheck.on{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.45);
  position: relative;
}
.uiCheck.on:after{
  content:"";
  position:absolute;
  left:4px; top:2px;
  width:6px; height:9px;
  border-right:2px solid rgba(37,99,235,.95);
  border-bottom:2px solid rgba(37,99,235,.95);
  transform: rotate(45deg);
}

/* sortable header button */
.uiThBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.uiThBtn:hover{ color: var(--text); }
.uiSortIcon{ display:inline-flex; opacity:.8; }
.uiTable td .uiInput,
.uiTable td select.uiInput{
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 5px 8px;
  font-size: 13px;
}
.uiTable td textarea.uiInput{
  height:auto;
  min-height: 28px;
}
.uiActionCol{ width: 44px; text-align:right; }
.align-right{ text-align:right; }
.align-center{ text-align:center; }

.uiEmpty{
  padding: 26px 18px;
  text-align:center;
  background: #fff;
}
.uiEmptyTitle{ font-weight:900; margin-bottom:6px; }
.uiEmptyDesc{ color: var(--muted); margin-bottom: 12px; }

/* ------------------------ Board Shell ------------------------ */
.tableWrap{
  grid-row:2; min-height:0; background:var(--panel);
  border:1px solid var(--border); border-radius:14px; overflow:auto; max-width:100%;
  padding:var(--board-pad); scrollbar-gutter:stable both-edges;
}

.table{
  width:max-content; min-width:100%;
  border-collapse:separate; border-spacing:0; table-layout:fixed;
}
th,td{ border-left:1px solid var(--border); min-width:0; vertical-align:top; }
th:first-child,td:first-child{ border-left:none; }

/* Sticky header */
thead th{
  position:sticky; top:0; z-index:3; background:var(--panel-2); padding:10px;
}

/* unified widths */
.table th:not(:first-child),
.table td:not(:first-child){
  width:var(--day-col-w); min-width:var(--day-col-w); max-width:var(--day-col-w);
}

/* Left sticky column */
.stickyCol{
  position:sticky; left:0; z-index:2; background:var(--panel-2);
  width:var(--sticky-col-w); min-width:var(--sticky-col-w); max-width:var(--sticky-col-w);
  overflow:hidden; contain:layout paint; isolation:isolate; border-right:1px solid var(--border);
}
.acCell{ padding:10px; overflow:hidden; }

/* ------------------------ Date bar & Day striping ------------------------ */
/* Date bar “buttons” (fixed) */
.dateBar{ padding-left:var(--board-pad); padding-right:var(--board-pad); }
.dateBar .slot{ border-left:1px solid var(--border); background:transparent; }
.dateBar .slot:first-of-type{ border-left:none; }
.dateBar .label{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:#ffffff; color:var(--text); border:1px solid var(--border);
  font-weight:600; box-shadow:0 1px 0 rgba(0,0,0,0.03);
}
.dateBar .label[aria-current="true"],
.dateBar .label.active{
  background:#e9f2ff; border-color:#b9cef0; color:#0c2b51;
}
.dateBar .label:hover{ border-color:var(--blue); }

/* Stripe the day columns (tbody only) */
.table tbody tr > td:nth-child(odd):not(:first-child){ background:var(--day-odd); }
.table tbody tr > td:nth-child(even):not(:first-child){ background:var(--day-even); }

/* Sharper vertical separators on the grid rows */
.table tbody tr > td{ border-top:1px solid var(--border); }
.table tbody tr:first-child > td{ border-top:none; }

/* ------------------------ Asset column content ------------------------ */
.assetCard{
  background:#ffffff; border:1px solid var(--border); border-radius:12px; padding:10px; display:grid; gap:10px;
}
.assetHead{ display:flex; gap:8px; align-items:center; }
.assetControls{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ------------------------ Requests strip in sticky col ------------------------ */
.reqList{ display:grid; gap:8px; }
.reqStrip{
  display:grid; grid-template-columns:1fr auto; gap:10px;
  background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:10px;
}
.reqStrip .meta{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; min-width:0; }
.reqStrip .actions{ display:flex; gap:8px; align-items:flex-start; justify-content:flex-end; }
.reqTasks{ grid-column:1/-1; margin-top:8px; border-top:1px dashed var(--border); padding-top:8px; display:grid; gap:6px; }
.reqTask{ display:flex; align-items:center; justify-content:space-between; border:1px dashed var(--border); border-radius:8px; padding:6px 8px; background:#ffffff; }

/* ------------------------ Day cells ------------------------ */
.cellHeader{ height:24px; padding:6px 8px; }
.cellBody{ display:flex; flex-direction:column; gap:8px; padding:6px 8px 12px; }

/* ------------------------ Ticket cards in day cells ------------------------ */
/* Saturated blue card (to match the "Requests" button) */
.table .cellBody .ticketCard,
.table .cellBody .tk-surface{
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--card-accent) 94%, #fff 6%),
              var(--card-accent)) !important;
  border:1px solid var(--card-accent-dk) !important;
  color:#fff !important;
  border-radius:12px;
  padding:10px;
  box-shadow:
    0 8px 22px rgba(31,109,185,0.18),
    0 1px 0 rgba(11,24,48,0.12) inset,
    0 0 0 1px rgba(11,24,48,0.08) inset;
}

/* Title */
.table .cellBody .ticketCard .ticketTitle,
.table .cellBody .tk-surface .tk-compact__title{
  color:#fff !important;
  text-shadow:0 1px 0 rgba(0,0,0,0.12);
}

/* Compact chips/pills on blue */
.table .cellBody .ticketCard .pill,
.table .cellBody .ticketCard .chip,
.table .cellBody .tk-surface .pill{
  background:rgba(255,255,255,0.14) !important;
  border:1px solid rgba(255,255,255,0.28) !important;
  color:#fff !important;
  border-radius:999px; padding:4px 8px;
}

/* State tints stay legible over blue */
.table .cellBody .ticketCard .pill.ok   { background:rgba(33,197,117,0.22) !important; border-color:rgba(33,197,117,0.5) !important; }
.table .cellBody .ticketCard .pill.warn { background:rgba(255,193,7,0.22)  !important; border-color:rgba(255,193,7,0.5)  !important; }
.table .cellBody .ticketCard .pill.mute,
.table .cellBody .ticketCard .pill.muted{ background:rgba(255,255,255,0.10) !important; border-color:rgba(255,255,255,0.22) !important; }

/* Select inside card header (status) */
.table .cellBody .ticketCard .select.sm{
  background:rgba(255,255,255,0.10) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.28) !important;
}

/* Badges (Delayed etc.) */
.table .cellBody .tk-surface .badge,
.table .cellBody .ticketCard .badge{
  background:rgba(255,255,255,0.18) !important;
  border:1px solid rgba(255,255,255,0.35) !important;
  color:#fff !important;
}

/* Links inside cards */
.table .cellBody .ticketCard a,
.table .cellBody .tk-surface a{
  color:#fff !important; text-decoration-color:rgba(255,255,255,0.6);
}

/* ------------------------ Backlog strip (unchanged, light) ------------------------ */
.backlog{
  grid-row:3; margin:0; background:var(--panel);
  border:1px solid var(--border); border-radius:14px; padding:10px;
  box-shadow:0 -6px 18px rgba(0,0,0,0.08);
}
.backlogHead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.titleRow{ display:flex; gap:8px; align-items:center; }
.backlogBody{ display:flex; gap:10px; flex-wrap:wrap; max-height:28vh; overflow:auto; padding-right:4px; }

/* ------------------------ Modals & AAR (light) ------------------------ */
.modalOverlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modalCard{ width:min(1100px,92vw); height:min(86vh,900px); background:var(--panel); border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.modalHead{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); background:var(--panel-2); }
.modalBody{ flex:1; overflow:auto; }

.aar-card{ background:var(--panel-2); border:1px solid var(--border); border-radius:14px; padding:16px; display:grid; gap:14px; }
.aar-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.aar-title{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.aar-hero{
  width:140px; height:140px; border-radius:999px; display:grid; place-items:center;
  background:radial-gradient(80px 80px at 30% 30%, #e7eef9 0%, #f7f9fc 70%);
  border:1px solid var(--border); color:var(--muted); text-align:center; padding:12px;
}
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:112px; line-height:1.25; font-size:13px; }
.aar-meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.aar-pill--ok{ border-color:#9ad5bf; background:#e7fbf3; }
.aar-pill--warn{ border-color:#f2d29a; background:#fff6e5; }
.aar-section{ border-top:1px dashed var(--border); padding-top:8px; display:grid; gap:6px; }
.aar-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:#ffffff; border:1px dashed var(--border); border-radius:10px; padding:8px 10px; }
.aar-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }



/* =====================================================================
   TICKET CARD — Enterprise polish (micro + full)
   ===================================================================== */

/* Base shell (keeps blue background from earlier board styles) */
.ticketCard{
  position: relative;
  border-radius: 12px;
  padding: 10px 10px 12px 10px;
  transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease;
  cursor: pointer;
}

/* Subtle lift on hover; clearer focus ring */
.ticketCard.card-hover,
.ticketCard:hover{ transform: translateY(-1px); }
.ticketCard:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(42,125,209,.45);
}

/* Header */
.ticketHead{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ticketHead.compact{ gap:6px; }

/* Title (ellipsis) */
.ticketTitle{
  font-weight: 700; font-size: 13px; line-height: 1.25;
  color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px;
}
.ticketTitle.compact{ max-width: 400px; }

/* Header actions cluster */
.ticketActions{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

/* Pills / chips on blue card */
.pill, .chip{
  display:inline-flex; align-items:center; gap:6px;
  border-radius: 999px; padding: 4px 8px; font-size: 12px; line-height: 1;
  border:1px solid rgba(255,255,255,.28); color:#fff; background:rgba(255,255,255,.14);
}
.pill.sm, .chip.sm{ padding: 3px 8px; font-size: 11px; }
.pill.ok   { background: rgba(33,197,117,.22); border-color: rgba(33,197,117,.5); }
.pill.warn { background: rgba(255,193,7,.22);  border-color: rgba(255,193,7,.5); }
.pill.mute, .pill.muted { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }

/* Status dot */
.statusDot{
  width:10px;height:10px;border-radius:999px;display:inline-block;border:1px solid rgba(255,255,255,.65);
  box-shadow:0 0 0 2px rgba(11,24,48,.16);
}
.statusDot.open{ background:#1e88e5; }
.statusDot.ip{ background:#ffc107; }
.statusDot.closed{ background:#43a047; }

/* Date row */
.ticketDates{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:6px; }

/* Meta row */
.ticketMeta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px; }

/* Avatars */
.avatarStack{ display:flex; gap:4px; align-items:center; }
.avatar{
  width:22px; height:22px; border-radius:999px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28); color:#fff; font-size:11px; display:grid; place-items:center;
}
.avatar.more{ font-weight:700; }

/* Micro sizing tightens content */
.ticketCard.card.compact .ticketHead{ margin-bottom:4px; }
.ticketCard.card.compact .ticketDates{ margin-top:4px; }

/* Edit icon button — always visible on blue, small target */
.btn.icon.sm{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; min-width:28px; border-radius:8px; font-size:13px;
  background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28);
}
.btn.icon.sm:hover{ background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.38); }
.btn.icon.sm:active{ transform: translateY(1px); }

/* The small status <select> on blue */
.select.sm{
  background: rgba(255,255,255,.10);
  color:#fff; border:1px solid rgba(255,255,255,.28);
  border-radius: 8px; padding:4px 6px; font-size:12px; height:28px;
}

/* Prevent inner inputs/buttons from shrinking illegibly */
.ticketActions .select.sm, .ticketActions .btn.icon.sm, .ticketActions .pill.sm{ flex: 0 0 auto; }

/* Dragging hint */
.ticketCard[draggable="true"]{ user-select:none; }

/* =====================================================================
   TICKET EDIT MODAL — Business-light blue
   (applies to classes prefixed tm- in TicketEditModal)
   ===================================================================== */

.tm-modalOverlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display:flex; align-items:flex-start; justify-content:center;
  padding: 40px 16px; z-index: 500;
}

/* Card */
.tm-card{
  width: min(960px, 100%);
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(13, 30, 60, .22);
  overflow: hidden;
  color: var(--text);
}

/* Header */
.tm-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #f7faff, #eff4ff);
}
.tm-title{ font-weight:700; color:var(--ink, #0b1830); }

/* Body */
.tm-body{ padding: 14px; display: grid; gap: 12px; }
.tm-block{
  border: 1px solid var(--border); background: var(--panel-2);
  border-radius: 14px; padding: 12px;
}

/* Inputs/buttons to match app */
.tm-card .text, .tm-card .select, .tm-card .date{
  width:100%; min-height:32px; padding:6px 8px;
  background:#fff; border:1px solid var(--border);
  color:var(--text); border-radius:10px;
}
.tm-card .text:focus, .tm-card .select:focus, .tm-card .date:focus{
  outline:0; box-shadow:0 0 0 3px rgba(42,125,209,.25);
}

.tm-card .btn{
  padding:8px 12px; border-radius:10px; cursor:pointer;
  background:#fff; border:1px solid var(--border); color:var(--text);
}
.tm-card .btn:hover{ border-color: var(--blue); }
.tm-card .btn.primary{ background: var(--blue); border-color: var(--blue); color:#fff; }
.tm-card .btn.primary:hover{ background:#1f6db9; border-color:#1f6db9; }

/* Layout grids */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grid-assign{ display:grid; grid-template-columns: 2fr 1fr; gap: 8px; }
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
  .grid-4{ grid-template-columns: 1fr 1fr; }
  .grid-assign{ grid-template-columns: 1fr; }
}

label.tm-field{ display:grid; gap:6px; }
.tm-label{ color:var(--muted); font-size:12px; }

.tm-footer{
  display:flex; justify-content:flex-end; gap:8px; padding: 12px 16px;
  border-top:1px solid var(--border); background: #f5f8ff;
}

/* =========================================================
   HEURISTIC POLISH — calmer cards, fewer borders, clearer hierarchy
   ========================================================= */

:root{
  /* tune blues gently */
  --card-accent: #2a6fd8;          /* base blue */
  --card-accent-dk: #215db8;       /* border blue */
  --card-sheen: rgba(255,255,255,.14);
  --card-sheen-strong: rgba(255,255,255,.22);
}

/* Card surface: gradient + inner shadow for depth, softer border */
.ticketCard{
  background: linear-gradient(180deg, var(--card-accent) 0%, #245fcb 100%);
  border: 1px solid var(--card-accent-dk);
  border-radius: 12px;
  box-shadow:
    0 6px 16px rgba(22, 56, 124, .22),
    inset 0 1px 0 var(--card-sheen);
  padding: 10px 12px 12px 12px;
}

/* Subtle hover, less bounce */
.ticketCard:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(22,56,124,.26), inset 0 1px 0 var(--card-sheen-strong); }

/* Title stronger, content quieter */
.ticketTitle{ font-weight: 800; letter-spacing:.1px; }

/* Pills: remove border, lighten background, one shape system */
.pill, .chip{
  background: rgba(255,255,255,.16);
  border: none;
  color:#fff;
  padding: 4px 10px;
  border-radius: 999px;
}
.pill.sm, .chip.sm{ padding: 3px 9px; }

/* Only the semantic ones get color; still keep borderless look */
.pill.ok   { background: rgba(33,197,117,.28); }
.pill.warn { background: rgba(255,193,7,.28); }
.pill.mute, .pill.muted { background: rgba(255,255,255,.10); }

/* Status dot smaller and quieter */
.statusDot{ width:8px; height:8px; border:none; box-shadow:none; opacity:.9; }

/* Dates row: tighter & fewer items; let it breathe from header */
.ticketDates{ margin-top: 6px; gap: 6px; }

/* Meta row: smaller gap, avoid over-wrapping */
.ticketMeta{ gap: 6px; }

/* Avatar chips: reduce stroke noise */
.avatar{
  background: rgba(255,255,255,.12);
  border: none;
}

/* Tighten tiny select on blue */
.select.sm{
  background: rgba(255,255,255,.12);
  border: none;
  color:#fff;
  height: 28px;
  border-radius: 8px;
}

/* Vertical rhythm between cards */
.cellBody > .ticketCard + .ticketCard{ margin-top: 8px; }

/* Day header pills: keep them light so cards own the contrast */
.boardDayHeader .pill,
.boardDayHeader .chip{
  background:#fff;
  color:#0f172a;
}

/* Optional: slightly desaturate alternating day backgrounds for calmer grid */
.boardCol.even { background: #f4f7ff; }
.boardCol.odd  { background: #f9fbff; }


/* ===== Ticket Card (header bar + left-aligned details) ===== */
:root{
  --tk-blue: var(--card-accent, #2a6fd8);
  --tk-blue-dk: var(--card-accent-dk, #215db8);
  --tk-panel: var(--panel, #fff);
  --tk-border: var(--border, #e3eaf5);
  --tk-text: var(--text, #0b1a33);
  --tk-muted: var(--muted, #63708a);
  --tk-radius: 12px;
}

.ticketCard.tk{
  border-radius: var(--tk-radius);
  background: var(--tk-panel);
  border: 1px solid var(--tk-border);
  box-shadow: 0 6px 16px rgba(22,56,124,.12);
  overflow: hidden;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .12s ease;
}
.ticketCard.tk.is-hover,
.ticketCard.tk:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(22,56,124,.18); }

/* Header bar */
.tk__bar{
  background: var(--tk-blue);
  color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px 10px;
}
.tk__title{
  font-weight: 800; font-size: 13px; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding-right: 8px;
}
.tk__edit{
  width:28px;height:28px;border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  /* give the button a visible chip so the icon has contrast */
  background: rgba(255,255,255,.18);
  position: relative;
  display:inline-flex; align-items:center; justify-content:center;
}
.tk__edit:hover{ background: rgba(255,255,255,.28); }

.tk__edit::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  /* use a solid color for the icon so it’s visible at all times */
  background: #0b1830; /* dark ink */
  /* standard + webkit masks so it works in Firefox + Chrome */
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="white"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm18.71-11.04a1.003 1.003 0 0 0 0-1.42l-2.5-2.5a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.99-1.66z"/></svg>') center/16px 16px no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="white"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm18.71-11.04a1.003 1.003 0 0 0 0-1.42l-2.5-2.5a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.99-1.66z"/></svg>') center/16px 16px no-repeat;
}

.tk__edit:hover{ background: rgba(255,255,255,.12); }

/* Body */
.tk__body{ padding: 10px; }
.tk__list{ display:grid; gap: 6px; }

/* Key/Value rows */
.tk__row{ display:grid; grid-template-columns: 120px 1fr; gap: 8px; align-items:center; }
.tk__k{ color: var(--tk-muted); font-size:12px; }
.tk__v{ color: var(--tk-text); font-size:13px; line-height:1.25; }
.tk__v--warn{ color: #b45309; font-weight:600; }

/* Avatars */
.tk__avatars{ display:flex; gap:4px; }
.tk__avatar{
  width:22px;height:22px;border-radius:999px;
  background: #eaf2ff; border:1px solid #cfe0ff; color:#275;
  display:grid; place-items:center; font-size:11px; color:#0c2b51; font-weight:700;
}
.tk__avatar--more{ background:#f1f5fb; border-color:#dfe7f5; }

/* Pills, select, badges */
.tk__pill{
  display:inline-flex; align-items:center; border-radius:999px;
  border:1px solid var(--tk-border); background:#fff; padding:3px 8px; font-size:12px;
  color: var(--tk-text);
}
.tk__pill:hover{ border-color: var(--tk-blue); }

.tk__select{
  appearance:none; border:1px solid var(--tk-border); background:#fff;
  height:28px; border-radius:8px; padding:0 8px; font-size:12px; margin-right:8px;
}
.tk__badge{
  display:inline-flex; align-items:center; border-radius:999px; padding:3px 8px; font-size:12px;
  border:1px solid #f2d29a; background:#fff6e5; color:#8a5300;
}
.tk__badge--warn{}

/* Edit form */
.tk__editForm{ padding:10px; display:grid; gap:10px; }
.tk__rowEdit{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.tk__rowEdit--actions{ grid-template-columns: auto auto; justify-content:end; }
.tk__lbl{ display:grid; gap:4px; font-size:12px; color:var(--tk-muted); }
.tk__input{
  min-height:32px; padding:6px 8px; font-size:13px; border-radius:8px;
  border:1px solid var(--tk-border); background:#fff; color:var(--tk-text);
}
.tk__btn{
  padding:8px 12px; border-radius:8px; border:1px solid var(--tk-border); background:#fff;
  cursor:pointer;
}
.tk__btn:hover{ border-color: var(--tk-blue); }

/* Compact/micro */
.tk--micro .tk__row{ grid-template-columns: 100px 1fr; }



/* ===== AAR modal hardening (wins over global .pill rules) ===== */
.modalCard .pill{
  background:#fff !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
}
.modalCard .pill.mute,
.modalCard .pill.muted{ color:var(--muted) !important; }

/* Success / warning variants inside AAR */
.modalCard .aar-pill--ok{
  background:#e7fbf3 !important;
  border-color:#9ad5bf !important;
  color:#066e2e !important;
}
.modalCard .aar-pill--warn{
  background:#fff6e5 !important;
  border-color:#f2d29a !important;
  color:#7a4b00 !important;
}

/* Keep the 'Show details' button readable on light */
.modalCard .btn{ background:#fff; color:var(--text); border:1px solid var(--border); }
.modalCard .btn:hover{ border-color: var(--blue); }



/* ===== AAR modal isolation ===== */
.aar-modal .pill,
.aar-modal .chip{
  /* neutral, light chips inside the modal */
  background:#fff !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;

  /* stop flex-stretch making “marshmallows” */
  align-self: center !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 4px 8px;           /* keep your compact size */
}

/* success / warning variants in AAR */
.aar-modal .aar-pill--ok{
  background:#e7fbf3 !important;
  border-color:#9ad5bf !important;
  color:#066e2e !important;
}
.aar-modal .aar-pill--warn{
  background:#fff6e5 !important;
  border-color:#f2d29a !important;
  color:#7a4b00 !important;
}

/* summary row never stretches children */
.aar-modal .aar-summary{
  align-items: center;        /* belt-and-suspenders */
}

/* keep buttons readable on light inside the modal */
.aar-modal .btn{ background:#fff; color:var(--text); border:1px solid var(--border); }
.aar-modal .btn:hover{ border-color: var(--blue); }


/* --- Unified mini table rows (links, compact lists) --- */
.linkRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid #e6e8ee;
  border-radius:10px;
  background:#fff;
}
.linkRow:hover{ background:#f7f8fb; }
.linkCell{ font-size:13px; line-height:1.2; }
.linkType{
  width:92px;
  font-weight:700;
  color:#334155;
  flex:0 0 auto;
}
.linkName{
  flex:1 1 auto;
  color:#0f172a;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.muted{ color:#64748b; font-weight:500; }

.iconBtn{
  flex:0 0 auto;
  border:1px solid #e2e8f0;
  background:#fff;
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.iconBtn:hover{ background:#f1f5f9; }
.iconBtn:active{ transform:translateY(1px); }


/* --- Simple table look (CRUD tables) --- */
.simpleTableWrap{
  border:1px solid #e6e8ee;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.simpleTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}
.simpleTable thead th{
  position:sticky;
  top:0;
  background:#f8fafc;
  color:#334155;
  font-weight:800;
  text-align:left;
  padding:10px 10px;
  border-bottom:1px solid #e6e8ee;
}
.simpleTable tbody td{
  padding:10px 10px;
  border-bottom:1px solid #eef2f7;
  vertical-align:middle;
}
.simpleTable tbody tr:hover{
  background:#f7f8fb;
}
.simpleTable tbody tr:last-child td{
  border-bottom:none;
}
.ellipsis{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:420px;
}
.btnSmall{
  border:1px solid #e2e8f0;
  background:#fff;
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.btnSmall:hover{ background:#f1f5f9; }
.btnSmall.danger{
  border-color:#fecaca;
  color:#b91c1c;
}
.btnSmall.danger:hover{ background:#fff1f2; }

/* --- Attachments panel --- */
.attachToolbar{
  display:flex;
  align-items:center;
  gap:10px;
}
.attachFile{
  flex:1 1 auto;
  border:1px solid #e6e8ee;
  border-radius:12px;
  padding:6px 10px;
  background:#f8fafc;
  font-size:12px;
  height:34px;
}
.attachFile::file-selector-button{
  border:1px solid #e2e8f0;
  background:#fff;
  border-radius:10px;
  padding:5px 10px;
  margin-right:10px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.attachFile::file-selector-button:hover{ background:#f1f5f9; }