/* Typography — canonical */

@font-face {
    font-family: 'CairoV1';
    src: url('../fonts/cairo/Cairo-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'CairoV1';
    src: url('../fonts/cairo/Cairo-SemiBold.ttf') format('truetype');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'CairoV1';
    src: url('../fonts/cairo/Cairo-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'CairoV1';
    src: url('../fonts/cairo/Cairo-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'CairoV1';
    src: url('../fonts/cairo/Cairo-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

/* Design tokens + status color policy — canonical */

:root {
    --brand-green: #0D3B2E;
    --brand-green-hover: #124b3b;
    --brand-green-soft: #eef4f1;
    --brand-gold: #C79A2E;
    --brand-gold-deep: #85651c;

    --app-bg: #F5F7F6;
    --surface: #FFFFFF;
    --border: #DDE5E1;
    --border-strong: #c9d6d0;
    --text: #17332b;
    --muted: #62726b;

    --sidebar-width: 224px;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(13, 59, 46, 0.04), 0 6px 18px rgba(13, 59, 46, 0.04);
    --motion: 140ms ease;

    --status-success-bg: #edf6f1;
    --status-success-text: #0D3B2E;

    --status-danger-bg: #fdecec;
    --status-danger-text: #8b3025;

    --status-attention-bg: #f7f1df;
    --status-attention-text: #7b601d;

    --status-neutral-bg: #f1f2f1;
    --status-neutral-text: #6d7773;

    /*
     * Badge edges. These three values were written out twice — once for the
     * record-type badges and once for the approval-status badges — so a change
     * to one semantic family silently left the other behind. They are one owner
     * now, and the dashboard reads the same tokens rather than approximating
     * them.
     */
    --status-success-border: #cbdcd3;
    --status-attention-border: #e7d49c;
    --status-danger-border: #f0cbc5;
    --status-neutral-border: var(--border-strong);

    /*
     * The form-control contract. Every interactive control in the application
     * reads its resting edge and its focus treatment from here, so a newly
     * introduced control can never arrive carrying the browser's own identity —
     * which is how an unstyled select turned up with a blue focus ring.
     */
    --control-border: #d6dcd9;
    --control-radius: 10px;
    --control-h: 46px;
    --control-focus-border: var(--brand-gold);
    --control-focus-ring: rgba(199, 154, 46, 0.3);

    /*
     * Administrative compact density — the canonical scale.
     *
     * These are the sizes the records filters established and that were approved
     * as the reference for dense administrative surfaces. They live here so no
     * selector restates them: a surface opts in (filter-panel--compact,
     * records-table) and reads the scale from these tokens.
     *
     * Ordinary forms deliberately do NOT use them and keep the comfortable
     * 46px control contract, and nothing below 641px uses them either.
     */
    --admin-control-h-compact: 38px;
    --admin-control-font-compact: 12.5px;
    --admin-label-font-compact: 11.5px;

    --admin-panel-pad-compact: 12px;
    --admin-panel-gap-compact: 8px;
    --admin-fields-row-gap-compact: 8px;
    --admin-fields-column-gap-compact: 10px;

    --admin-table-font-compact: 12.5px;
    --admin-table-head-font-compact: 11.5px;
    --admin-table-cell-pad-compact: 8px 9px;

}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion: 0ms linear;
    }
}

* {
    box-sizing: border-box;
}

html {
    font-family: 'CairoV1', Arial, sans-serif;
}

body {
    margin: 0;
    background: var(--app-bg);
    color: var(--text);
}

/* The sign-in screens stand on the brand ground: TOA green with the DataTrace
   pattern (Turki, 2026-10-07). Brand screens only — never behind a table, a
   form or a record, where it would compete with what is being read. */
.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background-color: var(--brand-green);
    background-image: url('../brand/pattern-datatrace.svg');
    background-size: 320px 320px;
}

.auth-page .auth-card {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border: 1px solid #e5e5df;
    border-radius: 18px;
    padding: 34px;
    box-shadow: 0 12px 35px rgba(13, 59, 46, 0.08);
}

.brand-logo-wrap {
    display: flex;
    min-height: 145px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.brand-logo {
    display: block;
    width: auto;
    max-width: 270px;
    height: auto;
    max-height: 135px;
    object-fit: contain;
    border-radius: 24px;
}

h1 {
    margin: 0 0 8px;
    font-size: 26px;
}

.auth-card h1,
.auth-card .subtitle {
    text-align: center;
}

.subtitle {
    color: #6d7975;
    margin: 0 0 28px;
}

/*
 * The vertical rhythm of every comfortable form in the application, so the user
 * form, branding and login stay visually related. The record form tightens this
 * to the reference's own field gap from the compact contract below.
 */
.field {
    margin-bottom: 14px;
}

label {
    display: block;
    margin-bottom: 7px;
    font-weight: 700;
}

/*
 * The text-box contract. A checkbox or a radio is not a text box: it keeps its
 * own size from the choice contract below instead of stretching to the column
 * (A7 review, Turki 2026-10-07). :where keeps this rule as weak as a bare
 * `input`, so no scoped rule loses to it.
 */
input:where(:not([type="checkbox"], [type="radio"])) {
    width: 100%;
    min-height: var(--control-h);
    padding: 10px 12px;
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    font: inherit;
    background: #fff;
}

input:focus {
    outline: 2px solid var(--control-focus-ring);
    border-color: var(--control-focus-border);
}

/*
 * THE CHOICE CONTRACT: every checkbox and radio in the application, in the
 * brand green, at one size. Scoped rules (team tables, record type cards) still
 * refine it.
 */
input:where([type="checkbox"], [type="radio"]) {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    accent-color: var(--brand-green);
    cursor: pointer;
}

/*
 * One yes/no option on a form, from <x-form-checkbox>: the box and its words on
 * one line, sitting on the same line as the text boxes beside it in a grid.
 */
.check-field {
    display: flex;
    align-items: center;
    gap: 9px;
    align-self: end;
    min-height: var(--control-h);
    margin: 0 0 14px;
    font-weight: 700;
    cursor: pointer;
}

/*
 * A short list of those options under one heading: the entities a visit
 * category is offered to (ق9). The boxes stack tightly, so the list reads as
 * one field rather than a column of separate ones, also inside a table cell.
 */
.category-entities {
    min-width: 0;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.category-entities legend {
    margin-bottom: 6px;
    padding: 0;
    font-weight: 700;
}

.category-entities legend .field-hint {
    display: block;
    font-weight: 400;
}

.category-entities .check-field {
    min-height: 0;
    margin: 0 0 6px;
}

td .category-entities {
    margin: 0;
}

/*
 * THE FILE INPUT CONTRACT — a global owner, like input, textarea and select.
 *
 * The outer control was already ours: the rule above matches a file input and
 * gives it the same box as every other field. What was never owned is the
 * picker button *inside* it, which every browser draws in its own language —
 * so six file inputs across the application were carrying a foreign control in
 * the middle of an otherwise themed form, and only the settings logo upload had
 * a scoped rule of its own.
 *
 * Owning ::file-selector-button closes that gap everywhere at once. The button
 * reads as the secondary action it is, in the application's own green, and the
 * filename text beside it stays ordinary body text.
 *
 * Presentation only: nothing here touches how many files are accepted, how large
 * they may be, what types are allowed, or where they are stored.
 */
input[type="file"] {
    padding: 7px 10px;
    color: var(--text);
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    margin-inline-end: 10px;
    min-height: 30px;
    padding: 5px 14px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--brand-green);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--motion), border-color var(--motion);
}

/* The same secondary-action behaviour as .small-add-button beside it. */
input[type="file"]:hover::file-selector-button {
    border-color: var(--border-strong);
    background: var(--brand-green-soft);
}

input[type="file"]:disabled,
input[type="file"]:disabled::file-selector-button {
    background: var(--status-neutral-bg);
    color: var(--muted);
    cursor: not-allowed;
}

/*
 * Numeric time remains LTR inside the Arabic RTL interface.
 * Date display is owned by the shared Arabic date control below.
 */
input[type="time"] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}

input[type="time"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-datetime-edit {
    width: 100%;
    direction: ltr;
    text-align: right;
}

button {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 10px;
    background: #0D3B2E;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.alert {
    margin-bottom: 18px;
    padding: 11px 13px;
    background: var(--status-danger-bg);
    border: 1px solid var(--status-danger-border);
    border-radius: 10px;
    color: var(--status-danger-text);
}

.topbar {
    min-height: 64px;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar form {
    margin: 0;
}

.logout-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-height: 38px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--brand-green);
    font-size: 13px;
    transition: background-color var(--motion), border-color var(--motion);
}

.logout-button svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

.logout-button:hover {
    border-color: var(--border-strong);
    background: var(--brand-green-soft);
}

.logout-button:focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: 2px;
}

.page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 32px 36px;
}

.empty-state {
    margin-top: 8px;
    padding: 26px;
    background: #ffffff;
    border: 1px solid #e3e7e5;
    border-radius: 16px;
}

.empty-state p {
    margin-bottom: 0;
    color: #6d7975;
}

@media (max-width: 600px) {
    .auth-card {
        padding: 26px 20px;
    }

    .page {
        padding: 18px 16px 28px;
    }
}

/* Visit Report Simple — application shell — canonical */

.app-shell {
    position: relative;
    display: flex;
    min-height: 100vh;
}

/*
 * The sidebar's column, painted the full height of the page (web screens
 * review 10). The sidebar itself stays one viewport tall and sticky, so its
 * links never scroll away; on a page longer than the viewport its white
 * ground used to end where that first viewport did, leaving the column bare
 * below it (the dashboard, the audit log, a new client). The column is drawn
 * here, on the shell, so it always runs from the top of the page to the
 * bottom whatever the page's length, and the sticky sidebar rides over it.
 */
.app-shell::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sidebar-width);
    border-inline-end: 1px solid var(--border);
    background: var(--surface);
}

.app-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex: 0 0 var(--sidebar-width);
    flex-direction: column;
    width: var(--sidebar-width);
    height: 100vh;
    overflow-y: auto;
    padding: 20px 14px;
    border-left: 1px solid var(--border);
    background: var(--surface);
}

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

.app-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 2px 8px 18px;
    border-bottom: 1px solid var(--border);
    color: var(--brand-green);
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
}

.app-brand img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 10px;
}

.app-nav {
    display: grid;
    gap: 18px;
}

.app-nav-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: #3d5148;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--motion), color var(--motion);
}

.app-nav-link svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    color: var(--muted);
}

.app-nav-link:hover {
    background: var(--brand-green-soft);
    color: var(--brand-green);
}

.app-nav-link:hover svg {
    color: var(--brand-green);
}

.app-nav-link[aria-current="page"] {
    background: var(--brand-green);
    color: #ffffff;
}

.app-nav-link[aria-current="page"] svg {
    color: var(--brand-gold);
}

