:root {
    --bs-primary: #E85D04;
    --bs-primary-rgb: 232, 93, 4;
    --bs-link-color: #E85D04;
    --bs-link-hover-color: #C2410C;
    --bs-link-color-rgb: 232, 93, 4;
    --bs-link-hover-color-rgb: 194, 65, 12;
    --bs-card-bg: #ffffff;
    --bs-card-cap-bg: #ffffff;
    --bs-table-bg: #ffffff;
    --bs-table-hover-bg: #FFF8F3;
    --bs-body-bg: #F5F5F9;
    --bs-body-color: #6F6B7D;
    --bs-heading-color: #2F2B3D;
    --bs-border-color: #e4e6e8;
    --bs-border-radius: 0.375rem;
    --bs-box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22' fill='none'%3e%3cpath d='M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z' fill='%2322303e' fill-opacity='0.9'/%3e%3c/svg%3e");
    --bs-font-sans-serif: "Public Sans", "Segoe UI", sans-serif;
    --menu-bg: #111111;
    --menu-width: 16.25rem;
}

body {
    font-family: var(--bs-font-sans-serif);
    background: var(--bs-body-bg);
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--bs-heading-color);
    font-weight: 600;
    letter-spacing: -0.015em;
}
.layout-page h4 { font-size: 1.2rem; font-weight: 600; }
.layout-page .card-header h5 { font-size: 16px; margin-bottom: 0.15rem; }
.layout-page .card-body h2 { font-size: 1.65rem; line-height: 1.15; }
.layout-page .card-body h4 { font-size: 1.35rem; line-height: 1.2; margin-bottom: 0.2rem; }
.layout-page .card-body h5 { font-size: 1.05rem; line-height: 1.2; }
.layout-page small,
small,
.small { font-size: 15px; line-height: 1.45; }

