/* =========================================
    CSS (GLOBAL)
    Bootstrap 5 Design System - Figma Implementation
    All Alert Variants from Figma node 4:192629
   ========================================= */
/* 
---------------------------------------------
GENERAL 
----------------------------------------------
*/

/* COLORS------------------- */
:root {
    --cyan-50: #E3F8FC;
    --cyan-100: #B6E7FC;
    --cyan-200: #7AC9EB;
    --cyan-300: #3DACDB;
    --cyan-400: #008CC8;
    --cyan-500: #097CAD;
    --cyan-600: #056087;
    --cyan-700: #034C6B;
    --cyan-800: #013145;
    --cyan-900: #001D29;

    --blue-50: #E6EAFC;
    --blue-100: #C0CAFA;
    --blue-200: #93A5FA;
    --blue-300: #647BED;
    --blue-400: #415AD9;
    --blue-500: #2840B8;
    --blue-600: #1E3294;
    --blue-700: #202D6B;
    --blue-800: #1C2447;
    --blue-900: #141829;

    --red-50: #FFE0E3;
    --red-100: #FFCCD0;
    --red-200: #FFB2B9;
    --red-300: #FF919A;
    --red-400: #FF6F7B;
    --red-500: #DB4653;
    --red-600: #B22733;
    --red-700: #8F1520;
    --red-800: #6B0D15;
    --red-900: #4A0108;

    --orange-50: #FFE9D9;
    --orange-100: #FCDDC5;
    --orange-200: #FFCFAB;
    --orange-300: #FFB780;
    --orange-400: #FF9D52;
    --orange-500: #FF892D;
    --orange-600: #E07422;
    --orange-700: #C26117;
    --orange-800: #A64D08;
    --orange-900: #8F3F03;

    --yellow-50: #FFFAEB;
    --yellow-100: #FFF4CE;
    --yellow-200: #FFEBA8;
    --yellow-300: #FFE07D;
    --yellow-400: #FAD355;
    --yellow-500: #E8C24A;
    --yellow-600: #CCAA39;
    --yellow-700: #B29020;
    --yellow-800: #96770F;
    --yellow-900: #7A5E00;

    --green-50: #E5FAE8;
    --green-100: #D0F2D5;
    --green-200: #ACE3B4;
    --green-300: #84CF8E;
    --green-400: #5FB86B;
    --green-500: #3F9E4C;
    --green-600: #2E8239;
    --green-700: #326E3A;
    --green-800: #2D5232;
    --green-900: #29402C;

    --teal-50: #E6FAF4;
    --teal-100: #D2F4EA;
    --teal-200: #A6E9D5;
    --teal-300: #79DFC1;
    --teal-400: #4DD4AC;
    --teal-500: #20C997;
    --teal-600: #1AA179;
    --teal-700: #13795B;
    --teal-800: #0D503C;
    --teal-900: #06281E;

    --turqoise-50: #EBFFFE;
    --turqoise-100: #D9FFFC;
    --turqoise-200: #AFFAF4;
    --turqoise-300: #6CF0E6;
    --turqoise-400: #10E3D3;
    --turqoise-500: #00C8B9;
    --turqoise-600: #0BA195;
    --turqoise-700: #077A72;
    --turqoise-800: #045C55;
    --turqoise-900: #01423D;

    --indigo-50: #EFE8FC;
    --indigo-100: #E0CFFC;
    --indigo-200: #C29FFA;
    --indigo-300: #A370F7;
    --indigo-400: #8540F5;
    --indigo-500: #6610F2;
    --indigo-600: #520DC2;
    --indigo-700: #3D0A91;
    --indigo-800: #290661;
    --indigo-900: #140330;
 
    --gray-50: #F7F8FA;
    --gray-100: #F0F2F5;
    --gray-200: #DCE0E5;
    --gray-300: #C9CED4;
    --gray-400: #AFB8B7;
    --gray-500: #969E9D;
    --gray-600: #767D7D;
    --gray-700: #565C5C;
    --gray-800: #383D3D;

    --light: #F8F9FA;
    --dark: #202429;
    --white: #FFF;
    --black: #000; 

    --Body-Text-Body-Color: #383D3D;
    --Theme-Primary : #0BA195;
    --Theme-Primary-Hover: #077A72;

    /* Defualt time picker height */
    --dp-time-col-height: 200px;
}


/* SHADOW--------------------- */
.small-shadow-global {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}

.regular-shadow-global {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
}

.large-shadow-global{
    box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.17);
} 

/* TYPOGRAPHY---------------------------------- */
.h1-global {
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 43.2px */
}

.h2-global  {
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 33.6px */
}

.h3-global {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 28.8px */
}

.h4-global {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 24px */
}

.h5-global {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 21.6px */
}

.h6-global {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 19.2px */
}

.subtitle-global, .text-line-muted-global {
    color: var(--gray-600);
}

.text-line-global{
    color: var(--Body-Text-Body-Color)
}

.text-link-global {
    color: var(--Theme-Primary);
}

