:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#eaf3ff;background:#050b18;--bg:#050b18;--panel:#0c1629;--panel2:#101e35;--line:#233653;--muted:#91a5bf;--blue:#078cff;--cyan:#17d8f7;--danger:#ff6b78;--good:#36d399;--warn:#ffbd5a}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 80% 0,#0c2343 0,transparent 32%),var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:var(--cyan)}.hidden{display:none!important}.muted{color:var(--muted)}.tiny{font-size:12px;color:var(--muted);margin:4px 0}.danger{border-color:#733442!important;background:#3a1720!important;color:#ffd7dc!important}.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(430px,100%);padding:34px;border:1px solid var(--line);border-radius:24px;background:rgba(10,20,38,.94);box-shadow:0 30px 80px #0008;text-align:center}.login-logo{width:260px;max-width:90%;margin:-16px auto -30px}.login-card h1{margin:0 0 4px}.login-card form{text-align:left;display:grid;gap:14px;margin-top:24px}label{display:grid;gap:7px;color:#bfd0e5;font-size:13px}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#071226;color:#eef6ff;padding:11px 12px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #078cff22}textarea{min-height:100px;resize:vertical}button{border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:#13223a;color:#e9f3ff}.primary{border-color:transparent;background:linear-gradient(120deg,var(--cyan),var(--blue));color:#001226;font-weight:750}.wide{width:100%}.link-button{border:0;background:transparent;color:var(--cyan);padding:8px}.app{display:grid;grid-template-columns:245px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);background:#071124;padding:18px 14px;display:flex;flex-direction:column;z-index:12}.brand-row{display:flex;gap:10px;align-items:center;padding:4px 6px 22px}.brand-row img{width:46px;height:46px;border-radius:12px}.brand-row div{display:grid}.brand-row span{font-size:12px;color:var(--muted)}nav{display:grid;gap:5px;overflow:auto}nav button{text-align:left;border:0;background:transparent;color:#a9bcd2;padding:12px 14px}nav button.active,nav button:hover{background:#102442;color:#fff}.sidebar-footer{margin-top:auto;padding:14px 6px;display:grid;gap:4px;border-top:1px solid var(--line)}.sidebar-footer span{font-size:13px}.sidebar-footer small{color:var(--muted)}.sidebar-footer button{text-align:left;border:0;background:transparent;color:#ff9ca5;padding:7px 0}.main{min-width:0;padding:0 24px 36px}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;gap:16px}.topbar h2{margin:0;font-size:24px}.sync{font-size:12px;margin:4px 0 0}.sync.ok{color:var(--good)}.sync.pending{color:var(--warn)}.sync.error{color:var(--danger)}.menu-button{display:none}.view{animation:fade .15s ease}@keyframes fade{from{opacity:.4;transform:translateY(3px)}}.metrics{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;margin-bottom:16px}.metric{border:1px solid var(--line);background:linear-gradient(145deg,#0b172b,#0c1c34);border-radius:16px;padding:18px}.metric span{display:block;color:var(--muted);font-size:12px}.metric strong{display:block;font-size:30px;margin-top:8px}.panel{border:1px solid var(--line);background:rgba(11,23,42,.96);border-radius:16px;padding:18px;margin-bottom:16px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-title h3{margin:0 0 4px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid #1d304c;font-size:13px}th{color:#8fa6c1;font-weight:600}tr:hover td{background:#0e213b}.badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:#1a2e4b;font-size:11px}.badge.good,.badge.active{background:#0d3b31;color:#81ecc7}.badge.warn{background:#3b2c10;color:#ffd27c}.badge.closed,.badge.disabled{background:#252d3e;color:#b6c1d1}.filters{display:grid;grid-template-columns:minmax(240px,2fr) repeat(5,minmax(120px,1fr));gap:10px}.pager{display:flex;justify-content:center;align-items:center;gap:14px;padding-top:14px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.section-title{grid-column:1/-1;display:flex;justify-content:space-between;align-items:end;margin-top:6px;border-bottom:1px solid var(--line);padding-bottom:8px}.section-title h3{margin:0}.section-title span{color:var(--muted);font-size:12px}.span-2{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:10px}.prose{max-width:900px}.prose details{border-bottom:1px solid var(--line);padding:12px 0}.prose summary{font-weight:650;cursor:pointer}.prose p{color:#b6c7dc;line-height:1.6}.about{text-align:center;max-width:650px;margin:auto}.about img{display:block;width:min(300px,80%);height:auto;max-height:150px;object-fit:contain;margin:4px auto 18px}.about-links{display:flex;justify-content:center;gap:20px;margin:18px}.toast{position:fixed;right:20px;bottom:20px;z-index:30;max-width:420px;padding:13px 16px;border-radius:12px;background:#122743;border:1px solid var(--line);box-shadow:0 15px 40px #0008;opacity:0;pointer-events:none;transform:translateY(10px);transition:.2s}.toast.show{opacity:1;transform:none}.toast.error{border-color:#8b3340;color:#ffd3d8}dialog{width:min(880px,calc(100% - 30px));max-height:92vh;overflow:auto;border:1px solid var(--line);border-radius:18px;background:#09162b;color:#eef6ff;padding:24px}dialog::backdrop{background:#000b}.dialog-close{position:sticky;float:right;top:0;z-index:2;border:0;background:#09162bcc;font-size:25px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-grid>div{background:#0e2039;padding:12px;border-radius:10px;min-width:0;overflow-wrap:anywhere}.detail-grid small{display:block;color:var(--muted);margin-bottom:4px}.remarks,.attachments{display:grid;gap:9px}.remark,.attachment{border-left:3px solid var(--blue);padding:10px 12px;background:#0d1c32;border-radius:4px 10px 10px 4px}.remark small,.attachment small{color:var(--muted)}.record-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.record-actions a{text-decoration:none;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:#13223a}.inline-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}.edit-form{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}.checkbox{display:flex!important;align-items:center;gap:9px}.checkbox input{width:auto}.empty{text-align:center;color:var(--muted);padding:24px}.mobile-actions{display:flex;gap:8px;flex-wrap:wrap}.code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.warning-box{padding:12px;border:1px solid #6b5222;background:#33270f;border-radius:10px;color:#ffe0a3}.license-readonly{padding:10px 14px;background:#46222a;border:1px solid #7d3947;border-radius:12px;color:#ffd5da;margin-bottom:14px}@media(max-width:1200px){.filters{grid-template-columns:repeat(4,minmax(120px,1fr))}.filters input:first-child{grid-column:1/-1}}@media(max-width:1050px){.metrics{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr 1fr 1fr}.filters input:first-child{grid-column:1/-1}}@media(max-width:760px){.app{grid-template-columns:1fr}.sidebar{position:fixed;left:-260px;width:245px;transition:.2s}.sidebar.open{left:0}.main{padding:0 12px 28px}.topbar{height:75px}.topbar .primary{font-size:12px}.menu-button{display:block}.metrics{grid-template-columns:1fr 1fr;gap:9px}.metric{padding:14px}.metric strong{font-size:24px}.filters{grid-template-columns:1fr 1fr}.filters input:first-child{grid-column:1/-1}.form-grid{grid-template-columns:1fr}.span-2,.section-title{grid-column:1}.detail-grid{grid-template-columns:1fr}.panel{padding:13px}.brand-row{padding-top:10px}.inline-form{grid-template-columns:1fr}.record-actions>*{flex:1 1 auto;text-align:center}}@media(max-width:430px){.metrics{grid-template-columns:1fr}.filters{grid-template-columns:1fr}.filters input:first-child{grid-column:1}.topbar h2{font-size:20px}.quick-add{padding:8px}.panel-title{align-items:flex-start}.panel-title>button{white-space:nowrap}}

