@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200&display=swap');

:root {
    --app-font-family: 'Poppins', sans-serif;

    /* ----------Deprecated color theme ---------- */
    --main-navbar-color: #495057;
    --dark-navbar-color: #2f2f2f;
    --navbar-text-color: rgb(226, 226, 226);
    --selected-navbar-item-color: #56595a;
    --hover-navbar-item-background: #3c4146;
    --blue: #3f7cf8;
    --light-blue: #6694ff;

    /* ---------- New color theme ---------- */

    /* Main colors */
    --primary: #3f7cf8;
    --red: #d63a06;
    --orange: #e09000;

    /* Surfaces */
    --background: #ffffff;               /* app background */
    --surface: #f7f8fc;                  /* menus, cards, nav */
    --surface-hover: #e8ebf3;
    --surface-2: #e8ebf3;                /* elevated surfaces */

    /* Text */
    --on-primary: #ffffff;
    --on-background: #1a1e2e;            /* primary text */
    --on-background-muted: #5c6280;      /* secondary text */
    --on-surface: #5c6280;               /* primary card text */
    --on-surface-muted: #a5aab9;         /* secondary card text */

    /* Borders */
    --border-color: #dde1ef;
    --border-color-2: #dde1ef;
    --chart-line-color: #dde1ef;

    /* Sidebar & topbar */
    --sidebar-bg: #f0f2f8;
    --sidebar-hover: #e8ebf3;
    --sidebar-submenu-bg: #e8ebf3;

    /* Table */
    --table-row-hover: #f7fbff;

    /* Overview cards */
    --card-red: #d63a06;
    --card-yellow: #e09000;
    --card-green: #1faa9c;
    --card-blue: #2962d9;
    --card-red-bg: linear-gradient(-90deg, rgba(255, 168, 150, 1) 0%, rgba(255, 255, 255, 1) 130%);
    --card-yellow-bg: linear-gradient(-90deg, rgba(255, 216, 132, 1) 0%, rgba(255, 255, 255, 1) 130%);
    --card-green-bg: linear-gradient(-90deg, rgba(166, 229, 218, 1) 0%, rgba(255, 255, 255, 1) 130%);
    --card-blue-bg: linear-gradient(-90deg, rgba(173, 219, 255, 1) 0%, rgba(255, 255, 255, 1) 130%);
    --box-shadow: 0 2px 12px rgba(63, 75, 120, 0.1);
}

[data-theme="dark"] {
    /* ---------- Deprecated color theme ---------- */
    --main-navbar-color: #181c27;
    --dark-navbar-color: #0d0f18;
    --navbar-text-color: #e8eaf2;
    --selected-navbar-item-color: #292f41;
    --hover-navbar-item-background: #292f41;
    --blue: #3f7cf8;
    --light-blue: #6694ff;

    /* ---------- New color theme ---------- */

    /* Main colors */
    --primary: #3f7cf8;
    --red: #e16136;
    --orange: #e49e27;

    /* Surfaces */
    --background: #0d0f18;                   /* app background */
    --surface: #1c2337;                      /* menus, cards, nav */
    --surface-hover: #292f41;                /* hover for surfaces */
    --surface-2: #292f41;                    /* elevated surfaces */

    /* Text */
    --on-primary: #ffffff;
    --on-background: #e8eaf2;                /* main text */
    --on-background-muted: #b2b5c5;          /* secondary text */
    --on-surface: #b2b5c5;                   /* primary surface text */
    --on-surface-muted: #767b95;             /* secondary surface text */

    /* Borders */
    --border-color: #2a3148;
    --border-color-2: #2a3148;
    --chart-line-color: #2a3148;

    /* Sidebar & topbar */
    --sidebar-bg: #181c27;
    --sidebar-hover: #292f41;
    --sidebar-submenu-bg: #1c2337;

    /* Table */
    --table-row-hover: #1e2333;

    /* Overview cards */
    --card-red: #e16136;
    --card-yellow: #e49e27;
    --card-green: #58bc8c;
    --card-blue: #3f7cf8;
    --card-red-bg: linear-gradient(-90deg, rgba(225, 97, 54, 0.2) 0%, rgba(28, 35, 55, 1) 130%);
    --card-yellow-bg: linear-gradient(-90deg, rgba(228, 158, 39, 0.2) 0%, rgba(28, 35, 55, 1) 130%);
    --card-green-bg: linear-gradient(-90deg, rgba(88, 188, 140, 0.2) 0%, rgba(28, 35, 55, 1) 130%);
    --card-blue-bg: linear-gradient(-90deg, rgba(63, 124, 248, 0.2) 0%, rgba(28, 35, 55, 1) 130%);
    --box-shadow: 4px 8px 12px -2px rgba(0, 0, 0, 0.6);
}

body {
    color: var(--on-surface);
    background-color: var(--surface);
    font-weight: 400;
    font-family: var(--app-font-family);
}

.sidebar, .navbar, .footer, .card, .modal, .btn, .form-control, .dropdown-menu,
h1, h2, h3, h4, h5, h6, p, label, span, a, td, th, input, select, textarea, button {
    font-family: var(--app-font-family);
}

#theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 16px;
    padding: 0;
    border-radius: 10px;
    background: none;
    border: 1px solid transparent;
    text-decoration: none;
    color: var(--on-background);
    opacity: 0.7;
    transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

#theme-toggle:hover {
    border-color: var(--border-color);
    background-color: var(--surface-hover) !important;
    opacity: 1;
}

#theme-icon {
    display: block;
    width: 20px;
    height: 20px;
    color: inherit;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 20px 20px;
    mask-size: 20px 20px;
}

#theme-icon.theme-icon-light {
    -webkit-mask-image: url("../images/theme-light-mode.svg");
    mask-image: url("../images/theme-light-mode.svg");
}

#theme-icon.theme-icon-dark {
    -webkit-mask-image: url("../images/theme-dark-mode.svg");
    mask-image: url("../images/theme-dark-mode.svg");
}

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

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

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

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

.red {
    color: var(--red);
}

.bg-red {
    background-color: var(--red);
}

.orange {
    color: var(--orange);
}

.bg-orange {
    background-color: var(--orange);
}

.button {
    color: #fff;
    padding: 12px 20px;
    margin: 5px;
    background: transparent;
    border-radius: 12px;
    transition: all;
    --webkit-transition: all;
    --moz-transition: all;
    --ms-transition: all;
    --o-transition: all;
    animation-duration: 300ms;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
    font-weight: 500;
    border: none;
    text-align: center;
}

.button.primary {
    background-color: var(--primary);
    color: #fff;
    text-decoration: none;
}

.button.primary:hover {
    background-color: #2962d9;
}

.button.gray {
    text-decoration: none;
    color: var(--on-background);
    background-color: var(--background);
    border: 1px solid var(--border-color-2);
}

.button.gray:hover {
    background-color: var(--surface-2);
    color: var(--on-surface);
}

.button.red {
    background-color: var(--red);
    color: #fff;
    text-decoration: none;
}

.button.red:hover {
    background-color: #c43a1a;
}

.button.orange {
    border-color: var(--orange);
    color: #fff;
    text-decoration: none;
}

.button.orange:hover {
    background-color: #d37904;
}

.t-button {
    padding: 6px 12px;
    margin: 5px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all;
    --webkit-transition: all;
    --moz-transition: all;
    --ms-transition: all;
    --o-transition: all;
    animation-duration: 300ms;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    font-weight: 400;
    opacity: .75;
}

.t-button.primary {
    border-color: var(--primary);
}

.t-button.primary:hover {
    background-color: var(--primary);
    color: #fff;
}

.t-button.gray {
    border-color: var(--gray);
}

.t-button.gray:hover {
    background-color: var(--gray);
    color: #fff;
}

.t-button.red {
    border-color: var(--red);
}

.t-button.red:hover {
    background-color: var(--red);
    color: #fff;
}

.t-button.orange {
    border-color: var(--orange);
}

.t-button.orange:hover {
    background-color: var(--orange);
    color: #fff;
}

.modal-header-custom div {
    color: #4b4b4b;
    font-size: 24px;
    font-weight: 600;
}

.modal-header-custom span {
    color: #a5a5a5;
    font-size: 1.1rem;
    font-weight: 400;
    padding-top: 10px;
    padding-bottom: 20px;
    display: block;
    line-height: 24px;
}

.form-control {
    padding: 0.875rem 1.075rem !important;
}

.register-text {
    font-size: 1rem;
}

.sign-up {
    padding-left: 0.2rem;
}

.icon-holder {
    display: block;
    font-size: 4rem;
    padding: 40px;
}

.menu-color {
    background-color: inherit !important;
}

.navbar-toggler-right i {
    color: var(--on-surface);
}

.brand-logo {
    text-align: left;
    padding-left: 0;
    width: auto;
}

.brand-logo img {
    width: auto !important;
}

/* -------------------- NAVBAR BRAND LOGO -------------------- */
.navbar .navbar-brand-wrapper {
    justify-content: flex-start !important;
    padding-left: 32px;
    box-sizing: border-box;
}

.navbar .navbar-brand-wrapper .navbar-brand {
    color: var(--on-background) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px;
    height: 70px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}

.navbar .navbar-brand-wrapper .navbar-brand .brand-icon {
    display: block;
    flex: 0 0 auto;
    height: 32px !important;
    width: auto !important;
    max-width: none !important;
    background: transparent !important;
}

.navbar .navbar-brand-wrapper .navbar-brand .brand-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: var(--on-background);
    white-space: nowrap;
}

.navbar .navbar-brand-wrapper .navbar-brand:hover,
.navbar .navbar-brand-wrapper .navbar-brand:focus {
    color: var(--on-background) !important;
    text-decoration: none;
}

@media (max-width: 991px) {
    .navbar .navbar-brand-wrapper {
        justify-content: center !important;
        padding-left: 0;
    }

    .navbar .navbar-brand-wrapper .navbar-brand {
        width: 55px;
        justify-content: center !important;
        gap: 0;
    }

    .navbar .navbar-brand-wrapper .navbar-brand .brand-name {
        display: none;
    }

    .navbar .navbar-brand-wrapper .navbar-brand .brand-icon {
        height: 28px !important;
    }
}
/* -------------------- end navbar brand logo -------------------- */

