/* =====================================================================
   Targap - Theme Overrides (Lacquer Red / Carpet Industry Edition)
   ---------------------------------------------------------------------
   این فایل بعد از main.css لود می‌شه و متغیرهای CSS رو override می‌کنه.
   تغییری در main.css ندادیم — کاملاً additive و قابل حذف.

   palette: لاکی-قرمز ($C84A2E) برای صنعت فرش/قرمز ایرانی
   تایپوگرافی: Vazirmatn با تنظیم دقیق وزن‌ها
   spacing system: مدرن‌تر و یکنواخت‌تر
   ===================================================================== */

/* ---------- 1. CSS Variables Override ---------- */
:root {
    /* === برند جدید: لاکی قرمز === */
    --tg-primary: #C84A2E;          /* رنگ اصلی - لاکی فرش */
    --tg-primary-dark: #A53A21;     /* hover/active */
    --tg-primary-light: #FBE7E0;    /* پس‌زمینه ملایم برای active state */
    --tg-primary-hover: #B23E25;    /* hover روی دکمه‌های primary */

    /* === رنگ‌های accent برای loyalty tiers === */
    --tier-bronze:   #B87333;
    --tier-silver:   #9CA3AF;
    --tier-gold:     #D4A437;
    --tier-platinum: #5B9AAA;

    /* === رنگ‌های وضعیت — کمی خنثی‌تر از قبل === */
    --tg-success: #2D7A4F;          /* سبز معتدل، نه فلورسنت */
    --tg-success-light: #E8F1EB;
    --tg-warning: #B8851E;          /* زرد خاکی، نه روشن */
    --tg-warning-light: #FAF1DC;
    --tg-danger:  #C13C2E;          /* قرمز هم‌خانواده با primary */
    --tg-danger-light: #FBE7E3;
    --tg-info:    #4E7CB5;
    --tg-info-light: #E5EDF7;

    /* === خاکستری‌های گرم‌تر (مناسب palette فرش) === */
    --tg-gray-50:  #FAFAF7;
    --tg-gray-100: #F4F4EE;
    --tg-gray-200: #E8E8E0;
    --tg-gray-300: #D2D2C8;
    --tg-gray-400: #A8A89E;
    --tg-gray-500: #6B6B62;
    --tg-gray-600: #545449;
    --tg-gray-700: #3B3B33;
    --tg-gray-800: #25251F;
    --tg-gray-900: #1A1A17;

    /* === پس‌زمینه و layout === */
    --tg-content-bg: #FAFAF7;       /* warm background */
    --tg-elevated-bg: #FFFFFF;
    --tg-border-color: #E8E8E0;     /* warm border */
    --tg-border-light: #F0F0E8;

    /* === border radius — مدرن‌تر === */
    --tg-radius-xs: 3px;
    --tg-radius-sm: 6px;
    --tg-radius-md: 10px;
    --tg-radius-lg: 14px;
    --tg-radius-xl: 20px;
    --tg-radius-pill: 999px;

    /* === Shadow system === */
    --tg-shadow-xs: 0 1px 2px rgba(26, 26, 23, 0.04);
    --tg-shadow-sm: 0 1px 3px rgba(26, 26, 23, 0.06), 0 1px 2px rgba(26, 26, 23, 0.04);
    --tg-shadow-md: 0 4px 12px rgba(26, 26, 23, 0.08);
    --tg-shadow-lg: 0 12px 32px rgba(26, 26, 23, 0.12);
    --tg-shadow-accent: 0 4px 12px rgba(200, 74, 46, 0.18);

    /* === spacing system === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* === Bootstrap override === */
    --bs-primary: var(--tg-primary);
    --bs-primary-rgb: 200, 74, 46;
    --bs-link-color: var(--tg-primary);
    --bs-link-hover-color: var(--tg-primary-dark);
    --bs-border-color: var(--tg-border-color);
    --bs-body-bg: var(--tg-content-bg);
    --bs-body-color: var(--tg-gray-900);
}

