/* ===== فونت: PeydaWeb (فایل‌ها را در wwwroot/fonts بگذارید؛ تا آن زمان فونت سیستمی نمایش داده می‌شود) ===== */
@font-face { font-family: "PeydaWeb"; font-weight: 400; font-display: swap; src: local("PeydaWeb"), url("../fonts/PeydaWeb/PeydaWeb-Regular.woff2") format("woff2"); }
@font-face { font-family: "PeydaWeb"; font-weight: 500; font-display: swap; src: local("PeydaWeb Medium"), url("../fonts/PeydaWeb/PeydaWeb-Medium.woff2") format("woff2"); }
@font-face { font-family: "PeydaWeb"; font-weight: 600; font-display: swap; src: local("PeydaWeb SemiBold"), url("../fonts/PeydaWeb/PeydaWeb-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "PeydaWeb"; font-weight: 700; font-display: swap; src: local("PeydaWeb Bold"), url("../fonts/PeydaWeb/PeydaWeb-Bold.woff2") format("woff2"); }

:root {
    --font-fa: "PeydaWeb", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, system-ui, sans-serif;

    /* رنگ‌های سیستمی */
    --color-blue: #0A63D6;
    --color-green: #1d7a35;
    --color-red: #c62a22;
    --color-orange: #a8660a;

    /* نقش‌های معنایی - روشن */
    --label: #111114;
    --label-secondary: #66666e;
    --label-tertiary: rgba(60, 60, 67, 0.3);
    --background: #F2F2F7;
    --background-secondary: #FFFFFF;
    --separator: rgba(60, 60, 67, 0.2);
    --fill: rgba(120, 120, 128, 0.16);
    --glass: rgba(255, 255, 255, 0.62);
    --glass-strong: rgba(255, 255, 255, 0.86);
    --glass-border: rgba(255, 255, 255, 0.5);

    /* مقیاس تایپوگرافی */
    --text-large-title: 34px;
    --text-title1: 28px;
    --text-title2: 22px;
    --text-title3: 20px;
    --text-headline: 17px;
    --text-body: 17px;
    --text-callout: 16px;
    --text-subhead: 15px;
    --text-footnote: 13px;
    --text-caption1: 12px;
    --text-caption2: 11px;

    /* فاصله‌ها (مضرب ۴) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 999px;
    --tap-min: 44px;
    --content-max: 720px;

    /* رنگ‌های نمودار کاغذی (SVG) */
    --og-ink: #1c1c1e;
    --og-paper: #E5CDCD;
    --og-back: #ffffff;
    --og-hint: #8e8e93;
    --og-sheet: #FBFAFA;
    --og-art-sheet: #FBFAFA;
}

@media (prefers-color-scheme: dark) {
    :root {
        --label: #FFFFFF;
        --label-secondary: rgba(235, 235, 245, 0.64);
        --label-tertiary: rgba(235, 235, 245, 0.3);
        --background: #000000;
        --background-secondary: #1C1C1E;
        --separator: rgba(84, 84, 88, 0.6);
        --fill: rgba(120, 120, 128, 0.36);
        --glass: rgba(30, 30, 32, 0.62);
        --glass-strong: rgba(36, 36, 38, 0.88);
        --glass-border: rgba(255, 255, 255, 0.08);
        --color-blue: #4C9BFF;
        --color-green: #3ad060;
        --color-red: #ff6961;
        --color-orange: #ffb340;
        --og-ink: #f2f2f7;
        --og-paper: #7d5b5f;
        --og-back: #3a3a3c;
        --og-hint: #8e8e93;
        --og-sheet: #151517;
    }
}

@media (min-width: 768px) { :root { --content-max: 960px; } }
@media (min-width: 1024px) { :root { --content-max: 1180px; --fig-unit: 1.5; } }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--background);
    color: var(--label);
    font-family: var(--font-fa);
    font-size: var(--text-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-align: start;
}

a { color: var(--color-blue); text-decoration: none; }

h1, h2, h3, h4 { letter-spacing: 0; line-height: 1.45; }

:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }

