/* ==========================================================================
   WER - MASTER THEME SETUP
   Purpose: Centralized styling. This file handles ALL colors, fonts, and shadows.
   Do not put layout properties (width, flex, margin) in this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHOELACE & GLOBAL CSS VARIABLES
   Apply to :root so they cascade everywhere.
   -------------------------------------------------------------------------- */
:root, .sl-theme-light {

    /* --- TYPOGRAPHY --- */
    --sl-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sl-font-weight-light: 200;
    --sl-font-weight-normal: 300;
    --sl-font-weight-semibold: 400;
    --sl-font-weight-bold: 500; /* Capped at 500 to keep the luxury boutique feel */

    --font-weight-extra-light:100;
    --font-weight-light:var(--sl-font-weight-light);
    --font-weight-regular:var(--sl-font-weight-normal);
    --font-weight-bold:500;

    /* --- PRIMARY PALETTE: MIDNIGHT SLATE BLUE ---
       Purpose: Main Calls to Action (CTAs), focused inputs, selected states.
       This replaces the old Shoelace bright blue with your high-contrast luxury slate. */
    --sl-color-primary-50:  #f8f8f8;
    --sl-color-primary-100: #f8f5f7;
    --sl-color-primary-150:#f3eaf0;
    --sl-color-primary-200: #eedfe9;
    --sl-color-primary-300: #e3d4e0; /* THE MAUVE ACCENT */
    --sl-color-primary-400: #d0c0cc;
    --sl-color-primary-500: #a89aa3;
    --sl-color-primary-600: #8a7f85;
    --sl-color-primary-700: #6b6267;
    --sl-color-primary-800: #4f484c;
    --sl-color-primary-900: #3a3a3a;

    /* --- NEUTRAL PALETTE: CREAM & MAUVE SPECTRUM ---
       Purpose: Backgrounds, cards, text, borders, and disabled states.
       This maps Shoelace's grays to your beautiful warm tones. */
    --sl-color-neutral-0:   #ffffff; /* Pure white for UI panels/cards */
    --sl-color-neutral-50:  #fbf6f2; /* THE CREAM CANVAS - App background */
    --sl-color-neutral-100: #f8edec; /* Subtle pink/warm tint for row hovers */
    --sl-color-neutral-200: #eedfe9; /* Very soft mauve borders (dividers) */
    --sl-color-neutral-300: #d0c0cc; /* Stronger borders (inputs, inactive tabs) */
    --sl-color-neutral-400: #a89aa3; /* Dusty Mauve - Icons, subtle badges */
    --sl-color-neutral-500: #8a7f85; /* Muted text (placeholders, timestamps) */
    --sl-color-neutral-600: #6b6267; /* Secondary text (subtitles, strong borders) */
    --sl-color-neutral-700: #4f484c; /* Strong secondary text */
    --sl-color-neutral-800: #3a3a3a; /* MAIN TEXT COLOR (Soft Charcoal, not black) */
    --sl-color-neutral-900: #222222; /* Headings (H1/H2) */
    --sl-color-neutral-950: #111111;
    --sl-color-neutral-1000: #000000;

    /* --- SEMANTIC: SUCCESS (MUTED SAGE) ---
       Purpose: Approvals and successful states. */
    --sl-color-success-50:  #f6f8f6;
    --sl-color-success-100: #eef2ed;
    --sl-color-success-200: #dce3da;
    --sl-color-success-300: #b5c7b8;
    --sl-color-success-400: #8fb094;
    --sl-color-success-500: #7a9c7c; /* Core Success */
    --sl-color-success-600: #658567;
    --sl-color-success-700: #4f6b51;

    /* --- SEMANTIC: WARNING (MUTED OCHRE) ---
       Purpose: Warnings and incomplete data. */
    --sl-color-warning-50:  #fcfaf7;
    --sl-color-warning-100: #fdf5e6;
    --sl-color-warning-200: #f9ead3;
    --sl-color-warning-300: #e6cba3;
    --sl-color-warning-400: #d6b382;
    --sl-color-warning-500: #c9a26d; /* Core Warning */
    --sl-color-warning-600: #b38b56;
    --sl-color-warning-700: #8f6e43;

    /* --- SEMANTIC: DANGER (DUSTY TERRACOTTA) ---
       Purpose: Contraindications, AI red flags, destructive actions. */
    --sl-color-danger-50:   #f9ecec;
    --sl-color-danger-100:  #fcebeb;
    --sl-color-danger-200:  #f8dada;
    --sl-color-danger-300:  #e8b3b6;
    --sl-color-danger-400:  #d99498;
    --sl-color-danger-500:  #c97a7e; /* Core Danger */
    --sl-color-danger-600:  #b06569;
    --sl-color-danger-700:  #945054;

    /* --- BORDERS & SHADOWS (The Luxury Lift) --- */
    --sl-border-radius-small:  0.25rem;  /* 4px */
    --sl-border-radius-medium: 0.5rem;   /* 8px - Default for inputs/buttons */
    --sl-border-radius-large:  0.75rem;  /* 12px - Default for cards/panels */
    --sl-border-radius-x-large: 1rem;    /* 16px */

    /* Shadows use the charcoal color with very low opacity to prevent muddiness */
    --sl-shadow-x-small: 0 1px 2px rgba(58, 58, 58, 0.04);
    --sl-shadow-small:   0 1px 3px rgba(58, 58, 58, 0.06), 0 1px 2px rgba(58, 58, 58, 0.04);
    --sl-shadow-medium:  0 4px 12px -2px rgba(58, 58, 58, 0.1), 0 2px 6px -2px rgba(58, 58, 58, 0.12);
    --sl-shadow-large:   0 12px 24px -4px rgba(58, 58, 58, 0.08), 0 4px 12px -4px rgba(58, 58, 58, 0.06);

    /* Semantic Aliases for easy custom class creation */
    --color-cream: var(--sl-color-neutral-50);
    --color-mauve-light: var(--sl-color-neutral-200);
    --color-mauve: var(--sl-color-neutral-300);
    --color-charcoal: var(--sl-color-neutral-800);
    --color-blue-bright: #2B3A4A;
    --color-blue-middle: #1C2632;
    --color-blue-dark: #0F151C;



}

