/*
 * Ryxova Clinic — Enterprise Brand Theme
 * Veterinary Practice Management
 * Tokens unified to the frozen canonical vocabulary (--rx-primary / --rx-accent / ...).
 * Source of truth: /design-system/ryxova-tokens.css
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* —— Canonical brand tokens (match /design-system/ryxova-tokens.css) —— */
  --rx-primary:            #1A2A3A;
  --rx-primary-container:  #24374F;
  --rx-accent:             #FF8A6F;
  --rx-accent-pressed:     #E87A5F;
  --rx-accent-container:   #FFE6DE;
  --rx-tertiary:           #A68A7A;
  --rx-background:         #F8FAFC;
  --rx-surface:            #FFFFFF;
  --rx-surface-elevated:   #F1F5F9;
  --rx-surface-variant:    #E2E8F0;
  --rx-outline:            #CBD5E1;
  --rx-on-surface:         #1A2A3A;
  --rx-on-surface-variant: #64748B;
  --rx-on-surface-muted:   #94A3B8;
  --rx-success:            #22C55E;
  --rx-warning:            #F59E0B;
  --rx-error:              #EF4444;
  --rx-info:               #3B82F6;
  --rx-font-family:        'Inter', system-ui, -apple-system, sans-serif;

  /* —— Clinic-derived utilities —— */
  --rx-accent-subtle:      rgba(255, 138, 111, 0.12);
  --rx-accent-rgb:         255, 138, 111;

  /* —— Deprecated aliases (kept so any legacy references keep working) —— */
  --rx-deep-indigo:        var(--rx-primary);
  --rx-indigo-mid:         var(--rx-primary-container);
  --rx-indigo-dark:        #0D1B2A;
  --rx-coral:              var(--rx-accent);
  --rx-accent-hover:       var(--rx-accent-pressed);
  --rx-surface-2:          var(--rx-background);
  --rx-border:             var(--rx-surface-variant);
  --rx-text-primary:       var(--rx-on-surface);
  --rx-text-secondary:     var(--rx-on-surface-variant);
  --rx-text-muted:         var(--rx-on-surface-muted);
  --rx-font:               var(--rx-font-family);

  /* —— Bootstrap remap (retires Metronic purple without editing generated CSS) —— */
  --bs-primary:          var(--rx-accent);
  --bs-primary-rgb:      var(--rx-accent-rgb);
  --bs-link-color:       var(--rx-accent);
  --bs-link-hover-color: var(--rx-accent-pressed);
  --bs-link-color-rgb:   var(--rx-accent-rgb);
  --bs-font-sans-serif:  var(--rx-font-family);
  --bs-body-font-family: var(--rx-font-family);
  --bs-focus-ring-color: var(--rx-accent-subtle);
  --bs-border-radius:    0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-color:     var(--rx-surface-variant);
  --bs-body-bg:          var(--rx-background);
  --bs-body-color:       var(--rx-on-surface);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--rx-font-family);
  font-size: 0.875rem;
  color: var(--rx-on-surface);
  background: var(--rx-background);
  -webkit-font-smoothing: antialiased;
}

.mud-appbar { background-color: var(--rx-primary) !important; color: #FFFFFF !important; box-shadow: 0 1px 3px rgba(0,0,0,0.18) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.mud-drawer { background-color: var(--rx-primary) !important; border-right: 1px solid rgba(255,255,255,0.06) !important; }
.mud-drawer-header { border-bottom: 1px solid rgba(255,255,255,0.08) !important; padding: 1.25rem 1rem !important; }
.mud-nav-link { color: rgba(226,232,240,0.85) !important; border-radius: 0.5rem !important; margin: 2px 8px !important; padding: 0.5rem 0.75rem !important; transition: background 0.15s, color 0.15s !important; }
.mud-nav-link:hover, .mud-nav-link.active { background: var(--rx-accent-subtle) !important; color: var(--rx-accent) !important; }
.mud-nav-link.active { font-weight: 600 !important; }
.mud-button-filled.mud-button-filled-primary { background-color: var(--rx-accent) !important; color: #FFFFFF !important; border-radius: 0.5rem !important; }
.mud-button-filled.mud-button-filled-primary:hover { background-color: var(--rx-accent-pressed) !important; }
.mud-chip.mud-chip-color-primary { background-color: var(--rx-accent-subtle) !important; color: var(--rx-accent) !important; font-weight: 500 !important; }
.mud-card, .mud-paper { border-radius: 0.75rem !important; border: 1px solid var(--rx-surface-variant) !important; }

/* Sidebar navigation groups (MudBlazor clinic nav) */
.rx-clinic-nav .rx-nav-section {
  margin: 0;
  padding: 1.125rem 1rem 0.35rem 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.75);
  user-select: none;
}
.rx-clinic-nav .rx-nav-section:first-of-type {
  padding-top: 0.35rem;
}

/* Login */
.rx-login-root { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--rx-indigo-dark) 0%, var(--rx-primary) 60%, #2d1a14 100%); position: relative; overflow: hidden; }
.rx-login-root::before { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: var(--rx-accent); opacity: 0.06; top: -180px; right: -180px; }
.rx-login-card { background: #FFFFFF; border-radius: 1rem; padding: 2.5rem; width: 100%; max-width: 420px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); position: relative; z-index: 1; }
.rx-login-copyright { font-family: var(--rx-font-family); font-size: 0.75rem; color: rgba(255,255,255,0.5); text-align: center; margin-top: 1.5rem; position: relative; z-index: 1; }
.rx-login-card .form-control { font-family: var(--rx-font-family); border-color: var(--rx-surface-variant); border-radius: 0.5rem; }
.rx-login-card .form-control:focus { border-color: var(--rx-accent); box-shadow: 0 0 0 3px var(--rx-accent-subtle); outline: none; }
.rx-login-card .btn-primary { background: var(--rx-accent); border-color: var(--rx-accent); font-family: var(--rx-font-family); font-weight: 600; border-radius: 0.5rem; padding: 0.625rem 1.5rem; }
.rx-login-card .btn-primary:hover { background: var(--rx-accent-pressed); border-color: var(--rx-accent-pressed); }
.rx-login-card .card-header { background: transparent; border-bottom: 1px solid var(--rx-surface-variant); font-weight: 700; font-size: 1.125rem; font-family: var(--rx-font-family); padding: 1.25rem 1.5rem; }

.mud-main-content { background: var(--rx-background) !important; }
.mud-table thead tr th { background: var(--rx-background) !important; font-weight: 600 !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: var(--rx-on-surface-variant) !important; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(26,42,58,0.15); border-radius: 3px; }

body:has(.rx-login-root) { overflow: auto !important; height: auto !important; }
#blazor-error-ui { background:#FEF2F2; border-top:2px solid var(--rx-error); color:#991B1B; bottom:0; display:none; left:0; padding:0.6rem 1.25rem; position:fixed; width:100%; z-index:9999; font-family:var(--rx-font-family); font-size:0.875rem; }