:root{
  --bg:#0f172a;--panel:#1e293b;--panel2:#273548;--line:#334155;--text:#e2e8f0;
  --muted:#94a3b8;--teal:#14b8a6;--green:#22c55e;--red:#ef4444;--amber:#f59e0b;--violet:#7c3aed;
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;font-family:Cairo,"Segoe UI",Tahoma,Arial,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh}
button,input,select,textarea{font:inherit}button,input,select,textarea{-webkit-tap-highlight-color:transparent}
.hidden{display:none!important}button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}

header{position:sticky;top:0;z-index:20;background:linear-gradient(90deg,#0d9488,#0f766e);padding:calc(12px + var(--safe-top)) max(20px,calc((100vw - 1420px)/2)) 12px;display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:0 4px 18px #0005}
header h1{font-size:19px;margin:0}.brand-line>span{display:block;font-size:12px;opacity:.9}.header-actions,.hero-row,.dialog-head,.dialog-actions,.copy-row,.card-actions,.row-actions{display:flex;align-items:center;gap:9px}.header-actions{direction:rtl;flex-wrap:wrap}.live-line{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:10px;color:#d5fffb}
.connection-badge{font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px;background:#ffffff22}.connection-badge.live{background:#16a34a;color:white}.connection-badge.polling{background:#2563eb;color:white}.connection-badge.connecting{background:#f59e0b;color:#3b2300}.connection-badge.offline{background:#b91c1c;color:white}

.app-layout{max-width:1420px;margin:auto;display:grid;grid-template-columns:210px minmax(0,1fr);gap:20px;padding:20px 22px calc(25px + var(--safe-bottom))}.main-nav{position:sticky;top:105px;height:max-content;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:9px;display:flex;flex-direction:column;gap:5px}.nav-btn{display:flex;align-items:center;gap:10px;width:100%;background:transparent;color:var(--text);border:1px solid transparent;border-radius:10px;padding:11px 12px;cursor:pointer;text-align:right}.nav-btn span{font-size:18px}.nav-btn b{font-size:13px}.nav-btn:hover{background:var(--panel2)}.nav-btn.active{background:#14b8a622;border-color:#14b8a655;color:#5eead4}
main{min-width:0}.hero-row{justify-content:space-between;margin:3px 0 18px}.hero-row h2{margin:0 0 3px;font-size:25px}.hero-row p{margin:0;color:var(--muted);font-size:13px}.view-actions{display:flex;gap:8px;flex-wrap:wrap}

.panel,.task-card,.login-card,.dialog-card,.company-card,.template-card{background:var(--panel);border:1px solid var(--line);border-radius:16px}.section-panel{padding:16px;margin-bottom:16px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.section-title h3{margin:0;font-size:17px}.section-title>span{background:var(--panel2);color:var(--muted);border-radius:20px;padding:3px 10px;font-size:11px}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(110px,1fr));gap:12px;margin-bottom:16px}.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center}.kpi strong{display:block;font-size:26px}.kpi span{font-size:11px;color:var(--muted)}
.toolbar{padding:13px;display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:16px}.field{display:flex;flex-direction:column;gap:5px;min-width:160px}.field label{font-size:12px;color:var(--muted)}input,select,textarea{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:10px 11px;outline:none;min-height:43px}input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px #14b8a622}textarea{resize:vertical}
.btn{border:0;border-radius:9px;padding:9px 13px;min-height:40px;font-weight:700;cursor:pointer;touch-action:manipulation}.btn.primary{background:var(--teal);color:#042f2a}.btn.ghost{background:#ffffff16;color:var(--text);border:1px solid #ffffff25}.btn.danger{background:var(--red);color:white}.btn.small{font-size:11px;padding:6px 9px;min-height:34px}.btn:hover{filter:brightness(1.08)}

.task-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}.task-card{padding:16px;transition:border-color .2s,transform .2s}.task-card:hover,.company-card:hover,.template-card:hover{border-color:#14b8a655}.task-top{display:flex;justify-content:space-between;gap:10px}.task-card h3,.template-card h3{font-size:16px;margin:0 0 4px}.meta{font-size:11px;color:var(--muted);line-height:1.8}.task-description{background:#0f172a66;padding:9px;border-radius:9px}.priority{padding:3px 8px;border-radius:20px;font-size:10px;font-weight:800;height:max-content;white-space:nowrap}.priority.normal{background:#14b8a633;color:#5eead4}.priority.high{background:#f59e0b33;color:#fcd34d}.priority.critical{background:#ef444433;color:#fca5a5}.priority.low{background:#64748b44;color:#cbd5e1}.progress{height:8px;background:var(--panel2);border-radius:8px;overflow:hidden;margin:12px 0}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--teal));transition:width .25s}.check{display:flex;align-items:center;gap:9px;background:var(--panel2);padding:9px 10px;border-radius:9px;margin:7px 0;font-size:12px;min-height:43px;cursor:pointer}.check input{width:19px;height:19px;min-height:auto;accent-color:var(--green);flex:0 0 auto}.check.done span{text-decoration:line-through;color:var(--muted)}.no-checks{margin-top:8px}.task-actions{display:flex;gap:8px;align-items:center;margin-top:12px}.task-actions select{flex:1;font-size:12px;padding:7px;min-height:39px}

.company-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;margin-bottom:18px}.company-card,.template-card{padding:16px}.company-head{display:flex;align-items:center;gap:12px}.company-head h3{margin:0 0 5px;font-size:16px}.company-icon{width:48px;height:48px;border-radius:13px;background:#14b8a622;display:grid;place-items:center;font-size:25px}.mini-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:14px}.mini-kpis>div{background:var(--panel2);border-radius:9px;padding:8px;text-align:center}.mini-kpis b,.mini-kpis span{display:block}.mini-kpis b{font-size:17px}.mini-kpis span{font-size:9px;color:var(--muted)}.card-actions{margin-top:14px;flex-wrap:wrap}
.status-pill{display:inline-block;font-size:10px;font-weight:800;padding:3px 9px;border-radius:20px}.status-pill.active{background:#22c55e22;color:#86efac}.status-pill.inactive{background:#ef444422;color:#fca5a5}

.list-row{display:flex;align-items:center;gap:11px;padding:11px 12px;background:var(--panel2);border:1px solid transparent;border-radius:11px;margin-bottom:8px}.list-row:hover{border-color:var(--line)}.row-main{flex:1;min-width:0}.row-main b{display:block;font-size:13px}.row-main small{display:block;color:var(--muted);font-size:10px;line-height:1.7;overflow-wrap:anywhere}.avatar{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--teal);color:#042f2a;display:grid;place-items:center;font-weight:800}.avatar.square{border-radius:10px;font-size:19px}.avatar.large{width:64px;height:64px;font-size:25px;margin:auto}.muted-row{opacity:.62}.row-actions{flex-wrap:wrap;justify-content:flex-start}

.template-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}.template-card p{font-size:12px;color:var(--muted);line-height:1.8}.template-checks{display:flex;flex-direction:column;gap:5px;margin:10px 0}.template-checks span{background:var(--panel2);border-radius:8px;padding:6px 8px;font-size:11px}.template-checks small{color:var(--muted);font-size:10px}
.audit-row{display:flex;gap:12px;padding:12px;border-bottom:1px solid var(--line)}.audit-row:last-child{border-bottom:0}.audit-dot{width:10px;height:10px;border-radius:50%;background:var(--teal);margin-top:7px;flex:0 0 10px}.audit-row code{display:block;margin-top:7px;background:var(--bg);border-radius:7px;padding:7px;font-size:9px;color:#cbd5e1;white-space:pre-wrap;overflow-wrap:anywhere;direction:ltr;text-align:left}
.account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}.account-card{padding:20px;text-align:center}.account-card h3{margin:10px 0 4px}.account-card p{color:var(--muted);font-size:12px;line-height:1.8}.account-meta{margin-top:13px;color:var(--muted);font-size:11px}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:42px;background:var(--panel);border:1px dashed var(--line);border-radius:16px}

.login-shell{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:calc(20px + var(--safe-top)) 20px calc(20px + var(--safe-bottom));background:radial-gradient(circle at top,#164e63,#0f172a 48%)}.login-card{width:min(430px,100%);padding:28px;display:flex;flex-direction:column;gap:9px;box-shadow:0 25px 60px #0008}.login-card .brand{font-size:38px;text-align:center}.login-card h1{text-align:center;margin:0}.login-card>p{text-align:center;color:var(--muted);font-size:13px;margin:0 0 4px}.login-card label{font-size:12px;color:var(--muted)}.login-card .btn{margin-top:8px}.demo-note{margin-top:8px;background:var(--panel2);padding:10px;border-radius:9px;font-size:11px;color:var(--muted);line-height:1.8;direction:ltr;text-align:left}.startup-help{font-size:11px;color:#fcd34d;text-align:center}.server-status{padding:8px 10px;border-radius:9px;font-size:11px;text-align:center;font-weight:700}.server-status.checking{background:#f59e0b22;color:#fcd34d}.server-status.online{background:#22c55e22;color:#86efac}.server-status.offline{background:#ef444422;color:#fca5a5}

dialog{border:0;padding:0;background:transparent;width:min(820px,95vw);max-height:92dvh}dialog::backdrop{background:#020617cc}.dialog-card{padding:18px;max-height:90dvh;overflow:auto}.dialog-head{justify-content:space-between;position:sticky;top:-18px;background:var(--panel);padding:18px 0 8px;z-index:2}.dialog-head h3{margin:0}.icon-btn{background:transparent;color:var(--text);border:0;cursor:pointer;font-size:20px;min-width:42px;min-height:42px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin:16px 0}.field.full{grid-column:1/-1}.dialog-actions{justify-content:flex-start}.phone-card{max-width:620px}.phone-instruction,.phone-note,.phone-steps{font-size:13px;line-height:1.8;color:var(--muted)}.copy-row input{flex:1;direction:ltr;text-align:left}.phone-note{padding:9px 10px;border-radius:9px;margin-top:10px}.phone-note.warning{background:#f59e0b22;color:#fcd34d}.phone-note.success{background:#22c55e22;color:#86efac}.phone-steps{padding-inline-start:22px}.phone-share-grid{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:16px;align-items:center}.phone-qr-wrap{background:white;border-radius:14px;padding:10px;text-align:center;color:#334155}.phone-qr-wrap img{display:block;width:150px;height:150px;max-width:100%;margin:auto}.phone-qr-wrap small{display:block;margin-top:5px;font-size:10px}
.toast{position:fixed;bottom:calc(25px + var(--safe-bottom));left:50%;transform:translateX(-50%) translateY(30px);opacity:0;z-index:100;background:var(--green);color:#052e16;padding:10px 16px;border-radius:10px;font-weight:700;transition:.25s;pointer-events:none;max-width:min(92vw,620px);text-align:center;box-shadow:0 12px 30px #0008}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.offline-banner{position:sticky;top:0;z-index:30;background:#991b1b;color:#fee2e2;padding:7px 15px;text-align:center;font-size:12px;font-weight:700}.offline-mode [data-write="true"]{pointer-events:none;opacity:.5}

@media(max-width:1050px){.app-layout{grid-template-columns:170px minmax(0,1fr)}.kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){
  header{align-items:flex-start}.app-layout{display:block;padding:12px 12px calc(20px + var(--safe-bottom))}.main-nav{position:sticky;top:91px;z-index:12;display:flex;flex-direction:row;overflow-x:auto;margin-bottom:14px;border-radius:12px;scrollbar-width:none}.main-nav::-webkit-scrollbar{display:none}.nav-btn{width:auto;min-width:max-content;padding:8px 10px}.nav-btn span{font-size:15px}.nav-btn b{font-size:10px}.task-grid{grid-template-columns:1fr}.hero-row{align-items:stretch;flex-direction:column}.view-actions .btn{width:100%}
}
@media(max-width:600px){
  header{padding:calc(10px + var(--safe-top)) 10px 10px;flex-direction:column}.brand-line{width:100%}header h1{font-size:16px}.header-actions{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.header-actions .btn{font-size:10px;padding:6px 4px;min-height:36px}.main-nav{top:123px}.hero-row h2{font-size:21px}.kpis{grid-template-columns:repeat(2,1fr);gap:8px}.kpi{padding:11px}.kpi strong{font-size:22px}.toolbar{display:grid;grid-template-columns:1fr 1fr;align-items:end}.toolbar .field{min-width:0}.toolbar .btn{width:100%}.task-card,.company-card,.template-card{padding:13px}.task-actions{align-items:stretch;flex-direction:column}.task-actions select,.task-actions .btn{width:100%}.company-grid,.template-grid,.account-grid{grid-template-columns:1fr}.mini-kpis{grid-template-columns:repeat(2,1fr)}.list-row{align-items:flex-start;flex-wrap:wrap}.row-main{min-width:180px}.row-actions{width:100%;justify-content:flex-start;padding-inline-start:49px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.copy-row{align-items:stretch;flex-direction:column}.copy-row .btn{width:100%}.phone-share-grid{grid-template-columns:1fr}.phone-qr-wrap{width:170px;margin:auto}.login-card{padding:22px 18px}.dialog-card{padding:14px}.dialog-head{top:-14px;padding-top:14px}.live-line{justify-content:space-between}
}
@media(max-width:380px){.header-actions{grid-template-columns:repeat(2,1fr)}.toolbar{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}.main-nav{top:165px}}
.compact-dialog{max-width:560px;margin:auto}.warning-box,.success-box{padding:12px;border-radius:10px;line-height:1.8;font-size:12px;margin:10px 0}.warning-box{background:#f59e0b22;color:#fcd34d;border:1px solid #f59e0b55}.success-box{background:#22c55e22;color:#86efac;border:1px solid #22c55e55}.mfa-setup{display:grid;place-items:center;gap:10px;margin:14px}.mfa-setup img{width:210px;max-width:80%;background:white;padding:8px;border-radius:12px}.mfa-setup code{background:var(--bg);padding:8px;border-radius:8px;overflow-wrap:anywhere}.backup-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0}.backup-codes code{background:var(--bg);padding:10px;border-radius:8px;text-align:center;font-size:16px;letter-spacing:2px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.section-title h3{margin:0}.row-actions{display:flex;gap:6px}
@media(max-width:600px){.backup-codes{grid-template-columns:1fr}.mfa-setup img{width:180px}.section-title{align-items:stretch;flex-direction:column}.section-title .btn{width:100%}}

.telegram-card code{background:var(--bg);padding:2px 5px;border-radius:5px;font-size:10px}.telegram-prefs{display:grid;grid-template-columns:1fr 1fr;gap:7px;text-align:right;margin:14px 0}.telegram-prefs label{display:flex;align-items:center;gap:7px;background:var(--panel2);padding:8px;border-radius:8px;font-size:11px}.telegram-prefs input{width:18px;height:18px;min-height:auto;accent-color:var(--teal)}.telegram-link-box{display:grid;place-items:center;gap:12px;margin:12px 0}.telegram-link-box img{width:220px;max-width:80%;background:white;padding:10px;border-radius:14px}.telegram-link-box .btn{min-width:220px;text-align:center;text-decoration:none}@media(max-width:600px){.telegram-prefs{grid-template-columns:1fr}.telegram-link-box img{width:180px}}

/* v1.5 advanced collaboration */
.view-switcher{display:flex;gap:6px;align-items:end;flex-wrap:wrap;margin-inline-end:auto}
.kanban-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,330px);gap:12px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x proximity}
.kanban-column{background:#111c31;border:1px solid var(--line);border-radius:14px;min-height:420px;padding:10px;scroll-snap-align:start;transition:.18s}
.kanban-column.drag-over{border-color:var(--teal);background:#123532}.kanban-head{display:flex;align-items:center;justify-content:space-between;padding:5px 4px 10px;position:sticky;top:0;background:#111c31;z-index:1}.kanban-head b{font-size:13px}.kanban-head span{background:var(--panel2);color:var(--muted);padding:2px 8px;border-radius:15px;font-size:10px}.kanban-cards{display:flex;flex-direction:column;gap:9px}.kanban-cards .task-card{padding:12px}.kanban-empty{border:1px dashed var(--line);border-radius:10px;padding:25px 10px;text-align:center;color:var(--muted);font-size:11px}
.collaborative-card{cursor:grab}.collaborative-card:active{cursor:grabbing}.assignee-chips{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}.assignee-chips span{background:#334155;color:#dbeafe;border-radius:20px;padding:3px 8px;font-size:10px}.dependency-badge{display:inline-block;background:#7c3aed33;color:#c4b5fd;border:1px solid #7c3aed66;border-radius:20px;padding:3px 8px;font-size:10px;margin:4px 0}.card-stats{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:9px;margin-top:7px}
.task-list-view{display:flex;flex-direction:column;gap:7px}.task-list-row{display:grid;grid-template-columns:14px minmax(230px,1fr) auto auto minmax(130px,auto);align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:10px 12px;cursor:pointer}.task-list-row:hover{border-color:var(--teal)}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--muted)}.status-dot.in_progress{background:var(--teal)}.status-dot.blocked{background:var(--red)}.status-dot.completed,.status-dot.verified{background:var(--green)}.status-dot.waiting_approval{background:var(--amber)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:13px;background:var(--panel)}.task-table{width:100%;border-collapse:collapse;min-width:900px}.task-table th,.task-table td{padding:10px;border-bottom:1px solid var(--line);text-align:right;font-size:11px}.task-table th{position:sticky;top:0;background:var(--panel2);z-index:1;color:var(--muted)}.task-table tr{cursor:pointer}.task-table tbody tr:hover{background:#ffffff08}.task-table td:first-child b,.task-table td:first-child small{display:block}.task-table td:first-child small{color:var(--muted);font-size:9px;margin-top:3px}
.assignee-picker{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:7px;background:var(--bg)}.assignee-option,.assignment-edit-row{display:grid;grid-template-columns:minmax(210px,1fr) 150px auto;gap:8px;align-items:center;background:var(--panel2);border-radius:9px;padding:8px;margin-bottom:6px}.assignee-option label,.assignment-edit-row>label:first-child{display:flex;align-items:center;gap:8px}.assignee-option input,.assignment-edit-row input{width:18px;height:18px;min-height:auto;accent-color:var(--teal)}.assignee-option b,.assignee-option small,.assignment-edit-row b,.assignment-edit-row small{display:block}.assignee-option small,.assignment-edit-row small{color:var(--muted);font-size:9px}
.wide-dialog{width:min(1120px,97vw)}.task-detail-card{max-height:94dvh}.detail-summary{display:grid;grid-template-columns:1fr minmax(260px,2fr) 180px;gap:12px;align-items:end;background:var(--panel2);border-radius:12px;padding:12px;margin-bottom:13px}.detail-section{background:#121d30;border:1px solid var(--line);border-radius:13px;padding:14px;margin-bottom:12px}.detail-section h3{font-size:15px;margin:0 0 10px}.detail-section>p{color:#cbd5e1;font-size:12px;line-height:1.8;white-space:pre-wrap}.detail-assignment-grid{max-height:320px;overflow:auto}.primary-radio{font-size:10px;white-space:nowrap}.pending-actions{display:flex;gap:7px;flex-wrap:wrap}.dependency-add{display:grid;grid-template-columns:2fr 1fr 130px auto;gap:7px;margin-top:10px}.dependency-row,.attachment-row{display:flex;align-items:center;gap:9px;background:var(--panel2);border-radius:9px;padding:9px;margin-bottom:6px}.dependency-row>div{flex:1}.dependency-row b,.dependency-row small{display:block}.dependency-row small{color:var(--muted);font-size:9px}.comments-thread{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}.comment{background:var(--panel2);border-radius:10px;padding:10px;border-inline-start:3px solid var(--teal)}.comment.reply{margin-inline-start:28px;border-inline-start-color:var(--violet)}.comment-head{display:flex;justify-content:space-between;gap:8px;font-size:10px}.comment-head span{color:var(--muted)}.comment p{font-size:12px;white-space:pre-wrap;line-height:1.7;margin:6px 0}.link-btn{background:transparent;border:0;color:#5eead4;cursor:pointer;font-size:10px}.comment-controls{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;margin-top:7px}.comment-controls select[multiple]{min-height:72px}.attachment-form{display:grid;grid-template-columns:minmax(240px,1fr) 160px auto;gap:7px;margin-top:10px}.voice-controls{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
@media(max-width:780px){.task-list-row{grid-template-columns:12px minmax(180px,1fr) auto}.task-list-row>span:nth-last-child(-n+2){display:none}.detail-summary{grid-template-columns:1fr}.dependency-add,.comment-controls,.attachment-form{grid-template-columns:1fr}.assignment-edit-row,.assignee-option{grid-template-columns:1fr}.assignment-edit-row select,.assignee-option select{width:100%}.wide-dialog{width:98vw}.kanban-board{grid-auto-columns:minmax(280px,88vw)}}

/* v1.6 cross-company collaboration directory */
.directory-toolbar{display:grid;grid-template-columns:minmax(220px,2fr) repeat(3,minmax(150px,1fr)) auto;gap:10px;align-items:end}
.directory-result-count{grid-column:1/-1;color:var(--muted);font-size:11px}
.directory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:12px}
.directory-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;transition:.16s;min-width:0}
.directory-card:hover,.directory-card.selected{border-color:var(--teal);transform:translateY(-1px)}
.directory-card.selected{box-shadow:0 0 0 2px #14b8a622}
.directory-card-head{display:flex;align-items:center;gap:10px}.directory-card-head .row-main{flex:1;min-width:0}.directory-card-head h3{font-size:14px;margin:0}.directory-card-head small{color:var(--muted);font-size:10px}
.directory-select{display:flex;align-items:center;gap:7px}.directory-select input{width:18px;height:18px;min-height:auto;accent-color:var(--teal)}
.directory-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#042f2a;font-weight:800}
.directory-badge{font-size:9px;padding:3px 7px;border-radius:20px;white-space:nowrap}.directory-badge.local{background:#22c55e22;color:#86efac}.directory-badge.external{background:#7c3aed2b;color:#c4b5fd}
.directory-scope,.directory-contact{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.directory-scope span,.directory-contact span{background:var(--panel2);border-radius:8px;padding:5px 7px;font-size:10px;overflow-wrap:anywhere}.directory-contact span{color:var(--muted)}
.directory-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}.directory-actions a{text-decoration:none}
.collaboration-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0}.collaboration-summary .panel{margin:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}.collaboration-summary h3{font-size:12px;margin:0}.collaboration-summary strong{font-size:25px;color:var(--teal)}.collaboration-summary .link-btn{grid-column:1/-1;text-align:right}
.directory-picker-tools,.detail-directory-tools{display:grid;grid-template-columns:minmax(200px,2fr) repeat(3,minmax(130px,1fr));gap:7px;margin-bottom:8px}.detail-directory-tools{grid-template-columns:minmax(220px,2fr) minmax(170px,1fr)}
.assignee-option.selected{outline:1px solid var(--teal);background:color-mix(in srgb,var(--teal) 9%,var(--panel))}
.assignment-edit-row.directory-hidden{display:none}
@media(max-width:900px){.directory-toolbar{grid-template-columns:1fr 1fr}.directory-toolbar .field:first-child{grid-column:1/-1}.directory-picker-tools{grid-template-columns:1fr 1fr}.collaboration-summary{grid-template-columns:1fr}}
@media(max-width:600px){.directory-toolbar,.directory-picker-tools,.detail-directory-tools{grid-template-columns:1fr}.directory-toolbar .field:first-child{grid-column:auto}.directory-actions .btn,.directory-actions a{flex:1;text-align:center}.directory-card{padding:12px}}


/* Stage 1.5 Phase 3: planning, workload, saved layouts and approvals */
.saved-view-controls,.planning-controls,.bulk-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.saved-view-controls select,.planning-controls select,.bulk-bar select,.bulk-bar input{min-width:135px}
.planning-controls{justify-content:center;margin-bottom:14px}
.planning-controls b{margin-inline:8px}
.inline-field{display:flex;align-items:center;gap:6px}
.bulk-bar{position:sticky;top:78px;z-index:12;border-color:var(--teal);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.bulk-bar b{margin-inline-end:auto}
.calendar-month,.calendar-week,.calendar-day-view,.timeline-wrap{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:var(--panel2);border-bottom:1px solid var(--line)}
.calendar-weekdays b{padding:10px;text-align:center;font-size:12px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.calendar-cell{min-height:125px;padding:7px;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
.calendar-cell.outside{opacity:.42}.calendar-cell.today{box-shadow:inset 0 0 0 2px var(--amber)}
.calendar-cell header{font-weight:800;margin-bottom:5px}
.calendar-task{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:1px;background:var(--panel2);color:var(--text);border:0;border-inline-start:3px solid var(--teal);border-radius:7px;padding:5px 6px;margin-bottom:4px;font:inherit;font-size:11px;cursor:pointer;text-align:start}
.calendar-task small{color:var(--muted);font-size:9px}.priority-border-critical{border-inline-start-color:var(--red)}.priority-border-high{border-inline-start-color:var(--amber)}.priority-border-low{border-inline-start-color:var(--muted)}
.calendar-week{display:grid;grid-template-columns:repeat(7,minmax(160px,1fr));overflow:auto}
.calendar-week-day{min-height:420px;padding:8px;border-inline-end:1px solid var(--line)}
.calendar-week-day header{display:flex;justify-content:space-between;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.calendar-day-view{padding:15px}.calendar-day-view h3{margin-bottom:12px}
.day-task-row{display:grid;grid-template-columns:80px minmax(220px,1fr) auto auto;gap:10px;align-items:center;padding:12px;border-bottom:1px solid var(--line);cursor:pointer}
.day-time{font-weight:800}
.timeline-wrap{overflow:auto;min-width:760px}
.timeline-header,.timeline-row{display:grid;grid-template-columns:240px minmax(600px,1fr)}
.timeline-header{position:sticky;top:0;background:var(--panel2);z-index:2}
.timeline-task-label{padding:8px 10px;border-inline-end:1px solid var(--line);text-align:start;color:var(--text)}
.timeline-task-label small{display:block;color:var(--muted)}
.timeline-scale{display:grid}.timeline-scale span{padding:6px 2px;text-align:center;font-size:10px;border-inline-end:1px solid var(--line)}.timeline-scale span small{display:block;color:var(--muted)}
.timeline-scale .week-mark{background:rgba(20,184,166,.12)}
.timeline-row{border-top:1px solid var(--line);min-height:50px}
.timeline-track{position:relative;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(3.333% - 1px),rgba(148,163,184,.12) calc(3.333% - 1px),rgba(148,163,184,.12) 3.333%)}
.timeline-bar{position:absolute;top:12px;height:27px;border:0;border-radius:7px;background:var(--teal);color:#042f2a;font-weight:800;cursor:pointer;min-width:12px;overflow:hidden}
.timeline-bar.blocked{background:var(--red);color:white}.timeline-bar.waiting_approval{background:var(--amber)}.timeline-bar.verified,.timeline-bar.completed{background:var(--green)}
.timeline-baseline{position:absolute;top:7px;height:3px;background:rgba(148,163,184,.55);border-radius:4px}
.workload-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.workload-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}.workload-card.over{border-color:var(--red)}.workload-card.near{border-color:var(--amber)}.workload-card.ok{border-color:var(--green)}
.workload-head{display:flex;justify-content:space-between;gap:10px}.workload-head small{display:block;color:var(--muted)}
.workload-head strong{font-size:22px}.capacity-bar{height:10px;background:var(--panel2);border-radius:20px;overflow:hidden;margin:12px 0}.capacity-bar i{display:block;height:100%;background:var(--teal)}
.workload-card.over .capacity-bar i{background:var(--red)}.workload-card.near .capacity-bar i{background:var(--amber)}
.workload-stats{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.approval-steps{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.approval-step{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px}.approval-step.active{border-color:var(--amber)}.approval-step.approved{border-color:var(--green)}.approval-step.rejected{border-color:var(--red)}
.approval-order{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--bg);font-weight:800}
.approval-config{margin-top:10px}.approval-config summary{cursor:pointer;font-weight:700}
.approval-person-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:7px;margin:10px 0}
.approval-person{display:grid;grid-template-columns:auto minmax(0,1fr) 60px;gap:8px;align-items:center;background:var(--panel2);padding:8px;border-radius:9px}
.approval-person span small{display:block;color:var(--muted)}
.approval-person input[type=number]{width:58px}
.task-list-row>input,.task-table td>input,.task-table th>input{width:18px;height:18px;accent-color:var(--teal)}

@media(max-width:800px){
  .calendar-month{overflow:auto}.calendar-weekdays,.calendar-grid{min-width:760px}
  .calendar-week{grid-template-columns:repeat(7,200px)}
  .day-task-row{grid-template-columns:56px 1fr}.day-task-row>span{display:none}
  .timeline-header,.timeline-row{grid-template-columns:170px minmax(650px,1fr)}
  .bulk-bar{top:62px}
}
.phone-url-picker{margin-bottom:8px}.phone-url-picker select{width:100%;direction:ltr;text-align:left}.btn.small{font-size:11px;padding:6px 9px;margin-top:8px}

/* v1.8 notifications, mobile card assignment, custom dashboards and themes */
:root{--teal-dark:#0f766e;--header-text:#fff;--shadow:rgba(0,0,0,.30)}
html[data-theme="light"]{
  --bg:#f1f5f9;--panel:#ffffff;--panel2:#e8eef5;--line:#cbd5e1;--text:#172033;--muted:#64748b;
  --green:#16a34a;--red:#dc2626;--amber:#d97706;--violet:#7c3aed;--header-text:#fff;--shadow:rgba(15,23,42,.16)
}
html[data-theme="light"] .task-description,html[data-theme="light"] .detail-section,html[data-theme="light"] .audit-row code{background:#f8fafc;color:var(--text)}
html[data-theme="light"] .btn.ghost{background:#ffffffcc;color:var(--text);border-color:var(--line)}
html[data-theme="light"] .login-shell{background:radial-gradient(circle at top,#ccfbf1,#e2e8f0 58%)}
header{background:linear-gradient(90deg,var(--teal),var(--teal-dark));color:var(--header-text)}
.nav-btn.active{background:color-mix(in srgb,var(--teal) 18%,transparent);border-color:color-mix(in srgb,var(--teal) 40%,transparent);color:var(--teal)}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 15%,transparent)}
body[data-density="compact"] .task-card{padding:11px}
body[data-density="compact"] .list-row,body[data-density="compact"] .nav-btn{padding-top:7px;padding-bottom:7px}
body[data-density="compact"] .section-panel{padding:11px}

.notification-button{position:relative}.notification-badge{position:absolute;top:-7px;inset-inline-start:-7px;display:grid;place-items:center;min-width:21px;height:21px;padding:0 5px;background:var(--red);color:white;border:2px solid var(--teal-dark);border-radius:20px;font-size:10px;font-weight:800}
.notification-summary{padding:17px;margin-bottom:13px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:5px 13px}.notification-summary strong{grid-row:1/3;font-size:34px;color:var(--teal)}.notification-summary p{grid-column:1/-1;color:var(--muted);font-size:11px;margin:6px 0 0}
.notification-filter-chips{grid-column:1/-1;display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}.notification-filter-chips button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:12px;cursor:pointer}.notification-filter-chips button:hover{border-color:var(--teal)}.notification-filter-chips button.active{background:color-mix(in srgb,var(--teal) 12%,var(--panel));border-color:var(--teal);color:var(--text)}.notification-filter-chips button span{min-width:18px;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--teal) 16%,var(--panel));color:var(--teal);font-size:11px}
.notification-list{display:flex;flex-direction:column;gap:8px}.notification-row{display:flex;align-items:center;gap:11px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:13px;cursor:pointer}.notification-row:hover{border-color:var(--teal)}.notification-row.unread{background:color-mix(in srgb,var(--teal) 9%,var(--panel));border-color:color-mix(in srgb,var(--teal) 45%,var(--line))}.notification-icon{font-size:22px}.notification-head{display:flex;justify-content:space-between;gap:9px}.notification-head span{color:var(--teal);font-size:10px}.notification-row p{margin:4px 0;font-size:12px;line-height:1.65}.notification-row small{color:var(--muted);font-size:10px}.unread-dot{width:10px;height:10px;background:var(--teal);border-radius:50%;flex:0 0 10px}

.task-card-tools{display:flex;align-items:center;gap:6px}.card-assign-handle{display:grid;place-items:center;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:8px;min-width:36px;height:31px;cursor:grab;touch-action:none;font-size:14px}.card-assign-handle:active{cursor:grabbing;transform:scale(.96)}
.card-message{display:flex;align-items:center;gap:8px;width:100%;margin-top:9px;padding:8px 9px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text);text-align:start;cursor:pointer}.card-message:hover{border-color:var(--teal)}.card-message.unread{background:color-mix(in srgb,var(--teal) 11%,var(--panel2));border-color:var(--teal)}.card-message-icon{font-size:18px}.card-message-body{min-width:0;flex:1}.card-message-body b,.card-message-body small{display:block}.card-message-body b{font-size:10px}.card-message-body small{color:var(--muted);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-message em{font-style:normal;background:var(--red);color:white;min-width:20px;height:20px;padding:0 5px;border-radius:20px;display:grid;place-items:center;font-size:9px;font-weight:800}.card-stats{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:10px}

.assignment-drop-rail{position:sticky;top:77px;z-index:11;background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:11px;margin-bottom:13px;box-shadow:0 8px 22px var(--shadow)}.assignment-drop-rail>div:first-child{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px}.assignment-drop-rail small{color:var(--muted);font-size:9px}.assignment-targets{display:flex;gap:7px;overflow:auto;padding-bottom:3px;scrollbar-width:thin}.assignment-target{flex:0 0 126px;display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;gap:1px 7px;align-items:center;text-align:start;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:7px;cursor:pointer}.assignment-target>span{grid-row:1/3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#031f1c;font-weight:800}.assignment-target b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.assignment-target small{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.assignment-target.drag-over,.assignment-target.touch-over{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 22%,transparent);transform:translateY(-2px)}
.task-drag-ghost{position:fixed;inset:0 auto auto 0;width:min(300px,74vw);z-index:1000;pointer-events:none;opacity:.90;box-shadow:0 18px 45px rgba(0,0,0,.48);transform-origin:top left}
.mobile-assignment-drawer{position:fixed;z-index:1001;left:0;right:0;bottom:0;max-height:82dvh;background:var(--panel);border:1px solid var(--line);border-radius:20px 20px 0 0;padding:14px 14px calc(14px + var(--safe-bottom));box-shadow:0 -18px 50px rgba(0,0,0,.5);transform:translateY(105%);transition:transform .18s;overflow:auto}.mobile-assignment-drawer.open{transform:translateY(0)}.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.mobile-assignment-drawer>input{width:100%;margin-bottom:9px}.mobile-assignment-drawer [data-drawer-assignee]{display:grid;grid-template-columns:38px 1fr;gap:9px;align-items:center;width:100%;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px;margin-bottom:7px;text-align:start}.mobile-assignment-drawer [data-drawer-assignee]>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#042f2a;font-weight:800}.mobile-assignment-drawer [data-drawer-assignee] b,.mobile-assignment-drawer [data-drawer-assignee] small{display:block}.mobile-assignment-drawer [data-drawer-assignee] small{color:var(--muted);font-size:9px}

.dashboard-toolbar{padding:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:13px}.dashboard-toolbar select{flex:1;min-width:230px}.custom-dashboard-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}.dashboard-widget{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:14px;min-width:0}.dashboard-widget h3{margin:0 0 10px;font-size:14px}.widget-small{grid-column:span 3}.widget-medium{grid-column:span 6}.widget-large{grid-column:span 8}.widget-full{grid-column:1/-1}.metric-widget{display:flex;flex-direction:column;justify-content:center;min-height:125px;text-align:center}.metric-widget span{color:var(--muted);font-size:12px}.metric-widget strong{font-size:37px;color:var(--teal)}.breakdown-bars{display:flex;flex-direction:column;gap:8px}.breakdown-bars label{display:flex;justify-content:space-between;font-size:10px}.breakdown-bars i{display:block;height:7px;background:var(--panel2);border-radius:10px;overflow:hidden}.breakdown-bars em{display:block;height:100%;background:var(--teal)}.dashboard-list{display:flex;flex-direction:column;gap:7px}.dashboard-list button,.dashboard-list>div{display:flex;justify-content:space-between;gap:8px;align-items:center;background:var(--panel2);color:var(--text);border:1px solid transparent;border-radius:9px;padding:8px 9px;text-align:start}.dashboard-list button:hover{border-color:var(--teal)}.dashboard-list b,.dashboard-list small{display:block}.dashboard-list small{color:var(--muted);font-size:9px}.dashboard-editor{padding:15px;margin-bottom:13px}.dashboard-editor-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:9px}.dashboard-add-widget{display:flex;gap:8px;margin:12px 0}.dashboard-add-widget select{flex:1}.dashboard-widget-editor-list{display:flex;flex-direction:column;gap:7px}.dashboard-widget-editor{display:grid;grid-template-columns:auto minmax(170px,1fr) 120px auto auto auto;gap:7px;align-items:center;background:var(--panel2);padding:8px;border-radius:9px}.empty-state{padding:44px;text-align:center}.empty-state p{color:var(--muted)}

.appearance-card{text-align:start}.appearance-card h3{text-align:center}.color-options{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:13px 0}.color-options button{width:35px;height:35px;border-radius:50%;border:3px solid transparent;background:var(--swatch);cursor:pointer}.color-options button.selected{border-color:var(--text);box-shadow:0 0 0 3px var(--swatch)}.toggle-line{display:flex;align-items:center;gap:8px;font-size:12px;margin:8px 0}.toggle-line input{width:18px;height:18px;min-height:auto;accent-color:var(--teal)}

@media(max-width:1000px){.widget-small{grid-column:span 6}.widget-medium,.widget-large{grid-column:span 12}.dashboard-editor-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){
  .notification-head{flex-direction:column;gap:2px}.notification-summary{grid-template-columns:auto 1fr}
  .assignment-drop-rail{top:64px;margin-inline:-3px}.assignment-drop-rail>div:first-child{display:block}.assignment-target{flex-basis:112px}
  .card-assign-handle{min-width:44px;height:38px;font-size:16px}
  .custom-dashboard-grid{grid-template-columns:1fr}.widget-small,.widget-medium,.widget-large,.widget-full{grid-column:1}
  .dashboard-editor-grid,.dashboard-widget-editor{grid-template-columns:1fr}.dashboard-widget-editor>span{display:none}.dashboard-add-widget{flex-direction:column}
  .header-actions .btn{padding-inline:9px}.notification-button{min-width:44px}
}
.telegram-health{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:10px 0}.telegram-health span{background:var(--panel2);border-radius:8px;padding:5px 7px;color:var(--muted);font-size:9px}

/* v1.12 local complete: push, automations, planning, custom fields, resources and offline sync */
.push-state{grid-column:1/-1;padding:8px 10px;border-radius:9px;font-size:11px;background:var(--panel2)}.push-state.ok{color:var(--green)}.push-state.warning{color:var(--amber)}
.notification-settings-grid{align-items:stretch}.notification-settings-grid>.panel{margin:0}
.automation-form,.automation-card{margin-bottom:12px}.automation-list{display:grid;gap:10px}.automation-card{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px}.automation-card.inactive{opacity:.62}.automation-actions{display:flex;gap:5px;flex-wrap:wrap}.automation-actions span{padding:3px 7px;border-radius:20px;background:var(--panel2);font-size:9px;color:var(--muted)}
.automation-action-row{display:grid;grid-template-columns:140px 135px minmax(120px,1fr) minmax(120px,1fr) 150px minmax(150px,1fr) auto;gap:7px;align-items:center;background:var(--panel2);padding:8px;border-radius:10px;margin:7px 0}.automation-action-row select[multiple]{min-height:72px}
.column-editor{display:flex;flex-direction:column;gap:7px;margin:12px 0}.column-editor label{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;cursor:grab}.column-editor label.drag-over{border-color:var(--teal)}
.advanced-table .inline-table-input{min-width:100px;width:100%;padding:6px}.advanced-table .inline-table-input.number{min-width:76px;width:76px}.custom-field-cell{cursor:pointer;border-bottom:1px dashed var(--teal)}.unread-count{display:inline-grid;place-items:center;min-width:19px;height:19px;border-radius:20px;background:var(--red);color:#fff;font-size:9px}
.custom-field-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.custom-field-detail-grid .field{display:flex;flex-direction:column;gap:5px}.custom-field-detail-grid select[multiple]{min-height:90px}.work-summary{display:flex;align-items:baseline;gap:10px;padding:10px;border-radius:10px;background:var(--panel2);margin-bottom:9px}.work-summary strong{font-size:25px;color:var(--teal)}.inline-form{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin:10px 0}.inline-form>*{flex:1;min-width:120px}.inline-form button{flex:0 0 auto}
.timeline-bar{touch-action:none}.timeline-bar.critical-path{outline:3px solid color-mix(in srgb,var(--red) 75%,transparent);box-shadow:0 0 0 2px var(--panel)}.timeline-resize{position:absolute;top:0;bottom:0;width:10px;cursor:ew-resize}.timeline-resize.start{inset-inline-start:0}.timeline-resize.end{inset-inline-end:0}.calendar-cell.drag-over,.calendar-week-day.drag-over,.calendar-day-view.drag-over{box-shadow:inset 0 0 0 3px var(--teal);background:color-mix(in srgb,var(--teal) 12%,var(--panel2))}.calendar-task[draggable=true]{cursor:grab}
.metric-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metric-pair>div{background:var(--panel2);border-radius:10px;padding:12px;text-align:center}.metric-pair strong,.metric-pair span{display:block}.metric-pair strong,.large-number{font-size:27px;color:var(--teal)}.widget-config-input{min-width:150px}.dashboard-widget-editor[draggable=true]{cursor:grab}.dashboard-widget-editor[draggable=true]:active{opacity:.65}
.resource-toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.resource-toolbar label{flex:1}.availability-row{display:grid;grid-template-columns:minmax(130px,1fr) 100px 100px 90px;gap:7px;align-items:center;background:var(--panel2);border-radius:9px;padding:8px;margin:6px 0}.holiday-list{display:grid;gap:6px}.offline-mutation{display:flex;gap:8px;align-items:center;padding:10px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;margin-top:8px}.offline-mutation.conflict{border-color:var(--amber)}.offline-mutation.failed{border-color:var(--red)}.offline-mutation code{display:block;color:var(--amber);font-size:10px;margin-top:4px}
.workspace-toolbar{display:flex;gap:8px;flex-wrap:wrap}.tabs button{cursor:pointer}.form-grid .full{grid-column:1/-1}
@media(max-width:1050px){.automation-action-row{grid-template-columns:1fr 1fr 1fr}.dashboard-widget-editor{grid-template-columns:auto 1fr 110px}.widget-config-input{grid-column:2/-1}}
@media(max-width:700px){.automation-action-row{grid-template-columns:1fr}.notification-settings-grid{grid-template-columns:1fr}.availability-row{grid-template-columns:1fr 1fr}.availability-row label{grid-column:1/-1}.inline-form>*{min-width:100%}.advanced-table{min-width:1000px}.custom-field-detail-grid{grid-template-columns:1fr}.offline-mutation{align-items:stretch;flex-direction:column}.timeline-resize{width:18px}.timeline-bar{min-height:34px;top:8px}}

/* ============================================================
   v1.13 — Trello-style visual refresh (additive, theme-aware)
   ============================================================ */
:root{--cover-todo:#8993a4;--cover-doing:#0c66e4;--cover-review:#e2b203;--cover-block:#ca3521;--cover-done:#22a06b;--cover-approve:#e56910}
html[data-theme="light"]{--bg:#f4f5f7;--panel:#ffffff;--panel2:#f1f2f4;--line:#e4e7eb;--text:#172b4d;--muted:#5e6c84;--shadow:rgba(9,30,66,.14)}

/* soft elevation on light surfaces */
html[data-theme="light"] .panel,html[data-theme="light"] .section-panel,html[data-theme="light"] .task-card,
html[data-theme="light"] .company-card,html[data-theme="light"] .template-card,html[data-theme="light"] .directory-card,
html[data-theme="light"] .dashboard-widget,html[data-theme="light"] .kpi,html[data-theme="light"] .workload-card,
html[data-theme="light"] .automation-card,html[data-theme="light"] .notification-row{box-shadow:0 1px 3px rgba(9,30,66,.12),0 0 1px rgba(9,30,66,.07)}

/* cards: rounder, lift on hover, Trello cover stripe by priority */
.task-card,.collaborative-card{border-radius:13px;transition:transform .14s,box-shadow .14s,border-color .14s}
.collaborative-card{position:relative}
.collaborative-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(9,30,66,.20)}
.collaborative-card:has(.priority.critical){border-top:4px solid var(--cover-block)}
.collaborative-card:has(.priority.high){border-top:4px solid var(--cover-review)}
.collaborative-card:has(.priority.normal){border-top:4px solid var(--cover-doing)}
.collaborative-card:has(.priority.low){border-top:4px solid var(--cover-todo)}

/* vivid priority pills (light) */
html[data-theme="light"] .priority.normal{background:#e9f2ff;color:#0c66e4}
html[data-theme="light"] .priority.high{background:#fff4d6;color:#a06b00}
html[data-theme="light"] .priority.critical{background:#ffeceb;color:#ca3521}
html[data-theme="light"] .priority.low{background:#eef0f3;color:#5e6c84}

/* assignee chips -> accent pill avatars */
.assignee-chips span{background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal);border:1px solid color-mix(in srgb,var(--teal) 35%,transparent);font-weight:700}

/* Kanban: colored board, gray columns, status dot per column (light) */
html[data-theme="light"] .kanban-board{background:linear-gradient(135deg,#e7f0ff,#eef1f6);border:1px solid var(--line);border-radius:18px;padding:14px}
html[data-theme="light"] .kanban-column,html[data-theme="light"] .kanban-head{background:#ebecf0;border-color:transparent}
html[data-theme="light"] .kanban-empty{border-color:#c1c7d0;color:#5e6c84}
.kanban-column{border-radius:14px}
.kanban-head b{display:inline-flex;align-items:center;gap:8px}
.kanban-head b::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--muted);flex:0 0 9px}
.kanban-column[data-drop-status="in_progress"] .kanban-head b::before{background:var(--cover-doing)}
.kanban-column[data-drop-status="blocked"] .kanban-head b::before{background:var(--cover-block)}
.kanban-column[data-drop-status="waiting_approval"] .kanban-head b::before{background:var(--cover-approve)}
.kanban-column[data-drop-status="completed"] .kanban-head b::before,
.kanban-column[data-drop-status="verified"] .kanban-head b::before{background:var(--cover-done)}
.kanban-column[data-drop-status="waiting"] .kanban-head b::before,
.kanban-column[data-drop-status="assigned"] .kanban-head b::before{background:var(--cover-todo)}

/* KPIs, widgets, summaries: accent numbers + rounder */
.kpi{border-radius:14px}.kpi strong{color:var(--teal)}
.dashboard-widget{border-radius:16px}
.metric-widget strong,.metric-pair strong,.large-number,.collaboration-summary strong,.notification-summary strong,.work-summary strong{color:var(--teal)}
.progress{border-radius:20px}

/* buttons + nav micro-interactions */
.btn{border-radius:10px}.btn.primary{box-shadow:0 1px 2px rgba(9,30,66,.18)}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
html[data-theme="light"] .check,html[data-theme="light"] .list-row{background:#f1f2f4}

/* ============================================================
   v1.15 — Employee onboarding & guidance (theme-aware)
   ============================================================ */
.ob-scrim{position:fixed;inset:0;background:rgba(9,30,66,.55);display:grid;place-items:center;padding:18px;z-index:1200;opacity:0;transition:opacity .2s;pointer-events:none}
.ob-scrim.show{opacity:1;pointer-events:auto}
.ob-modal{position:relative;width:min(560px,96vw);max-height:90vh;overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.4);transform:translateY(12px);transition:transform .2s}
.ob-scrim.show .ob-modal{transform:none}
.ob-modal h2{margin:0 0 6px;font-size:20px}
.ob-modal .ob-sub{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.7}
.ob-x{position:absolute;top:12px;inset-inline-end:12px;width:34px;height:34px;border:0;border-radius:9px;background:var(--panel2);color:var(--text);cursor:pointer;font-size:15px}
.ob-steps{display:flex;flex-direction:column;gap:11px;margin-bottom:18px}
.ob-step{display:flex;gap:12px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:12px}
.ob-num{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;font-weight:800;font-size:13px}
.ob-step b{display:block;font-size:14px;margin-bottom:3px}
.ob-step p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}
.ob-actions{display:flex;gap:9px;flex-wrap:wrap}
.ob-actions .btn{flex:1;min-width:150px;text-align:center}
.ob-empty-hint{margin-top:10px;color:var(--muted);font-size:12px;line-height:1.8}
#ob-help{min-width:40px}
@media(max-width:600px){.ob-modal{padding:18px}.ob-actions .btn{min-width:100%}}
/* ============================================================
   v1.15.1 — Command palette
   ============================================================ */
.cp-scrim{position:fixed;inset:0;background:rgba(9,30,66,.5);display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;z-index:1300;opacity:0;pointer-events:none;transition:opacity .15s}
.cp-scrim.show{opacity:1;pointer-events:auto}
.cp-box{width:min(560px,94vw);background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.45);overflow:hidden}
.cp-input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);padding:15px 17px;font-size:15px;outline:none;min-height:auto;border-radius:0}
.cp-list{max-height:46vh;overflow:auto;padding:7px}
.cp-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:14px}
.cp-item.active{background:color-mix(in srgb,var(--teal) 16%,transparent)}
.cp-ic{width:22px;text-align:center}
.cp-empty{padding:18px;text-align:center;color:var(--muted);font-size:13px}
.cp-foot{border-top:1px solid var(--line);padding:9px 14px;color:var(--muted);font-size:11px;display:flex;gap:12px;justify-content:flex-end}
/* ============================================================
   v1.15.2 — Department dashboard templates bar
   ============================================================ */
.dt-bar{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:14px;margin-bottom:14px}
.dt-head{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.dt-head b{font-size:15px}
.dt-head span{color:var(--muted);font-size:12px;line-height:1.6}
.dt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.dt-card{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:14px 10px;cursor:pointer;color:var(--text);font-family:inherit;transition:transform .14s,border-color .14s}
.dt-card:hover{border-color:var(--teal);transform:translateY(-2px)}
.dt-card .dt-ic{font-size:26px}
.dt-card b{font-size:13px;text-align:center}
.dt-card small{color:var(--muted);font-size:10px}
.dt-card.loading{opacity:.55;pointer-events:none}
@media(max-width:600px){.dt-grid{grid-template-columns:repeat(2,1fr)}}
/* ============================================================
   v1.15.3 — Recent items & favourites strip
   ============================================================ */
.rf-bar{display:flex;flex-direction:column;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:10px 12px;margin-bottom:14px}
.rf-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rf-lbl{font-size:11px;color:var(--muted);font-weight:700;min-width:90px}
.rf-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:5px 11px;font-size:12px;cursor:pointer;color:var(--text);transition:border-color .12s}
.rf-chip:hover{border-color:var(--teal)}
.rf-star,.rf-x{font-style:normal;cursor:pointer;opacity:.6;font-size:11px}
.rf-star:hover,.rf-x:hover{opacity:1;color:var(--teal)}
@media(max-width:600px){.rf-lbl{min-width:100%}}
/* ============================================================
   v1.15.4 — Task-template presets (department selector)
   ============================================================ */
.tt-dept{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.tt-dept label{font-size:12px;color:var(--muted);font-weight:700}
.tt-dept select{min-width:200px}
/* ============================================================
   v1.15.5 — Accessible contrast fixes (WCAG AA)
   --on-accent / --accent-text are set by accessibility.js
   ============================================================ */
.btn.primary{color:var(--on-accent,#fff)!important}
.nav-btn.active,.link-btn{color:var(--accent-text,var(--teal))!important}
.kpi strong,.metric-widget strong,.metric-pair strong,.large-number,.work-summary strong,.collaboration-summary strong,.notification-summary strong{color:var(--accent-text,var(--teal))!important}
html[data-theme="light"] .priority.high{color:#7a5200;background:#fff4d6}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,.nav-btn:focus-visible,.task-card:focus-visible,.cp-item:focus-visible,.dt-card:focus-visible{outline:2px solid var(--accent-text,var(--teal));outline-offset:2px;border-radius:6px}
/* ============================================================
   v1.15.6 — Notification date-group headers
   ============================================================ */
.ng-header{display:flex;align-items:center;gap:9px;margin:14px 2px 6px;font-size:11px;font-weight:800;color:var(--muted)}
.ng-header span{white-space:nowrap}
.ng-header i{font-style:normal;background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:1px 9px;font-size:10px}
.ng-header::after{content:"";flex:1;height:1px;background:var(--line)}
/* ============================================================
   v1.15.7 — Simplified navigation groups (desktop)
   ============================================================ */
.nav-group{display:flex;flex-direction:column;gap:5px}
.nav-group + .nav-group{margin-top:8px}
.nav-group-label{font-size:10px;font-weight:800;color:var(--muted);padding:6px 10px 2px;letter-spacing:.3px;display:flex;align-items:center;gap:6px}
button.nav-group-label{background:none;border:0;width:100%;text-align:start;justify-content:space-between;cursor:pointer;min-height:auto}
button.nav-group-label:hover{color:var(--text)}
.nav-group-items{display:flex;flex-direction:column;gap:5px}
.nav-group.collapsed .nav-group-items{display:none}
.nav-group-toggle .chev{transition:transform .15s}
.nav-group.collapsed .nav-group-toggle .chev{transform:rotate(-90deg)}
@media(max-width:780px){.nav-group{flex-direction:row}.nav-group-label{display:none}.nav-group-items{flex-direction:row}}
/* ============================================================
   v1.15.8 — Localization (English LTR mode)
   ============================================================ */
#lang-toggle{min-width:48px;font-weight:800}
html.lang-en .header-actions{direction:ltr}
html.lang-en .demo-note,html.lang-en .copy-row input,html.lang-en .phone-url-picker select,html.lang-en .recovery-token{direction:ltr;text-align:left}
html.lang-en .nav-btn,html.lang-en .row-main b,html.lang-en .row-main small{text-align:left}
/* v1.16.0 usability upgrade: daily command center, quick filters, simpler task creation */
.command-center{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:16px;align-items:stretch;padding:18px;margin-bottom:16px;background:linear-gradient(135deg,var(--panel),var(--panel2));box-shadow:0 10px 28px #0002}
.command-copy{display:flex;flex-direction:column;justify-content:center;gap:6px}.command-copy .eyebrow{width:max-content;background:#14b8a622;color:var(--teal);border:1px solid #14b8a655;border-radius:99px;padding:3px 10px;font-size:11px;font-weight:800}.command-copy h3{margin:0;font-size:23px}.command-copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.8}.quick-action-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px}.command-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;min-height:112px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:13px;text-align:start;cursor:pointer}.command-card:hover,.command-card.active{border-color:var(--teal);transform:translateY(-1px);box-shadow:0 10px 24px #0002}.command-card span{font-size:24px}.command-card b{font-size:15px}.command-card small{color:var(--muted);font-size:11px;line-height:1.5}.command-card.primary{background:#14b8a622;border-color:#14b8a655}.command-card.danger.active,.command-card.danger:hover{border-color:var(--red)}
.compact-kpis{grid-template-columns:repeat(6,minmax(100px,1fr));margin-bottom:12px}.quick-filter-bar{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;margin-bottom:14px}.quick-filter-bar b,.quick-filter-bar small{display:block}.quick-filter-bar small{color:var(--muted);font-size:11px;margin-top:2px}.quick-filter-pills{display:flex;flex-wrap:wrap;gap:8px}.quick-pill{display:inline-flex;align-items:center;gap:7px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:99px;padding:7px 11px;font-size:12px;font-weight:800;cursor:pointer}.quick-pill span{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:99px;background:var(--panel2);color:var(--muted);font-size:10px}.quick-pill.active{background:#14b8a622;border-color:var(--teal);color:var(--teal)}.task-toolbar{align-items:center}.task-empty-state h3{margin:0 0 8px;font-size:18px;color:var(--text)}.task-empty-state p{margin:0 0 14px}.task-empty-state>div{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.create-card{width:min(920px,96vw)}.create-head{align-items:flex-start}.create-head h3{margin-bottom:2px}.create-head p{margin:0;color:var(--muted);font-size:12px}.create-mode-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 14px;padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--panel2)}.create-step{display:inline-flex;align-items:center;gap:5px;background:var(--bg);color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:5px 10px;font-size:11px;font-weight:800}.create-step.active{color:var(--teal);border-color:#14b8a655;background:#14b8a622}.create-mode-row .btn{margin-inline-start:auto}.required-dot{color:var(--red);font-weight:800}.quick-assignee-field small{color:var(--muted);font-size:11px;line-height:1.7}.simple-mode .create-advanced-field{display:none}.advanced-mode .create-advanced-field{display:flex}.create-grid{gap:12px}.create-card .dialog-actions{position:sticky;bottom:-18px;background:linear-gradient(180deg,transparent,var(--panel) 32%);padding-top:18px;margin-top:8px}.toast.bad{box-shadow:0 18px 45px #0006;line-height:1.7}
html[data-theme="light"] .command-center{background:linear-gradient(135deg,#fff,#f8fafc)}html[data-theme="light"] .command-card,html[data-theme="light"] .quick-pill{background:#fff}html[data-theme="light"] .create-mode-row{background:#f8fafc}html[data-theme="light"] .create-card .dialog-actions{background:linear-gradient(180deg,transparent,#fff 32%)}
@media(max-width:1050px){.command-center{grid-template-columns:1fr}.quick-action-grid{grid-template-columns:repeat(2,minmax(140px,1fr))}.compact-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.command-center{padding:14px}.quick-action-grid{grid-template-columns:1fr 1fr}.command-card{min-height:96px;padding:11px}.quick-filter-bar{align-items:stretch;flex-direction:column}.quick-filter-pills{display:grid;grid-template-columns:1fr 1fr}.quick-pill{justify-content:space-between}.create-mode-row{display:grid;grid-template-columns:1fr 1fr}.create-mode-row .btn{grid-column:1/-1;margin-inline-start:0;width:100%}.create-card .dialog-actions{bottom:-14px}.compact-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.quick-action-grid,.quick-filter-pills{grid-template-columns:1fr}.command-copy h3{font-size:19px}.compact-kpis{grid-template-columns:1fr 1fr}}

.dialog-head-actions { display: flex; gap: 8px; align-items: center; }

.subtask-row { align-items: center; }
.subtask-add { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.subtask-add input { flex: 1; min-width: 140px; }

/* v1.16.2 compact end-to-end workflows and permission panel */
.compact-flow-field small,.setup-wizard-field small{display:block;color:var(--muted);font-size:11px;line-height:1.7;margin-top:5px}
.compact-upload-options{margin-top:8px;align-items:center;justify-content:flex-start}
.compact-upload-options select{min-width:220px}
.access-control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.access-card{padding:16px}.permission-row{display:grid;grid-template-columns:minmax(140px,.7fr) minmax(0,1.3fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.permission-row:last-child{border-bottom:0}.permission-row small{color:var(--muted);line-height:1.7}.permission-row .btn{justify-self:end}
body[data-density="compact"] .command-center,body[data-density="compact"] .quick-filter-bar,body[data-density="compact"] .toolbar.panel{padding:10px;margin-bottom:10px}
body[data-density="compact"] .kpi{padding:9px}body[data-density="compact"] .task-card h3{font-size:13px;margin-bottom:3px}
@media(max-width:900px){.access-control-grid{grid-template-columns:1fr}.permission-row{grid-template-columns:1fr}.permission-row .btn{justify-self:start}.compact-upload-options{flex-direction:column;align-items:stretch}.compact-upload-options select{width:100%}}

/* v1.16.4 — professional one-run map and compact operating centre */
.professional-hero{display:grid;grid-template-columns:minmax(260px,1fr) repeat(4,minmax(120px,160px));gap:12px;align-items:stretch;padding:16px;margin-bottom:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--teal) 18%,var(--panel)),var(--panel))}
.professional-hero h3{margin:3px 0 5px;font-size:22px}.professional-hero p{margin:0;color:var(--muted);font-size:12px;line-height:1.8}.eyebrow{display:inline-block;color:#5eead4;text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:900}
.professional-score{background:color-mix(in srgb,var(--bg) 60%,transparent);border:1px solid var(--line);border-radius:13px;padding:12px;text-align:center;display:flex;flex-direction:column;justify-content:center}.professional-score strong{font-size:30px;color:var(--teal)}.professional-score span{font-size:10px;color:var(--muted)}.professional-score.danger strong{color:var(--red)}
.professional-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;padding:12px;margin-bottom:14px}.professional-sections{margin-bottom:14px}.permission-chip-grid{display:flex;gap:7px;flex-wrap:wrap}.permission-chip{border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800;background:var(--panel2);border:1px solid var(--line)}.permission-chip.yes{color:#86efac;border-color:#22c55e55}.permission-chip.no{color:#fca5a5;border-color:#ef444455;opacity:.72}
.professional-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}.professional-map-card{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px;min-height:82px}.professional-map-card span{width:32px;height:32px;border-radius:10px;background:#14b8a622;display:grid;place-items:center;font-weight:900;color:#5eead4}.professional-map-card b{display:block;font-size:13px}.professional-map-card small{display:block;color:var(--muted);font-size:10px;line-height:1.65}.professional-map-card em{font-style:normal;border-radius:999px;padding:3px 7px;font-size:9px;font-weight:900;background:var(--bg);white-space:nowrap}.professional-map-card.implemented{border-color:#22c55e55}.professional-map-card.foundation{border-color:#f59e0b66}.professional-map-card.foundation span{background:#f59e0b22;color:#fcd34d}.permission-matrix-panel{margin-top:14px}.permission-table-wrap{overflow:auto}.permission-table th,.permission-table td{text-align:center}.permission-table td:first-child,.permission-table th:first-child{text-align:start;position:sticky;inset-inline-start:0;background:var(--panel)}
.task-card.collaborative-card{min-height:230px}.card-stats span{white-space:nowrap}.quick-filter-bar,.command-center,.task-toolbar{box-shadow:0 6px 24px rgba(0,0,0,.08)}
@media(max-width:900px){.professional-hero{grid-template-columns:1fr 1fr}.professional-hero>div:first-child{grid-column:1/-1}.professional-map{grid-template-columns:1fr}.professional-actions{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.professional-hero,.professional-actions{grid-template-columns:1fr}.professional-map-card{grid-template-columns:30px 1fr}.professional-map-card em{grid-column:2}.permission-table{min-width:880px}}

/* v1.16.5 full-flow compact boards */
.create-card {
  max-width: min(1080px, 96vw);
}
.create-card.advanced-mode .create-advanced-field,
.create-card.advanced-mode .compact-flow-field {
  display: block;
}
.company-wizard-quick-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .55rem;
  align-items: end;
  margin: .45rem 0 .7rem;
  padding: .65rem;
  border: 1px solid var(--border, #d9e2ef);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface, #fff) 88%, var(--accent, #0c66e4) 12%);
}
.company-wizard-quick-row input { min-width: 0; }
.ready-dashboard-list,
.selected-dashboard-list { margin-bottom: 1rem; }
.ready-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .8rem;
}
.ready-dashboard-card {
  display: grid;
  gap: .55rem;
  padding: .85rem;
  border: 1px solid var(--border, #d9e2ef);
  border-radius: 16px;
  background: var(--surface, #fff);
}
.ready-dashboard-card.active,
.ready-dashboard-card.selected {
  border-color: var(--accent, #0c66e4);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #0c66e4) 18%, transparent);
}
.ready-dashboard-check {
  display: flex;
  gap: .45rem;
  align-items: center;
  font-size: .86rem;
  color: var(--muted, #64748b);
}
.ready-dashboard-main {
  border: 0;
  background: transparent;
  text-align: start;
  display: grid;
  gap: .25rem;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
.ready-dashboard-main b { font-size: 1rem; }
.ready-dashboard-main small,
.ready-dashboard-main em { color: var(--muted, #64748b); font-style: normal; }
.ready-dashboard-actions,
.dashboard-selected-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}
.dashboard-selected-row {
  padding: .65rem 0;
  border-top: 1px solid var(--border, #d9e2ef);
}
.dashboard-selected-row:first-of-type { border-top: 0; }

/* v1.16.6 real UI workflow fixes */
.version-chip,.version-mini{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:4px 8px;background:var(--panel2);color:var(--teal);font-size:11px;font-weight:900}
.full-board-mode .create-advanced-field,.full-board-mode .compact-flow-field{display:block!important}
.full-task-board .board-section-title{display:block!important;background:linear-gradient(135deg,color-mix(in srgb,var(--teal) 15%,var(--panel2)),var(--panel2));border:1px solid color-mix(in srgb,var(--teal) 38%,var(--line));border-radius:14px;padding:10px 12px;margin-top:4px}
.board-section-title b{display:block;font-size:13px;color:var(--text)}.board-section-title small{display:block;margin-top:4px;color:var(--muted);font-size:11px;line-height:1.6}
.department-setup-panel{border:1px solid color-mix(in srgb,var(--teal) 35%,var(--line));background:color-mix(in srgb,var(--teal) 8%,var(--panel2));border-radius:14px;padding:12px}.department-quick-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin:6px 0}.department-setup-panel small{display:block;color:var(--muted);font-size:11px;line-height:1.7}
.selected-dashboard-detail{border:1px solid var(--line);border-radius:14px;background:var(--panel2);padding:10px;margin-top:8px}.selected-dashboard-widgets{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.selected-dashboard-widgets span{font-size:10px;font-weight:800;border:1px solid var(--line);border-radius:999px;padding:4px 8px;background:var(--bg)}.inline-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ready-dashboard-check{cursor:pointer}


/* ==========================================================================
   v1.16.7 — Professional redesign layer (appended; overrides earlier rules)
   ========================================================================== */
:root{
  --radius:14px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.28);
  --shadow-card:0 8px 24px rgba(0,0,0,.30);
  --shadow-pop:0 18px 50px rgba(0,0,0,.50);
  --line:#2b3a52;
}
html[data-theme="light"]{
  --bg:#f5f7fb; --panel:#ffffff; --panel2:#eef2f8; --line:#e4e9f2; --text:#0f1b2d; --muted:#5b6b82;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-card:0 8px 26px rgba(15,23,42,.08);
  --shadow-pop:0 20px 54px rgba(15,23,42,.16);
}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;letter-spacing:.1px}

/* Header: cleaner, subtler depth */
header{box-shadow:0 2px 14px rgba(2,6,23,.22)}
header h1{font-weight:800;letter-spacing:-.2px}

/* Typography */
.hero-row h2{font-weight:800;letter-spacing:-.4px}
.section-title h3,.detail-section h3{font-weight:700;letter-spacing:-.2px}

/* Surfaces: rounded, elevated, smooth */
.panel,.task-card,.company-card,.template-card,.login-card,.dialog-card,.directory-card,.account-card,.section-panel{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  border-color:var(--line);
}
.task-card,.company-card,.template-card,.directory-card{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.task-card:hover,.company-card:hover,.template-card:hover,.directory-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop)}

/* Navigation */
.main-nav{border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:10px}
.nav-btn{border-radius:11px;font-weight:600;transition:background .14s ease,color .14s ease}
.nav-btn b{font-size:13.5px}
.nav-btn.active{font-weight:800}

/* Buttons: refined, tactile */
.btn{border-radius:11px;font-weight:600;letter-spacing:.2px;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;box-shadow:var(--shadow-sm)}
.btn.primary{box-shadow:0 6px 16px color-mix(in srgb,var(--teal) 34%,transparent)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid color-mix(in srgb,var(--teal) 45%,transparent);outline-offset:2px}
.btn.small{border-radius:9px}

/* Inputs */
input,select,textarea{border-radius:11px;transition:border-color .14s ease,box-shadow .14s ease}

/* Lists / rows */
.list-row{border-radius:12px;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.list-row:hover{box-shadow:var(--shadow-sm)}

/* KPIs */
.kpi,.mini-kpis>div{border-radius:14px;box-shadow:var(--shadow-sm)}
.kpi strong{font-weight:800;letter-spacing:-.5px}

/* Pills & chips */
.status-pill,.priority,.connection-badge,.directory-badge{font-weight:700;letter-spacing:.3px}

/* Company icon tile */
.company-icon{border-radius:15px;box-shadow:var(--shadow-sm)}

/* Tables */
.table-wrap{border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.task-table th{font-weight:700;letter-spacing:.2px;text-transform:none}

/* Empty states */
.empty{border-radius:var(--radius-lg);padding:48px 24px}

/* Login: premium card */
.login-card{padding:34px 30px;gap:11px}
.login-card .brand{width:66px;height:66px;margin:2px auto 4px;display:grid;place-items:center;font-size:32px;border-radius:20px;background:color-mix(in srgb,var(--teal) 16%,transparent);box-shadow:var(--shadow-sm)}
.login-card h1{font-weight:800;letter-spacing:-.4px;font-size:23px}
.login-card .btn.primary{margin-top:12px;padding:13px;font-size:15px}

/* Dialogs */
.dialog-card{border-radius:var(--radius-lg)}
.detail-section{border-radius:14px}

/* Toast */
.toast{border-radius:12px;box-shadow:var(--shadow-pop)}

/* Refined scrollbars */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 42%,transparent);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 62%,transparent);background-clip:padding-box}

/* Subtle entrance for main content */
#view-content{animation:v167fade .22s ease}
@keyframes v167fade{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}

/* v1.16.7 global search */
.global-search-wrap{position:relative;margin:0 0 16px}
#global-search{width:100%;min-height:48px;border-radius:14px;padding:12px 16px;font-size:14px;box-shadow:var(--shadow-sm)}
.global-search-results{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-pop);max-height:60vh;overflow:auto;padding:6px}
.gs-row{display:flex;align-items:center;gap:11px;width:100%;text-align:right;background:transparent;border:0;border-radius:10px;padding:10px 12px;cursor:pointer;color:var(--text)}
.gs-row:hover{background:var(--panel2)}
.gs-icon{font-size:20px;flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--panel2)}
.gs-main{min-width:0}.gs-main b{display:block;font-size:13px}.gs-main small{display:block;color:var(--muted);font-size:10px}
.gs-empty{padding:16px;text-align:center;color:var(--muted);font-size:12px}


/* ==========================================================================
   v1.16.7 — Automation / Fields / Resources polish (ClickUp/Trello feel)
   ========================================================================== */
/* Two-column layouts (were unstyled -> stacked) */
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){.grid.two{grid-template-columns:1fr}}

/* Segmented tabs */
.tabs{display:flex;gap:6px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.tabs button{background:transparent;border:0;border-radius:10px;padding:9px 14px;font-weight:600;color:var(--muted);cursor:pointer;transition:background .14s,color .14s}
.tabs button:hover{color:var(--text)}
.tabs button.active{background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal)}

/* Automation cards: clean recipe cards (override earlier row layout) */
.automation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.automation-card{display:block;padding:16px;border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.automation-card .row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.automation-card h3{margin:0 0 8px;font-size:16px}
.automation-card>p{color:var(--muted);font-size:12px;margin:10px 0 0;line-height:1.7}
.automation-card .pill{font-size:10px;font-weight:800;letter-spacing:.3px;padding:4px 10px;border-radius:20px;background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green);white-space:nowrap}
.automation-card.disabled .pill,.automation-card.inactive .pill{background:color-mix(in srgb,var(--muted) 20%,transparent);color:var(--muted)}
.automation-actions{margin-top:14px}

/* When -> Then rule flow */
.rule-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.rule-when{font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:8px;background:color-mix(in srgb,var(--violet) 16%,transparent);color:color-mix(in srgb,var(--violet) 80%,var(--text))}
.rule-arrow{color:var(--muted);font-weight:800}
.rule-then{font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:8px;background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal)}

/* Recipe hint row */
.recipe-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.recipe-chip{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:12px;font-weight:600;color:var(--text);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s,border-color .12s}
.recipe-chip:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--teal) 55%,var(--line))}
.recipe-chip span{font-size:15px}

/* Field manager */
.field-manage-row{align-items:center}
.cf-type-icon{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--panel2);font-size:18px}
.settings-row{display:flex;align-items:center;gap:11px;padding:11px 12px;background:var(--panel2);border:1px solid transparent;border-radius:12px;margin-bottom:8px}
.settings-row:hover{border-color:var(--line)}
.settings-row .row-main{flex:1;min-width:0}
.settings-row .row-main b{font-size:13px}
.settings-row .row-main small{color:var(--muted);font-size:10.5px}

/* Workload cards (ClickUp workload feel) */
.workload-card{border-radius:16px;box-shadow:var(--shadow-sm);transition:transform .14s,box-shadow .14s}
.workload-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.workload-card strong{font-weight:800;letter-spacing:-.5px}
.workload-card.over{background:color-mix(in srgb,var(--red) 7%,var(--panel))}
.workload-card.near{background:color-mix(in srgb,var(--amber) 8%,var(--panel))}
.workload-card.ok{background:color-mix(in srgb,var(--green) 6%,var(--panel))}
.workload-card.over strong{color:var(--red)}
.workload-card.near strong{color:var(--amber)}
.workload-card.ok strong{color:var(--green)}
.capacity-bar{height:9px}
.workload-stats span{background:var(--panel2);border-radius:8px;padding:4px 8px;font-size:10.5px}

/* Resource + inline forms */
.resource-toolbar{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.availability-row{border-radius:10px}
.column-editor label{border-radius:10px;box-shadow:var(--shadow-sm)}
.column-editor label:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line))}


/* v1.16.8 — depth features */
.recipe-block{margin-bottom:18px}
.recipe-title{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:9px}
.workload-summary{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.wl-sum{font-size:11px;font-weight:800;padding:6px 12px;border-radius:20px}
.wl-sum.over{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.wl-sum.near{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.wl-sum.ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.resource-toolbar label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}


/* v1.16.9 — automation run history */
.automation-runs{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.automation-runs.hidden{display:none}
.run-test{display:flex;gap:8px;margin-bottom:10px}
.run-test select{flex:1;min-width:0}
.run-list{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow:auto}
.run-row{display:flex;align-items:center;gap:10px;background:var(--panel2);border-radius:10px;padding:8px 10px}
.run-row .row-main{min-width:0}.run-row b{font-size:12px}.run-row small{color:var(--muted);font-size:10px;display:block}
.run-badge{flex:0 0 auto;font-size:10px;font-weight:800;padding:3px 9px;border-radius:20px}
.run-badge.ok{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
.run-badge.err{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red)}
.run-badge.muted{background:color-mix(in srgb,var(--muted) 20%,transparent);color:var(--muted)}


/* v1.17.0 — guided automation builder + field drag/settings */
.guided-form .field.full{margin-bottom:6px}
.guided-step{display:flex;gap:12px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px;margin:10px 0}
.step-badge{flex:0 0 auto;font-size:11px;font-weight:800;padding:6px 12px;border-radius:20px;min-width:82px;text-align:center}
.step-badge.when{background:color-mix(in srgb,var(--violet) 20%,transparent);color:color-mix(in srgb,var(--violet) 85%,var(--text))}
.step-badge.iff{background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--amber)}
.step-badge.then{background:color-mix(in srgb,var(--teal) 20%,transparent);color:var(--teal)}
.step-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.step-body>select{width:100%}
.guided-step .step-body>.step-body{flex-direction:row;gap:8px}
.auto-action{display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:8px;margin-bottom:8px}
.auto-action>[data-a-type]{flex:0 0 160px}
.a-detail-wrap{flex:1;min-width:0;display:flex;gap:8px}
.a-detail-wrap .a-detail{flex:1;min-width:0}
.a-detail-wrap select[multiple]{min-height:70px}
.guided-scope{margin-top:6px}
@media(max-width:700px){.guided-step{flex-direction:column}.auto-action{flex-wrap:wrap}.auto-action>[data-a-type]{flex:1 1 100%}}

.cf-drag{cursor:grab;color:var(--muted);font-size:18px;flex:0 0 auto;user-select:none}
.field-manage-row[draggable="true"]{cursor:default}
.field-manage-row.cf-dragging{opacity:.5}
.field-manage-row.cf-drop{border-color:var(--teal);box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 30%,transparent)}
.cf-editor{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;margin:-4px 0 10px}
.cf-editor.hidden{display:none}


/* v1.17.1 — team workload board (drag to reassign) */
.wl-hint{color:var(--muted);font-size:12px;margin:0 0 12px}
.wl-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,270px);gap:12px;overflow-x:auto;padding-bottom:14px}
.wl-col{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px;min-height:200px;display:flex;flex-direction:column;transition:.15s}
.wl-col.wl-over{border-color:var(--teal);box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 30%,transparent)}
.wl-col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 8px}
.wl-col-head .row-main{min-width:0}.wl-col-head b{font-size:13px}.wl-col-head small{display:block;color:var(--muted);font-size:9px}
.wl-col-head strong{font-weight:800}
.wl-col-head.over strong{color:var(--red)}.wl-col-head.near strong{color:var(--amber)}.wl-col-head.ok strong{color:var(--green)}
.wl-col-body{display:flex;flex-direction:column;gap:8px;flex:1}
.wl-card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 10px;cursor:grab;border-inline-start:3px solid var(--muted)}
.wl-card:active{cursor:grabbing}
.wl-card.wl-dragging{opacity:.5}
.wl-card b{display:block;font-size:12px;cursor:pointer}
.wl-card small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.wl-card.priority-border-high{border-inline-start-color:var(--amber)}
.wl-card.priority-border-critical{border-inline-start-color:var(--red)}
.wl-card.priority-border-normal{border-inline-start-color:var(--teal)}
.wl-empty{border:1px dashed var(--line);border-radius:9px;padding:18px 8px;text-align:center;color:var(--muted);font-size:11px}
.wl-unassigned .wl-col-head b{color:var(--amber)}


/* v1.18.0 — reports + import */
.report-toolbar{flex-wrap:wrap}
.report-toolbar label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.report-kpis{grid-template-columns:repeat(5,1fr)}
.report-kpis .ok-num{color:var(--green)}.report-kpis .err-num{color:var(--red)}
@media(max-width:900px){.report-kpis{grid-template-columns:repeat(2,1fr)}}
#import-text{width:100%;direction:ltr;text-align:left;font-family:monospace;font-size:12px}
@media print{header,.main-nav,.header-actions,.global-search-wrap,.hero-row .view-actions,#view-actions,.report-toolbar{display:none!important}.app-layout{display:block;padding:0}body{background:#fff;color:#000}}


/* v1.18.0b — timer */
.timer-section .timer-row{display:flex;align-items:center;gap:12px}
.timer-display{font-family:monospace;font-size:26px;font-weight:800;letter-spacing:2px;color:var(--teal);min-width:130px}


/* v1.18.2 — simpler create dialog + header more menu */
.create-card.simple-mode .create-advanced-field,
.create-card.simple-mode .compact-flow-field,
.create-card.simple-mode .board-section-title { display: none !important; }
.create-card.simple-mode .create-step { display: none; }
.hdr-more{position:relative}
.hdr-more>summary{list-style:none;cursor:pointer;min-height:40px;display:inline-flex;align-items:center}
.hdr-more>summary::-webkit-details-marker{display:none}
.hdr-more-menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:60;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:6px;min-width:170px}
.hdr-more-menu .btn{width:100%;justify-content:flex-start;color:var(--text)}

/* v1.18.5 checklist access-control centre */
.access-checklist-toolbar {display:grid;grid-template-columns:180px minmax(260px,1fr) minmax(220px,1.2fr);gap:14px;align-items:end;}
.access-checklist-toolbar .wide select {min-width:260px;}
.access-scope-note {border:1px solid var(--border);background:var(--surface-2);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;}
.access-scope-note small {color:var(--muted);}
.access-checklist-panel .meta {margin-bottom:12px;}
.access-quick-actions {display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px;}
.access-category-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;}
.access-category-card {border:1px solid var(--border);background:var(--surface-2);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;}
.access-category-card h4 {margin:0 0 4px;font-size:1rem;}
.access-check-row {display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;border:1px solid rgba(148,163,184,.25);border-radius:12px;padding:10px;background:var(--surface);cursor:pointer;}
.access-check-row:hover {border-color:var(--accent);}
.access-check-row input {margin-top:4px;inline-size:18px;block-size:18px;}
.access-check-row span {display:flex;flex-direction:column;gap:3px;}
.access-check-row small {color:var(--muted);line-height:1.45;}
.access-chip-box {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;}
.access-chip-box b {min-width:74px;}
.permission-chip.yes {background:rgba(22,163,74,.14);border-color:rgba(22,163,74,.3);}
.permission-chip.no {background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.28);}
@media (max-width: 820px){.access-checklist-toolbar{grid-template-columns:1fr}.access-category-grid{grid-template-columns:1fr}}

/* v1.18.7 — user-controlled headlines/options, fonts, sizes and colors */
:root{
  --app-font-family:Cairo,system-ui,sans-serif;
  --base-font-size:14px;
  --heading-font-size:25px;
  --option-font-size:13px;
  --heading-color:var(--text);
  --option-color:var(--text);
}
body{font-family:var(--app-font-family);font-size:var(--base-font-size)}
header h1,.hero-row h2,.dialog-head h3,.section-title h3,.panel h3,.account-card h3,.company-head h3,.task-card h3,.template-card h3,.directory-card-head h3{color:var(--heading-color)}
.hero-row h2{font-size:var(--heading-font-size)}
button,.btn,select,option,.nav-btn b,.field label,.priority,.status-pill{font-size:var(--option-font-size);color:var(--option-color)}
.btn.primary{color:color-mix(in srgb,var(--option-color) 18%,#042f2a)}
.appearance-card.customizer-card{grid-column:1/-1;text-align:start}.appearance-card.customizer-card>h3{text-align:start}.appearance-toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0}.appearance-toolbar .field{min-width:0}.appearance-toolbar input[type=color]{padding:4px;min-height:43px}.customizer-preview{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px;margin:12px 0}.customizer-preview h2{margin:0;color:var(--heading-color);font-size:var(--heading-font-size)}.label-editor{margin-top:12px}.label-editor>summary{list-style:none;width:max-content}.label-editor>summary::-webkit-details-marker{display:none}.label-edit-group{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px;margin:10px 0}.label-edit-group h4{margin:0 0 10px;color:var(--heading-color)}.label-edit-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px}.label-edit-group h4{grid-column:1/-1}.label-edit-group .field{min-width:0}.label-edit-group input{min-height:38px}.color-options button{position:relative}.color-options button.selected::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:white;font-weight:900;text-shadow:0 1px 2px #000}
@media(max-width:700px){.appearance-card.customizer-card{padding:14px}.label-edit-group{grid-template-columns:1fr}.customizer-preview{align-items:stretch;flex-direction:column}.customizer-preview .btn{width:100%}}
.btn.danger{color:white}.btn.primary{color:#042f2a}


/* v1.18.8 clean professional UX */
.compact-create-btn{font-weight:800;box-shadow:0 8px 20px rgba(12,102,228,.16)}
.clean-home-hero{display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,1.25fr);gap:18px;align-items:stretch}
.mini-metrics{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.mini-metrics span{background:var(--soft-bg,#f4f7fb);border:1px solid var(--border,#dbe4f0);border-radius:999px;padding:6px 10px;font-size:.86rem}
.admin-setup-intro p{margin:4px 0 0;color:var(--muted,#637083)}
.admin-setup-grid,.universal-create-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:12px}
.setup-card{appearance:none;border:1px solid var(--border,#dbe4f0);background:var(--panel,#fff);border-radius:18px;padding:16px;text-align:start;cursor:pointer;box-shadow:0 10px 30px rgba(15,23,42,.06);transition:.18s transform,.18s box-shadow,.18s border-color;color:inherit}
.setup-card:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(15,23,42,.1);border-color:var(--accent,#0c66e4)}
.setup-card span{font-size:1.7rem;display:block;margin-bottom:8px}.setup-card b{display:block;font-size:1rem}.setup-card small{display:block;color:var(--muted,#637083);line-height:1.45;margin-top:6px}
.access-template-picker{display:flex;align-items:center;gap:6px}.access-template-picker select{min-width:160px}
.task-card.collaborative-card{padding:12px 14px}.task-card .task-description{max-height:3.4em;overflow:hidden;color:var(--muted,#637083)}
.main-nav .nav-btn{min-height:42px}.main-nav .nav-btn span:first-child{font-size:1.15rem}
@media (max-width:760px){.clean-home-hero{grid-template-columns:1fr}.header-actions{gap:6px}.compact-create-btn{padding-inline:10px}.admin-setup-grid,.universal-create-grid{grid-template-columns:1fr}}

/* v1.18.9 resources/contact-ticket visibility */
.person-ticket{display:flex;align-items:center;gap:10px;min-width:0;flex:1;padding:8px 10px;border:1px solid var(--line);background:var(--panel2);border-radius:12px;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}.person-ticket:hover,.person-ticket:focus{background:var(--panel);border-color:var(--accent);outline:none;transform:translateY(-1px)}.person-ticket.compact{padding:6px 8px}.person-ticket .row-main{min-width:0}.person-ticket .row-main b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.person-ticket .row-main small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-ticket-row{gap:8px;align-items:center}.user-ticket-row>.person-ticket{border:0;background:transparent;padding-inline:0}.user-ticket-row>.person-ticket:hover{background:transparent;transform:none}.person-contact-actions{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto}.icon-contact{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:999px;border:1px solid var(--line);background:var(--panel);text-decoration:none;font-size:15px;line-height:1}.icon-contact:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}.icon-contact.disabled{opacity:.35;cursor:not-allowed}.person-contact-modal{display:grid;gap:14px}.person-contact-hero{display:flex;align-items:center;gap:12px;padding:12px;background:var(--panel2);border-radius:14px}.person-contact-hero h3{margin:0}.person-contact-hero p{margin:3px 0 0;color:var(--muted)}.contact-info-grid{display:grid;gap:8px}.contact-info-row{display:grid;grid-template-columns:minmax(110px,.4fr) 1fr;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}.contact-info-row b{color:var(--muted);font-size:12px}.contact-info-row a,.contact-info-row .link-btn{justify-self:start}.person-contact-buttons{display:flex;gap:8px;flex-wrap:wrap}.directory-card[data-person-contact]{cursor:pointer}.directory-actions .person-contact-actions{margin-inline-start:0}.resource-visible-note{border:1px dashed var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--panel));border-radius:12px;padding:10px;margin-bottom:10px;color:var(--text)}
@media(max-width:700px){.contact-info-row{grid-template-columns:1fr}.person-contact-buttons .btn{width:100%;justify-content:center}.user-ticket-row{align-items:stretch;flex-direction:column}.user-ticket-row>.person-ticket{width:100%}.person-contact-actions{margin-inline-start:0}}

/* v1.19.0 attendance / overtime / bonus-deduction HR foundation */
.hr-warning{border-inline-start:4px solid var(--amber);background:rgba(245,158,11,.08);line-height:1.7}.hr-toolbar{align-items:end}.table-wrap{overflow:auto}.advanced-table td small{display:block;color:var(--muted);margin-top:2px}.advanced-table button+button{margin-inline-start:4px}.resource-visible-note{margin-bottom:10px}.tabs button{white-space:nowrap}.hr-toolbar input[type=date]{min-width:150px}
@media(max-width:720px){.hr-toolbar{grid-template-columns:1fr}.hr-toolbar label,.hr-toolbar button{width:100%}.advanced-table{min-width:900px}}

/* v1.19.2 preview + HR reviewer usability */
.info-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem;
  border: 1px solid var(--border, #dbe3ef);
  border-radius: 14px;
  background: var(--panel-soft, #f8fafc);
  margin: 0.45rem 0;
}
.preview-grid .info-card small,
.info-card small {
  display: block;
  color: var(--muted, #64748b);
  line-height: 1.55;
}
.access-preview-card {
  border-inline-start: 4px solid var(--accent, #14b8a6);
}
#back-main-option {
  margin-inline-start: .35rem;
}
.hr-warning {
  border-inline-start: 4px solid #f59e0b;
}

/* v1.19.4 simplified, practical access-control centre */
.access-professional-hero{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(360px,1.2fr);gap:16px;align-items:start;border-inline-start:4px solid var(--accent)}
.access-professional-hero h3{margin:0 0 6px}.access-professional-hero p{margin:0;color:var(--muted);line-height:1.65}.access-mode-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.access-mode-card{border:1px solid var(--line);background:var(--panel2);border-radius:15px;padding:11px;text-align:start;cursor:pointer;color:var(--text);display:grid;gap:4px;min-height:98px}.access-mode-card:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}.access-mode-card.active{background:color-mix(in srgb,var(--accent) 12%,var(--panel));border-color:var(--accent)}.access-mode-card:disabled{opacity:.45;cursor:not-allowed}.access-mode-card span{font-size:1.45rem}.access-mode-card small{color:var(--muted);line-height:1.35}.access-professional-layout{display:grid;grid-template-columns:minmax(310px,.38fr) minmax(0,1fr);gap:16px;align-items:start}.access-selector-card{position:sticky;top:82px}.access-filter-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px}.access-target-list{display:grid;gap:8px;max-height:58vh;overflow:auto;padding-inline-end:3px}.access-target-card{border:1px solid var(--line);background:var(--panel2);border-radius:14px;padding:10px;display:grid;grid-template-columns:34px 1fr;gap:9px;text-align:start;align-items:center;cursor:pointer;color:var(--text)}.access-target-card:hover{border-color:var(--accent);background:var(--panel)}.access-target-card.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}.access-target-card b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.access-target-card small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.access-editor-column{display:grid;gap:16px}.access-editor-card{border-inline-start:4px solid var(--accent)}.access-selected-summary{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px}.access-selected-summary small{display:block;color:var(--muted);line-height:1.55;margin-top:4px}.professional-access-actions{position:sticky;top:64px;z-index:4;background:color-mix(in srgb,var(--panel) 92%,transparent);padding:10px;border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(10px)}.access-safe-note{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.28);padding:10px;border-radius:12px}.professional-access-grid{grid-template-columns:1fr}.professional-access-category{padding:0;overflow:hidden}.professional-access-category summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 14px;cursor:pointer}.professional-access-category summary::-webkit-details-marker{display:none}.professional-access-category summary h4{margin:0}.professional-access-category summary span{border:1px solid var(--line);border-radius:999px;padding:4px 8px;background:var(--panel);font-size:.82rem;color:var(--muted)}.access-category-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;padding:0 14px 14px}.sticky-actions{position:sticky;bottom:10px;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:14px;padding:10px;backdrop-filter:blur(10px)}
@media(max-width:980px){.access-professional-hero,.access-professional-layout{grid-template-columns:1fr}.access-selector-card{position:static}.access-target-list{max-height:none}.access-category-body{grid-template-columns:1fr}.professional-access-actions{position:static}.access-selected-summary{flex-direction:column}.sticky-actions{position:static}.access-mode-tabs{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.access-mode-tabs{grid-template-columns:1fr}.access-target-card{grid-template-columns:28px 1fr}.access-professional-hero{padding:14px}}

/* v1.19.7 — clear full-size work boards */
:root {
  --pro-surface: rgba(255,255,255,0.86);
  --pro-surface-strong: rgba(255,255,255,0.98);
  --pro-border: rgba(12,102,228,0.14);
  --pro-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
  --pro-shadow-strong: 0 25px 80px rgba(15, 23, 42, 0.24);
  --pro-radius: 22px;
}
body.pro-polished-ui {
  background:
    radial-gradient(circle at 10% 10%, rgba(12,102,228,0.14), transparent 26rem),
    radial-gradient(circle at 90% 0%, rgba(20,184,166,0.12), transparent 24rem),
    linear-gradient(135deg, #f8fbff 0%, #eef5ff 47%, #f8fafc 100%);
}
body.pro-polished-ui header {
  backdrop-filter: blur(18px);
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: 0 12px 35px rgba(15,23,42,0.08);
}
body.pro-polished-ui .main-nav,
body.pro-polished-ui .panel,
body.pro-polished-ui .task-card,
body.pro-polished-ui .kpi,
body.pro-polished-ui .dialog-card {
  border: 1px solid var(--pro-border);
  box-shadow: var(--pro-shadow);
}
body.pro-polished-ui .panel,
body.pro-polished-ui .task-card,
body.pro-polished-ui .kpi {
  border-radius: var(--pro-radius);
  background: var(--pro-surface);
}
.pro-product-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-inline-start: .55rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  color: #0c66e4;
  background: rgba(12,102,228,0.10);
  font-weight: 800;
  font-size: .78rem;
}
.pro-view-content {
  animation: proFadeUp .24s ease-out;
}
@keyframes proFadeUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

/* Full-size working dialogs */
dialog.professional-work-dialog::backdrop,
dialog::backdrop { background: rgba(15,23,42,.42); backdrop-filter: blur(6px); }
dialog.professional-work-dialog[open] {
  padding: 0;
}
dialog.professional-work-dialog .professional-work-card,
dialog .task-detail-card {
  width: min(1180px, calc(100vw - 28px));
  max-width: min(1180px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: auto;
  border-radius: 26px;
}
#create-dialog .professional-create-flow {
  width: min(1120px, calc(100vw - 28px));
  max-width: min(1120px, calc(100vw - 28px));
}
#create-dialog .dialog-head {
  position: sticky;
  top: 0;
  z-index: 12;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(241,247,255,.96));
  border-bottom: 1px solid rgba(12,102,228,.10);
  padding-bottom: .9rem;
}
#create-dialog .dialog-actions,
#task-detail-dialog .dialog-head {
  position: sticky;
  bottom: 0;
  z-index: 12;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(12,102,228,.10);
}
#task-detail-dialog .dialog-head { top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid rgba(12,102,228,.10); }

.pro-create-guide {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
  margin: .75rem 0 1rem;
}
.pro-create-guide button {
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'num title' 'num hint';
  gap: .05rem .55rem;
  align-items: center;
  text-align: start;
  border: 1px solid rgba(12,102,228,.13);
  background: #fff;
  color: #172033;
  border-radius: 18px;
  padding: .7rem .75rem;
  min-height: 70px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pro-create-guide button:hover, .pro-create-guide button.active {
  transform: translateY(-1px);
  border-color: rgba(12,102,228,.45);
  box-shadow: 0 12px 28px rgba(12,102,228,.12);
}
.pro-create-guide span { grid-area: num; width: 2.15rem; height: 2.15rem; border-radius: 50%; display: grid; place-items: center; background: #e8f1ff; color: #0c66e4; font-weight: 900; }
.pro-create-guide b { grid-area: title; }
.pro-create-guide small { grid-area: hint; color: #64748b; }
.pro-create-principle {
  border-radius: 16px;
  padding: .7rem .85rem;
  background: linear-gradient(135deg, rgba(20,184,166,.12), rgba(12,102,228,.09));
  color: #334155;
  font-weight: 700;
  margin-bottom: 1rem;
}
.professional-create-flow .board-section-title {
  background: #f8fbff;
  border: 1px dashed rgba(12,102,228,.20);
  border-radius: 16px;
  padding: .75rem .9rem;
}
.professional-create-flow input,
.professional-create-flow select,
.professional-create-flow textarea,
dialog .dialog-card input,
dialog .dialog-card select,
dialog .dialog-card textarea {
  border-radius: 14px;
}

/* Dashboard widgets can expand to a full working view */
.pro-dashboard-widget {
  position: relative;
  min-height: 150px;
  overflow: hidden;
}
.pro-dashboard-widget:hover .pro-widget-max,
.pro-dashboard-widget:focus-within .pro-widget-max {
  opacity: 1;
  transform: translateY(0);
}
.pro-widget-max {
  position: absolute;
  top: .65rem;
  inset-inline-end: .65rem;
  z-index: 5;
  border: 0;
  border-radius: 12px;
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(12,102,228,.12);
  color: #0c66e4;
  cursor: pointer;
  font-size: 1rem;
  opacity: .35;
  transform: translateY(-2px);
  transition: all .15s ease;
}
.pro-widget-max:hover { background: #0c66e4; color: white; }
.pro-widget-focus {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(9px);
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 18px;
}
.pro-widget-focus-head {
  width: min(1280px, 100%);
  margin: 0 auto .8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-radius: 20px;
  background: rgba(255,255,255,.95);
  padding: .8rem 1rem;
  box-shadow: var(--pro-shadow);
}
.pro-widget-focus-head b { display:block; font-size:1.1rem; }
.pro-widget-focus-head small { color:#64748b; }
.pro-widget-focus-body {
  width: min(1280px, 100%);
  min-height: 0;
  margin: 0 auto;
  overflow: auto;
  border-radius: 28px;
  background: var(--pro-surface-strong);
  box-shadow: var(--pro-shadow-strong);
  padding: 1.2rem;
}
.pro-widget-focus-body .dashboard-widget {
  box-shadow: none;
  border: 0;
  min-height: calc(100dvh - 155px);
  font-size: 1.05rem;
}
.pro-widget-focus-body .metric-widget strong,
.pro-widget-focus-body .large-number { font-size: clamp(3rem, 11vw, 8rem); }
.pro-widget-focus-body .dashboard-task-row,
.pro-widget-focus-body .dashboard-message-row { padding: 1rem; font-size: 1rem; }
body.pro-focus-open { overflow: hidden; }

/* Task detail fast lane */
.pro-workflow-panel {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,246,255,.93));
  border: 1px solid rgba(12,102,228,.18) !important;
}
.pro-workflow-title {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:.8rem;
}
.pro-workflow-title h3 { margin: 0 0 .25rem; }
.pro-workflow-title p { margin: 0; color:#64748b; }
.pro-stage-badge {
  padding: .35rem .7rem;
  border-radius: 999px;
  background: #0c66e4;
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
}
.pro-task-stepper {
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:.5rem;
  margin:.8rem 0 1rem;
}
.pro-task-stepper span {
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(148,163,184,.25);
  padding:.65rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-height:64px;
}
.pro-task-stepper span.active { border-color:#0c66e4; background:#eff6ff; color:#0c4a9a; box-shadow:0 8px 22px rgba(12,102,228,.12); }
.pro-task-stepper span.done { border-color:#16a34a; background:#ecfdf5; color:#166534; }
.pro-task-stepper small { color:#64748b; font-weight:600; }
.pro-flow-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem; }
.pro-flow-actions .btn[disabled] { opacity:.45; cursor:not-allowed; filter:grayscale(.3); }
.pro-flow-customizer details {
  border-radius:18px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(12,102,228,.12);
  padding:.75rem;
}
.pro-flow-customizer summary { cursor:pointer; font-weight:900; color:#0f172a; }
.pro-flow-grid {
  display:grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap:.65rem;
  margin-top:.8rem;
  align-items:end;
}
.pro-flow-grid label { display:flex; flex-direction:column; gap:.28rem; font-weight:800; color:#334155; }
.pro-flow-grid select, .pro-flow-grid input { width:100%; border-radius:14px; }

/* Cleaner cards and working area */
.task-card.collaborative-card,
.ready-dashboard-card,
.command-card {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.task-card.collaborative-card:hover,
.ready-dashboard-card:hover,
.command-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(15,23,42,.14);
}
.view-actions .btn, .header-actions .btn { border-radius: 14px; }

@media (max-width: 900px) {
  .pro-create-guide { grid-template-columns: 1fr 1fr; }
  .pro-task-stepper { grid-template-columns: 1fr 1fr; }
  .pro-flow-grid { grid-template-columns: 1fr; }
  dialog.professional-work-dialog .professional-work-card,
  dialog .task-detail-card,
  #create-dialog .professional-create-flow {
    width: calc(100vw - 10px);
    max-width: calc(100vw - 10px);
    max-height: calc(100dvh - 10px);
    border-radius: 18px;
  }
  .pro-widget-focus { padding: 8px; }
  .pro-widget-focus-body .dashboard-widget { min-height: calc(100dvh - 120px); }
}


/* v1.19.7 — clear full-size task/company work boards */
#logo-dialog,
#create-dialog,
#entity-dialog,
#task-detail-dialog,
dialog.full-work-board {
  width: min(1280px, calc(100vw - 28px));
  max-width: min(1280px, calc(100vw - 28px));
  height: calc(100dvh - 28px);
  max-height: calc(100dvh - 28px);
  margin: auto;
  overflow: hidden;
  padding: 0;
}
#create-dialog .dialog-card,
#entity-dialog .dialog-card,
#task-detail-dialog .dialog-card,
dialog.full-work-board .dialog-card {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 26px;
}
#create-dialog .dialog-head,
#entity-dialog .dialog-head,
#task-detail-dialog .dialog-head,
dialog.full-work-board .dialog-head {
  position: sticky;
  top: 0;
  flex: 0 0 auto;
  padding: 18px 22px 14px;
  margin: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(242,248,255,.98));
  border-bottom: 1px solid rgba(12,102,228,.12);
  z-index: 20;
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
}
#create-dialog .create-mode-row,
#create-dialog .pro-create-guide,
#create-dialog .pro-create-principle {
  flex: 0 0 auto;
  margin-inline: 22px;
}
#create-dialog .create-mode-row { margin-top: 14px; margin-bottom: 12px; }
#create-dialog .pro-create-guide { margin-top: 0; }
#create-dialog .pro-create-principle { margin-bottom: 12px; }
#create-dialog .create-grid,
#entity-dialog #entity-fields,
#task-detail-dialog #task-detail-body,
dialog.full-work-board .work-board-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px 22px 96px;
  margin: 0;
  scrollbar-gutter: stable;
}
#create-dialog .dialog-actions,
#entity-dialog .dialog-actions,
dialog.full-work-board .dialog-actions {
  position: sticky;
  bottom: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 22px 18px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(12,102,228,.12);
  box-shadow: 0 -12px 30px rgba(15,23,42,.06);
  z-index: 20;
}
#task-detail-dialog .dialog-head { bottom: auto; }
#task-detail-dialog #task-detail-body { padding-bottom: 26px; }
#create-dialog .form-grid,
#entity-dialog .form-grid {
  align-items: start;
}
#create-dialog .field,
#entity-dialog .field {
  min-width: 0;
}
#create-dialog input,
#create-dialog select,
#create-dialog textarea,
#entity-dialog input,
#entity-dialog select,
#entity-dialog textarea {
  min-height: 46px;
  font-size: 15px;
}
#create-dialog textarea,
#entity-dialog textarea {
  min-height: 110px;
  resize: vertical;
}
#create-dialog .board-section-title,
#entity-dialog .setup-wizard-field,
#entity-dialog .department-setup-panel {
  border-radius: 18px;
}
.full-board-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0f766e;
  background: rgba(20,184,166,.12);
  border: 1px solid rgba(20,184,166,.25);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  margin-inline-start: 8px;
}
@media (min-width: 1100px) {
  #create-dialog .create-grid,
  #entity-dialog #entity-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 14px;
  }
  #create-dialog .field.full,
  #entity-dialog .field.full { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  #create-dialog,
  #entity-dialog,
  #task-detail-dialog,
  dialog.full-work-board {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
  }
  #create-dialog .dialog-card,
  #entity-dialog .dialog-card,
  #task-detail-dialog .dialog-card,
  dialog.full-work-board .dialog-card {
    border-radius: 0;
  }
  #create-dialog .dialog-head,
  #entity-dialog .dialog-head,
  #task-detail-dialog .dialog-head,
  #create-dialog .dialog-actions,
  #entity-dialog .dialog-actions {
    padding-inline: 14px;
  }
  #create-dialog .create-mode-row,
  #create-dialog .pro-create-guide,
  #create-dialog .pro-create-principle { margin-inline: 14px; }
  #create-dialog .create-grid,
  #entity-dialog #entity-fields,
  #task-detail-dialog #task-detail-body {
    padding: 14px 14px 92px;
  }
}

/* ==========================================================================
   v1.20.0 — Friendly, editable interface design system
   ========================================================================== */
:root {
  --accent: var(--teal, #0c66e4);
  --accent-strong: var(--teal-dark, #0757c8);
  --surface-radius: 18px;
  --control-radius: 12px;
  --sidebar-width: 250px;
  --header-height: 76px;
  --app-font-family: Cairo, system-ui, sans-serif;
  --base-font-size: 14px;
  --heading-font-size: 25px;
  --option-font-size: 13px;
  --heading-color: var(--text);
  --option-color: var(--text);
  --surface-hover: color-mix(in srgb, var(--accent) 7%, var(--panel));
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 34%, var(--line));
  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
  --shadow-shell: 0 14px 40px rgba(15, 23, 42, .08);
  --shadow-hover: 0 18px 44px rgba(15, 23, 42, .13);
}

html[data-theme="light"] {
  --bg: #f3f6fb;
  --panel: #ffffff;
  --panel2: #f7f9fc;
  --line: #dfe6ef;
  --text: #162033;
  --muted: #66738a;
  --green: #168a57;
  --red: #d43c50;
  --amber: #b86b08;
}

html[data-theme="dark"] {
  --bg: #101725;
  --panel: #182235;
  --panel2: #202d43;
  --line: #334158;
  --text: #edf3fb;
  --muted: #a9b5c8;
  --shadow-shell: 0 16px 44px rgba(0, 0, 0, .28);
  --shadow-hover: 0 20px 52px rgba(0, 0, 0, .38);
}

html, body { font-family: var(--app-font-family); font-size: var(--base-font-size); }
body { background:
  radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 32rem),
  var(--bg); color: var(--text); }
body[data-motion="reduced"] *, body[data-motion="reduced"] *::before, body[data-motion="reduced"] *::after {
  scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Consistent SVG icon language */
.ui-icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; display: inline-block; vertical-align: -.18em; }
.ui-icon--button { margin-inline-end: .5rem; }
.ui-icon--display { width: 1.55em; height: 1.55em; }
.icon-btn .ui-icon { width: 1.25rem; height: 1.25rem; margin: 0; }
body[data-icon-style="soft"] .nav-icon,
body[data-icon-style="soft"] .setup-card > span,
body[data-icon-style="soft"] .command-card > span,
body[data-icon-style="soft"] .company-icon {
  background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent);
}
body[data-icon-style="solid"] .nav-icon,
body[data-icon-style="solid"] .setup-card > span,
body[data-icon-style="solid"] .command-card > span,
body[data-icon-style="solid"] .company-icon {
  background: var(--accent); color: white; border-color: transparent;
}

/* Login */
.login-shell { background:
  radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 28rem),
  linear-gradient(145deg, #111b2d, #1b2942 60%, #101725); }
.login-card { width: min(460px, 100%); padding: clamp(24px, 5vw, 38px); border-radius: calc(var(--surface-radius) + 8px); gap: 11px; box-shadow: 0 28px 78px rgba(0, 0, 0, .38); }
.login-card .brand { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 3px; border-radius: 22px; background: linear-gradient(145deg, var(--accent), var(--accent-strong)); color: white; box-shadow: 0 16px 30px color-mix(in srgb, var(--accent) 30%, transparent); }
.login-card .brand .ui-icon { width: 35px; height: 35px; }
.login-card h1 { color: var(--heading-color); font-size: clamp(1.55rem, 4vw, 2rem); }
.login-card > p { font-size: .94rem; }
.login-card label { color: var(--text); font-weight: 700; }

/* Application shell */
header {
  min-height: var(--header-height); padding: calc(10px + var(--safe-top)) clamp(16px, 3vw, 34px) 10px;
  background: color-mix(in srgb, var(--panel) 91%, transparent); color: var(--text); border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(15, 23, 42, .07); backdrop-filter: blur(18px) saturate(150%);
}
.brand-line { display: grid; grid-template-columns: auto auto; column-gap: 9px; align-items: center; min-width: 0; }
.brand-line h1 { display: inline-flex; align-items: center; gap: 9px; font-size: 1.06rem; color: var(--heading-color); }
.brand-line h1 .ui-icon { color: var(--accent); width: 1.35rem; height: 1.35rem; }
.brand-line > #user-line, .brand-line > .live-line { grid-column: 1 / -1; }
.brand-line > #user-line { color: var(--muted); margin-top: 2px; }
.live-line { color: var(--muted); }
.connection-badge { border: 1px solid var(--line); background: var(--panel2); color: var(--muted); }
.header-actions { gap: 7px; }
.header-actions .btn { min-height: 39px; }
.header-actions .notification-button, .header-actions #quick-theme-btn, .hdr-more > summary { width: 40px; padding: 0; display: grid; place-items: center; }
.version-chip { background: var(--panel2); color: var(--muted); border-color: var(--line); }
.pro-product-tag { display: none !important; }
.hdr-more-menu { background: var(--panel); border: 1px solid var(--line); border-radius: var(--control-radius); box-shadow: var(--shadow-shell); padding: 7px; }

.app-layout { max-width: 1680px; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); gap: 22px; padding: 22px clamp(16px, 2.5vw, 34px) calc(34px + var(--safe-bottom)); }
body[data-nav-mode="compact"] { --sidebar-width: 86px; }
body[data-nav-mode="compact"] .main-nav .nav-btn b,
body[data-nav-mode="compact"] .main-nav .nav-group-label span:first-child { display: none; }
body[data-nav-mode="compact"] .main-nav .nav-btn { justify-content: center; padding-inline: 7px; }
body[data-nav-mode="compact"] .main-nav .nav-icon { margin: 0; }

.main-nav { top: calc(var(--header-height) + 17px); padding: 12px; gap: 7px; background: color-mix(in srgb, var(--panel) 96%, transparent); border-radius: var(--surface-radius); box-shadow: var(--shadow-shell); backdrop-filter: blur(10px); }
.main-nav .nav-group { display: grid; gap: 5px; }
.main-nav .nav-group + .nav-group { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 5px; }
.main-nav .nav-group-label { color: var(--muted); font-size: .73rem; font-weight: 800; letter-spacing: .02em; padding: 5px 9px; }
.main-nav .nav-group-toggle { background: transparent; border: 0; width: 100%; display: flex; justify-content: space-between; color: var(--muted); cursor: pointer; }
.main-nav .nav-btn { min-height: 47px; padding: 9px 10px; border-radius: calc(var(--control-radius) + 1px); color: var(--text); gap: 10px; position: relative; overflow: hidden; }
.main-nav .nav-btn::before { content: ""; position: absolute; inset-block: 9px; inset-inline-start: 0; width: 3px; border-radius: 99px; background: transparent; }
.main-nav .nav-btn:hover { background: var(--surface-hover); }
.main-nav .nav-btn.active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); }
.main-nav .nav-btn.active::before { background: var(--accent); }
.nav-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--muted); transition: .18s ease; }
.nav-btn.active .nav-icon { color: var(--accent); }
.nav-icon .ui-icon { width: 18px; height: 18px; }

main { min-width: 0; }
.global-search-wrap { position: sticky; top: calc(var(--header-height) + 8px); z-index: 12; margin: -5px 0 17px; }
#global-search { width: 100%; height: 48px; padding-inline-start: 45px; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 9px 26px rgba(15, 23, 42, .07); backdrop-filter: blur(16px); }
.global-search-wrap::before { content: ""; position: absolute; inset-inline-start: 15px; top: 14px; width: 20px; height: 20px; pointer-events: none; background: currentColor; color: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat; }
.global-search-results { border-radius: var(--surface-radius); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-hover); margin-top: 7px; overflow: hidden; }

.hero-row { align-items: flex-end; margin: 6px 0 19px; gap: 16px; }
.hero-row h2 { color: var(--heading-color); font-size: var(--heading-font-size); line-height: 1.25; }
.hero-row p { font-size: .92rem; max-width: 72ch; line-height: 1.7; }
.view-actions .btn { white-space: nowrap; }

/* Components */
.panel, .task-card, .company-card, .template-card, .directory-card, .account-card, .dialog-card, .login-card {
  border-radius: var(--surface-radius); border-color: var(--line); box-shadow: var(--shadow-shell); background: var(--panel);
}
.section-panel { padding: clamp(15px, 2vw, 22px); }
.section-title { margin-bottom: 15px; }
.section-title h3, .detail-section h3 { color: var(--heading-color); }

.btn { min-height: 42px; border-radius: var(--control-radius); padding: 9px 14px; font-size: var(--option-font-size); color: var(--option-color); display: inline-flex; align-items: center; justify-content: center; gap: 0; transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); filter: none; }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn.primary { color: white; background: linear-gradient(145deg, var(--accent), var(--accent-strong)); box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 23%, transparent); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 11px 24px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn.ghost { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--accent-border); color: var(--accent); }
.btn.danger { background: color-mix(in srgb, var(--red) 90%, #000); color: white; }
.btn.small { min-height: 35px; border-radius: 10px; }
body[data-button-style="soft"] .btn.primary { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); box-shadow: none; }
.icon-btn { width: 40px; height: 40px; min-width: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); }

input, select, textarea { background: var(--panel2); color: var(--text); border-color: var(--line); border-radius: var(--control-radius); padding: 10px 12px; min-height: 44px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--focus-ring); background: var(--panel); }
.field { gap: 7px; }
.field label, .field > span { font-size: .82rem; color: var(--text); font-weight: 750; }
.field small { color: var(--muted); line-height: 1.55; }
label.toggle-line { border: 1px solid var(--line); background: var(--panel2); border-radius: var(--control-radius); padding: 10px 12px; }

.kpis { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 12px; }
.kpi { text-align: start; padding: 16px; border-radius: var(--surface-radius); box-shadow: var(--shadow-shell); position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; inset-inline-end: -22px; inset-block-start: -28px; width: 80px; height: 80px; border-radius: 50%; background: var(--accent-soft); }
.kpi strong { color: var(--heading-color); font-size: clamp(1.55rem, 3vw, 2rem); }
.kpi span { font-size: .78rem; }

.task-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.task-card { padding: 17px; box-shadow: 0 8px 26px rgba(15, 23, 42, .065); border-inline-start: 4px solid var(--accent-border); }
.task-card:hover, .company-card:hover, .template-card:hover, .directory-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--accent-border); }
.task-card h3 { font-size: 1.05rem; line-height: 1.45; }
.task-description { background: var(--panel2); border: 1px solid var(--line); line-height: 1.7; }
.progress { height: 7px; background: color-mix(in srgb, var(--line) 80%, transparent); }
.progress i { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--green))); }
.priority, .status-pill { border: 1px solid currentColor; background: transparent !important; }
.check { border: 1px solid var(--line); background: var(--panel2); border-radius: var(--control-radius); }

.command-card, .setup-card, .access-mode-card { border-radius: var(--surface-radius); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 7px 20px rgba(15, 23, 42, .055); }
.command-card:hover, .setup-card:hover, .access-mode-card:hover { transform: translateY(-2px); border-color: var(--accent-border); box-shadow: var(--shadow-hover); }
.command-card > span, .setup-card > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--accent); background: var(--accent-soft); }
.command-card > span .ui-icon, .setup-card > span .ui-icon { width: 22px; height: 22px; }
.command-card small, .setup-card small { line-height: 1.55; }

.list-row, .settings-row { border: 1px solid var(--line); background: var(--panel2); border-radius: var(--control-radius); }
.list-row:hover, .settings-row:hover { background: var(--surface-hover); border-color: var(--accent-border); }
.avatar { background: linear-gradient(145deg, var(--accent), var(--accent-strong)); color: white; }
.company-icon { border: 1px solid var(--accent-border); color: var(--accent); background: var(--accent-soft); }

.table-wrap { border: 1px solid var(--line); border-radius: var(--surface-radius); overflow: auto; }
table { border-collapse: separate; border-spacing: 0; }
thead th { position: sticky; top: 0; z-index: 2; background: var(--panel2); color: var(--muted); font-size: .78rem; font-weight: 850; }
tbody tr:hover td { background: var(--surface-hover); }
th, td { border-bottom: 1px solid var(--line); padding: 11px 12px; }

/* Dialogs as clear workspaces */
dialog::backdrop { background: rgba(8, 15, 28, .64); backdrop-filter: blur(4px); }
dialog .dialog-card { border: 1px solid var(--line); }
.dialog-head { padding-bottom: 13px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 96%, transparent); }
.dialog-head h3 { display: inline-flex; align-items: center; gap: 8px; color: var(--heading-color); }
.dialog-actions { padding-top: 13px; border-top: 1px solid var(--line); }
.full-work-board .full-work-card, .professional-work-dialog .professional-work-card { border-radius: 22px !important; }
.board-section-title { border-inline-start: 4px solid var(--accent) !important; background: var(--accent-soft) !important; }
.create-step { border: 1px solid var(--line); background: var(--panel2); }
.create-step.active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); }

/* Friendly empty, help and warning states */
.empty { border-radius: var(--surface-radius); background: var(--panel); border-color: var(--line); padding: clamp(30px, 7vw, 62px); }
.empty h3 { color: var(--heading-color); }
.warning-box, .success-box, .resource-visible-note, .startup-help, .server-help { border-radius: var(--control-radius); line-height: 1.65; }
.offline-banner { display: flex; align-items: center; gap: 8px; }

/* Appearance studio */
.customizer-card { text-align: start; grid-column: 1 / -1; padding: 0 !important; overflow: hidden; }
.customizer-head { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 22px; background: linear-gradient(135deg, var(--accent-soft), var(--panel)); border-bottom: 1px solid var(--line); }
.customizer-head h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 5px; font-size: 1.25rem; }
.customizer-head p { margin: 0; color: var(--muted); max-width: 74ch; }
.customizer-head-icon { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; color: white; background: linear-gradient(145deg, var(--accent), var(--accent-strong)); box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 28%, transparent); }
.customizer-head-icon .ui-icon { width: 28px; height: 28px; }
.customizer-body { padding: 22px; display: grid; gap: 18px; }
.customizer-section { border: 1px solid var(--line); border-radius: var(--surface-radius); padding: 16px; background: var(--panel); }
.customizer-section > h4 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.customizer-section > p { margin: 0 0 14px; color: var(--muted); }
.appearance-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: 12px; align-items: end; }
.range-field { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.range-field input { grid-column: 1 / -1; }
.range-value { min-width: 42px; text-align: center; border: 1px solid var(--line); border-radius: 9px; padding: 3px 7px; color: var(--accent); font-weight: 800; }
.color-options { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.color-options button { width: 34px; height: 34px; border-radius: 11px; border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--line); background: var(--swatch); cursor: pointer; }
.color-options button.selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--swatch) 35%, transparent); transform: scale(1.08); }
.customizer-preview { min-height: 190px; border: 1px dashed var(--accent-border); border-radius: var(--surface-radius); padding: 17px; background: linear-gradient(145deg, var(--panel2), var(--panel)); display: grid; grid-template-columns: minmax(180px, .45fr) minmax(260px, 1fr); gap: 14px; align-items: stretch; }
.preview-sidebar { border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: grid; align-content: start; gap: 6px; background: var(--panel); }
.preview-nav-item { display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: 10px; }
.preview-nav-item.active { color: var(--accent); background: var(--accent-soft); }
.preview-content-card { border: 1px solid var(--line); border-radius: 14px; padding: 15px; background: var(--panel); display: grid; align-content: start; gap: 9px; }
.icon-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.icon-edit-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 13px; padding: 9px; background: var(--panel2); }
.icon-edit-preview { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.icon-edit-row select { min-width: 0; width: 100%; }
.label-editor > summary { width: 100%; justify-content: flex-start; }
.label-editor[open] > summary { margin-bottom: 14px; }
.label-edit-group { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 13px; }
.label-edit-group h4 { margin: 0 0 10px; color: var(--heading-color); }
.label-edit-group .field { min-width: 0; }
.customizer-actions { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; padding: 13px 22px; background: color-mix(in srgb, var(--panel) 94%, transparent); border-top: 1px solid var(--line); backdrop-filter: blur(16px); }

/* Mobile: clear full-screen work areas and reachable navigation */
@media (max-width: 900px) {
  :root { --header-height: 68px; --surface-radius: 16px; }
  header { align-items: flex-start; }
  .brand-line h1 { font-size: .98rem; }
  .header-actions { justify-content: flex-end; }
  .app-layout { display: block; padding: 14px 12px calc(92px + var(--safe-bottom)); }
  .main-nav { position: fixed; inset-inline: 9px; bottom: calc(8px + var(--safe-bottom)); top: auto; z-index: 30; display: flex; flex-direction: row; overflow-x: auto; gap: 5px; padding: 7px; border-radius: 18px; box-shadow: 0 16px 46px rgba(15, 23, 42, .22); }
  .main-nav .nav-group { display: contents; }
  .main-nav .nav-group-label { display: none; }
  .main-nav .nav-group-items { display: contents; }
  .main-nav .nav-btn { flex: 1 0 72px; min-height: 59px; display: grid; place-items: center; align-content: center; gap: 2px; padding: 5px 7px; text-align: center; }
  .main-nav .nav-btn::before { inset-inline: 16px; inset-block: auto 0; width: auto; height: 3px; }
  .main-nav .nav-btn b { display: block !important; font-size: .67rem; max-width: 74px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-icon { width: 30px; height: 28px; }
  .global-search-wrap { top: calc(var(--header-height) + 4px); }
  .hero-row { align-items: stretch; flex-direction: column; }
  .view-actions { width: 100%; }
  .view-actions .btn { flex: 1 1 auto; }
  .customizer-head { align-items: flex-start; }
  .customizer-preview { grid-template-columns: 1fr; }
  .customizer-actions .btn { flex: 1 1 140px; }
}

@media (max-width: 620px) {
  header { padding-inline: 11px; }
  .header-actions .version-chip, #refresh-btn, #logout-btn { display: none; }
  .compact-create-btn { min-width: 96px; }
  .hero-row h2 { font-size: clamp(1.35rem, 6vw, 1.7rem); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-grid, .company-grid, .template-grid, .account-grid { grid-template-columns: 1fr; }
  .appearance-toolbar, .icon-edit-grid { grid-template-columns: 1fr; }
  .customizer-body { padding: 14px; }
  .customizer-head { padding: 17px; }
  .customizer-head-icon { width: 46px; height: 46px; }
  dialog, .wide-dialog { width: 100vw !important; max-width: 100vw !important; max-height: 100dvh !important; margin: 0; }
  dialog .dialog-card { border-radius: 0 !important; min-height: 100dvh; max-height: 100dvh; }
}

@media print {
  header, .main-nav, .global-search-wrap, .view-actions, .btn, .icon-btn { display: none !important; }
  .app-layout { display: block; padding: 0; }
  .panel, .task-card { box-shadow: none; break-inside: avoid; }
}

/* v1.21 workflow simplification ------------------------------------------------ */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.btn.success{background:#16a34a;color:#fff}.btn.warning{background:#d97706;color:#fff}
.create-wizard-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.create-wizard-steps .create-step{appearance:none;justify-content:center;cursor:pointer;border-radius:12px;padding:9px 10px;background:var(--panel2);color:var(--muted)}
.create-wizard-steps .create-step span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--bg);border:1px solid var(--line);font-weight:800}
.create-wizard-steps .create-step.active{background:color-mix(in srgb,var(--teal) 14%,var(--panel2));color:var(--text);border-color:color-mix(in srgb,var(--teal) 48%,var(--line))}
.create-wizard-steps .create-step.active span,.create-wizard-steps .create-step.complete span{background:var(--teal);color:var(--on-accent,#fff);border-color:transparent}
.create-wizard-body{min-height:440px}.create-stage{animation:workflowFade .16s ease}.create-stage[hidden]{display:none!important}
.stage-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--teal) 12%,var(--panel2)),var(--panel2));border:1px solid var(--line)}
.stage-heading div{display:grid;gap:4px}.stage-heading b{font-size:17px}.stage-heading small,.stage-heading>span{color:var(--muted);font-size:11px}.stage-heading>span{white-space:nowrap}
.create-people-details{border:1px solid var(--line);border-radius:14px;background:var(--panel2);padding:12px}.create-people-details summary{cursor:pointer;font-weight:700;margin-bottom:8px}
.switch-field{display:flex!important;align-items:center;gap:9px;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}.switch-field input{width:20px;height:20px;min-height:auto;accent-color:var(--teal)}
.create-wizard-actions{justify-content:space-between!important}.wizard-action-group{display:flex;gap:8px}
.task-action-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;margin:12px 0;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.task-context-action{display:inline-flex;align-items:center;gap:7px}.task-context-action .ui-icon{width:17px;height:17px}
.workflow-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,1fr) auto;gap:12px;align-items:center}.summary-state{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.task-state-chip,.revision-chip{display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);font-size:11px;font-weight:800}.revision-chip{color:var(--muted)}
.status-draft{color:#94a3b8}.status-assigned,.status-accepted{color:#38bdf8}.status-in_progress{color:#2dd4bf}.status-blocked{color:#f59e0b}.status-waiting_approval{color:#c084fc}.status-completed,.status-verified{color:#4ade80}.status-cancelled{color:#f87171}
.task-detail-tabs{position:sticky;top:58px;z-index:3;display:flex;gap:6px;overflow-x:auto;padding:8px;margin:10px 0 14px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(10px);scrollbar-width:none}.task-detail-tabs::-webkit-scrollbar{display:none}
.task-detail-tab{border:0;border-radius:9px;background:transparent;color:var(--muted);padding:8px 11px;white-space:nowrap;cursor:pointer;font-weight:700}.task-detail-tab.active{background:var(--teal);color:var(--on-accent,#fff)}
.task-detail-panel[hidden]{display:none!important}.task-detail-panel.active{animation:workflowFade .14s ease}.delivery-criteria{border-inline-start:4px solid var(--teal)}
.optional-tag{display:inline-flex;margin-inline-start:6px;padding:2px 6px;border-radius:999px;background:var(--panel2);color:var(--muted);font-size:10px;font-style:normal}
.activity-list,.revision-list{display:grid;gap:8px}.activity-row,.revision-card{display:grid;gap:6px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}.activity-row>div,.revision-card>div{display:flex;justify-content:space-between;gap:10px}.activity-row small,.revision-card small{color:var(--muted);font-size:10px}.activity-row p,.revision-card p{margin:0;line-height:1.7;color:var(--muted)}
@keyframes workflowFade{from{opacity:.45;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:760px){.create-wizard-steps{grid-template-columns:repeat(2,1fr)}.create-wizard-body{min-height:0}.stage-heading{flex-direction:column}.workflow-summary{grid-template-columns:1fr}.task-action-bar .btn{flex:1;min-width:145px}.task-detail-tabs{top:0}.create-wizard-actions{align-items:stretch;flex-direction:column}.wizard-action-group{display:grid;grid-template-columns:1fr 1fr}.wizard-action-group .btn:last-child{grid-column:1/-1}}

/* v1.22 HR reliability retained in v1.23 ----------------------------------- */
.time-context{display:grid;gap:6px;border-inline-start:4px solid var(--teal)}
.time-context>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.time-context small{color:var(--muted)}
.status-pill,.stale-badge,.ok-badge{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800}
.status-pill{background:color-mix(in srgb,var(--teal) 14%,var(--panel2));color:var(--text);border:1px solid color-mix(in srgb,var(--teal) 35%,var(--line))}
.stale-badge{background:color-mix(in srgb,#f59e0b 18%,var(--panel2));color:#b45309;border:1px solid color-mix(in srgb,#f59e0b 42%,var(--line))}
.ok-badge{background:color-mix(in srgb,#16a34a 15%,var(--panel2));color:#15803d;border:1px solid color-mix(in srgb,#16a34a 35%,var(--line))}
.check-line{display:flex;align-items:center;gap:8px;grid-column:1/-1;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.check-line input{width:18px;height:18px;min-height:auto;accent-color:var(--teal)}
@media(max-width:760px){.time-context>div{align-items:flex-start;flex-direction:column}.advanced-table [data-att-history]{white-space:nowrap}}


/* v1.23 paged list controls */
.pagination-footer{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:16px 0;padding:12px 16px;border:1px solid var(--line);border-radius:var(--surface-radius,16px);background:var(--panel);color:var(--muted)}
.pagination-footer span{font-size:.9rem;font-weight:700}
@media (max-width:640px){.pagination-footer{position:sticky;bottom:8px;z-index:8;margin-inline:6px;box-shadow:0 8px 24px rgba(15,23,42,.14)}.pagination-footer .btn{min-height:44px;flex:1}}

/* v1.23.1 usability and HR access hotfix ----------------------------------- */
:root{scrollbar-color:color-mix(in srgb,var(--teal) 45%,var(--line)) var(--panel2);scrollbar-width:thin}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:var(--panel2);border-radius:999px}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--teal) 38%,var(--line));border:3px solid var(--panel2);border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--teal) 62%,var(--line))}

#view-content,.content,.main-content,.task-view-container{min-width:0}
.board-scroll-shell{min-width:0;max-width:100%;display:grid;gap:8px}
.board-scroll-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--muted);font-size:11px}
.board-scroll-viewport{max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-gutter:stable both-edges;padding-bottom:7px}
.board-scroll-viewport>.kanban-board,.board-scroll-viewport>.wl-board{width:max-content;min-width:100%;overflow:visible}
.kanban-board,.wl-board,.table-wrap,.tabs,.task-detail-tabs,.assignee-picker{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--teal) 45%,var(--line)) var(--panel2)}
.task-detail-tabs::-webkit-scrollbar,.main-nav::-webkit-scrollbar{display:block!important;height:8px}
.task-detail-tabs{scrollbar-width:thin!important;scrollbar-gutter:stable}
.main-nav{scrollbar-width:thin!important;scrollbar-gutter:stable}
.kanban-column{max-height:calc(100dvh - 250px);min-height:320px;display:flex;flex-direction:column}
.kanban-cards{overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;min-height:0;padding-inline-end:3px}
.table-wrap{max-width:100%;max-height:72dvh;overflow:auto;scrollbar-gutter:stable both-edges}
.assignee-picker{max-height:min(46dvh,440px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}

/* Selected people remain readable without a full dark block. */
.assignee-option.selected{outline:2px solid color-mix(in srgb,var(--teal) 58%,transparent)!important;background:color-mix(in srgb,var(--teal) 9%,var(--panel))!important;color:var(--text)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 8%,transparent)}
.assignee-option.selected input[type="checkbox"]{accent-color:var(--teal)}
.assignee-option.selected small{color:var(--muted)!important}

/* Long dialogs keep their controls reachable. */
dialog[open]{overflow:hidden}
dialog .dialog-card,.create-card,.task-detail-card{display:flex;flex-direction:column;max-height:min(94dvh,980px);overflow:hidden}
.create-wizard-body,#task-detail-body,.dialog-scroll-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-inline-end:3px}
.dialog-actions,.create-wizard-actions{position:sticky;bottom:0;z-index:4;background:var(--panel);border-top:1px solid var(--line);padding-top:12px}

/* Approval paths are visible sequential blocks, not a hidden multi-select. */
.approval-help,.approval-create-preview,.approval-explainer{border:1px solid color-mix(in srgb,var(--teal) 32%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--teal) 7%,var(--panel2));padding:12px 14px}
.approval-help{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.approval-help span{color:var(--muted);flex:1 1 320px}.approval-help .link-btn{margin-inline-start:auto}
.approval-empty-state{color:var(--muted);line-height:1.7}
.approval-explainer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;margin-bottom:14px}.approval-explainer p{margin:.35rem 0 0;color:var(--muted);line-height:1.8}
.approval-mini-flow,.approval-flow{display:flex;align-items:stretch;gap:8px;overflow-x:auto;padding:7px 2px;scrollbar-gutter:stable}
.approval-mini-flow span{white-space:nowrap;padding:7px 10px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-weight:700}.approval-mini-flow i,.approval-arrow{display:grid;place-items:center;color:var(--teal);font-style:normal;font-size:18px}
.approval-path-preview{display:grid;gap:8px}.approval-flow.compact{margin-top:10px}
.approval-block{display:flex;align-items:center;gap:9px;min-width:190px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 3px 10px rgba(15,23,42,.04)}
.approval-block>span,.approval-block-number{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--teal);color:var(--on-accent,#fff);font-weight:900}
.approval-block>div{display:grid;gap:3px;min-width:0}.approval-block small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.approval-builder{display:grid;gap:10px;margin:14px 0}.approval-builder-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.approval-step-editor{display:grid;grid-template-columns:auto minmax(150px,1fr) minmax(190px,1.2fr) auto;gap:10px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--panel2)}
.approval-step-actions{display:flex;gap:5px;align-items:center;padding-bottom:2px}.approval-template-card{padding:13px 0;border-bottom:1px solid var(--line)}.approval-template-card:last-child{border-bottom:0}
.approval-steps{position:relative;display:grid;gap:10px}.approval-step{border-inline-start:4px solid var(--line)}.approval-step.active{border-inline-start-color:var(--teal);box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 10%,transparent)}.approval-step.approved{border-inline-start-color:#16a34a}.approval-step.rejected{border-inline-start-color:#dc2626}

/* Shift rule ranking and active settings navigation. */
.shift-rule-row{align-items:center}.priority-rank{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--teal) 12%,var(--panel2));color:var(--teal);font-weight:900}
.settings-section-nav{position:sticky;top:58px;z-index:10;margin-bottom:14px;padding:8px;background:color-mix(in srgb,var(--panel) 95%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;overflow-x:auto;scrollbar-gutter:stable}
.settings-section-nav button.active{background:var(--teal)!important;color:var(--on-accent,#fff)!important}
#settings-profile,#settings-appearance,#settings-sessions,#settings-backups{scroll-margin-top:140px}
.access-locked{border-inline-start:4px solid #d97706}.hr-report-table{max-height:66dvh}.hr-report-kpis{margin-block:12px}

@media(max-width:760px){
  .board-scroll-toolbar{align-items:flex-start;flex-direction:column}.board-scroll-toolbar .row-actions{width:100%}.board-scroll-toolbar .btn{flex:1}
  .kanban-column{max-height:calc(100dvh - 235px);min-height:280px}
  .approval-explainer{grid-template-columns:1fr}.approval-step-editor{grid-template-columns:auto 1fr}.approval-step-editor .field{grid-column:2}.approval-step-actions{grid-column:1/-1;justify-content:flex-end}
  .approval-mini-flow,.approval-flow{padding-bottom:10px}
  dialog .dialog-card,.create-card,.task-detail-card{max-height:100dvh}
  .settings-section-nav{top:0}
}

/* v1.23.2 inline approval builder ----------------------------------------- */
.create-approval-controls{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--surface-radius,14px);background:var(--panel2)}
.approval-inline-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.create-approval-builder{display:grid;gap:14px;padding:16px;border:1px solid color-mix(in srgb,var(--teal) 35%,var(--line));border-radius:var(--surface-radius,14px);background:color-mix(in srgb,var(--teal) 4%,var(--panel));box-shadow:0 12px 30px rgba(15,23,42,.08)}
.create-approval-builder.hidden{display:none!important}
.create-approval-builder>.approval-builder-head{position:sticky;top:0;z-index:2;padding-block:2px 10px;background:inherit;border-bottom:1px solid var(--line)}
.create-approval-builder>.approval-builder-head>div{display:grid;gap:3px}
.create-approval-builder>.approval-builder-head small{color:var(--muted);font-weight:400}
.approval-rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.approval-rule-grid>label{display:flex;align-items:flex-start;gap:9px;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.approval-rule-grid>label input{margin-top:3px}
.approval-rule-grid>label span{display:grid;gap:3px}
.approval-rule-grid>label small{color:var(--muted);line-height:1.5}
.approval-rule-grid>.fixed-rule{opacity:.82}
.approval-scope-note{padding:9px 11px;border-radius:10px;background:var(--panel2);color:var(--muted)}
.create-inline-approval-builder{margin:0;max-height:min(46vh,460px);overflow:auto;padding-inline-end:5px;scrollbar-gutter:stable}
#create-approval-step-list{display:grid;gap:10px}
.create-approval-step-editor{background:var(--panel)}
.inline-builder-actions{position:sticky;bottom:0;z-index:2;margin:0;padding-top:12px;background:linear-gradient(transparent,var(--panel) 25%)}
.approval-preview-rule{display:block;margin-top:10px;color:var(--muted)}
.approval-path-preview .section-title{margin-bottom:10px}
.approval-path-preview .section-title span{font-size:.82rem;color:var(--muted)}
@media(max-width:900px){.approval-rule-grid{grid-template-columns:1fr}.approval-inline-toolbar>*{flex:1 1 180px}.create-approval-builder{padding:12px}.create-inline-approval-builder{max-height:52vh}}
@media(max-width:620px){.approval-inline-toolbar{display:grid;grid-template-columns:1fr 1fr}.approval-inline-toolbar>*{width:100%}.create-approval-step-editor{grid-template-columns:auto 1fr}.create-approval-step-editor .field{grid-column:2}.create-approval-step-editor .approval-step-actions{grid-column:1/-1;justify-content:flex-end}.inline-builder-actions{display:grid;grid-template-columns:1fr}.inline-builder-actions .btn{width:100%}}

/* v1.23.3 editable help messages and HR rule controls --------------------- */
.editable-help-box,.compact-help-box,.hr-connection-help{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.editable-help-copy{min-width:0;flex:1}.editable-help-copy p{margin:.35rem 0 0;color:var(--muted);line-height:1.75}
.editable-help-actions{display:flex;gap:6px;flex:0 0 auto;opacity:.72}.editable-help-box:hover .editable-help-actions,.compact-help-box:hover .editable-help-actions,.hr-connection-help:hover .editable-help-actions{opacity:1}
.compact-help-box{margin-top:12px;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--control-radius);background:var(--panel2)}
.compact-help-box .editable-help-copy b{font-size:12px}.compact-help-box .editable-help-copy p{font-size:11px}
.help-message-settings{display:grid;gap:8px}.help-message-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;border:1px solid var(--line);border-radius:var(--control-radius);background:var(--panel2)}
.help-message-setting>div:first-child{display:grid;gap:3px}.help-message-setting small{color:var(--muted)}
.hr-rule-flow{display:flex;align-items:center;gap:8px;overflow:auto;padding:10px 12px;margin:10px 0 14px;border:1px solid var(--line);border-radius:var(--surface-radius);background:var(--panel);scrollbar-gutter:stable}
.hr-rule-flow span{white-space:nowrap;padding:7px 10px;border:1px solid color-mix(in srgb,var(--teal) 32%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--teal) 8%,var(--panel2));font-weight:700;font-size:12px}.hr-rule-flow i{color:var(--muted);font-style:normal}
.adjustment-rule-row.disabled{opacity:.62;background:color-mix(in srgb,var(--panel2) 78%,transparent)}
.approval-flow-guide{padding:10px 14px;margin-bottom:14px}.approval-flow-guide .approval-mini-flow{justify-content:center}
@media(max-width:720px){.editable-help-box,.compact-help-box,.hr-connection-help,.help-message-setting{align-items:stretch;flex-direction:column}.editable-help-actions,.help-message-setting .row-actions{width:100%;flex-wrap:wrap}.editable-help-actions .btn{flex:1}.hr-rule-flow{padding-bottom:14px}}

/* v1.23.6 — daily attendance task cards */
.attendance-task-card {
  border-inline-start: 4px solid var(--accent, #0c66e4);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #0c66e4) 7%, var(--surface, #fff)), var(--surface, #fff));
}
.attendance-task-badge,
.attendance-record-state {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #0c66e4) 12%, transparent);
  color: var(--accent-strong, var(--accent, #0c66e4));
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
.attendance-task-panel {
  border: 1px solid color-mix(in srgb, var(--accent, #0c66e4) 22%, var(--border, #d8e1ee));
  background: color-mix(in srgb, var(--accent, #0c66e4) 4%, var(--surface, #fff));
}
.attendance-task-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-block: 14px;
}
.attendance-task-grid > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border, #d8e1ee);
  border-radius: calc(var(--surface-radius, 18px) * .65);
  background: var(--surface, #fff);
}
.attendance-task-grid small { color: var(--muted, #667085); }
.attendance-task-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .attendance-task-grid { grid-template-columns: 1fr; }
  .attendance-task-actions .btn { width: 100%; }
}

/* v1.23.6 email approval workflow */
.email-approval-card .telegram-health { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; }
.email-approval-card code { direction:ltr; unicode-bidi:isolate; }
.approval-email-hint { display:inline-flex; width:max-content; margin-top:5px; padding:3px 8px; border-radius:999px; background:color-mix(in srgb, var(--teal) 10%, transparent); color:var(--teal); font-size:.78rem; font-weight:700; }

/* v1.23.6 email quick setup */
.email-channel-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0;text-align:start}
.email-channel-details span{display:flex;flex-direction:column;gap:4px;background:var(--panel2);border:1px solid var(--border);border-radius:var(--control-radius);padding:9px;min-width:0}
.email-channel-details b{font-size:10px;color:var(--muted)}
.email-channel-details code{font-size:10px;overflow-wrap:anywhere;white-space:normal}
.email-quick-setup{display:grid;gap:12px}
.email-readonly-row{display:flex;justify-content:space-between;gap:16px;align-items:center;background:var(--panel2);border:1px solid var(--border);border-radius:var(--control-radius);padding:11px 12px}
.email-readonly-row span{color:var(--muted);font-size:12px}
.email-readonly-row code,.email-readonly-row b{font-size:12px;overflow-wrap:anywhere;text-align:end}
.checkbox-line{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.email-quick-setup .field small{display:block;color:var(--muted);font-size:10px;line-height:1.6;margin-top:5px}
@media(max-width:640px){.email-channel-details{grid-template-columns:1fr}.email-readonly-row{align-items:flex-start;flex-direction:column;gap:5px}.email-readonly-row code,.email-readonly-row b{text-align:start}}

/* v1.23.6 phone web-preview chooser */
.phone-view-dialog{width:min(94vw,620px);max-width:620px;border:0;border-radius:20px;padding:0;background:transparent;color:var(--text)}
.phone-view-dialog::backdrop{background:rgba(15,23,42,.58);backdrop-filter:blur(3px)}
.phone-view-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 24px 70px rgba(15,23,42,.28);display:grid;gap:14px}
.phone-view-options{display:grid;gap:10px}
.phone-view-option{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--panel2);color:var(--text);text-align:start;cursor:pointer}
.phone-view-option:hover,.phone-view-option.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
.phone-view-option-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--panel);color:var(--accent)}
.phone-view-option b,.phone-view-option small{display:block}.phone-view-option small{margin-top:4px;color:var(--muted);line-height:1.6}.phone-view-option em{font-style:normal;font-size:.78rem;border:1px solid var(--line);border-radius:999px;padding:5px 8px;white-space:nowrap;color:var(--muted)}
.phone-view-note{border:1px dashed var(--accent-border);background:var(--accent-soft);border-radius:12px;padding:10px 12px;line-height:1.7;color:var(--muted)}
.phone-web-preview-toolbar{position:fixed;inset:0 0 auto 0;z-index:10050;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 18px;background:#0f172a;color:#fff;box-shadow:0 5px 18px rgba(15,23,42,.32);direction:rtl}
.phone-web-preview-toolbar[hidden]{display:none!important}.phone-web-preview-toolbar b,.phone-web-preview-toolbar small{display:block}.phone-web-preview-toolbar small{opacity:.78;margin-top:2px}.phone-web-preview-toolbar .btn{white-space:nowrap}
html.phone-web-preview,html.phone-web-preview body{min-width:1180px;overflow-x:auto}
html.phone-web-preview body{padding-top:60px}
html.phone-web-preview #app-view,html.phone-web-preview #login-view{min-width:1180px}
html.phone-web-preview .app-layout{grid-template-columns:240px minmax(0,1fr)!important}
html.phone-web-preview .main-nav{display:flex!important;position:sticky!important;top:70px!important;max-height:calc(100vh - 80px)!important;overflow:auto!important}
html.phone-web-preview header{position:sticky;top:60px;z-index:100}
html.phone-web-preview .hdr-more-menu{min-width:210px}
#phone-web-preview-btn{display:none}
.phone-view-fab{display:none;position:fixed;inset-inline-start:14px;bottom:calc(14px + var(--safe-bottom));z-index:10040;min-height:46px;padding:9px 13px;border:1px solid var(--accent-border);border-radius:999px;background:var(--panel);color:var(--accent);box-shadow:0 12px 30px rgba(15,23,42,.22);align-items:center;gap:8px;font-weight:800;cursor:pointer}
.phone-view-fab .ui-icon{width:20px;height:20px}
@media(max-width:1100px),(pointer:coarse),(hover:none){#phone-web-preview-btn{display:flex!important}.phone-view-fab{display:inline-flex}}
html.phone-web-preview .phone-view-fab{display:none!important}
@media(min-width:1101px) and (pointer:fine) and (hover:hover){#phone-web-preview-btn{display:none!important}.phone-view-fab{display:none!important}}
@media(max-width:620px){.phone-view-card{padding:14px}.phone-view-option{grid-template-columns:42px minmax(0,1fr);padding:12px}.phone-view-option-icon{width:42px;height:42px}.phone-view-option em{grid-column:2;justify-self:start}.phone-view-dialog .dialog-actions .btn{width:100%}}

/* v1.23.6 phone web-preview accessibility hotfix */
@media(max-width:700px){
  .phone-view-dialog[open]{width:calc(100vw - 18px);max-height:calc(100vh - 18px);overflow:auto}
  .hdr-more[open] .hdr-more-menu{position:fixed;top:auto;bottom:calc(72px + var(--safe-bottom));inset-inline:10px;z-index:10030;max-height:55vh;overflow:auto}
}


/* v1.23.6 phone home-screen launch icon */
.home-install-fab{display:none;position:fixed;inset-inline-end:14px;bottom:calc(14px + var(--safe-bottom));z-index:10041;min-height:46px;padding:9px 13px;border:1px solid var(--accent-border);border-radius:999px;background:var(--accent);color:var(--on-accent,#fff);box-shadow:0 12px 30px rgba(15,23,42,.24);align-items:center;gap:8px;font-weight:800;cursor:pointer}
.home-install-fab .ui-icon{width:20px;height:20px}
.home-install-dialog{width:min(94vw,610px);max-width:610px;border:0;border-radius:20px;padding:0;background:transparent;color:var(--text)}
.home-install-dialog::backdrop{background:rgba(15,23,42,.58);backdrop-filter:blur(3px)}
.home-install-card{display:grid;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 24px 70px rgba(15,23,42,.28)}
.home-install-preview{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--panel2)}
.home-install-preview img{width:72px;height:72px;border-radius:18px;box-shadow:0 8px 22px rgba(15,23,42,.16)}
.home-install-preview b,.home-install-preview small{display:block}.home-install-preview small{margin-top:5px;color:var(--muted);line-height:1.65}
.home-install-steps{padding:12px 14px;border:1px solid var(--accent-border);border-radius:14px;background:var(--accent-soft)}
.home-install-steps ol{margin:8px 0 0;padding-inline-start:22px;line-height:1.9;color:var(--muted)}
.home-install-warning{padding:11px 13px;border:1px solid color-mix(in srgb,#f59e0b 46%,var(--line));border-radius:13px;background:color-mix(in srgb,#f59e0b 10%,var(--panel2));color:var(--muted);line-height:1.7}
.home-install-success{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid color-mix(in srgb,#16a34a 42%,var(--line));border-radius:13px;background:color-mix(in srgb,#16a34a 10%,var(--panel2));color:#15803d;font-weight:800}
html[data-home-install-state="installed"] .home-install-fab{display:none!important}
@media(max-width:1100px),(pointer:coarse),(hover:none){.home-install-fab{display:inline-flex}}
html.phone-web-preview .home-install-fab{display:none!important}
@media(min-width:1101px) and (pointer:fine) and (hover:hover){.home-install-fab{display:none!important}}
@media(max-width:620px){.home-install-card{padding:14px}.home-install-preview{grid-template-columns:58px minmax(0,1fr);padding:12px}.home-install-preview img{width:58px;height:58px;border-radius:15px}.home-install-dialog[open]{width:calc(100vw - 18px);max-height:calc(100vh - 18px);overflow:auto}.home-install-dialog .dialog-actions{display:grid;grid-template-columns:1fr}.home-install-dialog .dialog-actions .btn{width:100%}}

/* v1.23.6 scope preview and all-company/all-department filter repair */
.access-filter-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:var(--panel2)}
.access-filter-summary>span{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.access-filter-summary>span b{color:var(--text);font-size:.95rem}
.access-filter-summary .btn{margin-inline-start:auto}
.access-scope-preview{display:grid;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.access-scope-preview .info-card{max-height:330px;overflow:auto}
.access-scope-preview .advanced-table{min-width:720px}
@media(max-width:720px){.access-filter-summary .btn{width:100%;margin-inline-start:0}.access-scope-preview .grid.two{grid-template-columns:1fr}}

/* v1.23.6 user-management all-company filter repair */
.user-management-filter {
  align-items: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr)) minmax(220px, 1.5fr) auto;
  gap: 12px;
}
.user-management-filter .field { min-width: 0; }
.user-management-filter .field.grow { min-width: 220px; }
.user-management-filter .filter-actions { align-self: end; }
.readonly-filter-value {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--border, #dfe1e6);
  border-radius: 10px;
  background: var(--surface-muted, #f7f8fa);
}
@media (max-width: 900px) {
  .user-management-filter { grid-template-columns: 1fr 1fr; }
  .user-management-filter .field.grow { min-width: 0; }
}
@media (max-width: 560px) {
  .user-management-filter { grid-template-columns: 1fr; }
  .user-management-filter .filter-actions .btn { width: 100%; }
}


/* v1.23.6 solid messages + authenticated CSV hotfix */
.task-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-inline-start:6px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,var(--teal) 18%,var(--panel2));color:inherit;font-size:10px;font-weight:800}
.task-detail-tab.active .task-tab-count{background:color-mix(in srgb,#fff 25%,transparent)}
.conversation-load-error{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:center;margin-bottom:10px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--danger,#dc2626) 45%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--danger,#dc2626) 8%,var(--panel2))}
.conversation-load-error b,.conversation-load-error span{display:block}.conversation-load-error span{color:var(--muted);font-size:11px}.conversation-load-error .btn{grid-column:2;grid-row:1/3}
.approval-message-list{display:grid;gap:8px;margin:14px 0;padding-top:12px;border-top:1px solid var(--line)}.approval-message-list h4{margin:0 0 2px;font-size:13px}
.approval-message{padding:10px 12px;border-radius:10px;background:var(--panel2);border-inline-start:4px solid var(--teal)}.approval-message.rejected{border-inline-start-color:var(--danger,#dc2626)}.approval-message p{margin:7px 0;white-space:pre-wrap;line-height:1.7}.approval-message>small{color:var(--muted)}
@media(max-width:760px){.conversation-load-error{grid-template-columns:1fr}.conversation-load-error .btn{grid-column:1;grid-row:auto;width:100%}.attachment-row{align-items:flex-start;flex-wrap:wrap}.attachment-row .row-main{min-width:0;flex:1 1 calc(100% - 42px)}.attachment-row .btn{flex:1}}

/* v1.23.6 mobile task workspace hotfix ------------------------------------ */
.mobile-task-card-facts,
.mobile-task-dock { display: none; }

.conversation-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.conversation-toolbar h3 { margin: 0 0 3px; }
.conversation-toolbar small { color: var(--muted); line-height: 1.5; }
.conversation-toolbar .btn span { margin-inline-start: 4px; }
.conversation-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 12px;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.conversation-filters::-webkit-scrollbar { display: none; }
.conversation-filters button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel2);
  color: var(--muted);
  padding: 7px 11px;
  white-space: nowrap;
  cursor: pointer;
  font-weight: 750;
}
.conversation-filters button.active {
  border-color: color-mix(in srgb, var(--teal) 48%, var(--line));
  background: color-mix(in srgb, var(--teal) 14%, var(--panel2));
  color: var(--text);
}
.conversation-timeline {
  gap: 9px;
  max-height: min(58vh, 620px);
  overflow-y: auto;
  padding: 4px 3px 10px;
  scroll-behavior: smooth;
}
.conversation-item {
  width: min(82%, 720px);
  margin-inline-end: auto;
  box-shadow: 0 5px 18px rgba(15, 23, 42, .05);
}
.conversation-item.comment.mine {
  margin-inline-start: auto;
  margin-inline-end: 0;
  border-inline-start-color: var(--accent, var(--teal));
  background: color-mix(in srgb, var(--teal) 10%, var(--panel2));
}
.conversation-item.approval-message { width: min(92%, 820px); }
.conversation-item[hidden] { display: none !important; }
.reply-reference {
  margin: 7px 0 2px;
  padding: 7px 9px;
  border-inline-start: 3px solid var(--violet, #8b5cf6);
  border-radius: 7px;
  background: color-mix(in srgb, var(--violet, #8b5cf6) 9%, transparent);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
.message-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
}
.message-footer small { color: var(--muted); }
.conversation-empty {
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 34px 16px;
  color: var(--muted);
  text-align: center;
}
.conversation-empty > span { font-size: 30px; }
.conversation-empty b { color: var(--text); }
.conversation-empty small { line-height: 1.6; }

.mobile-chat-composer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: 0 -9px 25px rgba(15, 23, 42, .08);
  backdrop-filter: blur(14px);
}
.mobile-chat-composer textarea {
  width: 100%;
  min-height: 58px;
  max-height: 150px;
  resize: vertical;
  border-radius: 12px;
}
.message-composer-actions {
  display: grid;
  grid-template-columns: 42px 42px 42px minmax(92px, auto);
  justify-content: end;
  gap: 7px;
  align-items: center;
}
.message-tool {
  min-width: 42px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel2);
  color: var(--text);
  cursor: pointer;
}
.send-message-btn { min-height: 42px; }
.message-options-menu { position: relative; }
.message-options-menu > summary { list-style: none; display: grid; place-items: center; }
.message-options-menu > summary::-webkit-details-marker { display: none; }
.message-options-popover {
  position: absolute;
  inset-inline-end: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: min(330px, calc(100vw - 34px));
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .2);
}
.message-options-popover label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.message-options-popover select { width: 100%; }
.comment-reply-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-inline-start: 3px solid var(--teal);
  border-radius: 9px;
  background: color-mix(in srgb, var(--teal) 9%, var(--panel2));
  color: var(--muted);
  font-size: 11px;
}
.comment-reply-context.hidden { display: none !important; }
.comment-reply-context .icon-btn { width: 30px; height: 30px; min-height: 30px; }

.task-attachments-drawer > summary {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-weight: 850;
  list-style: none;
}
.task-attachments-drawer > summary::-webkit-details-marker { display: none; }
.task-attachments-drawer > summary em {
  min-width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--panel2);
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
}
.task-attachments-content { margin-top: 10px; }

@media (max-width: 760px) {
  /* Practical task cards: only the information needed to decide and act. */
  .task-grid { grid-template-columns: 1fr; gap: 10px; }
  .task-card.collaborative-card {
    min-height: 0;
    padding: 12px;
    border-radius: 16px;
    cursor: default;
  }
  .task-card .task-top { align-items: flex-start; }
  .task-card .task-card-title { min-width: 0; }
  .task-card h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 15px;
  }
  .task-card-scope {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .task-card .task-description,
  .task-card .task-card-assignees,
  .task-card .card-stats,
  .task-card .card-assign-handle { display: none !important; }
  .mobile-task-card-facts {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-top: 9px;
    padding-bottom: 2px;
    color: var(--muted);
    scrollbar-width: none;
  }
  .mobile-task-card-facts::-webkit-scrollbar { display: none; }
  .mobile-task-card-facts span {
    flex: 0 0 auto;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel2);
    font-size: 10px;
  }
  .task-card .progress { height: 5px; margin: 9px 0 7px; }
  .task-card .card-message { min-height: 48px; margin-top: 7px; }
  .task-card .card-message-body b { font-size: 11px; }
  .task-card .card-message-body small { font-size: 11px; }
  .task-card .mobile-practical-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
  }
  .task-card .mobile-practical-actions .btn {
    width: 100%;
    min-height: 42px;
    padding: 7px 9px;
  }
  .task-card .mobile-practical-actions .btn:nth-child(3) { grid-column: 1 / -1; }
  .task-message-action span {
    min-width: 19px;
    height: 19px;
    display: inline-grid;
    place-items: center;
    margin-inline-start: 4px;
    border-radius: 999px;
    background: var(--danger, #dc2626);
    color: #fff;
    font-size: 9px;
  }

  /* The phone task opens as a real full-screen work surface. */
  #task-detail-dialog.mobile-task-workspace-active,
  html.phone-mobile-view #task-detail-dialog {
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  #task-detail-dialog.mobile-task-workspace-active .task-detail-card,
  html.phone-mobile-view #task-detail-dialog .task-detail-card {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
  }
  #task-detail-dialog.mobile-task-workspace-active .dialog-head,
  html.phone-mobile-view #task-detail-dialog .dialog-head {
    min-height: 58px;
    padding: calc(9px + var(--safe-top)) 12px 9px;
  }
  #task-detail-dialog .dialog-head h3 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
  }
  #task-detail-dialog #harddelete-task { display: none !important; }
  #task-detail-dialog #close-task-detail {
    width: 42px;
    height: 42px;
    min-height: 42px;
  }
  #task-detail-dialog #task-detail-body {
    padding: 10px 10px calc(92px + var(--safe-bottom));
    scroll-padding-bottom: calc(100px + var(--safe-bottom));
  }
  #task-detail-dialog .workflow-summary {
    display: grid;
    gap: 8px;
    margin-bottom: 9px;
    padding: 10px;
    border-radius: 13px;
  }
  #task-detail-dialog .workflow-summary .meta {
    line-height: 1.55;
    font-size: 10px;
  }
  #task-detail-dialog .revision-chip { display: none; }
  #task-detail-dialog .task-action-bar,
  #task-detail-dialog .task-detail-tabs,
  #task-detail-dialog .pro-workflow-panel { display: none !important; }
  #task-detail-dialog .detail-section {
    padding: 11px;
    margin-bottom: 9px;
    border-radius: 14px;
  }
  #task-detail-dialog .detail-section h3 { font-size: 14px; }
  #task-detail-dialog .task-detail-panel { padding-bottom: 5px; }
  #task-detail-dialog .pending-actions { display: grid; grid-template-columns: 1fr 1fr; }
  #task-detail-dialog .pending-actions .btn { min-height: 42px; }

  /* Fixed bottom task dock. */
  .mobile-task-dock {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 10025;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    min-height: calc(66px + var(--safe-bottom));
    padding: 6px 7px calc(6px + var(--safe-bottom));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    box-shadow: 0 -12px 28px rgba(15, 23, 42, .16);
    backdrop-filter: blur(18px);
  }
  .mobile-dock-button,
  .mobile-task-dock > .mobile-task-action,
  .mobile-task-more-menu > summary {
    position: relative;
    min-width: 0;
    min-height: 52px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    margin: 0;
    padding: 4px 3px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    list-style: none;
    font-size: 15px;
  }
  .mobile-task-more-menu > summary::-webkit-details-marker { display: none; }
  .mobile-dock-button b,
  .mobile-task-dock > .mobile-task-action span,
  .mobile-task-more-menu > summary b {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 800;
  }
  .mobile-task-dock > .mobile-task-action .ui-icon { width: 18px; height: 18px; }
  .mobile-task-dock > .mobile-task-action {
    background: var(--accent, var(--teal));
    color: var(--on-accent, #fff);
  }
  .mobile-dock-button.active {
    background: color-mix(in srgb, var(--teal) 14%, var(--panel2));
    color: var(--accent-text, var(--teal));
  }
  .mobile-dock-button em {
    position: absolute;
    top: 3px;
    inset-inline-start: calc(50% + 8px);
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger, #dc2626);
    color: #fff;
    font-style: normal;
    font-size: 9px;
  }
  .mobile-task-more-menu { position: static; }
  .mobile-task-more-sheet {
    position: fixed;
    inset-inline: 8px;
    bottom: calc(72px + var(--safe-bottom));
    z-index: 10028;
    max-height: min(68dvh, 620px);
    overflow-y: auto;
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .3);
    text-align: start;
  }
  .mobile-more-title { display: grid; gap: 3px; }
  .mobile-more-title small { color: var(--muted); line-height: 1.5; }
  .mobile-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .mobile-more-row {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel2);
    color: var(--text);
    text-align: start;
    cursor: pointer;
  }
  .mobile-more-row span { font-size: 17px; }
  .mobile-more-row b { font-size: 11px; }
  .mobile-more-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .mobile-more-actions > b { grid-column: 1 / -1; font-size: 12px; }
  .mobile-more-actions .btn { min-height: 44px; }
  .danger-row { color: var(--danger, #dc2626); }

  /* Conversation-first interaction on phones. */
  #task-conversation-section {
    min-height: calc(100dvh - 155px);
    display: flex;
    flex-direction: column;
  }
  .conversation-toolbar { align-items: flex-start; }
  .conversation-toolbar .btn { min-height: 40px; white-space: nowrap; }
  .conversation-filters {
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 5px 0 7px;
    background: var(--panel);
  }
  .conversation-filters button { min-height: 38px; }
  .conversation-timeline {
    flex: 1;
    max-height: none;
    overflow: visible;
    padding-bottom: 8px;
  }
  .conversation-item,
  .conversation-item.approval-message { width: min(90%, 620px); }
  .conversation-item.comment.reply { margin-inline-start: 12px; }
  .conversation-item .comment-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .conversation-item .comment-head span { font-size: 9px; }
  .conversation-item p { font-size: 13px; line-height: 1.65; }
  .conversation-item .link-btn {
    min-height: 34px;
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--line));
    border-radius: 999px;
  }
  .mobile-chat-composer {
    bottom: calc(68px + var(--safe-bottom));
    margin: auto -3px -3px;
    border-radius: 16px 16px 10px 10px;
  }
  .mobile-chat-composer textarea { min-height: 52px; font-size: 16px; }
  .message-composer-actions {
    grid-template-columns: 44px 44px 44px minmax(86px, 1fr);
  }
  .message-tool,
  .send-message-btn { min-height: 44px; }
  .task-attachments-drawer > summary { display: flex; min-height: 48px; }
  .task-attachments-drawer:not([open]) { padding-bottom: 11px; }
  .task-attachments-drawer .attachment-form {
    grid-template-columns: 1fr;
  }
  .task-attachments-drawer .voice-controls .btn { flex: 1 1 140px; min-height: 42px; }
  .attachment-row .btn { min-height: 40px; }
}

@media (max-width: 390px) {
  .mobile-more-grid,
  .mobile-more-actions { grid-template-columns: 1fr; }
  .mobile-chat-composer { padding: 8px; }
  .message-composer-actions { grid-template-columns: 42px 42px 42px 1fr; gap: 5px; }
  .mobile-dock-button b,
  .mobile-task-dock > .mobile-task-action span,
  .mobile-task-more-menu > summary b { font-size: 9px; }
}

/* v1.23.6 focused mobile task-card hotfix -------------------------------- */
.mobile-task-snapshot { display: none; }

@media (max-width: 760px) {
  /* Keep the list card as a decision surface, not a miniature task screen. */
  .task-card .card-message { display: none !important; }
  .task-card .mobile-task-card-facts span:nth-child(3) { display: none; }
  .task-card .mobile-practical-actions {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  }
  .task-card .mobile-practical-actions .btn {
    min-height: 46px;
    white-space: normal;
    line-height: 1.35;
    font-size: 11px;
  }

  /* Opening a task starts with a compact, readable task brief. */
  #task-detail-dialog .workflow-summary .meta { display: none; }
  #task-detail-dialog .workflow-summary {
    padding: 8px 10px;
    margin-bottom: 7px;
  }
  .mobile-task-snapshot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 9px;
  }
  .mobile-task-snapshot > div {
    min-width: 0;
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel2);
  }
  .mobile-task-snapshot small {
    color: var(--muted);
    font-size: 10px;
  }
  .mobile-task-snapshot b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }
  #task-detail-dialog .task-main-description,
  #task-detail-dialog .delivery-criteria {
    padding: 13px;
  }
  #task-detail-dialog .task-main-description p,
  #task-detail-dialog .delivery-criteria p {
    margin-bottom: 0;
    line-height: 1.8;
  }

  /* Four permanent phone choices: task, communication, workflow, menu. */
  .mobile-task-dock.attendance-mobile-dock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mobile-task-dock > .mobile-task-action span,
  .mobile-dock-button b,
  .mobile-task-more-menu > summary b,
  .mobile-workflow-menu > summary b {
    font-size: 9px;
  }
  .mobile-workflow-menu,
  .mobile-task-more-menu { position: static; }
  .mobile-workflow-menu > summary {
    position: relative;
    min-width: 0;
    min-height: 52px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    margin: 0;
    padding: 4px 3px;
    border: 0;
    border-radius: 12px;
    background: color-mix(in srgb, var(--teal) 15%, var(--panel2));
    color: var(--accent-text, var(--teal));
    cursor: pointer;
    list-style: none;
  }
  .mobile-workflow-menu > summary::-webkit-details-marker { display: none; }
  .mobile-workflow-menu > summary span { font-size: 16px; }
  .mobile-workflow-sheet {
    position: fixed;
    inset-inline: 8px;
    bottom: calc(72px + var(--safe-bottom));
    z-index: 10029;
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .3);
    text-align: start;
  }
  .mobile-decision-action {
    width: 100%;
    min-height: 50px;
    justify-content: center;
    white-space: normal;
    line-height: 1.45;
  }

  /* Secondary screens are a simple list, not another dashboard. */
  .mobile-more-grid,
  .mobile-more-actions {
    grid-template-columns: 1fr;
  }
  .mobile-more-row {
    min-height: 52px;
    padding: 11px 12px;
  }
  .mobile-more-row b { font-size: 12px; }

  /* Communication remains the main interaction space. */
  .conversation-toolbar h3 { font-size: 15px; }
  .conversation-toolbar small { font-size: 10px; }
  .conversation-filters button {
    min-height: 40px;
    padding-inline: 12px;
  }
  .message-footer .link-btn { font-weight: 800; }
}

/* v1.24.0 — compact task command center ---------------------------------- */
#task-detail-dialog #harddelete-task { display: none !important; }
.compact-task-summary {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel2);
}
.compact-summary-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 12px;
  color: var(--muted);
  font-size: 11px;
}
.compact-summary-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-task-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb,var(--panel) 96%,transparent);
}
.compact-task-path span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.compact-task-path span i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel2);
  color: var(--muted);
  font-style: normal;
  font-size: 10px;
}
.compact-task-path span.done { color: #15803d; }
.compact-task-path span.done i { border-color: color-mix(in srgb,#16a34a 45%,var(--line)); background: color-mix(in srgb,#16a34a 12%,var(--panel2)); color: #15803d; }
.compact-task-path span.active { color: var(--text); }
.compact-task-path span.active i { border-color: transparent; background: var(--accent,var(--teal)); color: var(--on-accent,#fff); box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent,var(--teal)) 12%,transparent); }
.compact-task-path > em { color: var(--muted); font-style: normal; opacity: .65; }

.approval-focus-card {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb,#16a34a 38%,var(--line));
  border-inline-start: 4px solid #16a34a;
  border-radius: 14px;
  background: color-mix(in srgb,#16a34a 8%,var(--panel2));
}
.approval-focus-card.rejected { border-color: color-mix(in srgb,#dc2626 38%,var(--line)); border-inline-start-color: #dc2626; background: color-mix(in srgb,#dc2626 7%,var(--panel2)); }
.approval-focus-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb,#16a34a 16%,var(--panel)); color: #15803d; font-size: 18px; font-weight: 900; }
.approval-focus-card.rejected .approval-focus-icon { background: color-mix(in srgb,#dc2626 13%,var(--panel)); color: #b91c1c; }
.approval-focus-copy { min-width: 0; display: grid; gap: 2px; }
.approval-focus-copy small { color: var(--muted); font-size: 10px; }
.approval-focus-copy b { font-size: 12px; }
.approval-focus-copy p { margin: 2px 0 0; color: var(--text); font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.approval-focus-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.compact-task-command-bar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb,var(--panel) 96%,transparent);
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
  backdrop-filter: blur(14px);
}
.compact-task-command-bar > .btn { min-height: 40px; }
.compact-task-command-bar .compact-task-action { margin-inline-start: auto; }
.compact-no-action { margin-inline-start: auto; color: var(--muted); font-size: 11px; }
.compact-task-more-menu { position: relative; }
.compact-task-more-menu > summary { list-style: none; cursor: pointer; }
.compact-task-more-menu > summary::-webkit-details-marker { display: none; }
.compact-more-trigger { min-width: 82px; min-height: 40px; }
.compact-task-more-popover {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 7px);
  z-index: 40;
  width: min(330px,calc(100vw - 34px));
  max-height: min(68vh,620px);
  overflow: auto;
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 22px 60px rgba(15,23,42,.24);
}
.compact-more-heading { display: grid; gap: 2px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.compact-more-heading small { color: var(--muted); font-size: 10px; }
.compact-more-list,.compact-more-actions { display: grid; gap: 6px; }
.compact-more-actions { padding-top: 8px; border-top: 1px solid var(--line); }
.compact-more-actions > b { font-size: 11px; }
.compact-more-row {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel2);
  color: var(--text);
  text-align: start;
  cursor: pointer;
}
.compact-more-row b { font-size: 11px; }
.compact-more-actions .btn { width: 100%; justify-content: flex-start; min-height: 42px; }
.compact-task-navigation { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px; }
.compact-task-navigation .task-detail-tabs { position: static; flex: 1; justify-content: center; margin: 0; padding: 5px; }
.compact-task-navigation .task-detail-tab { flex: 1; max-width: 220px; min-height: 38px; }
.task-tab-count.approval-count { background: color-mix(in srgb,#a855f7 17%,var(--panel2)); }
.compact-approval-panel .section-title > div { display: grid; gap: 2px; }
.compact-approval-panel .section-title small { color: var(--muted); font-size: 10px; }
.approval-current-decision {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb,var(--accent,var(--teal)) 42%,var(--line));
  border-radius: 13px;
  background: color-mix(in srgb,var(--accent,var(--teal)) 9%,var(--panel2));
}
.approval-current-decision > span { color: var(--muted); font-size: 11px; }
.approval-current-decision > div { display: flex; gap: 7px; flex-wrap: wrap; }
.compact-mobile-task-dock { display: none; }

@media (max-width: 760px) {
  #task-detail-dialog .compact-task-summary {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-bottom: 7px;
    padding: 9px 10px;
  }
  #task-detail-dialog .compact-task-summary .revision-chip { display: none; }
  .compact-summary-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; font-size: 10px; }
  .compact-task-path { justify-content: space-between; gap: 3px; margin: 6px 0; padding: 7px 6px; overflow: hidden; }
  .compact-task-path span { display: grid; place-items: center; gap: 3px; min-width: 0; font-size: 9px; }
  .compact-task-path span i { width: 22px; height: 22px; font-size: 9px; }
  .compact-task-path > em { font-size: 11px; }
  .approval-focus-card { grid-template-columns: 32px minmax(0,1fr); padding: 9px; }
  .approval-focus-icon { width: 30px; height: 30px; }
  .approval-focus-copy p { font-size: 11px; max-height: 3.2em; overflow: hidden; }
  .approval-focus-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .approval-focus-actions .btn { min-height: 40px; }
  #task-detail-dialog .compact-task-command-bar {
    position: sticky;
    top: 0;
    z-index: 7;
    display: grid;
    grid-template-columns: minmax(0,1fr) 58px minmax(0,1.1fr) 48px;
    gap: 5px;
    margin: 6px 0 8px;
    padding: 6px;
  }
  .compact-task-command-bar > .btn { min-width: 0; min-height: 42px; padding-inline: 7px; font-size: 10px; }
  .compact-task-command-bar .compact-file-command span { display: none; }
  .compact-task-command-bar .compact-task-action { margin-inline-start: 0; }
  .compact-task-command-bar .compact-decision { font-size: 9px; }
  .compact-task-command-bar:has(.compact-decision) { grid-template-columns: 54px 48px 1fr 1fr 44px; }
  .compact-task-command-bar:has(.compact-decision) .compact-message-command span { display: none; }
  .compact-more-trigger { min-width: 42px; width: 42px; padding: 0; }
  .compact-more-trigger span { display: none; }
  .compact-task-more-popover { display: none; }
  .compact-task-navigation { display: none; }
  #task-detail-dialog .task-detail-tabs { display: none !important; }
  .compact-mobile-task-dock { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
  #task-detail-dialog #task-detail-body { padding-bottom: calc(90px + var(--safe-bottom)); }
  .compact-approval-panel .approval-step { align-items: flex-start; flex-wrap: wrap; }
  .compact-approval-panel .approval-step .row-main { min-width: calc(100% - 44px); }
  .approval-current-decision > div { display: grid; grid-template-columns: 1fr 1fr; }
  .approval-current-decision .btn { min-height: 44px; }
  .mobile-task-more-sheet .compact-task-action { width: 100%; justify-content: flex-start; }
}

@media (max-width: 390px) {
  #task-detail-dialog .compact-task-command-bar { grid-template-columns: minmax(0,1fr) 48px minmax(0,1fr) 42px; }
  .compact-task-command-bar .compact-message-command span { font-size: 9px; }
  .compact-task-command-bar:has(.compact-decision) { grid-template-columns: 44px 44px 1fr 1fr 40px; }
  .compact-task-path span b { font-size: 8px; }
}
.approval-active-label{display:inline-flex;align-items:center;min-height:28px;padding:4px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent,var(--teal)) 12%,var(--panel2));color:var(--accent-text,var(--teal));font-size:10px;font-weight:800;white-space:nowrap}
@media(max-width:760px){
  #task-detail-dialog .compact-task-command-bar{grid-template-columns:minmax(0,1fr) 58px minmax(0,1.1fr)}
  #task-detail-dialog .compact-task-command-bar .compact-task-more-menu{display:none!important}
  #task-detail-dialog .compact-task-command-bar:has(.compact-decision){grid-template-columns:54px 48px 1fr 1fr}
}
@media(max-width:390px){
  #task-detail-dialog .compact-task-command-bar{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr)}
  #task-detail-dialog .compact-task-command-bar:has(.compact-decision){grid-template-columns:44px 44px 1fr 1fr}
}


/* v1.24.2 — task points are visible immediately when a task opens -------- */
.task-points-first {
  margin-top: 10px;
  border-color: color-mix(in srgb,var(--accent,var(--teal)) 34%,var(--line));
  background: color-mix(in srgb,var(--accent,var(--teal)) 5%,var(--panel));
}
.task-points-title > div { min-width: 0; display: grid; gap: 2px; }
.task-points-title h3 { margin: 0; }
.task-points-title small { color: var(--muted); font-size: 10px; }
.task-points-title > span {
  min-width: 54px;
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb,var(--accent,var(--teal)) 12%,var(--panel2));
  color: var(--accent-text,var(--teal));
  font-weight: 900;
}
.task-points-progress {
  height: 7px;
  margin: 8px 0 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel2);
}
.task-points-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--green),var(--teal));
  transition: width .2s ease;
}
.task-points-list { display: grid; gap: 7px; }
.task-points-list .task-point-row {
  margin: 0;
  min-height: 46px;
  padding: 9px 11px;
  background: color-mix(in srgb,var(--panel2) 92%,transparent);
}
.task-points-list .task-point-row:hover {
  border-color: color-mix(in srgb,var(--accent,var(--teal)) 42%,var(--line));
}
.task-points-list .task-point-row span { line-height: 1.5; }
.task-points-complete {
  margin-top: 9px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb,#16a34a 10%,var(--panel2));
  color: #15803d;
  font-size: 11px;
  font-weight: 900;
}
.task-points-empty { padding: 10px 2px 2px; }

@media (max-width: 760px) {
  #task-detail-dialog .task-points-first { margin-top: 8px; padding: 10px; }
  #task-detail-dialog .task-points-title { align-items: start; }
  #task-detail-dialog .task-points-title h3 { font-size: 14px; }
  #task-detail-dialog .task-points-title small { font-size: 9px; }
  #task-detail-dialog .task-points-list { gap: 6px; }
  #task-detail-dialog .task-points-list .task-point-row {
    min-height: 48px;
    padding: 9px;
    font-size: 12px;
  }
}

/* v1.24.3 — phone focus workspace --------------------------------------- */
.mobile-task-focus-strip,
.mobile-workflow-path-drawer,
.mobile-task-information,
.mobile-inline-task-actions,
.mobile-approval-history-toggle { display: none; }

.approval-history-content { display: block; }
.approval-no-current-action {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel2);
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 760px) {
  /* Give the content the screen: a compact title, one scroll surface, one dock. */
  #task-detail-dialog .dialog-head {
    min-height: 46px;
    padding: 6px 8px 6px 10px;
  }
  #task-detail-dialog .dialog-head h3 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.35;
  }
  #task-detail-dialog #close-task-detail {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }
  #task-detail-dialog #task-detail-body {
    padding: 5px 7px calc(64px + var(--safe-bottom));
    scroll-padding-top: 4px;
    scroll-padding-bottom: calc(70px + var(--safe-bottom));
  }

  /* The old summary, full workflow and top command ribbon consumed most of the viewport. */
  #task-detail-dialog .compact-task-summary,
  #task-detail-dialog .desktop-workflow-path,
  #task-detail-dialog .compact-task-command-bar,
  #task-detail-dialog .desktop-task-information { display: none !important; }
  #task-detail-dialog .compact-task-summary.has-pending-assignment {
    display: grid !important;
    margin: 2px 0 5px;
    padding: 7px;
  }
  #task-detail-dialog .compact-task-summary.has-pending-assignment .summary-state,
  #task-detail-dialog .compact-task-summary.has-pending-assignment .compact-summary-meta { display: none; }

  /* One 36px status line replaces four summary boxes. */
  .mobile-task-focus-strip {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 2px 0 5px;
    padding: 4px 5px;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--panel2);
    font-size: 9px;
  }
  .mobile-task-focus-strip > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px 7px;
    border-radius: 999px;
    background: var(--panel);
  }
  .mobile-task-focus-strip > span:nth-of-type(2) { flex: 1; }
  .mobile-focus-status { font-weight: 900; color: var(--accent-text,var(--teal)); }
  .mobile-task-meta-menu { position: relative; margin-inline-start: auto; }
  .mobile-task-meta-menu > summary {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--panel);
    cursor: pointer;
    list-style: none;
    font-size: 18px;
    font-weight: 900;
  }
  .mobile-task-meta-menu > summary::-webkit-details-marker { display: none; }
  .mobile-task-meta-menu > div {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 100;
    width: min(280px,calc(100vw - 28px));
    display: grid;
    gap: 7px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    box-shadow: 0 18px 48px rgba(15,23,42,.22);
  }
  .mobile-task-meta-menu > div span { color: var(--muted); font-size: 10px; }

  /* The workflow becomes a one-line drawer and is closed unless requested. */
  .mobile-workflow-path-drawer {
    display: block;
    margin: 0 0 5px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
  }
  .mobile-workflow-path-drawer > summary {
    min-height: 36px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    cursor: pointer;
    list-style: none;
  }
  .mobile-workflow-path-drawer > summary::-webkit-details-marker { display: none; }
  .mobile-workflow-path-drawer > summary span,
  .mobile-workflow-path-drawer > summary em { color: var(--muted); font-size: 9px; font-style: normal; }
  .mobile-workflow-path-drawer > summary b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
  }
  .mobile-workflow-path-drawer > .compact-task-path {
    margin: 0;
    padding: 8px 6px 9px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0 0 10px 10px;
    box-shadow: none;
  }

  /* Approval/revision note remains direct but no longer occupies a large card. */
  #task-detail-dialog .approval-focus-card {
    grid-template-columns: 26px minmax(0,1fr) auto;
    align-items: center;
    gap: 7px;
    margin: 5px 0;
    padding: 7px 8px;
    border-radius: 11px;
  }
  #task-detail-dialog .approval-focus-icon { width: 26px; height: 26px; font-size: 14px; }
  #task-detail-dialog .approval-focus-copy { gap: 0; }
  #task-detail-dialog .approval-focus-copy small { font-size: 8px; }
  #task-detail-dialog .approval-focus-copy b { font-size: 10px; }
  #task-detail-dialog .approval-focus-copy p {
    max-height: 1.55em;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
  }
  #task-detail-dialog .approval-focus-actions {
    grid-column: auto;
    display: flex;
    gap: 4px;
  }
  #task-detail-dialog .approval-focus-actions .btn {
    min-width: 0;
    min-height: 32px;
    padding: 4px 7px;
    font-size: 8px;
  }

  /* Task points are the first large interactive area. */
  #task-detail-dialog .task-points-first {
    margin: 5px 0;
    padding: 8px;
    border-radius: 12px;
  }
  #task-detail-dialog .task-points-title { margin-bottom: 2px; }
  #task-detail-dialog .task-points-title small { display: none; }
  #task-detail-dialog .task-points-title h3 { font-size: 13px; }
  #task-detail-dialog .task-points-title > span {
    min-width: 44px;
    min-height: 26px;
    padding: 3px 7px;
    font-size: 10px;
  }
  #task-detail-dialog .task-points-progress { height: 5px; margin: 5px 0 7px; }
  #task-detail-dialog .task-points-list { gap: 4px; }
  #task-detail-dialog .task-points-list .task-point-row {
    min-height: 42px;
    padding: 7px 8px;
    border-radius: 10px;
    font-size: 12px;
  }

  /* Only the current practical workflow action is shown below the points. */
  .mobile-inline-task-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 5px 0 6px;
  }
  .mobile-inline-task-actions.mobile-review-actions { grid-template-columns: 1fr 1fr; }
  .mobile-inline-task-actions .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    font-size: 11px;
  }

  /* Description and delivery instructions stay available in compact drawers. */
  .mobile-task-information {
    display: block;
    margin: 5px 0;
    padding: 0 !important;
    overflow: hidden;
  }
  .mobile-task-information > summary {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
    list-style: none;
    font-size: 11px;
  }
  .mobile-task-information > summary::-webkit-details-marker { display: none; }
  .mobile-task-information > summary b { color: var(--accent-text,var(--teal)); font-size: 9px; }
  .mobile-task-information[open] > summary { border-bottom: 1px solid var(--line); }
  .mobile-task-information p { margin: 0; padding: 10px; line-height: 1.65; font-size: 12px; white-space: pre-wrap; }

  /* Bottom navigation is slightly shorter and remains the only permanent control. */
  .mobile-task-dock {
    min-height: calc(58px + var(--safe-bottom));
    padding: 4px 6px calc(4px + var(--safe-bottom));
  }
  .mobile-dock-button,
  .mobile-task-more-menu > summary {
    min-height: 48px;
    padding: 3px;
  }
  .mobile-dock-button > span,
  .mobile-task-more-menu > summary > span { font-size: 14px; }
  .mobile-task-more-sheet { bottom: calc(62px + var(--safe-bottom)); }

  /* Conversation: a one-row composer creates substantially more reading space. */
  #task-conversation-section {
    min-height: calc(100dvh - 112px);
    padding: 6px !important;
    margin: 0 !important;
  }
  .conversation-toolbar { min-height: 36px; margin-bottom: 4px; align-items: center; }
  .conversation-toolbar h3 { font-size: 12px !important; margin: 0; }
  .conversation-toolbar small { display: none; }
  .conversation-toolbar .btn { min-height: 34px; padding: 4px 8px; font-size: 9px; }
  .conversation-filters {
    margin-bottom: 5px;
    padding: 2px 0 4px;
  }
  .conversation-filters button { min-height: 30px; padding: 4px 8px; font-size: 9px; }
  .conversation-timeline { padding: 2px 1px 62px; }
  .conversation-item,
  .conversation-item.approval-message { width: min(94%,620px); padding: 8px 9px; }
  .conversation-item p { margin: 5px 0; font-size: 12px; line-height: 1.55; }

  .mobile-chat-composer {
    bottom: calc(58px + var(--safe-bottom));
    grid-template-columns: 38px 38px minmax(0,1fr) 38px 58px;
    align-items: end;
    gap: 4px;
    margin: 4px -2px -2px;
    padding: 5px;
    border-radius: 12px 12px 8px 8px;
  }
  .mobile-chat-composer > input[type="hidden"] { display: none; }
  .mobile-chat-composer .comment-reply-context { grid-column: 1 / -1; }
  .mobile-chat-composer textarea {
    grid-column: 3;
    grid-row: 2;
    min-height: 40px;
    max-height: 88px;
    padding: 8px;
    resize: none;
    font-size: 16px;
  }
  .mobile-chat-composer .message-composer-actions { display: contents; }
  .mobile-chat-composer #message-attach-trigger { grid-column: 1; grid-row: 2; }
  .mobile-chat-composer #message-voice-trigger { grid-column: 2; grid-row: 2; }
  .mobile-chat-composer .message-options-menu { grid-column: 4; grid-row: 2; }
  .mobile-chat-composer .send-message-btn { grid-column: 5; grid-row: 2; }
  .mobile-chat-composer .message-tool,
  .mobile-chat-composer .send-message-btn {
    min-width: 0;
    min-height: 40px;
    height: 40px;
    padding: 3px;
    border-radius: 10px;
    font-size: 10px;
  }

  /* Approval decisions stay direct; the full route/history is hidden until requested. */
  #task-detail-dialog .compact-approval-panel { margin: 0; padding: 8px; }
  #task-detail-dialog .compact-approval-panel > .section-title { margin-bottom: 6px; }
  #task-detail-dialog .compact-approval-panel > .section-title small { display: none; }
  .approval-current-decision { margin-bottom: 7px; padding: 9px; }
  .approval-current-decision > div { gap: 5px; }
  .approval-current-decision .btn { min-height: 42px; }
  .approval-no-current-action { margin-bottom: 6px; padding: 8px; font-size: 10px; }
  .mobile-approval-history-toggle {
    width: 100%;
    min-height: 40px;
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
  }
  .mobile-approval-history-toggle span {
    min-width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--panel2);
    font-size: 9px;
  }
  .approval-history-content:not(.expanded) { display: none; }
  .approval-history-content.expanded { display: block; margin-top: 7px; }

  /* Rare features remain a clean list under More. */
  .mobile-more-title small { display: none; }
  .mobile-task-more-sheet { max-height: min(74dvh,640px); padding: 10px; gap: 7px; }
  .mobile-more-grid,
  .mobile-more-actions { gap: 5px; }
  .mobile-more-row { min-height: 45px; padding: 8px 10px; }
  .mobile-more-actions .btn { min-height: 42px; }
}

@media (max-width: 390px) {
  .mobile-task-focus-strip > span:nth-of-type(1) { max-width: 88px; }
  .mobile-task-focus-strip > span:nth-of-type(3) { padding-inline: 5px; }
  .mobile-chat-composer { grid-template-columns: 36px 36px minmax(0,1fr) 36px 54px; }
  .mobile-inline-task-actions.mobile-review-actions { grid-template-columns: 1fr; }
  #task-detail-dialog .approval-focus-actions .btn:last-child { display: none; }
}
@media (max-width: 760px) {
  #task-detail-dialog:not([data-task-tab="overview"]) .mobile-workflow-path-drawer,
  #task-detail-dialog:not([data-task-tab="overview"]) #task-detail-body > .approval-focus-card,
  #task-detail-dialog:not([data-task-tab="overview"]) #task-detail-body > .warning-box { display: none !important; }
}


/* v1.24.4 — current phone preview + professional connected tasks ---------- */
.create-link-context {
  margin: 0 14px 10px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 34px;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb,var(--teal) 40%,var(--line));
  border-radius: 13px;
  background: color-mix(in srgb,var(--teal) 9%,var(--panel2));
}
.create-link-context > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--panel); }
.create-link-context > div { min-width: 0; display: grid; gap: 2px; }
.create-link-context b { font-size: 12px; }
.create-link-context small { color: var(--muted); line-height: 1.55; }

.connected-tasks-section { overflow: visible; }
.connected-task-flow {
  display: grid;
  grid-template-columns: minmax(0,1fr) 190px minmax(0,1fr);
  gap: 12px;
  align-items: stretch;
  margin: 12px 0;
}
.task-link-lane {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel2);
}
.task-link-lane-title { display: grid; gap: 2px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.task-link-lane-title b { font-size: 12px; }
.task-link-lane-title small { color: var(--muted); font-size: 10px; }
.current-task-link-node {
  display: grid;
  place-content: center;
  gap: 5px;
  min-height: 130px;
  padding: 14px;
  border: 2px solid color-mix(in srgb,var(--teal) 48%,var(--line));
  border-radius: 18px;
  background: color-mix(in srgb,var(--teal) 9%,var(--panel));
  text-align: center;
}
.current-task-link-node small,.current-task-link-node span { color: var(--muted); font-size: 10px; }
.current-task-link-node b { font-size: 13px; line-height: 1.45; }
.professional-task-link { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 34px; gap: 5px; }
.task-link-open {
  width: 100%; min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px;
  padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); text-align: start; cursor: pointer;
}
.task-link-open:hover { border-color: color-mix(in srgb,var(--teal) 52%,var(--line)); transform: translateY(-1px); }
.task-link-open > div { min-width: 0; display: grid; gap: 2px; }
.task-link-open b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.task-link-open small { color: var(--muted); font-size: 9px; }
.task-link-open em { color: var(--accent-text,var(--teal)); font-style: normal; font-size: 9px; line-height: 1.45; }
.task-link-direction { padding: 3px 6px; border-radius: 999px; background: var(--panel2); color: var(--muted); font-size: 8px; }
.task-link-arrow { color: var(--teal); font-size: 17px; }
.task-link-remove { align-self: center; width: 32px; height: 32px; min-height: 32px; color: var(--danger); }
.task-link-empty { padding: 14px 9px; border: 1px dashed var(--line); border-radius: 11px; color: var(--muted); text-align: center; font-size: 10px; }
.task-link-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.task-link-actions details { position: relative; }
.task-link-actions summary { list-style: none; cursor: pointer; }
.task-link-actions summary::-webkit-details-marker { display: none; }
.task-link-create-popover,.task-link-existing-form {
  position: absolute; inset-inline-start: 0; top: calc(100% + 7px); z-index: 50; width: min(440px,calc(100vw - 44px));
  display: grid; gap: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); box-shadow: 0 22px 60px rgba(15,23,42,.25);
}
.task-link-create-popover small { color: var(--muted); line-height: 1.5; }
.task-link-create-popover label,.task-link-existing-form label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.task-link-existing-form { grid-template-columns: 1fr 1fr; width: min(620px,calc(100vw - 44px)); }
.task-link-existing-form label:nth-child(2),.task-link-existing-form label:nth-child(3) { grid-column: 1 / -1; }
.task-link-existing-form .btn { grid-column: 1 / -1; }

html.phone-preview-mode .phone-web-preview-toolbar { display: none !important; }
html.phone-preview-mode body::before {
  content: 'معاينة الهاتف — v1.27.1';
  position: fixed; inset: 0 0 auto 0; z-index: 10060; height: 24px; display: grid; place-items: center;
  background: #0f172a; color: #fff; font-size: 10px; pointer-events: none;
}
html.phone-preview-mode body { padding-top: 24px; }

@media (max-width: 760px) {
  .connected-task-flow { grid-template-columns: 1fr; gap: 8px; }
  .current-task-link-node { min-height: 86px; order: -1; }
  .task-link-lane { padding: 8px; }
  .task-link-actions { display: grid; grid-template-columns: 1fr; }
  .task-link-actions details,.task-link-actions summary { width: 100%; }
  .task-link-actions summary.btn { justify-content: center; min-height: 46px; }
  .task-link-create-popover,.task-link-existing-form {
    position: fixed; inset-inline: 8px; top: auto; bottom: calc(74px + var(--safe-bottom)); width: auto; max-height: 70dvh; overflow-y: auto;
  }
  .task-link-existing-form { grid-template-columns: 1fr; }
  .task-link-existing-form label:nth-child(2),.task-link-existing-form label:nth-child(3),.task-link-existing-form .btn { grid-column: auto; }
  .professional-task-link { grid-template-columns: minmax(0,1fr) 38px; }
  .task-link-open { min-height: 68px; }
}


/* v1.24.6 — compact mobile shell and fast task handling ------------------- */
@media (max-width: 760px) {
  :root { --header-height: 64px; }
  html.phone-mobile-view body,
  html.phone-preview-mode body { overflow-x: hidden; }

  /* One compact top bar: title + live state + Create / notifications / More. */
  header {
    min-height: calc(58px + var(--safe-top));
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center !important;
    gap: 8px;
    padding: calc(5px + var(--safe-top)) 9px 5px !important;
    background: color-mix(in srgb,var(--panel) 96%,transparent) !important;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 16px rgba(15,23,42,.08) !important;
    backdrop-filter: blur(16px);
  }
  header .brand-line { min-width: 0; width: auto !important; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 8px; align-items: center; }
  header #app-main-title { min-width: 0; display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  header #app-main-title .ui-icon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent); }
  header #user-line, header #last-updated { display: none !important; }
  header .live-line { grid-column: 2; grid-row: 1; width: auto; margin: 0; justify-content: flex-end !important; }
  header .connection-badge { min-width: 9px; width: 9px; height: 9px; overflow: hidden; padding: 0; border-radius: 999px; color: transparent !important; font-size: 0; }
  header .header-actions { width: auto !important; display: flex !important; flex-wrap: nowrap !important; gap: 5px !important; justify-content: flex-end; }
  header .header-actions > :not(#global-create-btn):not(#notification-center-btn):not(.hdr-more) { display: none !important; }
  header #global-create-btn { min-width: 78px; min-height: 40px; padding: 5px 10px; border-radius: 12px; font-size: 11px; }
  header #notification-center-btn, header .hdr-more > summary { width: 40px !important; min-width: 40px; height: 40px; min-height: 40px; padding: 0 !important; border-radius: 12px; }
  header .hdr-more-menu #quick-theme-btn,
  header .hdr-more-menu #lang-toggle { display: flex !important; width: 100% !important; min-height: 42px; justify-content: flex-start; padding: 8px 10px !important; }
  .hdr-more[open] .hdr-more-menu { top: calc(58px + var(--safe-top)); bottom: auto; inset-inline: 8px; max-height: min(64dvh,520px); }

  /* Install/preview remain under More; floating buttons never cover work. */
  .phone-view-fab, .home-install-fab { display: none !important; }

  .app-layout { padding: 7px 8px calc(72px + var(--safe-bottom)) !important; }
  .global-search-wrap { position: relative !important; top: auto !important; margin: 0 0 7px !important; }
  #global-search { height: 40px !important; min-height: 40px !important; padding: 7px 38px 7px 10px !important; border-radius: 12px; font-size: 12px; }
  .global-search-wrap::before { top: 10px !important; inset-inline-start: 12px !important; width: 18px !important; height: 18px !important; }
  .hero-row { min-height: 34px; display: flex !important; flex-direction: row !important; align-items: center !important; margin: 0 0 6px !important; }
  .hero-row h2 { margin: 0 !important; font-size: 17px !important; }
  .hero-row p, #view-actions { display: none !important; }

  /* Main navigation is shorter and unobstructed. */
  .main-nav { inset-inline: 6px !important; bottom: calc(5px + var(--safe-bottom)) !important; min-height: 58px; padding: 4px !important; border-radius: 16px !important; }
  .main-nav .nav-btn { flex-basis: 62px !important; min-height: 50px !important; padding: 3px 4px !important; gap: 1px !important; }
  .main-nav .nav-btn b { max-width: 62px !important; font-size: 8px !important; }
  .main-nav .nav-icon { width: 26px !important; height: 25px !important; }

  /* Dashboard: counts and filters become one compact horizontal strip. */
  .mobile-quick-filter-strip { display: flex; gap: 5px; overflow-x: auto; margin: 0 0 6px; padding: 1px 0 4px; scrollbar-width: none; }
  .mobile-quick-filter-strip::-webkit-scrollbar { display: none; }
  .mobile-quick-filter { flex: 0 0 auto; min-width: 66px; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); cursor: pointer; }
  .mobile-quick-filter b { font-size: 10px; white-space: nowrap; }
  .mobile-quick-filter span { min-width: 21px; height: 21px; display: grid; place-items: center; border-radius: 999px; background: var(--panel2); color: var(--muted); font-size: 9px; }
  .mobile-quick-filter.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

  .mobile-task-controlbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; margin: 0 0 7px; padding: 5px; border-radius: 13px; }
  .mobile-primary-view-switcher { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .mobile-primary-view-switcher .btn { min-height: 38px; padding: 4px 9px; font-size: 10px; }
  .mobile-dashboard-options { position: relative; }
  .mobile-dashboard-options > summary { width: 42px; min-width: 42px; min-height: 38px; display: grid; place-items: center; padding: 0; list-style: none; }
  .mobile-dashboard-options > summary::-webkit-details-marker { display: none; }
  .mobile-dashboard-options > summary span { display: none; }
  .mobile-dashboard-options > summary b { font-size: 15px; }
  .mobile-dashboard-options-sheet { position: fixed; inset: auto 7px calc(67px + var(--safe-bottom)); z-index: 10020; max-height: min(72dvh,620px); overflow-y: auto; display: grid; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); box-shadow: 0 22px 64px rgba(15,23,42,.28); }
  .mobile-options-head { display: grid; gap: 2px; }
  .mobile-options-head small { color: var(--muted); font-size: 9px; }
  .mobile-dashboard-options-sheet .saved-view-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; }
  .mobile-dashboard-options-sheet .saved-view-controls select { grid-column: 1 / -1; }
  .mobile-dashboard-options-sheet .saved-view-controls .btn { min-height: 36px; }
  .mobile-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .mobile-filter-grid .field { min-width: 0; }
  .mobile-filter-grid .field label { font-size: 9px; }
  .mobile-filter-grid input, .mobile-filter-grid select { min-width: 0; width: 100%; min-height: 40px; padding: 7px; font-size: 11px; }
  .mobile-secondary-views { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; }
  .mobile-secondary-views > small { grid-column: 1 / -1; color: var(--muted); }
  .mobile-secondary-views .btn { min-height: 37px; font-size: 9px; }
  .mobile-filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; position: sticky; bottom: -12px; padding: 8px 0 0; background: var(--panel); }

  /* Task list/cards show decisions, not configuration. */
  .task-card.collaborative-card { min-height: 0 !important; padding: 10px !important; border-radius: 13px; }
  .task-card .task-card-assignees, .task-card .progress, .task-card .card-stats, .task-card .task-description { display: none !important; }
  .task-card .task-top { align-items: flex-start; gap: 7px; }
  .task-card h3 { font-size: 13px; line-height: 1.45; }
  .task-card .task-card-scope { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
  .task-card .mobile-task-card-facts { display: flex !important; gap: 5px; overflow-x: auto; margin-top: 7px; padding-bottom: 1px; scrollbar-width: none; }
  .task-card .mobile-task-card-facts span { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: var(--panel2); font-size: 9px; }
  .task-card .mobile-practical-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 5px; margin-top: 7px; }
  .task-card .mobile-practical-actions .btn { min-height: 39px !important; padding: 5px 7px; font-size: 9px !important; }
  .task-list-view { display: grid; gap: 6px; }
  .task-list-row { min-height: 58px; grid-template-columns: 10px minmax(0,1fr) auto !important; gap: 7px; padding: 8px 9px; border-radius: 12px; }
  .task-list-row > input { display: none; }
  .task-list-row .row-main b { font-size: 12px; }
  .task-list-row .row-main small { font-size: 9px; }
  .task-list-row > span:not(.status-dot):not(.priority) { display: none !important; }
  .task-list-row .priority { font-size: 8px; padding: 3px 6px; }

  .assignment-drop-rail, .board-scroll-toolbar { display: none !important; }
  .mobile-board-shell { margin: 0; }
  .mobile-board-shell .board-scroll-viewport { padding: 0; }
  .mobile-board-shell .kanban-board { grid-auto-columns: minmax(265px,86vw); gap: 7px; padding: 5px; border-radius: 13px; }
  .mobile-board-shell .kanban-column { min-height: 240px; max-height: calc(100dvh - 205px); padding: 7px; }
  .mobile-board-shell .kanban-empty { padding: 14px 8px; }

  /* v1.24.6 — fast task creation: fields first, explanations hidden. */
  #create-dialog .dialog-card { min-height: 100dvh; }
  #create-dialog .dialog-head { min-height: 44px; padding: 4px 8px !important; }
  #create-dialog .create-head p,
  #create-dialog .full-board-hint,
  #create-dialog .pro-create-guide,
  #create-dialog .pro-create-principle { display: none !important; }
  #create-dialog .create-head h3 { font-size: 13px; gap: 5px; }
  #create-dialog .create-head h3 .ui-icon { width: 17px; height: 17px; }
  #create-dialog .create-head .icon-btn { width: 36px; min-width: 36px; height: 36px; }
  #create-dialog .create-wizard-steps { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 2px; margin: 3px 7px 4px !important; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
  #create-dialog .create-wizard-steps .create-step { min-width: 0; min-height: 30px; display: flex; justify-content: center; gap: 3px; padding: 2px 3px; border-radius: 8px; font-size: 8px; white-space: nowrap; overflow: hidden; }
  #create-dialog .create-wizard-steps .create-step span { width: 17px; height: 17px; flex: 0 0 17px; font-size: 8px; }
  #create-dialog .create-wizard-body { padding: 2px 8px 60px; }
  #create-dialog .stage-heading { display: none !important; }
  #create-dialog .create-grid { gap: 6px; }
  #create-dialog .field { gap: 2px; }
  #create-dialog .field label { font-size: 9px; line-height: 1.25; }
  #create-dialog .field > small,
  #create-dialog .quick-assignee-field > small,
  #create-dialog .approval-empty-state,
  #create-dialog #create-approval-management-note { display: none !important; }
  #create-dialog input, #create-dialog select, #create-dialog textarea { min-height: 40px; padding: 7px 8px; border-radius: 9px; font-size: 16px; }
  #create-dialog textarea { min-height: 72px; }
  #create-dialog .create-optional-details { border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); overflow: hidden; }
  #create-dialog .create-optional-details > summary { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; cursor: pointer; list-style: none; font-size: 10px; font-weight: 800; }
  #create-dialog .create-optional-details > summary::-webkit-details-marker { display: none; }
  #create-dialog .create-optional-details > summary::after { content: '＋'; color: var(--accent); font-size: 15px; }
  #create-dialog .create-optional-details[open] > summary::after { content: '−'; }
  #create-dialog .create-optional-details > summary span { color: var(--muted); font-size: 8px; font-weight: 600; }
  #create-dialog .create-optional-body { display: grid; gap: 7px; padding: 0 8px 8px; }
  #create-dialog .create-approval-controls,
  #create-dialog #task-create-approval-help,
  #create-dialog #task-approval-preview { display: none !important; }
  #create-dialog .create-wizard-actions { min-height: 54px; position: fixed !important; inset: auto 0 0; z-index: 10030; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 5px; padding: 5px 8px calc(5px + var(--safe-bottom)) !important; margin: 0; background: color-mix(in srgb,var(--panel) 97%,transparent); backdrop-filter: blur(16px); }
  #create-dialog #cancel-create { display: none !important; }
  #create-dialog .wizard-action-group { flex: 1; display: grid !important; grid-template-columns: .8fr 1.4fr !important; gap: 5px; }
  #create-dialog .wizard-action-group .btn { min-height: 41px; padding: 5px 8px; }
  #create-dialog .wizard-action-group .btn:last-child { grid-column: auto !important; }
  #create-dialog #create-submit:not([hidden]) { grid-column: 1 / -1 !important; }
  #create-dialog #create-submit[hidden], #create-dialog #create-back[hidden], #create-dialog #create-next[hidden] { display: none !important; }
  #create-dialog .create-link-context { margin: 3px 7px 4px; padding: 6px 7px; }

  /* Phone preview marker is useful on desktop preview only, not on a real phone. */
  html.phone-preview-mode body::before { height: 18px; font-size: 8px; }
  html.phone-preview-mode body { padding-top: 18px; }
}

@media (max-width: 390px) {
  header #global-create-btn { min-width: 64px; }
  header #global-create-btn .ui-icon { display: none; }
  .mobile-filter-grid { grid-template-columns: 1fr; }
  #create-dialog .create-wizard-steps .create-step { font-size: 0; }
  #create-dialog .create-wizard-steps .create-step span { font-size: 8px; }
}

/* v1.24.8 — universal mobile focus policy --------------------------------- */
.mobile-focus-hidden { display: none !important; }

@media (max-width: 760px) {
  body.mobile-global-focus #view-content {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding-bottom: 4px;
  }
  body.mobile-global-focus #view-content > * { min-width: 0; }
  body.mobile-global-focus .mobile-focus-secondary-copy { display: none !important; }

  /* Every crowded screen gets one consistent, closed-by-default drawer. */
  .mobile-focus-drawer {
    min-width: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    overflow: hidden;
  }
  .mobile-focus-drawer > summary {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 7px 10px;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .mobile-focus-drawer > summary::-webkit-details-marker { display: none; }
  .mobile-focus-drawer > summary > span { min-width: 0; display: grid; gap: 1px; }
  .mobile-focus-drawer > summary b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.35;
  }
  .mobile-focus-drawer > summary small { color: var(--muted); font-size: 8px; }
  .mobile-focus-drawer > summary i {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--panel2);
    color: var(--accent-text,var(--teal));
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
  }
  .mobile-focus-drawer[open] > summary { border-bottom: 1px solid var(--line); background: var(--panel2); }
  .mobile-focus-drawer[open] > summary i { transform: rotate(45deg); }
  .mobile-focus-drawer-body { min-width: 0; display: grid; gap: 7px; padding: 7px; }

  .mobile-focus-tools { order: -1; }
  .mobile-focus-tools > summary { min-height: 38px; }
  .mobile-focus-tools .toolbar,
  .mobile-focus-tools .resource-toolbar,
  .mobile-focus-tools .planning-controls,
  .mobile-focus-tools .bulk-bar {
    margin: 0 !important;
    padding: 7px !important;
    border: 0 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
  }
  .mobile-focus-tools .toolbar,
  .mobile-focus-tools .resource-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px !important;
  }
  .mobile-focus-tools label { min-width: 0; display: grid; gap: 3px; font-size: 8px; }
  .mobile-focus-tools input,
  .mobile-focus-tools select { width: 100%; min-width: 0; min-height: 39px; padding: 6px 7px; font-size: 11px; }
  .mobile-focus-tools .btn { min-height: 38px; padding: 5px 7px; font-size: 9px; }

  /* Large settings/HR/report areas become professional accordions. */
  .mobile-focus-accordion { margin: 0; }
  .mobile-focus-accordion > summary { min-height: 44px; }
  .mobile-focus-accordion > summary b { font-size: 12px; }
  .mobile-focus-accordion > .mobile-focus-drawer-body { padding: 5px; }
  .mobile-focus-panel-source {
    margin: 0 !important;
    padding: 8px !important;
    border: 0 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .mobile-focus-panel-source > .section-title { min-height: 0; margin: 0 0 5px; }
  .mobile-focus-panel-source > .section-title h3,
  .mobile-focus-panel-source > h3:first-child,
  .mobile-focus-panel-source > h4:first-child { display: none; }

  /* Compact common screens without deleting functionality. */
  body.mobile-global-focus .panel,
  body.mobile-global-focus .section-panel { padding: 9px; border-radius: 12px; }
  body.mobile-global-focus .section-title { gap: 6px; margin-bottom: 6px; }
  body.mobile-global-focus .section-title h3 { font-size: 12px; }
  body.mobile-global-focus .section-title > span { min-width: 24px; min-height: 24px; font-size: 9px; }
  body.mobile-global-focus .grid.two,
  body.mobile-global-focus .professional-sections,
  body.mobile-global-focus .notification-settings-grid,
  body.mobile-global-focus .access-control-grid,
  body.mobile-global-focus .approval-template-layout { grid-template-columns: 1fr !important; gap: 6px !important; }

  body.mobile-global-focus .tabs {
    position: sticky;
    top: calc(58px + var(--safe-top));
    z-index: 30;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px;
    margin: 0 0 5px !important;
    padding: 4px !important;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb,var(--panel) 96%,transparent);
    backdrop-filter: blur(14px);
    scrollbar-width: none;
  }
  body.mobile-global-focus .tabs::-webkit-scrollbar { display: none; }
  body.mobile-global-focus .tabs button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 5px 9px;
    border-radius: 9px;
    font-size: 9px;
    white-space: nowrap;
  }

  body.mobile-global-focus .settings-row,
  body.mobile-global-focus .notification-row,
  body.mobile-global-focus .audit-row {
    min-height: 50px;
    gap: 7px;
    padding: 7px 8px;
    border-radius: 10px;
  }
  body.mobile-global-focus .settings-row b,
  body.mobile-global-focus .notification-row b { font-size: 10px; }
  body.mobile-global-focus .settings-row small,
  body.mobile-global-focus .notification-row small { font-size: 8px; line-height: 1.4; }
  body.mobile-global-focus .settings-row .btn,
  body.mobile-global-focus .notification-row .btn { min-height: 34px; padding: 4px 7px; font-size: 8px; }

  body.mobile-global-focus .company-grid,
  body.mobile-global-focus .directory-grid,
  body.mobile-global-focus .template-grid,
  body.mobile-global-focus .admin-setup-grid,
  body.mobile-global-focus .custom-dashboard-grid,
  body.mobile-global-focus .automation-grid,
  body.mobile-global-focus .workload-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  body.mobile-global-focus .setup-card,
  body.mobile-global-focus .company-card,
  body.mobile-global-focus .template-card,
  body.mobile-global-focus .workload-card {
    min-height: 0 !important;
    padding: 9px !important;
    border-radius: 12px !important;
  }
  body.mobile-global-focus .setup-card small { display: none !important; }

  /* KPI and summary data remain available as a short horizontal strip. */
  body.mobile-global-focus .kpis,
  body.mobile-global-focus .workload-summary,
  body.mobile-global-focus .mini-metrics {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 1px 0 4px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.mobile-global-focus .kpis::-webkit-scrollbar,
  body.mobile-global-focus .workload-summary::-webkit-scrollbar,
  body.mobile-global-focus .mini-metrics::-webkit-scrollbar { display: none; }
  body.mobile-global-focus .kpi,
  body.mobile-global-focus .workload-summary > span,
  body.mobile-global-focus .mini-metrics > span {
    flex: 0 0 auto;
    min-width: 92px;
    min-height: 48px;
    padding: 7px 9px !important;
    border-radius: 11px !important;
  }
  body.mobile-global-focus .kpi strong { font-size: 17px; }
  body.mobile-global-focus .kpi span { font-size: 8px; }

  /* Tables scroll inside the screen instead of widening the page. */
  body.mobile-global-focus .table-wrap,
  body.mobile-global-focus .permission-table-wrap { max-width: 100%; overflow-x: auto; border-radius: 9px; }
  body.mobile-global-focus table { min-width: 620px; font-size: 9px; }
  body.mobile-global-focus th,
  body.mobile-global-focus td { padding: 6px 7px; }

  /* All dialogs follow the same practical shell. */
  dialog.mobile-focus-dialog { width: 100vw !important; max-width: 100vw !important; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; }
  dialog.mobile-focus-dialog > .dialog-card,
  dialog.mobile-focus-dialog > form,
  dialog.mobile-focus-dialog > .phone-view-card {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto;
    padding-bottom: calc(62px + var(--safe-bottom));
  }
  dialog.mobile-focus-dialog .dialog-head {
    position: sticky;
    top: 0;
    z-index: 25;
    min-height: 46px;
    padding: 5px 8px !important;
    background: color-mix(in srgb,var(--panel) 97%,transparent);
    backdrop-filter: blur(16px);
  }
  dialog.mobile-focus-dialog .dialog-head h3 { font-size: 13px; }
  dialog.mobile-focus-dialog .dialog-head .icon-btn { width: 36px; min-width: 36px; height: 36px; }
  dialog.mobile-focus-dialog .dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 25;
    min-height: 54px;
    display: flex;
    gap: 5px;
    padding: 5px 8px calc(5px + var(--safe-bottom)) !important;
    margin-top: 7px;
    background: color-mix(in srgb,var(--panel) 97%,transparent);
    backdrop-filter: blur(16px);
  }
  dialog.mobile-focus-dialog .dialog-actions > .btn { flex: 1; min-height: 41px; }
  dialog.mobile-focus-dialog .mobile-focus-action-hidden { display: none !important; }
  dialog.mobile-focus-dialog .mobile-action-more { flex: 0 0 44px; overflow: visible; }
  dialog.mobile-focus-dialog .mobile-action-more > summary { min-height: 41px; width: 44px; padding: 0; justify-content: center; }
  dialog.mobile-focus-dialog .mobile-action-more > summary > span small,
  dialog.mobile-focus-dialog .mobile-action-more > summary > span b { display: none; }
  dialog.mobile-focus-dialog .mobile-action-more > summary i { width: 30px; height: 30px; }
  dialog.mobile-focus-dialog .mobile-action-more > .mobile-focus-drawer-body {
    position: fixed;
    inset: auto 8px calc(62px + var(--safe-bottom));
    z-index: 10050;
    max-height: 55dvh;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--panel);
    box-shadow: 0 20px 60px rgba(15,23,42,.28);
  }
  dialog.mobile-focus-dialog .mobile-action-more .btn { width: 100%; min-height: 42px; }

  #entity-dialog #entity-fields { gap: 6px; padding: 7px 8px calc(62px + var(--safe-bottom)); }
  #entity-dialog #entity-fields > .field { gap: 2px; }
  #entity-dialog #entity-fields label { font-size: 9px; }
  #entity-dialog #entity-fields input,
  #entity-dialog #entity-fields select,
  #entity-dialog #entity-fields textarea { min-height: 40px; padding: 7px 8px; font-size: 16px; }
  #entity-dialog .mobile-form-extra,
  .mobile-generic-form-extra { grid-column: 1 / -1; }
  #entity-dialog .mobile-form-extra .mobile-focus-drawer-body,
  .mobile-generic-form-extra .mobile-focus-drawer-body { padding: 7px; }
  #entity-dialog .mobile-form-extra .field,
  .mobile-generic-form-extra .field { min-width: 0; }

  .mobile-dialog-help { margin: 6px 8px; }
  .mobile-dialog-help .home-install-preview,
  .mobile-dialog-help .home-install-steps,
  .mobile-dialog-help .phone-steps,
  .mobile-dialog-help .phone-view-note { margin: 0 !important; }

  /* Notification and report content begins with the actionable list/data. */
  body.mobile-global-focus [data-mobile-focus-view="notifications"] > .notification-list { order: -3; }
  body.mobile-global-focus [data-mobile-focus-view="reports"] > .report-kpis { order: -1; }
  body.mobile-global-focus [data-mobile-focus-view="resources"] > .tabs { order: -3; }
}

@media (max-width: 760px) {
  .mobile-focus-panel-source > .section-title small,
  .mobile-focus-panel-source > p.meta:not([role="status"]),
  .mobile-focus-panel-source > .meta:not([role="status"]) { display: none !important; }
}

/* v1.24.8 — compact approval and connected-task creation ------------------- */
#create-dialog .create-feature-card {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  border-radius: 14px;
  background: color-mix(in srgb,var(--accent) 3%,var(--panel));
}
#create-dialog .create-feature-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#create-dialog .create-feature-head > div { display: grid; gap: 2px; min-width: 0; }
#create-dialog .create-feature-head b { font-size: 13px; }
#create-dialog .create-feature-head small {
  max-width: 520px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#create-dialog .compact-feature-switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  cursor: pointer;
}
#create-dialog .compact-feature-switch input { width: 17px; height: 17px; min-height: 0; margin: 0; }
#create-dialog .compact-feature-switch span { font-size: 10px; font-weight: 800; }
#create-dialog .feature-count {
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
}
#create-dialog .create-feature-body {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
#create-dialog .create-feature-body[hidden] { display: none !important; }
#create-dialog .compact-select-label { display: grid; grid-template-columns: 70px minmax(0,1fr); align-items: center; gap: 8px; }
#create-dialog .compact-select-label > span { font-size: 10px; font-weight: 800; }
#create-dialog .create-feature-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
#create-dialog .create-feature-actions > .btn,
#create-dialog .create-feature-actions > details > summary { width: 100%; min-height: 38px; }
#create-dialog .compact-action-menu { position: relative; }
#create-dialog .compact-action-menu > summary { display: grid; place-items: center; list-style: none; cursor: pointer; }
#create-dialog .compact-action-menu > summary::-webkit-details-marker { display: none; }
#create-dialog .compact-action-menu-body {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 5px);
  z-index: 10035;
  min-width: 190px;
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 16px 42px rgba(15,23,42,.18);
}
#create-dialog .compact-action-menu-body .btn { width: 100%; justify-content: flex-start; }
#create-dialog .compact-approval-preview { min-width: 0; }
#create-dialog .approval-compact-empty {
  width: 100%;
  min-height: 38px;
  border: 1px dashed color-mix(in srgb,var(--accent) 45%,var(--line));
  border-radius: 10px;
  background: var(--panel2);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
#create-dialog .compact-approval-flow {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 1px 0 3px;
  scrollbar-width: none;
}
#create-dialog .compact-approval-flow::-webkit-scrollbar { display: none; }
#create-dialog .compact-approval-flow > span {
  flex: 0 0 auto;
  min-width: 130px;
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  gap: 1px 6px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
#create-dialog .compact-approval-flow i {
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-style: normal;
  font-size: 9px;
  font-weight: 900;
}
#create-dialog .compact-approval-flow b { font-size: 10px; }
#create-dialog .compact-approval-flow small { color: var(--muted); font-size: 8px; }
#create-dialog .compact-link-panel { padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel2); }
#create-dialog .compact-link-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
#create-dialog .compact-link-grid label { display: grid; gap: 3px; min-width: 0; font-size: 9px; font-weight: 800; }
#create-dialog .compact-link-grid .full { grid-column: 1 / -1; }
#create-dialog .compact-link-grid .btn { align-self: end; min-height: 40px; }
#create-dialog .compact-next-task-switch { min-height: 40px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }

@media (max-width:760px) {
  /* Restore the two important creation features, but keep them compact. */
  #create-dialog #task-approval-preview { display: block !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  #create-dialog .create-feature-card { gap: 6px; padding: 7px; border-radius: 11px; }
  #create-dialog .create-feature-head b { font-size: 11px; }
  #create-dialog .create-feature-head small { max-width: 220px; font-size: 8px; }
  #create-dialog .compact-feature-switch { min-height: 30px; padding: 3px 7px; }
  #create-dialog .compact-feature-switch input { width: 15px; height: 15px; }
  #create-dialog .compact-feature-switch span { font-size: 8px; }
  #create-dialog .feature-count { min-width: 22px; height: 22px; font-size: 8px; }
  #create-dialog .create-feature-body { gap: 6px; padding-top: 6px; }
  #create-dialog .compact-select-label { grid-template-columns: 48px minmax(0,1fr); gap: 5px; }
  #create-dialog .compact-select-label > span { font-size: 8px; }
  #create-dialog .create-feature-actions { gap: 5px; }
  #create-dialog .create-feature-actions .btn,
  #create-dialog .create-feature-actions summary { min-height: 34px; padding: 4px 6px; font-size: 8px; }
  #create-dialog .compact-action-menu-body { position: fixed; inset: auto 8px calc(58px + var(--safe-bottom)); min-width: 0; }
  #create-dialog .compact-approval-flow > span { min-width: 112px; padding: 5px; }
  #create-dialog .compact-approval-flow b { font-size: 8px; }
  #create-dialog .compact-approval-flow small { font-size: 7px; }
  #create-dialog .approval-compact-empty { min-height: 34px; font-size: 8px; }
  #create-dialog .compact-link-panel { padding: 6px; }
  #create-dialog .compact-link-grid { gap: 5px; }
  #create-dialog .compact-link-grid label { font-size: 8px; }
  #create-dialog .compact-link-grid input,
  #create-dialog .compact-link-grid select { min-height: 36px; font-size: 13px; }
  #create-dialog .compact-next-task-switch { min-height: 36px; font-size: 9px; }

  /* Approval editor becomes a focused full-screen sheet, not a long card inside the wizard. */
  #create-dialog #create-approval-builder-panel:not(.hidden) {
    position: fixed;
    inset: 42px 0 calc(54px + var(--safe-bottom));
    z-index: 10040;
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: none;
    overflow-y: auto;
    padding: 8px;
    border: 0;
    border-radius: 0;
    background: var(--panel);
    box-shadow: none;
  }
  #create-dialog #create-approval-builder-panel .approval-builder-head { min-height: 36px; padding: 2px 0 6px; }
  #create-dialog #create-approval-builder-subtitle,
  #create-dialog #create-approval-refresh-users,
  #create-dialog #create-approval-builder-panel .approval-scope-note,
  #create-dialog #create-approval-builder-panel .approval-rule-grid { display: none !important; }
  #create-dialog #create-approval-builder-panel .create-inline-approval-builder { max-height: none; overflow: visible; padding: 6px; }
  #create-dialog #create-approval-builder-panel .create-approval-step-editor { gap: 5px; padding: 6px; }
  #create-dialog #create-approval-builder-panel .approval-step-actions .danger { font-size: 0; }
  #create-dialog #create-approval-builder-panel .approval-step-actions .danger::after { content: '×'; font-size: 13px; }
  #create-dialog #create-approval-builder-panel .inline-builder-actions { position: sticky; bottom: -8px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 6px 0 0; background: var(--panel); }
  #create-dialog #create-approval-builder-panel #create-approval-builder-cancel { display: none !important; }
  #create-dialog #create-approval-builder-panel .inline-builder-actions .btn { min-height: 39px; font-size: 9px; }
}

/* ======================================================================
   v1.25.0 — Professional Mobile Foundation
   A task-first phone shell. Desktop layout remains unchanged.
   ====================================================================== */
:root {
  --mobile-shell-bg: #f4f7fb;
  --mobile-shell-surface: #ffffff;
  --mobile-shell-line: color-mix(in srgb, var(--line) 82%, transparent);
  --mobile-shell-text: var(--text);
  --mobile-shell-muted: var(--muted);
  --mobile-shell-accent: var(--accent);
  --mobile-shell-radius: 16px;
  --mobile-shell-touch: 44px;
}

.mobile-role-menu { display: none; }
#phone-view-fab,
#home-install-fab { display: none !important; }

@media (max-width: 760px), (pointer: coarse), (hover: none) {
  html.phone-mobile-view,
  html.phone-preview-mode { background: var(--mobile-shell-bg); }

  html.phone-mobile-view body,
  html.phone-preview-mode body {
    background: var(--mobile-shell-bg);
    overscroll-behavior-y: contain;
  }

  html.phone-mobile-view #app-view,
  html.phone-preview-mode #app-view { min-height: 100dvh; }

  html.phone-mobile-view header,
  html.phone-preview-mode header {
    position: sticky;
    inset-block-start: 0;
    z-index: 120;
    min-height: 58px;
    padding: max(8px, env(safe-area-inset-top)) 10px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--mobile-shell-line);
    box-shadow: 0 3px 18px rgba(15, 23, 42, .06);
  }

  html.phone-mobile-view header .brand-line,
  html.phone-preview-mode header .brand-line {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  html.phone-mobile-view #app-main-title,
  html.phone-preview-mode #app-main-title {
    margin: 0;
    min-width: 0;
    font-size: 13px !important;
    line-height: 1.2;
  }

  html.phone-mobile-view #app-main-title span:last-child,
  html.phone-preview-mode #app-main-title span:last-child {
    display: block;
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.phone-mobile-view #user-line,
  html.phone-preview-mode #user-line,
  html.phone-mobile-view .live-line,
  html.phone-preview-mode .live-line,
  html.phone-mobile-view .version-chip,
  html.phone-preview-mode .version-chip,
  html.phone-mobile-view #quick-theme-btn,
  html.phone-preview-mode #quick-theme-btn,
  html.phone-mobile-view #refresh-btn,
  html.phone-preview-mode #refresh-btn,
  html.phone-mobile-view #logout-btn,
  html.phone-preview-mode #logout-btn,
  html.phone-mobile-view .desktop-utility-menu,
  html.phone-preview-mode .desktop-utility-menu {
    display: none !important;
  }

  html.phone-mobile-view .header-actions,
  html.phone-preview-mode .header-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
  }

  html.phone-mobile-view .header-actions > .btn,
  html.phone-preview-mode .header-actions > .btn,
  html.phone-mobile-view .hdr-more > summary,
  html.phone-preview-mode .hdr-more > summary {
    width: var(--mobile-shell-touch);
    min-width: var(--mobile-shell-touch);
    height: var(--mobile-shell-touch);
    min-height: var(--mobile-shell-touch);
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 13px;
  }

  html.phone-mobile-view #global-create-btn,
  html.phone-preview-mode #global-create-btn {
    width: auto;
    min-width: var(--mobile-shell-touch);
    padding-inline: 10px;
  }

  html.phone-mobile-view #global-create-btn span:last-child,
  html.phone-preview-mode #global-create-btn span:last-child { display: none; }

  html.phone-mobile-view .hdr-more-menu,
  html.phone-preview-mode .hdr-more-menu {
    position: fixed;
    inset-inline: 10px;
    inset-block-start: calc(60px + env(safe-area-inset-top));
    z-index: 500;
    min-width: 0;
    max-height: min(70dvh, 520px);
    overflow: auto;
    padding: 8px;
    border-radius: 18px;
    background: var(--mobile-shell-surface);
    border: 1px solid var(--mobile-shell-line);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .2);
  }

  html.phone-mobile-view .mobile-role-menu,
  html.phone-preview-mode .mobile-role-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .mobile-role-menu-item {
    min-height: 52px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--mobile-shell-line);
    border-radius: 13px;
    background: var(--panel2);
    color: var(--mobile-shell-text);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    text-align: start;
  }

  .mobile-role-menu-item svg { width: 18px; height: 18px; }
  .mobile-role-menu-item.danger { color: var(--red); }

  html.phone-mobile-view .app-layout,
  html.phone-preview-mode .app-layout {
    display: block !important;
    min-height: calc(100dvh - 58px);
  }

  html.phone-mobile-view main,
  html.phone-preview-mode main {
    width: 100%;
    min-width: 0;
    padding: 10px 10px calc(82px + env(safe-area-inset-bottom));
  }

  html.phone-mobile-view .global-search-wrap,
  html.phone-preview-mode .global-search-wrap { display: none !important; }

  body[data-mobile-shell-view="dashboard"] .hero-row,
  body[data-mobile-shell-view="mobileTasks"] .hero-row,
  body[data-mobile-shell-view="mobileMessages"] .hero-row,
  body[data-mobile-shell-view="mobileApprovals"] .hero-row { display: none !important; }

  html.phone-mobile-view #main-nav,
  html.phone-preview-mode #main-nav {
    position: fixed !important;
    inset-inline: 0;
    inset-block: auto 0;
    z-index: 400;
    height: calc(66px + env(safe-area-inset-bottom));
    padding: 5px 7px env(safe-area-inset-bottom);
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    backdrop-filter: blur(18px);
    border: 0;
    border-top: 1px solid var(--mobile-shell-line);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .08);
    overflow: visible !important;
    max-height: none !important;
  }

  html.phone-mobile-view #main-nav .nav-btn,
  html.phone-preview-mode #main-nav .nav-btn {
    position: relative;
    min-width: 0;
    min-height: 54px;
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--mobile-shell-muted);
  }

  html.phone-mobile-view #main-nav .nav-btn .nav-icon,
  html.phone-preview-mode #main-nav .nav-btn .nav-icon {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
  }

  html.phone-mobile-view #main-nav .nav-btn svg,
  html.phone-preview-mode #main-nav .nav-btn svg { width: 21px; height: 21px; }

  html.phone-mobile-view #main-nav .nav-btn b,
  html.phone-preview-mode #main-nav .nav-btn b {
    display: block !important;
    max-width: 100%;
    font-size: 9px;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.phone-mobile-view #main-nav .nav-btn.active,
  html.phone-preview-mode #main-nav .nav-btn.active {
    color: var(--mobile-shell-accent);
    background: color-mix(in srgb, var(--mobile-shell-accent) 10%, transparent);
  }

  .mobile-nav-badge {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: calc(50% + 7px);
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
    box-shadow: 0 0 0 2px var(--panel);
  }

  .mobile-home-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 2px 12px;
  }

  .mobile-home-welcome small,
  .mobile-home-welcome p,
  .mobile-list-header p,
  .mobile-section-title small {
    color: var(--mobile-shell-muted);
  }

  .mobile-home-welcome small { font-size: 10px; }
  .mobile-home-welcome h2 { margin: 3px 0 2px; font-size: 20px; line-height: 1.25; }
  .mobile-home-welcome p { margin: 0; font-size: 11px; }
  .mobile-home-create {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 16px;
    background: var(--mobile-shell-accent);
    color: #fff;
    font-size: 25px;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--mobile-shell-accent) 28%, transparent);
  }

  .mobile-home-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 12px;
  }

  .mobile-home-shortcut {
    min-width: 0;
    min-height: 72px;
    padding: 9px 6px;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--mobile-shell-line);
    border-radius: var(--mobile-shell-radius);
    background: var(--mobile-shell-surface);
    color: var(--mobile-shell-text);
    text-align: start;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .035);
  }

  .mobile-home-shortcut > span { font-size: 19px; }
  .mobile-home-shortcut b { min-width: 0; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-home-shortcut em {
    min-width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--panel2);
    color: var(--mobile-shell-accent);
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
  }

  .mobile-home-section { margin-top: 13px; }
  .mobile-section-title,
  .mobile-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
  }

  .mobile-section-title > div,
  .mobile-list-header > div { min-width: 0; }
  .mobile-section-title b,
  .mobile-list-header h2 { display: block; margin: 0; font-size: 14px; }
  .mobile-section-title small,
  .mobile-list-header p { display: block; margin: 2px 0 0; font-size: 9px; line-height: 1.4; }
  .mobile-section-title > span {
    min-width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--panel2);
    color: var(--mobile-shell-accent);
    font-size: 9px;
    font-weight: 900;
  }
  .mobile-section-title > button {
    min-height: 34px;
    padding: 4px 8px;
    border: 0;
    background: transparent;
    color: var(--mobile-shell-accent);
    font-size: 10px;
    font-weight: 800;
  }

  .mobile-pro-task-list,
  .mobile-message-list { display: grid; gap: 8px; }

  .mobile-pro-task-card {
    padding: 11px;
    border: 1px solid var(--mobile-shell-line);
    border-radius: var(--mobile-shell-radius);
    background: var(--mobile-shell-surface);
    box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
  }

  .mobile-pro-task-card.overdue { border-inline-start: 4px solid var(--red); }
  .mobile-pro-task-card.approval { border-inline-start: 4px solid #d97706; }
  .mobile-pro-task-card.blocked { border-inline-start: 4px solid #64748b; }
  .mobile-pro-task-card.done { border-inline-start: 4px solid var(--green); }

  .mobile-pro-task-head,
  .mobile-pro-task-title,
  .mobile-pro-task-facts,
  .mobile-pro-task-actions {
    display: flex;
    align-items: center;
  }

  .mobile-pro-task-head { justify-content: space-between; gap: 8px; }
  .mobile-pro-task-title { min-width: 0; gap: 8px; }
  .mobile-pro-task-title > div { min-width: 0; }
  .mobile-pro-task-title h3 {
    margin: 0;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .mobile-pro-task-title small {
    display: block;
    margin-top: 2px;
    max-width: 100%;
    color: var(--mobile-shell-muted);
    font-size: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-task-status-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 999px; background: var(--mobile-shell-accent); }
  .mobile-pro-task-card.overdue .mobile-task-status-dot { background: var(--red); }
  .mobile-pro-task-card.approval .mobile-task-status-dot { background: #d97706; }
  .mobile-pro-task-card.blocked .mobile-task-status-dot { background: #64748b; }
  .mobile-pro-task-card.done .mobile-task-status-dot { background: var(--green); }
  .mobile-task-state {
    flex: 0 0 auto;
    max-width: 92px;
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--panel2);
    color: var(--mobile-shell-muted);
    font-size: 8px;
    font-weight: 900;
    white-space: nowrap;
  }

  .mobile-pro-task-facts {
    gap: 5px;
    margin-top: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mobile-pro-task-facts::-webkit-scrollbar { display: none; }
  .mobile-pro-task-facts span {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--panel2);
    color: var(--mobile-shell-muted);
    font-size: 8px;
  }

  .mobile-task-progress {
    height: 4px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 99px;
    background: var(--panel2);
  }
  .mobile-task-progress i { display: block; height: 100%; border-radius: inherit; background: var(--mobile-shell-accent); }

  .mobile-task-latest {
    width: 100%;
    min-height: 42px;
    margin-top: 8px;
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 11px;
    background: var(--panel2);
    color: var(--mobile-shell-text);
    text-align: start;
  }
  .mobile-task-latest.unread { background: color-mix(in srgb, var(--mobile-shell-accent) 9%, var(--panel)); }
  .mobile-task-latest > span:last-child { min-width: 0; }
  .mobile-task-latest b { display: block; font-size: 8px; color: var(--mobile-shell-accent); }
  .mobile-task-latest small { display: block; margin-top: 2px; font-size: 8px; color: var(--mobile-shell-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .mobile-pro-task-actions { gap: 6px; margin-top: 9px; }
  .mobile-pro-task-actions .btn { min-height: 38px; padding: 6px 10px; font-size: 9px; }
  .mobile-pro-task-actions .btn:first-child { flex: 1; }
  .mobile-pro-task-actions em { font-style: normal; }

  .mobile-filter-chips {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mobile-filter-chips::-webkit-scrollbar { display: none; }
  .mobile-filter-chips button {
    min-height: 38px;
    flex: 0 0 auto;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--mobile-shell-line);
    border-radius: 999px;
    background: var(--mobile-shell-surface);
    color: var(--mobile-shell-muted);
    font-size: 9px;
    font-weight: 800;
  }
  .mobile-filter-chips button.active { color: var(--mobile-shell-accent); border-color: color-mix(in srgb, var(--mobile-shell-accent) 42%, var(--mobile-shell-line)); background: color-mix(in srgb, var(--mobile-shell-accent) 8%, var(--panel)); }
  .mobile-filter-chips button span { min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; background: var(--panel2); font-size: 8px; }

  .mobile-message-row {
    position: relative;
    width: 100%;
    min-height: 68px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--mobile-shell-line);
    border-radius: var(--mobile-shell-radius);
    background: var(--mobile-shell-surface);
    color: var(--mobile-shell-text);
    text-align: start;
  }
  .mobile-message-row.unread { border-color: color-mix(in srgb, var(--mobile-shell-accent) 35%, var(--mobile-shell-line)); background: color-mix(in srgb, var(--mobile-shell-accent) 5%, var(--panel)); }
  .mobile-message-avatar { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 12px; background: var(--panel2); color: var(--mobile-shell-accent); font-size: 15px; font-weight: 900; }
  .mobile-message-copy { min-width: 0; flex: 1; }
  .mobile-message-copy > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .mobile-message-copy b { min-width: 0; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-message-copy time { flex: 0 0 auto; color: var(--mobile-shell-muted); font-size: 7px; }
  .mobile-message-copy p { margin: 3px 0; color: var(--mobile-shell-text); font-size: 9px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-message-copy small { color: var(--mobile-shell-muted); font-size: 8px; }
  .mobile-message-row > i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 99px; background: var(--mobile-shell-accent); }
  .mobile-message-row.approval-event .mobile-message-avatar { color: #b45309; background: #fff7ed; }

  .mobile-approval-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 10px;
  }
  .mobile-approval-summary span {
    min-height: 60px;
    padding: 9px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--mobile-shell-line);
    border-radius: var(--mobile-shell-radius);
    background: var(--mobile-shell-surface);
    color: var(--mobile-shell-muted);
    font-size: 9px;
  }
  .mobile-approval-summary b { color: var(--mobile-shell-text); font-size: 19px; }

  .mobile-professional-empty {
    min-height: 116px;
    padding: 18px 14px;
    display: grid;
    place-items: center;
    gap: 5px;
    border: 1px dashed var(--mobile-shell-line);
    border-radius: var(--mobile-shell-radius);
    background: color-mix(in srgb, var(--mobile-shell-surface) 70%, transparent);
    text-align: center;
  }
  .mobile-professional-empty > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 99px; background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); font-weight: 900; }
  .mobile-professional-empty b { font-size: 11px; }
  .mobile-professional-empty p { margin: 0; max-width: 260px; color: var(--mobile-shell-muted); font-size: 9px; line-height: 1.5; }
  .mobile-professional-empty .btn { margin-top: 5px; }

  html.phone-mobile-view .offline-banner,
  html.phone-preview-mode .offline-banner {
    position: sticky;
    inset-block-start: 58px;
    z-index: 110;
    padding: 7px 10px;
    font-size: 9px;
    line-height: 1.35;
  }
}

@media (min-width: 761px) and (pointer: fine) and (hover: hover) {
  .mobile-role-menu { display: none !important; }
}

/* ========================================================================
   v1.25.3 — Delegated Task Points
   ======================================================================== */
.approval-decision-history { display: grid; gap: 9px; }
.approval-history-block { display: grid; gap: 8px; }
.approval-history-block + .approval-history-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.approval-history-block > h4 { margin: 0; font-size: 12px; color: var(--muted); }
.approval-decision-history-card {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 10px;
  padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
}
.approval-decision-history-card.rejected { border-inline-start: 4px solid var(--red); }
.approval-decision-history-card.approved { border-inline-start: 4px solid var(--green); }
.approval-history-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--panel2); font-weight: 900; }
.approval-decision-history-card.rejected .approval-history-icon { color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--panel)); }
.approval-decision-history-card.approved .approval-history-icon { color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--panel)); }
.approval-decision-history-card small,
.approval-decision-history-card span { display: block; color: var(--muted); font-size: 10px; }
.approval-decision-history-card b { display: block; margin: 2px 0; }
.approval-decision-history-card p { margin: 5px 0; line-height: 1.65; white-space: pre-wrap; }
.focus-flash { animation: approval-focus-flash 1.35s ease; }
@keyframes approval-focus-flash { 0%,100% { box-shadow: none; } 35% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent); } }

.task-workflow-sheet { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center; padding: 18px; }
.task-workflow-sheet.hidden { display: none !important; }
.task-sheet-backdrop { position: absolute; inset: 0; border: 0; background: rgba(15, 23, 42, .48); backdrop-filter: blur(3px); }
.task-workflow-sheet-card {
  position: relative; z-index: 1; width: min(520px, 100%); max-height: min(720px, calc(100dvh - 36px)); overflow: auto;
  display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: 0 24px 70px rgba(15, 23, 42, .26);
}
.task-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.task-sheet-head small { color: var(--muted); }
.task-sheet-head h3 { margin: 2px 0 0; }
.approval-decision-context { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--panel2); }
.approval-decision-context span { color: var(--muted); font-size: 11px; line-height: 1.55; }
.task-sheet-actions { display: flex; justify-content: flex-end; gap: 8px; }
.task-sheet-actions.split > * { flex: 1; }
.revision-file-picker { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; cursor: pointer; }
.revision-file-picker input { max-width: 220px; }
.task-workflow-sheet blockquote { margin: 0; padding: 10px 12px; border-inline-start: 4px solid var(--orange); border-radius: 10px; background: color-mix(in srgb, var(--orange) 8%, var(--panel)); line-height: 1.65; }
body.task-workflow-sheet-open { overflow: hidden; }

.mobile-workspace-action-bar { display: none; }

@media (max-width: 760px), (display-mode: standalone) {
  #task-detail-dialog .dialog-card { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  #task-detail-dialog[data-task-tab="messages"] .dialog-card { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  #task-detail-dialog .compact-task-command-bar { display: none !important; }
  .mobile-workspace-action-bar {
    position: fixed; inset-inline: 8px; inset-block-end: calc(58px + env(safe-area-inset-bottom)); z-index: 9020;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 7px;
    border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel) 94%, transparent);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .18); backdrop-filter: blur(12px);
  }
  .mobile-workspace-action-bar.single { grid-template-columns: 1fr; }
  #task-detail-dialog[data-task-tab="messages"] .mobile-workspace-action-bar { display: none; }
  .mobile-workspace-action-bar .btn { min-height: 44px; margin: 0; }
  .task-workflow-sheet { align-items: end; padding: 0; }
  .task-workflow-sheet-card {
    width: 100%; max-height: min(88dvh, 760px); padding: 15px 14px calc(15px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0; animation: task-sheet-up .2s ease-out;
  }
  @keyframes task-sheet-up { from { transform: translateY(22px); opacity: .7; } to { transform: translateY(0); opacity: 1; } }
  .task-sheet-actions { position: sticky; bottom: 0; padding-top: 8px; background: linear-gradient(transparent, var(--panel) 20%); }
  .approval-decision-history-card { grid-template-columns: 30px minmax(0, 1fr); }
  .approval-decision-history-card > .btn { grid-column: 1 / -1; width: 100%; }
  .conversation-timeline { min-height: 44dvh; }
  .conversation-item { scroll-margin-top: 78px; }
}

/* v1.25.3 — Delegated task points --------------------------------------- */
.professional-point-list { gap: 8px; }
.task-point-row-card {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel2) 88%, var(--panel));
}
.task-point-row-card.done { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); }
.task-point-main-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.task-point-main-line .task-point-row { flex: 1; min-width: 0; border: 0; background: transparent; padding: 5px 3px; }
.task-point-main-line .task-point-row small { display: inline; color: var(--muted); font-size: 10px; }
.point-delegate-trigger,
.point-open-linked { flex: 0 0 auto; min-height: 36px; padding-inline: 10px; white-space: nowrap; }
.task-point-row-card.connected { border-inline-start-width: 4px; }
.task-point-row-card.connected.active { border-inline-start-color: var(--accent); }
.task-point-row-card.connected.approval { border-inline-start-color: var(--orange); }
.task-point-row-card.connected.revision { border-inline-start-color: #f97316; background: color-mix(in srgb, #f97316 4%, var(--panel2)); }
.task-point-row-card.connected.blocked,
.task-point-row-card.connected.cancelled { border-inline-start-color: var(--red); }
.task-point-row-card.connected.done { border-inline-start-color: var(--green); }
.task-point-linked-summary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 11px;
  background: var(--panel);
}
.point-link-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--accent) 12%, var(--panel2)); color: var(--accent); font-weight: 900; }
.point-link-title { min-width: 0; padding: 0; border: 0; background: transparent; text-align: start; color: inherit; cursor: pointer; }
.point-link-title b,
.point-link-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.point-link-title small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.point-link-condition { padding: 5px 8px; border-radius: 999px; background: var(--panel2); color: var(--muted); font-size: 9px; font-weight: 800; white-space: nowrap; }
.task-point-linked-actions { display: flex; align-items: center; gap: 10px; min-height: 24px; padding-inline: 4px; }
.point-auto-complete { margin-inline-start: auto; color: var(--green); font-size: 10px; font-weight: 900; }
.point-sync-state { margin-inline-start: auto; padding: 4px 7px; border-radius: 999px; background: var(--panel2); color: var(--muted); font-size: 9px; font-weight: 900; white-space: nowrap; }
.point-sync-state.satisfied { color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--panel2)); }
.point-sync-state.revision_required, .point-sync-state.waiting_approval { color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, var(--panel2)); }
.point-sync-state.blocked, .point-sync-state.cancelled, .point-sync-state.archived, .point-sync-state.missing { color: var(--red); background: color-mix(in srgb, var(--red) 9%, var(--panel2)); }
.task-point-linked-actions .link-btn.subtle { color: var(--muted); }
.point-link-sheet-card { width: min(620px, 100%); }
.point-link-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.point-link-mode-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel2);
  color: inherit;
  text-align: start;
  cursor: pointer;
}
.point-link-mode-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-1px); }
.point-link-mode-card > span { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--accent) 13%, var(--panel)); color: var(--accent); font-size: 20px; font-weight: 900; }
.point-link-mode-card b { font-size: 13px; }
.point-link-mode-card small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.point-link-form { display: grid; gap: 11px; }
.point-link-form.hidden,
.point-link-choice.hidden { display: none !important; }
.point-link-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.point-custom-reviewers { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); }
.point-custom-reviewers.hidden { display: none !important; }
.point-custom-reviewers > small { color: var(--muted); font-size: 10px; }
.point-custom-reviewers > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 210px; overflow: auto; }
.point-reviewer-choice { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.point-reviewer-choice span,
.point-reviewer-choice b,
.point-reviewer-choice small { display: block; }
.point-reviewer-choice small { color: var(--muted); font-size: 9px; }
#point-existing-task { min-height: 190px; }

@media (max-width: 760px), (display-mode: standalone) {
  #task-detail-dialog .task-point-row-card { padding: 7px; border-radius: 12px; }
  #task-detail-dialog .task-point-main-line .task-point-row { min-height: 42px; padding: 5px 2px; font-size: 12px; }
  #task-detail-dialog .point-delegate-trigger,
  #task-detail-dialog .point-open-linked { min-height: 38px; padding-inline: 9px; font-size: 10px; }
  .task-point-linked-summary { grid-template-columns: 26px minmax(0, 1fr); padding: 7px; }
  .point-link-condition { grid-column: 2; justify-self: start; }
  .task-point-linked-actions { gap: 8px; }
  .point-link-choice { grid-template-columns: 1fr; }
  .point-link-mode-card { min-height: 70px; }
  .point-link-form-grid { grid-template-columns: 1fr; }
  .point-custom-reviewers > div { grid-template-columns: 1fr; max-height: 180px; }
  .point-link-sheet-card { min-height: min(72dvh, 620px); }
  #point-existing-task { min-height: 34dvh; }
}
.task-origin-point-banner {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  color: inherit;
  text-align: start;
  cursor: pointer;
}
.task-origin-point-banner > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--panel); color: var(--accent); font-weight: 900; }
.task-origin-point-banner small,
.task-origin-point-banner b,
.task-origin-point-banner em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-origin-point-banner small { color: var(--muted); font-size: 9px; }
.task-origin-point-banner em { color: var(--muted); font-size: 10px; font-style: normal; }
.task-origin-point-banner strong { color: var(--accent); font-size: 10px; white-space: nowrap; }
@media (max-width: 760px), (display-mode: standalone) {
  .task-origin-point-banner { grid-template-columns: 30px minmax(0, 1fr); padding: 8px; }
  .task-origin-point-banner > span { width: 30px; height: 30px; }
  .task-origin-point-banner > strong { grid-column: 2; justify-self: start; }
}

/* v1.25.4 — Multi-task point dependencies ------------------------------- */
.task-point-row-card.multi-link { gap: 8px; }
.point-group-progress {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}
.point-group-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 82%, var(--panel2));
  color: var(--muted);
  font-size: 10px;
}
.point-group-toolbar b { color: var(--text); }
.point-group-rule-control {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.point-group-rule-control span { white-space: nowrap; }
.point-group-rule-control select {
  min-height: 32px;
  width: auto;
  padding: 4px 28px 4px 8px;
  font-size: 10px;
}
.point-group-rule-static {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel2);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}
.task-point-linked-list { display: grid; gap: 6px; }
.task-point-linked-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 8px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-inline-start-width: 3px;
  border-radius: 10px;
  background: var(--panel);
}
.task-point-linked-item.active { border-inline-start-color: var(--accent); }
.task-point-linked-item.approval,
.task-point-linked-item.revision { border-inline-start-color: var(--orange); }
.task-point-linked-item.blocked,
.task-point-linked-item.cancelled { border-inline-start-color: var(--red); }
.task-point-linked-item.done { border-inline-start-color: var(--green); }
.task-point-linked-item .task-point-linked-actions {
  grid-column: 1 / -1;
  min-height: 22px;
  padding: 0;
}
.point-group-rule-sheet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel2));
}
.point-group-rule-sheet span { font-size: 11px; font-weight: 800; }
.point-group-rule-sheet select { width: min(290px, 58%); min-height: 38px; }

@media (max-width: 760px), (display-mode: standalone) {
  .point-group-toolbar { align-items: stretch; flex-direction: column; }
  .point-group-rule-control { justify-content: space-between; }
  .point-group-rule-control select { flex: 1; min-height: 38px; }
  .task-point-linked-item { grid-template-columns: minmax(0, 1fr); }
  .task-point-linked-item .point-link-condition { grid-column: 1; justify-self: start; }
  .task-point-linked-item .task-point-linked-actions { grid-column: 1; flex-wrap: wrap; }
  .task-point-linked-item .point-sync-state { margin-inline-start: auto; }
  .point-group-rule-sheet { align-items: stretch; flex-direction: column; }
  .point-group-rule-sheet select { width: 100%; }
}

/* v1.25.5 exact notification targets */
.notification-target-highlight {
  animation: notification-target-pulse 1.05s ease-in-out 3;
  outline: 3px solid var(--primary, #0b8f87);
  outline: 3px solid color-mix(in srgb, var(--primary, #0b8f87) 48%, transparent);
  outline-offset: 4px;
  border-radius: 12px;
}
@keyframes notification-target-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary, #0b8f87) 0%, transparent); }
  45% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--primary, #0b8f87) 18%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .notification-target-highlight { animation: none; }
}


/* v1.26.0 stability, diagnostics and production readiness */
.upload-tray{position:fixed;z-index:120;inset-inline:16px;bottom:calc(18px + var(--safe-bottom));max-width:560px;margin-inline:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 42px #0003;padding:11px 13px;display:grid;gap:8px}
.upload-tray.hidden{display:none}.upload-tray>div{display:flex;justify-content:space-between;gap:12px;align-items:center}.upload-tray small{color:var(--muted);font-weight:800}.upload-tray progress{width:100%;height:8px;accent-color:var(--teal)}
.offline-banner{justify-content:center;flex-wrap:wrap;gap:10px}.offline-banner .btn{min-height:32px;background:#fff;color:#7f1d1d;border-color:#fecaca}.offline-banner.syncing{background:#9a6700;color:#fff7d6}.offline-banner.syncing .btn{color:#713f12}
.conversation-item.pending-sync{border-style:dashed;opacity:.86}.conversation-item.pending-sync .comment-head span::after{content:' • محفوظ على الجهاز';color:var(--amber);font-weight:800}.offline-cache-age{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--muted)}
@media(max-width:700px){.upload-tray{bottom:calc(76px + var(--safe-bottom));inset-inline:10px}.offline-banner{font-size:11px;padding:7px 10px}.offline-banner #offline-banner-text{flex:1;min-width:210px}}

/* v1.26.0 — system health and production-readiness workspace */
.diagnostic-overview{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--surface);margin-bottom:14px}
.diagnostic-overview>div:first-child{display:flex;align-items:center;gap:14px}.diagnostic-overview h3{margin:0 0 4px}.diagnostic-overview p{margin:0;color:var(--muted)}
.diagnostic-overview-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:24px;font-weight:800}.diagnostic-overview.ready .diagnostic-overview-icon{background:#dcfce7;color:#166534}.diagnostic-overview.degraded .diagnostic-overview-icon{background:#fef3c7;color:#92400e}.diagnostic-overview.not-ready .diagnostic-overview-icon{background:#fee2e2;color:#991b1b}
.diagnostic-quick-stats{display:flex;gap:8px;flex-wrap:wrap}.diagnostic-quick-stats span{display:flex;align-items:baseline;gap:5px;padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);white-space:nowrap}.diagnostic-quick-stats b{font-size:1.08rem}
.diagnostic-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:12px}.diagnostic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:14px}
.diagnostic-card{min-height:112px;padding:14px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}.diagnostic-card.problem{border-color:#f5b6b6;background:#fffafa}.diagnostic-card-head{display:flex;align-items:center;gap:8px}.diagnostic-card-head b{flex:1}.diagnostic-card-head em{font-style:normal;font-size:.76rem;color:var(--muted)}.diagnostic-card.problem .diagnostic-card-head em{color:#a11}.diagnostic-dot{width:9px;height:9px;border-radius:50%;background:#22c55e}.diagnostic-card.problem .diagnostic-dot{background:#ef4444}.diagnostic-card p{margin:10px 0 0;color:var(--muted);line-height:1.55}
.diagnostic-issue-list,.system-error-list{display:grid;gap:8px}.diagnostic-issue{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:start;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer}.diagnostic-issue:hover{border-color:var(--primary)}.diagnostic-issue span{color:var(--muted);font-size:.86rem}
.system-error-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--border);border-radius:13px;background:var(--surface)}.system-error-row.open{border-inline-start:4px solid #ef4444}.system-error-row.resolved{opacity:.78;border-inline-start:4px solid #22c55e}.system-error-main{min-width:0;flex:1}.system-error-main>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.system-error-main p{margin:6px 0;overflow-wrap:anywhere}.system-error-main small{display:block;color:var(--muted);overflow-wrap:anywhere}.system-error-row .row-actions{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:720px){.diagnostic-overview{align-items:flex-start;padding:14px;flex-direction:column}.diagnostic-quick-stats{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.diagnostic-grid{grid-template-columns:1fr}.diagnostic-actions{display:grid;grid-template-columns:1fr 1fr}.diagnostic-actions .btn{min-height:44px}.system-error-row{align-items:stretch;flex-direction:column}.system-error-row .row-actions .btn{flex:1}.section-title{align-items:flex-start}.system-errors-panel .section-title{gap:10px;flex-direction:column}.system-errors-panel .inline-actions{width:100%}.system-errors-panel select{flex:1;min-width:0}}

/* v1.26.2 — unified mobile work inbox ----------------------------------- */
@media (max-width: 760px), (display-mode: standalone) {
  .mobile-inbox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 1px 9px;
  }
  .mobile-inbox-head > div:first-child { min-width: 0; }
  .mobile-inbox-head > div:last-child { display: flex; align-items: center; gap: 6px; }
  .mobile-inbox-head small { color: var(--mobile-shell-muted); font-size: 9px; }
  .mobile-inbox-head h2 { margin: 2px 0; font-size: 16px; line-height: 1.3; }
  .mobile-inbox-head p {
    margin: 0;
    color: var(--mobile-shell-muted);
    font-size: 9px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mobile-inbox-head .mobile-home-create {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 13px;
    font-size: 22px;
    box-shadow: none;
  }
  .mobile-inbox-refresh {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--mobile-shell-line);
    border-radius: 13px;
    background: var(--mobile-shell-surface);
    color: var(--mobile-shell-accent);
    font-size: 18px;
    font-weight: 900;
  }
  .mobile-inbox-refresh:disabled { opacity: .55; }

  .mobile-inbox-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
  }
  .mobile-inbox-summary button {
    min-width: 0;
    min-height: 54px;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border: 1px solid var(--mobile-shell-line);
    border-radius: 12px;
    background: var(--mobile-shell-surface);
    color: var(--mobile-shell-text);
  }
  .mobile-inbox-summary b { color: var(--mobile-shell-accent); font-size: 16px; line-height: 1; }
  .mobile-inbox-summary span {
    max-width: 100%;
    color: var(--mobile-shell-muted);
    font-size: 8px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-inbox-filters { margin-bottom: 8px; }
  .mobile-inbox-filters button { min-height: 34px; padding: 4px 8px; }
  .mobile-inbox-list { display: grid; gap: 7px; }

  .mobile-inbox-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px 9px;
    padding: 9px;
    border: 1px solid var(--mobile-shell-line);
    border-inline-start: 4px solid var(--mobile-shell-accent);
    border-radius: 13px;
    background: var(--mobile-shell-surface);
    box-shadow: 0 3px 12px rgba(15, 23, 42, .035);
  }
  .mobile-inbox-item.revision { border-inline-start-color: #dc2626; }
  .mobile-inbox-item.approval { border-inline-start-color: #d97706; }
  .mobile-inbox-item.assignment,
  .mobile-inbox-item.recent { border-inline-start-color: var(--mobile-shell-accent); }
  .mobile-inbox-item.blocked { border-inline-start-color: #64748b; }
  .mobile-inbox-item.overdue { border-inline-start-color: var(--red); }
  .mobile-inbox-item.message { border-inline-start-color: #7c3aed; }
  .mobile-inbox-item.today { border-inline-start-color: #0891b2; }

  .mobile-inbox-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--panel2);
    color: var(--mobile-shell-accent);
    font-size: 15px;
    font-weight: 900;
  }
  .mobile-inbox-item.revision .mobile-inbox-icon { color: #dc2626; background: color-mix(in srgb, #dc2626 8%, var(--panel2)); }
  .mobile-inbox-item.approval .mobile-inbox-icon { color: #b45309; background: color-mix(in srgb, #d97706 9%, var(--panel2)); }
  .mobile-inbox-item.blocked .mobile-inbox-icon { color: #475569; }
  .mobile-inbox-item.overdue .mobile-inbox-icon { color: var(--red); }
  .mobile-inbox-item.message .mobile-inbox-icon { color: #7c3aed; background: color-mix(in srgb, #7c3aed 8%, var(--panel2)); }
  .mobile-inbox-item.today .mobile-inbox-icon { color: #0891b2; }

  .mobile-inbox-copy { min-width: 0; }
  .mobile-inbox-copy > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .mobile-inbox-copy > div b { color: var(--mobile-shell-accent); font-size: 8px; }
  .mobile-inbox-item.revision .mobile-inbox-copy > div b,
  .mobile-inbox-item.overdue .mobile-inbox-copy > div b { color: var(--red); }
  .mobile-inbox-item.approval .mobile-inbox-copy > div b { color: #b45309; }
  .mobile-inbox-item.message .mobile-inbox-copy > div b { color: #7c3aed; }
  .mobile-inbox-copy time { flex: 0 0 auto; color: var(--mobile-shell-muted); font-size: 7px; }
  .mobile-inbox-copy h3 {
    margin: 2px 0 1px;
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-inbox-copy p {
    margin: 0;
    color: var(--mobile-shell-text);
    font-size: 9px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mobile-inbox-copy small {
    display: block;
    margin-top: 3px;
    color: var(--mobile-shell-muted);
    font-size: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-inbox-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 1px;
  }
  .mobile-inbox-actions .btn {
    min-height: 36px;
    padding: 5px 9px;
    font-size: 9px;
  }
  .mobile-inbox-actions .btn:first-child { flex: 1; }
  .mobile-inbox-next { margin-top: 12px; }
}

/* v1.26.2 — reusable workflow and task templates */
.workflow-template-dialog {
  width: min(1120px, 96vw);
  max-height: 94vh;
}
.workflow-template-form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.workflow-template-form #entity-fields {
  overflow: auto;
  padding-inline-end: 4px;
}
.template-editor-section {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
}
.template-editor-section + .template-editor-section { margin-top: 12px; }
.template-editor-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.template-editor-title > div { min-width: 0; }
.template-editor-title b { display: block; font-size: 15px; }
.template-editor-title small { display: block; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.compact-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.template-notification-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.template-notification-rules label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel2);
  cursor: pointer;
}
.template-child-workflows { display: grid; gap: 10px; }
.template-workflow-child {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 14px;
  padding: 12px;
  background: var(--panel2);
}
.template-workflow-child-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.template-workflow-child-head b,
.template-workflow-child-head small { display: block; }
.template-workflow-child-head small { color: var(--muted); margin-top: 2px; }
.template-workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.template-workflow-grid label {
  display: grid;
  align-content: start;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}
.template-workflow-grid .wide { grid-column: span 2; }
.template-child-details { margin-top: 10px; }
.template-child-details > summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 800;
  padding: 7px 0;
}
.template-workflow-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.template-workflow-summary span,
.required-file-labels span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  font-size: 11px;
}
.template-child-preview { display: grid; gap: 5px; margin-top: 8px; }
.template-child-preview span { color: var(--muted); font-size: 11px; }
.template-create-preview {
  margin-top: 9px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel2));
}
.template-create-preview-head,
.template-create-preview-stats,
.template-create-child-preview {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.template-create-preview-head { justify-content: space-between; }
.template-create-preview-head b,
.template-create-preview-head small { display: block; }
.template-create-preview-head small { color: var(--muted); margin-top: 2px; }
.template-create-preview-head > span {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 800;
}
.template-create-preview-stats { margin-top: 8px; }
.template-create-preview-stats > span {
  padding: 4px 7px;
  border-radius: 9px;
  background: var(--panel);
  border: 1px solid var(--border);
  font-size: 10px;
}
.template-create-child-preview { margin-top: 8px; }
.template-create-child-preview > span {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  column-gap: 5px;
  padding: 5px 7px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.template-create-child-preview > span small { grid-column: 2; color: var(--muted); font-size: 9px; }
.template-create-child-preview em { color: var(--muted); font-style: normal; font-size: 10px; }
.template-required-files .section-title { margin-bottom: 8px; }
.required-file-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }

@media (max-width: 700px) {
  .workflow-template-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .workflow-template-form #entity-fields { padding: 8px; }
  .template-editor-section { padding: 10px; border-radius: 12px; }
  .compact-template-grid,
  .template-notification-rules,
  .template-workflow-grid { grid-template-columns: 1fr; }
  .template-workflow-grid .wide { grid-column: auto; }
  .template-editor-title { align-items: flex-start; }
  .template-workflow-child { padding: 10px; }
  .template-workflow-child-head { align-items: flex-start; }
  .template-create-preview { padding: 8px; }
  .template-create-preview-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .template-create-preview-stats > span { min-width: 0; }
  .template-create-child-preview { display: grid; grid-template-columns: 1fr; }
  .template-create-child-preview > span { width: 100%; }
  .template-required-files { padding: 10px; }
}

/* v1.26.3 — action-oriented manager control dashboard -------------------- */
.manager-control-summary{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.manager-control-metric{min-height:108px;padding:13px;border:1px solid var(--line);border-radius:var(--surface-radius,16px);background:var(--panel);display:flex;flex-direction:column;gap:4px;justify-content:center;box-shadow:0 7px 20px rgba(15,23,42,.045)}
.manager-control-metric strong{font-size:29px;line-height:1;color:var(--accent,var(--teal))}.manager-control-metric b{font-size:13px}.manager-control-metric small{font-size:10px;color:var(--muted);line-height:1.45}
.manager-control-metric.warning{border-color:color-mix(in srgb,#f59e0b 45%,var(--line));background:color-mix(in srgb,#f59e0b 7%,var(--panel))}.manager-control-metric.warning strong{color:#b45309}
.manager-control-metric.danger{border-color:color-mix(in srgb,var(--red) 45%,var(--line));background:color-mix(in srgb,var(--red) 6%,var(--panel))}.manager-control-metric.danger strong{color:var(--red)}
.manager-control-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}.manager-control-queue{min-width:0;margin:0}.manager-control-queue .section-title{margin-bottom:10px}.manager-control-queue .section-title h3{margin:0}.manager-control-queue .section-title small{color:var(--muted)}.manager-control-queue .section-title>span{min-width:30px;height:30px;display:grid;place-items:center;border-radius:999px;background:var(--panel2);font-weight:800}
.manager-control-queue.approval{border-inline-start:4px solid var(--accent,var(--teal))}.manager-control-queue.revision{border-inline-start:4px solid #f59e0b}.manager-control-queue.danger{border-inline-start:4px solid var(--red)}.manager-control-queue.blocked{border-inline-start:4px solid #7c3aed}.manager-control-queue.stale{border-inline-start:4px solid #64748b}
.manager-control-task-list{display:flex;flex-direction:column;gap:7px;max-height:350px;overflow:auto;padding-inline-end:2px}.manager-control-task-row{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}.manager-control-task-row.danger{border-color:color-mix(in srgb,var(--red) 35%,var(--line))}.manager-control-task-main{flex:1;min-width:0;display:flex;align-items:center;gap:8px;text-align:start;background:none;border:0;color:var(--text);padding:0;cursor:pointer}.manager-control-task-main>span:last-child{min-width:0}.manager-control-task-main b,.manager-control-task-main small{display:block}.manager-control-task-main b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.manager-control-task-main small{font-size:9px;color:var(--muted);margin-top:2px}.manager-control-row-actions{display:flex;gap:5px;flex:0 0 auto}
.manager-control-detail-grid{align-items:start}.manager-bottleneck-list,.manager-workload-list,.manager-department-list,.manager-trend-list{display:flex;flex-direction:column;gap:8px;max-height:460px;overflow:auto}.manager-bottleneck-row{display:grid;grid-template-columns:1fr auto;gap:7px;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--panel2)}.manager-bottleneck-row>div:first-child b,.manager-bottleneck-row>div:first-child small{display:block}.manager-bottleneck-row small{color:var(--muted);font-size:9px}.manager-bottleneck-row>span{font-weight:800;color:#b45309}.manager-bottleneck-tasks{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px}.manager-bottleneck-tasks button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:8px;padding:5px 7px;font-size:9px;cursor:pointer}.manager-bottleneck-tasks button:hover{border-color:var(--accent,var(--teal))}
.manager-workload-row{display:grid;grid-template-columns:minmax(130px,1fr) minmax(100px,1fr) auto;gap:9px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:9px;background:var(--panel2)}.manager-workload-row b,.manager-workload-row small{display:block}.manager-workload-row small{font-size:9px;color:var(--muted)}.manager-workload-row strong{font-size:11px}.manager-utilization{height:8px;border-radius:999px;background:var(--panel);overflow:hidden;border:1px solid var(--line)}.manager-utilization span{display:block;height:100%;border-radius:999px;background:var(--accent,var(--teal))}.manager-workload-row:has(.manager-utilization span[style*="100%"]){border-color:color-mix(in srgb,var(--red) 35%,var(--line))}
.manager-department-list button{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:start;border:1px solid var(--line);border-radius:11px;background:var(--panel2);color:var(--text);padding:10px;cursor:pointer}.manager-department-list button:hover{border-color:var(--accent,var(--teal))}.manager-department-list b,.manager-department-list small{display:block}.manager-department-list small{font-size:9px;color:var(--muted)}.manager-department-list strong{font-size:10px;white-space:nowrap}
.manager-trend-row{display:grid;grid-template-columns:42px minmax(5px,1fr) minmax(5px,1fr) 62px;gap:6px;align-items:center;min-height:20px}.manager-trend-row time,.manager-trend-row small{font-size:9px;color:var(--muted)}.manager-trend-row span{height:8px;max-width:100%;border-radius:999px}.manager-trend-row span.created{background:#60a5fa}.manager-trend-row span.completed{background:#22c55e}.empty.compact{padding:18px;font-size:11px;color:var(--muted)}.compact-select{min-width:110px;max-width:190px}
@media(max-width:1180px){.manager-control-summary{grid-template-columns:repeat(3,minmax(120px,1fr))}}
@media(max-width:760px){.manager-control-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.manager-control-metric{min-height:88px;padding:10px}.manager-control-metric strong{font-size:24px}.manager-control-action-grid,.manager-control-detail-grid{grid-template-columns:1fr}.manager-control-task-list,.manager-bottleneck-list,.manager-workload-list,.manager-department-list,.manager-trend-list{max-height:none}.manager-control-row-actions .btn{min-height:36px;padding:6px 8px}.manager-workload-row{grid-template-columns:1fr auto}.manager-utilization{grid-column:1/-1;grid-row:2}.manager-control-task-row{align-items:flex-start;flex-direction:column}.manager-control-row-actions{width:100%}.manager-control-row-actions .btn{flex:1}.compact-select{min-width:0;max-width:none;flex:1}.view-actions:has(#manager-control-days){display:grid;grid-template-columns:1fr 1fr}.view-actions:has(#manager-control-days) #manager-control-refresh,.view-actions:has(#manager-control-days) #back-main-option{grid-column:span 1}}

/* v1.26.4 — professional global search and saved search views ------------ */
.gs-open-full{display:flex;width:100%;border:0;border-top:1px solid var(--line);background:color-mix(in srgb,var(--accent) 7%,var(--panel));color:var(--accent);padding:11px 14px;font:inherit;font-weight:800;cursor:pointer;justify-content:center}
.gs-open-full:hover{background:color-mix(in srgb,var(--accent) 12%,var(--panel))}
.global-search-page-btn{gap:7px}
.global-search-workspace{display:grid;gap:14px;max-width:1160px;margin:0 auto;padding-bottom:44px}
.search-command-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;position:sticky;top:calc(var(--header-height) + 8px);z-index:13;padding:10px;background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);backdrop-filter:blur(16px)}
.search-command-input{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;min-height:50px;padding:0 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.search-command-input>span{font-size:25px;color:var(--muted);line-height:1}
.search-command-input input{border:0!important;box-shadow:none!important;background:transparent!important;min-width:0;width:100%;font-size:15px;padding:8px 0!important;outline:0}
.search-command-input .icon-btn{width:34px;height:34px;min-width:34px}
.saved-searches-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.saved-searches-title{display:grid;gap:2px}.saved-searches-title small,.search-muted{color:var(--muted);font-size:12px}
.saved-searches-list{display:flex;gap:8px;overflow-x:auto;padding:2px 0;scrollbar-width:thin}
.saved-search-chip{display:flex;align-items:stretch;flex:0 0 auto;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel-soft)}
.saved-search-chip.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 16%,transparent)}
.saved-search-chip>button:first-child{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:7px;align-items:center;border:0;background:transparent;color:inherit;padding:8px 10px;cursor:pointer;text-align:start}
.saved-search-chip>button:first-child>span{grid-row:1/3;font-size:18px;color:var(--accent)}
.saved-search-chip b{font-size:12px;white-space:nowrap}.saved-search-chip small{font-size:10px;color:var(--muted);white-space:nowrap}
.saved-search-menu{border:0;border-inline-start:1px solid var(--line);background:transparent;color:var(--muted);min-width:34px;cursor:pointer}
.search-type-strip{display:flex;gap:7px;overflow-x:auto;padding:2px 1px 5px;scrollbar-width:thin}
.search-type-strip button{display:grid;grid-template-columns:auto auto;align-items:center;gap:5px;flex:0 0 auto;min-height:42px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:12px;padding:7px 10px;cursor:pointer;font:inherit}
.search-type-strip button span{font-size:17px}.search-type-strip button b{font-size:11px}.search-type-strip button em{grid-column:1/3;font-size:10px;color:var(--muted);font-style:normal;text-align:center}
.search-type-strip button.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--accent)}
.search-filter-panel{border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
.search-filter-panel>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:10px 14px;cursor:pointer;font-weight:800;list-style:none}.search-filter-panel>summary::-webkit-details-marker{display:none}.search-filter-panel>summary em{font-size:11px;font-style:normal;color:var(--muted)}
.search-filter-body{display:grid;gap:13px;border-top:1px solid var(--line);padding:13px}
.search-practical-filters{display:flex;gap:7px;flex-wrap:wrap}
.search-toggle{display:flex;align-items:center;gap:7px;min-height:38px;padding:7px 10px;border:1px solid var(--line);border-radius:11px;background:var(--panel-soft);font-size:12px;cursor:pointer}.search-toggle input{width:17px;height:17px;margin:0}.search-toggle:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--panel));color:var(--accent);font-weight:800}
.search-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.search-filter-grid label{display:grid;gap:5px}.search-filter-grid label>span{font-size:11px;color:var(--muted);font-weight:700}.search-filter-grid select,.search-filter-grid input{min-height:42px}
.search-filter-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.search-archive-toggle{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.search-results-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:3px 2px}.search-results-head>div{display:grid;gap:2px}.search-results-head b{font-size:15px}.search-results-head small{color:var(--muted);font-size:11px}.search-error{font-size:11px;color:var(--danger);font-weight:800}
.search-results-list{display:grid;gap:8px}.search-result-card{border:1px solid var(--line);border-radius:15px;background:var(--panel);overflow:hidden;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.search-result-card:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.search-result-open{display:grid;grid-template-columns:42px minmax(0,1fr) 24px;gap:11px;align-items:center;width:100%;border:0;background:transparent;color:inherit;text-align:start;padding:12px 14px;cursor:pointer;font:inherit}
.search-result-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--panel-soft);font-size:20px}.search-result-main{display:grid;gap:3px;min-width:0}.search-result-kind{font-size:10px;color:var(--accent);font-weight:900}.search-result-main>b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-result-main p{margin:0;color:var(--text-soft);font-size:12px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.search-result-main small{color:var(--muted);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-result-arrow{font-size:25px;color:var(--muted);transform:rotate(180deg)}
.search-empty-state{display:grid;justify-items:center;text-align:center;gap:6px;padding:42px 16px;border:1px dashed var(--line);border-radius:16px;background:var(--panel)}.search-empty-state>span{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--panel-soft);font-size:29px;color:var(--muted)}.search-empty-state b{font-size:14px}.search-empty-state p{max-width:540px;margin:0;color:var(--muted);font-size:12px;line-height:1.7}
.search-skeleton-list{display:grid;gap:8px}.search-skeleton-list i{display:block;height:78px;border-radius:15px;background:linear-gradient(90deg,var(--panel-soft),color-mix(in srgb,var(--panel-soft) 60%,var(--panel)),var(--panel-soft));background-size:200% 100%;animation:search-shimmer 1.2s infinite}@keyframes search-shimmer{to{background-position:-200% 0}}
.search-load-more{justify-self:center;min-width:210px}.search-save-dialog .dialog-card{max-width:480px}.search-save-dialog .search-toggle{margin-block:4px 10px}

@media(max-width:760px){
  .search-page-label{display:none}.global-search-page-btn{width:44px;min-width:44px;padding:0!important;justify-content:center}
  html.phone-mobile-view .global-search-workspace,html.phone-preview-mode .global-search-workspace{gap:9px;padding:0 0 calc(78px + env(safe-area-inset-bottom))}
  html.phone-mobile-view .search-command-panel,html.phone-preview-mode .search-command-panel{top:4px;grid-template-columns:minmax(0,1fr) auto;padding:6px;border-radius:14px;margin:0 -2px}
  html.phone-mobile-view .search-command-input,html.phone-preview-mode .search-command-input{min-height:44px;border-radius:11px;padding:0 9px;gap:7px}
  html.phone-mobile-view .search-command-input>span,html.phone-preview-mode .search-command-input>span{font-size:21px}
  html.phone-mobile-view .search-command-input input,html.phone-preview-mode .search-command-input input{font-size:13px}
  html.phone-mobile-view #run-search-workspace,html.phone-preview-mode #run-search-workspace{min-width:50px;padding-inline:10px}
  html.phone-mobile-view .saved-searches-row,html.phone-preview-mode .saved-searches-row{grid-template-columns:1fr;padding:9px;gap:7px;border-radius:13px}
  html.phone-mobile-view .saved-searches-title,html.phone-preview-mode .saved-searches-title{display:flex;justify-content:space-between;align-items:center}
  html.phone-mobile-view .saved-searches-title small,html.phone-preview-mode .saved-searches-title small{display:none}
  html.phone-mobile-view .search-type-strip,html.phone-preview-mode .search-type-strip{margin-inline:-2px}
  html.phone-mobile-view .search-type-strip button,html.phone-preview-mode .search-type-strip button{min-height:38px;padding:5px 8px;border-radius:10px}.search-type-strip button b{font-size:10px}
  html.phone-mobile-view .search-filter-panel,html.phone-preview-mode .search-filter-panel{border-radius:13px}
  html.phone-mobile-view .search-filter-panel>summary,html.phone-preview-mode .search-filter-panel>summary{min-height:42px;padding:8px 11px;font-size:12px}
  html.phone-mobile-view .search-filter-body,html.phone-preview-mode .search-filter-body{padding:9px;gap:9px}
  html.phone-mobile-view .search-practical-filters,html.phone-preview-mode .search-practical-filters{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  html.phone-mobile-view .search-toggle,html.phone-preview-mode .search-toggle{min-height:37px;padding:6px 8px;font-size:10px}
  html.phone-mobile-view .search-filter-grid,html.phone-preview-mode .search-filter-grid{grid-template-columns:1fr 1fr;gap:7px}.search-filter-grid select,.search-filter-grid input{min-height:40px;font-size:11px}
  html.phone-mobile-view .search-filter-actions,html.phone-preview-mode .search-filter-actions{align-items:flex-start;flex-direction:column}
  html.phone-mobile-view .search-result-open,html.phone-preview-mode .search-result-open{grid-template-columns:36px minmax(0,1fr) 16px;gap:8px;padding:10px}
  html.phone-mobile-view .search-result-icon,html.phone-preview-mode .search-result-icon{width:36px;height:36px;border-radius:10px;font-size:17px}
  html.phone-mobile-view .search-result-main>b,html.phone-preview-mode .search-result-main>b{font-size:12px}.search-result-main p{font-size:11px;-webkit-line-clamp:1}.search-result-main small{font-size:9px}
  html.phone-mobile-view .search-results-head,html.phone-preview-mode .search-results-head{align-items:flex-start}
}

/* v1.26.5 backup, security, and recovery center */
.recovery-center{display:grid;gap:14px}.recovery-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.recovery-summary-card{padding:14px;display:grid;gap:5px}.recovery-summary-card>span,.recovery-summary-card small{color:var(--muted)}.recovery-summary-card b{font-size:1.15rem}.ok-text{color:#087f5b}.danger-text{color:#c92a2a}.security-policy-grid,.restore-preflight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.security-policy-grid span,.restore-preflight-grid span{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}.backup-recovery-row .row-actions{max-width:430px}.danger-box{padding:12px;border:1px solid #e03131;background:#fff5f5;color:#c92a2a;border-radius:12px}
@media(max-width:760px){.recovery-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.security-policy-grid,.restore-preflight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.backup-recovery-row{align-items:flex-start}.backup-recovery-row .row-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.backup-recovery-row .row-actions .btn{width:100%}.recovery-center .section-title{align-items:flex-start}.recovery-center .section-title .row-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.recovery-center .section-title .row-actions .btn:first-child{grid-column:1/-1}.recovery-center .section-title .row-actions .btn{width:100%}}

/* ======================================================================
   v1.26.7 — Final Professional Mobile UX Refinement
   Swipe handling, pull-to-refresh, quick point actions, keyboard safety,
   accessible text scaling, reduced motion, skeletons, and upload control.
   ====================================================================== */
:root {
  --mobile-text-scale: 1;
  --mobile-keyboard-inset: 0px;
}
html[data-mobile-text-scale="compact"] { --mobile-text-scale: .92; }
html[data-mobile-text-scale="large"] { --mobile-text-scale: 1.12; }

@media (max-width: 760px), (pointer: coarse), (hover: none) {
  /* Phone appearance controls inside the role-aware More menu. */
  .mobile-polish-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    padding: 9px;
    border: 1px solid var(--mobile-shell-line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel2) 88%, transparent);
  }
  .mobile-polish-control-head { min-width: 0; display: grid; align-content: center; gap: 2px; }
  .mobile-polish-control-head b { font-size: calc(11px * var(--mobile-text-scale)); }
  .mobile-polish-control-head small { color: var(--mobile-shell-muted); font-size: calc(8px * var(--mobile-text-scale)); }
  .mobile-text-scale { display: grid; grid-template-columns: repeat(3, 36px); gap: 4px; }
  .mobile-text-scale button {
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid var(--mobile-shell-line);
    border-radius: 10px;
    background: var(--panel);
    color: var(--mobile-shell-text);
    font: 900 12px/1 system-ui, sans-serif;
  }
  .mobile-text-scale button.active {
    color: #fff;
    border-color: var(--mobile-shell-accent);
    background: var(--mobile-shell-accent);
  }
  .mobile-polish-toggle {
    min-height: 44px;
    padding: 7px 9px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    border: 1px solid var(--mobile-shell-line);
    border-radius: 12px;
    background: var(--panel);
    color: var(--mobile-shell-text);
    text-align: start;
  }
  .mobile-polish-toggle > span { grid-row: 1 / 3; font-size: 18px; text-align: center; }
  .mobile-polish-toggle b { font-size: calc(10px * var(--mobile-text-scale)); }
  .mobile-polish-toggle small { color: var(--mobile-shell-muted); font-size: calc(8px * var(--mobile-text-scale)); }
  .mobile-polish-toggle.active { border-color: color-mix(in srgb, var(--mobile-shell-accent) 45%, var(--mobile-shell-line)); background: color-mix(in srgb, var(--mobile-shell-accent) 8%, var(--panel)); }

  /* Dynamic text sizing preserves layout while allowing practical larger type. */
  .mobile-home-welcome h2 { font-size: calc(20px * var(--mobile-text-scale)); }
  .mobile-home-welcome p,
  .mobile-list-header p,
  .mobile-section-title small { font-size: calc(9px * var(--mobile-text-scale)); }
  .mobile-section-title b,
  .mobile-list-header h2 { font-size: calc(14px * var(--mobile-text-scale)); }
  .mobile-pro-task-title h3 { font-size: calc(12px * var(--mobile-text-scale)); }
  .mobile-pro-task-title small,
  .mobile-pro-task-facts span,
  .mobile-task-state,
  .mobile-task-latest b,
  .mobile-task-latest small { font-size: calc(8px * var(--mobile-text-scale)); }
  .mobile-pro-task-actions .btn,
  .mobile-filter-chips button { font-size: calc(9px * var(--mobile-text-scale)); }
  .mobile-message-copy b { font-size: calc(10px * var(--mobile-text-scale)); }
  .mobile-message-copy p { font-size: calc(9px * var(--mobile-text-scale)); }
  .mobile-message-copy small { font-size: calc(8px * var(--mobile-text-scale)); }
  .task-point-row-card,
  .conversation-item,
  .approval-current-decision,
  .approval-revision-fast-card { font-size: calc(1em * var(--mobile-text-scale)); }

  /* Swipe-to-reveal actions. Actions are revealed, never executed automatically. */
  .mobile-pro-task-card.mobile-swipe-ready {
    position: relative;
    overflow: hidden;
    padding: 0;
    touch-action: pan-y;
    isolation: isolate;
  }
  .mobile-swipe-content {
    position: relative;
    z-index: 2;
    padding: 11px;
    border-radius: inherit;
    background: var(--mobile-shell-surface);
    transform: translate3d(var(--mobile-swipe-x, 0), 0, 0);
    transition: transform .2s ease;
    will-change: transform;
  }
  .mobile-pro-task-card.swiping .mobile-swipe-content { transition: none; }
  .mobile-swipe-rail {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    border-radius: inherit;
    overflow: hidden;
  }
  .mobile-swipe-side { width: 88px; display: grid; }
  .mobile-swipe-action {
    width: 100%;
    min-height: 100%;
    padding: 8px;
    border: 0;
    color: #fff;
    font-weight: 900;
    font-size: calc(10px * var(--mobile-text-scale));
  }
  .mobile-swipe-action.primary { background: var(--mobile-shell-accent); }
  .mobile-swipe-action.message { background: #0f766e; }

  /* Pull-to-refresh feedback below the compact sticky header. */
  .mobile-pull-refresh {
    position: fixed;
    z-index: 390;
    inset-inline-start: 50%;
    inset-block-start: calc(max(8px, env(safe-area-inset-top)) + 58px);
    min-width: 148px;
    min-height: 38px;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--mobile-shell-line);
    border-radius: 999px;
    background: var(--mobile-shell-surface);
    color: var(--mobile-shell-muted);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .16);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-58px + var(--pull-distance, 0px)));
    transition: opacity .14s ease, transform .14s ease;
  }
  .mobile-pull-refresh.visible { opacity: 1; }
  .mobile-pull-refresh.ready { color: var(--mobile-shell-accent); border-color: color-mix(in srgb, var(--mobile-shell-accent) 45%, var(--mobile-shell-line)); }
  .mobile-pull-refresh.refreshing span { animation: mobile-polish-spin .8s linear infinite; }
  .mobile-pull-refresh b { font-size: calc(9px * var(--mobile-text-scale)); }
  @keyframes mobile-polish-spin { to { transform: rotate(360deg); } }

  /* Skeleton loading is delayed and appears only for genuinely slow work. */
  .mobile-loading-skeleton {
    position: absolute;
    z-index: 320;
    inset: 0;
    padding: 12px 10px calc(82px + env(safe-area-inset-bottom));
    background: var(--mobile-shell-bg);
    pointer-events: none;
  }
  .mobile-loading-skeleton.task { position: fixed; inset-block-start: 0; padding-top: calc(76px + env(safe-area-inset-top)); }
  .mobile-polish-skeleton { display: grid; gap: 9px; }
  .mobile-skeleton-row {
    min-height: 72px;
    padding: 11px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid var(--mobile-shell-line);
    border-radius: var(--mobile-shell-radius);
    background: var(--mobile-shell-surface);
  }
  .mobile-skeleton-row > i,
  .mobile-skeleton-row b,
  .mobile-skeleton-row em {
    display: block;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--panel2) 20%, color-mix(in srgb, var(--panel2) 55%, #fff) 50%, var(--panel2) 80%);
    background-size: 220% 100%;
    animation: mobile-polish-shimmer 1.15s ease-in-out infinite;
  }
  .mobile-skeleton-row > i { width: 38px; height: 38px; border-radius: 12px; }
  .mobile-skeleton-row > span { display: grid; gap: 9px; }
  .mobile-skeleton-row b { width: var(--skeleton-width, 72%); height: 11px; }
  .mobile-skeleton-row em { width: var(--skeleton-width, 48%); height: 8px; }
  @keyframes mobile-polish-shimmer { to { background-position: -220% 0; } }

  /* Long-press quick actions for task points. */
  .task-point-row-card[data-mobile-long-press="1"] { -webkit-touch-callout: none; }
  .mobile-point-quick-sheet {
    position: fixed;
    z-index: 11050;
    inset: 0;
    display: grid;
    align-items: end;
    visibility: hidden;
  }
  .mobile-point-quick-sheet.open { visibility: visible; }
  .mobile-point-backdrop { position: absolute; inset: 0; border: 0; background: rgba(15, 23, 42, .48); opacity: 0; transition: opacity .17s ease; }
  .mobile-point-quick-sheet.open .mobile-point-backdrop { opacity: 1; }
  .mobile-point-quick-sheet > section {
    position: relative;
    z-index: 2;
    max-height: min(72dvh, 560px);
    padding: 14px 12px calc(12px + env(safe-area-inset-bottom));
    display: grid;
    gap: 10px;
    overflow-y: auto;
    border-radius: 22px 22px 0 0;
    background: var(--panel);
    box-shadow: 0 -18px 50px rgba(15, 23, 42, .28);
    transform: translateY(102%);
    transition: transform .18s ease;
  }
  .mobile-point-quick-sheet.open > section { transform: translateY(0); }
  .mobile-point-quick-sheet h3 { margin: 2px 0 0; font-size: calc(15px * var(--mobile-text-scale)); }
  .mobile-point-quick-sheet small { color: var(--mobile-shell-muted); font-size: calc(9px * var(--mobile-text-scale)); }
  .mobile-point-quick-actions { display: grid; gap: 7px; }
  .mobile-point-quick-actions button {
    min-height: 52px;
    padding: 9px 11px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    border: 1px solid var(--mobile-shell-line);
    border-radius: 13px;
    background: var(--panel2);
    color: var(--mobile-shell-text);
    text-align: start;
  }
  .mobile-point-quick-actions button span { font-size: 19px; text-align: center; }
  .mobile-point-quick-actions button b { font-size: calc(11px * var(--mobile-text-scale)); }

  /* Voice and upload states are clearly visible and cancellable. */
  .mobile-voice-recording #voice-status {
    min-height: 36px;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--red) 10%, var(--panel));
    color: var(--red);
    font-weight: 900;
    font-size: calc(9px * var(--mobile-text-scale));
  }
  .upload-tray > div { min-width: 0; }
  .upload-tray-head { display: flex; align-items: center; gap: 8px; }
  #upload-tray-cancel {
    min-width: 34px;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, var(--red) 35%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--red) 7%, var(--panel));
    color: var(--red);
    font-size: 9px;
    font-weight: 900;
  }

  /* iPhone visual viewport / keyboard handling. */
  body.mobile-keyboard-open #main-nav { transform: translateY(110%); pointer-events: none; }
  body.mobile-keyboard-open .mobile-task-dock,
  body.mobile-keyboard-open .mobile-workspace-action-bar,
  body.mobile-keyboard-open .mobile-chat-composer {
    bottom: calc(var(--mobile-keyboard-inset) + env(safe-area-inset-bottom));
  }
  body.mobile-keyboard-open .mobile-task-more-sheet { bottom: calc(var(--mobile-keyboard-inset) + 62px + env(safe-area-inset-bottom)); }
  input, textarea, select { scroll-margin-block: 110px; }
  #task-detail-body { overscroll-behavior: contain; }

  /* Better generic empty states on phone screens. */
  .mobile-polish-empty-state {
    min-height: 110px;
    padding: 18px 14px !important;
    display: grid !important;
    place-items: center;
    gap: 7px;
    border: 1px dashed var(--mobile-shell-line);
    border-radius: var(--mobile-shell-radius);
    background: color-mix(in srgb, var(--mobile-shell-surface) 72%, transparent);
    color: var(--mobile-shell-muted) !important;
    text-align: center;
  }
  .mobile-polish-empty-state > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); font-weight: 900; }

  /* Consistent accessible targets and focus feedback. */
  button, [role="button"], summary, a.btn, input[type="checkbox"], input[type="radio"] { min-height: 44px; }
  button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mobile-shell-accent) 42%, transparent);
    outline-offset: 2px;
  }
  .task-detail-tab[aria-selected="true"] { color: var(--mobile-shell-accent); }
}

/* Dark-theme verification for all newly introduced mobile surfaces. */
html[data-theme="dark"] .mobile-swipe-content,
html[data-theme="dark"] .mobile-pull-refresh,
html[data-theme="dark"] .mobile-loading-skeleton,
html[data-theme="dark"] .mobile-polish-controls,
html[data-theme="dark"] .mobile-point-quick-sheet > section {
  color-scheme: dark;
}
html[data-theme="dark"] .mobile-swipe-action.message { background: #115e59; }
html[data-theme="dark"] .mobile-point-backdrop { background: rgba(2, 6, 23, .68); }

/* Respect both the operating-system and in-app reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .mobile-swipe-content,
  .mobile-pull-refresh,
  .mobile-point-backdrop,
  .mobile-point-quick-sheet > section { transition: none !important; }
  .mobile-skeleton-row > i,
  .mobile-skeleton-row b,
  .mobile-skeleton-row em,
  .mobile-pull-refresh.refreshing span { animation: none !important; }
}
html[data-mobile-reduced-motion="true"] .mobile-swipe-content,
html[data-mobile-reduced-motion="true"] .mobile-pull-refresh,
html[data-mobile-reduced-motion="true"] .mobile-point-backdrop,
html[data-mobile-reduced-motion="true"] .mobile-point-quick-sheet > section { transition: none !important; }
html[data-mobile-reduced-motion="true"] .mobile-skeleton-row > i,
html[data-mobile-reduced-motion="true"] .mobile-skeleton-row b,
html[data-mobile-reduced-motion="true"] .mobile-skeleton-row em,
html[data-mobile-reduced-motion="true"] .mobile-pull-refresh.refreshing span { animation: none !important; }


/* v1.26.7 — mobile full-width and safe diagnostics hotfix */
@media (max-width: 760px), (pointer: coarse), (hover: none) {
  html.phone-mobile-view,
  html.phone-mobile-view body,
  html.phone-mobile-view #app-view,
  html.phone-mobile-view .app-layout,
  html.phone-mobile-view main,
  html.phone-mobile-view #view-content,
  html.phone-preview-mode,
  html.phone-preview-mode body,
  html.phone-preview-mode #app-view,
  html.phone-preview-mode .app-layout,
  html.phone-preview-mode main,
  html.phone-preview-mode #view-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }

  html.phone-mobile-view body,
  html.phone-preview-mode body { overflow-x: hidden !important; }

  html.phone-mobile-view .resource-visible-note,
  html.phone-preview-mode .resource-visible-note { display: none !important; }

  html.phone-mobile-view #view-content > .tabs,
  html.phone-preview-mode #view-content > .tabs {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  html.phone-mobile-view #view-content > .grid.two,
  html.phone-preview-mode #view-content > .grid.two { grid-template-columns: minmax(0, 1fr) !important; }

  html.phone-mobile-view .system-error-main p,
  html.phone-preview-mode .system-error-main p {
    margin: 5px 0;
    font-size: 11px;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  html.phone-mobile-view .system-error-row,
  html.phone-preview-mode .system-error-row { padding: 10px; gap: 7px; }
  html.phone-mobile-view .system-error-main small,
  html.phone-preview-mode .system-error-main small { font-size: 8px; line-height: 1.5; }
  html.phone-mobile-view .diagnostic-issue-list,
  html.phone-preview-mode .diagnostic-issue-list { max-height: 340px; overflow: auto; }
}

/* v1.26.8 — full connected-task creation and schedule relationships */
.connected-schedule-card {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, var(--panel2));
}
.connected-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.connected-schedule-grid > label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}
.connected-schedule-grid .full { grid-column: 1 / -1; }
.schedule-relationship-preview {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 90%, var(--accent));
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
.schedule-relationship-preview:empty { display: none; }
.schedule-relationship-preview span { display: block; min-width: 0; }
.schedule-relationship-preview b { color: var(--text); }
.connected-task-full-form-note {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel2));
}
.connected-task-full-form-note b { font-size: 13px; }
.connected-task-full-form-note small { color: var(--muted); line-height: 1.65; }
.point-link-schedule-meta {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--accent);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-origin-point-banner i {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--accent);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px), (pointer: coarse), (hover: none) {
  .connected-schedule-grid { grid-template-columns: minmax(0, 1fr); }
  .connected-schedule-grid .full { grid-column: 1; }
  .schedule-relationship-preview { padding: 9px; font-size: 9px; }
  .connected-task-full-form-note { padding: 11px; }
  .point-link-schedule-meta,
  .task-origin-point-banner i { white-space: normal; }
}

/* v1.26.15 — connected-point actions, management centre, mobile HR records */
.point-link-direct-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-inline-start:auto}.point-link-direct-actions.compact{margin-inline-start:0}.point-link-direct-actions .btn{min-height:34px;white-space:nowrap}.danger-text{color:var(--red)!important;font-weight:700}
.manager-control-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 2px 10px;padding-inline:4px}.manager-control-section-head h3{margin:0;font-size:18px}.manager-control-section-head p{margin:3px 0 0;color:var(--muted);font-size:11px}.manager-control-section-head>span{display:grid;place-items:center;min-width:34px;height:34px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-weight:800}.manager-control-section-head.insights{margin-top:22px}
.manager-control-action-grid{grid-template-columns:repeat(auto-fit,minmax(310px,1fr));align-items:start}.manager-control-queue{padding:14px;min-height:0}.manager-control-task-list:has(.empty:only-child){min-height:54px;max-height:86px}.manager-control-task-list .empty.compact{padding:14px 10px}.manager-control-detail-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(360px,1fr))!important;gap:12px}.manager-control-detail-grid>.panel{min-width:0;margin:0}.manager-trend-list{min-height:220px}.manager-control-task-row{min-height:58px}
.resource-tab-shell{min-width:0}.resource-tab-select-label{display:none}.mobile-record-list{display:none}.personal-record-grid{align-items:start}.personal-record-panel{min-width:0}.personal-leave-list{display:grid;gap:8px}.mobile-record-card{border:1px solid var(--line);border-radius:14px;background:var(--panel2);padding:12px;display:grid;gap:10px}.mobile-record-card header{display:flex;justify-content:space-between;gap:10px;align-items:center}.mobile-record-card header span{font-size:11px;color:var(--teal);font-weight:700}.mobile-record-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}.mobile-record-card dl>div{padding:8px;border-radius:10px;background:var(--panel)}.mobile-record-card dt{font-size:10px;color:var(--muted)}.mobile-record-card dd{margin:2px 0 0;font-size:12px;font-weight:700;overflow-wrap:anywhere}.mobile-record-card p,.mobile-record-card small{margin:0;color:var(--muted);font-size:11px;overflow-wrap:anywhere}
html.lang-en body,html.lang-en input,html.lang-en textarea,html.lang-en select,html.lang-en button{font-family:Inter,Arial,sans-serif}html.lang-en .manager-control-task-main,html.lang-en .section-title,html.lang-en .settings-row,html.lang-en .list-row{text-align:left}html.lang-en .manager-control-queue{border-inline-start-width:4px;border-inline-end-width:1px}
@media(max-width:760px){
  .point-link-direct-actions{width:100%;margin:8px 0 0}.point-link-direct-actions .btn{flex:1;min-width:120px}.task-point-main-line{flex-wrap:wrap}
  .manager-control-section-head{align-items:flex-start;margin-top:14px}.manager-control-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.manager-control-action-grid,.manager-control-detail-grid{grid-template-columns:1fr!important}.manager-control-queue{padding:11px}.manager-control-queue .section-title{align-items:flex-start}.manager-control-task-list:has(.empty:only-child){min-height:0;max-height:none}.manager-trend-list{min-height:0}
  .resource-tab-select-label{display:grid;gap:6px;font-size:11px;color:var(--muted);margin-bottom:10px}.resource-tab-select-label select{width:100%;min-height:46px;font-weight:700;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:8px 12px}.resource-tabs{display:none!important}.personal-record-grid{grid-template-columns:1fr!important;gap:10px}.personal-record-panel{padding:12px}.desktop-record-table{display:none}.mobile-record-list{display:grid;gap:9px}.personal-leave-list .settings-row{align-items:flex-start;flex-direction:column}.personal-leave-list .settings-row>.btn{width:100%}.resource-visible-note{display:none}.hr-toolbar,.resource-toolbar{display:grid!important;grid-template-columns:1fr!important;align-items:stretch}.hr-toolbar label,.resource-toolbar label{width:100%}.hr-toolbar input,.hr-toolbar select,.resource-toolbar input,.resource-toolbar select{width:100%;max-width:none}.time-context-card{overflow:hidden}.time-context-card>*{min-width:0}.mobile-record-card dl{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){.manager-control-summary{grid-template-columns:1fr 1fr}.manager-control-metric{min-height:82px}.manager-control-metric b{font-size:11px}.mobile-record-card dl{grid-template-columns:1fr}.point-link-direct-actions .btn{min-width:0}}

/* v1.26.15 — persistent phone login, passkeys and top-layer errors */
.toast[popover]{inset:auto auto auto 50%;top:calc(env(safe-area-inset-top,0px) + 14px);bottom:auto;margin:0;transform:translateX(-50%) translateY(-22px);opacity:0;z-index:2147483647;border:0;pointer-events:none;max-width:min(92vw,680px)}
.toast[popover].show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast[popover]::backdrop{background:transparent}
.login-error{padding:10px 12px;border:1px solid color-mix(in srgb,var(--red) 60%,transparent);background:color-mix(in srgb,var(--red) 13%,var(--panel));color:var(--red);border-radius:12px;font-weight:800;line-height:1.55;text-align:start;scroll-margin-top:20px}
.password-input-wrap{position:relative;display:grid}.password-input-wrap input{padding-inline-end:48px}.password-toggle{position:absolute;inset-inline-end:5px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:var(--text);cursor:pointer;font-size:18px}.password-toggle:hover,.password-toggle:focus-visible{background:var(--panel2)}
.login-option{display:flex!important;align-items:center;gap:8px;color:var(--text)!important;font-size:13px!important;cursor:pointer}.login-option input{width:18px;height:18px}.login-security-note{color:var(--muted);font-size:11px;line-height:1.6}.btn.biometric{border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line));background:color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--heading-color)}
.device-setup-banner{position:sticky;top:0;z-index:45;margin:0;padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));background:color-mix(in srgb,var(--accent) 12%,var(--panel));border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));display:flex;align-items:center;justify-content:space-between;gap:12px}.device-setup-banner b,.device-setup-banner small{display:block}.device-setup-banner small{color:var(--muted);margin-top:2px}.device-setup-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.passkey-list{display:grid;gap:8px;margin-top:10px}.passkey-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
@media(max-width:720px){.toast[popover]{top:calc(env(safe-area-inset-top,0px) + 8px);width:calc(100vw - 20px)}.device-setup-banner{align-items:stretch;flex-direction:column}.device-setup-actions{display:grid;grid-template-columns:1fr 1fr auto}.device-setup-actions .btn{width:100%}.login-card{padding-top:calc(22px + env(safe-area-inset-top,0px))}}


/* v1.27.0 iPhone/iPad Safari layout and top-layer recovery */
html.ios-safari {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.ios-safari body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
}
html.ios-safari.phone-mobile-view,
html.ios-safari.phone-mobile-view body,
html.ios-safari.phone-mobile-view #app-view,
html.ios-safari.phone-mobile-view #login-view {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
html.ios-safari.phone-mobile-view .app-layout {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
html.ios-safari.phone-mobile-view .panel,
html.ios-safari.phone-mobile-view .task-card,
html.ios-safari.phone-mobile-view .company-card,
html.ios-safari.phone-mobile-view .template-card,
html.ios-safari.phone-mobile-view .dialog-card,
html.ios-safari.phone-mobile-view .section-panel,
html.ios-safari.phone-mobile-view .row-main,
html.ios-safari.phone-mobile-view main,
html.ios-safari.phone-mobile-view #view-content {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
html.ios-safari.phone-mobile-view .phone-web-preview-toolbar,
html.ios-safari.phone-mobile-view #phone-view-fab,
html.ios-safari.phone-mobile-view #phone-web-preview-btn,
html.ios-safari.phone-mobile-view [data-phone-view-choice="web"] {
  display: none !important;
}
html.ios-safari .login-shell {
  min-height: var(--ctt-ios-visual-height, 100vh);
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
html.ios-safari .login-card {
  width: min(430px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
}
html.ios-safari header {
  width: 100%;
  max-width: 100%;
}
html.ios-safari dialog[open] {
  position: fixed;
  inset: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px));
  width: auto;
  max-width: calc(100vw - 16px);
  max-height: calc(var(--ctt-ios-visual-height, 100vh) - 16px);
  margin: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
html.ios-safari .dialog-card,
html.ios-safari .task-detail-card,
html.ios-safari .create-card {
  max-height: calc(var(--ctt-ios-visual-height, 100vh) - 16px);
}
html.ios-safari .toast {
  top: calc(10px + env(safe-area-inset-top, 0px));
  bottom: auto;
  left: 50%;
  width: min(620px, calc(100vw - 20px));
  max-width: calc(100vw - 20px);
  z-index: 2147483646;
  transform: translateX(-50%) translateY(-20px);
}
html.ios-safari .toast.show {
  transform: translateX(-50%) translateY(0);
}
.ios-safari-recovery-alert {
  position: fixed;
  z-index: 2147483647;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 10px;
  right: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #fecaca;
  border-radius: 14px;
  background: #fff7f7;
  color: #7f1d1d;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .28);
  direction: rtl;
}
.ios-safari-recovery-alert b,
.ios-safari-recovery-alert span { min-width: 0; }
.ios-safari-recovery-alert span { grid-column: 1; font-size: 12px; }
.ios-safari-recovery-alert button {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  background: #0f766e;
  color: #fff;
  font: inherit;
  font-weight: 800;
}
@media (max-width: 760px) {
  html.ios-safari .app-layout { padding-inline: 10px; }
  html.ios-safari .global-search-wrap,
  html.ios-safari .hero-row,
  html.ios-safari #view-content { width: 100%; max-width: 100%; }
  html.ios-safari .table-wrap,
  html.ios-safari .board-scroll-viewport { max-width: calc(100vw - 20px); }
}


/* ============================================================
   v1.27.0 — Professional UX consolidation
   Four-tab mobile shell, unified inbox, one-action task cards,
   progressive task creation, and consistent touch targets.
   ============================================================ */
:root {
  --ux-space-1: 4px; --ux-space-2: 8px; --ux-space-3: 12px; --ux-space-4: 16px; --ux-space-6: 24px;
  --ux-radius-sm: 10px; --ux-radius-md: 14px; --ux-radius-lg: 18px;
  --ux-touch: 44px;
}

.create-experience-selector { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:2px 0 6px; }
.create-experience-selector button { min-height:58px; padding:8px 10px; border:1px solid var(--line); border-radius:13px; background:var(--panel2); color:var(--text); text-align:start; cursor:pointer; }
.create-experience-selector button b,.create-experience-selector button small { display:block; }
.create-experience-selector button b { font-size:12px; }
.create-experience-selector button small { margin-top:2px; color:var(--muted); font-size:9px; }
.create-experience-selector button.active { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent); }
.create-experience-note { margin:0 0 10px; color:var(--muted); font-size:10px; }
.create-mode-hidden { display:none !important; }

@media (max-width:760px), (display-mode:standalone) {
  body[data-mobile-shell-view="mobileInbox"] .hero-row,
  body[data-mobile-shell-view="mobileMore"] .hero-row { display:none !important; }
  html.phone-mobile-view #main-nav .nav-btn,
  html.phone-preview-mode #main-nav .nav-btn { min-height:56px !important; }
  html.phone-mobile-view #main-nav .nav-btn b,
  html.phone-preview-mode #main-nav .nav-btn b { font-size:9px !important; max-width:74px !important; }
  .mobile-today-head h2 { font-size:18px; }
  .mobile-today-shortcuts { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
  .mobile-today-shortcuts .mobile-home-shortcut { min-height:72px; padding:8px 5px; }
  .mobile-today-shortcuts .mobile-home-shortcut.primary { background:var(--mobile-shell-accent); color:#fff; border-color:transparent; }
  .mobile-today-shortcuts .mobile-home-shortcut.primary em { color:#fff; }
  .mobile-today-summary { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .mobile-today-summary button { min-width:0; padding:8px 4px; }
  .mobile-today-summary span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .mobile-pro-task-actions { align-items:stretch; }
  .mobile-pro-task-actions > .btn.primary { min-height:var(--ux-touch); }
  .mobile-task-card-more { position:relative; flex:0 0 auto; }
  .mobile-task-card-more > summary { min-width:var(--ux-touch); min-height:var(--ux-touch); display:grid; place-items:center; list-style:none; font-weight:900; }
  .mobile-task-card-more > summary::-webkit-details-marker { display:none; }
  .mobile-task-card-more-sheet { position:absolute; z-index:45; inset-inline-end:0; bottom:calc(100% + 6px); width:min(230px,78vw); padding:6px; display:grid; gap:4px; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:0 18px 50px rgba(15,23,42,.22); }
  .mobile-task-card-more-sheet button { min-height:var(--ux-touch); padding:9px 10px; border:0; border-radius:10px; background:transparent; color:var(--text); text-align:start; }
  .mobile-task-card-more-sheet button:active { background:var(--panel2); }

  .mobile-unified-inbox-tabs { position:sticky; top:calc(var(--safe-top) + 58px); z-index:9; padding-block:6px; background:color-mix(in srgb,var(--mobile-shell-bg) 94%,transparent); backdrop-filter:blur(8px); }
  .mobile-unified-approvals { margin-bottom:12px; }
  .mobile-unified-inbox-list { display:grid; gap:7px; }

  .mobile-more-profile { display:flex; align-items:center; gap:12px; padding:14px; }
  .mobile-more-profile h2 { margin:0; font-size:17px; }
  .mobile-more-profile p { margin:3px 0 0; color:var(--muted); font-size:10px; }
  .mobile-more-avatar { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:var(--accent-soft); color:var(--accent); font-size:20px; font-weight:900; }
  .mobile-more-status-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
  .mobile-more-status-grid button { min-height:66px; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--text); text-align:start; }
  .mobile-more-status-grid b,.mobile-more-status-grid span { display:block; }
  .mobile-more-status-grid span { margin-top:4px; color:var(--muted); font-size:9px; }
  .mobile-more-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .mobile-more-tile { min-height:96px; padding:12px; border:1px solid var(--line); border-radius:16px; background:var(--panel); color:var(--text); text-align:start; }
  .mobile-more-tile > span { display:block; margin-bottom:7px; font-size:21px; }
  .mobile-more-tile b { display:block; font-size:12px; }
  .mobile-more-tile small { display:block; margin-top:4px; color:var(--muted); font-size:8px; line-height:1.45; }
  .mobile-more-utilities { display:grid; gap:2px; margin-top:10px; padding:6px; }
  .mobile-more-utilities button { min-height:var(--ux-touch); border:0; border-radius:10px; background:transparent; color:var(--text); text-align:start; padding:9px 10px; }
  .mobile-more-utilities button.danger { color:var(--red); }
  .mobile-more-version { margin:12px 0 0; color:var(--muted); font-size:8px; text-align:center; direction:ltr; }

  .create-experience-selector { position:sticky; top:0; z-index:5; margin-inline:-2px; padding:4px 0; background:var(--panel); }
  .create-experience-selector button { min-height:54px; padding:7px; }
  .create-experience-selector button b { font-size:10px; }
  .create-experience-selector button small { font-size:7px; }
}

@media (max-width:390px) {
  .mobile-today-shortcuts,.mobile-today-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .create-experience-selector button small { display:none; }
}

/* ======================================================================
   v1.27.1 — Approval and communication consolidation
   Focused approval inbox, decision sheet, review package, quick messages.
   ====================================================================== */
.apcom-command-center{display:grid;gap:14px;margin:12px 0 18px;padding:18px;border:1px solid color-mix(in srgb,var(--line) 82%,var(--primary));border-radius:var(--ux-radius-lg,18px);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%,var(--primary) 6%),var(--surface));box-shadow:0 12px 30px rgba(15,23,42,.08)}
.apcom-command-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.apcom-command-head>div{min-width:0}.apcom-command-head span{display:block;color:var(--primary);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.apcom-command-head h2{margin:3px 0 2px;font-size:1.18rem}.apcom-command-head p{margin:0;color:var(--muted);font-size:.88rem}
.apcom-summary-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.apcom-summary-strip>span{display:flex;align-items:center;gap:8px;min-height:54px;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--muted);font-size:.82rem}.apcom-summary-strip b{font-size:1.25rem;color:var(--text)}.apcom-summary-strip .danger b{color:var(--red)}.apcom-summary-strip .warning b{color:#b45309}.apcom-summary-strip .primary b{color:var(--primary)}
.apcom-filters{display:flex;gap:7px;overflow:auto;padding:2px 0 5px;scrollbar-width:none}.apcom-filters::-webkit-scrollbar{display:none}.apcom-filters button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font:inherit;white-space:nowrap;cursor:pointer}.apcom-filters button span{display:grid;place-items:center;min-width:23px;height:23px;padding:0 6px;border-radius:999px;background:var(--soft);font-size:.75rem;font-weight:800}.apcom-filters button.active{border-color:color-mix(in srgb,var(--primary) 55%,var(--line));background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary);font-weight:800}
.apcom-review-list{display:grid;gap:10px}.apcom-review-card{display:grid;gap:11px;padding:14px;border:1px solid var(--line);border-inline-start:4px solid var(--primary);border-radius:15px;background:var(--surface);box-shadow:0 5px 15px rgba(15,23,42,.05)}.apcom-review-card.overdue{border-inline-start-color:var(--red)}.apcom-review-card.today{border-inline-start-color:#d97706}.apcom-review-card.returned{border-inline-start-color:#7c3aed}.apcom-review-card.waiting{border-inline-start-color:#64748b}.apcom-review-card header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:10px}.apcom-review-card header>div{min-width:0}.apcom-review-card header small{color:var(--primary);font-weight:800}.apcom-review-card h3{margin:2px 0 1px;font-size:1rem;line-height:1.35}.apcom-review-card header p{margin:0;color:var(--muted);font-size:.78rem}.apcom-review-card time{max-width:145px;color:var(--muted);font-size:.76rem;text-align:end}.apcom-urgency-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--primary) 13%,var(--surface));color:var(--primary);font-weight:900}.apcom-review-card.overdue .apcom-urgency-icon{background:color-mix(in srgb,var(--red) 13%,var(--surface));color:var(--red)}
.apcom-review-meta{display:flex;flex-wrap:wrap;gap:6px}.apcom-review-meta span{padding:5px 8px;border-radius:9px;background:var(--soft);color:var(--muted);font-size:.76rem}.apcom-evidence,.apcom-latest-note{padding:10px 11px;border-radius:11px;background:color-mix(in srgb,var(--soft) 82%,transparent)}.apcom-evidence b,.apcom-latest-note b{display:block;margin-bottom:3px;font-size:.78rem}.apcom-evidence p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.55}.apcom-latest-note{display:grid;gap:3px;border:1px solid color-mix(in srgb,#7c3aed 22%,var(--line));background:color-mix(in srgb,#7c3aed 6%,var(--surface))}.apcom-latest-note span{font-size:.82rem;line-height:1.5}.apcom-review-card footer{display:flex;flex-wrap:wrap;gap:7px}.apcom-review-card footer .btn{min-height:40px}
.apcom-empty{display:grid;place-items:center;gap:5px;padding:25px 12px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);text-align:center}.apcom-empty>span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:color-mix(in srgb,var(--green) 14%,var(--surface));color:var(--green);font-weight:900}.apcom-empty b{color:var(--text)}.apcom-empty p{margin:0;font-size:.84rem}
.apcom-inbox-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;width:100%;margin:10px 0;padding:12px 14px;border:1px solid color-mix(in srgb,var(--primary) 35%,var(--line));border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--surface));color:var(--text);text-align:start;cursor:pointer}.apcom-inbox-banner>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--primary);color:#fff;font-weight:900}.apcom-inbox-banner div{display:grid;gap:2px;min-width:0}.apcom-inbox-banner small{color:var(--muted)}.apcom-inbox-banner strong{color:var(--primary)}.apcom-activity-title{margin-top:16px}.apcom-recent-activity{margin-top:7px}
.apcom-decision-sheet{position:fixed;inset:0;z-index:2147483100;display:grid;align-items:end;justify-items:stretch}.apcom-decision-sheet.hidden{display:none}.apcom-sheet-backdrop{position:absolute;inset:0;border:0;background:rgba(2,6,23,.56);backdrop-filter:blur(4px)}.apcom-decision-card{position:relative;z-index:1;display:grid;gap:14px;width:min(100%,650px);max-height:min(88dvh,760px);margin-inline:auto;padding:18px max(18px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));overflow:auto;border-radius:22px 22px 0 0;background:var(--surface);box-shadow:0 -20px 50px rgba(2,6,23,.25)}.apcom-decision-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.apcom-decision-head small{color:var(--primary);font-weight:800}.apcom-decision-head h3{margin:2px 0 0}.apcom-decision-context{display:grid;gap:4px;padding:12px;border-radius:13px;background:color-mix(in srgb,var(--primary) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 20%,var(--line))}.apcom-decision-context span{color:var(--muted);font-size:.84rem;line-height:1.5}.apcom-decision-actions{display:flex;justify-content:flex-end;gap:8px}.apcom-sheet-open{overflow:hidden}
.apcom-message-prompts{display:flex;align-items:center;gap:6px;overflow:auto;padding:7px 0 9px;scrollbar-width:none}.apcom-message-prompts::-webkit-scrollbar{display:none}.apcom-message-prompts>span{color:var(--muted);font-size:.76rem;white-space:nowrap}.apcom-message-prompts button{min-height:34px;padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:.76rem;white-space:nowrap;cursor:pointer}.apcom-message-prompts button:hover{border-color:var(--primary);color:var(--primary)}.conversation-filters button span{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-inline-start:5px;padding-inline:5px;border-radius:999px;background:var(--soft);font-size:.7rem;font-weight:800}

@media (max-width:760px){
  .apcom-command-center{margin:8px 0 14px;padding:12px;border-radius:15px}.apcom-command-head{align-items:center}.apcom-command-head h2{font-size:1rem}.apcom-command-head>button{min-width:44px;max-width:112px;font-size:.75rem}.apcom-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.apcom-summary-strip>span{min-height:47px;padding:8px 10px}.apcom-review-card{padding:12px}.apcom-review-card header{grid-template-columns:auto minmax(0,1fr)}.apcom-review-card time{grid-column:2;max-width:none;text-align:start}.apcom-review-card footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.apcom-review-card footer .btn:first-child{grid-column:1/-1}.apcom-review-card footer .btn{width:100%;min-height:44px}.apcom-inbox-banner{margin:8px 0;padding:10px 11px}.apcom-decision-card{width:100%;max-height:92dvh}.apcom-decision-actions .btn{min-height:44px;flex:1}.apcom-message-prompts{margin-inline:-3px;padding-inline:3px}
}

@media (min-width:761px){.apcom-review-list{grid-template-columns:repeat(2,minmax(0,1fr))}.apcom-review-card footer{margin-top:auto}.apcom-decision-sheet{align-items:center}.apcom-decision-card{border-radius:22px;padding:22px}}


/* v1.27.2 planning and management consolidation */
.manager-control-metric.interactive{appearance:none;text-align:start;color:var(--text);cursor:pointer;width:100%}.manager-control-metric.interactive:hover,.manager-control-metric.interactive:focus-visible{transform:translateY(-1px);border-color:var(--accent,var(--teal));box-shadow:0 11px 28px rgba(15,23,42,.09)}
.manager-planning-risk-strip{display:grid;grid-template-columns:minmax(220px,1fr) repeat(4,minmax(105px,.45fr));gap:8px;align-items:stretch;margin:0 0 14px;padding:11px}.manager-planning-risk-strip>div{display:flex;flex-direction:column;justify-content:center}.manager-planning-risk-strip small{color:var(--muted);font-size:10px}.manager-planning-risk-strip button{border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text);padding:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center}.manager-planning-risk-strip button:hover{border-color:var(--accent,var(--teal))}.manager-planning-risk-strip strong{font-size:19px;color:var(--accent,var(--teal))}.manager-planning-risk-strip span{font-size:9px;color:var(--muted)}
.manager-workload-row{width:100%;text-align:start;color:var(--text);cursor:pointer}.manager-workload-row em,.manager-department-list em{display:block;font-style:normal;color:var(--muted);font-size:8px;margin-top:3px}.manager-workload-row.risk-high,.manager-department-list .risk-high{border-color:color-mix(in srgb,var(--red) 52%,var(--line));background:color-mix(in srgb,var(--red) 5%,var(--panel2))}.manager-workload-row.risk-warning,.manager-department-list .risk-warning{border-color:color-mix(in srgb,#f59e0b 50%,var(--line));background:color-mix(in srgb,#f59e0b 5%,var(--panel2))}
.planning-impact-sheet{position:fixed;inset:0;z-index:2147483200;display:grid;place-items:end center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));}.planning-impact-sheet.hidden{display:none}.planning-impact-backdrop{position:absolute;inset:0;border:0;background:rgba(15,23,42,.58);backdrop-filter:blur(3px)}.planning-impact-card{position:relative;width:min(960px,100%);max-height:min(92dvh,900px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 28px 80px rgba(15,23,42,.35);overflow:hidden}.planning-impact-card>header,.planning-impact-card>footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}.planning-impact-card>footer{border-bottom:0;border-top:1px solid var(--line);justify-content:flex-end;padding-bottom:max(14px,env(safe-area-inset-bottom))}.planning-impact-card h3{margin:2px 0 0}.planning-impact-card header small{color:var(--muted)}#planning-impact-body{overflow:auto;padding:14px}.planning-impact-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.planning-impact-summary>div{border:1px solid var(--line);background:var(--panel2);border-radius:12px;padding:10px;text-align:center}.planning-impact-summary strong,.planning-impact-summary span{display:block}.planning-impact-summary strong{font-size:22px;color:var(--accent,var(--teal))}.planning-impact-summary span{font-size:9px;color:var(--muted)}.planning-impact-summary .danger strong{color:var(--red)}.planning-impact-warning{border:1px solid color-mix(in srgb,#f59e0b 45%,var(--line));background:color-mix(in srgb,#f59e0b 8%,var(--panel));border-radius:10px;padding:8px;margin-bottom:8px;font-size:10px}.planning-impact-list{display:flex;flex-direction:column;gap:8px}.planning-impact-row{border:1px solid var(--line);border-radius:14px;padding:10px;background:var(--panel2)}.planning-impact-row.risk-warning{border-color:#f59e0b}.planning-impact-row.risk-danger{border-color:var(--red);background:color-mix(in srgb,var(--red) 5%,var(--panel2))}.planning-impact-row-title{display:flex;justify-content:space-between;gap:8px}.planning-impact-row-title span{font-weight:800;color:var(--accent,var(--teal))}.planning-impact-row>small{display:block;color:var(--muted);margin:3px 0 8px}.planning-impact-row dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0}.planning-impact-row dl>div{border:1px solid var(--line);border-radius:9px;padding:7px}.planning-impact-row dt{font-size:8px;color:var(--muted)}.planning-impact-row dd{margin:2px 0 0;font-size:9px;font-weight:700}
.professional-planning-map{margin-bottom:12px}.planning-map-summary{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.planning-map-summary span{border:1px solid var(--line);border-radius:999px;background:var(--panel2);padding:5px 8px;font-size:9px}.planning-map-summary .danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,var(--line))}.planning-map-summary .warning{color:#b45309;border-color:color-mix(in srgb,#f59e0b 45%,var(--line))}.planning-map-lanes{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.8fr) minmax(0,1fr);gap:10px;align-items:center}.planning-map-lane{display:flex;flex-direction:column;gap:6px}.planning-map-lane h4{margin:0;color:var(--muted);font-size:10px}.planning-map-node{display:flex;flex-direction:column;gap:2px;text-align:start;border:1px solid var(--line);border-radius:13px;background:var(--panel2);color:var(--text);padding:9px;cursor:pointer;min-width:0}.planning-map-node:hover{border-color:var(--accent,var(--teal))}.planning-map-node.role-current{border-width:2px;border-color:var(--accent,var(--teal));background:color-mix(in srgb,var(--accent,var(--teal)) 7%,var(--panel))}.planning-map-node b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.planning-map-node small,.planning-map-node span,.planning-map-node em,.planning-map-node i{font-size:8px;color:var(--muted);font-style:normal}.planning-map-node.risk-danger{border-color:var(--red)}.planning-map-node.risk-warning{border-color:#f59e0b}.planning-map-edges{display:flex;flex-direction:column;gap:6px;margin-top:10px}.planning-map-edge{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px dashed var(--line);border-radius:10px;padding:7px 9px}.planning-map-edge b,.planning-map-edge small{display:block}.planning-map-edge small{font-size:8px;color:var(--muted)}.planning-map-edge>span{display:grid;place-items:center;min-width:25px;height:25px;border-radius:999px;background:var(--panel2);font-weight:900}.planning-map-edge.conflict{border-color:var(--red);background:color-mix(in srgb,var(--red) 5%,var(--panel))}.planning-map-edge.conflict>span{color:var(--red)}
@media(max-width:800px){.manager-planning-risk-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.manager-planning-risk-strip>div{grid-column:1/-1}.planning-impact-card{border-radius:18px 18px 0 0;max-height:94dvh}.planning-impact-row dl{grid-template-columns:1fr 1fr}.planning-map-lanes{grid-template-columns:1fr}.planning-map-lane.current{order:-1}.planning-map-lane h4{margin-top:6px}}
@media(max-width:430px){.planning-impact-summary{grid-template-columns:1fr 1fr}.planning-impact-summary>div:last-child{grid-column:1/-1}.planning-impact-row dl{grid-template-columns:1fr}.manager-planning-risk-strip{padding:9px}}


/* ============================================================
   v1.27.3 — reliability, session management and WCAG 2.2 polish
   ============================================================ */
#ctt-skip-link{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:2147483647;transform:translateY(-160%);background:var(--panel);color:var(--text);border:3px solid var(--teal);border-radius:10px;padding:10px 14px;font-weight:900;box-shadow:0 8px 28px var(--shadow)}
#ctt-skip-link:focus{transform:translateY(0)}
.reliability-chip{border:1px solid var(--line);border-radius:999px;min-height:34px;padding:5px 10px;background:var(--panel2);color:var(--text);display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit;font-size:11px}.reliability-chip span{font-weight:900}.reliability-chip.ready{border-color:color-mix(in srgb,#15803d 50%,var(--line));background:color-mix(in srgb,#15803d 10%,var(--panel2))}.reliability-chip.pending{border-color:color-mix(in srgb,#d97706 55%,var(--line));background:color-mix(in srgb,#d97706 10%,var(--panel2))}.reliability-chip.attention,.reliability-chip.offline{border-color:color-mix(in srgb,var(--red) 60%,var(--line));background:color-mix(in srgb,var(--red) 10%,var(--panel2))}.reliability-chip:focus-visible{outline:3px solid var(--accent-text,var(--teal));outline-offset:3px}
.reliability-dialog{width:min(920px,calc(100vw - 24px));max-width:none;border:0;padding:0;background:transparent;color:var(--text)}.reliability-dialog::backdrop{background:rgba(2,6,23,.68);backdrop-filter:blur(3px)}.reliability-card{max-height:min(900px,92dvh);overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 80px rgba(2,6,23,.35)}.reliability-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}.reliability-card h2{margin:0;font-size:20px}.reliability-card header p{margin:5px 0 0;color:var(--muted)}.reliability-body{overflow:auto;padding:16px;overscroll-behavior:contain}.reliability-loading,.reliability-empty{padding:22px;text-align:center;border:1px dashed var(--line);border-radius:14px;color:var(--muted)}
.reliability-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.reliability-summary{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}.reliability-summary>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--panel);font-weight:900}.reliability-summary b,.reliability-summary small{display:block}.reliability-summary small{color:var(--muted);margin-top:3px}.reliability-summary.ready{border-color:color-mix(in srgb,#15803d 45%,var(--line))}.reliability-summary.pending{border-color:color-mix(in srgb,#d97706 50%,var(--line))}.reliability-summary.attention,.reliability-summary.offline{border-color:color-mix(in srgb,var(--red) 60%,var(--line))}
.reliability-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.reliability-section{border:1px solid var(--line);border-radius:14px;background:var(--panel2);margin:10px 0;overflow:hidden}.reliability-section>summary{min-height:48px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;font-weight:900}.reliability-section>summary strong{min-width:30px;text-align:center;padding:3px 8px;border-radius:999px;background:var(--panel)}.reliability-section-body{padding:0 12px 12px}.section-inline-actions{display:flex;justify-content:flex-end;margin-bottom:8px}.sync-item,.session-device-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-top:8px}.sync-item b,.sync-item small,.sync-item em,.session-device-card b,.session-device-card small{display:block}.sync-item small,.session-device-card small{color:var(--muted);margin-top:3px}.sync-item em{color:var(--red);font-style:normal;margin-top:4px}.sync-item.needs-review{border-color:color-mix(in srgb,var(--red) 55%,var(--line))}.sync-item-actions,.session-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.session-device-card{grid-template-columns:42px minmax(0,1fr) auto}.session-device-card.current{border-color:color-mix(in srgb,var(--teal) 55%,var(--line));box-shadow:inset 4px 0 0 var(--teal)}[dir=rtl] .session-device-card.current{box-shadow:inset -4px 0 0 var(--teal)}.device-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--panel2);font-size:21px}.session-badges{display:flex;gap:5px;margin-top:6px}.session-badges span{font-size:9px;font-weight:800;border-radius:999px;padding:3px 7px;background:color-mix(in srgb,var(--teal) 14%,var(--panel2))}.session-rename-form{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px;align-items:end;padding-top:9px;border-top:1px solid var(--line)}.session-rename-form label{display:grid;gap:4px;font-size:11px;font-weight:800}.storage-meter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}.storage-meter progress{width:100%;height:12px}.professional-session-centre .session-centre-tools{display:flex;gap:6px;margin-inline-start:auto}.session-device-list-row{border-radius:12px}.reliability-card :focus-visible{outline:3px solid var(--accent-text,var(--teal));outline-offset:3px}
[aria-invalid=true]{border-color:var(--red)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 18%,transparent)!important}
@media(max-width:760px){.reliability-dialog{width:100vw;max-height:none;margin:0;align-self:end}.reliability-card{max-height:94dvh;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom)}.reliability-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reliability-actions>.btn{flex:1 1 calc(50% - 8px);min-height:44px}.sync-item,.session-device-card{grid-template-columns:1fr}.session-device-card{grid-template-columns:42px minmax(0,1fr)}.session-actions,.sync-item-actions{grid-column:1/-1;justify-content:stretch}.session-actions .btn,.sync-item-actions .btn{flex:1}.session-rename-form{grid-template-columns:1fr 1fr}.session-rename-form label{grid-column:1/-1}.live-line .reliability-chip{max-width:180px}.reliability-chip b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media(forced-colors:active){.btn,.reliability-chip,.reliability-summary,.reliability-section,.sync-item,.session-device-card,input,select,textarea{forced-color-adjust:auto;border:1px solid ButtonText}.reliability-chip.ready,.reliability-chip.pending,.reliability-chip.attention,.reliability-chip.offline{background:Canvas;color:CanvasText}.status-pill,.session-badges span{border:1px solid CanvasText}.task-card[aria-current=true],.session-device-card.current{outline:3px solid Highlight}}
@media(prefers-contrast:more){:root{--line:color-mix(in srgb,currentColor 42%,transparent)}.meta,small,.muted{opacity:1}.btn.ghost{border-width:2px}.reliability-card,.panel,.task-card{border-width:2px}}
@media(prefers-reduced-motion:reduce){.reliability-dialog::backdrop{backdrop-filter:none}.reliability-chip,.sync-item,.session-device-card,#ctt-skip-link{transition:none!important;scroll-behavior:auto!important}}