/* ==========================================================================
   Modern dark theme overrides
   --------------------------------------------------------------------------
   Loaded last, and only when dark mode is active, so it wins over
   bootstrap-dark.css / app-dark.css / styles-additional-dark.css without
   forking the legacy template CSS. `!important` is used only where the
   underlying rules are already highly specific or use it themselves.

   Tuning:
     - accent  -> --tm-accent (+ --tm-accent-strong / -soft / -ring)
     - surfaces-> --tm-bg-0 .. --tm-bg-4
   No font-size declarations here on purpose: original sizes are preserved.
   ========================================================================== */

:root {
    --tm-bg-0: #0b0e14;
    --tm-bg-1: #11151d;
    --tm-bg-2: #161b25;
    --tm-bg-3: #1c222e;
    --tm-bg-4: #232a38;

    --tm-border: rgba(255, 255, 255, 0.07);
    --tm-border-strong: rgba(255, 255, 255, 0.13);

    --tm-text: #e6e9f0;
    --tm-text-muted: #98a1b3;
    --tm-text-dim: #6f7889;

    --tm-accent: #6c8cff;
    --tm-accent-strong: #8aa2ff;
    --tm-accent-soft: rgba(108, 140, 255, 0.14);
    --tm-accent-ring: rgba(108, 140, 255, 0.28);

    --tm-success: #2ecc8f;
    --tm-warning: #f5b544;
    --tm-danger: #f2596a;
    --tm-info: #45b7e8;

    --tm-radius-sm: 6px;
    --tm-radius: 10px;
    --tm-radius-lg: 10px;

    --tm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --tm-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    --tm-shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.5);

    --tm-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', sans-serif;
    letter-spacing: -0.005em;
    color: var(--tm-text);
    background-color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', sans-serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--tm-text);
}

/* Links keep the legacy dark-theme colors (styles-additional-dark.css) */
a {
    color: #a1a8b8;
    transition: color 0.15s var(--tm-ease);
}

a:hover {
    color: #fff;
}

.text-muted {
    color: var(--tm-text-muted) !important;
}

hr,
.dropdown-divider {
    border-color: var(--tm-border);
}

.content-page {
    background: #000;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

/* Keeps the legacy brand-teal right edge (--primary-border), fading out down
   the panel so it reads as an accent rather than a hard rule. */
.left-side-menu {
    background: linear-gradient(180deg, var(--tm-bg-1) 0%, var(--tm-bg-0) 100%);
    border-right: 1px solid transparent;
    border-image: linear-gradient(180deg, rgba(1, 88, 116, 0.95) 0%, rgba(1, 88, 116, 0.55) 55%, rgba(1, 88, 116, 0.18) 100%) 1;
    box-shadow: none;
}

#sidebar-menu .menu-title {
    color: var(--tm-text-dim);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 600;
}

#sidebar-menu > ul > li > a {
    color: var(--tm-text-muted);
    border-radius: var(--tm-radius);
    margin: 2px 10px;
    transition: background-color 0.15s var(--tm-ease), color 0.15s var(--tm-ease);
}

/* Submenus keep the template's original full-width, square geometry */
#sidebar-menu .nav-second-level li a,
#sidebar-menu .nav-third-level li a {
    color: var(--tm-text-muted);
    transition: background-color 0.15s var(--tm-ease), color 0.15s var(--tm-ease);
}

#sidebar-menu > ul > li > a:hover,
#sidebar-menu .nav-second-level li a:hover,
#sidebar-menu .nav-third-level li a:hover {
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--tm-text);
}

#sidebar-menu > ul > li > a i,
#sidebar-menu > ul > li > a svg {
    color: var(--tm-text-dim);
    transition: color 0.15s var(--tm-ease);
}

#sidebar-menu > ul > li > a:hover i,
#sidebar-menu > ul > li > a:hover svg {
    color: var(--tm-accent);
}

#sidebar-menu > ul > li > a.active,
#sidebar-menu > ul > li.mm-active > a,
#sidebar-menu .nav-second-level li.mm-active > a,
#sidebar-menu .nav-second-level li a.active {
    position: relative;
    color: #fff;
    background-color: var(--tm-accent-soft);
    /* The template rules the current item with a 3px left border. Kept
       transparent rather than removed so the label doesn't shift by 3px. */
    border-left-color: transparent;
}

