/* ============================================================
   OnService — Design System v2.0
   Identidade visual moderna para agendamento e ação social
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* === Design Tokens === */
:root {
  --os-primary:        #2563EB;
  --os-primary-dark:   #1D4ED8;
  --os-primary-hover:  #1E40AF;
  --os-primary-100:    #DBEAFE;
  --os-primary-50:     #EFF6FF;
  --os-secondary:      #7C3AED;
  --os-secondary-100:  #EDE9FE;

  --os-success:        #10B981;
  --os-success-100:    #D1FAE5;
  --os-warning:        #F59E0B;
  --os-warning-100:    #FEF3C7;
  --os-danger:         #EF4444;
  --os-danger-100:     #FEE2E2;
  --os-info:           #06B6D4;
  --os-info-100:       #CFFAFE;

  --os-gray-50:  #F8FAFC;
  --os-gray-100: #F1F5F9;
  --os-gray-200: #E2E8F0;
  --os-gray-300: #CBD5E1;
  --os-gray-400: #94A3B8;
  --os-gray-500: #64748B;
  --os-gray-600: #475569;
  --os-gray-700: #334155;
  --os-gray-800: #1E293B;
  --os-gray-900: #0F172A;

  --os-bg:      #F1F5F9;
  --os-card:    #FFFFFF;
  --os-text:    #1E293B;
  --os-muted:   #64748B;
  --os-light:   #94A3B8;
  --os-border:  #E2E8F0;

  --os-sidebar-bg:    #0F172A;
  --os-sidebar-hover: #1E293B;
  --os-navbar-bg:     #FFFFFF;

  --os-shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --os-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --os-shadow:    0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --os-shadow-md: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  --os-shadow-lg: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);

  --os-radius-xs: 4px;
  --os-radius-sm: 8px;
  --os-radius:    12px;
  --os-radius-md: 16px;
  --os-radius-lg: 24px;
  --os-radius-xl: 32px;
  --os-pill:      9999px;

  --os-font: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  --os-t:   all 0.18s ease;
}

/* ============================================================
   GLOBAL BASE
   ============================================================ */
body {
  font-family: var(--os-font) !important;
  background-color: var(--os-bg) !important;
  color: var(--os-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── SIDEBAR FIXED ──
   position: sticky nao funciona com overflow:hidden no pai (container-scroller).
   A solucao correta e position: fixed + margin-left no page-body-wrapper. */
.sidebar {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 100 !important;
}

/* Page wrapper: compensa a sidebar fixed (que sai do fluxo normal) */
.page-body-wrapper {
  margin-left: 240px !important;
}

/* Modo icone-only: sidebar estreita */
.sidebar-icon-only .page-body-wrapper {
  margin-left: 70px !important;
  width: calc(100% - 70px) !important;
}

/* ============================================================
   SIDEBAR — override completo do style.css
   ============================================================ */

/* Fundo e borda superior colorida */
.sidebar {
  background: var(--os-sidebar-bg) !important;
  box-shadow: 2px 0 16px rgba(0,0,0,.28) !important;
  transition: var(--os-t);
  width: 240px;
}

.sidebar::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--os-primary), var(--os-secondary));
}

/* Nav list */
.sidebar .nav {
  padding: 0.5rem 0 2rem !important;
  overflow: hidden;
  flex-direction: column;
}

/* ── NAV-LINK base ── */
.sidebar .nav .nav-item .nav-link {
  display: flex !important;
  align-items: center !important;
  white-space: nowrap;
  padding: 0.72rem 1.5rem !important;
  color: #94A3B8 !important;
  border-left: 3px solid transparent !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  gap: 0 !important;          /* gap via margin-right no icon, nao gap */
}

.sidebar .nav .nav-item .nav-link:hover {
  color: #E2E8F0 !important;
  background: rgba(255,255,255,.07) !important;
  border-left-color: rgba(37,99,235,.45) !important;
}

/* ── ESTADO ATIVO ── */
.sidebar .nav .nav-item.active > .nav-link {
  color: #FFFFFF !important;
  background: rgba(37,99,235,.2) !important;
  border-left-color: var(--os-primary) !important;
}

/* ── ICONE menu-icon ──
   FIX: style.css define margin-right: 1.125rem.
   Mantemos esse margin e resetamos qualquer margin duplicado. */
.sidebar .nav .nav-item .nav-link i.menu-icon {
  font-size: 1.1rem !important;
  line-height: 1 !important;
  margin-right: 0.875rem !important;   /* sobrescreve o 1.125rem original */
  color: inherit !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  text-align: center !important;
}

