/* ==========================================================================
   app.css -- the single stylesheet for every HRIS page.
   Served at /app.css (hris/web/app.py) and linked from base.html. Edit the
   look of the whole app here; do not add <style> blocks to templates.

   CONTENTS
     1. Tokens        :root colour/space/type variables, dark-mode overrides
     2. Base          element defaults, layout shell, sidebar, forms, tables
     3. Components    buttons, badges, cards, theme widget, shared utilities
     4. Page sections each scoped by the <body> class set via {% block body_class %}:
        .page-tasks         My Tasks / My Team boards  (list, kanban, side panel)
        .page-me-dashboard  My Dashboard task summary card
   (Sections 1-3 are one continuous block below, in the original order.)
   ========================================================================== */

:root {
  --bg: #f7f7f8; --card: #ffffff; --border: #e2e2e6; --hover-bg: #fafafd;
  --text: #1c1c1f; --muted: #6b6b74; --accent: #2f5fd6; --accent-dark: #1f3f96;
  --danger: #c0392b; --ok: #1a7a3a; --ok-bg: #e3f5e9; --danger-bg: #f4e4e2;
  /* --accent-fg: ink ON --accent. The theme script recomputes it from the
     picked nav colour's luminance, so a light pick gets dark ink. --link
     exists because unstyled links fell back to UA #0000EE: 1.74:1 on the
     dark card. Every status colour keeps the --x / --x-bg pair shape so
     the dark theme can override both. */
  --accent-fg: #ffffff; --link: var(--accent);
  --warn: #8a6100; --warn-bg: #fff3cd; --warn-border: #f0e0a8;
  --info: #084298; --info-bg: #cfe2ff;
  --dot-good: #0ca30c; --dot-warning: #fab219; --dot-critical: #d03b3b; --dot-neutral: #898781;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
  --sidebar-w: 236px;
  --nav-bg: var(--accent-dark);
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
[data-theme="dark"] {
  --bg: #16171a; --card: #1e2024; --border: #2f3237; --hover-bg: #24262b;
  --text: #eceef0; --muted: #9a9ea6; --accent: #6d8ff5; --accent-dark: #2a3d80;
  --danger: #e5675a; --ok: #3ecb72;
  /* The -bg pairs used to be missing here, so badges kept light pastel
     grounds in dark mode: 1.85:1 and 2.65:1, now 6.80:1 and 4.68:1.
     White on the dark accent was 3.04:1; dark ink is 6.10:1. */
  --ok-bg: #12301f; --danger-bg: #3a1d1a; --accent-fg: #10131a;
  --warn: #f0c674; --warn-bg: #332a12; --warn-border: #4a3d1c;
  --info: #8fb6f5; --info-bg: #16233d;
  --dot-good: #3ecb72; --dot-warning: #f0c674; --dot-critical: #e5675a; --dot-neutral: #9a9ea6;
}
* { box-sizing: border-box; }
body { font-family: var(--font-family); background: var(--bg); color: var(--text); margin: 0; }

.app-shell { display: flex; align-items: stretch; min-height: 100vh; }

/* --- Left sidebar --- */
.sidebar {
  flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
  background: var(--nav-bg); color: white;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.sidebar .brand {
  font-weight: 700; font-size: 1.05rem; padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; gap: 0.6rem;
}
.sidebar .brand img { height: 1.9rem; max-width: 2.6rem; object-fit: contain; border-radius: 4px; }
.sidebar .brand .brand-name { overflow-wrap: anywhere; }
.nav-link .icon { display: inline-block; width: 1.4rem; text-align: center; margin-right: 0.3rem; }
.sidebar nav { flex: 1; padding: 0.75rem 0.75rem; }
.nav-group-label {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55); margin: 1.1rem 0.6rem 0.35rem;
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 0.35rem;
}
.nav-group-label::-webkit-details-marker { display: none; }
.nav-group-label::before { content: "▸"; display: inline-block; font-size: 0.6rem; color: rgba(255,255,255,0.4); transition: transform 0.15s ease; }
details.nav-group[open] > .nav-group-label::before { transform: rotate(90deg); }
.nav-group-label:hover { color: rgba(255,255,255,0.85); }
nav > details.nav-group:first-child > .nav-group-label { margin-top: 0.25rem; }
.nav-link {
  display: block; color: rgba(255,255,255,0.88); text-decoration: none; font-weight: 500;
  font-size: 0.92rem; padding: 0.5rem 0.6rem; border-radius: 7px; margin-bottom: 0.15rem;
}
.nav-link:hover { background: rgba(255,255,255,0.10); color: white; }
.nav-link.active { background: rgba(255,255,255,0.16); color: white; box-shadow: inset 3px 0 0 white; }

.sidebar-footer { padding: 0.9rem 1.1rem; border-top: 1px solid rgba(255,255,255,0.12); }
.sidebar-footer .user { font-size: 0.82rem; line-height: 1.35; margin-bottom: 0.6rem; }
.sidebar-footer .user a { color: inherit; text-decoration: none; font-weight: 600; }
.sidebar-footer .user a:hover { text-decoration: underline; }
.sidebar-footer .user a.account-link { font-weight: 400; font-size: 0.78rem; color: rgba(255,255,255,0.75); }
.sidebar-footer .user .role { color: rgba(255,255,255,0.6); font-size: 0.78rem; }
.sidebar-footer form.logout { margin: 0; }
.sidebar-footer form.logout button {
  width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.35); color: white;
  margin: 0; padding: 0.4rem 0.7rem; font-size: 0.82rem; font-weight: 500;
}
.sidebar-footer form.logout button:hover { background: rgba(255,255,255,0.12); }