.btn-primary {
    --bs-btn-bg: #E85D04;
    --bs-btn-border-color: #E85D04;
    --bs-btn-hover-bg: #C2410C;
    --bs-btn-hover-border-color: #C2410C;
    --bs-btn-active-bg: #C2410C;
    --bs-btn-active-border-color: #C2410C;
    --bs-btn-disabled-bg: #E85D04;
    --bs-btn-disabled-border-color: #E85D04;
}
.btn-outline-primary {
    --bs-btn-color: #E85D04;
    --bs-btn-border-color: #E85D04;
    --bs-btn-hover-bg: #E85D04;
    --bs-btn-hover-border-color: #E85D04;
    --bs-btn-active-bg: #C2410C;
    --bs-btn-active-border-color: #C2410C;
}
.form-label {
    margin-bottom: 0.25rem;
    font-size: 15px;
    color: #2F2B3D;
}
.form-control,
.form-select,
.input-group-text {
    padding: 0.543rem 0.9375rem;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.375;
    color: #2F2B3D;
    background-color: #fff;
    border: 1px solid #d4d8dd;
    border-radius: 0.375rem;
    box-shadow: none;
}
.form-select {
    padding-right: 2rem;
    background-image: var(--bs-form-select-bg-img);
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 14px 14px;
}
.input-group-text {
    background-color: #fff;
    color: #6F6B7D;
}
.form-control::placeholder { color: #a7acb2; }
.form-control:focus,
.form-select:focus {
    color: #2F2B3D;
    background-color: #fff;
    border-color: #E85D04;
    outline: 0;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(232, 93, 4, 0.4);
}
.form-check-input:checked {
    background-color: #E85D04;
    border-color: #E85D04;
}
.form-check-input:focus {
    border-color: #E85D04;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(232, 93, 4, 0.4);
}
.btn:focus,
.btn:active,
.btn-primary:focus {
    box-shadow: none;
}
.nav-pills .nav-link.active {
    background: #FFF4EC;
    color: #E85D04;
}
.nav-pills .nav-link { color: #6F6B7D; font-size: 15px; padding: 0.45rem 0.8rem; }
.page-link { color: #E85D04; }
.progress-bar { background-color: #E85D04; }

.card,
.card-body,
.modal-content,
.dropdown-menu,
.list-group-item {
    background-color: #fff;
}
.layout-page .card {
    border: 0;
    box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
    animation: rise 0.45s ease both;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-body { padding: 1.35rem 1.4rem; }
.card-header {
    background-color: #fff;
    border-bottom: 0;
    padding: 1.2rem 1.4rem 0.85rem;
}
a.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.6rem 1.4rem rgba(232, 93, 4, 0.12);
}
a.queue-card,
a.queue-card:hover {
    color: inherit;
    text-decoration: none;
    border: 1px solid #e4e6e8;
}
a.queue-card:hover,
a.queue-card.is-active {
    border-color: #E85D04;
    box-shadow: 0 0.45rem 1.1rem rgba(232, 93, 4, 0.14);
}
a.queue-card.is-active { background: #FFF8F3; }
.queue-label {
    color: #2F2B3D;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}
.queue-count { color: #2F2B3D; }
.queue-go {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #E85D04;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.queue-go .fa-solid { font-size: 0.8rem; }
.modal-backdrop { z-index: 1200 !important; }
.modal { z-index: 1210 !important; }
.table {
    --bs-table-bg: #fff;
    --bs-table-color: #6F6B7D;
    --bs-table-hover-bg: #FFF8F3;
    --bs-table-hover-color: #2F2B3D;
    background-color: #fff;
}
.table { font-size: 15px; }
.table thead th {
    background-color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #6F6B7D;
    padding: 0.85rem 1.15rem;
}
.table td { padding: 0.95rem 1.15rem; }
.table .fw-medium { font-size: 15px; font-weight: 500; }
.table small { font-size: 15px; }
.layout-page a:not(.btn):not(.nav-link):not(.dropdown-item):not(.menu-link) {
    color: #E85D04;
    text-decoration: none;
    transition: color 0.2s ease;
}
.layout-page a:not(.btn):not(.nav-link):not(.dropdown-item):not(.menu-link):hover {
    color: #C2410C;
}
.layout-page a:not(.dropdown-item) small {
    color: #6F6B7D !important;
}
.layout-page a:not(.dropdown-item):not(.notice-link) .text-heading {
    color: #E85D04 !important;
    transition: color 0.2s ease;
}
.layout-page a:not(.dropdown-item):not(.notice-link):hover .text-heading {
    color: #C2410C !important;
}
.menu-item .menu-link,
.btn,
.nav-pills .nav-link {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover { transform: translateY(-1px); }

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #F5F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.page-loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.loader-mark { position: relative; width: 72px; height: 72px; }
.loader-mark svg { position: absolute; inset: 16px; }
.loader-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid #fff;
    border-top-color: #E85D04;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-responsive > .table {
    width: max-content;
    min-width: 100%;
    margin-bottom: 0;
}
.table-responsive th,
.table-responsive td {
    white-space: nowrap;
    vertical-align: middle;
}
.table-responsive .form-select,
.table-responsive .form-control,
div.dt-container table .form-select {
    width: auto;
    min-width: 10.5rem;
}
.container-p-y {
    max-width: 100%;
    overflow-x: hidden;
}
div.dt-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    clear: both;
    box-sizing: border-box;
}
.card > div.dt-container {
    padding: 1.15rem 1.4rem 1.25rem !important;
}
div.dt-container div.dt-layout-row,
div.dt-container div.dt-layout-cell,
div.dt-container .dt-scroll,
div.dt-container .dt-scroll-body {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
div.dt-container div.dt-layout-row:not(.dt-layout-table) {
    margin: 0 !important;
    padding: 0 0 0.85rem !important;
}
div.dt-container .dt-layout-table {
    margin: 0 !important;
    padding: 0 0 0.35rem !important;
    min-width: 0 !important;
    max-width: 100%;
}
div.dt-container .dt-layout-full {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: #E85D04 #F5F5F9;
    scrollbar-width: thin;
}
div.dt-container .dt-layout-full::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 12px;
}
div.dt-container .dt-layout-full::-webkit-scrollbar-track {
    background: #F5F5F9;
    border-radius: 10px;
}
div.dt-container .dt-layout-full::-webkit-scrollbar-thumb {
    background: #E85D04;
    border-radius: 10px;
}
div.dt-container table.dataTable {
    width: max-content;
    min-width: 100%;
    margin-bottom: 0;
}
div.dt-container div.dt-layout-row:last-child {
    padding: 0.85rem 0 0 !important;
}
div.dt-container table.dataTable th,
div.dt-container table.dataTable td {
    white-space: nowrap;
}
div.dt-container .dt-length select,
div.dt-container .dt-search input {
    width: auto;
    min-width: 0;
}
div.dt-container .dt-search input {
    width: 14rem;
    max-width: 100%;
}
div.dt-container .dt-paging .pagination {
    margin: 0;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
div.dt-container .dt-paging .page-item {
    margin: 0;
}
div.dt-container .dt-paging .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.4rem;
    color: #E85D04;
}
div.dt-container .dt-paging .page-item.active .page-link {
    background: #E85D04;
    border-color: #E85D04;
    color: #fff;
}
div.dt-container .dt-info,
div.dt-container .dt-length,
div.dt-container .dt-search {
    color: #6F6B7D;
    font-size: 15px;
}
@media (max-width: 767.98px) {
    .card > div.dt-container {
        padding: 1rem 1rem 1.1rem !important;
    }
}

.layout-wrapper, .layout-container { display: flex; min-height: 100vh; width: 100%; }
.layout-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 0 1.75rem 2rem;
}
.layout-page .row {
    --bs-gutter-x: 1.35rem;
    --bs-gutter-y: 1.35rem;
}
.content-wrapper { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.container-p-y { padding-top: 1.65rem; padding-bottom: 0.5rem; }

.layout-menu {
    width: var(--menu-width);
    background: var(--menu-bg);
    color: #C8C8CC;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    flex-shrink: 0;
    z-index: 1080;
}
.app-brand {
    min-height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 1.15rem 1.25rem 0.85rem;
    flex-shrink: 0;
}
.app-brand-link { display: flex; align-items: center; justify-content: center; min-width: 0; max-width: 100%; color: #fff; text-decoration: none; }
.app-logo { display: block; height: 3.15rem; width: auto; }
.app-logo-lg { height: auto; width: min(12.5rem, 100%); }
.app-brand .app-logo {
    width: auto;
    max-width: 11.5rem;
    height: 3.65rem;
    object-fit: contain;
    object-position: center;
}
.app-brand .menu-close { position: absolute; right: 0.35rem; top: 0.55rem; }
.portal-brand .app-logo { height: 2.8rem; }
.loader-mark img {
    position: absolute;
    width: 52px;
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.app-brand-text { font-weight: 600; font-size: 1.05rem; line-height: 1.15; }
.app-brand-text small { display: block; color: #8D8D93; font-weight: 400; font-size: 15px; }
.menu-close { color: #C8C8CC; }
.menu-inner-shadow {
    height: 0;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.35);
    z-index: 1;
}
.menu-inner {
    list-style: none;
    margin: 0;
    padding: 1.15rem 0 1.75rem;
    overflow: auto;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.menu-inner::-webkit-scrollbar { width: 5px; }
.menu-inner::-webkit-scrollbar-track { background: transparent; }
.menu-inner::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 10rem;
}
.menu-inner::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.45); }
.menu-sub {
    display: none;
    list-style: none;
    margin: 0.35rem 0 0.55rem;
    padding: 0;
}
.menu-item.open > .menu-sub { display: block; }
.menu-item .menu-link {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0.32rem 0.875rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.375rem;
    color: #C8C8CC;
    text-decoration: none;
    background: transparent;
    border: 0;
    width: calc(100% - 1.75rem);
    text-align: left;
    font-size: 15px;
}
.menu-sub .menu-link {
    margin-top: 0.16rem;
    margin-bottom: 0.16rem;
    padding-top: 0.62rem;
    padding-bottom: 0.62rem;
    padding-left: 0.75rem;
}
.menu-toggle::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-left: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.menu-item.open > .menu-toggle::after { transform: rotate(45deg); }
.menu-item .menu-link:hover,
.menu-item > form > .menu-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu-item.active > .menu-link { color: #fff; }
.menu-inner > .menu-item.active > .menu-link:not(.menu-toggle),
.menu-sub .menu-item.active > .menu-link { background: rgba(232, 93, 4, 0.18); }
.menu-icon {
    width: 1.5rem;
    margin-right: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.35rem;
    line-height: 1;
    color: #A7A7AD;
    background: none;
}
.menu-sub .menu-icon { font-size: 1.2rem; }
.menu-icon .icon-solid { display: none; }
.menu-item:hover > .menu-link .menu-icon,
.menu-item:hover > form > .menu-link .menu-icon,
.menu-item.open > .menu-link .menu-icon,
.menu-item.active > .menu-link .menu-icon,
.menu-item.active > form > .menu-link .menu-icon { color: #FFB38A; }
.menu-item:hover > .menu-link .icon-line,
.menu-item:hover > form > .menu-link .icon-line,
.menu-item.open > .menu-link .icon-line,
.menu-item.active > .menu-link .icon-line,
.menu-item.active > form > .menu-link .icon-line { display: none; }
.menu-item:hover > .menu-link .icon-solid,
.menu-item:hover > form > .menu-link .icon-solid,
.menu-item.open > .menu-link .icon-solid,
.menu-item.active > .menu-link .icon-solid,
.menu-item.active > form > .menu-link .icon-solid { display: inline-block; }
.menu-help { list-style: none; padding: 1.25rem 1rem 0.35rem; }
.menu-help-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #C8C8CC;
    border-radius: 0.75rem;
    padding: 1rem 1.05rem;
}
.menu-help h6 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 0.45rem;
}
.menu-help p { font-size: 15px; line-height: 1.45; margin-bottom: 0.85rem; }
.menu-help .menu-icon { color: #FCD34D; font-size: 1.15rem; width: auto; margin-right: 0; }
.menu-help .btn { justify-content: center; }
.menu-help .btn-outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}
.menu-help .btn-outline-light:hover { background: #E85D04; border-color: #E85D04; color: #fff; }
.tour-shade { position: fixed; inset: 0; z-index: 2040; }
.tour-ring {
    position: fixed;
    z-index: 2050;
    border-radius: 0.75rem;
    box-shadow: 0 0 0 9999px rgba(17, 17, 17, 0.55);
    pointer-events: none;
}
.tour-card {
    position: fixed;
    z-index: 2060;
    width: min(24rem, calc(100vw - 1.5rem));
    background: #fff;
    color: #2F2B3D;
    border-radius: 0.9rem;
    padding: 1.1rem 1.15rem 1rem;
    box-shadow: 0 1rem 2.5rem rgba(17, 17, 17, 0.22);
}
.tour-kicker { margin: 0 0 0.25rem; color: #E85D04; font-size: 15px; font-weight: 600; }
.tour-card h6 { margin: 0 0 0.35rem; font-size: 16px; color: #2F2B3D; }
.tour-copy { margin: 0 0 1rem; color: #6F6B7D; font-size: 15px; line-height: 1.45; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tour-nav { display: flex; gap: 0.45rem; }

.layout-navbar {
    position: relative;
    z-index: 1080;
    overflow: visible;
    margin-top: 1.15rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0.125rem 0.375rem rgba(47, 43, 61, 0.06);
    min-height: 4.25rem;
    padding: 0.65rem 1.15rem;
}
.navbar-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: #F5F5F9;
    border-radius: 0.375rem;
    padding: 0 0.85rem;
    height: 2.375rem;
    min-width: 16rem;
    color: #6F6B7D;
}
.navbar-search .form-control {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    height: auto;
    color: #2F2B3D;
}
.navbar-search .form-control:focus { box-shadow: none; }
.btn-icon {
    width: 2.375rem;
    height: 2.375rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #6F6B7D;
    border-radius: 0.375rem;
    position: relative;
}
.btn-icon:hover { background: #F5F5F9; color: #2F2B3D; }
.nav-icon {
    width: 2.375rem;
    height: 2.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6F6B7D;
    font-size: 1.35rem;
    border-radius: 0.375rem;
}
.nav-icon:hover { background: #F5F5F9; color: #2F2B3D; }
.hide-arrow.dropdown-toggle::after { display: none; }
.dropdown-menu {
    z-index: 1085;
    border: 1px solid #e4e6e8;
    border-radius: 0.375rem;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 0.25rem 1.125rem rgba(47, 43, 61, 0.16);
    min-width: 14.5rem;
}
.dropdown-user .dropdown-menu { min-width: 15.5rem; }
.dropdown-notifications .dropdown-menu,
.dropdown-shortcuts .dropdown-menu { width: 22.5rem; max-width: calc(100vw - 1.5rem); }
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1.15rem;
    font-size: 15px;
    color: #6F6B7D;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
}
.dropdown-item i { font-size: 1.25rem; color: #6F6B7D; }
.dropdown-item:hover,
.dropdown-item:focus { background: #F5F5F9; color: #2F2B3D; }
.dropdown-menu-header .dropdown-header { padding: 0.35rem 1.15rem; }
.dropdown-notifications-list { max-height: 20rem; overflow: auto; }
.dropdown-notifications-item { padding: 0.85rem 1rem; }
.dropdown-menu-footer { padding: 0.75rem; }
.avatar-online { position: relative; }
.avatar-online::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #28C76F;
    border: 2px solid #fff;
}
.badge-notifications {
    position: absolute;
    top: 0.15rem;
    right: 0.05rem;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: 2px solid #fff;
}
.dropdown-shortcuts-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
}
.dropdown-shortcuts-item {
    position: relative;
    text-align: center;
    padding: 1.15rem 0.75rem;
    border-top: 1px solid #e4e6e8;
}
.dropdown-shortcuts-item:nth-child(-n + 2) { border-top: 0; }
.dropdown-shortcuts-item:nth-child(even) { border-left: 1px solid #e4e6e8; }
.dropdown-shortcuts-icon {
    width: 2.6rem;
    height: 2.6rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F5F9;
    color: #2F2B3D;
    font-size: 1.25rem;
}
.layout-page .dropdown-shortcuts-item a {
    color: #2F2B3D;
    font-weight: 500;
    text-decoration: none;
}
.layout-page .dropdown-shortcuts-item small { color: #6F6B7D !important; }
.layout-page .notice-link,
.layout-page .notice-link .text-heading { color: #2F2B3D !important; text-decoration: none; }
.btn-icon .badge-dot {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    width: 0.45rem;
    height: 0.45rem;
    background: #E85D04;
    border-radius: 50%;
    border: 2px solid #fff;
}

.avatar {
    width: 2.375rem;
    height: 2.375rem;
    display: inline-flex;
    flex-shrink: 0;
}
.avatar .avatar-initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}
.avatar-sm { width: 2.15rem; height: 2.15rem; font-size: 15px; }
.avatar-md { width: 2.75rem; height: 2.75rem; }

.bg-label-primary { background: #FFF4EC !important; color: #E85D04 !important; }
.bg-label-success { background: #E8FADF !important; color: #28C76F !important; }
.bg-label-warning { background: #FFF1E3 !important; color: #FF9F43 !important; }
.bg-label-danger { background: #FFE5E5 !important; color: #EA5455 !important; }
.bg-label-info { background: #D9F8FC !important; color: #00CFE8 !important; }
.bg-label-secondary { background: #F1F1F2 !important; color: #6F6B7D !important; }
.badge { font-weight: 500; font-size: 15px; padding: 0.35em 0.65em; }
.text-heading { color: #2F2B3D !important; }

.timeline { position: relative; padding-left: 0.25rem; }
.timeline-item { position: relative; padding: 0 0 1.15rem 1.4rem; }
.timeline-item::before {
    content: "";
    position: absolute;
    left: 0.2rem;
    top: 0.45rem;
    bottom: 0;
    width: 1px;
    background: #EBE9F1;
}
.timeline-item:last-child::before { display: none; }
.timeline-point {
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #E85D04;
    box-shadow: 0 0 0 4px #FFF4EC;
}

.auth-panel {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 16% 18%, rgba(232, 93, 4, 0.55), transparent 34%),
        radial-gradient(circle at 84% 78%, rgba(17, 17, 17, 0.22), transparent 36%),
        radial-gradient(circle at 72% 16%, rgba(255, 183, 120, 0.7), transparent 30%),
        #F3F4F6;
    color: #2F2B3D;
    min-height: 100vh;
    padding: 2.5rem 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    overflow: hidden;
}
.auth-carousel { width: min(460px, 100%); overflow: hidden; }
.auth-track { display: flex; transition: transform 0.65s cubic-bezier(.4, 0, .2, 1); }
.auth-slide { min-width: 100%; }
.auth-card {
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(18px) saturate(1.45);
    -webkit-backdrop-filter: blur(18px) saturate(1.45);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 1.25rem;
    padding: 1.25rem 1.35rem 1.35rem;
    min-height: 22rem;
}
.auth-art,
.auth-card .scene { width: 100%; height: auto; display: block; }
.auth-slide { perspective: 900px; }
.auth-card { transition: transform 0.2s ease; transform-style: preserve-3d; }
.float-a, .float-b, .float-c, .orb, .seal, .hop {
    transform-box: fill-box;
    transform-origin: center;
}
.float-a { animation: floaty 3.4s ease-in-out infinite; }
.float-b { animation: floaty 4.1s ease-in-out infinite reverse; }
.float-c { animation: floaty 3.8s ease-in-out 0.4s infinite; }
.orb { animation: floaty 2.6s ease-in-out infinite, pulse 2.6s ease-in-out infinite; }
.hop { animation: hop 1.6s ease-in-out infinite; }
.hop.delay { animation-delay: 0.2s; }
.hop.delay-2 { animation-delay: 0.4s; }
.ink {
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
    animation: draw 2.4s ease forwards infinite;
}
.line-grow { transform-origin: left center; animation: grow 2.8s ease-in-out infinite; }
.line-grow.delay { animation-delay: 0.35s; }
.route { stroke-dasharray: 7 8; animation: march 1.1s linear infinite; }
.seal { animation: pop 2.8s ease-in-out infinite; }
.auth-pill strong { animation: floaty 3s ease-in-out infinite; display: block; }
.auth-card:hover .float-a,
.auth-card:hover .float-b,
.auth-card:hover .float-c { animation-duration: 1.6s; }
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes hop {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
}
@keyframes draw {
    0% { stroke-dashoffset: 90; }
    60%, 100% { stroke-dashoffset: 0; }
}
@keyframes grow {
    0%, 100% { transform: scaleX(0.72); }
    50% { transform: scaleX(1); }
}
@keyframes march { to { stroke-dashoffset: -36; } }
@keyframes pop {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .float-a, .float-b, .float-c, .orb, .hop, .ink, .line-grow, .route, .plane, .seal, .auth-pill strong { animation: none; }
}
.auth-pill {
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0.75rem;
    padding: 0.7rem 0.75rem;
}
.auth-pill span { display: block; color: #6F6B7D; font-size: 15px; }
.auth-pill strong { display: block; color: #2F2B3D; font-size: 1.35rem; font-weight: 600; }
.auth-caption {
    max-width: 28rem;
    text-align: center;
    color: #6F6B7D;
    margin: 0;
    min-height: 3.2rem;
}
.auth-dots { display: flex; gap: 0.4rem; align-items: center; }
.auth-dots button {
    width: 1.35rem;
    height: 0.28rem;
    padding: 0;
    border: 0;
    border-radius: 1rem;
    background: #D5D6DC;
}
.auth-dots button.is-on { width: 2.1rem; background: #E85D04; }
.w-px-400 { width: min(400px, 100%); }
.auth-mark { width: 6.5rem; height: auto; }
.auth-switch {
    color: #6F6B7D;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
.auth-switch:hover { color: #E85D04; }

.menu-backdrop { display: none; }
@media (max-width: 1199.98px) {
    .layout-menu {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        transform: translateX(-105%);
        transition: transform .2s ease;
        z-index: 1090;
    }
    .layout-menu.is-open { transform: none; }
    body.menu-open { overflow: hidden; }
    .menu-backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(17,17,17,.45);
        z-index: 1020;
    }
    .navbar-search { display: none !important; }
    .layout-page { padding: 0 0.85rem 1.5rem; }
    .layout-navbar {
        position: sticky;
        top: 0;
        z-index: 1080;
        margin-top: 0.65rem;
        height: 3.6rem;
        min-height: 3.6rem;
        padding: 0 0.45rem;
        flex-wrap: nowrap;
        overflow: visible;
    }
    .layout-navbar .navbar-nav-right,
    .layout-navbar .navbar-nav { flex-wrap: nowrap; overflow: visible; }
    .layout-navbar .nav-item.dropdown { position: static; }
    .layout-navbar.navbar-expand-xl .navbar-nav .dropdown-menu {
        position: absolute;
        top: calc(100% + 0.45rem);
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
        z-index: 1085;
    }
    .content-wrapper { position: relative; z-index: 1; }
    .container-p-y { padding-top: 1rem; }
    .layout-page .row {
        --bs-gutter-x: 0.85rem;
        --bs-gutter-y: 0.85rem;
    }
    .card-body { padding: 1rem 1rem; }
    .card-header { padding: 1rem 1rem 0.75rem; }
    .table td, .table thead th { padding: 0.75rem 0.85rem; }
    .app-brand { min-height: 4.75rem; padding: 0.85rem 2.4rem 0.7rem; }
    .menu-inner { padding-top: 0.45rem; }
    .menu-item .menu-link { margin-top: 0.18rem; margin-bottom: 0.18rem; padding-top: 0.62rem; padding-bottom: 0.62rem; }
}
.min-w-0 { min-width: 0; }
.layout-page,
.content-wrapper,
.container-p-y,
.card,
.row > * { min-width: 0; }
.table-responsive { max-width: 100%; }
@media (max-width: 767.98px) {
    .card-header.d-flex {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }
    .card-header .btn {
        width: 100%;
        justify-content: center;
        white-space: normal;
    }
    .card-header form,
    .card-header form.d-flex { flex-direction: column; width: 100%; }
    .card-header .form-select,
    .card-header .form-control,
    .card-body .form-select,
    .card-body .form-control { width: 100%; min-width: 0; }
    .card-body .d-flex { flex-wrap: wrap; }
    .card-body .d-flex > .btn,
    .card-body .d-flex > .form-select { flex: 1 1 auto; }
    .nav-pills { flex-wrap: nowrap; overflow-x: auto; gap: 0.25rem; max-width: 100%; }
    .nav-pills .nav-link { white-space: nowrap; }
    h4.d-flex { flex-wrap: wrap; }
    .card-body small,
    .card-body h4,
    .card-body h5 { overflow-wrap: anywhere; }
}
@media (min-width: 1400px) {
    .layout-page { padding: 0 2.25rem 2.25rem; }
}

.hi, [data-lucide] {
    width: 1.15em;
    height: 1.15em;
    stroke-width: 2;
}
.menu-icon .hi,
.menu-icon [data-lucide] { width: 1.05rem; height: 1.05rem; }
.avatar-initial .hi,
.avatar-initial [data-lucide] { width: 1.35rem; height: 1.35rem; }
.avatar-initial > i { font-size: 1.2rem; line-height: 1; }
.nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.nav-pills .nav-link .hi,
.nav-pills .nav-link [data-lucide] { width: 1rem; height: 1rem; }
.dropdown-item .hi,
.dropdown-item [data-lucide] { width: 1rem; height: 1rem; vertical-align: -2px; }
.scene { width: 220px; height: auto; flex-shrink: 0; }
.scene-plate {
    background: #fff;
    border-radius: 1.1rem;
    padding: 0.35rem 0.6rem 0.15rem;
    width: fit-content;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.badge .hi,
.badge [data-lucide] { width: 0.95rem; height: 0.95rem; }
.dropdown-item > i,
.dropdown-item > svg { margin-right: 0.4rem; }
.scene-lg { width: min(100%, 280px); }
.folder-tile {
    background: linear-gradient(165deg, #fff 40%, #FFF4EC 100%);
    border: 1px solid #F3E4D8 !important;
}
.menu-footer h6 .fa-solid { color: #FCD34D; margin-right: 0.35rem; }
.channel-pick { margin: 0; }
.channel-pick input { position: absolute; opacity: 0; pointer-events: none; }
.channel-pick span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid #e4e6e8;
    border-radius: 0.6rem;
    padding: 0.55rem 0.8rem;
    background: #fff;
    cursor: pointer;
    font-size: 15px;
}
.channel-pick input:checked + span {
    border-color: #E85D04;
    background: #FFF4EC;
    color: #E85D04;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(232, 93, 4, 0.28);
}
.channel-pick .fa-brands { font-size: 1.05rem; }
.page-mark {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.card-header h5,
.card-header h6 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.card-header h5 .hi,
.card-header h5 [data-lucide],
.card-header h6 .hi,
.card-header h6 [data-lucide] { width: 1.1rem; height: 1.1rem; }
.btn:not(.d-grid):not(.btn-close) {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.btn.w-100 { justify-content: center; }
.btn .hi,
.btn [data-lucide],
.btn svg,
.btn .fa-solid,
.btn .fa-brands { width: 1rem; height: 1rem; font-size: 0.95rem; flex-shrink: 0; }
.overdue-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
}
.overdue-copy { display: flex; flex-direction: column; line-height: 1.2; }
.overdue-copy span { color: rgba(255,255,255,.72); font-size: 15px; }
.overdue-copy strong { color: #fff; font-size: 1.65rem; font-weight: 600; }
@media (min-width: 992px) {
    .overdue-body {
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        height: 100%;
    }
    .overdue-copy strong { font-size: 2rem; }
}
.card.bg-dark,
.card.bg-dark .card-body {
    background-color: #111 !important;
    color: #fff;
}
.card.bg-dark h1,
.card.bg-dark h2,
.card.bg-dark h3,
.card.bg-dark h4,
.card.bg-dark h5,
.card.bg-dark h6 { color: #fff; }
.bg-dark .page-mark { background: rgba(255,255,255,.08) !important; color: #FCD34D !important; }

.toast-stack {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: min(32rem, calc(100vw - 1.5rem));
    pointer-events: none;
}
.app-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 3.75rem;
    padding: 0.7rem 0.7rem 0.7rem 0.85rem;
    background: #111;
    color: #fff;
    border-radius: 0.95rem;
    box-shadow: 0 0.85rem 2.2rem rgba(17, 17, 17, 0.32);
}
.app-toast-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.app-toast-icon svg { width: 1.05rem; height: 1.05rem; }
.app-toast-success .app-toast-icon { background: #28C76F; }
.app-toast-error .app-toast-icon { background: #EA5455; }
.app-toast p {
    margin: 0;
    flex: 1;
    min-width: 0;
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
}
.app-toast-cancel {
    width: 2.35rem;
    height: 2.35rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #fff;
    border-radius: 0.55rem;
    cursor: pointer;
}
.app-toast-cancel svg { width: 1.05rem; height: 1.05rem; }
.app-toast-cancel:hover { background: rgba(255, 255, 255, 0.12); }
@media (max-width: 575.98px) {
    .toast-stack {
        width: calc(100vw - 1rem);
        bottom: 0.75rem;
    }
    .app-toast { min-height: 3.5rem; }
}

.portal-auth-form {
    background:
        radial-gradient(circle at 88% 0%, rgba(232, 93, 4, 0.14), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(17, 17, 17, 0.05), transparent 28%),
        #fff;
}
.portal-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 0%, rgba(232, 93, 4, 0.16), transparent 26%),
        radial-gradient(circle at 100% 12%, rgba(255, 183, 120, 0.28), transparent 24%),
        #F5F5F9;
}
.portal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.5rem;
    background: #111;
    color: #fff;
}
.portal-brand,
.portal-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.portal-brand strong,
.portal-user strong { display: block; color: #fff; font-weight: 600; line-height: 1.2; }
.portal-brand small,
.portal-user small { display: block; color: #B9B9BE; font-size: 15px; }
.portal-user-copy { min-width: 0; }
.portal-user-copy strong,
.portal-user-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-top .btn-outline-light {
    border-color: rgba(255,255,255,.28);
    color: #fff;
    white-space: nowrap;
}
.portal-top .btn-outline-light:hover { background: #E85D04; border-color: #E85D04; color: #fff; }
.portal-main { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 1.75rem 0 3rem; }
.portal-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.35rem 1.4rem;
    border-radius: 1rem;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.85);
    box-shadow: 0 0.75rem 2rem rgba(47, 43, 61, 0.06);
    backdrop-filter: blur(14px);
}
.portal-hero h4 { color: #2F2B3D; }
.portal-hero p { color: #6F6B7D; }
.portal-hero-note {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.85rem;
    background: #111;
    color: #fff;
}
.portal-hero-note small { display: block; color: #B9B9BE; }
.portal-hero-note strong { color: #fff; }
.portal-hero-note .hi,
.portal-hero-note [data-lucide],
.portal-hero-note i { color: #E85D04; }
.portal-stat .card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}
.portal-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0;
    color: #6F6B7D;
}
.portal-step-mark {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 2px solid #e4e6e8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1;
}
.portal-step.is-done { color: #2F2B3D; }
.portal-step.is-done .portal-step-mark {
    background: #28C76F;
    border-color: #28C76F;
    color: #fff;
}
.portal-step.is-now { color: #2F2B3D; font-weight: 600; }
.portal-step.is-now .portal-step-mark {
    background: #E85D04;
    border-color: #E85D04;
    color: #fff;
}
.portal-stat small { color: #6F6B7D; }
.portal-stat strong { color: #2F2B3D; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.portal-doc,
.portal-empty,
.portal-file {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}
.portal-doc {
    padding: 1rem 0;
    border-top: 1px solid #e4e6e8;
}
.portal-doc:first-child { border-top: 0; padding-top: 0; }
.portal-doc-body { flex: 1; min-width: 0; }
.portal-upload {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}
.portal-upload .form-control { flex: 1; min-width: 0; }
.portal-upload .btn { white-space: nowrap; }
.portal-empty p { color: #6F6B7D; }
.portal-empty strong { display: block; color: #2F2B3D; margin-bottom: 0.15rem; }
.portal-note {
    margin-bottom: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: 0.85rem;
    background: #F8F8FA;
}
.portal-note.is-client { background: #F3FBFD; }
.portal-note.is-office { background: #FFF8F3; }
.portal-note strong { display: block; color: #2F2B3D; margin-bottom: 0.25rem; }
.portal-compose {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e4e6e8;
}
.portal-file { align-items: center; }
.portal-file-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 767.98px) {
    .portal-top { flex-direction: column; align-items: stretch; }
    .portal-user { justify-content: space-between; }
    .portal-hero { flex-direction: column; align-items: flex-start; }
    .portal-upload { flex-direction: column; align-items: stretch; }
    .portal-upload .btn { width: 100%; }
}

.staff-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}
.staff-metric {
    border: 1px solid #e4e6e8;
    border-radius: 0.375rem;
    padding: 0.65rem 0.5rem;
    text-align: center;
}
.staff-metric-icon {
    display: block;
    color: #E85D04;
    margin-bottom: 0.2rem;
}
.staff-metric-label {
    display: block;
    color: #6F6B7D;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}
.staff-metric-value {
    display: block;
    margin-top: 0.15rem;
    color: #2F2B3D;
    font-weight: 500;
}