/* Farm Console */
:root {
    --cui-font-sans-serif: "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;
    --r: 4px; --r-card: 6px;
    --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px;
}

/* ─── Light ─── */
[data-coreui-theme="light"], :root:not([data-coreui-theme="dark"]) {
    --bg: #f2f3f2; --surface: #fff; --surface-m: #eaecea; --surface-h: #f5f6f5;
    --text: #252d32; --muted: #606d75; --border: #d4d9d7; --divider: #e3e7e4;
    --accent: #2457d6; --accent-h: #1d47b0; --accent-soft: #edf2fc;
    --ok: #256b59; --ok-bg: #e1efe9;
    --warn: #896018; --warn-bg: #f5ebd4;
    --err: #a33e38; --err-bg: #f5e2e0;
    --side-bg: #202c38; --side-h: #2b3844; --side-a: #364450;
    --side-text: #e4e9ec; --side-muted: #abb8c0; --side-border: #3a4854;
    --bg: #f3f2ee; --border: #dadddc;
    --ico-dash: #7fa8d1; --ico-device: #72b4a5; --ico-work: #c6a66b; --ico-log: #a99bc4; --ico-sys: #a7b0bc;
    --kpi-ok: #287568; --kpi-warn: #996515; --kpi-err: #b44545;
    --accent: #326fa8; --accent-h: #2a5d8e; --accent-soft: #e2ecf6;
}

/* ─── Dark ─── */
[data-coreui-theme="dark"] {
    --bg: #20272c; --surface: #293238; --surface-m: #242d32; --surface-h: #323d44;
    --text: #e6ebee; --muted: #a8b5bd; --border: #49565e; --divider: #39464e;
    --accent: #90b4ff; --accent-h: #afc9ff; --accent-soft: #304364;
    --ok: #80c79b; --ok-bg: #20392c;
    --warn: #dfbc6c; --warn-bg: #3d321e;
    --err: #ed9595; --err-bg: #40272c;
    --side-bg: #1a242c; --side-h: #263340; --side-a: #324250;
    --side-text: #e4e9ec; --side-muted: #abb8c0; --side-border: #3a4854;
    --ico-dash: #7fa8d1; --ico-device: #72b4a5; --ico-work: #c6a66b; --ico-log: #a99bc4; --ico-sys: #a7b0bc;
    --kpi-ok: #80c79b; --kpi-warn: #dfbc6c; --kpi-err: #ed9595;
}

body { font-size: 16px; line-height: 1.55; color: var(--text); background: var(--bg); letter-spacing: -.01em; font-weight: 450; -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent-soft); }

/* ═══ 사이드바 ═══ */
.sidebar { --cui-sidebar-bg: var(--side-bg); --cui-sidebar-nav-title-color: var(--side-muted); width: 256px; --cui-sidebar-border-color: var(--side-border); border-right: 1px solid var(--side-border) !important; box-shadow: 1px 0 0 0 var(--side-border); }
.sidebar-header, .header { height: 64px; min-height: 64px; }
.sidebar-header { padding-block: 0; border-bottom: 1px solid var(--side-border); }
.sidebar-brand { font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; gap: .5rem; color: var(--side-text); }
.sidebar-brand svg { flex-shrink: 0; }
.sidebar-nav { padding: var(--sp-2) var(--sp-2); }
.sidebar .nav-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; margin-top: var(--sp-3); padding-top: var(--sp-3); padding-inline: var(--sp-2); color: var(--side-muted); text-transform: uppercase; border-top: 1px solid var(--side-border); }
.sidebar .nav-title:first-child { border-top: none; margin-top: var(--sp-2); padding-top: 0; }
.sidebar .nav-link { border-radius: var(--r); font-size: 14.5px; font-weight: 450; color: var(--side-text); --cui-sidebar-nav-link-padding-y: .5rem; --cui-sidebar-nav-link-padding-x: 10px; transition: background .1s; }
.sidebar .nav-link:hover { background: var(--side-h); }
.sidebar .nav-link.active { background: var(--side-a); font-weight: 650; }
.sidebar .nav-link .badge { font-size: 10px; font-weight: 600; }
.sidebar-footer { display: block; background: rgba(0,0,0,.1); font-size: 13px; border-top: 1px solid var(--side-border); color: var(--side-muted); }
.wrapper { width: 100%; padding-inline: var(--cui-sidebar-occupy-start,0) var(--cui-sidebar-occupy-end,0); will-change: auto; transition: padding .15s; }
.wrapper > .body > .container-fluid { max-width: 100%; padding-inline: var(--sp-5); }