.app-nav-section {
    display: grid;
    gap: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* عنوان قسم في القائمة الجانبية، لا Caption.

   كان 12px بلون --muted، أي أصغر وأخفت من الروابط التي تحته (14px/700)، فكان
   العنوان يقرأ كتعليق تابع للقائمة بدل أن يرأسها — وهو ما ظهر بوضوح عند تقصير
   النص إلى «الإدارة».

   والقيم ليست جديدة: 16px هو مقاس عناوين الأقسام المعتمد في التطبيق نفسه
   (.settings-card-heading h2 و.approval-panel-title)، و--brand-green هو الرمز
   القائم الذي يستعمله .app-brand فوقه مباشرةً، فلا لون مكتوب يدويًا هنا.

   والوزن 700 وليس 600: كلاهما معتمد في هذه الورقة، لكن روابط القائمة 700،
   وعنوان أخفّ من عناصره يعيد المشكلة نفسها من الجهة الأخرى. فالتمييز يأتي من
   المقاس واللون، والوزن يبقى في عائلة القائمة.

   المسافات كما هي، ولم يتغير شيء غير الطباعة واللون. */
.app-nav-heading {
    display: block;
    padding: 2px 12px;
    color: var(--brand-green);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.app-nav-heading:hover,
.app-nav-heading[aria-current="page"] {
    color: var(--brand-green);
}

.app-brand:focus-visible,
.app-nav-link:focus-visible,
.app-nav-heading:focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: 2px;
}

.app-topbar {
    gap: 16px;
}

/* كتلة هوية الحساب: سطران اثنان لا ثلاثة.

   السطر الأول: الاسم.
   السطر الثاني: الدور والمدير المباشر معًا.

   كانت الكتلة صفًّا أفقيًا (اسم ثم شارة دور)، ثم جُرِّبت ثلاثة أسطر مكدّسة
   فبدت مبعثرة واستهلكت ارتفاعًا بلا مقابل. الشكل المعتمد يجمع سياق الحساب في
   سطر واحد تحت الاسم. */
.app-user {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

/* السطر الثاني نفسه: الدور، ثم فاصل رفيع، ثم المدير المباشر.
   يتقلّص ولا يزاحم، والفاصل يمنع قراءة الاثنين كنصٍّ واحد. */
.app-user-line {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
}

.app-user-line > .app-reporting-line::before {
    content: "";
    align-self: center;
    width: 1px;
    height: 11px;
    margin-inline-end: 4px;
    background: var(--border);
}

.app-user strong {
    overflow: hidden;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-user-role {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--brand-green-soft);
    color: var(--brand-green);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.topbar-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
}

/* سياق المنشأة: يجيب عن «أنا الآن داخل أي منشأة؟».
   منطقة مستقلة بين هوية المستخدم وأزرار الشريط، فلا يلتبس اسم المنشأة باسم
   الشخص ولا يزاحم الجرس أو تسجيل الخروج. */
.app-tenant-context {
    display: flex;
    /* يتقلّص ولا يزاحم: هوية المستخدم والأزرار تأخذان مقاسهما أولًا. */
    flex: 0 1 auto;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.app-tenant-context-label {
    flex: 0 0 auto;
    color: var(--muted-ink, #5b6b62);
    font-size: 11.5px;
    font-weight: 600;
}

/* أقوى من أن يُنسى، وأخف من عنوان الصفحة. */
.app-tenant-context-name {
    overflow: hidden;
    min-width: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    /* الأسماء العربية الطويلة تُقتطع بنظافة، والاسم الكامل في title. */
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* سطر المدير المباشر: يجيب عن «من مديري المباشر؟».

   أصناف مستقلة عن «app-tenant-context» عن قصد، لا لاختلاف الشكل بل لاختلاف
   المعنى: ذاك الصنف يقول «هذا الحساب داخل منشأة»، وحساب المنصة يجب ألا يحمله
   بأي حال — وهناك اختبار قائم يحرس ذلك المعنى تحديدًا.

   وهنا يفترق الشكل أيضًا. كان الصفّان متطابقي الحجم حين كانا عنصرين مستقلين
   متجاورين في الشريط؛ أما الآن فهذا السطر سطرٌ ثالث داخل كتلة الهوية، تحت
   الاسم والدور، فيأخذ نحو نصف بروزه السابق: أصغر خطًّا، وأخف وزنًا، وبلون
   ثانوي. يُقرأ عند الحاجة ولا ينازع الاسم. */
.app-reporting-line {
    display: flex;
    /* يتقلّص ولا يزاحم، تمامًا كسياق المنشأة. */
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    align-items: baseline;
    gap: 4px;
}

.app-reporting-line-label {
    flex: 0 0 auto;
    color: var(--muted-ink, #5b6b62);
    font-size: 10.5px;
    font-weight: 500;
}

.app-reporting-line-name {
    overflow: hidden;
    min-width: 0;
    color: var(--muted-ink, #5b6b62);
    font-size: 11px;
    font-weight: 600;
    /* الأسماء العربية الطويلة تُقتطع بنظافة، والاسم الكامل في title. */
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* سطر الشاشات الضيقة: مخفي افتراضيًا لأن الشريط العلوي يتكفّل به هناك. */
.app-tenant-bar {
    display: none;
}

/* Mobile menu (native <details>) — shown only at the mobile breakpoint */

.app-menu {
    display: none;
}

@media (max-width: 960px) {
    .app-shell {
        flex-direction: column;
        min-height: 0;
    }

    /* The sidebar becomes a bar across the top; there is no column to paint. */
    .app-shell::before {
        display: none;
    }

    .app-sidebar {
        z-index: 40;
        flex-basis: auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        height: auto;
        min-height: 60px;
        overflow: visible;
        padding: 8px 16px;
        border-bottom: 1px solid var(--border);
        border-left: 0;
    }

    .app-brand {
        min-width: 0;
        gap: 10px;
        margin-bottom: 0;
        padding: 0;
        border-bottom: 0;
        font-size: 15px;
    }

    .app-brand img {
        width: 36px;
        height: 36px;
    }

    .app-nav-desktop,
    .topbar {
        display: none;
    }

    /* الشريط العلوي يختفي هنا، والمنشأة يجب أن تبقى ظاهرة دون فتح القائمة:
       سطر سياق مضغوط بعرض الشاشة تحت الترويسة مباشرة. */
    .app-tenant-bar {
        display: flex;
        gap: 8px;
        width: 100%;
        min-width: 0;
        padding: 7px 16px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }

    .app-menu {
        display: block;
    }

    .app-menu-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 7px 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--brand-green);
        font-size: 13px;
        font-weight: 700;
        list-style: none;
        cursor: pointer;
        user-select: none;
        transition: background-color var(--motion), border-color var(--motion);
    }

    .app-menu-trigger::-webkit-details-marker {
        display: none;
    }

    .app-menu-trigger svg {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }

    .app-menu-trigger:hover,
    .app-menu[open] .app-menu-trigger {
        border-color: var(--border-strong);
        background: var(--brand-green-soft);
    }

    .app-menu-trigger:focus-visible {
        outline: 2px solid var(--brand-green);
        outline-offset: 2px;
    }

    .app-menu-icon-close,
    .app-menu[open] .app-menu-icon-open {
        display: none;
    }

    .app-menu[open] .app-menu-icon-close {
        display: block;
    }

    .app-menu-panel {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: grid;
        gap: 14px;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        padding: 12px 16px 16px;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
        box-shadow: 0 14px 28px rgba(13, 59, 46, 0.08);
    }

    .app-menu-panel .app-nav-link {
        min-height: 46px;
    }

    .app-menu-account {
        display: grid;
        gap: 12px;
        padding-top: 14px;
        border-top: 1px solid var(--border);
    }

    /* نفس السطرين، فالهوية واحدة على العرضين. */
    .app-menu-account .app-user {
        gap: 2px;
        padding: 0 12px;
    }

    /* لوحة القائمة ضيقة: السطر الثاني يبقى سطرًا واحدًا دلاليًا، لكنه يلتفّ
       بصريًا عند الحاجة بدل أن يقتطع اسم المدير كاملًا. الفاصل يختفي متى
       انتقل المدير المباشر إلى سطر بصري جديد. */
    .app-menu-account .app-user-line {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .app-menu-account .app-reporting-line {
        flex-wrap: wrap;
    }

    .app-menu-account .app-reporting-line-name {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .app-menu-account .app-user strong {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .app-menu-account form {
        margin: 0;
    }

    .app-menu-account .logout-button {
        justify-content: center;
        width: 100%;
        min-height: 44px;
    }
}

/* Visit Report Simple — application surfaces */

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 18px;
}

/* In-app page subtitles sit close to the title (auth cards keep .subtitle). */
.page-heading .subtitle {
    margin: 4px 0 0;
}

.primary-link,
.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
}

.primary-link {
    background: #0D3B2E;
    color: #ffffff;
}

/*
 * Secondary actions are intrinsically sized on desktop, just like primary
 * actions. The base button element is full-width for simple forms, so the
 * shared secondary primitive must explicitly opt back out. The existing
 * narrow-screen contract below still expands both action types to 100%.
 */
.secondary-button {
    width: auto;
    border: 1px solid #ccd5d1;
    background: #ffffff;
    color: #0D3B2E;
}

/*
 * The record form's rhythm.
 *
 * This is a comfortable full-size data-entry surface and deliberately stays out
 * of the 38px administrative compact contract: the controls, the textarea rows
 * and the type scale are unchanged. What is reduced here is whitespace only —
 * the padding, the gaps and the heading margins that compounded into a page much
 * taller than the writing it holds.
 */
.visit-form {
    display: grid;
    gap: 12px;
}

.form-section {
    padding: var(--admin-panel-pad-compact) 14px;
    border: 1px solid #e1e6e3;
    border-radius: 16px;
    background: #ffffff;
}

/*
 * A section title sits above the reference table head (13px) and well below the
 * 19px it used to be, so a section still reads as a section without making the
 * card feel oversized.
 */
.form-section h2 {
    margin: 0 0 10px;
    font-size: 15px;
}

/* A sub-section inside a card — the visit's attendees — is quieter again. */
.form-section h3 {
    margin: 0 0 2px;
    font-size: 13.5px;
    font-weight: 800;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    background: #ffffff;
    color: inherit;
    font: inherit;
    resize: vertical;
}

textarea:focus {
    outline: 2px solid var(--control-focus-ring);
    border-color: var(--control-focus-border);
}

.optional {
    color: #8a9691;
    font-size: 12px;
    font-weight: 400;
}

.field-help {
    display: block;
    margin-top: 7px;
    color: #7a8681;
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    padding-bottom: 8px;
}

.primary-button {
    width: auto;
    min-width: 170px;
    padding-inline: 24px;
}

.success-alert {
    margin-bottom: 14px;
    padding: 13px 15px;
    border: 1px solid #bcd8ca;
    border-radius: 10px;
    background: #f0f8f4;
    color: #245b45;
}

.alert ul {
    margin-bottom: 0;
}

@media (max-width: 760px) {
    .page-heading {
        flex-direction: column;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-section {
        padding: 18px 14px;
    }

    .form-actions {
        flex-direction: column;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
    }
}

/* Mobile data cards — shared cell label (table cells carrying data-label) */

@media (max-width: 640px) {
    td[data-label]::before,
    th[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        direction: rtl;
        text-align: right;
        white-space: normal;
    }
}

/* Filter panels — records + audit — canonical */

.records-filters,
.audit-filters {
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid #e1e6e3;
    border-radius: 16px;
    background: #ffffff;
}

.records-filters {
    margin-bottom: 14px;
}

/* The field area of a filter panel is a grid. .filter-panel-fields is the
   canonical name; the two older names are the original consumers and keep
   working. Without this, a panel using only the canonical name laid its fields
   out as plain blocks and a lone select stretched the full page width. */
.filter-panel-fields,
.records-filter-fields,
.audit-filter-fields {
    display: grid;
    gap: 14px 16px;
    align-items: end;
}

/*
 * The records filter grid.
 *
 * It used to name a fixed column count — three, or four once the employee
 * selector appeared — and the field count has since grown past both. Nine fields
 * in four columns is four, four and one, which is exactly the isolated الموظف
 * and the stranded search button the review reported: a fixed count cannot stay
 * correct while the number of filters a role sees changes.
 *
 * The track count is derived from the available width instead, so the fields
 * distribute evenly for every role and reflow without stranding one. The search
 * action is a cell in the same grid, so it fills the row rather than opening a
 * new one.
 */
.records-filter-fields {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.records-filter-fields .records-filter-actions {
    align-self: end;
}

/* The inline toolbar row model — the other shape a filter panel takes — is the
   opt-in .filter-panel--inline modifier, declared with the compact contract
   below because it is only a row on a desktop width. */

.audit-filter-fields {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1.35fr)
        minmax(0, 1.15fr);
}

.records-filter-fields .field,
.audit-filter-fields .field {
    min-width: 0;
    margin-bottom: 0;
}

.records-filter-fields input,
.records-filter-fields select,
.audit-filter-fields input,
.audit-filter-fields select {
    width: 100%;
    min-width: 0;
}

/*
 * THE select CONTRACT — a global element owner, exactly like input and textarea.
 *
 * This used to be an opt-in list of five selectors, and that was the defect: a
 * new surface could correctly opt into the compact DENSITY contract below and
 * still miss the APPEARANCE contract, because appearance was keyed on an
 * enumerated ancestor list instead of on the element. A select that missed it
 * fell all the way back to the native control and brought the browser's own
 * identity with it, including a strong blue focus ring that belongs to no part
 * of this application.
 *
 * Owning the element closes that gap permanently: any select added anywhere, on
 * any page, now sits on the same baseline as the inputs beside it and carries
 * the application's gold focus treatment. The closed control is ours; the native
 * popup is deliberately left alone.
 *
 * .admin-select stays as the named entry a surface can still reference, and it
 * is now an alias rather than the source of the appearance.
 *
 * Appearance only — height and type scale come from the density contracts, so
 * this rule serves both the full-size and the compact surfaces.
 */
select,
.admin-select {
    width: 100%;
    min-height: var(--control-h);
    padding: 10px 12px 10px 38px;
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2362726b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: left 14px center;
    background-repeat: no-repeat;
    background-size: 12px 8px;
    color: inherit;
    font: inherit;
    direction: rtl;
    text-align: right;
    text-overflow: ellipsis;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

select:focus,
.admin-select:focus {
    outline: 2px solid var(--control-focus-ring);
    border-color: var(--control-focus-border);
}

select:disabled {
    background-color: var(--status-neutral-bg);
    color: var(--muted);
    cursor: not-allowed;
}

.records-filter-actions,
.audit-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.records-filter-actions .primary-button,
.audit-filter-actions .primary-button {
    min-width: 120px;
}

.records-filter-actions .secondary-button,
.audit-filter-actions .secondary-button {
    min-height: 46px;
}

@media (max-width: 1180px) {
    .audit-filter-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .records-filters,
    .audit-filters {
        padding: 16px;
    }

    .records-filter-fields,
    .audit-filter-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .records-filter-actions,
    .audit-filter-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/*
 * The create bar is a grid at every width. Below 641px it has one column and its
 * fields keep their own comfortable spacing and full-size controls, so there is
 * nothing to undo for a phone.
 */
.admin-create-bar {
    display: grid;
}

/*
 * CANONICAL ADMINISTRATIVE DENSITY — the compact control contract.
 *
 * One owner for how dense an administrative surface is. Three surfaces opt in,
 * each by an explicit class, and each shares these values rather than restating
 * them:
 *
 *   .filter-panel--compact   a search / filter toolbar
 *   .admin-form--compact     a small master-data maintenance form
 *   .admin-table--compact    an administrative table and its inline controls
 *   .visit-form              the record form (visit and meeting)
 *
 * A page keeps only what is genuinely its own — the column template of its own
 * fields, its own grid — and never redeclares a height, a type size, a padding or
 * a gap. Every value comes from the tokens in :root.
 *
 * Written entirely inside min-width: 641px rather than as a desktop rule plus a
 * mobile undo, so a phone is never touched: it keeps the shared 46px control
 * contract, the full type size and the stacked full-width buttons.
 *
 * The record form was deliberately excluded from this contract until the owner
 * reviewed both surfaces side by side and asked for the opposite: the accepted
 * Records listing is now the binding density reference for the New Visit and New
 * Meeting forms, and that listing is built from exactly these tokens — 38px
 * controls, a 12.5px control type size, 11.5px labels. So the record form opts
 * in here rather than growing a second set of numbers that merely resemble the
 * reference. The user form, branding uploads and login are untouched and keep
 * the comfortable full size.
 *
 * Still written entirely inside min-width: 641px, so a phone keeps the 46px
 * touch target and the full type size.
 */
@media (min-width: 641px) {
    /* --- each contract's own chrome --- */

    .filter-panel--compact {
        gap: var(--admin-panel-gap-compact);
        padding: var(--admin-panel-pad-compact);
    }

    .filter-panel--compact .filter-panel-fields {
        gap: var(--admin-fields-row-gap-compact) var(--admin-fields-column-gap-compact);
    }

    /* A maintenance form's rows carry their own spacing, so the field's own
       bottom margin would only double it. */
    .admin-form--compact .form-grid {
        gap: var(--admin-fields-row-gap-compact) var(--admin-fields-column-gap-compact);
    }

    .admin-form--compact .field {
        margin-bottom: 0;
    }

    /* --- the shared control contract --- */

    .filter-panel--compact .filter-panel-fields label,
    .filter-panel--compact > .field label,
    .admin-form--compact label,
    .visit-form label {
        margin-bottom: 3px;
        font-size: var(--admin-label-font-compact);
    }

    .filter-panel--compact .filter-panel-fields input,
    .filter-panel--compact .filter-panel-fields select,
    .filter-panel--compact > .field input,
    .filter-panel--compact > .field select,
    .admin-form--compact input,
    .admin-form--compact select,
    .admin-table--compact input,
    .admin-table--compact select,
    .team-filter select,
    .team-action-panel .field input,
    .team-action-panel .field select,
    .visit-form input,
    .visit-form select {
        min-height: var(--admin-control-h-compact);
        font-size: var(--admin-control-font-compact);
    }

    /* A textarea takes the type size but keeps its own comfortable box: the
       record form is where the long-form writing happens. */
    .visit-form textarea {
        padding: 8px 10px;
        font-size: var(--admin-control-font-compact);
    }

    /* Field rhythm and card spacing from the same tokens the reference uses. */
    .visit-form .field {
        margin-bottom: var(--admin-fields-row-gap-compact);
    }

    .visit-form {
        gap: var(--admin-fields-row-gap-compact);
    }

    .visit-form .form-grid {
        gap: 0 var(--admin-fields-column-gap-compact);
    }

    .visit-form .field-help,
    .visit-form .section-heading-row p {
        font-size: 11px;
    }

    .visit-form .form-actions {
        gap: var(--admin-fields-column-gap-compact);
        padding-bottom: 0;
    }

    .filter-panel--compact .filter-panel-fields input,
    .filter-panel--compact > .field input,
    .admin-form--compact input,
    .admin-table--compact input,
    .team-action-panel .field input,
    .visit-form input:not([type="file"]) {
        padding: 7px 10px;
    }

    /* A select keeps its own arrow gutter, just proportionally tighter. */
    .filter-panel--compact .filter-panel-fields select,
    .filter-panel--compact > .field select,
    .admin-form--compact select,
    .admin-table--compact select,
    .team-filter select,
    .team-action-panel .field select,
    .visit-form select {
        padding: 7px 10px 7px 32px;
        background-position: left 11px center;
    }

    /*
     * A submit button belongs to the grid it sits in rather than floating in a
     * band of its own: the same height as the fields, and no wider than it needs.
     */
    .filter-panel--compact .filter-panel-actions .primary-button,
    .filter-panel--compact .filter-panel-actions .secondary-button,
    .admin-form--compact .primary-button,
    .admin-form--compact .secondary-button,
    .admin-table--compact .primary-button,
    .admin-table--compact .secondary-button {
        min-width: 96px;
        block-size: var(--admin-control-h-compact);
        min-height: var(--admin-control-h-compact);
        padding-block: 0;
        padding-inline: 18px;
        font-size: var(--admin-control-font-compact);
    }

    /*
     * The record form's actions take the same height and type as the reference,
     * but keep their own widths: a repeatable row's add and remove sit beside
     * the fields rather than in a toolbar, and the save action stays wide.
     */
    .visit-form .primary-button,
    .visit-form .secondary-button,
    .visit-form .small-add-button,
    .visit-form .row-remove-button {
        min-height: var(--admin-control-h-compact);
        font-size: var(--admin-control-font-compact);
    }

    /* The picker button sits inside a 38px control, so it takes a little less. */
    .visit-form input[type="file"] {
        padding: 5px 9px;
        font-size: var(--admin-control-font-compact);
    }

    .visit-form input[type="file"]::file-selector-button {
        min-height: 26px;
        padding: 3px 12px;
    }

    /* --- an administrative table's own rhythm --- */

    .admin-table--compact th,
    .admin-table--compact td {
        padding: var(--admin-table-cell-pad-compact);
    }

    .admin-table--compact th {
        font-size: var(--admin-table-head-font-compact);
    }

    .admin-table--compact td {
        font-size: var(--admin-table-font-compact);
    }

    /*
     * A badge inside a compact table is scaled to that table's type. Colours,
     * variants and meaning are untouched, and a badge on a record page keeps its
     * full size.
     */
    .admin-table--compact .record-type-badge,
    .admin-table--compact .approval-status-badge {
        min-height: 21px;
        padding: 2px 7px;
        font-size: 10.5px;
    }

    /*
     * A compact administrative create bar: the fields and the action on one row.
     *
     * This is the row MODEL only — how the cells align and how far apart they sit.
     * The column template belongs to the page, because only the page knows how
     * much room its own fields deserve. Control height and typography come from
     * the compact control contract above, so nothing is restated here.
     *
     * align-items: end is what puts the action on the same baseline as the
     * controls while the labels stay above them.
     */
    .admin-create-bar {
        align-items: end;
        gap: var(--admin-fields-row-gap-compact) var(--admin-fields-column-gap-compact);
    }

    .admin-create-bar-action {
        display: flex;
    }

    /*
     * A small maintenance section is a panel, not a form page.
     */
    .form-section--compact {
        padding: 14px 16px;
        margin-bottom: var(--admin-panel-gap-compact);
    }

    .form-section--compact h2 {
        margin-bottom: 10px;
        font-size: 16px;
    }
}

/*
 * CANONICAL INLINE FILTER LAYOUT — the toolbar row model.
 *
 * A filter panel takes one of two shapes. A panel with many fields is a grid and
 * lays them out through .filter-panel-fields; a panel with a small number of
 * fields is a single row, with the fields at their natural width and the actions
 * beside them on the same bottom edge. This modifier owns that second shape, for
 * every surface that has it.
 *
 * It exists because the row model had been written twice: once under the
 * organizations directory's own class and once again, copied, under the account
 * directory's. Two owners of one layout is how the two toolbars drifted apart.
 * Opting in by name — filter-panel filter-panel--compact filter-panel--inline —
 * leaves nothing page-specific to copy.
 *
 * Layout only. Density, control height and typography stay with
 * filter-panel--compact, and the grid surfaces are untouched: nothing here
 * reaches a panel that has not asked for it.
 *
 * Written entirely inside min-width: 641px, like the density contract it pairs
 * with, so a phone is never handed a row it then has to undo: the form stays a
 * block, the fields stack at their own comfortable rhythm, and the shared mobile
 * contract keeps full-size controls and full-width actions. It follows that
 * contract in source order so the row's own column gap refines the compact
 * panel gap when a surface opts into both.
 */
@media (min-width: 641px) {
    .filter-panel--inline {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: var(--admin-fields-row-gap-compact) var(--admin-fields-column-gap-compact);
    }

    /* A field in a row carries no stacked rhythm, and sits at the natural width
       of a compact filter control rather than dividing the panel. */
    .filter-panel--inline > .field {
        flex: 0 1 260px;
        margin: 0;
    }

    .filter-panel--inline .filter-panel-actions {
        display: flex;
        align-items: center;
        gap: var(--admin-panel-gap-compact);
    }
}

/* Visit list */

.list-summary {
    margin-bottom: 12px;
    color: #6d7975;
    font-size: 14px;
}

.table-card {
    overflow: hidden;
    border: 1px solid #e1e6e3;
    border-radius: 16px;
    background: #ffffff;
}

.table-scroll {
    overflow-x: auto;
}

/*
 * The shared administrative table baseline. Three surfaces use it — the records
 * list, the organizations screen and the visit categories screen — so it carries
 * nothing that belongs to only one of them: no fixed layout, no minimum width and
 * no compact scale. Those live on .records-table below.
 */
.visits-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
}

/*
 * A page declares its own kind (`@section('pageClass', 'page--admin-dense')`)
 * and the layout puts that class on the page container, so this is an explicit
 * contract between a view and the stylesheet — nothing is inferred from the DOM.
 *
 * The records listing once took a narrower inset of its own as well, which made
 * it the one page wider than the rest (web screens review 10). Every page now
 * shares .page's width and inset; a wide table scrolls inside it.
 */
@media (min-width: 641px) {
    /*
     * Page-level spacing for a dense administrative screen: less dead space, the
     * same hierarchy. The 26px page title is deliberately untouched — this reduces
     * whitespace, it does not shrink the page's identity.
     *
     * Shared, so a second dense screen opts in rather than restating it.
     */
    .page--admin-dense .page-heading {
        gap: 16px;
        margin-bottom: 12px;
    }

    .page--admin-dense .page-heading h1 {
        /* The subtitle supplies its own offset; this 8px was doubling it. */
        margin-bottom: 0;
    }

    .page--admin-dense .page-heading .subtitle {
        margin-top: 3px;
        font-size: var(--admin-control-font-compact);
    }

    .page--admin-dense .page-heading .primary-link {
        min-height: 36px;
        padding: 6px 14px;
        font-size: var(--admin-control-font-compact);
    }

    /* Sections and panels sit close to the data they belong to. */
    .page--admin-dense .filter-panel {
        margin-bottom: var(--admin-panel-gap-compact);
    }

    .page--admin-dense .list-summary {
        margin-bottom: 6px;
        font-size: var(--admin-control-font-compact);
    }

    .page--admin-dense .success-alert,
    .page--admin-dense .alert {
        margin-bottom: var(--admin-panel-gap-compact);
    }
}

.visits-table th,
.visits-table td {
    padding: 13px 12px;
    border-bottom: 1px solid #edf0ee;
    vertical-align: middle;
}

.visits-table th {
    background: #f8faf8;
    color: #41534d;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

/* Long text (subject, entity, city, employee, category) wraps at word
   boundaries instead of widening the table. */
.visits-table td {
    color: #263b34;
    font-size: 14px;
    overflow-wrap: break-word;
}

/*
 * The records listing's own table: ten named columns, the compact administrative
 * scale, and a fixed layout that only makes sense because this table declares a
 * <colgroup>. Every one of these decisions used to sit on .visits-table, where the
 * organizations and visit-categories screens inherited it without asking; they
 * belong here, to the one surface that made them.
 *
 * The whole contract is desktop-only, so the card layout below 641px needs no
 * reset: there is nothing to undo.
 */
@media (min-width: 641px) {
    .records-table {
        /*
         * Fixed layout is what makes the columns hold the widths declared below.
         * Without it the browser redistributes them per page of data, so one long
         * subject squeezes the entity and employee columns and every row grows
         * several lines tall.
         *
         * The min-width keeps an administrative rhythm instead of crushing ten
         * columns: .table-scroll then offers a little horizontal scroll on
         * narrower screens. 1150px is deliberate — with this page's reclaimed
         * inset the content area is min(viewport - 224px sidebar, 1400px) - 28px,
         * which is 1188px on a 1440px laptop and 1284px at 1536px, so the whole
         * table fits on both with no scroll. Scrolling is the fallback below
         * ~1374px, not the normal state.
         */
        min-width: 1150px;
        table-layout: fixed;
    }

    /*
     * Ten (or eleven) columns in about 1190px only fit with a tighter inline
     * padding than the shared compact 9px: 6px a side hands back 66px across
     * the row, which is what lets every short column hold its value whole.
     * The vertical rhythm is the shared one.
     */
    .records-table th,
    .records-table td {
        padding-inline: 6px;
    }

    /*
     * Column rhythm: the subject gets the most room, the entity and the employee
     * a comfortable middle, and everything whose content has a known short shape
     * gets just enough to stay on one line. Percentages summing to 100 rather
     * than pixels, so the table still breathes on a wide screen.
     *
     * The numbers come from measuring the rendered table (cell padding
     * included), and they are sized for the 1150px floor so they hold at every
     * width the table is shown at:
     *
     *   reference code   ~128px  a full legacy REDF- reference      11.5%
     *   date             ~99px   «7 أكتوبر 2026»                    8.5%
     *   type badge       ~94px   «محضر اجتماع»                      8%
     *   status badge     ~106px  «بانتظار الاعتماد»                  9%
     *   city             ~109px  «مكة المكرمة», «المدينة المنورة»     9%
     *   category         ~98px   its header «تصنيف الزيارة»          8.5%
     *   open             ~64px   the «التقرير» / «المحضر» button     5.5%
     *
     * That is 60%. An earlier set gave the city 5% (59px) and the category
     * 6%, so «الرياض» read «الريا…» and «مكة المكرمة» «مكـ…»; the type, status
     * and date ran a few pixels past their columns; and the open button, wider
     * than its 5%, ran past the last column and was cut by the card. Short
     * values with a known shape are the ones that must never be cut.
     *
     * The remaining 40% goes to the free-text columns, which truncate with
     * the full value in their title: subject, entity, employee — and the
     * client below. Nothing was widened to consume space.
     */
    .records-table .visits-col-code { width: 11.5%; }
    .records-table .visits-col-date { width: 8.5%; }
    .records-table .visits-col-subject { width: 20%; }
    .records-table .visits-col-type { width: 8%; }
    .records-table .visits-col-status { width: 9%; }
    .records-table .visits-col-entity { width: 10.5%; }
    .records-table .visits-col-city { width: 9%; }
    .records-table .visits-col-employee { width: 9.5%; }
    .records-table .visits-col-kind { width: 8.5%; }
    .records-table .visits-col-open { width: 5.5%; }

    /*
     * The same rhythm with «العميل», which only the system administrator reads.
     * The client takes its 8% only from the free-text columns that truncate
     * anyway — subject, entity and employee — never from a short column, so
     * the set still sums to 100 and a city or a category reads the same on
     * both tables.
     */
    .records-table--with-client .visits-col-subject { width: 15.5%; }
    .records-table--with-client .visits-col-entity { width: 9%; }
    .records-table--with-client .visits-col-employee { width: 7.5%; }
    .records-table--with-client .visits-col-client { width: 8%; }

}

/* Naturally short values stay on one line. */
.visits-cell-type,
.visits-cell-status,
.visits-cell-code,
.visits-cell-date,
.visits-cell-open {
    white-space: nowrap;
}

/*
 * Canonical one-line cell value.
 *
 * A dense administrative row's height must never depend on its content, so a long
 * value truncates with an ellipsis instead of wrapping. It is applied to an inner
 * span, never to the cell itself: a <td> that stops being a table-cell would take
 * the whole row out of the table layout. Nothing is shortened at the source — the
 * element carries the full value in its title, so a truncated value stays readable
 * on hover and reachable by assistive technology.
 *
 * Desktop only: a mobile card shows every value in full, so there is nothing to
 * undo below 641px.
 */
@media (min-width: 641px) {
    .cell-truncate {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 1.5;
    }
}

.visits-table tbody tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 640px) {
    .table-card {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .table-scroll {
        overflow-x: visible;
    }

    .visits-table {
        display: block;
    }

    .visits-table thead {
        display: none;
    }

    .visits-table tbody {
        display: grid;
        gap: 10px;
    }

    .visits-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* The two badges lead the card, the subject takes its full width, and the
           action closes it on a row of its own so it is comfortable to tap. */
        grid-template-areas:
            "type status"
            "code date"
            "subject subject"
            "entity city"
            "employee kind"
            "open open";
        gap: 12px 16px;
        padding: 14px 16px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
    }

    .visits-table td {
        display: block;
        min-width: 0;
        padding: 0;
        border-bottom: 0;
        font-size: 14px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .visits-cell-type {
        grid-area: type;
        align-self: center;
    }

    .visits-cell-status {
        grid-area: status;
        align-self: center;
        justify-self: end;
    }

    .visits-cell-open {
        grid-area: open;
        align-self: center;
        justify-self: start;
    }

    .visits-cell-code {
        grid-area: code;
        font-weight: 700;
    }

    .visits-cell-date {
        grid-area: date;
    }

    .visits-cell-subject {
        grid-area: subject;
        font-weight: 700;
    }

    .visits-cell-entity {
        grid-area: entity;
    }

    .visits-cell-city {
        grid-area: city;
    }

    .visits-cell-employee {
        grid-area: employee;
    }

    .visits-cell-kind {
        grid-area: kind;
    }

    /* «العميل» gets its own full-width line on the card. */
    .records-table--with-client tr {
        grid-template-areas:
            "type status"
            "code date"
            "subject subject"
            "client client"
            "entity city"
            "employee kind"
            "open open";
    }

    .visits-cell-client {
        grid-area: client;
    }

    .visits-cell-open .table-link {
        display: inline-flex;
        min-height: 38px;
        align-items: center;
        padding: 0 14px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-size: 13px;
    }
}

/* Visit / meeting documentation selector */

/*
 * THE RECORD TYPE SELECTOR.
 *
 * Two things were wrong with it. It was built at a scale the rest of the form no
 * longer uses — an 82px choice with a 16px title, larger than the section
 * heading above it — and it said nothing about which type was which: both
 * choices were the same green on the same white, with every colour written out
 * as a literal.
 *
 * It reads the semantic tone contract now, the same one the record-type badges
 * on the Records listing read, so a visit choice carries the visit identity and
 * a meeting choice the meeting identity by construction rather than by anybody
 * matching hues. Not a single colour is named in this block.
 *
 * The tone is used as a signal, not as decoration. An unselected choice stays on
 * the ordinary surface and shows its type only as a thin inline-start edge, so
 * two large coloured blocks never sit at the top of the page. Selecting one
 * brings in the subtle tint, the full edge and the title colour of that type —
 * which is what makes the choice obvious, and obvious about *which* type it is.
 */
.record-choice-section {
    border-color: var(--border);
}

.record-type-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--admin-fields-row-gap-compact);
}

.record-type-option {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.record-type-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.record-type-option > span {
    display: grid;
    gap: 2px;
    padding: 9px 12px;
    border: 1px solid var(--control-border);
    /* The type shows here while unselected: a signal, not a fill. */
    border-inline-start: 3px solid var(--semantic-border);
    border-radius: var(--control-radius);
    background: var(--surface);
    transition: background-color var(--motion), border-color var(--motion);
}

.record-type-option strong {
    color: var(--text);
    font-size: var(--admin-control-font-compact);
    font-weight: 800;
}

.record-type-option small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.record-type-option:hover > span {
    border-color: var(--border-strong);
    border-inline-start-color: var(--semantic-border);
}

/* Selected: the chosen type wears its own identity. */
.record-type-option input:checked + span {
    border-color: var(--semantic-border);
    background: var(--semantic-bg);
}

.record-type-option input:checked + span strong {
    color: var(--semantic-text);
}

/* Keyboard selection stays visible; the radio itself is off-screen. */
.record-type-option input:focus-visible + span {
    outline: 2px solid var(--control-focus-border);
    outline-offset: 2px;
}

.meeting-author-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.meeting-author-box > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.meeting-author-box span,
.meeting-author-box small {
    color: #74817b;
}

.meeting-author-box strong {
    color: #0D3B2E;
}

.section-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.section-heading-row h2,
.section-heading-row h3 {
    margin-bottom: 3px;
}

.section-heading-row p {
    margin: 0;
    color: #7a8681;
    font-size: 13px;
}

/*
 * The repeatable-row actions.
 *
 * One secondary owner and one destructive owner, shared by every repeatable
 * section — attendees, discussion points, decisions and responsibilities — so no
 * subsection carries a button design of its own.
 *
 * Both were writing their colours out as literals (#bfcfc7 / #0D3B2E and
 * #e1c9c5 / #8a4038) and sitting at different heights, 38px against 42px, which
 * made two controls that belong on the same row look unrelated. They read the
 * canonical control and status tokens now, and share one height: the destructive
 * one carries the application's danger identity rather than an approximation of
 * it, and the secondary one the brand green.
 */
.small-add-button {
    width: auto;
    min-height: 40px;
    padding: 7px 14px;
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    background: var(--surface);
    color: var(--brand-green);
    white-space: nowrap;
    transition: background-color var(--motion), border-color var(--motion);
}

.small-add-button:hover {
    border-color: var(--border-strong);
    background: var(--brand-green-soft);
}

.small-add-button:focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: 2px;
}

.repeat-container {
    display: grid;
    gap: var(--admin-fields-row-gap-compact);
}

.repeat-row {
    display: grid;
    gap: var(--admin-fields-column-gap-compact);
    align-items: end;
    padding: 9px 10px;
    border: 1px solid #e3e8e5;
    border-radius: 11px;
    background: #fafbf9;
}

.repeat-row .field {
    margin-bottom: 0;
}

.attendee-row {
    grid-template-columns:
        minmax(150px, 1fr)
        minmax(150px, 1fr)
        minmax(150px, 1fr)
        auto;
}

.single-value-row {
    grid-template-columns: 1fr auto;
    padding: 10px;
}

.responsibility-row {
    grid-template-columns:
        minmax(220px, 2fr)
        minmax(140px, 1fr)
        minmax(140px, 1fr)
        minmax(150px, 1fr)
        auto;
}

.row-remove-button {
    width: auto;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--status-danger-border);
    border-radius: var(--control-radius);
    background: var(--surface);
    color: var(--status-danger-text);
    white-space: nowrap;
    transition: background-color var(--motion), border-color var(--motion);
}

.row-remove-button:hover {
    border-color: var(--status-danger-text);
    background: var(--status-danger-bg);
}

.row-remove-button:focus-visible {
    outline: 2px solid var(--status-danger-text);
    outline-offset: 2px;
}

.compact-repeat .field {
    width: 100%;
}

/* The hidden attribute always hides, whatever display a component's own
   class sets (record panels, the «المنشأة» field, the «يعمل أيضًا في»
   options). */
[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .attendee-row,
    .responsibility-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .row-remove-button {
        justify-self: stretch;
    }
}

@media (max-width: 600px) {
    .record-type-options {
        grid-template-columns: 1fr;
    }

    .meeting-author-box,
    .section-heading-row {
        flex-direction: column;
        align-items: stretch;
    }

    .small-add-button {
        width: 100%;
    }

    .attendee-row,
    .responsibility-row,
    .single-value-row {
        grid-template-columns: 1fr;
    }
}

/* Existing attachments on edit — mark for removal on save — canonical */

.attachment-remove-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.attachment-remove-list li {
    position: relative;
}

/* Visually hidden but still focusable and announced */
.attachment-remove-input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.attachment-remove-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 5px 12px 5px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: background-color var(--motion), border-color var(--motion);
}

.attachment-remove-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.attachment-remove-status {
    display: none;
    flex: 0 0 auto;
    color: var(--status-danger-text);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.attachment-remove-toggle {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--motion), border-color var(--motion), color var(--motion);
}

.attachment-remove-toggle:hover {
    border-color: var(--status-danger-border);
    background: var(--status-danger-bg);
    color: var(--status-danger-text);
}

.attachment-remove-input:focus-visible + .attachment-remove-row .attachment-remove-toggle {
    outline: 2px solid var(--brand-green);
    outline-offset: 2px;
}

.attachment-remove-input:checked + .attachment-remove-row {
    border-color: var(--status-danger-border);
    background: var(--status-danger-bg);
}

.attachment-remove-input:checked + .attachment-remove-row .attachment-remove-status {
    display: inline;
}

.attachment-remove-input:checked + .attachment-remove-row .attachment-remove-toggle {
    border-color: var(--status-danger-text);
    background: var(--status-danger-text);
    color: #ffffff;
}

@media (max-width: 600px) {
    .attachment-remove-row {
        flex-wrap: wrap;
    }

    .attachment-remove-name {
        flex-basis: calc(100% - 42px);
    }

    .attachment-remove-status {
        order: 1;
        flex-basis: 100%;
        white-space: normal;
    }
}

/* Record type identity */

.record-type-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

/*
 * THE SEMANTIC TONE CONTRACT — one owner for what a state looks like.
 *
 * A semantic state has one visual identity in this application, and every
 * surface that expresses that state reads it from here. Each tone resolves to
 * the same three things — a subtle surface, a text colour and an edge — so a
 * record badge on the listing, an organization badge on the directory and a
 * Command Center metric are the same green, the same amber and the same red by
 * construction rather than by anybody matching hues.
 *
 * This block assigns the tone. The consumers below read `--semantic-bg`,
 * `--semantic-text` and `--semantic-border` and decide for themselves how much
 * of it to show: a badge is entirely its tone, while a dashboard metric keeps
 * the calm card proportions and carries the tone in its surface, its number and
 * its edge. Neither restates a colour.
 *
 * Adding a surface to a tone is a one-line change here. Approximating a colour
 * anywhere else is the thing this exists to prevent.
 */
.approval-status-badge--approved,
.organization-access-badge--active,
.command-center-card--success,
.command-center-metric--success,
.command-center-state--success {
    --semantic-bg: var(--status-success-bg);
    --semantic-text: var(--status-success-text);
    --semantic-border: var(--status-success-border);
}

.approval-status-badge--awaiting-approval,
.organization-access-badge--near-expiry,
.organization-access-badge--transitional,
.command-center-card--attention,
.command-center-metric--attention {
    --semantic-bg: var(--status-attention-bg);
    --semantic-text: var(--status-attention-text);
    --semantic-border: var(--status-attention-border);
}

/*
 * منتهية and موقوفة يدويًا deliberately resolve to the same tone: the canonical
 * organization badges already treat them identically, and inventing a
 * distinction here would be exactly the drift this contract prevents.
 */
.approval-status-badge--returned-for-edit,
.organization-access-badge--expired,
.organization-access-badge--manually-disabled,
.organization-access-badge--manually-suspended,
.command-center-card--danger,
.command-center-metric--danger,
.command-center-state--danger {
    --semantic-bg: var(--status-danger-bg);
    --semantic-text: var(--status-danger-text);
    --semantic-border: var(--status-danger-border);
}

/*
 * لم تبدأ خدمتها, and every figure that is information rather than a state.
 */
.approval-status-badge--historical,
.approval-status-badge--unknown,
.organization-access-badge--not-started,
.command-center-card--neutral,
.command-center-metric--neutral {
    --semantic-bg: var(--status-neutral-bg);
    --semantic-text: var(--status-neutral-text);
    --semantic-border: var(--status-neutral-border);
}

/*
 * IDENTITY, NOT STATE (deep test خ9).
 *
 * A record's type and an account's role are categories: they never change with
 * what happens to the record or the account. Painting them in a state tone made
 * «محضر اجتماع» the same amber as «بانتظار الاعتماد» and «زيارة» the same green
 * as «معتمد», so a reader could not tell a kind from a status. Categories read
 * the brand instead, outlined on the surface, while states stay filled with
 * their semantic tone — the filled/outlined split design systems use to keep
 * the two apart.
 */
.record-type-visit,
.record-type-option--visit,
.user-role-badge.platform-manager {
    --semantic-bg: var(--surface);
    --semantic-text: var(--brand-green);
    --semantic-border: var(--brand-green);
}

.record-type-meeting,
.record-type-option--meeting {
    --semantic-bg: var(--surface);
    --semantic-text: var(--brand-gold-deep);
    --semantic-border: var(--brand-gold);
}

/*
 * The canonical record-type badges. The records listing is the reference these
 * colours are defined by; every other surface reads the same tone.
 */
.record-type-visit,
.record-type-meeting {
    background: var(--semantic-bg);
    color: var(--semantic-text);
    border: 1px solid var(--semantic-border);
}

/* Approval workflow — operational UI only, never part of the printed report.
   Hidden in print by the shared .no-print rule. */

.approval-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.approval-status-badge--awaiting-approval,
.approval-status-badge--returned-for-edit,
.approval-status-badge--approved,
.approval-status-badge--historical,
.approval-status-badge--unknown {
    background: var(--semantic-bg);
    color: var(--semantic-text);
    border: 1px solid var(--semantic-border);
}

.approval-panel {
    max-width: 900px;
    margin: 0 auto 14px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.approval-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.approval-panel-title {
    margin: 0;
    font-size: 16px;
}

.approval-panel-routing {
    margin: 9px 0 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.approval-panel-error {
    margin: 11px 0 0;
    padding: 9px 11px;
    border: 1px solid var(--status-danger-border);
    border-radius: var(--radius-sm);
    background: var(--status-danger-bg);
    color: var(--status-danger-text);
    font-size: 12.5px;
}

.approval-return-note {
    margin-top: 13px;
    padding: 12px 13px;
    border: 1px solid var(--status-danger-border);
    border-radius: var(--radius-sm);
    background: var(--status-danger-bg);
}

/* A6: an unreliable device clock is a caution, not a refusal. */
.device-clock-note {
    border-color: var(--status-attention-border);
    background: var(--status-attention-bg);
}

.approval-return-note-title {
    display: block;
    margin-bottom: 6px;
    color: var(--status-danger-text);
    font-size: 12.5px;
}

.approval-return-note-body {
    color: var(--text);
    font-size: 13px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.approval-return-note-meta {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.approval-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.approval-action {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.approval-action .primary-button,
.approval-action .secondary-button {
    width: auto;
    justify-self: start;
}

/* The return note has to be comfortable to write, so its form takes the row. */
.approval-action--return {
    flex: 1 1 320px;
    min-width: 0;
}

.approval-action--return label {
    color: var(--text);
    font-size: 12.5px;
    font-weight: 700;
}

.approval-action--return textarea {
    width: 100%;
    min-height: 74px;
    resize: vertical;
}

.approval-action-note,
.approval-field-hint {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}

.approval-field-error {
    margin: 0;
    color: var(--status-danger-text);
    font-size: 11.5px;
    font-weight: 700;
}

.approval-history {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--border);
}

.approval-history-title {
    margin: 0 0 9px;
    font-size: 13.5px;
}

.approval-history-empty {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.approval-history-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}

.approval-history-item {
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--brand-green-soft);
}

.approval-history-event {
    display: block;
    color: var(--brand-green);
    font-size: 12.5px;
    font-weight: 800;
}

.approval-history-meta {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.approval-history-note {
    margin-top: 6px;
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .approval-panel {
        padding: 14px 13px;
    }

    .approval-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .approval-action--return {
        flex-basis: auto;
    }

    /* Match the mobile rule the shared buttons already follow. */
    .approval-action .primary-button,
    .approval-action .secondary-button {
        width: 100%;
        justify-self: stretch;
    }
}

/* Visit report */

.table-link {
    color: #0D3B2E;
    font-weight: 800;
    text-decoration: none;
}

.table-link:hover {
    text-decoration: underline;
}

.report-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto 14px;
}

.report-toolbar .primary-button,
.report-toolbar .secondary-button {
    width: auto;
}

.report-template-switch {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid #dce3df;
    border-radius: 10px;
    background: #ffffff;
}

.report-template-switch a {
    padding: 7px 14px;
    border-radius: 7px;
    color: #596963;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.report-template-switch a.is-active {
    background: #0D3B2E;
    color: #ffffff;
}

.visit-report {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 22px 16px;
    border: 1px solid #d8e0dc;
    border-top: 4px solid #0D3B2E;
    border-radius: 12px;
    background: #ffffff;
}

.report-masthead {
    margin: 0 0 10px;
    padding: 0 0 9px;
    border-bottom: 2px solid #C79A2E;
}

.report-masthead-grid {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    direction: ltr;
}

.report-masthead-grid td {
    padding: 0;
    border: 0;
}

.report-brand-cell {
    vertical-align: middle;
    text-align: left;
}

.report-heading-cell {
    vertical-align: middle;
    direction: rtl;
    text-align: right;
}

.report-heading h1 {
    margin: 0 0 2px;
    color: #0D3B2E;
    font-size: 20px;
}

.report-number {
    color: #75817c;
    font-size: 11px;
}

.report-number strong {
    color: #263b34;
}

/* م11: an unapproved record says so on every copy (Visit::unapprovedMark). */
.report-unapproved-mark {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 10px;
    border: 1.5px solid #b42318;
    border-radius: 4px;
    color: #b42318;
    font-size: 12px;
    font-weight: 700;
}

.report-brand-window {
    display: flex;
    /* الصندوق والنافذة يأتيان من ReportLogoSlot حسب شكل الشعار نفسه،
       فالشعار العريض والشعار المربّع لا يتقاسمان صندوقًا واحدًا. */
    flex: 0 0 var(--report-logo-window-width, 270px);
    width: var(--report-logo-window-width, 270px);
    height: var(--report-logo-window-height, 74px);
    /* ReportLogoSlot::HORIZONTAL_ALIGNMENT = physical_left.
       الترويسة تُقرأ من اليمين، لكن موضع الشعار مادي لا منطقي: لو تُرك
       flex-start ليرث اتجاه الصفحة لالتصق الشعار بالحافة الداخلية للخانة
       وزحف نحو العنوان. اتجاه الخانة وحدها LTR صراحةً حتى يعني flex-start
       اليسار المادي في أي محرك عرض، طباعةً كان أو شاشة. */
    direction: ltr;
    justify-content: flex-start;
    /* ReportLogoSlot::VERTICAL_ALIGNMENT = center. */
    align-items: center;
}

.report-brand-logo {
    display: block;
    width: auto;
    /* المقاسات تأتي من ReportLogoSlot عبر متغيّرات CSS على ترويسة التقرير،
       فالشاشة والطباعة وWord تقرأ العقد نفسه. القيم هنا احتياطية فقط. */
    max-width: var(--report-logo-max-width, 255px);
    height: auto;
    max-height: var(--report-logo-max-height, 68px);
    object-fit: contain;
}

/* اسم المنشأة: هوية التقرير حين لا يوجد شعار مستخدَم — لا يظهر مع الشعار.
   الخانة اتجاهها LTR لأن موضعها مادي، أما النص العربي داخلها فيبقى RTL
   باتجاهه الأصلي؛ الموضع وحده هو المادي، لا الكتابة. */
.report-brand-name {
    direction: rtl;
    max-width: 255px;
    color: #0d3b2e;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.report-block {
    margin: 0 0 8px;
    border: 1px solid #dfe6e2;
    border-radius: 7px;
    overflow: hidden;
    background: #ffffff;
}

.report-band {
    padding: 6px 10px;
    background: #0D3B2E;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.report-body {
    padding: 8px 10px;
    color: #263b34;
    line-height: 1.55;
}

.report-info-table,
.report-list-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.report-info-table th,
.report-info-table td,
.report-list-table th,
.report-list-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #e5ebe8;
    vertical-align: top;
    text-align: right;
}

.report-info-table tr:last-child th,
.report-info-table tr:last-child td,
.report-list-table tbody tr:last-child td {
    border-bottom: 0;
}

.report-info-table th {
    width: 15%;
    background: #f4f7f5;
    color: #68766f;
    font-size: 11px;
    font-weight: 700;
}

.report-info-table td {
    width: 35%;
    color: #263b34;
    font-size: 12.5px;
    font-weight: 600;
}

.report-info-table .strong-value {
    color: #0D3B2E;
    font-weight: 800;
}

.report-list-table thead th {
    background: #edf3f0;
    color: #0D3B2E;
    font-size: 11px;
    font-weight: 800;
}

.report-list-table tbody td {
    color: #263b34;
    font-size: 12px;
    line-height: 1.45;
}

.number-cell {
    width: 46px;
    text-align: center !important;
}

.report-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.report-two-column .report-block {
    margin-bottom: 8px;
}

.report-attachment-list {
    margin: 0;
    padding: 8px 28px 8px 10px;
}

.report-footer {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid #dfe5e2;
}

.report-footer > div {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.report-footer span {
    color: #7a8681;
    font-size: 10px;
}

.report-footer strong {
    color: #263b34;
    font-size: 11px;
}

@media (max-width: 760px) {
    .report-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .report-template-switch {
        order: -1;
    }

    .report-toolbar .primary-button,
    .report-toolbar .secondary-button {
        width: 100%;
    }

    .visit-report {
        padding: 15px 12px;
    }

    .report-brand-window {
        flex-basis: var(--report-logo-narrow-window-width, 190px);
        width: var(--report-logo-narrow-window-width, 190px);
        height: var(--report-logo-narrow-window-height, 48px);
    }

    .report-brand-logo {
        width: auto;
        max-width: var(--report-logo-narrow-max-width, 185px);
        max-height: var(--report-logo-narrow-max-height, 44px);
    }

    .report-brand-name {
        max-width: 185px;
        font-size: 11px;
    }

    .report-heading h1 {
        font-size: 17px;
    }

    .report-info-table {
        table-layout: auto;
    }

    .report-info-table th {
        width: auto;
    }

    .report-info-table td {
        width: auto;
    }

    .report-two-column {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .report-footer {
        flex-direction: column;
        gap: 3px;
    }
}

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

    html,
    body {
        background: #ffffff;
    }

    body {
        font-size: 9.5px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .topbar,
    .no-print,
    .app-shell::before {
        display: none !important;
    }

    .page {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .visit-report {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 5mm 6mm 4mm;
        border: 1px solid #cbd5d0;
        border-top: 3px solid #0D3B2E;
        border-radius: 4px;
        box-shadow: none;
    }

    .report-masthead {
        margin-bottom: 5px;
        padding-bottom: 5px;
        border-bottom-width: 1.5px;
        break-inside: avoid;
    }

    .report-heading h1 {
        font-size: 15px;
    }

    .report-number {
        font-size: 8.5px;
    }

    .report-unapproved-mark {
        font-size: 10px;
    }

    .report-brand-window {
        flex-basis: var(--report-logo-print-window-width, 245px);
        width: var(--report-logo-print-window-width, 245px);
        height: var(--report-logo-print-window-height, 50px);
    }

    .report-brand-logo {
        width: auto;
        max-width: var(--report-logo-print-max-width, 235px);
        max-height: var(--report-logo-print-max-height, 46px);
    }

    .report-brand-name {
        max-width: 235px;
        font-size: 9.5px;
    }

    .report-block {
        margin-bottom: 4px;
        border-radius: 3px;
    }

    .report-band {
        padding: 4px 7px;
        font-size: 10px;
    }

    .report-body {
        padding: 5px 7px;
        line-height: 1.35;
    }

    .report-info-table th,
    .report-info-table td,
    .report-list-table th,
    .report-list-table td {
        padding: 3.5px 5px;
    }

    .report-info-table th {
        font-size: 8px;
    }

    .report-info-table td {
        font-size: 9.5px;
    }

    .report-list-table thead th {
        font-size: 8.5px;
    }

    .report-list-table tbody td {
        font-size: 9px;
        line-height: 1.3;
    }

    .number-cell {
        width: 32px;
    }

    .report-two-column {
        gap: 4px;
    }

    .compact-block {
        break-inside: avoid;
    }

    .allow-page-break {
        break-inside: auto;
    }

    .report-list-table thead {
        display: table-header-group;
    }

    .report-list-table tr {
        break-inside: avoid;
    }

    .report-footer {
        gap: 10px;
        margin-top: 3px;
        padding-top: 5px;
        break-inside: avoid;
    }

    .report-footer span {
        font-size: 8px;
    }

    .report-footer strong {
        font-size: 8.5px;
    }
}

/* Executive dashboard — canonical */

/*
 * Command Center (لوحة القيادة).
 *
 * ONE calm surface for every card. A card never turns red, amber or green as a
 * whole: the surface, border, radius and shadow are shared, and the semantic
 * state is carried by the NUMBER plus a restrained 2px inline-start accent. A
 * page full of attention states therefore still reads as one quiet executive
 * page rather than a wall of warnings, and the meaning never depends on colour
 * alone — every card also carries its label, its number and its description.
 *
 * Two deliberate density levels, and only two:
 *
 *   .command-center-card     a primary executive indicator — compact, stacked
 *   .command-center-metric   a secondary indicator — a short horizontal tile
 *
 * Which level a card gets is decided by DashboardSummary per role, not here, so
 * the System Administrator's organization portfolio can be primary while the
 * same record counts are secondary for them and primary for an employee.
 */
.command-center {
    display: grid;
    gap: 18px;
}

.command-center-header {
    max-width: 760px;
}

.command-center-header h1 {
    margin: 0;
    color: var(--brand-green);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
}

.command-center-header p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.65;
}

.command-center-header p strong {
    color: var(--text);
    font-weight: 700;
}

.command-center-system {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.command-center-system-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.command-center-state {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.35;
}

.command-center-state--success,
.command-center-state--danger {
    background: var(--semantic-bg);
    color: var(--semantic-text);
}

/* ---- a section of the page, with a quiet heading ------------------------- */

.command-center-section {
    display: grid;
    gap: 9px;
}

.command-center-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
}

.command-center-section-title {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/*
 * The section filter: a period, and an organization for the one role that has
 * more than one. It sits on the section heading row so it reads as belonging to
 * that section, and it stays a single compact line so the Command Center does
 * not start turning into a reporting screen. Every control comes from the shared
 * theme — the fields carry no appearance of their own.
 */
.command-center-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin: 0;
}

.command-center-filter .field {
    margin: 0;
    min-width: 132px;
}

.command-center-filter .field label {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: var(--admin-label-font-compact);
    font-weight: 700;
}

.command-center-filter .field input,
.command-center-filter .field select {
    min-height: var(--admin-control-h-compact);
    font-size: var(--admin-control-font-compact);
}

.command-center-filter .field input {
    padding: 7px 10px;
}

.command-center-filter .field select {
    padding: 7px 10px 7px 32px;
    background-position: left 11px center;
}

.command-center-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.command-center-filter-actions .primary-button,
.command-center-filter-actions .secondary-button {
    min-width: 88px;
    min-height: var(--admin-control-h-compact);
    padding-inline: 16px;
    font-size: var(--admin-control-font-compact);
}

/* ---- level one: primary executive indicators ---------------------------- */

.command-center-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 10px;
}

/* ---- level two: secondary indicators, materially smaller ---------------- */

.command-center-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 8px;
}

/*
 * Six metrics read as three and three.
 *
 * auto-fill gives whatever the width allows — five across and one stranded on a
 * row of its own — so a section DashboardSummary marked as six asks for an
 * explicit count instead, and steps down 3 -> 2 -> 1 so no card is ever left
 * alone at the end of a row.
 *
 * Declared after both base grids on purpose: these carry the same specificity,
 * so the modifier only wins by coming later.
 */
.command-center-grid--three,
.command-center-metrics--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Four supporting metrics read as one balanced group, then as 2 + 2. */
.command-center-grid--four,
.command-center-metrics--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1180px) {
    .command-center-grid--three,
    .command-center-metrics--three,
    .command-center-grid--four,
    .command-center-metrics--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * A section's leading summary.
 *
 * It sits on its own line above the metrics it summarises, at a width that reads
 * as a heading figure rather than as another cell in the grid. The card itself is
 * the same shared component at the same density — only its placement differs.
 */
.command-center-summary {
    display: grid;
    grid-template-columns: minmax(0, 260px);
}

/* ---- the shared card surface -------------------------------------------- */

.command-center-card,
.command-center-metric {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    /* The one surface. Never tinted by state. */
    background: var(--surface);
    box-shadow: var(--shadow);
    text-decoration: none;
    /* Semantic state lives here and is read by the number and the accent. */
    --card-accent: var(--border-strong);
    --card-number: var(--brand-green);
}

.command-center-card {
    display: flex;
    min-height: 88px;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    padding: 11px 13px;
    border-inline-start: 2px solid var(--card-accent);
}

.command-center-card-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.command-center-card-value {
    color: var(--card-number);
    font-size: 25px;
    font-weight: 800;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.command-center-card-note {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

/* A secondary indicator reads on one line: number, then label. */
.command-center-metric {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 7px 11px;
    border-inline-start: 2px solid var(--card-accent);
}

.command-center-metric .command-center-card-value {
    font-size: 17px;
    flex: 0 0 auto;
}

.command-center-metric .command-center-card-label {
    font-size: 12px;
    font-weight: 600;
}

/* A secondary tile's description is context for the number, not a third line. */
.command-center-metric .command-center-card-note {
    display: none;
}

/* ---- semantic tone: number and accent only ------------------------------ */

/*
 * A metric wears its tone, but not the way a badge does.
 *
 * Both read the same contract; they differ in how much of it they show, and that
 * difference is the point. A badge is a small object whose whole job is to name a
 * state, so it can be entirely its tone. A metric card is a large surface, and
 * tinting the whole of it turned a page of ordinary figures into a page of
 * coloured blocks — the dashboard stopped reading as calm long before any single
 * card was too strong.
 *
 * So a metric takes only two of the three: the number is the canonical text
 * colour and a 2px inline-start edge is the canonical border colour. The surface
 * stays the one neutral surface every card shares, and the label and description
 * stay ordinary application text. `--semantic-bg` is deliberately not read here.
 *
 * This is component-specific presentation, not semantic drift: the amber on this
 * number is the same amber as the amber on the listing's badge, because both
 * resolve from the same tone above.
 */
.command-center-card--success,
.command-center-metric--success,
.command-center-card--attention,
.command-center-metric--attention,
.command-center-card--danger,
.command-center-metric--danger,
.command-center-card--neutral,
.command-center-metric--neutral {
    --card-accent: var(--semantic-border);
    --card-number: var(--semantic-text);
}

/*
 * A total is information, not a condition.
 *
 * `plain` is not a semantic state and deliberately has no tone: tinting a total
 * would claim something about it that is not true, and a page where every figure
 * is tinted says nothing at all. It keeps the calm surface and the brand number.
 * This is why it is a separate tone from `neutral`, which is a real state — the
 * one لم تبدأ خدمتها resolves to — and does wear its canonical tint above.
 */
.command-center-card--plain,
.command-center-metric--plain {
    --card-accent: var(--border-strong);
    --card-number: var(--brand-green);
}

/*
 * Nothing to act on. An attention or danger indicator sitting at zero keeps its
 * place in the grid but drops its accent and mutes its number, so it cannot read
 * as an active warning.
 */
.command-center-card--settled,
.command-center-metric--settled {
    /* Declared after the tones and with the same specificity, so a zero-valued
       attention or danger metric really does drop its emphasis. The surface is
       restated rather than inherited so this rule stays self-contained: whatever
       a tone above may do in future, nothing to act on never looks like a
       warning. */
    background: var(--surface);
    --card-accent: var(--border);
    --card-number: var(--muted);
}

/* ---- the whole card is the link ---------------------------------------- */

.command-center-card--link,
.command-center-metric--link {
    transition: border-color var(--motion), box-shadow var(--motion);
}

.command-center-card--link:hover,
.command-center-metric--link:hover {
    border-color: var(--border-strong);
}

.command-center-card--link:focus-visible,
.command-center-metric--link:focus-visible {
    outline: 2px solid var(--control-focus-border);
    outline-offset: 2px;
}

/* ---- the organization administrator's own service state ----------------- */

.command-center-card--state .command-center-card-value {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

/* ---- quick actions ----------------------------------------------------- */

.command-center-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.command-center-actions .executive-action-primary,
.command-center-actions .executive-action-secondary {
    min-width: 160px;
}

@media (max-width: 640px) {
    .command-center-grid {
        grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    }

    .command-center-metrics,
    .command-center-grid--three,
    .command-center-metrics--three,
    .command-center-grid--four,
    .command-center-metrics--four,
    .command-center-summary {
        grid-template-columns: 1fr;
    }

    .command-center-filter {
        width: 100%;
    }

    .command-center-filter .field {
        flex: 1 1 100%;
    }

    .command-center-header h1 {
        font-size: 22px;
    }

    .command-center-card {
        min-height: 78px;
        padding: 10px 11px;
    }

    .command-center-card-value {
        font-size: 22px;
    }

    .command-center-actions .executive-action-primary,
    .command-center-actions .executive-action-secondary {
        flex: 1 1 100%;
    }
}

/*
 * The shared dashboard eyebrow and the two quick-action buttons.
 *
 * What used to be a second card system here — .executive-card and its grid — was
 * removed with the Command Center visual refinement. Its sizes were the heavy
 * ones the refinement replaced, nothing consumes it any more, and leaving it in
 * place would have left a second, louder card family for a later surface to pick
 * up by accident. The Command Center card contract above is the only one.
 */
.executive-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--brand-gold-deep);
    font-size: 12px;
    font-weight: 700;
}

.executive-action-primary,
.executive-action-secondary {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 700;
    transition: background-color var(--motion), border-color var(--motion);
}

.executive-action-primary {
    border: 1px solid var(--brand-green);
    background: var(--brand-green);
    color: #ffffff;
}

.executive-action-primary:hover {
    background: var(--brand-green-hover);
}

.executive-action-primary span {
    color: var(--brand-gold);
    font-size: 18px;
    line-height: 1;
}

.executive-action-secondary {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--brand-green);
}

.executive-action-secondary:hover {
    border-color: var(--border-strong);
}

.executive-action-primary:focus-visible,
.executive-action-secondary:focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .executive-action-primary,
    .executive-action-secondary {
        padding-inline: 10px;
        font-size: 13px;
    }
}

/* System settings — canonical */

.system-settings {
    display: grid;
    gap: 18px;
}

.settings-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.settings-page-header > div {
    max-width: 700px;
}

.settings-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #C79A2E;
    font-size: 11px;
    font-weight: 800;
}

.settings-page-header h1 {
    margin: 0;
    color: #0D3B2E;
    font-size: 30px;
}

.settings-page-header p {
    margin: 7px 0 0;
    color: #74817b;
    font-size: 13px;
}

.settings-brand-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.settings-card {
    min-width: 0;
    overflow: hidden;
    padding: 18px;
    border: 1px solid #dde5e1;
    border-top: 4px solid #0D3B2E;
    border-right: 4px solid #C79A2E;
    border-radius: 13px;
    background: #ffffff;
}

.settings-card-heading {
    min-height: 75px;
    margin-bottom: 15px;
}

.settings-card-heading h2 {
    margin: 0;
    color: #0D3B2E;
    font-size: 16px;
}

.settings-card-heading p {
    margin: 6px 0 8px;
    color: #74817b;
    font-size: 10.5px;
    line-height: 1.65;
}

.settings-status {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: #f5f1e6;
    color: #80631c;
    font-size: 9px;
    font-weight: 800;
}

.settings-logo-preview {
    display: flex;
    height: 165px;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    padding: 18px;
    border: 1px solid #e4eae7;
    border-radius: 10px;
    background: #fafcfb;
}

.settings-logo-preview.horizontal {
    overflow: hidden;
}

.settings-logo-preview.horizontal img {
    width: 150px;
    max-width: none;
    height: 150px;
    object-fit: contain;
    transform: scale(1.85);
    transform-origin: center;
}

.settings-logo-preview.stacked img {
    width: auto;
    max-width: 150px;
    max-height: 135px;
    object-fit: contain;
}

.settings-logo-preview.symbol img {
    width: auto;
    max-width: 135px;
    max-height: 125px;
    object-fit: contain;
}

/* إدارة المنشآت — عنوان الصفحة وإجراءاتها. */

.organizations-page-heading > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.organizations-heading-actions {
    flex: 0 0 auto;
}

.organizations-heading-actions .performance-export-button,
.organizations-heading-actions .admin-back-link {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* إدارة المنشآت — بطاقة تحكم ومعلومات بلا تمرير أفقي. */

/*
 * The organizations directory.
 *
 * One shared surface with separated rows — not one card per organization. The
 * grid used to declare SIX tracks, a leftover from the removed actions column,
 * so the fifth row of content sat next to an empty sixth track: that empty
 * track was the blank block on the side of every row. There are five columns
 * of information and five tracks, and they consume the whole row.
 */
.organizations-table-card {
    overflow: hidden;
    border: 1px solid #e1e6e3;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.organizations-table-scroll {
    overflow: visible;
}

.organizations-table {
    display: block;
    width: 100%;
    min-width: 0;
}

.organizations-table thead {
    display: block;
}

.organizations-table tbody {
    display: block;
}

.organizations-table thead tr,
.organizations-table tbody tr {
    display: grid;
    /*
     * Seven tracks: name, kind, establishments, owner, operational state,
     * service, service end. Each row is its own grid, so the tracks must not
     * depend on content or the header would drift from the rows — hence pure
     * fractions with no content-sized minimum.
     *
     * The weights come from measuring the rendered row. The two badge columns
     * used to get 0.7fr (84px floor) for badges that measure 92px («موقوفة
     * يدويًا») and ~120px («قريبة من الانتهاء»), so the service badge ran over
     * the start of the service-end text; and the service end, a sentence like
     * «تنتهي في 22 مارس 2027 (بعد 165 يومًا)», wrapped onto two or three lines
     * while the name kept 2fr of mostly empty space. The name gives that slack
     * up: at a 1440px laptop (1fr ≈ 131px) the service badge gets ~150px and
     * the end date ~230px, one line each, and at 1280px (1fr ≈ 111px) both
     * badges still fit on one line. Below that a badge wraps inside its own
     * cell (see .organization-access-badge here) rather than overlapping.
     */
    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(0, 0.85fr)
        minmax(0, 0.8fr)
        minmax(0, 1fr)
        minmax(0, 0.85fr)
        minmax(0, 1.15fr)
        minmax(0, 1.75fr);
    gap: 6px 12px;
    align-items: center;
    padding: 7px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/*
 * The system administrator's directory carries one more cell: the row's «⋮»
 * menu (web screens review 5). It takes a fixed eighth track sized to the
 * menu button, so the seven information tracks keep their weights. Wide
 * layout only: the narrower layouts below already let a row wrap its cells.
 */
@media (min-width: 1101px) {
    .organizations-table--with-actions thead tr,
    .organizations-table--with-actions tbody tr {
        grid-template-columns:
            minmax(0, 1.6fr)
            minmax(0, 0.85fr)
            minmax(0, 0.8fr)
            minmax(0, 1fr)
            minmax(0, 0.85fr)
            minmax(0, 1.15fr)
            minmax(0, 1.75fr)
            34px;
    }
}

.organizations-table thead tr {
    border-bottom: 1px solid #e1e6e3;
    background: #fafbfb;
}

.organizations-table thead th {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    text-align: start;
}

/* A separator between organizations, not a card around each one. */
.organizations-table tbody tr + tr {
    border-top: 1px solid #eef1f0;
}

.organizations-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.015);
}

/* The stacked labels belong to the narrow layout only. */
.organizations-table thead tr td::before,
.organizations-table tbody td::before {
    display: none;
}

.organizations-table td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
}

.organizations-table td::before {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
}

.organizations-table .organization-summary-card {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-top: 2px solid rgba(199, 154, 46, 0.55);
    border-radius: 10px;
    background: var(--surface);
    /* No shadow: a supporting tile inside a card that already has one only
       added visual weight where the least is wanted. */
    text-align: center;
}

.organizations-table .organization-summary-card::before {
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.organization-summary-number {
    color: var(--brand-green);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
}

.organization-report-branding-state {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}

.organization-report-branding-state--enabled {
    border: 1px solid #cadbd3;
    background: var(--status-success-bg);
    color: var(--status-success-text);
}

.organization-report-branding-state--disabled {
    border: 1px solid #dde2df;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-text);
}

.organization-summary-card--logo .organization-logo-thumb {
    display: block;
    max-width: 130px;
    max-height: 46px;
    margin: 0 auto;
}

/*
 * Supporting metadata. "لا شعار مستخدَم" and the last-identity-update stamp are
 * context for a row whose subject is the organization's name and state, so they
 * are deliberately quieter than both.
 */
.organization-summary-logo-empty,
.organization-summary-empty {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.organization-summary-updated {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    unicode-bidi: isolate;
}

@media (min-width: 1101px) {
    .organizations-table .organization-summary-card--updated {
        margin-left: 8px;
    }
}

.organizations-table .organization-name-input,
.organizations-table .organization-status-select--table,
.organizations-table .organization-date-input {
    width: 100%;
    min-width: 0;
}

/* A badge never leaves its track: on a width too narrow for one line it wraps
   inside its own cell instead of running over the next column. */
.organizations-table .organization-access-badge {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.organizations-table .organization-effective-state {
    min-width: 0;
    max-width: none;
    line-height: 1.65;
}

.organization-access-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
}

.organization-access-badge--active,
.organization-access-badge--not-started,
.organization-access-badge--near-expiry,
.organization-access-badge--transitional,
.organization-access-badge--expired,
.organization-access-badge--manually-disabled,
.organization-access-badge--manually-suspended {
    background: var(--semantic-bg);
    color: var(--semantic-text);
}

.organizations-table .organization-effective-state-note {
    display: inline-flex;
    margin-top: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-text);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.organization-name-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
}

.organization-name-actions form {
    margin: 0;
}

.organization-row-save {
    width: auto;
    min-width: 76px;
    min-height: 34px;
    padding: 5px 14px;
    font-size: 12px;
}

.organizations-table .organization-logo-thumb {
    margin-top: 2px;
}

@media (max-width: 1100px) {
    .organizations-table tr {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px 14px;
    }
}

@media (max-width: 640px) {
    .organizations-table thead {
        display: none;
    }

    .organizations-table tbody tr {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: none;
        gap: 10px;
        padding: 14px;
    }

    /* Each value needs its name back once the header row is gone. */
    .organizations-table tbody td::before {
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        content: attr(data-label);
        font-size: 10px;
        font-weight: 700;
        line-height: 1.35;
    }

    .organizations-table td:not(.organization-summary-card) {
        display: block;
        min-width: 0;
        margin-top: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .organizations-table .organization-summary-card {
        min-height: 86px;
        padding: 12px;
    }
}

/*
 * The organizations create bar: this page's column template, and nothing else.
 *
 * The name carries the most width because it is free text; the status and the two
 * dates get exactly what their content needs; the action takes its own width and
 * sits at the end of the row. Fractional units only — no fixed positioning — so
 * the bar simply redistributes as the viewport changes.
 */
@media (min-width: 1101px) {
    .organizations-create-bar {
        grid-template-columns:
            minmax(0, 2.4fr)
            minmax(140px, 1fr)
            minmax(132px, 0.95fr)
            minmax(132px, 0.95fr)
            auto;
    }
}

/*
 * Between 641px and 1100px five cells in one row would crush the dates, so the
 * bar becomes two balanced rows: the name and the status above, the service
 * period and the action below. The areas are named, so placement never depends on
 * the order the cells happen to appear in.
 */
@media (min-width: 641px) and (max-width: 1100px) {
    .organizations-create-bar {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-areas:
            "name name name name status status"
            "start start end end action action";
    }

    .organizations-create-name { grid-area: name; }
    .organizations-create-status { grid-area: status; }
    .organizations-create-start { grid-area: start; }
    .organizations-create-end { grid-area: end; }
    .organizations-create-bar .admin-create-bar-action { grid-area: action; }
}

/*
 * Desktop density for the organizations screen.
 *
 * Whitespace only: the card grid, its padding, the gap between one organization
 * and the next, the space between a label and its value, and the height of a
 * summary card. Nothing here touches a type size, a control size, a colour or a
 * status meaning — the big numbers stay 21px and the badges keep their scale.
 *
 * Authored as a desktop block rather than as base values plus a mobile override,
 * so the ≤640px rules further down keep their comfortable spacing untouched and
 * there is nothing to undo. The ≤1100px two-column gap is adjusted in its own
 * rule below, where it is already owned.
 *
 * These classes belong to this one screen — each is used by exactly one view — so
 * this improves the existing owner rather than inventing a shared card
 * abstraction for a single consumer.
 */
@media (min-width: 641px) {

    /* A summary card keeps its shape and its prominence, at a lower height. */
    .organizations-table .organization-summary-card {
        min-height: 74px;
        gap: 4px;
        padding: 9px 11px;
    }

    .organizations-table .organization-summary-card::before {
        margin-bottom: 1px;
    }

    /* And the save action sits closer to the name it saves. */
    .organization-name-actions {
        margin-top: 6px;
    }
}

/* معاينة مصغّرة لشعار المنشأة داخل جدول إدارة المنشآت (اطلاع فقط). */
.organization-logo-thumb {
    display: block;
    width: auto;
    max-width: 120px;
    height: auto;
    max-height: 40px;
    object-fit: contain;
}

.settings-logo-form {
    display: grid;
    gap: 13px;
}

.settings-logo-form .field {
    display: grid;
    gap: 6px;
}

.settings-logo-form label {
    color: #263d34;
    font-size: 11.5px;
    font-weight: 800;
}

/*
 * The settings logo upload is a deliberately smaller control inside a compact
 * card. It keeps only that — its size — and takes its border, radius, surface
 * and picker button from the global file-input owner rather than restating them
 * and drifting.
 */
.settings-logo-form input[type="file"] {
    min-width: 0;
    padding: 6px 8px;
    font-size: 10px;
}

.settings-logo-form input[type="file"]::file-selector-button {
    margin-inline-end: 7px;
    min-height: 24px;
    padding: 3px 10px;
}

.settings-logo-form small {
    color: #87938e;
    font-size: 9.5px;
}

.settings-logo-form .button {
    width: 100%;
}

.settings-success {
    padding: 12px 14px;
    border: 1px solid #cadbd3;
    border-radius: 9px;
    background: var(--status-success-bg);
    color: var(--status-success-text);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .settings-brand-grid {
        grid-template-columns: 1fr;
    }

    .settings-card-heading {
        min-height: 0;
    }

    .settings-page-header {
        align-items: stretch;
        flex-direction: column;
    }
}

/* First-login password change — canonical */

.first-login-user {
    display: grid;
    gap: 3px;
    margin: 18px 0;
    padding: 11px 13px;
    border: 1px solid #e0e7e3;
    border-right: 4px solid #C79A2E;
    border-radius: 8px;
    background: #fafcfb;
    text-align: right;
}

.first-login-user strong {
    color: #0D3B2E;
    font-size: 13px;
}

.first-login-user span {
    direction: ltr;
    color: #7c8984;
    font-size: 11px;
    text-align: right;
}

.first-login-logout {
    margin-top: 12px;
    text-align: center;
}

/* Employee management — canonical */

/*
 * The page grids of the accounts, teams and import screens: one column that is
 * exactly as wide as the page, never as wide as its widest table.
 *
 * A bare `display: grid` sizes its implicit column to the content's minimum, so
 * a table wrapper inside it grew to the table's width instead of scrolling:
 * /admin/teams measured 904px on a 390px phone and /admin/teams/{id} 500px
 * (practical test م7, 2026-10-08). minmax(0, 1fr) lets every child shrink to
 * the page, so each .employees-table-wrap scrolls inside it as intended. Owned
 * here, so every page built on these wrappers is safe without a rule of its own.
 */
.employees-page,
.employee-form-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

/*
 * A form page takes the same content width as every other page (web screens
 * review 10): it used to stop at 620px, which read as a narrower page shifted
 * to one side under a full-width header. Its fields already sit in a
 * two-column grid, so the width is used rather than stretched.
 */
.employee-form-page {
    gap: 14px;
}

.employees-heading {
    align-items: flex-end;
    /* The page grid gap already spaces the heading. */
    margin-bottom: 0;
}

.employees-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #C79A2E;
    font-size: 11px;
    font-weight: 800;
}

.employees-heading h1 {
    margin: 0;
    color: #0D3B2E;
}

.employees-heading p {
    margin: 6px 0 0;
    color: #74817b;
    font-size: 12px;
}

.employee-add-button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    border: 1px solid #0D3B2E;
    border-radius: 8px;
    background: #0D3B2E;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(13, 59, 46, 0.08);
}

.employee-add-button span {
    color: #C79A2E;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.employee-add-button:hover {
    background: #124b3b;
    color: #ffffff;
}

.employees-card,
.employee-form-card,
.employee-password-card {
    overflow: hidden;
    padding: 15px 16px;
    border: 1px solid #dde5e1;
    border-top: 4px solid #0D3B2E;
    border-right: 4px solid #C79A2E;
    border-radius: 13px;
    background: #ffffff;
}

.employees-table-wrap {
    overflow-x: auto;
}

/*
 * The accounts table inside an organization profile.
 *
 * It scrolls horizontally rather than escaping the profile surface: a table
 * that overflows its container leaves columns unreachable, which is worse than
 * a scrollbar. Containment and reachability come from here; the row action
 * menu no longer depends on this wrapper not clipping, because the menu is
 * lifted out of the scroll context entirely (see .employee-actions-panel).
 */
/*
 * One compact action language for a toolbar above a table.
 *
 * The three actions used to borrow three unrelated button classes, which gave
 * them three type sizes and three heights — the import button in particular
 * stretched far wider than its label needed. Here they share everything except
 * emphasis, and each is sized by its own text.
 */
.organization-users-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
}

.compact-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 14px;
    border: 1px solid #d5ddd9;
    border-radius: 8px;
    background: #fff;
    color: inherit;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.compact-action:hover,
.compact-action:focus-visible {
    background: rgba(0, 0, 0, 0.03);
}

.compact-action--primary {
    border-color: transparent;
    background: var(--brand, #0d3b2e);
    color: #fff;
}

.compact-action--primary:hover,
.compact-action--primary:focus-visible {
    background: var(--brand-strong, #0a2f24);
}

.organization-users-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.employees-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.employees-table th,
.employees-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #e7ece9;
    text-align: right;
}

/*
 * Headers and values with a known short shape stay on one line; everything
 * else wraps. This family of tables (the user directory, the audit log, the
 * team and import tables) used to put nowrap on EVERY cell, so one long value
 * — a role with its client, a manager reference, a list of record codes —
 * set the table's width on its own. The table then grew past its card, and in
 * a right-to-left page the columns that fell off were the last ones: «الحالة»,
 * «كلمة المرور», the actions, the IP. Free text now wraps at word boundaries
 * (break-word does not lower a column's minimum width, so short words never
 * split), and the auto layout only wraps when the row does not fit.
 * .employees-table-wrap still scrolls as the last resort.
 */
.employees-table th,
.employees-table .employees-cell-number,
.employees-table .audit-time,
.employees-table .employee-account-state,
.employees-table .employee-password-state,
.employees-table .user-role-badge {
    white-space: nowrap;
}

.employees-table td {
    white-space: normal;
    overflow-wrap: break-word;
}

/* A long email may break anywhere instead of widening the table. */
.employees-cell-email {
    overflow-wrap: anywhere;
}

.employees-table th {
    background: #f6f8f7;
    color: #41534d;
    font-size: 10.5px;
    font-weight: 800;
}

.employees-table tbody tr:last-child td {
    border-bottom: 0;
}

.employees-table strong {
    color: #0D3B2E;
}

.employee-password-state {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
}

.employee-password-state.pending {
    background: var(--status-attention-bg);
    color: var(--status-attention-text);
}

.employee-password-state.ready {
    background: var(--status-success-bg);
    color: var(--status-success-text);
}

.employee-edit-link {
    color: #0D3B2E;
    font-weight: 800;
    text-decoration: none;
}

.employees-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 42px 20px;
    text-align: center;
}

.employees-empty strong {
    color: #0D3B2E;
    font-size: 16px;
}

.employees-empty p {
    margin: 0 0 8px;
    color: #7e8a85;
    font-size: 12px;
}

.employee-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 11px;
}

.employee-form-wide {
    grid-column: 1 / -1;
}

.employee-form-note {
    margin: 15px 0 0;
    color: #7e8a85;
    font-size: 11px;
}

.employee-form-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 18px;
}

.employee-password-card {
    display: grid;
    gap: 18px;
}

.employee-password-card h2 {
    margin: 0;
    color: #0D3B2E;
    font-size: 17px;
}

.employee-password-card p {
    margin: 6px 0 0;
    color: #74817b;
    font-size: 11.5px;
}

.employee-password-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr))
        auto;
    align-items: end;
    gap: 12px;
}

