/* =========================================================
   VARIABLES
   ========================================================= */
:root {
    /* layout */
    --sidebar-w: 245px;
    --content-gap: 10px;
    /* sidebar row math */
    --menu-left-pad: 1rem;
    --menu-icon-box: 1.4rem;
    --menu-label-gap: .55rem;
    --menu-caret-gap: .25rem;
    --submenu-indent: calc(var(--menu-left-pad) + var(--menu-icon-box) + var(--menu-label-gap));
    /* brand */
    --brand: #2f3d63;
    --brand-100: #e9edf7;
    --brand-accent: #2fb2a2;
    /* table header palette */
    --table-head-bg: #f6f6fb;
    --table-head-color: #6f6b7d;
    --table-head-border: #ececf4;
    /* General Typography */
    --body-color: #566a7f;

    --gradient-1: #2f3d63;
    --gradient-2: #2fb2a2;
    --gradient-3: #5f6b92;
    --gradient-1: #7367f0;
    --gradient-2: #2dd4bf;
    --gradient-3: #f59e0b;
}

/* =========================================================
   APP BACKGROUND & CONTAINERS
   ========================================================= */
body.app-surface {
    background: #f3f5fb;
    background: radial-gradient(circle at 20% 20%, rgba(115, 103, 240, 0.18), transparent 32%),
                radial-gradient(circle at 80% 0%, rgba(45, 212, 191, 0.15), transparent 32%),
                radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.18), transparent 38%),
                #eef0f8;
    min-height: 100vh;
}

.content-inner {
    background: #ffffff;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 16px 32px rgba(47, 61, 99, 0.08);
    border: 1px solid #e1e5f0;
    background: rgba(255,255,255,0.92);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 18px 40px rgba(85, 105, 135, 0.12);
    border: 1px solid rgba(115, 103, 240, 0.06);
    min-height: calc(100vh - 120px);
}

/* =========================================================
   FIXED SIDEBAR + PAGE LAYOUT
   ========================================================= */
.layout-menu {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    height: 100vh;
    overflow-y: auto;
    background: #1f2a44;
    color: #eef1f8;
    background: linear-gradient(180deg, rgba(115,103,240,0.92), rgba(45,212,191,0.9));
    color: #fff;
    border-right: 1px solid rgba(0,0,0,.06);
    z-index: 1060;
}

.menu-inner-shadow {
    display: none !important;
}

html, body {
    overflow-x: hidden !important;
}

body {
    font-size: 1.08rem;
    line-height: 1.6;
    color: #313b4f;
}

.layout-page {
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-left: 0 !important;
}

@media (max-width:1199.98px) {
    .layout-page {
        margin-left: 0;
    }
}

body.no-sidebar .layout-menu {
    display: none !important;
}

body.no-sidebar .layout-page {
    margin-left: 0;
}

/* =========================================================
   NAVBAR (sticky, light)
   ========================================================= */
.layout-navbar,
html.light-style .layout-navbar,
html.light-style .navbar.navbar-expand-xl.navbar-detached {
    position: sticky;
    padding-top: 10px;
    background: transparent;
    margin-left:0px;
    margin-right: 0px;
    padding-right: 5px;
    padding-left: 10px;

}