/* ── TEXTO menu-title ── */
.sidebar .nav .nav-item .nav-link .menu-title {
  font-size: .825rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  color: inherit !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* ── SETA menu-arrow ──
   FIX: NÃO adicionar classes mdi ao elemento (duplica o ícone).
   O style.css renderiza a seta via ::before com content: "\F142" (chevron-right).
   Aqui sobrescrevemos para usar chevron-down e animação correta. */
.sidebar .nav .nav-item .nav-link i.menu-arrow {
  display: inline-block !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  color: #475569 !important;
  font-weight: normal !important;
  flex-shrink: 0 !important;
}

/* Seta apontando para baixo por padrão */
.sidebar .nav .nav-item .nav-link i.menu-arrow::before {
  content: "\F140" !important;           /* mdi-chevron-down */
  font-family: "Material Design Icons" !important;
  font-style: normal !important;
  display: block !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  transition: transform .2s ease !important;
  transform: rotate(0deg) !important;
}

/* Seta apontando para cima quando expandido */
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] i.menu-arrow::before {
  transform: rotate(180deg) !important;
  color: #93a8ff !important;
}

/* ── CATEGORIA (header de seção) ── */
.sidebar .nav .sidebar-category {
  padding: 1.2rem 1.5rem 0.4rem !important;
  margin: 0 !important;
}

.sidebar .nav .sidebar-category p {
  font-size: .63rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #334155 !important;
  margin: 0 !important;
}

.sidebar .nav .sidebar-category span { display: none !important; }

/* ── SUBMENU ── */
.sidebar .nav.sub-menu {
  background: rgba(0,0,0,.18) !important;
  padding: .25rem 0 .625rem !important;
  margin: 0 !important;
  list-style: none !important;
}

