/* ======================================================
   RADIO LOJA ADMIN - PREMIUM UI SYSTEM
   Base visual unificada (light/dark) inspirada em macOS
   com foco em legibilidade e performance.
   ====================================================== */

:root {
    --premium-font-ui: "Instrument Sans", "Plus Jakarta Sans", "Manrope", "Segoe UI", sans-serif;

    --premium-radius-xs: 10px;
    --premium-radius-sm: 14px;
    --premium-radius-md: 18px;
    --premium-radius-lg: 24px;

    --premium-surface: var(--card-bg-color);
    --premium-surface-strong: var(--card-bg-color);
    --premium-surface-muted: var(--input-bg-color);
    --premium-stroke: var(--border-color-light);
    --premium-stroke-soft: var(--border-color-medium);

    --premium-text: var(--text-color-primary);
    --premium-text-soft: var(--text-color-secondary);
    --premium-text-muted: var(--text-color-placeholder);

    --premium-brand: #3b4558;
    --premium-brand-hover: #30394a;

    --premium-shadow-sm: 0 4px 16px var(--shadow-color);
    --premium-shadow-md: 0 6px 20px var(--shadow-hover-color);
    --premium-shadow-lg: 0 10px 28px var(--shadow-hover-color);

    --premium-bg-gradient: linear-gradient(180deg, transparent, transparent);

    --premium-bg-texture:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0px, rgba(255, 255, 255, 0.14) 1px, transparent 1px, transparent 8px),
        repeating-linear-gradient(0deg, rgba(32, 45, 69, 0.035) 0px, rgba(32, 45, 69, 0.035) 1px, transparent 1px, transparent 4px);

    /* Superficie canônica de paineis/cartoes (referência: group-section de músicas) */
    --panel-surface-bg: linear-gradient(110deg, rgba(255, 255, 255, 0.08), transparent 48%), var(--premium-surface);
    --panel-surface-border-color: var(--premium-stroke);
    --panel-surface-radius: var(--premium-radius-md);
    --panel-surface-shadow: var(--premium-shadow-sm);
}

html.dark-theme {
    --premium-surface: var(--card-bg-color);
    --premium-surface-strong: var(--card-bg-color);
    --premium-surface-muted: var(--input-bg-color);
    --premium-stroke: var(--border-color-light);
    --premium-stroke-soft: var(--border-color-medium);

    --premium-text: var(--text-color-primary);
    --premium-text-soft: var(--text-color-secondary);
    --premium-text-muted: var(--text-color-placeholder);

    --premium-brand: #d9d9d9;
    --premium-brand-hover: #f2f2f2;

    --premium-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.3);
    --premium-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
    --premium-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.45);

    --premium-bg-gradient: linear-gradient(180deg, transparent, transparent);

    --premium-bg-texture:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0px, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 7px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 4px);

    --panel-surface-bg: linear-gradient(108deg, rgba(255, 255, 255, 0.03), transparent 55%), var(--premium-surface-muted);
    --panel-surface-border-color: var(--premium-stroke);
    --panel-surface-radius: var(--premium-radius-md);
    --panel-surface-shadow: var(--premium-shadow-sm);
}

html,
body {
    font-family: var(--premium-font-ui);
    color: var(--premium-text);
    letter-spacing: 0.01em;
}

body::before {
    background: var(--premium-bg-gradient) !important;
    animation: none !important;
}

html:not(.dark-theme) body {
    background-color: #d2dae5 !important;
}

body::after {
    background-image: var(--premium-bg-texture) !important;
    background-size: 220px 220px, 120px 120px !important;
    opacity: 0.36 !important;
    animation: none !important;
}

html.dark-theme body::after {
    opacity: 0.5 !important;
}

.admin-header {
    background: var(--premium-surface-strong) !important;
    border-bottom: 1px solid var(--premium-stroke) !important;
    box-shadow: var(--premium-shadow-sm) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}

.admin-header::before {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.34) 48%, transparent 100%) !important;
    opacity: 0.32 !important;
}

.header-logo-title span {
    color: var(--premium-text) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.header-main-row {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
}

.header-main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    width: 100% !important;
    min-width: 0;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.header-main-nav::-webkit-scrollbar {
    display: none;
}

.header-main-nav .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
}

.user-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.nav-link {
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    color: var(--premium-text-soft) !important;
    background: transparent !important;
}

.nav-link:hover {
    background: var(--premium-surface-muted) !important;
    border-color: var(--premium-stroke-soft) !important;
    color: var(--premium-text) !important;
}