.employee-password-action {
    display: flex;
    align-items: flex-end;
}

@media (max-width: 820px) {
    .employee-form-grid,
    .employee-password-grid {
        grid-template-columns: 1fr;
    }

    .employee-form-wide {
        grid-column: auto;
    }

    .employee-password-action {
        display: block;
    }
}

@media (max-width: 640px) {
    .employees-card {
        overflow: visible;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .employees-table-wrap {
        overflow-x: visible;
    }

    .employees-table {
        display: block;
        font-size: 13px;
    }

    .employees-table thead {
        display: none;
    }

    .employees-table tbody {
        display: grid;
        gap: 10px;
    }

    .employees-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-areas:
            "name name actions"
            "number number number"
            "email email email"
            "account password password";
        gap: 10px 16px;
        padding: 14px 16px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
    }

    .employees-table td {
        display: block;
        min-width: 0;
        padding: 0;
        border-bottom: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .employees-cell-name {
        grid-area: name;
        align-self: center;
        font-size: 15px;
    }

    .employees-cell-number {
        grid-area: number;
    }

    .employees-cell-email {
        grid-area: email;
    }

    .employees-cell-account {
        grid-area: account;
    }

    .employees-cell-password {
        grid-area: password;
    }

    .employees-table .employee-actions-cell {
        grid-area: actions;
        align-self: start;
        justify-self: end;
    }

    .employees-table .employees-cell-mobile,
    .employees-table .employees-cell-identity {
        display: none;
    }

    .employees-table .employee-account-state,
    .employees-table .employee-password-state {
        font-size: 11px;
    }

    .employees-empty {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
    }
}

/* Admin hub — canonical */

.admin-hub {
    display: grid;
    gap: 18px;
}

/* Shared "العودة لإدارة النظام" action on admin child pages. */
.admin-back-link {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid #d3ded8;
    border-radius: 8px;
    background: #ffffff;
    color: #0D3B2E;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.admin-hub-header {
    max-width: 700px;
}

.admin-hub-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #C79A2E;
    font-size: 11px;
    font-weight: 800;
}