.nav-glass {
    background: #24355c;
    border: 1px solid rgba(24, 36, 66, 0.4);
    box-shadow: 0 10px 26px rgba(24, 36, 66, 0.22);
    color: #f7f9ff;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(115,103,240,0.08);
    box-shadow: 0 12px 32px rgba(85, 105, 135, 0.18);
    backdrop-filter: blur(10px);
}

    .layout-navbar .container-xxl,
    .layout-navbar .container-fluid {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .layout-navbar .search-pill .input-group-text {
        padding-left: 10px;
    }

    .layout-navbar .input-group-text i.bi-search {
        margin-left: 0px;
    }

    .layout-navbar .navbar-nav .nav-link {
        color: #7f3cc8;
        font-weight: 600;
        font-size: 1.02rem;
    }

    .layout-navbar .navbar-nav .nav-link:hover,
    .layout-navbar .navbar-nav .nav-link:focus {
        color: #d9f2ff;
        text-decoration: none;
    }

    .company-pill,
    .nav-link .badge.bg-danger {
        background: #2fb2a2;
        color: #0f1a33;
        border: 0;
        box-shadow: 0 10px 20px rgba(22, 30, 54, 0.18);
    }

    .search-pill .form-control {
        background: #f7f8fd;
        border-radius: 999px;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
        font-weight: 500;
    }

    .search-pill .input-group-text {
        color: #dce3f5;
    }

/* =========================================================
   CONTENT WRAPPER
   ========================================================= */
html.light-style body,
html.light-style .layout-page,
html.light-style .content-wrapper {
    background: #eef0f8 !important;
    color: var(--body-color);
}

.content-wrapper {
    box-sizing: border-box;
    width: 100%;
    padding: 8px var(--content-gap) 16px var(--content-gap) !important;
}

    .content-wrapper .container-xxl,
    .content-wrapper .container-xl,
    .content-wrapper .container-lg,
    .content-wrapper .container,
    .content-wrapper .container-fluid,
    .content-wrapper > [class*="px-"],
    .content-wrapper > [class*="ps-"],
    .content-wrapper > [class*="pe-"],
    .content-wrapper .container-xxl.flex-grow-1.container-p-y {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .content-wrapper > *:first-child,
    .content-wrapper h1,
    .content-wrapper h2,
    .content-wrapper h3 {
        margin-top: 0 !important;
    }

    .content-wrapper .container-p-y {
        padding-top: .5rem !important;
        padding-bottom: .75rem !important;
    }

.main-content, .content-wrapper, .container-xxl {
    padding-top: 0 !important;
}

.pull-up {
    margin-top: -28px !important;
}

/* =========================================================
   CARDS / BADGES / BUTTONS
   ========================================================= */
.card {
    margin-top: 5px;
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: .100rem;
    box-shadow: 0 10px 30px rgba(85, 105, 135, 0.12);
    border: 1px solid #e2e7f1;
    border: 1px solid rgba(255,255,255,0.6);
}

    .card > .card-body {
        padding-top: 1.0rem;
        padding-bottom: 1.0rem;
    }

.badge.rounded-pill {
    padding: .45rem .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: 0 0 0 1px rgba(0,0,0,.02) inset;
}

.btn.rounded-pill {
    padding: .475rem 1rem;
    font-weight: 600;
    border: 0;
    box-shadow: 0 .15rem .35rem rgba(0,0,0,.07);
}

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 10px 22px rgba(47, 61, 99, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {
    background: #263458;
    border-color: #263458;
}

.btn-solid-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    font-weight: 600;
}

    .btn-solid-primary:hover {
        background: #263458;
        border-color: #263458;
        box-shadow: 0 6px 14px rgba(38,52,88,.25);
    }

.btn-materio {
    border: 0;
    font-weight: 600;
    border-radius: .6rem;
    padding: .45rem 1rem;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    transition: background-color .15s, box-shadow .15s, transform .02s;
}

    .btn-materio:active {
        transform: translateY(1px);
    }

.btn-materio-primary {
    background: var(--brand);
}

    .btn-materio-primary:hover {
        background: #6a5ae0;
        box-shadow: 0 6px 14px rgba(115,103,240,.35);
    }

.btn-materio-sm {
    padding: .35rem .75rem;
    font-size: .875rem;
}

.btn-radius-std {
    border-radius: .375rem !important;
}

/* =========================================================
   TABS / CARDS / SEARCH
   ========================================================= */
.pill-tabs {
    margin-bottom: .25rem !important;
}

    .pill-tabs .nav-link {
        border-radius: 999px;
        padding: .5rem 1rem;
        background: #f7f7fb;
        color: #6f6b7d;
        border: 1px solid #eee;
    }

        .pill-tabs .nav-link.active {
            background: var(--brand);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 4px 12px rgba(47,61,99,.25);
        }

.soft-card {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

    .soft-card .card-header {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

#searchBox {
    border: 1px solid #dee2e6; /* light border like selects */
    border-radius: 0.375rem; /* same rounded corners */
    padding: 0.375rem 0.75rem; /* consistent spacing */
    font-size: 0.875rem; /* match small form controls */
    background-color: #fff;
    color: #212529;
    outline: none;
    min-width: 280px;
    height: 29px;
}
    #searchBox:focus {
        border-color: #7367f0 !important; /* Materio/Bootstrap purple */
        box-shadow: 0 0 0 0.25rem rgba(115,103,240,0.25);
    }
.bi-search {
    color: #a1a1b5;
}

/* =========================================================
   TABLES (look + sticky head)
   ========================================================= */
.table-hover tbody tr:hover {
    background: #f6f7fb !important;
}

.col-actions {
    width: 220px;
}

.table-modern thead th {
    font-size: .875rem; /* consistent size */
    font-weight: 600;
}

.table-modern td,
.table-modern th {
    border-bottom-color: #eee;
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.table-modern tbody tr {
    transition: background .15s ease, box-shadow .15s ease;
}

    .table-modern tbody tr:hover {
        background: #faf9ff;
    }

/* light sticky header */
.sticky-thead th,
.table thead.sticky-thead th,
.table-light.sticky-thead th,
.table thead.table-light th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--table-head-bg) !important;
    color: var(--table-head-color);
    border-bottom: 1px solid var(--table-head-border) !important;
}

/* hide any accidental DT controls */
div.dataTables_length,
div.dataTables_filter {
    display: none !important;
}

/* =========================================================
   DATATABLES – SCROLL/DROPDOWN FIX
   ========================================================= */
.table-wrap-x,
.table-scroll-x,
.table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    position: relative;
}

.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollHeadInner,
.dataTables_wrapper .dataTables_scrollBody,
.dataTables_scrollBody,
.table-wrap-x {
    overflow-y: visible !important;
}

.dataTables_wrapper .dataTables_scrollHead {
    position: relative;
    z-index: 5;
}

.dataTables_wrapper .dataTables_scrollBody {
    position: relative;
    z-index: 1;
    overflow-x: auto !important;
}

table.dataTable thead {
    position: relative;
    z-index: 4;
}

/* Dropdown menu z-index (global) */
.dropdown-menu {
    z-index: 2050 !important;
}

/* =========================================================
   SIDEBAR MENU (alignment, caret, submenu)
   ========================================================= */
aside.layout-menu.menu-vertical .menu-inner > li.menu-item > a.menu-link {
    display: flex ;
    align-items: center;
    width: 105%;
    padding-left: 14px;
    padding-right: .65rem !important;
    column-gap: normal !important;
    color: rgba(255,255,255,0.92);
    border-radius: 12px;
}

    aside.layout-menu.menu-vertical .menu-inner > li.menu-item > a.menu-link .menu-icon {
        flex: 0 0 var(--menu-icon-box);
        padding-left: 0px;
        
    }

    aside.layout-menu.menu-vertical .menu-inner > li.menu-item > a.menu-link .menu-caret {
        margin-left: auto;
        margin-right: .50rem;
    }

aside.layout-menu.menu-vertical .menu-inner > li.menu-item.open > a.menu-link .menu-caret i {
    display: flex;
    transform: rotate(90deg) !important;
    transition: transform .35s ease;
}

aside.layout-menu.menu-vertical .menu-inner > li.menu-item > a.menu-link.menu-toggle::after {
    content: none !important;
}

aside.layout-menu.menu-vertical .menu-inner > li.menu-item > ul.menu-sub {
    display: none;
    padding-left: var(--submenu-indent) !important;
    margin-top: 0px;
    padding-left: 10px;
}

