/* =========================================================================
   Bit Card refresh — app-wide adoption of the /e/ dashboard panel look.

   These are the reusable "look and feel" rules that were originally scoped to
   .dashboard-equal-cards in employee-dashboard.css. Re-scoped here to EVERY
   .card.bit-card so all bit-cards across the app match the refreshed dashboard
   panels (softer radius/shadow, clean white header, modern tables, soft-pill
   badges, soft action buttons, friendly empty states, soft header buttons).

   Loaded AFTER bit_card.css (see app.js import order) so it wins the cascade.
   The dashboard's own .dashboard-equal-cards rules are MORE specific, so the
   dashboard itself stays pixel-identical; this only affects bit-cards elsewhere.

   Edge-to-edge body padding is scoped with :has(table) so table panels go
   flush while form cards keep their normal padding.
   ========================================================================= */

/* Softer card radius/shadow to match the dashboard panels */
.card.bit-card { border-radius: 14px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07) !important; }

/* Clean white header with a light divider (replaces the tinted gradient) */
.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; }

/* Card title headers — clean 1rem, bold */
.card.bit-card .card-icon-header .content h1,
.card.bit-card .card-icon-header .content h2,
.card.bit-card .card-icon-header .content h3,
.card.bit-card .card-icon-header .content h4,
.card.bit-card .card-icon-header .content h5,
.card.bit-card .card-icon-header .content h6 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}

/* Edge-to-edge body ONLY when the card holds a table (form cards keep padding) */
.card.bit-card .card-body:has(table) { padding: 0 !important; }

/* Quiet, sticky, uppercase table headers */
.card.bit-card .card-body table { margin: 0 !important; }
.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;
}

/* Body cells — comfortable, a touch bolder */
.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 */
.card.bit-card .card-body tbody td small { font-size: 11px !important; font-weight: 400; }
.card.bit-card .card-body tbody tr:last-child td { border-bottom: 0 !important; }
.card.bit-card .card-body .table > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; background-color: transparent !important; }
.card.bit-card .card-body .table > tbody > tr { transition: background 0.12s; }
.card.bit-card .card-body .table > tbody > tr:hover > * { background-color: #f8fbff !important; }

/* Soft pill badges (remap solid Bootstrap badges) */
.card.bit-card .card-body .badge { font-weight: 600 !important; border-radius: 999px !important; padding: 4px 9px !important; }
.card.bit-card .card-body .badge.bg-primary   { background-color: rgba(13, 110, 253, 0.12) !important; color: #0d6efd !important; }
.card.bit-card .card-body .badge.bg-success   { background-color: rgba(34, 197, 94, 0.14) !important; color: #16a34a !important; }
.card.bit-card .card-body .badge.bg-info      { background-color: rgba(13, 202, 240, 0.15) !important; color: #0aa2c0 !important; }
.card.bit-card .card-body .badge.bg-warning   { background-color: rgba(245, 158, 11, 0.16) !important; color: #b45309 !important; }
.card.bit-card .card-body .badge.bg-danger    { background-color: rgba(220, 53, 69, 0.12) !important; color: #dc3545 !important; }
.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 */
.card.bit-card .card-body .table-action-btn { border-radius: 8px !important; border-color: transparent !important; }
.card.bit-card .card-body .table-action-btn.btn-info { background: rgba(13, 202, 240, 0.15) !important; color: #0aa2c0 !important; }
.card.bit-card .card-body .table-action-btn.btn-info:hover { background: rgba(13, 202, 240, 0.28) !important; color: #0aa2c0 !important; }
.card.bit-card .card-body .table-action-btn.btn-success { background: rgba(34, 197, 94, 0.15) !important; color: #16a34a !important; }
.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 */
.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 — soft brand-tinted pills (color-mix keeps them
   on-brand per org) replacing the heavy solid brand buttons. */
.card.bit-card .card-icon-header .btn-primary,
.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;
}
.card.bit-card .card-icon-header .btn-primary:hover,
.card.bit-card .card-icon-header .btn-secondary:hover,
.card.bit-card .card-icon-header .btn-primary:focus,
.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;
}

/* Opt-out modifier: keep a solid brand-blue fill in the header (matches the
   footer Save button) instead of the soft pill. Add `btn-solid` to the button. */
.card.bit-card .card-icon-header .btn-primary.btn-solid {
    background: var(--bit-primary, #0d6efd) !important;
    background-image: none !important;
    border: 1px solid var(--bit-primary, #0d6efd) !important;
    color: var(--bit-primary-fg, white) !important;
    border-radius: .375rem !important;
}
.card.bit-card .card-icon-header .btn-primary.btn-solid:hover,
.card.bit-card .card-icon-header .btn-primary.btn-solid:focus {
    background: color-mix(in srgb, var(--bit-primary, #0d6efd) 85%, black) !important;
    border-color: color-mix(in srgb, var(--bit-primary, #0d6efd) 85%, black) !important;
    color: var(--bit-primary-fg, white) !important;
}