/* Remote Opus HR portal — shared design system (matches the payslip brand) */
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Source+Sans+3:wght@400;500;600;700&display=swap");

:root {
  --green: #1A4731;
  --green-2: #0F2318;
  --green-soft: #E8F5EE;
  --rule: #2E7D52;
  --ink: #1f2933;
  --ink-2: #52514e;
  --muted: #898781;
  --line: #e7eaed;
  --line-soft: #eef1f3;
  --surface: #ffffff;
  --plane: #f6f8f7;
  --good: #0b7a3d;
  --bad: #c0392b;
  --warn: #e0a400;
  --shadow: 0 1px 2px rgba(16,32,24,.04), 0 4px 16px rgba(16,32,24,.05);
}
body.dark {
  --green-soft: #1e352b;
  --ink: #e7ebe9;
  --ink-2: #aeb6b2;
  --muted: #859089;
  --line: #29342e;
  --line-soft: #202a25;
  --surface: #18221d;
  --plane: #0f1613;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.35);
}
body.dark .st.active { background: #12281c; color: #5fd48a; }
body.dark .st.project { background: #16233a; color: #82b4ff; }
body.dark .st.other { background: #232b27; color: var(--ink-2); }
body.dark .lv-new { background: #16233a; color: #82b4ff; }
body.dark .lv-mid { background: #2c2510; color: #e2b45c; }
body.dark .lv-senior { background: #1e352b; color: #6ee7a8; }
body.dark input, body.dark textarea, body.dark select { background: #0f1613; color: var(--ink); border-color: var(--line); }
body.dark .bar2 .t, body.dark .bar-track, body.dark .bar-track { background: #222a27; }
.sidebar .foot .theme-toggle { width: 100%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: #cfe0d9; border-radius: 9px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sidebar .foot .theme-toggle:hover { background: rgba(255,255,255,.15); }
.sidebar .foot .punch-status { font-size: 11px; color: #cfe0d9; margin-bottom: 7px; font-weight: 600; }
.sidebar .foot .punch-sb { width: 100%; background: #fff; color: var(--green); border: none; border-radius: 9px;
  padding: 10px 12px; font-size: 13px; font-weight: 700; margin-bottom: 8px; cursor: pointer; }
.sidebar .foot .punch-sb.out { background: #f4c86b; color: #5a4300; }
/* Secondary next to Punch out: remote staff stop the clock when they step away. */
.sidebar .foot .punch-sb.pause { background: rgba(255,255,255,.10); color: #cfe0d9;
  border: 1px solid rgba(255,255,255,.18); font-size: 12.5px; padding: 8px 12px; }
.sidebar .foot .punch-sb.pause.paused { background: #f4c86b; color: #5a4300; border-color: transparent; }
.sidebar .foot .punch-sb:hover { filter: brightness(.95); }
/* Waiting out the 3-hour minimum: still visibly there, just not usable yet. A
   button that disappears reads as a broken portal instead of "not yet". */
.sidebar .foot .punch-sb:disabled { opacity: .55; cursor: default; filter: none; }
/* A failed punch stays on screen. The toast is gone in 2.6s, and a missed
   failure is exactly how a day ends with no punch-out on it. */
.sidebar .foot .punch-err { color: #ffd9d2; font-size: 10.5px; font-weight: 600; margin-top: 5px; line-height: 1.35; }
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
/* File inputs specifically must NOT use display:none (via [hidden] or this
   class) to stay invisible: Chrome opens the native file picker fine either
   way, but silently refuses to attach the chosen file(s) to an input that
   isn't actually in the render tree - the change/input events never carry
   any files, so nothing happens. This keeps it invisible without display:none. */
input[type="file"].file-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html, body { height: 100%; }
body {
  font-family: "Source Sans 3", system-ui, "Segoe UI", sans-serif;
  color: var(--ink); background: var(--plane); font-size: 14px; line-height: 1.45;
}
.serif { font-family: "DM Serif Display", Georgia, serif; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.sidebar { background: var(--green); color: #dfeae5; padding: 22px 16px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; }
.sidebar .brand { padding: 4px 8px 20px; }
.sidebar .brand .name { font-size: 21px; font-weight: 700; color: #fff; }
.sidebar .brand .tag { font-size: 11px; color: #9dc2b3; margin-top: 1px; }
.sidebar .user { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar .user .avatar { position: relative; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--green);
  font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; }
.sidebar .user .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sidebar .user .uname { color: #fff; font-weight: 600; font-size: 14px; line-height: 1.2; }
.sidebar .user .urole { color: #9dc2b3; font-size: 11px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px;
  color: #cfe0d9; font-weight: 500; font-size: 14px; transition: background .12s, color .12s; }
.nav a .ico { width: 18px; height: 18px; opacity: .85; }
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav a.active { background: #fff; color: var(--green); font-weight: 600; }
.nav a.active .ico { opacity: 1; }
.nav .soon { margin-left: auto; font-size: 9px; letter-spacing: .5px; text-transform: uppercase;
  color: #9dc2b3; border: 1px solid #3a6b58; border-radius: 20px; padding: 1px 6px; }
/* a message needs to go out but nothing's connected to send it - see layout.js */
.nav .navalert { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: #ff6b5e; flex: 0 0 auto; }
/* unread-changes count on a nav item (Core Team) - see core-notify.js */
.nav .navcount { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #ff6b5e; color: #fff;
  font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 1; }
.nav a.active .navcount { background: var(--bad); }
/* employee My Tasks: link card to the Core Team sheet (members only) - see applayout.js */
.core-banner { display: flex; align-items: center; gap: 12px; background: linear-gradient(120deg, var(--green-2), var(--green)); color: #fff;
  border-radius: 12px; padding: 11px 14px; margin-bottom: 14px; font-size: 13.5px; box-shadow: var(--shadow); }
.core-banner .ic { font-size: 18px; color: #7ee2a8; } .core-banner .tx { flex: 1; } .core-banner .tx b { font-weight: 700; }
.core-banner .warn { color: #ffb4a8; font-weight: 700; }
.core-banner .go { font-weight: 700; color: #cfe0d9; white-space: nowrap; }
.core-banner:hover .go { color: #fff; }
/* collapsible nav group (e.g. Team → Scorecards/Tasks/Attendance/…) */
.nav .group { display: flex; flex-direction: column; }
.nav .parent { display: flex; align-items: center; gap: 2px; }
.nav .parent > a { flex: 1; min-width: 0; }
.nav .twist { flex-shrink: 0; background: none; border: none; color: #9dc2b3; cursor: pointer;
  padding: 8px; border-radius: 8px; display: flex; align-items: center; }
.nav .twist:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav .twist svg { width: 13px; height: 13px; transition: transform .16s ease; }
.nav .group.open .twist svg { transform: rotate(90deg); }
.nav .children { display: flex; flex-direction: column; gap: 2px; margin: 3px 0 6px 21px;
  padding-left: 10px; border-left: 1px solid rgba(255,255,255,.13); }
.nav .group:not(.open) .children { display: none; }
.nav .children a { padding: 8px 11px; font-size: 13px; }
.nav .children a .ico { width: 16px; height: 16px; }
.nav .parent > a.branch { color: #fff; }
.sidebar .foot { margin-top: auto; padding-top: 16px; font-size: 11px; color: #82a99a; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 28px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 5; }
#topbar-actions { display: flex; gap: 8px; align-items: center; }
#topbar-actions select { width: auto; display: inline-block; padding: 7px 10px; font-size: 13px; }
.topbar h1 { font-size: 20px; font-weight: 700; }
.topbar .sub { color: var(--muted); font-size: 13px; margin-top: 1px; }
.content { padding: 24px 28px 60px; }

/* hamburger button that opens the sidebar as a drawer — hidden on desktop,
   shown by the mobile breakpoint below */
.menu-btn { display: none; align-items: center; justify-content: center; width: 38px; height: 38px;
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 9px; margin-right: 2px; }
.menu-btn svg { width: 19px; height: 19px; }
.menu-btn:hover { border-color: var(--rule); color: var(--green); }

/* ---------- mobile: sidebar becomes a drawer, spacing tightens, targets grow ---------- */
@media (max-width: 880px) {
  .layout { display: block; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 264px; max-width: 84vw; z-index: 70;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(10,16,13,.5); z-index: 65; }
  .menu-btn { display: inline-flex; }
  .topbar { padding: 12px 14px; flex-wrap: wrap; row-gap: 10px; }
  #topbar-actions { flex-wrap: wrap; }
  .content { padding: 14px 12px 40px; }
  .topbar h1 { font-size: 18px; }

  /* touch targets: bigger tap area, and 16px inputs so iOS doesn't zoom on focus */
  .btn { min-height: 42px; padding: 10px 16px; }
  .btn.sm { min-height: 36px; }
  .iconbtn { min-height: 34px; padding: 6px 10px; }
  input, textarea, select { font-size: 16px; padding: 10px 12px; }

  /* stat tiles: 2-up instead of cramming per the desktop minmax */
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tile { padding: 12px 13px; }
  .tile .v { font-size: 22px; }

  .tasks-cols { grid-template-columns: 1fr; }
  .podium { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- pieces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.card.pad { padding: 18px 20px; }
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); font-weight: 700; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 2px 10px; border-radius: 20px; background: var(--green-soft); color: var(--green); }
.pill.gray { background: #eef1f3; color: var(--ink-2); }
.pill.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px;
  border: 1px solid var(--green); background: var(--green); color: #fff; font-weight: 600; font-size: 14px; }
.btn:hover { background: var(--green-2); }
.btn.ghost { background: transparent; color: var(--green); }
.btn.ghost:hover { background: var(--green-soft); }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }

input, textarea, select { font-family: inherit; font-size: 14px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: #fff; width: 100%; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--green-soft); border-color: var(--rule); }
label { font-size: 12px; color: var(--ink-2); font-weight: 600; }

.grid { display: grid; gap: 16px; }
/* grid/flex items default to a content-based min-width, so a wide row (e.g. a
   button bar or table) inside a grid cell can silently push the whole page
   wider than the viewport instead of wrapping/scrolling in place. */
.grid > * { min-width: 0; }
/* wrap any data table in this so IT scrolls sideways on a narrow screen instead
   of forcing the whole page wider than the viewport */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.muted { color: var(--muted); }
.tabnum { font-variant-numeric: tabular-nums; }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; box-shadow: var(--shadow); }
.tile .k { font-size: 12px; color: var(--muted); font-weight: 600; }
.tile .v { font-size: 27px; font-weight: 700; margin-top: 4px; letter-spacing: -.3px; }
.tile .d { font-size: 12px; font-weight: 600; margin-top: 2px; }
.up { color: var(--good); } .down { color: var(--bad); } .flat { color: var(--muted); }

/* empty-state for stub pages */
.stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 80px 20px; color: var(--muted); }
.stub .big { font-size: 22px; color: var(--ink); font-weight: 700; }
.stub .badge { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--green);
  background: var(--green-soft); padding: 4px 12px; border-radius: 20px; font-weight: 700; }

/* must-change-password banner */
.mustchange { background: #fff8e6; border: 1px solid #f0dca0; color: #7a5b00; border-radius: 11px;
  padding: 11px 15px; font-size: 13.5px; font-weight: 500; margin-bottom: 18px; }
body.dark .mustchange { background: #2c2510; border-color: #4a3d12; color: #e2b45c; }
.mustchange a { color: var(--green); font-weight: 700; }
.imp-banner { display: flex; align-items: center; gap: 12px; background: #eaf1ff; border: 1px solid #b9ceff; color: #20437d;
  border-radius: 11px; padding: 10px 15px; font-size: 13.5px; font-weight: 500; margin-bottom: 18px; }
.imp-banner button { margin-left: auto; background: #20437d; color: #fff; border: none; border-radius: 8px; padding: 7px 13px; font-weight: 600; font-size: 13px; }
.imp-banner button:hover { background: #163258; }
body.dark .imp-banner { background: #16233a; border-color: #2a3f66; color: #a9c6ff; }
/* incomplete-profile nudge: for the EMPLOYEE, on their own portal, every page */
.profile-bar { display: flex; align-items: center; gap: 12px; background: #fdecea; border: 1px solid #f3c4bc; color: #7a231a;
  border-radius: 11px; padding: 10px 15px; font-size: 13.5px; font-weight: 500; margin-bottom: 18px; }
.profile-bar a { margin-left: auto; background: #c0392b; color: #fff; border: none; border-radius: 8px; padding: 7px 13px;
  font-weight: 600; font-size: 13px; white-space: nowrap; }
.profile-bar a:hover { background: #a5301f; }
body.dark .profile-bar { background: #3a1f1c; border-color: #5c342c; color: #f4a99c; }

/* priority + status chips */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; text-transform: capitalize; }
.chip.p-high { background: #fdecea; color: #c0392b; } .chip.p-normal { background: var(--green-soft); color: var(--green); } .chip.p-low { background: #eef1f3; color: var(--ink-2); }
.chip.s-todo { background: #eef1f3; color: var(--ink-2); } .chip.s-doing { background: #e7f0ff; color: #2563c9; } .chip.s-done { background: #e5f6ec; color: var(--good); }
body.dark .chip.p-high { background: #3a1f1c; } body.dark .chip.s-doing { background: #16233a; color: #82b4ff; } body.dark .chip.s-done { background: #12281c; color: #5fd48a; }
/* leave request status (prefixed "leave-", not "lv-" - that's already taken by the seniority chips above) */
.chip.leave-pending { background: #fff3d6; color: #8a6100; } .chip.leave-approved { background: #e5f6ec; color: var(--good); } .chip.leave-rejected { background: #fdecea; color: #c0392b; }
body.dark .chip.leave-pending { background: #2c2510; color: #e2b45c; } body.dark .chip.leave-approved { background: #12281c; color: #5fd48a; } body.dark .chip.leave-rejected { background: #3a1f1c; color: #f4a99c; }
.leave-card { margin-bottom: 12px; }
.leave-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.leave-dates { font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.leave-days { color: var(--muted); font-size: 12px; font-weight: 600; }
.leave-reason { color: var(--ink-2); font-size: 13px; margin-top: 8px; white-space: pre-wrap; }
.leave-note { color: var(--ink-2); font-size: 12.5px; margin-top: 8px; padding: 8px 10px; background: var(--plane); border-radius: 8px; }
.leave-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.leave-actions input { flex: 1 1 200px; }
.leave-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 12px; }
.leave-form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .leave-form-grid { grid-template-columns: 1fr; } }

/* task cards */
.tasks-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.tcol { background: var(--plane); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.tcol h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-bottom: 10px; display: flex; justify-content: space-between; }
.tcard { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; margin-bottom: 9px; box-shadow: var(--shadow); }
.tcard .tt { font-weight: 600; font-size: 14px; }
.tcard .tn { color: var(--muted); font-size: 12.5px; margin-top: 3px; white-space: pre-wrap; }
.tcard .tmeta { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.tcard .tmeta .due { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.tcard .tmeta .due.over { color: var(--bad); }
.tcard .acts { display: flex; gap: 6px; margin-left: auto; }
.iconbtn { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 8px; padding: 3px 8px; font-size: 12px; font-weight: 600; }
.iconbtn:hover { border-color: var(--rule); color: var(--green); }
.iconbtn.danger:hover { border-color: var(--bad); color: var(--bad); }

/* leaderboard podium */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; align-items: end; margin-bottom: 22px; }
.spot { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 14px; text-align: center; box-shadow: var(--shadow); }
.spot.first { border-color: #e7c66b; box-shadow: 0 8px 26px rgba(206,163,58,.22); }
.spot .medal { font-size: 26px; } .spot.first .medal { font-size: 34px; }
.spot .rk { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.spot .nm { font-weight: 700; font-size: 15px; margin-top: 6px; }
.spot .rl { color: var(--muted); font-size: 12px; }
.spot .sc { font-size: 26px; font-weight: 800; color: var(--green); margin-top: 8px; letter-spacing: -.5px; }
.spot .sc small { font-size: 12px; color: var(--muted); font-weight: 600; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid var(--line-soft); }
.rank-row .no { width: 26px; text-align: center; font-weight: 800; color: var(--muted); }
.rank-row .who { font-weight: 600; } .rank-row .who small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.rank-row .kp { margin-left: auto; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.rank-row .dl { font-size: 12px; font-weight: 700; width: 44px; text-align: right; }
.rank-row.me { background: var(--green-soft); border-radius: 10px; }

/* announcements / events feed */
.feed { display: grid; gap: 12px; }
.post { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; box-shadow: var(--shadow); }
.post.pinned { border-color: var(--rule); }
.post .ph { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; flex-wrap: wrap; }
.post .ph .type { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; padding: 2px 9px; border-radius: 20px; }
.post .ph .type.event { background: #e7f0ff; color: #2563c9; } .post .ph .type.announcement { background: var(--green-soft); color: var(--green); }
body.dark .post .ph .type.event { background: #16233a; color: #82b4ff; }
.post .ph .when { color: var(--muted); font-size: 12px; margin-left: auto; }
.post h3 { font-size: 16px; margin-bottom: 4px; }
.post .bd { color: var(--ink-2); font-size: 13.5px; white-space: pre-wrap; line-height: 1.55; }
.post .ev { margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--green); display: flex; gap: 14px; flex-wrap: wrap; }

/* toast */
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 13px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { background: var(--bad); }

/* ---- scrolling news ticker (employee portal) ---- */
.ticker { overflow: hidden; background: linear-gradient(120deg, var(--green-2), var(--green)); color: #fff;
  padding: 9px 0; position: sticky; top: 0; z-index: 60; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.ticker-track { display: flex; width: max-content; animation: roTick 30s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker .grp { display: flex; gap: 56px; padding-right: 56px; align-items: center; }
.ticker .it { font-size: 13px; white-space: nowrap; opacity: .95; }
.ticker .it b { font-weight: 800; }
.ticker .it a { color: #fff; text-decoration: underline; font-weight: 700; }
@keyframes roTick { to { transform: translateX(-50%); } }

/* ---- national ID card: number + front/back scans (admin editors + self-service) ---- */
.idc-row { display: flex; gap: 14px; flex-wrap: wrap; }
.idc-slot { flex: 1 1 210px; min-width: 190px; }
.idc-lab { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.idc-prev { position: relative; display: flex; align-items: center; justify-content: center; height: 120px;
  border: 1px dashed var(--line); border-radius: 10px; background: var(--green-soft); overflow: hidden;
  color: var(--muted); font-size: 11.5px; text-align: center; }
.idc-prev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.idc-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.idc-btns .lk { border: 1px solid var(--line); background: none; border-radius: 8px; padding: 5px 10px;
  font-weight: 600; font-size: 11.5px; color: var(--ink-2); cursor: pointer; }
.idc-btns .lk:hover { border-color: var(--green); color: var(--green); }
.idc-btns .rm { color: var(--bad); }
.idc-btns .rm:hover { border-color: var(--bad); color: var(--bad); }
.idc-hint { color: var(--muted); font-size: 11.5px; margin-top: 6px; }
input.idc-num { letter-spacing: .4px; font-variant-numeric: tabular-nums; }
/* read-only view (profile page) */
.idc-view { display: flex; gap: 12px; flex-wrap: wrap; }
.idc-view a { flex: 1 1 190px; min-width: 170px; display: block; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--green-soft); text-decoration: none; }
.idc-view img { display: block; width: 100%; height: 130px; object-fit: contain; background: var(--surface); }
.idc-view .cap { font-size: 11.5px; font-weight: 600; color: var(--ink-2); padding: 6px 9px; }
.idc-none { color: var(--muted); font-size: 12.5px; }

/* ---- Chat (company-wide group chat) ---- */
.content.chat-content { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
.chat-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow); overflow: hidden; }
@media (min-width: 761px) { .chat-shell { margin: 20px 28px; border-radius: 16px; } }
.chat-header { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); background: var(--surface); }
.chat-header .avstack { display: flex; }
.chat-header .avstack .av { width: 30px; height: 30px; border-radius: 50%; background: var(--green-soft); color: var(--green);
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface); margin-left: -10px; }
.chat-header .avstack .av:first-child { margin-left: 0; }
.chat-header .htitle { font-weight: 700; font-size: 15px; }
.chat-header .hsub { color: var(--muted); font-size: 12px; }
.chat-header .hsub .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--good); margin-right: 4px; }
.chat-header .hsub .dot.off { background: var(--muted); }
.chat-header .spacer { flex: 1; }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px;
  background: var(--plane); }
.chat-loadmore { align-self: center; margin-bottom: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); border-radius: 20px; padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer; }
.chat-loadmore:hover { border-color: var(--green); color: var(--green); }
.chat-empty { margin: auto; text-align: center; color: var(--muted); font-size: 13.5px; padding: 40px 20px; }
.chat-daysep { align-self: center; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; background: var(--line-soft); border-radius: 20px; padding: 3px 12px; margin: 12px 0 8px; }
.msg-row { display: flex; gap: 8px; max-width: 78%; margin-top: 2px; }
.msg-row.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg-row .msg-av { width: 26px; height: 26px; border-radius: 50%; background: var(--green-soft); color: var(--green);
  font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 2px; }
.msg-row.mine .msg-av { visibility: hidden; width: 0; }
.msg-col { display: flex; flex-direction: column; min-width: 0; }
.msg-row.mine .msg-col { align-items: flex-end; }
.msg-name { font-size: 11.5px; font-weight: 700; color: var(--green); margin: 6px 2px 2px; }
body.dark .msg-name { color: #6ee7a8; }
.msg-bubble { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
  padding: 8px 11px 6px; box-shadow: var(--shadow); max-width: 100%; }
.msg-row.mine .msg-bubble { background: var(--green-soft); border-color: var(--green-soft); border-radius: 14px 14px 4px 14px; }
.msg-text { font-size: 14px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.msg-text a { color: var(--green); }
.msg-deleted { font-size: 13px; color: var(--muted); font-style: italic; }
.msg-meta { display: flex; align-items: center; gap: 5px; justify-content: flex-end; margin-top: 2px; }
.msg-time { font-size: 10px; color: var(--muted); }
.msg-edited { font-size: 10px; color: var(--muted); font-style: italic; }
.msg-reply { border-left: 3px solid var(--green); background: rgba(0,0,0,.04); border-radius: 6px; padding: 4px 8px;
  margin-bottom: 5px; font-size: 12px; color: var(--ink-2); cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dark .msg-reply { background: rgba(255,255,255,.06); }
.msg-reply b { color: var(--green); }
body.dark .msg-reply b { color: #6ee7a8; }
.msg-media img { display: block; max-width: 260px; max-height: 260px; border-radius: 10px; object-fit: cover; cursor: pointer; }
.msg-media .msg-bubble { padding: 5px; }
.msg-call .msg-bubble { padding: 4px; }
.msg-call-card { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 9px 14px; border-radius: 11px;
  background: var(--green); color: #fff; min-width: 190px; }
.msg-call-card .ic { font-size: 20px; }
.msg-call-card b { display: block; font-size: 13.5px; }
.msg-call-card span { display: block; font-size: 11.5px; opacity: .85; }
.msg-reacts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.msg-react-pill { border: 1px solid var(--line); background: var(--surface); border-radius: 20px; padding: 1px 7px;
  font-size: 11.5px; cursor: pointer; display: flex; align-items: center; gap: 3px; }
.msg-react-pill.mine { border-color: var(--green); background: var(--green-soft); }
/* delivery ticks: grey while somebody still has not read it, blue once the
   whole room has. Only ever drawn on your own messages. */
.msg-ticks { border: none; background: none; padding: 0 0 0 4px; font-size: 11.5px; line-height: 1; color: var(--muted);
  letter-spacing: -3px; cursor: pointer; }
.msg-ticks.all { color: #2f9cf4; }
.msg-ticks:hover { opacity: .7; }
/* who read it / who reacted */
.msg-who { position: absolute; z-index: 6; bottom: 100%; margin-bottom: 4px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 8px 10px; min-width: 190px; max-width: 260px; font-size: 12px; }
.msg-row.mine .msg-who { right: 0; } .msg-row:not(.mine) .msg-who { left: 0; }
.msg-who h5 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 800; margin: 0 0 5px; }
.msg-who h5 + h5 { margin-top: 9px; }
.msg-who .who-p { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.msg-who .who-p img, .msg-who .who-p span.av { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--green-soft); color: var(--green); font-size: 9.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.msg-who .none { color: var(--muted); }
.msg-who .who-toggle { margin-top: 8px; width: 100%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: 8px; padding: 4px 8px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.msg-who .who-toggle:hover { border-color: var(--green); color: var(--green); }
.msg-col { position: relative; }
.msg-hover { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; margin-top: 3px; }
.msg-row:hover .msg-hover { opacity: 1; }
.msg-hover button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; width: 24px; height: 24px;
  font-size: 12px; cursor: pointer; color: var(--ink-2); }
.msg-hover button:hover { border-color: var(--green); color: var(--green); }
/* "someone is typing", with their face on it */
.chat-typing { flex: 0 0 auto; padding: 2px 18px 4px; font-size: 11.5px; color: var(--muted); min-height: 20px;
  display: flex; align-items: center; gap: 8px; }
.chat-typing:empty { padding: 0 18px; min-height: 8px; }
.chat-typing .faces { display: flex; }
.chat-typing .faces img, .chat-typing .faces span.av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--surface); margin-left: -7px; background: var(--green-soft); color: var(--green);
  font-size: 9.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.chat-typing .faces > :first-child { margin-left: 0; }
.chat-dots { display: inline-flex; gap: 3px; align-items: center; }
.chat-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); display: block; animation: chatbounce 1.2s infinite; }
.chat-dots i:nth-child(2) { animation-delay: .15s; } .chat-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes chatbounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-dots i { animation: none; opacity: .7; } }
.chat-callprompt { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--green-soft);
  border-top: 1px solid var(--line); padding: 10px 18px; font-size: 12.5px; color: var(--ink-2); }
.chat-callprompt input { flex: 1 1 220px; }
.chat-reply-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-top: 1px solid var(--line);
  background: var(--plane); font-size: 12.5px; }
.chat-reply-bar .rtext { flex: 1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-bar b { color: var(--green); }
.chat-composer { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line);
  background: var(--surface); position: relative; }
.chat-iconbtn { flex: 0 0 auto; border: none; background: none; font-size: 19px; width: 34px; height: 34px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.chat-iconbtn:hover { background: var(--green-soft); color: var(--green); }
.chat-composer textarea { flex: 1; resize: none; max-height: 110px; border-radius: 20px; padding: 8px 14px; font-size: 14px; }
.chat-send { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--green); color: #fff;
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-send:hover { background: var(--green-2); }
.chat-send:disabled { opacity: .5; cursor: default; }
.chat-panel { position: absolute; bottom: 58px; left: 14px; width: min(320px, calc(100% - 28px)); max-height: 320px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); z-index: 20;
  display: flex; flex-direction: column; overflow: hidden; }
.chat-panel .ptabs { display: flex; gap: 2px; padding: 6px 6px 0; flex: 0 0 auto; }
.chat-panel .ptabs button { flex: 1; border: none; background: none; padding: 6px; border-radius: 8px; font-size: 15px; cursor: pointer; }
.chat-panel .ptabs button.active { background: var(--green-soft); }
.chat-emoji-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 8px; overflow-y: auto; }
.chat-emoji-grid button { border: none; background: none; font-size: 19px; padding: 5px; border-radius: 8px; cursor: pointer; }
.chat-emoji-grid button:hover { background: var(--green-soft); }
.chat-gif-panel input { margin: 8px; width: calc(100% - 16px); }
.chat-gif-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0 8px 8px; overflow-y: auto; flex: 1; }
.chat-gif-grid img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; cursor: pointer; display: block; }
.chat-gif-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 12px; padding: 16px; }
.chat-quick-react { position: absolute; top: -30px; right: 0; display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 3px; box-shadow: var(--shadow); z-index: 5; }
.msg-row.mine .chat-quick-react { right: auto; left: 0; }
.chat-quick-react button { border: none; background: none; font-size: 16px; padding: 2px 4px; cursor: pointer; border-radius: 50%; }
.chat-quick-react button:hover { background: var(--green-soft); }
@media (max-width: 760px) {
  .msg-row { max-width: 88%; }
  .chat-header { padding: 12px 14px; }
}
/* The shared .layout only sets min-height:100vh (app.css:67), not height - as a
   CSS Grid with a single auto row, that lets the row grow PAST the viewport to
   fit tall content instead of clipping it, so .main (and everything inside it)
   ends up taller than the screen and the whole PAGE scrolls - the header and
   composer, both meant to sit outside chat-messages' own internal scroll, just
   scroll away with everything else. Below 880px .layout also switches to
   display:block for the sidebar drawer (app.css:126), which loses the
   grid-stretch height entirely. Both are fixed the same way: give the chat page
   a hard, unambiguous viewport-height flexbox in place of the grid, so
   min-height:0 all the way down actually caps .chat-shell and only
   .chat-messages scrolls - header and composer stay pinned at every width. */
body[data-page="chat"] .layout { display: flex; flex-direction: row; height: 100vh; height: 100dvh; }
body[data-page="chat"] .sidebar { flex: 0 0 232px; }
body[data-page="chat"] .main { flex: 1; min-height: 0; }
@media (max-width: 880px) {
  body[data-page="chat"] .chat-shell { margin: 0; border-radius: 0; border-width: 1px 0 0; }
}

/* "N waiting for your approval" - sits next to the page heading on every admin
   page. Deliberately loud: while it is showing, a warning or a fine has been
   raised against someone and is sitting there unseen by them. */
.hdralert {
  display: inline-block; vertical-align: middle; margin-left: 10px;
  background: var(--bad); color: #fff; text-decoration: none;
  font-size: 11.5px; font-weight: 700; line-height: 1;
  padding: 5px 10px; border-radius: 20px; white-space: nowrap;
}
.hdralert:hover { filter: brightness(1.08); }
@media (max-width: 640px) { .hdralert { display: block; margin: 6px 0 0; width: fit-content; } }