/* ===========================================================
   Shared Dashboard UI helpers
   Used across dashboard/index.blade.php and all module
   dashboard.blade.php screens. Kept separate from the vendor
   style.css so template updates never clobber it.
=========================================================== */

.dashboard-card {
    transition: box-shadow .25s ease, transform .25s ease;
}
.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .08) !important;
}
[data-theme="dark"] .dashboard-card:hover {
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .35) !important;
}

.dashboard-widget-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    font-size: .875rem;
}
.dashboard-widget-list li:last-child { border-bottom: none; }
.dashboard-widget-list .badge { font-weight: 500; }
[data-theme="dark"] .dashboard-widget-list li {
    border-bottom-color: rgba(255, 255, 255, .08);
}

.list-card-scroll {
    max-height: 340px;
    overflow-y: auto;
}

/* ===========================================================
   2026-07-20 redesign: color system + density tokens
   Overrides the vendor style.css :root custom properties -
   loads after style.css (see partials/head.blade.php) so these
   win on specificity ties without touching the vendor file.
   New primary = Tailwind Indigo-600 (#4F46E5), replacing the
   previous #605DFF. -50/-60/-70 map to Indigo-700/800/100 so
   the whole ramp stays a coherent, real design-system palette.
=========================================================== */
:root,
[data-bs-theme=light] {
    --bs-primary: #4F46E5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-primary-50: #4338CA;
    --bs-primary-50-rgb: 67, 56, 202;
    --bs-primary-60: #3730A3;
    --bs-primary-60-rgb: 55, 48, 163;
    --bs-primary-70: #E0E7FF;
    --bs-primary-70-rgb: 224, 231, 255;
    --bs-primary-text-emphasis: rgb(31.6, 28, 91.6);
    --bs-primary-bg-subtle: rgb(219.8, 218, 249.8);
    --bs-primary-border-subtle: rgb(184.6, 181, 244.6);
}
[data-bs-theme=dark] {
    --bs-primary: #4F46E5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-primary-50: #4338CA;
    --bs-primary-50-rgb: 67, 56, 202;
    --bs-primary-60: #3730A3;
    --bs-primary-60-rgb: 55, 48, 163;
    --bs-primary-70: #E0E7FF;
    --bs-primary-70-rgb: 224, 231, 255;
    --bs-primary-text-emphasis: rgb(149.4, 144, 239.4);
    --bs-primary-bg-subtle: rgb(15.8, 14, 45.8);
    --bs-primary-border-subtle: rgb(47.4, 42, 137.4);
}

/* Density: compact card + table variants used by the redesigned
   Dashboard / Employees screens. Opt-in classes, existing pages
   that don't use them are unaffected. */
.card-compact > .card-body {
    padding: .85rem 1rem;
}
.table-compact td,
.table-compact th {
    padding: .55rem .75rem;
    font-size: .8125rem;
    vertical-align: middle;
}

/* Compact icon-chip stat tile - smaller footprint than kpi-card
   for 5-6-per-row density (Employees index header stats, etc.) */
.stat-tile {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
}
.stat-tile .stat-tile-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stat-tile .stat-tile-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}
.stat-tile .stat-tile-label {
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

/* Sidebar: rounded active-pill instead of the vendor's default
   active treatment, tighter vertical rhythm. */
.layout-menu .menu-inner > .menu-item > .menu-link {
    border-radius: .5rem;
    margin: 0 .5rem .15rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
}
.layout-menu .menu-inner > .menu-item > .menu-link.active,
.layout-menu .menu-inner > .menu-item > .menu-link.menu-toggle.active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}
.layout-menu .menu-inner > .menu-item > .menu-link.active .menu-icon,
.layout-menu .menu-inner > .menu-item > .menu-link.menu-toggle.active .menu-icon {
    color: #fff !important;
}
.layout-menu .menu-title {
    padding: .9rem 1rem .35rem;
    font-size: .68rem;
    letter-spacing: .06em;
    opacity: .6;
}
.layout-menu .menu-sub .menu-link {
    padding-top: .4rem;
    padding-bottom: .4rem;
    border-radius: .4rem;
    margin: 0 .5rem;
}

/* Add Employee wizard: step panels + step-indicator "completed" state.
   .wizard-tabs2 (numbered circle + connector) is existing vendor CSS -
   this only adds what it's missing: circle sizing/shape (the vendor rule
   only sets background-color/line-height, not width or radius), panel
   show/hide, and a completed look. */
.wizard-step {
    display: none;
}
.wizard-step.active {
    display: block;
}
.wizard-tabs2 .wizard-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.wizard-tabs2 .nav-item.completed .wizard-step-num {
    background-color: var(--bs-primary-70) !important;
    color: var(--bs-primary) !important;
}
.wizard-tabs2 .nav-item.completed .nav-link {
    cursor: pointer;
}