/* Navigator Shipping — application theme "Ocean Wave".
   Palette taken from the company logo: navy wordmark, blue compass ring, sky "Shipping Co.", red compass needle.
   Layout: a navy band with the logo's wave runs across the top of every page; the page header sits on it in white and
   the first card overlaps its lower edge (app.js sizes the band to the header). The menu is a floating card on desktop
   and an off-canvas drawer below 992px; tables become stacked cards below 768px. Font: Cairo (self-hosted). */

:root {
  --nav-navy-950: #0d1a40;
  --nav-navy-900: #14245a;
  --nav-navy: #233e86;
  --nav-blue: #1e6fb8;
  --nav-sky: #29abe2;
  --nav-sky-soft: #e3f4fc;
  --nav-red: #e3262b;
  --nav-wave: linear-gradient(90deg, var(--nav-navy) 0%, var(--nav-blue) 45%, var(--nav-sky) 100%);

  --app-bg: #eef3f9;
  --app-surface: #ffffff;
  --app-surface-2: #f7f9fd;
  --app-border: #e1e7f0;
  --app-text: #14213d;
  --app-muted: #5b6b86;
  --app-active-bg: #e8eefb;
  --app-active-text: var(--nav-navy);
  --app-shadow: 0 1px 2px rgba(15, 29, 61, .04), 0 10px 30px rgba(15, 29, 61, .08);
  --app-shadow-sm: 0 1px 2px rgba(15, 29, 61, .05), 0 4px 14px rgba(15, 29, 61, .06);
  --app-sidebar-width: 268px;
  --app-topbar-height: 64px;
  --app-radius: 1.25rem;
  --app-band-bg: var(--nav-navy);

  --bs-primary: var(--nav-navy);
  --bs-primary-rgb: 35, 62, 134;
  --bs-link-color: var(--nav-blue);
  --bs-link-color-rgb: 30, 111, 184;
  --bs-link-hover-color: var(--nav-navy);
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-border-color: var(--app-border);
  --bs-secondary-color: var(--app-muted);
  --bs-danger: #d92d2f;
  --bs-danger-rgb: 217, 45, 47;
  --bs-font-sans-serif: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-border-radius: .65rem;
  --bs-border-radius-lg: 1rem;
  --bs-focus-ring-color: rgba(41, 171, 226, .35);
}

[data-bs-theme="dark"] {
  --app-bg: #0a1224;
  --app-surface: #111c33;
  --app-surface-2: #16233f;
  --app-border: #24345a;
  --app-text: #e6ecf7;
  --app-muted: #9aaac6;
  --app-active-bg: #1b2c52;
  --app-active-text: #cfe0ff;
  --app-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .3);
  --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .25);
  --nav-sky-soft: #0f2f45;
  --app-band-bg: #0f1d45;

  --bs-primary: #4f7fe0;
  --bs-primary-rgb: 79, 127, 224;
  --bs-link-color: #6fbff0;
  --bs-link-color-rgb: 111, 191, 240;
  --bs-link-hover-color: #a8d8f7;
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-border-color: var(--app-border);
  --bs-secondary-color: var(--app-muted);
  --bs-secondary-bg: var(--app-surface-2);
  --bs-tertiary-bg: var(--app-surface-2);
}

