/*
 * Mikham Warm Utility UI
 *
 * This stylesheet is intentionally scoped to the server-selected V2 shell.
 * It does not inherit or alias any legacy theme variables, so loading it can
 * never restyle the current UI by accident.
 */
.ui-v2-mobile-shell[data-ui-theme="warm-utility"],
.network-ui-theme[data-ui-theme="warm-utility"] {
    color-scheme: light;

    /* Typography — brand is IRANSansX (see fonts.css); generic scale kept for
       existing call sites, semantic scale added for new components. */
    --ui-font-family: 'IRANSansXFaNum', 'Segoe UI', Tahoma, sans-serif;
    --ui-font-size-xs: 0.75rem;
    --ui-font-size-sm: 0.875rem;
    --ui-font-size-md: 1rem;
    --ui-font-size-lg: 1.125rem;
    --ui-font-size-xl: 1.375rem;
    --ui-font-size-display: 2.125rem;
    --ui-font-size-h1: 1.625rem;
    --ui-font-size-h2: 1.375rem;
    --ui-font-size-h3: 1.125rem;
    --ui-font-size-body-lg: 1rem;
    --ui-font-size-caption: 0.75rem;
    --ui-font-size-micro: 0.6875rem;
    --ui-line-height-tight: 1.35;
    --ui-line-height-normal: 1.7;

    /* Spacing: a compact 4px-based mobile scale */
    --ui-space-0: 0;
    --ui-space-1: 0.25rem;
    --ui-space-2: 0.5rem;
    --ui-space-3: 0.75rem;
    --ui-space-4: 1rem;
    --ui-space-5: 1.25rem;
    --ui-space-6: 1.5rem;
    --ui-space-7: 1.75rem;
    --ui-space-8: 2rem;
    --ui-space-9: 2.5rem;
    --ui-space-10: 3rem;
    --ui-space-11: 4rem;
    --ui-space-12: 5rem;

    /* Shape and elevation */
    --ui-radius-sm: 0.5rem;
    --ui-radius-md: 0.75rem;
    --ui-radius-lg: 1rem;
    --ui-radius-xl: 1.25rem;
    --ui-radius-pill: 999px;
    --ui-radius-circle: 50%;
    --ui-shadow-sm: 0 1px 2px rgb(19 27 46 / 6%);
    --ui-shadow-md: 0 4px 12px rgb(19 27 46 / 8%);
    --ui-shadow-lg: 0 12px 28px rgb(19 27 46 / 12%);
    --ui-shadow-brand: 0 8px 20px rgb(246 85 5 / 25%);

    /* Mikham Design System surfaces (white/gray-50, no gradients). */
    --ui-color-canvas: #fafafa;
    --ui-color-surface: #ffffff;
    --ui-color-surface-subtle: #fafafa;
    --ui-color-surface-muted: #f4f4f5;
    --ui-color-border: #e7e8ea;
    --ui-color-border-strong: #d3d5d9;
    --ui-color-text: #131b2e;
    --ui-color-text-muted: #5c5f68;
    --ui-color-text-disabled: #5c6685;

    /* Orange is only for primary attention and selected/active state.
       --ui-color-primary is the AA-safe text/icon/border shade (orange-700,
       6.0:1 on white); --ui-color-primary-fill is the brighter brand orange
       (orange-500) reserved for large filled surfaces that only need the
       3:1 non-text threshold (e.g. the primary nav pill, FAB). */
    --ui-color-primary: #b33900;
    --ui-color-primary-hover: #8a2c00;
    --ui-color-primary-soft: #fff4ea;
    --ui-color-primary-soft-text: #8a2c00;
    --ui-color-primary-fill: #f65505;

    /* Semantic colors remain distinct from the brand accent; each is
       darkened from its raw design-system scale value so it stays AA-safe
       both as text-on-white and as text-on-its-own-soft-background. */
    --ui-color-success: #0f6b3a;
    --ui-color-success-soft: #dcf3e6;
    --ui-color-warning: #8a5a00;
    --ui-color-warning-soft: #fdefd6;
    --ui-color-danger: #c22f2f;
    --ui-color-danger-hover: #a82626;
    --ui-color-danger-soft: #fbe1e1;
    --ui-color-info: #1d5fc2;
    --ui-color-info-soft: #e1ebfd;
    /* Rating gold is darkened from the design system's raw gold-500 so filled
       stars still clear the 3:1 non-text contrast threshold on a white card. */
    --ui-color-rating: #c97f0c;
    --ui-color-rating-soft: #fdefd6;

    /* A map (Nearby) needs a visually distinct "not loaded yet" canvas —
       forcing it onto --ui-color-canvas would make loading tiles
       indistinguishable from the page background. */
    --ui-color-map-canvas: #d3d5d9;

    /* Teal focus is highly visible without spending the orange accent. */
    --ui-color-focus: #0f766e;
    --ui-focus-ring: 0 0 0 3px #ffffff, 0 0 0 6px var(--ui-color-focus);
    --ui-touch-target: 44px;
}