/* ---------- 2. Typography refinement ---------- */
html, body {
    font-feature-settings: "ss01", "kern", "calt";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--tg-gray-900);
    background-color: var(--tg-content-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--tg-gray-900);
    letter-spacing: -0.01em;
}

.tg-page-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

p, li, td, .form-text, .small {
    font-weight: 400;
}

.auto-persian-numbers, .ltr-numbers, code, kbd {
    font-variant-numeric: tabular-nums;
}

/* ---------- 3. Buttons refinement ---------- */
.btn {
    border-radius: var(--tg-radius-sm);
    font-weight: 500;
    transition: all 0.15s ease;
    border-width: 1px;
}

.btn-primary {
    background-color: var(--tg-primary);
    border-color: var(--tg-primary);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--tg-primary-hover);
    border-color: var(--tg-primary-hover);
    box-shadow: var(--tg-shadow-accent);
}

.btn-primary:active {
    background-color: var(--tg-primary-dark) !important;
    border-color: var(--tg-primary-dark) !important;
}

.btn-outline-primary {
    color: var(--tg-primary);
    border-color: var(--tg-primary);
}

.btn-outline-primary:hover {
    background-color: var(--tg-primary);
    border-color: var(--tg-primary);
    color: #ffffff;
}

.btn-outline-secondary {
    color: var(--tg-gray-700);
    border-color: var(--tg-gray-300);
}

.btn-outline-secondary:hover {
    background-color: var(--tg-gray-100);
    border-color: var(--tg-gray-400);
    color: var(--tg-gray-900);
}

