:root {
    /* Brand Colors */
    --color-primary: #9f01f1;
    --color-primary-light: #b224fb;
    --color-primary-lighter: #c882ec;
    --color-primary-lightest: #e8ccfa;
    --color-primary-hover: rgba(159, 1, 241, 0.3);
    /* Abacus App Colors */
    --color-abacus: #9f01f1;
    /* Hermes App Colors */
    --color-hermes: #ff0000;
    /* Hourglass App Colors */
    --color-hourglass: #7fd101;
    /* Semantic Colors */
    --color-success: #43a76f;
    --color-success-alt: #43e97b;
    --color-success-light: #83deab;
    --color-warning: #c76932;
    --color-warning-light: #dda584;
    --color-danger: #cc4744;
    --color-danger-alt: #dc3545;
    --color-danger-light: #e0918f;
    --color-info: #268bd2;
    /* Dark Theme Colors */
    --bg-darkest: #1d1e21;
    --bg-darker: #1f2126;
    --bg-dark: #202125;
    --bg-medium: #23242b;
    --bg-card: #2c2d33;
    --bg-element: #2f3036;
    --bg-element-alt: #2f3138;
    --bg-hover: #37383d;
    --bg-hover-alt: #43464e;
    --bg-row-hover: #2f3035;
    --bg-global: #1f2126;
    /* Border Colors */
    --border-subtle: #383940;
    --border-medium: #3a3b42;
    --border-light: #494c55;
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #e5e5e5;
    --text-muted: #8a8b8c;
    --text-disabled: #cccccc;
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    /* Border Radius */
    --radius-sm: 0.15rem;
    --radius-md: 0.25rem;
    --radius-lg: 0.375rem;
    --radius-card: 5px;
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    /* Z-Index Layers */
    --z-base: 1;
    --z-dropdown: 997;
    --z-sticky: 999;
    --z-header: 1000;
    --z-overlay-dropdown: 1020;
    --z-overlay-sidebar: 1038;
    --z-overlay-main: 1040;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-overlay-datatable: 1001;
    --z-overlay-modal-datatable: 1069;
    --z-overlay-axios: 9999;
    --z-toast: 99999;
    /* Shadows */
    --shadow-sm: 2px 2px 5px rgba(0, 0, 0, 0.5);
    --shadow-md: 5px 5px 6px -1px rgba(0, 0, 0, 0.75);
    --shadow-lg: 8px 8px 9px -4px rgba(0, 0, 0, 0.9);
    --shadow-card: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    --shadow-inset: 0 6px 16px rgba(0, 0, 0, 0.35);
}

@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css');


/* #region Hidden Elements */

#navbar-search {
    visibility: hidden;
    pointer-events: none;
}

/* #endregion /Hidden Elements */

/* #region Base / Defaults */

/* #region Body & Background */

body {
    background: radial-gradient(circle at top left, white 0, transparent 45%), radial-gradient(circle at bottom right, #4a00b5 0, transparent 50%), linear-gradient(135deg, var(--color-primary) 0%, #000 60%);
    position: relative;
}

    body::before {
        content: "";
        position: fixed;
        inset: -40%;
        background: conic-gradient( from 180deg, rgba(159, 1, 241, 0.35), transparent, rgba(120, 0, 255, 0.55), transparent, rgba(159, 1, 241, 0.35) );
        opacity: 0.7;
        filter: blur(55px);
        animation: bodyGlow 18s linear infinite;
        z-index: 0;
        pointer-events: none;
    }

@keyframes bodyGlow {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.05);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* #endregion */

/* #region Content Area */

#innerContentArea {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.content {
    padding: 0 !important;
}

.full-height-row {
    height: calc(100vh - 180px);
}

/* #endregion */

/* #region Typography */

.lead {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.6;
}

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

.underline {
    text-decoration: underline;
}

.nowrap {
    white-space: nowrap !important;
}

.text-ss {
    color: #9f01f1;
}

/* #endregion */

/* #region Utility Classes */

.dl-horizontal dt {
    white-space: normal;
}

.disabled {
    color: var(--text-disabled) !important;
    cursor: not-allowed;
    pointer-events: none;
}

.textbox-disabled {
    color: var(--text-disabled) !important;
    cursor: not-allowed;
    border: none;
    pointer-events: none;
}

.input-error {
    border: 1px solid #ff4d4d !important;
    border-radius: 4px !important;
}

    .select2-container--default .select2-selection--single.input-error .select2-selection__rendered {
        color: inherit;
    }

.scroll-hidden {
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .scroll-hidden::-webkit-scrollbar {
        display: none;
    }

.spinning {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.icon-spin {
    display: inline-block;
    animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* #endregion */

/* #endregion Base / Defaults */

/* #region Colors & Theming */

/* #region Color Utilities */

.color-ss,
.text-ss {
    color: var(--color-primary) !important;
}

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

.bg-ss-100 {
    background-color: var(--color-primary-lightest) !important;
}

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

.row-hover-color-ss {
    background-color: var(--color-primary-lighter) !important;
}

.dt-row-success-hover-color {
    background-color: var(--color-success-light) !important;
}

.dt-row-warning-hover-color {
    background-color: var(--color-warning-light) !important;
}

.dt-row-danger-hover-color {
    background-color: var(--color-danger-light) !important;
}

.background-color-cc, .bg-cc {
    background-color: #268bd2 !important;
}

/* #endregion */

/* #region Horizontal Rules */

.hr-ss,
.hr-cc {
    color: var(--color-primary);
    background-color: var(--color-primary);
    height: 5px;
    margin: 0;
    padding: 0;
    border: none;
}

.hr-black {
    color: black;
    background-color: black;
    height: 2px;
    margin: 0;
    padding: 0;
    border: none;
}

/* #endregion */

/* #endregion /Colors & Theming */

/* #region Borders */

.border-top-ss {
    border-top: 1px solid var(--color-primary) !important;
}

.border-right-ss {
    border-right: 1px solid var(--color-primary) !important;
}

.border-bottom-ss {
    border-bottom: 1px solid var(--color-primary) !important;
}

.border-left-ss {
    border-left: 1px solid var(--color-primary) !important;
}

.border-thick-top-ss {
    border-top-width: 2px;
    border-top-color: var(--color-primary);
}

.border-thick-right-ss {
    border-right-width: 2px;
    border-right-color: var(--color-primary);
}

.border-thick-bottom-ss {
    border-bottom-width: 2px;
    border-bottom-color: var(--color-primary);
}

.border-thick-left-ss {
    border-left-width: 2px;
    border-left-color: var(--color-primary);
}

/* #endregion /Borders */

/* #region Badges */

.badge-global {
    background-color: var(--bg-global) !important;
}

.badge-ss {
    color: var(--text-primary) !important;
    background-color: var(--color-primary) !important;
}

.badge-cc {
    background-color: #268bd2 !important;    
}

.badge-dark-green {
    background-color: #1a7f1c !important;
}

#soberSoftAbacusDashboard .badge-success {
    background-color: var(--color-success-alt) !important;
}

/* #endregion /Badges */

/* #region Shadows */

.shadow-logo {
    box-shadow: var(--shadow-card);
    -webkit-box-shadow: var(--shadow-card);
    -moz-box-shadow: var(--shadow-card);
}

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

/* #endregion /Shadows */

/* #region Links */

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

    .link-ss:hover {
        color: var(--color-primary);
        text-decoration: underline;
    }

a:focus,
a:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.hover-effect {
    color: var(--text-primary) !important;
}

    .hover-effect:hover {
        color: var(--color-primary) !important;
        cursor: pointer;
    }

.footer-link-ss {
    color: var(--text-primary);
}

.custom-underline-ss {
    display: inline-block;
    border-bottom: 3px solid var(--color-primary) !important;
    padding-bottom: 2px;
}

/* #endregion /Links */

/* #region Buttons */

/* #region Primary Buttons */

.button-ss,
.btn-ss,
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

    .btn-primary:hover {
        background-color: var(--color-primary-light) !important;
        border-color: var(--color-primary-light) !important;
    }

.btn-disabled {
    background-color: #8e919d !important;
    border-color: #8e919d !important;
}

.btn-black {
    color: #fff;
    background-color: #2c2d33;
    border-color: #2c2d33;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    .btn-black:hover {
        color: #fff;
        /*background-color: #202226;*/ /* tad lighter */
        background-color: #2c2d33;
        border: 0.5px solid #383940;
    }

    .btn-black:focus,
    .btn-black.focus {
        color: #fff;
        /*background-color: #202226;*/
        /*border-color: #fff;*/
        /*box-shadow: 0 0 0 0.25rem rgba(29, 30, 33, 0.35);*/
    }

    .btn-black:active,
    .btn-black.active {
        color: #fff;
        /*background-color: #1a1b1e;*/ /* slightly darker than base */
        /*border-color: #1a1b1e;*/
    }



/* #endregion */

/* #region Button Sizes */

.btn-xs {
    padding: .3125rem .75rem;
    font-size: .6125rem;
    line-height: 1.6924;
    border-radius: .1875rem;
}

.btn-xxs {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    line-height: 1;
    border-radius: var(--radius-sm);
}

/* #endregion */

/* #region Icon Buttons */

.icon-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
}

    .icon-button i {
        font-size: inherit;
        color: var(--text-primary);
    }

/* #endregion */

/* #region Navigation Buttons */

#navbarSignInButton,
#navbarSignUpButton,
#navbarSignOutButton {
    width: 5.5rem;
}

    #navbarSignInButton i,
    #navbarSignUpButton i,
    #navbarSignOutButton i {
        margin-right: 6px;
    }

/* #endregion */

/* #region Form Action Buttons */

#save_cancel_clear_wrapper .row {
    justify-content: end;
}

#saveButton,
#cancelButton,
#clearButton {
    max-width: 5rem;
    width: 5rem;
}

    #saveButton i,
    #cancelButton i,
    #clearButton i {
        margin-right: 0.25rem !important;
    }

/* #endregion */

/* #region Dropdown Buttons */

button.dropdown-item:hover {
    background-color: var(--border-light) !important;
}

/* #endregion */

/* #region Specialized Buttons */

#soberSoftAbacusDashboard .btn-outline-success {
    border-color: var(--color-success-alt) !important;
}

    #soberSoftAbacusDashboard .btn-outline-success:hover {
        background-color: var(--color-success-alt) !important;
    }

.export-download-btn {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid transparent;
    padding: 8px 10px;
    border-radius: var(--radius-card);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .export-download-btn i {
        color: var(--text-primary);
        font-size: 16px;
    }

    .export-download-btn:hover {
        background-color: var(--bg-card) !important;
    }

.page-header-btn {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid transparent;
    padding: 8px 10px;
    border-radius: var(--radius-card);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .page-header-btn i {
        color: var(--text-primary);
        font-size: 16px;
    }

    .page-header-btn:hover {
        background-color: var(--bg-card) !important;
    }

/* #endregion */

/* #endregion /Buttons */

/* #region Modals */

/* #region Modal Layout & Positioning */

/* ── Modal layering safety (app-modal-active) ─────────────────────────────────
   modal-layer.js adds body.app-modal-active on show.bs.modal and moves the
   modal element to <body> so it escapes the .page-content stacking context.
   While a modal is open we hide every custom app overlay (#mainOverlay,
   #sidebarOverlay, #axiosRequestOverlay, .overlay, etc.) and force the Bootstrap
   backdrop + modal to the top. This makes the Bootstrap .modal-backdrop the only
   visible dim/blur layer on every browser, including iOS Safari where
   -webkit-backdrop-filter on the custom overlays would otherwise composite above
   the modal regardless of z-index. ── */
body.app-modal-active [id*="overlay" i]:not(.modal-backdrop),
body.app-modal-active [class*="overlay" i]:not(.modal-backdrop) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.app-modal-active .modal-backdrop {
    z-index: 20000 !important;
    background-color: rgba(0, 0, 0, 0.65) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
}

body.app-modal-active .modal-backdrop.show {
    opacity: 1 !important;
}

body.app-modal-active .modal {
    z-index: 20010 !important;
}

/* Global tooltip stacking: Bootstrap's default tooltip z-index is far below
   SoberSoft's custom modal/overlay stack (backdrop 20000, modal 20010), so tooltips
   generated inside or above any overlay would render behind it. A tooltip is only
   created when its trigger icon is visible, so always floating tooltips on top keeps
   the rule simple and correct everywhere — if the icon is visible, its tooltip is too. */
.tooltip {
    z-index: 2147483647 !important;
}

/* The project's .tooltip() is the jQuery UI tooltip widget, which generates
   .ui-tooltip elements (appended to body). Lift them above the custom modal/
   backdrop stack (backdrop 20000, modal 20010) so modal tooltips aren't hidden. */
.ui-tooltip {
    z-index: 2147483647 !important;
}

/* #endregion */

/* #region Modal Content */

.modal-content {
    max-height: 90vh;
    overflow-x: hidden !important;
}

.modal-header {
    background-color: var(--color-primary);
}

.modal-content :is(input, select, textarea) {
    max-width: 100% !important;
}

.modal-content .form-control-sm {
    color: var(--text-primary);
    background-color: var(--bg-dark);
}

.modal :is(input, textarea) {
    font-size: 16px !important;
}

/* #endregion */

/* #region Modal Checkboxes & Validation */

.modal-content .checkbox-wrapper {
    display: flex;
    align-items: center;
}

.modal-content .checkbox {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

.modal-content .checkbox-label {
    margin: 0;
    line-height: 1;
    vertical-align: middle;
}

.modal-content .alert-sm {
    position: relative;
    padding: 0.29rem 0.5rem !important;
    font-size: 0.7rem !important;
}

.modal-content .alert-dismissible .close {
    position: absolute;
    top: -14px;
    right: -14px;
}

.scrollable-modal-body {
    max-height: 80vh;
    overflow-y: auto;
    padding: 1rem;
}

/* #endregion */

/* #endregion /Modals */

/* #region Cards */

/* #region Card Base Styles */

.card-transparent {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    /*background-color: var(--bg-dark);*/
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
}

/* #region Scroll container top fade (content fades near top edge) */
.card.card-transparent {
    overflow-y: auto;
    border: none !important;
    outline: none !important;
}

.card.card-transparent.is-scrolled {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black .4rem);
    mask-image: linear-gradient(to bottom, transparent 0px, black .4rem);
}

.card.card-transparent {
    position: relative;
    overflow-y: auto;
}

    .card.card-transparent.is-scrolled::before {
        content: "";
        position: sticky;
        top: 0;
        left: 0;
        display: block;
        height: 40px;  
        width: 100%;
        z-index: 20;
        pointer-events: none;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    }
/* #endregion */

.card-scrollable,
.datatable-card,
.datatable-card-with-tabs,
.datatable-card-with-select {
    height: 100%;
    overflow-y: auto;
}

.card-header {
    background-color: var(--bg-card);
    z-index: var(--z-header);
}

.data-card {
    z-index: 995;
}

/* #endregion */

/* #region Card Icons */

#soberSoftAbacusDashboard .card-header i,
#soberSoftDashboard .card-header i {
    color: var(--text-primary);
    font-size: 1.3rem;
}

    #soberSoftAbacusDashboard .card-header i:hover,
    #soberSoftDashboard .card-header i:hover {
        color: var(--color-primary);
        cursor: pointer;
    }

