/* 오늘의주문 UI/UX concept F (2026-10-11) - design pack uiux_final_pack/to (sha256 0037a781...), tokens from the .dc.html inline values
   (DESIGN_TOKENS.md "B 사장님 앱 패턴" row + BLOCK.md logo colours). Loaded AFTER style.css: the existing variable names stay as aliases,
   so pages that are not redesigned yet keep working and only change tone. Layout / markup / data binding are untouched here. */

/* ---- P0-3 tokens ---- */
:root {
    --to-bg: #F2F4F6;
    --to-bg-2: #F7F8FA;
    --to-surface: #FFFFFF;
    --to-ink: #191F28;
    --to-ink-2: #4E5968;
    --to-line: #E5E8EB;
    --to-accent: #1B64DA;          /* screen accent (F: blue kept) */
    --to-accent-ink: #FFFFFF;      /* text on the accent - 4.5:1 */
    --to-accent-soft: #EAF2FF;     /* active menu / soft fills */
    --to-focus: #1D4ED8;
    --to-ok: #047857;  --to-ok-bg: #E6F7F1;
    --to-warn: #B45309; --to-warn-bg: #FFF4E5;
    --to-danger: #C0262D; --to-danger-bg: #FDECEC;
    --to-r-sm: 8px; --to-r-md: 14px; --to-r-lg: 20px; --to-r-pill: 999px;
    --brand-green-logo: #03C75A;   /* logo only (BLOCK.md) - not a screen colour */
    --brand-navy: #14213D;
    --font-display: 'Noto Sans KR', system-ui, sans-serif;
    --font-body: 'Noto Sans KR', system-ui, sans-serif;

    /* aliases: the names every existing template / style.css rule already uses */
    --bg: var(--to-bg);
    --surface: var(--to-surface);
    --surface-muted: var(--to-bg-2);
    --ink: var(--to-ink);
    --ink-2: var(--to-ink-2);
    --ink-3: var(--to-ink-2);
    --ink-4: #8B95A1;
    --border: var(--to-line);
    --primary: var(--to-accent);
    --primary-hover: #1550B3;
    --danger: var(--to-danger);
    --warn: var(--to-warn);
    --ok: var(--to-ok);
    --badge-danger-bg: var(--to-danger-bg); --badge-danger-fg: var(--to-danger);
    --badge-warn-bg: var(--to-warn-bg);     --badge-warn-fg: var(--to-warn);
    --badge-ok-bg: var(--to-ok-bg);         --badge-ok-fg: var(--to-ok);
    --sidebar-w: 240px;
    --font-sans: var(--font-body);
}

body { font-family: var(--font-body); color: var(--to-ink); background: var(--to-bg); letter-spacing: -0.2px; }
*:focus-visible { outline: 3px solid var(--to-focus); outline-offset: 2px; }