#sidebar-menu > ul > li > a.active i,
#sidebar-menu > ul > li.mm-active > a i,
#sidebar-menu > ul > li > a.active svg,
#sidebar-menu > ul > li.mm-active > a svg {
    color: var(--tm-accent-strong);
}

#sidebar-menu .nav-second-level,
#sidebar-menu .nav-third-level {
    background: transparent;
}

/* Condensed flyout: original geometry, modernized surface only. Nested lists
   need the same surface -- the legacy `> ul ul` rule paints them #323742,
   which shows as a lighter block inside the panel. */
.left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li:hover > ul,
.left-side-menu-condensed .left-side-menu #sidebar-menu > ul ul {
    background-color: var(--tm-bg-2);
}

.left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li:hover > ul {
    box-shadow: var(--tm-shadow);
}

/* The panel opens upward against the rail, so its left edge and its bottom are
   both butted up against something: the top right is the only free corner. */
.left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li > ul.nav-second-level {
    border-radius: 0 var(--tm-radius) 0 0;
}

/* Only rows that own a panel square off there: with the panel open above, the
   two are one block. Rows without one stay fully rounded. */
.left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li:has(> ul):hover > a {
    border-top-right-radius: 0;
}

/* Marker for the current item, on the rail only: it's the one place where the
   row is an icon with no label to carry the state. The expanded menu says it
   with the row's own inset background instead. Sits at left: 0 because the
   rail drops the 10px the expanded rows are inset by. */
.left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li > a.active::before,
.left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li.mm-active > a::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Drawn as the left border of a box the size of the row, so it curves
       around the corners on exactly the row's radius — a 4px-wide box would
       have its radii scaled down to its own width and barely curve at all. */
    border: 3px solid transparent;
    border-left-color: rgba(255, 255, 255, 0.7);
    border-radius: var(--tm-radius);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Topbar
   -------------------------------------------------------------------------- */

.navbar-custom {
    background: #000;
    border-bottom: 1px solid var(--tm-border);
    box-shadow: none;
}

.navbar-custom .topnav-menu .nav-link {
    color: var(--tm-text-muted);
}

.navbar-custom .topnav-menu .nav-link:hover {
    color: var(--tm-text);
}

.button-menu-mobile {
    color: var(--tm-text-muted);
}

/* Topbar action icons. The tile is a pseudo-element so the links keep the
   template's 72px-tall box, which the bell's badge is positioned against. */
.navbar-custom .topnav-menu > li > a.nav-link:not(.nav-user),
.navbar-custom .topnav-menu .cart-icon > a.nav-link {
    position: relative;
    background-color: transparent;
}

.navbar-custom .topnav-menu > li > a.nav-link:not(.nav-user)::before,
.navbar-custom .topnav-menu .cart-icon > a.nav-link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    border-radius: 12px;
    background-color: transparent;
    transition: background-color 0.18s var(--tm-ease);
}

.navbar-custom .topnav-menu > li > a.nav-link:not(.nav-user):hover::before,
.navbar-custom .topnav-menu > li.show > a.nav-link:not(.nav-user)::before,
.navbar-custom .topnav-menu .cart-icon > a.nav-link:hover::before {
    background-color: var(--tm-accent-soft);
}

/* The tile is positioned, so the glyphs have to be as well to sit above it.
   The badge is left out: it is already absolute, and painted after. */
.navbar-custom .topnav-menu .nav-link > i,
.navbar-custom .topnav-menu .nav-link > svg,
.navbar-custom .topnav-menu .nav-link > div {
    position: relative;
}

/* Thinner strokes and no duotone fill; the tile carries the weight now */
.navbar-custom .topnav-menu .nav-link svg {
    fill: none;
    stroke-width: 1.75;
}

.navbar-custom .topnav-menu .nav-link:hover svg,
.navbar-custom .topnav-menu .nav-link:focus svg {
    color: var(--tm-accent);
    fill: none;
}

/* 2-FA indicator: an accent chip instead of a loose grey glyph */
.pro-user-name #two_fa_icon_enabled,
.pro-user-name #google_two_fa_icon_enabled {
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    padding: 4px;
    border-radius: 50%;
    background-color: var(--tm-accent-soft);
    color: var(--tm-accent-strong);
    fill: none;
    stroke-width: 2;
    vertical-align: middle;
}

