:root{
  /* Lamoda-like: clean, high contrast, lots of white */
  --bg:#f7f7f8;
  --panel:#ffffff;
  --panel2:#f1f1f2;
  --text:#0b0b0c;
  --muted:#5b616a;
  --muted2:#7a828d;
  --stroke:rgba(11,11,12,.12);
  --stroke2:rgba(11,11,12,.18);

  /* Accent: vivid “editorial” red (works with Lamoda black/white vibe) */
  --accent:#ff2d55;
  --accent2:#ff5b7a;
  --ok:#16a34a;
  --warn:#f59e0b;
  --err:#ef4444;

  --r:18px;
  --r2:14px;
  --shadow: 0 20px 70px rgba(0,0,0,.10);
  --shadow2: 0 10px 26px rgba(0,0,0,.08);

  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* Simple layout helpers used across templates */
.row{ display:flex; gap: 10px; align-items:center; }
.stack{ display:flex; flex-direction:column; gap: 14px; }

/* Support: highlight unread rows (tickets with new user messages) */
tr.unread-row td{
  background: rgba(255, 45, 85, .08);
}
tr.unread-row:hover td{
  background: rgba(255, 45, 85, .12);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0a0a0b;
    --panel:#121214;
    --panel2:#0f0f11;
    --text:#f3f3f4;
    --muted:#a1a1aa;
    --muted2:#8b8b93;
    --stroke:rgba(255,255,255,.10);
    --stroke2:rgba(255,255,255,.16);
    --shadow: 0 24px 90px rgba(0,0,0,.55);
    --shadow2: 0 14px 44px rgba(0,0,0,.40);
  }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight: 400;
  color:var(--text);
  background: var(--bg);
}

/* Background layer (subtle pattern) */
.bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(900px 520px at 14% -10%, rgba(255,45,85,.10), transparent 60%),
    radial-gradient(1000px 560px at 95% 10%, rgba(0,0,0,.06), transparent 62%),
    repeating-linear-gradient(
      135deg,
      rgba(11,11,12,.03) 0px,
      rgba(11,11,12,.03) 1px,
      transparent 1px,
      transparent 10px
    );
}
@media (prefers-color-scheme: dark){
  .bg{
    background:
      radial-gradient(900px 520px at 14% -10%, rgba(255,45,85,.18), transparent 60%),
      radial-gradient(1000px 560px at 95% 10%, rgba(255,255,255,.06), transparent 62%),
      repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 10px);
  }
}

a{ color:inherit; text-decoration:none; }
.mono{ font-family:var(--mono); }
.muted{ color:var(--muted); }
.muted2{ color:var(--muted2); }

/* Typography helpers */
.fw-600{ font-weight:600; }
.fw-500{ font-weight:500; }
.fw-400{ font-weight:400; }

.link-muted{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor:pointer;
}
.link-muted:hover{ border-color: var(--stroke); background: rgba(255,255,255,.55); }
@media (prefers-color-scheme: dark){
  .link-muted:hover{ background: rgba(18,18,20,.55); }
}


.wrap{
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 16px 28px;
}

/* App layout (Sidebar + Main) */
.app{
  display:flex;
  min-height:100vh;
  gap: 14px;
  padding: 18px 16px 28px;
  max-width: 1440px;
  margin: 0 auto;
}

/* When using sidebar layout, inner wrap should not add its own outer padding */
.app .wrap{
  max-width: none;
  margin: 0;
  padding: 0;
}


.sidebar{
  position: sticky;
  top: 14px;
  height: calc(100vh - 28px);
  width: 82px;
  flex: 0 0 82px;
  overflow: visible;
  z-index: 80;
}

/* The visual sidebar panel lives inside and can overlay content without shifting layout */
.sidebar-inner{
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: 280px;
  height: 100%;
  display:flex;
  flex-direction:column;
  padding: 12px;
  gap: 10px;
  border: 1px solid var(--stroke);
  border-radius: 24px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow2);
  overflow: hidden;
}
@media (prefers-color-scheme: dark){
  .sidebar-inner{ background: rgba(18,18,20,.78); }
}

.sidebar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 8px;
  border: 1px solid transparent;
  border-radius: 18px;
}

.sidebar-actions{
  display:flex;
  align-items:center;
  gap: 8px;
}