/* ---- P0-4 shell: white 240px sidebar (to-f-web.dc.html <aside>) ---- */
.app-sidebar {
    width: var(--sidebar-w);
    background: var(--to-surface) !important;
    border-right: 1px solid var(--to-line);
    color: var(--to-ink);
    padding: 20px 12px 24px;
}
.app-sidebar .brand {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; margin: 0 0 12px;
    font-size: 19px; font-weight: 900; letter-spacing: -0.5px; color: var(--brand-navy) !important;
}
.app-sidebar .brand svg { flex: 0 0 42px; }
.app-sidebar .ws-switcher {
    margin: 0 0 16px; padding: 10px 12px; min-height: 56px; border-radius: var(--to-r-md); background: var(--to-bg);
}
.app-sidebar .ws-badge { background: var(--to-surface); color: var(--to-ink-2); border: 1px solid var(--to-line); font-size: 12px; }
.app-sidebar .ws-badge-demand { background: var(--to-surface); color: var(--to-ink-2); }
.app-sidebar .ws-badge-supply { background: var(--to-warn-bg); color: var(--to-warn); border-color: transparent; }
.app-sidebar .ws-name { color: var(--to-ink); font-size: 15px; font-weight: 700; }
.app-sidebar .ws-menu { color: var(--to-ink-2); }
.app-sidebar .ws-option { background: var(--to-surface); color: var(--to-ink); border: 1px solid var(--to-line); border-radius: var(--to-r-sm); min-height: 44px; }
.app-sidebar .ws-option small { color: var(--to-ink-2); }
.app-sidebar .role-badge { color: var(--to-ink-2); background: var(--to-bg); border-radius: var(--to-r-md); }
.app-sidebar .nav-section { margin: 16px 12px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--to-ink-2); text-transform: none; }
.app-sidebar .nav-group {
    margin: 20px 8px 2px; padding-top: 14px; border-top: 1px solid var(--to-line);
    font-size: 13px; font-weight: 900; color: var(--brand-navy); letter-spacing: -0.2px; list-style: none;
}
.app-sidebar .nav-group:first-child { margin-top: 4px; padding-top: 0; border-top: 0; }
.app-sidebar .nav-group + .nav-section { margin-top: 6px; }
.app-sidebar .nav-section { margin: 10px 12px 2px; font-size: 12px; font-weight: 500; color: var(--to-ink-2); }  /* 7.0:1 */
.app-sidebar .nav-link {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; margin: 1px 0;
    border-radius: var(--to-r-md); color: var(--to-ink-2) !important; font-size: 15px; font-weight: 500; border-left: 0;
}
.app-sidebar .nav-link i { font-size: 1.15rem; color: var(--to-ink-2); width: 20px; text-align: center; }
.app-sidebar .nav-link:hover { background: var(--to-bg); color: var(--to-ink) !important; text-decoration: none; }
.app-sidebar .nav-link.active, .app-sidebar .nav-link[aria-current="page"] {
    background: var(--to-accent-soft); color: var(--to-accent) !important; font-weight: 700; border-left: 0; box-shadow: none;
}
.app-sidebar .nav-link.active i { color: var(--to-accent); }
.sidebar-auth { margin: 0 0 8px; padding: 12px; border-radius: 16px; background: var(--to-bg); border: 0; }
.sidebar-auth-user { color: var(--to-ink); font-size: 14px; font-weight: 700; }
.sidebar-auth-links a, .sidebar-auth-links span { color: var(--to-ink-2); }
.sidebar-auth-links a:hover { color: var(--to-accent); }
.sidebar-auth-state.on { color: var(--to-ok); }
.sidebar-auth-state.off { color: var(--to-ink-2); }
.sidebar-auth .sidebar-auth-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--to-r-pill);
    background: var(--to-surface); border: 1px solid var(--to-line); color: var(--to-ink) !important; font-size: 13px; font-weight: 500;
}
.sidebar-auth .sidebar-auth-btn:hover { background: var(--to-accent-soft); color: var(--to-accent) !important; }
.sidebar-auth .sidebar-auth-logout { color: var(--to-danger) !important; border-color: var(--to-line); }
.sidebar-auth-login { display: flex; align-items: center; gap: 8px; min-height: 48px; color: var(--to-accent) !important; font-weight: 700; }

.app-main { margin-left: var(--sidebar-w); }
.breadcrumb-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--to-ink-2); font-size: 13px; }
.breadcrumb-bar a { color: var(--to-ink-2); }
.hamburger-toggle { min-width: 44px; min-height: 44px; border-radius: var(--to-r-md); background: var(--to-surface); border: 1px solid var(--to-line); color: var(--to-ink); }

/* cards / KPI / buttons / badges in the F tone */
.card { border: 1px solid var(--to-line); border-radius: var(--to-r-lg); background: var(--to-surface); box-shadow: none; }
.card-header { background: var(--to-surface); border-bottom: 1px solid var(--to-line); border-radius: var(--to-r-lg) var(--to-r-lg) 0 0 !important; font-weight: 700; }
.kpi-card { border: 1px solid var(--to-line); border-radius: var(--to-r-lg); }
.kpi-card .kpi-label { font-size: 13px; color: var(--to-ink-2); }
.btn-brand, .btn-primary, .btn-success { background: var(--to-accent) !important; border-color: var(--to-accent) !important; color: var(--to-accent-ink) !important; border-radius: var(--to-r-md); font-weight: 700; min-height: 44px; }
.btn-brand:hover, .btn-primary:hover, .btn-success:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }
.btn-outline-secondary, .btn-outline-primary, .btn-light { border-radius: var(--to-r-md); min-height: 44px; }
.badge { border-radius: var(--to-r-pill); font-weight: 700; }
.table { --bs-table-bg: transparent; }
.table > thead th { color: var(--to-ink-2); font-size: 13px; font-weight: 700; border-bottom-color: var(--to-line); }