/* #endregion */

/* #region Home App Cards */

#soberSoftHome .icon-card {
    width: 150px;
    height: 150px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

#AboutTheBusiness .card-footer,
#TheApps .card {
    background-color: white;
}

#TheApps img {
    width: 50px;
}

/* Abacus Card */
#homeAbacusAppCard {
    color: black;
    border-left: 2px solid var(--color-abacus);
    border-bottom: 2px solid var(--color-abacus);
}

#homeAbacusCardDescription {
    color: var(--text-primary);
    background-color: var(--color-abacus) !important;
    padding: 10px;
}

#homeAbacusAppCard .card-footer {
    background-color: black;
}

    #homeAbacusAppCard .card-footer i {
        color: var(--text-primary);
    }

        #homeAbacusAppCard .card-footer i:hover {
            color: var(--color-abacus);
            cursor: pointer;
        }

/* Hermes Card */
#homeHermesAppCard {
    color: black;
    border-left: 2px solid var(--color-hermes);
    border-bottom: 2px solid var(--color-hermes);
}

#homeHermesCardDescription {
    color: var(--text-primary);
    background-color: var(--color-hermes) !important;
    padding: 10px;
}

#homeHermesAppCard .card-footer {
    background-color: black;
}

    #homeHermesAppCard .card-footer i {
        color: var(--text-primary);
    }

        #homeHermesAppCard .card-footer i:hover {
            color: var(--color-hermes);
            cursor: pointer;
        }

/* Hourglass Card */
#homeHourglassAppCard {
    color: black;
    border-left: 2px solid var(--color-hourglass);
    border-bottom: 2px solid var(--color-hourglass);
}

#homeHourglassCardDescription {
    color: var(--text-primary);
    background-color: var(--color-hourglass) !important;
    padding: 10px;
}

#homeHourglassAppCard .card-footer {
    background-color: black;
}

    #homeHourglassAppCard .card-footer i {
        color: var(--text-primary);
    }

        #homeHourglassAppCard .card-footer i:hover {
            color: var(--color-hourglass);
            cursor: pointer;
        }

/* SoberSoft Card */
#homeSoberSoftAppCard {
    color: black;
    border-left: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

#homeSoberSoftCardDescription {
    color: var(--text-primary);
    background-color: var(--color-primary) !important;
    padding: 10px;
}

#homeSoberSoftAppCard .card-footer {
    background-color: black;
}

    #homeSoberSoftAppCard .card-footer i {
        color: var(--text-primary);
    }

        #homeSoberSoftAppCard .card-footer i:hover {
            color: var(--color-primary);
            cursor: pointer;
        }

/* #endregion */

/* #region Card Overlays */

#soberSoftAbacusDashboard .datatable-overlay-container {
    z-index: var(--z-overlay-modal-datatable) !important;
}

/* #endregion */

/* #endregion /Cards */

/* #region Tabs */

#soberSoftMeetingMinutes ul.nav-tabs > li > a.nav-link,
#soberSoftMeetingMinutes ul.nav-tabs > li > a.nav-link.active,
#soberSoftRequests ul.nav-tabs > li > a.nav-link,
#soberSoftRequests ul.nav-tabs > li > a.nav-link.active {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-top-left-radius: var(--radius-card) !important;
    border-top-right-radius: var(--radius-card) !important;
    z-index: 1;
    position: relative;
    transition: none !important;
}

    #soberSoftMeetingMinutes ul.nav-tabs > li > a.nav-link.active,
    #soberSoftRequests ul.nav-tabs > li > a.nav-link.active {
        border-bottom: 2px solid var(--color-primary) !important;
        z-index: 2;
    }

/* #endregion /Tabs */

/* #region Dropdowns */

.dropdown-menu {
    z-index: var(--z-dropdown);
}

.dropdown-toggle::after {
    display: none;
}

#filter {
    z-index: 1001 !important;
}

#filterDropdown {
    z-index: 1002 !important;
}

.dropdown.show > .main-icon,
.dropdown.show i.main-icon {
    color: var(--color-primary);
}

.dropdown-content-body {
    background-color: #3f434a !important;
}

/* #endregion /Dropdowns */

/* #region Forms & Inputs */

/* #region Base Input Styles */

input,
select,
textarea {
    max-width: 280px;
    border: 1px solid var(--border-subtle) !important;
    outline: none !important;
    transition: border-bottom-color var(--transition-normal) !important;
}

    input:focus,
    textarea:focus,
    select:focus {
        outline: none !important;
        box-shadow: none !important;
        border: 1px solid var(--border-subtle) !important;
        border-bottom-color: var(--color-primary) !important;
    }

label {
    color: white !important;
}

/* Full-width inputs in specific contexts */
#soberSoftMeetingDetailsMinutesCard input,
#soberSoftMeetingDetailsMinutesCard select,
#soberSoftMeetingDetailsMinutesCard textarea,
#soberSoftMeetingMinutes input,
#soberSoftMeetingMinutes select,
#soberSoftMeetingMinutes textarea,
#soberSoftRequests input,
#soberSoftRequests select,
#soberSoftRequests textarea,
#campbellscodeMyProfile input,
#campbellscodeMyProfile select,
#campbellscodeMyProfile textarea,
#campbellsCodeFullEdit input,
#campbellsCodeFullEdit select,
#campbellsCodeFullEdit textarea {
    max-width: 100% !important;
}

/* #endregion */

/* #region Form Alerts (Shared across multiple forms) */

#registrationForm .alert-sm,
#loginForm .alert-sm,
#forgotPasswordForm .alert-sm,
#resetPasswordForm .alert-sm,
#changePasswordForm .alert-sm,
#twoFactorVerifyCodeForm .alert-sm,
#myProfileUserForm .alert-sm,
#soberSoftRequestForm .alert-sm {
    display: relative;
    padding: 0.29rem 0.5rem !important;
    font-size: 0.7rem !important;
}

#registrationForm .alert-dismissible .close,
#loginForm .alert-dismissible .close,
#forgotPasswordForm .alert-dismissible .close,
#resetPasswordForm .alert-dismissible .close,
#changePasswordForm .alert-dismissible .close,
#twoFactorVerifyCodeForm .alert-dismissible .close,
#myProfileUserForm .alert-dismissible .close,
#soberSoftRequestForm .alert-dismissible .close {
    display: absolute;
    top: -14px;
    right: -14px;
}

/* #endregion */

/* #region Checkboxes */

#soberSoftMeetingMinutes .custom-control-label::before,
#registrationForm .custom-control-label::before,
#loginForm .custom-control-label::before,
#usersRolesTable .custom-control-label::before,
#fullEditRolesTable .custom-control-label::before,
#usersPermissionsTable .custom-control-label::before,
#fullEditPermissionsTable .custom-control-label::before,
#rolePermissionsTable .custom-control-label::before {
    background-color: white !important;
}

#soberSoftMeetingMinutes .custom-control-success .custom-control-input:checked ~ .custom-control-label::after,
#soberSoftMeetingMinutes .custom-control-success .custom-control-input:disabled:checked ~ .custom-control-label::after,
#registrationForm .custom-control-success .custom-control-input:checked ~ .custom-control-label::after,
#registrationForm .custom-control-success .custom-control-input:disabled:checked ~ .custom-control-label::after,
#loginForm .custom-control-success .custom-control-input:checked ~ .custom-control-label::after,
#loginForm .custom-control-success .custom-control-input:disabled:checked ~ .custom-control-label::after,
#usersRolesTable .custom-control-success .custom-control-input:checked ~ .custom-control-label::after,
#usersRolesTable .custom-control-success .custom-control-input:disabled:checked ~ .custom-control-label::after,
#fullEditRolesTable .custom-control-success .custom-control-input:checked ~ .custom-control-label::after,
#fullEditRolesTable .custom-control-success .custom-control-input:disabled:checked ~ .custom-control-label::after,
#usersPermissionsTable .custom-control-success .custom-control-input:checked ~ .custom-control-label::after,
#usersPermissionsTable .custom-control-success .custom-control-input:disabled:checked ~ .custom-control-label::after,
#fullEditPermissionsTable .custom-control-success .custom-control-input:checked ~ .custom-control-label::after,
#fullEditPermissionsTable .custom-control-success .custom-control-input:disabled:checked ~ .custom-control-label::after,
#rolePermissionsTable .custom-control-success .custom-control-input:checked ~ .custom-control-label::after,
#rolePermissionsTable .custom-control-success .custom-control-input:disabled:checked ~ .custom-control-label::after {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    border-radius: .1875rem;
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.dt-col-toggle {
    accent-color: var(--color-primary);
}

/* #endregion */

/* #region Toggle Switches */

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #28a745;
}

.custom-switch .custom-control-input:not(:checked) ~ .custom-control-label::before {
    background-color: var(--color-danger-alt);
}

/* #endregion */

/* #region Date/Time Pickers */

.input-group {
    display: flex;
    position: relative;
}

.input-group-text {
    background-color: var(--color-primary);
    cursor: pointer;
}

.picker {
    z-index: 1060 !important;
}

.picker--focused .picker__day--highlighted,
.picker__day--highlighted {
    background-color: var(--color-primary) !important;
}

.input-with-picker-open {
    border-bottom: 1px solid var(--color-primary) !important;
}

/* flatpickr customization */
.flatpickr-calendar {
    background: #1e2327;
    color: var(--text-primary);
}

.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-month .flatpickr-current-month,
.flatpickr-monthDropdown-months,
.flatpickr-monthDropdown-month,
.flatpickr-weekdays,
.flatpickr-weekdaycontainer,
span.flatpickr-weekday {
    background: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
}

span.flatpickr-weekday {
    color: var(--bg-card) !important;
}

.flatpickr-weekday {
    color: var(--text-primary) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus {
    background: var(--color-primary) !important;
    color: var(--text-primary);
    border-color: var(--color-primary) !important;
}

.dayContainer {
    margin-top: 5px !important;    
}

.flatpickr-day.today {
    border-color: #03a9f4;
}

/* #endregion */

/* #region Meeting Agenda Items List */

#agendaCard,
#meetingFormCard {
    height: 100%;
}

#agendaList {
    background-color: var(--bg-darkest);
    overflow-y: auto;
    height: 540px;
    max-height: 540px;
}

.list-group-item {
    transition: all var(--transition-normal);
}

    .list-group-item:focus,
    .list-group-item.sortable-chosen,
    .list-group-item:active,
    .list-group-item:focus-visible {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

.icon-move-vertical {
    cursor: grab;
    font-size: 1.1em;
}

.remove-icon {
    cursor: pointer;
}

.sortable-ghost {
    opacity: 0.4;
    background-color: #f0f0f0 !important;
    outline: none !important;
    border: none !important;
}

.sortable-chosen {
    background-color: var(--color-primary) !important;
    box-shadow: inset 0 0 0 1px #26c6da;
    transition: background-color var(--transition-normal);
    outline: none !important;
    border: none !important;
}

.fade-out {
    opacity: 0;
    transform: scaleY(0);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
}

#agendaList .list-group-item {
    transition: background-color var(--transition-fast);
}

    #agendaList .list-group-item:hover {
        background-color: var(--bg-row-hover);
    }

.agenda-text {
    white-space: normal;
    word-break: break-word;
}

#agendaList .list-group-item {
    align-items: center;
}

#agendaList .agenda-left {
    display: flex;
    align-items: center;
}

#agendaList .handle,
#agendaList .remove-icon,
#agendaList .custom-control {
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