.brand--link{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand--link:hover{ opacity: .92; }

.iconbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.65);
  color: var(--text);
  cursor:pointer;
  transition: .15s ease;
  user-select:none;
}
@media (prefers-color-scheme: dark){
  .iconbtn{ background: rgba(18,18,20,.62); }
}
.iconbtn:hover{ transform: translateY(-1px); border-color: rgba(255,45,85,.35); box-shadow: 0 10px 22px rgba(0,0,0,.06); }
.iconbtn:active{ transform: translateY(0); }
.iconbtn .icon{ font-size: 16px; font-weight: 900; line-height: 1; }

.snav{
  display:flex;
  flex-direction:column;
  gap: 8px;
  overflow:auto;
  padding: 4px;
}
.snav::-webkit-scrollbar{ width: 10px; }
.snav::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.14); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
@media (prefers-color-scheme: dark){
  .snav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.16); border: 3px solid transparent; background-clip: content-box; }
}

.snav a{
  position: relative;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.65);
  font-size: 13px;
  font-weight: 650;
  transition: .15s ease;
}
@media (prefers-color-scheme: dark){
  .snav a{ background: rgba(18,18,20,.62); }
}
.snav a:hover{ transform: translateY(-1px); border-color: rgba(255,45,85,.35); box-shadow: 0 10px 22px rgba(0,0,0,.06); }
.snav a.active{ border-color: rgba(255,45,85,.55); background: rgba(255,45,85,.10); }
.snav a.danger:hover{ border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.08); }

.snav-ico{
  width: 32px;
  height: 32px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  background: rgba(255,45,85,.10);
  border: 1px solid rgba(255,45,85,.20);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
}
.snav-label{ white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }

.snav-badge{
  margin-left: auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,45,85,.28);
  background: rgba(255,45,85,.14);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.snav-sep{
  height: 1px;
  background: var(--stroke);
  margin: 4px 6px;
  border-radius: 999px;
}

/* Sidebar menu personalization */
.snav-hint{
  display:none;
  margin: 2px 6px 8px 6px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px dashed rgba(255,45,85,.35);
  background: rgba(255,45,85,.06);
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
}
html.nav-edit .snav-hint{ display:block; }

html.nav-edit #snavMain a{
  cursor: grab;
  user-select: none;
}
html.nav-edit #snavMain a:active{ cursor: grabbing; }
html.nav-edit #snavMain a:hover{ transform:none; }
#snavMain a.dragging{ opacity: .6; }

#sidebarCustomize[data-saved="1"]{
  border-color: rgba(34,197,94,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.main{
  flex: 1 1 auto;
  min-width: 0;
}

.main-top{
  position: sticky;
  top: 18px;
  z-index: 40;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--stroke);
  border-radius: 22px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow2);
  margin-bottom: 14px;
}
@media (prefers-color-scheme: dark){
  .main-top{ background: rgba(18,18,20,.78); }
}

.main-title{
  font-weight: 850;
  letter-spacing: .02em;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* Backdrop for mobile drawer */
.sidebar-backdrop{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.44);
  z-index: 90;
}

/* Collapsed sidebar (desktop): keep layout width, shrink the panel */
html.nav-collapsed .sidebar-inner{ width: 82px; padding: 12px 10px; }
html.nav-collapsed .brand--link .brand-text{ display:none; }
html.nav-collapsed .snav-label{ display:none; }
html.nav-collapsed .snav a{ justify-content:center; padding: 10px; }
html.nav-collapsed .snav-badge{
  position:absolute;
  right: 10px;
  top: 8px;
  margin-left: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
}

/* Mobile drawer mode */
@media (max-width: 980px){
  .app{ gap: 0; padding: 14px 12px 20px; }
  .sidebar{
    position: fixed;
    top: 12px;
    left: 12px;
    height: calc(100vh - 24px);
    z-index: 100;
    width: 280px;
    flex: 0 0 auto;
    transform: translateX(-110%);
    transition: transform .18s ease;
  }
  .sidebar-inner{
    position: relative;
    width: 280px;
    height: 100%;
  }
  html.nav-open .sidebar{ transform: translateX(0); }
  html.nav-open .sidebar-backdrop{ display:block; }
  html.nav-open, html.nav-open body{ overflow:hidden; }

  /* On mobile, don't allow "collapsed" narrow mode */
  html.nav-collapsed .sidebar-inner{ width: 280px; padding: 12px; }
  html.nav-collapsed .brand--link .brand-text{ display:block; }
  html.nav-collapsed .snav-label{ display:inline; }
  html.nav-collapsed .snav a{ justify-content:flex-start; padding: 10px 12px; }
  html.nav-collapsed .snav-badge{ position: static; margin-left: auto; }
}
/* Keep menu button visible on desktop too (quick collapse/expand) */


