/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-1dbubfq64u] {
    display: grid;
    /* The sidebar is column 1, which the grid places at the reading START — the right in Arabic, the left
       in English — so the shell mirrors itself from <html dir> with no second rule. (It used to force
       direction:ltr and put the sidebar in column 2, which pinned it to the right in every language.) */
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: var(--app-h);
}

.sidebar[b-1dbubfq64u] {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 0;
    height: var(--app-h);
    overflow: hidden;               /* the nav scrolls internally; the brand + SHIFT footer stay pinned */
    display: flex;
    flex-direction: column;
    color: var(--on-brand);
    padding: 18px 14px;
    background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
    border-inline-end: 1px solid rgba(255, 255, 255, .08);
    /* directional: the sidebar EDGE, so it cannot use a tier — and it points toward the page, which is the
       opposite horizontal sign in each direction (--dir-x, app.css). */
    box-shadow: calc(6px * var(--dir-x)) 0 18px rgba(9, 26, 57, .12);
}

/* On a dark canvas the drop shadow does nothing — a shadow needs something lighter to fall onto — so the
   EDGE has to be drawn. Without it the sidebar and the page read as one surface, which is what the owner
   saw first on a real page. */
html[data-theme="dark"] .sidebar[b-1dbubfq64u] {
    border-inline-end: 1px solid rgba(255, 255, 255, .16);
    box-shadow: none;
}

.main[b-1dbubfq64u] {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

/* A page HEADER, not a floating card (owner's call 2026-08-15) — full-bleed white bar flush to the top
   and the edges, separated from the content by a single hairline. It used to have margin + radius:24px +
   var(--shadow), which read as "another card" stacked above the page's real cards.
   Opaque #fff (not rgba .96) because it is sticky: any transparency lets scrolling rows ghost through it. */
.topbar[b-1dbubfq64u] {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    /* 22px matches .content's inline padding. NOTE the TITLE still sits ~54px in, because the ☰
       sidebar-toggle (42px + 12px gap) renders before it inside .topbar-lead — that offset is the
       button, not a misalignment. Hide the button and the title lands on the content edge. */
    padding: 18px 22px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    /* NOTE: no backdrop-filter — it establishes a containing block that traps position:fixed descendants
       (the topbar's UserPanel self-service modals), pinning them to the topbar instead of the viewport.
       An opaque background keeps the crisp look without the blur. */
    background: var(--panel);
    box-shadow: none;
}

.topbar h1[b-1dbubfq64u] {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
}

/* FocusOnNavigate moves focus to the <h1> on every navigation (a11y); the title
   isn't interactive, so hide the focus ring it would otherwise draw each load. */
.topbar h1:focus[b-1dbubfq64u],
.topbar h1:focus-visible[b-1dbubfq64u] {
    outline: none;
}

/* .eyebrow lives in GLOBAL app.css — five other pages use it, and CSS isolation meant a copy here
   styled the topbar only while leaving all of them unstyled. */

.topbar-actions[b-1dbubfq64u] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

/* ⚠️ `.tenant-select` USED TO BE STYLED HERE AND IT NEVER APPLIED. The <select> lives in
   TenantSwitcher.razor, a child component with no scoped stylesheet of its own, so it carries NO scope
   attribute — while this file compiles to `.tenant-select[b-1dbubfq64u]`, which matched nothing.
   Both the 210px width and the 100% mobile override below were dead. They live in global app.css now.
   THE RULE: a parent's scoped stylesheet cannot reach into a child component's markup. */

/* .demo-badge was removed: a hardcoded green chip with NO consumer left in any .razor. */

.content[b-1dbubfq64u] {
    padding: 24px 22px 32px;
}

/* ⚠️ #blazor-error-ui is styled in GLOBAL app.css, deliberately — see the note there. It is emitted by
   BOTH MainLayout and AuthLayout, and a rule in this file is scoped to THIS component, so the copy in
   AuthLayout could never be matched by it. That is what left «An unhandled error has occurred» showing
   permanently, in English, at the bottom of the production LOGIN page. */


@media (max-width: 980px) {
    .app-shell[b-1dbubfq64u] {
        display: block;
    }

    .sidebar[b-1dbubfq64u] {
        position: static;
        height: auto;
        overflow: visible;
        box-shadow: none;
    }

    .topbar[b-1dbubfq64u],
    .topbar-actions[b-1dbubfq64u] {
        align-items: stretch;
        flex-direction: column;
    }

}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* .brand* styles live in SidebarBrand.razor.css now (Blazor CSS-isolation: the .brand markup moved there). */

/* The nav list scrolls between the pinned brand (top) and the SHIFT footer (bottom). */
.nav-scrollable[b-rxwvkfs303] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Fixed «مدعوم بواسطة SHIFT» — pinned to the sidebar bottom, does NOT scroll with the nav. */
.sidebar-foot[b-rxwvkfs303] {
    flex-shrink: 0;
    margin-top: 12px;
    padding: 12px 8px 4px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, .62);
    font-size: 12px;
}
/* The SHIFT wordmark, the same mask PNG the sign-in page paints, in the text colour of the sidebar. */
.sidebar-foot .foot-logo[b-rxwvkfs303] {
    display: block;
    width: 58px;
    max-width: 100%;
    aspect-ratio: 1000 / 524;
    background: var(--on-brand);
    -webkit-mask: url("img/shift-logo-mask.png") center / contain no-repeat;
    mask: url("img/shift-logo-mask.png") center / contain no-repeat;
}

.tenant-card[b-rxwvkfs303] {
    padding: 12px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-xl);
    background: rgba(255, 255, 255, .07);
}

.tenant-card .label[b-rxwvkfs303] {
    display: block;
    color: var(--muted);
    font-size: 11px;
    /* No text-transform / letter-spacing — the text is ARABIC (see .data-table th). */
}

.tenant-card strong[b-rxwvkfs303],
.tenant-card small[b-rxwvkfs303] {
    display: block;
}

.tenant-card small[b-rxwvkfs303] {
    color: var(--muted);
    margin-top: 4px;
}

.navbar-toggler[b-rxwvkfs303] {
    appearance: none;
    cursor: pointer;
    width: 46px;
    height: 38px;
    position: absolute;
    top: 20px;
    inset-inline-end: 18px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .08);
}

.navbar-toggler[b-rxwvkfs303]::before {
    content: "menu";
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--on-brand);
    font-size: 11px;
    font-weight: 800;
}

.nav-section-title[b-rxwvkfs303] {
    color: var(--muted);
    font-size: 11px;
    /* No text-transform / letter-spacing — the text is ARABIC (see .data-table th). */
    margin: 18px 8px 8px;
}

.nav-item[b-rxwvkfs303]  .nav-link-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap: 10px;
    margin: 5px 0;
    padding: 13px 14px;
    border-radius: var(--r-xl);
    color: var(--on-brand);
    text-decoration: none;
    font-size: 14px;
}

/* Vivid accent driven by the THEME vars → on default SHIFT this is the original blue; recolors with the
   tenant's palette (set the brand blues to match the sidebar for a fully-coherent rebrand). */
.nav-item[b-rxwvkfs303]  .nav-link-btn:hover {
    color: var(--on-brand);
    background: rgba(255, 255, 255, .08);
}

.nav-item[b-rxwvkfs303]  .nav-link-btn.active {
    color: var(--on-brand);
    background: var(--hero);   /* the shared brand band — the owner named this pill as the reference for it */
    box-shadow: var(--sh-lg);
}

/* 18px, not 13 — the icon reads slightly LARGER than its 14px label, which is what makes a nav row scan
   as an icon+label pair instead of a line of text with a speck next to it.
   (No font-weight: Bootstrap Icons is a single-weight font, so the old `800` was doing nothing.) */
.nav-item[b-rxwvkfs303]  .nav-link-btn i {
    color: var(--icon);
    font-size: 18px;
    line-height: 1;
}
.nav-item[b-rxwvkfs303]  .nav-link-btn.active i { color: var(--on-brand); }

@media (max-width: 980px) {
    .nav-scrollable[b-rxwvkfs303] {
        display: none;
    }

    .navbar-toggler:checked ~ .nav-scrollable[b-rxwvkfs303] {
        display: block;
    }
}

@media (min-width: 981px) {
    .navbar-toggler[b-rxwvkfs303] {
        display: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-2hkjhehtq9],
.components-reconnect-repeated-attempt-visible[b-2hkjhehtq9],
.components-reconnect-failed-visible[b-2hkjhehtq9],
.components-pause-visible[b-2hkjhehtq9],
.components-resume-failed-visible[b-2hkjhehtq9],
.components-rejoining-animation[b-2hkjhehtq9] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-2hkjhehtq9],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-2hkjhehtq9],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-2hkjhehtq9],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-2hkjhehtq9],
#components-reconnect-modal.components-reconnect-retrying[b-2hkjhehtq9],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-2hkjhehtq9],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-2hkjhehtq9],
#components-reconnect-modal.components-reconnect-failed[b-2hkjhehtq9],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-2hkjhehtq9] {
    display: block;
}


#components-reconnect-modal[b-2hkjhehtq9] {
    /* was a literal `white` — the Blazor scaffold's own value, so the "connection lost" panel
       came up as a white slab in dark mode, at the worst possible moment to look broken. */
    background-color: var(--panel);
    color: var(--ink);
    width: 20rem;
    margin: calc(20vh / var(--ui-scale)) auto;
    padding: 2rem;
    border: 0;
    border-radius: var(--r-md);
    box-shadow: var(--sh-md);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-2hkjhehtq9 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-2hkjhehtq9 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-2hkjhehtq9 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-2hkjhehtq9]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-2hkjhehtq9 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-2hkjhehtq9 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-2hkjhehtq9 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-2hkjhehtq9 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-2hkjhehtq9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-2hkjhehtq9] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-2hkjhehtq9] {
    border: 0;
    background-color: var(--blue);
    color: var(--on-brand);
    padding: 4px 24px;
    border-radius: var(--r-xs);
}

    #components-reconnect-modal button:hover[b-2hkjhehtq9] {
        background-color: var(--blue-2);
    }

    #components-reconnect-modal button:active[b-2hkjhehtq9] {
        background-color: var(--blue);
    }

.components-rejoining-animation[b-2hkjhehtq9] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-2hkjhehtq9] {
        position: absolute;
        border: 3px solid var(--blue);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-2hkjhehtq9 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-2hkjhehtq9] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-2hkjhehtq9 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SidebarBrand.razor.rz.scp.css */
.brand[b-5ruzfa0ex4] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.brand-link[b-5ruzfa0ex4] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--on-brand);
    text-decoration: none;
    min-width: 0;
}
.brand-link:hover[b-5ruzfa0ex4] { color: var(--on-brand); }

/* Fallback mark (no tenant logo) — vivid themed tile (default = the original blue box; recolors with the theme). */
.brand-mark[b-5ruzfa0ex4] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--cyan), var(--blue-2));
    box-shadow: var(--sh-lg);
    font-weight: 800;
    font-size: 22px;
    color: var(--on-brand);
}

/* Tenant logo — a white rounded chip so any logo sits cleanly on the colored sidebar. */
.brand-logo[b-5ruzfa0ex4] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--r-lg);
    background: var(--panel);
    overflow: hidden;
    box-shadow: var(--sh-md);
}
.brand-logo img[b-5ruzfa0ex4] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.brand-text[b-5ruzfa0ex4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.brand-name[b-5ruzfa0ex4] {
    font-size: 19px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-subtitle[b-5ruzfa0ex4] {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Layout/UserPanel.razor.rz.scp.css */
.user-panel[b-sat2bqdlbx] {
    position: relative;
    flex: 0 0 auto;
}

/* It was wearing a FORM CONTROL's costume (owner-caught: «شكله عامل زي الـ dropdown») — a bordered
   white box with a shadow, a fixed 205px width, and a chevron parked at the far edge by margin:auto.
   That is the exact anatomy of `.form-select` in this same app, so the eye read it as a field you type
   or pick in. It is neither: it is an identity chip that opens a menu.
   Now a borderless pill that sizes to its content, with the brand-tinted wash carrying hover AND the
   open state. Same reasoning as the topbar itself, which stopped being a floating card for this exact
   reason — a bordered, shadowed box inside a flat header reads as a card within a card. */
.current-user[b-sat2bqdlbx] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-block: 5px; padding-inline: 10px 7px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    text-align: start;
    box-shadow: none;
    transition: background .15s ease;
}

/* The open state deliberately matches hover: while the menu is down, the trigger stays lit. */
.current-user:hover[b-sat2bqdlbx],
.current-user[aria-expanded="true"][b-sat2bqdlbx] {
    background: color-mix(in srgb, var(--blue) 9%, transparent);
}

.current-user-avatar[b-sat2bqdlbx] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    /* A CIRCLE, like every other avatar in the app (.assignee-av and the rest) — the rounded square
       was the outlier, and it is what made the chip read as a control with an icon in it. */
    border-radius: 50%;
    color: var(--on-brand);
    font-size: 13px;
    font-weight: 850;
    background: linear-gradient(135deg, var(--green), var(--blue));
}

.current-user strong[b-sat2bqdlbx],
.current-user small[b-sat2bqdlbx],
.user-menu-head strong[b-sat2bqdlbx],
.user-menu-head small[b-sat2bqdlbx] {
    display: block;
    line-height: 1.2;
}

.current-user strong[b-sat2bqdlbx],
.user-menu-head strong[b-sat2bqdlbx] {
    font-size: 13px;
}

.current-user small[b-sat2bqdlbx],
.user-menu-head small[b-sat2bqdlbx] {
    color: var(--muted);
    font-size: 11px;
}

/* No `margin-right: auto`: pushing the chevron to the far end left a wide empty gap between the name
   and the arrow, which is precisely how a <select> renders its value and its arrow. It sits beside
   the text now, small and muted — a hint that this opens, not a control affordance. */
.current-user i[b-sat2bqdlbx] {
    color: var(--muted);
    font-size: 11px;
    transition: transform .15s ease;
}

.current-user[aria-expanded="true"] i[b-sat2bqdlbx] { transform: rotate(180deg); }

.user-menu[b-sat2bqdlbx] {
    width: 300px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--panel);
    box-shadow: var(--sh-xl);
}

.user-menu-head[b-sat2bqdlbx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--info-line);
}

.user-menu-summary[b-sat2bqdlbx] {
    display: grid;
    margin-bottom: 6px;
}

.user-menu-summary div[b-sat2bqdlbx] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--info-line);
}

.user-menu-summary span[b-sat2bqdlbx] {
    color: var(--muted);
    font-size: 12px;
}

.user-menu-summary strong[b-sat2bqdlbx] {
    font-size: 12px;
    text-align: start;
}

/* The value slot keeps its height while the skeleton sits in it, so the rows do not jump on arrival. */
.user-menu-summary strong .skeleton-bar[b-sat2bqdlbx] { --skel-w: 52px; vertical-align: middle; }

/* Shown only when the fetch actually failed — see summaryFailed. */
.up-summary-retry[b-sat2bqdlbx] {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-bottom: 6px; padding: 7px 8px;
    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
    border-radius: var(--r-md);
    background: var(--panel);
    color: var(--red);
    font-family: inherit; font-size: 12px; font-weight: 700;
    cursor: pointer;
}

.up-summary-retry:hover[b-sat2bqdlbx] { background: color-mix(in srgb, var(--red) 7%, var(--panel)); }

.user-menu-actions[b-sat2bqdlbx] {
    display: grid;
    gap: 2px;
    padding-top: 4px;
}

/* ⚠️ These carried NO font-size, so they inherited Bootstrap's 16px base while everything else in the
   panel is 11–13px — the four actions rendered noticeably larger than the summary right above them
   (owner-caught). 13px matches `.current-user strong`, the panel's primary-text size; the icon stays
   one step larger, which is the normal menu proportion (it was inheriting 16px too and read chunky). */
.user-menu-actions button[b-sat2bqdlbx],
.user-menu-actions a[b-sat2bqdlbx] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border: 0;
    border-radius: var(--r-md);
    color: var(--ink);
    background: transparent;
    text-align: start;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.user-menu-actions button:hover[b-sat2bqdlbx],
.user-menu-actions a:hover[b-sat2bqdlbx] {
    color: var(--blue);
    background: var(--info-soft);
}

.user-menu-actions button i[b-sat2bqdlbx],
.user-menu-actions a i[b-sat2bqdlbx] {
    color: var(--blue);
    font-size: 14px;
}

.user-menu-actions button.danger[b-sat2bqdlbx] {
    color: var(--red);
}

.user-menu-actions button.danger:hover[b-sat2bqdlbx] {
    background: var(--red-soft);
}

.user-menu-actions button.danger i[b-sat2bqdlbx] {
    color: var(--red);
}

@media (max-width: 980px) {
    .user-panel[b-sat2bqdlbx],
    .current-user[b-sat2bqdlbx],
    .user-menu[b-sat2bqdlbx] {
        width: 100%;
    }

    .user-menu[b-sat2bqdlbx] {
        position: static;
        margin-top: 8px;
    }
}

/* logout submit lives in a form → make it lay out like the other action items */
.signout-form[b-sat2bqdlbx] { display: contents; }

/* owner note (platform owner has no self-service) */
.user-menu-note[b-sat2bqdlbx] {
    display: flex; gap: 8px; align-items: flex-start;
    margin: 8px 12px; padding: 10px 12px; border-radius: var(--r-md);
    background: var(--soft); border: 1px solid var(--line);
    font-size: 12.5px; color: var(--muted); line-height: 1.5;
}
.user-menu-note i[b-sat2bqdlbx] { color: var(--blue); margin-top: 2px; }

/* self-service modals launched from the panel */
[b-sat2bqdlbx] .up-modal { max-width: 520px; }
[b-sat2bqdlbx] .up-loading { display: flex; align-items: center; gap: 8px; color: var(--muted); padding: 20px; justify-content: center; }
[b-sat2bqdlbx] .up-success { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 700; padding: 20px; justify-content: center; }
[b-sat2bqdlbx] .up-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
[b-sat2bqdlbx] .up-hint { font-size: 12.5px; color: var(--muted); margin: 8px 0; }

/* profile */
[b-sat2bqdlbx] .up-prof-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
[b-sat2bqdlbx] .up-prof-avatar {
    width: 52px; height: 52px; border-radius: var(--r-lg); flex: 0 0 auto;
    display: grid; place-items: center; font-weight: 800; font-size: 18px; color: var(--on-brand);
    background: linear-gradient(135deg, var(--blue-2), var(--cyan));
}
[b-sat2bqdlbx] .up-prof-name { font-size: 17px; font-weight: 800; }
[b-sat2bqdlbx] .up-prof-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
[b-sat2bqdlbx] .up-status { color: var(--brand-strong); font-weight: 700; }
[b-sat2bqdlbx] .up-prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
[b-sat2bqdlbx] .up-prof-grid > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); }
[b-sat2bqdlbx] .up-prof-grid span { font-size: 11.5px; color: var(--muted); }
[b-sat2bqdlbx] .up-prof-grid strong { font-size: 13.5px; }

/* leave modal — my balance + my requests sections */
[b-sat2bqdlbx] .up-section-title {
    display: flex; align-items: center; gap: 7px;
    margin: 18px 0 10px; font-size: 13px; font-weight: 800; color: var(--brand-strong);
    padding-top: 14px; border-top: 1px solid var(--line);
}
[b-sat2bqdlbx] .up-section-title i { color: var(--blue); }
[b-sat2bqdlbx] .up-balance { display: flex; flex-wrap: wrap; gap: 10px; }
[b-sat2bqdlbx] .up-bal-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 14px; border-radius: var(--r-md); min-width: 120px;
    background: var(--soft); border: 1px solid var(--line);
}
[b-sat2bqdlbx] .up-bal-item > span { font-size: 11.5px; color: var(--muted); }
[b-sat2bqdlbx] .up-bal-item > strong { font-size: 16px; color: var(--ink); }
[b-sat2bqdlbx] .up-bal-item small { font-size: 12px; color: var(--muted); font-weight: 600; }
[b-sat2bqdlbx] .up-empty { padding: 14px; color: var(--muted); font-size: 13px; text-align: center; background: var(--soft); border-radius: var(--r-md); }
[b-sat2bqdlbx] .up-table { max-height: 220px; overflow-y: auto; }

/* status chips */
[b-sat2bqdlbx] .up-chip { display: inline-block; padding: 3px 10px; border-radius: var(--r-xl); font-size: 11.5px; font-weight: 700; }
[b-sat2bqdlbx] .up-pending   { background: var(--amber-soft); color: var(--amber-ink); }
[b-sat2bqdlbx] .up-approved  { background: var(--ok-soft); color: var(--ok-ink); }
[b-sat2bqdlbx] .up-rejected  { background: var(--red-soft); color: var(--red-ink); }
[b-sat2bqdlbx] .up-cancelled { background: var(--soft); color: var(--muted); }
/* /Components/Pages/AllowanceReport.razor.rz.scp.css */
/* Allowance-summary specifics only — the shared report chrome lives in app.css under `.report-page`. */

