/*
  XtranetNew_ML design system.
  Built on Bootstrap 5.3's CSS-variable theming (no Sass build step available in this
  environment) - override --bs-* tokens plus add our own component classes on top.
  Supports light/dark via Bootstrap's [data-bs-theme] attribute, toggled and persisted
  client-side (see wwwroot/js/theme-toggle.js) and defaulted from prefers-color-scheme.
*/

:root,
[data-bs-theme="light"] {
  --brand-50: #eef2ff;
  --brand-100: #e0e7ff;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;

  --surface-bg: #f8fafc;
  --surface-card: #ffffff;
  --surface-border: #e2e8f0;
  --surface-muted: #f1f5f9;

  --text-body: #1e293b;
  --text-muted: #64748b;

  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: var(--brand-600);
  --bs-link-hover-color: var(--brand-700);
  --bs-body-bg: var(--surface-bg);
  --bs-body-color: var(--text-body);
  --bs-border-color: var(--surface-border);
  --bs-border-radius: 0.625rem;
  --bs-border-radius-lg: 0.875rem;
  --bs-border-radius-sm: 0.5rem;

  /* Bootstrap's own base is 1rem, which reads a size too large next to the dashboard console and
     leaves admin forms looser than the rest of the app. Set here rather than on body so every
     component that derives from it (tables, cards, inputs) scales with it. */
  --bs-body-font-size: 0.875rem;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  /*
    Added for the dashboard console (css/console.css), but deliberately declared here with the rest of
    the palette so both themes stay defined in one place.

    --accent-* is a second, non-brand hue for data readouts (the credit meter), kept distinct from
    --state-* so "this is a measurement" never reads as "this is a warning". --state-* is semantic only
    and is never used decoratively. --text-faint sits one step below --text-muted, for the metadata line
    under a title where --text-muted would compete with the title itself.
  */
  --accent-teal: #0f766e;
  --accent-teal-tint: #dbf1ee;

  --state-pos: #15803d;
  --state-pos-tint: #dcf5e4;
  --state-warn: #b45309;
  --state-warn-tint: #fdeed5;
  --state-crit: #be123c;
  --state-crit-tint: #fde3e8;

  --text-faint: #94a3b8;

  /*
    Codes, counts and money. A monospace face keeps digits on a common width so figures line up down a
    column, and stops a reference like "CI-4471" being read as prose. System stack on purpose - no web
    font is downloaded, and the Arabic fallbacks in body's own stack are left untouched.
  */
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

[data-bs-theme="dark"] {
  --brand-50: #1e1b4b;
  --brand-100: #312e81;
  --brand-500: #818cf8;
  --brand-600: #6366f1;
  --brand-700: #a5b4fc;

  --surface-bg: #0b1220;
  --surface-card: #131c2e;
  --surface-border: #223046;
  --surface-muted: #182236;

  --text-body: #e2e8f0;
  --text-muted: #94a3b8;

  --bs-primary: var(--brand-500);
  --bs-primary-rgb: 129, 140, 248;
  --bs-link-color: var(--brand-700);
  --bs-link-hover-color: var(--brand-500);
  --bs-body-bg: var(--surface-bg);
  --bs-body-color: var(--text-body);
  --bs-border-color: var(--surface-border);
  --bs-tertiary-bg: var(--surface-muted);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

  /* Console palette, lifted for the dark ground - see the light block for what each family is for.
     These are not inversions: each hue is re-picked to clear 4.5:1 on --surface-card. */
  --accent-teal: #43ceba;
  --accent-teal-tint: #11332f;

  --state-pos: #5ad48a;
  --state-pos-tint: #10301e;
  --state-warn: #f0b040;
  --state-warn-tint: #35270d;
  --state-crit: #fb7a92;
  --state-crit-tint: #3a1220;

  --text-faint: #6d7396;
}

html {
  font-size: 16px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    /* Arabic faces, appended so Latin rendering is byte-for-byte unchanged and only
       Arabic codepoints fall through to these. */
    "Segoe UI Arabic", "Geeza Pro", "Noto Sans Arabic", "Dubai", Tahoma, sans-serif;
  background: var(--surface-bg);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.text-muted { color: var(--text-muted) !important; }

a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ---------- App shell / navbar ---------- */

.app-navbar {
  background: var(--surface-card);
  border-bottom: 1px solid var(--surface-border);
  box-shadow: var(--shadow-sm);
}

.app-navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-body);
}

