/* ==========================================================================
   Znak Food Admin UI — современная тёмная тема поверх Bootstrap 5
   Подключать ПОСЛЕ bootstrap.min.css на всех страницах админки.
   ========================================================================== */

:root, [data-bs-theme=dark]{
    --a-bg:        #0a0d12;
    --a-surface:   #10141b;
    --a-surface-2: #151a23;
    --a-surface-3: #1a202b;
    --a-border:    rgba(148, 163, 184, .12);
    --a-border-2:  rgba(148, 163, 184, .2);
    --a-text:      #e6eaf2;
    --a-muted:     #8b95a7;
    --a-accent:    #6366f1;
    --a-accent-2:  #8b5cf6;
    --a-accent-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --a-danger:    #f87171;
    --a-success:   #34d399;
    --a-radius:    14px;
    --a-radius-sm: 10px;

    --bs-body-bg: var(--a-bg);
    --bs-body-color: var(--a-text);
    --bs-border-color: var(--a-border);
    --bs-secondary-color: var(--a-muted);
}

html{ scrollbar-color: #2a3342 transparent; }
body{
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(99,102,241,.08), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(139,92,246,.06), transparent 60%),
        var(--a-bg);
    color: var(--a-text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    letter-spacing: .01em;
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#2a3342; border-radius:8px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#39445a; background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }

/* --------------------------------------------------------------------------
   Каркас: сайдбар + контент
   -------------------------------------------------------------------------- */
.app-shell{
    display:grid !important;
    grid-template-columns: 248px 1fr !important;
    min-height:100vh;
}
@media (max-width: 991.98px){
    .app-shell{ grid-template-columns: 72px 1fr !important; }
    .sidebar a span, .sidebar .sidebar-label{ display:none; }
}
.sidebar{
    position:sticky; top:0; height:100vh; overflow-y:auto;
    background: rgba(13, 17, 24, .85) !important;
    backdrop-filter: blur(14px);
    border-right:1px solid var(--a-border) !important;
    padding:18px 14px !important;
    display:flex; flex-direction:column; gap:2px;
}
.sidebar h4{
    margin:2px 6px 18px !important;
    padding-bottom:16px;
    border-bottom:1px solid var(--a-border);
}
.sidebar h4 img{ height:40px !important; }
.sidebar a{
    display:flex !important; align-items:center;
    padding:.62rem .85rem !important;
    color: var(--a-muted) !important;
    border-radius: var(--a-radius-sm) !important;
    text-decoration:none;
    font-weight:500; font-size:13.5px;
    transition: background .15s ease, color .15s ease, transform .15s ease;
    position:relative;
}
.sidebar a i{ font-size:16px; width:24px; flex:0 0 auto; opacity:.9; }
.sidebar a:hover{ background: var(--a-surface-2) !important; color: var(--a-text) !important; }
.sidebar a.active{
    background: linear-gradient(135deg, rgba(99,102,241,.16), rgba(139,92,246,.12)) !important;
    color:#fff !important;
    box-shadow: inset 0 0 0 1px rgba(139,92,246,.28);
}
.sidebar a.active::before{
    content:""; position:absolute; left:-14px; top:20%; bottom:20%;
    width:3px; border-radius:0 3px 3px 0; background: var(--a-accent-grad);
}
.sidebar a#logout{ margin-top:auto; color:#c98181 !important; }
.sidebar a#logout:hover{ background:rgba(248,113,113,.1) !important; color:#f5a4a4 !important; }

.content{ padding:26px 30px !important; max-width:1600px; }
@media (max-width: 767.98px){ .content{ padding:16px !important; } }

/* Заголовок страницы + тулбар */
.content h3{
    font-weight:700; font-size:22px; letter-spacing:-.01em;
}
.toolbar{ display:flex; align-items:center; gap:10px !important; flex-wrap:nowrap; }
/* инпуты/селекты в тулбаре не растягиваются на 100% и не ломают строку */
.toolbar .form-control, .toolbar .form-select{ width:auto; flex:0 1 auto; }
.toolbar .btn{ white-space:nowrap; flex:0 0 auto; }
@media (max-width: 767.98px){ .toolbar{ flex-wrap:wrap; } }

/* --------------------------------------------------------------------------
   Карточки
   -------------------------------------------------------------------------- */
.card{
    background: var(--a-surface) !important;
    border:1px solid var(--a-border) !important;
    border-radius: var(--a-radius) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.25);
    overflow:hidden;
}
.card .fs-3{ font-weight:700; }
.card .text-secondary{ color: var(--a-muted) !important; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; }

/* --------------------------------------------------------------------------
   Таблицы
   -------------------------------------------------------------------------- */
.table{ --bs-table-bg: transparent; margin:0; font-size:13.5px; }
.table > :not(caption) > * > *{
    background: transparent !important;
    border-bottom-color: var(--a-border) !important;
    padding:.72rem .9rem;
    vertical-align:middle;
}
.table thead th{
    color: var(--a-muted) !important;
    font-size:11.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.07em;
    border-bottom:1px solid var(--a-border-2) !important;
    white-space:nowrap;
    position:sticky; top:0; z-index:1;
    background: var(--a-surface) !important;
}
.table-hover tbody tr{ transition: background .12s ease; }
.table-hover tbody tr:hover > *{ background: rgba(99,102,241,.06) !important; }
.table tbody tr:last-child > *{ border-bottom:0 !important; }
/* колонка действий: кнопки в одну строку */
.table td:last-child{ white-space:nowrap; }
.table td:last-child .btn{ display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */
.btn{ border-radius: var(--a-radius-sm); font-weight:600; font-size:13.5px; letter-spacing:.01em; }
.btn-primary{
    background: var(--a-accent-grad) !important;
    border:0 !important;
    box-shadow: 0 6px 20px rgba(99,102,241,.35);
}
.btn-primary:hover{ filter:brightness(1.1); box-shadow: 0 8px 26px rgba(99,102,241,.45); }
.btn-outline-light{
    border-color: var(--a-border-2) !important;
    color: var(--a-text) !important;
    background: var(--a-surface-2) !important;
}
.btn-outline-light:hover{ background: var(--a-surface-3) !important; border-color: var(--a-border-2) !important; }
.btn-outline-danger{ border-color: rgba(248,113,113,.35) !important; color: var(--a-danger) !important; }
.btn-outline-danger:hover{ background: rgba(248,113,113,.12) !important; color:#fca5a5 !important; }
.btn-sm{ border-radius:8px; }

/* --------------------------------------------------------------------------
   Формы
   -------------------------------------------------------------------------- */
.form-label{
    color: var(--a-muted);
    font-size:11.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.06em;
    margin-bottom:.35rem;
}
.form-control, .form-select{
    background: var(--a-surface-2) !important;
    border:1px solid var(--a-border) !important;
    border-radius: var(--a-radius-sm) !important;
    color: var(--a-text) !important;
    font-size:13.5px;
    padding:.55rem .8rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder{ color:#5b6577; }
.form-control:focus, .form-select:focus{
    border-color: rgba(139,92,246,.55) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.18) !important;
}
.form-control-color{ padding:.3rem; height:38px; }
.form-check-input{
    background-color: var(--a-surface-2);
    border-color: var(--a-border-2);
}
.form-check-input:checked{
    background-color: var(--a-accent);
    border-color: var(--a-accent);
}
.form-check-input:focus{ box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.input-group-text{ background: var(--a-surface-3) !important; border-color: var(--a-border) !important; color: var(--a-muted); }

/* --------------------------------------------------------------------------
   Модальные окна
   -------------------------------------------------------------------------- */
.modal-backdrop.show{ opacity:.7; backdrop-filter: blur(2px); }
.modal-content{
    background: var(--a-surface) !important;
    border:1px solid var(--a-border-2) !important;
    border-radius:18px !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.modal-header{
    border-bottom:1px solid var(--a-border) !important;
    padding:16px 22px;
}
.modal-title{ font-weight:700; font-size:17px; }
.modal-body{ padding:22px; }
.modal-footer{
    border-top:1px solid var(--a-border) !important;
    padding:14px 22px;
    position:sticky; bottom:0;
    background: var(--a-surface);
    border-radius:0 0 18px 18px;
}
.modal-dialog-scrollable .modal-body{ scrollbar-width:thin; }

/* Секции внутри форм (модалка товара и др.) */
.form-section{
    border:1px solid var(--a-border);
    border-radius: var(--a-radius);
    padding:16px 16px 18px;
    margin-bottom:14px;
    background: rgba(255,255,255,.015);
}
.form-section:last-child{ margin-bottom:0; }
.form-section__title{
    display:flex; align-items:center; gap:8px;
    font-size:12px; font-weight:700;
    text-transform:uppercase; letter-spacing:.09em;
    color:#a5b4fc;
    margin:0 0 14px;
}
.form-section__title i{ font-size:14px; }
hr{ border-color: var(--a-border); opacity:1; }

/* --------------------------------------------------------------------------
   Загрузка изображений (модалка товара)
   -------------------------------------------------------------------------- */
.img-upload{
    display:flex; gap:12px; align-items:stretch;
}
.img-upload__preview{
    flex:0 0 92px; width:92px; height:92px;
    border-radius:12px;
    border:1px dashed var(--a-border-2);
    background: var(--a-surface-2);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; position:relative;
    color:#5b6577; font-size:20px;
}
.img-upload__preview img{
    width:100%; height:100%; object-fit:cover; display:block;
}
.img-upload__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; justify-content:center; }
.img-upload__drop{
    border:1px dashed var(--a-border-2);
    border-radius: var(--a-radius-sm);
    padding:9px 12px;
    text-align:center;
    font-size:12.5px; color: var(--a-muted);
    cursor:pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
    user-select:none;
}
.img-upload__drop:hover, .img-upload__drop.is-drag{
    border-color: rgba(139,92,246,.6);
    background: rgba(99,102,241,.08);
    color:#c7d2fe;
}
.img-upload__drop.is-loading{ pointer-events:none; opacity:.6; }
.img-upload__path{ font-size:11.5px !important; padding:.35rem .6rem !important; color: var(--a-muted) !important; }
.img-upload__clear{
    position:absolute; top:4px; right:4px;
    width:20px; height:20px; border-radius:6px; border:0;
    background:rgba(0,0,0,.65); color:#fff; font-size:11px; line-height:1;
    display:none; align-items:center; justify-content:center; cursor:pointer;
}
.img-upload__preview.has-img .img-upload__clear{ display:inline-flex; }

/* --------------------------------------------------------------------------
   Tom Select (кастомные селекты с поиском) — тёмная тема
   -------------------------------------------------------------------------- */
/* фиксированная геометрия: селект не меняет размеров при открытии/вводе */
.ts-wrapper{ flex:0 0 auto; }
.ts-wrapper .ts-control{
    background: var(--a-surface-2) !important;
    border:1px solid var(--a-border) !important;
    border-radius: var(--a-radius-sm) !important;
    color: var(--a-text) !important;
    font-size:13px;
    padding:0 26px 0 .7rem;
    height:36px;
    min-height:36px;
    box-shadow:none !important;
    display:flex; align-items:center;
    flex-wrap:nowrap;
    overflow:hidden;
    white-space:nowrap;
}
.ts-wrapper .ts-control > div{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ts-wrapper .ts-control input{
    min-width:0 !important;
    flex:1 1 0 !important;
    height:100%;
}
.ts-wrapper.focus .ts-control{
    border-color: rgba(139,92,246,.55) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.18) !important;
}
.ts-wrapper .ts-control input{ color: var(--a-text) !important; font-size:13px; }
.ts-wrapper .ts-control input::placeholder{ color:#5b6577; }
.ts-wrapper.single .ts-control{ background-image:none !important; }
.ts-wrapper.single .ts-control::after{
    content:""; position:absolute; right:12px; top:50%;
    width:7px; height:7px; margin-top:-5px;
    border-right:1.5px solid var(--a-muted); border-bottom:1.5px solid var(--a-muted);
    transform:rotate(45deg);
}
.ts-dropdown{
    background: var(--a-surface-3) !important;
    border:1px solid var(--a-border-2) !important;
    border-radius: var(--a-radius-sm) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.5) !important;
    color: var(--a-text) !important;
    font-size:13px;
    z-index: 1100;
}
.ts-dropdown .option{ padding:.5rem .75rem; }
.ts-dropdown .option.active{
    background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(139,92,246,.2)) !important;
    color:#fff !important;
}
.ts-dropdown .option.selected{ color:#a5b4fc !important; }
.ts-dropdown .no-results{ padding:.5rem .75rem; color: var(--a-muted); }
.ts-dropdown-input{
    background: var(--a-surface-2) !important;
    border:1px solid var(--a-border) !important;
    color: var(--a-text) !important;
    border-radius:8px;
    margin:6px; width:calc(100% - 12px);
    padding:.4rem .6rem;
}

/* --------------------------------------------------------------------------
   Прочее
   -------------------------------------------------------------------------- */
.row-thumb{
    width:40px; height:40px; border-radius:9px; object-fit:cover;
    border:1px solid var(--a-border);
    background: var(--a-surface-2);
    display:block;
}
.alert{ border-radius: var(--a-radius-sm); }
.badge{ font-weight:600; letter-spacing:.02em; }
.status-yes{ color: var(--a-success); font-weight:600; }
.status-no{ color: var(--a-muted); }
.search-input, #search{ min-width:220px; }