/* =========================================================================
   Oboko Admin v3 skin — sits on top of DashLite (dashlite.css + theme.css).
   Palette and rules: 03_prototype/DESIGN.md §1–5, src/design/tokens.css.
   Deep green sidebar, warm paper page, white cards with a 1px line, Archivo.
   Orange is the one primary action per page; everything else is outline or
   dark green. 12px is the text floor, inputs are 16px, tap targets 44px.
   ========================================================================= */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations'), url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --ob-green-975: #071712;
  --ob-green-950: #0B211C;
  --ob-green-900: #102E27;
  --ob-green-850: #14382F;
  --ob-green-800: #163E35;
  --ob-green-700: #225A4D;
  --ob-green-600: #2F7563;
  --ob-green-300: #78C5A5;
  --ob-green-200: #B5E0CD;
  --ob-green-100: #DDEFE6;
  --ob-green-50: #EFF7F2;
  --ob-orange-700: #A8440E;
  --ob-orange-500: #D45D1A;
  --ob-orange-450: #DB6324;
  --ob-orange-400: #E8692A;
  --ob-orange-350: #F27C3C;
  --ob-orange-300: #FF8A4C;
  --ob-orange-100: #FCEBD0;
  --ob-ink-900: #0F1A17;
  --ob-ink-700: #2B3833;
  --ob-ink-600: #56635E;
  --ob-ink-500: #6E7B76;
  --ob-ink-300: #B9C2BE;
  --ob-ink-200: #D8DEDB;
  --ob-ink-100: #E9ECEA;
  --ob-ink-50: #F3F5F4;
  --ob-paper: #F6F3EE;
  --ob-paper-2: #EDE8E0;
  --ob-white: #FFFFFF;
  --ob-amber-700: #7A4F08;
  --ob-amber-400: #E0A526;
  --ob-amber-200: #F6D58C;
  --ob-amber-100: #FFF1D6;
  --ob-red-600: #B42318;
  --ob-red-100: #FDECEA;
  --ob-red-line: #F4C2BD;
  --ob-blue-700: #24577A;
  --ob-blue-200: #B9D4E6;
  --ob-blue-100: #E3EDF3;

  --ob-bg: var(--ob-paper);
  --ob-surface: var(--ob-white);
  --ob-surface-muted: var(--ob-ink-50);
  --ob-surface-tint: var(--ob-green-50);
  --ob-hover: rgba(22, 62, 53, .06);
  --ob-text: var(--ob-ink-900);
  --ob-text-soft: var(--ob-ink-700);
  --ob-text-muted: var(--ob-ink-600);
  --ob-link: var(--ob-green-700);
  --ob-line: var(--ob-ink-200);
  --ob-line-strong: var(--ob-ink-300);
  --ob-line-input: var(--ob-ink-500);
  --ob-focus: var(--ob-orange-500);
  --ob-action: var(--ob-orange-400);
  --ob-action-hover: var(--ob-orange-350);
  --ob-on-action: var(--ob-green-950);
  --ob-secondary: var(--ob-green-800);
  --ob-secondary-hover: var(--ob-green-700);
  --ob-sidebar: var(--ob-green-950);
  --ob-on-dark: #FFFFFF;
  --ob-on-dark-soft: #D3E2DB;
  --ob-on-dark-muted: #AFC4BA;

  --ob-font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ob-radius-s: 8px;
  --ob-radius-m: 12px;
  --ob-radius-l: 16px;
  --ob-tap: 44px;
  --ob-sidebar-w: 264px;
}

