/* ============================================================
   Лetnee — Admin Theme
   Основан на палитре сайта продукции (template 3)
   Шрифт: Inter (sans-serif, без засечек)
   ============================================================ */

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

/* ── Переменные ─────────────────────────────────────────── */
:root {
    --primary:        #5d9b6a;
    --primary-dark:   #4a7d55;
    --primary-hover:  #528a5e;
    --primary-light:  #e8f3ea;
    --accent:         #e34f32;
    --accent-dark:    #c93d22;

    --bg:             #f4f0e8;
    --bg-card:        #ffffff;
    --text:           #2c2417;
    --text-muted:     #7a6b58;
    --border:         #d6c9ae;

    --sidebar-bg:     #2c2417;
    --sidebar-text:   #c9bfb0;
    --sidebar-hover:  rgba(255,255,255,.07);
    --sidebar-active: rgba(93,155,106,.18);
    --sidebar-accent: #5d9b6a;
    --sidebar-width:  240px;

    --navbar-bg:      #ffffff;
    --navbar-border:  #d6c9ae;

    --radius-sm:      6px;
    --radius:         10px;
    --radius-lg:      12px;

    --shadow-sm:      0 1px 4px rgba(44,36,23,.08);
    --shadow:         0 2px 8px rgba(44,36,23,.10);
    --shadow-md:      0 4px 16px rgba(44,36,23,.12);

    --transition:     .18s ease;
}

/* ── Типографика ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--text);
}

.page-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 1.25rem;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
    background-color: var(--sidebar-bg) !important;
    border-right: none !important;
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
}

.sidebar-content {
    background-color: var(--sidebar-bg) !important;
}

.sidebar-brand {
    padding: 1rem 1.25rem !important;
    color: #ffffff !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    text-decoration: none !important;
    display:block;
}
.sidebar-brand:hover { color: #ffffff !important; }


.sidebar-nav {
    padding: .5rem 0 !important;
}

.sidebar-header {
    padding: 1rem 1.25rem .35rem !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: rgba(201,191,176,.45) !important;
}

.sidebar-item { list-style: none !important; }

.sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: .6rem !important;
    padding: .55rem 1.25rem !important;
    color: var(--sidebar-text) !important;
    font-size: .85rem !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    border-left: 3px solid transparent !important;
    transition: background var(--transition), color var(--transition), border-color var(--transition) !important;
    cursor: pointer !important;
}

.sidebar-link:hover,
.sidebar-link:focus {
    background: var(--sidebar-hover) !important;
    color: #ffffff !important;
    border-left-color: rgba(93,155,106,.5) !important;
}

.sidebar-item.active > .sidebar-link,
.sidebar-link.active {
    background: var(--sidebar-active) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    border-left-color: var(--sidebar-accent) !important;
}

.sidebar-link i,
.sidebar-link svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    opacity: .75 !important;
}
.sidebar-item.active > .sidebar-link i,
.sidebar-item.active > .sidebar-link svg,
.sidebar-link:hover i,
.sidebar-link:hover svg { opacity: 1 !important; }

/* Подменю */
.sidebar-dropdown {
    background: rgba(0,0,0,.18) !important;
    padding: .2rem 0 !important;
}
.sidebar-dropdown .sidebar-link {
    padding-left: 2.75rem !important;
    font-size: .82rem !important;
}

/* ── Top Navbar ──────────────────────────────────────────── */
.navbar.navbar-bg,
.navbar-bg {
    background: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--navbar-border) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: .5rem 1.25rem !important;
}

.navbar-bg .nav-link,
.navbar-bg .text-dark {
    color: var(--text) !important;
    font-size: .85rem !important;
    font-weight: 500 !important;
}

.navbar-bg .dropdown-menu {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-md) !important;
}

.navbar-bg .badge.bg-danger {
    background-color: var(--accent) !important;
}

/* ── Main content area ───────────────────────────────────── */
.main { background-color: var(--bg) !important; }

main.content {
    padding: 1.5rem 1.5rem !important;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
}

.card-header {
    background: #faf7f2 !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding: .875rem 1.25rem !important;
    font-weight: 600 !important;
    font-size: .9rem !important;
    color: var(--text) !important;
}

.card-body { padding: 1.25rem !important; }