/* لایه کنترلی شیشه‌ای - فقط نوار بالا/پایین، شیت و دکمه‌های شناور */
.liquid-glass {
    background: var(--glass);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* دکمه‌ها */
.btn-filled, .btn-tinted, .btn-plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-min);
    padding: 0 var(--space-5);
    border: 0;
    border-radius: var(--radius-full);
    font: inherit;
    font-size: var(--text-headline);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.btn-filled { background: var(--color-blue); color: #fff; }
.btn-tinted { background: color-mix(in srgb, var(--color-blue) 14%, transparent); color: var(--color-blue); }
.btn-plain { background: var(--fill); color: var(--label); }
.btn-danger { background: color-mix(in srgb, var(--color-red) 14%, transparent); color: var(--color-red); }
.btn-filled:disabled, .btn-tinted:disabled, .btn-plain:disabled { opacity: 0.45; cursor: not-allowed; }

/* دکمه آیکونی نوار بالا */
.icon-btn {
    display: inline-grid;
    place-items: center;
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-full);
    color: var(--color-blue);
    cursor: pointer;
}

/* گروه تورفته (Inset Grouped List) */
.group-title { margin: var(--space-5) var(--space-2) var(--space-2); font-size: var(--text-footnote); color: var(--label-secondary); }
.group { background: var(--background-secondary); border-radius: var(--radius-lg); overflow: hidden; }
.group > * + * { border-top: 1px solid var(--separator); }

/* فرم‌ها */
.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }
.field > label { font-size: var(--text-footnote); color: var(--label-secondary); }
.input, .select, .textarea {
    width: 100%;
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-3);
    background: var(--fill);
    border: 0;
    border-radius: var(--radius-md);
    color: var(--label);
    font: inherit;
    font-size: var(--text-body);
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.8; }
.input[dir="ltr"] { text-align: left; }

.error-text { color: var(--color-red); font-size: var(--text-subhead); }
.muted { color: var(--label-secondary); }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--fill); font-size: var(--text-subhead); color: var(--label-secondary); }
.chip-link { background: color-mix(in srgb, var(--color-blue) 14%, transparent); color: var(--color-blue); font-weight: 600; }

/* ===== صفحه بارگذاری ===== */
.boot { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: var(--space-4); padding: var(--space-5); }
.boot-logo { width: 72px; height: 72px; border-radius: 20px; background: var(--color-blue); display: grid; place-items: center; }
.boot-title { font-size: var(--text-title1); font-weight: 700; }
.boot-bar { width: 160px; height: 4px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.boot-bar i { display: block; width: 40%; height: 100%; background: var(--color-blue); border-radius: 999px; animation: boot 1.2s ease-in-out infinite; }
.boot-skeleton { display: grid; gap: var(--space-2); width: min(80vw, 320px); margin-top: var(--space-4); }
.boot-skeleton span { height: 56px; border-radius: var(--radius-md); background: var(--fill); animation: pulse 1.4s ease-in-out infinite; }
@keyframes boot { 0% { transform: translateX(120%); } 100% { transform: translateX(-260%); } }
@keyframes pulse { 50% { opacity: 0.5; } }

#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: var(--space-4);
    bottom: var(--space-4);
    z-index: 1000;
    padding: var(--space-3) var(--space-4);
    background: var(--color-red);
    color: #fff;
    border-radius: var(--radius-md);
}
#blazor-error-ui a { color: #fff; text-decoration: underline; margin-inline-start: var(--space-3); }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; inset-inline-end: var(--space-3); top: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
    body { background: #fff; color: #000; }
    .no-print { display: none !important; }
}

/* چاپ در موبایل کاربرد عملی ندارد؛ فقط از تبلت به بالا نمایش داده می‌شود */
@media (max-width: 767px) {
    .print-action { display: none; }
}