html, body { min-height: 100%; }
body { background: var(--app-bg); color: var(--app-text); font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--nav-sky); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; text-wrap: balance; color: var(--app-text); }
.text-muted, .form-text { color: var(--app-muted) !important; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- Buttons (brand) ---------- */
.btn { font-weight: 600; border-radius: .75rem; }
.btn-primary {
  --bs-btn-bg: var(--nav-navy); --bs-btn-border-color: var(--nav-navy);
  --bs-btn-hover-bg: var(--nav-navy-900); --bs-btn-hover-border-color: var(--nav-navy-900);
  --bs-btn-active-bg: var(--nav-navy-950); --bs-btn-active-border-color: var(--nav-navy-950);
  --bs-btn-disabled-bg: var(--nav-navy); --bs-btn-disabled-border-color: var(--nav-navy);
}
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: #3a6ad0; --bs-btn-border-color: #3a6ad0;
  --bs-btn-hover-bg: #4f7fe0; --bs-btn-hover-border-color: #4f7fe0;
  --bs-btn-active-bg: #2f5bb8; --bs-btn-active-border-color: #2f5bb8;
}
.btn-outline-primary {
  --bs-btn-color: var(--nav-navy); --bs-btn-border-color: var(--nav-navy);
  --bs-btn-hover-bg: var(--nav-navy); --bs-btn-hover-border-color: var(--nav-navy);
  --bs-btn-active-bg: var(--nav-navy-900);
}
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #8fb0f5; --bs-btn-border-color: #4f7fe0; --bs-btn-hover-bg: #3a6ad0; }
.notification-bell { position: relative; }
.notification-bell .bell-badge { position: absolute; top: .1rem; inset-inline-end: .05rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; border-radius: 1rem; background: var(--nav-red); color: #fff; font-size: .65rem; font-weight: 600; line-height: 1.1rem; text-align: center; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; }
.btn-ghost { --bs-btn-color: var(--app-muted); --bs-btn-hover-bg: var(--app-surface-2); --bs-btn-hover-color: var(--app-text); --bs-btn-border-color: transparent; }

/* ---------- Shell: wave band, topbar, floating menu card ---------- */
.app-band {
  position: absolute; inset-inline: 0; top: 0; height: 15rem; z-index: -1; pointer-events: none;
  background: url(../img/wave-band.svg) bottom / 100% 7.5rem no-repeat, var(--app-band-bg);
}
.app-shell { display: flex; align-items: flex-start; gap: 1.5rem; padding: 1rem 1.5rem 2rem; min-height: calc(100vh - var(--app-topbar-height)); }
.app-sidebar {
  position: sticky; top: calc(var(--app-topbar-height) + 1rem); z-index: 2; flex: 0 0 var(--app-sidebar-width);
  max-height: calc(100vh - var(--app-topbar-height) - 2rem);
  background: var(--app-surface); border-radius: var(--app-radius); box-shadow: var(--app-shadow);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .25s ease;
}
.app-content { flex: 1; min-width: 0; }
.app-backdrop { display: none; }

@media (max-width: 991.98px) {
  .app-shell { padding: .75rem .75rem 1.5rem; }
  .app-sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 1040; width: min(var(--app-sidebar-width), 86vw);
    max-height: none; border-radius: 0; transform: translateX(-100%);
  }
  [dir="rtl"] .app-sidebar { transform: translateX(100%); }
  body.sidebar-open .app-sidebar { transform: none; }
  body.sidebar-open .app-backdrop { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(10, 18, 36, .45); }
}
@media (prefers-reduced-motion: reduce) { .app-sidebar { transition: none; } }