.navbar-toggler {
    color: var(--on-surface);
}

/* Override hardcoded white on alternative-menu-button (broken in light mode) */
.alternative-menu-button button {
    color: var(--on-surface) !important;
}

/* -------------------- SIDEBAR EXPAND/COLLAPSE BUTTON -------------------- */
.sidebar {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-bottom-section {
    padding: 0 0 8px;
    flex-shrink: 0;
}

.sidebar-expand-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 10px;
    opacity: 0.5;
}

.sidebar-expand-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 0;
    background: transparent;
    border: 0;
    color: var(--on-surface);
    cursor: pointer;
    min-height: 44px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    transition: background 0.2s ease;
}

.sidebar-expand-btn:hover {
    background: var(--sidebar-hover) !important;
    color: var(--on-surface);
}

.sidebar-expand-icon-wrapper {
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.sidebar-expand-icon {
    transition: transform 0.25s ease;
}

/* Expanded state: arrow points left (← = rotate 180°) */
body:not(.sidebar-icon-only) .sidebar-expand-icon {
    transform: rotate(180deg);
}

.sidebar-expand-label {
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Icon-only mode: hide label */
.sidebar-icon-only .sidebar-expand-label {
    display: none !important;
}

/* Icon-only mode: center icon in button */
.sidebar-icon-only .sidebar-expand-btn {
    justify-content: center;
    padding: 8px 0;
}

.sidebar-icon-only .sidebar-expand-icon-wrapper {
    width: auto;
}
/* -------------------- end sidebar expand/collapse button -------------------- */

/* -------------------- SIDEBAR & NAVBAR BACKGROUND -------------------- */
.navbar {
    background-color: var(--sidebar-bg) !important;
}

.navbar .navbar-brand-wrapper {
    background-color: var(--sidebar-bg) !important;
}

.navbar .navbar-menu-wrapper {
    background-color: var(--sidebar-bg) !important;
    border-bottom: none !important;
}

.page-body-wrapper {
    background-color: var(--sidebar-bg) !important;
}

.content-wrapper {
    background: var(--background) !important;
    border-top-left-radius: 30px !important;
}

.sidebar {
    background-color: var(--sidebar-bg) !important;
    border-right: none !important;
    position: fixed !important;
    transition: all 0.25s ease;
}

.main-panel {
    width: 100%;
    padding-left: 275px;
    transition: all 0.25s ease;
}

.sidebar-icon-only .main-panel {
    padding-left: 70px;
    width: 100%;
}

@media (max-width: 991px) {
    .main-panel {
        padding-left: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    .content-wrapper {
        border-top-left-radius: 0 !important;
        background: var(--sidebar-bg) !important;
    }
}

.sidebar {
    padding: 0 10px;
}

    .sidebar .nav .nav-item .nav-link,
    .sidebar .nav .nav-item .nav-link i.menu-icon {
        color: var(--on-surface);
    }

    .sidebar .nav:not(.sub-menu) > .nav-item.active {
        background-color: var(--surface-hover);
        border: 1px solid var(--border-color);
    }

    .sidebar .nav .nav-item.active > .nav-link i.menu-icon {
        color: var(--primary);
    }

    .sidebar .nav .nav-item.active > .nav-link .menu-title,
    .sidebar .nav .nav-item.active > .nav-link .menu-arrow {
        color: var(--on-surface);
    }

    .sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link,
    .sidebar .nav:not(.sub-menu) > .nav-item:hover[aria-expanded="true"] {
        background: var(--sidebar-hover) !important;
        color: var(--on-surface);
        border-radius: 8px;
    }

    .sidebar .nav.sub-menu {
        background: var(--sidebar-submenu-bg) !important;
    }

    .sidebar .nav.sub-menu .nav-item::before {
        background: var(--on-surface-muted) !important;
    }
/* -------------------- end sidebar & navbar background -------------------- */

/* -------------------- HAMBURGER / MINIMIZE -------------------- */
/* Minimize button (desktop) color against sidebar-bg */
.navbar .navbar-brand-wrapper .navbar-toggler {
    color: var(--on-surface) !important;
    border: 0;
    padding: 0.25rem 0.5rem;
}

.navbar .navbar-brand-wrapper .navbar-toggler:hover {
    color: var(--on-background) !important;
}

/* Desktop: hide brand-name text when sidebar is collapsed to icons only */
.sidebar-icon-only .navbar .navbar-brand-wrapper {
    justify-content: center !important;
    padding-left: 0;
}

.sidebar-icon-only .navbar .navbar-brand-wrapper .brand-name {
    display: none;
}

.sidebar-icon-only .navbar .navbar-brand-wrapper .brand-icon {
    display: inline-block;
}

/* Mobile offcanvas sidebar — slides in from LEFT, matches Angular sidemenu behavior */
@media (max-width: 991px) {
    .sidebar-offcanvas {
        position: fixed !important;
        left: -275px;
        right: auto !important;
        top: 70px;
        bottom: 0;
        width: 275px !important;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1050;
        background-color: var(--sidebar-bg) !important;
        box-shadow: none;
        transition: left 0.25s ease-out;
    }

    .sidebar-offcanvas.active {
        left: 0;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    }

    /* Semi-transparent backdrop behind sidebar (tablet only) */
    .sidebar-mobile-backdrop {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1049;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .sidebar-mobile-backdrop.active {
        display: block;
    }

    /* Hamburger button colors */
    .alternative-menu-button button {
        color: var(--on-surface) !important;
        padding: 0 !important;
    }

    .alternative-menu-button {
        height: 100%;
        width: 70px;
        margin-right: -11px;
        display: flex;
        justify-content: center;
    }

    /* Hide expand/collapse btn on mobile (not needed) */
    .sidebar-bottom-section {
        display: none;
    }
}

/* Phone (<640px): sidebar covers full screen like Angular */
@media (max-width: 640px) {
    .sidebar-offcanvas {
        left: -100% !important;
        width: 100% !important;
        max-width: 100%;
    }

    .sidebar-offcanvas.active {
        left: 0 !important;
        box-shadow: none;
    }

    /* Full-screen sidebar is its own backdrop — hide separate one */
    .sidebar-mobile-backdrop {
        display: none !important;
    }
}
/* -------------------- end hamburger / minimize -------------------- */

.alert-success .close {
    line-height: 1rem;
}

.error-alert-custom {
    display: block;
    font-size: 0.875rem;
    line-height: 1.4rem;
    padding-top: 0.3rem;
}

.footer {
    font-family: var(--app-font-family);
    font-weight: bold;
    padding: 20px 2.45rem;
}

.custom-button {
    background-color: var(--dark-navbar-color);
    color: white;
    height: 40px;
    margin-top: 15px;
    padding: 5px 30px;
    border-radius: 5px;
    cursor: pointer;
}

    .custom-button:hover {
        background-color: #1d1c1c;
    }

.card .card-title {
    color: var(--blue);
    text-transform: uppercase;
    font-size: 1.175rem;
    font-weight: 500;
    padding: 1.25rem 1.437rem;
    margin-right: auto;
    margin-bottom: 0;
}

.card-title-space {
    border-bottom: solid 2px var(--gray-lightest);
    display: flex;
    justify-content: center;
}

.card .card-body {
    padding: 0;
}

.card .row {
    margin-left: 0;
    margin-right: 0;
}

.card .graph-holder {
    padding: 1.25rem 1.437rem;
}

.graph-buttons-row {
    border-top: solid 2px var(--border-color-2);
    display: flex;
    justify-content: center;
}

.month-back {
    margin-right: auto;
}

.month-forward {
    margin-left: auto;
    padding-right: 0 !important;
}

    .month-back button,
    .month-forward button {
        height: 100%;
        padding: 0 2rem;
        border: 0;
        outline: 0;
        background-color: var(--surface-2) !important;
        font-size: 1rem;
        font-weight: bold;
        color: var(--blue);
    }
    
    .month-back button {
        border-bottom-left-radius: 16px;
    }
    
    .month-forward button {
        border-bottom-right-radius: 16px;
    }
    
    

.header-select {
    margin-right: 8px;
    margin-top: 8px;
    width: 100px;
    display: flex;
    padding: 0 2rem;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.header-button {
    margin-top: 8px;
    height: 30px;
    display: flex;
    padding: 0 1rem;
    align-items: center;
    justify-content: center;
    background-color: var(--blue);
    font-weight: bold;
    color: white;
    font-size: 14px;
    border-radius: 0.1875rem;
}

.header-button:hover:enabled,
.header-button:active:enabled {
    background-color: #2962d9 !important;
    color: white !important;
    -webkit-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
    text-decoration: none;
}

a.header-button:hover,
a.header-button:active {
    background-color: #2962d9 !important;
    color: white !important;
    -webkit-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
    text-decoration: none;
}

.month-back button:hover:enabled,
.month-forward button:hover:enabled,
.month-back button:active:enabled,
.month-forward button:active:enabled,
.header-button:active:enabled,
.header-button:hover:enabled {
    background-color: var(--surface-hover);
    -webkit-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}

.graph-buttons-row p {
    color: var(--on-surface);
    font-size: 1.2rem;
    font-weight: 600;
}

.custom_container {
    padding: 30px 20px;
}

.custom-select {
    display: inline-block !important;
    width: 70px !important;
    margin: 0 10px 0 0 !important;
    height: 2.25rem !important;
    border: solid 1px var(--border-color-2);
    outline: 0;
    font-size: 0.875rem !important;
    padding: 0 !important;
}

.dataTables_info {
    padding-top: 15px !important;
    line-height: 35px;
    font-size: 14px !important;
}

.dataTables_paginate {
    padding-top: 15px !important;
}

.pagination {
    justify-content: flex-end;
}

.table-button {
    background: white;
    color: #0270ec;
    border: 1px solid #0270ec;
    margin: 10px;
    padding: 8px 16px;
    border-radius: 8px;
    animation-duration: 300ms;
    transition: all;
    -webkit-transition: all;
    -moz-transition: all;
    -ms-transition: all;
    -o-transition: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 300ms !important;
    opacity: 0.75;
}

.table-button:hover {
    background: #0270ec;
    color: white;
}

.table-button.orange {
    border-color: #ff6a33;
    color: #ff8300;
}

.table-button.orange:hover {
    background: #ff8300;
    color: white;
}

.table-button.red {
    color: var(--danger) !important;
    border-color: var(--danger) !important;
}

.table-button.red:hover,
.table-button.red:active {
    background-color: var(--danger) !important;
    color: white !important;
}

#historyTable_wrapper .dataTables_length {
    margin-bottom: 8px;
}

.dataTables_length label select {
    padding: 5px 10px !important;
}

.dataTableClass thead {
    background-color: var(--surface) !important;
    color: var(--on-surface) !important;
    height: 48px;
    font-size: 14px;
}

    .dataTableClass thead tr th {
        padding: 15px;
    }

.custom_table .dataTables_wrapper .row .dataTables_filter {
    text-align: right;
    padding-right: 1px;
}

@media (max-width: 768px) {
    .custom_table .dataTables_wrapper .row .dataTables_filter {
        text-align: left !important;
    }
}

.custom_table .dataTables_wrapper .row .dataTables_filter label input {
    display: inline-block;
    width: 200px;
    margin-left: 15px;
}

.dataTables_filter {
    margin-bottom: 10px;
}

.custom-form {
    padding: 30px;
}

.sms-text-holder {
    padding: 30px 30px 10px;
}

.resend-text{
    display: inline-block
}

.resend-button {
    border: 0;
    background-color: transparent;
    text-decoration: underline;
    color: var(--blue);
    font-size: 14px;
    display: inline-block;
}

.resend-diffrent-number {
    text-decoration: underline !important;
    color: var(--blue) !important;
    font-size: 14px;
    display: inline-block;
    padding-right: 10px;
}

.button-holder {
    padding: 10px 0;
    text-align: right;
}

.button-holder .btn{
    margin: 0 10px;
}

.available-scopes {
    width: 85%;
    min-height: 400px;
    outline: 1px solid #e6e8ee;
    margin-bottom: 25px;
}

.available-scopes-item {
    padding: 15px;
    outline: 1px solid #e6e8ee;
}

.custom-submit {
    min-width: 25%;
    font-weight: bold;
}

.custom-header {
    border-top-left-radius: 24px;
}

.page-title-heading {
    color: rgb(0, 148, 234);
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.tab-content {
    padding-bottom: 30px;
    padding-top: 10px;
}

.body-tabs .nav-item a.active {
    font-weight: bold;
    color: var(--primary);
    border-bottom: solid 2px var(--primary);
}

.body-tabs .nav-item a {
    color: var(--on-background);
    border-bottom: 2px solid var(--on-background);
    padding: 10px 70px;
    font-weight: bold;
}


.verify-email {
    display: flex;
}

    .verify-email input {
        width: 70%;
        display: inline-block;
        vertical-align: middle;
        border-right: 0;
    }

    .verify-email button {
        width: 30%;
    }

.roles-label {
    margin-bottom: 0.8rem;
    font-weight: 500;
}

.custom-modal-footer {
    border-top: none;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}

.custom-2fa {
    margin-top: 10px;
    min-width: 25%;
    padding: 10px;
}

.settings-option {
    background-color: var(--blue);
    display: flex;
    padding: 9px 25px;
    cursor: pointer;
    color: white;
    border-radius: 0.1875rem;
    font-size: 14px;
    width: 30%;
    justify-content:center;
    align-items: center;
    text-align: center;
}

.selected-auth-options-holder {
    display: flex;
    justify-content: space-between;
   padding-top: 10px;
}

.recovery-codes-options-holder {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}


.settings-option:hover {
    background-color: #2962d9;
    text-decoration: none;
    color: white;
}

.negative-option {
    background-color: var(--red);
}

.negative-option:hover {
    background-color: var(--danger);
    color: white;
}

.custom-spacing hr {
    margin: 0;
}

.details-checkboxes .form-check {
    display: inline-block;
    width: 49%;
}

.lockout-holder {
    box-shadow: 0 0 7px -4px rgba(0, 0, 0, 0.4);
    background-color: var(--gray-lightest);
    padding: 5px 30px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.lockout-text {
    vertical-align: text-top;
    font-size: 1rem;
    color: var(--red);
    margin: 0;
}

.lockout-button {
    color: white;
    background-color: var(--success);
    font-weight: bold;
    border: 0;
    outline: 0;
}

    .lockout-button:hover,
    .lockout-button:active {
        background-color: var(--success);
        color: white;
        border: 0;
        outline: 0;
    }

.logoutSession {
    min-width: 130px;
}

#snackbar {
    visibility: hidden;
    width: 100%;
    background-color: transparent;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    position: fixed;
    z-index: 999999;
    bottom: 0;
    font-size: 17px;
    right: 0;
}

    #snackbar.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation-fill-mode: forwards;
    }

    #snackbar.showWarning {
        visibility: visible;
        -webkit-animation: fadein 0.5s;
        animation: fadein 0.5s;
    }

    #snackbar.showError {
        visibility: visible;
        -webkit-animation: fadein 0.5s;
        animation: fadein 0.5s;
    }

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 0;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 0;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 0;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

.no-margin {
    margin: 0 !important;
}

.cards-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

    .cards-row .card .card-body {
        display: flex;
        align-items: center;
    }

        .cards-row .card .card-body .icon {
            width: 30%;
            text-align: center;
        }

        .cards-row .card .card-body .text {
            width: 68%;
            text-align: right;
        }

        .cards-row .card .card-body .text {
            padding: 1.25rem 1.437rem;
            text-align: right;
        }

            .cards-row .card .card-body .text .custom-card-title {
                text-transform: uppercase;
                font-size: 1.175rem;
                font-weight: 500;
            }

.overview-cards {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 32px;
}

.overview-card .custom-card-title {
    text-transform: uppercase;
}

.overview-cards .overview-card-container {
    container-type: inline-size;
    container-name: overview-card-container;
}

.overview-cards .overview-card-container .overview-card {
    display: flex;
    padding: 24px 32px !important;
    border-radius: 16px !important;
    box-shadow: var(--box-shadow)
}

.overview-cards .overview-card .icon {
    width: 20%;
    text-align: left;
    align-content: center !important;
}

.overview-cards .overview-card .text {
    width: 80%;
    text-align: right;
}

/* Overview cards content changes direction when its container has a maximum width of 270px */
@container overview-card-container (max-width: 270px) {
    .overview-card {
        flex-direction: column !important;
        align-items: center;
        gap: 8px;
    }

    .overview-card .icon,
    .overview-card .text {
        width: auto !important;
    }

    .custom-card-info,
    .custom-card-title {
        text-align: center;
        margin-bottom: 0;
    }
}

@media (max-width: 1500px) {
    .overview-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .overview-cards {
        grid-template-columns: repeat(1, 1fr);
    }
}

.card-yellow {
    background: var(--card-yellow-bg)
}

.card-green {
    background: var(--card-green-bg)
}

.card-blue {
    background: var(--card-blue-bg)
}

.card-red {
    background: var(--card-red-bg)
}

.card-red .text .custom-card-title,
.card-red .text .custom-card-info,
.card-red .icon i {
    color: var(--card-red) !important;
}

.card-yellow .text .custom-card-title,
.card-yellow .text .custom-card-info,
.card-yellow .icon i {
    color: var(--card-yellow) !important;
}

.card-green .text .custom-card-title,
.card-green .text .custom-card-info,
.card-green .icon i {
    color: var(--card-green) !important;
}

.card-blue .text .custom-card-title,
.card-blue .text .custom-card-info,
.card-blue .icon i {
    color: var(--card-blue) !important;
}

.logout-all {
    background-color: var(--danger) !important;
    color: white;
    cursor: pointer;
}

    .logout-all:hover,
    .logout-all:active {
        background-color: #d13e3c !important;
    }

@media (min-width: 768px) and (max-width: 1280px){
    .card .card-body{
        display: initial;
        padding: 15px;
    }

    .card .card-body .icon{
        width: 100%;
    }

    .card .card-body .text {
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 0;
        width: 100%;
        text-align: center;
    }
}

.i-mar{
    margin-left: 1rem;
}

@media (min-width: 1200px) and (max-width: 1370px){
    .verify-email input {
        width: 60%;
        display: inline-block;
        vertical-align: middle;
        border-right: 0;
    }

    .verify-email button {
        width: 40%;
    }
}

@media (max-width: 425px){
	.verify-email{
		display: block;
	}

    .verify-email input {
        width: 100%;
    border: 1px solid #ced4da;
    }

    .verify-email button {
        width: 80%;
		margin-top: 10px;
    }
}

.adminErrorDiv {
    padding: 85px;
}

.adminErrorDiv .dialog-message {
    text-align: center;
    font-size: 1.5rem !important;
    color: var(--blue);
    font-weight: 500;
    margin-bottom: 48px;
}

.error-color {
    color: #ff3333 !important;
}

.lBtnMarg {
    margin-right: auto !important;
}
.title {
  display: inline-block;
  width: 49%;
  margin-bottom: 30px;
}
.tableAddNewButton {
  display: inline-block;
  width: 49%;
  text-align: right;
  margin-bottom: 36px;
}

.dataTableClass {
  width: 100% !important;
}


table.dataTableClass > tbody > tr > td {
    border: none;
    border-bottom: 1px solid var(--border-color) !important;
    background: var(--background) !important;
    padding: 8px 32px 8px 10px;
}

table.dataTableClass > tbody > tr > td.dataTables_empty {
    padding-top: 24px;
    padding-bottom: 24px;
}

table.dataTableClass > tbody > tr > td.dataTables_empty:hover {
    background-color: var(--background);
}

table.dataTable.no-footer {
  border-bottom: 1px solid var(--border-color) !important;
}


.hideTable {
  display: none;
  width: 100% !important;
}
.fullWidthCard {
  width: 98%;
  left: 1%;
}

.showSpinner,
.showDiv {
  display: block !important;
}

.hideContent {
  display: none;
}

.successDiv,
.errorDiv {
  display: none;
}

.user-name {
    display: inline-block;
    color: var(--on-surface);
    padding-left: 5px;
    padding-right: 8px;
    font-weight: bold;
}

.dropdown-toggle .ti-angle-down {
    -webkit-text-stroke: 1px white;
}

#plus-one {
    text-align: right;
    padding-right: 20px;
}

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

.bg-plum-plate {
    background-image: linear-gradient(135deg, #4eb8ff 0,#764ba2 100%) !important;
}

.icon-denied-square-1 {
    border-radius: 8px !important;
    background-color: #ff3333;
    width: 120px;
    height: 120px;
    text-align: center;
    margin: auto auto 35px;
    -webkit-box-shadow: -5px -5px 6px -1px rgba(0,0,0,0.14);
    -moz-box-shadow: -5px -5px 6px -1px rgba(0,0,0,0.14);
    box-shadow: -5px -5px 6px -1px rgba(0,0,0,0.14);
}

.aleternate-square {
    background-image: linear-gradient(183deg, #4eb8ff 0,#764ba2 146%) !important;
}


.icon-denied-square-2 {
    border-radius: 8px !important;
    background-color: rgb(205,205,205);
    color: var(--blue);
    width: 120px;
    height: 120px;
    text-align: center;
    margin-bottom: 35px;
    position: relative;
    left: 15px;
    top: 15px;
    display: flex;
    align-items: center;
    -webkit-box-shadow: 5px 5px 6px 0 rgba(0,0,0,0.14);
    -moz-box-shadow: 5px 5px 6px 0 rgba(0,0,0,0.14);
    box-shadow: 5px 5px 6px 0 rgba(0,0,0,0.14);
    justify-content: center;
}


.inline-span{
    display: inline !important;
}

.extra-body-padding {
    padding: 40px;
}

@media (max-width: 1024px) {
    .extra-body-padding {
        padding: 20px 20px 30px;
    }
}

.checkbox-keep {
    font-weight: 400;
    margin-top: -7px;
    margin-bottom: 20px;
}

.password-margin {
    margin-top: 10px;
    margin-bottom: -10px;
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}



.body-tabs .nav-item a {
    padding: 10px 35px;
}

.remove-button {
    font-weight: bold;
}

.remove .fa-trash-alt,
.remove .fa-times {
    color: var(--red);
}

.edit  .fa-edit{
    color: var(--orange)
}

.confirm .fa-check {
    color: var(--primary);
}

.custom-select-drodown-icon {
    position: absolute;
    height: 100%;
    right: 0;
    pointer-events: none;
}

.error-row{
    background-color: #ffefef
}

.error-placeholder::-webkit-input-placeholder, /* Chrome/Opera/Safari */
.error-placeholder:-moz-placeholder, /* Firefox 19+ */
.error-placeholder::-moz-placeholder, /* Firefox 19+ */
.error-placeholder:-ms-input-placeholder, /* IE 10+ */
.error-placeholder:-moz-placeholder  { /* Firefox 18- */
    color: var(--red);
}

.form-group .error.text-danger {
    font-size: 12px !important;
    margin-top: 8px;
    display: block;
    font-weight: bold;
}


.footer a {
    color: #5a5a5a;
}

.footer a:hover, .footer a:active, .footer a:focus {
    text-decoration: none
}

.custom-close {
    border: 0;
    background: transparent;
    font-size: 17px;
    font-weight: bold;
}

.header-button {
    border: 0 !important;
    height: 35px !important;
    margin: 11px 0 11px 1.437rem !important;
}

.dt-head-center {
    padding: 0 !important;
    text-align: center;
}

.attributes-center {
    padding: 0 !important;
    text-align: center;
}

.attributes-center div {
    min-width: 230px;
    text-align: center;
}


.table-input {
    padding: 10px;
}


.holder-not-found {
    text-align: center;
}

.image-not-found {
    width: 20%;
    margin-top: 10%;
}

.text-not-found {
    color: black;
    text-transform: uppercase;
    padding-top: 6%;
}

.table-button {
    padding: 6px 25px;
    margin: 5px;
}

.page-title-heading {
    font-size: 2.5rem;
    margin-bottom: 15px;
    padding-top: 15px;
}

.custom-submit, .remove-button {
    min-width: 20%;
}

div:has(> table#user-table) {
    overflow: auto;
}

.dataTableClass thead tr th {
    padding: 5px 10px;
}

.btn-google:hover {
    background: #b22222;
    color: #fff;
}

.btn-facebook:hover {
    background: #2b4db1;
    color: #fff;
}

.btn-twitter:hover {
    background: #007bb6;
    color: #fff;
}

.btn-microsoft:hover {
    background: #00618E;
    color: #fff;
}

.btn-facebook {
    background: #305c99;
    color: #fff;
}

.btn-twitter {
    background: #00cdff;
    color: #fff;
}

.btn-google {
    background: #d24228;
    color: #fff;
}

.btn-other {
    background: var(--primary);
    color: #fff;
}

.btn-other:hover {
    background-color: #2962d9;
    color: white;
}

.btn-microsoft {
    background: #007bb6;
    color: #fff;
}

.btn-facebook, .btn-twitter, .btn-google, .btn-other, .btn-microsoft{
    margin-bottom: 19px;
}

.btn-facebook .fab, .btn-twitter .fab, .btn-google .fab, .btn-other .fab, .btn-microsoft .fab, .btn-other .fas {
    width: 30px;
}

.btn-facebook .text, .btn-twitter .text, .btn-google .text, .btn-other .text, .btn-microsoft .text {
    min-width: 75px;
    display: inline-block;
    text-align: left;
}

#external-account, #classic-login {
    display: flex;
    height: 100%;
}

.login-padding{
    margin: 0;
    padding: 0;
}

.custom-margin-top {
    margin-top: 40px !important;
}

.login-row-border{
    border-left: solid 1px lightgrey;
}

.login-row {
    margin: 25px 0 20px;
    padding: 0 40px;
}

@media (max-width: 1024px) {
    .login-row {
        margin-bottom: 20px;
        padding: 0 16px;
    }
    
    .custom-margin-top {
        margin-top: 30px;
    }
}

#login-screen .main-card {
    margin-bottom: 0 !important;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
}

.error-reasoning {
    font-size: 15px;
    padding-top: 10px;
    color: black;
}

.login-error-holder {
    margin: 0;
    color: red;
    padding-bottom: 15px;
    text-align: center;
    font-weight: bold;
}

/*  testing drag drop    */

.drop-zone {
    min-height: 250px;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.drop-item {
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    cursor: pointer;
}

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

.drop-item-container .fa-grip-vertical {
    color: #b0b0b0;
}

.sortable-chosen {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: black !important;
}

.sortable-chosen .fa-grip-vertical {
    color: black !important;
}

.scopes-label {
    font-size: 13px;
    font-weight: bold;
    color: #8b8b8b;
}

.card {
    border-radius: 20px !important;
}

/* -------------------- LOGIN VIEW LAYOUT -------------------- */
.login-screen #left, .login-screen #right {
    margin-bottom: 0;
}

.login-screen {
    display: flex !important;
    flex-direction: row;
    min-height: 100vh !important;
    justify-content: center;
    align-items: center;
    gap: 10vw;
    padding: 24px !important;
}

#left > div {
    max-width: 750px;
}