.nav-link.active {
    background: linear-gradient(145deg, rgba(110, 110, 110, 0.95), rgba(84, 84, 84, 0.95)) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #f6f6f6 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 22px rgba(24, 30, 44, 0.2) !important;
}

html.dark-theme .nav-link.active {
    background: linear-gradient(145deg, rgba(181, 181, 181, 0.95), rgba(143, 143, 143, 0.95)) !important;
    color: #2e2e2e !important;
}

.theme-toggle,
.user-actions button:not(.theme-toggle) {
    border-radius: 12px !important;
    border: 1px solid var(--premium-stroke-soft) !important;
    box-shadow: none !important;
}

.theme-toggle {
    background: var(--premium-surface) !important;
    color: var(--premium-text-soft) !important;
}

.theme-toggle:hover {
    background: var(--premium-surface-muted) !important;
    color: var(--premium-text) !important;
}

.mobile-menu-toggle,
.mobile-header-menu {
    display: none;
}

.user-actions button:not(.theme-toggle) {
    background: var(--premium-surface-muted) !important;
    color: #e05151 !important;
}

.user-actions button:not(.theme-toggle):hover {
    background: #d85151 !important;
    color: #ffffff !important;
}

.main-content-wrapper {
    padding-top: clamp(1.2rem, 2.4vw, 2.2rem) !important;
}

.main-content-wrapper > .monitoring-page,
.main-content-wrapper > .clientes-page,
.main-content-wrapper > .produtores-page,
.main-content-wrapper > .linkads-page,
.main-content-wrapper > .page-container {
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.page-header-panel,
.content-header,
.card-standard,
.card-form,
.form-container,
.cliente-card,
.produtor-card,
.music-card,
.card-table,
.modal-content-premium,
.modal-card,
.modal-content,
.modal-container,
.modal-content-premium,
.token-popover-content,
.swal2-popup,
.audio-item,
.music-card-premium,
.produtor-card-premium {
    background: var(--premium-surface) !important;
    border: 0.5px solid var(--premium-stroke) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--premium-shadow-sm) !important;
    backdrop-filter: saturate(140%) blur(calc(var(--backdrop-blur) / 1.1)) !important;
    -webkit-backdrop-filter: saturate(140%) blur(calc(var(--backdrop-blur) / 1.1)) !important;
}

.page-header-panel:hover,
.content-header:hover,
.card-standard:hover,
.card-form:hover,
.cliente-card:hover,
.produtor-card:hover,
.music-card:hover,
.card-table:hover {
    box-shadow: var(--premium-shadow-md) !important;
    border-color: var(--border-color-medium) !important;
    transform: translateY(-1px) !important;
}

.panel-header,
.client-accordion-content,
.modal-header,
.token-popover-header,
.swal2-title {
    border-bottom: 0.5px solid var(--premium-stroke-soft) !important;
}

.admin-footer {
    margin-top: clamp(1.4rem, 2.8vw, 2.5rem) !important;
    border-top: 1px solid var(--premium-stroke-soft) !important;
    color: var(--premium-text-soft) !important;
}

.page-title,
.content-header h2,
.panel-header h2,
.data-panel-title,
.form-section-title,
.cliente-company-name,
.produtor-company-name,
.metric-value {
    color: var(--premium-text) !important;
    letter-spacing: -0.01em;
}