/* Topbar */
.top{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border: 1px solid var(--stroke);
  border-radius: 22px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow2);
  margin-bottom: 14px;
}
@media (prefers-color-scheme: dark){
  .top{ background: rgba(18,18,20,.78); }
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 0;
}
.brand-mark{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 6px rgba(255,45,85,.14);
  flex: 0 0 auto;
}
.brand-text{ line-height:1.05; min-width: 0; }
.brand-title{
  font-weight:700;
  letter-spacing: .28em;
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-subtitle{
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  font-size: 13px;
  font-weight:600;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.65);
  transition: .15s ease;
}
@media (prefers-color-scheme: dark){
  .nav a{ background: rgba(18,18,20,.62); }
}
.nav a:hover{
  transform: translateY(-1px);
  border-color: rgba(255,45,85,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.nav a.active{
  border-color: rgba(255,45,85,.55);
  background: rgba(255,45,85,.10);
}
.nav a.danger:hover{ border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.08); }

/* Cards */
.card{
  background: rgba(255,255,255,.86);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  padding: 16px;
}
@media (prefers-color-scheme: dark){
  .card{ background: rgba(18,18,20,.80); }
}

/* Sub-cards: lighter blocks inside header cards (forms, helpers) */
.subcard{
  padding: 12px 14px;
  border-radius: var(--r2);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.72);
}
@media (prefers-color-scheme: dark){
  .subcard{ background: rgba(18,18,20,.68); }
}
.subcard-title{ font-weight: 650; font-size: 12px; letter-spacing:.20px; text-transform: uppercase; color: var(--muted); }
.subcard-help{ margin-top: 8px; color: var(--muted2); font-size: 12px; font-weight: 600; line-height: 1.35; }

/* Form grids */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  align-items:end;
}
@media (max-width: 1100px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
}
.form-grid .actions{ display:flex; gap:8px; align-items:flex-end; justify-content:flex-end; }
.form-grid .span-2{ grid-column: span 2; }
.form-grid .span-3{ grid-column: span 3; }

/* Grid */
.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.col-12{ grid-column: span 12; }
.col-6{ grid-column: span 6; }
.col-4{ grid-column: span 4; }
.col-3{ grid-column: span 3; }
@media(max-width:1100px){ .col-6,.col-4,.col-3{ grid-column: span 12; } }

/* Buttons */
.btn,.btn2{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight:600;
  font-size: 13px;
  border: 1px solid var(--stroke);
  cursor:pointer;
  transition: .15s ease;
  user-select:none;
  white-space:nowrap;
}

/* Primary: black pill */
.btn{
  background: #0b0b0c;
  color: #ffffff;
  border-color: rgba(11,11,12,.92);
}
@media (prefers-color-scheme: dark){
  .btn{ background: #ffffff; color:#0b0b0c; border-color: rgba(255,255,255,.85); }
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.14); }

/* Danger (destructive) */
.btn.danger{ background: rgba(239,68,68,.92); border-color: rgba(239,68,68,.95); color:#fff; }
.btn2.danger{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08); }
.btn.danger:hover{ box-shadow: 0 12px 28px rgba(239,68,68,.18); }
.btn2.danger:hover{ border-color: rgba(239,68,68,.50); }

/* Secondary */
.btn2{
  background: rgba(255,255,255,.72);
  color: var(--text);
}
@media (prefers-color-scheme: dark){
  .btn2{ background: rgba(18,18,20,.72); }
}
.btn2:hover{ transform: translateY(-1px); border-color: rgba(255,45,85,.30); }

.btn.small,.btn2.small{ padding: 8px 10px; border-radius: 12px; font-size: 12px; }

/* Inputs */
input,select,textarea,button{ font-family:inherit; }
.input,.select,.textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.78);
  color: var(--text);
  outline:none;
  transition: .15s ease;
}
@media (prefers-color-scheme: dark){
  .input,.select,.textarea{ background: rgba(18,18,20,.72); }
}
.input:focus,.select:focus,.textarea:focus{
  border-color: rgba(255,45,85,.45);
  box-shadow: 0 0 0 4px rgba(255,45,85,.16);
}

