/* استایل دوم سراسری بر پایهٔ قالب digiradar_theme_test.php؛ رنگ‌ها از panel-theme.css می‌آیند. */
html[data-panel-style="modern"] {
    --style-panel: var(--bg-card);
    --style-panel-2: var(--bg-card-hover);
    --style-border: var(--border-color);
    --style-muted: var(--text-muted);
    --style-text: var(--text-main);
    --style-accent: var(--ui-accent);
    --style-accent-soft: var(--ui-accent-soft);
    --style-accent-border: var(--ui-accent-border);
    --style-radius: 18px;
    --style-radius-sm: 13px;
    --style-shadow: 0 18px 40px -28px rgb(0 0 0 / 85%);
    --style-shadow-strong: 0 22px 52px -30px rgb(0 0 0 / 92%);
}

html[data-panel-style="modern"] body {
    background:
        radial-gradient(circle at 10% -12%, color-mix(in srgb, var(--style-accent) 15%, transparent), transparent 30rem),
        radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--style-accent) 10%, transparent), transparent 28rem),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-body) 88%, #111730) 0%, var(--bg-body) 64%) !important;
}

html[data-panel-style="modern"] body > .container-fluid,
html[data-panel-style="modern"] body > .container {
    position: relative;
}

html[data-panel-style="modern"] .navbar-custom {
    background: color-mix(in srgb, var(--style-panel) 90%, transparent) !important;
    border-bottom: 1px solid var(--style-border) !important;
    backdrop-filter: blur(18px);
    box-shadow: 0 16px 34px -30px rgb(0 0 0 / 80%);
}
html[data-panel-style="modern"] .navbar-brand { letter-spacing: -.35px; }
html[data-panel-style="modern"] .navbar-brand i { color: var(--style-accent); }
html[data-panel-style="modern"] .top-nav-toggle,
html[data-panel-style="modern"] .mobile-nav-toggle,
html[data-panel-style="modern"] .top-nav-link,
html[data-panel-style="modern"] .global-palette,
html[data-panel-style="modern"] .global-theme-toggle,
html[data-panel-style="modern"] .style-toggle,
html[data-panel-style="modern"] .user-badge {
    border-radius: 10px;
}
html[data-panel-style="modern"] .top-nav-toggle.has-active,
html[data-panel-style="modern"] .top-nav-toggle:hover,
html[data-panel-style="modern"] .top-nav-group.open .top-nav-toggle {
    background: linear-gradient(180deg, var(--style-accent-soft), color-mix(in srgb, var(--style-accent-soft) 55%, transparent));
    color: var(--style-text);
    box-shadow: inset 0 -2px 0 var(--style-accent);
}
html[data-panel-style="modern"] .top-nav-toggle .bi:first-child,
html[data-panel-style="modern"] .top-nav-chevron { color: var(--style-accent); }
html[data-panel-style="modern"] .top-nav-panel {
    background: var(--style-panel);
    border-color: var(--style-border);
    border-radius: var(--style-radius-sm);
    box-shadow: var(--style-shadow-strong);
    padding: 9px;
}
html[data-panel-style="modern"] .top-nav-link:hover { background: var(--style-accent-soft); color: var(--style-text); }
html[data-panel-style="modern"] .top-nav-link.active { background: var(--style-accent); color: var(--ui-accent-on); }

html[data-panel-style="modern"] .style-toggle { background: var(--style-accent-soft); border-color: var(--style-accent-border); color: var(--style-accent); }
.style-toggle { align-items: center; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-muted); display: inline-flex; font-family: inherit; font-size: .66rem; gap: 5px; min-height: 31px; padding: 4px 8px; background: var(--ui-input); cursor: pointer; }
.style-toggle:hover { border-color: var(--ui-accent); color: var(--text-main); }
.style-toggle:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

