/* HR GOV – shared styles. Logical properties (margin-inline-*, inset-inline-*) keep
   the same rules correct in Arabic (RTL) and English (LTR). */

/* Palette of the platform mark (Infrastructure/AppBrand.cs): teal is the primary,
   the sidebar is a deep shade of it. */
:root {
    --hg-primary: #0f766e;
    --hg-primary-dark: #0b5a54;
    --hg-primary-soft: #e2f1ee;
    --hg-sidebar: #0c2b29;
    --hg-sidebar-active: #17504b;
    --hg-sidebar-hover: rgba(255, 255, 255, .07);
    --hg-sidebar-text: #cfe2df;
    --hg-sidebar-muted: #8aaba6;
    --hg-bg: #f3f5f7;
    --hg-surface: #ffffff;
    --hg-border: #dfe5e9;
    --hg-text: #1f2a31;
    --hg-muted: #66757f;
    --hg-success: #1f7a4a;
    --hg-success-soft: #e3f4ea;
    --hg-radius: .75rem;
    --hg-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

html, body {
    font-family: var(--hg-font);
    color: var(--hg-text);
    background: var(--hg-bg);
}

body {
    font-size: .95rem;
}

a {
    color: var(--hg-primary);
}

/* ---- Bootstrap theme overrides ---- */
.btn-primary {
    --bs-btn-bg: var(--hg-primary);
    --bs-btn-border-color: var(--hg-primary);
    --bs-btn-hover-bg: var(--hg-primary-dark);
    --bs-btn-hover-border-color: var(--hg-primary-dark);
    --bs-btn-active-bg: var(--hg-primary-dark);
    --bs-btn-active-border-color: var(--hg-primary-dark);
    --bs-btn-disabled-bg: var(--hg-primary);
    --bs-btn-disabled-border-color: var(--hg-primary);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #5fa79e;
    box-shadow: 0 0 0 .2rem rgba(15, 118, 110, .18);
}

.form-check-input:checked {
    background-color: var(--hg-primary);
    border-color: var(--hg-primary);
}

.card {
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.card-header {
    border-bottom-color: var(--hg-border);
    padding: .9rem 1.25rem;
}

.bi {
    vertical-align: -.125em;
}

/* ---- App shell ---- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    --bs-offcanvas-width: 280px;
    --bs-offcanvas-bg: var(--hg-sidebar);
}

.sidebar-inner {
    background: var(--hg-sidebar);
    color: var(--hg-sidebar-text);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 992px) {
    .sidebar {
        flex: 0 0 260px;
        width: 260px;
    }

    .sidebar-inner {
        position: sticky;
        top: 0;
        height: 100vh;
    }
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.35rem 1.5rem .5rem;
}

.brand-link {
    display: block;
    text-decoration: none;
}

/* ---- The platform logo: mark + name (Pages/Shared/_BrandLockup.cshtml) ---- */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    line-height: 1;
    color: var(--hg-text);
}

.brand-lockup .brand-mark {
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .7rem;
    box-shadow: 0 2px 6px rgba(12, 43, 41, .25);
}

.brand-words {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.brand-name {
    font-size: 1.55rem;
    font-weight: 700;
}

.brand-latin {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--hg-muted);
}

.brand-lockup.is-light { color: #fff; }
.brand-lockup.is-light .brand-latin { color: rgba(255, 255, 255, .62); }

.brand-sm .brand-mark { width: 2rem; height: 2rem; border-radius: .55rem; }
.brand-sm .brand-name { font-size: 1.15rem; }
.brand-sm .brand-latin { font-size: .6rem; }

.brand-lg { gap: 1rem; }
.brand-lg .brand-mark { width: 4rem; height: 4rem; border-radius: 1rem; }
.brand-lg .brand-name { font-size: 2.4rem; }
.brand-lg .brand-latin { font-size: .8rem; }

.sidebar-product {
    padding: 0 1.5rem 1rem;
    color: var(--hg-sidebar-muted);
    font-size: .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* The subscriber the user works in, under the product name. */
.sidebar-tenant {
    padding: .65rem 1.5rem;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Owner panel ---- */
.usage-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
}

.usage-row .usage-label {
    flex: 0 0 6.5rem;
    color: var(--hg-muted);
}

.usage-row .progress {
    flex: 1;
    height: .5rem;
}

.usage-row .usage-value {
    flex: 0 0 5.5rem;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.temp-password {
    display: inline-block;
    background: var(--hg-primary-soft);
    border: 1px dashed var(--hg-primary);
    border-radius: .5rem;
    padding: .4rem 1rem;
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.15rem;
    letter-spacing: 1px;
    color: var(--hg-primary);
    font-weight: 700;
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem 0 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

/* Signed-in user, language, password and sign-out: always visible at the bottom. */
.sidebar-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .9rem 1rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .12);
}

.sf-user {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.sf-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
}

.sf-who {
    flex: 1;
    min-width: 0;
}

.sf-name {
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-role {
    color: var(--hg-sidebar-muted);
    font-size: .76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
}

.sf-actions {
    display: flex;
    gap: .45rem;
}

.sf-actions > form:first-child {
    flex: 1;
    min-width: 0;
}

.sidebar-footer .lang-switch,
.sf-btn {
    height: 38px;
    border-radius: .5rem;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .07);
    color: var(--hg-sidebar-text);
}

.sidebar-footer .lang-switch {
    width: 100%;
    justify-content: center;
}

.sf-btn {
    width: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    padding: 0;
    text-decoration: none;
    font-size: 1.05rem;
}

.sidebar-footer .lang-switch:hover,
.sf-btn:hover,
.sf-btn:focus-visible {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.sf-logout:hover,
.sf-logout:focus-visible {
    background: #b3261e;
    border-color: #b3261e;
}

.nav-section {
    padding: 1.1rem 1.5rem .35rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--hg-sidebar-muted);
}

.nav-link-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 2px .75rem;
    padding: .55rem .8rem;
    border-radius: .5rem;
    color: var(--hg-sidebar-text);
    text-decoration: none;
    font-size: .92rem;
}

.nav-link-item .bi {
    font-size: 1.05rem;
    width: 1.25rem;
    text-align: center;
}

a.nav-link-item:hover {
    background: var(--hg-sidebar-hover);
    color: #fff;
}

.nav-link-item.active {
    background: var(--hg-sidebar-active);
    color: #fff;
}

.nav-link-item.is-soon {
    opacity: .55;
    cursor: default;
}

.nav-link-item .label {
    flex: 1;
    min-width: 0;
}

.nav-link-item .bi.soon {
    font-size: .8rem;
    width: auto;
    color: var(--hg-sidebar-muted);
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 60px;
    padding: .5rem 1.5rem;
    background: var(--hg-surface);
    border-bottom: 1px solid var(--hg-border);
}

.topbar-title {
    font-weight: 600;
    font-size: 1.05rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-mark {
    width: 30px;
    height: 30px;
    border-radius: .45rem;
}

.topbar-end {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.topbar-date {
    align-items: center;
    gap: .4rem;
    color: var(--hg-muted);
    font-size: .85rem;
    padding-inline-end: .5rem;
}

.topbar-date .sep {
    color: var(--hg-border);
}

.btn-icon {
    font-size: 1.4rem;
    line-height: 1;
    padding: .25rem .4rem;
}

.lang-switch {
    border: 1px solid var(--hg-border);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.user-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--hg-border);
    background: var(--hg-surface);
}

.avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hg-primary-soft);
    color: var(--hg-primary);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .8rem;
}

.dropdown-item .bi {
    margin-inline-end: .35rem;
}

.content {
    flex: 1;
    padding: 1.5rem;
}

.app-footer {
    padding: 1rem 1.5rem;
    color: var(--hg-muted);
    font-size: .8rem;
    border-top: 1px solid var(--hg-border);
}

@media (max-width: 575.98px) {
    .topbar, .content, .app-footer {
        padding-inline: 1rem;
    }
}

/* ---- Empty / message states ---- */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state > .bi {
    font-size: 2.75rem;
    color: var(--hg-primary);
    display: block;
    margin-bottom: 1rem;
}

/* ---- Home ---- */
.welcome .card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(120deg, var(--hg-primary-soft), #fff 70%);
    border-radius: var(--hg-radius);
}

.welcome-mark {
    width: 64px;
    height: 64px;
    border-radius: 1rem;
    opacity: .2;
}

.phase-list {
    list-style: none;
    margin: 0;
    padding: .25rem 1.25rem;
}

.phase {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px dashed var(--hg-border);
}

.phase:last-child {
    border-bottom: 0;
}

.phase-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-weight: 600;
    background: #eef2f5;
    color: var(--hg-muted);
}

