/* ============================================================
   AutoStock 디자인시스템 (2026-08-09 적용)
   출처: design-system/autostock.md — 컬러/타이포/컴포넌트 토큰.
   원칙: 스캔 속도 > 장식. 숫자를 크게, 색은 상태 표시에만.
   주의: 기존 마크업의 클래스명(app-sidebar/kpi-card/card 등)은 그대로 두고
   이 파일에서 값만 재정의했다 — 라우팅/DB쿼리/템플릿 구조는 건드리지 않음.
   ============================================================ */

:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-muted: #fafbfc;
    --ink: #1b212b;
    --ink-2: #3c4450;
    --ink-3: #6b7480;
    --ink-4: #8a929e;
    --border: rgba(20, 25, 35, .09);
    --nav: #171c24;
    --primary: oklch(0.52 0.12 252);
    --primary-hover: oklch(0.46 0.12 252);
    --danger: oklch(0.62 0.16 40);
    --warn: oklch(0.72 0.13 80);
    --ok: oklch(0.62 0.13 148);
    --badge-danger-bg: oklch(0.95 0.04 40);
    --badge-danger-fg: oklch(0.5 0.16 40);
    --badge-warn-bg: oklch(0.96 0.05 85);
    --badge-warn-fg: oklch(0.48 0.11 75);
    --badge-ok-bg: #eef1f5;
    --badge-ok-fg: #5b6470;
    --sidebar-w: 212px;
    --font-sans: "IBM Plex Sans KR", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", monospace;

    /* 하위호환 별칭: --brand-green을 아직 새 디자인시스템으로 안 옮긴 템플릿 15개
       (supplier_*, onboarding_*, login/register 등)가 계속 참조 중이라, 이 턴에서
       손대지 않은 페이지가 깨지지 않도록 새 토큰으로 매핑해둔다. 해당 템플릿들을
       재구성할 때 --brand-green 참조를 var(--primary)로 직접 바꾸면서 이 별칭은 제거. */
    --brand-green: var(--primary);
    --brand-green-dark: var(--primary-hover);
}

body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
}

