/**
 * WardConnect design system, Phase 1 (luxury global foundation)
 *
 * Load order: this file first, then dashboard.css, wc-app-shell.css, wc-shared-luxury-components.css.
 *
 * Layers:
 *   1. Semantic colors (--color-*), brand, status, text, surfaces
 *   2. Luxury layout (--wc-*, --wc-lux-*), radii, shadows, shell, cards, focus
 *
 * Spec: navy #0d2350, primary blue #2f6df6, muted #56657d, calm glass surfaces.
 */

:root {
    /* Brand accent (legacy names: --color-gold*, now aligned with primary blue) */
    --color-navy: #0d2350;
    --color-gold: #1d4ed8;
    --color-gold-light: #60a5fa;
    --color-gold-soft: rgba(47, 109, 246, 0.12);
    --color-gold-border: rgba(47, 109, 246, 0.35);

    --color-primary: #2f6df6;
    --color-primary-dark: #163b82;
    --color-primary-soft: #eff6ff;
    --color-primary-border: #bfdbfe;
    --color-primary-text: #1e40af;

    --color-info: #3b82f6;
    --color-info-soft: #eff6ff;
    --color-info-border: #bfdbfe;
    --color-info-text: #1e40af;

    --color-success: #22c55e;
    --color-success-soft: #dcfce7;
    --color-success-text: #15803d;
    --color-success-border: #86efac;

    --color-warning: #f59e0b;
    --color-warning-soft: #fffbeb;
    --color-warning-text: #b45309;
    --color-warning-border: #fde68a;

    --color-danger: #ef4444;
    --color-danger-soft: #fef2f2;
    --color-danger-text: #b91c1c;
    --color-danger-border: #fecaca;

    --color-accent: #8b5cf6;
    --color-accent-soft: #f5f3ff;
    --color-accent-text: #5b21b6;
    --color-accent-border: #ddd6fe;

    --color-text: #0d2350;
    --color-muted: #56657d;
    --color-bg: #f8fafc;
    --color-border: #e2e8f0;
    --color-surface: #ffffff;

    --color-neutral-soft: #f1f5f9;
    --color-neutral-text: #475569;
    --color-neutral-border: #e2e8f0;

    /* -------- Phase 1: typography, elevation, motion, focus -------- */
    --wc-font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
    --wc-kicker: #64748b;
    --wc-line: #dfe7f3;
    --wc-line-soft: #edf2f8;
    --wc-surface-glass: rgba(255, 255, 255, 0.88);
    --wc-bg-tint: #f4f7fd;
    --wc-bg-tint-soft: #eef3ff;
    --wc-sidebar-mid: #1a3d80;
    --wc-shadow-sm: 0 10px 32px rgba(13, 35, 80, 0.06);
    --wc-shadow-md: 0 20px 50px rgba(13, 35, 80, 0.08);
    --wc-shadow-lg: 0 28px 72px rgba(13, 35, 80, 0.1);
    --wc-radius-sm: 14px;
    --wc-radius-md: 18px;
    --wc-radius-lg: 24px;
    --wc-radius-xl: 30px;
    --wc-transition: 0.22s ease;
    --wc-focus-ring: 0 0 0 3px rgba(47, 109, 246, 0.28), 0 0 0 5px rgba(47, 109, 246, 0.1);

    /* Primary CTA, dashboard, appointments, shell, auth (navy → blue) */
    --wc-btn-primary-bg: linear-gradient(135deg, #1a3f7a 0%, var(--color-primary) 48%, #4f88ff 100%);
    --wc-btn-primary-shadow: 0 14px 32px rgba(13, 35, 80, 0.2);
    --wc-btn-primary-shadow-hover: 0 18px 38px rgba(13, 35, 80, 0.22);

    /* Shell + shared components (alias semantic colors, do not duplicate hex) */
    --wc-lux-bg: var(--wc-bg-tint);
    --wc-lux-bg-soft: var(--wc-bg-tint-soft);
    --wc-lux-surface: var(--wc-surface-glass);
    --wc-lux-surface-solid: var(--color-surface);
    --wc-lux-line: var(--wc-line);
    --wc-lux-line-soft: var(--wc-line-soft);
    --wc-lux-text: var(--color-text);
    --wc-lux-muted: var(--color-muted);
    --wc-lux-primary: var(--color-primary);
    --wc-lux-primary-dark: var(--color-primary-dark);
    --wc-lux-gold: var(--color-gold);
    --wc-lux-gold-light: var(--color-gold-light);
    --wc-lux-gold-glow: var(--color-gold-soft);
    --wc-lux-sidebar-1: var(--color-navy);
    --wc-lux-sidebar-2: var(--wc-sidebar-mid);
    --wc-lux-shadow-sm: var(--wc-shadow-sm);
    --wc-lux-shadow-md: var(--wc-shadow-md);
    --wc-lux-shadow-lg: var(--wc-shadow-lg);
    --wc-lux-radius-xl: var(--wc-radius-xl);
    --wc-lux-radius-lg: var(--wc-radius-lg);
    --wc-lux-radius-md: var(--wc-radius-md);
    --wc-lux-radius-sm: var(--wc-radius-sm);

    --wc-lux-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.86));
    --wc-lux-border: var(--wc-line);
    --wc-lux-border-soft: var(--wc-line-soft);

    /* Luxury-tuned status (badges, tables, slightly richer than raw Bootstrap) */
    --wc-lux-success: #169b62;
    --wc-lux-success-bg: #eaf8f1;
    --wc-lux-warning: #c98600;
    --wc-lux-warning-bg: #fff4d6;
    --wc-lux-danger: #d64545;
    --wc-lux-danger-bg: #fdecec;
    --wc-lux-secondary: #64748b;
    --wc-lux-secondary-bg: #f1f5f9;
    --wc-lux-info: #0369a1;
    --wc-lux-info-bg: #e0f2fe;
}