/* Why three money columns are missing, stated on the screen so an empty column never reads as a bug. */
.pending-note[b-c2xyhl6xc0] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 18px 4px;
    padding: 11px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--amber-line);
    background: var(--amber-soft);
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--amber-ink);
}

.pending-note i[b-c2xyhl6xc0] { font-size: 15px; margin-top: 2px; }

.money[b-c2xyhl6xc0] { color: var(--ok-ink); font-variant-numeric: tabular-nums; }
.no-rate[b-c2xyhl6xc0] { font-size: 11.5px; color: var(--red-ink); }

.st-warn[b-c2xyhl6xc0] {
    color: var(--amber-ink);
    background: var(--amber-soft);
    border-color: var(--amber-line);
    margin-inline-start: 6px;
}

.etag.money-tag[b-c2xyhl6xc0] { color: var(--ok-ink); border-color: var(--ok-line); background: var(--ok-soft); font-variant-numeric: tabular-nums; }

@media print {
    .pending-note[b-c2xyhl6xc0] { background: var(--panel) !important; }
}
/* /Components/Pages/Attendance.razor.rz.scp.css */
/* The `.att-badge` / `.att-{Status}` pills are GLOBAL now (app.css) — the project view wanted them too, and
   a third copy is how the first two drifted apart. */

/* Two-field row in the modal */
.field-row[b-akae8mnu0x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 640px) {
    .field-row[b-akae8mnu0x] { grid-template-columns: 1fr; }
}

/* Empty / error states */
.empty-state[b-akae8mnu0x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--ink);
    background: var(--panel);
    border: 1px dashed var(--info-line);
    border-radius: var(--r-lg);
}
.empty-state i[b-akae8mnu0x] { font-size: 30px; opacity: .55; }
.empty-state p[b-akae8mnu0x] { margin: 0; font-size: 14px; }

.form-error-card[b-akae8mnu0x] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--red-soft);
    color: var(--red-ink);
    border: 1px solid var(--red-line);
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 600;
}

.muted[b-akae8mnu0x] { color: var(--ink-2); font-size: 12px; }
/* Geofence verdict cell: the status pill, then the distance as a separate muted note (no «·» cramming) */
.verdict-cell[b-akae8mnu0x] { white-space: nowrap; }
.dist-note[b-akae8mnu0x] { color: var(--ink); font-size: 12px; margin-inline-start: 7px; font-variant-numeric: tabular-nums; }
.toolbar-result[b-akae8mnu0x] { color: var(--ink); font-size: 12px; align-self: center; }
.panel-header h3 i[b-akae8mnu0x] { color: var(--hero-accent); margin-inline-end: 4px; }
.panel-header h3 i.warn[b-akae8mnu0x] { color: var(--amber-ink); }

/* Shared filter bar controls all 3 tables; the action buttons sit at the end of the toolbar row. */
.att-actions[b-akae8mnu0x] { margin-inline-start: auto; display: flex; gap: 8px; }

/* The 3 tables share ONE reload overlay (the filter bar above stays interactive). */
.att-tables[b-akae8mnu0x] { position: relative; }
/* the tab bar controls the gap to the table — cancel each panel's default 16px top margin */
.att-tables > .panel[b-akae8mnu0x] { margin-top: 0; }
.reload-overlay[b-akae8mnu0x] {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 64px;                 /* float the card near the top, over the visible rows */
    background: color-mix(in srgb, var(--soft) 55%, transparent);   /* was a literal near-white — broke in dark mode */
    backdrop-filter: blur(2px);
    border-radius: var(--r-xl);
}
/* A floating pill — bolder + with depth, not flat text */
.reload-card[b-akae8mnu0x] {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 13px 24px;
    background: var(--panel);
    border: 1px solid var(--info-line);
    border-radius: 999px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--blue) 16%, transparent), var(--sh-sm);
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    animation: reload-pop-b-akae8mnu0x 0.18s ease-out;
}
.reload-ring[b-akae8mnu0x] {
    width: 22px;
    height: 22px;
    border: 3px solid var(--info-line);
    border-top-color: var(--hero-accent);
    border-radius: 50%;
    animation: shift-spin 0.7s linear infinite;   /* reuse the global keyframes */
}
@keyframes reload-pop-b-akae8mnu0x {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Date-range filter (من / إلى) in the toolbar */
.date-range[b-akae8mnu0x] { display: flex; align-items: center; gap: 6px; }
.date-range label[b-akae8mnu0x] { font-size: 12px; color: var(--ink); font-weight: 600; }
.date-range input[type="date"][b-akae8mnu0x] { width: auto; min-width: 150px; }


/* the 3 attendance tables are now tabs (records / errors / location) */
.att-tabs[b-akae8mnu0x] { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.att-tabs button[b-akae8mnu0x] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .14s, color .14s, background .14s, box-shadow .14s;
}
.att-tabs button i[b-akae8mnu0x] { font-size: 14px; opacity: .8; }
.att-tabs button:hover[b-akae8mnu0x] { border-color: var(--info-line); color: var(--blue-2); }
.att-tabs button.active[b-akae8mnu0x] {
    color: var(--on-brand);
    border-color: transparent;
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    box-shadow: 0 3px 8px color-mix(in srgb, var(--blue) 22%, transparent);
}
.att-tabs button.active i[b-akae8mnu0x] { opacity: 1; }
.att-tabs .tab-count[b-akae8mnu0x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 19px;
    padding: 0 7px;
    margin-inline-start: 1px;
    border-radius: 999px;
    background: var(--info-soft);
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.att-tabs button.active .tab-count[b-akae8mnu0x] { background: rgba(255, 255, 255, .28); color: var(--on-brand); }
.att-tabs .tab-count.warn[b-akae8mnu0x] { background: var(--red-soft); color: var(--red-ink); }
.att-tabs button.active .tab-count.warn[b-akae8mnu0x] { background: rgba(255, 255, 255, .3); color: var(--on-brand); }

/* Device findings only — amber, matching their badge in the table. Red is reserved for a REFUSED punch. */
.att-tabs .tab-count.review[b-akae8mnu0x] { background: var(--amber-soft); color: var(--amber-ink); }
.att-tabs button.active .tab-count.review[b-akae8mnu0x] { background: rgba(255, 255, 255, .3); color: var(--on-brand); }

/* `.att-onleave-warn` and `.att-manual-tag` are GLOBAL now (app.css) — the project view's attendance tab
   draws the same two flags, and a shared class cannot live in one page's scoped stylesheet. */

/* The «الجهاز» cell in «أخطاء الحضور»: which phone · how good the fix was · the two flags, on one line.
   Scoped here rather than global — only this table draws it. */
.device-cell[b-akae8mnu0x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.device-cell .bi-fingerprint[b-akae8mnu0x] {
    color: var(--ok);
    font-size: 14px;
}
.err-type-filter[b-akae8mnu0x] { min-width: 230px; }

/* The manual entry's «يوم مكتب» switch («الحضور من المكتب»). */
.office-toggle[b-akae8mnu0x] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

/* «سجل المواقع»: the refused attempts (owner, 2026-10-19). Red = refused, the house rule. */
.log-outcome[b-akae8mnu0x] { width: auto; min-width: 220px; }
.log-refused-note[b-akae8mnu0x] { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 10px; color: var(--red-ink, var(--red)); font-weight: 700; font-size: 12px; }
.data-table tr.log-refused td[b-akae8mnu0x] { background: color-mix(in srgb, var(--red) 6%, var(--panel)); }

/* The «إدخال يدوي» card filters the table to those days. */
.stat-card.clickable[b-akae8mnu0x] { cursor: pointer; }
.stat-card.is-selected[b-akae8mnu0x] { outline: 2px solid var(--blue); outline-offset: -2px; }
/* /Components/Pages/AttendanceReport.razor.rz.scp.css */
/* Attendance-report specifics only — the shared report chrome (toolbar, view toggle, meta strip,
   employee blocks, table, status pills, pager, print rules) lives in app.css under `.report-page`,
   because four report screens are planned and CSS isolation would force a copy into each. */

.report-table tr.row-absent td[b-hc9lckkjjw] { background: var(--panel); }
.report-table tr.row-off td[b-hc9lckkjjw] { background: var(--panel); color: var(--muted); }
.report-table tr.row-leave td[b-hc9lckkjjw] { background: var(--panel); }

/* Extra day markers this report adds beside the status pill. */
.st-hol[b-hc9lckkjjw] { color: var(--red-ink); background: var(--red-soft); border-color: var(--red-line); margin-inline-start: 4px; }
.st-warn[b-hc9lckkjjw] { color: var(--amber-ink); background: var(--amber-soft); border-color: var(--amber-line); margin-inline-start: 4px; }

.ot-type[b-hc9lckkjjw] { font-size: 10.5px; color: var(--muted); margin-inline-start: 5px; }

.src[b-hc9lckkjjw] { font-size: 11.5px; color: var(--muted); }
.src-Mission[b-hc9lckkjjw] { color: var(--brand-strong); font-weight: 600; }
.src-FieldTask[b-hc9lckkjjw] { color: var(--ok-ink); font-weight: 600; }
.src-Office[b-hc9lckkjjw] { color: var(--ink); font-weight: 600; }
.src-Leave[b-hc9lckkjjw] { color: var(--info); font-weight: 600; }

@media print {
    .report-table tr.row-absent td[b-hc9lckkjjw],
    .report-table tr.row-off td[b-hc9lckkjjw],
    .report-table tr.row-leave td[b-hc9lckkjjw] { background: var(--panel) !important; }
}
/* /Components/Pages/Audit.razor.rz.scp.css */
.audit-toolbar[b-oaay6raeum] { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.audit-toolbar .form-select[b-oaay6raeum] { max-width: 190px; }
.audit-toolbar .form-control[b-oaay6raeum] { max-width: 190px; }
.audit-toolbar input[type=text][b-oaay6raeum], .audit-toolbar input:not([type])[b-oaay6raeum] { flex: 1; min-width: 200px; max-width: none; }

.table-area[b-oaay6raeum] { position: relative; min-height: 120px; }

.nowrap[b-oaay6raeum] { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ink); }

/* .ent-badge / .act-badge MOVED to global app.css — the platform trail on /platform/tenants/{code} renders
   them too, and CSS isolation would have left them unstyled there. Fifth instance of that trap. */

/* before → after list inside the changes cell */
.changes[b-oaay6raeum] { display: flex; flex-direction: column; gap: 3px; max-width: 480px; }
.chg[b-oaay6raeum] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; flex-wrap: wrap; }
.chg-field[b-oaay6raeum] { font-weight: 700; color: var(--ink); }
.chg-old[b-oaay6raeum] { color: var(--red-ink); text-decoration: line-through; opacity: .8; }
.chg-new[b-oaay6raeum] { color: var(--ok-ink); font-weight: 600; }
.chg > i[b-oaay6raeum] { color: var(--ink); }
/* It announced that data was being withheld and did nothing about it — a dead grey label. It is the
   way IN to the full record now, so it looks like something you can press. */
.chg-more[b-oaay6raeum] {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 2px; padding: 2px 9px;
    border: 1px solid color-mix(in srgb, var(--blue) 28%, transparent);
    border-radius: 999px;
    background: var(--panel);
    color: var(--brand-strong);
    font-family: inherit; font-size: 11.5px; font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.chg-more:hover[b-oaay6raeum] { background: color-mix(in srgb, var(--blue) 8%, var(--panel)); }
.chg-more > i[b-oaay6raeum] { font-size: 10.5px; }

/* ── Full-record modal ───────────────────────────────────────────────────────────────────────────── */
.audit-detail .ad-meta[b-oaay6raeum] {
    display: flex; flex-wrap: wrap; gap: 10px 22px;
    padding: 12px 14px; margin-bottom: 14px;
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--soft);
}
.audit-detail .ad-meta > div[b-oaay6raeum] { display: flex; flex-direction: column; gap: 3px; }
.audit-detail .ad-l[b-oaay6raeum] { font-size: 11px; font-weight: 700; color: var(--muted); }
.audit-detail .ad-meta strong[b-oaay6raeum] { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }

.audit-detail .ad-fields[b-oaay6raeum] { display: flex; flex-direction: column; }
.audit-detail .ad-row[b-oaay6raeum] {
    display: grid;
    grid-template-columns: minmax(120px, 210px) 1fr;
    gap: 10px 14px;
    align-items: baseline;
    padding: 8px 4px;
    border-top: 1px solid var(--line);
}
.audit-detail .ad-row:first-child[b-oaay6raeum] { border-top: none; }
.audit-detail .ad-field[b-oaay6raeum] {
    font-size: 12.5px; font-weight: 700; color: var(--ink);
    word-break: break-word;
}
/* The whole point of the modal: values WRAP here instead of being cut at 40 characters. */
.audit-detail .ad-vals[b-oaay6raeum] {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
    font-size: 12.5px; min-width: 0;
    overflow-wrap: anywhere;
}
.audit-detail .ad-vals > i[b-oaay6raeum] { color: var(--muted); }

@media (max-width: 640px) {
    .audit-detail .ad-row[b-oaay6raeum] { grid-template-columns: 1fr; gap: 2px; }
}
/* /Components/Pages/CompanyProfile.razor.rz.scp.css */
/* CompanyProfile-specific styles only.
   Shared chrome (tenant bar, panels, modal, toast, confirm dialog, buttons,
   alerts, table) lives in app.css so every setup screen reuses it. */

/* Panels */
.panel[b-4rbp6sn6g0] {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    /* ⚠️ This whole rule is a stale COPY of the global `.panel` from before the radius sweep pulled panels
       xl→lg — which is why these two pages still have bigger corners than the other thirty. Declaring
       `--panel-radius` keeps the full-bleed table's bottom corners matching THIS panel until the copy goes. */
    --panel-radius: var(--r-xl);
    border-radius: var(--panel-radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.panel-header[b-4rbp6sn6g0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.panel-header h3[b-4rbp6sn6g0] {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
}

.panel-actions[b-4rbp6sn6g0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Logo row */
.logo-row[b-4rbp6sn6g0] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.company-avatar[b-4rbp6sn6g0] {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--sidebar), var(--blue));
    color: var(--on-brand);
    font-size: 24px;
    font-weight: 900;
}

/* Badges */
.badge-new[b-4rbp6sn6g0] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    background: var(--amber-soft);
    color: var(--amber-ink);
    font-size: 11px;
    font-weight: 700;
    margin-top: 3px;
}

.coming-soon-badge[b-4rbp6sn6g0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--r-md);
    background: var(--soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--line);
}

.branches-count[b-4rbp6sn6g0] {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}

/* Empty branches */
.empty-branches[b-4rbp6sn6g0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    color: var(--muted);
    text-align: center;
    gap: 10px;
}

.empty-branches i[b-4rbp6sn6g0] { font-size: 32px; }
.empty-branches p[b-4rbp6sn6g0] { margin: 0; max-width: 400px; font-size: 14px; }

/* Logo upload */
.logo-upload[b-4rbp6sn6g0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.company-logo-img[b-4rbp6sn6g0] {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: var(--r-lg);
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--panel);
}

.logo-upload-btn[b-4rbp6sn6g0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--soft);
    color: var(--blue-2);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.logo-upload-btn:hover[b-4rbp6sn6g0] { background: var(--info-soft); }

/* Map section */
.map-section[b-4rbp6sn6g0] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.map-placeholder[b-4rbp6sn6g0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    margin: 8px 0 12px;
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    background: var(--soft);
    color: var(--muted);
    font-size: 13px;
}

.map-placeholder i[b-4rbp6sn6g0] { font-size: 22px; }

.map-hint[b-4rbp6sn6g0] {
    font-size: 12px;
    color: var(--muted);
    margin: 4px 0 8px;
}

.map-search-row[b-4rbp6sn6g0] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.map-search-row input[b-4rbp6sn6g0] { flex: 1; }
.map-search-row .btn-ghost[b-4rbp6sn6g0] { white-space: nowrap; }

#branchMap[b-4rbp6sn6g0] {
    width: 100%;
    height: 320px;
    border-radius: var(--r-lg);
    margin: 8px 0 12px;
    border: 1px solid var(--line);
    background: var(--info-soft);
}
/* /Components/Pages/Employees.razor.rz.scp.css */

/* «جهاز البصمة» in the employee modal — the phone the device lock judges his punches against. */
.emp-device-row[b-eksans56ck] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.emp-device-id[b-eksans56ck] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--r-xl);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--soft);
    color: var(--ink);
    border: 1px solid var(--line);
}

/* The directory row stays ONE line: every cell is nowrap, and only the job title — the one long, free-text value —
   wraps, inside a capped width (owner, 2026-10-11: «صغر شوية خانة الوظيفة بحيث ان باقي الاعمدة متبقاش علي two line»). */
.data-table th[b-eksans56ck],
.data-table td[b-eksans56ck] {
    white-space: nowrap;
}

.data-table td.job-cell[b-eksans56ck] {
    white-space: normal;
    min-width: 140px;
    max-width: 200px;
}
/* /Components/Pages/Expenses.razor.rz.scp.css */
/* Only what this screen invents — the panel, table, modal and stat-card chrome are global. */

/* Queue tabs. Not the report pages' `.rt-view`: those are scoped to their own components, and a class two
   pages share cannot live in one page's isolated file. */
.exp-tabs[b-dppdo69ywa] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.exp-tab[b-dppdo69ywa] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s ease;
}

.exp-tab:hover[b-dppdo69ywa] { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); }

.exp-tab.active[b-dppdo69ywa] {
    background: var(--blue-soft);
    border-color: color-mix(in srgb, var(--blue) 40%, var(--panel));
    color: var(--brand-strong);
}

.tab-count[b-dppdo69ywa] {
    font-size: 11px;
    font-weight: 700;
    background: var(--soft);
    color: var(--muted);
    border-radius: 999px;
    padding: 1px 7px;
    font-variant-numeric: tabular-nums;
}

.exp-tab.active .tab-count[b-dppdo69ywa] { background: var(--panel); color: var(--brand-strong); }

/* Money waiting on finance is the one count worth interrupting for. */
.tab-count.warn[b-dppdo69ywa] {
    background: color-mix(in srgb, var(--amber) 22%, var(--panel));
    color: var(--amber-ink);
}

.search-input[b-dppdo69ywa] { max-width: 260px; }

/* Claims vs custody — two SECTIONS of the screen. A tab bar says that; two filled buttons side by side read
   as two actions. The rule is bled to the panel edges (.panel already pads 18px) so it spans the full width
   like a real tab strip instead of floating in the middle. */
.view-tabs[b-dppdo69ywa] {
    display: flex;
    gap: 26px;
    margin: 2px -18px 16px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
}

.view-tab[b-dppdo69ywa] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: none;
    color: var(--muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 4px 2px 12px;
    cursor: pointer;
    transition: color .15s ease;
}

.view-tab:hover[b-dppdo69ywa] { color: var(--ink); }
.view-tab.active[b-dppdo69ywa] { color: var(--brand-strong); }

/* The underline sits ON the strip's border, so the active tab reads as connected to its content. */
.view-tab.active[b-dppdo69ywa]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--brand-strong);
}

/* No horizontal padding — .panel already provides 18px, and adding more inset these blocks past the tables. */
.sub-head[b-dppdo69ywa] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 18px 0 10px;
}

/* The first one already has the tab strip's margin above it — don't stack two gaps. */
.table-area > .sub-head:first-child[b-dppdo69ywa] { padding-top: 2px; }

.sub-head h4[b-dppdo69ywa] {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}

/* Filters sit on ONE row, each sized to its content. `.form-control` is 100% wide by default, which is what
   put every filter on its own full-width row. */
.ledger-filters[b-dppdo69ywa] {
    align-items: flex-end;
}

.filter-field[b-dppdo69ywa] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-field > label[b-dppdo69ywa] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
}

.filter-field .form-select[b-dppdo69ywa],
.filter-field .form-control[b-dppdo69ywa] {
    width: auto;
    min-width: 170px;
}

.clear-filters[b-dppdo69ywa] { margin-bottom: 2px; }

/* How many rows the filters actually left — otherwise a narrowed list looks like the whole ledger. */
.ledger-count[b-dppdo69ywa] {
    margin-inline-start: auto;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* «المتاح» is the answer to the question the table is asked — it should not weigh the same as its inputs. */
.wallet-table td.available[b-dppdo69ywa] {
    font-weight: 800;
    font-size: 15px;
    color: var(--ink);
}

/* The company owing an employee is a real state, not an error — amber, and said in words beside the number. */
.owed[b-dppdo69ywa] { color: var(--amber-ink); font-weight: 700; }

.kind-pill[b-dppdo69ywa] {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.k-Topup[b-dppdo69ywa] {
    background: color-mix(in srgb, var(--ok) 14%, var(--panel));
    color: var(--ok);
    border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--panel));
}

.k-Return[b-dppdo69ywa] {
    background: color-mix(in srgb, var(--blue) 10%, var(--panel));
    color: var(--brand-strong);
    border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--panel));
}