/* IMPORTANT: dropdown options */
select, option{ background: var(--panel); color: var(--text); }
@media (prefers-color-scheme: dark){
  select, option{ background: #121214; }
}

input[type="date"]{ color-scheme: light; }
@media (prefers-color-scheme: dark){ input[type="date"]{ color-scheme: dark; } }

/* Flash */
.flash{
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow2);
  font-weight: 650;
  font-size: 13px;
}
@media (prefers-color-scheme: dark){ .flash{ background: rgba(18,18,20,.72); } }
.flash.ok{ border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.10); }
.flash.error{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); }

/* Table */
.table-wrap{
  overflow:auto;
  border-radius: var(--r);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.72);
}
@media (prefers-color-scheme: dark){ .table-wrap{ background: rgba(18,18,20,.66); } }
table{ width:100%; border-collapse:collapse; min-width: 1020px; }
th,td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(11,11,12,.06);
  vertical-align: top;
}
@media (prefers-color-scheme: dark){ th,td{ border-bottom: 1px solid rgba(255,255,255,.07); } }
th{
  font-size: 11px;
  letter-spacing:.34px;
  text-transform: uppercase;
  color: var(--muted);
  white-space:nowrap;
}
tbody tr:nth-child(odd){ background: rgba(11,11,12,.02); }
@media (prefers-color-scheme: dark){ tbody tr:nth-child(odd){ background: rgba(255,255,255,.03); } }
tbody tr:hover{ background: rgba(255,45,85,.07); }

.sticky thead th{
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(12px);
  z-index: 5;
  border-bottom: 1px solid var(--stroke);
}
@media (prefers-color-scheme: dark){
  .sticky thead th{ background: rgba(18,18,20,.92); }
}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.70);
  font-weight: 650;
  font-size: 12px;
  white-space:nowrap;
}
@media (prefers-color-scheme: dark){ .badge{ background: rgba(18,18,20,.72); } }
.b-ok{ border-color: rgba(22,163,74,.40)!important; background: rgba(22,163,74,.10)!important; }
.b-err{ border-color: rgba(239,68,68,.40)!important; background: rgba(239,68,68,.10)!important; }
.b-warn{ border-color: rgba(245,158,11,.40)!important; background: rgba(245,158,11,.10)!important; }
.b-work{ border-color: rgba(255,45,85,.42)!important; background: rgba(255,45,85,.10)!important; }
/* "Отработано" (зелёный градиент, чтобы не выглядело как ошибка) */
.b-worked{
  border-color: rgba(34,197,94,.45)!important;
  background: linear-gradient(90deg, rgba(34,197,94,.18), rgba(59,130,246,.08))!important;
}

/* Chips */
.chipbar{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  overflow: visible;
  padding-bottom: 0;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.70);
  font-weight:600;
  font-size: 12px;
  white-space: nowrap;
  transition: .15s ease;
}
@media (prefers-color-scheme: dark){ .chip{ background: rgba(18,18,20,.72); } }
.chip:hover{ border-color: rgba(255,45,85,.30); }
.chip.active{ border-color: rgba(255,45,85,.55); background: rgba(255,45,85,.10); }

.kbd{
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.72);
  font-family: var(--mono);
  font-weight: 650;
}
@media (prefers-color-scheme: dark){ .kbd{ background: rgba(18,18,20,.72); } }

/* Header blocks */
.hstack{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.title{ font-size: 20px; font-weight:600; letter-spacing: .2px; margin: 0; }
.subtitle{ margin: 6px 0 0; color: var(--muted); font-weight: 600; font-size: 13px; max-width: 980px; line-height: 1.35; }

/* Compact page header */
.pagehead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pagehead-left{ min-width: 0; }
.pagehead-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pagehead-title{ font-size: 18px; font-weight:600; letter-spacing: .2px; }
.pagehead-meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.72);
  font-weight:600;
  font-size: 12px;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark){ .pill{ background: rgba(18,18,20,.72); } }
.badge-mini{ padding: 6px 10px; font-size: 12px; }
.pagehead-details{ margin-top: 8px; }
.pagehead-details > summary{ cursor:pointer; user-select:none; font-weight: 650; font-size: 12px; list-style:none; }
.pagehead-details > summary::-webkit-details-marker{ display:none; }
.pagehead-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Page-specific card tuning */
.header-card{ padding: 14px 16px; }
.filters-card{ padding: 12px 14px; }

/* Mini stats */
.stats{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }
.stat{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.72);
  font-weight: 650;
  font-size: 12px;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark){ .stat{ background: rgba(18,18,20,.72); } }
.stat span{ color: var(--muted); font-weight: 800; }
.stat b{ font-family: var(--mono); }

