/* Unified operating UI: compact hierarchy, readable forms and unmistakable choices. */
:root{--ui-ink:#163b43;--ui-muted:#667d82;--ui-line:rgba(39,105,105,.16);--ui-accent:#087d80;--ui-accent-dark:#075f67;--ui-accent-readable:#075f67;--ui-on-accent:#fff;--ui-accent-soft:#e5f4f1;--ui-focus:rgba(8,125,128,.16)}
body{color:var(--ui-ink);font-size:14px;line-height:1.55}
main{width:auto;max-width:none;padding:24px 30px 48px}
main>header{margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--ui-line)}
main>header h1{font-size:28px;line-height:1.25;letter-spacing:-.025em;margin:0}
main>header .badge{margin-left:auto;white-space:nowrap}
#content{width:100%;max-width:1500px}
h2,h3,strong,th,td,label,p,small,button,a,summary{overflow-wrap:anywhere}
h2{line-height:1.35;letter-spacing:-.012em}
h3{line-height:1.42}
p{max-width:100%;line-height:1.75}
.muted,.source{color:var(--ui-muted)}

/* The shell header already names the workspace. Keep only useful actions from duplicate hero blocks. */
.panel-hero.compact-hero-actions{min-height:0!important;margin:0 0 16px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;justify-content:flex-end!important}
.panel-hero.compact-hero-actions>.actions{margin:0;justify-content:flex-end}
.panel-hero.compact-hero-actions>.mail-count{margin-left:auto}
.panel-hero.compact-hero-actions:before,.panel-hero.compact-hero-actions:after{display:none!important}