/* --- Main column --- */
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main { max-width: 1080px; width: 100%; margin: 2rem auto; padding: 0 1.5rem; flex: 1; }

h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
h2 { font-size: 1.15rem; margin-top: 2rem; }
/* One raised sheet, three users; they differ only in padding/placement. */
.card, .stat-tile, #theme-widget-panel { background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.card { padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }
tr:hover td { background: var(--hover-bg); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Many-column entry grid (payroll run): fixed layout so every column
   fits the content width, header labels wrap instead of scrolling. */
.compact-grid { table-layout: fixed; min-width: 960px; }
.compact-grid th, .compact-grid td { padding: 0.45rem 0.25rem; vertical-align: middle; }
.compact-grid th { font-size: 0.68rem; text-transform: none; letter-spacing: 0; white-space: normal; overflow-wrap: normal; line-height: 1.2; vertical-align: bottom; }
.compact-grid th:nth-child(n+2) { text-align: right; }
.compact-grid th:first-child, .compact-grid td:first-child { width: 15%; padding-left: 0; }
.compact-grid th:nth-child(2), .compact-grid td:nth-child(2) { width: 10%; padding-right: 0.6rem; }
/* Only the four peso columns (De minimis onwards) are wide; the nine
   day/hour counts share the rest evenly. */
.compact-grid th:nth-child(n+12), .compact-grid td:nth-child(n+12) { width: 8%; }
.compact-grid .emp-no { display: block; font-size: 0.75rem; color: var(--muted); }
.scroll-x:has(.compact-grid) + button { margin-top: var(--space-4); }
.compact-grid input { padding: 0.3rem; font-size: 0.8rem; text-align: right; }
.compact-grid input[type=number] { -moz-appearance: textfield; }
.compact-grid input[type=number]::-webkit-outer-spin-button,
.compact-grid input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
form.inline { display: flex; gap: 0.5rem; }
.user-edit { margin-bottom: 0.4rem; }
.user-edit > summary { cursor: pointer; color: var(--link); }
.user-edit[open] { min-width: 16rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }
label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.2rem; }
a { color: var(--link); }
input, select { width: 100%; padding: 0.45rem 0.55rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; }
/* Fields had no colours of their own, so dark mode left them UA black-on-white. */
input:not([type=color]):not([type=checkbox]):not([type=radio]), select { background: var(--card); color: var(--text); }
button {
  background: var(--accent); color: var(--accent-fg); border: none; border-radius: 6px;
  padding: 0.55rem 1.1rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; margin-top: 1rem;
}
button:hover { background: var(--accent-dark); }
button.secondary { background: transparent; color: var(--danger); border: 1px solid var(--danger); padding: 0.3rem 0.7rem; margin: 0; }
.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge.inactive { background: var(--danger-bg); color: var(--danger); }
.badge.draft { background: var(--warn-bg); color: var(--warn); }
.badge.submitted { background: var(--info-bg); color: var(--info); }
.badge.active, .badge.finalized { background: var(--ok-bg); color: var(--ok); }
.muted, .form-box .row .label { color: var(--muted); font-size: 0.85rem; }
.payslip { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; padding: 0.5rem 0; }
.payslip .total { border-top: 1px solid var(--border); font-weight: 700; padding-top: 0.5rem; margin-top: 0.25rem; }
.payslip .net { color: var(--ok); font-size: 1.05rem; }
/* Section break (e.g. above SSS/NET PAY) — on both cells of the row so
   the label and its amount stay aligned. */
