/* ==========================================================
   CABINETS INDEX — MODERN DASH STYLE
   Full file replacement
========================================================== */

:root{
    --cabs-text: #0f172a;
    --cabs-muted: #64748b;

    --cabs-bg: #ffffff;
    --cabs-line: rgba(148,163,184,.35);

    --cabs-blue: #2563eb;
    --cabs-indigo: #4f46e5;
    --cabs-violet: #7c3aed;

    --cabs-ok: #16a34a;
    --cabs-warn: #f59e0b;
    --cabs-bad: #ef4444;

    --cabs-radius: 18px;
    --cabs-radius-sm: 14px;

    --cabs-shadow: 0 16px 40px rgba(2, 6, 23, .08);
    --cabs-shadow-soft: 0 10px 26px rgba(2, 6, 23, .06);
}

/* container */
.cabs{
    position: relative;
}

/* ==========================================================
   HERO
========================================================== */

.cabs-hero{
    border-radius: var(--cabs-radius);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--cabs-line);
    box-shadow: var(--cabs-shadow);
    background:
        radial-gradient(circle at 20% 10%, rgba(99,102,241,.16), transparent 55%),
        radial-gradient(circle at 80% 0%, rgba(37,99,235,.18), transparent 55%),
        linear-gradient(180deg, #ffffff, #fbfdff);
}

.cabs-hero-bg{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.cabs-grid{
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image:
        linear-gradient(to right, rgba(148,163,184,.18) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148,163,184,.18) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(circle at 25% 20%, #000 0, transparent 58%);
}

.cabs-blob{
    position: absolute;
    border-radius: 999px;
    opacity: .55;
    transform: translateZ(0);
    animation: cabsFloat 10s ease-in-out infinite;
}

.cabs-blob-1{
    width: 260px; height: 260px;
    left: -90px; top: -90px;
    background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.26), transparent 60%);
}
.cabs-blob-2{
    width: 320px; height: 320px;
    right: -120px; top: -120px;
    background: radial-gradient(circle at 40% 40%, rgba(124,58,237,.22), transparent 62%);
    animation-delay: -3s;
}

@keyframes cabsFloat{
    0%,100%{ transform: translateY(0) translateX(0); }
    50%{ transform: translateY(10px) translateX(6px); }
}

.cabs-hero-inner{
    position: relative;
    z-index: 1;
    padding: 18px 18px 16px;
}

.cabs-hero-head{
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 14px;
    align-items: start;
}

.cabs-kicker{
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cabs-muted);
    margin-bottom: 6px;
}

.cabs-title{
    font-size: 20px;
    font-weight: 800;
    color: var(--cabs-text);
    line-height: 1.15;
    margin-bottom: 6px;
}

.cabs-title-accent{
    background: linear-gradient(90deg, var(--cabs-blue), var(--cabs-violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cabs-subtitle{
    font-size: 13px;
    color: #475569;
    max-width: 720px;
}

.cabs-pill-row{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.cabs-pill{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    color: #0f172a;
    border: 1px solid rgba(148,163,184,.35);
    background: rgba(255,255,255,.75);
    box-shadow: 0 10px 22px rgba(2,6,23,.05);
    backdrop-filter: blur(8px);
}

.cabs-pill-soft{
    color: #334155;
    background: rgba(255,255,255,.62);
}

.cabs-pill-dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, #60a5fa, #2563eb);
    box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}

/* right mini */
.cabs-mini{
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.35);
    background: rgba(255,255,255,.70);
    backdrop-filter: blur(10px);
    box-shadow: var(--cabs-shadow-soft);
    padding: 12px 12px;
}

.cabs-mini-row{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    margin-bottom: 6px;
}

.cabs-mini-label{
    color: #475569;
}
.cabs-mini-value{
    font-weight: 800;
    color: #0f172a;
}

.cabs-mini-bar{
    height: 8px;
    border-radius: 999px;
    background: rgba(148,163,184,.18);
    overflow: hidden;
    margin-bottom: 10px;
}

.cabs-mini-bar span{
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cabs-blue), var(--cabs-violet));
    box-shadow: 0 8px 18px rgba(37,99,235,.22);
}

/* ==========================================================
   METRICS (важное — 5 карточек в ряд)
========================================================== */

.cabs-metrics{
    margin-top: 14px;
    display: grid;
    gap: 10px;

    /* 5 в ряд (чтобы День/Вечір/Ніч не ломались) */
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cabs-metric{
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.35);
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 22px rgba(2,6,23,.05);
    padding: 12px 12px;

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

.cabs-metric:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(2,6,23,.08);
    border-color: rgba(148,163,184,.55);
}

.cabs-metric-top{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.cabs-metric-icon{
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(124,58,237,.16));
    border: 1px solid rgba(37,99,235,.18);
}

