/* Hostraj SMS Gateway v2 — custom panel theme (no build step) */
@import url("https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap");

:root {
  --brand-font: "Outfit", "Hind Siliguri", ui-sans-serif, system-ui, sans-serif;
}
body, .fi-body, .fi-layout { font-family: var(--brand-font); }

/* ---- Sidebar: branded navy ---- */
.fi-sidebar { background: #0b1220; }
.fi-sidebar nav { background: transparent; }
.fi-sidebar .fi-sidebar-item { border-radius: 10px; margin: 2px 10px; }
.fi-sidebar .fi-sidebar-item-active {
  background: rgba(139, 92, 246, 0.16);
  box-shadow: inset 3px 0 0 #8b5cf6;
}
.fi-sidebar, .fi-sidebar a, .fi-sidebar button, .fi-sidebar .fi-sidebar-item-label { color: #cbd5e1; }
.fi-sidebar .fi-sidebar-item-active,
.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-label { color: #ffffff; }
.fi-sidebar .fi-sidebar-group-label { color: #64748b; letter-spacing: .08em; }
/* Light mode: force a solid violet active pill (Filament's own white pill
   otherwise makes white label text illegible on the navy sidebar). */
html:not(.dark) .fi-sidebar .fi-sidebar-item.fi-sidebar-item-active {
  background: rgba(139, 92, 246, 0.92) !important;
  box-shadow: inset 3px 0 0 #a78bfa;
}
html:not(.dark) .fi-sidebar .fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-button {
  background: transparent !important;
}
html:not(.dark) .fi-sidebar .fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar .fi-sidebar-item.fi-sidebar-item-active a,
html:not(.dark) .fi-sidebar .fi-sidebar-item.fi-sidebar-item-active svg { color: #ffffff !important; }

/* ---- Topbar ---- */
.fi-topbar { background: #0b1220; border-bottom: 1px solid rgba(148, 163, 184, 0.15); }
.fi-topbar, .fi-topbar a, .fi-topbar button { color: #e2e8f0; }

/* ---- Cards, sections, tables ---- */
.fi-widget, .fi-section, .fi-ta { border-radius: 14px; }
.fi-ta { overflow: hidden; }
.fi-ta table thead th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }

/* ---- Buttons & inputs ---- */
.fi-btn { border-radius: 10px; font-weight: 600; }
.fi-input, .fi-select input, .fi-textarea textarea { border-radius: 10px; }

/* ---- Login screen ---- */
.fi-simple-layout {
  background:
    radial-gradient(1100px 550px at 15% -10%, rgba(139, 92, 246, 0.28), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(59, 130, 246, 0.20), transparent 55%),
    #070b14;
}
.fi-simple-layout main { background: transparent; }
.fi-simple-card, .fi-simple-main { border-radius: 18px; box-shadow: 0 24px 60px rgba(2, 6, 23, 0.55); }

/* ---- Scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.4) transparent; }

/* ---- Light-mode login variant ---- */
html:not(.dark) .fi-simple-layout {
  background:
    radial-gradient(1100px 550px at 15% -10%, rgba(139, 92, 246, 0.14), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(59, 130, 246, 0.10), transparent 55%),
    #eef2f7;
}
html:not(.dark) .fi-simple-card, html:not(.dark) .fi-simple-main {
  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.12);
}

/* ---- Consistent dark surface for custom data tables ---- */
.dark-surface { background: #0b1220; color: #e2e8f0; }
.dark-surface table { color: #e2e8f0; }
html:not(.dark) .fi-section:has(.dark-surface) { background: #0b1220; }
html:not(.dark) .fi-section:has(.dark-surface) .fi-section-header { background: #0b1220; }
html:not(.dark) .fi-section:has(.dark-surface) .fi-section-header .fi-section-heading { color: #e2e8f0; }

/* ═══════════════ DEEP DESIGN POLISH (global, all pages) ═══════════════ */

/* ---- Typography of page headers ---- */
.fi-header-heading {
  letter-spacing: -0.02em;
  font-weight: 800 !important;
}
.fi-header-description, .fi-header-subdescription {
  color: #94a3b8;
  font-weight: 500;
}

/* ---- Inputs, selects, textareas ---- */
.fi-input, .fi-fo-text-area textarea, .fi-ac-field input {
  border-radius: 10px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fi-input:focus, .fi-input:focus-visible {
  border-color: rgba(139, 92, 246, .8) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .16) !important;
  outline: none !important;
}
html:not(.dark) .fi-input {
  background: #fff;
  border-color: #dbe2ea;
}
.fi-input::placeholder { color: #94a3b8; }

/* ---- Buttons ---- */
.fi-btn {
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.fi-btn.fi-color-primary,
.fi-btn-color-primary {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(124, 58, 237, .3);
}
.fi-btn.fi-color-primary:hover,
.fi-btn-color-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124, 58, 237, .42);
}
.fi-btn.fi-color-danger { box-shadow: 0 3px 10px rgba(239, 68, 68, .25); }
.fi-btn.fi-color-gray:hover, .fi-btn.fi-color-secondary:hover {
  border-color: rgba(139, 92, 246, .45) !important;
}

/* ---- Cards / sections ---- */
.fi-section {
  border: 1px solid rgba(148, 163, 184, .16) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.dark .fi-section {
  background: #0f172a;
  border-color: rgba(148, 163, 184, .12);
}
.fi-section-header { padding-top: 18px; }

/* ---- Data tables ---- */
.fi-ta {
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .16);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
html:not(.dark) .fi-ta table thead th { background: #f8fafc; }
.fi-ta table tbody tr { transition: background .12s ease; }
.fi-ta table tbody tr:hover { background: rgba(139, 92, 246, .05) !important; }
.fi-ta table td { padding-top: 12px !important; padding-bottom: 12px !important; }

/* ---- Badges / status pills ---- */
.fi-badge {
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
}

/* ---- Form field labels ---- */
.fi-fo-field-label { font-weight: 700 !important; }

/* ---- Sidebar refinements ---- */
.fi-sidebar .fi-sidebar-item {
  transition: background .15s ease, transform .15s ease;
}
.fi-sidebar .fi-sidebar-item:not(.fi-sidebar-item-active):hover {
  background: rgba(139, 92, 246, .12);
}
.fi-sidebar .fi-sidebar-item:active { transform: scale(.985); }
.fi-sidebar .fi-sidebar-group-label { margin-left: 12px; }

/* ---- Scrollbars ---- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .35);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, .55); }

/* ---- Modals ---- */
.fi-modal-window { border-radius: 16px !important; }

/* ---- Notifications (toasts) ---- */
.fi-notification {
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25) !important;
}

/* ---- Pagination ---- */
.fi-pagination { font-weight: 600; }

/* ---- Empty states ---- */
.fi-empty-state-message { color: #94a3b8; }