.install-button{width:100%;margin-top:12px;border-color:#136ca8;background:#0d3150;color:#dff5ff;font-weight:700}.password-required #app{filter:blur(1px);pointer-events:none;user-select:none}#passwordDialog[open]{z-index:100}.login-card .configuration-error{color:#ffadb5;border:1px solid #6d3340;background:#321821;padding:10px;border-radius:10px}

/* v0.6.0 interaction and commercial workflow polish */
button{position:relative;transition:transform .11s ease,filter .11s ease,box-shadow .11s ease,border-color .11s ease}
button:hover:not(:disabled){filter:brightness(1.12);border-color:#3e78aa;box-shadow:0 5px 16px #0003}
button:active:not(:disabled),button.pressed{transform:translateY(2px) scale(.985);filter:brightness(.94);box-shadow:inset 0 2px 8px #0005}
button.busy{padding-left:34px!important;cursor:progress}
button.busy::before{content:"";position:absolute;left:12px;top:50%;width:12px;height:12px;margin-top:-7px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:button-spin .7s linear infinite}
@keyframes button-spin{to{transform:rotate(360deg)}}
.toast{font-weight:700;font-size:14px;border-left:5px solid var(--cyan);min-width:min(360px,calc(100vw - 40px))}
.toast.success{background:#0c352e;border-color:var(--good);color:#d9fff2}
.toast.error{background:#3a1820;border-color:var(--danger);color:#ffe0e4}
.action-status{position:fixed;top:14px;left:50%;z-index:60;transform:translate(-50%,-20px);opacity:0;pointer-events:none;background:#0c352e;border:1px solid #2b9f7d;border-radius:999px;color:#e2fff6;padding:10px 18px;font-weight:750;box-shadow:0 12px 35px #0008;transition:.2s}
.action-status.show{opacity:1;transform:translate(-50%,0)}
.action-status.error{background:#3a1820;border-color:#b85061;color:#ffe6e9}
.record-actions label{min-width:170px}
#trashTable .restore-enquiry{border-color:#1f8f6e;background:#12382f;color:#caffed}
@media(max-width:1200px){.filters{grid-template-columns:repeat(4,minmax(120px,1fr))}}
@media(max-width:760px){.action-status{top:8px;width:calc(100% - 24px);text-align:center;border-radius:12px}.toast{right:12px;bottom:12px}.record-actions label{min-width:100%}}

/* v0.6.3 mobile and backup presentation fixes */
.mobile-install-hint{margin:10px auto 0;max-width:340px;line-height:1.45;color:#bdd2ea}
.about{overflow:hidden;padding-top:22px}
#backupsTable td:last-child{white-space:normal;min-width:250px}
@media(max-width:760px){.about img{width:min(250px,82%);max-height:125px}.login-logo{margin:-8px auto -22px}.login-card{padding:28px 22px}.record-actions a,.record-actions button{min-height:44px}.mobile-actions button{min-height:42px}}

.password-field{display:block}.password-check{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none}.password-check input{width:14px!important;height:14px!important;margin:0;padding:0;accent-color:#18bdf2}.storage-provider-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.storage-status{padding:14px;border:1px solid var(--border);border-radius:12px;background:#f7fbff}.restore-progress{margin-top:16px;padding:14px;border:1px solid var(--border);border-radius:12px;background:#f8fbff}.restore-progress progress{width:100%;height:16px;margin:10px 0}.danger-zone{border-color:#f2c7c7}.danger-zone>h3{color:#9f2525}@media(max-width:700px){.storage-provider-grid{grid-template-columns:1fr}}

.login-remember{margin:2px 0 12px;font-size:13px;color:var(--muted)}
.restore-preview{margin-top:18px;padding:18px;border:1px solid #ffbd5a;border-radius:14px;background:#20180d}
.restore-preview h4{margin:0 0 14px;color:#ffd38d}
.restore-counts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.restore-counts div{padding:12px;border:1px solid #61471e;border-radius:10px;background:#14100a}
.restore-counts span{display:block;font-size:12px;color:#c9b48d;margin-bottom:5px}
.restore-counts strong{font-size:16px;color:#fff}
.restore-warning{padding:12px;border-left:4px solid #ff5e78;background:#35141c;color:#ffd9df;border-radius:8px;line-height:1.5}
@media(max-width:700px){.restore-counts{grid-template-columns:1fr}}


/* v0.8.0 professional dashboard, themes, navigation and record timeline */
:root{--text:#eaf3ff;--input:#071226;--row-hover:#0e213b;--soft:#0e2039;--panel-shadow:0 16px 45px #0002;--accent:#17bff4;--purple:#9a78ff;--orange:#ff9d3f;--yellow:#f6c744}
html[data-theme="light"]{color-scheme:light;--bg:#f3f7fc;--panel:#ffffff;--panel2:#f7faff;--line:#d6e1ee;--muted:#5f728a;--text:#10233c;--input:#ffffff;--row-hover:#eef5fd;--soft:#f1f6fc;--blue:#087ff2;--cyan:#007fa8;--danger:#c63b4d;--good:#087d5c;--warn:#a26400;--accent:#087ff2;--purple:#6f4bd8;--orange:#d76800;--yellow:#9a7100}
html[data-theme="light"] body{background:linear-gradient(145deg,#f8fbff,#edf4fb);color:var(--text)}
html[data-theme="light"] .sidebar{background:#ffffff;border-color:var(--line);box-shadow:8px 0 30px #133a6210}
html[data-theme="light"] .login-card,html[data-theme="light"] .panel,html[data-theme="light"] dialog{background:var(--panel);color:var(--text);box-shadow:var(--panel-shadow)}
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{background:var(--input);color:var(--text)}
html[data-theme="light"] label{color:#354b64}html[data-theme="light"] .prose p{color:#425871}
html[data-theme="light"] th,html[data-theme="light"] td{border-color:#e1e9f2}html[data-theme="light"] tr:hover td{background:var(--row-hover)}
html[data-theme="light"] .metric{background:linear-gradient(145deg,#fff,#f4f8fd);box-shadow:0 8px 25px #173d6510}
html[data-theme="light"] .detail-grid>div,html[data-theme="light"] .remark-card,html[data-theme="light"] .attachment-card{background:var(--soft)}
html[data-theme="light"] button{background:#edf4fb;color:#17324f}html[data-theme="light"] .primary{background:linear-gradient(120deg,var(--cyan),var(--blue));color:white;border-color:transparent}html[data-theme="light"] .theme-toggle{background:#fff;color:#17324f}
html[data-theme="light"] .danger{background:#fff0f2!important;color:#a92035!important;border-color:#e7aab4!important}
html[data-theme="light"] .storage-banner.connected{background:#effbf7}html[data-theme="light"] .storage-banner.disconnected{background:#fff8ec}
body{color:var(--text)}.panel{box-shadow:var(--panel-shadow)}
.topbar-actions{display:flex;align-items:center;gap:10px}.theme-toggle{white-space:nowrap;min-width:96px}
.nav-groups{display:flex;flex-direction:column;gap:5px}.nav-direct{display:flex;align-items:center;gap:10px}.nav-icon{display:inline-grid;place-items:center;width:21px;font-weight:800;color:var(--cyan)}
.nav-group{display:grid;gap:3px}.nav-group-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;font-weight:650}.nav-group-toggle>span:first-child{display:flex;align-items:center;gap:10px}.nav-chevron{transition:transform .18s ease}.nav-group.open .nav-chevron{transform:rotate(180deg)}
.nav-submenu{display:none;padding-left:26px;gap:3px}.nav-group.open .nav-submenu{display:grid}.nav-submenu button{padding:9px 12px;font-size:13px;border-left:1px solid var(--line);border-radius:0 8px 8px 0}
.dashboard-toolbar{display:flex;justify-content:space-between;align-items:end;gap:14px;margin-bottom:14px}.dashboard-toolbar h3{margin:0}.dashboard-toolbar label{min-width:170px}
.metrics-six{grid-template-columns:repeat(6,minmax(130px,1fr))}.metric{position:relative;overflow:hidden}.metric::after{content:"";position:absolute;right:-20px;bottom:-30px;width:80px;height:80px;border-radius:50%;background:var(--metric-color,var(--blue));opacity:.08}.metric .metric-note{font-size:11px;color:var(--muted);margin-top:5px}.metric.good-metric{--metric-color:var(--good)}.metric.warn-metric{--metric-color:var(--warn)}.metric.danger-metric{--metric-color:var(--danger)}
.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.chart-wide{grid-column:1/-1}.chart-panel{min-height:270px}.chart-panel h3{margin:0 0 12px}.chart-slot{min-height:190px;display:grid;place-items:center}
.donut-wrap{display:flex;align-items:center;justify-content:center;gap:26px;width:100%;height:100%}.donut{width:150px;height:150px;border-radius:50%;position:relative;background:var(--donut);flex:0 0 auto}.donut::after{content:"";position:absolute;inset:24px;border-radius:50%;background:var(--panel)}.donut-center{position:absolute;inset:0;display:grid;place-items:center;z-index:1;text-align:center}.donut-center strong{font-size:27px}.donut-center span{font-size:11px;color:var(--muted)}.chart-legend{display:grid;gap:9px;min-width:150px}.legend-item{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center;font-size:12px}.legend-dot{width:9px;height:9px;border-radius:50%}.legend-item strong{font-size:12px}
.bar-chart{display:grid;gap:10px;width:100%}.bar-row{display:grid;grid-template-columns:minmax(85px,150px) 1fr 38px;gap:9px;align-items:center;font-size:12px}.bar-track{height:10px;border-radius:999px;background:color-mix(in srgb,var(--line) 65%,transparent);overflow:hidden}.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--blue));min-width:3px}.bar-value{text-align:right;font-weight:700}.empty-chart{color:var(--muted);text-align:center;padding:35px}
.trend-chart{width:100%;height:205px;display:grid;grid-template-rows:1fr auto;gap:7px}.trend-svg{width:100%;height:175px;overflow:visible}.trend-grid{stroke:var(--line);stroke-width:1}.trend-line{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.trend-area{fill:color-mix(in srgb,var(--blue) 18%,transparent)}.trend-dot{fill:var(--panel);stroke:var(--blue);stroke-width:2}.trend-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}
.analytics-filter-grid{display:grid;grid-template-columns:minmax(220px,2fr) repeat(5,minmax(125px,1fr));gap:10px;margin-top:14px}.analytics-filter-grid input:first-child{grid-column:span 2}.analytics-grid{margin-top:2px}
.record-section{margin-top:22px}.record-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.record-section-head h3{margin:0}.record-section-head p{margin:3px 0 0}
.remark-entry{display:grid;grid-template-columns:minmax(150px,190px) 1fr auto;gap:10px;margin-top:12px}.remark-entry textarea{min-height:82px}.remark-timeline{position:relative;display:grid;gap:10px;margin-top:14px;padding-left:18px}.remark-timeline::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:2px;background:var(--line)}.remark-card{position:relative;border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:#0d1c32}.remark-card::before{content:"";position:absolute;left:-18px;top:20px;width:10px;height:10px;border:3px solid var(--panel);border-radius:50%;background:var(--remark-color,var(--blue))}.remark-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;color:var(--muted);font-size:11px;margin-bottom:7px}.remark-type{display:inline-flex;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--remark-color,var(--blue)) 18%,transparent);color:var(--remark-color,var(--blue));font-weight:750}.remark-text{line-height:1.5;overflow-wrap:anywhere}
.storage-banner{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid var(--line);border-radius:13px;padding:14px;margin:12px 0}.storage-banner.connected{border-color:color-mix(in srgb,var(--good) 50%,var(--line));background:#0b261f}.storage-banner.disconnected{border-color:color-mix(in srgb,var(--warn) 60%,var(--line));background:#251d0d}.storage-provider{display:flex;align-items:center;gap:12px}.storage-provider-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--blue) 18%,transparent);font-size:20px}.storage-provider strong{display:block}.storage-provider span{font-size:12px;color:var(--muted)}.attachment-upload{display:grid;grid-template-columns:1fr auto;gap:9px}.attachment-upload.disabled{opacity:.7}.attachment-help{font-size:12px;color:var(--muted);margin-top:8px}.attachment-card{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:#0d1c32}.attachment-info{min-width:0}.attachment-info strong{display:block;overflow:hidden;text-overflow:ellipsis}.status-helper{font-size:11px;color:var(--muted);max-width:190px}.closure-reason-wrap{min-width:190px}
.reference-pill{display:inline-flex;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--cyan);font-weight:800;letter-spacing:.03em;white-space:nowrap}
@media(max-width:1350px){.metrics-six{grid-template-columns:repeat(3,1fr)}.analytics-filter-grid{grid-template-columns:repeat(4,1fr)}.analytics-filter-grid input:first-child{grid-column:span 2}}
@media(max-width:900px){.dashboard-grid{grid-template-columns:1fr}.chart-wide{grid-column:1}.donut-wrap{flex-direction:column;gap:15px}.analytics-filter-grid{grid-template-columns:1fr 1fr}.analytics-filter-grid input:first-child{grid-column:1/-1}.remark-entry{grid-template-columns:1fr}.attachment-upload{grid-template-columns:1fr}.storage-banner{align-items:flex-start;flex-direction:column}.metrics-six{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.topbar-actions{gap:6px}.theme-toggle{min-width:0;padding:9px;font-size:0}.theme-toggle::first-letter{font-size:16px}.dashboard-toolbar{align-items:stretch;flex-direction:column}.dashboard-toolbar label{min-width:0}.metrics-six{grid-template-columns:1fr 1fr}.analytics-filter-grid{grid-template-columns:1fr}.analytics-filter-grid input:first-child{grid-column:1}.bar-row{grid-template-columns:95px 1fr 30px}.remark-timeline{padding-left:14px}.remark-card::before{left:-14px}.attachment-card{align-items:flex-start;flex-direction:column}}


/* v0.8.1 rebuilt professional UI — intentionally conservative over the proven v0.7.5 workflow */
:root{--panel:#0c1629;--panel2:#101e35;--text:#eaf3ff;--input:#071226;--row-hover:#0e213b;--soft:#0e2039}
html[data-theme="light"]{--bg:#eef4fa;--panel:#ffffff;--panel2:#f7faff;--line:#cfdae7;--muted:#5a6f88;--text:#10233c;--input:#ffffff;--row-hover:#edf4fb;--soft:#f3f7fb;--blue:#087ff2;--cyan:#067ca5;--good:#087d5c;--warn:#996000;--danger:#b83246}
html[data-theme="light"] body{background:#eef4fa;color:var(--text)}
html[data-theme="light"] .main{background:#eef4fa}
html[data-theme="light"] .panel,html[data-theme="light"] dialog,html[data-theme="light"] .login-card{background:#fff;color:var(--text)}
html[data-theme="light"] .sidebar{background:#fff;color:var(--text);border-color:var(--line)}
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{background:#fff;color:var(--text);border-color:var(--line)}
html[data-theme="light"] label,html[data-theme="light"] .prose p{color:#3e536c}
html[data-theme="light"] button:not(.primary):not(.danger):not(.link-button){background:#f2f6fb;color:#17324f;border-color:#cbd8e6}
html[data-theme="light"] nav button{color:#425a73}
html[data-theme="light"] nav button.active,html[data-theme="light"] nav button:hover{background:#e8f2ff;color:#0b4f90}
html[data-theme="light"] .detail-grid>div,html[data-theme="light"] .remark-card,html[data-theme="light"] .attachment-card{background:#f4f8fc;color:var(--text)}
html[data-theme="light"] .storage-banner.connected{background:#edf9f5;color:var(--text)}
html[data-theme="light"] .storage-banner.disconnected{background:#fff7e9;color:var(--text)}
html[data-theme="light"] .storage-provider strong,html[data-theme="light"] .storage-provider span{color:inherit}
html[data-theme="light"] .donut::after{background:#fff}
html[data-theme="light"] th,html[data-theme="light"] td{border-color:#dce5ef}

button{width:auto;max-width:100%}.primary{color:#001226}.secondary{background:#13223a}
.topbar-actions{display:flex;align-items:center;gap:9px}.theme-toggle{min-width:92px;white-space:nowrap}
.nav-groups{display:flex;flex-direction:column;gap:4px}.nav-direct,.nav-group-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;font-weight:650}.nav-chevron{font-size:22px;line-height:1;transition:transform .18s ease}.nav-group.open .nav-chevron{transform:rotate(90deg)}
.nav-submenu{display:none!important;padding:2px 0 2px 16px;gap:2px}.nav-group.open .nav-submenu{display:grid!important}.nav-submenu button{padding:9px 12px;font-size:13px;border-left:2px solid var(--line);border-radius:0 8px 8px 0}
.dashboard-toolbar{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:14px}.dashboard-toolbar h3{margin:0}.dashboard-toolbar-actions{display:flex;align-items:end;gap:10px}.dashboard-toolbar-actions label{min-width:155px}
.metrics-six{grid-template-columns:repeat(6,minmax(120px,1fr))}.metric{min-height:112px}.metric strong{font-size:27px}.metric .metric-note{font-size:11px;color:var(--muted);margin-top:5px}
.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.compact-dashboard{margin-bottom:14px}.compact-chart{min-height:245px}.chart-wide{grid-column:1/-1}.chart-panel{min-height:255px}.chart-slot{min-height:175px;display:grid;place-items:center}
.donut-wrap{display:flex;align-items:center;justify-content:center;gap:24px;width:100%}.donut{width:138px;height:138px}.donut::after{inset:22px}.chart-legend{min-width:145px}
.analytics-filter-drawer{padding:0;overflow:hidden}.analytics-filter-drawer>summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}.analytics-filter-drawer>summary::-webkit-details-marker{display:none}.analytics-filter-drawer>summary span:first-child{display:grid;gap:3px}.analytics-filter-drawer>summary small{font-size:12px;color:var(--muted);font-weight:400}.summary-chevron{font-size:22px;transition:transform .18s}.analytics-filter-drawer[open] .summary-chevron{transform:rotate(90deg)}
.analytics-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 18px 12px}.analytics-filter-grid>#analyticsSearch{grid-column:span 2}.date-filter{display:grid;gap:5px}.analytics-actions{display:flex;justify-content:flex-end;gap:9px;padding:0 18px 18px}.analytics-actions button{min-width:110px}
.analytics-grid{margin-top:0}.analytics-grid .chart-panel{min-height:270px}
.record-actions{align-items:end}.record-actions>button,.record-actions>a{flex:0 0 auto}.record-actions label{min-width:180px;flex:0 1 260px}.status-actions{padding:12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel2) 88%,transparent)}
.remark-entry{grid-template-columns:180px minmax(280px,1fr) auto;align-items:stretch}.remark-entry button{align-self:stretch;min-width:120px}.remark-card{border-radius:12px}.remark-type{font-size:11px}
.storage-banner{color:var(--text)}.storage-provider strong{color:var(--text)}.storage-provider span{display:block;margin-top:3px;color:var(--muted)}.storage-banner.connected{background:#0b261f}.storage-banner.disconnected{background:#251d0d}.attachment-upload button{min-width:100px}
.storage-status{color:var(--text)!important}.storage-status strong{color:var(--text)!important}.storage-status .tiny{color:var(--muted)!important}
dialog{width:min(980px,calc(100% - 28px))}
.reference-pill{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;letter-spacing:.02em}

@media(max-width:1350px){.metrics-six{grid-template-columns:repeat(3,1fr)}.analytics-filter-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){.dashboard-grid{grid-template-columns:1fr}.chart-wide{grid-column:1}.analytics-filter-grid{grid-template-columns:1fr 1fr}.analytics-filter-grid>#analyticsSearch{grid-column:1/-1}.remark-entry{grid-template-columns:1fr}.dashboard-toolbar{align-items:stretch;flex-direction:column}.dashboard-toolbar-actions{align-items:end}.metrics-six{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.topbar-actions{gap:5px}.theme-toggle{min-width:0;font-size:12px}.dashboard-toolbar-actions{align-items:stretch;flex-direction:column}.dashboard-toolbar-actions label{min-width:0}.analytics-filter-grid{grid-template-columns:1fr}.analytics-filter-grid>#analyticsSearch{grid-column:1}.analytics-actions{flex-direction:column-reverse}.analytics-actions button{width:100%}.metrics-six{grid-template-columns:1fr 1fr}.donut-wrap{flex-direction:column;gap:14px}.status-actions{display:grid;grid-template-columns:1fr}.status-actions label,.status-actions button{width:100%;min-width:0}.record-actions>a{flex:1 1 auto;text-align:center}.attachment-upload{grid-template-columns:1fr}.attachment-upload button{width:100%}}
@media(max-width:420px){.metrics-six{grid-template-columns:1fr}.topbar-actions .primary{display:none}}


/* v0.9.1 staging — mobile safe-area, responsive enquiry cards, contrast and alignment */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.app,.main,.view,.panel,.filters,.table-wrap{min-width:0;max-width:100%}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
.quick-add-short{display:none}

.badge{color:#eaf3ff}
html[data-theme="light"] .badge{background:#25415f!important;color:#fff!important}
html[data-theme="light"] .badge.good,
html[data-theme="light"] .badge.active{background:#087d5c!important;color:#fff!important}
html[data-theme="light"] .badge.warn{background:#9a6500!important;color:#fff!important}
html[data-theme="light"] .badge.closed,
html[data-theme="light"] .badge.disabled{background:#5b6878!important;color:#fff!important}
html[data-theme="light"] .remark-type{font-weight:800}
html[data-theme="light"] .reference-pill{background:#dcecff;color:#075ea9}
html[data-theme="light"] .status-actions{background:#f7faff}
html[data-theme="light"] .storage-provider span{color:#526a84!important}

.status-actions{
  display:grid;
  grid-template-columns:minmax(230px,1.15fr) auto minmax(220px,1fr) auto auto auto;
  gap:10px;
  align-items:end;
}
.status-actions .status-field{grid-column:1;grid-row:1}
.status-actions .status-save{grid-column:2;grid-row:1}
.status-actions .assignment-field{grid-column:3;grid-row:1}
.status-actions .assignment-save{grid-column:4;grid-row:1}
.status-actions .edit-button{grid-column:5;grid-row:1}
.status-actions .delete-button{grid-column:6;grid-row:1}
.status-actions .closure-field{grid-column:1;grid-row:2}
.status-actions label{min-width:0;width:100%;margin:0}
.status-actions button{min-height:44px;white-space:nowrap}
.status-helper{max-width:none}

@media(max-width:1100px){
  .status-actions{grid-template-columns:minmax(220px,1fr) auto;align-items:end}
  .status-actions .status-field{grid-column:1;grid-row:1}
  .status-actions .status-save{grid-column:2;grid-row:1}
  .status-actions .closure-field{grid-column:1;grid-row:2}
  .status-actions .assignment-field{grid-column:1;grid-row:3}
  .status-actions .assignment-save{grid-column:2;grid-row:3}
  .status-actions .edit-button{grid-column:1;grid-row:4}
  .status-actions .delete-button{grid-column:2;grid-row:4}
}

@media(max-width:760px){
  body{min-height:100dvh}
  .app{min-height:100dvh}
  .main{
    width:100%;
    padding:
      calc(8px + env(safe-area-inset-top,0px))
      10px
      calc(24px + env(safe-area-inset-bottom,0px));
    overflow-x:hidden;
  }
  .topbar{
    height:auto;
    min-height:64px;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    padding:4px 0 10px;
    margin:0;
  }
  .topbar>div:nth-child(2){min-width:0}
  .topbar h2{font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menu-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    min-width:44px;
    padding:0;
    font-size:20px;
  }
  .topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
  .theme-toggle{
    width:42px;
    height:42px;
    min-width:42px;
    padding:0;
    font-size:0;
    overflow:hidden;
  }
  .theme-toggle::after{content:"◐";font-size:18px}
  #quickAdd{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    min-height:42px;
    min-width:0;
    max-width:118px;
    padding:9px 11px;
    white-space:nowrap;
    font-size:12px;
  }
  .quick-add-full{display:none}
  .quick-add-short{display:inline}
  .sidebar{
    top:0;
    height:100dvh;
    padding-top:calc(12px + env(safe-area-inset-top,0px));
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  }

  .metrics,.metrics-six{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px;
  }
  .metric{
    min-height:84px;
    padding:12px;
    border-radius:13px;
  }
  .metric strong{font-size:22px;margin-top:5px}
  .metric span,.metric .metric-note{font-size:11px}

  .filters{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:12px;
  }
  .filters>*{
    grid-column:1!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  .panel{padding:12px;border-radius:14px}
  .panel-title{align-items:flex-start}
  .panel-title>button{white-space:nowrap}
  .pager{gap:8px;flex-wrap:wrap}
  .pager button{flex:1 1 110px}
  .pager span{order:-1;flex:1 0 100%;text-align:center}

  #enquiriesView .table-wrap,
  #dashboardView .table-wrap{overflow:visible}
  #enquiryTable,
  #recentTable,
  #enquiryTable tbody,
  #recentTable tbody{display:block;width:100%}
  #enquiriesView table thead,
  #dashboardView table thead{display:none}
  #enquiryTable tr,
  #recentTable tr{
    display:block;
    width:100%;
    border:1px solid var(--line);
    border-radius:13px;
    padding:11px 12px;
    margin:0 0 10px;
    background:color-mix(in srgb,var(--panel2) 82%,transparent);
  }
  #enquiryTable td,
  #recentTable td{
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    gap:8px;
    align-items:start;
    width:100%;
    padding:6px 0;
    border:0;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  #enquiryTable td::before,
  #recentTable td::before{
    color:var(--muted);
    font-size:11px;
    font-weight:700;
  }
  #enquiryTable td:nth-child(1)::before{content:"Date"}
  #enquiryTable td:nth-child(2)::before{content:"Reference"}
  #enquiryTable td:nth-child(3)::before{content:"Customer"}
  #enquiryTable td:nth-child(4)::before{content:"Phone"}
  #enquiryTable td:nth-child(5)::before{content:"Vehicle"}
  #enquiryTable td:nth-child(6)::before{content:"Source"}
  #enquiryTable td:nth-child(7)::before{content:"Assigned"}
  #enquiryTable td:nth-child(8)::before{content:"Attendance"}
  #enquiryTable td:nth-child(9)::before{content:"Status"}
  #enquiryTable td:nth-child(10){
    display:block;
    padding-top:9px;
  }
  #enquiryTable td:nth-child(10)::before{content:none}
  #enquiryTable td:nth-child(10) button{width:100%;min-height:42px}
  #recentTable td:nth-child(1)::before{content:"Reference"}
  #recentTable td:nth-child(2)::before{content:"Customer"}
  #recentTable td:nth-child(3)::before{content:"Vehicle"}
  #recentTable td:nth-child(4)::before{content:"Source"}
  #recentTable td:nth-child(5)::before{content:"Attendance"}
  #recentTable td:nth-child(6)::before{content:"Status"}

  dialog{
    width:calc(100% - 12px);
    max-width:none;
    max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 12px);
    padding:16px 14px calc(18px + env(safe-area-inset-bottom,0px));
    border-radius:15px;
  }
  .record-actions.status-actions{
    grid-template-columns:1fr!important;
    gap:8px;
  }
  .status-actions .status-field,
  .status-actions .status-save,
  .status-actions .closure-field,
  .status-actions .assignment-field,
  .status-actions .assignment-save,
  .status-actions .edit-button,
  .status-actions .delete-button{
    grid-column:1!important;
    grid-row:auto!important;
    width:100%;
  }
  .status-actions button{width:100%}
  .remark-entry{grid-template-columns:1fr!important}
  .remark-entry button{width:100%;min-height:44px}
  .remark-card{padding:12px}
  .storage-banner{padding:12px}
  .storage-banner button{width:100%}
  .attachment-upload{grid-template-columns:1fr!important}
  .attachment-upload button{width:100%}
}

@media(max-width:340px){
  .metrics,.metrics-six{grid-template-columns:1fr!important}
  #quickAdd{max-width:92px;padding-inline:8px}
}

@media(max-width:760px){
  .topbar{
    position:sticky;
    top:env(safe-area-inset-top,0px);
    z-index:10;
    background:color-mix(in srgb,var(--bg) 94%,transparent);
    backdrop-filter:blur(12px);
  }
  .action-status{
    top:auto!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
    width:calc(100% - 24px);
    max-width:420px;
    border-radius:12px;
    text-align:center;
    transform:translate(-50%,20px);
  }
  .action-status.show{transform:translate(-50%,0)}
}

@media(max-width:760px){
  .theme-toggle{
    position:relative;
    color:transparent!important;
    text-indent:-9999px;
  }
  .theme-toggle::first-letter{font-size:0!important}
  .theme-toggle::after{
    content:"◐";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:var(--text);
    font-size:18px;
    text-indent:0;
  }
}


/* v0.9.1 staging — compact record dialog, aligned controls, profile card and strict vertical-only flow */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{width:100%;max-width:100%;overflow-x:hidden;touch-action:pan-y pinch-zoom}
*,*::before,*::after{box-sizing:border-box}
img,svg,canvas,video{max-width:100%;height:auto}
.app,.main,.view,.panel,.filters,.table-wrap,dialog,#dialogContent,.detail-grid,.status-actions,.status-control,.record-section,.remark-entry,.remark-timeline,.storage-banner,.attachment-upload,.attachments{min-width:0;max-width:100%}
#dialogContent,.detail-grid>div,.remark-card,.attachment-card,.storage-provider,.storage-provider>div{overflow-wrap:anywhere;word-break:break-word}

.sidebar-footer{
  margin-top:auto;
  padding:13px;
  display:grid;
  gap:5px;
  border:1px solid #24405f;
  border-radius:14px;
  background:linear-gradient(145deg,#0d2039,#0a172a);
  box-shadow:0 10px 28px #0003;
}
.sidebar-footer span{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#f2f7ff;line-height:1.3}
.sidebar-footer span::before{content:"";width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px #13c9ef22}
.sidebar-footer small{color:#a8bdd4;font-size:12px;line-height:1.35}
.sidebar-footer button{margin-top:7px;text-align:center;border:1px solid #63313d;background:#2b1720;color:#ffb7bf;padding:9px 10px;border-radius:10px}
html[data-theme="light"] .sidebar-footer{border-color:#c7d9eb;background:linear-gradient(145deg,#f8fbff,#eaf3fc);box-shadow:0 10px 24px #173b6414}
html[data-theme="light"] .sidebar-footer span{color:#102b48}
html[data-theme="light"] .sidebar-footer small{color:#516b85}
html[data-theme="light"] .sidebar-footer button{background:#fff4f5;border-color:#e3a6ae;color:#a21f32}

dialog{position:relative;width:min(940px,calc(100vw - 28px));max-width:calc(100vw - 28px);overflow-x:hidden;padding:18px 20px 22px}
dialog::backdrop{overscroll-behavior:contain}
.dialog-close{position:absolute;float:none;right:12px;top:10px;z-index:3;width:40px;height:40px;min-width:40px;padding:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--panel) 92%,transparent)}
.record-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:0 52px 10px 0;border-bottom:1px solid var(--line)}
.record-dialog-title{min-width:0}
.record-dialog-title h2{margin:0 0 6px;font-size:22px;line-height:1.2}
.record-dialog-title p{margin:0;line-height:1.5}
.record-contact-actions{margin:12px 0;display:flex;gap:8px;flex-wrap:wrap}
.record-contact-actions>a,.record-contact-actions>button{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.detail-grid .detail-wide{grid-column:1/-1}

.status-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:16px 0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb,var(--panel2) 88%,transparent);
  overflow:hidden;
}
.status-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
  padding:13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb,var(--panel) 88%,transparent);
}
.status-control label{min-width:0;width:100%;margin:0}
.status-control select{min-width:0;max-width:100%}
.status-control button{min-height:44px;align-self:end;white-space:nowrap}
.status-control .closure-field{grid-column:1/-1}
.status-helper{display:block;min-height:17px;margin-top:6px;line-height:1.35}
.status-management-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding-top:1px}
.status-management-actions button{min-height:42px;min-width:130px}
html[data-theme="light"] .status-actions{background:#f3f8fd;border-color:#bfd2e5}
html[data-theme="light"] .status-control{background:#fff;border-color:#c9d9e8}

@media(max-width:900px){
  .status-actions{grid-template-columns:1fr}
  .status-management-actions{grid-column:1}
}

@media(max-width:760px){
  html,body{width:100vw;max-width:100vw;overflow-x:hidden}
  body{position:relative}
  .app,.main{width:100%;max-width:100vw}
  input,select,textarea,button{font-size:16px}
  dialog{
    width:calc(100dvw - 16px);
    max-width:calc(100dvw - 16px);
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top,0px)) - max(16px,env(safe-area-inset-bottom,0px)));
    margin:max(8px,env(safe-area-inset-top,0px)) 8px max(8px,env(safe-area-inset-bottom,0px));
    padding:14px 12px calc(16px + env(safe-area-inset-bottom,0px));
    border-radius:15px;
  }
  .dialog-close{right:8px;top:8px;width:38px;height:38px;min-width:38px}
  .record-dialog-header{padding:0 46px 10px 0}
  .record-dialog-title h2{font-size:19px}
  .record-contact-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .record-contact-actions>a,.record-contact-actions>button{width:100%;min-width:0;padding:9px 8px}
  .detail-grid{grid-template-columns:1fr}
  .detail-grid .detail-wide{grid-column:1}
  .status-actions{grid-template-columns:1fr;padding:10px;gap:10px}
  .status-control{grid-template-columns:1fr;padding:11px}
  .status-control button{width:100%;white-space:normal}
  .status-control .closure-field{grid-column:1}
  .status-management-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .status-management-actions button{width:100%;min-width:0;white-space:normal}
  .remark-entry,.attachment-upload{width:100%;grid-template-columns:1fr}
  .remark-entry>* ,.attachment-upload>*{width:100%;min-width:0;max-width:100%}
  .storage-banner{display:grid;grid-template-columns:1fr;gap:10px}
  .storage-banner>button{width:100%}
  .sidebar-footer{margin:14px 0 0}
  .table-wrap{overflow-x:hidden}
}

@media(max-width:390px){
  .record-contact-actions{grid-template-columns:1fr}
  .status-management-actions{grid-template-columns:1fr}
}


/* v0.9.1 staging — focused visual fixes only; no backend or schema changes */

/* Login branding: never overlap the title. */
.login-logo{
  display:block;
  width:min(220px,78vw);
  max-width:100%;
  height:auto;
  margin:0 auto 14px!important;
}
.login-card h1{
  position:relative;
  z-index:1;
  margin:0 0 6px!important;
  line-height:1.15;
}
.login-screen{
  padding-top:calc(24px + env(safe-area-inset-top,0px));
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
}

/* Contact actions: consistent, centred, readable text in both themes. */
.record-contact-actions>a{
  color:#fff!important;
  background:#0b1d36!important;
  border-color:#21476e!important;
  text-align:center;
  font-weight:700;
  text-decoration:none;
  justify-content:center!important;
}
.record-contact-actions>a:hover,
.record-contact-actions>a:focus-visible{
  color:#fff!important;
  background:#12345b!important;
  border-color:#2d69a1!important;
}
html[data-theme="light"] .record-contact-actions>a{
  color:#fff!important;
  background:#12365d!important;
  border-color:#214f7d!important;
}

/* Status and assignment controls: equal heights and no redundant helper line. */
.status-helper{
  display:none!important;
}
.status-control{
  align-items:end!important;
}
.status-control label{
  align-self:stretch;
}
.status-control select,
.status-control button{
  min-height:54px;
}
.status-control button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.status-actions{
  align-items:start;
}
.status-management-actions{
  align-items:center;
}

/* Remark composer: visually centred and evenly aligned. */
.remark-entry{
  align-items:stretch;
}
.remark-entry select,
.remark-entry textarea,
.remark-entry button{
  min-height:72px;
}
.remark-entry textarea{
  height:72px;
  padding:22px 14px;
  line-height:24px;
  overflow-y:auto;
}
.remark-entry button{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Company/user identity card: centred and balanced. */
.sidebar-footer{
  text-align:center;
}
.sidebar-footer span{
  justify-content:center;
  text-align:center;
}
.sidebar-footer small{
  display:block;
  text-align:center;
}
.sidebar-footer button{
  text-align:center!important;
}

/* Mobile safe-area: top controls must never sit beneath the phone status bar. */
@media(max-width:760px){
  .topbar{
    top:0!important;
    min-height:calc(64px + env(safe-area-inset-top,0px));
    height:auto!important;
    padding-top:calc(8px + env(safe-area-inset-top,0px))!important;
    padding-bottom:10px!important;
  }
  .main{
    padding-top:0!important;
  }
  .login-card{
    padding:24px 20px 26px;
  }
  .login-logo{
    width:min(200px,70vw);
    margin:0 auto 12px!important;
  }
  .login-card h1{
    font-size:30px;
  }
  .record-contact-actions>a,
  .record-contact-actions>button{
    min-height:46px;
  }
  .status-control select,
  .status-control button{
    min-height:50px;
  }
  .remark-entry select,
  .remark-entry textarea,
  .remark-entry button{
    min-height:58px;
  }
  .remark-entry textarea{
    height:68px;
    padding:18px 13px;
    line-height:24px;
  }
}


/* v0.9.1 staging — desktop enquiry-detail alignment only */

/* Put Edit/Delete in the detail grid directly below the Attendance card. */
.detail-management-actions{
  grid-column:2;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
  min-height:88px;
  padding:14px 16px;
  border-radius:12px;
  background:var(--panel2);
}
.detail-management-actions button{
  min-height:44px;
  min-width:140px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
}
html[data-theme="light"] .detail-management-actions{
  background:#f3f7fb;
}

/* Neutralise old inherited grid coordinates that caused the huge left gap. */
.status-actions{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
}
.status-control{
  width:100%;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto!important;
  align-items:end!important;
}
.status-control .status-field,
.status-control .assignment-field{
  grid-column:1!important;
  grid-row:1!important;
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-end!important;
  gap:6px!important;
  min-width:0!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
}
.status-control .status-save,
.status-control .assignment-save{
  grid-column:2!important;
  grid-row:1!important;
  align-self:end!important;
  justify-self:end!important;
  min-width:140px;
  margin:0!important;
}
.status-control select{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
.status-control .closure-field{
  grid-column:1/-1!important;
  grid-row:2!important;
}
.status-management-actions{
  display:none!important;
}

/* Keep the existing good mobile flow. */
@media(max-width:900px){
  .status-actions{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:760px){
  .detail-management-actions{
    grid-column:1;
    min-height:auto;
    justify-content:stretch;
    padding:12px;
  }
  .detail-management-actions button{
    flex:1 1 0;
    min-width:0;
  }
  .status-control{
    grid-template-columns:1fr!important;
  }
  .status-control .status-field,
  .status-control .assignment-field,
  .status-control .status-save,
  .status-control .assignment-save{
    grid-column:1!important;
    grid-row:auto!important;
    width:100%!important;
    justify-self:stretch!important;
  }
}


/* v0.9.1 staging — button-gap and iOS restored-scroll correction */

/* Fill the management card instead of pushing buttons to the far right. */
.detail-management-actions{
  justify-content:stretch!important;
}
.detail-management-actions button{
  flex:1 1 0!important;
  width:100%!important;
  min-width:0!important;
}

/* Native dialogs should always begin at the visible top edge. */
dialog{
  scroll-behavior:auto!important;
  overscroll-behavior:contain;
}
dialog[open]{
  inset:auto;
}

/* Keep the page stable while a native dialog is open. */
body:has(dialog[open]){
  overflow:hidden;
}

/* Extra iPhone/PWA protection. */
@media(max-width:760px){
  html,body{
    scroll-behavior:auto!important;
    overscroll-behavior-y:none;
  }
  .topbar{
    scroll-margin-top:0;
  }
  dialog{
    top:max(8px,env(safe-area-inset-top,0px));
    bottom:auto;
    margin-top:0!important;
    margin-bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
  }
}


/* v0.9.1 production UI hotfix — alignment and device access wording only */

/* Login options: identical checkbox size, baseline and left edge. */
.login-card .password-field{
  display:grid;
  gap:7px;
}
.login-card .password-check,
.login-card .login-remember{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:100%;
  min-height:24px;
  margin:0!important;
  padding:0!important;
  color:var(--muted);
  font-size:13px;
  line-height:1.3;
  cursor:pointer;
}
.login-card .password-check input,
.login-card .login-remember input{
  flex:0 0 18px;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  margin:0!important;
  padding:0!important;
}
.login-card .login-remember{
  margin-top:-3px!important;
  margin-bottom:6px!important;
}

/* Restore form: equal top alignment and a clean action row. */
.restore-form{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
}
.restore-form>label{
  align-self:start;
  min-width:0;
}
.restore-file-field{
  grid-column:1/-1;
}
.restore-password-field{
  grid-column:1;
  grid-row:2;
}
.restore-company-field{
  grid-column:2;
  grid-row:2;
}
.restore-password-field input,
.restore-company-field input{
  min-height:50px;
  height:50px;
}
.restore-show-password{
  grid-column:1;
  grid-row:3;
  align-self:center!important;
  min-height:48px;
  margin:0!important;
  padding:0!important;
}
.restore-show-password input{
  flex:0 0 18px;
  width:18px!important;
  height:18px!important;
  margin:0!important;
}
.restore-actions{
  grid-column:2;
  grid-row:3;
  align-self:center;
  justify-content:flex-end;
  min-height:48px;
}
.restore-actions button{
  min-height:48px;
  min-width:156px;
}

/* Device access: active list plus collapsed removed-device history. */
.device-list-section{
  margin-top:16px;
}
.device-section-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.device-section-title h4{
  margin:0 0 3px;
}
.removed-devices{
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel2);
  overflow:hidden;
}
.removed-devices>summary{
  display:flex;
  align-items:center;
  gap:9px;
  padding:14px 16px;
  font-weight:700;
  cursor:pointer;
  list-style:none;
}
.removed-devices>summary::-webkit-details-marker{
  display:none;
}
.removed-devices>summary::after{
  content:"›";
  margin-left:auto;
  font-size:20px;
  transform:rotate(90deg);
  transition:transform .15s ease;
}
.removed-devices[open]>summary::after{
  transform:rotate(-90deg);
}
.removed-devices>.tiny{
  padding:0 16px 10px;
}
.removed-devices .table-wrap{
  padding:0 12px 12px;
}
.count-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background:var(--soft);
  color:var(--text);
  font-size:12px;
}
html[data-theme="light"] .removed-devices{
  background:#f6f9fc;
}

/* Restore/device tables stack safely on phones. */
@media(max-width:760px){
  .login-card .password-check,
  .login-card .login-remember{
    font-size:13px;
  }
  .restore-form{
    grid-template-columns:1fr;
  }
  .restore-file-field,
  .restore-password-field,
  .restore-company-field,
  .restore-show-password,
  .restore-actions{
    grid-column:1!important;
    grid-row:auto!important;
  }
  .restore-actions{
    justify-content:stretch;
  }
  .restore-actions button{
    width:100%;
  }
  #devicesView .table-wrap{
    overflow-x:auto;
  }
}


/* v0.9.1 production — fixed restore alignment and old-backup compatibility UI */

/* The restore form must retain the same geometry regardless of filename length. */
.restore-form{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  column-gap:16px!important;
  row-gap:12px!important;
  align-items:start!important;
}
.restore-form>*{
  min-width:0!important;
}
.restore-file-field{
  grid-column:1/-1!important;
  grid-row:1!important;
}
.restore-password-field{
  grid-column:1!important;
  grid-row:2!important;
}
.restore-company-field{
  grid-column:2!important;
  grid-row:2!important;
}
.restore-password-field input,
.restore-company-field input{
  width:100%!important;
  height:52px!important;
  min-height:52px!important;
  margin:0!important;
}
.restore-file-field input[type="file"]{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.restore-show-password{
  grid-column:1!important;
  grid-row:3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  align-self:center!important;
  gap:9px!important;
  min-height:50px!important;
  margin:0!important;
  padding:0!important;
}
.restore-show-password input{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  margin:0!important;
}
.restore-actions{
  grid-column:2!important;
  grid-row:3!important;
  min-height:50px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  margin:0!important;
}
.restore-actions button{
  min-width:160px!important;
  min-height:50px!important;
}
.restore-progress{
  margin-top:14px!important;
}

/* Avoid a long backup filename stretching the whole page. */
#backupsView,
#backupsView .panel{
  min-width:0!important;
}
#backupsView .table-wrap{
  max-width:100%!important;
}

/* Mobile stacks cleanly while retaining equal field sizes. */
@media(max-width:760px){
  .restore-form{
    grid-template-columns:1fr!important;
  }
  .restore-file-field,
  .restore-password-field,
  .restore-company-field,
  .restore-show-password,
  .restore-actions{
    grid-column:1!important;
    grid-row:auto!important;
  }
  .restore-actions{
    justify-content:stretch!important;
  }
  .restore-actions button{
    width:100%!important;
  }
}


/* v0.9.1 production — restore recovery and top-layer notifications */

.dialog-notice{
  position:fixed;
  z-index:2147483647;
  top:max(16px,calc(env(safe-area-inset-top,0px) + 10px));
  left:50%;
  width:min(620px,calc(100vw - 28px));
  transform:translate(-50%,-16px);
  opacity:0;
  pointer-events:none;
  padding:13px 17px;
  border-radius:12px;
  border:1px solid #2b9f7d;
  background:#0c352e;
  color:#e2fff6;
  font-weight:750;
  text-align:center;
  box-shadow:0 18px 50px #000a;
  transition:opacity .18s ease,transform .18s ease;
}
.dialog-notice.show{
  opacity:1;
  transform:translate(-50%,0);
}
.dialog-notice.error{
  border-color:#c25566;
  background:#4a1721;
  color:#ffe9ec;
}
.dialog-notice.success{
  border-color:#2b9f7d;
  background:#0c352e;
  color:#e2fff6;
}
.restore-progress-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.restore-progress-actions button{
  min-height:46px;
}
#recoverRestore{
  margin-left:auto;
}
@media(max-width:760px){
  .dialog-notice{
    top:max(10px,calc(env(safe-area-inset-top,0px) + 6px));
  }
  .restore-progress-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .restore-progress-actions button,
  #recoverRestore{
    width:100%;
    margin:0;
  }
}