/* A correcting entry is the ONLY way a mistake is fixed here, so it should stand out in the ledger. */
.k-Adjustment[b-dppdo69ywa] {
    background: color-mix(in srgb, var(--amber) 16%, var(--panel));
    color: var(--amber-ink);
    border: 1px solid color-mix(in srgb, var(--amber) 36%, var(--panel));
}

.data-table td.in[b-dppdo69ywa] { color: var(--ok); font-weight: 700; }
.data-table td.out[b-dppdo69ywa] { color: var(--ink); font-weight: 700; }

.exp-who[b-dppdo69ywa] { font-size: 11px; color: var(--muted); margin-top: 3px; }
.exp-desc[b-dppdo69ywa] { max-width: 320px; }

.btn-sm[b-dppdo69ywa] { font-size: 12px; padding: 6px 12px; }
.mono[b-dppdo69ywa] { font-variant-numeric: tabular-nums; }

/* ── Review dialog ───────────────────────────────────────────────────────────── */

.review-grid[b-dppdo69ywa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.review-grid > div[b-dppdo69ywa] {
    background: var(--soft);
    border-radius: var(--r-md);
    padding: 9px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.review-grid span[b-dppdo69ywa] { font-size: 11px; color: var(--muted); font-weight: 600; }
.review-grid strong[b-dppdo69ywa] { font-size: 14px; color: var(--ink); }

/* A missing receipt is the single most common reason a claim gets refused — say it in red, not in grey. */
.review-grid strong.no-receipt[b-dppdo69ywa] { color: var(--red); font-weight: 600; }

/* Full width rather than a cell in the grid above: a mission name plus a project name is a sentence, and the
   grid's 140px columns would wrap both onto three lines each. */
.review-where[b-dppdo69ywa] {
    background: var(--soft);
    border-radius: var(--r-md);
    padding: 9px 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.review-where > span[b-dppdo69ywa] { font-size: 11px; color: var(--muted); font-weight: 600; }

/* The evidence itself, shown at a size you can actually read before deciding. */
.receipt-box[b-dppdo69ywa] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 10px;
    margin-bottom: 12px;
}

.receipt-img[b-dppdo69ywa] {
    max-width: 100%;
    max-height: 320px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--panel);
    cursor: zoom-in;
    display: block;
}

.receipt-err[b-dppdo69ywa] { font-size: 12.5px; color: var(--red); font-weight: 600; }

.review-desc[b-dppdo69ywa] {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 12px;
}

/* What the first reviewer already decided — finance should not have to go looking for it. */
.review-prev[b-dppdo69ywa] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--ok) 8%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--ok) 25%, var(--panel));
    border-radius: var(--r-md);
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--ok);
    margin-bottom: 12px;
}

.review-balance[b-dppdo69ywa] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--blue) 6%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--panel));
    border-radius: var(--r-md);
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--brand-strong);
    margin-bottom: 12px;
}

/* A negative wallet is the company owing the employee, not an error — amber, not red. */
.review-balance strong.owed[b-dppdo69ywa] { color: var(--amber-ink); }

.form-hint[b-dppdo69ywa] {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.7;
    margin: -4px 0 10px;
}

@media (max-width: 720px) {
    .search-input[b-dppdo69ywa] { max-width: 100%; }
}

/* A claim whose two signatures are the same person — two stages, one pair of eyes. Shown whether or not the
   tenant REQUIRES separate reviewers: when it does not, this is how the money side can still ask the question. */
.exp-one-eye[b-dppdo69ywa] {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 4px; padding: 2px 7px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    color: var(--amber-ink); background: var(--amber-lt);
    border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
}
.exp-one-eye i[b-dppdo69ywa] { font-size: 11px; }

/* Said to the finance reviewer BEFORE he signs, not after: he approved this one as the manager. */
.review-one-eye[b-dppdo69ywa] {
    display: flex; gap: 8px; align-items: flex-start;
    margin-top: 10px; padding: 11px 13px; border-radius: var(--r-lg);
    font-size: 12.5px; font-weight: 600; line-height: 1.7;
    color: var(--amber-ink); background: var(--amber-lt);
    border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
}
.review-one-eye i[b-dppdo69ywa] { color: var(--amber); flex-shrink: 0; margin-top: 2px; }

/* The reason is the only thing the approver is actually being asked to judge, so it gets
   room to be read — but capped, because one long sentence must not push the action button
   off a narrow screen. */
.req-reason[b-dppdo69ywa] {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The ledger code on a disbursed row: present so the hand-over is traceable, muted because
   nobody reads it until something is being reconciled. */
.muted-note[b-dppdo69ywa] {
    color: var(--muted);
    font-size: 11px;
}

/* «الشركة مدينة له» beside a negative balance. Amber, not red: the company owing an employee
   money is a fact to weigh when deciding an advance, not a failure. */
.owed-note[b-dppdo69ywa] {
    margin-inline-start: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--amber) 14%, var(--panel));
    color: color-mix(in srgb, var(--amber) 78%, var(--ink));
    font-size: 11px;
    font-weight: 700;
}
/* /Components/Pages/ExpenseSetup.razor.rz.scp.css */
/* Only what this screen invents. */

/* The policy is ONE row in the database, so it reads as labelled RULES rather than a table with a single
   line in it. Each one carries the sentence explaining what its number does — these are decisions, and the
   person changing them a year from now will not remember why 200. */
.policy-body[b-rz2dsw36wp] { padding: 6px 18px 18px; }

/* ⚠️ TWO FAILED LAYOUTS BEFORE THIS ONE, and both failed the same way — they treated a SENTENCE as a tile.
   (1) One `auto-fit` row of seven fields: on a wide screen it fitted seven columns, so every hint wrapped to
       six lines in a ~270px box (owner: «التصميم مش حلو خالص ومتداخل»).
   (2) Three group CARDS side by side: the same squeeze one level up (owner: «ما تعملهم كده تحت بعض أفضل»),
       plus a genuine bug — `grid-column: 1 / -1` on the group title meant EVERY auto-fit track contained an
       item, so none of them collapsed and three fields sat in a seven-track grid with half the row dead.

   The shape a settings screen actually wants is a ROW per rule: what it is on the reading side, what it is
   set to on the other, separated by hairlines. The explanation gets a whole column, the value gets a narrow
   fixed one, and nothing nests — the old version was a grey box inside a white card inside a white panel,
   three levels of box for one number. */
/* Full width, on the owner's call (2026-09-17: «متكلمها للآخر»). A cap was tried and he preferred the
   panel used to the end — which also gives each hint enough room to sit on ONE line. */
.policy-sections[b-rz2dsw36wp] { display: flex; flex-direction: column; gap: 22px; }

.policy-section > h4[b-rz2dsw36wp] {
    margin: 0 0 2px;
    padding-bottom: 9px;
    border-bottom: 2px solid color-mix(in srgb, var(--blue) 22%, transparent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--blue-2);
    display: flex;
    align-items: center;
    gap: 7px;
}

.policy-section > h4 > i[b-rz2dsw36wp] { font-size: 14px; color: var(--blue); }

.policy-row[b-rz2dsw36wp] {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--line);
}

.policy-row:last-child[b-rz2dsw36wp] { border-bottom: 0; padding-bottom: 4px; }

/* min-width:0 so a long sentence wraps inside the row instead of pushing the value column off the edge. */
.policy-row-text[b-rz2dsw36wp] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.policy-row-text > label[b-rz2dsw36wp] { font-size: 13.5px; font-weight: 700; color: var(--ink); }

/* One fixed column for every value, so the numbers line up down the panel and the eye can scan them. */
.policy-row-value[b-rz2dsw36wp] {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
    min-height: 34px;
}

.policy-row-value > strong[b-rz2dsw36wp] { font-size: 19px; color: var(--ink); }
.policy-row-value .form-control[b-rz2dsw36wp] { width: 100%; }

@media (max-width: 720px) {
    .policy-row[b-rz2dsw36wp] { flex-direction: column; gap: 9px; }
    .policy-row-value[b-rz2dsw36wp] { flex: 1 1 auto; width: 100%; }
}

.policy-hint[b-rz2dsw36wp] {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.7;
    /* No measure cap: «خلي السطور دي على سطر واحد وتكمل لو عدّت العرض بتاعها» — the sentence runs to the
       width it has and wraps only when it genuinely runs out, rather than being folded early by a cap. */
}

.policy-actions[b-rz2dsw36wp] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

/* Says plainly that the numbers on screen are not saved yet — otherwise defaults look like settings. */
.policy-default-note[b-rz2dsw36wp] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--blue) 6%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--panel));
    font-size: 12.5px;
    color: var(--brand-strong);
}

.cat-name[b-rz2dsw36wp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cat-name i[b-rz2dsw36wp] { color: var(--brand-strong); font-size: 15px; }

.cat-flag[b-rz2dsw36wp] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
}

/* A category that always demands proof is the exception worth spotting in a list. */
.cat-flag.req[b-rz2dsw36wp] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--amber-ink);
    background: color-mix(in srgb, var(--amber) 15%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--panel));
    border-radius: 999px;
    padding: 2px 9px;
}

.cat-status[b-rz2dsw36wp] {
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 10px;
}

.cat-status.on[b-rz2dsw36wp] {
    background: color-mix(in srgb, var(--ok) 15%, var(--panel));
    color: var(--ok);
    border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--panel));
}

.cat-status.off[b-rz2dsw36wp] {
    background: var(--soft);
    color: var(--muted);
    border: 1px solid var(--line);
}

.cat-check[b-rz2dsw36wp] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0 4px;
    cursor: pointer;
}

.cat-check span[b-rz2dsw36wp] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cat-check small[b-rz2dsw36wp] {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.6;
}

.muted-sm[b-rz2dsw36wp] { font-size: 12px; color: var(--muted); }
.mono[b-rz2dsw36wp] { font-variant-numeric: tabular-nums; }

/* The separate-reviewers switch — a checkbox among number fields, so it needs its own row shape. */
/* /Components/Pages/Governorates.razor.rz.scp.css */
/* Map location-picker chrome (mirrors the branch / SPC picker; point-only — no geofence circle). */
.map-section[b-icm9dreewe] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.map-placeholder[b-icm9dreewe] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    margin: 8px 0 12px;
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    background: var(--soft);
    color: var(--muted);
    font-size: 13px;
}

.map-placeholder i[b-icm9dreewe] { font-size: 22px; }

.map-hint[b-icm9dreewe] {
    font-size: 12px;
    color: var(--muted);
    margin: 4px 0 8px;
}

.map-search-row[b-icm9dreewe] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.map-search-row input[b-icm9dreewe] { flex: 1; }
.map-search-row .btn-ghost[b-icm9dreewe] { white-space: nowrap; }

#govMap[b-icm9dreewe] {
    width: 100%;
    height: 320px;
    border-radius: var(--r-lg);
    margin: 8px 0 12px;
    border: 1px solid var(--line);
    background: var(--info-soft);
}

/* Auto-computed distance-to-capital (read-only mirror of the server's GeoDistance) */
.auto-tag[b-icm9dreewe] {
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--info-soft);
    color: var(--blue-2);
    margin-inline-start: 6px;
    vertical-align: middle;
}
.auto-distance-field[b-icm9dreewe] {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--info-line);
    border-radius: var(--r-md);
    background: var(--info-soft);
}
.auto-distance-field strong[b-icm9dreewe] { font-size: 17px; font-weight: 800; color: var(--blue-2); }
.auto-distance-field .adf-na[b-icm9dreewe] { color: var(--muted); font-size: 13px; }

/* The governorate table is the basis of the travel allowance (owner, 2026-11-01). */
.gov-basis-note[b-icm9dreewe] {
    display: flex; gap: 8px; align-items: flex-start;
    margin: 0 0 12px; padding: 10px 14px;
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--panel));
    background: color-mix(in srgb, var(--blue) 6%, var(--panel));
    color: var(--brand-strong); font-size: 13px; line-height: 1.8;
}
.recompute-panel[b-icm9dreewe] {
    margin: 0 0 14px; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft);
}
.recompute-head[b-icm9dreewe] { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.recompute-actions[b-icm9dreewe] { display: flex; gap: 8px; margin-top: 10px; }
.recompute-panel tr.band-changed td[b-icm9dreewe] { background: var(--amber-soft); }
.dist-src[b-icm9dreewe] { font-size: 11px; color: var(--muted); margin-inline-start: 4px; }
.tband[b-icm9dreewe] { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
         border: 1px solid var(--line); color: var(--ink-2); background: var(--panel); white-space: nowrap; }
.tband-Travel[b-icm9dreewe], .tband-LongTravel[b-icm9dreewe] { border-color: color-mix(in srgb, var(--blue) 40%, var(--panel)); color: var(--brand-strong); }
.tband-LongTravel[b-icm9dreewe] { background: color-mix(in srgb, var(--blue) 8%, var(--panel)); }
.tband-Unknown[b-icm9dreewe] { border-color: var(--amber-line); color: var(--amber-ink); background: var(--amber-soft); }
/* /Components/Pages/LeaderDayReport.razor.rz.scp.css */
/* The KPI cards filter the table, so they are buttons that look like the ordinary cards. */
.ld-card[b-btmvwboegf] { border: 1px solid var(--line); text-align: start; cursor: pointer; font: inherit; }
.ld-card.on[b-btmvwboegf] { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 25%, transparent); }

.ld-day[b-btmvwboegf] { display: flex; align-items: center; gap: 6px; }
.ld-day input[b-btmvwboegf] { width: 160px; }

.ld-table td[b-btmvwboegf] { vertical-align: top; }
.ld-person[b-btmvwboegf] { min-width: 190px; }
.ld-person strong[b-btmvwboegf] { display: block; color: var(--ink); }
.ld-role[b-btmvwboegf] {
    display: inline-block; margin: 3px 0; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--blue) 45%, transparent); color: var(--brand-strong);
}
.ld-role.tl[b-btmvwboegf] { border-color: var(--line-2); color: var(--ink-2); }
.ld-person .muted-sm[b-btmvwboegf] { display: block; }
.ld-time[b-btmvwboegf] { font-variant-numeric: tabular-nums; }

.ld-state[b-btmvwboegf] { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--soft); color: var(--ink-2); }
.ld-state.st-OnSite[b-btmvwboegf] { background: var(--blue-soft); color: var(--brand-strong); }
.ld-state.st-Done[b-btmvwboegf] { background: var(--ok-soft); color: var(--ok); }
.ld-state.st-NotPunched[b-btmvwboegf] { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber-ink, var(--amber)); }
.ld-state.st-OnLeave[b-btmvwboegf] { background: color-mix(in srgb, var(--info, var(--blue)) 14%, transparent); color: var(--ink); }
.ld-state.st-NoAssignment[b-btmvwboegf] { background: var(--soft); color: var(--muted); }

.ld-stops[b-btmvwboegf] { min-width: 460px; }

/* One stop = what (mission, project, place) on the start side, and when (in / out / status) on the end side,
   so the times line up down the column instead of trailing after a name of any length. */
.ld-stop[b-btmvwboegf] {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
    padding: 9px 12px; margin-bottom: 6px;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel);
}
.ld-stop:last-child[b-btmvwboegf] { margin-bottom: 0; }
.ld-stop-body[b-btmvwboegf] { min-width: 0; flex: 1; }
.ld-stop-main[b-btmvwboegf] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.ld-stop-main > i[b-btmvwboegf] { color: var(--muted); }
.ld-task[b-btmvwboegf] { color: var(--ink); }
.ld-code[b-btmvwboegf] { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.ld-unseen[b-btmvwboegf] { font-size: 11.5px; color: var(--amber); font-weight: 600; }
.ld-stop-meta[b-btmvwboegf] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }
.ld-project[b-btmvwboegf] { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ld-punch[b-btmvwboegf] { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.ld-punch-times[b-btmvwboegf] { display: flex; gap: 12px; font-size: 12.5px; white-space: nowrap; }
.ld-punch-times em[b-btmvwboegf] { font-style: normal; color: var(--muted); margin-inline-end: 3px; }
.ld-punch-times b[b-btmvwboegf] { font-variant-numeric: tabular-nums; color: var(--ink); }
.att-badge.ld-live[b-btmvwboegf] { background: var(--blue-soft); color: var(--brand-strong); }
.ld-out[b-btmvwboegf] { color: var(--red); font-size: 12px; font-weight: 600; }

/* Leave and إذن are lines of the day, above the stops. */
.ld-note[b-btmvwboegf] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; margin-bottom: 6px;
    border-radius: var(--r-md); font-size: 13px;
}
.ld-note.leave[b-btmvwboegf] { background: color-mix(in srgb, var(--blue) 9%, var(--panel)); color: var(--ink); }
.ld-note.permission[b-btmvwboegf] { background: color-mix(in srgb, var(--amber) 12%, var(--panel)); color: var(--ink); }
.ld-note i[b-btmvwboegf] { color: var(--muted); }
.ld-note-warn[b-btmvwboegf] { color: var(--amber); font-weight: 600; font-size: 12px; }
.ld-empty[b-btmvwboegf] { color: var(--muted); font-size: 13px; }
.ld-time[b-btmvwboegf] { font-variant-numeric: tabular-nums; }
.nowrap[b-btmvwboegf] { white-space: nowrap; }
/* /Components/Pages/LeaveBalanceReport.razor.rz.scp.css */
/* Leave-balance specifics only — the shared report chrome (incl. `.gap-note`) lives in app.css under
   `.report-page`. It was defined HERE first, which meant CSS isolation kept it from the org-structure report
   that also uses it — the banner rendered unstyled there. */

.report-table tr.row-noplan td[b-4wcsyxnup7] { background: var(--panel); }

.st-warn[b-4wcsyxnup7] { color: var(--amber-ink); background: var(--amber-soft); border-color: var(--amber-line); }

.ok[b-4wcsyxnup7] { color: var(--ok-ink); }
.dim[b-4wcsyxnup7] { color: var(--muted); }

/* used / entitled in one cell — the number that matters first, the entitlement muted behind it. */
.bal[b-4wcsyxnup7] { font-variant-numeric: tabular-nums; font-weight: 600; }
.bal-sep[b-4wcsyxnup7] { color: var(--muted); margin-inline: 2px; font-weight: 400; }

.src-tag[b-4wcsyxnup7] {
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 9px;
    border: 1px solid var(--line);
    background: var(--soft);
    color: var(--muted);
    white-space: nowrap;
}

.src-SharedAnnual[b-4wcsyxnup7] { color: var(--info); background: var(--info-soft); border-color: var(--info-line); }
.src-OwnPool[b-4wcsyxnup7] { color: var(--ok-ink); background: var(--ok-soft); border-color: var(--ok-line); }
.src-Mixed[b-4wcsyxnup7] { color: var(--red-ink); background: var(--red-soft); border-color: var(--red-line); }
.src-Unpaid[b-4wcsyxnup7] { color: var(--muted); }

@media print {
    .report-table tr.row-noplan td[b-4wcsyxnup7] { background: var(--panel) !important; }
    .src-tag[b-4wcsyxnup7] { background: var(--panel) !important; border-color: var(--line-2) !important; }
}
/* /Components/Pages/Leaves.razor.rz.scp.css */
.lv-toolbar[b-3tuihy0nro] { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lv-toolbar .form-select[b-3tuihy0nro] { max-width: 190px; }
.lv-toolbar .form-control[type=date][b-3tuihy0nro] { max-width: 170px; }
.lv-toolbar input:not([type=date])[b-3tuihy0nro] { flex: 1; min-width: 200px; }

.table-area[b-3tuihy0nro] { position: relative; min-height: 120px; }
.nowrap[b-3tuihy0nro] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.reason-cell[b-3tuihy0nro] { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* leave-type badge */
.lv-type[b-3tuihy0nro] {
    display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
    background: var(--info-soft); color: var(--info); white-space: nowrap;
}

/* status pill */
.pstatus[b-3tuihy0nro] { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.pstatus-pending[b-3tuihy0nro] { background: var(--amber-soft); color: var(--amber-ink); }
.pstatus-approved[b-3tuihy0nro] { background: var(--ok-soft); color: var(--ok-ink); }
.pstatus-rejected[b-3tuihy0nro] { background: var(--red-soft); color: var(--red-ink); }
.pstatus-cancelled[b-3tuihy0nro] { background: var(--info-soft); color: var(--ink); }

/* .btn-review is defined once in global app.css — it was byte-copied into both review pages,
   and the copy here is what kept the hero gradient on a button too small to carry one. */
.decided-by[b-3tuihy0nro] { font-size: 12.5px; color: var(--ink); font-weight: 600; }

/* review modal */
.lv-modal[b-3tuihy0nro] { max-width: 560px; }
.review-grid[b-3tuihy0nro] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.review-grid > div[b-3tuihy0nro] { display: flex; flex-direction: column; gap: 2px; }
.review-grid .review-full[b-3tuihy0nro] { grid-column: 1 / -1; }
.review-grid .rl[b-3tuihy0nro] { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.review-grid strong[b-3tuihy0nro] { font-size: 14px; color: var(--ink); }
.form-label.mt[b-3tuihy0nro] { display: block; margin-top: 16px; margin-bottom: 6px; font-weight: 600; }
.review-error[b-3tuihy0nro] {
    margin-top: 12px; padding: 9px 12px; border-radius: var(--r-md); font-size: 13px; font-weight: 600;
    background: var(--red-soft); color: var(--red-ink); display: flex; align-items: center; gap: 7px;
}

/* manager-cancel of an approved leave (worked-while-on-leave exception) */
.approved-actions[b-3tuihy0nro] { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-cancel-leave[b-3tuihy0nro] {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    padding: 4px 10px; border-radius: var(--r-md); font-size: 12px; font-weight: 700;
    background: var(--red-soft); color: var(--red); border: 1px solid var(--red-line);
}
.btn-cancel-leave:hover[b-3tuihy0nro] { background: var(--red-soft); }
/* /Components/Pages/MissionForm.razor.rz.scp.css */
/* Mission form — mirrors ProjectForm's scoped form chrome (scope blocks, chips, map area). */

.badge-soft[b-wnndbtvkht] {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--info-soft);
    color: var(--blue-2);
    font-size: 12px;
    font-weight: 700;
}

/* Location-mode radios + employee chip multiselect */
.scope-grid[b-wnndbtvkht] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.scope-opt[b-wnndbtvkht] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
}

.scope-opt.on[b-wnndbtvkht] {
    border-color: var(--blue);
    background: var(--info-soft);
    color: var(--blue-2);
}

.scope-opt input[b-wnndbtvkht] { accent-color: var(--blue); }

/* Inherited-location read-only block + map */
.map-section[b-wnndbtvkht] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.map-placeholder[b-wnndbtvkht] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    margin: 8px 0 12px;
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    background: var(--soft);
    color: var(--muted);
    font-size: 13px;
}

.map-placeholder i[b-wnndbtvkht] { font-size: 22px; }

#missionMap[b-wnndbtvkht] {
    width: 100%;
    height: 320px;
    border-radius: var(--r-lg);
    margin: 8px 0 4px;
    border: 1px solid var(--line);
    background: var(--info-soft);
}

/* Inherited-location compact summary (read-only) + map toggle */
.loc-head[b-wnndbtvkht] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.loc-head .form-label[b-wnndbtvkht] { margin: 0; }

.loc-map-btn[b-wnndbtvkht] {
    padding: 5px 11px;
    font-size: 12px;
    white-space: nowrap;
}

.loc-summary[b-wnndbtvkht] {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    background: var(--soft);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.loc-line-main[b-wnndbtvkht] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14.5px;
}

.loc-line-main > i[b-wnndbtvkht] { color: var(--blue-2); font-size: 16px; }
.loc-line-main strong[b-wnndbtvkht] { font-weight: 800; color: var(--ink, var(--ink)); }
.loc-dot[b-wnndbtvkht] { color: var(--muted); }

.loc-chip[b-wnndbtvkht] {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--info-soft);
    color: var(--blue-2);
    font-size: 12.5px;
    font-weight: 700;
}

.loc-addr[b-wnndbtvkht] {
    font-size: 13px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loc-coords[b-wnndbtvkht] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.loc-coords > i[b-wnndbtvkht] { font-size: 13px; }

.loc-gmaps[b-wnndbtvkht] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
    color: var(--blue-2);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.loc-gmaps:hover[b-wnndbtvkht] { text-decoration: underline; }
.loc-gmaps i[b-wnndbtvkht] { font-size: 12px; }

/* Inherited-location map popup */
.map-modal[b-wnndbtvkht] { width: min(760px, calc(94vw / var(--ui-scale))); }

.map-modal #missionMap[b-wnndbtvkht] {
    height: calc(58vh / var(--ui-scale));
    max-height: 460px;
    margin: 0;
    border-radius: var(--r-lg);
}

.map-modal-foot[b-wnndbtvkht] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.map-modal-addr[b-wnndbtvkht] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .scope-grid[b-wnndbtvkht] { grid-template-columns: 1fr; }
}