/* Notification counter: a centred pill on the bell's corner. The template
   sizes it with width alone and no height, so the digit never centres. */
.notification-list .noti-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 14px;
    right: 6px;
    width: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background-color: var(--tm-danger) !important;
    border: 2px solid #000;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(242, 89, 106, 0.45);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: baseline;
    animation: none;
}

/* Brand-teal underline the legacy theme had */
.topnav,
.topnav.shadow-sm {
    background: var(--tm-bg-1);
    border-bottom: 1px solid rgba(1, 88, 116, 0.52);
    box-shadow: none !important;
}

/* Horizontal topnav flyouts: original geometry (square panel, template padding),
   only the surface and hover colors are modernized. */
@media (min-width: 992px) {
    .topbar-nav .metismenu li .nav-second-level,
    .topbar-nav .metismenu li .nav-third-level {
        background-color: var(--tm-bg-2);
        background-clip: padding-box;
        box-shadow: var(--tm-shadow);
        color: var(--tm-text-muted);
    }

    .topbar-nav .metismenu li .nav-second-level a,
    .topbar-nav .metismenu li .nav-third-level a {
        color: var(--tm-text-muted);
    }

    .topbar-nav .metismenu li .nav-second-level a:hover,
    .topbar-nav .metismenu li .nav-second-level a:focus,
    .topbar-nav .metismenu li .nav-third-level a:hover,
    .topbar-nav .metismenu li .nav-third-level a:focus {
        background-color: rgba(255, 255, 255, 0.06);
        color: #fff;
    }

    .topbar-nav .metismenu li .nav-second-level li > a.active,
    .topbar-nav .metismenu li .nav-third-level li > a.active {
        background-color: var(--tm-accent-soft);
        color: #fff;
    }
}

.page-title-box .page-title,
.page-title h4 {
    font-weight: 600;
    letter-spacing: -0.015em;
}

.breadcrumb {
    background: transparent;
    padding-left: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--tm-text-dim);
}

/* --------------------------------------------------------------------------
   Cards & surfaces
   -------------------------------------------------------------------------- */

.card {
    background: linear-gradient(180deg, var(--tm-bg-2) 0%, var(--tm-bg-1) 100%);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-lg);
    box-shadow: var(--tm-shadow-sm);
}

/* Pages tint pricing cards with their own background-color; the card gradient
   is an image painted over it, so drop the image and let the tint show. */
.card.card-pricing {
    background-image: none;
}

.card-header,
.card-footer {
    background: transparent;
    border-color: var(--tm-border);
}

.card-title,
.header-title {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    border-radius: var(--tm-radius-sm);
    font-weight: 500;
    transition: transform 0.12s var(--tm-ease), box-shadow 0.15s var(--tm-ease),
        background-color 0.15s var(--tm-ease), border-color 0.15s var(--tm-ease);
}

.btn:active {
    transform: translateY(1px);
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px var(--tm-accent-ring);
}

.btn-primary {
    background-image: linear-gradient(180deg, var(--tm-accent-strong), var(--tm-accent));
    border-color: transparent;
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-image: linear-gradient(180deg, var(--tm-accent), var(--tm-accent-strong));
    border-color: transparent;
}

.btn-outline-primary {
    color: var(--tm-accent-strong);
    border-color: var(--tm-accent-ring);
}

.btn-outline-primary:hover {
    background-color: var(--tm-accent-soft);
    border-color: var(--tm-accent);
    color: #fff;
}

.btn-light,
.btn-secondary {
    background-color: var(--tm-bg-3);
    border-color: var(--tm-border);
    color: var(--tm-text);
}

.btn-light:hover,
.btn-secondary:hover {
    background-color: var(--tm-bg-4);
    border-color: var(--tm-border-strong);
    color: #fff;
}

.btn-soft-primary {
    background-color: var(--tm-accent-soft);
    color: var(--tm-accent-strong);
    border-color: transparent;
}

.btn-soft-primary:hover {
    background-color: rgba(108, 140, 255, 0.22);
    color: #fff;
}

.btn-soft-success {
    background-color: rgba(46, 204, 143, 0.14);
    color: var(--tm-success);
    border-color: transparent;
}