.card-footer {
    background: #faf7f2 !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    padding: .875rem 1.25rem !important;
}

/* ── Таблицы ─────────────────────────────────────────────── */
.table {
    color: var(--text) !important;
    font-size: .85rem !important;
    border-color: var(--border) !important;
}

.table thead th {
    background: #f0ece3 !important;
    color: var(--text-muted) !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    border-bottom: 2px solid var(--border) !important;
    padding: .65rem .875rem !important;
    white-space: nowrap !important;
}

.table td {
    padding: .6rem .875rem !important;
    vertical-align: middle !important;
    border-color: var(--border) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: #faf7f2 !important;
}

.table-hover > tbody > tr:hover > td {
    background-color: var(--primary-light) !important;
}

/* ── Кнопки ──────────────────────────────────────────────── */
.btn {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: .83rem !important;
    border-radius: var(--radius) !important;
    padding: .42rem .9rem !important;
    transition: all var(--transition) !important;
    border-width: 1px !important;
}

/* Primary — зелёный */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(93,155,106,.35) !important;
}

/* Danger — акцентный красно-оранжевый */
.btn-danger {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus {
    background-color: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
    color: #fff !important;
}

/* Success — чуть темнее primary */
.btn-success {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: #fff !important;
}
.btn-success:hover, .btn-success:focus {
    background-color: #3d6847 !important;
    border-color: #3d6847 !important;
    color: #fff !important;
}

/* Warning */
.btn-warning {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #fff !important;
}
.btn-warning:hover, .btn-warning:focus {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
    color: #fff !important;
}

/* Info */
.btn-info {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #fff !important;
}
.btn-info:hover, .btn-info:focus {
    background-color: #0369a1 !important;
    border-color: #0369a1 !important;
    color: #fff !important;
}

/* Secondary */
.btn-secondary {
    background-color: var(--border) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.btn-secondary:hover {
    background-color: #c4b89c !important;
    border-color: #c4b89c !important;
    color: var(--text) !important;
}

/* Outline variants */
.btn-outline-primary {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}

/* Иконочные кнопки */
.btn-icon {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-sm) !important;
}

/* ── Формы ───────────────────────────────────────────────── */
.form-control,
.form-select {
    font-family: 'Inter', sans-serif !important;
    font-size: .85rem !important;
    color: var(--text) !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: .45rem .75rem !important;
    transition: border-color var(--transition), box-shadow var(--transition) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(93,155,106,.2) !important;
    outline: none !important;
}

.form-control::placeholder { color: var(--text-muted) !important; opacity: .6 !important; }

.form-label {
    font-size: .8rem !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    margin-bottom: .35rem !important;
}

.input-group .form-control:first-child { border-radius: var(--radius) 0 0 var(--radius) !important; }
.input-group .form-control:last-child  { border-radius: 0 var(--radius) var(--radius) 0 !important; }
.input-group .btn:last-child           { border-radius: 0 var(--radius) var(--radius) 0 !important; }
.input-group .btn:first-child          { border-radius: var(--radius) 0 0 var(--radius) !important; }

/* ── Бейджи ──────────────────────────────────────────────── */
.badge {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: .72rem !important;
    padding: .3em .65em !important;
    border-radius: var(--radius-sm) !important;
}

.badge.bg-primary  { background-color: var(--primary) !important; }
.badge.bg-success  { background-color: var(--primary-dark) !important; }
.badge.bg-danger   { background-color: var(--accent) !important; }
.badge.bg-warning  { background-color: #d97706 !important; color: #fff !important; }
.badge.bg-info     { background-color: #0284c7 !important; }
.badge.bg-secondary { background-color: var(--border) !important; color: var(--text) !important; }

/* Статусные бейджи транзакций */
.badge-status-processed {
    background-color: var(--primary-light) !important;
    color: var(--primary-dark) !important;
    border: 1px solid rgba(93,155,106,.3) !important;
}
.badge-status-cancelled {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid rgba(227,79,50,.2) !important;
}

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
    border-radius: var(--radius) !important;
    font-size: .85rem !important;
    border-width: 1px !important;
    padding: .75rem 1rem !important;
}
.alert-success {
    background-color: var(--primary-light) !important;
    border-color: rgba(93,155,106,.3) !important;
    color: var(--primary-dark) !important;
}
.alert-danger {
    background-color: #fef2f2 !important;
    border-color: rgba(227,79,50,.25) !important;
    color: #991b1b !important;
}
.alert-warning {
    background-color: #fffbeb !important;
    border-color: rgba(217,119,6,.25) !important;
    color: #92400e !important;
}
.alert-info {
    background-color: #eff6ff !important;
    border-color: rgba(2,132,199,.25) !important;
    color: #1e40af !important;
}

/* ── Модальные окна ──────────────────────────────────────── */
.modal-content {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
}
.modal-header {
    background: #faf7f2 !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding: 1rem 1.25rem !important;
}
.modal-title {
    font-size: .95rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}
.modal-footer {
    background: #faf7f2 !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    padding: .75rem 1.25rem !important;
}
.modal-body { padding: 1.25rem !important; }

/* ── Dropdown ────────────────────────────────────────────── */
.dropdown-menu {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-md) !important;
    font-size: .85rem !important;
    padding: .35rem 0 !important;
}
.dropdown-item {
    color: var(--text) !important;
    padding: .45rem .875rem !important;
}
.dropdown-item:hover {
    background-color: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}

/* ── Pagination ──────────────────────────────────────────── */
.page-link {
    color: var(--primary) !important;
    border-color: var(--border) !important;
    font-size: .83rem !important;
}
.page-link:hover { background-color: var(--primary-light) !important; }
.page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

/* ── Flash messages ──────────────────────────────────────── */
.flash-messages { margin-bottom: 1rem; }

/* ── Утилиты ─────────────────────────────────────────────── */
.text-primary  { color: var(--primary) !important; }
.text-muted    { color: var(--text-muted) !important; }
.text-eco      { color: var(--primary-dark) !important; }
.bg-eco-light  { background-color: var(--primary-light) !important; }
.border-eco    { border-color: var(--border) !important; }

/* Scan indicator — для сканера штрихкода */
.scan-mode-active {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(93,155,106,.25) !important;
    animation: scanPulse 1.5s infinite !important;
}
@keyframes scanPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(93,155,106,.25); }
    50%       { box-shadow: 0 0 0 6px rgba(93,155,106,.10); }
}

