/* ==========================================================
   TABLE CARD
========================================================== */

.table-card{

    background:var(--card);

    border:1px solid var(--border-alt);

    border-radius:14px;

    overflow:hidden;

    box-shadow:
        0 2px 8px rgba(15,23,42,.04);

}

/* ==========================================================
   WRAPPER
========================================================== */

.erp-table-wrapper,
div[id$="Table"]{

    width:100%;

    overflow-x:auto;

}

/* ==========================================================
   BULK ACTIONS BAR
========================================================== */

.bulk-actions-bar{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:14px;

    padding:12px 18px;

    margin-bottom:14px;

    background:#FFFBEB;

    border:1px solid #FDE68A;

    border-radius:10px;

}

.bulk-actions-bar #bulkSelectedCount{

    font-size:14px;

    font-weight:600;

    color:#334155;

}

.bulk-actions-bar select{

    height:38px;

    padding:0 12px;

    border:1px solid #CBD5E1;

    border-radius:8px;

    background:#fff;

    color:#0F172A;

    font-size:14px;

}

/* ==========================================================
   SUB-RECIPE TREE (вложена рецепта на съставка, само преглед)
========================================================== */

.src-row{

    display:flex;

    align-items:flex-start;

    gap:6px;

}

.sub-recipe-toggle{

    width:20px;

    height:20px;

    min-width:20px;

    padding:0;

    border:1px solid var(--border-alt);

    border-radius:5px;

    background:var(--card);

    font-size:9px;

    line-height:1;

    cursor:pointer;

    color:var(--text-muted);

    margin-top:2px;

}

.sub-recipe-toggle:hover{

    background:var(--surface-alt);

}

.sub-recipe-spacer{

    display:inline-block;

    width:20px;

    min-width:20px;

}

.src-children{

    margin:8px 0 4px 26px;

    padding-left:12px;

    border-left:2px solid var(--border-alt);

}

.src-node{

    padding:3px 0;

}

.src-header{

    font-size:12px;

    font-weight:600;

    color:var(--text-muted);

    margin-bottom:4px;

}

.src-name{

    font-size:13px;

}

.src-loading,
.src-empty{

    font-size:13px;

    color:var(--text-faint);

    font-style:italic;

}

/* ==========================================================
   INGREDIENT SEARCH (recipes)
========================================================== */

.ingredient-search{

    position:relative;

    margin-bottom:16px;

}

/* .card има overflow:hidden (за да реже ъглите/хедъра). При ниска карта
   това отрязваше падащия списък с резултати от търсенето на съставка и
   той не можеше да се скролва. Докато търсим, картата пуска преливането -
   класът се вкл./изкл. от recipes.js. */
.card.is-ingredient-search-open{

    overflow:visible;

}

.search-results{

    position:absolute;

    z-index:20;

    top:calc(100% + 4px);

    left:0;

    right:0;

    max-height:260px;

    overflow-y:auto;

    background:var(--card);

    border:1px solid var(--border-alt);

    border-radius:10px;

    box-shadow:0 8px 24px rgba(15,23,42,.12);

}

.search-result-item{

    padding:10px 14px;

    cursor:pointer;

    font-size:14px;

}

.search-result-item:hover{

    background:var(--surface-alt);

}

.search-empty{

    padding:10px 14px;

    color:var(--text-muted);

    font-size:14px;

}

/* ==========================================================
   МОДЕЛ ТОРТА + ВКУС ПИКЕР (виж cake_model_picker.js)
========================================================== */

.cake-model-picker{

    margin-top:10px;

    padding:10px;

    background:var(--surface-alt);

    border-radius:10px;

    display:flex;

    flex-direction:column;

    gap:8px;

}

.cake-model-picker-row{

    position:relative;

    display:flex;

    gap:6px;

    align-items:center;

}