.logo-image {
    height: 150px;
    margin-bottom: 48px;
}

img.logo-image-small {
    display: flex;
    justify-self: center;
    width: 300px;
    margin-top: 3px;
    margin-bottom: 4vh;
}

.login-text-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
}

.login-text-container > div {
    color: white !important;
}

.login-text-title-container {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
}

.login-text-title {
    font-size: 28px;
    font-weight: 600;
    align-self: center;
}

.icon-check {
    height: 40px;
}

.login-text-description {
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    margin-left: 56px;
}

.background {
    background-image: url('../images/background.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    overflow-y: auto;
}

@media (max-width: 1600px) {
    .login-screen {
        gap: 5vw;
    }

    #left > div {
        max-width: 500px;
        justify-self: center;
    }

    .login-text-title-container {
        gap: 8px;
    }

    .login-text-title {
        font-size: 24px;
    }

    .icon-check {
        height: 28px;
    }

    .login-text-description {
        font-size: 16px;
        line-height: 22px;
        margin-left: 40px;
    }
}

@media (max-width: 1200px) {
    .login-screen {
        flex-direction: column;
        gap: 0;
    }

    .login-text-container {
        display: none;
    }

    .logo-image {
        height: auto;
        width: 60vw;
        max-width: 420px;
        margin-bottom: 32px;
    }
}
/* -------------------- end login view layout -------------------- */

