@layer reset, tokens, base, components, pages, utilities;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { margin: 0; }
    h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
    ul, ol { margin: 0; padding: 0; list-style: none; }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { margin: 0; font: inherit; color: inherit; }
    button { border: 0; }
    table { border-collapse: collapse; border-spacing: 0; }
    [hidden] { display: none !important; }
}

@layer tokens {
    :root {
        --ui-font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
        --ui-scale: 1;
        --font-metric: 1;

        --c-ink-950: #081719;
        --c-ink-900: #0d2022;
        --c-ink-800: #183136;
        --c-ink-700: #314b50;
        --c-ink-600: #536a6f;
        --c-ink-500: #718388;
        --c-ink-400: #9aa8ab;
        --c-line: #dfe8e7;
        --c-line-soft: #ebf0ef;
        --c-surface: #ffffff;
        --c-surface-soft: #f6f9f8;
        --c-surface-muted: #eef4f3;
        --c-accent: #0a9386;
        --c-accent-hover: #08796f;
        --c-accent-active: #06645c;
        --c-accent-soft: #e3f7f3;
        --c-accent-faint: #f4fbfa;
        --c-accent-border: #9fded7;
        --c-accent-ink: #07534d;
        --c-accent-deep: #032c28;
        --c-accent-surface: #fbfdfd;
        --c-accent-hover-surface: #eef9f7;
        --c-success: #17764e;
        --c-warning: #936616;
        --c-danger: #b53f3f;

        --shadow-xs: 0 1px 2px rgba(8, 23, 25, .035);
        --shadow-sm: 0 8px 24px rgba(8, 23, 25, .055);
        --shadow-md: 0 18px 48px rgba(8, 23, 25, .075);
        --shadow-lg: 0 28px 78px rgba(8, 23, 25, .10);

        --radius-xs: 8px;
        --radius-sm: 12px;
        --radius-md: 16px;
        --radius-lg: 22px;
        --radius-xl: 30px;
        --radius-pill: 999px;

        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 20px;
        --space-6: 24px;
        --space-7: 32px;
        --space-8: 40px;
        --space-9: 48px;
        --space-10: 64px;
        --space-11: 80px;
        --space-12: 96px;

        --text-xs: calc(13px * var(--ui-scale) * var(--font-metric));
        --text-sm: calc(14.5px * var(--ui-scale) * var(--font-metric));
        --text-md: calc(16px * var(--ui-scale) * var(--font-metric));
        --text-lg: calc(17.5px * var(--ui-scale) * var(--font-metric));
        --text-xl: calc(20px * var(--ui-scale) * var(--font-metric));
        --text-2xl: calc(24px * var(--ui-scale) * var(--font-metric));
        --text-3xl: calc(32px * var(--ui-scale) * var(--font-metric));
        --text-4xl: calc(42px * var(--ui-scale) * var(--font-metric));
        --text-5xl: calc(56px * var(--ui-scale) * var(--font-metric));

        --control-h-sm: calc(40px * var(--ui-scale));
        --control-h: calc(50px * var(--ui-scale));
        --control-h-lg: calc(54px * var(--ui-scale));
        --focus-ring: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent);
        --control-border: var(--c-line);
        --control-border-hover: var(--c-accent-border);
        --control-bg: #ffffff;
        --control-bg-disabled: #f2f6f5;
        --control-bg-focus: var(--c-accent-surface);
    }
}

