:root{ --dh-brand: #4f46e5; --dh-brand-2: #6d28d9; --dh-accent: #0369a1; --dh-success: #15803d; --dh-warning: #b45309; --dh-danger: #b91c1c; --dh-link: #4f46e5; --dh-link-2: #6d28d9; --dh-success-text: #14743a; --dh-warning-text: #b45309; --dh-danger-text: #b91c1c; --dh-bg: #f4f5fb; --dh-surface: #ffffff; --dh-surface-2: #f8fafc; --dh-text: #1f2937; --dh-muted: #5c6470; --dh-border: #e5e7eb; --dh-radius: 16px; --dh-radius-sm: 10px; --dh-shadow: 0 10px 30px rgba(17, 24, 39, .08); --dh-shadow-soft: 0 4px 14px rgba(17, 24, 39, .06); --dh-ring: 0 0 0 .2rem rgba(79, 70, 229, .18); --dh-brand-soft: rgba(79, 70, 229, .14); --dh-brand-ring: rgba(79, 70, 229, .20); --dh-hero: linear-gradient(135deg, #4f46e5, #6d28d9 55%, #0369a1); --dh-hero-text: #ffffff; --dh-kpi-1: linear-gradient(135deg, #4f46e5, #7c3aed); --dh-kpi-2: linear-gradient(135deg, #0369a1, #0e7490); --dh-kpi-3: linear-gradient(135deg, #15803d, #166534); --dh-kpi-4: linear-gradient(135deg, #b45309, #92400e); --dh-kpi-5: linear-gradient(135deg, #6d28d9, #5b21b6); --dh-kpi-6: linear-gradient(135deg, #0e7490, #155e75); --dh-kpi-danger: linear-gradient(135deg, #b91c1c, #991b1b); --dh-pattern: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px); --dh-pattern-size: 18px 18px} body.dark-mode, html.dark-mode{ --dh-bg: #0f1117; --dh-surface: #171a21; --dh-surface-2: #1e222b; --dh-text: #eef1f6; --dh-muted: #9aa3b2; --dh-border: #2a2f3a; --dh-link: #a5b4fc; --dh-link-2: #c4b5fd; --dh-success-text: #6ee7b7; --dh-warning-text: #fcd34d; --dh-danger-text: #fca5a5; --dh-shadow: 0 12px 30px rgba(0, 0, 0, .45); --dh-shadow-soft: 0 6px 18px rgba(0, 0, 0, .35)} body.dh-panel{ font-family: 'Vazirmatn', 'Vazir', Tahoma, sans-serif; background-color: var(--dh-bg); color: var(--dh-text)} body.dh-panel a{ color: var(--dh-link)} body.dh-panel a:hover{ color: var(--dh-link-2)} body.dh-panel .btn-primary, body.dh-panel .bg-primary, body.dh-panel .badge-primary{ background-color: var(--dh-brand) !important; border-color: var(--dh-brand) !important} body.dh-panel .btn-outline-primary{ color: var(--dh-link) !important; border-color: var(--dh-brand) !important} body.dh-panel .btn-outline-primary:hover{ background-color: var(--dh-brand) !important; color: #fff !important} body.dh-panel .btn-link{ color: var(--dh-link)} body.dh-panel .text-primary{ color: var(--dh-link) !important} body.dh-panel .border-primary{ border-color: var(--dh-brand) !important} body.dh-panel .card-primary:not(.card-outline) > .card-header{ background-color: var(--dh-brand); border-color: var(--dh-brand)} body.dh-panel .card-primary.card-outline{ border-top: 3px solid var(--dh-brand)} body.dh-panel .page-item.active .page-link{ background-color: var(--dh-brand); border-color: var(--dh-brand)} body.dh-panel .page-link{ color: var(--dh-link)} body.dh-panel .form-control:focus, body.dh-panel .custom-select:focus{ border-color: var(--dh-brand); box-shadow: var(--dh-ring)} body.dh-panel .progress-bar{ background-color: var(--dh-brand)} body.dh-panel .nav-pills .nav-link.active{ background-color: var(--dh-brand)} body.dh-panel .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active, body.dh-panel .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover, body.dh-panel .nav-sidebar .nav-link.active{ background-color: var(--dh-brand) !important; color: #fff !important; border-radius: var(--dh-radius-sm)} body.dh-panel .main-sidebar, body.dh-panel .main-header.navbar{ box-shadow: var(--dh-shadow-soft)} body.dh-panel .brand-link{ border-bottom: 1px solid rgba(255, 255, 255, .12) !important} .dh-hero{ position: relative; overflow: hidden; border-radius: var(--dh-radius); background-image: var(--dh-pattern), var(--dh-hero); background-size: var(--dh-pattern-size), cover; color: var(--dh-hero-text); padding: 1.5rem 1.6rem; margin-bottom: 1.25rem; box-shadow: var(--dh-shadow)} .dh-hero::after{ content: ''; position: absolute; left: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .12)} .dh-hero__season{ display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; padding: .2rem .7rem; font-size: .78rem; margin-bottom: .6rem} .dh-hero__title{ font-size: 1.35rem; font-weight: 700; margin: 0 0 .35rem} .dh-hero__meta{ opacity: .92; font-size: .9rem; margin: 0} .dh-hero__actions{ margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem} .dh-hero .btn-light{ border-radius: 999px; font-weight: 600} .dh-hero .btn-outline-light{ border-radius: 999px} .dh-grid{ display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem} .dh-grid > *{ flex: 1 1 210px; min-width: 0} .dh-kpi{ position: relative; overflow: hidden; border-radius: var(--dh-radius); padding: 1.1rem 1.2rem; color: #fff; background-image: var(--dh-kpi-1); box-shadow: var(--dh-shadow-soft); transition: transform .18s ease, box-shadow .18s ease; min-height: 108px; display: flex; flex-direction: column; justify-content: space-between} .dh-kpi:hover{ transform: translateY(-3px); box-shadow: var(--dh-shadow)} .dh-kpi--1{ background-image: var(--dh-kpi-1)} .dh-kpi--2{ background-image: var(--dh-kpi-2)} .dh-kpi--3{ background-image: var(--dh-kpi-3)} .dh-kpi--4{ background-image: var(--dh-kpi-4)} .dh-kpi--5{ background-image: var(--dh-kpi-5)} .dh-kpi--6{ background-image: var(--dh-kpi-6)} .dh-kpi--danger{ background-image: var(--dh-kpi-danger)} .gradient-blue{ background-image: var(--dh-kpi-1)} .gradient-green{ background-image: var(--dh-kpi-3)} .gradient-orange{ background-image: var(--dh-kpi-4)} .gradient-purple{ background-image: var(--dh-kpi-6)} .gradient-cyan{ background-image: var(--dh-kpi-2)} .gradient-teal{ background-image: var(--dh-kpi-5)} .gradient-red{ background-image: var(--dh-kpi-danger)} body.dh-panel .hero-card{ background-image: var(--dh-pattern), var(--dh-hero); background-size: var(--dh-pattern-size), cover; color: #fff; border: none; border-radius: var(--dh-radius); box-shadow: var(--dh-shadow)} body.dh-panel .kpi-card{ color: #fff; border: none; border-radius: var(--dh-radius); box-shadow: var(--dh-shadow-soft)} .dh-kpi--surface{ background-image: none; background-color: var(--dh-surface); color: var(--dh-text); border: 1px solid var(--dh-border)} .dh-kpi__top{ display: flex; align-items: center; justify-content: space-between; gap: .5rem} .dh-kpi__label{ font-size: .85rem; opacity: .92} .dh-kpi__value{ font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin-top: .35rem} .dh-kpi__hint{ font-size: .78rem; opacity: .85} .dh-kpi__icon{ width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); font-size: 1.1rem} .dh-kpi--surface .dh-kpi__icon{ background: var(--dh-surface-2); color: var(--dh-link)} .dh-card{ background-color: var(--dh-surface); border: 1px solid var(--dh-border); border-radius: var(--dh-radius); box-shadow: var(--dh-shadow-soft); margin-bottom: 1.25rem; overflow: hidden} .dh-card__head{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .95rem 1.2rem; border-bottom: 1px solid var(--dh-border); background-color: var(--dh-surface-2)} .dh-card__title{ font-size: 1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .5rem} .dh-card__tools{ display: flex; align-items: center; gap: .4rem; font-size: .85rem} .dh-card__body{ padding: 1.1rem 1.2rem} .dh-card__body--flush{ padding: 0} .dh-chip{ display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .22rem .7rem; font-size: .78rem; background: var(--dh-surface-2); border: 1px solid var(--dh-border); color: var(--dh-muted)} .dh-chip--brand{ background: var(--dh-brand-soft); color: var(--dh-link); border-color: transparent} .dh-empty{ text-align: center; padding: 2rem 1rem; color: var(--dh-muted)} .dh-empty i{ font-size: 2rem; display: block; margin-bottom: .6rem; opacity: .5} .dh-quick{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem} .dh-quick__item{ display: flex; align-items: center; gap: .6rem; padding: .85rem .9rem; border-radius: var(--dh-radius-sm); border: 1px solid var(--dh-border); background: var(--dh-surface); color: var(--dh-text); text-decoration: none; font-size: .9rem; transition: transform .15s ease, border-color .15s ease, background-color .15s ease} .dh-quick__item:hover{ transform: translateY(-2px); border-color: var(--dh-brand); color: var(--dh-link); text-decoration: none} .dh-quick__item i{ color: var(--dh-link); font-size: 1.05rem} .dh-table thead th{ background-color: var(--dh-surface-2); border-bottom: 1px solid var(--dh-border) !important; font-size: .85rem; white-space: nowrap} .dh-table td{ vertical-align: middle; font-size: .9rem} .dh-table tbody tr:hover{ background-color: var(--dh-surface-2)} .dh-table .dh-num{ font-variant-numeric: tabular-nums; direction: ltr; text-align: right} .dh-timeline{ list-style: none; margin: 0; padding: 0} .dh-timeline li{ position: relative; padding: 0 1.4rem .95rem 0; border-right: 2px solid var(--dh-border); margin-right: .6rem} .dh-timeline li::before{ content: ''; position: absolute; right: -7px; top: .15rem; width: 12px; height: 12px; border-radius: 50%; background: var(--dh-brand); box-shadow: 0 0 0 3px var(--dh-brand-ring)} .dh-timeline time{ display: block; color: var(--dh-muted); font-size: .78rem} #dh-toasts{ position: fixed; z-index: 1080; top: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .5rem; max-width: min(360px, 90vw)} .dh-toast{ display: flex; align-items: flex-start; gap: .5rem; background: var(--dh-surface); color: var(--dh-text); border: 1px solid var(--dh-border); border-right: 4px solid var(--dh-brand); border-radius: var(--dh-radius-sm); box-shadow: var(--dh-shadow); padding: .7rem .9rem; font-size: .88rem; animation: dh-slide-in .18s ease-out} .dh-toast--success{ border-right-color: var(--dh-success)} .dh-toast--error{ border-right-color: var(--dh-danger)} .dh-toast--warning{ border-right-color: var(--dh-warning)} @keyframes dh-slide-in{ from{ opacity: 0; transform: translateY(-6px)} to{ opacity: 1; transform: translateY(0)}} .dh-busy{ position: relative; pointer-events: none; opacity: .65} .dh-busy::after{ content: ''; position: absolute; left: 1rem; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: dh-spin .7s linear infinite} @keyframes dh-spin{ to{ transform: rotate(360deg)}} .dh-season-switch{ display: inline-flex; align-items: center; gap: .35rem} .dh-season-switch select{ border-radius: 999px; border: 1px solid var(--dh-border); background: var(--dh-surface); color: var(--dh-text); padding: .2rem .6rem; font-size: .82rem; height: auto} .dh-season-switch--dark select, .navbar-dark .dh-season-switch select{ background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff} .dh-season-switch--dark i{ color: rgba(255, 255, 255, .85)} .dh-season-switch form, li.dh-season-switch--dark{ display: flex; align-items: center} .dh-season-badge{ display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .2rem .65rem; font-size: .8rem; background: var(--dh-brand-soft); color: var(--dh-link)} .dh-toolbar{ display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-bottom: 1rem} .dh-search{ position: relative; flex: 1 1 240px; max-width: 340px} .dh-search input{ width: 100%; border-radius: 999px; border: 1px solid var(--dh-border); padding: .45rem 2.2rem .45rem .9rem; background: var(--dh-surface); color: var(--dh-text); font-size: .9rem} .dh-search i{ position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); color: var(--dh-muted); font-size: .85rem} @media (max-width: 767.98px){ .dh-hero{ padding: 1.2rem} .dh-hero__title{ font-size: 1.15rem} .dh-kpi{ min-height: 96px} .dh-kpi__value{ font-size: 1.35rem}} .dh-nav-clock .nav-link{ display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; opacity: .9} .dh-nav-clock__time{ font-variant-numeric: tabular-nums; font-weight: 600} .dh-nav-clock__date{ white-space: nowrap} .dh-footer-clock{ font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem} .dh-footer-clock-label{ font-size: .75rem; opacity: .75; margin-inline-start: .35rem} .dh-offline-bar{ position: fixed; inset-inline-start: .85rem; bottom: .85rem; z-index: 1060; display: flex; align-items: center; gap: .55rem; max-width: calc(100% - 1.7rem); padding: .5rem .75rem; border-radius: 14px; background: var(--dh-surface, #fff); color: var(--dh-text, #212529); border: 1px solid var(--dh-border, #dee2e6); box-shadow: 0 10px 28px rgba(15, 17, 23, .22); font-size: .85rem; line-height: 1.7} .dh-offline-bar[hidden]{ display: none} .dh-offline-bar__dot{ width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; flex: 0 0 auto} .dh-offline-bar[data-dh-offline-state="offline"] .dh-offline-bar__dot{ background: #dc2626} .dh-offline-bar[data-dh-offline-state="sent"] .dh-offline-bar__dot{ background: #16a34a} .dh-offline-bar[data-dh-offline-state="sending"] .dh-offline-bar__dot{ background: #2563eb} .dh-offline-bar__text{ min-width: 0} .dh-offline-bar__actions{ display: flex; align-items: center; gap: .35rem; flex: 0 0 auto} .dh-offline-bar__btn{ border: 0; border-radius: 10px; padding: .25rem .7rem; font-size: .8rem; font-weight: 700; background: var(--dh-brand-soft, #e7eefc); color: var(--dh-link, #0a58ca); cursor: pointer; text-decoration: none; white-space: nowrap} .dh-offline-bar__btn:hover, .dh-offline-bar__btn:focus-visible{ background: var(--dh-brand-ring, rgba(10, 88, 202, .25)); text-decoration: none} @media (max-width: 767.98px){ .dh-offline-bar{ bottom: 4.35rem; inset-inline: .5rem; max-width: calc(100% - 1rem)} .dh-offline-bar__text{ font-size: .8rem}} .dh-offline-card{ margin-bottom: 1.25rem} .dh-offline-status{ display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding-bottom: .75rem; margin-bottom: .9rem; border-bottom: 1px solid var(--dh-border, #dee2e6)} .dh-offline-status__label{ color: var(--dh-muted, #6c757d); font-size: .85rem} .dh-offline-status [data-dh-online="0"]{ color: #dc2626} .dh-offline-status [data-dh-online="1"]{ color: #16a34a} .dh-offline-actions{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem} .dh-offline-list{ list-style: none; margin: 0; padding: 0} .dh-offline-item{ border: 1px solid var(--dh-border, #dee2e6); border-radius: 12px; padding: .7rem .85rem; margin-bottom: .55rem; background: var(--dh-surface-2, #f8f9fa)} .dh-offline-item__head{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap} .dh-offline-item__meta{ color: var(--dh-muted, #6c757d); font-size: .8rem} .dh-offline-item__error{ color: #b91c1c; font-size: .8rem; margin-top: .2rem} .dh-offline-item__remove{ margin-top: .35rem; border: 0; background: none; color: #b91c1c; font-size: .8rem; padding: 0; cursor: pointer; text-decoration: underline} .dh-offline-tag{ font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: rgba(37, 99, 235, .14); color: #1d4ed8} .dh-offline-tag--failed{ background: rgba(185, 28, 28, .14); color: #b91c1c} .dh-offline-tag--sending{ background: rgba(37, 99, 235, .16); color: #1e40af} .dh-offline-empty{ color: var(--dh-muted, #6c757d); margin: 0} .dh-offline-note{ color: var(--dh-muted, #6c757d); font-size: .82rem; margin: .8rem 0 0} .dh-offline-steps{ margin: 0; padding-inline-start: 1.2rem} .dh-offline-steps li{ margin-bottom: .55rem} .dh-cam__controls{ display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem} .dh-cam__controls--sm > .btn{ padding: .2rem .5rem; font-size: .78rem} .dh-cam__select-wrap{ display: inline-block; min-width: 9.5rem; max-width: 13rem} .dh-cam__select{ font-size: .8rem; padding-block: .2rem} .dh-cam__flip .dh-cam__flip-text, .dh-cam__torch .dh-cam__text{ white-space: nowrap} .dh-cam__controls .btn.active, .dh-cam__controls .btn[aria-pressed="true"]{ background-color: var(--dh-brand-soft, rgba(37, 99, 235, .12)); border-color: var(--dh-brand, #2563eb); color: var(--dh-link, #1d4ed8)} .dh-cam__controls--sm .dh-cam__select{ max-width: 8.5rem} @media (max-width: 575.98px){ .dh-cam__controls{ width: 100%; justify-content: space-between} .dh-cam__select-wrap{ flex: 1 1 100%; max-width: none} .dh-cam__controls .btn{ flex: 1 1 auto}} @media (max-width: 767.98px){ .dh-card__head{ flex-wrap: wrap} .dh-card__head > .dh-card__tools{ flex-wrap: wrap} .dh-toolbar{ align-items: stretch} .dh-toolbar > .dh-search{ flex: 1 1 100%; max-width: none} .dh-card__body{ padding: .9rem}} .dh-w-170{ width: 170px; max-width: 100%} .dh-w-240{ width: 240px; max-width: 100%} @media (max-width: 767.98px){ .dh-w-170, .dh-w-240{ width: 100%}} .dh-banner__icon{ width: 80px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto} @media (max-width: 575.98px){ .dh-banner__icon{ width: 56px} .dh-banner__icon i{ font-size: 1.25rem}}