/* -------------------- LOGIN CARD -------------------- */
.custom-card {
    display: flex !important;
    flex-direction: column !important;
    place-content: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 50%
}

.custom-card .card-body {
    flex: none;
}

.custom-card .modal-body {
    flex: none;
}

#login-form {
    margin-top: 0 !important;
}

form#classic-login {
    justify-content: center;
}

.main-card {
    max-width: 100%;
    width: 100%;
    justify-self: center;
    padding: 0;
}

.login-card {
    max-width: 550px;
    width: 100%;
    justify-self: center;
    padding: 0;
}

.main-card.small-card {
    max-width: 450px !important;
}
/* -------------------- end login view layout -------------------- */

/* -------------------- LOGIN FORM CONTROL -------------------- */
.control-label {
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 6px;
}

input.form-control {
    border-radius: 12px !important;
}


.form-control.input-validation-error {
    border: 1px solid var(--red);
    margin-bottom: 4px;
}

.field-validation-error {
    font-size: 14px;
}

/* -------------------- end login form control -------------------- */

/* -------------------- PAGE STYLING -------------------- */
.content-wrapper {
    container-type: inline-size;
    container-name: content-wrapper;
}

.page-title-container-v2 {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
}

.page-title-v2 {
    font-size: 28px;
    line-height: 32px;
    font-weight: 600;
    color: var(--on-background);
}