.text-underline-global {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

/* FONT STYLES--------------------- */
.large-global {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
}

.regular-global {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
}

.small-global {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
}

.extra-small-global {
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
}

.extra-light-global {
    font-weight: 200;
}

.medium-global {
   font-weight: 500; 
}

.semibold-global {
   font-weight: 600; 
}

.bold-global {
    font-weight: 700;
}

.extrabold-global {
    font-weight: 800;
}

.black-global {
    font-weight: 900;
}

.italic-global {
    font-weight: 400;
    font-style: italic;
}

/* ICON SIZES/FONT SIZE -------------------- */
.icon-8-global {
    font-size: 8px;
}

.icon-10-global {
    font-size: 10px;
}

.icon-12-global {
    font-size: 12px;
}

.icon-14-global {
    font-size: 14px;
}

.icon-16-global {
    font-size: 16px;
}

.icon-18-global{
    font-size: 18px;
}

.icon-20-global{
    font-size: 20px;
}

.icon-22-global{
    font-size: 22px;
}

.icon-24-global{
    font-size: 24px;
}

.icon-32-global{
    font-size: 32px;
}

.icon-48-global{
    font-size: 48px;
}

/* Gaps/Flex Position-------------- */
.flex-col-global {
    display: flex;
    flex-direction: column;
}

.flex-row-global {
    display: flex;
    flex-direction: row;
}

.gap-8-global {
    gap:8px;
}

.gap-12-global{
 gap:12px;
}

.gap-16-global{
    gap: 16px;
}

.gap-24-global {
    gap:24px
}

.gap-32-global{
    gap: 32px
}

.gap-48-global{
    gap: 48px
}

/* Border--------------- */
.border-radius-5-global {
    border-radius: 5px;
}

.border-gray-600-global {
    border: 1px solid var(--gray-600);
}


.border-gray-600-bottom-global {
    border-bottom: 1px solid var(--gray-600);
}

/* Animation--------- */
/* NOT FOR MODALS OR TOAST, please use animate.css for them */
@keyframes globalSlideIn {
    from {
        transform: translateY(var(--slide-distance, -20px));
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes globalSlideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(var(--slide-distance, -20px));
        opacity: 0;
    }
}

.slide-in-global {
    animation: globalSlideIn 0.3s ease forwards;
}

.slide-out-global {
    animation: globalSlideOut 0.3s ease forwards;
}

/* 
---------------------------------------------
COMPONENTS 
----------------------------------------------
*/

/* Alerts & Notification */

/* Default Position Of Alert */
.default-pos-global {
    position: fixed;
    top: 55px;
    right: 0;
    z-index: 9999;
    min-width: 250px;
}

.alert-global {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
}

.alert-msg-wrap-global{
    gap: 8px;
    flex: 1; 
    min-width: 0;   
}

.alert-msg-global{
    display: block;
    width: 100%;
}

.alert-close-global:hover{
    opacity: 0.8;
}

.primary-alert-global {
    background: #ebfffe;
    border-color: #10e3d3;
    color: #045c55;
}

.secondary-alert-global {
    background: #f7fafa;
    border-color: #cbd4d3;
    color: #383d3d;
}

.success-alert-global {
    background: #e5fae8;
    border-color: #84ce8e;
    color: #2d5232;
}

.danger-alert-global {
    background: #ffe0e3;
    border-color: #ff919a;
    color: #6b0d15;
}

.warning-alert-global {
    background: #fffaeb;
    border-color: #ffe07d;
    color: #96770f;
}

.info-alert-global {
    background: #ffe9d9;
    border-color: #ffaf73;
    color: #a64d08;
}

.light-alert-global {
    background: #f7fafa;
    border-color: #cbd4d3;
    color: #383d3d;
}

.dark-alert-global {
    background: #f7fafa;
    border-color: #cbd4d3;
    color: #383d3d;
}

/* Badge & Tags---------------------
*/
.rounded-global{
    border-radius: 4px;
}

.badge-tag-global {
    display: flex;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.badge-tag-primary-global {
    background: var(--Theme-Primary);
    color: var(--white);
}

.badge-tag-gray-global {
    background: var(--gray-600);
    color: var(--white);
}

.badge-tag-green-global {
    background: var(--green-500);
    color: var(--white);
}

.badge-tag-red-global {
    background: var(--red-500);
    color: var(--white);
}

.badge-tag-yellow-global {
   background: var(--yellow-500); 
   color: var(--black);
}

.badge-tag-orange-global {
   background: var(--orange-500);
   color: var(--black); 
}

.badge-tag-light-global {
   background: var(--gray-200);
   color: var(--black);
}

.badge-tag-black-global {
   background: var(--black); 
   color: var(--white);
}


/* BUTTONS--------------------------- */
.btn-global{
    border-radius: 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.btn-global:disabled{
    opacity: 0.65;
    cursor: default;
    user-select: none;
}

/* Solid variants */


.btn-primary-global{
    color: var(--white);
    background: var(--Theme-Primary);
    border: 1px solid var(--Theme-Primary);
}

.btn-primary-global:hover{
    color: var(--white);
    border: 1px solid var(--Theme-Primary);
    background: var(--Theme-Primary);
    opacity: 0.8;
}

.btn-primary-global.active{
    color: var(--white);
    background: var(--Theme-Primary-Hover);
    border: 1px solid var(--Theme-Primary-Hover);
}

/* ---------------------------------- */

.btn-secondary-global{
    color: var(--white);
    background: #757D7C;
    border: 1px solid #757D7C;
}

.btn-secondary-global:hover{
    color: var(--white);
    background: #565C5C;
    border: 1px solid #565C5C;
}

.btn-secondary-global.active{
    color: var(--white);
    background: var(--gray-800);
    border: 1px solid var(--gray-800);
}

/* ---------------------------------- */

.btn-success-global{
    color: var(--white); 
    border: 1px solid var(--green-500);
    background: var(--green-500);
}

.btn-success-global:hover{
    color: var(--white);
    border: 1px solid var(--green-600);
    background: var(--green-600);
}

.btn-success-global.active{
    color: var(--white);
    border: 1px solid var(--green-700);
    background: var(--green-700);
}

/* ---------------------------------- */

.btn-danger-global{
    color: var(--white);
    border: 1px solid var(--red-500);
    background: var(--red-500);
}

.btn-danger-global:hover{
    color: var(--white);
    border: 1px solid var(--red-600);
    background: var(--red-600);
}

.btn-danger-global.active{
    color: var(--white);
    border: 1px solid var(--red-700);
    background: var(--red-700);
}
 
/* ---------------------------------- */

.btn-warning-global{
    color: var(--black);
    border: 1px solid var(--yellow-300);
    background: var(--yellow-300);
}

.btn-warning-global:hover{
    border: 1px solid var(--yellow-400);
    background: var(--yellow-400);
}

.btn-warning-global.active{
    border: 1px solid var(--yellow-500);
    background: var(--yellow-500);
}

/* ---------------------------------- */

.btn-info-global{
    color: var(--white);
    border: 1px solid var(--orange-500);
    background: var(--orange-500);
}

.btn-info-global:hover{
    color: var(--white);
    border: 1px solid var(--orange-600);
    background: var(--orange-600);
}

.btn-info-global.active{
    color: var(--white);
    border: 1px solid var(--orange-700);
    background: var(--orange-700);
}

/* ---------------------------------- */

.btn-dark-global{
    color: var(--white);
    border: 1px solid var(--dark);
    background: var(--dark);
}

.btn-dark-global:hover{
    color: var(--white);
    border: 1px solid var(--gray-800);
    background: var(--gray-800);
}

.btn-dark-global.active{
    color: var(--white);
    border: 1px solid var(--Components-Button-Dark-Active-Border, #252929);
    background: var(--Components-Button-Dark-Active-Background, #252929);
}

/* ---------------------------------- */

.btn-light-global{
    border: 1px solid var(--Theme-Light, #F7FAFA);
    background: var(--Theme-Light, #F7FAFA);
}

.btn-light-global:hover{
    border: 1px solid var(--Components-Button-Light-Hovered-Border, #DEE5E4);
    background: var(--Components-Button-Light-Hovered-Background, #DEE5E4);
}

.btn-light-global.active{
    border: 1px solid var(--Components-Button-Light-Active-Border, #CBD4D3);
    background: var(--Components-Button-Light-Active-Background, #CBD4D3);
}

/* ---------------------------------- */
.btn-ghost-global {
    border: transparent;
    border: none;
    background-color: transparent;
}

.btn-ghost-global:hover{
    opacity: 0.65;
}

/* ---------------------------------- */
.btn-link-global {
    color: #0ba195;
    text-decoration: none;
    background-color: transparent;
    border: 1px solid transparent;
}

.btn-link-global:hover{
    color: #0ba195;
    text-decoration: underline;
}

.btn-link-global:disabled{
    color: var(--gray-600);
}

/* ---------------------------------- */
/* Outline variants */

.btn-outline-primary-global{
    color: var(--Theme-Primary);
    border: 1px solid var(--Theme-Primary);
    background: var(--white);
}

.btn-outline-primary-global:hover{
    color: var(--Theme-Primary);
    border: 1px solid var(--Theme-Primary);
    background: var(--Turqoise-50, #EBFFFE);
}

.btn-outline-primary-global.active{
    border: 1px solid var(--Theme-Primary);
    background: var(--Turqoise-100, #D9FFFC);
}

/* ---------------------------------- */

.btn-outline-secondary-global{
    color: var(--gray-800);
    border: 1px solid var(--Theme-Secondary, #757D7C);
    background: var(--white, #FFF);
}

.btn-outline-secondary-global:hover{
    color: var(--gray-800);
    border: 1px solid var(--Theme-Secondary, #757D7C);
    background: var(--gray-100, #F0F5F5);
}

.btn-outline-secondary-global.active{
    color: var(--gray-800);
    border: 1px solid var(--Theme-Secondary, #757D7C);
    background: var(--gray-200, #DEE5E5);
}

/* ---------------------------------- */

.btn-outline-success-global{
    color: var(--green-800);
    border: 1px solid var(--green-500);
    background: var(--white);
}

.btn-outline-success-global:hover{
    color: var(--green-800);
    border: 1px solid var(--green-500);
    background: var(--green-50);
}

.btn-outline-success-global.active{
    color: var(--green-800);
    border: 1px solid var(--green-500);
    background: var(--green-100);
}

/* ---------------------------------- */

.btn-outline-danger-global{
    color: var(--red-500);
    border: 1px solid var(--red-500);
    background: var(--white);
}

.btn-outline-danger-global:hover{
    color: var(--red-500);
    border: 1px solid var(--red-500);
    background: var(--red-50);
}

.btn-outline-danger-global.active{
    color: var(--red-500);
    border: 1px solid var(--red-500);
    background: var(--red-100);
}

/* ---------------------------------- */

.btn-outline-warning-global{
    color: var(--yellow-800);
    border: 1px solid var(--yellow-600);
    background: var(--white);
}

.btn-outline-warning-global:hover{
    color: var(--yellow-800);
    border: 1px solid var(--yellow-600);
    background: var(--yellow-50);
}

.btn-outline-warning-global.active{
    color: var(--yellow-800);
    border: 1px solid var(--yellow-600);
    background: var(--yellow-100);
}

/* ---------------------------------- */

.btn-outline-info-global{
    color: var(--orange-500);
    border: 1px solid var(--orange-500);
    background: var(--white);
}

.btn-outline-info-global:hover{
    color: var(--orange-500);
    border: 1px solid var(--orange-500);
    background: var(--orange-50)
}

.btn-outline-info-global.active{
    color: var(--orange-500);
    border: 1px solid var(--orange-700);
    background: var(--orange-100);
}

/* ---------------------------------- */

.btn-outline-light-global{
    color: var(--gray-700);
    border: 1px solid var(--gray-400);
    background: var(--white);
}

.btn-outline-light-global:hover{
    color: var(--gray-700);
    border: 1px solid var(--gray-500);
    background: var(--gray-100);
}

.btn-outline-light-global.active{
    color: var(--gray-700);
    border: 1px solid var(--gray-600);
    background: var(--gray-200);
}

/* ---------------------------------- */

.btn-outline-dark-global{
    border: 1px solid var(--dark);
    background: var(--white);
}

.btn-outline-dark-global:hover{
    border: 1px solid var(--dark);
    background: var(--gray-100);
}

.btn-outline-dark-global.active{
    border: 1px solid var(--dark);
    background: var(--gray-200);
}

/* ---------------------------------- */
/* Size */
.btn-sm-global{
    padding: 2px 3px;
}

.btn-md-global {
    padding: 2px 6px;
}

.btn-lg-global{
    padding: 4px 8px;
}

.btn-xl-global{
    padding: 6px 8px;
}

/* ---------------------------------- */

/* Button's Dropdown - To avoid confusion w the actual dropdown*/
.btn-split-menu-global {
    display: none;
    position: absolute;
    z-index: 1000;
    min-width: 160px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    padding: 4px 0;
    list-style: none;
    margin: 4px 0 0 0;
}

.btn-split-menu-global.open {
    display: block;
}

.btn-split-menu-global li a {
    display: block;
    padding: 8px 16px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

.btn-split-menu-global li a:hover {
    background: #f5f5f5;
}

/* ---------------------------------- */

/* DIMMER, DIVIDER, SPINNERS------------------ */
/* Divider */
.divider-global {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
  color: #9ca3af;
  font-size: 14px;
  line-height: 1;
}

.divider-global::before,
.divider-global::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: #d1d5db;
}

.divider-global--dashed::before,
.divider-global--dashed::after {
  background: none;
  border-top: 1px dashed #d1d5db;
}

/* No text — single full line */
.divider-global:not(:has(span))::before {
  display: block;
}
.divider-global:not(:has(span))::after {
  display: none;
}

/* Left: short line before, long line after */
.divider-global--left::before { flex: 0 0 32px; }
.divider-global--left::after  { flex: 1; }

/* Center: equal lines */
.divider-global--center::before,
.divider-global--center::after { flex: 1; }

/* Right: long line before, short line after */
.divider-global--right::before { flex: 1; }
.divider-global--right::after  { flex: 0 0 32px; }

/* Spinners */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.custom-spinner-global {
  width: 16px;
  height: 16px;
  border: 2.4px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  display: inline-block;
  vertical-align: -3px;
  animation: spin 0.8s linear infinite;
}

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: .4; }
  40%           { transform: scale(1);   opacity: 1; }
}

.sp-dots-global { 
    display: inline-flex; 
    gap: 4px; 
    align-items: center; 
    vertical-align: -2px; 
}

.sp-dots-global span { 
    width: 6px; 
    height: 6px; 
    border-radius: 50%; 
    background: #555; 
    animation: bounce 1s ease-in-out infinite; 
}

.sp-dots-global span:nth-child(2) { 
    animation-delay: .15s; 
}

.sp-dots-global span:nth-child(3) { 
    animation-delay: .30s; 
}

/* ACCORDION--------------------------- */

.accordion-global {
    gap: 4px;
    align-self: stretch;
}

.accordion-disabled-global {
    opacity: 0.65;
    cursor: none;
    pointer-events: none;
}

/* Collapse--------------------------- */
.collapse-panel-global {
    display: none;
}

.collapse-panel-global.open {
   display: grid;
}

/* Navbar-------------- */
.inactive-global {
    color: var(--gray-500);
    cursor: default;
}

.active-global,
.active-global:hover,  
.inactive-global:hover,
.active-global:focus,
.inactive-global:focus{
    color: var(--white);
    cursor: default;
}

/* 
---------------------------------------------
Checkbox, Radios & Switches
----------------------------------------------
*/

/* CheckBox */
/* ── Base ───────────────────────── */
.cb-wrapper-global label {
  margin-bottom: 0;
  line-height: 1;
}

.cb-wrapper-global.form-check {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 0;
}

.cb-wrapper-global.form-check .form-check-input {
  position: static;
  float: none;
  margin: 0;
  flex-shrink: 0;
}

.cb-wrapper-global.form-check .form-check-label {
  padding-left: 0;
  margin: 0;
  color: var(--black);
}

.cb-wrapper-global .form-check-input:focus {
  outline: 1px solid var(--gray-300) !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* ── NORMAL TYPE ───────────────────────── */

.cb-wrapper-global.normal-global .form-check-input:checked,
.cb-wrapper-global.normal-global .form-check-input:indeterminate {
  background-color: var(--Theme-Primary);
  border-color: var(--Theme-Primary);
}

/* active */
.cb-wrapper-global.normal-global.active-global .form-check-input {
  outline: 1px solid var(--gray-300);
}

/* focus */
.cb-wrapper-global.normal-global.focus-global .form-check-input {
    outline: 1px solid var(--Theme-Primary);
    box-shadow: none;
}

/* disabled */
.cb-wrapper-global.normal-global .form-check-input:disabled {
    opacity: 0.5;
    border-color: var(--gray-400);
    pointer-events: none;
}


/* ── VALID TYPE ───────────────────────── */
.cb-wrapper-global.valid-global .form-check-label{
    color: var(--green-500);
}

.cb-wrapper-global.valid-global .form-check-input:checked,
.cb-wrapper-global.valid-global .form-check-input:indeterminate {
  background-color: var(--green-500);
  border-color: var(--green-500);
}

/* active */
.cb-wrapper-global.valid-global.active-global .form-check-input {
  outline: 1px solid var(--green-500);
}

/* focus */
 .form-check-input {
    outline: 1px solid var(--green-600);
    box-shadow: none;
}

/* disabled */
.cb-wrapper-global.valid-global .form-check-input:disabled {
  opacity: 0.5;
  border-color: var(--green-400);
  pointer-events: none;
}


/* ── INVALID TYPE ───────────────────────── */
.cb-wrapper-global.invalid-global .form-check-label{
    color: var(--red-500);
}

.cb-wrapper-global.invalid-global .form-check-input:checked,
.cb-wrapper-global.invalid-global .form-check-input:indeterminate {
  background-color: var(--red-500);
  border-color: var(--red-500);
}

/* active */
.cb-wrapper-global.invalid-global.active-global .form-check-input {
  outline: 1px solid var(--red-500);
}

/* focus */
.cb-wrapper-global.invalid-global.focus-global .form-check-input {
  outline: 1px solid var(--red-600);
  box-shadow: none;
}

/* disabled */
.cb-wrapper-global.invalid-global .form-check-input:disabled {
  opacity: 0.5;
  border-color: var(--red-400);
  pointer-events: none;
}

/* RADIO */
/* ── Base ───────────────────────── */
.rb-wrapper-global label {
  margin-bottom: 0;
  line-height: 1;
}

.rb-wrapper-global.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
}

.rb-wrapper-global.form-check .form-check-input {
  position: static;
  float: none;
  margin: 0;
  flex-shrink: 0;
  border-radius: 50% !important;
}

.rb-wrapper-global.form-check .form-check-label {
  padding-left: 0;
  margin: 0;
  color: var(--black);
}

.rb-wrapper-global .form-check-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ── NORMAL TYPE ───────────────────────── */
.rb-wrapper-global.normal-global .form-check-input:checked {
  background-color: var(--Theme-Primary);
  border-color: var(--Theme-Primary);
}

.rb-wrapper-global.normal-global.active-global .form-check-input {
  outline: 1px solid var(--gray-300);
}

.rb-wrapper-global.normal-global.focus-global .form-check-input {
  outline: 1px solid var(--Theme-Primary);
  box-shadow: 0 0 0.3em 0.3em #38B8BF;
}

.rb-wrapper-global.normal-global .form-check-input:disabled {
  opacity: 0.5;
  border-color: var(--gray-400);
  pointer-events: none;
}

/* ── VALID TYPE ───────────────────────── */
.rb-wrapper-global.valid-global .form-check-label {
  color: var(--green-500);
}

.rb-wrapper-global.valid-global .form-check-input:checked {
  background-color: var(--green-500);
  border-color: var(--green-500);
}

.rb-wrapper-global.valid-global.active-global .form-check-input {
  outline: 1px solid var(--green-500);
}

.rb-wrapper-global.valid-global.focus-global .form-check-input {
  outline: 1px solid var(--green-600);
  box-shadow: 0 0 0.3em 0.3em var(--green-500);
}

.rb-wrapper-global.valid-global .form-check-input:disabled {
  opacity: 0.5;
  border-color: var(--green-400);
  pointer-events: none;
}

/* ── INVALID TYPE ───────────────────────── */
.rb-wrapper-global.invalid-global .form-check-label {
  color: var(--red-500);
}

.rb-wrapper-global.invalid-global .form-check-input:checked {
  background-color: var(--red-500);
  border-color: var(--red-500);
}

.rb-wrapper-global.invalid-global.active-global .form-check-input {
  outline: 1px solid var(--red-500);
}

.rb-wrapper-global.invalid-global.focus-global .form-check-input {
  outline: 1px solid var(--red-600);
  box-shadow: 0 0 0.3em 0.3em var(--red-500);
}

.rb-wrapper-global.invalid-global .form-check-input:disabled {
  opacity: 0.5;
  border-color: var(--red-400);
  pointer-events: none;
}


/* ── Base ───────────────────────── */
.sw-wrapper-global {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sw-wrapper-global label {
  margin-bottom: 0;
  line-height: 1;
  color: var(--black);
  cursor: pointer;
  user-select: none;
}

.sw-track-global {
  position: relative;
  display: inline-block;
  border-radius: 999px;
  border: 1px solid;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
  background: #fff;
  outline: none;
  padding: 0;
}

.sw-knob-global {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  transition: left 0.2s ease, background-color 0.2s ease;
  pointer-events: none;
}

/* ── SIZE: sm ───────────────────────── */
.sw-wrapper-global.sm-sw .sw-track-global {
  width: 28px;
  height: 16px;
}
.sw-wrapper-global.sm-sw .sw-knob-global {
  width: 10px;
  height: 10px;
}
.sw-wrapper-global.sm-sw .sw-track-global[data-on="false"] .sw-knob-global { left: 2px; }
.sw-wrapper-global.sm-sw .sw-track-global[data-on="true"]  .sw-knob-global { left: 14px; }

/* ── SIZE: md ───────────────────────── */
.sw-wrapper-global.md-sw .sw-track-global {
  width: 40px;
  height: 22px;
}
.sw-wrapper-global.md-sw .sw-knob-global {
  width: 14px;
  height: 14px;
}
.sw-wrapper-global.md-sw .sw-track-global[data-on="false"] .sw-knob-global { left: 2px; }
.sw-wrapper-global.md-sw .sw-track-global[data-on="true"]  .sw-knob-global { left: 20px; }

/* ── SIZE: lg ───────────────────────── */
.sw-wrapper-global.lg-sw .sw-track-global {
  width: 52px;
  height: 28px;
}
.sw-wrapper-global.lg-sw .sw-knob-global {
  width: 18px;
  height: 18px;
}
.sw-wrapper-global.lg-sw .sw-track-global[data-on="false"] .sw-knob-global { left: 3px; }
.sw-wrapper-global.lg-sw .sw-track-global[data-on="true"]  .sw-knob-global { left: 27px; }

/* ── NORMAL TYPE ───────────────────────── */
.sw-wrapper-global.normal-global .sw-track-global[data-on="false"] {
  border-color: var(--gray-300);
  background: #fff;
}
.sw-wrapper-global.normal-global .sw-track-global[data-on="false"] .sw-knob-global {
  background-color: var(--gray-300); /* knob = border color */
}

.sw-wrapper-global.normal-global .sw-track-global[data-on="true"] {
  border-color: var(--Theme-Primary);
  background: var(--Theme-Primary);
}
.sw-wrapper-global.normal-global .sw-track-global[data-on="true"] .sw-knob-global {
  background-color: var(--gray-500);
}

.sw-wrapper-global.normal-global.active-global .sw-track-global {
  outline: 1px solid var(--gray-300);
}

.sw-wrapper-global.normal-global.focus-global .sw-track-global {
  outline: 1px solid var(--Theme-Primary);
  box-shadow: 0 0 0.3em 0.3em rgba(56, 184, 191, 0.35);
}

.sw-wrapper-global.normal-global.disabled-global .sw-track-global {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── VALID TYPE ───────────────────────── */
.sw-wrapper-global.valid-global label { color: var(--green-500); }

.sw-wrapper-global.valid-global .sw-track-global[data-on="false"] {
  border-color: var(--green-500);
  background: #fff;
}
.sw-wrapper-global.valid-global .sw-track-global[data-on="false"] .sw-knob-global {
  background-color: var(--green-500);
}

.sw-wrapper-global.valid-global .sw-track-global[data-on="true"] {
  border-color: var(--green-500);
  background: var(--green-500);
}
.sw-wrapper-global.valid-global .sw-track-global[data-on="true"] .sw-knob-global {
  background-color: var(--gray-500);
}

.sw-wrapper-global.valid-global.active-global .sw-track-global {
  outline: 1px solid var(--green-500);
}

.sw-wrapper-global.valid-global.focus-global .sw-track-global {
  outline: 1px solid var(--green-600);
  box-shadow: 0 0 0.3em 0.3em rgba(34, 197, 94, 0.35);
}

.sw-wrapper-global.valid-global.disabled-global .sw-track-global {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── INVALID TYPE ───────────────────────── */
.sw-wrapper-global.invalid-global label { color: var(--red-500); }

.sw-wrapper-global.invalid-global .sw-track-global[data-on="false"] {
  border-color: var(--red-500);
  background: #fff;
}
.sw-wrapper-global.invalid-global .sw-track-global[data-on="false"] .sw-knob-global {
  background-color: var(--red-500);
}

.sw-wrapper-global.invalid-global .sw-track-global[data-on="true"] {
  border-color: var(--red-500);
  background: var(--red-500);
}
.sw-wrapper-global.invalid-global .sw-track-global[data-on="true"] .sw-knob-global {
  background-color: var(--gray-500);
}

.sw-wrapper-global.invalid-global.active-global .sw-track-global {
  outline: 1px solid var(--red-500);
}

.sw-wrapper-global.invalid-global.focus-global .sw-track-global {
  outline: 1px solid var(--red-600);
  box-shadow: 0 0 0.3em 0.3em rgba(239, 68, 68, 0.35);
}

.sw-wrapper-global.invalid-global.disabled-global .sw-track-global {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 
---------------------------------------------
Date & Time Picker
----------------------------------------------
*/
/* ── Base ───────────────────────── */
.dp-wrap-global {
  display: inline-block;
  font-family: var(--font-sans);
}

.dp-cal-global {
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  user-select: none;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

/* ── Nav ───────────────────────── */
.dp-nav-global {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.dp-nav-global button {
    background: none;
    border: none;
    border-radius: var(--border-radius-md);
    color:var(--gray-400);
    cursor: pointer;
    padding: 3px 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    outline: none;
    box-shadow: none;
}

.dp-nav-global button:hover {
    color: var(--gray-500);
    outline: none;
    box-shadow: none;
}

.dp-nav-global button:focus {
    outline: none;
    box-shadow: none;
}

.dp-nav-month-global {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* ── Grid ───────────────────────── */
.dp-grid-global {
    padding: 8px;
}

.dp-dow-global {
    display: grid;
    margin-bottom: 4px;
}

.dp-dow-global span {
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-tertiary);
    padding: 2px 0;
}

.dp-days-global {
    display: grid;
}

/* ── Day cells ───────────────────────── */
.dp-day-global {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-primary);
    border: none;
    background: none;
}

.dp-day-global:hover:not(.dp-day--other):not(.dp-day--selected) {
    background: var(--color-background-secondary);
}

.dp-day-global--other {
    color: var(--gray-400);
    cursor: default;
}

.dp-day-global--today {
    font-weight: 500;
    border: 1px solid var(--Theme-Primary);
}

.dp-day-global--selected {
    background: var(--Theme-Primary) !important;
    color: #fff !important;
}

.dp-day-global--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Footer ───────────────────────── */
.dp-footer-global {
    border-top: 0.5px solid var(--color-border-tertiary);
    display: flex;
    flex-direction: column;
}

.dp-footer-global button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 7px;
    font-size: 12px;
    color: var(--Theme-Primary);
}

.dp-footer-global button:hover {
    background: var(--color-background-secondary);
}

.dp-footer-global button + button {
    border-top: 0.5px solid var(--color-border-tertiary);
}

/* ── SIZE: sm ───────────────────────── */
.dp-sm-global {
    width: 208px;
}

.dp-sm-global .dp-nav-global { 
    height: 32px;
    align-self: stretch;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid var(--Theme-Border, #DEE5E4);
    background: var(--Gray-White, #FFF);
    flex-direction: row;
}

.dp-sm-global .dp-nav-month-global  { 
    font-size: 11px; 
}

.dp-sm-global .dp-nav-global button { 
    font-size: 11px; padding: 2px 4px; 
}

.dp-sm-global .dp-grid-global { 
    padding: 5px; 
}

.dp-sm-global .dp-dow-global span { 
    font-size: 10px; 
}

.dp-sm-global .dp-day-global { 
    font-size: 11px; 
}

.dp-sm-global .dp-footer-global button { 
    font-size: 11px; 
    padding: 5px; 
}

/* ── SIZE: md (default) ───────────────────────── */
.dp-md-global {
    width: 240px;
}

.dp-md-global .dp-nav-global  { 
    height: 34px;
    align-self: stretch;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid var(--Theme-Border, #DEE5E4);
    background: var(--Gray-White, #FFF);
    flex-direction: row;
}

.dp-md-global .dp-nav-month-global  { 
    font-size: 13px; 
}

.dp-md-global .dp-nav-global button { 
    font-size: 13px; 
    padding: 3px 6px; 
}

.dp-md-global .dp-grid-global { 
    padding: 8px; 
}

.dp-md-global .dp-dow-global span { 
    font-size: 11px; 
}

.dp-md-global .dp-day-global { 
    font-size: 13px; 
}

.dp-md-global .dp-footer-global button { 
    font-size: 12px; 
    padding: 7px; 
}


/* ── Range layout ───────────────────────── */
.dp-range-global {
  width: auto !important;
}

.dp-range-global .dp-panels-global {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.dp-panel-global {
  flex: 1;
  min-width: 0;
}

/* ── Range states ───────────────────────── */
.dp-day-global--in-range {
  background: var(--Theme-Primary-Light, rgba(56, 184, 191, 0.15));
  border-radius: 0;
  color: var(--color-text-primary);
}

.dp-day-global--range-start,
.dp-day-global--range-end {
  background: var(--Theme-Primary) !important;
  color: #fff !important;
  border-radius: 4px;
}

.dp-cal-global:not(.dp-selecting) .dp-day--range-start {
  border-radius: 4px 0 0 4px;
}

.dp-cal-global:not(.dp-selecting) .dp-day--range-end {
  border-radius: 0 4px 4px 0;
}

/* ── Time panel ───────────────────────── */
.dp-datetime-global {
  width: auto !important;
}

.dp-datetime-wrapper-global {
    display: flex;
}

.dp-datetime-cal-global {
    display: flex;
    flex-direction: column;
}

.dp-time-panel-global {
    overflow: hidden;
    flex: 1;
    min-height: 0;
    align-self: stretch;
}

.dp-time-display-global {
    text-align: center;
    font-weight: 500;
    padding: 10px 8px;
    font-size: 14px;
    color: var(--color-text-primary);
    font-family: "Roboto"; 
}

.dp-time-cols-global {
    display: flex;
    flex: 1;
    overflow: hidden;
    border-top: 1px solid var(--Theme-Border, #DEE5E4);
    border-bottom: 1px solid var(--Theme-Border, #DEE5E4);
}

.dp-time-col-global {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 4px 0;
    min-height: 0;
    height: var(--dp-time-col-height);
    scroll-snap-type: y mandatory;
    scrollbar-width: none; 
}


.dp-time-col-global::-webkit-scrollbar {
  display: none;
}

.dp-time-sep-global {
    display: flex;
    align-items: flex-start;
    padding-top: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
    border-left: 1px solid var(--Theme-Border, #DEE5E4);  
}

.dp-time-item-global {
    width: 24px;
    text-align: center;
    padding: 2px 4px;
    font-size: 12px;
    cursor: pointer;
    color: var(--color-text-primary);
    border-radius: 4px;
    margin: 1px 2px;
    scroll-snap-align: start;
}

.dp-time-item-global:hover {
    background: var(--gray-300);
}

.dp-time-item-global--active {
    background: var(--turqoise-100);
}

/* ── inside datetime calendar — md size ── */
.dp-datetime-global.dp-md-global .dp-time-col-global {
  --dp-time-col-height: 224px;
}

/* ── inside datetime calendar — sm size ── */
.dp-datetime-global.dp-sm-global .dp-time-col-global {
  --dp-time-col-height: 196px;
}

.dp-time-ok-global {
    display: flex;
    padding: 2px 3px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 3.2px;
    border: 1px solid var(--Theme-Primary);
    background: var(--Theme-Primary);
    color: white;
    cursor: pointer;
    font-size: 12px;
    align-self: flex-end;
    margin-right: 12px;
    justify-content: center;
}

.dp-time-ok-global:hover {
  opacity: 0.9;
}

/* ── Nav clickable title ───────────────────────── */
.dp-nav-clickable-global {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 4px;
}

.dp-nav-clickable-global:hover {
    opacity: 0.7;
}

/* ── Month / Year picker grid ───────────────────────── */
.dp-picker-grid-global {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 8px;
}

.dp-picker-cell-global {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    border: none;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-primary);
}

.dp-picker-cell-global:hover:not(.dp-picker-cell-global--active) {
    background: var(--color-background-secondary);
}

.dp-picker-cell-global--active {
    background: var(--Theme-Primary);
    color: #fff;
}

.dp-picker-cell-global--other {
    color: var(--gray-400);
}

.dp-picker-cell-global--disabled {
    background: var(--gray-300);
    cursor: not-allowed;
    pointer-events: none;
}

/* Calendar Card */
.cc-wrapper-global {
    max-width: 350px;
    margin: 0 auto;
}

/* Calendar Input Version */
.dpi-input-box-global {
  border: 1px solid var(--gray-400);
  background: var(--white);
  min-width: 250px;
  transition: border-color 0.15s;
}

.dpi-input-box-global:hover:not(.dpi-disabled-global):not(.dpi-readonly-global) {
  border-color: #38B8BF;
}

.dpi-open-global .dpi-input-box-global {
  border-color: #38B8BF;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
}

.dpi-disabled-global {
  opacity: 0.5;
  background: var(--gray-100);
}

.dpi-readonly-global {
  background: var(--gray-50);
}

.dpi-text-global {
  color: var(--Theme-Secondary);
}

.dpi-text-global--filled {
  color: var(--black);
}

.dpi-icon-global {
  color: var(--Theme-Secondary);
}

.dpi-dropdown-global {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;        /* ← increase from 4px to make room for arrow */
    z-index: 999;
    display: none;
}

.dpi-arrow-global {
    position: absolute;
    top: -6px;               /* sits just above the dropdown box */
    left: 16px;              /* align with input — adjust as needed */
    width: 12px;
    height: 12px;
    background: var(--white);
    /* border-left: 1px solid var(--gray-400); */
    border-top: 1px var(--gray-400);
    transform: rotate(45deg);
    z-index: 1;
}

.dpi-lg-global {
    border-radius: 4.8px;
    padding: 5px 8px;
}

.dpi-md-global  {
    border-radius: 4px;
    padding: 3px 8px;
}

.dpi-sm-global {
    border-radius: 3.2px;
    padding: 2px 4px;
}

.dpi-valid-global {
    border-color: var(--green-500) !important;
}

.dpi-invalid-global {
    border-color: var(--red-500) !important;
}

/* 
---------------------------------------------
Datalist & Inputs 
----------------------------------------------
*/
/* Datalist Wrapper */
.datalist-wrapper-global {
  position: relative;
  width: 100%;
}

/* Input Group Container */
.datalist-input-group-global {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Input Field */
.datalist-input-global {
  flex: 1;
  border: 1px solid var(--gray-400);
  border-radius: 4px;
  outline: none;
  transition: all 0.2s ease;
  font-family: inherit;
  height: 30px;
}

.datalist-sm-global {
    padding: 2px 6px;
}


.datalist-md-global {
    padding: 2px 8px;
}

.datalist-lg-global {
    padding: 4px 10px;
}

.datalist-input-global::placeholder {
  color: var(--gray-600);
}

.datalist-input-global:focus {
  border-color: #38B8BF;
  box-shadow: none;
}

.datalist-input-global:disabled {
  background-color: var(--gray-700);
  color: var(--gray-600);
  cursor: not-allowed;
}

/* Clear Button */
.datalist-clear-btn-global:hover {
  opacity: 0.8;
}

.datalist-clear-btn-global:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dropdown Container */
.datalist-dropdown-global {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  background-color: #ffffff;
  border: 1px solid var(--gray-400);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 1000;
}

.datalist-dropdown-global--open-global {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Options List */
.datalist-options-global {
  overflow-y: auto;
  padding: 8px 0;
}

/* Individual Option */
.datalist-option-global {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 16px;
  color: #1f2937;
  transition: background-color 0.15s ease;
  user-select: none;
}

.datalist-option-global:hover {
  background-color: var(--teal-200);
}

/* No Results */
.datalist-no-results-global {
  padding: 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 15px;
}

/* Scrollbar Styling */
.datalist-options-global::-webkit-scrollbar {
  width: 6px;
}

.datalist-options-global::-webkit-scrollbar-track {
  background: transparent;
}

.datalist-options-global::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 3px;
}

.datalist-options-global::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* ============================================
   INPUT
   ============================================ */

/* WRAPPER STYLES */

.input-wrapper-global {
    display: flex;
    flex-direction: column;
}

/* LABEL STYLES */

.input-label-global {
    color: #333;
    margin-bottom: 4px;
    display: block;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* Required indicator */
.input-label-required-global::after {
    content: ' *';
    color: var(--red-500);
    font-weight: bold;
}

/* CONTAINER STYLES */

.input-container-global {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid var(--gray-400);
    border-radius: 4px;
    transition: all 0.2s ease;
    overflow: hidden;
    gap: 8px;
    width: 100%;
}

/* Size-specific field styles */
.input-container-sm-global {
    padding: 2px 6px;
}

.input-container-md-global {
    padding: 2px 8px;
}

.input-container-lg-global {
    padding: 4px 10px;
}

/* Container states */
.input-container-focused-global {
    border-color: #38B8BF;
    outline: none;
}

.input-container-error-global {
    border-color: var(--red-500);
}

.input-container-success-global {
    border-color: var(--green-500);
}

.input-container-disabled-global {
    background-color: var(--gray-200);
    cursor: not-allowed;
    opacity: 0.6;
}

/* INPUT FIELD STYLES */

.input-field-global {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    color: #1f2937;
    transition: all 0.2s ease;
}

.input-field-global::placeholder {
    color: #9ca3af;
}

.input-field-global:disabled {
    color: #6b7280;
    cursor: not-allowed;
}

.input-field-global:read-only {
    color: #6b7280;
    background-color: transparent;
}

.input-field-color-global {
    /* inherits from input-field-global */
    cursor: pointer;
}

.input-field-range-global {
    padding: 0;
}

.input-field-textarea-global {
    resize: vertical;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    line-height: 1.5;
}

.input-field-file-global {
    cursor: pointer;
}

.input-field-select-global {
    cursor: pointer;
    appearance: none;
}

/* ICON STYLES */

.input-icon-left-global {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6b7280;
    pointer-events: none;
    margin-top: 1%;
}

.input-icon-right-global {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6b7280;
    pointer-events: none;
}

/* CLEAR BUTTON STYLES */

.input-clear-btn-global {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--gray-600);
    transition: all 0.2s ease;
}

.input-clear-btn-global:hover {
    color: var(--gray-500);
    background-color: rgba(0, 0, 0, 0.05);
}

.input-clear-btn-global:active {
    color: #374151;
    background-color: rgba(0, 0, 0, 0.1);
}

/* ERROR MESSAGE STYLES */

.input-error-global {
    color: var(--red-500);
    display: none;
    animation: slideDown 0.2s ease;
}

/* Search box */
.addon-search-btn-global {
    border: 1px solid var(--Theme-Primary);
    background: var(--Theme-Primary);
    color: var(--white);
}

.addon-default-global {
    border: 1px solid var(--gray-300);
    background: var(--gray-200);
}

.input-addon-right-global {
    border-radius: 0px 4px 4px 0px;
    display: flex;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
    font-weight: 500;
    cursor: pointer; 
    gap: 4px;
}

.input-addon-left-global{
    border-radius: 4px 0 0 4px;
    display: flex;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
    font-weight: 500;
    cursor: pointer; 
}

.input-up-btn-global {
    width: 100%;
    padding: 0px;
    border-top-width: medium;
    border-right-width: medium;
    border-bottom: 1px solid var(--gray-300);
    border-left-width: medium;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-left-color: currentcolor;
    border-image: initial;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    padding: 0 8px;
}

.input-down-btn-global {
    width: 100%;
    padding: 0px;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
}
/*
--------------------------------------------- 
Range
---------------------------------------------
 */

.custom-range-wrapper-global {
    position: relative;
    width: 100%;
}

.range-container-global  {
    position: relative;
    width: 100%;
    height: 30px;
}

/* TRACK */
.range-track-global  {
    position: absolute;
    top: 25%;
    left: 0;
    width: 100%;
    height: 6px;
    background: #ccc;
    transform: translateY(-50%);
    border-radius: 999px;
    z-index: 1;
}

/* THUMB */
.range-thumb-global {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    background: var(--Theme-Primary);
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
    transform: translate(-50%, -50%);
    z-index: 3;
}

/* Hover */
.range-thumb-global :hover {
    box-shadow: 0 0 0 4px rgba(49, 132, 253, 0.50);
    background: var(--turqoise-200);
    border: 1px solid var(--white);
}

/* Active */
.range-thumb-global :active {
    box-shadow: 0 0 0 4px rgba(49, 132, 253, 0.50);
    background: var(--turqoise-400);
    border: 1px solid var(--white);
}

/* MARKS */
.range-marks-bottom-global {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.range-marks-bottom-global span {
    transform: translateX(-50%);
    white-space: nowrap;
    user-select: none;
    width: 6px;
}

.range-disabled-global {
    cursor: none;
    pointer-events: none;
}

.range-marks-track-global  {
    position: absolute;
    top: 25%;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 2;
}

.range-mark-dot-global  {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid #999;
    background: white;
    cursor: default;
    transition: all 0.2s ease;
    z-index: 2;
   
}

.range-mark-dot-global.active {
    background: var(--white);
    border-color: var(--turqoise-300);
}

/* 
---------------------------------------------
Rating
---------------------------------------------
*/

.rating-container-global  {
    display: flex;
    gap: 8px;
    cursor: pointer;
    width: fit-content;
}

.rating-icon-global  {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease;
    position: relative;
}

.rating-icon-global:hover {
    transform: scale(1.1);
}

.rating-icon-global  i {
    transition: color 0.1s ease;
}

.rating-icon-global .full i {
    color: #ffc107;
}

.rating-icon-global .half i {
    position: relative;
    background: linear-gradient(90deg, #ffc107 50%, #e9ecef 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffc107;
}

.rating-icon-global .none i {
    color: #e9ecef;
}

/* Readonly state */
.rating-container-global .readonly {
    cursor: not-allowed;
    opacity: 0.9;
}

.rating-container-global.readonly .rating-icon:hover {
    transform: none;
}

/* Disabled state */
.rating-container-global.disabled-global {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.rating-container-global.disabled-global .rating-icon-global:hover {
    transform: none;
}

.rating-container-global.disabled-global i {
    color: #ccc !important;
}

/* 
---------------------------------------------
Select
----------------------------------------------
*/
.dd-container-global  {
    position: relative;
    width: 100%;
    display: inline-block;
}

.dd-trigger-global {
    padding: 2px 8px 2px 6px;
    border-radius: 3.2px;
    border: 1px solid var(--gray-400);
    background: var(--white);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    transition: all 0.2s ease;
}

.dd-trigger-global:hover, .dd-container-global:hover {
    border-color: var(--Theme-Primary);
}

.dd-trigger-global.active-global, .dd-container-global:active {
    border-color: var(--Theme-Primary);
}

.dd-trigger-text-global {
    flex: 1;
    text-align: left;
}

.dd-trigger-icon-global {
    display: flex;
    align-items: center;
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.dd-trigger-icon-global .bi::before, [class=" bi-chevron-down"]::before { 
    font-weight: 800 !important;
}

.dd-trigger-global.active-global .dd-trigger-icon-global {
    transform: rotate(180deg);
}

.dd-menu-global {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
}

.dd-menu-global.active-global {
    max-height: 400px;
    opacity: 1;
    visibility: visible;
}

.dd-list-global {
    list-style: none;
    padding: 4px 0;
    max-height: 300px;
    overflow-y: auto;
}

.dd-item-global {
    padding: 10px 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    transition: all 0.15s ease;
    display: flex;
    justify-content: space-between;
    gap:4px;
}

.dd-item-global:hover {
    background: var(--bg-light);
}

.dd-item-global.active-global {
    background: #e8f8f5;
    color: var(--primary);
    font-weight: 600;
}

.dd-item-check-global {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--primary);
}

/* Scrollbar styling */
.dd-list-global::-webkit-scrollbar {
    width: 6px;
}

.dd-list-global::-webkit-scrollbar-track {
    background: transparent;
}

.dd-list-global::-webkit-scrollbar-thumb {
    background: #bdc3c7;
    border-radius: 3px;
}

.dd-list-global::-webkit-scrollbar-thumb:hover {
    background: #95a5a6;
}