/* ═══ 헤더 ═══ */
.header { border-bottom: 1px solid var(--divider); background: var(--surface); }
.header > .container-fluid { height: 100%; align-items: center; }
.header .muted { font-size: 13px; color: var(--muted); }
.header .fw-semibold { font-weight: 700; font-size: 14px; color: var(--text); }

/* ═══ 페이지 머리 ═══ */
.page-head { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.page-head h1 { font-size: 26px; font-weight: 700; margin: 0; line-height: 1.3; letter-spacing: -.03em; color: var(--text); }
.page-head .sub { color: var(--muted); margin-top: 2px; font-size: 15px; font-weight: 450; }
.page-head .actions { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ═══ 카드 ═══ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: none; }
.card:hover { box-shadow: none; }
.card-header { background: transparent; padding: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; border-bottom: 1px solid var(--divider); }
.card-header h2 { font-size: 15px; font-weight: 700; margin: 0; color: var(--text); }

/* ═══ KPI ═══ */
.kpi { display: flex; flex-direction: column; gap: var(--sp-1); padding: 20px var(--sp-4); }
.kpi::before, .kpi-icon, .kpi .ico { display: none; }
.kpi .label, .kpi-label { font-size: 13px; font-weight: 600; color: var(--muted); order: -1; }
.kpi .value, .kpi-value { font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.kpi-green, .kpi-blue, .kpi-amber, .kpi-red, .kpi-purple, .kpi-cyan { --kpi-rgb: none; }
.row.g-3 > [class*="col"] > .card { border-right-color: var(--divider); }

/* ═══ 툴바 ═══ */
.toolbar { display: flex; gap: var(--sp-2); padding: 10px var(--sp-3); border-bottom: 1px solid var(--divider); flex-wrap: wrap; align-items: center; }
.toolbar .search { max-width: 260px; }
.toolbar .count { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 600; }

/* ═══ 테이블 ═══ */
.table { --cui-table-bg: var(--surface); margin: 0; width: 100%; }
.card > .table-responsive { overflow-x: auto; }
.table > :not(caption) > * > * { padding: 12px var(--sp-3); border-color: var(--divider); }
.table thead th { font-size: 13px; font-weight: 650; color: var(--muted); letter-spacing: .02em; background: var(--surface-m); white-space: nowrap; padding-block: 10px; }
.table tbody tr { transition: background .1s; }
.table tbody tr:hover { background: var(--surface-h); }
.table td.actions { text-align: right; white-space: nowrap; width: 1%; }

/* ═══ 텍스트 ═══ */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; color: var(--text); }
.muted { color: var(--muted); }
.cell-main { font-weight: 650; font-size: 15.5px; color: var(--text); letter-spacing: -.01em; }
.cell-sub { color: var(--muted); font-size: 13px; margin-top: 2px; font-weight: 450; }

/* ═══ 상태 배지 ═══ */
.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r); font-size: 13px; font-weight: 650; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-success { background: var(--ok-bg); color: var(--ok); }
.status-danger { background: var(--err-bg); color: var(--err); }
.status-warning { background: var(--warn-bg); color: var(--warn); }
.status-info { background: var(--accent-soft); color: var(--accent); }
.status-primary { background: var(--accent-soft); color: var(--accent); }
.status-secondary { background: var(--surface-m); color: var(--muted); }
.status-dark { background: var(--surface-m); color: var(--muted); }

/* ═══ 버튼 ═══ */
.btn { border-radius: var(--r); font-weight: 600; font-size: 14.5px; height: 40px; padding: 0 var(--sp-3); display: inline-flex; align-items: center; gap: 6px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-h); border-color: var(--accent-h); }
.btn-ghost-secondary { color: var(--muted); border: 1px solid var(--border); background: var(--surface); }
.btn-ghost-secondary:hover { background: var(--surface-m); color: var(--text); }
.btn-sm { height: 32px; font-size: 13px; padding: 0 10px; }
.btn-icon { padding: 0 8px; height: 32px; }
.btn-outline-light { border-color: var(--side-border); color: var(--side-text); }
.btn-outline-light:hover { background: var(--side-h); border-color: var(--side-muted); }

