/* ============================================================
   FONT FACES
   ============================================================ */

@font-face {
    font-family: "IBM Plex Mono";
    src: url("./fonts/IBMPlexMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("./fonts/IBMPlexMono-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("./fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("./fonts/IBMPlexMono-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
    --font-body: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --fs-base: 16px;

    /* Palette: light */
    --bg: #f7f8f9;
    --surface: #ffffff;
    --text: #1f2328;
    --muted: #68707a;
    --line: #d0d5db;
    --line-strong: #b6bcc4;

    /* Side menu */
    --lsm-h: 56px;
    --lsm-w: 300px;
    --lsm-bg: #111418;
    --lsm-fg: #e6e6e6;
    --lsm-muted: #a5acb4;
    --lsm-item-px: .9rem;
    --lsm-item-py: .6rem;
    --lsm-icon-w: 1.25rem;
    --lsm-indent-l2: 2.35rem;
    --lsm-indent-l3: 3.2rem;

    /* Bootstrap-compatible tokens */
    --bs-body-bg: var(--surface);
    --bs-body-color: var(--text);
    --bs-border-color: var(--line);
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-tertiary-bg: rgba(0, 0, 0, 0.03);
    --bs-secondary-bg: rgba(0, 0, 0, 0.04);
    --bs-secondary-color: rgba(0, 0, 0, 0.55);
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: var(--text);
    --bs-primary-rgb: 13, 110, 253;
    --bs-breadcrumb-item-active-color: var(--text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);

    /* Misc */
    --lsai-context-color: #9b9393;
}

[data-bs-theme="dark"] {
    /* Palette: dark */
    --bg: #1c1f24;
    --surface: #171a1f;
    --text: #e7eaee;
    --muted: #a1a7b0;
    --line: #32363c;
    --line-strong: #3d4249;

    /* Bootstrap-compatible tokens */
    --bs-body-bg: var(--surface);
    --bs-body-color: var(--text);
    --bs-border-color: var(--line);
    --bs-tertiary-bg: rgba(255, 255, 255, 0.03);
    --bs-secondary-bg: rgba(255, 255, 255, 0.08);
    --bs-secondary-color: rgba(255, 255, 255, 0.7);
    --bs-link-color: #7fb1ff;
    --bs-link-hover-color: #9ec3ff;
    --bs-primary-rgb: 13, 110, 253;
    --bs-breadcrumb-item-active-color: var(--text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
}


/* ============================================================
   BASE AND TYPOGRAPHY
   ============================================================ */

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
}

h1 {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    line-height: 1.25;
}

h2 {
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    line-height: 1.25;
}

h3 {
    font-size: clamp(1.2rem, 2.2vw, 1.4rem);
    line-height: 1.25;
}


/* ============================================================
   PAGE LAYOUT
   ============================================================ */

main {
    flex: 1 0 auto;
    padding-top: 1.25rem;
    padding-bottom: 80px;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    min-height: 66px;
    display: flex;
    align-items: center;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.section-card {
    background: var(--surface);
    border-radius: 6px;
    border: 1px solid var(--line);
}

.lsai-wrap {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4rem;
    max-height: calc(1.4rem * 4);
    white-space: normal !important;
}


/* ============================================================
   BREADCRUMBS AND TOOLBAR
   ============================================================ */

.breadcrumb {
    margin-bottom: 0;
    font-size: 0.95rem;
    color: var(--muted);
}

.breadcrumb a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.actions {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

@media (min-width: 992px) {
    .actions {
        gap: .6rem;
    }
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 40px;
    min-width: 44px;
    padding: 0 .6rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: .95rem;
    line-height: 1;
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn-tool:hover,
.btn-tool:focus {
    background: var(--bg);
    color: var(--text);
    text-decoration: none;
}

.btn-tool:focus {
    outline: 2px solid transparent;
    border-color: var(--line-strong);
    box-shadow: none;
}

.btn-tool:disabled,
.btn-tool.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.btn-tool .bi {
    font-size: 1.05rem;
    line-height: 1;
}

.btn-icon {
    padding: 0;
    width: 40px;
    min-width: 40px;
    height: 40px;
}

.btn-danger {
    color: #b52b2b;
    border-color: rgba(181, 43, 43, .12);
    background: var(--surface);
}

.btn-label {
    display: inline-block;
}


/* ============================================================
   TABLE SEARCH
   ============================================================ */

.lsai-table-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 50%;
    max-width: 400px;
}

.lsai-table-search {
    height: 40px;
    width: 100%;
    padding: 0 0.75rem 0 2.2rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: 0.95rem;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.lsai-table-search:focus {
    outline: none;
    border-color: var(--line-strong);
    background: var(--bg);
}

.lsai-table-search-wrapper .bi {
    position: absolute;
    left: 0.75rem;
    font-size: 1rem;
    opacity: 0.7;
    pointer-events: none;
}


/* ============================================================
   TOP BAR
   ============================================================ */

.lsai-top-bar {
    position: sticky;
    top: 0;
    z-index: 1060;
    height: var(--lsm-h);
    align-items: center;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.lsai-top-bar > .container {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lsai-top-bar-logo {
    width: 22px;
    height: 22px;
    margin-right: .5rem;
    display: inline-block;
}

@media (max-width: 800px) {
    .lsai-top-bar-logo {
        display: none;
    }
}

.lsai-top-bar-btn-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    border-radius: 8px;
    padding: 0;
}

.lsai-top-bar-btn-icon:hover {
    background: var(--bg);
}

.lsai-top-bar-menu {
    min-width: 220px;
}

.lsai-top-bar-menu-notifs,
.lsai-top-bar-user {
    width: min(360px, 92vw);
}

.lsai-top-bar-user-card {
    padding: .75rem 1rem;
}

.lsai-top-bar-user-email {
    font-weight: 600;
}

.lsai-top-bar-user-meta {
    color: var(--muted);
    font-size: .9rem;
}


/* ============================================================
   LEFT SIDE MENU
   ============================================================ */

.lsai-left-main-side-menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--lsm-w);
    background: var(--lsm-bg);
    color: var(--lsm-fg);
    display: flex;
    flex-direction: column;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(-100%, 0, 0);
    transition: transform 280ms cubic-bezier(.22, .61, .36, 1);
    z-index: 1070; /* higher than .lsai-top-bar 1060 */
    scrollbar-width: thin;
    scrollbar-color: var(--bs-border-color) transparent;
}

.lsai-left-main-side-menu--open {
    transform: translate3d(0, 0, 0);
}

.lsai-left-main-side-menu__head {
    padding: .9rem 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lsai-left-main-side-menu__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem .5rem 1rem;
}

.lsai-left-main-side-menu__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: var(--lsm-item-py) var(--lsm-item-px);
    color: var(--lsm-fg);
    text-decoration: none;
    border-radius: .5rem;
    transition: background-color .15s ease, color .15s ease;
    width: 100%;
}

.lsai-left-main-side-menu__item:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.lsai-left-main-side-menu__item .bi {
    width: var(--lsm-icon-w);
    text-align: center;
    font-size: 1.1rem;
}


/* ============================================================
   LEFT SIDE MENU ACCORDION
   ============================================================ */

.lsai-left-main-side-menu__accordion .accordion-item {
    background: transparent;
    border: 0;
}

.lsai-left-main-side-menu__accordion .accordion-button {
    background: transparent;
    color: var(--lsm-fg);
    padding: var(--lsm-item-py) var(--lsm-item-px);
    border-radius: .5rem !important;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.lsai-left-main-side-menu__accordion .accordion-button:hover,
.lsai-left-main-side-menu__accordion .accordion-button:not(.collapsed) {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.lsai-left-main-side-menu__accordion .accordion-button::after {
    filter: invert(1) opacity(.7);
}

.lsai-left-main-side-menu__accordion .accordion-body {
    padding: .35rem 0 0 .75rem;
}

.lsai-left-main-side-menu__indent-l2 .lsai-left-main-side-menu__item,
.lsai-left-main-side-menu__indent-l2 .accordion-button {
    padding-left: var(--lsm-indent-l2);
}

.lsai-left-main-side-menu__indent-l3 .lsai-left-main-side-menu__item,
.lsai-left-main-side-menu__indent-l3 .accordion-button {
    padding-left: var(--lsm-indent-l3);
}


/* ============================================================
   LEFT SIDE MENU PROFILE
   ============================================================ */

.lsai-left-main-side-menu__profile {
    padding: .85rem 1rem;
}

.lsai-left-main-side-menu__profile-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 0;
    background: transparent;
    color: var(--lsm-fg);
    padding: var(--lsm-item-py) var(--lsm-item-px);
    border-radius: .5rem;
    text-align: left;
    transition: background-color .12s ease, color .12s ease;
}

.lsai-left-main-side-menu {
    overflow: hidden;
}

.lsai-left-main-side-menu__scroll {
    scrollbar-gutter: stable;
}


/* ============================================================
   LEFT SIDE MENU BACKDROP
   ============================================================ */

.lsai-left-main-side-menu__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 1065; /* below sidebar, above top bar */
}

.lsai-left-main-side-menu__backdrop--show {
    opacity: 1;
    visibility: visible;
}


/* ============================================================
   POWER SELECT MODAL
   ============================================================ */

.modal.lsai-powerselect-modal {
    z-index: 20000 !important;
}

.modal.lsai-powerselect-modal ~ .modal-backdrop {
    z-index: 19999 !important;
    background: var(--lsa-backdrop);
    opacity: 1 !important;
}

.modal.lsai-powerselect-modal .modal-dialog {
    position: fixed !important;
    inset: 0 !important;
    margin: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: min(900px, 92vw) !important;
    width: 100% !important;
    pointer-events: none;
}

.modal.lsai-powerselect-modal .modal-content {
    pointer-events: auto;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .25) !important;
    background-clip: padding-box;
}

.modal.lsai-powerselect-modal.lsai-powerselect-modal-xl .modal-dialog {
    max-width: min(1400px, 96vw) !important;
}


/* ============================================================
   FORM REQUIRED INDICATORS
   ============================================================ */

.required-form-control::after,
label:has(+ input[data-val-required])::after,
label:has(+ div + input[data-val-required])::after,
label:has(+ textarea[data-val-required])::after,
label:has(+ input[required])::after,
label:has(+ div + input[required])::after,
label:has(+ textarea[required])::after {
    content: " *";
    color: #dc3545;
}

/*tabulator*/
.tabulator {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.tabulator .tabulator-header,
.tabulator .tabulator-footer,
.tabulator .tabulator-header .tabulator-col {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.tabulator .tabulator-row {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.tabulator .tabulator-row.tabulator-row-even {
    background: var(--bs-secondary-bg);
}

.tabulator .tabulator-row:hover {
    background: #e9ecef;
}

.tabulator .tabulator-header .tabulator-col:hover {
    background: #dee2e6;
}

[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-even {
    background: #24282c;
}

[data-bs-theme="dark"] .tabulator .tabulator-row:hover {
    background: #2b3035;
}

[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col:hover {
    background: #212529;
    color: #000000;
}


.lsai-error-icon {
    width: 5rem;
    height: 5rem;
}