/*
    MADARIX Enterprise UI V2 - standard version 2.0.0 (see Docs/Design/MADARIX-UI-V2-STANDARD.md).

    One shared layer, loaded LAST by both master pages (after shell.css on Site.master). It refines the
    existing design system - tokens, base, components, shell - instead of replacing it: every page that
    already uses the Almas anatomy, grid and form patterns picks it up with no markup change.

    What it does
      1. Chrome      the header and the sidebar are the restrained dark-teal frame of the product
                     (the colours come from the tokens of almas/tokens.css, section 5)
      2. Menu search a field at the top of the sidebar that filters only the entries already rendered
      3. Canvas      page header, toolbar, data surface, table head, chips, alerts and panels share one
                     surface language: hairline border, a very soft shadow, a slightly tighter radius
      4. Entry pages login, organization selection and the status pages use the same surface language

    Rules of this file: logical properties only (html[dir] alone mirrors it), tokens only (no literal
    colour except where a token does not exist), no new font, no image, no script, no layout that depends
    on a language. Motion is limited to short colour/shadow transitions and is off for
    prefers-reduced-motion. A collapsed rail, the mobile drawer, the popovers and forced-colors keep
    working exactly as shell.css defines them.
*/

/* ==========================================================================
   1. Chrome: header and sidebar
   ========================================================================== */
.almas-shell-header,
.almas-shell-sidebar {
    color: var(--almas-color-text);
}

.almas-shell-header {
    border-block-end-color: var(--almas-chrome-border);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}

.almas-shell-sidebar {
    border-inline-end-color: var(--almas-chrome-border);
    scrollbar-color: var(--almas-chrome-border-strong) transparent;
    scrollbar-width: thin;
}

.almas-shell-brand .almas-brand-mark {
    font-size: var(--almas-font-size-lg);
    font-weight: var(--almas-font-weight-bold);
}

.almas-shell-brand .almas-brand-word {
    font-weight: var(--almas-font-weight-bold);
}

.almas-shell-toggle:hover,
.almas-context-summary:hover,
.almas-user-summary:hover {
    background: var(--almas-chrome-surface-raised);
}

.almas-context-summary,
.almas-user-summary {
    border-color: var(--almas-chrome-border);
}

.almas-context-summary:hover,
.almas-user-summary:hover {
    border-color: var(--almas-chrome-border-strong);
}

/* ---- Navigation: compact entries, quiet group labels, a clear current page ---- */
.almas-nav-link,
.almas-nav-summary {
    font-size: var(--almas-font-size-sm);
    line-height: var(--almas-line-height-snug);
}

.almas-nav-link {
    min-block-size: calc(var(--almas-touch-target-min) - .25rem);
    padding-block: var(--almas-space-1);
    border-radius: var(--almas-radius-md);
}

.almas-nav-summary {
    min-block-size: var(--almas-touch-target-min);
}

.almas-nav-group-label {
    font-size: var(--almas-font-size-xs);
    font-weight: var(--almas-font-weight-semibold);
}

.almas-nav-link[aria-current="page"] {
    font-weight: var(--almas-font-weight-semibold);
}

@media (prefers-reduced-motion: no-preference) {
    .almas-nav-link,
    .almas-nav-summary,
    .almas-shell-toggle,
    .almas-context-summary,
    .almas-user-summary {
        transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    }
}

/* ==========================================================================
   2. Menu search (Scripts/almas-shell.js; markup from the SiteNavigation control)
   ========================================================================== */
.almas-nav-search {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    padding-block: var(--almas-space-2) var(--almas-space-1);
    padding-inline: var(--almas-space-2);
    background: var(--almas-shell-sidebar-surface);
}

.almas-nav-search[hidden] {
    display: none;
}

.almas-nav-search-icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(var(--almas-space-2) + var(--almas-space-2));
    margin-block-start: calc((var(--almas-space-2) - var(--almas-space-1)) / 2);
    transform: translateY(-50%);
    inline-size: var(--almas-icon-size-sm);
    block-size: var(--almas-icon-size-sm);
    color: var(--almas-color-text-muted);
    pointer-events: none;
}