html[data-panel-style="modern"] .card,
html[data-panel-style="modern"] .card-custom,
html[data-panel-style="modern"] .modal-content,
html[data-panel-style="modern"] .dropdown-menu,
html[data-panel-style="modern"] .queue-card,
html[data-panel-style="modern"] .priority-card,
html[data-panel-style="modern"] .history-card,
html[data-panel-style="modern"] .sync-card,
html[data-panel-style="modern"] .commission-card,
html[data-panel-style="modern"] .import-card,
html[data-panel-style="modern"] .detail-card,
html[data-panel-style="modern"] .admin-tasks .panel,
html[data-panel-style="modern"] .admin-work .panel,
html[data-panel-style="modern"] .seller-panel,
html[data-panel-style="modern"] .cardx,
html[data-panel-style="modern"] .save-panel,
html[data-panel-style="modern"] .child-card,
html[data-panel-style="modern"] .r2-panel,
html[data-panel-style="modern"] .radar-panel,
html[data-panel-style="modern"] .radar-panel-card,
html[data-panel-style="modern"] .radar-analysis,
html[data-panel-style="modern"] .mode-card,
html[data-panel-style="modern"] .rs-card,
html[data-panel-style="modern"] .rs-kpi,
html[data-panel-style="modern"] .stat,
html[data-panel-style="modern"] .metric,
html[data-panel-style="modern"] .permission-grid label,
html[data-panel-style="modern"] .assignee-grid label,
html[data-panel-style="modern"] .rt-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, color-mix(in srgb, var(--style-panel) 96%, var(--style-accent-soft)), var(--style-panel)) !important;
    border: 1px solid color-mix(in srgb, var(--style-border) 82%, var(--style-accent)) !important;
    border-radius: var(--style-radius) !important;
    box-shadow: var(--style-shadow) !important;
    color: var(--style-text) !important;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
}
html[data-panel-style="modern"] .card:hover,
html[data-panel-style="modern"] .card-custom:hover,
html[data-panel-style="modern"] .queue-card:hover,
html[data-panel-style="modern"] .priority-card:hover,
html[data-panel-style="modern"] .history-card:hover,
html[data-panel-style="modern"] .sync-card:hover,
html[data-panel-style="modern"] .commission-card:hover,
html[data-panel-style="modern"] .import-card:hover,
html[data-panel-style="modern"] .detail-card:hover,
html[data-panel-style="modern"] .r2-panel:hover,
html[data-panel-style="modern"] .radar-panel:hover,
html[data-panel-style="modern"] .radar-panel-card:hover,
html[data-panel-style="modern"] .rs-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--style-shadow-strong) !important;
    border-color: var(--style-accent-border) !important;
}

html[data-panel-style="modern"] .card-header,
html[data-panel-style="modern"] .card-footer,
html[data-panel-style="modern"] .modal-header,
html[data-panel-style="modern"] .modal-footer,
html[data-panel-style="modern"] .rs-head,
html[data-panel-style="modern"] .radar-head,
html[data-panel-style="modern"] .r2-section {
    background: transparent !important;
    border-color: var(--style-border) !important;
}
html[data-panel-style="modern"] .card-header,
html[data-panel-style="modern"] .rs-head,
html[data-panel-style="modern"] .radar-head {
    padding: 18px 18px 14px;
}
html[data-panel-style="modern"] .card-header::before,
html[data-panel-style="modern"] .rs-head::before,
html[data-panel-style="modern"] .radar-head::before,
html[data-panel-style="modern"] .r2-section::before,
html[data-panel-style="modern"] .card-title::before,
html[data-panel-style="modern"] h1:not(.rt-card-title)::before {
    content: '';
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    display: inline-block;
    border-radius: 999px;
    margin-left: 8px;
    background: radial-gradient(circle, var(--style-accent), color-mix(in srgb, var(--style-accent) 55%, transparent));
    box-shadow: 0 0 0 4px var(--style-accent-soft);
    vertical-align: middle;
}
html[data-panel-style="modern"] .card-title,
html[data-panel-style="modern"] .rs-card h2,
html[data-panel-style="modern"] .radar-title,
html[data-panel-style="modern"] .r2-section,
html[data-panel-style="modern"] h1,
html[data-panel-style="modern"] h2,
html[data-panel-style="modern"] h3 {
    letter-spacing: -.25px;
}
html[data-panel-style="modern"] .card-text,
html[data-panel-style="modern"] .text-muted,
html[data-panel-style="modern"] .rs-meta,
html[data-panel-style="modern"] .rs-sub,
html[data-panel-style="modern"] .radar-sub,
html[data-panel-style="modern"] .r2-empty,
html[data-panel-style="modern"] .small { color: var(--style-muted) !important; }

