﻿/* =========================================================
   Vazirmatn — Persian (Farsi) variable webfont
   Source: https://github.com/rastikerdar/vazirmatn (npm: vazirmatn)
   Single variable file covers weights 100–900 => smaller payload,
   which matters most on mobile / slow connections.
   ========================================================= */
@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn[wght].woff2') format('woff2 supports variations'),
         url('fonts/Vazirmatn[wght].woff2') format('woff2-variations'),
         url('fonts/Vazirmatn[wght].woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* =========================================================
   Global base
   ========================================================= */
:root {
    --app-font-family: 'Vazirmatn', 'Roboto', 'Segoe UI', Tahoma, Arial, sans-serif;
    --app-appbar-height: 56px;
}

html, body {
    font-family: var(--app-font-family);
    /* Avoid iOS auto-bumping font size on rotate, and stop accidental
       horizontal scroll caused by wide children on small screens. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    max-width: 100vw;
    scroll-behavior: smooth;
}

/* Persian text looks better with slightly looser line-height */
body {
    line-height: 1.7;
}

/* Make every element respect the RTL/Persian font by default,
   Latin numerals/text inside MudBlazor icons are unaffected. */
* {
    font-family: inherit;
}

/* Nicer, non-blurry touch targets on mobile */
button, a, .mud-nav-link, .mud-icon-button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Prevent long unbroken strings (emails, links, tokens) from
   overflowing narrow phone screens */
p, span, .mud-typography {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Respect the safe area on notched phones (iPhone, etc.) */
.mud-appbar {
    padding-top: env(safe-area-inset-top, 0);
    height: calc(var(--app-appbar-height) + env(safe-area-inset-top, 0));
}

.mud-main-content {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* =========================================================
   Mobile-first layout tuning (<= 600px, MudBlazor's "xs")
   ========================================================= */
@media (max-width: 600px) {
    /* Tighter content padding so more real content fits */
    .mud-main-content.pa-4 {
        padding: 12px !important;
        padding-top: calc(var(--app-appbar-height) + env(safe-area-inset-top, 0) + 8px) !important;
    }

    /* Slightly smaller headings so they don't wrap awkwardly */
    .mud-typography-h3 { font-size: 1.65rem; }
    .mud-typography-h4 { font-size: 1.4rem; }
    .mud-typography-h5 { font-size: 1.15rem; }

    /* Full-width dialogs/drawers feel more native on phones */
    .mud-dialog {
        max-width: calc(100vw - 24px) !important;
        margin: 12px;
    }

    /* Give tables/grids a horizontal scroll container instead of
       squeezing/breaking the page layout */
    .mud-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Bigger, easier-to-tap buttons */
    .mud-button-root {
        min-height: 40px;
    }
}

/* Small phones (<= 380px) */
@media (max-width: 380px) {
    .mud-appbar .mud-typography-h5 {
        font-size: 1.05rem;
    }
}
/* RTL label fix for MudBlazor Outlined variant */
.mud-rtl .mud-input-outlined-border + label,
.mud-rtl .mud-input-label-outlined {
    right: 12px;
    left: auto;
    transform-origin: top right;
}

.mud-rtl .mud-input-label-inputcontrol {
    right: 12px;
    left: auto;
}
/* راست‌چین کردن لیبل‌های فرم‌های RTL */
.rtl-form .mud-input-label-animated,
.rtl-form label.mud-label {
    right: 0;
    left: auto;
    transform-origin: right top;
    text-align: right;
    direction: rtl;
}

/* اصلاح موقعیت لیبل شناور (floating label) */
.rtl-form .mud-input-label-inputcontrol {
    right: 12px;
    left: auto;
}

.rtl-form .mud-input-label-animated.mud-input-label-shrink {
    transform: translateY(-22px) scale(0.75);
    transform-origin: right top;
}

/* راست‌چین کردن متن درون فیلدهای outlined */
.rtl-form .mud-input.mud-input-outlined input,
.rtl-form .mud-input.mud-input-outlined textarea {
    text-align: right;
    direction: rtl;
}

/* اصلاح border notch برای لیبل‌های RTL */
.rtl-form .mud-input-outlined-border {
    text-align: right;
}
.print-only { display: none; }
@media print {
    .print-only { display: block; }
    .mud-appbar, .mud-drawer, .no-print, .mud-snackbar-provider { display: none !important; }
    .mud-main-content { margin: 0 !important; padding: 0 !important; }
    .warehouse-document { direction: rtl; color: #000; }
    .warehouse-document .mud-input-root { color: #000; }
}

.warehouse-signatures { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; padding: 1rem 0; border-top: 1px solid #999; }
.warehouse-chain { margin: 1rem 0 1.5rem; padding: 1rem; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); }
.warehouse-chain-title { font-weight: 700; margin-bottom: .15rem; }
.warehouse-chain-help { color: var(--mud-palette-text-secondary); margin-bottom: .75rem; }
.warehouse-chain-kinds .mud-tab { min-width: 9rem; font-weight: 600; }
.warehouse-chain-documents { display: flex; flex-direction: column; gap: 1rem; min-width: 0; margin-top: .75rem; direction: rtl; }
.warehouse-chain-document { display: grid; grid-template-columns: 13rem minmax(0, 1fr); direction: rtl; width: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--mud-palette-lines-default); border-radius: .5rem; background: var(--mud-palette-surface); }
.warehouse-chain-document-header { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; padding: 1rem; background: var(--mud-palette-background-grey); border-inline-end: 1px solid var(--mud-palette-lines-default); }
.warehouse-chain-document-number { font-weight: 700; }
.warehouse-chain-lines { min-width: 0; }
.warehouse-chain-lines .mud-table-container { overflow-x: auto; }
.warehouse-chain-lines .mud-table-cell { text-align: right; }
@media (max-width: 600px) {
    .warehouse-chain-document { grid-template-columns: minmax(0, 1fr); }
    .warehouse-chain-document-header { border-inline-end: 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
}
.warehouse-table .mud-table-pagination .mud-icon-button { background-color: var(--mud-palette-primary-hover); border: 1px solid var(--mud-palette-primary); margin-inline: .15rem; }
.warehouse-table .mud-table-pagination .mud-icon-button:disabled { border-color: var(--mud-palette-action-disabled); }
@media print { .warehouse-signatures { break-inside: avoid; margin-top: 3rem; } }

/* =========================================================
   Blazor error UI
   The framework only toggles a "visible" class on this banner, so it must be
   hidden by default. Without this rule it renders permanently at the bottom
   of every page, overlapping content.
   ========================================================= */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1300;
    box-sizing: border-box;
    width: 100%;
    padding: 0.75rem 1.25rem;
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
    font-weight: 500;
}

#blazor-error-ui .reload {
    color: inherit;
    text-decoration: underline;
    margin-inline-start: 0.5rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    inset-inline-end: 0.75rem;
    top: 0.6rem;
    font-size: 1.1rem;
}

#blazor-error-ui.visible {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* =========================================================
   Visual polish
   ========================================================= */

/* Persian text breathes better with slightly looser heading line-height */
h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    line-height: 1.45;
}

/* Softer, consistent rounding for the app bar and drawers */
.mud-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Active nav item gets a subtle accent stripe so the current page is obvious */
.mud-nav-link.active {
    font-weight: 600;
    background-color: var(--mud-palette-action-default-hover);
    border-inline-start: 4px solid var(--mud-palette-primary);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

/* Nav groups read as section headers rather than plain rows */
.mud-nav-group > .mud-nav-link {
    font-weight: 600;
}

/* Tables: clearer header, subtle zebra striping and hover feedback */
.mud-table-root .mud-table-head .mud-table-cell {
    font-weight: 600;
    background-color: var(--mud-palette-background-gray);
}

.mud-table-striped .mud-table-row:nth-child(even) .mud-table-cell {
    background-color: var(--mud-palette-table-striped);
}

.mud-table-hover .mud-table-row:hover .mud-table-cell {
    background-color: var(--mud-palette-table-hover);
}

/* Tab strip used for the open-page tabs sits flush with the content */
.mud-tabs-tabbar {
    border-start-start-radius: var(--mud-default-borderradius);
    border-start-end-radius: var(--mud-default-borderradius);
}

/* Accessible, visible keyboard focus that matches the theme accent */
:where(a, button, .mud-button-root, .mud-nav-link, .mud-icon-button):focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Slimmer, theme-aware scrollbars on desktop */
@media (pointer: fine) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--mud-palette-lines-default) transparent;
    }
}

/* Home page quick-access cards: whole card is a link */
.shortcut-card {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--mud-default-borderradius);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.shortcut-card:hover {
    transform: translateY(-2px);
}

/* =========================================================
   Warehouse document editor
   Give the line table and the action bar a little breathing room
   without touching the print signatures spacing.
   ========================================================= */
.warehouse-document .mud-table {
    margin-bottom: 1rem;
}
