/* ==========================================================================
   Car Dealership Management System
   Palette and typography lifted from the School Management System's Ui.cs so
   the two products look like they came from the same house.
   ========================================================================== */

:root {
  /* Exact values from Ui.cs */
  --dark:         #0F172A;   /* Color.FromArgb(15, 23, 42)    */
  --primary:      #2563EB;   /* Color.FromArgb(37, 99, 235)   */
  --primary-dark: #1D4ED8;   /* Color.FromArgb(29, 78, 216)   */
  --success:      #10B981;   /* Color.FromArgb(16, 185, 129)  */
  --success-dark: #059669;
  --danger:       #DC2626;   /* Color.FromArgb(220, 38, 38)   */
  --danger-dark:  #B91C1C;
  --muted:        #64748B;   /* Color.FromArgb(100, 116, 139) */
  --label:        #475569;   /* Color.FromArgb(71, 85, 105)   */
  --bg:           #F1F5F9;   /* Ui.Background (light)         */
  --border:       #E2E8F0;   /* Color.FromArgb(226, 232, 240) */

  --amber:        #F59E0B;
  --amber-dark:   #D97706;
  --surface:      #FFFFFF;
  --surface-2:    #F8FAFC;   /* LoginForm background          */
  --footer-dark:  #0A101E;   /* SplashForm footer             */
  --slate-300:    #CBD5E1;
  --slate-400:    #94A3B8;

  --font: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .10);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .16);

  --sidebar-w: 248px;
  --header-h:  60px;
  --shopbar-h: 56px;

  /* Surfaces that used to be written out as #fff or #F8FAFC. Naming them is
     what lets the whole product change colour in one place. */
  --hover:     #F8FAFC;   /* a row or button under the pointer */
  --tint:      #EFF6FF;   /* the faint blue behind a highlight */
  --sidebar:   #0F172A;
  --input-bg:  #FFFFFF;
  --card-head: #F8FAFC;
}

/* ==========================================================================
   Dark

   Chosen by the person, remembered in this browser, and set on <html> before
   the first paint so the screen never flashes white on the way in. Printing
   is untouched: paper is white whatever the screen is doing.
   ========================================================================== */
:root[data-theme="dark"] {
  --dark:        #E2E8F0;   /* now the text colour, not the ink-black */
  --muted:       #94A3B8;
  --label:       #CBD5E1;
  --bg:          #0B1220;
  --surface:     #131C2E;
  --surface-2:   #162034;
  --hover:       #1B2639;
  --tint:        #17263F;
  --border:      #26334A;
  --card-head:   #162034;
  --input-bg:    #0F1828;
  --sidebar:     #070C16;
  --slate-300:   #475569;
  --slate-400:   #64748B;
  --primary:     #3B82F6;
  --primary-dark:#2563EB;
  --shadow:    0 1px 3px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .55);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--dark);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 700; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

p { margin: 0 0 .75rem; line-height: 1.55; }

/* ==========================================================================
   Splash / welcome screen  -  SplashForm, 680 x 400
   ========================================================================== */

.splash-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 16px;
}

