/* Binaa design system. Loaded after Bootstrap 5.3: the tokens below are mapped onto Bootstrap's own
   variables so its components follow, then the product's components are defined.
   Direction: only logical properties are used, so the Arabic (right-to-left) pages mirror by themselves. */

/* ---------- Tokens ---------- */
:root {
  --app-primary: #1971c2;
  --app-primary-hover: #1864ab;
  --app-primary-active: #145591;
  --app-primary-soft: #e7f5ff;
  --app-primary-rgb: 25, 113, 194;
  --app-text: #212529;
  --app-text-soft: #343a40;
  --app-muted: #5c636a;
  /* Muted text placed straight on the page background (4.5:1 needs a slightly darker grey there). */
  --app-muted-on-bg: #495057;
  /* Bootstrap's secondary text (`.text-secondary`): 4.5:1 on the surface, the page background and a hovered row. */
  --app-secondary: #5c636a;
  --app-bg: #f8f9fa;
  --app-surface: #ffffff;
  --app-surface-sunken: #f1f3f5;
  --app-hover: #f1f3f5;
  --app-border: #dee2e6;
  --app-border-strong: #ced4da;

  --app-success: #16a34a;  --app-success-soft: #dcfce7;  --app-success-text: #166534;
  --app-warning: #d97706;  --app-warning-soft: #fef3c7;  --app-warning-text: #92400e;
  --app-danger: #dc2626;   --app-danger-soft: #fee2e2;   --app-danger-text: #991b1b;
  --app-info: #0284c7;     --app-info-soft: #e0f2fe;     --app-info-text: #075985;
  --app-accent: #7c3aed;   --app-accent-soft: #ede9fe;   --app-accent-text: #5b21b6;
  --app-neutral: #868e96;  --app-neutral-soft: #f1f3f5;  --app-neutral-text: #495057;

  --app-radius: 12px;
  --app-radius-control: 8px;
  --app-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .1);
  --app-shadow-raised: 0 1px 3px rgba(0, 0, 0, .05), 0 20px 25px -5px rgba(0, 0, 0, .05), 0 10px 10px -5px rgba(0, 0, 0, .04);
  /* Mantine's "sm": what a card rises to under the pointer. */
  --app-shadow-hover: 0 1px 3px rgba(0, 0, 0, .05), 0 10px 15px -5px rgba(0, 0, 0, .08), 0 7px 7px -5px rgba(0, 0, 0, .06);
  --app-ease: cubic-bezier(.2, .8, .2, 1);
  --app-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --app-focus-ring: 0 0 0 .2rem rgba(var(--app-primary-rgb), .25);
  --app-sidebar-width: 16rem;
  --app-topbar-height: 3.75rem;
  /* Small capitals (table headers, group labels). Arabic has no capitals and must not be letter-spaced. */
  --app-caps-size: .75rem;
  --app-caps-spacing: .04em;

  /* Bootstrap follows the tokens. */
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: var(--app-primary-rgb);
  --bs-secondary: var(--app-secondary);
  --bs-secondary-rgb: 92, 99, 106;
  --bs-success: var(--app-success);
  --bs-success-rgb: 22, 163, 74;
  --bs-warning: var(--app-warning);
  --bs-warning-rgb: 217, 119, 6;
  --bs-danger: var(--app-danger);
  --bs-danger-rgb: 220, 38, 38;
  --bs-info: var(--app-info);
  --bs-info-rgb: 2, 132, 199;
  --bs-body-color: var(--app-text);
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: var(--app-bg);
  --bs-body-bg-rgb: 248, 249, 250;
  --bs-emphasis-color: var(--app-text);
  --bs-emphasis-color-rgb: 33, 37, 41;
  --bs-secondary-color: var(--app-secondary);
  --bs-secondary-color-rgb: 92, 99, 106;
  --bs-tertiary-bg: var(--app-hover);
  --bs-secondary-bg: var(--app-surface-sunken);
  --bs-border-color: var(--app-border);
  --bs-body-font-family: var(--app-font);
  --bs-border-color-translucent: var(--app-border);
  --bs-border-radius: var(--app-radius-control);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: var(--app-radius);
  --bs-link-color: var(--app-primary);
  --bs-link-color-rgb: var(--app-primary-rgb);
  --bs-link-hover-color: var(--app-primary-hover);
  --bs-link-hover-color-rgb: 24, 100, 171;
  --bs-focus-ring-color: rgba(var(--app-primary-rgb), .25);
  --bs-box-shadow-sm: var(--app-shadow);
  --bs-primary-bg-subtle: var(--app-primary-soft);
  --bs-primary-border-subtle: #a5d8ff;
  --bs-primary-text-emphasis: var(--app-primary-active);
  --bs-success-bg-subtle: var(--app-success-soft);
  --bs-success-border-subtle: #bbf7d0;
  --bs-success-text-emphasis: var(--app-success-text);
  --bs-warning-bg-subtle: var(--app-warning-soft);
  --bs-warning-border-subtle: #fde68a;
  --bs-warning-text-emphasis: var(--app-warning-text);
  --bs-danger-bg-subtle: #fef2f2;
  --bs-danger-border-subtle: #fecaca;
  --bs-danger-text-emphasis: var(--app-danger-text);
  --bs-info-bg-subtle: #f0f9ff;
  --bs-info-border-subtle: #bae6fd;
  --bs-info-text-emphasis: var(--app-info-text);
  --bs-form-invalid-color: #b91c1c;
  --bs-form-invalid-border-color: var(--app-danger);
}
:root:lang(ar) { --app-caps-size: .8125rem; --app-caps-spacing: 0; }

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; letter-spacing: -.01em; }
:lang(ar) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { letter-spacing: 0; }
a { text-decoration: none; }
/* Links in content underline on hover; links that are buttons, menu items or navigation do not. */
a:not(.btn):not(.dropdown-item):not(.nav-link):hover { text-decoration: underline; }
.material-symbols-outlined { vertical-align: middle; user-select: none; }
/* Emails and phone numbers read left to right in Arabic too, but stay aligned with the fields around them. */
[dir="rtl"] input[dir="ltr"] { text-align: right; }

/* One visible keyboard focus for every interactive element. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible,
.btn:focus-visible, .btn-close:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible,
.form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible {
  outline: 2px solid var(--app-primary); outline-offset: 2px;
}
.form-control:focus-visible, .form-select:focus-visible { outline-offset: -1px; }

/* ---------- Buttons ---------- */
.btn { --bs-btn-font-weight: 500; --bs-btn-font-size: .875rem; --bs-btn-padding-x: .875rem; --bs-btn-padding-y: .46875rem; --bs-btn-focus-box-shadow: var(--app-focus-ring);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn:focus-visible { box-shadow: var(--app-focus-ring); }
.btn-sm { --bs-btn-font-size: .8125rem; --bs-btn-padding-x: .625rem; --bs-btn-padding-y: .25rem; }
.btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-active-bg: var(--app-primary-active); --bs-btn-active-border-color: var(--app-primary-active);
  --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.btn-success { --bs-btn-bg: #15803d; --bs-btn-border-color: #15803d; --bs-btn-hover-bg: #166534;
  --bs-btn-hover-border-color: #166534; --bs-btn-active-bg: #14532d; --bs-btn-active-border-color: #14532d;
  --bs-btn-disabled-bg: #15803d; --bs-btn-disabled-border-color: #15803d; }
.btn-warning { --bs-btn-color: #fff; --bs-btn-bg: #b45309; --bs-btn-border-color: #b45309; --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #92400e; --bs-btn-hover-border-color: #92400e; --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #78350f; --bs-btn-active-border-color: #78350f; --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #b45309; --bs-btn-disabled-border-color: #b45309; }
.btn-outline-primary { --bs-btn-color: var(--app-primary); --bs-btn-border-color: #a5d8ff;
  --bs-btn-hover-color: var(--app-primary-hover); --bs-btn-hover-bg: var(--app-primary-soft);
  --bs-btn-hover-border-color: #74c0fc; --bs-btn-active-color: var(--app-primary-active);
  --bs-btn-active-bg: #d0ebff; --bs-btn-active-border-color: #74c0fc; --bs-btn-disabled-color: var(--app-primary);
  --bs-btn-disabled-border-color: #a5d8ff; background-color: var(--app-surface); }
.btn-outline-secondary { --bs-btn-color: var(--app-text-soft); --bs-btn-border-color: var(--app-border-strong);
  --bs-btn-hover-color: var(--app-text); --bs-btn-hover-bg: var(--app-hover);
  --bs-btn-hover-border-color: var(--app-border-strong); --bs-btn-active-color: var(--app-text);
  --bs-btn-active-bg: var(--app-surface-sunken); --bs-btn-active-border-color: var(--app-border-strong);
  --bs-btn-disabled-color: var(--app-muted); --bs-btn-disabled-border-color: var(--app-border);
  background-color: var(--app-surface); }
.btn-outline-danger { --bs-btn-color: #b91c1c; --bs-btn-border-color: #fecaca; --bs-btn-hover-color: #991b1b;
  --bs-btn-hover-bg: #fef2f2; --bs-btn-hover-border-color: #fca5a5; --bs-btn-active-color: #991b1b;
  --bs-btn-active-bg: var(--app-danger-soft); --bs-btn-active-border-color: #fca5a5;
  --bs-btn-disabled-color: #b91c1c; --bs-btn-disabled-border-color: #fecaca; background-color: var(--app-surface); }
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-danger:hover { background-color: var(--bs-btn-hover-bg); }
.btn-outline-primary:active, .btn-outline-secondary:active, .btn-outline-danger:active { background-color: var(--bs-btn-active-bg); }
.btn-link { --bs-btn-font-weight: 500; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: .375rem;
  border-radius: var(--app-radius-control); color: var(--app-text-soft); border: 0; }
.btn-icon:hover { background: var(--app-surface-sunken); color: var(--app-text); }

/* ---------- Cards ---------- */
.card { --bs-card-bg: var(--app-surface); --bs-card-border-color: var(--app-border);
  --bs-card-border-radius: var(--app-radius); --bs-card-inner-border-radius: calc(var(--app-radius) - 1px);
  --bs-card-spacer-x: 1.25rem; --bs-card-spacer-y: 1.25rem; --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-x: 1.25rem; --bs-card-cap-padding-y: .875rem; box-shadow: var(--app-shadow); }
.card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem;
  min-height: 3.25rem; }
.card-title { font-size: 1rem; font-weight: 600; margin: 0; }
.card-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.card-narrow { max-width: 42rem; }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border);
  --bs-table-active-bg: var(--app-primary-soft); --bs-table-hover-bg: var(--app-hover); font-size: .875rem; }
.table > :not(caption) > * > * { padding: .75rem; vertical-align: middle; }
.table > thead > tr > th { font-size: var(--app-caps-size); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--app-caps-spacing); color: var(--app-muted); white-space: nowrap;
  border-bottom-color: var(--app-border); }
.table > tbody > tr:hover > * { --bs-table-bg-state: var(--app-hover); }
.table > tbody > tr.table-plain-row:hover > * { --bs-table-bg-state: initial; }
.table > tbody > tr.table-active:hover > * { --bs-table-bg-state: var(--app-primary-soft); }
.table a { font-weight: 500; }
/* Amounts stay on one line. A name (`.cell-name`) keeps a readable width and wraps when it is long, even
   without spaces, so it can never push the table wider. */
.table > tbody > tr > td.text-end { white-space: nowrap; }
.table .cell-name { min-width: 10rem; overflow-wrap: anywhere; }
/* Inside a card the table is flush: its first and last cells line up with the card's padding, and the card's
   own border is the only outer border. */
.card .table > :not(caption) > * > :first-child { padding-inline-start: 1.25rem; }
.card .table > :not(caption) > * > :last-child { padding-inline-end: 1.25rem; }
.card .table > tbody > tr:last-child > * { border-bottom-width: 0; }
.card > .table-responsive:first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; }
.card > .table-responsive:last-child { border-end-start-radius: inherit; border-end-end-radius: inherit; }
/* Positioned, so that text hidden for screen readers only (absolutely placed) inside a wide table is cut off
   with the table instead of widening the page. */
.table-responsive { position: relative; }
/* A list with nothing in it shows its empty state alone: without the column headings the table is as wide as
   its card, so the message is centred in what is visible instead of in a table that scrolls sideways. */
.table-responsive > .table:has(> tbody > .table-plain-row > td[colspan]) > thead { display: none; }
.cell-user { display: flex; align-items: center; gap: .625rem; min-width: 12rem; font-weight: 500; }
.cell-user > span:last-child { min-width: 0; }
/* Long text (a list of modules, a note) wraps inside a column of a readable width. */
.table .cell-wrap { min-width: 14rem; white-space: normal; }

.app-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .75rem 1.25rem; border-top: 1px solid var(--app-border); font-size: .8125rem; color: var(--app-muted); }
.app-pager-controls { display: flex; align-items: center; gap: .625rem; }

/* ---------- Forms ---------- */
.form-label { font-size: .875rem; font-weight: 500; color: var(--app-text); margin-bottom: .375rem; }
.form-control, .form-select { border-color: var(--app-border-strong); background-color: var(--app-surface);
  color: var(--app-text); transition: border-color .15s, box-shadow .15s; }
.form-control::placeholder { color: var(--app-muted); opacity: 1; }
.form-control:focus, .form-select:focus { border-color: var(--app-primary); background-color: var(--app-surface);
  color: var(--app-text); box-shadow: var(--app-focus-ring); }
.form-control:disabled, .form-select:disabled { background-color: var(--app-surface-sunken); color: var(--app-muted-on-bg); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .2); }
.form-text { font-size: .8125rem; color: var(--app-muted); }
.form-check-input { --bs-form-check-bg: var(--app-surface); border-color: var(--app-border-strong); }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.form-check-input:focus { border-color: var(--app-primary); box-shadow: var(--app-focus-ring); }
.form-check-label { font-size: .875rem; }
/* Not a utility class: the `hidden` attribute must still hide it. */
.logo-current { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .5rem; }

/* ---------- Overlays ---------- */
.dropdown-menu { --bs-dropdown-bg: var(--app-surface); --bs-dropdown-border-color: var(--app-border); --bs-dropdown-border-radius: 10px;
  --bs-dropdown-padding-y: .375rem; --bs-dropdown-link-color: var(--app-text-soft);
  --bs-dropdown-link-hover-bg: var(--app-surface-sunken); --bs-dropdown-link-hover-color: var(--app-text);
  --bs-dropdown-link-active-bg: var(--app-primary-soft); --bs-dropdown-link-active-color: var(--app-primary-active);
  --bs-dropdown-item-padding-x: .75rem; --bs-dropdown-item-padding-y: .4375rem; --bs-dropdown-header-padding-x: .75rem;
  --bs-dropdown-header-color: var(--app-muted); --bs-dropdown-font-size: .875rem; min-width: 13rem;
  box-shadow: var(--app-shadow-raised); }
.dropdown-item { border-radius: 6px; margin-inline: .375rem; width: auto; }
button.dropdown-item { width: calc(100% - .75rem); }
.dropdown-header { color: var(--app-text); font-weight: 600; font-size: .875rem; white-space: normal;
  overflow-wrap: anywhere; border-bottom: 1px solid var(--app-border); margin-bottom: .375rem; padding-bottom: .625rem; }
.dropdown-header small { color: var(--app-muted); font-weight: 400; font-size: .8125rem; }
.modal { --bs-modal-bg: var(--app-surface); --bs-modal-border-color: var(--app-border); --bs-modal-border-radius: var(--app-radius);
  --bs-modal-inner-border-radius: calc(var(--app-radius) - 1px); --bs-modal-header-border-color: var(--app-border);
  --bs-modal-footer-border-color: var(--app-border); --bs-modal-padding: 1.25rem;
  --bs-modal-header-padding: 1rem 1.25rem; --bs-modal-footer-gap: .5rem; --bs-modal-box-shadow: var(--app-shadow-raised); }
.modal-content { box-shadow: var(--app-shadow-raised); }
.modal-footer { padding: .75rem 1.25rem; background: var(--app-hover);
  border-end-start-radius: var(--bs-modal-inner-border-radius); border-end-end-radius: var(--bs-modal-inner-border-radius); }