/* ---------- base ---------- */
html { font-size: 16px; }
body.nk-body,
.nk-body { background: var(--ob-bg) !important; color: var(--ob-text); font-family: var(--ob-font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body, .nk-body, .btn, .form-control, .table, .dropdown-menu, .badge, .dataTables_wrapper, .swal2-popup, .select2-container, .modal, .form-label { font-family: var(--ob-font) !important; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .title, .nk-block-title, .page-title, .card-title .title { font-family: var(--ob-font); color: var(--ob-text); font-stretch: 112%; font-weight: 700; letter-spacing: -.01em; }
a { color: var(--ob-link); }
a:hover { color: var(--ob-green-800); text-decoration: underline; }
.text-soft, .text-muted, .sub-text, .form-note, .nk-block-des, .nk-block-des p { color: var(--ob-text-muted) !important; }
.text-primary, .text-primary-alt { color: var(--ob-green-700) !important; }
.text-success { color: var(--ob-green-600) !important; }
.text-warning { color: var(--ob-amber-700) !important; }
.text-danger { color: var(--ob-red-600) !important; }
.text-info { color: var(--ob-blue-700) !important; }
.ob-num, .ob-table td.ob-num, .amount, .data-value, .ob-kpi-value { font-variant-numeric: tabular-nums; }
code { color: var(--ob-green-800); background: var(--ob-surface-muted); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
small, .small { font-size: 13px; }
*:focus-visible { outline: 3px solid var(--ob-focus); outline-offset: 2px; }
a:focus-visible, button:focus-visible, .btn:focus-visible, .nk-menu-link:focus-visible, .page-link:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ob-focus) !important; outline-offset: 2px; box-shadow: none !important; }

/* ---------- sidebar ---------- */
.nk-sidebar, .nk-sidebar.is-dark { background: var(--ob-sidebar) !important; border-right: 0 !important; width: var(--ob-sidebar-w); color: var(--ob-on-dark-soft); }
@media (min-width: 1200px) {
  .nk-sidebar + .nk-wrap, .nk-sidebar-overlay + .nk-wrap { padding-left: var(--ob-sidebar-w); }
  .nk-sidebar + .nk-wrap > .nk-header-fixed, .nk-sidebar-overlay + .nk-wrap > .nk-header-fixed { left: var(--ob-sidebar-w); }
}
.nk-sidebar .nk-sidebar-head { border-bottom: 1px solid rgba(255,255,255,.1); padding: 0 20px; height: 68px; }
.nk-sidebar .nk-sidebar-brand { align-items: center; display: flex; gap: 10px; }
.ob-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.ob-brand:hover { color: #fff; text-decoration: none; }
.ob-brand img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; background: #fff; padding: 3px; }
.ob-brand strong { font-size: 17px; font-stretch: 112%; font-weight: 700; letter-spacing: -.01em; display: block; line-height: 1.1; }
.ob-brand span { display: block; font-size: 12px; color: var(--ob-on-dark-muted); letter-spacing: .04em; text-transform: uppercase; }
.nk-sidebar .nk-menu-trigger .nk-nav-toggle { color: var(--ob-on-dark-soft); }
.nk-sidebar .nk-menu { padding: 10px 0 24px; }
.nk-sidebar .nk-menu-heading { padding: 18px 20px 6px; }
.nk-sidebar .nk-menu-heading .overline-title { color: var(--ob-on-dark-muted) !important; font-size: 12px; letter-spacing: .08em; font-weight: 600; text-transform: uppercase; }
.nk-sidebar .nk-menu-item { padding: 0; }
.nk-sidebar .nk-menu-link { min-height: var(--ob-tap); padding: 10px 14px; margin: 1px 10px; border-radius: 9px; color: var(--ob-on-dark-soft) !important; font-size: 15px; font-weight: 500; transition: background .15s ease, color .15s ease; }
.nk-sidebar .nk-menu-link:hover { background: rgba(255,255,255,.07); color: #fff !important; text-decoration: none; }
.nk-sidebar .nk-menu-item.active > .nk-menu-link, .nk-sidebar .nk-menu-link.active { background: rgba(255,255,255,.12); color: #fff !important; box-shadow: inset 3px 0 0 var(--ob-orange-400); }
.nk-sidebar .nk-menu-icon { color: inherit !important; width: 28px; font-size: 20px; }
.nk-sidebar .nk-menu-icon .icon { color: var(--ob-green-300); }
.nk-sidebar .nk-menu-item.active .nk-menu-icon .icon { color: #fff; }
.nk-sidebar .nk-menu-text { color: inherit; }
.nk-sidebar .nk-menu-badge { background: var(--ob-orange-400); color: var(--ob-green-950); font-weight: 700; font-size: 12px; border-radius: 999px; padding: 1px 7px; margin-left: auto; }
.ob-sidebar-foot { padding: 14px 20px 20px; border-top: 1px solid rgba(255,255,255,.1); color: var(--ob-on-dark-muted); font-size: 12px; }
.ob-sidebar-foot a { color: var(--ob-on-dark-soft); }
.nk-sidebar-overlay { background: rgba(7, 23, 18, .55); }

/* ---------- top bar ---------- */
.nk-header, .nk-header.is-light { background: var(--ob-surface) !important; border-bottom: 1px solid var(--ob-line) !important; box-shadow: none; }
.nk-header-wrap { min-height: 68px; gap: 10px; }
.nk-header .nk-nav-toggle, .nk-header .nk-quick-nav-icon { min-width: var(--ob-tap); min-height: var(--ob-tap); display: inline-flex; align-items: center; justify-content: center; color: var(--ob-text); font-size: 22px; }
.ob-env { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--ob-amber-200); background: var(--ob-amber-100); color: var(--ob-amber-700); white-space: nowrap; }
.ob-env.is-production { border-color: var(--ob-green-200); background: var(--ob-green-100); color: var(--ob-green-700); }
.ob-search { position: relative; flex: 1 1 auto; max-width: 520px; }
.ob-search .ob-search-input { width: 100%; height: var(--ob-tap); border: 1px solid var(--ob-line-input); border-radius: 10px; padding: 0 44px 0 42px; font-size: 16px; background: var(--ob-surface); color: var(--ob-text); }
.ob-search .ob-search-input::placeholder { color: var(--ob-ink-500); }
.ob-search .ob-search-input:focus { border-color: var(--ob-green-700); box-shadow: 0 0 0 3px rgba(34,90,77,.15); outline: none; }
.ob-search .ob-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ob-ink-500); font-size: 20px; pointer-events: none; }
.ob-search .ob-search-key { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ob-ink-500); border: 1px solid var(--ob-line); border-radius: 5px; padding: 0 6px; line-height: 20px; pointer-events: none; }
.ob-search-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--ob-surface); border: 1px solid var(--ob-line-strong); border-radius: 12px; box-shadow: 0 16px 40px rgba(15,26,23,.18); z-index: 1100; max-height: 70vh; overflow: auto; display: none; padding: 6px; }
.ob-search-results.is-open { display: block; }
.ob-search-group { padding: 8px 10px 2px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ob-text-muted); font-weight: 600; }
.ob-search-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px; border-radius: 8px; color: var(--ob-text); text-decoration: none; min-height: var(--ob-tap); }
.ob-search-item:hover, .ob-search-item.is-active { background: var(--ob-surface-tint); color: var(--ob-text); text-decoration: none; }
.ob-search-item strong { font-weight: 600; display: block; }
.ob-search-item span { font-size: 13px; color: var(--ob-text-muted); display: block; }
.ob-search-item .badge { flex: none; }
.ob-search-empty { padding: 14px 12px; color: var(--ob-text-muted); font-size: 14px; }
.nk-header .user-toggle { gap: 10px; }
.nk-header .user-avatar { background: var(--ob-green-100); color: var(--ob-green-800); font-weight: 700; }
.nk-header .user-name { color: var(--ob-text); font-weight: 600; font-size: 14px; }
.nk-header .user-status { color: var(--ob-text-muted); font-size: 12px; }
.dropdown-menu { border: 1px solid var(--ob-line-strong); border-radius: 12px; box-shadow: 0 12px 32px rgba(15,26,23,.14); }
.dropdown-menu .link-list a, .dropdown-menu .link-list-plain a, .dropdown-menu .link-check a { color: var(--ob-text); min-height: 40px; display: flex; align-items: center; font-size: 14px; }
.dropdown-menu .link-list a:hover, .dropdown-menu .link-list-plain a:hover { color: var(--ob-green-800); background: var(--ob-surface-tint); text-decoration: none; }
.dropdown-menu .link-check li.active a { color: var(--ob-green-800); font-weight: 600; }
.user-card-wrap.bg-lighter { background: var(--ob-surface-muted) !important; }