.payslip .sep { margin-top: 0.6rem; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-tile { padding: 1rem 1.25rem; }
.stat-tile .label { color: var(--muted); }
.stat-tile .value { font-size: 1.65rem; font-weight: 600; margin-top: 0.3rem; color: var(--text); }
.stat-tile .sub { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot.good { background: var(--dot-good); }
.dot.warning { background: var(--dot-warning); }
.dot.critical { background: var(--dot-critical); }
.dot.neutral { background: var(--dot-neutral); }
.chart-card table { margin-top: 1rem; font-size: 0.82rem; }
.section-title { font-size: 0.95rem; font-weight: 700; margin: 2rem 0 0.75rem; color: var(--text); }
.form-box { border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; }
.form-box .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 2rem; padding: 0.35rem 0; border-bottom: 1px dotted var(--border); }
.form-box .row .value { font-weight: 600; text-align: right; }
.form-box h3 { margin: 1.25rem 0 0.5rem; }
/* --- Utilities: the inline style= attributes that repeated across
   templates. Patterns used twice or more only; one-offs stay inline. --- */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.ml-3 { margin-left: var(--space-3); }
.m-0 { margin: 0; }
.pl-4 { padding-left: var(--space-4); }
.inline { display: inline; }
.hidden { display: none; }
.flex-1 { flex: 1; }
.scroll-x { overflow-x: auto; }
.text-danger { color: var(--danger); }
.text-ok { color: var(--ok); }
.text-warn { color: var(--warn); }
.border-danger { border-color: var(--danger); }
.label-caps, .stat-tile .label { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.02em; }
.subhead, .form-box h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
/* Filter/search bar: inputs and their button sitting on one baseline. */
.form-row { align-items: flex-end; gap: var(--space-3); }

@media print {
  :root {
    --bg: #f7f7f8 !important; --card: #ffffff !important; --text: #1c1c1f !important;
    --border: #e2e2e6 !important; --hover-bg: #fafafd !important;
    --accent: #2f5fd6 !important; --accent-dark: #1f3f96 !important; --nav-bg: #1f3f96 !important;
    --ok: #1a7a3a !important; --danger: #c0392b !important;
    --ok-bg: #e3f5e9 !important; --danger-bg: #f4e4e2 !important;
    --accent-fg: #ffffff !important;
    --link: #2f5fd6 !important;
    --warn: #8a6100 !important; --warn-bg: #fff3cd !important; --warn-border: #f0e0a8 !important;
    --info: #084298 !important; --info-bg: #cfe2ff !important;
    --dot-good: #0ca30c !important; --dot-warning: #fab219 !important;
    --dot-critical: #d03b3b !important; --dot-neutral: #898781 !important;
  }
  .sidebar, form, .no-print, #theme-widget { display: none !important; }
  .app-shell { display: block; }
  main { max-width: 100%; margin: 0; }
  body { background: white; }
}

@media (max-width: 760px) {
  .app-shell { flex-direction: column; }
  .sidebar { position: relative; height: auto; width: 100%; flex: 0 0 auto; }
  .sidebar nav { padding: 0.75rem 1rem; }
  .nav-group-label { margin: 0.5rem 0 0.15rem; }
  .nav-group-body { display: flex; flex-wrap: wrap; gap: 0.25rem; }
}

/* --- Display Settings widget (client-side only: localStorage, per-browser) --- */
#theme-widget { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 1000; }
/* A <button>, so colour, border and :hover come from the button rule. */
#theme-widget-toggle {
  width: 48px; height: 48px; border-radius: 50%; font-size: 1.25rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.28);
  display: flex; align-items: center; justify-content: center; padding: 0; margin: 0;
}
#theme-widget-panel { position: absolute; bottom: 60px; right: 0; width: 250px; box-shadow: 0 6px 24px rgba(0,0,0,0.22); padding: 1rem; }
#theme-widget-panel h4 { margin: 0 0 0.75rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
#theme-widget-panel .row { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; color: var(--text); margin-bottom: 0.65rem; gap: 0.5rem; }
#theme-widget-panel input[type=color] { width: 40px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
#theme-widget-panel select { width: auto; flex: 1; margin-left: 0.5rem; }
#theme-widget-panel input[type=checkbox] { width: auto; }
#theme-widget-panel .swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.65rem; }
.nav-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
.nav-swatch:hover { transform: scale(1.12); }
.nav-swatch.selected { border-color: var(--text); }
#theme-widget-reset {
  width: 100%; margin-top: 0.15rem; background: transparent; color: var(--muted);
  border: 1px solid var(--border); font-weight: 500; font-size: 0.78rem; padding: 0.4rem;
}
#theme-widget-reset:hover { background: var(--hover-bg); color: var(--text); }

