/* ==========================================================================
   The Bootstrap look, laid over app.css — for the redesign preview at
   bootstrap.liwan-diafa.tech, so the customer can compare it with the Tabler
   look on the same screens, the same data and the same layout. Loaded only
   when UI_SKIN is "bootstrap" (see config/settings.py); everything here is
   a restatement of something app.css already decides, and deleting this file
   loses nothing else.

   Bootstrap 5 as it comes: a white page, a light grey navigation bar with no
   icons, a large title over a rule, cards with a grey header strip, striped
   tables with a dark rule under the headings, solid badges, and grey outline
   buttons — in Liwan's teal.
   ========================================================================== */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8f9fa;
  --surface-3: #e9ecef;
  --border: #dee2e6;
  --border-strong: #dee2e6;
  --text: #212529;
  --text-2: #495057;
  --text-muted: #6c757d;
  --text-soft: #adb5bd;

  --table-head: transparent;
  --table-head-text: #212529;
  --table-grid: #dee2e6;

  --brand-light: #cfe9e6;
  --brand-soft: #e7f4f2;

  --free: #198754;      --free-bg: #d1e7dd;   --free-br: #a3cfbb;   --free-ink: #0a3622;
  --busy: #dc3545;      --busy-bg: #f8d7da;   --busy-br: #f1aeb5;   --busy-ink: #58151c;
  --arriving: #ffc107;  --arriving-bg: #fff3cd; --arriving-br: #ffe69c; --arriving-ink: #664d03;
  --cleaning: #0d6efd;  --cleaning-bg: #cfe2ff; --cleaning-br: #9ec5fe; --cleaning-ink: #052c65;
  --maintenance: #6f42c1; --maintenance-bg: #e2d9f3; --maintenance-br: #c5b3e6; --maintenance-ink: #3d1a78;
  --renovation: #d63384; --renovation-bg: #f7d6e6; --renovation-br: #efadce; --renovation-ink: #561435;
  --blocked: #6c757d;   --blocked-bg: #e9ecef; --blocked-br: #ced4da;

  --danger: #dc3545;  --danger-bg: #f8d7da;
  --warn: #997404;    --warn-bg: #fff3cd;
  --ok: #198754;      --ok-bg: #d1e7dd;
  --info: #0d6efd;    --info-bg: #cfe2ff;

  --radius: 6px;
  --radius-lg: 6px;
  --radius-sm: 4px;
  --shadow-sm: none;
  --shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
  --shadow-lg: 0 .5rem 1rem rgba(0, 0, 0, .15);
  --brand-ring: rgba(15, 118, 110, .25);
}