.admin-hub-header h1 {
    margin: 0;
    color: #0D3B2E;
    font-size: 30px;
}

.admin-hub-header p {
    margin: 7px 0 0;
    color: #74817b;
    font-size: 13px;
}

.admin-tree {
    display: grid;
    max-width: 820px;
    gap: 14px;
}

.admin-tree-group {
    padding: 20px 22px;
    border: 1px solid #dde5e1;
    border-top: 4px solid #0D3B2E;
    border-right: 4px solid #C79A2E;
    border-radius: 13px;
    background: #ffffff;
}

.admin-tree-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.admin-tree-marker {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin-top: 7px;
    border-radius: 50%;
    background: #C79A2E;
}

.admin-tree-heading h2 {
    margin: 0;
    color: #0D3B2E;
    font-size: 17px;
}

.admin-tree-heading p {
    margin: 5px 0 0;
    color: #74817b;
    font-size: 11.5px;
}

.admin-tree-children {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-right: 20px;
    border-right: 1px solid #d8e0dc;
}

.admin-tree-children a {
    padding: 8px 11px;
    border: 1px solid #d7e0dc;
    border-radius: 8px;
    background: #fafcfb;
    color: #0D3B2E;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.admin-tree-children a:hover {
    border-color: #C79A2E;
}

