/* ============================================================
   دیزاین سیستم زیرمجموعه‌ها | لایه ۲: ریست و کامپوننت‌ها
   ------------------------------------------------------------
   بعد از hz-tokens.css لود می‌شود و فقط از var(--hz-*) استفاده
   می‌کند. هیچ hex و هیچ px خامی اینجا نیست مگر جایی که یک قاعده‌ی
   فنی (مثل ۱px مرز) عدد دیگری قبول نمی‌کند.
   ============================================================ */

/* ============================================================
   ۱. ریست
   ⚠ ریست فرم را با پیشوند کلاس ننویس. `.hz-body :is(input,button)`
     وزن (۰،۱،۱) دارد و از کامپوننت‌های تک‌کلاسه مثل .hz-btn--primary
     قوی‌تر می‌شود و رنگشان را خنثی می‌کند. پس در سطح المان:
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--hz-font);
    font-size: var(--hz-text-base);
    line-height: var(--hz-leading);
    color: var(--hz-ink);
    background: var(--hz-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: var(--hz-leading-tight);
    font-weight: var(--hz-weight-bold);
    color: var(--hz-ink);
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--hz-primary); }

img, svg, video { max-width: 100%; height: auto; display: block; }

input, select, textarea, button {
    font: inherit;
    color: inherit;
    margin: 0;
}
button { background: none; border: 0; cursor: pointer; }

/* فوکوس همیشه دیده شود — هرگز outline:none بدون جایگزین */
:focus-visible {
    outline: 2px solid var(--hz-focus);
    outline-offset: 2px;
    border-radius: var(--hz-radius-sm);
}

/* ⚠ ریشه‌ی تقریباً همه‌ی سرریزهای افقی: min-width:auto روی آیتم‌های
   فلکس و گرید. با :where وزن صفر می‌ماند و هر صفحه می‌تواند پسش بگیرد. */
@media (max-width: 1023px) {
    :where(div, section, main, header, footer, article, aside, nav, form) { min-width: 0; }
}

/* ============================================================
   ۲. چیدمان
   ============================================================ */
.hz-container {
    width: 100%;
    max-width: var(--hz-container);
    margin-inline: auto;
    padding-inline: var(--hz-gutter);
}

.hz-section { padding-block: var(--hz-section-y); }
.hz-section--soft { background: var(--hz-surface-soft); }

.hz-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hz-4);
    flex-wrap: wrap;
    margin-bottom: var(--hz-6);
}
.hz-section__head h2 { font-size: var(--hz-text-2xl); font-weight: var(--hz-weight-black); }
.hz-section__head p  { color: var(--hz-muted); font-size: var(--hz-text-sm); }

/* شبکه‌ی کارت — auto-fit یعنی تعداد ستون با عرض واقعی تنظیم می‌شود و
   لازم نیست برای هر بریک‌پوینت عدد جدا بنویسیم. */
.hz-grid {
    display: grid;
    gap: var(--hz-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.hz-grid--tight { gap: var(--hz-3); }
.hz-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

/* ردیف اسکرول‌شونده روی موبایل، شبکه روی دسکتاپ.
   ⚠ ظرف اسکرول علاوه بر min-width:0 باید width:100% داشته باشد؛
     max-width کافی نیست. */
.hz-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(14rem, 1fr);
    gap: var(--hz-4);
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--hz-2);
    scrollbar-width: thin;
}
.hz-rail > * { scroll-snap-align: start; }
@media (min-width: 1024px) {
    .hz-rail {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
        overflow-x: visible;
    }
}

/* ============================================================
   ۳. دکمه
   ============================================================ */
.hz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hz-2);
    padding: var(--hz-3) var(--hz-5);
    border-radius: var(--hz-radius);
    font-weight: var(--hz-weight-medium);
    font-size: var(--hz-text-sm);
    line-height: 1.4;
    border: 1px solid transparent;
    transition: background var(--hz-fast) var(--hz-ease),
                color var(--hz-fast) var(--hz-ease),
                border-color var(--hz-fast) var(--hz-ease),
                transform var(--hz-fast) var(--hz-ease);
    /* هدف لمسی روی موبایل کمتر از این نباشد */
    min-height: 44px;
}
.hz-btn:active { transform: translateY(1px); }

.hz-btn--primary { background: var(--hz-primary); color: var(--hz-on-primary); }
.hz-btn--primary:hover { background: var(--hz-primary-hover); color: var(--hz-on-primary); }

.hz-btn--accent { background: var(--hz-accent); color: var(--hz-on-accent); }
.hz-btn--accent:hover { background: var(--hz-accent-hover); color: var(--hz-on-accent); }

.hz-btn--ghost {
    background: transparent;
    color: var(--hz-primary);
    border-color: var(--hz-primary-border);
}
.hz-btn--ghost:hover { background: var(--hz-primary-soft); }

.hz-btn--quiet { background: var(--hz-surface-soft); color: var(--hz-ink); }
.hz-btn--quiet:hover { background: var(--hz-surface-sunken); }

.hz-btn--lg { padding: var(--hz-4) var(--hz-8); font-size: var(--hz-text-base); }
.hz-btn--block { width: 100%; }

/* دکمه‌ی آیکونی مربعی */
.hz-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--hz-radius);
    color: var(--hz-ink);
    transition: background var(--hz-fast) var(--hz-ease);
}
.hz-iconbtn:hover { background: var(--hz-surface-hover); }

/* ============================================================
   ۴. فرم
   ============================================================ */
