@import url('https://fonts.googleapis.com/css2?family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
:root {
    --primary: lab(38.97% -11.57 -12.14)!important;
    --secondary-foreground: lab(19.2% -11.55 -12.18)!important;
    --sidebar-primary: #35626f!important;
    --sidebar-accent: #bceaf9!important;
    --sidebar-accent-foreground: #35626f!important;
    --sidebar-ring: #35626f!important;
}
header.sticky, #app-main-wrapper, #page-pricing, .aisantara-auth-layout, body#core\:welcome {
    background: #F5F1E8;
}
header.sticky {
    height: 5rem;
}
header img.brand-logo {
    border-radius: unset;
}
#app-main-wrapper .bg-sidebar {
    background: transparent;
}
#page-pricing > .relative {
    max-width: 100%;
    padding: 0;
    padding-inline: calc(var(--spacing) * 5);
}
.brand-logo-title {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 2;
}
.brand-logo-link:hover {
    background: transparent;
}
.brand-logo-title,
.aisantara-auth-title,
h2.text-base,
.bg-sidebar ul > li span {
    font-family: "Sansation", sans-serif;
}
h2.text-base {
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: 600;
}
main.bg-background {
    margin: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    height: calc(100svh - 5rem);
}
#app-main-wrapper div[data-slot="sidebar-container"] {
    height: calc(100svh - 4rem);
    top: 4rem;
    background: rgba(245, 241, 232, 60%);
}
#app-main-wrapper > div.text-sidebar-foreground {
    background-image: url(https://woonotif.com/assets/img/maps-bw.svg);
    background-repeat: no-repeat;
    background-position: 85% 170%;
}

@media (min-width: 768px) {
    button[data-slot="sidebar-trigger"] {
        display: none;
    }
}

/* ==========================================================================
   OPENROUTER-STYLE OVERRIDES (LIGHT MODE)
   Inject this into your global CSS or a <style> tag on this page.
   ========================================================================== */

/* 1. Global Background & Typography */
main[data-slot="sidebar-inset"] {
  background-color: #fafafa !important; /* Very light gray background */
  color: #111111 !important; /* Near black for high contrast */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* 2. Header & Top Navigation */
main[data-slot="sidebar-inset"] > div > main > div:first-child {
  border-bottom: 1px solid #e5e5e5 !important;
  padding-bottom: 1.25rem !important;
  margin-bottom: 0.5rem !important;
}

main[data-slot="sidebar-inset"] h2 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #000000 !important;
}

/* "Setup guide" Secondary Button */
button[data-slot="button"] {
  /* background: #ffffff !important; */
  border: 1px solid #d4d4d4 !important;
  /* color: #555555 !important; */
  border-radius: 6px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

button[data-slot="button"]:hover {
  /* background: #f5f5f5 !important; */
  /* color: #111111 !important; */
  /* border-color: #a3a3a3 !important; */
}

#header-search-input {
    background: #ffffff !important;
    border: 1px solid #d4d4d4 !important;
    color: #555555 !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    font-size: 14px;
}

/* 3. Global Text Muting & Monospace Numbers */
.text-muted-foreground {
  color: #666666 !important;
}

.font-mono,
#dashboard-summary-cards .tabular-nums,
#dashboard-health-panel .tabular-nums {
  font-family: "JetBrains Mono", "Fira Code", monospace !important;
  letter-spacing: -0.05em !important;
  color: #000000 !important;
}

/* 4. Dashboard Summary Cards Container */
#dashboard-summary-cards > div.bg-card {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

/* The 3 inner metrics cards (Last 24h, Historical, Request Count) */
#dashboard-summary-cards .grid-cols-3 > div {
  background: #fafafa !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px !important;
  transition: border-color 0.2s ease !important;
}

#dashboard-summary-cards .grid-cols-3 > div:hover {
  border-color: #cccccc !important;
}

/* Right-side panel: "Credit remaining" */
#dashboard-summary-cards .border-t {
  /* Very subtle cool gradient */
  background: linear-gradient(145deg, #f8f9fa 0%, #ffffff 100%) !important;
  border-color: #e5e5e5 !important;
}

@media (min-width: 1280px) {
  #dashboard-summary-cards .border-t {
    border-left: 1px solid #e5e5e5 !important;
  }
}

/* "Wallet" CTA Button (Inverted for High Contrast) */
#dashboard-summary-cards a[href="/wallet"] {
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

