/* ======= styles.css ======= */
:root {
  --bg: #eef2f7;
  --card:#fff;
  --text: #0f172a;
  --muted:#64748b;
  --border: #e2e8f0;
  --shadow: 0 32px 80px rgba(15, 23, 42, 0.1);
  --primary: #091a39;
  --primary-soft: var(--primary);
  --google: #f5f5f5;
  --ViyaBook-font: Inter, "SF Pro Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* ── Responsive flex containers (flex-wrap pattern) ── */
.vb-flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.vb-flex-item {
  flex-grow: 1;
  flex-basis: 220px;
  min-width: 0;
}
.vb-flex-item-sm { flex-grow: 1; flex-basis: 140px; min-width: 0; }
.vb-flex-item-lg { flex-grow: 1; flex-basis: 320px; min-width: 0; }

/* ── Responsive stat/summary card rows ── */
.vb-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.vb-stat-card {
  flex: 1 1 180px;
  min-width: 0;
}

/* ── Responsive grid that auto-wraps ── */
.vb-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.vb-auto-grid-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.vb-auto-grid-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* MV Waheed — the ONE Dhivehi font (self-hosted woff2 + .ttf fallback). Legacy
   family names are thin ALIASES to the same file so Dhivehi never downgrades to
   Faruma/Noto/tofu and the Noto font file is never downloaded. */
@font-face {
  font-family: 'MV Waheed';
  src: url('assets/fonts/MVWaheed.woff2') format('woff2'),
       url('assets/fonts/MV_A_Waheed_Bold.ttf') format('truetype');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face { font-family: 'Faruma';           src: url('assets/fonts/MVWaheed.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'MV Boli';          src: url('assets/fonts/MVWaheed.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Noto Sans Thaana'; src: url('assets/fonts/MVWaheed.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

* {
  box-sizing: border-box;
  font-family: var(--ViyaBook-font);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh; /* Modern mobile height */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  font-family: var(--ViyaBook-font);
  background: radial-gradient(circle at top, rgba(24,95,165, 0.14), transparent 20%),
    linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  color: var(--text);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;overflow-x:clip;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

html[lang="dv"],
html[lang="dv"] body,
body.viya-dv,
body.ViyaBook-dv {
  font-family: "MV Waheed", Inter, Arial, sans-serif !important;
}

html[lang="dv"] input,
html[lang="dv"] textarea,
html[lang="dv"] select,
html[lang="dv"] button,
body.viya-dv input,
body.viya-dv textarea,
body.viya-dv select,
body.viya-dv button,
body.ViyaBook-dv input,
body.ViyaBook-dv textarea,
body.ViyaBook-dv select,
body.ViyaBook-dv button {
  font-family: "MV Waheed", Inter, Arial, sans-serif !important;
}

html[lang="dv"] [data-lang],
body.viya-dv [data-lang],
body.ViyaBook-dv [data-lang] {
  font-family: "MV Waheed", Inter, Arial, sans-serif !important;
}

.page-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.login-panel {
  width: min(420px, 100%);
  background: var(--card);
  border-radius: 32px;
  padding: 40px 32px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.logo-wrap {
  display: grid;
  place-items: center;
  margin-bottom: 28px;
}

.brand-mark {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(180deg, #eff8ff 0%, #e0f2fe 100%);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.brand-mark svg {
  width: 64px;
  height: 64px;
}

.hero-copy {
  text-align: center;
  margin-bottom: 28px;
}

.hero-copy h1 {
  margin: 0;
  font-size: 2.1rem;
  letter-spacing: -0.03em;
}

.hero-copy p {
  margin: 10px auto 0;
  color: var(--muted);
  font-size: 1rem;
}

.social-button {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--google);
  color: var(--text);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 0.98rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.social-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.google-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-weight: 700;
}

.divider {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 24px 0;
  color: var(--muted);
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.login-form {
  display: grid;
  gap: 20px;
}

.field-group {
  display: grid;
  gap: 10px;
}

label {
  font-size: 0.95rem;
  color: var(--muted);
}

.input-box {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px 14px;
}

.input-icon {
  font-size: 1rem;
}

input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
}

input::placeholder {
  color: #94a3b8;
}

.error-message {
  min-height: 18px;
  color: var(--danger);
  font-size: 0.88rem;
}

.primary-button {
  width: 100%;
  padding: 16px 18px;
  border: none;
  border-radius: 12px;
  background: var(--primary);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.primary-button:hover {
  background: #0b1b3b;
  transform: translateY(-1px);
}

.footer-row {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--muted);
  font-size: 0.95rem;
}

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

a:hover {
  text-decoration: underline;
}

.page-panel {
  width: min(960px, 100%);
  background: var(--card);
  border-radius: 32px;
  padding: 32px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.page-header {
  display: grid;
  gap: 16px;
  margin-bottom: 32px;
}

.page-header h1 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -0.03em;
}

.page-header p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.settings-form {
  display: grid;
  gap: 24px;
}

.settings-grid,
.horizontal-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.field-group.full-width {
  grid-column: span 2;
}

.business-settings {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.business-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.business-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.business-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: var(--card);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.business-chip:hover {
  transform: translateY(-1px);
}

.business-chip.active {
  background: var(--primary-soft);
  color: white;
  border-color: transparent;
}

.business-delete-button {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.08);
  color: var(--text);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}

.business-chip.active .business-delete-button {
  background: rgba(255, 255, 255, 0.18);
  color: white;
}

.business-profile-card {
  display: grid;
  gap: 20px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 24px;
}

.profile-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.business-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.business-profile-grid .full-width {
  grid-column: span 2;
}

.business-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.logo-preview,
.logo-upload-preview {
  min-height: 86px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  display: grid;
  place-items: center;
  padding: 14px;
  background: #f8fafc;
}

.logo-preview img,
.logo-upload-preview img {
  max-width: 100%;
  max-height: 86px;
  object-fit: contain;
}

.logo-placeholder {
  color: var(--muted);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 1000;
}

.modal-overlay.hidden {
  display: none;
}

.modal-card {
  width: min(640px, 100%);
  background: var(--card);
  border-radius: 28px;
  padding: 28px;
  box-shadow: var(--shadow);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.modal-close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}

.preferences-settings {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.section-header {
  display: grid;
  gap: 4px;
}

.section-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text);
}

.section-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.preferences-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.preference-group {
  display: grid;
  gap: 12px;
}

.preference-label {
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 600;
}

@media (max-width: 860px) {
  .business-profile-grid,
  .settings-grid,
  .horizontal-group,
  .preferences-grid {
    grid-template-columns: 1fr;
  }
}


.toggle-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.preview-card {
  background: rgba(15, 23, 42, 0.04);
  border-radius: 24px;
  padding: 24px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.preview-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.preview-card h2 {
  margin: 12px 0 0;
  font-size: 1.8rem;
}

.readonly-with-icon {
  position: relative;
}

.readonly-with-icon .icon-button.small {
  background: rgba(15, 23, 42, 0.06);
  border: none;
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--primary-soft);
  font-size: 0.95rem;
}

.form-note {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 6px;
}

.success-text {
  color: #15803d;
}

@media (max-width: 860px) {
  .settings-grid,
  .horizontal-group {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .login-panel {
    padding: 32px 22px;
  }
}

/* Dashboard Styles */
.dashboard-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  background: linear-gradient(180deg, #e7f1ff 0%, #f7fbff 100%);
}

.sidebar {
  width: var(--vb-sidebar-w, 280px);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, #0C1E3E 0%, #040e1e 100%);
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 48px 120px rgba(15, 23, 42, 0.06);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.sidebar-brand .brand-mark {
  width: 56px;
  height: 56px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.sidebar-brand .brand-copy h2 {
  margin: 0;
  font-size: 1.45rem;
  color: #0b1b3b;
}

.sidebar-brand .brand-copy p {
  margin: 6px 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.business-switcher {
  position: relative;
  margin-bottom: 28px;
}

.business-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.business-trigger:hover {
  transform: translateY(-1px);
  border-color: rgba(24,95,165, 0.2);
}

.business-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(24,95,165, 0.1);
  color: var(--primary);
  font-size: 14px;
}

.business-current {
  flex: 1;
  text-align: left;
  font-weight: 700;
  color: var(--text);
}

.business-arrow {
  font-size: 12px;
  color: var(--muted);
}

.business-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
  list-style: none;
  padding: 10px 0;
  z-index: 20;
}

.business-switcher.open .business-options {
  display: block;
}

.business-option {
  padding: 10px 12px;
  cursor: pointer;
  color: var(--text);
  transition: background 0.2s ease;
}

.business-option:hover {
  background: rgba(24,95,165, 0.08);
}

.business-create {
  color: var(--primary);
  font-weight: 700;
}

.sidebar-nav {
  flex: 1;
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li {
  margin-bottom: 2px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.sidebar-nav a:hover {
  background: rgba(24,95,165, 0.08);
  color: var(--primary);
  transform: translateX(2px);
}

.sidebar-nav a.active {
  background: linear-gradient(135deg, var(--primary) 0%, #378ADD 100%);
  color: white;
}

.sidebar-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(24,95,165, 0.08);
}

.main-content {
  flex: 1;
  padding: 28px 32px;
  overflow-y: auto;
}

.dashboard-topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  width: 100%;
}

.topbar-title {
  min-width: 220px;
}

.topbar-title h1 {
  margin: 0;
  font-size: 2.2rem;
  color: var(--text);
  line-height: 1.05;
}

.topbar-title p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  min-width: min(100%, 420px);
}

.search-box.compact-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  width: clamp(220px, 24vw, 360px);
  min-width: 220px;
  max-width: 360px;
}

.search-box.compact-search input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.95rem;
  color: var(--text);
  background: transparent;
}

.notification-button {
  position: relative;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.9);
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.notification-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.notification-button .badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--danger);
  color: white;
  font-size: 0.75rem;
  display: grid;
  place-items: center;
}

.profile-menu-wrap {
  position: relative;
}

.profile-button {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.9);
  padding: 0 16px;
  min-width: 76px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.profile-button span {
  font-weight: 700;
  color: var(--primary);
}

.profile-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 200px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(15, 23, 42, 0.09);
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.08);
  padding: 12px;
  z-index: 15;
}

.profile-menu-wrap.open .profile-dropdown {
  display: block;
}

.profile-dropdown a,
.profile-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.profile-dropdown a:hover,
.profile-dropdown button:hover {
  background: rgba(24,95,165, 0.08);
}

.header-actions .primary-button,
.header-actions .secondary-button {
  width: auto;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
}

.header-actions .primary-button {
  min-width: max-content;
}

.header-actions .secondary-button {
  background: rgba(255, 255, 255, 0.72);
}

.content-section {
  display: grid;
  gap: 20px;
}

.trip-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.trip-card {
  display: block;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  padding: 20px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.05);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.trip-card:hover {
  transform: translateY(-2px);
  border-color: rgba(24,95,165, 0.15);
}

.trip-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.trip-title-wrap {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.trip-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(24,95,165, 0.1);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.95rem;
}

.trip-title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text);
}

.trip-meta {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.4;
}

.trip-status-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.status-pill {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  color: #1f7a2d;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.trip-arrow {
  color: var(--primary);
  font-size: 1.4rem;
}

.trip-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 14px;
}

.metric-card {
  background: rgba(247, 250, 255, 0.9);
  border-radius: 20px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.metric-card span {
  color: var(--muted);
  font-size: 0.82rem;
}

.metric-card strong {
  font-size: 1rem;
  color: var(--text);
}

.metric-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.metric-blue strong {
  color: var(--primary);
}

.metric-orange strong {
  color: #ea580c;
}

.metric-green strong {
  color: var(--success);
}

.unpaid-row {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(254, 242, 242, 0.85);
  border: 1px solid rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.unpaid-row span {
  font-weight: 700;
}

.delete-btn {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.delete-btn:hover {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
}

.empty-state {
  padding: 40px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95);
  text-align: center;
  color: var(--muted);
  font-size: 0.98rem;
}


.stats-grid.premium-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.stat-card {
  display: grid;
  gap: 18px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.08);
}

a.stat-card,
a.stat-card:hover {
  color: inherit;
  text-decoration: none;
}

a.stat-card {
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

a.stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(24,95,165, 0.18);
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.12);
}

.stat-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 1.25rem;
}

.stat-blue {
  background: rgba(59, 130, 246, 0.12);
  color: var(--primary);
}

.stat-teal {
  background: rgba(20, 184, 166, 0.16);
  color: #0f766e;
}

.stat-green {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
}

.stat-orange {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}

.stat-purple {
  background: rgba(24,95,165, 0.14);
  color: var(--primary);
}

.stat-pink {
  background: rgba(219, 39, 119, 0.14);
  color: #be185d;
}

.stat-card span {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 6px;
}

.stat-card h3 {
  margin: 0;
  font-size: 1.8rem;
  color: var(--text);
}

.stat-trend {
  margin: 0;
  color: var(--primary);
  font-size: 0.92rem;
}

.quick-actions {
  margin-bottom: 32px;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-heading h2 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--text);
}

.secondary-button {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: transparent;
  padding: 12px 18px;
  border-radius: 14px;
  color: var(--primary);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.secondary-button:hover {
  background: rgba(24,95,165, 0.08);
  transform: translateY(-1px);
}

.modern-actions {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.action-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: white;
  min-height: 108px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
}

.action-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.action-card span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 1.1rem;
}

.action-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
}

.action-card p {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.95);
}

.action-arrow {
  font-size: 1.3rem;
  opacity: 0.9;
}

.action-purple {
  background: linear-gradient(135deg, var(--primary), var(--primary));
}