.cabs-metric-name{
    font-size: 12px;
    color: #475569;
    font-weight: 800;
}

.cabs-metric-value{
    font-size: 20px;
    font-weight: 950;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.cabs-metric-hint{
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

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

.cabs-table-card{
    overflow: hidden;
    border-radius: var(--cabs-radius);
    border: 1px solid rgba(148,163,184,.35);
    box-shadow: var(--cabs-shadow);
}

.cabs-table-head{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(180deg, rgba(248,250,252,.85), rgba(255,255,255,.85));
    border-bottom: 1px solid rgba(148,163,184,.28);
}

.cabs-table-title{
    font-size: 14px;
    font-weight: 900;
    color: #0f172a;
}

.cabs-table-sub{
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.cabs-head-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid rgba(37,99,235,.25);
    background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.10));
    color: #0f172a;
    font-weight: 800;
    font-size: 12px;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cabs-head-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(37,99,235,.14);
    border-color: rgba(37,99,235,.40);
}

.cabs-head-btn-ic{
    width: 26px;
    height: 26px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--cabs-blue), var(--cabs-indigo));
    color: #fff;
    box-shadow: 0 10px 18px rgba(37,99,235,.22);
}

.cabs-table-wrap{
    max-height: 72vh;
    overflow: auto;
}

.cabs-table{
    border-collapse: separate;
    border-spacing: 0;
}

.cabs-table thead th{
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f8fafc;
    border-bottom: 1px solid rgba(148,163,184,.28);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748b;
    padding: 10px 12px;
}

.cabs-table tbody td{
    border-top: 1px solid rgba(148,163,184,.22);
    padding: 12px 12px;
    font-size: 13px;
}

.cabs-row{
    background: #fff;
    transition: background .18s ease;
}

.cabs-row:nth-child(even){
    background: rgba(248,250,252,.6);
}

.cabs-row:hover{
    background: rgba(37,99,235,.06);
}

/* name */
.cabs-name-main{
    font-weight: 950;
    color: #0f172a;
    line-height: 1.2;
}

.cabs-name-slug{
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    color: #475569;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(148,163,184,.12);
    border: 1px solid rgba(148,163,184,.22);
}

/* leads */
.cabs-leads{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.badge.cabs-lead-badge{
    font-size: 11px;
    font-weight: 800;
    padding: 6px 8px;
    border-radius: 999px;
    color: #0f172a;
    background: rgba(37,99,235,.12);
    border: 1px solid rgba(37,99,235,.22);
}

/* shifts */
.cabs-shift{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 14px;
    padding: 8px 10px;
    border: 1px solid rgba(148,163,184,.20);
    background: rgba(255,255,255,.70);
}

.cabs-shift-dot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-top: 4px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 4px rgba(148,163,184,.12);
}

.cabs-shift.is-ok .cabs-shift-dot{
    background: radial-gradient(circle at 30% 30%, #34d399, #16a34a);
    box-shadow: 0 0 0 4px rgba(22,163,74,.12);
}

.cabs-shift.is-empty .cabs-shift-dot{
    background: radial-gradient(circle at 30% 30%, #e2e8f0, #94a3b8);
}

.cabs-op{
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
}

.cabs-tag{
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}

.cabs-empty{
    font-weight: 900;
    color: #94a3b8;
}

.cabs-muted{
    color: #94a3b8;
}

/* actions */
.cabs-actions{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cabs-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 12px;
    text-decoration: none !important;
    border: 1px solid rgba(148,163,184,.30);
    background: #fff;
    color: #0f172a;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.cabs-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(2,6,23,.08);
    border-color: rgba(148,163,184,.55);
}

.cabs-btn-edit{
    background: linear-gradient(135deg, rgba(148,163,184,.14), rgba(148,163,184,.08));
}

.cabs-btn-del{
    border-color: rgba(239,68,68,.28);
    background: linear-gradient(135deg, rgba(239,68,68,.10), rgba(239,68,68,.06));
    color: #7f1d1d;
}

.cabs-btn-del:hover{
    border-color: rgba(239,68,68,.45);
    box-shadow: 0 14px 28px rgba(239,68,68,.10);
}

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

.cabs-empty-state{
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 10px;
}

.cabs-empty-ic{
    font-size: 34px;
}

.cabs-empty-title{
    font-weight: 950;
    font-size: 16px;
    color: #0f172a;
}

.cabs-empty-sub{
    font-size: 12px;
    color: #64748b;
}

.cabs-empty-cta{
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--cabs-blue), var(--cabs-indigo));
    color: #fff !important;
    font-weight: 950;
    text-decoration: none !important;
    box-shadow: 0 16px 36px rgba(37,99,235,.22);
    transition: transform .18s ease, box-shadow .18s ease;
}

.cabs-empty-cta:hover{
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(37,99,235,.26);
}

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

