/* =========================================================================
   Employee dashboard (/e/) panel refresh.
   Scoped to .dashboard-equal-cards so no other bit-cards in the app change.
   Loaded AFTER bit_card.css (see app.js import order) so it wins the cascade;
   !important kept on props that compete with Bootstrap utilities (.bg-*).
   ========================================================================= */

/* Softer card radius/shadow to match the Business Pulse cards */
.dashboard-equal-cards .card.bit-card { border-radius: 14px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07) !important; }
.dashboard-equal-cards .card.bit-card[class*="bit-card-"] .card-icon-header { background: #fff !important; border-bottom: 1px solid #eef1f5 !important; border-radius: 14px 14px 0 0 !important; }
.dashboard-equal-cards .card.bit-card .card-body { padding: 0 !important; }

/* Quiet, sticky, uppercase table headers */
.dashboard-equal-cards .card.bit-card .card-body table { margin: 0 !important; }
.dashboard-equal-cards .card.bit-card .card-body thead th {
    position: sticky; top: 0; z-index: 1; background: #f8fafc !important;
    font-size: 10px !important; text-transform: uppercase; letter-spacing: 0.5px;
    font-weight: 700 !important; color: #94a3b8 !important; border: 0 !important; border-bottom: 1px solid #eef1f5 !important;
    padding: 8px 14px !important; white-space: nowrap;
}

/* Card title headers — match the mockup (clean 1rem, bold) */
.dashboard-equal-cards .card.bit-card .card-icon-header .content h6,
.dashboard-equal-cards .card.bit-card .card-icon-header .content h5 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}

