/* ==========================================================================
   Application shell — top app bar, navigation, drawer, page header, footer.
   Every rule uses logical properties so Arabic (RTL) mirrors automatically.
   ========================================================================== */

/* ---------- Layout container ---------- */
.container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--sp-5);
}

@media (max-width: 640px) {
    .container {
        padding-inline: var(--sp-4);
    }
}

.app-main {
    min-height: calc(100vh - var(--appbar-h) - 72px);
    padding-block: var(--sp-6) var(--sp-8);
}

/* ---------- App bar ---------- */
/* Blue brand surface with white text/icons. Only colour values differ from the
   previous light-surface bar; every metric, border and shadow is untouched. */
.app-bar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-appbar);
    background: linear-gradient(180deg, var(--brand-primary), var(--brand-deep));
    backdrop-filter: saturate(150%) blur(12px);
    border-block-end: 1px solid var(--border);
    box-shadow: var(--appbar-shadow);
}

@supports not (background: color-mix(in srgb, red, blue)) {
    .app-bar {
        background: var(--brand-primary);
    }
}

.app-bar__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    min-height: var(--appbar-h);
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--sp-5);
}

/* ---------- Brand ---------- */
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    flex: 0 0 auto;
    color: #fff;
    text-decoration: none;
}

.brand:hover {
    text-decoration: none;
}

.brand__mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.brand__mark svg {
    width: 22px;
    height: 22px;
}

.brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand__title {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    color: #fff;
}

.brand__subtitle {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    color: rgba(255, 255, 255, 0.76);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .brand__subtitle {
        display: none;
    }
}

/* ---------- Primary navigation ---------- */
/* min-width: 0 lets this column shrink below its content width, so the list
   MUST be allowed to wrap. Without flex-wrap the nowrap links simply overflow
   and paint over .app-bar__actions (the language switch, theme toggle and
   user menu), which is exactly the overlap this rule prevents. */
.app-nav {
    flex: 1 1 auto;
    min-width: 0;
}

.app-nav__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-1);
    row-gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Never let a nav item be squashed: the label is nowrap, so shrinking it
   would push the text out of its own pill instead of wrapping the row. */
.app-nav__item {
    position: relative;
    flex: 0 0 auto;
}

.app-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 0 0 auto;
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--text-2);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.app-nav__link svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    opacity: 0.75;
    transition: opacity var(--dur-fast) var(--ease);
}

.app-nav__link:hover {
    background: var(--surface-muted);
    color: var(--text);
    text-decoration: none;
}

.app-nav__link:hover svg {
    opacity: 1;
}

.app-nav__link.is-active {
    color: var(--primary);
    background: var(--primary-soft);
    font-weight: var(--fw-semibold);
}

.app-nav__link.is-active svg {
    opacity: 1;
}

.app-nav__link.is-active::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline: var(--sp-3);
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--primary);
}

.app-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    line-height: 1;
}

/* The nav sits on the blue bar above 1100px, so its labels and icons go white.
   At 1100px and below the same links move into the light off-canvas drawer,
   which keeps the dark-on-light colours declared above. */
@media (min-width: 1101px) {
    .app-nav__link {
        color: rgba(255, 255, 255, 0.88);
    }

    .app-nav__link:hover {
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
    }

    .app-nav__link.is-active {
        color: #fff;
        background: rgba(255, 255, 255, 0.2);
    }

    .app-nav__link.is-active::after {
        background: #fff;
    }
}

/* ---------- App bar actions (language, theme, notifications, user) ---------- */
/* flex: 0 0 auto + a z-index above the nav column: these controls must never
   be compressed or painted underneath a wrapping nav row. */
.app-bar__actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--control-h);
    height: var(--control-h);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease);
}

.icon-btn svg {
    width: 19px;
    height: 19px;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border-color: var(--border);
}

.icon-btn__dot {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 6px;
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: var(--fw-bold);
    line-height: 1;
    border: 2px solid var(--surface);
}

.app-bar__burger {
    display: none;
}

/* ---------- Language switcher ---------- */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
}

.lang-switch button {
    border: 0;
    background: transparent;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: rgba(255, 255, 255, 0.84);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.lang-switch button:hover {
    color: #fff;
}

.lang-switch button.is-active {
    background: #fff;
    color: var(--brand-deep);
    box-shadow: var(--shadow-xs);
}

/* The language switcher and the sign-out action are real <form> elements
   (both need POST), so let their buttons act as direct flex children. */
.lang-switch form,
.dropdown__menu form {
    display: contents;
}

@media (max-width: 900px) {
    .lang-switch {
        display: none;
    }
}

/* ---------- User menu ---------- */
.user-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    font-family: inherit;
    color: #fff;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.user-btn:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);
}

.user-btn__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    text-align: start;
}