.ui-v2-mobile-shell[data-ui-theme="warm-utility"] {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 430px;
    min-inline-size: 0;
    min-block-size: 100dvh;
    margin-inline: auto;
    color: var(--ui-color-text);
    background: var(--ui-color-surface);
    font-family: var(--ui-font-family);
    font-size: var(--ui-font-size-md);
    line-height: var(--ui-line-height-normal);
    overflow-x: clip;
}

.ui-v2-mobile-shell[data-ui-theme="warm-utility"],
.ui-v2-mobile-shell[data-ui-theme="warm-utility"] *,
.ui-v2-mobile-shell[data-ui-theme="warm-utility"] *::before,
.ui-v2-mobile-shell[data-ui-theme="warm-utility"] *::after {
    box-sizing: border-box;
}

/* V2 has one server-rendered mobile composition at every viewport width. */
.ui-v2-home-composition .mikham-mobile-home-entry {
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 100dvh;
    margin-inline: 0;
    overflow: visible;
}

/* Home would not scroll at desktop width.
   mobile-home.css already frees the host's chrome -- height, max-height and
   overflow on #real_body, #main_container and friends -- but only inside
   `@media (max-width: 767px)`. V2 is one mobile composition at *every* width,
   so above 768px none of that applied and the host's viewport-height, clipped
   containers capped the page: the whole column rendered and nothing below the
   fold could be reached. Emulating a phone in devtools crossed back under the
   breakpoint, which is why it scrolled there and nowhere else.
   These rules are the same release, keyed to the V2 shell instead of a width.
   `overflow-x: clip` rather than `hidden`, because `hidden` on one axis
   computes the other to `auto` and hands the document back its own scroll
   container -- the bug one layer down. */
html:has(.ui-v2-mobile-shell[data-ui-theme="warm-utility"]) {
    min-inline-size: 0;
    block-size: auto !important;
    max-block-size: none !important;
    overflow-x: clip;
    overflow-y: visible;
    background: var(--ui-color-canvas, #fafafa);
}

body:has(.ui-v2-mobile-shell[data-ui-theme="warm-utility"]) {
    box-sizing: border-box;
    inline-size: 100% !important;
    min-inline-size: 0;
    block-size: auto !important;
    min-block-size: 100dvh !important;
    max-block-size: none !important;
    margin: 0 !important;
    padding-block-start: 0 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    background: var(--ui-color-canvas, #fafafa);
}

body:has(.ui-v2-mobile-shell[data-ui-theme="warm-utility"]) #sidebar_container {
    display: block !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
}

body:has(.ui-v2-mobile-shell[data-ui-theme="warm-utility"]) #host_sidebar {
    display: none !important;
}

/* The licensed desktop chrome wraps the page in fixed-height, clipped
   containers. Home is one long scrolling column at every width, so none of
   them may cap or clip it. `#real_body > div` is in the list because the
   host nests one more wrapper inside it that is capped the same way. */
