/*
-------------------------------------------------
  Codesla Emlak — panel component layer (Squirclemorphism)
  Loaded after every vendor and theme stylesheet. Reads tokens.css only.

  1. Base & typography        8. Tables & DataTables
  2. Continuous corners       9. Tabs, pills, pagination
  3. Shell: sidebar           10. Modals, dropdowns, popovers
  4. Shell: topbar            11. Feedback: toast, alert, swal
  5. Content surfaces         12. Page patterns
  6. Buttons & badges         13. Auth pages
  7. Forms                    14. Responsive & preferences
-------------------------------------------------
*/

/* 1. Base & typography
------------------------------------------------- */
html,
body {
    background: var(--ui-background);
}

body {
    font-family: var(--ui-font-sans);
    font-size: var(--ui-font-size-base);
    line-height: var(--ui-line-height);
    color: var(--ui-text-secondary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ui-font-sans);
    color: var(--ui-text);
    font-weight: var(--ui-weight-semibold);
    letter-spacing: var(--ui-tracking-tight);
}

h1 { font-size: 34px; line-height: 1.2; }
h2 { font-size: 28px; line-height: 1.25; }
h3 { font-size: 23px; line-height: 1.3; }
h4 { font-size: 18px; line-height: 1.35; }
h5 { font-size: 16px; line-height: 1.4; }
h6 { font-size: var(--ui-font-size-base); line-height: 1.45; font-weight: var(--ui-weight-semibold); }

p {
    color: var(--ui-text-secondary);
    font-size: var(--ui-font-size-base);
    line-height: var(--ui-line-height);
}

a {
    color: var(--ui-primary);
    transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
}

a:hover {
    color: var(--ui-primary-hover) !important;
}

::selection {
    background: var(--ui-accent-soft);
    color: var(--ui-text);
}

.text-muted,
.font-13.text-muted {
    color: var(--ui-muted) !important;
}

.color-heading,
.text-dark {
    color: var(--ui-text) !important;
}

.theme-text-color {
    color: var(--ui-text-secondary);
}

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

.secondary-color,
.theme-secondary-link {
    color: var(--ui-accent-text) !important;
}

.orange-color { color: var(--ui-accent) !important; }
.green-color, .text-success { color: var(--ui-success) !important; }
.red-color, .text-danger, .theme-link-red { color: var(--ui-danger) !important; }
.text-warning { color: var(--ui-warning) !important; }
.text-info { color: var(--ui-primary) !important; }

.theme-link {
    color: var(--ui-primary);
    font-weight: var(--ui-weight-medium);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
}

.theme-link:hover {
    color: var(--ui-primary-hover) !important;
    text-decoration-color: currentColor;
}

.font-medium { font-weight: var(--ui-weight-medium); }
.font-semi-bold, .fw-bold, .font-bold, b, strong { font-weight: var(--ui-weight-semibold) !important; }

/* Numbers line up in tables, KPIs and money columns. */
h1, h2, h3, td, .tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Keyboard focus is always visible, never the browser's default glow. */
:focus {
    outline: none;
}

:focus-visible,
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ui-focus) !important;
    outline-offset: 2px;
    box-shadow: none;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
}

/* Thin, quiet scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ui-border-strong) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background-color: var(--ui-border);
    border: 3px solid transparent;
    border-radius: var(--ui-radius-pill);
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--ui-border-strong); }

/* 2. Continuous corners
   One list for every element that carries the squircle corner, so the
   language stays consistent and the fallback stays a plain border-radius.
------------------------------------------------- */
.page-content-wrapper,
.vertical-menu,
.card,
.modal-content,
.dropdown-menu,
.select2-dropdown,
.ui-datepicker,
#ui-datepicker-div,
.swal2-popup,
.toast,
#toast-container > div,
.alert,
.dashboard-feature-item,
.bg-off-white.theme-border,
.theme-border.radius-4,
.theme-border.radius-10,
.theme-border.radius-20,
.radius-10,
.radius-20,
table.table,
.theme-btn,
.theme-btn-purple,
.theme-btn-green,
.theme-btn-red,
.theme-btn-back,
.edit-btn,
.btn,
.status-btn,
.badge,
.form-control,
.form-select,
.input-group,
.select2-container .select2-selection,
.dropify-wrapper,
.dropzone,
.header-item,
#sidebar-menu ul li a,
#sidebar-menu ul li a i,
.dashboard-feature-item-icon-wrap,
.nav-tabs .nav-link,
.nav-pills .nav-link,
.page-link,
.dropdown-item,
.property-item-img-wrap,
.property-item-img,
.document-item-box,
.account-settings-menu-item,
.sidebar-brand-link,
.codesla-demo-login button,
.form-stepper-nav-icon,
.ticket-item-content-box,
.notification-item .d-flex {
    corner-shape: var(--ui-corner-shape, round);
}

/* 3. Shell: sidebar
------------------------------------------------- */
#layout-wrapper {
    min-height: 100vh;
}

.vertical-menu {
    position: fixed;
    top: var(--ui-shell-gap);
    bottom: var(--ui-shell-gap);
    left: var(--ui-shell-gap);
    width: var(--ui-sidebar-width);
    z-index: var(--ui-z-sidebar);
    display: flex;
    flex-direction: column;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-2xl);
    box-shadow: var(--ui-shadow-2);
    overflow: hidden;
    transition: width var(--ui-duration-slow) var(--ui-ease), transform var(--ui-duration-slow) var(--ui-ease), visibility var(--ui-duration-slow);
}

.vertical-menu > [data-simplebar] {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}

.sidebar-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 76px;
    padding: 0 var(--ui-space-5);
    border-bottom: 1px solid var(--ui-border);
}

.sidebar-brand-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--ui-space-1) var(--ui-space-2);
    margin-left: calc(var(--ui-space-2) * -1);
    border-radius: var(--ui-radius-md);
}

.sidebar-brand-link img {
    display: block;
    height: 34px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

.sidebar-brand-link .sidebar-logo-sm {
    display: none;
    height: 34px;
    width: 34px;
}

.sidebar-footer {
    flex: 0 0 auto;
    padding: var(--ui-space-4) var(--ui-space-5) var(--ui-space-5);
    border-top: 1px solid var(--ui-border);
    font-size: var(--ui-font-size-xs);
    color: var(--ui-muted);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}

.sidebar-footer-mark {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

#sidebar-menu {
    padding: var(--ui-space-4) var(--ui-space-3) var(--ui-space-6);
}

#sidebar-menu .menu-title {
    padding: var(--ui-space-4) var(--ui-space-3) var(--ui-space-2);
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

#sidebar-menu > ul > li + li {
    margin-top: 2px;
}

#sidebar-menu ul li a {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    min-height: 46px;
    padding: 6px var(--ui-space-3) 6px 6px;
    border-radius: var(--ui-radius-md);
    color: var(--ui-text-secondary);
    font-size: 14.5px;
    font-weight: var(--ui-weight-medium);
    line-height: 1.3;
    transition: background-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease);
}

#sidebar-menu ul li a > span {
    flex: 1 1 auto;
    min-width: 0;
}

#sidebar-menu ul li a i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    font-size: 17px;
    line-height: 1;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-sunken);
    color: var(--ui-primary);
    transition: background-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease);
}

#sidebar-menu ul li a:hover {
    background: var(--ui-surface-hover);
    color: var(--ui-text) !important;
}

#sidebar-menu ul li a:hover i {
    color: var(--ui-primary) !important;
    background: var(--ui-primary-soft);
}

#sidebar-menu .has-arrow:after {
    content: "\f0140";
    font-family: "Material Design Icons";
    margin-left: auto;
    float: none;
    font-size: 18px;
    color: var(--ui-muted);
    transition: transform var(--ui-duration) var(--ui-ease);
}

/* Current page (a direct link) — the saturated primary fill. */
#sidebar-menu > ul > li > a.active:not(.has-arrow),
#sidebar-menu > ul > li.mm-active > a:not(.has-arrow) {
    background: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
}

#sidebar-menu > ul > li > a.active:not(.has-arrow) i,
#sidebar-menu > ul > li.mm-active > a:not(.has-arrow) i {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--ui-accent-on-primary) !important;
}

/* A group that holds the current page — tonal, so the page itself stays the strongest mark. */
#sidebar-menu > ul > li.mm-active > a.has-arrow,
#sidebar-menu > ul > li > a.has-arrow.mm-active {
    background: var(--ui-primary-soft);
    color: var(--ui-text) !important;
}

#sidebar-menu > ul > li.mm-active > a.has-arrow i,
#sidebar-menu > ul > li > a.has-arrow.mm-active i {
    background: var(--ui-surface) !important;
    color: var(--ui-primary) !important;
}

