/*
 * ShipGlobal Call Analytics admin panel theme (Phase 1: global theme,
 * sidebar, header, dashboard, login). Registered via FilamentAsset in
 * FilamentAdminPanelProvider -- a single plain CSS file, no Tailwind/Vite
 * build step. Targets Filament v3.3.54's real DOM classes (verified against
 * the installed version's own Blade sources, not guessed). !important is
 * used only where it must win over Filament's own bundled classes of equal
 * or higher specificity, or over an inline style Filament renders itself
 * (the logo's height).
 */

:root {
  --sg-navy: #07162e;
  --sg-navy-hover: #0f213f;
  --sg-navy-active: #142a4d;
  --sg-blue: #214c9b;
  --sg-orange: #f3a11f;
  --sg-bg: #f6f7f9;
  --sg-card-border: #e5e7eb;
  --sg-text-muted-on-navy: #93a2bd;
  --sg-text-on-navy: #dbe3f0;
}

body {
  background-color: var(--sg-bg) !important;
}

/* ---------- Main content background ---------- */

.fi-main-ctn,
.fi-main {
  background-color: var(--sg-bg);
}

/* ---------- Sidebar: always dark navy, regardless of light/dark mode ---------- */

.fi-sidebar,
.fi-sidebar-header {
  background-color: var(--sg-navy) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.fi-sidebar-header {
  box-shadow: none !important;
  height: 4.875rem !important;
  padding-inline: 1.5rem !important;
  display: flex;
  align-items: center;
}

/* Aligns with .fi-sidebar-nav's own 1.5rem side padding (confirmed against
 * the installed source) so the logo's left edge lines up with nav icons
 * below it, rather than sitting at a different inset. */
.fi-sidebar .fi-logo {
  margin-inline: 0;
}

.fi-sidebar-nav-groups {
  gap: 1.5rem;
}

.fi-sidebar-group-label {
  color: var(--sg-text-muted-on-navy) !important;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fi-sidebar-item-button {
  border-radius: 0.5rem;
}

.fi-sidebar-item-label {
  color: var(--sg-text-on-navy) !important;
}

.fi-sidebar-item-icon {
  color: var(--sg-text-muted-on-navy) !important;
}

.fi-sidebar-item-button:hover {
  background-color: var(--sg-navy-hover) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button {
  background-color: var(--sg-navy-active) !important;
  box-shadow: inset 3px 0 0 0 var(--sg-orange);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
  color: var(--sg-orange) !important;
}

/* ---------- Sidebar: per-group icon color coding (inactive items only) ----------
 * data-group-label is a real Filament attribute (set on .fi-sidebar-group
 * by packages/panels/resources/views/components/sidebar/item.blade.php's
 * x-data binding -- confirmed against the installed source), matching each
 * group's own $navigationGroup string exactly. :not(.fi-active) keeps this
 * from ever competing with the active-item orange rule above regardless of
 * selector specificity/source order -- active state must always win. */

.fi-sidebar-group[data-group-label='Reporting'] .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-icon {
  color: #7aa2e8 !important;
}

.fi-sidebar-group[data-group-label='Call Recordings'] .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-icon {
  color: #2dd4c8 !important;
}

.fi-sidebar-group[data-group-label='People'] .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-icon {
  color: #a389f4 !important;
}

.fi-sidebar-group[data-group-label='Configuration'] .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-icon {
  color: #f0b84f !important;
}

.fi-sidebar-group[data-group-label='Compliance'] .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-icon {
  color: #f18a70 !important;
}

.fi-sidebar-close-overlay {
  background-color: rgba(7, 22, 46, 0.6) !important;
}

/* ---------- Login page: navy brand header behind the logo ----------
 * The supplied logo's wordmark is light/white, invisible on the login
 * page's white card -- .fi-simple-header (Filament's own real class for
 * this exact block: logo + heading + subheading) is given the sidebar's
 * navy so the untouched, unmodified logo asset is clearly visible, without
 * overriding any vendor Blade template. Negative margins bleed it to the
 * card's own edges (.fi-simple-main's real padding is px-6 py-12,
 * sm:px-12) so it reads as one seamless navy panel, not a box floating
 * inside a box. */

.fi-simple-main {
  padding-top: 0 !important;
  overflow: hidden;
}

.fi-simple-header {
  background-color: var(--sg-navy);
  margin: 0 -1.5rem 2rem -1.5rem;
  padding: 2.5rem 1.5rem 2rem;
}

@media (min-width: 640px) {
  .fi-simple-header {
    margin-inline: -3rem;
    padding-inline: 3rem;
  }
}

.fi-simple-header .fi-logo {
  height: 3.75rem !important;
}

.fi-simple-header-heading {
  color: #fff !important;
}

.fi-simple-header-subheading {
  color: var(--sg-text-muted-on-navy) !important;
}

.fi-simple-layout {
  background-color: var(--sg-bg);
}

/* ---------- Cards ---------- */

.sg-card {
  background-color: #fff;
  border: 1px solid var(--sg-card-border);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.04);
  padding: 1rem 1.125rem;
  transition: box-shadow 0.15s ease;
}

.sg-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
}

.sg-card-subtitle {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-top: 0.125rem;
}

/* ---------- Dashboard composition grid ----------
 * 12-column desktop grid: Daily Trend(8)/Call Type(4), Hourly(8)/Needs
 * Attention(4), Top Agents(7)/Call Overview(5) -- a mixed grid of large +
 * small panels instead of one long vertical stack, so multiple sections are
 * visible together on a normal desktop viewport. */

.sg-dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
}

