/* APS brand palette, taken from apsgulf.com */
:root {
    --aps-navy: #2F578B;
    --aps-navy-dark: #24446E;
    --aps-orange: #EF5736;
    --aps-gold: #FBB22F;
    --aps-ink: #1B2430;
    --aps-muted: #667085;
    --aps-line: #E4E8EF;
    --aps-bg: #F5F7FA;
    --aps-card: #FFFFFF;
    --aps-radius: 14px;
}

/* Vazirmatn for Persian, Inter for Latin. The woff2 files are not bundled yet -
   drop them in wwwroot/fonts and add @font-face here. Until then the stack falls
   back to whatever the OS provides, which still renders Persian correctly. */
html[dir="rtl"] body { font-family: Vazirmatn, "Segoe UI", Tahoma, sans-serif; }
html[dir="ltr"] body { font-family: Inter, "Segoe UI", Arial, sans-serif; }

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--aps-bg);
    color: var(--aps-ink);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.aps-shell { width: min(1180px, calc(100% - 2.5rem)); margin-inline: auto; }

/* ---------- header ---------- */
.aps-header {
    background: var(--aps-navy);
    color: #fff;
    border-block-end: 3px solid var(--aps-gold);
}
/* ⚠️ THE HEADER IS WHAT MADE PHONES SCROLL SIDEWAYS.
 *
 * Reported from the rig: "the header is large and the English and sign-out buttons make
 * the page scroll" — and the tiles were fine, which was exactly right. This row held the
 * wide logo lockup, the company name, the username, sign-out and the language switch,
 * none of which could shrink or wrap, so the header set a minimum width larger than a
 * phone and pushed the WHOLE PAGE wider. Because the portal shell is RTL, the overflow
 * ran off the left edge and the page opened already scrolled.
 *
 * Three separate causes, all here:
 *   1. no flex-wrap, so the row could only grow;
 *   2. no min-width:0, so flex items refused to shrink below their content;
 *   3. .aps-logout-form is a <form> — a BLOCK element — so the actions stacked into a
 *      tall column instead of sitting in a compact row.
 */