.employee-form-card .field {
    gap: 5px;
}

.employee-form-card .field label {
    font-size: 11px;
}

.employee-form-card .field input {
    min-height: 36px;
    padding: 7px 9px;
}

.employee-form-note {
    margin-top: 10px;
}

.employee-form-actions {
    margin-top: 12px;
}

/* Temporary password disclosure — canonical */

.temporary-password-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(13, 59, 46, 0.20);
}

.temporary-password-dialog {
    width: min(100%, 520px);
    padding: 24px;
    border: 1px solid #dce5e0;
    border-top: 4px solid #0D3B2E;
    border-right: 4px solid #C79A2E;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 18px 55px rgba(13, 59, 46, 0.16);
}

.temporary-password-dialog h2 {
    margin: 0;
    color: #0D3B2E;
    font-size: 21px;
}

.temporary-password-dialog p {
    margin: 8px 0 18px;
    color: #71807a;
    font-size: 12px;
    line-height: 1.8;
}

.temporary-password-value {
    margin-bottom: 18px;
    padding: 18px;
    border-radius: 9px;
    background: #f1f6f3;
    color: #132a22;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.5px;
}

/* Employee direct actions — canonical */

.employee-account-state {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
}

.employee-account-state.active {
    background: var(--status-success-bg);
    color: var(--status-success-text);
}

