/*
 * Shared high-contrast palette.
 *
 * The four colour families come from the approved reference: deep navy for
 * primary actions, ink/teal for dark accents, warm ivory for calm surfaces,
 * and a clean white canvas.  Every primary action has white text
 * on a dark background, so it remains readable at a glance.
 */
:root {
  --vr-primary: #0b0a68;
  --vr-primary-hover: #05054d;
  --vr-primary-rgb: 11, 10, 104;
  --vr-primary-soft: #eeeefa;
  --vr-primary-softer: #f7f7fc;
  --vr-primary-border: #d4d3ef;
  --vr-ink: #042d35;
  --vr-ink-hover: #022128;
  --vr-green: #005b3e;
  --vr-green-hover: #00442e;
  --vr-canvas: #ffffff;
  --vr-surface: #ffffff;
  --vr-warm-surface: #f4f0e8;
  --vr-text: #263f49;
  --vr-text-strong: #172f38;
  --vr-muted: #60727b;
  --vr-border: #dce3e5;
}

body { color: var(--vr-text); background: var(--vr-canvas); }
a { color: var(--vr-primary); }
a:hover { color: var(--vr-primary-hover); }

/* One type scale across the public site, user area and admin.  Red Hat Text
   stays readable in dense tables; Red Hat Display is reserved for headings. */
body, button, input, select, textarea, .btn, .form-control, .form-select,
.custom-select { font-family: 'Red Hat Text', sans-serif; }
h1, h2, h3, h4, h5, h6, .vpage-title, .card-title, .page-title {
  font-family: 'Red Hat Display', 'Red Hat Text', sans-serif;
  color: var(--vr-text-strong);
}

/* Shared Tabler-like control geometry.  Each variant below keeps the same
   height, padding, radius and weight so actions look intentional everywhere. */
.btn:not(.btn-link), .vbtn-default, .vbtn-primary, .vbtn-success,
.vbtn-outline-success, .vbtn-rounded, .vnext-btn, .vident-btn,
.vident-btn-outline, .vbook-cta, .vbcard-btn--primary, .vauth-submit,
.vsupport-submit, .vimport-next, .vimport-back, .vimport-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border-radius: 8px !important;
  font-family: 'Red Hat Text', sans-serif !important;
  font-size: 14px;
  font-weight: 700 !important;
  letter-spacing: 0;
  line-height: 1.25;
  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease,
    box-shadow .15s ease, transform .15s ease;
}
.btn:not(.btn-link):focus-visible, .vbtn-default:focus-visible,
.vbtn-primary:focus-visible, .vbtn-success:focus-visible,
.vbtn-outline-success:focus-visible, .vnext-btn:focus-visible,
.vident-btn:focus-visible, .vident-btn-outline:focus-visible,
.vbook-cta:focus-visible, .vauth-submit:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(var(--vr-primary-rgb), .22) !important;
}
.btn:not(.btn-link):active, .vbtn-default:active, .vbtn-primary:active,
.vbtn-success:active, .vbtn-outline-success:active, .vnext-btn:active,
.vident-btn:active, .vbook-cta:active { transform: translateY(1px); }