.phase-body {
    flex: 1;
    min-width: 0;
}

.phase-label {
    font-size: .75rem;
    color: var(--hg-muted);
}

.phase-title {
    font-weight: 500;
}

.phase-status {
    font-size: .75rem;
    padding: .2rem .65rem;
    border-radius: 1rem;
    background: #eef2f5;
    color: var(--hg-muted);
    white-space: nowrap;
}

.phase.done .phase-num, .phase.done .phase-status {
    background: var(--hg-success-soft);
    color: var(--hg-success);
}

.phase.next .phase-num, .phase.next .phase-status {
    background: var(--hg-primary);
    color: #fff;
}

/* ---- Sign-in ---- */
.auth-shell {
    display: flex;
    min-height: 100vh;
}

.auth-brand {
    flex: 0 0 44%;
    position: relative;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 4rem;
    color: #fff;
    background:
        radial-gradient(circle at 85% 12%, rgba(255, 255, 255, .07), transparent 45%),
        linear-gradient(160deg, var(--hg-sidebar) 0%, var(--hg-primary) 100%);
}

.auth-logo {
    line-height: 1;
}

.auth-brand h1 {
    font-size: 1.9rem;
    font-weight: 700;
    margin: 2.25rem 0 .75rem;
}

.auth-brand p {
    color: #d3e6e2;
    max-width: 30rem;
    line-height: 1.9;
}