.employee-account-state.inactive {
    background: var(--status-danger-bg);
    color: var(--status-danger-text);
}

.employee-actions-cell {
    position: relative;
}

.employee-actions-menu {
    position: relative;
    display: inline-block;
}

.employee-actions-menu summary {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #d7e0dc;
    border-radius: 8px;
    background: #ffffff;
    color: #0D3B2E;
    cursor: pointer;
    font-size: 21px;
    font-weight: 800;
    list-style: none;
}

.employee-actions-menu summary::-webkit-details-marker {
    display: none;
}

/*
 * The row action panel.
 *
 * It stays absolutely positioned so the menu still works with JavaScript off,
 * exactly as it always has. When the script is present it PROMOTES the open
 * panel to `position: fixed` with viewport coordinates (.is-lifted), which is
 * what lets it escape the horizontally scrolling table wrapper.
 *
 * That promotion is why the wrapper above is allowed to scroll again: pure
 * wrapper CSS cannot give both a scroll region and an unclipped dropdown, and
 * the previous attempt bought the dropdown by letting the table overflow its
 * own surface.
 */
.employee-actions-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 5px);
    left: 0;
    display: grid;
    width: 190px;
    overflow: hidden;
    border: 1px solid #dbe4df;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(13, 59, 46, 0.12);
}

/* Lifted into the viewport's own coordinate space by the shared script. */
.employee-actions-panel.is-lifted {
    position: fixed;
    z-index: 1000;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
}

.employee-actions-menu.opens-upward .employee-actions-panel:not(.is-lifted) {
    top: auto;
    bottom: calc(100% + 5px);
}

.employee-actions-panel a,
.employee-actions-panel button {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #edf1ef;
    background: transparent;
    color: #263d34;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
    text-decoration: none;
    cursor: pointer;
}

.employee-actions-panel form:last-child button,
.employee-actions-panel > *:last-child {
    border-bottom: 0;
}

.employee-actions-panel a:hover,
.employee-actions-panel button:hover {
    background: #f4f8f6;
    color: #0D3B2E;
}

.employee-actions-panel .password-action {
    color: #0b7056;
}

/*
 * An action this row cannot take, with the reason in its place: the menu says
 * why rather than leaving the reader to discover it from a refusal.
 */
.employee-actions-unavailable {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 10px 12px;
    color: #5b6b65;
    font-size: 11px;
    line-height: 1.6;
    text-align: right;
}

.employee-actions-unavailable strong {
    color: #263d34;
}

@media (max-width: 640px) {
    .employee-actions-menu summary {
        width: 40px;
        height: 40px;
    }

    .employee-actions-panel a,
    .employee-actions-panel button {
        padding: 12px 14px;
        font-size: 13px;
    }
}

.temporary-password-person {
    display: grid;
    gap: 3px;
    margin-bottom: 12px;
    color: #41534d;
}

.temporary-password-person strong {
    color: #0D3B2E;
}

.temporary-password-person span {
    color: #7b8883;
    font-size: 11px;
}

/* Audit log — canonical */

.audit-page {
    display: grid;
    gap: 18px;
}

.audit-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.audit-heading h1 {
    margin: 4px 0 5px;
    color: #0D3B2E;
    font-size: 27px;
}

.audit-heading p {
    margin: 0;
    color: #74817b;
    font-size: 12px;
}

.audit-policy-note {
    padding: 10px 13px;
    border-right: 3px solid #C79A2E;
    border-radius: 7px;
    background: var(--status-attention-bg);
    color: var(--status-attention-text);
    font-size: 11px;
    font-weight: 700;
}

.audit-card {
    overflow: hidden;
    border: 1px solid #dbe4df;
    border-top: 4px solid #0D3B2E;
    border-right: 3px solid #C79A2E;
    border-radius: 11px;
    background: #ffffff;
}

.audit-table-wrap {
    overflow-x: auto;
}

.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.audit-table th,
.audit-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #edf1ef;
    text-align: right;
    vertical-align: middle;
}

.audit-table th {
    background: #f8faf9;
    color: #51635c;
    font-size: 10px;
    font-weight: 800;
}

.audit-table tbody tr:last-child td {
    border-bottom: 0;
}

.audit-table td strong {
    display: block;
    color: #0D3B2E;
}

.audit-table td small {
    display: block;
    margin-top: 2px;
    color: #7d8984;
    font-size: 9px;
}

/*
 * The affected record or account can be a long run of record codes
 * («REC-…، REC-…، …») or one unbroken identifier. It breaks anywhere rather
 * than pushing the table past its card; the column still takes the room the
 * row can give it before anything breaks.
 */
.audit-table .audit-cell-target {
    overflow-wrap: anywhere;
}

@media (min-width: 641px) {
    .audit-table .audit-cell-target {
        min-width: 180px;
    }
}

/* An Arabic date reads right to left like the rest of the row; forcing
   LTR turned «7 أكتوبر 2026 - 20:56:21» into «أكتوبر 2026 - 20:56:21 7». */
.audit-time {
    white-space: nowrap;
}

.audit-event {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    white-space: nowrap;
}

.audit-event.success {
    background: var(--status-success-bg);
    color: var(--status-success-text);
}

.audit-event.danger {
    background: var(--status-danger-bg);
    color: var(--status-danger-text);
}

.audit-event.attention {
    background: var(--status-attention-bg);
    color: var(--status-attention-text);
}

.audit-event.neutral {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-text);
}

.audit-empty {
    padding: 40px 20px;
    color: #7d8984;
    text-align: center;
    font-size: 12px;
}

/*
 * Canonical administrative pagination.
 *
 * One owner for the records list, the audit log and the team activity log. It was
 * named .audit-pagination while the audit screen was its only consumer; the
 * pattern is shared now, so the name says what it is. Every consumer renders it
 * through the x-admin-pagination component, so there is no page-specific
 * pagination CSS and no compatibility alias.
 *
 * Interactive targets are 38px — the canonical admin control height. Nothing here
 * is smaller, because a page number has to be comfortable to hit.
 */
.admin-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    padding: 12px 13px;
    border-top: 1px solid #edf1ef;
}

/* "1–25 من 659" */
.admin-pagination-range {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
    unicode-bidi: isolate;
}

.admin-pagination-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-pagination-page,
.admin-pagination-step {
    display: inline-flex;
    min-width: 38px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--brand-green);
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
}

a.admin-pagination-page:hover,
a.admin-pagination-step:hover {
    border-color: var(--brand-gold);
    background: var(--brand-green-soft);
}

.admin-pagination-page.is-current {
    border-color: var(--brand-green);
    background: var(--brand-green);
    color: #ffffff;
}

/* An edge with nowhere to go: present, readable, not clickable. */
.admin-pagination-step[aria-disabled="true"] {
    background: #f7f9f8;
    color: var(--muted);
    cursor: default;
}

/* A gap in the window. Never a link, never announced. */
.admin-pagination-gap {
    display: inline-flex;
    min-width: 24px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12.5px;
}

@media (max-width: 760px) {
    .audit-heading {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .audit-card {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .audit-table-wrap {
        overflow-x: visible;
    }

    .audit-table {
        display: block;
        font-size: 13px;
    }

    .audit-table thead {
        display: none;
    }

    .audit-table tbody {
        display: grid;
        gap: 10px;
    }

    .audit-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "event event"
            "user user"
            "target target"
            "time ip";
        gap: 10px 16px;
        padding: 14px 16px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
    }

    .audit-table td {
        display: block;
        min-width: 0;
        padding: 0;
        border-bottom: 0;
        overflow-wrap: anywhere;
    }

    .audit-table td small {
        font-size: 11.5px;
    }

    .audit-cell-event {
        grid-area: event;
    }

    .audit-cell-user {
        grid-area: user;
    }

    .audit-cell-target {
        grid-area: target;
    }

    .audit-table .audit-time {
        grid-area: time;
        white-space: normal;
    }

    .audit-cell-ip {
        grid-area: ip;
    }

    .audit-table .audit-event {
        max-width: 100%;
        padding: 5px 10px;
        font-size: 11.5px;
        line-height: 1.5;
        white-space: normal;
    }

    .audit-empty,
    /* A card of its own on a phone, centred, wrapping, nothing hidden. */
    .admin-pagination {
        margin-top: 10px;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
    }

    .admin-pagination-range {
        width: 100%;
        text-align: center;
    }

    .admin-pagination-pages {
        justify-content: center;
    }
}
.temporary-password-close,
.temporary-password-close:visited {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 8px;
    background: #0D3B2E;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
    text-decoration: none;
}

.temporary-password-close:hover {
    background: #124b3b;
    color: #ffffff;
}

/* Employee performance — canonical */

.performance-page {
    display: grid;
    gap: 18px;
}

.performance-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.performance-heading h1 {
    margin: 4px 0 5px;
    color: #0D3B2E;
    font-size: 27px;
}

.performance-heading p {
    margin: 0;
    color: #74817b;
    font-size: 12px;
}

.performance-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.performance-summary > div {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid #dce5e1;
    border-top: 3px solid #0D3B2E;
    border-radius: 10px;
    background: #ffffff;
}

.performance-summary span {
    color: #66766f;
    font-size: 10.5px;
    font-weight: 700;
}

.performance-summary strong {
    color: #0D3B2E;
    font-size: 21px;
    font-weight: 800;
}

.performance-card {
    overflow: hidden;
    border: 1px solid #dbe4df;
    border-top: 4px solid #0D3B2E;
    border-right: 3px solid #C79A2E;
    border-radius: 11px;
    background: #ffffff;
}

.performance-table-wrap {
    overflow-x: auto;
}

.performance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.performance-table th,
.performance-table td {
    padding: 11px 13px;
    border-bottom: 1px solid #edf1ef;
    text-align: right;
    vertical-align: middle;
}

.performance-table thead th {
    background: #f8faf9;
    color: #52635c;
    font-size: 10px;
    font-weight: 800;
}

.performance-table td strong {
    color: #0D3B2E;
}

.performance-count,
.performance-total {
    display: inline-flex;
    min-width: 38px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-weight: 800;
}

.performance-count {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-text);
}