aside.layout-menu.menu-vertical .menu-inner > li.menu-item.open > ul.menu-sub {
    display: flex;
}

aside.layout-menu.menu-vertical .menu-inner > li.menu-item > ul.menu-sub .menu-link {
    position: relative;
    padding-left: 2px !important;
    color: rgba(255,255,255,0.78);
}

    aside.layout-menu.menu-vertical .menu-inner > li.menu-item > ul.menu-sub .menu-link::before {
        content: "";
        position: relative;
        left: -20px;
        top: 50%;
        transform: unset;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        opacity: .90;
    }

aside.layout-menu.menu-vertical .menu-inner {
    padding-right: 5px !important;
}

.menu-header {
    letter-spacing: .04em;
    opacity: .8;
    color: rgba(255,255,255,0.82);
}

.app-brand-link,
.app-brand-text,
.app-brand-logo i {
    color: #fff !important;
}

.menu-inner .menu-item.active > .menu-link,
.menu-inner .menu-item.open > .menu-link {
    background: rgba(47, 178, 162, 0.16);
    color: #fdfefe;
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.14);
    color: #fff;
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.menu-inner .menu-item .menu-link:hover {
    background: rgba(255,255,255,0.12);
    color: #fdfefe;
}

.sidebar-profile {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
}

.sidebar-profile {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
}

.sidebar-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-content: center;
    border-radius: 14px;
    font-size: 1.1rem;
}

.gradient-pill {
    background: var(--brand-accent);
    box-shadow: 0 10px 18px rgba(47,61,99,0.18);
    background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
    box-shadow: 0 10px 20px rgba(115,103,240,0.24);
}

.shadow-soft {
    box-shadow: 0 20px 30px rgba(0,0,0,0.12);
}

.very-small {
    font-size: 0.75rem;
}

.bg-soft-success {
    background: rgba(25,135,84,0.12);
}

/* =========================================================
   DATATABLES – UNIFIED “select” column
   ========================================================= */
/* DataTables scroll head/body select col */
.dataTables_wrapper .dataTables_scrollHead th.col-select,
.dataTables_wrapper .dataTables_scrollBody td.col-select {
    width: 50px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    vertical-align: middle;
    text-align: center;
}

.dataTables_wrapper .col-select .check-wrap {
    display: grid;
    place-content: center;
    height: 100%;
    width: 100%;
}

.dataTables_wrapper .col-select .form-check-input {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

/* Kill DataTables sort caret/padding on non-sort column */
.dataTables_wrapper th.no-sort::before,
.dataTables_wrapper th.no-sort::after {
    display: none !important;
}

.dataTables_wrapper .dataTables_scrollHead th.no-sort {
    padding-right: 0 !important;
}

/* Table-local select col (keeps same visual gap as Projects) */
.table.table-modern th.col-select,
.table.table-modern td.col-select {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    padding-left: 12px;
    padding-right: 0;
    vertical-align: middle;
}

.table.table-modern .col-select .check-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.table.table-modern .col-select .form-check-input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    vertical-align: middle;
}

/* =========================================================
   DATATABLES – PAGER + INFO (single authoritative set)
   ========================================================= */
/* Space the info & pager like the demo, and keep them on one line */
.card-footer .d-flex {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding-left: 6px;
    padding-right: 6px;
    font-style: normal;
}

.dataTables_wrapper .dataTables_info {
    padding: .4rem .5rem;
    color: #8a8f9a;
    font-size: .875rem;
    white-space: nowrap; /* no wrap */
    font-style: normal;
}

.dataTables_wrapper .dataTables_paginate {
    padding: .5rem 1rem;
    padding-right: 5px;
    
    white-space: nowrap; /* single line */
}

    /* Unify button look (works for DT v1 and v2) */
    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .dt-paging .dt-paging-button {
        border: 0 !important;
        border-radius: 999px !important;
        padding: 2rem 2rem !important;
        margin: 0 .25rem !important;
        background: #f5f6fb !important;
        color: #6a5ae0 !important;
        line-height: 1;
        box-shadow: inset 0 0 0 1px #e9e9f4;
        padding-right: 25px;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
        .dt-paging .dt-paging-button:hover {
            background: #eef0f8 !important;
            color: #4f4b5a !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
        .dt-paging .dt-paging-button.current,
        .dt-paging .dt-paging-button.current:hover {
            background: #6950ff !important;
            color: #fff !important;
            box-shadow: none !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .dt-paging .dt-paging-button.disabled {
            opacity: .45 !important;
            background: transparent !important;
            box-shadow: none !important;
            cursor: not-allowed;
        }

/* If Bootstrap's paginator classes appear, keep them subtle */
.dataTables_wrapper .pagination .page-item {
    margin: 0 .25rem;
}

.dataTables_wrapper .pagination .page-link {
    border-radius: 12px;
    padding: .45rem .7rem;
    border: 1px solid #e6e6ef;
}

.dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: #6950ff;
    border-color: #6950ff;
    color: #fff;
}

/* Projects page: ensure info/pager single line targets */
#projectsTable_info {
    white-space: nowrap;
    margin-right: auto;
}

#projectsTable_paginate {
    white-space: nowrap;
}
@custom-variant dark (&:is(.dark *));

:root {
    --font-size: 11px;
    --background: #ffffff;
    --foreground: oklch(0.145 0 0);
    --card: #ffffff;
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: #030213;
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.95 0.0058 264.53);
    --secondary-foreground: #030213;
    --muted: #ececf0;
    --muted-foreground: #717182;
    --accent: #e9ebef;
    --accent-foreground: #030213;
    --destructive: #d4183d;
    --destructive-foreground: #ffffff;
    --border: rgba(0, 0, 0, 0.1);
    --input: transparent;
    --input-background: #f3f3f5;
    --switch-background: #cbced4;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --ring: oklch(0.708 0 0);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --radius: 0.625rem;
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: #030213;
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
}

.dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.145 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.145 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(0.269 0 0);
    --input: oklch(0.269 0 0);
    --ring: oklch(0.439 0 0);
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(0.269 0 0);
    --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-input-background: var(--input-background);
    --color-switch-background: var(--switch-background);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }

    body {
        @apply bg-background text-foreground;
    }
}

/**
 * Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
 */
@layer base {
    :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) {
        h1

{
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

h4 {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

p {
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
}

label {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

button {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

input {
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
}

}
}

html {
    font-size: var(--font-size);
}

/* ============ Stitch Design System Styles ============ */

/* Header title */
.stitch-title {
    font-weight: 800 !important;
    letter-spacing: 0.1px;
    font-size: 1.5rem !important;
}

/* Search input */
.stitch-search {
    border-radius: 9999px;
}

/* Primary "Add" button */
.stitch-solid {
    font-weight: 600;
    border: 0;
    border-radius: 0.5rem;
    background: #6950ff !important;
    color: white !important;
}

    .stitch-solid:hover {
        background: #5a43e6 !important;
    }

/* Subtle chips */
.stitch-chip {
    background: #f5f6fb;
    border: 1px solid #e9e9f4;
    border-radius: 9999px;
}

    .stitch-chip:hover {
        background: #eef0f8;
    }

/* Table styling */
.stitch-table-header {
    background: #f6f6fb !important;
}

    .stitch-table-header th {
        color: #6f6b7d !important;
        font-weight: 600 !important;
        border-bottom: 1px solid #e9e9f4;
    }

.stitch-table-row:hover {
    background: #f7f7fc;
}

/* Status badges */
.badge-active {
    background: #2e7b10 !important;
    color: #18e123 !important;
    border: 1px solid #bbefd0 !important;
    border-radius: 0px !important;
    padding: 0.25rem 0.5rem;
    font-weight: 200 !important;
    font-size: 0.75rem !important;
    outline: none;
}

.badge-inactive {
    background: #eef0f5 !important;
    color: #495057 !important;
    border: 1px solid #d9dfea !important;
    border-radius: 0px !important;
    padding: 0.25rem 0.5rem;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
}

/* Pagination pills */
.stitch-pagination-btn {
    border: 0 !important;
    background: #f5f6fb !important;
    border-radius: 9999px !important;
    padding: 0.35rem 0.65rem !important;
    margin: 0 0.25rem !important;
    box-shadow: inset 0 0 0 1px #e9e9f4;
    color: #6f6b7d !important;
    line-height: 1;
    min-width: 2rem;
    height: 2rem;
}

    .stitch-pagination-btn:hover:not(:disabled) {
        background: #eef0f8 !important;
        color: #4f4b5a !important;
    }

    .stitch-pagination-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.stitch-pagination-btn-active {
    background: #6950ff !important;
    color: #fff !important;
    box-shadow: none !important;
    border-radius: 9999px !important;
    padding: 0.35rem 0.65rem !important;
    padding-right: 25px;
    margin: 0 0.25rem !important;
    min-width: 2rem;
    height: 2rem;
}

    .stitch-pagination-btn-active:hover {
        background: #5a43e6 !important;
        color: #fff !important;
    }
.dataTables_paginate .pagination .page-item .page-link {
    border: 1px;
    border-radius: .5rem;
    margin: 0 .125rem;
    padding: .375rem .625rem;
    
}

.dataTables_paginate .pagination .page-item.active .page-link {
    background: #8B5CF6;
    color: #fff;
}
/* ========= ERPNew sidebar: make root tabs look like Dashboard ========= */
.layout-menu .menu-inner > .menu-item > .menu-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .8rem;
    border-radius: 999px; /* pill */
    transition: background-color .15s ease,color .15s ease, box-shadow .15s ease;
}

/* icon + label + caret layout */
.layout-menu .menu-link .menu-icon {
    font-size: 1.05rem;
    width: 1.4rem;
    text-align: center;
}

.layout-menu .menu-link .menu-caret {
    margin-left: auto;
    display: inline-flex;
}

    .layout-menu .menu-link .menu-caret .bi {
        transition: transform .15s ease;
    }

/* Hover effect on ANY root tab */
.layout-menu .menu-inner > .menu-item:hover > .menu-link {
    background: var(--bs-primary-bg-subtle, rgba(105,108,255,.08));
    color: var(--bs-primary, #696CFF);
}

/* Active/open state – SAME look as Dashboard */
.layout-menu .menu-inner > .menu-item.active > .menu-link,
.layout-menu .menu-inner > .menu-item.open > .menu-link {
    background: var(--bs-primary-bg-subtle, rgba(105,108,255,.12));
    color: var(--bs-primary, #696CFF);
    box-shadow: inset 0 0 0 1px rgba(105,108,255,.15);
}

    /* Optional: a subtle right-side accent like your screenshot */
    .layout-menu .menu-inner > .menu-item.active > .menu-link::after,
    .layout-menu .menu-inner > .menu-item.open > .menu-link::after {
        content: "";
        margin-left: .5rem;
        width: .6rem;
        height: .35rem;
        border-radius: 999px;
        background: var(--bs-primary, #696CFF);
        opacity: .65;
    }

/* Rotate caret when open */
.layout-menu .menu-item.open > .menu-link .menu-caret .bi {
    transform: rotate(90deg);
}

/* Submenu look: compact, squared (not pill) */
.layout-menu .menu-sub {
    padding: .35rem .25rem .5rem 2.1rem;
}

    .layout-menu .menu-sub .menu-item .menu-link {
        border-radius: .4rem;
        padding: .4rem .55rem;
    }

        .layout-menu .menu-sub .menu-item .menu-link.active {
            background: var(--bs-primary-bg-subtle, rgba(105,108,255,.12));
            color: var(--bs-primary, #696CFF);
        }

/* ===================================
   ERPNew Table Styling (Universal)
   =================================== */
.table.erp-table {
    border: 0px solid #e9ecf3;
    border-radius: 0.0rem;
    overflow: hidden;
    margin-bottom: 0;
    font-style: normal; /* remove any italic inheritance */
    font-weight: 500;
    color: #212529;
    background-color: #fff;
}

    /* Header */
    .table.erp-table thead {
        background: #f8f9fb;
    }

        .table.erp-table thead th {
            color: #495057;
            font-weight: 500;
            font-size: 11px;
            border-bottom: 1px solid #e9ecf3 !important;
            text-transform: uppercase;
            font-style: normal;
            
        }

    /* Cells */
    .table.erp-table tbody td {
        font-size: 11px;
        color: inherit;
        vertical-align: middle;
        border-color: #f1f2f6;
        font-style: normal;
    }

    /* Hover effect */
    .table.erp-table tbody tr:hover {
        background-color: #f5f7fb;
    }

    /* Checkbox alignment */
    .table.erp-table th.text-center,
    .table.erp-table td.text-center {
        vertical-align: middle;
    }

    /* Action buttons cell */
    .table.erp-table td .btn-ghost-ico {
        width: 25px;
        height: 25px;
        border-radius: 9999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color .2s;
       
    }

        .table.erp-table td .btn-ghost-ico:hover {
            background-color: #f0f2f7;
        }

/* Pagination (if used below table) */
.dataTables_paginate .pagination .page-link {
    border-radius: 10rem !important;
    font-style: normal;
}

.section-caption {
    font-weight: 500;
    color: #566a7f;
}

.form-divider {
    height: 6px;
    width: 240px;
    background: #ffd75e;
    border-radius: 4px;
}

.card .form-label {
    font-weight: 500;
    color: #566a7f;
}

.shadow-sm {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.05) !important;
}
.modal-backdrop {
    background-color: transparent !important;
}

    .modal-backdrop.show {
        opacity: 0 !important;
    }


.card .form-label {
    margin-bottom: 0.25rem;
}

.card .form-control,
.card .input-group-text,
.card select.form-control {
    border-radius: 0.5rem;
}

.card .input-group-text {
    min-width: 2.6rem;
    justify-content: center;
}

.card textarea.form-control {
    min-height: 90px;
}

.card-footer {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


.section-caption {
    font-weight: 600;
    color: #566a7f;
}

.form-divider {
    height: 4px;
    width: 240px;
    background: #ffd75e;
    border-radius: 4px;
}

.card .form-label {
    font-weight: 500;
    color: #566a7f;
}

.shadow-sm {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.05) !important;
}

#itemsTable th.th-qty, #itemsTable td.td-qty {
    width: 130px;
}

#itemsTable th.th-price, #itemsTable td.td-price {
    width: 160px;
}

.drag-handle {
    cursor: grab;
    user-select: none;
    font-size: 18px;
    line-height: 1;
    display: inline-block;
}

    .drag-handle:active {
        cursor: grabbing;
    }

.gu-mirror {
    position: fixed !important;
    z-index: 9999;
    pointer-events: none;
    opacity: .9;
}

.gu-transit {
    opacity: .4;
}

/* Select2 look */
#ProjectId + .select2-container {
    width: 100% !important;
    font-size: 1rem;
}

    #ProjectId + .select2-container .select2-selection--single {
        height: calc(1.5em + .75rem + 2px);
        padding: .375rem 2.25rem .375rem .75rem;
        border: 1px solid var(--bs-border-color, #ced4da);
        border-radius: 0;
        background-color: var(--bs-body-bg, #fff);
        display: flex;
        align-items: center;
        line-height: 1.5;
    }

    #ProjectId + .select2-container .select2-selection__rendered {
        padding-left: 0;
        color: inherit;
    }

    #ProjectId + .select2-container .select2-selection--single .select2-selection__arrow {
        height: 100%;
        right: .75rem;
    }

    #ProjectId + .select2-container.select2-container--focus .select2-selection--single,
    #ProjectId + .select2-container .select2-selection--single:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
        outline: 0;
    }

    #ProjectId + .select2-container .select2-dropdown {
        border-color: var(--bs-border-color, #ced4da);
        border-radius: 0;
    }

    #ProjectId + .select2-container .select2-search__field {
        border-radius: 0;
    }