/* Body cells — larger and a touch bolder than the old cramped 11px (matches mockup) */
.dashboard-equal-cards .card.bit-card .card-body tbody td { border: 0 !important; border-bottom: 1px solid #f1f5f9 !important; padding: 10px 14px !important; vertical-align: middle; color: #334155; font-size: 13px !important; font-weight: 500; line-height: 1.4; }
/* Keep secondary inline notes (descriptions, due dates) smaller for hierarchy */
.dashboard-equal-cards .card.bit-card .card-body tbody td small { font-size: 11px !important; font-weight: 400; }
.dashboard-equal-cards .card.bit-card .card-body tbody tr:last-child td { border-bottom: 0 !important; }
.dashboard-equal-cards .card.bit-card .card-body .table > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; background-color: transparent !important; }
.dashboard-equal-cards .card.bit-card .card-body .table > tbody > tr { transition: background 0.12s; }
.dashboard-equal-cards .card.bit-card .card-body .table > tbody > tr:hover > * { background-color: #f8fbff !important; }

/* Soft pill badges (match the Pulse trend chips); remap solid Bootstrap badges */
.dashboard-equal-cards .card.bit-card .card-body .badge { font-weight: 600 !important; border-radius: 999px !important; padding: 4px 9px !important; }
.dashboard-equal-cards .card.bit-card .card-body .badge.bg-primary   { background-color: rgba(13, 110, 253, 0.12) !important; color: #0d6efd !important; }
.dashboard-equal-cards .card.bit-card .card-body .badge.bg-success   { background-color: rgba(34, 197, 94, 0.14) !important; color: #16a34a !important; }
.dashboard-equal-cards .card.bit-card .card-body .badge.bg-info      { background-color: rgba(13, 202, 240, 0.15) !important; color: #0aa2c0 !important; }
.dashboard-equal-cards .card.bit-card .card-body .badge.bg-warning   { background-color: rgba(245, 158, 11, 0.16) !important; color: #b45309 !important; }
.dashboard-equal-cards .card.bit-card .card-body .badge.bg-danger    { background-color: rgba(220, 53, 69, 0.12) !important; color: #dc3545 !important; }
.dashboard-equal-cards .card.bit-card .card-body .badge.bg-secondary { background-color: rgba(100, 116, 139, 0.14) !important; color: #475569 !important; }

/* Rounded, soft-tinted table action buttons */
.dashboard-equal-cards .card.bit-card .card-body .table-action-btn { border-radius: 8px !important; border-color: transparent !important; }
.dashboard-equal-cards .card.bit-card .card-body .table-action-btn.btn-info { background: rgba(13, 202, 240, 0.15) !important; color: #0aa2c0 !important; }
.dashboard-equal-cards .card.bit-card .card-body .table-action-btn.btn-info:hover { background: rgba(13, 202, 240, 0.28) !important; color: #0aa2c0 !important; }
.dashboard-equal-cards .card.bit-card .card-body .table-action-btn.btn-success { background: rgba(34, 197, 94, 0.15) !important; color: #16a34a !important; }
.dashboard-equal-cards .card.bit-card .card-body .table-action-btn.btn-success:hover { background: rgba(34, 197, 94, 0.28) !important; color: #16a34a !important; }

/* Friendlier empty states: turn the lone icon into a soft circular badge */
.dashboard-equal-cards .card.bit-card .card-body p.text-center { padding: 30px 16px !important; color: #94a3b8; }
.dashboard-equal-cards .card.bit-card .card-body p.text-center > .bi:first-child {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%; background: #f1f5f9;
    color: #cbd5e1; font-size: 1.7rem !important; margin-bottom: 10px;
}

/* Modern header action buttons — replace the heavy solid dark-blue brand
   buttons ("Full Report", etc.) with soft brand-tinted pills that match the
   hero and the soft-pill language (color-mix keeps them on-brand per org). */
.dashboard-equal-cards .card.bit-card .card-icon-header .btn-primary,
.dashboard-equal-cards .card.bit-card .card-icon-header .btn-secondary {
    background: color-mix(in srgb, var(--bit-primary, #0d6efd) 10%, white) !important;
    background-image: none !important;
    border: 1px solid color-mix(in srgb, var(--bit-primary, #0d6efd) 22%, white) !important;
    color: color-mix(in srgb, var(--bit-primary, #0d6efd) 78%, black) !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    padding: 3px 12px !important;
}
.dashboard-equal-cards .card.bit-card .card-icon-header .btn-primary:hover,
.dashboard-equal-cards .card.bit-card .card-icon-header .btn-secondary:hover,
.dashboard-equal-cards .card.bit-card .card-icon-header .btn-primary:focus,
.dashboard-equal-cards .card.bit-card .card-icon-header .btn-secondary:focus {
    background: color-mix(in srgb, var(--bit-primary, #0d6efd) 18%, white) !important;
    border-color: color-mix(in srgb, var(--bit-primary, #0d6efd) 35%, white) !important;
    color: color-mix(in srgb, var(--bit-primary, #0d6efd) 88%, black) !important;
}

/* =========================================================================
   Business Pulse metric cards — identical to the Organization > Metrics page
   (gradient cards, white text, big value, colored change). Mirrors the inline
   CSS in organization_metrics.html.twig so both pages match.
   ========================================================================= */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.metric-card {
    background: linear-gradient(135deg, #020022 0%, #50396d 100%);
    border-radius: 16px;
    padding: 24px;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.metric-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 100px; height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(30%, -30%);
}
.metric-card:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }
/* On the dashboard, match the hero banner's blue instead of the metrics-page purple */
.dashboard-equal-cards .metric-card { background: linear-gradient(135deg, #112a54 0%, #2674a6 100%) !important; }

/* =========================================================================
   Employee identity = PURPLE. The hero banner (shared, identical-looking on the
   student dashboard) is recolored to the metrics purple so staff instantly know
   they're in the employee view vs the student view. Scoped to /e/.
   ========================================================================= */
.dashboard-equal-cards .welcome-banner {
    background-color: #2a1a45 !important;
}
.dashboard-equal-cards .welcome-banner::before {
    background: linear-gradient(90deg,
        rgba(2, 0, 34, 0.96) 0%,
        rgba(40, 25, 70, 0.92) 28%,
        rgba(80, 57, 109, 0.6) 48%,
        transparent 62%) !important;
}
/* Avatar + its ring tinted to match the purple identity */
.dashboard-equal-cards .staff-avatar { background: linear-gradient(135deg, #6a4a92 0%, #2a1148 100%) !important; }
.metric-card-header { display: flex; align-items: center; margin-bottom: 16px; position: relative; z-index: 1; }
.metric-icon { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 12px; }
.metric-icon i { font-size: 24px; color: white; }
.metric-title { color: #fff; font-size: 14px; font-weight: 600; margin: 0; text-transform: uppercase; letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.metric-card-body { position: relative; z-index: 1; }
.metric-value { font-size: 36px; font-weight: 700; margin-bottom: 8px; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.metric-change { font-size: 14px; display: flex; align-items: center; color: #fff; }
.metric-change.positive { color: #a8ff78; }
.metric-change.negative { color: #ff9999; }
.metric-change .change-percent { font-weight: 600; margin-right: 4px; }
.metric-change .change-text { opacity: 0.8; }
@media (max-width: 768px) {
    .metrics-grid { grid-template-columns: 1fr 1fr; }
    .metric-value { font-size: 28px; }
    .metric-card { padding: 18px; }
}

/* =========================================================================
   "Today at a glance" tile modals — same refreshed table look as the panels,
   applied to the modal body content (.dash-modal-content).
   ========================================================================= */
.dash-modal-content table { margin: 0 !important; }
.dash-modal-content thead th {
    position: sticky; top: 0; z-index: 1; background: #f8fafc !important;
    font-size: 10px !important; text-transform: uppercase; letter-spacing: 0.5px;
    font-weight: 700 !important; color: #94a3b8 !important; border: 0 !important; border-bottom: 1px solid #eef1f5 !important;
    padding: 9px 14px !important; white-space: nowrap;
}
.dash-modal-content tbody td { border: 0 !important; border-bottom: 1px solid #f1f5f9 !important; padding: 11px 14px !important; vertical-align: middle; color: #334155; font-size: 13px; }
.dash-modal-content tbody tr:last-child td { border-bottom: 0 !important; }
.dash-modal-content .table > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; background-color: transparent !important; }
.dash-modal-content .table > tbody > tr { transition: background 0.12s; }
.dash-modal-content .table > tbody > tr:hover > * { background-color: #f8fbff !important; }

.dash-modal-content .badge { font-weight: 600 !important; border-radius: 999px !important; padding: 4px 9px !important; font-size: 11px !important; }
.dash-modal-content .badge.bg-primary   { background-color: rgba(13, 110, 253, 0.12) !important; color: #0d6efd !important; }
.dash-modal-content .badge.bg-success   { background-color: rgba(34, 197, 94, 0.14) !important; color: #16a34a !important; }
.dash-modal-content .badge.bg-info      { background-color: rgba(13, 202, 240, 0.15) !important; color: #0aa2c0 !important; }
.dash-modal-content .badge.bg-warning   { background-color: rgba(245, 158, 11, 0.16) !important; color: #b45309 !important; }
.dash-modal-content .badge.bg-danger    { background-color: rgba(220, 53, 69, 0.12) !important; color: #dc3545 !important; }
.dash-modal-content .badge.bg-secondary { background-color: rgba(100, 116, 139, 0.14) !important; color: #475569 !important; }

.dash-modal-content .table-action-btn { border-radius: 8px !important; border-color: transparent !important; }
.dash-modal-content .table-action-btn.btn-info { background: rgba(13, 202, 240, 0.15) !important; color: #0aa2c0 !important; }
.dash-modal-content .table-action-btn.btn-success { background: rgba(34, 197, 94, 0.15) !important; color: #16a34a !important; }

.dash-modal-content p.text-center { padding: 34px 16px !important; color: #94a3b8; }
.dash-modal-content p.text-center > .bi:first-child {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%; background: #f1f5f9;
    color: #cbd5e1; font-size: 1.7rem !important; margin-bottom: 10px;
}