.page-subtitle,
.panel-note,
.metric-label,
.form-group label,
.send-app-hint,
.store-cell small,
.client-cell small,
.swal2-html-container,
.swal2-input::placeholder,
.audio-item-subtitle {
    color: var(--premium-text-soft) !important;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group select,
.form-group textarea,
.field input,
.field select,
.swal2-input,
input[type="search"],
input[type="url"] {
    background: var(--premium-surface-muted) !important;
    color: var(--premium-text) !important;
    border: 1px solid var(--premium-stroke-soft) !important;
    border-radius: var(--premium-radius-sm) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.field input:focus,
.field select:focus,
.swal2-input:focus,
input[type="search"]:focus,
input[type="url"]:focus {
    border-color: rgba(110, 110, 110, 0.62) !important;
    box-shadow: 0 0 0 3px rgba(110, 110, 110, 0.2) !important;
}

.btn-base,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-submit,
.btn-cancel,
.btn-add,
.btn-info,
.btn-glass,
.btn-send-app,
.btn-send-option,
.btn-clear,
.btn-apply,
.token-copy-btn,
.token-copy-btn-compact,
.btn-action,
.btn-reset,
button[type="submit"] {
    border-radius: var(--premium-radius-sm) !important;
    font-weight: 650 !important;
    letter-spacing: 0.01em;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease !important;
}

.btn-primary,
.btn-add,
.btn-info,
.btn-submit,
.btn-glass.btn-premium-primary,
.btn-apply {
    background: linear-gradient(145deg, rgba(109, 114, 122, 0.96), rgba(86, 92, 100, 0.96)) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #f5f7fb !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(19, 27, 40, 0.22) !important;
}

html.dark-theme .btn-primary,
html.dark-theme .btn-add,
html.dark-theme .btn-info,
html.dark-theme .btn-submit,
html.dark-theme .btn-glass.btn-premium-primary,
html.dark-theme .btn-apply {
    background: linear-gradient(145deg, rgba(122, 122, 122, 0.96), rgba(98, 98, 98, 0.96)) !important;
    border: 1px solid rgba(220, 220, 220, 0.24) !important;
    color: #1f1f1f !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 22px rgba(0, 0, 0, 0.3) !important;
}

.btn-primary:hover,
.btn-add:hover,
.btn-info:hover,
.btn-submit:hover,
.btn-glass.btn-premium-primary:hover,
.btn-apply:hover {
    transform: translateY(-1px) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 12px 24px rgba(19, 27, 40, 0.28) !important;
}

html.dark-theme .btn-primary:hover,
html.dark-theme .btn-add:hover,
html.dark-theme .btn-info:hover,
html.dark-theme .btn-submit:hover,
html.dark-theme .btn-glass.btn-premium-primary:hover,
html.dark-theme .btn-apply:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 14px 28px rgba(0, 0, 0, 0.38) !important;
}

.btn-secondary,
.btn-cancel,
.btn-clear,
.btn-reset,
.btn-action {
    background: var(--premium-surface-muted) !important;
    border: 1px solid var(--premium-stroke-soft) !important;
    color: var(--premium-text) !important;
    box-shadow: none !important;
}

.btn-secondary:hover,
.btn-cancel:hover,
.btn-clear:hover,
.btn-reset:hover,
.btn-action:hover {
    background: var(--premium-surface-strong) !important;
    border-color: var(--premium-stroke) !important;
    transform: translateY(-1px) !important;
}

.btn-send-option.whatsapp {
    background: rgba(57, 174, 120, 0.18) !important;
    border-color: rgba(57, 174, 120, 0.42) !important;
    color: #1e8f61 !important;
}

.btn-send-option.email {
    background: rgba(96, 109, 130, 0.18) !important;
    border-color: rgba(96, 109, 130, 0.42) !important;
    color: #4a566d !important;
}

html.dark-theme .btn-send-option.whatsapp {
    color: #84d6ad !important;
}

html.dark-theme .btn-send-option.email {
    color: #d2d7e1 !important;
}

.monitor-table,
table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.monitor-table th,
.monitor-table td,
table th,
table td {
    border-bottom: 1px solid var(--premium-stroke-soft) !important;
    color: var(--premium-text) !important;
}

.monitor-table th,
table th {
    color: var(--premium-text-soft) !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.08em !important;
}

.table-wrap,
.table-responsive-wrapper {
    border-radius: var(--premium-radius-sm);
}

.store-cell strong,
.client-cell strong,
.mono {
    color: var(--premium-text) !important;
}

.status-badge,
.plan-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.38rem !important;
    padding: 0.34rem 0.72rem !important;
    border-radius: 999px !important;
    border-style: solid !important;
    border-width: 1px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.status-online {
    color: var(--status-online-accent) !important;
}

.status-paused {
    color: var(--status-paused-accent) !important;
}

.status-offline {
    color: var(--status-offline-accent) !important;
}

.status-ativo,
.status-online {
    background: var(--color-green-light) !important;
    border-color: var(--color-green-border) !important;
}

.status-pendente,
.status-paused {
    background: var(--color-orange-light) !important;
    border-color: var(--color-orange-border) !important;
}

.status-inativo,
.status-offline {
    background: var(--color-red-light) !important;
    border-color: var(--color-red-border) !important;
}

.plan-badge {
    background: var(--color-navy-light) !important;
    border-color: var(--color-navy-border) !important;
    color: var(--color-navy) !important;
}

html.dark-theme .plan-badge {
    color: #eceff4 !important;
}

.modal-overlay,
#upload-modal-overlay,
.token-popover-overlay,
.swal2-backdrop-show {
    background: rgba(47, 53, 63, 0.36) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.token-popover {
    border-radius: var(--premium-radius-md) !important;
}

html.dark-theme .modal-overlay,
html.dark-theme #upload-modal-overlay,
html.dark-theme .token-popover-overlay,
html.dark-theme .swal2-backdrop-show {
    background: rgba(30, 30, 30, 0.66) !important;
}

#toast-container .toast,
.toast {
    background: var(--premium-surface-strong) !important;
    border: 1px solid var(--premium-stroke) !important;
    border-radius: var(--premium-radius-sm) !important;
    box-shadow: var(--premium-shadow-md) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
}

.toast-message {
    color: var(--premium-text) !important;
}

.toast-close:hover {
    background: var(--premium-surface-muted) !important;
}

.pwa-tooltip,
.tooltip,
[role="tooltip"] {
    background: var(--premium-surface-strong) !important;
    color: var(--premium-text) !important;
    border: 1px solid var(--premium-stroke-soft) !important;
    box-shadow: var(--premium-shadow-sm) !important;
}

.pwa-tooltip::after {
    border-color: var(--premium-surface-strong) transparent transparent transparent !important;
}

.send-app-toggle,
.stat-item,
.chart-placeholder,
.music-insert-panel,
.weekday-btn {
    border-radius: var(--premium-radius-sm) !important;
    border-color: var(--premium-stroke-soft) !important;
}

.weekdays-container .weekday-btn.active,
.weekday-btn.active {
    background: linear-gradient(145deg, rgba(109, 114, 122, 0.96), rgba(86, 92, 100, 0.96)) !important;
    color: #f7f8fb !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

html.dark-theme .weekdays-container .weekday-btn.active,
html.dark-theme .weekday-btn.active {
    background: linear-gradient(145deg, rgba(206, 212, 224, 0.94), rgba(172, 179, 195, 0.94)) !important;
    color: #10141d !important;
}

.token-popover-content code,
code,
pre {
    background: var(--premium-surface-muted) !important;
    border: 1px solid var(--premium-stroke-soft) !important;
    color: var(--premium-text) !important;
}

/* ======================================================
   IDENTIDADE DE HEADERS E GRIDS (CLIENTES/PRODUTORES/MÚSICAS)
   ====================================================== */

.unified-control-panel {
    background: var(--premium-surface) !important;
    border-radius: var(--border-radius) !important;
    border: 0.5px solid var(--premium-stroke) !important;
    box-shadow: var(--premium-shadow-sm) !important;
    backdrop-filter: saturate(140%) blur(calc(var(--backdrop-blur) / 1.1)) !important;
    -webkit-backdrop-filter: saturate(140%) blur(calc(var(--backdrop-blur) / 1.1)) !important;
}

html.dark-theme .unified-control-panel {
    background: var(--premium-surface) !important;
}

.unified-control-panel h1 {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--premium-text) !important;
    font-size: clamp(1.52rem, 2.1vw, 1.9rem) !important;
    font-weight: 780 !important;
    letter-spacing: -0.02em !important;
}

.unified-control-panel > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(300px, 1fr) auto !important;
    align-items: center !important;
    gap: 0.8rem !important;
    margin-bottom: 1.1rem !important;
    padding-bottom: 1.1rem !important;
    border-bottom: 0.5px solid var(--premium-stroke-soft) !important;
}

.unified-control-panel > div:first-child > div:last-child {
    display: flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    overflow-x: auto;
}

.unified-control-panel > div:first-child > div:first-child {
    min-width: 0 !important;
}

.unified-control-panel > div:first-child > div:last-child > * {
    flex-shrink: 0;
}

.unified-control-panel .live-status-badge {
    background: var(--premium-surface-muted) !important;
    border: 0.5px solid var(--premium-stroke-soft) !important;
    border-radius: var(--border-radius) !important;
    padding: 0.62rem 1rem !important;
    min-width: 128px;
}

.unified-control-panel .status-pulse {
    background: #ff8a1e !important;
}

.unified-control-panel #filter-form {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) repeat(2, minmax(150px, 180px)) auto !important;
    gap: 0.68rem !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.unified-control-panel #filter-form > div {
    min-width: 0 !important;
}