.almas-nav-search-input {
    flex: 1 1 auto;
    min-inline-size: 0;
    inline-size: 100%;
    min-block-size: calc(var(--almas-touch-target-min) - .125rem);
    padding-block: var(--almas-space-1);
    padding-inline: calc(var(--almas-space-4) + var(--almas-space-1)) var(--almas-space-2);
    background: var(--almas-chrome-surface-raised);
    color: var(--almas-color-text);
    border: var(--almas-border-width) solid var(--almas-chrome-border);
    border-radius: var(--almas-radius-md);
    font-family: inherit;
    font-size: var(--almas-font-size-sm);
    line-height: var(--almas-line-height-snug);
}

.almas-nav-search-input::placeholder {
    color: var(--almas-color-text-muted);
    opacity: 1;
}

.almas-nav-search-input:hover {
    border-color: var(--almas-chrome-border-strong);
}

.almas-nav-search-input:focus-visible {
    outline-offset: 0;
}

.almas-nav-search-empty {
    margin: 0;
    padding-block: var(--almas-space-2);
    padding-inline: var(--almas-space-3);
    color: var(--almas-color-text-muted);
    font-size: var(--almas-font-size-sm);
    line-height: var(--almas-line-height-snug);
}

.almas-nav-search-empty[hidden] {
    display: none;
}

/* The collapsed icon rail has no room for a field; it comes back with the peek or the expanded sidebar. */
@media (min-width: 1200px) {
    [data-almas-sidebar="collapsed"] .almas-nav-search,
    [data-almas-sidebar="collapsed"] .almas-nav-search-empty {
        display: none;
    }
}

/* ==========================================================================
   3. Canvas: shared surface language
   ========================================================================== */
.almas-shell-main {
    padding-block: var(--almas-space-3) var(--almas-space-4);
}

.almas-breadcrumb {
    padding-block-start: var(--almas-space-3);
}

.almas-breadcrumb-list {
    font-size: var(--almas-font-size-xs);
}

/* ---- Page header ---- */
.almas-page-anatomy .almas-page-title {
    font-size: var(--almas-font-size-xl);
    font-weight: var(--almas-font-weight-bold);
    color: var(--almas-color-text);
}

.almas-page-anatomy .almas-page-heading .almas-lede {
    color: var(--almas-color-text-muted);
}

/* ---- Surfaces: card, editor, toolbar, data surface, empty state ---- */
.almas-card,
.almas-page-anatomy .almas-page-toolbar,
.almas-data-surface,
.almas-page-anatomy .almas-empty-state {
    border-radius: var(--almas-radius-lg);
    box-shadow: var(--almas-shadow-xs);
}

.almas-page-editor {
    border-start-start-radius: var(--almas-radius-md);
    border-end-start-radius: var(--almas-radius-md);
}

/* ---- Toolbar: labels quiet, the primary action stands out ---- */
.almas-page-toolbar .form-label {
    font-size: var(--almas-font-size-xs);
    letter-spacing: 0;
}

/* ---- Data grid: a distinct head band, calm rows ---- */
.almas-data-surface .almas-table > thead > tr > th {
    background: var(--almas-color-surface-muted);
    color: var(--almas-color-text-muted);
    font-size: var(--almas-font-size-xs);
    font-weight: var(--almas-font-weight-semibold);
    border-block-end-color: var(--almas-color-border-strong);
}

.almas-data-surface .almas-table > tbody > tr > td,
.almas-data-surface .almas-table > tbody > tr > th {
    border-color: var(--almas-color-border);
}

.almas-data-surface > .almas-table-meta {
    color: var(--almas-color-text-muted);
    font-size: var(--almas-font-size-xs);
}

.almas-data-surface > .almas-table-pagination {
    background: var(--almas-color-surface);
}