.splash {
  width: 680px;
  max-width: 100%;
  min-height: 400px;
  background: var(--dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.splash-body { flex: 1; padding: 88px 45px 0; }

.splash-head { display: flex; align-items: flex-start; gap: 20px; }

.splash-logo {
  width: 70px; height: 70px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  flex-shrink: 0;
}

.splash-title {
  color: #fff;
  font-size: 27px;          /* Segoe UI 20pt */
  font-weight: 700;
  margin: 0;
  max-width: 510px;
  line-height: 1.2;
}

.splash-subtitle {
  color: var(--slate-400);
  font-size: 14px;          /* 10.5pt */
  margin: 10px 0 0;
}

.splash-progress {
  margin: 42px 0 0;
  height: 26px;
  background: rgba(255, 255, 255, .08);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

/* Marquee sweep, same idea as ProgressBarStyle.Marquee */
.splash-progress::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  animation: marquee 1.6s linear infinite;
}

@keyframes marquee {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

.splash-footer {
  background: var(--footer-dark);
  height: 62px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
}

.splash-vendor-logo {
  width: 42px; height: 42px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

.splash-vendor-name {
  color: #E2E8F0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.splash-vendor-copy {
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px;
}

.splash-version {
  margin-left: auto;
  color: var(--slate-400);
  font-size: 12px;
  font-weight: 700;
}

/* ==========================================================================
   Login screen  -  LoginForm, 720 x 410, two columns
   ========================================================================== */

/* The screen behind the card: a showroom at night, drawn in SVG (see
   partials/login-art). The card itself keeps the 720 x 410 it has always had
   - the picture goes around it, not through it. */
.login-wrap {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0B1220;
  padding: 16px;
  overflow: hidden;
}

.login-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.login-stage {
  position: relative;
  z-index: 1;
  width: 720px;
  max-width: 100%;
}

.login-card {
  width: 100%;
  min-height: 410px;
  background: var(--surface-2);
  border-radius: 14px;
  box-shadow: 0 30px 60px -20px rgba(2, 6, 23, .75), 0 0 0 1px rgba(255, 255, 255, .06);
  display: grid;
  grid-template-columns: 400px 1fr;   /* form 360 + gutters | user list 250 */
  overflow: hidden;
}

/* Who built it, and how to reach them. */
.login-vendor {
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  color: rgba(226, 232, 240, .72);
  letter-spacing: .01em;
}
/* It sits over the picture, so it carries its own quiet backing. */
.login-vendor > * , .login-vendor { line-height: 1.6; }
.login-vendor {
  background: rgba(7, 12, 22, .55);
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 999px;
  padding: 7px 16px;
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  backdrop-filter: blur(2px);
}
.login-vendor a { color: rgba(226, 232, 240, .92); text-decoration: none; font-weight: 600; }
.login-vendor a:hover { color: #fff; text-decoration: underline; }
.login-vendor .dot { opacity: .5; margin: 0 2px; }

/* The language switch sits on the dark backdrop now. */
.login-wrap .langswitch { position: relative; z-index: 2; }

@media (max-width: 760px) {
  .login-card { grid-template-columns: 1fr; }
  .login-list-col { padding: 0 28px 24px; }

  /* On a phone the card fills the screen and the car would only be a pair of
     wheels behind it, so the backdrop keeps the lights and the city and lets
     the car go. */
  .login-art .la-car { display: none; }
}

.login-form-col { padding: 22px 40px 28px; }
.login-list-col {
  padding: 30px 40px 28px 0;
  display: flex;
  flex-direction: column;
}

.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }

.login-logo {
  width: 40px; height: 40px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}

.login-title {
  font-size: 23px;          /* Segoe UI 17pt */
  font-weight: 700;
  color: var(--dark);
  margin: 0;
}

.login-caption {
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
  margin: 0 0 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.login-list-head {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 16px;
}

.user-list {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  flex: 1;
  min-height: 240px;
  max-height: 264px;
  overflow-y: auto;
}

.user-list-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--dark);
  cursor: pointer;
}
.user-list-item:last-child { border-bottom: 0; }
.user-list-item:hover      { background: var(--tint); }
.user-list-item.is-active  { background: var(--primary); color: #fff; }
.user-list-item .u-role    { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.user-list-item.is-active .u-role { color: rgba(255, 255, 255, .85); }

.user-list-empty { padding: 16px 12px; color: var(--muted); font-size: 13px; }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { margin-bottom: 16px; }

label, .field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--label);
  margin-bottom: 6px;
}

.field-label .req { color: var(--danger); margin-left: 2px; }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=email], input[type=tel], input[type=search], input[type=month], select, textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--dark);
  background: var(--input-bg);
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  transition: border-color .12s, box-shadow .12s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--bg);
  color: var(--muted);
  cursor: not-allowed;
}

input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--danger); }

textarea { min-height: 90px; resize: vertical; line-height: 1.5; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 30px;
}

.field-error { color: var(--danger); font-size: 12px; margin-top: 5px; }
.field-hint  { color: var(--muted);  font-size: 12px; margin-top: 5px; }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 18px;
}

.check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--label);
  cursor: pointer;
}
.check input { width: 16px; height: 16px; accent-color: var(--primary); }