/* FIX: remove o ponto branco do ::before original que desalinhou os itens */
.sidebar .nav.sub-menu .nav-item::before {
  display: none !important;
  content: none !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link {
  padding: .55rem 1.5rem .55rem 3.1rem !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  color: #64748B !important;
  border-left: none !important;
  position: relative !important;
  line-height: 1.2 !important;
}

/* pontinho decorativo no sub-item */
.sidebar .nav.sub-menu .nav-item .nav-link::before {
  content: '' !important;
  position: absolute !important;
  left: 1.625rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #334155 !important;
  transition: background .18s !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover {
  color: #CBD5E1 !important;
  background: rgba(255,255,255,.05) !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover::before {
  background: var(--os-primary) !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link.active {
  color: #93A8FF !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link.active::before {
  background: var(--os-primary) !important;
}

/* ── HOVER (não-sub) ── */
.sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link {
  background: rgba(255,255,255,.07) !important;
  color: #E2E8F0 !important;
}

/* ── COLLAPSE ANIMATION ──
   Bootstrap define .collapse { display:none }. Como contornamos o plugin JS
   (stopImmediatePropagation), precisamos controlar a visibilidade via
   max-height + opacity — display:block é fixo, a altura anima. */
.sidebar .nav-item > .collapse {
  display: block !important;
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0;
  transition: max-height .28s ease-out, opacity .22s ease !important;
}

.sidebar .nav-item > .collapse.show {
  max-height: 500px !important;
  opacity: 1;
  transition: max-height .32s ease-in, opacity .22s ease !important;
}

/* ── MOBILE ── */
@media screen and (max-width: 991px) {
  /* Sidebar escondida fora da tela (esquerda) */
  .sidebar {
    top: 0 !important;
    height: 100vh !important;
    left: -260px !important;
    z-index: 1041 !important;
    transition: left .25s ease-out !important;
  }

  /* Sidebar visivel quando ativa */
  .sidebar.active {
    left: 0 !important;
  }

  /* Page wrapper ocupa tudo no mobile */
  .page-body-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ── OVERLAY mobile ──
   pointer-events: none quando inativo permite fade sem flash de display */
.os-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1039;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.os-sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   NAVBAR / TOP BAR
   ============================================================ */
.navbar.col-lg-12 {
  background: var(--os-navbar-bg) !important;
  border-bottom: 1px solid var(--os-border) !important;
  box-shadow: 0 1px 0 var(--os-border), 0 2px 12px rgba(0,0,0,.04) !important;
  height: 68px !important;
  padding: 0 1.5rem !important;
  margin-bottom: 0 !important;
}

.navbar .navbar-menu-wrapper {
  width: 100%;
  height: 100%;
}

.navbar-toggler {
  background: none !important;
  border: none !important;
  color: var(--os-gray-500) !important;
  font-size: 1.35rem !important;
  padding: .35rem .5rem !important;
  border-radius: var(--os-radius-sm) !important;
  transition: var(--os-t) !important;
  line-height: 1 !important;
}

.navbar-toggler:hover {
  color: var(--os-primary) !important;
  background: var(--os-primary-50) !important;
}

.navbar .navbar-brand-wrapper {
  margin: 0 1rem !important;
}

/* Welcome text in navbar */
.navbar h4.font-weight-bold {
  font-size: .9rem !important;
  font-weight: 600 !important;
  color: var(--os-text) !important;
  margin: 0 !important;
  padding: .25rem .75rem !important;
  background: var(--os-gray-50) !important;
  border-radius: var(--os-pill) !important;
  border: 1px solid var(--os-border) !important;
}

/* Date in navbar */
.navbar .navbar-nav-right h4 {
  font-size: .8rem !important;
  font-weight: 500 !important;
  color: var(--os-muted) !important;
  margin: 0 !important;
}

/* ============================================================
   PAGE BODY
   ============================================================ */
.page-body-wrapper {
  background: var(--os-bg) !important;
}

.content-wrapper {
  padding: 1.75rem 1.5rem !important;
  background: var(--os-bg) !important;
}

.main-panel {
  background: var(--os-bg) !important;
}

/* ============================================================
   CARD
   ============================================================ */
.card {
  background: var(--os-card) !important;
  border: 1px solid var(--os-border) !important;
  border-radius: var(--os-radius) !important;
  box-shadow: var(--os-shadow-sm) !important;
  transition: var(--os-t);
}

.card:hover {
  box-shadow: var(--os-shadow) !important;
}

.card-body {
  padding: 1.5rem !important;
}

.card-title {
  font-size: .95rem !important;
  font-weight: 700 !important;
  color: var(--os-text) !important;
  margin-bottom: .2rem !important;
}

/* ============================================================
   KPI STAT CARDS
   ============================================================ */
.os-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 1200px) { .os-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px)  { .os-kpi-row { grid-template-columns: 1fr; } }

.os-kpi {
  background: var(--os-card);
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius);
  padding: 1.375rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--os-shadow-sm);
  transition: var(--os-t);
  position: relative;
  overflow: hidden;
}

.os-kpi:hover {
  box-shadow: var(--os-shadow);
  transform: translateY(-2px);
}

.os-kpi::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 0 0 var(--os-radius) var(--os-radius);
}
.os-kpi.kpi-blue::after   { background: var(--os-primary); }
.os-kpi.kpi-green::after  { background: var(--os-success); }
.os-kpi.kpi-amber::after  { background: var(--os-warning); }
.os-kpi.kpi-purple::after { background: var(--os-secondary); }

.os-kpi-icon {
  width: 52px; height: 52px;
  border-radius: var(--os-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.kpi-blue   .os-kpi-icon { background: var(--os-primary-100); color: var(--os-primary); }
.kpi-green  .os-kpi-icon { background: var(--os-success-100); color: var(--os-success); }
.kpi-amber  .os-kpi-icon { background: var(--os-warning-100); color: var(--os-warning); }
.kpi-purple .os-kpi-icon { background: var(--os-secondary-100); color: var(--os-secondary); }

.os-kpi-body { flex: 1; min-width: 0; }

.os-kpi-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--os-text);
  line-height: 1;
  margin-bottom: .2rem;
}

.os-kpi-label {
  font-size: .73rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--os-muted);
}

.os-kpi-trend {
  margin-top: .4rem;
  font-size: .78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
}
.os-kpi-trend.up     { color: var(--os-success); }
.os-kpi-trend.down   { color: var(--os-danger); }
.os-kpi-trend.neutral{ color: var(--os-muted); }

/* ============================================================
   SECTION HEADER
   ============================================================ */
.os-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.os-section-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--os-text);
  margin: 0 0 .15rem;
}

.os-section-sub {
  font-size: .78rem;
  color: var(--os-muted);
  margin: 0;
}

/* ============================================================
   METRIC CHIPS (below chart)
   ============================================================ */
.os-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}

.os-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  background: var(--os-gray-50);
  border: 1px solid var(--os-border);
  border-radius: var(--os-pill);
  font-size: .775rem;
  color: var(--os-muted);
}