/* ===== Page: tasks (me_tasks.html, me_team.html) ===== */
.page-tasks .tl-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.page-tasks .tl-head h1, .page-tasks .tl-head h2 { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); }
.page-tasks .tl-head .count { font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.page-tasks .tl-tools { display: flex; gap: var(--space-2); align-items: center; }
.page-tasks .tl-tools input[type=search] { width: 14rem; }
.page-tasks .tl-tools button { margin: 0; white-space: nowrap; }

.page-tasks .tl-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 0 var(--space-2) var(--space-3); }
.page-tasks table.tl { min-width: 680px; table-layout: fixed; border-collapse: collapse; }
.page-tasks table.tl th { background: transparent; border-bottom: 1px solid var(--border); font-size: 0.72rem; padding: 0.4rem 0.6rem; }
.page-tasks table.tl td { border-bottom: 1px solid var(--border); padding: 0 0.6rem; height: 2.4rem; vertical-align: middle; }
.page-tasks table.tl tr:hover td { background: var(--hover-bg); }
.page-tasks table.tl .c-name { width: auto; }
.page-tasks table.tl .c-who { width: 11rem; }
.page-tasks table.tl .c-date { width: 7.5rem; }
.page-tasks table.tl .c-pr { width: 7rem; }
.page-tasks table.tl .c-act { width: 2.5rem; }

/* Group header row: caret, solid status chip, count. */
.page-tasks tbody.grp tr.grp-head td { border-bottom: none; padding-top: var(--space-5); height: auto; background: transparent !important; }
.page-tasks .grp-caret { background: none; border: none; color: var(--muted); padding: 0 0.3rem 0 0; margin: 0; cursor: pointer; font-size: 0.8rem; transition: transform .15s; }
.page-tasks .grp-caret:hover { background: none; color: var(--text); }
.page-tasks tbody.grp.collapsed .grp-caret { transform: rotate(-90deg); }
.page-tasks tbody.grp.collapsed tr:not(.grp-head) { display: none; }
.page-tasks .chip { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--g); }
.page-tasks .grp-head .count { color: var(--muted); font-size: 0.8rem; margin-left: var(--space-2); }
.page-tasks .g-to-do { --g: var(--dot-neutral); }
.page-tasks .g-in-progress { --g: var(--accent); }
.page-tasks .g-stuck { --g: var(--dot-critical); }
.page-tasks .g-done { --g: var(--dot-good); }

/* In-place editing: text on screen, an invisible native control on top. */
.page-tasks .edit { position: relative; display: flex; align-items: center; gap: 0.35rem; min-height: 1.6rem; border-radius: 4px; }
.page-tasks .edit > select, .page-tasks .edit > input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: none; }
.page-tasks td:hover > .edit.can { outline: 1px solid var(--border); outline-offset: 2px; }
.page-tasks .faint { color: var(--muted); opacity: .55; }

