/* My Print Lab CRM — компоненты на дизайн-токенах.
   Палитра/тема вынесены в tokens.css (подключается ПЕРЕД этим файлом).
   Локальный файл, без CDN. */

*,*::before,*::after { box-sizing:border-box; }
html { max-width:100%; overflow-x:clip; }
body {
  margin:0; font-family:var(--font-sans); font-size:15px; line-height:1.5;
  max-width:100%; color:var(--text); background:var(--bg);
  overflow-wrap:anywhere; -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; height:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.icon {
  display:inline-block; flex:0 0 auto; width:20px; height:20px;
  background:currentColor; mask:var(--icon-src) center/contain no-repeat;
  -webkit-mask:var(--icon-src) center/contain no-repeat;
}
.icon--menu { --icon-src:url("/static/icons/menu.svg"); }
.icon--x { --icon-src:url("/static/icons/x.svg"); }
.icon--log-out { --icon-src:url("/static/icons/log-out.svg"); }
.icon--sun { --icon-src:url("/static/icons/sun.svg"); }
.icon--moon { --icon-src:url("/static/icons/moon.svg"); }
.icon--pencil { --icon-src:url("/static/icons/pencil.svg"); }
.icon--trash { --icon-src:url("/static/icons/trash-2.svg"); }
.icon--mail { --icon-src:url("/static/icons/mail.svg"); }
h1,h2,h3,p { margin:0; }
a { color:inherit; text-decoration:none; }
code { font-family:var(--font-mono); font-size:.85em;
  background:var(--surface-2); padding:1px 6px; border-radius:var(--radius-sm); }
.muted { color:var(--text-muted); }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--radius-sm); }

/* --- App shell --- */
.shell {
  display:grid; min-width:0; min-height:100vh;
  grid-template:"side top" auto "side main" 1fr / var(--side) 1fr;
}
.sidebar {
  grid-area:side; background:var(--surface); border-right:1px solid var(--border);
  padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-5);
}
.brand { font-weight:700; font-size:1.15rem; letter-spacing:-.01em; }
.brand span { color:var(--accent); }
.brand-center { text-align:center; margin-bottom:var(--s-2); }
.sidebar nav { display:flex; flex-direction:column; gap:2px; }
.nav-item {
  padding:var(--s-2) var(--s-3); border-radius:var(--radius-sm);
  color:var(--text-muted); font-weight:500; transition:background var(--dur) var(--ease);
}
.nav-item:hover { background:var(--surface-2); color:var(--text); }
.nav-item.active { background:var(--accent-weak); color:var(--accent); }
.nav-item.is-disabled { opacity:.45; pointer-events:none; }

.topbar {
  grid-area:top; display:flex; min-width:0; align-items:center; justify-content:space-between;
  padding:var(--s-4) var(--s-5); background:var(--surface);
  border-bottom:1px solid var(--border);
}
.topbar-left,.topbar-right { display:flex; min-width:0; align-items:center; gap:var(--s-3); }
.page-title { min-width:0; font-size:1.15rem; font-weight:600; line-height:1.2; }
.user { color:var(--text-muted); font-size:.9rem; }

.content { grid-area:main; min-width:0; padding:var(--s-5); max-width:1200px; width:100%; }

/* --- Toolbar / cards --- */
.toolbar { display:flex; min-width:0; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:var(--s-4); gap:var(--s-3); }
.toolbar > p { min-width:0; max-width:68ch; }
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-1); padding:var(--s-5);
}

/* --- Table --- */
.table-wrap { overflow-x:auto; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface); }
.table { width:100%; border-collapse:collapse; font-size:.92rem; }
.table thead th {
  position:sticky; top:0; background:var(--surface-2); text-align:left;
  font-weight:600; color:var(--text-muted); padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.table td { padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--border);
  vertical-align:middle; overflow-wrap:anywhere; }
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr:hover { background:var(--surface-2); }

/* --- Badges --- */
.badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:24px; padding:3px 10px;
  border:1px solid transparent; border-radius:var(--radius-full);
  font-size:.76rem; font-weight:500; line-height:1; letter-spacing:.01em;
  white-space:nowrap;
}
.badge-success { background:var(--success-weak); color:var(--success);
  border-color:var(--success-border); }
.badge-info { background:var(--info-weak); color:var(--info);
  border-color:var(--info-border); }
.badge-accent { background:var(--accent-weak); color:var(--accent-label);
  border-color:var(--accent-border); }
.badge-muted { background:var(--muted-weak); color:var(--text-muted);
  border-color:var(--muted-border); }

/* --- Buttons --- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:44px; max-width:100%; padding:var(--s-2) var(--s-4);
  border-radius:var(--radius-sm); line-height:1.2; text-align:center;
  border:1px solid transparent; font:inherit; font-weight:600; cursor:pointer;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.btn-sm { min-height:38px; padding:var(--s-2) var(--s-3); font-size:.88rem; }
.btn-primary { background:var(--accent); color:var(--accent-fg); box-shadow:var(--glow); }
.btn-primary:hover { background:var(--accent-hover); box-shadow:var(--glow); }
.btn-primary:active { background:var(--accent-active); transform:translateY(1px); }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--control-border); }
.btn-ghost:hover { background:var(--control-hover); }
.btn-danger { background:var(--danger-weak); color:var(--danger); border-color:var(--danger); }
.btn-danger:hover { background:var(--danger); color:var(--surface); }

/* --- Forms --- */
.form { max-width:640px; display:flex; flex-direction:column; gap:var(--s-4); }
.field { display:flex; flex-direction:column; gap:var(--s-2); }
.field > span { font-weight:600; font-size:.9rem; }
input, select, textarea {
  font:inherit; color:var(--text); background:var(--control-bg);
  border:1px solid var(--control-border); border-radius:var(--radius-sm);
  padding:var(--s-2) var(--s-3); min-height:44px; width:100%;
}
input:hover, select:hover, textarea:hover { border-color:var(--text-muted); }
input:focus, select:focus, textarea:focus { border-color:var(--control-focus); }
textarea { min-height:auto; resize:vertical; }
.form-actions { display:flex; flex-wrap:wrap; justify-content:flex-end;
  gap:var(--s-3); margin-top:var(--s-2); }

/* --- Alerts --- */
.alert { padding:var(--s-3) var(--s-4); border-radius:var(--radius-sm);
  border-left:3px solid; font-size:.92rem; }
.alert-danger { background:var(--danger-weak); border-color:var(--danger); color:var(--danger); }
.alert-success { background:var(--success-weak); border-color:var(--success);
  color:var(--success); }
.flash-stack { margin-bottom:var(--s-4); }

/* --- Empty state --- */
.empty { text-align:center; padding:var(--s-8) var(--s-5); color:var(--text-muted);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-4); }
.page-subtitle { margin:var(--s-6) 0 var(--s-3); font-size:1rem; }

/* --- Login --- */
.auth { min-height:100vh; display:grid; place-items:center; padding:var(--s-5); }
.auth-card {
  width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-2); padding:var(--s-6);
  display:flex; flex-direction:column; gap:var(--s-4);
}

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