/* Filters: auto-apply + compact, keep controls from stretching too wide */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:flex-end;
}
.field{ display:flex; flex-direction:column; gap:5px; min-width: 0; }
.field label{ font-size:11px; letter-spacing:.20px; text-transform:uppercase; color: var(--muted); font-weight: 600; }

.filters .field.search{ flex: 1 1 420px; min-width: 320px; }
.filters .field.warehouse{ flex: 0 0 220px; }
.filters .field.statusPick{ flex: 0 0 260px; }
.filters .field.dates{ flex: 0 0 320px; }
.filters .actions{ margin-left:auto; display:flex; gap:8px; align-items:flex-end; }

.filters .input, .filters .select{ padding: 9px 10px; border-radius: 12px; }

.date-range{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }

/* Single daterange control */
.daterange-control{ position:relative; }
.daterange-control .input{ padding-left: 38px; cursor:pointer; }
.daterange-control::before{
  content:'📅';
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: .75;
  pointer-events:none;
}

/* Active filters */
.active-filters{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top: 8px; }
.af-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.af-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.68);
  font-weight:600;
  font-size: 12px;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark){ .af-chip{ background: rgba(18,18,20,.70); } }
.af-chip:hover{ border-color: rgba(255,45,85,.30); }
.af-x{ opacity:.65; font-size: 14px; line-height: 1; }

/* Status strip */
.status-strip{ margin-top: 12px; }

/* Filter block: non-sticky (option 2) */
.sticky-filters{ position: static; top: auto; z-index: auto; }

/* Table row click */
.row-click{ cursor:pointer; }
.row-click input, .row-click button, .row-click a{ cursor:auto; }

/* Premium search control (used in ЗП and other pages) */
.search-control{ position:relative; }
.search-control .input{ padding-left: 38px; }
.search-control::before{
  content:'🔎';
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: .75;
  pointer-events:none;
}

/* Sub cards for forms inside headers */
.subcard{
  padding: 12px 14px;
  border-radius: var(--r2);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.70);
}
@media (prefers-color-scheme: dark){ .subcard{ background: rgba(18,18,20,.66); } }
.subcard-title{ font-weight: 750; font-size: 12px; letter-spacing: .18px; text-transform: uppercase; color: var(--muted); }
.subcard-help{ margin-top: 8px; color: var(--muted); font-weight: 600; font-size: 12px; line-height: 1.35; }

/* Compact form grids */
.form-grid{ display:grid; gap: 10px; align-items:end; }
.form-grid.limits-upsert{ grid-template-columns: 1.6fr 0.9fr 0.7fr auto; }
@media(max-width: 980px){ .form-grid.limits-upsert{ grid-template-columns: 1fr 1fr; } }

.form-grid.targets-upsert{ grid-template-columns: 1.6fr 0.9fr 0.7fr 0.7fr; }
.form-grid.targets-upsert .tg-comment{ grid-column: 1 / span 3; }
.form-grid.targets-upsert .tg-actions{ justify-self:end; }
@media(max-width: 980px){
  .form-grid.targets-upsert{ grid-template-columns: 1fr 1fr; }
  .form-grid.targets-upsert .tg-comment{ grid-column: 1 / span 2; }
  .form-grid.targets-upsert .tg-actions{ grid-column: 1 / span 2; justify-self:stretch; }
  .form-grid.targets-upsert .tg-actions .btn{ width: 100%; justify-content:center; }
}

/* Button chip reset */
button.chip{ appearance:none; -webkit-appearance:none; background: rgba(255,255,255,.70); }
@media (prefers-color-scheme: dark){ button.chip{ background: rgba(18,18,20,.72); } }
button.chip{ font-family:inherit; }

.filters-advanced{ margin-top: 12px; }
.adv{
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 8px 10px;
  background: rgba(255,255,255,.55);
}
@media (prefers-color-scheme: dark){ .adv{ background: rgba(18,18,20,.55); } }
.adv > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight: 650;
  user-select:none;
}
.adv > summary::-webkit-details-marker{ display:none; }
.adv .adv-body{ padding-top: 12px; }
.adv-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
@media(max-width:980px){
  .filters .actions{ width: 100%; margin-left:0; justify-content:flex-start; }
}
@media(max-width:720px){
  .filters .field.search{ min-width: 100%; }
  .filters .field.warehouse, .filters .field.statusPick, .filters .field.dates{ flex: 1 1 260px; }
  .date-range{ grid-template-columns: 1fr; }
  .adv-grid{ grid-template-columns: 1fr 1fr; }
}

