/* SightWatch Responsibility Manager
   ------------------------------------------------------------------
   1. tokens        2. top bar (matches the SightWatch admin header)
   3. hero          4. add panel      5. org board
   6. dialogs       6b-6c. account    6d. activity log
   7. auth pages    8. responsive
*/

/* ---------- 1. tokens ---------- */
:root{
  --ink:#18212b; --muted:#647180; --line:#d7dee5; --paper:#f4f6f8; --surface:#fff;
  --navy:#17324f; --teal:#2f7d7d; --blue:#356b9a; --amber:#b26f2e; --violet:#79598e; --green:#477c5d;
  --bar:#141d2e; --bar-line:#28324a; --bar-dim:#93a1b5; --red:#e2543d;
  --shadow-sm:0 1px 3px rgba(24,33,43,.06),0 1px 2px rgba(24,33,43,.04);
  --shadow-md:0 8px 24px rgba(24,33,43,.08);
  --shadow-lg:0 16px 40px rgba(24,33,43,.1);
  --radius-sm:10px; --radius-md:14px; --radius-lg:18px;
  --ease:.2s ease;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:linear-gradient(180deg,#e9edf2 0%,var(--paper) 180px);
  color:var(--ink);
  font-family:Figtree,-apple-system,"Segoe UI",Arial,Helvetica,sans-serif;
}
button,input,select{font:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{
  outline:3px solid #77a9d5; outline-offset:2px;
}
button{
  border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); cursor:pointer;
  transition:background var(--ease),border-color var(--ease),box-shadow var(--ease),transform var(--ease),color var(--ease);
}
button:disabled{opacity:.5; cursor:not-allowed}
.primary{min-height:44px; padding:9px 16px; border-color:#fff; color:var(--navy); font-weight:700}
.section-label{
  display:block; margin:0 0 7px; color:var(--muted);
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}

/* ---------- 2. top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:74px; padding:12px max(3vw,20px);
  background:var(--bar); border-bottom:1px solid var(--bar-line);
}
.topbar .brand{display:block; line-height:0}
.topbar .logo{display:block; width:auto; height:38px}

.topnav{display:flex; align-items:center; gap:6px; margin-left:auto}
.topnav a{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border-radius:999px; color:var(--bar-dim); font-size:14px; font-weight:600; text-decoration:none;
}
.topnav a:hover,.topnav a:focus-visible{background:#1d2739; color:#e6ebf2; outline:none}
.topnav a[aria-current="page"]{background:#1d2739; color:#fff}

.profile{position:relative}
.menutrig{
  display:flex; align-items:center; gap:11px; padding:5px 12px 5px 5px;
  border:0; border-radius:999px; background:#1d2739; color:#e6ebf2; font-size:14px; cursor:pointer;
}
.menutrig:hover{background:#243049}
.menutrig b{font-weight:600}
.avatar{
  display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--red); color:#fff; font-size:13px; font-weight:700;
}
.avatar.lg{width:42px; height:42px; font-size:15px}
.chev{color:var(--bar-dim); transition:transform .15s}
.profile.open .chev{transform:rotate(180deg)}

/* the menu itself is a light card, per the reference UI */
.dropdown{position:absolute; top:100%; right:0; z-index:60; min-width:262px; padding-top:10px; display:none}
.profile.open .dropdown{display:block}
.dropdown .dd{
  padding:6px 0; border:1px solid #e4e8ee; border-radius:12px;
  background:#fff; box-shadow:0 20px 48px rgba(10,20,35,.22); overflow:hidden;
}
.dropdown .who{display:flex; align-items:center; gap:12px; padding:14px 16px}
.dropdown .who-text{min-width:0}
.dropdown .who-text b{display:block; color:var(--ink); font-size:15px; font-weight:700; line-height:1.35}
.dropdown .who-text span{
  display:block; color:var(--muted); font-size:13px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dropdown .sep{height:1px; margin:2px 0; background:#e9edf2}
.dropdown a{
  display:flex; align-items:center; gap:11px; padding:12px 16px;
  color:var(--muted); font-size:14.5px; text-decoration:none; white-space:nowrap;
}
.dropdown a svg{flex:none; color:currentColor}
.dropdown a:hover,.dropdown a:focus-visible{background:#f3f5f8; color:var(--ink); outline:none}
.dropdown a.danger{color:#e2543d; font-weight:600}
.dropdown a.danger:hover,.dropdown a.danger:focus-visible{background:#fdf0ed; color:#c8402b}

/* ---------- 3. hero ---------- */
main{width:min(1800px,100%); margin:auto; padding:32px clamp(16px,3vw,52px) 54px}
.hero{
  position:relative; overflow:hidden;
  margin-bottom:28px; padding:26px 26px 24px;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(47,125,125,.07) 0%, rgba(47,125,125,0) 55%),
    linear-gradient(180deg,#fff 0%,#fbfcfd 100%);
  box-shadow:var(--shadow-sm);
}
/* A rail in the department tones. It is the same colour vocabulary the board
   below uses, so it reads as "this page is about those departments" rather than
   as decoration for its own sake. */
.hero::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,
    var(--teal) 0%, var(--blue) 28%, var(--violet) 52%, var(--amber) 76%, var(--green) 100%);
}
.hero-row{display:flex; align-items:flex-start; justify-content:space-between; gap:28px}
.hero-head{min-width:0}
h1{margin:0; font-size:clamp(26px,3vw,34px); line-height:1.15; letter-spacing:-.03em; min-width:0}
.hero .section-label{margin:0 0 8px; color:var(--teal)}
.hero-sm{margin-bottom:20px; padding:22px 24px}
.back-link{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:11px;
  color:var(--muted); font-size:13px; font-weight:700; text-decoration:none;
}
.back-link:hover,.back-link:focus-visible{color:var(--blue); outline:none}
.hero-lede{max-width:70ch; margin:11px 0 0; color:var(--muted); font-size:14.5px; line-height:1.6}
.toggle-add-panel{
  min-height:42px; padding:9px 18px; border-radius:var(--radius-sm);
  border-color:var(--navy); background:var(--navy); color:#fff; font-weight:700; white-space:nowrap;
  box-shadow:0 4px 14px rgba(23,50,79,.22);
}
.toggle-add-panel:hover,.toggle-add-panel:focus-visible{
  transform:translateY(-1px); box-shadow:0 6px 18px rgba(23,50,79,.28);
}
.toggle-add-panel[aria-expanded="true"]{background:#fff; color:var(--navy); box-shadow:var(--shadow-sm)}
/* Three stat tiles. Each carries its tone as a left rule, so the numbers are
   scannable as a set and still colour-linked to the board. */
.hero-side{
  display:flex; flex-direction:column; align-items:flex-end; gap:14px; flex-shrink:0;
}
.hero-stats{
  /* Sized to their contents, not stretched — three tiles 440px wide holding one
     digit each read as a layout accident. In the row now, so no top rule. */
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin:0;
}
.hero-stats .stat{
  position:relative; flex:0 0 auto; min-width:118px; padding:11px 16px 11px 17px;
  border:1px solid var(--line); border-radius:var(--radius-md);
  background:linear-gradient(135deg,#f8fafc,#fff);
}
.hero-stats .stat::before{
  content:""; position:absolute; left:0; top:11px; bottom:11px; width:3px;
  border-radius:0 3px 3px 0; background:var(--tone,var(--navy));
}
.hero-stats dt{
  margin:0 0 4px; color:var(--muted);
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.hero-stats dd{
  margin:0; font-size:26px; line-height:1; font-weight:700;
  color:var(--navy); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.tone-navy{--tone:var(--navy)}

/* ---------- 4. add panel (admin only) ---------- */
.add-panel{
  /* start, not stretch: the Worker card is three rows tall and the Department
     card is one, and stretching left the short one mostly empty space. */
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start;
  padding:22px; border-radius:var(--radius-lg); background:var(--navy); color:#fff;
  margin-bottom:28px; box-shadow:var(--shadow-lg);
}
.add-panel.is-collapsed{display:none}
.add-panel .section-label{color:#aebed0}
.add-panel h2{margin:0; font-size:22px}
.action-heading{grid-column:1/-1}
.action-form{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(150px,.8fr) auto;
  gap:10px; align-items:end; padding:14px;
  border:1px solid #42617f; border-radius:12px; background:rgba(255,255,255,.05);
}
.action-form h3{grid-column:1/-1; margin:0; font-size:15px}
.responsibility-form{grid-column:1/-1}
.department-form{grid-template-columns:minmax(0,1fr) auto}
/* Six fields in two rows of three: name / department / phone, then
   email / shift start / shift end. The order in the markup is what produces
   that, so moving a field there moves it on screen. */
.worker-form{grid-template-columns:repeat(3,minmax(0,1fr))}
.worker-form .primary{grid-column:1/-1; justify-self:end; min-width:190px}
.add-panel label{display:grid; gap:7px; color:#cbd6e2; font-size:12px; font-weight:700}
.add-panel input,.add-panel select{
  width:100%; min-height:44px; padding:9px 11px;
  border:1px solid #55708b; border-radius:9px; background:#fff; color:var(--ink);
}

/* ---------- 5. org board ---------- */
.org-board{margin-top:8px}
/* Set in <head> when a department is remembered; removed by the script at the
   end of the page once that department is the visible one. Keeps the space,
   hides the content, so nothing jumps when it appears. */
.dept-pending .org-board{visibility:hidden}
.board-layout{
  display:grid; grid-template-columns:minmax(220px,280px) minmax(0,1fr);
  gap:24px; align-items:start;
}
.board-main{min-width:0}
.dept-sidebar{
  position:sticky; top:16px; padding:16px;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:#fff; box-shadow:var(--shadow-sm);
}
.sidebar-label{
  margin:0 0 12px; padding:0 4px; color:var(--muted);
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.dept-nav{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.dept-nav-item{
  --tone:var(--blue);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; color:var(--ink); font-size:14px; font-weight:600; text-align:left;
}
.dept-nav-item:hover,.dept-nav-item:focus-visible{
  background:#f7f9fb; border-color:color-mix(in srgb,var(--tone) 35%,var(--line)); outline:none;
}
.dept-nav-item.is-active{
  border-color:var(--tone); background:var(--tone); color:#fff;
  box-shadow:0 6px 20px color-mix(in srgb,var(--tone) 38%,transparent);
}
.dept-nav-item.is-active:hover,.dept-nav-item.is-active:focus-visible{
  background:color-mix(in srgb,var(--tone) 88%,#000); outline:none;
}
.dept-arrow{font-size:16px; line-height:1; opacity:.55; transition:transform var(--ease),opacity var(--ease)}
.dept-nav-item:hover .dept-arrow{opacity:.85; transform:translateX(2px)}
.dept-nav-item.is-active .dept-arrow{opacity:1; transform:translateX(0)}
.department.is-hidden{display:none}
.department-grid.single-view{grid-template-columns:1fr}
.department-grid.single-view .department:last-child{grid-column:auto}
.department-header small{
  display:block; margin:0 0 7px; color:var(--muted);
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.department-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.department{
  --tone:var(--blue); overflow:hidden; border:none;
  border-radius:var(--radius-lg); background:color-mix(in srgb,var(--tone) 5%,white);
  box-shadow:var(--shadow-md);
}
.tone-teal{--tone:var(--teal)} .tone-blue{--tone:var(--blue)} .tone-amber{--tone:var(--amber)}
.tone-violet{--tone:var(--violet)} .tone-green{--tone:var(--green)}
.department:last-child{grid-column:1/-1}
.department-header{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px 22px;
  background:linear-gradient(135deg,var(--tone),color-mix(in srgb,var(--tone) 82%,#0a1520));
  color:#fff;
}
.department-header small{margin:0 0 3px; color:rgba(255,255,255,.78); font-size:10px}
.department-header h2{margin:0; font-size:21px; letter-spacing:-.01em}
.count{
  display:grid; place-items:center; min-width:36px; height:30px; border-radius:999px;
  background:rgba(255,255,255,.2); font-size:13px; font-weight:700;
  backdrop-filter:blur(4px);
}
.employee-grid{display:grid; gap:14px; padding:16px}
.employee-grid.cols-1{grid-template-columns:minmax(0,1fr)}
.employee-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.employee-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.employee{
  container-type:inline-size; min-width:0; padding:14px;
  border:1px solid color-mix(in srgb,var(--tone) 22%,var(--line));
  border-radius:var(--radius-md); background:#fff; box-shadow:var(--shadow-sm);
  transition:box-shadow var(--ease),transform var(--ease),border-color var(--ease);
}
.employee:hover{box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:color-mix(in srgb,var(--tone) 35%,var(--line))}
.employee.drag-active{border-style:dashed; transform:none}
.employee.drag-active:hover,.employee.drag-over{border-color:var(--tone)}
.employee.drag-over{background:color-mix(in srgb,var(--tone) 4%,white)}
/* Where the dragged row will land: a rule in the card's tone between two rows
   (or alone in an empty card). It sits in the .tasks grid like a row, so the
   list visibly opens up rather than the line overlapping a neighbour. */
.drop-slot{
  height:4px; margin:-1px 0; border-radius:2px; background:var(--tone);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 16%,white);
}
/* Wraps rather than overflows: the name plus badge plus Rename/Delete does not
   fit a narrow card, and without this the buttons escaped the card's border. */
.employee-heading{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:8px 12px; padding-bottom:11px; border-bottom:1px solid #eef1f5; margin-bottom:11px;
}
.employee-heading h3{
  margin:0; min-width:0; color:var(--tone); font-size:16px; font-weight:700;
  overflow-wrap:anywhere;
}
.employee-heading .badge{
  display:grid; place-items:center; min-width:27px; height:24px; border-radius:999px;
  background:color-mix(in srgb,var(--tone) 12%,white); color:var(--tone); font-size:12px; font-weight:700;
}
.tasks{display:grid; gap:8px}
.task{
  display:grid; grid-template-columns:15px minmax(0,1fr); gap:7px; align-items:start;
  padding:10px; border:1px solid #e2e7ec; border-radius:var(--radius-sm); background:#fbfcfd;
  transition:border-color var(--ease),background var(--ease),box-shadow var(--ease);
}
.task:hover{border-color:color-mix(in srgb,var(--tone) 28%,var(--line)); background:#fff; box-shadow:var(--shadow-sm)}
.can-edit .task{cursor:grab}
.task.dragging{opacity:.4}
.handle{grid-column:1; grid-row:1/span 3; color:#97a3af; font-weight:700; letter-spacing:-3px}
.task-text{grid-column:2; grid-row:1; min-width:0; font-size:13px; line-height:1.35; overflow-wrap:break-word}
.task select{
  grid-column:2; grid-row:2; min-width:0; width:100%; padding:5px;
  border:1px solid var(--line); border-radius:7px; background:#fff; font-size:11px;
}
.task-actions{grid-column:2; grid-row:3; justify-content:flex-end; flex-wrap:wrap}
.move{padding:5px 7px; color:var(--tone); font-size:11px; font-weight:700}
.empty{
  margin:0; padding:22px 10px; border:1px dashed var(--line); border-radius:8px;
  color:var(--muted); font-size:12px; text-align:center;
}
.empty-department{
  grid-column:1/-1; margin:0; padding:28px 16px; border:1px dashed var(--line);
  border-radius:10px; color:var(--muted); text-align:center;
}
.header-actions,.item-actions,.task-actions{display:flex; align-items:center; flex-wrap:wrap; gap:6px}
.header-actions button,.item-actions button,.task-actions button{padding:5px 7px; font-size:11px; font-weight:700}
.header-actions button{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.12); color:#fff}
.item-actions button,.task-actions button{color:var(--tone)}
.item-actions .delete,.task-actions .delete{color:#a12626}
.header-actions .delete{background:rgba(70,12,12,.25)}
.status{margin:18px 0 0; color:var(--muted); font-size:13px; text-align:center}
.status:empty{margin:0}
.status.err{color:#a12626; font-weight:600}

/* ---------- 6. dialogs ---------- */
/* Flex, not grid: a percentage width inside a centred auto grid track resolves
   against content, so the panel grew past the viewport on phones. */
.editor-overlay{
  position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
  padding:18px; background:rgba(13,29,44,.58);
}
.editor-overlay.open{display:flex}
.editor-panel{
  width:min(520px,100%); max-height:calc(100vh - 36px); overflow:auto;
  padding:26px 26px 22px; border-radius:16px;
  background:#fff; box-shadow:0 22px 60px rgba(10,24,37,.28);
}
.editor-panel .section-label{margin:0 0 4px}
.editor-panel h2{margin:0 0 22px; font-size:24px; letter-spacing:-.02em; line-height:1.2; overflow-wrap:anywhere}
.editor-panel label{display:grid; gap:7px; color:var(--muted); font-size:13px; font-weight:700}
/* Fields stack with one rhythm: every field (or pair of fields) after the first
   gets the same gap. The nested labels inside .worker-pair are spaced by the
   pair's own grid gap, so only direct children are targeted here. */
.editor-panel > label,.editor-panel > .worker-pair{margin-top:16px}
.editor-panel h2 + label,.editor-panel h2 + .worker-pair{margin-top:0}
.editor-panel input{
  width:100%; min-width:0; min-height:46px; padding:10px 12px;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink);
  font-size:15px; line-height:1.3;
  transition:border-color var(--ease),box-shadow var(--ease);
}
.editor-panel input::placeholder{color:#9aa6b3}
.editor-panel input:hover{border-color:#b9c4d0}
.editor-panel input:focus-visible{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(53,107,154,.18);
}
/* Native time inputs ignore padding/height in WebKit unless appearance is
   reset; keep the digits tabular so start and end line up. */
.editor-panel input[type="time"]{-webkit-appearance:none; appearance:none; font-variant-numeric:tabular-nums}
.editor-panel input[type="time"]::-webkit-calendar-picker-indicator{cursor:pointer; opacity:.55}
.editor-panel input[type="time"]::-webkit-calendar-picker-indicator:hover{opacity:1}
.editor-panel input[type="time"]::-webkit-datetime-edit{padding:0}
.editor-actions{
  display:flex; justify-content:flex-end; gap:10px;
  margin-top:24px; padding-top:18px; border-top:1px solid #eef1f5;
}
.editor-actions button{min-height:44px; padding:9px 18px; border-radius:9px; font-weight:700}
.editor-actions button:hover{border-color:#b9c4d0; background:#f4f6f8}
.editor-actions .editor-save{border-color:var(--navy); background:var(--navy); color:#fff}
.editor-actions .editor-save:hover{border-color:#1f4268; background:#1f4268}
.editor-actions .confirm-delete{border-color:#a12626; background:#a12626; color:#fff}
.editor-actions .confirm-delete:hover{border-color:#8a1f1f; background:#8a1f1f}
.delete-message{margin:0; color:var(--muted); line-height:1.55}
@media (max-width:420px){
  .editor-panel{padding:22px 18px 18px}
  .editor-actions{flex-direction:column-reverse}
  .editor-actions button{width:100%}
}

/* ---------- 6b. account page ---------- */
.panel-grid{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:20px; align-items:start}
.panel{padding:22px; border:1px solid var(--line); border-radius:16px; background:#fff}
.panel h2{margin:0 0 18px; font-size:22px; letter-spacing:-.02em}
.panel label{display:grid; gap:7px; margin-bottom:14px; color:var(--muted); font-size:12px; font-weight:700}
.panel input,.panel select{
  width:100%; min-height:44px; padding:9px 12px;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink);
}
.panel .primary{width:100%; margin-top:4px; border-color:var(--navy); background:var(--navy); color:#fff}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}
.hint{margin:-6px 0 16px; color:var(--muted); font-size:13px; line-height:1.55}

.user-table{width:100%; border-collapse:collapse; font-size:14px}
.user-table th{
  padding:0 10px 9px; border-bottom:1px solid var(--line); color:var(--muted);
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-align:left;
}
.user-table td{padding:11px 10px; border-bottom:1px solid #eef1f5; vertical-align:middle}
.user-table tr:last-child td{border-bottom:0}
.user-table .name{color:var(--ink); font-weight:600}
.user-table .sub{color:var(--muted); font-size:13px}
.pill{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.pill.admin{background:rgba(226,84,61,.13); color:#c8402b}
.pill.viewer{background:rgba(53,107,154,.13); color:var(--blue)}
.you{margin-left:7px; color:var(--muted); font-size:12px; font-weight:600}
.row-actions{text-align:right; white-space:nowrap}

/* ---------- 6c. logins datatable ---------- */
.logins-panel{margin-top:20px}
.dt-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.dt-search{flex:1; max-width:320px; margin:0}
.dt-search input{
  width:100%; min-height:40px; padding:8px 12px;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-size:14px;
}
.dt-length{display:flex; align-items:center; gap:8px; margin:0; color:var(--muted); font-size:12px; font-weight:700}
.dt-length select{min-height:40px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:#fff}
.dt-scroll{overflow-x:auto}

.datatable .dt-sort{cursor:pointer; user-select:none; white-space:nowrap}
.datatable .dt-sort::after{
  content:'\2195'; margin-left:6px; opacity:.35; font-size:12px; letter-spacing:0;
}
.datatable .dt-sort[aria-sort="ascending"]::after{content:'\2191'; opacity:1}
.datatable .dt-sort[aria-sort="descending"]::after{content:'\2193'; opacity:1}
.datatable .dt-head-actions{text-align:right}
.datatable tr[hidden]{display:none}

.icon-btn{
  display:inline-grid; place-items:center; width:34px; height:34px; margin-left:6px; padding:0;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--blue); cursor:pointer;
}
.icon-btn:hover{border-color:var(--blue); background:rgba(53,107,154,.09)}
.icon-btn.danger{color:#a12626}
.icon-btn.danger:hover{border-color:#a12626; background:rgba(161,38,38,.09)}

.dt-empty{margin:18px 0 0; color:var(--muted); font-size:14px; text-align:center}
.dt-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line);
}
.dt-info{color:var(--muted); font-size:13px}
.dt-pager{display:flex; gap:5px}
.dt-pager button{
  min-width:32px; min-height:32px; padding:4px 8px;
  border:1px solid var(--line); border-radius:8px; background:#fff; font-size:13px; font-weight:700;
}
.dt-pager button.current{border-color:var(--navy); background:var(--navy); color:#fff}
.dt-pager button:disabled{color:#b6c0cc; cursor:default}

.dialog-field{display:grid; gap:7px; margin-top:16px}
.dialog-field select{
  width:100%; min-height:46px; padding:10px 12px;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink);
}
.notice{margin:0 0 18px; padding:11px 14px; border-radius:9px; font-size:14px; font-weight:600}
.notice.ok{background:#e9f4ee; color:#2c6b48}
.notice.err{background:#fbeaea; color:#a12626}

/* ---------- 6d. activity log ---------- */
.log-panel{padding-bottom:18px}
/* Six filters and the buttons on one row where there is room. The search box
   is the one that benefits from width, so it gets the flexible track. */
.log-filters{
  display:grid; grid-template-columns:minmax(180px,2fr) repeat(5,minmax(0,1fr)) auto;
  gap:12px; align-items:end; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.log-filters label{display:grid; gap:7px; margin:0; color:var(--muted); font-size:12px; font-weight:700}
.log-filters input,.log-filters select{
  width:100%; min-width:0; min-height:42px; padding:8px 11px;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-size:14px;
}
.log-filters input[type="date"]{-webkit-appearance:none; appearance:none}
.lf-actions{display:flex; align-items:center; gap:10px}
.lf-apply{min-height:42px; padding:8px 18px; border-color:var(--navy); background:var(--navy); color:#fff; font-weight:700}
.lf-apply:hover{border-color:#1f4268; background:#1f4268}
.lf-clear{color:var(--muted); font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap}
.lf-clear:hover,.lf-clear:focus-visible{color:var(--blue); outline:none}

.log-table{min-width:900px}
.log-table td{vertical-align:top}
.log-table .lt-when{width:120px; white-space:nowrap}
.log-table .lt-who{width:150px}
.log-table .lt-action{width:215px}
.log-table .lt-action .pill{white-space:nowrap}
.log-table .lt-what{width:26%}
.log-table .lt-what .sub{margin-top:2px}
.log-empty{margin:8px 0 0}

.pill.add{background:rgba(71,124,93,.14); color:#2c6b48}
.pill.edit{background:rgba(53,107,154,.13); color:var(--blue)}
.pill.delete{background:rgba(161,38,38,.11); color:#a12626}
.pill.auth{background:rgba(100,113,128,.13); color:var(--muted)}

/* Field-by-field before/after. Old value struck through in red, new value in
   green, the arrow between them; adds and deletes have only one side. Values
   keep their line breaks — a deleted department lists its workers one per line. */
.diff{display:grid; gap:6px; margin:0}
.diff-row{display:grid; grid-template-columns:minmax(80px,120px) minmax(0,1fr); gap:10px; align-items:start; font-size:13px}
.diff dt{margin:0; color:var(--muted); font-weight:700; line-height:1.5}
.diff dd{margin:0; min-width:0; line-height:1.5; overflow-wrap:anywhere}
.diff del,.diff ins{
  display:inline-block; max-width:100%; padding:1px 7px; border-radius:6px;
  text-decoration:none; white-space:pre-line; vertical-align:top;
}
.diff del{background:rgba(161,38,38,.09); color:#8a1f1f; text-decoration:line-through; text-decoration-color:rgba(138,31,31,.55)}
.diff ins{background:rgba(71,124,93,.13); color:#2c6b48; font-weight:600}
.diff i{font-style:italic; opacity:.75}
.diff-arrow{margin:0 6px; color:var(--muted)}
.diff-removed del{text-decoration:none}

.dt-pager a,.dt-pager span{
  display:inline-grid; place-items:center; min-width:32px; min-height:32px; padding:4px 8px;
  border:1px solid var(--line); border-radius:8px; background:#fff;
  color:var(--ink); font-size:13px; font-weight:700; text-decoration:none;
}
.dt-pager a:hover,.dt-pager a:focus-visible{border-color:var(--blue); background:rgba(53,107,154,.09); outline:none}
.dt-pager .current{border-color:var(--navy); background:var(--navy); color:#fff}
.dt-pager .disabled{color:#b6c0cc}
.dt-pager .gap{border-color:transparent; background:transparent; color:var(--muted)}

/* ---------- 7. auth pages ---------- */
.auth-body{
  display:grid; place-items:center; min-height:100vh; padding:32px 24px;
  background:#1b2434;
  background-image:radial-gradient(120% 85% at 50% 32%, #26314600 0%, #26314600 38%, #151d2a 100%);
}
.auth-shell{width:min(540px,100%)}
@media (max-width:560px){
  .auth-shell{width:min(392px,100%)}
}

.auth-brand{margin-bottom:28px; text-align:center}
.auth-logo{display:block; height:44px; margin:0 auto}
.auth-brand .module{
  display:block; margin-top:16px; color:#8b94a3;
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}
.auth-card{padding:32px 34px; border-radius:14px; background:#fff; box-shadow:0 24px 60px rgba(4,10,20,.34)}
.auth-title{margin:0 0 8px; font-size:23px; font-weight:700; letter-spacing:-.02em; line-height:1.25}
.auth-lede{margin:0 0 26px; color:#7c8798; font-size:14.5px; line-height:1.5}
.auth-card label{display:block; margin-bottom:18px; color:#2a3444; font-size:14px; font-weight:600}
.auth-card label span{display:block; margin-bottom:8px}
.auth-card input{
  width:100%; min-height:46px; padding:11px 14px; font-size:15px;
  border:1px solid #dfe4ee; border-radius:8px; background:#eef1f8; color:var(--ink);
}
.auth-card input::placeholder{color:#9aa3b2}
.auth-card input:focus{border-color:var(--red); background:#fff; outline:none}
.auth-card input:focus-visible{outline:none}
.auth-submit{
  width:100%; min-height:48px; margin-top:6px; padding:12px 16px;
  border:0; border-radius:8px; background:var(--red); color:#fff;
  font-size:15.5px; font-weight:600; text-align:center;
}
.auth-submit:hover{background:#cf4429}
a.auth-submit{display:block; text-decoration:none}
.auth-error{
  margin:0 0 18px; padding:11px 14px; border-radius:8px;
  background:#fdeceb; color:#c23520; font-size:14px; font-weight:600;
}
.auth-hint{margin:0 0 18px; color:#7c8798; font-size:14px; line-height:1.6}
.auth-foot{
  margin:26px 0 0; padding-top:18px; border-top:1px solid #e8ecf2;
  color:#8b94a3; font-size:13px; line-height:1.6;
}
.install-log{margin:0 0 20px; padding-left:20px; color:#7c8798; font-size:14px; line-height:1.8}

/* ---------- worker shift + contact ---------- */
.worker-meta{
  display:grid; gap:5px; margin:0 0 11px; padding:9px 11px; list-style:none;
  border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--tone) 6%,white);
  border:1px solid color-mix(in srgb,var(--tone) 14%,var(--line));
}
.worker-meta li{display:flex; align-items:baseline; gap:9px; min-width:0; font-size:12.5px}
.worker-meta .wm-k{
  flex:0 0 44px; color:var(--muted);
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.worker-meta .wm-v{
  min-width:0; color:var(--ink); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
a.wm-v{text-decoration:none}
a.wm-v:hover,a.wm-v:focus-visible{text-decoration:underline; color:var(--tone); outline:none}
.worker-meta .wm-shift .wm-v{color:var(--tone); font-variant-numeric:tabular-nums}
/* The day picker: real checkboxes laid over their own pill, so click, tap,
   Space and Tab all keep working and the label is the hit area. The pill
   carries the colour, which differs between the navy add panel and the white
   dialog, so only the shape is shared. */
.day-picker{grid-column:1/-1; min-width:0}
.dp-label{display:block; margin-bottom:7px; font-size:12px; font-weight:700}
.dp-days{display:flex; flex-wrap:wrap; gap:6px}
.dp-day{display:block; position:relative; margin:0; padding:0}
.dp-day input{
  position:absolute; inset:0; width:100%; height:100%; min-height:0;
  margin:0; padding:0; border:0; opacity:0; cursor:pointer;
}
.dp-day span{
  display:block; min-width:54px; padding:11px 10px; border:1px solid; border-radius:9px;
  font-size:12.5px; font-weight:700; line-height:1; text-align:center;
  transition:background var(--ease),border-color var(--ease),color var(--ease);
}
.add-panel .dp-label{color:#cbd6e2}
.add-panel .dp-day span{border-color:#55708b; background:rgba(255,255,255,.06); color:#e6edf4}
.add-panel .dp-day:hover span{background:rgba(255,255,255,.14)}
.add-panel .dp-day input:checked + span{border-color:#fff; background:#fff; color:var(--navy)}
.add-panel .dp-day input:focus-visible + span{outline:2px solid #fff; outline-offset:2px}
.editor-panel > .day-picker{margin-top:16px}
.editor-panel .dp-label{color:var(--muted); font-size:13px}
.editor-panel .dp-day span{border-color:var(--line); background:#fff; color:var(--muted)}
.editor-panel .dp-day:hover span{border-color:#b9c4d0}
.editor-panel .dp-day input:checked + span{border-color:var(--navy); background:var(--navy); color:#fff}
.editor-panel .dp-day input:focus-visible + span{
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(53,107,154,.18);
}
.worker-meta .wm-days .wm-v{color:var(--tone)}

/* Two times side by side in the dialog; one column when there is no room. */
.worker-panel .worker-pair{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:420px){ .worker-panel .worker-pair{grid-template-columns:1fr} }

/* ---------- 8. responsive ---------- */
@container (min-width:560px){
  .task{grid-template-columns:15px minmax(160px,1fr) minmax(120px,145px) auto; align-items:center}
  .handle,.task-text,.task select,.task-actions{grid-column:auto; grid-row:auto}
}
@media (max-width:560px){
  .menutrig b{display:none}
}
/* Three worker cards side by side stop working well below about 1200px — the
   card is then too narrow for a name and two buttons on one line. Drop to two,
   then to one at 680. */
@media (max-width:1200px){
  .employee-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Stack the hero before the text column gets squeezed. Side by side it needs
   roughly 500px for the title and lede plus 360px for the three tiles. */
@media (max-width:880px){
  .hero-row{align-items:flex-start; flex-direction:column}
  .hero-side{width:100%; align-items:stretch}
  .hero-stats{justify-content:flex-start}
  .hero-stats .stat{flex:1 1 118px}
}
@media (max-width:1100px){
  .log-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .log-filters .lf-q{grid-column:1/-1}
  .lf-actions{grid-column:1/-1; justify-content:flex-end}
}
@media (max-width:1000px){
  .panel-grid{grid-template-columns:1fr}
  /* The Worker card is still only half the panel here, so three columns leaves
     ~110px each and "Worker name or role" wraps onto two lines. Two columns
     until the panel itself stacks at 850. */
  .worker-form{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .board-layout{grid-template-columns:1fr}
  .dept-sidebar{position:static}
}
@media (max-width:850px){
  .add-panel{grid-template-columns:1fr}
  .action-heading,.responsibility-form{grid-column:auto}
  .action-form,.department-form,.worker-form{grid-template-columns:1fr 1fr}
  .action-form h3,.action-form .primary{grid-column:1/-1}
}
@media (max-width:680px){
  .log-filters{grid-template-columns:1fr 1fr}
  .dt-bottom{flex-direction:column; align-items:flex-start}
  main{padding-top:22px}
  .toggle-add-panel{width:100%}
  .action-form,.department-form,.worker-form,.department-grid{grid-template-columns:1fr}
  .action-form h3,.action-form .primary,.department:last-child{grid-column:auto}
  .worker-form .primary{grid-column:auto; justify-self:stretch}
  .employee-grid.cols-2,.employee-grid.cols-3{grid-template-columns:1fr}
  .department-header{align-items:flex-start; flex-direction:column}
  .header-actions{width:100%; flex-wrap:wrap}
  .item-actions,.task-actions{justify-content:flex-end}
}