@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* =========================================================================
   MAKON MOBILE — НОВЫЙ ДИЗАЙН / YANGI DIZAYN  ·  makon-skin.css
   -------------------------------------------------------------------------
   Как подключить (НЕ ломает программу):
     В public/index.html, СРАЗУ ПОСЛЕ строки с style.css, добавьте:
       <link rel="stylesheet" href="makon-skin.css">
     Файл кладётся в папку public/ рядом со style.css и app.js.

   Что делает: переопределяет цветовые переменные и визуальный слой
   (фон, карточки, кнопки, шрифты, тени, скругления) для тёмной и светлой
   тем. DOM, классы, разметку и логику app.js НЕ трогает.
   Тема переключается уже существующим механизмом (data-theme + Настройки).
   ========================================================================= */

/* ---------- 1. ПАЛИТРА · СВЕТЛАЯ (день) ---------- */
html, html[data-theme="light"], html:not([data-theme]) {
  /* поверхности */
  --bg:#EEF1F6;  --bg2:#F4F6FA;
  --card:#FFFFFF; --card2:#F4F6FA;
  --surface:#FFFFFF; --surf:#FFFFFF; --soft:#F4F6FA;
  --white:#FFFFFF;
  /* текст */
  --tx:#131720; --text:#131720; --tx2:#687283; --tx3:#9AA3B2;
  --mut:#9AA3B2; --muted:#9AA3B2;
  /* границы */
  --line:#E5E9F0; --line2:#DCE2EC; --bd:#E5E9F0; --bd2:#DCE2EC;
  --border:#E5E9F0; --border-strong:#C8D0DE;
  /* акценты — ЕДИНЫЙ ИЗУМРУДНЫЙ бренд (как у продавца) */
  --acc:#15A87C; --accent:#15A87C; --accs:rgba(21,168,124,.12);
  --blue:#4F7CFF; --blue-dark:#3A66E8; --purple:#9263FF; --teal:#15A87C; --green:#15A87C;
  /* статусы */
  --ok:#15A87C; --oks:rgba(21,168,124,.12);
  --warn:#D98A1F; --warns:rgba(217,138,31,.14);
  --dng:#E2474A; --dngs:rgba(226,71,74,.10);
  --err:#E2474A; --bad:#E2474A; --danger:#E2474A; --red:#E2474A; --yellow:#D98A1F;
  /* радиусы и тени */
  --r:18px; --r-sm:12px;
  --shadow:0 2px 10px rgba(16,24,40,.06);
  --shadow-lg:0 14px 36px rgba(16,24,40,.12);
}

/* ---------- 2. ПАЛИТРА · ТЁМНАЯ (ночь) ---------- */
html[data-theme="dark"] {
  --bg:#080B12; --bg2:#0B0F18;
  --card:#11161F; --card2:#1A2230;
  --surface:#11161F; --surf:#141A26; --soft:#141A26;
  --white:#FFFFFF;
  --tx:#EAEEF5; --text:#EAEEF5; --tx2:#8A93A6; --tx3:#5A6273;
  --mut:#7E8799; --muted:#7E8799;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.11);
  --bd:rgba(255,255,255,.07); --bd2:rgba(255,255,255,.11);
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.18);
  --acc:#2FD7A2; --accent:#2FD7A2; --accs:rgba(47,215,162,.16);
  --blue:#4F7CFF; --blue-dark:#3A66E8; --purple:#A882FF; --teal:#2FD7A2; --green:#2FD7A2;
  --ok:#2FD7A2; --oks:rgba(47,215,162,.15);
  --warn:#F0A23B; --warns:rgba(240,162,59,.15);
  --dng:#F25555; --dngs:rgba(242,85,85,.14);
  --err:#F25555; --bad:#F25555; --danger:#F25555; --red:#F25555; --yellow:#F0A23B;
  --r:18px; --r-sm:12px;
  --shadow:0 10px 30px rgba(0,0,0,.40);
  --shadow-lg:0 22px 54px rgba(0,0,0,.50);
}