:root {
    --brand: #7367f0;
    --brand-100: #ebe9fe;
}

.soft-card {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

    .soft-card .card-header {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

.bi-search {
    color: #a1a1b5;
}

#searchBox {
    width: 260px;
    max-width: 100%;
    border-radius: 999px;
}

.table-scroll-x {
    overflow-x: auto;
}

.table > :not(caption) > * > * {
    border-bottom-color: #eee;
}

.table tbody tr:hover {
    background: #faf9ff;
}

.stitch-thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f6f6fb !important;
    color: #6f6b7d;
    border-bottom: 1px solid #ececf4 !important;
}

.pagination .page-link {
    border: 0;
    margin: 0 .18rem;
    min-width: 2rem;
    text-align: center;
    border-radius: 999px;
    background: #f6f6fb;
}

.pagination .page-item.active .page-link {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 4px 10px rgba(115,103,240,.25);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: .5rem;
}

.btn-ghost {
    background: transparent;
    border: 0;
}

    .btn-ghost:hover {
        background: rgba(0,0,0,.05);
    }

.coa-row.level-1 {
    padding-left: 0 !important;
}

    /* For accounts that have toggle icon */
    .coa-row.level-1.has-children .coa-toggle {
        margin-right: 6px;
    }

    /* For accounts without toggle icon – fake icon spacing */
    .coa-row.level-1.no-children {
        padding-left: 22px !important; /* same width as dropdown icon */
    }