/* Actions menu */
.menu{ position: relative; display:inline-block; }
.menu-btn{
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.72);
  color: var(--text);
  cursor:pointer;
  font-weight:600;
  font-size: 14px;
  line-height: 1;
}
@media (prefers-color-scheme: dark){ .menu-btn{ background: rgba(18,18,20,.72); } }
.menu-btn:focus{ outline: none; box-shadow: 0 0 0 4px rgba(255,45,85,.12); }
.menu-btn:hover{ transform: translateY(-1px); border-color: rgba(255,45,85,.30); }
.menu-panel{
  position:absolute;
  right:0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 8px;
  display:none;
  z-index: 999;
  backdrop-filter: blur(12px);
}
@media (prefers-color-scheme: dark){ .menu-panel{ background: rgba(18,18,20,.94); } }
.menu.open .menu-panel{ display:block; }
.menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight:600;
  font-size: 13px;
  cursor:pointer;
  background: transparent;
  color: var(--text);
  width:100%;
  text-align:left;
}
.menu-item:hover{ background: rgba(255,45,85,.10); border-color: rgba(255,45,85,.18); }

/* Global popover (fixed, not clipped by overflow containers) */
.popover{
  position: fixed;
  z-index: 3000;
  width: 240px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
@media (prefers-color-scheme: dark){ .popover{ background: rgba(18,18,20,.94); } }
.popover-inner{ padding: 8px; }
.pop-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight:600;
  font-size: 13px;
  cursor:pointer;
  background: transparent;
  color: var(--text);
  width:100%;
  text-align:left;
  text-decoration:none;
}
.pop-item.pop-active{
  background: rgba(255,45,85,.10);
  border-color: rgba(255,45,85,.30);
}
.pop-item:hover{ background: rgba(255,45,85,.10); border-color: rgba(255,45,85,.18); }

/* Small modal */
.modal.modal-sm{ width: min(520px, 100%); }

/* Breadcrumbs */
.crumbs{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.crumbs a{ text-decoration:none; font-weight: 650; }
.crumbs .sep{ opacity:.5; }

/* Modal */
.modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 16px;
  z-index: 2000;
}
.modal-backdrop.is-open{ display:flex; }
.modal{
  width: min(1040px, 100%);
  max-height: min(86vh, 900px);
  overflow:auto;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  box-shadow: 0 30px 120px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
}
@media (prefers-color-scheme: dark){
  .modal{ background: rgba(18,18,20,.96); box-shadow: 0 30px 120px rgba(0,0,0,.70); }
}
.modal-head{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:flex-start;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(11,11,12,.08);
}
@media (prefers-color-scheme: dark){ .modal-head{ border-bottom: 1px solid rgba(255,255,255,.10); } }
.modal-body{ padding: 14px; }

/* Warehouses picker modal (scoped) */
.wh-modal .modal{ overflow:hidden; display:flex; flex-direction:column; }
.wh-modal .modal-head{ padding: 16px 16px 12px; }
.wh-modal .modal-body{ padding: 14px 16px 12px; overflow:hidden; }
.wh-modal .wh-sub{ font-size:12px; margin-top:4px; }
.wh-modal .wh-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.wh-modal .wh-search{ flex:1; min-width: 260px; position:relative; }
.wh-modal .wh-search:before{
  content: "\1F50E"; /* 🔎 */
  position:absolute; left: 12px; top: 50%; transform: translateY(-50%);
  opacity: .55; font-size: 14px;
}
.wh-modal .wh-search .input{ padding-left: 38px; }
.wh-modal .wh-actions{ display:flex; gap:10px; align-items:center; }

.wh-modal .wh-selected{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-height: 82px;
  overflow:auto;
  padding-right: 6px;
}
.wh-modal .wh-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,45,85,.22);
  background: rgba(255,45,85,.08);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.wh-modal .wh-chip button{
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  opacity: .7;
  font-size: 13px;
  line-height: 1;
}
.wh-modal .wh-chip button:hover{ opacity: 1; }

