/* User preferences surface and Alloy-inspired appearance themes. */
:root[data-kc-theme="light"],:root[data-kc-theme="system"]{color-scheme:light;--bg:#f2f3f5;--ink:#33383e;--muted:#6d747d;--line:#d8dadd;--nav:#214778;--teal:#2169bb;--panel:#fff;--panel-muted:#e9eef3;--table-even:#f5f6f8;--table-hover:#eaf2f9}
:root[data-kc-theme="dark"]{color-scheme:dark;--bg:#111213;--ink:#e7e8ea;--muted:#a3a6aa;--line:#383a3d;--nav:#214778;--teal:#3295d2;--panel:#191a1c;--panel-muted:#26282a;--table-even:#202224;--table-hover:#2b333a}
.user-pref-section{border:1px solid var(--line);border-radius:6px;margin:12px 0;overflow:hidden;background:var(--panel);color:var(--ink)}
.user-pref-section h3{margin:0;padding:10px 13px;background:var(--panel-muted);font-size:15px}
.user-pref-section>p{margin:12px 14px}
.user-pref-choice{display:flex;gap:20px;padding:13px}
.user-pref-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:13px}
.user-pref-grid label,.user-pref-choice label,.user-pref-section fieldset label{display:flex;align-items:center;gap:8px}
.user-pref-grid input[type=checkbox],.user-pref-choice input,.user-pref-section fieldset input{width:auto;margin:0}
.user-pref-grid input[type=number]{display:block;width:100%;margin-top:5px}
.user-pref-grid fieldset{border:1px solid var(--line);display:grid;gap:8px}
.user-pref-start{grid-column:1}
.user-pref-start+select{align-self:center}
#toolsDialog:has(.user-pref-section){width:min(760px,95vw);max-height:88vh;overflow:auto}
.profile-name[role=button],.user-circle[role=button]{cursor:pointer}

/* Light mode keeps Alloy's blue application frame with white and soft-gray work surfaces. */
:root[data-kc-theme="light"] body,:root[data-kc-theme="system"] body{background:var(--bg);color:var(--ink)}
:root[data-kc-theme="light"] .workspacebar,:root[data-kc-theme="system"] .workspacebar,:root[data-kc-theme="light"] .inventory-workspace,:root[data-kc-theme="system"] .inventory-workspace{background:#fff;color:var(--ink)}
:root[data-kc-theme="light"] .record-form,:root[data-kc-theme="system"] .record-form,:root[data-kc-theme="light"] .dashboard-canvas,:root[data-kc-theme="system"] .dashboard-canvas{background:var(--bg);color:var(--ink)}

/* Dark mode follows Alloy's charcoal canvas and layered charcoal panels; blue remains the brand accent. */
:root[data-kc-theme="dark"] body,:root[data-kc-theme="dark"] main,:root[data-kc-theme="dark"] .main{background:var(--bg);color:var(--ink)}
:root[data-kc-theme="dark"] header{background:#214778;color:#d4e4f8;border-color:#214778}
:root[data-kc-theme="dark"] footer{color:var(--muted);border-color:var(--line)}
:root[data-kc-theme="dark"] .workspacebar,:root[data-kc-theme="dark"] .inventory-workspace,:root[data-kc-theme="dark"] .inventory-upper,:root[data-kc-theme="dark"] .grid-scroll,:root[data-kc-theme="dark"] .record-main,:root[data-kc-theme="dark"] .record-form,:root[data-kc-theme="dark"] .record-preview,:root[data-kc-theme="dark"] .tab-content,:root[data-kc-theme="dark"] .kc-admin-layout,:root[data-kc-theme="dark"] .kc-admin-content,:root[data-kc-theme="dark"] .dashboard-canvas,:root[data-kc-theme="dark"] .kc-board,:root[data-kc-theme="dark"] .record-workspace{background:var(--bg);color:var(--ink)}
:root[data-kc-theme="dark"] .record-breadcrumb,:root[data-kc-theme="dark"] .record-tools,:root[data-kc-theme="dark"] .record-identity,:root[data-kc-theme="dark"] .grid-footer,:root[data-kc-theme="dark"] .group-box{background:#191a1c;color:var(--ink);border-color:var(--line)}
:root[data-kc-theme="dark"] .record-tabs{background:#26282a;border-color:var(--line)}
:root[data-kc-theme="dark"] .record-tabs button{color:#c1c5c9}
:root[data-kc-theme="dark"] .record-tabs button.active{background:#191a1c;color:#74c9f4;border-color:#3295d2}
:root[data-kc-theme="dark"] .assetgrid th,:root[data-kc-theme="dark"] .assetgrid td{background:#191a1c;color:var(--ink);border-color:var(--line)}
:root[data-kc-theme="dark"] .assetgrid th{background:#26282a;color:#d5d7da}
:root[data-kc-theme="dark"] .assetgrid tbody tr:nth-child(even),:root[data-kc-theme="dark"] .assetgrid tbody tr:nth-child(even) td{background:#202224}
:root[data-kc-theme="dark"] .assetgrid tbody tr:hover,:root[data-kc-theme="dark"] .assetgrid tbody tr:hover td{background:#2b333a}
:root[data-kc-theme="dark"] .assetgrid .selected-row,:root[data-kc-theme="dark"] .assetgrid tbody tr.selected-row td{background:#193d58;color:#f2f7fb}
:root[data-kc-theme="dark"] .assetgrid td a,:root[data-kc-theme="dark"] .preview-heading h2{color:#75bdea}
:root[data-kc-theme="dark"] .stat,:root[data-kc-theme="dark"] .panel,:root[data-kc-theme="dark"] .record-card,:root[data-kc-theme="dark"] .record-preview>div,:root[data-kc-theme="dark"] .kc-admin-cards>a,:root[data-kc-theme="dark"] .kc-board article,:root[data-kc-theme="dark"] .chart-card,:root[data-kc-theme="dark"] .kc-day{background:var(--panel);color:var(--ink);border-color:var(--line);box-shadow:none}
:root[data-kc-theme="dark"] .record-card summary,:root[data-kc-theme="dark"] .kc-board>section,:root[data-kc-theme="dark"] .action-title,:root[data-kc-theme="dark"] th{background:var(--panel-muted);color:var(--ink);border-color:var(--line)}
:root[data-kc-theme="dark"] .action-rail,:root[data-kc-theme="dark"] .action-rail button{background:var(--panel);color:var(--ink);border-color:var(--line)}
:root[data-kc-theme="dark"] .action-rail button:hover,:root[data-kc-theme="dark"] .kc-admin-layout>nav a:hover,:root[data-kc-theme="dark"] .kc-admin-layout>nav a.active{background:#263849;color:#8ad3f4}
:root[data-kc-theme="dark"] .kc-admin-layout>nav{background:#191a1c}
:root[data-kc-theme="dark"] .kc-admin-layout>nav a,:root[data-kc-theme="dark"] .kc-admin-cards>a,:root[data-kc-theme="dark"] .kc-connection{color:#b9d2ea;border-color:var(--line)}
:root[data-kc-theme="dark"] .kc-connection{background:#22272b}
:root[data-kc-theme="dark"] .kc-admin-cards>a:hover{background:#202b34;border-color:#3295d2}
:root[data-kc-theme="dark"] .toolbar,:root[data-kc-theme="dark"] .panel-head,:root[data-kc-theme="dark"] .attention a,:root[data-kc-theme="dark"] .note-entry,:root[data-kc-theme="dark"] .status-summary{border-color:var(--line)}
:root[data-kc-theme="dark"] .track,:root[data-kc-theme="dark"] .kc-calendar{background:#303337}
:root[data-kc-theme="dark"] .kc-day>a{background:#263849;color:#b8d9f4}
:root[data-kc-theme="dark"] .kc-board article small,:root[data-kc-theme="dark"] .kc-muted,:root[data-kc-theme="dark"] .field small,:root[data-kc-theme="dark"] .record-field span,:root[data-kc-theme="dark"] .record-field input,:root[data-kc-theme="dark"] .record-field select{color:#c1c5c9}
:root[data-kc-theme="dark"] input,:root[data-kc-theme="dark"] select,:root[data-kc-theme="dark"] textarea,:root[data-kc-theme="dark"] dialog{background:#202224;color:var(--ink);border-color:#474a4e}
:root[data-kc-theme="dark"] .record-field input,:root[data-kc-theme="dark"] .record-field select{background:#202224}
:root[data-kc-theme="dark"] dialog{background:#191a1c;color:var(--ink);box-shadow:0 20px 80px #000b}
:root[data-kc-theme="dark"] dialog::backdrop{background:#000a}
:root[data-kc-theme="dark"] .user-pref-section{background:var(--panel);color:var(--ink);border-color:var(--line)}
:root[data-kc-theme="dark"] .user-pref-section h3{background:var(--panel-muted)}
:root[data-kc-theme="dark"] .user-pref-grid fieldset{border-color:var(--line)}
:root[data-kc-theme="dark"] .badge{background:#263b2c;color:#a7d5b0}
:root[data-kc-theme="dark"] .badge.deployed{background:#203847;color:#98d7f2}
:root[data-kc-theme="dark"] .badge.inrepair{background:#493a21;color:#ebca82}
:root[data-kc-theme="dark"] .badge.retired{background:#363739;color:#c3c5c7}
:root[data-kc-theme="dark"] .btn:not(.primary){background:#202224;color:var(--ink);border-color:#474a4e}
:root[data-kc-theme="dark"] .btn:not(.primary):hover{background:#2b333a}
:root[data-kc-theme="dark"] .preview-columns>div{border-color:var(--line)}
:root[data-kc-theme="dark"] .link{color:#75bdea}
:root[data-kc-theme="dark"] .barrow,:root[data-kc-theme="dark"] .status-summary{color:var(--ink)}

/* Treat User Settings as a workspace page, following Alloy's title, cards and fixed action bar. */
#toolsDialog:has(.user-pref-section){position:fixed;inset:56px 0 0 52px;margin:0;width:auto;max-width:none;height:auto;max-height:none;padding:0;overflow:auto;border:0;border-radius:0;background:var(--bg);color:var(--ink);box-shadow:none}
#toolsDialog:has(.user-pref-section)::backdrop{background:transparent}
#toolsDialog:has(.user-pref-section) #toolsForm{min-height:100%;display:flex;flex-direction:column}
#toolsDialog:has(.user-pref-section) .dialog-head{position:sticky;top:0;z-index:4;margin:0;padding:17px 28px;background:var(--bg);border-bottom:1px solid var(--line);align-items:center}
#toolsDialog:has(.user-pref-section) .dialog-head h2{font-size:23px;font-weight:500;letter-spacing:0}
#toolsDialog:has(.user-pref-section) .dialog-head .icon{font-size:23px;padding:0 6px;color:var(--muted)}
#toolsDialog:has(.user-pref-section) .user-pref-section{width:min(750px,calc(100% - 40px));margin:14px 20px 0;border:1px solid var(--line);border-radius:4px;box-shadow:none}
#toolsDialog:has(.user-pref-section) .user-pref-section h3{padding:10px 15px;background:var(--panel-muted);color:var(--ink);font-size:16px;font-weight:600}
#toolsDialog:has(.user-pref-section) .user-pref-section>p{margin:14px 16px 0;color:var(--muted)}
#toolsDialog:has(.user-pref-section) .user-pref-choice{padding:14px 15px;gap:0}
#toolsDialog:has(.user-pref-section) .user-pref-choice label{min-height:42px;justify-content:center;padding:8px 17px;border:1px solid var(--line);background:var(--panel);cursor:pointer}
#toolsDialog:has(.user-pref-section) .user-pref-choice label+label{border-left:0}
#toolsDialog:has(.user-pref-section) .user-pref-choice label:first-child{border-radius:4px 0 0 4px}
#toolsDialog:has(.user-pref-section) .user-pref-choice label:last-child{border-radius:0 4px 4px 0}
#toolsDialog:has(.user-pref-section) .user-pref-choice label:has(input:checked){background:#e8f2fc;color:#155fa9;border-color:#9bbddd}
#toolsDialog:has(.user-pref-section) .user-pref-choice input{accent-color:#176dc1}
#toolsDialog:has(.user-pref-section) .user-pref-grid:has(input[name="rowsPerPage"]){grid-template-columns:1fr;gap:10px;padding:15px 16px 17px}
#toolsDialog:has(.user-pref-section) .user-pref-grid:has(input[name="rowsPerPage"])>label:not(.user-pref-check){display:grid;grid-template-columns:minmax(220px,1fr) 125px;align-items:center;gap:14px}
#toolsDialog:has(.user-pref-section) .user-pref-grid:has(input[name="rowsPerPage"])>label:not(.user-pref-check) input{margin:0}
#toolsDialog:has(.user-pref-section) .user-pref-grid .user-pref-check{grid-column:1/-1;display:flex;align-items:center;gap:9px;min-height:24px}
#toolsDialog:has(.user-pref-section) .user-pref-grid fieldset{grid-column:1/-1;border:0;border-top:1px solid var(--line);padding:11px 0 0;margin:2px 0 0;gap:7px}
#toolsDialog:has(.user-pref-section) .user-pref-grid fieldset legend{padding:0 8px 0 0;font-size:13px;color:var(--ink)}
#toolsDialog:has(.user-pref-section) .user-pref-grid fieldset label{min-height:25px}
#toolsDialog:has(.user-pref-section) .user-pref-grid input[type=checkbox],#toolsDialog:has(.user-pref-section) .user-pref-choice input{accent-color:#1477d4}
#toolsDialog:has(.user-pref-section) .dialog-actions{position:sticky;bottom:0;z-index:5;justify-content:flex-start;margin:18px 0 0;padding:12px 20px;background:var(--panel-muted);border-top:1px solid var(--line)}
#toolsDialog:has(.user-pref-section) .dialog-actions .btn{min-width:96px;min-height:40px;border-radius:4px}
#toolsDialog:has(.user-pref-section) .dialog-actions .primary{background:#176dc1;border-color:#176dc1;color:white}
:root[data-kc-theme="dark"] #toolsDialog:has(.user-pref-section) .user-pref-choice label:has(input:checked){background:#162a3b;color:#77bff0;border-color:#375c7a}
:root[data-kc-theme="dark"] #toolsDialog:has(.user-pref-section) .dialog-actions{background:#202224}
@media(max-width:750px){#toolsDialog:has(.user-pref-section){inset:56px 0 0 45px}#toolsDialog:has(.user-pref-section) .dialog-head{padding:14px 16px}#toolsDialog:has(.user-pref-section) .user-pref-section{width:calc(100% - 24px);margin:12px 12px 0}#toolsDialog:has(.user-pref-section) .user-pref-grid:has(input[name="rowsPerPage"])>label:not(.user-pref-check){grid-template-columns:minmax(0,1fr) 100px}}

/* Keep compact numeric controls alongside their labels like Alloy's form rows. */
#toolsDialog:has(.user-pref-section) .user-pref-grid:has(input[name="rowsPerPage"])>label:not(.user-pref-check){width:min(475px,100%);grid-template-columns:minmax(200px,220px) 125px;justify-content:start}
#toolsDialog:has(.user-pref-section) .user-pref-choice label:has(input[value="system"])::before{content:"⚙";font-size:18px;margin-right:2px}
#toolsDialog:has(.user-pref-section) .user-pref-choice label:has(input[value="light"])::before{content:"☼";font-size:19px;margin-right:2px}
#toolsDialog:has(.user-pref-section) .user-pref-choice label:has(input[value="dark"])::before{content:"☾";font-size:18px;margin-right:2px}

/* Use the platform's Windows system UI face throughout the application. */
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Arial,sans-serif;font-optical-sizing:auto;font-synthesis:none}
body,dialog,button,input,select,textarea{font-family:inherit}
body{font-size:14px;line-height:1.45;font-weight:400;letter-spacing:normal}
#toolsDialog:has(.user-pref-section){font-size:14px;line-height:1.45}
#toolsDialog:has(.user-pref-section) .user-pref-grid label,
#toolsDialog:has(.user-pref-section) .user-pref-choice label,
#toolsDialog:has(.user-pref-section) .user-pref-section>p{font-size:14px;line-height:1.4}
#toolsDialog:has(.user-pref-section) .user-pref-grid input[type=number],
#toolsDialog:has(.user-pref-section) .user-pref-grid select{font-size:14px}

/* Keep settings title and actions outside the independently scrolling form content. */
#toolsDialog:has(.user-pref-section){overflow:hidden}
#toolsDialog:has(.user-pref-section) #toolsForm{height:100%;min-height:0;overflow:hidden}
#toolsDialog:has(.user-pref-section) .dialog-head{position:relative;inset:auto;top:auto;flex:0 0 auto}
#toolsDialog:has(.user-pref-section) .user-pref-content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 0 18px}
#toolsDialog:has(.user-pref-section) .dialog-actions{position:relative;inset:auto;bottom:auto;flex:0 0 auto;margin:0}
#toolsDialog:has(.user-pref-section) .user-pref-search{display:grid;grid-template-columns:minmax(0,1fr);padding:6px 16px 14px}
#toolsDialog:has(.user-pref-section) .user-pref-search-option{display:grid;grid-template-columns:20px minmax(110px,160px) minmax(0,1fr);align-items:center;gap:12px;min-height:52px;padding:8px 4px;border-bottom:1px solid var(--line);font-size:14px}
#toolsDialog:has(.user-pref-section) .user-pref-search-option:last-child{border-bottom:0}
#toolsDialog:has(.user-pref-section) .user-pref-search-option span{font-weight:500;color:var(--ink)}
#toolsDialog:has(.user-pref-section) .user-pref-search-option small{font-size:13px;color:var(--muted)}
#toolsDialog:has(.user-pref-section) .user-pref-search-option input[type="radio"]{display:block;width:16px;height:16px;min-width:16px;margin:0;padding:0;accent-color:#1477d4}
#toolsDialog:has(.user-pref-section) .user-pref-search-start select{grid-column:3;width:min(360px,100%);margin:0}
#toolsDialog:has(.user-pref-section) .user-pref-grid input[type="radio"]{display:inline-block;width:16px;height:16px;min-width:16px;margin:0;padding:0;accent-color:#1477d4;flex:0 0 16px}
:root[data-kc-theme="dark"] #toolsDialog:has(.user-pref-section) .user-pref-search-option{border-color:#383a3d}
@media(max-width:750px){
#toolsDialog:has(.user-pref-section) .user-pref-search-option{grid-template-columns:20px minmax(0,1fr);gap:6px 10px}
#toolsDialog:has(.user-pref-section) .user-pref-search-option small{grid-column:2}
#toolsDialog:has(.user-pref-section) .user-pref-search-start select{grid-column:2;width:100%}
}