.page-tasks .sq { flex: 0 0 auto; width: 0.8rem; height: 0.8rem; border-radius: 3px; background: var(--g); }
.page-tasks .edit.sq-wrap { flex: 0 0 auto; width: 1.1rem; justify-content: center; }
.page-tasks .name-cell { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.page-tasks .t-open { background: none; border: none; padding: 0; margin: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-tasks .t-open:hover { background: none; color: var(--link); text-decoration: underline; }
.page-tasks .tag { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.page-tasks tbody.g-done .t-open { color: var(--muted); text-decoration: line-through; }

.page-tasks .due-over { color: var(--danger); font-weight: 600; }
.page-tasks .due-soon { color: var(--warn); font-weight: 600; }
.page-tasks .flag { font-size: 0.95rem; line-height: 1; }
.page-tasks .p-urgent .flag { color: var(--dot-critical); }
.page-tasks .p-high .flag { color: var(--dot-warning); }
.page-tasks .p-normal .flag { color: var(--accent); }
.page-tasks .p-low .flag { color: var(--dot-neutral); }
.page-tasks .avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: 0.62rem; font-weight: 700; flex: 0 0 auto; }
.page-tasks .who { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.85rem; }

.page-tasks .row-menu { position: relative; opacity: 0; }
.page-tasks tr:hover .row-menu, .page-tasks .row-menu[open], .page-tasks .row-menu:focus-within { opacity: 1; }
.page-tasks .row-menu > summary { list-style: none; cursor: pointer; color: var(--muted); padding: 0 0.4rem; border-radius: 4px; font-weight: 700; }
.page-tasks .row-menu > summary::-webkit-details-marker { display: none; }
.page-tasks .row-menu > summary:hover { background: var(--border); color: var(--text); }
.page-tasks .row-menu .pop { position: absolute; right: 0; top: 1.6rem; z-index: 5; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 0.3rem; min-width: 8rem; }
.page-tasks .pop button { display: block; width: 100%; text-align: left; background: none; color: var(--text); margin: 0; padding: 0.4rem 0.6rem; border-radius: 5px; font-weight: 500; }
.page-tasks .pop button:hover { background: var(--hover-bg); }
.page-tasks .pop button.danger { color: var(--danger); }

.page-tasks tr.quick-add td { height: 2.2rem; }
.page-tasks tr.quick-add input { border: none; background: transparent !important; padding: 0.2rem 0 0.2rem 1.65rem; color: var(--text); }
.page-tasks tr.quick-add input::placeholder { color: var(--muted); }
.page-tasks tr.quick-add input:focus { outline: none; }
.page-tasks tr.quick-add:focus-within td { background: var(--hover-bg); }
.page-tasks .tl-empty td { color: var(--muted); font-size: 0.85rem; padding-left: 2.25rem; }

/* Side panel: a native <dialog> pinned to the right edge. */
.page-tasks dialog.panel { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(460px, 100vw); border: none; border-left: 1px solid var(--border); padding: 0; background: var(--card); color: var(--text); box-shadow: -8px 0 30px rgba(0,0,0,.15); }
.page-tasks dialog.panel::backdrop { background: rgba(15, 17, 22, .35); }
.page-tasks .panel-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.page-tasks .panel-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.page-tasks .panel-top h2 { margin: 0; font-size: 1.15rem; word-break: break-word; }
.page-tasks .panel .x { background: none; color: var(--muted); border: none; font-size: 1.2rem; margin: 0; padding: 0 0.3rem; }
.page-tasks .panel .x:hover { color: var(--text); background: none; }
.page-tasks .panel .title-in { font-size: 1.15rem; font-weight: 700; border: 1px solid transparent; padding: 0.3rem 0.4rem; margin-left: -0.4rem; }
.page-tasks .panel .title-in:hover, .page-tasks .panel .title-in:focus { border-color: var(--border); }
.page-tasks .fields { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--space-2) var(--space-3); align-items: center; }
.page-tasks .fields label { margin: 0; }
.page-tasks .panel textarea { width: 100%; min-height: 7rem; font: inherit; padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); box-sizing: border-box; resize: vertical; }
.page-tasks .panel input, .page-tasks .panel select { box-sizing: border-box; max-width: 100%; }
.page-tasks .panel .x:focus:not(:focus-visible) { outline: none; }
.page-tasks .panel .notes-ro { white-space: pre-wrap; margin: 0; }
.page-tasks .task-notes { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-3); font-size: 0.875rem; }
.page-tasks .task-notes .note-body { display: block; white-space: pre-line; }
.page-tasks .task-notes .auto { font-size: 0.75rem; }
.page-tasks .task-notes .auto .note-body { color: var(--muted); }
.page-tasks .note-replies { list-style: none; margin: var(--space-2) 0 0; padding: 0 0 0 var(--space-3); border-left: 2px solid var(--border); display: grid; gap: var(--space-2); }
.page-tasks .task-notes .link-btn { background: none; border: none; padding: 0; margin: var(--space-1) 0 0; color: var(--link); font-size: 0.8rem; cursor: pointer; }
.page-tasks .task-notes .link-btn:hover { text-decoration: underline; background: none; }
.page-tasks .task-notes .reply-box { min-height: 3rem; margin-top: var(--space-1); }
.page-tasks .note-add { display: grid; gap: var(--space-2); justify-items: end; }
.page-tasks .note-add textarea { min-height: 3.5rem; }
.page-tasks .tag-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.page-tasks .tag-list .x { padding: 0 0.25rem; }
.page-tasks .panel-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.page-tasks .panel-foot button { margin: 0; }