/* ---- The bar: Bootstrap's light navbar ----------------------------------- */
.appbar {
  background: #f8f9fa;
  border-block-end: 1px solid var(--border);
  box-shadow: none;
}
.appbar__mark { border-radius: 6px; }
.appbar__name { font-size: 20px; font-weight: 500; }
.topnav { border-block-start: 1px solid var(--border); }
.topnav__icon { display: none; }
.topnav__link {
  padding: 10px 9px;
  color: rgba(33, 37, 41, .65);
  font-size: 14px;
  border-block-end: 0;
}
.topnav__link:hover,
.topnav__item:hover > .topnav__link,
.topnav__item:focus-within > .topnav__link,
.topnav__item.is-open > .topnav__link { color: rgba(33, 37, 41, .85); }
.topnav__link.is-active { color: var(--text); font-weight: 600; border-block-end: 0; }
.topnav__count { background: var(--danger); color: #fff; border-radius: 999px; }
.topnav__menu { border-color: rgba(0, 0, 0, .175); padding: 6px 0; }
.topnav__menu a, .topnav__menu button { border-radius: 0; padding: 6px 16px; }
.topnav__menu a:hover, .topnav__menu button:hover { background: #e9ecef; }
.topnav__menu a.is-active { background: var(--brand); color: #fff; }
.topnav__menu a.is-active svg { color: #fff; }
.avatar { border-radius: 50%; }
.appbar .usermenu:hover > .usermenu__trigger,
.appbar .usermenu.is-open > .usermenu__trigger { background: #e9ecef; }
.lang-toggle { background: #fff; border-color: #6c757d; padding: 0; gap: 0; overflow: hidden; }
.lang-toggle__btn { border-radius: 0; color: #6c757d; padding: 5px 12px; }
.lang-toggle__btn.is-on, .lang-toggle__btn.is-on:hover { background: #6c757d; color: #fff; box-shadow: none; }
.appbar__preview { background: #0d6efd; color: #fff; }

/* ---- The page title: large, over a rule ---------------------------------- */
.topbar {
  margin-inline: 32px;
  padding: 22px 0 10px;
  border-block-end: 1px solid var(--border);
}
.topbar__title { font-size: 26px; font-weight: 500; }
.content { padding-block-start: 20px; }

/* ---- Cards: a grey strip for the header ---------------------------------- */
.card, .kpi, .filters, .pay-card, .pay-chip, .alert { box-shadow: none; }
.card { border-color: rgba(0, 0, 0, .175); }
.card__head { background: rgba(33, 37, 41, .03); border-block-end-color: rgba(0, 0, 0, .175); min-height: 0; padding: 10px 16px; }
.card__head h2, .card__head h3 { font-size: 16px; font-weight: 500; }
.card__body { padding: 16px; }
.card__foot { background: rgba(33, 37, 41, .03); border-block-start-color: rgba(0, 0, 0, .175); }
.card .table tr > :first-child { padding-inline-start: 12px; }
.card .table tr > :last-child { padding-inline-end: 12px; }

/* The figure cards: plain cards, the figure in the state's colour. */
.kpi, .pay-card { border-color: rgba(0, 0, 0, .175); }
.kpi::before, .pay-card::before { display: none; }
.kpi__label, .pay-card__label { font-size: 13px; font-weight: 400; }
html[dir="ltr"] .kpi__label { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.kpi__value { font-weight: 500; }
.kpi--free .kpi__value { color: var(--free); }
.kpi--busy .kpi__value { color: var(--busy); }
.kpi--clean .kpi__value { color: var(--cleaning); }
.kpi--maint .kpi__value, .kpi--money .kpi__value { color: var(--maintenance); }
.kpi--rate .kpi__value { color: var(--brand); }
.pay-chip.is-on { background: var(--brand); border-color: var(--brand); box-shadow: none; color: #fff !important; }
.pay-chip.is-on .pay-chip__label, .pay-chip.is-on .pay-chip__sub { color: rgba(255, 255, 255, .85); }
.meter, .paybar, .type-tile__bar { height: 8px; border-radius: 6px; background: #e9ecef; }

/* ---- Tables: striped, a dark rule under the headings --------------------- */
.table th {
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  border-block-end: 2px solid var(--text);
  padding: 8px;
}
html[dir="ltr"] .table th { font-size: 13.5px; letter-spacing: 0; text-transform: none; }
.table td { padding: 8px; }
.table tbody tr:nth-child(odd) td { background: #f2f2f2; }
.table tbody tr:hover td { background: #ececec; }
.table tbody tr:last-child td { border-block-end: 1px solid var(--table-grid); }
.table thead th { box-shadow: none; }
.timeline thead th { background: #f8f9fa; color: var(--text); font-weight: 600; }

/* ---- Badges: solid ------------------------------------------------------- */
.badge { border-radius: 6px; font-weight: 600; font-size: 11.5px; padding: 4px 7px; line-height: 1.1; background: #6c757d; color: #fff; }
.badge--ok { background: #198754; color: #fff; }
.badge--busy { background: #dc3545; color: #fff; }
.badge--warn { background: #ffc107; color: #212529; }
.badge--info { background: #0d6efd; color: #fff; }
.badge--muted { background: #6c757d; color: #fff; }
.badge--ok, .badge--busy, .badge--warn, .badge--info, .badge--muted { border: 0; }

/* A booking source: a light pill, its colour as a dot inside. */
.tag {
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #f8f9fa;
  color: var(--text);
  font-size: 12px;
}
.tag::before { width: 7px; height: 7px; box-shadow: none; }

/* ---- Buttons: grey outline, teal for the main one ------------------------ */
.btn {
  border-color: #6c757d;
  color: #6c757d;
  font-weight: 400;
  box-shadow: none;
}
.btn:hover { background: #6c757d; border-color: #6c757d; color: #fff; }
.btn--primary { border-color: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn--danger { border-color: var(--danger); color: #fff; }
.btn--ghost { border-color: transparent; color: var(--text); }
.btn--ghost:hover { background: #e9ecef; color: var(--text); }
.seg { background: #fff; border-color: #6c757d; padding: 0; gap: 0; overflow: hidden; border-radius: 6px; }
.seg__opt { border-radius: 0; color: #6c757d; }
.seg__opt:has(input:checked) { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: none; }
.seg__opt:has(input:checked) svg { color: #fff; }

/* ---- Fields --------------------------------------------------------------- */
input[type="text"], input[type="number"], input[type="date"], input[type="time"],
input[type="email"], input[type="password"], input[type="tel"], input[type="datetime-local"],
input[type="search"], select, textarea { box-shadow: none; font-size: 14px; }
.field > label, .label { font-weight: 400; }

/* ---- Alerts: the tinted boxes Bootstrap ships ---------------------------- */
.alert { border-inline-start-width: 1px; }
.alert--info { background: #cff4fc; border-color: #9eeaf9; color: #055160; }
.alert--success { background: #d1e7dd; border-color: #a3cfbb; color: #0a3622; }
.alert--warning { background: #fff3cd; border-color: #ffe69c; color: #664d03; }
.alert--error { background: #f8d7da; border-color: #f1aeb5; color: #58151c; }

/* ---- Setup (the Django admin) -------------------------------------------- */
#changelist table thead th,
#changelist table thead th.sorted,
.results thead th,
#result_list thead th {
  background: transparent !important;
  color: var(--text) !important;
  font-size: 13.5px !important;
  border-block-end: 2px solid var(--text) !important;
}
html[dir="ltr"] #changelist table thead th { font-size: 13.5px !important; letter-spacing: 0; text-transform: none; }
#changelist table thead th a, #result_list thead th a { color: var(--text) !important; }
#changelist table tbody tr:nth-child(odd) td,
#changelist table tbody tr:nth-child(odd) th { background: #f2f2f2 !important; }
.setup-card { box-shadow: none; border-color: rgba(0, 0, 0, .175); }
.setup-card__head { background: rgba(33, 37, 41, .03); }