/* cARDS */
.primary-card{
    border-radius: 12px;
    /* border-radius: 6px; */
	border: 1px solid #E4E4E7;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;     
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), fill 0.15s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.secondary-card{
    background-color: #f9f9fa;
    border-radius: 12px;
}

/* custom alert buttons  */
.alert-primary{ background-color: var(--dark) !important; color: var(--white) !important; }
.alert-secondary{ color: var(--dark) !important; font-weight: 500 !important; background-color: var(--white) !important; }
.alert-primary:hover{ background-color: #18181be6 !important; }

/* outline  */
.red{ outline: var(--outline-danger); }
.blue{ outline: 1px solid var(--accent); }
.green{ outline: 1px solid green; }
.line-danger{ outline: var(--outline-danger); }
.line-primary{ outline: var(--outline-cards); }

/* border  */
.bdr-danger{ border: 1px solid var(--danger); } 
.bdr-accent{ border: 1px solid var(--danger); }

/* shadow  */
.card-shadow{ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) };

.b-shadow{box-shadow: var(--b-shadow);}
.b-shadw-around{box-shadow: var(--b-shadw-around);}
.b-shadw-dark{box-shadow: var(--b-shadw-dark);}
.b-shadw-darker{box-shadow: var(--b-shadw-darker);}
.b-shadw-inset{box-shadow: var(--b-shadw-inset);}



/* background color  */
.cbg-accent{ background-color: var(--accent); }
.cbg-danger{ background-color: var(--danger); }
.cbg-muted{ background-color: var(--muted); }

/* hidden  */
.c-hide{ display: none; }


/* font family  */
.font{ font-family: var(--font);}

/* sizes  */
.fs-12{ font-size: 12.8px; line-height: 16px; }
.fs-14{ font-size: 14px; line-height: 20px; }
.fz-16{ font-size: 16px; line-height: 24px; }
.fz-18{ font-size: 18px; line-height: 27px; }
.fz-20{ font-size: 20px; line-height: 30px; letter-spacing: -0.3px; }
.fz-24{ font-size: 24px; line-height: 32px; letter-spacing: -0.4px;}
.fz-28{ font-size: 28px; line-height: 36px; letter-spacing: -0.5px;}


/* groups forms  */
.group-row { display: flex; flex-direction: row; }  
.group-column { display: flex; flex-direction: column; }

/* separator */
.devide{ height: 1px; background-color: var(--muted); }
/* table menu separator */
.gridjs-container .devide{ margin: 4px -4px 4px -4px; }


/* link */
.link{ color: var(--dark); text-decoration: underline !important    ;}
.link:hover{ color: #000000; }
.link:focus{ color: #000000; }

.link-gray{ color: var(--gray); text-decoration: underline !important    ;}
.link-gray:hover{ color: var(--gray); }
.link-gray:focus{ color: var(--gray); }

/* tooltip  */
.custom-tooltip { --bs-tooltip-bg: var(--dark); --bs-tooltip-color: var(--white);}

/* cursor */
.pointer{ cursor: pointer; }
.pointer-default{ cursor: default; }
.no-select{ user-select: none; }

/* Margin  */
.cms-1{margin-left: 1px !important;}
.cms-2{margin-left: 2px;}
.cms-3{margin-left: 3px;}

/* for sidebar  */
.sidebar-content .nav-item a p{
    font-family: var(--font);
    font-size: 0.875rem !important;
    line-height: 1.5rem;
    font-weight: 500 !important;
    letter-spacing: 0.015em;
}
.sidebar-content .nav-item a span{
    font-family: var(--font);
    font-size: 0.875rem !important;
    line-height: 1.5rem;
    letter-spacing: 0.015em;
}
.profile-username span{
    font-family: var(--font) !important;
    font-size: 0.875rem !important; /* 16px */
    line-height: 1.25rem !important; /* 24px */
    letter-spacing: 0.015em !important;
}
.avatar-sm{
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 50% !important;
}
.navbar .navbar-nav .topbar-icon .nav-link,
.navbar .navbar-nav .topbar-user .profile-pic {
    border-radius: 6px !important;
}
.user-box .u-text h4 {
    font-family: var(--font) !important;
    font-size: 1rem !important; /* 16px */
    line-height: 1.25rem !important; /* 24px */
    letter-spacing: 0.01em !important;
}
.quick-actions-header,
.user-box .u-text p {
    font-family: var(--font) !important;
    font-size: 0.8rem !important; /* 16px */
    line-height: 1.25rem !important; /* 24px */
    letter-spacing: 0.015em !important;
}
.text-center{text-align: center;}


/* Bootstrap switch override */
.form-switch .form-check-input {
    height: 20px;
    width: 36px;
    border: none;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    margin: 0;
}
/* Default (Unchecked) State */
.form-check-input {
    background-color: #e3e3e6;
    border-color: #e3e3e6;
    box-shadow: none; /* Removes default Bootstrap focus glow */
}

/* Checked State */
.form-check-input:checked {
    background-color: #18181b;
    border-color: #18181b;
}

/* Ensure the circle (thumb) is always white */
.form-check-input::before {
    background-color: #ffffff;
}


/* Focus State (when tabbing or clicking) */
.form-check-input:focus {
    border: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25); /* Subtle black focus ring */
}


.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}


/* DataTables */
.cm.pagination a{
    height: 30px;
    width: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    font-family: var(--font);
    font-weight: 500;
}

.cm.pagination li{
    border-radius: 3px !important;
    border: 1px solid transparent;
}
.cm.pagination li.active{
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-color: hsl(240 5.9% 90%);
}
.cm.pagination li.active a{
    color: var(--dark) !important;
}
.cm.pagination li:hover{
    background-color: hsl(240 4.8% 95.9%);
}

.cm.pagination li.disabled:hover{
    background-color: #ffffff;
}

.cm.pagination svg{
    width: 16px;
    height: 16px;
}



/* for badge */
.badge-default{
    color: var(--dark);
    background-color: #f3f4f6;
}
.badge-primary{
    color: #2563eb;
    background-color: #eff6ff;
}
.badge-secondary{
    color: #5145cd;
    background-color: #edfafa;
}
.badge-info{
    color: rgb(29, 78, 216);
    background-color: #e2efffb5;
}
.badge-success{
    color: #046c4e;
    background-color: #f3faf7;
}

.badge-warning{
    color: #b43403;
    background-color: #feecdc;
}

.badge-danger{
    color: #bf125d;
    background-color: #fdf2f8;
}

.badge{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    width: fit-content;
    margin: unset;
}
.badge svg{
    width: .875rem;
    height: .875rem;
}