.num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ===== SideNav ===== */
.app-sidebar {
    width: var(--sidebar-w);
    min-height: 100vh;
    background: var(--nav);
    border-right: none;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    overflow-y: auto;
    z-index: 1030;
    padding: 22px 0;
}
.app-sidebar .brand {
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    letter-spacing: -0.01em;
    padding: 0 20px 26px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-bottom: none;
}
.app-sidebar .role-badge {
    margin: 0 20px 10px;
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .55);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
/* 2026-10-06 two-sided platform: active workspace badge + switcher, nav section headers */
.app-sidebar .ws-switcher { margin: 0 20px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.app-sidebar .ws-badge { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; display: inline-flex; gap: .25rem; align-items: center; }
.app-sidebar .ws-badge-demand { background: rgba(255,255,255,.14); color: #fff; }
.app-sidebar .ws-badge-supply { background: #f59e0b; color: #1f2937; }
.app-sidebar .ws-name { color: #fff; font-size: 12.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar .ws-menu { width: 100%; font-size: 12px; color: rgba(255,255,255,.75); }
.app-sidebar .ws-menu summary { cursor: pointer; list-style: none; }
.app-sidebar .ws-menu form { margin: 0; }
.app-sidebar .ws-option { display: block; width: 100%; text-align: left; background: rgba(255,255,255,.08); color: #fff; border: 0;
    border-radius: 6px; padding: 6px 8px; margin-top: 4px; font-size: 12px; text-decoration: none; }
.app-sidebar .ws-option small { color: rgba(255,255,255,.6); margin-left: .25rem; }
.app-sidebar .nav-section { margin: 12px 20px 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.45); }
.sidebar-auth {
    margin: 0 20px 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.sidebar-auth-user { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .85); font-size: 12.5px; }
.sidebar-auth-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-auth-links { margin-top: 4px; font-size: 11.5px; display: flex; gap: 6px; align-items: center; }
.sidebar-auth-links a { color: rgba(255, 255, 255, .55); text-decoration: none; }
.sidebar-auth-links a:hover { color: #fff; }
.sidebar-auth-links span { color: rgba(255, 255, 255, .3); }
/* 2026-10-07 account area: readable buttons that wrap instead of clipping (base rule '.sidebar-auth a { color: inherit }' is overridden) */
.sidebar-auth-kakao { margin-top: 6px; font-size: 12px; }
.sidebar-auth-state.on { color: #8fd6a4; }
.sidebar-auth-state.off { color: rgba(255, 255, 255, .7); }
.sidebar-auth-actions { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.sidebar-auth .sidebar-auth-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 6px; font-size: 12px; line-height: 1.3;
    color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); text-decoration: none; white-space: normal;
}
.sidebar-auth .sidebar-auth-btn:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.sidebar-auth .sidebar-auth-logout { color: #ffd2d2; border-color: rgba(255, 160, 160, .35); }
.sidebar-auth-login {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500; color: #fff;
    text-decoration: none;
}
.sidebar-auth-login:hover { color: oklch(0.72 0.14 252); }
.app-sidebar .nav-link {
    font-weight: 500;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .62);
    padding: 10px 20px;
    margin: 0 12px;
    border-radius: 8px;
    border-left: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.app-sidebar .nav-link i { font-size: 1.05rem; color: rgba(255, 255, 255, .45); }
.app-sidebar .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.app-sidebar .nav-link.active {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-left-color: transparent;
}
.app-sidebar .nav-link.active i { color: oklch(0.72 0.14 252); }
.app-main { margin-left: var(--sidebar-w); padding: 1.25rem 1.5rem 2.5rem; }
.breadcrumb-bar { font-weight: 500; font-size: 12.5px; color: var(--ink-3); margin-bottom: 1rem; }
.breadcrumb-bar a { color: var(--ink-3); text-decoration: none; }
.breadcrumb-bar a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb-bar .current { color: var(--ink); }

/* ===== Surfaces / cards ===== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: none;
}
.card-header {
    font-weight: 600;
    font-size: 15px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    color: var(--ink);
}

/* ===== KpiCard ===== */
.kpi-card { border: 1px solid var(--border); border-radius: 11px; transition: border-color .15s; background: var(--surface); }
.kpi-card:hover { border-color: var(--primary); }
.kpi-card .kpi-label { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.kpi-card .kpi-value {
    font-weight: 600; font-size: 26px; color: var(--ink); letter-spacing: -0.02em;
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.kpi-card .kpi-icon {
    font-size: 1.05rem; color: var(--primary);
    width: 38px; height: 38px; border-radius: 50%;
    background: #eef1f5;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.kpi-card .kpi-icon.text-danger { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }

/* ===== 상태 배지 (부족/주의/정상) ===== */
.badge-shortage, .badge-danger-soft { background: var(--badge-danger-bg) !important; color: var(--badge-danger-fg) !important; }
.badge-warn-soft { background: var(--badge-warn-bg) !important; color: var(--badge-warn-fg) !important; }
.badge-ok-soft { background: var(--badge-ok-bg) !important; color: var(--badge-ok-fg) !important; }

/* ===== Bootstrap 시맨틱 컬러 클래스 전역 재매핑 (2026-08-09) =====
   대부분의 페이지가 JS에서 bg-success/bg-danger/btn-outline-* 같은 부트스트랩 유틸리티
   클래스를 직접 생성한다(예: inventory_list.html의 createShortCell()). 페이지/JS를 하나씩
   고치는 대신, 여기서 부트스트랩 클래스 자체를 디자인시스템 토큰으로 재정의해 전 페이지를
   한 번에 재스킨한다 - 마크업/JS는 전혀 안 건드림, 순수 CSS 재정의만. */
.badge.bg-danger, .badge.bg-danger-subtle { background-color: var(--badge-danger-bg) !important; color: var(--badge-danger-fg) !important; }
.badge.bg-success, .badge.bg-success-subtle { background-color: var(--badge-ok-bg) !important; color: var(--badge-ok-fg) !important; }
.badge.bg-warning, .badge.bg-warning-subtle { background-color: var(--badge-warn-bg) !important; color: var(--badge-warn-fg) !important; }
.badge.bg-secondary, .badge.bg-light { background-color: #eef1f5 !important; color: var(--ink-3) !important; }
.badge.bg-primary { background-color: var(--primary) !important; }
.badge.bg-info { background-color: #eef1f5 !important; color: var(--ink-2) !important; }
.badge { font-weight: 500; border-radius: 99px; }

.text-success { color: var(--ok) !important; }
.text-danger { color: var(--danger) !important; font-weight: 600; }
.text-warning { color: var(--warn) !important; }
.text-muted { color: var(--ink-3) !important; }

/* 2026-08-10 디자인시스템 체크리스트 보완: 사이드바/버튼처럼 클래스로 색을 직접 지정하는
   요소를 제외한 일반 콘텐츠 링크가 부트스트랩 기본 파랑(#0d6efd)으로 남아있던 것을 수정. */
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
.app-sidebar a, .sidebar-auth a, .btn a { color: inherit; }
.page-link { color: var(--primary); }
.page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); }

/* ===== 버튼 ===== */
.btn-brand, .btn-primary, .btn-success {
    background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 500;
    border-radius: 8px;
}
.btn-brand:hover, .btn-primary:hover, .btn-success:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn-outline-secondary, .btn-outline-primary { border-color: var(--border); color: var(--ink-2); border-radius: 8px; }
.btn-outline-primary:hover { background: var(--surface-muted); color: var(--ink); }
.btn-outline-danger { border-color: var(--danger); color: var(--danger); border-radius: 8px; }
.btn-outline-danger:hover { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
.btn-outline-success { border-color: var(--ok); color: var(--ok); border-radius: 8px; }
.btn-outline-success:hover { background: var(--badge-ok-bg); color: var(--badge-ok-fg); }
.btn { border-radius: 8px; font-weight: 500; }

/* ===== DataTable (판매/정산 등 펼침형 표) ===== */
.table-sm td, .table-sm th { padding: 0.3rem 0.5rem; vertical-align: middle; }
#inventory table.table-compact td, #inventory table.table-compact th,
.table-compact td, .table-compact th { font-size: 0.78rem; padding: 0.25rem 0.4rem; }
table thead th { color: var(--ink-3); font-weight: 500; font-size: 12px; border-bottom: 1px solid var(--border); background: var(--surface-muted); }
.text-danger { color: var(--danger) !important; font-weight: 600; }
.filter-form .form-control, .filter-form .form-select { font-size: 0.875rem; border-color: var(--border); }
.cursor-pointer { cursor: pointer; }
.list-group-item.active { background-color: var(--primary); border-color: var(--primary); }
#recipeDetailCard .table { margin-bottom: 0; }
.row-link { cursor: pointer; }
.row-link:hover { background-color: var(--surface-muted); }

/* ===== StockCard 진행바 (재고현황 카드류) ===== */
.stock-progress { height: 5px; border-radius: 99px; background: #eceef1; overflow: hidden; }
.stock-progress > div { height: 100%; border-radius: 99px; }

/* ===== Mobile Navigation (768px and below) ===== */
@media (max-width: 768px) {
    .app-sidebar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 212px;
        min-height: 100vh;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }
    .app-sidebar.show {
        display: block;
        transform: translateX(0);
        pointer-events: auto;
    }
    .app-main { margin-left: 0; }

    /* Overlay backdrop */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1035;
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }
    .sidebar-overlay.show {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    /* Hamburger menu button */
    .hamburger-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        /* 2026-08-10 대비버그 수정: rgba(255,255,255,.75)(흰색)는 어두운 배경 기준 값이었는데
           이 버튼은 .breadcrumb-bar(밝은 배경)에 있어서 거의 안 보였음(Snow 실제화면 확인) -
           같은 breadcrumb-bar 안의 다른 요소들과 동일한 토큰(var(--ink)/var(--primary))으로 교체. */
        color: var(--ink);
        cursor: pointer;
        font-size: 1.5rem;
        padding: 0;
        margin-right: 8px;
    }
    .hamburger-toggle:hover {
        color: var(--primary);
    }
}

/* Desktop (769px and up) - restore original layout */
@media (min-width: 769px) {
    .hamburger-toggle,
    .sidebar-overlay {
        display: none !important;
    }
    .app-sidebar {
        display: block !important;
        transform: none !important;
    }
}

/* 2026-10-06 demand-main action cards: a card with work waiting gets the brand edge; zero stays quiet */
.action-card .card { transition: border-color .15s; }
.action-card:hover .card, .action-card:focus-visible .card { border-color: var(--primary); }
.action-card-hot .card { border-left: 3px solid var(--primary); }