.btn-soft-danger {
    background-color: rgba(242, 89, 106, 0.14);
    color: var(--tm-danger);
    border-color: transparent;
}

.btn-soft-warning {
    background-color: rgba(245, 181, 68, 0.14);
    color: var(--tm-warning);
    border-color: transparent;
}

.btn-soft-info {
    background-color: rgba(69, 183, 232, 0.14);
    color: var(--tm-info);
    border-color: transparent;
}

.btn-soft-success:hover,
.btn-soft-danger:hover,
.btn-soft-warning:hover,
.btn-soft-info:hover {
    color: #fff;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-control,
.custom-select,
.custom-file-label,
textarea.form-control {
    background-color: var(--tm-bg-2);
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--tm-radius-sm);
    color: var(--tm-text);
    transition: border-color 0.15s var(--tm-ease), box-shadow 0.15s var(--tm-ease);
}

.form-control:focus,
.custom-select:focus {
    background-color: var(--tm-bg-2);
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px var(--tm-accent-ring);
    color: var(--tm-text);
}

.form-control::placeholder {
    color: var(--tm-text-dim);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--tm-bg-1);
    color: var(--tm-text-muted);
}

.input-group-text {
    background-color: var(--tm-bg-3);
    border-color: var(--tm-border-strong);
    color: var(--tm-text-muted);
}

label,
.col-form-label {
    color: var(--tm-text-muted);
    font-weight: 500;
}

.custom-switch .custom-control-label::before {
    border-radius: 1rem;
    background-color: var(--tm-bg-4);
    border-color: var(--tm-border-strong);
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--tm-bg-2) !important;
    border: 1px solid var(--tm-border-strong) !important;
    border-radius: var(--tm-radius-sm) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--tm-accent) !important;
    box-shadow: 0 0 0 3px var(--tm-accent-ring);
}

.select2-dropdown,
.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
    background-color: var(--tm-bg-2);
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--tm-radius);
    box-shadow: var(--tm-shadow);
    overflow: hidden;
}

.select2-results__options {
    background: var(--tm-bg-2);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--tm-accent-soft) !important;
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected='true'] {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.select2-search--dropdown .select2-search__field {
    background-color: var(--tm-bg-3);
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--tm-radius-sm);
    color: var(--tm-text);
}

/* Flatpickr */
.flatpickr-calendar {
    background: var(--tm-bg-2);
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--tm-radius);
    box-shadow: var(--tm-shadow);
    color: var(--tm-text);
}

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: transparent;
    color: var(--tm-text-muted);
    fill: var(--tm-text-muted);
}

.flatpickr-day {
    color: var(--tm-text);
    border-radius: var(--tm-radius-sm);
}

.flatpickr-day:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: transparent;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--tm-accent);
    border-color: var(--tm-accent);
    color: #fff;
}

.flatpickr-day.inRange {
    background: var(--tm-accent-soft);
    border-color: transparent;
    box-shadow: none;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--tm-text-dim);
}

/* --------------------------------------------------------------------------
   Tables & DataTables
   -------------------------------------------------------------------------- */

.table {
    color: var(--tm-text);
}

.table thead th {
    border-bottom: 1px solid var(--tm-border-strong);
    border-top: 0;
    color: var(--tm-text-muted);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.table td,
.table th {
    border-top-color: var(--tm-border);
    vertical-align: middle;
}

.table-hover tbody tr {
    transition: background-color 0.12s var(--tm-ease);
}

.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.035);
    color: var(--tm-text);
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--tm-border);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: var(--tm-bg-2);
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--tm-radius-sm);
    color: var(--tm-text);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px var(--tm-accent-ring);
    outline: none;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--tm-text-muted);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    color: var(--tm-text-muted) !important;
    background: transparent !important;
    transition: background-color 0.15s var(--tm-ease), color 0.15s var(--tm-ease);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--tm-accent) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 0 12px var(--tm-accent-ring);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--tm-text-dim) !important;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
    opacity: 0.35;
}

/* --------------------------------------------------------------------------
   Dropdowns, modals, popovers, tooltips
   -------------------------------------------------------------------------- */

.dropdown-menu {
    background-color: var(--tm-bg-2);
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--tm-radius);
    box-shadow: var(--tm-shadow);
    padding: 6px;
}