.coa-toggle-placeholder {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

.section-caption {
    font-weight: 600;
    color: #566a7f;
}

.form-divider {
    height: 4px;
    width: 240px;
    background: #ffd75e;
    border-radius: 4px;
}

.tight-page .card {
    border-radius: .5rem;
}

.tight-page .card-header {
    border-bottom: 1px solid var(--bs-border-color);
}

.tight-page .card-body {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.tight-page .card-body, .tight-page .filters-card {
    padding-right: .75rem;
    padding-left: .75rem;
}

@@media (min-width:576px) {
    .tight-page .card-body, .tight-page .filters-card {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

.card .form-label {
    font-weight: 500;
    color: #566a7f;
}
/* --- Modern ERP Form Styles --- */

:root {
    --erp-bg: #f4f7fa;
    --erp-card-bg: #ffffff;
    --erp-border: #e9ecef;
    --erp-primary: #4f46e5; /* Modern Indigo */
    --erp-text-muted: #6b7280;
    --erp-text-dark: #111827;
    --erp-radius: 0.75rem;
    --erp-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

body {
    background-color: var(--erp-bg);
}

/* Main Card Container */
.erp-card {
    background: var(--erp-card-bg);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow);
    padding: 2rem;
    margin-bottom: 2rem;
}

/* Typography */
.erp-page-title {
    font-weight: 700;
    color: var(--erp-text-dark);
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
}

.erp-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--erp-text-muted);
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

/* Custom Input Styling */
.erp-input {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.95rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .erp-input:focus {
        border-color: var(--erp-primary);
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    }

    .erp-input[readonly] {
        background-color: #f9fafb;
        color: #6b7280;
    }

/* The Big Amount Field */
.amount-input-group {
    position: relative;
}

    .amount-input-group .currency-symbol {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--erp-text-muted);
        font-weight: 500;
    }

.erp-input-amount {
    padding-left: 1.5rem;
    font-weight: 700;
    color: var(--erp-primary);
    font-size: 1.1rem;
}

/* Tabs */
.erp-tabs {
    display: flex;
    gap: 2rem;
    border-bottom: 2px solid var(--erp-border);
    margin-bottom: 1.5rem;
}

.erp-tab-btn {
    background: none;
    border: none;
    padding: 0.75rem 0;
    font-weight: 600;
    color: var(--erp-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

    .erp-tab-btn:hover {
        color: var(--erp-text-dark);
    }

    .erp-tab-btn.active {
        color: var(--erp-primary);
        border-bottom-color: var(--erp-primary);
    }

/* Tables */
.erp-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--erp-text-muted);
    font-weight: 600;
    background-color: #f9fafb;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--erp-border);
}

.erp-table td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--erp-border);
}

/* Bill/Allocation Cards (Nested in table) */
.bills-row td {
    background-color: #f8fafc !important;
    padding: 1rem 1.5rem !important;
}

.bill-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: box-shadow 0.2s;
}

    .bill-card:hover {
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        border-color: #cbd5e1;
    }

.bill-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem 1.5rem;
    font-size: 0.9rem;
}

.bill-label {
    color: #64748b;
    font-size: 0.8rem;
    margin-right: 0.4rem;
}

.bill-val {
    font-weight: 600;
    color: #334155;
}

/* Summary Panel */
.summary-panel {
    background-color: #f8fafc;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    padding: 1.5rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

    .summary-row.total {
        border-top: 2px dashed #e2e8f0;
        margin-top: 1rem;
        padding-top: 1rem;
        font-weight: 700;
        font-size: 1.2rem;
        color: var(--erp-text-dark);
    }

/* Utilities */
.hidden {
    display: none !important;
}

.money {
    font-family: 'Segoe UI', monospace;
    font-variant-numeric: tabular-nums;
}

/* Roles & permissions */
.bg-primary-soft {
    background-color: #e9f0ff;
    color: #0d3b66;
}

.permissions-card .card-header {
    background: #f5f7fb;
    border-bottom: 1px solid var(--erp-border);
}

.permissions-table thead th {
    background-color: #f0f4f9;
    border-bottom: 1px solid var(--erp-border);
}

.permissions-table tbody th {
    background-color: #f9fbff;
    font-weight: 600;
}

.permissions-table td {
    vertical-align: middle;
}

.permissions-card .toggle-extras.active {
    background-color: var(--erp-primary);
    color: #fff;
}

.permissions-card .extra-perm {
    line-height: 1.2;
    font-weight: 500;
}

.permissions-card .extra-perm input {
    margin-top: 0.1rem;
}
/* =======================================================
   SIDEBAR THEME - CLEAN WHITE PROFESSIONAL
   ======================================================= */

:root {
    --bs-primary: #696cff; /* Your Brand Purple */
    --sidebar-bg: #ffffff; /* CLEAN WHITE BACKGROUND */
    --menu-text-dark: #566a7f; /* Dark Slate for visibility */
    --menu-text-muted: #a1acb8;
}

/* 1. FORCE THE BACKGROUND TO WHITE (Removes Gradient) */
#sidebar.layout-menu {
    background-color: var(--sidebar-bg) !important;
    background-image: none !important; /* <--- Kills the Purple/Green gradient */
    box-shadow: 0 0.125rem 0.375rem 0 rgba(161, 172, 184, 0.12);
    border-right: 1px solid rgba(0,0,0,0.05);
}

/* 2. LOGO AREA */
.app-brand-text {
    color: #384555 !important; /* Dark text for Logo */
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.5px;
}

