:root {
  --bg: #f0f2f5;
  --sidebar-bg: #1a1f2e;
  --sidebar-active: #2d6a4f;
  --sidebar-hover: #232b3e;
  --primary: #2d6a4f;
  --primary-dark: #1b4332;
  --primary-light: #52b788;
  --danger: #e63946;
  --danger-dark: #c1121f;
  --warning: #f4a261;
  --info: #4361ee;
  --text: #1a1a2e;
  --text-light: #6c757d;
  --border: #dee2e6;
  --card: #ffffff;
  --shadow: 0 2px 8px rgba(0,0,0,.08);
  --radius: 10px;
  --bottom-nav-h: 60px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background:var(--bg); color:var(--text); }

/* ===================== LOGIN ===================== */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#1b4332 0%,#2d6a4f 100%); padding:1rem; }
.login-box { background:white; padding:2rem; border-radius:16px; width:100%; max-width:380px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.login-logo { font-size:3rem; text-align:center; margin-bottom:.5rem; }
.login-subtitle { text-align:center; color:var(--text-light); margin-bottom:2rem; font-size:.95rem; }

/* ===================== APP LAYOUT — DESKTOP ===================== */
#app { display:flex; height:100vh; overflow:hidden; }

.sidebar { width:240px; background:var(--sidebar-bg); display:flex; flex-direction:column; flex-shrink:0; }
.sidebar-header { padding:1.25rem 1rem; display:flex; align-items:center; gap:.75rem; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-logo { font-size:1.6rem; }
.sidebar-title { color:white; font-size:1.2rem; font-weight:700; letter-spacing:.5px; }
.sidebar-menu { flex:1; padding:.75rem 0; overflow-y:auto; }
.nav-item { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; color:rgba(255,255,255,.65); text-decoration:none; font-size:.9rem; transition:all .15s; position:relative; }
.nav-item:hover { background:var(--sidebar-hover); color:white; }
.nav-item.active { background:var(--sidebar-active); color:white; }
.nav-icon { font-size:1.1rem; width:24px; text-align:center; flex-shrink:0; }
.badge { margin-left:auto; background:var(--danger); color:white; font-size:.7rem; font-weight:700; padding:2px 6px; border-radius:20px; }
.sidebar-footer { padding:1rem; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:.5rem; }
.user-info { display:flex; align-items:center; gap:.5rem; flex:1; min-width:0; }
.user-avatar { width:32px; height:32px; background:var(--primary-light); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:.85rem; flex-shrink:0; }
.user-name { color:white; font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { color:rgba(255,255,255,.45); font-size:.72rem; }
.btn-logout { background:none; border:none; cursor:pointer; color:rgba(255,255,255,.5); font-size:1.2rem; padding:.25rem; border-radius:6px; transition:.15s; }
.btn-logout:hover { color:var(--danger); }

.main-content { flex:1; overflow-y:auto; padding:1.5rem; }

/* ===================== BOTTOM NAV (mobile only, hidden on desktop) ===================== */
.bottom-nav { display:none; }

/* ===================== CARDS ===================== */
.card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.25rem; }
.card-title { font-size:1rem; font-weight:700; margin-bottom:1rem; }

/* ===================== PAGE HEADER ===================== */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; flex-wrap:wrap; gap:.5rem; }
.page-title { font-size:1.4rem; font-weight:700; }

/* ===================== GRID ===================== */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }

/* ===================== STAT CARDS ===================== */
.stat-card { background:var(--card); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); }
.stat-card .stat-label { font-size:.78rem; color:var(--text-light); margin-bottom:.4rem; text-transform:uppercase; letter-spacing:.5px; }
.stat-card .stat-value { font-size:1.5rem; font-weight:800; }
.stat-card .stat-sub { font-size:.8rem; color:var(--text-light); margin-top:.25rem; }
.stat-card.green .stat-value { color:var(--primary); }
.stat-card.red .stat-value { color:var(--danger); }
.stat-card.blue .stat-value { color:var(--info); }