.performance-total {
    border: 1px solid #d6e3dc;
    background: var(--status-success-bg);
    color: var(--status-success-text);
}

.performance-table tfoot th {
    border-bottom: 0;
    background: #f4f7f5;
    color: #0D3B2E;
    font-weight: 800;
}

.performance-empty {
    padding: 42px 20px;
    color: #7d8984;
    text-align: center;
    font-size: 12px;
}

@media (max-width: 800px) {
    .performance-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .performance-heading {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .performance-summary > div {
        min-height: 0;
        gap: 8px;
        padding: 12px 14px;
    }

    .performance-summary strong {
        font-size: 19px;
    }

    .performance-card {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .performance-table-wrap {
        overflow-x: visible;
    }

    .performance-table {
        display: block;
        font-size: 13px;
    }

    .performance-table thead {
        display: none;
    }

    .performance-table tbody {
        display: grid;
        gap: 10px;
    }

    .performance-table tfoot {
        display: block;
        margin-top: 10px;
    }

    .performance-table tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "name name name"
            "number number number"
            "visits meetings total";
        gap: 10px 8px;
        padding: 14px 16px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
    }

    .performance-table tfoot tr {
        grid-template-areas:
            "label label label"
            "visits meetings total";
        border-color: #cfe0d7;
        background: var(--brand-green-soft);
    }

    .performance-table td,
    .performance-table tfoot th {
        display: block;
        min-width: 0;
        padding: 0;
        border-bottom: 0;
        background: transparent;
        overflow-wrap: anywhere;
    }

    .performance-cell-name {
        grid-area: name;
        font-size: 15px;
    }

    .performance-cell-number {
        grid-area: number;
    }

    /* «العميل», for the system administrator only, under the name. */
    .performance-table--with-client tbody tr {
        grid-template-areas:
            "name name name"
            "client client client"
            "number number number"
            "visits meetings total";
    }

    .performance-cell-client {
        grid-area: client;
    }

    .performance-cell-label {
        grid-area: label;
    }

    .performance-cell-visits {
        grid-area: visits;
        align-self: end;
    }

    .performance-cell-meetings {
        grid-area: meetings;
        align-self: end;
    }

    .performance-cell-total {
        grid-area: total;
        align-self: end;
    }

    .performance-table .performance-count,
    .performance-table .performance-total {
        width: 100%;
        min-width: 0;
        min-height: 32px;
    }

    .performance-empty {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
    }
}

/* Employee performance export — canonical */

.performance-heading-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.performance-export-button,
.performance-export-button:visited {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 1px solid #0D3B2E;
    border-radius: 8px;
    background: #0D3B2E;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.performance-export-button:hover {
    background: #124b3b;
    color: #ffffff;
}

@media (max-width: 800px) {
    .performance-heading-actions {
        align-items: stretch;
        flex-direction: column;
        width: fit-content;
    }
}

/* User management (system administrators) */

.user-role-badge {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-text);
    font-size: 9.5px;
    font-weight: 800;
}

.user-role-badge.system-admin {
    background: var(--status-attention-bg);
    color: var(--status-attention-text);
}

/* مدير المنصة carries the brand, read from the identity block above; the
   blue it used to borrow was never part of the approved palette (خ9). */
.user-role-badge.platform-manager {
    border: 1px solid var(--semantic-border);
    background: var(--semantic-bg);
    color: var(--semantic-text);
}

.user-role-badge.manager {
    background: var(--status-success-bg);
    color: var(--status-success-text);
}

/* «مالك المنشأة» is a designation, not a role: it sits beside the role badge
   rather than replacing it, and is deliberately styled differently so the two
   never read as the same thing. */
.user-owner-badge {
    display: inline-flex;
    margin-inline-start: 4px;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--status-attention-bg);
    color: var(--status-attention-text);
    font-size: 9.5px;
    font-weight: 800;
}

/* ---------------------------------------------------------------
   Organizations directory + organization profile (HF2A)

   The directory is a list to scan: one line per organization, no images and no
   forms inside a row. The profile is where an organization's detail lives, in
   five server-rendered sections.
   --------------------------------------------------------------- */

.organizations-directory-table td {
    vertical-align: middle;
    /* 20 rows are meant to be scanned, so the row is deliberately tight. */
    padding-block: 7px;
}

.organizations-directory-table th {
    padding-block: 8px;
}

.organization-name-link {
    display: block;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}

.organization-name-link:hover,
.organization-name-link:focus-visible {
    text-decoration: underline;
}

.organization-code {
    display: block;
    margin-top: 2px;
    color: #7e8a85;
    font-size: 11px;
    letter-spacing: 0.02em;
}

/* The client's kind (Turki, 2026-10-06): «مجموعة» or «منشأة مستقلة», one
   quiet tag wherever a client is named; in the directory it is a column. */
.organization-kind {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid #d5ddd9;
    border-radius: 999px;
    color: #4d5a55;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}

.organization-service-note {
    display: block;
    margin-top: 3px;
    color: #56635e;
    font-size: 11px;
}

.organization-service-distance {
    color: #7e8a85;
}

.organizations-search-field {
    flex: 1 1 260px;
}

.organizations-actions-column {
    width: 1%;
    white-space: nowrap;
}

.organizations-actions-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.organization-open-button {
    padding-block: 6px;
}

.organizations-empty-row {
    padding: 22px 12px;
    color: #7e8a85;
    text-align: center;
}

.organization-profile-heading .subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.organization-profile-owner-line {
    margin-top: 4px;
}

.organization-profile-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 14px 0 0;
    border-bottom: 1px solid #e2e8e5;
}

.organization-profile-tab {
    padding: 9px 14px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    color: #56635e;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.organization-profile-tab:hover,
.organization-profile-tab:focus-visible {
    background: rgba(0, 0, 0, 0.03);
}

.organization-profile-tab.is-current {
    background: #fff;
    border-color: #e2e8e5;
    color: inherit;
}

.organization-profile-panel {
    padding: 18px;
    border: 1px solid #e2e8e5;
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: #fff;
}

.organization-profile-panel h2 {
    margin-top: 0;
}

.organization-profile-panel h3 {
    margin-top: 22px;
    font-size: 14px;
}

.organization-section-note {
    margin: 6px 0 10px;
    color: #56635e;
    font-size: 12px;
}

.organization-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 18px;
    margin: 0 0 16px;
}

.organization-facts dt {
    color: #7e8a85;
    font-size: 11px;
    font-weight: 700;
}

.organization-facts dd {
    margin: 2px 0 0;
    font-size: 13px;
}

.organization-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 16px;
}

.organization-indicator {
    flex: 1 1 130px;
    padding: 12px 14px;
    border: 1px solid #e2e8e5;
    border-radius: 10px;
}

.organization-indicator-value {
    display: block;
    font-size: 20px;
    font-weight: 800;
}

.organization-indicator-label {
    display: block;
    margin-top: 2px;
    color: #7e8a85;
    font-size: 11px;
}

.organization-attention-list {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.organization-attention-item {
    padding: 9px 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    font-size: 12px;
}

.organization-attention-item--attention {
    background: var(--status-attention-bg);
    color: var(--status-attention-text);
}

.organization-attention-item--danger {
    background: var(--status-danger-bg, #fdecec);
    color: var(--status-danger-text, #8c2f2f);
}

.organization-attention-clear {
    margin: 0 0 16px;
    color: #56635e;
    font-size: 12px;
}

.organization-current-owner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
}

.organization-admin-list {
    margin: 0 0 12px;
    padding-inline-start: 18px;
    font-size: 13px;
}

.organization-admin-list li {
    margin-bottom: 4px;
}

.organization-admin-number {
    margin-inline-start: 6px;
    color: #7e8a85;
    font-size: 11px;
}

.organization-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.organization-logo-preview {
    max-width: 240px;
    max-height: 120px;
    padding: 8px;
    border: 1px solid #e2e8e5;
    border-radius: 10px;
    background: #fff;
}

/*
 * The service form.
 *
 * Four short fields do not deserve the full width of the profile surface, so
 * the form is bounded and laid out 2x2 on desktop. It opts into the existing
 * .admin-form--compact control contract — the same density the records filter
 * panel uses — rather than introducing a second set of sizes.
 */
.organization-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
}

.organization-service-grid .field {
    margin: 0;
}

@media (max-width: 720px) {
    .organization-service-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.organizations-users-table td {
    vertical-align: middle;
}

/*
 * The tenant's read-only service term.
 *
 * A separate presentation from .organization-facts on purpose: for a tenant
 * administrator these dates are the reason the section exists, so the value is
 * set at a readable size above its caption instead of being the smaller half of
 * a fine-print grid.
 */
.organization-service-readonly {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 18px;
    max-width: 640px;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid #e1e6e3;
    border-radius: 10px;
    background: #fafbfb;
}

.organization-service-readonly dt {
    margin-bottom: 4px;
    color: #7e8a85;
    font-size: 11px;
    font-weight: 700;
}

.organization-service-readonly dd {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.organization-service-form {
    /* Bounded so the form reads as a control panel, not as the page. */
    max-width: 560px;
    padding: 14px;
    border: 1px solid #e1e6e3;
    border-radius: 10px;
    background: #fafbfb;
}

/* The action sits under the fields it saves, not across an empty row. */
.organization-service-form .form-actions {
    display: flex;
    margin-top: 12px;
}

.organization-service-form .form-actions .primary-button {
    min-width: 120px;
}

@media (max-width: 720px) {
    .organizations-actions-cell {
        justify-content: flex-start;
    }

    .organization-profile-tabs {
        border-bottom: none;
    }

    .organization-profile-tab {
        border: 1px solid #e2e8e5;
        border-radius: 8px;
    }

    .organization-profile-panel {
        border-top: 1px solid #e2e8e5;
        border-radius: 12px;
        margin-top: 8px;
    }
}

.organization-owner-cell {
    min-width: 220px;
}

.organization-owner-empty {
    color: #7e8a85;
    font-size: 11px;
}

/*
 * OWNER MANAGEMENT LAYOUT
 *
 * Assignment and removal are different domain operations and therefore remain
 * different forms. Their visual relationship belongs here: one owner-management
 * row on desktop. Control density stays owned by .admin-form--compact and the
 * shared button primitives; this component owns layout only.
 */
.organization-owner-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 6px;
}

.organization-owner-controls > .employee-form-note {
    flex-basis: 100%;
}

.organization-owner-form {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 12px;
    margin: 0;
}

.organization-owner-form .field {
    margin-bottom: 0;
}

.organization-owner-remove-form {
    display: flex;
    margin: 0;
}

/*
 * The two owner-management actions are peers in the same component.
 * Their width belongs to this component layout contract rather than to either
 * button primitive, so different Arabic label lengths do not distort the row.
 */
.organization-owner-form .primary-button,
.organization-owner-remove-form .secondary-button {
    inline-size: 124px;
}

@media (min-width: 641px) {
    .organization-owner-controls,
    .organization-owner-form {
        gap: var(--admin-fields-row-gap-compact) var(--admin-fields-column-gap-compact);
    }

    .organization-owner-form .field {
        flex: 0 0 240px;
    }

    .organization-owner-form,
    .organization-owner-remove-form {
        flex: 0 0 auto;
    }
}

@media (max-width: 640px) {
    .organization-owner-controls,
    .organization-owner-form {
        flex-direction: column;
        align-items: stretch;
    }

    .organization-owner-form,
    .organization-owner-remove-form {
        width: 100%;
    }
}

.user-self-marker {
    display: block;
    margin-top: 3px;
    color: #7e8a85;
    font-size: 10px;
    font-weight: 700;
}

.employee-form-card .field select,
.employee-password-card select {
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid #d6dcd9;
    border-radius: 10px;
    background: #ffffff;
    font: inherit;
}

.user-confirm-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 12px;
}

.user-confirm-option input {
    width: auto;
    min-height: 0;
}

.user-admin-actions {
    display: grid;
    gap: 10px;
}

/* «يعمل أيضًا في» and «نوع المدير» on the account's entities card. */
.user-entity-also {
    margin: 10px 0;
    padding: 0;
    border: 0;
}

.user-entity-also legend {
    margin-bottom: 8px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .users-table tr {
        grid-template-areas:
            "name name actions"
            "number number number"
            "email email email"
            "role manager manager"
            "account password password";
    }

    .users-table .users-cell-role {
        grid-area: role;
    }

    .users-table .users-cell-manager {
        grid-area: manager;
    }
}

/* Team management */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* The page grid already owns vertical spacing between sibling cards. */

.team-section-title {
    margin: 0 0 var(--admin-panel-gap-compact);
    color: #0D3B2E;
    font-size: 15px;
}

.team-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--admin-panel-gap-compact);
}

/*
 * The filter keeps only what is its own: how wide its one select may grow, and a
 * label that sits inline rather than above. Appearance comes from .admin-select
 * and the size from the compact control contract, so the two declarations this
 * rule used to duplicate — and the second, conflicting `.team-filter select`
 * block — are gone.
 */
.team-filter select {
    min-width: 220px;
    max-width: 320px;
}

.team-filter label {
    margin: 0;
    font-size: var(--admin-label-font-compact);
}

.team-filter button,
.team-action-panel button {
    width: auto;
    flex: 0 0 auto;
    min-height: var(--admin-control-h-compact);
    padding: 0 18px;
}

.team-select-cell {
    width: 42px;
    text-align: center;
}

.team-table th.team-select-cell,
.team-table td.team-select-cell {
    padding-left: 6px;
    padding-right: 6px;
}

.team-select-cell input[type="checkbox"] {
    display: inline-block;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    accent-color: #0D3B2E;
    cursor: pointer;
}

.team-row-inactive td {
    color: #7e8a85;
}

.team-muted {
    color: #7e8a85;
}

.team-action-panel {
    margin-top: var(--admin-panel-gap-compact);
    padding: var(--admin-panel-pad-compact);
    border: 1px solid #dde5e1;
    border-radius: 12px;
    background: #f8faf9;
}

.team-selection-count {
    margin: 0 0 10px;
    color: #0D3B2E;
    font-size: 12.5px;
    font-weight: 800;
}

.team-action-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.team-action-panel .field {
    display: grid;
    gap: 5px;
    min-width: 240px;
    max-width: 320px;
    margin: 0;
    flex: 1 1 240px;
}

.team-action-panel .field label {
    margin: 0;
    font-size: 11.5px;
}

/* Width only: appearance comes from .admin-select and the size from the compact
   control contract, so this no longer re-implements a select without its arrow. */
.team-action-panel select {
    width: 100%;
}

.team-action-panel .employee-form-note {
    margin-top: 12px;
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .team-filter,
    .team-action-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .team-filter select,
    .team-action-panel .field {
        max-width: none;
        min-width: 0;
    }

    .team-filter button,
    .team-action-panel button {
        width: 100%;
    }
}

/* Team tables keep a scrollable table layout on small screens instead
   of the account-card layout used by the user list. */
@media (max-width: 640px) {
    .team-table {
        display: table;
    }

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

    .team-table tbody {
        display: table-row-group;
    }

    .team-table tr {
        display: table-row;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .team-table td {
        display: table-cell;
        padding: 10px 8px;
        border-bottom: 1px solid #e7ece9;
        white-space: nowrap;
    }

    .team-table-wrap {
        overflow-x: auto;
    }
}

/* Employee Excel import */

.import-requirements,
.import-headers {
    margin: 8px 0;
    padding-right: 18px;
    color: #41534d;
    font-size: 12px;
    line-height: 1.9;
}

.import-headers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    list-style: none;
}

.import-headers li {
    padding: 4px 10px;
    border: 1px solid #d7e0dc;
    border-radius: 8px;
    background: #fafcfb;
    color: #0D3B2E;
    font-weight: 800;
}

.import-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.import-summary-card {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid #dde5e1;
    border-radius: 12px;
    background: #ffffff;
}

.import-summary-card span {
    color: #74817b;
    font-size: 11.5px;
    font-weight: 700;
}

.import-summary-card strong {
    color: #0D3B2E;
    font-size: 26px;
    font-variant-numeric: tabular-nums;
}

.import-summary-card.ready strong {
    color: var(--status-success-text);
}

.import-summary-card.existing strong,
.import-summary-card.duplicate strong {
    color: var(--status-attention-text);
}

.import-summary-card.invalid strong {
    color: var(--status-danger-text);
}