body:has(.ui-v2-mobile-shell[data-ui-theme="warm-utility"]) :where(
    #real_body,
    #real_body > div,
    #main_container,
    #dashboard_body,
    #sidebar_container,
    #content,
    .content-wrapper
) {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: none !important;
    block-size: auto !important;
    min-block-size: 100dvh !important;
    max-block-size: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

@media (min-width: 431px) {
    html:has(.ui-v2-mobile-shell[data-ui-theme="warm-utility"]),
    body:has(.ui-v2-mobile-shell[data-ui-theme="warm-utility"]) {
        background: #e7e5e4;
    }

    .ui-v2-mobile-shell[data-ui-theme="warm-utility"] {
        inline-size: 100%;
        max-inline-size: 430px;
        margin-inline: auto;
        box-shadow: var(--ui-shadow-md);
    }
}

/* Layout helpers use logical properties and work unchanged in RTL and LTR. */
.ui-v2-mobile-shell .ui-stack,
.ui-v2-mobile-shell .ui-cluster,
.ui-v2-mobile-shell .ui-grid {
    min-inline-size: 0;
}

.ui-v2-mobile-shell .ui-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ui-stack-gap, var(--ui-space-4));
}

.ui-v2-mobile-shell .ui-cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ui-cluster-gap, var(--ui-space-2));
}

.ui-v2-mobile-shell .ui-grid {
    display: grid;
    grid-template-columns: repeat(var(--ui-grid-columns, 1), minmax(0, 1fr));
    gap: var(--ui-grid-gap, var(--ui-space-3));
}

.ui-v2-mobile-shell .ui-inline-pad {
    padding-inline: var(--ui-inline-space, var(--ui-space-4));
}

.ui-v2-mobile-shell .ui-surface {
    min-inline-size: 0;
    padding: var(--ui-surface-space, var(--ui-space-4));
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-lg);
    color: var(--ui-color-text);
    background: var(--ui-color-surface);
    box-shadow: var(--ui-shadow-sm);
    overflow-wrap: anywhere;
}

/* Shared keyboard focus. :focus is retained as a safe browser fallback. */
.ui-v2-mobile-shell[data-ui-theme="warm-utility"] :where(a, button, input, select, textarea, [tabindex]):focus {
    outline: 2px solid var(--ui-color-focus);
    outline-offset: 2px;
}

.ui-v2-mobile-shell[data-ui-theme="warm-utility"] :where(a, button, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.ui-v2-mobile-shell[data-ui-theme="warm-utility"] :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--ui-focus-ring);
}

.ui-v2-mobile-shell .ui-button {
    display: inline-flex;
    min-inline-size: var(--ui-touch-target);
    min-block-size: var(--ui-touch-target);
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    padding-block: var(--ui-space-2);
    padding-inline: var(--ui-space-4);
    border: 1px solid transparent;
    border-radius: var(--ui-radius-md);
    color: var(--ui-color-text);
    background: var(--ui-color-surface);
    font: inherit;
    font-weight: 700;
    line-height: var(--ui-line-height-tight);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
}

.ui-v2-mobile-shell .ui-button--primary {
    color: #ffffff;
    background: var(--ui-color-primary);
}

.ui-v2-mobile-shell .ui-button--primary:hover,
.ui-v2-mobile-shell .ui-button--primary:active,
.ui-v2-mobile-shell .ui-button--primary[aria-pressed="true"] {
    background: var(--ui-color-primary-hover);
}

.ui-v2-mobile-shell .ui-button--secondary {
    border-color: var(--ui-color-border-strong);
}

.ui-v2-mobile-shell .ui-button--quiet {
    background: transparent;
}

.ui-v2-mobile-shell .ui-button--danger {
    color: #ffffff;
    background: var(--ui-color-danger);
}

.ui-v2-mobile-shell .ui-button--danger:hover,
.ui-v2-mobile-shell .ui-button--danger:active {
    background: var(--ui-color-danger-hover);
}

.ui-v2-mobile-shell .ui-button:disabled,
.ui-v2-mobile-shell .ui-button[aria-disabled="true"] {
    color: var(--ui-color-text-disabled);
    background: var(--ui-color-surface-muted);
    cursor: not-allowed;
    opacity: 1;
}

.ui-v2-mobile-shell .ui-field {
    display: grid;
    min-inline-size: 0;
    gap: var(--ui-space-1);
}

.ui-v2-mobile-shell .ui-label {
    color: var(--ui-color-text);
    font-size: var(--ui-font-size-sm);
    font-weight: 700;
}

.ui-v2-mobile-shell .ui-input {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: var(--ui-touch-target);
    padding-block: var(--ui-space-2);
    padding-inline: var(--ui-space-3);
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-md);
    color: var(--ui-color-text);
    background: var(--ui-color-surface);
    font: inherit;
}

