/*
 * Muster Roll on Tabler (Bootstrap 5 with the look of a Tabler dashboard) —
 * the same look as Liwan and the customers' console.
 *
 * Only Tabler's own variables are set here — the brand, the font, the page —
 * plus a handful of classes it has no equivalent for (the counter cards, the
 * sticky save bar). Everything else on the page is a stock Tabler/Bootstrap
 * class. Light only: one look to keep right.
 */
/* Readex Pro — Liwan's face, shipped with the system rather than fetched from
   Google: the regular cut for data, the semibold for headings. */
@font-face {
  font-family: "Readex Pro";
  src: url("../fonts/readex-pro/ReadexPro-Regular.0e2587bc2d76.ttf") format("truetype");
  font-weight: 100 550;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Readex Pro";
  src: url("../fonts/readex-pro/ReadexPro-SemiBold.e96c67223f7e.ttf") format("truetype");
  font-weight: 551 900;
  font-style: normal;
  font-display: swap;
}

:root,
[data-bs-theme="light"] {
  --mr-brand: #0f766e;
  --mr-brand-rgb: 15, 118, 110;
  --mr-brand-dark: #0b5a54;
  --tblr-primary: var(--mr-brand);
  --tblr-primary-rgb: var(--mr-brand-rgb);
  --tblr-primary-fg: #fff;
  --tblr-primary-darken: var(--mr-brand-dark);
  --tblr-primary-lt: #e7f1f0;
  --tblr-primary-lt-rgb: 231, 241, 240;
  --tblr-primary-bg-subtle: #cfe4e2;
  --tblr-primary-border-subtle: #9fc8c5;
  --tblr-primary-text-emphasis: #06302c;
  --tblr-link-color: var(--mr-brand);
  --tblr-link-color-rgb: var(--mr-brand-rgb);
  --tblr-link-hover-color: var(--mr-brand-dark);
  --tblr-link-hover-color-rgb: 11, 90, 84;
  /* A shade darker than Tabler's own, so the white cards stand off it. */
  --tblr-body-bg: #eceff4;
  --tblr-bg-surface-secondary: #eceff4;
  --tblr-font-sans-serif: "Readex Pro", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --tblr-body-font-family: var(--tblr-font-sans-serif);
  --mr-orange: #f76707;
  --mr-purple: #ae3ec9;
}

