/* wwwroot/css/root.css */
 
/* 🌞 LIGHT THEME (Default) */
:root {
    /*  Colors */
    --color-disabled: #B6AE9F;
    --color-surgePrimary: #0d2c54;
    --color-surgePrimaryLighter: #0d2c5436;
    --color-surgePrimaryLighterHover: #a5b9d25c;
    --color-surgeSecondary: #00a6a6;
    --color-primary: #4f46e5; /* indigo-600 */
    --color-secondary: #9333ea; /* purple-600 */
    --color-accent: #00a6a6;
    --color-disabled: #B6AE9F;
    --color-bg: #ffffff;
    --accent: #7c3aed;
    --color-cancel: transparent; /* Cancel Color*/
    --color-text: #1f2937;
    /*  Gradients */
    --gradient-main-Dashboard: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    --gradient-main-Fusion1: linear-gradient(90deg, var(--accent), #5b21b6);
    --gradient-main-surgeONE: linear-gradient(to right, var(--color-surgePrimary), var(--color-surgeSecondary));
    /*  Fonts */
    --font-primary: 'Inter', sans-serif;
    --font-secondary: 'Poppins', sans-serif;
    /*  Font sizes */
    --font-size-xsm: 0.6rem;
    --font-size-xsml: 0.7rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-dtVal: 0.75rem;
    --font-size-optional: 0.55rem;
    /*  Border & shadow */
    --border-radius: 12px;
    --shadow-default: 0 2px 8px rgba(0, 0, 0, 0.1);
    --border-cancel: #0d2c54; /* Cancel Color*/
    --border-SurgeButton: #0d2c54;
    /*Hover State Colors*/
    --color-hover-surgePrimary: #295185;
    --color-pastReport-hover: #537eb5;
    --color-cancel-bg-light: #DBE2E9; /*Cancel Color*/
    --color-pastReport-hover: #537eb5;
    /*    font-weight*/
    --font-weight-sm: 400;
    --font-weight-md: 500;
    --font-weight-lg: 600;
    --font-weight-2xl: 700;
    /* color palatte For Graphs Deeper SurgeONe Colour(#0d2c54) to Lighter*/
    --color-deep-1: #11284D; /* Deep steel navy */
    --color-deep-2: #193E6A; /* Bold midnight blue */
    --color-deep-3: #23588A; /* Deep ocean blue */
    --color-deep-4: #2E6EA6; /* Strong cobalt */
    --color-deep-5: #3D82B8; /* Bright azure */
    --color-deep-6: #5197CA; /* Vibrant sky blue */
    --color-deep-7: #6EAFDB; /* Clear horizon blue */
    --color-deep-8: #91C4E8; /* Soft ice blue */
    --color-deep-9: #B3D8F3; /* Light pastel blue */
    --color-deep-10: #A9C8F2; /* Pale morning blue */
}
 
/* 🌙 DARK THEME */
[data-theme="dark"] {
    --color-primary: #818cf8; /* lighter indigo */
    --color-secondary: #c084fc; /* lighter purple */
    --color-accent: #00c2c2;
    --color-surgePrimary: #001f3f;
    --color-surgeSecond: #006666;
    --color-bg: #0f172a; /* dark navy */
    --accent: #8b5cf6;
    --color-text: #e5e7eb;
    /* Gradients updated for dark theme */
    --gradient-main-Dashboard: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    --gradient-main-Fusion1: linear-gradient(90deg, var(--accent), #4c1d95);
    --gradient-main-surgeONE: linear-gradient(to right, var(--color-surgePrimary), var(--color-surgeSecond));
    --shadow-default: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* Small Button */

/* Primary Button  Use it like this - "btnsurgePrimary-sm"  */
.btnHolder {
    display: flex ;
    justify-content: right;
    column-gap: 10px; /* This should be the column Gap */

    /*    new additions*/
    align-items: center;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.btnsurgePrimary-sm {
    display: flex;
    padding: 5px 10px;
    border-radius: 0.4rem;
    border: 1px solid #b8b8b8;
    background-color: #0d2c54;
    transition: background-color 0.2s ease-in-out;
    color: #fff;
    font-size: 12px;

    /*    new additions*/
    align-items: center;
}
    .btnsurgePrimary-sm.disabled,
    .btnsurgePrimary-sm:disabled {
        background-color: #a0a0a0; /* faded background */
        color: #e0e0e0; /* faded text */
        border-color: #d0d0d0; /* softer border */
        cursor: not-allowed;
        opacity: 0.6; /* subtle fade effect */
        pointer-events: none; /* prevent interaction */
    }

.btnsurgePrimary-sm:hover {
    background-color: #295185;
}

.btnsurgePrimary-sm span {
    align-content: center;
}

.btnsurgePrimary-sm span:first-child.material-icons {
    color: #f4fdff;
    margin-right: 6px;
    font-size: inherit;
}
/* Secondary Button- Use it like this - "btnsurgePrimary-sm inv" */
    .btnsurgePrimary-sm.inv {
        background-color: #fff !important;
        border: 1px solid #0d2c54;
        Color: #333 !important;
        transition: background-color 0.5s ease-in-out;
        align-items: center;
    }

.btnsurgePrimary-sm.inv:hover {
    background-color: #dcebff !important;
}

.btnsurgePrimary-sm.inv span:first-child.material-icons {
    color: #333 !important;
}

/* Medium Sized*/
.btnsurgePrimary-md {
    display: flex;
    padding: 8px 14px;
    border-radius: 0.4rem;
    border: 1px solid #b8b8b8;
    background-color: #0d2c54;
    transition: background-color 0.5s ease-in-out;
    color: #fff;
    font-size: medium;
}

.btnsurgePrimary-md:hover {
    background-color: #00a6a6;
}

.btnsurgePrimary-md span {
    align-content: center;
}

 .btnsurgePrimary-md span:first-child.material-icons {
      color: #f4fdff;
      margin-right: 6px;
      font-size: inherit;
 }