/* same breakpoint as style.css (768px): the sidebar becomes the hamburger drawer */
/* P0-6 mobile web bottom tabs (to-f-app.dc.html): 5 columns, 44px targets, accent on the active tab; hidden on desktop */
.to-tabbar { display: none; }
@media (max-width: 768px) {
    .app-sidebar { width: var(--sidebar-w); }
    .app-main { margin-left: 0; padding: 1rem 16px calc(84px + 1.5rem + env(safe-area-inset-bottom)); }
    .to-tabbar {
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        padding: 8px 8px calc(12px + env(safe-area-inset-bottom)); background: var(--to-surface); border-top: 1px solid var(--to-line);
    }
    .to-tab {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 44px;
        font-size: 11px; font-weight: 500; color: var(--to-ink-2); background: transparent; border: 0; text-decoration: none;
    }
    .to-tab i { font-size: 1.25rem; line-height: 1; }
    .to-tab.active { color: var(--to-accent); font-weight: 700; }
    .to-tab:hover { color: var(--to-ink); text-decoration: none; }
}

/* P0-5 home (to-f-web.dc.html): greeting head, quick actions, KPI numbers */
.to-home-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 4px 0 20px; }
.to-home-title { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -0.6px; color: var(--to-ink); }
.to-home-sub { margin: 6px 0 0; font-size: 14px; color: var(--to-ink-2); }
.to-home-sub .badge { font-size: 12px !important; }
.to-home-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.to-home-actions .btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; }
#kpiRow .kpi-card .card-body { padding: 20px; }
#kpiRow .kpi-value { margin-top: 8px; font-size: 28px; font-weight: 900; letter-spacing: -0.8px; color: var(--to-ink); }
#kpiRow .kpi-icon { color: var(--to-ink-2); }
@media (max-width: 768px) {
    .to-home-title { font-size: 20px; }
    .to-home-actions { width: 100%; }
    .to-home-actions .btn { flex: 1 1 0; justify-content: center; }
    #kpiRow .kpi-value { font-size: 22px; }
}

/* ---- P0-6/P0-7 shared page layer (every to-f-*-web.dc.html page: head -> KPI row -> insight -> list card). Structural selectors
   only, so pages without their own design (P0-7) get the same F tone without new layouts; ids / JS / data are untouched. ---- */