/* Task window: a large centred <dialog> (ClickUp-style), details left and
   activity right; full screen and stacked on phones. */
.page-tasks dialog.panel.task-window { margin: auto; width: min(1100px, calc(100vw - 2rem)); height: min(820px, calc(100vh - 2rem)); max-height: none; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,.25); }
.page-tasks .tw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.page-tasks .tw-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.page-tasks .tw-top .title-in { flex: 1; font-size: 1.4rem; }
.page-tasks .tw-top h2 { margin: 0; font-size: 1.4rem; word-break: break-word; }
.page-tasks .tw-main { overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.page-tasks .tw-main .fields { grid-template-columns: 6.5rem minmax(0, 1fr) 6.5rem minmax(0, 1fr); }
.page-tasks .tw-main .fields .tag-list { grid-column: 2 / -1; }
.page-tasks .tw-main .tw-desc { min-height: 12rem; }
.page-tasks .tw-side { overflow-y: auto; padding: var(--space-5); border-left: 1px solid var(--border); background: var(--bg); display: flex; flex-direction: column; gap: var(--space-3); }
.page-tasks .tw-side .fp-section { margin-top: 0; }
.page-tasks .att-head { display: flex; justify-content: space-between; align-items: center; }
.page-tasks .att-add { margin: 0; color: var(--link); font-size: 0.875rem; cursor: pointer; }
.page-tasks .att-add:hover { text-decoration: underline; }
.page-tasks .att-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-2); }
.page-tasks .att-list li { display: flex; align-items: center; gap: var(--space-2); border: 1px solid var(--border); border-radius: 8px; padding: var(--space-2); min-width: 0; }
.page-tasks .att-thumb { flex: none; width: 3rem; height: 3rem; border-radius: 6px; overflow: hidden; background: var(--bg); display: grid; place-items: center; }
.page-tasks .att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.page-tasks .att-ext { font-size: 0.7rem; font-weight: 700; color: var(--muted); }
.page-tasks .att-meta { flex: 1; min-width: 0; display: grid; font-size: 0.875rem; }
.page-tasks .att-meta a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .page-tasks dialog.panel.task-window { width: 100vw; height: 100dvh; max-width: 100vw; border-radius: 0; border: none; }
  .page-tasks .tw { display: block; overflow-y: auto; }
  .page-tasks .tw-main, .page-tasks .tw-side { overflow: visible; }
  .page-tasks .tw-main .fields { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .page-tasks .tw-side { border-left: none; border-top: 1px solid var(--border); }
}

.page-tasks table.tl .c-cf { width: 8.5rem; }
.page-tasks .cf-pill { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.1rem 0.5rem; border-radius: 4px; background: var(--info-bg); color: var(--info); font-size: 0.78rem; font-weight: 600; }
.page-tasks input.cf-input { border: 1px solid transparent; background: transparent; padding: 0.2rem 0.35rem; margin-left: -0.35rem; width: 100%; border-radius: 4px; font-size: 0.88rem; box-sizing: border-box; }
.page-tasks input.cf-input:hover, .page-tasks input.cf-input:focus { border-color: var(--border); }
.page-tasks .name-cell { position: relative; }
.page-tasks .drag-handle { position: absolute; left: -0.7rem; top: 50%; transform: translateY(-50%); width: 0.65rem; text-align: center; color: var(--muted); cursor: grab; font-size: 0.8rem; letter-spacing: -0.15em; opacity: 0; user-select: none; }
.page-tasks tr:hover .drag-handle { opacity: 1; }
.page-tasks tr.task-row.dragging td { opacity: .35; }
.page-tasks tbody.grp.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; }
.page-tasks tbody.grp.drop-target tr.grp-head td { background: var(--info-bg) !important; }
.page-tasks .fp-row { border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.page-tasks .fp-row .top { display: flex; gap: 0.5rem; align-items: center; }
.page-tasks .fp-row .type { font-size: 0.72rem; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0.1rem 0.4rem; white-space: nowrap; }
.page-tasks .fp-row .acts, .page-tasks .fp-add .acts { display: flex; justify-content: space-between; }
.page-tasks .fp-row button, .page-tasks .fp-add button { margin: 0; }
.page-tasks .fp-row textarea, .page-tasks .fp-add textarea { width: 100%; font: inherit; padding: 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); box-sizing: border-box; }
.page-tasks .fp-section { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; margin-top: 0.5rem; }
.page-tasks .tl-tools .ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.page-tasks .tl-tools .ghost:hover { background: var(--hover-bg); }

