/* ============================================================
   Appresta — Admin design system (Filament theme override)
   Professional, dense, brand-driven. No build step.
   ============================================================ */

:root {
  /* Petrol blue identity (distinctive, not generic corporate blue) */
  --ap-navy: #08323B;     /* deep petrol — sidebar / dark surfaces */
  --ap-navy-2: #0C4C58;   /* petrol gradient end */
  --ap-blue: #0E6E7D;     /* primary petrol */
  --ap-blue-mid: #1A95A6; /* hover / interactive */
  --ap-magenta: #D6336C;  /* warm accent (petrol + raspberry) */
  --ap-ink: #0D1117;
  --ap-slate: #5A6478;
  --ap-rule: #E4E9EC;
  --ap-bg: #F1F5F6;
  --ap-card: #FFFFFF;
  --ap-radius: 10px;
  --ap-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ap-display: 'Space Grotesk', var(--ap-font);
  --ap-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---- Base typography & density ---- */
html { font-size: 14px; }
.fi-body, .fi-simple-layout {
  font-family: var(--ap-font);
  background: var(--ap-bg);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.006em;
}
.fi-main { max-width: 90rem; }

/* Headings */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-fo-wizard-header-step-label {
  font-family: var(--ap-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ap-navy);
}
.fi-header-heading { font-size: 1.35rem; }
.dark .fi-header-heading,
.dark .fi-section-header-heading { color: #E8EEF8; }

/* ---- Brand logo (text) ---- */
.fi-logo {
  font-family: var(--ap-display) !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.4rem;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.fi-logo::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ap-magenta);
  margin-left: 3px;
  margin-bottom: -2px;
}

/* ---- Sidebar: navy, brand ---- */
.fi-sidebar,
.fi-sidebar-header {
  background: linear-gradient(180deg, var(--ap-navy), var(--ap-navy-2)) !important;
  border-right: none !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.04);
}
.fi-sidebar-header { box-shadow: none; }
.fi-sidebar-nav { padding-top: .25rem; }

.fi-sidebar-group-label {
  color: rgba(255,255,255,0.62) !important;
  font-family: var(--ap-display);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}