.unified-control-panel #filter-form input,
.unified-control-panel #filter-form select {
    background: var(--premium-surface-muted) !important;
    border-color: var(--premium-stroke-soft) !important;
    color: var(--premium-text) !important;
    border-radius: var(--border-radius) !important;
}

.unified-control-panel .btn-glass,
.unified-control-panel .btn-premium-secondary {
    height: 44px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
}

.clientes-grid-container,
.produtores-grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important;
    gap: 1rem !important;
}

.cliente-card,
.produtor-card {
    background: var(--premium-surface) !important;
    min-height: 230px;
}

html.dark-theme .cliente-card,
html.dark-theme .produtor-card {
    background: var(--premium-surface) !important;
}

.cliente-card-header,
.produtor-card-header {
    padding-bottom: 1rem !important;
    border-bottom: 0.5px solid var(--premium-stroke-soft) !important;
}

.cliente-card-footer,
.produtor-card-footer {
    gap: 0.72rem !important;
}

.page-container > .content-header {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) auto !important;
    align-items: center !important;
    gap: 0.8rem !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
}

.page-container > .content-header .header-title {
    display: flex !important;
    align-items: center !important;
    gap: 0.68rem !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
}

.page-container > .content-header .header-title h2 {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-container > .content-header .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.58rem !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
}

