:root {
    /* 🎨 Primary Brand System (Deep Ocean Blue Theme) */
    --clr-primary: #023047;           /* Core Deep Ocean Blue */
    --clr-primary-dark: #001d2e;      /* Dark navy (hover/active) */
    --clr-primary-light: #219EBC;     /* Bright teal accent */
    --clr-primary-soft: #E0F4F9;      /* Very soft cyan tint for light backgrounds */

    /* 🌟 Extended for states */
    --clr-primary-hover: #034363;      /* hover shade */
    --clr-primary-active: #012030;     /* active shade */
    --clr-primary-glow: rgba(2, 48, 71, 0.4); /* shadows & glow */

    /* 🌌 Backgrounds */
    --bg-gradient-start: #012030;     /* Gradient start (deep teal navy) */
    --bg-gradient-end: #03506F;       /* Gradient end (blue-teal) */
    --bg-surface: #033649;            /* Card/Panel surface */
    --bg-overlay: rgba(0, 0, 0, 0.6); /* For modals/overlays */

    /* 🖊️ Inputs & Forms */
    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: rgba(255, 255, 255, 0.15);
    --input-focus: var(--clr-primary);
    --input-shadow: rgba(2, 48, 71, 0.35);

    /* ✍ Text Colors */
    --text-light: #ffffff;
    --text-muted: #cfd8dc;
    --text-dark: #102027;
    --text-gray: #90a4ae;

    /* 🌈 Secondary & Accent Colors */
    --clr-green: #2E7D32;             /* Success green */
    --clr-green-dark: #1B5E20;
    --clr-green-light: rgba(46, 125, 50, 0.15);

    --clr-orange: #FB8500;            /* Warm accent orange */
    --clr-orange-dark: #D76B00;
    --clr-orange-light: rgba(251, 133, 0, 0.15);

    --clr-red: #D62828;               /* Alert red */
    --clr-red-dark: #9B1C1C;
    --clr-red-light: rgba(214, 40, 40, 0.15);

    --clr-blue: #0077B6;              /* Info blue */
    --clr-blue-dark: #005f87;
    --clr-blue-light: rgba(0, 119, 182, 0.15);


    /* ⚪ Neutrals */
    --clr-white: #ffffff;
    --clr-black: #000000;
    --clr-gray1: #6c757d;
    --clr-gray2: #adb5bd;
    --clr-gray3: #dee2e6;
    --clr-gray4: #f1f1f1;

    /* ✍ Fonts */
    --ff: "Inter", sans-serif;
    --ff-alt: "Poppins", sans-serif;
}




/* ✅ Green utility (success tone) */
.bg-green-one {
    background: var(--clr-green) !important;
    color: var(--clr-white) !important;
}

/* ✅ Global Body */
body {
    background: var(--clr-primary-soft); /* soft purple background tint */
    color: var(--text-dark);             /* readable dark neutral */
}

/* ✅ Main Wrapper */
#main-wrapper {
    background: var(--clr-white);
    border: 1px solid var(--clr-gray2);  /* subtle neutral border */
    border-radius: 6px;
}

/* ✅ Buttons Reset */
.btn,
.btn:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* ✅ Cancel Button (Danger Outline) */
.cancel-btn {
    border: 1px solid var(--clr-red);
    color: var(--clr-red) !important;
    transition: all 0.3s ease;
}
.cancel-btn:hover {
    background: var(--clr-red);
    color: var(--clr-white) !important;
}

/* ✅ Text Utility Colors */
.text-primary   { color: var(--clr-primary) !important; }
.text-green     { color: var(--clr-green) !important; }
.text-green-sm  { color: var(--clr-green-dark) !important; } /* consistent */
.text-orange    { color: var(--clr-orange) !important; }
.text-violet    { color: var(--clr-primary-light) !important; } /* soft accent */
.text-red       { color: var(--clr-red) !important; }
.text-blue      { color: var(--clr-blue) !important; } /* secondary info */

/* ✅ SVG Icons */

/* ✅ Modal */

.form-control:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 0.2rem var(--input-shadow);
}
.text-primary, .modal-custom-design h1, svg {
    color: var(--clr-primary);
    fill: var(--clr-primary);
}

.modal-custom-design label {
    color: var(--clr-gray1);   /* softer neutral for labels */
}
.modal-custom-design .form-control:focus {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 0.25rem var(--input-shadow) !important; /* purple glow */
}

/*  Sidebar */
.side-bar {
    background: var(--clr-primary); /* Deep Ocean Blue */
    box-shadow: 0px 0px 5px rgba(2, 48, 71, 0.25); /* subtle teal-blue shadow */
}

/*  Sidebar Logo */
.side-bar-logo {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12); /* softer divider */
}