/* Brand (in the topbar, on the band) */
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.brand-mark { width: 52px; height: 34px; background: #fff; border-radius: .55rem; padding: 2px 4px; display: grid; place-items: center; flex-shrink: 0; }
.brand-mark img { max-width: 100%; max-height: 100%; }
.brand-text { line-height: 1.05; }
.brand-name { display: block; font-weight: 800; letter-spacing: .14em; color: #fff; font-size: 1.02rem; direction: ltr; }
.brand-sub { display: block; font-size: .66rem; letter-spacing: .14em; color: #8fd6f5; text-transform: uppercase; direction: ltr; }
@media (max-width: 400px) { .brand-text { display: none; } }

/* Sidebar navigation: application switcher, menu search, collapsible tree (sections > sub-groups > pages) */
.sidebar-nav { flex: 1; overflow-y: auto; padding: .85rem .75rem 1rem; scrollbar-width: thin; }

.app-switcher { margin-bottom: .75rem; }
.app-switcher-btn {
  width: 100%; display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; text-align: start;
  border: 1px solid var(--app-border); border-radius: 1rem; background: var(--app-surface-2); color: var(--app-text);
}
.app-switcher-btn:hover, .app-switcher-btn[aria-expanded="true"] { border-color: var(--nav-sky); }
.app-switcher-icon { width: 2.25rem; height: 2.25rem; border-radius: .7rem; display: grid; place-items: center; flex-shrink: 0;
  background: var(--nav-navy); color: #fff; }
.app-switcher-text { flex: 1; min-width: 0; line-height: 1.3; }
.app-switcher-text small { display: block; font-size: .68rem; color: var(--app-muted); }
/* overflow: hidden (for the ellipsis) cuts at the line box: a taller line keeps Arabic descenders (ع، ج) visible. */
.app-switcher-text strong { display: block; font-size: .88rem; font-weight: 600; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-switcher-btn > .bi-chevron-expand { color: var(--app-muted); }
.app-switcher-menu { width: 100%; padding: .35rem; border-radius: .7rem; }
.app-switcher-menu .dropdown-item { border-radius: .45rem; padding: .45rem .6rem; font-size: .88rem; }
.app-switcher-menu .dropdown-item.active { background: var(--app-active-bg); color: var(--app-active-text); font-weight: 600; }

.menu-search { position: relative; margin-bottom: .6rem; }
.menu-search .bi-search { position: absolute; inset-inline-start: .65rem; top: 50%; transform: translateY(-50%); color: var(--app-muted); font-size: .8rem; pointer-events: none; }
.menu-search .form-control { padding-inline-start: 1.9rem; border-radius: 999px; background: var(--app-surface-2); }
.menu-search-empty { font-size: .8rem; color: var(--app-muted); padding: .25rem .75rem; }

.nav-link-app {
  display: flex; align-items: center; gap: .7rem; padding: .4rem .6rem; margin-block: 2px;
  border-radius: .85rem; color: var(--app-muted); text-decoration: none; font-size: .88rem; font-weight: 600; position: relative;
}
.nav-link-app i { font-size: 1rem; width: 1.25rem; text-align: center; flex-shrink: 0; }
.nav-link-app:hover { background: var(--app-surface-2); color: var(--app-text); }
.nav-link-app.active { background: var(--app-active-bg); color: var(--app-active-text); }
.nav-link-app.active i { color: var(--nav-blue); }
/* Top-level entries carry their icon in a rounded chip; the current one is filled with the sky accent. */
.nav-top i, .nav-group:not(.nav-subgroup) > .nav-group-toggle > i:first-child {
  width: 2.25rem; height: 2.25rem; border-radius: .7rem; display: grid; place-items: center; font-size: 1rem;
  background: var(--app-surface-2); color: var(--app-muted);
}
.nav-top.active i, .nav-group:not(.nav-subgroup) > .nav-group-toggle.has-active > i:first-child { background: var(--nav-sky); color: #fff; }
.nav-top { margin-bottom: .35rem; padding-block: .3rem; }

.nav-group { margin-block: 2px; }
.nav-group-toggle {
  width: 100%; display: flex; align-items: center; gap: .7rem; padding: .3rem .6rem; border: 0; border-radius: .85rem;
  background: none; color: var(--app-muted); font-size: .88rem; font-weight: 600; text-align: start;
}
.nav-group-toggle > i:first-child { font-size: 1rem; width: 1.25rem; text-align: center; flex-shrink: 0; }
.nav-group-toggle > span { flex: 1; min-width: 0; }
.nav-group-toggle:hover { background: var(--app-surface-2); color: var(--app-text); }
.nav-group-toggle .nav-chevron { font-size: .75rem; color: var(--app-muted); transition: transform .2s ease; }
.nav-group-toggle.collapsed .nav-chevron { transform: rotate(90deg); }
[dir="rtl"] .nav-group-toggle.collapsed .nav-chevron { transform: rotate(-90deg); }
.nav-group-toggle:not(.collapsed) { color: var(--app-text); }
.nav-group-toggle:not(.collapsed) > i:first-child { color: var(--nav-blue); }
.nav-group-body { position: relative; margin-inline-start: 1.7rem; padding-inline-start: .55rem; padding-block: .15rem .35rem;
  border-inline-start: 2px solid var(--app-border); }
.nav-group-body .nav-link-app { font-size: .85rem; font-weight: 500; padding-block: .38rem; }
.nav-group-body .nav-link-app.active { font-weight: 700; }
.nav-group-body .nav-link-app.active::before {
  content: ""; position: absolute; inset-inline-start: calc(-.55rem - 2px); inset-block: .3rem; width: 2px; border-radius: 2px; background: var(--nav-sky);
}
.nav-subgroup .nav-group-toggle { font-size: .85rem; padding-block: .45rem; }
.nav-subgroup .nav-group-body { margin-inline-start: 1rem; }
@media (prefers-reduced-motion: reduce) { .nav-group-toggle .nav-chevron, .collapsing { transition: none; } }

/* Select2 (bootstrap-5 theme) aligned with the app tokens, incl. dark mode and validation state */
.select2-container--bootstrap-5 .select2-selection { background-color: var(--bs-body-bg); border-color: var(--app-border); color: var(--app-text); min-height: calc(1.5em + .75rem + 2px); }
.app-content .card .select2-container--bootstrap-5 .select2-selection { background-color: var(--app-surface); }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--app-text); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--nav-sky); box-shadow: 0 0 0 .2rem rgba(41, 171, 226, .2); }
.select2-container--bootstrap-5 .select2-dropdown { background-color: var(--app-surface); border-color: var(--app-border); color: var(--app-text); box-shadow: var(--app-shadow); }
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { background-color: var(--app-surface-2); border-color: var(--app-border); color: var(--app-text); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option { color: var(--app-text); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted { background-color: var(--app-active-bg); color: var(--app-active-text); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) { background-color: var(--nav-navy); color: #fff; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { color: var(--app-text); border-color: var(--app-border); background: var(--app-surface-2); }
select.input-validation-error + .select2-container .select2-selection,
select.is-invalid + .select2-container .select2-selection { border-color: var(--bs-form-invalid-border-color, #dc3545); }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: var(--app-muted); }
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aaac6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.select2-container--bootstrap-5 .select2-selection__clear { opacity: .6; }
.select2-container.select2-inline { min-width: 10rem; max-width: 16rem; }
@media (max-width: 575.98px) { .select2-container.select2-inline { width: 100% !important; max-width: none; } }

.sidebar-footer { padding: .7rem 1.25rem; border-top: 1px solid var(--app-border); font-size: .72rem; color: var(--app-muted); }

/* Topbar: on the band, white controls; stays navy when the page scrolls */
.app-topbar {
  position: sticky; top: 0; z-index: 1030; height: var(--app-topbar-height);
  display: flex; align-items: center; gap: .75rem; padding-inline: 1.5rem;
  background: var(--app-band-bg); color: #fff;
}
.topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: .35rem; }
.app-topbar .btn-ghost { --bs-btn-color: rgba(255, 255, 255, .88); --bs-btn-hover-bg: rgba(255, 255, 255, .14); --bs-btn-hover-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, .2); --bs-btn-active-color: #fff; border-radius: 50%; }
.app-topbar .btn-icon, .app-topbar .lang-switch { width: 2.5rem; height: 2.5rem; background: rgba(255, 255, 255, .1); }
.lang-switch { font-weight: 700; min-width: 2.25rem; padding: 0; }
.avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--nav-sky); color: #fff; font-weight: 700; font-size: .85rem;
}
.user-chip { display: flex; align-items: center; gap: .5rem; border: 0; background: none; color: #fff; padding: .2rem .4rem; border-radius: 2rem; }
.user-chip:hover { background: rgba(255, 255, 255, .12); }
.user-chip .name { font-size: .85rem; font-weight: 600; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .bi-chevron-down { color: rgba(255, 255, 255, .7) !important; }
@media (max-width: 575.98px) { .user-chip .name { display: none; } .app-topbar { padding-inline: .75rem; gap: .5rem; } }

/* ---------- Page header & cards ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; padding-top: .5rem; }
.page-header h1 { font-size: 1.65rem; font-weight: 800; margin: 0; }
.page-header .subtitle { color: var(--app-muted); margin: .2rem 0 0; font-size: .9rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Phones: the dashboard year picker stays compact (label kept for screen readers) so the header keeps its usual height. */
@media (max-width: 575.98px) {
  .dash-year label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dash-year .select2-container.select2-inline { width: 7.5rem !important; }
}
.breadcrumb { --bs-breadcrumb-divider-color: var(--app-muted); font-size: .8rem; margin-bottom: .35rem; }
.breadcrumb a { color: var(--app-muted); text-decoration: none; }
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { float: right; padding-left: var(--bs-breadcrumb-item-padding-x); padding-right: 0; }

/* The page header on the band: white text, light buttons */
.page-header.on-band, .app-content > .page-header:first-child { color: #fff; }
/* Same band height on every page: the header always takes the room of breadcrumb + title + subtitle. */
.app-content > .page-header.on-band { min-height: 6.25rem; }
/* Phones: header actions wrap under the title; the room for one wrapped row keeps the band the same on most pages. */
@media (max-width: 575.98px) { .app-content > .page-header.on-band { min-height: 9.25rem; } }
/* Content that is not a card starts below the band (app.js BAND_OVERLAP 72px + 1rem; margins collapse with the header's). */
.app-content > .below-band { margin-top: calc(72px + 1rem); }
.page-header.on-band h1, .app-content > .page-header:first-child h1 { color: #fff; }
.page-header.on-band :is(.subtitle, .text-muted, .form-text, label), .app-content > .page-header:first-child :is(.subtitle, .text-muted, .form-text, label) { color: rgba(255, 255, 255, .8) !important; }
.page-header.on-band .breadcrumb, .app-content > .page-header:first-child .breadcrumb { --bs-breadcrumb-divider-color: rgba(255, 255, 255, .55); --bs-breadcrumb-item-active-color: rgba(255, 255, 255, .9); }
.page-header.on-band .breadcrumb a, .app-content > .page-header:first-child .breadcrumb a { color: rgba(255, 255, 255, .75); }
.page-header.on-band a:not(.btn), .app-content > .page-header:first-child a:not(.btn) { color: #a8dcf5; }
.page-header.on-band .btn-primary, .app-content > .page-header:first-child .btn-primary {
  --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-color: var(--nav-navy);
  --bs-btn-hover-bg: #e3f4fc; --bs-btn-hover-border-color: #e3f4fc; --bs-btn-hover-color: var(--nav-navy);
  --bs-btn-active-bg: #d4ecf9; --bs-btn-active-border-color: #d4ecf9; --bs-btn-active-color: var(--nav-navy);
}
.page-header.on-band :is(.btn-outline-primary, .btn-outline-secondary, .btn-light, .btn-ghost, .btn-outline-success),
.app-content > .page-header:first-child :is(.btn-outline-primary, .btn-outline-secondary, .btn-light, .btn-ghost, .btn-outline-success) {
  --bs-btn-color: #fff; --bs-btn-bg: rgba(255, 255, 255, .08); --bs-btn-border-color: rgba(255, 255, 255, .45);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .18); --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, .25);
}
.page-header.on-band .btn-outline-danger, .app-content > .page-header:first-child .btn-outline-danger {
  --bs-btn-color: #ffc2c3; --bs-btn-border-color: rgba(255, 194, 195, .6); --bs-btn-hover-bg: var(--nav-red); --bs-btn-hover-border-color: var(--nav-red); --bs-btn-hover-color: #fff;
}
/* Menus opened from the header sit on a white panel: give them back the normal text colours (the header's light
   link/muted colours are meant for the navy band only). */
.page-header.on-band .dropdown-menu, .app-content > .page-header:first-child .dropdown-menu { color: var(--bs-body-color); }
.page-header.on-band .dropdown-menu a.dropdown-item, .app-content > .page-header:first-child .dropdown-menu a.dropdown-item { color: var(--bs-dropdown-link-color); }
.page-header.on-band .dropdown-menu a.dropdown-item:is(:hover, :focus), .app-content > .page-header:first-child .dropdown-menu a.dropdown-item:is(:hover, :focus) { color: var(--bs-dropdown-link-hover-color); }
.page-header.on-band .dropdown-menu a.dropdown-item.active, .app-content > .page-header:first-child .dropdown-menu a.dropdown-item.active { color: var(--bs-dropdown-link-active-color); }
.page-header.on-band .dropdown-menu :is(.subtitle, .text-muted, .form-text, label, .dropdown-header),
.app-content > .page-header:first-child .dropdown-menu :is(.subtitle, .text-muted, .form-text, label, .dropdown-header) { color: var(--bs-secondary-color) !important; }

.card { --bs-card-bg: var(--app-surface); --bs-card-border-color: transparent; --bs-card-border-radius: var(--app-radius); --bs-card-inner-border-radius: calc(var(--app-radius) - 1px); box-shadow: var(--app-shadow); }
[data-bs-theme="dark"] .card { --bs-card-border-color: var(--app-border); }
.card-header { background: transparent; border-bottom: 1px solid var(--app-border); padding: 1rem 1.35rem; font-weight: 700; }
.card-body { padding: 1.35rem; }
.section-title { font-size: .85rem; font-weight: 700; letter-spacing: .02em; color: var(--app-muted); margin: 1.25rem 0 .75rem; }
.section-title:first-child { margin-top: 0; }

/* Stat tiles */
.stat { display: flex; gap: 1rem; align-items: center; }
.stat-icon { width: 2.9rem; height: 2.9rem; border-radius: .85rem; display: grid; place-items: center; font-size: 1.3rem; background: var(--nav-sky-soft); color: var(--nav-blue); flex-shrink: 0; }
.stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--app-muted); font-size: .82rem; }

/* Quick links */
.quick-link { display: flex; align-items: center; gap: .85rem; padding: 1rem; border-radius: 1rem; border: 1px solid transparent; background: var(--app-surface); box-shadow: var(--app-shadow-sm); color: var(--app-text); text-decoration: none; height: 100%; font-weight: 600; transition: border-color .15s, transform .15s; }
.quick-link:hover { border-color: var(--nav-sky); transform: translateY(-1px); color: var(--app-text); }
.quick-link i { width: 2.5rem; height: 2.5rem; border-radius: .8rem; display: grid; place-items: center; font-size: 1.15rem; color: var(--nav-blue); background: var(--nav-sky-soft); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .quick-link { transition: none; } .quick-link:hover { transform: none; } }

/* ---------- Toolbar, tables, pager ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .85rem 1.25rem; border-bottom: 1px solid var(--app-border); }
.toolbar .search { position: relative; flex: 1 1 16rem; max-width: 26rem; }
.toolbar .search i { position: absolute; inset-inline-start: .75rem; top: 50%; transform: translateY(-50%); color: var(--app-muted); }
.toolbar .search input { padding-inline-start: 2.25rem; }

.table { --bs-table-bg: transparent; --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border); --bs-table-hover-bg: var(--app-surface-2); margin: 0; }
.table > thead th { font-size: .78rem; font-weight: 700; color: var(--app-muted); background: var(--app-surface-2); white-space: nowrap; padding: .75rem 1rem; border-bottom-color: var(--app-border); }
.table > tbody td { padding: .75rem 1rem; vertical-align: middle; }
.table .actions { white-space: nowrap; text-align: end; }
.table td .num, .table td.num { white-space: nowrap; }
.table a.sort { color: inherit; text-decoration: none; }
.table a.sort i { font-size: .7rem; }
.table-empty { text-align: center; padding: 3rem 1rem; color: var(--app-muted); }
.table-empty i { font-size: 2rem; display: block; margin-bottom: .5rem; color: var(--nav-sky); }

/* Mobile: rows become cards; each cell shows its column label from data-label. */
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { border-bottom: 1px solid var(--app-border); padding: .6rem 1rem; }
  .table-stack > tbody > tr > td { border: 0; padding: .25rem 0; display: flex; justify-content: space-between; gap: 1rem; text-align: end; }
  .table-stack > tbody > tr > td::before { content: attr(data-label); color: var(--app-muted); font-size: .8rem; text-align: start; flex-shrink: 0; max-width: 45%; }
  /* app.js wraps each cell's content so several lines (name + e-mail, department + job) stack under each other at the end */
  .table-stack > tbody > tr > td > .cell-value { display: block; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  /* .num / .ltr on a cell must not flip the label/value row: keep the page direction on the cell, apply LTR to its value */
  [dir="rtl"] .table-stack > tbody > tr > td { direction: rtl; }
  [dir="rtl"] .table-stack > tbody > tr > td:is(.num, .ltr) > .cell-value { direction: ltr; unicode-bidi: isolate; text-align: left; }
  [dir="rtl"] .table-stack .cell-value :is(div, p).ltr, [dir="rtl"] .table-stack .cell-value :is(div, p).num { text-align: left; }
  .table-stack > tbody > tr > td.actions { justify-content: flex-end; padding-top: .5rem; }
  .table-stack > tbody > tr > td.actions::before { content: none; }
  .table-stack > tbody > tr > td.table-empty { display: block; text-align: center; }
  .table-stack > tbody > tr > td.table-empty::before { content: none; }
}

.cell-value { display: contents; }
.nav-tabs .nav-link { white-space: nowrap; }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.25rem; border-top: 1px solid var(--app-border); font-size: .85rem; color: var(--app-muted); }
.pagination { --bs-pagination-color: var(--app-text); --bs-pagination-bg: var(--app-surface); --bs-pagination-border-color: var(--app-border); --bs-pagination-active-bg: var(--nav-navy); --bs-pagination-active-border-color: var(--nav-navy); --bs-pagination-hover-bg: var(--app-surface-2); --bs-pagination-disabled-bg: var(--app-surface); margin: 0; }
[data-bs-theme="dark"] .pagination { --bs-pagination-active-bg: #3a6ad0; --bs-pagination-active-border-color: #3a6ad0; }

/* ---------- Badges (status encoded by color + text) ---------- */
.badge-soft { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 2rem; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.badge-soft::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.badge-success { background: #e4f6ec; color: #17794a; }
.badge-warning { background: #fff4dc; color: #8a5a00; }
.badge-danger { background: #fde8e8; color: #b42323; }
.badge-info { background: var(--nav-sky-soft); color: #0f6a96; }
.badge-neutral { background: var(--app-surface-2); color: var(--app-muted); }
[data-bs-theme="dark"] .badge-success { background: #123826; color: #7fd8a8; }
[data-bs-theme="dark"] .badge-warning { background: #3a2c0c; color: #f3c766; }
[data-bs-theme="dark"] .badge-danger { background: #3d1518; color: #f59a9a; }
[data-bs-theme="dark"] .badge-info { color: #7cd0f5; }

/* ---------- Forms ---------- */
.form-label { font-weight: 500; font-size: .875rem; margin-bottom: .3rem; }
.form-label.required::after { content: " *"; color: var(--nav-red); }
.form-control, .form-select { border-radius: .7rem; border-color: var(--app-border); background-color: var(--app-surface); }
.form-control:focus, .form-select:focus { border-color: var(--nav-sky); box-shadow: 0 0 0 .2rem rgba(41, 171, 226, .2); }
.input-validation-error { border-color: var(--bs-danger) !important; }
.field-validation-error { color: var(--bs-danger); font-size: .8rem; display: block; margin-top: .25rem; }
.validation-summary-errors ul { margin: 0; padding-inline-start: 1.1rem; }
.validation-summary-valid { display: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; padding: 1rem 1.25rem; border-top: 1px solid var(--app-border); background: var(--app-surface-2); border-radius: 0 0 var(--app-radius) var(--app-radius); }
.form-check-input:checked { background-color: var(--nav-navy); border-color: var(--nav-navy); }
input[type="date"], input[type="time"], input[type="number"], input[type="email"], input[type="tel"] { direction: ltr; }
[dir="rtl"] input[type="date"], [dir="rtl"] input[type="time"], [dir="rtl"] input[type="number"] { text-align: right; }

/* Detail lists */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.dl-grid dt { font-size: .78rem; color: var(--app-muted); font-weight: 500; }
.dl-grid dd { margin: .15rem 0 0; font-weight: 500; overflow-wrap: anywhere; }

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; inset-block-end: 1rem; inset-inline-end: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; max-width: min(24rem, calc(100vw - 2rem)); }
.toast-app { display: flex; gap: .65rem; align-items: flex-start; padding: .8rem 1rem; border-radius: 1rem; background: var(--app-surface); border: 1px solid var(--app-border); box-shadow: var(--app-shadow); border-inline-start: 4px solid var(--nav-sky); }
.toast-app.success { border-inline-start-color: #1f9d5c; }
.toast-app.error { border-inline-start-color: var(--nav-red); }
.toast-app i { font-size: 1.15rem; }
.toast-app.success i { color: #1f9d5c; }
.toast-app.error i { color: var(--nav-red); }
.toast-app .btn-close { margin-inline-start: auto; font-size: .7rem; }

/* ---------- Auth pages ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--app-bg); }
.auth-brand {
  position: relative; overflow: hidden; color: #fff; padding: 3rem;
  background: radial-gradient(120% 90% at 85% 10%, #2c56b8 0%, var(--nav-navy) 45%, var(--nav-navy-950) 100%);
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth-brand h2 { color: #fff; font-size: 2rem; font-weight: 700; max-width: 26rem; line-height: 1.35; }
.auth-brand p { color: rgba(255, 255, 255, .78); max-width: 28rem; }
.auth-brand .logo-tile { background: #fff; border-radius: 1rem; padding: .75rem 1rem; width: 15rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.auth-brand .logo-tile img { width: 100%; }
.auth-waves { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 42%; pointer-events: none; overflow: hidden; }

/* ---- Sign-in animation (CSS only; off for prefers-reduced-motion) ---- */
.auth-waves .wave { transform-box: fill-box; will-change: transform; }
.auth-waves .wave-1 { animation: auth-wave 26s linear infinite; }
.auth-waves .wave-2 { animation: auth-wave 18s linear infinite reverse; }
.auth-waves .wave-3 { animation: auth-wave 12s linear infinite; }
@keyframes auth-wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.auth-glow {
  position: absolute; width: 34rem; height: 34rem; inset-inline-end: -10rem; top: -12rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(41, 171, 226, .35) 0%, rgba(41, 171, 226, 0) 65%);
  animation: auth-glow 14s ease-in-out infinite alternate;
}
@keyframes auth-glow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6rem, 5rem) scale(1.15); } }
.auth-brand .logo-tile { position: relative; overflow: hidden; animation: auth-rise .8s cubic-bezier(.2, .7, .2, 1) both, auth-float 7s ease-in-out 1s infinite; }
.auth-brand .logo-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%);
  transform: translateX(-120%); animation: auth-sheen 1.4s ease-out 1s both;
}
@keyframes auth-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes auth-sheen { to { transform: translateX(120%); } }
@keyframes auth-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.auth-anim { animation: auth-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.auth-anim-2 { animation-delay: .15s; }
.auth-anim-3 { animation-delay: .3s; }
.auth-stagger > :not(form), .auth-stagger form > * { animation: auth-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.auth-stagger > :nth-child(1) { animation-delay: .05s; } .auth-stagger > :nth-child(2) { animation-delay: .1s; }
.auth-stagger > :nth-child(3) { animation-delay: .15s; }
.auth-stagger form > :nth-child(2) { animation-delay: .2s; } .auth-stagger form > :nth-child(3) { animation-delay: .26s; }
.auth-stagger form > :nth-child(4) { animation-delay: .32s; } .auth-stagger form > :nth-child(5) { animation-delay: .38s; }
.auth-stagger form > :nth-child(6) { animation-delay: .44s; } .auth-stagger form > :nth-child(7) { animation-delay: .5s; }
.auth-stagger form > :nth-child(n+8) { animation-delay: .56s; }
.auth-card .form-control:focus, .auth-card .select2-container--focus .select2-selection { transition: box-shadow .25s, border-color .25s; }
/* Submit button busy state (forms with data-busy-on-submit, set by app.js) */
.btn-busy { position: relative; }
.btn-busy .btn-busy-spinner { display: none; position: absolute; inset: 0; margin: auto; }
.btn-busy.is-busy .btn-busy-label { visibility: hidden; }
.btn-busy.is-busy .btn-busy-spinner { display: block; }
@media (prefers-reduced-motion: reduce) {
  .auth-waves .wave, .auth-glow, .auth-brand .logo-tile, .auth-brand .logo-tile::after, .auth-anim, .auth-stagger > :not(form), .auth-stagger form > * { animation: none !important; }
}
.auth-brand .coords { font-size: .75rem; letter-spacing: .12em; color: rgba(255, 255, 255, .6); direction: ltr; position: relative; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.auth-card { width: 100%; max-width: 25rem; }
.auth-card h1 { font-size: 1.6rem; margin-bottom: .35rem; }
.auth-card .mobile-logo { display: none; width: 11rem; margin-bottom: 1.5rem; }
/* Screen lock: the signed-in user's initials with a lock badge, in place of the sign-in heading. */
.lock-user { text-align: center; }
.lock-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 5.5rem; height: 5.5rem; margin-bottom: 1rem; border-radius: 50%; background: linear-gradient(135deg, #233e86, #29abe2); color: #fff; font-size: 2rem; font-weight: 700; box-shadow: 0 10px 30px rgba(35, 62, 134, .3); }
.lock-badge { position: absolute; bottom: -.15rem; inset-inline-end: -.15rem; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bs-body-bg); color: #233e86; font-size: .95rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.auth-top { position: absolute; top: 1rem; inset-inline-end: 1rem; display: flex; gap: .35rem; z-index: 2; }
@media (max-width: 991.98px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-card .mobile-logo { display: block; }
}

/* ---------- Error pages ---------- */
.error-page { position: relative; z-index: 1; max-width: 32rem; margin: 5rem auto 4rem; text-align: center; }
.error-page .code { font-size: 4rem; font-weight: 700; background: var(--nav-wave); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }

/* Permission picker */
.perm-group { border: 1px solid var(--app-border); border-radius: 1rem; padding: .75rem 1rem; background: var(--app-surface); }
.perm-group h3 { font-size: .9rem; margin: 0 0 .5rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.perm-area { margin-bottom: 1.25rem; }

/* Utilities */
.gap-row { row-gap: 1rem; }
.min-w-0 { min-width: 0; }
.cursor-pointer { cursor: pointer; }
@media print {
  .app-band, .app-sidebar, .app-topbar, .page-actions, .toolbar, .pager, .toast-stack { display: none !important; }
  .app-shell { display: block; padding: 0; }
  .page-header, .page-header h1, .app-content > .page-header:first-child h1 { color: #000 !important; }
  .card { box-shadow: none; border: 0; }
}

/* Dashboard: "how is it calculated?" icon and its popover. */
.dash-info { display: inline-block; margin-inline-start: .3rem; color: var(--bs-secondary-color); cursor: help; font-size: .95em; line-height: 1; }
.dash-info:hover, .dash-info:focus-visible { color: var(--bs-primary); outline: none; }
.dash-popover { max-width: 24rem; }
.dash-popover .popover-body { font-size: .875rem; line-height: 1.6; text-align: start; }