#sidebar-menu ul li ul.sub-menu {
    position: relative;
    margin: 4px 0 6px 22px;
    padding: 0 0 0 var(--ui-space-3);
    border-left: 1px solid var(--ui-border);
}

#sidebar-menu ul li ul.sub-menu li a {
    min-height: 38px;
    padding: 8px var(--ui-space-3);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-weight-medium);
    color: var(--ui-text-secondary);
    border-radius: var(--ui-radius-sm);
}

#sidebar-menu ul li ul.sub-menu li a::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin: 0;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-border-strong);
    transition: background-color var(--ui-duration) var(--ui-ease), transform var(--ui-duration) var(--ui-ease);
}

#sidebar-menu ul li ul.sub-menu li:hover a::before {
    background: var(--ui-primary);
}

#sidebar-menu ul li ul.sub-menu li.mm-active > a,
#sidebar-menu ul li ul.sub-menu li > a.active {
    color: var(--ui-text) !important;
    font-weight: var(--ui-weight-semibold);
    background: var(--ui-surface-sunken);
}

#sidebar-menu ul li ul.sub-menu li.mm-active > a::before,
#sidebar-menu ul li ul.sub-menu li > a.active::before {
    background: var(--ui-accent) !important;
    transform: scale(1.35);
}

#sidebar-menu ul li ul.sub-menu li ul.sub-menu {
    margin-left: 10px;
}

#sidebar-menu ul li .badge {
    margin-left: auto;
}

/* Collapsed sidebar (desktop) */
.vertical-collpsed .vertical-menu {
    position: fixed;
    width: var(--ui-sidebar-collapsed-width) !important;
    overflow: visible;
    z-index: var(--ui-z-sidebar);
}

.vertical-collpsed .sidebar-brand {
    justify-content: center;
    padding: 0;
}

.vertical-collpsed .sidebar-brand-link {
    margin: 0;
}

.vertical-collpsed .sidebar-brand-link .sidebar-logo-lg,
.vertical-collpsed .sidebar-footer-text {
    display: none;
}

.vertical-collpsed .sidebar-brand-link .sidebar-logo-sm {
    display: block;
}

.vertical-collpsed .sidebar-footer {
    justify-content: center;
    padding-inline: 0;
}

.vertical-collpsed #sidebar-menu {
    padding-inline: var(--ui-space-3);
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a {
    min-height: 50px;
    padding: 8px;
    justify-content: center;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a span {
    display: none;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a i {
    width: 38px;
    min-width: 38px;
    height: 38px;
}

/* Flyout labels and submenus beside the collapsed rail */
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
    width: auto;
    background: var(--ui-surface-hover);
    color: var(--ui-text);
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a span {
    display: none;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul,
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:focus-within > ul {
    display: block;
    position: absolute;
    left: calc(100% + 10px);
    top: 0;
    width: 230px;
    margin: 0;
    padding: var(--ui-space-2);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-3);
    z-index: var(--ui-z-dropdown);
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a,
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:focus-within > ul a {
    width: auto;
    padding: 8px var(--ui-space-3);
    box-shadow: none;
    color: var(--ui-text-secondary);
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul ul {
    background: var(--ui-surface);
}

.vertical-collpsed .vertical-menu .simplebar-content-wrapper,
.vertical-collpsed .vertical-menu .simplebar-mask {
    overflow: visible !important;
}

/* 4. Shell: topbar
------------------------------------------------- */
#page-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: calc(var(--ui-sidebar-width) + var(--ui-shell-gap));
    z-index: var(--ui-z-topbar);
    background: var(--ui-background);
    transition: left var(--ui-duration-slow) var(--ui-ease);
}

.vertical-collpsed #page-topbar {
    left: calc(var(--ui-sidebar-collapsed-width) + var(--ui-shell-gap));
}

.navbar-header {
    height: var(--ui-topbar-height);
    padding: 0 calc(var(--ui-shell-gap) * 1.5) 0 var(--ui-shell-gap);
    gap: var(--ui-space-3);
}

.navbar-header > .d-flex {
    align-items: center;
    gap: var(--ui-space-2);
}

/* The topbar brand only shows when the sidebar is a drawer (narrow screens). */
.navbar-brand-box {
    display: none;
    width: auto;
    padding: 0;
    background: transparent;
}

.navbar-brand-box .logo {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.navbar-brand-box .logo img {
    height: 30px;
    width: auto;
}

.header-item {
    height: 44px;
    min-width: 44px;
    padding: 0 var(--ui-space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-1) !important;
    font-size: var(--ui-font-size-base);
    transition: background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
}

.header-item:hover,
.navbar-header .dropdown .show.header-item {
    background: var(--ui-surface-hover);
    border-color: var(--ui-border-strong) !important;
}

#vertical-menu-btn {
    width: 44px;
    padding: 0;
    font-size: 20px !important;
}

.noti-icon i {
    font-size: 18px;
    color: var(--ui-primary);
}

.noti-icon .noti-dot {
    top: 9px;
    right: 9px;
    width: 8px;
    height: 8px;
    background: var(--ui-accent);
    box-shadow: 0 0 0 2px var(--ui-surface);
}

.pulse {
    animation: none;
}

.header-lang-code {
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-weight-semibold);
    letter-spacing: 0.04em;
    color: var(--ui-text);
}

.dropdown-item .header-lang-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
    padding: 0 6px;
    border-radius: var(--ui-radius-xs);
    corner-shape: var(--ui-corner-shape, round);
    background: var(--ui-surface-sunken);
    border: 1px solid var(--ui-border);
}

.user-dropdown .header-item {
    padding: 0 var(--ui-space-3) 0 5px;
}

.header-profile-user {
    width: 32px !important;
    height: 32px !important;
    background: var(--ui-surface-tint);
    border-radius: var(--ui-radius-sm) !important;
    corner-shape: var(--ui-corner-shape, round);
    object-fit: cover;
}

.user-dropdown .mdi-chevron-down {
    color: var(--ui-muted);
}

.exclamation-area {
    border-radius: var(--ui-radius-md);
}

/* 5. Content surfaces
------------------------------------------------- */
.main-content {
    margin-left: calc(var(--ui-sidebar-width) + var(--ui-shell-gap) * 2);
    overflow: visible;
    transition: margin-left var(--ui-duration-slow) var(--ui-ease);
}

.vertical-collpsed .main-content {
    margin-left: calc(var(--ui-sidebar-collapsed-width) + var(--ui-shell-gap) * 2);
}

.page-content {
    padding: var(--ui-topbar-height) calc(var(--ui-shell-gap) * 1.5) var(--ui-space-8) 0;
}

.page-content > .container-fluid {
    padding-inline: 0;
    max-width: 1680px;
}

/* The main working surface of every page. */
.page-content-wrapper {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-2xl) !important;
    box-shadow: var(--ui-shadow-1);
    padding: var(--ui-space-10) !important;
    min-height: calc(100vh - var(--ui-topbar-height) - var(--ui-space-8));
}

.page-content-wrapper.bg-transparent,
.page-content-wrapper.p-0 {
    padding: 0 !important;
}

/* Page heading row */
.page-title-box {
    padding-bottom: var(--ui-space-6);
    margin-bottom: var(--ui-space-8) !important;
    gap: var(--ui-space-4);
    flex-wrap: wrap;
}

.page-title-box.border-bottom {
    border-bottom: 1px solid var(--ui-border) !important;
}

.page-title-box h2,
.page-title-box h3 {
    font-size: 26px;
    line-height: 1.25;
    font-weight: var(--ui-weight-semibold);
}

.page-title-box .page-title-left p {
    margin-top: var(--ui-space-1);
    color: var(--ui-muted);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}

.breadcrumb {
    font-size: var(--ui-font-size-sm);
    margin: 0;
}

.breadcrumb-item a {
    color: var(--ui-muted);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--ui-text) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--ui-border-strong);
    padding-right: var(--ui-space-2);
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: var(--ui-space-2);
}

.breadcrumb-item.active {
    color: var(--ui-text);
    font-weight: var(--ui-weight-medium);
}

/* Inner panels: the theme marks them with bg-off-white + theme-border. Tonal,
   opaque, with a hairline edge and generous padding so content keeps clear of
   the continuous corner. */
.bg-off-white.theme-border,
.theme-border.radius-4.bg-off-white,
.billing-center-area,
.settings-inner-box,
.account-settings-rightside .bg-off-white {
    background: var(--ui-surface-sunken) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-xl) !important;
}

.bg-off-white.theme-border.p-20,
.bg-off-white.theme-border.p-25,
.billing-center-area.p-25,
.bg-off-white.theme-border.p-30 {
    padding: var(--ui-space-7) !important;
}

.bg-off-white.theme-border.pb-0,
.billing-center-area.pb-0 {
    padding-bottom: 0 !important;
}

.bg-off-white.theme-border.pt-0 {
    padding-top: 0 !important;
}