/* Agencies upload logos in any size, so each spot is a fixed box and the logo is scaled up or down
   to fit it (aspect ratio kept) - every company's logo renders at the same size, and a wide one can't
   push the toggler/user menu out of the navbar row. */
.app-navbar .navbar-brand {
  min-width: 0;
  flex-shrink: 1;
}

.app-navbar .navbar-brand img {
  display: block;
  height: 40px;
  width: min(180px, 45vw);
  object-fit: contain;
  object-position: left center;
}

[dir="rtl"] .app-navbar .navbar-brand img {
  object-position: right center;
}

.theme-toggle-btn {
  border: 1px solid var(--surface-border);
  background: var(--surface-muted);
  color: var(--text-body);
  border-radius: 999px;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

.theme-toggle-btn:hover {
  transform: translateY(-1px);
}

.theme-toggle-btn .icon-dark { display: none; }
[data-bs-theme="dark"] .theme-toggle-btn .icon-light { display: none; }
[data-bs-theme="dark"] .theme-toggle-btn .icon-dark { display: inline; }

.avatar-circle {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--surface-border);
}

/* ---------- Cards ---------- */

.card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-sm);
}

/* ---------- Auth shell (Login) ---------- */

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 15% 20%, var(--brand-100) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, var(--brand-50) 0%, transparent 40%),
    var(--surface-bg);
}

.auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2.25rem 2rem;
}

.auth-card .brand-mark {
  display: block;
  margin: 0 auto 0.5rem;
  height: 64px;
  width: min(240px, 100%);
  object-fit: contain;
  object-position: center;
}

.auth-card .form-control,
.auth-card .form-select {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  border-radius: var(--bs-border-radius-sm);
}

.auth-submit-btn {
  width: 100%;
  padding: 0.65rem 1rem;
  font-weight: 600;
  border-radius: var(--bs-border-radius-sm);
  background: var(--bs-primary);
  border: none;
  color: #fff;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.auth-submit-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: #fff;
}

.auth-tabs {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--surface-border);
}

.auth-tabs a {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.9rem;
}

.auth-tabs a.active {
  color: var(--bs-primary);
}

/* ---------- Dashboard tile grid ---------- */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.25rem;
}

.tile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem 1.25rem;
  text-align: center;
  color: var(--text-body);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tile-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-500);
  color: var(--text-body);
}

.tile-card .tile-icon {
  height: 64px;
  width: 64px;
  object-fit: contain;
}

.tile-card .tile-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}

/* ---------- Section nav (admin sibling-page tabs) ---------- */

.section-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0 0 0.85rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--surface-border);
}

.section-nav::-webkit-scrollbar {
  height: 5px;
}

.section-nav::-webkit-scrollbar-thumb {
  background: var(--surface-border);
  border-radius: 999px;
}

.section-nav li {
  flex: 0 0 auto;
}

.section-nav .nav-link {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-muted);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.section-nav .nav-link:hover {
  color: var(--text-body);
  border-color: var(--surface-border);
}

.section-nav .nav-link.active {
  background: var(--bs-primary);
  color: #fff;
  font-weight: 600;
}

/* ---------- Hotel context top nav (Home / Hotel Info / Rate / ...) ---------- */

.hotel-top-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0 0 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--surface-border);
}

.hotel-top-nav li {
  flex: 0 0 auto;
}

.hotel-top-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.hotel-top-nav .nav-link:hover {
  color: var(--text-body);
}

.hotel-top-nav .nav-link.active {
  color: var(--bs-primary);
  font-weight: 600;
  border-color: var(--bs-primary);
}

/* ---------- Misc ---------- */

.page-shell {
  padding: 1.75rem 0 3rem;
}