/* ===================== INPUTS ===================== */
.input { width:100%; padding:.65rem .9rem; border:1.5px solid var(--border); border-radius:8px; font-size:.9rem; outline:none; transition:.15s; margin-bottom:.75rem; background:white; }
.input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(45,106,79,.1); }
.input-group { display:flex; gap:.5rem; }
.input-group .input { margin-bottom:0; }
label { font-size:.82rem; font-weight:600; color:var(--text-light); display:block; margin-bottom:.3rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.form-group { margin-bottom:.75rem; }

/* ===================== BUTTONS ===================== */
.btn { padding:.65rem 1.2rem; border:none; border-radius:8px; cursor:pointer; font-size:.88rem; font-weight:600; transition:.15s; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; touch-action:manipulation; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn:active:not(:disabled) { transform:scale(.97); }
.btn-primary { background:var(--primary); color:white; }
.btn-primary:hover:not(:disabled) { background:var(--primary-dark); }
.btn-danger { background:var(--danger); color:white; }
.btn-danger:hover:not(:disabled) { background:var(--danger-dark); }
.btn-outline { background:white; color:var(--text); border:1.5px solid var(--border); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.btn-sm { padding:.4rem .75rem; font-size:.8rem; }
.btn-full { width:100%; }

/* ===================== TABLE ===================== */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:.87rem; }
th { background:#f8f9fa; padding:.7rem 1rem; text-align:left; font-weight:700; font-size:.78rem; color:var(--text-light); text-transform:uppercase; border-bottom:2px solid var(--border); white-space:nowrap; }
td { padding:.75rem 1rem; border-bottom:1px solid #f0f2f5; vertical-align:middle; }
tr:hover td { background:#f8f9fa; }
tr:last-child td { border-bottom:none; }

/* ===================== ALERTS ===================== */
.alert { padding:.75rem 1rem; border-radius:8px; margin-bottom:.75rem; font-size:.88rem; font-weight:500; }
.alert-error { background:#fce4e4; color:var(--danger-dark); border:1px solid #f5c6c6; }
.alert-success { background:#d1e7dd; color:#155724; border:1px solid #badbcc; }
.alert-warning { background:#fff3cd; color:#856404; border:1px solid #ffecb5; }

/* ===================== SALE PAGE ===================== */
.sale-layout { display:grid; grid-template-columns:1fr 340px; gap:1.25rem; height:calc(100vh - 3rem); }
.sale-search-panel { display:flex; flex-direction:column; gap:1rem; }

.search-result-item { display:flex; align-items:center; justify-content:space-between; padding:.75rem .9rem; border-bottom:1px solid var(--border); cursor:pointer; transition:.1s; user-select:none; }
.search-result-item:hover, .search-result-item:active { background:#f0f9f4; }
.search-result-item:last-child { border-bottom:none; }
.product-code-tag { font-size:.72rem; background:#e8f5e9; color:var(--primary); padding:2px 6px; border-radius:4px; font-weight:700; white-space:nowrap; }

/* ===================== CART ===================== */
.cart-wrap { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); display:flex; flex-direction:column; height:100%; overflow:hidden; }
.cart-header { padding:1rem 1.25rem; border-bottom:1px solid var(--border); font-weight:700; font-size:1rem; flex-shrink:0; }
.cart-items { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:.5rem 0; }
.cart-item { display:flex; align-items:center; gap:.5rem; padding:.65rem 1rem; border-bottom:1px solid #f5f5f5; }
.cart-item-name { font-size:.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-price { font-size:.78rem; color:var(--text-light); }
.qty-control { display:flex; align-items:center; gap:.3rem; flex-shrink:0; }
.qty-btn { width:32px; height:32px; border:1.5px solid var(--border); background:white; border-radius:6px; cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center; transition:.1s; touch-action:manipulation; }
.qty-btn:hover, .qty-btn:active { border-color:var(--primary); color:var(--primary); background:#f0f9f4; }
.qty-val { width:28px; text-align:center; font-weight:700; font-size:.88rem; }
.cart-footer { padding:1rem 1.25rem; border-top:1px solid var(--border); flex-shrink:0; }
.cart-total { font-size:1.2rem; font-weight:800; color:var(--primary); margin-bottom:.75rem; display:flex; justify-content:space-between; }

/* ===================== SEARCH DROPDOWN ===================== */
.search-bar { position:relative; }
.search-bar .input { padding-left:2.2rem; margin-bottom:0; }
.search-bar::before { content:'🔍'; position:absolute; left:.7rem; top:50%; transform:translateY(-50%); font-size:.85rem; pointer-events:none; z-index:1; }
.search-results-drop { position:absolute; top:calc(100% + 4px); left:0; right:0; background:white; border:1.5px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:200; max-height:300px; overflow-y:auto; }

/* ===================== MODAL ===================== */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; justify-content:center; z-index:1000; }
.modal { background:white; border-radius:16px 16px 0 0; padding:1.5rem; width:100%; max-width:540px; box-shadow:0 -4px 32px rgba(0,0,0,.2); max-height:92vh; overflow-y:auto; }
.modal-title { font-size:1.1rem; font-weight:700; margin-bottom:1.25rem; }
.modal-footer { display:flex; gap:.5rem; justify-content:flex-end; margin-top:1.25rem; flex-wrap:wrap; }

/* ===================== PAGINATION ===================== */
.pagination { display:flex; gap:.4rem; justify-content:center; padding-top:1rem; flex-wrap:wrap; }
.page-btn { padding:.45rem .8rem; border:1.5px solid var(--border); background:white; border-radius:6px; cursor:pointer; font-size:.82rem; font-weight:600; transition:.1s; touch-action:manipulation; }
.page-btn.active { background:var(--primary); color:white; border-color:var(--primary); }
.page-btn:hover:not(.active) { border-color:var(--primary); color:var(--primary); }

/* ===================== CHART ===================== */
.chart-bar-wrap { display:flex; align-items:flex-end; gap:4px; height:120px; }
.chart-bar { flex:1; background:var(--primary-light); border-radius:4px 4px 0 0; transition:.3s; min-width:0; min-height:2px; }
.chart-bar:hover { background:var(--primary); }

/* ===================== TAGS ===================== */
.tag { display:inline-block; padding:3px 8px; border-radius:20px; font-size:.75rem; font-weight:700; white-space:nowrap; }
.tag-green { background:#d1fae5; color:#065f46; }
.tag-red { background:#fee2e2; color:#991b1b; }
.tag-yellow { background:#fef3c7; color:#92400e; }
.tag-blue { background:#dbeafe; color:#1e40af; }

/* ===================== LOW STOCK ===================== */
.low-stock-row td { background:#fff8f0 !important; }
.low-stock-row:hover td { background:#fff0e0 !important; }

/* ===================== EMPTY STATE ===================== */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--text-light); }
.empty-state .empty-icon { font-size:3rem; margin-bottom:.75rem; }

/* ===================== TOAST ===================== */
.toast { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; min-width:240px; max-width:320px; box-shadow:0 4px 16px rgba(0,0,0,.15); border-radius:10px; }

/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#ccc; border-radius:3px; }

/* ===================== PRODUCT IMAGE ===================== */
.product-img { width:40px; height:40px; border-radius:6px; object-fit:cover; background:#f0f2f5; flex-shrink:0; }
.product-img-placeholder { width:40px; height:40px; border-radius:6px; background:#f0f2f5; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }

/* ===================== TABLET ===================== */
@media (max-width:1100px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .sale-layout { grid-template-columns:1fr 300px; }
}

/* ===================== MOBILE ===================== */
@media (max-width:768px) {
  /* Скрываем боковое меню */
  .sidebar { display:none; }

  /* Нижняя навигация */
  .bottom-nav {
    display:flex;
    position:fixed;
    bottom:0; left:0; right:0;
    height:var(--bottom-nav-h);
    background:var(--sidebar-bg);
    z-index:500;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .bottom-nav-item {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.55);
    font-size:.6rem;
    gap:2px;
    cursor:pointer;
    text-decoration:none;
    padding:.3rem 0;
    position:relative;
    touch-action:manipulation;
    transition:.15s;
  }
  .bottom-nav-item.active { color:var(--primary-light); }
  .bottom-nav-item .nav-icon { font-size:1.3rem; line-height:1; }
  .bottom-nav-item .badge {
    position:absolute;
    top:4px; right:calc(50% - 18px);
    min-width:16px; height:16px;
    font-size:.6rem; padding:0 4px;
  }

  /* Main контент выше нижнего меню */
  .main-content {
    padding:.75rem;
    padding-bottom:calc(var(--bottom-nav-h) + .75rem);
    height:100vh;
    overflow-y:auto;
  }

  /* Шапка страницы */
  .page-title { font-size:1.15rem; }

  /* Продажа — колонки в строки */
  .sale-layout {
    grid-template-columns:1fr;
    height:auto;
    gap:.75rem;
  }
  .sale-search-panel { min-height:0; }
  .cart-wrap { height:auto; max-height:none; }
  .cart-items { max-height:280px; }

  /* Корзина — кнопки крупнее */
  .qty-btn { width:36px; height:36px; font-size:1.2rem; }
  .qty-val { width:32px; font-size:.95rem; }

  /* Модалка снизу */
  .modal-backdrop { align-items:flex-end; }
  .modal { border-radius:16px 16px 0 0; max-height:88vh; }

  /* Грид */
  .grid-2 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .grid-4 { grid-template-columns:1fr 1fr; }

  /* Форм ряды */
  .form-row { grid-template-columns:1fr; }

  /* Таблицы */
  th, td { padding:.55rem .6rem; font-size:.8rem; }

  /* Stat cards */
  .stat-card .stat-value { font-size:1.2rem; }

  /* Скрываем менее важные колонки */
  .hide-mobile { display:none !important; }

  /* Кнопки */
  .btn { padding:.6rem 1rem; font-size:.85rem; }
  .btn-sm { padding:.45rem .7rem; font-size:.78rem; }

  /* Toast снизу над nav */
  .toast { bottom:calc(var(--bottom-nav-h) + .75rem); right:.75rem; left:.75rem; min-width:unset; }

  /* Search dropdown */
  .search-results-drop { max-height:240px; }
}

@media (max-width:380px) {
  .grid-4 { grid-template-columns:1fr 1fr; }
  .stat-card { padding:.85rem; }
  .stat-card .stat-value { font-size:1rem; }
}