.wh-modal .wh-list{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(11,11,12,.10);
  background: rgba(255,255,255,.60);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  padding: 10px;
  max-height: 46vh;
  overflow:auto;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
@media (prefers-color-scheme: dark){
  .wh-modal .wh-list{ background: rgba(18,18,20,.58); border-color: rgba(255,255,255,.10); }
}
.wh-modal .wh-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.72);
  cursor: pointer;
  transition: .12s ease;
  user-select: none;
}
@media (prefers-color-scheme: dark){ .wh-modal .wh-item{ background: rgba(18,18,20,.72); } }
.wh-modal .wh-item:hover{ transform: translateY(-1px); border-color: rgba(255,45,85,.22); }
.wh-modal .wh-item input{ width: 16px; height: 16px; }
.wh-modal .wh-name{ font-size: 13px; font-weight: 650; }

.wh-modal .wh-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(11,11,12,.08);
}
@media (prefers-color-scheme: dark){ .wh-modal .wh-footer{ border-top: 1px solid rgba(255,255,255,.10); } }
@media(max-width:560px){
  .wh-modal .wh-footer{ flex-direction:column; align-items:stretch; }
  .wh-modal .wh-footer .wh-footer-actions{ display:flex; gap:10px; justify-content:stretch; }
  .wh-modal .wh-footer .wh-footer-actions button{ flex:1; }
}
.close{
  background: rgba(255,255,255,.72);
  border: 1px solid var(--stroke);
  color: var(--text);
  border-radius: 14px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 650;
  font-size: 13px;
}
@media (prefers-color-scheme: dark){ .close{ background: rgba(18,18,20,.72); } }
.close:hover{ transform: translateY(-1px); border-color: rgba(255,45,85,.30); }

/* small helpers */
.sep{ height:1px; background: rgba(11,11,12,.08); margin: 12px 0; }
@media (prefers-color-scheme: dark){ .sep{ background: rgba(255,255,255,.10); } }

/* Mobile polish */
@media(max-width:560px){
  .wrap{ padding: 14px 12px 22px; }
  .top{ border-radius: 18px; padding: 10px 12px; }
  .nav a{ padding: 8px 10px; font-size: 12px; }
}

.pill b, .stat b{ font-weight:650; }

/* Period inline date range */
.date-range-inline{
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 0;
}
.date-range-inline .input{
  padding: 10px 10px;
}
.dr-sep{ color: var(--muted2); font-weight:600; padding: 0 2px; }
.icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.70);
  cursor:pointer;
  font-weight: 650;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
@media (prefers-color-scheme: dark){ .icon-btn{ background: rgba(18,18,20,.72); } }
.icon-btn:hover{ border-color: rgba(255,45,85,.30); transform: translateY(-1px); }

/* Filters footer (statuses + advanced toggle) */
.filters-footer{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 12px;
}

/* Compact status picker (replaces many chips) */
.status-picker{ display:flex; align-items:center; gap:10px; }
.status-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.70);
  cursor:pointer;
  font-family: inherit;
  font-weight:600;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark){ .status-btn{ background: rgba(18,18,20,.72); } }
.status-btn:hover{ border-color: rgba(255,45,85,.30); transform: translateY(-1px); }
.status-current{ font-weight:650; }
.status-btn .caret{ opacity:.7; font-size: 12px; }

/* Make status button behave like an input inside the filters row */
.status-btn--full{ width: 100%; justify-content:space-between; }

/* Keep daterange compact on wide screens */
.filters .date-range-inline .input{ width: 140px; }

.footer-actions{ display:flex; align-items:center; gap:10px; }
.btn2.small, .btn.small{ padding: 8px 10px; font-size: 12px; border-radius: 12px; }

/* Advanced panel (collapsed by default) */
.adv-panel{
  margin-top: 8px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.55);
}
@media (prefers-color-scheme: dark){ .adv-panel{ background: rgba(18,18,20,.55); } }
.adv-panel .adv-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
@media(max-width:720px){ .adv-panel .adv-grid{ grid-template-columns: 1fr 1fr; } }
.adv-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 12px;
}

/* About popover */
.pop-body{ padding: 6px; }
.pop-title{
  font-weight:650;
  font-size: 12px;
  letter-spacing:.22px;
  text-transform: uppercase;
  color: var(--muted);
}
.pop-list{
  margin: 10px 0 0 16px;
  padding: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}
.pop-more{ margin-top: 10px; }
.pop-more > summary{
  cursor:pointer;
  user-select:none;
  font-weight:650;
  color: var(--muted);
  list-style:none;
}
.pop-more > summary::-webkit-details-marker{ display:none; }

/* Checkbox row (used in advanced filters) */
.check-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border:1px solid var(--stroke);
  border-radius: 14px;
  background: rgba(255,255,255,.55);
}
@media (prefers-color-scheme: dark){ .check-row{ background: rgba(18,18,20,.55); } }