.fi-sidebar-item-button {
  color: rgba(255,255,255,0.90) !important;
  border-radius: 8px;
  font-weight: 500;
  font-size: .86rem;
  padding-top: .5rem; padding-bottom: .5rem;
}
.fi-sidebar-item-button:hover {
  background: rgba(255,255,255,0.10) !important;
}
/* Filament colors the label span directly — target it for real contrast */
.fi-sidebar-item-label,
.fi-sidebar-item-button .fi-sidebar-item-label {
  color: rgba(255,255,255,0.92) !important;
}
.fi-sidebar-item-button:hover .fi-sidebar-item-label { color: #fff !important; }
.fi-sidebar-item-icon,
.fi-sidebar-item-button .fi-sidebar-item-icon { color: rgba(255,255,255,0.80) !important; }
.fi-sidebar-item-button:hover .fi-sidebar-item-icon { color: #fff !important; }
.fi-sidebar-item-active .fi-sidebar-item-button {
  background: rgba(255,255,255,0.14) !important;
  box-shadow: inset 3px 0 0 var(--ap-magenta);
}
.fi-sidebar-item-active .fi-sidebar-item-label { color: #fff !important; font-weight: 600; }
.fi-sidebar-item-active .fi-sidebar-item-icon { color: #fff !important; }

/* ---- Topbar ---- */
.fi-topbar > nav,
.fi-topbar {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--ap-rule);
  box-shadow: none !important;
}

/* ---- Cards / sections ---- */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-fo-component-ctn > .fi-section {
  border: 1px solid var(--ap-rule);
  border-radius: var(--ap-radius);
  box-shadow: 0 1px 2px rgba(13,17,23,0.04);
}
.dark .fi-section { border-color: rgba(255,255,255,0.08); }

/* ---- Tables: dense, scannable, enterprise ---- */
.fi-ta-header-cell {
  font-family: var(--ap-display);
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ap-slate);
  font-weight: 600;
  padding-top: .55rem; padding-bottom: .55rem;
  background: #FAFBFD;
}
.dark .fi-ta-header-cell { background: rgba(255,255,255,0.02); }
.fi-ta-row { transition: background .12s ease; }
.fi-ta-row:hover { background: #F7F9FC; }
.dark .fi-ta-row:hover { background: rgba(255,255,255,0.03); }
.fi-ta-cell { padding-top: .45rem; padding-bottom: .45rem; }
.fi-ta-text-item-label { font-size: .85rem; }
.fi-ta-record-content { font-size: .85rem; }

/* Mono columns (hashes, ids) */
.fi-ta-text-item.fi-ta-text-item-color-gray code,
.fi-color-gray code { font-family: var(--ap-mono); }

/* ---- Care-symbol picker icons (CheckboxList allowHtml) ---- */
.fi-fo-checkbox-list svg { width: 28px !important; height: 28px !important; }

/* ---- Badges ---- */
.fi-badge {
  font-family: var(--ap-display);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 6px;
}

/* ---- Buttons ---- */
.fi-btn {
  font-family: var(--ap-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 9px;
}

/* ---- Inputs ---- */
.fi-input, .fi-select-input, .fi-fo-field-wrp .fi-input {
  border-radius: 9px;
}
.fi-fo-field-wrp-label { font-weight: 600; color: var(--ap-ink); font-size: .8rem; }
.dark .fi-fo-field-wrp-label { color: #D6DEEC; }

/* ---- Stats widget refinement ---- */
.fi-wi-stats-overview-stat-value {
  font-family: var(--ap-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.fi-wi-stats-overview-stat-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ap-slate);
}

/* ============================================================
   Auth (login / register) — full-bleed image + 2-column overlay
   Background image covers the whole page. Left = brand/text/terms.
   Right = the access / registration box floating over the image.
   ============================================================ */
.fi-simple-layout {
  display: grid !important;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch !important;
  justify-items: stretch !important;
  min-height: 100vh;
  width: 100%;
  background-image:
    linear-gradient(105deg, rgba(8,50,59,0.90) 0%, rgba(14,110,125,0.62) 48%, rgba(8,50,59,0.55) 72%, rgba(214,51,108,0.32) 100%),
    url('/img/bg/bg2.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Left column: brand content (transparent over the image) */
.ap-auth-brand {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 3.5rem 4rem;
  color: #fff;
}
.ap-auth-brand__overlay { display: none; } /* overlay now on the layout */

.ap-auth-logo { display: flex; align-items: center; gap: .7rem; }
.ap-auth-logo__mark { width: 40px; height: 40px; color: #fff; }
.ap-auth-logo__word {
  font-family: var(--ap-display); font-weight: 700; font-size: 1.7rem;
  letter-spacing: -0.03em; display: inline-flex; align-items: center; color: #fff;
}
.ap-auth-logo__word i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ap-magenta); margin-left: 4px; margin-bottom: -2px;
}

.ap-auth-brand__mid { max-width: 32rem; }
.ap-auth-brand__mid h2 {
  font-family: var(--ap-display); font-weight: 600;
  font-size: clamp(1.8rem, 2.6vw, 2.6rem); line-height: 1.1; letter-spacing: -0.025em;
}
.ap-auth-brand__mid p {
  margin-top: 1rem; font-size: .95rem; line-height: 1.6;
  color: rgba(255,255,255,0.82); max-width: 28rem;
}
.ap-auth-brand__bottom { max-width: 36rem; }
.ap-auth-disclaimer { font-size: .72rem; line-height: 1.6; color: rgba(255,255,255,0.62); }
.ap-auth-links {
  margin-top: .75rem; font-size: .72rem; display: flex; gap: .5rem; align-items: center;
  color: rgba(255,255,255,0.5);
}
.ap-auth-links a { color: rgba(255,255,255,0.85); text-decoration: none; }
.ap-auth-links a:hover { color: #fff; text-decoration: underline; }

/* Right column: the form box, floating over the image */
.fi-simple-layout .fi-simple-main-ctn {
  grid-column: 2;
  grid-row: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem; width: 100%;
  max-height: 100vh;
  overflow-y: auto;            /* long forms scroll inside the right column */
}
.ap-auth-brand { max-height: 100vh; overflow-y: auto; } /* keep left tidy too */
.fi-simple-main {
  width: 100%; max-width: 27rem;
  margin: 0 !important;
  border-radius: 16px;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 30px 70px -25px rgba(0,12,34,0.55);
  border: 1px solid rgba(255,255,255,0.4);
}
.dark .fi-simple-main { background: rgba(17,24,39,0.96); }
.fi-simple-main .fi-logo { color: var(--ap-navy); font-size: 1.7rem; }
.fi-simple-header-heading {
  font-family: var(--ap-display); color: var(--ap-navy); letter-spacing: -0.02em;
}

/* Mobile: stack — image stays as background, brand hidden, form centered */
@media (max-width: 1023px) {
  .fi-simple-layout { grid-template-columns: 1fr; }
  .ap-auth-brand { display: none; }
  .fi-simple-layout .fi-simple-main-ctn { grid-column: 1; }
}