.user-btn__name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.user-btn__role {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

/* Inside the button the role line sits on the blue bar, so it goes white. The
   same class also labels the user dropdown header, which sits on the light
   dropdown surface and keeps the colour above. */
.user-btn .user-btn__role {
    color: rgba(255, 255, 255, 0.76);
}

.user-btn svg {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 900px) {
    .user-btn__meta {
        display: none;
    }
}

/* ---------- Dropdown (progressive enhancement over <details>) ---------- */
.dropdown {
    position: relative;
}

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

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

.dropdown__menu {
    position: absolute;
    z-index: var(--z-dropdown);
    inset-block-start: calc(100% + var(--sp-2));
    inset-inline-end: 0;
    min-width: 230px;
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: dropdown-in var(--dur) var(--ease);
}

@keyframes dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown__header {
    padding: var(--sp-2) var(--sp-3);
    border-block-end: 1px solid var(--border-subtle);
    margin-block-end: var(--sp-1);
}

.dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-2);
    font-family: inherit;
    font-size: var(--fs-base);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.dropdown__item svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    opacity: 0.8;
}

.dropdown__item:hover {
    background: var(--surface-muted);
    color: var(--text);
    text-decoration: none;
}

.dropdown__item.is-active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: var(--fw-semibold);
}

.dropdown__item--danger {
    color: var(--danger);
}

.dropdown__item--danger:hover {
    background: var(--danger-soft);
    color: var(--danger-text);
}

.dropdown__divider {
    height: 1px;
    margin: var(--sp-1) 0;
    background: var(--border-subtle);
}
/* ---------- Responsive navigation (mobile drawer) ---------- */
@media (max-width: 1100px) {
    /* Move the primary nav out of the bar into a styled off-canvas drawer. */
    .app-bar__burger {
        display: inline-grid;
    }

    .app-nav {
        position: fixed;
        z-index: var(--z-drawer);
        inset-block: 0;
        inset-inline-start: 0;
        width: min(320px, 86vw);
        padding: var(--sp-5) var(--sp-4) var(--sp-8);
        background: var(--surface);
        border-inline-end: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
        transform: translateX(calc(-100% - 8px));
        visibility: hidden;
        transition: transform var(--dur-slow) var(--ease), visibility var(--dur-slow);
    }

    html[dir="rtl"] .app-nav {
        transform: translateX(calc(100% + 8px));
    }

    .app-nav.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .app-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-1);
    }

    .app-nav__link {
        width: 100%;
        padding: var(--sp-3);
        font-size: var(--fs-md);
    }

    .app-nav__link.is-active::after {
        inset-block: var(--sp-2);
        inset-inline-start: 0;
        inset-inline-end: auto;
        width: 3px;
        height: auto;
    }

    .app-nav__badge {
        margin-inline-start: auto;
    }

    .app-nav .dropdown {
        width: 100%;
    }

    .app-nav .dropdown__menu {
        position: static;
        min-width: 0;
        box-shadow: none;
        border: 0;
        background: transparent;
        padding: 0 0 0 var(--sp-4);
        animation: none;
    }

    html[dir="rtl"] .app-nav .dropdown__menu {
        padding: 0 var(--sp-4) 0 0;
    }

    .app-nav__drawer-title {
        display: block;
    }
}

.app-nav__drawer-title {
    display: none;
    padding-inline: var(--sp-3);
    margin-block-end: var(--sp-2);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-faint);
}

.app-nav__scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: var(--surface-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur);
}

.app-nav__scrim.is-open {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 1101px) {
    .app-nav__scrim {
        display: none;
    }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-block-end: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.breadcrumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumbs li + li::before {
    content: "/";
    margin-inline-end: var(--sp-2);
    color: var(--text-faint);
}

html[dir="rtl"] .breadcrumbs li + li::before {
    content: "/";
}

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

.breadcrumbs a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
    color: var(--text-2);
    font-weight: var(--fw-medium);
}

/* ---------- Page header ---------- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-5);
    flex-wrap: wrap;
    margin-block-end: var(--sp-6);
}

.page-header__main {
    min-width: 0;
}

.page-header__title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
}

.page-header__title svg {
    width: 28px;
    height: 28px;
    color: var(--primary);
    flex: 0 0 auto;
}

.page-header__subtitle {
    margin-block-start: var(--sp-2);
    font-size: var(--fs-md);
    color: var(--text-muted);
    max-width: 72ch;
}

.page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .page-header {
        margin-block-end: var(--sp-5);
    }

    .page-header__title {
        font-size: var(--fs-2xl);
    }

    .page-header__actions {
        width: 100%;
    }

    .page-header__actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ---------- Footer ---------- */
.app-footer {
    border-block-start: 1px solid var(--border);
    padding-block: var(--sp-5);
    margin-block-start: var(--sp-8);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.app-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--sp-5);
}

/* ---------- Minimal shell used by the login screen ---------- */
.auth-body {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: var(--sp-6) var(--sp-4);
}