.page-subtitle-v2 {
    font-size: 18px;
    line-height: 24px;
    color: var(--on-background-muted);
}

.left-container {
    container-type: inline-size;
    container-name: left-container;
}

.user-page-card {
    background: var(--background);
    display: flex;
    justify-content: space-between;
    padding: 40px;
    gap: 24px;
    border: 1px solid var(--border-color);
    border-top-left-radius: 24px;
    height: 100%;
}

.page-card {
    background: var(--background);
    display: flex;
    flex-direction: column;
    padding: 40px;
    gap: 24px;
    border: 1px solid var(--border-color);
    border-top-left-radius: 24px;
    height: 100%;
}

.details-page-content {
    display: flex;
    flex-direction: row;
    gap: 23px;
    justify-content: space-between;
}

.w-1-3 {
    width: 33.3333333%;
    max-width: 400px;
}

.w-2-3 {
    width: 66.6666666%;
    max-width: 66.6666666%;
}

.w-1-2 {
    width: 50%;
}

.second-card-v2 .custom-submit {
    width: fit-content;
}

@media (max-width: 768px) {
    .user-page-card {
        padding: 20px;
    }
    
    #profile-user-modal {
        padding: 0;
    }

    .card-header-v2 {
        flex-direction: column;
    }
}

@container content-wrapper (max-width: 1250px) {
    .user-page-card,
    .details-page-content {
        flex-direction: column;
    }

    .second-card-v2 {
        flex-direction: column;
        gap: 32px;
    }
    
    .second-card-v2 .custom-submit,
    .second-card-item .custom-submit {
        width: 100% !important;
    }
    
    .second-card-item {
        flex-direction: column;
    }

    .second-card-button-container {
        align-self: stretch !important;
    }

    .second-card-button-container button {
        width: 100%;
    }

    .w-1-3, .w-2-3, .w-1-2 {
        width: 100%;
        max-width: 100%;
    }

    .page-title-container-v2 {
        flex-direction: column;
        align-self: start;
        align-items: start;
    }
    
    #actions-dropdown {
        align-self: start;
    }
    
    #actions-dropdown button {
        margin-left: 0 !important;
    }
}

@container content-wrapper (max-width: 768px) {
    .second-card-button-container {
        flex-direction: column !important;
    }
}

.user-info {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

@container left-container (max-width: 500px) {
    .user-info {
        flex-direction: column;
        gap: 8px;
    }
    
    .data-container {
        display: flex;
        flex-direction: column;
    }
}
/* -------------------- end page styling -------------------- */

/* -------------------- USER INFO + OPTIONS STYLING -------------------- */
.user-title {
    color: var(--on-surface);
    font-weight: 600;
    font-size: 24px;
    padding-bottom: 4px;
}

.user-subtitle {
    color: var(--on-surface-muted);
}

.user-actions {
    margin-top: 24px;
    margin-bottom: 12px;
}

.user-action {
    display: flex;
    align-items: center;
    height: 40px;
    padding-left: 12px;
    cursor: pointer;
    border: none;
    border-bottom: 1px solid var(--border-color) !important;
    font-size: 14px;
    width: 100%;
    text-align: left;
    color: var(--on-surface);
    background: transparent;
}

.user-action label {
    margin-bottom: 0 !important;
    cursor: pointer;
    height: 100%;
    width: 100%;
    align-content: center;
}

.user-action i {
    padding-right: 8px;
    color: var(--on-surface-muted);
}

.user-action.red,
.user-action.red i {
    color: var(--red);
}

.user-action:hover {
    color: var(--on-surface);
    background-color: var(--surface-2);
    text-decoration: none !important;
}

.user-action.red:hover {
    color: var(--red);
    background-color: var(--surface-2);
    text-decoration: none !important;
}
/* -------------------- end user info styling -------------------- */

/* -------------------- CARD STYLING -------------------- */

.main-card-v2 {
    background: var(--surface);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 4px;
}

.card-header-v2 {
    padding: 24px 24px 16px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.card-title-v2 {
    font-size: 20px;
    line-height: 22px;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0 0 6px 0;
}

.card-subtitle-v2 {
    font-size: 14px;
    line-height: 16px;
    color: var(--on-surface-muted);
    margin: 0;
}

.card-body-v2 {
    border-radius: 8px;
    background: var(--background);
    padding: 24px;
    border: 1px solid var(--border-color);
}


.second-card-v2 {
    background: var(--surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 32px !important;
    width: 100%;
    height: fit-content;
    display: flex;
    gap: 16px;
}

.second-card-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.second-card-subtitle {
    color: var(--on-surface-muted);
    line-height: 22px !important;
    max-width: 80%;
    font-size: 15px;
}

.second-card-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.second-card-input-container {
    border: 1px solid var(--border-color-2);
    background-color: var(--background);
    border-radius: 16px;
    padding: 20px 24px;
}

.second-card-item-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.second-card-button-container {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-self: end;
}

.second-card-item {
    border: 1px solid var(--border-color-2);
    background: var(--background);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.external-remove-warning {
    color: var(--red);
    padding-top: 16px;
    padding-left: 24px;
}

.item-name {
    color: var(--on-surface-muted);
}

.item-title {
    padding-bottom: 4px;
    line-height: 20px;
}

/* -------------------- end card styling -------------------- */

/* -------------------- FORM STYLING -------------------- */
.form-group-v2 {
    margin-bottom: 24px;
}

.form-group-v2:last-child {
    margin-bottom: 0;
}

.form-group-v2 label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--on-surface);
    margin-bottom: 8px;
}

select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding: 10px 36px 10px 12px;
    line-height: 1.5;
    border-radius: 6px;
}

.table-input select.form-control {
    min-width: 170px;
    height: 30px;
}

select.form-control option {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.8;
    min-height: 44px;
}

input.form-control,
input.form-control:focus,
select.form-control,
select.form-control:focus {
    background-color: var(--background);
    border-color: var(--border-color-2);
    color: var(--on-background);
}

select.form-control,
select.form-control:focus {
    outline-color: var(--border-color-2);
}

select.custom-select,
select.custom-select:focus {
    background-color: var(--surface);
    border-color: var(--border-color);
    outline-color: var(--border-color) !important;
    color: var(--on-surface);
}

input.form-control.disabled,
input.form-control:disabled,
input.form-control[disabled] {
    background-color: var(--background);
    opacity: .65;
    cursor: not-allowed;
}

select.form-control:disabled,
select.form-control[disabled],
select.form-control.disabled {
    opacity: .65;
    cursor: not-allowed;
    background-color: var(--surface-2);
    color: var(--on-surface-muted);
}

[data-theme="dark"] select.form-control:disabled,
[data-theme="dark"] select.form-control[disabled],
[data-theme="dark"] select.form-control.disabled,
[data-theme="dark"] input.form-control:disabled,
[data-theme="dark"] input.form-control[disabled],
[data-theme="dark"] input.form-control.disabled {
    background-color: var(--surface-2);
    color: var(--on-surface-muted);
    border-color: var(--border-color-2);
}

.image-container {
    margin: 16px 16px 32px;
}

.profile-image-container {
    width: 200px;
    height: 200px;
    text-align: center;
    object-fit: cover;
}

@media (max-width: 1800px) {
    .profile-image-container {
        width: 120px;
        height: 120px;
    }
}
/* -------------------- end form styling -------------------- */

/* -------------------- DATA TABLES -------------------- */

/* ============================================================
   Search bar — pixel-perfect match of Angular FE

   Angular HTML:
     <div class="filters-container-v2 flex justify-between gap-2">
       <div class="filters-search-container">
         <input class="filters-search-input" placeholder="Poišči ...">
       </div>
     </div>

   Identity UI DOM after JS:
     <div class="dataTables-toolbar-v2">          ← = filters-container-v2
       <div class="col-md-6">
         <div class="dataTables_filter">
           <label>
             <div class="dt-search-container">   ← = filters-search-container
               <input class="dt-search-input">   ← = filters-search-input
             </div>
           </label>
         </div>
       </div>
       ...
     </div>
   ============================================================ */

/* --- filters-search-container ---
   Tailwind: flex items-center flex-1 md:max-w-lg min-w-[220px]
             border border-surface-border rounded-md bg-surface
             focus-within:border-brand-primary
             focus-within:shadow-[0_0_0_2px_var(--color-primary-dim)]
   surface.DEFAULT = var(--color-bg)   (bg-surface)
   surface.border  = var(--color-border)
   brand.primary   = var(--color-primary)
   color-primary-dim = rgba(63,124,248,0.15) light / rgba(63,124,248,0.15) dark */

.dataTables_filter label {
    display: block;
    margin-bottom: 0;
    font-weight: normal;
}

.dt-search-container {
    display: flex;
    align-items: center;
    flex: 1 1 0%;
    max-width: 32rem;
    min-width: 220px;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: var(--background);   /* bg-surface → Angular --color-bg = #ffffff light / #0d0f18 dark */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dt-search-container:focus-within {
    border-color: var(--primary);                        /* focus-within:border-brand-primary */
    box-shadow: 0 0 0 2px rgba(63, 124, 248, 0.1);      /* light: --color-primary-dim = rgba(63,124,248,0.1) */
}

[data-theme="dark"] .dt-search-container:focus-within {
    box-shadow: 0 0 0 2px rgba(63, 124, 248, 0.15);     /* dark: --color-primary-dim = rgba(63,124,248,0.15) */
}

/* --- filters-search-input ---
   Tailwind: flex-1 bg-transparent border-0 outline-none min-w-0
             px-3 h-10 text-sm text-text-primary placeholder:text-text-muted */
.dt-search-input {
    height: 2.5rem;
    min-width: 0px;
    flex: 1 1 0%;
    border-width: 0px;
    background-color: transparent;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--on-background);
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
}

.dt-search-input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: none;
    border: none;
}

.dt-search-input::placeholder {
    color: var(--on-surface-muted); /* placeholder:text-text-muted → var(--color-text-muted) */
    opacity: 1;
}