#agendaList .handle,
#agendaList .remove-icon {
    font-size: 1rem;
    transform: translateY(5px);
}

/* #endregion */

/* #region Meeting Minutes Form */

#soberSoftMeetingMinutes #save_cancel_clear_wrapper .form-group {
    margin-bottom: 0;
}

#soberSoftMeetingDetailsResolvedAgendaCard,
#soberSoftMeetingDetailsUnresolvedAgendaCard {
    max-height: 383px !important;
}

/* #endregion */

/* #region Select2 */

/* ======================================================================
   SELECT2 — DARK THEME (BASE)
   ====================================================================== */

.select2-container {
    box-sizing: border-box;
    border: 1px solid var(--border-subtle) !important;
}

/* Visible selection (base single select) */
.select2-container--default .select2-selection--single {
    background-color: var(--bg-darkest);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    height: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    color: var(--text-primary);
    box-shadow: none;
    box-sizing: border-box;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--text-primary);
        line-height: 32px;
        padding-left: 10px;
        padding-right: 4.5rem !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__clear {
        right: 3rem !important; /* bigger value = moves × left */
        /* or reduce padding if it's too wide */
        padding: 0 0.4rem !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 32px;
        right: 8px;
    }

        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: var(--text-primary) transparent transparent transparent;
        }

    .select2-container--default .select2-selection--single:focus {
        outline: none;
        box-shadow: none;
    }

.select2-container--focus .select2-selection--single,
.select2-container--open .select2-selection--single {
    border-top-color: var(--border-subtle) !important;
    border-right-color: var(--border-subtle) !important;
    border-left-color: var(--border-subtle) !important;
    border-bottom-color: var(--color-primary) !important;
    box-shadow: none !important;
}

/* Dropdown panel */
.select2-container--default .select2-dropdown {
    background-color: var(--border-subtle);
    border: 1px solid var(--border-subtle);
    box-sizing: border-box;
}

/* Search field */
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #2a2b31;
    border: 1px solid var(--border-medium);
    color: var(--text-primary);
}

/* Results */
.select2-container--default .select2-results__option {
    background-color: transparent;
    color: #f0f0f0;
    padding: 8px 10px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--border-light) !important;
    color: var(--text-primary);
}

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

/* ================================
   SELECT2: Dropdown selected row
   Drop-in override (paste LAST)
   ================================ */

/* Selected option in dropdown */
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--color-primary) !important;
    color: var(--text-primary) !important;
}

    /* Keep selected option primary even when hovered/highlighted */
    .select2-container--default
    .select2-results__option--selected.select2-results__option--highlighted,
    .select2-container--default
    .select2-results__option--highlighted[aria-selected="true"] {
        background-color: var(--color-primary) !important;
        color: var(--text-primary) !important;
    }

/* ======================================================================
   SELECT2 — GLOBAL SINGLE-SELECT UI TWEAKS (clear + arrow spacing)
   ====================================================================== */

.select2-container .select2-selection--single {
    position: relative;
}

    /* space for × + chevron */
    .select2-container .select2-selection--single .select2-selection__rendered {
        padding-right: 3.5rem;
    }

    .select2-container .select2-selection--single .select2-selection__clear {
        position: absolute;
        right: 2.25rem;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        line-height: 1;
        cursor: pointer;
        padding: 0 0.75rem;
    }


/* ======================================================================
   SELECT2 — DATATABLES LENGTH CONTROL (SCOPED so it doesn't break modals)
   IMPORTANT: this is where your 70px rules belong.
   ====================================================================== */

/* Only apply to the DataTables "Show N entries" control */
.dataTables_length .select2-container--default .select2-selection--single {
    border: none !important;
    box-shadow: none !important;
    background-color: var(--bg-darkest) !important;
    color: var(--text-primary) !important;
    height: 38px !important;
    min-height: 38px !important;
    width: 70px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

    .dataTables_length .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--text-primary) !important;
        line-height: 38px !important;
        padding-left: 8px !important;
        padding-right: 28px !important;
    }

    .dataTables_length .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 38px !important;
        right: 8px !important;
    }

        .dataTables_length .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: var(--text-primary) transparent transparent transparent !important;
        }

.dataTables_length .select2-container--default .select2-dropdown {
    background-color: var(--border-subtle) !important;
    border: 1px solid var(--border-subtle) !important;
    width: 70px !important;
}

.dataTables_length .select2-container--default .select2-selection--single:focus {
    border-bottom-color: var(--color-primary) !important;
    box-shadow: none;
}

.dataTables_length .select2-container--open .select2-selection--single {
    border-bottom: 1px solid var(--color-primary) !important;
    box-shadow: none !important;
}


/* ======================================================================
   SELECT2 — SOBERSOFT MODALS (unchanged behavior)
   ====================================================================== */

#soberSoftRoleModal .select2-container,
#soberSoftPermissionModal .select2-container {
    width: 100% !important;
}

#soberSoftRoleModal .select2-container--default .select2-selection--single,
#soberSoftPermissionModal .select2-container--default .select2-selection--single {
    position: relative;
    width: 100% !important;
    height: calc(1.5em + 0.75rem + 2px);
    display: flex;
    align-items: center;
    padding-right: 3.25rem;
}

    #soberSoftRoleModal .select2-container--default .select2-selection--single .select2-selection__rendered,
    #soberSoftPermissionModal .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-left: 0.75rem;
        padding-right: 0;
        line-height: normal;
    }

    #soberSoftRoleModal .select2-container--default .select2-selection--single .select2-selection__arrow,
    #soberSoftPermissionModal .select2-container--default .select2-selection--single .select2-selection__arrow {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
    }

    #soberSoftRoleModal .select2-container--default .select2-selection--single .select2-selection__clear,
    #soberSoftPermissionModal .select2-container--default .select2-selection--single .select2-selection__clear {
        position: absolute;
        right: 2.25rem;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        float: none;
    }

#soberSoftRoleModal .select2-dropdown,
#soberSoftPermissionModal .select2-dropdown {
    width: auto !important;
}

#soberSoftRoleModal .select2-results,
#soberSoftPermissionModal .select2-results {
    max-width: 100%;
}

#soberSoftRoleModal .select2-search--dropdown,
#soberSoftPermissionModal .select2-search--dropdown {
    padding: 0.5rem;
    border-bottom: none !important;
    position: relative;
}

    #soberSoftRoleModal .select2-search--dropdown .select2-search__field,
    #soberSoftPermissionModal .select2-search--dropdown .select2-search__field {
        padding: 0.375rem 3rem 0.375rem 2.75rem !important;
        border: none !important;
        border-radius: var(--radius-md) !important;
        background-color: var(--bg-element-alt) !important;
        color: var(--text-primary) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

        #soberSoftRoleModal .select2-search--dropdown .select2-search__field:focus,
        #soberSoftRoleModal .select2-search--dropdown .select2-search__field:hover,
        #soberSoftPermissionModal .select2-search--dropdown .select2-search__field:focus,
        #soberSoftPermissionModal .select2-search--dropdown .select2-search__field:hover {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
            background-color: var(--bg-element-alt) !important;
        }

#soberSoftRoleModal .select2-selection__placeholder,
#soberSoftPermissionModal .select2-selection__placeholder {
    color: var(--text-muted) !important;
    font-weight: bolder;
}

#soberSoftRoleModal .select2-container--open,
#soberSoftPermissionModal .select2-container--open {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

#soberSoftRoleModal .select2-dropdown--below,
#soberSoftPermissionModal .select2-dropdown--below {
    border-top: 0 !important;
}

#soberSoftRoleModal .select2-dropdown--above,
#soberSoftPermissionModal .select2-dropdown--above {
    border-bottom: 0 !important;
}

#soberSoftRoleModal .select2-container--open::before,
#soberSoftRoleModal .select2-container--open::after,
#soberSoftRoleModal .select2-dropdown::before,
#soberSoftRoleModal .select2-dropdown::after,
#soberSoftPermissionModal .select2-container--open::before,
#soberSoftPermissionModal .select2-container--open::after,
#soberSoftPermissionModal .select2-dropdown::before,
#soberSoftPermissionModal .select2-dropdown::after {
    content: none !important;
    display: none !important;
}


/* ======================================================================
   ABACUS JOURNAL ENTRIES MODAL — FULL WIDTH + NO CLIPPING
   ====================================================================== */

/* Ensure wrappers don't clip dropdowns (keeps your table scroll intact) */
#abacusJournalEntriesModal .modal-dialog,
#abacusAccountModal .modal-dialog,
#abacusJournalEntriesModal .modal-content,
#abacusAccountModal .modal-content,
#abacusJournalEntriesModal .modal-body,
#abacusAccountModal .modal-body {
    overflow: visible !important;
}

/* The table scroll container can clip positioned children; dropdown is in modal via dropdownParent,
   but this prevents any accidental clipping if Select2 ever renders inside. */
#abacusJournalEntriesModal .table-responsive,
#abacusAccountModal .table-responsive {
    overflow: visible !important;
}

/* Your existing form sizing */
#abacusJournalEntriesModal .form-ddl-wrapper .select2-account,
#abacusAccountModal .form-ddl-wrapper .select2-account,
#abacusJournalEntriesModal .form-ddl-wrapper select,
#abacusAccountModal .form-ddl-wrapper select {
    width: 100% !important;
    min-width: 360px;
    box-sizing: border-box;
    font-size: 1.1rem;
}

#abacusJournalEntriesModal input[type="number"],
#abacusAccountModal input[type="number"] {
    width: 100% !important;
    min-width: 130px;
    box-sizing: border-box;
    font-size: 1.1rem;
}

/* Anchor pattern (this is what makes dropdown match the control width) */
#abacusJournalEntriesModal .abacus-select2-anchor,
#abacusAccountModal .abacus-select2-anchor {
    width: 100%;
    position: relative;
}

    /* Force the generated Select2 container to fill the anchor */
    #abacusJournalEntriesModal .abacus-select2-anchor .select2-container,
    #abacusAccountModal .abacus-select2-anchor .select2-container {
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    #abacusJournalEntriesModal .abacus-select2-anchor .select2-selection--single,
    #abacusAccountModal .abacus-select2-anchor .select2-selection--single {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* CRITICAL: dropdown stretches exactly to the control width */
    #abacusJournalEntriesModal .abacus-select2-anchor .select2-dropdown,
    #abacusAccountModal .abacus-select2-anchor .select2-dropdown {
        left: 0 !important;
        right: 0 !important;
        width: auto !important; /* better than width:100% for box-model mismatches */
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

/* Extra safety: never allow a narrow inline width to win */
#abacusJournalEntriesModal .select2-dropdown,
#abacusAccountModal .select2-dropdown {
    min-width: 100% !important;
}

/* ======================================================================
   BUSINESS SELECT CARDS (unchanged)
   ====================================================================== */

#abacusJournalEntriesBusinessSelectCard .select2-container,
#abacusAccountsBusinessSelectCard .select2-container {
    width: 100% !important;
}

    #abacusJournalEntriesBusinessSelectCard .select2-container .selection,
    #abacusJournalEntriesBusinessSelectCard .select2-container .select2-selection--single,
    #abacusAccountsBusinessSelectCard .select2-container .selection,
    #abacusAccountsBusinessSelectCard .select2-container .select2-selection--single {
        width: 100% !important;
    }

/* ======================================================================
   SOBERSOFT ACCOUNT FORM — modal-safe width pattern (unchanged)
   ====================================================================== */

#abacusJournalEntryForm .select2-container,
#soberSoftAccountForm .select2-container {
    width: 100% !important;
    display: block !important;
}

#abacusJournalEntryForm .select2-selection--single,
#soberSoftAccountForm .select2-selection--single {
    width: 100% !important;
    box-sizing: border-box;
}

.abacus-select2-anchor {
    position: relative;
}

    .abacus-select2-anchor .select2-container--open .select2-dropdown {
        min-width: 100%;
        box-sizing: border-box;
    }

/* #endregion /Select2 */

/* #region Textarea */
.no-resize {
    resize: none !important;
}
textarea.no-resize {
    resize: none !important;
}
/* #endregion Textarea */

/* Abacus Account Modal: make Select2 + inputs match height + stay dark */
#abacusAccountModal {
  --abacus-h: 44px; /* adjust if your theme uses a different height */
}

/* Inputs */
#abacusAccountModal .form-control {
  height: var(--abacus-h) !important;
}

/* Select2 single control height */
#abacusAccountModal .select2-container--default .select2-selection--single {
  height: var(--abacus-h) !important;
  background: #1f2227 !important;
  border: 1px solid #3a3f46 !important;
}

#abacusAccountModal .select2-container--default
.select2-selection--single .select2-selection__rendered {
  line-height: calc(var(--abacus-h) - 2px) !important;
  color: #e8e8e8 !important;
}

#abacusAccountModal .select2-container--default
.select2-selection--single .select2-selection__arrow {
  height: var(--abacus-h) !important;
}

/* Disabled Select2 should still look dark */
#abacusAccountModal .select2-container--disabled .select2-selection--single {
  background: #2a2e35 !important;
  opacity: 1 !important;
}


/* #endregion /Forms & Inputs */

/* #region Tables */
/* #region Base Table Styles */
.scrollable-table {
    overflow-x: hidden;
    overflow-y: auto;
    line-height: 1.25rem;
    text-align: left;
}

