/* ===== NSC Employee Portal ===== */
:root {
  --navy: #0c223d;
  --navy-light: #14304f;
  --navy-soft: #1d3a5c;
  --orange: #f04e23;
  --orange-dark: #d8431b;
  --ink: #1b2733;
  --muted: #5b6878;
  --bg: #ffffff;
  --bg-alt: #f5f7fa;
  --border: #e3e8ee;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(12, 34, 61, 0.08);
  --green: #1e7e34;
  --green-bg: #d9f2e0;
  --amber: #9a7300;
  --amber-bg: #fdf3d0;
  --grey-bg: #eef1f5;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg-alt);
  line-height: 1.55;
}
img { max-width: 100%; }
h1, h2, h3 { color: var(--navy); margin: 0 0 0.4rem; line-height: 1.25; }
label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy); margin: 12px 0 4px; }
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(240, 78, 35, 0.35);
  border-color: var(--orange);
}
button { font: inherit; cursor: pointer; }

.btn-primary {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--orange-dark); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
}
.btn-ghost:hover { background: var(--grey-bg); }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; }
.btn-link {
  background: none; border: none; color: var(--orange); font-weight: 600;
  padding: 4px 6px; font-size: 0.85rem; white-space: nowrap;
}
.btn-link:hover { text-decoration: underline; }
.btn-link.danger { color: #b02a37; }

.form-error {
  background: #fdecea; color: #b02a37;
  border-radius: 8px; padding: 8px 12px; font-size: 0.9rem; margin-top: 12px;
}
.form-ok {
  background: var(--green-bg); color: var(--green);
  border-radius: 8px; padding: 8px 12px; font-size: 0.9rem; margin-top: 12px;
}

/* ---- Login page ---- */
.login-body {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 60%, var(--navy-soft) 100%);
  display: flex; align-items: center; justify-content: center;
}
.login-wrap { width: 100%; max-width: 420px; padding: 24px; }
.login-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  padding: 36px 32px;
  text-align: center;
}
.login-logo { max-width: 240px; margin: 0 auto 18px; }
.login-card h1 { font-size: 1.5rem; }
.login-sub { color: var(--muted); margin: 0 0 10px; }
.login-card form { text-align: left; }
.login-card .btn-primary { width: 100%; margin-top: 18px; padding: 12px; }
.login-help { font-size: 0.82rem; color: var(--muted); margin: 16px 0 0; }
.login-footer { text-align: center; color: rgba(255, 255, 255, 0.65); font-size: 0.82rem; margin-top: 18px; }

