@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg: #F8F9FA;
  --panel: #FFFFFF;
  --panel-2: #F3F4F6;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;

  --text-main: #1F2937;
  --text-muted: #6B7280;
  --text-faint: #9CA3AF;
  --nav-inactive: #4B5563;

  --brand: #2563EB;
  --brand-soft: #EFF6FF;
  --c-wb: #C2266B;
  --c-wb-soft: #FDF2F8;
  --c-ozon: #2563EB;
  --c-ozon-soft: #EFF6FF;
  --c-ya: #B45309;
  --c-ya-soft: #FFFBEB;

  /* Color is reserved for status. Every other financial line is neutral. */
  --f-cost: var(--text-muted);
  --f-log: var(--text-muted);
  --f-comm: var(--text-muted);
  --f-tax: var(--text-muted);
  --f-other: var(--text-muted);
  --f-profit: #10B981;
  --f-loss: #EF4444;

  /* Margin status scale — six tiers, each its own color. */
  --status-bad: #EF4444;      /* 0-5%   Плохо    */
  --status-normal: #F97316;   /* 5-10%  Нормально */
  --status-good: #EAB308;     /* 10-15% Хорошо   */
  --status-great: #22C55E;    /* 15-20% Отлично  */
  --status-super: #3B82F6;    /* 20-25% Супер    */
  --status-perfect: #14B8A6;  /* 25%+   Идеально */

  --shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 4px 12px -4px rgba(0, 0, 0, 0.04);
  --radius: .5rem;
  --radius-lg: .65rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html{ color-scheme: light; }
*{ box-sizing: border-box; }
body{
  margin:0; background: var(--bg); color: var(--text-main);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--brand-soft); color: var(--text-main); }

.font-display{ font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }

.num, table.dt tbody td, .field, .edit-input, .price-group input{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a{ color: inherit; text-decoration: none; }

/* ---------- top navigation (persistent, no drawer) ---------- */
.topnav{ background: var(--panel); border-bottom: 1px solid var(--border); }
.topnav-inner{ margin: 0 auto; padding: 0 1.75rem; height: 4rem; display:flex; align-items:center; justify-content:space-between; }
.brand{ font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-main); }
.nav-links{ display:flex; align-items:center; gap: 2rem; margin-left: 2.5rem; font-size: .875rem; }
.nav-link{ display: inline-flex; align-items: center; position: relative; width: max-content; color: var(--nav-inactive); font-weight: 500; padding: .3rem 0; transition: color .2s var(--ease); }
.nav-link:hover{ color: var(--text-main); }
.nav-link.nav-active{ color: var(--brand); font-weight: 700; }
.nav-link.nav-active::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #2563EB; }
.nav-divider-wrap{ display: inline-flex; align-items: center; padding-left: 1.5rem; border-left: 1px solid var(--border); margin-left: .5rem; }
.nav-side{ display:flex; align-items:center; gap: 1.25rem; font-size: .8rem; }