.dt-search-input::-webkit-search-cancel-button,
.dt-search-input::-webkit-search-decoration {
    display: none;
    -webkit-appearance: none;
}

/* --- filters-clear-button ---
   Tailwind: flex items-center justify-center px-2 text-text-secondary
             hover:text-text-primary default-transition flex-shrink-0
             padding-top: 0 */
.dt-search-clear-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;               /* px-2, padding-top: 0 */
    flex-shrink: 0;
    color: var(--on-surface-muted);  /* text-text-secondary */
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
}
.dt-search-clear-button:hover {
    color: var(--on-background);     /* hover:text-text-primary */
}
.dt-search-clear-button .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

/* Inside the v2 shell the shell itself provides the border — remove the table's own border */
.dataTables-list-table-v2 .dataTable {
    border: 0 !important;
    border-radius: 0 !important;
}

.dataTables_length > label {
    display: flex;
    align-items: center;
    font-size: 14px;
    justify-content: end;
    margin-bottom: 0 !important;
}

.dataTables_filter > label {
    width: 100% !important;
}

.dataTable tr th:first-child {
    border-top-left-radius: 12px;
}

.dataTable tr th:last-child {
    border-top-right-radius: 12px;
}

.dataTableClass thead th {
    /* Angular .header-cell-v2: uppercase, 12px, bg-gray-500/10, color-text */
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #5c6280;
    background-color: rgba(107, 114, 128, 0.1);
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 1.25rem;
}

table.dataTableClass tbody tr:hover td {
    background: var(--table-row-hover) !important;
    transition: all 0.3s ease;
}

/* -------------------- Table action icon buttons -------------------- */
/* Base state: visible border, muted color — matches Angular icon-button default in rows */
.table-icon-button,
.table-icon-button-v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--on-surface-muted);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    vertical-align: middle;
}

.table-icon-button .material-symbols-outlined,
.table-icon-button-v2 .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

/* On row hover: show the icon border and color — matches Angular card-row-v2:hover .icon-button */
table.dataTableClass tbody tr:hover .table-icon-button.primary,
table.dataTableClass tbody tr:hover .table-icon-button-v2.primary {
    color: var(--primary) !important;
    border-color: rgba(63, 124, 248, 0.4) !important;
}

table.dataTableClass tbody tr:hover .table-icon-button.orange,
table.dataTableClass tbody tr:hover .table-icon-button-v2.orange {
    color: #e09000 !important;
    border-color: rgba(224, 144, 0, 0.4) !important;
}

table.dataTableClass tbody tr:hover .table-icon-button.red,
table.dataTableClass tbody tr:hover .table-icon-button-v2.red,
table.dataTableClass tbody tr:hover .table-icon-button.danger,
table.dataTableClass tbody tr:hover .table-icon-button-v2.danger {
    color: var(--red) !important;
    border-color: rgba(214, 58, 6, 0.4) !important;
}

/* Direct hover on the button itself: add background fill */
table.dataTableClass tbody tr:hover .table-icon-button.primary:hover,
table.dataTableClass tbody tr:hover .table-icon-button-v2.primary:hover {
    background-color: rgba(63, 124, 248, 0.12) !important;
}

table.dataTableClass tbody tr:hover .table-icon-button.orange:hover,
table.dataTableClass tbody tr:hover .table-icon-button-v2.orange:hover {
    background-color: rgba(224, 144, 0, 0.12) !important;
}

table.dataTableClass tbody tr:hover .table-icon-button.red:hover,
table.dataTableClass tbody tr:hover .table-icon-button-v2.red:hover,
table.dataTableClass tbody tr:hover .table-icon-button.danger:hover,
table.dataTableClass tbody tr:hover .table-icon-button-v2.danger:hover {
    background-color: rgba(214, 58, 6, 0.12) !important;
}
/* -------------------- end table action icon buttons -------------------- */

.dataTable tr th:first-child {
    border-top-left-radius: 12px;
}

.dataTable tr th:last-child {
    border-top-right-radius: 12px;
}

.dataTableClass thead {
    border-bottom: 1px solid var(--border-color);
}

.dataTables_filter {
    width: 100%;
    margin-bottom: 0;
}

.dataTables_processing.card {
    padding: 12px !important;
    margin-bottom: 12px !important;
    box-shadow: 4px 2px 4px -1px #282f3a25;
}

.paginate_button.page-item .page-link {
    color: var(--on-background);
}

.paginate_button.page-item.active .page-link {
    color: var(--on-primary);
    background-color: var(--primary)
}

@media (max-width: 767px) {
    div.col-md-6:has(> div.dataTables_length) {
        justify-items: left;
        margin-bottom: 16px;
        padding-right: 0;
    }

    .dataTables_paginate {
        justify-items: left;
        margin-bottom: 16px;
    }

    .dataTables_filter {
        width: 100%;
    }
}

/* -------------------- MISC -------------------- */
.rounded-md {
    border-radius: 12px !important;
}

.transition-all {
    transition-property: all !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 300ms !important;
}

.gap-2 {
    gap: 8px;
}

.px-3 {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.py-8 {
    padding-top: 32px;
    padding-bottom: 32px;
}

.line-height-18 {
    line-height: 18px;
}

.w-fit {
    width: fit-content;
}

.buttons-fit {
    width: fit-content;
}

@media (max-width: 768px) {
    .buttons-fit {
        width: 100%;
    
    };
}

.option-desc {
    line-height: 19px;
    font-size: 15px;
}

.max-w-350 {
    max-width: 350px;
}

.min-w-290 {
    min-width: 290px;

}

.btn-gray {
    color: var(--on-surface-muted) !important;
    background-color: var(--background) !important;
    border-color: var(--border-color) !important;
}

.dataTables_processing.card {
    background-color: var(--surface);
    color: var(--on-surface);
    border-color: var(--border-color);
}

button.close {
    color: var(--on-surface)
}

button.close:hover {
    color: var(--on-surface-muted)
}

.modal-content .modal-body {
    padding: 1rem 1rem 0;
}

.select2.select2-container .selection .select2-selection,
.select2-container .select2-dropdown .select2-search{
    background-color: var(--background);
    color: var(--on-background);
    border-color: var(--border-color-2);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--on-background);
}

.select2-container .select2-dropdown {
    background-color: var(--surface);
    border-color: var(--border-color-2);
}

.select2-container .select2-dropdown input.select2-search__field,
.select2-container .select2-results,
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--surface-2);
    color: var(--on-surface);
    border-color: var(--border-color-2) !important;
}

.select2-container--default .select2-results__option {
    color: var(--on-background);
}

.select2-container--default .select2-results__option:hover,
.select2-container--default .select2-results__option[aria-selected=true]:hover {
    background-color: var(--primary);
    color: var(--on-primary);
}

select.form-control option {
    background-color: var(--background);
    color: var(--on-background);
}

/* -------------------- Bootstrap dropdown dark theme -------------------- */
.dropdown-menu {
    background-color: var(--surface);
    border-color: var(--border-color);
    box-shadow: var(--box-shadow);
}

.dropdown-item {
    color: var(--on-background);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--surface-hover);
    color: var(--on-background);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary);
    color: var(--on-primary) !important;
}

.dropdown-divider {
    border-color: var(--border-color);
}
/* -------------------- end Bootstrap dropdown dark theme -------------------- */