.modal-backdrop { --bs-backdrop-bg: #212529; --bs-backdrop-opacity: .45; }
.toast { --bs-toast-border-radius: var(--app-radius-control); --bs-toast-font-size: .875rem; box-shadow: var(--app-shadow-raised); }
/* White text needs a darker green and blue than the tokens used for dots and icons. */
.toast.text-bg-success { background-color: #15803d !important; }
.toast.text-bg-info { background-color: #075985 !important; color: #fff !important; }
.toast.text-bg-warning { background-color: #b45309 !important; color: #fff !important; }
/* A notification's own button ("Undo"). */
.toast-action { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .55); --bs-btn-hover-border-color: #fff; --bs-btn-active-border-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, .16); --bs-btn-active-bg: rgba(255, 255, 255, .24);
  align-self: center; flex-shrink: 0; margin-inline-end: .5rem; white-space: nowrap; }
.alert { --bs-alert-border-radius: var(--app-radius-control); --bs-alert-padding-x: .875rem; --bs-alert-padding-y: .75rem;
  font-size: .875rem; }

/* ---------- Shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar { width: var(--app-sidebar-width); flex-shrink: 0; background: var(--app-surface);
  border-inline-end: 1px solid var(--app-border); }
/* The sidebar is as tall as the page; what is in it stays in view, with the user pinned at the bottom. */
.app-sidebar-inner { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.app-brand { display: flex; align-items: center; gap: .625rem; min-height: var(--app-topbar-height); flex-shrink: 0;
  padding: .75rem 1.25rem; font-weight: 600; color: var(--app-text); }
.app-brand > .material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 2rem; height: 2rem; border-radius: var(--app-radius-control); background: var(--app-primary);
  color: #fff; font-size: 1.25rem; }
.app-brand > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-brand-logo { height: 2rem; max-width: 3rem; flex-shrink: 0; object-fit: contain; border-radius: 6px; }
.app-sidebar .nav { flex: 1; min-height: 0; flex-wrap: nowrap; overflow-y: auto; padding: .25rem .75rem 1rem; gap: .125rem; }
.nav-section { padding: .875rem .75rem .375rem; font-size: var(--app-caps-size); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--app-caps-spacing); color: var(--app-muted); }
.app-sidebar .nav-link { position: relative; display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem;
  border-radius: var(--app-radius-control); color: var(--app-text-soft); font-size: .875rem; font-weight: 500;
  text-decoration: none; transition: background-color .15s, color .15s; }
.app-sidebar .nav-link .material-symbols-outlined { font-size: 1.25rem; color: var(--app-muted); }
.app-sidebar .nav-link:hover { background: var(--app-surface-sunken); color: var(--app-text); }
.app-sidebar .nav-link.active { background: var(--app-primary-soft); color: var(--app-primary); font-weight: 600; }
.app-sidebar .nav-link.active .material-symbols-outlined { color: var(--app-primary); }
.app-sidebar .nav-link.active::before { content: ""; position: absolute; inset-block: .375rem;
  inset-inline-start: -.75rem; width: 3px; background: var(--app-primary);
  border-start-end-radius: 3px; border-end-end-radius: 3px; }
.user-chip { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; padding: .875rem 1.25rem;
  border-top: 1px solid var(--app-border); min-width: 0; }
.user-chip-text { min-width: 0; line-height: 1.3; }
.user-chip-name { font-size: .875rem; font-weight: 600; color: var(--app-text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.user-chip-role { font-size: .75rem; color: var(--app-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-backdrop { display: none; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar { display: flex; align-items: center; gap: .75rem; min-height: var(--app-topbar-height);
  padding: .5rem 1.5rem; background: var(--app-surface); border-bottom: 1px solid var(--app-border);
  position: sticky; top: 0; z-index: 1020; }
.app-topbar #page-title { font-size: 1.125rem; font-weight: 600; min-width: 0; }
.app-topbar #lang-switch { --bs-btn-border-color: var(--app-border); }
.user-menu-btn { display: inline-flex; padding: 2px; border: 0; border-radius: 50%; background: none;
  transition: box-shadow .15s; }
.user-menu-btn:hover, .user-menu-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--app-surface-sunken); }
.app-content { flex: 1; padding: 1.5rem; }

/* ---------- Components ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
  margin-bottom: 1.25rem; }
.page-header-title { font-size: 1.25rem; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.page-header-sub { margin: .25rem 0 0; font-size: .875rem; color: var(--app-muted-on-bg); overflow-wrap: anywhere; }
.page-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.page-note { font-size: .875rem; color: var(--app-muted-on-bg); }

/* Tabs (App.tabs): a strip of links on a line, the chosen one marked on that line, over the panel it opens. A
   strip with more tabs than fit scrolls sideways by itself; the page never does. It shows no scroll bar: the side
   on which tabs are out of sight fades out instead (App.tabs says which, by where the tabs are on screen - a
   fade has a side, not a start and an end), and the wheel, a finger and the keyboard move it. */
.app-tabs { --tabs-fade: 2rem; display: flex; gap: .25rem; margin-block-end: 1rem; overflow-x: auto;
  overscroll-behavior-x: contain; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--app-border); }
.app-tabs::-webkit-scrollbar { display: none; }
.app-tabs[hidden] { display: none; }
.app-tabs.is-cut-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--tabs-fade));
  mask-image: linear-gradient(to right, transparent, #000 var(--tabs-fade)); }
.app-tabs.is-cut-right { -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--tabs-fade));
  mask-image: linear-gradient(to left, transparent, #000 var(--tabs-fade)); }
.app-tabs.is-cut-left.is-cut-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--tabs-fade), #000 calc(100% - var(--tabs-fade)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--tabs-fade), #000 calc(100% - var(--tabs-fade)), transparent); }
.app-tab { flex: none; display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: .875rem;
  border-block-end: 2px solid transparent; color: var(--app-muted-on-bg); font-size: .875rem; font-weight: 500;
  white-space: nowrap; }
.app-tab:hover { color: var(--app-text); text-decoration: none !important; }
.app-tab[aria-selected="true"] { border-block-end-color: var(--app-primary); color: var(--app-primary-active); font-weight: 600; }
/* The strip cuts what reaches beyond it: the focus ring is drawn inside the tab. */
.app-tab:focus-visible { outline-offset: -2px; border-radius: var(--app-radius-control); }
/* The first card of a panel stands right under the strip, as the project's own cards do. */
.app-tab-panel > section:first-child > .card { margin-block-start: 0 !important; }

.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: 1rem; }
.filter-bar > .form-control, .filter-bar > .form-select { flex: 1 1 10rem; width: auto; max-width: 24rem; }
.filter-bar .filter-field { flex: 1 1 9rem; max-width: 14rem; min-width: 0; }
.filter-bar .filter-end { margin-inline-start: auto; }

.pill { --pill-bg: var(--app-neutral-soft); --pill-color: var(--app-neutral-text); --pill-dot: var(--app-neutral);
  display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .625rem; border-radius: 999px;
  background: var(--pill-bg); color: var(--pill-color); font-size: .75rem; font-weight: 600; line-height: 1.25rem;
  white-space: nowrap; vertical-align: middle; align-self: center; }
.pill::before { content: ""; flex-shrink: 0; width: .375rem; height: .375rem; border-radius: 50%; background: var(--pill-dot); }
.pill-info { --pill-bg: var(--app-info-soft); --pill-color: var(--app-info-text); --pill-dot: var(--app-info); }
.pill-success { --pill-bg: var(--app-success-soft); --pill-color: var(--app-success-text); --pill-dot: var(--app-success); }
.pill-warning { --pill-bg: var(--app-warning-soft); --pill-color: var(--app-warning-text); --pill-dot: var(--app-warning); }
.pill-danger { --pill-bg: var(--app-danger-soft); --pill-color: var(--app-danger-text); --pill-dot: var(--app-danger); }
.pill-accent { --pill-bg: var(--app-accent-soft); --pill-color: var(--app-accent-text); --pill-dot: var(--app-accent); }

.avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem;
  height: 2.25rem; border-radius: 50%; background: var(--app-neutral-soft); color: var(--app-neutral-text);
  font-size: .8125rem; font-weight: 600; line-height: 1; letter-spacing: 0; user-select: none; }
.avatar-neutral { background: var(--app-neutral-soft); color: var(--app-neutral-text); }
.avatar-sm { width: 1.875rem; height: 1.875rem; font-size: .6875rem; }
.avatar-lg { width: 3rem; height: 3rem; font-size: 1rem; }
.avatar-tone-0 { background: #d0ebff; color: #1864ab; }
.avatar-tone-1 { background: var(--app-info-soft); color: var(--app-info-text); }
.avatar-tone-2 { background: var(--app-success-soft); color: var(--app-success-text); }
.avatar-tone-3 { background: var(--app-warning-soft); color: var(--app-warning-text); }
.avatar-tone-4 { background: var(--app-accent-soft); color: var(--app-accent-text); }
.avatar-tone-5 { background: #fce7f3; color: #9d174d; }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1.75rem 1rem;
  text-align: center; }
.empty-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  margin-bottom: .5rem; border-radius: 50%; background: var(--app-surface-sunken); color: var(--app-muted);
  font-size: 1.5rem; }
/* The icon name lives in an attribute, so the element holds no text of its own. */
.empty-state-icon[data-icon]::before { content: attr(data-icon); }
.empty-state-title { font-size: .9375rem; font-weight: 600; color: var(--app-text); }
.empty-state-text { max-width: 28rem; font-size: .875rem; color: var(--app-muted); }

.skeleton { display: block; width: 70%; height: .75rem; border-radius: 6px;
  background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%) 0 0 / 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite; }
td:nth-child(even) > .skeleton { width: 45%; }
td:first-child > .skeleton { width: 60%; }
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.stepper { display: flex; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.stepper-step { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
  gap: .375rem; padding-inline: .25rem; text-align: center; font-size: .75rem; font-weight: 500; color: var(--app-muted);
  overflow-wrap: anywhere; counter-increment: step; }
.stepper-step::before { content: counter(step); position: relative; z-index: 1; display: flex; align-items: center;
  justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--app-border-strong);
  background: var(--app-surface); color: var(--app-muted); font-size: .75rem; font-weight: 600; }
/* The line to the previous step. */
.stepper-step::after { content: ""; position: absolute; top: calc(.875rem - 1px); inset-inline-end: 50%; width: 100%;
  height: 2px; background: var(--app-border); }
.stepper-step:first-child::after { display: none; }
.stepper-step.is-done { color: var(--app-text-soft); }
.stepper-step.is-done::before { content: "\2713"; border-color: var(--app-primary); background: var(--app-primary); color: #fff; }
.stepper-step.is-done::after, .stepper-step.is-current::after { background: var(--app-primary); }
.stepper-step.is-current { color: var(--app-primary); font-weight: 600; }
.stepper-step.is-current::before { border-color: var(--app-primary); color: var(--app-primary);
  box-shadow: 0 0 0 4px var(--app-primary-soft); }

.stat-card { height: 100%; container-type: inline-size; }
.stat-card .card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; align-items: start;
  align-content: start; }
.stat-card .stat-icon { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center;
  justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--app-primary-soft);
  color: var(--app-primary); }
.stat-card .stat-icon .material-symbols-outlined { font-size: 1.375rem; }
.stat-card .stat-label { grid-column: 1; grid-row: 1; font-size: .8125rem; font-weight: 500; color: var(--app-muted); }
.stat-card .stat-value { grid-column: 1; grid-row: 2; margin-top: .25rem; font-size: 1.5rem; font-weight: 600;
  line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.stat-card .usage-meter { grid-column: 1 / -1; margin-top: .875rem; }
/* A narrow card (two side by side on a phone): the icon tile sits above the label instead of beside it. */
@container (max-width: 13rem) {
  .stat-card .card-body { grid-template-columns: minmax(0, 1fr); }
  .stat-card .stat-icon { grid-column: 1; grid-row: auto; margin-bottom: .75rem; }
  .stat-card .stat-label, .stat-card .stat-value { grid-row: auto; }
}
.usage-meter { height: .375rem; border-radius: 999px; background: var(--app-surface-sunken); overflow: hidden; }
.usage-meter-bar { height: 100%; max-width: 100%; border-radius: inherit; background: var(--app-primary);
  transition: width .3s; }
.usage-meter.is-high .usage-meter-bar { background: var(--app-warning); }
.usage-meter.is-full .usage-meter-bar { background: var(--app-danger); }

.detail-grid { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: .625rem 1rem; margin: 0;
  font-size: .875rem; }
.detail-grid dt { font-weight: 500; color: var(--app-muted); }
.detail-grid dd { margin: 0; color: var(--app-text); overflow-wrap: anywhere; }

.module-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem .75rem;
  margin: 0 0 1rem; padding: 0; list-style: none; font-size: .875rem; }
.module-list > li { display: flex; align-items: center; gap: .375rem; width: auto; padding: 0; }
.module-list .material-symbols-outlined { font-size: 1.125rem; color: var(--app-success); }
.module-list > li.text-secondary .material-symbols-outlined { color: var(--app-muted); }
.section-title { font-size: .875rem; font-weight: 600; margin: 1.25rem 0 .75rem; }

/* ---------- Projects ---------- */
.btn-with-icon { display: inline-flex; align-items: center; gap: .375rem; }
.btn-with-icon > .material-symbols-outlined { font-size: 1.125rem; }
.filter-bar .filter-switch { align-self: center; margin-bottom: 0; white-space: nowrap; }
/* The projects list: the search and the archive switch on one line, the filters sharing the next. */
.filter-bar-main { margin-bottom: .75rem; }
.filter-bar-main > .form-control { flex-basis: 16rem; max-width: 28rem; }
.empty-state > .btn { margin-top: .75rem; }
/* A second, quieter line under a cell's main value (the client under the project's name). */
.cell-sub { display: block; margin-top: .125rem; font-size: .8125rem; font-weight: 400; color: var(--app-secondary); }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack > * { display: inline-flex; }
.avatar-stack > * + * { margin-inline-start: -.25rem; }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--app-surface); }
.form-section + .form-section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--app-border); }
.form-section-title { margin: 0 0 .875rem; font-size: var(--app-caps-size); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--app-caps-spacing); color: var(--app-muted); }
/* A switch that sits on the line of the controls beside it. */
.form-switch-row { display: flex; align-items: center; min-height: 2.375rem; margin-bottom: 0; }
.form-switch-row > .form-check-label { margin-inline-start: .5rem; }

.back-link { display: inline-flex; align-items: center; gap: .25rem; margin-bottom: .75rem; font-size: .875rem;
  font-weight: 500; color: var(--app-muted-on-bg); }
.back-link:hover { color: var(--app-primary); }
.back-link > .material-symbols-outlined { font-size: 1.125rem; }
[dir="rtl"] .back-link > .material-symbols-outlined { transform: scaleX(-1); }
.project-header { align-items: flex-start; margin-bottom: 1.5rem; }
.project-heading { min-width: 0; }
.project-title { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; }
.project-header .page-header-title { font-size: 1.5rem; line-height: 1.3; }
.project-header .page-header-sub { margin-top: .375rem; }

/* The two tracks of a project: where the office work and the site work stand. */
.track-card { overflow: hidden; }
.track-heading { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.track-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem;
  height: 2.25rem; border-radius: 10px; background: var(--app-info-soft); color: var(--app-info-text); }
.track-site .track-icon { background: var(--app-accent-soft); color: var(--app-accent-text); }
.track-icon > .material-symbols-outlined { font-size: 1.25rem; }
.track-card > .card-body { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.75rem 1.25rem; }
.track-steps { container-type: inline-size; }
/* Too narrow for a label under every step: the numbers stay and the card's header names the current
   step. Each label is still read by a screen reader (clipped, not removed) and shown on hover (`title`). */
@container (max-width: 22rem) {
  .track-steps .stepper-step { gap: 0; }
  .track-steps .stepper-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; }
}
@container (max-width: 35rem) {
  .track-steps-long .stepper-step { gap: 0; }
  .track-steps-long .stepper-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; }
}
.track-facts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .375rem 1rem;
  margin: 0; padding: .625rem .875rem; border-radius: var(--app-radius-control); background: var(--app-hover);
  font-size: .875rem; }
.track-facts dt { font-weight: 500; color: var(--app-muted-on-bg); }
.track-facts dd { margin: 0; }
.track-editor { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; padding: 1rem 1.25rem;
  border-top: 1px solid var(--app-border); background: var(--app-hover); }
.track-editor-field { flex: 1 1 10rem; min-width: 0; }
.track-editor-switch { flex: 0 1 auto; }
.track-editor > .alert { flex: 1 1 100%; margin: 0; }

.team-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: .25rem 1.5rem;
  margin: 0; padding: 0; list-style: none; }
.team-member { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .5rem 0; }
.team-member-text { flex: 1; min-width: 0; line-height: 1.35; }
.team-member-slot { font-size: .75rem; color: var(--app-muted); }
.team-member-name { font-size: .875rem; font-weight: 500; overflow-wrap: anywhere; }
.team-member.is-empty .team-member-name { font-weight: 400; color: var(--app-muted); }
.avatar-empty { border: 1px dashed var(--app-border-strong); background: transparent; color: var(--app-muted); }
.avatar-empty > .material-symbols-outlined { font-size: 1.125rem; }
/* Line breaks typed in a note are kept. */
.text-pre-line { white-space: pre-line; }

/* ---------- Tasks ---------- */
/* The tabs of the tasks page: quiet pills, each with the number of tasks in it. */
.task-tabs { --bs-nav-pills-link-active-bg: var(--app-primary-soft); --bs-nav-pills-link-active-color: var(--app-primary-active);
  --bs-nav-link-color: var(--app-text-soft); --bs-nav-link-hover-color: var(--app-text); --bs-nav-link-font-size: .875rem;
  --bs-nav-link-font-weight: 500; --bs-nav-link-padding-x: .75rem; --bs-nav-link-padding-y: .375rem;
  --bs-nav-pills-border-radius: 999px; gap: .25rem; margin-bottom: 1rem; }
.task-tabs .nav-link { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.task-tabs .nav-link:hover:not(.active) { background: var(--app-surface-sunken); }
.task-tabs .nav-link.active { font-weight: 600; }
.task-count { min-width: 1.375rem; padding-inline: .375rem; border-radius: 999px; background: var(--app-border);
  color: var(--app-text-soft); font-size: .75rem; font-weight: 600; line-height: 1.375rem; text-align: center; }
.task-count:empty { display: none; }
.active > .task-count { background: var(--app-surface); color: var(--app-primary-active); }
.task-count.is-danger { background: var(--app-danger-soft); color: var(--app-danger-text); }
/* A long name in a filter is cut short instead of widening the page. */
#task-filters > .form-select { min-width: 0; }
/* "Open" and "Done" on a project's task card. */
.task-toggle > .btn { display: inline-flex; align-items: center; gap: .375rem; }
.task-toggle > .btn.active { --bs-btn-active-bg: var(--app-primary-soft); --bs-btn-active-color: var(--app-primary-active);
  --bs-btn-active-border-color: var(--bs-primary-border-subtle); z-index: 1; }
.task-toggle .task-count { min-width: 1.25rem; line-height: 1.25rem; font-size: .6875rem; }

/* A list of tasks, one row each: the tick, the title over a quieter line, then when, how pressing and whose. */
.task-list { margin: 0; padding: 0; list-style: none; }
.card > .task-list:first-child > :first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; }
.card > .task-list:has(+ [hidden]) > :last-child { border-end-start-radius: inherit; border-end-end-radius: inherit; }
.card > .task-list { border-radius: inherit; }
.task-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 2rem; align-items: center; column-gap: .875rem;
  padding: .875rem 1.25rem; border-bottom: 1px solid var(--app-border); transition: background-color .15s; }
.task-list > :last-child { border-bottom: 0; }
.task-row:hover { background: var(--app-hover); }
.task-row-plain, .task-row-plain:hover { display: block; background: none; }
.task-row-plain > .skeleton { width: 45%; margin-block: .375rem; }
.task-row-plain:nth-child(even) > .skeleton { width: 30%; }
.task-done { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0;
  border: 2px solid var(--app-border-strong); border-radius: 50%; background: var(--app-surface); color: transparent;
  transition: background-color .15s, border-color .15s, color .15s; }
.task-done > .material-symbols-outlined { font-size: 1rem; font-weight: 700; }
.task-done:hover { border-color: var(--app-primary); color: var(--app-primary); }
.task-row.is-done .task-done { border-color: var(--app-success); background: var(--app-success); color: #fff; }
.task-row.is-done .task-done:hover { border-color: var(--app-success-text); background: var(--app-success-text); }
.task-main { min-width: 0; }
.task-title { font-size: .9375rem; font-weight: 500; line-height: 1.4; color: var(--app-text); overflow-wrap: anywhere; }
.task-row.is-done .task-title { color: var(--app-muted); font-weight: 400; text-decoration: line-through; }
.task-sub { margin-top: .125rem; overflow: hidden; font-size: .8125rem; color: var(--app-secondary); text-overflow: ellipsis;
  white-space: nowrap; }
.task-meta { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; min-width: 0; }
.task-due { font-size: .8125rem; color: var(--app-muted-on-bg); white-space: nowrap; }
.task-due.is-today { color: var(--app-text); font-weight: 600; }
.task-due.is-overdue { color: var(--bs-form-invalid-color); font-weight: 600; }
.task-row.is-done :is(.task-due, .task-sub) { color: var(--app-muted); font-weight: 400; }
/* Priorities line up under one another whatever their wording. */
.task-meta > .pill { min-width: 4.75rem; }
.task-assignee { display: inline-flex; }
.task-menu { display: flex; justify-content: flex-end; }

/* ---- Notifications: the bell of the top bar, and a list of notifications (the bell's and the page's). ---- */
.bell-btn { position: relative; flex-shrink: 0; }
.bell-btn[aria-expanded="true"] { background: var(--app-surface-sunken); color: var(--app-text); }
/* The unread count, on the corner of the bell: white on the danger colour (contrast 4.8:1). */
.bell-count { position: absolute; inset-block-start: -.125rem; inset-inline-end: -.125rem; box-sizing: border-box;
  min-width: 1.125rem; height: 1.125rem; padding-inline: .1875rem; border: 2px solid var(--app-surface);
  border-radius: 999px; background: var(--app-danger); color: var(--app-surface); font-family: inherit;
  font-size: .6875rem; font-weight: 700; line-height: calc(1.125rem - 4px); text-align: center; }
.bell-menu { width: 23rem; max-width: calc(100vw - 1.5rem); padding: 0; overflow: hidden; }
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3rem;
  padding: .5rem 1rem; border-bottom: 1px solid var(--app-border); }