.footer-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--surface-border);
  margin-top: 2rem;
}

@media (max-width: 575.98px) {
  .auth-card { padding: 1.75rem 1.25rem; }
  .tile-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.85rem; }
  .tile-card { padding: 1.25rem 0.75rem; }
  .tile-card .tile-icon { height: 48px; width: 48px; }
}

/* ---------- RTL ---------- */

/*
  Bootstrap's own layout mirrors via the prebuilt bootstrap.rtl.min.css bundle that _Layout swaps in
  (its ms-/me-/text-start/text-end utilities are logical, so page markup needs no changes). What
  follows covers only this file's own components, where a physical property would otherwise stay
  pinned to the wrong edge.
*/

/* Arabic glyphs sit differently on the line than Latin ones; a little extra leading stops the
   diacritics in dense table rows from touching the row above. */
[dir="rtl"] body {
  line-height: 1.7;
}

/* The auth backdrop's two gradient blooms are asymmetric (15% / 85%), so mirror them to keep the
   card's visual weight on the same side as the reading direction. */
[dir="rtl"] .auth-shell {
  background:
    radial-gradient(circle at 85% 20%, var(--brand-100) 0%, transparent 45%),
    radial-gradient(circle at 15% 80%, var(--brand-50) 0%, transparent 40%),
    var(--surface-bg);
}

/* These strips scroll horizontally. Browsers start an RTL scroll container at its right edge, which
   is correct - but the fade/scrollbar affordance reads better anchored to the logical start. */
[dir="rtl"] .section-nav,
[dir="rtl"] .hotel-top-nav {
  direction: rtl;
}

/*
  Identifiers, codes and dates stay left-to-right even inside an Arabic page: a hotel code like
  "WKD-001" or a date like "01-Jan-2026" is mirrored into nonsense by the surrounding RTL context
  (the leading digit gets pushed to the wrong end). Apply .ltr-value to any cell rendering a raw
  code, reference number, or invariant-formatted date.
*/
.ltr-value {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* ============================================================
   Shared component styling
   ------------------------------------------------------------
   Brings the ~92 admin pages onto the same visual language as the dashboard console
   (css/console.css) without touching a single page's markup: those pages are built almost entirely
   from the same handful of Bootstrap components (card > card-header > card-body > form.row.g-3, then
   a table-striped in a table-responsive), so restyling the components restyles every page.

   Deliberately limited to typography, colour, border and radius. Nothing here changes display,
   width, float or position, so no page's layout can shift - the pages get denser and quieter, not
   rearranged. Logical properties throughout, so the Arabic RTL mirroring below still holds.

   Backgrounds of .badge and .alert are left alone on purpose: those are set by Bootstrap's bg-*/
   alert-* modifier classes, and this file loads after Bootstrap, so setting a background here would
   silently flatten every semantic colour the pages rely on.
   ============================================================ */

/* ---------- Page header (h1.h3 + lede, the opening of every admin page) ---------- */

.page-shell h1,
.page-shell .h3 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.page-shell h1 + p,
.page-shell .h3 + p {
  font-size: 0.82rem;
}

.page-shell {
  padding: 1.4rem 0 2.5rem;
}

/* ---------- Cards ---------- */

.card {
  border-radius: var(--bs-border-radius);
}

/* Bootstrap tints the header grey; the console uses a hairline instead, which keeps a stack of
   collapsed cards from reading as a row of grey bars. */
.card-header {
  background: var(--surface-card);
  border-bottom: 1px solid var(--surface-border);
  color: var(--text-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.7rem 0.9rem;
}

.card-header[data-bs-toggle="collapse"] {
  cursor: pointer;
}

.card-header[data-bs-toggle="collapse"]:hover {
  background: var(--surface-muted);
}

.card-body {
  padding: 0.9rem;
}

/* ---------- Forms ---------- */

.form-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.form-control,
.form-select {
  font-size: 0.82rem;
  border-color: var(--surface-border);
  border-radius: var(--bs-border-radius-sm);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}

.form-control::placeholder {
  color: var(--text-faint);
}

.form-check-label {
  font-size: 0.8rem;
}

/* Checkbox lists that put .form-check straight onto a grid column (<div class="col-md-3 form-check">).
   Bootstrap ships .form-check after the grid, so its `padding-left: 1.5em` beats the `.row > *` gutter
   padding; the input's matching `margin-left: -1.5em` then lands it outside the column, where the
   surrounding `overflow-y: auto` scroll box clips it - the checkbox renders half cut off. Restore the
   gutter on top of the indent so the input sits back on the column's own content edge. */
.row > .form-check[class*="col-"] {
  padding-left: calc(var(--bs-gutter-x) * 0.5 + 1.5em);
}

/* Validation text sits directly under an input; at body size it competes with the value above it. */
.text-danger {
  font-size: 0.72rem;
}

/* ...but not when the whole block is an error panel, where it is the primary text. */
.alert .text-danger,
.alert.text-danger {
  font-size: inherit;
}

/* ---------- Buttons ---------- */

.btn {
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--bs-border-radius-sm);
  padding: 0.4rem 0.85rem;
}

.btn-sm {
  font-size: 0.74rem;
  padding: 0.28rem 0.6rem;
}

/* ---------- Tables ---------- */

.table {
  /* Zebra striping and hairline row rules together read as noise. The console uses rules only, so
     neutralise the stripe rather than asking 92 pages to drop the class. */
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: var(--surface-muted);
  font-size: 0.8rem;
  border-color: var(--surface-border);
}

.table > thead > tr > th {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  border-bottom: 1px solid var(--surface-border);
  padding: 0.55rem 0.6rem;
}

.table > tbody > tr > td {
  border-bottom: 1px solid var(--surface-border);
  padding: 0.5rem 0.6rem;
}

/* ---------- Badges ---------- */

.badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  border-radius: 999px;
  padding: 0.28em 0.65em;
}