.bg-white.theme-border,
.theme-border.bg-white {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-xl) !important;
}

.theme-border {
    border-color: var(--ui-border) !important;
}

.radius-4 { border-radius: var(--ui-radius-sm); }
.radius-5, .radius-8 { border-radius: var(--ui-radius-sm); }
.radius-10 { border-radius: var(--ui-radius-md); }
.radius-20 { border-radius: var(--ui-radius-xl); }
.radius-50, .rounded-circle { border-radius: 50% !important; corner-shape: round; }

.bg-light { background-color: var(--ui-surface-sunken) !important; }
.bg-white { background-color: var(--ui-surface) !important; }
.bg-off-white { background-color: var(--ui-surface-sunken); }
.bg-primary, .bg-primary-color { background-color: var(--ui-primary) !important; }
.bg-blue-transparent { background-color: var(--ui-primary-soft); }
.bg-red-transparent { background-color: var(--ui-danger-soft); }
.bg-green-transparent { background-color: var(--ui-success-soft); }
.bg-orange-transparent, .bg-purple-transparent { background-color: var(--ui-accent-soft); }
.bg-orange { background-color: var(--ui-accent); }
.bg-green { background-color: var(--ui-success); }
.bg-red { background-color: var(--ui-danger); }

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

hr {
    border-color: var(--ui-border);
    opacity: 1;
}

/* Bootstrap cards */
.card {
    --bs-card-border-color: var(--ui-border);
    --bs-card-border-radius: var(--ui-radius-xl);
    --bs-card-inner-border-radius: calc(var(--ui-radius-xl) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-spacer-y: var(--ui-space-6);
    --bs-card-spacer-x: var(--ui-space-7);
    --bs-card-cap-padding-y: var(--ui-space-5);
    --bs-card-cap-padding-x: var(--ui-space-7);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-1);
}

.card-header {
    border-bottom: 1px solid var(--ui-border);
}

.card-title {
    color: var(--ui-text);
    font-weight: var(--ui-weight-semibold);
}

/* KPI tiles */
.dashboard-feature-item {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 148px;
    height: calc(100% - 25px);
    padding: var(--ui-space-6) !important;
    background: var(--ui-surface-sunken) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-xl) !important;
}

.dashboard-feature-item-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-1);
    font-size: 21px !important;
}

.dashboard-feature-item p {
    margin-top: var(--ui-space-4) !important;
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-weight-medium);
    color: var(--ui-muted);
}

.dashboard-feature-item h2,
.dashboard-feature-item h3 {
    margin-top: var(--ui-space-1) !important;
    font-size: var(--ui-font-size-kpi);
    line-height: 1.15;
    font-weight: var(--ui-weight-semibold);
    letter-spacing: -0.02em;
    color: var(--ui-text);
}

/* Charts: let the chart breathe inside its panel and use the panel's type. */
.apexcharts-canvas,
.apexcharts-canvas text,
.apexcharts-tooltip,
.apexcharts-legend-text {
    font-family: var(--ui-font-sans) !important;
}

.apexcharts-tooltip.apexcharts-theme-light {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: var(--ui-shadow-3) !important;
    background: var(--ui-surface) !important;
}

/* Preloader */
#preloader {
    background: var(--ui-background);
    z-index: var(--ui-z-preloader);
}

#preloaderInner img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    animation: codesla-breathe 1.4s var(--ui-ease) infinite alternate;
}

@keyframes codesla-breathe {
    from { transform: scale(0.92); opacity: 0.7; }
    to { transform: scale(1); opacity: 1; }
}

/* Empty states shipped as images */
img[src$="empty-img.png"] {
    width: 132px;
    height: auto;
    opacity: 1;
}

/* 6. Buttons & badges
------------------------------------------------- */
.theme-btn,
.theme-btn-purple,
.theme-btn-green,
.theme-btn-red,
.theme-btn-back,
.edit-btn {
    position: relative;
    z-index: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    min-height: 46px;
    padding: 0 22px !important;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-md);
    font-family: var(--ui-font-sans);
    font-size: var(--ui-font-size-base);
    font-weight: var(--ui-weight-semibold) !important;
    line-height: 1.2;
    letter-spacing: 0.005em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease), transform var(--ui-duration-fast) var(--ui-ease);
}

.theme-btn:active,
.theme-btn-purple:active,
.theme-btn-green:active,
.theme-btn-red:active,
.theme-btn-back:active,
.edit-btn:active {
    transform: translateY(1px);
}

.theme-btn {
    background-color: var(--ui-primary);
    color: var(--ui-on-primary) !important;
    box-shadow: 0 1px 2px rgba(36, 42, 52, 0.16);
}

.theme-btn:hover {
    background-color: var(--ui-primary-hover) !important;
    color: var(--ui-on-primary) !important;
}

/* The theme's "purple" secondary button is the amber accent action. */
.theme-btn-purple {
    background-color: var(--ui-accent);
    color: var(--ui-on-accent) !important;
}

.theme-btn-purple:hover {
    background-color: var(--ui-accent-hover) !important;
    color: var(--ui-on-accent) !important;
}

.theme-btn-green {
    background-color: var(--ui-success);
    color: #FFFFFF !important;
}

.theme-btn-green:hover {
    background-color: var(--ui-success-hover) !important;
    color: #FFFFFF !important;
}

.theme-btn-red {
    background-color: var(--ui-danger);
    color: #FFFFFF !important;
}

.theme-btn-red:hover {
    background-color: var(--ui-danger-hover) !important;
    color: #FFFFFF !important;
}

.theme-btn-back {
    background-color: var(--ui-surface);
    border-color: var(--ui-border-strong);
    color: var(--ui-text) !important;
}

.theme-btn-back:hover {
    background-color: var(--ui-surface-hover);
    color: var(--ui-text) !important;
}

.edit-btn {
    background: var(--ui-surface);
    border: 1px solid var(--ui-primary);
    color: var(--ui-primary) !important;
}

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

.theme-btn:disabled,
.theme-btn.disabled,
.theme-btn-purple:disabled,
.theme-btn-green:disabled,
.theme-btn-red:disabled,
.theme-btn-back:disabled,
.btn:disabled,
.btn.disabled {
    opacity: 1;
    cursor: not-allowed;
    background-color: var(--ui-surface-tint) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-muted) !important;
    box-shadow: none;
    transform: none;
}

/* Bootstrap buttons speak the same language. */
.btn {
    --bs-btn-padding-x: 18px;
    --bs-btn-padding-y: 10px;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--ui-radius-md);
    --bs-btn-focus-box-shadow: none;
    font-family: var(--ui-font-sans);
    border-radius: var(--ui-radius-md);
}

/* style.css zeroes .btn padding; variant buttons get their size back. */
.btn:where(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark, [class*="btn-outline-"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    min-height: 44px;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
}

.btn-sm:where(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark, [class*="btn-outline-"]) {
    min-height: 34px;
}

.btn-sm {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 6px;
    --bs-btn-border-radius: var(--ui-radius-sm);
    border-radius: var(--ui-radius-sm);
}

.btn-primary,
.btn-info {
    --bs-btn-bg: var(--ui-primary);
    --bs-btn-border-color: var(--ui-primary);
    --bs-btn-color: var(--ui-on-primary);
    --bs-btn-hover-bg: var(--ui-primary-hover);
    --bs-btn-hover-border-color: var(--ui-primary-hover);
    --bs-btn-hover-color: var(--ui-on-primary);
    --bs-btn-active-bg: var(--ui-primary-pressed);
    --bs-btn-active-border-color: var(--ui-primary-pressed);
    --bs-btn-active-color: var(--ui-on-primary);
}

.btn-secondary,
.btn-light,
.btn-outline-primary,
.btn-outline-secondary {
    --bs-btn-bg: var(--ui-surface);
    --bs-btn-border-color: var(--ui-border-strong);
    --bs-btn-color: var(--ui-text);
    --bs-btn-hover-bg: var(--ui-surface-hover);
    --bs-btn-hover-border-color: var(--ui-border-strong);
    --bs-btn-hover-color: var(--ui-text);
    --bs-btn-active-bg: var(--ui-primary-soft);
    --bs-btn-active-color: var(--ui-text);
}

.btn-success {
    --bs-btn-bg: var(--ui-success);
    --bs-btn-border-color: var(--ui-success);
    --bs-btn-hover-bg: var(--ui-success-hover);
    --bs-btn-hover-border-color: var(--ui-success-hover);
}

.btn-danger {
    --bs-btn-bg: var(--ui-danger);
    --bs-btn-border-color: var(--ui-danger);
    --bs-btn-hover-bg: var(--ui-danger-hover);
    --bs-btn-hover-border-color: var(--ui-danger-hover);
}

.btn-warning {
    --bs-btn-bg: var(--ui-accent);
    --bs-btn-border-color: var(--ui-accent);
    --bs-btn-color: var(--ui-on-accent);
    --bs-btn-hover-bg: var(--ui-accent-hover);
    --bs-btn-hover-border-color: var(--ui-accent-hover);
    --bs-btn-hover-color: var(--ui-on-accent);
}

.btn-close {
    border-radius: var(--ui-radius-sm);
}

/* Row actions in tables: quiet icon buttons with a real hit area. */
.tbl-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--ui-radius-sm);
    corner-shape: var(--ui-corner-shape, round);
    color: var(--ui-text-secondary);
    font-size: 17px;
}