.bell-title { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--app-text); }
.bell-read-all { flex-shrink: 0; padding: .125rem .25rem; font-size: .8125rem; font-weight: 500; text-decoration: none; }
.bell-read-all:hover { text-decoration: underline; }
.bell-list { max-height: min(24rem, calc(100vh - 12rem)); overflow-y: auto; overscroll-behavior: contain; }
.bell-all { display: block; padding: .75rem 1rem; border-top: 1px solid var(--app-border); font-size: .875rem;
  font-weight: 500; text-align: center; }
.notice-list { margin: 0; padding: 0; list-style: none; }
.card > .notice-list, .card > .editlog-list { border-radius: inherit; }
.card > .notice-list > :first-child, .card > .notice-list > :first-child > .notice-link {
  border-start-start-radius: inherit; border-start-end-radius: inherit; }
.card > .notice-list:has(+ [hidden]) > :last-child, .card > .notice-list:has(+ [hidden]) > :last-child > .notice-link {
  border-end-start-radius: inherit; border-end-end-radius: inherit; }
.notice { border-bottom: 1px solid var(--app-border); }
.notice-list > :last-child { border-bottom: 0; }
.notice-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: .75rem;
  width: 100%; padding: .75rem 1rem; border: 0; background: none; color: inherit; text-align: start;
  text-decoration: none; transition: background-color .15s; }
a.notice-link:hover, a.notice-link:not(.btn):hover { background: var(--app-hover); text-decoration: none; }
button.notice-link:hover { background: var(--app-hover); }
.notice-link:focus-visible { outline: 0; box-shadow: inset var(--app-focus-ring); }
.notice.is-unread > .notice-link { background: var(--app-primary-soft); }
.notice.is-unread > .notice-link:hover { box-shadow: inset 0 0 0 999px rgba(var(--app-primary-rgb), .06); }
.notice[data-busy] { opacity: .6; }
.notice-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--app-neutral-soft); color: var(--app-neutral-text); font-size: 1.125rem; }
.notice-info { background: var(--app-info-soft); color: var(--app-info-text); }
.notice-success { background: var(--app-success-soft); color: var(--app-success-text); }
.notice-warning { background: var(--app-warning-soft); color: var(--app-warning-text); }
.notice-danger { background: var(--app-danger-soft); color: var(--app-danger-text); }
.notice-accent { background: var(--app-accent-soft); color: var(--app-accent-text); }
.notice-body { display: block; min-width: 0; }
.notice-text { display: block; font-size: .875rem; line-height: 1.45; color: var(--app-text); overflow-wrap: anywhere; }
.notice.is-unread .notice-text { font-weight: 600; }
.notice-meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: .5rem; margin-top: .125rem;
  font-size: .8125rem; color: var(--app-muted-on-bg); }
.notice-project { min-width: 0; overflow-wrap: anywhere; }
/* The dot between the project and the moment stands on the side the line is read from: the moment itself reads
   left to right in either language, so it is the element around it that carries the dot. */
.notice-project + .notice-when::before { content: "·"; margin-inline-end: .5rem; }
.notice-dot { align-self: center; width: .5rem; height: .5rem; border-radius: 50%; background: var(--app-primary); }
.notice-plain { padding: .5rem 1rem; }
.notice-plain > .skeleton { width: 55%; margin-block: .875rem; }
.notice-plain:nth-child(even) > .skeleton { width: 35%; }

/* ---- The edit log of a project: who, when, what, and each field as "old → new". ---- */
.editlog-list { margin: 0; padding: 0; list-style: none; }
.editlog-entry { padding: .875rem 1.25rem; border-bottom: 1px solid var(--app-border); }
.editlog-list > :last-child { border-bottom: 0; }
.editlog-head { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.editlog-who { font-size: .875rem; font-weight: 600; color: var(--app-text); overflow-wrap: anywhere; }
.editlog-when { font-size: .8125rem; color: var(--app-muted-on-bg); white-space: nowrap; }
.editlog-what { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; margin-top: .5rem;
  font-size: .875rem; }
.editlog-target { min-width: 0; overflow-wrap: anywhere; color: var(--app-text); }
.editlog-type { color: var(--app-muted-on-bg); }
.editlog-changes { margin: .5rem 0 0; padding: .5rem .75rem; list-style: none; border-radius: var(--app-radius-control);
  background: var(--app-surface-sunken); font-size: .8125rem; line-height: 1.6; }
.editlog-change { overflow-wrap: anywhere; }
.editlog-field { font-weight: 600; color: var(--app-text-soft); }
.editlog-pair { color: var(--app-text); }
.editlog-empty { color: var(--app-muted-on-bg); }
.editlog-plain { padding: .5rem 1.25rem; }
.editlog-plain > .skeleton { width: 50%; margin-block: .875rem; }
.editlog-plain:nth-child(even) > .skeleton { width: 30%; }

/* An amount with its currency keeps together and reads left to right in either language. */
.money { white-space: nowrap; unicode-bidi: isolate; }
/* A short code typed in capitals (a currency). */
.form-control-code { max-width: 8rem; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Contracts ---------- */
/* An icon whose name is kept in an attribute, so that the element holds no text of its own. */
.material-symbols-outlined[data-icon]::before { content: attr(data-icon); }
/* A menu item that takes something away. */
.dropdown-item.is-danger { color: var(--bs-form-invalid-color); }
.dropdown-item.is-danger:hover, .dropdown-item.is-danger:focus { background: var(--bs-danger-bg-subtle); color: var(--app-danger-text); }
/* A form's title with a quieter line under it (the contract's type over its project). */
.modal-heading { min-width: 0; }
.modal-heading > .modal-title { overflow-wrap: anywhere; }
.modal-sub { margin: .125rem 0 0; font-size: .8125rem; color: var(--app-muted); overflow-wrap: anywhere; }
.modal-sub:empty { display: none; }
/* The date of a contract that is not signed cannot be given: the closed field is empty and shows nothing, not
   even the browser's "yyyy-mm-dd" (its colour is that of the text, in every browser). */
#contract-form input[type="date"]:disabled { color: transparent; }
/* A small form that opens inside a form (a contractor added while filling a contract). */
.inline-form-toggle { margin-top: .25rem; padding-inline: 0; }
.inline-form { margin-top: .5rem; padding: .875rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-control);
  background: var(--app-hover); }
.inline-form .form-label { margin-bottom: .25rem; font-size: .8125rem; }
.inline-form-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.inline-form > .alert { margin-bottom: .75rem; }

/* The contracts card of a project: a heading with how many are signed, the alert, then the contracts in groups. */
.contracts-card { overflow: hidden; }
.contracts-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .75rem; min-width: 0; }
.contracts-signed { font-size: .8125rem; color: var(--app-muted); }
.contracts-signed:empty { display: none; }
/* Important contracts that are late: a band across the card, in the colour of a warning, not of an error. */
.contract-alert { display: flex; align-items: flex-start; gap: .625rem; padding: .75rem 1.25rem;
  background: var(--app-warning-soft); border-bottom: 1px solid var(--bs-warning-border-subtle);
  border-inline-start: 3px solid var(--app-warning); }
.contract-alert-icon { flex-shrink: 0; font-size: 1.25rem; color: var(--app-warning-text); }
.contract-alert-text { min-width: 0; }
.contract-alert-title { font-size: .875rem; font-weight: 600; line-height: 1.25rem; color: var(--app-warning-text); }
.contract-alert-names { margin-top: .125rem; font-size: .8125rem; color: var(--app-text-soft); overflow-wrap: anywhere; }
.contract-alert-mark { display: inline-flex; flex-shrink: 0; color: var(--app-warning); }
.contract-alert-mark > .material-symbols-outlined { font-size: 1.125rem; }

.contract-groups { container-type: inline-size; padding-bottom: .375rem; }
.contract-groups > .empty-state { padding-block: 2rem 1.625rem; }
.contract-group-title { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .875rem 1.25rem .375rem;
  font-size: var(--app-caps-size); font-weight: 600; text-transform: uppercase; letter-spacing: var(--app-caps-spacing);
  color: var(--app-muted); }
.contract-group-count { min-width: 1.25rem; padding-inline: .375rem; border-radius: 999px; background: var(--app-surface-sunken);
  color: var(--app-text-soft); font-size: .6875rem; line-height: 1.25rem; letter-spacing: 0; text-align: center; }
.contract-list { margin: 0; padding: 0; list-style: none; }
.contract-list > li + li { border-top: 1px solid var(--app-surface-sunken); }
/* One contract on one line: its type, where it stands, who with, since when. The columns line up down the card. */
.contract-row { display: grid; grid-template-columns: minmax(0, 20rem) 8rem minmax(0, 1fr) 6rem 1rem; align-items: center;
  column-gap: 1rem; width: 100%; padding: .4375rem 1.25rem; border: 0; background: none; color: var(--app-text);
  font-size: .875rem; line-height: 1.5rem; text-align: start; }
button.contract-row { cursor: pointer; transition: background-color .15s; }
button.contract-row:hover { background: var(--app-hover); }
button.contract-row:focus-visible { outline-offset: -2px; }
.contract-name { display: flex; align-items: center; gap: .5rem; min-width: 0; font-weight: 500; }
.contract-title { min-width: 0; overflow-wrap: anywhere; }
.contract-status { display: flex; min-width: 0; }
.contract-contractor { display: flex; align-items: center; gap: .5rem; min-width: 0; color: var(--app-text-soft); }
.contract-row .contract-contractor-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contract-contractor.is-none { color: var(--app-muted); }
.contract-date { font-size: .8125rem; color: var(--app-muted-on-bg); white-space: nowrap; }
.contract-edit { font-size: 1rem; color: var(--app-border-strong); transition: color .15s; }
button.contract-row:hover > .contract-edit, button.contract-row:focus-visible > .contract-edit { color: var(--app-primary); }
.contract-row-plain { padding: .75rem 1.25rem; }
.contract-row-plain > .skeleton { width: 45%; }
.contract-row-plain:nth-child(even) > .skeleton { width: 30%; }
/* The contracts a project does not need: folded away at the bottom of the card. */
.contract-group-excluded { margin-top: .375rem; border-top: 1px solid var(--app-border); }
.contract-group-toggle { display: flex; align-items: center; gap: .375rem; width: 100%; padding: .625rem 1.25rem; border: 0;
  background: none; color: var(--app-muted-on-bg); font-size: .8125rem; font-weight: 500; text-align: start;
  transition: background-color .15s, color .15s; }
.contract-group-toggle:hover { background: var(--app-hover); color: var(--app-text); }
.contract-group-toggle:focus-visible { outline-offset: -2px; }
.contract-group-toggle > .material-symbols-outlined { font-size: 1.25rem; transition: transform .15s; }
.contract-group-toggle[aria-expanded="false"] > .material-symbols-outlined { transform: rotate(-90deg); }
[dir="rtl"] .contract-group-toggle[aria-expanded="false"] > .material-symbols-outlined { transform: rotate(90deg); }
.contract-group-excluded .contract-row { color: var(--app-muted-on-bg); }
.contract-group-excluded .contract-name { font-weight: 400; }
/* A narrow card (a phone): the type and its status on one line, the contractor and the date under them. */
@container (max-width: 40rem) {
  .contract-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .125rem; padding-block: .5625rem; }
  .contract-name { grid-column: 1; grid-row: 1; }
  .contract-status { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .contract-contractor { grid-column: 1; grid-row: 2; font-size: .8125rem; line-height: 1.25rem; }
  .contract-date { grid-column: 2; grid-row: 2; justify-self: end; line-height: 1.25rem; }
  .contract-edit { display: none; }
}

/* The firm's list of contracts. */
#contract-filters > .form-select { min-width: 0; }
.filter-switches { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; min-height: 2.375rem; }
.table > tbody > tr.is-clickable { cursor: pointer; }
.contract-type-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.contract-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; }
.contract-type-cell .contract-title { font-weight: 500; }
tr.is-clickable:hover .contract-open { color: var(--app-primary); }
.contract-none { color: var(--app-muted); }
td > .contract-contractor-name + .pill { margin-inline-start: .5rem; }
@media (max-width: 767.98px) {
  /* On a phone the status stays in sight beside the project and the type. */
  #contracts-table .cell-name { min-width: 7rem; }
}
/* Free text in a column of its own (a trade, a contact): a readable width, wrapping even without spaces. */
.table .cell-text { min-width: 8rem; overflow-wrap: anywhere; }

/* The firm's contract types: one row each, in the firm's order. */
.type-card, .type-header { max-width: 56rem; }
.type-list { margin: 0; padding: 0; list-style: none; }
.type-row { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto auto; align-items: center; column-gap: 1rem;
  padding: .5rem 1.25rem; border-bottom: 1px solid var(--app-border); }
.type-list > :last-child { border-bottom: 0; }
.type-row-plain { display: block; padding-block: .875rem; }
.type-row-plain > .skeleton { width: 40%; }
.type-row-plain:nth-child(even) > .skeleton { width: 28%; }
.type-position { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--app-muted); text-align: center; }
.type-main { min-width: 0; line-height: 1.35; }
.type-name { font-size: .875rem; font-weight: 500; overflow-wrap: anywhere; }
/* Written right to left on every page, and kept at the start of the line of the page it is on. */
.type-name-ar { width: fit-content; max-width: 100%; margin-top: .125rem; font-size: .8125rem; color: var(--app-secondary);
  overflow-wrap: anywhere; }
.type-switches { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; }
.type-switch { display: flex; align-items: center; gap: .5rem; min-height: 0; margin: 0; padding-inline: 0; cursor: pointer; }
.type-switch > .form-check-input { float: none; flex-shrink: 0; margin: 0; cursor: pointer; }
.type-switch > .form-check-label { font-size: .8125rem; color: var(--app-text-soft); cursor: pointer; }
.type-buttons { display: flex; align-items: center; gap: .125rem; }
.type-buttons .material-symbols-outlined { font-size: 1.125rem; }
.type-buttons > .btn-icon:disabled { background: none; color: var(--app-border-strong); }
/* A quieter line under the names: how long a type takes on the time schedule, how many items a category holds. */
.type-duration { margin-top: .125rem; font-size: .8125rem; color: var(--app-muted); }
.type-row.is-inactive :is(.type-name, .type-name-ar) { color: var(--app-muted); }
.type-row.is-inactive .type-name { font-weight: 400; }
@media (max-width: 575.98px) {
  /* The switches move under the names. */
  .type-row { grid-template-columns: 1.5rem minmax(0, 1fr) auto; row-gap: .375rem; padding-inline: 1rem; }
  .type-switches { grid-column: 2 / -1; grid-row: 2; }
  .type-buttons { grid-column: 3; grid-row: 1; }
  .contract-alert, .contract-group-title, .contract-row, .contract-row-plain, .contract-group-toggle { padding-inline: 1rem; }
}

/* ---------- Site ---------- */
/* A list of site records (visits, issues, missing drawings), one row each: the title over a quieter line, then
   where it stands and whose it is, then the menu of the row. On a project's cards and on the firm's pages alike. */
.site-list { margin: 0; padding: 0; list-style: none; border-radius: inherit; }
.card > .site-list:first-child > :first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; }
.card > .site-list:has(+ [hidden]) > :last-child { border-end-start-radius: inherit; border-end-end-radius: inherit; }
.site-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 2rem; align-items: center; column-gap: .875rem;
  padding: .75rem 1.25rem; border-bottom: 1px solid var(--app-border); transition: background-color .15s; }
/* An issue starts with its tick, or with the room of one, so the descriptions line up. */
.issue-row { grid-template-columns: 1.5rem minmax(0, 1fr) auto 2rem; }
.site-list > :last-child { border-bottom: 0; }
.site-row:hover { background: var(--app-hover); }
.site-row-plain { padding: .875rem 1.25rem; border-bottom: 1px solid var(--app-border); }
.site-row-plain > .skeleton { width: 45%; margin-block: .375rem; }
.site-row-plain:nth-child(even) > .skeleton { width: 30%; }
.site-row-plain > .empty-state { padding-block: 1.5rem 1.125rem; }
.site-main { min-width: 0; }
/* The text is the user's own: its line breaks are kept. */
.site-title { display: block; font-size: .9375rem; font-weight: 500; line-height: 1.4; color: var(--app-text);
  overflow-wrap: anywhere; white-space: pre-line; }
a.site-title { width: fit-content; }
a.site-title:hover { color: var(--app-primary); }
/* The quiet line: its parts side by side, each whole on one line (a phrase is never broken in two; one too long for
   the row is cut short). A line that is full goes on below, and no line starts with a separator: each separator
   stands in the gap before its part, and at the start of a line that place is outside the line, which cuts it off.
   The padding keeps the focus ring of a link at the line's edge from being cut off with it. */
.site-sub { display: flex; flex-wrap: wrap; column-gap: 1rem; margin: .125rem -.25rem 0; padding-inline: .25rem;
  overflow-x: clip; font-size: .8125rem; color: var(--app-secondary); }
.site-sub > span { position: relative; display: flex; min-width: 0; max-width: 100%; }
.site-sub > span::before { content: "\00b7"; position: absolute; inset-inline-start: -.625rem; }
.site-part { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The note of a resolved issue is a sentence of its own: it is read whole. */
.issue-note .site-part { overflow: visible; overflow-wrap: anywhere; white-space: normal; }
.site-sub a { color: var(--app-text-soft); font-weight: 500; }
.site-sub a:hover { color: var(--app-primary); }
/* Inside a part that is cut at its edges, the focus ring is drawn on the link itself. */
.site-sub a:focus-visible { outline-offset: -1px; }
.site-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .375rem .75rem;
  min-width: 0; max-width: 30rem; }
.site-person { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; font-size: .8125rem;
  color: var(--app-text-soft); }
.site-person-name { min-width: 0; overflow-wrap: anywhere; }
.site-none { font-size: .8125rem; color: var(--app-muted); }
.issue-unfit { display: inline-flex; }
.visit-counts { font-size: .8125rem; color: var(--app-muted-on-bg); }
.site-menu { display: flex; justify-content: flex-end; }
/* The tick of an issue, as the tick of a task. Someone who may not resolve it sees the mark of a resolved one. */
.issue-tick { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0;
  border: 2px solid var(--app-border-strong); border-radius: 50%; background: var(--app-surface); color: transparent;
  transition: background-color .15s, border-color .15s, color .15s; }