.dropdown-item {
    border-radius: var(--tm-radius-sm);
    color: var(--tm-text-muted);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--tm-accent-soft);
    color: #fff;
}

/* Same surface as .left-side-menu and the profile dropdown beside it, rather
   than the flat --tm-bg-2 every other dropdown uses. */
.notification-menu {
    background: linear-gradient(180deg, var(--tm-bg-1) 0%, var(--tm-bg-0) 100%);
}

/* Topbar profile menu: roomier rows with the feather icon on a fixed rail.
   The template puts `mr-2` on each icon, hence the margin reset. */
.profile-dropdown-items {
    width: 214px;
    margin-top: 10px;
    padding: 8px;
    /* Identical background to .left-side-menu -- keep these two in sync */
    background: linear-gradient(180deg, var(--tm-bg-1) 0%, var(--tm-bg-0) 100%);
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--tm-radius-lg);
    box-shadow: var(--tm-shadow-lg);
}

.notification-list .profile-dropdown-items .notify-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--tm-radius-sm);
    font-weight: 500;
    white-space: nowrap;
}

.profile-dropdown-items .notify-item > i,
.profile-dropdown-items .notify-item > svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0 !important;
    color: var(--tm-text-dim);
    transition: color 0.15s var(--tm-ease);
}

.profile-dropdown-items .notify-item:hover > i,
.profile-dropdown-items .notify-item:hover > svg {
    color: var(--tm-accent);
}

.profile-dropdown-items .dropdown-divider {
    margin: 6px 2px;
    border-top-color: var(--tm-border);
}

/* Logout reads as the destructive action */
.profile-dropdown-items a[href="/logout"]:hover,
.profile-dropdown-items a[href="/logout"]:focus {
    background-color: rgba(242, 89, 106, 0.14);
    color: var(--tm-danger);
}

.profile-dropdown-items a[href="/logout"]:hover > svg,
.profile-dropdown-items a[href="/logout"]:focus > svg {
    color: var(--tm-danger);
}

.profile-dropdown-items.show {
    animation: tm-dropdown-in 0.16s var(--tm-ease);
}

@keyframes tm-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.modal-content {
    background-color: var(--tm-bg-2);
    /* Light catch along the top edge so the panel lifts off the backdrop */
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 140px);
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--tm-radius-lg);
    box-shadow: var(--tm-shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--tm-border);
}

.modal-header {
    align-items: center;
    padding: 16px 20px;
}

.modal-title {
    color: var(--tm-text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* The dark Bootstrap build paints the × black with a white text-shadow, which
   is unreadable here. Render it as a round ghost icon button instead. */
.modal-header .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 0 0 auto;
    border-radius: 50%;
    background-color: transparent;
    color: var(--tm-text-muted);
    text-shadow: none;
    opacity: 1;
    transition: background-color 0.15s var(--tm-ease), color 0.15s var(--tm-ease);
}

.modal-header .close:hover,
.modal-header .close:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    opacity: 1;
    outline: none;
}

.modal-header .close > span {
    line-height: 1;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 14px 20px;
    background-color: rgba(255, 255, 255, 0.015);
    border-bottom-left-radius: var(--tm-radius-lg);
    border-bottom-right-radius: var(--tm-radius-lg);
}

.modal-backdrop.show {
    background-color: #05070d;
    opacity: 0.72;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* Softer entrance than the template's straight slide */
.modal.fade .modal-dialog {
    transform: translateY(10px) scale(0.985);
    transition: transform 0.22s var(--tm-ease), opacity 0.22s var(--tm-ease);
}

.modal.show .modal-dialog {
    transform: none;
}

.popover {
    background-color: var(--tm-bg-2);
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--tm-radius);
    box-shadow: var(--tm-shadow);
}

.popover-header {
    background-color: transparent;
    border-bottom-color: var(--tm-border);
    color: var(--tm-text);
}

.popover-body {
    color: var(--tm-text-muted);
}

.tooltip-inner {
    background-color: var(--tm-bg-4);
    border-radius: var(--tm-radius-sm);
    color: var(--tm-text);
}

.nav-tabs {
    border-bottom-color: var(--tm-border);
}

.nav-tabs .nav-link {
    color: var(--tm-text-muted);
    border: 0;
    border-bottom: 2px solid transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--tm-text);
    border-bottom-color: var(--tm-border-strong);
}