/* Type + Status on one row: type a fixed width, status pills take the rest */
.type-status-row[b-wnndbtvkht] {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.type-status-row .field-group[b-wnndbtvkht] { margin: 0; }
.type-status-row .ts-type[b-wnndbtvkht] { flex: 0 0 240px; }
.type-status-row .ts-status[b-wnndbtvkht] { flex: 1 1 auto; min-width: 0; }

@media (max-width: 820px) {
    .type-status-row[b-wnndbtvkht] { flex-direction: column; gap: 14px; }
    .type-status-row .ts-type[b-wnndbtvkht] { flex-basis: auto; width: 100%; }
}

/* Mission-status segmented pill selector (replaces the status dropdown) */
.status-pills[b-wnndbtvkht] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.status-pill[b-wnndbtvkht] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink, var(--ink));
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}

.status-pill:hover[b-wnndbtvkht] { border-color: var(--blue); }
.status-pill i[b-wnndbtvkht] { font-size: 13px; }

/* Selected → fill with the status' semantic tint */
.status-pill.sp-auto.on[b-wnndbtvkht]       { background: var(--info-soft); border-color: #8b5cf6; color: var(--red-ink); }
.status-pill.sp-scheduled.on[b-wnndbtvkht]  { background: var(--blue-soft); border-color: var(--hero-accent); color: var(--brand-strong); }
.status-pill.sp-inprogress.on[b-wnndbtvkht] { background: var(--ok-soft); border-color: #2f9e6f; color: var(--ok-ink); }
.status-pill.sp-completed.on[b-wnndbtvkht]  { background: var(--ok-soft); border-color: #0f766e; color: var(--info); }
.status-pill.sp-pending.on[b-wnndbtvkht]    { background: var(--amber-soft); border-color: #c47d04; color: var(--amber-ink); }
.status-pill.sp-cancelled.on[b-wnndbtvkht]  { background: var(--red-soft); border-color: #c0392b; color: var(--red-ink); }

/* Past mission → read-only. Reset the fieldset's UA chrome; dim it slightly when disabled. */
/* The fieldset wraps all sections, so it (not .proj-sections) is the grid parent —
   carry the same 16px gap or the section cards stick together with no spacing. */
.locked-zone[b-wnndbtvkht] {
    display: grid;
    gap: 16px;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.locked-zone:disabled[b-wnndbtvkht] { opacity: .72; }

.locked-banner[b-wnndbtvkht] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 12px 16px;
    border: 1px solid var(--amber-line);
    border-radius: var(--r-lg);
    background: var(--amber-soft);
    color: var(--amber-ink);
    font-size: 14px;
    font-weight: 600;
}

.locked-banner > i[b-wnndbtvkht] { font-size: 17px; }

/* Team-origin auto-filled from the company governorate (read-only display + override link) */
.origin-auto[b-wnndbtvkht] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 46px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--soft);
}

.origin-auto > span[b-wnndbtvkht] { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink, var(--ink)); }
.origin-auto > span > i[b-wnndbtvkht] { color: var(--blue-2); font-size: 16px; }
.origin-auto em[b-wnndbtvkht] { font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--muted); }

.origin-link[b-wnndbtvkht] {
    background: none;
    border: none;
    padding: 0;
    margin-top: 6px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--blue-2);
    cursor: pointer;
    white-space: nowrap;
}

.origin-auto .origin-link[b-wnndbtvkht] { margin-top: 0; }
.origin-link:hover[b-wnndbtvkht] { text-decoration: underline; }

/* Same-governorate → no travel/overnight: calm note fills the travel-rule grid cell */
.travel-none[b-wnndbtvkht] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid var(--ok-line);
    border-radius: var(--r-lg);
    background: var(--ok-soft);
    align-self: end;
}

.travel-none > i[b-wnndbtvkht] { font-size: 22px; color: var(--ok-ink); flex: 0 0 auto; }
.travel-none strong[b-wnndbtvkht] { display: block; font-size: 14px; font-weight: 800; color: var(--ok-ink); }
.travel-none span[b-wnndbtvkht] { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ok-ink); }

/* Schedule summary card (day span + weekend + auto-overnight) beside the date controls */
.schedule-card[b-wnndbtvkht] {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--info-line);
    border-radius: var(--r-lg);
    background: var(--info-soft);
}

.sched-days[b-wnndbtvkht] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 8px 14px;
    border-radius: var(--r-lg);
    background: var(--panel);
    border: 1px solid var(--info-line);
}

.sched-num[b-wnndbtvkht] {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--blue-2);
}

/* End-before-start: turn the whole card red so the error reads at a glance */
.schedule-card.invalid[b-wnndbtvkht] {
    background: var(--red-soft);
    border-color: var(--red-line);
}

.schedule-card.invalid .sched-days[b-wnndbtvkht] {
    background: var(--panel);
    border-color: var(--red-line);
}

.schedule-card.invalid .sched-num[b-wnndbtvkht],
.schedule-card.invalid .sched-unit[b-wnndbtvkht] {
    color: var(--red-ink);
}

.sched-unit[b-wnndbtvkht] {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
}

.sched-info[b-wnndbtvkht] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
}

.sched-line[b-wnndbtvkht] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink, var(--ink));
    line-height: 1.5;
}

.sched-line i[b-wnndbtvkht] { margin-top: 2px; color: var(--blue-2); flex: 0 0 auto; }

.sched-line.warn[b-wnndbtvkht] { color: var(--amber-ink); }
.sched-line.warn i[b-wnndbtvkht] { color: var(--amber-ink); }

.sched-line.muted-line[b-wnndbtvkht] { color: var(--muted); font-weight: 500; }
.sched-line.muted-line i[b-wnndbtvkht] { color: var(--muted); }

@media (max-width: 560px) {
    .schedule-card[b-wnndbtvkht] { flex-direction: column; }
    .sched-days[b-wnndbtvkht] { flex-direction: row; gap: 8px; min-width: 0; }
}

/* Auto-computed travel distance (read-only mirror of the server's GeoDistance) */
.auto-distance[b-wnndbtvkht] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 11px 14px;
    border: 1px solid var(--info-line);
    border-radius: var(--r-md);
    background: var(--info-soft);
}
.auto-distance .ad-label[b-wnndbtvkht] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}
.auto-distance .ad-label em[b-wnndbtvkht] { font-style: normal; opacity: .8; }
.auto-distance strong[b-wnndbtvkht] { font-size: 17px; font-weight: 800; color: var(--blue-2); }
.auto-distance .ad-na[b-wnndbtvkht] { color: var(--muted); }

/* ── طبيعة المهمة: مهمة عادية ⇄ تذكرة ───────────────────────────────────────────
   A second axis beside «نوع المهمة» (which is the nature of the work). Recessed into the panel like the
   read-only detail fields, and TINTED FROM THE BRAND (color-mix on --blue) rather than a literal colour, so it
   follows the tenant palette instead of painting a blue island on an orange-branded console. */
.ticket-block[b-wnndbtvkht] {
    margin-top: 4px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--soft);
}
.ticket-block.on[b-wnndbtvkht] {
    border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
    background: color-mix(in srgb, var(--blue) 6%, var(--panel));
}
.ticket-block .tk-head[b-wnndbtvkht] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ticket-block .tk-title[b-wnndbtvkht] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}
.ticket-block .tk-title i[b-wnndbtvkht] { color: var(--blue-2); }

.ticket-block .tk-seg[b-wnndbtvkht] {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
}
.ticket-block .tk-opt[b-wnndbtvkht] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ticket-block .tk-opt:hover[b-wnndbtvkht] { background: var(--soft); color: var(--ink); }
.ticket-block .tk-opt.on[b-wnndbtvkht] {
    background: color-mix(in srgb, var(--blue) 14%, var(--panel));
    color: var(--brand-strong);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 32%, transparent);
}

.ticket-block .tk-fields[b-wnndbtvkht] {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 14px;
    margin-top: 14px;
}
.ticket-block .tk-fields .field-group[b-wnndbtvkht] { margin: 0; }
.ticket-block .tk-note[b-wnndbtvkht] {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.7;
}
.ticket-block .tk-note i[b-wnndbtvkht] { color: var(--blue-2); }

@media (max-width: 820px) {
    .ticket-block .tk-fields[b-wnndbtvkht] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Missions.razor.rz.scp.css */
/* Auto-status indicator (status follows the date) next to the badge */
.auto-status[b-3y4dv8ye56] {
    margin-inline-start: 6px;
    color: var(--muted);
    font-size: 12px;
    cursor: help;
}

/* «الأيام» column toggle + per-day breakdown subrow */
.day-toggle[b-3y4dv8ye56] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--blue-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.day-toggle:hover[b-3y4dv8ye56] { background: var(--info-soft); border-color: var(--blue); }
.day-toggle.open[b-3y4dv8ye56] { background: var(--info-soft); border-color: var(--blue); }
.day-toggle i[b-3y4dv8ye56] { font-size: 11px; }

.day-subrow > td[b-3y4dv8ye56] {
    background: var(--panel);
    padding: 12px 16px;
}

.mission-days[b-3y4dv8ye56] { display: flex; flex-direction: column; gap: 10px; }

.mission-days-head[b-3y4dv8ye56] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
}

.mission-days-head i[b-3y4dv8ye56] { color: var(--blue-2); }

    display: flex;
    flex-wrap: wrap;
    gap: 8px;[b-3y4dv8ye56]
}

/* Each day is a clickable card → opens the per-day edit modal */
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px 12px;
    min-width: 132px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
    font: inherit;
    font-size: 13px;
    text-align: start;
    cursor: pointer;
    border-inline-start: 3px solid var(--line);[b-3y4dv8ye56]
}




    padding: 1px 8px;
    border-radius: 999px;
    background: var(--info-soft);
    color: var(--blue-2);
    font-size: 11.5px;
    font-weight: 700;[b-3y4dv8ye56]
}


/* Status accent (inline-start bar + tag tint) */

/* Weekend day per the working policy (background tint; status bar still wins) */

/* Past day → read-only modal: reset the fieldset chrome + dim, plus a locked banner */
.locked-zone[b-3y4dv8ye56] { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.locked-zone:disabled[b-3y4dv8ye56] { opacity: .72; }

.locked-banner[b-3y4dv8ye56] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 11px 14px;
    border: 1px solid var(--amber-line);
    border-radius: var(--r-lg);
    background: var(--amber-soft);
    color: var(--amber-ink);
    font-size: 13.5px;
    font-weight: 600;
}

.locked-banner > i[b-3y4dv8ye56] { font-size: 16px; }

/* Date-range filter in the toolbar (missions active within [from, to]) */
.date-range-filter[b-3y4dv8ye56] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--panel);
    border: 1px solid var(--line, var(--info-line));
    border-radius: var(--r-md);
    padding: 3px 10px;
}
.date-range-filter .drf-lbl[b-3y4dv8ye56] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted, var(--ink));
}
.date-range-filter .drf-input[b-3y4dv8ye56] {
    width: auto;
    min-width: 132px;
    min-height: 38px;
    border: none;
    background: transparent;
    padding: 4px 6px;
    font-variant-numeric: tabular-nums;
}
.date-range-filter .drf-input:focus[b-3y4dv8ye56] {
    outline: none;
    box-shadow: none;
}

/* The way out of the window the page opens on. A link inside the control it undoes, not a button beside it —
   it belongs to the dates, and the toolbar's own «مسح» clears everything else. */
.date-range-filter .drf-all[b-3y4dv8ye56] {
    border: none;
    background: none;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-strong);
    cursor: pointer;
    border-radius: var(--r-sm);
    white-space: nowrap;
}

.date-range-filter .drf-all:hover[b-3y4dv8ye56] {
    background: color-mix(in srgb, var(--blue) 10%, var(--panel));
}

/* The people icon that carries the roster. Muted until you go near it — the NUMBER is the information in
   this column, and the icon is only the handle for the detail behind it. */
.roster-cell[b-3y4dv8ye56] {
    white-space: nowrap;
}

.roster-peek[b-3y4dv8ye56] {
    margin-inline-start: 6px;
    font-size: 12px;
    color: var(--muted);
    cursor: help;
}

.roster-peek:hover[b-3y4dv8ye56] {
    color: var(--brand-strong);
}

/* The empty row's way out sits on one line with its sentence. */
.no-match .btn-link-clear[b-3y4dv8ye56] {
    margin-inline-start: 8px;
}

/* Reload overlay (server-side paged list — shown during filter/search/page reloads) */
.table-area[b-3y4dv8ye56] { position: relative; min-height: 80px; }
/* .reload-overlay is defined once in global app.css (it is used by every list screen);
   the byte-copy that used to sit here carried a hardcoded white and broke in dark mode. */


/* Long mission and project names used to set the row height, so every other cell (dates, days, team) broke onto
   two lines too (owner, 2026-10-01). The two long columns are capped and clamped to two lines with the full text
   in the tooltip; the short ones never wrap. */
.data-table td.loc-cell[b-3y4dv8ye56] { max-width: 300px; min-width: 180px; }
.data-table td.name-cell[b-3y4dv8ye56] { max-width: 200px; }
.clamp-2[b-3y4dv8ye56] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.data-table td.nowrap[b-3y4dv8ye56] { white-space: nowrap; }

/* Quick view: the roster count opens it, so it reads as a link. */
.roster-open[b-3y4dv8ye56] {
    border: 0; background: none; padding: 0; font: inherit; font-weight: 700;
    color: var(--brand-strong); cursor: pointer; text-decoration: underline dotted;
}
.quick-facts[b-3y4dv8ye56] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.quick-facts > div[b-3y4dv8ye56] {
    background: var(--soft);
    border-radius: var(--r-md);
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 4px;
}
.quick-facts span[b-3y4dv8ye56] { font-size: 12px; color: var(--muted); }
.quick-facts strong[b-3y4dv8ye56] { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.quick-notes[b-3y4dv8ye56] {
    background: var(--soft); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 14px;
    font-size: 13px; color: var(--ink-2); white-space: pre-line;
}
.quick-head[b-3y4dv8ye56] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 10px; }
.quick-head h4[b-3y4dv8ye56] { font-size: 15px; font-weight: 700; margin: 0; }
.quick-day[b-3y4dv8ye56] { max-width: 260px; }

.quick-counts[b-3y4dv8ye56] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.quick-counts span[b-3y4dv8ye56] {
    font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
    background: var(--soft); color: var(--ink-2);
}
.quick-counts .ok[b-3y4dv8ye56] { background: var(--ok-soft); color: var(--ok); }
.quick-counts .warn[b-3y4dv8ye56] { color: var(--amber); }
.quick-counts .bad[b-3y4dv8ye56] { color: var(--red); }

.quick-counts .info[b-3y4dv8ye56] { background: var(--blue-soft); color: var(--brand-strong); }
.seen-yes[b-3y4dv8ye56] { color: var(--ok); font-weight: 600; font-size: 12.5px; }
.seen-no[b-3y4dv8ye56] { color: var(--muted); font-size: 12.5px; }
/* /Components/Pages/MissionView.razor.rz.scp.css */
/* Read-only mission dashboard (view page) — prototype #mission-details look.
   Visual language is cloned from ProjectView; classes are scoped per-page (Blazor CSS isolation),
   so the shared look must be DUPLICATED here, not referenced from ProjectView.razor.css. */

/* ---- Hero ---- */
.pv-hero[b-88t134bn8u] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 22px 24px;
    border-radius: var(--r-xl);
    /* Navy→blue detail hero — themed (follows --sidebar-2 → --hero-accent). */
    background: var(--hero);
    color: var(--on-brand);
}

.pv-hero-main[b-88t134bn8u] { display: flex; align-items: center; gap: 18px; min-width: 0; }

.pv-logo[b-88t134bn8u] {
    width: 72px;
    height: 72px;
    border-radius: var(--r-xl);
    display: grid;
    place-items: center;
    background: var(--panel);
    flex: 0 0 auto;
    box-shadow: var(--sh-lg);
    font-size: 32px;
    color: var(--brand-strong);   /* was var(--info) — the semantic BLUE, not the tenant's colour */
}

.pv-hero-text[b-88t134bn8u] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pv-hero-text h2[b-88t134bn8u] { margin: 0; font-size: 26px; font-weight: 800; }

.pv-kicker[b-88t134bn8u] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.82);
}

.pv-kicker i[b-88t134bn8u] { font-size: 13px; }
.pv-kicker-label[b-88t134bn8u] { font-weight: 600; }
.pv-kicker strong[b-88t134bn8u] { color: var(--on-brand); font-size: 15px; font-weight: 800; letter-spacing: 0.04em; }
.pv-kicker-sep[b-88t134bn8u] { opacity: 0.5; }

/* Type + overnight chips on the dark hero — translucent pills, matching the kicker. */
.pv-hero-tags[b-88t134bn8u] { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.pv-hero-tag[b-88t134bn8u] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.26);
    color: var(--on-brand);
    font-size: 12.5px;
    font-weight: 700;
}
.pv-hero-tag i[b-88t134bn8u] { font-size: 10px; opacity: 0.85; }
.pv-hero-tag.moon[b-88t134bn8u] { background: rgba(99, 102, 241, 0.42); border-color: rgba(199, 210, 254, 0.5); }
a.pv-hero-tag[b-88t134bn8u] { text-decoration: none; transition: background .14s; }
.pv-hero-tag.proj[b-88t134bn8u] { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.42); }
.pv-hero-tag.proj:hover[b-88t134bn8u] { background: rgba(255, 255, 255, 0.36); }
/* «تذكرة …» — sits on the dark hero, so it is a translucent-white highlight rather than a brand tint: the same
   theme-proof treatment as the sidebar's active pill, so it reads native on any tenant palette. */