html[data-panel-style="modern"] .form-control,
html[data-panel-style="modern"] .form-select,
html[data-panel-style="modern"] .input-group-text,
html[data-panel-style="modern"] textarea,
html[data-panel-style="modern"] .rt-select {
    background: color-mix(in srgb, var(--ui-input) 92%, transparent) !important;
    border: 1px solid var(--style-border) !important;
    border-radius: 12px !important;
    color: var(--style-text) !important;
    min-height: 40px;
    padding: 9px 12px;
}
html[data-panel-style="modern"] .form-control:hover,
html[data-panel-style="modern"] .form-select:hover,
html[data-panel-style="modern"] .rt-select:hover { border-color: var(--style-accent-border) !important; background: var(--style-accent-soft) !important; }
html[data-panel-style="modern"] .form-control:focus,
html[data-panel-style="modern"] .form-select:focus,
html[data-panel-style="modern"] textarea:focus {
    border-color: var(--style-accent) !important;
    box-shadow: 0 0 0 4px var(--style-accent-soft) !important;
}
html[data-panel-style="modern"] .form-label,
html[data-panel-style="modern"] label { color: var(--style-muted); font-weight: 650; }
html[data-panel-style="modern"] .form-check-input:checked { background-color: var(--style-accent); border-color: var(--style-accent); }

html[data-panel-style="modern"] .btn,
html[data-panel-style="modern"] .rt-btn {
    align-items: center;
    border-radius: 12px !important;
    display: inline-flex;
    font-weight: 750;
    gap: 7px;
    justify-content: center;
    min-height: 38px;
    padding: 9px 16px;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
html[data-panel-style="modern"] .btn:hover,
html[data-panel-style="modern"] .rt-btn:hover { transform: translateY(-1px); }
html[data-panel-style="modern"] .btn-primary,
html[data-panel-style="modern"] .btn-success,
html[data-panel-style="modern"] .rt-btn-primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--style-accent) 92%, white), var(--style-accent)) !important;
    border-color: transparent !important;
    color: var(--ui-accent-on) !important;
    box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--style-accent) 95%, black) !important;
}
html[data-panel-style="modern"] .btn-outline-primary,
html[data-panel-style="modern"] .btn-outline-info,
html[data-panel-style="modern"] .btn-outline-secondary,
html[data-panel-style="modern"] .btn-light,
html[data-panel-style="modern"] .rt-btn {
    background: transparent !important;
    border-color: var(--style-border) !important;
    color: var(--style-text) !important;
}
html[data-panel-style="modern"] .btn-outline-primary:hover,
html[data-panel-style="modern"] .btn-outline-info:hover,
html[data-panel-style="modern"] .btn-outline-secondary:hover,
html[data-panel-style="modern"] .rt-btn:hover { background: var(--style-accent-soft) !important; border-color: var(--style-accent-border) !important; }
html[data-panel-style="modern"] .btn-danger { border-color: transparent !important; }

html[data-panel-style="modern"] .badge,
html[data-panel-style="modern"] .rs-status,
html[data-panel-style="modern"] .radar-status,
html[data-panel-style="modern"] .rt-badge {
    border: 1px solid var(--style-accent-border);
    border-radius: 999px !important;
    background: var(--style-accent-soft) !important;
    color: var(--style-accent) !important;
    font-weight: 750;
    padding: 5px 10px;
}
html[data-panel-style="modern"] .alert,
html[data-panel-style="modern"] .rt-note {
    border-radius: 14px !important;
    border-width: 1px;
    box-shadow: 0 12px 30px -24px rgb(0 0 0 / 70%);
}