#dashboard-summary-cards a[href="/wallet"]:hover {
  background: #333333 !important;
}

/* 5. Sub-Panels (Health, API Info, Announcements, FAQ, Uptime) */
#dashboard-health-panel section,
#dashboard-api-info-panel > div,
#dashboard-announcements-panel > div,
#dashboard-faq-panel > div,
#dashboard-uptime-panel > div {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
}

/* Panel Headers */
#dashboard-health-panel .border-b,
#dashboard-api-info-panel .border-b,
#dashboard-announcements-panel .border-b,
#dashboard-faq-panel .border-b,
#dashboard-uptime-panel .border-b {
  border-bottom: 1px solid #e5e5e5 !important;
  background: #fafafa !important;
}

/* Performance Health inner metric boxes */
#dashboard-health-panel .bg-muted\/40 {
  background: #fafafa !important;
  border: 1px solid #eeeeee !important;
  border-radius: 8px !important;
}

/* Empty State / Placeholder Text Areas */
#dashboard-api-info-panel .h-72,
#dashboard-announcements-panel .h-72,
#dashboard-faq-panel .h-80,
#dashboard-uptime-panel .h-80 {
  background: repeating-linear-gradient(
    -45deg,
    #fafafa,
    #fafafa 10px,
    #f2f2f2 10px,
    #f2f2f2 20px
  ) !important;
  color: #888888 !important;
  font-style: italic !important;
}