.issue-tick > .material-symbols-outlined { font-size: 1rem; font-weight: 700; }
button.issue-tick:hover { border-color: var(--app-primary); color: var(--app-primary); }
.issue-tick.is-open { visibility: hidden; }
.issue-row.is-resolved .issue-tick { border-color: var(--app-success); background: var(--app-success);
  color: var(--app-surface); }
.issue-row.is-resolved button.issue-tick:hover { border-color: var(--app-success-text); background: var(--app-success-text); }
/* What is settled steps back; it stays as readable as the rest (4.5:1 on the surface and on a hovered row). */
.issue-row.is-resolved .site-title, .drawing-row.is-received .site-title { color: var(--app-muted-on-bg); font-weight: 400; }
.drawing-receive { white-space: nowrap; }
/* Lists of several projects: a long name in a filter is cut short instead of widening the page. */
.site-filters > .form-select { min-width: 0; }
.filter-dates { display: flex; flex: 1 1 18rem; gap: .75rem; min-width: 0; }
.filter-dates > .filter-field { flex: 1 1 0; }
.filter-dates .form-label { margin-bottom: .125rem; font-size: .75rem; font-weight: 500; color: var(--app-muted-on-bg); }
/* The page of one visit. */
.visit-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1rem; }
.visit-summary > a { font-weight: 500; }
.visit-by { display: inline-flex; align-items: center; gap: .5rem; }
.visit-by .site-person { color: var(--app-text); }
.visit-notes { margin: 0; overflow-wrap: anywhere; }
.visit-notes.is-empty { color: var(--app-muted); }
@media (max-width: 767.98px) {
  /* A narrow list: where a record stands and whose it is move under its title; nothing is cut off. */
  .site-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; row-gap: .5rem; }
  .issue-row { grid-template-columns: 1.5rem minmax(0, 1fr) auto; }
  .site-main { grid-row: 1; grid-column: 1; }
  .site-meta { grid-row: 2; grid-column: 1; justify-content: flex-start; max-width: none; }
  .site-menu { grid-row: 1; grid-column: 2; margin-block: -.25rem; }
  .issue-row > .issue-tick { grid-row: 1; grid-column: 1; }
  .issue-row > :is(.site-main, .site-meta) { grid-column: 2; }
  .issue-row > .site-menu { grid-column: 3; }
  .site-menu:empty { display: none; }
}
@media (max-width: 575.98px) {
  .site-row, .site-row-plain { padding-inline: 1rem; }
}

/* ---------- Files ---------- */
/* A list of documents, one row each: the title (which opens the document's revisions) over a quieter line, then
   where the document stands - its status, its current revision, how much it weighs, when and by whom - then the
   download of the current file and the menu of the row. On a project's tab the rows stand under the firm's
   categories. Names are the users' own, in any script: nothing is cut, a long one wraps. */
.doc-list, .revision-list, .attachment-list { margin: 0; padding: 0; list-style: none; border-radius: inherit; }
.doc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: .875rem;
  padding: .75rem 1.25rem; border-bottom: 1px solid var(--app-border); transition: background-color .15s; }
.doc-list > :last-child { border-bottom: 0; }
.doc-row:hover { background: var(--app-hover); }
/* The row just saved, kept in sight above the page it does not belong to (App.pagedList). */
.doc-row[data-pinned] { background: var(--app-primary-soft); }
.doc-row-plain { padding: .875rem 1.25rem; border-bottom: 1px solid var(--app-border); }
.doc-row-plain > .skeleton { width: 45%; margin-block: .375rem; }
.doc-row-plain:nth-child(even) > .skeleton { width: 30%; }
.doc-row-plain > .empty-state { padding-block: 1.5rem 1.125rem; }
.doc-group { padding: .5rem 1.25rem; border-bottom: 1px solid var(--app-border); background: var(--app-hover); }
.doc-group-title { margin: 0; font-size: var(--app-caps-size); font-weight: 600; letter-spacing: var(--app-caps-spacing);
  text-transform: uppercase; color: var(--app-muted-on-bg); overflow-wrap: anywhere; }
:lang(ar) .doc-group-title { letter-spacing: 0; }
.doc-main { min-width: 0; }
.doc-title { display: block; max-width: 100%; padding: 0; border: 0; background: none; font-size: .9375rem; font-weight: 500;
  line-height: 1.4; color: var(--app-text); text-align: start; overflow-wrap: anywhere; }
.doc-title:hover { color: var(--app-primary); }
.doc-sub { display: flex; flex-wrap: wrap; gap: 0 1rem; margin-top: .125rem; font-size: .8125rem; color: var(--app-secondary); }
.doc-sub > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.doc-sub a { color: var(--app-text-soft); font-weight: 500; }
.doc-sub a:hover { color: var(--app-primary); }
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .375rem .75rem; min-width: 0;
  max-width: 32rem; font-size: .8125rem; color: var(--app-text-soft); }
.doc-meta > * { min-width: 0; }
.doc-revision { max-width: 100%; padding: .0625rem .5rem; border: 1px solid var(--app-border-strong); border-radius: 999px;
  font-weight: 500; overflow-wrap: anywhere; }
.doc-size, .doc-when { white-space: nowrap; color: var(--app-muted-on-bg); }
.doc-who { display: inline-flex; align-items: center; gap: .5rem; overflow-wrap: anywhere; }
.doc-actions { display: flex; align-items: center; justify-content: flex-end; gap: .125rem; }
.doc-actions .material-symbols-outlined { font-size: 1.25rem; }
.files-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; min-width: 0; }
.files-count { font-size: .8125rem; color: var(--app-muted); }
/* The search of the firm's list is its widest filter; a long project name is cut short in its select. */
#document-filters > .form-control { flex-basis: 16rem; }
#document-filters > .form-select { min-width: 0; }

/* How many documents are filed under a category, on the settings page of the categories. */
.category-count { margin-top: .125rem; font-size: .8125rem; color: var(--app-muted-on-bg); }
/* The drawer of a document: a dialog that stands at the side the page ends on, as tall as the window. */
.modal-drawer .modal-dialog { width: 100%; max-width: 32rem; height: 100%; margin-block: 0; margin-inline: auto 0; }
.modal-drawer .modal-content { height: 100%; max-height: 100%; border-radius: 0; border-block: 0; border-inline-end: 0; }
.modal-drawer .modal-footer { flex-wrap: wrap; }
.modal-drawer .section-title:first-child { margin-top: 0; }
.doc-facts { display: flex; flex-direction: column; gap: .5rem; }
.doc-facts:empty { display: none; }
.doc-facts-line { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; font-size: .875rem;
  color: var(--app-text-soft); }
.doc-facts-line > * { min-width: 0; overflow-wrap: anywhere; }
/* A note reads in the direction of its own words and starts where the drawer starts: an English note in an
   Arabic drawer is not sent to the far side. */
.doc-notes { margin: 0; font-size: .875rem; white-space: pre-line; overflow-wrap: anywhere;
  text-align: -webkit-match-parent; text-align: match-parent; }
.revision-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: .75rem;
  padding-block: .75rem; border-bottom: 1px solid var(--app-border); }
.revision-list > :last-child { border-bottom: 0; }
.revision-plain { padding-block: .75rem; }
.revision-plain > .skeleton { width: 55%; margin-block: .375rem; }
.revision-plain:nth-child(even) > .skeleton { width: 35%; }
.revision-main { min-width: 0; }
.revision-head { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.revision-label { font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.revision-file, .revision-by { margin-top: .125rem; font-size: .8125rem; color: var(--app-secondary); overflow-wrap: anywhere; }
.revision-file > bdi { color: var(--app-text-soft); font-weight: 500; }
.revision-note { margin: .375rem 0 0; font-size: .875rem; white-space: pre-line; overflow-wrap: anywhere;
  text-align: -webkit-match-parent; text-align: match-parent; }
.revision-actions { display: flex; align-items: center; gap: .125rem; }
.revision-actions .material-symbols-outlined { font-size: 1.25rem; }

/* The file control of an upload form: a file input, kept out of sight but not out of reach of the keyboard, and
   its label drawn as the place to drop a file on. The label shows where the keyboard is, and what was chosen. */
.file-drop { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .75rem; width: 100%;
  min-height: 4.5rem; margin: 0; padding: .875rem 1rem; border: 1.5px dashed var(--app-border-strong);
  border-radius: var(--app-radius-control); background: var(--app-hover); color: var(--app-text-soft); cursor: pointer;
  transition: background-color .15s, border-color .15s; }
.file-drop:hover, .file-drop.is-over { border-color: var(--app-primary); background: var(--app-primary-soft); }
.file-input:focus-visible + .file-drop { outline: 2px solid var(--app-primary); outline-offset: 2px; }
.file-input.is-invalid + .file-drop { border-color: var(--app-danger); }
.file-input:disabled + .file-drop { cursor: default; opacity: .65; }
.file-drop-icon { font-size: 1.75rem; color: var(--app-primary); }
.file-drop-words { min-width: 0; font-size: .875rem; }
.file-drop-title { font-weight: 600; color: var(--app-primary-active); }
.file-drop-hint { color: var(--app-muted-on-bg); }
.file-chosen { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 .5rem; min-width: 0;
  max-width: 100%; font-size: .875rem; }
.file-chosen-name { min-width: 0; max-width: 100%; font-weight: 600; color: var(--app-text); overflow-wrap: anywhere; }
.file-chosen-size { color: var(--app-muted-on-bg); white-space: nowrap; }
.file-field.has-file .file-drop-words { display: none; }
.file-field > .invalid-feedback { overflow-wrap: anywhere; }
.file-progress { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .5rem; }
.file-progress > .progress { flex: 1 1 8rem; height: .5rem; --bs-progress-bg: var(--app-surface-sunken);
  --bs-progress-bar-bg: var(--app-primary); }
.file-progress-text { font-size: .8125rem; color: var(--app-text-soft); }
.file-progress > .progress:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }
.file-status { color: var(--app-text-soft); }

/* What hangs on a record of another module (a payment request, a question, a meeting). */
.attachments-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-bottom: .5rem; }
.attachments-title { margin: 0; font-size: .875rem; font-weight: 600; }
.attachments-count { font-size: .8125rem; color: var(--app-muted); }
.attachment-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .625rem;
  padding-block: .5rem; border-bottom: 1px solid var(--app-border); }
.attachment-row > .material-symbols-outlined { font-size: 1.25rem; color: var(--app-muted); }
.attachment-plain { padding-block: .5rem; }
.attachment-plain > .skeleton { width: 50%; margin-block: .375rem; }
.attachment-plain > .empty-state { padding-block: .75rem; }
.attachment-main { min-width: 0; }
.attachment-name { font-size: .875rem; font-weight: 500; overflow-wrap: anywhere; }
.attachment-sub { font-size: .8125rem; color: var(--app-secondary); overflow-wrap: anywhere; }
.attachments-add { margin-top: .75rem; }
.attachments .file-drop { min-height: 3.5rem; padding-block: .625rem; }
@media (max-width: 767.98px) {
  /* A narrow list: where a document stands moves under its title; nothing is cut off. */
  .doc-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; row-gap: .5rem; }
  .doc-main { grid-row: 1; grid-column: 1; }
  .doc-meta { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  .doc-actions { grid-row: 1; grid-column: 2; margin-block: -.25rem; }
}
@media (max-width: 575.98px) {
  .doc-row, .doc-row-plain, .doc-group { padding-inline: 1rem; }
  .modal-drawer .modal-dialog { max-width: none; }
  .modal-drawer .modal-content { border-inline-start: 0; }
}

/* ---------- Execution and schedule ---------- */
/* The execution log of a project: the overall figure, then the items under their categories. */
.exec-card, .schedule-card { overflow: hidden; }
.exec-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .75rem; min-width: 0; }
.exec-summary { font-size: .8125rem; color: var(--app-muted); }
.exec-summary:empty { display: none; }
.exec-overall { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--app-border); }
.exec-overall[hidden] { display: none; }
/* The ring: filled as far round as the percentage, the number in its middle. */
.exec-ring { --exec-turn: 0; flex: none; display: grid; place-items: center; inline-size: 4.5rem; block-size: 4.5rem;
  border-radius: 50%; background: radial-gradient(closest-side, var(--app-surface) 76%, transparent 78%),
    conic-gradient(var(--app-primary) calc(var(--exec-turn) * 1%), var(--app-surface-sunken) 0);
  font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--app-text); }
.exec-overall-text { min-width: 0; }
.exec-overall-title { font-size: .9375rem; font-weight: 600; }
.exec-overall-sub { font-size: .8125rem; color: var(--app-muted); }
.exec-groups { container-type: inline-size; padding-bottom: .375rem; }
.exec-groups > .empty-state { padding-block: 2rem 1.625rem; }
.exec-group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem;
  padding: .875rem 1.25rem .375rem; }
.exec-group-title { margin: 0; min-width: 0; font-size: var(--app-caps-size); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--app-caps-spacing); color: var(--app-muted); overflow-wrap: anywhere; }
.exec-group-average { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: var(--app-text-soft); }
.exec-list { margin: 0; padding: 0; list-style: none; }
.exec-list > li + li { border-top: 1px solid var(--app-surface-sunken); }
/* One item: the row that opens its form, then what stands beside it (its open issues, the button that raises one). */
.exec-item { display: flex; align-items: center; min-width: 0; }
.exec-row { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 18rem) minmax(8rem, 1fr) 7.5rem minmax(0, 12rem) 1rem;
  align-items: center; column-gap: 1rem; min-width: 0; padding-block: .4375rem; padding-inline: 1.25rem .5rem;
  border: 0; background: none; color: var(--app-text); font-size: .875rem; line-height: 1.5rem; text-align: start; }
button.exec-row { cursor: pointer; transition: background-color .15s; }
button.exec-row:hover { background: var(--app-hover); }
button.exec-row:focus-visible { outline-offset: -2px; }
.exec-name { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem .5rem; min-width: 0; font-weight: 500; }
.exec-title { min-width: 0; overflow-wrap: anywhere; }
.exec-category-name { flex-basis: 100%; font-size: .8125rem; font-weight: 400; line-height: 1.25rem; color: var(--app-muted); }
.exec-progress { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.exec-bar { flex: 1 1 auto; display: block; min-inline-size: 3rem; block-size: .5rem; border-radius: 999px;
  background: var(--app-surface-sunken); overflow: hidden; }
.exec-bar.is-average { flex: none; inline-size: 6rem; block-size: .375rem; }
.exec-bar-fill { display: block; block-size: 100%; border-radius: 999px; background: var(--app-primary); }
.exec-item.is-done .exec-bar-fill { background: var(--app-success); }
.exec-bar.is-average > .exec-bar-fill { background: var(--app-secondary); }
.exec-percent { flex: none; min-inline-size: 2.75rem; font-size: .8125rem; font-variant-numeric: tabular-nums;
  color: var(--app-text-soft); text-align: end; }
.exec-status { display: flex; min-width: 0; }
.exec-contractor { display: flex; align-items: center; gap: .5rem; min-width: 0; color: var(--app-text-soft); }
.exec-contractor > bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exec-contractor.is-none { color: var(--app-muted); }
.exec-edit { font-size: 1rem; color: var(--app-border-strong); transition: color .15s; }
button.exec-row:hover > .exec-edit, button.exec-row:focus-visible > .exec-edit { color: var(--app-primary); }
.exec-side { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: .25rem; min-inline-size: 5.5rem;
  padding-inline-end: .75rem; }
.exec-issues { display: inline-flex; align-items: center; gap: .125rem; padding: .0625rem .4375rem; border-radius: 999px;
  background: var(--app-warning-soft); color: var(--app-warning-text); font-size: .75rem; font-weight: 600; line-height: 1.25rem; }
.exec-issues > .material-symbols-outlined { font-size: 1rem; }
.exec-raise > .material-symbols-outlined { font-size: 1.125rem; }
.exec-row-plain { padding: .75rem 1.25rem; }
.exec-row-plain > .skeleton { width: 45%; }
.exec-row-plain:nth-child(even) > .skeleton { width: 30%; }
/* The items a project does not need: folded away at the bottom of the card, as its contracts are. */
.exec-group-excluded { margin-top: .375rem; border-top: 1px solid var(--app-border); }
.exec-group-excluded .exec-row { color: var(--app-muted-on-bg); }
.exec-group-excluded .exec-name { font-weight: 400; }
.exec-item.is-inactive .exec-title { color: var(--app-muted-on-bg); }
/* A narrow card (a phone): the name and its status on one line, the bar under them, then the contractor. */
@container (max-width: 46rem) {
  .exec-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .25rem; padding-block: .5625rem; }
  .exec-name { grid-column: 1; grid-row: 1; }
  .exec-status { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .exec-progress { grid-column: 1 / -1; grid-row: 2; }
  .exec-contractor { grid-column: 1 / -1; grid-row: 3; font-size: .8125rem; line-height: 1.25rem; }
  .exec-edit { display: none; }
  .exec-side { flex-direction: column-reverse; min-inline-size: 0; padding-inline-end: .5rem; }
}
/* What a form says of its record under its fields (when an item started, what the timeline shows now). */
.exec-form-facts { display: flex; flex-wrap: wrap; gap: .25rem; margin: 1rem 0 0; font-size: .8125rem; color: var(--app-muted); }
.exec-form-facts[hidden] { display: none; }

/* The firm's execution list: a card per category, its items inside. */
.exec-settings { display: grid; gap: 1rem; max-width: 56rem; }
.exec-settings > .empty-state { padding-block: 2rem; }
.exec-settings-card { overflow: hidden; }
.exec-settings-card.type-row-plain { padding: 1.25rem; }
.exec-settings-head { background: var(--app-hover); border-bottom: 1px solid var(--app-border); }
.exec-settings-title { margin: 0; font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.exec-settings-card.is-inactive .exec-settings-title { color: var(--app-muted-on-bg); font-weight: 500; }
.exec-settings-card > .type-list > :last-child { border-bottom: 1px solid var(--app-border); }
.exec-settings-foot { padding: .625rem 1.25rem; }

/* The time schedule of a project: a timeline on a month scale. Every row is a name with its dates and, beside it,
   a track with its bar; the tracks share one scale - `--tl-days` days, each `--tl-day` wide - and scroll sideways
   inside their own box while the names stay where they are. */
.schedule-note { display: flex; align-items: flex-start; gap: .625rem; padding: .75rem 1.25rem; background: var(--bs-info-bg-subtle);
  border-bottom: 1px solid var(--bs-info-border-subtle); border-inline-start: 3px solid var(--app-info); }
.schedule-note[hidden] { display: none; }
.schedule-note > .material-symbols-outlined { flex-shrink: 0; font-size: 1.25rem; color: var(--app-info-text); }
.schedule-note-title { font-size: .875rem; font-weight: 600; line-height: 1.25rem; color: var(--app-info-text); }
.schedule-note-text { margin-top: .125rem; font-size: .8125rem; color: var(--app-text-soft); }
.schedule-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1.25rem; margin: 0; padding: .625rem 1.25rem;
  border-bottom: 1px solid var(--app-border); list-style: none; font-size: .8125rem; color: var(--app-text-soft); }
.schedule-legend[hidden] { display: none; }
.schedule-legend > li { display: inline-flex; align-items: center; gap: .5rem; }
.schedule-body > .empty-state { padding-block: 2rem 1.625rem; }
.tl { --tl-name: 17rem; --tl-row: 3.25rem; }
.tl-scroll { container-type: inline-size; overflow-x: auto; overscroll-behavior-x: contain; }
.tl-scroll:focus-visible { outline-offset: -2px; }
.tl-inner { --tl-day: max(.1875rem, calc((100cqi - var(--tl-name)) / var(--tl-days, 1)));
  position: relative; inline-size: calc(var(--tl-name) + var(--tl-days, 0) * var(--tl-day)); min-inline-size: 100%; }
.tl-head, .tl-row, .tl-lane, .tl-category { display: grid; grid-template-columns: var(--tl-name) minmax(0, 1fr); }
.tl-head { border-bottom: 1px solid var(--app-border); background: var(--app-surface); }
/* The names stay at the start of the box while the tracks scroll under them. */
.tl-corner, .tl-name, .tl-heading { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--app-surface);
  border-inline-end: 1px solid var(--app-border); }