/* Sidebar Close Button */
.close-btn {
    color: var(--clr-white);
    transition: color 0.3s ease;
}
.close-btn:hover {
    color: var(--clr-orange); /* golden/orange accent */
}

/* Reset Button (Danger Outline) */
.multiple-button-group .reset-btn,
.button-group .reset-btn {
    border: 1px solid var(--clr-red) !important;
    color: var(--clr-red) !important;
    transition: all 0.3s ease;
}
.reset-btn:hover {
    background: var(--clr-red) !important;
    color: var(--clr-white) !important;
}

/* Multi Delete Button (Warning) */
.multiple-button-group .multi-delete-btn {
    background: var(--clr-orange) !important;
    color: var(--clr-white) !important;
    transition: background 0.3s ease;
}
.multi-delete-btn:hover {
    background: var(--clr-orange-dark, #e76f00) !important; /* darker orange tone */
}

/* Sidebar Dropdown Arrow */
/* ─── Base Icon / Before Elements ─── */
.side-bar-manu .dropdown::before {
    color: var(--clr-gray2);
    transition: color 0.3s ease;
}
.side-bar-manu .dropdown:hover::before {
    color: var(--clr-orange);
}

/* ─── Global Hover / Active States ─── */
.side-bar-manu a:hover,
.side-bar-manu li.active > a,
.side-bar-manu li .dropdown-menu li a:hover {
    background: linear-gradient(
        135deg,
        var(--clr-primary-light),
        var(--clr-primary-hover)
    );
    color: var(--clr-white) !important;
    border-left: 4px solid var(--clr-orange);
    box-shadow: inset 3px 0 0 var(--clr-primary-light),
                0 0 6px var(--clr-primary-glow);
    transition: all 0.3s ease;
}

/* ─── Active Dropdown Links ─── */
.side-bar-manu .dropdown.active > .dropdown-menu .dropdown.active > a,
.side-bar-manu .dropdown.active > .dropdown-menu .dropdown.active .active,
.side-bar-manu .dropdown.active .active {
    background: linear-gradient(
        135deg,
        var(--clr-primary-light),
        var(--clr-primary)
    );
    color: var(--clr-white) !important;
    border-left: 4px solid var(--clr-orange);
    box-shadow: inset 3px 0 0 var(--clr-primary-light),
                0 0 8px var(--clr-primary-glow);
    transition: all 0.35s ease;
}

/* ─── Hover State for Non-Active Items ─── */
.side-bar-manu li:not(.active):hover > a {
    background: linear-gradient(
        90deg,
        var(--clr-primary-hover) 0%,
        var(--clr-primary-active) 100%
    );
    color: var(--clr-white) !important;
    box-shadow: inset 3px 0 0 var(--clr-primary-light),
                0 0 6px var(--clr-primary-glow);
    transform: translateX(2px);
    transition: background 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.2s ease;
}

/* ─── Nested Dropdown Menu ─── */
.side-bar-manu li .dropdown-menu {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* ─── Nested Dropdown Links ─── */
.side-bar-manu li .dropdown-menu li a {
    color: var(--clr-white);
    transition: background 0.3s ease, color 0.3s ease;
}

/* ─── Nested Links Hover & Active ─── */
.side-bar-manu li .dropdown-menu li a.active {
    background: linear-gradient(
        135deg,
        var(--clr-primary-light),
        var(--clr-primary-hover)
    );
    color: var(--clr-white) !important;
    box-shadow: inset 2px 0 0 var(--clr-orange);
}

/* ─── Second-Level Nested Links ─── */
.side-bar-manu li .dropdown-menu li li:hover > a,
.side-bar-manu li .dropdown-menu li li.active > a {
    background: var(--clr-primary-active);
    color: var(--clr-white) !important;
    box-shadow: inset 2px 0 0 var(--clr-primary-light);
    transition: background 0.3s ease;
}


/* Nav Pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--clr-primary);
    color: var(--clr-white) !important;
    transition: background 0.3s ease;
}

.nav-link {
    color: var(--clr-primary);
    transition: color 0.3s ease;
}
.nav-link:hover {
    color: var(--clr-primary-light);
}

/* 🌟 Main Header Section */
.main-header-section {
    background: var(--clr-primary-soft);
    box-shadow: 0 4px 20px rgba(90, 24, 154, 0.15); /* softer, balanced shadow */
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* 👤 Profile Dropdown Hover */
.main-header-section .profile-info .dropdown-menu li a {
    transition: color 0.25s ease, background-color 0.25s ease;
}

.main-header-section .profile-info .dropdown-menu li a:hover {
    color: var(--clr-primary);
    background: linear-gradient(
        90deg,
        rgba(157, 78, 221, 0.1) 0%,
        rgba(157, 78, 221, 0.18) 100%
    ); /* subtle gradient tint */
    border-left: 3px solid var(--clr-primary-light); /* accent for clarity */
}


/* Search Button */
.search-btn {
    background: var(--clr-primary) !important;
    color: var(--clr-white) !important;
    border: 1px solid var(--clr-primary);
    transition: all 0.3s ease;
}
.search-btn:hover {
    background: var(--clr-primary-dark) !important;
    border-color: var(--clr-primary-dark);
}
/* Table Header Button Group */
.table-header .button-group {
    border-bottom: 1px solid var(--clr-primary);
}

.table-header .button-group a {
    background: none !important;
    color: var(--clr-gray1) !important; /* neutral gray for inactive */
    transition: all 0.3s ease;
}

.table-header .button-group a.active {
    background: var(--clr-primary) !important;
    color: var(--clr-white) !important;
}

.table-header .button-group a:hover:not(.active) {
    color: var(--clr-primary) !important;
    background-color: var(--clr-primary-light); /* subtle primary tint */
}

/* Add Order Button */


/* Pagination */
.pagination .page-item.active .page-link {
    color: var(--clr-white);
    background: var(--clr-primary);
}

.pagination .page-link {
    color: var(--clr-primary);
    border: none;
    transition: all 0.3s ease;
}

.pagination .page-link:hover:not(.active) {
    color: var(--clr-primary);
    background-color: var(--clr-primary-light);
}

.pagination .page-link.active {
    color: var(--clr-white) !important;
    background: var(--clr-primary) !important;
}

/* Role Reset Button */
.role-reset-btn {
    color: var(--clr-primary);
    border: 1px solid var(--clr-primary);
    transition: all 0.3s ease;
}

.role-reset-btn:hover {
    color: var(--clr-white) !important;
    background-color: var(--clr-primary);
    border: 1px solid transparent;
}

/* Modal Category Button */
/* Service Button */
.service-btn-possition {
    background: var(--clr-primary) !important;
    color: var(--clr-white) !important;
    transition: all 0.3s ease;
}

.service-btn-possition:hover {
    background: var(--clr-primary-dark) !important;
}

/* DataTables Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--clr-gray3) !important; /* softer neutral border */
    color: var(--clr-primary) !important;
    transition: all 0.3s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: var(--clr-primary-light);
    color: var(--clr-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--clr-primary) !important;
    color: var(--clr-white) !important;
    border-color: var(--clr-primary) !important;
}

/* Table Search */
.table-search .form-control {
    border: 1px solid var(--clr-gray3);
    transition: all 0.3s ease;
}

/* 🔍 Table Search Input Focus */
.table-search .form-control:focus {
    border-color: var(--clr-primary);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.08),
                0 0 0 3px rgba(var(--clr-primary-rgb), 0.25); /* soft dual shadow */
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}


.table-search button {
    background: var(--clr-primary);
    color: var(--clr-white);
    transition: all 0.3s ease;
}

.table-search button:hover {
    background: var(--clr-primary-dark);
}

/* Themed Buttons */

.border-btn {
    border: 1px solid var(--clr-primary);
    background: none;
    color: var(--clr-primary);
    transition: all 0.3s ease;
}

.border-btn:hover {
    background: var(--clr-primary);
    color: var(--clr-white);
}

/* Custom Warning Button replaced with primary for consistency */
.btn-custom-warning {
    background-color: var(--clr-primary);
    color: var(--clr-white);
    transition: all 0.3s ease;
}

.btn-custom-warning:hover {
    background-color: var(--clr-primary-dark);
    color: var(--clr-white) !important;
}

/* Custom Text Color */
.custom-warning-color {
    color: var(--clr-primary);
}
.custom-danger-color {
    color: var(--clr-red);
}
.custom-success-color {
    color: var(--clr-green);
}
.custom-info-color {
    color: var(--clr-blue);
}
.custom-dark-color {
    color: var(--text-dark);
}
.custom-muted-color {
    color: var(--text-muted);
}
.custom-gray-color {
    color: var(--clr-gray1);
}
.custom-light-color {
    color: var(--clr-white);
}
.save-btn, .add-order-btn, .theme-btn, .modal-btn-ctg {
    background-color: var(--clr-primary);   /* primary coffee color */
    border: 1px solid var(--clr-primary);   /* primary border */
    color: var(--clr-white) !important;     /* text color */
    transition: all 0.3s ease;
}

.save-btn:hover, .add-order-btn:hover, .theme-btn:hover, .modal-btn-ctg:hover {
     background-color: var(--clr-primary-dark);  /* darker shade on hover */
    border-color: var(--clr-primary-dark);
    color: var(--clr-white) !important;
}