/* ─── Force light mode + brand color: override every Astryx light-dark() token ─── */
/* Astryx's <Theme> renders a wrapper div carrying [data-astryx-theme] in addition to
   syncing the attribute onto <html>; theme.css sets tokens directly on that wrapper via
   @scope, so a direct-on-element declaration beats one merely inherited from :root
   regardless of layers. Targeting [data-astryx-theme] here (not just :root) ensures our
   overrides win on the actual element the tokens are read from. */
:root,
[data-astryx-theme] {
  color-scheme: light;

  /* Surface / background tokens */
  --color-background-surface:          #ffffff;
  --color-background-body:             #f1f4f7;
  --color-background-card:             #ffffff;
  --color-background-popover:          #ffffff;
  --color-background-muted:            rgba(5, 54, 89, 0.047);
  --color-background-inverted:         #0A1317;
  --color-background-error-inverted:   #AA071E;

  /* Text tokens */
  --color-text-primary:                #0A1317;
  --color-text-secondary:              #4E606F;
  --color-text-disabled:               #A4B0BC;
  --color-text-accent:                 #0A1317;

  /* Icon tokens */
  --color-icon-primary:                #0A1317;
  --color-icon-secondary:              #4E606F;
  --color-icon-disabled:               #A4B0BC;
  --color-icon-accent:                 #0A1317;

  /* Border tokens */
  --color-border:                      rgba(5, 54, 89, 0.1);
  --color-border-emphasized:           #CCD3DB;

  /* Interactive overlay tokens */
  --color-neutral:                     rgba(5, 54, 89, 0.1);
  --color-overlay:                     rgba(1, 18, 40, 0.4);
  --color-overlay-hover:               rgba(5, 54, 89, 0.047);
  --color-overlay-pressed:             rgba(5, 54, 89, 0.098);

  /* Misc */
  --color-skeleton:                    #CCD3DB;
  --color-track:                       #CCD3DB;
  --color-shadow:                      rgba(5, 54, 89, 0.1);

  /* Brand accent — black/white, replaces the theme-neutral default. Hover and
     active states resolve to this token, so it drives the black hover fills
     site-wide (see @astryxdesign/core Badge/Button/etc. :hover rules). */
  --color-accent:                      #0A1317;
  --color-accent-muted:                rgba(10, 19, 23, 0.12);
  --color-on-accent:                   #ffffff;

  /* "red" Badge variant (StatusChip/TabLabelCount) — kept monochrome, matches
     the neutral tokens so no red renders anywhere in the UI. */
  --color-background-red:              rgba(5, 54, 89, 0.1);
  --color-text-red:                    #0A1317;

  /* App-level overrides */
  background-color: #f8fafc;
  color: #0f172a;
}

/* Use Figtree — the font Astryx neutral theme defines via --font-family-body */
*, *::before, *::after {
  font-family: var(--font-family-body, 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: #f8fafc;
  color: #334155; /* slate-700 for highly readable, professional body text */
}

/* Header typography styling for a crisp, modern look */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: #0f172a; /* slate-900 for bold headers */
  letter-spacing: -0.02em;
}

/* All native inputs and textareas — catches every Astryx TextInput */
input, textarea {
  font-family: inherit !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
}

input::placeholder, textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* Base input overrides for custom plain inputs (excluding Astryx styled components) */
input:not(.search-bar-input):not([class]), select:not([class]), textarea:not([class]) {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(5, 54, 89, 0.12) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 0.875rem !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

input:not(.search-bar-input):not([class]), select:not([class]) {
  height: 38px !important;
}

input:not(.search-bar-input):not([class]):focus, select:not([class]):focus, textarea:not([class]):focus {
  border-color: #0A1317 !important;
  box-shadow: 0 0 0 3px rgba(10, 19, 23, 0.12) !important;
}

/* Premium Select Dropdown Styling */
select:not([class]) {
  appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2364748b'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
  padding-right: 40px !important;
  cursor: pointer !important;
}

/* Premium Search Bar Custom Styling */
.search-bar-form {
  display: flex;
  align-items: center;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1;
  border-radius: 9999px;
  padding: 8px 16px;
  width: 100%;
  max-width: 320px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.search-bar-form:focus-within {
  border-color: #0A1317;
  box-shadow: 0 0 0 4px rgba(10, 19, 23, 0.12), 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  max-width: 380px; /* Expand slightly on focus for premium desktop feel */
}

.search-bar-input {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-size: 0.875rem !important;
  color: #0f172a !important;
  width: 100% !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Table and interactive enhancements */
.table-row-hover:hover {
  background-color: #f8fafc !important;
}

/* Pagination rows per page dropdown */
.rpp-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 75px !important;
  height: 32px !important;
  padding: 4px 24px 4px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(5, 54, 89, 0.12) !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-size: 0.875rem !important;
  outline: none !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2364748b'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 12px !important;
}