/* --------------------------------------------------------------------------
   Status pills + legacy .wc-status-badge (same visual language)
   -------------------------------------------------------------------------- */
.status-pill--compact {
    font-size: 0.72rem;
    min-height: 26px;
    padding: 0 10px;
    font-weight: 750;
}

.status-pill,
.wc-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    border: 1px solid transparent;
    box-shadow: 0 2px 8px rgba(13, 35, 80, 0.05);
}

/* Primary / upcoming / general info, blue */
.status-pill.status-upcoming,
.wc-status-badge.upcoming,
.status-upcoming {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    border-color: var(--color-primary-border);
}

.status-pill.status-info,
.wc-status-badge.info,
.status-info {
    background: var(--color-info-soft);
    color: var(--color-info-text);
    border-color: var(--color-info-border);
}

/* Warning / pending */
.status-pill.status-pending,
.wc-status-badge.pending,
.status-pending {
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
    border-color: var(--color-warning-border);
}

/* Success / approved */
.status-pill.status-approved,
.wc-status-badge.approved,
.status-approved {
    background: var(--color-success-soft);
    color: var(--color-success-text);
    border-color: var(--color-success-border);
}

/* Completed, same green family, slightly deeper text */
.status-pill.status-completed,
.wc-status-badge.completed,
.status-completed {
    background: var(--color-success-soft);
    color: #166534;
    border-color: var(--color-success-border);
}

/* Danger / cancelled */
.status-pill.status-cancelled,
.wc-status-badge.cancelled,
.status-cancelled {
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
    border-color: var(--color-danger-border);
}

/* Reschedule / in progress, info blue */
.status-pill.status-reschedule,
.wc-status-badge.reschedule,
.status-reschedule {
    background: var(--color-info-soft);
    color: var(--color-info-text);
    border-color: var(--color-info-border);
}

/* Attention (e.g. no-show), amber-red */
.status-pill.status-attention,
.wc-status-badge.attention,
.status-attention {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

/* Urgent flag (appointments) */
.status-pill.status-urgent,
.wc-status-badge.urgent,
.status-urgent {
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
    border-color: var(--color-danger-border);
}

/* Unread / needs attention (labels) */
.status-pill.status-unread,
.wc-status-badge.unread,
.status-unread {
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
    border-color: var(--color-danger-border);
}

/* Archived / neutral / secondary */
.status-pill.status-archived,
.wc-status-badge.archived,
.status-archived,
.status-pill.status-secondary,
.wc-status-badge.secondary,
.status-secondary {
    background: var(--color-neutral-soft);
    color: var(--color-neutral-text);
    border-color: var(--color-neutral-border);
}

/* Leadership / admin / special, purple accent */
.status-pill.status-accent,
.wc-status-badge.accent,
.status-accent,
.status-pill.status-leadership,
.wc-status-badge.leadership,
.status-leadership {
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
    border-color: var(--color-accent-border);
}

/* --------------------------------------------------------------------------
   Compact numeric / icon badges (nav, tabs, counts)
   -------------------------------------------------------------------------- */
.badge-unread,
.badge-alert {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border);
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.12);
}

.badge-unread--solid,
.badge-alert--solid {
    background: var(--color-danger);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 4px rgba(239, 68, 68, 0.25);
}

.badge-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    background: var(--color-success-soft);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

.badge-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
    border: 1px solid var(--color-accent-border);
}

/* Legacy urgent pill on appointment rows */
.wc-pill-urgent {
    background: var(--color-danger-soft) !important;
    color: var(--color-danger-text) !important;
    border: 1px solid var(--color-danger-border) !important;
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.1);
}