.page-container > .content-header .header-actions > * {
    flex-shrink: 0;
}

.page-container > .content-header .badge-total {
    flex-shrink: 0;
}

.page-container > .content-header .header-actions .btn-glass,
.page-container > .content-header .header-actions .btn-gradient-primary {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 0.82rem !important;
    padding: 0.5rem 0.85rem !important;
    white-space: nowrap !important;
}

.control-bar {
    overflow-x: visible;
}

.control-bar .premium-filters,
.control-bar #filter-sort-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(140px, 1fr)) auto !important;
    align-items: end !important;
    gap: 0.65rem !important;
    min-width: 0 !important;
    width: 100% !important;
}

.music-groups-container .group-section {
    background: var(--panel-surface-bg) !important;
    border: 1px solid var(--panel-surface-border-color) !important;
    border-radius: var(--panel-surface-radius) !important;
    box-shadow: var(--panel-surface-shadow) !important;
}

.music-groups-container .compact-grid {
    gap: 0.68rem !important;
}

.music-groups-container .micro-card {
    border-radius: var(--premium-radius-sm) !important;
    border: 1px solid var(--premium-stroke-soft) !important;
    background: linear-gradient(108deg, rgba(255, 255, 255, 0.08), transparent 55%), var(--premium-surface-muted) !important;
}

html.dark-theme .music-groups-container .group-section,
html.dark-theme .music-groups-container .micro-card {
    background: var(--panel-surface-bg) !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

@media (max-width: 1000px) {
    .main-content-wrapper {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .content-header,
    .page-header-panel {
        padding: 1rem 1rem !important;
        border-radius: 16px !important;
    }

    .admin-header {
        padding: 0.9rem 1rem !important;
    }

    .user-actions,
    .header-main-nav {
        display: none !important;
    }

    .header-main-row {
        grid-template-columns: 1fr auto;
        gap: 0.5rem;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid var(--premium-stroke-soft);
        background: var(--premium-surface-muted);
        color: var(--premium-text);
        cursor: pointer;
        margin-left: 0;
    }

    .mobile-menu-toggle i {
        font-size: 1rem;
    }

    .mobile-header-menu {
        display: grid;
        gap: 0.75rem;
        margin-top: 0.85rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--premium-stroke-soft);
    }

    .mobile-header-menu[hidden] {
        display: none !important;
    }

    .mobile-main-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .mobile-main-nav .nav-link {
        min-height: 42px;
        justify-content: flex-start;
    }

    .mobile-menu-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .mobile-menu-actions .theme-toggle,
    .mobile-menu-actions .mobile-logout-btn {
        width: 100%;
        min-height: 40px;
        border-radius: 12px;
        border: 1px solid var(--premium-stroke-soft);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
    }

    .mobile-menu-actions .theme-toggle {
        background: var(--premium-surface);
        color: var(--premium-text);
        position: relative;
        min-width: 0;
    }

    .mobile-menu-actions .theme-toggle i {
        position: static;
        transform: none;
        width: auto;
        height: auto;
    }

    .mobile-menu-actions .mobile-logout-btn {
        background: var(--premium-surface-muted);
        color: #e05151;
    }

    .mobile-menu-actions .mobile-logout-btn:hover {
        background: #d85151;
        color: #ffffff;
    }

    .unified-control-panel > div:first-child {
        grid-template-columns: 1fr !important;
    }

    .unified-control-panel #filter-form {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .page-container > .content-header {
        grid-template-columns: 1fr !important;
    }

    .page-container > .content-header .header-actions {
        flex-wrap: wrap !important;
    }

    .control-bar .premium-filters,
    .control-bar #filter-sort-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .control-bar .premium-filters,
    .control-bar #filter-sort-form {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}