/* ===============================
   COLOR SYSTEM (CSS VARIABLES)
=================================*/
:root {

    /* Brand Blue */
    --clr-primary: #4F46E5;
    --clr-secondary: #3B82F6;
    --clr-primary-hover: #433bd9;
    --clr-primary-medium: #d6d5f8;
    --clr-primary-soft: #e0e6fd;
    --clr-highlight: #eff0fa;
   
    /* Accent */
    --clr-accent: #60A5FA;
    
    /* Gradients */
    --primary-gradient: linear-gradient(135deg, var(--clr-secondary), var(--clr-primary));
    --secondary-gradient: linear-gradient(130deg, var(--clr-primary-hover), var(--clr-primary));
    
    /* Backgrounds */
    --clr-bg-main: #e6ebf6;
    --clr-bg-nav: #f7f9fe;
    --clr-bg-card: #FFFFFF;
    --clr-bg-card-soft: #f7f9fe;
    --clr-bg-sidebar: #f7f9fe;
    /* --clr-bg-content: #E8EAEC; */
    --clr-bg-btn-secondary: #eaeaea;
    --clr-bg-components: #f5f7fa;

    /* Text */
    --clr-text-main: #0F172A;
    --clr-text-medium: #46484b;
    --clr-text-muted: #64748B;
    --clr-text-placeholder: #c4c7cc;
    --clr-text-light: #fefefc;

    /* Borders */
    --clr-border: #E2E8F0;
    --clr-border-light: #e4e7ec;

    /* Effects */
    --shadow-soft: 0 6px 20px rgba(17, 24, 39, 0.04);
    --radius: 24px;
    --radius-input: 12px;
    --gap: 15px;
    --btn-padding: 5px 18px;;

    --nav-height: 65px;

    /* Spacing */
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    color: var(--clr-text-main);
    background: var(--clr-bg-main);
    -webkit-font-smoothing: antialiased;
}

/* heading and paragraph */
h1, h2, h3, h4, h5 {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

p {
    color: var(--clr-text-muted);
    margin-bottom: 1rem;
}

/* Utility Classes */
.text-muted {
    color: var(--clr-text-muted);
}

.text-semibold {
    color: var(--clr-text-medium);
    font-weight: 500;
}

.card-shadow {
    box-shadow: var(--shadow-soft);
}

.rounded-soft {
    border-radius: var(--radius-lg);
}

.border-soft {
    border: 1px solid var(--clr-border);
}

.bg-content {
    background: var(--clr-bg-content);
}

/* .border-left {
    border-left: 4px solid var(--clr-primary) !important;
} */

.clickable-row {
    cursor: pointer;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 6px;
}


/* Transition */
.transition {
    transition: all 0.2s ease;
}


/* Error Messages */
.errorlist {
    list-style-type: none;
    padding-left: 0;
    color: #cd3f3f;
}


.bg-primary{
    background-color: var(--clr-primary) !important;
}

.g-3,
.gx-3 {
  --bs-gutter-x: var(--gap) !important;
}

.g-3,
.gy-3 {
  --bs-gutter-y: var(--gap) !important;
}


/* loading animaiton */
.dashboard-loader {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.65);
    z-index: 100;
}

.dashboard-loader.active {
    display: flex;
}

.spinner {
    width: 42px;
    height: 42px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid #2563eb;
    border-radius: 50%;
    background: white;
    box-shadow: 0px 0px 20px rgba(17, 24, 39, 0.04);
    animation: spin .8s linear infinite;
}

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

#searchLoader .spinner-border {
    width: 1.2rem;
    height: 1.2rem;
}