/* ═══ 폼 ═══ */
.form-control, .form-select { border-radius: var(--r); border: 1px solid var(--border); font-size: 15px; font-weight: 450; height: 40px; background: var(--surface); color: var(--text); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: none; outline: 2px solid var(--accent); outline-offset: -1px; }
.form-control-sm, .form-select-sm { height: 32px; font-size: 13px; }
.form-label { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: var(--sp-1); }
.form-text { font-size: 13px; color: var(--muted); }
textarea.form-control { height: auto; resize: vertical; }

/* ═══ 드롭다운 ═══ */
.dropdown-menu { border-radius: var(--r-card); box-shadow: 0 4px 20px rgba(0,0,0,.15); border: 1px solid var(--border); padding: var(--sp-1); }
.dropdown-item { font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: var(--r); }
.dropdown-item:hover { background: var(--surface-h); }
.dropdown-item i { width: 1.125rem; margin-right: 6px; }

/* ═══ 빈 상태 ═══ */
.empty { text-align: center; padding: 56px var(--sp-3); color: var(--muted); }
.empty i { font-size: 1.75rem; display: block; margin-bottom: var(--sp-2); opacity: .25; }
.empty-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: var(--sp-1); }

/* ═══ 알림 ═══ */
.alert { border-radius: var(--r-card); font-size: 14px; font-weight: 500; }
.alert-success { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.alert-danger { background: var(--err-bg); border-color: transparent; color: var(--err); }

/* ═══ 모달 ═══ */
.modal-content { border-radius: var(--r-card); border: 1px solid var(--border); box-shadow: 0 16px 48px rgba(0,0,0,.2); background: var(--surface); }
.modal-header { border-bottom: 1px solid var(--divider); padding: var(--sp-3) 20px; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--divider); padding: var(--sp-3) 20px; }
.modal-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }

/* ═══ 프로그레스 ═══ */
.progress { background: var(--surface-m); border-radius: 2px; height: 5px; }
.progress-bar { border-radius: 2px; transition: width .3s ease; }
.progress-bar.bg-success { background: var(--ok) !important; }
.progress-bar.bg-primary { background: var(--accent) !important; }

/* ═══ 기타 ═══ */
.badge.bg-light { background: var(--surface-m) !important; color: var(--text); border: 1px solid var(--divider); font-size: 13px; font-weight: 600; border-radius: var(--r); padding: 2px 8px; }
/* 사이드바 아이콘 색 */
.sidebar .nav-link .nav-icon { opacity: .85; }
.sidebar .nav-icon[class*="cil-home"], .sidebar .nav-icon[class*="cil-chart"] { color: var(--ico-dash); }
.sidebar .nav-icon[class*="cil-mobile"], .sidebar .nav-icon[class*="cil-layers"], .sidebar .nav-icon[class*="cil-people"], .sidebar .nav-icon[class*="cil-wifi"] { color: var(--ico-device); }
.sidebar .nav-icon[class*="cil-cart"], .sidebar .nav-icon[class*="cil-gift"], .sidebar .nav-icon[class*="cil-location"], .sidebar .nav-icon[class*="cil-basket"] { color: var(--ico-work); }
.sidebar .nav-icon[class*="cil-cloud"], .sidebar .nav-icon[class*="cil-applications"], .sidebar .nav-icon[class*="cil-notes"], .sidebar .nav-icon[class*="cil-settings"], .sidebar .nav-icon[class*="cil-shield"] { color: var(--ico-sys); }

/* KPI 컬러 유틸 */
.kpi-val-ok .kpi-value, .kpi-val-ok .value { color: var(--kpi-ok); }
.kpi-val-warn .kpi-value, .kpi-val-warn .value { color: var(--kpi-warn); }
.kpi-val-err .kpi-value, .kpi-val-err .value { color: var(--kpi-err); }

.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }