/* ============================================================
   WheelHub Admin — Custom Styles
   Uses Radzen "software" theme with Wcag="true" for AA-compliant
   colours out of the box (software-wcag.css).
   This file only contains:
     1. Semantic colour tokens (used by StatusBadge component)
     2. Global reset / base styles
     3. StatusBadge CSS (animated dot + 13 variants)
     4. .mono utility class
     5. Scrollbar styling
     6. Dashboard stat-card utility classes
   Everything else uses native Radzen components & WCAG variables.
   ============================================================ */

/* ----------------------------------------------------------
   1. Semantic Colour Tokens  (StatusBadge + mono font)
   ---------------------------------------------------------- */
:root {
    /* Semantic colors (used by StatusBadge component) */
    --wh-success: #059669;
    --wh-success-bg: #ecfdf5;
    --wh-success-text: #065f46;
    --wh-warning: #d97706;
    --wh-warning-bg: #fffbeb;
    --wh-warning-text: #92400e;
    --wh-danger: #dc2626;
    --wh-danger-bg: #fef2f2;
    --wh-danger-text: #991b1b;
    --wh-info: #2563eb;
    --wh-info-bg: #eff6ff;
    --wh-info-text: #1e40af;
    --wh-neutral: #6b7280;
    --wh-neutral-bg: #f3f4f6;
    --wh-neutral-text: #374151;
    --wh-purple: #7c3aed;
    --wh-purple-bg: #f5f3ff;
    --wh-purple-text: #5b21b6;

    /* Mono font (used by .mono utility) */
    --wh-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

    /* Layout tokens */
    --wh-header-height: 3.5rem;
    --wh-sidebar-width: 260px;
    --wh-space-md: 0.75rem;
    --wh-space-lg: 1rem;
    --wh-space-xl: 1.5rem;
    --wh-space-2xl: 2rem;

}

/* Dark mode tokens */
.rz-dark,
[data-theme="dark"] {
    --wh-success: #10b981;
    --wh-success-bg: rgba(16, 185, 129, 0.1);
    --wh-success-text: #34d399;
    --wh-warning: #f59e0b;
    --wh-warning-bg: rgba(245, 158, 11, 0.1);
    --wh-warning-text: #fbbf24;
    --wh-danger: #ef4444;
    --wh-danger-bg: rgba(239, 68, 68, 0.1);
    --wh-danger-text: #f87171;
    --wh-info: #3b82f6;
    --wh-info-bg: rgba(59, 130, 246, 0.1);
    --wh-info-text: #60a5fa;
    --wh-neutral: #6b7280;
    --wh-neutral-bg: rgba(107, 114, 128, 0.1);
    --wh-neutral-text: #9ca3af;
    --wh-purple: #a78bfa;
    --wh-purple-bg: rgba(167, 139, 250, 0.1);
    --wh-purple-text: #c4b5fd;

}

/* ----------------------------------------------------------
   2. Global Reset & Base
   ---------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* ----------------------------------------------------------
   3. StatusBadge Component
   ---------------------------------------------------------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
}

.status-badge::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Live / Active / Completed */
.status-badge.live,
.status-badge.active,
.status-badge.completed {
    background: var(--wh-success-bg);
    color: var(--wh-success-text);
}

.status-badge.live::before,
.status-badge.active::before,
.status-badge.completed::before {
    background: var(--wh-success);
    box-shadow: 0 0 6px rgba(5, 150, 105, 0.4);
}

/* Pending / NotStarted */
.status-badge.pending,
.status-badge.notstarted {
    background: var(--wh-warning-bg);
    color: var(--wh-warning-text);
}

.status-badge.pending::before,
.status-badge.notstarted::before {
    background: var(--wh-warning);
    box-shadow: 0 0 6px rgba(217, 119, 6, 0.4);
}

/* Suspended / Inactive / Closed */
.status-badge.suspended,
.status-badge.inactive,
.status-badge.closed {
    background: var(--wh-danger-bg);
    color: var(--wh-danger-text);
}

.status-badge.suspended::before,
.status-badge.inactive::before,
.status-badge.closed::before {
    background: var(--wh-danger);
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.4);
}

/* Provisioning / In Progress */
.status-badge.provisioning,
.status-badge.inprogress {
    background: var(--wh-info-bg);
    color: var(--wh-info-text);
}

.status-badge.provisioning::before,
.status-badge.inprogress::before {
    background: var(--wh-info);
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.4);
    animation: pulse-dot 2s ease-in-out infinite;
}

/* Ignore */
.status-badge.ignore {
    background: var(--wh-neutral-bg);
    color: var(--wh-neutral-text);
}

.status-badge.ignore::before {
    background: var(--wh-neutral);
}

/* Discontinued */
.status-badge.discontinued {
    background: var(--wh-purple-bg);
    color: var(--wh-purple-text);
}

.status-badge.discontinued::before {
    background: var(--wh-purple);
}

/* Override Required */
.status-badge.overriderequired {
    background: var(--wh-warning-bg);
    color: var(--wh-warning-text);
}

.status-badge.overriderequired::before {
    background: var(--wh-warning);
    animation: pulse-dot 2s ease-in-out infinite;
}

/* Admin (role badge) */
.status-badge.admin {
    background: var(--wh-info-bg);
    color: var(--wh-info-text);
}

.status-badge.admin::before {
    background: var(--wh-info);
}

/* User / Member (role badge) */
.status-badge.user,
.status-badge.member {
    background: var(--wh-neutral-bg);
    color: var(--wh-neutral-text);
}

.status-badge.user::before,
.status-badge.member::before {
    background: var(--wh-neutral);
}

/* SuccessfullyImported */
.status-badge.successfullyimported {
    background: var(--wh-success-bg);
    color: var(--wh-success-text);
}