.pv-hero-tag.ticket[b-88t134bn8u] { background: rgba(255, 255, 255, 0.28); border-color: rgba(255, 255, 255, 0.5); }

/* Parent-project link inside the details card */
.proj-link[b-88t134bn8u] { color: var(--blue-2, var(--hero-accent)); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.proj-link:hover[b-88t134bn8u] { text-decoration: underline; }
.proj-link i[b-88t134bn8u] { font-size: 15px; opacity: 0.9; }

/* Status badge — top-left corner of the hero. */
.pv-hero-side[b-88t134bn8u] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.pv-auto-pill[b-88t134bn8u] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
    background: rgba(255, 255, 255, 0.18); color: var(--on-brand);
}
.pv-auto-pill i[b-88t134bn8u] { font-size: 11px; }

/* Top action toolbar above the hero. */
.pv-toolbar[b-88t134bn8u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.pv-toolbar-actions[b-88t134bn8u] { display: flex; gap: 9px; flex-wrap: wrap; }
.pv-toolbar-actions .btn-disabled[b-88t134bn8u] {
    opacity: .5; cursor: not-allowed;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-md); padding: 8px 14px;
    font-size: 13px; font-weight: 700; color: var(--muted);
}

/* ---- Lock banner (past / cancelled mission → read-only) ---- */
.locked-banner[b-88t134bn8u] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 11px 14px;
    border: 1px solid var(--amber-line);
    border-radius: var(--r-lg);
    background: var(--amber-soft);
    color: var(--amber-ink);
    font-size: 13.5px;
    font-weight: 600;
}
.locked-banner.cancelled[b-88t134bn8u] { border-color: var(--red-line); background: var(--red-soft); color: var(--red-ink); }
.locked-banner > i[b-88t134bn8u] { font-size: 16px; }

/* `.rule-box.distance-box` is deliberately INERT. It used to paint the computed road-distance field a
   different colour (green fill + green value) — but a distance is not a STATUS, and green now means
   «نشط»/success in this app (--ok). Colour without meaning is exactly what was stripped from .stat-card
   and the KPI accent bars. The class stays on the markup as a hook in case a real distinction is ever
   wanted; removing it would mean editing the view for no visual gain. */

/* The KPI cards and .soon-badge are GLOBAL now (app.css) — both views rendered byte-similar
   copies, and the KPI cards collapsed into .stat-card so every card in the app has one look.
   The .business-flow stage strip is gone entirely: every subtitle it carried was a fact with a
   better home. .project-tabs stays scoped below: pills are not cards. */

/* ---- Tabs ---- */
.project-tabs[b-88t134bn8u] { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

.project-tabs button[b-88t134bn8u] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
}

.project-tabs button:hover[b-88t134bn8u] { border-color: var(--blue); color: var(--blue-2); }
.project-tabs button.active[b-88t134bn8u] { color: var(--on-brand); border-color: var(--blue); background: var(--blue); }
.project-tabs .tab-dot[b-88t134bn8u] { width: 6px; height: 6px; border-radius: 50%; background: var(--amber, #f59e0b); }

/* ---- Split grid + rule grid + meta list ---- */
.split-grid[b-88t134bn8u] { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 16px; }
.split-grid > *[b-88t134bn8u] { min-width: 0; }




/* ---- Map ---- */
.pv-mini-map[b-88t134bn8u] {
    position: relative;
    display: grid;
    place-items: center;
    gap: 4px;
    min-height: 150px;
    border-radius: var(--r-lg);
    border: 1px dashed var(--info-line);
    background: repeating-linear-gradient(45deg, var(--panel), var(--panel) 12px, var(--soft) 12px, var(--soft) 24px);
    margin-bottom: 12px;
}

.pv-map[b-88t134bn8u] {
    width: 100%;
    height: 300px;
    border-radius: var(--r-lg);
    margin-bottom: 12px;
    border: 1px solid var(--line);
    background: var(--info-soft);
}

.pv-mini-map strong[b-88t134bn8u] { font-size: 14px; }
.pv-mini-map small[b-88t134bn8u] { color: var(--muted); font-size: 12px; }
.pv-pin[b-88t134bn8u] { width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #dc2626; box-shadow: 0 4px 10px rgba(220, 38, 38, 0.4); }
.pv-maplink-btn[b-88t134bn8u] { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Operational placeholders ---- */
.op-placeholder[b-88t134bn8u] {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 6px;
    padding: 34px 24px;
    margin-bottom: 14px;
    border: 1px dashed var(--info-line);
    border-radius: var(--r-xl);
    background: var(--panel);
}

.op-placeholder.small[b-88t134bn8u] { padding: 22px 18px; }
.op-placeholder > i[b-88t134bn8u] { font-size: 30px; color: var(--muted); }   /* was a hardcoded pale blue — a blue glyph on an orange-branded tenant, and too light to read in dark */
.op-placeholder strong[b-88t134bn8u] { font-size: 15px; }
.op-placeholder p[b-88t134bn8u] { margin: 0; max-width: 56ch; color: var(--muted); font-size: 13px; line-height: 1.7; }
.op-note[b-88t134bn8u] { margin: 12px 0 0; color: var(--muted); font-size: 12px; }

.pv-count[b-88t134bn8u] { display: inline-block; min-width: 22px; padding: 1px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.pv-notes[b-88t134bn8u] { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text); white-space: pre-wrap; }

/* ---- "No travel" calm note (mission inside the team's own governorate) ---- */
.travel-none[b-88t134bn8u] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px;
    border: 1px solid var(--ok-line);
    border-radius: var(--r-lg);
    background: var(--ok-soft);
    color: var(--ok-ink);
    font-size: 13.5px;
    font-weight: 600;
}
.travel-none > i[b-88t134bn8u] { font-size: 17px; }

/* ---- Per-day timeline (our addition; read-only cards) ---- */

    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px 12px;
    min-width: 138px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
    font-size: 13px;
    border-inline-start: 3px solid var(--line);[b-88t134bn8u]
}


    padding: 1px 8px;
    border-radius: 999px;
    background: var(--info-soft);
    color: var(--blue-2);
    font-size: 11.5px;
    font-weight: 700;[b-88t134bn8u]
}


/* ---- Team strip (responsible team + vehicle, clean boxes) ---- */
.team-strip[b-88t134bn8u] { margin-bottom: 14px; }

/* Distinct-departments banner (makes "members from N depts" explicit).

   It had margin-bottom but NO margin-top, and the .rule-grid above it has no bottom margin either — so
   it sat flush against the boxes with zero gap (owner-caught).

   And it was GREEN. This is a NOTICE — "these people come from two departments" is neither good nor bad,
   just worth pointing out — while green in this app means «نشط»/success (--ok). Tinted from the brand
   instead, so it reads as a note and follows the tenant like every other interaction surface. */
.team-depts[b-88t134bn8u] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
    margin: 14px 0 12px; padding: 9px 13px;
    border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--blue) 7%, var(--panel));
    color: var(--brand-strong); font-size: 12.5px; font-weight: 600;
}
.team-depts > i[b-88t134bn8u] { font-size: 13px; }
.team-dept-pill[b-88t134bn8u] {
    padding: 2px 9px; border-radius: 999px; background: var(--panel);
    border: 1px solid color-mix(in srgb, var(--blue) 28%, transparent);
    color: var(--brand-strong); font-size: 11.5px; font-weight: 700;
}

.assignee-head-row[b-88t134bn8u] {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.assignee-head[b-88t134bn8u] {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink); font-size: 13.5px; font-weight: 800;
}
.assignee-head > i[b-88t134bn8u] { color: var(--blue-2); font-size: 13px; }

/* Seen summary chip (how many assignees opened the mission) */
.seen-summary[b-88t134bn8u] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 11px; border-radius: 999px;
    background: var(--info-soft); color: var(--ink);
    font-size: 12px; font-weight: 700;
}
.seen-summary > i[b-88t134bn8u] { font-size: 11px; }
/* Green KEPT here — "everyone has seen it" genuinely is a success state, so it uses the semantic
   --ok pair rather than a hand-picked green. */
.seen-summary.all[b-88t134bn8u] { background: var(--ok-soft); color: var(--ok); }

/* ---- Assignee cards (avatar + clear name + department + position) ---- */
.assignee-grid[b-88t134bn8u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.assignee-card[b-88t134bn8u] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--panel);
    box-shadow: var(--sh-sm);
}
.assignee-card.inactive[b-88t134bn8u] { opacity: .72; }

.assignee-av[b-88t134bn8u] {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: grid; place-items: center;
    /* was `linear-gradient(..., var(--hero-accent), #1b8de0)` — one end themed, the other a literal blue,
       so on an orange tenant the circle ran orange→blue. The shared brand band instead.
       And no text-transform: these are ARABIC initials. */
    background: var(--hero);
    color: var(--on-brand); font-weight: 800; font-size: 15px;
}
.assignee-av.alt[b-88t134bn8u] { background: linear-gradient(135deg, #64748b, #94a3b8); }

.assignee-info[b-88t134bn8u] { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.assignee-name[b-88t134bn8u] { font-weight: 800; font-size: 14.5px; color: var(--ink); line-height: 1.2; }
.assignee-roles[b-88t134bn8u] { display: flex; flex-wrap: wrap; gap: 5px; }

/* The two chips are LABELS — a department and a job title — and neither is a status.
   They used to be THREE different filled treatments (dept = --blue-soft, dept.alt = grey, job = a
   hardcoded green), and the dept one disagreed with `.team-dept-pill` a few centimetres above it on
   the SAME screen: one fact, a department name, drawn two ways (owner-caught).
   One outlined pill for all of them now, matching the banner pill, so a department reads the same
   everywhere it appears. The green went for the reason it went everywhere else: green means
   «نشط»/success in this app (--ok), and a job title is not a success. */
.role-chip[b-88t134bn8u] {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 999px;
    background: var(--panel); border: 1px solid var(--line);
    color: var(--ink);   /* readable slate — --muted washes out at 11px */
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.role-chip > i[b-88t134bn8u] { font-size: 10px; }
/* Brand-tinted = the DEPARTMENT, identical to .team-dept-pill. It is orange only because that IS the
   tenant's brand (color-mix off --blue); on a blue-branded tenant it is blue. */
.role-chip.dept[b-88t134bn8u] {
    border-color: color-mix(in srgb, var(--blue) 28%, transparent);
    color: var(--brand-strong);
}
/* `.alt` (assignee NOT from the responsible team) is deliberately INERT, class kept as a hook.
   Greying that one chip made every dept tag look different depending on whose card you were reading,
   and the distinction is already told twice: the avatar is grey instead of brand, and the banner above
   names the extra departments outright. A third telling is what made the tags inconsistent. */
.assignee-flag[b-88t134bn8u] { color: var(--red-ink); font-size: 11px; font-weight: 800; }

/* Per-assignee read-receipt line */
.seen-badge[b-88t134bn8u] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700;
}
.seen-badge > i[b-88t134bn8u] { font-size: 11px; }
.seen-badge.seen[b-88t134bn8u] { color: var(--ok); }
.seen-badge.unseen[b-88t134bn8u] { color: var(--ink-2); }

@media (max-width: 900px) {
    .split-grid[b-88t134bn8u] { grid-template-columns: 1fr; }
    .rule-grid[b-88t134bn8u], .rule-grid.three[b-88t134bn8u] { grid-template-columns: 1fr 1fr; }
}

/* Distance box — highlight the auto-computed travel distance */

/* ===== Attendance tab ===== */
/* .att-summary / .att-kpi are GONE — they were a third card species doing .stat-card's job.
   The attendance summary now uses `.stat-cards.compact` from app.css. */

.att-day[b-88t134bn8u] { padding: 10px 0; border-bottom: 1px solid var(--on-brand); }
.att-day:last-of-type[b-88t134bn8u] { border-bottom: 0; }
.att-day-head[b-88t134bn8u] { font-size: 14px; margin-bottom: 7px; }
.att-grid[b-88t134bn8u] { width: 100%; border-collapse: collapse; font-size: 13px; }
.att-grid td[b-88t134bn8u], .att-grid th[b-88t134bn8u] { padding: 6px 8px; border-bottom: 1px solid var(--on-brand); text-align: start; }
.att-grid th[b-88t134bn8u] { color: var(--ink); font-weight: 600; font-size: 12px; }
.att-grid td.emp[b-88t134bn8u] { font-weight: 600; }
.att-grid td.times[b-88t134bn8u] { font-variant-numeric: tabular-nums; color: var(--ink); }
.att-grid.log thead th[b-88t134bn8u], .att-grid.sheet thead th[b-88t134bn8u] { border-bottom: 1px solid var(--info-line); }
.att-grid.sheet tbody tr:hover td[b-88t134bn8u] { background: var(--panel); }
.att-grid .off-row td[b-88t134bn8u] { background: var(--panel); color: var(--ink-2); }
/* Geofence verdict cell: the status pill, then the distance as a separate muted note (no «·» cramming) */
.verdict-cell[b-88t134bn8u] { white-space: nowrap; }
.dist-note[b-88t134bn8u] { color: var(--ink); font-size: 12px; margin-inline-start: 7px; font-variant-numeric: tabular-nums; }

/* The status pills moved to global app.css — this copy had drifted a pixel smaller than Attendance's, which
   is exactly what a duplicated scoped class does. */
.muted[b-88t134bn8u] { color: var(--ink-2); }

/* Team feed — employee notes/reports posted from the mobile (per mission-day) */
.feed-panel[b-88t134bn8u] { margin-top: 16px; }
.feed-list[b-88t134bn8u] { display: flex; flex-direction: column; gap: 10px; }
.feed-item[b-88t134bn8u] {
    padding: 12px 14px;
    border: 1px solid var(--line, var(--info-line));
    border-radius: var(--r-lg);
    background: var(--panel);
    border-inline-start: 3px solid var(--line-2);
}
.feed-item.is-report[b-88t134bn8u] { border-inline-start-color: #0f766e; background: var(--panel); }
.feed-item.is-note[b-88t134bn8u] { border-inline-start-color: var(--hero-accent); }
.feed-head[b-88t134bn8u] { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.feed-kind[b-88t134bn8u] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800;
}
.feed-kind.note[b-88t134bn8u] { background: var(--blue-soft); color: var(--brand-strong); }
.feed-kind.report[b-88t134bn8u] { background: var(--ok-soft); color: var(--info); }
.feed-author[b-88t134bn8u] { font-weight: 800; color: var(--ink); font-size: 13.5px; }
.feed-day[b-88t134bn8u] { font-size: 12px; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; }
.feed-time[b-88t134bn8u] { margin-inline-start: auto; font-size: 11.5px; color: var(--ink-2); }
.feed-late[b-88t134bn8u] { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); border-radius: 999px; padding: 2px 8px; }
.feed-text[b-88t134bn8u] { margin: 0; color: var(--ink); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }

/* travel-allowance (القواعد المالية) */
.op-loading[b-88t134bn8u] { display: flex; align-items: center; gap: 8px; color: var(--muted); padding: 18px; justify-content: center; }
.travel-total-line[b-88t134bn8u] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--ok) 10%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line));
}
.travel-total-line > span[b-88t134bn8u] { color: var(--muted); font-size: 13px; font-weight: 600; }
.travel-total-line > strong[b-88t134bn8u] { font-size: 18px; color: var(--brand-strong); }
.no-rate[b-88t134bn8u] { color: var(--amber); font-size: 12px; font-weight: 600; }

/* No governorate on the team or the site ⇒ not treated as travel. A setup gap, so amber, never the calm green. */
.travel-unknown[b-88t134bn8u] {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 14px 18px; padding: 11px 14px;
    border-radius: var(--r-md); border: 1px solid var(--amber-line); background: var(--amber-soft);
    font-size: 13px; line-height: 1.8; color: var(--amber-ink);
}
.travel-unknown > i[b-88t134bn8u] { font-size: 15px; margin-top: 2px; }
/* /Components/Pages/OrgStructureReport.razor.rz.scp.css */
/* Only what this report invents. The shared report chrome — toolbar, view toggle, tables, pager, gap note,
   print rules — lives in app.css under .report-page, because four reports were already copying it. */

/* A department reads as a BLOCK, not as rows that happen to be adjacent — that's the whole point of the
   "by department" view. */
.org-block[b-pz3kfcshnw] {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 14px;
    background: var(--panel);
}

.org-block-gap[b-pz3kfcshnw] {
    border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
}

.org-head[b-pz3kfcshnw] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(180deg, var(--soft), var(--soft));
    border-bottom: 1.5px solid var(--info-line);
}

.org-block-gap .org-head[b-pz3kfcshnw] {
    background: linear-gradient(180deg, var(--panel), var(--amber-soft));
    border-bottom-color: color-mix(in srgb, var(--amber) 40%, var(--line));
}

.org-title[b-pz3kfcshnw] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 15px;
}

.org-meta[b-pz3kfcshnw] {
    font-size: 12px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.org-flags[b-pz3kfcshnw] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.org-count[b-pz3kfcshnw] {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.org-badge[b-pz3kfcshnw] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

/* A missing MANAGER breaks the reporting fallback — amber. A missing team leader is optional structure,
   so it stays quiet grey and never competes for attention with a real hole. */
.org-badge.warn[b-pz3kfcshnw] {
    background: color-mix(in srgb, var(--amber) 18%, var(--panel));
    color: var(--amber-ink);
    border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--panel));
}

.org-badge.soft[b-pz3kfcshnw] {
    background: var(--soft);
    color: var(--muted);
    border: 1px solid var(--line);
}

.org-empty[b-pz3kfcshnw] {
    padding: 14px;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}

/* Role in the department — colour carries the level, so the hierarchy is readable without reading. */
.org-role[b-pz3kfcshnw] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.org-role.manager[b-pz3kfcshnw] {
    background: color-mix(in srgb, var(--blue) 14%, var(--panel));
    color: var(--brand-strong);
    border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--panel));
}

.org-role.leader[b-pz3kfcshnw] {
    background: color-mix(in srgb, var(--ok) 15%, var(--panel));
    color: var(--ok);
    border: 1px solid color-mix(in srgb, var(--ok) 32%, var(--panel));
}

.org-role.approver[b-pz3kfcshnw] {
    background: color-mix(in srgb, var(--cyan) 15%, var(--panel));
    color: var(--info);
    border: 1px solid color-mix(in srgb, var(--cyan) 32%, var(--panel));
}

.org-role.member[b-pz3kfcshnw] {
    background: var(--soft);
    color: var(--muted);
    border: 1px solid var(--line);
}

