/* ==========================================================
   Teamlead — Cabinet show page
   File: resources/css/teamlead/cabinet-show.css
   Светлый dashboard–стиль БЕЗ ЗЕЛЕНИ + анімації
   ========================================================== */

:root{
    --csh-primary:#3b82f6;
    --csh-primary-soft:#e5edff;

    --csh-border:#e5e7eb;
    --csh-text:#0f172a;
    --csh-muted:#6b7280;

    --csh-radius-lg:18px;
    --csh-radius-pill:999px;

    --csh-shadow-soft:0 6px 16px rgba(15,23,42,.10);
    --csh-shadow-hover:0 12px 26px rgba(15,23,42,.16);
}

/* ----------------------------------------------------------
   WRAPPER + PAGE ANIMATION
---------------------------------------------------------- */

.cabinet-show-page{
    animation:csh-fade .22s ease-out;
}

@keyframes csh-fade{
    from{opacity:0; transform:translateY(6px);}
    to  {opacity:1; transform:translateY(0);}
}

/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.cab-show-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}

.cab-show-header-title{
    margin:0;
    font-weight:600;
    font-size:1.25rem;
    color:var(--csh-text);
}

.cab-show-header-sub{
    margin:0;
    font-size:.85rem;
    color:var(--csh-muted);
}

.cab-show-header-actions{
    display:flex;
    gap:.5rem;
}

/* ----------------------------------------------------------
   BUTTONS + INTERACTION
---------------------------------------------------------- */

.cabinet-show-page .btn{
    border-radius:var(--csh-radius-pill);
    padding:.38rem 1.15rem;
    font-size:.82rem;
    box-shadow:var(--csh-shadow-soft);
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background .16s ease,
        color .16s ease,
        opacity .16s ease;
}

/* primary — тільки синій градієнт, без зеленого */

.cabinet-show-page .btn-primary,
.cabinet-show-page .btn-tl-primary{
    background:linear-gradient(135deg,#3b82f6,#2563eb);
    border-color:transparent;
    color:#fff;
}

.cabinet-show-page .btn-primary:hover,
.cabinet-show-page .btn-tl-primary:hover{
    transform:translateY(-1px) scale(1.02);
    box-shadow:0 10px 28px rgba(37,99,235,.35);
}

/* outlines */

.cabinet-show-page .btn-outline-secondary,
.cabinet-show-page .btn-outline-info,
.cabinet-show-page .btn-outline-dark{
    background:#ffffff;
    border-color:#cbd5e1;
    color:#334155;
}

.cabinet-show-page .btn-outline-secondary:hover,
.cabinet-show-page .btn-outline-info:hover,
.cabinet-show-page .btn-outline-dark:hover{
    background:var(--csh-primary-soft);
    color:#111827;
    transform:translateY(-1px) scale(1.01);
    box-shadow:var(--csh-shadow-hover);
}

/* ефект "натиску" при кліку */

.cabinet-show-page .btn:active{
    transform:translateY(0) scale(0.97);
    box-shadow:0 2px 6px rgba(15,23,42,.25);
}

/* ----------------------------------------------------------
   MAIN CARD
---------------------------------------------------------- */

.cab-show-card{
    border-radius:var(--csh-radius-lg);
    border:1px solid var(--csh-border);
    background:#ffffff;
    box-shadow:var(--csh-shadow-soft);
    padding:1.35rem 1.5rem;
    margin-bottom:1rem;
}

.cab-show-section-title{
    font-size:.85rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--csh-muted);
    margin-bottom:.6rem;
}

/* ----------------------------------------------------------
   GRID
---------------------------------------------------------- */

.cab-ops-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
}

/* ----------------------------------------------------------
   SHIFT CARDS + ANIMATIONS
---------------------------------------------------------- */