.table-header-wrapper {
    color: var(--text-primary);
    background-color: var(--color-primary);
}

    .table-header-wrapper i {
        position: relative;
        left: 5px;
        font-size: 1.25rem;
    }

th {
    vertical-align: middle;
    white-space: nowrap;
}

tr:hover {
    background-color: var(--bg-hover-alt);
}

.table-bordered > :not(caption) > * {
    border-width: 0;
}

table.table-soft-dark tbody tr td {
    background-color: var(--bg-element) !important;
    color: var(--text-secondary) !important;
}

table.table-soft-dark tbody tr:hover td {
    background-color: var(--bg-hover) !important;
}

.tr-expanded {
    background: var(--color-primary-lighter) !important;
}

    .tr-expanded td:first-child {
        box-shadow: inset 5px 0 0 var(--color-primary);
        transition: box-shadow var(--transition-fast);
    }

td.details-control {
    width: 1.4em;
    text-align: center;
    cursor: pointer;
}

/* #endregion */

/* #region Role & Permission Tables */

/*#userFormCard {
    height: 100% !important;
    max-height: 523px !important;
}*/

#usersRolesCard,
#usersPermissionsCard {
    height: 100% !important;
    max-height: 259px !important;
}



#fullEditPermissionsCard {
    height: 100% !important;
    max-height: 459px !important;
}

    #usersRolesCard .scrollable-table,
    #usersPermissionsCard .scrollable-table,
    #fullEditRolesCard .scrollable-table,
    #fullEditPermissionsCard .scrollable-table {
        background-color: var(--bg-darkest) !important;
        overflow: auto !important;
    }

    #usersRolesCard .card-body,
    #usersPermissionsCard .card-body,
    #rolePermissionsCard .card-body,
    #fullEditRolesCard .card-body,
    #fullEditPermissionsCard .card-body {
        padding: 0 !important;
    }

#usersRolesTable,
#usersPermissionsTable,
#rolePermissionsTable,
#fullEditRolesTable,
#fullEditPermissionsTable {
    background-color: var(--bg-darkest) !important;
    margin-bottom: 0 !important;
}

    #usersRolesTable td,
    #usersRolesTable tr,
    #usersRolesTable tbody,
    #usersRolesTable_wrapper td,
    #usersRolesTable_wrapper tr,
    #usersRolesTable_wrapper tbody,
    #usersPermissionsTable td,
    #usersPermissionsTable tr,
    #usersPermissionsTable tbody,
    #usersPermissionsTable_wrapper td,
    #usersPermissionsTable_wrapper tr,
    #usersPermissionsTable_wrapper tbody,
    #fullEditRolesTable td,
    #fullEditRolesTable tr,
    #fullEditRolesTable tbody,
    #fullEditRolesTable_wrapper td,
    #fullEditRolesTable_wrapper tr,
    #fullEditRolesTable_wrapper tbody,
    #fullEditPermissionsTable td,
    #fullEditPermissionsTable tr,
    #fullEditPermissionsTable tbody,
    #fullEditPermissionsTable_wrapper td,
    #fullEditPermissionsTable_wrapper tr,
    #fullEditPermissionsTable_wrapper tbody {
        background: var(--bg-darkest) !important;
        color: var(--text-primary) !important;
        border: none !important;
        padding-bottom: 5px !important;
        height: 100% !important;
    }

        /* highlight the whole row */
        #usersRolesTable tbody tr:hover > td,
        #usersPermissionsTable tbody tr:hover > td,
        #fullEditRolesTable tbody tr:hover > td,
        #fullEditPermissionsTable tbody tr:hover > td {
            background: #43464e !important;
        }

    #usersRolesTable td,
    #usersRolesTable_wrapper td,
    #usersPermissionsTable td,
    #usersPermissionsTable_wrapper td,
    #fullEditRolesTable td,
    #fullEditRolesTable_wrapper td,
    #fullEditPermissionsTable td,
    #fullEditPermissionsTable_wrapper td {
        box-shadow: none !important;
    }

        #usersRolesTable td *,
        #usersRolesTable_wrapper td *,
        #usersPermissionsTable td *,
        #usersPermissionsTable_wrapper td *,
        #fullEditRolesTable td *,
        #fullEditRolesTable_wrapper td *,
        #fullEditPermissionsTable td *,
        #fullEditPermissionsTable_wrapper td * {
            color: var(--text-primary) !important;
        }

    #usersRolesTable th,
    #usersPermissionsTable th,
    #rolePermissionsTable th,
    #fullEditRolesTable th,
    #fullEditPermissionsTable th {
        background-color: var(--color-primary);
    }

#usersRolesCard .row .icon-checkbox-checked2,
#usersPermissionsCard .row .icon-checkbox-checked2 {
    padding-left: 6px;
}

#rolePermissionsCard .row .icon-checkbox-checked2 {
    padding-left: 24px;
}

#soberSoftFullEdit .row .icon-spinner2,
#soberSoftFullEdit .row .icon-rotate-cw2,
#soberSoftFullEdit .row .icon-info,
#soberSoftFullEdit .row .icon-list2 {
    color: var(--text-primary);
}

    #soberSoftFullEdit .row .icon-spinner2:hover,
    #soberSoftFullEdit .row .icon-rotate-cw2:hover,
    #soberSoftFullEdit .row .icon-info:hover,
    #soberSoftFullEdit .row .icon-list2:hover {
        color: var(--color-primary);
        cursor: pointer;
    }

#fullEditRolesCard .row .icon-checkbox-checked2,
#fullEditPermissionsCard .row .icon-checkbox-checked2 {
    padding-left: 6px;
}

#fullEditRolesCard .card-subheader,
#fullEditPermissionsCard .card-subheader {
    padding-right: 15px;
}
/* #endregion */

/* #region Accounting / Abacus Tables */
/* Abacus Journal Entry Lines table should be transparent (keep sticky thead color) */
#abacusJournalEntriesModal #abacusJournalEntryFormLinesTable,
#abacusJournalEntriesModal #abacusJournalEntryFormLinesTable > :not(caption) > * > * {
    background-color: transparent !important; /* overrides Bootstrap .table variables */
}

    /* Extra safety for older Bootstrap rules */
    #abacusJournalEntriesModal #abacusJournalEntryFormLinesTable tbody,
    #abacusJournalEntriesModal #abacusJournalEntryFormLinesTable tbody tr,
    #abacusJournalEntriesModal #abacusJournalEntryFormLinesTable tbody td {
        background: transparent !important;
    }

    /* Keep your sticky header exactly as-is */
    #abacusJournalEntriesModal #abacusJournalEntryFormLinesTable thead,
    #abacusJournalEntriesModal #abacusJournalEntryFormLinesTable thead th {
        background-color: #32333a !important;
    }

/* #endregion  / Abacus Tables */

/* #region Specific Table Cell Widths */

.col-small {
    max-width: 300px !important;
    width: 300px !important;
}

.col-long {
    max-width: 871px !important;
    width: 871px !important;
}

#adminLogger .scrollable-cell {
    display: block;
    max-width: 730px;
    height: 130px !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    word-wrap: break-word;
    white-space: normal;
}

#abacusBusinessesTable td,
#usersTable td,
#userAgentsTable td,
#organizationsTable td,
#passwordVaultTable td,
#projectsTable td,
#projectStatusesTable td,
#loggerClientTable td,
#loggerNavHistoryTable td,
#soberSoftFfcTable td {
    white-space: nowrap;
}

/* #endregion */

/* #endregion /Tables */

/* #region DataTables */
.dt-actions-wrap > .btn,
.dt-actions-wrap > a.btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

/* #region DataTable Links */

.dt-link,
.dt-link-ss {
    color: var(--text-primary);
}

    .dt-link:hover {
        color: var(--text-primary);
        text-decoration: underline;
    }

    .dt-link-ss:hover {
        color: var(--color-primary);
        text-decoration: underline;
    }

#soberSoftAdminUsers .dt-email-link:hover,
#pastMeetingsListCard .dt-email-link:hover,
#myRequestsListCard .dt-email-link:hover,
#allRequestsListCard .dt-email-link:hover {
    color: var(--color-primary);
}

.white-email-link {
    color: #fff !important;
    text-decoration: none;
}

    .white-email-link:hover {
        color: #fff !important;
        text-decoration: underline;
    }

/* #endregion */

/* #region DataTable Filters & Toolbar */

/*.datatable-filters-wrapper {
    color: var(--text-primary);
    display: flex;
}

    .datatable-filters-wrapper i:hover {
        cursor: pointer;
        color: var(--color-primary);
    }

.dt-filter-danger {
    color: var(--color-danger) !important;
}

#showDeletedButton[data-state="on"] i {
    color: var(--color-danger) !important;
}

#showDeletedButton[data-state="off"] i {
    color: var(--text-primary) !important;
}

    #showDeletedButton[data-state="off"] i:hover {
        color: var(--color-primary) !important;
    }*/

/* #endregion */

/* #region DataTable Action Buttons */

#dataTableActions .success-btn:hover,
.show-toggle-username-btn:hover,
.show-toggle-email-btn:hover,
.show-toggle-password-btn:hover,
#dataTableActions .show-btn:hover {
    background-color: var(--color-success);
    border-color: var(--color-success) !important;
}

#dataTableActions .edit-btn {
    background-color: var(--color-primary-lighter);
}

/*    #dataTableActions .edit-btn:hover {
        background-color: var(--color-warning) !important;
        border-color: var(--color-warning) !important;
    }*/

#dataTableActions .delete-btn {
    background-color: var(--color-primary-lighter);
}

/*    #dataTableActions .delete-btn:hover,
    .hide-toggle-username-btn:hover,
    .hide-toggle-email-btn:hover,
    .hide-toggle-password-btn:hover,
    #dataTableActions .hide-btn:hover {
        background-color: var(--color-danger) !important;
        border-color: var(--color-danger) !important;
    }*/

/* #endregion */

/* #region DataTable Search */

.dt-search-box {
    padding-left: 8px !important;
}

.dataTables_filter {
    margin: 0 !important;
    padding: 0 !important;
}

    .dataTables_filter input:focus {
        box-shadow: none !important;
        border-bottom: 1px solid var(--color-primary) !important;
    }

/* #endregion */

/* #region DataTable Export Buttons */

.dt-button {
    color: black !important;
    background-color: white !important;
    margin-left: 5px !important;
    border-radius: 7px !important;
    border: none !important;
    padding: 5px !important;
}

    .dt-button:hover {
        color: var(--text-primary) !important;
        background-color: var(--color-primary) !important;
    }

/* #endregion */

/* #region DataTable Pagination */

.sticky-pagination-wrapper {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    z-index: var(--z-header) !important;
    padding: 0.5rem 1rem;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.dataTables_paginate {
    margin: 0;
}

    .dataTables_paginate .paginate_button.current {
        background-color: var(--bg-darkest) !important;
    }

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

/* #endregion */

/* #region Sticky Headers (DataTables) */

#soberSoftServerLogsScrollArea,
#soberSoftAuditLogsScrollArea,
#soberSoftNotificationsScrollArea,
#soberSoftPermissionsScrollArea,
#soberSoftOrganizationsScrollArea,
#soberSoftRolesScrollArea,
#notificationsScrollArea,
#abacusJournalEntriesScrollArea,
#abacusAccountTypesScrollArea,
#abacusAccountsScrollArea,
#abacusBusinessesScrollArea,
#soberSoftUsersScrollArea,
#soberSoftPastMeetingsScrollArea,
#soberSoftFfcScrollArea,
#myRequestsScrollArea,
#allRequestsScrollArea {
    height: 100%;
    max-height: 100%;
    overflow: auto;
    z-index: 998 !important;
}

    #soberSoftServerLogsScrollArea th,
    #soberSoftAuditLogsScrollArea th,
    #soberSoftNotificationsScrollArea th,
    #soberSoftPermissionsScrollArea th,
    #soberSoftOrganizationsScrollArea th,
    #soberSoftRolesScrollArea th,
    #notificationsScrollArea th,
    #abacusJournalEntriesScrollArea th,
    #abacusAccountTypesScrollArea th,
    #abacusAccountsScrollArea th,
    #abacusBusinessesScrollArea th,
    #soberSoftPastMeetingsScrollArea th,
    #soberSoftFfcScrollArea th,
    #myRequestsScrollArea th,
    #allRequestsScrollArea th {
        position: sticky;
        top: 0px;
        background-color: var(--bg-darkest);
        color: var(--text-primary);
        z-index: var(--z-sticky) !important;
    }

/* #endregion */

/* #region DataTable Overlays */

.datatable-overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    z-index: var(--z-overlay-datatable);
    display: none;
    padding: 0;
    margin: 0;
}

.datatable-spinner {
    position: absolute;
    top: 50%;
    margin-top: -2em;
    left: 50%;
    margin-left: -2em;
    transform: translate(-50%, -50%);
    animation: spin 1s linear infinite;
}

/* #endregion */

/* #region Common DataTable Toolbar Styles */

.logs-toolbar,
.notifications-toolbar,
.accounts-toolbar,
.organizations-toolbar,
.users-toolbar,
.roles-toolbar,
.permissions-toolbar,
.ffcs-toolbar {
    background: var(--bg-darkest);
    border-radius: var(--radius-card);
    padding: 8px 12px;
}

    .logs-toolbar i,
    .notifications-toolbar i,
    .accounts-toolbar i,
    .organizations-toolbar i,
    .users-toolbar i,
    .roles-toolbar i,
    .permissions-toolbar i,
    .ffcs-toolbar i {
        font-size: 1rem;
        opacity: 0.85;
    }

        .logs-toolbar i:hover,
        .notifications-toolbar i:hover,
        .accounts-toolbar i:hover,
        .organizations-toolbar i:hover,
        .users-toolbar i:hover,
        .roles-toolbar i:hover,
        .permissions-toolbar i:hover,
        .ffcs-toolbar i:hover {
            opacity: 1;
        }

    .logs-toolbar .datatable-filters-wrapper,
    .notifications-toolbar .datatable-filters-wrapper,
    .accounts-toolbar .datatable-filters-wrapper,
    .organizations-toolbar .datatable-filters-wrapper,
    .users-toolbar .datatable-filters-wrapper,
    .roles-toolbar .datatable-filters-wrapper,
    .permissions-toolbar .datatable-filters-wrapper,
    .ffcs-toolbar .datatable-filters-wrapper {
        white-space: nowrap;
    }

/* #endregion */

/* #endregion /DataTables */

/* #region Overlays & Spinners */

/* #region Base Overlay */

.overlay {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

    .overlay.is-active {
        display: block !important;
    }

/* #endregion */

/* #region Specific Overlays */

#navbarDropdownOverlay {
    z-index: var(--z-overlay-dropdown);
}

#sidebarOverlay {
    z-index: var(--z-overlay-sidebar);
}

#mainOverlay {
    z-index: var(--z-overlay-main);
}

#axiosRequestOverlay {
    z-index: var(--z-overlay-axios);
}

/* #endregion */

/* #endregion /Overlays & Spinners */

/* #region Toasts & Notifications */

/* #region Noty (Toast) Customization */

.noty_layout {
    z-index: var(--z-toast) !important;
}

.noty_body {
    border-radius: var(--radius-card);
    padding: 10px;
    cursor: pointer;
}

.noty_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
}

.close {
    background: transparent;
    border: none;
    cursor: pointer;
}

.noty_text {
    padding-top: 10px;
}

.noty_bar {
    box-shadow: none;
}

/* #endregion */

/* #region Notification Dropdown */

.notification-header {
    background-color: var(--color-primary);
    padding-left: 1rem !important;
}

    .notification-header small,
    .notification-header a {
        display: flex;
        align-items: center;
    }

.notification-link {
    font-size: 0.875rem;
    color: var(--text-primary);
    text-decoration: none;
}

    .notification-link:hover {
        color: var(--text-primary);
        text-decoration: underline;
    }

.notification-item-ss,
.notification-item-cc {
    border-bottom: 1px solid gray !important;
}

.notification-item-ss {
    box-shadow: inset 5px 0 0 #9f01f1 !important;
    padding-left: 5px !important;
}

.notification-item-ss:hover {
    background-color: #9567c9;
    border-bottom: 1px solid #9f01f1 !important;
}

.notification-item-cc {
    box-shadow: inset 5px 0 0 #268bd2 !important;
    padding-left: 5px !important;
}

    .notification-item-cc:hover {
        background-color: rgba(38, 139, 210, 0.3);
        border-bottom: 1px solid #268bd2 !important;
    }

#notificationDropdown .col-12 {
    transition: all var(--transition-normal);
}

/* #endregion */

/* #endregion /Toasts & Notifications */

/* #region Tooltips */

.ui-tooltip {
    border-right: 2px solid var(--color-primary) !important;
    border-bottom: 2px solid var(--color-primary) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-primary);
    background-color: black;
}

    .ui-tooltip .ui-tooltip-content {
        font-size: 0.75rem;
        text-align: left;
        box-shadow: -5px -5px 15px -3px #fff;
        padding: 10px;
    }

@media (max-width: 767.98px) {
    .ui-tooltip .ui-tooltip-content {
        max-height: 65vh;
        overflow-y: auto;
        overflow-x: hidden;
        text-align: left;
    }
}

.tooltip-icon-black {
    color: var(--text-primary) !important;
    cursor: pointer !important;
}

    .tooltip-icon-black:hover,
    .tooltip-icon-black:active {
        color: black !important;
        cursor: pointer !important;
    }

.tooltip-icon-ss {
    color: var(--text-primary) !important;
    cursor: pointer !important;
}

    .tooltip-icon-ss:hover,
    .tooltip-icon-ss:active {
        color: var(--color-primary) !important;
        cursor: pointer !important;
    }

/* #endregion /Tooltips */

/* #region Alerts */

.alert .close,
.alert .icon-cancel-circle2 {
    z-index: var(--z-base) !important;
}

/* #endregion /Alerts */

/* #region Navigation */

/* #region Navbar */

.navbar {
    white-space: nowrap;
}

.navbar-height {
    height: 4rem !important;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.navbar-toggler {
    -webkit-tap-highlight-color: transparent !important;
}

    .navbar-toggler::-moz-focus-inner {
        border: 0 !important;
    }

.navbar-nav-link,
.navbar-nav-link:focus,
.navbar-nav-link:active,
.navbar-nav-link:hover,
.nav-item.show > .navbar-nav-link {
    background-color: transparent !important;
    box-shadow: none !important;
}

.navbar-dark .navbar-nav-link:focus,
.navbar-dark .navbar-nav-link:active,
.navbar-dark .nav-item.show > .navbar-nav-link {
    background-color: inherit !important;
}

.navbar-nav.flex-row {
    align-items: center;
}

    .navbar-nav.flex-row > .nav-item {
        display: flex;
        align-items: center;
    }

        .navbar-nav.flex-row > .nav-item > .navbar-nav-link,
        .navbar-nav.flex-row > .nav-item > a.navbar-nav-link,
        .navbar-nav.flex-row > .nav-item > button,
        .navbar-nav.flex-row > .nav-item > form > button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 3rem;
            line-height: 1;
        }

    .navbar-nav.flex-row .dropdown-menu .btn,
    .navbar-nav.flex-row .dropdown-menu .dropdown-item {
        height: auto;
        display: block;
    }

    .navbar-nav.flex-row i {
        line-height: 1;
    }

#navbarEmergencyDropdown:hover,
#navbarAppsDropdown:hover,
#navbarSocialDropdown:hover,
#navbarProfileDropdown {
    background-color: #32333a !important;
}

    #navbarEmergencyDropdown:hover,
    #navbarAppsDropdown:hover,
    #navbarSocialDropdown:hover,
    #navbarProfileDropdown:hover {
        background-color: var(--bg-hover-alt) !important;
    }

.dropdown.show > #navbarEmergencyDropdown,
.dropdown.show > #navbarAppsDropdown,
.dropdown.show > #navbarSocialDropdown,
.dropdown.show > #navbarNotificationsDropdown,
.dropdown.show > #navbarProfileDropdown {
    background-color: var(--bg-hover-alt) !important;
}

.custom-underline {
    display: inline-block;
    border-bottom: 3px solid var(--color-primary) !important;
    padding-bottom: 2px;
}

.nav-item-single .active {
    background-color: var(--color-primary) !important;
}

.navbar-nav-link:hover {
    background-color: var(--bg-hover-alt) !important;
}

.cc-avatar.cc-avatar--nav {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
    flex: 0 0 28px;
}

.cc-avatar--nav .cc-avatar-icon {
    font-size: 30px;
    top: 1px;
}

.cc-avatar--nav .cc-avatar-initial {
    top: 8px;
    font-size: 9px;
}

#navbarNotificationsDropdown,
#navbarProfileDropdown {
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem !important;
}

#navbarNotificationsDropdown {
    padding-right: 1rem !important;
}

#navbarSignUpButton,
#navbarSignInButton,
#navbarSignOutButton {
    height: 1.7rem;
}

    #navbarSignUpButton .btn-text,
    #navbarSignInButton .btn-text,
    #navbarSignOutButton .btn-text {
        margin-bottom: 0.25rem;
    }

/* #endregion */

/* #region Sidebar */

.nav-sidebar .nav-link.active {
    background-color: var(--color-primary) !important;
    color: var(--text-primary) !important;
}

    .nav-sidebar .nav-link.active i,
    .nav-sidebar .nav-link.active span {
        color: var(--text-primary) !important;
    }

.ss-icon-active {
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 2px;
}

.navbar-brand img {
    height: 1.5rem;
}

.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .navbar-brand img {
    padding: 0;
    margin: 0;
    position: relative;
    right: 14px;
    height: 2rem;
}

.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-section-body {
    padding-left: 10px;
    padding-right: 10px;
}

.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link .sidebar-img {
    margin-left: 0;
    margin-right: 0;
}

.nav-sidebar .nav-item .nav-link .sidebar-img {
    width: 1rem;
    margin-right: 1.25rem;
    margin-top: 0.1875rem;
    margin-bottom: 0.1875rem;
    top: 0;
    line-height: 1;
    min-width: 1em;
    display: inline-block;
    text-align: center;
    font-size: 1rem;
    vertical-align: middle;
    position: relative;
}

/* Collapsed (icon-only) left sidebar: center the brand and profile within the
   3.5rem column. Wrapped in @media (min-width:1200px) so it ONLY applies on desktop.
   sidebar-main-resized is baked into the markup as the desktop default and is present
   at every viewport width, so without this media gate these rules would also hide the
   brand text and shrink the profile when the sidebar is opened on mobile. The native
   Limitless resized rules are already desktop-scoped; these custom rules must match. */
@media (min-width: 1200px) {

/* Brand: strip the px-3 off the brand navbar so the 56px column is fully available.
   The brand navbar is the first direct child of .sidebar-main, so target it with the
   child combinator instead of :has() — centering must not depend on :has() support. */
.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) > .navbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
}
/* Brand: center the brand block and hide the text label */
.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) #leftSidebarBrand {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) #leftSidebarBrandLink {
    justify-content: center !important;
}
.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) #leftSidebarBrand h4 {
    display: none !important;
}
.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) #leftSidebarBrand img {
    margin: 0 !important;
}

/* Profile: clear stacked paddings so the 56px sidebar width is available for centering. */
.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-section-body {
    padding: 0 !important;
}
.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .user-menu-vertical .d-flex {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    min-height: 48px;
}

/* Profile: reinforce hiding of name/dropdown text — theme rule lacks !important */
.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-resize-hide {
    display: none !important;
}

/* Profile: shrink the 64px avatar/photo to a 32px circle. NO display:block — it would
   override Bootstrap d-none when the user has no uploaded photo, rendering both. */
.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) #loginPartialProfilePic {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) #loginPartialAvatar {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .cc-avatar-icon {
    font-size: 32px !important;
    top: 2px !important;
}
.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .cc-avatar-initial {
    font-size: 10px !important;
    top: 7px !important;
}

/* Collapsed sidebar: hide scrollbar while preserving scroll functionality */
.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-content {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-content::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

} /* end @media (min-width: 1200px) — desktop-only collapsed brand/profile centering */

/* #endregion */

/* #region Emergency Numbers */

/* Force intro text to wrap properly */
.emergency-intro,
.emergency-intro small {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Prevent parent flex/nowrap rules from breaking wrapping */
.emergency-menu {
    white-space: normal !important;
}

/* Keep desktop behavior */
/*.emergency-menu {
    width: 22rem;
    max-width: 95vw;
    min-width: 18rem;
}*/

/* Prevent text/columns from forcing overflow */
.emergency-link .emergency-text {
    min-width: 0;
}

.emergency-link .font-weight-semibold,
.emergency-link small {
    white-space: normal;
    word-break: break-word;
}

.emergency-number {
    white-space: nowrap;
}

/* Give dropdown a max height and allow scroll */
.emergency-menu .dropdown-content-body {
    max-height: min(80vh, 620px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* TRUE mobile: full-width fixed dropdown */
@media (max-width: 575.98px) {
    .emergency-menu.dropdown-menu {
        /*position: fixed !important;*/
        /*left: 0 !important;*/
        /*right: 0 !important;*/
        /* Set this to your navbar height */
        /*top: 56px !important;*/
        /*width: 100vw !important;*/
        /*max-width: 100vw !important;*/
        /*min-width: 0 !important;*/
        /*margin: 0 !important;*/
        transform: none !important;
        border-radius: 0 !important;
    }
}

/* #endregion /Emergency Numbers */

/* #endregion /Navigation */

/* #region View / Page Specific Styles */

/* #region Home Page */

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1vh;
}

.main-logo {
    width: 280px;
    height: 150px;
    max-width: 100%;
    max-height: 100%;
}

.image-container {
    position: relative;
    display: inline-block;
}

.overlay-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-primary);
}

#navbar-footer a:hover {
    color: var(--color-primary);
}

/* #endregion */

/* #region Login / Logout */

#logIn,
#primaryLogoutButton {
    box-shadow: var(--shadow-md);
}

    #logIn:active,
    #primaryLogoutButton:active {
        box-shadow: var(--shadow-md);
    }

/* #endregion */

/* #region My Profile */

.sticky-login {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-card);
    border-bottom: 0.1rem solid #555 !important;
}

#loginPartialProfilePic {
    width: 80px;
    height: 80px;
    object-fit: cover;
    transition: width var(--transition-normal), height var(--transition-normal);
}

#imageContainer,
#fullEditImageContainer {
    width: 100%;
    height: 400px;
    overflow: hidden;
    background-color: #f0f0f0;
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