/* 3. USER PROFILE CARD */
/* Add a border since bg is white now */
.sidebar-profile {
    background: #f8f9fa; /* Very light gray card */
    border: 1px solid #eeeeee;
    margin: 0 1rem 1rem 1rem;
    color: #384555; /* Dark Text */
}

    .sidebar-profile .text-dark {
        color: #384555 !important;
    }

    .sidebar-profile .text-muted {
        color: #8898aa !important;
    }

/* 4. MENU TEXT - MAKE IT DARK */
.menu-header {
    color: var(--menu-text-muted) !important;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 1rem;
}

.menu-link {
    color: var(--menu-text-dark) !important; /* Dark Gray Text */
    font-weight: 500;
}

    /* Hover Effect */
    .menu-link:hover {
        background-color: rgba(67, 89, 113, 0.04) !important;
        color: var(--bs-primary) !important;
    }

/* 5. ACTIVE PARENT (The Purple Pill) */
/* This is for main items like "Dashboard" */
.menu-item.active > .menu-link:not(.menu-toggle) {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important; /* White text on Purple Button */
    box-shadow: 0px 4px 8px rgba(105, 108, 255, 0.4);
}

/* 6. OPEN DROPDOWN PARENT */
.menu-item.open > .menu-link {
    background-color: #f3f3f3; /* Light gray background for open folder */
    color: #435971 !important;
}

/* 7. CHILD ITEMS (Fixing the "Invisible Text" issue) */
.menu-sub .menu-link {
    padding-left: 3rem;
    background: transparent;
    color: var(--menu-text-dark) !important; /* Ensure child text is dark */
}

/* ACTIVE CHILD ITEM */
/* This fixes the "Invoices" visibility in your image */
.menu-sub .menu-item.active .menu-link {
    color: var(--bs-primary) !important; /* Make text PURPLE */
    font-weight: 700 !important;
    background-color: rgba(105, 108, 255, 0.1) !important; /* Light purple highlight */
    border-radius: 0.375rem;
}

    /* Optional: Add a dot next to active child */
    .menu-sub .menu-item.active .menu-link::before {
        content: "•";
        position: absolute;
        left: 1.8rem;
        color: var(--bs-primary);
        font-size: 1.5rem;
        line-height: 0.8;
    }
/* =========================================
   NAVBAR THEME - FULL WIDTH / ATTACHED
   ========================================= */

.layout-navbar {
    /* 1. Reset Floating Properties */
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    /* 2. Visuals */
    background-color: #ffffff !important; /* Solid White */
    /* 3. Subtle bottom border instead of a heavy shadow */
    box-shadow: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* 4. Positioning */
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 64px;
    padding: 0 1.5rem; /* Internal spacing for content */
    /* 5. Glass effect (Optional - keeps it modern but subtle) */
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95) !important;
}

    /* Ensure the container inside the navbar spans full width */
    .layout-navbar .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

/* Search Bar - Keep the Pill style but adjust background if needed */
.navbar-search .input-group {
    background-color: #f5f5f9;
    border-radius: 20px;
}
/* Avatar styling for Dashboard */
.avatar {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
}

.avatar-initial {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* "bg-label-primary" creates the soft light blue background */
.bg-label-primary {
    background-color: #e7e7ff !important;
    color: #696cff !important;
}

.bg-label-success {
    background-color: #e8fadf !important;
    color: #71dd37 !important;
}

.bg-label-warning {
    background-color: #fff2d6 !important;
    color: #ffab00 !important;
}

.bg-label-danger {
    background-color: #ffe0db !important;
    color: #ff3e1d !important;
}

.bg-label-info {
    background-color: #d7f5fc !important;
    color: #03c3ec !important;
}

/* Hover effect for Quick Action cards */
.hover-shadow-sm:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1) !important;
    border-color: #696cff !important;
    transform: translateY(-2px);
    transition: all 0.2s;
}
/* --- FIXED TABLE STYLING (Static Layout) --- */

/* 1. Card Header Styling */
.permissions-card-header {
    background-color: #f8f9fa; /* Light gray background for title area */
    border-bottom: 1px solid #d9dee3;
    padding: 1.25rem 1.5rem;
}

/* 2. Table Header Styling (Removed Sticky) */
.permissions-table thead th {
    background-color: #ffffff !important; /* White background */
    color: #566a7f;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1rem;
    border-bottom: 2px solid #e0e0e0; /* Strong border to separate header */
    vertical-align: bottom; /* Aligns buttons nicely */
    white-space: nowrap;
}

/* 3. Row Styling */
.permissions-table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #ebeef0;
}

.permissions-table tbody tr:last-child td {
    border-bottom: none;
}

.permissions-table tbody tr:hover td {
    background-color: #fcfcfc;
}

/* 4. Button Groups */
.action-btn-group .btn {
    padding: 0.25rem 0.6rem; /* Bigger touch target */
    font-size: 0.8rem;
}
/* --- ROLES LIST STYLING --- */

/* 1. Role Card Header */
.role-card-header {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 1.25rem 1.5rem;
}

/* 2. Avatar Styles (For Role Initials) */
.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.375rem; /* Soft square */
    font-size: 1rem;
    font-weight: 600;
}

.avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
}

/* Colors for Avatars */
.bg-label-primary {
    background-color: #e7e7ff !important;
    color: #696cff !important;
}

.bg-label-info {
    background-color: #d7f5fc !important;
    color: #03c3ec !important;
}

/* 3. Table Tweaks */
.role-name-text {
    color: #566a7f;
    font-weight: 600;
    font-size: 0.95rem;
}

.table-hover tbody tr:hover {
    background-color: #f8f9fa;
    transition: background-color 0.2s ease-in-out;
}

/* Reuse the sticky header from previous step */
.sticky-th {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: #f8f9fa !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-bottom: 2px solid #d9dee3;
}
/* --- PROFESSIONAL LIST & TABLE STYLES --- */

/* Card Header */
.list-card-header {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 1.25rem 1.5rem;
}