/* ---- Status chips: whole, pill-shaped, one weight ---- */
.almas-badge {
    border-radius: var(--almas-radius-pill);
    font-weight: var(--almas-font-weight-semibold);
}

/* ---- Empty actions column: set by almas-ui.js (hideEmptyActionColumns) when no row of the column holds an action ---- */
.almas-col-empty {
    display: none;
}

/* ---- Buttons ---- */
.btn {
    border-radius: var(--almas-radius-md);
}

.btn-primary {
    box-shadow: var(--almas-shadow-xs);
}

@media (prefers-reduced-motion: no-preference) {
    .btn,
    .form-control,
    .form-select {
        transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
    }
}

/* ---- Alerts: a calm accent edge at the inline start ---- */
.almas-alert {
    border-radius: var(--almas-radius-md);
    border-inline-start-width: calc(var(--almas-border-width) * 3);
}

/* ---- Popovers (account menu, organization panel) ---- */
.almas-user-panel,
.almas-context-panel {
    border-radius: var(--almas-radius-lg);
    box-shadow: var(--almas-shadow-lg);
}

/* ==========================================================================
   4. Entry pages (Auth.master: login, organization selection, status pages)
   ========================================================================== */
.almas-auth-card {
    border-radius: var(--almas-radius-lg);
    box-shadow: var(--almas-shadow-md);
}

/* ==========================================================================
   5. Forced colours and print
   ========================================================================== */
@media (forced-colors: active) {
    .almas-nav-search-input,
    .almas-card,
    .almas-data-surface {
        border: 1px solid CanvasText;
    }

    .almas-nav-search-icon {
        color: CanvasText;
    }
}

@media print {
    .almas-nav-search,
    .almas-nav-search-empty {
        display: none;
    }
}

/* ===== Persian (fa-IR) first-run: font stack, language selector, setup checklist =====
   Persian pages use a font stack with Arabic-script coverage on every platform (Vazirmatn when the machine has it, else Segoe UI / Tahoma, else Noto). Numbers keep Latin digits (the
   server formats them); text direction comes from the page's dir attribute (the official Bootstrap RTL build is chosen by the server), so these rules use logical properties only. */
html[lang^="fa"] {
    --almas-font-family: "Vazirmatn", "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", system-ui, -apple-system, sans-serif;
}

html[lang^="fa"] body {
    line-height: 1.75;
}

.almas-lang-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    justify-content: center;
    margin-block-start: 1.25rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--almas-color-border);
}

.almas-lang-option {
    padding: 0.125rem 0.5rem;
    border-radius: var(--almas-control-radius, 0.375rem);
    color: var(--almas-color-text-muted);
    text-decoration: none;
}

.almas-lang-option:hover,
.almas-lang-option:focus-visible {
    color: var(--almas-color-primary);
    text-decoration: underline;
}

.almas-lang-option.is-current {
    color: var(--almas-color-text);
    font-weight: 600;
    background: var(--almas-color-primary-subtle);
}

.almas-setup-card {
    margin-block-end: 1.25rem;
}

.almas-setup-steps {
    list-style: none;
    counter-reset: setup;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.almas-setup-step {
    counter-increment: setup;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--almas-color-border);
    border-radius: var(--almas-control-radius, 0.375rem);
    background: var(--almas-color-surface);
}

.almas-setup-step::before {
    content: counter(setup);
    flex: none;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--almas-color-surface-muted);
    color: var(--almas-color-text-muted);
    font-weight: 600;
}

.almas-setup-step.is-done::before {
    background: var(--almas-color-success-subtle);
    color: var(--almas-color-success-text);
}

.almas-setup-step.is-todo::before {
    background: var(--almas-color-primary-subtle);
    color: var(--almas-color-primary);
}

.almas-setup-step-name {
    flex: 1 1 12rem;
    font-weight: 600;
}

.almas-setup-step-state {
    color: var(--almas-color-text-muted);
}

.almas-setup-step.is-wait .almas-setup-step-name {
    color: var(--almas-color-text-muted);
}