/* ---------- content, cards ---------- */
.nk-content { padding: 24px 0 32px; }
.nk-content > .container-fluid { padding-left: 24px; padding-right: 24px; }
.nk-block-head-sm { padding-bottom: 20px; }
.card, .card-bordered, .card-preview { border: 1px solid var(--ob-line) !important; border-radius: var(--ob-radius-m) !important; background: var(--ob-surface); box-shadow: none !important; }
.card-inner { padding: 20px; }
.card-inner-group .card-inner { border-color: var(--ob-line); }
.card-inner.border-bottom { border-bottom: 1px solid var(--ob-line) !important; }
.card-head .card-title, .card-title .title { font-size: 17px; }
.alert { border-radius: 10px; border: 1px solid; font-size: 14px; }
.alert-success { background: var(--ob-green-100); border-color: var(--ob-green-200); color: var(--ob-green-700); }
.alert-warning { background: var(--ob-amber-100); border-color: var(--ob-amber-200); color: var(--ob-amber-700); }
.alert-danger { background: var(--ob-red-100); border-color: var(--ob-red-line); color: var(--ob-red-600); }
.alert-info { background: var(--ob-blue-100); border-color: var(--ob-blue-200); color: var(--ob-blue-700); }
hr { border-color: var(--ob-line); }
.border, .border-bottom, .border-top { border-color: var(--ob-line) !important; }
.bg-lighter, .bg-light { background: var(--ob-surface-muted) !important; }
.nk-footer { background: transparent; border-top: 1px solid var(--ob-line); }
.nk-footer-copyright, .nk-footer .nav-link { color: var(--ob-text-muted); font-size: 13px; }

/* ---------- page header pattern ---------- */
.ob-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
.ob-page-head .ob-page-text { min-width: 0; flex: 1 1 320px; }
.ob-back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ob-text-muted); margin-bottom: 6px; min-height: 28px; }
.ob-back:hover { color: var(--ob-green-800); }
.ob-title { font-size: 26px; line-height: 1.15; margin: 0; font-stretch: 112%; font-weight: 700; color: var(--ob-text); }
.ob-title small, .ob-title .ob-title-id { font-size: 15px; color: var(--ob-text-muted); font-weight: 500; font-stretch: 100%; margin-left: 8px; }
.ob-lede { margin: 6px 0 0; color: var(--ob-text-muted); font-size: 15px; max-width: 72ch; }
.ob-lede a { color: var(--ob-link); }
.ob-page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.ob-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.ob-section-head h2, .ob-section-head h3, .ob-section-head h5 { font-size: 17px; margin: 0; }
.ob-section-head p { margin: 2px 0 0; color: var(--ob-text-muted); font-size: 14px; }

