/* ════════════════════════════════════════════════════════════════
   Techno-Clean Design System
   ──────────────────────────────────────────────────────────────── */

/* ─── Шрифт ────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600;700&display=swap');

/* ─── CSS-переменные (палитра + размеры) ───────────────────────── */
:root {
    /* Фоны */
    --bg-page:       #FFFFFF;
    --bg-card:       #FAFAFB;
    --bg-hover:      #F9FAFB;

    /* Границы */
    --border:        #E5E7EB;
    --border-strong: #D1D5DB;

    /* Текст */
    --text-primary:    #0A0A0A;
    --text-secondary:  #6B7280;
    --text-on-dark:    #FFFFFF;

    /* Ссылки */
    --link:        #2563EB;
    --link-hover:  #1D4ED8;

    /* Сигналы */
    --success:  #10B981;
    --warning:  #F59E0B;
    --danger:   #EF4444;
    --info:     #3B82F6;
    --gold:     #FFB800;

    /* Градиенты */
    --grad-primary: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
    --grad-success: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
    --grad-danger:  linear-gradient(135deg, #EF4444 0%, #F59E0B 100%);

    /* Тени */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(37, 99, 235, 0.25);

    /* Радиусы */
    --radius-card:  8px;
    --radius-btn:   6px;
    --radius-input: 4px;

    /* Размеры */
    --pad-card:     24px;
    --gap-section:  32px;
    --row-height:   36px;
}

/* ─── База ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: 'Roboto Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    font-feature-settings: 'tnum';     /* tabular-nums */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Заголовки ────────────────────────────────────────────────── */
h1 {
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--text-primary);
}

h2 {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px;
    color: var(--text-primary);
}

h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--text-primary);
}

p { margin: 0 0 12px; }

label, .label-small {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
}

/* ─── Ссылки ───────────────────────────────────────────────────── */
a {
    color: var(--link);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* ─── Layout ───────────────────────────────────────────────────── */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

main {
    padding: var(--gap-section) 0;
    min-height: calc(100vh - 120px);
}

.section { margin-bottom: var(--gap-section); }

/* ─── Шапка ────────────────────────────────────────────────────── */
.navbar {
    background: var(--bg-page);
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
}
.navbar-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}
.navbar-brand {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: 0.02em;
}
.navbar-brand:hover { color: var(--text-primary); text-decoration: none; }

.navbar-nav {
    display: flex;
    gap: 4px;
    flex: 1;
}
.nav-link {
    padding: 6px 12px;
    border-radius: var(--radius-btn);
    color: var(--text-primary);
    font-weight: 400;
}
.nav-link:hover {
    background: var(--bg-hover);
    text-decoration: none;
}
.nav-link.active {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 500;
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 14px;
}
.navbar-user .role-badge {
    font-size: 11px;
    padding: 2px 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─── Карточки ─────────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--pad-card);
}
.card + .card { margin-top: 16px; }
.card-tight { padding: 16px; }

/* ─── Кнопки ───────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 16px;
    border: none;
    border-radius: var(--radius-btn);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn-primary {
    background: var(--grad-primary);
    color: var(--text-on-dark);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    box-shadow: var(--shadow-md);
    color: var(--text-on-dark);
}

.btn-success {
    background: var(--grad-success);
    color: var(--text-on-dark);
    box-shadow: var(--shadow-sm);
}
.btn-success:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    color: var(--text-on-dark);
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
}
.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-danger-inline {
    background: transparent;
    color: var(--danger);
    padding: 0;
    height: auto;
    font-weight: 400;
}
.btn-danger-inline:hover { text-decoration: underline; color: var(--danger); }

.btn-sm { height: 26px; padding: 0 10px; font-size: 12px; }

/* ─── Формы ────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 4px; }

.form-control, .form-select {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--link);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.form-row > * { flex: 0 0 auto; }
.form-row .form-control, .form-row .form-select { flex: 1 1 200px; min-width: 140px; }

/* ─── Таблица ──────────────────────────────────────────────────── */
.table-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.table th, .table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table thead th {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-page);
    position: sticky;
    top: 0;
    z-index: 1;
    height: 32px;
}
.table tbody tr {
    height: var(--row-height);
    transition: background 0.1s ease;
}
.table tbody tr:hover { background: var(--bg-hover); }
.table tbody tr:last-child td { border-bottom: none; }