/* ---------- 3. БАЗА ---------- */
body, .app, input, select, textarea, button {
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body { background:var(--bg); color:var(--tx); -webkit-font-smoothing:antialiased; }
/* крупные числа и моноширинные суммы — гротеск с табличными цифрами */
.bw-num, .bw-big, .cash-amount, .hero-amount, .stat-num, .kpi-num,
.shc-hero-num, .num, .money, .sum, .amount { font-feature-settings:'tnum'; }

/* ---------- 4. БОКОВОЕ МЕНЮ (sidebar) ---------- */
.sidebar { background:var(--bg2); border-right:1px solid var(--line); }
.side-brand { border-bottom:1px solid var(--line); }
.side-logo {
  background:linear-gradient(150deg,#2FD7A2,#15A87C); color:#06281E;
  border-radius:13px; font-weight:800; box-shadow:0 8px 22px rgba(21,168,124,.30);
}
.bn { color:var(--tx); font-weight:800; letter-spacing:-.01em; }
.bs { color:var(--tx3); font-weight:600; letter-spacing:.12em; }
.side-toggle { color:var(--tx2); background:var(--card); border:1px solid var(--line); border-radius:10px; }

.menu-item { color:var(--tx2); border-radius:13px; font-weight:600; transition:background .15s, color .15s; }
.menu-item .ic { opacity:.9; }
.menu-item:hover { background:var(--card); color:var(--tx); }
.menu-item.active {
  background:var(--accs); color:var(--acc);
  box-shadow:inset 0 0 0 1px rgba(21,168,124,.28);
}
.menu-item.active .ic { opacity:1; }
.sb-group-head { color:var(--tx3); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.sb-group-arrow { color:var(--tx3); }
.sb-divider-line { background:var(--line); }

.menu-badge { border-radius:20px; font-weight:700; font-size:11px; }
.menu-badge.red, .menu-badge.danger { background:var(--dng); color:#fff; }
.menu-badge.warning, .menu-badge.amber { background:var(--warn); color:#fff; }
.menu-badge.info, .menu-badge.blue { background:var(--blue); color:#fff; }
.menu-badge.success, .menu-badge.green { background:var(--ok); color:#06281E; }

.side-theme .islamic-toggle { border-radius:13px !important; background:var(--card) !important; border:1px solid var(--line) !important; color:var(--tx2); }
.islamic-tg-tx { color:var(--tx); font-weight:600; }
.side-user { border-top:1px solid var(--line); }
.avatar { background:linear-gradient(150deg,#2FD7A2,#15A87C); color:#06281E; font-weight:700; border-radius:12px; }
.un { color:var(--tx); font-weight:700; }
.ur { color:var(--tx3); }

/* ---------- 5. ВЕРХНЯЯ ПАНЕЛЬ (topbar) ---------- */
.topbar { background:var(--bg2); border-bottom:1px solid var(--line); }
.tt { color:var(--tx); font-weight:800; letter-spacing:-.01em; }
.burger { color:var(--tx2); background:var(--card); border:1px solid var(--line); border-radius:11px; }
.bell-btn, .logout-btn, .buf-order-btn, .ccy-toggle, .tg-warn-btn {
  background:var(--card) !important; border:1px solid var(--line) !important;
  border-radius:11px !important; color:var(--tx2) !important;
}
.bell-btn:hover, .logout-btn:hover, .buf-order-btn:hover { color:var(--tx) !important; }
.bell-badge, .tg-warn-dot { background:var(--dng); color:#fff; border-radius:20px; font-weight:700; }

/* ---------- 6. КОНТЕНТ И КАРТОЧКИ ---------- */
.content { background:var(--bg); }
.card {
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
}
.empty { color:var(--tx3); }
.pg-hd-t { color:var(--tx); font-weight:800; }
.pg-hd-s { color:var(--tx3); }

/* ---------- 7. КНОПКИ ---------- */
.btn {
  border-radius:13px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700;
  border:1px solid var(--line); background:var(--card); color:var(--tx);
  transition:transform .12s, box-shadow .12s, filter .12s;
}
.btn:hover { transform:translateY(-1px); }
.btn-primary, .btn.acc, .btn.primary {
  background:linear-gradient(135deg,#15B886,#0E7D5C); color:#fff; border:none;
  box-shadow:0 10px 24px rgba(21,168,124,.30);
}
.btn.ok, .btn-success {
  background:linear-gradient(135deg,#2FD7A2,#15A87C); color:#06281E; border:none;
  box-shadow:0 10px 24px rgba(21,168,124,.28);
}
.btn-danger, .btn.dng {
  background:var(--dngs); color:var(--dng); border:1px solid var(--dng);
}
.btn-ghost, .btn.ghost { background:transparent; color:var(--tx2); border:1px solid var(--line); }
.btn-sm, .btn.sm { border-radius:10px; font-size:13px; }

/* ---------- 8. ФОРМЫ ---------- */
input, select, textarea {
  background:var(--card); color:var(--tx);
  border:1px solid var(--line); border-radius:12px;
}
input::placeholder, textarea::placeholder { color:var(--tx3); }
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--acc); box-shadow:0 0 0 4px rgba(21,168,124,.14);
}

/* ---------- 9. БЕЙДЖИ / ЧИПЫ цветовые помощники ---------- */
.b-green, .ok-tag  { background:var(--oks);  color:var(--ok);  border-radius:20px; }
.b-blue,  .info-tag{ background:var(--accs); color:var(--blue);border-radius:20px; }
.b-red,   .danger-tag{ background:var(--dngs);color:var(--dng);border-radius:20px; }
.b-yellow,.amber-tag, .b-amber { background:var(--warns); color:var(--warn); border-radius:20px; }
.b-gray   { background:var(--card2); color:var(--tx2); border-radius:20px; }
.badge { border-radius:20px; font-weight:700; }

/* ---------- 10. ЭКРАН ВХОДА (login) ---------- */
.lg2 { background:var(--bg); }
.lg2-card {
  background:var(--card); border:1px solid var(--line);
  border-radius:24px; box-shadow:var(--shadow-lg);
}
.lg2-sub { color:var(--tx2); }
.lg2-welcome { color:var(--tx); font-weight:800; }
.lg2-field {
  background:var(--bg2); border:1px solid var(--line); border-radius:14px;
}
.lg2-field:focus-within { border-color:var(--acc); box-shadow:0 0 0 4px rgba(21,168,124,.14); }
.lg2-input { background:transparent; color:var(--tx); }
.lg2-input::placeholder { color:var(--tx3); }
.lg2-ico, .lg2-eye { color:var(--tx3); }
.lg2-btn {
  background:linear-gradient(135deg,#15B886,#0E7D5C); color:#fff; border:none;
  border-radius:14px; font-weight:700; box-shadow:0 12px 28px rgba(21,168,124,.32);
}
.lg2-foot { color:var(--tx3); }
.lg2-err { color:var(--dng); }
.lg2-theme { background:var(--card); border:1px solid var(--line); color:var(--tx2); border-radius:12px; }
.lg2-right, .lg2-info { background:linear-gradient(155deg,#15B886,#0E7D5C); }
.lg2-chip { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:14px; }
.lg2-chip-l { color:rgba(255,255,255,.75); }
.lg2-chip-v, .lg2-clock, .lg2-date, .lg2-quote-t { color:#fff; }
.lg2-clock { font-family:'Space Grotesk',sans-serif; }
.lg2-deco { opacity:.5; }

/* ---------- 11. ФУТЕР ---------- */
.iha-footer { display:flex; align-items:center; gap:10px; width:auto; box-sizing:border-box; justify-content:flex-start; background:var(--card); border:1px solid var(--line); border-radius:12px; color:var(--tx3); padding:7px 12px; margin:12px 12px 8px; }
.iha-footer-logo { width:30px; height:30px; border-radius:8px; background:linear-gradient(150deg,#2FD7A2,#15A87C); color:#06281E; font-weight:800; flex:none; }
.iha-footer-text { flex:1; min-width:0; }
.iha-footer-name { color:var(--tx2); font-weight:700; }
.iha-footer-ver { margin-left:auto; flex:none; background:var(--card2); color:var(--tx3); border-radius:20px; }
.sidebar.collapsed .iha-footer { justify-content:center; width:auto; margin:8px auto; padding:6px; }

/* ---------- 12. ОВЕРЛЕЙ / МОДАЛКИ (мягко, без смены раскладки) ---------- */
.overlay, .modal-bg, .modal-overlay { background:rgba(8,11,18,.55); backdrop-filter:blur(2px); }
.modal, .modal-card, .sheet, .dialog {
  background:var(--card); border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--shadow-lg); color:var(--tx);
}

/* ---------- 13. ЕДИНЫЙ ЧИСТЫЙ ВИД «КАК У БУХГАЛТЕРА» ----------
   Для ВСЕХ ролей, КРОМЕ директора (его сайдбар .dir-side не трогаем).
   Только визуальная полировка: сайдбар, карточки, заголовки, отступы. */
.sidebar:not(.dir-side){ background:var(--bg2); border-right:1px solid var(--line); }
.sidebar:not(.dir-side) .side-brand{ padding:16px 15px; }
.sidebar:not(.dir-side) .side-logo{ width:40px; height:40px; border-radius:12px; box-shadow:0 8px 20px rgba(21,168,124,.30); }
.sidebar:not(.dir-side) .menu-item{ padding:9px 11px; border-radius:11px; font-size:13.5px; font-weight:600; margin:1px 0; }
.sidebar:not(.dir-side) .menu-item .ic{ font-size:17px; }
.sidebar:not(.dir-side) .sb-group-head{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--tx3); margin:14px 11px 5px; }
.sidebar:not(.dir-side) .menu-badge{ border-radius:9px; font-size:10px; }

/* карточки/таблицы/кнопки — чуть чище и единообразнее (для всех) */
.card{ border-radius:16px; }
.card h2, .card h3{ letter-spacing:-.01em; }
.pg-hd{ border-radius:14px; }
.topbar .tt, .tt{ letter-spacing:-.01em; }
.btn{ letter-spacing:-.005em; }
/* таблицы: лёгкая шапка и ховер строки как в бухгалтерии */
table thead th{ background:var(--soft); color:var(--tx2); font-weight:700; }
table tbody tr:hover{ background:var(--accs); }
/* поля ввода: единый радиус */
input, select, textarea{ border-radius:11px; }

/* ---------- 14. ПОЛИРОВКА (косметика, без смены раскладки) ---------- */
/* аккуратные тонкие скроллбары — как в бухгалтерии */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:8px; border:2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover{ background:var(--tx3); }
*::-webkit-scrollbar-track{ background:transparent; }
/* пустые состояния, подсказки, заголовки — единый чистый вид */
.empty{ color:var(--tx3); text-align:center; padding:22px 14px; font-size:13px; }
.sub{ color:var(--tx2); font-size:12.5px; line-height:1.45; }
.page-title{ font-weight:800; letter-spacing:-.01em; }
.card h2{ font-size:16px; font-weight:800; letter-spacing:-.01em; }
.card h3{ font-size:14px; font-weight:700; }
.pill, .badge{ border-radius:20px; font-weight:700; }
.btn.sm, .btn-sm{ border-radius:10px; }
.field label, .lbl{ font-size:12px; color:var(--tx2); font-weight:600; }
hr{ border:none; border-top:1px solid var(--line); }
/* мягкое появление контента (без сдвигов раскладки) */
.card{ transition:box-shadow .15s, border-color .15s; }