/* ---------- Alerts ---------- */

.alert {
  border-radius: var(--bs-border-radius);
  font-size: 0.82rem;
  padding: 0.7rem 0.9rem;
}

/* ---------- Navbar (non-console pages) ---------- */

.app-navbar .navbar-brand {
  font-size: 0.95rem;
}

/*
  Arabic is a cursive script, so the micro-label treatment above has to be undone for RTL:
  letter-spacing pulls the joins between letters apart and renders a word as loose disconnected
  glyphs, and --font-mono is a Latin-only stack, so an Arabic label falls through to whatever face
  the system substitutes - mid-line, at a different weight. text-transform is a no-op for Arabic.

  Applied to the labels that hold *translated* text. Not to .ltr-value, which exists precisely for
  the values that are never translated (codes, references, invariant numbers) and should stay
  monospaced and LTR inside an Arabic page.
*/
[dir="rtl"] .table > thead > tr > th,
[dir="rtl"] .badge {
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.72rem;
}

[dir="rtl"] .ltr-value {
  font-family: var(--font-mono);
}

/* ---------- Mandatory-field marker ----------
   Emitted by RequiredFieldMarkerTagHelper onto the label of every [Required] field, restoring the
   asterisk the legacy pages showed. Kept visually quiet (it sits on an already-muted micro-label)
   but in the danger colour so it reads as "you must fill this in" at a glance. */
.required-marker {
  color: var(--bs-danger, #dc3545);
  margin-inline-start: 0.15rem;
  font-weight: 600;
}

/* ---------- Grid serial-number column ----------
   The cells are inserted by site.js; the digits come from a counter so that a row added or removed
   by a page's own script renumbers the rest for free. */
table.has-sno > tbody {
  counter-reset: sno;
}

table.has-sno > tbody > tr {
  counter-increment: sno;
}

table.has-sno > tbody > tr > td.sno-col::before {
  content: counter(sno);
}

table.has-sno .sno-col {
  width: 1%;
  white-space: nowrap;
  color: var(--text-muted);
  text-align: end;
}

/* ---------- Hotel context trail ----------
   Country > City > Hotel, above the hotel-scoped two-level nav. */
.hotel-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.hotel-crumb-sep {
  opacity: 0.55;
}