#imageToCrop,
#fullEditImageToCrop {
    width: 100%;
    height: auto;
}

#croppedImageContainer,
#fullEditCroppedImageContainer {
    width: 275px;
    height: 275px;
    background-color: #f0f0f0;
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

#croppedImage,
#fullEditCroppedImage {
    width: 275px;
    height: 275px;
}

/* #endregion */

/* #region Organizations / Users / Roles / Permissions / FFCs (Common Layout) */

.container-static,
#soberSoftAccountSettings,
#soberSoftLogs,
#soberSoftNotifications,
#abacusDashboard,
#abacusJournalEntries,
#abacusAccounts,
#abacusBusinesses,
#soberSoftOrganizations,
#soberSoftUsers,
#soberSoftRoles,
#soberSoftPermissions,
#soberSoftFfcs {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    /*overflow-x: hidden;*/
    padding: 1.5rem;
}

@media (max-width: 768px) {
    .container-static,
    #soberSoftAccountSettings,
    #soberSoftLogs,
    #soberSoftNotifications,
    #soberSoftOtherSupport,
    #soberSoftDonations,
    #abacusDashboard,
    #abacusJournalEntries,
    #abacusAccounts,
    #abacusBusinesses,
    #soberSoftOrganizations,
    #soberSoftUsers,
    #soberSoftRoles,
    #soberSoftPermissions,
    #soberSoftFfcs {
        padding-top: 0;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-bottom: 1.25rem;
    }

        .container-static h2,
        #soberSoftAccountSettings h2,
        #soberSoftLogs h2,
        #soberSoftNotifications h2,
        #soberSoftOtherSupport h2,
        #soberSoftDonations h2,
        #abacusDashboard h2,
        #abacusAccounts h2,
        #abacusJournalEntries h2,
        #abacusBusinesses h2,
        #soberSoftOrganizations h2,
        #soberSoftUsers h2,
        #soberSoftRoles h2,
        #soberSoftPermissions h2,
        #soberSoftFfcs h2 {
            font-size: 1rem;
        }
}

.dt-list-card {
    flex: 1;
    min-height: 0;
    box-shadow: none !important;
}

/* Export Icons */
#soberSoftServerLogsRightControls .dropdown-toggle i,
#soberSoftAuditLogsRightControls .dropdown-toggle i,
#soberSoftNotificationsRightControls .dropdown-toggle i,
#abacusJournalEntriesRightControls .dropdown-toggle i,
#abacusAccountsRightControls .dropdown-toggle i,
#abacusBusinessesRightControls .dropdown-toggle i,
#soberSoftOrganizationRightControls .dropdown-toggle i,
#soberSoftUsersRightControls .dropdown-toggle i,
#soberSoftRoleRightControls .dropdown-toggle i,
#soberSoftPermissionRightControls .dropdown-toggle i,
#soberSoftFfcRightControls .dropdown-toggle i {
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

#soberSoftServerLogsRightControls .dropdown-toggle:hover i,
#soberSoftAuditLogsRightControls .dropdown-toggle:hover i,
#soberSoftNotificationsRightControls .dropdown-toggle:hover i,
#abacusJournalEntriesRightControls .dropdown-toggle:hover i,
#abacusAccountsRightControls .dropdown-toggle:hover i,
#abacusBusinessesRightControls .dropdown-toggle:hover i,
#soberSoftOrganizationRightControls .dropdown-toggle:hover i,
#soberSoftUsersRightControls .dropdown-toggle:hover i,
#soberSoftRoleRightControls .dropdown-toggle:hover i,
#soberSoftPermissionRightControls .dropdown-toggle:hover i,
#soberSoftFfcRightControls .dropdown-toggle:hover i {
    color: var(--color-primary);
}

/* Search Boxes */
#soberSoftServerLogsCustomSearchBox,
#soberSoftAuditLogsCustomSearchBox,
#notifications_SearchBox,
#abacusJournalEntriesCustomSearchBox,
#abacusAccountsCustomSearchBox,
#abacusBusinessesCustomSearchBox,
#soberSoftOrganizationCustomSearchBox,
#soberSoftUsersCustomSearchBox,
#soberSoftRoleCustomSearchBox,
#soberSoftPermissionCustomSearchBox,
#soberSoftFfcCustomSearchBox {
    flex: 1 1 auto;
}

    #soberSoftServerLogsCustomSearchBox .dataTables_filter,
    #soberSoftServerLogsCustomSearchBox .dataTables_filter label,
    #soberSoftAuditLogsCustomSearchBox .dataTables_filter,
    #soberSoftAuditLogsCustomSearchBox .dataTables_filter label,
    #notifications_SearchBox, .dataTables_filter,
    #notifications_SearchBox, .dataTables_filter label,
    #abacusJournalEntriesCustomSearchBox .dataTables_filter,
    #abacusJournalEntriesCustomSearchBox .dataTables_filter label,
    #abacusAccountsCustomSearchBox .dataTables_filter,
    #abacusAccountsCustomSearchBox .dataTables_filter label,
    #abacusBusinessesCustomSearchBox .dataTables_filter,
    #abacusBusinessesCustomSearchBox .dataTables_filter label,
    #soberSoftOrganizationCustomSearchBox .dataTables_filter,
    #soberSoftOrganizationCustomSearchBox .dataTables_filter label,
    #soberSoftUsersCustomSearchBox .dataTables_filter,
    #soberSoftUsersCustomSearchBox .dataTables_filter label,
    #soberSoftRoleCustomSearchBox .dataTables_filter,
    #soberSoftRoleCustomSearchBox .dataTables_filter label,
    #soberSoftPermissionCustomSearchBox .dataTables_filter,
    #soberSoftPermissionCustomSearchBox .dataTables_filter label,
    #soberSoftFfcCustomSearchBox .dataTables_filter,
    #soberSoftFfcCustomSearchBox .dataTables_filter label {
        width: 100%;
        display: block;
    }

        #soberSoftServerLogsCustomSearchBox .dataTables_filter input[type="search"],
        #soberSoftAuditLogsCustomSearchBox .dataTables_filter input[type="search"],
        #notifications_SearchBox, .dataTables_filter input[type="search"],
        #abacusJournalEntriesCustomSearchBox .dataTables_filter input[type="search"],
        #abacusAccountsCustomSearchBox .dataTables_filter input[type="search"],
        #abacusBusinessesCustomSearchBox .dataTables_filter input[type="search"],
        #soberSoftOrganizationCustomSearchBox .dataTables_filter input[type="search"],
        #soberSoftUsersCustomSearchBox .dataTables_filter input[type="search"],
        #soberSoftRoleCustomSearchBox .dataTables_filter input[type="search"],
        #soberSoftPermissionCustomSearchBox .dataTables_filter input[type="search"],
        #soberSoftFfcCustomSearchBox .dataTables_filter input[type="search"] {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box;
        }

/* Length Control Spacing */
#soberSoftUsersCustomTableLength {
    margin-left: 0.75rem;
    display: flex;
    align-items: center;
}

#soberSoftUsersRightControls .datatable-filters-wrapper {
    margin-right: 0.6rem;
}

/* Desktop Layout */
@media (min-width: 768px) {
    #soberSoftServerLogsControls,
    #soberSoftAuditLogsControls,
    #soberSoftNotificationsControls,
    #abacusJournalEntriesControls,
    #abacusAccountsControls,
    #abacusBusinessesControls,
    #soberSoftOrganizationControls,
    #soberSoftUsersControls,
    #soberSoftRoleControls,
    #soberSoftPermissionControls,
    #soberSoftFfcControls {
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: flex-start;
    }

    #soberSoftServerLogsLeftControls,
    #soberSoftAuditLogsLeftControls,
    #soberSoftNotificationsLeftControls,
    #abacusJournalEntriesLeftControls,
    #abacusAccountsLeftControls,
    #abacusBusinessesLeftControls,
    #soberSoftOrganizationLeftControls,
    #soberSoftUsersLeftControls,
    #soberSoftRoleLeftControls,
    #soberSoftPermissionLeftControls,
    #soberSoftFfcLeftControls {
        width: auto !important;
        margin-bottom: 0 !important;
        flex: 1 1 auto;
    }

    #soberSoftServerLogsRightControls,
    #soberSoftAuditLogsRightControls,
    #soberSoftNotificationsRightControls,
    #abacusJournalEntriesRightControls,
    #abacusAccountsRightControls,
    #abacusBusinessesRightControls,
    #soberSoftOrganizationRightControls,
    #soberSoftUsersRightControls,
    #soberSoftRoleRightControls,
    #soberSoftPermissionRightControls,
    #soberSoftFfcRightControls {
        width: auto !important;
        margin-bottom: 0 !important;
        margin-left: 1rem;
    }

        #soberSoftServerLogsRightControls span.text-muted,
        #soberSoftAuditLogsRightControls span.text-muted,
        #soberSoftNotificationsRightControls span.text-muted,
        #abacusJournalEntriesRightControls span.text-muted,
        #abacusAccountsRightControls span.text-muted,
        #abacusBusinessesRightControls span.text-muted,
        #soberSoftOrganizationRightControls span.text-muted,
        #soberSoftUsersRightControls span.text-muted,
        #soberSoftRoleRightControls span.text-muted,
        #soberSoftPermissionRightControls span.text-muted,
        #soberSoftFfcRightControls span.text-muted {
            display: none !important;
        }
}

@media (max-width: 767px) {
    #soberSoftServerLogsControls span.text-muted,
    #soberSoftAuditLogsControls span.text-muted,
    #soberSoftNotificationsControls span.text-muted,
    #abacusAccountsJournalEntriesControls span.text-muted,
    #abacusAccountsRightControls span.text-muted,
    #abacusBusinessesRightControls span.text-muted,
    #soberSoftOrganizationRightControls span.text-muted,
    #soberSoftUsersRightControls span.text-muted,
    #soberSoftRoleRightControls span.text-muted,
    #soberSoftPermissionRightControls span.text-muted,
    #soberSoftFfcRightControls span.text-muted {
        display: inline-block !important;
    }
}

/* #endregion */

/* #region Users (Profile Pics & Avatars) */

#usersListCard .profile-pic-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#usersListCard .profile-pic-container {
    position: relative;
    display: inline-block;
}

#usersListCard .profile-pic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
}

.status-indicator.online,
.users-status-dot.online {
    background-color: #28a745;
}

.status-indicator.offline,
.users-status-dot.offline {
    background-color: var(--color-danger-alt);
}

.status-indicator {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--text-primary);
}

.users-avatar-wrap {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.users-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 30%, rgba(255, 105, 180, 0.55), rgba(168, 85, 247, 0.45) 35%, rgba(32, 12, 48, 0.95) 70%), radial-gradient(circle at 70% 70%, rgba(236, 72, 153, 0.45), rgba(18, 8, 30, 0.98) 65%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), var(--shadow-inset);
}

    .users-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.users-avatar-icon {
    font-size: 44px;
    color: #0b0b0b;
    opacity: 0.92;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
}

.users-avatar-initial {
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 800;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    user-select: none;
    pointer-events: none;
}

.users-status-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    right: -2px;
    bottom: -2px;
    border: 2px solid var(--text-primary);
    background: var(--color-danger-alt);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    z-index: 5;
}

.tune-user-dropdown .dropdown-menu,
body > .dropdown-menu {
    width: auto !important;
    min-width: 220px !important;
    max-width: 220px !important;
}

.tune-user-dropdown .dropdown-item {
    white-space: nowrap;
    padding: 0.55rem 1rem;
}

/* #endregion */

/* #region Roles Modal */

/**
 * SoberSoft Role Modal Layout
 * Supports two UX modes:
 * (A) EDIT mode (modal-xl): Full-height modal with internal scrolling
 * (B) ADD mode (modal-lg): Standard overflow for Select2 dropdowns
 */

#soberSoftRoleModal .modal-dialog.modal-xl {
    height: calc(100vh - 3.5rem);
}

    #soberSoftRoleModal .modal-dialog.modal-xl .modal-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #soberSoftRoleModal .modal-dialog.modal-xl .modal-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }

#soberSoftRoleModal .modal-dialog:not(.modal-xl) .modal-content,
#soberSoftRoleModal .modal-dialog:not(.modal-xl) .modal-body {
    overflow: visible;
}

#soberSoftRoleForm {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.role-form-top {
    flex: 0 0 auto;
    overflow: visible;
}

.role-permissions-flex {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.role-permissions-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: var(--bg-element-alt);
}

.role-permissions-search {
    flex: 0 0 auto;
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid var(--border-medium);
    background: var(--bg-element-alt);
}

    .role-permissions-search input {
        width: 100%;
    }

.role-permissions-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.role-permissions-scroll {
    height: 100%;
    overflow-y: auto;
}

#rolePermissionsTable thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #1f2127;
}

#rolePermissionsTable th.checkbox-col,
#rolePermissionsTable td.checkbox-col {
    width: 50px;
    padding: 0 !important;
    text-align: center;
    vertical-align: middle !important;
}

    #rolePermissionsTable th.checkbox-col > div,
    #rolePermissionsTable td.checkbox-col > div {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* #endregion */

/* #region Role Permissions Grid (Standalone / Full Implementation) */

/**
 * Role Permissions Grid
 * Provides sticky header with horizontal + vertical scrolling
 */

#rolePermissionsGrid.role-permissions-grid {
    height: 100%;
    min-height: 0;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-element-alt) !important;
}