@layer base {
    html, body { min-height: 100%; }
    body {
        font-family: var(--ui-font-family);
        font-size: var(--text-md);
        line-height: 1.8;
        color: var(--c-ink-900);
        background: var(--c-surface);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        font-kerning: normal;
        font-synthesis-weight: auto;
    }

    button, input, select, textarea, optgroup { font-family: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button:not(:disabled), [role="button"] { cursor: pointer; }
    input, select, textarea { min-width: 0; }
    input::placeholder, textarea::placeholder { color: var(--c-ink-400); opacity: 1; }
    :focus-visible { outline: none; box-shadow: var(--focus-ring); }
    ::selection { background: var(--c-accent-soft); color: var(--c-ink-950); }
    code, pre, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

    html[dir="rtl"] body { direction: rtl; text-align: start; }
    html[dir="rtl"] :where(form, fieldset, label, nav, table, thead, tbody, tfoot, tr, th, td, dl, ul, ol) { direction: rtl; }
    [dir="ltr"] { direction: ltr !important; unicode-bidi: isolate; }
    [data-latin-digits] { unicode-bidi: isolate; }
}

@layer components {
    .container {
        width: min(1240px, calc(100% - 40px));
        margin-inline: auto;
    }

    .kicker, .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--c-accent-hover);
        font-size: var(--text-sm);
        font-weight: 800;
        line-height: 1.5;
    }

    .button {
        min-height: var(--control-h);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding-inline: 20px;
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        font-size: var(--text-md);
        font-weight: 750;
        line-height: 1.2;
        white-space: nowrap;
        transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
    }
    .button:hover:not(:disabled) { transform: translateY(-1px); }
    .button:disabled { opacity: .5; cursor: not-allowed; }
    .button--small { min-height: var(--control-h-sm); padding-inline: 15px; border-radius: var(--radius-sm); }
    .button--wide { width: 100%; }
    .button--primary { background: var(--c-accent); color: #fff; box-shadow: 0 8px 22px color-mix(in srgb,var(--c-accent) 16%,transparent); }
    .button--primary:hover:not(:disabled) { background: var(--c-accent-hover); }
    .button--ink { background: var(--c-accent-deep); color: #fff; border-color: var(--c-accent-deep); }
    .button--ink:hover:not(:disabled) { background: var(--c-accent-active); border-color: var(--c-accent-active); }
    .button--soft, .button--secondary { background: var(--c-surface-soft); color: var(--c-ink-800); border-color: var(--c-line); }
    .button--ghost { background: transparent; color: var(--c-ink-700); border-color: var(--c-line); }
    .button--danger { background: #fff4f4; color: var(--c-danger); border-color: #f1d3d3; }
    .button--light { background: var(--c-surface); color: var(--c-ink-900); }

    .field { display: grid; gap: 7px; }
    .field > span, .field > label {
        color: var(--c-ink-700);
        font-size: var(--text-sm);
        font-weight: 700;
        line-height: 1.55;
    }
    .field small, .field-help { color: var(--c-ink-500); font-size: var(--text-xs); line-height: 1.7; }
    :where(
        input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
        input[type="url"], input[type="password"], input[type="number"], input:not([type]),
        select, textarea
    ) {
        width: 100%;
        min-height: var(--control-h);
        border: 1px solid var(--control-border);
        border-radius: var(--radius-sm);
        background: var(--control-bg);
        color: var(--c-ink-900);
        padding-inline: 14px;
        font-size: var(--text-md);
        line-height: 1.45;
        text-align: start;
        direction: inherit;
        outline: none;
        box-shadow: none;
        transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }
    :where(textarea) { min-height: 118px; padding-block: 12px; resize: vertical; line-height: 1.8; }
    :where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input:not([type]), select, textarea):hover:not(:disabled) { border-color: var(--control-border-hover); }
    :where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input:not([type]), select, textarea):focus { border-color: var(--c-accent); background: var(--control-bg-focus); box-shadow: var(--focus-ring); }
    :where(input, select, textarea):disabled { background: var(--control-bg-disabled); color: var(--c-ink-400); cursor: not-allowed; opacity: 1; }
    :where(input[type="checkbox"], input[type="radio"]) { inline-size: 20px; block-size: 20px; flex: 0 0 20px; margin: 0; accent-color: var(--c-accent); }
    input[type="range"] { accent-color: var(--c-accent); }
    input[type="file"] { max-width: 100%; color: var(--c-ink-600); font-size: var(--text-sm); }
    input[type="file"]::file-selector-button { min-height: var(--control-h-sm); margin-inline-end: 10px; padding-inline: 14px; border: 1px solid var(--c-accent-border); border-radius: var(--radius-sm); background: var(--c-accent-soft); color: var(--c-accent-ink); font: inherit; font-weight: 750; cursor: pointer; }
    input[type="color"] { inline-size: 100%; min-height: var(--control-h); padding: 4px; border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--control-bg); cursor: pointer; }
    input[type="number"] { -moz-appearance: textfield; }
    input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
    select {
        -webkit-appearance: none;
        appearance: none;
        padding-inline-end: 42px;
        cursor: pointer;
        background-image: linear-gradient(45deg, transparent 50%, var(--c-ink-500) 50%), linear-gradient(135deg, var(--c-ink-500) 50%, transparent 50%);
        background-position: left 18px center, left 13px center;
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
    }
    html[dir="ltr"] select { background-position: right 13px center, right 18px center; }
    option, optgroup { font-family: inherit; }
    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: var(--c-ink-900); box-shadow: 0 0 0 1000px var(--control-bg) inset; transition: background-color 9999s ease-out 0s; }
    :where(input,select,textarea)[aria-invalid="true"], :where(input,select,textarea):user-invalid { border-color: var(--c-danger); }
    .field > :where(input, select, textarea) { width: 100%; }
    .field--full { grid-column: 1 / -1; }
    .field-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .field-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .checkbox-field, .check-field {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--c-ink-700);
        font-size: var(--text-sm);
    }
    .checkbox-field input, .check-field input { width: 18px; height: 18px; accent-color: var(--c-accent); }

    .alert, .notice, .form-message {
        border: 1px solid var(--c-line);
        border-radius: var(--radius-sm);
        padding: 12px 14px;
        font-size: var(--text-sm);
        line-height: 1.75;
    }
    .alert--success, .notice--success { color: #1b6848; background: #effaf5; border-color: #cce8da; }
    .alert--error, .notice--error { color: #933939; background: #fff3f3; border-color: #f0d1d1; }
    .alert--warning { color: #7e5b17; background: #fff9eb; border-color: #eedcae; }

    .status-chip, .status-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        padding-inline: 10px;
        border-radius: var(--radius-pill);
        background: var(--c-surface-muted);
        color: var(--c-ink-700);
        font-size: var(--text-xs);
        font-weight: 750;
        white-space: nowrap;
    }

    .empty-state {
        min-height: 240px;
        display: grid;
        place-items: center;
        text-align: center;
        color: var(--c-ink-500);
        padding: 36px 24px;
    }

    .jalali-field { position: relative; }
    .jalali-field input[data-jalali-picker] { padding-inline-end: 44px; direction: ltr; text-align: right; }
    .jalali-trigger {
        position: absolute;
        inset-inline-end: 8px;
        bottom: 7px;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: var(--c-surface-soft);
        color: var(--c-ink-600);
    }
    .jalali-popover {
        position: fixed;
        z-index: 1000;
        width: min(330px, calc(100vw - 24px));
        padding: 14px;
        border: 1px solid var(--c-line);
        border-radius: var(--radius-md);
        background: var(--c-surface);
        box-shadow: var(--shadow-lg);
        direction: rtl;
    }
    .jalali-popover__head { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 8px; margin-bottom: 10px; }
    .jalali-popover__head button { width: 38px; height: 38px; border-radius: 10px; background: var(--c-surface-soft); }
    .jalali-popover__title { text-align: center; font-weight: 800; font-size: var(--text-sm); }
    .jalali-popover__week, .jalali-popover__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
    .jalali-popover__week span { padding-block: 5px; color: var(--c-ink-500); text-align: center; font-size: var(--text-xs); font-weight: 650; }
    .jalali-popover__days button { aspect-ratio: 1; border-radius: 9px; background: transparent; font-size: var(--text-xs); }
    .jalali-popover__days button:hover { background: var(--c-surface-soft); }
    .jalali-popover__days button.is-today { color: var(--c-accent-hover); font-weight: 900; background: var(--c-accent-soft); }
    .jalali-popover__days button.is-selected { background: var(--c-ink-900); color: #fff; }
    .jalali-popover__days button.is-empty { pointer-events: none; }

    @media (max-width: 980px) {
        .field-grid, .field-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 640px) {
        .container { width: min(100% - 28px, 1240px); }
        .field-grid, .field-grid--2, .field-grid--3 { grid-template-columns: 1fr; }
    }
}

@layer utilities {
    .muted { color: var(--c-ink-500); }
    .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

    /* 1.4 universal control and RTL contract */
    :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
        inline-size: 100%;
        min-block-size: var(--control-h);
        border: 1px solid var(--control-border);
        border-radius: var(--radius-sm);
        background-color: var(--control-bg);
        color: var(--c-ink-900);
        padding-inline: 14px;
        font-family: var(--ui-font-family);
        font-size: var(--text-md);
        font-weight: 500;
        line-height: 1.45;
        caret-color: var(--c-accent);
    }
    :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea):focus {
        border-color: var(--c-accent);
        background-color: var(--control-bg-focus);
        box-shadow: var(--focus-ring);
    }
    :where(input[readonly], textarea[readonly]) { background: var(--c-surface-soft); color: var(--c-ink-600); }
    :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--c-accent); }
    :where(.field, .checkbox-field, .check-field) { min-inline-size: 0; }
    :where(.field) > :where(span, label) { text-align: start; }
    html[dir="rtl"] :where(input:not([dir="ltr"]), select:not([dir="ltr"]), textarea:not([dir="ltr"])) { direction: rtl; text-align: right; }
    html[dir="rtl"] :where(input[dir="ltr"], textarea[dir="ltr"]) { direction: ltr; text-align: right; }
    html[dir="rtl"] select { direction: rtl; text-align: right; }
    html[dir="rtl"] :where(button, .button) { direction: rtl; }
    html[dir="rtl"] :where(th, td, caption) { text-align: right; }

}