.os-chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.os-chip-val {
  font-weight: 700;
  color: var(--os-text);
}

/* ============================================================
   TABLE
   ============================================================ */
.table {
  color: var(--os-text) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table thead tr th {
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--os-muted) !important;
  border-bottom: 1px solid var(--os-border) !important;
  border-top: none !important;
  padding: .875rem 1rem !important;
  background: var(--os-gray-50) !important;
  white-space: nowrap !important;
}

.table tbody td {
  padding: .875rem 1rem !important;
  border-bottom: 1px solid var(--os-border) !important;
  border-top: none !important;
  vertical-align: middle !important;
  font-size: .85rem !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: transparent !important;
}

.table tbody tr:hover td {
  background: var(--os-gray-50) !important;
}

.table tbody tr:last-child td {
  border-bottom: none !important;
}

/* ============================================================
   PROGRESS BARS
   ============================================================ */
.progress {
  height: 6px !important;
  border-radius: var(--os-pill) !important;
  background: var(--os-gray-100) !important;
  overflow: visible !important;
}

.progress-bar {
  border-radius: var(--os-pill) !important;
  transition: width .6s ease !important;
}

/* ============================================================
   DRIVER AVATAR
   ============================================================ */
.os-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .72rem;
  color: #fff;
  flex-shrink: 0;
  user-select: none;
  letter-spacing: .03em;
}

