/* main.css */
/* ===== BASE RESET & VARIABLES ===== */

html {
    --main-font-family: 'Almarai', sans-serif;
    --main-font-weight: 400;
    --main-font-size: 18px;
    --primary-color: #4a90e2;
    --primary-shadow: rgba(74, 145, 226, 0.3);
    --primary-dark: #5a52e0;
    --primary-red: #FF3C28;
    --primary-blue: #4a90e2;
    --primary-yellow: #FFD100;
    --primary-black: #000000;
    --primary-white: #FFFFFF;
    --primary-light: #ecf2ff;
    --secondary-color: #50c6e3;
    --secondary-teal: #50d2e3;
    --accent-purple: #a162f7;
    --scroll-bg: #f1f5f9;
    --scroll-color: #a1a1aa;
    --text-color: #333;
    --gray-800: #1A1A1A;
    --gray-700: #2D2D2D;
    --gray-300: #D1D1D1;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --text-white: #f1f5f9;
    --accent: #FF6584;
    --dark: #1A1A2E;
    --light: #F8F9FC;
    --text: #33334E;
    --success: #13deb9;
    --warning: #ffae1f;
    --error: #fa896b;
    --border: #e5eaef;
    --dark-bg: #0f172a;
    --main-bg: #f8f9fc;
    --header-bg: #ffffff;
    --side-bg: #fbfdff;
    --card-bg: #ffffff;
    --input-bg: #f6f6f6;
    --hover-bg: rgba(0, 0, 0, 0.05);
    --border-radius: 12px;
    --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    --box-shadow: 0 4px 14px 0 var(--primary-shadow);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --header-height: 70px;
    --side-nav-width: 260px;
    --side-nav-collapsed-width: 65px;
    --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

html:not([data-theme='dark']) .theme1 {
    --primary-color: #2a9fd7;
    --secondary-color: #124085;
    --primary-shadow: rgba(42, 160, 215, 0.3);
}

html:not([data-theme='dark']) .theme2 {
    --primary-color: #B51200;
    --secondary-color: #730b00;
    --primary-shadow: rgba(181, 18, 0, 0.3);
}

html:not([data-theme='dark']) .theme3 {
    --primary-color: #eb7700;
    --secondary-color: #f52f00;
    --primary-shadow: rgba(235, 118, 0, 0.3);
}

html:not([data-theme='dark']) .theme4 {
    --primary-color: #0B8043;
    --secondary-color: #127485;
    --primary-shadow: rgba(11, 128, 68, 0.3);
}

html:not([data-theme='dark']) .theme5 {
    --primary-color: #7B1FA2;
    --secondary-color: #2f1285;
    --primary-shadow: rgba(123, 31, 162, 0.3);
}

html:not([data-theme='dark']) .theme6 {
    --primary-color: #d7415d;
    --secondary-color: #851250;
    --primary-shadow: rgba(215, 65, 92, 0.3);
}

html:not([data-theme='dark']) .theme7 {
    --primary-color: #75a116;
    --secondary-color: #506d10;
    --primary-shadow: rgba(117, 161, 22, 0.3);
}

html:not([data-theme='dark']) .theme8 {
    --primary-color: #1e918a;
    --secondary-color: #125485;
    --primary-shadow: rgba(30, 145, 137, 0.3);
}

html:not([data-theme='dark']) .theme9 {
    --primary-color: #351b1b;
    --secondary-color: #161010;
    --primary-shadow: rgba(53, 27, 27, 0.3);
}

html:not([data-theme='dark']) .theme10 {
    --primary-color: #4e6773;
    --secondary-color: #3b474d;
    --primary-shadow: rgba(78, 103, 115, 0.3);
}

html[data-theme='dark'] {
    --main-bg: #0f172a;
    --text-dark: #e2e8f0;
    --text-light: #cbd5e1;
    --text-white: #f8fafc;
    --light: var(--dark);
    --header-bg: #1e293b;
    --side-bg: #111827;
    --card-bg: #1f2937;
    --hover-bg: rgba(255, 255, 255, 0.05);
    --border: #334155;
    --input-bg: #171f2a;
    --dark-bg: #0f172a;
    --primary-color: #4a90e2;
    --secondary-color: #50c6e3;
    --primary-light: #1a253b;
    --scroll-bg: #27282d;
    --scroll-color: #30384c;
    --primary-shadow: rgba(255, 255, 255, 0.2);
}

@media (prefers-color-scheme: dark) {
    html[data-theme='default'] {
        --main-bg: #0f172a;
        --text-dark: #e2e8f0;
        --text-light: #cbd5e1;
        --text-white: #f8fafc;
        --light: var(--dark);
        --header-bg: #1e293b;
        --side-bg: #111827;
        --card-bg: #1f2937;
        --hover-bg: rgba(255, 255, 255, 0.05);
        --border: #334155;
        --input-bg: #171f2a;
        --dark-bg: #0f172a;
        --primary-color: #4a90e2;
        --secondary-color: #50c6e3;
        --primary-light: #1a253b;
        --scroll-bg: #27282d;
        --scroll-color: #30384c;
        --primary-shadow: rgba(255, 255, 255, 0.2);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: var(--transition);
}

body {
    position: relative;
    font-family: var(--main-font-family);
    background-color: var(--main-bg);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

body:not(.mobile-view) {
    --side-nav-width: 260px;
    /* --side-nav-width: 60px; */
    --side-nav-collapsed-width: 65px;
}

body.dashboard {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 100vh;
}

svg.icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    fill: none;
    stroke: var(--text-dark);
    stroke-width: 1.1px;
}

@media screen and (min-width: 340px) {

    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px;
        height: 5px;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--scroll-color);
        border-radius: 10px;
    }

    ::-webkit-scrollbar-track {
        background: var(--scroll-bg);
    }

}