/* ---------- buttons ---------- */
.btn { border-radius: 10px; font-weight: 600; font-size: 15px; min-height: var(--ob-tap); padding: 8px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.25; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.btn .icon { font-size: 18px; }
.btn-sm, .btn-group-sm > .btn { min-height: 36px; padding: 4px 12px; font-size: 14px; border-radius: 8px; }
.btn-xs { min-height: 30px; padding: 2px 10px; font-size: 13px; border-radius: 7px; }
.btn-lg { min-height: 48px; font-size: 16px; padding: 10px 20px; }
.btn:hover { text-decoration: none; }
.btn-primary, .btn-primary:not(:disabled):not(.disabled) { background: var(--ob-action) !important; border-color: var(--ob-action) !important; color: var(--ob-on-action) !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active { background: var(--ob-action-hover) !important; border-color: var(--ob-action-hover) !important; color: var(--ob-on-action) !important; }
.btn-secondary, .btn-info, .btn-success, .btn-dark, .btn-dim.btn-primary, .btn-gray { background: var(--ob-secondary) !important; border-color: var(--ob-secondary) !important; color: #fff !important; }
.btn-secondary:hover, .btn-info:hover, .btn-success:hover, .btn-dark:hover { background: var(--ob-secondary-hover) !important; border-color: var(--ob-secondary-hover) !important; color: #fff !important; }
.btn-danger, .btn-warning { background: var(--ob-surface) !important; border-color: var(--ob-red-600) !important; color: var(--ob-red-600) !important; }
.btn-danger:hover, .btn-warning:hover { background: var(--ob-red-100) !important; color: var(--ob-red-600) !important; }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-info, .btn-outline-success, .btn-outline-light, .btn-outline-dark, .btn-light, .btn-white, .btn-trigger, .btn-dim { background: var(--ob-surface) !important; border: 1px solid var(--ob-line-input) !important; color: var(--ob-green-800) !important; }
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-info:hover, .btn-outline-success:hover, .btn-outline-light:hover, .btn-outline-dark:hover, .btn-light:hover, .btn-white:hover, .btn-dim:hover { background: var(--ob-surface-tint) !important; border-color: var(--ob-green-700) !important; color: var(--ob-green-800) !important; }
.btn-outline-danger, .btn-outline-warning { background: var(--ob-surface) !important; border: 1px solid var(--ob-red-600) !important; color: var(--ob-red-600) !important; }
.btn-outline-danger:hover, .btn-outline-warning:hover { background: var(--ob-red-100) !important; color: var(--ob-red-600) !important; }
.btn-icon { min-width: var(--ob-tap); padding-left: 0; padding-right: 0; }
.btn-icon.btn-sm { min-width: 36px; }
.btn-trigger { border-color: transparent !important; background: transparent !important; }
.btn-trigger:hover { background: var(--ob-hover) !important; }
.btn-block { width: 100%; }
.ob-btn-quiet, .btn-link { color: var(--ob-link); background: transparent; border: 0; }
.ob-actions-stack { display: flex; flex-direction: column; gap: 8px; }
.ob-actions-stack .btn { width: 100%; justify-content: flex-start; text-align: left; }
.ob-actions-stack .btn .icon { margin-right: 4px; }

/* ---------- badges / status ---------- */
.badge { border-radius: 999px; font-weight: 600; font-size: 12px; padding: 3px 9px; line-height: 1.4; border: 1px solid transparent; letter-spacing: 0; text-transform: none; }
.badge.badge-dot { padding-left: 0; }
.badge.badge-dot::before { display: none; }
.badge.badge-dot { padding: 3px 9px; }
.badge-success, .badge-outline-success, .badge-dim.badge-success, .badge-dim.badge-outline-success, .badge-dot.badge-success, .badge-dot.badge-outline-success { background: var(--ob-green-100) !important; color: var(--ob-green-700) !important; border-color: var(--ob-green-200) !important; }
.badge-warning, .badge-outline-warning, .badge-dim.badge-warning, .badge-dim.badge-outline-warning, .badge-dot.badge-warning, .badge-dot.badge-outline-warning { background: var(--ob-amber-100) !important; color: var(--ob-amber-700) !important; border-color: var(--ob-amber-200) !important; }
.badge-danger, .badge-outline-danger, .badge-dim.badge-danger, .badge-dim.badge-outline-danger, .badge-dot.badge-danger, .badge-dot.badge-outline-danger { background: var(--ob-red-100) !important; color: var(--ob-red-600) !important; border-color: var(--ob-red-line) !important; }
.badge-info, .badge-outline-info, .badge-primary, .badge-outline-primary, .badge-dim.badge-info, .badge-dim.badge-outline-info, .badge-dot.badge-info, .badge-dot.badge-outline-info, .badge-dot.badge-primary { background: var(--ob-blue-100) !important; color: var(--ob-blue-700) !important; border-color: var(--ob-blue-200) !important; }
.badge-secondary, .badge-outline-secondary, .badge-light, .badge-outline-light, .badge-gray, .badge-dim.badge-secondary, .badge-dot.badge-secondary, .badge-dark, .badge-outline-dark { background: var(--ob-ink-100) !important; color: var(--ob-ink-700) !important; border-color: var(--ob-ink-200) !important; }
.ob-badge { display: inline-flex; align-items: center; border-radius: 999px; font-weight: 600; font-size: 12px; padding: 3px 9px; line-height: 1.4; border: 1px solid transparent; white-space: nowrap; }
.ob-badge.is-positive { background: var(--ob-green-100); color: var(--ob-green-700); border-color: var(--ob-green-200); }
.ob-badge.is-warning { background: var(--ob-amber-100); color: var(--ob-amber-700); border-color: var(--ob-amber-200); }
.ob-badge.is-negative { background: var(--ob-red-100); color: var(--ob-red-600); border-color: var(--ob-red-line); }
.ob-badge.is-info { background: var(--ob-blue-100); color: var(--ob-blue-700); border-color: var(--ob-blue-200); }
.ob-badge.is-neutral { background: var(--ob-ink-100); color: var(--ob-ink-700); border-color: var(--ob-ink-200); }

/* ---------- filters ---------- */
.ob-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 20px; border-bottom: 1px solid var(--ob-line); }
.ob-filters .ob-filter-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.ob-filters .ob-filter-search input { width: 100%; height: var(--ob-tap); padding-left: 40px; }
.ob-filters .ob-filter-search .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ob-ink-500); font-size: 18px; pointer-events: none; }
.ob-filters select.form-control, .ob-filters input[type="date"] { width: auto; min-width: 150px; height: var(--ob-tap); }
.ob-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--ob-line-input); background: var(--ob-surface); color: var(--ob-green-800); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.ob-chip:hover { background: var(--ob-surface-tint); text-decoration: none; color: var(--ob-green-800); }
.ob-chip.is-active { background: var(--ob-green-800); border-color: var(--ob-green-800); color: #fff; }
.ob-chip .ob-chip-count { margin-left: 6px; font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; }
.ob-filter-reset { color: var(--ob-text-muted); font-size: 14px; min-height: 36px; display: inline-flex; align-items: center; padding: 0 6px; }
.ob-filter-reset:hover { color: var(--ob-green-800); }
.ob-filter-summary { padding: 10px 20px; font-size: 14px; color: var(--ob-text-muted); border-bottom: 1px solid var(--ob-line); background: var(--ob-surface-muted); }
.ob-filter-summary strong { color: var(--ob-text); font-weight: 600; }

/* ---------- tables ---------- */
.ob-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { color: var(--ob-text); margin-bottom: 0; }
.table thead th, .table .tb-tnx-head th, .table th { color: var(--ob-text-muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; background: var(--ob-surface-muted); border-top: 0; border-bottom: 1px solid var(--ob-line); padding: 10px 16px; white-space: nowrap; }
.table td, .table tbody th { padding: 12px 16px; vertical-align: middle; border-top: 1px solid var(--ob-line); font-size: 14px; }
.table tbody tr:first-child td { border-top: 0; }
.table-tranx .tb-tnx-item td, .table-tranx .tb-tnx-head th { padding: 12px 16px; }
.table-tranx .tb-tnx-item .title, .table-tranx .tb-tnx-item .date, .table-tranx .tb-tnx-item .amount { font-size: 14px; color: var(--ob-text); }
.table-tranx .tb-tnx-item .date { color: var(--ob-text-muted); }
.table tbody tr:hover, .table-hover tbody tr:hover { background: var(--ob-hover); }
.table tr[data-href], .ob-rowlink tbody tr { cursor: pointer; }
.table td a { color: var(--ob-link); font-weight: 500; }
.table td.ob-muted, .table .text-soft { color: var(--ob-text-muted); }
.table .ob-cell-title { font-weight: 600; color: var(--ob-text); }
.table .ob-cell-sub { font-size: 13px; color: var(--ob-text-muted); margin-top: 2px; }
.table td.text-right, .table th.text-right { text-align: right; }
/* Optional columns on wide lists: hidden until "More columns" is pressed (the CSV export is unaffected). */
.table .ob-col-more { display: none; }
.table.is-all-cols .ob-col-more { display: table-cell; }
.ob-table-tools { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 10px; }
.table-sm td, .table-sm th { padding: 8px 12px; }
.ob-empty { padding: 44px 20px; text-align: center; color: var(--ob-text-muted); font-size: 15px; }
.ob-empty strong { display: block; color: var(--ob-text); font-size: 16px; margin-bottom: 4px; }
.ob-list-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--ob-line); font-size: 14px; color: var(--ob-text-muted); }
.pagination { margin: 0; gap: 4px; }
.page-link { border: 1px solid var(--ob-line-input); border-radius: 8px !important; color: var(--ob-green-800); min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; font-weight: 500; }
.page-link:hover { background: var(--ob-surface-tint); color: var(--ob-green-800); border-color: var(--ob-green-700); }
.page-item.disabled .page-link { color: var(--ob-text-muted); background: var(--ob-surface-muted); border-color: var(--ob-line); }
.page-item.active .page-link { background: var(--ob-green-800); border-color: var(--ob-green-800); color: #fff; }

/* DataTables (server-side lists) */
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { height: var(--ob-tap); font-size: 16px; border: 1px solid var(--ob-line-input); border-radius: 10px; padding: 0 12px; }
.dataTables_wrapper .dataTables_filter input { min-width: 240px; }
.dataTables_wrapper .form-control-select::after { display: none; }
.dataTables_wrapper .dataTables_info { color: var(--ob-text-muted); font-size: 14px; }
.dataTables_wrapper .dataTables_processing { background: var(--ob-surface); color: var(--ob-text-muted); border: 1px solid var(--ob-line); border-radius: 10px; }
.dataTables_wrapper .datatable-wrap { border: 1px solid var(--ob-line); border-radius: 10px; overflow: hidden; }
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after { color: var(--ob-ink-500); }
table.dataTable.nowrap th, table.dataTable.nowrap td { white-space: nowrap; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before { background: var(--ob-green-800); border-color: var(--ob-green-800); }
table.dataTable > tbody > tr.child ul.dtr-details > li { border-color: var(--ob-line); }
.dataTables_wrapper .pagination .page-link { min-width: 36px; min-height: 36px; }

/* ---------- forms ---------- */
.form-label { color: var(--ob-text); font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.form-control, .custom-select, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .form-control-lg, .form-control-sm { font-size: 16px !important; min-height: var(--ob-tap); border: 1px solid var(--ob-line-input) !important; border-radius: 10px !important; color: var(--ob-text); background: var(--ob-surface); padding: 8px 12px; }
.form-control-sm { min-height: 40px; }
.form-control::placeholder { color: var(--ob-ink-500); }
.form-control:focus, .custom-select:focus { border-color: var(--ob-green-700) !important; box-shadow: 0 0 0 3px rgba(34,90,77,.15) !important; }
.form-control:disabled, .form-control[readonly] { background: var(--ob-surface-muted); color: var(--ob-text-soft); }
textarea.form-control { min-height: 120px; line-height: 1.5; }
select.form-control { padding-right: 36px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2356635E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; -webkit-appearance: none; appearance: none; }
select.form-control[multiple] { background-image: none; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 28px; color: var(--ob-text); padding-left: 0; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.form-note, .ob-help, .form-text { color: var(--ob-text-muted) !important; font-size: 13px; margin-top: 4px; line-height: 1.45; }
.form-group { margin-bottom: 18px; }
.custom-control-label { font-size: 15px; color: var(--ob-text); padding-top: 2px; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--ob-green-800); border-color: var(--ob-green-800); }
.custom-control-label::before { border-color: var(--ob-line-input); width: 20px; height: 20px; }
.custom-control-label::after { width: 20px; height: 20px; }
.custom-switch .custom-control-label::before { width: 40px; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(20px); }
.ob-form-section { background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: var(--ob-radius-m); padding: 20px; margin-bottom: 16px; }
.ob-form-section > h2, .ob-form-section > h5 { font-size: 17px; margin: 0 0 2px; }
.ob-form-section > p { color: var(--ob-text-muted); font-size: 14px; margin: 0 0 16px; }
.ob-form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 20px; padding: 12px 0; border-top: 1px solid var(--ob-line); }
.ob-form-row:first-of-type { border-top: 0; }
.ob-form-row .ob-form-label { font-weight: 600; font-size: 14px; color: var(--ob-text); }
.ob-form-row .ob-form-label small { display: block; font-weight: 400; color: var(--ob-text-muted); font-size: 13px; margin-top: 2px; }
.ob-form-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; padding: 8px 0 24px; }
.ob-form-foot .ob-form-foot-note { margin-right: auto; color: var(--ob-text-muted); font-size: 13px; }
@media (min-width: 760px) { .ob-form-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } }
.ob-note { border-left: 3px solid var(--ob-green-700); background: var(--ob-green-50); padding: 12px 14px; border-radius: 0 10px 10px 0; font-size: 14px; color: var(--ob-green-800); }
.ob-note.is-warning { border-color: var(--ob-amber-400); background: var(--ob-amber-100); color: var(--ob-amber-700); }
.ob-note.is-danger { border-color: var(--ob-red-600); background: var(--ob-red-100); color: var(--ob-red-600); }