.aps-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem 1rem; padding-block: .85rem;
    /* Actions drop to their own line rather than widening the page. */
    flex-wrap: wrap;
    min-width: 0;
}
.aps-brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.aps-brand__mark { width: 40px; height: 40px; flex: none; }
.aps-brand__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.aps-brand__name { font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.aps-brand__sub { font-size: .78rem; opacity: .8; }

/* A compact row that wraps, not a column. The <form> inside must be inline for this. */
.aps-header__actions {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .4rem; min-width: 0;
}
.aps-logout-form { display: inline-flex; margin: 0; }

.aps-lang {
    border: 1px solid rgba(255,255,255,.45);
    padding: .3rem .85rem; border-radius: 999px; font-size: .85rem;
    transition: background .15s ease;
    white-space: nowrap;
}
.aps-lang:hover { background: rgba(255,255,255,.14); }

/* A long sAMAccountName must not be able to set the width of the page. */
.aps-user {
    max-width: 11rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- hero ---------- */
.aps-main { padding-block: 2.25rem 3rem; }
.aps-hero { margin-block-end: 1.75rem; }
.aps-hero h1 { margin: 0 0 .35rem; font-size: 1.6rem; color: var(--aps-navy-dark); }
.aps-hero p { margin: 0; color: var(--aps-muted); }

/* ---------- tiles ---------- */
.aps-tiles {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.aps-tile {
    background: var(--aps-card);
    border: 1px solid var(--aps-line);
    border-radius: var(--aps-radius);
    padding: 1.25rem;
    display: flex; flex-direction: column;
    box-shadow: 0 1px 2px rgba(16,24,40,.05);
    transition: box-shadow .18s ease, transform .18s ease;
}
.aps-tile:hover { box-shadow: 0 10px 24px rgba(16,24,40,.09); transform: translateY(-2px); }
.aps-tile--pending { opacity: .82; background: #FCFCFD; }
.aps-tile__icon {
    width: 46px; height: 46px; border-radius: 11px;
    display: grid; place-items: center; margin-block-end: .9rem;
    background: rgba(47,87,139,.09); color: var(--aps-navy);
}
.aps-tile__icon svg { width: 24px; height: 24px; }
.aps-tile--pending .aps-tile__icon { background: rgba(102,112,133,.1); color: var(--aps-muted); }
.aps-tile__title { margin: 0 0 .3rem; font-size: 1.08rem; }
.aps-tile__desc { margin: 0 0 1.1rem; color: var(--aps-muted); font-size: .9rem; flex: 1; }
.aps-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.aps-chip {
    font-size: .72rem; padding: .18rem .6rem; border-radius: 999px;
    background: rgba(251,178,47,.16); color: #8A5B00; white-space: nowrap;
}
.aps-tile__go {
    background: var(--aps-orange); color: #fff;
    padding: .42rem 1.05rem; border-radius: 8px; font-size: .88rem; font-weight: 600;
}
.aps-tile__go:hover { background: #D8492B; }
.aps-tile__pending { font-size: .84rem; color: var(--aps-muted); }
.aps-tile__reason {
    margin: .8rem 0 0; padding-block-start: .7rem;
    border-block-start: 1px dashed var(--aps-line);
    font-size: .78rem; color: var(--aps-muted);
}

/* ---------- status strip ---------- */
.aps-status {
    margin-block-start: 2rem; padding: .9rem 1.1rem;
    border-radius: 10px; font-size: .88rem;
    display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline;
}
.aps-status--ok  { background: #E8F5EC; color: #1B5E33; border: 1px solid #BFE3CB; }
.aps-status--bad { background: #FDECEA; color: #8C2318; border: 1px solid #F5C2BC; }

/* ---------- footer ---------- */
.aps-footer {
    border-block-start: 1px solid var(--aps-line);
    background: #fff; padding-block: 1rem;
    font-size: .82rem; color: var(--aps-muted);
}
.aps-footer .aps-shell { display: flex; justify-content: space-between; gap: 1rem; }

@media (max-width: 560px) {
    .aps-brand__sub { display: none; }
    .aps-hero h1 { font-size: 1.35rem; }

    /* On a phone the header earns its space back. The logo is a wide lockup, so its
       HEIGHT is what drives its width — dropping 34px to 24px is the single biggest
       saving in the row. The company name goes with it: the mark already says whose
       system this is, and the crew are signing in to it every shift. */
    .aps-header__inner { padding-block: .55rem; gap: .45rem .6rem; }
    .aps-brand__logo { height: 24px; }
    .aps-brand__name { display: none; }
    .aps-brand { gap: .5rem; }

    /* Small enough that admin + username + sign out + language fit one wrapped row,
       still tall enough to hit with a thumb. */
    .aps-lang { padding: .28rem .6rem; font-size: .78rem; }
    .aps-user { max-width: 7.5rem; font-size: .8rem; }

    .aps-footer .aps-shell { flex-wrap: wrap; }
}
/* The logo is a wide lockup (2175x764), so height drives it and width follows. */
.aps-brand__logo { height: 34px; width: auto; display: block; }
.aps-slip__logo  { height: 42px; width: auto; display: block; }
/* ─────────────────────────────────────────────────────────────────────────────
   کارپوشه / Workspace tile badge — how many things are waiting on this person.

   ⚠️ SCOPED TO .aps-tile--badged, NOT ADDED TO .aps-tile.

   `position: relative` belongs on the tile for the badge to anchor to, but putting
   it on .aps-tile would change the containing block of EVERY tile on the portal to
   fix one. Nothing else is absolutely positioned in there today, so it would very
   probably be harmless — "very probably harmless" on the front page is not a trade
   worth taking when a modifier class costs nothing. Only the tile that actually
   carries a badge gets the new containing block.

   ⚠️ LOGICAL PROPERTIES. inset-inline-end puts the badge top-right when the portal
   is English and top-LEFT when it is Persian, which is where a notification marker
   belongs in each — the corner away from where the eye starts.
   ───────────────────────────────────────────────────────────────────────────── */

.aps-tile--badged { position: relative; }

.aps-tile__badge {
    position: absolute;
    inset-block-start: -9px;
    inset-inline-end: -9px;

    /* Sized from the text, with a floor, so "3" is a circle and "12" is a lozenge
       rather than a squashed oval. */
    min-width: 24px;
    height: 24px;
    padding-inline: 7px;
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--r-pill, 999px);

    /* Red, and deliberately not the orange used for "Open" — the action button and
       the alert must not read as the same thing at a glance. The ring is the card's
       own background, so the badge stays legible where it overlaps the border. */
    background: #C4341F;
    color: #FFFFFF;
    box-shadow: 0 0 0 2px var(--aps-card, #FFFFFF);

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    /* Latin digits in both directions: the count is a number, not a language. */
    font-variant-numeric: tabular-nums;
    direction: ltr;
}
/* =============================================================================
   HOME — the way back to the tiles, on every page in the estate.

   Markup: Views/Shared/_HomeButton.cshtml, included by _Layout AND _AdminLayout.
   This file is loaded by both, which is why the rules live here and not in an
   area stylesheet.

   ⚠️ ONE ELEMENT, TWO SHAPES. On a desktop header it is a pill in the actions row.
   On a phone the SAME element becomes a fixed circle in the bottom corner — not a
   second copy. A phone header sits at the top of a 6" screen, which is the part of
   the screen a thumb cannot reach; "put a home link in the header" and "make it
   thumb-reachable" only agree if the element moves.

   ⚠️ ORDER MATTERS. The @media block below must stay AFTER the base .aps-home rule:
   both are specificity 0,1,0, so the later one wins and nothing else decides it.
   Moving these rules apart, or above the base rule, silently reverts the phone
   layout while the stylesheet still deploys clean.

   ⚠️ LOGICAL PROPERTIES throughout. The portal shell is RTL in Persian and LTR in
   English, so inset-inline-end puts the button under the right thumb in English and
   the left thumb in Persian — the trailing corner either way.
   ============================================================================= */

.aps-home {
    display: inline-flex;
    align-items: center;
    gap: .4rem;

    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-size: .85rem;
    white-space: nowrap;

    /* --tap-min comes from aps-tokens.css, which the ADMIN layout does not load.
       The fallback is not decoration: without it the admin button has no minimum
       height at all. */
    min-block-size: var(--tap-min, 40px);
    box-sizing: border-box;

    color: #fff;
    transition: background .15s ease;
}
.aps-home:hover { background: rgba(255, 255, 255, .14); }
.aps-home:focus-visible { outline: 2px solid var(--aps-gold, #FBB22F); outline-offset: 2px; }

.aps-home__icon { inline-size: 1.05rem; block-size: 1.05rem; flex: none; }

@media (max-width: 560px) {
    .aps-home {
        position: fixed;
        z-index: 60;
        inset-block-end: calc(.9rem + env(safe-area-inset-bottom, 0px));
        inset-inline-end: .9rem;

        /* 56px, comfortably past the 40px floor. This is the one control a person
           reaches for when they are lost, often one-handed on a rig. */
        inline-size: 56px;
        block-size: 56px;
        min-block-size: 56px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;

        /* Gold on navy ink: it has to read as a control against whatever page is
           behind it, and the header's translucent-white border does not. */
        background: var(--aps-gold, #FBB22F);
        color: var(--aps-navy, #2F578B);
        border: 0;
        box-shadow: 0 3px 10px rgb(0 0 0 / .35);
    }
    .aps-home:hover { background: var(--aps-gold, #FBB22F); }
    .aps-home__icon { inline-size: 1.6rem; block-size: 1.6rem; }

    /* Visually hidden, still in the accessibility tree. display:none would take the
       only label off the only control that has no text. */
    .aps-home__label {
        position: absolute;
        inline-size: 1px; block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* The corner is reserved, so the button never permanently covers the last row of
       a table or the submit button of a form. A floating control that hides the thing
       you were about to press is worse than no control. */
    body { padding-block-end: 4.8rem; }
}