/* WHY someone reports to whom. "No manager" is the one worth noticing. */
.org-src[b-pz3kfcshnw] {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.org-src.direct[b-pz3kfcshnw] { color: var(--brand-strong); }
.org-src.fallback[b-pz3kfcshnw] { color: var(--muted); }
.org-src.none[b-pz3kfcshnw] { color: var(--red); }

/* A faint inline-start rail so the two leadership rows stand out inside the block. */
.org-row-manager td:first-child[b-pz3kfcshnw] { box-shadow: inset -3px 0 0 var(--blue); }
.org-row-leader td:first-child[b-pz3kfcshnw] { box-shadow: inset -3px 0 0 var(--ok); }

@media print {
    .org-block[b-pz3kfcshnw] {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

@media (prefers-color-scheme: dark) {
    .org-block[b-pz3kfcshnw] { background: transparent; }
}
/* /Components/Pages/OvertimeFees.razor.rz.scp.css */
/* overtime-policy fields: compact wrapping row */
.policy-grid[b-2au24ku6lw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    align-items: start;
}
.policy-grid .field-group[b-2au24ku6lw] { display: flex; flex-direction: column; gap: 5px; }

/* locked = readonly inputs read as "display" (subtle fill, no caret) */
.policy-grid.locked .form-control[readonly][b-2au24ku6lw] {
    background: var(--soft);
    color: var(--ink);
    cursor: default;
    border-style: dashed;
}

.ot-formula[b-2au24ku6lw] {
    display: flex; align-items: flex-start; gap: 9px;
    margin-top: 14px; padding: 12px 14px; border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--blue) 7%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line));
    font-size: 13px; line-height: 1.6; color: var(--ink);
}
.ot-formula > i[b-2au24ku6lw] { color: var(--blue); font-size: 17px; margin-top: 1px; }
/* /Components/Pages/Permissions.razor.rz.scp.css */
.perm-toolbar[b-heoevpjmvo] { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.perm-toolbar .form-select[b-heoevpjmvo] { max-width: 190px; }
.perm-toolbar .form-control[type=date][b-heoevpjmvo] { max-width: 170px; }
.perm-toolbar input:not([type=date])[b-heoevpjmvo] { flex: 1; min-width: 200px; }

.table-area[b-heoevpjmvo] { position: relative; min-height: 120px; }
.nowrap[b-heoevpjmvo] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.reason-cell[b-heoevpjmvo] { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* status pill */
.pstatus[b-heoevpjmvo] { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.pstatus-pending[b-heoevpjmvo] { background: var(--amber-soft); color: var(--amber-ink); }
.pstatus-approved[b-heoevpjmvo] { background: var(--ok-soft); color: var(--ok-ink); }
.pstatus-rejected[b-heoevpjmvo] { background: var(--red-soft); color: var(--red-ink); }
.pstatus-cancelled[b-heoevpjmvo] { background: var(--info-soft); color: var(--ink); }

/* .btn-review is defined once in global app.css — it was byte-copied into both review pages,
   and the copy here is what kept the hero gradient on a button too small to carry one. */
.decided-by[b-heoevpjmvo] { font-size: 12.5px; color: var(--ink); font-weight: 600; }

/* review modal */
.perm-modal[b-heoevpjmvo] { max-width: 560px; }
.review-grid[b-heoevpjmvo] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.review-grid > div[b-heoevpjmvo] { display: flex; flex-direction: column; gap: 2px; }
.review-grid .review-full[b-heoevpjmvo] { grid-column: 1 / -1; }
.review-grid .rl[b-heoevpjmvo] { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.review-grid strong[b-heoevpjmvo] { font-size: 14px; color: var(--ink); }
.form-label.mt[b-heoevpjmvo] { display: block; margin-top: 16px; margin-bottom: 6px; font-weight: 600; }
.review-error[b-heoevpjmvo] {
    margin-top: 12px; padding: 9px 12px; border-radius: var(--r-md); font-size: 13px; font-weight: 600;
    background: var(--red-soft); color: var(--red-ink); display: flex; align-items: center; gap: 7px;
}
/* /Components/Pages/Platform/AppReleasePanel.razor.rz.scp.css */
.app-release-panel[b-t2i9nlb8w7] { margin-top: 18px; }
.app-release-grid[b-t2i9nlb8w7] { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.app-release-card[b-t2i9nlb8w7] { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.app-release-card h4[b-t2i9nlb8w7] { margin: 0; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.app-release-card .btn-save[b-t2i9nlb8w7] { align-self: flex-start; }
.saved[b-t2i9nlb8w7] { color: var(--ok); font-size: 12px; font-weight: 700; }
.failed[b-t2i9nlb8w7] { color: var(--red); font-size: 12px; }
/* /Components/Pages/Platform/TenantDetail.razor.rz.scp.css */
.back-link[b-ipe4bn603m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.back-link:hover[b-ipe4bn603m] { color: var(--blue); }

/* Hero header */
.tenant-hero[b-ipe4bn603m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.tenant-hero-left[b-ipe4bn603m] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tenant-avatar[b-ipe4bn603m] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--sidebar), var(--blue));
    color: var(--on-brand);
    font-size: 22px;
    font-weight: 900;
}

.tenant-hero-name[b-ipe4bn603m] {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 6px;
}

.tenant-hero-meta[b-ipe4bn603m] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tenant-code[b-ipe4bn603m] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--r-md);
    background: var(--info-soft);
    color: var(--blue-2);
    font-size: 12px;
    font-weight: 700;
    font-family: "SF Mono", "Fira Code", monospace;
}


.tenant-hero-actions[b-ipe4bn603m] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Two-column detail layout */
.detail-grid[b-ipe4bn603m] {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 16px;
    align-items: start;
}

.detail-side[b-ipe4bn603m] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Features count label */
.features-count[b-ipe4bn603m] {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    margin-top: 2px;
}

/* Feature toggle labels */
.capability-grid label[b-ipe4bn603m] {
    cursor: pointer;
    transition: border-color .14s, background .14s;
}

.capability-grid label.feature-on[b-ipe4bn603m] {
    border-color: var(--info-line);
    background: var(--soft);
    color: var(--blue-2);
}

/* Save button */
.btn-save[b-ipe4bn603m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: var(--r-md);
    border: none;
    background: var(--blue);
    color: var(--on-brand);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}

.btn-save:hover:not(:disabled)[b-ipe4bn603m] { background: var(--blue-2); }
.btn-save:disabled[b-ipe4bn603m] { opacity: .6; cursor: default; }

/* Row buttons */
.btn-row[b-ipe4bn603m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 700;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    cursor: pointer;
    transition: background .15s;
}

.btn-row:hover:not(:disabled)[b-ipe4bn603m] { background: var(--soft); color: var(--blue); }
.btn-row:disabled[b-ipe4bn603m] { opacity: .6; cursor: default; }
.btn-row.btn-warn[b-ipe4bn603m]    { color: var(--amber); border-color: var(--amber-line); }
.btn-row.btn-success[b-ipe4bn603m] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--panel)); }

/* An amber note beside a control, for a consequence worth reading before saving — not an error. */
.alert-warn[b-ipe4bn603m] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--amber-soft);
    color: var(--amber-ink);
    border: 1px solid var(--amber-line);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
}

/* Success / error banners */
.alert-success[b-ipe4bn603m] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: var(--r-md);
    background: var(--ok-soft);
    color: var(--ok);
    font-size: 13px;
    font-weight: 600;
}

.alert-error-bar[b-ipe4bn603m] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--r-lg);
    background: var(--red-soft);
    color: var(--red);
    font-weight: 600;
}

/* Subscription form */
.sub-form[b-ipe4bn603m] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.clear-date[b-ipe4bn603m] {
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    align-self: flex-start;
}

.clear-date:hover[b-ipe4bn603m] { color: var(--red); border-color: var(--red); }

/* Info list */
.info-list[b-ipe4bn603m] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.info-row[b-ipe4bn603m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--on-brand);
    font-size: 14px;
}

.info-row:last-child[b-ipe4bn603m] { border-bottom: none; }

.info-label[b-ipe4bn603m] {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.muted[b-ipe4bn603m] { color: var(--muted); font-size: 13px; }

.loading-state[b-ipe4bn603m] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    padding: 40px 0;
}

.spinning[b-ipe4bn603m] { animation: shift-spin .8s linear infinite; }

/* Panels inside this page */
.panel[b-ipe4bn603m] {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    /* ⚠️ This whole rule is a stale COPY of the global `.panel` from before the radius sweep pulled panels
       xl→lg — which is why these two pages still have bigger corners than the other thirty. Declaring
       `--panel-radius` keeps the full-bleed table's bottom corners matching THIS panel until the copy goes. */
    --panel-radius: var(--r-xl);
    border-radius: var(--panel-radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.panel-header[b-ipe4bn603m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.panel-header h3[b-ipe4bn603m] {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
}

.panel-actions[b-ipe4bn603m] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 1000px) {
    .detail-grid[b-ipe4bn603m] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .tenant-hero[b-ipe4bn603m] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Brand theme (white-label) panel ─────────────────────────────── */
.theme-panel[b-ipe4bn603m] { margin-top: 20px; }
.theme-body[b-ipe4bn603m] {
    display: grid;
    grid-template-columns: minmax(240px, 340px) 1fr;
    gap: 22px;
    align-items: start;
    margin-top: 6px;
}
.theme-pickers[b-ipe4bn603m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}
.theme-picker[b-ipe4bn603m] { display: flex; flex-direction: column; gap: 5px; }
.theme-picker .form-label[b-ipe4bn603m] { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.color-row[b-ipe4bn603m] { display: flex; align-items: center; gap: 8px; }
.color-row input[type="color"][b-ipe4bn603m] {
    inline-size: 42px;
    block-size: 34px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
    cursor: pointer;
}
.color-row code[b-ipe4bn603m] {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.picker-hint[b-ipe4bn603m] {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted);
}

/* live preview */
.theme-preview[b-ipe4bn603m] {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px;
    background: var(--soft);
}
.tp-label[b-ipe4bn603m] { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.tp-shell[b-ipe4bn603m] {
    display: flex;
    gap: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-lg);
    min-block-size: 150px;
}
.tp-sidebar[b-ipe4bn603m] {
    inline-size: 96px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tp-logo[b-ipe4bn603m] {
    inline-size: 30px; block-size: 30px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .16);
    color: var(--on-brand);
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
}
.tp-nav[b-ipe4bn603m] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    padding: 6px 8px;
    border-radius: var(--r-md);
}
.tp-nav i[b-ipe4bn603m] { font-size: 11px; }
.tp-nav.on[b-ipe4bn603m] { color: var(--on-brand); font-weight: 700; }
.tp-main[b-ipe4bn603m] { flex: 1; background: var(--panel); display: flex; flex-direction: column; }
.tp-hero[b-ipe4bn603m] {
    color: var(--on-brand);
    font-weight: 800;
    font-size: 14px;
    padding: 18px 16px;
}
.tp-row[b-ipe4bn603m] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    flex-wrap: wrap;
}
.tp-btn[b-ipe4bn603m] {
    border: 0;
    color: var(--on-brand);
    font-weight: 700;
    font-size: 13px;
    padding: 9px 16px;
    border-radius: var(--r-md);
    cursor: default;
}
.tp-chip[b-ipe4bn603m] {
    color: var(--on-brand);
    font-weight: 700;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 999px;
}
.tp-link[b-ipe4bn603m] { font-weight: 700; font-size: 13px; }

@media (max-width: 860px) {
    .theme-body[b-ipe4bn603m] { grid-template-columns: 1fr; }
}

/* --- M2M service clients (integrations) --- */
.apiclients-panel[b-ipe4bn603m] { margin-top: 20px; }
.apiclients-body[b-ipe4bn603m] { padding: 4px 2px 2px; }
.ac-empty[b-ipe4bn603m] {
    display: flex; align-items: center; gap: 10px;
    padding: 22px 18px; color: var(--muted); font-size: 14px;
    background: var(--soft); border: 1px dashed var(--line); border-radius: var(--r-lg);
}
.ac-empty i[b-ipe4bn603m] { font-size: 20px; color: var(--blue); }
.ac-id[b-ipe4bn603m] { font-size: 12px; color: var(--muted); direction: ltr; unicode-bidi: embed; }

.secret-callout[b-ipe4bn603m] {
    margin: 6px 0 14px; padding: 14px 16px; border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--ok) 8%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line));
}
.secret-callout-head[b-ipe4bn603m] { font-weight: 800; color: var(--brand-strong); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.secret-rows[b-ipe4bn603m] { display: flex; flex-direction: column; gap: 6px; }
.secret-row[b-ipe4bn603m] { display: flex; align-items: center; gap: 10px; }
.secret-row > span[b-ipe4bn603m] { min-width: 110px; color: var(--muted); font-size: 12px; }
.secret-row code[b-ipe4bn603m] { direction: ltr; unicode-bidi: embed; background: var(--panel); padding: 5px 9px; border-radius: var(--r-sm); border: 1px solid var(--line); font-size: 13px; }
.secret-val[b-ipe4bn603m] { font-weight: 700; color: var(--brand-strong); user-select: all; }
.secret-hint[b-ipe4bn603m] { margin: 10px 0; font-size: 12px; color: var(--muted); }
.secret-hint code[b-ipe4bn603m] { background: var(--soft); padding: 1px 5px; border-radius: var(--r-xs); direction: ltr; unicode-bidi: embed; }

/* create/edit modal */
.apiclient-modal .form-label.mt[b-ipe4bn603m] { margin-top: 14px; }
.ac-idline[b-ipe4bn603m] { margin-top: 6px; font-size: 12px; color: var(--muted); }
.ac-idline code[b-ipe4bn603m] { direction: ltr; unicode-bidi: embed; }
.ac-scopehint[b-ipe4bn603m] { display: block; font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.ac-scopehint code[b-ipe4bn603m] { background: var(--soft); padding: 1px 5px; border-radius: var(--r-xs); direction: ltr; unicode-bidi: embed; }
.scope-matrix[b-ipe4bn603m] { display: flex; flex-direction: column; gap: 10px; }
.scope-group[b-ipe4bn603m] { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; background: var(--panel); }
.scope-group-head[b-ipe4bn603m] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.scope-group-head > span[b-ipe4bn603m] { font-weight: 700; font-size: 13px; }
.scope-all[b-ipe4bn603m] { background: none; border: none; color: var(--blue-2); font-size: 12px; font-weight: 700; cursor: pointer; padding: 2px 4px; }
.scope-all:hover[b-ipe4bn603m] { text-decoration: underline; }
.scope-chips[b-ipe4bn603m] { display: flex; flex-wrap: wrap; gap: 6px; }
.scope-chip[b-ipe4bn603m] {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    padding: 5px 10px; border-radius: var(--r-xl); font-size: 12px; font-weight: 600;
    border: 1px solid var(--line); background: var(--soft); color: var(--ink); user-select: none;
}
.scope-chip.on[b-ipe4bn603m] { background: color-mix(in srgb, var(--blue) 12%, var(--panel)); border-color: var(--blue); color: var(--brand-strong); }
.scope-chip input[b-ipe4bn603m] { accent-color: var(--blue); }
.scope-count[b-ipe4bn603m] { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--brand-strong); }

/* footer hint when the name is still empty (Save is enabled but guards) */
.ac-foot-hint[b-ipe4bn603m] {
    margin-inline-end: auto;      /* push to the opposite side of the buttons */
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--amber); font-weight: 600;
}

/* copy button on the secret callout */
.copy-btn[b-ipe4bn603m] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: var(--r-sm); cursor: pointer;
    background: var(--panel); border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line));
    color: var(--brand-strong); font-size: 12px; font-weight: 700;
}
.copy-btn:hover[b-ipe4bn603m] { background: color-mix(in srgb, var(--ok) 10%, var(--panel)); }
.secret-row[b-ipe4bn603m] { flex-wrap: wrap; }

/* modal: pin name/status above, scroll only the scope matrix */
.ac-modal-body[b-ipe4bn603m] { display: flex; flex-direction: column; min-height: 0; }
.ac-fixed-top[b-ipe4bn603m] { flex: 0 0 auto; }
.scope-scroll[b-ipe4bn603m] {
    flex: 1 1 auto; min-height: 0; max-height: calc(42vh / var(--ui-scale)); overflow-y: auto;
    margin-top: 8px; padding-inline-end: 4px;
}
.ac-scope-summary[b-ipe4bn603m] {
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.ac-zero-warn[b-ipe4bn603m] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--amber);
}

/* ===== The platform trail — what the owner did to this customer =====
   .ent-badge / .act-badge come from global app.css (shared with /audit). Only the bits this panel
   invents live here. */
.platform-audit-panel .pa-changes[b-ipe4bn603m] { max-width: 460px; }

.pa-change[b-ipe4bn603m] {
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--ink);
}

.pa-field[b-ipe4bn603m] {
    font-weight: 700;
    color: var(--ink);
    margin-inline-end: 4px;
}

.pa-more[b-ipe4bn603m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 4px;
}

/* 🌗 The light/dark palette switch above the pickers. */
.theme-modes[b-ipe4bn603m] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 0 0 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.theme-mode-tabs[b-ipe4bn603m] {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}

.theme-mode-tabs button[b-ipe4bn603m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    padding: 7px 14px;
    background: var(--panel);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.theme-mode-tabs button.on[b-ipe4bn603m] {
    background: var(--brand-wash);
    color: var(--brand-strong);
}

/* The preview draws the DARK canvas when the dark set is being edited — otherwise he is picking colours for
   a background he cannot see, which is the whole problem this panel exists to fix. */
.tp-shell.tp-dark[b-ipe4bn603m] { background: #11151c; }
.tp-shell.tp-dark .tp-main[b-ipe4bn603m] { background: #11151c; }
.tp-shell.tp-dark .tp-row[b-ipe4bn603m] { background: #1a202b; }
.tp-shell.tp-dark .tp-link[b-ipe4bn603m],
.tp-shell.tp-dark .tp-row[b-ipe4bn603m] { color: #e7eaf0; }

/* ── The company's own system ── */
.extsys-panel[b-ipe4bn603m] { margin-top: 20px; }
.extsys-grid[b-ipe4bn603m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 16px;
    padding: 4px 0 8px;
}
.extsys-grid .span-2[b-ipe4bn603m] { grid-column: span 2; }
@media (max-width: 640px) { .extsys-grid .span-2[b-ipe4bn603m] { grid-column: auto; } }
.extsys-grid .field-hint.warn[b-ipe4bn603m] { color: var(--amber); }
.extsys-test[b-ipe4bn603m] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--soft);
    font-size: 13px;
}
.extsys-test.ok[b-ipe4bn603m] { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.extsys-test.ok strong[b-ipe4bn603m] { color: var(--ok); }
.extsys-test.bad[b-ipe4bn603m] { border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.extsys-test.bad strong[b-ipe4bn603m] { color: var(--red-ink); }
.extsys-actions[b-ipe4bn603m] { justify-content: flex-end; gap: 8px; margin-top: 8px; display: flex; }
.btn-ghost.danger[b-ipe4bn603m] { color: var(--red-ink); }
.saved-note[b-ipe4bn603m] { color: var(--ok); font-size: 13px; }
/* /Components/Pages/Platform/Tenants.razor.rz.scp.css */
.tenant-table-wrap[b-8gaof2ilej] {
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.tenant-table[b-8gaof2ilej] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tenant-table thead tr[b-8gaof2ilej] {
    background: var(--soft);
    border-bottom: 1px solid var(--line);
}

.tenant-table th[b-8gaof2ilej] {
    padding: 12px 18px;
    font-weight: 700;
    color: var(--muted);
    font-size: 12px;
    /* No text-transform / letter-spacing — these headers are Arabic (see .data-table th). */
    white-space: nowrap;
}

.tenant-table td[b-8gaof2ilej] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--on-brand);
    vertical-align: middle;
}

.tenant-table tbody tr:last-child td[b-8gaof2ilej] {
    border-bottom: none;
}

.tenant-table tbody tr:hover td[b-8gaof2ilej] {
    background: color-mix(in srgb, var(--blue) 9%, var(--panel));
}

.row-expired td[b-8gaof2ilej] {
    opacity: .7;
}

.tenant-code[b-8gaof2ilej] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--r-md);
    background: var(--info-soft);
    color: var(--blue-2);
    font-size: 12px;
    font-weight: 700;
    font-family: "SF Mono", "Fira Code", monospace;
}

/* The palette lives in global app.css — this page only adds the gap after the badge. */
.status-badge[b-8gaof2ilej] { margin-inline-end: 4px; }

.muted[b-8gaof2ilej] { color: var(--muted); font-size: 13px; }

.row-actions[b-8gaof2ilej] {
    display: flex;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
}

.btn-row[b-8gaof2ilej] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--r-md);
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}

.btn-row:hover[b-8gaof2ilej]       { background: var(--soft); color: var(--blue); }
.btn-row.btn-warn[b-8gaof2ilej]    { color: var(--amber); border-color: var(--amber-line); }
.btn-row.btn-success[b-8gaof2ilej] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--panel)); }

.empty-row[b-8gaof2ilej] {
    text-align: center;
    color: var(--muted);
    padding: 48px 0;
}

.btn-primary[b-8gaof2ilej] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: var(--r-lg);
    border: none;
    background: var(--blue);
    color: var(--on-brand);
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary:hover[b-8gaof2ilej] { background: var(--blue-2); }

.btn-secondary[b-8gaof2ilej] {
    padding: 10px 20px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
}

.loading-state[b-8gaof2ilej] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    padding: 40px 0;
}

.spinning[b-8gaof2ilej] { animation: shift-spin .8s linear infinite; }

.alert-error[b-8gaof2ilej] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--r-lg);
    background: var(--red-soft);
    color: var(--red);
    font-weight: 600;
}

.alert-error button[b-8gaof2ilej] {
    margin-inline-start: auto;
    padding: 5px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--red);
    background: transparent;
    color: var(--red);
    cursor: pointer;
    font-weight: 700;
}

/* Modal */
/* width/height are NOT redundant with inset:0 — under `body { zoom }` a fixed box sized by inset alone
   renders at 90% and leaves a live, unclickable strip down one side of the screen. */
.modal-backdrop[b-8gaof2ilej] {
    position: fixed;
    inset: 0;
    width: var(--app-w);
    height: var(--app-h);
    background: rgba(7, 23, 49, .5);
    backdrop-filter: blur(3px);
    z-index: 100;
}

/* 440px was far too narrow for what this form holds — a 13-checkbox feature matrix was being squeezed
   into two cramped columns and most of it pushed below the fold. */
.modal-panel[b-8gaof2ilej] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    width: 760px;
    max-width: calc(var(--app-w) - 32px);
    background: var(--panel);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
    overflow: hidden;
}

.modal-head[b-8gaof2ilej] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    font-weight: 800;
}

.modal-close[b-8gaof2ilej] {
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
}

.modal-body[b-8gaof2ilej] {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(70vh / var(--ui-scale));
    overflow-y: auto;
}

.modal-footer[b-8gaof2ilej] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--line);
    background: var(--soft);
}