.cabs-mobile{
    display: none;
    margin-top: 12px;
}

.cabs-m-card{
    border-radius: var(--cabs-radius);
    border: 1px solid rgba(148,163,184,.35);
    box-shadow: var(--cabs-shadow-soft);
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 0%, rgba(37,99,235,.10), transparent 50%),
        radial-gradient(circle at 90% 0%, rgba(124,58,237,.10), transparent 55%),
        #fff;
}

.cabs-m-head{
    padding: 12px 12px 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    border-bottom: 1px solid rgba(148,163,184,.22);
}

.cabs-m-title{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cabs-m-edit{
    white-space: nowrap;
    font-weight: 950;
    font-size: 12px;
    color: #2563eb !important;
    text-decoration: none !important;
}

.cabs-m-body{
    padding: 10px 12px;
    display: grid;
    gap: 10px;
}

.cabs-m-row{
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 10px;
    align-items: start;
}

.cabs-m-lbl{
    font-size: 11px;
    font-weight: 950;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding-top: 4px;
}

.cabs-m-val{
    border-radius: 14px;
    padding: 10px 10px;
    border: 1px solid rgba(148,163,184,.22);
    background: rgba(255,255,255,.70);
}

.cabs-m-val.is-ok{
    border-color: rgba(22,163,74,.22);
    background: rgba(22,163,74,.06);
}

.cabs-m-val.is-empty{
    background: rgba(148,163,184,.08);
}

.cabs-m-foot{
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(148,163,184,.22);
}

.cabs-m-del{
    width: 100%;
    border: 1px solid rgba(239,68,68,.30);
    background: rgba(239,68,68,.08);
    border-radius: 14px;
    padding: 10px 12px;
    font-weight: 950;
    color: #7f1d1d;
}

/* ==========================================================
   MODAL (delete confirm)
========================================================== */

.cabs-modal{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}

.cabs-modal.is-open{
    display: block;
}

.cabs-modal-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(2,6,23,.55);
    backdrop-filter: blur(6px);
}

.cabs-modal-card{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100% - 26px));
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(148,163,184,.35);
    box-shadow: 0 30px 80px rgba(2,6,23,.30);
    padding: 16px 16px 14px;
}

.cabs-modal-ic{
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(239,68,68,.08));
    border: 1px solid rgba(239,68,68,.22);
    margin-bottom: 10px;
}

.cabs-modal-title{
    font-size: 16px;
    font-weight: 1000;
    color: #0f172a;
    margin-bottom: 6px;
}

.cabs-modal-text{
    font-size: 13px;
    color: #475569;
}

.cabs-modal-name{
    font-weight: 1000;
    color: #0f172a;
}

.cabs-modal-actions{
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.cabs-modal-btn{
    border-radius: 14px;
    padding: 10px 12px;
    font-weight: 1000;
    font-size: 12px;
    border: 1px solid rgba(148,163,184,.35);
    background: #fff;
    color: #0f172a;
    transition: transform .16s ease, box-shadow .16s ease;
}

.cabs-modal-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(2,6,23,.10);
}

.cabs-modal-btn-ghost{
    background: rgba(148,163,184,.10);
}

.cabs-modal-btn-danger{
    border-color: rgba(239,68,68,.30);
    background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(239,68,68,.10));
    color: #7f1d1d;
}

body.cabs-modal-open{
    overflow: hidden;
}

/* ==========================================================
   APPEAR ANIMATION
========================================================== */

[data-anim]{
    opacity: 0;
    transform: translateY(10px);
}

[data-anim].is-in{
    opacity: 1;
    transform: translateY(0);
    transition: opacity .45s ease, transform .45s ease;
}

[data-anim="fade"]{
    transform: translateY(6px);
}

@media (prefers-reduced-motion: reduce){
    .cabs-blob{ animation: none !important; }
    [data-anim]{ opacity: 1 !important; transform: none !important; }
}

/* ==========================================================
   ADAPTIVE
========================================================== */

@media (max-width: 1199.98px){
    /* чтобы не было “тесно”: 4 в ряд */
    .cabs-metrics{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px){
    .cabs-hero-head{
        grid-template-columns: 1fr;
    }

    /* на этом брейке — 2 в ряд (чётко и аккуратно) */
    .cabs-metrics{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cabs-mini{
        max-width: 520px;
    }
}

@media (max-width: 767.98px){
    /* hide desktop table, show mobile cards */
    .cabs-table-card{
        display: none;
    }
    .cabs-mobile{
        display: block;
    }

    .cabs-hero-inner{
        padding: 14px 14px 12px;
    }

    .cabs-title{
        font-size: 18px;
    }
}

@media (max-width: 575.98px){
    .cabs-metrics{
        grid-template-columns: 1fr;
    }

    .cabs-pill{
        width: 100%;
        justify-content: space-between;
    }
}