.tl-months { display: grid; }
.tl-month { padding: .375rem .5rem; overflow: hidden; font-size: .75rem; font-weight: 600; color: var(--app-muted-on-bg);
  white-space: nowrap; text-overflow: ellipsis; border-inline-start: 1px solid var(--app-border); }
/* The lines of the months behind every row, and the line of today over the bars (and under the names). */
.tl-lines, .tl-now { position: absolute; inset-block: 0; inset-inline: var(--tl-name) 0; pointer-events: none; }
.tl-lines { display: grid; }
.tl-lines > span { border-inline-start: 1px solid var(--app-surface-sunken); }
.tl-now { z-index: 1; overflow: hidden; }
.tl-today { position: absolute; inset-block: 0; inset-inline-start: calc(var(--tl-from) * var(--tl-day));
  border-inline-start: 2px solid var(--app-danger); }
.tl-today-label { display: block; margin-block-start: .3125rem; padding: 0 .375rem; border-start-end-radius: 6px;
  border-end-end-radius: 6px; background: var(--app-danger-text); color: var(--app-surface); font-size: .6875rem;
  font-weight: 600; line-height: 1.125rem; white-space: nowrap; }
.tl-rows { position: relative; }
.tl-row { min-block-size: var(--tl-row); border-bottom: 1px solid var(--app-surface-sunken); }
.tl-lane > .tl-heading { margin: 0; padding: .875rem 1.25rem .375rem; font-size: .875rem; font-weight: 600; color: var(--app-text); }
.tl-lane { border-bottom: 1px solid var(--app-border); background: var(--app-surface); }
.tl-lane ~ .tl-lane { border-top: 1px solid var(--app-border); }
.tl-category > .tl-heading { margin: 0; padding: .625rem 1.25rem .25rem; font-size: var(--app-caps-size); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--app-caps-spacing); color: var(--app-muted); overflow-wrap: anywhere; }
.tl-empty { padding: .75rem 1.25rem; font-size: .875rem; color: var(--app-muted); }
.tl-name { display: flex; flex-direction: column; justify-content: center; gap: .0625rem; min-width: 0; padding: .375rem 1.25rem;
  border-block: 0; border-inline-start: 0; color: var(--app-text); font-size: .875rem; line-height: 1.375rem; text-align: start; }
button.tl-name { cursor: pointer; transition: background-color .15s; }
button.tl-name:hover { background: var(--app-hover); }
button.tl-name:focus-visible { outline-offset: -2px; }
.tl-title { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem .5rem; min-width: 0; font-weight: 500; }
.tl-title > bdi { min-width: 0; overflow-wrap: anywhere; }
.tl-dates { display: flex; flex-wrap: wrap; align-items: center; gap: .3125rem; font-size: .8125rem; line-height: 1.25rem;
  color: var(--app-text-soft); font-variant-numeric: tabular-nums; }
.tl-dates.is-none, .tl-row.is-default .tl-dates { color: var(--app-muted); }
.tl-default-tag { padding: 0 .375rem; border: 1px dashed var(--app-border-strong); border-radius: 999px; font-size: .6875rem;
  line-height: 1.125rem; color: var(--app-muted-on-bg); }
.tl-track { position: relative; min-width: 0; }
/* A bar: solid for typed dates; lighter, with a dashed edge, for the default ones; red when late by a typed date,
   amber and still light when only past a default one; green when done. */
.tl-bar { --bar: var(--app-primary); --bar-soft: var(--app-primary-soft); position: absolute; inset-block: 50% auto;
  inset-inline-start: calc(var(--tl-from) * var(--tl-day)); inline-size: max(.375rem, calc(var(--tl-length) * var(--tl-day)));
  block-size: 1.125rem; margin-block-start: -.5625rem; border: 1px solid var(--bar); border-radius: 6px; background: var(--bar); }
.tl-bar.is-default { border-style: dashed; background: var(--bar-soft); }
.tl-bar.is-late { --bar: var(--app-danger); --bar-soft: var(--app-warning-soft); }
.tl-bar.is-late.is-default { --bar: var(--app-warning); }
.tl-bar.is-done { --bar: var(--app-success); --bar-soft: var(--app-success-soft); }
/* A bar that runs on beyond what the chart draws has no round end there. */
.tl-bar.is-cut { border-start-end-radius: 0; border-end-end-radius: 0; }
.tl-bar.is-sample { position: static; flex: none; inline-size: 1.75rem; block-size: .75rem; margin: 0; }
.tl-today-sample { flex: none; inline-size: 0; block-size: 1rem; border-inline-start: 2px solid var(--app-danger); }
.tl-row.is-inactive .tl-title > bdi { color: var(--app-muted-on-bg); }
/* Without a chart (no row has dates yet) and on a narrow window the rows are a list: names and dates, no tracks. */
.tl.is-list .tl-inner { inline-size: auto; }
.tl.is-list :is(.tl-row, .tl-lane, .tl-category) { grid-template-columns: minmax(0, 1fr); }
.tl.is-list .tl-track { display: none; }
.tl.is-list :is(.tl-name, .tl-heading) { border-inline-end: 0; }
@media (max-width: 47.99rem) {
  .schedule-legend, .tl-head, .tl-lines, .tl-now, .tl-track { display: none; }
  .tl-scroll { overflow-x: visible; }
  .tl-inner { inline-size: auto; }
  .tl-row, .tl-lane, .tl-category { grid-template-columns: minmax(0, 1fr); }
  .tl-name, .tl-heading { position: static; border-inline-end: 0; }
}
@media (max-width: 575.98px) {
  .exec-overall, .exec-group-head, .exec-row-plain, .schedule-note, .tl-empty, .exec-settings-foot { padding-inline: 1rem; }
  .exec-row { padding-inline-start: 1rem; }
  .tl-name, .tl-lane > .tl-heading, .tl-category > .tl-heading { padding-inline: 1rem; }
}

/* ---------- Dashboard ---------- */
/* The figures: two side by side on a phone, all in one row where there is room. Each card is one link (its label,
   stretched over the card); what is said apart inside it (the critical issues) is a link of its own, above. */
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat-card-link { transition: box-shadow .15s, border-color .15s; }
.stat-card-link:hover { border-color: var(--app-border-strong); box-shadow: var(--app-shadow-raised); }
.stat-card-link:focus-within { border-color: var(--app-primary); }
.stat-card a.stat-label { width: fit-content; color: var(--app-muted); }
.stat-card a.stat-label:hover { color: var(--app-primary); text-decoration: none; }
.stat-card .stat-value > .skeleton { width: 3rem; height: 1.25rem; margin-block: .3125rem; }
.stat-card .stat-icon.is-neutral { background: var(--app-neutral-soft); color: var(--app-neutral-text); }
.stat-card .stat-icon.is-info { background: var(--app-info-soft); color: var(--app-info-text); }
.stat-card .stat-icon.is-warning { background: var(--app-warning-soft); color: var(--app-warning-text); }
.stat-card .stat-icon.is-danger { background: var(--app-danger-soft); color: var(--app-danger-text); }
.stat-card .stat-icon.is-accent { background: var(--app-accent-soft); color: var(--app-accent-text); }
.stat-extra { position: relative; z-index: 2; grid-column: 1 / -1; justify-self: start; margin-top: .5rem;
  padding: .125rem .625rem; border-radius: 999px; background: var(--app-danger-soft); color: var(--app-danger-text);
  font-size: .75rem; font-weight: 600; line-height: 1.25rem; }
.stat-extra:hover { color: var(--app-danger-text); }

/* The panels: the alerts beside the follow-ups and the tasks where there is room, under one another otherwise. */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.dash-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 1200px) {
  .dash-grid.has-side { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.dash-panel { min-width: 0; }
/* What follows a panel's heading draws the line between them (a row, a group, the filters): one line, not two. */
.dash-panel > .card-header { flex-wrap: nowrap; align-items: flex-start; border-bottom: 0; }
.dash-panel > .card-header > :first-child { min-width: 0; }
.dash-panel-sub { margin: .125rem 0 0; font-size: .8125rem; font-weight: 400; color: var(--app-muted); }
.dash-panel-link { flex-shrink: 0; font-size: .8125rem; font-weight: 500; line-height: 1.5rem; }
.dash-panel > .card-header > .task-count { flex-shrink: 0; margin-top: .0625rem; }
.dash-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .875rem; }
.empty-state.is-good > .empty-state-icon { background: var(--app-success-soft); color: var(--app-success-text); }

/* A list inside a panel, one row each: a title over a quieter line, then where it stands. The title is the link,
   stretched over its row. */
.dash-list { margin: 0; padding: 0; list-style: none; }
.dash-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: .875rem; padding: .625rem 1.25rem; border-top: 1px solid var(--app-border);
  transition: background-color .15s; }
.dash-row:hover { background: var(--app-hover); }
.dash-row-plain, .dash-row-plain:hover { display: block; background: none; padding-block: .875rem; }
.dash-row-plain > .skeleton { width: 55%; }
.dash-row-plain:nth-child(even) > .skeleton { width: 35%; }
.dash-row-main { min-width: 0; }
.dash-row-title { display: block; overflow: hidden; font-size: .875rem; font-weight: 500; line-height: 1.4;
  color: var(--app-text); text-overflow: ellipsis; white-space: nowrap; }
a.dash-row-title::after { content: ""; position: absolute; inset: 0; }
a.dash-row-title:hover { color: var(--app-primary); text-decoration: none; }
a.dash-row-title:focus-visible { outline: 0; }
.dash-row:has(a.dash-row-title:focus-visible) { box-shadow: inset 0 0 0 2px var(--app-primary); }
.dash-row-sub { display: flex; flex-wrap: wrap; column-gap: .375rem; margin-top: .0625rem; font-size: .8125rem;
  color: var(--app-secondary); }
.dash-row-sub > span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row-sub > span + span::before { content: "\00b7"; margin-inline-end: .375rem; }
.dash-row-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .375rem .625rem;
  min-width: 0; }
.dash-more { margin: 0; padding: .625rem 1.25rem; border-top: 1px solid var(--app-border); font-size: .8125rem;
  color: var(--app-muted); }
/* The empty state of a panel that is a list (the overview's stands in its table, under the filters' own line). */
.dash-panel > div > .empty-state { padding-block: 1.5rem; border-top: 1px solid var(--app-border); }

/* The alerts, one group per kind: a bar of the kind's colour down its side, its name and how many there are. */
.alert-group { --alert-tone: var(--app-neutral); --alert-soft: var(--app-neutral-soft); --alert-text: var(--app-neutral-text);
  border-top: 1px solid var(--app-border); border-inline-start: 3px solid var(--alert-tone); }
.alert-group.is-danger { --alert-tone: var(--app-danger); --alert-soft: var(--app-danger-soft); --alert-text: var(--app-danger-text); }
.alert-group.is-warning { --alert-tone: var(--app-warning); --alert-soft: var(--app-warning-soft); --alert-text: var(--app-warning-text); }
.alert-group.is-accent { --alert-tone: var(--app-accent); --alert-soft: var(--app-accent-soft); --alert-text: var(--app-accent-text); }
.alert-group.is-info { --alert-tone: var(--app-info); --alert-soft: var(--app-info-soft); --alert-text: var(--app-info-text); }
.alert-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; padding: .625rem 1.25rem;
  padding-inline-start: calc(1.25rem - 3px); }
.alert-group-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem;
  height: 1.75rem; border-radius: 8px; background: var(--alert-soft); color: var(--alert-text); }
.alert-group-icon > .material-symbols-outlined { font-size: 1.125rem; }
.alert-group-title { min-width: 0; margin: 0; font-size: .875rem; font-weight: 600; letter-spacing: 0; }
.alert-group-count { min-width: 1.375rem; padding-inline: .375rem; border-radius: 999px; background: var(--alert-soft);
  color: var(--alert-text); font-size: .75rem; font-weight: 600; line-height: 1.375rem; text-align: center; }
.alert-group-all { margin-inline-start: auto; font-size: .8125rem; font-weight: 500; }
.alert-group .dash-row { padding-inline-start: calc(1.25rem - 3px); }

/* The overview: a table where there is room; in a narrow window each project is a card, its figures under its
   name with their headings beside them - nothing to scroll sideways for. */
.dash-filters { margin: 0; padding: 0 1.25rem .875rem; border-bottom: 1px solid var(--app-border); }
.dash-filters > .form-select { min-width: 0; }
/* A firm, or a user, with no project yet: the overview is one message (where to begin, for those who may add a
   project) and nothing to filter or to open; it is written first on the page. */
.dash-panel.is-empty { margin-bottom: 1rem; }
.dash-panel.is-empty > :is(.card-header, .dash-filters) { display: none; }
.dash-panel.is-empty .empty-state { padding-block: 2rem; }
.dash-manager { display: inline-flex; align-items: center; gap: .5rem; }
.dash-managers { white-space: nowrap; }
.dash-managers > .dash-manager + .dash-manager { margin-inline-start: -.25rem; }
.dash-managers .avatar { box-shadow: 0 0 0 2px var(--app-surface); }
.dash-figure { display: inline-block; min-width: 1.75rem; padding-inline: .5rem; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; line-height: 1.5rem; text-align: center; }
.dash-figure.is-zero { color: var(--app-muted); font-weight: 500; }
.dash-figure.is-danger { background: var(--app-danger-soft); color: var(--app-danger-text); }
.dash-figure.is-warning { background: var(--app-warning-soft); color: var(--app-warning-text); }
.dash-none { color: var(--app-muted); }
.dash-contracts { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.dash-contracts > .usage-meter { display: block; width: 3.5rem; }
.dash-contracts .usage-meter-bar { display: block; background: var(--app-warning); }
.dash-contracts .usage-meter.is-done .usage-meter-bar { background: var(--app-success); }
@media (min-width: 768px) {
  /* Beside one another, the two people of a row are their avatars; their names are the tooltips. */
  .dash-manager-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; }
}
@media (max-width: 767.98px) {
  /* The headings are written beside the values instead (`data-label`). */
  .dash-table > thead { display: none; }
  .dash-table, .dash-table > tbody { display: block; }
  .dash-table > tbody > tr:not(.table-plain-row) { display: grid; grid-template-columns: minmax(0, 1fr);
    row-gap: .375rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--app-border); }
  .dash-table > tbody > tr:last-child { border-bottom: 0; }
  .dash-table > tbody > tr.table-plain-row, .dash-table > tbody > tr.table-plain-row > td { display: block; }
  .table-responsive > .dash-table > tbody > tr:not(.table-plain-row) > td { display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between; gap: .25rem .75rem; min-width: 0; padding: 0; border: 0;
    white-space: normal; overflow-wrap: anywhere; }
  .dash-table > tbody > tr > td[data-label]::before { content: attr(data-label); flex-shrink: 0; font-size: .8125rem;
    color: var(--app-muted); }
  /* The name is the card's title: no heading beside it. */
  .table-responsive > .dash-table > tbody > tr:not(.table-plain-row) > td.cell-name { display: block;
    margin-bottom: .125rem; font-size: .9375rem; }
  .dash-table > tbody > tr > td.cell-name::before { content: none; }
  /* The two people, under their heading, by name. */
  .table-responsive > .dash-table > tbody > tr:not(.table-plain-row) > td.dash-managers { justify-content: flex-start;
    gap: .375rem 1rem; }
  .dash-table > tbody > tr > td.dash-managers::before { flex-basis: 100%; }
  .dash-managers > .dash-manager + .dash-manager { margin-inline-start: 0; }
  .dash-manager { min-width: 0; }
  .dash-manager-name { min-width: 0; overflow-wrap: anywhere; font-size: .8125rem; }
  /* A project with nobody in either position has no such line. */
  .table-responsive > .dash-table > tbody > tr:not(.table-plain-row) > td.is-none { display: none; }
}
@media (max-width: 575.98px) {
  .dash-row, .dash-more, .dash-filters, .alert-group-head { padding-inline: 1rem; }
  /* The overview's filters side by side only where each still says its choice in full ("All project managers"
     needs about 12rem): on a phone they stand under one another. */
  .dash-filters > .form-select { flex: 1 1 13rem; max-width: none; }
  .dash-filters > .filter-switch { flex-basis: 100%; }
  .alert-group-head, .alert-group .dash-row { padding-inline-start: calc(1rem - 3px); }
  .dash-table > tbody > tr:not(.table-plain-row) { padding-inline: 1rem; }
  /* Where a row stands moves under its title, so that the title keeps the width of the row. */
  .dash-row { grid-template-columns: minmax(0, 1fr); row-gap: .375rem; }
  .dash-row-meta { justify-content: flex-start; }
  .dash-row-title { white-space: normal; overflow-wrap: anywhere; }
}

/* The plan's limits on the subscription page: how much of each is used, with a meter unless it is unlimited. */
.detail-grid dd > .usage-meter { max-width: 14rem; margin-top: .375rem; }

/* ---------- Sign-in and message pages ---------- */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem 1rem; }
.auth-card { width: 100%; max-width: 26rem; }
.auth-card .app-brand { min-height: 0; padding: 0; }
.auth-brand-panel { display: none; }
.auth-form-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.auth-form-panel #lang-switch { color: var(--app-muted-on-bg); }
.auth-message-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem;
  border-radius: 50%; background: var(--app-primary-soft); color: var(--app-primary); font-size: 1.75rem; }