/* ---------- dashboard ---------- */
.ob-attention { background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: var(--ob-radius-m); margin-bottom: 20px; }
.ob-attention-head { padding: 16px 20px 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ob-attention-head h2 { font-size: 17px; margin: 0; }
.ob-attention-head span { font-size: 13px; color: var(--ob-text-muted); }
.ob-attention-list { list-style: none; margin: 0; padding: 6px 10px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.ob-attention-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--ob-text); text-decoration: none; min-height: 56px; border: 1px solid transparent; }
.ob-attention-item:hover { background: var(--ob-surface-tint); text-decoration: none; color: var(--ob-text); border-color: var(--ob-green-200); }
.ob-attention-item .ob-count { flex: none; min-width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; font-stretch: 112%; font-variant-numeric: tabular-nums; background: var(--ob-amber-100); color: var(--ob-amber-700); padding: 0 8px; }
.ob-attention-item.is-zero .ob-count { background: var(--ob-ink-100); color: var(--ob-text-muted); }
.ob-attention-item.is-zero { color: var(--ob-text-muted); }
.ob-attention-item.is-zero .ob-attention-text strong { color: var(--ob-text-muted); font-weight: 500; }
.ob-attention-item.is-zero:hover { border-color: var(--ob-line); color: var(--ob-text-muted); }
.ob-attention-item .ob-attention-text strong { display: block; font-size: 15px; font-weight: 600; }
.ob-attention-item .ob-attention-text span { display: block; font-size: 13px; color: var(--ob-text-muted); }
.ob-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.ob-kpi { background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: var(--ob-radius-m); padding: 18px 20px; min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.ob-kpi-label { font-size: 14px; color: var(--ob-text-muted); font-weight: 500; }
.ob-kpi-value { font-size: 30px; font-weight: 700; font-stretch: 112%; line-height: 1.1; color: var(--ob-text); letter-spacing: -.02em; }
.ob-kpi-meta { font-size: 13px; color: var(--ob-text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ob-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ob-delta.is-up { color: var(--ob-green-700); }
.ob-delta.is-down { color: var(--ob-red-600); }
.ob-delta.is-flat { color: var(--ob-text-muted); }
.ob-grid-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }
@media (max-width: 1199.98px) { .ob-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ob-grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 479.98px) { .ob-kpis { grid-template-columns: 1fr; } }

/* ---------- detail pages ---------- */
.ob-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1080px) { .ob-detail { grid-template-columns: minmax(0, 1fr) 320px; } .ob-detail-side { position: sticky; top: 84px; } }
.ob-detail-main, .ob-detail-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ob-card { background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: var(--ob-radius-m); }
.ob-card-head { padding: 14px 20px; border-bottom: 1px solid var(--ob-line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ob-card-head h2, .ob-card-head h3 { font-size: 16px; margin: 0; }
.ob-card-head span, .ob-card-head p { font-size: 13px; color: var(--ob-text-muted); margin: 0; }
.ob-card-body { padding: 16px 20px; }
.ob-facts { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.ob-facts > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--ob-line); font-size: 14px; }
.ob-facts > div:first-child { border-top: 0; }
.ob-facts dt { color: var(--ob-text-muted); font-weight: 500; }
.ob-facts dd { margin: 0; color: var(--ob-text); word-break: break-word; }
.ob-facts dd.ob-num { font-variant-numeric: tabular-nums; }
.ob-facts.is-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
@media (max-width: 759.98px) { .ob-facts > div { grid-template-columns: 1fr; gap: 2px; } .ob-facts.is-2col { grid-template-columns: 1fr; } }
.data-list .data-item { padding: 10px 20px; border-color: var(--ob-line); }
.data-list .data-label { color: var(--ob-text-muted); font-size: 14px; width: 150px; flex: 0 0 150px; }
.data-list .data-value { color: var(--ob-text); font-size: 14px; }
.data-list.is-compact .data-item { padding: 10px 20px; }
.ob-card > .nk-data.data-list { margin: 0; padding: 0; }
.ob-card > .nk-data.data-list .data-item:first-child { border-top: 0; }
.ob-history { list-style: none; margin: 0; padding: 0; }
.ob-history li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--ob-line); font-size: 14px; }
.ob-history li:first-child { border-top: 0; }
.ob-history time { color: var(--ob-text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 759.98px) { .ob-history li { grid-template-columns: 1fr; gap: 2px; } }
.ob-avatar { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--ob-orange-100); color: var(--ob-orange-700); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; }
.ob-photo { border-radius: 10px; object-fit: cover; background: var(--ob-surface-muted); }
.ob-hero-photo { width: 100%; max-height: 320px; object-fit: cover; border-radius: 10px; display: block; }
.ob-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ob-stat { padding: 12px 14px; border: 1px solid var(--ob-line); border-radius: 10px; background: var(--ob-surface); }
.ob-stat .ob-stat-label { font-size: 13px; color: var(--ob-text-muted); }
.ob-stat .ob-stat-value { font-size: 20px; font-weight: 700; font-stretch: 112%; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ---------- modals, dialogs ---------- */
.modal-content { border: 1px solid var(--ob-line-strong); border-radius: var(--ob-radius-l); box-shadow: 0 24px 60px rgba(15,26,23,.22); }
.modal-body .title, .modal-title { font-size: 20px; }
.modal .close { color: var(--ob-text-muted); }
.swal2-popup { border-radius: var(--ob-radius-l) !important; padding: 24px !important; }
.swal2-title { color: var(--ob-text) !important; font-stretch: 112%; font-size: 22px !important; }
.swal2-html-container, .swal2-content { color: var(--ob-text-soft) !important; font-size: 15px !important; }
.swal2-styled.swal2-confirm { background: var(--ob-action) !important; color: var(--ob-on-action) !important; border-radius: 10px !important; font-weight: 600 !important; min-height: var(--ob-tap); box-shadow: none !important; }
.swal2-styled.swal2-cancel { background: var(--ob-surface) !important; color: var(--ob-green-800) !important; border: 1px solid var(--ob-line-input) !important; border-radius: 10px !important; font-weight: 600 !important; min-height: var(--ob-tap); }
.swal2-popup.ob-swal-danger .swal2-styled.swal2-confirm { background: var(--ob-red-600) !important; color: #fff !important; }
.swal2-icon.swal2-warning { border-color: var(--ob-amber-400) !important; color: var(--ob-amber-700) !important; }
.swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--ob-green-600) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--ob-green-200) !important; }
.toastr, #toast-container > div { border-radius: 10px; }

