/* Shared navigation and mobile-first task views, matching the DocPilot task reference. */
.app-header { flex-direction:row; justify-content:space-between; gap:8px; background:#03213d; border-color:rgba(129,173,206,.15); color:#fff; }
.brand { flex-shrink:1; min-width:0; }
.brand-logo { max-width:110px; width:auto; height:32px; object-fit:contain; }
.task-main-nav { flex-wrap:nowrap; gap:3px; margin:0; }
.task-main-nav .nav-icon-link,.task-main-nav .settings-trigger { display:inline-flex; align-items:center; justify-content:center; padding:0; width:40px; height:40px; min-width:40px; border:0; border-radius:9px; color:#fff; background:transparent; }
.task-main-nav .nav-icon-link[aria-current="page"] { background:#0756ba; color:#fff; box-shadow:0 0 18px #005aaf55; }
.task-page { width:min(100% - 28px,680px); margin:22px auto 40px; color:#eef5ff; --task-muted:#b4c8dc; font-size:14px; }
.task-page h1 { font-size:26px; line-height:1.25; }
.task-page h2 { font-size:15px; line-height:1.4; margin:0; }
.task-page p { color:var(--task-muted); }
.task-page a { color:inherit; text-decoration:none; }
.task-heading,.task-section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:16px; }
.task-small-button { display:inline-flex; align-items:center; gap:6px; border:1px solid #245878; border-radius:9px; padding:9px 10px; background:#06283f; color:#e4efff; font:inherit; font-size:11px; cursor:pointer; }
.task-small-button svg { width:16px; height:16px; }
.task-filters { display:flex; gap:6px; margin:16px 0; }
.task-filters a { flex:1; text-align:center; white-space:nowrap; padding:8px 4px; border:1px solid #204761; border-radius:9px; background:#0d3048; font-size:11px; }
.task-filters .is-active { color:#0754ee; background:#b3e3ff; border-color:#0074ff; box-shadow:0 0 0 1px #1678ff; }
.task-sort { margin:20px 0 10px; font-size:11px; color:var(--task-muted); }
.task-sort label { display:flex; justify-content:space-between; align-items:center; gap:5px; }
.task-sort select { background:#0d3048; border:1px solid #285170; color:#d3e8ff; border-radius:6px; max-width:145px; padding:6px; font:inherit; }
.task-text-button { background:transparent; color:#16a5ff; border:0; padding:7px 0; font:inherit; font-size:12px; cursor:pointer; }
.task-list { display:grid; gap:9px; margin:12px 0 22px; }
.task-card { position:relative; display:flex; gap:12px; padding:13px 12px; border:1px solid #204a64; border-left:2px solid var(--task-state); border-radius:12px; background:linear-gradient(135deg,#13364e,#0a2b43); }
.task-state-overdue { --task-state:#ff474c; } .task-state-due { --task-state:#ffbf17; } .task-state-undated,.task-state-future { --task-state:#819db6; } .task-state-completed { --task-state:#50d58f; }
.task-dot { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:20px; height:20px; margin-top:2px; border-radius:50%; background:var(--task-state,#819db6); color:#082b3b; font-weight:800; }
.task-card-body { min-width:0; flex:1; }
.task-card-main { display:block; line-height:1.45; padding-right:18px; }
.task-card-main::after { content:''; position:absolute; inset:0; z-index:0; }
.task-card-main strong { font-size:13px; }
.task-card-date { display:flex; gap:5px; align-items:center; font-size:12px; color:var(--task-state); margin:3px 0; }
.task-card-date svg { width:14px; height:14px; }
.task-source { position:relative; z-index:1; display:flex; align-items:center; gap:5px; color:var(--task-muted)!important; font-size:11px; margin-top:5px; overflow-wrap:anywhere; }
.task-source svg { flex-shrink:0; width:14px; height:14px; }
.task-chevron { position:absolute; right:12px; top:calc(50% - 12px); font-size:25px; color:#c8e0ef; }
.task-back { display:inline-block; color:var(--task-muted)!important; font-size:12px; margin:0 0 20px; }
.task-status-action { display:flex; justify-content:flex-end; margin-bottom:14px; }
.task-title { display:flex; gap:12px; align-items:flex-start; margin-bottom:8px; }
.task-title h1 { font-size:22px; }
.task-case-link { display:block; margin:10px 0; color:#c9e2ff!important; }
.task-linked-documents { display:grid; gap:5px; margin:14px 0; }
.task-linked-documents .document-tile { color:#e8f1ff; background:transparent; border:0; padding:8px 0; width:100%; }
.task-linked-documents .document-tile-date,.task-linked-documents .status-pill { display:none; }
.task-linked-documents small { color:var(--task-muted); }
.task-date-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin:15px 0; }
.task-date-tile { display:flex; align-items:center; justify-content:space-between; gap:7px; min-width:0; padding:14px 9px; color:#e5eeff; border:1px solid #204a64; border-radius:11px; background:#0b2f47; font:inherit; cursor:pointer; }
.task-date-tile>span { text-align:left; font-size:11px; }
.task-date-tile strong { display:block; font-size:15px; margin-top:4px; color:var(--task-state,#ffbf17); }
.task-panel { background:#0e3048; border:1px solid #1c425c; border-radius:11px; padding:13px; margin:12px 0; }
.task-panel .task-section-heading { margin:0 0 9px; }
.task-description { font-size:13px; white-space:normal; overflow-wrap:anywhere; }
.task-activity { display:flex; gap:10px; position:relative; padding:12px 10px; background:#15374e; border:1px solid #1b415b; border-radius:10px; margin-top:9px; }
.task-avatar { display:flex; align-items:center; justify-content:center; border-radius:50%; width:30px; height:30px; flex-shrink:0; background:#7996ad; font-size:11px; }
.task-activity>div { flex:1; min-width:0; }
.task-activity time,.task-activity small { color:var(--task-muted); font-size:10px; }
.task-activity p { color:#ddeaff; font-size:12px; margin-top:4px; overflow-wrap:anywhere; }
.task-system-event { background:transparent; border-color:#214258; font-size:11px; }
.task-system-event .task-avatar { width:22px; height:22px; opacity:.7; }
.task-context { align-self:flex-start; position:relative; }
.task-context summary { background:#063b62; color:#38afff; border-radius:10px; padding:1px 5px; cursor:pointer; list-style:none; }
.task-context[open] { z-index:3; }
.task-context button { display:block; min-width:130px; width:100%; padding:8px; background:#15374e; color:#fff; border:1px solid #2d526c; font:inherit; font-size:11px; }
.task-context[open] button { position:relative; margin-left:-110px; }
.task-meta div { display:flex; justify-content:space-between; gap:10px; font-size:11px; margin:5px 0; }
.task-meta dt { color:var(--task-muted); } .task-meta dd { margin:0; }
.task-status-pill { border-radius:12px; background:#ffe49b; color:#163045; padding:2px 10px; }
.task-modal { width:min(100% - 28px,400px); max-height:90dvh; overflow:auto; background:#05273f; color:#eef5ff; border:1px solid #255474; border-radius:16px; padding:17px; box-shadow:0 20px 80px #0008; }
.task-modal::backdrop { background:#00101dcc; }
.task-modal h2 { font-size:20px; margin:0; }
.task-modal-heading { display:flex; justify-content:space-between; align-items:center; gap:6px; margin-bottom:18px; }
.task-modal button { font:inherit; cursor:pointer; }
.task-modal-heading button { border:1px solid #285576; border-radius:50%; background:transparent; color:#ddecff; width:30px; height:30px; font-size:23px; }
.task-modal label { display:block; margin:12px 0; color:#bad1e5; font-size:12px; }
.task-modal input:not([type=checkbox]),.task-modal textarea,.task-modal select { display:block; width:100%; min-width:0; margin-top:7px; padding:10px; border:1px solid #34617f; border-radius:9px; font:inherit; font-size:14px; background:#04243b; color:#eff6ff; color-scheme:dark; }
.task-modal textarea { resize:vertical; }
.task-modal fieldset { border:1px solid #285576; border-radius:9px; }
.task-checkbox { display:flex!important; align-items:center; gap:8px; }
.task-checkbox input { accent-color:#0769ff; }
.task-modal-actions { display:flex; gap:10px; margin-top:20px; }
.task-modal-actions button { flex:1; border:1px solid #285576; border-radius:9px; padding:12px 7px; background:#032239; color:#fff; }
.task-modal-actions .task-primary { background:#075aff; border-color:#126cff; }
.task-date-tabs { display:flex; gap:3px; border:1px solid #285576; border-radius:10px; padding:3px; background:#0e3048; }
.task-date-tabs button { display:flex; align-items:center; justify-content:center; gap:5px; flex:1; background:transparent; color:#c8dded; border:0; border-radius:8px; padding:9px 3px; font-size:12px; }
.task-date-tabs .is-active { background:#b5e5ff; color:#0058ff; }
.task-calendar-heading { display:flex; justify-content:space-between; align-items:center; margin:19px 0; }
.task-calendar-heading button { color:#fff; background:transparent; border:0; font-size:26px; }
.task-calendar,.task-weekdays { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; text-align:center; }
.task-weekdays { color:#aac5dc; font-size:11px; margin-bottom:7px; }
.task-calendar button { aspect-ratio:1; border:0; border-radius:50%; color:#fff; background:transparent; font-size:12px; }
.task-calendar button.is-muted { color:#617d97; } .task-calendar button.is-selected { background:#075aff; color:#fff; }
.task-switch { justify-content:space-between; padding:13px 8px; border:1px solid #244d6b; border-radius:10px; }
.task-modal-error,.task-feedback { color:#ffb8b8!important; font-size:12px; }
.task-hint { font-size:10px; color:#a2b9cb; }
.task-empty { padding:20px 0; }
.remember-choice { display:flex; align-items:center; gap:8px; } .login-form .remember-choice input { width:18px; min-height:18px; }
@media (max-width:360px) { .app-header { padding:10px; } .brand-logo { max-width:95px; height:28px; } .task-main-nav { gap:0; } .task-main-nav .nav-icon-link,.task-main-nav .settings-trigger { width:38px; min-width:38px; } .task-heading h1 { font-size:23px; } .task-small-button { font-size:10px; padding:8px 6px; } .task-filters a { font-size:10px; } .task-date-tile strong { font-size:13px; } }
.settings-timezone { display:grid; gap:8px; margin:16px 0; }
.settings-timezone select { width:100%; min-width:0; border:1px solid #c5d4e1; border-radius:8px; padding:10px; font:inherit; }
.task-page button:focus-visible,.task-page a:focus-visible,.task-modal button:focus-visible { outline:2px solid #49baff; outline-offset:3px; }
.task-modal button:disabled,.task-page button:disabled { opacity:.55; cursor:wait; }
.task-filters a { min-width:0; white-space:normal; overflow-wrap:anywhere; }
.docpilot-wordmark { font-size:25px; font-weight:750; letter-spacing:-1px; color:#fff; white-space:nowrap; }
.docpilot-wordmark span { color:#00b990; }
.task-linked-documents .document-tile-title { color:#e0ecff; font-size:13px; font-weight:500; }
.task-audit { margin-top:16px; padding-top:12px; border-top:1px solid #285170; color:#b4c8dc; }
.task-audit summary { cursor:pointer; font-size:12px; }
.task-calendar button { aspect-ratio:auto; height:34px; }
.task-modal-heading { margin-bottom:14px; }
@media (max-width:360px) { .docpilot-wordmark { font-size:23px; } }
.task-relative { display:block; font-size:10px; color:var(--task-state); }
.task-relative:empty { display:none; }
/* Keep main's shared header, menu and document-card layout after integration. */
.app-header-inner { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.task-main-nav .nav-button { width:40px; height:40px; min-width:40px; padding:0; }
.task-linked-documents .doc-card-main { width:100%; }
@media(max-width:360px) { .app-header-inner .brand-logo { max-width:95px; } .task-main-nav .nav-button { width:36px; min-width:36px; } }