/* ---- Portal header ---- */
.portal-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.portal-header-inner {
  max-width: 1180px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.portal-logo { height: 40px; width: auto; }
.portal-tabs { display: flex; gap: 4px; flex: 1; }
.tab-btn {
  background: none; border: none; padding: 10px 14px;
  border-radius: 8px; font-weight: 600; color: var(--muted);
}
.tab-btn:hover { background: var(--grey-bg); color: var(--navy); }
.tab-btn.active { background: var(--navy); color: #fff; }
.portal-user { display: flex; align-items: center; gap: 10px; }
.user-chip { font-size: 0.9rem; font-weight: 600; color: var(--navy); }
.role-badge {
  display: inline-block; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.04em; background: var(--grey-bg); color: var(--muted);
  border-radius: 999px; padding: 2px 8px; margin-left: 4px;
}
.role-badge.superadmin { background: var(--navy); color: #fff; }
.role-badge.admin { background: var(--orange); color: #fff; }

/* password expiry countdown */
.pw-pill {
  font-size: 0.78rem; font-weight: 700; white-space: nowrap;
  background: var(--grey-bg); color: var(--muted);
  border-radius: 999px; padding: 4px 12px;
}
.pw-pill.warn { background: var(--amber-bg); color: var(--amber); }
.pw-pill.danger { background: #fdecea; color: #b02a37; }
.pw-note { font-size: 0.85rem; color: var(--muted); }
.pw-note.warn { color: var(--amber); font-weight: 600; }
.pw-note.danger { color: #b02a37; font-weight: 600; }
.force-pw { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 60%, var(--navy-soft) 100%); }

/* ---- Main / panels ---- */
.portal-main { max-width: 1180px; margin: 0 auto; padding: 28px 24px 60px; }
.panel-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.panel-sub { color: var(--muted); margin: 0; font-size: 0.92rem; }

.filters {
  display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center;
}
.filters input[type="search"] { max-width: 280px; }
.filters select { max-width: 190px; }
.filters input[type=date] { max-width: 165px; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; color: var(--navy); margin: 0; }
.chk input { width: auto; }

/* ---- Table ---- */
.table-wrap {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto;
}
.task-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.task-table th {
  text-align: left; background: var(--navy); color: #fff;
  padding: 10px 14px; font-size: 0.85rem; white-space: nowrap;
}
.task-table td {
  padding: 10px 14px; border-top: 1px solid var(--border);
  font-size: 0.92rem; vertical-align: top;
}
.task-table tbody tr:hover { background: var(--bg-alt); }
.col-num { width: 40px; }
.col-actions { width: 110px; }
.task-title { font-weight: 600; color: var(--ink); }
.task-notes { color: var(--muted); font-size: 0.88rem; }
.mine-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); margin-right: 6px; vertical-align: middle;
}

.status-badge {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 700; white-space: nowrap;
}
.status-completed { background: var(--green-bg); color: var(--green); }
.status-in_progress { background: var(--amber-bg); color: var(--amber); }
.status-pending { background: var(--grey-bg); color: var(--muted); }

.empty-msg { text-align: center; color: var(--muted); padding: 28px; margin: 0; }

/* ---- My Dashboard ---- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.stat-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-tile:hover { transform: translateY(-2px); border-color: var(--navy); }
.stat-num { font-size: 2rem; font-weight: 700; color: var(--navy); line-height: 1.1; }
.stat-label { font-size: 0.85rem; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.dot-pending { background: #9aa5b1; }
.dot-progress { background: #e0b400; }
.dot-completed { background: #2da44e; }

.dash-progress { margin-bottom: 22px; }
.bar-track {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--grey-bg);
}
.bar-seg { display: block; height: 100%; }
.seg-completed { background: #2da44e; }
.seg-progress { background: #e0b400; }
.seg-pending { background: #9aa5b1; }
.bar-caption { color: var(--muted); font-size: 0.85rem; margin: 6px 0 0; }

.dash-section { margin-bottom: 26px; }
.dash-section h3 { margin: 0 0 10px; font-size: 1.05rem; }

@media (max-width: 720px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Account ---- */
.account-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px 28px; max-width: 480px;
}
.account-card .btn-primary { margin-top: 18px; }

/* ---- Modals ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(12, 34, 61, 0.55);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: #fff; border-radius: 14px; padding: 26px 28px;
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-task-name { color: var(--muted); font-size: 0.92rem; margin: 0 0 6px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.assignee-box {
  display: flex; flex-wrap: wrap; gap: 8px;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--bg-alt);
}
.assignee-box label {
  display: flex; align-items: center; gap: 5px; margin: 0;
  font-weight: 500; font-size: 0.88rem; background: #fff;
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; cursor: pointer;
}
.assignee-box label:has(input:checked) { background: var(--navy); color: #fff; border-color: var(--navy); }
.assignee-box input { width: auto; }

@media (max-width: 720px) {
  .portal-header-inner { gap: 10px; }
  .portal-tabs { order: 3; width: 100%; }
  .two-col { grid-template-columns: 1fr; }
}

/* ---- Idle / assignment status (team overview) ---- */
.status-idle { background: #fdecea; color: #b02a37; }
.status-active { background: var(--green-bg); color: var(--green); }

/* ---- Idle Calendar ---------------------------------------------------- */
.cal-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal-controls select { width: auto; min-width: 170px; padding: 6px 10px; font-size: 0.9rem; }

.cal-legend {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 0.85rem; color: var(--muted);
}
.cal-key { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.cal-swatch {
  width: 16px; height: 12px; border-radius: 3px; display: inline-block;
  border: 1px solid var(--border);
}
.swatch-idle { background: #b02a37; border-color: #b02a37; }
.swatch-work { background: #fff; }
.swatch-future {
  background: repeating-linear-gradient(135deg, #eef1f5 0 4px, #e0e5ec 4px 8px);
}
.cal-hours { margin-left: auto; font-weight: 600; }

.cal-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px 10px; overflow-x: auto;
}
.cal-grid { display: flex; gap: 2px; min-width: 680px; }
.cal-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cal-col.is-today .cal-col-head { color: var(--orange); }

.cal-col-head {
  display: flex; flex-direction: column; line-height: 1.2;
  font-size: 0.82rem; color: var(--navy); text-align: center;
  padding-bottom: 8px; min-height: 38px;
}
.cal-col-head span { color: var(--muted); font-weight: 600; font-size: 0.75rem; }
.cal-col-foot {
  text-align: center; font-size: 0.78rem; color: var(--muted);
  padding: 7px 2px 0; min-height: 26px; font-weight: 600;
}

/* the 08:30-17:30 track: recessive hour lines, nothing louder than the data */
.cal-track {
  position: relative; height: 340px;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent calc(11.111% - 1px), var(--border) calc(11.111% - 1px), var(--border) 11.111%);
  overflow: hidden;
}

/* hour rail on the left */
.cal-rail { flex: 0 0 52px; }
.cal-rail .cal-track { border: none; background: none; overflow: visible; }
.cal-hour {
  position: absolute; right: 6px; transform: translateY(-50%);
  font-size: 0.72rem; color: var(--muted); white-space: nowrap;
}

/* idle = the only coloured mark, with a text label whenever it fits */
.cal-block {
  position: absolute; left: 3px; right: 3px;
  background: #b02a37; border-radius: 4px;
  box-shadow: 0 0 0 2px #fff;           /* 2px surface gap between blocks */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: default;
}
.cal-block-label {
  color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 0 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
/* time that hasn't happened yet: texture, so it reads without relying on colour */
.cal-future {
  position: absolute; left: 0; right: 0;
  background: repeating-linear-gradient(135deg, #f2f5f8 0 5px, #e6ebf1 5px 10px);
}
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--orange); }

@media (max-width: 720px) {
  .cal-hours { margin-left: 0; width: 100%; }
  .cal-track { height: 260px; }
}

/* ---- Escalated status + severity ------------------------------------- */
.status-escalated { background: #b02a37; color: #fff; }
.status-pending_customer { background: #e4edf9; color: #23405f; }
tr.row-escalated td {
  background: #fbd5d9;
  color: #7a1620;
  border-top-color: #eda9b1;
  font-weight: 600;
}
tr.row-escalated td:first-child {
  box-shadow: inset 4px 0 0 #b02a37;   /* red spine down the whole row */
  font-weight: 700;
}
tr.row-escalated .task-link { color: #8c1f2a; }
tr.row-escalated .task-link:hover { color: #6f1720; }
tr.row-escalated .task-notes { color: #8c2b34; }
tr.row-escalated:hover td { background: #f8c4ca; }

/* Severity is ordinal, so it uses one hue getting darker - never the
   red/amber/green of status, which would be a different meaning. */
.sev-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.sev-low      { background: #f2f5f8; color: #5b6878; border-color: #e3e8ee; }
.sev-medium   { background: #dde5ef; color: #23405f; }
.sev-high     { background: #1d3a5c; color: #fff; }
.sev-critical { background: #0c223d; color: #fff; box-shadow: inset 0 0 0 2px #f04e23; }

/* ---- Task age dot ----------------------------------------------------- */
.age-cell { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.age-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.age-new { background: #1f6fd0; }   /* up to 7 days  */
.age-mid { background: #e0a300; }   /* 8 to 14 days  */
.age-old { background: #b02a37; }   /* over 14 days  */
.col-age { white-space: nowrap; }

/* ---- Sortable headers -------------------------------------------------- */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: var(--navy-light); }
th.sortable::after { content: '⇅'; opacity: 0.45; margin-left: 6px; font-size: 0.85em; }
th.sortable.sorted[data-dir="asc"]::after { content: '↑'; opacity: 1; }
th.sortable.sorted[data-dir="desc"]::after { content: '↓'; opacity: 1; }

/* ---- Clickable task name ---------------------------------------------- */
.task-link {
  color: #1f6fd0; text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; font-weight: 600;
  background: none; border: none; padding: 0; margin: 0; outline: none;
}
.task-link:hover { color: var(--orange); }
.task-link:visited { color: #1f6fd0; }
.task-link:focus { outline: none; }
.task-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---- Task detail panel ------------------------------------------------- */
.modal-wide { max-width: 760px; }
.detail-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.detail-head-actions { display: flex; gap: 8px; flex: none; }
.escalated-note { color: #b02a37; font-weight: 700; font-size: 0.85rem; }

.detail-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 18px;
  margin: 16px 0 4px; padding: 14px 16px;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px;
}
.detail-grid dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; }
.detail-grid dd { margin: 2px 0 0; font-size: 0.92rem; color: var(--ink); }

.detail-block { margin-top: 20px; }
.detail-block h4 { margin: 0 0 8px; color: var(--navy); font-size: 1rem; }
.detail-count { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
.detail-notes { margin: 0; white-space: pre-wrap; }

.comment-list { display: flex; flex-direction: column; gap: 10px; }
.comment {
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 8px; padding: 10px 12px; background: #fff;
}
.comment-mine { border-left-color: var(--orange); background: #fffaf8; }
.comment-head { display: flex; justify-content: space-between; gap: 10px; font-size: 0.8rem; color: var(--muted); }
.comment-head strong { color: var(--navy); }
.comment-body { margin-top: 4px; white-space: pre-wrap; font-size: 0.92rem; }

.history-list { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.history-list li {
  padding: 7px 0 7px 14px; border-left: 2px solid var(--border);
  display: flex; gap: 12px; flex-wrap: wrap;
}
.hist-when { color: var(--muted); flex: 0 0 150px; }
.hist-what { flex: 1; min-width: 220px; }
.field-hint { font-size: 0.8rem; color: var(--amber); margin: 6px 0 0; }

@media (max-width: 720px) {
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .hist-when { flex-basis: 100%; }
}

/* ---- Task detail panel: header, cards, people, history ---------------- */
.detail-banner {
  background: #b02a37; color: #fff; border-radius: 10px;
  padding: 10px 14px; margin: 0 0 14px; font-size: 0.92rem;
}
.detail-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.detail-head-main { min-width: 0; }
.detail-ref {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.detail-head h3 { margin: 0 0 8px; font-size: 1.3rem; line-height: 1.3; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.age-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--grey-bg); color: var(--muted);
  border-radius: 999px; padding: 3px 12px; font-size: 0.78rem; font-weight: 700;
}
.age-pill-mid { background: var(--amber-bg); color: var(--amber); }
.age-pill-old { background: #fdecea; color: #b02a37; }

.detail-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 18px 0 4px;
}
.detail-card {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; min-width: 0;
}
.detail-card-wide { grid-column: span 2; }
.detail-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.detail-value { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.detail-sub { font-size: 0.8rem; color: var(--muted); }
.detail-sub-warn { color: #b02a37; font-weight: 700; }
.detail-empty { color: var(--muted); font-weight: 400; font-style: italic; }

.detail-people { display: flex; flex-wrap: wrap; gap: 6px; }
.person-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 12px 3px 3px; font-size: 0.85rem; font-weight: 600; color: var(--navy);
}
.person-chip-text { padding-left: 12px; color: var(--muted); font-style: italic; }
.person-ini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--navy); color: #fff; font-size: 0.7rem; font-weight: 700;
}

/* comments get the same avatar treatment */
.comment { display: flex; gap: 10px; align-items: flex-start; }
.comment-main { flex: 1; min-width: 0; }

/* history timeline */
.history-list li {
  position: relative; padding: 8px 0 8px 22px; border-left: 2px solid var(--border);
  display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline;
}
.hist-dot {
  position: absolute; left: -6px; top: 15px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #c7d0da; border: 2px solid #fff;
}
.hist-created .hist-dot { background: var(--navy); }
.hist-assign  .hist-dot { background: #1f6fd0; }
.hist-status  .hist-dot { background: var(--orange); }
.hist-comment .hist-dot { background: #2da44e; }
.hist-quote { color: var(--ink); font-style: italic; }
.hist-prev { color: var(--muted); }
.history-list .status-badge, .history-list .sev-badge { font-size: 0.72rem; padding: 1px 8px; }

@media (max-width: 860px) {
  .detail-cards { grid-template-columns: repeat(2, 1fr); }
  .detail-card-wide { grid-column: span 2; }
}

/* ---- Detail panel polish ---------------------------------------------- */
#detail-modal .modal { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.detail-scroll { overflow-y: auto; padding: 0 26px 26px; }

/* title block stays put while the history scrolls */
.detail-top {
  position: sticky; top: 0; z-index: 2; background: #fff;
  padding: 22px 26px 14px; border-bottom: 1px solid var(--border);
}
.detail-banner { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
/* an author display rule beats the browser's [hidden] rule - restore it */
.detail-banner[hidden] { display: none; }

.detail-block { margin-top: 22px; }
.detail-block h4 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.detail-notes {
  background: var(--bg-alt); border: 1px solid var(--border); border-left: 3px solid var(--navy);
  border-radius: 8px; padding: 12px 14px; margin: 0; white-space: pre-wrap;
}
#d-comment-form { margin-top: 14px; }
#d-comment-form label { margin-top: 0; }
.comment-list:empty { display: none; }
#d-comments .empty-msg { padding: 16px; background: var(--bg-alt); border-radius: 8px; margin: 0; }
.detail-cards { margin-top: 16px; }

/* =====================================================================
   Attendance, customers, SLAs and intervention reports
   ===================================================================== */

:root {
  --att-green: #1e7e34;
  --att-green-bg: #d9f2e0;
  --att-amber: #9a7300;
  --att-amber-bg: #fdf3d0;
  --att-orange: #b5480a;
  --att-orange-bg: #fde5d0;
  --att-red: #a4133c;
  --att-red-bg: #fde2e4;
  --att-blue: #1b4f8a;
  --att-blue-bg: #e0edfb;
}

.dot-escalated { background: #d1344b; }
.stat-tile.stat-static { cursor: default; }
.stat-tile.stat-static:hover { transform: none; box-shadow: none; }

/* ---------- header check in / check out ---------- */
.attend-box { display: flex; align-items: center; gap: 8px; }
.btn-checkin, .btn-checkout {
  border: none; border-radius: 8px; cursor: pointer;
  font-size: 0.82rem; font-weight: 600; padding: 7px 14px;
  font-family: inherit; white-space: nowrap;
}
.btn-checkin { background: var(--att-green); color: #fff; }
.btn-checkin:hover { background: #17632a; }
.btn-checkout { background: var(--orange); color: #fff; }
.btn-checkout:hover { background: var(--orange-dark); }
.btn-checkout .caret { font-size: 0.7rem; margin-left: 2px; }
.checkout-wrap { position: relative; }
.checkout-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); min-width: 230px; overflow: hidden;
}
.checkout-menu button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 10px 14px; cursor: pointer; font-family: inherit; color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.checkout-menu button:last-child { border-bottom: none; }
.checkout-menu button:hover { background: var(--bg-alt); }
.checkout-menu strong { display: block; font-size: 0.85rem; }
.checkout-menu span { font-size: 0.75rem; color: var(--muted); }
.attend-since { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.attend-since.in { color: var(--att-green); font-weight: 600; }
.attend-since.att-text-orange { color: var(--att-orange); font-weight: 600; }
.attend-since.att-text-yellow { color: var(--att-amber); font-weight: 600; }
.attend-since.att-text-green { color: var(--att-green); font-weight: 600; }

/* ---------- attendance badges ---------- */
.att-badge, .att-chip {
  display: inline-block; border-radius: 999px; font-weight: 600;
  font-size: 0.74rem; padding: 2px 10px; white-space: nowrap;
}
.att-chip { font-size: 0.66rem; padding: 1px 7px; margin-left: 6px; }
.att-green  { background: var(--att-green-bg);  color: var(--att-green); }
.att-yellow { background: var(--att-amber-bg);  color: var(--att-amber); }
.att-orange { background: var(--att-orange-bg); color: var(--att-orange); }
.att-absent { background: #e2e5ea;              color: #56606d; }
.att-open   { background: var(--att-blue-bg);   color: var(--att-blue); }
.att-offday { background: var(--grey-bg);       color: var(--muted); }
.att-future { background: transparent;          color: var(--muted); }

.attend-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; }
.att-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px;
}
.att-swatch.att-green  { background: var(--att-green); }
.att-swatch.att-yellow { background: #e0b400; }
.att-swatch.att-orange { background: #e8791f; }
.att-swatch.att-absent { background: #b6bcc5; }
.att-swatch.att-open   { background: var(--att-blue); }

/* an absent day is greyed right out */
tr.row-absent { background: #f1f2f4; color: #6d7681; }
tr.row-absent .task-title { color: #6d7681; }
.you-tag {
  font-size: 0.66rem; background: var(--navy); color: #fff;
  border-radius: 999px; padding: 1px 7px; margin-left: 6px;
}

/* ---------- task reminder pill ---------- */
.rem-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; border-radius: 999px;
  font-size: 0.73rem; font-weight: 600; padding: 3px 10px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.rem-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rem-blue  { background: var(--att-blue-bg);   color: var(--att-blue);   border-color: #b9d6f2; }
.rem-amber { background: var(--att-amber-bg);  color: var(--att-amber);  border-color: #efd98a; }
.rem-red   { background: var(--att-red-bg);    color: var(--att-red);    border-color: #f0b3bf; }
.rem-done  { background: var(--grey-bg);       color: var(--muted);      border-color: var(--border); }
.rem-none  { background: transparent;          color: var(--muted);      border-color: var(--border); }
.col-rem { white-space: nowrap; }

/* ---------- user form: schedule ---------- */
.sched-box {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin: 14px 0;
}
.sched-box legend { font-size: 0.8rem; font-weight: 700; color: var(--navy); padding: 0 6px; }
.chk-inline { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.85rem; }
.day-box, .month-box { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.day-box label, .month-box label {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 10px; font-size: 0.8rem; cursor: pointer; background: #fff;
}
.day-box label:hover, .month-box label:hover { border-color: var(--navy-soft); }
.sched-pill {
  display: inline-block; background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 9px; font-size: 0.73rem; white-space: nowrap;
}
.sched-pill.flex { background: var(--att-blue-bg); color: var(--att-blue); border-color: #b9d6f2; }
.sched-days { font-size: 0.7rem; color: var(--muted); }

/* ---------- calendar overlays ---------- */
.cal-attend {
  position: absolute; left: 0; right: 0;
  background: rgba(30, 126, 52, 0.13);
  border-left: 3px solid rgba(30, 126, 52, 0.5);
}
.cal-inter {
  position: absolute; left: 18%; right: 4%;
  background: rgba(27, 79, 138, 0.82); color: #fff;
  border-radius: 5px; overflow: hidden;
  font-size: 0.68rem; padding: 1px 4px;
}
.cal-col.is-absent { background: #f1f2f4; }
.cal-absent-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #8a939e; font-weight: 700; letter-spacing: 1px; font-size: 0.78rem;
  text-transform: uppercase; pointer-events: none;
}
.cal-swatch.swatch-attend { background: rgba(30, 126, 52, 0.35); }
.cal-swatch.swatch-inter { background: rgba(27, 79, 138, 0.82); }

/* ---------- customers ---------- */
.contact-row {
  display: grid; grid-template-columns: 1.2fr 1.4fr .9fr .9fr auto auto;
  gap: 8px; margin-bottom: 8px; align-items: center;
}
.contact-row input { margin: 0; }
.contact-line { margin-bottom: 6px; font-size: 0.82rem; }
.contact-line:last-child { margin-bottom: 0; }
.muted-sm { font-size: 0.73rem; color: var(--muted); }
tr.row-inactive { opacity: 0.6; }

/* ---------- SLAs ---------- */
.sla-type {
  display: inline-block; background: var(--navy); color: #fff;
  border-radius: 999px; padding: 2px 10px; font-size: 0.72rem; font-weight: 600;
}
.meter {
  height: 8px; border-radius: 999px; background: var(--grey-bg);
  overflow: hidden; margin-bottom: 4px; min-width: 90px;
}
.meter-fill { display: block; height: 100%; background: var(--att-green); }
.meter-fill.over { background: var(--att-red); }
.over-text { color: var(--att-red); }
.hc-pill {
  display: inline-block; border-radius: 999px; padding: 1px 8px;
  font-size: 0.7rem; font-weight: 600; margin-right: 4px; white-space: nowrap;
}
.hc-done, .hc-completed { background: var(--att-green-bg); color: var(--att-green); }
.hc-pending { background: var(--att-amber-bg); color: var(--att-amber); }
.hc-overdue { background: var(--att-red-bg); color: var(--att-red); }

/* ---------- intervention reports ---------- */
.ir-section {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 12px; margin: 18px 0 10px;
  font-weight: 700; font-size: 0.82rem; color: var(--navy);
  letter-spacing: 0.4px; text-transform: uppercase;
}
.ir-eng-table td { padding: 5px 6px; }
.ir-eng-table select, .ir-eng-table input[type=time] {
  margin: 0; padding: 5px 6px; font-size: 0.82rem; width: 100%;
}
.ir-eng-table .chk-cell { text-align: center; }
.ir-eng-table .chk-cell input { width: 16px; height: 16px; margin: 0; }
.charge-pill {
  display: inline-block; border: 1px solid transparent; border-radius: 999px;
  padding: 3px 10px; font-size: 0.73rem; font-weight: 700;
  font-family: inherit; white-space: nowrap;
}
button.charge-pill { cursor: pointer; }
.charge-pill.to_charge { background: var(--att-red-bg); color: var(--att-red); border-color: #f0b3bf; }
.charge-pill.charged { background: var(--att-green-bg); color: var(--att-green); border-color: #a8ddb9; }
.charge-pill.na { background: var(--grey-bg); color: var(--muted); border-color: var(--border); }
tr.row-tocharge { background: #fff7f8; }
.hc-tag {
  display: inline-block; background: var(--att-blue-bg); color: var(--att-blue);
  border-radius: 999px; padding: 1px 8px; font-size: 0.66rem;
  font-weight: 600; margin-left: 6px;
}
.sla-check-box {
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
  font-size: 0.85rem; border: 1px solid transparent;
}
.sla-check-box.ok { background: var(--att-green-bg); color: var(--att-green); border-color: #a8ddb9; }
.sla-check-box.bad { background: var(--att-red-bg); color: var(--att-red); border-color: #f0b3bf; }
.warn-title { color: var(--att-red); }
.modal-narrow { max-width: 460px; }

@media (max-width: 860px) {
  .contact-row { grid-template-columns: 1fr 1fr; }
  .contact-row .k-acct { grid-column: 1 / -1; }
  .attend-box { flex-wrap: wrap; }
  .attend-since { width: 100%; }
}

/* =====================================================================
   Round 2: submenus, departments, devices, renewals, knowledge base
   ===================================================================== */

/* ---------- logo as the way home ---------- */
.logo-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; border-radius: 8px;
}
.logo-btn:hover { opacity: 0.85; }
.logo-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ---------- main menu with submenus ---------- */
.nav-item { position: relative; }
.nav-caret { font-size: 0.6rem; opacity: 0.75; margin-left: 2px; }
.nav-sub {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 70;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); min-width: 210px; padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.nav-item.open .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-sub .sub-btn {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 9px 12px; border-radius: 7px; cursor: pointer;
  font-family: inherit; font-size: 0.86rem; color: var(--ink);
}
.nav-sub .sub-btn:hover { background: var(--bg-alt); }
.nav-sub .sub-btn.active { background: var(--navy); color: #fff; font-weight: 600; }
.nav-sub .sub-btn[hidden] { display: none; }

/* ---------- department pill ---------- */
.dept-pill {
  display: inline-block; background: var(--att-blue-bg); color: var(--att-blue);
  border: 1px solid #b9d6f2; border-radius: 999px;
  padding: 1px 9px; font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}

/* ---------- SLA: unlimited + device grid ---------- */
.unlimited-pill {
  display: inline-block; background: var(--navy); color: #fff;
  border-radius: 999px; padding: 2px 10px; font-size: 0.72rem; font-weight: 700;
}
.modal-scroll { max-height: 88vh; overflow-y: auto; }
.dev-table td { padding: 4px 5px; }
.dev-table input[type=text], .dev-table input[type=date], .dev-table input:not([type=checkbox]) {
  margin: 0; padding: 5px 6px; font-size: 0.82rem; width: 100%;
}
.dev-table .chk-cell { text-align: center; }
.dev-table .chk-cell input { width: 16px; height: 16px; margin: 0; }
.dev-table input:disabled { background: var(--grey-bg); color: var(--muted); }

/* ---------- device chips on the intervention form ---------- */
.device-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.device-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 11px; cursor: pointer; background: #fff; font-size: 0.83rem;
}
.device-chip:hover { border-color: var(--navy-soft); }
.device-chip input { margin: 0; }
.device-chip .dev-serial { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ---------- renewal bands ---------- */
.band-pill {
  display: inline-block; border-radius: 999px; padding: 3px 11px;
  font-size: 0.74rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.band-green  { background: var(--att-green-bg);  color: var(--att-green);  border-color: #a8ddb9; }
.band-blue   { background: var(--att-blue-bg);   color: var(--att-blue);   border-color: #b9d6f2; }
.band-yellow { background: var(--att-amber-bg);  color: var(--att-amber);  border-color: #efd98a; }
.band-red    { background: var(--att-red-bg);    color: var(--att-red);    border-color: #f0b3bf; }
.band-none   { background: var(--grey-bg);       color: var(--muted);      border-color: var(--border); }

.band-tile { border-left: 5px solid var(--border); }
.band-tile.band-red    { border-left-color: var(--att-red); }
.band-tile.band-yellow { border-left-color: #e0b400; }
.band-tile.band-blue   { border-left-color: var(--att-blue); }
.band-tile.band-green  { border-left-color: var(--att-green); }

tr.rn-red { background: #fff7f8; }
tr.rn-yellow { background: #fffdf4; }
.src-pill {
  display: inline-block; border-radius: 999px; padding: 1px 9px;
  font-size: 0.7rem; font-weight: 600;
}
.src-sla { background: var(--att-blue-bg); color: var(--att-blue); }
.src-manual { background: var(--grey-bg); color: var(--muted); }

/* ---------- knowledge base ---------- */
.kb-search-box { margin-bottom: 12px; }
.kb-search-box input {
  width: 100%; font-size: 1rem; padding: 13px 16px;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.kb-search-box input:focus { outline: none; border-color: var(--navy-soft); box-shadow: 0 0 0 3px rgba(29,58,92,.08); }

.kb-tagcloud { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.tag-cloud-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: #fff; border-radius: 999px;
  padding: 4px 12px; font-size: 0.78rem; cursor: pointer; font-family: inherit; color: var(--ink);
}
.tag-cloud-btn:hover { border-color: var(--navy-soft); background: var(--bg-alt); }
.tag-cloud-btn span { color: var(--muted); font-size: 0.7rem; }

.kb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.kb-card {
  text-align: left; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px 17px; cursor: pointer;
  font-family: inherit; color: var(--ink); transition: box-shadow .15s, transform .15s;
}
.kb-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.kb-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kb-card h4 { margin: 0 0 6px; font-size: 1rem; color: var(--navy); }
.kb-card-sum { margin: 0 0 10px; font-size: 0.84rem; color: var(--muted); line-height: 1.5; }
.kb-card-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; font-size: 0.73rem; color: var(--muted); }

.validated-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--att-green-bg); color: var(--att-green);
  border: 1px solid #a8ddb9; border-radius: 999px;
  padding: 2px 10px; font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.validated-tag .tick { font-size: 0.85rem; line-height: 1; }
.validate-chk {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 12px; font-size: 0.84rem; background: #fff;
}

.tag-chip {
  display: inline-block; background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 10px; font-size: 0.73rem; margin-right: 5px;
}
.tag-chip.removable { display: inline-flex; align-items: center; gap: 5px; }
.tag-chip button {
  border: none; background: none; cursor: pointer; color: var(--muted);
  font-size: 0.95rem; line-height: 1; padding: 0;
}
.tag-chip button:hover { color: #b02a37; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag-input-wrap { position: relative; }
.tag-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 60;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); max-height: 220px; overflow-y: auto;
}
.tag-suggest button {
  display: flex; justify-content: space-between; width: 100%; text-align: left;
  border: none; background: none; padding: 8px 12px; cursor: pointer;
  font-family: inherit; font-size: 0.84rem; color: var(--ink);
}
.tag-suggest button:hover { background: var(--bg-alt); }
.tag-suggest span { color: var(--muted); font-size: 0.72rem; }

/* the article itself */
.kb-paper {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 34px; box-shadow: var(--shadow); margin-bottom: 22px;
}
.kb-art-head { border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 18px; }
.kb-art-head h2 { margin: 0 0 8px; color: var(--navy); }
.kb-meta { margin: 0 0 8px; font-size: 0.8rem; color: var(--muted); }
.kb-tags { margin: 0; }

.kb-body { font-size: 0.94rem; line-height: 1.7; color: var(--ink); }
.kb-body h1, .kb-body h2, .kb-body h3, .kb-body h4 { color: var(--navy); margin: 1.4em 0 .5em; }
.kb-body h2 { font-size: 1.25rem; }
.kb-body h3 { font-size: 1.08rem; }
.kb-body p { margin: 0 0 1em; }
.kb-body ul, .kb-body ol { margin: 0 0 1em; padding-left: 1.6em; }
.kb-body li { margin-bottom: .4em; }
.kb-body a { color: var(--navy); text-decoration: underline; }
.kb-body blockquote {
  margin: 0 0 1em; padding: 8px 16px; border-left: 3px solid var(--border);
  background: var(--bg-alt); color: var(--muted);
}
.kb-body pre {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; overflow-x: auto; font-size: 0.85rem;
}
.kb-body code { background: var(--bg-alt); padding: 1px 5px; border-radius: 4px; font-size: 0.88em; }
.kb-body table, .kb-body .kb-table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 0.88rem;
}
.kb-body th, .kb-body td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; }
.kb-body th { background: var(--bg-alt); font-weight: 700; }
.kb-body img { max-width: 100%; height: auto; border-radius: 6px; }
.kb-body hr { border: none; border-top: 1px solid var(--border); margin: 1.6em 0; }

.kb-toc, .kb-body .kb-toc {
  background: var(--bg-alt); border: 1px solid var(--border); border-left: 4px solid var(--navy);
  border-radius: 8px; padding: 14px 18px; margin: 0 0 1.6em;
}
.kb-toc strong { display: block; margin-bottom: 8px; color: var(--navy); font-size: 0.9rem; }
.kb-toc ul { list-style: none; margin: 0; padding: 0; }
.kb-toc li { margin-bottom: 5px; }
.kb-toc li.toc-h3 { padding-left: 18px; font-size: 0.9em; }
.kb-toc li.toc-h4 { padding-left: 36px; font-size: 0.85em; }
.kb-toc a { color: var(--navy); text-decoration: none; }
.kb-toc a:hover { text-decoration: underline; }

/* the editor */
.kb-toolbar {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 10px 10px 0 0; padding: 7px 9px; background: var(--bg-alt);
}
.kb-toolbar button {
  border: 1px solid transparent; background: #fff; border-radius: 6px;
  padding: 5px 10px; cursor: pointer; font-family: inherit;
  font-size: 0.8rem; color: var(--ink); min-width: 32px;
}
.kb-toolbar button:hover { border-color: var(--navy-soft); background: #fff; }
.tb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.kb-edit-area {
  border: 1px solid var(--border); border-radius: 0 0 10px 10px;
  min-height: 420px; padding: 18px 22px; background: #fff;
  font-size: 0.94rem; line-height: 1.7; overflow-y: auto;
}
.kb-edit-area:focus { outline: none; border-color: var(--navy-soft); }
.kb-edit-area h2, .kb-edit-area h3 { color: var(--navy); }
.kb-edit-area table { width: 100%; border-collapse: collapse; margin: 0 0 1em; }
.kb-edit-area th, .kb-edit-area td { border: 1px solid var(--border); padding: 6px 9px; }
.kb-edit-area th { background: var(--bg-alt); }
.kb-edit-area .kb-toc { background: var(--bg-alt); border-left: 4px solid var(--navy); }

@media (max-width: 900px) {
  .kb-list { grid-template-columns: 1fr; }
  .nav-sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; }
  .nav-item:not(.open) .nav-sub { display: none; }
}

/* =====================================================================
   HRMS: the name menu, notifications, leave, payroll and staff records
   ===================================================================== */

/* ---------- the name menu on the right of the bar ---------- */
.me-wrap { position: relative; }
.me-btn {
  background: var(--grey-bg); border: 1px solid var(--border); color: var(--navy);
  border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 0.88rem;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.me-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.me-btn[aria-expanded="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.me-btn .nav-caret { font-size: 0.65rem; opacity: 0.8; }

.me-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); min-width: 268px; overflow: hidden; padding-bottom: 6px;
}
.me-menu-head {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px 12px; background: var(--bg-alt); border-bottom: 1px solid var(--border);
}
.me-menu-name { font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.me-menu-email { font-size: 0.78rem; color: var(--muted); word-break: break-all; }
.me-menu-line { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.me-menu-line.warn { color: var(--amber); font-weight: 700; }
.me-menu-line.danger { color: #b02a37; font-weight: 700; }
.me-menu-item {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 10px 16px; font-family: inherit; font-size: 0.88rem;
  font-weight: 600; color: var(--ink);
}
.me-menu-item:hover { background: var(--bg-alt); color: var(--navy); }
.me-menu-item.danger { color: #b02a37; }
.me-menu-sep { height: 1px; background: var(--border); margin: 6px 0; }

/* ---------- notification bell ---------- */
.bell-wrap { position: relative; }
.bell-btn {
  position: relative; background: none; border: 1px solid var(--border);
  border-radius: 50%; width: 36px; height: 36px; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.bell-btn:hover { background: var(--grey-bg); color: var(--navy); }
.bell-btn.has-unread { color: var(--orange); border-color: var(--orange); }
.bell-count {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--orange); color: #fff;
  font-size: 0.62rem; font-weight: 700; line-height: 17px; text-align: center;
  padding: 0 4px;
}
.bell-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); width: 340px; max-width: 88vw; overflow: hidden;
}
.bell-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; background: var(--bg-alt); border-bottom: 1px solid var(--border);
  font-size: 0.88rem; color: var(--navy);
}
.bell-list { max-height: 340px; overflow-y: auto; }
.bell-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  border: none; background: none; border-bottom: 1px solid var(--border);
  padding: 11px 14px; font-family: inherit;
}
.bell-item:last-child { border-bottom: none; }
.bell-item:hover { background: var(--bg-alt); }
.bell-item.unread { background: #fff8f5; border-left: 3px solid var(--orange); }
.bell-item-title { font-weight: 700; font-size: 0.85rem; color: var(--navy); }
.bell-item-body { font-size: 0.78rem; color: var(--muted); line-height: 1.45; }
.bell-item-when { font-size: 0.7rem; color: #9aa5b1; margin-top: 2px; }
.bell-empty { padding: 22px 14px; text-align: center; color: var(--muted); font-size: 0.85rem; margin: 0; }

/* ---------- birthday greeting, shown only to the person having it ---------- */
.bday-banner {
  max-width: 1180px; margin: 14px auto 0; padding: 12px 18px;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(100deg, #fff3d6 0%, #ffe0ea 100%);
  border: 1px solid #f0c987; border-radius: var(--radius);
  color: #7a4a00; font-weight: 600; font-size: 0.95rem;
}
.bday-cake { font-size: 1.4rem; }
.bday-close {
  margin-left: auto; background: none; border: none; font-size: 1.3rem;
  color: #9a7300; line-height: 1; padding: 0 4px;
}

/* ---------- live attendance ---------- */
.att-leave { background: #ede4fb; color: #5b32a8; }
.att-swatch.att-leave { background: #7c4dd6; }
.att-out { background: var(--grey-bg); color: var(--muted); }
tr.row-live { background: #f5fbff; }
.live-dot::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--att-blue); margin-right: 6px; vertical-align: 1px;
  animation: live-pulse 1.8s ease-in-out infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .live-dot::before { animation: none; } }

/* ---------- staff record ---------- */
.wide-card { max-width: 720px; }
.locked-note {
  background: var(--grey-bg); border-left: 4px solid var(--muted);
  border-radius: 8px; padding: 10px 14px; margin: 14px 0;
  font-size: 0.85rem; color: var(--muted); line-height: 1.5;
}
.field-hint.hint-good { color: var(--green); font-weight: 600; }
.field-hint.hint-bad { color: #b02a37; font-weight: 600; }
.hr-only-tag {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--navy); color: #fff; border-radius: 999px;
  padding: 2px 7px; margin-left: 6px; vertical-align: 1px;
}
.course-box {
  display: flex; flex-wrap: wrap; gap: 8px;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; max-height: 220px; overflow-y: auto; background: var(--bg-alt);
}
.course-box label {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px; font-size: 0.82rem; font-weight: 500; cursor: pointer;
}
.course-box label:hover { border-color: var(--orange); }
.course-box label.retired { opacity: 0.6; }
.course-box input { width: auto; margin: 0; }
.course-cat { font-size: 0.68rem; color: var(--muted); }
.cert-count {
  font-size: 0.66rem; background: var(--att-blue-bg); color: var(--att-blue);
  border-radius: 999px; padding: 1px 7px; margin-left: 6px; font-weight: 600;
}
.emp-pill {
  display: inline-block; font-size: 0.7rem; font-weight: 600;
  border-radius: 999px; padding: 2px 9px;
}
.emp-employed { background: var(--att-green-bg); color: var(--att-green); }
.emp-contract { background: var(--att-blue-bg); color: var(--att-blue); }
.emp-intern { background: var(--att-amber-bg); color: var(--att-amber); }
tr.row-retired { opacity: 0.62; }
.stat-foot { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
.band-grey { border-left-color: #b6bcc5 !important; }

/* ---------- leave ---------- */
.lv-badge {
  display: inline-block; border-radius: 999px; font-weight: 600;
  font-size: 0.72rem; padding: 2px 10px; white-space: nowrap;
}
.lv-pending { background: var(--att-amber-bg); color: var(--att-amber); }
.lv-approved { background: var(--att-green-bg); color: var(--att-green); }
.lv-rejected { background: var(--att-red-bg); color: var(--att-red); }
.lv-cancelled { background: var(--grey-bg); color: var(--muted); }
.lv-cancel_pending { background: var(--att-orange-bg); color: var(--att-orange); }

.flag-tag {
  display: inline-block; background: #a4133c; color: #fff;
  border-radius: 4px; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 8px; margin-left: 5px;
}
.flag-cleared { font-size: 0.68rem; color: var(--muted); margin-left: 5px; font-style: italic; }
tr.row-flagged { box-shadow: inset 3px 0 0 #a4133c; }

.ap-cell { white-space: normal; }
.ap-chip {
  display: inline-block; border-radius: 4px; font-size: 0.67rem; font-weight: 600;
  padding: 1px 7px; margin: 1px 4px 1px 0; white-space: nowrap;
}
.ap-ok { background: var(--att-green-bg); color: var(--att-green); }
.ap-no { background: var(--att-red-bg); color: var(--att-red); }
.ap-wait { background: var(--grey-bg); color: var(--muted); }
.half-tag {
  font-size: 0.66rem; background: var(--att-blue-bg); color: var(--att-blue);
  border-radius: 999px; padding: 1px 7px; margin-left: 4px;
}

.notice-box {
  border-radius: 8px; padding: 11px 14px; margin: 14px 0 4px;
  font-size: 0.85rem; line-height: 1.55;
}
.notice-ok { background: var(--att-green-bg); color: #145c27; border: 1px solid #a8ddb9; }
.notice-bad { background: var(--att-amber-bg); color: #7a5c00; border: 1px solid #e3c86a; }

.ld-detail {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-alt); padding: 4px 0; margin: 14px 0;
}
.ld-row {
  display: flex; gap: 12px; padding: 7px 14px;
  border-bottom: 1px solid var(--border); font-size: 0.85rem;
}
.ld-row:last-child { border-bottom: none; }
.ld-k { flex: 0 0 150px; color: var(--muted); font-weight: 600; }
.ld-v { flex: 1; color: var(--ink); }
.ld-actions { flex-wrap: wrap; gap: 8px; }

.bank-cell { display: flex; flex-direction: column; gap: 3px; }
.bank-input { width: 84px; padding: 6px 8px; font-size: 0.85rem; text-align: right; }
.bank-input.saved { border-color: var(--green); background: var(--green-bg); }
.bank-used { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }

/* ---------- payroll ---------- */
.basic-tag, .builtin-tag, .fixed-tag, .var-tag {
  display: inline-block; font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px;
}
.basic-tag { background: var(--navy); color: #fff; }
.builtin-tag { background: var(--att-blue-bg); color: var(--att-blue); }
.fixed-tag { background: var(--grey-bg); color: var(--muted); }
.var-tag { background: var(--att-amber-bg); color: var(--att-amber); }
.built-in-note {
  background: var(--att-blue-bg); color: var(--att-blue);
  border-radius: 8px; padding: 10px 14px; margin-top: 14px;
  font-size: 0.82rem; line-height: 1.5;
}

.pay-table td, .pay-table th { vertical-align: middle; }
.pay-amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pay-note { font-size: 0.78rem; color: var(--muted); }
.pe-input-wrap { display: flex; align-items: center; gap: 5px; }
.pe-input { width: 118px; padding: 7px 9px; font-size: 0.88rem; text-align: right; }
.pe-prefix, .pe-suffix { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
tr.pe-builtin { background: var(--bg-alt); }
tr.row-nodata { color: var(--muted); }

.pay-summary {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; margin-top: 18px;
  font-size: 0.85rem; color: var(--muted);
}
.pay-summary strong { display: block; color: var(--navy); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.pay-summary .pay-net { margin-left: auto; }
.pay-summary .pay-net strong { color: var(--orange); font-size: 1.3rem; }

.payslip {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow);
}
.payslip.empty-slip { text-align: center; padding: 40px 24px; }
.payslip-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px; flex-wrap: wrap; border-bottom: 2px solid var(--navy);
  padding-bottom: 14px; margin-bottom: 18px;
}
.payslip-head .panel-sub { margin: 0; }
.payslip-period { text-align: right; }
.payslip-period-label {
  display: block; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
}
.payslip-period strong { color: var(--navy); font-size: 1.05rem; }
.payslip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.payslip-col h4 {
  margin: 0 0 8px; color: var(--navy); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.06em;
}
/* A payslip column is narrow by design, so it must not inherit the wide
   minimum the main tables use, and its footer is a total rather than a
   heading - plain text on the card, not a navy bar. */
.payslip-col .task-table,
.pay-table.slip-table { min-width: 0; }
.payslip-col td, .payslip-col th { padding: 8px 4px; white-space: normal; }
.payslip-col tfoot th {
  background: transparent; color: var(--navy);
  border-top: 2px solid var(--navy); font-size: 0.85rem;
  padding-top: 10px; white-space: nowrap;
}
.payslip-col .pay-note { padding-left: 10px; }
.payslip-net {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: 20px; padding: 16px 20px; border-radius: var(--radius);
  background: var(--navy); color: rgba(255, 255, 255, 0.72); font-size: 0.85rem;
}
.payslip-net strong { color: #fff; font-variant-numeric: tabular-nums; }
.payslip-net .net-main { margin-left: auto; font-size: 0.95rem; }
.payslip-net .net-main strong { font-size: 1.5rem; color: #ffb59d; }
@media (max-width: 760px) { .payslip-cols { grid-template-columns: 1fr; } }

/* ---------- intervention report acknowledgement ---------- */
.ack-card {
  border: 1px solid var(--border); border-left: 5px solid var(--muted);
  border-radius: 8px; padding: 14px 16px; background: var(--bg-alt);
}
.ack-card.ack-sent { border-left-color: var(--att-blue); }
.ack-card.ack-viewed { border-left-color: var(--att-amber); }
.ack-card.ack-acknowledged { border-left-color: var(--att-green); background: var(--att-green-bg); }
.ack-state { font-weight: 700; color: var(--navy); margin-bottom: 8px; font-size: 0.92rem; }
.ack-row {
  display: flex; gap: 12px; font-size: 0.82rem; padding: 3px 0;
}
.ack-row span:first-child { flex: 0 0 110px; color: var(--muted); font-weight: 600; }
.ack-row span:last-child { flex: 1; word-break: break-word; }
.ack-note { font-size: 0.78rem; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.share-state { margin-top: 12px; }
.share-link {
  display: block; word-break: break-all; background: #fff; border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px; margin-top: 6px; font-size: 0.75rem;
}

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  .portal-header-inner { gap: 12px; }
  .portal-tabs { order: 3; width: 100%; flex-wrap: wrap; }
  .portal-user { margin-left: auto; }
  .attend-since { display: none; }
  .me-menu, .bell-menu { right: 0; }
}

/* An author "display" rule beats the browser's built-in [hidden] rule, which
   is easy to trip over when a flex or grid element is toggled with the hidden
   attribute. State it once, here at the end, so it always holds. */
[hidden] { display: none !important; }

/* A field that cannot be typed into should look like it, rather than inviting
   somebody to try. */
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
  background: var(--bg-alt); color: var(--muted);
  border-color: var(--border); cursor: default;
}
input[readonly]:focus, textarea[readonly]:focus { outline: none; border-color: var(--border); }
.course-box input:disabled + span, .course-box label:has(input:disabled) { opacity: 0.6; }

/* A month picker and a bare select in the panel head should sit on one line
   with the buttons, not stretch to the full width the global input rule gives
   every field. */
.cal-controls input[type="month"],
.cal-controls input[type="date"] {
  width: auto; min-width: 150px; padding: 6px 10px; font-size: 0.9rem;
}

/* The payroll editor's tables live inside a dialog, so they must not carry
   the wide minimum the full-page tables need. */
#payedit-modal .task-table { min-width: 0; }
#payedit-modal .task-table th, #payedit-modal .task-table td { padding: 9px 10px; }
#payedit-modal .pay-note { white-space: normal; }

/* Small facts about the person a dialog is about. */
.detail-badge {
  display: inline-block; background: var(--grey-bg); color: var(--muted);
  border-radius: 999px; padding: 2px 10px; font-size: 0.74rem; font-weight: 600;
}

/* A ghost button that turns something down should read as such. */
.btn-ghost.danger { color: #b02a37; border-color: #f0c2c7; }
.btn-ghost.danger:hover { background: #fdecea; }

/* =========================================================================
   Tables that size to their contents
   -------------------------------------------------------------------------
   The default table stretches every column to fill the width, which squeezes
   the useful ones and leaves the short ones swimming. A fitted table lets each
   column take the width its content needs and scrolls sideways when the sum of
   them will not fit, which is what a register of this shape wants.
   ========================================================================= */
.task-table.fit { width: auto; min-width: 100%; table-layout: auto; }
/* A register of this shape earns more of the screen than an article does, so
   the pages that hold one are allowed to use it on a wide display.
   -------------------------------------------------------------------------
   Getting one of these panels centred takes a little arithmetic. It sits
   inside .portal-main, whose content box starts at (window / 2) - 566px, so a
   panel that is to be centred in the *window* rather than in its parent needs
   a left margin of 566px - (its own width / 2). Working it out that way keeps
   the panel in the middle whether it is filling the window or has run into its
   1600px ceiling - the old fixed margin only centred it while it was filling
   the window, and left it hugging the left on a wide screen.

   --vw is the width of the page without its scrollbar, set by portal.js;
   100vw counts the scrollbar in and would tip everything a few pixels left. */
.tab-panel.wide-panel { max-width: none; }
#tab-tracker, #tab-users, #tab-cases, #tab-activity, #tab-access {
  --wide-w: min(calc(var(--vw, 100vw) - 48px), 1600px);
  width: var(--wide-w);
  max-width: none;
  margin-left: calc(566px - (var(--wide-w) / 2));
  margin-right: 0;
}
@media (max-width: 1180px) {
  #tab-tracker, #tab-users, #tab-cases, #tab-activity, #tab-access {
    width: auto; margin-left: 0; margin-right: 0;
  }
}
.task-table.fit th,
.task-table.fit td { white-space: nowrap; padding: 9px 12px; }
/* The columns that genuinely hold prose still wrap, inside a sensible width. */
.task-table.fit td.task-title,
.task-table.fit td.task-notes,
.task-table.fit td.wrap {
  white-space: normal; max-width: 340px; min-width: 150px;
}
.task-table.fit td.task-notes { max-width: 260px; }
.task-table.fit td.col-actions { white-space: nowrap; width: 1%; }
.task-table.fit .col-num { width: 1%; }

/* ---- Project Tracker: the whole row on screen at once --------------------
   Ten columns is a lot. Left to size itself the table grew wider than the page
   and everything past Age disappeared behind a sideways scroll that most
   people never found. Sharing a fixed width out between the columns instead
   keeps every one of them visible: the three that hold prose - the task, who
   it is assigned to and the notes - wrap inside their share, and the short
   ones get only what they need. */
#tab-tracker .task-table.fit {
  width: 100%; min-width: 0; table-layout: fixed;
}
#tab-tracker .task-table.fit th,
#tab-tracker .task-table.fit td { padding: 9px 10px; }
#tab-tracker .task-table.fit th { white-space: normal; }
#tab-tracker .task-table.fit td.task-title,
#tab-tracker .task-table.fit td.task-notes,
#tab-tracker .task-table.fit td.col-assignee {
  white-space: normal; max-width: none; min-width: 0;
  overflow-wrap: break-word;
}
#tab-tracker .task-table.fit .col-num    { width: 3%; }
#tab-tracker .task-table.fit th:nth-child(2)  { width: 21%; }   /* Task */
#tab-tracker .task-table.fit .col-assignee    { width: 13%; }   /* Assigned To */
#tab-tracker .task-table.fit th:nth-child(4)  { width: 9%;  }   /* Estimated Deadline */
#tab-tracker .task-table.fit th:nth-child(5)  { width: 6%;  }   /* Age */
#tab-tracker .task-table.fit th:nth-child(6)  { width: 9%;  }   /* Reminders */
#tab-tracker .task-table.fit th:nth-child(7)  { width: 8%;  }   /* Severity */
#tab-tracker .task-table.fit th:nth-child(8)  { width: 10%; }   /* Status */
#tab-tracker .task-table.fit th:nth-child(9)  { width: 13%; }   /* Notes */
#tab-tracker .task-table.fit .col-actions     { width: 8%;  }
#tab-tracker .task-table.fit td.col-actions   { white-space: normal; }
/* Below about 1250px the shares get too thin to read, so the table goes back
   to sizing itself and the panel scrolls sideways as it used to. */
@media (max-width: 1250px) {
  #tab-tracker .task-table.fit { width: auto; min-width: 100%; table-layout: auto; }
  #tab-tracker .task-table.fit th { white-space: nowrap; }
  #tab-tracker .task-table.fit td.task-title,
  #tab-tracker .task-table.fit td.task-notes,
  #tab-tracker .task-table.fit td.col-assignee { max-width: 240px; min-width: 130px; }
}

/* Last login */
.login-cell { font-size: 0.85rem; }

/* The main department is filled in; the rest are outlined. */
.dept-pill.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.dept-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.dept-checks .chk {
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; font-weight: 500; font-size: 0.88rem; cursor: pointer;
}
.dept-checks .chk:has(input:checked) { background: var(--navy); color: #fff; border-color: var(--navy); }

/* =========================================================================
   Case management
   ========================================================================= */
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .three-col { grid-template-columns: 1fr; } }

.case-pill {
  display: inline-block; border-radius: 999px; padding: 2px 10px;
  font-size: 0.74rem; font-weight: 700; white-space: nowrap;
}
.case-open             { background: var(--att-blue-bg); color: var(--att-blue); }
.case-in_progress      { background: var(--amber-bg); color: var(--amber); }
.case-pending_customer { background: var(--grey-bg); color: var(--muted); }
.case-resolved         { background: var(--green-bg); color: var(--green); }
.case-closed           { background: var(--grey-bg); color: var(--muted); }

.prio-pill {
  display: inline-block; border-radius: 4px; padding: 1px 9px;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.prio-critical { background: #fdecea; color: #96121f; border-color: #f0b3b8; }
.prio-high     { background: #fff1e0; color: #a35a06; border-color: #f3cf9e; }
.prio-medium   { background: var(--att-blue-bg); color: var(--att-blue); border-color: #b9d6f2; }
.prio-low      { background: var(--grey-bg); color: var(--muted); border-color: var(--border); }

.case-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); margin-right: 6px; vertical-align: middle;
  animation: casepulse 1.6s ease-in-out infinite;
}
@keyframes casepulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* The client details, filled in from the customer record rather than typed. */
.case-client-card {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin: 4px 0 14px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 18px;
}
.case-client-card .cc-item { font-size: 0.88rem; }
.case-client-card .cc-label {
  display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); font-weight: 700; margin-bottom: 2px;
}
.case-client-card .cc-empty { color: var(--muted); font-style: italic; }

.case-total-pill {
  display: inline-block; background: var(--navy); color: #fff; border-radius: 999px;
  padding: 2px 12px; font-size: 0.78rem; font-weight: 700; margin-left: 10px;
}
.detail-section {
  margin: 22px 0 8px; font-size: 0.95rem; color: var(--navy);
  border-top: 1px solid var(--border); padding-top: 16px;
}
.time-add-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px;
}
.time-add-row input, .time-add-row select { margin: 0; width: auto; min-width: 110px; }
.time-add-row input[type=text] { flex: 1 1 200px; min-width: 160px; }
.time-cell-input {
  margin: 0; padding: 4px 6px; font-size: 0.82rem; width: 86px;
}
/* The time grid lives inside a dialog, so it gets its own scroll rather than
   pushing the dialog wider than the screen. */
#case-time-section .table-wrap { max-width: 100%; }
#case-time-section .task-table.fit th,
#case-time-section .task-table.fit td { padding: 6px 8px; }
.dev-checks {
  display: flex; flex-direction: column; gap: 4px; max-height: 120px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--bg-alt);
}
.dev-checks label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.85rem; font-weight: 500; }
.dev-checks input { width: auto; }
.comment-add { display: flex; gap: 10px; align-items: flex-end; margin-top: 10px; }
.comment-add textarea { flex: 1; margin: 0; }
.comment-from-customer { border-left: 3px solid var(--orange); padding-left: 10px; }

/* =========================================================================
   Administration: SMTP settings and the activity log
   ========================================================================= */
.panel-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 22px;
}
.card-title { margin: 0 0 4px; font-size: 0.95rem; color: var(--navy); }
.mail-mode {
  display: inline-block; border-radius: 999px; padding: 2px 10px;
  font-size: 0.74rem; font-weight: 700;
}
.mail-mode.smtp { background: var(--green-bg); color: var(--green); }
.mail-mode.php-mail { background: var(--amber-bg); color: var(--amber); }
.mail-sent   { color: var(--green); font-weight: 600; }
.mail-failed { color: #b02a37; font-weight: 600; }

.act-kind {
  display: inline-block; border-radius: 4px; padding: 1px 8px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
.act-kind.staff    { background: var(--att-blue-bg); color: var(--att-blue); }
.act-kind.customer { background: #fff1e0; color: #a35a06; }
.act-status { font-weight: 700; font-size: 0.8rem; }
.act-status.ok  { color: var(--green); }
.act-status.bad { color: #b02a37; }
.act-detail {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.76rem; color: var(--muted);
}
.task-table.fit td.act-detail { white-space: normal; max-width: 420px; word-break: break-word; }

/* =========================================================================
   Customer portal accounts, on the customer dialog
   ========================================================================= */
.acct-state {
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
  font-size: 0.88rem; line-height: 1.5;
  background: var(--bg-alt); border: 1px solid var(--border);
}
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.acct-pill {
  display: inline-block; border-radius: 999px; padding: 1px 9px;
  font-size: 0.7rem; font-weight: 700; white-space: nowrap; margin-left: 6px;
}
.acct-active   { background: var(--green-bg); color: var(--green); }
.acct-invited  { background: var(--amber-bg); color: var(--amber); }
.acct-blocked  { background: #fdecea; color: #b02a37; }
.acct-none     { background: var(--grey-bg); color: var(--muted); }
.contact-row .k-acct { white-space: nowrap; }

/* =========================================================================
   Customer portal
   ========================================================================= */
.sla-bar {
  height: 8px; background: var(--grey-bg); border-radius: 999px;
  overflow: hidden; margin-top: 12px;
}
.sla-bar span { display: block; height: 100%; background: var(--navy); }
.plain-list { margin: 6px 0 0; padding-left: 20px; font-size: 0.9rem; }
.plain-list li { margin-bottom: 3px; }

/* The invitation page reuses the sign-in card. */
.invite-note {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; font-size: 0.85rem; color: var(--muted);
  text-align: left; margin-bottom: 14px; line-height: 1.5;
}

/* =========================================================================
   Administration: access rights
   -------------------------------------------------------------------------
   A grid of pages against departments, with a second view for giving one
   person their own settings. The three levels are always shown in the same
   colours - green for write, blue for view, grey for none - so a column can be
   read at a glance without reading every word in it.
   ========================================================================= */
.access-head-actions { display: flex; gap: 8px; align-items: center; }

.access-note {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-left: 3px solid var(--orange); border-radius: 8px;
  padding: 10px 14px; margin: 0 0 16px; font-size: 0.88rem;
  color: var(--muted); line-height: 1.55;
}
.access-note strong { color: var(--navy); }

.access-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.access-tab {
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 18px; font-weight: 600; font-size: 0.88rem; color: var(--muted);
}
.access-tab:hover { border-color: var(--navy); color: var(--navy); }
.access-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }

.access-legend {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--muted); margin-left: auto;
}
.access-legend .lvl-pill { margin-left: 8px; }
.access-legend .lvl-pill:first-child { margin-left: 0; }

.lvl-pill {
  display: inline-block; border-radius: 999px; padding: 2px 11px;
  font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.lvl-write { background: var(--green-bg); color: var(--green); }
.lvl-view  { background: var(--att-blue-bg, #e2ecfb); color: var(--att-blue, #1a5fb4); }
.lvl-none  { background: var(--grey-bg); color: var(--muted); }
.lvl-locked { background: #f3e8ff; color: #6b21a8; }

/* The grid itself. Fixed shares rather than content sizing, so every
   department column is the same width and the whole grid fits the page. */
.access-grid { width: 100%; min-width: 0; table-layout: fixed; }
.access-grid th, .access-grid td { padding: 8px 10px; white-space: normal; }
.access-grid th.acc-page-col { width: 26%; }
.access-grid td.acc-page {
  font-weight: 600; color: var(--ink); white-space: normal;
}
.access-grid td.acc-page .acc-page-key {
  display: block; font-weight: 500; font-size: 0.76rem; color: var(--muted);
}
.access-grid select {
  width: 100%; padding: 5px 8px; font-size: 0.84rem; margin: 0;
  border-radius: 6px;
}
/* The chosen level tints its own box, so a column of Nones is obvious. */
.access-grid select.is-write { background: var(--green-bg); border-color: #b6e2c4; color: var(--green); font-weight: 600; }
.access-grid select.is-view  { background: var(--att-blue-bg, #e2ecfb); border-color: #c3d8f4; color: var(--att-blue, #1a5fb4); font-weight: 600; }
.access-grid select.is-none  { background: var(--grey-bg); border-color: var(--border); color: var(--muted); font-weight: 600; }
.access-grid select.is-inherit { background: #fff; color: var(--muted); font-weight: 500; }
.access-grid tr.acc-changed td { background: #fffbe9; }

/* A heading row for each part of the menu bar, so the grid reads in the same
   order as the portal itself. */
.access-grid tr.acc-group td {
  background: var(--navy); color: #fff; font-weight: 700;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em;
  padding: 6px 10px; border-top: none;
}
.access-grid tr.acc-locked td { background: #faf7ff; }
.access-grid .acc-locked-note { font-size: 0.8rem; color: var(--muted); }

.acc-col-head { display: flex; flex-direction: column; gap: 4px; }
.acc-col-head .acc-set-all {
  background: rgba(255, 255, 255, 0.14); border: none; color: #fff;
  border-radius: 6px; padding: 2px 6px; font-size: 0.72rem; font-weight: 600;
  width: 100%;
}
.acc-col-head .acc-set-all:hover { background: rgba(255, 255, 255, 0.28); }

.access-person-note {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; margin: 0 0 14px; font-size: 0.88rem; color: var(--muted);
}
.access-person-note strong { color: var(--navy); }

@media (max-width: 1250px) {
  .access-grid { table-layout: auto; min-width: 860px; }
  .access-legend { margin-left: 0; }
}

/* A page somebody may look at but not change keeps everything on it and loses
   the buttons that would write. The API refuses those calls too - this is so
   nobody is invited to press something that will only fail. */
.view-only-note {
  background: var(--att-blue-bg, #e0edfb); border: 1px solid #c3d8f4;
  border-radius: 8px; padding: 9px 14px; margin: 0 0 16px;
  font-size: 0.87rem; color: var(--att-blue, #1b4f8a);
}
.tab-panel.view-only .btn-primary,
.tab-panel.view-only form button[type="submit"] { display: none !important; }
.tab-panel.view-only [data-act="edit"],
.tab-panel.view-only [data-act="del"],
.tab-panel.view-only [data-act="quick"],
.tab-panel.view-only [data-act="rem"] { display: none; }

/* =========================================================================
   INVOICING
   -------------------------------------------------------------------------
   The section has a menu of its own down the left. It is part of the panel
   rather than part of the bar at the top, and it is sticky, so it stays in
   view the whole time you are working anywhere inside Invoicing.
   ========================================================================= */
#tab-invoicing {
  --wide-w: min(calc(var(--vw, 100vw) - 48px), 1600px);
  width: var(--wide-w);
  max-width: none;
  margin-left: calc(566px - (var(--wide-w) / 2));
  margin-right: 0;
}
@media (max-width: 1180px) {
  #tab-invoicing { width: auto; margin-left: 0; margin-right: 0; }
}

.inv-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; align-items: start; }

.inv-side {
  position: sticky;
  top: 84px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 0 6px;
  overflow: hidden;
}
.inv-side-head { padding: 0 16px 12px; border-bottom: 1px solid var(--border); }
.inv-side-title { display: block; font-weight: 700; color: var(--navy); font-size: 1.02rem; }
.inv-side-sub { display: block; font-size: 0.76rem; color: var(--muted); text-transform: uppercase;
                letter-spacing: 0.06em; margin-top: 2px; }

.inv-menu { display: flex; flex-direction: column; padding: 8px 8px 4px; }
.inv-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; background: none; border: none;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--muted);
}
.inv-link:hover { background: var(--grey-bg); color: var(--navy); }
.inv-link.active { background: var(--navy); color: #fff; }
.inv-menu-sep { height: 1px; background: var(--border); margin: 8px 12px; }

.inv-pill {
  font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--grey-bg); color: var(--muted);
}
.inv-pill.warn, .inv-link .inv-pill { background: #fde2dc; color: #a3301a; }
.inv-link.active .inv-pill { background: rgba(255, 255, 255, 0.22); color: #fff; }

.inv-side-foot { padding: 12px 16px 10px; border-top: 1px solid var(--border); margin-top: 6px; }
.inv-foot-label { display: block; font-size: 0.74rem; text-transform: uppercase;
                  letter-spacing: 0.06em; color: var(--muted); }
.inv-foot-value { display: block; font-size: 1.15rem; font-weight: 700; color: var(--navy); }
.inv-foot-sub { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

.inv-body { min-width: 0; }
.inv-view > .panel-head { margin-top: 0; }

@media (max-width: 900px) {
  .inv-shell { grid-template-columns: 1fr; }
  .inv-side { position: static; }
  .inv-menu { flex-direction: row; flex-wrap: wrap; }
  .inv-link { width: auto; }
  .inv-menu-sep { display: none; }
}

/* ---- the state of a document, said in one word ---- */
.inv-state {
  display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 2px 9px;
  border-radius: 999px; white-space: nowrap;
}
.st-grey  { background: var(--grey-bg);  color: var(--muted); }
.st-blue  { background: #dde9f7;         color: #1c4c85; }
.st-green { background: var(--green-bg); color: var(--green); }
.st-amber { background: var(--amber-bg); color: var(--amber); }
.st-red   { background: #fde2dc;         color: #a3301a; }
td.inv-late { color: #a3301a; font-weight: 600; }

/* Figures line up on the right, where they can be compared down a column. */
.task-table th.num, .task-table td.num { text-align: right; white-space: nowrap; }

/* ---- the lines on a document ---- */
.modal-xwide { max-width: 1080px; }
.inv-items-wrap { box-shadow: none; }
.inv-items th { font-size: 0.76rem; }
.inv-items td { padding: 6px 8px; vertical-align: top; }
.inv-items input, .inv-items textarea { margin: 0; padding: 6px 8px; font-size: 0.88rem; }
.inv-items textarea { resize: vertical; min-height: 44px; }
.inv-items .il-qty, .inv-items .il-cost, .inv-items .il-vat { text-align: right; }
.inv-items td.col-drag { width: 1%; color: var(--muted); padding-top: 12px; }
.inv-items td.il-total { font-weight: 600; padding-top: 12px; }
.inv-items tr.is-section { background: var(--bg-alt); }
.inv-items tr.is-section .il-desc { font-weight: 700; color: var(--navy); }
.inv-items td.col-actions { white-space: nowrap; width: 1%; padding-top: 10px; }
.inv-item-btns { display: flex; gap: 8px; margin: 10px 0 4px; }

/* ---- terms on the left, figures on the right ---- */
.inv-foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; margin-top: 8px; }
@media (max-width: 820px) { .inv-foot-grid { grid-template-columns: 1fr; } }
.inv-totals-box {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; align-self: start;
}
.inv-total-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                 padding: 5px 0; font-size: 0.9rem; color: var(--muted); }
.inv-total-row strong { color: var(--ink); font-size: 0.95rem; }
.inv-total-row input { margin: 0; width: 120px; text-align: right; padding: 5px 8px; }
.inv-total-row.grand { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
.inv-total-row.grand span, .inv-total-row.grand strong { color: var(--navy); font-weight: 700;
                                                          font-size: 1.02rem; }
.inline-lbl { display: inline; margin: 0; font-weight: 600; color: var(--muted); font-size: 0.9rem; }

/* ---- Company Details ---- */
.wide-card-form { max-width: 980px; }
.inv-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px 22px; margin-bottom: 18px;
}
.inv-card h3 { margin: 0 0 6px; font-size: 1rem; }
.three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
@media (max-width: 760px) { .three-col { grid-template-columns: 1fr; } }
.inv-num-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 18px; }
.inv-num-cell .field-hint { margin-top: 4px; }
.inv-save-row { align-items: center; gap: 14px; }
.inv-saved { color: var(--green); font-weight: 600; font-size: 0.88rem; }

/* ---- the contact rows inside the invoicing customer dialog ---- */
.inv-contact-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
                   gap: 8px; align-items: center; margin-bottom: 8px; }
.inv-contact-row input { margin: 0; }

/* The row of links at the end of an invoicing row belongs on one line; left to
   wrap it turned every row into four. */
.inv-view .task-table th.col-actions,
.inv-view .task-table td.col-actions { white-space: nowrap; width: 1%; }
.inv-view .task-table td.col-actions .btn-link { padding: 0 5px; font-size: 0.82rem; }
.inv-view .task-table td { vertical-align: middle; }

/* The description is the column that holds prose, so it gets the room the
   figures do not need. The header always has all eight cells, which is why the
   widths are set there and not on the body rows - a section row has fewer. */
.inv-items th:nth-child(2) { width: 130px; }
.inv-items th:nth-child(3) { width: auto; }
.inv-items th:nth-child(4),
.inv-items th:nth-child(5),
.inv-items th:nth-child(6) { width: 96px; }
.inv-items th:nth-child(7) { width: 120px; }
.inv-items input, .inv-items textarea { width: 100%; }