.tbl-action-btn:hover {
    background: var(--ui-primary-soft);
    color: var(--ui-primary) !important;
}

/* Status chips: tinted fill, deep text, and a leading dot — the label always carries the meaning. */
.status-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 28px;
    padding: 3px 12px !important;
    border-radius: var(--ui-radius-sm);
    font-size: 12.5px;
    font-weight: var(--ui-weight-semibold);
    line-height: 1.3;
    white-space: nowrap;
}

.status-btn::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
}

.table .status-btn {
    min-width: 0;
}

.status-btn-blue { background: var(--ui-primary-soft); color: var(--ui-primary); }
.status-btn-green { background: var(--ui-success-soft); color: var(--ui-success); }
.status-btn-red { background: var(--ui-danger-soft); color: var(--ui-danger); }
.status-btn-orange { background: var(--ui-warning-soft); color: var(--ui-warning); }
.status-btn-purple { background: var(--ui-accent-soft); color: var(--ui-accent-text); }

.badge {
    --bs-badge-padding-x: 10px;
    --bs-badge-padding-y: 5px;
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: var(--ui-radius-xs);
    font-size: 12px;
    letter-spacing: 0.01em;
}

.badge.bg-success { background-color: var(--ui-success-soft) !important; color: var(--ui-success); }
.badge.bg-danger { background-color: var(--ui-danger-soft) !important; color: var(--ui-danger); }
.badge.bg-warning { background-color: var(--ui-warning-soft) !important; color: var(--ui-warning); }
.badge.bg-info,
.badge.bg-primary { background-color: var(--ui-primary-soft) !important; color: var(--ui-primary); }
.badge.bg-secondary,
.badge.bg-light,
.sidebar-badge-light { background-color: var(--ui-surface-tint) !important; color: var(--ui-text-secondary); }
.badge.bg-danger a { color: var(--ui-danger) !important; }

/* 7. Forms
------------------------------------------------- */
label,
.form-label,
.label-text-title {
    color: var(--ui-text);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-weight-medium);
    margin-bottom: var(--ui-space-2);
}

.form-control,
.form-select,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: var(--ui-control-height);
    padding: 0 var(--ui-control-padding-x);
    background-color: var(--ui-surface);
    color: var(--ui-text);
    font-family: var(--ui-font-sans);
    font-size: var(--ui-font-size-base);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    box-shadow: none;
    transition: border-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
}

.form-select {
    padding-right: 38px;
    background-position: right 14px center;
    text-overflow: ellipsis;
}

textarea.form-control {
    height: auto;
    min-height: 120px !important;
    padding: 14px var(--ui-control-padding-x);
    line-height: var(--ui-line-height);
}

input[type="file"].form-control {
    padding: 10px var(--ui-control-padding-x);
    line-height: 26px;
}

input[type="file"].form-control::file-selector-button {
    margin: -10px 14px -10px calc(var(--ui-control-padding-x) * -1);
    padding: 0 16px;
    height: calc(var(--ui-control-height) - 2px);
    background: var(--ui-surface-sunken);
    border: 0;
    border-right: 1px solid var(--ui-border);
    color: var(--ui-text);
    font-weight: var(--ui-weight-medium);
}

.form-control::placeholder {
    color: var(--ui-muted);
    opacity: 1;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--ui-text-secondary);
}

.form-control:focus,
.form-select:focus,
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    background-color: var(--ui-surface);
    color: var(--ui-text);
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px rgba(176, 107, 0, 0.28);
    outline: none;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--ui-surface-sunken);
    color: var(--ui-text-secondary);
    border-color: var(--ui-border);
    cursor: not-allowed;
}

.form-control[readonly].datepicker,
.form-control[readonly][type="text"].date {
    background-color: var(--ui-surface);
    cursor: pointer;
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--ui-danger);
    background-image: none;
    padding-right: var(--ui-control-padding-x);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(176, 56, 54, 0.22);
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--ui-success);
    background-image: none;
}

.invalid-feedback,
.error.text-danger,
span.text-danger.error,
.text-danger.small {
    color: var(--ui-danger) !important;
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-weight-medium);
    margin-top: 6px;
}

.input-group {
    border-radius: var(--ui-radius-sm);
    flex-wrap: nowrap;
}

.input-group > .form-control,
.input-group > .form-select {
    min-width: 0;
}

.input-group-text {
    min-height: var(--ui-control-height);
    padding: 0 var(--ui-space-4);
    background: var(--ui-surface-sunken);
    border: 1px solid var(--ui-border-strong);
    color: var(--ui-text-secondary);
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-font-size-base);
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -1px;
}

/* Bootstrap checks and switches */
.form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 0.15em;
    border: 1.5px solid var(--ui-border-strong);
    border-radius: 7px;
    corner-shape: var(--ui-corner-shape, round);
    background-color: var(--ui-surface);
}

.form-check-input[type="radio"] {
    border-radius: 50%;
    corner-shape: round;
}

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

.form-check-input:focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px rgba(176, 107, 0, 0.28);
}

.form-switch .form-check-input {
    width: 40px;
    height: 22px;
    border-radius: var(--ui-radius-pill);
    corner-shape: round;
}

.form-check-label {
    color: var(--ui-text-secondary);
    font-weight: var(--ui-weight-regular);
}

/* The theme's custom checkbox/radio: keep the native input focusable
   (it used display:none) and draw the box on its label. */
.custom-checkbox input,
.custom-radiobox [type="radio"]:checked,
.custom-radiobox [type="radio"]:not(:checked) {
    display: block !important;
    position: absolute !important;
    left: auto !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.custom-checkbox {
    position: relative;
}

.custom-checkbox label {
    gap: 10px;
    color: var(--ui-text-secondary);
    font-weight: var(--ui-weight-regular);
}

.custom-checkbox label:before {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    border: 1.5px solid var(--ui-border-strong);
    border-radius: 7px;
    corner-shape: var(--ui-corner-shape, round);
    background: var(--ui-surface);
    transition: background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
}

.custom-checkbox input:checked + label:before {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
}

.custom-checkbox input:checked + label:after {
    top: 50%;
    left: 7px;
    width: 6px;
    height: 11px;
    margin-top: -7px;
    border: solid var(--ui-on-primary);
    border-width: 0 2px 2px 0;
}

.custom-checkbox input:focus-visible + label:before,
.custom-radiobox [type="radio"]:focus-visible + label:before {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}

.custom-radiobox [type="radio"]:checked + label:before,
.custom-radiobox [type="radio"]:not(:checked) + label:before {
    border: 1.5px solid var(--ui-border-strong);
    background: var(--ui-surface);
}

.custom-radiobox [type="radio"]:checked + label:before {
    border-color: var(--ui-primary);
}

.custom-radiobox [type="radio"]:checked + label:after,
.custom-radiobox [type="radio"]:not(:checked) + label:after {
    background: var(--ui-primary);
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: var(--ui-control-height) !important;
    height: auto !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--ui-surface);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: calc(var(--ui-control-height) - 2px) !important;
    line-height: calc(var(--ui-control-height) - 2px) !important;
    padding: 0 42px 0 var(--ui-control-padding-x) !important;
    color: var(--ui-text);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--ui-control-height) - 2px) !important;
    width: 40px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--ui-primary-soft);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    color: var(--ui-text);
    padding: 2px 8px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px rgba(176, 107, 0, 0.28);
}

.select2-dropdown {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-3) !important;
    overflow: hidden;
    padding: 6px;
    background: var(--ui-surface);
}

.select2-results__option {
    padding: 9px 12px;
    border-radius: var(--ui-radius-xs);
    color: var(--ui-text-secondary);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--ui-primary-soft);
    color: var(--ui-text);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-sm);
    corner-shape: var(--ui-corner-shape, round);
}

/* File drops */
.dropify-wrapper {
    border: 1.5px dashed var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-sunken);
    color: var(--ui-text-secondary);
    font-family: var(--ui-font-sans);
}

.dropify-wrapper:hover {
    background-image: none;
    background-color: var(--ui-surface-hover);
    border-color: var(--ui-primary) !important;
}

.dropify-wrapper .dropify-message p {
    color: var(--ui-text-secondary);
    font-size: var(--ui-font-size-base);
}