.hz-field { display: grid; gap: var(--hz-2); }
.hz-label { font-size: var(--hz-text-sm); font-weight: var(--hz-weight-medium); }
.hz-hint  { font-size: var(--hz-text-xs); color: var(--hz-muted); }

.hz-input, .hz-select, .hz-textarea {
    width: 100%;
    min-width: 0;
    padding: var(--hz-3) var(--hz-4);
    border: 1px solid var(--hz-line-strong);
    border-radius: var(--hz-radius);
    background: var(--hz-surface);
    /* ⚠ زیر ۱۶px، سافاری موبایل هنگام فوکوس صفحه را زوم می‌کند */
    font-size: 16px;
    transition: border-color var(--hz-fast) var(--hz-ease), box-shadow var(--hz-fast) var(--hz-ease);
}
.hz-input:focus, .hz-select:focus, .hz-textarea:focus {
    outline: none;
    border-color: var(--hz-focus);
    box-shadow: var(--hz-focus-ring);
}
.hz-textarea { min-height: 7rem; resize: vertical; }

/* ============================================================
   ۵. کارت
   ============================================================ */
.hz-card {
    background: var(--hz-surface);
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius-lg);
    overflow: hidden;
    transition: box-shadow var(--hz-normal) var(--hz-ease),
                border-color var(--hz-normal) var(--hz-ease),
                transform var(--hz-normal) var(--hz-ease);
}
.hz-card:hover { box-shadow: var(--hz-shadow); border-color: var(--hz-line-strong); }
.hz-card__body { padding: var(--hz-4); display: grid; gap: var(--hz-2); }
.hz-card__title { font-size: var(--hz-text-base); font-weight: var(--hz-weight-medium); }
.hz-card__meta { font-size: var(--hz-text-sm); color: var(--hz-muted); }

/* نسبت تصویر ثابت ⇒ کارت‌ها با هم هم‌قد می‌مانند و صفحه هنگام لود
   تصویر نمی‌پرد (CLS). */
.hz-thumb {
    aspect-ratio: 4 / 3;
    background: var(--hz-surface-sunken);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.hz-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   ۶. برچسب و نشان
   ============================================================ */
.hz-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--hz-1);
    padding: var(--hz-1) var(--hz-3);
    border-radius: var(--hz-radius-full);
    font-size: var(--hz-text-xs);
    font-weight: var(--hz-weight-medium);
    background: var(--hz-surface-sunken);
    color: var(--hz-ink);
}
.hz-badge--brand  { background: var(--hz-primary-soft); color: var(--hz-primary); }
.hz-badge--accent { background: var(--hz-accent); color: var(--hz-on-accent); }
.hz-badge--danger { background: var(--hz-danger); color: var(--hz-on-status); }

/* ============================================================
   ۷. جای خالی (Placeholder) — قلبِ قاعده‌ی این پروژه
   ------------------------------------------------------------
   هر جا داده‌ای باید از «تنظیمات اولیه»ی ERP بیاید و هنوز پر نشده،
   این را می‌بینی. عمداً دیده می‌شود: مقدارِ جعلی بدتر از جای خالیِ
   صادق است. با data-key کلید ERP اش روی خودش نوشته شده.
   ============================================================ */
.hz-ph {
    display: inline-block;
    min-width: 4ch;
    padding-inline: var(--hz-2);
    border: 1px dashed var(--hz-accent-text);
    border-radius: var(--hz-radius-sm);
    background: var(--hz-accent-soft);
    color: var(--hz-accent-text);
    font-size: 0.9em;
    line-height: 1.9;
    white-space: nowrap;
    cursor: help;
}
.hz-ph::before { content: "⌁ "; opacity: .7; }

/* جای خالیِ تصویر (لوگو، بنر، عکس محصول) */
.hz-ph-box {
    display: grid;
    place-items: center;
    gap: var(--hz-1);
    width: 100%;
    height: 100%;
    min-height: 4rem;
    padding: var(--hz-3);
    border: 1px dashed var(--hz-line-strong);
    border-radius: var(--hz-radius);
    background: repeating-linear-gradient(
        45deg,
        var(--hz-surface-soft),
        var(--hz-surface-soft) 10px,
        var(--hz-surface-sunken) 10px,
        var(--hz-surface-sunken) 20px
    );
    color: var(--hz-muted);
    font-size: var(--hz-text-xs);
    text-align: center;
}
.hz-ph-box__key {
    font-family: ui-monospace, monospace;
    direction: ltr;
    font-size: var(--hz-text-xs);
    opacity: .75;
}

/* ============================================================
   ۸. کمکی‌ها
   ============================================================ */
.hz-sronly {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.hz-muted { color: var(--hz-muted); }
.hz-center { text-align: center; }
.hz-nowrap { white-space: nowrap; }

/* عدد و آدرس و ایمیل همیشه چپ‌به‌راست، حتی داخل متن فارسی */
.hz-ltr { direction: ltr; unicode-bidi: isolate; }

.hz-divider { height: 1px; background: var(--hz-line); border: 0; margin-block: var(--hz-6); }

/* پرش به محتوا — اولین چیزی که با Tab دیده می‌شود */
.hz-skip {
    position: absolute;
    inset-inline-start: var(--hz-4);
    top: -100px;
    z-index: var(--hz-z-toast);
    padding: var(--hz-3) var(--hz-4);
    background: var(--hz-primary);
    color: var(--hz-on-primary);
    border-radius: var(--hz-radius);
    transition: top var(--hz-fast) var(--hz-ease);
}
.hz-skip:focus { top: var(--hz-4); color: var(--hz-on-primary); }