/* =====================================================================
   سیستم طراحی مشترک — الهام از دفتر حساب و رسید فروشگاهی
   استفاده در: index.html, login.html, admin.html
   ===================================================================== */

/* فونت وزیرمتن — اگر فایل‌های woff2 را در پوشه‌ی fonts/ قرار ندهید،
   مرورگر به‌طور خودکار روی فونت سیستم (Tahoma/system-ui) برمی‌گردد
   و ظاهر برنامه همچنان درست کار می‌کند. */
@font-face {
    font-family: "Vazirmatn";
    src: url("fonts/Vazirmatn-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("fonts/Vazirmatn-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("fonts/Vazirmatn-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("fonts/Vazirmatn-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("fonts/Vazirmatn-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}

:root {
    /* کاغذ دفتر حساب */
    --bg-color: #f4f1e8;
    --card-bg: #fffdf8;
    --rule: #ddd6c2;
    --rule-strong: #c7bd9e;

    /* جوهر */
    --text-main: #20261f;
    --text-soft: #6a6b57;

    /* سبز جنگلی — لهجه‌ی اصلی («در سود» بودن دفتر حساب) */
    --primary: #1f6f4e;
    --primary-deep: #123f2c;
    --primary-soft: rgba(31, 111, 78, 0.10);

    /* قرمز مهر لاستیکی — فقط برای هشدار/بدهی/حذف */
    --danger: #ac3a34;
    --danger-soft: rgba(172, 58, 52, 0.09);

    /* برنز/طلایی — لهجه‌ی نادر برای جزئیات کوچک */
    --gold: #a9812f;

    --warning: #a9812f;
    --input-bg: #fbf9f2;
    --shadow-soft: 0 14px 30px rgba(32, 38, 31, 0.10);
}

body.dark {
    --bg-color: #12160f;
    --card-bg: #181d15;
    --rule: #2b3226;
    --rule-strong: #3a4333;

    --text-main: #e9e7d9;
    --text-soft: #97a08d;

    --primary: #45b183;
    --primary-deep: #2c8562;
    --primary-soft: rgba(69, 177, 131, 0.14);

    --danger: #e0837c;
    --danger-soft: rgba(224, 131, 124, 0.12);

    --gold: #cdab5f;
    --input-bg: #12160f;
    --shadow-soft: 0 16px 34px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

html, body {
    font-family: "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
}

body {
    margin: 0;
    color: var(--text-main);
    background:
        radial-gradient(circle at top left, rgba(31,111,78,.05), transparent 40%),
        var(--bg-color);
    transition: background .35s ease, color .25s ease;
}
body.app-page { padding: 10px; }
body.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tabular { font-variant-numeric: tabular-nums; }

/* ===================== ساختار کلی ===================== */
.app-shell { max-width: 1200px; margin: 0 auto 60px; }

.card {
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
    padding: 16px;
    border: 1px solid var(--rule);
    margin-bottom: 14px;
}

.header-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo {
    width: 42px; height: 42px; flex: none;
    border-radius: 9px;
    background: linear-gradient(160deg, var(--primary), var(--primary-deep));
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.brand-logo svg { width: 22px; height: 22px; stroke: #f6f4ea; }
.brand-text h1 { font-size: 16px; margin: 0 0 3px; font-weight: 800; letter-spacing: -.01em; }
.brand-text p { margin: 0; font-size: 10.5px; color: var(--text-soft); }
.store-info-small { font-size: 10.5px; color: var(--text-soft); margin-top: 3px; }

.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.pill {
    padding: 5px 10px; border-radius: 999px;
    background: var(--primary-soft);
    font-size: 10.5px; color: var(--primary-deep);
    display: flex; align-items: center; gap: 6px;
    font-weight: 600;
}
body.dark .pill { color: var(--primary); }
.pill-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 8px rgba(31,111,78,.6); }

.toggle-theme {
    border-radius: 999px; border: 1px solid var(--rule-strong);
    background: transparent;
    padding: 5px 10px; display: flex; align-items: center; gap: 7px;
    font-size: 10.5px; color: var(--text-soft); cursor: pointer;
}
.toggle-knob {
    width: 26px; height: 15px; border-radius: 999px;
    background: var(--primary-deep); border: 1px solid var(--primary-deep);
    padding: 1px; display: flex; align-items: center; justify-content: flex-start;
    transition: background .3s, justify-content .3s;
}
body.dark .toggle-knob { background: var(--primary); border-color: var(--primary); justify-content: flex-end; }
.toggle-knob-inner { width: 11px; height: 11px; border-radius: 999px; background: #f6f4ea; }

/* ===================== تب‌ها ===================== */
.tabs { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.tab-btn {
    border-radius: 8px; padding: 7px 14px; font-size: 11.5px; font-weight: 600;
    border: 1px solid var(--rule-strong); background: transparent; color: var(--text-soft); cursor: pointer;
}
.tab-btn.active { background: var(--primary); color: #f6f4ea; border-color: var(--primary); }

.layout-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
@media (max-width:900px) { .layout-2 { grid-template-columns: 1fr; } }
@media (max-width:600px) { .card { padding: 12px; } }

.section-title { font-size: 13px; margin-bottom: 6px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.section-sub { font-size: 10.5px; color: var(--text-soft); margin-bottom: 10px; }
.section-title-badge { font-size: 9px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rule-strong); color: var(--text-soft); font-weight: 500; }

/* ===================== فرم‌ها ===================== */
.form-row, .actions-row, .pay-row, .settings-row { display: flex; flex-wrap: wrap; gap: 8px; }
.form-row input, .pay-row input, .search-input, .settings-row input, .settings-row textarea, .settings-row select,
input, select, textarea {
    padding: 9px 10px; font-size: 12.5px; border-radius: 8px;
    border: 1px solid var(--rule-strong);
    background: var(--input-bg); color: var(--text-main);
    outline: none; width: 100%;
    font-family: inherit;
}
.form-row input:focus, .pay-row input:focus, .search-input:focus,
.settings-row input:focus, .settings-row textarea:focus, .settings-row select:focus,
input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.form-row > div, .settings-row > div { flex: 1; min-width: 130px; }
@media (max-width:600px) { .form-row > div, .settings-row > div { min-width: 100%; } }
label { font-size: 10.5px; color: var(--text-soft); display: block; margin-bottom: 3px; font-weight: 500; }

/* ===================== دکمه‌ها ===================== */
.btn {
    border-radius: 8px; border: none;
    padding: 9px 14px; font-size: 11.5px; font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap; transition: transform .12s ease, opacity .12s ease;
    font-family: inherit;
}
.btn svg { width: 14px; height: 14px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #f6f4ea; }
.btn-primary:hover { background: var(--primary-deep); }
.btn-outline { background: transparent; border: 1px solid var(--rule-strong); color: var(--text-main); }
.btn-danger { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(172,58,52,.35); }
.btn-soft { background: var(--primary-soft); color: var(--primary-deep); }
body.dark .btn-soft { color: var(--primary); }
.btn-sm { padding: 5px 10px; border-radius: 7px; font-size: 10px; }
.btn-submit {
    width: 100%; border: none; border-radius: 8px; padding: 11px;
    font-size: 13px; font-weight: 700; color: #f6f4ea; cursor: pointer;
    background: var(--primary); font-family: inherit;
}
.btn-submit:hover { background: var(--primary-deep); }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ===================== جستجو ===================== */
.search-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.search-input-wrapper { position: relative; flex: 1; }
.search-input { padding-right: 30px; }
.search-icon { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--text-soft); }
.search-icon svg { width: 13px; height: 13px; display: block; }

/* ===================== جدول ===================== */
.table-wrapper { margin-top: 6px; }
table { width: 100%; border-collapse: collapse; border-radius: 8px; overflow: hidden; border: 1px solid var(--rule); }
table th, table td { padding: 8px 6px; font-size: 11px; text-align: center; }
table thead { background: var(--primary-soft); }
table thead th { color: var(--primary-deep); font-weight: 700; font-size: 10.5px; }
body.dark table thead th { color: var(--primary); }
table tbody tr { border-top: 1px solid var(--rule); }
table tbody tr:hover { background: var(--primary-soft); }

@media (max-width:600px) {
    table, thead, tbody, th, td, tr { display: block; }
    thead { display: none; }
    table { border: none; }
    table tbody tr { border-radius: 8px; border: 1px solid var(--rule); margin-bottom: 8px; padding: 6px; }
    table tbody td { border: none; display: flex; justify-content: space-between; padding: 4px 4px; text-align: right; }
    table tbody td::before { content: attr(data-label); font-weight: 600; font-size: 10px; color: var(--text-soft); }
}

/* ===================== نوار جمع کل — به‌سبک رسید ===================== */
.total-strip {
    position: relative;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 2px dashed var(--rule-strong);
    display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 8px;
}
.total-strip .eyebrow { font-size: 9.5px; letter-spacing: .04em; color: var(--text-soft); font-weight: 600; display: block; margin-bottom: 3px; }
.total-value { font-size: 22px; font-weight: 800; color: var(--primary-deep); font-variant-numeric: tabular-nums; }
body.dark .total-value { color: var(--primary); }
.badge-soft { padding: 3px 9px; border-radius: 999px; font-size: 9px; background: var(--primary-soft); color: var(--primary-deep); font-weight: 600; }
body.dark .badge-soft { color: var(--primary); }

.status-text { font-size: 11.5px; font-weight: 600; }
.status-positive { color: var(--primary-deep); }
body.dark .status-positive { color: var(--primary); }
.status-negative { color: var(--danger); }
.status-neutral { color: var(--text-soft); }

.actions-row { margin-top: 12px; flex-wrap: wrap; }
@media (max-width:600px) { .actions-row { flex-direction: column; } .actions-row .btn { width: 100%; justify-content: center; } }

.chart-container { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--rule); }
.chart-header { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; margin-bottom: 6px; color: var(--text-soft); }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--rule-strong); font-size: 9px; color: var(--text-soft); }

.footer { text-align: center; margin-top: 10px; font-size: 10.5px; color: var(--text-soft); }

/* ===================== مودال تنظیمات ===================== */
.settings-modal-backdrop {
    position: fixed; inset: 0; background: rgba(18,22,15,.55);
    display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px;
}
.settings-modal {
    max-width: 460px; width: 100%;
    background: var(--card-bg); border-radius: 12px;
    box-shadow: 0 24px 50px rgba(0,0,0,.35);
    padding: 18px 18px 20px; border: 1px solid var(--rule);
}
.settings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.settings-title { font-size: 14px; font-weight: 700; }
.settings-close { border: none; background: transparent; cursor: pointer; font-size: 15px; color: var(--text-soft); }
.settings-desc { font-size: 10.5px; color: var(--text-soft); margin-bottom: 10px; }
.settings-actions { margin-top: 10px; display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }

@media print {
    body { background: #fff; padding: 0; }
    .tabs, .toggle-theme, .pill, .actions-row button, .chip-list, .chart-container, .settings-modal-backdrop { display: none !important; }
    .app-shell { margin: 0; max-width: 100%; }
}

/* ===================== صفحه‌ی ورود ===================== */
.auth-card {
    width: 100%; max-width: 380px;
    background: var(--card-bg); border-radius: 14px;
    box-shadow: var(--shadow-soft); border: 1px solid var(--rule);
    padding: 26px 22px;
}
.auth-card .brand-logo { margin: 0 auto 14px; width: 50px; height: 50px; }
.auth-card .brand-logo svg { width: 26px; height: 26px; }
.auth-card h1 { font-size: 15px; text-align: center; margin: 0 0 3px; font-weight: 800; }
.subtitle { font-size: 11px; text-align: center; color: var(--text-soft); margin: 0 0 18px; }
.form-panel { display: none; }
.form-panel.active { display: block; }
.hint { font-size: 10px; color: var(--text-soft); text-align: center; margin-top: 12px; }
.error-box, .info-box {
    display: none; border-radius: 8px; padding: 9px 11px; font-size: 11px; margin-bottom: 12px; font-weight: 500;
}
.error-box { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(172,58,52,.3); }
.info-box { background: var(--primary-soft); color: var(--primary-deep); border: 1px solid rgba(31,111,78,.3); }
body.dark .info-box { color: var(--primary); }

/* ===================== پنل ادمین ===================== */
.role-badge { padding: 3px 10px; border-radius: 999px; font-size: 9px; font-weight: 700; }
.role-admin { background: var(--primary-soft); color: var(--primary-deep); }
body.dark .role-admin { color: var(--primary); }
.role-user { background: rgba(148,163,184,.15); color: var(--text-soft); }