.dropify-wrapper .dropify-message span.file-icon {
    color: var(--ui-primary);
}

.dropzone {
    border: 1.5px dashed var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-sunken) !important;
    min-height: 160px;
}

.dropzone:hover {
    border-color: var(--ui-primary) !important;
}

/* jQuery UI datepicker */
#ui-datepicker-div,
.ui-datepicker {
    padding: var(--ui-space-3) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-3) !important;
    font-family: var(--ui-font-sans) !important;
    z-index: var(--ui-z-dropdown) !important;
}

#ui-datepicker-div .ui-widget-header,
.ui-datepicker .ui-datepicker-header {
    background: transparent !important;
    border: 0 !important;
    color: var(--ui-text) !important;
    font-weight: var(--ui-weight-semibold);
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    border-radius: var(--ui-radius-sm) !important;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    background: var(--ui-surface-hover) !important;
    border: 0 !important;
}

.ui-datepicker th {
    color: var(--ui-muted);
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-weight-semibold);
}

.ui-datepicker td a.ui-state-default,
.ui-datepicker td span.ui-state-default {
    border: 0 !important;
    border-radius: var(--ui-radius-xs) !important;
    background: transparent !important;
    color: var(--ui-text) !important;
    text-align: center !important;
    padding: 6px !important;
}

.ui-datepicker td a.ui-state-default:hover {
    background: var(--ui-surface-hover) !important;
}

.ui-datepicker td a.ui-state-highlight {
    box-shadow: inset 0 0 0 1.5px var(--ui-accent);
}

.ui-datepicker td a.ui-state-active {
    background: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    height: 34px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    padding: 0 8px;
    background: var(--ui-surface);
}

/* 8. Tables & DataTables
   Rows stay dense; the large corner moves to the table's outer frame.
------------------------------------------------- */
.table {
    --bs-table-bg: var(--ui-surface);
    --bs-table-color: var(--ui-text-secondary);
    --bs-table-border-color: var(--ui-border);
    --bs-table-hover-bg: var(--ui-surface-hover);
    --bs-table-hover-color: var(--ui-text);
    --bs-table-striped-bg: var(--ui-surface-sunken);
    --bs-table-active-bg: var(--ui-primary-soft);
    color: var(--ui-text-secondary);
    margin-bottom: var(--ui-space-4);
}

table.table,
table.table.dataTable {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    padding: 0 !important;
}

table.table > :not(caption) > * > * {
    padding: 14px 18px;
    border-bottom-width: 1px;
    border-color: var(--ui-border);
    background-color: transparent;
    box-shadow: none;
}

table.table > thead > tr > th,
table.table > thead > tr > td {
    background: var(--ui-surface-sunken);
    color: var(--ui-text) !important;
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-weight-semibold);
    letter-spacing: 0.01em;
    white-space: normal;
    border-bottom: 1px solid var(--ui-border) !important;
    border-top: 0;
    vertical-align: middle;
}

/* Keep header text clear of the curved corners. */
table.table > thead > tr > :first-child,
table.table > tbody > tr > :first-child {
    padding-left: var(--ui-space-6);
}

table.table > thead > tr > :last-child,
table.table > tbody > tr > :last-child {
    padding-right: var(--ui-space-6);
}

table.table > thead > tr:first-child > :first-child { border-top-left-radius: calc(var(--ui-radius-lg) - 1px); }
table.table > thead > tr:first-child > :last-child { border-top-right-radius: calc(var(--ui-radius-lg) - 1px); }
table.table > tbody:last-child > tr:last-child > :first-child { border-bottom-left-radius: calc(var(--ui-radius-lg) - 1px); }
table.table > tbody:last-child > tr:last-child > :last-child { border-bottom-right-radius: calc(var(--ui-radius-lg) - 1px); }

table.table > tbody > tr:last-child > td,
table.table > tbody > tr:last-child > th {
    border-bottom: 0;
}

table.table > tbody > tr {
    transition: background-color var(--ui-duration-fast) var(--ui-ease);
}

table.table > tbody > tr:hover > * {
    background-color: var(--ui-surface-hover);
}

table.table td {
    color: var(--ui-text-secondary);
    font-size: var(--ui-font-size-base);
    vertical-align: middle;
}

table.table td h6,
table.table td .theme-text-color {
    color: var(--ui-text);
}

table th,
table td {
    max-width: 280px;
}

table tr:first-child td,
table tr:first-child th,
table tr:last-child td,
table tr:last-child th {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

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

/* The table draws its own rounded frame; a rounded scroll container would clip
   the DataTables controls that some pages place inside it. */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table-responsive > table.table {
    margin-bottom: 0;
}

table.dataTable > thead > tr > th {
    white-space: nowrap;
}

/* Sort indicators */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
    padding-right: 34px !important;
    cursor: pointer;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    right: 12px !important;
    color: var(--ui-muted);
    opacity: 0.45;
    font-size: 14px !important;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before {
    top: 10px !important;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    top: 18px !important;
}

table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after {
    opacity: 1;
    color: var(--ui-accent-text);
}

table.dataTable tbody > tr.selected > *,
table.dataTable tbody > tr > .selected {
    background-color: var(--ui-primary-soft) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
}

table.dataTable tbody td.focus,
table.dataTable tbody th.focus {
    outline: 2px solid var(--ui-focus) !important;
    background-color: var(--ui-accent-soft);
}

/* Responsive child-row toggles */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > th:first-child:before {
    background-color: var(--ui-primary) !important;
    border: 2px solid var(--ui-surface) !important;
    border-radius: 7px !important;
    box-shadow: var(--ui-shadow-1) !important;
    color: var(--ui-on-primary) !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before {
    background-color: var(--ui-accent) !important;
    color: var(--ui-on-accent) !important;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom: 1px solid var(--ui-border);
    padding: 10px 0;
}

table.dataTable > tbody > tr.child span.dtr-title {
    color: var(--ui-text);
    font-weight: var(--ui-weight-semibold);
    min-width: 120px;
}

/* DataTables controls */
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-5);
    color: var(--ui-text-secondary);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-weight-medium);
}

div.dataTables_wrapper div.dataTables_length select {
    width: auto;
    min-width: 84px;
    height: 40px;
    padding: 0 34px 0 14px;
    border-radius: var(--ui-radius-xs);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23242A34' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 10px;
}

.form-control-sm,
.form-select-sm,
.custom-select-sm {
    border-radius: var(--ui-radius-xs);
}

div.dataTables_wrapper div.dataTables_filter input {
    width: 240px;
    max-width: 100%;
    height: 42px;
    margin-left: 0;
    padding-left: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23696C72' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 17px;
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: var(--ui-space-3) !important;
    color: var(--ui-muted);
    font-size: var(--ui-font-size-sm);
}

div.dataTables_wrapper div.dataTables_processing {
    top: 50%;
    padding: 14px 20px !important;
    margin-top: -26px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    corner-shape: var(--ui-corner-shape, round);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-3);
    color: var(--ui-text);
    font-weight: var(--ui-weight-medium);
}

div.dataTables_wrapper div.dataTables_processing > div:last-child > div {
    background: var(--ui-primary);
}

td.dataTables_empty,
table.table td.dataTables_empty {
    padding: var(--ui-space-12) var(--ui-space-6) !important;
    text-align: center;
    color: var(--ui-muted);
    font-weight: var(--ui-weight-medium);
}

div.dt-buttons .btn,
div.dt-buttons .dt-button,
.buttons-html5,
.buttons-print {
    min-height: 40px;
    padding: 0 16px !important;
    margin-right: 6px;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    corner-shape: var(--ui-corner-shape, round);
    color: var(--ui-text) !important;
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-weight-semibold);
    box-shadow: none !important;
}

div.dt-buttons .btn:hover,
div.dt-buttons .dt-button:hover {
    background: var(--ui-surface-hover) !important;
}

/* 9. Tabs, pills, pagination
------------------------------------------------- */
.pagination {
    gap: 6px;
    flex-wrap: wrap;
    margin-top: var(--ui-space-3);
}

.page-link,
.disabled > .page-link,
.page-link.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--ui-surface);
    color: var(--ui-text-secondary);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-weight-semibold);
}

.page-link:hover {
    background: var(--ui-surface-hover);
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}

.disabled > .page-link,
.page-link.disabled {
    color: var(--ui-muted);
    background: var(--ui-surface-sunken);
    opacity: 0.75;
}

.active > .page-link,
.page-link.active,
.page-item.active .page-link {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
}

.page-item:not(:first-child) .page-link {
    margin-left: 0;
}

/* Segmented tabs: a tonal track with the selected tab raised on the surface. */
.nav-tabs,
.billing-center-nav-tabs,
.message-user-top-part-btns {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md);
    corner-shape: var(--ui-corner-shape, round);
    background: var(--ui-surface-sunken);
}