.auth-points {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    max-width: 30rem;
}

.auth-points li {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .85rem;
    border-radius: .55rem;
    background: rgba(255, 255, 255, .08);
}

.auth-card-logo {
    margin-bottom: 1.75rem;
}

.auth-form {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4.5rem 1rem 2rem;
}

.auth-top {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
}

.auth-card {
    width: 100%;
    max-width: 410px;
    padding: 2rem;
    background: var(--hg-surface);
    border: 1px solid var(--hg-border);
    border-radius: 1rem;
    box-shadow: 0 12px 32px rgba(12, 43, 41, .08);
}

.auth-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

@media (max-width: 575.98px) {
    .auth-card {
        padding: 1.5rem;
    }
}

/* ---- Pages: header, details, tables ---- */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.page-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
}

.page-sub {
    color: var(--hg-muted);
    font-size: .9rem;
    margin-top: .2rem;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    font-size: .82rem;
    color: var(--hg-muted);
    margin-bottom: .35rem;
}

.crumbs a {
    color: var(--hg-muted);
    text-decoration: none;
}

.crumbs a:hover {
    color: var(--hg-primary);
}

.crumbs .sep {
    opacity: .5;
}

.card-table {
    overflow: hidden;
}

.card-table .table {
    margin: 0;
}

.table > thead th {
    font-size: .78rem;
    font-weight: 600;
    color: var(--hg-muted);
    background: #f7f9fa;
    border-bottom-color: var(--hg-border);
    white-space: nowrap;
}

.table > tbody td {
    vertical-align: middle;
}

.table a.row-link {
    color: var(--hg-text);
    font-weight: 500;
    text-decoration: none;
}

.table a.row-link:hover {
    color: var(--hg-primary);
    text-decoration: underline;
}

.code {
    font-family: Consolas, "Courier New", monospace;
    font-size: .85em;
    color: var(--hg-muted);
    direction: ltr;
    unicode-bidi: isolate;
}

.details {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
}