html[data-panel-style="modern"] .table-responsive {
    border: 1px solid var(--style-border);
    border-radius: var(--style-radius-sm);
    overflow: hidden;
    background: color-mix(in srgb, var(--style-panel) 94%, transparent);
}
html[data-panel-style="modern"] .table { margin-bottom: 0; }
html[data-panel-style="modern"] .table thead th {
    background: color-mix(in srgb, var(--style-panel-2) 82%, var(--style-accent-soft)) !important;
    color: var(--style-muted) !important;
    font-weight: 750;
}
html[data-panel-style="modern"] .table tbody tr:hover > * { background: var(--style-accent-soft) !important; }
html[data-panel-style="modern"] .pagination .page-link {
    background: var(--style-panel) !important;
    border-color: var(--style-border) !important;
    border-radius: 10px !important;
    color: var(--style-text) !important;
    margin: 0 2px;
}
html[data-panel-style="modern"] .pagination .active .page-link,
html[data-panel-style="modern"] .page-item.active .page-link { background: var(--style-accent) !important; color: var(--ui-accent-on) !important; }

html[data-panel-style="modern"] .rs-hero,
html[data-panel-style="modern"] .radar-hero,
html[data-panel-style="modern"] .r2-hero,
html[data-panel-style="modern"] .rt-wrap,
html[data-panel-style="modern"] .login-box {
    background: linear-gradient(180deg, color-mix(in srgb, var(--style-panel) 98%, var(--style-accent-soft)) 0%, var(--bg-body) 130%) !important;
    border: 1px solid var(--style-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--style-shadow-strong) !important;
    color: var(--style-text) !important;
}
html[data-panel-style="modern"] .rs-hero,
html[data-panel-style="modern"] .radar-hero,
html[data-panel-style="modern"] .r2-hero { padding: 22px !important; }
html[data-panel-style="modern"] .rs-hero-tile,
html[data-panel-style="modern"] .rt-tile {
    background: linear-gradient(140deg, var(--style-accent-soft), color-mix(in srgb, var(--style-accent) 14%, transparent)) !important;
    border: 1px solid var(--style-accent-border) !important;
    color: var(--style-accent) !important;
}
html[data-panel-style="modern"] .rs-kpis,
html[data-panel-style="modern"] .radar-kpis,
html[data-panel-style="modern"] .rt-kpis,
html[data-panel-style="modern"] .rt-roles,
html[data-panel-style="modern"] .mode-grid { gap: 12px !important; }
html[data-panel-style="modern"] .rs-form-grid,
html[data-panel-style="modern"] .compact-form,
html[data-panel-style="modern"] .rt-fields {
    background: color-mix(in srgb, var(--style-panel-2) 65%, transparent);
    border: 1px solid var(--style-border);
    border-radius: 14px;
    padding: 14px;
}
html[data-panel-style="modern"] .rs-explain,
html[data-panel-style="modern"] .schedule-row,
html[data-panel-style="modern"] .rt-scope,
html[data-panel-style="modern"] .rt-role,
html[data-panel-style="modern"] .rt-kpi,
html[data-panel-style="modern"] .detail-item,
html[data-panel-style="modern"] .details-panel,
html[data-panel-style="modern"] .raw-box,
html[data-panel-style="modern"] .list-group-item {
    background: color-mix(in srgb, var(--style-panel-2) 68%, transparent) !important;
    border: 1px solid var(--style-border) !important;
    border-radius: var(--style-radius-sm) !important;
    color: var(--style-text) !important;
}

@media (max-width: 767px) {
    .style-toggle span { display: none; }
    html[data-panel-style="modern"] .card,
    html[data-panel-style="modern"] .card-custom,
    html[data-panel-style="modern"] .queue-card,
    html[data-panel-style="modern"] .history-card,
    html[data-panel-style="modern"] .rs-card,
    html[data-panel-style="modern"] .radar-panel,
    html[data-panel-style="modern"] .r2-panel { border-radius: 14px !important; }
    html[data-panel-style="modern"] .btn,
    html[data-panel-style="modern"] .rt-btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-panel-style="modern"] * { transition-duration: .01ms !important; }
}