.nav-tabs .nav-link,
.billing-center-nav-tabs .nav-link,
.message-user-top-part-btns .nav-link {
    min-height: 38px;
    padding: 8px 16px;
    margin: 0;
    border: 1px solid transparent !important;
    border-radius: var(--ui-radius-sm) !important;
    background: transparent;
    color: var(--ui-text-secondary);
    font-weight: var(--ui-weight-semibold);
    font-size: var(--ui-font-size-sm);
}

.nav-tabs .nav-link:hover,
.billing-center-nav-tabs .nav-link:hover {
    color: var(--ui-text) !important;
    background: var(--ui-surface-hover);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active,
.billing-center-nav-tabs .nav-item.show .nav-link,
.billing-center-nav-tabs .nav-link.active,
.message-user-top-part-btns .nav-link.active {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-1);
}

/* The property-type picker uses nav-tabs as option cards. */
.select-property-nav-tabs {
    display: flex;
    padding: 0;
    gap: var(--ui-space-3);
    border: 0 !important;
    background: transparent;
}

.select-property-nav-tabs .nav-link {
    min-height: 52px;
    padding: 12px 18px;
    border: 1px solid var(--ui-border-strong) !important;
    background: var(--ui-surface);
    border-radius: var(--ui-radius-md) !important;
}

.select-property-nav-tabs .nav-link.active {
    border-color: var(--ui-primary) !important;
    box-shadow: inset 0 0 0 1px var(--ui-primary);
}

/* The option buttons carry Bootstrap's p-0/me-4; give them a real hit area. */
.select-property-nav-tabs .nav-link,
.select-property-nav-tabs .nav-link.p-0 {
    padding: 12px 18px !important;
    margin-right: 0 !important;
}

.select-property-nav-text {
    gap: 10px;
    font-weight: var(--ui-weight-semibold);
    color: var(--ui-text);
}

.select-property-nav-text .select-property-nav-text-box {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-right: 0 !important;
    border: 1.5px solid var(--ui-border-strong);
    border-radius: 7px;
    corner-shape: var(--ui-corner-shape, round);
    background: var(--ui-surface);
}

.nav-tabs .nav-link.active .select-property-nav-text-box,
.nav-tabs .nav-item.show .nav-link .select-property-nav-text-box {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
}

.nav-tabs .nav-item.show .nav-link .select-property-nav-text-box::after,
.nav-tabs .nav-link.active .select-property-nav-text-box::after {
    top: 50%;
    left: 8px;
    width: 6px;
    height: 11px;
    margin-top: -7px;
    border-color: var(--ui-on-primary);
    border-width: 0 2px 2px 0;
}

/* Pages without the main surface card still get a page-sized heading. */
.page-content > .container-fluid > .row > .col-12 > .page-title-box > h4,
.page-title-box > .page-title-left > h4 {
    font-size: 24px;
    line-height: 1.3;
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--ui-radius-sm);
    --bs-nav-pills-link-active-bg: var(--ui-primary);
    --bs-nav-pills-link-active-color: var(--ui-on-primary);
}

.nav-pills .nav-link {
    color: var(--ui-text-secondary);
    font-weight: var(--ui-weight-semibold);
}

/* Settings side menus */
.account-settings-menu-item,
.account-settings-menu li a.account-settings-menu-item {
    padding: 10px 14px;
    margin: 2px 0;
    border-radius: var(--ui-radius-md);
    color: var(--ui-text-secondary);
    font-weight: var(--ui-weight-medium);
}

.account-settings-menu-item:hover {
    background: var(--ui-surface-hover);
    color: var(--ui-text) !important;
}

.account-settings-menu-item.active,
.account-settings-menu li.active > a.account-settings-menu-item {
    background: var(--ui-primary);
    color: var(--ui-on-primary) !important;
}

.account-settings-menu-item.active i,
.account-settings-menu-item.active .iconify {
    color: var(--ui-accent-on-primary);
}

.account-settings-menu li ul.account-sub-menu li a::before {
    background-color: var(--ui-border-strong);
}

/* Add-property stepper */
.form-stepper-nav-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
}

#progressbar li {
    color: var(--ui-text-secondary);
    font-weight: var(--ui-weight-semibold);
}

#progressbar li.active,
#progressbar .active {
    color: var(--ui-text);
}

#progressbar li.active .form-stepper-nav-icon {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
}

#progressbar li.active .form-stepper-nav-icon i {
    color: var(--ui-on-primary);
}

#progressbar li:after {
    top: 26px;
    border-bottom: 1.5px dashed var(--ui-border-strong);
}

#progressbar li.active:after {
    border-bottom-color: var(--ui-accent);
}

/* Accordions (unit blocks) */
.accordion {
    --bs-accordion-border-color: var(--ui-border);
    --bs-accordion-border-radius: var(--ui-radius-lg);
    --bs-accordion-inner-border-radius: calc(var(--ui-radius-lg) - 1px);
    --bs-accordion-active-bg: var(--ui-surface-sunken);
    --bs-accordion-active-color: var(--ui-text);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-focus-border-color: var(--ui-primary);
}

.unit-block-item-box,
.accordion-item {
    border-radius: var(--ui-radius-lg) !important;
    corner-shape: var(--ui-corner-shape, round);
    overflow: hidden;
}

.accordion-button {
    font-weight: var(--ui-weight-semibold);
    color: var(--ui-text);
}

/* 10. Modals, dropdowns, popovers
------------------------------------------------- */
.modal {
    --bs-modal-border-radius: var(--ui-radius-2xl);
    --bs-modal-bg: var(--ui-surface);
}

.modal-backdrop {
    --bs-backdrop-bg: #242A34;
    --bs-backdrop-opacity: 0.55;
    background-color: #242A34;
}

.modal-backdrop.show {
    opacity: 0.55;
}

.modal-content {
    padding: var(--ui-space-8);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-2xl);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-3);
}

.modal.fade .modal-content {
    transform: translateY(8px) scale(0.98);
    transition: transform var(--ui-duration-slow) var(--ui-ease), opacity var(--ui-duration-slow) var(--ui-ease);
}

.modal.fade.show .modal-content {
    transform: none;
}

.modal-header {
    align-items: center;
    gap: var(--ui-space-4);
    padding: 0 0 var(--ui-space-5);
    border-bottom: 1px solid var(--ui-border);
}

.modal-title {
    font-size: var(--ui-font-size-xl);
    font-weight: var(--ui-weight-semibold);
    color: var(--ui-text);
}

.modal .btn-close {
    position: static;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 0 0 auto;
    padding: 0;
    opacity: 1;
    border-radius: var(--ui-radius-sm);
    corner-shape: var(--ui-corner-shape, round);
    background: var(--ui-surface-sunken);
    color: var(--ui-text) !important;
    font-size: 16px;
}

.modal .btn-close:hover {
    background: var(--ui-surface-hover);
}

.modal-body {
    padding: var(--ui-space-6) 0;
}

.modal-inner-form-box.border-bottom {
    padding-bottom: var(--ui-space-2);
}

.modal-footer {
    gap: var(--ui-space-3);
    padding: var(--ui-space-5) 0 0;
    border-top: 1px solid var(--ui-border);
}

.modal-footer > * {
    margin: 0;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 760px;
    }

    .modal-dialog.modal-sm {
        max-width: 420px;
    }
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--ui-primary);
    min-width: 220px;
    padding: var(--ui-space-2);
    margin-top: 8px !important;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-3);
    font-size: var(--ui-font-size-base);
    z-index: var(--ui-z-dropdown);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-secondary);
    font-weight: var(--ui-weight-medium);
}

.dropdown-item i {
    font-size: 17px;
    color: var(--ui-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--ui-surface-hover);
    color: var(--ui-text) !important;
}

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

.dropdown-divider {
    margin: 6px 4px;
    border-top: 1px solid var(--ui-border);
}

.dropdown-menu-lg {
    padding: 0;
    overflow: hidden;
}

.dropdown-menu-lg h5 {
    font-size: var(--ui-font-size-md);
}

.notification-item {
    display: block;
    padding: 0 var(--ui-space-2);
}

.notification-item .d-flex {
    padding: 10px 12px;
    border-radius: var(--ui-radius-md);
}

.notification-item .d-flex:hover {
    background: var(--ui-surface-hover);
}

.notification-item h6 {
    color: var(--ui-text);
}

.notification-item p {
    color: var(--ui-text-secondary);
    font-size: var(--ui-font-size-sm);
}

.tooltip {
    --bs-tooltip-bg: var(--ui-text);
    --bs-tooltip-border-radius: var(--ui-radius-xs);
    --bs-tooltip-font-size: var(--ui-font-size-xs);
    font-family: var(--ui-font-sans);
}

.popover {
    --bs-popover-border-color: var(--ui-border);
    --bs-popover-border-radius: var(--ui-radius-md);
    font-family: var(--ui-font-sans);
}