/* Sticky Table Header */
.sticky-th {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: #f8f9fa !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-bottom: 2px solid #d9dee3;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: #566a7f;
}

/* Avatars */
.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
}

.avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.85rem;
}

/* Avatar Colors (Soft) */
.bg-label-primary {
    background-color: #e7e7ff;
    color: #696cff;
}

.bg-label-success {
    background-color: #e8fadf;
    color: #71dd37;
}

.bg-label-warning {
    background-color: #fff2d6;
    color: #ffab00;
}

.bg-label-info {
    background-color: #d7f5fc;
    color: #03c3ec;
}

.bg-label-danger {
    background-color: #ffe0db;
    color: #ff3e1d;
}

.bg-label-dark {
    background-color: #dcdfe1;
    color: #233446;
}

/* Table Typography */
.table-text-primary {
    font-weight: 600;
    color: #566a7f;
    font-size: 0.95rem;
}

.table-text-secondary {
    font-size: 0.85rem;
    color: #a1acb8;
}
/* --- AUTHENTICATION PAGES --- */

.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f9; /* Light gray background */
    padding: 1.5rem;
}

.auth-shell {
    width: 100%;
    max-width: 450px; /* Compact width */
}

.auth-card {
    border: 0;
    border-radius: 0.75rem; /* 12px */
    box-shadow: 0 0.5rem 1.5rem rgba(161, 172, 184, 0.1);
    background-color: #fff;
    padding: 2.5rem;
}

.auth-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.auth-brand-icon {
    color: #696cff; /* Primary Color */
    font-size: 1.75rem;
}

.auth-brand-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #566a7f;
    letter-spacing: -0.5px;
}

.auth-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #566a7f;
    margin-bottom: 0.5rem;
}

.auth-subtitle {
    color: #a1acb8;
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

/* Input Group Styling for Auth */
.auth-input-group .input-group-text {
    background-color: #fff;
    border-right: 0;
    color: #b4bdce;
}

.auth-input-group .form-control {
    border-left: 0;
    padding-left: 0;
}

    .auth-input-group .form-control:focus {
        box-shadow: none;
        border-color: #d9dee3; /* Keep border gray on focus, handle wrapper */
    }

/* Focus state handling via wrapper class if needed, or just simple focus */
.auth-input-group:focus-within .input-group-text,
.auth-input-group:focus-within .form-control {
    border-color: #696cff;
    color: #696cff;
}

.btn-auth {
    padding: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 0.375rem;
}

.auth-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
    color: #697a8d;
}

    .auth-footer a {
        color: #696cff;
        text-decoration: none;
        font-weight: 600;
    }

        .auth-footer a:hover {
            text-decoration: underline;
        }
/* --- DATABASE MANAGEMENT PAGE --- */

.db-avatar {
    background-color: #3e4b5b !important;
    color: #fff !important;
}

/* Status Badges */
.badge-status-active {
    background-color: #e8fadf !important;
    color: #71dd37 !important;
}

.badge-status-pending {
    background-color: #fff2d6 !important;
    color: #ffab00 !important;
}

.badge-status-failed {
    background-color: #ffe0db !important;
    color: #ff3e1d !important;
}

/* Table Styles */
#dbTable th {
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #566a7f;
    background-color: #f8f9fa;
}

#dbTable td {
    padding: 1rem 0.75rem;
    vertical-align: middle;
}

/* Code Block for DB Name */
.db-name-code {
    background-color: #f5f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid #d9dee3;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    color: #697a8d;
}
/* ========== Chart of Account Create – Modern Styles ========== */

.coa-create .card {
    border-radius: 0.8rem;
}

.coa-create .card-body {
    padding: 1.75rem 1.75rem 1.5rem;
}

.coa-create h4 {
    letter-spacing: 0.01em;
}

/* Section headers */

.coa-create .section-header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.75rem;
}

.coa-create .section-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bs-secondary-color, #6c757d);
}

    .coa-create .section-title .dot {
        width: 0.55rem;
        height: 0.55rem;
        border-radius: 999px;
        background: linear-gradient(135deg, #4e6cfb, #42c6ff);
        box-shadow: 0 0 0 2px rgba(78, 108, 251, 0.12);
    }

/* Radio pill toggle for account nature */

.coa-create .nature-toggle .btn {
    border-radius: 999px;
    padding-inline: 1rem;
    font-size: 0.85rem;
}

.coa-create .nature-toggle .btn-outline-secondary {
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
    background-color: #fff;
}

.coa-create .nature-toggle .btn-check:checked + .btn-outline-secondary {
    color: #0f172a;
    background: linear-gradient(135deg, #e0ecff, #f0f9ff);
    border-color: #4e6cfb;
    box-shadow: 0 0 0 1px rgba(78, 108, 251, 0.35);
}

/* Switch line */

.coa-create .switch-line {
    padding: 0.4rem 0.1rem;
}

    .coa-create .switch-line .form-check-input {
        cursor: pointer;
    }

    .coa-create .switch-line .form-check-label {
        margin-left: 0.35rem;
        font-weight: 500;
    }

/* Inputs spacing */

.coa-create .form-label {
    margin-bottom: 0.15rem;
}

.coa-create .form-text {
    font-size: 0.75rem;
}

/* Page shell tweaks */

.coa-create .btn-light.border {
    background-color: #ffffff;
}

/* Small improvements on invalid state */

.coa-create .was-validated .form-control:invalid,
.coa-create .form-control.is-invalid {
    border-color: #e03131;
}

.coa-create .was-validated .form-select:invalid,
.coa-create .form-select.is-invalid {
    border-color: #e03131;
}

/* Responsive padding tweaks */

@media (max-width: 575.98px) {
    .coa-create .card-body {
        padding: 1.25rem;
    }

    .coa-create .d-flex.align-items-center.justify-content-between.mb-3 {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}