.ui-v2-mobile-shell textarea.ui-input {
    min-block-size: 6rem;
    resize: block;
}

.ui-v2-mobile-shell .ui-input::placeholder {
    color: var(--ui-color-text-disabled);
    opacity: 1;
}

.ui-v2-mobile-shell .ui-input[aria-invalid="true"] {
    border-color: var(--ui-color-danger);
}

.ui-v2-mobile-shell .ui-help,
.ui-v2-mobile-shell .ui-error {
    margin: 0;
    font-size: var(--ui-font-size-xs);
}

.ui-v2-mobile-shell .ui-help {
    color: var(--ui-color-text-muted);
}

.ui-v2-mobile-shell .ui-error {
    color: var(--ui-color-danger);
    font-weight: 700;
}

.ui-v2-mobile-shell .ui-chip {
    display: inline-flex;
    min-block-size: 32px;
    align-items: center;
    gap: var(--ui-space-1);
    padding-block: var(--ui-space-1);
    padding-inline: var(--ui-space-3);
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-pill);
    color: var(--ui-color-text-muted);
    background: var(--ui-color-surface);
    font: inherit;
    font-size: var(--ui-font-size-sm);
    white-space: nowrap;
}

.ui-v2-mobile-shell button.ui-chip,
.ui-v2-mobile-shell a.ui-chip {
    min-block-size: var(--ui-touch-target);
    cursor: pointer;
    touch-action: manipulation;
}

.ui-v2-mobile-shell .ui-chip[aria-pressed="true"],
.ui-v2-mobile-shell .ui-chip[aria-current="true"] {
    border-color: var(--ui-color-primary);
    color: var(--ui-color-primary-soft-text);
    background: var(--ui-color-primary-soft);
    font-weight: 700;
}

.ui-v2-mobile-shell .ui-badge {
    display: inline-flex;
    min-block-size: 24px;
    align-items: center;
    padding-block: 2px;
    padding-inline: var(--ui-space-2);
    border-radius: var(--ui-radius-pill);
    color: var(--ui-color-text-muted);
    background: var(--ui-color-surface-muted);
    font-size: var(--ui-font-size-xs);
    font-weight: 700;
    line-height: var(--ui-line-height-tight);
}

.ui-v2-mobile-shell .ui-badge--success {
    color: var(--ui-color-success);
    background: var(--ui-color-success-soft);
}

.ui-v2-mobile-shell .ui-badge--warning {
    color: var(--ui-color-warning);
    background: var(--ui-color-warning-soft);
}

.ui-v2-mobile-shell .ui-badge--danger {
    color: var(--ui-color-danger);
    background: var(--ui-color-danger-soft);
}

.ui-v2-mobile-shell .ui-skeleton {
    display: block;
    min-block-size: 1rem;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-color-surface-muted);
    animation: ui-v2-skeleton-pulse 1.4s ease-in-out infinite alternate;
}

.ui-v2-mobile-shell .ui-state {
    display: grid;
    min-block-size: 10rem;
    place-items: center;
    align-content: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-6);
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-lg);
    color: var(--ui-color-text-muted);
    background: var(--ui-color-surface);
    text-align: center;
}

.ui-v2-mobile-shell .ui-state > :where(h1, h2, h3, p) {
    max-inline-size: 32ch;
    margin: 0;
}

.ui-v2-mobile-shell .ui-state > :where(h1, h2, h3) {
    color: var(--ui-color-text);
    font-size: var(--ui-font-size-lg);
}

.ui-v2-mobile-shell .ui-state--error {
    border-color: #fecaca;
    color: var(--ui-color-danger);
    background: var(--ui-color-danger-soft);
}

.ui-v2-mobile-shell .ui-visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

@keyframes ui-v2-skeleton-pulse {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-v2-mobile-shell .ui-skeleton {
        animation: none;
    }
}

@media (forced-colors: active) {
    .ui-v2-mobile-shell[data-ui-theme="warm-utility"] :where(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline-color: Highlight;
        box-shadow: none;
    }
}