@media (min-width: 992px) {
  .auth-split { flex-direction: row; align-items: stretch; padding: 0; }
  .auth-split .auth-brand-panel { flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-between;
    gap: 2rem; padding: 3rem; color: #fff;
    background: radial-gradient(circle at 15% 10%, rgba(255, 255, 255, .16), transparent 45%),
                linear-gradient(145deg, #228be6 0%, #1971c2 55%, #0b3d6e 100%); }
  .auth-split .auth-form-panel { flex: 1 1 0; padding: 3rem 2rem; background: var(--app-surface); }
  .auth-split .auth-card { border: 0; box-shadow: none; }
  .auth-split .auth-card > .card-body { padding: 0 !important; }
  .auth-split .auth-card .app-brand { display: none; }
  .auth-split .auth-form-panel #lang-switch { color: var(--app-muted); }
  .auth-brand-panel .app-brand { min-height: 0; padding: 0; color: #fff; font-size: 1.125rem; }
  .auth-brand-panel .app-brand > .material-symbols-outlined { background: rgba(255, 255, 255, .16); }
  .auth-brand-title { max-width: 28rem; margin: 0; font-size: 2rem; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
  :lang(ar) .auth-brand-title { letter-spacing: 0; line-height: 1.5; }
}

/* ---------- Small screens ---------- */
@media (max-width: 991.98px) {
  /* The sidebar slides in over a backdrop. Hidden from the keyboard and screen readers while closed. */
  .app-sidebar { position: fixed; inset-block: 0; inset-inline-start: calc(-1 * var(--app-sidebar-width)); z-index: 1040;
    max-width: 85vw; visibility: hidden; border-inline-end: 0; overflow: hidden;
    transition: inset-inline-start .2s ease, visibility 0s linear .2s; }
  .app-sidebar.open { inset-inline-start: 0; visibility: visible; box-shadow: var(--app-shadow-raised);
    transition: inset-inline-start .2s ease, visibility 0s; }
  .app-backdrop { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(15, 23, 42, .45);
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
  .app-sidebar.open + .app-backdrop { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
  .app-topbar { padding-inline: 1rem; }
  .app-sidebar-inner { height: 100%; }
  .app-content { padding: 1rem; }
}
@media (max-width: 767.98px) {
  /* A narrow table scrolls sideways inside its card instead of breaking every cell into several lines:
     rows stay one line tall, except for a name too long for its column. */
  .table-responsive > .table > tbody > tr > td { white-space: nowrap; }
  .table-responsive > .table > tbody > tr > td.cell-name, .table-responsive > .table > tbody > tr > td[colspan] { white-space: normal; }
  .table .cell-wrap { min-width: 0; }
}
@media (max-width: 575.98px) {
  /* A task's date, priority and assignee move under its title. */
  .task-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; padding-inline: 1rem; }
  .task-meta { grid-column: 2; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; margin-top: .5rem; }
  .task-meta > .pill { min-width: 0; }
  .task-menu { grid-column: 3; grid-row: 1; margin-block: -.25rem; }
  .task-menu:empty { display: none; }
  .task-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal;
    overflow-wrap: anywhere; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .detail-grid dt { font-size: .8125rem; }
  .detail-grid dd { margin-bottom: .625rem; }
  .filter-bar > .form-control, .filter-bar > .form-select { max-width: none; }
  .card { --bs-card-spacer-x: 1rem; --bs-card-cap-padding-x: 1rem; }
  .card .table > :not(caption) > * > :first-child { padding-inline-start: 1rem; }
  .card .table > :not(caption) > * > :last-child { padding-inline-end: 1rem; }
  .app-pager { padding-inline: 1rem; }
  .editlog-entry, .editlog-plain { padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .skeleton { animation: none; }
}

/* =====================================================================================================
   Mantine refresh: glass icons, a segmented control, smooth tables, hover motion, and the task board.
   Every motion is off for those who ask for less (the end of this section).
   ===================================================================================================== */

/* ---------- Glass icons ----------
   An icon on a translucent tile: a tinted gradient, a light inner edge and a soft highlight on top, so it reads
   like frosted glass on any surface. `glass-icon-<tone>` picks the tint; `-sm` / `-lg` the size. */
.glass-icon { --glass: var(--app-primary); --glass-rgb: var(--app-primary-rgb);
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 12px; color: var(--glass); isolation: isolate;
  background: linear-gradient(135deg, rgba(var(--glass-rgb), .22), rgba(var(--glass-rgb), .08));
  border: 1px solid rgba(var(--glass-rgb), .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 4px 12px -4px rgba(var(--glass-rgb), .35);
  -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
  transition: transform .2s var(--app-ease), box-shadow .2s var(--app-ease); }
.glass-icon::after { content: ""; position: absolute; inset: 1px 1px 50%; z-index: -1; border-radius: 11px 11px 6px 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); pointer-events: none; }
.glass-icon .material-symbols-outlined { font-size: 1.375rem; font-variation-settings: "FILL" 1, "wght" 500; }
.glass-icon-sm { width: 1.75rem; height: 1.75rem; border-radius: 8px; }
.glass-icon-sm::after { border-radius: 7px 7px 4px 4px; }
.glass-icon-sm .material-symbols-outlined { font-size: 1rem; }
.glass-icon-lg { width: 3.25rem; height: 3.25rem; border-radius: 16px; }
.glass-icon-lg .material-symbols-outlined { font-size: 1.75rem; }
.glass-icon-primary { --glass: var(--app-primary); --glass-rgb: 25, 113, 194; }
.glass-icon-success { --glass: #2b8a3e; --glass-rgb: 47, 158, 68; }
.glass-icon-warning { --glass: #c2410c; --glass-rgb: 245, 159, 0; }
.glass-icon-danger { --glass: #c92a2a; --glass-rgb: 250, 82, 82; }
.glass-icon-info { --glass: #0b7285; --glass-rgb: 21, 170, 191; }
.glass-icon-accent { --glass: #6741d9; --glass-rgb: 121, 80, 242; }
.glass-icon-neutral { --glass: #495057; --glass-rgb: 134, 142, 150; }
/* The stat tiles and the empty states wear it too. */
.stat-card .stat-icon { position: relative; isolation: isolate; border-radius: 12px; color: var(--app-primary);
  background: linear-gradient(135deg, rgba(var(--app-primary-rgb), .22), rgba(var(--app-primary-rgb), .08));
  border: 1px solid rgba(var(--app-primary-rgb), .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 4px 12px -4px rgba(var(--app-primary-rgb), .35);
  transition: transform .2s var(--app-ease); }
.stat-card .stat-icon::after { content: ""; position: absolute; inset: 1px 1px 50%; z-index: -1; border-radius: 11px 11px 6px 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }
.stat-card .stat-icon .material-symbols-outlined { font-variation-settings: "FILL" 1; }
.empty-state-icon { position: relative; isolation: isolate; width: 3.25rem; height: 3.25rem; border-radius: 16px;
  color: var(--app-primary); font-variation-settings: "FILL" 1;
  background: linear-gradient(135deg, rgba(var(--app-primary-rgb), .18), rgba(var(--app-primary-rgb), .05));
  border: 1px solid rgba(var(--app-primary-rgb), .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 16px -6px rgba(var(--app-primary-rgb), .35); }
.app-brand > .material-symbols-outlined { border-radius: 10px; font-variation-settings: "FILL" 1;
  background: linear-gradient(145deg, #339af0, #1971c2 60%, #1864ab);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px -3px rgba(25, 113, 194, .55); }
.page-header-lead { display: flex; align-items: center; gap: .75rem; min-width: 0; }

/* ---------- Segmented control (Mantine's SegmentedControl) ---------- */
.segmented { display: inline-flex; gap: .125rem; padding: .25rem; border-radius: 10px; background: var(--app-surface-sunken);
  border: 1px solid var(--app-border); }
.segmented-item { display: inline-flex; align-items: center; gap: .375rem; padding: .3125rem .75rem; border: 0;
  border-radius: 7px; background: transparent; color: var(--app-muted-on-bg); font-size: .875rem; font-weight: 500;
  transition: background-color .2s var(--app-ease), color .2s, box-shadow .2s var(--app-ease); }
.segmented-item .material-symbols-outlined { font-size: 1.125rem; }
.segmented-item:hover { color: var(--app-text); }
.segmented-item.active { background: var(--app-surface); color: var(--app-text); box-shadow: var(--app-shadow); }

/* ---------- Smooth tables ---------- */
.table { font-variant-numeric: tabular-nums; }
.table > thead > tr > th { background: var(--app-hover); border-bottom: 1px solid var(--app-border); }
/* A heading can carry its icon: `<th data-icon="event">`. */
.table > thead > tr > th[data-icon]::before { content: attr(data-icon); font-family: "Material Symbols Outlined";
  font-size: 1rem; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; vertical-align: -.2em; margin-inline-end: .375rem; color: var(--app-neutral);
  font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; }
.table > tbody > tr > * { transition: background-color .18s var(--app-ease), box-shadow .18s var(--app-ease); }
/* A row under the pointer: tinted, with an accent bar on the side it is read from. */
.table > tbody > tr:not(.table-plain-row):hover > * { --bs-table-bg-state: var(--app-hover); }
/* Bootstrap paints a cell's background with an inset shadow: the bar is added to it, not put in its place. */
.table > tbody > tr:not(.table-plain-row):hover > :first-child {
  box-shadow: inset 3px 0 0 var(--app-primary), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); }
[dir="rtl"] .table > tbody > tr:not(.table-plain-row):hover > :first-child {
  box-shadow: inset -3px 0 0 var(--app-primary), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); }
.table .cell-user .avatar { transition: transform .2s var(--app-ease); }
.table > tbody > tr:hover .cell-user .avatar { transform: scale(1.08); }

/* ---------- Hover motion ---------- */
.card { transition: box-shadow .2s var(--app-ease), transform .2s var(--app-ease), border-color .2s; }
.stat-card:hover, .card-interactive:hover { transform: translateY(-2px); box-shadow: var(--app-shadow-hover); }
.stat-card:hover .stat-icon, .glass-icon:hover { transform: translateY(-1px) scale(1.04); }
.btn { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s var(--app-ease); }
.btn:not(:disabled):active { transform: translateY(1px) scale(.98); }
.btn-primary:not(:disabled):hover { box-shadow: 0 4px 12px -4px rgba(var(--app-primary-rgb), .55); }
.app-sidebar .nav-link .material-symbols-outlined { transition: color .15s, transform .2s var(--app-ease); }
.app-sidebar .nav-link:hover .material-symbols-outlined { transform: scale(1.12); }
.app-sidebar .nav-link.active .material-symbols-outlined { font-variation-settings: "FILL" 1; }
.dropdown-item { transition: background-color .12s, color .12s; }
.dropdown-menu.show { animation: menu-in .14s var(--app-ease); }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- The task board ---------- */
.board { display: flex; align-items: flex-start; gap: 1rem; overflow-x: auto; padding-block-end: 1rem;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain; min-height: 20rem; }
.board-loading { flex: 1; padding: 2rem; }
.board-column { flex: 0 0 18.5rem; display: flex; flex-direction: column; max-height: calc(100vh - 14rem);
  border-radius: 14px; background: var(--app-surface-sunken); border: 1px solid var(--app-border);
  scroll-snap-align: start; transition: box-shadow .2s var(--app-ease), background-color .2s, border-color .2s; }
.board-column.is-done { background: #ebfbee; border-color: #d3f9d8; }
.board-column.is-drop-target { border-color: var(--app-primary); box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), .18); }
.board-column.is-dragging { opacity: .55; }
.board-column-head { display: flex; align-items: center; gap: .5rem; padding: .75rem .75rem .5rem; }
.board-column-head[draggable="true"] { cursor: grab; }
.board-column-title { flex: 1; min-width: 0; margin: 0; font-size: .875rem; font-weight: 700; color: var(--app-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-count { min-width: 1.5rem; padding: .0625rem .5rem; border-radius: 999px; background: var(--app-surface);
  border: 1px solid var(--app-border); color: var(--app-muted-on-bg); font-size: .75rem; font-weight: 700; text-align: center; }
.board-cards { flex: 1; display: flex; flex-direction: column; gap: .5rem; min-height: 3rem; margin: 0;
  padding: .25rem .5rem .5rem; overflow-y: auto; list-style: none; }
.board-card { position: relative; padding: .75rem .75rem .625rem; border-radius: 10px; background: var(--app-surface);
  border: 1px solid var(--app-border); box-shadow: var(--app-shadow);
  transition: transform .18s var(--app-ease), box-shadow .18s var(--app-ease), border-color .18s; }
/* The priority as a bar on the side the card is read from. */
.board-card::before { content: ""; position: absolute; inset-block: .625rem; inset-inline-start: 0; width: 3px;
  border-start-end-radius: 3px; border-end-end-radius: 3px; background: var(--app-neutral); }
.board-card.priority-normal::before { background: var(--app-info); }
.board-card.priority-high::before { background: var(--app-warning); }
.board-card.priority-urgent::before { background: var(--app-danger); }
.board-card[draggable="true"] { cursor: grab; }
.board-card:hover { transform: translateY(-2px); box-shadow: var(--app-shadow-hover); border-color: var(--app-border-strong); }
.board-card.is-dragging { opacity: .45; box-shadow: var(--app-shadow-raised); }
.board-card.is-done .board-card-title { color: var(--app-muted); text-decoration: line-through; }
.board-card[data-busy] { opacity: .7; }
.board-card-top { display: flex; align-items: flex-start; gap: .25rem; }
.board-card-title { flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--app-text);
  font-size: .875rem; font-weight: 600; line-height: 1.35; text-align: start; overflow-wrap: anywhere; }
.board-card-title:hover { color: var(--app-primary); }
.board-card .card-actions { margin-block-start: -.25rem; margin-inline-end: -.375rem; padding: .125rem; }
.board-card-project { display: flex; align-items: center; gap: .25rem; margin-top: .25rem; font-size: .75rem;
  color: var(--app-muted); overflow-wrap: anywhere; }
.board-card-project .material-symbols-outlined { font-size: .875rem; }
.board-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .625rem; }
.board-card-face { margin-inline-start: auto; }
.board-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .0625rem .5rem; border-radius: 999px;
  background: var(--app-surface-sunken); color: var(--app-muted-on-bg); font-size: .75rem; font-weight: 600; }
.board-chip .material-symbols-outlined { font-size: .875rem; }
.board-chip.is-overdue { background: var(--app-danger-soft); color: var(--app-danger-text); }
.board-chip.is-today { background: var(--app-warning-soft); color: var(--app-warning-text); }
.board-empty, .board-more { padding: .25rem .75rem .5rem; font-size: .8125rem; color: var(--app-muted-on-bg); text-align: center; }
.board-add { display: flex; align-items: center; gap: .375rem; margin: 0 .5rem .5rem; padding: .4375rem .5rem; border: 0;
  border-radius: 8px; background: transparent; color: var(--app-muted-on-bg); font-size: .8125rem; font-weight: 500;
  transition: background-color .15s, color .15s; }
.board-add:hover { background: var(--app-surface); color: var(--app-primary); }
.board-new-column { flex: 0 0 14rem; display: flex; align-items: center; justify-content: center; gap: .375rem;
  min-height: 6rem; border: 2px dashed var(--app-border-strong); border-radius: 14px; background: transparent;
  color: var(--app-muted-on-bg); font-size: .875rem; font-weight: 600;
  transition: border-color .15s, color .15s, background-color .15s; }
.board-new-column:hover { border-color: var(--app-primary); color: var(--app-primary); background: var(--app-primary-soft); }
@media (max-width: 575.98px) {
  .board-column { flex-basis: 85vw; max-height: none; }
}

/* A board inside a card (a project's tasks). */
.board-in-card { padding: 1rem; background: var(--app-bg); border-end-start-radius: inherit; border-end-end-radius: inherit; }
.board-in-card > .board { min-height: 14rem; padding-block-end: .25rem; }
.project-task-filter { padding: .75rem 1.25rem; border-bottom: 1px solid var(--app-border); }
.board-card-text { margin-top: .25rem; font-size: .8125rem; color: var(--app-muted); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.board-column.is-dragging { opacity: .45; outline: 2px dashed var(--app-primary); outline-offset: -2px; }

/* ---------- The task detail ---------- */
.task-detail .modal-header { gap: .625rem; }
.task-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1.5rem; }
.task-detail-title { font-size: 1.125rem; font-weight: 600; border-color: transparent; padding-inline: .5rem; margin-inline: -.5rem;
  width: calc(100% + 1rem); background: transparent; }
.task-detail-title:hover:not(:disabled) { border-color: var(--app-border); }
.task-detail-title:disabled, .task-detail .form-control:disabled, .task-detail .form-select:disabled {
  background: transparent; color: var(--app-text); opacity: 1; }
.task-detail-side { padding: 1rem; border-radius: 12px; background: var(--app-surface-sunken); border: 1px solid var(--app-border); align-self: start; }
.task-detail-facts { display: grid; gap: .5rem; margin: 1.25rem 0 0; font-size: .8125rem; }
.task-detail-fact { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.task-detail-fact dt { display: inline-flex; align-items: center; gap: .25rem; font-weight: 500; color: var(--app-muted); }
.task-detail-fact dt .material-symbols-outlined { font-size: 1rem; }
.task-detail-fact dd { margin: 0; color: var(--app-text); }
@media (max-width: 767.98px) { .task-detail-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Projects as cards ---------- */
.project-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.project-card { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: 1.125rem 1.25rem; }
.project-card.is-archived { opacity: .75; }
.project-card-head { display: flex; align-items: flex-start; gap: .75rem; }
.project-card-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.project-card-title a { color: var(--app-text); font-size: 1rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.project-card-title a:hover { color: var(--app-primary); text-decoration: none !important; }
.project-card-number { align-self: flex-start; padding: 0 .375rem; border-radius: 6px; background: var(--app-surface-sunken);
  color: var(--app-muted-on-bg); font-size: .75rem; font-weight: 600; }
/* The menu stands above the link that covers the card. */
.project-card-menu { position: relative; z-index: 2; margin-block-start: -.25rem; margin-inline-end: -.5rem; }
.project-card-client { margin-top: -.25rem; font-size: .8125rem; color: var(--app-muted); overflow-wrap: anywhere; }
.project-card-facts { display: grid; gap: .375rem; }
.project-card-fact { display: flex; align-items: flex-start; gap: .375rem; font-size: .8125rem; color: var(--app-text-soft); }
.project-card-fact .material-symbols-outlined { font-size: 1rem; color: var(--app-neutral); }
.project-card-status { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0; }
.project-card-status > div { display: flex; flex-direction: column; gap: .25rem; }
.project-card-status dt { font-size: var(--app-caps-size); font-weight: 600; text-transform: uppercase; letter-spacing: var(--app-caps-spacing);
  color: var(--app-muted); }
.project-card-status dd { margin: 0; }
.project-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto;
  padding-top: .75rem; border-top: 1px solid var(--app-border); }
.project-card-open { display: inline-flex; color: var(--app-muted); transition: transform .2s var(--app-ease), color .2s; }
[dir="rtl"] .project-card-open { transform: scaleX(-1); }
.project-card:hover .project-card-open { color: var(--app-primary); transform: translateX(3px); }
[dir="rtl"] .project-card:hover .project-card-open { transform: scaleX(-1) translateX(3px); }
.project-card:hover { border-color: var(--app-border-strong); }
#projects-table-card.is-pager-only { background: transparent; border: 0; box-shadow: none; }
#projects-table-card.is-pager-only .app-pager { border-top: 0; padding-inline: 0; }

/* ---------- People: photos, a user's page ---------- */
.avatar-photo { object-fit: cover; background: var(--app-surface-sunken); padding: 0; }
.avatar-xl { width: 5.5rem; height: 5.5rem; font-size: 1.75rem; }
.avatar-stack > span + span, .avatar-stack > img + img { margin-inline-start: -.5rem; }
.avatar-editor { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; flex-shrink: 0; }
.avatar-editor-face .avatar { box-shadow: 0 0 0 4px var(--app-surface), var(--app-shadow-raised); }
.avatar-editor-change { position: absolute; inset-block-start: 3.75rem; inset-inline-end: -.25rem; display: inline-flex;
  align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer;
  background: var(--app-surface); color: var(--app-text); border: 1px solid var(--app-border); box-shadow: var(--app-shadow);
  transition: transform .15s var(--app-ease), color .15s; }
.avatar-editor-change:hover { color: var(--app-primary); transform: scale(1.08); }
.avatar-editor-change:focus-within { outline: 2px solid var(--app-primary); outline-offset: 2px; }
.avatar-editor-change .material-symbols-outlined { font-size: 1.125rem; }
.avatar-editor[data-busy] { opacity: .6; }
.profile-photo { display: flex; align-items: center; gap: 1.25rem; }
.back-link { display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; color: var(--app-muted-on-bg); }
.back-link .material-symbols-outlined { font-size: 1.125rem; }
[dir="rtl"] .back-link .material-symbols-outlined { transform: scaleX(-1); }
.user-hero { overflow: hidden; }
.user-hero-cover { height: 6rem;
  background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .35), transparent 50%),
              linear-gradient(120deg, #74c0fc, #1971c2 55%, #1864ab); }
.user-hero-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.25rem; margin-top: -2.75rem; padding: 0 1.5rem 1rem; }
.user-hero-text { flex: 1; min-width: 12rem; padding-bottom: .25rem; }
.user-hero-name { margin: 0 0 .375rem; font-size: 1.375rem; font-weight: 700; overflow-wrap: anywhere; }
.user-hero-pills { display: flex; flex-wrap: wrap; gap: .375rem; }
.user-hero-actions { padding-bottom: .25rem; }
.user-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin: 0;
  padding: 1rem 1.5rem 1.25rem; border-top: 1px solid var(--app-border); }
.user-facts dt { display: flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 600; color: var(--app-muted);
  text-transform: uppercase; letter-spacing: var(--app-caps-spacing); }
.user-facts dt .material-symbols-outlined { font-size: 1rem; }
.user-facts dd { margin: .25rem 0 0; font-size: .875rem; overflow-wrap: anywhere; }
.user-projects, .user-tasks { margin: 0; padding: 0; list-style: none; }
.user-project { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--app-border); transition: background-color .15s; }
.user-project:last-child { border-bottom: 0; }
.user-project:hover { background: var(--app-hover); }
.user-project.is-archived { opacity: .7; }
.user-project-name { flex: 1; min-width: 8rem; font-weight: 600; color: var(--app-text); }
.user-project-roles { display: flex; flex-wrap: wrap; gap: .25rem; }
.user-projects-plain { padding: 1rem 1.25rem; }
.user-task-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1rem; }
.user-task-stats > div { display: flex; flex-direction: column; align-items: center; padding: .75rem .5rem; border-radius: 12px;
  background: var(--app-surface-sunken); font-size: .75rem; font-weight: 600; color: var(--app-muted); }
.user-task-stat { font-size: 1.5rem; font-weight: 700; color: var(--app-text); line-height: 1.2; }
.user-task-stats > .is-danger .user-task-stat { color: var(--app-danger); }
.user-task-stats > .is-success .user-task-stat { color: var(--app-success); }
.user-task { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; padding: .625rem 0; border-bottom: 1px solid var(--app-border); }
.user-task:last-child { border-bottom: 0; }
.user-task-main { flex: 1; min-width: 10rem; display: flex; flex-direction: column; }
.user-task-title { font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.table > tbody > tr.is-link { cursor: pointer; }
.cell-user-link { color: inherit; }
.cell-user-link:hover { text-decoration: none !important; color: var(--app-primary); }

/* ---------- A project's payments, RFIs, meetings and edit log ---------- */
.card-sub { display: block; font-size: .8125rem; color: var(--app-muted); }
.money-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--app-border); background: var(--app-bg); }
.money-tile { display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; border-radius: 12px;
  background: var(--app-surface); border: 1px solid var(--app-border); box-shadow: var(--app-shadow);
  transition: transform .2s var(--app-ease), box-shadow .2s var(--app-ease); }
.money-tile:hover { transform: translateY(-2px); box-shadow: var(--app-shadow-hover); }
.money-tile-label { font-size: .75rem; font-weight: 600; color: var(--app-muted); }
.money-tile-value { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.money-tile-sub { font-size: .75rem; color: var(--app-muted); }
.payment-number { font-weight: 700; color: var(--app-muted-on-bg); }
.payment-desc { display: flex; align-items: flex-start; gap: .5rem; }
.payment-dir { flex-shrink: 0; width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1rem; }
.payment-dir-incoming { background: var(--app-warning-soft); color: var(--app-warning-text); }
.payment-dir-outgoing { background: var(--app-info-soft); color: var(--app-info-text); }
.payment-amount { font-weight: 700; }
.pill-icon::before { display: none; }
.pill-icon .material-symbols-outlined { font-size: .875rem; }

.rfi-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--app-border); background: var(--app-bg); }
.rfi-stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .625rem; align-items: center;
  padding: .75rem; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface); text-align: start;
  box-shadow: var(--app-shadow); transition: transform .2s var(--app-ease), border-color .2s, box-shadow .2s; }
.rfi-stat .glass-icon { grid-row: 1 / span 2; }
.rfi-stat:hover { transform: translateY(-2px); box-shadow: var(--app-shadow-hover); }
.rfi-stat.active { border-color: var(--app-primary); box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), .18); }
.rfi-stat-value { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.rfi-stat-label { font-size: .75rem; font-weight: 600; color: var(--app-muted); }
.rfi-list { display: grid; gap: .75rem; padding: 1rem 1.25rem; }
.rfi-card { padding: 1rem 1.125rem; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface);
  border-inline-start: 4px solid var(--app-info); transition: box-shadow .2s var(--app-ease), transform .2s var(--app-ease); }
.rfi-card:hover { box-shadow: var(--app-shadow-hover); transform: translateY(-1px); }
.rfi-card.is-late { border-inline-start-color: var(--app-danger); }
.rfi-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rfi-number { padding: .0625rem .5rem; border-radius: 6px; background: var(--app-surface-sunken); font-size: .75rem; font-weight: 700;
  color: var(--app-muted-on-bg); }
.rfi-subject { flex: 1; min-width: 10rem; margin: 0; font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.rfi-question { margin: .5rem 0 0; font-size: .875rem; color: var(--app-text-soft); white-space: pre-line; overflow-wrap: anywhere; }
.rfi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .625rem; font-size: .8125rem; color: var(--app-muted); }
.rfi-meta > span { display: inline-flex; align-items: center; gap: .25rem; }
.rfi-meta .material-symbols-outlined { font-size: 1rem; }
.rfi-assignee .avatar { width: 1.375rem; height: 1.375rem; font-size: .5625rem; }
.rfi-reply { margin-top: .75rem; padding: .75rem .875rem; border-radius: 10px; background: var(--app-success-soft); }
.rfi-reply-head { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 600; color: var(--app-success-text); }
.rfi-reply-head .material-symbols-outlined { font-size: 1rem; }
.rfi-reply p { margin: .375rem 0 0; font-size: .875rem; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .rfi-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.meeting-timeline { position: relative; display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.meeting-timeline::before { content: ""; position: absolute; inset-block: .5rem; inset-inline-start: 1.6875rem; width: 2px;
  background: var(--app-border); }
.meeting-entry { position: relative; display: flex; align-items: flex-start; gap: 1rem; }
.meeting-date { position: relative; z-index: 1; flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; width: 3.375rem; height: 3.375rem; border-radius: 14px; color: #fff;
  background: linear-gradient(145deg, #9775fa, #6741d9); box-shadow: 0 6px 14px -6px rgba(103, 65, 217, .7); }
.meeting-date-day { font-size: 1.125rem; font-weight: 800; line-height: 1; }
.meeting-date-month { font-size: .6875rem; font-weight: 600; text-transform: uppercase; opacity: .9; }
.meeting-card { position: relative; flex: 1; min-width: 0; padding: .875rem 1rem; }
.meeting-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.meeting-title { flex: 1; min-width: 8rem; color: var(--app-text); font-weight: 600; }
.meeting-title:hover { color: var(--app-primary); text-decoration: none !important; }
.meeting-when { font-size: .8125rem; color: var(--app-muted); }
.meeting-place { display: flex; align-items: center; gap: .25rem; margin-top: .25rem; font-size: .8125rem; color: var(--app-muted); }
.meeting-place .material-symbols-outlined { font-size: 1rem; }
.meeting-notes { margin: .5rem 0 0; font-size: .875rem; color: var(--app-text-soft); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.meeting-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .75rem; }
.meeting-others { font-size: .8125rem; color: var(--app-muted); }
.meeting-progress { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; min-width: 9rem; }
.meeting-progress .usage-meter { flex: 1; }
.meeting-progress-text { font-size: .75rem; font-weight: 600; color: var(--app-muted-on-bg); white-space: nowrap; }

/* The edit log as a timeline: a line through the people's faces, each change in a soft box. */
.editlog-list { position: relative; padding-block: .5rem; }
.editlog-list::before { content: ""; position: absolute; inset-block: 1.25rem; inset-inline-start: calc(1.25rem + .9375rem - 1px);
  width: 2px; background: var(--app-border); }
.editlog-entry { position: relative; border-bottom: 0; padding-inline-start: 1.25rem; transition: background-color .15s; }
.editlog-entry:hover { background: var(--app-hover); }
.editlog-head .avatar { position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--app-surface); }
.editlog-what, .editlog-changes { margin-inline-start: 2.5rem; }
.editlog-entry[data-action="deleted"] .editlog-head .avatar { box-shadow: 0 0 0 3px var(--app-surface), 0 0 0 5px var(--app-danger); }
.editlog-entry[data-action="created"] .editlog-head .avatar { box-shadow: 0 0 0 3px var(--app-surface), 0 0 0 5px var(--app-success); }

/* ---------- A sidebar folded to its icons (wide screens) ---------- */
.app-brand { position: relative; }
.sidebar-collapse { margin-inline-start: auto; flex-shrink: 0; color: var(--app-muted); }
[dir="rtl"] .sidebar-collapse .material-symbols-outlined { transform: scaleX(-1); }
.app-sidebar { transition: width .2s var(--app-ease); }
@media (min-width: 992px) {
  [data-sidebar="collapsed"] { --app-sidebar-width: 4.75rem; }
  [data-sidebar="collapsed"] .app-sidebar { width: var(--app-sidebar-width); }
  [data-sidebar="collapsed"] .app-brand { flex-direction: column; gap: .5rem; padding-inline: .5rem; }
  [data-sidebar="collapsed"] #brand-name, [data-sidebar="collapsed"] .nav-section,
  [data-sidebar="collapsed"] .user-chip-text { display: none; }
  [data-sidebar="collapsed"] .sidebar-collapse { margin-inline-start: 0; }
  [data-sidebar="collapsed"] .app-sidebar .nav { padding-inline: .625rem; }
  /* The link's words are its tooltip: the text is folded away, the icon stays. */
  [data-sidebar="collapsed"] .app-sidebar .nav-link { justify-content: center; gap: 0; padding: .625rem 0; font-size: 0; }
  [data-sidebar="collapsed"] .app-sidebar .nav-link .material-symbols-outlined { font-size: 1.375rem; }
  [data-sidebar="collapsed"] .app-sidebar .nav-link .nav-badge { display: none; }
  [data-sidebar="collapsed"] .app-sidebar .nav-link.active::before { inset-inline-start: -.625rem; }
  [data-sidebar="collapsed"] .user-chip { justify-content: center; padding-inline: .5rem; }
}

/* ---------- The team, changed where it is shown ---------- */
.team-member.is-editable { padding: 0; }
.team-member-change { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem .625rem; margin: -.125rem -.625rem;
  border: 1px solid transparent; border-radius: 10px; background: none; color: inherit; text-align: start;
  transition: background-color .15s, border-color .15s; }
.team-member-change:hover, .team-member-change[aria-expanded="true"] { background: var(--app-hover); border-color: var(--app-border); }
.team-member-change .team-member-text { flex: 1; min-width: 0; }
.team-member-edit { font-size: 1rem; color: var(--app-muted); opacity: 0; transition: opacity .15s; }
.team-member-change:hover .team-member-edit, .team-member-change:focus-visible .team-member-edit,
.team-member-change[aria-expanded="true"] .team-member-edit { opacity: 1; }
.team-member[data-busy] { opacity: .6; }
.team-menu { min-width: 16rem; max-height: 20rem; overflow-y: auto; }
.team-pick { display: flex; align-items: center; gap: .625rem; }
.team-pick > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.team-pick-name { font-weight: 500; overflow-wrap: anywhere; }
.team-pick-role { font-size: .75rem; color: var(--app-muted); }
.team-pick .material-symbols-outlined { font-size: 1.125rem; color: var(--app-primary); }

/* ---------- Company settings ---------- */
.company-preview { overflow: hidden; position: sticky; top: calc(var(--app-topbar-height) + 1rem); }
.company-preview-cover { height: 5.5rem; background: radial-gradient(circle at 80% 0%, rgba(255, 255, 255, .35), transparent 55%),
  linear-gradient(120deg, #74c0fc, #1971c2 60%, #1864ab); }
.company-preview-body { padding: 0 1.25rem 1.25rem; }
.company-preview-logo { display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; margin-top: -2.25rem;
  border-radius: 18px; background: var(--app-surface); box-shadow: 0 0 0 4px var(--app-surface), var(--app-shadow-raised); overflow: hidden; }
.company-preview-logo img { width: 100%; height: 100%; object-fit: contain; padding: .375rem; }
.company-preview-initial { font-size: 1.75rem; font-weight: 800; color: var(--app-primary); }
.company-preview-name { margin: .75rem 0 .5rem; font-size: 1.125rem; font-weight: 700; overflow-wrap: anywhere; }
.company-preview-facts { display: grid; gap: .375rem; margin: 0; font-size: .8125rem; }
.company-preview-facts > div { display: flex; align-items: flex-start; gap: .5rem; }
.company-preview-facts dt .material-symbols-outlined { font-size: 1rem; color: var(--app-neutral); }
.company-preview-facts dd { margin: 0; color: var(--app-text-soft); white-space: pre-line; overflow-wrap: anywhere; }
.company-preview-amount { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1rem;
  padding: .625rem .75rem; border-radius: 10px; background: var(--app-surface-sunken); }
.company-preview-money { font-weight: 700; font-variant-numeric: tabular-nums; }
.company-links { padding: .375rem; }
.company-links a { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: 10px; color: var(--app-text);
  font-weight: 500; text-decoration: none !important; transition: background-color .15s; }
.company-links a:hover { background: var(--app-hover); }
.company-links-go { margin-inline-start: auto; color: var(--app-muted); }
[dir="rtl"] .company-links-go { transform: scaleX(-1); }
.logo-field { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; }
.logo-drop { flex: 1 1 16rem; display: flex; align-items: center; gap: .875rem; padding: 1rem; margin: 0; cursor: pointer;
  border: 2px dashed var(--app-border-strong); border-radius: 12px; background: var(--app-surface-sunken);
  transition: border-color .15s, background-color .15s; }
.logo-drop:hover, .logo-drop.is-over, .logo-drop:focus-within { border-color: var(--app-primary); background: var(--app-primary-soft); }
.logo-drop-title { display: block; font-weight: 600; font-size: .875rem; }
.logo-drop-file { display: inline-block; margin-top: .25rem; font-size: .8125rem; font-weight: 600; color: var(--app-primary); overflow-wrap: anywhere; }
.logo-field .logo-current { flex-direction: column; justify-content: center; margin-top: 0; padding: .75rem; border-radius: 12px;
  border: 1px solid var(--app-border); }
.logo-field .logo-current img { max-height: 3.5rem; max-width: 8rem; object-fit: contain; }
.settings-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
  margin-top: 1rem; padding: .75rem 1rem; border-radius: 12px; border: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-surface) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--app-shadow-raised); }

/* ---------- The two-step login: its prompt and its code page ---------- */
.mfa-prompt .modal-body { padding: 2rem 1.75rem 1.5rem; text-align: center; }
.mfa-prompt-icon { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 50%;
  color: #fff; background: linear-gradient(145deg, #339af0, #1971c2 60%, #1864ab);
  box-shadow: 0 0 0 8px rgba(var(--app-primary-rgb), .14), 0 10px 24px -8px rgba(25, 113, 194, .7);
  animation: mfa-pop .45s var(--app-ease) both; }
.mfa-prompt-icon .material-symbols-outlined { font-size: 2.25rem; font-variation-settings: "FILL" 1; }
@keyframes mfa-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.mfa-prompt-title { margin: 1.25rem 0 .5rem; font-size: 1.375rem; font-weight: 700; }
.mfa-prompt-text { margin: 0 auto 1.5rem; max-width: 24rem; color: var(--app-text-soft); }
.mfa-prompt-later { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .75rem; }
.otp-head { text-align: center; }
.otp-input { font-size: 1.75rem; font-weight: 700; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.otp-actions { display: flex; justify-content: space-between; gap: .5rem; margin-top: .75rem; }

/* ---------- The profile ---------- */
.activity-list { margin: 0; padding: 0; list-style: none; }
.activity-item { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--app-border);
  transition: background-color .15s; }
.activity-item:last-child { border-bottom: 0; }
.activity-item:hover { background: var(--app-hover); }
.activity-text { min-width: 0; font-size: .875rem; overflow-wrap: anywhere; }
.activity-action { font-weight: 600; }
.activity-target { font-weight: 500; }
.activity-meta { margin-top: .125rem; font-size: .8125rem; color: var(--app-muted); }
.otp-input-sm { font-size: 1.25rem; letter-spacing: .35em; }
.mfa-on-note { display: flex; align-items: center; gap: .5rem; padding: .75rem .875rem; border-radius: 10px;
  background: var(--app-success-soft); color: var(--app-success-text); font-weight: 500; }

/* ---------- Charts (static/js/charts.js) ----------
   The categorical order is the validated one (blue, orange, aqua, yellow, magenta, green): checked for colour
   blindness, light and dark, each with its own steps. Status colours are reserved for status, with a label. */
:root {
  --chart-c1: #2a78d6; --chart-c2: #eb6834; --chart-c3: #1baf7a; --chart-c4: #eda100; --chart-c5: #e87ba4; --chart-c6: #008300;
  --chart-c1-soft: #b7d3f6; --chart-c2-soft: #f8c9b4; --chart-c3-soft: #b3e6d3;
  --chart-good: #0ca30c; --chart-warning: #fab219; --chart-serious: #ec835a; --chart-critical: #d03b3b; --chart-neutral: #adb5bd;
  --chart-track: #eef0f2; --chart-surface: var(--app-surface); --chart-grid: #e9ecef; --chart-axis: #ced4da;
}
[data-bs-theme="dark"] {
  --chart-c1: #3987e5; --chart-c2: #d95926; --chart-c3: #199e70; --chart-c4: #c98500; --chart-c5: #d55181; --chart-c6: #008300;
  --chart-c1-soft: #1c3d66; --chart-c2-soft: #5a2a16; --chart-c3-soft: #12442f;
  --chart-neutral: #6b6f75; --chart-track: #2c2e33; --chart-grid: #2f3237; --chart-axis: #4a4d55;
}
.chart { position: relative; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-mark { transition: opacity .15s, filter .15s; cursor: pointer; outline: none; }
.chart-svg:hover .chart-mark:not(.is-hover) { opacity: .55; }
.chart-mark.is-hover, .chart-mark:focus-visible { filter: brightness(1.08); }
.chart-hit { cursor: crosshair; outline: none; }
.chart-area { opacity: .14; }
.chart-line { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .08)); }
.chart-grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart-axis { stroke: var(--chart-axis); stroke-width: 1; }
.chart-cross { stroke: var(--app-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-tick { fill: var(--app-muted-on-bg); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-value { fill: var(--app-text); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-center-value { fill: var(--app-text); font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.chart-center-label { fill: var(--app-text-soft); font-size: 13px; font-weight: 600; }
.chart-gauge-value { fill: var(--app-text); font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }
.chart-ring-value { fill: var(--app-text); font-size: 24px; font-weight: 800; }
.chart-gauge-fill { transition: stroke-dashoffset .6s var(--app-ease); }
.chart-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 7rem; padding: .375rem .625rem; border-radius: 8px;
  background: var(--app-text); color: var(--app-surface); font-size: .75rem; box-shadow: var(--app-shadow-raised); white-space: nowrap; }
.chart-tip-title { font-weight: 700; margin-bottom: .125rem; }
.chart-tip-row { display: flex; align-items: center; }
.chart-tip-swatch { display: inline-block; width: .5rem; height: .5rem; margin-inline-end: .375rem; border-radius: 2px; }
.chart-tip-label { margin-inline-end: .5rem; opacity: .85; }
.chart-tip-value { margin-inline-start: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem 1rem; margin: .75rem 0 0; padding: 0; list-style: none;
  font-size: .8125rem; }
.chart-legend li { display: inline-flex; align-items: center; gap: .375rem; }
.chart-swatch { width: .625rem; height: .625rem; border-radius: 3px; flex-shrink: 0; }
.chart-legend-label { color: var(--app-text-soft); }
.chart-legend-value { font-weight: 700; color: var(--app-text); font-variant-numeric: tabular-nums; }
.chart-empty { display: flex; align-items: center; justify-content: center; min-height: 8rem; color: var(--app-muted); font-size: .875rem; }
.chart-bar-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .625rem; margin: 0; padding: 0; list-style: none; }
.chart-bar-head { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; font-size: .8125rem; }
.chart-bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--app-text-soft); }
.chart-bar-label a { color: inherit; }
.chart-bar-label a:hover { color: var(--app-primary); }
.chart-bar-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-bar-track { height: .5rem; border-radius: 999px; background: var(--chart-track); overflow: hidden; }
.chart-bar-fill { height: 100%; border-radius: inherit; transform-origin: left center; transform: scaleX(0);
  transition: transform .6s var(--app-ease); }
[dir="rtl"] .chart-bar-fill { transform-origin: right center; margin-inline-start: auto; }
.chart-bar-list.is-drawn .chart-bar-fill { transform: scaleX(1); }
.chart-spark { display: block; width: 100%; height: 2rem; }

/* ---------- The dashboard's KPIs and insights ---------- */
.dash-today { padding: .375rem .75rem; border-radius: 999px; background: var(--app-surface); border: 1px solid var(--app-border);
  font-size: .8125rem; font-weight: 600; color: var(--app-muted-on-bg); }
/* Four figures a row on a wide screen, two on a tablet, one on a phone: the eight cards make two even rows. */
.dash-stats { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 576px) { .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (min-width: 1200px) { .dash-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.kpi-card .card-body { position: relative; }
/* The gauge tile is a label over its gauge, not the icon tile's grid. */
#kpi-progress .card-body { display: block; }
.kpi-gauge { margin: .25rem auto 0; max-width: 11rem; }
.kpi-spark { grid-column: 1 / -1; margin-top: .5rem; }
.kpi-sub { grid-column: 1 / -1; margin-top: .25rem; font-size: .75rem; font-weight: 600; color: var(--app-muted); }
.kpi-sub.is-danger { color: var(--app-danger-text); }
.kpi-money { font-size: 1.25rem; }
.stat-card .stat-icon.is-success { color: var(--app-success); background: linear-gradient(135deg, rgba(47, 158, 68, .22), rgba(47, 158, 68, .08));
  border-color: rgba(47, 158, 68, .22); }
.dash-insights { margin: 1.5rem 0; }
.dash-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.dash-section-title { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1rem; font-weight: 700; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 1rem; }
/* Grid items may shrink below their content: a long name is cut with an ellipsis, not pushed past the window. */
.chart-grid > *, .chart-split > * { min-width: 0; }
.chart-card { display: flex; flex-direction: column; }
.chart-card .card-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.chart-card-wide { grid-column: span 2; }
@media (max-width: 767.98px) { .chart-card-wide { grid-column: auto; } }
.chart-split { display: grid !important; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
@media (max-width: 575.98px) { .chart-split { grid-template-columns: minmax(0, 1fr); } }
.chart-box { width: 100%; }
#ch-columns, #ch-issues { max-width: 15rem; margin-inline: auto; }
.chart-rings { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: center; }
.chart-rings .chart-box { max-width: 8.5rem; margin-inline: auto; }
.chart-ring-caption { margin-top: .25rem; font-size: .8125rem; font-weight: 600; color: var(--app-muted); }

/* ---------- Dashboard lists: five at a time ---------- */
#alerts-body { max-height: 26rem; overflow-y: auto; scrollbar-width: thin; }
.dash-pager { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem 1.25rem;
  border-top: 1px solid var(--app-border); font-size: .8125rem; color: var(--app-muted); }
.dash-pager .btn { padding: .125rem .375rem; }

/* ---------- Dark mode ----------
   `data-bs-theme="dark"` on <html> (set before the page draws, base.html; switched by `App.setTheme`). Bootstrap's
   components follow by themselves; these are the product's tokens on Mantine's dark palette. Filled buttons keep
   the darker blue (white text 4.9:1); text in the primary colour takes a lighter one (links, active items). */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --app-primary: #4dabf7;
  --app-primary-hover: #74c0fc;
  --app-primary-active: #a5d8ff;
  --app-primary-soft: rgba(51, 154, 240, .16);
  --app-primary-rgb: 77, 171, 247;
  --app-text: #e9ecef;
  --app-text-soft: #ced4da;
  --app-muted: #a6a7ab;
  --app-muted-on-bg: #a6a7ab;
  --app-secondary: #a6a7ab;
  --app-bg: #1a1b1e;
  --app-surface: #25262b;
  --app-surface-sunken: #1f2024;
  --app-hover: #2c2e33;
  --app-border: #373a40;
  --app-border-strong: #4a4d55;

  --app-success: #51cf66;  --app-success-soft: rgba(64, 192, 87, .16);  --app-success-text: #8ce99a;
  --app-warning: #fcc419;  --app-warning-soft: rgba(250, 176, 5, .16);  --app-warning-text: #ffe066;
  --app-danger: #ff6b6b;   --app-danger-soft: rgba(250, 82, 82, .16);   --app-danger-text: #ffa8a8;
  --app-info: #3bc9db;     --app-info-soft: rgba(21, 170, 191, .16);    --app-info-text: #99e9f2;
  --app-accent: #9775fa;   --app-accent-soft: rgba(121, 80, 242, .18);  --app-accent-text: #d0bfff;
  --app-neutral: #909296;  --app-neutral-soft: #2c2e33;                 --app-neutral-text: #c1c2c5;

  --app-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .45);
  --app-shadow-raised: 0 1px 3px rgba(0, 0, 0, .4), 0 20px 25px -5px rgba(0, 0, 0, .45), 0 10px 10px -5px rgba(0, 0, 0, .4);
  --app-shadow-hover: 0 1px 3px rgba(0, 0, 0, .4), 0 10px 15px -5px rgba(0, 0, 0, .5), 0 7px 7px -5px rgba(0, 0, 0, .45);
  --app-focus-ring: 0 0 0 .2rem rgba(77, 171, 247, .35);

  --bs-body-color-rgb: 233, 236, 239;
  --bs-body-bg-rgb: 26, 27, 30;
  --bs-emphasis-color-rgb: 233, 236, 239;
  --bs-secondary-rgb: 166, 167, 171;
  --bs-secondary-color-rgb: 166, 167, 171;
  --bs-link-hover-color-rgb: 116, 192, 252;
  --bs-primary-bg-subtle: rgba(51, 154, 240, .16);
  --bs-primary-border-subtle: rgba(77, 171, 247, .4);
  --bs-success-bg-subtle: var(--app-success-soft);
  --bs-success-border-subtle: rgba(64, 192, 87, .35);
  --bs-warning-bg-subtle: var(--app-warning-soft);
  --bs-warning-border-subtle: rgba(250, 176, 5, .35);
  --bs-danger-bg-subtle: var(--app-danger-soft);
  --bs-danger-border-subtle: rgba(250, 82, 82, .35);
  --bs-info-bg-subtle: var(--app-info-soft);
  --bs-info-border-subtle: rgba(21, 170, 191, .35);
  --bs-form-invalid-color: #ffa8a8;
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: #1971c2; --bs-btn-border-color: #1971c2;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1c7ed6; --bs-btn-hover-border-color: #1c7ed6;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #1864ab; --bs-btn-active-border-color: #1864ab;
  --bs-btn-disabled-bg: #1971c2; --bs-btn-disabled-border-color: #1971c2; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-border-color: rgba(77, 171, 247, .45);
  --bs-btn-hover-border-color: #4dabf7; --bs-btn-active-bg: rgba(51, 154, 240, .24); --bs-btn-active-border-color: #4dabf7; }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #ffa8a8; --bs-btn-border-color: rgba(250, 82, 82, .45);
  --bs-btn-hover-color: #ffc9c9; --bs-btn-hover-bg: rgba(250, 82, 82, .14); --bs-btn-hover-border-color: #ff6b6b;
  --bs-btn-active-color: #ffc9c9; --bs-btn-active-border-color: #ff6b6b; }
[data-bs-theme="dark"] .form-check-input:checked, [data-bs-theme="dark"] .stepper-step.is-done::before,
[data-bs-theme="dark"] .usage-meter-bar { background-color: #1971c2; border-color: #1971c2; }
[data-bs-theme="dark"] .avatar-tone-0 { background: rgba(51, 154, 240, .2); color: #a5d8ff; }
[data-bs-theme="dark"] .avatar-tone-5 { background: rgba(230, 73, 128, .2); color: #fcc2d7; }
[data-bs-theme="dark"] .board-column.is-done { background: rgba(64, 192, 87, .08); border-color: rgba(64, 192, 87, .25); }
[data-bs-theme="dark"] .glass-icon, [data-bs-theme="dark"] .stat-card .stat-icon, [data-bs-theme="dark"] .empty-state-icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 14px -4px rgba(0, 0, 0, .6); }
[data-bs-theme="dark"] .glass-icon::after, [data-bs-theme="dark"] .stat-card .stat-icon::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)); }
[data-bs-theme="dark"] .glass-icon-success { --glass: #8ce99a; }
[data-bs-theme="dark"] .glass-icon-warning { --glass: #ffd43b; }
[data-bs-theme="dark"] .glass-icon-danger { --glass: #ffa8a8; }
[data-bs-theme="dark"] .glass-icon-info { --glass: #66d9e8; }
[data-bs-theme="dark"] .glass-icon-accent { --glass: #b197fc; }
[data-bs-theme="dark"] .glass-icon-neutral { --glass: #c1c2c5; }
[data-bs-theme="dark"] .skeleton { background: linear-gradient(90deg, #2c2e33 25%, #373a40 50%, #2c2e33 75%) 0 0 / 200% 100%; }
[data-bs-theme="dark"] .modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .6; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-bs-theme="dark"] .app-brand > .material-symbols-outlined { background: linear-gradient(145deg, #339af0, #1971c2 60%, #1864ab); }

/* The theme switch of the top bar: the sun in the dark, the moon in the light. */
.theme-switch .theme-icon-dark { display: none; }
[data-bs-theme="dark"] .theme-switch .theme-icon-dark { display: inline; }
[data-bs-theme="dark"] .theme-switch .theme-icon-light { display: none; }

/* ---------- Less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .stat-card:hover, .card-interactive:hover, .board-card:hover, .btn:active { transform: none !important; }
}

/* ---------- Binaa: the mark, and the sign-in page's brand panel with its robot ---------- */
.app-brand-mark { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 10px;
  box-shadow: 0 4px 10px -3px rgba(25, 113, 194, .55); }
.auth-wordmark { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.auth-wordmark [lang="ar"] { margin-inline-start: .375rem; font-weight: 600; opacity: .75; }
@media (min-width: 992px) {
  .auth-split .auth-brand-panel { position: relative; overflow: hidden; }
  .auth-brand-panel > * { position: relative; }
  .auth-brand-panel .app-brand-mark { width: 2.5rem; height: 2.5rem; box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .35); }
  /* A drawing sheet: a fine grid and a coarse one, drifting slowly. */
  .auth-blueprint { position: absolute !important; inset: -40px; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px),
      linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
    mask-image: radial-gradient(ellipse at 60% 50%, #000 30%, transparent 80%);
    animation: auth-drift 40s linear infinite; }
  .auth-hero { display: flex; align-items: center; gap: 1.5rem; }
  .auth-hero-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
  .auth-features { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
  .auth-features li { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: 999px;
    font-size: .875rem; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px); }
  .auth-features .material-symbols-outlined { font-size: 1.125rem; }
  .auth-robot-wrap { flex: 0 0 auto; width: clamp(12rem, 22vw, 18rem); }
}
@keyframes auth-drift { to { transform: translate(100px, 100px); } }

/* Comes in like a motion library would: up, from a blur, one after another. */
.auth-enter { animation: auth-in .7s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
@keyframes auth-in { from { opacity: 0; transform: translateY(18px) scale(.98); filter: blur(6px); } }

/* The robot. */
.robot-svg { display: block; width: 100%; height: auto; overflow: visible; }
.robot-svg .robot-body { animation: robot-bob 3.6s ease-in-out infinite; }
.robot-svg .robot-shadow { transform-box: fill-box; transform-origin: center; animation: robot-shadow 3.6s ease-in-out infinite; }
.robot-svg .robot-head { transform-box: view-box; transform-origin: 160px 180px; transition: transform .25s ease-out; }
.robot-svg .robot-antenna { animation: robot-ping 2s ease-in-out infinite; }
.robot-svg .robot-screen-line { stroke-dasharray: 90; animation: robot-draw 3s ease-in-out infinite; }
.robot-svg .robot-pupil { transition: transform .12s linear; }
.robot-svg .robot-lid { transition: height .08s ease; }
.robot.is-blinking .robot-lid { height: 44px; }
.robot-svg .robot-hand { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .25s; opacity: 0; }
.robot-svg .robot-hand-left { transform: translate(-18px, 130px) rotate(-20deg); }
.robot-svg .robot-hand-right { transform: translate(18px, 130px) rotate(20deg); }
.robot.is-shy .robot-hand { opacity: 1; transform: none; }
.robot.is-shy .robot-arm-left, .robot.is-shy .robot-arm-right { opacity: 0; transition: opacity .2s; }
.robot.is-shy .robot-mouth { d: path("M148 164 Q160 158 172 164"); }
.robot.is-sad .robot-head { animation: robot-no .5s ease-in-out 3; }
.robot.is-sad .robot-mouth { d: path("M146 166 Q160 158 174 166"); }
.robot.is-sad .robot-antenna { fill: #ffa94d; }
@keyframes robot-bob { 50% { transform: translateY(-6px); } }
@keyframes robot-shadow { 50% { transform: scale(.9); opacity: .18; } }
@keyframes robot-ping { 50% { opacity: .45; } }
@keyframes robot-draw { from { stroke-dashoffset: 90; } 60%, to { stroke-dashoffset: 0; } }
@keyframes robot-no { 25% { translate: -8px 0; } 75% { translate: 8px 0; } }

@media (prefers-reduced-motion: reduce) {
  .auth-enter, .auth-blueprint, .robot-svg .robot-body, .robot-svg .robot-shadow, .robot-svg .robot-antenna,
  .robot-svg .robot-screen-line, .robot.is-sad .robot-head { animation: none; }
  .robot-svg .robot-head, .robot-svg .robot-hand, .robot-svg .robot-pupil { transition: none; }
}

/* ---------- Projects: phase colours, and a neon glow behind a card under the pointer ---------- */
.pill-orange { --pill-bg: #fff0e6; --pill-color: #b4470b; --pill-dot: #f76707; }
[data-bs-theme="dark"] .pill-orange { --pill-bg: rgba(247, 103, 7, .18); --pill-color: #ffa94d; --pill-dot: #ff922b; }
.project-card { --neon: 34, 139, 230; transition: transform .25s var(--app-ease), box-shadow .3s var(--app-ease), border-color .3s; }
.project-card[data-phase="not_started"] { --neon: 134, 142, 150; }
.project-card[data-phase="digging"] { --neon: 247, 103, 7; }
.project-card[data-phase="skeleton"] { --neon: 245, 159, 0; }
.project-card[data-phase="finishing"] { --neon: 34, 139, 230; }
.project-card[data-phase="completed"] { --neon: 18, 184, 134; }
/* The phase's colour as a thin line along the top. */
.project-card::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: inherit;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: rgb(var(--neon)); opacity: .85; pointer-events: none; }
.project-card:hover, .project-card:focus-within {
  border-color: rgba(var(--neon), .65);
  box-shadow: 0 0 0 1px rgba(var(--neon), .55), 0 0 14px 2px rgba(var(--neon), .45), 0 0 38px 8px rgba(var(--neon), .28),
              0 18px 40px -18px rgba(var(--neon), .6);
  animation: neon-breathe 2.4s ease-in-out infinite; }
@keyframes neon-breathe {
  50% { box-shadow: 0 0 0 1px rgba(var(--neon), .7), 0 0 20px 4px rgba(var(--neon), .55), 0 0 54px 12px rgba(var(--neon), .32),
                    0 18px 40px -18px rgba(var(--neon), .6); } }
@media (prefers-reduced-motion: reduce) { .project-card:hover, .project-card:focus-within { animation: none; } }