@media (min-width: 1024px) {
  .sg-dash-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .sg-col-8 {
    grid-column: span 8 / span 8;
  }

  .sg-col-4 {
    grid-column: span 4 / span 4;
  }

  .sg-col-7 {
    grid-column: span 7 / span 7;
  }

  .sg-col-5 {
    grid-column: span 5 / span 5;
  }
}

/* ---------- KPI cards ---------- */

.sg-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .sg-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .sg-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.sg-kpi-card {
  background-color: #fff;
  border: 1px solid var(--sg-card-border);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.04);
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.sg-kpi-card-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
}

.sg-kpi-card-icon-ctn {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sg-kpi-card-icon {
  width: 1rem;
  height: 1rem;
}

/* Per-metric semantic tile colors (spec: "subtle colored icon tiles", card
 * background itself always stays white). Applied via a modifier class on
 * .sg-kpi-card-icon-ctn set directly in reports.blade.php's own $kpis array
 * -- not a guessed vendor selector, this is our own markup. */

.sg-kpi-tile-blue { background-color: rgba(33, 76, 155, 0.12); }
.sg-kpi-tile-blue .sg-kpi-card-icon { color: #214c9b; }

.sg-kpi-tile-green { background-color: rgba(16, 163, 127, 0.12); }
.sg-kpi-tile-green .sg-kpi-card-icon { color: #0f9d78; }

.sg-kpi-tile-indigo { background-color: rgba(99, 102, 241, 0.12); }
.sg-kpi-tile-indigo .sg-kpi-card-icon { color: #6366f1; }

.sg-kpi-tile-cyan { background-color: rgba(6, 182, 212, 0.12); }
.sg-kpi-tile-cyan .sg-kpi-card-icon { color: #0891b2; }

.sg-kpi-tile-violet { background-color: rgba(139, 92, 246, 0.12); }
.sg-kpi-tile-violet .sg-kpi-card-icon { color: #7c3aed; }

.sg-kpi-tile-orange { background-color: rgba(243, 161, 31, 0.14); }
.sg-kpi-tile-orange .sg-kpi-card-icon { color: #d97f0a; }

.sg-kpi-card-value {
  font-size: 1.375rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

/* ---------- Chart cards: tighten Filament's own section padding a little ----------
 * .fi-section-content (not -ctn) is where Filament's Section component
 * actually applies p-6/p-4 -- confirmed against the installed version's own
 * source. */

.sg-dash-grid .fi-wi-chart .fi-section-content {
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
}

/* ---------- Needs Attention ---------- */

.sg-attention-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sg-attention-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  background-color: #fafafa;
  text-decoration: none;
  transition: background-color 0.12s ease;
}

.sg-attention-item:hover {
  background-color: #f3f4f6;
}

.sg-attention-item:focus-visible {
  outline: 2px solid var(--sg-blue);
  outline-offset: 1px;
}

.sg-attention-item-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #374151;
}

.sg-attention-item-icon-ctn {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sg-attention-item-icon {
  width: 0.8125rem;
  height: 0.8125rem;
}

.sg-attention-item-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
}

/* Severity badge colors -- subtle icon-badge tint only, never a full-row
 * background (spec: "Do NOT give full rows bright backgrounds"). */

.sg-attention-red .sg-attention-item-icon-ctn { background-color: rgba(220, 38, 38, 0.12); }
.sg-attention-red .sg-attention-item-icon { color: #dc2626; }

.sg-attention-orange .sg-attention-item-icon-ctn { background-color: rgba(243, 161, 31, 0.16); }
.sg-attention-orange .sg-attention-item-icon { color: #d97f0a; }

.sg-attention-amber .sg-attention-item-icon-ctn { background-color: rgba(217, 119, 6, 0.14); }
.sg-attention-amber .sg-attention-item-icon { color: #b45309; }

/* ---------- Report tabs (pills) ---------- */

.sg-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0.375rem;
  padding: 0.3125rem;
  background-color: #fff;
  border: 1px solid var(--sg-card-border);
  border-radius: 0.75rem;
  scrollbar-width: none;
}

.sg-tabs::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1024px) {
  .sg-tabs {
    flex-wrap: wrap;
  }
}

.sg-tab {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0.4375rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b7280;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.sg-tab:hover {
  background-color: #f3f4f6;
  color: #374151;
}

.sg-tab:focus-visible {
  outline: 2px solid var(--sg-blue);
  outline-offset: 1px;
}

.sg-tab-active,
.sg-tab-active:hover {
  background-color: var(--sg-blue);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px 0 rgba(33, 76, 155, 0.35);
}

/* ---------- Call Overview (grouped secondary metrics) ---------- */

.sg-overview-groups {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sg-overview-groups > div + div {
  border-top: 1px solid #f3f4f6;
  padding-top: 0.75rem;
}

.sg-overview-group-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.sg-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem 0.75rem;
}

@media (min-width: 640px) {
  .sg-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Deliberately lighter than .sg-card / .sg-kpi-card -- these are meant to
 * read as compact data labels within one grouped panel, not as their own
 * independent cards (spec: "Avoid making each mini tile look like a full
 * independent card"). No border, no shadow -- just a faint background tint
 * and tight padding. */
/* Column layout (label above value) rather than a label-left/value-right
 * row -- a row forced the label to share its half of the tile with the
 * value and truncate with an ellipsis (e.g. "Unique Clients", "Avg
 * Duration (s)"). Giving the label the tile's full width, plus allowing it
 * to wrap as a fallback, fits every current label without shrinking it
 * below the group-label precedent size already used above in this same
 * card (.sg-overview-group-label, also 0.6875rem). */
.sg-overview-card {
  background-color: #fafafa;
  border-radius: 0.5rem;
  padding: 0.4375rem 0.625rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
}

.sg-overview-label {
  font-size: 0.6875rem;
  color: #6b7280;
  line-height: 1.25;
}

.sg-overview-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #111827;
  flex-shrink: 0;
}

/* ---------- Top Agents table ----------
 * .sg-col-7/.sg-col-5 are siblings on the same grid row as Call Overview
 * (7+5=12), so CSS Grid's default align-items:stretch makes both cards the
 * height of the taller one (Call Overview's 4 grouped metric sections) --
 * intentionally kept (spec: "if equal-height cards produce a cleaner grid
 * overall, keeping the current height is acceptable") rather than shrinking
 * the card, since a ragged bottom edge between the two cards would look
 * worse. Instead the table itself centers in the extra stretched space
 * below the title, distributing it as breathing room instead of a single
 * dead gap at the bottom. */

.sg-agents-card {
  display: flex;
  flex-direction: column;
}

.sg-agents-card .sg-agents-table-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sg-agents-table th {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #9ca3af;
  font-weight: 600;
}

.sg-agents-table td,
.sg-agents-table th {
  padding: 0.5rem 0.5rem;
}

.sg-agents-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 9999px;
  background-color: #f3f4f6;
  color: #6b7280;
  font-size: 0.6875rem;
  font-weight: 600;
}

.sg-agents-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background-color: rgba(33, 76, 155, 0.12);
  color: var(--sg-blue);
  font-size: 0.625rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sg-agents-row {
  border-top: 1px solid #f3f4f6;
  transition: background-color 0.1s ease;
}

.sg-agents-row:hover {
  background-color: #fafafa;
}

/* First place: a slightly stronger rank badge, not an oversized treatment. */
.sg-agents-row-first .sg-agents-rank {
  background-color: rgba(243, 161, 31, 0.16);
  color: #d97f0a;
}

.sg-agents-row-first .sg-agents-avatar {
  background-color: rgba(243, 161, 31, 0.14);
  color: #d97f0a;
}

/* ---------- Filter toolbar ---------- */

.sg-filter-toolbar {
  padding: 0.875rem 1.125rem;
}

.sg-filter-toolbar .fi-fo-field-wrp {
  margin-bottom: 0;
}

.sg-filter-toolbar .fi-fo-field-wrp-label {
  font-size: 0.6875rem;
  margin-bottom: 0.125rem;
}

.sg-filter-toolbar .fi-fo-component-ctn {
  gap: 0.625rem 0.75rem !important;
}

.sg-filter-toolbar .fi-input {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.8125rem;
}

.sg-filter-toolbar .fi-input-wrp {
  min-height: 2.25rem;
}

.sg-filter-toolbar-actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
}

/* ---------- Page header ---------- */

.fi-header-subheading {
  color: #6b7280;
}