/* Test/staging environment — green theme (production stays blue) */
html[data-env="staging"] {
    --ui-brand: #059669;
    --ui-brand-dark: #047857;
    --ui-brand-soft: #ecfdf5;
    --staging-brand: #059669;
    --staging-brand-dark: #047857;
    --staging-brand-light: #10b981;
    --staging-brand-soft: #ecfdf5;
    --staging-gradient: linear-gradient(135deg, #059669 0%, #10b981 48%, #047857 100%);
    --staging-gradient-btn: linear-gradient(135deg, #059669 0%, #047857 100%);
    --staging-gradient-soft: linear-gradient(145deg, #059669 0%, #10b981 45%, #047857 100%);
    --staging-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
    --staging-shadow-lg: 0 8px 24px rgba(5, 150, 105, 0.28);
    --color-brand-500: #059669;
    --color-brand-600: #047857;
}

/* Top banner */
html[data-env="staging"] .modern-staging-banner {
    background: linear-gradient(90deg, #047857 0%, #059669 50%, #047857 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
    letter-spacing: 0.08em;
}

html[data-env="staging"] body > .flex.min-h-screen {
    padding-top: 1.75rem;
}

/* Public / login */
html[data-env="staging"] .modern-brand-panel {
    background: var(--staging-gradient-soft);
}

html[data-env="staging"] .modern-btn-primary,
html[data-env="staging"] .modern-btn {
    background: var(--staging-gradient-btn);
}

html[data-env="staging"] .modern-input:focus,
html[data-env="staging"] .modern-select:focus,
html[data-env="staging"] .modern-textarea:focus {
    border-color: var(--staging-brand);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

/* Tailwind utility overrides */
html[data-env="staging"] .bg-blue-500,
html[data-env="staging"] .bg-brand-500 {
    background-color: var(--staging-brand) !important;
}

html[data-env="staging"] .bg-blue-600,
html[data-env="staging"] .hover\:bg-blue-700:hover,
html[data-env="staging"] .dark\:bg-blue-700,
html[data-env="staging"] .dark\:hover\:bg-blue-800:hover {
    background-color: var(--staging-brand) !important;
}

html[data-env="staging"] .hover\:bg-blue-700:hover,
html[data-env="staging"] .dark\:hover\:bg-blue-800:hover {
    background-color: var(--staging-brand-dark) !important;
}

html[data-env="staging"] .text-blue-600:not(.bg-blue-500),
html[data-env="staging"] .text-blue-800:not(.bg-blue-500),
html[data-env="staging"] .text-blue-400:not(.bg-blue-500),
html[data-env="staging"] .dark\:text-blue-400:not(.bg-blue-500),
html[data-env="staging"] .text-brand-500:not(.bg-brand-500),
html[data-env="staging"] .text-brand-600:not(.bg-brand-500) {
    color: var(--staging-brand) !important;
    background: none !important;
    background-color: transparent !important;
}

html[data-env="staging"] .hover\:text-blue-800:hover,
html[data-env="staging"] .hover\:text-blue-600:hover,
html[data-env="staging"] .hover\:text-brand-600:hover {
    color: var(--staging-brand-dark) !important;
}

/* Desktop sidebar active item — match production solid pill (blue → green), white label */
@media (min-width: 1280px) {
    html[data-env="staging"] .sidebar nav a.bg-blue-500,
    html[data-env="staging"] .sidebar nav button.bg-blue-500 {
        background-color: var(--staging-brand) !important;
        color: #ffffff !important;
    }

    html[data-env="staging"] .sidebar nav a.bg-blue-500 span,
    html[data-env="staging"] .sidebar nav a.bg-blue-500 svg,
    html[data-env="staging"] .sidebar nav button.bg-blue-500 span,
    html[data-env="staging"] .sidebar nav button.bg-blue-500 svg,
    html[data-env="staging"] .sidebar nav a.bg-blue-500 .text-white,
    html[data-env="staging"] .sidebar nav a.bg-blue-500 .text-blue-600,
    html[data-env="staging"] .sidebar nav button.bg-blue-500 .text-white,
    html[data-env="staging"] .sidebar nav button.bg-blue-500 .text-blue-600 {
        color: #ffffff !important;
    }
}

html[data-env="staging"] .from-blue-500 {
    --tw-gradient-from: var(--staging-brand) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

html[data-env="staging"] .to-indigo-600 {
    --tw-gradient-to: var(--staging-brand-dark) var(--tw-gradient-to-position);
}

html[data-env="staging"] .bg-blue-50,
html[data-env="staging"] .hover\:bg-blue-50:hover,
html[data-env="staging"] .focus\:bg-blue-50:focus,
html[data-env="staging"] .bg-brand-100,
html[data-env="staging"] .bg-blue-100 {
    background-color: var(--staging-brand-soft) !important;
}

html[data-env="staging"] .border-blue-200,
html[data-env="staging"] .border-blue-500 {
    border-color: #a7f3d0 !important;
}

html[data-env="staging"] .text-brand-800,
html[data-env="staging"] .dark\:text-brand-500 {
    color: var(--staging-brand-dark) !important;
}

html[data-env="staging"] .focus\:ring-blue-500:focus,
html[data-env="staging"] .focus\:ring-brand-500\/20:focus {
    --tw-ring-color: rgba(5, 150, 105, 0.25) !important;
}

html[data-env="staging"] .focus\:border-blue-500:focus,
html[data-env="staging"] .focus\:border-brand-300:focus {
    border-color: var(--staging-brand) !important;
}

html[data-env="staging"] .border-blue-600 {
    border-color: var(--staging-brand) !important;
}

/* Admin shell */
html[data-env="staging"] .admin-content {
    --app-brand: #059669;
    --app-brand-soft: #ecfdf5;
    --dash-brand: #059669;
    --dash-brand-soft: #ecfdf5;
}

html[data-env="staging"] #dashboard-content a.dash-link {
    display: inline !important;
    color: var(--staging-brand) !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

html[data-env="staging"] .admin-content .app-hero,
html[data-env="staging"] #dashboard-content .dash-hero {
    background: var(--staging-gradient) !important;
    box-shadow: var(--staging-shadow-lg) !important;
}

html[data-env="staging"] .admin-content .app-action-btn--view {
    color: #059669 !important;
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
}

html[data-env="staging"] .admin-content .app-action-btn--edit {
    color: #047857 !important;
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
}

html[data-env="staging"] .app-permissions-drawer__header,
html[data-env="staging"] .app-drawer-header {
    background: var(--staging-gradient) !important;
}

html[data-env="staging"] .app-permissions-drawer__pill {
    color: #059669 !important;
    background: #ecfdf5 !important;
}

html[data-env="staging"] .app-mobile-header {
    background-color: #ffffff !important;
}

html[data-env="staging"] .app-pull-refresh__spinner {
    border-top-color: #059669 !important;
}

html[data-env="staging"] .app-pull-refresh--ready .app-pull-refresh__spinner {
    border-top-color: #047857 !important;
}

html[data-env="staging"] .app-pull-refresh--ready .app-pull-refresh__label {
    color: #059669 !important;
}

html[data-env="staging"] .menu-item-active {
    background-color: #059669 !important;
}

html[data-env="staging"] #dashboard-content .dash-stat-card--brand {
    background: var(--staging-gradient) !important;
}

html[data-env="staging"] .admin-content a.bg-blue-600,
html[data-env="staging"] .admin-content button.bg-blue-600,
html[data-env="staging"] .admin-content .bg-blue-600,
html[data-env="staging"] .admin-content .app-btn-primary,
html[data-env="staging"] .admin-content .page-header a[class*="bg-blue"] {
    background: var(--staging-gradient-btn) !important;
    box-shadow: var(--staging-shadow) !important;
}

html[data-env="staging"] input:focus,
html[data-env="staging"] select:focus,
html[data-env="staging"] textarea:focus {
    border-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12) !important;
}

html[data-env="staging"] .date-input-wrapper:hover .date-input-icon {
    color: #059669 !important;
}

html[data-env="staging"] .admin-content .app-badge--info,
html[data-env="staging"] .admin-content .dash-badge--default,
html[data-env="staging"] .admin-content .bg-blue-100.text-blue-800,
html[data-env="staging"] .admin-content .bg-indigo-100.text-indigo-800 {
    background: #ecfdf5 !important;
    color: #047857 !important;
}

html[data-env="staging"] .admin-content .text-blue-600,
html[data-env="staging"] .admin-content a.text-blue-600 {
    color: #059669 !important;
}

html[data-env="staging"] .admin-content .app-detail-action--primary .app-detail-action__icon {
    background: #ecfdf5 !important;
    color: #059669 !important;
}

html[data-env="staging"] .admin-content .app-detail-action--indigo .app-detail-action__icon {
    background: #ecfdf5 !important;
    color: #047857 !important;
}

/* Mobile tab bar + FAB */
html[data-env="staging"] .app-tab-bar__item--active,
html[data-env="staging"] .app-header-menu-btn--active {
    color: #059669 !important;
}

html[data-env="staging"] .app-tab-bar__item--active .app-tab-bar__icon-wrap,
html[data-env="staging"] .app-header-menu-btn--active .app-tab-bar__icon-wrap {
    background: rgba(5, 150, 105, 0.12) !important;
}

html[data-env="staging"] .app-tab-bar__fab {
    background: var(--staging-gradient-btn) !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.4) !important;
}

/* Mobile drawer sidebar — overrides layout.blade.php inline blues */
@media (max-width: 1279px) {
    html[data-env="staging"] .admin-mobile-sidebar nav a.bg-blue-500,
    html[data-env="staging"] .admin-mobile-sidebar nav button.bg-blue-500 {
        background: rgba(5, 150, 105, 0.12) !important;
        color: #059669 !important;
    }

    html[data-env="staging"] .admin-mobile-sidebar nav a.bg-blue-500 span,
    html[data-env="staging"] .admin-mobile-sidebar nav a.bg-blue-500 svg,
    html[data-env="staging"] .admin-mobile-sidebar nav button.bg-blue-500 span,
    html[data-env="staging"] .admin-mobile-sidebar nav button.bg-blue-500 svg,
    html[data-env="staging"] .admin-mobile-sidebar nav a.bg-blue-500 .text-white,
    html[data-env="staging"] .admin-mobile-sidebar nav button.bg-blue-500 .text-white {
        color: #059669 !important;
    }

    html[data-env="staging"] .admin-mobile-sidebar .mb-3 > button.bg-blue-500 {
        background: rgba(5, 150, 105, 0.08) !important;
        border-color: #a7f3d0 !important;
    }

    html[data-env="staging"] .admin-mobile-sidebar nav .text-blue-600 {
        color: #0f172a !important;
    }

    html[data-env="staging"] .admin-content .page-header a[class*="bg-blue"],
    html[data-env="staging"] .admin-content a.bg-blue-600,
    html[data-env="staging"] .admin-content button.bg-blue-600,
    html[data-env="staging"] .admin-content .app-btn-primary {
        background: var(--staging-gradient-btn) !important;
        box-shadow: var(--staging-shadow) !important;
    }

    html[data-env="staging"] .admin-content .app-hero {
        background: var(--staging-gradient) !important;
        box-shadow: var(--staging-shadow-lg) !important;
    }

    html[data-env="staging"] #dashboard-content .dash-hero {
        background: var(--staging-gradient) !important;
        box-shadow: var(--staging-shadow-lg) !important;
    }

    html[data-env="staging"] .app-drawer-header {
        background: var(--staging-gradient) !important;
    }

    html[data-env="staging"] .admin-content .app-list-card__actions a:not(.app-action-btn),
    html[data-env="staging"] .admin-content .app-link {
        color: #059669 !important;
    }

    html[data-env="staging"] .admin-content .app-list-card__actions .app-action-btn--view {
        color: #059669 !important;
        background: #ecfdf5 !important;
        border-color: #a7f3d0 !important;
    }

    html[data-env="staging"] .admin-content .app-list-card__actions .app-action-btn--edit {
        color: #047857 !important;
        background: #ecfdf5 !important;
        border-color: #bbf7d0 !important;
    }
}