.cake-model-search-results{

    position:absolute;

    z-index:30;

    top:calc(100% + 4px);

    left:0;

    right:0;

    max-height:220px;

    overflow-y:auto;

    background:var(--card);

    border:1px solid var(--border-alt);

    border-radius:10px;

    box-shadow:0 8px 24px rgba(15,23,42,.12);

}

.cake-model-search-item{

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 12px;

    cursor:pointer;

    font-size:14px;

}

.cake-model-search-item:hover{

    background:var(--surface-alt);

}

.cake-model-search-empty{

    padding:8px 12px;

    color:var(--text-muted);

    font-size:13px;

}

.cake-model-thumb{

    width:28px;

    height:28px;

    border-radius:6px;

    object-fit:cover;

    flex-shrink:0;

    background:var(--border-alt);

}

.cake-model-thumb.placeholder{

    display:inline-block;

}

.cake-model-preview{

    display:none;

    align-items:center;

    gap:8px;

    font-size:14px;

}

.cake-model-change{

    font-size:12px;

    color:var(--primary);

}

.assign-base-block{

    position:relative;

    margin-bottom:8px;

    min-width:200px;

}

.assign-base-hint{

    font-size:12px;

    color:var(--text-muted);

    margin-bottom:4px;

}

.assign-base-results{

    position:absolute;

    z-index:20;

    top:calc(100% + 4px);

    left:0;

    right:0;

    max-height:220px;

    overflow-y:auto;

    background:var(--card);

    border:1px solid var(--border-alt);

    border-radius:10px;

    box-shadow:0 8px 24px rgba(15,23,42,.12);

}

.assign-base-change{

    font-size:12px;

    color:var(--primary);

    margin-left:6px;

}

.extra-material-add-row{

    position:relative;

    display:flex;

    gap:8px;

    align-items:center;

    margin-top:12px;

}

.extra-material-add-row .extra-material-search{

    flex:1;

}

.extra-material-search-results{

    position:absolute;

    z-index:20;

    top:calc(100% + 4px);

    left:0;

    right:150px;

    max-height:220px;

    overflow-y:auto;

    background:var(--card);

    border:1px solid var(--border-alt);

    border-radius:10px;

    box-shadow:0 8px 24px rgba(15,23,42,.12);

}

.checkbox-inline{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:12px;

    color:var(--text-muted);

    margin-bottom:4px;

    white-space:nowrap;

}

.row-move-col{

    display:flex;

    flex-direction:column;

    gap:2px;

}

.row-move{

    border:1px solid var(--border-alt);

    background:var(--card);

    border-radius:6px;

    width:24px;

    height:20px;

    font-size:10px;

    line-height:1;

    cursor:pointer;

    padding:0;

}

.row-move:hover{

    background:var(--surface-alt);

}

.item-gross{

    font-weight:600;

}

/* ==========================================================
   TABLE
========================================================== */

.erp-table,
.products-table{

    width:100%;

    border-collapse:collapse;

    background:var(--card);

    color:var(--text);

    font-size:14px;

    table-layout:auto;

}

.erp-table thead,
.products-table thead{

    background:var(--surface-alt);

}

.erp-table th,
.products-table th{

    padding:16px 18px;

    text-align:left;

    font-weight:600;

    color:var(--text-muted);

    border-bottom:1px solid var(--border-alt);

    white-space:nowrap;

}

.erp-table th a,
.products-table th a{

    color:inherit;

    text-decoration:none;

}

.erp-table th a:hover,
.products-table th a:hover{

    color:#C9A227;

}

.erp-table td,
.products-table td{

    padding:12px 18px;

    border-bottom:1px solid var(--border);

    vertical-align:middle;

}

.erp-table tbody tr,
.products-table tbody tr{

    transition:.18s;

}

.erp-table tbody tr:hover,
.products-table tbody tr:hover{

    background:var(--surface-alt);

}

/* ==========================================================
   EMPTY
========================================================== */

.erp-table-empty,
.empty{

    padding:70px;

    text-align:center;

    color:var(--text-faint);

}

/* ==========================================================
   COLUMNS
========================================================== */