.import-status {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.import-status.ready {
    background: var(--status-success-bg);
    color: var(--status-success-text);
}

.import-status.existing,
.import-status.duplicate_in_file {
    background: var(--status-attention-bg);
    color: var(--status-attention-text);
}

.import-status.invalid {
    background: var(--status-danger-bg);
    color: var(--status-danger-text);
}

.import-table .import-reasons {
    min-width: 220px;
    white-space: normal;
    color: #5f6d67;
    font-size: 11px;
}

.import-password {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.import-download-button {
    width: fit-content;
}

@media (max-width: 760px) {
    .import-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------
   Branded error pages
   --------------------------------------------------------------- */

.error-page-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at top right,
            rgba(199, 154, 46, 0.08),
            transparent 34%
        ),
        #f5f7f6;
}

.error-page-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 32px 20px;
}

.error-page-card {
    width: min(100%, 520px);
    padding: 38px 34px;
    border: 1px solid #dce5e1;
    border-top: 4px solid #0D3B2E;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(13, 59, 46, 0.08);
    text-align: center;
}

.error-page-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    color: #0D3B2E;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
}

.error-page-brand img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.error-page-icon {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    place-items: center;
    border: 1px solid #ead9a8;
    border-radius: 50%;
    background: #fffaf0;
    color: #9a7418;
}

.error-page-icon svg {
    width: 34px;
    height: 34px;
}

.error-page-code {
    margin: 0 0 8px;
    color: #9a7418;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.error-page-card h1 {
    margin: 0;
    color: #0D3B2E;
    font-size: 28px;
    line-height: 1.35;
}

.error-page-message {
    max-width: 390px;
    margin: 12px auto 0;
    color: #6d7975;
    font-size: 14px;
    line-height: 1.9;
}

.error-page-actions {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}

.error-page-primary-action {
    min-width: 210px;
}

@media (max-width: 600px) {
    .error-page-shell {
        padding: 20px 14px;
    }

    .error-page-card {
        padding: 30px 20px;
        border-radius: 16px;
    }

    .error-page-card h1 {
        font-size: 24px;
    }

    .error-page-actions,
    .error-page-primary-action {
        width: 100%;
    }
}


/* Shared Arabic date control — canonical */
.arabic-date-control {
    position: relative;
    width: 100%;
    min-width: 0;
}

.arabic-date-control .arabic-date-display {
    width: 100%;
    padding-left: 42px;
    direction: ltr;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.arabic-date-control .arabic-date-display:placeholder-shown {
    direction: rtl;
}

.arabic-date-picker-button {
    position: absolute;
    left: 5px;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #62726b;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    cursor: pointer;
}

.arabic-date-picker-button:hover {
    background: #f1f4f2;
}

.arabic-date-picker-button:focus-visible {
    outline: 2px solid var(--control-focus-ring);
}

.arabic-date-picker-button svg {
    width: 17px;
    height: 17px;
}

.arabic-date-control input.arabic-date-native {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    min-width: 1px;
    max-width: 1px;
    height: 1px;
    min-height: 1px;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* ===================================================================
   التنبيهات — NOTIFICATIONS-R1
   الجرس جزء من شريط علوي قائم، فيستعير قياساته ولا يضيف هوية جديدة.
   =================================================================== */

.notification-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--brand-ink, #1f3b2c);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.notification-bell:hover,
.notification-bell:focus-visible {
    background-color: rgba(31, 59, 44, 0.07);
}

.notification-bell[aria-current="page"] {
    background-color: rgba(31, 59, 44, 0.1);
}

.notification-bell svg {
    width: 20px;
    height: 20px;
}

/* العدد إشارة لا عنوان: صغير، وفي زاوية الجرس، ولا يظهر إلا عند وجود غير مقروء. */
.notification-bell-count {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--brand-gold, #b8912f);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.notification-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

/* صف مضغوط للمسح السريع: سطران لا بطاقة. */
.notification-item {
    border: 1px solid var(--surface-border, #e3e6e4);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

/* غير المقروء: حافة جانبية وخلفية خفيفة جدًا — تمييز هادئ لا صارخ،
   ومعه نقطة ونص مخفي للقارئ الآلي فلا يعتمد على اللون وحده. */
.notification-item.is-unread {
    border-inline-start: 3px solid var(--brand-gold, #b8912f);
    background: rgba(184, 145, 47, 0.045);
}

.notification-open {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    text-align: start;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.notification-open:hover {
    background-color: rgba(31, 59, 44, 0.04);
}

.notification-open:focus-visible {
    outline: 2px solid var(--brand-ink, #1f3b2c);
    outline-offset: -2px;
}

/* العنوان والشارة والوقت في سطر واحد، والوقت يُدفع إلى الطرف. */
.notification-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.notification-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-gold, #b8912f);
    flex: none;
}

.notification-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-ink, #1f3b2c);
    min-width: 0;
}

.notification-item.is-unread .notification-title {
    font-weight: 700;
}

.notification-badge {
    flex: none;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(184, 145, 47, 0.16);
    color: #7a5e12;
    font-size: 11px;
    font-weight: 700;
}

.notification-time {
    margin-inline-start: auto;
    flex: none;
    font-size: 12px;
    color: var(--muted-ink, #5b6b62);
}

/* سطر السياق: نوع السجل وموضوعه فقط. */
.notification-context {
    font-size: 13px;
    color: var(--muted-ink, #5b6b62);
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .notification-bell {
        width: 34px;
        height: 34px;
    }

    /* على العرض الضيق ينزل الوقت إلى أول السطر التالي بدل أن يزاحم العنوان. */
    .notification-time {
        margin-inline-start: 0;
    }

    .notification-open {
        padding: 10px 12px;
    }
}

/* ===================================================================
   الحقول النصية الطويلة — FINAL-VISUAL-UX-POLISH-R1

   الارتفاع مُعرَّف هنا بصنف دلالي، لا بقيمة مكتوبة أمام حقل بعينه،
   فيتشارك تقرير الزيارة ومحضر الاجتماع العقد نفسه. السلوك في
   record-form.js يقرأ max-height من هنا، فيبقى السقف قرارًا واحدًا.
   =================================================================== */

textarea[data-autogrow] {
    /* يكبر بالمحتوى، ولا يُترك للمستخدم تكبيره يدويًا فيتعارض القياسان. */
    resize: none;
    overflow-y: auto;
    /* يمنع قفزة قبل أن يعمل السكربت. */
    transition: height 0.08s ease-out;
}

/* بند قصير داخل قائمة متكررة: يبدأ بسطر واحد ولا يضخّم القائمة،
   ثم يكبر أثناء الكتابة بدل التمرير الداخلي المبكر. */
textarea[data-autogrow="compact"] {
    min-height: 2.6rem;
    max-height: 11rem;
}

/* سرد طويل معتاد: نحو أربعة أسطر ظاهرة. */
textarea[data-autogrow="long"] {
    min-height: 6.2rem;
    max-height: 19rem;
}

/* السرد الأساسي للسجل: يبدأ أكبر لأن أغلب النص يُكتب فيه. */
textarea[data-autogrow="long-large"] {
    min-height: 8.6rem;
    max-height: 23rem;
}

/* ===================================================================
   كتلة السرد الطويل — FINAL-VISUAL-UX-POLISH-R1

   كل حقل سردي طويل يأخذ سطرًا كاملًا ويكبر باستقلال عن جاره. لا يوجد
   أي ربط بين ارتفاع حقل وآخر: حقلان متجاوران كان أحدهما يتمدد ويبقى
   الثاني قصيرًا، والعلاج هو التكديس لا مزامنة الارتفاعات.
   =================================================================== */

.long-narrative-field {
    /* يكسر أي شبكة عمودين يقع داخلها، فيبقى بعرض الكتلة كاملًا. */
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

.long-narrative-field textarea {
    width: 100%;
    /* لا يفيض أفقيًا على العرض الضيق مهما طال السطر. */
    max-width: 100%;
}

/* مجموعة حقول سردية متتابعة: مسافة واحدة بينها يملكها هذا الصنف. */
.long-narrative-stack {
    display: grid;
    gap: 4px;
}

/* إرشاد الشعار ومعاينته داخل خانة التقرير — ORGANIZATION-LOGO-NORMALIZATION-R1 */

.organization-logo-guidance {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--surface-border, #e3e6e4);
    border-radius: 10px;
    background: rgba(31, 59, 44, 0.03);
}

.organization-logo-reassurance {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-ink, #1f3b2c);
}

.organization-logo-hints {
    margin: 0;
    padding-inline-start: 18px;
    font-size: 12.5px;
    color: var(--muted-ink, #5b6b62);
    display: grid;
    gap: 3px;
}

/* المعاينة تحاكي خانة الترويسة: نفس الصندوق، الشعار إلى أقصى اليسار داخله. */
.organization-logo-slot-preview {
    margin: 0 0 8px;
    padding: 6px 8px;
    border: 1px dashed var(--surface-border, #e3e6e4);
    border-radius: 8px;
    background: #fff;
}

.organization-logo-quality-warning {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: #7a5e12;
}

/*
 * A3: the account-to-entity controls sit inside a table cell, so their forms
 * flow inline and the remove action reads as a text link, not a full-width
 * button.
 */
.inline-form {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.inline-form select {
    width: auto;
}

.link-button {
    width: auto;
    min-height: 0;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--brand-green);
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/*
 * A destructive action — delete, suspend, withdraw — carries the danger identity
 * wherever it appears, whatever button shape it sits on (deep test خ9). It is a
 * modifier rather than a button of its own, so the outlined secondary button, the
 * inline link button and a row in an actions menu keep their sizes and only take
 * the colour. The reversing action (re-activate) does not take it: only the step
 * that removes or stops something is marked.
 */
.secondary-button.danger-action {
    border-color: var(--status-danger-border);
    color: var(--status-danger-text);
}

.link-button.danger-action,
.employee-actions-panel button.danger-action,
.employee-actions-panel a.danger-action {
    color: var(--status-danger-text);
}

.secondary-button.danger-action:hover,
.employee-actions-panel button.danger-action:hover,
.employee-actions-panel a.danger-action:hover {
    background: var(--status-danger-bg);
    color: var(--status-danger-text);
}

/* A3: the note under one entity field — its expected shape, or the reason a
   save was refused, right where it is fixed. */
.field-hint,
.field-error {
    margin: 4px 0 0;
    font-size: 12.5px;
}

.field-hint {
    color: #5b6b65;
}

.field-error {
    color: #9b2c2c;
    font-weight: 700;
}

.field input[aria-invalid="true"] {
    border-color: #9b2c2c;
}

/* A company's stored logo, previewed beside its upload form. */
.company-logo-preview {
    display: block;
    max-width: 180px;
    max-height: 80px;
    margin: 0 0 10px;
    object-fit: contain;
}

/* The client's kind, chosen first on the create page. */
.client-kind-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/*
 * A dense form grid takes the records filter panel's density (Turki,
 * 2026-10-06): as many columns as the width holds, each at least 190px, so
 * the organization and entity forms read like that panel rather than as two
 * wide columns. Desktop only; a phone keeps one full-width column.
 */
@media (min-width: 641px) {
    .form-grid--dense {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

    /*
     * A field whose value is a sentence rather than a word — the plan picker,
     * «باقة المجموعات — المقاعد 60، المنشآت 5، المدة 365 يومًا» — takes a
     * whole row of the dense grid. In a 190px track that text was cut to
     * «… المنش».
     */
    .form-grid--dense > .field--wide {
        grid-column: 1 / -1;
    }

    .admin-form--compact .form-grid--dense + .form-actions,
    .admin-form--compact .form-grid--dense + h2 {
        margin-top: 14px;
    }

    .admin-form--compact .field-hint,
    .admin-form--compact .field-error {
        margin-top: 3px;
        font-size: 11px;
    }
}

/* ---------------------------------------------------------------
   The page header — one for every web page (Turki's screen review,
   2026-10-06). resources/views/components/page-header.blade.php.
   --------------------------------------------------------------- */

.page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px 24px;
    margin-bottom: 18px;
}

.page-header-text {
    min-width: 0;
    flex: 1 1 320px;
}

.page-header-parent {
    display: inline-block;
    margin-bottom: 5px;
    color: #a57c1f;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

a.page-header-parent:hover,
a.page-header-parent:focus-visible {
    text-decoration: underline;
}

.page-header h1 {
    margin: 0;
    color: #0D3B2E;
    font-size: 28px;
    line-height: 1.35;
}

.page-header-subtitle {
    max-width: 720px;
    margin: 6px 0 0;
    color: #6b7a74;
    font-size: 13px;
    line-height: 1.7;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Header actions: one shape and one size. The primary action is filled;
   everything else, the back link included, is outlined. Labels never wrap. */
.page-action,
.page-action:visited {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid #d3ded8;
    border-radius: 8px;
    background: #ffffff;
    color: #0D3B2E;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.page-action:hover,
.page-action:focus-visible {
    border-color: #0D3B2E;
    color: #0D3B2E;
}

.page-action--primary,
.page-action--primary:visited {
    border-color: #0D3B2E;
    background: #0D3B2E;
    color: #ffffff;
}

.page-action--primary:hover,
.page-action--primary:focus-visible {
    background: #124b3b;
    color: #ffffff;
}

.page-action--primary span[aria-hidden] {
    color: #C79A2E;
    font-size: 17px;
    line-height: 1;
}

@media (max-width: 800px) {
    .page-header {
        align-items: stretch;
        flex-direction: column;
    }
}

/*
 * Searchable dropdowns (public/js/searchable-select.js).
 *
 * The text box borrows the select contract through .admin-select, so it has
 * the same edge, arrow, focus ring and height as every select beside it, in
 * full-size and compact surfaces alike. The native select stays in the form,
 * out of sight. The list is fixed to the viewport, so a table or a scrolling
 * card never clips it.
 */
.searchable-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

.searchable-select .searchable-select-input {
    padding-left: 32px;
    cursor: text;
}

.searchable-select .searchable-select-input:disabled {
    background-color: var(--status-neutral-bg);
    color: var(--muted);
    cursor: not-allowed;
}

.searchable-select .searchable-select-native {
    position: absolute;
    inset: auto 0 0 auto;
    width: 1px;
    min-height: 0;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.searchable-select-list {
    position: fixed;
    z-index: 60;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(13, 59, 46, 0.14);
    list-style: none;
    direction: rtl;
    text-align: right;
}

.searchable-select-list [role="option"],
.searchable-select-empty {
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 13px;
    line-height: 1.5;
}

.searchable-select-list [role="option"] {
    cursor: pointer;
}

.searchable-select-list [role="option"][aria-selected="true"] {
    font-weight: 700;
    color: #0D3B2E;
}

.searchable-select-list [role="option"].is-active,
.searchable-select-list [role="option"]:hover {
    background: var(--status-neutral-bg);
}

.searchable-select-empty {
    color: var(--muted);
}

@media (min-width: 641px) {
    .team-filter .searchable-select-input {
        min-height: var(--admin-control-h-compact);
        font-size: var(--admin-control-font-compact);
    }
}

/* «استبدال المدير» on the manager's team page (A4). */
.team-replace-card {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.team-replace-title {
    margin: 0;
    color: #0D3B2E;
    font-size: 15px;
    font-weight: 700;
}

.team-replace-note {
    margin: 0;
    color: #5f6f68;
    font-size: 13px;
    line-height: 1.7;
}

.team-replace-card .team-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
}

.team-replace-card .team-bulk-actions .field {
    flex: 1 1 260px;
    min-width: 0;
    margin: 0;
}

/* «بالإنابة عن» beside the decider's name in a record's approval history (A4). */
.approval-history-acting-for {
    color: var(--muted);
    font-weight: 600;
}

/* «مدير بالإنابة» on the manager's team page (A4). */
.team-delegation-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-delegation-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #dde5e1;
    border-radius: 9px;
}

.team-delegation-item > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.team-delegation-period {
    color: #5f6f68;
    font-size: 13px;
}

.team-replace-card .team-bulk-actions .team-delegation-date {
    flex: 0 1 180px;
}

/* م6: the role-change form stacks its fields with room before «حفظ الدور». */
.user-role-change-form {
    display: grid;
    gap: 10px;
}

.user-role-change-field {
    display: grid;
    gap: 6px;
}

.user-role-change-form > button {
    justify-self: start;
    margin-top: 6px;
}

/* Plan catalog as cards (deep test ت2): one card per plan, its tier shown by
   one line icon in the brand colours. Higher levels take the gold accent, the
   system plan and the trial stay neutral, and a retired plan is dimmed. */
.plan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.plan-card {
    --plan-accent: var(--brand-green);
    --plan-accent-soft: var(--brand-green-soft);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--plan-accent);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.plan-card--third,
.plan-card--unlimited {
    --plan-accent: var(--brand-gold);
    --plan-accent-soft: var(--status-attention-bg);
}

.plan-card--system,
.plan-card--trial {
    --plan-accent: var(--border-strong);
    --plan-accent-soft: var(--status-neutral-bg);
}

.plan-card--retired {
    opacity: 0.65;
}

.plan-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.plan-card-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--plan-accent-soft);
    color: var(--brand-green);
}

.plan-card--third .plan-card-icon,
.plan-card--unlimited .plan-card-icon {
    color: var(--brand-gold-deep);
}

.plan-card-icon svg {
    width: 24px;
    height: 24px;
}

.plan-card-title {
    flex: 1;
    min-width: 0;
}

.plan-card-title h2 {
    margin: 0;
    font-size: 16px;
    color: var(--text);
    overflow-wrap: anywhere;
}

.plan-card-title p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}

.plan-card-status {
    flex: none;
    padding: 3px 9px;
    border: 1px solid var(--status-success-border);
    border-radius: 999px;
    background: var(--status-success-bg);
    color: var(--status-success-text);
    font-size: 11.5px;
    white-space: nowrap;
}

.plan-card-status--retired {
    border-color: var(--status-neutral-border);
    background: var(--status-neutral-bg);
    color: var(--status-neutral-text);
}

.plan-card-terms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
}

.plan-card-terms div {
    min-width: 0;
}

.plan-card-terms dt {
    font-size: 11.5px;
    color: var(--muted);
}

.plan-card-terms dd {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.plan-card-foot {
    margin-top: auto;
}

.plan-card-foot p {
    margin: 0;
}

/* Category order moved by one place up or down (deep test خ6). */
.category-order {
    display: flex;
    gap: 6px;
}

.category-order-button {
    min-width: 0;
    min-height: 0;
    padding: 4px 10px;
    line-height: 1;
}