#rolePermissionsGrid .role-permissions-scroll {
    height: 100%;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-element-alt) !important;
    position: relative;
    padding: 0 !important;
}

#rolePermissionsGrid .role-permissions-table {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    margin-top: 0 !important;
    border: none !important;
    border-collapse: collapse;
    border-spacing: 0;
}

#rolePermissionsGrid thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-darker);
    background-clip: padding-box;
}

#rolePermissionsGrid thead,
#rolePermissionsGrid thead tr {
    margin: 0 !important;
    padding: 0 !important;
}

#rolePermissionsGrid .role-permissions-table thead th {
    border-top: none !important;
    top: -1px !important;
}

#rolePermissionsGrid .role-permissions-table th,
#rolePermissionsGrid .role-permissions-table td {
    border: 1px solid var(--border-medium) !important;
}

#rolePermissionsGrid .perm-checkbox-th,
#rolePermissionsGrid .perm-checkbox-td {
    padding: 0 !important;
    text-align: center;
    vertical-align: middle !important;
}

#rolePermissionsGrid .perm-checkbox-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 100%;
}

#rolePermissionsGrid .form-check-input {
    position: static !important;
    margin: 0 !important;
}

#rolePermissionsGrid .role-permissions-search-bottom {
    flex: 0 0 auto;
    padding: .35rem .5rem;
    border-top: 1px solid var(--border-medium);
    background: var(--bg-element-alt);
}

    #rolePermissionsGrid .role-permissions-search-bottom input {
        height: 28px;
        font-size: .85rem;
    }

/* #endregion */

/* #region Accounting - Dashboard */

/* #region Badges */
.badge-ss {
    background-color: #9f01f1 !important;
}

.badge-dark-green {
    background-color: #1a7f1c !important;
}

#abacusDashboard .badge-success {
    background-color: #43e97b !important;
}
/* #endregion /Badges */

/* #region hr */
.hr-ss-5 {
    color: #9f01f1;
    background-color: #9f01f1;
    height: 5px;
    margin: 0;
    padding: 0;
    border: none;
}
/* #endregion /hr */

/* #region Cards */

/* #endregion /Cards */

/* #region Buttons */
.button-ss, .btn-ss {
    background-color: #9f01f1 !important;
    border-color: #9f01f1 !important;
}

#abacusDashboard .btn-primary {
    background-color: #9f01f1;
    border-color: #9f01f1;
}

#abacusDashboard .btn-outline-success {
    border-color: #43e97b !important;
}

    #abacusDashboard .btn-outline-success:hover {
        background-color: #43e97b !important;
    }
/* #endregion /Buttons */

/* #region Icons */
.custom-underline-ss {
    display: inline-block; /* Important for border-bottom to work properly */
    border-bottom: 3px solid #9f01f1 !important; /* Thicker, red underline */
    padding-bottom: 2px; /* Space between text and underline */
}
/* #endregion /Icons */

/* #region Forms */
/* Background color of calendar picker */
#abacusJournalEntries .picker--focused .picker__day--highlighted,
#abacusJournalEntries .picker__day--highlighted {
    background-color: #9f01f1 !important;
}

#abacusJournalEntries .input-with-picker-open {
    border-bottom: 1px solid #9f01f1 !important;
}

#abacusDashboard input:focus,
#abacusDashboard textarea:focus,
#abacusDashboard select:focus,
#abacusJournalEntries input:focus,
#abacusJournalEntries textarea:focus,
#abacusJournalEntries select:focus,
#abacusAccounts input:focus,
#abacusAccounts textarea:focus,
#abacusAccounts select:focus,
#abacusAccountTypes input:focus,
#abacusAccountTypes textarea:focus,
#abacusAccountTypes select:focus,
#abacusBusinesses input:focus,
#abacusBusinesses textarea:focus,
#abacusBusinesses select:focus {
    outline: none !important;
    border-left-color: #202125 !important;
    border-top-color: #202125 !important;
    border-right-color: #202125 !important;
    border-bottom-color: #9f01f1 !important;
}
/* #endregion /Forms */

/* #region Select2 */
/* normally no bottom border */
#abacusDashboardSelectBusiness .select2-container--default .select2-selection--single,
#abacusDashboard .select2-container--default .select2-selection--single,
#abacusBusinesses .select2-container--default .select2-selection--single,
#abacusAccountTypesSelectBusiness .select2-container--default .select2-selection--single,
#abacusAccountTypes .select2-container--default .select2-selection--single,
#abacusAccountsSelectBusiness .select2-container--default .select2-selection--single,
#abacusAccounts .select2-container--default .select2-selection--single,
#abacusJournalEntriesSelectBusiness .select2-container--default .select2-selection--single,
#abacusJournalEntries .select2-container--default .select2-selection--single {
    border: none !important;
    box-shadow: none !important;
}

    /* Bottom border on focus */
    #abacusDashboardSelectBusiness .select2-container--default .select2-selection--single:focus,
    #abacusDashboard .select2-container--default .select2-selection--single:focus,
    #abacusBusinesses .select2-container--default .select2-selection--single:focus,
    #abacusAccountTypesSelectBusiness .select2-container--default .select2-selection--single:focus,
    #abacusAccountTypes .select2-container--default .select2-selection--single:focus,
    #abacusAccountsSelectBusiness .select2-container--default .select2-selection--single:focus,
    #abacusAccounts .select2-container--default .select2-selection--single:focus,
    #abacusJournalEntriesSelectBusiness .select2-container--default .select2-selection--single:focus,
    #abacusJournalEntries .select2-container--default .select2-selection--single:focus {
        border-bottom-color: #9f01f1 !important;
        box-shadow: none;
    }

/* only show bottom-border when open */
#abacusDashboardSelectBusiness .select2-container--open .select2-selection--single,
#abacusDashboard .select2-container--open .select2-selection--single,
#abacusBusinesses .select2-container--open .select2-selection--single,
#abacusAccountTypesSelectBusiness .select2-container--open .select2-selection--single,
#abacusAccountTypes .select2-container--open .select2-selection--single,
#abacusAccountsSelectBusiness .select2-container--open .select2-selection--single,
#abacusAccounts .select2-container--open .select2-selection--single,
#abacusJournalEntriesSelectBusiness .select2-container--open .select2-selection--single,
#abacusJournalEntries .select2-container--open .select2-selection--single {
    border-bottom: 1px solid #9f01f1 !important;
    box-shadow: none !important;
}

/* Background color when an option is selected */
#abacusDashboardSelectBusiness .select2-container--default .select2-results__option[aria-selected=true],
#abacusDashboard .select2-container--default .select2-results__option[aria-selected=true],
#abacusBusinesses .select2-container--default .select2-results__option[aria-selected=true],
#abacusAccountTypesSelectBusiness .select2-container--default .select2-results__option[aria-selected=true],
#abacusAccountTypes .select2-container--default .select2-results__option[aria-selected=true],
#abacusAccountsSelectBusiness .select2-container--default .select2-results__option[aria-selected=true],
#abacusAccounts .select2-container--default .select2-results__option[aria-selected=true],
#abacusJournalEntriesSelectBusiness .select2-container--default .select2-results__option[aria-selected=true],
#abacusJournalEntries .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #9f01f1 !important;
}
/* #endregion /Select2 */

/* #region Charts */

/* P/L Statement & Cash Flow Waterfall — white axis text and lines */
#incomeStatementBarChart text,
#cashflowWaterfallChart text {
    fill: #fff;
}

#incomeStatementBarChart .domain,
#incomeStatementBarChart .tick line,
#cashflowWaterfallChart .domain,
#cashflowWaterfallChart .tick line {
    stroke: #fff;
}

/* #endregion /Charts */

/* #region Tables */

/* Override Bootstrap table-striped */
#balanceSheetTableBody tr:nth-child(odd) td,
#balanceSheetTableBody tr:nth-child(odd) {
    background-color: #43464e !important;
    color: #fff;
    border-color: #2c2d33;
}

#balanceSheetTableBody tr:nth-child(even) td,
#balanceSheetTableBody tr:nth-child(even) {
    background-color: #3a3d45 !important;
    color: #fff;
    border-color: #2c2d33;
}

#balanceSheetTableBody tr:nth-child(odd) td,
#balanceSheetTableBody tr:nth-child(odd) {
    background-color: #43464e !important;
    color: #fff;
    border-color: #2c2d33;
}

#balanceSheetTableBody tr:nth-child(even) td,
#balanceSheetTableBody tr:nth-child(even) {
    background-color: #3a3d45 !important;
    color: #fff;
    border-color: #2c2d33;
}

/* Header */
#balanceSheetTableCard thead tr th {
    background-color: #1d1e21 !important;
    color: #fff !important;
    border-color: #2c2d33;
}

/* Hover */
#balanceSheetTableBody tr:hover td {
    background-color: #9f01f1 !important;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* #endregion /Tables */

/* #region Pickers */

/* #region flatpickr */
/* Change main calendar background */
.flatpickr-calendar {
    background: #1e2327;
    color: #fff;
}

/* Change header color */
.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-month .flatpickr-current-month {
    background: #9f01f1 !important;
}

.flatpickr-monthDropdown-months,
.flatpickr-monthDropdown-month {
    background: #9f01f1 !important;
}

/* Change day-of-week bar */
.flatpickr-weekdays,
.flatpickr-weekdaycontainer,
span.flatpickr-weekday {
    background: #9f01f1 !important;
    background-color: #9f01f1 !important;
    color: #2c2d33 !important;
}

/* Optional: change individual day names color */
.flatpickr-weekday {
    color: white !important;
}

/* Change selected date color */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus {
    background: #9f01f1 !important;
    color: #fff;
    border-color: #9f01f1 !important;
}

/* Change today's highlight */
.flatpickr-day.today {
    border-color: #03a9f4;
}

/* Remove border around month & year */
.flatpickr-current-month,
.flatpickr-current-month input,
.flatpickr-monthDropdown-months,
.flatpickr-monthDropdown-month {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

    /* Remove border from year input specifically */
    .flatpickr-current-month .numInputWrapper input {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

/* Remove dropdown arrow border (if visible) */
.flatpickr-monthDropdown-months {
    border: none !important;
}
/* #endregion /flatpickr */

/* #endregion /Pickers */

/* #endregion /Accounting - Dashboard */

/* #region Accounting - Journal Entries */

#abacusJournalEntriesTable tbody tr.shown td {
    background-color: #9d6dd4  !important;
}

/* #endregion  - Journal Entries */

/* #region Reviews */

#reviewForm .icon-star-full2 {
    font-size: 2rem;
    padding-right: 5px;
}

.star-filled {
    color: gold;
}

.review-card {
    background-color: white;
    border-right: 3px solid var(--color-primary) !important;
    border-bottom: 3px solid var(--color-primary) !important;
    color: black;
    height: 400px;
    display: flex;
    flex-direction: column;
}

.review-username {
    font-weight: 600;
}

.review-date {
    font-size: 0.7rem;
    color: gray;
}

#soberSoftReviews .card-header {
    background-color: var(--bg-dark) !important;
    margin-bottom: 10px;
    border: none;
}

#soberSoftReviews .card-title {
    color: var(--text-primary);
}

#soberSoftReviews .card-footer {
    background-color: #ccc;
    border-top: 2px solid var(--bg-dark);
    margin-top: 10px;
}

.review-content {
    color: var(--bg-dark);
    flex: 1 1 auto;
    overflow: auto;
}

.review-star {
    font-size: 1rem;
}

.review-quote-icon {
    font-size: 2rem;
    color: var(--color-primary);
    opacity: 0.4;
}

/* #endregion */

/* #region CKEditor Customization */

.ck-editor__editable {
    background-color: var(--bg-darkest) !important;
    color: var(--text-primary) !important;
    height: 500px;
    overflow-y: auto;
}

.ck.ck-toolbar {
    border: none !important;
    outline: none !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: -4px !important;
    margin-right: -4px !important;
    width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.ck.ck-toolbar__items {
    background-color: var(--color-primary) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-grow: 1 !important;
    overflow: visible !important;
}

.ck.ck-button {
    color: var(--text-primary) !important;
}

    .ck.ck-button:hover,
    .ck.ck-button:focus,
    .ck.ck-button:active {
        background-color: var(--bg-darkest) !important;
        color: var(--text-primary) !important;
    }

    .ck.ck-button.ck-on,
    a.ck.ck-button.ck-on {
        background-color: var(--bg-darkest) !important;
        color: var(--text-primary) !important;
    }

.ck.ck-icon {
    color: var(--text-primary) !important;
}

.ck-heading-dropdown .ck-list {
    color: var(--bg-darkest) !important;
}

    .ck-heading-dropdown .ck-list .ck-button {
        color: var(--bg-darkest) !important;
    }

        .ck-heading-dropdown .ck-list .ck-button:hover,
        .ck-heading-dropdown .ck-list .ck-button.ck-on {
            background-color: var(--bg-darkest) !important;
            color: var(--text-primary) !important;
        }

.ck.ck-content {
    border: none !important;
    border-radius: 4px !important;
    outline: none !important;
    margin-left: -4px !important;
    margin-right: -4px !important;
}

    .ck.ck-content:focus {
        border-bottom: 1px solid var(--color-primary) !important;
    }

    .ck.ck-content p {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .ck.ck-content blockquote {
        background-color: var(--color-primary) !important;
    }

.ck.ck-powered-by-balloon {
    display: none !important;
}

.ck-focused .ck-placeholder {
    display: none !important;
}

.ck-editor__top {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* #endregion */

/* #region Request Success Modal */

#successfullySubmittedNewRequestModal .modal-body {
    border-right: 2px solid var(--color-primary) !important;
    border-bottom: 2px solid var(--color-primary) !important;
    border-left: 1px solid white !important;
    border-top: 1px solid white !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-primary);
    background-color: black;
    font-weight: 400;
}

#successfullySubmittedNewRequestModal .close {
    color: black;
}

    #successfullySubmittedNewRequestModal .close:hover {
        color: var(--text-primary);
    }