/* Scan indicator badge */
#scan-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 20px;
    position: relative;
    transition: background-color .2s, color .2s;
    background-color: #e8f3ea;
    color: var(--primary-dark);
    border: 1px solid rgba(93,155,106,.3);
}
#scan-indicator .scan-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    display: inline-block;
    flex-shrink: 0;
}
#scan-indicator.scanning {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary-dark);
    animation: scanIndicatorPulse .6s ease-out;
}
#scan-indicator.scanning .scan-dot {
    background: #fff;
    animation: scanDotPulse .6s ease-out infinite;
}
@keyframes scanIndicatorPulse {
    0%   { box-shadow: 0 0 0 0 rgba(93,155,106,.6); }
    70%  { box-shadow: 0 0 0 8px rgba(93,155,106,0); }
    100% { box-shadow: 0 0 0 0 rgba(93,155,106,0); }
}
@keyframes scanDotPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}

/* ── Layout (replaces AdminKit structural CSS) ───────────── */
html, body { height: 100%; }

.wrapper {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
    transition: transform .22s ease, width .22s ease;
    z-index: 200;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 2px; }

/* Collapsed state */
.sidebar-collapsed .sidebar {
    width: 0 !important;
    min-width: 0 !important;
    transform: translateX(-100%);
    overflow: hidden;
}

/* Main column */
.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Top navbar */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

/* Hamburger button */
.sidebar-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    transition: color var(--transition);
    text-decoration: none;
}
.sidebar-toggle:hover { color: var(--text); }

.hamburger {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    position: relative;
    border-radius: 2px;
    transition: background var(--transition);
}
.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--transition);
}
.hamburger::before { top: -6px; }
.hamburger::after  { top:  6px; }

/* ── Responsive sidebar ──────────────────────────────────── */
@media (max-width: 768px) {
    main.content { padding: 1rem !important; }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        transform: translateX(-100%);
        box-shadow: 4px 0 24px rgba(0,0,0,.3);
    }
    .sidebar.sidebar-open {
        transform: translateX(0);
    }
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 199;
    }
    .sidebar-overlay.active { display: block; }
}