/* page head: the first title of each page (h4.fw-bold at the top of the content, alone or in its action row) */
.app-main > h4.fw-bold, .app-main > div > h4.fw-bold, .app-main > .container-fluid > h1.h4 {
    font-size: 22px; font-weight: 900; letter-spacing: -0.6px; color: var(--to-ink); line-height: 1.3;
}
.app-main > h4.fw-bold > i.bi:first-child, .app-main > div > h4.fw-bold > i.bi:first-child,
.app-main > .container-fluid > h1.h4 > i.bi:first-child { display: none; }      /* design titles carry no icon */
.app-main > h4.fw-bold + p.text-muted, .app-main > h4.fw-bold + div.text-muted, .to-page-sub {
    font-size: 14px !important; color: var(--to-ink-2) !important; margin: 4px 0 20px;
}
.to-page-sub { display: block; }
/* list card: title row, search, filter chips */
.card-header { padding: 14px 20px; font-size: 15px; }
.card-body { padding: 20px; }
.card .table { margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 12px 10px; border-bottom-color: var(--to-bg); }
.table > tbody > tr:hover > * { background: var(--to-bg-2); }
.table-sm > :not(caption) > * > * { padding: 8px 8px; }
.form-control, .form-select { border-radius: var(--to-r-md); border-color: var(--to-line); min-height: 44px; }
.form-control-sm, .form-select-sm { min-height: 36px; border-radius: var(--to-r-sm); }
.form-control:focus, .form-select:focus { border-color: var(--to-accent); box-shadow: 0 0 0 3px var(--to-accent-soft); }
.btn-group > .btn, .btn-group-sm > .btn { min-height: 36px; }
.btn-check:checked + .btn, .btn-group > .btn.active { background: var(--to-ink) !important; border-color: var(--to-ink) !important; color: #fff !important; }
.nav-tabs { border-bottom: 1px solid var(--to-line); gap: 4px; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--to-ink-2); font-weight: 500; min-height: 44px; }
.nav-tabs .nav-link.active { color: var(--to-ink); font-weight: 700; border-bottom-color: var(--to-ink); background: transparent; }
.nav-pills .nav-link { border-radius: var(--to-r-pill); color: var(--to-ink-2); }
.nav-pills .nav-link.active { background: var(--to-ink); color: #fff; }
/* insight / notices in the F tone (design: soft tinted box, no heavy border) */
.alert { border: 0; border-radius: var(--to-r-md); }
.alert-info { background: var(--to-accent-soft); color: #174EA6; }
.alert-warning { background: var(--to-warn-bg); color: #8A4100; }
.alert-danger { background: var(--to-danger-bg); color: #9B1C22; }
.alert-success { background: var(--to-ok-bg); color: #05603A; }
.modal-content { border: 0; border-radius: var(--to-r-lg); }
.modal-header, .modal-footer { border-color: var(--to-line); }
.btn-sm { min-height: 36px; border-radius: var(--to-r-sm); }
.text-muted, .text-secondary { color: var(--to-ink-2) !important; }      /* #4E5968 on white = 7.0:1 */
@media (max-width: 768px) {
    .app-main > h4.fw-bold, .app-main > div > h4.fw-bold, .app-main > .container-fluid > h1.h4 { font-size: 20px; }
    .card-body { padding: 16px; }
    .table-responsive, .card { -webkit-overflow-scrolling: touch; }
}
/* a title followed by the design subtitle: the subtitle owns the gap (Bootstrap mb-* on the title would double it) */
.app-main > h4.fw-bold:has(+ .to-page-sub) { margin-bottom: 0 !important; }
.app-main > div.d-flex:has(+ .to-page-sub) { margin-bottom: 0 !important; }
/* a11y (axe 2026-10-12): Bootstrap warning yellow on the light background is 1.5:1 - the F warn ink instead */
.btn-outline-warning { color: var(--to-warn); border-color: var(--to-warn); }
.btn-outline-warning:hover, .btn-outline-warning:focus { background: var(--to-warn-bg); color: #8A4100; border-color: var(--to-warn); }
.text-warning { color: var(--to-warn) !important; }
/* F: green is the LOGO colour only (BLOCK.md). Older pages still paint screen accents with --brand-green(-dark) (65 uses in 13
   templates, some defined in the page's own :root) - this file loads after them, so the screen accent becomes the F blue. */
:root { --brand-green: var(--to-accent); --brand-green-dark: #1550B3; }
.flow-note, .login-hint { color: var(--to-ink-2) !important; }      /* #9aa19d was 2.5:1 */
/* dense data tables (재고현황 17 columns): keep every column (no feature removal) but stop words breaking letter by letter -
   one line per cell, the .table-responsive wrapper scrolls sideways (keyboard-focusable, see base.html) */
.table-responsive > .table-compact { width: max-content; min-width: 100%; }
.table-responsive > .table-compact th, .table-responsive > .table-compact td { white-space: nowrap; }
/* Korean words never split mid-word in tables ("모/름", "채/널") - wrap only between words */
.table th, .table td { word-break: keep-all; overflow-wrap: normal; }   /* no mid-token breaks ("20,30/7 g", "2026-/10-16") */
.table th { white-space: nowrap; }
/* 근무표 time axis: #868e96 was 3.3:1 on white (axe on production data) */
.wf-hour { color: var(--to-ink-2) !important; }

/* ===== 2026-10-12 FINAL POLISH ===== */
/* numbers: F uses Noto Sans KR with tabular figures, not the legacy IBM Plex Mono */
:root { --font-mono: 'Noto Sans KR', system-ui, sans-serif; }
.kpi-value, .table td, .table th, .num, .text-end { font-variant-numeric: tabular-nums; }
.kpi-value { font-family: var(--font-body); }

/* links: stand-alone list / table links read as rows, not underlined text (links inside sentences keep their underline - a11y) */
#todoList a, .list-group-item a, .action-card a, .breadcrumb-bar a { text-decoration: none; }
#todoList a:hover, .list-group-item a:hover, .breadcrumb-bar a:hover { text-decoration: underline; }
/* table-cell links keep their underline: many cells mix text and links (axe link-in-text-block) */
#todoList li { padding: 10px 0 !important; border-color: var(--to-bg) !important; }
#todoList a.text-nowrap { color: var(--to-accent); font-weight: 700; }

/* home action cards: one even row (7 at 1280), not 6 + an orphan */
#actionCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin-left: 0; margin-right: 0; }
#actionCards .card-body { padding: 10px 12px !important; }
#actionCards .card-body > .small:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
#actionCards > [class*="col"] { width: auto; max-width: none; padding: 0; margin: 0; }

/* compact card bodies (py-2) still keep the F side padding */
.card-body.py-2, .card-body.py-1 { padding-left: 20px !important; padding-right: 20px !important; }

/* empty rows ("이 기간의 발주가 없습니다") read as an empty state, not a table row */
.table tbody td[colspan] { padding: 36px 16px !important; color: var(--to-ink-2); text-align: center; background: var(--to-surface); }

/* status pills: one shape everywhere */
.badge { padding: .38em .7em; letter-spacing: -0.1px; }
.card .card-header .badge { vertical-align: 1px; }

/* buttons: hover / active / disabled states in the F tone */
.btn { transition: background-color .12s, border-color .12s, color .12s; }
.btn:disabled, .btn.disabled { opacity: .45; }
.btn-outline-primary { color: var(--to-accent); border-color: var(--to-accent); }
.btn-outline-primary:hover, .btn-outline-primary:active { background: var(--to-accent-soft); color: var(--to-accent); border-color: var(--to-accent); }
.btn-outline-secondary { color: var(--to-ink); border-color: var(--to-line); background: var(--to-surface); }
.btn-outline-secondary:hover { background: var(--to-bg); color: var(--to-ink); border-color: var(--to-line); }

/* toasts / dropdowns / modals share the card radius */
.toast, .dropdown-menu { border-radius: var(--to-r-md); border-color: var(--to-line); }
.modal-dialog { max-width: min(560px, calc(100vw - 32px)); }
.modal-lg { max-width: min(800px, calc(100vw - 32px)); }

/* mobile top bar: w07 symbol next to the menu button (store screens and supplier screens) */
.to-mobile-brand { display: none; }
@media (max-width: 768px) {
    .breadcrumb-bar { position: sticky; top: 0; z-index: 1020; background: var(--to-bg); padding: 10px 0; margin: -1rem 0 8px; }
    .to-mobile-brand { display: inline-flex; align-items: center; min-height: 44px; margin-right: 4px; }
    .to-mobile-brand svg { width: 34px; height: 24px; }
    .row > [class*="col-md-6"], .row > [class*="col-lg-6"] { width: 100%; }     /* 2-column forms collapse */
    .to-tabbar { box-shadow: 0 -4px 16px rgba(25, 31, 40, .06); }
}

/* dense tables become cards on phones (table.to-mcards; labels come from the header via base.html) */
@media (max-width: 768px) {
    .table-responsive > table.to-mcards { width: 100%; min-width: 0; border: 0; }
    table.to-mcards thead { display: none; }
    table.to-mcards, table.to-mcards tbody, table.to-mcards tr, table.to-mcards td { display: block; width: 100%; }
    table.to-mcards tr { margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--to-line); border-radius: var(--to-r-md); background: var(--to-surface); }
    table.to-mcards td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0 !important; border: 0 !important;
                         white-space: normal !important; text-align: right; background: transparent !important; }
    table.to-mcards td::before { content: attr(data-label); flex: 0 0 auto; color: var(--to-ink-2); font-size: 12px; font-weight: 700; text-align: left; }
    table.to-mcards td:not([data-label])::before, table.to-mcards td[data-label=""]::before { content: none; }
    table.to-mcards td[colspan] { justify-content: center; }
}
/* 재고현황 on phones: the item name is the card title; the card keeps the decision fields (현재재고, 부족, 예상 소진, 입찰, 다음입고,
   데이터 상태, 거래처). Cells marked .inv-m-hide by the page (2026-10-13: by class, not column position) stay on the item page. */
@media (max-width: 768px) {
    table.inv-mcards td.inv-m-hide { display: none !important; }
    table.inv-mcards td:nth-child(2) { justify-content: flex-start; flex-wrap: wrap; text-align: left; font-size: 15px; font-weight: 700;
                                       padding-bottom: 8px !important; margin-bottom: 4px; border-bottom: 1px solid var(--to-bg) !important; }
    table.inv-mcards td:nth-child(2)::before { content: none; }
    table.inv-mcards tr { cursor: pointer; }
}
/* cards marked with a left accent (border-start border-<color> border-4): Bootstrap widens ALL sides of a bordered .card, which drew
   a full red ring around every 우선확인 review - keep the intended 4px left bar only */
.card.border-start.border-4, .card.border-start.border-3 { border-width: 1px !important; border-color: var(--to-line) !important; border-left-width: 4px !important; }
.card.border-start.border-danger { border-left-color: var(--to-danger) !important; }
.card.border-start.border-warning { border-left-color: var(--to-warn) !important; }
.card.border-start.border-success { border-left-color: var(--to-ok) !important; }
.card.border-start.border-primary { border-left-color: var(--to-accent) !important; }
/* phones: breadcrumb = current page only (the title says the rest), one line */
@media (max-width: 768px) {
    .breadcrumb-bar { flex-wrap: nowrap; font-size: 0; }
    .breadcrumb-bar > a:not(.to-mobile-brand), .breadcrumb-bar > span:not(.current) { display: none; }
    .breadcrumb-bar .current { font-size: 13px; color: var(--to-ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* status pills: Bootstrap's solid fills (bright yellow / red / grey) -> the F soft tints (all >= 4.5:1, checked) */
.badge.bg-warning, .badge.text-bg-warning { background: var(--to-warn-bg) !important; color: #8A4100 !important; }
.badge.bg-danger, .badge.text-bg-danger { background: var(--to-danger-bg) !important; color: var(--to-danger) !important; }
.badge.bg-success, .badge.text-bg-success { background: var(--to-ok-bg) !important; color: var(--to-ok) !important; }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.text-bg-light { background: var(--to-bg) !important; color: var(--to-ink-2) !important; border: 0 !important; }
.badge.bg-info, .badge.text-bg-info { background: var(--to-accent-soft) !important; color: var(--to-accent) !important; }
.badge.bg-primary, .badge.text-bg-primary { background: var(--to-accent) !important; color: #fff !important; }
/* money / count columns right-aligned (거래처별 매입 통계) */
#vendorStatsTable th:nth-child(n+2), #vendorStatsTable td:nth-child(n+2) { text-align: right; }
/* supplier portal status pills (closed / declined / withdrawn / expired / rejected): #6b7280 on #f3f4f6 was 4.4:1 -> ink-2 (6.4:1) */
.sp-rejected, .sp-declined, .sp-expired, .sp-withdrawn, .sp-closed { color: var(--to-ink-2) !important; }
.btn-link { color: var(--to-accent); }

/* 2026-10-13 글자 크기 control (top-right of the top bar). The stylesheet sizes text in px, so the scale is applied to the whole page
   with zoom (text, tables, modals, inputs and the bottom tabs keep their proportions) - not a rem-only root font change. */
.to-fontsize { margin-left: auto; display: inline-flex; border: 1px solid var(--to-line); border-radius: var(--to-r-md); overflow: hidden; }
.to-fontsize button { min-width: 40px; min-height: 40px; padding: 0 8px; border: 0; background: var(--to-surface); color: var(--to-ink); font-weight: 700; font-size: 13px; }
.to-fontsize button + button { border-left: 1px solid var(--to-line); }
.to-fontsize button:hover { background: var(--to-bg, #f4f5f7); }
.to-fontsize button:focus-visible { outline: 2px solid var(--to-accent); outline-offset: -2px; }
:root[data-font-scale="90"] body { zoom: .9; }
:root[data-font-scale="110"] body { zoom: 1.1; }
:root[data-font-scale="120"] body { zoom: 1.2; }

/* 2026-10-13 UX3 responsive tables (app/static/js/to-tables.js): SECONDARY columns hide below 768 px, DETAIL below 1280 px; the row's
   toggle opens the hidden values under the row. The toggle only shows while a column of that table is actually hidden. */
.to-tier-toggle { display: none; border: 0; background: transparent; padding: 0 .35rem 0 0; color: var(--bs-secondary-color, #6c757d); line-height: 1; }
.to-tier-toggle::before { content: "\25B8"; display: inline-block; transition: transform .15s; }
.to-tier-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
table[data-tier-hidden] .to-tier-toggle { display: inline-block; min-width: 24px; min-height: 24px; }
tr.to-tier-extra > td { background: var(--bs-tertiary-bg, #f8f9fa); }
@media (max-width: 1279.98px) { table[data-tiered] .to-tier-detail { display: none; } }
@media (max-width: 767.98px) { table[data-tiered] .to-tier-secondary { display: none; } }