/* Functional areas should be noticeable without becoming visually heavy. */
.card{overflow:visible;border-color:var(--ui-line);box-shadow:0 10px 28px rgba(19,73,75,.045)}
.card>h2:first-child,.card>.row:first-child h2,.card>.section-title h2{font-size:19px;color:#123f46;margin-bottom:12px}
.card>h2:first-child:before,.card>.row:first-child h2:before{content:"";display:inline-block;width:4px;height:17px;margin:0 9px -2px 0;border-radius:99px;background:linear-gradient(180deg,#25a7a1,#08717b)}
.section-icon{box-shadow:inset 0 0 0 1px rgba(8,125,128,.1)}
.notice{border-left-width:4px;background:linear-gradient(90deg,rgba(226,245,241,.96),rgba(245,250,249,.72));color:#315e61}
.metric{border-color:var(--ui-line)}
.metric strong{font-variant-numeric:tabular-nums}
.core-metrics{grid-template-columns:repeat(5,minmax(0,1fr))}
.core-todo-card{border-top:3px solid rgba(16,139,137,.68)}
.business-direct-card{padding-top:18px}
.business-direct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.business-direct{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 12px;min-height:82px;padding:16px;text-align:left;background:linear-gradient(145deg,#f7fbfa,#e8f4f2)!important;color:#184e54!important;border:1px solid rgba(39,105,105,.15)!important;box-shadow:none!important}
.business-direct span{font-size:15px;font-weight:750}
.business-direct small{grid-column:1;color:#6a8183;font-weight:500}
.business-direct b{grid-column:2;grid-row:1/3;align-self:center;font-size:20px;color:#188b87;transition:transform .18s ease}
.business-direct:hover{border-color:rgba(17,139,135,.4)!important;background:#edf8f5!important}
.business-direct:hover b{transform:translateX(4px)}
.secondary-todos>summary{font-weight:750}

button,.mail-link{min-height:40px;border-radius:10px;font-weight:650;line-height:1.25}
button:not(.secondary):not(.danger-button),.mail-link{background:linear-gradient(135deg,#0a8d8d,#087079);box-shadow:0 7px 17px rgba(8,112,121,.14)}
button.secondary{border:1px solid rgba(52,102,105,.12);background:#edf3f3;color:#315b61}
button:focus-visible,a:focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px}
.danger-button{border:1px solid rgba(179,55,55,.16)!important}
.app-sidebar button{box-shadow:none!important;font-weight:500}
.app-sidebar nav{direction:rtl;scrollbar-gutter:stable;scrollbar-color:rgba(8,125,128,.42) transparent}
.app-sidebar nav::-webkit-scrollbar{width:6px}
.app-sidebar nav::-webkit-scrollbar-track{background:transparent}
.app-sidebar nav::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(8,125,128,.38)}
.app-sidebar nav button{position:relative;direction:ltr;overflow:hidden;background:transparent!important;color:#4e6469!important;outline-offset:-2px}
.app-sidebar nav button.active{background:linear-gradient(90deg,#e0f1ec,#edf6f3)!important;color:#08746f!important;font-weight:750;box-shadow:none!important}
.app-sidebar nav button.active:before{content:"";position:absolute;inset:7px auto 7px 0;width:3px;border-radius:0 3px 3px 0;background:#168c87}
.app-sidebar .sidebar-toggle{background:#eef6f3!important;color:#28635f!important}
.order-state-grid>button.card,.metric-button,.feature-zone{background:rgba(255,255,255,.9)!important;color:#315966!important;box-shadow:0 7px 20px rgba(19,73,75,.04)!important}
.order-state-grid>button.card.selected-state{background:#e4f3f2!important;border-color:#2f9698!important;box-shadow:inset 0 0 0 1px rgba(47,150,152,.22)!important}

/* Tabs display a clear selected marker. */
.suite-tabs,.crm-tabs,.order-center-tabs,.dossier-tabs{gap:7px;padding:7px;background:rgba(238,246,244,.78);border:1px solid var(--ui-line);border-radius:14px}
.suite-tabs button,.crm-tabs button,.dossier-tabs button{min-height:42px;border:1px solid transparent!important;box-shadow:none!important}
.suite-tabs button:not(.secondary),.crm-tabs button:not(.secondary),.dossier-tabs button:not(.secondary){background:#fff!important;color:var(--ui-accent-dark)!important;border-color:rgba(8,125,128,.28)!important;box-shadow:0 5px 16px rgba(23,87,86,.09)!important}
.suite-tabs button:not(.secondary):before,.crm-tabs button:not(.secondary):before,.dossier-tabs button:not(.secondary):before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:7px;border-radius:50%;background:var(--ui-accent);color:#fff;font-size:11px}
.suite-tabs button.secondary,.crm-tabs button.secondary,.dossier-tabs button.secondary{background:transparent;color:#577176}

/* Predictable form grid and field alignment. */
form>.row{align-items:flex-start;gap:12px 14px}
form>.row>div,form>.row>label{min-width:min(100%,170px)}
form>.row>div>label:first-child,form>.row>label{font-weight:650;color:#405f64}
label{line-height:1.45;margin-top:11px}
input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:44px;border-radius:10px;border-color:#cdddda;padding:10px 12px;line-height:1.4}
textarea{min-height:96px}
input::placeholder,textarea::placeholder{color:#9aa9ac;opacity:1}
input[type=checkbox],input[type=radio]{width:18px!important;height:18px!important;min-height:0;flex:0 0 auto;accent-color:var(--ui-accent)}
.permission-grid label,.mail-review label,.selection-card{cursor:pointer}
.field-hint{min-height:17px;margin-top:5px}
.password-field,.custom-forward{align-items:stretch}
.password-field button,.custom-forward button{min-height:44px}
.voucher-field{margin-top:14px;padding:14px;border:1px solid rgba(39,105,105,.12);border-radius:12px;background:rgba(244,249,248,.72)}
.voucher-field label{margin-top:0}

/* Native selects remain accessible, with a strong current/multiple selection state. */
select:not([multiple]):not([size]){appearance:auto;cursor:pointer;background-color:#fff}
select:hover{border-color:#77ada7}
select:focus{border-color:var(--ui-accent)!important;box-shadow:0 0 0 4px var(--ui-focus)!important}
select[multiple],select[size]{min-height:154px;padding:6px;background:#f8fbfa;border:1px solid rgba(8,125,128,.24)}
select[multiple] option,select[size] option{padding:10px 12px;margin:3px 0;border-radius:8px;color:#365d62}
select[multiple] option:checked,select[size] option:checked{background:linear-gradient(135deg,#0b898a,#087079);color:#fff;font-weight:700}
.multi-select-status{display:block;margin-top:7px;color:#74898d;font-size:12px}
.multi-select-status.has-selection{color:#08746f;font-weight:750}
.selection-card{transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.selection-card:has(input:checked){border-color:#4ca59b;background:#e7f5f1;box-shadow:0 0 0 3px rgba(8,125,128,.08)}
.selection-card:has(input:checked) strong:before{content:"✓ ";color:var(--ui-accent)}

.contract-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;margin-top:16px}
.electronic-contract-center>.row{align-items:flex-start}.electronic-contract-center>.row>div{flex:1 1 420px}.electronic-contract-center>.row>.badge{flex:0 0 auto;width:auto}
.contract-card{min-width:0;padding:16px;border:1px solid rgba(39,105,105,.14);border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(237,248,246,.78))}
.contract-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.contract-card header span{display:block;margin-top:3px;color:#74898c;font-size:12px}
.contract-card dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 13px}
.contract-card dt{font-size:11px;color:#7b9092}
.contract-card dd{margin:3px 0 0;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:#315c61}
.contract-card form{display:grid;gap:9px;margin-top:10px}
.contract-card label{margin:0}
.contract-actions{display:grid;gap:10px}
.button-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
@media(max-width:620px){.contract-card dl{grid-template-columns:1fr}.electronic-contract-center>.row>.badge{margin-left:0}}

/* Tables, details and dense operational rows stay readable at every width. */
.table-wrap{border:1px solid rgba(39,105,105,.11);background:#fff}
th{padding:12px;color:#536f74;font-weight:700;white-space:nowrap}
td{padding:13px 12px;line-height:1.55;max-width:360px;overflow-wrap:anywhere}
td .actions{margin:0;align-items:center}
td button{white-space:nowrap}
tbody tr:hover td{background:rgba(231,244,241,.45)}
.order-ledger-toolbar{align-items:center}
.order-ledger-toolbar>div{min-width:150px}
.order-record-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:16px}
.order-record-card{display:flex;flex-direction:column;min-height:270px;padding:17px;border:1px solid rgba(39,105,105,.14);border-radius:15px;background:linear-gradient(155deg,#fff,#f7fbfa);box-shadow:0 8px 24px rgba(22,73,75,.045)}
.order-record-card header{display:flex;justify-content:space-between;gap:12px;min-height:60px;padding-bottom:12px;border-bottom:1px solid rgba(39,105,105,.11)}
.order-record-card h3{display:-webkit-box;margin:0 0 4px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:16px}
.order-record-card header span{font-size:12px;color:#74898c}
.order-record-card dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:13px 0}
.order-record-card dl div{min-width:0}
.order-record-card dt{font-size:11px;color:#7b9092}
.order-record-card dd{margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:#315c61}
.order-record-card details{margin:0 0 13px;padding:0!important;border:0!important;background:transparent!important}
.order-record-card details summary{padding:6px 0!important;font-size:12px}
.order-record-card details p{display:flex;justify-content:space-between;gap:12px;margin:6px 0;font-size:12px}
.order-record-card details p span{color:#74898c}
.order-record-card details p strong{text-align:right}
.order-record-card>button{margin-top:auto;width:100%}
.order-more{margin-top:14px}
.operational-support-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:20px;min-width:0}
.operational-support-grid>section{min-width:0}
.notice-list{display:grid;gap:8px}
.notice-list article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px;border:1px solid rgba(39,105,105,.11);border-radius:11px;background:#f8fbfa;min-width:0}
.notice-list article>div{min-width:0}
.notice-list strong,.notice-list span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice-list span,.notice-list time{margin-top:4px;color:#74898c;font-size:11px;white-space:nowrap}
.workflow-row{overflow:visible}
.workflow-row>div,.workflow-row form{min-width:0}
.workflow-row form>*{min-width:0}
details:not(.more-records):not(.card){border:1px solid rgba(39,105,105,.12);border-radius:12px;padding:0 14px;background:rgba(250,253,252,.72)}
details:not(.more-records):not(.card)>summary{padding:13px 2px;font-weight:700;color:#315e62}
details[open]:not(.more-records):not(.card)>summary{border-bottom:1px solid rgba(39,105,105,.11);margin-bottom:12px}
.actions{align-items:center}
.actions>span,.actions>.muted{line-height:40px}

/* Dialogs and floating alerts must never hide or compress their text. */
dialog{line-height:1.6}
.record-detail-dialog,.order-detail-dialog{overflow:auto}
.record-detail-dialog dd,.order-detail-dialog td,.mail-template{overflow-wrap:anywhere;word-break:break-word}
#order-alerts{border-radius:18px;border-top-width:1px;background:rgba(251,254,253,.96);backdrop-filter:blur(20px)}
#order-alerts h3{font-size:18px}
#order-alerts [data-alert-body][hidden]{display:none}
.supplier-governance,.payment-statement-panel{display:grid;gap:14px}
.supplier-governance details,.payment-statement-panel details{padding:12px 14px;border:1px solid var(--line,#d7e7e8);border-radius:14px;background:rgba(255,255,255,.5)}
.supplier-governance summary,.payment-statement-panel summary{cursor:pointer;font-weight:650}
.import-map-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:14px}
.import-map-form button{align-self:end}
.supplier-contract-list,.supplier-import-list,.payment-batch-rows{display:grid;gap:8px;min-width:0}
.import-review{flex-basis:100%;width:100%;min-width:0;margin-top:6px}
.import-review summary{cursor:pointer}
.payment-batch-row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(160px,240px);align-items:center;gap:10px;min-width:0;padding:8px;border-bottom:1px solid var(--line,#d7e7e8)}
.payment-batch-row span{overflow-wrap:anywhere}
@media(max-width:700px){.payment-batch-row{grid-template-columns:auto minmax(0,1fr)}.payment-batch-row select{grid-column:2}}
.alert-item{padding:14px 0}
.alert-item p{margin:7px 0}
.secure-login,.security-onboarding{box-shadow:0 30px 90px rgba(10,61,66,.12)}
.security-onboarding{max-width:560px}
.mfa-secret{padding:16px;margin:16px 0;border:1px solid rgba(8,125,128,.2);border-radius:12px;background:#eff8f6}
.mfa-secret span,.mfa-secret strong{display:block}
.mfa-secret strong{margin-top:7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;letter-spacing:.08em;word-break:break-all;color:#0a6669}
.security-onboarding code{display:block;padding:12px;word-break:break-all;background:#f3f6f6;border-radius:8px}
.recovery-codes{columns:2;padding:18px;border:1px dashed #63a9a2;border-radius:12px;background:#f7fbfa;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:750;line-height:2}
.cms-section-list{display:grid;gap:10px;margin:14px 0}
.cms-section-list article{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:13px;align-items:center;padding:11px;border:1px solid rgba(39,105,105,.12);border-radius:12px;background:#f8fbfa}
.cms-section-list img{display:block;width:92px;height:72px;object-fit:cover;border-radius:9px}
.cms-section-list section{min-width:0}
.cms-section-list small,.cms-section-list strong{display:block}
.cms-section-list small{color:#16817d;text-transform:uppercase}
.cms-section-list p{display:-webkit-box;margin:5px 0 0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#667d82;font-size:12px}
.readiness-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:14px}
.readiness-grid article{padding:14px;border:1px solid rgba(39,105,105,.12);border-radius:12px;background:#f9fbfb}
.readiness-grid article>div{display:flex;align-items:center;gap:8px}
.readiness-grid article .badge{margin:0}
.readiness-grid article p{margin:8px 0 0;color:#677f82;font-size:12px;line-height:1.6}
.readiness-grid .readiness-pass{border-color:rgba(28,145,112,.24);background:#f2faf6}
.readiness-grid .readiness-pending{border-color:rgba(196,137,52,.22);background:#fffaf2}

/* Global company calendar notice: compact in the page flow, expandable without hiding work. */
.company-calendar-banner{margin:-2px 0 18px;padding:13px 15px;border:1px solid rgba(38,132,127,.23);border-radius:16px;background:linear-gradient(135deg,rgba(229,247,242,.96),rgba(249,252,251,.9));box-shadow:0 10px 28px rgba(20,79,76,.055);overflow:hidden}
.company-calendar-banner[hidden]{display:none!important}
.calendar-banner-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.calendar-banner-title{display:flex;align-items:center;gap:11px;min-width:0}
.calendar-banner-title>div{min-width:0}
.calendar-banner-title strong,.calendar-banner-title small{display:block}
.calendar-banner-title small{margin-top:3px;color:#55736f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-mark{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:linear-gradient(145deg,#118f8c,#087079);color:#fff;font-weight:800;box-shadow:0 7px 16px rgba(8,112,121,.17)}
.calendar-banner-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.calendar-banner-actions button{min-height:36px;padding:8px 12px}
.calendar-banner-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(45,119,115,.13)}
.calendar-alert-item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.72);border:1px solid rgba(45,119,115,.1);min-width:0}
.calendar-alert-item.is-today{border-color:#e2a17e;background:#fff7f1}
.calendar-alert-item time strong,.calendar-alert-item time span{display:block}
.calendar-alert-item time strong{font-size:16px;color:#156c68}
.calendar-alert-item time span{font-size:11px;color:#728985;margin-top:2px}
.calendar-alert-item>div>strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-alert-item p{margin:3px 0 0;color:#6b817e;font-size:12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.calendar-more{grid-column:1/-1;justify-self:start}
.company-calendar-banner.is-collapsed{padding-top:10px;padding-bottom:10px}
.company-calendar-banner.is-collapsed .calendar-banner-body{display:none}
.company-calendar-banner.is-collapsed .calendar-mark{width:30px;height:30px;border-radius:9px}
.company-calendar-dialog{width:min(780px,calc(100vw - 28px));max-height:86vh;padding:0;border:1px solid rgba(96,163,156,.28);border-radius:22px;background:rgba(250,253,252,.98);box-shadow:0 30px 100px rgba(7,50,55,.25)}
.company-calendar-dialog::backdrop{background:rgba(11,42,47,.48);backdrop-filter:blur(7px)}
.company-calendar-dialog .dialog-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:21px 24px;background:rgba(250,253,252,.92);border-bottom:1px solid rgba(45,119,115,.13);backdrop-filter:blur(18px)}
.company-calendar-dialog .dialog-head h2{margin:2px 0 0}
.calendar-dialog-list{padding:12px 24px 24px}
.calendar-dialog-list article{display:grid;grid-template-columns:145px minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid rgba(45,119,115,.12)}
.calendar-dialog-list article:last-child{border-bottom:0}
.calendar-dialog-list time strong,.calendar-dialog-list time span{display:block}
.calendar-dialog-list time span{margin-top:4px;color:#718783;font-size:12px}
.calendar-dialog-list article .row{justify-content:flex-start}
.calendar-dialog-list article .row>*{flex:0 0 auto}
.calendar-dialog-list article p{margin:6px 0 0;color:#637c78}

@media(min-width:1100px){
 form>.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
 form>.row>button{width:max-content;align-self:end}
 .topbar form.row{display:flex}
}
@media(max-width:900px){
 main{padding:20px}
 .two,.mail-settings-grid,.finance-overview-grid{grid-template-columns:1fr!important}
 .core-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .operational-support-grid{grid-template-columns:1fr}
 .workflow-row,.opportunity-row{grid-template-columns:1fr!important}
 .workflow-row form,.opportunity-row form{grid-template-columns:1fr 1fr!important}
}
@media(max-width:620px){
 main{padding:15px}
 main>header h1{font-size:23px}
 .card{padding:16px;border-radius:14px}
 .core-metrics,.order-record-grid,.business-direct-grid{grid-template-columns:1fr}
 .order-record-card{min-height:0}
 .order-ledger-toolbar{display:grid;grid-template-columns:1fr}
 .order-ledger-toolbar>*{width:100%}
 .notice-list article{grid-template-columns:1fr}
 .recovery-codes{columns:1}
 .cms-section-list article{grid-template-columns:70px minmax(0,1fr)}
 .cms-section-list img{width:70px;height:58px}
 .cms-section-list button{grid-column:1/-1;width:100%}
 .suite-tabs,.crm-tabs,.order-center-tabs{overflow-x:auto;flex-wrap:nowrap}
 .suite-tabs button,.crm-tabs button,.order-center-tabs button{min-width:max-content}
 form>.row{display:grid;grid-template-columns:1fr}
 .workflow-row form,.opportunity-row form{grid-template-columns:1fr!important}
 .actions{align-items:stretch}
 .actions button,.actions a{flex:1 1 auto;text-align:center}
 #order-alerts{right:10px;bottom:10px;max-width:calc(100vw - 20px)}
 .company-calendar-banner{margin-bottom:14px;padding:11px 12px;border-radius:14px}
 .calendar-banner-head{align-items:flex-start;gap:9px}
 .calendar-banner-title{flex:1}
 .calendar-banner-title small{max-width:44vw}
 .calendar-banner-actions{gap:5px}
 .calendar-banner-actions button{min-height:34px;padding:7px 9px;font-size:12px}
 .calendar-banner-body{grid-template-columns:1fr}
 .calendar-alert-item{grid-template-columns:56px minmax(0,1fr)}
 .calendar-dialog-list{padding:8px 17px 20px}
 .calendar-dialog-list article{grid-template-columns:1fr;gap:7px}
 .company-calendar-dialog .dialog-head{padding:17px}
}

/* Login roles, compact forms and consistent content sizing */
.secure-login{width:min(520px,calc(100vw - 28px));padding:30px!important}
.login-portal-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0;padding:5px;border:1px solid color-mix(in srgb,var(--ui-accent) 18%,#dce9e7);border-radius:14px;background:color-mix(in srgb,var(--ui-accent) 5%,#fff)}
#app .login-portal-tabs button{min-height:42px!important;padding:9px 14px!important;border:0!important;background:transparent!important;color:var(--ink,#153c42)!important;box-shadow:none!important}
#app .login-portal-tabs button.is-active{background:#fff!important;color:var(--ui-accent-readable)!important;box-shadow:0 4px 14px rgba(24,65,69,.09)!important}
.login-options{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.login-options label{display:flex;align-items:center;gap:8px;margin:0;font-weight:650;color:#466763}
.login-options input{width:18px!important;height:18px!important;margin:0}
.login-footnote{margin:18px 0 0;font-size:12px;line-height:1.6}

#content>.card,#content>.two,#content>.grid,#content>.metrics,#content>details{width:100%;min-width:0;box-sizing:border-box}
.suite-layout,.staff-layout,.two{align-items:start}
.suite-layout>*,.staff-layout>*,.two>*,.row>*,.order-record-grid>*{min-width:0}
.card{height:auto;min-height:0;box-sizing:border-box}
.card form>.row{align-items:end}
.card form>.row>div,.card form>.row>label{min-width:0;width:100%}
.card input,.card select,.card textarea{max-width:100%;box-sizing:border-box}
.card textarea{min-height:92px;resize:vertical}
.order-create-card{max-width:940px;margin-inline:auto}
.order-create-card form{display:grid;gap:12px}
.order-dialog-editor{max-width:100%;overflow:hidden}
.record-actions{white-space:normal}
.record-actions button{margin:2px;min-height:34px!important;padding:7px 10px!important}
.danger-action{background:#fff6f3!important;color:#a13f2f!important;border:1px solid #edc0b7!important;box-shadow:none!important}
.danger-action:hover{background:#fff0ec!important}
.staff-archive-card{border-color:#e8c8bd!important;background:rgba(255,249,246,.92)!important}
#oc-all[aria-pressed="true"]{background:var(--ui-accent-soft)!important;color:var(--ui-accent-readable)!important;border-color:color-mix(in srgb,var(--ui-accent) 38%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-accent) 10%,transparent)!important}
.completed-task-history{margin-top:12px;padding-top:10px;border-top:1px solid var(--ui-line)}
.completed-task-history>summary{cursor:pointer;color:#637c78;font-weight:650}
.core-todo-card td:last-child button{margin:2px;min-height:34px!important;padding:7px 10px!important}

@media(max-width:620px){
 .secure-login{padding:22px!important}
 .login-options{display:grid;grid-template-columns:1fr}
 .login-portal-tabs button{font-size:14px}
}

/* Theme reconciliation: every interactive accent and tinted information surface follows
   the color selected in the system theme control. Neutral whites and risk colors stay
   neutral so the chosen accent remains legible instead of flooding the workspace. */
:root{
 --ui-accent-ink:color-mix(in srgb,var(--ui-accent) 72%,#17343b);
 --ui-accent-muted:color-mix(in srgb,var(--ui-accent) 48%,#64777b);
 --ui-accent-line:color-mix(in srgb,var(--ui-accent) 24%,transparent);
 --ui-accent-faint:color-mix(in srgb,var(--ui-accent) 7%,#fff);
 --ui-accent-wash:color-mix(in srgb,var(--ui-accent) 12%,#fff);
 --ui-accent-soft-strong:color-mix(in srgb,var(--ui-accent) 19%,#fff);
 --ui-accent-shadow:color-mix(in srgb,var(--ui-accent) 20%,transparent)
}

/* The sidebar menu affordance is intentionally quiet: no filled square, only the
   three-line glyph changes with the active theme. */
.app-sidebar button.sidebar-toggle,
.app-sidebar button.sidebar-toggle:hover,
.app-sidebar button.sidebar-toggle:active,
.app-sidebar button.sidebar-toggle:focus-visible{
 background:transparent!important;
 border-color:transparent!important;
 box-shadow:none!important;
 color:var(--ui-accent)!important
}
.app-sidebar button.sidebar-toggle:hover{color:var(--ui-accent-dark)!important}
.app-sidebar nav button,.app-sidebar nav button:hover{box-shadow:none!important}
.app-sidebar nav button:not(.active){background:transparent!important;background-image:none!important}

/* Core text accents and navigation. */
.brand,a,summary,.eyebrow,.zone-link,.booking-fields h3,.metric strong,
.crm-pipeline strong,.crm-source strong,.followup-row time,.cms-section-list small,
.calendar-alert-item time strong,.multi-select-status.has-selection{
 color:var(--ui-accent-ink)
}
.brand-mark,.tag,.badge,.step,.progress-pill,.notice-board article>span,
.customer-timeline article div>span{
 background:var(--ui-accent-faint);
 color:var(--ui-accent-ink);
 border-color:var(--ui-accent-line)
}
.step.current{background:var(--ui-accent)!important;color:#fff!important}

/* Primary actions and every generated download/export control. */
button:not(.secondary):not(.danger-button),.mail-link,.export-action,.button-link.primary-action{
 background:linear-gradient(135deg,var(--ui-accent),var(--ui-accent-dark))!important;
 color:#fff!important;
 border-color:transparent!important;
 box-shadow:0 7px 17px var(--ui-accent-shadow)!important
}
button:not(.secondary):not(.danger-button):hover,.mail-link:hover,.export-action:hover{
 background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 88%,#fff),var(--ui-accent-dark))!important;
 box-shadow:0 10px 24px var(--ui-accent-shadow)!important
}
button.secondary{
 background:var(--ui-accent-faint)!important;
 color:var(--ui-accent-ink)!important;
 border-color:var(--ui-accent-line)!important
}
.export-icon{background:color-mix(in srgb,#fff 18%,transparent)!important}
.export-format{border-color:var(--ui-accent-line)!important}

/* Navigation, tab selection and control focus states. */
.app-sidebar nav{scrollbar-color:color-mix(in srgb,var(--ui-accent) 42%,transparent) transparent}
.app-sidebar nav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ui-accent) 40%,transparent)}
.app-sidebar nav button.active{
 background:linear-gradient(90deg,var(--ui-accent-soft-strong),var(--ui-accent-faint))!important;
 color:var(--ui-accent-ink)!important
}
.app-sidebar nav button.active:before{background:var(--ui-accent)!important}
.nav-dot{border-color:var(--ui-accent-line)}
.suite-tabs,.crm-tabs,.order-center-tabs,.dossier-tabs{
 background:color-mix(in srgb,var(--ui-accent) 8%,transparent)!important;
 border-color:var(--ui-accent-line)!important
}
.suite-tabs button:not(.secondary),.crm-tabs button:not(.secondary),.dossier-tabs button:not(.secondary){
 color:var(--ui-accent-ink)!important;
 border-color:var(--ui-accent-line)!important;
 box-shadow:0 5px 16px var(--ui-accent-shadow)!important
}
.order-state-grid>button.card.selected-state{
 background:var(--ui-accent-wash)!important;
 border-color:var(--ui-accent)!important;
 box-shadow:inset 0 0 0 1px var(--ui-accent-line)!important
}
input[type=checkbox],input[type=radio],.mail-selector input,.mail-review input{accent-color:var(--ui-accent)!important}
select:hover{border-color:color-mix(in srgb,var(--ui-accent) 55%,#cdddda)}
select[multiple],select[size]{border-color:var(--ui-accent-line);background:var(--ui-accent-faint)}
select[multiple] option:checked,select[size] option:checked{background:linear-gradient(135deg,var(--ui-accent),var(--ui-accent-dark))}
.selection-card:has(input:checked){border-color:var(--ui-accent);background:var(--ui-accent-wash);box-shadow:0 0 0 3px var(--ui-focus)}

/* Information surfaces shown throughout mail, finance, CRM, orders, hotel and staff
   workspaces now use one derived theme tint instead of fixed teal/green fills. */
.notice,.answer,.mail-template,.mail-workflow-card,.mail-review,.booking-fields,
.batch-mail-panel,.service-summary,.traveler-summary,.decision-card,.enterprise-hero,
.crm-hero,.crm-pipeline article,.crm-timeline-panel,.connector-grid>form,
.delivery-order,.order-timeline,.order-dialog-summary>div,.order-correction-panel,
.booking-edit-fields,.voucher-field,.finance-flow span,.business-direct,
.notice-list article,.cms-section-list article,.readiness-grid article,
.company-calendar-banner,.calendar-alert-item,.mfa-secret,.sidebar-note,
.permission-grid,.more-records,.workflow-status-panel,.mail-status-panel{
 background:linear-gradient(145deg,var(--ui-accent-faint),color-mix(in srgb,var(--ui-accent) 3%,#fff))!important;
 border-color:var(--ui-accent-line)!important
}
.mail-card.selected-mail,.mail-card.mail-reviewed{
 border-color:var(--ui-accent)!important;
 box-shadow:0 0 0 3px var(--ui-focus),0 16px 38px var(--ui-accent-shadow)!important
}
.mail-workflow li:before,.crm-principles li:before,.calendar-mark,.section-icon{
 background:linear-gradient(145deg,var(--ui-accent-soft-strong),var(--ui-accent-faint))!important;
 color:var(--ui-accent-ink)!important;
 border-color:var(--ui-accent-line)!important
}
.calendar-mark{background:linear-gradient(145deg,var(--ui-accent),var(--ui-accent-dark))!important;color:#fff!important}
.mail-workflow li:not(:last-child):after,.section-divider{background:var(--ui-accent-line)}
.card>h2:first-child:before,.card>.row:first-child h2:before{
 background:linear-gradient(180deg,var(--ui-accent),var(--ui-accent-dark))
}
.table-wrap{border-color:var(--ui-accent-line)}
tbody tr:hover td{background:var(--ui-accent-faint)}
.finance-ledger-card th{background:var(--ui-accent-faint)}
.finance-flow i{color:var(--ui-accent-muted)}
.business-direct b{color:var(--ui-accent)}
.business-direct:hover{border-color:var(--ui-accent)!important;background:var(--ui-accent-wash)!important}

/* Keep semantic warning, overdue, destructive and success states independent from
   the decorative theme so operational meaning never changes with a color choice. */
.danger,.danger-button,.metric.urgent,.finance-metrics .metric.urgent,
.calendar-alert-item.is-today,.readiness-grid .readiness-pending,.duplicate-alert{
 --ui-semantic-preserve:1
}

/* 2.7 density pass: keep daily work visible without oversized empty panels. */
#content{gap:14px}
.core-metrics,.dashboard-metrics{gap:10px}
.core-metrics .metric,.dashboard-metrics .metric{min-height:70px;padding:13px 15px}
.core-metrics .metric strong,.dashboard-metrics .metric strong{margin-top:5px;font-size:25px}
.core-todo-card,.business-direct-card{padding:16px 18px}
.core-todo-card>.row,.business-direct-card>.row{margin-bottom:10px}
.core-todo-card h2,.business-direct-card h2{margin-bottom:2px}
.core-todo-card .table-wrap{margin-top:7px}
.business-direct-grid{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:9px}
.business-direct{min-height:62px;padding:10px 12px}
.business-direct small{display:none}
.today-grid .card{padding:17px}
.dashboard-stage-card{padding:16px 18px}
.dashboard-stage-card>.row{margin-bottom:10px}
.dashboard-stage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px}
.dashboard-stage-grid article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;align-items:center;padding:10px 12px;border:1px solid rgba(39,105,105,.12);border-radius:12px;background:#f8fbfa;min-width:0}
.dashboard-stage-grid article span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#587276;font-size:12px}
.dashboard-stage-grid article strong{font-size:18px;color:#155f63}
.dashboard-stage-grid article i{grid-column:1/-1;height:4px;overflow:hidden;border-radius:4px;background:#e2eeeb}
.dashboard-stage-grid article i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#58b9ad,#1d7f86)}
.dashboard-exports{gap:5px}
.dashboard-exports a{min-height:32px;padding:6px 10px;font-size:12px}
.dashboard-compact-grid{align-items:start;gap:14px}
.dashboard-compact-grid .card{padding:16px 18px}
.dashboard-exception{display:flex;justify-content:space-between;gap:10px;margin:8px 0;padding:9px 11px;border-radius:10px;background:#fff7f3;color:#9b4b3c}
.dashboard-exception small{white-space:nowrap;color:#a87870}
.dashboard-fold{padding:0 18px!important}
.dashboard-fold>summary{padding:15px 0!important;font-weight:750;color:#2d6367;cursor:pointer}
.dashboard-fold[open]>summary{border-bottom:1px solid rgba(39,105,105,.11)}
.suite-tabs button:after,.crm-tabs button:after,.order-center-tabs button:after,.dossier-tabs button:after{display:none!important}
.order-center-tabs button,.suite-tabs button{display:inline-flex;align-items:center;justify-content:center;line-height:1.2}
.client-sync-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:14px 0;padding:14px 16px;border:1px solid rgba(27,139,139,.2);border-radius:14px;background:linear-gradient(135deg,rgba(228,247,243,.9),rgba(247,252,251,.92))}
.client-sync-strip strong,.client-sync-strip span{display:block}
.client-sync-strip span{margin-top:4px;color:#60797c;font-size:12px;line-height:1.55}
.client-sync-strip a{flex:0 0 auto;white-space:nowrap}
.hotel-client-fields{padding:17px;border:1px solid rgba(39,105,105,.12);border-radius:14px;background:#fbfdfc}
.hotel-client-fields h3{margin-top:0}
.managed-library-upload{margin-bottom:13px;padding:15px;border:1px solid rgba(27,139,139,.18);border-radius:14px;background:rgba(241,249,247,.88)}
.managed-library-upload>div strong,.managed-library-upload>div span{display:block}
.managed-library-upload>div span,.managed-library-upload>small{margin-top:4px;color:#617b7e;font-size:12px;line-height:1.55}
.managed-library-upload form{display:grid;grid-template-columns:minmax(220px,1.5fr) minmax(130px,.65fr) minmax(150px,.7fr) auto;gap:8px;align-items:end;margin:12px 0 8px}
.managed-library-upload form>*{min-width:0;margin:0}
.library-metrics{gap:9px}
.library-metrics .metric{min-height:68px;padding:12px 14px}
@media(max-width:900px){.managed-library-upload form{grid-template-columns:1fr 1fr}.managed-library-upload form input[type=file]{grid-column:1/-1}.client-sync-strip{align-items:flex-start}}
@media(max-width:620px){.dashboard-stage-grid{grid-template-columns:1fr 1fr}.managed-library-upload form{grid-template-columns:1fr}.managed-library-upload form input[type=file]{grid-column:auto}.client-sync-strip{display:grid}.client-sync-strip a{justify-self:start}.core-todo-card,.business-direct-card{padding:14px}.business-direct-grid{grid-template-columns:1fr 1fr}}

/* User-selectable operating theme; native color input opens the platform color wheel. */
.topbar-actions{align-items:center;justify-content:flex-end}
.theme-control{display:flex;align-items:center;gap:7px;padding:5px 7px 5px 10px;border:1px solid var(--ui-line);border-radius:12px;background:rgba(255,255,255,.72)}
.theme-control label{margin:0;color:var(--ui-muted);font-size:12px;font-weight:700}
.theme-control input[type=color]{width:30px!important;height:30px!important;min-height:30px!important;padding:2px!important;border-radius:9px;cursor:pointer;background:#fff}
.theme-control button{min-height:30px;padding:5px 8px;font-size:11px}
.brand,.eyebrow,a,summary,.zone-link{color:var(--ui-accent)}
.app-sidebar .brand{color:var(--ui-accent)!important}
.app-sidebar nav button.active{color:var(--ui-accent-dark)!important;background:linear-gradient(90deg,var(--ui-accent-soft),rgba(255,255,255,.72))!important;box-shadow:none!important}
.app-sidebar nav button.active:before{background:var(--ui-accent)}
button:not(.secondary):not(.danger-button),.mail-link{background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 88%,#fff),var(--ui-accent-dark))!important}
.app-sidebar nav button:not(.active){background:transparent!important;color:#4e6469!important}
.order-center-tabs{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:5px!important;margin:12px 0 16px!important;padding:5px!important}
.order-center-tabs button,.order-center-tabs button:not(.secondary){width:auto!important;min-width:0!important;min-height:36px!important;padding:8px 10px!important;border:1px solid transparent!important;border-radius:9px!important;background:transparent!important;color:#536f74!important;box-shadow:none!important;font-size:13px}
.order-center-tabs button:not(.secondary){background:rgba(255,255,255,.88)!important;color:var(--ui-accent-dark)!important;border-color:color-mix(in srgb,var(--ui-accent) 24%,transparent)!important}
.order-center-tabs button:not(.secondary):before{width:16px;height:16px;margin-right:5px;background:var(--ui-accent);font-size:10px}
.dossier-tabs{display:flex!important;gap:5px!important;margin:12px 24px 14px!important;padding:5px!important;overflow-x:auto!important}
.dossier-tabs button,.dossier-tabs button.secondary,.dossier-tabs button:not(.secondary){flex:1 0 max-content!important;min-width:110px!important;min-height:35px!important;padding:8px 10px!important;border:1px solid transparent!important;border-radius:9px!important;background:transparent!important;color:#536f74!important;box-shadow:none!important;font-size:12px!important}
.dossier-tabs button:not(.secondary){background:var(--ui-accent-soft)!important;color:var(--ui-accent-dark)!important;border-color:color-mix(in srgb,var(--ui-accent) 26%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-accent) 9%,transparent)!important}
.order-state-grid{gap:9px!important;margin:14px 0 18px!important}
.order-state-grid>button.card{min-height:76px!important;gap:4px!important;padding:13px 15px!important;background:rgba(255,255,255,.84)!important;color:#49666c!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;box-shadow:0 5px 16px rgba(19,73,75,.035)!important}
.order-state-grid>button.card strong{margin:2px 0 0!important;font-size:24px!important;color:#315f65!important}
.order-state-grid>button.card.selected-state{background:var(--ui-accent-soft)!important;color:var(--ui-accent-dark)!important;border-color:color-mix(in srgb,var(--ui-accent) 42%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-accent) 12%,transparent)!important}
.order-contract-workspace{display:grid;gap:14px}
.order-linked-upload{margin:0;padding:15px;border:1px solid var(--ui-line);border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.94),color-mix(in srgb,var(--ui-accent-soft) 35%,white))}
.order-linked-upload .row{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(200px,1.3fr) minmax(180px,1fr);align-items:end;gap:10px}
.order-linked-upload label{min-width:0}
.order-linked-upload input,.order-linked-upload select{width:100%}
.order-linked-upload>button{min-height:38px;padding:9px 15px;margin-top:9px;background:var(--ui-accent-soft)!important;color:var(--ui-accent-dark)!important;border-color:color-mix(in srgb,var(--ui-accent) 32%,transparent)!important;box-shadow:none!important}
.order-contract-columns{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:14px}
.order-contract-columns>div{min-width:0;padding:14px;border:1px solid var(--ui-line);border-radius:13px;background:rgba(255,255,255,.72)}
.order-contract-list{display:grid;gap:9px}
.order-contract-item{display:grid;gap:9px;padding:12px;border:1px solid var(--ui-line);border-radius:11px;background:rgba(248,252,251,.88)}
.order-contract-item p{margin:5px 0 0}
.order-contract-item form{display:flex;flex-wrap:wrap;align-items:end;gap:7px}
.order-contract-item input{min-width:150px;flex:1}
.order-contract-item button,.order-contract-item .button-link{min-height:34px;padding:7px 10px;font-size:12px}
.card>h2:first-child:before,.card>.row:first-child h2:before{background:linear-gradient(180deg,color-mix(in srgb,var(--ui-accent) 65%,#fff),var(--ui-accent-dark))}
.suite-tabs button:not(.secondary):before,.crm-tabs button:not(.secondary):before,.dossier-tabs button:not(.secondary):before{background:var(--ui-accent)}
.suite-tabs button:not(.secondary),.crm-tabs button:not(.secondary),.dossier-tabs button:not(.secondary){color:var(--ui-accent-dark)!important;border-color:color-mix(in srgb,var(--ui-accent) 32%,transparent)!important}
.tag,.badge{color:var(--ui-accent-dark);background:var(--ui-accent-soft)}
.notice{border-left-color:var(--ui-accent);background:linear-gradient(90deg,var(--ui-accent-soft),rgba(248,251,250,.75))}
input[type=checkbox],input[type=radio]{accent-color:var(--ui-accent)}
.optional-security>.row{align-items:flex-start}.optional-security>.row>div{min-width:240px}.optional-security>.row .badge{flex:0 0 auto}
@media(max-width:760px){.topbar-actions{width:100%;justify-content:space-between}.theme-control{order:3}.theme-control label{display:none}}
@media(max-width:900px){.order-contract-columns{grid-template-columns:1fr}.order-linked-upload .row{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.order-center-tabs{display:flex!important;padding:5px!important}.order-center-tabs button,.order-center-tabs button:not(.secondary){min-width:max-content!important}.dossier-tabs{margin-left:14px!important;margin-right:14px!important}.dossier-tabs button,.dossier-tabs button.secondary,.dossier-tabs button:not(.secondary){min-width:max-content!important}.order-state-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.order-linked-upload .row{grid-template-columns:1fr}.order-linked-upload{padding:12px}.order-contract-columns>div{padding:11px}}

/* Dense operational layouts: every panel follows its content instead of stretching to its neighbour. */
.finance-metrics{display:flex!important;flex-wrap:wrap;gap:8px!important;margin-bottom:14px!important}
.finance-metrics .metric{flex:0 0 105px;min-height:64px!important;max-height:none;aspect-ratio:auto;padding:8px!important;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;border-radius:14px;overflow-wrap:anywhere;font-size:12px;line-height:1.2;background:linear-gradient(145deg,color-mix(in srgb,var(--ui-accent) 6%,rgba(255,255,255,.78)),rgba(255,255,255,.7))!important;backdrop-filter:blur(12px)}
.finance-metrics .metric strong{margin:0!important;font-size:21px!important;line-height:1}
.finance-overview-grid{align-items:start!important}
.finance-flow-card{justify-content:flex-start!important}
.finance-overview-grid>.card{height:auto!important;min-height:0!important}
.workforce-metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;margin:0 0 14px!important}
.workforce-metrics .metric{min-height:68px!important;padding:11px 14px!important}
.workforce-metrics .metric strong{font-size:20px!important;margin:4px 0 0!important}
.workforce-actions-grid,.workforce-management-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.workforce-stack{display:grid;gap:14px;min-width:0}
.workforce-stack>.card,.workforce-actions-grid>.card,.workforce-management-grid>.card{height:auto!important;min-height:0!important;margin:0!important}
.workforce-actions-grid{margin-bottom:14px}
.workforce-management-grid{margin-bottom:14px}
.workforce-clock-card .actions{margin:0 0 12px}
.workforce-clock-card .table-wrap td.empty,.approval-queue-card .table-wrap td.empty{padding:16px!important;height:auto!important}
.approval-queue-card>.row{justify-content:flex-start;margin-bottom:8px}
.approval-queue-card>.row>*{flex:0 0 auto}
.approval-queue-card h2{margin:0}
.approval-queue-card .actions{margin:0;white-space:nowrap}
.leave-request-card textarea,.calendar-editor-card textarea{min-height:66px!important}
.leave-request-card form>button,.calendar-editor-card form>button{margin-top:10px}
.calendar-targets[hidden]{display:none!important}
.calendar-targets select[multiple]{min-height:84px;padding:6px}
.inline-check{display:flex;align-items:center;gap:8px;margin:12px 0;color:#526f72}
.inline-check input{width:auto!important;margin:0;accent-color:var(--ui-accent)}
.calendar-ledger-card>.row{justify-content:space-between;margin-bottom:8px}
.calendar-ledger-card>.row>*{flex:0 0 auto}.calendar-ledger-card h2{margin:0}
.staff-layout:has(#staff-detail:empty){grid-template-columns:1fr!important}
#staff-detail:empty{display:none}
.account-create-card,#staff-list>.table-wrap{height:auto!important;min-height:0!important}
.staff-layout>.card,.staff-layout>div{align-self:start}
@media(max-width:900px){.workforce-actions-grid,.workforce-management-grid{grid-template-columns:1fr}.workforce-metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:620px){.finance-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}.workforce-metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important}.workforce-metrics .metric{padding:9px!important}.workforce-metrics .metric strong{font-size:17px!important}.calendar-banner-actions{gap:5px}.calendar-banner-actions button{padding:7px 9px;font-size:11px}.calendar-banner-title small{max-width:42vw}}
@media(max-width:520px){.theme-control{width:100%;order:-1}.theme-control label{display:block}.theme-control button{margin-left:auto}}

.workforce-extra-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);gap:14px;align-items:start;margin:0 0 14px}
.workforce-extra-grid>.card{min-width:0;min-height:0!important;height:auto!important;margin:0!important}
.workforce-report-card>.row{align-items:center;justify-content:space-between}
.workforce-report-card .table-wrap,.workforce-correction-card .table-wrap,.workforce-schedule-card .table-wrap{max-width:100%;overflow-x:auto}
.workforce-report-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin:10px 0 14px}
.workforce-report-summary>div{display:flex;flex-direction:column;gap:3px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-accent-soft);padding:9px 11px;min-width:0}
.workforce-report-summary span{font-size:12px;color:#526f72;white-space:nowrap}
.workforce-report-summary strong{font-size:17px;line-height:1.2;color:#173f45}
.workforce-compact-form{margin:12px 0;padding:12px;border:1px solid var(--ui-line);border-radius:14px;background:color-mix(in srgb,var(--ui-accent) 4%,white)}
.workforce-compact-form .row,#workforce-report-filter{display:flex;flex-wrap:wrap;align-items:end;gap:9px}
.workforce-compact-form .row>label,#workforce-report-filter>label{flex:1 1 130px;min-width:120px;margin:0}
.workforce-compact-form input,.workforce-compact-form select,#workforce-report-filter input,#workforce-report-filter select{width:100%;min-width:0}
.workforce-compact-form button,#workforce-report-filter button{flex:0 0 auto}
.workforce-weekdays{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0}
.workforce-weekdays label{display:inline-flex;align-items:center;gap:4px;margin:0;white-space:nowrap}
.workforce-weekdays input{width:auto;accent-color:var(--ui-accent)}
@media(max-width:1100px){.workforce-extra-grid{grid-template-columns:1fr}.workforce-report-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.workforce-report-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.workforce-extra-grid{gap:10px}.workforce-compact-form .row>label{flex-basis:calc(50% - 8px)}}

/* Final theme guard: this block intentionally stays last so late density/layout rules
   cannot reintroduce fixed teal fills. */
.app-sidebar .sidebar-toggle,
.app-sidebar .sidebar-toggle:hover,
.app-sidebar .sidebar-toggle:active,
.app-sidebar .sidebar-toggle:focus-visible{
 background:transparent!important;
 background-color:transparent!important;
 background-image:none!important;
 border-color:transparent!important;
 box-shadow:none!important;
 color:var(--ui-accent)!important
}
.app-sidebar .sidebar-toggle:hover{color:var(--ui-accent-dark)!important}

.export-action,.mail-link{
 background:linear-gradient(135deg,var(--ui-accent),var(--ui-accent-dark))!important;
 color:#fff!important;
 border-color:transparent!important;
 box-shadow:0 7px 17px var(--ui-accent-shadow)!important
}
.export-action:hover,.mail-link:hover{
 background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 88%,#fff),var(--ui-accent-dark))!important
}

.dashboard-stage-grid article,.client-sync-strip,.hotel-client-fields,
.managed-library-upload,.order-linked-upload,.order-contract-columns>div,
.order-contract-item,.workflow-status-panel,.mail-status-panel{
 background:linear-gradient(145deg,var(--ui-accent-faint),color-mix(in srgb,var(--ui-accent) 3%,#fff))!important;
 border-color:var(--ui-accent-line)!important
}
.dashboard-stage-grid article strong,.order-state-grid>button.card strong{color:var(--ui-accent-ink)!important}
.dashboard-stage-grid article i{background:var(--ui-accent-soft-strong)!important}
.dashboard-stage-grid article i b{background:linear-gradient(90deg,var(--ui-accent),var(--ui-accent-dark))!important}
.client-sync-strip,.managed-library-upload{border-color:var(--ui-accent-line)!important}
.order-linked-upload>button{
 background:var(--ui-accent-soft)!important;
 color:var(--ui-accent-dark)!important;
 border-color:var(--ui-accent-line)!important
}
.theme-control{border-color:var(--ui-accent-line);background:var(--ui-accent-faint)}
.section-icon{background:linear-gradient(145deg,var(--ui-accent-soft-strong),var(--ui-accent-faint))!important;color:var(--ui-accent-ink)!important}

/* Semantic states retain stable warning/error meaning. */
.metric.urgent,.finance-metrics .metric.urgent{border-color:#e4a59b!important;background:linear-gradient(145deg,#fff,#fff2ef)!important}
.danger{color:#ae4c38!important;background:#fff0eb!important}
.danger-button{background:rgba(179,55,55,.08)!important;color:#9b3131!important;border-color:rgba(179,55,55,.18)!important;box-shadow:none!important}
.calendar-alert-item.is-today{border-color:#e2a17e!important;background:#fff7f1!important}
.readiness-grid .readiness-pending{border-color:rgba(196,137,52,.22)!important;background:#fffaf2!important}

/* Shell controls have stronger specificity than the generic primary-button rule. */
#app .app-sidebar button.sidebar-toggle,
#app .app-sidebar button.sidebar-toggle:hover,
#app .app-sidebar button.sidebar-toggle:active,
#app .app-sidebar button.sidebar-toggle:focus-visible{
 background:transparent!important;
 background-color:transparent!important;
 background-image:none!important;
 border-color:transparent!important;
 box-shadow:none!important;
 color:var(--ui-accent)!important
}
#app .app-sidebar button.sidebar-toggle:hover{color:var(--ui-accent-dark)!important}
#app .app-sidebar nav button{box-shadow:none!important}
#app .app-sidebar nav button:not(.active){background:transparent!important;background-image:none!important}
#app .app-sidebar nav button:not(.active):hover{background:var(--ui-accent-faint)!important;color:var(--ui-accent-ink)!important}
#app .app-sidebar nav button.active,
#app .app-sidebar nav button.active:hover{
 background:linear-gradient(90deg,var(--ui-accent-soft),rgba(255,255,255,.72))!important;
 color:var(--ui-accent-dark)!important;
 box-shadow:none!important
}
#app button.business-direct,
#app button.business-direct:hover{
 background:linear-gradient(145deg,var(--ui-accent-faint),color-mix(in srgb,var(--ui-accent) 3%,#fff))!important;
 color:var(--ui-accent-ink)!important;
 border-color:var(--ui-accent-line)!important;
 box-shadow:none!important
}
#app button.business-direct:hover{background:var(--ui-accent-wash)!important;border-color:var(--ui-accent)!important}
.finance-flow span{color:var(--ui-accent-ink)!important}

/* Shared layout contract. Summary/data pairs align as one row, while editor and
   form grids continue to follow their own content height. */
#content>.two,#content>.grid,#content>.metrics,#content>.card,#content>details{min-width:0;width:100%}
#content>.two,#content>.grid,.suite-layout,.staff-layout,.workforce-actions-grid,.workforce-management-grid{gap:14px}
#content>.two:not(.balanced-summary-grid),.suite-layout:not(.balanced-summary-grid),.staff-layout,.workforce-actions-grid,.workforce-management-grid{align-items:start}
#content>.two>.card,#content>.grid>.card,.suite-layout>.card,.balanced-summary-grid>.card{margin-bottom:0}
#content>.two,#content>.grid,.balanced-summary-grid{margin-bottom:14px}
.balanced-summary-grid{align-items:stretch!important}
.balanced-summary-grid>.card{align-self:stretch!important;height:100%!important;min-height:0!important;display:flex;flex-direction:column}
.balanced-summary-grid>.card>.table-wrap:last-child,.balanced-summary-grid>.card>form:last-child,.balanced-summary-grid>.card>.actions:last-child{margin-bottom:0}
.balanced-summary-grid>.card>.table-wrap:last-child{flex:1}
#content .card{padding:17px 18px}
#content .card>:first-child{margin-top:0}
#content .card>:last-child{margin-bottom:0}
#content .empty,#content td.empty{min-height:0!important;height:auto!important;padding:18px 12px!important;line-height:1.55}
#content .table-wrap:has(td.empty){min-height:0!important}
#content .table-wrap:has(td.empty) table{height:auto!important}
#content .table-wrap:has(td.empty) tbody{height:auto!important}
#content .section-title{margin-bottom:13px}
#content .section-title h2{margin:0!important}

/* Finance overview remains visually aligned without the previous tall blank
   panel. The process occupies one row on desktop and a compact grid below it. */
.finance-overview-grid{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;align-items:start!important}
.finance-overview-grid>.card{padding:17px 18px!important}
.finance-overview-grid .section-title{min-height:38px;margin-bottom:12px}
.finance-overview-grid .table-wrap{min-width:0;max-height:310px;overflow:auto}
.finance-overview-grid .table-wrap table{min-width:0!important;width:100%;table-layout:fixed}
.finance-overview-grid .table-wrap th,.finance-overview-grid .table-wrap td{overflow-wrap:anywhere;white-space:normal;padding:9px 7px}
.finance-currency-table td:not(:first-child),.finance-currency-table th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.finance-currency-mobile{display:none}
.finance-currency-mobile article{padding:11px;border:1px solid var(--ui-line);border-radius:12px;background:linear-gradient(145deg,color-mix(in srgb,var(--ui-accent) 4%,rgba(255,255,255,.8)),rgba(255,255,255,.72))}
.finance-currency-mobile article+article{margin-top:8px}
.finance-currency-mobile header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.finance-currency-mobile header small,.finance-currency-mobile span small{color:var(--ui-muted)}
.finance-currency-mobile article>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.finance-currency-mobile span{display:grid;gap:2px;min-width:0;padding:7px;border-radius:8px;background:color-mix(in srgb,var(--ui-accent) 4%,rgba(255,255,255,.7))}
.finance-currency-mobile span strong{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow-x:auto}
.finance-currency-note{font-size:11px;color:var(--ui-muted);margin:8px 0 0;line-height:1.4}
.finance-empty-state{display:grid;place-items:center;min-height:58px;margin:0;color:var(--ui-muted);background:color-mix(in srgb,var(--ui-accent) 4%,transparent);border:1px solid var(--ui-line);border-radius:12px}
.finance-overview-grid td.empty{padding:22px 12px!important}
.finance-flow-card{display:grid!important;grid-template-columns:160px minmax(0,1fr) 210px;gap:12px;align-items:center!important}
.finance-flow-card>h2{min-height:0;margin:0!important;display:flex;align-items:center}
.finance-flow{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:7px!important;margin:0!important;min-width:0}
.finance-flow span{display:flex;align-items:center;justify-content:center;min-width:0;min-height:48px;padding:7px!important;text-align:center;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.finance-flow i{display:none!important}
.finance-flow-card>.actions{display:grid;grid-template-columns:1fr;gap:7px;margin:0!important;align-items:stretch}
.finance-flow-card>.actions button{min-width:0;width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.4}

/* Analytics and conversation pairs use the same panel geometry. */
.analytics-summary-grid>.card,.chat-workspace-grid>.card{min-width:0}
.analytics-summary-grid .table-wrap{flex:1}
.chat-workspace-grid{grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr)}
.chat-workspace-grid #chat-list,.chat-workspace-grid #chat-window{min-width:0;flex:1}

@media(max-width:1180px){.finance-currency-table{display:none}.finance-currency-mobile{display:block}.finance-flow-card{grid-template-columns:1fr}.finance-flow{grid-template-columns:repeat(5,minmax(0,1fr))}.finance-flow-card>.actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
 .finance-overview-grid,.chat-workspace-grid{grid-template-columns:1fr!important}
 .balanced-summary-grid{align-items:start!important}
 .balanced-summary-grid>.card{height:auto!important;width:100%}
 .finance-flow{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:620px){
 #content .card{padding:14px}
 #content>.two,#content>.grid,.suite-layout,.staff-layout,.workforce-actions-grid,.workforce-management-grid{gap:10px}
 .finance-metrics .metric{flex-basis:calc(50% - 4px)}
 .finance-currency-mobile article>div{grid-template-columns:repeat(2,minmax(0,1fr))}
 .finance-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
 .finance-flow-card>.actions{display:grid;grid-template-columns:1fr}
}

/* CRM overview: compact information density without dark dashboard blocks or
   equal-height whitespace. */
.crm-tabs{
 display:flex!important;
 flex-wrap:nowrap!important;
 gap:6px!important;
 min-height:0!important;
 padding:5px!important;
 overflow-x:auto;
 position:static
}
.crm-tabs button,.crm-tabs button.secondary,.crm-tabs button:not(.secondary){
 flex:1 0 100px!important;
 min-width:100px!important;
 min-height:36px!important;
 padding:8px 11px!important;
 border-radius:9px!important;
 box-shadow:none!important;
 white-space:nowrap
}
#app .suite-tabs button:not(.secondary),
#app .crm-tabs button:not(.secondary),
#app .dossier-tabs button:not(.secondary){
 background:var(--ui-accent-soft)!important;
 color:var(--ui-accent-readable)!important;
 border-color:color-mix(in srgb,var(--ui-accent) 38%,transparent)!important;
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-accent) 10%,transparent)!important
}
#app .suite-tabs button:not(.secondary):before,
#app .crm-tabs button:not(.secondary):before,
#app .dossier-tabs button:not(.secondary):before{
 background:var(--ui-accent)!important;
 color:var(--ui-on-accent)!important
}
#app .suite-tabs button.secondary,
#app .crm-tabs button.secondary,
#app .dossier-tabs button.secondary{
 background:rgba(255,255,255,.68)!important;
 color:var(--ui-accent-readable)!important;
 border-color:var(--ui-accent-line)!important
}
.crm-metrics{
 grid-template-columns:repeat(auto-fit,minmax(140px,1fr))!important;
 gap:9px!important;
 margin:0 0 14px!important
}
#app button.metric-button,#app button.metric-button:hover{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) auto;
 align-items:center!important;
 gap:8px 12px;
 min-height:70px!important;
 height:auto!important;
 padding:11px 14px!important;
 background:linear-gradient(145deg,var(--ui-accent-faint),color-mix(in srgb,var(--ui-accent) 3%,#fff))!important;
 color:var(--ui-ink)!important;
 border:1px solid var(--ui-accent-line)!important;
 box-shadow:none!important
}
#app button.metric-button:hover{background:var(--ui-accent-wash)!important;border-color:var(--ui-accent)!important}
#app button.metric-button>span{min-width:0;color:var(--ui-muted);font-weight:700;text-align:left}
#app button.metric-button strong{
 margin:0!important;
 color:var(--ui-accent-ink)!important;
 font-size:24px!important;
 line-height:1;
 text-align:right
}
#app button.metric-button.urgent{border-color:#e4a59b!important;background:linear-gradient(145deg,#fff,#fff2ef)!important}
#app button.metric-button.urgent strong{color:#b94e39!important}
.crm-overview{
 align-items:start!important;
 gap:14px!important;
 margin-bottom:14px
}
.crm-overview-primary{grid-template-columns:minmax(0,1.55fr) minmax(230px,.45fr)}
.crm-overview-secondary{grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)}
.crm-overview>.card{
 align-self:start!important;
 width:100%;
 min-height:0!important;
 height:auto!important;
 margin:0!important;
 padding:16px 18px!important
}
.crm-overview>.card>.row:first-child{align-items:flex-start;margin-bottom:8px}
.crm-overview>.card>.row:first-child h2{margin-bottom:0}
.crm-pipeline{
 grid-template-columns:repeat(4,minmax(0,1fr))!important;
 gap:8px!important;
 margin-top:10px!important
}
.crm-pipeline article{
 display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 align-items:center;
 gap:3px 8px;
 min-height:68px;
 padding:9px 11px!important;
 border-radius:11px!important
}
.crm-pipeline article span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.crm-pipeline article strong{margin:0!important;font-size:20px!important;line-height:1;text-align:right}
.crm-pipeline article small{grid-column:1/-1;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-source-card .empty{min-height:0;padding:18px 8px}
.crm-source{padding:9px 0!important}
.crm-source strong{font-size:17px!important}
.crm-recent-card .table-wrap td.empty{height:auto!important;padding:18px!important}
.crm-principles ol{margin:4px 0 10px}
.crm-principles li{padding:10px 0 10px 36px!important}
.crm-principles li:before{top:10px!important;width:24px!important;height:24px!important}
.crm-principles p{margin:8px 0 0}
@media(max-width:1000px){
 .crm-overview-primary,.crm-overview-secondary{grid-template-columns:1fr!important}
 .crm-pipeline{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:620px){
 .crm-tabs button,.crm-tabs button.secondary,.crm-tabs button:not(.secondary){flex:0 0 auto!important}
 .crm-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .crm-pipeline{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .crm-overview>.card{padding:14px!important}
}

/* Phone density pass: the collapsed rail already preserves navigation space, so
   the working area should not be consumed by one metric per row or a vertical
   theme label. */
@media(max-width:620px){
 .topbar{align-items:stretch!important}
 .topbar>.row,.topbar-actions{width:100%;display:flex;align-items:center;gap:7px}
 .topbar-actions{justify-content:flex-start!important}
 .theme-control{order:0!important;width:auto!important;flex:0 0 auto;padding:5px!important}
 .theme-control label{display:none!important}
 .theme-control button{margin-left:0!important}
 .topbar-actions>button{flex:1 1 auto;min-width:0;padding-inline:10px}
 .core-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 .core-metrics .metric{min-height:66px!important;padding:10px 12px!important}
 .core-metrics .metric:last-child:nth-child(odd){grid-column:1/-1}
 .core-metrics .metric strong{font-size:21px!important;margin-top:3px!important}
}

/* Account workspace, compact mobile todos, and measured upload forms. */
#app button.sidebar-account,#app button.sidebar-account:hover{width:100%;min-height:52px;display:grid!important;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:9px;margin:0 0 7px!important;padding:7px 10px!important;text-align:center!important;border-radius:999px!important;background:linear-gradient(120deg,color-mix(in srgb,var(--ui-accent) 7%,rgba(255,255,255,.76)),rgba(255,255,255,.68))!important;color:var(--ui-accent-ink)!important;border:1px solid var(--ui-line)!important;box-shadow:none!important;transform:none!important}
#app .app-sidebar footer>button:not(.sidebar-account){border-radius:999px!important}
.sidebar-account>span:last-child{min-width:0;min-height:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.sidebar-account strong,.sidebar-account small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}.sidebar-account strong{font-size:11px}.sidebar-account small{margin:3px 0 0;color:var(--ui-muted);font-size:10px}
#app .sidebar-account>span:last-child{position:relative;left:-8px}
.account-avatar{display:grid;place-items:center;overflow:hidden;border-radius:50%;background:linear-gradient(145deg,var(--ui-accent-soft),color-mix(in srgb,var(--ui-accent) 28%,#fff));color:var(--ui-accent-dark);font-weight:800;border:1px solid var(--ui-accent-line)}
.account-avatar img{display:block;width:100%;height:100%;object-fit:cover}.account-avatar-small{width:34px;height:34px}.account-avatar-large{width:88px;height:88px;font-size:30px;flex:0 0 auto}
.account-layout{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:14px;align-items:start}
.account-column{display:grid;gap:14px;align-content:start;min-width:0}
.account-column>.card{margin:0!important;height:auto!important;min-height:0!important}
.account-overview-card,.account-session-card{background:linear-gradient(140deg,color-mix(in srgb,var(--ui-accent) 8%,rgba(255,255,255,.78)),rgba(255,255,255,.72) 58%,color-mix(in srgb,var(--ui-accent) 3%,rgba(255,255,255,.76)))!important;backdrop-filter:blur(18px);border-color:var(--ui-accent-line)!important}
.account-identity{display:flex;align-items:center;gap:16px;min-width:0}
.account-identity>div{min-width:0}
.account-identity h2{margin:4px 0;overflow-wrap:anywhere}
.account-identity p{margin:0;color:var(--ui-muted);overflow-wrap:anywhere}
.account-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.account-entry-note{margin-top:16px;padding:11px 13px;border-radius:11px;background:linear-gradient(120deg,color-mix(in srgb,var(--ui-accent) 8%,transparent),rgba(255,255,255,.45));color:var(--ui-muted);font-size:12px;line-height:1.65}
.account-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.account-form-grid label,.account-security-card label{min-width:0}
.account-form-grid input,.account-security-card input{width:100%;min-width:0}
.account-session-card dl{display:grid;gap:7px;margin:0 0 14px}
.account-session-card dl>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--ui-line)}
.account-session-card dt{color:var(--ui-muted)}
.account-session-card dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}
.account-session-actions{display:grid;gap:8px}
.account-session-actions button{width:100%;margin:0}
.account-security-card form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.account-security-card form>p,.account-security-card form>button{grid-column:1/-1}
.account-security-card form>button{justify-self:start}
.todo-list-fold{margin-top:8px}.todo-list-fold>summary{display:none}.todo-filter-row{display:flex;justify-content:flex-end;margin:0 0 7px}.todo-filter-row input{width:min(100%,340px)}.core-todo-card .table-wrap{max-height:390px;overflow:auto}.core-todo-card>.row #todo-search{display:none}
.card:has(> #asset-upload){overflow:visible!important}.card:has(> #asset-upload)>h2{max-width:100%;overflow-wrap:anywhere}.card:has(> #asset-upload) #asset-upload>.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card:has(> #asset-upload) label{display:block;white-space:normal;overflow-wrap:anywhere}.card:has(> #asset-upload) input[type=file]{width:100%;min-height:48px;padding:7px;overflow:visible}.card:has(> #asset-upload) input[type=file]::file-selector-button{min-height:32px;margin-right:10px;padding:6px 10px;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-accent-soft);color:var(--ui-accent-dark);font:inherit;font-weight:700}
@media(max-width:900px){.account-layout{grid-template-columns:1fr}}
@media(max-width:620px){
 .core-todo-card{padding:11px 12px!important}.core-todo-card>.row{margin:0!important}.core-todo-card>.row h2{font-size:17px;margin:0!important}.todo-list-fold{margin-top:7px;border-top:1px solid var(--ui-line)}.todo-list-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px 2px;cursor:pointer;color:var(--ui-accent-dark);font-size:12px;font-weight:750;list-style:none}.todo-list-fold>summary::-webkit-details-marker{display:none}.todo-list-fold>summary:before{content:'＋';font-size:16px}.todo-list-fold[open]>summary:before{content:'－'}.todo-list-fold>summary span{margin-right:auto}.todo-list-fold>summary b{padding:4px 7px;border-radius:8px;background:var(--ui-accent-soft)}.todo-filter-row{margin:9px 0 5px}.todo-filter-row input{width:100%;min-height:38px}.core-todo-card .table-wrap{max-height:230px}.core-todo-card .more-records{display:none}.account-form-grid,.account-security-card form{grid-template-columns:1fr}.account-security-card form>p,.account-security-card form>button{grid-column:1}.account-identity{align-items:flex-start}.account-avatar-large{width:66px;height:66px}.card:has(> #asset-upload) #asset-upload>.row{grid-template-columns:1fr}.card:has(> #asset-upload){padding:14px!important}.card:has(> #asset-upload) h2{font-size:18px}.card:has(> #asset-upload) input[type=file]{font-size:12px}
}
.supplier-audit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:12px 0 18px}
.supplier-audit-grid article,.payment-channel-row{border:1px solid var(--ui-line);border-radius:14px;background:color-mix(in srgb,var(--ui-accent) 4%,white);padding:14px;min-width:0}
.supplier-audit-grid strong,.supplier-audit-grid small,.payment-channel-row strong,.payment-channel-row small{display:block;overflow-wrap:anywhere}
.supplier-audit-grid small,.payment-channel-row small{color:var(--ui-muted);margin-top:6px;line-height:1.5}
.supplier-audit-grid form{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.supplier-audit-grid button{padding:7px 10px;font-size:12px}
.payment-channel-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:4px 12px;align-items:end;margin:12px 0}
.payment-channel-form button{min-height:42px}
.payment-channel-list{display:grid;gap:9px;margin-top:12px}
.payment-channel-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.85fr);gap:14px;align-items:start}
.payment-channel-row form{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;align-items:start;min-width:0}
.payment-channel-row form button{white-space:nowrap}
@media(max-width:1000px){.payment-channel-row,.payment-channel-row form{grid-template-columns:1fr}}

/* Keep choice labels compact; the options themselves remain fully accessible. */
#staff-create .field-hint,
#staff-create .permission-grid small,
.calendar-targets .field-hint,
.supplier-booking-link .field-hint{display:none!important}
#staff-create .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));align-items:start;gap:10px 14px}
#staff-create .row>div{width:auto;min-width:0}
#staff-create .row input,#staff-create .row select{width:100%;min-width:0}
#staff-create .permission-grid label{min-width:0;overflow-wrap:anywhere}
@media(max-width:620px){#staff-create .row{grid-template-columns:1fr}.permission-grid{grid-template-columns:1fr}}

/* The audit filters must size to the content column, not the full viewport. */
#jc-filter{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:10px}
#jc-filter>*{min-width:0;width:100%}
#jc-filter button{grid-column:auto;align-self:end}

/* Staff and attendance cards use content-height rows: unrelated forms and ledgers
   no longer force a short neighbour to leave a half-page empty column. */
#content .staff-layout,
#content .workforce-actions-grid,
#content .workforce-extra-grid,
#content .workforce-management-grid{grid-template-columns:minmax(0,1fr)!important;align-items:start!important;gap:12px!important}
#content .staff-layout>div:first-child{display:grid;gap:12px;align-content:start;min-width:0}
#content .staff-layout .card,#content .workforce-actions-grid .card,#content .workforce-extra-grid .card,#content .workforce-management-grid .card{width:100%;min-width:0;height:auto!important;min-height:0!important;margin:0!important}
#content .staff-layout #staff-detail:empty{display:none}
#content .staff-layout #staff-detail{min-width:0}
#content .staff-layout #staff-detail>.card{margin-bottom:12px!important}
.staff-directory{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:10px;min-width:0}
.staff-directory-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 14px;align-content:start;min-width:0;padding:14px;border:1px solid var(--ui-line);border-radius:14px;background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--ui-accent-soft) 35%,#fff))}
.staff-directory-identity{min-width:0;overflow-wrap:anywhere}
.staff-directory-identity strong{display:block;font-size:15px;color:var(--ui-ink)}
.staff-directory-identity small,.staff-directory-details small{display:block;color:var(--ui-muted);font-size:12px;line-height:1.4}
.staff-directory-status{justify-self:end;white-space:nowrap}
.staff-directory-details{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:8px;border-top:1px solid var(--ui-line)}
.staff-directory-details span{min-width:0;overflow-wrap:anywhere}
.staff-directory-details strong{display:block;margin-top:3px;font-size:13px;font-weight:650;color:var(--ui-ink)}
.staff-directory-actions{grid-column:1/-1;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.staff-directory-actions button{min-height:34px!important;margin:0!important;padding:7px 12px!important;font-size:12px!important}
#content .workforce-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;align-items:stretch;gap:12px}
#content .workforce-stack>.workforce-clock-card,
#content .workforce-stack>.approval-queue-card{height:100%!important;min-height:0!important}
#content .workforce-stack .table-wrap{max-height:420px;overflow:auto}
#content .workforce-actions-grid>.leave-request-card{max-width:none}
.workforce-priority{margin:0 0 16px}
.workforce-priority .workforce-metrics{margin-bottom:12px!important}
#content .workforce-clock-card{background:linear-gradient(145deg,#fff 68%,var(--ui-accent-soft));border-color:var(--ui-line)}
.workforce-clock-card .actions button{min-height:44px}
.workforce-clock-card .table-wrap table{table-layout:fixed}
.workforce-clock-card .table-wrap th:last-child,.workforce-clock-card .table-wrap td:last-child{display:none}
.workforce-clock-card .table-wrap th,.workforce-clock-card .table-wrap td{padding:10px 8px;white-space:nowrap}
.workforce-clock-card .table-wrap th:first-child{width:29%}
.approval-queue-card .table-wrap table{table-layout:fixed}
.approval-queue-card .table-wrap th:first-child{width:43%}
.approval-queue-card .table-wrap th:nth-child(2){width:25%}
.approval-queue-card .table-wrap th:last-child{width:56px}
.approval-queue-card .table-wrap td{overflow-wrap:anywhere}
.approval-queue-card .approval-reason{display:block;margin-top:4px;color:var(--ui-muted);font-size:12px;line-height:1.45;white-space:normal}
.approval-decision .actions{display:flex;gap:6px;flex-wrap:wrap;margin:5px 0 0}
.approval-decision .actions button{padding:6px 9px;font-size:12px}
.workforce-punch-editor{min-width:0;margin:12px 0;padding:12px;border:1px solid var(--ui-line);border-radius:12px}
.workforce-punch-editor legend{padding:0 6px;font-weight:750;color:var(--ui-accent-dark)}
.workforce-punch-editor .row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.workforce-punch-editor label,.workforce-punch-editor input{min-width:0;width:100%}
.workforce-punch-window,.workforce-schedule-window{display:block;margin:8px 0;color:var(--ui-muted);font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.workforce-schedule-window{margin:3px 0 0}
@media(max-width:900px){#content .workforce-stack{grid-template-columns:1fr;grid-auto-rows:auto}.workforce-punch-editor .row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.workforce-punch-editor .row{grid-template-columns:1fr 1fr}.workforce-punch-editor{padding:9px}}

/* The complete Sue wordmark stays intact in both sidebar states. Its transparent
   silhouette takes the selected theme color instead of retaining a white square. */
#app .app-sidebar .brand{min-height:62px;align-items:center}
.brand-logo{display:block;flex:0 0 150px;width:150px;height:54px;background:var(--ui-accent);-webkit-mask:url('/sue-wordmark-teal.png') center/contain no-repeat;mask:url('/sue-wordmark-teal.png') center/contain no-repeat}
#app.sidebar-collapsed .app-sidebar .brand{min-height:70px}
.topbar-brand{display:none}
#app.sidebar-collapsed .app-sidebar .brand-logo{display:none}
#app.sidebar-collapsed .topbar-brand{display:block;flex:0 0 124px;width:124px;height:44px}
#app.sidebar-collapsed .topbar .theme-control label{white-space:nowrap}
.brand-logo-login{flex-basis:190px;width:190px;height:74px}