/* Pagehead meta groups (separate counters vs sync info) */
.pagehead-meta{ justify-content:space-between; width:100%; }
.pagehead-meta .meta-group{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pagehead-meta .meta-group--right{ justify-content:flex-end; }

/* Small helper text under advanced filters */
.help{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--muted2);
  font-weight: 600;
}

/* Status column polish */
.status-td{ min-width: 180px; }
.status-cell{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 0;
}
.status-cell .badge{
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-cell .meta-line{
  max-width: 360px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Shifts page: declutter header + compact controls */
.header-card .pagehead-meta{ display:none; }

.btn2.is-disabled{
  opacity:.45;
  pointer-events:none;
}

/* Tiny info marker inside Status cell */
.info-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-left:8px;
  border-radius:999px;
  border:1px solid var(--stroke);
  font-size:11px;
  font-weight:700;
  opacity:.75;
  cursor: help;
}
.info-dot:hover{ opacity:1; }

/* Status cell: single-line, no bulky blocks */
.status-td{ min-width: 140px; }
.status-cell{
  flex-direction:row;
  align-items:center;
  gap:8px;
}
.status-cell .badge{ max-width: 100%; }
.status-cell .meta-line{ display:none; }

/* Status filter button more compact */
.status-btn{
  padding: 7px 9px;
  border-radius: 12px;
}
.status-btn--full{ min-height: 34px; }
.status-btn .kbd{ padding: 2px 7px; border-radius: 10px; }

/* Shifts: search field with button */
.search-row{display:flex; gap:10px; align-items:center;}
.search-row .input{flex:1;}

/* Avoid double border: card already has border */
.card .table-wrap{border:none; background:transparent;}


/* Sortable table header links + cell filter links */
.th-sort{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease;
}
.th-sort:hover{
  background: rgba(11, 11, 12, .05);
}
.th-sort.is-active{
  background: rgba(255, 45, 85, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 45, 85, .18);
}
.th-sort .arrow{
  font-size: 12px;
  opacity: .85;
}
.cell-link{
  color: inherit;
  text-decoration: none;
}
.cell-link:hover{
  text-decoration: underline;
}
.badge.cell-link:hover{
  text-decoration: none;
  filter: brightness(.98);
}

/* --- Typeahead (search suggestions) --- */
.field.search{ position: relative; }
.typeahead-suggest{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 6px);
  z-index: 80;
  display:none;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: dark){
  .typeahead-suggest{ background: rgba(18,18,20,.92); border-color: rgba(255,255,255,.10); box-shadow: 0 18px 42px rgba(0,0,0,.55); }
}
.typeahead-suggest.open{ display:block; }
.typeahead-suggest .ta-item{
  width:100%;
  border:0;
  background:transparent;
  color: inherit;
  text-align:left;
  padding: 10px 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  cursor:pointer;
}
.typeahead-suggest .ta-item:hover,
.typeahead-suggest .ta-item.active{ background: rgba(255,45,85,.10); }
.typeahead-suggest .ta-main{ flex:1; min-width:0; }
.typeahead-suggest .ta-label{ font-weight: 850; line-height: 1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.typeahead-suggest .ta-meta{ margin-top:4px; font-size: 12px; font-weight: 650; color: var(--muted); display:flex; gap:8px; flex-wrap:wrap; }
.typeahead-suggest .ta-chip{ border:1px solid var(--stroke); border-radius:999px; padding:2px 8px; }
.typeahead-suggest .ta-empty{ padding: 12px; color: var(--muted); font-weight: 650; }

/* ===== ADMINS UI MAKEOVER v1 (2026-02-13) ===== */
.form-grid.admins-create{ grid-template-columns: 1.2fr 1.2fr auto auto; }
@media(max-width: 980px){ .form-grid.admins-create{ grid-template-columns: 1fr 1fr; } }

.form-grid.admins-tg-create{ grid-template-columns: 1fr auto; }
@media(max-width: 700px){ .form-grid.admins-tg-create{ grid-template-columns: 1fr; } }

.admins-loginline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.admins-actions{ display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
.admins-actions form{ margin:0; }
.admins-passform{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.admins-passform .input{ width: 180px; }
@media(max-width: 900px){ .admins-passform .input{ width: 140px; } }

.admins-row--disabled{ opacity: .82; }
.admins-row--me{ outline: 2px solid rgba(255,45,85,.18); outline-offset: -2px; }
/* ===== /ADMINS UI MAKEOVER v1 ===== */