/* 11. Feedback: toast, alert, swal
------------------------------------------------- */
#toast-container {
    z-index: var(--ui-z-toast);
}

#toast-container > div {
    width: 340px;
    padding: 16px 18px 16px 56px;
    border-radius: var(--ui-radius-lg);
    background-position: 20px center;
    box-shadow: var(--ui-shadow-3);
    opacity: 1;
    font-family: var(--ui-font-sans);
    font-size: var(--ui-font-size-base);
    font-weight: var(--ui-weight-medium);
    line-height: 1.45;
}

#toast-container > div:hover {
    box-shadow: var(--ui-shadow-3);
}

#toast-container > .toast-success { background-color: var(--ui-success); }
#toast-container > .toast-error { background-color: var(--ui-danger); }
#toast-container > .toast-info { background-color: var(--ui-primary); }
#toast-container > .toast-warning { background-color: var(--ui-warning); }

.alert {
    --bs-alert-border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-4) var(--ui-space-5);
    border: 1px solid transparent;
    border-radius: var(--ui-radius-lg);
    font-weight: var(--ui-weight-medium);
}

.alert-success { background: var(--ui-success-soft); border-color: rgba(34, 104, 67, 0.25); color: var(--ui-success); }
.alert-danger { background: var(--ui-danger-soft); border-color: rgba(176, 56, 54, 0.25); color: var(--ui-danger); }
.alert-warning { background: var(--ui-warning-soft); border-color: rgba(140, 90, 10, 0.25); color: var(--ui-warning); }
.alert-info,
.alert-primary { background: var(--ui-primary-soft); border-color: rgba(54, 65, 82, 0.2); color: var(--ui-primary); }

.swal2-container.swal2-backdrop-show {
    background: var(--ui-overlay) !important;
}

.swal2-popup {
    padding: var(--ui-space-8) var(--ui-space-8) var(--ui-space-7) !important;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-2xl) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-3);
    font-family: var(--ui-font-sans) !important;
}

.swal2-title {
    color: var(--ui-text) !important;
    font-size: 22px !important;
    font-weight: var(--ui-weight-semibold) !important;
}

.swal2-html-container {
    color: var(--ui-text-secondary) !important;
    font-size: var(--ui-font-size-md) !important;
}

.swal2-actions {
    gap: var(--ui-space-3);
}

.swal2-styled {
    min-height: 46px;
    margin: 0 !important;
    padding: 0 22px !important;
    border-radius: var(--ui-radius-md) !important;
    corner-shape: var(--ui-corner-shape, round);
    font-weight: var(--ui-weight-semibold) !important;
    font-size: var(--ui-font-size-base) !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
}

.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}

.swal2-styled:focus,
.swal2-styled:focus-visible {
    box-shadow: 0 0 0 3px var(--ui-surface), 0 0 0 5px var(--ui-focus) !important;
}

.swal2-icon.swal2-warning { border-color: var(--ui-accent) !important; color: var(--ui-accent) !important; }
.swal2-icon.swal2-error { border-color: var(--ui-danger) !important; color: var(--ui-danger) !important; }
.swal2-icon.swal2-success { border-color: rgba(34, 104, 67, 0.3) !important; color: var(--ui-success) !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--ui-success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(34, 104, 67, 0.3) !important; }
.swal2-icon.swal2-question,
.swal2-icon.swal2-info { border-color: var(--ui-primary) !important; color: var(--ui-primary) !important; }

/* 12. Page patterns
------------------------------------------------- */
/* In-page search inputs with a leading icon */
.page-inner-search .form-control {
    height: 44px;
    padding-left: 42px;
}

.page-inner-search span {
    line-height: 44px;
    left: 15px;
    color: var(--ui-muted);
}

/* Property cards: equal heights in a row, action pinned to the bottom. */
.property-item {
    display: flex;
    flex-direction: column;
    height: calc(100% - 25px);
    padding: 6px;
    border-radius: var(--ui-radius-xl) !important;
    corner-shape: var(--ui-corner-shape, round);
}

.property-item > .property-item-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: var(--ui-space-5) var(--ui-space-4) var(--ui-space-4) !important;
}

.property-item > .property-item-content > .theme-btn:last-child {
    margin-top: auto !important;
}

.property-item > .property-item-content > .property-item-info {
    margin-bottom: var(--ui-space-5);
}

.property-item-info.bg-white.theme-border,
.bg-white.theme-border.radius-4 {
    border-radius: var(--ui-radius-md) !important;
}

.property-info-item {
    color: var(--ui-text-secondary);
}

.property-info-item i {
    color: var(--ui-accent);
}

.property-item-img-wrap {
    overflow: hidden;
    background: var(--ui-surface-tint);
    border-radius: var(--ui-radius-lg);
}

.property-item-img-wrap::before {
    display: none;
}

.property-item-img {
    transform: none;
    transition: transform var(--ui-duration-slow) var(--ui-ease);
}

.property-item-img-wrap:hover .property-item-img {
    opacity: 1;
    transform: scale(1.03);
}

.property-item-img img,
.information-details-img img {
    border-radius: var(--ui-radius-lg);
    corner-shape: var(--ui-corner-shape, round);
}

.property-item-title a,
.property-item-title h4 {
    color: var(--ui-text);
    font-weight: var(--ui-weight-semibold);
}

.property-details-img img,
.vbox-container img {
    border-radius: var(--ui-radius-xl);
    corner-shape: var(--ui-corner-shape, round);
}

.gallery-slider-carousel.owl-carousel .owl-nav .owl-next,
.gallery-slider-carousel.owl-carousel .owl-nav .owl-prev {
    width: 46px;
    height: 46px;
    border-radius: var(--ui-radius-md) !important;
    corner-shape: var(--ui-corner-shape, round);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-2);
}

/* Tenant cards */
.tenants-img-info-box .flex-grow-1 {
    min-width: 0;
}

.tenants-img-info-box .flex-grow-1 p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal !important;
}

.tenants-item-info {
    padding: 0 var(--ui-space-4);
}

.tenants-item-info-box {
    padding: 12px 0;
}

.tenant-img {
    width: 56px;
    height: 56px;
    border-radius: var(--ui-radius-md) !important;
    corner-shape: var(--ui-corner-shape, round);
}

/* Avatars and thumbnails */
.avatar-md,
.avatar-xl,
.tenant-img img,
.tbl-user-image {
    border-radius: var(--ui-radius-md);
    corner-shape: var(--ui-corner-shape, round);
}

.avatar-title {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    border: 0;
}

.tenants-item,
.tenant-item {
    border-radius: var(--ui-radius-xl);
}

/* Documents */
.document-item-box {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
}

/* Invoice preview */
.invoice-preview-wrap .invoice-table-part thead,
.invoice-preview-wrap thead {
    background: var(--ui-surface-sunken);
}

.invoice-heading-color {
    color: var(--ui-text) !important;
}

/* Tickets & chat */
.ticket-item-content-box {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
}

.ticket-replies-item,
.message-user-item {
    border-radius: var(--ui-radius-md);
    corner-shape: var(--ui-corner-shape, round);
}

.message-user-item:hover {
    background: var(--ui-surface-hover);
}

/* Colour settings swatch inputs */
.color-settings-fields-wrap .sp-original-input-container {
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    corner-shape: var(--ui-corner-shape, round);
    overflow: hidden;
}

/* Loading skeleton helper for async blocks */
.codesla-skeleton {
    display: block;
    min-height: 14px;
    border-radius: var(--ui-radius-xs);
    background: linear-gradient(90deg, var(--ui-surface-tint) 0%, var(--ui-surface-hover) 50%, var(--ui-surface-tint) 100%);
    background-size: 200% 100%;
    animation: codesla-skeleton 1.2s linear infinite;
}

@keyframes codesla-skeleton {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* 13. Auth pages
------------------------------------------------- */
.sign-up-page {
    min-height: 100vh;
    background: var(--ui-background) !important;
}

.sign-up-page-wrap-row {
    min-height: 100vh;
    margin: 0;
    padding: var(--ui-shell-gap);
    gap: 0;
}

.sign-up-page-wrap-row > [class*="col-"] {
    padding: 0;
}

.sign-up-right-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: calc(100vh - var(--ui-shell-gap) * 2);
    padding: var(--ui-space-10) var(--ui-space-8);
    background: transparent !important;
}

.sign-up-right-content form,
.sign-up-right-content .auth-form {
    width: 440px;
    max-width: 100%;
}

.sign-up-top-logo img {
    height: 40px;
    width: auto;
}

.sign-up-right-content h1 {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: var(--ui-space-2) !important;
}

.auth-lead {
    color: var(--ui-muted);
    margin-bottom: var(--ui-space-8);
}

.sign-up-right-content .form-control {
    height: 50px;
}

