/* ──────────────────────────────────────────────
   BOC Enroll — Dashboard Theme Override
   Filament 4 | Pure CSS (no build step needed)
────────────────────────────────────────────── */

:root {
  --boc-primary:       #0caab6;
  --boc-primary-dark:  #089aa5;
  --boc-primary-light: #e0f7f9;
  --boc-sidebar-bg:    #0f1f3d;
  --boc-sidebar-hover: rgba(255,255,255,0.07);
  --boc-sidebar-active:#0caab6;
  --boc-text-muted:    #6b7280;
  --boc-radius:        0.75rem;
  --boc-shadow:        0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
  --boc-shadow-md:     0 4px 24px rgba(0,0,0,0.08);
}

/* ── Body ── */
.fi-body {
  background: #f1f5f9 !important;
}

/* ════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════ */
.fi-sidebar {
  background: var(--boc-sidebar-bg) !important;
  border-right: none !important;
  box-shadow: 2px 0 24px rgba(0,0,0,0.12) !important;
}

/* sidebar header / logo area */
.fi-sidebar-header,
:not(.fi-body-has-topbar) .fi-sidebar-header {
  background: var(--boc-sidebar-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

/* brand name text */
.fi-logo-name {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* nav scroll area */
.fi-sidebar-nav {
  padding: 1.25rem 0.875rem !important;
  background: var(--boc-sidebar-bg) !important;
}

/* group labels */
.fi-sidebar-group-label {
  color: rgba(255,255,255,0.38) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding-left: 0.5rem !important;
  margin-bottom: 0.25rem !important;
}

/* group collapsible trigger */
.fi-sidebar-group-dropdown-trigger-btn {
  border-radius: 0.6rem !important;
}
.fi-sidebar-group-dropdown-trigger-btn:hover {
  background: var(--boc-sidebar-hover) !important;
}
.fi-sidebar-group-dropdown-trigger-btn .fi-icon {
  color: rgba(255,255,255,0.5) !important;
}

/* nav items */
.fi-sidebar-item-btn {
  border-radius: 0.6rem !important;
  padding: 0.5rem 0.75rem !important;
  transition: background 0.15s ease !important;
}

.fi-sidebar-item-btn > .fi-icon {
  color: rgba(255,255,255,0.45) !important;
  transition: color 0.15s ease !important;
}

.fi-sidebar-item-label {
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}

/* hover state */
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover {
  background: var(--boc-sidebar-hover) !important;
}
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover .fi-icon {
  color: rgba(255,255,255,0.85) !important;
}
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
  color: rgba(255,255,255,0.95) !important;
}

/* active state */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
  background: rgba(12,170,182,0.18) !important;
  position: relative !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
  content: '' !important;
  position: absolute !important;
  left: -0.875rem !important;
  top: 0 !important;
  height: 100% !important;
  width: 3px !important;
  background: var(--boc-primary) !important;
  border-radius: 0 2px 2px 0 !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
  color: var(--boc-primary) !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
  color: #fff !important;
  font-weight: 600 !important;
}

/* footer (account widget in sidebar) */
.fi-sidebar-footer {
  background: var(--boc-sidebar-bg) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}

/* sidebar notifications btn */
.fi-sidebar-database-notifications-btn {
  border-radius: 0.6rem !important;
}
.fi-sidebar-database-notifications-btn:hover {
  background: var(--boc-sidebar-hover) !important;
}
.fi-sidebar-database-notifications-btn > .fi-icon {
  color: rgba(255,255,255,0.45) !important;
}
.fi-sidebar-database-notifications-btn-label {
  color: rgba(255,255,255,0.75) !important;
}

/* ════════════════════════════════════════════
   TOPBAR
════════════════════════════════════════════ */
.fi-topbar {
  background: #fff !important;
  box-shadow: 0 1px 0 #e5e7eb, 0 4px 16px rgba(0,0,0,0.04) !important;
  border-bottom: none !important;
  min-height: 4rem !important;
}

.fi-topbar-ctn {
  box-shadow: none !important;
}

/* logo area inside topbar */
.fi-topbar-start .fi-logo-name {
  color: var(--boc-sidebar-bg) !important;
  font-weight: 700 !important;
}

/* topbar action buttons (user menu, etc.) */
.fi-topbar-end .fi-btn {
  border-radius: 0.6rem !important;
}

/* sidebar logo area when topbar is present */
.fi-body-has-topbar .fi-sidebar-header {
  background: var(--boc-sidebar-bg) !important;
  box-shadow: none !important;
  border: none !important;
  ring: none !important;
}

/* ════════════════════════════════════════════
   PAGE HEADER
════════════════════════════════════════════ */
.fi-header-heading {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
}

.fi-header-subheading {
  font-size: 0.875rem !important;
  color: var(--boc-text-muted) !important;
  margin-top: 0.25rem !important;
}

/* ════════════════════════════════════════════
   SECTIONS / CARDS
════════════════════════════════════════════ */
.fi-section:not(.fi-section-not-contained):not(.fi-aside) {
  border-radius: var(--boc-radius) !important;
  box-shadow: var(--boc-shadow) !important;
  border: 1px solid #e8edf5 !important;
  background: #fff !important;
}

/* section header */
.fi-section-header {
  border-bottom-color: #f1f5f9 !important;
}

.fi-section-header-heading {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}

.fi-section-header-description {
  font-size: 0.8125rem !important;
  color: var(--boc-text-muted) !important;
}

/* ════════════════════════════════════════════
   TABLES
════════════════════════════════════════════ */
.fi-ta-ctn {
  border-radius: var(--boc-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--boc-shadow) !important;
  border: 1px solid #e8edf5 !important;
}

/* table wrapper */
.fi-ta-content {
  border-radius: var(--boc-radius) !important;
}

/* header row */
.fi-ta-table > thead > tr > .fi-ta-header-cell {
  background: #f8fafc !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.fi-ta-header-cell-label {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #64748b !important;
}

/* table rows */
.fi-ta-table > tbody > tr {
  transition: background 0.1s ease !important;
}

.fi-ta-table > tbody > tr:hover > td {
  background: #f8faff !important;
}

.fi-ta-table > tbody > tr > .fi-ta-cell {
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
  font-size: 0.8125rem !important;
  color: #374151 !important;
  border-bottom-color: #f1f5f9 !important;
}

/* table search / filters bar */
.fi-ta-header {
  background: #fff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 0.875rem 1rem !important;
}

/* table footer */
.fi-ta-footer {
  background: #f8fafc !important;
  border-top: 1px solid #f1f5f9 !important;
}

/* ════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════ */
.fi-btn {
  border-radius: 0.6rem !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

/* primary filled */
.fi-btn.fi-color-custom.fi-btn-color-primary:not(.fi-outlined),
.fi-btn.fi-color-primary:not(.fi-outlined) {
  box-shadow: 0 1px 3px rgba(12,170,182,0.3), 0 2px 8px rgba(12,170,182,0.15) !important;
}

/* outlined */
.fi-btn.fi-outlined {
  border-radius: 0.6rem !important;
}

/* danger */
.fi-btn.fi-color-danger:not(.fi-outlined) {
  box-shadow: 0 1px 3px rgba(220,38,38,0.2) !important;
}

/* success */
.fi-btn.fi-color-success:not(.fi-outlined) {
  box-shadow: 0 1px 3px rgba(22,163,74,0.2) !important;
}

/* ════════════════════════════════════════════
   STAT WIDGETS (Overview)
════════════════════════════════════════════ */
.fi-wi-stats-overview-stat {
  border-radius: var(--boc-radius) !important;
  box-shadow: var(--boc-shadow) !important;
  border: 1px solid #e8edf5 !important;
  background: #fff !important;
  transition: box-shadow 0.2s ease !important;
}

.fi-wi-stats-overview-stat:hover {
  box-shadow: var(--boc-shadow-md) !important;
}

.fi-wi-stats-overview-stat-label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #64748b !important;
}

.fi-wi-stats-overview-stat-value {
  font-size: 1.625rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
}

/* ════════════════════════════════════════════
   BADGES
════════════════════════════════════════════ */
.fi-badge {
  border-radius: 9999px !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.02em !important;
  padding: 0.2rem 0.6rem !important;
}

/* ════════════════════════════════════════════
   FORM FIELDS
════════════════════════════════════════════ */
.fi-input {
  border-radius: 0.6rem !important;
  font-size: 0.875rem !important;
  transition: box-shadow 0.15s, border-color 0.15s !important;
}

.fi-input:focus {
  box-shadow: 0 0 0 3px rgba(12,170,182,0.15) !important;
}

.fi-fo-field-wrp-label label {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

/* ════════════════════════════════════════════
   TABS
════════════════════════════════════════════ */
.fi-tabs-tab {
  border-radius: 0.5rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

.fi-tabs-tab.fi-active {
  font-weight: 600 !important;
}

/* ════════════════════════════════════════════
   MODALS / DIALOGS
════════════════════════════════════════════ */
.fi-modal-window {
  border-radius: 1rem !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
}

.fi-modal-header {
  border-bottom: 1px solid #f1f5f9 !important;
}

.fi-modal-footer {
  border-top: 1px solid #f1f5f9 !important;
  background: #f8fafc !important;
}

/* ════════════════════════════════════════════
   NOTIFICATIONS
════════════════════════════════════════════ */
.fi-notifications-notification {
  border-radius: 0.875rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  border: 1px solid #e8edf5 !important;
}

/* ════════════════════════════════════════════
   DROPDOWN / SELECT
════════════════════════════════════════════ */
.fi-dropdown-panel {
  border-radius: 0.75rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
  border: 1px solid #e8edf5 !important;
}

.fi-dropdown-list-item-btn {
  border-radius: 0.5rem !important;
  font-size: 0.8125rem !important;
}

/* ════════════════════════════════════════════
   BREADCRUMBS
════════════════════════════════════════════ */
.fi-breadcrumbs-item-label {
  font-size: 0.8rem !important;
  color: #64748b !important;
}

.fi-breadcrumbs-item.fi-active .fi-breadcrumbs-item-label {
  color: #0f172a !important;
  font-weight: 500 !important;
}

/* ════════════════════════════════════════════
   ACCOUNT WIDGET (user menu)
════════════════════════════════════════════ */
.fi-account-avatar {
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px var(--boc-primary) !important;
}

/* ════════════════════════════════════════════
   PAGINATION
════════════════════════════════════════════ */
.fi-pagination-item-btn {
  border-radius: 0.5rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

/* ════════════════════════════════════════════
   FILTERS
════════════════════════════════════════════ */
.fi-ta-filters-form-ctn {
  border-radius: 0 0 var(--boc-radius) var(--boc-radius) !important;
  background: #f8fafc !important;
  border-top: 1px solid #f1f5f9 !important;
}

/* ════════════════════════════════════════════
   MAIN CONTENT SPACING
════════════════════════════════════════════ */
.fi-main {
  padding-top: 1.5rem !important;
  padding-bottom: 2rem !important;
}

/* ════════════════════════════════════════════
   SCROLLBAR
════════════════════════════════════════════ */
.fi-sidebar-nav::-webkit-scrollbar {
  width: 4px;
}
.fi-sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}
.fi-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}