.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .num-bold { font-weight: 500; color: var(--link); }
.table .text-muted { color: var(--text-secondary); }

/* Состояния строк таблицы */
.table tr.row-shadow td {
    opacity: 0.4;
    background: var(--bg-card);
    font-style: italic;
}

/* ─── Бейджи ───────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 10px;
    line-height: 1;
    white-space: nowrap;
}
.badge-success  { background: rgba(16, 185, 129, 0.1);  color: var(--success); }
.badge-warning  { background: rgba(245, 158, 11, 0.1);  color: var(--warning); }
.badge-danger   { background: rgba(239, 68, 68, 0.1);   color: var(--danger); }
.badge-info     { background: rgba(59, 130, 246, 0.1);  color: var(--info); }
.badge-gold     { background: rgba(255, 184, 0, 0.12);  color: #B07800; }
.badge-neutral  { background: var(--bg-page);           color: var(--text-secondary); border: 1px solid var(--border); }

.badge-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* ─── Алерты ───────────────────────────────────────────────────── */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-card);
    border: 1px solid;
    margin-bottom: 16px;
    font-size: 14px;
}
.alert-info    { background: rgba(59, 130, 246, 0.05);  border-color: rgba(59, 130, 246, 0.2);  color: #1E40AF; }
.alert-success { background: rgba(16, 185, 129, 0.05);  border-color: rgba(16, 185, 129, 0.2);  color: #047857; }
.alert-warning { background: rgba(245, 158, 11, 0.05);  border-color: rgba(245, 158, 11, 0.2);  color: #B45309; }
.alert-danger  { background: rgba(239, 68, 68, 0.05);   border-color: rgba(239, 68, 68, 0.2);   color: #B91C1C; }

/* ─── Утилиты ──────────────────────────────────────────────────── */
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap-8 { gap: 8px; }
.flex-gap-12 { gap: 12px; }

.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-right { text-align: right; }

.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }

code, .code {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-page);
    padding: 1px 4px;
    border-radius: 3px;
    border: 1px solid var(--border);
}

/* ─── Pagination ───────────────────────────────────────────────── */
.pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}
.pagination .page {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
    color: var(--text-primary);
    background: var(--bg-page);
    text-decoration: none;
    font-size: 12px;
}
.pagination .page:hover { background: var(--bg-hover); text-decoration: none; }
.pagination .page.active { background: var(--grad-primary); color: var(--text-on-dark); border-color: transparent; }
.pagination .page.disabled { color: var(--text-secondary); cursor: default; }
.pagination .page.disabled:hover { background: var(--bg-page); }

/* ─── Login ────────────────────────────────────────────────────── */
.login-wrap {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-card {
    width: 100%;
    max-width: 360px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 32px;
}
.login-card h1 { text-align: center; margin-bottom: 24px; }

/* ─── Footer ───────────────────────────────────────────────────── */
.footer {
    border-top: 1px solid var(--border);
    padding: 16px 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
}

/* ─── Definition list (для index) ──────────────────────────────── */
.dl-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    margin: 0;
}
.dl-grid dt { color: var(--text-secondary); font-weight: 400; }
.dl-grid dd { margin: 0; font-weight: 500; }

/* ─── Картинка товара ──────────────────────────────────────────── */
.product-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-input);
    border: 1px solid var(--border);
    background: var(--bg-page);
    display: block;
}
.product-thumb-empty {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-input);
    border: 1px solid var(--border);
    background: var(--bg-page);
}

/* ─── Сортировка в заголовках таблицы ──────────────────────────── */
.th-sort {
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-block;
    transition: color 0.1s ease;
}
.th-sort:hover {
    color: var(--link);
    text-decoration: none;
}

/* num-колонка — выравнивание по правому краю в заголовке тоже */
.table thead th.num,
.table tbody td.num { text-align: right; }