@import url('./ui-tokens.css');
/* Shared tokens and opt-in templates. Loaded after legacy styles during migration. */

.ui-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 24px;padding:0;border:0;background:transparent;min-height:0;box-shadow:none}.ui-page-copy{min-width:0}.ui-page-head h1{font-size:24px;font-weight:700;line-height:1.4;letter-spacing:-.5px;margin:4px 0 0;overflow-wrap:anywhere}.ui-page-head .eyebrow{font-size:12px;letter-spacing:.03em;color:var(--eum-muted)}.ui-page-head p{font-size:13px;color:var(--eum-muted);line-height:1.6;margin:8px 0 0}.ui-page-head .head-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex-shrink:0;max-width:50%}.ui-subnav{margin:0 0 24px}.ui-subnav :is(.system-section-tabs,.operations-section-tabs,.actions){display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;min-height:40px;padding:0;margin:0}.ui-subnav .btn{min-height:40px;padding:8px 12px;margin:0;font-size:13px;width:auto}
:is(body[data-ui-template],.ui-preview){color:var(--eum-text);background:var(--eum-page)}body[data-ui-template] .content{max-width:1450px;padding:24px}body[data-ui-template] .shell{background:var(--eum-page)}
:is(body[data-ui-template],.ui-preview) .panel{border:1px solid var(--eum-line);background:var(--eum-surface);border-radius:var(--eum-radius);box-shadow:none;padding:24px;margin:0 0 24px}
:is(body[data-ui-template],.ui-preview) :is(.section-head,.ui-section-head){display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0 0 16px}
:is(body[data-ui-template],.ui-preview) :is(h2,.section-head h2){font-size:16px;line-height:1.5;font-weight:600;letter-spacing:-.2px}
:is(body[data-ui-template],.ui-preview) .btn{min-height:40px;border-radius:var(--eum-control-radius);padding:8px 14px;font-size:13px;line-height:1.5;box-shadow:none;margin:0}
:is(body[data-ui-template],.ui-preview) .btn.primary{background:var(--eum-primary);border-color:var(--eum-primary);color:white}
:is(body[data-ui-template],.ui-preview) .btn.selected{background:var(--eum-selected);border-color:#a7c4ed;color:var(--eum-working)}
:is(body[data-ui-template],.ui-preview) .btn.danger{background:#fff1f2;border-color:#efb7bc;color:var(--eum-danger)}
:is(body[data-ui-template],.ui-preview) .btn:disabled{opacity:1;color:#68768a;background:#edf0f4;border-color:#d8dfe8;cursor:not-allowed}
:is(body[data-ui-template],.ui-preview) :is(input:not([type=checkbox]):not([type=radio]),select){min-height:40px;border-radius:var(--eum-control-radius);padding:8px 12px}
:is(body[data-ui-template],.ui-preview) textarea{border-radius:var(--eum-control-radius);min-height:88px;line-height:1.6;padding:10px 12px}
:is(body[data-ui-template],.ui-preview) .muted{color:var(--eum-muted)}
:is(body[data-ui-template],.ui-preview) :is(.toolbar,.ui-filter-bar){display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin:0 0 16px}
:is(body[data-ui-template],.ui-preview) :is(.toolbar,.ui-filter-bar) label{margin:0;min-width:0}
:is(body[data-ui-template],.ui-preview) .tabs{display:flex;gap:8px;flex-wrap:wrap}
:is(body[data-ui-template],.ui-preview) .ui-list-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;color:var(--eum-muted);font-size:13px}
:is(body[data-ui-template],.ui-preview) .table-wrap{max-width:100%;overflow:auto}
:is(body[data-ui-template],.ui-preview) :is(th,td){padding:12px 14px;vertical-align:top;line-height:1.6}
:is(body[data-ui-template],.ui-preview) th{font-size:12px;font-weight:600;color:var(--eum-muted);background:var(--eum-subtle)}
:is(body[data-ui-template],.ui-preview) td .btn{min-height:32px;padding:4px 10px}
.ui-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:16px 0 0;margin:16px 0 0;border-top:1px solid var(--eum-line);color:var(--eum-muted)}.ui-pagination>div{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.ui-pagination .btn{min-width:36px}.ui-pagination small{font-size:12px}
.ui-field{display:flex;flex-direction:column;gap:8px;min-width:0}.ui-field label{margin:0;display:block}.ui-required{font-size:var(--eum-font-small);color:var(--eum-danger);margin-left:4px}.ui-field [aria-invalid=true]{border-color:#b42332}.ui-field input{width:100%}
.ui-badge{display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:3px 8px;font-size:12px;line-height:1.5;font-weight:500;white-space:normal}.ui-badge-neutral{background:#edf0f4;color:#46556b}.ui-badge-working{background:#edf4ff;color:var(--eum-working)}.ui-badge-done{background:#e9f6ee;color:var(--eum-success)}.ui-badge-warning{background:#fff3df;color:#865016}.ui-badge-danger{background:#fff0f1;color:var(--eum-danger)}
.ui-notice{border:1px solid #cadbf3;border-radius:8px;padding:12px 16px;line-height:1.6;background:#f0f6ff;color:#234a7c;margin:12px 0}.ui-notice p{margin:0;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}.ui-notice strong{display:block;margin-bottom:4px}.ui-notice-warning{background:var(--eum-warning-bg);border-color:#edcf99;color:var(--eum-warning)}.ui-notice-error{background:var(--eum-danger-bg);border-color:#efb7bc;color:var(--eum-danger)}.ui-notice-success{background:var(--eum-success-bg);border-color:#bbdec7;color:var(--eum-success)}
.ui-empty{padding:32px 16px;text-align:center;color:var(--eum-muted);border:1px dashed var(--eum-line);border-radius:8px}.ui-empty strong{color:var(--eum-text);font-size:15px}.ui-empty p{margin:8px 0 0}.ui-empty .actions{justify-content:center;margin:16px 0 0}
:is(body[data-ui-template],.ui-preview) :is(button,input,select,textarea,summary,a):focus-visible{outline:3px solid var(--eum-focus);outline-offset:3px}
@media(max-width:1199px){body[data-ui-template=work] .task-work-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:767px){.ui-page-head{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:24px}.ui-page-head .head-actions{max-width:100%;justify-content:flex-start}.ui-page-head h1{font-size:24px}.ui-subnav{margin-bottom:24px}body[data-ui-template] .content{padding:16px}:is(body[data-ui-template],.ui-preview) .panel{padding:16px}:is(body[data-ui-template],.ui-preview) .btn,:is(body[data-ui-template],.ui-preview) :is(input:not([type=checkbox]):not([type=radio]),select){min-height:44px}:is(body[data-ui-template],.ui-preview) td .btn{min-height:44px;min-width:44px}.ui-pagination{justify-content:flex-start}.ui-pagination>div{width:100%}:is(body[data-ui-template],.ui-preview) .toolbar{align-items:stretch;flex-direction:column}:is(body[data-ui-template],.ui-preview) .toolbar .search{width:100%;min-width:0}.ui-page-head .head-actions>.btn{min-height:44px}.ui-subnav .btn{min-height:44px}}
/* The old twelve-column outer grid assumed a fixed card order; the new template owns spacing. */
body[data-ui-template] .content{display:block}
body[data-ui-template] .content>.ui-page-head{margin:0 0 24px}
body[data-ui-template] .content>.notice-arrival{margin:0 0 24px}
body[data-ui-template=detail] .company-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:16px 0 0;padding:16px 0 0}
body[data-ui-template=detail] .company-info-grid>div{padding:0;margin:0;min-height:0;gap:4px}
@media(max-width:767px){body[data-ui-template=detail] .company-info-grid{grid-template-columns:minmax(0,1fr)}.ui-pagination .btn{min-width:44px}}
.ui-page-head .btn{min-height:40px;border-radius:var(--eum-control-radius);padding:8px 14px;font-size:13px;margin:0}
@media(max-width:767px){.ui-page-head .btn{min-height:44px}}

/* Stage 2: compact notifications and an inline, permission-filtered mobile menu. */
.mobile-menu-toggle{display:none}
.notice-arrival.notice-compact{display:block;padding:0;min-height:0;border-left-width:4px}
.notice-compact>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;min-height:48px;cursor:pointer;list-style:none}
.notice-compact>summary::-webkit-details-marker{display:none}
.notice-expand-label{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap;color:var(--eum-muted)}
.notice-when-open,.notice-compact[open] .notice-when-closed{display:none}
.notice-compact[open] .notice-when-open{display:inline}
.notice-compact[open] .notice-expand-label>span:last-child{transform:rotate(180deg)}
.notice-compact-body{padding:0 16px 16px;border-top:1px solid var(--eum-line)}
.notice-compact-body p{margin:12px 0;line-height:1.7;overflow-wrap:anywhere;white-space:pre-wrap;color:var(--eum-text)}
.notice-compact>summary:focus-visible,.mobile-menu-toggle:focus-visible,.workspace-sidebar button:focus-visible{outline:3px solid #6ea8fb;outline-offset:3px}
@media(max-width:767px){
 .workspace-sidebar{padding:12px 16px!important;display:flex;flex-direction:column;gap:12px}
 .workspace-sidebar .brand-sidebar{width:auto;align-self:flex-start}
 .workspace-sidebar>.nav-label{display:none}
 .mobile-menu-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:48px;border:1px solid #58779b;border-radius:8px;padding:10px 12px;background:#203e60;color:#fff;text-align:left;cursor:pointer;font:inherit}
 .mobile-menu-toggle>span:first-child{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;min-width:0}
 .mobile-menu-toggle small{font-size:12px;color:#c0cfe2}
 .mobile-menu-toggle strong{font-size:14px;overflow-wrap:anywhere}
 .mobile-menu-label{font-size:13px;white-space:nowrap}
 .workspace-sidebar:not(.mobile-menu-open)>nav,.workspace-sidebar:not(.mobile-menu-open)>.side-bottom{display:none!important}
 .workspace-sidebar.mobile-menu-open>nav{display:flex;flex-direction:column;align-items:stretch;gap:4px;max-height:60dvh;overflow:auto;padding:4px;overscroll-behavior:contain}
 .workspace-sidebar.mobile-menu-open nav>.side-primary{width:100%;min-width:0;margin:0;min-height:44px}
 .workspace-sidebar.mobile-menu-open nav .admin-subnav{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0 0 8px 12px;padding-left:12px;border-left:1px solid #58779b;flex:none}
 .workspace-sidebar.mobile-menu-open nav .admin-subnav .btn{width:100%;min-height:44px;white-space:normal;text-align:left}
 .workspace-sidebar.mobile-menu-open>.side-bottom{margin:0!important;padding:12px 0 0!important;flex-wrap:wrap}
 .notice-compact>summary{padding:10px 12px;gap:8px}
 .notice-compact>summary strong{font-size:13px;line-height:1.5}
 .notice-compact .notice-banner-actions{flex-wrap:wrap!important;justify-content:flex-start}
 .notice-compact .btn{min-height:44px}
}

/* Stage 3: shared list controls and a clear separation of inquiry/device status. */
.inquiry-state-summary{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:150px;max-width:300px}
.inquiry-next-check{font-size:13px;line-height:1.6;color:var(--eum-text)}
.inquiry-other-checks{font-size:12px;line-height:1.6;color:var(--eum-muted);white-space:normal;overflow-wrap:anywhere}
.work-progress>strong{display:block;font-size:13px;white-space:nowrap}
.work-progress>small{display:block;font-size:12px;line-height:1.6;color:var(--eum-muted);white-space:normal}
.equipment-closure-note{max-width:190px;margin-top:6px}
.list-search-label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--eum-muted);min-width:0;flex:1}
.list-search-label input{width:100%;min-width:0}
#search.search{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;min-width:0}
#search.search .list-search-label{min-width:210px}
.company-search{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.ledger-page-size{display:flex;justify-content:flex-end;margin-top:16px}
.ledger-page-size label{display:flex;align-items:center;gap:8px;margin:0;font-size:12px}
.ui-pagination .btn{min-height:40px;border-radius:8px}
.ui-pagination .btn[aria-current=page]{background:var(--eum-selected);border-color:#a7c4ed;color:var(--eum-working)}
.ui-pagination .btn:focus-visible{outline:3px solid var(--eum-focus);outline-offset:3px}
@media(max-width:767px){#search.search{width:100%}#search.search .list-search-label{flex-basis:100%}.company-search .list-search-label{flex-basis:100%}.ui-pagination .btn{min-height:44px;min-width:44px}.ledger-page-size{justify-content:flex-start}.inquiry-state-summary{min-width:160px}}

@media(max-width:767px){
 .inquiry-table{display:block;width:100%;min-width:0!important}
 .inquiry-table thead{display:none}
 .inquiry-table tbody{display:grid;gap:16px;width:100%}
 .inquiry-table tr.inquiry-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;border:1px solid var(--eum-line);border-radius:8px;padding:16px;background:#fff}
 .inquiry-table tr.inquiry-row.ready{background:#faf8ff}
 body[data-ui-template] .inquiry-table tr.inquiry-row>td{display:block;min-width:0;width:auto;max-width:none;border:0;padding:0;overflow-wrap:anywhere}
 .inquiry-table tr.inquiry-row>td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;color:var(--eum-muted);margin-bottom:8px}
 .inquiry-table tr.inquiry-row>td:nth-child(n+3){grid-column:1/-1;border-top:1px solid #e5ebf3!important;padding-top:12px!important}
 .inquiry-table .inquiry-state-summary{min-width:0;max-width:none}
 .inquiry-table tr.inquiry-row>td:last-child{display:flex!important;align-items:center;flex-wrap:wrap;gap:8px}
 .inquiry-table tr.inquiry-row>td:last-child::before{display:none}
 .inquiry-table .work-progress{width:100%;max-width:none}
 .inquiry-table .work-progress progress{width:100%}
 .inquiry-table .equipment-closure-note{max-width:none}
 .inquiry-table tbody>tr:not(.inquiry-row){display:block}
 .inquiry-table tbody>tr:not(.inquiry-row)>td{display:block;width:100%}
}

/* Stage 5: persistent save guidance and field-level validation. */
.save-feedback{border:1px solid #e2b9be;border-left:4px solid #ae3344;background:#fff5f6;border-radius:8px;padding:16px;margin:0 0 20px;color:#71313c;overflow-wrap:anywhere}
.save-feedback p{margin:8px 0 12px;line-height:1.7;white-space:pre-wrap}.save-feedback .btn{margin:0 8px 0 0;min-height:40px}
.login-box .save-feedback{font-size:13px}.required-marker{display:inline-block;font-size:var(--eum-font-small);font-weight:500;color:var(--eum-danger);margin-left:6px;vertical-align:middle}
.field-validation-error{display:block;font-size:12px;color:var(--eum-danger);line-height:1.6;margin-top:6px}
[aria-invalid=true]{border-color:#b42332!important;box-shadow:0 0 0 1px #b4233233}
.form-save-progress{color:#234a7c;background:var(--eum-selected);padding:12px;border-radius:8px;font-size:13px;line-height:1.6}
form[aria-busy=true]{cursor:progress}
@media(max-width:767px){.save-feedback .btn{min-height:44px;margin-bottom:8px}}

.save-feedback[data-kind=review]{background:#f0f6ff;border-color:#cadbf3;border-left-color:var(--eum-focus);color:#234a7c}

/* Stage 6: global keyboard affordances and reflow-safe controls. */
:root{--blue:var(--eum-primary);--muted:var(--eum-muted);--line:var(--eum-line)}
body{font-size:var(--eum-font-body);color:var(--eum-text)}
.skip-link{position:fixed;top:8px;left:8px;z-index:1000;transform:translateY(-180%);padding:12px 16px;background:#fff;color:var(--eum-text);border:2px solid var(--eum-focus);border-radius:8px;font-weight:600}
.skip-link:focus{transform:translateY(0)}
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--eum-focus);outline-offset:3px}
.workspace-sidebar :where(button,a):focus-visible{outline-color:#b9d7ff}
:is(.muted,.status-caption,.ui-list-caption,.work-list-caption,.history-entry-meta,.task-summary-card small,.company-info-grid small){color:var(--eum-muted)}
.workspace-sidebar .sidebar-version{color:var(--eum-sidebar-muted);font-size:12px}
.workspace-sidebar .sidebar-account{color:var(--eum-sidebar-text)}
.content .eyebrow,.content .inquiry-detail-number{color:var(--eum-muted)}
dialog{max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
dialog .modal-head{position:sticky;top:0;z-index:2;background:var(--eum-surface)}
dialog .modal-body{overflow-wrap:anywhere;min-width:0}
dialog .modal-head h2{overflow-wrap:anywhere;min-width:0}
dialog .modal-head .icon-btn{flex-shrink:0;min-width:44px;min-height:44px}
dialog .modal-foot{display:flex;flex-wrap:wrap;gap:8px}
.content,.workspace,.panel,.form-grid>*,.toolbar>*{min-width:0}
@media(max-width:767px){input:not([type=checkbox]):not([type=radio]),textarea,select{font-size:16px;min-height:44px}dialog{margin:auto;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}dialog .modal-head,dialog .modal-body,dialog .modal-foot{padding:16px}dialog .btn{min-height:44px}header>div:last-child{flex-wrap:wrap;min-width:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,#toast{transition:none}}
@media(forced-colors:active){:where(button,a,input,select,textarea,summary):focus-visible{outline:3px solid Highlight}.btn.selected,[aria-current=page]{border:2px solid Highlight}.ui-badge,.badge{border:1px solid CanvasText}}

.badge:not(.ui-badge){background:#edf0f4;color:#46556b}
.badge.working:not(.ui-badge){background:#edf4ff;color:var(--eum-working)}
.badge.done:not(.ui-badge){background:var(--eum-success-bg);color:var(--eum-success)}
.badge.warning:not(.ui-badge){background:var(--eum-warning-bg);color:var(--eum-warning)}
.badge.ready:not(.ui-badge){background:#f1ebff;color:#5b3d9b}
dialog :is(input,select,textarea,button,summary){scroll-margin-block:80px 24px}

@media(max-width:767px){.toolbar form.search{display:flex;flex-wrap:wrap;width:100%;min-width:0;gap:8px}.toolbar form.search>input{flex:1 1 100%;width:100%;min-width:0}.toolbar form.search>.btn{flex:0 0 auto;min-width:44px;white-space:normal}}

/* Stage 12: shared typography across migrated and legacy screens.
   Small labels use tokens at their original selectors to preserve layout scope. */
:root{font-family:var(--eum-font-family)}
body{font-size:var(--eum-font-body);line-height:var(--eum-leading-body)}
button,input,textarea,select{font-family:inherit}
:is(body,body[data-ui-template]) .content h1,.ui-page-head h1{font-size:var(--eum-font-page);font-weight:700;line-height:1.4;letter-spacing:-.5px}
:is(body,body[data-ui-template]) .content h2,dialog .modal-head h2{font-size:var(--eum-font-section);font-weight:600;line-height:var(--eum-leading-heading);letter-spacing:-.2px}
:is(body,body[data-ui-template]) .content h3{font-size:var(--eum-font-subheading);font-weight:600;line-height:var(--eum-leading-heading);letter-spacing:normal}
.ui-page-head p{font-size:var(--eum-font-control);line-height:var(--eum-leading-body)}
body :is(.ui-required,.required-marker){font-size:var(--eum-font-small);font-weight:500}
@media(max-width:767px){input:not([type=checkbox]):not([type=radio]),textarea,select{font-size:16px}}

/* Higher specificity covers legacy notification filter controls on narrow screens. */
@media(max-width:767px){body :is(.content,dialog) :is(input:not([type=checkbox]):not([type=radio]),textarea,select){font-size:16px}}