/* ===== TYPOGRAPHY ===== */
h1,
h2,
h3,
h4 {
    font-weight: 800;
    line-height: 1.1;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    letter-spacing: -0.03em;
}

p {
    font-size: 1.125rem;
    line-height: 1.6;
    font-weight: 400;
}

a {
    text-decoration: none;
}

button {
    appearance: none;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

select option {
    background: var(--light);
}

/* ===== UTILITY CLASSES ===== */

.bg-primary {
    background-color: var(--primary-color)
}

.bg-gradient {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
}

.text-primary {
    color: var(--primary-color)
}

.bg-secondary {
    background-color: var(--secondary-color)
}

.text-secondary {
    color: var(--secondary-color)
}

.p_hover

.alert {
    padding: 15px;
    background: #eeffef;
    border-radius: 20px;
    margin: 0 30px;
}

.alert-success {
    background: #e6f9e6;
    color: #2c7a2c;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-fluid {
    width: 100%;
    padding: 0 20px;
}

.img {
    display: block;
    max-width: 100%;
    height: auto;
}

.object-cover {
    object-fit: cover;
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

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

.flex-column {
    display: flex;
    flex-direction: column;
}

.text-center {
    text-align: center;
}

.text-start {
    text-align: start;
}

.text-end {
    text-align: end;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
    top: 0;
}

.position-fixed {
    position: fixed;
    top: 0;
}

.position-start {
    inset-inline-start: 0;
}

.position-end {
    inset-inline-end: 0;
}

.border-radius {
    border-radius: var(--border-radius);
}

.border-circle {
    border-radius: 50%;
}

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

.box-shadow-start {
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
}

.box-shadow-end {
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.05);
}

.box-shadow-bottom {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.cursor-pointer {
    cursor: pointer;
}

.z-minus {
    z-index: -1;
}

.z-lower {
    z-index: 1;
}

.z-normal {
    z-index: 5;
}

.z-higher {
    z-index: 9;
}

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.w-100 {
    width: 100%;
}

.w-75 {
    width: 75%;
}

.w-50 {
    width: 50%;
}

.w-25 {
    width: 25%;
}

.h-100 {
    height: 100%;
}

.h-75 {
    height: 75%;
}

.h-50 {
    height: 50%;
}

.h-25 {
    height: 25%;
}

.text-capitalize {
    text-transform: capitalize;
}