/* ---------- secondary toolbar row ---------- */
.toolbar-row{ background: var(--panel); border-bottom: 1px solid var(--border); }
.toolbar-row-inner{ margin: 0 auto; padding: .75rem 1.75rem; display:flex; align-items:center; justify-content:space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- layout primitives ---------- */
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-flat{
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  height:2.35rem; border-radius: var(--radius); border:1px solid var(--border); background: var(--panel);
  color: var(--text-main); font-weight:600; font-size:.82rem;
  padding:0 1.1rem; transition: all .2s var(--ease); cursor:pointer;
}
.btn:hover{ border-color: var(--border-strong); background: var(--panel-2); }
.btn:active{ transform: scale(.98); }
.btn-icon{ width:2.35rem; height:2.35rem; padding:0; border-radius: var(--radius); }
.btn-primary{ background: var(--brand); border-color: var(--brand); color:#fff; }
.btn-primary:hover{ filter: brightness(1.08); color:#fff; }
.btn-danger{ color: var(--f-loss); border-color: var(--border); }
.btn-danger:hover{ background: #FEF2F2; border-color: var(--f-loss); }

.field{
  width:100%; background: var(--panel); border:1px solid var(--border); color: var(--text-main);
  border-radius: var(--radius); padding:.55rem .75rem; outline:none; font-weight:500; font-size:.88rem;
  transition: all .2s var(--ease);
}
.field:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.field-label{
  display:block; font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color: var(--text-muted); margin-bottom:.35rem;
}

.price-group{ display:flex; align-items:center; background: var(--panel); border:1px solid var(--border); border-radius:.45rem; overflow:hidden; width:108px; }
.price-group input{ background:transparent; border:none; color: var(--text-main); padding:.45rem; width:75%; outline:none; text-align:center; font-weight:600; font-size:.8rem; }
.price-btn{ width:25%; display:flex; align-items:center; justify-content:center; color: var(--text-muted); border-left:1px solid var(--border); cursor:pointer; transition: all .2s var(--ease); }
.price-btn:hover{ color: var(--brand); background: var(--brand-soft); }

.edit-input{ background: var(--panel); border:1px solid var(--border); border-radius:.45rem; padding:.45rem; width:80px; text-align:center; color: var(--text-main); outline:none; font-weight:600; font-size:.8rem; transition: all .2s var(--ease); }
.edit-input:focus{ border-color: var(--brand); }

/* ---------- plain-button toggle — no measurement, cannot desync ---------- */
.toggle-group{ display:inline-flex; background: var(--panel-2); border:1px solid var(--border); border-radius: var(--radius); padding:3px; gap:3px; flex-shrink:0; }
.toggle-btn{ flex:1; padding:.5rem 1.1rem; font-size:.76rem; font-weight:600; text-align:center; border:none; background:transparent; color: var(--text-muted); border-radius:.35rem; cursor:pointer; transition: all .2s var(--ease); white-space:nowrap; }
.toggle-btn:hover:not(.active){ color: var(--text-main); }
.toggle-btn.active{ background: var(--brand); color:#fff; }

/* ---------- market grid selector (calculator) ---------- */
.market-grid{ display:grid; background: var(--panel-2); border:1px solid var(--border); border-radius: var(--radius-lg); padding:.4rem; gap:.4rem; }
.market-grid-btn{ padding:.7rem .5rem; font-size:.8rem; font-weight:600; text-align:center; border:none; background:transparent; color: var(--text-muted); border-radius:.45rem; cursor:pointer; transition: all .2s var(--ease); }
.market-grid-btn:hover:not(.active){ color: var(--text-main); }
.market-grid-btn.active{ background: var(--panel); color: var(--mg-color, var(--brand)); box-shadow: var(--shadow-sm); }

.status-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.badge{ font-size:.68rem; font-weight:600; padding:.28rem .6rem; border-radius:.4rem; }

.t-cost, .t-log, .t-comm, .t-tax, .t-other{ color: var(--text-muted) !important; }
.t-profit{ color: var(--f-profit) !important; }
.t-loss{ color: var(--f-loss) !important; }

/* ---------- data table ---------- */
/* No DataTables scrollX here on purpose: scrollX clones the header into a
   second table and keeps the two tables' pixel widths in sync by hand —
   that hand-sync is exactly what kept drifting. One table, one thead,
   one tbody: the browser's own table layout makes header/body
   misalignment structurally impossible. Horizontal scroll comes from a
   plain overflow-x wrapper (.table-scroll) instead. */
.table-scroll{ overflow-x: auto; }
.table-scroll::-webkit-scrollbar{ height:8px; }
.table-scroll::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius:10px; }
.table-scroll-top-row{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.table-scroll-top{ overflow-x: auto; overflow-y: hidden; height: 8px; flex: 1 1 auto; min-width: 0; }
.table-scroll-top > div{ height: 1px; }
.table-scroll-top::-webkit-scrollbar{ height:6px; }
.table-scroll-top::-webkit-scrollbar-track{ background: var(--panel-2); border-radius:10px; }
.table-scroll-top::-webkit-scrollbar-thumb{ background: var(--text-faint); border-radius:10px; }
.table-scroll-top-row .dataTables_paginate{ flex-shrink:0; display:flex; gap:2px; }

.tier-warning{ display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; color: var(--status-normal); background: var(--c-ya-soft); padding:2px 6px; border-radius:.35rem; margin-left:6px; white-space:nowrap; }

.col-settings-row{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--border); gap:1rem; }
.col-settings-row:last-child{ border-bottom:none; }
.col-settings-row .toggle-group{ width:260px; flex-shrink:0; }
.col-settings-row .toggle-btn{ padding:.5rem .6rem; font-size:.7rem; }

table.dt thead th.dt-colreorder-moving{ background: var(--brand-soft) !important; }
table.dt thead th{ position: relative; }
.col-resize-handle{ position:absolute; top:0; right:0; bottom:0; width:8px; cursor: col-resize; z-index:5; }
.col-resize-handle:hover, .col-resize-handle.resizing{ background: var(--brand); opacity:.4; }

table.dt{ border-collapse:collapse; width:100%; border:none; }
table.dt thead th{
  font-size:10.5px; color: #374151; border-bottom:1px solid var(--border); border-right:1px solid var(--border);
  padding:11px 10px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; background: var(--panel-2);
  font-weight:600; box-sizing: border-box; cursor: grab;
}
table.dt tbody td{
  border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:7px 10px;
  font-size:12.5px; vertical-align:middle; white-space:nowrap; color: var(--text-main); box-sizing: border-box;
}
table.dt tbody td:nth-child(2){ font-weight:500; }
table.dt tbody tr{ background:transparent; transition: background .15s var(--ease); }
table.dt tbody tr:hover{ background: var(--panel-2); }

.dataTables_filter{ display:none !important; }
.dataTables_wrapper .top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-size:11px; color: var(--text-muted); font-weight:500; }
.dataTables_length select{ background: var(--panel); border:1px solid var(--border); color: var(--text-main); border-radius:.4rem; padding:3px 6px; outline:none; margin-left:6px; }
.paginate_button{ padding:6px 12px !important; border-radius:.4rem !important; border:1px solid var(--border) !important; background: var(--panel) !important; color: var(--text-main) !important; margin:0 2px; cursor:pointer; transition: all .2s var(--ease); font-weight:500; font-size:11px; }
.paginate_button.current{ background: var(--brand) !important; color:#fff !important; border-color: var(--brand) !important; }
.paginate_button:hover:not(.current){ border-color: var(--border-strong) !important; }

.btn-details.active{ background: var(--brand); color:#fff !important; border-color: var(--brand); }

.donut{ width:160px; height:160px; border-radius:50%; position:relative; margin:0 auto; }
.donut-hole{ width:106px; height:106px; background: var(--panel); border-radius:50%; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); display:flex; align-items:center; justify-content:center; font-size:21px; font-weight:700; }

.fade-in{ animation: felt-fade .25s var(--ease) both; }
@keyframes felt-fade{ from{ opacity:0; transform: translateY(4px);} to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

:focus-visible{ outline: 2px solid var(--brand); outline-offset: 1px; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius:10px; }