/* --------------------------------------------------------------------------
   GLOBAL RESET & BASE HTML
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    direction: ltr;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    /* Scrollbar styling for a premium feel */
    scrollbar-width: thin;
    scrollbar-color: var(--color-mauve) var(--color-cream);
}

body {
    /*background-color: var(--sl-color-neutral-50); !* The Cream Shell *!*/
    background-color: #EAE8EC;
    color: var(--sl-color-neutral-900); /* Charcoal Text */
    min-height: 100vh;
    overflow-x: hidden;
    font-weight: var(--font-weight-regular);
    direction: ltr;
    text-align: left;
}

img:not([src]) {
    display: none;
}

::selection {
    background-color: #e3d4e0; /* Your specific Mauve for text highlighting */
    color: var(--sl-color-neutral-900);
}



sl-checkbox::part(control){
    border-radius: 1000px;
}

sl-checkbox{
    --sl-color-primary-600:var(--color-blue-bright);
}


/* --------------------------------------------------------------------------
   3. NATIVE HTML ELEMENT STYLING (The Fallback / Global Paint)
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    color: var(--sl-color-neutral-900);
    font-weight: var(--sl-font-weight-semibold);
}

p, span, div {
    color: var(--sl-color-neutral-800);
}

/* Links */
/* Links get the Mauve accent */
a {
    color: var(--sl-color-primary-600);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--sl-color-primary-800);
}



/* Native Forms (If not using Shoelace components for everything) */
input, select, textarea {
    background-color: var(--sl-color-neutral-0);
    border: 1px solid var(--sl-color-neutral-300);
    color: var(--sl-color-neutral-800);
    border-radius: var(--sl-border-radius-medium);
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Inputs get the Mauve focus ring, NOT blue */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--sl-color-primary-500);
    /* Uses your #e3d4e0 (primary-300) with a slight transparency for the glow */
    box-shadow: 0 0 0 3px rgba(227, 212, 224, 0.5);
}

input::placeholder, textarea::placeholder {
    color: var(--sl-color-neutral-500);
}

/* --------------------------------------------------------------------------
   4. SHOELACE COMPONENT TUNING (Bridging the gap)
   -------------------------------------------------------------------------- */