/* Dashboard quick-action notification count */
.wc-badge-notification {
    background: var(--color-accent-soft) !important;
    color: var(--color-accent-text) !important;
    border: 1px solid var(--color-accent-border) !important;
    font-weight: 800;
}

/* Optional row class for custom lists */
.notification-unread {
    border-left: 3px solid var(--color-info);
    background: linear-gradient(90deg, var(--color-info-soft), transparent 55%);
}

.notification-read {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Message thread (appointment messages, future inbox)
   -------------------------------------------------------------------------- */
.message-unread {
    border-left: 3px solid var(--color-info);
    padding-left: 0.75rem;
    background: var(--color-info-soft);
    border-radius: 0 8px 8px 0;
}

.message-read {
    border-left: 3px solid transparent;
}

.wc-msg-tag-leader {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
    border: 1px solid var(--color-accent-border);
}

.wc-msg-tag-system {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    background: var(--color-neutral-soft);
    color: var(--color-neutral-text);
    border: 1px solid var(--color-neutral-border);
}

/* --------------------------------------------------------------------------
   Soft alerts (use with .alert)
   -------------------------------------------------------------------------- */
.alert-info-soft {
    background: var(--color-info-soft);
    border-color: var(--color-info-border);
    color: var(--color-info-text);
}

.alert-success-soft {
    background: var(--color-success-soft);
    border-color: var(--color-success-border);
    color: var(--color-success-text);
}

.alert-warning-soft {
    background: var(--color-warning-soft);
    border-color: var(--color-warning-border);
    color: var(--color-warning-text);
}

.alert-danger-soft {
    background: var(--color-danger-soft);
    border-color: var(--color-danger-border);
    color: var(--color-danger-text);
}

.alert-accent-soft {
    background: var(--color-accent-soft);
    border-color: var(--color-accent-border);
    color: var(--color-accent-text);
}

.alert-neutral-soft {
    background: var(--color-neutral-soft);
    border-color: var(--color-neutral-border);
    color: var(--color-neutral-text);
}

/* --------------------------------------------------------------------------
   Dashboard stat icon accents
   -------------------------------------------------------------------------- */
.dash-stat-icon.stat-upcoming {
    background: linear-gradient(145deg, var(--color-primary-soft), #dbeafe);
    color: var(--color-primary);
    border: 1px solid var(--color-primary-border);
    box-shadow: 0 4px 14px rgba(47, 109, 246, 0.08);
}

.dash-stat-icon.stat-pending {
    background: linear-gradient(145deg, var(--color-warning-soft), #fff7d6);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-border);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.08);
}

.dash-stat-icon.stat-unread {
    background: linear-gradient(145deg, var(--color-danger-soft), #ffe4e6);
    color: var(--color-danger);
    border: 1px solid var(--color-danger-border);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.08);
}

.dash-stat-icon.stat-neutral {
    background: linear-gradient(145deg, var(--color-neutral-soft), #f8fafc);
    color: var(--color-muted);
    border: 1px solid var(--color-neutral-border);
    box-shadow: 0 2px 10px rgba(13, 35, 80, 0.04);
}

.dash-stat-icon.stat-blocked {
    background: linear-gradient(145deg, var(--color-neutral-soft), #f1f5f9);
    color: var(--color-neutral-text);
    border: 1px solid var(--color-neutral-border);
    box-shadow: 0 2px 10px rgba(13, 35, 80, 0.04);
}

.dash-stat-value.stat-pending {
    color: var(--color-warning-text);
}

.dash-stat-value.stat-unread {
    color: var(--color-danger-text);
}

/* --------------------------------------------------------------------------
   Header notification bell count
   -------------------------------------------------------------------------- */
.nav-icon-btn .nav-icon-badge {
    position: absolute;
    top: -3px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    padding: 0 5px;
    font-size: 0.68rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background: var(--color-danger);
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(239, 68, 68, 0.3);
}

.nav-icon-badge.nav-icon-badge--urgent {
    background: #dc2626;
    box-shadow: 0 1px 5px rgba(220, 38, 38, 0.35);
}

/* --------------------------------------------------------------------------
   Notification cards (older notification-card.unread pattern)
   -------------------------------------------------------------------------- */
.notification-card.unread {
    border-color: var(--color-info-border);
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-info-soft) 100%);
}

.notification-card.unread::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 18px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--color-info);
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.15);
}

/* Sidebar: unread vs urgent */
.wc-nav-badge.wc-unread-badge {
    background: var(--color-danger);
    color: #fff;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.wc-nav-badge.wc-nav-badge--urgent {
    background: #dc2626;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Urgent appointment row accent */
.wc-row-urgent td:first-child {
    box-shadow: inset 3px 0 0 var(--color-danger);
}

.wc-row-urgent:hover td {
    background: linear-gradient(90deg, var(--color-danger-soft), transparent 50%);
}