.btn-success { background-color: var(--tg-success); border-color: var(--tg-success); }
.btn-success:hover { background-color: #246340; border-color: #246340; }

.btn-warning { background-color: var(--tg-warning); border-color: var(--tg-warning); color: #fff; }
.btn-warning:hover { background-color: #966E18; border-color: #966E18; color: #fff; }

.btn-danger { background-color: var(--tg-danger); border-color: var(--tg-danger); }
.btn-danger:hover { background-color: #9D3025; border-color: #9D3025; }

/* ---------- 4. Cards refinement ---------- */
.tg-card {
    background: var(--tg-elevated-bg);
    border: 1px solid var(--tg-border-color);
    border-radius: var(--tg-radius-md);
    box-shadow: var(--tg-shadow-xs);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.tg-card:hover {
    box-shadow: var(--tg-shadow-sm);
}

/* ---------- 5. Sidebar refinement ---------- */
.tg-sidebar {
    background: var(--tg-elevated-bg);
    border-left: 1px solid var(--tg-border-light);
}

.tg-sidebar-logo {
    color: var(--tg-primary);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.tg-sidebar-nav a {
    transition: all 0.12s ease;
    border-right: 3px solid transparent;
    color: var(--tg-gray-700);
}

.tg-sidebar-nav a:hover {
    background: var(--tg-gray-50);
    color: var(--tg-primary);
}

.tg-sidebar-nav a.active {
    background: var(--tg-primary-light);
    color: var(--tg-primary);
    border-right-color: var(--tg-primary);
    font-weight: 600;
}

.tg-sidebar-nav .nav-section {
    color: var(--tg-gray-500);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding-top: var(--space-5);
}

/* ---------- 6. Topbar refinement ---------- */
.tg-topbar {
    background: var(--tg-elevated-bg);
    border-bottom: 1px solid var(--tg-border-light);
    box-shadow: 0 1px 0 rgba(26, 26, 23, 0.02);
}

.tg-topbar-search input {
    background: var(--tg-gray-50);
    border-color: var(--tg-border-color);
    border-radius: var(--tg-radius-md);
}

.tg-topbar-search input:focus {
    background: #fff;
    border-color: var(--tg-primary);
    box-shadow: 0 0 0 3px rgba(200, 74, 46, 0.12);
}

/* ---------- 7. Forms refinement ---------- */
.form-control, .form-select {
    border-radius: var(--tg-radius-sm);
    border-color: var(--tg-border-color);
    color: var(--tg-gray-900);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--tg-primary);
    box-shadow: 0 0 0 3px rgba(200, 74, 46, 0.12);
}

.form-label {
    font-weight: 500;
    color: var(--tg-gray-800);
    margin-bottom: var(--space-1);
}

.form-text {
    color: var(--tg-gray-500);
    font-size: 12px;
}

.form-check-input:checked {
    background-color: var(--tg-primary);
    border-color: var(--tg-primary);
}

.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(200, 74, 46, 0.12);
}

/* ---------- 8. Tables refinement ---------- */
.table {
    color: var(--tg-gray-800);
}

.table > :not(caption) > * > * {
    padding: 12px 14px;
}

.table > thead {
    background: var(--tg-gray-50);
}

.table > thead th {
    font-weight: 600;
    color: var(--tg-gray-600);
    font-size: 12.5px;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--tg-border-color);
}

.table-hover > tbody > tr:hover {
    background-color: var(--tg-gray-50);
}

/* ---------- 9. Badges refinement ---------- */
.badge {
    font-weight: 500;
    padding: 0.35em 0.7em;
    border-radius: var(--tg-radius-xs);
    font-size: 11.5px;
}

.text-bg-primary {
    background-color: var(--tg-primary) !important;
    color: #fff !important;
}

.text-bg-success {
    background-color: var(--tg-success-light) !important;
    color: var(--tg-success) !important;
}

.text-bg-warning {
    background-color: var(--tg-warning-light) !important;
    color: var(--tg-warning) !important;
}

.text-bg-danger {
    background-color: var(--tg-danger-light) !important;
    color: var(--tg-danger) !important;
}

.text-bg-info {
    background-color: var(--tg-info-light) !important;
    color: var(--tg-info) !important;
}

.text-bg-secondary {
    background-color: var(--tg-gray-100) !important;
    color: var(--tg-gray-700) !important;
}

.text-bg-light {
    background-color: var(--tg-gray-100) !important;
    color: var(--tg-gray-700) !important;
}

.text-bg-dark {
    background-color: var(--tg-gray-800) !important;
    color: #fff !important;
}

.text-primary { color: var(--tg-primary) !important; }
.text-success { color: var(--tg-success) !important; }
.text-warning { color: var(--tg-warning) !important; }
.text-danger  { color: var(--tg-danger)  !important; }
.text-info    { color: var(--tg-info)    !important; }
.text-muted   { color: var(--tg-gray-500) !important; }

/* ---------- 10. Progress bars ---------- */
.progress {
    background-color: var(--tg-gray-100);
    border-radius: var(--tg-radius-pill);
    overflow: hidden;
}

.progress-bar {
    background-color: var(--tg-primary);
}

/* ---------- 11. Alerts refinement ---------- */
.alert {
    border-radius: var(--tg-radius-sm);
    border: none;
    padding: 12px 16px;
    font-weight: 400;
}

.alert-success {
    background-color: var(--tg-success-light);
    color: var(--tg-success);
}

.alert-warning {
    background-color: var(--tg-warning-light);
    color: var(--tg-warning);
}

.alert-danger {
    background-color: var(--tg-danger-light);
    color: var(--tg-danger);
}

.alert-info {
    background-color: var(--tg-info-light);
    color: var(--tg-info);
}

/* ---------- 12. Links ---------- */
a {
    color: var(--tg-primary);
    text-decoration: none;
    transition: color 0.12s ease;
}

a:hover {
    color: var(--tg-primary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

a.text-decoration-none:hover {
    text-decoration: none;
    color: var(--tg-primary-dark);
}

/* ---------- 13. Scrollbar ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--tg-gray-50);
}

::-webkit-scrollbar-thumb {
    background: var(--tg-gray-300);
    border-radius: var(--tg-radius-pill);
    border: 2px solid var(--tg-gray-50);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tg-gray-400);
}

/* ---------- 14. Smart Empty State ---------- */
.tg-smart-empty {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    background: var(--tg-elevated-bg);
    border: 1px dashed var(--tg-border-color);
    border-radius: var(--tg-radius-md);
    color: var(--tg-gray-600);
}

.tg-smart-empty__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--tg-primary-light);
    color: var(--tg-primary);
    margin-bottom: var(--space-4);
    font-size: 28px;
}

.tg-smart-empty__title {
    color: var(--tg-gray-900);
    font-weight: 700;
    font-size: 17px;
    margin: 0 0 var(--space-2);
}

.tg-smart-empty__message {
    color: var(--tg-gray-600);
    margin: 0 auto var(--space-5);
    max-width: 420px;
    line-height: 1.7;
}

.tg-smart-empty__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    margin-top: var(--space-4);
}

.tg-smart-empty__suggestion {
    background: var(--tg-gray-50);
    border: 1px solid var(--tg-border-light);
    border-radius: var(--tg-radius-pill);
    padding: 6px 14px;
    font-size: 12.5px;
    color: var(--tg-gray-700);
    text-decoration: none;
    transition: all 0.12s ease;
}

.tg-smart-empty__suggestion:hover {
    background: var(--tg-primary-light);
    border-color: var(--tg-primary-light);
    color: var(--tg-primary);
}

/* ---------- 15. Smart date ---------- */
.tg-smart-date {
    color: var(--tg-gray-700);
    font-variant-numeric: tabular-nums;
}

.tg-smart-date--today {
    color: var(--tg-success);
    font-weight: 500;
}

.tg-smart-date--yesterday {
    color: var(--tg-info);
}

.tg-smart-date--stale {
    color: var(--tg-warning);
}

.tg-smart-date--very-stale {
    color: var(--tg-danger);
}

/* ---------- 16. Health dot ---------- */
.tg-health-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    margin-inline-end: 4px;
}

.tg-health-dot--excellent { background: var(--tg-success); }
.tg-health-dot--good { background: #7A9B2D; }
.tg-health-dot--warning { background: var(--tg-warning); }
.tg-health-dot--critical { background: var(--tg-danger); animation: pulse-critical 2s infinite; }
.tg-health-dot--none { background: var(--tg-gray-300); }

@keyframes pulse-critical {
    0%, 100% { box-shadow: 0 0 0 0 rgba(193, 60, 46, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(193, 60, 46, 0); }
}

/* ---------- 17. Kbd ---------- */
kbd, .tg-kbd {
    display: inline-block;
    padding: 2px 6px;
    background: var(--tg-gray-100);
    border: 1px solid var(--tg-border-color);
    border-bottom-width: 2px;
    border-radius: var(--tg-radius-xs);
    font-size: 11px;
    color: var(--tg-gray-700);
    font-family: "Consolas", monospace;
    direction: ltr;
    min-width: 18px;
    text-align: center;
}

/* ---------- 18. Page Hint — راهنمای کوچک ---------- */
.tg-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: linear-gradient(135deg, #FFF8F5 0%, #FBE7E0 100%);
    border: 1px solid #F5D5C8;
    border-right: 3px solid var(--tg-primary);
    border-radius: var(--tg-radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: 13px;
    position: relative;
}

.tg-hint__icon {
    color: var(--tg-primary);
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.tg-hint__body {
    flex: 1;
    min-width: 0;
}

.tg-hint__title {
    font-weight: 600;
    color: var(--tg-gray-900);
    margin-bottom: 2px;
}

.tg-hint__text {
    color: var(--tg-gray-700);
    line-height: 1.7;
}

.tg-hint__text strong {
    color: var(--tg-primary-dark);
    font-weight: 600;
}

.tg-hint__close {
    background: transparent;
    border: none;
    color: var(--tg-gray-500);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: all 0.12s ease;
}

.tg-hint__close:hover {
    background: rgba(200, 74, 46, 0.12);
    color: var(--tg-primary);
}

.tg-hint.is-dismissed {
    display: none;
}