/* -------------------- Profile dropdown -------------------- */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link {
    gap: 8px;
    min-height: 44px;
    padding: 6px 10px !important;
    border-radius: 12px;
    color: var(--on-background) !important;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link:hover,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile.show .nav-link {
    background: var(--surface-hover) !important;
    color: var(--on-background) !important;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .profile-image-sm {
    width: 34px;
    height: 34px;
    border: 2px solid var(--background);
    box-shadow: 0 2px 8px rgba(63, 75, 120, 0.16);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .user-name {
    color: var(--on-background) !important;
    font-size: 14px;
    font-weight: 500;
    padding: 0;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .profile-dropdown-icon {
    color: var(--on-background-muted);
    font-size: 20px;
    line-height: 1;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .navbar-dropdown {
    min-width: 220px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px;
    background: var(--background) !important;
    box-shadow: 0 8px 32px rgba(63, 75, 120, 0.14) !important;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .navbar-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 10px !important;
    border-radius: 8px;
    color: var(--on-background) !important;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .navbar-dropdown .dropdown-item .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    color: var(--on-background-muted) !important;
    font-size: 20px;
    line-height: 1;
    margin: 0 !important;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .navbar-dropdown .dropdown-item .i-mar {
    margin-left: 0;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .navbar-dropdown .dropdown-item:hover,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .navbar-dropdown .dropdown-item:focus {
    background: var(--surface-hover) !important;
    color: var(--on-background) !important;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .navbar-dropdown .dropdown-item:hover .material-symbols-outlined,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .navbar-dropdown .dropdown-item:focus .material-symbols-outlined {
    color: var(--on-background) !important;
}

[data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .profile-image-sm {
    border-color: var(--surface);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .navbar-dropdown {
    background: var(--surface) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42) !important;
}
/* -------------------- end Profile dropdown -------------------- */

/* -------------------- end misc -------------------- */

/* -------------------- BOOTSTRAP BUTTON OVERRIDES -------------------- */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #2962d9 !important;
    border-color: #2962d9 !important;
    color: #fff !important;
}

.btn-success {
    background-color: #28bb76 !important;
    border-color: #28bb76 !important;
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: #1e9a60 !important;
    border-color: #1e9a60 !important;
}

.btn-warning {
    background-color: #e09000 !important;
    border-color: #e09000 !important;
    color: #fff !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active {
    background-color: #b87200 !important;
    border-color: #b87200 !important;
}

.btn-danger {
    background-color: var(--red) !important;
    border-color: var(--red) !important;
    color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active {
    background-color: #c43a1a !important;
    border-color: #c43a1a !important;
}

.badge-primary { background-color: var(--primary) !important; }
.badge-success { background-color: #28bb76 !important; }
.badge-warning { background-color: #e09000 !important; color: #fff !important; }
.badge-danger  { background-color: var(--red) !important; }

.text-primary { color: var(--primary) !important; }
.text-success { color: #28bb76 !important; }
.text-warning { color: #e09000 !important; }
.text-danger  { color: var(--red) !important; }

.bg-primary { background-color: var(--primary) !important; }
.bg-success { background-color: #28bb76 !important; }
.bg-warning { background-color: #e09000 !important; }
.bg-danger  { background-color: var(--red) !important; }

.alert-primary {
    background-color: rgba(63, 124, 248, 0.1);
    border-color: rgba(63, 124, 248, 0.3);
    color: var(--primary);
}

.alert-success {
    background-color: rgba(40, 187, 118, 0.1);
    border-color: rgba(40, 187, 118, 0.3);
    color: #1e9a60;
}

.alert-warning {
    background-color: rgba(224, 144, 0, 0.1);
    border-color: rgba(224, 144, 0, 0.3);
    color: #b87200;
}

.alert-danger {
    background-color: rgba(214, 58, 6, 0.1);
    border-color: rgba(214, 58, 6, 0.3);
    color: var(--red);
}

.page-link {
    color: var(--primary);
}

.page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}
/* -------------------- end bootstrap button overrides -------------------- */

/* -------------------- Angular-style DataTables shell -------------------- */
/* .dataTables-toolbar-v2 = Angular .filters-container-v2
   Exact values from Angular styles.scss:
     light: border rgba(221,225,239,0.1) | bg rgba(247,248,252,0.05) | shadow 0 2px 12px rgba(63,75,120,0.1)
     dark:  border rgba(42,49,72,0.1)    | bg rgba(28,35,55,0.05)    | shadow 0 2px 16px rgba(0,0,0,0.45) */
.dataTables_wrapper .dataTables-toolbar-v2 {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    margin: 0 0 1.25rem 0 !important;   /* override Bootstrap .row margin-left/right: -15px */
    border: 1px solid var(--border-color) !important;
    border-radius: 0.5rem !important;
    background-color: var(--surface) !important;
    box-shadow: var(--box-shadow) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables-toolbar-v2 {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45) !important;
}

.dataTables_wrapper .dataTables-toolbar-v2 > :empty {
    display: none !important;
}

/* Collapse Bootstrap col-* padding, let flex drive layout */
.dataTables_wrapper .dataTables-toolbar-v2 > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
}

.dataTables_wrapper .dataTables-toolbar-v2 > [class*="col-"]:first-child {
    flex: 1 1 0% !important;
}

.dataTables_wrapper .dataTables-list-table-v2 {
    border: 1px solid var(--border-color) !important;
    border-radius: 12px;
    background: var(--background) !important;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.dataTables-list-table-v2 .table-scroll-wrapper {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--background) !important;
    overflow-x: auto;
}

.dataTables-list-table-v2 table.dataTableClass {
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.dataTables-list-table-v2 table.dataTable.no-footer {
    border-bottom: 0 !important;
}

.dataTables-list-table-v2 .dataTableClass thead,
.dataTables-list-table-v2 .dataTableClass thead tr,
.dataTables-list-table-v2 .dataTableClass thead tr th {
    background: var(--surface) !important;
}

.dataTables-list-table-v2 .dataTableClass thead {
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: 0 5px 6px -3px rgb(0 0 0 / 10%) !important;
    color: var(--on-background);
    position: relative;
    z-index: 2;
}

.dataTables-list-table-v2 .dataTableClass thead tr th {
    border-bottom: 1px solid var(--border-color) !important;
    color: #5c6280 !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
}

.dataTables-list-table-v2 table.dataTableClass > tbody > tr > td {
    background: var(--background) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--on-background-muted);
}

.dataTables-list-table-v2 table.dataTableClass tbody tr:hover td {
    background: var(--table-row-hover) !important;
    transition: background-color 0.3s;
}

.dataTables-list-table-v2 > .dataTables-footer-v2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--border-color) !important;
    border-radius: 0 0 12px 12px;
    background: var(--surface) !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    min-height: 55px;
    padding: 12px 40px;
    gap: 24px;
}

.dataTables-footer-v2 .dt-footer-left,
.dataTables-footer-v2 .dt-footer-right {
    display: flex;
    align-items: center;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    padding: 0;
}

.dataTables-footer-v2 .dt-footer-left {
    gap: 8px;
}

.dataTables-footer-v2 .dt-footer-right {
    gap: 16px;
    margin-left: auto;
}

.dataTables-footer-v2 .dataTables_length,
.dataTables-footer-v2 .dataTables_info,
.dataTables-footer-v2 .dataTables_paginate {
    margin: 0;
    padding: 0 !important;
}

.dataTables-footer-v2 .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-height: 48px;
    color: var(--on-background-muted);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
}

.dataTables-footer-v2 .dt-footer-length-label {
    min-width: 110px;
    padding-right: 8px;
}

.dataTables-footer-v2 .dataTables_length select {
    height: 32px;
    min-width: 80px;
    max-width: 120px;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px;
    background-color: var(--surface) !important;
    color: var(--on-background) !important;
    cursor: pointer;
    padding: 0 28px 0 12px;
    pointer-events: auto;
}

.dataTables-footer-v2 .dt-page-size-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.dataTables-footer-v2 .dt-page-size-select {
    position: relative;
    min-width: 80px;
    max-width: 120px;
}

.dataTables-footer-v2 .dt-page-size-trigger {
    width: 100%;
    height: 32px;
    min-width: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface);
    color: var(--on-background);
    padding: 0 6px 0 12px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.dataTables-footer-v2 .dt-page-size-trigger:hover,
.dataTables-footer-v2 .dt-page-size-select.is-open .dt-page-size-trigger {
    border-color: var(--on-background-muted);
    box-shadow: 0 0 0 2px rgba(63, 124, 248, 0.1);
}

.dataTables-footer-v2 .dt-page-size-value {
    min-width: 22px;
    text-align: left;
}

.dataTables-footer-v2 .dt-page-size-arrow {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: var(--on-background-muted);
    transition: transform 0.2s;
}

.dataTables-footer-v2 .dt-page-size-select.is-open .dt-page-size-arrow {
    transform: rotate(180deg);
}

.dataTables-footer-v2 .dt-page-size-options {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 1000;
    display: none;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: var(--box-shadow);
}

.dataTables-footer-v2 .dt-page-size-select.is-open .dt-page-size-options {
    display: block;
}

.dataTables-footer-v2 .dt-page-size-option {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--on-background);
    cursor: pointer;
    font-size: 14px;
    padding: 0 8px;
    transition: background-color 0.2s, color 0.2s;
}

.dataTables-footer-v2 .dt-page-size-option:hover,
.dataTables-footer-v2 .dt-page-size-option.is-selected {
    background: var(--surface-hover);
    color: var(--on-background);
}

.dataTables-footer-v2 .dataTables_info {
    color: var(--on-background-muted);
    font-size: 14px;
    letter-spacing: 0;
    white-space: nowrap;
}

.dataTables-footer-v2 .dataTables_paginate .pagination {
    display: flex;
    align-items: center;
    margin: 0;
}

.dataTables-footer-v2 .paginate_button:not(.previous):not(.next) {
    display: none;
}

.dataTables-footer-v2 .paginate_button.previous,
.dataTables-footer-v2 .paginate_button.next {
    margin: 0;
}

.dataTables-footer-v2 .paginate_button.previous .page-link,
.dataTables-footer-v2 .paginate_button.next .page-link,
.dataTables-footer-v2 .paginate_button.previous,
.dataTables-footer-v2 .paginate_button.next {
    width: 48px;
    height: 48px;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--on-background-muted) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    font-size: 0;
    transition: background-color 0.3s, color 0.3s;
}

.dataTables-footer-v2 .paginate_button.previous .page-link::before,
.dataTables-footer-v2 .paginate_button.next .page-link::before,
.dataTables-footer-v2 .paginate_button.previous:not(.page-item)::before,
.dataTables-footer-v2 .paginate_button.next:not(.page-item)::before {
    font-family: 'Material Symbols Outlined';
    font-size: 24px;
    line-height: 1;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
}

.dataTables-footer-v2 .paginate_button.previous .page-link::before,
.dataTables-footer-v2 .paginate_button.previous:not(.page-item)::before {
    content: 'chevron_left';
}

.dataTables-footer-v2 .paginate_button.next .page-link::before,
.dataTables-footer-v2 .paginate_button.next:not(.page-item)::before {
    content: 'chevron_right';
}

.dataTables-footer-v2 .paginate_button.previous:not(.disabled):hover .page-link,
.dataTables-footer-v2 .paginate_button.next:not(.disabled):hover .page-link,
.dataTables-footer-v2 .paginate_button.previous:not(.disabled):hover,
.dataTables-footer-v2 .paginate_button.next:not(.disabled):hover {
    background: var(--surface-hover) !important;
    color: var(--on-background) !important;
}

.dataTables-footer-v2 .paginate_button.disabled .page-link,
.dataTables-footer-v2 .paginate_button.disabled {
    color: var(--on-surface-muted) !important;
    opacity: 0.3;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .dataTables-list-table-v2 > .dataTables-footer-v2 {
        padding: 12px;
        border-radius: 0 0 12px 12px;
    }
}

@media (max-width: 767px) {
    .dataTables-list-table-v2 > .dataTables-footer-v2 {
        align-items: flex-start;
        flex-direction: column;
    }

    .dataTables-footer-v2 .dt-footer-left,
    .dataTables-footer-v2 .dt-footer-right {
        width: 100%;
        justify-content: space-between;
    }

    .dataTables-footer-v2 .dt-footer-right {
        margin-left: 0;
    }
}
/* -------------------- end Angular-style DataTables shell -------------------- */

/* -------------------- Angular-style sidebar hover -------------------- */
.sidebar .nav:not(.sub-menu) {
    margin-top: 2.25rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

.sidebar .nav:not(.sub-menu) > .nav-item {
    margin-top: 4px !important;
    border: 0 !important;
    border-radius: 8px;
    background: transparent !important;
    padding: 2px 0;
}

.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
    min-height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 !important;
    padding: 6px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--on-surface) !important;
    opacity: 0.8;
    transition: background-color 0.3s, color 0.3s, opacity 0.3s;
}

.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .sidebar-icon-container,
.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link i.menu-icon {
    width: 44px;
    min-width: 44px;
    margin-right: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit !important;
    font-size: 16px;
}

.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .menu-title {
    color: inherit !important;
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.2;
    min-width: 0;
    overflow: visible;
    white-space: normal;
    word-break: normal;
}

.sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link,
.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link:hover,
.sidebar .nav:not(.sub-menu) > .nav-item.hover-open > .nav-link {
    background: var(--surface-hover) !important;
    color: var(--on-background) !important;
    opacity: 1;
}

.sidebar .nav:not(.sub-menu) > .nav-item.active {
    border: 0 !important;
    background: transparent !important;
}

.sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link {
    background: rgba(63, 124, 248, 0.12) !important;
    color: var(--on-background) !important;
    opacity: 1;
}

.sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link .sidebar-icon-container,
.sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link i.menu-icon {
    color: var(--primary) !important;
}

.sidebar .nav:not(.sub-menu) > .nav-item.active:hover > .nav-link,
.sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link:hover {
    background: rgba(63, 124, 248, 0.16) !important;
}

.sidebar-expand-btn {
    opacity: 0.8;
    padding: 6px 12px !important;
    transition: background-color 0.3s, color 0.3s, opacity 0.3s;
}

.sidebar-expand-btn:hover {
    background: var(--surface-hover) !important;
    color: var(--on-background) !important;
    opacity: 1;
}

.sidebar-icon-only .sidebar {
    padding: 0 8px;
}

.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
    justify-content: center;
    padding: 6px 0 !important;
}

.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .sidebar-icon-container,
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link i.menu-icon {
    width: 44px;
    min-width: 44px;
}

.sidebar-icon-only .sidebar-expand-btn {
    padding: 6px 0 !important;
}
/* -------------------- end Angular-style sidebar hover -------------------- */

/* -------------------- Angular-style global typography -------------------- */
html,
body,
button,
input,
optgroup,
select,
textarea,
.sidebar,
.navbar,
.footer,
.card,
.modal,
.btn,
.form-control,
.dropdown-menu,
.dropdown-item,
.page-link,
.dataTables_wrapper,
.select2-container,
.select2-dropdown,
.select2-results,
.tooltip,
.popover,
h1,
h2,
h3,
h4,
h5,
h6,
p,
label,
a,
td,
th,
span:not(.material-symbols-outlined) {
    font-family: var(--app-font-family) !important;
}
/* -------------------- end Angular-style global typography -------------------- */

/* -------------------- Angular-style modal windows -------------------- */
.modal-backdrop.show {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modal .modal-dialog {
    border-radius: 24px;
}

.modal .modal-dialog:not(.modal-lg):not(.modal-xl) {
    width: calc(100% - 32px);
    max-width: 600px;
}

.modal .modal-dialog.modal-lg {
    width: calc(100% - 32px);
    max-width: 900px;
}

.modal .modal-content {
    overflow: hidden;
    border-radius: 24px !important;
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    color: #1a1e2e !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    font-family: var(--app-font-family, 'Poppins', sans-serif) !important;
    font-size: 14px !important;
}

[data-theme="dark"] .modal .modal-content {
    background: var(--surface) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
    color: var(--on-background) !important;
}

.modal .modal-content *:not(.material-symbols-outlined) {
    font-family: var(--app-font-family, 'Poppins', sans-serif) !important;
}

.modal .modal-header {
    align-items: center;
    gap: 16px;
    padding: 32px 32px 24px !important;
    border-bottom: 0 !important;
    background: transparent !important;
}

.modal .modal-content:has(.modal-footer) .modal-header button.close,
.modal .modal-content:has(.modal-footer) .modal-header .custom-close {
    display: none !important;
}

.modal .modal-title,
.modal .modal-header .modal-title,
.modal .modal-header h5 {
    margin: 0;
    color: #1a1e2e !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: uppercase;
}

.modal .modal-body,
.modal .modal-content .modal-body {
    padding: 20px 32px !important;
    color: #1a1e2e !important;
    background: transparent !important;
    font-size: 14px !important;
    line-height: 1.5;
}

.modal .modal-content > .modal-header ~ .modal-body,
.modal .modal-content > .modal-header ~ * .modal-body {
    padding-top: 0 !important;
}

.modal .modal-body *:not(.material-symbols-outlined) {
    font-size: inherit;
}

.modal .modal-content:not(:has(.modal-footer)) .modal-body {
    padding-bottom: 20px !important;
}

.modal .modal-footer,
.modal .custom-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin: 0 !important;
    padding: 8px 32px 32px !important;
    border-top: 0 !important;
    background: transparent !important;
}

.modal .form-group {
    margin-bottom: 18px;
}

.modal .control-label,
.modal label {
    display: block;
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 16px;
}

.modal .form-control,
.modal select.form-control,
.modal textarea.form-control,
.modal .select2.select2-container .selection .select2-selection {
    height: 48px !important;
    min-height: 48px;
    padding: 0 12px !important;
    border: 1px solid #dde1ef !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #1a1e2e !important;
    box-shadow: none !important;
    font-family: var(--app-font-family, 'Poppins', sans-serif) !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.modal textarea.form-control {
    height: auto !important;
    min-height: 96px;
    padding: 12px !important;
    resize: vertical;
}

.modal .select2.select2-container .selection .select2-selection {
    display: flex;
    align-items: center;
}

.modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0 !important;
    padding-right: 28px !important;
    color: #1a1e2e !important;
    font-size: 14px !important;
    line-height: 46px !important;
}

.modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
}

.modal .form-control:focus,
.modal select.form-control:focus,
.modal textarea.form-control:focus,
.modal .select2-container--focus .select2-selection {
    border-color: #3f7cf8 !important;
    box-shadow: 0 0 0 3px rgba(63, 124, 248, 0.14) !important;
}

.modal .modal-footer .button,
.modal .custom-modal-footer .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    transition-duration: 300ms;
    transition-property: background-color, border-color, color, opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.modal .modal-footer .button.primary,
.modal .custom-modal-footer .button.primary {
    border: 1px solid #3f7cf8 !important;
    background: #3f7cf8 !important;
    color: #ffffff !important;
}

.modal .modal-footer .button.primary:hover,
.modal .custom-modal-footer .button.primary:hover {
    background: #6694ff !important;
    border-color: #6694ff !important;
    color: #ffffff !important;
}

.modal .modal-footer .button.gray,
.modal .custom-modal-footer .button.gray {
    border: 1px solid #dde1ef !important;
    background: rgba(247, 248, 252, 0.6) !important;
    color: #1a1e2e !important;
}

.modal .modal-footer .button.gray:hover,
.modal .custom-modal-footer .button.gray:hover {
    background: #e8ebf3 !important;
    color: #1a1e2e !important;
}

.modal button.close,
.modal .custom-close {
    position: static;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #5c6280 !important;
    font-size: 0 !important;
    line-height: 1;
    opacity: 1 !important;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.modal button.close span,
.modal .custom-close span {
    display: none;
}

.modal button.close::before,
.modal .custom-close::before {
    content: "close";
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.modal button.close:hover,
.modal button.close:focus,
.modal .custom-close:hover,
.modal .custom-close:focus {
    border-color: #dde1ef !important;
    background: #e8ebf3 !important;
    color: #1a1e2e !important;
    outline: none;
}

/* ---- dark theme overrides for modals ---- */
[data-theme="dark"] .modal .modal-title,
[data-theme="dark"] .modal .modal-header .modal-title,
[data-theme="dark"] .modal .modal-header h5 {
    color: var(--on-background) !important;
}

[data-theme="dark"] .modal .modal-body,
[data-theme="dark"] .modal .modal-content .modal-body {
    color: var(--on-background) !important;
}

[data-theme="dark"] .modal .control-label,
[data-theme="dark"] .modal label {
    color: var(--on-surface-muted) !important;
}

[data-theme="dark"] .modal .form-control,
[data-theme="dark"] .modal select.form-control,
[data-theme="dark"] .modal textarea.form-control,
[data-theme="dark"] .modal .select2.select2-container .selection .select2-selection {
    border-color: var(--border-color-2) !important;
    background: var(--background) !important;
    color: var(--on-background) !important;
}

[data-theme="dark"] .modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--on-background) !important;
}

[data-theme="dark"] .modal .modal-footer .button.gray,
[data-theme="dark"] .modal .custom-modal-footer .button.gray {
    border-color: var(--border-color) !important;
    background: var(--surface-2) !important;
    color: var(--on-background) !important;
}

[data-theme="dark"] .modal .modal-footer .button.gray:hover,
[data-theme="dark"] .modal .custom-modal-footer .button.gray:hover {
    background: var(--surface-hover) !important;
    color: var(--on-background) !important;
}

[data-theme="dark"] .modal button.close,
[data-theme="dark"] .modal .custom-close {
    color: var(--on-surface-muted) !important;
}

[data-theme="dark"] .modal button.close:hover,
[data-theme="dark"] .modal button.close:focus,
[data-theme="dark"] .modal .custom-close:hover,
[data-theme="dark"] .modal .custom-close:focus {
    border-color: var(--border-color) !important;
    background: var(--surface-2) !important;
    color: var(--on-background) !important;
}

[data-theme="dark"] .modal .form-control:disabled,
[data-theme="dark"] .modal select.form-control:disabled,
[data-theme="dark"] .modal .form-control[disabled],
[data-theme="dark"] .modal select.form-control[disabled],
[data-theme="dark"] .modal .form-control.disabled,
[data-theme="dark"] .modal select.form-control.disabled {
    background: var(--surface-2) !important;
    color: var(--on-surface-muted) !important;
    border-color: var(--border-color-2) !important;
    cursor: not-allowed;
    opacity: 0.65;
}
/* -------------------- end Angular-style modal windows -------------------- */