/* Neutral actions remain visible on the new pale canvas. */
.btn-secondary, .btn-light, .btn-default, .vbtn-default, .vbtn-light,
.vimport-back, .vimport-secondary {
  background: var(--vr-surface) !important;
  border-color: var(--vr-border) !important;
  color: var(--vr-text-strong) !important;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-light:hover, .btn-light:focus,
.btn-default:hover, .btn-default:focus, .vbtn-default:hover, .vbtn-default:focus,
.vbtn-light:hover, .vbtn-light:focus, .vimport-back:hover, .vimport-back:focus,
.vimport-secondary:hover, .vimport-secondary:focus {
  background: var(--vr-primary-soft) !important;
  border-color: var(--vr-primary-border) !important;
  color: var(--vr-primary) !important;
}

.btn-danger, .vbtn-danger {
  background: #b42318 !important;
  border-color: #b42318 !important;
  color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus, .vbtn-danger:hover, .vbtn-danger:focus {
  background: #8f1d14 !important;
  border-color: #8f1d14 !important;
  color: #fff !important;
}

/* Solid primary controls are intentionally dark.  This also overrules the
   former conflicting rule that could render blue text on a blue button. */
.btn-primary, .btn-info, .vbtn-primary, .vbtn-success,
a.vbtn-success, button.vbtn-success, .vident-btn, .vnext-btn,
.vbook-cta, .vbcard-btn--primary, .vauth-submit, .vsupport-submit {
  background-color: var(--vr-primary) !important;
  border-color: var(--vr-primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-info:hover, .btn-info:focus,
.vbtn-primary:hover, .vbtn-primary:focus, .vbtn-success:hover, .vbtn-success:focus,
a.vbtn-success:hover, button.vbtn-success:hover, .vident-btn:hover, .vident-btn:focus,
.vnext-btn:hover, .vnext-btn:focus, .vbook-cta:hover, .vbook-cta:focus,
.vbcard-btn--primary:hover, .vbcard-btn--primary:focus, .vauth-submit:hover,
.vauth-submit:focus, .vsupport-submit:hover, .vsupport-submit:focus {
  background-color: var(--vr-primary-hover) !important;
  border-color: var(--vr-primary-hover) !important;
  color: #fff !important;
}

/* The public home search has its own legacy class rather than .btn. */
.vreserve .vreserve-btn, .vhs-btn {
  background-color: var(--vr-primary) !important;
  border-color: var(--vr-primary) !important;
  color: #fff !important;
}
.vreserve .vreserve-btn:hover, .vreserve .vreserve-btn:focus,
.vhs-btn:hover, .vhs-btn:focus {
  background-color: var(--vr-primary-hover) !important;
  border-color: var(--vr-primary-hover) !important;
  color: #fff !important;
}
.vherosearch {
  border-color: var(--vr-border) !important;
  background: var(--vr-surface) !important;
}
.vherosearch .vhs-field > label { color: var(--vr-muted); }
.vherosearch .vhs-input,
.vherosearch .vhs-who .vguest-toggle,
.vherosearch .vhs-who .form-control {
  border-color: var(--vr-border) !important;
  color: var(--vr-text-strong) !important;
}
.vherosearch .vhs-locate {
  background: var(--vr-primary-soft);
  color: var(--vr-primary);
}
.vherosearch .vhs-locate:hover { background: var(--vr-primary); color: #fff; }

.btn-success { background-color: var(--vr-green) !important; border-color: var(--vr-green) !important; color: #fff !important; }
.btn-success:hover, .btn-success:focus { background-color: var(--vr-green-hover) !important; border-color: var(--vr-green-hover) !important; color: #fff !important; }
.btn-outline-primary, .btn-outline-success, .vbtn-outline-success, .vident-btn-outline {
  background: var(--vr-surface) !important;
  border-color: var(--vr-primary) !important;
  color: var(--vr-primary) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-success:hover,
.btn-outline-success:focus, .vbtn-outline-success:hover, .vbtn-outline-success:focus,
.vident-btn-outline:hover, .vident-btn-outline:focus {
  background: var(--vr-primary) !important;
  border-color: var(--vr-primary) !important;
  color: #fff !important;
}

.form-control:focus, .custom-select:focus, .form-select:focus {
  border-color: var(--vr-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--vr-primary-rgb), .14) !important;
}
.text-primary { color: var(--vr-primary) !important; }
.bg-primary, .badge-primary { background-color: var(--vr-primary) !important; color: #fff !important; }

/* Shared dashboard cards use the same spacing and typography in both panels. */
.vdash-heading { display: flex; align-items: end; justify-content: space-between; margin: 0 0 22px; }
.vdash-heading span, .vdashboard-eyebrow { color: var(--vr-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.vdash-heading h1 { margin: 3px 0 0; color: var(--vr-text-strong); font-family: 'Red Hat Display', sans-serif; font-size: 25px; font-weight: 800; line-height: 1.2; }
.vadmin-overview, .vuser-overview { display: grid; grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.vdashboard-tile { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 176px; padding: 20px; overflow: hidden; border: 1px solid var(--vr-border); border-radius: 10px; background: var(--vr-surface); }
.vadmin-welcome, .vuser-welcome { justify-content: space-between; background: linear-gradient(160deg, #eef1fb 0%, #fff 72%); }
.vadmin-welcome > div, .vuser-welcome > div, .vuser-welcome > a { position: relative; z-index: 1; }
.vadmin-welcome h2, .vuser-welcome h2 { margin: 8px 0 6px; color: var(--vr-text-strong); font-family: 'Red Hat Display', sans-serif; font-size: 20px; font-weight: 800; line-height: 1.25; }
.vadmin-welcome p, .vuser-welcome p { max-width: 75%; margin: 0; color: var(--vr-muted); font-size: 13px; }
.vadmin-welcome-art, .vuser-welcome-art { position: absolute; right: 24px; bottom: 20px; color: var(--vr-primary); font-size: 66px; opacity: .12; }
.vadmin-welcome-foot { display: flex; align-items: center; gap: 7px; color: var(--vr-muted); font-size: 12px; }
.vdashboard-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vdashboard-tile-icon { display: inline-flex; flex: 0 0 34px; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--vr-primary-soft); color: var(--vr-primary); font-size: 17px; }
.vdashboard-number { display: block; margin-top: 10px; color: var(--vr-text-strong); font-family: 'Red Hat Display', sans-serif; font-size: clamp(22px, 2vw, 29px); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.vdashboard-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--vr-muted); font-size: 12px; }
.vdashboard-meta strong { color: var(--vr-green); }
.vdashboard-link { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; margin-top: auto; padding-top: 14px; color: var(--vr-primary); font-size: 12px; font-weight: 700; text-decoration: none; }
.vdashboard-link:hover { color: var(--vr-primary-hover); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) {
  .vadmin-overview, .vuser-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vadmin-welcome, .vuser-welcome { grid-column: 1 / -1; min-height: 145px; }
}
@media (max-width: 650px) {
  .vadmin-overview, .vuser-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vdashboard-tile { min-height: 150px; padding: 16px; }
  .vadmin-welcome, .vuser-welcome { min-height: 140px; }
  .vdash-heading h1 { font-size: 22px; }
}
@media (max-width: 360px) {
  .vadmin-overview, .vuser-overview { grid-template-columns: 1fr; }
  .vadmin-welcome, .vuser-welcome { grid-column: auto; }
}

/* Profile/settings are a page-level workspace, not a narrow form column. */
.tabler-user-app .vsettings-page {
  padding: 26px 30px 42px;
  background: var(--vr-canvas);
}
.tabler-user-app .vsettings-page .vpage-head {
  margin: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--vr-border);
}
.tabler-user-app .vprofile-nav {
  gap: 7px;
  margin: 16px 0 22px;
  padding: 0;
}
.tabler-user-app .vprofile-nav a,
.tabler-user-app .vprofile-nav .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid var(--vr-border);
  border-radius: 8px;
  background: var(--vr-surface);
  color: var(--vr-text) !important;
  font-family: 'Red Hat Text', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.tabler-user-app .vprofile-nav a:hover,
.tabler-user-app .vprofile-nav .nav-link:hover {
  border-color: var(--vr-primary-border);
  background: var(--vr-primary-soft);
  color: var(--vr-primary) !important;
}
.tabler-user-app .vprofile-nav a.vpill-active,
.tabler-user-app .vprofile-nav .nav-link.active {
  border-color: var(--vr-primary);
  background: var(--vr-primary);
  color: #fff !important;
}
.tabler-user-app .vsettings-layout {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: none;
  padding-bottom: 18px;
}
.tabler-user-app .vsettings-layout > form { width: 100%; }
.tabler-user-app .vpref-card {
  width: 100%;
  border: 1px solid var(--vr-border);
  border-radius: 12px;
  padding: 22px 24px;
  background: var(--vr-surface);
  box-shadow: 0 1px 2px rgba(4, 45, 53, .03);
}
.tabler-user-app .vpref-card + .vpref-card { margin-top: 16px !important; }
.tabler-user-app .vpref-title {
  margin: 0 0 8px;
  color: var(--vr-text-strong);
  font-family: 'Red Hat Display', 'Red Hat Text', sans-serif;
  font-size: 16px;
  font-weight: 800;
}
.tabler-user-app .vpref-title i { color: var(--vr-primary); }
.tabler-user-app .vpref-card--export { border-left: 4px solid var(--vr-primary); }
.tabler-user-app .vpref-card--danger {
  border-color: #f5bbb6;
  border-left: 4px solid #b42318;
  background: #fffafa;
}
.tabler-user-app .vpref-card--danger .vpref-title,
.tabler-user-app .vpref-card--danger .vpref-title i { color: #b42318; }
.tabler-user-app .vpref-password-field { width: min(100%, 420px); margin: 18px 0; }
.tabler-user-app .vpref-row { border-color: var(--vr-border); }
.tabler-user-app .vpref-row strong { color: var(--vr-text-strong); }
.tabler-user-app .vpref-row small { color: var(--vr-muted); }

/* The compact header is intentionally retained on phones, while settings and
   profile controls use all of the available viewport width. */
@media (max-width: 767.98px) {
  .tabler-user-app .vsettings-page { padding: 18px 15px 30px; }
  .tabler-user-app .vprofile-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 3px;
  }
  .tabler-user-app .vprofile-nav::-webkit-scrollbar { display: none; }
  .tabler-user-app .vprofile-nav li { flex: 0 0 auto; }
  .tabler-user-app .vpref-card { padding: 18px; }
  .tabler-user-app .vpref-password-field { width: 100%; }
}