#successModalGotoMyRequestsTab:hover,
#successModalGotoAllRequestsTab:hover {
    cursor: pointer;
    color: var(--color-primary);
    font-weight: bolder;
    font-size: 1.1rem;
}

/* #endregion */

/* #region Notifications */
/* apply only while hovering an active row */
tr.active-row:hover > td {
    border-bottom: 1px solid var(--row-accent, transparent) !important;
}

.custom-row-hover td {
    background-color: red !important;
    border-top: 1px solid #9f01f1 !important;
    /*border-bottom: 1px solid #9f01f1 !important;*/
    /*padding-right: 5px;*/
}

.custom-row-hover td:last-child {
    /*border-right: 1px solid #9f01f1 !important;*/
}

.custom-row-hover td:first-child {
    box-shadow: inset 5px 0 0 #9f01f1 !important; /* your left accent */
}

/* Content column wrap */
#soberSoftNotificationsTable td.dt-wrap-content {
    white-space: normal !important; /* allow wrapping */
    overflow-wrap: anywhere; /* break long strings */
    word-break: break-word; /* fallback for older browsers */
}

/* optional: keep header from wrapping */
#soberSoftNotificationsTable th {
    white-space: nowrap;
}

#soberSoftNotificationsTable tbody td:nth-child(3) {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* #endregion /Notifications */

/* #region Logger */

#loggerClientTable i {
    color: var(--text-primary);
}

    #loggerClientTable i:hover {
        color: var(--text-primary);
        padding-bottom: 3px;
        border-bottom: 2px solid var(--text-primary);
    }

#loggerTabs .nav-link.active,
#logModalTabs .nav-link.active {
    border-bottom: 2px solid var(--color-primary) !important;
    color: var(--text-primary);
}

/* #endregion */

/* #endregion /View / Page Specific Styles */

/* #region RESPONSIVE: Mobile Devices */

/* Mobile — remove all button focus and hover styles */
@media (hover: none), (pointer: coarse) {
    /*i:focus,
    i:hover,
    i:active {
        color: white !important;
    }*/

    /*i:not(.icon-eye-minus):focus,
    i:not(.icon-eye-minus):hover,
    i:not(.icon-eye-minus):active {
        color: white !important;
    }*/

    /*#@(Id("ShowDeletedButton")).dt-show-deleted-active i:focus,
    #@(Id("ShowDeletedButton")).dt-show-deleted-active i:hover,
    #@(Id("ShowDeletedButton")).dt-show-deleted-active i:active {
        color: #ce4d4a !important;
    }*/
}

@media only screen and (max-width: 767px) {
    /* #region Layout & Containers                                                */
    /* ========================================================================== */
    /* Mobile-only container: full-width, no horizontal padding */
    .container-mobile-only {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Standard navbar height */
    .navbar-height {
        height: 3rem;
    }
    /* #endregion */

    /* #region Navbar Auth Buttons (Sign In / Up / Out)                            */
    /* ========================================================================== */
    /* Icon-only navbar auth buttons: square, centered content */
    #navbarSignInButton,
    #navbarSignUpButton,
    #navbarSignOutButton {
        width: 2rem !important;
        height: 2rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0px !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1 !important;
    }

        /* Normalize icon spacing + size inside auth buttons */
        #navbarSignInButton i,
        #navbarSignUpButton i,
        #navbarSignOutButton i {
            padding: 0;
            margin: 0;
            font-size: 1rem;
        }

        /* Hide any text labels in auth buttons (icon-only UI) */
        #navbarSignInButton .btn-text,
        #navbarSignUpButton .btn-text,
        #navbarSignOutButton .btn-text {
            display: none;
        }
    /* #endregion */

    /* #region Save / Cancel / Clear Controls                                     */
    /* ========================================================================== */
    /* Center action row within wrapper */
    #save_cancel_clear_wrapper .row {
        justify-content: center;
    }

    /* Fixed-width action buttons for consistent sizing */
    #saveButton,
    #cancelButton,
    #clearButton {
        max-width: 4rem !important;
        width: 4rem !important;
    }

        /* Slight left offset for icons within the action buttons */
        #saveButton i,
        #cancelButton i,
        #clearButton i {
            margin-left: 0.25rem !important;
        }
    /* #endregion */

    /* #region Filters, Toggles, and Button States                                */
    /* ========================================================================== */
    /* Remove dropdown shadow for cleaner/flat appearance */
    #filterDropdown {
        box-shadow: none !important;
    }

    /* Highlight success modal navigation links */
    #successModalGotoMyRequestsTab,
    #successModalGotoAllRequestsTab {
        color: var(--color-primary);
        font-weight: bolder;
    }

    /* Active state styling for filter columns trigger */
    #filterColumns.active {
        color: var(--color-primary) !important;
    }

    /* Refresh icon color normalization */
    #refreshButton i {
        color: var(--text-primary) !important;
    }

    /* Deleted-toggle icon colors based on state */
    #showDeletedButton[data-state="on"] i {
        color: var(--color-danger-alt) !important;
    }

    #showDeletedButton[data-state="off"] i {
        color: var(--text-primary) !important;
    }

        /* Keep hover consistent for "off" state */
        #showDeletedButton[data-state="off"] i:hover {
            color: var(--text-primary) !important;
        }
    /* #endregion */

    /* #region Agenda Panel                                                       */
    /* ========================================================================== */
    /* Compact text for agenda indicators/actions */
    #agendaCount,
    #clearAllAgendaItems {
        font-size: 0.6rem;
    }

    /* Agenda list: dark background, fixed scrollable height */
    #agendaList {
        background-color: var(--bg-darkest);
        overflow-y: auto;
        height: 395px !important;
        max-height: 395px !important;
    }
    /* #endregion */

    /* #region Data Tables (Users / Roles / Links / Search Box)                   */
    /* ========================================================================== */
    /* Prevent wrapping in Users/Roles tables */
    #usersTable td,
    #rolesTable td {
        white-space: nowrap;
    }

    /* DataTable links: emphasize with primary color + underline */
    .dt-email-link,
    .dt-link-ss,
    .dt-email-link-ss {
        color: var(--color-primary);
        text-decoration: underline;
    }

    .white-email-link {
        color: #fff !important;
        text-decoration: underline;
    }

        /*.white-email-link:hover {
            color: #fff !important;
            text-decoration: underline;
        }*/

    /* Slight spacing adjustment for DataTable search box */
    .dt-search-box {
        padding-right: 3px;
    }
    /* #endregion */

    /* #region Permissions / Roles UI Tweaks                                      */
    /* ========================================================================== */
    /* Refresh button interaction: keep clean on touch + no outline; force white */
    #userRolesCardRefresh:hover,
    #userRolesCardRefresh:active,
    #userRolesCardRefresh:focus,
    #userPermissionsCardRefresh:hover,
    #userPermissionsCardRefresh:active,
    #userPermissionsCardRefresh:focus {
        color: white !important;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* Fine-tune padding for role permissions table rows */
    #rolePermissionsTable .row {
        padding-right: 0.9rem;
    }

    /* Align checked icons within users roles/permissions cards */
    #usersRolesCard .row .icon-checkbox-checked2,
    #usersPermissionsCard .row .icon-checkbox-checked2 {
        margin-left: -7px !important;
    }

    /* Align checked icons within role permissions card */
    #rolePermissionsCard .row .icon-checkbox-checked2 {
        padding-left: 0px;
    }

    /* Remove extra right padding in subheaders for full edit cards */
    #fullEditRolesCard .card-subheader,
    #fullEditPermissionsCard .card-subheader {
        padding-right: 0px;
    }

    /* Add right padding to table body rows in full edit tables */
    #fullEditRolesTable tbody tr,
    #fullEditPermissionsTable tbody tr {
        padding-right: 13px;
    }
    /* #endregion */

    /* #region Board Meetings                                                     */
    /* ========================================================================== */
    /* Compact count display */
    #totalBoardMeetings {
        font-size: 0.6rem;
    }
    /* #endregion */

    /* #region CKEditor Toolbar + Buttons                                         */
    /* ========================================================================== */
    /* Remove focus outlines/box-shadows across CKEditor toolbar buttons */
    .ck.ck-toolbar button:focus,
    .ck.ck-toolbar button:focus-visible,
    .ck.ck-toolbar button.ck-off:focus,
    .ck.ck-toolbar button.ck-on:focus,
    .ck.ck-dropdown button:focus,
    .ck.ck-dropdown button:focus-visible {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    /* Primary-styled CKEditor buttons/dropdowns (including Save/Cancel) */
    button.ck.ck-button.ck-off[data-cke-tooltip-text="Bold (Ctrl+B)"],
    button.ck.ck-button.ck-off[data-cke-tooltip-text="Italic (Ctrl+I)"],
    .ck.ck-button-save.ck-off,
    a.ck.ck-button-save.ck-off,
    .ck.ck-button-cancel.ck-off,
    a.ck.ck-button-cancel.ck-off,
    .ck.ck-dropdown__button,
    a.ck.ck-dropdown__button {
        background-color: var(--color-primary) !important;
        color: var(--text-primary) !important;
    }

    /* Description editor focus: show primary-colored bottom border */
    #soberSoftRequestDescriptionContainer .ck.ck-content:focus {
        border-bottom: 1px solid var(--color-primary) !important;
    }
    /* #endregion */

    /* #region Spinners / Loading Indicators                                      */
    /* ========================================================================== */
    /* Centered axios spinner with continuous rotation */
    #axiosRequestSpinner {
        position: absolute;
        top: 50%;
        margin-top: -2em;
        left: 50%;
        margin-left: -2em;
        transform: translate(-50%, -50%);
        animation: spin 1s linear infinite;
    }
    /* #endregion */

    /* #region Reviews / Ratings                                                  */
    /* ========================================================================== */
    /* Star icon sizing/spacing within review form */
    #reviewForm .icon-star-full2 {
        font-size: 1.4rem;
        padding-right: 3px;
    }

    /* Filled star style */
    .star-filled {
        color: gold;
        padding-right: 3px;
    }

    /* Remove box shadow from review content container */
    #reviewContent {
        box-shadow: none !important;
    }
    /* #endregion */

    /* #region Toggle Buttons & DataTable Actions Hover                            */
    /* ========================================================================== */
    /* Unified hover treatment for show/hide toggle controls and table action buttons */
    .show-toggle-username-btn:hover,
    .show-toggle-email-btn:hover,
    .show-toggle-password-btn:hover,
    #dataTableActions .show-btn:hover,
    .hide-toggle-username-btn:hover,
    .hide-toggle-email-btn:hover,
    .hide-toggle-password-btn:hover,
    #dataTableActions .hide-btn:hover {
        background-color: var(--color-primary);
        border-color: var(--color-primary) !important;
    }
    /* #endregion */

    /* #region Buttons                                                            */
    /* ========================================================================== */
    /* Black button: subtle border definition */
    .btn-black {
        border: 0.5px solid #383940;
    }
    /* #endregion */
}
/* #endregion /RESPONSIVE: Mobile Devices */

/* #region RESPONSIVE: Extra Small Devices */

@media (max-width: 575.98px) {
    #homeAbacusAppCard .card-footer i,
    #homeHermesAppCard .card-footer i,
    #homeHourglassAppCard .card-footer i,
    #homeSoberSoftAppCard .card-footer i {
        color: var(--color-abacus);
        cursor: pointer;
    }

    #homeHermesAppCard .card-footer i {
        color: var(--color-hermes);
    }

    #homeHourglassAppCard .card-footer i {
        color: var(--color-hourglass);
    }

    #homeSoberSoftAppCard .card-footer i {
        color: var(--color-primary);
    }
}

/* #endregion /RESPONSIVE: Extra Small Devices */

/* #region Quick Access sidebar — collapsible drawers */

.ss-quick-drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: .5rem .75rem;
    cursor: pointer;
    color: inherit;
    text-align: left;
    line-height: 1;
}
.ss-quick-drawer-toggle:focus { outline: none; }
.ss-quick-drawer-toggle:focus-visible { outline: 2px solid rgba(159,1,241,.45); outline-offset: -2px; }
.ss-quick-drawer-chevron {
    font-size: .72rem;
    color: rgba(255,255,255,.35);
    flex-shrink: 0;
    transition: transform .2s ease;
}
.ss-quick-drawer-toggle[aria-expanded="false"] .ss-quick-drawer-chevron {
    transform: rotate(-90deg);
}
.ss-quick-drawer-panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .2s ease;
}
.ss-quick-drawer-panel.ss-collapsed {
    grid-template-rows: 0fr;
}
.ss-quick-drawer-inner {
    overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .ss-quick-drawer-panel,
    .ss-quick-drawer-chevron { transition: none; }
}

/* #endregion /Quick Access sidebar — collapsible drawers */