.field-group[b-8gaof2ilej] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-group label[b-8gaof2ilej] {
    font-weight: 700;
    font-size: 13px;
}

.field-hint[b-8gaof2ilej] {
    color: var(--muted);
    font-size: 11px;
}

.features-header[b-8gaof2ilej] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.features-header label[b-8gaof2ilej] {
    font-weight: 700;
    font-size: 13px;
}

.features-toggles[b-8gaof2ilej] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
}

.toggle-link[b-8gaof2ilej] {
    border: none;
    background: none;
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.toggle-link:hover[b-8gaof2ilej] { text-decoration: underline; }

.capability-grid label.feature-on[b-8gaof2ilej] {
    border-color: var(--info-line);
    background: var(--soft);
    color: var(--blue-2);
}

.form-error[b-8gaof2ilej] {
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: var(--red-soft);
    color: var(--red);
    font-size: 13px;
    font-weight: 600;
}
/* /Components/Pages/ProjectForm.razor.rz.scp.css */
/* Map location-picker chrome (mirrors the branch / SPC picker). */
.map-section[b-k6i9vekkzz] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.map-placeholder[b-k6i9vekkzz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    margin: 8px 0 12px;
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    background: var(--soft);
    color: var(--muted);
    font-size: 13px;
}

.map-placeholder i[b-k6i9vekkzz] { font-size: 22px; }

.map-hint[b-k6i9vekkzz] {
    font-size: 12px;
    color: var(--muted);
    margin: 4px 0 8px;
}

.map-search-row[b-k6i9vekkzz] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.map-search-row input[b-k6i9vekkzz] { flex: 1; }
.map-search-row .btn-ghost[b-k6i9vekkzz] { white-space: nowrap; }

#projMap[b-k6i9vekkzz],
#siteMap[b-k6i9vekkzz] {
    width: 100%;
    height: 320px;
    border-radius: var(--r-lg);
    margin: 8px 0 12px;
    border: 1px solid var(--line);
    background: var(--info-soft);
}

/* Project logo upload (mirrors the company-logo picker). */
.proj-logo-img[b-k6i9vekkzz] {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--r-xl);
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--panel);
}

.logo-upload-btn[b-k6i9vekkzz] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--soft);
    color: var(--blue-2);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.logo-upload-btn:hover[b-k6i9vekkzz] { background: var(--info-soft); }

/* Assignment scope (teams / vehicles): two radio blocks + chip multiselect. */
.scope-grid[b-k6i9vekkzz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.scope-block[b-k6i9vekkzz] {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px;
    background: var(--soft);
}

.scope-opt[b-k6i9vekkzz] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
}

.scope-opt.on[b-k6i9vekkzz] {
    border-color: var(--blue);
    background: var(--info-soft);
    color: var(--blue-2);
}

.scope-opt input[b-k6i9vekkzz] { accent-color: var(--blue); }

@media (max-width: 760px) {
    .scope-grid[b-k6i9vekkzz] { grid-template-columns: 1fr; }
}

/* Scope/contract tag editor */
.tag-editor[b-k6i9vekkzz] {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 10px;
    background: var(--soft);
}

.tag-selected[b-k6i9vekkzz] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.tag-chip[b-k6i9vekkzz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-block: 5px; padding-inline: 6px 11px;
    border-radius: 999px;
    background: var(--blue);
    color: var(--on-brand);
    font-size: 13px;
    font-weight: 700;
}

.tag-chip button[b-k6i9vekkzz] {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    color: var(--on-brand);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.tag-chip button:hover[b-k6i9vekkzz] { background: rgba(255, 255, 255, 0.45); }

.tag-input-row[b-k6i9vekkzz] {
    display: flex;
    gap: 8px;
}

.tag-input-row .form-control[b-k6i9vekkzz] { flex: 1; background: var(--panel); }
.tag-input-row .btn-ghost[b-k6i9vekkzz] { white-space: nowrap; }

.tag-catalog[b-k6i9vekkzz] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}

.tag-suggest[b-k6i9vekkzz] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--blue-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.tag-suggest:hover[b-k6i9vekkzz] { border-color: var(--blue); background: var(--info-soft); }
.tag-suggest i[b-k6i9vekkzz] { font-size: 12px; }

/* Attachments */
.att-block[b-k6i9vekkzz] {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
}

.att-upload[b-k6i9vekkzz] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    flex-wrap: wrap;
}

.att-list[b-k6i9vekkzz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.att-row[b-k6i9vekkzz] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
}

.att-row > i[b-k6i9vekkzz] { font-size: 20px; color: var(--blue-2); flex: 0 0 auto; }

.att-info[b-k6i9vekkzz] { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.att-name[b-k6i9vekkzz] { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-meta[b-k6i9vekkzz] { font-size: 12px; color: var(--muted); }

.btn-icon[b-k6i9vekkzz] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--soft);
    color: var(--blue-2);
    cursor: pointer;
}

.btn-icon:hover[b-k6i9vekkzz] { background: var(--info-soft); }
.btn-icon.danger[b-k6i9vekkzz] { color: var(--danger); }
.btn-icon.danger:hover[b-k6i9vekkzz] { background: var(--red-soft); }

/* «موقع واحد / له فروع» — a two-way segmented control (scoped here: the status pills live in other pages' files). */
.site-mode[b-k6i9vekkzz] {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    margin: 4px 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--soft);
}

.site-mode-btn[b-k6i9vekkzz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.site-mode-btn.on[b-k6i9vekkzz] {
    background: var(--panel);
    color: var(--brand-strong);
    box-shadow: var(--sh-sm);
}

.site-mode-btn:disabled[b-k6i9vekkzz] { opacity: .45; cursor: not-allowed; }
/* /Components/Pages/ProjectHoursReport.razor.rz.scp.css */
/* Project-hours specifics only — the shared report chrome lives in app.css under `.report-page`. */

/* Rows repeat the team/mission only when it changes (the legacy grouped look on a flat table);
   a rule above each new team makes the grouping readable without indentation. */
.report-table tr.group-start td[b-xrr2kfx9tq] { border-top: 1.5px solid var(--line); }
.report-table .cell-dim[b-xrr2kfx9tq] { color: var(--muted); text-align: center; }

@media print {
    .report-table tr.group-start td[b-xrr2kfx9tq] { border-top: 1px solid var(--line-2); }
}
/* /Components/Pages/Projects.razor.rz.scp.css */

/* Expand toggle column + nested site sub-rows (project → its sites, tree-style). */
.expand-col[b-w9ylph0c62] {
    width: 44px;
    text-align: center;
}

.expand-btn[b-w9ylph0c62] {
    width: 30px;
    height: 30px;
}

.expand-btn i[b-w9ylph0c62] {
    transition: transform 0.15s ease;
    font-size: 13px;
}

[b-w9ylph0c62] tr.row-expanded > td {
    background: var(--panel);
}

/* The sub-row spans the full table width and hosts a compact inner table. */
[b-w9ylph0c62] tr.site-subrow > td {
    padding: 0;
    background: var(--panel);
    border-top: 0;
}

.site-subtable-head[b-w9ylph0c62] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--blue-2);
}

.site-subtable-head i[b-w9ylph0c62] { font-size: 14px; }

.site-subtable[b-w9ylph0c62] {
    width: calc(100% - 32px);
    margin: 0 16px 14px;
    border-collapse: collapse;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}

.site-subtable thead th[b-w9ylph0c62] {
    text-align: start;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    background: var(--soft);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.site-subtable tbody td[b-w9ylph0c62] {
    padding: 9px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--on-brand);
}

.site-subtable tbody tr:last-child td[b-w9ylph0c62] { border-bottom: 0; }

.subrow-hint[b-w9ylph0c62] {
    padding: 12px 18px;
    font-size: 13px;
    color: var(--muted);
}

.subrow-more[b-w9ylph0c62] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 16px 14px;
    padding: 7px 14px;
    border: 1px solid var(--blue);
    border-radius: var(--r-md);
    background: var(--info-soft);
    color: var(--blue-2);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.subrow-more:hover[b-w9ylph0c62] { background: var(--info-soft); }
.subrow-more i[b-w9ylph0c62] { font-size: 15px; }
/* /Components/Pages/ProjectView.razor.rz.scp.css */
/* Read-only project dashboard (view page) — prototype #project-details look. */

/* ---- Hero ---- */
.pv-hero[b-c81uq52go1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 22px 24px;
    border-radius: var(--r-xl);
    /* Navy→blue detail hero — themed (follows --sidebar-2 → --hero-accent). */
    background: var(--hero);
    color: var(--on-brand);
}

.pv-hero-main[b-c81uq52go1] { display: flex; align-items: center; gap: 18px; min-width: 0; }

.pv-logo[b-c81uq52go1] {
    width: 72px;
    height: 72px;
    border-radius: var(--r-xl);
    object-fit: cover;
    background: var(--panel);
    flex: 0 0 auto;
    box-shadow: var(--sh-lg);
}

.pv-logo.letter[b-c81uq52go1] { display: grid; place-items: center; font-size: 34px; font-weight: 800; color: var(--brand-strong); }   /* was var(--info) — the semantic BLUE, so the initial rendered blue on an orange-branded tenant */

.pv-hero-text[b-c81uq52go1] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pv-hero-text h2[b-c81uq52go1] { margin: 0; font-size: 26px; font-weight: 800; }

/* Prominent project-code kicker (the code matters to the customer). */
.pv-kicker[b-c81uq52go1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.82);
}

.pv-kicker i[b-c81uq52go1] { font-size: 13px; }
.pv-kicker-label[b-c81uq52go1] { font-weight: 600; }
.pv-kicker strong[b-c81uq52go1] { color: var(--on-brand); font-size: 15px; font-weight: 800; letter-spacing: 0.04em; }
.pv-kicker-sep[b-c81uq52go1] { opacity: 0.5; }

/* Scope tags on the dark hero — translucent pills, matching the kicker. */
.pv-hero-tags[b-c81uq52go1] { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.pv-hero-tag[b-c81uq52go1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.26);
    color: var(--on-brand);
    font-size: 12.5px;
    font-weight: 700;
}
.pv-hero-tag i[b-c81uq52go1] { font-size: 10px; opacity: 0.8; }

/* Status + priority badges — top-left corner of the hero. */
.pv-hero-side[b-c81uq52go1] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }

.pv-priority[b-c81uq52go1] { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.2); }
.pv-priority.prio-critical[b-c81uq52go1] { background: #dc2626; }
.pv-priority.prio-high[b-c81uq52go1] { background: #ea580c; }
.pv-priority.prio-low[b-c81uq52go1] { background: rgba(255, 255, 255, 0.16); }

/* Top action toolbar above the hero — back (start/right) + edit·delete (end/left). */
.pv-toolbar[b-c81uq52go1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.pv-toolbar-actions[b-c81uq52go1] { display: flex; gap: 9px; flex-wrap: wrap; }

/* The KPI cards and .soon-badge are GLOBAL now (app.css) — both views rendered byte-similar
   copies, and the KPI cards collapsed into .stat-card so every card in the app has one look.
   The .business-flow stage strip is gone entirely: every subtitle it carried was a fact with a
   better home. .project-tabs stays scoped below: pills are not cards. */

/* ---- Tabs ---- */
.project-tabs[b-c81uq52go1] { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

.project-tabs button[b-c81uq52go1] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
}

.project-tabs button:hover[b-c81uq52go1] { border-color: var(--blue); color: var(--blue-2); }
.project-tabs button.active[b-c81uq52go1] { color: var(--on-brand); border-color: var(--blue); background: var(--blue); }
.project-tabs .tab-dot[b-c81uq52go1] { width: 6px; height: 6px; border-radius: 50%; background: var(--amber, #f59e0b); }

/* ---- Split grid + rule grid + meta list ---- */
.split-grid[b-c81uq52go1] { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 16px; }
.split-grid > *[b-c81uq52go1] { min-width: 0; }




/* ---- Mini map placeholder ---- */
.pv-mini-map[b-c81uq52go1] {
    position: relative;
    display: grid;
    place-items: center;
    gap: 4px;
    min-height: 150px;
    border-radius: var(--r-lg);
    border: 1px dashed var(--info-line);
    background: repeating-linear-gradient(45deg, var(--panel), var(--panel) 12px, var(--soft) 12px, var(--soft) 24px);
    margin-bottom: 12px;
}

.pv-map[b-c81uq52go1] {
    width: 100%;
    height: 300px;
    border-radius: var(--r-lg);
    margin-bottom: 12px;
    border: 1px solid var(--line);
    background: var(--info-soft);
}

.pv-mini-map strong[b-c81uq52go1] { font-size: 14px; }
.pv-mini-map small[b-c81uq52go1] { color: var(--muted); font-size: 12px; }
.pv-pin[b-c81uq52go1] { width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #dc2626; box-shadow: 0 4px 10px rgba(220, 38, 38, 0.4); }
.pv-maplink-btn[b-c81uq52go1] { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Site coverage grid ---- */
.site-coverage-grid[b-c81uq52go1] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.coverage-box[b-c81uq52go1] { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; background: var(--panel); }
.coverage-box strong[b-c81uq52go1] { display: block; font-size: 14px; }
.coverage-box span[b-c81uq52go1] { display: block; color: var(--text); font-size: 12.5px; margin-top: 3px; }
.coverage-box small[b-c81uq52go1] { display: block; color: var(--muted); font-size: 11.5px; margin-top: 4px; }

/* ---- Bar chart (finance) ---- */
.bar-chart[b-c81uq52go1] { display: grid; gap: 14px; }
.bar-row[b-c81uq52go1] { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; gap: 12px; }
.bar-row span[b-c81uq52go1] { color: var(--muted); font-size: 13px; }
.bar-row > div[b-c81uq52go1] { height: 10px; border-radius: 999px; background: var(--info-soft); overflow: hidden; }
/* The fill used to be a hardcoded cyan→green gradient, decoration on bars that carried no meaning. Now each
   bar means something, so each gets its own colour — and neither is a literal:
   SPENT follows the tenant BRAND (money that went out is the fact, not a success, and green here would be
   the «green means done» collision this app keeps re-learning), while REMAINING is the semantic `--ok` a
   tenant cannot repaint — having budget left really is the good state. */
.bar-row i[b-c81uq52go1] { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.bar-row.left i[b-c81uq52go1] { background: var(--ok); }
.bar-row strong[b-c81uq52go1] { font-size: 13px; text-align: start; }

/* ---- Scope tags (a full-width rule-box like the rest) ---- */

/* ---- Operational placeholders ---- */
.op-placeholder[b-c81uq52go1] {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 6px;
    padding: 34px 24px;
    margin-bottom: 14px;
    border: 1px dashed var(--info-line);
    border-radius: var(--r-xl);
    background: var(--panel);
}

.op-placeholder.small[b-c81uq52go1] { padding: 22px 18px; }
.op-placeholder > i[b-c81uq52go1] { font-size: 30px; color: var(--muted); }   /* was a hardcoded pale blue — a blue glyph on an orange-branded tenant, and too light to read in dark */
.op-placeholder strong[b-c81uq52go1] { font-size: 15px; }
.op-placeholder p[b-c81uq52go1] { margin: 0; max-width: 56ch; color: var(--muted); font-size: 13px; line-height: 1.7; }
.op-note[b-c81uq52go1] { margin: 12px 0 0; color: var(--muted); font-size: 12px; }

/* ---- Attachments ---- */
.pv-count[b-c81uq52go1] { display: inline-block; min-width: 22px; padding: 1px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.att-ico[b-c81uq52go1] { color: var(--blue-2); margin-inline-end: 6px; }

.pv-notes[b-c81uq52go1] { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text); white-space: pre-wrap; }

@media (max-width: 900px) {
    .split-grid[b-c81uq52go1] { grid-template-columns: 1fr; }
    .rule-grid[b-c81uq52go1] { grid-template-columns: 1fr 1fr; }
}

/* The attendance window picker: two date boxes that must sit on ONE line inside the panel header.
   `.form-control` is width:100%, so without a sized row they each claim the header's width and wrap. */
.pv-daterange[b-c81uq52go1] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pv-daterange .form-control[b-c81uq52go1] {
    width: 155px;
    min-width: 0;
    /* 46px is the app's control height — the topbar's 42/42/46 mismatch was fixed by agreeing on it, so a
       date box that opts out here would be the same inconsistency in a new place. */
    min-height: 46px;
}
.pv-daterange-sep[b-c81uq52go1] { color: var(--muted); font-size: 13px; }
/* /Components/Pages/Reports.razor.rz.scp.css */
/* ── Hub header — just the "last opened" shortcut now, at the far end so it stays a quiet secondary
      affordance instead of competing with the featured card opposite it. ────────────────────────── */
.rep-head[b-a5e4to1wkb] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.rep-last[b-a5e4to1wkb] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--panel);
    box-shadow: var(--sh-sm);
    cursor: pointer;
    text-align: start;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.rep-last:hover[b-a5e4to1wkb] {
    border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
    box-shadow: var(--sh-md);
}

.rep-last > i[b-a5e4to1wkb] {
    font-size: 18px;
    color: var(--blue);
}

.rl-body[b-a5e4to1wkb] { display: grid; gap: 1px; min-width: 0; }
.rl-kicker[b-a5e4to1wkb] { font-size: 11.5px; color: var(--muted); }
.rl-title[b-a5e4to1wkb] { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.rl-when[b-a5e4to1wkb] { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ── The card grid. Two columns, and the featured card is two rows tall — see the ORDER note in the
      component: auto-placement, not explicit areas, is what puts the cards where they land. ────── */
.rep-grid[b-a5e4to1wkb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

@media (max-width: 1100px) {
    .rep-grid[b-a5e4to1wkb] { grid-template-columns: 1fr; }
    .rep-card.featured[b-a5e4to1wkb] { grid-row: auto; }   /* one column: nothing to span */
}

.rep-card[b-a5e4to1wkb] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--panel);
    box-shadow: var(--sh-sm);
    cursor: pointer;
    transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}

.rep-card:hover[b-a5e4to1wkb] {
    border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
    box-shadow: var(--sh-md);
    transform: translateY(-1px);
}

/* The feature. Tinted and bordered from var(--blue), NOT a literal colour — on the SHIFT default this
   is blue and on an orange-branded tenant it is orange, which is the whole point of the theme vars. */
.rep-card.featured[b-a5e4to1wkb] {
    grid-row: span 2;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    padding: 26px;
    border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
    border-top: 3px solid var(--blue);
    background: color-mix(in srgb, var(--blue) 5%, var(--panel));
}

.rep-card.featured .rc-icon[b-a5e4to1wkb] { width: 56px; height: 56px; font-size: 26px; }
.rep-card.featured .rc-title[b-a5e4to1wkb] { font-size: 20px; }
.rep-card.featured .rc-desc[b-a5e4to1wkb] { font-size: 14px; max-width: 46ch; }
.rep-card.featured .rc-open[b-a5e4to1wkb] { align-self: flex-end; }

.rc-icon[b-a5e4to1wkb] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--r-lg);
    font-size: 20px;
    color: var(--on-brand);
    background: linear-gradient(135deg, var(--blue), var(--hero-accent));
}

/* ONE tile for every card (owner's call 2026-08-15: «واحدة منهم لونها غريب»). There used to be
   .green/.cyan/.amber per-card variants, and the amber one was a HARDCODED `#f2a33c → #e07c1f` — a
   different orange from the tenant's brand orange, so it read as a mistake rather than a category.
   The cards are told apart by their icon and title; the tile colour was carrying no information. */

.rc-body[b-a5e4to1wkb] { flex: 1 1 auto; min-width: 0; }

.rc-title[b-a5e4to1wkb] {
    margin: 0;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
}

.rc-desc[b-a5e4to1wkb] {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
}

/* The grouping dimensions the report can break its numbers down by. */
.rc-tags[b-a5e4to1wkb] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.rc-tag[b-a5e4to1wkb] {
    font-size: 11.5px;
    color: var(--muted);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 10px;
}

.rc-views[b-a5e4to1wkb] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.rc-view[b-a5e4to1wkb] {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.rc-view:hover[b-a5e4to1wkb] {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--on-brand);
}

.rc-open[b-a5e4to1wkb] {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-strong);
    white-space: nowrap;
}

/* The `.money-note` rules were deleted with the panel they styled (2026-08-15). */
/* /Components/Pages/Roles.razor.rz.scp.css */
.page-wrap[b-gp9apf0z9v] { display: flex; flex-direction: column; gap: 18px; }

.table-area[b-gp9apf0z9v] { position: relative; min-height: 120px; }
/* .reload-overlay is defined once in global app.css (it is used by every list screen);
   the byte-copy that used to sit here carried a hardcoded white and broke in dark mode. */

.empty-state[b-gp9apf0z9v] {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 46px 16px; color: var(--muted); text-align: center;
}
.empty-state i[b-gp9apf0z9v] { font-size: 30px; opacity: .55; }

/* table cells */
.role-code[b-gp9apf0z9v] { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.role-desc[b-gp9apf0z9v] { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.perm-count[b-gp9apf0z9v] { font-weight: 800; color: var(--brand-strong); font-variant-numeric: tabular-nums; }

.role-badge[b-gp9apf0z9v] { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.role-badge.system[b-gp9apf0z9v] { background: var(--info-soft); color: var(--info); }
.role-badge.custom[b-gp9apf0z9v] { background: var(--ok-soft); color: var(--ok-ink); }
.role-badge.active[b-gp9apf0z9v] { background: var(--ok-soft); color: var(--ok-ink); }
.role-badge.inactive[b-gp9apf0z9v] { background: var(--info-soft); color: var(--ink); }

.gm-note[b-gp9apf0z9v] { display: inline-block; margin-inline-start: 8px; font-size: 11px; font-weight: 800; color: var(--brand-strong); background: var(--blue-soft); padding: 2px 8px; border-radius: 999px; }
.user-count[b-gp9apf0z9v] { font-weight: 800; font-variant-numeric: tabular-nums; }

/* matrix panel */
.matrix-pick[b-gp9apf0z9v] { display: flex; align-items: center; gap: 8px; }
.matrix-pick .form-select[b-gp9apf0z9v] { min-width: 220px; }

.perm-legend[b-gp9apf0z9v] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
    background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 10px 14px; margin: 0 0 12px; font-size: 12.5px; color: var(--muted);
}
.perm-legend .legend-title[b-gp9apf0z9v] { font-weight: 800; color: var(--ink); }
.perm-legend b[b-gp9apf0z9v] { color: var(--brand-strong); font-weight: 800; }

.matrix-table th.cell[b-gp9apf0z9v], .matrix-table td.cell[b-gp9apf0z9v] { text-align: center; width: 84px; }
.matrix-table .cell-on[b-gp9apf0z9v] { color: var(--ok-ink); font-size: 16px; }
.matrix-table .cell-off[b-gp9apf0z9v] { color: var(--muted); }
.matrix-table .cell-na[b-gp9apf0z9v] { color: var(--muted); }

/* user↔role overview */
.assign-chips[b-gp9apf0z9v] { display: flex; flex-wrap: wrap; gap: 5px; }
.assign-chip[b-gp9apf0z9v] { background: var(--blue-soft); color: var(--brand-strong); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }

/* modal preset button row */
.matrix-tools[b-gp9apf0z9v] { display: flex; align-items: center; gap: 12px; }
.btn-ghost.sm[b-gp9apf0z9v] { padding: 4px 10px; font-size: 12px; min-height: 0; }

.icon-btn.danger:hover[b-gp9apf0z9v] { color: var(--red); }

/* modal sizing */
.role-modal[b-gp9apf0z9v] { max-width: 720px; width: calc(92vw / var(--ui-scale)); }

.role-sys-note[b-gp9apf0z9v] {
    display: flex; align-items: center; gap: 8px;
    background: var(--info-soft); color: var(--info); border: 1px solid var(--info-line);
    border-radius: var(--r-md); padding: 9px 12px; font-size: 13px; font-weight: 600; margin-bottom: 12px;
}

/* permission matrix */
.perm-matrix-head[b-gp9apf0z9v] {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 14px 0 6px;
}
.perm-selected[b-gp9apf0z9v] { font-size: 12px; font-weight: 800; color: var(--brand-strong); }

.perm-matrix[b-gp9apf0z9v] {
    display: flex; flex-direction: column; gap: 8px;
    border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; background: var(--panel);
    max-height: 340px; overflow-y: auto;
}
.perm-row[b-gp9apf0z9v] {
    display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center;
    padding: 6px 4px; border-bottom: 1px dashed var(--line);
}
.perm-row:last-child[b-gp9apf0z9v] { border-bottom: none; }
.perm-module[b-gp9apf0z9v] { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.perm-mod-toggle[b-gp9apf0z9v] {
    background: none; border: none; cursor: pointer; color: var(--brand-strong);
    font-size: 17px; line-height: 1; padding: 0; display: inline-flex;
}
.perm-actions[b-gp9apf0z9v] { display: flex; flex-wrap: wrap; gap: 6px; }
.perm-chip[b-gp9apf0z9v] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 999px; cursor: pointer; user-select: none;
    background: var(--info-soft); color: var(--muted); border: 1px solid transparent;
    font-size: 12px; font-weight: 700; transition: background .12s, color .12s;
}
.perm-chip input[b-gp9apf0z9v] { accent-color: var(--blue); margin: 0; }
.perm-chip.on[b-gp9apf0z9v] { background: var(--blue-soft); color: var(--brand-strong); border-color: color-mix(in srgb, var(--blue) 30%, transparent); }

@media (max-width: 640px) {
    .perm-row[b-gp9apf0z9v] { grid-template-columns: 1fr; }
}
/* /Components/Pages/ServicePurchaseCenters.razor.rz.scp.css */
/* Map location-picker chrome (mirrors the branch picker in CompanyProfile.razor.css). */
.map-section[b-acqc7k1933] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.map-placeholder[b-acqc7k1933] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    margin: 8px 0 12px;
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    background: var(--soft);
    color: var(--muted);
    font-size: 13px;
}

.map-placeholder i[b-acqc7k1933] { font-size: 22px; }

.map-hint[b-acqc7k1933] {
    font-size: 12px;
    color: var(--muted);
    margin: 4px 0 8px;
}

.map-search-row[b-acqc7k1933] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.map-search-row input[b-acqc7k1933] { flex: 1; }
.map-search-row .btn-ghost[b-acqc7k1933] { white-space: nowrap; }

#spcMap[b-acqc7k1933] {
    width: 100%;
    height: 320px;
    border-radius: var(--r-lg);
    margin: 8px 0 12px;
    border: 1px solid var(--line);
    background: var(--info-soft);
}
/* /Components/Pages/TaskForm.razor.rz.scp.css */
/* Locked (read-only) banner + fieldset — mirrors MissionForm (Blazor CSS isolation → per-page copy) */
.locked-zone[b-k2etlq50y7] {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.locked-zone:disabled[b-k2etlq50y7] { opacity: .72; }

.locked-banner[b-k2etlq50y7] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 12px 16px;
    border: 1px solid var(--amber-line);
    border-radius: var(--r-lg);
    background: var(--amber-soft);
    color: var(--amber-ink);
    font-size: 14px;
    font-weight: 600;
}
.locked-banner > i[b-k2etlq50y7] { font-size: 17px; }

/* Target location map (point-only picker) */
.map-section[b-k2etlq50y7] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}
.map-placeholder[b-k2etlq50y7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    margin: 8px 0 12px;
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    background: var(--soft);
    color: var(--muted);
    font-size: 13px;
}
.map-placeholder i[b-k2etlq50y7] { font-size: 22px; }
.map-search-row[b-k2etlq50y7] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.map-search-row input[b-k2etlq50y7] { flex: 1; }
.map-search-row .btn-ghost[b-k2etlq50y7] { white-space: nowrap; }

#taskMap[b-k2etlq50y7] {
    width: 100%;
    height: 300px;
    border-radius: var(--r-lg);
    margin: 8px 0 12px;
    border: 1px solid var(--line);
    background: var(--info-soft);
}

.target-row[b-k2etlq50y7] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 6px 0 10px;
}
.dl-chip[b-k2etlq50y7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--info-soft);
    border: 1px solid var(--info-line);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 13px;
    color: var(--ink);
}

/* Status segmented pills (mirrors MissionForm — Blazor CSS isolation → per-page copy) */
.status-pills[b-k2etlq50y7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.status-pill[b-k2etlq50y7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink, var(--ink));
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.status-pill:hover[b-k2etlq50y7] { border-color: var(--blue); }
.status-pill i[b-k2etlq50y7] { font-size: 13px; }
.status-pill.sp-auto.on[b-k2etlq50y7]       { background: var(--info-soft); border-color: #8b5cf6; color: var(--red-ink); }
.status-pill.sp-scheduled.on[b-k2etlq50y7]  { background: var(--blue-soft); border-color: var(--hero-accent); color: var(--brand-strong); }
.status-pill.sp-inprogress.on[b-k2etlq50y7] { background: var(--ok-soft); border-color: #2f9e6f; color: var(--ok-ink); }
.status-pill.sp-completed.on[b-k2etlq50y7]  { background: var(--ok-soft); border-color: #0f766e; color: var(--info); }
.status-pill.sp-pending.on[b-k2etlq50y7]    { background: var(--amber-soft); border-color: #c47d04; color: var(--amber-ink); }
.status-pill.sp-cancelled.on[b-k2etlq50y7]  { background: var(--red-soft); border-color: #c0392b; color: var(--red-ink); }
/* Priority tints */
.status-pill.sp-high.on[b-k2etlq50y7]   { background: var(--red-soft); border-color: #c0392b; color: var(--red-ink); }
.status-pill.sp-medium.on[b-k2etlq50y7] { background: var(--amber-soft); border-color: #c47d04; color: var(--amber-ink); }
.status-pill.sp-low.on[b-k2etlq50y7]    { background: var(--blue-soft); border-color: var(--hero-accent); color: var(--brand-strong); }

/* Responsible-team tint on assigned chips + the section badge (mirrors MissionForm) */
.badge-soft[b-k2etlq50y7] {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--info-soft);
    color: var(--blue-2);
    font-size: 12px;
    font-weight: 700;
}
/* check-in geofence source radios */
.checkin-modes[b-k2etlq50y7] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ci-radio[b-k2etlq50y7] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--panel);
    font-size: 13px;
    font-weight: 650;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .14s, background .14s;
}
.ci-radio.on[b-k2etlq50y7] { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--panel)); color: var(--blue-2); }
.ci-radio input[b-k2etlq50y7] { accent-color: var(--blue); }
/* /Components/Pages/Tasks.razor.rz.scp.css */
/* Day-log gap-analysis — trigger card + wide modal */
.daylog-trigger[b-pcr247xptp] { border-inline-start: 3px solid var(--hero-accent); }

/* The 8-column analysis table needs room → a wider modal than the default .wide */
.modal-shift.daylog-modal[b-pcr247xptp] { width: min(1300px, calc(97vw / var(--ui-scale))); }

.daylog-controls[b-pcr247xptp] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 2px 0 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.daylog-controls .form-select[b-pcr247xptp] { max-width: 320px; }
.daylog-controls .form-control[b-pcr247xptp] { max-width: 190px; }

.empty-hint[b-pcr247xptp] {
    padding: 22px 8px;
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
}

.daylog-summary[b-pcr247xptp] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 12px;
}
.dl-chip[b-pcr247xptp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--info-soft);
    border: 1px solid var(--info-line);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 13px;
    color: var(--ink);
}
.dl-chip strong[b-pcr247xptp] { color: var(--ink); }

.daylog-table .row-mismatch[b-pcr247xptp] { background: var(--amber-soft); }
.daylog-table .row-mismatch:hover[b-pcr247xptp] { background: var(--amber-soft); }

/* Order badge — the expected/actual sequence number */
.order-badge[b-pcr247xptp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: var(--r-sm);
    background: var(--info-soft);
    color: var(--ink);
    font-weight: 700;
    font-size: 13px;
}
.order-badge.mismatch[b-pcr247xptp] { background: #f97316; color: var(--on-brand); }

/* Completion-state pills */
.state-pill[b-pcr247xptp] {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.state-pill.st-done[b-pcr247xptp] { background: var(--ok-soft); color: var(--ok-ink); }
.state-pill.st-working[b-pcr247xptp] { background: var(--info-soft); color: var(--info); }
.state-pill.st-planned[b-pcr247xptp] { background: var(--info-soft); color: var(--ink); }
.state-pill.st-pending[b-pcr247xptp] { background: var(--amber-soft); color: var(--amber-ink); }
.state-pill.st-cancelled[b-pcr247xptp] { background: var(--red-soft); color: var(--red-ink); }

/* --- تسجيل يدوي: the admin on-behalf entry inside the day-log --------------------------------------- */

/* A manual event has no coordinates, so its gap/distance/deviation cells are empty. Without this marker
   that reads as "the phone didn't report a location" rather than "nobody was measured". Amber, not red:
   the day IS recorded and the work may well be genuine — red stays for a refused punch. */
.manual-tag[b-pcr247xptp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    color: color-mix(in srgb, var(--amber) 80%, var(--ink));
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.manual-panel[b-pcr247xptp] {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--soft);
}

.manual-head[b-pcr247xptp] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.manual-head > button[b-pcr247xptp] { margin-inline-start: auto; }

.manual-note[b-pcr247xptp] {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.7;
}

.manual-grid[b-pcr247xptp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.manual-field[b-pcr247xptp] { display: flex; flex-direction: column; gap: 5px; }
.manual-field.wide[b-pcr247xptp] { grid-column: 1 / -1; }
.manual-field > span[b-pcr247xptp] { font-size: 12px; font-weight: 600; color: var(--ink); }

.manual-locked[b-pcr247xptp] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--line) 35%, transparent);
    color: var(--muted);
    font-size: 13px;
}

.manual-actions[b-pcr247xptp] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.btn-sm[b-pcr247xptp] { padding: 4px 10px; font-size: 12px; }

/* ⚠️ NOT `.delete-blocked` — that rule is written as `.confirm-dialog .delete-blocked` in global app.css, so
   reusing the class outside a confirm dialog renders the banner completely UNSTYLED. Tenth instance of the
   CSS trap this file keeps re-learning, caught by grepping the class before shipping rather than after.
   Lifting the global rule was the wrong fix: it would restyle every setup delete dialog for one new panel. */
.manual-error[b-pcr247xptp] {
    margin-top: 12px;
    padding: 10px 13px;
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
    background: color-mix(in srgb, var(--red) 8%, transparent);
    color: color-mix(in srgb, var(--red) 85%, var(--ink));
    font-size: 12.5px;
    line-height: 1.85;
    text-align: start;
}
/* /Components/Pages/TravelFees.razor.rz.scp.css */
/* company travel-policy fields: one compact row (wraps on narrow screens) */
.policy-grid[b-t77ceshdte] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}
.policy-grid .field-group[b-t77ceshdte] { display: flex; flex-direction: column; gap: 5px; }

@media (max-width: 900px) {
    .policy-grid[b-t77ceshdte] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .policy-grid[b-t77ceshdte] { grid-template-columns: 1fr; }
}

/* locked policy = readonly inputs read as "display" (subtle fill, no caret) */
.policy-grid.locked .form-control[readonly][b-t77ceshdte] {
    background: var(--soft);
    color: var(--ink);
    cursor: default;
    border-style: dashed;
}
/* /Components/Pages/WorkingRules.razor.rz.scp.css */
/* Wider modal so the two-column policy form has room. */
.modal-shift-wide[b-ntgth430bs] { width: min(1080px, calc(96vw / var(--ui-scale))); }

/* Two-column modal layout for the policy form. */
.split-grid[b-ntgth430bs] {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 22px;
}

@media (max-width: 900px) {
    .split-grid[b-ntgth430bs] { grid-template-columns: 1fr; }
}

.section-label[b-ntgth430bs] {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    margin: 14px 0 8px;
    text-transform: none;
}
.section-label:first-child[b-ntgth430bs] { margin-top: 0; }

/* 7-day weekly work pattern */
.week-pattern[b-ntgth430bs] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

@media (max-width: 560px) {
    .week-pattern[b-ntgth430bs] { grid-template-columns: repeat(4, 1fr); }
}

.day-toggle[b-ntgth430bs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
    text-align: center;
    background: var(--panel);
    transition: border-color .15s, background .15s;
}

.day-toggle input[b-ntgth430bs] { margin: 0; }
.day-toggle strong[b-ntgth430bs] { font-size: 12px; }
.day-toggle span[b-ntgth430bs] { font-size: 10px; color: var(--muted); }

.day-toggle.is-work[b-ntgth430bs] {
    border-color: var(--info-line);
    background: var(--info-soft);
}

/* Scope checkboxes */
.capability-grid[b-ntgth430bs] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.capability-grid label[b-ntgth430bs] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
}

/* Attendance status logic explainer */
.status-logic-list[b-ntgth430bs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-logic-list > div[b-ntgth430bs] {
    padding: 8px 10px;
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
    background: var(--soft);
}

.status-logic-list strong[b-ntgth430bs] { display: block; font-size: 13px; }
.status-logic-list span[b-ntgth430bs] { font-size: 12px; color: var(--muted); }

/* The policy preview facts are sentences, not headline numbers — the global .rule-box strong is sized for a figure. */
.policy-facts[b-ntgth430bs]  .rule-box strong, .policy-facts .rule-box strong[b-ntgth430bs] { font-size: 14px; font-weight: 700; line-height: 1.7; }
/* /Components/Shared/ClaimLocation.razor.rz.scp.css */
.cl[b-7y0nyd7aso] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.45;
}

/* The mission is what the claim itself names, so it carries the weight; the project is the container it
   sits in and reads as a sub-line — the same shape as the employee name + code pairs on this screen. */
.cl-mission[b-7y0nyd7aso] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
}

.cl-project[b-7y0nyd7aso] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
}

/* An <a> with no href is not a link — only the ones that can actually be opened get the affordance. */
.cl-mission[href]:hover[b-7y0nyd7aso],
.cl-project[href]:hover[b-7y0nyd7aso] {
    color: var(--brand-strong);
    text-decoration: underline;
}

.cl-mission i[b-7y0nyd7aso],
.cl-project i[b-7y0nyd7aso] {
    font-size: 11px;
    opacity: .75;
}

/* «بدون مهمة» / «بدون مشروع» are answers, not gaps — muted so they recede, but never blank. */
.cl-none[b-7y0nyd7aso],
.cl-noproject[b-7y0nyd7aso] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
}

.cl-none[b-7y0nyd7aso] {
    font-size: 12.5px;
}

.cl-noproject[b-7y0nyd7aso] {
    font-size: 11.5px;
    font-weight: 600;
}
/* /Components/Shared/ProjectDeleteConfirm.razor.rz.scp.css */
/* Cascade warning inside the delete-confirm dialog. */
.delete-cascade-note[b-2k4v5jtkrt] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 4px 0 14px;
    padding: 10px 13px;
    border: 1px solid var(--amber-line);
    border-radius: var(--r-md);
    background: var(--amber-soft);
    color: var(--amber-ink);
    font-size: 13px;
    line-height: 1.6;
    text-align: start;
}

.delete-cascade-note.loading[b-2k4v5jtkrt] {
    border-color: var(--line);
    background: var(--soft);
    color: var(--muted);
    align-items: center;
}

.delete-cascade-note i[b-2k4v5jtkrt] { font-size: 16px; flex: 0 0 auto; margin-top: 1px; }
.delete-cascade-note strong[b-2k4v5jtkrt] { font-weight: 800; }

/* Type-the-code gate before the destructive button activates. */
.delete-confirm-gate[b-2k4v5jtkrt] {
    text-align: start;
    margin: 0 0 16px;
}

.delete-confirm-gate label[b-2k4v5jtkrt] {
    display: block;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 6px;
}

.delete-confirm-gate .form-control[b-2k4v5jtkrt] {
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.gate-mismatch[b-2k4v5jtkrt] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--danger);
}

.gate-mismatch i[b-2k4v5jtkrt] { font-size: 13px; }
.gate-error[b-2k4v5jtkrt] { justify-content: center; margin: 0 0 12px; width: 100%; }
/* /Components/Shared/SearchPicker.razor.rz.scp.css */
.search-picker[b-2jndmt63i0] { position: relative; min-width: 220px; }

.sp-field[b-2jndmt63i0] { position: relative; display: flex; align-items: center; }
.sp-field > i[b-2jndmt63i0] {
    position: absolute;
    inset-inline-start: 12px;
    color: var(--ink-2);
    font-size: 13px;
    pointer-events: none;
}
.sp-field input[b-2jndmt63i0] { padding-inline-start: 32px; }

.sp-menu[b-2jndmt63i0] {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline: 0;
    z-index: 40;
    background: var(--panel);
    border: 1px solid var(--info-line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}
.sp-msg[b-2jndmt63i0] { padding: 10px 12px; color: var(--ink-2); font-size: 13px; }
.sp-item[b-2jndmt63i0] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--on-brand);
    text-align: start;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
}
.sp-item:last-child[b-2jndmt63i0] { border-bottom: 0; }
.sp-item:hover[b-2jndmt63i0] { background: var(--panel); }
.sp-code[b-2jndmt63i0] {
    font-size: 11px;
    font-weight: 700;
    color: var(--hero-accent);
    background: var(--info-soft);
    border-radius: var(--r-xs);
    padding: 1px 6px;
    white-space: nowrap;
}

.sp-ext[b-2jndmt63i0] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-2);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    padding: 0 6px;
    white-space: nowrap;
    direction: ltr;
}

.sp-chip[b-2jndmt63i0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding-block: 6px; padding-inline: 8px 14px;
    border: 1px solid var(--info-line);
    background: var(--panel);
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.sp-x[b-2jndmt63i0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: var(--info-soft);
    color: var(--hero-accent);
    cursor: pointer;
    font-size: 11px;
}
.sp-x:hover[b-2jndmt63i0] { background: var(--hero-accent); color: var(--on-brand); }