/* 6. Icon Color Adjustments (Vibrant but legible on white) */
.bg-success\/10 { background: rgba(16, 185, 129, 0.15) !important; color: #059669 !important; }
.bg-warning\/10 { background: rgba(245, 158, 11, 0.15) !important; color: #d97706 !important; }
.bg-info\/10 { background: rgba(59, 130, 246, 0.15) !important; color: #2563eb !important; }
.bg-chart-1\/10 { background: rgba(239, 68, 68, 0.15) !important; color: #dc2626 !important; }
.bg-chart-2\/10 { background: rgba(168, 85, 247, 0.15) !important; color: #9333ea !important; }
.bg-chart-3\/10 { background: rgba(236, 72, 153, 0.15) !important; color: #db2777 !important; }
.bg-chart-4\/10 { background: rgba(14, 165, 233, 0.15) !important; color: #0284c7 !important; }

/* 7. SVG Charts / Lines in Top Cards */
#dashboard-summary-cards svg path[stroke="currentColor"] {
  stroke-width: 1.75 !important;
}
.text-overview-accent-1 { color: #dc2626 !important; } 
.text-overview-accent-2 { color: #9333ea !important; } 
.text-overview-accent-3 { color: #0284c7 !important; }

/* ==========================================================================
   ANALYTICS PAGE OVERRIDES (LIGHT MODE)
   ========================================================================== */

/* 1. Page Tabs (Model Call Analytics, Flow, User Analytics) */
div[data-slot="tabs-list"] {
  background-color: #f4f4f5 !important;
  border: 1px solid #e5e5e5 !important;
  padding: 4px !important;
  border-radius: 8px !important;
}

button[data-slot="tabs-trigger"] {
  color: #71717a !important;
  border-radius: 6px !important;
}

button[data-slot="tabs-trigger"][data-active="true"],
button[data-slot="tabs-trigger"][aria-selected="true"] {
  background-color: #ffffff !important;
  color: #000000 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #e5e5e5 !important;
}

button[data-slot="tabs-trigger"]:hover:not([data-active="true"]) {
  color: #111111 !important;
}

/* 2. Secondary Utility Buttons (Preferences, Filter) */
/* Using data-slot to avoid randomly generated IDs */
button[data-slot="dialog-trigger"] {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  color: #111111 !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.15s ease !important;
}

button[data-slot="dialog-trigger"]:hover {
  background: #fafafa !important;
  border-color: #cccccc !important;
}

/* 3. Log Stat Cards Grid (Total Count, Quota, Tokens, RPM, TPM) */
#dashboard-log-stat-cards > div.border {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

/* Ensure inner dividers match the clean, sharp border aesthetic */
#dashboard-log-stat-cards .divide-border\/60 > div {
  border-color: #e5e5e5 !important;
}

/* Apply monospace to new stat numbers */
#dashboard-log-stat-cards .font-mono {
  font-family: "JetBrains Mono", "Fira Code", monospace !important;
  color: #000000 !important;
  letter-spacing: -0.03em !important;
}

/* Sub-labels in stat cards */
#dashboard-log-stat-cards .text-muted-foreground.uppercase {
  color: #666666 !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

/* 4. Empty State Panel (Performance Overview) */
#dashboard-model-perf-overview > div {
  background: repeating-linear-gradient(
    -45deg,
    #fafafa,
    #fafafa 10px,
    #f2f2f2 10px,
    #f2f2f2 20px
  ) !important;
  border: 1px dashed #d4d4d4 !important;
  color: #888888 !important;
  border-radius: 12px !important;
}

/* 5. Chart Panels (Quota Distribution & Call Analytics) */
#dashboard-consumption-distribution > div.border,
#dashboard-model-charts > div.border {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

/* Chart Headers */
#dashboard-consumption-distribution .border-b,
#dashboard-model-charts .border-b {
  border-bottom: 1px solid #e5e5e5 !important;
  background: #fafafa !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

/* Chart Sub-Toggles (Bar Chart, Area Chart, Call Trend, etc.) */
/* Target the pill container */
.bg-muted\/60.rounded-lg {
  background: #f4f4f5 !important;
  border: 1px solid #e5e5e5 !important;
  padding: 4px !important;
}

/* Active sub-toggle */
.bg-muted\/60 button.bg-background {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #e5e5e5 !important;
  font-weight: 600 !important;
}

/* Inactive sub-toggle */
.bg-muted\/60 button.text-muted-foreground {
  color: #71717a !important;
}
.bg-muted\/60 button.text-muted-foreground:hover {
  color: #111111 !important;
}

/* ==========================================================================
   API KEYS PAGE OVERRIDES (LIGHT MODE)
   ========================================================================== */

/* 1. Primary Action Button ("Create API Key") */
button.bg-primary {
  border: none !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: background-color 0.2s ease !important;
}

/* 2. Input Fields (Search / Filters) */
input[data-slot="input"] {
  background: #ffffff !important;
  border: 1px solid #d4d4d4 !important;
  color: #111111 !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.15s ease !important;
}

input[data-slot="input"]:focus {
  border-color: #000000 !important;
  outline: none !important;
  box-shadow: 0 0 0 1px #000000 !important; /* Sharp, high-contrast focus ring */
}

/* "Status" Dashed Button Overrides */
button.border-dashed {
  border-color: #cccccc !important;
}
button.border-dashed:hover {
  border-color: #999999 !important;
}

/* 3. Table Container & Layout */
#api-keys-table-wrapper > div > div.overflow-hidden.border {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

/* Table Header */
thead[data-slot="table-header"] tr {
  background-color: #f8f9fa !important;
  border-bottom: 1px solid #e5e5e5 !important;
}

thead[data-slot="table-header"] th {
  color: #555555 !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Sticky action column header */
thead[data-slot="table-header"] th[data-column-id="actions"] {
  background-color: #f8f9fa !important;
}

/* Table Rows */
tbody[data-slot="table-body"] tr {
  border-bottom: 1px solid #eeeeee !important;
  transition: background-color 0.15s ease !important;
}

tbody[data-slot="table-body"] tr:hover,
tbody[data-slot="table-body"] tr[data-state="selected"] {
  background-color: #fafafa !important;
}

tbody[data-slot="table-body"] tr:last-child {
  border-bottom: none !important;
}

/* 4. Table UI Elements (Checkboxes & Badges) */
/* Checkboxes */
span[data-slot="checkbox"] {
  border: 1px solid #cccccc !important;
  border-radius: 4px !important;
  background: #ffffff !important;
}

span[data-slot="checkbox"][data-checked] {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

/* Status Badges */
span[data-slot="status-badge"] {
  background: #f4f4f5 !important;
  border: 1px solid #e5e5e5 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
}

/* Specific Badge Colors */
span[data-slot="status-badge"].text-success {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
  color: #059669 !important;
}

span[data-slot="status-badge"].text-info {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  color: #2563eb !important;
}

/* 5. Typography in Table */
/* Apply JetBrains to Keys, Quotas, and Dates */
td[data-column-id="key"] button,
td[data-column-id="quota"] span,
time[data-slot="tooltip-trigger"] span.tabular-nums {
  font-family: "JetBrains Mono", "Fira Code", monospace !important;
  letter-spacing: -0.02em !important;
}

td[data-column-id="key"] button.text-muted-foreground {
  color: #111111 !important; /* Make the API key stand out more */
}

/* 6. Inline Action Buttons (Copy, Edit, Delete, Menu) */
td[data-column-id="key"] button[data-slot="tooltip-trigger"],
td[data-column-id="actions"] button {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #888888 !important;
}

td[data-column-id="key"] button[data-slot="tooltip-trigger"]:hover,
td[data-column-id="actions"] button:hover:not(.text-destructive) {
  background: #ffffff !important;
  border-color: #e5e5e5 !important;
  color: #111111 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

/* Destructive Action (Disable/Power off) */
td[data-column-id="actions"] button.text-destructive {
  color: #dc2626 !important;
}

td[data-column-id="actions"] button.text-destructive:hover {
  background: rgba(220, 38, 38, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.2) !important;
  color: #b91c1c !important;
}

/* 7. Pagination Footer */
.bg-background.border-t {
  border-top: 1px solid #e5e5e5 !important;
  background-color: #fafafa !important;
}

/* Dropdown trigger (Rows per page) */
button[data-slot="select-trigger"] {
  background: #ffffff !important;
  border: 1px solid #d4d4d4 !important;
}

/* Pagination Arrow Controls */
.bg-background.border-t button.border:not(.bg-primary) {
  background: #ffffff !important;
  border: 1px solid #d4d4d4 !important;
  color: #555555 !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}

.bg-background.border-t button.border:hover:not(:disabled):not(.bg-primary) {
  background: #f4f4f5 !important;
  border-color: #a3a3a3 !important;
  color: #111111 !important;
}

.bg-background.border-t button:disabled {
  background: #fafafa !important;
  border-color: #eeeeee !important;
  color: #cccccc !important;
}

/* Active Page Number Button (e.g. "1") */
.bg-background.border-t button.bg-primary {
  background: #000000 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* ==========================================================================
   COMMON LOGS PAGE SPECIFIC OVERRIDES (LIGHT MODE)
   ========================================================================== */

/* 1. Filter Toolbar Container */
#usage-logs-table-wrapper .bg-card\/55,
#usage-logs-table-wrapper .bg-card\/50 {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

/* 2. Date Range / Calendar Popover Trigger Button */
#usage-logs-table-wrapper button[data-slot="popover-trigger"] {
  background: #ffffff !important;
  border: 1px solid #d4d4d4 !important;
  border-radius: 6px !important;
  color: #111111 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

#usage-logs-table-wrapper button[data-slot="popover-trigger"]:hover {
  background: #fafafa !important;
  border-color: #a3a3a3 !important;
  color: #000000 !important;
}

/* 3. Metric Summary Pills (Usage, RPM, TPM) */
#usage-logs-table-wrapper .border-border\/60.bg-muted\/25 {
  background: #f8f9fa !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* 4. Logs Table Outer Container Wrapper */
#usage-logs-table-wrapper div.overflow-hidden.rounded-lg.border {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}

/* 5. Logs Table Cell Specific Elements */
/* Channel badges styling */
#usage-logs-table-wrapper td[data-column-id="channel"] span[data-slot="status-badge"] {
  background: #f4f4f5 !important;
  border: 1px solid #e5e5e5 !important;
  font-family: "JetBrains Mono", monospace !important;
}

/* Token Name & Model Name badges */
#usage-logs-table-wrapper td[data-column-id="token_name"] span[data-slot="status-badge"],
#usage-logs-table-wrapper td[data-column-id="model_name"] span[data-slot="status-badge"] {
  background: #fafafa !important;
  border-color: #e5e5e5 !important;
  color: #111111 !important;
}

/* Prompt Tokens font styling */
#usage-logs-table-wrapper td[data-column-id="prompt_tokens"] .font-mono {
  font-family: "JetBrains Mono", monospace !important;
  color: #111111 !important;
}

/* Quota / Cost Cell Highlighting */
#usage-logs-table-wrapper td[data-column-id="quota"] span[data-slot="status-badge"] {
  background: #f8f9fa !important;
  border: 1px solid #e5e5e5 !important;
  font-weight: 600 !important;
  color: #000000 !important;
  font-family: "JetBrains Mono", monospace !important;
}

/* Details / Pricing button hover state */
#usage-logs-table-wrapper td[data-column-id="content"] button:hover span.group-hover\:underline {
  color: #000000 !important;
}

#wallet-recharge-card div[data-slot="alert"] {
    display: none;
}

#wallet-recharge-card div[data-slot="alert"] ~ div {
    border-top: none;
    padding-top: 0;
}

.aisantara-auth-header {
    margin-bottom: 10px;
}