.cab-ops-card{
    border-radius:14px;
    border:1px solid var(--csh-border);
    background:linear-gradient(135deg,#f9fafb,#eef2ff);
    padding:.9rem 1rem;
    box-shadow:0 4px 12px rgba(148,163,184,.25);
    position:relative;
    overflow:hidden;

    /* плавний вхід + легкий pop */
    opacity:0;
    transform:translateY(10px) scale(0.98);
    animation:csh-card-in .4s ease-out forwards;
}

/* Stagger: day → evening → night */
.cab-ops-card:nth-child(1){
    animation-delay:.05s;
}
.cab-ops-card:nth-child(2){
    animation-delay:.12s;
}
.cab-ops-card:nth-child(3){
    animation-delay:.19s;
}

@keyframes csh-card-in{
    0%{
        opacity:0;
        transform:translateY(12px) scale(0.97);
        box-shadow:0 0 0 rgba(0,0,0,0);
    }
    60%{
        opacity:1;
        transform:translateY(-1px) scale(1.01);
        box-shadow:0 10px 24px rgba(148,163,184,.35);
    }
    100%{
        opacity:1;
        transform:translateY(0) scale(1);
        box-shadow:0 4px 12px rgba(148,163,184,.25);
    }
}

/* hover: легкий «float» */

.cab-ops-card:hover{
    transform:translateY(-3px) scale(1.01);
    box-shadow:0 14px 30px rgba(148,163,184,.45);
}

/* subtle glow */

.cab-ops-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right,rgba(191,219,254,.35),transparent 55%);
    pointer-events:none;
}

/* ----------------------------------------------------------
   SHIFT HEADER + DOT PULSE
---------------------------------------------------------- */

.cab-ops-shift{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    font-size:.78rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:600;
    color:#475569;
}

.cab-ops-shift-dot{
    width:7px;
    height:7px;
    border-radius:999px;
    animation:csh-dot-pulse 1.6s ease-in-out infinite;
}

/* пульсація крапки зміни */

@keyframes csh-dot-pulse{
    0%,100%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(59,130,246,.0);
    }
    50%{
        transform:scale(1.35);
        box-shadow:0 0 0 6px rgba(59,130,246,.15);
    }
}

/* різні кольори для змін (без зеленого) */

.cab-ops-shift--day     .cab-ops-shift-dot{ background:#38bdf8; } /* блакитний */
.cab-ops-shift--evening .cab-ops-shift-dot{ background:#f59e0b; } /* помаранчевий */
.cab-ops-shift--night   .cab-ops-shift-dot{ background:#6366f1; } /* фіолетовий */

/* ----------------------------------------------------------
   OPERATOR INFO
---------------------------------------------------------- */

.cab-ops-name{
    margin-top:.35rem;
    font-size:.95rem;
    font-weight:600;
    color:#111827;
}

.cab-ops-username{
    font-size:.8rem;
    color:var(--csh-muted);
}

.cab-ops-note{
    font-size:.78rem;
    color:var(--csh-muted);
    margin-top:.35rem;
}

/* ----------------------------------------------------------
   EXTRA BLOCKS (якщо будуть)
---------------------------------------------------------- */

.cab-extra-card{
    border-radius:var(--csh-radius-lg);
    border:1px solid var(--csh-border);
    background:#ffffff;
    box-shadow:var(--csh-shadow-soft);
    padding:1rem 1.1rem;
    margin-top:1rem;
}

.cab-extra-title{
    font-size:.9rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--csh-muted);
    margin-bottom:.4rem;
}

.cab-extra-text{
    font-size:.85rem;
    color:var(--csh-text);
}

/* якщо в show буде таблиця */

.cab-show-table{
    font-size:.82rem;
}

.cab-show-table thead th{
    background:#eef2ff;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#6b7280;
}

.cab-show-table tbody tr:nth-child(even){
    background:#f8f9ff;
}

.cab-show-table tbody tr:hover{
    background:#e0ecff;
}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media (max-width:992px){
    .cab-ops-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .cab-show-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .cab-show-header-actions{
        width:100%;
        flex-wrap:wrap;
    }
}

@media (max-width:576px){
    .cab-ops-grid{
        grid-template-columns:1fr;
    }

    .cab-show-card{
        padding:1rem;
    }
}