.check-col{

    width:50px;

}

.image-col{

    width:90px;

}

.sku-col{

    width:150px;

}

/* ==========================================================
   IMAGE
========================================================== */

.product-image-cell{

    width:90px;

}

.product-thumb{

    width:48px;

    height:48px;

    border-radius:12px;

    border:1px solid var(--border-alt);

    object-fit:cover;

    display:block;

}

.product-thumb.placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--surface-alt);

    color:var(--text-faint);

    font-size:20px;

}

/* ==========================================================
   PHOTO ZOOM + LIGHTBOX
========================================================== */

.photo-zoomable{

    cursor:pointer;

    transition:transform .18s ease, box-shadow .18s ease;

}

.photo-zoomable:hover{

    transform:scale(1.6);

    position:relative;

    z-index:5;

    box-shadow:0 10px 28px rgba(0,0,0,.35);

}

.photo-lightbox{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    z-index:9999;

    align-items:center;

    justify-content:center;

    cursor:zoom-out;

}

.photo-lightbox.is-open{

    display:flex;

}

.photo-lightbox img{

    max-width:90vw;

    max-height:90vh;

    border-radius:12px;

    box-shadow:0 20px 60px rgba(0,0,0,.5);

    cursor:default;

}

/* ==========================================================
   PRODUCT
========================================================== */

.product-code{

    font-family:Consolas,monospace;

    color:var(--text-muted);

    font-size:13px;

}

.product-name{

    font-size:15px;

    font-weight:600;

    color:var(--text-strong);

}

/* ==========================================================
   TYPE
========================================================== */

.type-badge{

    display:inline-flex;

    align-items:center;

    padding:4px 10px;

    border-radius:999px;

    background:rgba(37,99,235,.1);

    color:#2563EB;

    font-size:12px;

    font-weight:600;

    white-space:nowrap;

}

/* ==========================================================
   STATUS
========================================================== */

.status-active,
.status-inactive{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:92px;

    height:30px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

}

.status-active{

    background:var(--status-success-bg);

    color:var(--status-success-text);

}

.status-inactive{

    background:var(--status-danger-bg);

    color:var(--status-danger-text);

}

/* ==========================================================
   СРОК НА ГОДНОСТ - цветово отбелязване на ред (Продукти)
========================================================== */

tr.row-expired td{

    background:var(--status-danger-bg);

}

tr.row-expiring-soon td{

    background:var(--status-warning-bg);

}

.expiry-badge{

    display:inline-flex;

    align-items:center;

    gap:4px;

    padding:2px 9px;

    border-radius:999px;

    font-size:11px;

    font-weight:600;

    margin-left:8px;

    white-space:nowrap;

}

.expiry-badge.expired{

    background:var(--status-danger-bg);

    color:var(--status-danger-text);

}

.expiry-badge.expiring-soon{

    background:var(--status-warning-bg);

    color:var(--status-warning-text);

}

.expiry-badge.ok{

    background:var(--status-success-bg);

    color:var(--status-success-text);

}

/* ==========================================================
   PRICE CHANGE
========================================================== */

.price-change{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:80px;

    height:30px;

    padding:0 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

    white-space:nowrap;

}

.price-change.is-up{

    background:var(--status-danger-bg);

    color:var(--status-danger-text);

}

.price-change.is-down{

    background:var(--status-success-bg);

    color:var(--status-success-text);

}

.price-change.is-flat{

    background:var(--border);

    color:var(--text-muted);

}

/* ==========================================================
   PRICE ANCHOR
========================================================== */

.anchor-form{

    display:inline-flex;

    align-items:center;

    gap:6px;

}

.anchor-input{

    width:100px;

    height:32px;

    padding:0 8px;

    border:1px solid var(--border);

    border-radius:8px;

    background:var(--bg);

    color:var(--text);

    font-size:13px;

}

.anchor-form .action-btn{

    width:32px;

    height:32px;

}

/* ==========================================================
   EXPANDABLE ROWS
========================================================== */