.nav-tabs .nav-link.active {
    background: transparent;
    color: #fff;
    border-bottom-color: var(--tm-accent);
}

/* --------------------------------------------------------------------------
   Badges, alerts, progress
   -------------------------------------------------------------------------- */

.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.35em 0.7em;
}

.badge-primary {
    background-color: var(--tm-accent);
}

.badge-soft-primary {
    background-color: var(--tm-accent-soft);
    color: var(--tm-accent-strong);
}

.alert {
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--tm-radius);
    background-color: var(--tm-bg-3);
}

.alert-primary,
.alert.alert-primary {
    background-color: var(--tm-accent-soft);
    border-color: var(--tm-accent-ring);
    color: var(--tm-accent-strong);
}

.alert-success,
.alert.alert-success {
    background-color: rgba(46, 204, 143, 0.12);
    border-color: rgba(46, 204, 143, 0.3);
    color: var(--tm-success);
}

.alert-danger,
.alert.alert-danger {
    background-color: rgba(242, 89, 106, 0.12);
    border-color: rgba(242, 89, 106, 0.3);
    color: var(--tm-danger);
}

.alert-warning,
.alert.alert-warning {
    background-color: rgba(245, 181, 68, 0.14);
    border-color: rgba(245, 181, 68, 0.35);
    color: #f3c56b;
}

.alert-info,
.alert.alert-info {
    background-color: rgba(69, 183, 232, 0.12);
    border-color: rgba(69, 183, 232, 0.3);
    color: var(--tm-info);
}

/* Original Bootstrap geometry is kept here: no pill radius. */
.progress {
    background-color: var(--tm-bg-4);
}

.progress-bar {
    background-image: linear-gradient(90deg, var(--tm-accent), var(--tm-accent-strong));
}

.progress-bar.notification-default,
.progress-bar.notification-low,
.progress-bar.notification-medium,
.progress-bar.notification-high {
    background-image: none;
}

.progress-bar.notification-default { background-color: #5369f8; }
.progress-bar.notification-low { background-color: #b0c632; }
.progress-bar.notification-medium { background-color: #ff5c1c; }
.progress-bar.notification-high { background-color: #ff1800; }

.list-group-item {
    background-color: transparent;
    border-color: var(--tm-border);
    color: var(--tm-text);
}

.pagination .page-link {
    background-color: transparent;
    border-color: var(--tm-border);
    color: var(--tm-text-muted);
}

.pagination .page-item.active .page-link {
    background-color: var(--tm-accent);
    border-color: var(--tm-accent);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Alertify
   -------------------------------------------------------------------------- */

.alertify .ajs-dialog {
    background: var(--tm-bg-2);
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--tm-radius-lg);
    box-shadow: var(--tm-shadow-lg);
    color: var(--tm-text);
}

.alertify .ajs-header,
.alertify .ajs-footer {
    background: transparent;
    border-color: var(--tm-border);
    color: var(--tm-text);
}

.alertify .ajs-body {
    color: var(--tm-text-muted);
}

.alertify-notifier .ajs-message {
    background: var(--tm-bg-3);
    border: 1px solid var(--tm-border-strong);
    border-left: 3px solid var(--tm-accent);
    border-radius: var(--tm-radius);
    box-shadow: var(--tm-shadow);
    color: var(--tm-text);
    text-shadow: none;
}

.alertify-notifier .ajs-message.ajs-success {
    border-left-color: var(--tm-success);
}

.alertify-notifier .ajs-message.ajs-error {
    border-left-color: var(--tm-danger);
}

.alertify-notifier .ajs-message.ajs-warning {
    border-left-color: var(--tm-warning);
}

/* --------------------------------------------------------------------------
   HTMX swap polish
   -------------------------------------------------------------------------- */

#page {
    animation: tm-fade-in 0.22s var(--tm-ease);
}

#page.htmx-request {
    opacity: 0.55;
    transition: opacity 0.15s var(--tm-ease);
}

@keyframes tm-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Accessibility & scrollbars
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--tm-accent);
    outline-offset: 2px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--tm-bg-4) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--tm-bg-4);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #2f3849;
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    #page {
        transition: none;
        animation: none;
    }

    .modal.fade .modal-dialog {
        transform: none;
        transition: none;
    }
}