.action-teal {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.action-blue {
  background: linear-gradient(135deg, #0f6dff, #38bdf8);
}

.action-green {
  background: linear-gradient(135deg, #15803d, #4ade80);
}

.action-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
}

.tables-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.table-card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 24px;
  padding: 24px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 32px 70px rgba(15, 23, 42, 0.08);
}

.table-card.table-large .table-row {
  grid-template-columns: 1.1fr 1.6fr 1.6fr 1fr 1fr 1fr auto;
}

.table-card.table-medium .table-row {
  grid-template-columns: 1fr 1.7fr 1fr 1fr 1fr;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.table-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

.table-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.table-row {
  display: grid;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.table-row.header-row {
  border-top: none;
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.table-row:not(.header-row):hover {
  background: rgba(24,95,165, 0.05);
}

.table-row span,
.table-row button {
  color: var(--text);
  font-size: 0.95rem;
}

.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.status.paid {
  background: #d1fae5;
  color: #057a55;
}

.status.due {
  background: #fef3c7;
  color: #b45309;
}

.status.overdue {
  background: #fee2e2;
  color: #b91c1c;
}

.row-action {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: transparent;
  color: var(--primary);
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.row-action:hover {
  background: rgba(24,95,165, 0.08);
  transform: translateY(-1px);
}

@media (max-width: 1180px) {
  .stats-grid.premium-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tables-row {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   MOBILE-FIRST RESPONSIVE DESIGN
   ======================================== */

/* Hamburger Menu Toggle Button */
.hamburger-toggle {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  cursor: pointer;
  z-index: 1001;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.hamburger-toggle:hover {
  background: rgba(255, 255, 255, 0.98);
}

.hamburger-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--primary);
  border-radius: 1px;
  transition: all 0.3s ease;
}

.hamburger-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.hamburger-toggle.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* Sidebar Mobile Overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 999;
  animation: fadeIn 0.3s ease;
}

.sidebar-overlay.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Responsive Breakpoints */
/* Tablet (768px and down) */
@media (max-width: 768px) {
  .dashboard-shell {
    flex-direction: column;
  }

  .hamburger-toggle {
    display: flex;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 12px rgba(15, 23, 42, 0.15);
    border-right: 1px solid rgba(15, 23, 42, 0.08);
    overflow-y: auto;
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .sidebar {
    padding: 20px 16px;
  }

  .main-content {
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    margin-top: 12px;
  }

  .dashboard-topbar {
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 36px;
  }

  .topbar-title h1 {
    font-size: 1.75rem;
  }

  .topbar-title p {
    font-size: 0.9rem;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
    order: 10;
  }

  .search-box.compact-search {
    width: 100%;
    min-width: unset;
    max-width: unset;
    margin-top: 12px;
  }

  .header-actions .primary-button,
  .header-actions .secondary-button,
  .header-actions .notification-button,
  .header-actions .profile-button {
    min-width: 48px;
    flex: 0 0 auto;
  }

  .stats-grid.premium-stats,
  .modern-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Tables on tablet - horizontal scroll */
  .table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
  }

  table {
    min-width: 100%;
  }

  /* Forms on tablet */
  .form-grid,
  .settings-grid,
  .horizontal-group,
  .preferences-grid {
    grid-template-columns: 1fr;
  }

  .field-group.full-width {
    grid-column: 1;
  }

  /* Cards responsive */
  .card {
    margin-bottom: 12px;
  }
}

/* Mobile (480px and down) */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  .page-shell {
    padding: 16px 12px;
  }

  .login-panel {
    padding: 28px 20px;
    border-radius: 20px;
  }

  .hero-copy h1 {
    font-size: 1.75rem;
  }

  .hero-copy p {
    font-size: 0.9rem;
  }

  .dashboard-topbar {
    gap: 12px;
  }

  .topbar-title h1 {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .topbar-title p {
    font-size: 0.85rem;
    margin-top: 6px;
  }

  .sidebar {
    width: 250px;
  }

  .sidebar-brand .brand-mark {
    width: 48px;
    height: 48px;
  }

  .sidebar-brand .brand-copy h2 {
    font-size: 1.2rem;
  }

  .sidebar-brand .brand-copy p {
    font-size: 0.85rem;
  }

  .sidebar-nav a {
    padding: 12px 14px;
    font-size: 0.9rem;
  }

  .main-content {
    padding: 12px;
  }

  /* Touch-friendly button sizes */
  .btn,
  button,
  .primary-button,
  .secondary-button {
    min-height: 44px;
    padding: 12px 16px;
  }

  .notification-button,
  .profile-button {
    width: 44px;
    height: 44px;
  }

  /* Forms */
  input,
  textarea,
  select,
  .input-box {
    min-height: 44px;
  }

  .search-box.compact-search {
    height: 44px;
  }

  /* Card layouts */
  .stats-grid,
  .stats-grid.premium-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .stat-card {
    padding: 12px;
    gap: 10px;
  }

  .stat-icon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .stat-card h3 {
    font-size: 1.2rem;
  }

  .modern-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .action-card {
    padding: 12px;
    min-height: 90px;
    gap: 8px;
  }

  .action-card p {
    display: none;
  }

  .action-card strong {
    font-size: 0.9rem;
  }

  /* Modal adjustments */
  .modal-card {
    width: 100%;
    margin: 16px;
  }

  .page-panel {
    padding: 16px;
    border-radius: 20px;
  }

  /* Table - mobile card view */
  .table-mobile-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    gap: 8px;
  }

  .table-mobile-card::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Lists should stack */
  .list-grid {
    grid-template-columns: 1fr;
  }

  /* Responsive text */
  h1 { font-size: clamp(1.3rem, 5vw, 2.2rem); }
  h2 { font-size: clamp(1.1rem, 4vw, 1.8rem); }
  h3 { font-size: clamp(1rem, 3vw, 1.4rem); }
  p { font-size: clamp(0.85rem, 2vw, 1rem); }
}

/* Extra small (320px) */
@media (max-width: 320px) {
  .page-shell {
    padding: 12px 8px;
  }

  .login-panel {
    padding: 20px 16px;
  }

  .hero-copy h1 {
    font-size: 1.4rem;
  }

  .topbar-title h1 {
    font-size: 1.25rem;
  }

  .sidebar {
    width: 220px;
  }

  /* Very aggressive mobile optimizations */
  .header-actions {
    gap: 6px;
  }

  .search-box.compact-search {
    display: none;
  }

  .stats-grid {
    gap: 8px;
  }

  input,
  textarea,
  select {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
}

/* =========================================
Compact POS/SaaS Typography Scale
========================================= */

html,
body {
  font-size: 13px !important;
}

body,
input,
select,
textarea {
  font-size: 13px !important;
}

button,
.btn,
.primary-button,
.secondary-button,
.primary-action,
.secondary-action,
.wave-btn,
.small-btn,
.primary-btn,
.pos-btn,
.save-btn,
.save-bill,
.view-register,
.tab,
.tab-pill,
.cat-btn,
.filter-btn,
.view-btn {
  font-size: 13px !important;
  font-weight: 700 !important;
}

h1,
.topbar-title h1,
.customer-head h1,
.page-header h1,
.settings-title h1,
.register-title h1,
.sales-head h1,
.top h1,
.page h1 {
  font-size: clamp(24px, 2.4vw, 28px) !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

h2,
.panel-head h2,
.modal-head h2,
.register-card-head h2 {
  font-size: clamp(18px, 1.9vw, 22px) !important;
  line-height: 1.25 !important;
}

h3,
.card h3,
.summary-card h3,
.plan-card h3,
.role-card h3 {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

p,
.subtitle,
.sub,
.topbar-title p,
.customer-head p,
.page-header p,
.settings-title p,
.panel-head p {
  font-size: 13px !important;
}

table,
.settings-table,
.table-modern,
.pos-table {
  font-size: 12px !important;
}

th,
.settings-table th,
.table-modern th,
.pos-table th,
.table-row.header-row {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-weight: 800 !important;
}

td,
.settings-table td,
.table-modern td,
.pos-table td,
.table-row span,
.table-row button {
  font-size: 12px !important;
}

input,
select,
textarea,
.input-box,
.search-box,
.select-box,
.product-search,
.customer-search,
.customer-search-row input,
.field input,
.field select,
.field textarea {
  font-size: 13px !important;
}

.sidebar-nav a,
.viya-sidebar-nav a,
body .nav a {
  font-size: 13px !important;
  font-weight: 700 !important;
}

.main-content,
.viya-main,
.dashboard-content,
.page-content {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

.dashboard-topbar,
.top-row,
.customer-head,
.top,
.page-header,
.header,
.sales-head {
  min-height: 56px !important;
  margin-bottom: 18px !important;
}

.card,
.summary-card,
.tool-card,
.table-shell,
.toolbar,
.product-area,
.settings-card,
.role-card,
.plan-card,
.table-card,
.invoice-card,
.expense-card,
.report-card,
.kpi-card,
.stat-card,
.action-card {
  padding: 16px !important;
}

.settings-panel {
  padding: 24px !important;
}

.settings-menu {
  padding: 14px !important;
  gap: 12px !important;
}

.summary-grid,
.kpi-grid,
.stats-grid,
.stats-grid.premium-stats,
.plans-grid,
.role-grid,
.export-grid,
.settings-grid,
.business-meta,
.subscription-meta {
  gap: 14px !important;
}

.kpi-card strong,
.stat-card h3,
.summary-card strong,
.metric-card strong,
.total-row,
.balance-row strong {
  font-size: clamp(22px, 2vw, 26px) !important;
}

.trip-card,
.project-card {
  padding: 20px !important;
}

.trip-title,
.project-title {
  font-size: 18px !important;
}

.trip-meta,
.project-meta {
  font-size: 12px !important;
}

.metric-card {
  min-height: 118px !important;
  padding: 16px !important;
}

.metric-card span,
.metric-card p {
  font-size: 12px !important;
}

@media (max-width: 480px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  h1,
  .topbar-title h1,
  .customer-head h1,
  .page-header h1,
  .settings-title h1,
  .register-title h1,
  .sales-head h1 {
    font-size: 24px !important;
  }
}

/* =========================================
Premium ViyaBook Login
========================================= */

.vb-login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: 54px;
  padding: 44px 54px;
  background:
    radial-gradient(circle at 45% 0%, rgba(187, 220, 255, 0.55), transparent 22%),
    linear-gradient(135deg, #f1f7ff 0%, var(--card) 52%, #eef6ff 100%);
  color: var(--text);
  overflow: hidden;
}

.vb-login-marketing {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  position: relative;
}

.vb-login-logo {
  width: 270px;
  max-width: 72vw;
  height: auto;
  margin-bottom: 26px;
}

.vb-smart-pill {
  width: max-content;
  max-width: 100%;
  border-radius: 12px;
  background: #ddecff;
  color: #095de8;
  padding: 10px 16px;
  font-weight: 900;
}

.vb-login-marketing h1 {
  margin: 0;
  max-width: 650px;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: 0;
  color: #07133d;
}

.vb-login-marketing h1 span {
  color: #105dea;
}

.vb-login-marketing p {
  max-width: 480px;
  margin: 0;
  color: #263858;
  font-size: 1.18rem;
  line-height: 1.55;
  font-weight: 650;
}

.vb-device-scene {
  position: relative;
  min-height: 310px;
  margin-top: 18px;
}

.vb-laptop-mock {
  position: absolute;
  left: 170px;
  bottom: 18px;
  width: min(520px, 70vw);
  height: 280px;
  border: 10px solid var(--text);
  border-radius: 12px 18px 10px 10px;
  background: var(--card);
  box-shadow: 0 28px 70px rgba(7, 21, 47, 0.22);
  padding: 22px;
}

.vb-laptop-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}

.vb-laptop-bar span {
  width: 90px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #edf5ff, #e9f8f3);
}

.vb-chart-lines {
  height: 110px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, transparent 47%, rgba(22, 105, 242, 0.9) 48%, rgba(22, 105, 242, 0.9) 51%, transparent 52%),
    linear-gradient(22deg, transparent 48%, rgba(255, 80, 80, 0.85) 49%, rgba(255, 80, 80, 0.85) 51%, transparent 52%),
    repeating-linear-gradient(0deg, #fff 0 26px, #edf2f8 27px);
  border: 1px solid #e5edf7;
}

.vb-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.vb-dashboard-grid span {
  height: 42px;
  border-radius: 12px;
  background: #eff6ff;
}

.vb-phone-mock {
  position: absolute;
  left: 34px;
  bottom: 0;
  width: 150px;
  height: 270px;
  border: 8px solid var(--text);
  border-radius: 28px;
  background: var(--card);
  z-index: 2;
  padding: 28px 12px 12px;
  box-shadow: 0 24px 52px rgba(7, 21, 47, 0.24);
}

.vb-phone-top {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 48px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--text);
}

.vb-phone-mock strong {
  display: block;
  font-size: .78rem;
  margin-bottom: 10px;
}

.vb-mini-card {
  display: block;
  border-radius: 12px;
  padding: 10px;
  margin-top: 9px;
  font-size: .68rem;
  font-weight: 900;
  color: var(--text);
}

.vb-mini-card.green { background: #e9f9ef; }
.vb-mini-card.orange { background: #fff0e3; }
.vb-mini-card.blue { background: #e5f1ff; }

.vb-floating-card {
  position: absolute;
  left: min(560px, 70vw);
  bottom: 10px;
  width: 170px;
  height: 118px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #dfe9f7;
  box-shadow: 0 20px 48px rgba(7, 21, 47, 0.14);
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 18px;
}

.vb-floating-card span {
  flex: 1;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #88bdff, var(--primary));
}

.vb-floating-card span:nth-child(1) { height: 42px; }
.vb-floating-card span:nth-child(2) { height: 66px; }
.vb-floating-card span:nth-child(3) { height: 84px; }
.vb-floating-card span:nth-child(4) { height: 102px; }

.vb-paper-plane {
  position: absolute;
  right: 140px;
  top: 18px;
  color: var(--primary);
  font-size: 4rem;
  transform: rotate(-18deg);
  opacity: .75;
}

.vb-feature-badges {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 18px;
  padding-top: 28px;
  border-top: 1px solid #dbe7f5;
}

.vb-feature-badges span {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #334465;
  font-weight: 800;
}

.vb-feature-badges span::before {
  content: "";
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #e6f0ff;
  box-shadow: inset 0 0 0 1px #d7e7ff;
}

.vb-login-card {
  align-self: center;
  width: min(680px, 100%);
  justify-self: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dce7f5;
  border-radius: 28px;
  padding: clamp(30px, 5vw, 70px);
  box-shadow: 0 34px 90px rgba(7, 21, 47, 0.14);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.vb-card-logo {
  display: block;
  width: 190px;
  max-width: 70%;
  margin: 0 auto 18px;
}

.vb-login-card .hero-copy {
  margin-bottom: 34px;
}

.vb-login-card .hero-copy h1 {
  font-size: 2.15rem;
  color: #07133d;
}

.vb-login-card .hero-copy p {
  font-size: 1.15rem;
}

.vb-login-card .social-button {
  min-height: 64px;
  border-radius: 14px;
  background: var(--card);
  font-weight: 900;
  color: #07133d;
}

.vb-login-card .input-box {
  min-height: 64px;
  border-radius: 14px;
  background: var(--card);
}

.vb-login-card .input-icon {
  color: var(--muted);
  font-size: 1.25rem;
}

.vb-login-card .primary-button {
  min-height: 64px;
  border-radius: 14px;
  background: linear-gradient(135deg, #095cff, #2278ff);
  box-shadow: 0 18px 34px rgba(22, 105, 242, 0.28);
}

.vb-login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: #334465;
  font-weight: 750;
}

.vb-remember {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #334465;
}

.vb-remember input {
  width: 22px;
  height: 22px;
  accent-color: var(--primary);
}

.vb-login-card .footer-row {
  justify-content: center;
  margin-top: 26px;
}

.vb-secure-note {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  color: #53657f;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 1100px) {
  .vb-login-shell {
    grid-template-columns: 1fr;
    padding: 28px;
  }

  .vb-login-marketing {
    text-align: center;
    align-items: center;
  }

  .vb-device-scene {
    width: min(760px, 100%);
  }

  .vb-feature-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

@media (max-width: 640px) {
  .vb-login-shell {
    padding: 18px;
  }

  .vb-device-scene {
    display: none;
  }

  .vb-feature-badges {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .vb-login-card {
    padding: 24px 18px;
    border-radius: 22px;
  }

  .vb-login-options {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================
ViyaBook Reference App Theme
========================================= */

:root {
  --vb-navy: #0C1E3E;
  --vb-navy-soft: #0b2548;
  --vb-blue: var(--primary);
  --vb-blue-dark: var(--primary-dark);
  --vb-bg: var(--bg);
  --vb-card: var(--card);
  --vb-text: var(--text);
  --vb-muted: var(--muted);
  --vb-border: #dfe7f2;
  --vb-shadow: 0 14px 38px rgba(7, 21, 47, 0.08);
}

body {
  background: var(--vb-bg) !important;
  color: var(--vb-text) !important;
}

.main-content,
.viya-main,
.dashboard-content,
.page-content {
  background: var(--vb-bg) !important;
}

.dashboard-wrap,
.customer-page,
.page,
.settings-page,
.reports-page,
.staffs-page,
.sales-page,
.invoice-page,
.expense-page,
.products-page,
.trips-page,
.projects-page,
.content-section {
  max-width: 1400px !important;
}

.dashboard-topbar,
.top-row,
.customer-head,
.top,
.page-header,
.header,
.panel-head,
.settings-title {
  background: transparent !important;
  border: 0 !important;
}

.dashboard-topbar,
.top-row,
.customer-head,
.top,
.page-header,
.header {
  min-height: 78px;
  margin-bottom: 28px !important;
}

h1,
.topbar-title h1,
.customer-head h1,
.page-header h1,
.settings-title h1 {
  color: var(--vb-text) !important;
  letter-spacing: 0 !important;
  font-weight: 900 !important;
}

.subtitle,
.sub,
.topbar-title p,
.customer-head p,
.page-header p,
.settings-title p,
.panel-head p {
  color: var(--vb-muted) !important;
  font-weight: 650 !important;
}

.primary-button,
.primary-action,
.wave-primary,
.primary,
.btn.primary,
.add-trip-btn,
.add-project-btn,
.project-modal-save,
.trip-modal-save,
.modal-save,
button[onclick*="Add"],
button[onclick*="openAdd"],
a.primary-button {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  color: var(--card) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 28px rgba(22, 105, 242, 0.24) !important;
}

.secondary-button,
.secondary-action,
.wave-secondary,
.secondary,
.btn.secondary,
.filter-btn,
.view-btn,
.tab,
.tab-pill,
.delete-year-btn,
.add-year-btn,
select,
input,
textarea {
  border-color: var(--vb-border) !important;
}

.secondary-button,
.secondary-action,
.wave-secondary,
.secondary,
.btn.secondary,
.view-btn,
.tab,
.tab-pill,
.add-year-btn {
  background: var(--card) !important;
  color: #125bcf !important;
  border-radius: 12px !important;
}

.card,
.summary-card,
.tool-card,
.table-shell,
.empty-state,
.toolbar,
.product-area,
.settings-menu,
.settings-panel,
.settings-card,
.role-card,
.plan-card,
.table-card,
.invoice-card,
.expense-card,
.report-card,
.kpi-card,
.stat-card,
.action-card,
.month-section,
.year-section,
.trip-card,
.project-card {
  background: var(--vb-card) !important;
  border: 1px solid var(--vb-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--vb-shadow) !important;
}

.year-section,
.month-section {
  overflow: hidden !important;
}

.year-header,
.month-header {
  background: var(--card) !important;
  border-color: var(--vb-border) !important;
}

.year-content,
.month-content {
  background: var(--card) !important;
}

.trip-card,
.project-card {
  padding: 28px !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 44px rgba(7, 21, 47, 0.08) !important;
}

.trip-card-top,
.project-card-top {
  padding-bottom: 22px !important;
  border-bottom: 1px solid #eef2f7 !important;
  margin-bottom: 22px !important;
}

.trip-icon,
.project-icon {
  width: 68px !important;
  height: 68px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #eef6ff 0%, #d9eaff 100%) !important;
  color: #1766d9 !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
}

.trip-title,
.project-title {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: var(--vb-text) !important;
}

.trip-meta,
.project-meta {
  color: #4d5a70 !important;
  font-size: 1rem !important;
}

.trip-metrics,
.project-metrics {
  grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
  gap: 20px !important;
}

.metric-card {
  min-height: 150px !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
}

.metric-blue {
  background: linear-gradient(135deg, #edf5ff 0%, #f6f9ff 100%) !important;
}

.metric-green {
  background: linear-gradient(135deg, #eafbf4 0%, #f3fbf8 100%) !important;
}

.metric-orange {
  background: linear-gradient(135deg, #fff3e7 0%, #fff9f2 100%) !important;
}

.metric-red {
  background: linear-gradient(135deg, #fff0f2 0%, #fff7f8 100%) !important;
}

.metric-card strong {
  color: var(--vb-text) !important;
  font-size: 1.55rem !important;
  font-weight: 900 !important;
}

.status-pill.active,
.active-count,
.year-active-count {
  background: #e7f8ef !important;
  color: #0f9f68 !important;
  border: 1px solid #c8efdc !important;
}

.complete-btn {
  background: linear-gradient(135deg, #19bd7d 0%, #11a36b 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 24px rgba(17, 163, 107, 0.22) !important;
}

table,
.settings-table,
.table-modern {
  background: var(--card) !important;
  border-color: var(--vb-border) !important;
}

th,
.settings-table th,
.table-modern th,
.table-row.header-row {
  background: #f8fafc !important;
  color: #475569 !important;
}

.modal,
.modal-card,
.project-modal,
.trip-modal {
  border-radius: 22px !important;
  border: 1px solid var(--vb-border) !important;
  box-shadow: 0 28px 80px rgba(7, 21, 47, 0.24) !important;
}

@media (max-width: 980px) {
  .trip-metrics,
  .project-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .dashboard-topbar,
  .top-row,
  .customer-head,
  .top,
  .page-header,
  .header {
    align-items: stretch !important;
  }

  .trip-card,
  .project-card {
    padding: 18px !important;
  }

  .trip-metrics,
  .project-metrics {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .metric-card {
    min-height: 118px !important;
    padding: 18px !important;
  }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
  .hamburger-toggle {
    display: none;
  }

  .sidebar-overlay {
    display: none !important;
  }

  .sidebar {
    transform: translateX(0) !important;
  }
}

/* Additional tablet optimizations (860px) */
@media (max-width: 860px) {
  .dashboard-shell {
    flex-direction: column;
  }

  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    box-shadow: none;
    border-right: none;
  }

  .sidebar {
    padding: 24px 18px;
  }

  .main-content {
    padding: 20px 18px;
  }

  .dashboard-topbar {
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .search-box.compact-search {
    width: 100%;
    min-width: 100%;
    order: 10;
  }

  .header-actions .primary-button,
  .header-actions .secondary-button {
    flex: 1 1 180px;
  }

  .stats-grid.premium-stats,
  .modern-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 620px) {
  .dashboard-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .search-box.compact-search {
    grid-column: 1 / -1;
  }

  .notification-button,
  .profile-button,
  .profile-menu-wrap {
    width: 100%;
  }

  .notification-button,
  .profile-button,
  .header-actions .primary-button,
  .header-actions .secondary-button {
    height: 46px;
    min-height: 46px;
  }

  .table-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .table-row.header-row {
    display: none;
  }

  .table-row span,
  .table-row button {
    display: block;
    width: 100%;
  }

  .table-row .status {
    justify-self: start;
  }
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.sidebar-toggle-group {
  margin-bottom: 16px;
}

.toggle-label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.switch-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  background: rgba(15, 23, 42, 0.04);
  border-radius: 12px;
  padding: 4px;
}

.switch-option {
  border: none;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
  padding: 14px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.switch-option.active {
  background: linear-gradient(135deg, var(--primary), #378ADD);
  color: white;
}

.logout-button {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: #E24B4A;
  color: white;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.logout-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(239, 68, 68, 0.25);
}

.logout-icon {
  display: inline-grid;
  place-items: center;
}
/* ======================================================
INVOICE DROPDOWN
====================================================== */

.invoice-dropdown {
  position: relative;
  display: inline-block;
}

.invoice-dropdown-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: none;
  background: #eef4ff;
  color: var(--primary);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

.invoice-dropdown-menu {
  position: absolute;
  right: 0;
  top: 44px;
  width: 220px;
  background: white;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  display: none;
  overflow: hidden;
  z-index: 9999;
}

.invoice-dropdown-menu.show {
  display: block;
}

.invoice-dropdown-menu button {
  width: 100%;
  border: none;
  background: white;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.invoice-dropdown-menu button:hover {
  background: #f8fafc;
}

.invoice-dropdown-menu .danger-action {
  color: var(--danger);
}

/* ======================================================
MOBILE RESPONSIVE
====================================================== */

@media (max-width: 768px) {

  .sidebar,
  .app-sidebar {
    width: 100%;
    min-height: auto;
  }

  .main-content,
  .dashboard-content,
  .page-content {
    width: 100%;
    padding: 16px;
  }

  .dashboard-grid,
  .trip-grid,
  .project-grid,
  .invoice-grid,
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .invoice-card,
  .trip-card,
  .project-card,
  .dashboard-card {
    width: 100%;
  }

  .top-actions,
  .page-actions,
  .invoice-actions {
    flex-direction: column;
    gap: 12px;
  }

  .top-actions button,
  .page-actions button,
  .invoice-actions button {
    width: 100%;
  }

  .invoice-form input,
  .invoice-form select,
  .invoice-form textarea {
    width: 100%;
  }

  .invoice-dropdown-menu {
    left: 0;
    right: auto;
  }

  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .form-grid {
    grid-template-columns: 1fr !important;
  }
}
.sidebar {
    width: var(--vb-sidebar-w, 220px);
    background: #0f172a;
    color: white;
    position: fixed;
    height: 100vh;
    height: 100dvh;
    left: 0;
    top: 0;
    padding: 20px;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.main-content {
    margin-left: var(--vb-sidebar-w, 220px);
    padding: 24px;
}

.card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(15,23,42,0.08);
    border: 1px solid #e2e8f0;
}

.btn-primary {
    background: linear-gradient(135deg,var(--primary),#1d4ed8);
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
}

    .btn-primary:hover {
        opacity: 0.9;
    }

.table-modern {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

    .table-modern th {
        background: #f8fafc;
        color: var(--muted);
        text-align: left;
        padding: 14px;
    }

    .table-modern td {
        padding: 14px;
        border-top: 1px solid #f1f5f9;
    }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 20px;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(15,23,42,0.06);
}

@media(max-width:768px) {

    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }

    .main-content {
        margin-left: 0;
        padding: 16px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}
.landing-login-shell{
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  background:linear-gradient(135deg,#eef6ff,var(--card));
}

.landing-side{
  padding:70px 8%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.brand-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:50px;
}

.brand-row h2{
  font-size:28px;
  color:var(--text);
}

.landing-side h1{
  font-size:58px;
  line-height:1.05;
  color:var(--text);
  margin-bottom:24px;
}

.landing-side p{
  font-size:19px;
  line-height:1.7;
  color:var(--muted);
  max-width:620px;
}

.feature-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:36px;
  max-width:640px;
}

.feature-list div{
  background:#fff;
  border:1px solid #e5eaf1;
  border-radius: 12px;
  padding:18px;
  font-weight:800;
  box-shadow:0 16px 36px rgba(15,23,42,.06);
}

.login-panel{
  align-self:center;
  justify-self:center;
  width:min(440px,90%);
  background:#fff;
  border:1px solid #e5eaf1;
  border-radius:28px;
  padding:36px;
  box-shadow:0 30px 90px rgba(15,23,42,.12);
}

@media(max-width:900px){
  .landing-login-shell{
    grid-template-columns:1fr;
  }

  .landing-side{
    padding:40px 24px;
  }

  .landing-side h1{
    font-size:38px;
  }

  .feature-list{
    grid-template-columns:1fr;
  }

  .login-panel{
    margin:0 auto 40px;
  }
}
/* =========================================
UNIFIED LAYOUT FIX
========================================= */

html,
body {
  width: 100%;
  overflow-x: hidden;overflow-x:clip;
}

.page-shell,
.dashboard-shell,
.main-content {
  width: 100%;
}

.page-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-panel {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  background: var(--card);
  border-radius: 28px;
  padding: 36px;
  box-shadow: 0 30px 90px rgba(15,23,42,.12);
  border: 1px solid #e5eaf1;
}

.page-panel,
.card,
.table-card {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.dashboard-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.sidebar {
  width: var(--vb-sidebar-w, 220px);
  background: #0f172a;
  color: white;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  height: 100dvh;
  padding: 20px;
  overflow-y: auto;
}

.main-content {
  flex: 1;
  margin-left: var(--vb-sidebar-w, 220px);
  padding: 24px;
}

.stats-grid,
.stats-grid.premium-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 20px;
}

.modern-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 18px;
}

.trip-list,
.project-grid,
.invoice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
  gap: 18px;
}

.card,
.trip-card,
.project-card,
.invoice-card,
.table-card {
  background: white;
  border-radius: 20px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.table-modern {
  width: 100%;
  border-collapse: collapse;
}

.table-modern th {
  background: #f8fafc;
  padding: 14px;
  text-align: left;
}

.table-modern td {
  padding: 14px;
  border-top: 1px solid #f1f5f9;
}

.btn-primary,
.primary-button {
  background: linear-gradient(135deg,var(--primary),#1d4ed8);
  color: white;
  border: none;
  padding: 14px 18px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
}

.btn-primary:hover,
.primary-button:hover {
  opacity: .92;
}

.input-box {
  min-height: 52px;
}

/* =========================================
TABLET
========================================= */

@media (max-width: 900px) {

  .dashboard-shell {
    flex-direction: column;
  }

  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
  }

  .main-content {
    margin-left: 0;
    padding: 18px;
  }

  .landing-login-shell {
    grid-template-columns: 1fr;
  }

  .landing-side {
    padding: 40px 24px;
  }

  .landing-side h1 {
    font-size: 40px;
  }

  .feature-list {
    grid-template-columns: 1fr;
  }

  .login-panel {
    max-width: 100%;
  }
}

/* =========================================
MOBILE
========================================= */

@media (max-width: 768px) {

  .page-shell {
    padding: 14px;
  }

  .login-panel {
    width: 100%;
    padding: 24px 18px;
    border-radius: 24px;
  }

  .main-content {
    padding: 14px;
  }

  .stats-grid,
  .stats-grid.premium-stats,
  .modern-actions,
  .trip-list,
  .project-grid,
  .invoice-grid {
    grid-template-columns: 1fr;
  }

  .header-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .search-box.compact-search {
    width: 100%;
    min-width: 100%;
  }

  .table-modern {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .topbar-title h1 {
    font-size: 1.5rem;
  }

  .landing-side h1 {
    font-size: 32px;
  }

  .feature-list div {
    padding: 14px;
  }
}

/* =========================================
SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .login-panel {
    padding: 20px 16px;
  }

  .hero-copy h1 {
    font-size: 1.8rem;
  }

  .topbar-title h1 {
    font-size: 1.3rem;
  }

  .card,
  .trip-card,
  .project-card,
  .invoice-card,
  .table-card {
    padding: 16px;
  }

  input,
  textarea,
  select {
    font-size: 16px;
  }
 /* =========================================================
   VIYABOOK LOGIN PAGE - CLEAN BLUE DESIGN
   Paste this at the bottom of styles.css
========================================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  background: #f5f9ff;
  color: #0f172a;
}

.vb-login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background:
    radial-gradient(circle at 45% 0%, rgba(59, 130, 246, 0.10), transparent 22%),
    linear-gradient(135deg, #f8fbff 0%, #edf6ff 100%);
  overflow: hidden;
}

.vb-login-left {
  display: flex;
  align-items: center;
  padding: 56px 64px;
}

.vb-left-content {
  width: 100%;
  max-width: 780px;
}

.vb-main-logo {
  width: 215px;
  margin-bottom: 70px;
}

.vb-smart-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 12px;
  background: #dbeafe;
  color: #075bd8;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 22px;
}

.vb-login-left h1 {
  margin: 0;
  max-width: 720px;
  font-size: 48px;
  line-height: 1.15;
  letter-spacing: -1.2px;
  color: #0b1026;
  font-weight: 900;
}

.vb-login-left h1 span {
  color: #1264e8;
}

.vb-login-left p {
  margin: 22px 0 0;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.7;
  color: #26324d;
  font-weight: 500;
}

.vb-illustration {
  position: relative;
  height: 390px;
  margin-top: 35px;
}

.vb-phone {
  position: absolute;
  left: 25px;
  bottom: 45px;
  width: 150px;
  height: 250px;
  background: var(--card);
  border: 10px solid #0b1220;
  border-radius: 30px;
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
  padding: 28px 12px 12px;
  z-index: 3;
}

.vb-phone-speaker {
  position: absolute;
  top: 13px;
  left: 50%;
  width: 50px;
  height: 5px;
  background: #0b1220;
  border-radius: 20px;
  transform: translateX(-50%);
}

.vb-phone strong {
  display: block;
  font-size: 12px;
  margin-bottom: 12px;
}

.vb-phone-card {
  display: block;
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 8px;
  font-size: 11px;
}

.vb-phone-card small {
  display: block;
  color: #334155;
  font-weight: 700;
}

.vb-phone-card b {
  display: block;
  color: #0f172a;
  margin-top: 3px;
}

.vb-phone-card.green {
  background: #eafaf1;
}

.vb-phone-card.orange {
  background: #fff2df;
}

.vb-phone-card.blue {
  background: #e8f2ff;
}

.vb-laptop {
  position: absolute;
  left: 155px;
  bottom: 75px;
  width: 520px;
  height: 250px;
  background: var(--card);
  border: 10px solid #0b1220;
  border-radius: 22px;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
  padding: 28px;
  overflow: hidden;
}

.vb-laptop-top {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.vb-laptop-top span {
  height: 44px;
  flex: 1;
  border-radius: 12px;
  background: #edf8fb;
}

.vb-laptop-cards {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}

.vb-laptop-cards span {
  height: 36px;
  width: 120px;
  border-radius: 12px;
  background: #f0f9ff;
}

.vb-chart {
  position: relative;
  height: 88px;
  border: 1px solid #e5edf7;
  border-radius: 14px;
  overflow: hidden;
}

.vb-line-red,
.vb-line-blue {
  position: absolute;
  width: 330px;
  height: 8px;
  border-radius: 99px;
  transform-origin: left center;
}

.vb-line-red {
  background: #ff4d5e;
  left: 85px;
  top: 35px;
  transform: rotate(17deg);
}

.vb-line-blue {
  background: var(--primary);
  left: 220px;
  top: 58px;
  transform: rotate(-38deg);
}

.vb-laptop-bottom {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.vb-laptop-bottom span {
  height: 36px;
  flex: 1;
  border-radius: 12px;
  background: #f1f5f9;
}

.vb-chart-card {
  position: absolute;
  right: 45px;
  bottom: 35px;
  width: 180px;
  height: 115px;
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 24px 55px rgba(24,95,165, 0.20);
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 18px;
  z-index: 4;
}

.vb-chart-card span {
  width: 28px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #8ec5ff, var(--primary));
}

.vb-chart-card span:nth-child(1) { height: 42px; }
.vb-chart-card span:nth-child(2) { height: 62px; }
.vb-chart-card span:nth-child(3) { height: 78px; }
.vb-chart-card span:nth-child(4) { height: 92px; }

.vb-plane {
  position: absolute;
  right: 105px;
  top: 15px;
  font-size: 48px;
  color: #3b82f6;
  transform: rotate(-25deg);
  opacity: 0.85;
}

.vb-feature-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid #dbe7f5;
}

.vb-feature-row div {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #26324d;
  font-weight: 700;
}

.vb-feature-row span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #e8f2ff;
  color: var(--primary);
}

/* RIGHT CARD */

.vb-login-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 70px 48px 20px;
}

.vb-login-card-new {
  width: 100%;
  max-width: 760px;
  min-height: 860px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dce7f5;
  border-radius: 30px;
  box-shadow: 0 35px 100px rgba(15, 23, 42, 0.12);
  padding: 72px 76px 44px;
}

.vb-card-logo-new {
  display: block;
  width: 170px;
  margin: 0 auto 34px;
}

.vb-login-title {
  text-align: center;
  margin-bottom: 42px;
}

.vb-login-title h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.1;
  color: #0b1026;
  font-weight: 900;
  letter-spacing: -0.8px;
}

.vb-login-title p {
  margin: 14px 0 0;
  font-size: 19px;
  color: var(--muted);
  font-weight: 500;
}

.vb-google-btn {
  width: 100%;
  height: 66px;
  border-radius: 12px;
  border: 1px solid #d6e1ef;
  background: var(--card);
  color: #0f172a;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: 0.2s ease;
}

.vb-google-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.vb-google-btn span {
  color: var(--primary);
  font-weight: 900;
}

.vb-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin: 36px 0;
  color: var(--muted);
}

.vb-divider span {
  height: 1px;
  background: #dce7f5;
}

.vb-divider p {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.vb-login-form {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.vb-form-group label {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
  color: #0f172a;
  font-weight: 800;
}

.vb-input-wrap {
  height: 66px;
  border: 1px solid #d6e1ef;
  border-radius: 13px;
  background: var(--card);
  display: flex;
  align-items: center;
  padding: 0 22px;
  gap: 16px;
}

.vb-input-wrap span {
  font-size: 22px;
  color: var(--muted);
}

.vb-input-wrap input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 17px;
  color: #0f172a;
}

.vb-input-wrap input::placeholder {
  color: #94a3b8;
}

.vb-eye-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  opacity: 0.7;
}

.error-message {
  display: block;
  color: var(--danger);
  font-size: 13px;
  margin-top: 8px;
  min-height: 14px;
}

.vb-login-options-new {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 16px;
  color: #475569;
  font-weight: 600;
}

.vb-login-options-new label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vb-login-options-new input {
  width: 22px;
  height: 22px;
  accent-color: var(--primary);
}

.vb-login-options-new a,
.vb-signup-text a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 800;
}

.vb-signin-btn {
  width: 100%;
  height: 70px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: var(--card);
  font-size: 19px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 18px 35px rgba(24,95,165, 0.28);
  margin-top: 6px;
}

.vb-signin-btn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.vb-signup-text {
  text-align: center;
  margin: 36px 0 42px;
  color: var(--muted);
  font-size: 16px;
}

.vb-secure-line {
  border-top: 1px solid #dce7f5;
  padding-top: 28px;
  display: flex;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  font-weight: 700;
  font-size: 16px;
}

/* MOBILE */
@media (max-width: 1100px) {
  .vb-login-page {
    grid-template-columns: 1fr;
  }

  .vb-login-left {
    display: none;
  }

  .vb-login-right {
    padding: 24px;
  }

  .vb-login-card-new {
    min-height: auto;
    padding: 42px 24px;
    border-radius: 22px;
  }

  .vb-login-title h2 {
    font-size: 30px;
  }

  .vb-login-title p {
    font-size: 15px;
  }
} 
.clean-preview {
  margin-top: 34px;
  width: 560px;
  max-width: 92%;
}

.preview-window {
  height: 300px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--card), #f8fbff);
  border: 1px solid #dbe7f5;
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.12);
  padding: 24px;
}

.preview-topbar {
  width: 45%;
  height: 16px;
  border-radius: 99px;
  background: #eaf1fb;
  margin-bottom: 24px;
}

.preview-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.preview-kpis div {
  height: 70px;
  border-radius: 16px;
  background: #eef6ff;
}

.preview-kpis div:nth-child(2) {
  background: #fff7ed;
}

.preview-kpis div:nth-child(3) {
  background: #ecfdf5;
}

.preview-chart {
  height: 90px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(11,100,255,.14), rgba(11,100,255,.03));
  border: 1px solid #e5edf7;
  margin-bottom: 18px;
}

.preview-lines span {
  display: block;
  height: 12px;
  border-radius: 99px;
  background: #eaf1fb;
  margin-bottom: 10px;
}

.preview-lines span:nth-child(1) { width: 80%; }
.preview-lines span:nth-child(2) { width: 62%; }
.preview-lines span:nth-child(3) { width: 44%; }
}

/* ViyaBook Unified Page UI Consistency */
:root {
  --vb-page-bg: var(--bg);
  --vb-card-bg: var(--card);
  --vb-primary: var(--primary);
  --vb-soft-shadow: 0 12px 30px rgba(8, 27, 68, 0.07);
}

html,
body {
  font-family: Inter, Arial, sans-serif !important;
  font-size: 14px !important;
  color: var(--vb-text) !important;
  background: var(--vb-page-bg) !important;
}

body .main,
body .main-content,
body .viya-main,
body main.main {
  background: var(--vb-page-bg) !important;
  padding: 20px 28px !important;
  min-width: 0;
}

body,
p,
span,
label,
input,
select,
textarea {
  font-size: 14px;
}

h1,
.topbar-title h1,
.page-header h1,
.page-head h1,
.customer-head h1,
.invoice-header h1,
.settings-title h1 {
  font-size: 28px !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  color: var(--vb-text);
}

button,
.btn,
.primary-action,
.secondary-action,
.wave-button,
.wave-outline,
.btn-primary,
.btn-light,
.tab-pill {
  font-size: 13px !important;
  font-weight: 700 !important;
}

input,
select,
textarea,
.search,
.product-search,
.wave-input,
.field input,
.field select,
.field textarea {
  font-family: Inter, Arial, sans-serif !important;
  font-size: 14px !important;
  border-color: var(--vb-border) !important;
}

table,
.settings-table,
.data-table,
.items-table {
  font-size: 13px !important;
}

th,
.settings-table th,
.data-table th,
.item-head {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.card,
.summary-card,
.tool-card,
.table-shell,
.table-card,
.settings-menu,
.settings-panel,
.settings-card,
.role-card,
.plan-card,
.invoice-card,
.expense-card,
.report-card,
.kpi-card,
.metric-card,
.stat-card,
.trip-card,
.project-card,
.product-card,
.customer-card,
.panel,
.products-card,
.cart,
.toolbar,
.modal,
.meta-box {
  background: var(--vb-card-bg) !important;
  border-color: var(--vb-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--vb-soft-shadow) !important;
}

.primary-action,
.btn-primary,
.wave-button,
.save,
.pay,
.modal-save {
  background: linear-gradient(135deg, var(--vb-primary), #1d6dff) !important;
  color: var(--card) !important;
}

.table-wrap,
.table-wrapper,
.table-shell,
.items-scroll,
.panel {
  max-width: 100%;
}

.table-wrap,
.table-wrapper,
.items-scroll {
  overflow-x: auto;
}

@media (max-width: 760px) {
  body .main,
  body .main-content,
  body .viya-main,
  body main.main {
    padding: 14px !important;
  }

  h1,
  .topbar-title h1,
  .page-header h1,
  .page-head h1,
  .customer-head h1,
  .invoice-header h1,
  .settings-title h1 {
    font-size: 22px !important;
  }

  .cards,
  .typecards,
  .settings-layout,
  .settings-grid,
  .role-grid,
  .plans-grid,
  .export-grid,
  .business-meta,
  .subscription-meta,
  .layout,
  .form-grid,
  .drawer-info,
  .live-grid,
  .pay-grid,
  .stats-grid,
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .top-actions,
  .header-actions,
  .invoice-actions,
  .bottom-actions,
  .page-actions {
    width: 100%;
  }

  .top-actions .btn,
  .header-actions .btn,
  .invoice-actions .btn,
  .bottom-actions .btn,
  .page-actions .btn,
  .primary-action,
  .secondary-action {
    width: 100%;
  }

  table {
    min-width: 680px;
  }
}

/* Shared shell should provide the single app header. Legacy page topbars are hidden,
   while page headings/action sections stay visible. */
body:has(.viya-app-header) .main-content > .topbar,
body:has(.viya-app-header) main.main > .topbar,
body:has(.viya-app-header) .viya-main > .topbar,
body:has(.viya-app-header) .main-content > .dashboard-topbar {
  display: none !important;
}

.viya-app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(228, 235, 245, 0.92) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 10px 12px !important;
}

.viya-header-search,
.viya-profile-trigger,
.viya-icon-btn {
  border-color: var(--vb-border) !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

.sidebar-nav a.active,
.viya-sidebar-nav a.active,
body .nav a.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  box-shadow: 0 14px 30px rgba(24,95,165, 0.28) !important;
}

.card,
.summary-card,
.tool-card,
.table-card,
.settings-card,
.panel,
.products-card,
.cart,
.invoice-card,
.expense-card,
.report-card,
.kpi-card,
.metric-card,
.stat-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover,
.summary-card:hover,
.tool-card:hover,
.table-card:hover,
.settings-card:hover,
.panel:hover,
.products-card:hover,
.cart:hover,
.invoice-card:hover,
.expense-card:hover,
.report-card:hover,
.kpi-card:hover,
.metric-card:hover,
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.1) !important;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-logo-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.brand-text h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--card);
  line-height: 1.1;
}

.brand-text p {
  margin: 3px 0 0;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.2px;
}

/* Final responsive layout layer for the full ViyaBook app. */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;overflow-x:clip;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;overflow-x:clip !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

.app,
.dashboard-shell,
.layout,
.page-layout {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.main,
.main-content,
.viya-main,
.dashboard-content,
.page-content,
.workspace,
.content,
.panel,
.card,
.invoice-card,
.products-card,
.table-card,
.menu-panel,
.order-panel,
.items-card,
.notes-totals {
  min-width: 0 !important;
  max-width: 100%;
}

.topbar,
.viya-app-header,
.page-head,
.head,
.panel-head,
.invoice-header,
.customer-head,
.settings-title,
.welcome {
  min-width: 0;
}

.topbar h1,
.page-head h1,
.head h1,
.invoice-header h1,
.customer-head h1,
.settings-title h1,
.brand-name,
.brand-text h2,
.sidebar-brand,
.viya-app-title {
  overflow-wrap: anywhere;
}

.topbar,
.head-actions,
.actions,
.page-actions,
.invoice-actions,
.bottom-actions,
.quick-actions,
.filters,
.filter-grid,
.tabs,
.category-row,
.pages {
  max-width: 100%;
}

.tabs,
.category-row,
.pages,
.view-toggle {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap,
.table-wrapper,
.table-shell,
.items-scroll,
.detail-table-card,
.table-panel,
.panel:has(table) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

table,
.settings-table,
.data-table,
.items-table,
.table-modern,
.pos-table {
  width: 100%;
}

.items-table,
.data-table,
.settings-table,
.table-modern,
.pos-table {
  min-width: 720px;
}

input,
select,
textarea,
button,
.btn,
.top-search,
.search,
.product-search,
.customer-select,
.filter-input,
.filter-select {
  max-width: 100%;
}

button,
.btn,
.top-action,
.top-btn,
.icon-btn,
.page-btn,
.edit-btn,
.dots,
.row-btn {
  touch-action: manipulation;
}

.summary-grid,
.kpi-grid,
.stats-grid,
.cards,
.quick,
.quick-actions,
.type-grid,
.metrics,
.project-grid,
.invoice-grid,
.customer-grid,
.product-grid,
.grid-view,
.grid-2,
.grid-3,
.grid-4,
.export-grid,
.plan-grid,
.plans-grid,
.role-grid,
.role-cards,
.settings-grid,
.form-grid,
.modal-grid,
.live-grid,
.pay-grid {
  min-width: 0;
}

.summary-card,
.summary,
.card,
.panel,
.invoice-card,
.project-card,
.trip-card,
.customer-card,
.product-card,
.grid-card {
  min-width: 0;
}

@media (max-width: 1440px) {
  body .main,
  body .main-content,
  body .viya-main,
  body main.main {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .app > .main .content {
    gap: 20px !important;
  }

  .app > .main .order-panel {
    width: 100%;
  }

  .app > .main .product-area {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 1200px) {
  .dashboard-shell,
  .app {
    grid-template-columns: var(--vb-sidebar-w, 220px) minmax(0, 1fr) !important;
  }

  body .main,
  body .main-content,
  body .viya-main,
  body main.main {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .summary-grid,
  .kpi-grid,
  .stats-grid,
  .cards,
  .quick,
  .quick-actions,
  .metrics,
  .type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .project-grid,
  .invoice-grid,
  .customer-grid,
  .product-grid,
  .grid-view {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .grid-2,
  .content-grid,
  .tables-grid,
  .settings-layout,
  .app > .main .content,
  .dashboard-shell > .main-content .grid-top,
  .dashboard-shell > .main-content .notes-totals {
    grid-template-columns: 1fr !important;
  }

  .dashboard-shell > .main-content .notes-box {
    border-right: 0 !important;
    border-bottom: 1px solid var(--vb-border, var(--border)) !important;
  }

  .app > .main .order-panel {
    position: static !important;
  }
}

@media (max-width: 992px) {
  .dashboard-shell,
  .app {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  .sidebar,
  .app-sidebar,
  .viya-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1000 !important;
    width: min(320px, 86vw) !important;
    max-width: 86vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    transform: translateX(-105%) !important;
    transition: transform 0.3s ease !important;
    display: flex !important;
  }

  .sidebar.active,
  .sidebar.open,
  .app-sidebar.active,
  .app-sidebar.open,
  .viya-sidebar.active,
  .viya-sidebar.open,
  body.sidebar-open .sidebar,
  body.sidebar-open .app-sidebar,
  body.sidebar-open .viya-sidebar {
    transform: translateX(0) !important;
  }

  .sidebar-overlay.active,
  body.sidebar-open .sidebar-overlay {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .main,
  .main-content,
  .viya-main,
  .dashboard-content,
  .page-content {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .topbar,
  .viya-app-header {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 12px !important;
  }

  .topbar .profile,
  .topbar .user-pill {
    min-width: 0 !important;
  }

  .app > .main .topbar {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 235px) 56px 56px !important;
  }

  .app > .main .topbar .profile {
    grid-column: 1 / -1 !important;
  }

  .app > .main .summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .app > .main .product-area {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-shell > .main-content .invoice-details {
    grid-template-columns: 132px minmax(0, 1fr) !important;
  }

  .filters,
  .filter-grid,
  .panel-head {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  body .main,
  body .main-content,
  body .viya-main,
  body main.main {
    padding: 14px !important;
  }

  .topbar,
  .viya-app-header,
  .page-head,
  .head,
  .welcome,
  .panel-head,
  .invoice-header,
  .customer-head {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .topbar > *,
  .viya-app-header > *,
  .page-head > *,
  .head > *,
  .welcome > *,
  .panel-head > *,
  .invoice-header > *,
  .customer-head > * {
    min-width: 0;
  }

  .top-search,
  .search,
  .viya-header-search {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .head-actions,
  .actions,
  .page-actions,
  .invoice-actions,
  .bottom-actions,
  .quick-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: stretch !important;
  }

  .head-actions .btn,
  .actions .btn,
  .page-actions .btn,
  .invoice-actions .btn,
  .bottom-actions .btn,
  .quick-actions button,
  .quick-actions .btn {
    flex: 1 1 170px !important;
  }

  .summary-grid,
  .kpi-grid,
  .stats-grid,
  .cards,
  .quick,
  .quick-actions,
  .metrics,
  .type-grid,
  .project-grid,
  .invoice-grid,
  .customer-grid,
  .product-grid,
  .grid-view,
  .grid-2,
  .grid-3,
  .grid-4,
  .export-grid,
  .plan-grid,
  .plans-grid,
  .role-grid,
  .role-cards,
  .settings-grid,
  .form-grid,
  .modal-grid,
  .live-grid,
  .pay-grid,
  .filters,
  .filter-grid,
  .bb-grid,
  .content-grid,
  .tables-grid,
  .detail-grid,
  .donut-layout {
    grid-template-columns: 1fr !important;
  }

  .field.full,
  .full,
  .settings-grid .full-width,
  .business-profile-grid .full-width {
    grid-column: 1 / -1 !important;
  }

  .app > .main .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 54px 54px !important;
  }

  .app > .main .table-select,
  .app > .main .profile {
    grid-column: 1 / -1 !important;
  }

  .app > .main .summary {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .app > .main .content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .app > .main .product-area,
  .app > .main .product-area.line {
    grid-template-columns: 1fr !important;
    min-height: 360px !important;
  }

  .app > .main .product-area.line .product-card {
    grid-template-columns: 110px minmax(0, 1fr) !important;
  }

  .app > .main .customer-row,
  .app > .main .discount-row,
  .app > .main .received-row,
  .app > .main .action-row,
  .dashboard-shell > .main-content .invoice-details,
  .dashboard-shell > .main-content .total-line {
    grid-template-columns: 1fr !important;
  }

  .app > .main .payment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-shell > .main-content .footer-actions {
    flex-direction: column !important;
  }

  .modal-card,
  .modal {
    max-width: calc(100vw - 28px) !important;
  }

  table,
  .items-table,
  .data-table,
  .settings-table,
  .table-modern,
  .pos-table {
    min-width: 680px !important;
  }
}

@media (max-width: 480px) {
  body .main,
  body .main-content,
  body .viya-main,
  body main.main {
    padding: 12px !important;
  }

  h1,
  .topbar-title h1,
  .page-header h1,
  .page-head h1,
  .customer-head h1,
  .invoice-header h1,
  .settings-title h1 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  .sidebar,
  .app-sidebar,
  .viya-sidebar {
    width: min(288px, 84vw) !important;
    max-width: 84vw !important;
  }

  .app > .main .topbar {
    grid-template-columns: minmax(0, 1fr) 48px 48px !important;
    gap: 10px !important;
  }

  .app > .main .top-search,
  .app > .main .table-select,
  .top-search,
  .search {
    height: 52px !important;
  }

  .app > .main .top-action,
  .top-btn,
  .icon-btn {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
  }

  .summary-card,
  .app > .main .summary-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
  }

  .app > .main .product-img {
    height: 128px !important;
  }

  .app > .main .product-search-row {
    grid-template-columns: minmax(0, 1fr) 48px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .app > .main .category-row {
    padding: 12px !important;
    gap: 10px !important;
  }

  .app > .main .order-inner,
  .app > .main .payment,
  .card-pad,
  .totals-box,
  .notes-box {
    padding: 16px !important;
  }

  .app > .main .order-item {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  .app > .main .qty-ctrl,
  .app > .main .remove-item {
    grid-column: 2 !important;
  }

  .app > .main .action-row,
  .modal-actions,
  .footer-actions,
  .bottom-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .app > .main .action-row button,
  .modal-actions button,
  .footer-actions button,
  .bottom-actions button,
  .btn {
    width: 100%;
  }

  .view-toggle {
    width: 100%;
  }

  .view-toggle button {
    flex: 1 0 auto;
    justify-content: center;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  table,
  .items-table,
  .data-table,
  .settings-table,
  .table-modern,
  .pos-table {
    min-width: 640px !important;
  }
}

@media (max-width: 360px) {
  body .main,
  body .main-content,
  body .viya-main,
  body main.main {
    padding: 10px !important;
  }

  h1,
  .page-head h1,
  .invoice-header h1,
  .customer-head h1,
  .settings-title h1 {
    font-size: 20px !important;
  }

  .sidebar,
  .app-sidebar,
  .viya-sidebar {
    width: min(270px, 86vw) !important;
    max-width: 86vw !important;
  }

  .app > .main .topbar {
    grid-template-columns: minmax(0, 1fr) 44px 44px !important;
  }

  .app > .main .top-action,
  .top-btn,
  .icon-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  .app > .main .payment-grid {
    grid-template-columns: 1fr !important;
  }

  .summary-card,
  .app > .main .summary-card,
  .card,
  .panel,
  .table-card,
  .invoice-card,
  .products-card {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  table,
  .items-table,
  .data-table,
  .settings-table,
  .table-modern,
  .pos-table {
    min-width: 600px !important;
  }
}

/* Final app shell guard: all authenticated pages keep the same sidebar/main flow. */
body:has(> .app),
body.viya-sidebar-page {
  overflow-x: hidden !important;
}

body:has(> .app) > .app,
body.viya-sidebar-page .viya-layout,
.dashboard-shell {
  max-width: 100% !important;
  min-width: 0 !important;
}

@media (min-width: 993px) {
  body:has(> .app) > .app,
  body.viya-sidebar-page .viya-layout,
  .dashboard-shell {
    display: grid !important;
    grid-template-columns: var(--vb-sidebar-w, 220px) minmax(0, 1fr) !important;
  }

  body:has(> .app) > .app > .sidebar,
  body.viya-sidebar-page .viya-layout > .sidebar,
  body.viya-sidebar-page .viya-layout > .viya-sidebar,
  .dashboard-shell > .sidebar {
    grid-column: 1 !important;
    width: var(--vb-sidebar-w, 220px) !important;
    min-width: var(--vb-sidebar-w, 220px) !important;
    max-width: var(--vb-sidebar-w, 220px) !important;
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    transform: none !important;
  }

  body:has(> .app) > .app > .main,
  body.viya-sidebar-page .viya-layout > .viya-main,
  .dashboard-shell > .main-content {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 992px) {
  body:has(> .app) > .app,
  body.viya-sidebar-page .viya-layout,
  .dashboard-shell {
    display: block !important;
  }

  body:has(> .app) > .app > .main,
  body.viya-sidebar-page .viya-layout > .viya-main,
  .dashboard-shell > .main-content {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ViyaBook shared Add/Edit modal system */
.vb-modal-overlay,
.modal-bg,
.project-modal-bg,
.viya-business-modal,
.modal.show,
.modal.open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(31, 41, 55, 0.46) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.vb-modal-overlay.open,
.vb-modal-overlay.show,
.modal-bg.open,
.project-modal-bg.open,
.viya-business-modal.open,
.modal.show,
.modal.open {
  display: flex !important;
}

.vb-modal,
.modal-card,
.modal-bg > .modal,
.trip-modal-card,
.project-modal,
.viya-business-card,
.modal.show > .modal-card,
.modal.open > .modal-card,
.modal-content {
  width: min(980px, 100%) !important;
  max-height: min(92vh, 860px) !important;
  overflow: auto !important;
  background: #eef1f5 !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  border-radius: 28px !important;
  box-shadow: 0 34px 90px rgba(15, 23, 42, 0.28) !important;
  padding: 30px !important;
  color: #0f172a !important;
}

.vb-modal-header,
.modal-head,
.modal-header,
.project-modal-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 22px !important;
}

.vb-modal-header h2,
.modal-head h2,
.modal-header h2,
.project-modal-head h2,
.viya-business-card h2 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: clamp(22px, 2vw, 30px) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.vb-form-grid,
.form-grid,
.modal-grid,
.project-modal-grid,
.viya-business-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.vb-form-group,
.field,
.modal-field,
.project-modal-field,
.viya-business-field {
  display: grid !important;
  gap: 8px !important;
}

.vb-form-group.full,
.field.full,
.modal-field.full,
.project-modal-field.full,
.viya-business-field.full {
  grid-column: 1 / -1 !important;
}

.vb-form-group label,
.field label,
.modal-field label,
.project-modal-field label,
.viya-business-field label {
  color: #172033 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.vb-modal input,
.vb-modal select,
.vb-modal textarea,
.modal-card input,
.modal-card select,
.modal-card textarea,
.modal-bg > .modal input,
.modal-bg > .modal select,
.modal-bg > .modal textarea,
.trip-modal-card input,
.trip-modal-card select,
.trip-modal-card textarea,
.project-modal input,
.project-modal select,
.project-modal textarea,
.viya-business-card input,
.viya-business-card select,
.viya-business-card textarea,
.modal-content input,
.modal-content select,
.modal-content textarea {
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid #d5deea !important;
  border-radius: 14px !important;
  background: var(--card) !important;
  color: #0f172a !important;
  padding: 12px 14px !important;
  font: inherit !important;
  font-weight: 750 !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

.vb-modal textarea,
.modal-card textarea,
.modal-bg > .modal textarea,
.trip-modal-card textarea,
.project-modal textarea,
.viya-business-card textarea,
.modal-content textarea {
  min-height: 104px !important;
  resize: vertical !important;
}

.vb-modal input:focus,
.vb-modal select:focus,
.vb-modal textarea:focus,
.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus,
.modal-bg > .modal input:focus,
.modal-bg > .modal select:focus,
.modal-bg > .modal textarea:focus,
.trip-modal-card input:focus,
.trip-modal-card select:focus,
.trip-modal-card textarea:focus,
.project-modal input:focus,
.project-modal select:focus,
.project-modal textarea:focus,
.viya-business-card input:focus,
.viya-business-card select:focus,
.viya-business-card textarea:focus,
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(24, 95, 165, 0.13) !important;
}

.vb-modal-actions,
.modal-actions,
.project-modal-actions,
.viya-business-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

.vb-modal-actions button,
.modal-actions button,
.project-modal-actions button,
.viya-business-actions button {
  min-height: 46px !important;
  border-radius: 14px !important;
  padding: 0 18px !important;
  font-weight: 900 !important;
}

.vb-modal-actions .btn-primary,
.modal-actions .btn-primary,
.project-modal-save,
.viya-business-primary {
  border: 0 !important;
  color: var(--card) !important;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  box-shadow: 0 18px 38px rgba(37, 99, 255, 0.22) !important;
}

.vb-modal-actions .btn-light,
.modal-actions .btn-light,
.project-modal-cancel,
.viya-business-secondary {
  background: var(--card) !important;
  color: #0f172a !important;
  border: 1px solid #d5deea !important;
}

.close,
.close-btn,
.modal-close,
.project-modal-close,
.vb-modal-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border: 1px solid #d5deea !important;
  border-radius: 14px !important;
  background: var(--card) !important;
  color: #0f172a !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

[data-theme="dark"] .vb-modal-overlay,
[data-theme="dark"] .modal-bg,
[data-theme="dark"] .project-modal-bg,
[data-theme="dark"] .viya-business-modal,
[data-theme="dark"] .modal.show,
[data-theme="dark"] .modal.open {
  background: rgba(2, 6, 23, 0.68) !important;
}

[data-theme="dark"] .vb-modal,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .modal-bg > .modal,
[data-theme="dark"] .trip-modal-card,
[data-theme="dark"] .project-modal,
[data-theme="dark"] .viya-business-card,
[data-theme="dark"] .modal.show > .modal-card,
[data-theme="dark"] .modal.open > .modal-card,
[data-theme="dark"] .modal-content {
  background: rgba(15, 23, 42, 0.96) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #f8fafc !important;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.52) !important;
}

[data-theme="dark"] .vb-modal-header h2,
[data-theme="dark"] .modal-head h2,
[data-theme="dark"] .modal-header h2,
[data-theme="dark"] .project-modal-head h2,
[data-theme="dark"] .viya-business-card h2 {
  color: #f8fafc !important;
}

[data-theme="dark"] .vb-form-group label,
[data-theme="dark"] .field label,
[data-theme="dark"] .modal-field label,
[data-theme="dark"] .project-modal-field label,
[data-theme="dark"] .viya-business-field label {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .vb-modal input,
[data-theme="dark"] .vb-modal select,
[data-theme="dark"] .vb-modal textarea,
[data-theme="dark"] .modal-card input,
[data-theme="dark"] .modal-card select,
[data-theme="dark"] .modal-card textarea,
[data-theme="dark"] .modal-bg > .modal input,
[data-theme="dark"] .modal-bg > .modal select,
[data-theme="dark"] .modal-bg > .modal textarea,
[data-theme="dark"] .trip-modal-card input,
[data-theme="dark"] .trip-modal-card select,
[data-theme="dark"] .trip-modal-card textarea,
[data-theme="dark"] .project-modal input,
[data-theme="dark"] .project-modal select,
[data-theme="dark"] .project-modal textarea,
[data-theme="dark"] .viya-business-card input,
[data-theme="dark"] .viya-business-card select,
[data-theme="dark"] .viya-business-card textarea,
[data-theme="dark"] .modal-content input,
[data-theme="dark"] .modal-content select,
[data-theme="dark"] .modal-content textarea {
  background: var(--card) !important;
  color: #0f172a !important;
  border-color: rgba(203, 213, 225, 0.95) !important;
}

[data-theme="dark"] .close,
[data-theme="dark"] .close-btn,
[data-theme="dark"] .modal-close,
[data-theme="dark"] .project-modal-close,
[data-theme="dark"] .vb-modal-close,
[data-theme="dark"] .vb-modal-actions .btn-light,
[data-theme="dark"] .modal-actions .btn-light,
[data-theme="dark"] .project-modal-cancel,
[data-theme="dark"] .viya-business-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

@media (max-width: 720px) {
  .vb-modal-overlay,
  .modal-bg,
  .project-modal-bg,
  .viya-business-modal,
  .modal.show,
  .modal.open {
    align-items: flex-start !important;
    padding: 12px !important;
  }

  .vb-modal,
  .modal-card,
  .modal-bg > .modal,
  .trip-modal-card,
  .project-modal,
  .viya-business-card,
  .modal.show > .modal-card,
  .modal.open > .modal-card,
  .modal-content {
    width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 22px !important;
    padding: 20px !important;
  }

  .vb-form-grid,
  .form-grid,
  .modal-grid,
  .project-modal-grid,
  .viya-business-grid {
    grid-template-columns: 1fr !important;
  }

  .vb-modal-actions,
  .modal-actions,
  .project-modal-actions,
  .viya-business-actions {
    flex-direction: column-reverse !important;
  }

  .vb-modal-actions button,
  .modal-actions button,
  .project-modal-actions button,
  .viya-business-actions button {
    width: 100% !important;
  }
}

/* Professional searchable customer/product dropdowns */
.vb-search-select {
  position: relative;
  width: 100%;
}

.vb-native-select-hidden {
  display: none !important;
}

.vb-search-input {
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid var(--border, #dfe8f5) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #0f172a !important;
  padding: 0 14px !important;
  font: inherit !important;
  font-weight: 850 !important;
  outline: none !important;
}

.vb-search-input:focus {
  border-color: #8bbdff !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 255, .1) !important;
}

.vb-select-popover {
  display: none;
  position: absolute;
  z-index: 100020;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid #dfe8f5;
  border-radius: 16px;
  box-shadow: 0 24px 55px rgba(15, 23, 42, .18);
}

.vb-select-popover.open {
  display: block;
}

.vb-select-search-label {
  padding: 8px 10px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.vb-select-row {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  text-align: left;
  color: #0f172a;
  cursor: pointer;
}

.vb-select-row:hover,
.vb-select-row:focus {
  background: #f4f8ff;
}

.vb-select-row strong {
  display: block;
  font-size: 14px;
  font-weight: 950;
}

.vb-select-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.vb-item-row b {
  color: #0f6ff7;
  white-space: nowrap;
}

.vb-select-empty {
  padding: 20px 12px;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

.vb-select-create {
  width: 100%;
  min-height: 46px;
  border: 1px dashed #9fc2ff;
  background: #f8fbff;
  color: #0f6ff7;
  border-radius: 12px;
  font-weight: 950;
  cursor: pointer;
  margin-top: 6px;
}

[data-theme="dark"] .vb-search-input {
  background: #fff !important;
  color: #0f172a !important;
  border-color: rgba(203, 213, 225, .95) !important;
}

[data-theme="dark"] .vb-select-popover {
  background: rgba(15, 23, 42, .98);
  border-color: rgba(148, 163, 184, .2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

[data-theme="dark"] .vb-select-row {
  color: #f8fafc;
}

[data-theme="dark"] .vb-select-row:hover,
[data-theme="dark"] .vb-select-row:focus {
  background: rgba(59, 130, 246, .14);
}

[data-theme="dark"] .vb-select-row small,
[data-theme="dark"] .vb-select-search-label,
[data-theme="dark"] .vb-select-empty {
  color: #94a3b8;
}

[data-theme="dark"] .vb-select-create {
  background: rgba(37, 99, 255, .12);
  border-color: rgba(96, 165, 250, .45);
  color: #93c5fd;
}


/* ======= layout.css ======= */
/* =======================================================
   ViyaBook layout.css  Shared Design System
   Load order: styles.css  layout.css  responsive.css
   Uses !important to enforce consistency over per-page
   inline styles without touching page functionality.
   ======================================================= */

/* -------------------------------------------------------
   1. DESIGN TOKENS  single source of truth
------------------------------------------------------- */
:root {
  /* Colors */
  --vb-bg:       var(--bg);
  --vb-card:     var(--card);
  --vb-text:     var(--text);
  --vb-muted:    var(--muted);
  --vb-border:   var(--border);
  --vb-blue:     var(--primary);
  --vb-green:    var(--success);
  --vb-red:      var(--danger);
  --vb-orange:   var(--warning);
  --vb-purple:   var(--primary);

  /* Shadows */
  --vb-shadow:   0 14px 40px rgba(15, 23, 42, 0.07);
  --vb-shadow-sm:0 8px 24px rgba(15, 23, 42, 0.05);

  /* Shape */
  --vb-radius:   16px;
  --vb-radius-sm:10px;
  --vb-radius-lg:20px;

  /* Layout */
  --vb-sidebar-w:220px;
  --vb-main-pad: 24px 28px;

  /* Search */
  --vb-search-h:      42px;
  --vb-search-border: #e5edf7;
  --vb-search-shadow: 0 2px 8px rgba(15,23,42,.06);
  --vb-search-ph:     #94a3b8;
  --vb-search-icon:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------
   2. HTML / BODY  prevent white flash, consistent base
------------------------------------------------------- */
html {
  background: var(--vb-bg) !important;
  overflow-x: hidden;overflow-x:clip;
}

body {
  margin: 0 !important;
  background: var(--vb-bg) !important;
  color: var(--vb-text) !important;
  font-size: 14px !important;
  font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;overflow-x:clip;
}

/* -------------------------------------------------------
   3. LAYOUT SHELL  ensure min-height; display/columns
   are managed by styles.css (grid at 993px) and
   responsive.css (drawer at <1024px). We only enforce
   min-height here so pages don't collapse.
------------------------------------------------------- */
.app,
.dashboard-shell,
.shell {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

/* -------------------------------------------------------
   4. SIDEBAR  reserve background even before JS fills it
------------------------------------------------------- */
.app > aside.sidebar,
.dashboard-shell > aside.sidebar,
.shell > .side,
.shell > aside.sidebar {
  width: var(--vb-sidebar-w) !important;
  min-width: var(--vb-sidebar-w) !important;
  max-width: var(--vb-sidebar-w) !important;
  flex-shrink: 0 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

/* -------------------------------------------------------
   5. MAIN CONTENT  consistent padding and width
------------------------------------------------------- */
.main,
.main-content,
.shell > main {
  padding: var(--vb-main-pad) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* -------------------------------------------------------
   6. TOPBAR  consistent spacing below header
------------------------------------------------------- */
.topbar {
  min-height: 52px !important;
  margin-bottom: 24px !important;
}

/* -------------------------------------------------------
   6b. SEARCH BARS — global modernized design
   42px clean pill, single border, icon inside left.
   Handles 5 markup patterns found across all pages:
     1. label.search > input          (most pages)
     2. label/div.search-box > input  (customers, trips, etc.)
     3. div.top-search > span + input (create-invoice, edit-invoice)
     4. input.search                  (dashboard, quotation, etc.)
     5. .panel-head / .filter-bar > input  (approval-center, etc.)
   Uses !important throughout + same selectors as styles.css
   so later cascade in load order always wins.
------------------------------------------------------- */

/* === PATTERN A: WRAPPER containers === */
/* Duplicate .app > .main selectors from styles.css to beat its 52px !important */
.app > .main .top-search,
.app > .main .search,
.top-search:not(input),
.search:not(input):not(textarea),
.search-box:not(input):not(textarea),
.filter-search:not(input):not(textarea),
.table-search:not(input):not(textarea),
.search-main:not(input):not(textarea),
.search-wrap {
  display:          flex !important;
  align-items:      center !important;
  height:           42px !important;
  max-width:        420px !important;
  width:            100% !important;
  border-radius:    14px !important;
  background:       #fff var(--vb-search-icon) no-repeat 13px center !important;
  background-size:  16px 16px !important;
  border:           1px solid #e5edf7 !important;
  box-shadow:       0 6px 18px rgba(15,23,42,.05) !important;
  padding:          0 14px 0 38px !important;
  gap:              0 !important;
  overflow:         hidden !important;
  box-sizing:       border-box !important;
}

/* Suppress any pre-existing icon child (SVG / icon span) — icon is now CSS bg-image */
.search:not(input) > svg:first-child,
.search-box:not(input) > svg:first-child,
.top-search > svg:first-child,
.search:not(input) > span:first-child,
.search-box:not(input) > span:first-child,
.top-search > span:first-child {
  display: none !important;
}

/* Inner <input> inside any wrapper — no border, fills container */
.app > .main .top-search input,
.app > .main .search input,
.top-search input,
.search:not(input) input,
.search-box:not(input) input,
.filter-search:not(input) input,
.table-search:not(input) input,
.search-main:not(input) input,
.search-wrap input {
  flex:          1 !important;
  height:        100% !important;
  border:        none !important;
  outline:       none !important;
  box-shadow:    none !important;
  background:    transparent !important;
  font-size:     14px !important;
  font-weight:   600 !important;
  color:         #0f172a !important;
  width:         100% !important;
  min-width:     0 !important;
  padding:       0 !important;
  border-radius: 0 !important;
}
.top-search input::placeholder,
.search:not(input) input::placeholder,
.search-box:not(input) input::placeholder,
.filter-search:not(input) input::placeholder,
.table-search:not(input) input::placeholder,
.search-wrap input::placeholder {
  color:       #94a3b8 !important;
  font-weight: 600 !important;
}

/* === PATTERN B: DIRECT INPUT elements === */
input.search,
input.top-search,
input.search-box,
input.filter-search,
input.table-search {
  display:          block !important;
  height:           42px !important;
  max-width:        420px !important;
  width:            100% !important;
  border-radius:    14px !important;
  background:       #fff var(--vb-search-icon) no-repeat 13px center !important;
  background-size:  16px 16px !important;
  border:           1px solid #e5edf7 !important;
  box-shadow:       0 6px 18px rgba(15,23,42,.05) !important;
  padding:          0 14px 0 38px !important;
  font-size:        14px !important;
  font-weight:      600 !important;
  color:            #0f172a !important;
  outline:          none !important;
  box-sizing:       border-box !important;
}
input.search::placeholder,
input.top-search::placeholder,
input.search-box::placeholder,
input.filter-search::placeholder,
input.table-search::placeholder {
  color:       #94a3b8 !important;
  font-weight: 600 !important;
}

/* === PATTERN 5: Panel-head / filter-bar search inputs (classless) === */
.panel-head > input[type="text"],
.panel-head > input[type="search"],
.panel-head > input:not([type="checkbox"]):not([type="radio"]):not([type="number"]):not([type="button"]):not([type="submit"]):not([type="hidden"]),
.filter-bar > input[type="text"],
.filter-bar > input[type="search"],
.filter-bar > input:not([type="checkbox"]):not([type="radio"]):not([type="number"]):not([type="button"]):not([type="submit"]):not([type="hidden"]) {
  height:          42px !important;
  border-radius:   14px !important;
  background:      #fff var(--vb-search-icon) no-repeat 13px center !important;
  background-size: 15px 15px !important;
  border:          1px solid #e5edf7 !important;
  box-shadow:      0 6px 18px rgba(15,23,42,.05) !important;
  padding:         0 14px 0 36px !important;
  font-size:       13px !important;
  font-weight:     600 !important;
  color:           #0f172a !important;
  outline:         none !important;
  font-family:     inherit !important;
  box-sizing:      border-box !important;
}
.panel-head > input::placeholder,
.filter-bar > input::placeholder {
  color:       #94a3b8 !important;
  font-weight: 600 !important;
}

/* === PATTERN C: .vb-search / .vb-filter-search (list-page filter searches) ===
   Quotations, Customers, Products, Expenses, Trips, Projects, Staffs (.vb-filter-
   search-wrap > input.vb-filter-search + .search-icon) and gas/approval/settings
   (.vb-search > i + input) render their OWN icon element, NOT a CSS background-
   image — so we must NOT add a bg-image here (that would show two icons). Instead
   we position the existing icon on the left and pad the input so the placeholder /
   typed text never sits under it. Mirrors the canonical rule in vb-global.css and
   forces it with !important so it wins even if another rule zeroes the padding.
   OVERLAP + RTL only — height, border and colours are left to the existing rules. */
.vb-search,
.vb-filter-search-wrap { position: relative !important; }
.vb-search > i,
.vb-search > svg,
.vb-search > .search-icon,
.vb-filter-search-wrap > i,
.vb-filter-search-wrap > svg,
.vb-filter-search-wrap > .search-icon {
  position:      absolute !important;
  left:          14px !important;
  right:         auto !important;
  top:           50% !important;
  transform:     translateY(-50%) !important;
  pointer-events: none !important;
}
.vb-search input,
input.vb-filter-search {
  padding:    0 14px 0 44px !important;
  box-sizing: border-box !important;
}
/* RTL / Dhivehi — icon flips to the RIGHT, padding flips so it never overlaps Thaana.
   layout.js sets BOTH html[lang="dv"] and body.lang-dv, so cover both. */
html[lang="dv"] .vb-search > i,
html[lang="dv"] .vb-search > svg,
html[lang="dv"] .vb-search > .search-icon,
html[lang="dv"] .vb-filter-search-wrap > i,
html[lang="dv"] .vb-filter-search-wrap > svg,
html[lang="dv"] .vb-filter-search-wrap > .search-icon,
body.lang-dv .vb-search > i,
body.lang-dv .vb-search > svg,
body.lang-dv .vb-search > .search-icon,
body.lang-dv .vb-filter-search-wrap > i,
body.lang-dv .vb-filter-search-wrap > svg,
body.lang-dv .vb-filter-search-wrap > .search-icon {
  left:  auto !important;
  right: 14px !important;
}
html[lang="dv"] .vb-search input,
html[lang="dv"] input.vb-filter-search,
body.lang-dv .vb-search input,
body.lang-dv input.vb-filter-search {
  padding: 0 44px 0 14px !important;
}

/* === FOCUS STATE — all patterns === */
.app > .main .top-search:focus-within,
.app > .main .search:focus-within,
.top-search:not(input):focus-within,
.search:not(input):focus-within,
.search-box:not(input):focus-within,
.filter-search:not(input):focus-within,
.table-search:not(input):focus-within,
.search-wrap:focus-within,
input.search:focus,
input.top-search:focus,
input.search-box:focus,
input.filter-search:focus,
input.table-search:focus,
.panel-head > input:focus,
.filter-bar > input:focus {
  border-color: #93c5fd !important;
  box-shadow:   0 0 0 3px rgba(37,99,255,.10), 0 6px 18px rgba(15,23,42,.05) !important;
  outline:      none !important;
}

/* Icon buttons in topbar */
.icon-btn,
.top-btn,
.top-action {
  height: 52px;
  border-radius: 14px !important;
  border: 1px solid var(--vb-border) !important;
  background: #fff !important;
  box-shadow: var(--vb-shadow-sm) !important;
}

/* User pill in topbar */
.user-pill,
.profile {
  height: 52px;
  border-radius: 14px !important;
  border: 1px solid var(--vb-border) !important;
  background: #fff !important;
}

/* -------------------------------------------------------
   7. PAGE HEADING  consistent title sizes
------------------------------------------------------- */
h1 {
  font-size: 28px !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.25 !important;
  margin: 0 0 8px !important;
  color: var(--vb-text) !important;
}

.page-head,
.welcome {
  margin-bottom: 22px !important;
}

.sub,
.subtitle {
  font-size: 14px !important;
  color: var(--vb-muted) !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.breadcrumb,
.crumb {
  font-size: 13px !important;
  color: #475569 !important;
  font-weight: 800 !important;
  margin-bottom: 10px !important;
}

/* -------------------------------------------------------
   8. CARDS & PANELS  unified style
------------------------------------------------------- */
.card,
.panel,
.table-card,
.products-card,
.invoice-card,
.items-card {
  background: var(--vb-card) !important;
  border: 1px solid var(--vb-border) !important;
  border-radius: var(--vb-radius) !important;
  box-shadow: var(--vb-shadow) !important;
}

/* Summary / KPI cards */
.summary-card,
.metric,
.kpi-card,
.stat-card,
.type-card {
  background: var(--vb-card) !important;
  border: 1px solid var(--vb-border) !important;
  border-radius: var(--vb-radius) !important;
  box-shadow: var(--vb-shadow) !important;
}

/* Card internal padding  only for .card and .panel,
   not table-card which has its own overflow:hidden */
.card:not(.table-card):not(.items-card):not(.invoice-card) {
  padding: 18px !important;
}

.panel {
  padding: 18px !important;
}

/* Panel heading */
.panel-head {
  margin-bottom: 16px !important;
}

.panel-head h2,
.panel > h2:first-child {
  font-size: 17px !important;
  font-weight: 950 !important;
  margin: 0 !important;
}

/* -------------------------------------------------------
   9. BUTTONS  unified design system  (Tabler Icons ready)
------------------------------------------------------- */

/* ── Base ── */
.btn,
button.btn,
a.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s !important;
  border: none !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
.btn:active  { transform: scale(0.97) !important; }
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(29,158,117,0.25) !important; outline: none !important; }
.btn i       { font-size: 16px !important; line-height: 1 !important; flex-shrink: 0; }
.btn:disabled,
.btn[disabled] { opacity: 0.45 !important; cursor: not-allowed !important; transform: none !important; pointer-events: none; }

/* ── Variants ── */
.btn-primary {
  background: #1D9E75 !important;
  color: #fff !important;
  border: none !important;
}
.btn-primary:hover:not(:disabled) { background: #0F6E56 !important; }

.btn-secondary {
  background: #f5f5f3 !important;
  color: #1a1a18 !important;
  border: 0.5px solid #c8c6bc !important;
}
.btn-secondary:hover:not(:disabled) { background: #ebebea !important; }

.btn-light,
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-outline):not(.btn-danger):not(.btn-danger-outline):not(.btn-warning):not(.btn-ghost):not(.btn-muted):not(.btn-success):not(.btn-sm):not(.btn-lg):not(.btn-icon):not([class*="btn-"]) {
  background: #f5f5f3 !important;
  color: #1a1a18 !important;
  border: 0.5px solid #c8c6bc !important;
}
.btn-light:hover:not(:disabled) { background: #ebebea !important; }

.btn-outline {
  background: transparent !important;
  color: #1D9E75 !important;
  border: 1px solid #1D9E75 !important;
}
.btn-outline:hover:not(:disabled) { background: #E1F5EE !important; }

.btn-danger {
  background: #E24B4A !important;
  color: #fff !important;
  border: none !important;
}
.btn-danger:hover:not(:disabled) { background: #A32D2D !important; }

.btn-danger-outline {
  background: transparent !important;
  color: #E24B4A !important;
  border: 1px solid #E24B4A !important;
}
.btn-danger-outline:hover:not(:disabled) { background: #FCEBEB !important; }

.btn-warning {
  background: #EF9F27 !important;
  color: #fff !important;
  border: none !important;
}
.btn-warning:hover:not(:disabled) { background: #BA7517 !important; }

.btn-ghost {
  background: transparent !important;
  color: #6b6a65 !important;
  border: 0.5px solid transparent !important;
}
.btn-ghost:hover:not(:disabled) { background: #f5f5f3 !important; color: #1a1a18 !important; }

.btn-success {
  background: var(--success) !important;
  color: #fff !important;
  border: none !important;
}
.btn-success:hover:not(:disabled) { background: #0d6b31 !important; }

/* ── Icon-only ── */
.btn-icon {
  width: 36px !important;
  padding: 0 !important;
  justify-content: center !important;
}

/* ── Sizes ── */
.btn-sm {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}
.btn-sm i { font-size: 14px !important; }

.btn-lg {
  height: 44px !important;
  padding: 0 20px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
}
.btn-lg i { font-size: 17px !important; }

/* ── Dark mode ── */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-light {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .btn-ghost { color: #94a3b8 !important; }
html[data-theme="dark"] .btn-ghost:hover { background: #1e293b !important; color: #e2e8f0 !important; }

/* -------------------------------------------------------
   10. INPUTS / SELECTS / TEXTAREAS  consistent forms
------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select {
  /* height is NOT !important so per-page .mini-input / small controls still work */
  height: 46px;
  border: 1px solid #dde5f0 !important;
  border-radius: var(--vb-radius-sm) !important;
  padding: 0 14px !important;
  background: #fff !important;
  font-family: inherit !important;
  font-weight: 750 !important;
  color: var(--vb-text) !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

textarea {
  border: 1px solid #dde5f0 !important;
  border-radius: var(--vb-radius-sm) !important;
  padding: 12px 14px !important;
  background: #fff !important;
  font-family: inherit !important;
  font-weight: 750 !important;
  color: var(--vb-text) !important;
  outline: none !important;
  box-sizing: border-box !important;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--vb-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.1) !important;
}

/* -------------------------------------------------------
   11. TABLES  consistent header, cells, hover
------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px !important;
  font-family: inherit !important;
}

th {
  background: #f7f9fd !important;
  text-align: left !important;
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--vb-border) !important;
}

td {
  padding: 14px 16px !important;
  border-top: 1px solid var(--vb-border) !important;
  font-weight: 750 !important;
  vertical-align: middle !important;
  color: var(--vb-text) !important;
}

tbody tr:hover {
  background: #f8fbff !important;
}

/* Status badges / pills */
.pill,
.badge,
.status {
  display: inline-flex !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

/* -------------------------------------------------------
   12. MODALS  consistent card and overlay
------------------------------------------------------- */
.modal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(7, 21, 47, 0.48) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;
  z-index: 100000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
}

.modal.show,
.modal.open,
.modal[open] {
  display: flex !important;
}

/* FIX (invisible-modal / "blur only" bug): the rule above treats a bare .modal as a
   hidden full-screen backdrop. On many pages .modal is instead the CARD inside a
   .modal-overlay / .modal-bg backdrop and never receives .open — so it stayed
   display:none and users saw only the blurred backdrop (e.g. Add Staff). When the
   surrounding overlay/backdrop is OPEN, its .modal child is the card → show it.
   Card geometry (white bg, size, position) is set per-page via .modal-overlay>.modal. */
.modal-overlay:not(.hidden) > .modal,
.modal-bg.open > .modal,
.modal-bg.show > .modal,
.modal-overlay.show > .modal,
.modal-overlay.open > .modal {
  display: flex !important;
}

.modal-card {
  background: var(--vb-card) !important;
  border-radius: 20px !important;
  box-shadow: 0 28px 70px rgba(7, 21, 47, 0.22) !important;
  max-height: calc(100dvh - 36px) !important;
  overflow-y: auto !important;
}

.modal-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 18px !important;
}

.modal-head h2 {
  font-size: 20px !important;
  margin: 0 !important;
}

.modal-close {
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f1f5fb !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

/* Modal form grid */
.modal-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

.field {
  display: grid !important;
  gap: 7px !important;
}

.field.full,
.field[data-full] {
  grid-column: 1 / -1 !important;
}

.field label {
  font-weight: 900 !important;
  font-size: 13px !important;
  color: #253450 !important;
}

.modal-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

/* -------------------------------------------------------
   13. FILTER / TOOL ROWS
------------------------------------------------------- */
.tabs {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.tab {
  border: 1px solid var(--vb-border) !important;
  background: #fff !important;
  color: #334155 !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

.tab.active {
  background: var(--vb-blue) !important;
  color: #fff !important;
  border-color: var(--vb-blue) !important;
}

/* Dots / row action button */
.dots,
.row-btn,
.edit-btn,
.view-btn {
  border: 1px solid var(--vb-border) !important;
  background: #fff !important;
  border-radius: 10px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

/* -------------------------------------------------------
   14. PAGINATION
------------------------------------------------------- */
.pagination {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 18px !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.pages {
  display: flex !important;
  gap: 6px !important;
}

.page-btn {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--vb-border) !important;
  background: #fff !important;
  border-radius: 9px !important;
  color: #334155 !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.page-btn.active {
  background: var(--vb-blue) !important;
  color: #fff !important;
  border-color: var(--vb-blue) !important;
}

/* -------------------------------------------------------
   15. PAGE JUMP / FOUC PREVENTION
   Set sidebar background before JS fills the content so
   the sidebar column shows the dark color instantly.
------------------------------------------------------- */
.app > aside.sidebar,
.dashboard-shell > aside.sidebar,
.shell > .side,
.shell > aside.sidebar {
  background: linear-gradient(180deg, #0C1E3E 0%, #040e1e 100%) !important;
}

/* Smooth page entry  avoids abrupt content pop-in */
.main,
.main-content {
  animation: vb-fadein 0.18s ease both !important;
}

@keyframes vb-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Disable animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .main,
  .main-content {
    animation: none !important;
  }
}

/* -------------------------------------------------------
   16. SCROLLBAR  subtle, consistent across pages
------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #c8d4e8;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a0b0cc;
}

/* -------------------------------------------------------
   17. UTILITY  shared helper classes
------------------------------------------------------- */
.text-muted {
  color: var(--vb-muted) !important;
}

.text-blue {
  color: var(--vb-blue) !important;
}

.text-green {
  color: var(--vb-green) !important;
}

.text-red {
  color: var(--vb-red) !important;
}

.fw-900 { font-weight: 900 !important; }
.fw-950 { font-weight: 950 !important; }

/* -------------------------------------------------------
   18. LAYOUT CONSISTENCY GUARDS
   Prevent any page from accidentally overflowing
------------------------------------------------------- */
.app > .main,
.dashboard-shell > .main-content,
.shell > .main,
.shell > main {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

/* Table containers always scroll  never overflow */
.table-card,
.table-wrap,
.table-wrapper,
.table-shell,
.items-card,
.items-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* -------------------------------------------------------
   19. AUTH PAGES  login, signup, forgot password
------------------------------------------------------- */
body.viya-auth-page {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  background:
    radial-gradient(circle at top left, rgba(14, 116, 255, 0.12) 0, transparent 28%),
    radial-gradient(circle at bottom left, rgba(14, 165, 233, 0.10) 0, transparent 24%),
    linear-gradient(135deg, var(--card), #f7fbff) !important;
  color: var(--vb-text) !important;
  overflow-x: hidden !important;
}

/* ── Generic page loader spinner (#pageLoader) ── */
#pageLoader {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.3s;
}
#pageLoader.done {
  opacity: 0;
  pointer-events: none;
}
.loader-spin {
  width: 40px;
  height: 40px;
  border: 3px solid #f1f5f9;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: loaderSpin 0.7s linear infinite;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }

/* ── viya-spin alternative spinner ── */
.viya-spin {
  width: 44px;
  height: 44px;
  border: 3px solid #f1f5f9;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: viyaSpin 0.75s linear infinite;
}
@keyframes viyaSpin { to { transform: rotate(360deg); } }

.login-page,
.viya-auth-layout {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  gap: clamp(34px, 5vw, 64px);
  align-items: center;
  padding: clamp(36px, 6vw, 68px) clamp(22px, 7vw, 8%);
}

.hero,
.viya-auth-hero {
  min-width: 0;
}

.brand,
.viya-auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(34px, 6vw, 70px);
}

.real-logo,
.viya-auth-logo {
  width: 80px;
  height: auto;
  object-fit: contain;
}

.brand h1,
.viya-auth-brand h1 {
  margin: 0;
  font-size: 34px !important;
  line-height: 1;
  letter-spacing: 0 !important;
}

.brand p,
.viya-auth-brand p {
  margin: 6px 0 0;
  color: #2b3d73;
  font-size: 15px;
}

.hero h2,
.viya-auth-hero h2 {
  margin: 0 0 24px;
  font-size: clamp(38px, 4vw, 50px) !important;
  line-height: 1.12;
  letter-spacing: 0 !important;
  color: #07133d !important;
}

.hero h2 span,
.viya-auth-hero h2 span {
  color: #0969ff;
}

.hero-text,
.viya-auth-copy {
  max-width: 540px;
  color: #23386d;
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 34px;
}

.features {
  display: grid;
  gap: 18px;
  margin-bottom: 34px;
}

.feature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #eaf2ff;
  flex: 0 0 auto;
}

.feature strong {
  display: block;
  font-size: 17px;
  margin-bottom: 4px;
}

.feature p {
  margin: 0;
  color: #2b3d73;
  font-size: 15px;
}

.preview-card {
  width: min(620px, 100%);
  border-radius: 22px;
  background: var(--card);
  border: 1px solid #dfe8f6;
  box-shadow: 0 28px 70px rgba(7, 19, 61, 0.14);
  overflow: hidden;
  margin-top: 34px;
}

.preview-top {
  height: 54px;
  background: #061a45;
  color: var(--card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
}

.preview-top div {
  display: flex;
  gap: 7px;
}

.preview-top span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.preview-layout {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  min-height: 270px;
}

.preview-sidebar {
  background: #07183f;
  padding: 24px 16px;
}

.preview-sidebar p {
  height: 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.25);
  margin: 0 0 18px;
}

.preview-content {
  padding: 24px;
  background: linear-gradient(135deg, var(--card), #f7fbff);
}

.preview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.preview-stats div,
.preview-list p,
.preview-chart {
  border: 1px solid #e4ecf8;
  background: var(--card);
}

.preview-stats div {
  border-radius: 16px;
  padding: 14px;
}

.preview-stats small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 8px;
}

.preview-stats strong {
  font-size: 14px;
  color: #07133d;
}

.preview-main {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
}

.preview-chart {
  height: 150px;
  border-radius: 12px;
  display: flex;
  align-items: end;
  gap: 12px;
  padding: 18px;
}

.preview-chart i {
  flex: 1;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #1d73ff, #9fc5ff);
}

.preview-list {
  display: grid;
  gap: 12px;
}

.preview-list p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 14px;
  padding: 12px;
  font-size: 12px;
  color: #263a69;
  margin: 0;
}

.preview-list span {
  width: 8px;
  height: 8px;
  background: #1d73ff;
  border-radius: 50%;
}

.preview-list b {
  color: #0f9f6e;
  font-size: 11px;
}

.login-card-wrap,
.page-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-shell {
  min-height: 100vh;
  min-height: 100dvh;
  justify-content: center;
  padding: 32px 16px;
}

.login-card,
.login-panel {
  width: min(460px, 100%);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #e2eaf7;
  border-radius: 22px;
  padding: 42px 34px 32px;
  box-shadow: 0 30px 70px rgba(15, 50, 100, 0.14);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.card-real-logo,
.brand-mark img {
  display: block;
  width: 86px !important;
  height: auto !important;
  margin: 0 auto 22px;
  object-fit: contain;
}

.logo-wrap {
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.brand-mark {
  background: transparent !important;
  box-shadow: none !important;
}

.login-card h2,
.login-panel h1,
.hero-copy h1 {
  text-align: center;
  font-size: 26px !important;
  line-height: 1.2;
  margin: 0 0 8px !important;
  letter-spacing: 0 !important;
}

.login-card .sub,
.hero-copy p {
  text-align: center;
  color: #30416f !important;
  margin: 0 0 30px !important;
  font-size: 15px;
}

.login-card label,
.login-panel label,
.login-form label {
  display: block;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 8px;
}

.login-card .input-box,
.login-panel .input-box,
.login-form .input-box {
  position: relative;
  margin-bottom: 20px;
}

.login-card .input-box span,
.login-panel .input-box span,
.login-form .input-box span {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #67799f;
  z-index: 1;
}

.login-card .input-box input,
.login-panel .input-box input,
.login-form .input-box input {
  width: 100%;
  height: 54px !important;
  padding-left: 44px !important;
  font-size: 15px !important;
}

.error,
.error-message {
  color: var(--danger);
  font-size: 13px;
  font-weight: 800;
  min-height: 16px;
  display: block;
  margin: -10px 0 14px;
}

.row,
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 4px 0 26px;
  font-size: 14px;
}

.row a,
.signup a,
.footer-row a {
  color: #006bff;
  text-decoration: none;
  font-weight: 800;
}

.login-card .btn,
.login-panel .primary-button {
  width: 100% !important;
  height: 54px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #1175ff, #0057e7) !important;
  color: white !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  cursor: pointer;
  box-shadow: 0 16px 28px rgba(0, 89, 255, 0.24) !important;
}

.login-card .google {
  background: #fff !important;
  color: #10204f !important;
  box-shadow: none !important;
  border: 1px solid #d9e3f2 !important;
}

.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #526487;
  margin: 26px 0;
  font-size: 14px;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #dfe7f3;
}

.signup,
.secure {
  text-align: center;
  color: #425579;
}

.signup {
  margin-top: 26px;
  font-size: 14px;
}

.secure {
  margin-top: 36px;
}

.secure strong {
  display: block;
  color: #263a69;
  font-size: 18px;
  margin-bottom: 10px;
}
/* -------------------------------------------------------
   SEARCH WRAP  unified search input component
------------------------------------------------------- */

.search-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.search-wrap {
  display: flex;
  align-items: center;
  height: 36px;
  border: 0.5px solid #c8c6bc;
  border-radius: 8px;
  background: #fff;
  padding: 0 4px 0 10px;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.search-wrap:focus-within {
  border-color: #1D9E75;
  box-shadow: 0 0 0 3px rgba(29,158,117,0.15);
}
.search-wrap .ti-search {
  font-size: 15px;
  color: #888780;
  flex-shrink: 0;
  pointer-events: none;
  line-height: 1;
}
.search-wrap input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 13px !important;
  color: #1a1a18 !important;
  padding: 0 6px !important;
  font-family: inherit !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: unset !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.search-wrap input::placeholder { color: #888780; }
.search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  color: #888780;
  font-size: 14px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color .15s;
  padding: 0;
}
.search-clear:hover { color: #1a1a18; }
.filter-select {
  height: 36px;
  padding: 0 10px;
  border: 0.5px solid #c8c6bc;
  border-radius: 8px;
  background: #fff;
  color: #1a1a18;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
}
.filter-select:focus {
  border-color: #1D9E75;
  box-shadow: 0 0 0 3px rgba(29,158,117,0.15);
}

/* Dark mode */
html[data-theme="dark"] .search-wrap { background: #1e293b; border-color: #334155; }
html[data-theme="dark"] .search-wrap .ti-search { color: var(--muted); }
html[data-theme="dark"] .search-wrap input { color: #e2e8f0 !important; }
html[data-theme="dark"] .search-wrap input::placeholder { color: var(--muted); }
html[data-theme="dark"] .search-clear { color: var(--muted); }
html[data-theme="dark"] .search-clear:hover { color: #e2e8f0; }
html[data-theme="dark"] .filter-select { background: #1e293b; border-color: #334155; color: #e2e8f0; }

/* -------------------------------------------------------
   NAVBAR / TOPBAR  icon-btn, bell, profile, nav-search
------------------------------------------------------- */

/* Search bar inside topbar */
.nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 420px;
  height: 36px;
  background: #fff;
  border: 0.5px solid #c8c6bc;
  border-radius: 8px;
  padding: 0 12px;
  box-sizing: border-box;
}
.nav-search i { color: #6b6a65; font-size: 15px; flex-shrink: 0; }
.nav-search input {
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  width: 100%;
  color: #1a1a18;
  font-weight: 400;
  height: auto;
  min-height: unset;
  padding: 0;
  border-radius: 0;
}
.nav-search input::placeholder { color: #888780; }
html[data-theme="dark"] .nav-search { background: #1e293b; border-color: #334155; }
html[data-theme="dark"] .nav-search input { color: #e2e8f0; }

/* Topbar layout */
.topbar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Icon button (bell, plus, etc.) */
.icon-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: 0.5px solid #c8c6bc !important;
  background: #fff !important;
  color: #6b6a65 !important;
  cursor: pointer !important;
  font-size: 18px !important;
  transition: background .15s, color .15s !important;
  flex-shrink: 0 !important;
}
.icon-btn:hover { background: #f5f5f3 !important; color: #1a1a18 !important; }
html[data-theme="dark"] .icon-btn { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; }
html[data-theme="dark"] .icon-btn:hover { background: #273549 !important; color: #e2e8f0 !important; }

/* Bell badge */
.bell-wrap { position: relative; display: inline-flex; }
.bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 16px; height: 16px;
  background: #E24B4A;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #fff;
  border: 2px solid #fff;
  pointer-events: none;
}

/* Profile button */
.profile-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 36px !important;
  padding: 0 10px 0 4px !important;
  border-radius: 8px !important;
  border: 0.5px solid #c8c6bc !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: background .15s !important;
  font-family: inherit !important;
}
.profile-btn:hover { background: #f5f5f3 !important; }
.profile-btn .avatar {
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  background: #1D9E75 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 11px !important; font-weight: 600 !important; color: #fff !important;
  flex-shrink: 0 !important;
}
.profile-name { font-size: 13px; font-weight: 500; color: #1a1a18; line-height: 1.2; }
.profile-role { font-size: 11px; color: #888780; line-height: 1.2; }

/* Dropdown menu */
.dropdown-wrap { position: relative; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,23,42,.12);
  padding: 6px;
  z-index: 1000;
}
.dropdown-menu.open { display: block; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a18;
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
  font-family: inherit;
}
.dropdown-item:hover { background: #f5f5f3; }
.dropdown-item.danger { color: #E24B4A; }
.dropdown-item.danger:hover { background: #FCEBEB; }
.dropdown-item i { font-size: 15px; flex-shrink: 0; }
.dropdown-divider { height: 1px; background: var(--border); margin: 4px 6px; }
html[data-theme="dark"] .dropdown-menu { background: #0d1f3c; border-color: #1e3a5f; }
html[data-theme="dark"] .dropdown-item { color: #e2e8f0; }
html[data-theme="dark"] .dropdown-item:hover { background: #1e293b; }

/* =======================================================
   UNIFIED MODAL SYSTEM  (opt-in via .modal-overlay wrapper)
   Scoped under .modal-overlay so existing modals on other
   pages that use a bare .modal/.modal-head are untouched.
   ======================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 16px;
}
.modal-overlay.hidden { display: none !important; }

.modal-overlay .modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  border: 0.5px solid #c8c6bc;
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(15,23,42,.22);
  padding: 0 !important;          /* neutralize page-local .modal padding */
  margin: 0 !important;
  position: relative !important;  /* never inherit a page .modal overlay's fixed positioning */
  inset: auto !important;
}
.modal-overlay .modal.modal-sm { max-width: 420px; }
.modal-overlay .modal.modal-lg { max-width: 820px; }

.modal-overlay .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 0.5px solid #e8e6de;
  flex-shrink: 0;
  margin: 0;
}
.modal-overlay .modal-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a18;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.modal-overlay .modal-title i { font-size: 18px; color: #1D9E75; }
.modal-overlay .modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 0.5px solid #c8c6bc;
  background: #f5f5f3;
  cursor: pointer;
  font-size: 16px;
  color: #6b6a65;
  transition: background .15s, color .15s;
  flex-shrink: 0;
  padding: 0;
}
.modal-overlay .modal-close:hover { background: #ebebea; color: #1a1a18; }

.modal-overlay .modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  flex: 1;
}
.modal-overlay .modal-footer {
  padding: 14px 20px;
  border-top: 0.5px solid #e8e6de;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* Form layout inside unified modals */
.modal-overlay .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal-overlay .form-row.full { grid-template-columns: 1fr; }
.modal-overlay .form-group { display: flex; flex-direction: column; gap: 5px; }
.modal-overlay .form-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b6a65;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.modal-overlay .form-label .req { color: #E24B4A; margin-left: 2px; }

.modal-overlay .form-input,
.modal-overlay .form-select,
.modal-overlay .form-textarea {
  height: 38px;
  padding: 0 12px;
  border: 0.5px solid #c8c6bc;
  border-radius: 8px;
  background: #f9f9f7;
  color: #1a1a18;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  width: 100%;
  box-sizing: border-box;
}
.modal-overlay .form-textarea { height: auto; min-height: 76px; padding: 10px 12px; resize: vertical; }
.modal-overlay .form-input:focus,
.modal-overlay .form-select:focus,
.modal-overlay .form-textarea:focus {
  border-color: #1D9E75;
  box-shadow: 0 0 0 3px rgba(29,158,117,0.12);
  background: #fff;
}
.modal-overlay .form-input::placeholder,
.modal-overlay .form-textarea::placeholder { color: #b4b2a9; }

.modal-overlay .photo-upload {
  border: 1.5px dashed #c8c6bc;
  border-radius: 10px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: #f9f9f7;
  text-align: center;
}
.modal-overlay .photo-upload:hover { border-color: #1D9E75; background: #E1F5EE; }

.modal-overlay .form-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
}
.modal-overlay .form-divider span {
  font-size: 11px;
  color: #b4b2a9;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.modal-overlay .form-divider::before,
.modal-overlay .form-divider::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: #e8e6de;
}

.modal-overlay .modal-confirm-text {
  font-size: 14px;
  color: #44433e;
  line-height: 1.6;
  margin: 0;
}

/* Compatibility: legacy .form-grid / .field markup inside a unified
   modal automatically adopts the new compact input styling, so large
   existing modals only need their shell converted. */
.modal-overlay .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal-overlay .form-grid .full,
.modal-overlay .field.full { grid-column: 1 / -1; }
.modal-overlay .field { display: flex; flex-direction: column; gap: 5px; }
.modal-overlay .field > label {
  font-size: 11px;
  font-weight: 600;
  color: #6b6a65;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.modal-overlay .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.modal-overlay .field select,
.modal-overlay .field textarea {
  min-height: 38px;
  height: 38px;
  padding: 0 12px;
  border: 0.5px solid #c8c6bc;
  border-radius: 8px;
  background: #f9f9f7;
  color: #1a1a18;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.modal-overlay .field textarea {
  height: auto;
  min-height: 76px;
  padding: 10px 12px;
  resize: vertical;
}
.modal-overlay .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.modal-overlay .field select:focus,
.modal-overlay .field textarea:focus {
  border-color: #1D9E75;
  box-shadow: 0 0 0 3px rgba(29,158,117,0.12);
  background: #fff;
}
@media (max-width: 560px) {
  .modal-overlay .form-grid { grid-template-columns: 1fr; }
}
html[data-theme="dark"] .modal-overlay .field > label { color: #94a3b8; }
html[data-theme="dark"] .modal-overlay .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="dark"] .modal-overlay .field select,
html[data-theme="dark"] .modal-overlay .field textarea {
  background: #0b1e38; border-color: #334155; color: #f1f5f9;
}

@media (max-width: 560px) {
  .modal-overlay .form-row { grid-template-columns: 1fr; }
}

/* Dark mode */
html[data-theme="dark"] .modal-overlay .modal { background: #0d1f3c; border-color: #1e3a5f; }
html[data-theme="dark"] .modal-overlay .modal-head,
html[data-theme="dark"] .modal-overlay .modal-footer { border-color: #1e3a5f; }
html[data-theme="dark"] .modal-overlay .modal-title { color: #f1f5f9; }
html[data-theme="dark"] .modal-overlay .modal-close { background: #1e293b; border-color: #334155; color: #94a3b8; }
html[data-theme="dark"] .modal-overlay .modal-close:hover { background: #273549; color: #e2e8f0; }
html[data-theme="dark"] .modal-overlay .form-input,
html[data-theme="dark"] .modal-overlay .form-select,
html[data-theme="dark"] .modal-overlay .form-textarea { background: #0b1e38; border-color: #334155; color: #f1f5f9; }
html[data-theme="dark"] .modal-overlay .form-input:focus,
html[data-theme="dark"] .modal-overlay .form-select:focus,
html[data-theme="dark"] .modal-overlay .form-textarea:focus { background: #0b1e38; }
html[data-theme="dark"] .modal-overlay .modal-confirm-text { color: #cbd5e1; }
html[data-theme="dark"] .modal-overlay .photo-upload { background: #0b1e38; border-color: #334155; }

/* ════════════════════════════════════════════════════════════════════
   Shared sidebar LOADING SKELETON — identical on every page.
   Shows inside the empty <aside class="sidebar"> until shared-sidebar.js
   injects the real nav; `:empty` stops matching once filled, so it vanishes
   automatically with no JS. Shape/colour mirror the dashboard sidebar
   (288px, radial-gradient navy, 72px logo + 58px business card + nav rows).
   ════════════════════════════════════════════════════════════════════ */
@keyframes vbSidebarSkel { 0%,100% { opacity:.55 } 50% { opacity:.9 } }
.sidebar:empty {
  width:220px; min-width:220px; max-width:220px; min-height:100vh;
 min-height:100dvh;
  background:radial-gradient(circle at 30% 0%, #0b3a78 0, #071f43 35%, #03152f 100%);
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:10px 0 35px rgba(2,8,23,.15);
  padding:22px 20px; box-sizing:border-box; position:relative; overflow:hidden;
}
.sidebar:empty::before {
  content:""; display:block; height:150px; margin-bottom:14px;
  background:
    linear-gradient(rgba(255,255,255,.08) 0 0) 0 0 / 100% 72px no-repeat,
    linear-gradient(rgba(255,255,255,.05) 0 0) 0 92px / 100% 58px no-repeat;
  border-radius:14px;
  animation:vbSidebarSkel 1.2s ease-in-out infinite;
}
.sidebar:empty::after {
  content:""; display:block; height:calc(100vh - 210px);
 height:calc(100dvh - 210px); border-radius:8px;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 38px,
    transparent 38px, transparent 54px);
  animation:vbSidebarSkel 1.2s ease-in-out infinite;
}


/* ======= branding.css ======= */
/* ==========================================================
   ViyaBook branding.css  logo sizing & brand consistency
   Load order: after styles.css, layout.css, responsive.css
   Injected by shared-sidebar.js on all app pages;
   linked manually on auth pages (login, signup, etc.)
   ========================================================== */

/* ----------------------------------------------------------
   1. LOADING SCREEN LOGO
   ---------------------------------------------------------- */
.viya-loader-logo {
  width: auto !important;
  height: 72px !important;
  max-width: 180px !important;
  object-fit: contain !important;
}

/* ----------------------------------------------------------
   2. SIDEBAR BRAND  compact icon + text layout
   ---------------------------------------------------------- */
.sidebar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

/* Icon mark */
.vb-brand-icon {
  display: block !important;
  height: 42px !important;
  width: auto !important;
  max-width: 64px !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}

.brand img,
.sidebar .brand img,
.side .brand img {
  width: 42px !important;
  height: 42px !important;
  max-width: 64px !important;
  object-fit: contain !important;
}

/* Text column */
.vb-brand-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* "ViyaBook" */
.vb-brand-name {
  display: block !important;
  font-size: 15.5px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}

/* "Business Made Easy" */
.vb-brand-tag {
  display: block !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

/* ----------------------------------------------------------
   3. MOBILE HEADER LOGO
   ---------------------------------------------------------- */
.viya-mobile-logo {
  height: 28px !important;
  width: auto !important;
  max-width: 110px !important;
  object-fit: contain !important;
}

/* ----------------------------------------------------------
   4. DESKTOP HEADER LOGO (shown at certain breakpoints)
   ---------------------------------------------------------- */
.viya-header-logo {
  height: 28px !important;
  width: auto !important;
  max-width: 130px !important;
  object-fit: contain !important;
}

.viya-svg-icon,
[data-viya-icon] svg {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  vertical-align: -0.18em;
}

button > .viya-svg-icon:only-child {
  width: 1em;
  height: 1em;
  margin: 0 auto;
  display: block;
}

/* ----------------------------------------------------------
   5. RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 1023px) {
  .vb-brand-icon  { height: 36px !important; max-width: 56px !important; }
  .vb-brand-name  { font-size: 14px !important; }
  .vb-brand-tag   { font-size: 10px !important; }
}

@media (max-width: 767px) {
  .viya-mobile-logo { height: 26px !important; }
}

@media (max-width: 430px) {
  .viya-mobile-logo { height: 24px !important; }
}


/* ======= responsive.css ======= */
/* ViyaBook responsive.css  supplements styles.css
   Exact breakpoints: desktop 1024px, tablet 7681023px, mobile <768px
   Load order: after styles.css so these rules win on conflicts. */

/* =============================================================
   BASE  prevent horizontal overflow on every page
   ============================================================= */
html, body {
  overflow-x: hidden !important;overflow-x:clip !important;
  max-width: 100% !important;
}

* { box-sizing: border-box; }

/* =============================================================
   10-INCH TABLET (1024px-1366px landscape)
   Sidebar visible but narrower. All grids recalculated.
   ============================================================= */
@media (min-width: 1024px) and (max-width: 1366px) {
  :root {
    --vb-sidebar-w: 200px !important;
  }

  .sidebar,
  aside.sidebar,
  .app > aside.sidebar,
  .dashboard-shell > aside.sidebar,
  .viya-sidebar {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    padding: 20px 12px !important;
  }

  .sidebar-nav a,
  .viya-sidebar-nav a {
    padding: 9px 10px !important;
    font-size: 12.5px !important;
    gap: 8px !important;
  }

  .sidebar-icon {
    width: 22px !important;
    height: 22px !important;
  }

  .vb-brand-name {
    font-size: 13px !important;
  }

  .vb-brand-tag {
    font-size: 9.5px !important;
  }

  .business-trigger {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .sidebar-nav .nav-section-label {
    font-size: 9px !important;
    padding: 10px 10px 3px !important;
  }

  .main-content,
  .main,
  .viya-main {
    padding: 16px 18px !important;
  }

  .viya-app-header {
    padding: 8px 10px !important;
  }

  .summary-grid,
  .kpi-grid,
  .stats-grid,
  .mini-stats,
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .cards,
  .quick-actions,
  .type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .content-grid,
  .tables-grid,
  .donut-wrap,
  .trip-inner-grid {
    grid-template-columns: 1fr !important;
  }

  .notes-totals,
  .grid-top {
    grid-template-columns: 1fr !important;
  }

  .invoice-details {
    grid-template-columns: 130px minmax(0, 1fr) 130px minmax(0, 1fr) !important;
  }

  .filters,
  .filter-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .filters > *,
  .filter-grid > * {
    flex: 1 1 180px !important;
    min-width: 0 !important;
  }

  .table-wrap,
  .table-wrapper,
  .td-table-wrap,
  .items-scroll,
  .panel:has(table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .settings-layout {
    grid-template-columns: 1fr !important;
  }

  .modal-card,
  .modal-content,
  .modal-inner {
    width: min(560px, 96vw) !important;
    max-width: min(560px, 96vw) !important;
    padding: 20px !important;
  }

  .modal-grid,
  .form-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .footer-actions,
  .bottom-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .footer-actions .btn,
  .bottom-actions .btn {
    flex: 1 1 140px !important;
    min-width: 0 !important;
  }
}

/* =============================================================
   TABLET GAP FIX (993px1023px)
   styles.css @media (min-width: 993px) forces display:grid which
   leaves a 300px phantom column when the sidebar is already in
   drawer mode (shared-sidebar.js switches at 1024px).
   Override that grid here so the main content fills the viewport.
   ============================================================= */
@media (min-width: 993px) and (max-width: 1023px) {

  body:has(> .app) > .app,
  body.viya-sidebar-page .viya-layout,
  .dashboard-shell,
  .app {
    display: block !important;
    grid-template-columns: none !important;
  }

  /* Sidebar stays as a drawer  display:flex !important overrides
     inline sidebar{display:none} rules in some pages */
  body:has(> .app) > .app > .sidebar,
  body.viya-sidebar-page .viya-layout > .sidebar,
  body.viya-sidebar-page .viya-layout > .viya-sidebar,
  .dashboard-shell > .sidebar,
  .sidebar,
  .app-sidebar,
  .viya-sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 10001 !important;
    width: min(300px, 86vw) !important;
    max-width: 86vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    transform: translateX(-105%) !important;
    transition: transform 0.3s ease !important;
    grid-column: auto !important;
  }

  .sidebar.active,
  .app-sidebar.active,
  .viya-sidebar.active,
  body.sidebar-open .sidebar,
  body.sidebar-open .app-sidebar,
  body.sidebar-open .viya-sidebar {
    transform: translateX(0) !important;
  }

  /* Main area fills full width */
  body:has(> .app) > .app > .main,
  body.viya-sidebar-page .viya-layout > .viya-main,
  .dashboard-shell > .main-content,
  .main,
  .main-content,
  .viya-main,
  .dashboard-content,
  .page-content {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-top: 72px !important;
  }

  /* KPI / stat cards  2-column at tablet */
  .summary-grid,
  .kpi-grid,
  .stats-grid,
  .cards,
  .quick,
  .quick-actions,
  .metrics,
  .type-grid,
  .mini-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* trip-detail inner grids collapse */
  .content-grid,
  .tables-grid {
    grid-template-columns: 1fr !important;
  }

  .donut-wrap {
    grid-template-columns: 1fr !important;
  }

  .notes-totals,
  .grid-top {
    grid-template-columns: 1fr !important;
  }

  .invoice-details {
    grid-template-columns: 130px minmax(0, 1fr) !important;
  }

  .modal-card,
  .modal-content {
    width: min(540px, 94vw) !important;
    max-width: min(540px, 94vw) !important;
  }

  .footer-actions,
  .bottom-actions {
    flex-wrap: wrap !important;
  }

  .footer-actions .btn,
  .bottom-actions .btn {
    flex: 1 1 140px !important;
  }

  /* Overlay shows when sidebar is open */
  .sidebar-overlay.active,
  body.sidebar-open .sidebar-overlay {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* =============================================================
   TABLET GENERAL (1023px)  layout adjustments
   ============================================================= */
@media (max-width: 1023px) {

  .login-page,
  .viya-auth-layout {
    grid-template-columns: 1fr !important;
    padding: 32px 20px !important;
  }

  .hero,
  .viya-auth-hero {
    display: none !important;
  }

  .login-card-wrap,
  .login-card,
  .login-panel {
    width: 100% !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* All table containers scroll without breaking layout */
  .table-wrap,
  .table-wrapper,
  .table-shell,
  .items-scroll,
  .detail-table-card,
  .table-panel,
  .panel:has(table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* trip-detail grids */
  .content-grid,
  .tables-grid {
    grid-template-columns: 1fr !important;
  }

  .donut-wrap {
    grid-template-columns: 1fr !important;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mini-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Filter rows wrap instead of overflow */
  .filters,
  .filter-grid {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .filters > *,
  .filter-grid > * {
    flex: 1 1 200px !important;
    min-width: 0 !important;
  }

  /* Settings / form layout */
  .settings-layout {
    grid-template-columns: 1fr !important;
  }

  /* Notes & totals rows */
  .notes-totals,
  .grid-top {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================================
   DUPLICATE NAV CLEANUP (1023px)
   On tablet/mobile the shared-sidebar.js top-nav is the ONLY top bar
   and the ONLY search. Hide every page's own desktop topbar + its
   inline search bars so we never show two search boxes / two headers.
   ============================================================= */
@media (max-width: 1023px) {
  /* FIX 1  hide the page's OWN desktop topbar (all known class names).
     The shared-sidebar.js injected .top-nav replaces it. */
  .topbar,
  .dashboard-topbar,
  header.topbar,
  .page-topbar,
  .top-bar,
  .topbar-stub {
    display: none !important;
  }

  /* FIX 5  hide page-level inline search bars; the top-nav global
     search replaces them. */
  .filter-row .search-wrap,
  .panel .search-wrap,
  .tool-card .search-wrap,
  .page-filters .search-wrap,
  .top-search,
  .search-bar:not(.top-nav .search-wrap) {
    display: none !important;
  }

  /* but ALWAYS keep the injected top-nav and its search visible */
  .top-nav,
  .top-nav .search-wrap {
    display: flex !important;
  }
}

/* =============================================================
   MOBILE (767px)  single column, full-width touch targets
   Supplements styles.css which stops at 768px
   ============================================================= */
@media (max-width: 767px) {

  .login-page,
  .viya-auth-layout {
    min-height: 100dvh !important;
    padding: 24px 16px !important;
  }

  .login-card,
  .login-panel {
    border-radius: 20px !important;
    padding: 28px 22px !important;
  }

  .row,
  .footer-row {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .secure {
    margin-top: 24px !important;
  }

  /* trip-detail grids  1 column */
  .summary-grid,
  .mini-stats {
    grid-template-columns: 1fr !important;
  }

  .donut-wrap {
    grid-template-columns: 1fr !important;
  }

  /* dashboard .metrics 21 col */
  .metrics {
    grid-template-columns: 1fr !important;
  }

  /* Head/topbar wrap */
  .topbar,
  .page-head,
  .head,
  .welcome {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Action buttons stretch */
  .head-actions,
  .actions,
  .page-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .head-actions .btn,
  .actions .btn,
  .page-actions .btn,
  .actions button,
  .page-actions button {
    flex: 1 1 160px !important;
    min-width: 0 !important;
  }

  /* Modals fit screen */
  .modal-card,
  .modal-inner,
  .modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* Settings */
  .settings-layout,
  .settings-grid {
    grid-template-columns: 1fr !important;
  }

  .invoice-details {
    grid-template-columns: 1fr !important;
  }

  .notes-totals,
  .grid-top {
    grid-template-columns: 1fr !important;
  }

  .footer-actions {
    flex-direction: column !important;
  }

  .footer-actions button,
  .footer-actions .btn {
    width: 100% !important;
  }

  /* Form grids 1 column */
  .form-grid,
  .modal-grid,
  .detail-grid {
    grid-template-columns: 1fr !important;
  }

  /* Dashboard .summary 2-col  1-col */
  .summary {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================================
   SMALL MOBILE (479px)
   ============================================================= */
@media (max-width: 479px) {

  .login-page,
  .viya-auth-layout {
    padding: 18px 12px !important;
  }

  .login-card,
  .login-panel {
    padding: 24px 18px !important;
  }

  .card-real-logo,
  .brand-mark img {
    width: 72px !important;
  }

  .login-card h2,
  .login-panel h1,
  .hero-copy h1 {
    font-size: 23px !important;
  }

  .metrics,
  .summary-grid,
  .kpi-grid,
  .stats-grid,
  .mini-stats,
  .cards {
    grid-template-columns: 1fr !important;
  }

  /* Tight padding */
  .card,
  .panel,
  .invoice-card,
  .products-card,
  .table-card {
    padding: 14px !important;
  }

  /* Modal rounding */
  .modal-card,
  .modal {
    border-radius: 12px !important;
  }

  /* Full-width primary actions */
  .btn-primary,
  .save-btn,
  .submit-btn {
    width: 100% !important;
  }
}

/* =============================================================
   TABLET (769px–1023px) — full sidebar via hamburger, no bottom nav.
   These rules are intentionally last so they win over the
   993–1023px and max-width:1023px blocks above.
   ============================================================= */

/* FIX 4 — tablet content padding (bottom nav is hidden here) */
@media (min-width: 769px) and (max-width: 1023px) {
  body .main,
  body .main-content,
  body.viya-sidebar-page .viya-main,
  body main.main {
    padding-bottom: 24px !important;
  }
}

/* FIX 5 — stat cards: 4 columns on tablet (phones stay 2-col / 1-col) */
@media (min-width: 769px) and (max-width: 1023px) {
  .summary-grid,
  .kpi-grid,
  .stats-grid,
  .cards,
  .mini-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* FIX 6 — tables: show all columns on tablet (card-per-row is mobile-only) */
@media (min-width: 769px) {
  .vb-cardify tbody tr {
    display: table-row !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }
  .vb-cardify tbody td {
    display: table-cell !important;
    text-align: left !important;
  }
  .vb-cardify tbody td::before {
    display: none !important;
  }
}

/* FIX 7 — slightly larger typography on tablet than mobile */
@media (min-width: 769px) and (max-width: 1023px) {
  body {
    font-size: 14px !important;
  }
  .page-head h1,
  .topbar-title h1 {
    font-size: 20px !important;
  }
  .btn {
    height: 40px !important;
    font-size: 13px !important;
  }
  .nav-link {
    font-size: 13px !important;
  }
}


/* ======= ui.css ======= */
/* ============================================================
   ViyaBook Premium UI Design System  —  ui.css
   Load LAST so it layers over all other stylesheets.
   No Firebase logic is touched.
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Brand */
  --ui-primary:        var(--primary);
  --ui-primary-2:      #3b82f6;
  --ui-primary-grad:   linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  --ui-primary-glow:   0 16px 40px rgba(24,95,165,0.28);
  --ui-secondary:      #3b82f6;

  /* Surface */
  --ui-bg:             #f5f7fb;
  --ui-card:           rgba(255,255,255,0.72);
  --ui-card-solid:     var(--card);
  --ui-glass:          rgba(255,255,255,0.68);
  --ui-glass-border:   rgba(255,255,255,0.38);
  --ui-glass-blur:     blur(16px);

  /* Text */
  --ui-text:           var(--text);
  --ui-muted:          var(--muted);
  --ui-muted-2:        #9ca3af;

  /* Borders & Shadows */
  --ui-border:         rgba(148,163,184,0.24);
  --ui-shadow:         0 10px 30px rgba(0,0,0,0.08);
  --ui-shadow-md:      0 20px 50px rgba(0,0,0,0.10);
  --ui-shadow-lg:      0 28px 70px rgba(0,0,0,0.13);

  /* Radii */
  --ui-r-card:         22px;
  --ui-r-btn:          999px;
  --ui-r-input:        14px;
  --ui-r-modal:        28px;
  --ui-r-sm:           12px;

  /* Transitions */
  --ui-ease:           all 0.25s cubic-bezier(0.4,0,0.2,1);
  --ui-ease-spring:    all 0.3s cubic-bezier(0.34,1.56,0.64,1);

  /* Status */
  --ui-green:          #10b981;
  --ui-green-bg:       rgba(16,185,129,0.10);
  --ui-red:            var(--danger);
  --ui-red-bg:         rgba(239,68,68,0.08);
  --ui-orange:         var(--warning);
  --ui-orange-bg:      rgba(245,158,11,0.10);
  --ui-purple-bg:      rgba(24,95,165,0.10);
  --ui-blue-bg:        rgba(59,130,246,0.10);
}

/* ── Base Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  font-family: Inter, Poppins, "Segoe UI", -apple-system, sans-serif !important;
  max-width: 100%;
  overflow-x: hidden;overflow-x:clip;
}

body {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

/* ── Page background gradient ───────────────────────────────── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 10% 10%, rgba(24,95,165,0.12), transparent 35%),
    radial-gradient(circle at 90% 5%,  rgba(59,130,246,0.10), transparent 30%),
    radial-gradient(circle at 50% 95%, rgba(16,185,129,0.07), transparent 30%),
    linear-gradient(160deg, #f5f7fb 0%, #eef2ff 100%);
}

/* ── Glassmorphism Card Base ────────────────────────────────── */
.glass-card,
.card, .panel, .table-card, .table-shell,
.stat-card, .kpi-card, .metric-card, .summary-card,
.trip-card, .project-card, .invoice-card,
.expense-card, .report-card, .product-card,
.customer-card, .staff-card, .checkout-card,
.settings-card, .settings-panel, .settings-menu,
.settings-section, .role-card, .plan-card,
.export-card, .quick-link-card, .tool-card,
.action-card, .modal-card, .empty-state {
  background: var(--ui-card) !important;
  border: 1px solid var(--ui-glass-border) !important;
  border-radius: var(--ui-r-card) !important;
  box-shadow: var(--ui-shadow) !important;
  -webkit-backdrop-filter: var(--ui-glass-blur) !important;
  backdrop-filter: var(--ui-glass-blur) !important;
  -webkit-backdrop-filter: var(--ui-glass-blur) !important;
  transition: var(--ui-ease) !important;
}

/* Hover lift on interactive cards */
.card:hover, .stat-card:hover, .kpi-card:hover,
.metric-card:hover, .trip-card:hover, .project-card:hover,
.invoice-card:hover, .product-card:hover,
.customer-card:hover, .quick-link-card:hover,
.action-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--ui-shadow-md) !important;
  border-color: rgba(24,95,165,0.20) !important;
}

/* ── Modal ─────────────────────────────────────────────────── */
.modal-card,
.modal-content,
.modal-box,
.trip-modal-card,
.viya-modal-card,
.dialog,
.popup {
  border-radius: var(--ui-r-modal) !important;
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid var(--ui-glass-border) !important;
  box-shadow: var(--ui-shadow-lg) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.modal, .modal-bg, .modal-overlay,
.viya-modal-backdrop, .modal-backdrop {
  background: rgba(17,24,39,0.35) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ── Buttons ────────────────────────────────────────────────── */
/* Primary (gradient pill) */
.primary-button,
.btn.primary, .btn-primary,
.primary, button.primary,
.add-trip-btn, .add-project-btn,
.project-modal-save, .trip-modal-save,
.add-product-main, .pay-order, .export-btn,
.add-biz-btn, .modal-save,
button[class*="save-btn"],
button[class*="add-btn"],
.save-btn, .complete-sale {
  background: var(--ui-primary-grad) !important;
  color: var(--card) !important;
  border: none !important;
  border-radius: var(--ui-r-btn) !important;
  box-shadow: var(--ui-primary-glow) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  transition: var(--ui-ease) !important;
}

.primary-button:not(:disabled):hover,
.btn.primary:not(:disabled):hover,
.btn-primary:not(:disabled):hover,
.add-trip-btn:not(:disabled):hover,
.add-product-main:not(:disabled):hover,
.pay-order:not(:disabled):hover,
.save-btn:not(:disabled):hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 20px 48px rgba(24,95,165,0.38) !important;
  filter: brightness(1.06) !important;
}

/* Secondary (ghost pill) */
.secondary-button,
.btn.secondary, .btn-secondary,
.secondary, button.secondary,
.ghost, .ghost-button,
.view-btn, .tab-pill, .add-year-btn,
.filter-btn, .scan-bill-btn,
.print-order, .pdf-order, .save-order,
.biz-open-btn, .customer-tool-btn,
.add-customer {
  background: rgba(255,255,255,0.80) !important;
  color: var(--ui-primary) !important;
  border: 1px solid rgba(24,95,165,0.28) !important;
  border-radius: var(--ui-r-btn) !important;
  font-weight: 700 !important;
  -webkit-backdrop-filter: var(--ui-glass-blur) !important;
  backdrop-filter: var(--ui-glass-blur) !important;
  -webkit-backdrop-filter: var(--ui-glass-blur) !important;
  transition: var(--ui-ease) !important;
}

.secondary-button:not(:disabled):hover,
.btn.secondary:not(:disabled):hover,
.view-btn:not(:disabled):hover {
  background: rgba(24,95,165,0.08) !important;
  border-color: rgba(24,95,165,0.50) !important;
  transform: translateY(-1px) !important;
}

/* Danger */
.delete-btn, .btn-danger, .danger,
.danger-button, .customer-tool-btn.danger {
  background: var(--ui-red-bg) !important;
  color: var(--ui-red) !important;
  border: 1px solid rgba(239,68,68,0.28) !important;
  border-radius: var(--ui-r-btn) !important;
  font-weight: 700 !important;
  transition: var(--ui-ease) !important;
}

.delete-btn:not(:disabled):hover,
.danger-button:not(:disabled):hover {
  background: rgba(239,68,68,0.16) !important;
  transform: translateY(-1px) !important;
}

/* Success */
.complete-btn, .btn-success, .success-button {
  background: linear-gradient(135deg, #10b981, var(--success)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ui-r-btn) !important;
  box-shadow: 0 14px 30px rgba(16,185,129,0.26) !important;
  transition: var(--ui-ease) !important;
}

/* Icon-only buttons */
.viya-icon-btn, .notification-button,
.icon-btn, .menu-btn {
  border-radius: 14px !important;
  border: 1px solid var(--ui-border) !important;
  background: rgba(255,255,255,0.88) !important;
  -webkit-backdrop-filter: var(--ui-glass-blur) !important;
  backdrop-filter: var(--ui-glass-blur) !important;
  -webkit-backdrop-filter: var(--ui-glass-blur) !important;
  transition: var(--ui-ease) !important;
}

.viya-icon-btn:hover, .notification-button:hover,
.icon-btn:hover, .menu-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--ui-shadow) !important;
  border-color: rgba(24,95,165,0.30) !important;
}

/* Disabled state */
button:disabled, .btn:disabled, .button:disabled {
  opacity: 0.48 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: none !important;
}

/* ── Inputs & Selects ───────────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select,
textarea,
.input-box,
.search-box,
.prod-search,
.cust-select,
.viya-header-search {
  border-radius: var(--ui-r-input) !important;
  border: 1px solid var(--ui-border) !important;
  background: rgba(255,255,255,0.85) !important;
  color: var(--ui-text) !important;
  transition: var(--ui-ease) !important;
}

input:not([type=checkbox]):not([type=radio]):focus,
select:focus, textarea:focus,
.input-box:focus-within,
.prod-search:focus-within {
  outline: none !important;
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 3px rgba(24,95,165,0.14) !important;
  background: var(--card) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--ui-muted-2) !important;
}

/* ── Navigation sidebar active state ────────────────────────── */
.sidebar-nav a.active,
.viya-sidebar-nav a.active,
.nav a.active {
  background: var(--ui-primary-grad) !important;
  color: var(--card) !important;
  box-shadow: 0 12px 28px rgba(24,95,165,0.30) !important;
}

.sidebar-nav a:not(.active):hover,
.viya-sidebar-nav a:not(.active):hover,
.nav a:not(.active):hover {
  background: rgba(24,95,165,0.10) !important;
  color: var(--ui-primary) !important;
}

/* ── App topbar ─────────────────────────────────────────────── */
.viya-app-header,
.topbar, .dashboard-topbar,
.pos-header {
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid var(--ui-glass-border) !important;
  border-radius: 20px !important;
  -webkit-backdrop-filter: var(--ui-glass-blur) !important;
  backdrop-filter: var(--ui-glass-blur) !important;
  -webkit-backdrop-filter: var(--ui-glass-blur) !important;
  box-shadow: var(--ui-shadow) !important;
}

/* ── Status pills / badges ───────────────────────────────────── */
.status-pill, .badge, .pill, .status {
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
}

.status.paid, .status-pill.paid,
.badge-success, .pill.paid {
  background: var(--ui-green-bg) !important;
  color: #065f46 !important;
  border: 1px solid rgba(16,185,129,0.28) !important;
}

.status.due, .status.pending, .status-pill.pending,
.badge-warning, .pill.due {
  background: var(--ui-orange-bg) !important;
  color: #92400e !important;
  border: 1px solid rgba(245,158,11,0.28) !important;
}

.status.overdue, .status-pill.overdue,
.badge-danger, .pill.overdue {
  background: var(--ui-red-bg) !important;
  color: #991b1b !important;
  border: 1px solid rgba(239,68,68,0.28) !important;
}

.status-pill.active, .active-count {
  background: var(--ui-green-bg) !important;
  color: #065f46 !important;
  border: 1px solid rgba(16,185,129,0.28) !important;
}

/* ── Tables ─────────────────────────────────────────────────── */
table {
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
  width: 100% !important;
}

thead th, th {
  background: rgba(24,95,165,0.06) !important;
  color: var(--ui-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border: none !important;
  padding: 10px 16px !important;
}

thead th:first-child { border-radius: 12px 0 0 12px !important; }
thead th:last-child  { border-radius: 0 12px 12px 0 !important; }

td {
  background: rgba(255,255,255,0.82) !important;
  border-top: 1px solid rgba(148,163,184,0.12) !important;
  border-bottom: 1px solid rgba(148,163,184,0.12) !important;
  color: var(--ui-text) !important;
  padding: 12px 16px !important;
  transition: var(--ui-ease) !important;
}

td:first-child {
  border-left: 1px solid rgba(148,163,184,0.12) !important;
  border-radius: 12px 0 0 12px !important;
}
td:last-child {
  border-right: 1px solid rgba(148,163,184,0.12) !important;
  border-radius: 0 12px 12px 0 !important;
}

tbody tr:hover td {
  background: rgba(24,95,165,0.05) !important;
  border-color: rgba(24,95,165,0.14) !important;
}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state, .no-data, .empty-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 56px 24px !important;
  text-align: center !important;
  border-radius: var(--ui-r-card) !important;
  background: var(--ui-card) !important;
  border: 1.5px dashed rgba(148,163,184,0.35) !important;
  box-shadow: none !important;
}

.empty-state::before {
  content: "📭";
  font-size: 2.8rem;
  display: block;
  margin-bottom: 16px;
  opacity: 0.65;
}

.empty-state p, .empty-state .empty-msg {
  color: var(--ui-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  max-width: 260px;
  line-height: 1.5;
}

/* ── Single-selection system ─────────────────────────────────── */
/* Cards / list items that can be selected */
.selectable {
  cursor: pointer;
  transition: var(--ui-ease) !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--ui-r-card) !important;
}

.selectable:hover {
  border-color: rgba(24,95,165,0.25) !important;
  transform: scale(1.01) !important;
  box-shadow: var(--ui-shadow) !important;
}

.selectable.selected,
.selectable.active-item,
[data-selected="true"],
.product-card.selected,
.customer-card.selected,
.trip-card.selected {
  border: 2px solid var(--ui-primary) !important;
  box-shadow: 0 0 0 4px rgba(24,95,165,0.14), var(--ui-shadow-md) !important;
  transform: scale(1.02) !important;
  background: rgba(24,95,165,0.04) !important;
}

/* Category / filter tab chips */
.cat.active, .cat-btn.active,
.tab.active, .trip-tab.active,
.filter-btn.active, .pay-btn.active {
  background: var(--ui-primary-grad) !important;
  color: var(--card) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(24,95,165,0.28) !important;
}

/* ── Skeleton shimmer (UNIFIED) ───────────────────────────────────────────────
   Single keyframe `viya-shimmer` + theme-aware colours from the --viya-skel-*
   tokens (defined in the inlined skeleton.css section below, incl. dark mode).
   Previously this block used a SEPARATE `ui-shimmer` keyframe with hard-coded
   purple that, because of !important, overrode the blue-grey shimmer on every
   page → two different shimmers. Now there is ONE shimmer everywhere. */
.skel-cell,
html.viya-loading .viya-skel-target,
html.viya-loading [data-skel] {
  background: linear-gradient(90deg, var(--viya-skel-base) 25%, var(--viya-skel-hi) 50%, var(--viya-skel-base) 75%) !important;
  background-size: 200% 100% !important;
  animation: viya-shimmer 1.55s ease-in-out infinite !important;
  border-radius: 8px !important;
}

/* ── KPI / Stat icon colors ──────────────────────────────────── */
.stat-blue, .kpi-icon.blue, .blue-icon {
  background: var(--ui-blue-bg) !important;
  color: var(--primary) !important;
}
.stat-purple, .kpi-icon.purple, .purple-icon {
  background: var(--ui-purple-bg) !important;
  color: var(--ui-primary) !important;
}
.stat-green, .kpi-icon.green, .green-icon {
  background: var(--ui-green-bg) !important;
  color: var(--success) !important;
}
.stat-orange, .kpi-icon.orange, .orange-icon {
  background: var(--ui-orange-bg) !important;
  color: #d97706 !important;
}

/* ── Dashboard stat cards ─────────────────────────────────────── */
.stats-grid, .stats-grid.premium-stats, .kpis {
  display: grid !important;
  gap: 16px !important;
}

.stat-card, .kpi-card {
  position: relative;
  overflow: hidden;
}

.stat-card::before, .kpi-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(24,95,165,0.10), transparent 70%);
  pointer-events: none;
}

/* ── Quick action cards ────────────────────────────────────────── */
.action-card {
  border-radius: var(--ui-r-card) !important;
  transition: var(--ui-ease) !important;
}

.action-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 60px rgba(15,23,42,0.18) !important;
}

/* ── Section headings ─────────────────────────────────────────── */
.section-heading h2,
.panel-head h2, .table-header h2 {
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: var(--ui-text) !important;
}

/* ── Row actions (table) ─────────────────────────────────────── */
.row-action, .view-btn.row-action {
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(24,95,165,0.25) !important;
  background: rgba(24,95,165,0.06) !important;
  color: var(--ui-primary) !important;
  transition: var(--ui-ease) !important;
}

.row-action:hover {
  background: var(--ui-primary-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-1px) !important;
}

/* ── POS / Checkout premium styles ────────────────────────────── */

/* Product grid item */
.prod-item, .product-list-item {
  background: rgba(255,255,255,0.90) !important;
  border: 1.5px solid var(--ui-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
  transition: var(--ui-ease) !important;
  cursor: pointer;
}

.prod-item:hover, .product-list-item:hover {
  border-color: rgba(24,95,165,0.30) !important;
  box-shadow: 0 12px 32px rgba(24,95,165,0.14) !important;
  transform: translateY(-2px) !important;
}

.prod-item.selected, .product-list-item.in-cart {
  border: 2px solid var(--ui-primary) !important;
  background: rgba(24,95,165,0.05) !important;
  box-shadow: 0 0 0 3px rgba(24,95,165,0.12), 0 12px 30px rgba(24,95,165,0.18) !important;
}

/* Cart / order panel */
.order-panel, .cart-panel, .checkout-panel {
  background: rgba(255,255,255,0.92) !important;
  border-radius: 20px !important;
  border: 1px solid var(--ui-glass-border) !important;
  -webkit-backdrop-filter: var(--ui-glass-blur) !important;
  backdrop-filter: var(--ui-glass-blur) !important;
  -webkit-backdrop-filter: var(--ui-glass-blur) !important;
}

/* Cart items */
.cart-item, .order-item {
  border-radius: 14px !important;
  background: rgba(24,95,165,0.04) !important;
  border: 1px solid rgba(24,95,165,0.10) !important;
  margin-bottom: 8px !important;
  transition: var(--ui-ease) !important;
}

/* Quantity stepper */
.qty, .quantity-control,
.qty-ctrl, .item-qty {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  border-radius: 999px !important;
  border: 1px solid var(--ui-border) !important;
  background: rgba(255,255,255,0.92) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

.qty button, .qty-ctrl button,
.quantity-control button {
  min-width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ui-primary) !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: var(--ui-ease) !important;
}

.qty button:hover, .qty-ctrl button:hover,
.quantity-control button:hover {
  background: rgba(24,95,165,0.10) !important;
  transform: none !important;
}

/* POS Category tabs */
.cat, .cat-btn, .category-tab {
  border-radius: 999px !important;
  font-weight: 800 !important;
  transition: var(--ui-ease) !important;
  border: 1.5px solid var(--ui-border) !important;
  background: rgba(255,255,255,0.88) !important;
  color: var(--ui-muted) !important;
}

.cat:hover, .cat-btn:hover, .category-tab:hover {
  border-color: rgba(24,95,165,0.30) !important;
  color: var(--ui-primary) !important;
  background: rgba(24,95,165,0.07) !important;
}

/* Payment method buttons */
.pay-btn, .payment-method-btn {
  border-radius: 14px !important;
  border: 1.5px solid var(--ui-border) !important;
  background: rgba(255,255,255,0.88) !important;
  font-weight: 800 !important;
  transition: var(--ui-ease) !important;
}

.pay-btn.active, .payment-method-btn.active {
  background: var(--ui-primary-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(24,95,165,0.28) !important;
}

/* POS search */
.prod-search, .product-search-box {
  border-radius: 14px !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* Checkout total card */
.total-card, .order-total, .summary-total {
  background: var(--ui-primary-grad) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: var(--ui-primary-glow) !important;
}

/* Floating checkout button */
.floating-checkout,
button[id*="checkout"], button[id*="completeSale"],
#completeSaleBtn, .pay-now-btn {
  background: var(--ui-primary-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ui-r-btn) !important;
  box-shadow: var(--ui-primary-glow) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  min-height: 52px !important;
  width: 100% !important;
  transition: var(--ui-ease-spring) !important;
}

#completeSaleBtn:not(:disabled):hover,
.pay-now-btn:not(:disabled):hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 22px 50px rgba(24,95,165,0.40) !important;
}

/* ── Metric cards (trip detail) ──────────────────────────────── */
.metric-blue  { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important; }
.metric-green { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important; }
.metric-orange{ background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important; }
.metric-red   { background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important; }
.metric-purple{ background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%) !important; }

/* ── Settings / sections ─────────────────────────────────────── */
.settings-menu {
  border-radius: var(--ui-r-card) !important;
}

.settings-link, .settings-menu a {
  border-radius: 12px !important;
  transition: var(--ui-ease) !important;
}

.settings-link.active, .settings-menu a.active {
  background: var(--ui-primary-grad) !important;
  color: #fff !important;
}

.settings-link:hover:not(.active),
.settings-menu a:hover:not(.active) {
  background: rgba(24,95,165,0.08) !important;
  color: var(--ui-primary) !important;
}

/* ── Toggle / switch ────────────────────────────────────────── */
.switch-option.active, .switch-options .active {
  background: var(--ui-primary-grad) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(24,95,165,0.24) !important;
}

/* ── Business chip (active) ─────────────────────────────────── */
.business-chip.active {
  background: var(--ui-primary-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ── Avatar / profile ───────────────────────────────────────── */
.viya-avatar, .avatar {
  background: var(--ui-primary-grad) !important;
  color: #fff !important;
}

/* ── Logout button ──────────────────────────────────────────── */
.logout-button, .viya-logout {
  border-radius: 14px !important;
  background: rgba(239,68,68,0.08) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(239,68,68,0.22) !important;
  transition: var(--ui-ease) !important;
}

.logout-button:hover, .viya-logout:hover {
  background: rgba(239,68,68,0.14) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 28px rgba(239,68,68,0.18) !important;
}

/* ── Trip status pills ───────────────────────────────────────── */
.status-pill {
  border-radius: 999px !important;
}

/* ── Unpaid row ──────────────────────────────────────────────── */
.unpaid-row {
  border-radius: 14px !important;
  background: rgba(239,68,68,0.07) !important;
  border: 1px solid rgba(239,68,68,0.18) !important;
}

/* ── Page topbar header (h1) ────────────────────────────────── */
.topbar-title h1, .customer-head h1,
.page-header h1, .settings-title h1,
.register-title h1, .main-head h1,
.sales-head h1 {
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  color: var(--ui-text) !important;
  background: var(--ui-primary-grad);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Section heading ─────────────────────────────────────────── */
.section-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}

/* ── Scrollbar styling ───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(24,95,165,0.25);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(24,95,165,0.45);
}

/* ── Page transition fade ────────────────────────────────────── */
@keyframes ui-pagein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.main-content, .viya-main, .main, .content-section {
  animation: ui-pagein 0.3s ease forwards;
}

/* ── Mobile responsive overrides ────────────────────────────── */
@media (max-width: 768px) {
  .stats-grid, .stats-grid.premium-stats, .kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .modern-actions, .quick-actions {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .tables-row {
    grid-template-columns: 1fr !important;
  }

  table, thead, tbody, th, td, tr {
    display: block !important;
  }

  thead tr { display: none !important; }

  td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(148,163,184,0.12) !important;
    padding: 10px 14px !important;
  }

  td:first-child  {
    border-radius: 14px 14px 0 0 !important;
    border-bottom: none !important;
    font-weight: 800 !important;
  }
  td:last-child   { border-radius: 0 0 14px 14px !important; border: none !important; }

  tbody tr {
    background: rgba(255,255,255,0.88) !important;
    border-radius: 14px !important;
    border: 1px solid var(--ui-glass-border) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
  }

  td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    color: var(--ui-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    margin-right: 8px;
  }
}

@media (max-width: 480px) {
  .stats-grid, .stats-grid.premium-stats, .kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .primary-button,
  .secondary-button,
  .header-actions .primary-button,
  .header-actions .secondary-button {
    width: 100% !important;
    justify-content: center !important;
  }

  .header-actions {
    flex-direction: column !important;
  }

  input, select, textarea {
    font-size: 16px !important;
  }

  .main-content, .viya-main, .main {
    padding: 14px !important;
  }
}

/* ── Checkout mobile POS ─────────────────────────────────────── */
@media (max-width: 768px) {
  .pos-body {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr auto !important;
  }

  .order-panel, .cart-panel {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 50 !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.12) !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
  }
}

/* ── Loading fade-in content ─────────────────────────────────── */
.viya-content-ready {
  animation: ui-pagein 0.28s ease forwards !important;
}

/* ── Focus-visible ring ──────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--ui-primary) !important;
  outline-offset: 2px !important;
}

/* ── Ensure no horizontal scroll ────────────────────────────── */
.main-content, .viya-main, .main,
.dashboard-shell, .layout, .app {
  max-width: 100% !important;
  overflow-x: hidden !important;
}


/* ======= skeleton.css ======= */
/*
   ViyaBook Skeleton Loading    skeleton.css
   ── ONE shared loading system for every page ──
   Light + dark colours come from CSS variables, so the SAME shimmer,
   speed and shape appear everywhere. Do not add per-page skeleton CSS.
    */

/*  Theme tokens (single source of truth for skeleton colours)  */
:root {
  --viya-skel-base: #e8edf5;   /* shimmer base   */
  --viya-skel-hi:   #f4f7fc;   /* shimmer highlight */
  --viya-skel-card: var(--card);   /* card surface while loading */
  --viya-skel-page: var(--bg);   /* page background while loading */
}
html.viya-dv {
  --viya-skel-base: #1d2839;
  --viya-skel-hi:   #27344a;
  --viya-skel-card: #0f1830;
  --viya-skel-page: #0a0f1e;
}

/*  Shimmer keyframe  */
@keyframes viya-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/*  Base shimmer cell (used by JS-injected elements + generic markup)  */
.skel-cell,
.skel,
.skel-line {
  background: linear-gradient(90deg, var(--viya-skel-base) 25%, var(--viya-skel-hi) 50%, var(--viya-skel-base) 75%);
  background-size: 200% 100%;
  animation: viya-shimmer 1.55s ease-in-out infinite;
  border-radius: 5px;
  display: block;
}

/* Generic block shimmer (e.g. dashboard KPI values) */
.skel { color: transparent !important; border-radius: 8px; overflow: hidden; }
/* Generic text line shimmer (e.g. dashboard card lists) */
.skel-line { height: 14px; margin: 10px 0; border-radius: 7px; }

html,
body {
  background: var(--viya-skel-page);
}

html.viya-loading body {
  background: var(--viya-skel-page) !important;
}

/* Avatar circle */
.skel-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Skeleton table row */
.skel-row {
  pointer-events: none;
}
.skel-row td {
  padding: 13px 16px !important;
  border-bottom: 1px solid #f0f4fa;
  vertical-align: middle;
}
html.viya-dv .skel-row td { border-bottom-color: #1b2740; }

/* Skeleton list item */
.skel-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f4fa;
  pointer-events: none;
}
html.viya-dv .skel-list-item { border-bottom-color: #1b2740; }

/*  data-skel inline shimmer spans  */
[data-skel] .skel-val,
span.skel-val {
  display: inline-block;
  background: linear-gradient(90deg, var(--viya-skel-base) 25%, var(--viya-skel-hi) 50%, var(--viya-skel-base) 75%);
  background-size: 200% 100%;
  animation: viya-shimmer 1.55s ease-in-out infinite;
  border-radius: 5px;
  color: transparent;
}

/*
   CSS-driven skeleton: html.viya-loading

   These selectors cover all ViyaBook page types
   without needing per-element HTML changes.
    */

/* Common shimmer mixin applied via class */
html.viya-loading .viya-skel-target,
html.viya-loading .kpis .kpi-value,
html.viya-loading .kpis .kpi-note,
html.viya-loading .summary-grid .summary strong,
html.viya-loading .summary-grid .summary p.sub,
html.viya-loading .summary-tile strong,
html.viya-loading .closing-row strong,
html.viya-loading .summary-item strong,
html.viya-loading .page-head h1,
html.viya-loading .page-head .subtitle,
html.viya-loading .main-head h1,
html.viya-loading .main-head p,
html.viya-loading .dashboard-title,
html.viya-loading .dashboard-subtitle,
html.viya-loading .topbar input,
html.viya-loading .dashboard-topbar input,
html.viya-loading .viya-app-title,
html.viya-loading .card h2,
html.viya-loading .card h3,
html.viya-loading [data-skel] {
  color: transparent !important;
  background: linear-gradient(90deg, var(--viya-skel-base) 25%, var(--viya-skel-hi) 50%, var(--viya-skel-base) 75%) !important;
  background-size: 200% 100% !important;
  animation: viya-shimmer 1.55s ease-in-out infinite !important;
  border-radius: 5px !important;
  display: inline-block;
  min-width: 64px;
  /* Hide child content */
  position: relative;
}

/* Force minimum width on small values */
html.viya-loading .kpis .kpi-value { min-width: 100px; min-height: 28px; }
html.viya-loading .kpis .kpi-note  { min-width: 80px;  min-height: 14px; margin-top: 4px; }
html.viya-loading .summary-grid .summary strong { min-width: 90px; min-height: 22px; }
html.viya-loading .summary-grid .summary p.sub  { min-width: 120px; min-height: 13px; }
html.viya-loading .summary-tile strong  { min-width: 80px; min-height: 20px; }
html.viya-loading .closing-row strong   { min-width: 80px; min-height: 18px; }
html.viya-loading .summary-item strong  { min-width: 36px; min-height: 18px; }
html.viya-loading .page-head h1,
html.viya-loading .main-head h1,
html.viya-loading .dashboard-title { min-width: 180px; min-height: 32px; }
html.viya-loading .page-head .subtitle,
html.viya-loading .main-head p,
html.viya-loading .dashboard-subtitle { min-width: 260px; min-height: 14px; }
html.viya-loading .topbar input,
html.viya-loading .dashboard-topbar input { min-height: 42px; width: 100%; }

/* Hide icons/labels inside shimmer containers so they don't show through */
html.viya-loading .kpis .kpi-icon { opacity: 0.3; }

/*  Sidebar skeleton (sidebar is dark in both themes → translucent shimmer)  */
html.viya-loading .sidebar .biz-name,
html.viya-loading .sidebar .biz-type,
html.viya-loading .sidebar .nav-link span,
html.viya-loading .sidebar nav a,
html.viya-loading .viya-sidebar nav a,
html.viya-loading [id="sidebarBizName"],
html.viya-loading [id="sidebarBizType"] {
  color: transparent !important;
  background: linear-gradient(90deg, rgba(255,255,255,.08) 25%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.08) 75%) !important;
  background-size: 200% 100% !important;
  animation: viya-shimmer 1.55s ease-in-out infinite !important;
  border-radius: 4px !important;
  display: inline-block;
  min-width: 80px;
}

html.viya-loading .sidebar .nav-link span,
html.viya-loading .sidebar nav a,
html.viya-loading .viya-sidebar nav a {
  min-height: 14px;
  min-width: 108px;
}

html.viya-loading .card,
html.viya-loading .summary,
html.viya-loading .summary-tile,
html.viya-loading .stat-card,
html.viya-loading .mini-card {
  background-color: var(--viya-skel-card) !important;
}

/*  Settings skeleton  */
html.viya-loading .field input:not([type=checkbox]):not([type=radio]),
html.viya-loading .field select,
html.viya-loading .field textarea {
  color: transparent !important;
  background: linear-gradient(90deg, var(--viya-skel-base) 25%, var(--viya-skel-hi) 50%, var(--viya-skel-base) 75%) !important;
  background-size: 200% 100% !important;
  animation: viya-shimmer 1.55s ease-in-out infinite !important;
  border-radius: 8px !important;
}

/*  Staff stats  */
html.viya-loading .stat-value,
html.viya-loading [class*="stat-card"] strong,
html.viya-loading [class*="stats-card"] strong {
  color: transparent !important;
  background: linear-gradient(90deg, var(--viya-skel-base) 25%, var(--viya-skel-hi) 50%, var(--viya-skel-base) 75%) !important;
  background-size: 200% 100% !important;
  animation: viya-shimmer 1.55s ease-in-out infinite !important;
  border-radius: 5px !important;
  display: inline-block;
  min-width: 48px;
}

/*
   Timeout banner
    */
#viyaSkelBar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: #0f2549;
  color: #fff;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
#viyaSkelBar.visible { display: flex; }
#viyaSkelBar button {
  background: #0b72ff;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 14px;
  font: inherit;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
#viyaSkelBar button:hover { background: #0057e0; }

/*
   Page-leave fade (prevents white flash between pages)
    */
body.viya-leaving {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

/* Content fade-in after skeleton done */
.viya-content-ready {
  animation: viya-fadein 0.25s ease forwards;
}
@keyframes viya-fadein {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

/*
   Responsive: skeleton works on all breakpoints
    */
@media (max-width: 768px) {
  html.viya-loading .kpis .kpi-value { min-width: 70px; }
  html.viya-loading .summary-grid .summary strong { min-width: 60px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   STANDARD SKELETON OVERLAY  (#viyaSkelStd / .viya-skel-std)
   Mirror of the block in skeleton.css so pages that load ONLY viyabook.css (most
   of them) also get the shared full-screen skeleton. One self-contained loader:
   fake sidebar lines · header (title + subtitle + pill + top-right button) ·
   4 KPI cards · content card (4 tab pills + 6 row bars). `.vss-simple` drops the
   KPI cards + tab pills for paper/form pages. Theme-aware via --viya-skel-*. */
.viya-skel-std {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  background: var(--viya-skel-page);
  overflow: hidden;
  opacity: 1;
  transition: opacity .28s ease;
}
.viya-skel-std.viya-skel-hide { opacity: 0; pointer-events: none; }

.viya-skel-std .vss-bar {
  background: linear-gradient(90deg, var(--viya-skel-base) 25%, var(--viya-skel-hi) 50%, var(--viya-skel-base) 75%);
  background-size: 200% 100%;
  animation: viya-shimmer 1.55s ease-in-out infinite;
  border-radius: 8px;
}

.viya-skel-std .vss-side {
  width: 244px;
  flex-shrink: 0;
  background: #101a30;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.viya-skel-std .vss-side .vss-logo,
.viya-skel-std .vss-side .vss-nav {
  background: linear-gradient(90deg, rgba(255,255,255,.07) 25%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.07) 75%);
  background-size: 200% 100%;
  animation: viya-shimmer 1.55s ease-in-out infinite;
  border-radius: 7px;
}
.viya-skel-std .vss-side .vss-logo { height: 34px; width: 140px; margin-bottom: 16px; }
.viya-skel-std .vss-side .vss-nav  { height: 13px; }

.viya-skel-std .vss-main {
  flex: 1;
  min-width: 0;
  padding: 26px 30px;
  overflow: hidden;
}

.viya-skel-std .vss-head  { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 26px; }
.viya-skel-std .vss-htext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.viya-skel-std .vss-title { height: 30px; width: 240px; max-width: 55%; }
.viya-skel-std .vss-sub   { height: 14px; width: 330px; max-width: 78%; }
.viya-skel-std .vss-pill  { height: 20px; width: 92px; border-radius: 999px; }
.viya-skel-std .vss-btn   { height: 42px; width: 150px; border-radius: 11px; flex-shrink: 0; }

.viya-skel-std .vss-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.viya-skel-std .vss-kpi {
  background: var(--viya-skel-card);
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 14px;
  padding: 17px 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.viya-skel-std .vss-kpi .k1 { height: 13px; width: 52%; }
.viya-skel-std .vss-kpi .k2 { height: 26px; width: 72%; }
.viya-skel-std .vss-kpi .k3 { height: 11px; width: 40%; }

.viya-skel-std .vss-card {
  background: var(--viya-skel-card);
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 16px;
  padding: 18px 20px;
}
.viya-skel-std .vss-tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.viya-skel-std .vss-tab  { height: 32px; width: 94px; border-radius: 999px; }
.viya-skel-std .vss-rows { display: flex; flex-direction: column; gap: 16px; }
.viya-skel-std .vss-row  { height: 15px; width: 100%; }
.viya-skel-std .vss-row:nth-child(even) { width: 94%; }

.viya-skel-std.vss-simple .vss-kpis,
.viya-skel-std.vss-simple .vss-tabs { display: none; }
.viya-skel-std.vss-simple .vss-card { padding: 26px 24px; }
.viya-skel-std.vss-simple .vss-rows { gap: 18px; }
.viya-skel-std.vss-simple .vss-row  { height: 17px; }

@media (max-width: 768px) {
  .viya-skel-std .vss-side  { display: none; }
  .viya-skel-std .vss-main  { padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 18px; }
  .viya-skel-std .vss-kpis  { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .viya-skel-std .vss-title { max-width: 70%; }
  .viya-skel-std .vss-btn   { width: 46px; }
}


/* ======= vb-buttons.css ======= */
/* =====================================================================
   vb-buttons.css — master button system for ViyaBook
   Loaded LAST on every page so it wins the cascade. Goal: every button
   is the SAME size/shape, and the standard primary/secondary/danger
   buttons are the SAME solid colours (no gradients) on every page.

   Scope guard (learned from the global-CSS regression): we force
   GEOMETRY on all .btn-family buttons, but force COLOUR only on the
   well-known generic classes. Specialised buttons that pages colour
   themselves (e.g. .btn-approve, .btn-reject, .btn-view) keep their own
   colours — we only normalise their size.
   ===================================================================== */

/* ── Geometry: every button, same size & shape ───────────────────────── */
.btn,
.primary-button,
.secondary-button,
.save-btn,
.primary-btn,
.delete-btn {
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  transition: all .15s !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}
.btn:active { transform: scale(.97) !important; }
.btn:disabled,
.primary-button:disabled,
.save-btn:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ── Primary family — solid var(--primary), no gradient, no shadow ───────────── */
.btn-primary,
.btn-gradient,
.primary-button,
.primary-btn,
.save-btn,
.btn.primary,
button.primary,
#completeSaleBtn {
  background: var(--primary) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--primary) !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.btn-gradient:hover,
.primary-button:hover,
.save-btn:hover,
.btn.primary:hover,
#completeSaleBtn:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

/* ── Secondary / light family ────────────────────────────────────────── */
.btn-secondary,
.secondary-button,
.btn-light,
.btn-soft {
  background: #f0f5ff !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 1px solid #ccd9f0 !important;
  box-shadow: none !important;
}
.btn-secondary:hover,
.btn-light:hover,
.btn-soft:hover {
  background: #dce8ff !important;
  border-color: #adc3e8 !important;
}

/* ── Danger family ───────────────────────────────────────────────────── */
.btn-danger {
  background: #E24B4A !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid #E24B4A !important;
  box-shadow: none !important;
}
.btn-danger:hover { background: #A32D2D !important; border-color: #A32D2D !important; }

/* ── Outline / ghost ─────────────────────────────────────────────────── */
.btn-outline {
  background: transparent !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  box-shadow: none !important;
}
.btn-outline:hover { background: #e6f1fb !important; }
.btn-ghost {
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.btn-ghost:hover { background: #f0f5ff !important; color: var(--text) !important; }

/* ── Size modifiers (after base so they override height) ─────────────── */
.btn-sm { height: 28px !important; min-height: 28px !important; padding: 0 10px !important; font-size: 12px !important; border-radius: 6px !important; }
.btn-lg { height: 44px !important; min-height: 44px !important; padding: 0 20px !important; font-size: 14px !important; border-radius: 10px !important; }
.btn-icon { width: 36px !important; padding: 0 !important; justify-content: center !important; }

/* ── Icons inside buttons ────────────────────────────────────────────── */
.btn i, .btn svg { font-size: 15px !important; flex-shrink: 0 !important; }

/* ── Unified invoice/row Actions dropdown (scoped to .td-dd to avoid
      colliding with the existing .act-btn icon buttons on other pages).
      The .dd-menu is fixed-positioned by toggleDD() in shared-sidebar.js so it
      is never clipped by a table's overflow. ───────────────────────────── */
.td-dd { position: relative; display: inline-flex; }
.td-dd .act-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 10px;
  font-size: 12px; font-weight: 500;
  border-radius: 8px; border: 0.5px solid #c8c6bc;
  background: #fff; color: #1a1a18; cursor: pointer;
  font-family: inherit; white-space: nowrap; transition: all .15s; width: auto;
}
.td-dd .act-btn:hover { background: #f5f5f3; border-color: #888780; }
.td-dd .act-btn.open { border-color: var(--primary); color: var(--primary); background: #E6F1FB; }
.td-dd .act-btn i { font-size: 14px; }
.dd-menu {
  position: absolute; right: 0; top: calc(100% + 5px);
  background: #fff; border: 0.5px solid #c8c6bc; border-radius: 12px;
  padding: 5px; min-width: 200px; z-index: 99999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10); display: none;
}
.dd-menu.open { display: block; }
.dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  font-size: 13px; color: #1a1a18; cursor: pointer;
  border: none; background: none; width: 100%; text-align: left;
  font-family: inherit; transition: background .12s;
}
.dd-item:hover { background: #f5f5f3; }
.dd-item i { font-size: 16px; color: #6b6a65; width: 18px; flex-shrink: 0; }
.dd-item.danger { color: #E24B4A; }
.dd-item.danger i { color: #E24B4A; }
.dd-item.danger:hover { background: #FCEBEB; }
.dd-item.disabled { opacity: .38; pointer-events: none; }
.dd-item.hidden { display: none; }
.dd-divider { height: 0.5px; background: #e8e6de; margin: 4px 0; }
.dd-tag { margin-left: auto; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; }
.dd-tag-paid { background: #E1F5EE; color: #0F6E56; }
.dd-tag-pend { background: #FAEEDA; color: #854F0B; }


/* ======= vb-global.css ======= */

/* =====================================================================
   vb-global.css — ViyaBook global font + icon system
   Loaded on every page. Mirrors the dashboard's font stack and ensures
   the Inter webfont is actually loaded.

   NOTE: the font rule is scoped to html:not([lang="dv"]) so it does NOT
   override the Dhivehi (Faruma / Thaana) font for Dhivehi users — same
   pattern shared-sidebar.js already uses.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* =====================================================================
   Canonical ViyaBook color system — single source of truth.
   Use these variables (var(--primary), var(--danger), …) instead of
   hardcoding hex values. Light defaults here; dark-mode overrides below.
   Adopt incrementally per page; defining them here is non-breaking.
   ===================================================================== */
:root {
  --primary:      var(--primary);
  --primary-dark: var(--primary-dark);
  --bg:#f5f8fc;
  --card:#fff;
  --text:#0b2148;
  --muted:#64748b;
  --border:#e5e7eb;
  --success:      var(--success);
  --warning:      var(--warning);
  --danger:       var(--danger);
}

/* Dark mode (html.viya-dv) — keep light/dark consistent via the same tokens. */
html.viya-dv {
  --primary:      #4f9bff;
  --primary-dark: var(--primary);
  --bg:           #0a0f1e;
  --card:         #0f1830;
  --text:         #e6edf7;
  --muted:        #93a4c0;
  --border:       #22324f;
  --success:      #2dd4a7;
  --warning:      #fbbf24;
  --danger:       #f87171;
}

html:not([lang="dv"]) body,
html:not([lang="dv"]) body * {
  font-family: Inter, "SF Pro Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Tabler icon sizing helpers ──────────────────────────────────────── */
.ti { line-height: 1; vertical-align: -0.125em; }
.ti-sm { font-size: 14px !important; }
.ti-md { font-size: 18px !important; }
.ti-lg { font-size: 22px !important; }
.ti-xl { font-size: 28px !important; }

/* Icons inside buttons */
.btn .ti, button .ti { font-size: 15px !important; flex-shrink: 0; }

/* Icons inside sidebar nav links */
.sidebar-nav a .ti, .viya-sidebar-nav a .ti, .nav-link .ti, .nav-item .ti {
  font-size: 18px !important;
  flex-shrink: 0;
}

/* ── Modal card visibility guard ─────────────────────────────────────────
   ui.css styles the generic .modal class as a dark, blurred BACKDROP with
   !important. On pages where the modal CARD also uses class="modal" (inside a
   .modal-overlay), that turns the card into an invisible dark blur. Force any
   .modal that is the direct card of a .modal-overlay back to an opaque card.
   (Pages that use .modal as the backdrop + .modal-card as the card are not
   matched by this selector, so they are unaffected.) */
.modal-overlay > .modal,
.modal-overlay > form.modal {
  background: var(--card) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10000 !important;
}
html[data-theme="dark"] .modal-overlay > .modal,
html[data-theme="dark"] .modal-overlay > form.modal { background: #0d1f3c !important; }

/* ── Modern Filter Bar (all pages) ── */
.vb-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 10px;
  flex-wrap: wrap;
}

.vb-filter-select {
  height: 38px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 500;
  padding: 0 32px 0 12px;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 140px;
  transition: border-color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vb-filter-select:hover { border-color: var(--primary); }
.vb-filter-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(24,95,165,0.1); }

.vb-filter-date {
  height: 38px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 500;
  padding: 0 10px;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  min-width: 130px;
  transition: border-color 0.15s;
}
.vb-filter-date:hover { border-color: var(--primary); }
.vb-filter-date:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(24,95,165,0.1); }
.vb-filter-date::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }

/* ── ViyaBook canonical search bar — single standard ─────────────────────
   .vb-search is the canonical class. .vb-filter-search(-wrap) is kept as an
   exact visual alias so the pages already using it adopt the new look with no
   markup change. Icon sits on the LEFT. Dark mode targets the app's real class
   html.viya-dv (html.dark is also covered for the standalone login page). */
.vb-search,
.vb-filter-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 160px;
  height: 44px;
  box-sizing: border-box;
}
.vb-search > i,
.vb-search > .search-icon,
.vb-filter-search-wrap > .search-icon,
.vb-filter-search-wrap > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 1;
  color: #64748b;
  pointer-events: none;
  z-index: 1;
}
.vb-search input,
input.vb-filter-search {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 44px;      /* left room for the 18px icon at left:14px — never overlaps */
  border: 1px solid #d8e1ee;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  background: #fff;
  outline: none;
  font-family: inherit;
  flex: 1;
  min-width: 160px;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vb-search input::placeholder,
input.vb-filter-search::placeholder { color: #64748b; font-weight: 400; font-size: 14px; }
.vb-search input:focus,
input.vb-filter-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(24,95,165,0.10); }
.vb-search input:hover:not(:focus),
input.vb-filter-search:hover:not(:focus) { border-color: #cbd5e1; }
/* Dhivehi / RTL: icon flips to the right, padding flips so text never overlaps it. */
body.lang-dv .vb-search > i,
body.lang-dv .vb-search > .search-icon,
body.lang-dv .vb-filter-search-wrap > .search-icon,
body.lang-dv .vb-filter-search-wrap > i { left: auto; right: 14px; }
body.lang-dv .vb-search input,
body.lang-dv input.vb-filter-search { padding: 0 44px 0 14px; }
/* dark mode — match the app's solid-navy input palette (consistent with every
   other field in viya-dv); also covers html.dark for the login page. */
html.viya-dv .vb-search input, html.dark .vb-search input,
html.viya-dv input.vb-filter-search, html.dark input.vb-filter-search {
  background: #071030;
  border-color: #1e3a6e;
  color: #e2e8f0;
}
html.viya-dv .vb-search input:focus, html.dark .vb-search input:focus,
html.viya-dv input.vb-filter-search:focus, html.dark input.vb-filter-search:focus {
  border-color: #185FA5;
  box-shadow: 0 0 0 3px rgba(24,95,165,0.20);
}
html.viya-dv .vb-search i, html.viya-dv .vb-search .search-icon,
html.dark .vb-search i,
html.viya-dv .vb-filter-search-wrap .search-icon { color: #64748b; }

/* Tab pills row */
.vb-tab-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0 12px;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
}

.vb-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}
.vb-tab:hover { border-color: var(--primary); color: var(--primary); }
.vb-tab.active {
  background: #eff6ff;
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}

.vb-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  background: #e2e8f0;
  color: #475569;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.vb-tab.active .vb-tab-count {
  background: var(--primary);
  color: #fff;
}

/* Dark mode */
html.viya-dv .vb-filter-select,
html.viya-dv .vb-filter-date,
html.viya-dv .vb-filter-search {
  background: #071030 !important;
  border-color: #1e3a6e !important;
  color: #e2e8f0 !important;
}
html.viya-dv .vb-tab {
  background: #071030 !important;
  border-color: #1e3a6e !important;
  color: #94a3b8 !important;
}
html.viya-dv .vb-tab.active {
  background: #0d2a5e !important;
  border-color: var(--primary) !important;
  color: #60a5fa !important;
}
html.viya-dv .vb-tab.active .vb-tab-count {
  background: var(--primary) !important;
  color: #fff !important;
}
html.viya-dv .vb-tab-count {
  background: #1e3a6e !important;
  color: #94a3b8 !important;
}
html.viya-dv .vb-tab-row { border-bottom-color: #1e3a6e !important; }