.row-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    width:28px;

    height:28px;

    border:1px solid var(--border-strong);

    background:var(--surface-alt);

    color:var(--text-strong);

    cursor:pointer;

    border-radius:8px;

    transition:.15s;

}

.row-toggle:hover{

    background:var(--border-strong);

    color:var(--text-strong);

}

.row-toggle svg{

    transition:transform .15s;

}

.row-toggle.is-open svg{

    transform:rotate(90deg);

}

.nested-table{

    margin:0;

    background:var(--surface-alt);

    border-radius:10px;

    overflow:hidden;

}

/* ==========================================================
   ACTIONS
========================================================== */

.actions{

    display:flex;

    gap:8px;

    align-items:center;

}

.action-btn{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:9px;

    color:var(--text-muted);

    text-decoration:none;

    transition:.18s;

}

.action-btn:hover{

    background:var(--border);

    color:var(--text-strong);

}

/* <button class="action-btn"> (форма с POST, ред в JS) - без бял фон и излишен отстъп от общото правило за button. */
button.action-btn{

    background:transparent;

    border:none;

    padding:0;

    cursor:pointer;

}

/* Бутоните за изтриване (кошче) са червени и в покой, не само при посочване. */
.action-btn.danger{

    color:#DC2626;

}

html[data-theme="dark"] .action-btn.danger{

    color:#F87171;

}

.action-btn.danger:hover{

    background:var(--status-danger-bg);

    color:var(--status-danger-text);

}

.action-btn.success:hover{

    background:var(--status-success-bg);

    color:var(--status-success-text);

}

/* ==========================================================
   ПРИКАЧЕНИ ФАЙЛОВЕ (превозни средства - сервизно обслужване)
========================================================== */

.service-attachment{

    display:flex;

    align-items:center;

    gap:6px;

    white-space:nowrap;

}

.service-attachment + .service-attachment{

    margin-top:4px;

}

.service-attachment a:last-child{

    color:var(--text-muted);

    text-decoration:none;

    font-weight:700;

}

.service-attachment a:last-child:hover{

    color:var(--status-danger-text);

}

/* ==========================================================
   FOOTER
========================================================== */

.table-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px 22px;

    border-top:1px solid var(--border-alt);

    background:var(--card);

}

.table-info{

    color:var(--text-muted);

    font-size:13px;

}

.pagination{

    display:flex;

    align-items:center;

    gap:10px;

}

.page-btn{

    width:36px;

    height:36px;

    border:1px solid var(--border-strong);

    background:var(--card);

    color:var(--text);

    border-radius:9px;

    cursor:pointer;

    transition:.18s;

    font-weight:600;

}

/* .page-btn се ползва и като <a>/<span> (обикновена страница с презареждане,
   не AJAX - виж "Модели торти"), не само <button> - на <a>/<span> трябват
   явно центриране на стрелката и премахнат underline. */
a.page-btn,
span.page-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

}

span.page-btn[aria-disabled]{

    opacity:.45;

    cursor:not-allowed;

}

.page-btn:hover:not(:disabled){

    border-color:#C9A227;

}

.page-btn:disabled{

    opacity:.45;

    cursor:not-allowed;

}

.per-page select{

    width:80px;

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:992px){

    .table-footer{

        flex-direction:column;

        align-items:flex-start;

    }

}

@media(max-width:768px){

    .products-table{

        min-width:900px;

    }

    .erp-table{

        min-width:700px;

    }

    #ingredientsTable{

        min-width:820px;

    }

}

.products-table thead th{

    position:sticky;
    top:0;
    z-index:5;

    background:var(--surface-alt);

}

.check-col,
.image-col,
.actions{

    text-align:center;

}

.products-table td.actions{

    display:flex;
    justify-content:center;
}

/* Действията (редакция/копирай/трий...) остават залепени вдясно, докато
   таблицата се скролва хоризонтално на тесен екран (виж min-width по-горе) -
   плътен фон е нужен, за да не прозира скроллнатото съдържание отдолу. */