.details dt {
    font-size: .76rem;
    font-weight: 500;
    color: var(--hg-muted);
    margin-bottom: .15rem;
}

.details dd {
    margin: 0;
    font-weight: 500;
    word-break: break-word;
}

.section-title {
    font-size: .95rem;
    font-weight: 600;
    margin: 0;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.filters .form-control, .filters .form-select {
    width: auto;
    min-width: 150px;
}

.filters .search {
    min-width: 220px;
    flex: 1 1 220px;
}

.filters .filter-date {
    width: auto;
    flex-wrap: nowrap;
}

.filters .filter-date .form-control {
    min-width: 140px;
}

/* status chips */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    font-weight: 500;
    padding: .18rem .6rem;
    border-radius: 1rem;
    background: #eef2f5;
    color: var(--hg-muted);
    white-space: nowrap;
}

.chip-success { background: var(--hg-success-soft); color: var(--hg-success); }
.chip-warning { background: #fff4d6; color: #8a6300; }
.chip-danger { background: #fde8e6; color: #b3261e; }
.chip-primary { background: var(--hg-primary-soft); color: var(--hg-primary); }

.nav-tabs {
    border-bottom-color: var(--hg-border);
    gap: .25rem;
}

.nav-tabs .nav-link {
    color: var(--hg-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    padding: .7rem .9rem;
}

.nav-tabs .nav-link.active {
    color: var(--hg-primary);
    background: none;
    border-bottom-color: var(--hg-primary);
    font-weight: 600;
}

.nav-tabs .count {
    font-size: .72rem;
    background: #eef2f5;
    border-radius: 1rem;
    padding: .05rem .45rem;
    margin-inline-start: .25rem;
}

.empty {
    text-align: center;
    color: var(--hg-muted);
    padding: 2rem 1rem;
}

.empty .bi {
    font-size: 1.8rem;
    display: block;
    margin-bottom: .4rem;
    opacity: .6;
}

.empty .btn .bi {
    display: inline;
    font-size: inherit;
    margin: 0;
    opacity: 1;
}

/* documents */
.doc-icon {
    width: 36px;
    height: 36px;
    border-radius: .5rem;
    display: grid;
    place-items: center;
    background: var(--hg-primary-soft);
    color: var(--hg-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.doc-icon.pdf { background: #fde8e6; color: #b3261e; }
.doc-icon.img { background: #e7f3ec; color: #1f7a4a; }

.is-busy {
    opacity: .7;
    pointer-events: none;
}

/* change history */
.history {
    list-style: none;
    margin: 0;
    padding: 0;
}

.history li {
    padding: .75rem 0;
    border-bottom: 1px dashed var(--hg-border);
}

.history li:last-child {
    border-bottom: 0;
}

.history .meta {
    font-size: .8rem;
    color: var(--hg-muted);
}

.history .change {
    font-size: .85rem;
}

.history .old {
    color: #b3261e;
    text-decoration: line-through;
}

.history .new {
    color: var(--hg-success);
}

/* permission matrix */
.matrix th, .matrix td {
    text-align: center;
}

.matrix th:first-child, .matrix td:first-child {
    text-align: start;
}

.form-section {
    font-size: .8rem;
    font-weight: 600;
    color: var(--hg-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--hg-border);
    padding-bottom: .4rem;
    margin: 1.5rem 0 1rem;
}

/* ---- KPI tiles ---- */
.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: .75rem;
}

.kpi {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .9rem 1rem;
    background: var(--hg-surface);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius);
    color: var(--hg-text);
    text-decoration: none;
    position: relative;
    transition: border-color .15s, box-shadow .15s;
}

a.kpi:hover, .kpi.active {
    border-color: var(--hg-primary);
    box-shadow: 0 2px 8px rgba(12, 43, 41, .08);
}

.kpi > .bi {
    font-size: 1.1rem;
    color: var(--hg-muted);
}

.kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.kpi-label {
    font-size: .8rem;
    color: var(--hg-muted);
}

.kpi-note {
    font-size: .75rem;
    color: var(--hg-muted);
}

/* The status colour marks the tile's edge and icon; the number stays in ink. */
.kpi-danger { border-inline-start: 4px solid #d03b3b; }
.kpi-danger > .bi { color: #d03b3b; }
.kpi-warning { border-inline-start: 4px solid #fab219; }
.kpi-warning > .bi { color: #b9800a; }
.kpi-success { border-inline-start: 4px solid #0ca30c; }
.kpi-success > .bi { color: #0a8a0a; }
.kpi-primary { border-inline-start: 4px solid var(--hg-primary); }
.kpi-primary > .bi { color: var(--hg-primary); }

.kpi-hero {
    background: linear-gradient(150deg, var(--hg-sidebar), var(--hg-primary));
    border-color: transparent;
    color: #fff;
}

.kpi-hero .kpi-value {
    font-size: 2.6rem;
}

.kpi-hero .kpi-label, .kpi-hero .kpi-note {
    color: #d3e6e2;
}

/* ---- status marks (icons), reserved for state ---- */
.st-good { color: #0ca30c; }
.st-warning { color: #d99a10; }
.st-critical { color: #d03b3b; }

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    color: var(--hg-muted);
}

/* ---- compliance matrix ---- */
.matrix-wrap {
    max-height: 560px;
}

.compliance-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: normal;
    min-width: 7rem;
}

.compliance-matrix tbody th {
    position: sticky;
    inset-inline-start: 0;
    background: var(--hg-surface);
    z-index: 1;
    min-width: 13rem;
    font-weight: 500;
}

.compliance-matrix td {
    padding: .3rem;
}

.matrix-cell {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem;
    border-radius: .4rem;
    color: var(--hg-text);
    text-decoration: none;
    font-size: .78rem;
    white-space: nowrap;
}

.cell-st-good .matrix-cell { background: #eef8ee; }
.cell-st-warning .matrix-cell { background: #fff6e0; }
.cell-st-critical .matrix-cell { background: #fdecec; }
.matrix-cell:hover, .matrix-cell:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: 1px; }

/* ---- horizontal bars: one series, one hue, value at the tip ---- */
.hbars {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.hbar {
    display: grid;
    grid-template-columns: minmax(8rem, 34%) 1fr;
    align-items: center;
    gap: .75rem;
    border-radius: .4rem;
    outline: none;
}

.hbar:hover .hbar-fill, .hbar:focus-visible .hbar-fill {
    filter: brightness(1.2);
}

.hbar:focus-visible {
    box-shadow: 0 0 0 2px var(--hg-primary-soft);
}

.hbar-label {
    font-size: .85rem;
    color: var(--hg-text);
    text-align: end;
}

.hbar-track {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.hbar-fill {
    height: 18px;
    background: var(--hg-primary);
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
    flex-shrink: 0;
    max-width: calc(100% - 4.5rem);
}

.hbar-value {
    font-size: .8rem;
    font-weight: 600;
    color: var(--hg-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- tooltip for [data-tip] ---- */
.hg-tip {
    position: fixed;
    z-index: 1080;
    max-width: 280px;
    padding: .4rem .6rem;
    border-radius: .4rem;
    background: #1f2a31;
    color: #fff;
    font-size: .78rem;
    line-height: 1.4;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

details.card > summary {
    cursor: pointer;
    list-style: none;
}

details.card > summary::-webkit-details-marker {
    display: none;
}

.min-w-0 {
    min-width: 0;
}


/* Client-side validation summary: hidden until there is something to say. */
.validation-summary-valid {
    display: none;
}

/* ---- Phones and small tablets ---- */
@media (max-width: 991.98px) {
    .topbar {
        min-height: 56px;
        padding-block: .35rem;
    }

    .page-title {
        font-size: 1.2rem;
    }
}

@media (max-width: 575.98px) {
    .content {
        padding-top: 1rem;
    }

    .page-head {
        align-items: stretch;
        gap: .75rem;
    }

    .page-head > div:first-child {
        min-width: 0;
    }

    /* Actions become a full-width row; the main one (last) takes the free space. */
    .page-actions {
        width: 100%;
    }

    .page-actions > .btn:last-child,
    .page-actions > form:last-child,
    .page-actions > form:last-child > .btn {
        flex: 1 1 auto;
    }

    /* Filters: search on its own line, the rest two per line. */
    .filters > * {
        flex: 1 1 calc(50% - .5rem);
        min-width: 0;
    }

    .filters .form-control, .filters .form-select {
        width: 100%;
        min-width: 0;
    }

    .filters .search {
        flex-basis: 100%;
    }

    .filters > .btn {
        flex: 0 0 auto;
    }

    .filters > .form-check {
        flex-basis: 100%;
        margin-inline-start: 0 !important;
    }

    .kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .kpi {
        padding: .7rem .8rem;
    }

    .kpi-value {
        font-size: 1.35rem;
    }

    .kpi-hero {
        grid-column: 1 / -1;
    }

    .card-header, .card-body {
        padding-inline: .9rem;
    }

    /* Tabs scroll sideways instead of wrapping onto several lines. */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
    }

    .details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .8rem 1rem;
    }

    /* Lists become cards: each row a block, each cell shows its column name first (site.js
       copies the header text into data-label). Grids (.matrix) keep scrolling sideways. */
    .table-stack thead {
        display: none;
    }

    .table-stack, .table-stack > :is(tbody, tfoot), .table-stack > :is(tbody, tfoot) > tr, .table-stack > :is(tbody, tfoot) > tr > td {
        display: block;
        width: 100%;
    }

    .table-stack > :is(tbody, tfoot) > tr {
        padding: .7rem .9rem;
        border-bottom: 1px solid var(--hg-border);
    }

    .table-stack > :is(tbody, tfoot) > tr:last-child {
        border-bottom: 0;
    }

    .table-stack > :is(tbody, tfoot) > tr > td {
        position: relative;
        border: 0;
        padding: .2rem 0;
        padding-inline-start: 38%;
        min-height: 1.6rem;
        white-space: normal;
        text-align: start;
    }

    /* .code cells are left-to-right; in a card the label still belongs on the page's side. */
    .table-stack > :is(tbody, tfoot) > tr > td.code {
        direction: inherit;
        font-family: inherit;
        font-size: inherit;
    }

    .table-stack > :is(tbody, tfoot) > tr > td::before {
        content: attr(data-label);
        font-family: var(--bs-body-font-family);
        position: absolute;
        inset-inline-start: 0;
        top: .25rem;
        width: 35%;
        color: var(--hg-muted);
        font-size: .76rem;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* The first cell is the row's title; unlabeled cells (actions) use the full width. */
    .table-stack > :is(tbody, tfoot) > tr > td:first-child,
    .table-stack > :is(tbody, tfoot) > tr > td[data-label=""] {
        padding-inline-start: 0;
    }

    .table-stack > :is(tbody, tfoot) > tr > td:first-child {
        font-size: .98rem;
        padding-bottom: .35rem;
    }

    .table-stack > :is(tbody, tfoot) > tr > td:first-child::before,
    .table-stack > :is(tbody, tfoot) > tr > td[data-label=""]::before {
        display: none;
    }

    .table-stack > :is(tbody, tfoot) > tr > td:empty {
        display: none;
    }

    .table-stack .text-end {
        text-align: start !important;
    }

    .table-responsive:has(> .table-stack) {
        overflow-x: visible;
    }

    .app-footer {
        text-align: center;
    }
}


/* ---- Reports ---- */
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
}

.report-card {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: 1.1rem 1.2rem;
    background: var(--hg-surface);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius);
    color: var(--hg-text);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

.report-card:hover, .report-card:focus-visible {
    border-color: var(--hg-primary);
    box-shadow: 0 2px 10px rgba(12, 43, 41, .08);
    color: var(--hg-text);
}

.report-card > .bi {
    font-size: 1.6rem;
    color: var(--hg-primary);
    line-height: 1;
}

.report-card-title {
    font-weight: 600;
    margin-bottom: .25rem;
}

.report-card-text {
    color: var(--hg-muted);
    font-size: .86rem;
    line-height: 1.6;
}

.report-table tfoot td {
    border-top: 2px solid var(--hg-border);
    background: #f7f9fa;
}

.report-table .chip {
    font-variant-numeric: tabular-nums;
}

.print-only {
    display: none;
}

@media print {
    @page {
        size: A4 landscape;
        margin: 10mm;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        background: #fff !important;
    }

    .sidebar, .topbar, .app-footer, .filters, .page-actions, .crumbs, .no-print, .alert-dismissible .btn-close {
        display: none !important;
    }

    .app-shell, .app-main {
        display: block !important;
    }

    .content {
        padding: 0 !important;
    }

    .print-only {
        display: block;
    }

    .print-head {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding-bottom: .6rem;
        margin-bottom: .8rem;
        border-bottom: 2px solid var(--hg-primary);
    }

    .print-title {
        font-size: 15pt;
        font-weight: 700;
        color: var(--hg-primary);
    }

    .print-meta {
        font-size: 8.5pt;
        color: #555;
    }

    .page-head {
        margin-bottom: .6rem;
    }

    .page-head .page-title {
        display: none;
    }

    .kpis {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: .4rem;
    }

    .kpi {
        padding: .4rem .6rem;
        break-inside: avoid;
    }

    .kpi-value {
        font-size: 13pt;
    }

    .card {
        border: 1px solid #d5dbdf;
        box-shadow: none;
        break-inside: auto;
    }

    .table-responsive {
        overflow: visible !important;
    }

    .table {
        font-size: 8.5pt;
    }

    .table > thead {
        display: table-header-group;
    }

    .table tr {
        break-inside: avoid;
    }

    a {
        color: inherit !important;
        text-decoration: none !important;
    }
}

/* ---- Contracts ---- */
.branch-picker {
    max-height: 340px;
    overflow-y: auto;
    background: var(--hg-surface);
}

.hbar-fill.is-unpaid,
.legend-swatch.is-unpaid {
    background: #d99a10;
}

.legend-swatch {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 2px;
    vertical-align: middle;
}

/* Codes are written left to right, but in an Arabic page they still line up on the right. */
html[dir="rtl"] :is(dd, td).code {
    text-align: right;
}


/* ---- Alerts bell (top bar) ---- */
.alerts-btn {
    position: relative;
    color: var(--hg-muted);
    font-size: 1.25rem;
    border-radius: .5rem;
}

.alerts-btn:hover, .alerts-btn[aria-expanded="true"] {
    color: var(--hg-primary);
    background: var(--hg-primary-soft);
}

.alerts-badge {
    position: absolute;
    top: -5px;
    inset-inline-end: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #d03b3b;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--hg-surface);
}

.alerts-dot {
    position: absolute;
    top: 5px;
    inset-inline-end: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fab219;
    box-shadow: 0 0 0 2px var(--hg-surface);
}

.alerts-menu {
    width: min(340px, calc(100vw - 2rem));
    padding: 0;
    overflow: hidden;
    border-radius: .6rem;
}

.alerts-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .7rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--hg-border);
}

.alerts-head a {
    color: var(--hg-muted);
}

.alerts-list {
    max-height: 60vh;
    overflow-y: auto;
}

.alerts-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem 1rem;
    color: var(--hg-text);
    text-decoration: none;
    border-bottom: 1px solid #f0f3f5;
    font-size: .88rem;
}

.alerts-item:hover, .alerts-item:focus-visible {
    background: #f5f7f9;
    color: var(--hg-text);
}

.alerts-item .bi {
    font-size: 1.05rem;
    width: 1.2rem;
    text-align: center;
}

.alerts-label {
    flex: 1;
    min-width: 0;
}

.alerts-empty {
    padding: 1.4rem 1rem;
    text-align: center;
    color: var(--hg-muted);
    font-size: .9rem;
}

.alerts-foot {
    padding: .5rem 1rem;
    font-size: .75rem;
    color: var(--hg-muted);
    background: #f7f9fa;
}