.status-badge.successfullyimported::before {
    background: var(--wh-success);
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ----------------------------------------------------------
   4. Sidebar Section Headings
   ---------------------------------------------------------- */
/* Sidebar section labels need to use the sidebar's own text color,
   not the global secondary/text color which assumes a light background.
   --rz-sidebar-color is white in the software theme (both light & dark). */
.sidebar-section-label {
    color: var(--rz-sidebar-color);
    opacity: 0.5;
}

/* ----------------------------------------------------------
   5. Scrollbar Styling
   ---------------------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--rz-border-color);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--rz-text-disabled-color);
}

/* ----------------------------------------------------------
   6. Utility Classes
   ---------------------------------------------------------- */
.mono { font-family: var(--wh-font-mono); }

/* ----------------------------------------------------------
   6.1 Raw Data Tables
   ---------------------------------------------------------- */
.raw-data-grid {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--rz-border-color);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-background-color);
}

.raw-data-grid .rz-data-grid,
.raw-data-grid .rz-datatable {
    min-width: 100%;
}

.raw-data-grid table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.raw-data-grid th,
.raw-data-grid td,
.raw-data-grid .rz-cell,
.raw-data-grid .rz-header-cell {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
}

/* ----------------------------------------------------------
   7. Dashboard Stat Cards -- larger, WCAG-compliant
   ---------------------------------------------------------- */

/* Stat-card label: bigger than default Overline, high-contrast */
.stat-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-base-700);
    margin: 0;
}

/* Stat-card value: large mono number */
.stat-value {
    font-family: var(--wh-font-mono);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

/* Section header (e.g. "Latest Sync", "Latest Import") */
.section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-base-700);
    margin: 0;
}

/* Muted helper text (uses Radzen WCAG-compliant secondary colour) */
.text-muted-accessible {
    color: var(--rz-base-700);
    margin: 0;
}

/* Empty-state italic messages */
.empty-state-text {
    color: var(--rz-base-600);
    font-style: italic;
    margin: 0;
}

/* Page subtitle under headings */
.page-subtitle {
    color: var(--rz-base-700);
    margin: 0;
}

/* Stat card icon — ensure accessible contrast */
.stat-icon {
    font-size: 1.5rem;
    opacity: 0.9;
}

/* ----------------------------------------------------------
   7.1 Sidebar Brand (logo + Admin caption)
   ---------------------------------------------------------- */
.wh-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    flex: 1 1 auto;
}

.wh-brand-logo {
    display: block;
    height: 44px;
    width: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

.wh-brand-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rz-sidebar-color);
    opacity: 0.55;
    border: 1px solid var(--rz-border-color);
    border-radius: 4px;
    line-height: 1.6;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   8. Environment Badge (sidebar branding)
   Only shown in non-Production environments.
   ---------------------------------------------------------- */
.env-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.6;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Development — warm amber */
.env-badge-development {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.35);
}

/* Staging — blue */
.env-badge-staging {
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.35);
}

/* Any other non-prod environment — neutral */
.env-badge:not(.env-badge-development):not(.env-badge-staging) {
    background: rgba(156, 163, 175, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(156, 163, 175, 0.35);
}

/* ----------------------------------------------------------
   9. Product Edit Form (override + markdown UX)
   ---------------------------------------------------------- */
.field-helper-text {
    color: var(--rz-text-secondary-color);
}

.override-alert {
    margin-bottom: 1rem;
}

.override-reason-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.override-field-required .rz-textbox,
.override-field-required .rz-textarea,
.override-field-required .rz-dropdown,
.override-field-required .rz-numeric-input {
    border-left: 3px solid #f59e0b !important;
    background: rgba(245, 158, 11, 0.08);
}

.override-field-missing .rz-textbox,
.override-field-missing .rz-textarea,
.override-field-missing .rz-dropdown,
.override-field-missing .rz-numeric-input {
    border-left: 3px solid #ef4444 !important;
    background: rgba(239, 68, 68, 0.08);
}

/* Server-side validation error — red border on form fields */
.server-error .rz-textbox,
.server-error .rz-textarea,
.server-error .rz-dropdown,
.server-error .rz-numeric-input {
    border-color: var(--rz-danger) !important;
}

.markdown-preview {
    border: 1px solid var(--rz-border-color);
    border-radius: var(--rz-border-radius);
    padding: 0.75rem;
    min-height: 6rem;
    background: var(--rz-base-50);
}

/* ----------------------------------------------------------
   10. Clickable Stat Badges (Product List)
   ---------------------------------------------------------- */
.stat-badge-clickable {
    cursor: pointer;
    border-radius: 100px;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.stat-badge-clickable:hover {
    transform: scale(1.05);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.stat-badge-active {
    box-shadow: 0 0 0 2px var(--rz-primary);
    border-radius: 100px;
}

/* ----------------------------------------------------------
   11. Filter Chips (Collapsible Filter Bar)
   ---------------------------------------------------------- */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--rz-base-200);
    color: var(--rz-text-color);
    white-space: nowrap;
}

.filter-chip-remove {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 0.625rem;
    line-height: 1;
    background: var(--rz-base-400);
    color: var(--rz-base-background-color);
    transition: background 0.15s ease;
}

.filter-chip-remove:hover {
    background: var(--rz-danger);
}

/* ----------------------------------------------------------
   12. Clickable Dashboard Stat Cards
   ---------------------------------------------------------- */
.stat-card-clickable {
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.stat-card-clickable:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--rz-primary);
}

/* ----------------------------------------------------------
   13. Dashboard Needs Attention Cards
   ---------------------------------------------------------- */
.attention-card {
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.attention-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}