/* =========================================================
   CALOS - THE LUMA DESIGN SYSTEM V20.5
   ========================================================= */
:root { --bg: #fbfbfd; --surface: #ffffff; --text: #1d1d1f; --muted: #6b6b70; --accent: #0071e3; --border: rgba(0,0,0,0.06); --shadow-sm: 0 2px 8px rgba(0,0,0,0.04); --shadow-lg: 0 20px 40px rgba(0,0,0,0.12); --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; --spring: cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Task modal left panel — one shape/size system for every pill, chip and
       button in the sidebar (status, priority, task type, routing, schedule,
       flags, team/vendor). Previously each had its own radius (999px/12px/
       10px/8px/7px) and padding; picking one of each here and having every
       rule below reference it is the actual fix, not just a visual tweak. */
    --tk-radius: 8px; --tk-chip-pad: 7px 12px; --tk-chip-font: 11px;
    --tk-chip-border: #e5e7eb; --tk-card-border: #f0f0f5; --tk-card-radius: 10px;
}

/* ── Display / View-Only Mode ───────────────────────────────── */
.display-mode .fab-group { display: none !important; }
.display-mode .chat-fab, .display-mode .chat-fab-panel { display: none !important; }
.display-mode .display-hide { display: none !important; }
.display-mode .mobile-bottom-nav .mbn-fab { display: none !important; }
/* Display mode badge in header */
#display-mode-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: #0071e3; color: #fff;
    padding: 4px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .02em; cursor: default;
    white-space: nowrap;
}
#display-mode-badge i { font-size: 11px; }
#display-mode-badge .dmb-lbl { font-size: 11px; }
@media (max-width: 600px) { #display-mode-badge .dmb-lbl { display: none; } }
/* Prevent clicks on interactive edit elements in display mode */
.display-mode .tk-footer { pointer-events: none; opacity: .4; }
.display-mode input, .display-mode textarea, .display-mode select {
    pointer-events: none !important;
}
/* Allow navigation, team view, and filter controls */
.display-mode .task-mh-close,
.display-mode .m-head button,
.display-mode .pj-btn-close,
.display-mode .tk-tabs,
.display-mode .tk-tab,
.display-mode .pj-tab,
.display-mode .pj-tabs,
.display-mode .v-btn,
.display-mode .mbn-btn,
.display-mode #avail-user,
.display-mode [id^="team-view-"],
.display-mode .team-date-nav,
.display-mode .team-ws-pill,
.display-mode .db-sec-btn { pointer-events: auto !important; }
/* Task modal in display: readonly indicator */
.display-mode .m-box.task-box::after {
    content: 'View Only';
    position: absolute; top: 14px; right: 60px;
    background: #1c1c1e; color: #aeaeb2;
    font-size: 10px; font-weight: 700; padding: 3px 10px;
    border-radius: 10px; text-transform: uppercase; letter-spacing: .06em;
    pointer-events: none;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--text); overflow: hidden; height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }
::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 10px; }
i { font-size: inherit; line-height: 1; vertical-align: middle; }

.material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: inherit; vertical-align: middle; line-height: 1; }

/* Global Drag States */
body.is-dragging * { user-select: none; }
body.is-dragging .abs-task, body.is-dragging .t-card { pointer-events: none !important; }

/* Auth */
.auth-wrapper { display: flex; align-items: center; justify-content: center; height: 100vh; padding: 20px; }
.auth-card { background: var(--surface); padding: 40px; border-radius: 20px; box-shadow: var(--shadow-lg); width: 100%; max-width: 360px; text-align: center; border: 1px solid var(--border); transition: 0.3s; }
.auth-card input { width: 100%; padding: 14px; margin-bottom: 16px; border-radius: 10px; border: 1px solid var(--border); outline: none; font-size:16px; -webkit-appearance: none; background: #fafafa;}
.auth-card input:focus { border-color: var(--accent); background: #fff;}
.btn { width: 100%; padding: 10px 14px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; font-size:13px; transition:0.2s; display:inline-flex; justify-content:center; align-items:center; gap:6px; } .btn:hover { opacity: 0.9; }
.auth-toggle { font-size: 13px; color: var(--muted); margin-top: 20px; cursor: pointer; text-decoration: underline; }

/* Voice UI */
@keyframes pulse { 0% { opacity: 1; box-shadow: 0 0 0 rgba(255, 59, 48, 0.4); } 50% { opacity: 0.8; box-shadow: 0 0 10px rgba(255, 59, 48, 0.8); } 100% { opacity: 1; box-shadow: 0 0 0 rgba(255, 59, 48, 0.4); } }
.btn-mic { width: auto; background: #f5f5f7; color: var(--text); border: 1px solid var(--border); } .btn-mic:hover { background: #e8e8ed; }
.btn-mic.recording { background: #ff3b30 !important; color: #fff !important; animation: pulse 1.5s infinite; border-color: #ff3b30 !important; }

/* Top Bar Segmented Redesign */
.header { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: rgba(255,255,255,0.92); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); z-index: 200; position: relative; gap: 14px;}
.h-left { display: flex; align-items: center; flex: 0 0 auto; white-space: nowrap; gap:0;}
.logo { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; color: var(--text); margin-left: 12px; }
.top-clock { display: flex; flex-direction: column; justify-content: center; margin-left: 20px; padding-left: 20px; border-left: 1px solid var(--border); min-width: 110px; }
.tc-time { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.5px; line-height: 1; margin-bottom: 2px;}
.tc-date { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;}

/* Search — takes all available space between logo and right icons */
.search-wrap { position: relative; flex: 1; min-width: 0; max-width: 600px; display: flex; align-items: center;}
.header-search { background: rgba(0,0,0,0.05); border: 1.5px solid transparent; padding: 8px 16px 8px 38px; border-radius: 22px; font-size: 13px; outline: none; transition: all 0.2s; width: 100%; color: var(--text);}
.header-search:focus { background: #fff; border-color: rgba(0,113,227,.35); box-shadow: 0 0 0 3px rgba(0,113,227,0.10);}
.header-search:hover:not(:focus) { background: rgba(0,0,0,0.07); }
.search-icon { position: absolute; left: 13px; color: var(--muted); font-size: 13px; pointer-events: none; }

/* Mobile bottom nav — hidden on desktop */
.mobile-bottom-nav { display: none; }
.mobile-more-sheet, .mobile-more-backdrop { display: none; }
/* Task modal mobile top bar — hidden on desktop */
.task-mh { display: none; }
/* Mobile quick chips — hidden on desktop */
.task-chips-row { display: none; }
.tk-schedule-inline { display: none; }  /* mobile-only; shown via .open on mobile */
/* Search suggest sections */
.ss-section { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 7px 14px 2px; border-top: 1px solid #f0f0f5; }
.ss-section:first-child { border-top: none; }
.ss-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background .1s; }
.ss-item:hover, .ss-item:active { background: rgba(0,113,227,.06); }
.ss-item-icon { font-size: 16px; flex-shrink: 0; width: 22px; text-align: center; }
.ss-item-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ss-item-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-item-meta { font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* View nav — full-width tab bar below the header */
.sidebar-close-btn { display: none; }
.task-scope-bar { display: none; align-items: center; gap: 8px; background: var(--card-bg,#fff); border-bottom: 1px solid var(--border,#e5e7eb); padding: 7px 20px; flex-shrink: 0; z-index: 185; flex-wrap: wrap; }
.task-scope-bar .tsb-icon { color: var(--accent,#0071e3); font-size: 13px; display: inline-flex; }
.task-scope-bar .tsb-select { font-size: 13px; font-weight: 600; color: var(--text,#1e293b); background: var(--hover-bg,#f6f7f9); border: 1px solid var(--border,#e5e7eb); border-radius: 8px; padding: 5px 26px 5px 10px; cursor: pointer; max-width: 220px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.task-scope-bar .tsb-arrow { color: #94a3b8; font-size: 10px; }
.task-scope-bar .tsb-label { font-size: 12px; font-weight: 700; color: var(--muted,#6b7280); text-transform: uppercase; letter-spacing: .04em; }
.task-scope-bar .tsb-clear { background: transparent; border: 1px solid var(--border,#e5e7eb); color: var(--muted,#6b7280); cursor: pointer; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 7px; display: inline-flex; align-items: center; gap: 4px; }
.task-scope-bar .tsb-clear:hover { background: rgba(0,0,0,.06); color: var(--text,#1e293b); }
.task-scope-bar .tsb-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent,#0071e3); background: rgba(0,113,227,.1); border-radius: 6px; padding: 3px 7px; }
.view-nav { display: flex; align-items: center; background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 0 20px; height: 42px; z-index: 190; flex-shrink: 0; }
.view-segments { display: flex; gap: 2px; align-items: center; overflow-x: auto; flex: 1; scrollbar-width: none; }
.view-segments::-webkit-scrollbar { display: none; }
.v-btn { background: transparent; border: none; padding: 5px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all 0.2s; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.v-btn:hover { background: rgba(0,0,0,0.06); color: var(--text); }
.v-btn.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(0,113,227,.30); }
.v-btn.active i { opacity: 1; }
.v-btn i { font-size: 11px; opacity: 0.75; }

.h-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; justify-content: flex-end;}
.nav-date { font-size: 14px; font-weight: 600; min-width: 140px; text-align: center; white-space: nowrap; display:flex; align-items:center; gap:4px; justify-content:center; }
.nav-arrow { background: transparent; border: none; cursor: pointer; color: var(--muted); font-size: 14px; padding: 4px 8px; border-radius: 6px;} .nav-arrow:hover { background: rgba(0,0,0,0.05); color: var(--text);}
/* "Today" pill + clickable date label shared by the header nav and the in-view
   nav bars, so the header control matches the standardized in-view one. */
.nav-today-btn { background: rgba(0,113,227,.08); border: 1px solid rgba(0,113,227,.22); color: var(--accent); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.nav-today-btn:hover { background: rgba(0,113,227,.15); }
#lbl-date { cursor: pointer; padding: 3px 6px; border-radius: 6px; }
#lbl-date:hover { background: rgba(0,0,0,0.05); }
/* The Team view's inline date nav is a duplicate of the top-header navigator on
   desktop (which now drives the Team view), so hide it there; keep it on phones
   where the header navigator itself is hidden. */
/* Reusable mini calendar / schedule popover (date-nav jump + dashboard Start/End) */
.mini-cal-pop { position: fixed; z-index: 6300; width: 268px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: 10px; font-size: 13px; }
/* Schedule popup presented like all other popups: dimming backdrop, centred on
   desktop, bottom sheet on phones. */
.mc-backdrop { position: fixed; inset: 0; z-index: 10000050; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.32); animation: fadeIn .12s ease; }
.mc-backdrop .mini-cal-pop { position: relative; left: auto; top: auto; width: 300px; max-width: calc(100vw - 24px); max-height: 86vh; overflow-y: auto; animation: commsPop .14s ease; }
@media (max-width: 768px) {
    .mc-backdrop { align-items: flex-end; }
    .mc-backdrop .mini-cal-pop { width: 100%; max-width: 100%; border-radius: 18px 18px 0 0; max-height: 90vh; padding: 12px 12px calc(14px + env(safe-area-inset-bottom)); animation: commsSheetUp .22s cubic-bezier(.4,0,.2,1); }
}
.mini-cal-pop .mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mini-cal-pop .mc-title { font-weight: 700; font-size: 13px; color: var(--text); }
.mini-cal-pop .mc-nav { width: 28px; height: 28px; border: 1px solid var(--border); background: rgba(0,0,0,.03); border-radius: 8px; cursor: pointer; color: var(--text); font-size: 12px; }
.mini-cal-pop .mc-nav:hover { background: rgba(0,0,0,.07); }
.mini-cal-pop .mc-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 2px; }
.mini-cal-pop .mc-dow div { text-align: center; font-size: 10px; font-weight: 700; color: var(--muted); padding: 3px 0; }
.mini-cal-pop .mc-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.mini-cal-pop .mc-cell { height: 30px; }
.mini-cal-pop .mc-day { display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; color: var(--text); font-size: 12px; }
.mini-cal-pop .mc-day:hover { background: rgba(0,113,227,.12); }
.mini-cal-pop .mc-day.mc-today { box-shadow: inset 0 0 0 1.5px var(--accent); font-weight: 700; }
/* Planned range — translucent blue band, drawn through the whole span */
.mini-cal-pop .mc-day.mc-pl { background: rgba(0,113,227,.16); border-radius: 0; }
.mini-cal-pop .mc-day.mc-pl-s { border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
.mini-cal-pop .mc-day.mc-pl-e { border-top-right-radius: 9px; border-bottom-right-radius: 9px; }
.mini-cal-pop .mc-day.mc-pl-s, .mini-cal-pop .mc-day.mc-pl-e { font-weight: 800; color: #0071e3; }
.mini-cal-pop .mc-day.mc-due { box-shadow: inset 0 0 0 2px #f59e0b; color: #b45309; font-weight: 700; }
.mini-cal-pop .mc-fields { display: flex; gap: 6px; margin-top: 8px; }
.mini-cal-pop .mc-fld { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 4px 8px; cursor: pointer; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.mini-cal-pop .mc-fld span { font-size: 12px; color: var(--text); text-transform: none; }
.mini-cal-pop .mc-fld.on { border-color: var(--accent); background: rgba(0,113,227,.06); }
.mini-cal-pop .mc-times { display: flex; gap: 6px; margin-top: 6px; }
.mini-cal-pop .mc-times label { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.mini-cal-pop .mc-times input { border: 1px solid var(--border); border-radius: 8px; padding: 5px 7px; font-size: 12px; color: var(--text); background: #fff; }
.mini-cal-pop .mc-repeat { margin-top: 6px; }
.mini-cal-pop .mc-repeat label { display: flex; flex-direction: column; gap: 2px; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.mini-cal-pop .mc-repeat select { border: 1px solid var(--border); border-radius: 8px; padding: 5px 7px; font-size: 12px; color: var(--text); background: #fff; }
.mini-cal-pop .mc-fld-due.on { border-color: #f59e0b; background: rgba(245,158,11,.08); }
/* Keep the (tall) schedule popover fully reachable on short screens */
.mini-cal-pop { max-height: 88vh; overflow-y: auto; }
.mini-cal-pop .mc-fld { position: relative; padding-right: 16px; }
.mini-cal-pop .mc-fld-x { position: absolute; top: 3px; right: 4px; font-size: 12px; color: #c7c7cc; cursor: pointer; }
.mini-cal-pop .mc-fld-x:hover { color: #ef4444; }
.mini-cal-pop .mc-hint { font-weight: 500; color: #c7c7cc; text-transform: none; letter-spacing: 0; font-size: 8.5px; margin-left: auto; }
/* Actual (progress) dates + delay */
.mini-cal-pop .mc-seclbl { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 9px 0 4px; display: flex; align-items: center; gap: 6px; }
/* Actual range — translucent purple band that tints over the planned band */
.mini-cal-pop .mc-day.mc-ac { box-shadow: inset 0 0 0 40px rgba(124,58,237,.18); }
.mini-cal-pop .mc-day.mc-ac.mc-today { box-shadow: inset 0 0 0 40px rgba(124,58,237,.18), inset 0 0 0 1.5px var(--accent); }
.mini-cal-pop .mc-day.mc-ac-s:not(.mc-pl), .mini-cal-pop .mc-day.mc-ac-e:not(.mc-pl) { border-radius: 9px; }
.mini-cal-pop .mc-day.mc-ac-s, .mini-cal-pop .mc-day.mc-ac-e { font-weight: 800; color: #6d28d9; }
.mini-cal-pop .mc-fld-act.on { border-color: #7c3aed; background: rgba(124,58,237,.07); }
.mc-delay-chip { font-size: 9px; font-weight: 800; padding: 1px 7px; border-radius: 9px; text-transform: none; letter-spacing: 0; }
.mc-delay-chip.late { background: #fee2e2; color: #b91c1c; }
.mc-delay-chip.ontime { background: #dcfce7; color: #15803d; }
.mini-cal-pop .mc-actions { display: flex; gap: 6px; margin-top: 10px; }
.mini-cal-pop .mc-actions button { flex: 1; border: none; border-radius: 8px; padding: 7px; font-size: 12px; font-weight: 700; cursor: pointer; }
.mini-cal-pop .mc-save { background: var(--accent); color: #fff; }
.mini-cal-pop .mc-clear, .mini-cal-pop .mc-today-btn { background: rgba(0,0,0,.05); color: var(--text); }
.mini-cal-pop .mc-today-btn { background: rgba(0,113,227,.08); color: var(--accent); }
.team-inline-datenav { display: flex; }
@media (min-width: 769px) { .team-inline-datenav { display: none; } }
.nav-date.title-only .nav-arrow, .nav-date.title-only .nav-today-btn { display: none; }
.nav-date.title-only #lbl-date { cursor: default; }
.nav-date.title-only #lbl-date:hover { background: transparent; }

/* ── Standardized in-view calendar nav bar (Day/Week/Month/Year, Routines, Team).
   The top-header .nav-date is hidden on phones, so this bar carries navigation
   there; it also gives every view the same ‹ Today · label(tap to jump) · › row. */
.cal-navbar-slot { flex: 0 0 auto; }
.cal-navbar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: #fff; }
.cal-nav-arrow { background: rgba(0,0,0,.04); border: 1px solid var(--border); width: 32px; height: 32px; border-radius: 9px; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 auto; }
.cal-nav-arrow:hover { background: rgba(0,0,0,.08); }
.cal-nav-today { background: rgba(0,113,227,.08); border: 1px solid rgba(0,113,227,.22); color: var(--accent); font-size: 12px; font-weight: 700; padding: 0 12px; height: 32px; border-radius: 9px; cursor: pointer; flex: 0 0 auto; }
.cal-nav-today:hover { background: rgba(0,113,227,.16); }
.cal-nav-label { background: transparent; border: none; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; padding: 0 8px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; white-space: nowrap; min-width: 0; }
.cal-nav-label:hover { background: rgba(0,0,0,.05); }
/* Desktop: the header nav-date is visible, so the in-view bar is redundant there
   for the MAIN calendar — hide those slots. Team/Routines render their own bar. */
.cal-navbar-slot { display: none; }
@media (max-width: 768px) { .cal-navbar-slot { display: block; } }
.icon-btn { position: relative; background: transparent; border: none; cursor: pointer; color: var(--muted); font-size: 15px; padding: 6px; border-radius: 6px; transition: 0.2s; display:inline-flex; align-items:center;} .icon-btn:hover { background: rgba(0,0,0,0.05); color: var(--text);}
.menu-toggle { display: none; font-size: 20px; background: none; border: none; color: var(--text); cursor: pointer; margin-right: 8px; }

/* ── Notification Panel ─────────────────────────────────── */
.notif-badge { position:absolute;top:1px;right:1px;background:#ff3b30;color:#fff;border-radius:50%;font-size:8px;font-weight:700;width:15px;height:15px;display:flex;align-items:center;justify-content:center;pointer-events:none;border:2px solid var(--surface);display:none; }
#pending-uploads-btn.has-error { color:#ef4444; }
.notif-dropdown { position:fixed;top:0;right:0;bottom:0;background:var(--surface);width:380px;box-shadow:-12px 0 40px rgba(0,0,0,0.12);border-left:1px solid var(--border);z-index:1000;transform:translateX(100%);transition:transform 0.28s cubic-bezier(0.2,0.8,0.2,1);display:flex;flex-direction:column;text-align:left; }
.notif-dropdown.active { transform:translateX(0); }
.n-panel-head { padding:16px 16px 0;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface); }
.n-tab-group { display:flex;gap:0;margin-top:12px; }
.n-tab { font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;padding:9px 14px;background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:0.15s;white-space:nowrap; }
.n-tab.active { color:var(--accent);border-bottom-color:var(--accent); }
.n-tab:hover:not(.active) { color:var(--text); }
.n-list { flex:1;overflow-y:auto;padding:4px 10px 24px; }
.n-date-lbl { font-size:9px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:0.09em;padding:16px 4px 6px; }
/* Cards */
.n-card { display:flex;align-items:flex-start;gap:10px;padding:11px 10px;border-radius:12px;margin-bottom:1px;cursor:default;transition:background 0.12s;position:relative;border:1px solid transparent; }
.n-card:hover { background:var(--bg); }
.n-card.has-task { cursor:pointer; }
.n-card.unread { background:#f0f7ff;border-color:#dbeafe; }
.n-card.unread:hover { background:#dbeafe40; }
/* Avatar */
.n-avatar { width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;letter-spacing:0.02em;position:relative; }
.n-avatar-badge { position:absolute;bottom:-1px;right:-1px;width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:7px; }
/* Body */
.n-card-body { flex:1;min-width:0; }
.n-card-top { display:flex;align-items:baseline;gap:4px;margin-bottom:2px; }
.n-actor { font-size:12px;font-weight:700;color:#111827; }
.n-time { font-size:10px;color:#6b7280;margin-left:auto;white-space:nowrap;flex-shrink:0; }
.n-card-msg { font-size:12px;color:#4b5563;line-height:1.5; }
.n-task-link { font-weight:600;color:#1a1a1f;background:#f3f4f6;border-radius:3px;padding:0 3px; }
/* Type chip */
.n-type-chip { display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;padding:1px 6px;border-radius:10px;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.04em; }
/* Actions */
.n-pending-pill { display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;padding:3px 9px;border-radius:10px;margin-top:8px;text-transform:uppercase;letter-spacing:.05em;background:#fef2f2;color:#dc2626;border:1px solid #fecaca; }
.n-pending-pill i { color:#ef4444; animation:pulse 1.6s ease-in-out infinite; }
.n-actions { display:flex;gap:5px;margin-top:6px;flex-wrap:wrap;align-items:center; }
.n-btn { font-size:10px;font-weight:700;padding:5px 12px;border-radius:7px;cursor:pointer;border:1px solid;display:inline-flex;align-items:center;gap:4px;transition:0.12s; }
.n-btn:hover { opacity:0.85; }
.n-footer-row { display:flex;align-items:center;gap:8px;margin-top:6px; }
.n-open-btn { background:none;border:none;color:var(--accent);font-size:10px;font-weight:600;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:3px; }
.n-open-btn:hover { text-decoration:underline; }
/* Dismiss */
.n-dismiss { position:absolute;top:8px;right:8px;background:transparent;border:none;color:#d1d5db;cursor:pointer;padding:3px 5px;border-radius:5px;font-size:10px;display:none;line-height:1;transition:0.12s; }
.n-card:hover .n-dismiss { display:block; }
.n-dismiss:hover { background:rgba(0,0,0,0.06);color:#6b7280; }
/* Unread dot */
.n-unread-dot { width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:5px; }
/* Empty state */
.n-empty { text-align:center;padding:56px 24px 32px;color:var(--muted); }
.n-empty i { font-size:32px;display:block;margin-bottom:14px;opacity:0.18; }
.n-empty-title { font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px; }
.n-empty-sub { font-size:12px;color:var(--muted); }
/* Push status bar */
.n-push-bar { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 16px;background:var(--bg);border-top:1px solid var(--border);flex-shrink:0;min-height:38px; }
.npb-label { display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--muted); }
.npb-icon { font-size:12px; }
.npb-btn { font-size:11px;font-weight:700;padding:4px 10px;border-radius:7px;cursor:pointer;border:1px solid;display:inline-flex;align-items:center;gap:4px;transition:0.15s;white-space:nowrap; }
.npb-btn.npb-on { background:#f0fdf4;border-color:#86efac;color:#16a34a; }
.npb-btn.npb-on:hover { background:#dcfce7; }
.npb-btn.npb-off { background:#fef2f2;border-color:#fca5a5;color:#dc2626; }
.npb-btn.npb-off:hover { background:#fee2e2; }
.npb-link { font-size:11px;font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap; }
.npb-link:hover { text-decoration:underline; }

/* Sidebar Layout */
.main { display: flex; flex: 1; overflow: hidden; position: relative; }
.sidebar { width: 280px; min-width: 220px; max-width: 480px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 50; transition: transform 0.3s var(--spring); height: 100%; overflow: hidden; position: relative; }
/* Full-height custom drag handle — native CSS `resize` only grabs from a tiny bottom-right
   corner triangle, easy to miss on a tall sidebar. This gives a generous, obvious hit-area
   along the entire right edge instead. */
#sidebar-resize-handle { position:absolute; top:0; right:-3px; width:6px; height:100%; cursor:ew-resize; z-index:51; background:transparent; }
#sidebar-resize-handle:hover, #sidebar-resize-handle.dragging { background: rgba(0,113,227,0.18); }
#sidebar-resize-handle::after { content:''; position:absolute; right:2px; top:50%; transform:translateY(-50%); width:3px; height:36px; border-radius:3px; background:#d1d5db; transition:background .15s; }
#sidebar-resize-handle:hover::after, #sidebar-resize-handle.dragging::after { background:var(--accent); }
.mobile-overlay { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.2); z-index: 290; backdrop-filter: blur(2px); opacity: 0; transition: 0.3s; }
.mobile-overlay.active { display: block; opacity: 1; }

.ws-list { flex: 1; overflow-y: auto; min-height: 0; border-bottom: 1px solid var(--border); padding: 0 14px 16px;}
.h-add-task-btn { display:flex; align-items:center; justify-content:center; gap:7px; width:calc(100% - 20px); margin:8px 10px 2px; padding:10px; border:none; border-radius:10px; background:var(--accent,#0071e3); color:#fff; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 1px 3px rgba(0,113,227,.25); transition:filter .15s, transform .1s; }
.h-add-task-btn:hover { filter:brightness(1.05); }
.h-add-task-btn:active { transform:scale(.98); }
.h-filter-bar { display:flex; align-items:center; gap:5px; flex-wrap:wrap; padding:8px 10px; border-bottom:1px solid var(--border); flex-shrink:0; }
.h-filter-bar input { flex:1; border:1px solid var(--border); border-radius:8px; padding:6px 10px; font-size:11.5px; background:var(--bg); color:var(--text); outline:none; min-width:0; transition:border-color .15s, box-shadow .15s; }
.h-filter-bar input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,113,227,0.1); }
.h-filter-bar input::placeholder { color:var(--muted); }
.h-sort-btn { background:var(--bg); border:1px solid var(--border); border-radius:7px; cursor:pointer; padding:4px 8px; font-size:10.5px; color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:4px; flex-shrink:0; transition:0.15s; font-weight:500; }
.h-sort-btn:hover { background:rgba(0,113,227,0.06); border-color:rgba(0,113,227,.35); color:var(--accent); }
.h-sort-btn.active { background:rgba(0,113,227,0.1); border-color:var(--accent); color:var(--accent); font-weight:600; }
.h-item { padding: 7px 10px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500; display: flex; align-items: flex-start; justify-content: space-between; transition: background .15s, box-shadow .15s; margin-bottom: 1px; border-left: 3px solid transparent; box-sizing: border-box; }
.h-item:hover { background: rgba(0,0,0,0.035); }
.h-item.active {
    /* !important + a full inset accent border so the selection wins over a
       project row's own inline colour tint / left border. inset box-shadow
       draws the full border without shifting layout. */
    background: rgba(0,113,227,0.12) !important;
    color: var(--accent);
    box-shadow: inset 0 0 0 2px var(--accent);
    border-radius: 8px;
}
.h-item.active .h-item-name { color: var(--accent) !important; font-weight: 700; }
.h-item.dropz.over { background: rgba(0, 113, 227, 0.15) !important; border-left-color: var(--accent) !important; }
.h-item-txt { flex:1; min-width:0; display:flex; align-items:flex-start; gap:6px; }
.h-item-name { flex:1; min-width:0; white-space:normal; word-break:break-word; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; line-height:1.4; }
/* Hierarchy depth is now shown via a colored left-accent border (workspace/project/phase
   identity color, task priority color) instead of stacked background tints — the old
   same-hue-decreasing-opacity system made adjacent levels hard to tell apart. */
/* Clear, distinct size/weight step per depth so ws > project > phase > task is
   unmistakable at a glance, not just by indentation. */
.h-ws  { margin-top: 10px; border-radius: 4px; font-size: 13px; }
.h-proj { margin-left: 10px; padding-left: 15px; font-size: 12px; font-weight: 600; }
.h-phase { margin-left: 10px; padding-left: 27px; font-size: 11px; font-weight: 500; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; }
.n-badge { background: rgba(0,0,0,0.05); color: var(--muted); font-size: 9px; padding: 2px 6px; border-radius: 10px; font-weight: 700; flex-shrink:0; margin-top:2px; }

.h-task { margin-left: 10px; padding-left: 41px; font-size: 10.5px; font-weight: 400; }
.h-task .chk { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--muted); margin-right: 7px; flex-shrink:0;}

.h-actions { display:flex; gap:2px; opacity:0; transition:opacity 0.15s; flex-shrink:0; }
.h-item:hover .h-actions { opacity:1; }
/* Single ··· trigger button */
.h-more-btn { background:transparent; border:none; font-size:13px; cursor:pointer; color:var(--muted); padding:3px 6px; border-radius:6px; line-height:1; transition:0.15s; display:inline-flex; align-items:center; }
.h-more-btn:hover { color:var(--text); background:rgba(0,0,0,0.06); }
.action-btn { background:none; border:none; padding:3px 6px; border-radius:6px; cursor:pointer; color:var(--muted); font-size:11px; display:inline-flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
.action-btn:hover { background:#e8e8ed; color:var(--text); }
.h-eye-btn { background:transparent; border:none; cursor:pointer; padding:3px 5px; border-radius:6px; font-size:11px; flex-shrink:0; transition:background .15s; display:inline-flex; align-items:center; }
.h-eye-btn:hover { background:rgba(0,0,0,0.06); }
.h-eye-btn.on { color:#10b981; }
.h-eye-btn.off { color:#6b7280; }
/* Popover menu */
.h-pop { position:fixed; background:#fff; border:1px solid var(--border); border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,0.14); padding:4px; z-index:2000; min-width:150px; display:none; }
.h-pop.open { display:block; animation:fadeIn 0.12s; }
.h-pop-item { display:flex; align-items:center; gap:8px; padding:5px 10px; border-radius:5px; font-size:11px; font-weight:500; color:var(--text); cursor:pointer; white-space:nowrap; }
.h-pop-item:hover { background:rgba(0,113,227,0.07); color:var(--accent); }
.h-pop-item i { width:12px; text-align:center; color:var(--muted); font-size:10px; }
.h-pop-item:hover i { color:var(--accent); }
.h-pop-item.danger { color:#ff3b30; }
.h-pop-item.danger:hover { background:rgba(255,59,48,0.06); }
.h-pop-item.danger i { color:#ff3b30; }

/* Sort & Filter popover — one grouped panel instead of 3 separate header buttons.
   max-height/overflow here is a CSS-level baseline; toggleHPop() (app-interactions.js)
   also clamps this dynamically to whatever the viewport actually is and repositions
   the popover, since a fixed vh value alone can't account for where the trigger
   button sits on screen. */
#h-filter-pop { width:222px; padding:12px; max-height:calc(100vh - 16px); overflow-y:auto; }
.h-filter-pop-section { margin-bottom:11px; }
.h-filter-pop-section:last-child { margin-bottom:0; }
.h-filter-pop-label { font-size:9px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.h-filter-pop-pills { display:flex; flex-wrap:wrap; gap:5px; }
.h-filter-pill { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:4px 9px; font-size:10.5px; color:var(--muted); cursor:pointer; font-weight:500; transition:0.15s; }
.h-filter-pill:hover { background:rgba(0,113,227,0.06); border-color:rgba(0,113,227,.35); color:var(--accent); }
.h-filter-pill.active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
#h-filter-active-dot { display:none; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-left:1px; }
#h-filter-toggle-btn.active #h-filter-active-dot { background:#fff; }
/* Holding area date pills — same visual language as .h-filter-pill for consistency
   across the sidebar, just a touch smaller to fit the tighter header row. */
.hold-filter-pill { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:3px 8px; font-size:9.5px; font-weight:500; color:var(--muted); cursor:pointer; white-space:nowrap; transition:0.15s; line-height:1.5; font-family:inherit; }
.hold-filter-pill:hover { background:rgba(0,113,227,0.06); border-color:rgba(0,113,227,.35); color:var(--accent); }
.hold-filter-pill.active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }

/* Desktop 50/50 split */
.holding-zone { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); border-top: 1px solid var(--border); transition: all 0.2s; }
.holding-zone.collapsed { flex: 0 0 auto; min-height: 0; }
.holding-zone.collapsed .holding,
.holding-zone.collapsed .hold-filter-bar-row { display: none; }
.hold-filter-bar-row { display:flex; flex-wrap:wrap; gap:3px; padding:4px 10px 6px; border-bottom:1px solid #f0f0f5; }
.holding { overflow-y: auto; padding: 12px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.holding-zone-head:hover .h-zone-lbl { color:var(--text); }
.h-zone-lbl { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; display:flex; align-items:center; gap:6px; transition:color .15s; }
.h-zone-lbl i { font-size:11px; width:14px; text-align:center; }
/* Parked zone same as holding */
.parked-zone { flex-shrink: 0; background: var(--bg); border-top: 1px solid var(--border); transition: all 0.2s; display: flex; flex-direction: column; }
.parked-zone.hidden { display: none !important; }
.parked-zone-head:hover .h-zone-lbl { color:var(--text); }
.parked-zone-body { overflow-y:auto; max-height:200px; display:none; }
.parked-zone-body.open { display:block; }
.parked-card { padding:8px 14px; border-bottom:1px solid #f0f0f5; font-size:12px; cursor:pointer; }
.parked-card:hover { background:#f5f5f7; }
.parked-card.parked-rejected { border-left:3px solid #ff3b30; background:#fff5f5; }
.parked-card-title { font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.parked-card-meta  { font-size:10px; color:var(--muted); margin-top:2px; }
.parked-mine { border-left:3px solid #7950d0; }
/* Uniform sidebar section headers: Hierarchy / Holding Area / Parked & Rejected.
   All share label-left (.h-zone-lbl) + controls-right (.zone-head-right) layout. */
.zone-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px 6px; cursor:pointer; user-select:none; }
.ws-head { padding:14px 16px 6px; }
.ws-head:hover .h-zone-lbl { color:var(--text); }
.zone-head-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.ws-head-actions { display:flex; align-items:center; gap:2px; }
/* Disclosure chevron follows the finder/tree convention: right (▶) when collapsed,
   down (▼) when expanded. FontAwesome blocks CSS transforms on its glyphs, so we
   swap the chevron glyph by state instead of rotating it. */
.toggle-arrow { font-size:11px; color:var(--muted); flex-shrink:0; }
.toggle-arrow::before { content:"\f054" !important; }        /* collapsed → chevron-right */
.toggle-arrow.open::before { content:"\f078" !important; }   /* expanded → chevron-down */
/* Acceptance badges */
.acc-badge { display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:700; padding:2px 7px; border-radius:10px; margin-left:4px; }
.acc-badge.pending  { background:#f5f5f7; color:#636366; }
.acc-badge.accepted { background:#e8faf0; color:#1a7f3c; }
.acc-badge.rejected { background:#fff0f0; color:#ff3b30; }
.acc-badge.parked   { background:#f5f0ff; color:#7950d0; }
.acc-action-bar { display:flex; gap:8px; padding:8px 0 4px; flex-wrap:wrap; }
.acc-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:8px; font-size:12px; font-weight:600; border:none; cursor:pointer; transition:background .15s; }
.acc-btn.accept { background:#e8faf0; color:#1a7f3c; border:1px solid #b8edcc; }
.acc-btn.reject { background:#fff0f0; color:#ff3b30; border:1px solid #fecaca; }
.acc-btn.park   { background:#f5f0ff; color:#7950d0; border:1px solid #d4b9ff; }
/* Busy blocks — other users' time shown as muted stripe */
.busy-block { position:absolute; left:0; right:0; background:repeating-linear-gradient(-45deg,rgba(0,0,0,.04),rgba(0,0,0,.04) 3px,transparent 3px,transparent 8px); border-left:2px solid #e0e0e6; pointer-events:none; z-index:1; border-radius:3px; }
.busy-block-label { position:absolute; top:2px; left:6px; font-size:9px; font-weight:600; color:#aeaeb2; text-transform:uppercase; letter-spacing:.04em; }

/* Canvas */
.canvas { flex: 1; display: flex; flex-direction: column; position: relative; background: var(--surface); min-width: 0; }
.view { display: none; flex-direction: column; flex: 1; overflow: hidden; height: 100%; } .view.active { display: flex; animation: fadeIn 0.3s var(--spring); }
.scroll-container { display: flex; flex-direction: column; flex: 1; overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.completed-filter-bar { display:flex; align-items:center; justify-content:space-between; padding:10px 20px; background:#fff; border-bottom:1px solid #f0f0f5; flex-shrink:0; gap:10px; flex-wrap:wrap; }
.comp-filter-sel { border:1px solid #e9ecef; border-radius:8px; padding:5px 10px; font-size:12px; font-family:inherit; outline:none; color:#111827; background:#fff; -webkit-appearance:none; cursor:pointer; }
.comp-group-btn { padding:4px 12px; border-radius:8px; border:1px solid #e9ecef; background:#fff; font-size:11px; font-weight:600; color:#6b7280; cursor:pointer; transition:all .15s; }
.comp-group-btn.active { background:#111827; color:#fff; border-color:#111827; }
.comp-ws-section { margin-bottom:20px; }
.comp-ws-head { font-size:15px; font-weight:800; color:#111827; padding:8px 0 6px; border-bottom:2px solid #e5e7eb; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.comp-proj-section { margin-bottom:14px; padding-left:12px; border-left:3px solid var(--ws-accent,#0071e3); }
.comp-proj-head { font-size:13px; font-weight:700; color:#374151; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.comp-phase-section { margin-bottom:10px; padding-left:10px; }
.comp-phase-head { font-size:10px; font-weight:800; color:#6b7280; text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; }
.comp-period-head { font-size:10px; font-weight:700; color:#6b7280; padding:4px 0; border-bottom:1px solid #f3f4f6; margin-bottom:4px; display:flex; align-items:center; gap:5px; }
.comp-task-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; cursor:pointer; transition:background .12s; }
.comp-task-row:hover { background:#f9fafb; }
.comp-task-check { width:16px; height:16px; border-radius:50%; background:#22c55e; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.comp-task-check i { color:#fff; font-size:8px; }
.comp-task-name { flex:1; font-size:12px; text-decoration:line-through; color:#6b7280; }
.comp-task-date { font-size:10px; color:#d1d5db; flex-shrink:0; }
.grid-wrap { display: flex; flex-direction: column; flex: 1; min-width: 600px; height: 100%; position: relative;}

/* Old dashboard CSS removed — see redesigned section below */

/* KANBAN VIEW */
.k-board { display: flex; height: 100%; gap: 16px; padding: 24px; background: var(--bg); overflow-x: auto; align-items: stretch; }
.k-col { flex: 1; min-width: 280px; background: rgba(0,0,0,0.02); border-radius: 12px; display: flex; flex-direction: column; border: 1px solid var(--border); transition:0.2s; max-height: 100%; overflow: hidden;} .k-col.over { background: rgba(0,113,227,0.05); border-color:var(--accent);}
.k-head { padding: 16px; font-weight: 600; font-size: 13px; color: var(--text); border-bottom: 1px solid var(--border); display:flex; justify-content:space-between;}
.k-body { padding: 12px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }

/* Workflow Board — 9 stage columns. Reuses .k-board/.k-col/.k-head from the
   Status board above, but those were tuned for 4-5 short labels ("To Do",
   "Done"): .k-col's own min-width:280px fought the grid's minmax(230px,1fr)
   track sizing (a flex-context min-width leaking into this grid context),
   and .k-head's single-row "label + badge + chevron" layout squeezed a long
   stage name like "Quality Assurance & Snagging" against the count badge
   with nowhere to wrap cleanly. This block gives the label its own row. */
#k-board-workflow .k-col { min-width: 0; }
#k-board-workflow .k-head.wf-head { flex-wrap: wrap; align-items: center; row-gap: 6px; column-gap: 8px; padding: 12px 14px; }
#k-board-workflow .wf-head-label { flex: 1 1 100%; font-size: 12px; font-weight: 700; line-height: 1.35; }
#k-board-workflow .k-head.wf-head .n-badge { margin-top: 0; }
/* Board view period filter pills */
.kb-period-btn {
    padding: 5px 13px; border: none; border-radius: 7px;
    font-size: 11px; font-weight: 600; cursor: pointer;
    background: transparent; color: var(--muted);
    transition: background .15s, color .15s; white-space: nowrap;
}
.kb-period-btn:hover { background: rgba(0,0,0,.07); color: var(--text); }
.kb-period-btn.active { background: #0071e3; color: #fff; }

/* NATIVE 24 HOUR GRIDS */
.grid-head { display: flex; margin-left: 60px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 150;}
.g-h-cell { flex: 1; display:flex; flex-direction:column; justify-content:center; align-items:center; padding: 12px 4px; border-right: 1px solid var(--border); gap: 4px; min-width: 0;}
.g-h-day { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 100%;}
.g-h-date { font-size: 24px; font-weight: 500; color: var(--text); line-height: 1; }
.g-h-cell.today .g-h-day { color: var(--accent); }
.g-h-cell.today .g-h-date { color: var(--accent); font-weight: 700; }
.g-h-cell.selected-day { background: rgba(0,113,227,0.06); border-radius: 8px; }
.g-h-cell.selected-day .g-h-day { color: #0071e3; }
.g-h-cell.selected-day .g-h-date { color: #0071e3; font-weight: 800; }

.allday-zone { margin-left: 60px; border-bottom: 1px solid var(--border); display: flex; background: #fafafa; min-height: 40px; position: sticky; top: 58px; z-index: 140;}
.ad-cell { flex: 1; padding: 4px; border-right: 1px solid var(--border); min-height: 40px; transition: 0.2s; display: flex; flex-direction: row; overflow-x: auto; gap: 4px; align-items: flex-start;}
.ad-cell.over { background: rgba(0,113,227,0.08); }
.extra-zone { margin-left: 60px; border-bottom: 1px solid var(--border); background: #fff; }
.extra-zone-hd { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; background: #fafafa; cursor: pointer; user-select: none; }
.extra-zone-hd .ez-count { background: #e5e7eb; color: #6b7280; border-radius: 20px; padding: 1px 7px; font-size: 9.5px; }
.extra-zone-hd .ez-chev { font-size: 9px; transition: transform .15s; }
.extra-zone-hd.collapsed .ez-chev { transform: rotate(-90deg); }
.extra-zone-body { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; max-height: 240px; overflow-y: auto; }
.extra-zone-body .t-card { width: 270px; flex-shrink: 0; }
.extra-zone.overdue .extra-zone-hd { color: #dc2626; }
.extra-zone.overdue .extra-zone-hd .ez-count { background: #fee2e2; color: #dc2626; }
.ez-card-wrap { position: relative; }
.ez-date-tag { position: absolute; top: -6px; right: 4px; background: #dc2626; color: #fff; font-size: 8.5px; font-weight: 700; padding: 1px 6px; border-radius: 8px; z-index: 1; }
.ad-cell .t-card { flex-shrink: 0; width: 140px; margin-bottom: 0; }
.ad-cell::-webkit-scrollbar { height: 4px; } .ad-cell::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }

.grid-body { display: flex; flex: 1; overflow-y: auto; position: relative; scroll-behavior: smooth; }
.time-axis { width: 60px; flex-shrink: 0; border-right: 1px solid var(--border); background: transparent; position: sticky; left: 0; z-index: 160; min-height: 1440px; }
.time-lbl { position: absolute; right: 12px; font-size: 10px; font-weight: 500; color: var(--muted); transform: translateY(-50%); }

.day-cols { display: flex; flex: 1; position: relative; z-index: 10; min-height: 1440px; }
.d-col { flex: 1; position: relative; border-right: 1px solid var(--border); background-image: linear-gradient(var(--border) 1px, transparent 1px); background-size: 100% 60px; height: 1440px; transition: background-color 0.2s; } .d-col.over { background-color: rgba(0,113,227,0.04); } .d-col.mv-target { background-color: rgba(0,113,227,0.07); outline: 2px solid rgba(0,113,227,0.35); outline-offset: -2px; }

/* Team schedule grid: override d-col for CSS grid layout */
#team-week-grid > div { display: grid; grid-template-columns: repeat(7, 1fr); }
#team-week-grid .d-col { flex: none !important; width: auto !important; background-image: none; border-right: 1px solid #f0f0f5; }
#team-week-grid .abs-task { cursor: pointer; }
#team-week-grid .abs-task:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

.now-line { position: absolute; left: 0; right: 0; height: 2px; background: #ff3b30; z-index: 45; pointer-events: none; opacity: 0.8; box-shadow: 0 1px 4px rgba(255,59,48,0.3);}
.now-line::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; }

/* Month Grid */
.m-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 150;}
.m-head > div { text-align: center; padding: 12px 0; font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; border-right: 1px solid var(--border);}
.m-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(100px, 1fr); gap: 1px; background: var(--border); flex: 1; overflow-y: auto;}
.m-cell { background: var(--surface); padding: 4px; display: flex; flex-direction: column; transition: 0.2s; overflow: hidden; position: relative;}
.m-cell.today { background: rgba(0,113,227,0.02); } .m-cell.over { background: rgba(0,113,227,0.08); }
.m-date { font-size: 11px; font-weight: 500; padding: 4px; color: var(--muted); text-align: right; margin-bottom: 4px;} .m-cell.today .m-date { color: var(--accent); font-weight: 700; }
.m-tasks { display: flex; flex-direction: row; overflow-x: auto; gap: 4px; flex: 1; align-items: flex-start; padding-bottom: 4px; }
.m-tasks::-webkit-scrollbar { height: 4px; } .m-tasks::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
.m-tasks .t-card { padding: 4px 6px; gap: 4px; border: none; border-left: 3px solid currentColor; border-radius: 4px; background: #fafafa; font-size: 10px; flex-shrink: 0; width: 140px; margin-bottom: 0;}
.m-tasks .t-card:hover { transform: none; box-shadow: var(--shadow-sm); z-index: 10;}

/* Team month grid task styling */
#team-month-grid .m-task { cursor: pointer; }
#team-month-grid .m-task:hover { opacity: 0.9; }

/* Matrix View */
.matrix-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 100%; gap: 1px; background: var(--border); overflow-y: auto; }
.quad { background: var(--surface); display: flex; flex-direction: column; padding: 24px; overflow-y: auto; transition: 0.2s;} .quad.over { background: rgba(0,113,227,0.03); }
.quad-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 16px; position: sticky; top: -24px; background: var(--surface); z-index: 10; padding: 10px 0;}

/* Tactical Tasks */
.t-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 6px; box-shadow: var(--shadow-sm); display: flex; gap: 8px; cursor: grab; position: relative; transition: all 0.2s var(--spring); overflow: visible; flex-shrink: 0; }
.t-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); z-index: 20; }
.t-card:active { transform: scale(0.98); cursor: grabbing; box-shadow: var(--shadow-lg); z-index: 100; }
.t-card:hover .t-actions { opacity: 1; transform: translateX(0); }
/* Task type badges */
.tt-badge { display:inline-flex; align-items:center; gap:3px; font-size:8.5px; font-weight:700; border-radius:4px; padding:1px 5px; text-transform:uppercase; letter-spacing:.04em; flex-shrink:0; }
.tt-badge.tt-personal  { background:#f3f4f6; color:#6b7280; }
.tt-badge.tt-team      { background:#eff6ff; color:#2563eb; }
.tt-badge.tt-delegated { background:#fef3c7; color:#b45309; }
.tt-badge.tt-delegated_monitored { background:#fdf4ff; color:#9333ea; }
/* Delegation status banner on card — all 4 states get a distinct border color */
.t-card.delegation-pending  { border-left:3px solid #f59e0b !important; }
.t-card.delegation-parked   { border-left:3px solid #8b5cf6 !important; }
.t-card.delegation-accepted { border-left:3px solid #22c55e !important; }
.t-card.delegation-rejected { border-left:3px solid #ef4444 !important; }
/* Task type selector in modal.
   Task Type / Team grid — same pill shape+size as every other chip in this
   panel (status, priority, routing, schedule). Each cell used to be a small
   card with an 18px icon square, a bold label, and a whole extra paragraph
   that only appeared on hover — that hover-only description is gone now
   that the section has a proper (?) explainer (see .tk-help-btn); the
   cell itself just needs to say what it is and whether it's selected. Team
   lives here too (4th cell) so the whole "who's on this and how" decision
   is one 2×2 grid instead of two separate sections. */
.tt-selector { display:grid; grid-template-columns:repeat(4, 1fr); gap:5px; margin-top:4px; }
.tt-selector > .tk-sp-wrap { display:flex; }
.tt-selector > .tk-sp-wrap > .tt-opt { width:100%; }
.tt-opt { flex-direction:column; gap:3px !important; text-align:center; justify-content:center; padding:8px 4px !important; position:relative; }
.tt-opt .tt-opt-icon { font-size:14px; }
.tt-opt .tt-opt-label { font-size:11px; }
.tt-opt #tk-collab-count.badge, .tt-opt .badge { position:absolute; top:3px; right:5px; }
.tt-opt {
    display:flex; align-items:center; gap:6px; padding:var(--tk-chip-pad);
    border-radius:var(--tk-radius); border:1px solid var(--tk-chip-border); background:#fff;
    font-size:var(--tk-chip-font); font-weight:600; color:#374151; cursor:pointer;
    transition:all .12s; white-space:nowrap;
}
.tt-opt:hover { background:#f3f4f6; border-color:#d1d5db; }
.tt-opt.selected { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.tt-opt-icon { width:14px; text-align:center; flex-shrink:0; font-size:10px; }
.tt-opt-content { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.tt-opt-label { font-size:inherit; font-weight:inherit; color:inherit; }
.tt-opt-desc { display:none; } /* superseded by the section's (?) tooltip */
/* Delegation response bar */
.del-response-bar { background:linear-gradient(135deg,#fffbeb,#fef3c7); border:1px solid #fde68a; border-radius:10px; padding:10px 12px; display:block; margin-bottom:8px; }
.del-response-bar .del-msg { flex:1; font-size:11px; color:#92400e; font-weight:600; min-width:140px; }
.del-btn { display:inline-flex; align-items:center; gap:4px; border:none; border-radius:8px; padding:5px 12px; font-size:11px; font-weight:700; cursor:pointer; font-family:var(--font); transition:.15s; }
.del-btn.accept { background:#22c55e; color:#fff; }
.del-btn.reject { background:#ef4444; color:#fff; }
.del-btn.park   { background:#8b5cf6; color:#fff; }
.del-btn:hover { opacity:.88; }

/* Delegation response inline options */
.del-resp-opt { cursor:pointer; }
.del-resp-btn { display:inline-flex; align-items:center; gap:4px; border:none; border-radius:6px; padding:5px 10px; font-size:10px; font-weight:700; cursor:pointer; font-family:var(--font); transition:.15s; background:#d1d5db; color:#374151; }
.del-resp-btn.accept { background:#dcfce7; color:#166534; }
.del-resp-btn.reject { background:#fee2e2; color:#991b1b; }
.del-resp-btn.park   { background:#f3e8ff; color:#6b21a8; }
.del-resp-opt input:checked + .del-resp-btn { box-shadow:0 0 0 2px currentColor; }
.del-resp-opt input:checked + .del-resp-btn.accept { background:#22c55e; color:#fff; box-shadow:0 0 0 2px #22c55e; }
.del-resp-opt input:checked + .del-resp-btn.reject { background:#ef4444; color:#fff; box-shadow:0 0 0 2px #ef4444; }
.del-resp-opt input:checked + .del-resp-btn.park   { background:#8b5cf6; color:#fff; box-shadow:0 0 0 2px #8b5cf6; }
.del-resp-btn:hover { opacity:.85; }

.abs-task { 
    position: absolute; border-radius: 6px; padding: 4px 6px; font-size: 11px; cursor: grab; 
    box-shadow: var(--shadow-sm); border-left-width: 4px; border-left-style: solid; 
    display: flex; flex-direction: column; overflow: hidden; 
    transition: box-shadow 0.2s; z-index: 20;
}
.abs-task:hover:not(.resizing) { height: auto !important; overflow: visible; z-index: 110 !important; box-shadow: var(--shadow-lg); transform: scale(1.02); } 
.abs-task.resizing { z-index: 120 !important; opacity: 0.9; }
.abs-task:active { transform: scale(0.98) translateY(0); cursor: grabbing; opacity: 0.9;}
.abs-task:hover .t-actions { opacity: 1; transform: translateY(-50%) translateX(0); }
.abs-task.subtask-item { font-size: 10px; padding: 3px 5px; }

/* Compact Breadcrumbs & Title */
.t-bread { font-size: 8.5px; color:var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; flex-shrink: 1; min-height: 0; display:flex; align-items:center;}
.t-bread .material-symbols-rounded { font-size: 9px; vertical-align: middle; margin-right: 2px;}
.t-title { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); display: flex; align-items: center; gap: 4px; flex-shrink: 0; line-height: 1.2;}
.abs-task .t-title { font-size: 11px; }

/* RESIZE HANDLES */
.create-ghost { user-select: none; overflow: hidden; }
.tag-sug-item { padding:6px 12px; cursor:pointer; font-size:11px; color:#374151; border-bottom:1px solid #f3f4f6; }
.tag-sug-item:last-child { border-bottom:none; }
.tag-sug-item:hover { background:#f0f7ff; color:#0071e3; }
/* Drop preview — dashed ghost showing exactly where a dragged task will land in
   a day/week time-grid column, sized to its duration and labelled with the time. */
#grid-drop-preview { position: absolute; left: 2px; right: 2px; z-index: 40; pointer-events: none;
    background: rgba(0,113,227,.12); border: 1.5px dashed #0071e3; border-radius: 6px; box-sizing: border-box; }
#grid-drop-preview span { position: absolute; top: 2px; left: 3px; font-size: 10px; font-weight: 800; color: #0071e3;
    background: #fff; padding: 1px 5px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.18); white-space: nowrap; }
.resize-handle { position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; cursor: ns-resize; z-index: 30; touch-action: none; }
.resize-handle:hover { background: rgba(0,0,0,0.05); }
.resize-handle-h { position: absolute; right: 0; top: 0; height: 100%; width: 6px; cursor: ew-resize; z-index: 30; border-radius: 0 4px 4px 0; touch-action: none; }
.resize-handle-h:hover { background: rgba(0,0,0,0.08); }
/* Fatter, easier-to-grab resize handles on touch, with a visible grip. */
@media (pointer: coarse) {
    .resize-handle { height: 16px; background: linear-gradient(to top, rgba(0,0,0,.06), transparent); }
    .resize-handle::after { content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:28px; height:3px; border-radius:2px; background:rgba(0,0,0,.22); }
    .resize-handle-h { width: 16px; }
    .resize-handle-h::after { content:''; position:absolute; right:3px; top:50%; transform:translateY(-50%); width:3px; height:24px; border-radius:2px; background:rgba(0,0,0,.22); }
}

.chk { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--muted); cursor: pointer; flex-shrink:0; transition: all 0.2s; margin-top: 1px; display:flex; align-items:center; justify-content:center; position:relative; }
.chk::after { content:''; display:none; }
.done .chk { background: #34c759; border-color: #34c759; }
.done .chk::after { content: '✓'; display:flex; color:#fff; font-size:9px; font-weight:800; line-height:1; align-items:center; justify-content:center; width:100%; height:100%; }
.done .t-title { text-decoration: line-through; opacity: 0.45; }
.t-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 2px; }
.t-meta { font-size: 10px; color: var(--muted); margin-top: 2px; font-weight: 500; flex-shrink: 0; }

.t-actions { position: absolute; right: 4px; top: 50%; transform: translateY(-50%) translateX(10px); opacity: 0; display: flex; gap: 4px; background: rgba(255,255,255,0.96); backdrop-filter: blur(6px); padding: 4px; border-radius: 6px; transition: all 0.2s var(--spring); z-index: 200; box-shadow:0 2px 8px rgba(0,0,0,.12); }
/* Holding area: never show action overlay (mobile rules force opacity:1, override here) */
.holding .t-card .t-actions { opacity: 0 !important; background: rgba(255,255,255,0.96) !important; box-shadow: 0 2px 8px rgba(0,0,0,.12) !important; transform: translateY(-50%) translateX(10px) !important; }
.holding .t-card:hover .t-actions { opacity: 1 !important; transform: translateY(-50%) translateX(0) !important; }
.t-btn { font-size: 12px; cursor: pointer; background: #f5f5f7; border:none; padding:4px 6px; border-radius:4px; color:var(--text); transition: 0.2s; display:inline-flex; align-items:center; gap:4px;} .t-btn:hover { background: #e8e8ed; } .t-btn.del:hover { background: #fee2e2; color: #ff3b30; }
.t-btn.qs-start-btn { color: #0071e3; font-weight: 700; font-size: 11px; } .t-btn.qs-start-btn:hover { background: #e0f0ff; }
.t-btn.qs-done-btn  { color: #34c759; font-weight: 700; font-size: 11px; } .t-btn.qs-done-btn:hover  { background: #dcfce7; }

.t-grid-subs { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; opacity: 0.8; margin-bottom: 4px; flex-shrink: 0;}
.t-grid-sub { display: flex; align-items: center; gap: 4px; font-size: 9px; } .t-grid-sub.done { text-decoration: line-through; opacity: 0.5; }
.t-grid-sub .chk { width: 8px; height: 8px; border-width: 1px; margin-top: 0; }
.t-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: rgba(0,0,0,0.05); width: 100%; border-radius: 0 0 10px 10px; overflow: hidden; } .t-progress-fill { height: 100%; background: currentColor; transition: width 0.3s var(--spring); }

.p-badge { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .p-Q1 { background: #ff3b30; } .p-Q2 { background: #ff9f0a; } .p-Q3 { background: #0071e3; } .p-Q4 { background: var(--muted); }
.t-tag-container { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; flex-shrink: 0;} .t-tag { padding: 2px 4px; border-radius: 4px; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: currentColor; opacity: 0.8; } .t-tag span { filter: invert(1) grayscale(1) contrast(9); }

/* Task Assignee Badges */
.t-assignees { display: flex; gap: -4px; margin-top: 6px; flex-shrink: 0;}
.a-badge { width: 18px; height: 18px; border-radius: 50%; background: #0071e3; color: white; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: bold; border: 1.5px solid #fff; z-index: 1; cursor: help; }
.a-badge:nth-child(2) { transform: translateX(-4px); z-index: 2; background: #34c759;}
.a-badge:nth-child(3) { transform: translateX(-8px); z-index: 3; background: #ff9f0a;}
.a-badge:nth-child(4) { transform: translateX(-12px); z-index: 4; background: #af52de;}

/* Global AI FAB - Grouped Voice + Add Layout */
.fab-group { position: fixed; bottom: 24px; right: 24px; display: flex; background: var(--accent); border-radius: 50px; box-shadow: 0 10px 20px rgba(0,113,227,0.3); z-index: 250; transition: all 0.3s var(--spring); overflow: hidden; align-items: stretch; }
.fab-group:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 15px 30px rgba(0,113,227,0.4); }
.fab-quick-add { background: transparent; color: white; border: none; border-right: 1px solid rgba(255,255,255,0.3); padding: 14px 16px 14px 20px; font-size: 15px; cursor: pointer; display: flex; align-items: center; transition: background 0.2s;}
.fab-quick-add:hover { background: rgba(255,255,255,0.1); }
.fab-main { background: transparent; color: white; border: none; padding: 14px 16px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background 0.2s;}
.fab-main:hover { background: rgba(255,255,255,0.1); }
.fab-mic { background: transparent; color: white; border: none; border-left: 1px solid rgba(255,255,255,0.3); padding: 14px 20px 14px 16px; font-size: 14px; cursor: pointer; display: flex; align-items: center; transition: background 0.2s;}
.fab-mic:hover { background: rgba(255,255,255,0.1); }
.fab-mic.recording { background: #ff3b30 !important; animation: pulse 1.5s infinite; }

/* Chat popup FAB - opposite corner from the AI fab-group */
.chat-fab { position: fixed; bottom: 24px; left: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; border: none; box-shadow: 0 10px 20px rgba(0,113,227,0.3); z-index: 250; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; transition: all 0.3s var(--spring); }
.chat-fab:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 15px 30px rgba(0,113,227,0.4); }
.chat-fab-panel { position: fixed; bottom: 92px; left: 24px; width: 380px; height: 560px; max-height: calc(100vh - 120px); background: var(--card-bg, #fff); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); z-index: 500; overflow: hidden; display: none; flex-direction: column; }
.chat-fab-panel.open { display: flex; }
.chat-fab-panel iframe { flex: 1; width: 100%; border: none; }
/* Host close-bar for the chat popup — gives an explicit X (esp. important on mobile,
   where the panel is fullscreen and the FAB is hidden behind it). */
.chat-fab-bar { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--border); background: var(--card-bg, #fff); }
.chat-fab-bar-title { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; }
.chat-fab-close { width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.chat-fab-close:hover { background: rgba(0,0,0,0.06); color: var(--text); }

@media (max-width: 768px) {
  .chat-fab { bottom: 66px; left: 14px; }
  .chat-fab-panel { left: 8px; right: 8px; width: auto; bottom: 8px; top: 8px; height: auto; max-height: none; }
}

/* ═══════════════════════════════════════════════════════════════
   AI COMMAND PANEL  (bottom-sheet slide-up)
═══════════════════════════════════════════════════════════════ */
.ai-cmd-overlay{position:fixed;inset:0;z-index:490;background:rgba(10,10,20,.45);backdrop-filter:blur(4px);display:none;align-items:flex-end;justify-content:center;}
.ai-cmd-overlay.show{display:flex;}
.ai-cmd-panel{width:100%;max-width:680px;background:#fff;border-radius:24px 24px 0 0;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);max-height:92vh;display:flex;flex-direction:column;position:relative;}
.ai-cmd-panel.open{transform:translateY(0);}
.ai-cmd-handle{width:36px;height:4px;background:#e5e7eb;border-radius:2px;margin:10px auto 0;flex-shrink:0;}
/* Input section */
.ai-cmd-input-section{padding:16px 16px 12px;border-bottom:1px solid #f0f0f5;flex-shrink:0;position:relative;z-index:10;overflow:visible;}
.ai-cmd-label{font-size:9px;font-weight:800;color:#6b7280;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
/* Mention pills */
.ai-cmd-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.ai-cmd-pills:empty{display:none;}
/* Input wrap */
.ai-cmd-wrap{display:flex;align-items:flex-end;gap:10px;background:#f5f6ff;border:2px solid #e0e7ff;border-radius:16px;padding:12px 14px;transition:border-color .2s,box-shadow .2s;}
.ai-cmd-wrap:focus-within{border-color:#0071e3;background:#fff;box-shadow:0 0 0 4px rgba(0,113,227,.08);}
.ai-cmd-field{flex:1;border:none;background:transparent;font-size:15px;font-weight:500;color:#1a1a1f;outline:none;min-height:26px;max-height:120px;overflow-y:auto;line-height:1.55;white-space:pre-wrap;word-break:break-word;font-family:inherit;}
.ai-cmd-field:empty::before{content:attr(data-ph);color:#aab0c0;font-weight:400;pointer-events:none;font-size:14px;}
.ai-cmd-send{width:36px;height:36px;border-radius:11px;flex-shrink:0;background:linear-gradient(135deg,#0071e3,#6366f1);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,113,227,.3);}
.ai-cmd-send i{color:#fff;font-size:13px;}
.ai-cmd-send.sending{opacity:.6;cursor:not-allowed;}
.ai-cmd-hint{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:8px;font-size:10px;color:#b0b8cc;line-height:1.6;}
.ai-cmd-hint kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:5px;background:#f3f4f6;border:1px solid #e5e7eb;font-size:10px;font-weight:700;color:#6b7280;font-family:inherit;padding:0 4px;}
/* @ Mention popup */
.ai-mention-popup{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1.5px solid #e0e7ff;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.14);overflow:hidden;z-index:200;transform:translateY(-6px);opacity:0;transition:transform .18s cubic-bezier(.32,.72,0,1),opacity .15s;pointer-events:none;max-height:260px;display:flex;flex-direction:column;}
.ai-mention-popup.visible{transform:translateY(0);opacity:1;pointer-events:auto;}
.ai-mention-head{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;border-bottom:1px solid #f3f4f6;flex-shrink:0;}
.ai-mention-at{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:8px;background:linear-gradient(135deg,#0071e3,#6366f1);color:#fff;font-size:11px;font-weight:800;}
.ai-mention-q{font-size:13px;font-weight:700;color:#1a1a1f;flex:1;}
.ai-mention-q em{color:#0071e3;font-style:normal;}
.ai-mention-nav-hint{font-size:10px;color:#c7c7cc;}
.ai-mention-list{overflow-y:auto;flex:1;}
.ai-mention-grp{font-size:9px;font-weight:800;color:#c7c7cc;text-transform:uppercase;letter-spacing:.1em;padding:8px 14px 4px;}
.ai-mention-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;transition:background .1s;}
.ai-mention-item:hover,.ai-mention-item.aim-focused{background:#f5f8ff;}
.ai-mention-av{width:28px;height:28px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;}
.ai-mention-av.avm-emoji{font-size:16px;background:#f3f4f6 !important;color:inherit;}
.ai-mention-name{font-size:12px;font-weight:700;color:#1a1a1f;}
.ai-mention-meta{font-size:10px;color:#6b7280;}
.ai-mention-type{margin-left:auto;font-size:9px;font-weight:700;padding:2px 7px;border-radius:8px;flex-shrink:0;}
.ai-mention-type.mtp{background:#eff6ff;color:#1d4ed8;}
.ai-mention-type.mtj{background:#f0fdf4;color:#16a34a;}
.ai-mention-type.mtt{background:#faf5ff;color:#7e22ce;}
.ai-mention-empty{padding:16px 14px;text-align:center;font-size:12px;color:#6b7280;}
/* Quick chips — 4×2 grid */
.ai-cmd-chips-sec{padding:10px 16px 14px;flex-shrink:0;}
.ai-cmd-chips-lbl{font-size:9px;font-weight:800;color:#c7c7cc;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
.ai-cmd-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.ai-cmd-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 6px;border-radius:10px;font-size:10px;font-weight:700;cursor:pointer;border:1.5px solid;transition:all .12s;text-align:center;line-height:1.2;}
.ai-cmd-chip i{font-size:13px;}
.ai-cmd-chip span{letter-spacing:.01em;}
.ai-cmd-chip:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12);}
.ai-cmd-chip:active{transform:translateY(0);box-shadow:none;}
.ai-cmd-chip.c-blue{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe;}
.ai-cmd-chip.c-green{background:#f0fdf4;color:#16a34a;border-color:#bbf7d0;}
.ai-cmd-chip.c-purple{background:#faf5ff;color:#7e22ce;border-color:#e9d5ff;}
.ai-cmd-chip.c-amber{background:#fffbeb;color:#b45309;border-color:#fde68a;}
.ai-cmd-chip.c-red{background:#fff1f2;color:#be123c;border-color:#fecdd3;}
.ai-cmd-chip.c-teal{background:#f0fdfa;color:#0f766e;border-color:#99f6e4;}
/* Panel body + states */
.ai-cmd-body{overflow-y:auto;flex:1;}
.ai-cmd-state{display:none;}
.ai-cmd-state.ai-s-active{display:block;}
/* Recents */
.ai-cmd-recents{padding:12px 20px;}
.ai-cmd-recents-lbl{font-size:9px;font-weight:800;color:#c7c7cc;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
.ai-cmd-recent-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;transition:background .12s;color:#374151;font-size:12px;}
.ai-cmd-recent-item:hover{background:#f5f5f9;}
.ai-cmd-recent-item i{color:#6b7280;font-size:11px;width:14px;text-align:center;}
.ai-cmd-recent-time{margin-left:auto;font-size:10px;color:#c7c7cc;white-space:nowrap;flex-shrink:0;}
/* Done */
.ai-cmd-done{padding:24px 20px;text-align:center;position:relative;}
.ai-cmd-done-close{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:none;background:#f3f4f6;color:#9ca3af;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s;}
.ai-cmd-done-close:hover{background:#ebebef;color:#374151;}
.ai-cmd-done-icon{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#0071e3,#34c759);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:22px;color:#fff;}
.ai-cmd-done-title{font-size:16px;font-weight:800;color:#1a1a1f;margin-bottom:6px;}
.ai-cmd-done-sub{font-size:12px;color:#6b7280;margin-bottom:16px;}
.ai-cmd-undo{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:20px;border:1.5px solid #e5e7eb;background:#fff;color:#6b7280;font-size:11px;font-weight:600;cursor:pointer;}
.ai-cmd-undo:hover{border-color:#0071e3;color:#0071e3;}
.ai-cmd-undo-bar-wrap{width:120px;height:3px;background:#f3f4f6;border-radius:2px;margin:10px auto 0;overflow:hidden;}
.ai-cmd-undo-bar{height:100%;background:#0071e3;border-radius:2px;width:100%;transition:width 5s linear;}
/* Example items in idle state */
.ai-cmd-example{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;cursor:pointer;transition:background .12s;color:#374151;font-size:12px;font-weight:500;}
.ai-cmd-example:hover{background:#f0f5ff;}
.ai-cmd-example i{color:#6b7280;font-size:11px;width:14px;text-align:center;flex-shrink:0;}
.ai-cmd-example span{color:#4b5563;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Voice recording indicator on mic icon */
.ai-cmd-mic-recording{color:#ff3b30 !important;animation:pulse 1.5s infinite;}
@media(max-width:600px){.ai-cmd-panel{border-radius:20px 20px 0 0;}}
/* ── Multi-line NLP review ── */
.ai-ml-card{background:#fff;border:1.5px solid #e5e7eb;border-radius:12px;margin-bottom:10px;overflow:hidden;transition:opacity .2s;}
.ai-ml-card.ai-ml-dismissed{opacity:0.35;pointer-events:none;}
.ai-ml-card-head{display:flex;align-items:center;gap:7px;padding:7px 12px;background:#f9fafb;border-bottom:1px solid #f0f0f5;}
.ai-ml-orig{flex:1;font-size:11px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:italic;}
.ai-ml-dismiss-btn{border:none;background:none;cursor:pointer;color:#d1d5db;font-size:13px;padding:2px 4px;line-height:1;border-radius:4px;transition:color .1s;}
.ai-ml-dismiss-btn:hover{color:#ef4444;background:#fef2f2;}
.ai-ml-card-body{padding:10px 12px;display:flex;flex-direction:column;gap:7px;}
.ai-ml-title{width:100%;box-sizing:border-box;font-size:16px;font-weight:800;border:none;border-bottom:2px solid #0071e3;padding:5px 4px 7px;outline:none;background:transparent;color:#1a1a1f;font-family:inherit;border-radius:6px 6px 0 0;transition:background .12s;}
.ai-ml-title:hover{background:#f8faff;}
.ai-ml-title:focus{background:#eff6ff;}
.ai-ml-select{flex:1;border:1.5px solid #e5e7eb;border-radius:8px;padding:6px 8px;font-size:12px;background:#fff;color:#374151;outline:none;font-family:inherit;cursor:pointer;}
.ai-ml-row2{display:flex;gap:6px;}
.ai-ml-schedule{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.ai-ml-lbl-start{font-size:9px;font-weight:800;flex-shrink:0;letter-spacing:.03em;}
.ai-ml-dateinput{min-width:68px;max-width:90px;cursor:pointer;border:1.5px solid #e5e7eb;border-radius:8px;padding:5px 7px;font-size:11px;background:#f9fafb;color:#374151;outline:none;font-family:inherit;}
.ai-ml-timeinput{width:62px;cursor:pointer;border:1.5px solid #e5e7eb;border-radius:8px;padding:5px 6px;font-size:11px;background:#f9fafb;color:#374151;outline:none;font-family:inherit;}
.ai-ml-locrow{display:flex;align-items:center;gap:6px;background:#f9fafb;border:1.5px solid #e5e7eb;border-radius:8px;padding:5px 8px;}
.ai-ml-locinput{flex:1;border:none;background:transparent;font-size:12px;outline:none;font-family:inherit;color:#374151;}
.ai-ml-subtasks{margin-top:6px;display:flex;flex-direction:column;gap:6px;}
.ai-ml-subtasks-list{display:flex;flex-wrap:wrap;gap:5px;}
.ai-ml-subtasks-list:empty{display:none;}
.ai-ml-subtask-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 6px 4px 9px;border-radius:14px;font-size:11px;font-weight:600;background:#f0fdfa;color:#0f766e;border:1px solid #99f6e4;}
.ai-ml-subtask-rm{width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;background:rgba(15,118,110,.12);cursor:pointer;}
.ai-ml-subtask-rm:hover{background:rgba(15,118,110,.25);}

/* Refined Modals */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 500; padding: 16px;} .modal.active { display: flex; animation: fadeIn 0.2s var(--spring); }
/* A modal opened ON TOP of another (phase members from the project modal,
   say) must sit above it. Both share z-index 500, so without this the one
   later in the DOM wins and the newly-opened one hides behind it. openM()
   stamps .modal-stacked on a modal opened while another is already active. */
.modal.modal-stacked { z-index: 620; }
.modal.modal-stacked-2 { z-index: 640; }
.m-box { background: rgba(255,255,255,0.95); width: 100%; max-width: 440px; border-radius: 12px; padding: 24px; box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto; border: 1px solid rgba(255,255,255,0.5); }
.m-box.ai-box, .m-box.admin-box { max-width: 680px; }
/* ── Settings modal ── */
.m-box.settings-box { max-width: 560px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 92vh; }
.set-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 0; flex-shrink: 0; }
.set-header h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.set-close-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 16px; padding: 4px; border-radius: 6px; line-height: 1; }
.set-close-btn:hover { background: #f5f5f7; color: var(--text); }
/* overflow-x:auto so a narrow (mobile) modal scrolls to reach every tab —
   e.g. an admin's 5 tabs (Profile/Leave/Backups/System/Admin) — instead of
   silently clipping the ones that don't fit against .m-box's own
   overflow:hidden. flex-shrink:0 on .set-tab keeps each tab's own width
   fixed so it scrolls rather than getting squeezed unreadable first. */
.set-tabs { display: flex; gap: 2px; padding: 12px 22px 0; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.set-tabs::-webkit-scrollbar { display: none; }
.set-tab { background: none; border: none; cursor: pointer; padding: 7px 14px; font-size: 12px; font-weight: 600; color: var(--muted); border-radius: 8px 8px 0 0; position: relative; transition: .15s; font-family: var(--font); flex-shrink: 0; white-space: nowrap; }
.set-tab:hover { color: var(--text); background: #f5f5f7; }
.set-tab.active { color: var(--accent); background: #fff; }
.set-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; }
.set-panes { flex: 1; overflow-y: auto; padding: 20px 22px 22px; }
.set-pane { display: none; }
.set-pane.active { display: block; }
.set-section { background: #f9f9fb; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.set-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.set-section-title { font-size: 12px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.set-section-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
.set-btn { display: inline-flex; align-items: center; gap: 5px; border: none; border-radius: 8px; padding: 6px 14px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--font); transition: .15s; white-space: nowrap; }
.set-btn.primary { background: var(--accent); color: #fff; }
.set-btn.primary:hover { background: #0062c9; }
.set-btn.secondary { background: #f5f5f7; color: var(--text); }
.set-btn.secondary:hover { background: #e8e8ed; }
.set-btn.danger { background: #fff0f0; color: #ff3b30; border: 1px solid #fca5a5; }
.set-btn.danger:hover { background: #ffe0de; }
.set-btn.green { background: #e8faf0; color: #22c55e; border: 1px solid #bbf7d0; }
.set-btn.green:hover { background: #d1fae5; }
.bk-list-wrap { max-height: 150px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; margin-top: 8px; }
.bk-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid #f5f5f7; }
.bk-row:last-child { border-bottom: none; }
.bk-lbl { font-size: 9px; font-weight: 700; border-radius: 4px; padding: 1px 6px; text-transform: uppercase; flex-shrink: 0; }
.bk-lbl.hourly  { color: #636366; background: #63636618; }
.bk-lbl.daily   { color: #0071e3; background: #0071e318; }
.bk-lbl.weekly  { color: #34c759; background: #34c75918; }
.bk-lbl.monthly { color: #af52de; background: #af52de18; }
.bk-lbl.auto    { color: #6b7280; background: #f3f4f6; }
.bk-lbl.backup  { color: #6b7280; background: #f3f4f6; }
.bk-ts { flex: 1; font-size: 11px; color: var(--text); }
.bk-sz { font-size: 10px; color: var(--muted); }
.sched-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sched-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.sched-card-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.sched-card-time { font-size: 12px; font-weight: 600; color: var(--text); }
.sched-card-ago { font-size: 10px; color: var(--muted); margin-top: 1px; }
.restore-flow { display: flex; flex-direction: column; gap: 8px; }
.restore-flow select { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; font-family: var(--font); outline: none; background: #fff; -webkit-appearance: none; cursor: pointer; }
.restore-flow select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,113,227,0.1); }
.restore-browse-results { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 4px; }
.restore-browse-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #f5f5f7; cursor: pointer; transition: .12s; }
.restore-browse-item:last-child { border-bottom: none; }
.restore-browse-item:hover { background: #f5f5f7; }
.restore-browse-item.selected { background: #e8f0fe; }
.restore-item-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.restore-item-info { flex: 1; min-width: 0; }
.restore-item-name { font-size: 11px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.restore-item-meta { font-size: 10px; color: var(--muted); }
.zip-list-wrap { max-height: 120px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; margin-top: 8px; }
.zip-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid #f5f5f7; }
.zip-row:last-child { border-bottom: none; }
.arch-list { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.arch-item { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
.arch-item-name { font-size: 12px; font-weight: 600; color: var(--text); }
.arch-item-ws { font-size: 10px; color: var(--muted); }
.m-box h2 { font-size: 15px; margin-bottom: 16px; font-weight: 600; letter-spacing: -0.01em;}
/* .m-box inputs: scoped to non-task modals only */
.m-box:not(.task-box) input[type="text"], .m-box:not(.task-box) input[type="email"], .m-box:not(.task-box) input[type="password"], .m-box:not(.task-box) input[type="time"], .m-box:not(.task-box) select { width: 100%; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); outline: none; margin-bottom: 8px; font-size: 12px; background: #fafafa; transition: 0.2s; -webkit-appearance: none; }
.m-box:not(.task-box) textarea { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border); outline: none; margin-bottom: 12px; font-size: 13px; background: #fafafa; transition: 0.2s; -webkit-appearance: none; font-family:var(--font); resize:vertical;}
.m-box:not(.task-box) input:focus, .m-box:not(.task-box) select:focus, .m-box:not(.task-box) textarea:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 2px rgba(0,113,227,0.1);}
.m-box:not(.task-box) label { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-bottom: 2px; display: block; letter-spacing: 0.05em; }
.m-row { display: flex; gap: 8px; } .m-row > div { flex: 1; min-width: 0; }

/* Routines strip */
.rtn-add-btn { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; min-width:44px; height:60px; border-radius:10px; border:1.5px dashed #d1d5db; background:transparent; cursor:pointer; color:#6b7280; font-size:11px; gap:2px; flex-shrink:0; transition:all .15s; }
.rtn-add-btn:hover { border-color:#0071e3; color:#0071e3; background:#eff6ff; }
.rtn-lbl { font-size:10px; font-weight:600; color:#6b7280; margin-right:4px; white-space:nowrap; flex-shrink:0; }

/* Routine modal */
.rtn-modal-freq { display:flex; gap:4px; flex-wrap:wrap; }
.rtn-freq-btn { padding:5px 10px; border:1px solid #e5e7eb; border-radius:6px; background:#f9fafb; font-size:11px; font-weight:600; color:#6b7280; cursor:pointer; transition:all .12s; }
.rtn-freq-btn.active { background:#eff6ff; border-color:#bfdbfe; color:#0071e3; }

/* Icon Swatches (Material) */
.icon-swatches { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.icon-swatch { width: 32px; height: 32px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: 0.2s; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--muted); background: #fafafa; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);}
.icon-swatch:hover { background: #eee; color: var(--text); }
.icon-swatch.selected { border-color: var(--accent); background: rgba(0,113,227,0.1); color: var(--accent); transform: scale(1.1); }
.color-swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: 0.2s; }
.color-swatch:hover { transform: scale(1.15); box-shadow: 0 2px 4px rgba(0,0,0,0.15); }
.color-swatch.selected { border-color: #1d1d1f; box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }

/* t-pane defined in task modal section below */

/* Activity & Comments UI */
.c-list { display:flex; flex-direction:column; gap: 12px; margin-bottom: 16px;}
.c-item { background: #fafafa; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); font-size:13px; }
.c-item-head { display:flex; justify-content:space-between; font-size:10px; color:var(--muted); margin-bottom:4px; font-weight:600;}
.a-item { font-size:11px; color:var(--muted); display:flex; gap:8px; align-items:center; padding:4px 0;}
.a-item i { color: var(--accent); }

.radio-pill-group { display: flex; gap: 4px; flex-wrap: wrap;}
.radio-pill-group label { display: inline-flex; cursor: pointer; margin: 0; }
.radio-pill-group input[type="radio"] { display: none; }
.radio-pill-group .pill { padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; border: 1px solid var(--border); background: #fafafa; color: var(--muted); transition: 0.2s; }
.radio-pill-group input[type="radio"]:checked + .pill.q1 { background: #ffebee; border-color: #ff3b30; color: #ff3b30; }
.radio-pill-group input[type="radio"]:checked + .pill.q2 { background: #fff3e0; border-color: #ff9f0a; color: #ff9f0a; }
.radio-pill-group input[type="radio"]:checked + .pill.q3 { background: #e3f2fd; border-color: #0071e3; color: #0071e3; }
.radio-pill-group input[type="radio"]:checked + .pill.q4 { background: #f5f5f7; border-color: var(--muted); color: var(--text); }

/* Task Colors */
.color-swatches { display: flex; gap: 4px; flex-wrap: wrap;}
.color-swatch { width: 16px; height: 16px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: 0.2s; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);}
.color-swatch.selected { border-color: var(--text); transform: scale(1.1); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text); }
.t-color-swatch { width:20px; height:20px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:.15s; box-shadow:inset 0 1px 2px rgba(0,0,0,0.12); flex-shrink:0; display:inline-block; }
.t-color-swatch.inherit { background:linear-gradient(135deg,#e5e7eb 50%,#d1d5db 50%); }
.t-color-swatch.selected { border-color:#374151; transform:scale(1.2); box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(0,0,0,0.25); }

/* ════════════════════════════════════════════════════════════
   DASHBOARD  (db- prefix — clean isolated namespace)
════════════════════════════════════════════════════════════ */
#v-dash { background:#f5f6fa; position:relative; }

.db-kpi-row {
    display:flex; gap:10px; padding:14px 20px 12px;
    flex-shrink:0; background:#fff;
    border-bottom:1px solid #e9ecef; flex-wrap:wrap;
}
.db-kpi {
    display:flex; align-items:center; gap:12px;
    padding:10px 16px; border:1px solid #e9ecef;
    border-radius:12px; background:#fff; flex:1;
    min-width:130px; max-width:220px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.db-kpi-icon {
    width:36px; height:36px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:15px; flex-shrink:0;
}
.db-kpi-n { font-size:24px; font-weight:800; line-height:1; letter-spacing:-.05em; color:#111827; }
[class*="fa-"] { tooltip-delay: 0ms !important; }

@keyframes tooltipIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

[title][style*="cursor:pointer"] {
  position: relative;
}

[title][style*="cursor:pointer"]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1f;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  animation: tooltipIn 0.1s ease-out;
  margin-bottom: 4px;
}

.db-kpi-l { font-size:10px; color:#6b7280; margin-top:2px; white-space:nowrap; font-weight:500; }

/* ── Compact KPI chips (new) ──────────────────────────────── */
.db-kpi-chips { display:flex; align-items:center; gap:4px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.db-kpi-chips::-webkit-scrollbar { display:none; }
/* Mobile dashboard — hidden on desktop */
.mob-dash { display: none; }
/* Bulletproof: the mobile dashboard must never show on desktop, even if a stale
   inline style or a resize-across-the-breakpoint left it visible. */
@media (min-width: 769px) { .mob-dash { display: none !important; } }
.db-kpi-chip {
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 9px; border-radius:6px; border:1px solid #e5e7eb;
    background:#f9fafb; font-size:11px; white-space:nowrap; cursor:default;
    transition:box-shadow .12s;
}
.db-kpi-chip:hover { box-shadow:0 2px 8px rgba(0,0,0,.12); transform:translateY(-1px); }
.db-kpi-chip[onclick] { cursor:pointer; }
#kpi-chip-tooltip { position:fixed; z-index:99999; pointer-events:none; display:none; min-width:200px; max-width:240px; background:#fff; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.15),0 1px 4px rgba(0,0,0,.08); border:1px solid #e5e7eb; padding:0; overflow:hidden; }
#kpi-chip-tooltip .kct-head { padding:9px 12px 8px; font-size:12px; font-weight:700; display:flex; align-items:center; gap:6px; border-bottom:1px solid #f3f4f6; }
#kpi-chip-tooltip .kct-row { display:flex; align-items:center; justify-content:space-between; padding:5px 12px; font-size:11px; color:#374151; }
#kpi-chip-tooltip .kct-row:not(:last-child) { border-bottom:1px solid #f9fafb; }
#kpi-chip-tooltip .kct-val { font-weight:700; color:#111827; }
#kpi-chip-tooltip .kct-bar-wrap { padding:0 12px 8px; }
#kpi-chip-tooltip .kct-bar { height:4px; background:#f3f4f6; border-radius:2px; overflow:hidden; margin-top:4px; }
#kpi-chip-tooltip .kct-bar-fill { height:100%; border-radius:2px; transition:width .3s; }
#kpi-chip-tooltip .kct-footer { padding:6px 12px; background:#f9fafb; font-size:10px; color:#6b7280; text-align:center; }
.kpi-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.kpi-val { font-size:11px; font-weight:800; color:#111827; line-height:1; }
.kpi-lbl { font-size:9px; font-weight:600; color:#6b7280; }

.db-section-nav { flex-shrink:0; }
.db-sec-btn { display:inline-flex; align-items:center; gap:5px; padding:7px 12px; border:none; border-radius:6px; background:transparent; font-size:12px; font-weight:600; color:#6b7280; cursor:pointer; transition:all .15s; }
.db-sec-btn:hover { background:#f3f4f6; }
.db-sec-btn.active { background:#eff6ff; color:#0071e3; }
.db-sec-badge { font-size:9px; background:#0071e3; color:#fff; padding:1px 5px; border-radius:10px; margin-left:2px; }
.db-section-content { flex:1; overflow-y:auto; min-height:200px; }
/* Only relevant once openMobLoad() relocates #db-section-load onto the
   mobile dashboard (see the mobile media query for its shown state) —
   hidden by default so it doesn't appear as a stray button on desktop,
   where the Load tab is reached via the section-nav bar instead. */
.mob-load-back { display:none; }

/* ── Dashboard task table ──────────────────────────────────────────── */
/* table-layout:fixed distributes the table's own width:100% across the fixed-width
   columns regardless of how narrow the container gets — below a point that means every
   column (including ones with hard px widths) gets proportionally squeezed and the whole
   row overlaps/wraps illegibly. min-width + a dedicated scroll wrapper keeps every column
   at its real width and lets the table scroll sideways instead of collapsing. */
.db-task-table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.db-task-table { width:100%; min-width:680px; border-collapse:collapse; font-size:12px; table-layout:fixed; }
.db-task-table th {
    background:#f9fafb; padding:6px 10px; text-align:left; font-weight:700; color:#6b7280;
    border-bottom:2px solid #e5e7eb; font-size:10px; text-transform:uppercase;
    letter-spacing:.04em; white-space:nowrap; overflow:hidden; position:relative;
    user-select:none;
}
.db-task-table td { padding:7px 10px; border-bottom:1px solid #f3f4f6; vertical-align:top; }
.db-task-table tr:hover { background:#f8faff; }
.db-task-table tr:hover .dash-task-del { opacity:1; }
/* Column widths */
.db-task-table .col-cb    { width:28px; }
.db-task-table .col-st    { width:48px; }
.db-task-table .col-pr    { width:62px; }
.db-task-table .col-wf    { width:80px; }
.db-task-table .col-proj  { width:112px; }
.db-task-table .col-task  { width:auto; min-width:150px; }
.db-task-table .col-start { width:82px; }
.db-task-table .col-end   { width:82px; }
.db-task-table .col-overdue { width:66px; }
.db-task-table .col-links { width:96px; min-width:60px; }
.db-task-table .col-del   { width:26px; }
.db-task-table td.td-task { white-space:normal; word-break:break-word; }
.dash-task-del { opacity:0.4;transition:opacity .12s; }
.dash-task-del:hover { background:#dc2626;color:#fff; }
.nd-move-btns { display:flex; flex-direction:row; gap:3px; align-items:center; }
.nd-btn { padding:2px 7px; border:1px solid #e5e7eb; border-radius:4px; background:#f9fafb; color:#374151; font-size:9px; font-weight:700; cursor:pointer; white-space:nowrap; line-height:1.5; transition:all .12s; text-align:center; }
.nd-btn.nd-icon { padding:0; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border-radius:5px; font-size:10px; font-weight:800; letter-spacing:-.5px; }
.nd-btn:hover { background:#eff6ff; border-color:#0071e3; color:#0071e3; }
.task-title { cursor:pointer;font-weight:600;color:#111827;line-height:1.35;white-space:normal;word-break:break-word; }
.task-title:hover { color:#0071e3; }
.task-done { opacity:0.55; background:#f9fafb; }
.task-done .task-title { text-decoration:line-through; }
/* Link icon cluster */
.dash-link-icons { display:flex; flex-wrap:wrap; gap:5px; align-items:center; padding-top:1px; }
.dash-link-icon { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; cursor:pointer; font-size:11px; transition:transform .1s, box-shadow .1s; flex-shrink:0; }
.dash-link-icon:hover { transform:scale(1.18); box-shadow:0 2px 6px rgba(0,0,0,.15); }
.dash-gantt-icon { background:#eff6ff; }
.dash-gantt-icon i { color:#0071e3; }
/* "Open in Gantt" chip on dashboard task cards (mobile + tablet). */
.mob-gantt-chip { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; padding:0 5px; border-radius:5px; background:#eff6ff; color:#0071e3; font-size:11px; cursor:pointer; flex-shrink:0; }
.mob-gantt-chip:active { background:#dbeafe; }
/* Date cell colours */
.dash-date-cell { cursor:pointer; font-size:11px; line-height:1.4; }
.dash-date-cell:hover .dc-date { color:#0071e3; }
.dc-date { font-weight:600; color:#374151; }
.dc-time-start { color:#0071e3; font-weight:700; font-size:10px; }
.dc-time-end   { color:#7c3aed; font-weight:700; font-size:10px; }
/* Status badge (TD / IP / RV / DN) */
.st-badge {
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:5px; font-size:9px; font-weight:800; letter-spacing:.04em;
    padding:3px 5px; cursor:pointer; white-space:nowrap; width:100%;
    transition:filter .1s; user-select:none;
}
.st-badge:hover { filter:brightness(.94); }
.st-todo       { background:#e5e7eb; color:#374151; }
.st-in_progress{ background:#fef3c7; color:#92400e; }
.st-review     { background:#ede9fe; color:#5b21b6; }
.st-completed  { background:#dcfce7; color:#166534; }
/* Priority badge */
.pr-badge {
    display:inline-flex; align-items:center; gap:3px;
    border-radius:5px; font-size:9px; font-weight:800;
    padding:3px 6px; cursor:pointer; white-space:nowrap; width:100%;
    transition:filter .1s; user-select:none; box-sizing:border-box;
}
.pr-badge:hover { filter:brightness(.93); }
.pr-Q1 { background:#fee2e2; color:#dc2626; }
.pr-Q2 { background:#ffedd5; color:#c2410c; }
.pr-Q3 { background:#dbeafe; color:#1d4ed8; }
.pr-Q4 { background:#f3f4f6; color:#6b7280; }
/* Status/Priority floating picker */
.st-pr-picker {
    position:fixed; z-index:100010; background:#fff; border-radius:10px;
    box-shadow:0 8px 28px rgba(0,0,0,.18); border:1px solid #e5e7eb;
    padding:4px; min-width:120px; display:none;
}
.st-pr-picker.open { display:block; }
.st-pr-option {
    display:flex; align-items:center; gap:6px; padding:5px 8px;
    border-radius:6px; cursor:pointer; font-size:11px; font-weight:600;
    transition:background .1s;
}
.st-pr-option:hover { background:#f1f5f9; }
.st-pr-opt-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
/* Column resize handle */
.col-resize-handle {
    position:absolute; right:0; top:0; bottom:0; width:5px;
    cursor:col-resize; z-index:2;
}
.col-resize-handle:hover, .col-resize-handle.dragging { background:rgba(0,113,227,.35); }
/* ── Filter dropdown styling ────────────────────────────────────────── */
.dash-flt-row select {
    padding:5px 28px 5px 10px; border:1.5px solid #e2e8f0; border-radius:8px;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 8px center;
    -webkit-appearance:none; appearance:none;
    font-size:11px; font-weight:600; color:#374151; cursor:pointer; flex:1; min-width:100px;
    transition:border-color .15s;
}
.dash-flt-row select:focus { border-color:#0071e3; outline:none; }
.dash-flt-row select:hover { border-color:#94a3b8; }
/* Group buttons */
.dash-group-btn { border:none;border-radius:6px;font-size:10px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0; }
.dash-group-btn.active { outline:2px solid currentColor; outline-offset:1px; font-weight:800; }
/* Compact dashboard toolbar */
.dash-toolbar-wrap { background:#f9fafb; border-bottom:1px solid #e5e7eb; }
.dash-tb-row1 { display:flex; align-items:center; gap:6px; padding:7px 10px; }
.dash-group-pills { display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; flex:1; padding-bottom:1px; scrollbar-width:none; }
.dash-group-pills::-webkit-scrollbar { display:none; }
.dash-flt-btn { flex-shrink:0; border:none; background:#e5e7eb; border-radius:6px; padding:5px 8px; font-size:11px; cursor:pointer; color:#374151; transition:all .15s; }
.dash-flt-btn.active { background:#0071e3; color:#fff; }

/* ── Per-user task mute + focus-for-the-day (global; dashboard-only classes) ── */
.dash-focus-pill { background:#fff7ed; color:#ea580c; }
.dash-focus-pill.active { outline:2px solid #ea580c; }
/* Left-side action cluster (both views): select checkbox + focus + mute */
.dash-row-lead { display:flex; align-items:center; gap:4px; }
.dash-row-act { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; background:#f1f3f5; color:#6b7280; font-size:11px; cursor:pointer; transition:all .15s; vertical-align:middle; }
.dash-row-act:hover { background:#e5e7eb; color:#374151; transform:scale(1.08); }
.dash-row-act.on-focus { background:#ea580c; color:#fff; box-shadow:0 1px 4px rgba(234,88,12,.35); }
.dash-row-act.on-mute { background:#4f46e5; color:#fff; box-shadow:0 1px 4px rgba(79,70,229,.3); }
tr.dash-row-muted { opacity:.5; }
tr.dash-row-muted:hover { opacity:.85; }
tr.dash-row-sel > td { background:#eff6ff !important; }
/* Give the first column room for checkbox + 2 icons */
.db-task-table th.col-cb, .db-task-table td.col-cb { width:96px; min-width:96px; }

/* Mobile card left cluster + prominent focus / mute icon buttons */
.mob-ftc-lead { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.mob-ftc-ico-btn { width:26px; height:26px; border-radius:50%; border:none; background:#f1f3f5; color:#6b7280; display:flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer; transition:all .15s; flex-shrink:0; }
.mob-ftc-ico-btn.big { width:30px; height:30px; font-size:13px; }
.mob-ftc-ico-btn:hover { background:#e5e7eb; color:#374151; }
.mob-ftc-ico-btn.on { background:#ea580c; color:#fff; box-shadow:0 1px 5px rgba(234,88,12,.4); }
.mob-ftc-ico-btn.on-mute { background:#4f46e5; color:#fff; box-shadow:0 1px 5px rgba(79,70,229,.35); }
.mob-full-task-card.mob-tc-muted { opacity:.5; }
.mob-full-task-card.mob-tc-focus { border-color:#fdba74; box-shadow:0 0 0 1px #fdba74 inset; }
.mob-full-task-card.mob-tc-sel { border-color:#93c5fd; box-shadow:0 0 0 2px #bfdbfe inset; background:#f5f9ff; }

/* Custom select checkbox (rounded, clear checked state) */
.dash-sel-cb { position:relative; display:inline-flex; align-items:center; cursor:pointer; flex-shrink:0; }
.dash-sel-cb input { position:absolute; opacity:0; width:0; height:0; }
.dash-sel-box { width:20px; height:20px; border-radius:6px; border:2px solid #cbd5e1; background:#fff; display:inline-block; transition:all .15s; position:relative; }
.dash-sel-cb:hover .dash-sel-box { border-color:#60a5fa; }
.dash-sel-cb input:checked + .dash-sel-box { background:#2563eb; border-color:#2563eb; }
.dash-sel-cb input:checked + .dash-sel-box::after { content:''; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }

/* Card status chip (tap to change status) */
.mob-tc-status { flex-shrink:0; border:none; border-radius:7px; padding:3px 8px; font-size:10px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:2px; white-space:nowrap; transition:all .15s; }
.mob-tc-status.st-todo { background:#f1f3f5; color:#6b7280; }
.mob-tc-status.st-in_progress { background:#fef3c7; color:#b45309; }
.mob-tc-status.st-completed { background:#dcfce7; color:#16a34a; }
.mob-tc-status:active { transform:scale(.95); }

/* Bulk-action bar */
.dash-bulkbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px; margin-bottom:8px; border-radius:11px; background:linear-gradient(90deg,#1e3a8a,#2563eb); color:#fff; box-shadow:0 3px 14px rgba(37,99,235,.3); animation:bulkBarIn .18s ease; }
@keyframes bulkBarIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.dash-bulkbar-count { font-size:12px; font-weight:800; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.dash-bulkbar-acts { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-left:auto; }
.dbb-btn { border:none; border-radius:7px; padding:5px 10px; font-size:11px; font-weight:700; cursor:pointer; background:rgba(255,255,255,.16); color:#fff; display:inline-flex; align-items:center; gap:5px; transition:all .12s; white-space:nowrap; }
.dbb-btn:hover { background:rgba(255,255,255,.3); }
.dbb-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.dbb-btn.dbb-done { background:#22c55e; }
.dbb-btn.dbb-done:hover { background:#16a34a; }
.dbb-btn.dbb-focus:hover { background:#ea580c; }
.dbb-btn.dbb-mute:hover { background:#4f46e5; }
.dbb-btn.dbb-del:hover { background:#dc2626; }
.dbb-btn.dbb-clear { background:rgba(255,255,255,.1); }
.dbb-btn.dbb-all { background:rgba(255,255,255,.22); }

/* ── Mobile dashboard: mute/focus/select parity ── */
.mob-task-card.mob-tc-muted { opacity:.5; }
.mob-task-card.mob-tc-focus { border-color:#fdba74; box-shadow:0 0 0 1px #fdba74 inset; }
.mob-task-card.mob-tc-sel { border-color:#93c5fd; box-shadow:0 0 0 2px #bfdbfe inset; background:#f5f9ff; }
.mob-task-controls { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:8px; }
.mob-ctl-pill { border:1px solid #e5e7eb; background:#fff; border-radius:999px; padding:5px 12px; font-size:11px; font-weight:700; color:#4b5563; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all .15s; }
.mob-ctl-pill.on-focus { background:#fff7ed; border-color:#fdba74; color:#ea580c; }
.mob-ctl-pill.on { background:#eef2ff; border-color:#c7d2fe; color:#4f46e5; }
.mob-focus-wrap { display:flex; flex-direction:column; gap:8px; }

/* Fixed bottom bulk-action bar (phone) */
.mob-bulk-bar { display:none; position:fixed; left:10px; right:10px; bottom:calc(64px + env(safe-area-inset-bottom)); z-index:450; flex-direction:column; gap:7px; padding:10px 12px; border-radius:15px; background:linear-gradient(135deg,#1e3a8a,#2563eb); color:#fff; box-shadow:0 8px 28px rgba(30,58,138,.4); animation:bulkBarIn .18s ease; }
.mbb-top { display:flex; align-items:center; gap:10px; }
.mbb-count { font-size:13px; font-weight:800; display:flex; align-items:center; gap:6px; }
.mbb-link { margin-left:auto; background:none; border:none; color:#dbeafe; font-size:12px; font-weight:700; cursor:pointer; text-decoration:underline; }
.mbb-close { background:rgba(255,255,255,.18); border:none; color:#fff; width:28px; height:28px; border-radius:50%; font-size:14px; cursor:pointer; flex-shrink:0; }
.mbb-acts { display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.mbb-acts::-webkit-scrollbar { display:none; }
.mbb-btn { flex:0 0 auto; border:none; border-radius:9px; padding:8px 12px; font-size:11px; font-weight:700; cursor:pointer; background:rgba(255,255,255,.16); color:#fff; display:inline-flex; flex-direction:column; align-items:center; gap:3px; min-width:52px; }
.mbb-btn i, .mbb-btn .dbb-dot { font-size:13px; }
.mbb-btn:active { background:rgba(255,255,255,.34); }
.mbb-btn.mbb-done { background:#22c55e; }
.mbb-btn.mbb-focus { background:rgba(234,88,12,.9); }
.mbb-btn.mbb-mute { background:rgba(79,70,229,.9); }
.mbb-btn.mbb-del { background:rgba(220,38,38,.9); }
.dash-flt-row { display:flex; flex-wrap:wrap; gap:6px; padding:8px 10px 10px; border-top:1px solid #e5e7eb; align-items:center; }
/* Accordion section header */
.dg-section-hdr { cursor:pointer; user-select:none; }
.dg-section-hdr:hover td { filter:brightness(.97); }
/* Inline date edit popup */
#dash-dt-popup { position:fixed; z-index:100002; background:#fff; border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,.2); padding:12px; width:200px; border:1px solid #e5e7eb; display:none; }
#dash-dt-popup label { font-size:10px; color:#6b7280; display:block; margin-bottom:2px; }
#dash-dt-popup input { width:100%; padding:4px 6px; border:1px solid #e5e7eb; border-radius:4px; font-size:11px; margin-bottom:6px; box-sizing:border-box; }
.dash-date-cell { cursor:pointer; }
.dash-date-cell:hover div { color:#0071e3; }

/* ── Mobile: card layout for task table ─────────────────────────────── */
@media (max-width: 640px) {
    /* The card layout below stacks rows full-width — the desktop min-width that
       enables horizontal scrolling would otherwise force this wider than the
       viewport and fight the card conversion. */
    .db-task-table { min-width:0; }
    .db-task-table, .db-task-table thead, .db-task-table tbody,
    .db-task-table th, .db-task-table td { display:block; }
    .db-task-table thead { display:none; }
    /* Group header rows stay as flex */
    .db-task-table tr.dg-section-hdr { display:flex !important; }
    /* Each task row becomes a flex card */
    .db-task-table tr:not(.dg-section-hdr) {
        display:flex !important;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:flex-start;
        background:#fff;
        border:1px solid #e9ecef;
        border-radius:12px;
        margin:6px 10px;
        padding:0;
        box-shadow:0 1px 4px rgba(0,0,0,.05);
        overflow:hidden;
    }
    /* Hidden columns */
    .db-task-table td.col-cb,
    .db-task-table td.col-end,
    .db-task-table td.col-overdue,
    .db-task-table td.col-del { display:none !important; }
    /* ── Row 1: Status + Priority badges (top of card) ── */
    .db-task-table td.col-st {
        order:1; width:auto; flex-shrink:0;
        padding:9px 4px 0 12px !important;
        border:none !important;
    }
    .db-task-table td.col-pr {
        order:1; width:auto; flex-shrink:0;
        padding:9px 0 0 5px !important;
        border:none !important;
    }
    /* ── Row 2: Task title (full width) ── */
    .db-task-table td.td-task {
        order:2; width:100%;
        padding:7px 12px 3px !important;
        font-size:14px !important; font-weight:600;
        border:none !important;
    }
    .task-title { font-size:14px !important; font-weight:600 !important; }
    /* ── Row 3: Project name (full width) ── */
    .db-task-table td.col-proj {
        order:3; width:100%;
        padding:0 12px 6px !important;
        font-size:11px !important;
        border:none !important;
    }
    /* ── Row 4: Date + Links side by side ── */
    .db-task-table td.col-start {
        order:4; flex:1; min-width:0;
        padding:7px 8px 9px 12px !important;
        border-top:1px solid #f3f4f6 !important;
    }
    .db-task-table td.col-links {
        order:4; width:auto; flex-shrink:0;
        padding:7px 12px 9px 4px !important;
        border-top:1px solid #f3f4f6 !important;
        display:flex; align-items:center;
    }
    /* nd-btn (T/W/M) bigger touch targets on mobile */
    .nd-btn.nd-icon { width:26px !important; height:26px !important; font-size:11px !important; }
    /* Done row */
    .db-task-table tr.task-done { opacity:.6; }
    /* Filter row: stack on mobile */
    .dash-flt-row { flex-direction:column; }
    .dash-flt-row select { width:100%; min-width:0; }
}
.db-task-card { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:6px; }
.db-task-card:hover { border-color:#0071e3; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.db-task-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.db-task-status { font-size:10px; padding:2px 8px; border-radius:12px; font-weight:600; cursor:pointer; }
.db-task-status.todo { background:#f3f4f6; color:#6b7280; }
.db-task-status.in_progress { background:#fff7ed; color:#f59e0b; }
.db-task-status.review { background:#fdf4ff; color:#9333ea; }
.db-task-status.completed { background:#f0fdf4; color:#22c55e; }
.db-task-name { font-size:13px; font-weight:600; color:#111827; cursor:pointer; }
.db-task-name:hover { color:#0071e3; }
.db-task-meta { font-size:10px; color:#6b7280; }
.db-task-time { font-size:11px; font-weight:600; color:#0071e3; }
.db-task-folders { display:flex; gap:8px; font-size:10px; }
.db-task-folders span { display:flex; align-items:center; gap:3px; color:#6b7280; cursor:pointer; }
.db-task-folders span:hover { color:#0071e3; }

.db-body { display:flex; flex:1; min-height:0; overflow:hidden; align-items:stretch; position:relative; }
#dash-cal-panel.open { width:20%; min-width:180px; }
#dash-cal-panel .dcp-day { font-size:10px;font-weight:700;width:24px;height:24px;line-height:24px;border-radius:50%;text-align:center;margin:auto;cursor:pointer;color:#374151;transition:background .1s,transform .1s; }
#dash-cal-panel .dcp-day:hover { background:#f3f4f6;transform:scale(1.1); }
#dash-cal-panel .dcp-day.today { background:#0071e3;color:#fff; }
#dash-cal-panel .dcp-day.has-tasks { position:relative; }
#dash-cal-panel .dcp-day.has-tasks::after { content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:#10b981; }
#dash-cal-panel .dcp-day.today::after { background:#bfdbfe; }
#dash-cal-panel .dcp-day.selected { outline:2px solid #7c3aed;outline-offset:1px; }
#dash-cal-tab { display:flex; }
@media (max-width:768px) { #dash-cal-tab { display:none !important; } #dash-cal-panel { display:none !important; } }
.dcp-task-row { display:flex;align-items:flex-start;gap:6px;padding:5px 0;border-bottom:1px solid #f3f4f6;cursor:pointer; }
.dcp-task-row:last-child { border-bottom:none; }
.dcp-task-row:hover .dcp-task-title { color:#0071e3; }
.dcp-task-dot { width:3px;border-radius:2px;align-self:stretch;flex-shrink:0;min-height:14px; }
.dcp-task-title { font-size:11px;font-weight:600;color:#1f2937;line-height:1.35; }
.dcp-task-meta { font-size:9px;color:#6b7280;margin-top:1px; }

.db-main {
    flex:1; min-width:0; display:flex; flex-direction:column;
    overflow:hidden; background:#fff; border-right:1px solid #e9ecef;
}
.db-toolbar {
    display:flex; align-items:center; gap:8px; padding:10px 20px;
    flex-shrink:0; border-bottom:1px solid #e9ecef; background:#fafafa;
    flex-wrap:wrap; min-height:46px;
}
.db-section-title { font-size:12px; font-weight:700; color:#374151; white-space:nowrap; flex-shrink:0; }
.db-pills { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.dfp-btn {
    padding:5px 12px; border-radius:16px; border:1px solid #e5e7eb;
    background:#fff; font-size:12px; font-weight:500; cursor:pointer;
    color:#6b7280; transition:all .15s ease; white-space:nowrap; line-height:1.4;
}
.dfp-btn.active { background:#1f2937; color:#fff; border-color:#1f2937; box-shadow:0 1px 2px rgba(0,0,0,.1); }
.dfp-btn:hover:not(.active) { border-color:#0071e3; color:#0071e3; background:#f8fafc; }
.dfp-btn:first-child { background:#f9fafb; }

.db-table-wrap { flex:1; overflow-y:auto; }
.db-table-wrap::-webkit-scrollbar { width:4px; }
.db-table-wrap::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:2px; }
.db-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.db-table thead th {
    position:sticky; top:0; z-index:1;
    background:#fafafa; font-size:10px; font-weight:700; color:#6b7280;
    text-transform:uppercase; letter-spacing:.06em;
    padding:8px 14px; border-bottom:1px solid #e9ecef;
    text-align:left; white-space:nowrap;
}
.dash-proj-row { cursor:pointer; border-bottom:1px solid #f3f4f6; transition:background .1s; }
.dash-proj-row:hover { background:#f9fafb; }
.dash-proj-row td { padding:10px 14px; vertical-align:middle; overflow:hidden; }
.dash-proj-stage-bar { width:3px !important; min-width:3px; max-width:3px; padding:0 !important; }
.dash-proj-code { font-family:ui-monospace,monospace; font-size:11px; font-weight:700; color:#0071e3; white-space:nowrap; }
.dash-proj-name { font-weight:600; color:#111827; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-proj-ws { font-size:10px; color:#6b7280; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-proj-client { color:#6b7280; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-stage-pill { display:inline-flex; align-items:center; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700; white-space:nowrap; }
.dash-proj-actions { display:flex; gap:3px; align-items:center; }
.dash-proj-action-btn {
    background:transparent; border:1px solid #e9ecef; border-radius:6px;
    padding:3px 7px; font-size:11px; color:#6b7280; cursor:pointer;
    text-decoration:none; display:inline-flex; align-items:center;
    transition:all .1s; flex-shrink:0;
}
.dash-proj-action-btn:hover { background:#f3f4f6; border-color:#d1d5db; }

.db-sidebar {
    width:300px; flex-shrink:0; display:flex; flex-direction:column;
    overflow-y:auto; overflow-x:hidden; background:#fff; border-left:1px solid var(--border);
}
.db-sidebar-section {
    display:flex; flex-direction:column; min-height:0;
    border-bottom:1px solid #e9ecef; overflow:hidden;
}
.db-sidebar-section:last-child { border-bottom:none; }
.db-sidebar-head {
    padding:9px 14px 7px; font-size:11px; font-weight:700; color:#374151;
    display:flex; align-items:center; gap:6px; flex-shrink:0;
    border-bottom:1px solid #f3f4f6; background:#fafafa;
}
.db-sidebar-body { flex:1; overflow-y:auto; padding:4px 14px 8px; min-height:50px; }
.db-sidebar-body::-webkit-scrollbar { width:3px; }
.db-sidebar-body::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:2px; }

.dash-agenda-item { display:flex; gap:8px; align-items:flex-start; padding:8px 0; border-bottom:1px solid #f3f4f6; cursor:pointer; }
.dash-agenda-item:last-child { border-bottom:none; }
.dash-agenda-item:hover .dash-agenda-title { color:#0071e3; }
.dash-agenda-time { font-size:11px; font-weight:700; color:#0071e3; min-width:36px; flex-shrink:0; padding-top:2px; }
.dash-agenda-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.dash-agenda-title { font-size:11px; font-weight:600; color:#111827; line-height:1.35; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.dash-agenda-meta { font-size:9px; color:#6b7280; margin-top:2px; }

.pipeline-row { display:flex; align-items:center; gap:6px; padding:5px 0; border-bottom:1px solid #f3f4f6; }
.pipeline-row:last-child { border-bottom:none; }
.pipeline-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pipeline-stage { flex:1; font-size:10px; font-weight:600; color:#374151; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pipeline-count { font-size:11px; font-weight:800; min-width:18px; text-align:right; color:#111827; }
.pipeline-bar { width:36px; height:4px; background:#f3f4f6; border-radius:2px; flex-shrink:0; }
.pipeline-bar-fill { height:100%; border-radius:2px; }

/* Compact horizontal Workflow Pipeline strip on the dashboard (see
   renderDashboard's workflow-pipeline IIFE in app-projects.js) — a single
   row of stage segments instead of the old 9-row stacked .pipeline-row list,
   so the widget stays a fixed ~30px tall regardless of how many stages have
   tasks in them. */
.pipeline-seg { display:flex; align-items:center; gap:4px; flex-shrink:0; padding:2px 4px; border-radius:6px; }
.pipeline-seg-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.pipeline-seg-label { font-size:10px; font-weight:600; white-space:nowrap; }
.pipeline-seg-count { font-size:9px; font-weight:800; color:#fff; background:#0071e3; border-radius:8px; min-width:14px; height:14px; line-height:14px; text-align:center; padding:0 3px; }
.pipeline-seg-arrow { font-size:8px; color:#d1d5db; flex-shrink:0; }

.db-footer {
    display:flex; flex-shrink:0; height:240px;
    background:#fff; border-top:2px solid #e9ecef;
}
.db-chart-wrap {
    flex:1; display:flex; flex-direction:column;
    padding:14px 20px 12px; overflow:hidden;
    border-right:1px solid #e9ecef;
}
.db-chart-wrap:last-child { border-right:none; }
.db-chart-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-shrink:0; font-size:12px; font-weight:700; color:#374151; }
.db-legend { display:flex; gap:10px; }
.db-legend span { display:flex; align-items:center; gap:4px; font-size:10px; font-weight:600; color:#6b7280; }
.db-legend b { width:8px; height:8px; border-radius:2px; display:inline-block; flex-shrink:0; }
.burn-chart { display:flex; gap:4px; align-items:flex-end; flex:1; min-height:0; }
.burn-group { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; height:100%; min-width:0; }
.burn-bars { flex:1; width:100%; display:flex; gap:1px; align-items:flex-end; }
.burn-seg { flex:1; border-radius:3px 3px 0 0; min-height:2px; transition:height .4s; }
.burn-lbl { font-size:9px; color:#6b7280; font-weight:600; flex-shrink:0; white-space:nowrap; }

/* ════════════════════════════════════════════════════════════
   TASK MODAL  (tk- prefix — clean isolated namespace)
════════════════════════════════════════════════════════════ */
.m-box.task-box {
    max-width:980px; width:93vw; height:90vh; max-height:90vh;
    padding:0; border-radius:16px; overflow:visible;
    display:flex; flex-direction:column;
    box-shadow:0 24px 64px rgba(0,0,0,0.16);
    border:2px solid var(--ws-accent, var(--accent));
    position:relative;
}
/* Desktop close X — floats at the top-right corner, consistent with the project
   modal. Hidden on mobile, which has its own .task-mh top bar with a close. */
.task-box-close {
    position:absolute; top:10px; right:10px; z-index:70;
    width:30px; height:30px; border-radius:50%; border:none;
    background:#fff; color:var(--muted); font-size:20px; line-height:1;
    cursor:pointer; display:none; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.18);
}
.task-box-close:hover { background:#f3f4f6; color:var(--text); }
@media (min-width:769px) { .task-box-close { display:flex; } }
.tk-layout { display:flex; flex:1; min-height:0; overflow:visible; }
/* The box keeps overflow:visible (dropdowns must escape), so its square children
   paint over the 16px radius — round the visible top edge explicitly.
   14px = 16px outer radius − 2px border. */
.task-box .tk-left  { border-top-left-radius: 14px; }
.task-box .tk-right { border-top-right-radius: 14px; }
#e-acceptance-bar   { border-radius: 14px 14px 0 0; }

/* ── Comments pullout (right edge of task modal, like the dashboard calendar tab) ── */
#tk-comments-panel {
    width:0; flex-shrink:0; overflow:hidden; display:flex; flex-direction:column;
    background:#fff; border-left:1px solid #e9ecef;
    transition:width .25s cubic-bezier(.4,0,.2,1);
}
.tk-layout.comments-open #tk-comments-panel { width:300px; min-width:240px; }
#tk-comments-tab {
    width:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    background:#eff6ff; border-left:2px solid #bfdbfe; cursor:pointer;
    transition:background .15s; user-select:none;
    border-top-right-radius:14px;
}
#tk-comments-tab:hover { background:#dbeafe; }
.tk-layout.comments-open #tk-comments-tab { background:#dbeafe; border-top-right-radius:0; }
/* When the pullout strip is present it owns the top-right corner */
.task-box .tk-right { border-top-right-radius: 0; }
@media (max-width: 768px) {
    /* Mobile bottom sheet: panel overlays instead of squeezing the layout */
    #tk-comments-panel { position:absolute; right:26px; top:0; bottom:0; z-index:60; box-shadow:-8px 0 24px rgba(0,0,0,.08); }
    .tk-layout.comments-open #tk-comments-panel { width:min(85vw, 320px); }
    .tk-layout { position:relative; }
    #tk-comments-tab { position:absolute; right:0; top:0; bottom:0; z-index:61; border-top-right-radius:0; }
    .tk-right { margin-right:26px; }
}

/* Time picker must appear above modal content */
.tk-time-picker { z-index: 600 !important; }
.tk-time-picker-wrap { z-index: 601 !important; position: relative; }
.tk-dt-drop { overflow: visible !important; position: relative; z-index: 10; }

/* Left spine */
.tk-left {
    width:260px; min-width:180px; max-width:480px; flex-shrink:0;
    background:#fafafa; border-right:1px solid #e9ecef;
    overflow-y:auto; overflow-x:hidden;
    padding:12px 12px 18px; display:flex; flex-direction:column; gap:10px;
    position: relative;
}
/* Drag-to-resize handle (a thin flex column between the left sidebar and content). */
.tk-left-resizer { flex-shrink:0; width:6px; cursor:ew-resize; background:transparent; transition:background .12s; }
.tk-left-resizer:hover, .tk-left-resizer.dragging { background:rgba(0,113,227,0.18); }
/* Collapse toggle — a vertical tab that mirrors the Comments pullout: always visible,
   sits at the sidebar's right edge, and slides to the far-left edge when collapsed. */
.tk-left-tab {
    flex-shrink:0; width:22px; display:flex; align-items:center; justify-content:center;
    background:#f6f8fa; border-right:1px solid #e9ecef; cursor:pointer; user-select:none;
    transition:background .15s;
}
.tk-left-tab:hover { background:#eaeef2; }
.tk-left-tab-inner { writing-mode:vertical-rl; text-orientation:mixed; display:flex; align-items:center; gap:8px; font-size:10px; font-weight:800; letter-spacing:.05em; color:#6b7280; }
#tk-left-tab-caret { transition:transform .2s; }
.tk-layout.tk-left-collapsed #tk-left-tab-caret { transform:rotate(180deg); }
.tk-layout.tk-left-collapsed .tk-left,
.tk-layout.tk-left-collapsed .tk-left-resizer { display:none !important; }
.tk-layout.tk-left-collapsed .tk-left-tab { border-top-left-radius:14px; }
@media (max-width:768px) { .tk-left-tab, .tk-left-resizer { display:none !important; } }
.tk-left::-webkit-scrollbar { width:3px; }
.tk-left::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:2px; }

/* Status bar - visible inline on desktop */
.tk-status-bar { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
/* Quick grid - visible inline on desktop */
.tk-quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.tk-quick-grid .tk-pill-std { justify-content:flex-start; }
.tk-quick-grid .tk-pill-std.on { background:#111827; color:#fff; border-color:#111827; }
.tk-chip-pill input { display:none; }

/* Route inline - compact dropdowns */
.tk-route-inline {
    display:flex; flex-direction:column; gap:6px;
}
.tk-route-inline .tk-sel {
    font-size:11px; padding:6px 8px;
}

.tk-title {
    display:block; width:100%; border:none; background:transparent;
    font-size:15px; font-weight:700; color:#111827; outline:none;
    font-family:inherit; padding:0 0 10px; letter-spacing:-.02em;
    box-sizing:border-box; border-bottom:2px solid #e9ecef;
    transition:border-color .15s; resize:none;
}
.tk-title:focus { border-bottom-color:#0071e3; }
.tk-title::placeholder { color:#d1d5db; font-weight:400; font-size:14px; }

/* Full-width title bar (title + routing breadcrumb) across the top of the modal. */
.tk-title-bar { flex-shrink:0; padding:14px 48px 10px 20px; background:#fff; border-bottom:1px solid #eceef2; border-top-left-radius:14px; border-top-right-radius:14px; }
.tk-title-bar .tk-title { font-size:22px; font-weight:800; padding:0 0 3px; border-bottom:none; }
/* Internal task: amber title bar + active toggle */
.tk-title-bar.tk-internal { background:#fff7ed; border-bottom-color:#fed7aa; }
.tk-internal-btn { display:inline-flex; align-items:center; gap:5px; margin-bottom:6px; padding:4px 11px; border:1px solid #e5e7eb; border-radius:999px; background:#f9fafb; color:#6b7280; font-size:11px; font-weight:700; cursor:pointer; transition:all .15s; }
.tk-internal-btn:hover { border-color:#fdba74; color:#b45309; }
.tk-internal-btn.on { background:#b45309; border-color:#b45309; color:#fff; }
.tk-internal-btn i { font-size:11px; }
.tk-title-crumb { display:inline-flex; align-items:center; gap:6px; max-width:100%; margin-top:3px; font-size:11px; font-weight:600; color:#6b7280; cursor:pointer; padding:3px 9px; border-radius:8px; background:rgba(0,0,0,.035); transition:background .15s, color .15s; box-sizing:border-box; }
.tk-title-crumb:hover { background:rgba(0,113,227,.09); color:var(--accent); }
.tk-title-crumb .fa-sitemap { font-size:9px; color:#0071e3; flex-shrink:0; }
.tk-title-crumb.has-value .fa-sitemap { color:inherit; }
/* The routing path takes the flexible space and truncates from the LEFT (direction:rtl
   with LTR content) so the project › phase — the useful end — stays visible when space
   is tight, instead of the workspace at the start. */
.tk-title-crumb .tk-crumb-path { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:rtl; }
.tk-title-crumb .tk-crumb-path > * { direction:ltr; }
.tk-title-crumb .tk-crumb-owner { flex-shrink:0; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.tk-title-crumb .tk-crumb-owner:empty { display:none; }
.tk-title-crumb .tk-crumb-owner .fa-crown { color:#f59e0b; font-size:9px; }
.tk-title-crumb .tk-crumb-sep { color:#d1d5db; margin:0 3px 0 1px; }
.tk-title-crumb-caret { font-size:8px; opacity:.55; flex-shrink:0; }

.tk-block { display:flex; flex-direction:column; gap:5px; padding-bottom:10px; border-bottom:1px solid #f0f0f5; }
.tk-block:last-child { border-bottom:none; padding-bottom:0; }
.tk-label { font-size:9px; font-weight:800; color:#6b7280; text-transform:uppercase; letter-spacing:.07em; padding-bottom:3px; border-bottom:2px solid var(--ws-accent,#e5e7eb); display:inline-block; width:auto; align-self:flex-start; }

.tk-pri-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.tk-status-grid { display:flex; flex-wrap:wrap; gap:4px; }
/* Status & Priority: dense grids (3 and 4 buttons) squeezed into the sidebar's
   ~230px card width — the shared chip padding/font (built for standalone pills
   like Team/Vendors) was wide enough to overrun or wrap here. This compact
   variant keeps the same radius/border system but shrinks padding+font and
   forces everything onto one row per grid, with ellipsis as a safety net
   instead of wrapping. Applied via ID+class so it wins over the plain
   .tk-status-grid/.tk-pri-grid rules (including their mobile overrides). */
#status-track.tk-grid-compact { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
#pri-track.tk-grid-compact { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.tk-grid-compact.tk-status-grid .tk-status,
.tk-grid-compact.tk-pri-grid .tk-pri {
    padding:6px 3px; font-size:9.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Status bar for desktop - visible like other inline elements */
.tk-pri {
    padding:var(--tk-chip-pad); border-radius:var(--tk-radius); border:1px solid var(--tk-chip-border);
    background:#fff; font-size:var(--tk-chip-font); font-weight:600; cursor:pointer;
    text-align:center; transition:all .12s; white-space:nowrap; line-height:1.3;
    color:#6b7280;
}
.tk-pri:hover { background:#f3f4f6; }
.tk-pri.active[data-q="Q1"] { background:#ef4444; border-color:#ef4444; color:#fff; }
.tk-pri.active[data-q="Q2"] { background:#f59e0b; border-color:#f59e0b; color:#fff; }
.tk-pri.active[data-q="Q3"] { background:#0071e3; border-color:#0071e3; color:#fff; }
.tk-pri.active[data-q="Q4"] { background:#6b7280; border-color:#6b7280; color:#fff; }

.tk-chip {
    display:inline-flex; align-items:center; gap:5px;
    padding:5px 10px; border-radius:8px; border:1px solid #e9ecef;
    font-size:11px; font-weight:600; cursor:pointer; color:#6b7280;
    background:#fff; transition:all .12s; white-space:nowrap; user-select:none;
}
.tk-chip input { display:none; }
.tk-chip i { font-size:10px; }
.tk-chip.on { background:#111827; color:#fff; border-color:#111827; }

/* ===== STANDARDIZED FORM ELEMENTS ===== */
.tk-input-std, .tk-sel, input.tk-sched-dp, input.luma-dp-input {
    display:block; width:100%; 
    border:1px solid #e5e7eb; border-radius:8px;
    padding:8px 10px; font-size:13px; background:#fff; outline:none;
    -webkit-appearance:none; font-family:inherit; color:#111827;
    cursor:pointer; box-sizing:border-box; transition:border-color .15s;
}
.tk-input-std:focus, .tk-sel:focus, input.tk-sched-dp:focus, input.luma-dp-input:focus {
    border-color:#0071e3; box-shadow:0 0 0 3px rgba(0,113,227,.08);
}
.tk-input-std::placeholder, .tk-sel::placeholder { color:#d1d5db; }

/* Time inputs */
.tk-input-std[type="time"] {
    width:80px; flex-shrink:0;
}

/* Number inputs */
.tk-input-std[type="number"] {
    width:60px; -moz-appearance:textfield;
}
.tk-input-std[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; }

/* Select dropdowns */
.tk-sel {
    padding-right:28px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239ca3af'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 8px center; background-size:16px;
}

/* Pill/Button standardized */
.tk-pill-std {
    display:inline-flex; align-items:center; gap:5px; padding:var(--tk-chip-pad);
    border-radius:var(--tk-radius); background:#fff; border:1px solid var(--tk-chip-border);
    font-size:var(--tk-chip-font); font-weight:600; color:#374151; cursor:pointer;
    white-space:nowrap; transition:all .12s;
}
.tk-pill-std:hover { background:#e5e7eb; border-color:#d1d5db; }
.tk-pill-std.has-value { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.tk-pill-std.on { background:#111827; color:#fff; border-color:#111827; }
/* Priority pill colour states (shared desktop+mobile) */
#tk-priority-pill.pri-q1 { background:#fef2f2; border-color:#fecaca; color:#dc2626; }
#tk-priority-pill.pri-q2 { background:#fffbeb; border-color:#fed7aa; color:#d97706; }
#tk-priority-pill.pri-q3 { background:#eff6ff; border-color:#bfdbfe; color:#2563eb; }
#tk-priority-pill.pri-q4 { background:#f9fafb; border-color:#e5e7eb; color:#6b7280; }
/* Status pill */
#tk-status-pill { background:#fff7ed; border:1px solid #fed7aa; border-radius:10px; color:#c2410c; }
#tk-status-pill.s-todo { background:#fff7ed; border-color:#fed7aa; color:#c2410c; }
#tk-status-pill.s-in_progress { background:#dbeafe; border-color:#bfdbfe; color:#1d4ed8; }
#tk-status-pill.s-review { background:#fef3c7; border-color:#fde68a; color:#b45309; }
#tk-status-pill.s-completed { background:#dcfce7; border-color:#bbf7d0; color:#15803d; }
#tk-status-pill.s-blocked { background:#fee2e2; border-color:#fecaca; color:#dc2626; }
/* Status pill icon colors */
#tk-status-pill .fa-circle { color:#c2410c; }
#tk-status-pill.s-in_progress .fa-circle { color:#1d4ed8; }
#tk-status-pill.s-review .fa-circle { color:#b45309; }
#tk-status-pill.s-completed .fa-circle { color:#15803d; }
#tk-status-pill.s-blocked .fa-circle { color:#dc2626; }
/* Status grid buttons */
.tk-status { padding:var(--tk-chip-pad); border-radius:var(--tk-radius); border:1px solid var(--tk-chip-border); background:#fff; font-size:var(--tk-chip-font); font-weight:600; cursor:pointer; transition:all .12s; color:#6b7280; white-space:nowrap; text-align:center; }
.tk-status:hover { background:#f3f4f6; border-color:#d1d5db; }
.tk-status.active, .tk-status[data-s="todo"].active { background:#fff7ed; border-color:#fed7aa; color:#c2410c; }
.tk-status[data-s="in_progress"].active { background:#dbeafe; border-color:#bfdbfe; color:#1d4ed8; }
.tk-status[data-s="review"].active { background:#fef3c7; border-color:#fde68a; color:#b45309; }
.tk-status[data-s="completed"].active { background:#dcfce7; border-color:#bbf7d0; color:#15803d; }
.tk-status[data-s="blocked"].active { background:#fee2e2; border-color:#fecaca; color:#dc2626; }
/* Workflow-status pill list (pops out from its own pill, one row per stage) —
   each of the 9 stages gets its own color (light tint bg + matching border +
   saturated text, same formula as the Status/Priority pills) instead of one
   flat blue, so the pipeline position reads at a glance both in the list and
   on the trigger pill itself (data-ws is mirrored onto #tk-workflow-pill by
   updateWorkflowStatusBar()). Loosely ordered cool→warm→green as the stages
   move from planning toward completion. */
.tk-workflow-opt.active,
#tk-workflow-pill { background:#fff; border-color:var(--tk-chip-border); color:#374151; }
.tk-workflow-opt.active[data-ws="Project Initiation"],
#tk-workflow-pill[data-ws="Project Initiation"] { background:#f1f5f9; border-color:#cbd5e1; color:#475569; }
.tk-workflow-opt.active[data-ws="Design Development"],
#tk-workflow-pill[data-ws="Design Development"] { background:#ede9fe; border-color:#ddd6fe; color:#6d28d9; }
.tk-workflow-opt.active[data-ws="Design Review"],
#tk-workflow-pill[data-ws="Design Review"] { background:#fdf4ff; border-color:#f5d0fe; color:#9333ea; }
.tk-workflow-opt.active[data-ws="Cost Estimation"],
#tk-workflow-pill[data-ws="Cost Estimation"] { background:#fffbeb; border-color:#fde68a; color:#b45309; }
.tk-workflow-opt.active[data-ws="Final Sign-off"],
#tk-workflow-pill[data-ws="Final Sign-off"] { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.tk-workflow-opt.active[data-ws="Procurement & Sourcing"],
#tk-workflow-pill[data-ws="Procurement & Sourcing"] { background:#ecfeff; border-color:#a5f3fc; color:#0e7490; }
.tk-workflow-opt.active[data-ws="Build - Construction"],
#tk-workflow-pill[data-ws="Build - Construction"] { background:#fff7ed; border-color:#fed7aa; color:#c2410c; }
.tk-workflow-opt.active[data-ws="Quality Assurance & Snagging"],
#tk-workflow-pill[data-ws="Quality Assurance & Snagging"] { background:#fefce8; border-color:#fde047; color:#a16207; }
.tk-workflow-opt.active[data-ws="Handover - Complete"],
#tk-workflow-pill[data-ws="Handover - Complete"] { background:#dcfce7; border-color:#bbf7d0; color:#15803d; }
/* Routing pill */
#tk-routing-pill.has-value { background:#f0fdf4; border-color:#bbf7d0; color:#166534; }

/* Fields toggle: only visible on mobile */
.tk-fields-toggle { display: none; }
.tk-pill-std i { font-size:10px; }
.tk-pill-std .badge, .tt-opt .badge {
    background:#0071e3; color:#fff; padding:1px 6px; border-radius:8px;
    font-size:9px; margin-left:auto;
}

/* Small button style */
.t-btn { font-size: 12px; cursor: pointer; background: #f5f5f7; border:none; padding:4px 6px; border-radius:4px; color:var(--text); transition: 0.2s; display:inline-flex; align-items:center; gap:4px;} .t-btn:hover { background: #e8e8ed; } .t-btn.del:hover { background: #fee2e2; color: #ff3b30; }

.tk-btn-sm {
    padding:6px 10px; border-radius:8px; background:#0071e3; color:#fff;
    border:none; font-size:11px; font-weight:600; cursor:pointer; transition:all .12s;
}
.tk-btn-sm:hover { background:#005bb5; }

.tk-sel {
    display:block; width:100%; border:1px solid #e9ecef; border-radius:8px;
    padding:7px 10px; font-size:12px; background:#fff; outline:none;
    -webkit-appearance:none; font-family:inherit; color:#111827;
    cursor:pointer; box-sizing:border-box; transition:border-color .15s;
}
.tk-sel:focus { border-color:#0071e3; box-shadow:0 0 0 3px rgba(0,113,227,.08); }

.tk-field-row { display:flex; align-items:center; gap:7px; }

/* Unified Schedule Pill */
.tk-schedule-pill {
    display:flex; align-items:center; gap:6px; padding:var(--tk-chip-pad);
    border-radius:var(--tk-radius); background:#fff; border:1px solid var(--tk-chip-border);
    font-size:var(--tk-chip-font); font-weight:600; color:#374151; cursor:pointer;
    white-space:nowrap; transition:all .12s; width:100%; box-sizing:border-box;
}
.tk-schedule-pill:hover { background:#e5e7eb; border-color:#d1d5db; }
/* The whole pill is one tap target: make its children non-interactive so a tap
   anywhere on it (the date/time label OR the "0 hrs" duration) hits the pill's
   own onclick and opens the schedule — a tap on the label used to miss. */
.tk-schedule-pill > * { pointer-events: none; }
.tk-schedule-pill.has-value { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.tk-schedule-pill .fa-chevron-down { transition:transform .12s; margin-left:auto; }
.tk-schedule-pill.open .fa-chevron-down { transform:rotate(180deg); }

/* Compact schedule row - all inputs on one line */
.tk-sched-compact-row { display:flex; align-items:center; gap:5px; flex-wrap:nowrap; position:relative; }
.tk-input-xs { padding:5px 7px !important; font-size:11px !important; border:1px solid #e5e7eb !important; border-radius:6px !important; background:#fff !important; outline:none !important; }

/* Hide unused legacy elements */
.tk-route-pills, .tk-route-pill, .tk-route-drop,
.task-chips-row, .tk-schedule-inline { display:none !important; }
/* Fields toggle hidden on desktop, shown on mobile via media query */
.tk-fields-toggle { display:none; }

.tk-fields-body { display:flex; flex-direction:column; gap:10px; overflow-x:visible; }
.tk-field-group { display:flex; flex-direction:column; gap:4px; }
.tk-field-label { font-size:9px; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.05em; }

.tk-route-drop {
    background:#fff; border:1px solid #e5e7eb; border-radius:8px;
    padding:8px; margin-bottom:4px; display:flex; flex-direction:column; gap:4px;
    width:100%; box-sizing:border-box;
}

/* Schedule Sections */
.tk-sched-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tk-sched-row input[type="text"].tk-input-std { min-width: 120px; flex: 1; }
.tk-sched-row input[type="time"] { min-width: 80px; }

/* Time Grid - 4 columns x 6 rows (24 hours, 30-min intervals per cell) */
.tk-time-grid { margin-top:8px; }
.tk-time-grid-header { font-size:9px; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.tk-time-grid-container {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:3px;
    max-height:180px; overflow-y:auto;
}
.tk-time-slot {
    padding:4px 2px; border-radius:4px; border:1px solid #e5e7eb;
    background:#fff; font-size:9px; font-weight:500; text-align:center;
    cursor:pointer; transition:all .1s; user-select:none;
}
.tk-time-slot:hover { background:#f3f4f6; border-color:#d1d5db; }
.tk-time-slot.selected { background:#0071e3; border-color:#0071e3; color:#fff; }
.tk-time-slot.non-work { color:#6b7280; background:#f9fafb; }
.tk-time-slot.non-work:hover { background:#f0f0f0; }
.tk-time-slot.work { color:#111827; }

/* Time Picker Inline (like calendar) */
.tk-time-picker-wrap { position:relative; min-height:30px; z-index: 999999; }

/* ── Spotlight command palette (⌘K) ─────────────────────────────────────────── */
.cmdk-overlay { position: fixed; inset: 0; z-index: 10000070; display: none; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; background: rgba(15,23,42,.42); backdrop-filter: blur(3px); animation: fadeIn .12s ease; }
.cmdk-overlay.open { display: flex; }
.cmdk-box { width: 620px; max-width: 100%; max-height: 72vh; display: flex; flex-direction: column; background: var(--card-bg,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 16px; box-shadow: 0 30px 80px rgba(15,23,42,.35); overflow: hidden; animation: commsPop .14s ease; }
.cmdk-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border,#eef1f5); }
.cmdk-ico { color: #94a3b8; font-size: 16px; }
.cmdk-input { flex: 1; border: none; outline: none; font-size: 17px; background: transparent; color: var(--text,#0f172a); font-family: inherit; }
.cmdk-esc { border: 1px solid var(--border,#e5e7eb); background: #f8fafc; color: #64748b; font-size: 11px; font-weight: 700; border-radius: 7px; padding: 4px 9px; cursor: pointer; }
.cmdk-results { flex: 1; overflow-y: auto; padding: 6px; }
.cmdk-hint { text-align: center; color: #9ca3af; font-size: 13px; padding: 34px 16px; }
.cmdk-group { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; padding: 10px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.cmdk-item.sel { background: #eff6ff; }
.cmdk-item-ico { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.cmdk-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmdk-item-title { font-size: 14px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item-sub { font-size: 11.5px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cmdk-item-kind { font-size: 10px; font-weight: 700; color: #94a3b8; flex-shrink: 0; text-transform: uppercase; letter-spacing: .03em; }
.cmdk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border,#eef1f5); font-size: 11px; color: #94a3b8; }
.cmdk-foot i { margin-right: 4px; }
.cmdk-kbd { font-weight: 600; }
@media (max-width: 768px) { .cmdk-overlay { padding: 8px; align-items: stretch; } .cmdk-box { width: 100%; max-height: 100%; border-radius: 14px; } }

/* ── Universal time dropdown ──────────────────────────────────────────────────
   A reliable, tappable list of times shown for EVERY <input type="time"> (the
   native picker is inconsistent across browsers/webviews — this guarantees a
   working picker everywhere: task modal, subtasks, quick-add, routines). */
.gtp-pop {
    position: fixed; z-index: 10000060; width: 150px; overflow-y: auto;
    -webkit-overflow-scrolling: touch; background: #fff;
    border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
    box-shadow: 0 14px 40px rgba(15,23,42,.22); padding: 5px; animation: fadeIn .12s ease;
}
.gtp-slot { padding: 8px 12px; border-radius: 8px; font-size: 13px; color: #334155; cursor: pointer; white-space: nowrap; }
.gtp-slot:hover { background: #f1f5f9; }
.gtp-slot.work { color: #0f172a; font-weight: 600; }
.gtp-slot.non-work { color: #94a3b8; }
.gtp-slot.sel { background: var(--accent, #0071e3); color: #fff; font-weight: 700; }

/* Time picker — styled to match the calendar (date) picker (.luma-dp-popup). */
.tk-time-picker {
    position: fixed;
    z-index: 10000002 !important;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
    padding: 14px;
    width: 236px;
    display: none;
    animation: fadeIn 0.15s ease;
}
/* Mobile: center the time picker like the calendar popup */
@media (max-width: 768px) {
    /* Schedule rows must fit the mobile sheet — the Date+Time+clear row was
     overflowing so the time field and its × ran off the right edge. */
  .tk-dt-drop.tk-layer-floating .tk-sched-compact-row { gap: 4px; }
  .tk-dt-drop.tk-layer-floating .tk-sched-compact-row .tk-dt-drop-lbl { width: 36px !important; flex-shrink: 0; }
  .tk-dt-drop.tk-layer-floating .tk-sched-compact-row > .tk-input-std:first-of-type,
  .tk-dt-drop.tk-layer-floating .tk-sched-compact-row > input[id$="-date"] { flex: 1 1 auto; min-width: 0; }
  .tk-dt-drop.tk-layer-floating .tk-time-picker-wrap .tk-input-xs { width: 66px !important; }
  .tk-time-picker {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 280px;
        padding: 16px;
        z-index: 10000002 !important;
    }
}
.tk-time-picker-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:10px; padding-bottom:0; border-bottom:none;
}
.tk-time-picker-header span { font-size:13px !important; font-weight:600 !important; color:var(--text); }
.tk-time-picker-header button {
    cursor:pointer; border:none !important; background:#f5f5f7 !important;
    width:24px; height:24px; border-radius:6px; color:var(--text) !important;
    font-weight:bold; font-size:12px !important; line-height:1; padding:0;
    display:flex; align-items:center; justify-content:center;
}
.tk-time-picker-header button:hover { background:#e8e8ed !important; }
.tk-time-picker-grid {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:4px;
    max-height:248px; overflow-y:auto;
}
.tk-time-picker-slot {
    padding:8px 0; text-align:center; font-size:12px; font-weight:500;
    cursor:pointer; border-radius:8px; border:1px solid transparent;
    background:transparent; color:var(--text); transition:.15s;
}
.tk-time-picker-slot.work { color:var(--text); }
.tk-time-picker-slot.non-work { color:#9ca3af; }
.tk-time-picker-slot:hover { background:rgba(0,113,227,0.1); color:var(--accent); }
.tk-time-picker-slot.selected { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.tk-dt-drop { 
    background:#fff; border:1px solid #e5e7eb; border-radius:10px; 
    padding:10px 12px; margin-bottom:6px; display:flex; flex-direction:column; gap:6px;
    width:100%; box-sizing:border-box; overflow:visible; z-index: 99999;
}
.tk-dt-drop-row { display:flex; align-items:center; gap:6px; }
.tk-dt-drop-lbl { font-size:9px; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; width:32px; flex-shrink:0; }
.tk-sched-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
/* Schedule 2-column grid in sidebar */
.tk-sched-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 8px; }
.tk-sched-full { grid-column:1 / -1; }
.tk-sched-cell { display:flex; flex-direction:column; gap:3px; }
.tk-sched-cell-lbl { font-size:9px; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; }
.tk-sched-dp { width:100%; border:1px solid #dbeafe !important; border-radius:6px; padding:5px 7px; font-size:11px; background:#f0f7ff; cursor:pointer; box-sizing:border-box; font-family:inherit; outline:none; }
.tk-sched-dp:focus { border-color:#0071e3 !important; background:#fff; }
.tk-sched-time { width:100%; border:1px solid #dbeafe; border-radius:6px; padding:5px 4px; font-size:11px; background:#f0f7ff; outline:none; font-family:inherit; box-sizing:border-box; }
.tk-sched-time:focus { border-color:#0071e3; background:#fff; }
.tk-sched-sel { width:100%; border:1px solid #e9ecef; border-radius:6px; padding:5px 7px; font-size:11px; background:#fff; outline:none; font-family:inherit; -webkit-appearance:none; cursor:pointer; grid-column:1/-1; }
.tk-field-lbl { font-size:10px; font-weight:600; color:#6b7280; width:52px; flex-shrink:0; }
.tk-dt {
    flex:1; display:flex; border:1px solid #e9ecef; border-radius:8px;
    background:#fff; overflow:hidden; align-items:center;
}
.tk-dt:focus-within { border-color:#0071e3; box-shadow:0 0 0 3px rgba(0,113,227,.08); }
.tk-dt input[type=text] {
    flex:1; border:none !important; background:transparent !important;
    padding:6px 9px; font-size:11px; outline:none !important;
    cursor:pointer; font-family:inherit; color:#111827; min-width:0;
}
.tk-dt input[type=time] {
    border:none !important; border-left:1px solid #e9ecef !important;
    background:transparent !important; padding:6px 5px; font-size:11px;
    outline:none !important; width:82px; flex-shrink:0;
    font-family:inherit; color:#111827;
}
.tk-dt input::placeholder { color:#d1d5db; }

.assignee-item { display:flex; align-items:center; gap:6px; padding:3px 0; font-size:11px; border-bottom:1px solid #f3f4f6; }
.assignee-item:last-child { border-bottom:none; }
.assignee-avatar { width:24px; height:24px; border-radius:50%; background:#0071e3; color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Right content area */
.tk-right { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; background:#fff; }

.tk-tabs {
    display:flex; background:#fff; border-bottom:2px solid #f3f4f6;
    flex-shrink:0; overflow-x:auto;
}
.tk-tabs::-webkit-scrollbar { height:0; }
.tk-tab {
    padding:10px 15px; font-size:11px; font-weight:600; color:#6b7280;
    cursor:pointer; border:none; background:transparent;
    border-bottom:2px solid transparent; margin-bottom:-2px;
    transition:all .15s; white-space:nowrap; flex-shrink:0;
}
.tk-tab:hover:not(.active) { color:#374151; background:#fafafa; }
.tk-tab.active { color:var(--ws-accent,#0071e3); border-bottom-color:var(--ws-accent,#0071e3); }
/* Hide more tabs toggle and panel on desktop */
.tk-more-tabs-toggle { display: none !important; }
.tk-more-tabs-panel { display: none !important; }
.tk-tab-more { display: block !important; }
#tab-btn-meeting { display:none; }
#tab-btn-meeting.show { display:block; }
#tab-btn-meeting.show.active { color:#a855f7; border-bottom-color:#a855f7; }
#tab-btn-photos.active { color:#22c55e; border-bottom-color:#22c55e; }
#tab-btn-subtasks.active { color:#f59e0b; border-bottom-color:#f59e0b; }
#tab-btn-vendors.active { color:#ef4444; border-bottom-color:#ef4444; }
#tab-btn-audit.active { color:#6b7280; border-bottom-color:#6b7280; }
#tab-btn-files.active { color:#8b5cf6; border-bottom-color:#8b5cf6; }
/* #047857 (not the brighter #10b981 used for the icon accent below) —
   the brighter shade is ~2.5:1 on white and fails WCAG AA for text this
   small; this still reads as the same emerald identity at ~5.5:1. */
#tab-btn-details.active { color:#047857; border-bottom-color:#047857; }
.tab-dirty-dot { width:5px; height:5px; border-radius:50%; background:#f59e0b; display:none; margin-left:2px; vertical-align:middle; }
.tab-dirty-dot.show { display:inline-block; }
.tk-tab-badge { font-size:9px; background:#f3f4f6; color:#6b7280; padding:1px 5px; border-radius:8px; margin-left:2px; display:none; }
.tk-tab-badge.show { display:inline; }
/* Sub-tab bar inside the grouped "Files" tab (Links / Files / Photos) */
.tk-subtabs { display:flex; gap:2px; background:#f9fafb; border-bottom:1px solid #f3f4f6; padding:0 6px; flex-shrink:0; }
.tk-subtab { background:transparent; border:none; border-bottom:2px solid transparent; padding:8px 12px; font-size:12px; font-weight:600; color:#6b7280; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.tk-subtab.active { color:var(--ws-accent,#0071e3); border-bottom-color:var(--ws-accent,#0071e3); }
.tk-subtab:hover:not(.active) { color:#374151; }
/* Editor initials chip */
.edit-by-chip { display:inline-flex; align-items:center; gap:4px; font-size:10px; color:#6b7280; margin-top:4px; flex-shrink:0; }
.edit-by-avatar { width:18px; height:18px; border-radius:50%; background:#e5e7eb; color:#6b7280; font-size:8px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }

.tk-pane { display:none; flex:1; min-height:0; flex-direction:column; background:#fff; overflow:hidden; }
.tk-pane.active { display:flex; }

.tk-pane-body { padding:16px 20px; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.tk-pane-body::-webkit-scrollbar { width:4px; }
.tk-pane-body::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:2px; }
.tk-textarea {
    border:1px solid #e9ecef; border-radius:8px; padding:10px 12px;
    font-size:13px; background:#fafafa; outline:none; resize:none;
    font-family:inherit; color:#111827; line-height:1.65;
    box-sizing:border-box; width:100%; flex-shrink:0;
    transition:border-color .15s;
}
.tk-textarea:focus { border-color:#0071e3; background:#fff; box-shadow:0 0 0 3px rgba(0,113,227,.08); }
.tk-textarea::placeholder { color:#d1d5db; }
.tk-divider {
    font-size:9px; font-weight:800; color:#d1d5db; text-transform:uppercase;
    letter-spacing:.1em; display:flex; align-items:center; gap:8px;
    flex-shrink:0;
}
.tk-divider::after { content:''; flex:1; height:1px; background:#f3f4f6; }

/* ── Details tab 2-column layout ─────────────────────────── */
#tab-pane-details .tkd-layout {
    display:flex; flex:1; min-height:0; overflow:hidden;
}
.tkd-col {
    display:flex; flex-direction:column; overflow-y:auto;
    padding:18px 20px;
}
.tkd-col::-webkit-scrollbar { width:3px; }
.tkd-col::-webkit-scrollbar-thumb { background:#e5e7eb; border-radius:2px; }
.tkd-col-main  { flex:1.6; border-right:1px solid #f0f0f5; background:#fff; gap:0; }
.tkd-col-side  { flex:1; background:#fafafa; gap:0; }
.tkd-sec-head {
    display:flex; align-items:center; gap:6px;
    font-size:9px; font-weight:800; color:#6b7280;
    text-transform:uppercase; letter-spacing:.07em;
    padding-bottom:10px; margin-bottom:12px;
    border-bottom:1px solid #f0f0f5; flex-shrink:0;
}
.tkd-sec-head i { font-size:10px; color:#10b981; }
/* #b45309 is the same accessible amber already used everywhere else in the
   app (status pills, badges, chips) — #d97706 here was a one-off that only
   hit ~3.2:1 on this column's off-white background, below WCAG AA. */
.tkd-sec-head.tkd-private { color:#b45309; }
.tkd-sec-head.tkd-private i { color:#b45309; }
.tkd-autosave {
    margin-left:auto; font-size:9px; font-weight:500;
    color:#6b7280; text-transform:none; letter-spacing:0;
}
.tkd-area {
    width:100%; border:none; background:transparent;
    font-size:13px; color:#111827; font-family:inherit;
    line-height:1.72; resize:none; outline:none; padding:0;
    box-sizing:border-box; flex-shrink:0;
}
.tkd-area::placeholder { color:#d1d5db; }
.tkd-area-desc { min-height:220px; }
.tkd-area-notes { font-size:12.5px; min-height:140px; }
/* #6b7280 matches the sibling section-head label (~4.8:1 on white) —
   #d1d5db was ~1.5:1, close to invisible. */
.tkd-wordcount { margin-left:auto; font-size:9px; color:#6b7280; font-weight:500; text-transform:none; letter-spacing:0; }
.tkd-subsec { flex-shrink:0; }
.tkd-subsec-head { display:flex; align-items:center; gap:5px; font-size:9px; font-weight:800; color:#6b7280; text-transform:uppercase; letter-spacing:.07em; padding-bottom:5px; border-bottom:1px solid #f0f0f5; margin-bottom:4px; }
.tkd-add-btn { margin-left:auto; background:transparent; border:none; color:#0071e3; cursor:pointer; font-size:11px; padding:1px 4px; border-radius:4px; }
.tkd-add-btn:hover { background:#eff6ff; }
.tkd-subsec-badge { font-size:9px; background:#f3f4f6; color:#6b7280; padding:1px 5px; border-radius:6px; margin-left:auto; }
/* Quick Links — shown as a compact icon row (not a text list) so they're scannable
   at a glance while working the task; hover reveals the label via showFastTooltip. */
.tkd-link-icon-wrap { position:relative; display:inline-block; }
.tkd-link-icon-del { position:absolute; top:-5px; right:-5px; width:14px; height:14px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #e9ecef; border-radius:50%; color:#6b7280; cursor:pointer; font-size:8px; padding:0; opacity:0; transition:opacity .12s; }
.tkd-link-icon-wrap:hover .tkd-link-icon-del { opacity:1; }
.tkd-link-icon-del:hover { color:#ef4444; border-color:#ef4444; }
.tkd-tags-inp { width:100%; border:1px solid #e9ecef; border-radius:7px; padding:5px 8px; font-size:11px; font-family:inherit; outline:none; color:#111827; background:#fff; box-sizing:border-box; }
.tkd-tags-inp:focus { border-color:#8b5cf6; }
.tkd-file-mini { display:flex; align-items:center; gap:5px; padding:3px 5px; border-radius:6px; background:#f9fafb; border:1px solid #f3f4f6; font-size:10px; }
.tkd-file-mini a { flex:1; color:#374151; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.tkd-file-mini a:hover { color:#0071e3; }
.tkd-file-mini span { color:#6b7280; flex-shrink:0; }

/* on mobile: stack the two columns */
@media (max-width:768px) {
    #tab-pane-details .tkd-layout { flex-direction:column; overflow-y:auto; overflow-x:hidden; }
    .tkd-col-main { border-right:none; border-bottom:1px solid #f0f0f5; flex-shrink:0; }
    .tkd-col-side { flex-shrink:0; }
}

/* Meeting tab */
.tk-mtg-bar {
    display:flex; gap:10px; padding:10px 14px;
    border-bottom:1px solid #f3f4f6; background:#fafafa;
    flex-shrink:0; flex-wrap:wrap; align-items:flex-end;
}
.tk-mtg-field { display:flex; flex-direction:column; gap:4px; }
.tk-mtg-acc-head { display:flex; align-items:center; gap:8px; padding:10px 14px; cursor:pointer; background:#fff; border-bottom:1px solid #f0f0f5; transition:background .12s; flex-shrink:0; }
.tk-mtg-acc-head:hover { background:#fafafa; }
.tk-mtg-acc-icon-wrap { width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tk-mtg-acc-icon-wrap i { font-size:11px; }
.tk-mtg-acc-title { font-size:12px; font-weight:700; color:#111827; flex-shrink:0; }
.tk-mtg-acc-preview { font-size:11px; color:#6b7280; margin-left:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:160px; }
.tk-mtg-acc-caret { font-size:10px; color:#6b7280; transition:transform .2s; flex-shrink:0; }
.tk-mtg-acc-caret.open { transform:rotate(180deg); }
.tk-mtg-acc-body { padding:12px 14px; background:#fafafa; border-bottom:1px solid #f0f0f5; flex-shrink:0; }
.tk-col-head {
    display:flex; align-items:center; padding:7px 12px;
    font-size:10px; font-weight:700; color:#6b7280;
    text-transform:uppercase; letter-spacing:.06em;
    background:#fafafa; border-bottom:1px solid #f3f4f6; flex-shrink:0;
}
.mtg-tab {
    padding:8px 14px; font-size:11px; font-weight:600; color:#6b7280;
    cursor:pointer; border:none; background:transparent;
    border-bottom:2px solid transparent; margin-bottom:-2px;
    transition:all .15s; white-space:nowrap;
}
.mtg-tab.active { color:#a855f7; border-bottom-color:#a855f7; }
.mtg-tab:hover:not(.active) { color:#374151; background:#f9fafb; }
.mtg-inner-pane { display:none; flex:1; min-height:0; padding:12px 14px; overflow-y:auto; }
.mtg-inner-pane.active { display:flex; flex-direction:column; }
.mtg-notes-area { width:100%; flex:1; min-height:200px; border:none; background:transparent; font-family:inherit; font-size:13px; color:#111827; resize:none; outline:none; line-height:1.7; }
.mtg-notes-area::placeholder { color:#d1d5db; }
.mtg-autosave { font-size:10px; color:#6b7280; margin-left:6px; font-weight:400; text-transform:none; letter-spacing:0; }
.agenda-item { display:flex; align-items:flex-start; gap:8px; padding:6px 0; border-bottom:1px solid #f3f4f6; }
.agenda-item:last-child { border-bottom:none; }
.agenda-num { width:20px; height:20px; border-radius:50%; background:#0071e3; color:#fff; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
/* Agenda items — premium card design */
.agenda-item-card { background:#fff; border:1px solid #e9ecef; border-radius:10px; margin-bottom:6px; overflow:hidden; transition:box-shadow .15s, border-color .15s; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.agenda-item-card:hover { box-shadow:0 2px 10px rgba(0,0,0,.07); border-color:#d1d5db; }
.agenda-item-card.drag-over { border-color:#0071e3; box-shadow:0 0 0 2px rgba(0,113,227,.18); }
.agenda-item-card.dragging { opacity:0.4; }
.ag-grip { cursor:grab; color:#d1d5db; font-size:10px; padding:2px; flex-shrink:0; margin-top:2px; transition:color .15s; }
.ag-grip:hover { color:#6b7280; }
.agenda-item-card.agenda-group-card { background:#f8f9ff; border-style:dashed; border-color:#c7d2fe; }
.agenda-item-top { display:flex; align-items:flex-start; gap:7px; padding:7px 10px 5px; }
.agenda-num { width:22px; height:22px; border-radius:7px; background:var(--ws-accent,#0071e3); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; box-shadow:0 2px 5px rgba(0,113,227,.25); }
.agenda-item-notes-wrap { background:#f9fafb; border-top:1px solid #f0f0f5; }
.agenda-item-notes-label { display:flex; align-items:center; gap:4px; font-size:8px; font-weight:700; color:#b0b0bc; text-transform:uppercase; letter-spacing:.06em; padding:4px 10px 1px; }
.agenda-text { flex:1; font-size:12.5px; background:transparent; border:none; outline:none; font-family:inherit; color:#111827; padding:1px 0; resize:none; min-height:22px; line-height:1.45; font-weight:600; }
.agenda-text::placeholder { color:#d1d5db; font-weight:400; }
.agenda-notes { width:100%; font-size:11.5px; background:transparent; border:none; outline:none; font-family:inherit; color:#4b5563; padding:2px 10px 6px; resize:none; min-height:22px; line-height:1.55; box-sizing:border-box; }
.agenda-notes::placeholder { color:#c7c7cc; font-style:italic; }
.agenda-group-input { flex:1; font-size:11px; font-weight:800; background:transparent; border:none; outline:none; font-family:inherit; color:#6366f1; padding:2px 0; resize:none; min-height:20px; letter-spacing:.06em; text-transform:uppercase; }
.agenda-group-input::placeholder { color:#c7d2fe; }
.agenda-del { background:transparent; border:none; color:#e5e7eb; cursor:pointer; padding:2px 5px; border-radius:5px; font-size:11px; flex-shrink:0; transition:all .15s; }
.agenda-del:hover { color:#ef4444; background:#fff1f2; }
.agenda-make-task { background:transparent; border:none; color:#c7c7cc; cursor:pointer; padding:2px 5px; border-radius:5px; font-size:11px; flex-shrink:0; transition:all .15s; }
.agenda-make-task:hover { color:#0071e3; background:#eff6ff; }
.ag-photo-strip { display:flex; gap:6px; align-items:flex-start; padding:6px 8px 8px; overflow-x:auto; }
.ag-photo-thumb { flex-shrink:0; width:56px; display:flex; flex-direction:column; gap:2px; }
.ag-photo-thumb img { width:56px; height:56px; object-fit:cover; border-radius:7px; border:1px solid #e5e7eb; cursor:pointer; background:#f3f4f6; }
.ag-photo-caption { width:56px; box-sizing:border-box; border:1px solid #e5e7eb; border-radius:5px; padding:2px 4px; font-size:9px; font-family:inherit; outline:none; }
.ag-photo-add { flex-shrink:0; width:56px; height:56px; border:1px dashed #d1d5db; border-radius:7px; background:transparent; color:#6b7280; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:all .15s; }
.ag-photo-add:hover { border-color:#0071e3; color:#0071e3; background:#eff6ff; }
.agenda-assign-btn { background:transparent; border:none; color:#c7c7cc; cursor:pointer; padding:2px 6px; border-radius:5px; font-size:10px; font-weight:600; flex-shrink:0; transition:all .15s; white-space:nowrap; }
.agenda-assign-btn:hover { color:#7c3aed; background:#f5f3ff; }
.agenda-assignee-chip { display:inline-flex; align-items:center; gap:3px; background:#f5f3ff; color:#7c3aed; border-radius:10px; padding:2px 6px; font-size:10px; font-weight:600; flex-shrink:0; white-space:nowrap; }
.agenda-assignee-chip button { background:none; border:none; color:#7c3aed; cursor:pointer; font-size:9px; padding:0 0 0 2px; opacity:.7; }
.agenda-assignee-chip button:hover { opacity:1; }
/* ── Project Setup Wizard ── */
.wiz-label { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; display:block; margin:14px 0 6px; }
.wiz-label:first-child { margin-top:0; }
.wiz-input { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; outline:none; font-family:inherit; background:#fff; box-sizing:border-box; margin-bottom:2px; }
.wiz-input:focus { border-color:var(--accent); }
.wiz-step-dot { flex:1; height:4px; border-radius:2px; background:var(--border); transition:background .2s; }
.wiz-step-dot.active { background:var(--accent); }
.wiz-step-dot.done { background:#34c759; }
.wiz-cat-card { border:1.5px solid var(--border); border-radius:10px; padding:10px 12px; cursor:pointer; transition:all .15s; }
.wiz-cat-card i { font-size:14px; color:var(--muted); }
.wiz-cat-card .wiz-cat-name { font-size:12px; font-weight:700; color:var(--text); margin:5px 0 2px; }
.wiz-cat-card .wiz-cat-desc { font-size:9.5px; color:var(--muted); line-height:1.3; }
.wiz-cat-card:hover { border-color:#93c5fd; background:#f8fbff; }
.wiz-cat-card.selected { border-color:var(--accent); background:#eff6ff; }
.wiz-cat-card.selected i { color:var(--accent); }
.wiz-phase-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:#fff; }
.wiz-phase-row.unchecked { opacity:.45; }
.wiz-phase-chk { width:16px; height:16px; border-radius:5px; border:1.5px solid #c7c7cc; flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff; transition:all .12s; }
.wiz-phase-row:not(.unchecked) .wiz-phase-chk { background:var(--accent); border-color:var(--accent); }
.wiz-phase-name { flex:1; border:none; outline:none; font-size:12.5px; font-family:inherit; background:transparent; color:var(--text); min-width:0; }
.wiz-phase-del { background:none; border:none; color:#d1d5db; cursor:pointer; font-size:11px; padding:2px 5px; flex-shrink:0; }
.wiz-phase-del:hover { color:#ef4444; }
/* Subtask groups */
.sub-group-row { display:flex; align-items:center; gap:6px; padding:8px 0 4px; border-bottom:2px solid #e5e7eb; margin-bottom:4px; }
.sub-group-input { flex:1; font-size:11px; font-weight:700; color:#6b7280; background:transparent; border:none; outline:none; font-family:inherit; text-transform:uppercase; letter-spacing:.04em; }
.sub-group-input::placeholder { color:#d1d5db; }
.sub-group-del { background:transparent; border:none; color:#d1d5db; cursor:pointer; font-size:11px; padding:2px 4px; }
.sub-group-del:hover { color:#ef4444; }
/* Compact sidebar for full-screen */
@media (min-height: 700px) {
    .tk-left { gap:8px; }
    .tk-block { padding-bottom:8px; }
}

/* Subtask items — compact 2-column card */
.sub-item { display:flex; flex-direction:column; background:#fff; border:1px solid #e9ecef; border-radius:9px; margin-bottom:4px; overflow:hidden; transition:box-shadow .15s, border-color .15s; }
.sub-item:hover { box-shadow:0 2px 8px rgba(0,0,0,.06); border-color:#d1d5db; }
.sub-item.drag-over { border-color:#0071e3; box-shadow:0 0 0 2px rgba(0,113,227,.15); }
.sub-item.dragging { opacity:0.4; }
.sub-item.done-sub { opacity:.75; }
.sub-item-header { display:flex; align-items:center; gap:6px; padding:5px 8px; border-bottom:1px solid #f3f4f6; background:#fafbfc; min-height:30px; }
.sub-grip { cursor:grab; color:#d1d5db; font-size:10px; flex-shrink:0; }
.sub-grip:hover { color:#6b7280; }
.sub-chk { width:16px; height:16px; border-radius:50%; border:2px solid #d1d5db; flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; background:#fff; }
.sub-chk:hover { border-color:#22c55e; }
.sub-item.done-sub .sub-chk { background:#22c55e; border-color:#22c55e; }
.sub-item.done-sub .sub-chk::after { content:'✓'; color:#fff; font-size:8px; font-weight:900; }
.sub-title-inp { flex:1; font-size:12px; font-weight:600; color:#111827; min-width:0; border:none; outline:none; background:transparent; font-family:inherit; padding:0 2px; }
.sub-title-inp::placeholder { color:#c7c7cc; font-weight:400; }
.sub-item.done-sub .sub-title-inp { text-decoration:line-through; opacity:.5; }
.sub-action-btn { background:none; border:none; color:#d1d5db; cursor:pointer; font-size:11px; padding:2px 4px; border-radius:4px; flex-shrink:0; transition:color .15s; }
.sub-action-btn:hover { color:#6b7280; background:#f3f4f6; }
.sub-action-btn.danger:hover { color:#ef4444; background:#fff0f0; }
.sub-action-btn.promote:hover { color:#0071e3; background:#eff6ff; }
.sub-body { display:flex; min-height:0; }
.sub-left { width:160px; flex-shrink:0; padding:5px 8px; background:#fafafa; border-right:1px solid #f0f0f5; display:flex; flex-direction:column; gap:3px; }
.sub-right { flex:1; min-width:0; padding:5px 8px; display:flex; flex-direction:column; gap:2px; }
.sub-field-row { display:flex; align-items:center; gap:3px; }
.sub-field-lbl { font-size:8px; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; width:22px; flex-shrink:0; }
.sub-date-inp { font-size:10px; border:1px solid #e5e7eb; border-radius:5px; padding:2px 5px; color:#374151; background:#fff; cursor:pointer; outline:none; width:82px; transition:border-color .15s; }
.sub-date-inp:focus { border-color:#0071e3; }
.sub-time-inp { font-size:10px; border:1px solid #e5e7eb; border-radius:5px; padding:2px 4px; color:#374151; background:#fff; outline:none; width:58px; transition:border-color .15s; }
.sub-time-inp:focus { border-color:#0071e3; }
.sub-sched-pill {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 8px; border-radius:10px; background:#f3f4f6;
    border:1px solid #e5e7eb; font-size:10px; font-weight:600;
    color:#6b7280; cursor:pointer; white-space:nowrap;
    transition:background .12s, border-color .12s; flex-shrink:0;
}
.sub-sched-pill:hover { background:#e5e7eb; border-color:#d1d5db; }
.sub-sched-drop {
    background:#fff; border:1px solid #e5e7eb; border-radius:8px;
    padding:8px 10px; margin-top:4px; display:flex;
    flex-direction:column; gap:5px;
}
.sub-sched-row { display:flex; align-items:center; gap:5px; }
.sub-sched-lbl { font-size:9px; font-weight:700; color:#6b7280; width:28px; flex-shrink:0; }
.sub-dp { flex:1; border:1px solid #e5e7eb !important; border-radius:6px; padding:4px 7px; font-size:11px; cursor:pointer; background:#fff; min-width:0; }
.sub-due-inp { font-size:10px; border:1px solid #fee2e2; border-radius:5px; padding:2px 5px; color:#ef4444; background:#fff; cursor:pointer; outline:none; width:82px; }
.sub-due-inp:focus { border-color:#ef4444; }
.sub-recur-inp { font-size:10px; border:1px solid #e5e7eb; border-radius:5px; padding:2px 4px; background:#fff; color:#374151; outline:none; width:100%; max-width:140px; }
.sub-notes-inp { flex:1; min-height:24px; font-size:11px; color:#4b5563; border:none; outline:none; background:transparent; font-family:inherit; resize:none; line-height:1.45; padding:1px 0; }
.sub-notes-inp::placeholder { color:#c7c7cc; font-style:italic; font-size:10px; }
.sub-date-row { display:none; } /* legacy - hidden */
.dep-card { background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:8px 10px; display:flex; gap:8px; align-items:flex-start; }
.dep-card-title { font-size:12px; font-weight:600; color:#111827; }
.dep-card-meta { font-size:10px; color:#6b7280; margin-top:2px; }
.dep-search-result { padding:7px 10px; border-radius:7px; font-size:12px; color:#374151; cursor:pointer; border:1px solid #e5e7eb; background:#fff; display:flex; align-items:center; gap:6px; }
.dep-search-result:hover { background:#eff6ff; border-color:#0071e3; }

/* Vendor pills (DB-backed) */
.vendor-pill { display:inline-flex; align-items:center; gap:5px; background:#fff8e1; color:#92400e; border:1px solid #fde68a; border-radius:20px; padding:3px 10px 3px 8px; font-size:11px; font-weight:600; max-width:100%; }
.vendor-pill-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; }
.vendor-pill-actions { display:inline-flex; align-items:center; gap:3px; flex-shrink:0; }
.vendor-pill-actions a { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; font-size:10px; text-decoration:none; transition:background .15s; }
.vendor-pill-actions a.wa { color:#25d366; } .vendor-pill-actions a.wa:hover { background:#dcfce7; }
.vendor-pill-actions a.call { color:#0071e3; } .vendor-pill-actions a.call:hover { background:#eff6ff; }
.vendor-pill-actions a.mail { color:#8b5cf6; } .vendor-pill-actions a.mail:hover { background:#f5f3ff; }
.vendor-pill button.rm { background:none; border:none; color:#6b7280; cursor:pointer; padding:0; font-size:10px; line-height:1; margin-left:2px; } .vendor-pill button.rm:hover { color:#ef4444; }
/* ── Workspace Modal ──────────────────────────────────────────────────── */
.ws-box { width:600px; max-width:96vw; max-height:88vh; background:#fff; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 24px 64px rgba(0,0,0,.16); }
.ws-header { display:flex; align-items:center; gap:14px; padding:20px 24px 16px; border-bottom:1px solid #e9ecef; flex-shrink:0; }
.ws-header-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; cursor:pointer; transition:opacity .15s; }
.ws-header-icon:hover { opacity:.8; }
.ws-name-inp { font-size:22px; font-weight:800; border:none; background:transparent; padding:0; flex:1; min-width:0; letter-spacing:-.03em; color:#111827; outline:none; }
.ws-name-inp::placeholder { color:#d1d5db; font-weight:400; }
.ws-close-btn { background:transparent; border:none; padding:6px 8px; cursor:pointer; color:#6b7280; font-size:16px; flex-shrink:0; }
.ws-close-btn:hover { color:#374151; }
.ws-tabs { display:flex; gap:0; padding:0 24px; border-bottom:1px solid #f0f0f5; flex-shrink:0; overflow-x:auto; }
.ws-tabs::-webkit-scrollbar { height:0; }
.ws-tab { background:transparent; border:none; border-bottom:2px solid transparent; padding:12px 14px; font-size:12px; font-weight:600; color:#6b7280; cursor:pointer; white-space:nowrap; transition:all .15s; display:flex; align-items:center; gap:5px; }
.ws-tab:hover { color:#374151; }
.ws-tab.active { color:#0071e3; border-bottom-color:#0071e3; }
.ws-pane { flex:1; overflow-y:auto; padding:20px 24px; display:none; }
.ws-pane.active { display:block; }
.ws-footer { display:flex; align-items:center; justify-content:space-between; padding:14px 24px; border-top:1px solid #f0f0f5; flex-shrink:0; }
.ws-field-row { margin-bottom:14px; }
.ws-field-row label { display:block; font-size:11px; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; }
.ws-field-row input[type=text] { width:100%; box-sizing:border-box; border:1px solid #e5e7eb; border-radius:9px; padding:9px 12px; font-size:13px; outline:none; font-family:inherit; }
.ws-field-row input[type=text]:focus { border-color:#0071e3; }
.ws-color-row { display:flex; gap:8px; flex-wrap:wrap; }
.ws-color-dot { width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .12s; }
.ws-color-dot:hover { transform:scale(1.15); }
.ws-color-dot.active { border-color:#1a1a1f; transform:scale(1.1); }
.ws-icon-grid { display:grid; grid-template-columns:repeat(auto-fill,32px); gap:4px; max-height:130px; overflow-y:auto; padding:4px; border:1px solid #e5e7eb; border-radius:9px; }
.ws-icon-item { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:6px; cursor:pointer; font-size:13px; color:#6b7280; transition:all .12s; }
.ws-icon-item:hover { background:#f3f4f6; color:#0071e3; }
.ws-icon-item.active { background:#eff6ff; color:#0071e3; }
.ws-toggle-row { display:flex; align-items:center; gap:8px; padding:10px 12px; background:#fafafa; border:1px solid #e5e7eb; border-radius:9px; margin-bottom:8px; cursor:pointer; }
.ws-toggle-row label { font-size:13px; font-weight:500; color:#374151; cursor:pointer; flex:1; }
.ws-type-seg { display:flex; gap:4px; }
.ws-type-btn { flex:1; padding:7px 6px; border:1px solid #e5e7eb; border-radius:8px; background:#f9fafb; font-size:11px; font-weight:600; color:#6b7280; cursor:pointer; text-align:center; transition:all .15s; }
.ws-type-btn:hover { border-color:#d1d5db; color:#374151; }
.ws-type-btn.active[data-type="company"] { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.ws-type-btn.active[data-type="internal"] { background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
.ws-type-btn.active[data-type="personal"] { background:#faf5ff; border-color:#ede9fe; color:#7c3aed; }
.kpi-tab-section { margin-bottom:20px; }
.kpi-tab-header { display:flex; align-items:center; gap:8px; padding:10px 16px; background:#f9fafb; border-bottom:1px solid #e5e7eb; font-size:12px; font-weight:700; color:#374151; }
.kpi-tab-table { width:100%; border-collapse:collapse; font-size:11px; }
.kpi-tab-table th { padding:6px 10px; text-align:left; font-size:10px; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid #f3f4f6; background:#fafafa; white-space:nowrap; }
.kpi-tab-table th.r,.kpi-tab-table td.r { text-align:right; }
.kpi-tab-table td { padding:6px 10px; border-bottom:1px solid #f9fafb; color:#374151; vertical-align:middle; }
.kpi-tab-table tr:hover td { background:#f9fafb; }
.kpi-tab-ws-row td { background:#f3f4f6; font-weight:700; color:#111827; }
.kpi-tab-ws-row:hover td { background:#eff6ff; }
.kpi-bar { display:inline-block; height:4px; border-radius:2px; vertical-align:middle; margin-left:4px; }
.kpi-tab-controls { display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid #e9ecef; background:#fff; flex-wrap:wrap; }
.kpi-sort-btn { padding:4px 10px; border:1px solid #e5e7eb; border-radius:6px; background:#f9fafb; font-size:10px; font-weight:700; color:#6b7280; cursor:pointer; }
.kpi-sort-btn.active { background:#eff6ff; border-color:#bfdbfe; color:#0071e3; }
.ws-loc-card { display:flex; align-items:center; gap:10px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; margin-bottom:7px; }
.ws-loc-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.ws-loc-name { font-size:13px; font-weight:600; color:#1a1a1f; }
.ws-loc-addr { font-size:11px; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-loc-del { background:none; border:none; color:#d1d5db; cursor:pointer; padding:4px 6px; font-size:12px; flex-shrink:0; border-radius:6px; }
.ws-loc-del:hover { color:#ef4444; background:#fef2f2; }
.ws-add-loc-row { display:flex; gap:6px; margin-bottom:6px; }
.ws-add-loc-row input { flex:1; box-sizing:border-box; border:1px solid #e5e7eb; border-radius:8px; padding:8px 10px; font-size:12px; outline:none; font-family:inherit; }
.ws-add-loc-row input:focus { border-color:#0071e3; }
.ws-preset-chip { background:#f0f0f5; border:none; border-radius:8px; padding:5px 10px; font-size:11px; font-weight:600; cursor:pointer; color:#374151; transition:background .12s; }
.ws-preset-chip:hover { background:#e5e7eb; }
.ws-member-row { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:9px; margin-bottom:6px; }
.ws-member-name { font-size:13px; font-weight:600; color:#1a1a1f; }
.ws-member-email { font-size:11px; color:#6b7280; }
.ws-member-del { background:none; border:none; color:#6b7280; cursor:pointer; padding:4px 8px; font-size:12px; border-radius:6px; }
.ws-member-del:hover { color:#ef4444; background:#fef2f2; }
.ws-member-role { font-size:11px; font-weight:700; color:#374151; border:1px solid #e5e7eb; border-radius:6px; padding:4px 6px; outline:none; font-family:inherit; flex-shrink:0; }
/* Vendor card in project modal */
.vendor-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px; display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.vendor-card-icon { width:34px; height:34px; border-radius:50%; background:#fff8e1; color:#f59e0b; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.vendor-card-body { flex:1; min-width:0; }
.vendor-card-name { font-size:13px; font-weight:700; color:#1a1a1f; margin-bottom:3px; }
.vendor-card-meta { font-size:11px; color:#6b7280; display:flex; flex-wrap:wrap; gap:6px; }
.vendor-card-meta a { color:#0071e3; text-decoration:none; display:inline-flex; align-items:center; gap:3px; } .vendor-card-meta a:hover { text-decoration:underline; }
.vendor-card-tasks { font-size:10px; color:#6b7280; margin-top:4px; }
/* Daily labour numbers pushed from Attos */
.vendor-strength-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; padding:9px 12px; margin-bottom:10px; font-size:12px; font-weight:700; }
.vendor-strength-bar .vsb-present { color:#15803d; display:inline-flex; align-items:center; gap:5px; }
.vendor-strength-bar .vsb-assigned { color:#4338ca; display:inline-flex; align-items:center; gap:5px; }
.vendor-strength-bar .vsb-date { color:#9ca3af; font-weight:600; margin-left:auto; font-size:11px; }
.vendor-card-strength { display:flex; gap:5px; flex-shrink:0; align-self:center; }
.vendor-card-strength span { display:inline-flex; align-items:center; gap:3px; padding:3px 7px; border-radius:7px; font-size:11px; font-weight:700; }
.vendor-card-strength .vcs-present { background:#dcfce7; color:#15803d; }
.vendor-card-strength .vcs-assigned { background:#eef2ff; color:#4338ca; }
/* Dashboard on-site labour chip (workmen by project / per task, from Attos) */
.wm-chip { display:inline-flex; align-items:center; gap:3px; flex-shrink:0; background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; border-radius:6px; padding:1px 6px; font-size:10px; font-weight:800; line-height:1.7; white-space:nowrap; }
.wm-chip i { font-size:9px; }
.wm-chip .wm-chip-as { color:#6b7280; font-weight:700; }
/* Legacy vendor-chip kept for compat */
.vendor-chip { display:inline-flex; align-items:center; gap:4px; background:#eff6ff; color:#0071e3; border-radius:5px; padding:3px 8px; font-size:11px; font-weight:600; }
.vendor-chip button { background:none; border:none; color:#0071e3; cursor:pointer; padding:0 2px; font-size:11px; opacity:.5; }
.vendor-chip button:hover { opacity:1; }
.tm-autofill { position:relative; }
.tm-autofill-list { position:absolute; top:calc(100% + 3px); left:0; right:0; background:#fff; border:1px solid #e9ecef; border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.1); z-index:600; display:none; max-height:160px; overflow-y:auto; }
.tm-autofill-list.open { display:block; }
.tm-af-item { padding:8px 12px; font-size:12px; cursor:pointer; color:#111827; display:flex; align-items:center; border-bottom:1px solid #f3f4f6; }
.tm-af-item:last-child { border-bottom:none; }
.tm-af-item:hover { background:#eff6ff; color:#0071e3; }

/* Comments */
.c-list { display:flex; flex-direction:column; }
.c-msg { padding:10px 0; border-bottom:1px solid #f3f4f6; font-size:13px; }
.c-msg:last-child { border-bottom:none; }
.c-meta { font-size:10px; color:#6b7280; margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.c-author { font-weight:700; color:#374151; }

/* Footer */
.tk-footer {
    display:flex; align-items:center; gap:8px;
    padding:10px 16px; background:#fff; border-top:1px solid #e9ecef;
    flex-shrink:0; border-radius:0 0 16px 16px;
}

/* ── Mobile-only elements: hidden on desktop ─────────────── */
.tk-fields-toggle { display: none; }      /* Details toggle (mobile only) */
.tk-mobile-bar    { display: none; }      /* Title echo + Save btn (mobile only) */
.db-filter-toggle { display: none; }      /* Dashboard Filters btn (mobile only) */
/* Fields body: always shown on desktop */
.tk-fields-body { display: flex; flex-direction: column; gap: 10px; overflow-x: visible; }
/* Dashboard filter inner: always visible on desktop */
.db-filter-inner { display: flex; flex-wrap: wrap; gap: 6px; }

/* Workspace / project color dot in routing selects */
.tk-color-sel-wrap { display: flex; align-items: center; gap: 5px; }
.tk-ws-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #d1d5db; flex-shrink: 0; display: block;
    transition: background .2s;
}

/* Task modal workspace accent */
.task-box { --ws-accent: #0071e3; }
.task-box .m-box::before { background: var(--ws-accent); opacity: 0.15; }

/* dt-pill (used outside task modal left panel) */
.dt-pill { display:flex; border:1px solid #e9ecef; border-radius:8px; background:#fafafa; overflow:hidden; }
.dt-pill:focus-within { border-color:#0071e3; background:#fff; box-shadow:0 0 0 3px rgba(0,113,227,.08); }
.dt-pill input { border:none !important; background:transparent !important; padding:7px 8px; font-size:12px; outline:none !important; margin:0 !important; font-family:inherit; }
.dt-pill input+input { border-left:1px solid #e9ecef !important; }
.dp-clear-btn { background:transparent; border:none; border-left:1px solid #e9ecef; padding:0 8px; cursor:pointer; color:#d1d5db; font-size:11px; }
.dp-clear-btn:hover { color:#ef4444; }

/* ════════════════════════════════════════════════════════════
   PROJECT MODAL
════════════════════════════════════════════════════════════ */
.pj-box {
    width: 860px; max-width: 96vw; height: 90vh; max-height: 90vh;
    background: #fff; border-radius: 18px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,.16);
}
/* ── Project modal header ────────────────────────────────────────── */
.pj-header {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px 14px; border-bottom: 1px solid #e9ecef;
    flex-shrink: 0; background: #fff; position: relative;
}
/* Avatar — colored circle with icon */
.pj-avatar-wrap { position: relative; flex-shrink: 0; }
.pj-avatar {
    width: 52px; height: 52px; border-radius: 14px;
    background: #0071e3; display: flex; align-items: center; justify-content: center;
    cursor: default; transition: all .15s; flex-shrink: 0;
}
.pj-avatar.editable { cursor: pointer; }
.pj-avatar.editable:hover { filter: brightness(1.1); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.pj-avatar i { font-size: 22px; color: #fff; pointer-events: none; }
/* Avatar picker dropdown */
.pj-avatar-picker {
    display: none; position: absolute; z-index: 9999; top: calc(100% + 8px); left: 0;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
    padding: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.18); width: 240px;
}
.pj-avatar-picker.show { display: block; }
.pj-ap-label { font-size: 9px; font-weight: 800; color: #6b7280; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.pj-ap-colors { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pj-ap-color { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: .12s; flex-shrink: 0; }
.pj-ap-color:hover { transform: scale(1.15); }
.pj-ap-color.sel { border-color: #fff; box-shadow: 0 0 0 2px currentColor; }
.pj-ap-icons { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.pj-ap-icon {
    font-size: 15px; padding: 8px 0; border-radius: 7px; cursor: pointer;
    color: #6b7280; text-align: center; transition: .12s;
    display: flex; align-items: center; justify-content: center;
}
.pj-ap-icon:hover { background: #eff6ff; color: #0071e3; }
.pj-ap-icon.sel { background: #eff6ff; color: #0071e3; }
/* Header info */
.pj-header-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pj-name-inp {
    font-size: 20px; font-weight: 800; border: none; background: transparent;
    padding: 0; width: 100%; letter-spacing: -.02em; color: #111827; outline: none;
}
.pj-name-inp::placeholder { color: #d1d5db; font-weight: 400; }
.pj-name-inp:focus { border-bottom: 1.5px solid #0071e3; }
.pj-desc-inp {
    font-size: 12px; border: none; background: transparent; padding: 0;
    width: 100%; color: #6b7280; outline: none;
}
.pj-desc-inp::placeholder { color: #d1d5db; }
.pj-desc-inp:focus { border-bottom: 1px solid #e5e7eb; }
.pj-header-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pj-code-badge { font-size: 10px; font-weight: 800; color: #0071e3; background: #eff6ff; padding: 2px 9px; border-radius: 5px; letter-spacing: .06em; white-space: nowrap; }
.pj-stage-badge { font-size: 10px; font-weight: 600; padding: 2px 9px; border-radius: 12px; background: #f3f4f6; color: #6b7280; white-space: nowrap; }
.pj-ws-badge { font-size: 10px; color: #6b7280; display: flex; align-items: center; gap: 3px; }
/* Header actions */
.pj-header-actions { display: flex; gap: 5px; flex-shrink: 0; align-items: center; }
.pj-btn-primary { background: #0071e3; color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background .15s; }
.pj-btn-primary:hover { background: #005ec4; }
.pj-btn-secondary { background: #f3f4f6; border: none; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer; color: #374151; display: inline-flex; align-items: center; gap: 5px; transition: background .15s; }
.pj-btn-secondary:hover { background: #e5e7eb; }
.pj-btn-ghost { background: transparent; border: none; border-radius: 8px; padding: 7px 9px; font-size: 13px; cursor: pointer; color: #6b7280; transition: .12s; display: inline-flex; align-items: center; }
.pj-btn-ghost:hover { background: #f3f4f6; color: #374151; }
.pj-btn-ghost.danger:hover { background: #fff1f2; color: #ef4444; }
.pj-btn-close { background: transparent; border: none; padding: 6px 7px; cursor: pointer; color: #6b7280; font-size: 16px; border-radius: 6px; }
.pj-btn-close:hover { color: #374151; background: #f3f4f6; }
/* Larger hit areas + a divider so the danger Delete isn't flush against Close (misclick). */
.pj-header-actions .pj-btn-ghost, .pj-header-actions .pj-btn-close { min-width: 36px; min-height: 36px; justify-content: center; }
.pj-head-divider { width: 1px; height: 22px; background: var(--border); margin: 0 4px; align-self: center; flex-shrink: 0; }
.pj-tabs {
    display: flex; background: #fafafa; border-bottom: 1px solid #e9ecef;
    flex-shrink: 0; overflow-x: auto;
}
.pj-tabs::-webkit-scrollbar { height: 0; }
.pj-tab {
    padding: 10px 20px; font-size: 12px; font-weight: 600; color: #6b7280;
    cursor: pointer; border: none; background: transparent;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: all .15s; white-space: nowrap; display: flex; align-items: center; gap: 6px;
}
.pj-tab:hover:not(.active) { color: #374151; background: #f3f4f6; }
.pj-tab.active { color: #0071e3; border-bottom-color: #0071e3; background: #fff; }
.pj-pane { display: none; overflow-y: auto; flex: 1; min-height: 0; padding: 20px 24px; }
.pj-pane.active { display: block; }
.pj-pane.pj-flex-pane.active { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
/* Finish Day Banner */
.proj-launch-banner { display:flex; align-items:center; gap:18px; padding:10px 24px; background:#f9fafb; border-bottom:1px solid #e5e7eb; flex-shrink:0; overflow:hidden; }
.proj-launch-banner.good    { background:#f0fdf4; border-color:#bbf7d0; }
.proj-launch-banner.warn    { background:#fffbeb; border-color:#fcd34d; }
.proj-launch-banner.urgent  { background:#fff7ed; border-color:#fdba74; }
.proj-launch-banner.critical{ background:#fef2f2; border-color:#fca5a5; }
.proj-launch-banner.overdue { background:#fef2f2; border-color:#ef4444; }
/* countdown block */
.proj-countdown-block { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:58px; }
.proj-countdown-emoji { font-size:17px; line-height:1; }
.proj-countdown-num   { font-size:28px; font-weight:900; line-height:1.1; letter-spacing:-.03em; color:#6b7280; transition:color .25s; }
.proj-launch-banner.good     .proj-countdown-num { color:#16a34a; }
.proj-launch-banner.warn     .proj-countdown-num { color:#d97706; }
.proj-launch-banner.urgent   .proj-countdown-num { color:#ea580c; }
.proj-launch-banner.critical .proj-countdown-num { color:#dc2626; }
.proj-launch-banner.overdue  .proj-countdown-num { color:#dc2626; }
.proj-countdown-label { font-size:9px; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.05em; margin-top:1px; white-space:nowrap; }
/* centre info — nowrap prevents wrapping */
.proj-launch-info { flex:1; min-width:0; overflow:hidden; }
.proj-launch-name { font-size:10px; font-weight:800; color:#6b7280; text-transform:uppercase; letter-spacing:.09em; white-space:nowrap; }
.proj-launch-sub  { font-size:12.5px; color:#111827; font-weight:500; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* progress bar */
.proj-launch-bar-wrap { height:4px; background:#e5e7eb; border-radius:3px; margin-top:5px; overflow:hidden; }
.proj-launch-bar { height:100%; border-radius:3px; background:#16a34a; width:0%; transition:width .4s; }
.proj-launch-banner.warn    .proj-launch-bar { background:#d97706; }
.proj-launch-banner.urgent  .proj-launch-bar { background:#ea580c; }
.proj-launch-banner.critical .proj-launch-bar,.proj-launch-banner.overdue .proj-launch-bar { background:#dc2626; }
/* date inputs on right — stacked */
.proj-launch-dates { display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.proj-launch-date-row { display:flex; align-items:center; gap:5px; }
.proj-launch-date-lbl { font-size:9px; font-weight:700; color:#6b7280; text-transform:uppercase; width:28px; text-align:right; flex-shrink:0; }
.proj-launch-date-inp { font-size:11.5px; border:1px solid #d1d5db; border-radius:7px; padding:3px 8px; background:#fff; color:#374151; outline:none; cursor:pointer; width:120px; transition:border-color .15s; }
.proj-launch-date-inp:focus { border-color:#0071e3; }
.proj-launch-date-inp:disabled { background:transparent; color:#6b7280; cursor:default; border-color:transparent; padding:3px 2px; }
/* Project Chat */
.proj-chat-wrap { display:flex; flex-direction:column; height:100%; gap:0; }
.proj-chat-messages { flex:1; overflow-y:auto; padding:12px 4px; display:flex; flex-direction:column; gap:8px; min-height:0; }
.proj-msg { display:flex; gap:8px; align-items:flex-start; }
.proj-msg.mine { flex-direction:row-reverse; }
.proj-msg-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; flex-shrink:0; margin-top:2px; }
.proj-msg-body { max-width:72%; }
.proj-msg.mine .proj-msg-body { align-items:flex-end; }
.proj-msg-bubble { background:#f3f4f6; border-radius:14px 14px 14px 4px; padding:8px 12px; font-size:12.5px; color:#111827; line-height:1.5; word-break:break-word; }
.proj-msg.mine .proj-msg-bubble { background:var(--accent,#0071e3); color:#fff; border-radius:14px 14px 4px 14px; }
.proj-msg-meta { font-size:9px; color:#6b7280; margin-top:2px; padding:0 4px; }
.proj-msg.mine .proj-msg-meta { text-align:right; }
.proj-msg-del { background:none; border:none; cursor:pointer; color:#fca5a5; font-size:9px; padding:0 3px; opacity:0; transition:opacity .15s; }
.proj-msg:hover .proj-msg-del { opacity:1; }
.proj-chat-input-wrap { padding:10px 0 0; border-top:1px solid #e9ecef; flex-shrink:0; }
.proj-chat-inp { width:100%; border:1px solid #e5e7eb; border-radius:12px; padding:9px 12px; font-size:13px; font-family:inherit; resize:none; min-height:40px; max-height:100px; outline:none; box-sizing:border-box; background:#f9fafb; }
.proj-chat-inp:focus { border-color:#0071e3; background:#fff; }
/* Project Notes */
.proj-notes-area { width:100%; min-height:280px; border:none; background:transparent; font-family:inherit; font-size:13px; color:#111827; resize:none; outline:none; line-height:1.75; padding:0; }
.proj-notes-meta { font-size:10px; color:#6b7280; display:flex; align-items:center; gap:6px; padding-top:8px; border-top:1px solid #f3f4f6; margin-top:8px; }
/* Notes history */
.notes-hist-item { padding:7px 10px; border-bottom:1px solid #f3f4f6; cursor:pointer; transition:background .12s; }
.notes-hist-item:last-child { border-bottom:none; }
.notes-hist-item:hover { background:#f0f0ff; }
.notes-hist-meta { font-size:9.5px; color:#6b7280; display:flex; align-items:center; gap:6px; }
.notes-hist-preview { font-size:11px; color:#6b7280; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pj-info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 20px; min-height: 0; }
.pj-col { display: flex; flex-direction: column; gap: 0; }
.pj-section-title {
    font-size: 10px; font-weight: 800; color: #6b7280; text-transform: uppercase;
    letter-spacing: .08em; margin-bottom: 10px; padding-bottom: 6px;
    border-bottom: 1px solid #f3f4f6;
}
.pj-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.pj-field-row { display: flex; gap: 8px; margin-bottom: 10px; }
.pj-lbl { font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; }
.pj-ref-lbl { font-size: 9px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.pj-ref-inp { padding: 6px 8px !important; font-size: 12px !important; }
.proj-field {
    width: 100%; box-sizing: border-box; display: block;
    border: 1px solid #e9ecef; border-radius: 8px;
    padding: 7px 10px; font-size: 12px; font-family: inherit;
    color: #111827; background: #fafafa; outline: none;
    -webkit-appearance: none; transition: border-color .15s;
}
.proj-field:focus { border-color: #0071e3; background: #fff; box-shadow: 0 0 0 3px rgba(0,113,227,.08); }
.proj-field::placeholder { color: #d1d5db; }
.proj-field:disabled { background: #fafafa; color: #374151; border-color: transparent; cursor: default; }

/* Buttons/radios inside edit-gated rows (e.g. Phases) need to be enabled/disabled in
   sync with .proj-field via setProjFieldsEnabled, but must NOT inherit .proj-field's
   width:100%/display:block — that stretched buttons to fill their row, hiding whatever
   sat next to them. This class only toggles disabled/opacity, no sizing. */
.proj-field-ctl:disabled { opacity: .5; cursor: default; }

.pj-phase-card { border: 1px solid #e8e8ed; border-radius: 10px; padding: 12px 14px; background: #fff; }
.pj-phase-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pj-phase-name-inp { flex: 1; font-size: 13px; font-weight: 600; min-width: 0; border: 1px solid #e9ecef; border-radius: 8px; padding: 7px 10px; font-family: inherit; color: #111827; background: #fafafa; outline: none; }
.pj-phase-name-inp:focus { border-color: #0071e3; background: #fff; box-shadow: 0 0 0 3px rgba(0,113,227,.08); }
.pj-phase-del-btn { background: #fff0f0; border: none; border-radius: 7px; width: 30px; height: 30px; flex-shrink: 0; color: #ff3b30; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.pj-phase-del-btn:hover:not(:disabled) { background: #ffe0e0; }
.pj-phase-card-body { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pj-phase-date-grp { display: flex; flex-direction: column; gap: 4px; }
.pj-phase-date-grp span { font-size: 9px; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.pj-phase-date-grp input[type=date] { border: 1px solid #e8e8ed; border-radius: 7px; padding: 6px 8px; font-size: 12px; font-family: inherit; outline: none; }
.pj-phase-derive-btn { background: #eff6ff; border: none; border-radius: 7px; padding: 7px 10px; font-size: 11px; font-weight: 700; color: #3b82f6; cursor: pointer; white-space: nowrap; }
.pj-phase-derive-btn:hover:not(:disabled) { background: #dbeafe; }
.pj-phase-active-group { display: flex; gap: 12px; align-items: center; margin-left: auto; }
.pj-phase-radio { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; cursor: pointer; }

.pjl-tasklink-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 8px; border: 1px solid #f0f0f5; margin-bottom: 6px; }
.pjl-tasklink-row:hover { background: #fafbfc; }
.pjl-tasklink-name { font-size: 12px; font-weight: 600; color: #1a1a1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pjl-tasklink-date { font-size: 10px; color: #6b7280; margin-top: 2px; }
.pjl-tasklink-title { font-size: 12px; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pjl-tasklink-open-btn { background: #eff6ff; border: none; border-radius: 7px; padding: 5px 12px; font-size: 11px; font-weight: 700; color: #3b82f6; cursor: pointer; white-space: nowrap; }
.pjl-tasklink-open-btn:hover { background: #dbeafe; }

/* Project tab colour variants */
#ptab-btn-timeline.active { color: #f59e0b; border-bottom-color: #f59e0b; }
#ptab-btn-folders.active { color: #22c55e; border-bottom-color: #22c55e; }
#ptab-btn-filelinks.active { color: #0071e3; border-bottom-color: #0071e3; }
#ptab-btn-vendors.active { color: #f59e0b; border-bottom-color: #f59e0b; }
.flink-group { margin-bottom:14px; }
.flink-group-head { font-size:10px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;padding:4px 0 6px;border-bottom:1px solid #f0f0f5;margin-bottom:6px;display:flex;align-items:center;gap:5px; }
.flink-group-head i { color:#0071e3; }
.flink-item { display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;background:#fff;border:1px solid #e9ecef;margin-bottom:4px;transition:border-color .15s; }
.flink-item:hover { border-color:#d1d5db; }
.flink-item a { flex:1;font-size:12px;color:#0071e3;text-decoration:none;word-break:break-all;font-weight:500; }
.flink-item a:hover { text-decoration:underline; }
.flink-label-txt { font-size:11px;color:#374151;font-weight:600;flex-shrink:0;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.flink-del { background:transparent;border:none;color:#e5e7eb;cursor:pointer;padding:3px 6px;border-radius:5px;font-size:11px;transition:all .15s;flex-shrink:0; }
.flink-del:hover { color:#ef4444;background:#fff1f2; }
#ptab-btn-notes.active { color: #8b5cf6; border-bottom-color: #8b5cf6; }
#ptab-btn-chat.active { color: #0ea5e9; border-bottom-color: #0ea5e9; }
/* ── Dashboard tab ───────────────────────────────────────── */
#ptab-btn-dash.active { color:#0071e3; border-bottom-color:#0071e3; }
.pj-dash-wrap { padding:14px 16px; }
.pj-dash-progress-wrap { background:linear-gradient(135deg,#eff6ff,#f0f9ff);border:1px solid #bfdbfe;border-radius:14px;padding:14px 18px;margin-bottom:12px; }
.pj-kpi-row { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px; }
.pj-kpi-card { background:#fff;border:1px solid #e5e7eb;border-radius:11px;padding:10px 8px;text-align:center;transition:box-shadow .15s,transform .15s;cursor:pointer; }
.pj-kpi-card:hover { box-shadow:0 2px 10px rgba(0,0,0,.08);transform:translateY(-1px); }
.pj-kpi-num { font-size:20px;font-weight:900;color:#1a1a1f;line-height:1; }
.pj-kpi-label { font-size:9px;font-weight:700;color:#6b7280;margin-top:3px;text-transform:uppercase;letter-spacing:.04em; }
/* Dashboard main grid — tasks (primary) + right rail; responsive */
.pj-dash-grid { display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:12px;align-items:start; }
.pj-dash-rail { display:flex;flex-direction:column;gap:10px;min-width:0; }
/* 4-col action row below the main grid */
.pj-dash-action-row { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px; }
.pj-dash-act-card { margin-bottom:0 !important; }
.pj-dash-act-chips { display:flex;flex-wrap:wrap;gap:6px; }
.pj-dash-act-chip { display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid;text-decoration:none;transition:filter .12s;white-space:nowrap; }
.pj-dash-act-chip:hover { filter:brightness(.94); }
.pj-dash-all-btn { margin-left:auto;background:none;border:none;font-size:10px;color:#0071e3;cursor:pointer;font-weight:700;padding:0; }

/* Tasks toolbar: search + status chips */
.pj-tasks-count { font-size:10px;font-weight:800;color:#0071e3;background:#eff6ff;border-radius:9px;padding:1px 7px; }
.pj-tasks-toolbar { display:flex;flex-direction:column;gap:8px;margin-bottom:10px; }
.pj-tasks-search { position:relative;display:flex;align-items:center; }
.pj-tasks-search > .fa-search { position:absolute;left:10px;font-size:11px;color:#9ca3af;pointer-events:none; }
.pj-tasks-search input { width:100%;box-sizing:border-box;border:1px solid #e5e7eb;border-radius:9px;padding:8px 30px 8px 28px;font-size:13px;font-family:inherit;outline:none;background:#fff;transition:border-color .15s,box-shadow .15s; }
.pj-tasks-search input:focus { border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.pj-tasks-search-clear { position:absolute;right:9px;font-size:12px;color:#9ca3af;cursor:pointer;padding:2px; }
.pj-tasks-search-clear:hover { color:#374151; }
.pj-tasks-chips { display:flex;flex-wrap:wrap;gap:6px; }
.pj-chip { display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;border:1px solid;background:#fff;cursor:pointer;transition:filter .12s,transform .1s;white-space:nowrap; }
.pj-chip:hover { filter:brightness(.97);transform:translateY(-1px); }
.pj-chip-n { font-size:9px;font-weight:800;opacity:.7; }
.pj-chip.active .pj-chip-n { opacity:.85; }

/* Task time-bucket group headers */
.pj-bk-head { display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;margin:10px 0 6px;user-select:none; }
.pj-bk-head:first-child { margin-top:0; }
.pj-bk-count { font-size:9px;font-weight:800;border-radius:9px;padding:1px 7px;margin-left:auto; }
.pj-bk-body { display:flex;flex-direction:column;gap:5px; }

/* Team insight rows */
.pj-team-summary { margin-left:auto;font-size:10px;font-weight:700;color:#6b7280;text-transform:none;letter-spacing:0; }
.pj-teamx { display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid #f5f5f7; }
.pj-teamx:last-child { border-bottom:none;padding-bottom:0; }
.pj-teamx-bar { display:flex;height:5px;border-radius:3px;overflow:hidden;background:#f0f0f5;margin-top:4px; }

/* Responsive: desktop (>1024) 2-col; tablet stacks tasks over a 2-col rail; phone all stacked */
@media (max-width:1024px) {
  .pj-dash-grid { grid-template-columns:1fr; }
  .pj-dash-rail { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
  .pj-dash-rail > :nth-child(3) { grid-column:1/-1; }
  .pj-dash-action-row { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .pj-dash-wrap { padding:12px 12px; }
  .pj-dash-rail { grid-template-columns:1fr; }
  .pj-dash-action-row { grid-template-columns:1fr; }
  .pj-kpi-row { grid-template-columns:repeat(2,1fr); }
  .pj-tasks-search input { font-size:16px; } /* prevent iOS zoom on focus */
}
.pj-dash-section { background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:13px 15px;margin-bottom:10px; }
.pj-dash-section:last-child { margin-bottom:0; }
.pj-dash-section-title { font-size:10px;font-weight:800;color:#6b7280;text-transform:uppercase;letter-spacing:.07em;margin-bottom:9px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #f3f4f6;padding-bottom:7px; }
.pj-dash-task-row { display:flex;gap:8px;padding:7px 9px;border-radius:8px;border:1px solid #f3f4f6;background:#fff;cursor:pointer;transition:all .12s;margin-bottom:5px; }
.pj-dash-task-row:last-child { margin-bottom:0; }
.pj-dash-task-row:hover { background:#f0f7ff;border-color:#dbeafe; }
.pj-dash-task-row:hover .pj-dash-task-del { opacity:1; }
.pj-dash-task-del { opacity:0.6;transition:opacity .12s; }
.pj-dash-task-del:hover { background:#dc2626;color:#fff; }
.pj-team-chip { display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid #f5f5f7; }
.pj-team-chip:last-child { border-bottom:none; }
.pj-team-avatar { width:28px;height:28px;border-radius:50%;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.pj-team-name { font-size:12px;font-weight:600;color:#1a1a1f;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.pj-team-count { font-size:10px;color:#6b7280;flex-shrink:0; }
/* Gantt featured button */
.pj-gantt-btn { display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:linear-gradient(135deg,#0071e3,#005ec4);border:none;color:#fff;cursor:pointer;font-size:13px;font-weight:700;width:100%;margin-bottom:10px;transition:opacity .15s;text-align:left; }
.pj-gantt-btn:hover { opacity:.9; }
.pj-gantt-btn .pj-gantt-btn-icon { width:34px;height:34px;background:rgba(255,255,255,.2);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0; }
/* Action chips row */
.pj-action-chips { display:flex;flex-wrap:wrap;gap:6px; }
.pj-action-chip { display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid;cursor:pointer;text-decoration:none;transition:all .12s;white-space:nowrap; }
.pj-action-chip:hover { filter:brightness(.95);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.1); }

/* ── Info tab redesign ───────────────────────────────────── */
.pji-card-code-wrap { background:linear-gradient(135deg,#eff6ff,#dbeafe);border:2px solid #93c5fd;border-radius:12px;padding:14px 16px;margin-bottom:12px;cursor:pointer;transition:box-shadow .15s;position:relative; }
.pji-card-code-wrap:hover { box-shadow:0 2px 12px rgba(59,130,246,.2); }
.pji-card-code-lbl { font-size:9px;font-weight:700;color:#6b7280;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;display:flex;align-items:center;justify-content:space-between; }
.pji-card-code-val { font-size:20px;font-weight:900;letter-spacing:.1em;color:#1d4ed8;font-family:ui-monospace,monospace;line-height:1.2;word-break:break-all; }
.pji-section { margin-bottom:14px; }
.pji-section-head { font-size:10px;font-weight:800;color:#6b7280;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:6px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #f3f4f6; }
.pji-field { display:flex;flex-direction:column;gap:3px;margin-bottom:8px; }
.pji-lbl { font-size:9px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.07em; }
.pji-val { font-size:13px;font-weight:500;color:#111827;line-height:1.4;word-break:break-word; }
.pji-val.muted { color:#6b7280;font-style:italic;font-size:12px; }
.pji-val a { color:#0071e3;text-decoration:none;font-weight:600; }
.pji-val a:hover { text-decoration:underline; }
/* Contact actions shown in view mode */
.pji-contact-actions { display:flex;gap:6px;flex-wrap:wrap;margin-top:4px; }
.pji-contact-btn { display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid;cursor:pointer;text-decoration:none;transition:all .12s; }
.pji-contact-btn.call { background:#f0fdf4;color:#16a34a;border-color:#bbf7d0; }
.pji-contact-btn.call:hover { background:#dcfce7; }
.pji-contact-btn.wa { background:#f0fdf4;color:#15803d;border-color:#bbf7d0; }
.pji-contact-btn.wa:hover { background:#dcfce7; }
.pji-contact-btn.maps { background:#fffbeb;color:#b45309;border-color:#fde68a; }
.pji-contact-btn.maps:hover { background:#fef9c3; }
.pji-contact-btn.link { background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe; }
.pji-contact-btn.link:hover { background:#dbeafe; }
/* duplicate stale rules removed */
#modal-ai-input .m-box {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
    padding: 18px 18px 14px;
}
#modal-ai-input .m-box > p { flex-shrink: 0; }
#modal-ai-input #ai-chips { flex-shrink: 0; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
#modal-ai-input #ai-chips::-webkit-scrollbar { height: 0; }
#modal-ai-input #ai-text-area {
    min-height: 80px;
    max-height: 180px;
    overflow-y: auto;
    resize: none;
    flex: 1;
}
#modal-ai-input .ai-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    padding-top: 8px;
    gap: 6px;
}
/* Notes pane */
.proj-notes-area { flex:1; width:100%; border:1.5px solid #e5e7eb; border-radius:12px; padding:14px 16px; font-size:13px; line-height:1.65; color:#1a1a1f; font-family:-apple-system,sans-serif; resize:none; outline:none; transition:border-color .15s; background:#fff; }
.proj-notes-area:focus { border-color:#8b5cf6; box-shadow:0 0 0 3px rgba(139,92,246,.09); }
/* Chat pane */
.proj-chat-msgs { flex:1; overflow-y:auto; padding:14px 20px; display:flex; flex-direction:column; gap:10px; }
.proj-chat-input-row { display:flex; align-items:flex-end; gap:8px; padding:10px 16px; border-top:1px solid #f0f0f5; flex-shrink:0; }
.proj-chat-inp { flex:1; border:1.5px solid #e5e7eb; border-radius:20px; padding:8px 14px; font-size:12.5px; font-family:-apple-system,sans-serif; resize:none; outline:none; transition:border-color .15s; line-height:1.4; min-height:36px; max-height:100px; overflow-y:auto; }
.proj-chat-inp:focus { border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.09); }
.proj-chat-send-btn { width:36px; height:36px; border-radius:50%; background:#0ea5e9; border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; transition:background .15s; }
.proj-chat-send-btn:hover { background:#0284c7; }
.proj-msg { display:flex; flex-direction:column; max-width:75%; }
.proj-msg.mine { align-self:flex-end; align-items:flex-end; }
.proj-msg.theirs { align-self:flex-start; align-items:flex-start; }
.proj-msg-meta { font-size:10px; color:#6b7280; margin-bottom:3px; display:flex; align-items:center; gap:6px; }
.proj-msg-bubble { background:#f3f4f6; border-radius:14px 14px 14px 4px; padding:8px 12px; font-size:12.5px; line-height:1.5; color:#1f2937; white-space:pre-wrap; word-break:break-word; }
.proj-msg.mine .proj-msg-bubble { background:#0ea5e9; color:#fff; border-radius:14px 14px 4px 14px; }
.proj-msg-del { background:none; border:none; cursor:pointer; color:#6b7280; font-size:10px; padding:0 3px; opacity:0; transition:opacity .15s; }
.proj-msg:hover .proj-msg-del { opacity:1; }
.proj-msg-avatar { width:26px; height:26px; border-radius:50%; background:#e5e7eb; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#6b7280; flex-shrink:0; }
.proj-chat-day-sep { text-align:center; font-size:10px; color:#6b7280; margin:4px 0; display:flex; align-items:center; gap:8px; }
.proj-chat-day-sep::before,.proj-chat-day-sep::after { content:''; flex:1; height:1px; background:#f0f0f5; }

/* Admin modal tabs */
.a-tab { flex-shrink:0; padding:10px 18px; font-size:12px; font-weight:600; color:#8e8e93; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:5px; transition:all .15s; }
.a-tab.active { color:#0071e3 !important; border-bottom-color:#0071e3 !important; background:#fff; }
.a-tab:hover:not(.active) { color:var(--text); background:rgba(0,0,0,.03); }
.a-pane { display:none; }
.a-pane.active { display:block; }
.nas-share-row { display:flex; gap:8px; align-items:center; padding:6px 10px; background:#fafafa; border:1px solid #e8e8ed; border-radius:9px; }
.nas-share-label-inp,.nas-share-name-inp { border:none; background:transparent; font-size:12px; outline:none; font-family:inherit; color:#1a1a1f; }
.nas-share-label-inp { flex:1; font-weight:600; }
.nas-share-name-inp  { flex:2; font-family:monospace; }
/* Dashboard filter pills */
/* .dash-filter-pills and .dfp-btn defined in main dashboard CSS above */
.dfp-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.dfp-btn:hover:not(.active) { border-color:#0071e3; color:#0071e3; }
/* 3-bar chart groups */
.burn-group { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; height:100%; }
.burn-bars { flex:1; width:100%; display:flex; gap:2px; align-items:flex-end; }
.burn-seg { flex:1; border-radius:3px 3px 0 0; min-height:2px; transition:height .4s; }
/* Task modal coloured tabs */
.t-tab[data-color] { border-bottom-color:transparent; }
.t-tab[data-color].active { border-bottom-color:attr(data-color); }
@media(max-width:640px){
  /* Task modal + other legacy responsive fixes — merged upward into responsive system */
  .tm-2col { grid-template-columns:1fr; }
  .tm-title-row { flex-wrap:wrap; }
  .pri-pill { padding:5px 8px; font-size:10px; }
  .pri-track { flex-wrap:nowrap; overflow-x:auto; max-width:100%; }
  .tm-header,.tm-body,.mtg-pane { padding-left:16px; padding-right:16px; }
  .task-modal-footer { padding:10px 16px; }
}
/* ── Day View Print (WePrint / AirPrint label) ── */
@media print {
    body > *:not(#calos-print-frame) { display: none !important; }
    #calos-print-frame { display: block !important; }
    @page { size: 57mm auto; margin: 3mm; }
}
#calos-print-frame {
    display: none;
    font-family: -apple-system, 'Helvetica Neue', sans-serif;
    font-size: 9pt;
    color: #000;
    background: #fff;
    width: 51mm;
    padding: 0;
}
.custom-chk-row { display:flex; align-items:center; gap:6px; cursor:pointer;}
.custom-chk-row input[type="checkbox"] { width: auto; margin: 0; cursor:pointer;}
.custom-chk-row label { margin: 0; text-transform: none; font-size: 11px; font-weight: 600; color: var(--text); letter-spacing: normal; cursor:pointer;}

/* Luma Custom Calendar Picker */
.luma-dp-wrap { position: relative; width: 100%;}
.luma-dp-input { width: 100%; cursor: pointer; caret-color: transparent;}
.luma-dp-popup {
    position: fixed;
    z-index: 10000002; /* above modals (9999999) and mobile overlay (10000000) */
    width: 268px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
    border: 1px solid #e5e7eb;
    padding: 14px;
    display: none;
    animation: fadeIn 0.15s ease;
}
.luma-dp-popup.active { display: block; }

/* Mobile: calendar popup fixed and centered */
@media (max-width: 768px) {
    .luma-dp-popup { 
        position: fixed !important; 
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 280px;
        padding: 16px;
    }
    .luma-dp-popup.active { display: block; }
    .dp-grid { gap: 4px; }
    .dp-day { padding: 10px 0; font-size: 14px; }
    .dp-close { margin-left:6px; background:#f3f4f6; border:none; width:28px; height:28px; border-radius:8px; color:#475569; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:13px; }
.dp-close:hover { background:#e5e7eb; }
.dp-head { font-size: 15px; }
    .dp-nav { width: 32px; height: 32px; font-size: 14px; }
}

.dp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.dp-nav { cursor: pointer; border: none; background: #f5f5f7; width: 24px; height: 24px; border-radius: 4px; color: var(--text); font-weight: bold;} .dp-nav:hover{background:#e8e8ed;}
.dp-days-head { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 10px; font-weight: 700; color: var(--muted); margin-bottom: 8px;}
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-day { padding: 6px 0; text-align: center; font-size: 12px; cursor: pointer; border-radius: 4px; transition: 0.2s; }
.dp-day:hover { background: rgba(0,113,227,0.1); color: var(--accent); }
.dp-day.empty { visibility: hidden; }
.dp-day.selected { background: var(--accent); color: #fff; font-weight: 600;}
.dp-day.today:not(.selected) { background:#fff3cd; color:#92400e; font-weight:700; border:1px solid #fbbf24; }

/* Admin Tables */
table.admin-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
table.admin-table th { text-align: left; padding: 10px; border-bottom: 2px solid var(--border); color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
table.admin-table td { padding: 10px; border-bottom: 1px solid var(--border); }

/* Current-task banner */
#current-task-banner { display:none; flex-direction:column; padding:0; background:linear-gradient(90deg,rgba(0,113,227,0.07),rgba(0,113,227,0.03)); border-bottom:1px solid rgba(0,113,227,0.12); font-size:12px; flex-shrink:0; }
#current-task-banner.active { display:flex; }
/* Each active task row */
.ctb-task-row { display:flex; align-items:center; gap:10px; padding:7px 20px; min-height:38px; flex-wrap:nowrap; }
.ctb-task-row + .ctb-task-row { border-top:1px solid rgba(0,113,227,0.08); }
/* .ctb-meta/.ctb-status-row/.ctb-actions group the row's children for the
   mobile stacked layout below — display:contents makes each wrapper
   invisible to the flex box here, so on desktop this is identical to
   every child participating directly in .ctb-task-row's single row, same
   as before these wrappers existed. */
.ctb-meta, .ctb-status-row, .ctb-actions { display:contents; }
/* Time remaining pill */
.ctb-remain { font-size:11px; font-weight:600; color:#0071e3; background:rgba(0,113,227,.08); border-radius:10px; padding:2px 7px; flex-shrink:0; }
.ctb-label { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#0071e3; flex-shrink:0; }
.ctb-dot { width:7px; height:7px; border-radius:50%; background:#0071e3; flex-shrink:0; animation:ctbPulse 2s infinite; }
@keyframes ctbPulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.ctb-title { font-weight:700; color:var(--text); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctb-time { color:var(--muted); font-size:11px; flex-shrink:0; }
.ctb-action-btn { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; border:none; font-size:11px; font-weight:700; cursor:pointer; transition:.2s; flex-shrink:0; }
.ctb-action-btn.meeting { background:#af52de; color:#fff; }
.ctb-action-btn.meeting:hover { background:#9b3dc0; }
.ctb-action-btn.location { background:#ff9f0a; color:#fff; }
.ctb-action-btn.location:hover { background:#e08c00; }
.ctb-action-btn.ctb-comms-btn { background:#eef2ff; color:#4f46e5; }
.ctb-action-btn.ctb-comms-btn:hover { background:#e0e7ff; }
.ctb-action-btn.start { background:#0071e3; color:#fff; border-radius:6px; }
.ctb-action-btn.start:hover { background:#0060c2; }
.ctb-action-btn.done { background:#34c759; color:#fff; border-radius:6px; }
.ctb-action-btn.done:hover { background:#2aa147; }

/* ── Communication Hub modal ─────────────────────────────────────────────── */
.comms-box { max-width:460px; width:92vw; height:min(560px,84vh); padding:0; display:flex; flex-direction:column; overflow:hidden; }
.comms-head { display:flex; align-items:center; gap:9px; padding:15px 16px; border-bottom:1px solid #f0f0f5; flex-shrink:0; }
.comms-title { font-size:15px; font-weight:700; color:var(--text); }
.comms-close { margin-left:auto; background:#f5f5f7; border:none; width:34px; height:34px; border-radius:9px; color:var(--muted); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.comms-close:hover { background:#e8e8ed; color:var(--text); }
.comms-tabs { display:flex; gap:4px; padding:8px 10px; border-bottom:1px solid #f0f0f5; overflow-x:auto; flex-shrink:0; -webkit-overflow-scrolling:touch; }
.comms-tabs::-webkit-scrollbar { display:none; }
.comms-tab { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding:9px 13px; min-height:40px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--muted); font-size:12.5px; font-weight:600; cursor:pointer; flex-shrink:0; transition:.15s; }
.comms-tab i { font-size:12px; }
.comms-tab:hover { background:#f5f5f7; color:var(--text); }
.comms-tab.active { background:#eef2ff; color:#4f46e5; }
.comms-body { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
#comms-tab-body, #task-comms-body { padding:6px 10px 14px; }
.comms-row { display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px; }
.comms-row:hover { background:#f9fafb; }
.comms-row + .comms-row { border-top:1px solid #f4f4f6; }
.comms-row-main { flex:1; min-width:0; }
.comms-row-name { font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.comms-row-sub { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.comms-row-acts { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.comms-act { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:11px; text-decoration:none; font-size:15px; border:1px solid transparent; transition:.15s; }
.comms-call { background:#f0fdf4; color:#16a34a; border-color:#bbf7d0; }
.comms-call:hover { background:#dcfce7; }
.comms-wa { background:#dcfce7; color:#15803d; border-color:#86efac; }
.comms-wa:hover { background:#bbf7d0; }
.comms-mail { background:#eff6ff; color:#2563eb; border-color:#bfdbfe; }
.comms-mail:hover { background:#dbeafe; }
.comms-teams { background:#eef0fb; color:#4b53bc; border-color:#c7ccf3; }
.comms-teams:hover { background:#e0e3f7; }
.comms-none { font-size:11px; color:#c4c4cc; font-style:italic; }
#comms-chat-wrap, #task-comms-chat-wrap { flex:1; min-height:0; display:flex; }
#comms-chat-iframe, #task-comms-chat-iframe { flex:1; width:100%; border:none; }
@media (max-width:768px) {
    .comms-box { width:100vw; height:100vh; max-width:none; border-radius:0; }
    .comms-tab { font-size:13px; padding:10px 14px; min-height:44px; }
    .comms-act { width:44px; height:44px; }
    .comms-row-name { font-size:15px; }
}
.ctb-open-btn { background:transparent; border:1px solid rgba(0,113,227,.3); color:#0071e3; font-size:10px; font-weight:700; padding:3px 8px; border-radius:12px; cursor:pointer; flex-shrink:0; }
.ctb-open-btn:hover { background:rgba(0,113,227,.08); }
.ctb-pomodoro { display:flex; align-items:center; gap:5px; background:rgba(255,255,255,0.15); border-radius:20px; padding:3px 10px; }
.ctb-pom-btn { background:transparent; border:none; color:inherit; cursor:pointer; font-size:12px; padding:2px 4px; }
.ctb-pom-time { font-size:12px; font-weight:700; min-width:36px; text-align:center; }
.ctb-time-log { font-size:11px; font-weight:600; background:rgba(255,255,255,0.2); border-radius:12px; padding:2px 8px; }
.ctb-folder-wrap { position:relative; flex-shrink:0; }
.ctb-folder-btn { background:transparent; border:1px solid rgba(52,199,89,.45); color:#34c759; font-size:10px; font-weight:700; padding:3px 8px; border-radius:12px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; min-width:60px; max-width:160px; overflow:hidden; text-overflow:ellipsis; }
.ctb-folder-btn:hover { background:rgba(52,199,89,.1); }
#ctb-folder-popover { position:absolute; top:calc(100% + 6px); right:0; background:#fff; border:1px solid rgba(0,0,0,.1); border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.16); min-width:200px; max-width:280px; z-index:9999; overflow:hidden; display:none; }
#ctb-folder-popover.open { display:block; }
.ctb-folder-item { padding:9px 14px; font-size:12px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:8px; color:#1a1a1f; transition:background .12s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctb-folder-item:hover { background:#f0f7ff; }
.ctb-folder-item i { color:#0071e3; flex-shrink:0; }

/* Search autosuggest */
.search-suggest { position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.14); border:1px solid var(--border); z-index:9999; max-height:280px; overflow-y:auto; display:none; }
.search-suggest.open { display:block; }
.ss-item { padding:8px 14px; display:flex; align-items:center; gap:8px; cursor:pointer; font-size:12px; border-bottom:1px solid #f5f5f7; }
.ss-item:last-child { border-bottom:none; }
.ss-item:hover { background:#f5f5f7; }
.ss-item-title { flex:1; font-weight:600; color:var(--text); }
.ss-item-meta { font-size:10px; color:var(--muted); }

/* Meeting/location fields in modal */
.meeting-fields { border-top:1px dashed rgba(175,82,222,.25); padding-top:8px; margin-top:6px; display:none; }
.meeting-fields.visible { display:block; }

/* ── Location card ── */
.loc-card { margin-top:6px; border:1px solid #e8e8ed; border-radius:10px; overflow:visible; background:#fafafa; }
.loc-card-head { display:flex; align-items:center; gap:8px; padding:8px 10px; }
.loc-name-wrap { flex:1; position:relative; }
.loc-name-inp { width:100%; border:1px solid #e0e0e5; border-radius:8px; background:#fff; outline:none; font-size:12px; font-weight:500; color:#1a1a1f; font-family:inherit; padding:7px 10px; box-sizing:border-box; }
.loc-name-inp:focus { border-color:#0071e3; box-shadow:0 0 0 3px rgba(0,113,227,.08); }
.loc-name-inp::placeholder { font-weight:400; color:#c7c7cc; }
.loc-pin-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:20px; font-size:10px; font-weight:600; cursor:pointer; transition:all .15s; flex-shrink:0; white-space:nowrap; user-select:none; }
.loc-pin-badge.unpinned { background:#fff3e0; color:#cc7700; border:1px solid #ffd699; }
.loc-pin-badge.unpinned:hover { background:#ffe4a0; }
.loc-pin-badge.pinned { background:#e8faf0; color:#1a7f3c; border:1px solid #b8edcc; }
.loc-pin-badge.pinned:hover { background:#d0f5e0; }
.loc-maps-btn { display:inline-flex; align-items:center; gap:3px; padding:4px 9px; background:#f0f7ff; color:#0071e3; border:1px solid #cce4ff; border-radius:7px; font-size:11px; font-weight:600; cursor:pointer; flex-shrink:0; transition:background .15s; }
.loc-maps-btn:hover { background:#ddeeff; }
.loc-dt-btn { display:inline-flex; align-items:center; gap:4px; padding:5px 11px; background:#f5f5f7; color:#3a3a3c; border:1px solid #e0e0e5; border-radius:7px; font-size:11px; font-weight:600; cursor:pointer; flex-shrink:0; transition:all .15s; }
.loc-dt-btn:hover { background:#e8e8ed; border-color:#c7c7cc; }
.loc-google-btn { display:inline-flex; align-items:center; gap:3px; padding:5px 11px; background:#fff; color:#4285f4; border:1px solid #dadce0; border-radius:7px; font-size:11px; font-weight:600; cursor:pointer; flex-shrink:0; transition:all .15s; }
.loc-google-btn:hover { background:#f8f9fa; border-color:#4285f4; }
.loc-save-btn { display:inline-flex; align-items:center; gap:3px; padding:5px 11px; background:#fef3c7; color:#d97706; border:1px solid #fcd34d; border-radius:7px; font-size:11px; font-weight:600; cursor:pointer; flex-shrink:0; transition:all .15s; }
.loc-save-btn:hover { background:#fde68a; border-color:#d97706; }

/* Pin panel — slides open below head */
.loc-pin-panel { display:none; border-top:1px solid #e8e8ed; padding:10px; }
.loc-pin-panel.open { display:block; }
.loc-pin-panel-title { font-size:10px; font-weight:700; color:#636366; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.loc-url-row { display:flex; gap:6px; align-items:center; }
.loc-url-inp { flex:1; border:1px solid #e8e8ed; border-radius:7px; padding:6px 9px; font-size:12px; background:#fff; outline:none; font-family:inherit; color:#1a1a1f; min-width:0; }
.loc-url-inp:focus { border-color:#0071e3; }
.loc-url-btn { padding:6px 12px; background:#0071e3; color:#fff; border:none; border-radius:7px; font-size:11px; font-weight:700; cursor:pointer; flex-shrink:0; }
.loc-url-btn:hover { background:#005ec4; }
.loc-how-to { font-size:10px; color:#aeaeb2; margin-top:5px; line-height:1.5; }
.loc-how-to a { color:#0071e3; text-decoration:none; }
.loc-how-to a:hover { text-decoration:underline; }
.loc-coord-confirm { display:none; margin-top:8px; padding:6px 10px; background:#e8faf0; border:1px solid #b8edcc; border-radius:8px; font-size:11px; color:#1a7f3c; align-items:center; gap:6px; }
.loc-coord-confirm.show { display:flex; }

/* Project site location suggest dropdown */
.proj-site-suggest { position:fixed; background:#fff; border:1px solid #e5e7eb; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:20000; max-height:200px; overflow-y:auto; display:none; }
.proj-site-suggest.open { display:block; }
.proj-site-suggest-item { padding:8px 12px; font-size:12px; cursor:pointer; display:flex; align-items:flex-start; gap:8px; border-bottom:1px solid #f5f5f7; flex-wrap:wrap; }
.proj-site-suggest-item:last-child { border-bottom:none; }
.proj-site-suggest-item:hover { background:#f0f7ff; }
.proj-site-si-icon { width:22px; height:22px; border-radius:6px; background:#fff3e0; color:#cc7700; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; margin-top:2px; }
.proj-site-si-icon.pinned { background:#e8faf0; color:#1a7f3c; }
.proj-site-si-name { font-weight:600; color:#1a1a1f; flex:1; min-width:80px; }
.proj-site-si-meta { font-size:11px; color:#6b7280; width:100%; padding-left:30px; box-sizing:border-box; margin-top:-2px; word-break:break-word; }

/* Drive strip */
.drive-strip { display:none; align-items:center; gap:8px; padding:6px 10px; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; font-size:11px; margin-top:0; }
.drive-strip.active { display:flex; }
.drive-strip.loading { background:#f5f5f7; border-color:#e5e5ea; }
.drive-val { font-weight:700; color:#1a7f3c; font-size:13px; }
.drive-icon { color:#1a7f3c; font-size:13px; flex-shrink:0; }
.drive-note { font-size:10px; color:#636366; }
.drive-strip.loading .drive-val { color:#636366; font-size:11px; }
.drive-dist { color:var(--muted); font-size:10px; padding:2px 6px; background:#e8faf0; border-radius:10px; }
.drive-strip.loading .drive-dist { display:none; }
.drive-live-link { margin-left:auto; font-size:10px; color:#0071e3; text-decoration:none; font-weight:600; white-space:nowrap; display:inline-flex; align-items:center; gap:3px; }
.drive-live-link:hover { text-decoration:underline; }
.drive-err { color:#ff3b30; font-size:11px; flex:1; }
.drive-clear-btn { background:transparent; border:none; color:#aeaeb2; cursor:pointer; font-size:10px; padding:2px 4px; flex-shrink:0; }
.drive-clear-btn:hover { color:#ff3b30; }

/* Loc autosuggest dropdown — position:fixed bypasses overflow:hidden clipping in .tk-pane */
.loc-suggest { position:fixed; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:20000; max-height:320px; overflow-y:auto; display:none; }
.loc-suggest.open { display:block; }
.loc-suggest-item { padding:8px 12px; font-size:12px; cursor:pointer; display:flex; align-items:flex-start; gap:8px; border-bottom:1px solid #f5f5f7; flex-wrap:wrap; }
.loc-suggest-item:last-child { border-bottom:none; }
.loc-suggest-item:hover { background:#f0f7ff; }
.loc-si-icon { width:26px; height:26px; border-radius:7px; background:#fff3e0; color:#cc7700; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; margin-top:2px; }
.loc-si-icon.pinned { background:#e8faf0; color:#1a7f3c; }
.loc-si-icon.live { background:#e0f2fe; color:#0284c7; }
.loc-suggest-divider { padding:4px 12px; font-size:9px; font-weight:700; color:#6b7280; text-transform:uppercase; background:#f9fafb; letter-spacing:.05em; border-bottom:1px solid #f3f4f6; }
.loc-suggest-loading { padding:10px 12px; color:#6b7280; font-size:12px; text-align:center; }
.loc-suggest-empty { padding:10px 12px; color:#c7c7cc; font-size:12px; text-align:center; }
/* Project site suggest — same enhancements */
.proj-site-suggest.open { display:block; }
.proj-site-si-icon.live { background:#e0f2fe; color:#0284c7; }
.loc-si-name { font-weight:600; color:#1a1a1f; flex:1; min-width:100px; }
.loc-si-meta { font-size:11px; color:#6b7280; width:100%; padding-left:34px; box-sizing:border-box; margin-top:-4px; word-break:break-word; }

/* Mobile Optimizations — merged into responsive system below */
@media (max-width: 800px) {
    .menu-toggle { display: block; }
    .h-actions { opacity: 1 !important; } .h-more-btn { font-size: 17px; padding: 4px 8px; }
    .t-actions { opacity: 1; transform: translateY(-50%) translateX(0); background: transparent; right: 2px; }
    /* Card actions (board/list) as an in-flow row UNDER the card on touch, not
       a floating overlay pinned over the title. Always-visible overlays with no
       hover to gate them covered most of every card. Scoped to .t-card so the
       time-grid .abs-task overlay (which needs to float on its time block) is
       untouched. */
    .t-card { flex-wrap: wrap; }
    .t-card .t-actions { position: static !important; transform: none !important;
        order: 99; width: 100%; justify-content: flex-end; gap: 2px;
        margin-top: 6px; padding-top: 6px; border-top: 1px solid #f1f5f9;
        background: transparent !important; box-shadow: none !important;
        opacity: 1 !important; right: auto !important; top: auto !important; }
    .t-card .t-actions .t-btn { padding: 6px 9px; }
    /* m-grid/m-head: allow scrolling naturally on small screens */
    .m-grid, .m-head { min-width: 0; }
}
@keyframes fadeIn { from { opacity: 0; transform: scale(0.98) translateY(5px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ════════════════════════════════════════════════════════════
   A4 PRINT — Task Modal
════════════════════════════════════════════════════════════ */
@media print {
    body > *:not(#print-task-sheet) { display: none !important; }
    #print-task-sheet {
        display: block !important;
        width: 210mm; min-height: 297mm;
        margin: 0; padding: 20mm 18mm;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 11pt; color: #111827; box-sizing: border-box;
    }
    .pts-page { page-break-after: always; }
    .pts-page:last-child { page-break-after: avoid; }
}
#print-task-sheet {
    display: none;
    position: fixed; inset: 0; z-index: 99999;
    background: #fff; overflow-y: auto;
    padding: 40px 48px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#print-task-sheet .pts-close {
    position: fixed; top: 20px; right: 24px;
    background: #111827; color: #fff; border: none;
    border-radius: 8px; padding: 8px 18px; font-size: 13px;
    font-weight: 700; cursor: pointer; z-index: 100000;
    display: flex; align-items: center; gap: 6px;
}
#print-task-sheet .pts-close:hover { background: #374151; }

/* Print options picker checkbox rows */
.pto-row { display: flex; align-items: center; gap: 9px; padding: 7px 4px; font-size: 13px; color: var(--text); cursor: pointer; border-radius: 6px; }
.pto-row:hover { background: #f5f5f7; }
.pto-row input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; accent-color: #0071e3; }

/* ════════════════════════════════════════════════════════════
   PHOTO GRID & LIGHTBOX
════════════════════════════════════════════════════════════ */
#photos-grid, #mtg-photos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 4px 0 12px;
}
.ph-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.ph-img-wrap {
    position: relative;
    aspect-ratio: 4/3;
    background: #f3f4f6;
    overflow: hidden;
}
.ph-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform .2s;
    display: block;
}
.ph-img-wrap:hover img { transform: scale(1.03); }
.ph-del-btn {
    position: absolute; top: 7px; right: 7px;
    background: rgba(239,68,68,.85);
    border: none; border-radius: 7px;
    width: 26px; height: 26px;
    color: #fff; font-size: 12px;
    cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s;
}
.ph-img-wrap:hover .ph-del-btn, .ph-del-btn:focus { opacity: 1; }
.ph-mark-btn {
    position: absolute; top: 7px; left: 7px;
    background: rgba(15,23,42,.72);
    border: none; border-radius: 7px;
    width: 26px; height: 26px;
    color: #fff; font-size: 11px;
    cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s;
}
.ph-img-wrap:hover .ph-mark-btn, .ph-mark-btn:focus { opacity: 1; }
.ph-body {
    padding: 9px 11px 10px;
    display: flex; flex-direction: column; gap: 3px;
}
.ph-caption-inp {
    width: 100%; border: 1px solid transparent;
    border-radius: 6px; padding: 4px 6px;
    font-size: 11px; font-family: inherit;
    color: #374151; background: transparent;
    outline: none; box-sizing: border-box;
    transition: border-color .15s, background .15s;
}
.ph-caption-inp:focus {
    border-color: #d1d5db;
    background: #f9fafb;
}
.ph-save-flash { font-size: 10px; color: #22c55e; font-weight: 600; display: none; }
.ph-meta { font-size: 10px; color: #6b7280; }
/* Upload preview form */
.ph-upload-form {
    background: #f9fafb; border: 1px solid #e5e7eb;
    border-radius: 14px; padding: 14px;
    margin-bottom: 12px; display: none;
}
.ph-upload-preview {
    position: relative; flex-shrink: 0;
    width: 96px; height: 96px;
    border-radius: 10px; overflow: hidden;
    background: #f3f4f6; border: 1px solid #e5e7eb;
}
.ph-upload-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-upload-size {
    position: absolute; bottom: 0; left: 0; right: 0;
    text-align: center; font-size: 9px; font-weight: 600;
    color: #fff; background: rgba(0,0,0,.55); padding: 3px 0;
}
.ph-section-hdr {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px; flex-shrink: 0; flex-wrap: wrap;
}
.ph-section-title {
    flex: 1; font-size: 12px; font-weight: 700; color: #374151;
}
.ph-btn {
    border: none; border-radius: 8px;
    padding: 6px 12px; font-size: 11px;
    font-weight: 700; cursor: pointer; display: flex;
    align-items: center; gap: 5px;
}
.ph-btn-green { background: #22c55e; color: #fff; }
.ph-btn-neutral { background: #f3f4f6; color: #374151; }
.ph-btn-blue { background: #eff6ff; color: #0071e3; }
.ph-btn-primary { background: #0071e3; color: #fff; flex: 1; }
/* Touch: always show photo action buttons */
@media (hover: none) {
    .ph-del-btn, .ph-mark-btn { opacity: 1; }
}

/* Lightbox */
.photo-lightbox {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.92); z-index: 99999;
    flex-direction: column; align-items: center; justify-content: center;
    padding: 20px;
}
.photo-lightbox.active { display: flex; animation: fadeIn .2s; }
.photo-lightbox > img,
.photo-lightbox #lightbox-img {
    max-width: min(90vw, 1200px);
    max-height: 78vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.photo-lightbox-info {
    margin-top: 12px; text-align: center;
}
.photo-lightbox-caption {
    color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 4px;
}
.photo-lightbox-meta { color: rgba(255,255,255,.55); font-size: 12px; }
.photo-lightbox-close {
    position: absolute; top: 16px; right: 20px;
    background: rgba(255,255,255,.12); border: none; border-radius: 50%;
    width: 38px; height: 38px; color: #fff; font-size: 16px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.photo-lightbox-close:hover { background: rgba(255,255,255,.25); }
.photo-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.12); border: none; border-radius: 50%;
    width: 46px; height: 46px; color: #fff; font-size: 18px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.photo-lightbox-nav:hover { background: rgba(255,255,255,.25); }
.photo-lightbox-prev { left: 16px; }
.photo-lightbox-next { right: 16px; }
.photo-lightbox-counter {
    position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.5); color: rgba(255,255,255,.8);
    padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   CALOS RESPONSIVE SYSTEM — 100% Mobile + Desktop Friendly
   Breakpoints: ≤480px phone | ≤768px phablet | ≤1024px tablet
   ═══════════════════════════════════════════════════════════ */

/* ── Globally hide scrollbars on swipeable strips ─────────── */
.view-segments, .tk-tabs, .db-pills, .n-tab-group,
.pj-tabs, .k-board, .acc-action-bar, .m-tasks,
.tk-mtg-bar, .holding { scrollbar-width: none; }
.view-segments::-webkit-scrollbar, .tk-tabs::-webkit-scrollbar,
.db-pills::-webkit-scrollbar, .n-tab-group::-webkit-scrollbar,
.pj-tabs::-webkit-scrollbar, .k-board::-webkit-scrollbar,
.acc-action-bar::-webkit-scrollbar, .m-tasks::-webkit-scrollbar,
.tk-mtg-bar::-webkit-scrollbar, .holding::-webkit-scrollbar { display: none; }

/* ── Touch devices: always-visible actions + bigger targets ── */
@media (hover: none) {
    .t-actions  { opacity: 1 !important; transform: translateY(-50%) translateX(0) !important; background: transparent; box-shadow: none; }
    /* Card actions (board/list) as an in-flow row UNDER the card on touch, not
       a floating overlay pinned over the title. Always-visible overlays with no
       hover to gate them covered most of every card. Scoped to .t-card so the
       time-grid .abs-task overlay (which needs to float on its time block) is
       untouched. */
    .t-card { flex-wrap: wrap; }
    .t-card .t-actions { position: static !important; transform: none !important;
        order: 99; width: 100%; justify-content: flex-end; gap: 2px;
        margin-top: 6px; padding-top: 6px; border-top: 1px solid #f1f5f9;
        background: transparent !important; box-shadow: none !important;
        opacity: 1 !important; right: auto !important; top: auto !important; }
    .t-card .t-actions .t-btn { padding: 6px 9px; }
    .h-actions  { opacity: 1 !important; }
    .photo-thumb-overlay  { opacity: 1 !important; }
    .photo-thumb-actions  { opacity: 1 !important; }
    .t-card:hover  { transform: none; box-shadow: var(--shadow-sm); }
    .abs-task:hover:not(.resizing) { transform: none; }
    .h-pop-item { padding: 9px 12px; font-size: 12px; }
}
@media (pointer: coarse) {
    .icon-btn   { padding: 8px; min-width: 38px; min-height: 38px; justify-content: center; }
    .nav-arrow  { padding: 8px 10px; }
    .v-btn      { padding: 7px 12px; }
    .tk-tab     { padding: 11px 13px; }
    .mtg-tab    { padding: 10px 14px; }
    .h-item     { padding: 9px 10px; min-height: 40px; }
    .chk        { width: 20px; height: 20px; }
    .btn        { padding: 12px 16px; min-height: 44px; }
    .tk-chip    { padding: 8px 12px; }
    .tk-sel     { padding: 9px 12px; font-size: 16px; } /* 16px prevents iOS zoom */
    .n-tab      { padding-bottom: 10px; }
    .tk-pri     { padding: 7px 3px; }
    .auth-card input { font-size: 16px; }
    input[type="text"], input[type="email"], input[type="password"],
    input[type="time"], select, textarea { font-size: 16px !important; } /* prevent iOS zoom */
}

/* ════════════════════════════════════════════════════════════
   TABLET  (≤ 1024px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .top-clock { margin-left: 14px; padding-left: 14px; min-width: 100px; }
    .tc-time { font-size: 14px; }
    .tk-left { width: 200px; }
    .matrix-grid { grid-template-columns: 1fr 1fr; }
    .quad { padding: 18px; }
    .pj-info-grid { grid-template-columns: 1fr 1fr !important; }
    .pj-box { max-width: 98vw; width: 98vw; }
    .db-kpi { min-width: 120px; }
}

/* ════════════════════════════════════════════════════════════
   TASK MODAL: Desktop + Tablet — sidebar visible with pills
   ════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    /* Task modal: layout is side-by-side on desktop */
    .tk-layout { flex-direction: row !important; }

    /* tk-left is the sidebar */
    .tk-left {
        width: 244px !important;
        border-right: 1px solid #e9ecef !important;
        border-bottom: none !important;
        padding: 10px 11px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 7px !important;
        background: #fafafa !important;
        flex-shrink: 0 !important;
        overflow-y: auto !important;
        overflow-x: visible !important;
    }

    /* Hide the accordion header on desktop, show content directly */
    .task-detail-accordion { display: block !important; }
    .task-detail-header { display: none !important; }
    .task-detail-body { display: flex !important; flex-direction: column; gap: 5px; }

    /* Show title input on desktop - it's in the sidebar now */
    .tk-left > .tk-title { display: block !important; }
    .tk-left > #tk-meta-row { display: flex !important; flex-shrink: 0; }

    /* tk-right takes remaining height */
    .tk-right { flex: 1 !important; min-height: 0 !important; }

    /* Mobile right-panel accordion header: hidden on desktop */
    .tk-right-mob-hdr { display: none !important; }

    /* Template pill: only show in footer on desktop; hide the bar in tk-right */
    .tk-tmpl-bar { display: none !important; }

    /* Footer template button: visible on desktop */
    .tk-footer-tmpl-wrap { display: flex !important; }

    /* Hide mobile close button on desktop */
    .tk-left-close-btn { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE (≤ 768px) — ground-up rebuild
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Body / layout ───────────────────────────────────────── */
  body { overflow: hidden; height: 100vh; height: 100dvh; }
  .menu-toggle { display: block; }
  .top-clock { display: none; }
  .view-nav { display: none; }

  /* ── Header: logo + search + minimal icons ───────────────── */
  .header {
    height: 52px; padding: 0 12px; gap: 8px;
    flex-wrap: nowrap; background: #fff;
    border-bottom: 1px solid #e5e7eb;
  }
  .h-left { flex: 0 0 auto; gap: 6px; align-items: center; }
  .logo { margin-left: 6px; font-size: 18px; font-weight: 800; }
  .search-wrap { flex: 1; min-width: 0; max-width: none; }
  .header-search {
    font-size: 14px; padding: 8px 12px 8px 34px;
    border-radius: 10px; background: #f3f4f6;
    border: 1.5px solid transparent;
  }
  .header-search:focus { background: #fff; border-color: var(--accent); }
  .h-right { flex: 0 0 auto; gap: 0; }
  /* Hide non-essential header icons on mobile — keep bell + settings.
     Settings used to be dropped here too, which meant there was no way at
     all to reach it (or anything inside it, like the Leave tab) on mobile —
     nothing else in the header, sidebar, or bottom nav links to it. */
  .h-right > *:not(.notif-bell):not(#btn-print-day):not(#btn-print-week):not(#btn-print-month):not(#btn-settings) { display: none; }
  .h-right .notif-bell, .h-right #btn-settings { display: inline-flex; }
  .nav-date { display: none; }

  /* ── Sidebar: full-height off-canvas ─────────────────────── */
  .main { flex: 1; overflow: hidden; position: relative; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 82%; max-width: 300px;
    transform: translateX(-105%);
    z-index: 500; box-shadow: 0 0 40px rgba(0,0,0,.18);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    border-right: none; overflow-y: auto;
  }
  #sidebar-resize-handle { display: none; }
  .sidebar.open { transform: translateX(0); }
  .mobile-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.4); z-index: 499;
    opacity: 0; transition: opacity .25s;
  }
  .mobile-overlay.active { display: block; opacity: 1; }

  /* ── Views: fill height, bottom padding for nav+fab ─────── */
  .view { flex: 1; min-height: 0; overflow: hidden; }
  #v-dash, #v-kanban, #v-today, #v-week, #v-month, #v-year,
  #v-plan, #v-routines, #v-meetings, #v-matrix, #v-archive, #v-completed {
    padding-bottom: 72px;
  }

  /* ── Bottom navigation bar ───────────────────────────────── */
  .mobile-bottom-nav {
    display: flex; position: fixed;
    bottom: 0; left: 0; right: 0; z-index: 400;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid #e5e7eb;
    height: 56px; align-items: stretch;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .mbn-btn {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    background: none; border: none; cursor: pointer;
    color: #6b7280; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .02em;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
    /* No max-width cap: it read calc(100%/6) from when there were six tabs,
       which is stale now there are eight and just wasted the guard. flex:1
       shares the bar evenly however many there are. */
    min-width: 0; padding: 4px 2px; overflow: hidden;
  }
  .mbn-btn > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mbn-btn i { font-size: 18px; line-height: 1; }

  /* ── Mobile "More" overflow sheet ──────────────────────────── */
  .tk-dt-drop.tk-layer-floating {
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    transform: none !important; width: auto !important; max-height: 82vh !important;
    border-radius: 18px 18px 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
  .task-scope-bar { padding: 7px 14px; gap: 6px; position: sticky; top: 0; }
  .task-scope-bar .tsb-select { max-width: 44vw; }
  .mobile-more-backdrop {
    display: block;
    position: fixed; inset: 0; background: rgba(15,23,42,.4);
    z-index: 470; opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .mobile-more-backdrop.open { opacity: 1; pointer-events: auto; }
  .mobile-more-sheet {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 480;
    background: var(--card-bg, #fff); border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,.18);
    padding: 8px 16px max(20px, env(safe-area-inset-bottom));
    transform: translateY(110%); transition: transform .26s var(--spring, cubic-bezier(.22,1,.36,1));
  }
  .mobile-more-sheet.open { transform: translateY(0); }
  .mms-grip { width: 40px; height: 4px; border-radius: 3px; background: #d1d5db; margin: 6px auto 10px; cursor: pointer; }
  .mms-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 0 4px 10px; }
  .mms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .mms-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: var(--hover-bg, #f6f7f9); border: 1px solid var(--border, #eceef1); border-radius: 14px;
    padding: 14px 4px; min-height: 72px; cursor: pointer; color: var(--text, #1e293b);
    font-size: 11px; font-weight: 600; -webkit-tap-highlight-color: transparent; transition: background .15s, transform .1s;
  }
  .mms-item:active { transform: scale(.96); }
  .mms-item i { font-size: 20px; color: var(--accent, #0071e3); }

  /* Hierarchy sidebar close button — only meaningful on mobile, where the
     sidebar is a slide-over drawer. Sits in the Hierarchy header. */
  .sidebar-close-btn { display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
    color: var(--muted); font-size: 18px; cursor: pointer; margin-left: 2px; }
  .sidebar-close-btn:active { background: rgba(0,0,0,.06); }

  .mbn-btn.active { color: var(--accent); }
  .mbn-btn.active i { transform: translateY(-1px); transition: transform .15s; }

  /* ── FAB: above bottom nav ───────────────────────────────── */
  .fab-group { bottom: 66px; right: 14px; }
  .fab-main .vb-lbl { display: none; }

  /* ── Task cards in all views ─────────────────────────────── */
  .t-card {
    padding: 12px 14px 10px; border-radius: 12px;
    font-size: 14px; line-height: 1.4;
    -webkit-tap-highlight-color: transparent;
  }
  .tc-title { font-size: 14px; font-weight: 600; }
  .tc-meta { font-size: 12px; margin-top: 4px; gap: 6px; }
  .tc-dot { width: 8px; height: 8px; }

  /* ── Grid task pills (day/week time slots) ───────────────── */
  .abs-task {
    font-size: 11px; padding: 3px 7px;
    border-radius: 7px; overflow: hidden;
    min-height: 28px; line-height: 1.3;
  }
  .at-proj { font-size: 9px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ── Time axis ───────────────────────────────────────────── */
  .time-axis { width: 40px; font-size: 9px; }

  /* ── Calendar grid density + alignment (mobile) ──────────────
     The day headers and all-day row were pushed 60px from the left (the
     DESKTOP time-axis width) while the mobile axis is only 40px — so every
     column header sat 20px out of line with its column. Match the 40px axis,
     and tighten the oversized day header + all-day row that ate the top of
     every calendar screen. */
  .grid-head, .allday-zone, .extra-zone { margin-left: 40px !important; }
  .g-h-cell { padding: 6px 3px !important; gap: 1px !important; }
  .g-h-day  { font-size: 10px !important; }
  .g-h-date { font-size: 18px !important; }
  .allday-zone { min-height: 22px !important; top: 44px !important; }
  .ad-cell { padding: 2px 3px !important; }
  .grid-head { top: 0; }

  /* ── Week view: fixed-width columns + horizontal scroll ──── */
  #v-week .scroll-container { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  #v-week .grid-wrap { min-width: calc(40px + 7 * 136px); flex-shrink: 0; width: calc(40px + 7 * 136px); }
  #v-week .g-h-cell { flex: 0 0 136px; min-width: 136px; max-width: 136px; }
  #v-week .ad-cell  { flex: 0 0 136px; min-width: 136px; max-width: 136px; }
  #v-week .d-col    { flex: 0 0 136px; min-width: 136px; max-width: 136px; }

  /* ── Kanban board ────────────────────────────────────────── */
  .k-board { padding: 10px 0 10px 10px; gap: 10px; }
  .k-col { min-width: 80vw; max-width: 85vw; }
  .k-head { padding: 12px 14px; font-size: 13px; border-radius: 14px 14px 0 0; }
  .k-body { border-radius: 0 0 14px 14px; }

  /* ── Dashboard ───────────────────────────────────────────── */
  .db-kpi-bar { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px 12px 6px; }
  .db-kpi-row { overflow-x: auto; flex-wrap: nowrap; padding: 8px 12px; gap: 6px; -webkit-overflow-scrolling: touch; }
  .db-kpi { flex: 0 0 auto; min-width: unset; max-width: unset; padding: 7px 10px; gap: 7px; cursor: pointer; border-radius: 10px; }
  /* Mobile KPI chips: top row visible, desktop chips hidden */
  #db-kpi-chips { display:flex !important; }
  #db-kpi-chips-desk { display:none !important; }
  .db-kpi-icon { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }
  .db-kpi-n { font-size: 18px; }
  .db-kpi-l { font-size: 9px; }
  .db-kpi-val { font-size: 26px; }
  .db-kpi-lbl { font-size: 10px; }
  .db-body { flex-direction: column; }
  .db-sidebar { display: none; } /* hide right sidebar on mobile (too small) */
  .db-today-mobile { display: none !important; } /* old strip — replaced */
  /* Mobile dashboard CSS */
  .mob-dash { display:block; padding:12px 12px 0; background:var(--bg); overflow-y:auto; }
  .mob-dash-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding:0 2px; }
  .mob-dash-greeting { font-size:20px; font-weight:800; color:#111827; line-height:1.1; }
  .mob-dash-date { font-size:12px; color:#6b7280; margin-top:2px; font-weight:500; }
  .mob-dash-cal-btn { background:#eff6ff; color:#0071e3; border:1px solid #bfdbfe; border-radius:10px; padding:7px 13px; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
  /* Stat grid */
  .mob-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:12px; }
  /* Liquid-glass card: translucent frosted body + specular top sheen + thin tinted border */
  .mob-stat-card {
    background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.45));
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 2px 7px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.8);
    cursor: pointer;
    transition: transform .12s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 6px 3px 5px;
    text-align: center;
  }
  /* Glass specular highlight — soft light sweep across the top third */
  .mob-stat-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 55%;
    background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
    pointer-events: none;
  }
  .mob-stat-card:active { transform: scale(.96); }
  .mob-stat-icon { width:15px; height:15px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:8px; flex-shrink:0; box-shadow:0 1px 2px rgba(0,0,0,.06); }
  .mob-stat-val { font-size:13px; font-weight:800; line-height:1; color:#111827; }
  .mob-stat-lbl { font-size:7px; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .mob-stat-sub { font-size:6px; color:#6b7280; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  /* Stat card colours — thin full-perimeter tinted glass border + icon accent */
  .mob-stat-today { border-color: rgba(0,113,227,.3); }
  .mob-stat-today .mob-stat-icon { background:rgba(0,113,227,.14); color:#0071e3; }
  .mob-stat-today .mob-stat-val { color:#0071e3; }
  .mob-stat-overdue { border-color: rgba(239,68,68,.3); }
  .mob-stat-overdue .mob-stat-icon { background:rgba(239,68,68,.14); color:#ef4444; }
  .mob-stat-overdue .mob-stat-val { color:#ef4444; }
  .mob-stat-overdue.mob-stat-ok .mob-stat-val { color:#10b981; }
  .mob-stat-week { border-color: rgba(16,185,129,.3); }
  .mob-stat-week .mob-stat-icon { background:rgba(16,185,129,.14); color:#10b981; }
  .mob-stat-week .mob-stat-val { color:#10b981; }
  .mob-stat-meets { border-color: rgba(139,92,246,.3); }
  .mob-stat-meets .mob-stat-icon { background:rgba(139,92,246,.14); color:#8b5cf6; }
  .mob-stat-meets .mob-stat-val { color:#8b5cf6; }
  /* Section headers */
  .mob-section-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .mob-section-hdr > span { font-size:13px; font-weight:800; color:#111827; }
  .mob-see-all { background:none; border:none; color:#0071e3; font-size:11px; font-weight:700; cursor:pointer; padding:0; }
  /* Task cards */
  .mob-task-list { display:flex; flex-direction:column; gap:8px; }
  .mob-task-card { background:#fff; border-radius:13px; border:1px solid #f0f0f5; box-shadow:0 1px 4px rgba(0,0,0,.05); padding:12px 13px; display:flex; align-items:flex-start; gap:10px; cursor:pointer; transition:box-shadow .12s; }
  .mob-task-card:active { box-shadow:0 3px 12px rgba(0,0,0,.12); }
  .mob-task-card.mob-tc-done { opacity:.5; }
  .mob-task-card.mob-tc-done .mob-tc-title { text-decoration:line-through; }
  .mob-tc-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:4px; }
  .mob-tc-body { flex:1; min-width:0; }
  .mob-tc-title { font-size:13px; font-weight:600; color:#111827; line-height:1.35; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mob-tc-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .mob-tc-proj { font-size:10px; font-weight:600; color:#fff; padding:2px 7px; border-radius:6px; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mob-tc-time { font-size:10px; font-weight:700; color:#0071e3; background:#eff6ff; border-radius:5px; padding:1px 6px; }
  .mob-tc-pr { font-size:9px; font-weight:800; padding:1px 5px; border-radius:5px; text-transform:uppercase; letter-spacing:.03em; }
  .mob-tc-done-btn { flex-shrink:0; width:28px; height:28px; border-radius:50%; border:2px solid #d1d5db; background:transparent; display:flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer; color:#d1d5db; transition:all .15s; }
  .mob-tc-done-btn.done { background:#10b981; border-color:#10b981; color:#fff; }
  /* Task accordion (grouped by date bucket, see renderMobDashAccordion()) */
  .mob-dg-hdr { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; background:#f8fafc; border-radius:9px; margin-bottom:6px; cursor:pointer; }
  .mob-dg-hdr > span { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#374151; }
  .mob-dg-chev { font-size:10px; color:#6b7280; transition:transform .2s; }
  .mob-dg-row.mob-task-card { margin-bottom:8px; }
  /* Meeting cards */
  .mob-meet-list { display:flex; flex-direction:column; gap:8px; }
  .mob-meet-card { background:#faf5ff; border:1px solid #e9d5ff; border-radius:13px; padding:12px 13px; display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
  .mob-meet-card:active { box-shadow:0 3px 12px rgba(139,92,246,.15); }
  /* Mobile Projects list + share-a-location pin */
  .mob-proj-list { display:flex; flex-direction:column; gap:8px; }
  .mob-proj-empty { text-align:center; padding:16px; color:#9ca3af; font-size:12px; }
  .mob-proj-card { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #f0f0f5; border-radius:12px; padding:11px 12px; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.05); }
  .mob-proj-card:active { box-shadow:0 4px 16px rgba(0,0,0,.1); }
  .mob-proj-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .mob-proj-info { flex:1; min-width:0; }
  .mob-proj-name { font-size:13px; font-weight:700; color:#111827; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mob-proj-meta { font-size:11px; color:#6b7280; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
  .mob-proj-pin { flex-shrink:0; width:40px; height:40px; border-radius:10px; border:1px solid #fde68a; background:#fffbeb; color:#f59e0b; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .mob-proj-pin:active { background:#fef3c7; }
  .mob-proj-comms { flex-shrink:0; width:40px; height:40px; border-radius:10px; border:1px solid #bfdbfe; background:#eff6ff; color:#0071e3; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .mob-proj-comms:active { background:#dbeafe; }
  .mob-proj-links { flex-shrink:0; width:40px; height:40px; border-radius:10px; border:1px solid #ddd6fe; background:#f5f3ff; color:#7c3aed; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .mob-proj-links:active { background:#ede9fe; }
  /* Projects section header actions (Manage / Show hidden) */
  .mob-proj-actions { display:inline-flex; align-items:center; gap:6px; }
  .mob-proj-act { display:inline-flex; align-items:center; gap:5px; border:1px solid #e5e7eb; background:#fff; color:#64748b; font-size:11px; font-weight:800; border-radius:999px; padding:5px 11px; cursor:pointer; }
  .mob-proj-act.on { background:#0071e3; color:#fff; border-color:#0071e3; }
  /* Manage mode: reorder arrows + hide toggle */
  .mob-proj-reorder { display:flex; flex-direction:column; gap:2px; flex-shrink:0; }
  .mob-proj-ro { width:34px; height:20px; border-radius:6px; border:1px solid #e5e7eb; background:#f8fafc; color:#475569; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .mob-proj-ro:disabled { opacity:.3; cursor:default; }
  .mob-proj-hide { flex-shrink:0; width:40px; height:40px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; color:#64748b; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .mob-proj-hide.is-hidden { background:#fef2f2; border-color:#fecaca; color:#dc2626; }
  .mob-proj-card.is-hidden { opacity:.55; }
  .mob-meet-icon { width:32px; height:32px; border-radius:9px; background:#8b5cf6; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; flex-shrink:0; }
  .mob-meet-body { flex:1; min-width:0; }
  .mob-meet-title { font-size:13px; font-weight:600; color:#1a1a1f; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mob-meet-meta { font-size:10px; color:#7c3aed; font-weight:600; }
  .mob-meet-join { flex-shrink:0; background:#8b5cf6; color:#fff; border:none; border-radius:8px; padding:6px 11px; font-size:11px; font-weight:700; cursor:pointer; }
  /* Load Dashboard, once openMobLoad() has relocated it here (see the JS) —
     a back button plus enough responsive tweaks to the existing desktop
     widget (wrap the filter row, scroll the bars horizontally) to make it
     usable on a phone, without redesigning the widget itself. */
  .mob-load-back { display:flex; align-items:center; gap:6px; background:none; border:none; color:#0071e3; font-size:13px; font-weight:700; cursor:pointer; padding:10px 12px; }
  #db-section-load #load-bars { overflow-x:auto; }
  /* On mobile, desktop dashboard content is always replaced by mob-dash */
  .db-main { display: none !important; }
  /* db-body (calendar sidebar) never needed on mobile */
  .db-body { display: none !important; }
  .mob-dash-active .db-body { display:none !important; }
  /* Task list card mode on mobile (Tasks tab) */
  .mob-task-cards-wrap { padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
  .mob-full-task-card { background:#fff; border-radius:13px; border:1px solid #f0f0f5; box-shadow:0 1px 4px rgba(0,0,0,.05); padding:12px 13px; cursor:pointer; transition:box-shadow .12s; }
  .mob-full-task-card:active { box-shadow:0 4px 16px rgba(0,0,0,.1); }
  .mob-ftc-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .mob-ftc-title { font-size:13px; font-weight:600; color:#111827; line-height:1.35; flex:1; min-width:0; }
  .mob-ftc-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .mob-ftc-group-hdr { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:10px 2px 6px; }
  .mob-ftc-done-btn { width:24px; height:24px; border-radius:50%; border:2px solid #d1d5db; background:transparent; display:flex; align-items:center; justify-content:center; font-size:10px; cursor:pointer; color:#d1d5db; transition:all .15s; flex-shrink:0; }
  .mob-ftc-done-btn.done { background:#10b981; border-color:#10b981; color:#fff; }
  .db-chart-wrap { border-right: none; border-bottom: 1px solid var(--border); }
  .db-chart-wrap:last-child { border-bottom: none; }
  .db-footer { flex-direction: column; height: auto; }
  .db-dept-acc-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 10px 14px; background: #fafafa; border-top: 1px solid var(--border); }
  .db-dept-acc-body { overflow: hidden; transition: max-height .25s ease; }

  /* ── Matrix ──────────────────────────────────────────────── */
  .matrix-grid { grid-template-columns: 1fr; overflow-y: auto; }
  .quad { min-height: 200px; max-height: none; padding: 12px 14px; }

  /* ── Month grid ──────────────────────────────────────────── */
  .m-head > div { font-size: 10px; padding: 5px 2px; }
  .m-cell { min-height: 64px; padding: 2px; }
  .m-date-num { font-size: 12px; width: 24px; height: 24px; }

  /* ── Plan view ───────────────────────────────────────────── */
  .plan-grid { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
  .plan-col { border-radius: 14px; min-width: 0; }
  .plan-col-head { padding: 10px 12px; font-size: 12px; flex-direction: row; align-items: center; }
  .plan-card { padding: 10px 12px; font-size: 13px; }

  /* ── Scroll containers ───────────────────────────────────── */
  .scroll-container { -webkit-overflow-scrolling: touch; }
  .k-board, .plan-grid, .matrix-grid { -webkit-overflow-scrolling: touch; }

  /* ═══════════════════════════════════════════════════════════
     TASK MODAL — complete redesign for mobile
     ═══════════════════════════════════════════════════════════ */
  .modal { padding: 0; align-items: flex-end; }

  /* All non-task modals → bottom sheet */
  .m-box {
    max-width: 100%; width: 100%;
    border-radius: 22px 22px 0 0;
    max-height: 92vh; max-height: 92dvh; padding: 0;
    overflow: hidden;
  }
  .m-box::before {
    content: ''; display: block;
    width: 40px; height: 4px;
    background: #d1d1d6; border-radius: 2px;
    margin: 12px auto 0; flex-shrink: 0;
  }
  .m-head { padding: 12px 18px 8px; }
  .m-body { padding: 14px 18px 28px; }
  .m-row { flex-direction: column; gap: 0; }

  /* Task modal: full-height sheet */
  .m-box.task-box {
    width: 100vw; max-width: 100vw;
    height: 97vh; height: 97dvh; max-height: 97vh; max-height: 97dvh;
    border-radius: 22px;
    position: fixed; bottom: 0; left: 0; top: auto;
    display: flex; flex-direction: column;
    border: 2px solid var(--ws-accent, var(--accent));
    overflow: hidden;
  }
  .m-box.task-box::before { display: none; } /* no handle — we have the color bar */

  /* AI modal: full screen on mobile, NOT bottom sheet */
  #modal-ai-input { align-items: stretch !important; padding: 0 !important; z-index: 600 !important; }
  #modal-ai-input .m-box {
    width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
    border-radius: 0; padding: 0; overflow: hidden;
    display: flex; flex-direction: column;
  }
  #modal-ai-input .m-box::before { display: none; }
  #modal-ai-input .m-box > h2 { padding: max(16px, env(safe-area-inset-top)) 16px 6px; flex-shrink: 0; }
  #modal-ai-input .m-box > p { padding: 0 16px; flex-shrink: 0; }
  #modal-ai-input #ai-chips { padding: 0 16px 4px; flex-shrink: 0; }
  #modal-ai-input #ai-text-area { flex: 1; min-height: 120px; resize: none; margin: 0 16px; overflow-y: auto; }
  #modal-ai-input #ai-loc-hint { margin: 6px 16px 0; flex-shrink: 0; }
  #modal-ai-input .ai-action-row {
    flex-shrink: 0; padding: 10px 16px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    margin-top: 0; background: #fff;
    border-top: 1px solid #f0f0f5;
    box-shadow: 0 -4px 12px rgba(0,0,0,.06);
  }

  /* Mobile top bar (shown only on mobile) */
  .task-mh {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px 8px; flex-shrink: 0;
    border-bottom: 1px solid #f0f0f5;
    background: #fff;
  }
  .task-mh-close {
    background: #f3f4f6; border: none; border-radius: 50%;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    color: #6b7280; font-size: 14px; cursor: pointer; flex-shrink: 0;
  }
  .task-mh-label {
    flex: 1; font-size: 13px; font-weight: 700; color: #374151;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .task-mh-del {
    background: none; border: none; color: #ef4444;
    font-size: 15px; padding: 6px; cursor: pointer; border-radius: 8px;
  }
  .task-mh-tmpl {
    background: none; border: none; color: #8b5cf6;
    font-size: 15px; padding: 6px; cursor: pointer; border-radius: 8px;
  }
  .task-mh-tmpl:hover { background: #f3f4f6; }
  .task-mh-print {
    background: none; border: none; color: #0071e3;
    font-size: 15px; padding: 6px; cursor: pointer; border-radius: 8px;
  }
  .task-mh-print:hover { background: #f3f4f6; }
  .task-mh-save {
    background: var(--accent); color: #fff;
    border: none; border-radius: 10px;
    padding: 7px 16px; font-size: 13px; font-weight: 700;
    cursor: pointer; flex-shrink: 0;
  }

  /* Layout: title left-spine + tabs right-area stacked vertically */
  .tk-layout { flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

  /* Left spine: ONLY show schedule pill + toggle button, everything else hidden by default */
  /* Mobile left spine: clean header bar (task-detail-accordion is only content) */
  .tk-left {
    width: 100%; border-right: none; flex-shrink: 0;
    padding: 0; max-height: none; overflow: hidden;
    background: #fff; border-bottom: none;
    display: flex; flex-direction: column;
  }
  /* Hide all direct children of tk-left except the task-detail-accordion */
  .tk-left > * { display: none !important; }
  .tk-left > .task-detail-accordion { display: flex !important; }
  /* Hide title and meta on mobile (title is in task-mh header) */
  .tk-left > .tk-title { display: none !important; }
  .tk-left > #tk-meta-row { display: none !important; }
  /* Preserve legacy dropdown display rules */
  #tk-dt-drop-schedule[style*="flex"] { display: flex !important; }
  #tk-dt-drop-routing[style*="flex"] { display: flex !important; }
  /* Close button for left panel (legacy, hidden since new accordion design handles this) */
  .tk-left-close-btn { display: none !important; }

  /* Title now lives in the full-width .tk-title-bar (shown on desktop AND mobile). */
  .tk-title-bar .tk-title { display: block !important; }

  /* Department is inside routing dropdown so always visible there */

  /* Quick chips row */
  .task-chips-row {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 4px 0 10px; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .task-chips-row::-webkit-scrollbar { display: none; }
  .tch-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: #f3f4f6; border: 1.5px solid #e5e7eb;
    border-radius: 20px; padding: 5px 12px;
    font-size: 12px; font-weight: 600; color: #374151;
    cursor: pointer; flex-shrink: 0; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .tch-chip i { font-size: 11px; color: #6b7280; }
  .tch-chip.has-value { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
  .tch-chip.has-value i { color: #3b82f6; }
  .tch-chip.pri-q1 { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
  .tch-chip.pri-q2 { background: #fffbeb; border-color: #fed7aa; color: #d97706; }
  .tch-chip.pri-q3 { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
  .tch-chip.pri-q4 { background: #f9fafb; border-color: #e5e7eb; color: #6b7280; }

  /* Task Detail accordion - desktop default hidden (shown via desktop CSS above) */
  .task-detail-accordion { display: none; }

  /* ── Mobile: Two-section accordion layout for task modal ─── */
  @media (max-width: 768px) {
    /* ── Task Details accordion (left section header) ── */
    .task-detail-accordion {
      display: flex !important; flex-direction: column;
      border: none; border-radius: 0; background: #fff;
      overflow: hidden; flex-shrink: 0;
    }
    .task-detail-accordion.open {
      flex: 1; min-height: 0;
    }
    .task-detail-header {
      display: flex !important; align-items: center; justify-content: space-between;
      padding: 13px 16px; cursor: pointer; background: #fff;
      border-bottom: 1px solid #e5e7eb; -webkit-tap-highlight-color: transparent;
      flex-shrink: 0;
    }
    .task-detail-header:active { background: #f9fafb; }
    /* Which panel you're in should be unmistakable: the ACTIVE header gets a
       solid blue band with white text; the inactive one is plain white/grey.
       This is the two-state switch (Details ⇄ Subtasks & Files). */
    /* Flat, not 3D: a solid blue band for the ACTIVE header, a clearly-bordered
       grey bar for the INACTIVE (closed) one so it never melts into the details
       above it. No gradients, no shadows. */
    /* Inverted: a CLOSED header is a solid blue band (tap to open); the OPEN
       one is a plain grey bar. */
    .task-detail-accordion.mob-closed .task-detail-header,
    .tk-right-mob-hdr.mob-closed {
      background: #2563eb !important; box-shadow: none !important;
    }
    .task-detail-accordion.mob-closed .task-detail-header span,
    .task-detail-accordion.mob-closed .task-detail-header i,
    .tk-right-mob-hdr.mob-closed > span,
    .tk-right-mob-hdr.mob-closed > span *,
    .tk-right-mob-hdr.mob-closed .tk-mob-chevron,
    .task-detail-accordion.mob-closed #task-detail-arrow {
      color: #fff !important;
    }
    .task-detail-accordion:not(.mob-closed) .task-detail-header,
    .tk-right-mob-hdr:not(.mob-closed) {
      background: #eef1f5 !important; box-shadow: none !important;
      border-top: 1px solid #d7dde5; border-bottom: 1px solid #d7dde5;
    }
    .task-detail-accordion:not(.mob-closed) .task-detail-header span,
    .task-detail-accordion:not(.mob-closed) .task-detail-header i,
    .tk-right-mob-hdr:not(.mob-closed) > span { color: #475569 !important; font-weight: 700; }
    .task-detail-body {
      display: none; padding: 10px 14px 20px; flex-direction: column; gap: 8px;
      background: #fafafa; overflow-y: auto; flex: 1; min-height: 0;
    }
    .task-detail-accordion.open .task-detail-body { display: flex; }
    .task-detail-accordion.open #task-detail-arrow { transform: rotate(180deg); }

    /* When task detail accordion is OPEN: tk-left expands to fill height */
    .tk-layout.left-acc-open .tk-left {
      flex: 1 !important; min-height: 0 !important; overflow: hidden !important;
      display: flex !important; flex-direction: column !important;
      background: #fff !important; border-bottom: none !important;
      padding: 0 !important;
    }
    /* WORK (right) panel is collapsed to just its header UNLESS it's open;
       expanded (fills, shows tabs) only in the 'right' state. */
    .tk-layout:not(.mob-right-open) .tk-right {
      flex: 0 0 auto !important; overflow: hidden !important;
      min-height: 0 !important;
    }
    .tk-layout:not(.mob-right-open) .tk-right > *:not(.tk-right-mob-hdr) { display: none !important; }
    .tk-layout.mob-right-open .tk-right { flex: 1 !important; min-height: 0 !important; }
    /* DETAILS (left) panel is header-only unless Details is open. */
    .tk-layout:not(.left-acc-open) .tk-left { flex: 0 0 auto !important; }

    /* ── Right-panel accordion header (mobile only) ── */
    .tk-right-mob-hdr {
      display: flex; align-items: center; justify-content: space-between;
      padding: 13px 16px; cursor: pointer; background: #fff;
      border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
      font-size: 13px; font-weight: 700; color: #374151;
      -webkit-tap-highlight-color: transparent;
    }
    .tk-right-mob-hdr:active { background: #f9fafb; }
    .tk-mob-chevron { font-size: 12px; color: #6b7280; transition: transform 0.22s; }
    /* Right panel open by default → chevron points up (expanded) */
    .tk-right-mob-hdr .tk-mob-chevron { transform: rotate(180deg); }

    /* Override tk-left hiding: show only task-detail-accordion */
    .tk-left > .task-detail-accordion { display: flex !important; }
    .tk-left > .task-detail-accordion .tk-quick-grid { display: grid !important; }

    /* Dropdowns within task-detail-body: hidden until opened via pill */
    .task-detail-body .tk-dt-drop { display: none !important; position: relative; z-index: 99998; overflow: visible; }
    .task-detail-body .tk-dt-drop[style*="flex"] { display: flex !important; }
    .task-detail-accordion.open .task-detail-body .tk-dt-drop-status { display: flex !important; }
    .task-detail-accordion.open .task-detail-body .tk-dt-drop-priority { display: flex !important; }

    /* Always show fields-body inside open accordion (no More Details toggle needed) */
    .task-detail-accordion.open .tk-fields-body { display: flex !important; }
    .task-detail-accordion.open .tk-fields-body > * { display: flex; }

    /* Template bar: hidden on mobile (template is in task-mh header) */
    .tk-tmpl-bar { display: none !important; }

    /* Footer template pill: hidden on mobile */
    .tk-footer-tmpl-wrap { display: none !important; }

    /* Footer on mobile: hide (actions are in task-mh header) */
    .tk-footer { display: none !important; }
  }

  /* More Details toggle: HIDDEN on all screens (replaced by always-visible fields) */
  .tk-fields-toggle { display: none !important; }

  /* Fields body: shown inside open task-detail accordion (no toggle needed) */
  .tk-fields-body {
    display: none; overflow-y: visible; overflow-x: visible;
    padding: 0;
    flex-direction: column; gap: 10px;
    align-items: start;
    scrollbar-width: none;
  }
  .tk-fields-body.open { display: flex; }
  .task-detail-accordion.open .tk-fields-body { display: flex !important; }
  .tk-fields-body::-webkit-scrollbar { display: none; }

  /* Vendor dropdown on mobile */
  .tk-fields-body .tm-autofill { position: relative; z-index: 1000; }
  .tk-fields-body .tm-autofill-list { position: absolute; top: calc(100% + 3px); left: 0; right: 0; background: #fff; border: 1px solid #e9ecef; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.1); max-height: 160px; overflow-y: auto; }

  /* Inline schedule pill panel (below chips, before details toggle) */
  .tk-schedule-inline {
    display: none; flex-direction: column; gap: 6px;
    padding: 8px 0 6px;
    border-top: 1px solid #f0f0f5;
    background: #fafafa;
  }
  .tk-schedule-inline.open { display: flex; }
  .tk-sched-row { display: flex; align-items: center; gap: 6px; }
  .tk-sched-lbl { font-size: 10px; font-weight: 700; color: #6b7280; width: 36px; flex-shrink: 0; text-transform: uppercase; }
  .tk-sched-dt { display: flex; gap: 4px; flex: 1; }
  .tk-sched-dt input[type="text"] { flex: 1; min-width: 0; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 8px; font-size: 12px; background: #fff; outline: none; font-family: inherit; }
  .tk-sched-dt input[type="time"] { flex: 0 0 80px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 8px; font-size: 12px; background: #fff; outline: none; font-family: inherit; }

  /* Right content area: fills remaining space */
  .tk-right {
    flex: 1; min-height: 0; display: flex;
    flex-direction: column; overflow: hidden; background: #fff;
  }

  /* Hide the OLD mobile bar (replaced by task-mh at top) */
  .tk-mobile-bar { display: none !important; }

  /* Tabs: horizontal scroll, no wrap */
  .tk-tabs {
    overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; padding: 0 12px;
    border-bottom: 1px solid #f0f0f5; flex-shrink: 0;
  }
  .tk-tabs::-webkit-scrollbar { display: none; }
  .tk-tab {
    flex-shrink: 0; padding: 10px 14px; font-size: 12px;
    font-weight: 600; white-space: nowrap;
  }
  /* Hide extra tabs on mobile by default */
  .tk-tab-more { display: none; }
  .tk-more-tabs-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 8px; background: #f3f4f6; border: none; border-top: 1px solid #e5e7eb; font-size: 11px; font-weight: 600; color: #6b7280; cursor: pointer; }
  .tk-more-tabs-toggle:hover { background: #e5e7eb; }
  .tk-more-tabs-toggle i { transition: transform .2s; }
  .tk-more-tabs-toggle.open i { transform: rotate(180deg); }
  .tk-more-tabs-panel { display: none; flex-wrap: wrap; gap: 6px; padding: 10px 14px; background: #fafafa; border-top: 1px solid #e5e7eb; }
  .tk-more-tabs-panel.open { display: flex; }
  .tk-more-tabs-panel .tk-tab { display: flex !important; border: 1px solid #e5e7eb; border-radius: 20px; background: #fff; }
  .tk-more-tabs-panel.full-screen { position: fixed; inset: 0; z-index: 500; background: #fff; overflow-y: auto; flex-direction: column; padding: 16px; }
  .tk-more-tabs-panel .tk-tab-close { display: none; position: fixed; top: 12px; right: 12px; z-index: 600; background: #ef4444; color: #fff; border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 14px; }
  .tk-more-tabs-panel.full-screen .tk-tab-close { display: flex !important; align-items: center; justify-content: center; }

  /* Tab pane: scrollable content */
  .tk-pane.active { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
  .tk-pane-body { padding: 12px 14px 80px; flex: 1; }

  /* Textarea: larger touch target */
  .tk-textarea { font-size: 14px; min-height: 100px; padding: 10px; }

  /* Subtask input: larger */
  .sub-add-bar input { font-size: 14px; padding: 10px 12px; }

  /* Priority grid inside dropdown: 2 across on mobile */
  .tk-pri-grid { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .tk-pri { font-size: 11px; padding: 8px 4px; }
  /* Priority pill color classes */
  #tk-priority-pill.pri-q1 { background:#fef2f2; border-color:#fecaca; color:#dc2626; }
  #tk-priority-pill.pri-q2 { background:#fffbeb; border-color:#fed7aa; color:#d97706; }
  #tk-priority-pill.pri-q3 { background:#eff6ff; border-color:#bfdbfe; color:#2563eb; }
  #tk-priority-pill.pri-q4 { background:#f9fafb; border-color:#e5e7eb; color:#6b7280; }
  /* Quick grid - 2x2 layout */
  .tk-quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .tk-quick-grid .tk-pill-std { justify-content:flex-start; }
  .tk-quick-grid .tk-pill-std.on { background:#111827; color:#fff; border-color:#111827; }

  /* ── Other modals → bottom sheets ────────────────────────── */
  .m-box.ai-box, .m-box.admin-box, .m-box.settings-box {
    max-width: 100%; border-radius: 22px 22px 0 0; max-height: 94vh; max-height: 94dvh;
  }
  .m-box.admin-box::before, .m-box.ai-box::before { display: none; }
  .pj-box { max-width: 100%; width: 100vw; max-height: 96vh; max-height: 96dvh; border-radius: 22px 22px 0 0; }
  .pj-info-grid { grid-template-columns: 1fr !important; }

  /* ── Notifications panel ─────────────────────────────────── */
  .notif-dropdown { width: 100%; border-left: none; padding-top: 52px; }
  .n-push-bar { padding: 10px 14px; }
  .npb-btn { font-size: 12px; padding: 5px 12px; }

  /* ── Current task banner — mobile: a clear vertical stack (meta line,
     full title, status pills, action buttons) instead of one crowded
     wrapped row all fighting for the same space. ─────────────────────── */
  #current-task-banner { padding: 2px 0; }
  .ctb-task-row {
    flex-wrap: wrap; align-items: flex-start; gap: 4px;
    padding: 10px 14px; min-height: 0;
  }
  .ctb-meta, .ctb-status-row, .ctb-actions {
    display: flex; flex-wrap: wrap; align-items: center;
    width: 100%; gap: 6px;
  }
  /* Title gets its own full line and can wrap to two lines instead of
     being squeezed to a fraction of the screen and ellipsized mid-word. */
  .ctb-title {
    width: 100%; flex: unset; font-size: 14px; font-weight: 700;
    white-space: normal; overflow: visible; text-overflow: unset;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .ctb-status-row { font-size: 11px; }
  /* Every action button becomes an equal-width, thumb-sized touch target
     instead of a tiny 10px pill packed edge to edge. */
  .ctb-actions .ctb-action-btn, .ctb-actions .ctb-open-btn, .ctb-folder-wrap {
    flex: 1 1 auto; min-width: 84px; justify-content: center;
    padding: 8px 12px; font-size: 12px; border-radius: 10px;
  }
  .ctb-folder-btn { width: 100%; justify-content: center; max-width: none; }

  /* ── Holding zone ────────────────────────────────────────── */
  .holding-zone { padding: 8px 6px; }

  /* ── PHB bars ────────────────────────────────────────────── */
  .phb-head { padding: 8px 12px; font-size: 12px; }
  .phb-add { padding: 4px 10px; font-size: 11px; }
  .phb-body { max-height: 120px; }

  /* ── Search suggest ──────────────────────────────────────── */
  .search-suggest { max-height: 60vh; max-height: 60dvh; border-radius: 14px; }

  /* ── Settings box mobile ─────────────────────────────────── */
  .m-box.settings-box { max-height: 95vh; max-height: 95dvh; border-radius: 16px 16px 0 0; margin-top: auto; margin-bottom: 0; }
  .sched-grid { grid-template-columns: 1fr 1fr; }

  /* ════════════════════════════════════════════════════════════
     DATE PICKER — bottom sheet on mobile
     ════════════════════════════════════════════════════════════ */
  #luma-dp {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    transform: none !important;
    width: 100% !important; max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 20px 20px max(32px,env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,.22) !important;
    z-index: 10000001 !important;
    animation: mobileSheetUp .22s cubic-bezier(.2,.8,.2,1) !important;
  }
  @keyframes mobileSheetUp { from { transform: translateY(60%); opacity:0; } to { transform: translateY(0); opacity:1; } }
  /* Bigger day cells */
  .dp-day { padding: 12px 0 !important; font-size: 16px !important; border-radius: 10px !important; min-height: 44px !important; }
  .dp-grid { gap: 4px !important; }
  .dp-head { font-size: 16px !important; margin-bottom: 16px !important; font-weight: 700 !important; }
  .dp-nav { width: 40px !important; height: 40px !important; font-size: 16px !important; border-radius: 10px !important; }
  .dp-days-head { font-size: 11px !important; margin-bottom: 8px !important; font-weight: 800 !important; color: #6b7280 !important; }
  /* Calendar bottom-sheet drag handle */
  #luma-dp::before {
    content: ''; display: block; width: 40px; height: 4px;
    background: #d1d1d6; border-radius: 2px; margin: 0 auto 18px; flex-shrink: 0;
  }
  /* Overlay behind date picker on mobile */
  #luma-dp-mob-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.45); z-index: 10000000;
    -webkit-tap-highlight-color: transparent;
  }
  #luma-dp-mob-overlay.active { display: block; }

  /* ════════════════════════════════════════════════════════════
     SCHEDULE SECTION — bigger touch targets
     ════════════════════════════════════════════════════════════ */
  .tk-sched-compact-row {
    padding: 8px 0 !important;
    min-height: 52px !important;
    align-items: center !important;
    border-bottom: 1px solid #f3f4f6;
    flex-wrap: nowrap !important;
  }
  .tk-sched-compact-row:last-child { border-bottom: none; }
  .tk-dt-drop-lbl { font-size: 11px !important; width: 40px !important; font-weight: 800 !important; }
  .tk-input-std.tk-input-xs {
    font-size: 14px !important; padding: 10px 11px !important;
    border-radius: 10px !important; min-height: 44px !important;
    border: 1.5px solid #e5e7eb !important;
  }
  .tk-input-std.tk-input-xs:focus { border-color: #0071e3 !important; }
  /* Hide custom time picker wrap; show native time input on mobile */
  .tk-time-picker-wrap { display: none !important; }
  /* …except inside the floating Schedule sheet, where the custom picker (a
     centered grid with a close ×) is the reliable, fully-visible option. */
  .tk-dt-drop.tk-layer-floating .tk-time-picker-wrap { display: flex !important; align-items: center; flex-shrink: 0; }
  .tk-dt-drop.tk-layer-floating #e-time,
  .tk-dt-drop.tk-layer-floating #e-end-time { display: none !important; }
  .tk-dt-drop.tk-layer-floating #e-time-display,
  .tk-dt-drop.tk-layer-floating #e-end-time-display {
    width: 84px !important; height: 40px !important; text-align: center;
    border: 1.5px solid #e5e7eb !important; border-radius: 10px !important;
    background: #fff !important; font-size: 13px !important; color: #111827 !important;
    cursor: pointer;
  }
  /* Native time inputs: show directly on mobile */
  #e-time, #e-end-time {
    display: flex !important;
    border: 1.5px solid #e5e7eb !important; border-radius: 10px !important;
    padding: 10px 8px !important; font-size: 13px !important;
    background: #fff !important; color: #111827 !important;
    outline: none !important; width: 90px !important;
    height: 44px !important; font-family: inherit !important;
    flex-shrink: 0 !important;
  }
  /* Actual dates section: collapse by default on mobile (shown via toggle) */
  .tk-actual-section { display: none !important; }
  .tk-actual-section.mob-open { display: block !important; }
  /* Show actual toggle button on mobile */
  .tk-actual-toggle-btn { display: flex !important; }

  /* ════════════════════════════════════════════════════════════
     DASHBOARD — scrollable accordion on mobile
     ════════════════════════════════════════════════════════════ */
  #v-dash {
    overflow-y: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding-bottom: 80px !important;
  }
  /* Scrolling LIST views reserve space so their last row clears the fixed 56px
     nav (and the floating action buttons above it). The calendar time-grid
     views (Today/Week) are NOT in this list: they scroll internally via
     .grid-body, so padding the view container itself just left a dead ~84px
     band below the grid — the FABs now simply float over the grid instead. */
  .grid-body, #v-completed, .view-scroll, .task-list-scroll {
    padding-bottom: max(84px, calc(72px + env(safe-area-inset-bottom))) !important;
  }
  /* Time-grid views fill to the nav; the FABs float over them. */
  #v-today, #v-week { padding-bottom: 0 !important; }
  .db-kpi-row {
    flex-direction: row !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    padding: 12px 10px 8px !important; gap: 8px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid #f0f0f5;
  }
  .db-kpi-row::-webkit-scrollbar { display: none; }
  .db-kpi {
    flex: 0 0 auto !important;
    min-width: 80px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    gap: 8px !important;
    border: 1px solid #f0f0f5;
    background: #fff;
  }
  .db-kpi-n { font-size: 22px !important; }
  .db-kpi-l { font-size: 10px !important; }
  /* ── Mobile dashboard — stat cards + task cards ───────────── */
  .db-today-mobile { display: none !important; }
  /* db-body: vertical, scrollable content */
  .db-body {
    flex-direction: column !important;
    overflow: visible !important;
    flex: none !important;
    min-height: 0 !important;
  }
  .db-main {
    overflow: visible !important;
    flex: none !important;
    min-height: 0 !important;
  }
  /* Section nav: sticky, horizontal scroll */
  .db-section-nav {
    position: sticky !important; top: 0 !important; z-index: 20 !important;
    overflow-x: auto !important; overflow-y: visible !important;
    scrollbar-width: none !important;
    background: #fff !important;
    border-bottom: 2px solid #f0f0f5 !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    margin-top: 12px !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  }
  .db-section-nav::-webkit-scrollbar { display: none; }
  .db-sec-btn {
    flex-shrink: 0 !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    border-radius: 20px !important;
    border: 1.5px solid #e5e7eb !important;
    background: #f9f9fb !important;
    color: #374151 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }
  .db-sec-btn.active {
    background: #0071e3 !important; color: #fff !important; border-color: #0071e3 !important;
  }
  /* Section content: full width */
  .db-section-content { padding-bottom: 0 !important; }
  /* Projects table: horizontal scroll */
  .db-table-wrap {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    border-radius: 0 !important;
  }
  /* Task list: no outer padding — toolbar handles its own spacing */
  #dash-tasks-list { padding: 0 !important; }
  #dash-meetings-list { padding: 10px 12px !important; }

  /* ════════════════════════════════════════════════════════════
     PLAN VIEW / HOLDING AREA — mobile friendly
     ════════════════════════════════════════════════════════════ */
  #v-plan, #v-routines {
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .rtn-view-wrap { padding: 12px !important; }
  /* Sticky tab bar needs a background that matches the page */
  .rtn-tab-bar { background:#f1f5f9 !important; box-shadow:0 2px 8px rgba(255,255,255,.9); }
  /* Compact hero on mobile */
  .rtn-today-hero { padding:14px 16px !important; gap:14px !important; flex-wrap:nowrap !important; margin-bottom:16px !important; border-radius:16px !important; }
  .rtn-hero-ring { width:64px !important; height:64px !important; flex-shrink:0; }
  .rtn-hero-ring svg { width:64px !important; height:64px !important; }
  .rtn-hero-title { font-size:16px !important; }
  .rtn-hero-sub { font-size:11px !important; }
  .rtn-hero-stats { gap:10px !important; margin-top:6px !important; }
  .rtn-hero-stat-val { font-size:15px !important; }
  .rtn-hero-stat-lbl { font-size:9px !important; }
  .rtn-tab-btn { font-size:11px !important; padding:8px 4px !important; gap:3px !important; }
  .rtn-tab-btn i { font-size:10px !important; }
  .plan-horizons-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  #v-plan > div { padding: 12px !important; }
  .plan-col {
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;
    overflow: hidden !important;
    border: 1px solid #e9ecef !important;
    margin-bottom: 0 !important;
  }
  .plan-col-head {
    font-size: 14px !important; padding: 14px 16px !important;
    font-weight: 700 !important;
  }
  .plan-col-body {
    padding: 10px 12px !important; gap: 10px !important;
    display: flex; flex-direction: column;
  }
  /* Plan cards: bigger touch area */
  .plan-card {
    padding: 14px 16px !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    border: 1.5px solid #e9ecef !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .plan-card-title { font-size: 14px !important; line-height: 1.4 !important; }
  .plan-card-meta { font-size: 12px !important; margin-top: 6px !important; }
  .plan-card-actions {
    display: flex !important; gap: 8px !important;
    margin-top: 12px !important; flex-wrap: wrap !important;
  }
  .plan-card-btn {
    font-size: 13px !important; padding: 9px 16px !important;
    border-radius: 10px !important; flex: 1 !important;
    text-align: center !important; min-height: 40px !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; gap: 6px !important;
    border: 1.5px solid #d1d5db !important;
  }
  .plan-card-btn.schedule-today {
    background: #0071e3 !important; color: #fff !important;
    border-color: #0071e3 !important;
  }
  /* Unscheduled: vertical stacking on mobile */
  #plan-list-unscheduled {
    flex-direction: column !important; max-height: none !important;
  }
  #plan-list-unscheduled .plan-card {
    min-width: 0 !important; max-width: 100% !important;
  }
  /* Plan view header */
  #v-plan > div:first-child { margin-bottom: 14px !important; }

  /* ════════════════════════════════════════════════════════════
     PROJECT MODAL — mobile date fields
     ════════════════════════════════════════════════════════════ */
  .proj-launch-date-inp {
    font-size: 15px !important; padding: 10px 12px !important;
    border-radius: 10px !important; min-height: 46px !important;
    border: 1.5px solid #e5e7eb !important;
  }
  /* Project modal: full bottom sheet */
  #modal-project .m-box {
    max-height: 97vh !important; max-height: 97dvh !important;
    border-radius: 22px 22px 0 0 !important;
    overflow: hidden !important;
  }
  /* Project modal tab bar: horizontal scroll on mobile */
  .pj-tabs {
    overflow-x: auto !important; flex-wrap: nowrap !important;
    scrollbar-width: none !important; padding: 0 !important;
  }
  .pj-tabs::-webkit-scrollbar { display: none; }
  .pj-tab {
    flex-shrink: 0 !important; font-size: 12px !important;
    padding: 10px 14px !important; white-space: nowrap !important;
  }

  /* ════════════════════════════════════════════════════════════
     HOLDING ZONE (sidebar) — mobile
     ════════════════════════════════════════════════════════════ */
  .holding-zone {
    max-height: 40vh !important;
    overflow-y: auto !important;
  }
  .holding { gap: 8px !important; padding: 10px 12px !important; }
  .parked-zone-body { max-height: 160px !important; }

  /* ════════════════════════════════════════════════════════════
     KANBAN — mobile horizontal scroll improvements
     ════════════════════════════════════════════════════════════ */
  .k-board {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    display: flex !important; flex-direction: row !important;
    align-items: flex-start !important;
    padding: 10px 12px 80px !important;
    gap: 10px !important;
  }
  /* Slightly narrower than the viewport so the next column peeks in — a visual
     cue there's more, and a closer drop target when dragging cards across. */
  .k-col { min-width: 78vw !important; max-width: 82vw !important; flex-shrink: 0 !important; }
  .k-head { font-size: 14px !important; padding: 14px 16px !important; }
}

/* ═══════════════════════════════════════════════════════════
   SMALL PHONE (≤ 480px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .logo { font-size: 17px; }
  .fab-group { bottom: 64px; right: 12px; }
  /* Beat the iOS-zoom input[type=text]{16px!important} rule with a more specific
     selector so the mobile task title is genuinely bigger + bolder (>16px still
     avoids the focus-zoom). */
  .tk-title-bar input.tk-title { font-size: 20px !important; font-weight: 800 !important; }
  .db-kpi-bar { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 10px; }
  .plan-grid { grid-template-columns: 1fr; }
  .matrix-grid { grid-template-columns: 1fr; }
  .m-box.task-box { height: 98vh; height: 98dvh; max-height: 98vh; max-height: 98dvh; }
  /* print buttons shown on mobile when view is active (controlled by JS) */
  .tch-chip { font-size: 11px; padding: 4px 10px; }
}

/* ════════════════════════════════════════════════════════════
   LANDSCAPE PHONE  (≤ 768px height in landscape)
   ════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
    .header { flex-wrap: nowrap; height: 48px; padding: 0 14px; gap: 10px; }
    .h-left { width: auto; border-bottom: none; padding: 0; order: 1; }
    .h-right { width: auto; border-bottom: none; padding: 0; order: 2; flex: 1; justify-content: flex-end; }
    .search-wrap { order: 3; width: auto; flex: 1; max-width: 240px; padding: 0; border: none; }
    .view-nav { display: none; } /* hide tab bar in landscape-phone — use sidebar instead */
    .top-clock { display: none; }
    .sidebar { width: 60%; }
    .m-box.task-box { height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
    .task-box .tk-left, .task-box .tk-right { border-top-left-radius: 0; border-top-right-radius: 0; }
    .tk-layout { flex-direction: row; }
    .tk-left { width: 180px; max-height: none; border-bottom: none; border-right: 1px solid #e9ecef; display: flex; grid-template-columns: none; }
    .tk-left .tk-block:first-child { grid-column: auto; }
}

/* ════════════════════════════════════════════════════════════
   OVERRIDE: existing 800px block  (ensure no conflict)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
    /* These were set in the original 800px block above — re-confirm for clarity */
    .header { flex-wrap: nowrap; }
    .view-nav { padding: 0 10px; }
}

/* ── Gantt Chart ─────────────────────────────────────────────── */
/* #modal-gantt is the very last .modal in the DOM, so at the shared base
   z-index:500 it always painted on top of every other modal opened while it
   stays open underneath — most visibly the task modal, now openable directly
   from a Gantt row (see .gantt-open-modal-btn) with Gantt left in the
   background, and any of its own nested dialogs (promote/print/template
   pickers etc.) that come after #modal-task in the DOM specifically rely on
   "later in DOM = on top" to layer above IT. Dropping Gantt one step below
   the shared baseline fixes the one direction that was actually wrong
   without touching modal-task's own z-index and inverting those others. */
#modal-gantt { z-index: 499; }
.gantt-box { background:#fff; max-width:100vw; width:100vw; height:100vh; padding:0; display:flex; flex-direction:column; border-radius:0; overflow:hidden; position:relative; }
/* flex-wrap here (and on its right-hand control cluster, and on #gantt-proj-info
   below) is a no-op on a wide desktop window — everything already fits on one
   line — but it's the difference between the toolbar gracefully dropping to a
   second line vs. silently clipping/overflowing once the window narrows below
   what all those buttons need side by side. */
.gantt-header { background:#fff; border-bottom:1px solid #e5e7eb; padding:12px 16px; display:flex; align-items:center; gap:12px; flex-shrink:0; flex-wrap:wrap; row-gap:8px; }
.gantt-zoom-btn { background:none; border:none; padding:5px 10px; border-radius:6px; font-size:11px; font-weight:600; color:#6b7280; cursor:pointer; transition:all .15s; }
.gantt-zoom-btn.active { background:#0071e3; color:#fff; }
/* Custom export date-range control in the Gantt toolbar (preview / PDF / Excel) */
.gantt-export-range { display:flex; align-items:center; gap:4px; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:6px; padding:3px 6px; flex-shrink:0; }
.gantt-export-range.active { background:#eff6ff; border-color:#bfdbfe; }
.gantt-export-range input[type="date"] { border:1px solid #e5e7eb; border-radius:5px; padding:2px 5px; font-size:10px; font-family:inherit; color:#374151; background:#fff; outline:none; width:110px; }
.gantt-export-range input[type="date"]:focus { border-color:#0071e3; }
.gantt-export-range.active input[type="date"] { border-color:#93c5fd; }
.gantt-export-range #gantt-range-clear { background:transparent; border:none; color:#6b7280; cursor:pointer; font-size:10px; padding:2px 5px; border-radius:4px; line-height:1; }
.gantt-export-range #gantt-range-clear:hover { background:rgba(0,0,0,.08); color:#ef4444; }
.gantt-body { display:flex; flex:1; min-height:0; overflow:hidden; position:relative; z-index:1; }

/* Edit Panel - Left Side */
.gantt-edit-panel { width:38%; flex-shrink:0; border-right:2px solid #e5e7eb; display:flex; flex-direction:column; overflow:hidden; background:#fff; position:relative; z-index:1; }
.gantt-edit-wrap { display:flex; flex-direction:column; overflow:hidden; flex:1; min-width:0; max-width:100%; }
/* Height matches .gantt-chart-header's total exactly (24+24+18 sub-rows + its
   own 2px border = 68px) — these are two independent headers stacked over two
   independent row-lists, so if their heights ever drift apart, every row below
   drifts by the same amount for the rest of the panel's height. That gap was
   the actual bug, not anything about row content itself. */
.gantt-edit-header-row { display:flex; align-items:center; height:66px; background:linear-gradient(180deg,#fbfbfd,#f5f6f8); border-bottom:2px solid #e5e7eb; box-shadow:0 1px 0 rgba(17,24,39,.03); flex-shrink:0; overflow-x:auto; overflow-y:hidden; }
.gantt-edit-header-row::-webkit-scrollbar { height:4px; }
.gantt-edit-header-row::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:2px; }
.gantt-edit-scroll { flex:1; overflow-y:auto; overflow-x:auto; }
.gantt-edit-scroll::-webkit-scrollbar { width:6px; height:6px; }
.gantt-edit-scroll::-webkit-scrollbar-track { background:#f3f4f6; }
.gantt-edit-scroll::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:3px; }

/* Column widths — CSS custom properties so each group can be dragged wider/narrower
   via the resize handles in the header; every cell in a group (header + every row)
   reads the same variable, so they always stay in sync automatically. */
.gantt-edit-panel {
    /* Status/Progress a touch wider than before — the header now carries both
       a Hide-column eye AND a Move-column icon (see ge-col-move), and 56px/
       52px started clipping the second icon. */
    /* Dates widened 76→100px: the date inputs inherited a generic form-field
       padding (10px each side, meant for the roomy task-modal sidebar) that
       a DD-MM-YYYY string (10 chars) plus that padding can't fit in 76px —
       it was clipping to "01-08-2" / "04-0" (see .luma-dp-input padding
       override below, which reclaims most of that space; the extra width
       here covers the Actual columns, which also share their cell with the
       small clear-date "×" button). */
    /* Eye widened 32→50px to also fit the "open full task" shortcut button
       (see .gantt-open-modal-btn) alongside the visibility toggle. Owner/
       Vendor widened a touch so 2 capped badges + the "+" add button (see
       renderGanttTaskRow's GANTT_BADGE_MAX capping) have real room instead of
       immediately clipping. Act widened for the redesigned link/derive/delete
       buttons, which are now filled/colored (bigger tap targets) instead of
       bare icons. */
    --gcw-eye: 86px; --gcw-task: 140px; --gcw-status: 64px; --gcw-workflow: 96px; --gcw-progress: 60px; --gcw-dates: 100px;
    --gcw-dur: 42px; --gcw-owner: 68px; --gcw-vendor: 68px; --gcw-act: 76px;
}
.ge-cell { position:relative; flex-shrink:0; align-self:stretch; display:flex; align-items:center; border-right:1px solid #f3f4f6; padding:0 6px; font-size:10px; font-weight:700; color:#4b5563; letter-spacing:.03em; text-transform:uppercase; overflow:hidden; box-sizing:border-box; }
.ge-eye-h, .ge-eye { width:var(--gcw-eye); min-width:var(--gcw-eye); justify-content:center; gap:2px; padding:0 2px; }
.ge-task-h, .ge-task { width:var(--gcw-task); min-width:100px; }
.ge-status-h, .ge-status { width:var(--gcw-status); min-width:44px; justify-content:center; }
.ge-workflow-h, .ge-workflow { width:var(--gcw-workflow); min-width:60px; justify-content:center; }
.ge-progress-h, .ge-progress { width:var(--gcw-progress); min-width:44px; justify-content:center; }
.ge-dates-h, .ge-dates { width:var(--gcw-dates); min-width:60px; justify-content:center; }
.ge-dur-h, .ge-dur { width:var(--gcw-dur); min-width:36px; justify-content:center; }
.ge-owner-h, .ge-owner { width:var(--gcw-owner); min-width:40px; justify-content:center; }
.ge-vendor-h, .ge-vendor { width:var(--gcw-vendor); min-width:40px; justify-content:center; }
.ge-act-h, .ge-act { width:var(--gcw-act); min-width:44px; justify-content:center; border-right:none; padding:0 2px; }
.gantt-eye-btn { background:none; border:none; cursor:pointer; color:#6b7280; font-size:13px; padding:2px 4px; flex-shrink:0; }
.gantt-eye-btn:hover { color:#374151; }
/* Direct shortcut into the full task modal, sitting right next to the
   visibility eye at the very start of the row — a distinct blue so it never
   reads as "another eye toggle" despite sharing that button's base shape. */
.gantt-open-modal-btn { color:#0071e3; }
.gantt-open-modal-btn:hover { color:#005bb5; }
.gantt-open-modal-btn i { font-size:11px; }
/* Phase reorder arrows — deliberately placed at the very start of the Task
   name cell (always visible without scrolling) rather than the Actions
   column at the far right, which requires horizontally scrolling the edit
   panel past ~800px of columns to reach — a control this commonly needed
   shouldn't be that hard to find. */
.gantt-phase-move-btn { background:none; border:none; cursor:pointer; color:#8b8fd8; font-size:9px; line-height:1; padding:0 2px; display:block; }
.gantt-phase-move-btn:hover { color:#3730a3; }
.gantt-phase-move-btn:disabled { cursor:default; }
/* Task reorder chevrons (left of each task row), stacked to stay narrow. */
.gantt-move-btns { display:inline-flex; flex-direction:column; gap:1px; flex-shrink:0; }
.gantt-move-btn { background:none; border:none; cursor:pointer; color:#9ca3af; font-size:12px; line-height:.9; padding:1px 3px; display:block; border-radius:4px; }
.gantt-move-btn:hover { color:#0071e3; background:#eef4ff; }
/* Mark-internal shield toggle on each Gantt row (tasks + subtasks). */
.gantt-mark-internal-btn { color:#b8bcc4; }
.gantt-mark-internal-btn:hover { color:#b45309; }
.gantt-mark-internal-btn.on { color:#b45309; }
.gantt-mark-internal-btn.on i { filter:drop-shadow(0 0 0.5px #b45309); }
/* Internal task marker in the Gantt: amber left accent + INT tag. */
.gantt-edit-row.gantt-internal-row .ge-task { box-shadow: inset 3px 0 0 #f59e0b; }
.gantt-internal-tag { display:inline-block; font-size:7px; font-weight:800; letter-spacing:.03em; color:#b45309; background:#fff7ed; border:1px solid #fed7aa; border-radius:3px; padding:0 3px; margin-right:4px; flex-shrink:0; vertical-align:middle; line-height:1.5; }
/* "Show internal" toolbar toggle active state. */
#gantt-internal-toggle-btn.on { background:#b45309 !important; color:#fff !important; }
.ge-cell[data-col].hidden-col { display:none !important; }
/* Column eye icons sit at the LEFT of their header cell, ahead of the label,
   instead of pushed to the right — easier to spot as a consistent left-hand
   column of controls, matching the per-row eye column. */
.ge-col-eye { order:-1; margin-right:4px; }
.ge-dur-input { width:100%; border:none; background:transparent; font-size:11px; font-family:inherit; text-align:center; padding:0; -moz-appearance:textfield; }
.ge-dur-input::-webkit-inner-spin-button, .ge-dur-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
/* Absolutely positioned so it never affects flex sizing/order — straddles the
   column border (5px into each side) for a forgiving drag target, with a
   visible grip mark so it's easy to spot, not just a hover-only sliver. */
.ge-col-resizer { position:absolute; top:0; right:-5px; width:10px; height:100%; cursor:col-resize; z-index:20; }
.ge-col-resizer::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2px; height:16px; background:#d1d5db; border-radius:1px; }
.ge-col-resizer:hover::after, .ge-col-resizer.active::after { background:#0071e3; width:3px; }
/* Per-column eye toggle in the header, at the left (order:-1 above pins it first) */
.ge-col-eye { background:none; border:none; cursor:pointer; color:#c7c7cc; font-size:10px; padding:2px; flex-shrink:0; }
.ge-col-eye:hover { color:#0071e3; }
.ge-col-eye.col-hidden { color:#ef4444; }

/* Resizer */
.gantt-resizer { width:6px; cursor:col-resize; background:#f3f4f6; border-left:1px solid #e5e7eb; border-right:1px solid #e5e7eb; flex-shrink:0; transition:background .15s; z-index:10; }
.gantt-resizer:hover, .gantt-resizer.active { background:#0071e3; }

/* Chart Panel - Right Side */
.gantt-chart-panel { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:200px; }
.gantt-chart-header { display:flex; flex-direction:column; background:#f9fafb; border-bottom:2px solid #e5e7eb; flex-shrink:0; overflow:hidden; }
.gantt-chart-scroll { flex:1; overflow:auto; position:relative; }
.gantt-chart-scroll::-webkit-scrollbar { width:8px; height:8px; }
.gantt-chart-scroll::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:4px; }
.gantt-chart-scroll::-webkit-scrollbar-thumb:hover { background:#9ca3af; }
.gantt-grid { position:relative; }

/* Chart Headers */
.gantt-header-row { display:flex; height:24px; background:#f9fafb; border-bottom:1px solid #e5e7eb; flex-shrink:0; }
.gantt-subheader-row { display:flex; height:24px; background:#fff; border-bottom:1px solid #f3f4f6; flex-shrink:0; }
.gantt-daynum-row { display:flex; height:18px; background:#f0f4ff; border-bottom:2px solid #c7d2fe; flex-shrink:0; }
.gantt-daynum-cell { display:flex; align-items:center; justify-content:center; border-right:1px solid #e0e7ff; font-size:8px; font-weight:800; color:#6366f1; flex-shrink:0; }
.gantt-daynum-cell.day1 { color:#0071e3; }
.gantt-header-month { display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#374151; border-right:1px solid #e5e7eb; flex-shrink:0; }
.gantt-day-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:1px solid #f3f4f6; font-size:9px; color:#6b7280; flex-shrink:0; }
.gantt-day-cell.today-col { background:#fef2f2; }
.gantt-day-cell .day-num { font-weight:700; color:#374151; font-size:10px; }
.gantt-day-cell.today-col .day-num { color:#ef4444; }
.day-dow { font-size:8px; color:#6b7280; display:block; }

/* Chart Rows */
.gantt-row { display:flex; align-items:center; height:44px; border-bottom:1px solid #f3f4f6; position:relative; }
.gantt-row:hover { background:#f9fafb; }
.gantt-row.subtask-row { height:36px; background:#fafafa; }
.gantt-row.subtask-row:hover { background:#f0f4ff; }
.gantt-row.phase-row { height:40px; background:#f0f4ff; border-bottom:2px solid #e0e7ff; }
.gantt-row.weekend-row { background:#fafafa; }
.gantt-name-row { height:44px; display:flex; align-items:center; padding:0 10px; border-bottom:1px solid #f3f4f6; gap:6px; overflow:hidden; }
.gantt-name-row.subtask-name-row { height:36px; padding-left:24px; background:#fafafa; }
.gantt-name-row:hover { background:#f9fafc; }
.gantt-name-row.phase-row { height:32px; background:#f0f4ff; border-bottom:2px solid #e0e7ff; padding:0 10px; }
.gantt-name-text { font-size:11px; font-weight:600; color:#111827; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.gantt-name-row.subtask-name-row .gantt-name-text { font-size:10px; font-weight:500; color:#374151; }

/* Gantt Bars */
.gantt-bar { position:absolute; height:20px; border-radius:5px; display:flex; align-items:center; padding:0 6px; font-size:10px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; top:50%; transform:translateY(-50%); cursor:pointer; transition:filter .15s; box-shadow:0 1px 3px rgba(0,0,0,.12); gap:4px; }
.gantt-bar:hover { filter:brightness(1.1); }
.gantt-bar.subtask-bar { height:14px; border-radius:4px; font-size:9px; }
.gantt-bar-progress { height:100%; border-radius:inherit; background:rgba(255,255,255,.3); transition:width .3s; }
/* Drag-to-connect handle: a small dot at the end of a task's bar, rendered as
   a sibling of the bar (not nested — the bar clips overflow for its label/
   progress fill, so the handle needs its own stacking context to peek past
   the bar's edge). left/top are set inline to the bar's right edge, vertically
   centered; translate(-50%,-50%) makes that point the dot's true center.
   Dragging it onto another task's bar creates a "must finish first" link, as
   a direct-manipulation alternative to the Task Order popup. Hidden until the
   row is hovered so it doesn't clutter the chart at rest. */
.gantt-link-handle { position:absolute; width:11px; height:11px; border-radius:50%; background:#fff; border:2px solid currentColor; cursor:crosshair; opacity:0; transition:opacity .15s,transform .15s; z-index:6; box-shadow:0 1px 2px rgba(0,0,0,.25); transform:translate(-50%,-50%); }
.gantt-row:hover .gantt-link-handle { opacity:1; }
.gantt-link-handle:hover { transform:translate(-50%,-50%) scale(1.35); }
.gantt-link-drop-target { outline:2px solid #0071e3; outline-offset:2px; }
/* "Predecessor is late" flag (see _ganttSuccessorFlag()) — pinned at the left
   edge of a task's bar so it's visible while scanning the chart, not just on
   hover; the color itself (red/orange/grey) is the at-a-glance severity, the
   title attribute carries the specific reason. */
.gantt-flag-pin { position:absolute; transform:translate(-50%,-120%); font-size:11px; z-index:6; cursor:pointer; filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
/* Baseline ("initial planned") drift marker — a thin bracket-ended line
   under a task's bars, only drawn when the current plan has actually moved
   away from what was first committed to, so it reads as "here's the drift"
   rather than a redundant echo of the planned bar right above it. */
.gantt-baseline-marker { position:absolute; height:3px; background:#94a3b8; border-radius:2px; z-index:1; }
.gantt-baseline-marker::before, .gantt-baseline-marker::after { content:''; position:absolute; top:-2px; width:1px; height:7px; background:#94a3b8; }
.gantt-baseline-marker::before { left:0; }
.gantt-baseline-marker::after { right:0; }
.gantt-milestone { position:absolute; width:12px; height:12px; transform:translateY(-50%) rotate(45deg); top:50%; cursor:pointer; }
/* Move/resize hotspots on a bar — a plain mousedown-drag on the bar body moves
   it (shifts both dates by the same number of days); these two thin strips at
   its edges resize just that one end instead. Invisible at rest (only the
   cursor changes) so they don't visually compete with the label/progress fill. */
.gantt-bar-edge { position:absolute; top:0; bottom:0; width:6px; cursor:ew-resize; z-index:3; }
.gantt-bar-edge.left { left:0; }
.gantt-bar-edge.right { right:0; }
.gantt-bar-edge:hover { background:rgba(255,255,255,.35); }
/* "Mark actual start/complete" pills — anchored at today's column so they're
   always reachable regardless of where the planned bar sits, and only shown
   on row hover so an untouched chart stays clean. Direct alternative to
   setting actual dates via the left-panel date pickers. */
.gantt-mark-btn { position:absolute; transform:translate(-50%,-50%); opacity:0; transition:opacity .15s; z-index:4; border:none; border-radius:9px; padding:0 6px; font-size:9px; font-weight:700; line-height:16px; height:16px; cursor:pointer; background:#0071e3; color:#fff; white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.gantt-mark-btn.done { background:#10b981; }
.gantt-row:hover .gantt-mark-btn { opacity:1; }
.gantt-mark-btn:hover { filter:brightness(1.1); }
/* Drag-to-draw a new planned bar — an invisible full-width strip sitting in
   the planned bar's own vertical band, only rendered on rows with no planned
   dates yet. A faint tint on hover is the only hint it's there so it doesn't
   clutter every empty row visually. */
.gantt-draw-lane { position:absolute; left:0; right:0; z-index:1; cursor:crosshair; }
.gantt-draw-lane:hover { background:rgba(59,130,246,.10); border-radius:4px; }

/* ── Touch support (Pointer Events) ─────────────────────────────────────────
   The bars/edges/handles are dragged with pointer events; touch-action:none on
   them tells the browser "this gesture is a drag, don't scroll/zoom the chart."
   The scroll container keeps its default panning, so dragging empty space still
   scrolls the timeline. */
#gantt-grid [data-col="planned"], #gantt-grid [data-col="actual"],
.gantt-bar, .gantt-bar-edge, .gantt-draw-lane, .gantt-link-handle,
.ge-col-resizer, .gantt-resizer { touch-action: none; }

/* iPad/mobile: a drag-to-draw or bar-drag gesture that starts on the chart
   must never be interpreted as a text selection. touch-action:none (above)
   stops the browser from panning/zooming, but Safari's selection + magnifier
   callout is a separate gesture that only -webkit-user-select/-webkit-touch-
   callout actually suppress — without these, dragging across the grid pops
   up the native "Copy/Look Up" bubble and highlights row labels instead of
   drawing/moving the bar. Inputs inside edit rows are explicitly excluded so
   typing a task/phase name still works normally. */
.gantt-grid, .gantt-row, .gantt-header, .gantt-header-row, .gantt-day-cell,
.gantt-daynum-cell, .gantt-bar, .gantt-bar-edge, .gantt-draw-lane,
.gantt-link-handle, .gantt-milestone, .gantt-edit-row {
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.gantt-edit-row input, .gantt-edit-row select, .gantt-edit-row textarea,
.gantt-quickadd-input, .gantt-edit-input {
    user-select: text; -webkit-user-select: text; -webkit-touch-callout: default;
}
/* .luma-dp-input's shared base style (assets/app.css ~1441) sets padding:8px
   10px for the roomy task-modal sidebar — inside the dense Gantt table that
   alone ate ~20px of an already-narrow column, clipping a 10-character
   DD-MM-YYYY date down to 4-7 visible characters. Every date cell here
   already centers its text and sizes itself off --gcw-dates, so it doesn't
   need that padding at all. */
.gantt-edit-row .luma-dp-input, .gantt-edit-header-row .luma-dp-input {
    padding: 0 2px;
}

/* Coarse pointers (finger): give the drag/resize hotspots a real tap target
   without changing the crisp look on mouse. */
@media (pointer: coarse) {
    .gantt-bar-edge { width: 18px; }
    .gantt-link-handle { width: 20px; height: 20px; opacity: .55; }
    .gantt-row:hover .gantt-link-handle, .gantt-link-handle { opacity: .55; }
    .ge-col-resizer { width: 20px; right: -10px; }
    .gantt-resizer { width: 12px; }
    /* Slightly taller bars are easier to grab on touch. */
    .gantt-bar { height: 24px; }
    .gantt-bar.subtask-bar { height: 18px; }
}
.gantt-draw-preview { position:absolute; background:rgba(59,130,246,.35); border:1.5px dashed #3b82f6; border-radius:4px; pointer-events:none; z-index:10; box-sizing:border-box; }
/* Custom hover card for the actual bar's schedule-performance breakdown (see
   ganttShowActualTip()) — a styled fixed-position tooltip instead of the
   plain native title, since the whole point is showing colored ahead/on-
   time/at-risk/delayed deltas, which a browser tooltip can't render. */
.gantt-actual-tip { position:fixed; z-index:1000; background:#1f2937; color:#fff; border-radius:8px; padding:10px 12px; font-size:11px; line-height:1.6; box-shadow:0 6px 20px rgba(0,0,0,.35); pointer-events:none; width:230px; opacity:0; transform:translateY(2px); transition:opacity .1s,transform .1s; }
.gantt-actual-tip.visible { opacity:1; transform:translateY(0); }
.gantt-actual-tip .tip-head { display:flex; align-items:center; gap:6px; font-weight:800; font-size:12px; margin-bottom:7px; padding-bottom:7px; border-bottom:1px solid rgba(255,255,255,.18); }
.gantt-actual-tip .tip-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.gantt-actual-tip .tip-row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:3px; }
.gantt-actual-tip .tip-label { color:#6b7280; flex-shrink:0; }
.gantt-actual-tip .tip-val { font-weight:700; text-align:right; }
.gantt-actual-tip .tip-val.good { color:#4ade80; }
.gantt-actual-tip .tip-val.bad { color:#f87171; }
.gantt-actual-tip .tip-val.neutral { color:#93c5fd; }
.gantt-actual-tip .tip-foot { margin-top:7px; padding-top:7px; border-top:1px solid rgba(255,255,255,.18); }
.gantt-actual-tip .tip-foot .tip-val { color:#e5e7eb; font-weight:600; }
.gantt-today-line { position:absolute; top:0; bottom:0; width:2px; background:#ef4444; opacity:0.6; z-index:5; pointer-events:none; }
.gantt-today-label { position:absolute; top:2px; font-size:8px; font-weight:700; color:#ef4444; background:#fff; padding:1px 4px; border-radius:4px; white-space:nowrap; z-index:6; transform:translateX(-50%); border:1px solid #fee2e2; }

.gantt-proj-legend { display:flex; align-items:center; gap:9px; }
#gantt-search-input { width:190px; }

/* ── Gantt responsiveness ─────────────────────────────────────────────────
   The chart side (.gantt-chart-panel) is already `flex:1` so it always claims
   whatever room is left — the actual problem was everything ELSE in the modal
   staying rigid at a fixed size regardless of viewport, which either forced
   the chart down to nothing or clipped/overflowed the toolbar itself. These
   breakpoints progressively reclaim room for the chart as the window narrows:
   first the least-essential chrome (legend, then column widths) shrinks or
   drops, and only below true phone widths does the table give up a fixed
   share of the screen to the chart outright. See also the resize listener
   near setGanttZoomFull() in app-gantt.js, which keeps "Fit" zoom honestly
   fit to the CURRENT width instead of whatever it was on first render. */
@media (max-width: 1100px) {
    /* The legend is genuinely nice-to-have, not load-bearing — the same
       ahead/on-time/at-risk/delayed info is always available per-bar via its
       hover tooltip, so dropping it here isn't losing information, just a
       shortcut to it. */
    .gantt-proj-legend { display:none; }
    .gantt-edit-panel {
        --gcw-task: 120px; --gcw-status: 56px; --gcw-workflow: 80px; --gcw-progress: 50px; --gcw-dates: 84px;
        --gcw-dur: 36px; --gcw-owner: 56px; --gcw-vendor: 56px; --gcw-act: 64px; --gcw-eye: 76px;
    }
}
@media (max-width: 860px) {
    #gantt-search-input { width: 130px; }
    .gantt-edit-panel { width: 34%; }
}
@media (max-width: 680px) {
    /* Below phone-landscape width a 34% table would squeeze the chart under
       its own usable minimum (see .gantt-chart-panel's min-width:200px) — at
       that point the table itself switches to a fixed, still-scrollable
       width instead of a shrinking percentage, so the chart reliably keeps
       its floor instead of the two fighting over the same too-small space. */
    .gantt-edit-panel { width: 220px; min-width: 220px; }
    .gantt-header { padding: 8px 10px; gap: 8px; }
    #gantt-proj-info { padding: 6px 10px; gap: 12px; }
    #gantt-search-input { width: 100px; }
}

/* Utilities */
.gantt-sort-btn { background:#f3f4f6; border:1px solid #e5e7eb; border-radius:4px; padding:4px 10px; font-size:10px; cursor:pointer; color:#6b7280; }
.gantt-sort-btn:hover { background:#e5e7eb; color:#374151; }
.gantt-col-toggle { position:relative; }
.gantt-col-toggle-btn { background:#f3f4f6; border:1px solid #e5e7eb; border-radius:4px; padding:4px 8px; font-size:10px; cursor:pointer; color:#6b7280; }
.gantt-col-toggle-btn:hover { background:#e5e7eb; }
.gantt-col-dropdown { position:absolute; top:100%; right:0; background:#fff; border:1px solid #e5e7eb; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.1); padding:8px; z-index:100; min-width:160px; }
.gantt-col-item { display:flex; align-items:center; gap:8px; padding:6px 8px; cursor:pointer; font-size:11px; border-radius:4px; }
.gantt-col-item:hover { background:#f3f4f6; }
.gantt-col-item input { margin:0; }

/* Status/Priority filter — same button+dropdown shape as the Columns toggle,
   with an active state (border + badge) so it's obvious at a glance whether
   any filter is currently narrowing the chart. */
.gantt-filter-toggle { position:relative; }
.gantt-filter-toggle-btn { display:inline-flex; align-items:center; gap:5px; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:4px; padding:4px 9px; font-size:10px; font-weight:600; cursor:pointer; color:#6b7280; }
.gantt-filter-toggle-btn:hover { background:#e5e7eb; }
.gantt-filter-toggle-btn.active { background:#eff6ff; border-color:#bfdbfe; color:#0071e3; }
.gantt-filter-badge { display:inline-flex; align-items:center; justify-content:center; min-width:14px; height:14px; padding:0 3px; border-radius:7px; background:#0071e3; color:#fff; font-size:9px; font-weight:700; line-height:1; }
.gantt-filter-dropdown { position:absolute; top:100%; right:0; margin-top:4px; background:#fff; border:1px solid #e5e7eb; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.1); padding:8px; z-index:100; min-width:170px; }
.gantt-filter-section + .gantt-filter-section { margin-top:6px; padding-top:6px; border-top:1px solid #f3f4f6; }
.gantt-filter-section-title { font-size:9px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px 4px; }
.gantt-filter-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.gantt-filter-clear-btn { display:block; width:100%; margin-top:8px; padding:6px 8px; border:none; border-top:1px solid #f3f4f6; background:none; border-radius:0 0 6px 6px; font-size:10px; font-weight:700; color:#0071e3; cursor:pointer; text-align:center; }
.gantt-filter-clear-btn:hover { background:#eff6ff; }

/* ── Gantt Inline Editing ─────────────────────────────── */
/* Row heights match renderGantt()'s ROW_H/SUB_ROW_H/PHASE_H constants exactly —
   this edit panel and the timeline bars on the right are two independent trees
   that must stay row-for-row aligned, so the height numbers can't drift apart
   between the two. Task/subtask rows are tall enough for ~2 wrapped lines of
   text (see .ge-task span's line-clamp) instead of 1 fixed truncated line. */
.gantt-edit-row { display:flex; align-items:center; height:56px; border-bottom:1px solid #f3f4f6; background:#fff; width:max-content; transition:background .12s ease; }
.gantt-edit-row:hover { background:#f8fafc; }
.gantt-edit-row.editing { background:#fffbeb; box-shadow:inset 3px 0 0 #f59e0b; }
/* No row-level padding — that used to shift the phase row's Eye/Task cells 10px
   right of everywhere else, which is exactly the kind of drift that makes a
   header look "unaligned" with the rows below it. Cell-level padding (via
   .ge-cell) supplies the same visual breathing room without the offset. */
.gantt-edit-row.phase-row { height:40px; background:#f0f4ff; border-bottom:2px solid #e0e7ff; font-size:11px; font-weight:700; color:#3730a3; text-transform:uppercase; letter-spacing:.05em; }
.gantt-edit-row.subtask-row { height:46px; background:#fafafa; }
.gantt-edit-row.subtask-row:hover { background:#f0f9ff; }
/* Real rows get their width from the sum of their .ge-cell children (all
   driven by the same --gcw-* vars as the header, so they can never drift).
   This row has no cells of its own — just centered text — so it has to
   compute that same sum itself to span the full row width instead of
   shrinking to fit "+ Add Phase". The -16px matches this row's own
   left+right margin so its outer footprint lines up with real rows. */
.gantt-edit-row.add-row { height:36px; background:#f0fdf4; border:1px dashed #10b981; border-radius:6px; margin:4px 8px; justify-content:center; cursor:pointer; width:calc(var(--gcw-eye) + var(--gcw-task) + var(--gcw-status) + var(--gcw-workflow) + var(--gcw-progress) + (var(--gcw-dates) * 4) + (var(--gcw-dur) * 2) + var(--gcw-owner) + var(--gcw-vendor) + var(--gcw-act) - 16px); box-sizing:border-box; }
.gantt-edit-row.add-row:hover { background:#dcfce7; }
/* Permanent blank "next row" at the end of a task/subtask list — height must
   match QUICKADD_H in renderGantt() so the timeline's matching spacer row
   keeps everything below it aligned between the two panels. */
.gantt-edit-row.gantt-quickadd-row { height:32px; }
.gantt-quickadd-input { border:none; background:transparent; font-size:11px; font-family:inherit; color:#374151; width:100%; padding:2px 0; min-width:0; }
.gantt-quickadd-row.saving .gantt-quickadd-input { opacity:0.5; pointer-events:none; }
/* "+ Add a task" (phase-level — creates a new top-level task) is green,
   matching every other "add a task" control in this view (the Add Phase
   button, the bold + circle next to the eye) so it reads as THAT action.
   "+ Add a subtask" (nested under one specific task) instead matches the
   plain white task-row background — a quiet continuation of that task, not
   its own category — so the two rows are never confused with each other. */
.gantt-quickadd-row.qa-task { background:#f0fdf4; }
.gantt-quickadd-row.qa-task:hover, .gantt-quickadd-row.qa-task:focus-within { background:#dcfce7; }
.gantt-quickadd-row.qa-task .qa-icon { color:#10b981; }
.gantt-quickadd-row.qa-task .gantt-quickadd-input::placeholder { color:#16a34a; }
.gantt-edit-row.gantt-quickadd-row.qa-subtask { background:#fff; }
.gantt-quickadd-row.qa-subtask:hover, .gantt-quickadd-row.qa-subtask:focus-within { background:#f8fafc; }
.gantt-quickadd-row.qa-subtask .qa-icon { color:#6b7280; }
.gantt-quickadd-row.qa-subtask .gantt-quickadd-input::placeholder { color:#c7c7cc; }

/* Edit cells — actual widths now come from the --gcw-* variables on .ge-cell
   (see the rules right after .gantt-edit-panel above); this block used to
   hardcode every column's width a second time and, appearing later in the
   stylesheet, silently won the cascade over the variable-based rule for every
   single column — which is exactly what made the header drift out of
   alignment with the data rows below it. Kept .gantt-edit-cell itself since
   it's still a real, used base class; the width overrides are gone. */
.gantt-edit-cell { flex-shrink:0; display:flex; align-items:center; border-right:1px solid #f3f4f6; padding:0 4px; height:100%; overflow:hidden; font-size:9px; font-weight:700; color:#6b7280; text-transform:uppercase; box-sizing:border-box; }
.gantt-edit-cell.hidden-col { display:none !important; }

.gantt-edit-input { border:1px solid transparent; background:transparent; padding:3px 5px; font-size:10px; color:#374151; outline:none; width:100%; border-radius:3px; box-sizing:border-box; }
.gantt-edit-input:focus { background:#fff; border-color:#0071e3; }
.gantt-edit-select { border:1px solid transparent; background:transparent; padding:3px 4px; font-size:10px; color:#374151; outline:none; cursor:pointer; width:100%; border-radius:3px; box-sizing:border-box; }
.gantt-edit-select:focus { background:#fff; border-color:#0071e3; }
.gantt-edit-btn { display:inline-flex; align-items:center; justify-content:center; padding:4px 7px; border:none; border-radius:5px; font-size:10px; font-weight:600; cursor:pointer; transition:filter .1s,background .1s; }
.gantt-edit-btn:hover { filter:brightness(0.96); }
.gantt-edit-btn.save { background:#10b981; color:#fff; }
.gantt-edit-btn.save:hover { background:#059669; }
.gantt-edit-btn.cancel { background:#f3f4f6; color:#6b7280; }
.gantt-edit-btn.cancel:hover { background:#e5e7eb; }
.gantt-edit-btn.del { background:#fef2f2; color:#dc2626; }
.gantt-edit-btn.del:hover { background:#fee2e2; }
.gantt-edit-btn.add { background:#e0e7ff; color:#3730a3; padding:2px 5px; }
.gantt-edit-btn.add:hover { background:#c7d2fe; }
/* Task-row action trio (link / derive-from-subtasks / delete) — previously
   3 bare, same-shape icons crammed edge to edge with nothing to tell them
   apart at a glance or make them easy to tap individually. Each now gets its
   own tinted background (same visual language as .add/.del above) so the
   destructive one in particular reads as distinct, not just "the 3rd icon". */
.gantt-edit-btn.link { background:#eff6ff; color:#0071e3; }
.gantt-edit-btn.link:hover { background:#dbeafe; }
.gantt-edit-btn.derive { background:#f5f3ff; color:#7c3aed; }
.gantt-edit-btn.derive:hover { background:#ede9fe; }
.gantt-edit-btn.link i, .gantt-edit-btn.derive i, .gantt-edit-btn.del i { font-size:10px; }
.ge-act { gap:3px; }
.gantt-phase-team-btn { background:transparent; border:none; padding:0; cursor:pointer; display:inline-flex; align-items:center; }
.gantt-phase-team-btn:hover { filter:brightness(0.96); }
.gantt-badge { display:inline-flex; align-items:center; padding:1px 4px; border-radius:4px; font-size:10px; font-weight:600; margin:1px; white-space:nowrap; }
.gantt-badge.assignee { background:#e0e7ff; color:#3730a3; cursor:pointer; }
.gantt-badge.owner { background:#fff7ed; color:#b45309; border:1px solid #fed7aa; cursor:pointer; }
.gantt-badge.owner i { color:#f59e0b; }
.gantt-badge.owner:hover, .gantt-badge.assignee:hover { filter:brightness(0.96); }
.gantt-badge.vendor { background:#fef3c7; color:#92400e; }
/* "+N" overflow chip — replaces silently clipping a 3rd+ badge against the
   cell's fixed width. Neutral grey (not owner/assignee/vendor-colored) since
   it represents a mix, not a specific person or vendor; clicking it opens
   the exact same picker the "+" add button does. */
.gantt-badge.more { background:#f3f4f6; color:#4b5563; cursor:pointer; font-weight:700; }
.gantt-badge.more:hover { background:#e5e7eb; }
.gantt-badge-remove { cursor:pointer; margin-left:2px; opacity:0.5; font-size:11px; font-weight:400; }
.gantt-badge-remove:hover { opacity:1; color:#dc2626; }
.gantt-badge-relink { cursor:pointer; margin-left:2px; opacity:0.5; font-size:11px; font-weight:400; }
.gantt-badge-relink:hover { opacity:1; color:#0071e3; }
/* Inside the Task Order popup specifically, these are the only way to remove
   or relink a dependency — worth a much bigger hit target than the compact
   owner/vendor badge ×'s elsewhere. A near-miss here used to land on the
   popup's own click-outside-to-close area instead, closing the whole thing
   with no visible feedback — which reads exactly like "the × doesn't work".
   Padding alone still wasn't forgiving enough in practice, so these are now
   full labeled buttons ("Remove"/"Swap") rather than bare icons — a much
   bigger, unambiguous target that doesn't rely on hitting an exact icon. */
.gantt-dep-action-btn { padding:5px 9px; border-radius:5px; border:1px solid #e5e7eb; background:#fff; font-size:10px; font-weight:700; white-space:nowrap; cursor:pointer; color:#6b7280; }
.gantt-dep-action-btn:hover { background:#eff6ff; color:#0071e3; border-color:#bfdbfe; }
.gantt-dep-action-btn.remove:hover { background:#fef2f2; color:#dc2626; border-color:#fecaca; }
.gantt-progress-bar { width:36px; height:6px; background:#eef0f3; border:1px solid #e5e7eb; border-radius:3px; overflow:hidden; display:inline-block; vertical-align:middle; box-sizing:border-box; }
.gantt-progress-fill { height:100%; background:#10b981; border-radius:3px; transition:width .3s; min-width:2px; }
/* Gantt Drag-Drop Highlighters */
.gantt-drop-above { border-top:3px solid #0071e3 !important; background:#eff6ff !important; }
.gantt-drop-below { border-bottom:3px solid #0071e3 !important; background:#eff6ff !important; }
.gantt-drop-phase { background:#dbeafe !important; box-shadow:inset 0 0 0 2px #0071e3; }
.gantt-dragging { opacity:0.5; }

/* Gantt Popup */
.gantt-popup { position:fixed; z-index:1000; background:#fff; border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.15); padding:12px; min-width:200px; max-width:300px; max-height:320px; overflow-y:auto; }
.gantt-popup .popup-title { font-size:10px; font-weight:700; color:#6b7280; margin-bottom:8px; text-transform:uppercase; }
.gantt-popup-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:4px; cursor:pointer; font-size:11px; }
.gantt-popup-item:hover { background:#f3f4f6; }
.gantt-popup-item.selected { background:#eff6ff; color:#0071e3; }
.gantt-popup-item input { margin:0; }
.gantt-popup-add { display:flex; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid #e5e7eb; }
.gantt-popup-add input { flex:1; padding:6px 8px; border:1px solid #e5e7eb; border-radius:4px; font-size:11px; }
.gantt-popup-add button { padding:6px 12px; background:#0071e3; color:#fff; border:none; border-radius:4px; font-size:11px; cursor:pointer; }
.gantt-popup-add button.green { background:#10b981; }
.gantt-empty-badge { font-size:9px; color:#d1d5db; font-style:italic; }
.gantt-popup input:focus { border-color:#0071e3; }
.gantt-popup-item.disabled { opacity:.35; pointer-events:none; cursor:default; }
.gantt-popup-sub { font-size:9px; font-weight:600; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em; padding:6px 8px 2px; }
/* Small inline "clear" (×) next to Actual date cells — only shown once a date
   is set, so clearing it back to "not started/not done" doesn't require
   opening the date picker just to hit its own Clear button. */
.ge-date-clear { background:none; border:none; color:#d1d5db; cursor:pointer; font-size:10px; padding:0 2px; flex-shrink:0; line-height:1; }
.ge-date-clear:hover { color:#ef4444; }
#gantt-popup { pointer-events: auto; }

/* Planned vs Actual date columns get their own faint tint (header + every
   row type: task, subtask, phase, quickadd) so the two are visually
   distinguishable at a glance — increasingly useful now that either group
   can be dragged anywhere via column reorder, not just its original spot
   next to the other. Semi-transparent so it still reads correctly layered
   over each row type's own background (white/editing-amber/phase-blue). */
.ge-cell[data-col="planned"], .ge-cell[data-col="planned-dur"], .ge-cell[data-col="planned-end"] {
    background: rgba(59,130,246,.07);
}
.ge-cell[data-col="actual"], .ge-cell[data-col="actual-dur"], .ge-cell[data-col="actual-end"] {
    background: rgba(217,119,6,.08);
}
#gantt-popup * { pointer-events: auto; }

/* ── Planning Horizons view ───────────────────────────────── */
.plan-col { display:flex; flex-direction:column; background:#fff; border-radius:14px; border:1px solid var(--border); overflow:hidden; min-height:200px; }
.plan-col-head { display:flex; align-items:center; padding:12px 14px; font-size:12px; font-weight:700; color:#1d1d1f; flex-shrink:0; gap:4px; }
.plan-col-badge { margin-left:auto; background:rgba(0,0,0,0.10); color:#1d1d1f; font-size:10px; font-weight:700; border-radius:10px; padding:1px 7px; }
.plan-col-body { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:6px; min-height:60px; }
.plan-card { background:#f8f9fa; border:1px solid #e9ecef; border-radius:9px; padding:9px 11px; cursor:pointer; transition:box-shadow .15s,transform .1s; }
.plan-card:hover { box-shadow:0 3px 10px rgba(0,0,0,.10); transform:translateY(-1px); }
.plan-card-title { font-size:12px; font-weight:600; color:#1d1d1f; margin-bottom:4px; line-height:1.3; }
.plan-card-meta { font-size:10px; color:var(--muted); display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.plan-card-actions { display:flex; gap:4px; margin-top:6px; }
.plan-card-btn { font-size:10px; padding:3px 8px; border-radius:6px; border:1px solid #d1d5db; background:#fff; cursor:pointer; color:#374151; font-weight:600; transition:background .15s; }
.plan-card-btn:hover { background:#f0f7ff; border-color:#0071e3; color:#0071e3; }
.plan-card-btn.schedule-today { background:#0071e3; color:#fff; border-color:#0071e3; }
.plan-card-btn.schedule-today:hover { background:#005bb5; }
.plan-add-btn { margin:8px; padding:7px 12px; background:none; border:1.5px dashed #d1d5db; border-radius:9px; font-size:11px; color:var(--muted); cursor:pointer; transition:border-color .15s,color .15s; }
.plan-add-btn:hover { border-color:var(--accent); color:var(--accent); }
/* Horizon pills in task modal */
.horizon-pill { font-size:10px; font-weight:600; padding:4px 11px; border-radius:20px; border:1.5px solid #d1d5db; background:#fff; cursor:pointer; color:#6b7280; transition:all .15s; }
.horizon-pill.active { border-color:var(--accent); background:var(--accent); color:#fff; }
/* Plan horizon bars (inside week / month views) */
.phb { background:#fff; border-bottom:1.5px solid var(--border); flex-shrink:0; }
.phb-week .phb-head { background:linear-gradient(90deg,#dbeafe,#eff6ff); }
.phb-month .phb-head { background:linear-gradient(90deg,#fed7aa,#fff7ed); }
.phb-head { display:flex; align-items:center; gap:8px; padding:7px 14px; font-size:11px; font-weight:700; color:#374151; cursor:pointer; user-select:none; }
.phb-head:hover { background:rgba(0,113,227,.06); }
.phb-badge { background:#0071e3; color:#fff; font-size:9px; font-weight:700; border-radius:10px; padding:1px 6px; }
.phb-add { margin-left:6px; background:#0071e3; color:#fff; border:none; border-radius:6px; padding:2px 8px; font-size:10px; font-weight:700; cursor:pointer; }
.phb-body { display:flex; flex-wrap:nowrap; gap:8px; padding:8px 14px; overflow-x:auto; min-height:0; max-height:120px; }
.phb-body::-webkit-scrollbar { height:4px; }
.phb-body::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:2px; }
.phb-card { flex-shrink:0; background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:9px; padding:6px 10px; cursor:grab; min-width:140px; max-width:200px; transition:box-shadow .15s; }
.phb-card:hover { box-shadow:0 3px 10px rgba(0,0,0,.12); }
.phb-card[draggable="true"]:active { cursor:grabbing; opacity:.7; }
.phb-card-title { font-size:11px; font-weight:600; color:#1d1d1f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.phb-card-meta { font-size:10px; color:var(--muted); margin-top:2px; }
/* Drop-over highlight for plan horizon zones */
.plan-col-body.over, .phb-body.over { background:rgba(0,113,227,.08); border:2px dashed rgba(0,113,227,.45); border-radius:9px; transition:background .15s; }
.plan-col-body { transition:background .15s; }
@media(max-width:768px) { #v-plan > div:nth-child(2) { grid-template-columns:1fr 1fr; } .phb-body { flex-wrap:wrap; max-height:160px; } }
/* Task Templates */
.tk-tmpl-bar { display:none; gap:6px; padding:6px 14px; background:#fafafa; border-bottom:1px solid #f0f0f5; flex-shrink:0; }
/* Footer template pill wrapper - hidden on mobile, shown on desktop */
.tk-footer-tmpl-wrap { display:flex; position:relative; align-items:center; }
.tk-footer-tmpl-wrap .tmpl-dropdown { top:auto; bottom:calc(100% + 6px); right:0; }
.tk-tmpl-btn { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:7px; border:1px solid #e9ecef; background:#fff; font-size:10px; font-weight:600; color:#6b7280; cursor:pointer; transition:all .15s; }
.tk-tmpl-btn:hover { background:#f3f4f6; border-color:#d1d5db; color:#374151; }
.tk-tmpl-btn.tk-tmpl-use { border-color:#ede9fe; color:#7c3aed; background:#faf5ff; }
.tk-tmpl-btn.tk-tmpl-use:hover { background:#ede9fe; }
.tmpl-dropdown { 
    background:#fff; 
    border:1px solid #e5e7eb; 
    border-radius:10px; 
    box-shadow:0 8px 24px rgba(0,0,0,.1); 
    z-index: 99999; 
    min-width:160px; 
    overflow:hidden; 
    position: fixed;
    display: none;
}
.tmpl-dropdown.show { display: block !important; }
.tmpl-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; border:1px solid #e9ecef; margin-bottom:6px; cursor:pointer; transition:all .15s; }
.tmpl-item:hover { background:#f5f3ff; border-color:#c4b5fd; }
.tmpl-item-name { flex:1; font-size:13px; font-weight:600; color:#111827; }
.tmpl-item-del { background:transparent; border:none; color:#e5e7eb; cursor:pointer; padding:3px 6px; border-radius:5px; font-size:11px; transition:all .15s; }
.tmpl-item-del:hover { color:#ef4444; background:#fff1f2; }
/* Task Chains & Dependencies */
.t-card.is-blocked { border-left-color:#ef4444 !important; }
.t-card.is-ready   { border-left-color:#22c55e !important; }
.t-card.is-routine { /* border-left-color set inline to respect per-routine color */ }
.rtn-freq-btn.active { background:#7c3aed !important; color:#fff !important; border-color:#7c3aed !important; }
#tk-routine-card .rtn-freq-btn { padding:5px 12px; border:1.5px solid #ddd6fe; border-radius:8px; background:#fff; font-size:11px; font-weight:600; color:#7c3aed; cursor:pointer; transition:all .12s; }
#tk-routine-card .rtn-freq-btn:hover { border-color:#a78bfa; background:#ede9fe; }
.rtn-day-btn { padding:5px 4px; border:1.5px solid #ddd6fe; border-radius:7px; background:#fff; font-size:11px; font-weight:600; color:#6b7280; cursor:pointer; transition:all .12s; flex:1; min-width:0; text-align:center; }
.rtn-day-btn:hover { border-color:#a78bfa; color:#7c3aed; }
.rtn-day-btn.active { background:#7c3aed !important; color:#fff !important; border-color:#7c3aed !important; }
.rtn-moved-badge { display:inline-flex;align-items:center;gap:3px;background:#fef3c7;color:#d97706;border-radius:5px;padding:1px 5px;font-size:8px;font-weight:700;margin-left:4px; }
.t-card.is-routine.routine-done-today { background: linear-gradient(135deg, #f0fdf4 0%, #fff 60%); opacity: 0.82; }
.t-card.is-routine .t-title { color: var(--text); }
.rtn-streak-badge { display:inline-flex; align-items:center; gap:2px; background:#fef3c7; color:#d97706; border-radius:10px; padding:1px 5px; font-size:9px; font-weight:700; margin-left:4px; flex-shrink:0; }
.rtn-done-badge { display:inline-flex; align-items:center; gap:2px; background:#dcfce7; color:#16a34a; border-radius:10px; padding:1px 5px; font-size:9px; font-weight:700; margin-left:4px; flex-shrink:0; }
.habit-panel { background:#fff; border-radius:14px; border:1px solid var(--border); overflow:hidden; margin-bottom:14px; flex-shrink:0; }
.habit-panel-head { display:flex; align-items:center; padding:10px 14px; font-size:12px; font-weight:700; color:#1d1d1f; cursor:pointer; gap:6px; background:linear-gradient(135deg,#f5f3ff,#fdf4ff); }
.habit-panel-head:hover { background:rgba(124,58,237,.07); }

/* ── Routines View ─────────────────────────────────────────────────────── */
#v-routines { background:var(--bg); }
.rtn-view-wrap { padding:24px 28px; max-width:960px; margin:0 auto; width:100%; box-sizing:border-box; }
.rtn-today-hero { background:linear-gradient(135deg,#7c3aed,#a855f7); border-radius:20px; padding:20px 24px; color:#fff; display:flex; align-items:center; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.rtn-hero-ring { width:80px; height:80px; flex-shrink:0; }
.rtn-hero-ring svg { width:80px; height:80px; }
.rtn-hero-text { flex:1; min-width:180px; }
.rtn-hero-title { font-size:22px; font-weight:800; letter-spacing:-.5px; }
.rtn-hero-sub { font-size:13px; opacity:.85; margin-top:2px; }
.rtn-hero-stats { display:flex; gap:16px; margin-top:10px; flex-wrap:wrap; }
.rtn-hero-stat { text-align:center; }
.rtn-hero-stat-val { font-size:20px; font-weight:800; }
.rtn-hero-stat-lbl { font-size:10px; opacity:.75; text-transform:uppercase; letter-spacing:.5px; }
.rtn-section-title { font-size:13px; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.8px; margin:0 0 12px; }
/* Slim routine pill in month/week calendar cells — lighter than a real task card */
.m-rtn-stack { display:flex; flex-direction:column; gap:1px; margin-bottom:2px; flex-shrink:0; }
.m-rtn-stack .rtn-cal-pill { width:100%; max-width:100% !important; box-sizing:border-box; margin-bottom:0; }
/* Month view: routines as tiny icons — hover for detail, click to log */
.m-rtn-icons { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:3px; flex-shrink:0; }
.m-rtn-ico { width:15px; height:15px; border-radius:50%; border:1.5px solid; display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; cursor:pointer; background:#fff; box-sizing:border-box; transition:transform .1s; line-height:1; }
.m-rtn-ico:hover { transform:scale(1.25); }
/* Routine icon hover popover */
#rtn-ico-pop { display:none; position:fixed; z-index:9000; width:250px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:12px 14px; box-shadow:0 12px 40px rgba(0,0,0,.16); }
.rtn-cal-pill { display:flex; align-items:center; gap:4px; padding:1px 4px; margin-bottom:2px; border-radius:4px; background:#faf5ff; font-size:9px; line-height:1.5; cursor:pointer; overflow:hidden; opacity:.92; }
.rtn-cal-pill.done { background:#f0fdf4; opacity:.75; }
.rtn-cal-pill:hover { opacity:1; }
.rtn-cal-tick { flex-shrink:0; font-weight:700; font-size:10px; cursor:pointer; padding:0 2px; line-height:1; }
.rtn-cal-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#6b7280; font-weight:600; }
.rtn-cal-title.done { text-decoration:line-through; color:#6b7280; font-weight:500; }
.rtn-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.habit-card { background:#fff; border-radius:14px; border:1px solid var(--border); overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.habit-card-header { display:flex; align-items:center; gap:10px; padding:12px 14px 8px; }
.habit-card-color-bar { width:4px; border-radius:2px; flex-shrink:0; align-self:stretch; min-height:20px; }
.habit-card-info { flex:1; min-width:0; }
.habit-card-name { font-size:13px; font-weight:700; color:#111827; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.habit-card-badges { display:flex; align-items:center; gap:6px; margin-top:3px; flex-wrap:wrap; }
.habit-card-done-btn { flex-shrink:0; width:36px; height:36px; border-radius:50%; border:2.5px solid #d1d5db; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:all .2s; }
.habit-card-done-btn.done { background:#16a34a; border-color:#16a34a; color:#fff; }
.habit-card-done-btn:hover:not(.done) { border-color:#7c3aed; color:#7c3aed; background:#faf5ff; }
.habit-card-body { padding:0 14px 12px; }
/* Compact fixed-size heatmap — 28 small squares, not screen-filling blocks */
.habit-heatmap { display:grid; grid-template-columns:repeat(7, 20px); gap:3px; justify-content:start; }
.habit-heatmap-label-row { display:grid; grid-template-columns:repeat(7, 20px); gap:3px; justify-content:start; margin-bottom:3px; }
.habit-heatmap-lbl { font-size:8px; font-weight:600; color:#6b7280; text-align:center; }
.habit-heatmap-cell { width:20px; height:20px; border-radius:4px; cursor:pointer; transition:transform .1s; }
.habit-heatmap-cell:hover { transform:scale(1.2); }
.habit-heatmap-cell.empty { background:transparent; cursor:default; }
.habit-heatmap-cell.missed { background:#f3f4f6; }
.habit-heatmap-cell.off { background:transparent; border:1px dashed #eceef2; box-sizing:border-box; cursor:default; }
.habit-heatmap-cell.today-cell { outline:2px solid; outline-offset:1px; }
.habit-card-stats { display:flex; gap:12px; align-items:center; }
.habit-stat { display:flex; flex-direction:column; align-items:center; }
.habit-stat-val { font-size:16px; font-weight:800; }
.habit-stat-lbl { font-size:9px; color:#6b7280; text-transform:uppercase; letter-spacing:.4px; }
.habit-pct-bar { flex:1; height:6px; background:#f3f4f6; border-radius:3px; overflow:hidden; }
.habit-pct-fill { height:100%; border-radius:3px; transition:width .4s ease; }
.rtn-empty { text-align:center; padding:60px 20px; }
.rtn-empty-icon { font-size:48px; color:#c4b5fd; margin-bottom:16px; }
.rtn-empty-title { font-size:16px; font-weight:700; color:#374151; margin-bottom:8px; }
.rtn-empty-sub { font-size:13px; color:#6b7280; }

/* ── Routine Tabs ───────────────────────────────────────────────────────── */
.rtn-tab-bar { display:flex; gap:0; background:#f1f5f9; border-radius:12px; padding:3px; margin-bottom:16px; position:sticky; top:0; z-index:30; }
.rtn-tab-btn { flex:1; padding:9px 8px; border:none; background:none; border-radius:9px; font-size:12px; font-weight:600; color:#6b7280; cursor:pointer; transition:all .18s; white-space:nowrap; display:flex; align-items:center; justify-content:center; gap:5px; }
.rtn-tab-btn.active { background:#fff; color:#7c3aed; box-shadow:0 1px 4px rgba(0,0,0,.12); font-weight:700; }
.rtn-tab-btn:hover:not(.active) { color:#374151; }
.rtn-tab-btn i { font-size:11px; }
/* ── Routine Week Grid ─────────────────────────────────────────────────── */
.rtn-nav-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.rtn-nav-title { font-size:14px; font-weight:700; color:#111827; }
.rtn-nav-btn { background:#f1f5f9; border:none; border-radius:8px; width:30px; height:30px; cursor:pointer; font-size:14px; color:#374151; display:inline-flex; align-items:center; justify-content:center; transition:background .15s; }
.rtn-nav-btn:hover { background:#e2e8f0; }
.rtn-nav-today { background:rgba(124,58,237,.1); border:1px solid rgba(124,58,237,.22); color:#7c3aed; font-size:11px; font-weight:700; padding:0 10px; height:30px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.rtn-nav-today:hover { background:rgba(124,58,237,.18); }
.rtn-nav-title:hover { background:rgba(0,0,0,.04); border-radius:6px; }
.rtn-week-wrap { overflow-x:auto; border-radius:16px; border:1px solid var(--border); background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.rtn-week-grid { min-width:560px; }
.rtn-week-hdr { display:grid; border-bottom:2px solid #f1f5f9; }
.rtn-week-row { display:grid; border-bottom:1px solid #f9fafb; transition:background .15s; }
.rtn-week-row:last-child { border-bottom:none; }
.rtn-week-row:hover { background:#fafafe; }
.rtn-week-habit-cell { padding:10px 14px; display:flex; align-items:center; gap:8px; min-width:0; }
.rtn-week-habit-name { font-size:12px; font-weight:600; color:#111827; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rtn-week-day-hdr { padding:8px 4px; text-align:center; font-size:10px; font-weight:700; color:#6b7280; display:flex; flex-direction:column; align-items:center; gap:1px; }
.rtn-week-day-hdr.today-col { color:#7c3aed; background:#faf5ff; }
.rtn-week-cell { display:flex; align-items:center; justify-content:center; padding:8px 4px; }
.rtn-grid-dot { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; transition:all .2s; flex-shrink:0; }
.rtn-grid-dot.done { color:#fff; cursor:pointer; }
.rtn-grid-dot.done:hover { transform:scale(1.08); filter:brightness(1.1); }
.rtn-grid-dot.missed { background:#f3f4f6; color:#d1d5db; cursor:default; }
.rtn-grid-dot.future { background:#f9fafb; color:#e5e7eb; cursor:default; }
.rtn-grid-dot.off { background:transparent; border:1.5px dashed #eceef2; cursor:default; }
.rtn-grid-dot.today-empty { background:#fff; cursor:pointer; }
.rtn-grid-dot.today-empty:hover { transform:scale(1.08); }
.rtn-week-score-cell { padding:8px 14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:52px; }
.rtn-week-score-frac { font-size:13px; font-weight:800; color:#111827; }
.rtn-week-score-lbl { font-size:9px; color:#6b7280; text-transform:uppercase; }
/* Phone: compact the week grid so all 7 days + the score fit without the score
   column being clipped off the right edge (see gridMinW / colTemplate in JS). */
@media (max-width:640px) {
    .rtn-grid-dot { width:28px; height:28px; font-size:12px; }
    .rtn-week-habit-cell { padding:9px 8px; gap:6px; }
    .rtn-week-score-cell { padding:8px 4px; min-width:0; }
    .rtn-week-cell { padding:8px 2px; }
    .rtn-week-day-hdr { padding:8px 2px; }
}
/* Pulse animation for today's incomplete */
@keyframes rtn-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,.45);} 60%{box-shadow:0 0 0 7px rgba(124,58,237,0);} }
.rtn-pulse { animation:rtn-pulse 1.6s infinite; }
/* ── Routine Month Grid ─────────────────────────────────────────────────── */
.rtn-month-wrap { overflow-x:auto; border-radius:16px; border:1px solid var(--border); background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.rtn-month-grid { min-width:640px; }
.rtn-month-hdr { display:flex; border-bottom:2px solid #f1f5f9; align-items:stretch; }
.rtn-month-row { display:flex; border-bottom:1px solid #f9fafb; align-items:center; }
.rtn-month-row:last-child { border-bottom:none; }
.rtn-month-row:hover { background:#fafafe; }
.rtn-month-habit-col { flex-shrink:0; width:130px; padding:8px 12px; display:flex; align-items:center; gap:7px; border-right:1px solid #f1f5f9; }
.rtn-month-habit-col-hdr { flex-shrink:0; width:130px; padding:8px 12px; font-size:10px; font-weight:700; color:#6b7280; text-transform:uppercase; border-right:1px solid #f1f5f9; display:flex; align-items:center; }
.rtn-month-days-row { display:flex; flex:1; }
.rtn-month-day-hdr { flex:1; min-width:22px; text-align:center; padding:5px 1px; font-size:9px; font-weight:700; color:#6b7280; display:flex; flex-direction:column; align-items:center; gap:1px; }
.rtn-month-day-hdr.today-col { color:#7c3aed; background:#faf5ff; }
.rtn-month-cell { flex:1; min-width:22px; display:flex; align-items:center; justify-content:center; padding:4px 1px; }
.rtn-m-dot { width:18px; height:18px; border-radius:4px; transition:all .15s; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.rtn-m-dot:hover:not(.future):not(.off) { transform:scale(1.25); }
.rtn-m-dot.off { background:transparent; border:1px dashed #eceef2; box-sizing:border-box; cursor:default; }
.rtn-m-dot.future { cursor:default; background:#f9fafb; }
.rtn-month-score-col { flex-shrink:0; width:54px; padding:6px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-left:1px solid #f1f5f9; }
.rtn-month-score-col-hdr { flex-shrink:0; width:54px; padding:6px 8px; font-size:9px; font-weight:700; color:#6b7280; text-align:center; text-transform:uppercase; border-left:1px solid #f1f5f9; display:flex; align-items:center; justify-content:center; }
/* ── Motivational banners ──────────────────────────────────────────────── */
.rtn-motivate { border-radius:12px; padding:12px 16px; margin-bottom:16px; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; }
.rtn-motivate.good { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.rtn-motivate.warn { background:#fffbeb; color:#d97706; border:1px solid #fde68a; }
.rtn-motivate.push { background:#faf5ff; color:#7c3aed; border:1px solid #e9d5ff; }
/* Streak fire tooltip */
.rtn-fire { display:inline-flex; align-items:center; gap:2px; font-size:10px; font-weight:800; color:#f59e0b; }

/* ── Plan View Refinements ─────────────────────────────────────────────── */
.plan-horizons-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.plan-col { display:flex; flex-direction:column; background:#fff; border-radius:16px; border:1px solid var(--border); overflow:hidden; min-height:180px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.plan-col-head { display:flex; align-items:center; padding:12px 16px; font-size:12px; font-weight:700; color:#1d1d1f; flex-shrink:0; gap:6px; }
.plan-col-badge { margin-left:auto; font-size:10px; font-weight:700; border-radius:10px; padding:2px 8px; }
.plan-col-body { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:6px; min-height:60px; }
.plan-card { background:#fafafa; border:1px solid #eef0f3; border-radius:10px; padding:10px 12px; cursor:pointer; transition:box-shadow .15s,transform .1s; border-left-width:3px; }
.plan-card:hover { box-shadow:0 3px 10px rgba(0,0,0,.08); transform:translateY(-1px); }
.plan-card-title { font-size:12px; font-weight:600; color:#1d1d1f; margin-bottom:5px; line-height:1.35; }
.plan-card-meta { font-size:10px; color:var(--muted); display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.plan-card-actions { display:flex; gap:4px; margin-top:7px; }
.plan-card-btn { font-size:10px; padding:3px 8px; border-radius:6px; border:1px solid #d1d5db; background:#fff; cursor:pointer; color:#374151; font-weight:600; transition:background .15s; }
.plan-card-btn:hover { background:#f0f7ff; border-color:#0071e3; color:#0071e3; }
.plan-card-btn.schedule-today { background:#0071e3; color:#fff; border-color:#0071e3; }
.plan-card-btn.schedule-today:hover { background:#005bb5; }
.plan-add-btn { margin:8px; padding:8px 12px; background:none; border:1.5px dashed #d1d5db; border-radius:10px; font-size:11px; color:var(--muted); cursor:pointer; transition:border-color .15s,color .15s; }
.plan-add-btn:hover { border-color:var(--accent); color:var(--accent); }
.plan-col-body.over { background:rgba(0,113,227,.07); border:2px dashed rgba(0,113,227,.4); border-radius:9px; }
@media(max-width:900px){ .plan-horizons-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:540px){ .plan-horizons-grid { grid-template-columns:1fr; } }

.chain-blocked-badge { display:inline-flex;align-items:center;gap:3px;background:#fef2f2;color:#dc2626;border-radius:4px;padding:1px 6px;font-size:9px;font-weight:700;vertical-align:middle; }
.chain-ready-badge   { display:inline-flex;align-items:center;gap:3px;background:#dcfce7;color:#15803d;border-radius:4px;padding:1px 6px;font-size:9px;font-weight:700;vertical-align:middle; }
/* Deps tab sections */
.chain-section { border:1px solid #f3f4f6;border-radius:10px;padding:12px;background:#fafafa; }
.chain-section-title { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;margin-bottom:8px;display:flex;align-items:center;gap:6px; }
.handoff-box { background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px; }
#flow-delay-alert { display:flex;flex-direction:column;gap:8px; }
#flow-create-successor-form { display:flex;flex-direction:column;gap:6px; }
.gantt-dep-arrow { pointer-events:none; }
.handoff-received { background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:12px; }
.handoff-textarea { width:100%;border:1px solid #e5e7eb;border-radius:8px;padding:8px;font-size:12px;font-family:inherit;resize:vertical;min-height:80px;outline:none;box-sizing:border-box; }
.handoff-textarea:focus { border-color:#f59e0b; }
.handoff-type-sel { padding:5px 8px;border:1px solid #e5e7eb;border-radius:6px;font-size:11px;background:#fff;outline:none; }
/* Chains view */
.chains-header { display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0;gap:10px;flex-wrap:wrap; }
.chains-body { flex:1;overflow-y:auto;padding:20px; }
.chain-instance-card { background:#fff;border:1px solid #e5e7eb;border-radius:12px;margin-bottom:16px;overflow:hidden; }
.chain-instance-header { display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #f3f4f6;cursor:pointer; }
.chain-instance-header:hover { background:#fafafa; }
.chain-pipeline { display:flex;align-items:center;gap:0;padding:16px;overflow-x:auto; }
.chain-node { display:flex;flex-direction:column;align-items:center;gap:4px;min-width:100px;max-width:140px;cursor:pointer; }
.chain-node-circle { width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;border:2px solid;flex-shrink:0; }
.chain-node-label { font-size:10px;font-weight:600;text-align:center;color:#374151;word-break:break-word;line-height:1.3; }
.chain-node-status { font-size:9px;font-weight:700;padding:1px 6px;border-radius:4px; }
.chain-arrow { color:#d1d5db;font-size:18px;flex-shrink:0;margin:0 4px;padding-bottom:20px; }
.chain-progress-bar { height:4px;background:#f3f4f6;border-radius:2px;overflow:hidden; }
.chain-progress-fill { height:100%;background:#22c55e;border-radius:2px;transition:width .4s; }
/* Drafts View */
.drafts-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border); flex-shrink:0; gap:10px; flex-wrap:wrap; background:var(--bg); }
.drafts-filter-bar { display:flex; align-items:center; gap:6px; padding:10px 20px; border-bottom:1px solid var(--border); flex-shrink:0; flex-wrap:wrap; background:var(--bg); }
.drafts-filter-pill { padding:4px 12px; border-radius:20px; border:1px solid #e5e7eb; background:#fff; font-size:11px; font-weight:600; color:#6b7280; cursor:pointer; transition:all .15s; }
.drafts-filter-pill.active { background:#f59e0b; border-color:#f59e0b; color:#fff; }
.drafts-body { flex:1; overflow-y:auto; padding:20px; background:var(--bg); }
.drafts-group { margin-bottom:24px; }
.drafts-group-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#6b7280; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.draft-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px 16px; margin-bottom:10px; display:flex; flex-direction:column; gap:8px; transition:box-shadow .15s, border-color .15s; }
.draft-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.08); border-color:#d1d5db; }
.draft-card.is-new { border-left:3px solid #f59e0b; }
.draft-card.is-edit { border-left:3px solid #3b82f6; }
.draft-card.is-proj { border-left:3px solid #8b5cf6; }
.draft-card.is-mtg-notes { border-left:3px solid #10b981; }
.draft-card-top { display:flex; align-items:flex-start; gap:8px; }
.draft-card-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.draft-card-title { font-size:13px; font-weight:700; color:#111827; flex:1; word-break:break-word; }
.draft-card-age { font-size:11px; color:#6b7280; white-space:nowrap; flex-shrink:0; }
.draft-card-preview { font-size:12px; color:#6b7280; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.draft-card-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.draft-card-badge { display:inline-flex; align-items:center; gap:3px; font-size:10px; padding:2px 7px; border-radius:10px; font-weight:600; }
.draft-card-actions { display:flex; align-items:center; gap:6px; margin-top:2px; }
.draft-btn-restore { padding:5px 14px; border-radius:6px; background:#f59e0b; color:#fff; border:none; font-size:11px; font-weight:700; cursor:pointer; transition:background .15s; }
.draft-btn-restore:hover { background:#d97706; }
.draft-btn-open { padding:5px 14px; border-radius:6px; background:#0071e3; color:#fff; border:none; font-size:11px; font-weight:700; cursor:pointer; transition:background .15s; }
.draft-btn-open:hover { background:#0056b3; }
.draft-btn-discard { padding:5px 12px; border-radius:6px; background:none; border:1px solid #e5e7eb; font-size:11px; color:#6b7280; cursor:pointer; transition:all .15s; }
.draft-btn-discard:hover { border-color:#ef4444; color:#ef4444; }
.drafts-empty { text-align:center; padding:60px 20px; color:#6b7280; }
.drafts-empty-icon { font-size:48px; margin-bottom:12px; }
.drafts-nav-badge { background:#f59e0b; color:#fff; border-radius:10px; font-size:9px; font-weight:700; padding:1px 5px; margin-left:4px; vertical-align:middle; display:none; }
/* Templates Page */
.tmpl-page-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border); flex-shrink:0; gap:10px; flex-wrap:wrap; }
.tmpl-page-search { padding:6px 12px; border-radius:8px; border:1px solid #e9ecef; font-size:12px; width:200px; outline:none; transition:border-color .15s; }
.tmpl-page-search:focus { border-color:#8b5cf6; }
.tmpl-picker-search { padding:7px 12px; border-radius:8px; border:1px solid #e9ecef; font-size:12px; width:100%; outline:none; box-sizing:border-box; transition:border-color .15s; }
.tmpl-picker-search:focus { border-color:#8b5cf6; }
.tmpl-section-head { font-size:10px; font-weight:700; color:#6b7280; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.tmpl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-bottom:16px; }
.tmpl-card { background:#fff; border-radius:12px; border:1px solid #e9ecef; padding:14px; transition:all .15s; }
.tmpl-card:hover { border-color:#c4b5fd; box-shadow:0 2px 12px rgba(139,92,246,.08); }
.tmpl-card-shared-border { border-left:3px solid #9ca3af; }
.tmpl-card-head { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
.tmpl-card-icon { width:32px; height:32px; border-radius:8px; background:#f5f3ff; display:flex; align-items:center; justify-content:center; color:#8b5cf6; font-size:14px; flex-shrink:0; }
.tmpl-card-meta { flex:1; min-width:0; }
.tmpl-card-name { font-size:14px; font-weight:700; color:#111827; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tmpl-card-sub { font-size:11px; color:#6b7280; }
.tmpl-card-badges { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; min-height:20px; }
.tmpl-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:600; }
.tmpl-badge-private { background:#f3f4f6; color:#6b7280; }
.tmpl-badge-shared { background:#f5f3ff; color:#7c3aed; }
.tmpl-badge-meeting { background:#fff7ed; color:#ea580c; }
.tmpl-card-actions { display:flex; gap:5px; flex-wrap:wrap; padding-top:8px; border-top:1px solid #f9fafb; }
.tmpl-card-btn { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:7px; border:1px solid #e9ecef; background:#fff; font-size:11px; font-weight:600; color:#374151; cursor:pointer; transition:all .12s; }
.tmpl-card-btn:hover { background:#f3f4f6; }
.tmpl-card-btn-apply { border-color:#ede9fe; color:#7c3aed; background:#faf5ff; }
.tmpl-card-btn-apply:hover { background:#ede9fe; }
.tmpl-card-btn-share { border-color:#e5e7eb; color:#6b7280; }
.tmpl-card-btn-share.active { border-color:#d1fae5; color:#059669; background:#ecfdf5; }
.tmpl-card-btn-share:hover { background:#f3f4f6; }
.tmpl-card-btn-del { color:#d1d5db; border-color:transparent; background:transparent; margin-left:auto; }
.tmpl-card-btn-del:hover { color:#ef4444; background:#fff1f2; border-color:#fecaca; }
/* Save / Edit Template Modals */
.stm-lbl { font-size:11px; font-weight:700; color:#6b7280; display:block; margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }
.stm-inp { width:100%; box-sizing:border-box; padding:8px 11px; border-radius:8px; border:1px solid #e9ecef; font-size:13px; outline:none; transition:border-color .15s; }
.stm-inp:focus { border-color:#8b5cf6; }
.stm-inp.error { border-color:#ef4444; }
/* Apply-selection checklist */
.tap-field-row { display:flex; align-items:flex-start; gap:10px; padding:8px 10px; border-radius:8px; border:1px solid #f0f0f5; cursor:pointer; transition:background .1s; }
.tap-field-row:hover { background:#faf5ff; border-color:#e9d5ff; }
.tap-field-row input[type=checkbox] { margin-top:2px; accent-color:#8b5cf6; width:14px; height:14px; flex-shrink:0; cursor:pointer; }
.tap-field-icon { width:22px; text-align:center; color:#8b5cf6; font-size:12px; flex-shrink:0; }
.tap-field-label { font-size:12px; font-weight:600; color:#374151; }
.tap-field-value { font-size:11px; color:#6b7280; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px; }
/* Template editor agenda/sub row */
.ted-item-row { display:flex; align-items:center; gap:6px; }
.ted-item-row input { flex:1; padding:5px 8px; border:1px solid #e9ecef; border-radius:6px; font-size:12px; outline:none; }
.ted-item-row input:focus { border-color:#8b5cf6; }
.ted-item-del { background:transparent; border:none; color:#d1d5db; cursor:pointer; padding:4px 6px; border-radius:5px; font-size:11px; }
.ted-item-del:hover { color:#ef4444; background:#fff1f2; }
/* Week task popup */
#week-task-popup {
    position:fixed; z-index:2000; background:#fff; border-radius:12px;
    box-shadow:0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1);
    padding:12px 14px; max-width:260px; min-width:180px;
    border:1px solid #e9ecef; pointer-events:auto;
    animation: weekPopIn .15s ease;
}
@keyframes weekPopIn { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
#week-task-popup .wtp-title { font-size:13px;font-weight:700;color:#111827;margin-bottom:4px;line-height:1.3; }
#week-task-popup .wtp-meta { font-size:11px;color:#6b7280;display:flex;flex-direction:column;gap:2px;margin-bottom:8px; }
#week-task-popup .wtp-open { width:100%;padding:6px;border-radius:7px;background:#0071e3;color:#fff;border:1px solid transparent;font-size:11px;font-weight:600;cursor:pointer;margin-top:4px; }
#week-task-popup .wtp-close { position:absolute;top:6px;right:8px;background:none;border:none;color:#6b7280;cursor:pointer;font-size:12px;padding:2px 4px; }
/* Dashboard accordion */
.dash-accordion { border:1px solid #e9ecef; border-radius:12px; margin-bottom:10px; overflow:hidden; background:#fff; }
.dash-acc-head { display:flex; align-items:center; gap:8px; padding:12px 16px; cursor:pointer; background:#fff; border:none; width:100%; text-align:left; font-size:13px; font-weight:700; color:#111827; transition:background .12s; justify-content:space-between; }
.dash-acc-head:hover { background:#f9fafb; }
.dash-acc-head .dash-acc-icon { font-size:11px; color:#6b7280; transition:transform .2s; }
.dash-acc-head.open .dash-acc-icon { transform:rotate(180deg); }
.dash-acc-head-left { display:flex; align-items:center; gap:8px; }
.dash-sidebar-tabs { display:flex; gap:2px; padding:4px; background:#f3f4f6; border-radius:10px; margin-bottom:12px; }
.dash-sidebar-tab { display:inline-flex; align-items:center; padding:7px 10px; border:none; border-radius:6px; background:transparent; font-size:12px; font-weight:600; color:#6b7280; cursor:pointer; transition:all .15s; }
.dash-sidebar-tab:hover { background:#f3f4f6; }
.dash-sidebar-tab.active { background:#eff6ff; color:#0071e3; }
.dash-sidebar-panel { display:none; }
.dash-sidebar-panel.active { display:block; }
.dash-acc-badge { font-size:10px; background:#f3f4f6; color:#6b7280; padding:1px 7px; border-radius:8px; font-weight:600; }
/* Move-for-later menu */
.mlm-item { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; font-size:12px; font-weight:600; color:#1a1a1f; cursor:pointer; transition:background .1s; }
.mlm-item:hover { background:#f3f4f6; }
/* Meeting location accordion */
.tk-loc-toggle { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:8px; border:1px solid #fde68a; background:#fffbf0; font-size:11px; font-weight:600; color:#d97706; cursor:pointer; flex-shrink:0; transition:background .12s; }
.tk-loc-toggle:hover { background:#fef3c7; }
.tk-loc-body { flex-shrink:0; }

/* ── Team Day View ─────────────────────────────────── */
#team-day-grid { overflow: auto; max-height: calc(100vh - 250px); }
#team-day-grid .abs-task { cursor: pointer; }

/* ── Print styles for Team Schedule ─────────────────── */
@media print {
    body > *:not(#team-print-wrapper) { display: none !important; }
    #v-availability { display: block !important; page-break-inside: avoid; }
    .no-print { display: none !important; }
}

/* =========================================================================
   ACCESSIBILITY (WCAG 2.1 AA) — added post structural-split. Purely additive.
   ========================================================================= */

/* 2.4.7 Visible focus: a consistent keyboard focus ring even where component
   styles set `outline:none`. :focus-visible matches keyboard focus only, so
   mouse/touch clicks never show the ring — no visual change for pointer users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
    border-radius: 6px;
}

/* 2.5.5 Touch targets: guarantee the primary mobile controls meet 44x44px. */
.mobile-bottom-nav > button { min-height: 44px; }
.fab-mic { min-width: 44px; min-height: 44px; }

/* ===== Task-modal sidebar: critique fixes + desktop compacting ===== */
/* Keep the full schedule date visible (was truncating to "2026-04" in the
   narrow sidebar); shrink the time field and let the row wrap if space is tight. */
#e-date, #e-end-date, #e-due-date { min-width: 86px !important; }
#e-time-display, #e-end-time-display { width: 58px !important; }
.tk-sched-compact-row { flex-wrap: wrap; row-gap: 4px; }
/* Unify the "selected" language: the category pills' on-state was solid black
   (#111827) which shouted over everything — use a soft indigo tint like the other
   selected states (Self/To Do). */
.tk-pill-std.on, .tk-quick-grid .tk-pill-std.on {
    background: #eef2ff !important; color: #4338ca !important; border-color: #c7d2fe !important;
}
/* This used to shrink task-type/pill/status/priority controls independently
   on desktop ("mouse = precise") with six more one-off padding/font values
   layered on top of the base rules — the actual source of "every pill is a
   different size" once you also count the mobile-only overrides elsewhere.
   Removed: desktop now renders the exact same --tk-radius/--tk-chip-pad/
   --tk-chip-font system as mobile, which is what "one system" means. */

/* Flash-highlight a task's bar when opened from "Gantt view" in the task modal. */
.gantt-task-flash { outline: 2px solid #f59e0b !important; outline-offset: 2px; animation: ganttTaskFlash 0.9s ease-in-out 2; }
@keyframes ganttTaskFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.55); } 50% { box-shadow: 0 0 0 7px rgba(245,158,11,0); } }

/* Routine toggling now lives in the full-width Routine bar below Set Schedule;
   hide the old small category pill to avoid a duplicate "Routine" control. */
#tp-flag-routine { display: none !important; }

/* Status/Priority as floating overlay dropdowns (like the dashboard) — they float
   over the content below the pills instead of pushing the sidebar down. */
.tk-dt-drop.tk-layer-floating {
    position: fixed !important; z-index: 100000 !important;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(92vw, 440px); max-height: 82vh; overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,.28); border-radius: 14px; margin: 0 !important;
}
.tk-layer-scrim { position: fixed; inset: 0; background: rgba(15,23,42,.38); z-index: 99990; opacity: 0; pointer-events: none; transition: opacity .18s; }
.tk-layer-scrim.open { opacity: 1; pointer-events: auto; }
.tk-sp-overlay {
    position: absolute !important;
    top: calc(100% + 4px); left: 0; right: 0; z-index: 200;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: 8px; margin: 0 !important;
}
.tk-sp-wrap { position: relative; }

/* Keep the task title visible when the DETAILS sidebar is collapsed: show it as a
   header at the top of the right panel. */
.tk-collapsed-title { display: none; }
.tk-layout.tk-left-collapsed .tk-collapsed-title {
    display: block; padding: 10px 16px 8px; border-bottom: 1px solid #f0f0f5; flex-shrink: 0; overflow: hidden;
}
#tk-collapsed-title-text  { display: block; font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tk-collapsed-title-crumb { display: block; font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
#tk-collapsed-title-crumb:empty { display: none; }
#tk-collapsed-title-crumb a { color: inherit; text-decoration: none; }
#tk-collapsed-title-crumb a:hover { text-decoration: underline; }

/* Recording indicator (global bar + subtasks button) */
.tk-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #dc2626; flex-shrink: 0; animation: recPulse 1.2s ease-in-out infinite; }
@keyframes recPulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220,38,38,.5); } 50% { opacity: .5; box-shadow: 0 0 0 5px rgba(220,38,38,0); } }
#mtg-rec-btn.recording { background: #dc2626 !important; color: #fff !important; border-color: #dc2626 !important; }

/* Meeting Online Link / Location: open as a floating overlay over the meeting
   content (instead of expanding inline and pushing the agenda/notes down). */
#tk-mtg-acc-body-link, #tk-mtg-acc-body-location {
    position: absolute; top: calc(100% + 2px); left: 0; z-index: 200;
    width: min(320px, 88vw); border: 1px solid #e5e7eb; border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
#tk-mtg-acc-body-location { left: auto; right: 0; }

/* Sidebar section labels — group Status / Priority / Flags for clear hierarchy
   (matches the existing TASK TYPE / PROGRESS labels). */
.tk-sb-label { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1px; display: flex; align-items: center; gap: 5px; }
.tk-sb-label i { font-size: 9px; opacity: .6; }
/* Sidebar SECTION headers — the top tier of the details-panel hierarchy. Each
   groups a set of related controls under one clearly-titled divider so the panel
   reads as five labelled sections (Placement / Status / Schedule / People /
   Details) instead of one flat, unlabelled stream of controls. */
.tk-sec { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #7c828d; display: flex; align-items: center; justify-content: space-between; gap: 7px;
    margin: 10px 0 6px; padding-bottom: 5px; border-bottom: 1px solid #ececf0; }
.tk-sec:first-child { margin-top: 2px; }
.tk-sec i { font-size: 10px; color: #0071e3; opacity: .8; }
/* Left-side icon+label+optional-help cluster inside a .tk-sec that also
   carries a trailing badge (e.g. Task Type) — space-between then splits
   this cluster from the badge instead of spreading every child evenly. */
.tk-sec-main { display: flex; align-items: center; gap: 7px; }
/* Small "?" affordance next to a section/sub-label whose meaning isn't
   self-evident (Task Type's Task/Delegate/Monitor split, Workflow Status,
   Placement) — click/tap-toggled (not hover-only) so it works the same on
   mobile and desktop. */
.tk-help-btn {
    width: 14px; height: 14px; border-radius: 50%; border: 1px solid #d1d5db;
    background: #fff; color: #9ca3af; font-size: 9px; font-weight: 700;
    line-height: 1; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; text-transform: none; letter-spacing: 0; padding: 0;
}
.tk-help-btn:hover, .tk-help-btn:focus, .tk-help-btn.active { border-color: #0071e3; color: #0071e3; background: #eff6ff; }
/* One card per group (Placement / Task Type & Team / Status, Priority &
   Workflow / Progress / Schedule / People / Flags) — a white card floating
   on the sidebar's gray tray, instead of same-indentation rows separated
   only by a thin rule, which is what made the panel read as one long
   undifferentiated stream. The .tk-sec header is the card's first child;
   its own divider still separates header from content *within* the card,
   the card edge is what separates one group from the next. */
.tk-group { background:#fff; border:1px solid var(--tk-card-border); border-radius:var(--tk-card-radius); padding:10px 12px 12px; margin-bottom:8px; }
.tk-group:last-child { margin-bottom:0; }
.tk-group .tk-sec { margin-top:0; }
/* Divider between sidebar sections (Task Type / Status / Priority / Flags). */
.tk-sb-hr { border: none; border-top: 1px solid #ececed; margin: 1px 0; }
/* Status laid out as a 3×2 grid — compact the pills so "In Progress" fits in a
   third of the sidebar width. */
#status-track.tk-status-3x2 .tk-status { padding: 4px 4px; font-size: 10px; justify-content: center; }

/* ── Keyboard-shortcuts help overlay (toggled with "?") ─────────────────── */
#kbd-help-overlay {
    position: fixed; inset: 0; z-index: 10000005; display: none;
    align-items: center; justify-content: center;
    background: rgba(15, 17, 21, .45); backdrop-filter: blur(3px);
    padding: 20px;
}
#kbd-help-overlay.open { display: flex; animation: fadeIn .15s ease; }
#kbd-help-overlay .kbd-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.28); width: 620px; max-width: 100%;
    max-height: 86vh; overflow: hidden; display: flex; flex-direction: column;
}
#kbd-help-overlay .kbd-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #f0f0f5;
    font-size: 15px; font-weight: 700; color: var(--text);
}
#kbd-help-overlay .kbd-close {
    border: none; background: #f5f5f7; width: 28px; height: 28px; border-radius: 8px;
    cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1;
}
#kbd-help-overlay .kbd-close:hover { background: #e8e8ed; color: var(--text); }
#kbd-help-overlay .kbd-body {
    padding: 16px 18px; overflow-y: auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px;
}
#kbd-help-overlay .kbd-group-title {
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); margin-bottom: 8px;
}
#kbd-help-overlay .kbd-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 5px 0; font-size: 13px; color: var(--text);
}
#kbd-help-overlay .kbd-desc { color: #374151; }
#kbd-help-overlay .kbd-keys { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
#kbd-help-overlay .kbd-plus { color: var(--muted); font-size: 10px; margin: 0 1px; }
#kbd-help-overlay kbd {
    display: inline-block; min-width: 18px; text-align: center;
    padding: 2px 7px; font-size: 11px; font-weight: 600; font-family: var(--font);
    color: #1f2937; background: #f6f7f9; border: 1px solid #e0e2e7;
    border-bottom-width: 2px; border-radius: 6px; line-height: 1.5;
}
#kbd-help-overlay .kbd-foot {
    padding: 11px 18px; border-top: 1px solid #f0f0f5;
    font-size: 11px; color: var(--muted); text-align: center;
}
#kbd-help-overlay .kbd-foot kbd {
    font-size: 10px; padding: 1px 5px; background: #f6f7f9; border: 1px solid #e0e2e7;
    border-radius: 5px; font-weight: 600;
}
@media (max-width: 768px) {
    #kbd-help-overlay .kbd-body { grid-template-columns: 1fr; gap: 16px; }
    #kbd-help-overlay .kbd-card { width: 100%; }
}

/* ============================================================================
   TOUCH FOUNDATION — comfortable tap targets for iPad & phone (task #1).
   Keyed to coarse pointers (all touch devices, incl. iPad landscape >820px) OR
   narrow width (phones/small tablets, also matches the in-app preview which
   reports pointer:fine). Uses min-height/min-width + padding so nothing shrinks;
   deliberately avoids the ultra-dense schedule micro-inputs (.tk-input-xs).
   ============================================================================ */
@media (pointer: coarse), (max-width: 820px) {
    /* Tab strips — the most-tapped navigation in the app */
    .tk-tab, .tk-subtab, .comms-tab, .set-tab, .n-tab, .pj-tab, .atab-btn,
    .mtgtab-btn, .ptab-btn { min-height: 44px; }

    /* Buttons */
    .btn { min-height: 46px; }
    .tk-btn-sm, .btn-sm, .t-btn, .icon-btn, .nav-btn, .gantt-zoom-btn,
    .gantt-sort-btn, .gantt-col-toggle-btn { min-width: 40px; min-height: 40px; }

    /* Form controls — big enough to tap accurately (excludes .tk-input-xs) */
    .tk-sel, .tk-input-std:not(.tk-input-xs), .header-search,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="tel"], select, textarea { min-height: 44px; }
    input[type="checkbox"], input[type="radio"] { min-width: 22px; min-height: 22px; }

    /* Selectable pills / chips */
    .tk-status, .tk-pri, .tk-pill-std, .hold-filter-pill, .h-filter-pill,
    .rtn-freq-btn, .tt-opt { min-height: 40px; }

    /* Subtask + quick-add bars */
    .sub-add-bar input, #e-new-sub, #e-new-assignee-user, #e-vendor-inp { min-height: 44px; }

    /* Sidebar hierarchy rows + notification cards — easier to hit */
    .h-item { min-height: 40px; }
    .n-card { min-height: 56px; }

    /* A touch of breathing room between adjacent small controls */
    .ws-head-actions { gap: 6px; }
    .comms-tabs, .tk-tabs { gap: 5px; }
}

/* ── Location menu (dashboard map-marker: Share / Open in maps) ── */
.location-menu {
    position: fixed; z-index: 100050; width: 220px;
    background: var(--card-bg, #fff); border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px; box-shadow: 0 12px 36px rgba(15,23,42,.18);
    padding: 6px; font-size: 13px; animation: fadeIn .12s ease;
}
.location-menu .locm-head {
    display: flex; align-items: center; gap: 7px; padding: 6px 8px 8px;
    font-weight: 700; color: var(--text, #0f172a);
    border-bottom: 1px solid var(--border, #eef1f5); margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.location-menu .locm-head i { color: #f59e0b; flex-shrink: 0; }
.location-menu .locm-head span { overflow: hidden; text-overflow: ellipsis; }
.location-menu .locm-label {
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted, #94a3b8); padding: 6px 8px 2px;
}
.location-menu .locm-item {
    display: flex; align-items: center; gap: 9px; padding: 9px 8px;
    border-radius: 8px; cursor: pointer; color: var(--text, #1e293b);
}
.location-menu .locm-item:hover { background: var(--hover-bg, #f4f6f8); }
.location-menu .locm-item i { width: 16px; text-align: center; color: var(--accent, #0071e3); flex-shrink: 0; }
.location-menu .locm-item.locm-share i { color: #16a34a; }
.location-menu .locm-item span { flex: 1; }
.location-menu .locm-sub {
    flex: 0 0 auto !important; font-size: 10px; font-weight: 700;
    color: var(--muted, #94a3b8); text-transform: uppercase; letter-spacing: .04em;
}
.location-menu .locm-pref { background: rgba(0,113,227,.07); }
.location-menu .locm-pref .locm-sub { color: var(--accent, #0071e3); }
.location-menu .locm-divider { height: 1px; background: var(--border, #eef1f5); margin: 4px 4px; }

/* Project popups (Comms / Links) — bottom sheet on phones, centred dialog on
   wider screens, both over a dimming backdrop. */
.comms-backdrop {
    position: fixed; inset: 0; z-index: 100050;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15,23,42,.32); animation: fadeIn .12s ease;
}
.comms-menu {
    width: 360px; max-width: calc(100vw - 24px);
    max-height: min(80vh, 560px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--card-bg, #fff); border: 1px solid var(--border, #e5e7eb);
    border-radius: 16px; box-shadow: 0 18px 50px rgba(15,23,42,.28);
    padding: 6px; font-size: 13px; animation: commsPop .14s ease;
}
@keyframes commsPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 768px) {
    .comms-backdrop { align-items: flex-end; }
    .comms-menu {
        width: 100%; max-width: 100%; max-height: 82vh;
        border-radius: 20px 20px 0 0; border-bottom: none; padding: 8px 8px calc(10px + env(safe-area-inset-bottom));
        animation: commsSheetUp .22s cubic-bezier(.4,0,.2,1);
    }
}
@keyframes commsSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* A whole row that is itself the tap target (WhatsApp groups, project links) */
.comms-row-link { text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.comms-row-link:hover { background: #f9fafb; }

/* ── Read-only Member/Viewer ─────────────────────────────────────────────────
   Hide the create/edit/delete affordances a pure viewer can't use (the server
   already rejects the writes; this just keeps the UI honest). Toggled by
   body.readonly-user in applyReadOnlyMode(). */
body.readonly-user .h-add-task-btn,
body.readonly-user .fab-group,
body.readonly-user .plan-add-btn,
body.readonly-user #proj-edit-btn,
body.readonly-user #proj-save-btn,
body.readonly-user #proj-archive-btn,
body.readonly-user #proj-del-btn,
body.readonly-user .pj-dash-task-del,
body.readonly-user .dash-task-del,
body.readonly-user .mob-tc-done-btn,
body.readonly-user .mob-ftc-done-btn,
body.readonly-user .gantt-quickadd-row,
body.readonly-user .task-mh-del,
body.readonly-user .task-mh-save,
body.readonly-user .tk-mobile-save-btn,
body.readonly-user #btn-del-task,
body.readonly-user #proj-site-save-btn { display: none !important; }
/* A small always-visible hint that this is a look-only account. */
body.readonly-user .ro-badge { display: inline-flex; }
.ro-badge { display: none; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #eef2ff; color: #4338ca; font-size: 11px; font-weight: 800; border: 1px solid #c7d2fe; }
.ro-badge i { font-size: 10px; }

/* ── Workspace Activity board ─────────────────────────────────────────────── */
#modal-wsactivity .wsa-box { width: 640px; max-width: calc(100vw - 24px); max-height: 86vh; display: flex; flex-direction: column; background: var(--card-bg,#fff); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 64px rgba(15,23,42,.3); }
.wsa-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border,#eef1f5); }
.wsa-title { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; color: var(--text,#0f172a); min-width: 0; }
.wsa-title i { color: var(--accent,#0071e3); flex-shrink: 0; }
.wsa-head-actions { display: flex; gap: 4px; flex-shrink: 0; }
.wsa-icon { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border,#e5e7eb); background: #fff; color: var(--muted,#64748b); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wsa-icon:hover { background: #f4f6f8; }
.wsa-sel { font-size: 12px; padding: 6px 9px; border: 1px solid var(--border,#e5e7eb); border-radius: 8px; background: #fff; color: var(--text,#1e293b); max-width: 170px; }
.wsa-filters { display: flex; flex-wrap: wrap; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--border,#eef1f5); background: #fafbfc; }
.wsa-clear { font-size: 11px; font-weight: 700; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--border,#e5e7eb); background: #fff; color: var(--muted,#64748b); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.wsa-pills { display: inline-flex; gap: 5px; align-items: center; }
.wsa-pill { font-size: 11px; font-weight: 700; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border,#e5e7eb); background: #fff; color: var(--muted,#64748b); cursor: pointer; white-space: nowrap; }
.wsa-pill:hover { background: #f4f6f8; }
.wsa-pill.active { background: var(--accent,#0071e3); color: #fff; border-color: var(--accent,#0071e3); }
.wsa-list { flex: 1; overflow-y: auto; padding: 4px 8px 8px; min-height: 220px; }
.wsa-empty { text-align: center; color: #9ca3af; font-size: 13px; padding: 46px 16px; }
.wsa-day { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; padding: 12px 8px 5px; position: sticky; top: 0; background: var(--card-bg,#fff); z-index: 1; }
.wsa-row { display: flex; gap: 11px; padding: 9px 8px; border-radius: 10px; cursor: pointer; }
.wsa-row:hover { background: #f6f8fa; }
.wsa-ava { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.wsa-main { flex: 1; min-width: 0; }
.wsa-line { font-size: 13px; color: #1e293b; line-height: 1.45; }
.wsa-act { font-weight: 600; }
.wsa-act i { font-size: 10px; }
.wsa-task { font-weight: 700; color: #0f172a; }
.wsa-det { font-size: 11.5px; color: #6b7280; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsa-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; font-size: 10.5px; color: #9ca3af; }
.wsa-ctx { font-weight: 700; color: #64748b; }
.wsa-ctx i { font-size: 9px; margin-right: 2px; }
.wsa-foot { padding: 8px; border-top: 1px solid var(--border,#eef1f5); text-align: center; }
.wsa-more { font-size: 12px; font-weight: 700; padding: 8px 20px; border-radius: 9px; border: 1px solid var(--border,#e5e7eb); background: #fff; color: var(--accent,#0071e3); cursor: pointer; }
@media (max-width: 768px) {
    #modal-wsactivity .wsa-box { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
    .wsa-sel { max-width: none; flex: 1 1 44%; }
    .wsa-title { font-size: 15px; }
}
.comms-menu .locm-head {
    display: flex; align-items: center; gap: 7px; padding: 7px 8px 9px;
    font-weight: 700; color: var(--text, #0f172a);
    border-bottom: 1px solid var(--border, #eef1f5); margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; top: -6px;
    background: var(--card-bg, #fff);
}
.comms-menu .locm-head i { color: #0071e3; flex-shrink: 0; }
.comms-menu .locm-head span { overflow: hidden; text-overflow: ellipsis; }
.comms-menu-sec {
    display: flex; align-items: center; gap: 7px; padding: 9px 10px 4px;
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted, #94a3b8);
}
.comms-menu-sec i { font-size: 11px; color: #94a3b8; }
.comms-menu-count { margin-left: auto; background: #f1f5f9; color: #64748b; border-radius: 8px; padding: 0 6px; font-size: 10px; font-weight: 800; letter-spacing: 0; }
.comms-menu .comms-row { padding: 8px 10px; gap: 8px; }
.comms-menu .comms-act { width: 34px; height: 34px; font-size: 13px; border-radius: 9px; }
.comms-menu .comms-row-name { font-size: 13px; }

/* ── Tablet-portrait dashboard cards (769–1024px, e.g. iPad portrait) ──
   The desktop task table can't fit here, so renderDashTasks() falls back to the
   card layout at ≤1024px. Those card styles otherwise live only in the ≤768 phone
   block, so re-declare them for this range — and lay the cards out in a responsive
   grid to use the extra tablet width instead of one narrow column. */
@media (min-width: 769px) and (max-width: 1100px) {
  #dash-tasks-list .mob-task-cards-wrap { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; padding:8px 12px; }
  #dash-tasks-list .mob-full-task-card { background:#fff; border-radius:13px; border:1px solid #f0f0f5; box-shadow:0 1px 4px rgba(0,0,0,.05); padding:12px 13px; cursor:pointer; transition:box-shadow .12s; }
  #dash-tasks-list .mob-full-task-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.1); }
  #dash-tasks-list .mob-ftc-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  #dash-tasks-list .mob-ftc-title { font-size:13px; font-weight:600; color:#111827; line-height:1.35; flex:1; min-width:0; }
  #dash-tasks-list .mob-ftc-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  #dash-tasks-list .mob-ftc-group-hdr { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:12px 2px 4px; grid-column:1/-1; }
  #dash-tasks-list .mob-ftc-done-btn { width:24px; height:24px; border-radius:50%; border:2px solid #d1d5db; background:transparent; display:flex; align-items:center; justify-content:center; font-size:10px; cursor:pointer; color:#d1d5db; transition:all .15s; flex-shrink:0; }
  #dash-tasks-list .mob-ftc-done-btn.done { background:#10b981; border-color:#10b981; color:#fff; }
  #dash-tasks-list .mob-tc-done { opacity:.55; }
  #dash-tasks-list .mob-tc-done .mob-ftc-title { text-decoration:line-through; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TASK QUICK-VIEW  —  mobile/tablet bottom sheet
   ═══════════════════════════════════════════════════════════════════════ */
body.qv-lock { overflow:hidden; }
.qv-overlay { position:fixed; inset:0; z-index:6000; background:rgba(0,0,0,.42); display:none; align-items:flex-end; justify-content:center; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.qv-overlay.open { display:flex; }
.qv-sheet { background:#fff; width:100%; max-width:560px; max-height:92vh; border-radius:20px 20px 0 0; display:flex; flex-direction:column; transform:translateY(100%); transition:transform .22s cubic-bezier(.32,.72,0,1); box-shadow:0 -8px 40px rgba(0,0,0,.25); }
.qv-sheet.in { transform:translateY(0); }
.qv-grab { width:38px; height:4px; border-radius:3px; background:#d1d5db; margin:8px auto 4px; flex-shrink:0; }
.qv-head { display:flex; align-items:flex-start; gap:10px; padding:6px 16px 10px; border-bottom:1px solid #f0f0f5; flex-shrink:0; }
.qv-head-main { flex:1; min-width:0; }
.qv-title { font-size:18px; font-weight:800; color:#1a1a1f; line-height:1.25; }
.qv-sub { display:flex; align-items:center; gap:7px; margin-top:5px; flex-wrap:wrap; }
.qv-proj { font-size:11px; font-weight:700; color:#fff; padding:2px 9px; border-radius:7px; cursor:pointer; }
.qv-code { font-size:10px; color:#9ca3af; font-family:ui-monospace,monospace; }
.qv-x { width:34px; height:34px; border-radius:50%; border:none; background:#f3f4f6; color:#6b7280; font-size:16px; cursor:pointer; flex-shrink:0; }
.qv-x:hover { background:#e5e7eb; }
/* Light canvas so the content cards below read as distinct grouped surfaces. */
.qv-scroll { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 14px 6px; flex:1; background:#f5f6f8; }

/* Each logical group (Contacts, Updates, Subtasks, Photos & Files) is a card,
   giving the quick view a clear visual hierarchy instead of a flat stack. */
.qv-card { background:#fff; border:1px solid #edeff2; border-radius:15px; padding:14px; margin-bottom:11px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.qv-card-pills { padding:12px 13px; }

.qv-quick { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.qv-pill { display:inline-flex; align-items:center; gap:5px; border:none; border-radius:20px; padding:7px 13px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.qv-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.qv-done-pill { display:inline-flex; align-items:center; gap:6px; border:1.5px solid #22c55e; background:#fff; color:#16a34a; border-radius:20px; padding:6px 14px; font-size:12px; font-weight:800; cursor:pointer; font-family:inherit; margin-left:auto; }
.qv-done-pill.done { background:#22c55e; color:#fff; }

.qv-comm { display:flex; flex-wrap:wrap; gap:8px; }
.qv-comm-btn { display:inline-flex; flex-direction:column; align-items:center; gap:4px; min-width:66px; padding:10px 6px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; font-family:inherit; color:#374151; transition:background .12s; }
.qv-comm-btn i { font-size:18px; }
.qv-comm-btn span { font-size:10px; font-weight:700; }
.qv-comm-btn:hover { background:#f9fafb; }
.qv-comm-btn.wa { color:#16a34a; border-color:#bbf7d0; background:#f0fdf4; }
.qv-comm-btn.loc { color:#e11d48; border-color:#fecdd3; background:#fff1f2; }
.qv-comm-btn.mtg { color:#7c3aed; border-color:#ddd6fe; background:#f5f3ff; }
.qv-comm-empty { font-size:11px; color:#9ca3af; padding:2px 0; }

/* Section = card (see .qv-card). The top border/full-width divider look is gone. */
.qv-sec { background:#fff; border:1px solid #edeff2; border-radius:15px; padding:14px; margin-bottom:11px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.qv-sec-h { font-size:12px; font-weight:800; color:#1f2937; text-transform:uppercase; letter-spacing:.04em; display:flex; align-items:center; gap:9px; margin-bottom:12px; }
/* Section icon rendered as a soft neutral chip so headers scan consistently. */
.qv-sec-h > i:first-child { width:26px; height:26px; border-radius:8px; background:#f3f4f6; display:inline-flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.qv-count { font-size:10px; font-weight:800; color:#6b7280; background:#f3f4f6; border-radius:9px; padding:2px 8px; margin-left:auto; }
.qv-loading, .qv-empty-mini { font-size:12px; color:#c7c7cc; padding:6px 0; text-align:center; }
.qv-empty-mini { text-align:left; }

.qv-update-box { display:flex; gap:8px; align-items:flex-end; margin-bottom:10px; }
.qv-update-box textarea { flex:1; border:1px solid #e5e7eb; border-radius:11px; padding:9px 12px; font-size:14px; font-family:inherit; resize:none; outline:none; }
.qv-update-box textarea:focus { border-color:#93c5fd; box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.qv-post { width:42px; height:42px; border-radius:12px; border:none; background:#0071e3; color:#fff; font-size:15px; cursor:pointer; flex-shrink:0; }
.qv-comments { display:flex; flex-direction:column; gap:9px; }
.qv-comment { display:flex; gap:8px; }
.qv-cav { width:26px; height:26px; border-radius:50%; background:#e0e7ff; color:#4338ca; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.qv-cmeta { font-size:10px; color:#9ca3af; }
.qv-cmeta b { color:#374151; }
.qv-ctext { font-size:13px; color:#1a1a1f; margin-top:1px; white-space:pre-wrap; word-break:break-word; }

.qv-subrow { display:flex; align-items:center; gap:9px; padding:6px 0; }
.qv-subrow.done .qv-subtitle { text-decoration:line-through; color:#9ca3af; }
.qv-subcheck { width:24px; height:24px; border-radius:7px; border:1.5px solid #d1d5db; background:#fff; color:transparent; font-size:11px; cursor:pointer; flex-shrink:0; }
.qv-subcheck.on { background:#22c55e; border-color:#22c55e; color:#fff; }
.qv-subtitle { font-size:14px; color:#1a1a1f; flex:1; cursor:pointer; }
.qv-subadd { display:flex; gap:8px; margin-top:8px; }
.qv-subadd input { flex:1; border:1px solid #e5e7eb; border-radius:10px; padding:9px 12px; font-size:14px; font-family:inherit; outline:none; }
.qv-subadd input:focus { border-color:#93c5fd; }
.qv-subadd button { width:42px; border-radius:10px; border:none; background:#eef2ff; color:#4338ca; font-size:14px; cursor:pointer; }

.qv-upload-row { display:flex; gap:8px; margin-bottom:11px; }
.qv-up-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:11px 6px; border-radius:11px; border:1.5px dashed #cbd5e1; background:#f8fafc; color:#475569; font-size:12px; font-weight:700; cursor:pointer; }
.qv-up-btn:hover { border-color:#0071e3; color:#0071e3; }
.qv-up-btn i { font-size:14px; }
.qv-files { display:flex; flex-wrap:wrap; gap:9px; }
.qv-thumb { position:relative; width:84px; height:84px; border-radius:11px; overflow:hidden; border:1px solid #e5e7eb; flex-shrink:0; }
.qv-thumb img { width:100%; height:100%; object-fit:cover; cursor:pointer; display:block; }
.qv-thumb-mark, .qv-thumb-del { position:absolute; width:26px; height:26px; border-radius:50%; border:none; color:#fff; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.qv-thumb-mark { left:4px; bottom:4px; background:rgba(0,113,227,.92); }
.qv-thumb-del { right:4px; top:4px; background:rgba(0,0,0,.55); }
.qv-filechip { display:flex; align-items:center; gap:6px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px; max-width:100%; }
.qv-filechip a { display:flex; align-items:center; gap:7px; text-decoration:none; color:#374151; font-size:12px; font-weight:600; min-width:0; }
.qv-filechip a i { color:#6b7280; font-size:15px; flex-shrink:0; }
.qv-filechip a span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qv-filechip button { border:none; background:none; color:#ef4444; cursor:pointer; font-size:12px; padding:2px; }

.qv-foot { padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px)); border-top:1px solid #f0f0f5; flex-shrink:0; display:flex; gap:8px; }
.qv-details-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px; border-radius:13px; border:none; background:#1a1a1f; color:#fff; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; }
.qv-details-btn:hover { background:#000; }
.qv-pdf-btn { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:13px 16px; border-radius:13px; border:1px solid #e5e7eb; background:#fff; color:#0071e3; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; }
.qv-pdf-btn:hover { background:#f0f6ff; border-color:#bfdbfe; }

.qv-picker { position:fixed; z-index:6100; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.18); padding:5px; min-width:150px; }
.qv-picker-opt { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:8px; font-size:13px; font-weight:600; color:#1a1a1f; cursor:pointer; }
.qv-picker-opt:hover { background:#f3f4f6; }

/* On wider screens the sheet becomes a centered card */
@media (min-width:900px) {
  .qv-overlay { align-items:center; }
  .qv-sheet { border-radius:20px; max-height:88vh; }
}

/* ── Photo markup editor ─────────────────────────────────────────────── */
.qvm-overlay { position:fixed; inset:0; z-index:6500; background:#111; display:none; flex-direction:column; }
.qvm-overlay.open { display:flex; }
.qvm-bar { display:flex; align-items:center; gap:8px; padding:10px 14px; background:#1a1a1f; }
.qvm-top { justify-content:space-between; padding-top:calc(10px + env(safe-area-inset-top,0px)); }
.qvm-title { color:#fff; font-size:15px; font-weight:700; }
.qvm-btn { width:38px; height:38px; border-radius:50%; border:none; background:rgba(255,255,255,.12); color:#fff; font-size:16px; cursor:pointer; }
.qvm-save { display:inline-flex; align-items:center; gap:6px; border:none; background:#0071e3; color:#fff; border-radius:20px; padding:8px 18px; font-size:14px; font-weight:700; cursor:pointer; }
.qvm-stage { flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:8px; }
.qvm-stage canvas { max-width:100%; max-height:100%; touch-action:none; background:#000; border-radius:4px; cursor:crosshair; }
.qvm-tools { justify-content:center; flex-wrap:wrap; gap:6px; padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); }
.qvm-tool { width:40px; height:40px; border-radius:10px; border:none; background:rgba(255,255,255,.1); color:#fff; font-size:15px; cursor:pointer; }
.qvm-tool.active { background:#0071e3; }
.qvm-sep { width:1px; height:26px; background:rgba(255,255,255,.18); margin:0 3px; }
.qvm-colors { display:inline-flex; gap:5px; align-items:center; }
.qvm-color { width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
.qvm-color.active { border-color:#fff; box-shadow:0 0 0 2px #0071e3; }

/* ═══════════════════════════════════════════════════════════════════════
   PROJECT MODAL — compact header on phone & tablet (≤1024px)
   The desktop header + Finish-Day banner eat most of a small screen before
   any content shows, so tighten every part of it across mobile AND tablet.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .pj-header { padding: 9px 12px 7px !important; gap: 9px !important; align-items: flex-start !important; }
  .pj-avatar { width: 34px !important; height: 34px !important; border-radius: 9px !important; }
  .pj-avatar i { font-size: 15px !important; }
  .pj-header-info { gap: 2px !important; }
  /* Collapse the name/description inputs — a global 44px touch min-height was
     making each one eat a whole line of empty space. */
  .pj-name-inp { font-size: 16px !important; min-height: 0 !important; height: auto !important; padding: 0 !important; line-height: 1.25 !important; }
  .pj-desc-inp { font-size: 11px !important; min-height: 0 !important; height: auto !important; padding: 0 !important; line-height: 1.2 !important; }
  .pj-header-badges { margin-top: 2px !important; gap: 5px !important; }
  .pj-header-actions { gap: 3px !important; }
  .pj-header-actions .pj-btn-secondary { padding: 5px 9px !important; font-size: 12px !important; }
  .pj-header-actions .pj-btn-ghost, .pj-header-actions .pj-btn-close { min-width: 30px !important; min-height: 30px !important; }

  /* Finish-Day banner → one slim strip (dates side by side, not stacked) */
  .proj-launch-banner { padding: 6px 12px !important; gap: 10px !important; align-items: center !important; }
  .proj-countdown-block { flex-direction: row !important; width: auto !important; align-items: center !important; gap: 5px !important; }
  .proj-countdown-emoji { font-size: 13px !important; }
  .proj-countdown-num { font-size: 16px !important; }
  .proj-countdown-label { display: none !important; }
  .proj-launch-info { flex: 0 1 auto !important; min-width: 0 !important; }
  .proj-launch-name { font-size: 11px !important; }
  .proj-launch-sub { display: none !important; }
  .proj-launch-bar-wrap { display: none !important; }
  .proj-launch-dates { flex: 1 1 auto !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 5px 8px !important; justify-content: flex-end !important; align-items: center !important; }
  .proj-launch-date-row { gap: 4px !important; align-items: center !important; }
  .proj-launch-date-lbl { font-size: 9px !important; }
  .proj-launch-date-inp {
    font-size: 12px !important; padding: 5px 7px !important;
    min-height: 0 !important; height: auto !important; border-radius: 8px !important;
    border: 1px solid #e5e7eb !important; width: 116px !important; max-width: 38vw !important;
  }
  /* Phases wizard prompt → slim */
  #pj-wizard-prompt { padding: 8px 10px !important; gap: 8px !important; margin-bottom: 10px !important; }
  #pj-wizard-prompt > div > div:last-child { display: none !important; } /* hide the long sub-line */
  #pj-wizard-prompt .btn { padding: 6px 12px !important; font-size: 11px !important; }
  /* Progress + KPIs → denser */
  .pj-dash-wrap { padding: 10px 12px !important; }
  .pj-dash-progress-wrap { padding: 10px 14px !important; margin-bottom: 8px !important; }
  .pj-kpi-row { gap: 7px !important; margin-bottom: 8px !important; }
  .pj-kpi-card { padding: 7px 6px !important; border-radius: 10px !important; }
  .pj-kpi-num { font-size: 17px !important; }
}

/* ── Quick-view: people (team / vendors / client) call & WhatsApp ──────── */
.qv-people { display:flex; flex-direction:column; gap:12px; margin-top:12px; width:100%; }
.qv-people-grp { }
.qv-people-h { font-size:10px; font-weight:800; color:#9ca3af; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.qv-person { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid #f5f5f7; }
.qv-person:last-child { border-bottom:none; }
.qv-person-av { width:28px; height:28px; border-radius:50%; background:#e0e7ff; color:#4338ca; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.qv-person-name { flex:1; min-width:0; font-size:13px; font-weight:600; color:#1a1a1f; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qv-person-role { font-size:10px; color:#9ca3af; font-weight:500; }
.qv-pbtn { width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; text-decoration:none; flex-shrink:0; border:1px solid; }
.qv-pbtn.call { color:#0071e3; background:#eff6ff; border-color:#bfdbfe; }
.qv-pbtn.wa { color:#16a34a; background:#f0fdf4; border-color:#bbf7d0; }
.qv-pbtn.disabled { opacity:.32; pointer-events:none; }

/* ── Quick-view: header schedule-status strip ─────────────────────────── */
.qv-status { display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px; margin-top:8px; cursor:pointer; }
.qv-status:empty { display:none; }
.qv-st-item { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; color:#374151; white-space:nowrap; }
.qv-st-item i { font-size:10px; color:#9ca3af; }
.qv-st-muted { color:#9ca3af; font-weight:500; }
.qv-st-chip { font-size:10px; font-weight:800; padding:2px 9px; border-radius:10px; white-space:nowrap; }
.qv-st-chip.late { background:#fee2e2; color:#b91c1c; }
.qv-st-chip.ontime { background:#dcfce7; color:#15803d; }
.qv-st-chip.due { background:#fef3c7; color:#b45309; }
.qv-st-chip.ok { background:#eff6ff; color:#1d4ed8; }

/* ── Quick-view: play/pause/stop timer + richer subtask rows ──────────── */
.qv-timer { display:inline-flex; gap:3px; margin-left:auto; flex-shrink:0; }
.qv-tbtn { width:32px; height:32px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; color:#9ca3af; font-size:11px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all .12s; }
.qv-tbtn:hover { background:#f3f4f6; color:#374151; }
.qv-tbtn.tplay.on { background:#dcfce7; border-color:#86efac; color:#15803d; }
.qv-tbtn.tpause.on { background:#fef3c7; border-color:#fcd34d; color:#b45309; }
.qv-tbtn.tstop.on { background:#e0e7ff; border-color:#c7d2fe; color:#4338ca; }
.qv-sub-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.qv-sub-main .qv-subtitle { flex:none; }
.qv-sub-datebtn { align-self:flex-start; background:#f3f4f6; border:none; border-radius:7px; padding:2px 9px; font-size:10.5px; font-weight:600; color:#6b7280; cursor:pointer; display:inline-flex; align-items:center; gap:4px; font-family:inherit; }
.qv-sub-datebtn:hover { background:#e5e7eb; }
.qv-sub-datebtn i { font-size:9px; }
.qv-subrow .qv-timer { gap:2px; }
.qv-subrow .qv-tbtn { width:28px; height:28px; font-size:10px; border-radius:7px; }
/* Timer buttons inside task-modal subtask rows — a touch smaller */
.sub-item-header .qv-timer { margin-left: 4px; }
.sub-item-header .qv-tbtn { width: 26px; height: 26px; font-size: 9px; border-radius: 6px; }
/* Inline-editable subtask name in the quick-view */
.qv-subtitle-inp { border:none; background:transparent; font-size:14px; font-weight:500; color:#1a1a1f; padding:3px 5px; border-radius:6px; width:100%; box-sizing:border-box; outline:none; font-family:inherit; }
.qv-subtitle-inp:hover { background:#f7f7fa; }
.qv-subtitle-inp:focus { background:#f0f7ff; box-shadow:inset 0 0 0 1px #bfdbfe; }
.qv-subrow.done .qv-subtitle-inp { text-decoration:line-through; color:#9ca3af; }