.sign-up-right-content .pass-icon {
    top: 0;
    right: 4px;
    height: 50px;
    width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--ui-muted);
    border-radius: var(--ui-radius-sm);
}

.sign-up-right-content .pass-icon:hover {
    color: var(--ui-text);
}

.sign-up-left-content {
    position: relative;
    height: 100%;
    min-height: calc(100vh - var(--ui-shell-gap) * 2);
    padding: var(--ui-space-12) var(--ui-space-10);
    background: var(--ui-primary) !important;
    border-radius: var(--ui-radius-2xl);
    corner-shape: var(--ui-corner-shape, round);
    overflow: hidden;
    text-align: left !important;
    align-items: flex-start;
    justify-content: space-between;
}

.sign-up-left-content::before {
    display: none;
}

.sign-up-left-content h1,
.sign-up-left-content .h1 {
    color: var(--ui-on-primary) !important;
    font-size: 34px;
    line-height: 1.2;
    max-width: 460px;
}

.sign-up-left-content p {
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--ui-font-size-md);
    max-width: 440px;
    margin: var(--ui-space-4) 0 0 !important;
    width: auto !important;
}

.sign-up-bottom-img {
    width: 100%;
    margin: var(--ui-space-8) 0 !important;
    display: flex;
    justify-content: center;
}

.sign-up-bottom-img img {
    width: 100%;
    max-width: 520px;
    height: auto;
}

.auth-panel-brand img {
    height: 38px;
    width: auto;
}

.auth-panel-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--ui-space-4);
    color: var(--ui-accent-on-primary);
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Demo sign-in shortcuts (only rendered on the public demo) */
.codesla-demo-login {
    margin-top: var(--ui-space-8);
    padding: var(--ui-space-5);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    corner-shape: var(--ui-corner-shape, round);
    background: var(--ui-surface);
}

.codesla-demo-login-title {
    margin-bottom: var(--ui-space-3);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-weight-semibold);
    color: var(--ui-text);
}

.codesla-demo-login-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-space-2);
}

.codesla-demo-login button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 58px;
    padding: 10px 14px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-sunken);
    color: var(--ui-text);
    text-align: left;
    font-weight: var(--ui-weight-semibold);
    font-size: var(--ui-font-size-sm);
    transition: border-color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
}

.codesla-demo-login button small {
    color: var(--ui-muted);
    font-weight: var(--ui-weight-regular);
    font-size: var(--ui-font-size-xs);
}

.codesla-demo-login button:hover {
    border-color: var(--ui-primary);
    background: var(--ui-surface);
}

.codesla-demo-login button[aria-pressed="true"] {
    border-color: var(--ui-primary);
    box-shadow: inset 0 0 0 1px var(--ui-primary);
    background: var(--ui-surface);
}

/* Standalone pages (version update) */
.codesla-standalone {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ui-space-8) var(--ui-shell-gap);
}

.codesla-standalone-card {
    width: 720px;
    max-width: 100%;
    padding: var(--ui-space-10);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-2xl);
    corner-shape: var(--ui-corner-shape, round);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-2);
}

/* 14. Responsive & preferences
------------------------------------------------- */
@media (max-width: 1399.98px) {
    :root {
        --ui-sidebar-width: 252px;
    }
}

@media (max-width: 1199.98px) {
    .page-content-wrapper {
        padding: var(--ui-space-8) !important;
    }

    .sign-up-left-content {
        padding: var(--ui-space-10) var(--ui-space-8);
    }
}

/* Drawer navigation below 992 px */
@media (max-width: 991.98px) {
    :root {
        --ui-shell-gap: 12px;
        --ui-topbar-height: 72px;
    }

    .vertical-menu {
        display: flex !important;
        width: min(300px, calc(100vw - 48px)) !important;
        transform: translateX(calc(-100% - var(--ui-shell-gap) * 2));
        visibility: hidden;
        box-shadow: var(--ui-shadow-3);
        z-index: calc(var(--ui-z-topbar) + 20);
    }

    body.sidebar-enable .vertical-menu {
        transform: none;
        visibility: visible;
    }

    body.sidebar-enable::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: calc(var(--ui-z-topbar) + 10);
        background: var(--ui-overlay);
    }

    body.sidebar-enable {
        overflow: hidden;
    }

    .vertical-collpsed .vertical-menu {
        width: min(300px, calc(100vw - 48px)) !important;
    }

    #page-topbar,
    .vertical-collpsed #page-topbar {
        left: 0;
    }

    .navbar-header {
        padding: 0 var(--ui-shell-gap);
    }

    .navbar-brand-box {
        display: inline-flex;
        align-items: center;
    }

    .main-content,
    .vertical-collpsed .main-content {
        margin-left: 0 !important;
    }

    .page-content {
        padding: var(--ui-topbar-height) var(--ui-shell-gap) var(--ui-space-6);
    }

    .page-content-wrapper {
        padding: var(--ui-space-6) !important;
        border-radius: var(--ui-radius-xl) !important;
        min-height: 0;
    }

    .sign-up-left-content {
        min-height: 0;
        margin-top: var(--ui-shell-gap);
    }

    .sign-up-right-content {
        min-height: 0;
        padding: var(--ui-space-8) var(--ui-space-2) var(--ui-space-6);
    }
}

@media (max-width: 767.98px) {
    h2 { font-size: 24px; }
    h3 { font-size: 21px; }

    .page-title-box h2,
    .page-title-box h3 {
        font-size: 22px;
    }

    .page-content-wrapper {
        padding: var(--ui-space-5) !important;
    }

    .bg-off-white.theme-border.p-20,
    .bg-off-white.theme-border.p-25,
    .billing-center-area.p-25,
    .bg-off-white.theme-border.p-30 {
        padding: var(--ui-space-4) !important;
    }

    .dashboard-feature-item {
        min-height: 0;
        padding: var(--ui-space-5) !important;
    }

    .modal-content {
        padding: var(--ui-space-5);
        border-radius: var(--ui-radius-xl);
    }

    .modal-dialog {
        margin: var(--ui-space-3);
    }

    .modal-footer {
        flex-wrap: wrap;
    }

    .modal-footer > .theme-btn,
    .modal-footer > .theme-btn-back,
    .modal-footer > button {
        flex: 1 1 auto;
    }

    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_length {
        text-align: left;
    }

    div.dataTables_wrapper div.dataTables_filter label,
    div.dataTables_wrapper div.dataTables_filter input {
        width: 100%;
    }

    /* Wide tables scroll inside their own area instead of stretching the page. */
    .billing-center-area,
    .dataTables_wrapper,
    .table-responsive {
        overflow-x: auto;
    }

    table.table > :not(caption) > * > * {
        padding: 12px 14px;
    }

    table.table > thead > tr > :first-child,
    table.table > tbody > tr > :first-child {
        padding-left: var(--ui-space-4);
    }

    .user-dropdown .header-item {
        padding-right: 5px;
    }

    .codesla-demo-login-grid {
        grid-template-columns: 1fr;
    }

    .sign-up-left-content {
        padding: var(--ui-space-8) var(--ui-space-6);
    }

    .sign-up-left-content h1,
    .sign-up-left-content .h1 {
        font-size: 26px;
    }

    .sign-up-bottom-img {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .navbar-brand-box {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    .theme-btn,
    .header-item,
    .page-content-wrapper,
    .vertical-menu,
    table.table {
        border: 1px solid CanvasText !important;
    }
}

@media print {
    .vertical-menu,
    #page-topbar {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .page-content {
        padding: 0 !important;
    }

    .page-content-wrapper {
        border: 0;
        box-shadow: none;
        padding: 0 !important;
    }
}

/* A dismissible notice above the topbar pushes the shell down while it is shown. */
.has-top-notice {
    --ui-topbar-height: 120px;
}

.has-top-notice .vertical-menu {
    top: calc(var(--ui-shell-gap) + 36px);
}

/* Inline SVG icons in the menu follow the icon colour and size. */
#sidebar-menu ul li a i svg {
    width: 18px;
    height: 18px;
}

/* Error pages */
.codesla-error-card {
    width: 560px;
}

.codesla-error-logo {
    display: block;
    height: 34px;
    width: auto;
    margin-bottom: var(--ui-space-10);
}

.codesla-error-code {
    display: inline-flex;
    margin-bottom: var(--ui-space-3);
    padding: 4px 12px;
    border-radius: var(--ui-radius-xs);
    corner-shape: var(--ui-corner-shape, round);
    background: var(--ui-accent-soft);
    color: var(--ui-accent-text);
    font-weight: var(--ui-weight-semibold);
    font-size: var(--ui-font-size-sm);
    letter-spacing: 0.06em;
}

.codesla-error-text {
    margin-top: var(--ui-space-3);
    color: var(--ui-text-secondary);
    font-size: var(--ui-font-size-md);
}