/* Cards - Enforce the white background and soft borders */
sl-card {
    --border-radius: var(--sl-border-radius-large);
    --border-color: var(--sl-color-neutral-200);
    --background-color: var(--sl-color-primary-50);

}
sl-card::part(base){
    transition: box-shadow 0.3s ease, outline 0.3s linear;
}
sl-card::part(base):hover {
    box-shadow: var(--sl-shadow-medium);
}

/* Buttons - Slightly thicker and rounder for a tactile feel */
sl-button {
    --sl-input-height-medium: 2.75rem;
    font-weight: var(--sl-font-weight-semibold);
    letter-spacing: 0.01em;
}

sl-button[variant="primary"] {
    --sl-color-primary-500: #2B3A4A; /* Base Midnight Blue */
    --sl-color-primary-600: #1C2632; /* Hover State */
    --sl-color-primary-700: #0F151C; /* Active State */
    --sl-color-neutral-0: #ffffff;   /* Ensures text stays pure white */
}

/* Inputs - Matches the luxury aesthetic */
sl-input, sl-select, sl-textarea {
    --sl-input-border-width: 1.5px;
    --sl-input-border-color: var(--sl-color-neutral-300);
    --sl-input-border-color-hover: var(--sl-color-neutral-400);
    --sl-input-border-radius-medium: var(--sl-border-radius-medium);
}

sl-input {
    --sl-input-focus-ring-color: transparent;
    --sl-input-focus-ring-width: 0;
}

sl-input.dynamic-label::part(base){
    background: none;
    border: none;
    border-bottom: solid var(--sl-input-border-width) var(--sl-input-border-color);
    border-radius: 0;
    outline: none;
}

sl-input.dynamic-label::part(input){
    padding: 0;
}

.dynamic-label::part(form-control-label){
    transform: translateY(136%);
    opacity: 0;
    transition: transform 0.33s ease, opacity 0.33s ease;
}

/*.dynamic-label:focus-within::part(form-control-label),*/
.dynamic-label.has-value::part(form-control-label){
    transform: translateY(0%);
    opacity: 1;
}
@keyframes detectAutofill {
    from { box-sizing:  inherit; }
    to { box-sizing: inherit; }
}

.dynamic-label::part(input):-webkit-autofill {
    animation-name: detectAutofill;
    animation-duration: 1ms;
}




sl-input::part(textarea){}


.login-form sl-input::part(base):focus-within {
    border-bottom-color: var(--color-blue-dark); /* Or whatever color you want */
}
sl-input {
    --sl-input-background-color: transparent;
    --sl-input-background-color-hover: transparent;
    --sl-input-background-color-focus: transparent;
}

sl-input::part(input):-webkit-autofill,
sl-input::part(input):-webkit-autofill:hover,
sl-input::part(input):-webkit-autofill:focus,
sl-input::part(input):-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s !important;
    -webkit-text-fill-color: var(--sl-color-neutral-900) !important;
}

/* Badges/Tags - Softer look */
sl-badge {
    --sl-font-weight-normal: var(--sl-font-weight-semibold);
    letter-spacing: 0.02em;
}

img{
    display: block;
    -webkit-user-drag: none; /* Safari, Chrome, Edge */
    user-drag: none;         /* The standard property */
}

sl-spinner{
    --indicator-color: var(--color-mauve);
    --track-color: var(--sl-color-primary-200);
}
/* --------------------------------------------------------------------------
   MAIN CLASSES
   -------------------------------------------------------------------------- */
.main-width{
    max-width: min(95%, 1200px);
    margin: 0 auto;
}

.white-card{
    /*background-color: var(--sl-color-primary-50);*/
    background-color: white;
    border-radius: var(--sl-border-radius-medium);
    border: 1px solid var(--sl-color-neutral-100);
}
sl-switch{
    font-size: 0.9rem;
}
sl-switch::part(control) {
    background-color: #ebebeb;
    border-color: var(--sl-color-neutral-300);
}
sl-switch::part(thumb) {
    border-color: var(--sl-color-neutral-300);
}

sl-switch[checked]::part(control) {
    background-color: var(--color-blue-bright);
    border-color: var(--sl-color-primary-400);

}