.os-avatar.av-1 { background: linear-gradient(135deg, #2563EB, #7C3AED); }
.os-avatar.av-2 { background: linear-gradient(135deg, #10B981, #06B6D4); }
.os-avatar.av-3 { background: linear-gradient(135deg, #F59E0B, #EF4444); }
.os-avatar.av-4 { background: linear-gradient(135deg, #7C3AED, #EC4899); }

.os-driver-cell {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-weight: 600;
}

/* ============================================================
   TRIP COUNT BADGE
   ============================================================ */
.os-trip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: .2rem .5rem;
  border-radius: var(--os-pill);
  font-size: .78rem;
  font-weight: 700;
  background: var(--os-gray-100);
  color: var(--os-gray-700);
}

/* ============================================================
   DATE BADGE
   ============================================================ */
.os-date {
  font-size: .78rem;
  color: var(--os-muted);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  background: var(--os-primary) !important;
  border-color: var(--os-primary) !important;
  border-radius: var(--os-radius-sm) !important;
  font-weight: 600 !important;
  transition: var(--os-t) !important;
}

.btn-primary:hover {
  background: var(--os-primary-dark) !important;
  border-color: var(--os-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.35) !important;
}

/* ============================================================
   FORM CONTROLS (global override)
   ============================================================ */
.form-control {
  border: 1px solid var(--os-border) !important;
  border-radius: var(--os-radius-sm) !important;
  font-size: .875rem !important;
  color: var(--os-text) !important;
  background: #fff !important;
  transition: var(--os-t) !important;
}

.form-control:focus {
  border-color: var(--os-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
  outline: none !important;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.os-page-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--os-border);
}

.os-page-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--os-text);
  margin: 0 0 .25rem;
}

.os-breadcrumb {
  font-size: .78rem;
  color: var(--os-muted);
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* ============================================================
   GAP UTILITIES (Bootstrap 4 nao tem gap-)
   ============================================================ */
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.flex-grow-1 { flex: 1 1 0% !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.main-panel > footer.footer,
footer.footer {
  padding: 1rem 1.5rem !important;
  background: transparent !important;
  border-top: 1px solid var(--os-border) !important;
  margin-top: .5rem !important;
}

.main-panel > footer.footer .card {
  display: none !important;
}

.os-footer-text {
  font-size: .775rem;
  color: var(--os-muted);
}

/* ============================================================
   GRID SPACING OVERRIDE
   ============================================================ */
.grid-margin {
  margin-bottom: 1.5rem !important;
}

/* ============================================================
   LOGIN PAGE  —  Standalone (Layout = null)
   ============================================================ */
html.os-login-page,
.os-login-page body {
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
}

.os-login-root {
  display: flex;
  min-height: 100vh;
  font-family: var(--os-font);
}

/* --- Brand Side (left) --- */
.os-login-brand {
  flex: 0 0 46%;
  background: linear-gradient(155deg, #0F172A 0%, #1E3A8A 45%, #4C1D95 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem;
  position: relative;
  overflow: hidden;
}

/* decorative circles */
.os-login-brand::before {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  top: -140px; right: -140px;
  pointer-events: none;
}

.os-login-brand::after {
  content: '';
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: rgba(255,255,255,.035);
  bottom: -100px; left: -80px;
  pointer-events: none;
}

.os-brand-logo {
  margin-bottom: 2.5rem;
  position: relative; z-index: 1;
}

.os-brand-logo img {
  height: 46px;
  filter: brightness(0) invert(1);
  opacity: .92;
}

.os-brand-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  background: rgba(255,255,255,.1);
  border-radius: var(--os-pill);
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  position: relative; z-index: 1;
  backdrop-filter: blur(4px);
}

.os-brand-tag span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34D399;
  flex-shrink: 0;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .6; transform: scale(.8); }
}

.os-brand-headline {
  font-size: 2.1rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
  margin-bottom: .875rem;
  position: relative; z-index: 1;
}

.os-brand-desc {
  font-size: .95rem;
  color: rgba(255,255,255,.65);
  line-height: 1.65;
  margin-bottom: 2.5rem;
  max-width: 360px;
  position: relative; z-index: 1;
}

.os-brand-features {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  position: relative; z-index: 1;
}

.os-brand-feat {
  display: flex;
  align-items: center;
  gap: .875rem;
  color: rgba(255,255,255,.8);
  font-size: .875rem;
  font-weight: 500;
}

.os-brand-feat-icon {
  width: 38px; height: 38px;
  background: rgba(255,255,255,.1);
  border-radius: var(--os-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  color: #fff;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}

.os-brand-copyright {
  position: absolute;
  bottom: 1.75rem; left: 3.5rem;
  color: rgba(255,255,255,.3);
  font-size: .72rem;
  z-index: 1;
}

/* --- Form Side (right) --- */
.os-login-form-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  padding: 2.5rem 2rem;
}

.os-login-form-box {
  width: 100%;
  max-width: 400px;
}

/* Mobile logo */
.os-login-form-box .os-mobile-logo {
  display: none;
  text-align: center;
  margin-bottom: 2rem;
}

.os-login-form-box .os-mobile-logo img {
  height: 38px;
}

.os-login-heading {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--os-text);
  margin-bottom: .375rem;
}

.os-login-subhead {
  font-size: .875rem;
  color: var(--os-muted);
  margin-bottom: 2rem;
}

.os-field {
  margin-bottom: 1.25rem;
}

.os-field-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--os-gray-700);
  margin-bottom: .45rem;
}

.os-field-wrap {
  position: relative;
}

.os-field-wrap .os-field-icon {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--os-light);
  font-size: 1.1rem;
  pointer-events: none;
  transition: color .18s ease;
  z-index: 2;
}

.os-field-wrap:focus-within .os-field-icon {
  color: var(--os-primary);
}

.os-field-input {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 1rem 0 2.65rem;
  border: 1.5px solid var(--os-border);
  border-radius: var(--os-radius-sm);
  font-size: .9rem;
  font-family: var(--os-font);
  color: var(--os-text);
  background: var(--os-gray-50);
  transition: var(--os-t);
  outline: none;
}

.os-field-input::placeholder { color: var(--os-light); }

.os-field-input:focus {
  border-color: var(--os-primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(37,99,235,.1);
}

/* Validation error under field */
.os-field-error {
  font-size: .75rem;
  color: var(--os-danger);
  margin-top: .3rem;
  display: flex;
  align-items: center;
  gap: .25rem;
}

/* Login button */
.os-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  height: 50px;
  margin-top: 1.5rem;
  background: var(--os-primary);
  color: #fff;
  border: none;
  border-radius: var(--os-radius-sm);
  font-size: .9rem;
  font-weight: 700;
  font-family: var(--os-font);
  letter-spacing: .02em;
  cursor: pointer;
  transition: var(--os-t);
}

.os-login-btn:hover {
  background: var(--os-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37,99,235,.35);
}

.os-login-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.os-login-btn i {
  font-size: 1.1rem;
}

/* Validation summary */
.os-val-summary {
  background: var(--os-danger-100);
  border: 1px solid #FECACA;
  border-radius: var(--os-radius-sm);
  padding: .75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: .825rem;
  color: #B91C1C;
}

.os-val-summary ul { margin: 0; padding-left: 1.2rem; }
.os-val-summary li { margin-bottom: .2rem; }

/* Responsive */
@media (max-width: 768px) {
  .os-login-brand { display: none; }
  .os-login-form-box .os-mobile-logo { display: block; }
  .os-login-form-side { padding: 2rem 1.25rem; }
}