/* UI-V2-003: one production mobile shell at every viewport width. */
.ui-v2-home-composition {
    inline-size: 100%;
    max-inline-size: 430px;
    min-block-size: 100dvh;
    margin-inline: auto;
    background: var(--ui-color-surface, #ffffff);
}

.ui-v2-mobile-shell[data-ui-theme="warm-utility"] {
    inline-size: 100%;
    max-inline-size: 430px;
    min-block-size: 100dvh;
    margin-inline: auto;
    background: var(--ui-color-surface);
}

.ui-v2-mobile-shell .ui-v2-bottom-navigation {
    position: fixed;
    z-index: 24;
    inset-inline: 0;
    inset-block-end: 0;
    display: grid;
    inline-size: 100%;
    max-inline-size: 430px;
    margin-inline: auto;
    min-block-size: calc(68px + env(safe-area-inset-bottom));
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    padding-block: 6px max(6px, env(safe-area-inset-bottom));
    padding-inline: 4px;
    border-block-start: 1px solid var(--ui-color-border);
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 -4px 16px rgb(28 25 23 / 8%);
    /* No `direction` here: the bar follows the shell, so Home sits on the
       right in Persian and Arabic and on the left in English and Chinese. */
}

.ui-v2-mobile-shell .ui-v2-bottom-navigation__item {
    display: flex;
    min-inline-size: 0;
    min-block-size: 54px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    padding: 3px 1px;
    border-radius: var(--ui-radius-md);
    color: var(--ui-color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
}

.ui-v2-mobile-shell .ui-v2-bottom-navigation__item.is-current {
    color: var(--ui-color-primary);
    background: var(--ui-color-primary-soft);
}

/* The "+ post" item is a raised circular FAB inside the bar, not a colored
   column: only its icon bubble lifts and fills, the label stays the same
   quiet ink-muted style every other nav item uses. */
.ui-v2-mobile-shell .ui-v2-bottom-navigation__item.is-primary {
    color: var(--ui-color-text-muted);
    background: transparent;
}

.ui-v2-mobile-shell .ui-v2-bottom-navigation__icon {
    display: grid;
    inline-size: 25px;
    block-size: 25px;
    place-items: center;
}

.ui-v2-mobile-shell .ui-v2-bottom-navigation__item.is-primary .ui-v2-bottom-navigation__icon {
    inline-size: 40px;
    block-size: 40px;
    margin-block-start: -18px;
    border-radius: 50%;
    color: #ffffff;
    background: var(--ui-color-primary-fill, var(--ui-color-primary));
    box-shadow: var(--ui-shadow-brand);
}

.ui-v2-mobile-shell .ui-v2-bottom-navigation svg {
    inline-size: 23px;
    block-size: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ui-v2-mobile-shell .mikham-mobile-home__content {
    padding-block-end: calc(92px + env(safe-area-inset-bottom));
}

/* Legacy modal controls remain functional but cannot cover the desktop gutter. */
.ui-v2-mobile-shell :is(.mikham-mobile-drawer-backdrop, .mikham-mobile-assistant-backdrop) {
    inset-inline: 0;
    inline-size: 100%;
    max-inline-size: 430px;
    margin-inline: auto;
}

.ui-v2-mobile-shell .mikham-mobile-drawer {
    inset-inline-start: max(0px, calc((100% - 430px) / 2));
    inset-inline-end: auto;
    max-inline-size: min(86vw, 370px);
}

.ui-v2-mobile-shell:dir(ltr) .mikham-mobile-drawer {
    transform: translateX(-105%);
}

.ui-v2-mobile-shell:dir(ltr).is-drawer-open .mikham-mobile-drawer {
    transform: translateX(0);
}

.ui-v2-mobile-shell .mikham-mobile-assistant-sheet {
    inset-inline: 0;
    inline-size: min(calc(100vw - 16px), 414px);
    max-inline-size: 414px;
    margin-inline: auto;
    transform: translateY(calc(100% + 28px));
}

.ui-v2-mobile-shell.is-assistant-open .mikham-mobile-assistant-sheet {
    transform: translateY(0);
}

.ui-v2-mobile-shell.is-keyboard-open .ui-v2-bottom-navigation {
    display: none;
}

@media (min-width: 431px) {
    .ui-v2-home-composition {
        box-shadow: var(--ui-shadow-md);
    }
}

@media (forced-colors: active) {
    .ui-v2-mobile-shell .ui-v2-bottom-navigation {
        border-color: CanvasText;
        background: Canvas;
    }
}