/* ---------- login ---------- */
.ob-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ob-bg); padding: 24px 16px; }
.ob-auth-card { width: 100%; max-width: 420px; background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: var(--ob-radius-l); padding: 32px 28px; }
.ob-auth-card .ob-brand { color: var(--ob-text); margin-bottom: 24px; }
.ob-auth-card .ob-brand span { color: var(--ob-text-muted); }
.ob-auth-card h1 { font-size: 24px; margin: 0 0 4px; }
.ob-auth-card .ob-lede { margin-bottom: 20px; }
.ob-auth-foot { text-align: center; margin-top: 20px; color: var(--ob-text-muted); font-size: 13px; }

/* ---------- error / no-permission ---------- */
.ob-error { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 16px; }
.ob-error h1 { font-size: 26px; margin: 12px 0 6px; }
.ob-error p { color: var(--ob-text-muted); max-width: 48ch; margin: 0 auto 20px; }
.ob-error .icon { font-size: 44px; color: var(--ob-green-700); }

/* ---------- analytics pages (DashLite widgets) ---------- */
.analytic-ov-data .amount, .nk-order-ovwg-data .amount, .card .amount { color: var(--ob-text); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.analytic-data .title, .nk-order-ovwg-data .title { color: var(--ob-text-muted); }
.nav-tabs .nav-link { color: var(--ob-text-muted); font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--ob-green-800); border-bottom-color: var(--ob-orange-400); }
.oboko-health { display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:999px; background:var(--ob-green-100); color:var(--ob-green-700); font-size:12px; font-weight:700; }
.oboko-health.warn { background:var(--ob-amber-100); color:var(--ob-amber-700); }
.oboko-health.bad { background:var(--ob-red-100); color:var(--ob-red-600); }
.oboko-settings-section { border:1px solid var(--ob-line); border-radius:var(--ob-radius-m); padding:20px; margin-bottom:16px; background:var(--ob-surface); }
.oboko-settings-section h5 { margin-bottom:2px; font-size:17px; }
.oboko-settings-section > p { color:var(--ob-text-muted); font-size:14px; margin-bottom:16px; }
.oboko-security-note { border-left:3px solid var(--ob-green-700); background:var(--ob-green-50); padding:12px 14px; border-radius:0 10px 10px 0; font-size:14px; color:var(--ob-green-800); }
.oboko-page-kicker { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
  .nk-sidebar { width: var(--ob-sidebar-w); }
}
@media (max-width: 767.98px) {
  .nk-content { padding: 16px 0 24px; }
  .nk-content > .container-fluid { padding-left: 16px; padding-right: 16px; }
  .card-inner { padding: 16px; }
  .ob-title { font-size: 22px; }
  .ob-page-actions { width: 100%; justify-content: flex-start; }
  .ob-page-actions .btn { flex: 1 1 auto; }
  .ob-filters { padding: 12px 16px; }
  .ob-filters .ob-filter-search { max-width: none; flex-basis: 100%; }
  .ob-filters select.form-control { flex: 1 1 140px; }
  .table td, .table th { padding: 10px 12px; }
  .ob-card-body, .ob-card-head { padding-left: 16px; padding-right: 16px; }
  .ob-search { max-width: none; }
  .ob-search .ob-search-key { display: none; }
  .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
  .nk-header .user-info { display: none !important; }
}
@media (max-width: 575.98px) {
  .ob-search { display: none; }
  .ob-search.is-mobile-open { display: block; position: absolute; left: 12px; right: 12px; top: 10px; z-index: 1050; }
  .nk-header-wrap { position: relative; }
}
.ob-print-only { display: none; }

/* ---------- form pages ---------- */
.ob-form-wrap { max-width: 860px; }
.ob-form-wrap .form-control-wrap + .ob-help { margin-top: 6px; }
.ob-form-wrap .nk-wizard-head h5, .ob-form-wrap .mt-5.mb-1 h5 { font-size: 17px; margin-bottom: 12px; }
.ob-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; }
.ob-perm-grid .custom-control { min-height: 36px; display: flex; align-items: center; }
.ob-perm-grid .custom-control-label { font-size: 14px; }
.ob-form-wrap .featured-points .row { margin-bottom: 8px; }