/* Money inputs read right-aligned, the way a ledger does */
input.money { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, box-shadow .12s, opacity .12s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary   { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }

.btn-success   { background: var(--success); color: #fff; }
.btn-success:hover { background: var(--success-dark); }

.btn-danger    { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-dark); }

.btn-secondary {
  background: var(--surface);
  color: var(--label);
  border: 1px solid var(--slate-300);
}
.btn-secondary:hover { background: var(--hover); }

.btn-muted { background: var(--muted); color: #fff; }
.btn-muted:hover { background: #52607A; }

.btn-ghost { background: transparent; color: var(--label); }
.btn-ghost:hover { background: rgba(15, 23, 42, .06); }

.btn-lg    { padding: 14px 20px; font-size: 15px; }
.btn-sm    { padding: 7px 11px;  font-size: 12.5px; }
.btn-block { width: 100%; }

.btn-whatsapp { background: #25D366; color: #fff; }
.btn-whatsapp:hover { background: #1EB855; }

.btn-group { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   App shell
   ========================================================================== */

/* --------------------------------------------------------------------------
   The showroom name bar across the top of the window.
   It holds the dealership's own name and the button that slides the left
   menu away, so the name is still there when the menu is a narrow strip.
   -------------------------------------------------------------------------- */

.shopbar {
  position: sticky;
  top: 0;
  z-index: 70;
  height: var(--shopbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px 0 13px;
  background: linear-gradient(90deg, #0B1220, var(--sidebar) 55%, #16233C);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.nav-slide {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #CBD5E1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.nav-slide:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.nav-slide svg { width: 17px; height: 17px; transition: transform .18s ease; }

.shopbar-logo { width: 32px; height: 32px; border-radius: 7px; object-fit: contain; flex: none; }
.shopbar-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.shopbar-t b { font-size: 17px; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shopbar-t small { font-size: 12px; color: var(--slate-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Menu slid away: a narrow strip of icons. Remembered on this computer. */
html.nav-min { --sidebar-w: 68px; }
html.nav-min .nav-slide svg { transform: rotate(180deg); }
html.nav-min .sidebar-nav { padding: 10px 0 20px; }
html.nav-min .nav-link { justify-content: center; padding: 11px 0; gap: 0; border-left-width: 0; border-right: 3px solid transparent; }
html.nav-min .nav-link.is-active { border-right-color: var(--primary); }
html.nav-min .nav-link > span:not(.ico) { display: none; }
html.nav-min .nav-link .ico { width: auto; font-size: 16px; }
html.nav-min .nav-section {
  font-size: 0;
  padding: 10px 14px 6px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin-top: 4px;
}
html.nav-min .sidebar-foot { padding: 12px 4px; text-align: center; font-size: 10px; overflow: hidden; }
html.nav-min .foot-vendor { display: none; }
html.nav-min .foot-version { white-space: nowrap; }

/* A strip of icons is only usable if the names come back easily. Resting the
   pointer on the strip opens the full menu over the page - no click, and the
   page underneath does not move. */
@media (hover: hover) {
  html.nav-min .sidebar:hover { width: 248px; box-shadow: var(--shadow-lg); }
  html.nav-min .sidebar:hover .nav-link {
    justify-content: flex-start; padding: 9px 18px; gap: 11px;
    border-left: 3px solid transparent; border-right: 0;
  }
  html.nav-min .sidebar:hover .nav-link.is-active { border-left-color: var(--primary); }
  html.nav-min .sidebar:hover .nav-link > span:not(.ico) { display: inline; }
  html.nav-min .sidebar:hover .nav-link .ico { width: 18px; font-size: inherit; }
  html.nav-min .sidebar:hover .nav-section {
    font-size: 10.5px; padding: 16px 18px 7px; border-top: 0; margin-top: 0;
  }
  html.nav-min .sidebar:hover .sidebar-foot { padding: 12px 18px; text-align: left; font-size: 11px; }
  html.nav-min .sidebar:hover .foot-vendor { display: inline; }
}

.app { display: flex; min-height: calc(100vh - var(--shopbar-h)); }

.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: var(--shopbar-h) auto 0 0;
  z-index: 60;
  transition: transform .2s ease, width .18s ease;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 0 20px; }

.nav-section {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #64748B;
  padding: 16px 18px 7px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px;
  color: #CBD5E1;
  font-size: 14px;
  font-weight: 600;
  border-left: 3px solid transparent;
}
.nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.nav-link.is-active { background: rgba(37, 99, 235, .18); border-left-color: var(--primary); color: #fff; }
.nav-link .ico { width: 18px; text-align: center; flex-shrink: 0; opacity: .9; }
.nav-link .count {
  margin-left: auto;
  background: rgba(255, 255, 255, .12);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
}

.sidebar-foot {
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 11px;
  color: var(--muted);
}

.main {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: margin-left .18s ease;
}

.topbar {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  position: sticky;
  top: var(--shopbar-h);
  z-index: 50;
}

.topbar-title { font-size: 17px; font-weight: 700; margin: 0; }
.topbar-spacer { flex: 1; }

.topbar-user { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}
.topbar-user-name { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.topbar-user-role { font-size: 11px; color: var(--muted); }

.menu-toggle { display: none; background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--dark); }

.content { padding: 20px; flex: 1; }

.page-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.page-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   Cards, stats, tables
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}

.card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.card-head h2, .card-head h3 { margin: 0; font-size: 15px; }
.card-head .spacer { flex: 1; }
.card-body { padding: 18px; }
.card-body.tight { padding: 0; }

.section-title { font-size: 14px; font-weight: 700; color: var(--primary); margin: 0 0 12px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

/* Matches Ui.StatCard: white card, 6px colour bar down the left */
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px 14px 22px;
  position: relative;
  overflow: hidden;
}
.stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--primary);
}
.stat.accent-success::before { background: var(--success); }
.stat.accent-danger::before  { background: var(--danger); }
.stat.accent-amber::before   { background: var(--amber); }
.stat.accent-dark::before    { background: var(--dark); }
.stat.accent-muted::before   { background: var(--muted); }

.stat-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--dark);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.stat-value.sm { font-size: 20px; }
.stat-trend { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.stat-trend.up   { color: var(--success-dark); }
.stat-trend.down { color: var(--danger); }

.table-wrap { overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.data th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--surface-2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data tbody tr:hover { background: var(--hover); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .actions { text-align: right; white-space: nowrap; }
table.data tfoot td {
  padding: 11px 12px;
  font-weight: 700;
  background: var(--surface-2);
  border-top: 2px solid var(--border);
}

.row-strong { font-weight: 700; }
.text-muted { color: var(--muted); }
.text-success { color: var(--success-dark); }
.text-danger  { color: var(--danger); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }

.empty {
  padding: 44px 20px;
  text-align: center;
  color: var(--muted);
}
.empty .empty-icon { font-size: 34px; opacity: .35; margin-bottom: 10px; }
.empty h3 { color: var(--label); }

/* ==========================================================================
   Badges, alerts, pills
   ========================================================================== */

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.badge-green { background: #D1FAE5; color: #065F46; }
.badge-blue  { background: #DBEAFE; color: #1E40AF; }
.badge-amber { background: #FEF3C7; color: #92400E; }
.badge-red   { background: #FEE2E2; color: #991B1B; }
.badge-slate { background: #E2E8F0; color: #334155; }

.alert {
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 13.5px;
  border-left: 4px solid;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alert-success { background: #ECFDF5; border-color: var(--success); color: #065F46; }
.alert-error   { background: #FEF2F2; border-color: var(--danger);  color: #991B1B; }
.alert-warning { background: #FFFBEB; border-color: var(--amber);   color: #92400E; }
.alert-info    { background: var(--tint); border-color: var(--primary); color: #1E40AF; }

.alert-close { margin-left: auto; background: none; border: 0; cursor: pointer; font-size: 16px; opacity: .5; }
.alert-close:hover { opacity: 1; }

/* ==========================================================================
   Filter bar, pagination
   ========================================================================== */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.filter-bar .field { margin: 0; min-width: 150px; }
.filter-bar .field.grow { flex: 1; min-width: 220px; }
.filter-bar label { font-size: 11.5px; margin-bottom: 4px; }

.pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.pagination .info { color: var(--muted); font-size: 13px; margin-right: auto; }
.page-link {
  display: inline-block;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--label);
  font-size: 13px;
  font-weight: 600;
  background: var(--surface);
}
.page-link:hover { background: var(--surface-2); text-decoration: none; }
.page-link.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* The agreement-type switch: the one you are on is shown, not offered. */
.btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  cursor: default;
}
.page-link.is-disabled { opacity: .45; pointer-events: none; }

/* ==========================================================================
   Car photo grid
   ========================================================================== */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.photo-item {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 4 / 3;
}
.photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-item .photo-actions {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(15, 23, 42, .82));
  padding: 18px 8px 7px;
  display: flex;
  gap: 6px;
  justify-content: center;
  opacity: 0;
  transition: opacity .14s;
}
.photo-item:hover .photo-actions { opacity: 1; }
.photo-item .photo-actions button,
.photo-item .photo-actions a {
  background: rgba(255, 255, 255, .92);
  border: 0;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  color: var(--dark);
}
.photo-item.is-primary { border-color: var(--primary); border-width: 2px; }
.photo-badge {
  position: absolute;
  top: 6px; left: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}

.car-thumb {
  width: 60px; height: 45px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: block;
}

/* ==========================================================================
   Detail lists
   ========================================================================== */

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 22px;
}
.detail dt {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 3px;
}
.detail dd { margin: 0; font-size: 14px; color: var(--dark); font-weight: 600; }

.money-rows { width: 100%; }
.money-rows tr td { padding: 7px 0; font-size: 14px; }
.money-rows tr td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.money-rows tr.total td { border-top: 2px solid var(--border); padding-top: 11px; font-size: 16px; font-weight: 700; }
.money-rows tr.total td:last-child { color: var(--primary); }
.money-rows tr.sub td { color: var(--muted); font-size: 13px; }

/* ==========================================================================
   Modal
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
}
.modal-backdrop.is-open { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  overflow-y: auto;
}
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.modal-head h3 { margin: 0; }
.modal-close { margin-left: auto; background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--muted); }
.modal-body { padding: 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
  /* On a phone the menu already slides in and out with the ☰ button, so the
     slide-away strip is switched off and the full-width menu comes back. */
  html.nav-min { --sidebar-w: 248px; }
  html.nav-min .nav-link { justify-content: flex-start; padding: 9px 18px; gap: 11px; border-left-width: 3px; border-right: 0; }
  html.nav-min .nav-link > span:not(.ico) { display: inline; }
  html.nav-min .nav-link .ico { width: 18px; font-size: inherit; }
  html.nav-min .nav-section { font-size: 10.5px; padding: 16px 18px 7px; border-top: 0; margin-top: 0; }
  html.nav-min .sidebar-foot { padding: 12px 18px; text-align: left; font-size: 11px; }
  .nav-slide { display: none; }
  .shopbar { padding-left: 18px; }

  .sidebar { transform: translateX(-100%); }
  .sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .main { margin-left: 0; }
  .menu-toggle { display: block; }
  .sidebar-backdrop {
    position: fixed; inset: var(--shopbar-h) 0 0 0;
    background: rgba(15, 23, 42, .45);
    z-index: 55;
    display: none;
  }
  .sidebar-backdrop.is-open { display: block; }
}

@media (max-width: 760px) {
  :root { --shopbar-h: 50px; }
  .shopbar { gap: 10px; }
  .shopbar-logo { width: 28px; height: 28px; }
  .shopbar-t b { font-size: 15px; }
  .shopbar-t small { font-size: 11px; }

  .login-card { grid-template-columns: 1fr; min-height: 0; }
  .login-form-col { padding: 24px 22px; }
  .login-list-col { padding: 0 22px 24px; }
  .user-list { max-height: 190px; min-height: 0; }
  .splash-body { padding: 40px 24px 0; }
  .splash-title { font-size: 22px; }
  .content { padding: 14px; }
  .topbar-user-name, .topbar-user-role { display: none; }
  .page-head-actions { width: 100%; margin-left: 0; }
}

@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 12px 12px 12px 18px; }
  .stat-value { font-size: 20px; }
  .stat-title { font-size: 10.5px; }
}

/* ==========================================================================
   Print - invoices and agreements
   ========================================================================== */

/* A handful of pieces name their own colours; in the dark they need saying
   again rather than inheriting something meant for a white page. */
:root[data-theme="dark"] .card-head { background: var(--card-head); }
:root[data-theme="dark"] table.data thead th { background: var(--card-head); color: var(--muted); }
:root[data-theme="dark"] table.data tbody tr:hover { background: var(--hover); }
:root[data-theme="dark"] .alert-info { background: var(--tint); color: #BFDBFE; }
:root[data-theme="dark"] .alert-success { background: #0F2A22; color: #A7F3D0; }
:root[data-theme="dark"] .alert-warning { background: #2B2410; color: #FDE68A; }
:root[data-theme="dark"] .alert-error { background: #2C1416; color: #FCA5A5; }
:root[data-theme="dark"] .badge { filter: brightness(.92); }
:root[data-theme="dark"] .btn-secondary { background: var(--surface); color: var(--dark); border-color: var(--border); }
:root[data-theme="dark"] .btn-secondary:hover { background: var(--hover); }
:root[data-theme="dark"] .user-list { background: var(--surface); }
:root[data-theme="dark"] .user-list-item:hover { background: var(--hover); }
:root[data-theme="dark"] .login-card { background: var(--surface-2); }
:root[data-theme="dark"] img.photo-thumb { filter: brightness(.94); }

/* The switch itself, up in the top bar next to the language buttons. */
.themetoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--label);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.themetoggle:hover { border-color: var(--primary); color: var(--primary); }
.themetoggle .sun  { display: none; }
:root[data-theme="dark"] .themetoggle .sun  { display: block; }
:root[data-theme="dark"] .themetoggle .moon { display: none; }
:root[data-theme="dark"] .themetoggle { background: var(--surface); color: #FDE68A; border-color: var(--border); }


@media print {
  .sidebar, .topbar, .no-print, .page-head-actions, .filter-bar, .pagination { display: none !important; }
  .main { margin-left: 0; }
  .content { padding: 0; }
  .form-actions { display: none !important; }
  .card { border: 0; box-shadow: none; margin: 0; }
  body { background: #fff; font-size: 12px; }
  .doc-page { width: 100%; margin: 0; padding: 0; box-shadow: none; }
  @page { size: A4; margin: 14mm; }
}

/* ---------------------------------------------------------------------
   The search box in the top bar
   --------------------------------------------------------------------- */

.topsearch {
  position: relative;
  flex-shrink: 1;
  min-width: 0;
  width: 320px;
  margin-right: 14px;
}

.topsearch input[type="search"] {
  width: 100%;
  height: 36px;
  padding: 0 30px 0 12px;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--dark);
}

.topsearch input[type="search"]:focus {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
  outline: none;
}

.topsearch-hint {
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 5px;
  pointer-events: none;
  background: var(--surface);
}

.topsearch input:focus + .topsearch-hint { display: none; }

.topsearch-results {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .18);
  padding: 6px;
}

.topsearch-group {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 10px 4px;
}

.topsearch-item {
  display: block;
  padding: 7px 10px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--dark);
}

.topsearch-item:hover,
.topsearch-item.is-on { background: var(--surface-2); }

.topsearch-item .t {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topsearch-item .s {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 860px) {
  .topsearch { width: 150px; margin-right: 8px; }
  .topsearch-hint { display: none; }
  .topsearch-results { width: 78vw; right: auto; left: 0; }
}

/* ---------------------------------------------------------------------
   Language switch in the top bar
   --------------------------------------------------------------------- */

.langswitch {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-right: 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}

.langswitch button,
.langswitch a {
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  padding: 6px 12px;
  line-height: 1.4;
}

.langswitch button:hover,
.langswitch a:hover { background: rgba(15, 23, 42, .05); text-decoration: none; }

.langswitch button.is-on,
.langswitch a.is-on {
  background: var(--primary);
  color: #fff;
}

@media (max-width: 860px) {
  .langswitch { margin-right: 6px; }
  .langswitch button, .langswitch a { padding: 6px 9px; }
}

/* ==========================================================================
   The bar the Save button sits on

   A form can be longer than the window; the button that finishes it should
   never be out of reach. The bar rides along the bottom of the screen while
   there is still form below it, and settles at the end of the page once the
   whole form is in view.
   ========================================================================== */

.form-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 -20px;
  padding: 10px 20px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   The photo viewer

   Opens over the page: one photo as large as the screen allows, arrows either
   side, and a button that takes the whole screen for showing a customer.
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(3, 7, 18, .94);
  padding: 62px 70px 70px;
}
.lightbox.is-open { display: flex; }
body.lb-locked { overflow: hidden; }

.lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}

.lb-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  color: #E2E8F0;
}
.lb-count { font-size: 13.5px; font-weight: 700; letter-spacing: .02em; }
.lb-tools { margin-left: auto; display: flex; gap: 8px; }

.lb-btn {
  border: 1px solid rgba(226, 232, 240, .28);
  background: rgba(15, 23, 42, .6);
  color: #E2E8F0;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.lb-btn:hover { border-color: #60A5FA; color: #fff; }

.lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, .66);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lb-arrow:hover { background: var(--primary); }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }

.lb-cap {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  text-align: center;
  color: #CBD5E1;
  font-size: 13.5px;
}

/* A photograph in a grid is something to click, so it says so. */
.photo-grid a[href] { cursor: zoom-in; display: block; }

@media (max-width: 700px) {
  .lightbox { padding: 56px 10px 54px; }
  .lb-arrow { width: 42px; height: 42px; font-size: 18px; }
  .lb-btn { padding: 7px 10px; font-size: 12px; }
}

/* ==========================================================================
   The login screen

   Two halves: the showroom on the left, which is what a customer sees over the
   salesman's shoulder, and the card on the right, which is what actually signs
   somebody in. Under 1000px the showroom goes and the card takes the screen.
   ========================================================================== */

.login2 {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  min-height: 100vh;
  background: #070C16;
  overflow: hidden;
}

.showroom-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Under the card: dark enough for white text on the left to stay readable and
   for a white card on the right to sit on something. */
.login2-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(7, 12, 22, .42) 0%, rgba(7, 12, 22, .04) 34%, rgba(7, 12, 22, .62) 62%, rgba(7, 12, 22, .93) 100%);
}

/* ----- the showroom half ----- */
.login2-show { position: relative; z-index: 1; overflow: hidden; }

.login2-show-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 34px 40px 0;
}

.login2-brand { display: flex; align-items: center; gap: 18px; }
.login2-name {
  color: #fff;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.02em;
}
.login2-name.accent { color: #38BDF8; font-size: 30px; margin-top: 2px; }

.login2-tagline {
  margin: 16px 0 0;
  color: #CBD5E1;
  font-size: 15.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.login2-tagline i { color: #3B82F6; font-style: normal; }

.login2-middle {
  flex: 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: 20px;
}

.login2-motto {
  position: absolute;
  top: 12%;
  left: 34%;
  color: #E2E8F0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  text-shadow: 0 2px 20px rgba(2, 6, 23, .7);
}
.login2-motto span { color: #38BDF8; }

/* the screen on the desk */
.login2-monitor { width: min(430px, 60%); }
.mon-screen {
  display: flex;
  height: 232px;
  border: 7px solid #0F172A;
  border-radius: 10px;
  background: #0F1828;
  box-shadow: 0 26px 50px -18px rgba(2, 6, 23, .9);
  overflow: hidden;
}
.mon-side {
  width: 84px;
  background: #0B1220;
  padding: 8px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mon-side span { color: #64748B; font-size: 7.5px; padding: 3px 5px; border-radius: 3px; }
.mon-side span.is-on { background: #1D4ED8; color: #fff; }
.mon-logo { height: 14px; border-radius: 3px; background: linear-gradient(90deg, #2563EB, #38BDF8); margin-bottom: 4px; }

.mon-body { flex: 1; padding: 8px 9px; background: #101B2E; }
.mon-head { color: #E2E8F0; font-size: 9px; font-weight: 800; margin-bottom: 7px; }
.mon-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.mon-tile { border-radius: 4px; padding: 6px; color: #fff; }
.mon-tile u { display: block; font-size: 5.5px; text-decoration: none; opacity: .85; }
.mon-tile b { display: block; font-size: 12px; margin-top: 2px; }
.mon-tile.green  { background: linear-gradient(135deg, #10B981, #059669); }
.mon-tile.blue   { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.mon-tile.violet { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.mon-rows { margin-top: 7px; background: #0C1526; border-radius: 4px; padding: 5px 6px; }
.mon-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3.5px 0; border-bottom: 1px solid #16233C;
  color: #CBD5E1; font-size: 6.5px;
}
.mon-row:last-child { border-bottom: 0; }
.mon-row span { flex: 1; }
.mon-row i { font-style: normal; color: #93C5FD; }
.mon-row em {
  font-style: normal; background: rgba(16, 185, 129, .18); color: #34D399;
  border-radius: 999px; padding: 1.5px 5px; font-size: 5.5px;
}
.mon-stand { width: 54px; height: 22px; margin: 0 auto; background: #0F172A; }
.mon-foot  { width: 150px; height: 8px; margin: 0 auto; border-radius: 4px; background: #0F172A; }

.login2-features {
  list-style: none;
  margin: 0;
  padding: 16px 0 18px;
  display: flex;
  gap: 8px;
  border-top: 1px solid rgba(148, 163, 184, .22);
}
.login2-features li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  color: #E2E8F0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  border-right: 1px solid rgba(148, 163, 184, .18);
}
.login2-features li:last-child { border-right: 0; }
.login2-features .ic { color: #7DD3FC; display: inline-flex; }

/* ----- the card half ----- */
.login2-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px 26px 20px;
}

.login2-card {
  width: 100%;
  max-width: 430px;
  background: var(--surface);
  border-radius: 16px;
  padding: 26px 30px 22px;
  box-shadow: 0 34px 80px -24px rgba(2, 6, 23, .92), 0 0 0 1px rgba(255, 255, 255, .06);
}

.login2-card-brand { text-align: center; }
.login2-card-brand .logo-mark { display: inline-block; }
.login2-logo-img { max-width: 130px; max-height: 84px; object-fit: contain; }
.login2-card-name {
  color: var(--dark);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-top: 6px;
}
.login2-card-name.accent { color: var(--primary); font-size: 22px; }
.login2-firm { color: var(--muted); font-size: 13px; margin-top: 6px; }

.login2-rule { height: 1px; background: var(--border); margin: 16px 0 14px; }
.login2-please { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 14px; }

.login2-input { position: relative; margin-bottom: 12px; }
.login2-input .ic {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--muted);
  pointer-events: none;
}
.login2-input input {
  width: 100%;
  padding: 13px 44px;
  border-radius: 10px;
  font-size: 15px;
}
.login2-input .eye {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  border: 0; background: none; cursor: pointer;
  padding: 8px 10px;
  color: var(--muted);
  opacity: .8;
}
.login2-input .eye:hover, .login2-input .eye.is-on { opacity: .85; }

.login2-go {
  width: 100%;
  padding: 14px;
  font-size: 16.5px;
  font-weight: 700;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.login2-forgot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--primary);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.login2-note {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 8px 0 0;
}

.login2-users { margin-top: 14px; }
.login2-users-head {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 9px;
  padding: 9px 12px;
  color: var(--label);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.login2-users-head.is-open { border-color: var(--primary); color: var(--primary); }
.login2-users-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.user-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 13px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dark);
  cursor: pointer;
}
.user-chip span { color: var(--muted); font-weight: 500; margin-left: 6px; font-size: 11.5px; }
.user-chip:hover, .user-chip.is-active { border-color: var(--primary); color: var(--primary); }

.login2-motto-sm {
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  font-style: italic;
  margin: 0;
}

.login2-vendor { color: rgba(226, 232, 240, .72); font-size: 12px; text-align: center; }
.login2-vendor a { color: #93C5FD; }
.login2-vendor .dot { opacity: .5; margin: 0 4px; }

@media (max-width: 1180px) {
  .login2 { grid-template-columns: minmax(0, 1fr) 440px; }
  .login2-name { font-size: 32px; }
  .login2-name.accent { font-size: 24px; }
  .login2-monitor { width: min(360px, 62%); }
  .login2-motto { font-size: 24px; }
}

@media (max-width: 1000px) {
  .login2 { grid-template-columns: 1fr; }
  .login2-show { display: none; }
  .login2-panel { min-height: 100vh; }
  .login2-scrim { background: rgba(7, 12, 22, .78); }
}

/* ==========================================================================
   Long forms, one screen at a time

   The tabs across the top of a form cut into parts, and a tighter rhythm
   inside every form so what is left fits on a laptop screen without
   scrolling to reach Save.
   ========================================================================== */

.form-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.form-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--label);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.form-tab .n {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--primary);
  font-size: 11.5px;
}
.form-tab:hover { border-color: var(--primary); color: var(--primary); }
.form-tab.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.form-tab.is-on .n { background: rgba(255, 255, 255, .22); color: #fff; }

/* A tighter rhythm inside forms only - lists and reports keep their air. */
form .card-body { padding: 14px 16px; }
form .card { margin-bottom: 12px; }
form .field { margin-bottom: 10px; }
form .field-row { gap: 0 14px; }
form .field-hint { margin-top: 3px; font-size: 11.5px; }
form input, form select, form textarea { padding: 8px 11px; }
form .card-head { padding: 10px 16px; }

@media (max-width: 700px) {
  .form-tab { padding: 8px 12px; font-size: 12.5px; }
}

/* The line that says a run of entries is still going. Quieter than an alert,
   because the green flash above it has already said what was saved. */
.runbar {
  margin: -6px 0 16px;
  padding: 10px 14px;
  border-left: 3px solid var(--primary);
  background: var(--tint);
  border-radius: 0 8px 8px 0;
  color: var(--label);
  font-size: 13.5px;
}
.runbar a { font-weight: 600; }

.form-actions-hint {
  margin-left: auto;
  align-self: center;
  color: var(--muted);
  font-size: 12.5px;
}
.form-actions-hint b { color: var(--label); font-weight: 700; }

@media (max-width: 700px) {
  .form-actions { margin: 0 -14px; padding: 10px 14px; }
  .form-actions-hint { display: none; }   /* no keyboard on a phone */
  .form-actions .btn { flex: 1 1 auto; }
}