body { font-feature-settings: "tnum" 1; }
.text-bg-primary { background-color: var(--mr-brand) !important; color: #fff !important; }
.form-check-input:checked { background-color: var(--mr-brand); border-color: var(--mr-brand); }

/* Tabler writes its own blue straight into a handful of rules instead of
   reading --tblr-primary; those, in the brand colour. */
.form-control:focus, .form-select:focus, .form-check-input:focus,
.input-group-flat:focus-within .form-control, .input-group-flat:focus-within .input-group-text { border-color: rgba(var(--mr-brand-rgb), .5); }
.btn-link { color: var(--mr-brand); }
.btn-link:hover { color: var(--mr-brand-dark); }
.list-group-item.active { border-left-color: var(--mr-brand); }
.loader, .page-link:hover .page-item-title { color: var(--mr-brand); }
.form-range::-webkit-slider-thumb:active { background-color: rgba(var(--mr-brand-rgb), .35); }
.form-range::-moz-range-thumb:active { background-color: rgba(var(--mr-brand-rgb), .35); }

/* Headings and menus in the heavier cut, as Liwan sets them. */
.page-title { font-weight: 600; }
.card-title, .card-header h3 { font-weight: 600; }
.mr-menubar .nav-link { font-size: .875rem; font-weight: 500; color: var(--tblr-body-color); }
.mr-menubar .nav-link:hover, .mr-menubar .nav-item.dropdown:hover > .nav-link { color: var(--mr-brand); }
.navbar-brand { font-weight: 600; }

/* The menus open under the pointer on a desk, as Liwan's do; a touch screen
   has no hover, so there they still open with a tap. */
@media (hover: hover) and (min-width: 1200px) {
  .mr-menubar .nav-item.dropdown:hover > .dropdown-menu,
  .mr-topbar .nav-item.dropdown:hover > .dropdown-menu { display: block; }
  /* Under its own word, wherever the menu opens from. */
  .mr-menubar .nav-item.dropdown,
  .mr-topbar .nav-item.dropdown { position: relative; }
  .mr-menubar .nav-item.dropdown > .dropdown-menu { top: 100%; inset-inline-start: 0; inset-inline-end: auto; margin-top: 0; }
  .mr-topbar .nav-item.dropdown > .dropdown-menu { top: 100%; inset-inline-end: 0; inset-inline-start: auto; margin-top: 0; }
}

/* ---- frame ---- */
/* Edge to edge, as Liwan's pages are, with the same margin either side. */
.mr-wide { padding-inline: 1rem; }
@media (min-width: 992px) { .mr-wide { padding-inline: 1.875rem; } }

/* The section the page is in: the brand colour, underlined. */
.mr-menubar .nav-item.active > .nav-link { color: var(--mr-brand); font-weight: 600; box-shadow: inset 0 -2px 0 var(--mr-brand); }
.mr-menubar .nav-link-icon { color: var(--tblr-secondary); }
.mr-menubar .nav-item.active .nav-link-icon,
.mr-menubar .nav-link:hover .nav-link-icon { color: var(--mr-brand); }

/* EN | AR beside the name, as Liwan has it. */
.mr-topbar .navbar-nav .mr-lang { flex-direction: row; flex-wrap: nowrap; align-items: center; }
.mr-lang { display: inline-flex; padding: 2px; margin-inline-start: .75rem; border: 1px solid var(--tblr-border-color); border-radius: 6px; background: var(--tblr-bg-surface-tertiary); margin-inline-end: .5rem; }
.mr-lang button { white-space: nowrap; border: 0; background: transparent; padding: .25rem .6rem; border-radius: 4px; font-size: .75rem; font-weight: 600; color: var(--tblr-secondary); line-height: 1.2; }
.mr-lang button.is-on { background: var(--tblr-bg-surface); color: var(--tblr-body-color); box-shadow: 0 1px 2px rgba(24, 36, 51, .12); }
.mr-who { color: var(--tblr-body-color); }

.mr-topbar { background: var(--tblr-bg-surface); border-bottom: 1px solid var(--tblr-border-color); }
.mr-menubar { background: var(--tblr-bg-surface); border-bottom: 1px solid var(--tblr-border-color); min-height: 3rem; }
.mr-menubar .nav-link { white-space: nowrap; }
.mr-menubar .dropdown-menu { max-height: 75vh; overflow-y: auto; }
.mr-branch { min-width: 10rem; }
.mr-banner { margin: 0; }
.mr-demo { background: #fff4d6; color: #5c4400; }
.mr-login { background: var(--tblr-body-bg); }

/* ---- dashboard ---- */
.mr-section-title { font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--tblr-secondary); text-transform: uppercase; margin-bottom: .75rem; }
.mr-icon-bubble {
  --mr-tone: var(--mr-brand);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: .75rem; font-size: 1.25rem;
  color: var(--mr-tone); background: color-mix(in srgb, var(--mr-tone) 13%, transparent);
}
.mr-icon-bubble svg { width: 1.45rem; height: 1.45rem; }
.mr-action, .mr-counter { transition: transform .12s ease, box-shadow .12s ease; }
.mr-action:hover, .mr-counter:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08) !important; }
.mr-tone-good .mr-icon-bubble { --mr-tone: var(--tblr-success); }
.mr-tone-amber .mr-icon-bubble { --mr-tone: #e0a800; }
.mr-tone-blue .mr-icon-bubble { --mr-tone: var(--tblr-azure); }
.mr-tone-purple .mr-icon-bubble { --mr-tone: var(--mr-purple); }
.mr-tone-red .mr-icon-bubble { --mr-tone: var(--tblr-danger); }
.mr-tone-orange .mr-icon-bubble { --mr-tone: var(--mr-orange); }
.mr-tone-neutral .mr-icon-bubble { --mr-tone: var(--tblr-secondary); }
.mr-stat { padding: .75rem; border-radius: .5rem; background: var(--tblr-bg-surface-tertiary); }
.mr-num { font-variant-numeric: tabular-nums; }

/* ---- lists ---- */
.mr-search { min-width: 14rem; max-width: 28rem; }
.mr-filter-menu { max-height: 60vh; overflow-y: auto; }
.mr-table tbody tr[data-href] { cursor: pointer; }
.mr-table thead th a { color: inherit; }
.mr-table td, .mr-table th { white-space: nowrap; }
.mr-check { width: 2.5rem; }
.mr-bulkbar.d-flex { position: sticky; top: .5rem; z-index: 5; }

/* ---- forms ---- */
/* A record's page reads at a width a form is read at, as Liwan's new booking
   does — lists keep the whole screen. */
.mr-form-page { max-width: 1240px; margin-inline: auto; }

/* The form's sections as numbered steps over one card. */
.mr-steps { display: flex; flex-wrap: nowrap; gap: .25rem; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--tblr-border-color); margin-bottom: 1.75rem; scrollbar-width: thin; }
.mr-steps .nav-link {
  display: flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .7rem 1rem; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--tblr-secondary); font-weight: 600;
}
.mr-steps .nav-link:hover { color: var(--tblr-body-color); }
.mr-steps .nav-link.active { color: var(--mr-brand); border-bottom-color: var(--mr-brand); }
.mr-steps .nav-link.text-danger { color: var(--tblr-danger) !important; }
.mr-step__num {
  width: 1.4rem; height: 1.4rem; flex: none; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: .75rem; font-weight: 600;
  background: #e6e8eb; color: var(--tblr-secondary);
}
.mr-steps .nav-link.active .mr-step__num { background: var(--mr-brand); color: #fff; }
.mr-save { padding-inline: 1.5rem; }

/* The days of the week as buttons: ticked is a day off. */
.mr-days { display: flex; flex-wrap: wrap; gap: .4rem; }
.mr-days .btn { min-width: 5.5rem; font-weight: 500; }
.mr-days .btn-check:not(:checked) + .btn { background: var(--tblr-bg-surface); border-color: var(--tblr-border-color); color: var(--tblr-body-color); }
.mr-days .btn-check:not(:checked) + .btn:hover { border-color: var(--mr-brand); color: var(--mr-brand); }
.mr-days .btn-check:checked + .btn { background: var(--mr-brand); border-color: var(--mr-brand); color: #fff; }
.mr-days .btn-check:focus-visible + .btn { box-shadow: 0 0 0 .2rem rgba(var(--mr-brand-rgb), .25); }

.mr-required::after { content: " *"; color: var(--tblr-danger); }
.mr-readonly { padding: .45rem 0; min-height: 2.4rem; border-bottom: 1px dashed var(--tblr-border-color); word-break: break-word; }
.mr-readonly p:last-child { margin-bottom: 0; }
.mr-multi > * { flex: 1; }
.mr-tabs { scrollbar-width: thin; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.mr-inline-table td { min-width: 9rem; }
.mr-inline-table td:last-child { min-width: 0; }
.mr-actionbar {
  position: sticky; bottom: 0; z-index: 10;
  margin: 0; padding: .85rem 0;
  background: rgba(236, 239, 244, .94);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--tblr-border-color);
}
.mr-form select[multiple] { min-height: 9rem; }

/* Direction-bearing icons are written for Arabic and mirrored for English. */
[dir="ltr"] .mr-flip { display: inline-block; transform: scaleX(-1); }
.min-w-0 { min-width: 0; }

@media (max-width: 575.98px) {
  .mr-actionbar .btn { flex: 1 1 auto; }
}

/* ---- reports ---- */
.cell-late { background: rgba(var(--tblr-warning-rgb), .18) !important; }
.cell-early-leave { background: rgba(var(--tblr-azure-rgb), .16) !important; }
.cell-absent { background: rgba(var(--tblr-danger-rgb), .14) !important; }
.mr-bars { display: flex; align-items: flex-end; gap: .5rem; height: 12rem; padding: 1rem 1rem .25rem; overflow-x: auto; }
.mr-bar { flex: 1 0 2.25rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 2.25rem; }
.mr-bar-fill { width: 70%; max-width: 2.5rem; border-radius: .35rem .35rem 0 0; background: var(--mr-brand); opacity: .85; min-height: 2px; }
.mr-bar-value { font-size: .72rem; color: var(--tblr-secondary); margin-bottom: .2rem; white-space: nowrap; }
.mr-bar-label { font-size: .72rem; color: var(--tblr-secondary); margin-top: .3rem; white-space: nowrap; }
.mr-guide-section p { line-height: 1.9; }
.mr-guide-toc a { text-decoration: none; }
.field-just-filled { box-shadow: 0 0 0 .25rem rgba(var(--mr-brand-rgb), .35); transition: box-shadow .3s ease; }
/* A value that reads left to right (phone, email, IDs) keeps the column's alignment. */
[dir="rtl"] .mr-readonly[dir="ltr"] { text-align: right; }