.page-tasks [data-pane][hidden] { display: none !important; }
/* List / Board toggle. */
.page-tasks .tl-view { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.page-tasks .tl-view button { background: transparent; color: var(--muted); border: none; border-radius: 0; padding: 0.35rem 0.7rem; font-weight: 600; }
.page-tasks .tl-view button:hover { background: var(--hover-bg); color: var(--text); }
.page-tasks .tl-view button[aria-pressed=true] { background: var(--hover-bg); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }

/* Kanban: one column per status, scrolls sideways when narrow. */
.page-tasks .kb { display: grid; grid-template-columns: repeat(4, minmax(15rem, 1fr)); gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); }
.page-tasks .kb-col { background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--g); border-radius: 10px; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); min-height: 8rem; }
.page-tasks .kb-col.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--info-bg); }
.page-tasks .kb-col-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.page-tasks .kb-col-head .count { color: var(--muted); font-size: 0.8rem; }
.page-tasks .kb-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }
.page-tasks .kb-card[draggable=true] { cursor: grab; }
.page-tasks .kb-card:hover { border-color: var(--muted); }
.page-tasks .kb-card.dragging { opacity: .35; }
.page-tasks .kb-card .t-open { white-space: normal; font-weight: 600; }
.page-tasks .g-done .kb-card .t-open { color: var(--muted); text-decoration: line-through; }
.page-tasks .kb-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.8rem; }
.page-tasks .kb-meta .who { margin-left: auto; }
.page-tasks .kb-pills { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.page-tasks .kb-empty { color: var(--muted); font-size: 0.85rem; }

/* ===== Page: my dashboard (me_dashboard.html) ===== */
.page-me-dashboard .ts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 0 0.75rem; }
.page-me-dashboard .ts-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.page-me-dashboard .ts-head h2 { margin: 0; font-size: 1.05rem; }
.page-me-dashboard .ts-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.page-me-dashboard .ts-count { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; }
.page-me-dashboard .ts-count .n { font-size: 1.4rem; font-weight: 600; line-height: 1.2; }
.page-me-dashboard .ts-count .l { font-size: 0.75rem; color: var(--muted); }
.page-me-dashboard .ts-count.over .n { color: var(--danger); }
.page-me-dashboard .ts-count.soon .n { color: var(--warn); }
.page-me-dashboard .ts-count.zero .n { color: var(--muted); }
.page-me-dashboard .ts-list { list-style: none; margin: 0; padding: 0; }
.page-me-dashboard .ts-list li + li { border-top: 1px solid var(--border); }
.page-me-dashboard .ts-list a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.2rem; color: var(--text); text-decoration: none; }
.page-me-dashboard .ts-list a:hover { background: var(--hover-bg); }
.page-me-dashboard .ts-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-me-dashboard .ts-status { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.page-me-dashboard .ts-due { font-size: 0.82rem; white-space: nowrap; }
.page-me-dashboard .ts-flag { font-size: 0.9rem; }
.page-me-dashboard .p-urgent .ts-flag { color: var(--dot-critical); }
.page-me-dashboard .p-high .ts-flag { color: var(--dot-warning); }
.page-me-dashboard .p-normal .ts-flag { color: var(--accent); }
.page-me-dashboard .p-low .ts-flag { color: var(--dot-neutral); }
.page-me-dashboard .ts-av { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: 0.62rem; font-weight: 700; flex: 0 0 auto; }
.page-me-dashboard .ts-list .due-over { color: var(--danger); font-weight: 600; }
.page-me-dashboard .ts-list .due-soon { color: var(--warn); font-weight: 600; }
@media (max-width: 520px) { .page-me-dashboard .ts-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-me-dashboard .ts-status { display: none; }
}