/*
 * Admin compatibility layer for the support portal skin.
 *
 * support-portal.css is loaded into admin pages to share the worker-portal
 * visual language. These rules keep the admin shell's wider layout intact.
 */

html.admin-shell-root,
body.admin-shell {
    color-scheme: light !important;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
}

body.admin-shell {
    --admin-page-max-width: 1400px;
    --admin-page-gutter: 30px;
    --admin-page-gutter-compact: 14px;
    --radius-sm: var(--admin-radius-sm, 8px);
    --radius-md: var(--admin-radius, 12px);
    --radius-lg: 16px;
    --radius-xl: 20px;
    margin: 0;
    padding: 0;
    overflow-x: visible;
    background: var(--admin-body-bg, linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%));
    color: var(--admin-text, #1e293b);
    font-family: var(--admin-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    line-height: 1.5;
}

body.admin-shell .container,
body.admin-shell #main-content:not(.login-card),
body.admin-shell > .container:not(#main-content),
body.admin-shell .admin-page,
body.admin-shell .cc-container,
body.admin-shell .audit-wrap,
body.admin-shell .mc-wrap,
body.admin-shell .ep-wrap {
    width: 100%;
    max-width: var(--admin-page-max-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box;
}

body.admin-shell .container,
body.admin-shell #main-content.container:not(.login-card),
body.admin-shell #main-content:not(.login-card) {
    padding: var(--admin-page-gutter) !important;
}

body.admin-shell .navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 10000;
    background: var(--admin-card-bg, #ffffff);
    border-bottom: 1px solid #dbe3ef;
    box-shadow: none;
}

body.admin-shell .navbar-container {
    max-width: var(--admin-page-max-width);
    padding-right: var(--admin-page-gutter);
    padding-left: var(--admin-page-gutter);
}

body.admin-shell .navbar .logout-btn {
    background: var(--admin-primary, #667eea);
    color: #ffffff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15) inset,
        0 6px 14px -6px rgba(102, 126, 234, 0.55);
}

body.admin-shell .navbar .logout-btn:hover {
    background: var(--admin-primary-strong, #4338ca);
    color: #ffffff;
}

body.admin-shell .admin-card,
body.admin-shell .fods-card,
body.admin-shell .cc-card,
body.admin-shell .cc-panel,
body.admin-shell .settings-panel,
body.admin-shell .contract-card,
body.admin-shell .contracts-section,
body.admin-shell .content-card,
body.admin-shell .qs-card,
body.admin-shell .exp-card,
body.admin-shell .metric-card,
body.admin-shell .stat-card,
body.admin-shell .stats-card,
body.admin-shell .dashboard-card,
body.admin-shell .queue-card,
body.admin-shell .filter-panel,
body.admin-shell .section,
body.admin-shell .panel,
body.admin-shell .section-card,
body.admin-shell .card {
    background: var(--bg-card, var(--admin-card-bg, #ffffff));
    border: 1px solid var(--border-subtle, var(--admin-border, #e2e8f0)) !important;
    border-radius: var(--radius-lg, 16px) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 10px 28px rgba(15, 23, 42, 0.04) !important;
}

body.admin-shell .admin-card:hover,
body.admin-shell .fods-card:hover,
body.admin-shell .cc-card:hover,
body.admin-shell .section-card:hover,
body.admin-shell .card:hover {
    border-color: var(--border-gold, #c7d2fe) !important;
}

body.admin-shell .page-header,
body.admin-shell .page-header.admin-page-header,
body.admin-shell .admin-page-header,
body.admin-shell .fods-page-header,
body.admin-shell .cc-header {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 24px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.admin-shell h1,
body.admin-shell .page-header h1,
body.admin-shell .admin-page-header h1,
body.admin-shell .fods-page-header h1,
body.admin-shell .cc-header h1 {
    color: var(--text-primary, #1e293b) !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
    margin: 0 0 6px !important;
}

body.admin-shell .page-subtitle,
body.admin-shell .admin-page-subtitle,
body.admin-shell .fods-page-header__subtitle,
body.admin-shell .cc-header-subtitle,
body.admin-shell .muted,
body.admin-shell .hint,
body.admin-shell .help-text {
    color: var(--text-muted, #475569) !important;
    font-size: 14px;
}

body.admin-shell .btn,
body.admin-shell button.btn,
body.admin-shell a.btn,
body.admin-shell .admin-btn,
body.admin-shell .cc-btn,
body.admin-shell .fods-button,
body.admin-shell input[type="submit"],
body.admin-shell button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    border-radius: var(--radius-sm, 8px) !important;
    border: 1px solid transparent !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all var(--transition, 0.2s ease) !important;
}

body.admin-shell .btn-primary,
body.admin-shell .btn-success,
body.admin-shell .btn-gold,
body.admin-shell .admin-btn--primary,
body.admin-shell .cc-btn-primary,
body.admin-shell .fods-button--primary {
    background: linear-gradient(135deg, var(--admin-primary, #667eea) 0%, var(--admin-primary-end, #764ba2) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.25) !important;
}

body.admin-shell .btn-primary:hover,
body.admin-shell .btn-success:hover,
body.admin-shell .btn-gold:hover,
body.admin-shell .admin-btn--primary:hover,
body.admin-shell .cc-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35) !important;
}

body.admin-shell .btn-secondary,
body.admin-shell .btn-outline,
body.admin-shell .admin-btn--secondary,
body.admin-shell .cc-btn-secondary,
body.admin-shell .fods-button--secondary {
    background: var(--bg-card, #ffffff) !important;
    color: var(--text-muted, #475569) !important;
    border-color: var(--border-subtle, #e2e8f0) !important;
    box-shadow: none !important;
}

body.admin-shell .btn-secondary:hover,
body.admin-shell .btn-outline:hover,
body.admin-shell .admin-btn--secondary:hover,
body.admin-shell .cc-btn-secondary:hover {
    background: var(--bg-card-hover, #f8fafc) !important;
    border-color: var(--border-gold-strong, #818cf8) !important;
    color: var(--admin-primary-strong, #4338ca) !important;
}

body.admin-shell .btn-danger,
body.admin-shell .admin-btn--danger,
body.admin-shell .cc-btn-danger {
    background: linear-gradient(135deg, var(--error, #ef4444) 0%, #dc2626 100%) !important;
    color: #ffffff !important;
}

body.admin-shell .btn-sm,
body.admin-shell .admin-btn--sm,
body.admin-shell .cc-btn-sm {
    padding: 6px 14px !important;
    font-size: 13px !important;
}

body.admin-shell .btn-xs,
body.admin-shell .cc-btn-xs {
    padding: 4px 10px !important;
    font-size: 12px !important;
}

body.admin-shell input[type="text"],
body.admin-shell input[type="email"],
body.admin-shell input[type="password"],
body.admin-shell input[type="number"],
body.admin-shell input[type="date"],
body.admin-shell input[type="time"],
body.admin-shell input[type="search"],
body.admin-shell input[type="url"],
body.admin-shell select,
body.admin-shell textarea,
body.admin-shell .form-input,
body.admin-shell .form-select,
body.admin-shell .admin-input,
body.admin-shell .cc-input {
    background: var(--bg-card, #ffffff) !important;
    color: var(--text-primary, #1e293b) !important;
    border: 1px solid var(--border-subtle, #e2e8f0) !important;
    border-radius: var(--radius-sm, 8px) !important;
    box-shadow: none !important;
}

body.admin-shell input:focus,
body.admin-shell select:focus,
body.admin-shell textarea:focus,
body.admin-shell .form-input:focus,
body.admin-shell .admin-input:focus,
body.admin-shell .cc-input:focus {
    border-color: var(--admin-primary, #667eea) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.14) !important;
}

body.admin-shell table {
    border-collapse: collapse;
    width: 100%;
    background: var(--bg-card, #ffffff);
}

body.admin-shell .admin-table-wrap,
body.admin-shell .table-container,
body.admin-shell .hours-table {
    background: var(--bg-card, #ffffff);
    border-color: var(--border-subtle, #e2e8f0);
    border-radius: var(--radius-md, 12px);
    overflow: auto;
}

body.admin-shell table th {
    color: var(--text-muted, #475569) !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-surface, #f8fafc) !important;
}

body.admin-shell table td,
body.admin-shell table th {
    border-color: var(--border-subtle, #e2e8f0) !important;
}

body.admin-shell .alert,
body.admin-shell .admin-alert,
body.admin-shell .cc-alert,
body.admin-shell .message {
    border-radius: var(--radius-sm, 8px) !important;
    border: 1px solid var(--border-subtle, #e2e8f0);
    box-shadow: none !important;
}

body.admin-shell .alert-success,
body.admin-shell .message.success {
    background: var(--success-bg, #d1fae5) !important;
    border-color: var(--success-border, #6ee7b7) !important;
    color: #065f46 !important;
}

body.admin-shell .alert-error,
body.admin-shell .alert-danger,
body.admin-shell .message.error {
    background: var(--error-bg, #fee2e2) !important;
    border-color: var(--error-border, #fecaca) !important;
    color: #991b1b !important;
}

body.admin-shell .alert-warning,
body.admin-shell .message.warning {
    background: var(--warning-bg, #fef3c7) !important;
    border-color: var(--warning-border, #fcd34d) !important;
    color: #92400e !important;
}

body.admin-shell .badge,
body.admin-shell .status-badge,
body.admin-shell .cc-status-pill,
body.admin-shell .fods-badge {
    border-radius: 999px !important;
    border: 1px solid transparent;
    font-weight: 700;
    letter-spacing: 0.01em;
}

body.admin-shell .modal,
body.admin-shell .cc-modal-backdrop {
    backdrop-filter: blur(4px);
}

body.admin-shell .modal-content,
body.admin-shell .modal-box,
body.admin-shell .settings-drawer,
body.admin-shell .cc-modal {
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-subtle, #e2e8f0) !important;
    border-radius: var(--radius-lg, 16px) !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18) !important;
}

body.admin-shell .dash-tabs,
body.admin-shell .tabs,
body.admin-shell .tab-nav,
body.admin-shell .settings-nav,
body.admin-shell .filters-row,
body.admin-shell .support-tabs {
    background: rgba(255, 255, 255, 0.56) !important;
    border: 1px solid var(--border-subtle, #e2e8f0) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body.admin-shell .dash-tabs__btn,
body.admin-shell .tab-btn,
body.admin-shell .sub-tab,
body.admin-shell .support-tab {
    border-radius: 10px !important;
    color: var(--text-muted, #475569) !important;
    font-weight: 600 !important;
}

body.admin-shell .dash-tabs__btn.is-active,
body.admin-shell .tab-btn.active,
body.admin-shell .sub-tab.active,
body.admin-shell .support-tab.active {
    background: var(--admin-primary, #667eea) !important;
    color: #ffffff !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15) inset,
        0 6px 14px -6px rgba(102, 126, 234, 0.55) !important;
}

body.admin-shell .content-card-header,
body.admin-shell .section-header,
body.admin-shell .card-header,
body.admin-shell .panel-header {
    border-bottom: 1px solid var(--border-subtle, #e2e8f0) !important;
    padding-bottom: 16px;
    margin-bottom: 20px;
}

body.admin-shell .content-card-header h2,
body.admin-shell .section-header h2,
body.admin-shell .card-header h2,
body.admin-shell .panel-header h2,
body.admin-shell .card-title {
    color: var(--text-primary, #1e293b) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

body.admin-shell .stat-label,
body.admin-shell .qs-label {
    color: var(--text-muted, #475569) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.admin-shell .stat-value,
body.admin-shell .qs-value {
    color: var(--admin-primary, #667eea) !important;
    font-weight: 800 !important;
}

/* Portal surface filters (support-portal.css): beat generic admin-shell inputs / filter-row pill */
body.admin-shell .portal-surface-filters .filters-row {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.admin-shell .portal-surface-filters input[type="text"],
body.admin-shell .portal-surface-filters input[type="search"],
body.admin-shell .portal-surface-filters select {
    background: var(--portal-filter-control-bg, #f1f3f5) !important;
    color: var(--text-primary, #1e293b) !important;
    border: none !important;
    border-radius: var(--portal-filter-control-radius, 10px) !important;
    box-shadow: none !important;
    min-height: var(--portal-filter-control-height, 40px);
    padding: 0 12px !important;
    font-size: 13px !important;
    font-family: inherit !important;
}

body.admin-shell .portal-surface-filters input:focus,
body.admin-shell .portal-surface-filters select:focus {
    border: none !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.22) !important;
    background: #ffffff !important;
}

body.admin-shell .portal-surface-filters .btn,
body.admin-shell .portal-surface-filters a.btn,
body.admin-shell .portal-surface-filters button[type="submit"] {
    padding: 0 14px !important;
    min-height: var(--portal-filter-control-height, 40px) !important;
    border-radius: var(--portal-filter-control-radius, 10px) !important;
    border: none !important;
    font-size: 13px !important;
    transform: none !important;
    box-shadow: none !important;
}

body.admin-shell .portal-surface-filters .btn-secondary,
body.admin-shell .portal-surface-filters a.btn-secondary {
    background: var(--portal-filter-control-bg, #f1f3f5) !important;
    color: var(--text-muted, #475569) !important;
    border: none !important;
}

body.admin-shell .portal-surface-filters .btn-secondary:hover,
body.admin-shell .portal-surface-filters a.btn-secondary:hover {
    background: #e8eaed !important;
    color: var(--text-primary, #1e293b) !important;
    border: none !important;
    transform: none !important;
}

@media (max-width: 1280px) {
    body.admin-shell .container,
    body.admin-shell #main-content.container:not(.login-card),
    body.admin-shell #main-content:not(.login-card) {
        padding: 20px var(--admin-page-gutter-compact) !important;
    }

    body.admin-shell .navbar-container {
        padding-right: var(--admin-page-gutter-compact);
        padding-left: var(--admin-page-gutter-compact);
    }
}