.products-table td.actions,
.products-table thead th:last-child{

    position:sticky;
    right:0;

    background:var(--card);

    box-shadow:-6px 0 6px -6px rgba(15,23,42,.15);

}

.products-table td.actions{

    z-index:2;

}

.products-table thead th:last-child{

    z-index:6;

    background:var(--surface-alt);

}

tr.row-expired td.actions{

    background:var(--status-danger-bg);

}

tr.row-expiring-soon td.actions{

    background:var(--status-warning-bg);

}

.products-table tbody tr:hover td.actions{

    background:var(--surface-alt);

}

.status-active::before{

    content:"●";
    margin-right:6px;

}

.status-inactive::before{

    content:"●";
    margin-right:6px;

}

.products-table tbody tr:hover{

    background:var(--surface-alt);

    box-shadow:
        inset 4px 0 #C9A227;

}

/* ==========================================================
   CONTEXT MENU (десен бутон върху ред)
========================================================== */

.context-menu{

    position:fixed;

    z-index:10000;

    min-width:210px;

    background:var(--card);

    border:1px solid var(--border-alt);

    border-radius:10px;

    box-shadow:0 12px 32px rgba(15,23,42,.18);

    padding:6px;

}

.context-menu-item{

    width:100%;

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 12px;

    border:none;

    border-radius:8px;

    background:transparent;

    color:var(--text-strong);

    font-size:14px;

    font-weight:500;

    text-align:left;

    cursor:pointer;

    transition:.15s;

}

.context-menu-item:hover{

    background:var(--surface-alt);

}

.context-menu-item svg,
.context-menu-item i{

    width:16px;

    height:16px;

    color:var(--text-muted);

}

/* ==========================================================
   КОМЕНТАРИ (модул "Задачи")
========================================================== */

.task-comments{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.task-comment{

    padding:12px 14px;

    background:var(--surface-alt);

    border-radius:10px;

}

.task-comment-header{

    display:flex;

    justify-content:space-between;

    gap:12px;

    margin-bottom:6px;

    font-size:13px;

}

.task-comment-body{

    white-space:pre-line;

}

/* Засичане на рецепти (recipes/partials/table.php): цветна точка на реда. */
.recipe-check-dot{
    display:inline-block;
    width:12px;
    height:12px;
    border-radius:50%;
    flex:0 0 auto;
}

.recipe-check-chip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:3px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--text);
    text-decoration:none;
}

.recipe-check-chip:hover{
    border-color:var(--primary);
}

/* Непълна рецепта - "!" до името (recipes/partials/table.php) и плаващата
   подсказка (RecipeList.js). */
.recipe-warn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    margin-left:8px;
    border-radius:50%;
    background:#F59E0B;
    color:#1F2937;
    font-size:12px;
    font-weight:800;
    line-height:1;
    cursor:pointer;
    user-select:none;
    vertical-align:middle;
}

.recipe-warn:hover,
.recipe-warn:focus-visible{
    background:#D97706;
    outline:none;
}

.recipe-warn-tip{
    position:absolute;
    z-index:2000;
    max-width:360px;
    padding:10px 14px;
    background:var(--card);
    color:var(--text);
    border:1px solid #F59E0B;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(15,23,42,.25);
    font-size:13px;
}

.recipe-warn-tip ul{
    margin:6px 0 0;
    padding-left:18px;
}

/* Табове над списъка с партньори: Всички / Доставчици / Клиенти ... (partners/index.php) */
.partner-tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.partner-tab{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--text);
    text-decoration:none;
    font-weight:600;
    background:var(--card);
}

.partner-tab:hover{
    border-color:var(--primary);
}

.partner-tab.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}

.partner-tab-count{
    font-size:12px;
    font-weight:700;
    padding:1px 8px;
    border-radius:999px;
    background:rgba(127,127,127,.18);
}

.partner-tab.active .partner-tab-count{
    background:rgba(255,255,255,.28);
}