:root {
    --tp-bg: #f3eee4;
    --tp-surface: #fbf7ef;
    --tp-surface-soft: #f6f0e5;
    --tp-border: #ddd5c7;
    --tp-border-strong: #ccbfae;
    --tp-text: #182230;
    --tp-muted: #65758b;
    --tp-sidebar: #273044;
    --tp-sidebar-active: #46516d;
    --tp-primary: #1576f8;
    --tp-success: #179b68;
    --tp-warning: #f3b51b;
    --tp-danger: #ef4056;
    --tp-info: #12b6d2;
    --tp-radius: 8px;
    --tp-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    --tp-topbar-surface: rgba(251, 247, 239, 0.93);
    --tp-topbar-border: rgba(204, 191, 174, 0.74);
}

html {
    scrollbar-gutter: stable;
}

body {
    background: var(--tp-bg);
    color: var(--tp-text);
    letter-spacing: 0;
    min-height: 100vh;
    overflow-y: scroll;
}

body.modal-open {
    overflow-y: scroll !important;
    padding-right: 0 !important;
}

/* The delay keeps fast navigation natural while giving slow requests clear feedback. */
.tp-page-loader {
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 2200;
}

.tp-page-loader__progress {
    background: linear-gradient(90deg, #0ea5e9, var(--tp-primary), #6d5dfc);
    box-shadow: 0 1px 8px rgba(21, 118, 248, 0.55);
    height: 3px;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity 120ms ease, transform 260ms ease;
    width: 100%;
}

.tp-page-loader__message {
    align-items: center;
    background: color-mix(in srgb, var(--tp-surface) 94%, transparent);
    border: 1px solid var(--tp-border-strong);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.15);
    color: var(--tp-text);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 750;
    gap: 0.45rem;
    opacity: 0;
    padding: 0.38rem 0.7rem;
    position: absolute;
    right: 1rem;
    top: 0.75rem;
    transform: translateY(-7px);
    transition: opacity 120ms ease, transform 160ms ease;
}

.tp-page-loader__message i {
    color: var(--tp-primary);
}

.tp-page-loader.is-visible .tp-page-loader__progress {
    animation: tp-page-loader-progress 1.55s ease-in-out infinite alternate;
    opacity: 1;
    transform: scaleX(0.78);
}

.tp-page-loader.is-visible .tp-page-loader__message {
    opacity: 1;
    transform: translateY(0);
}

@keyframes tp-page-loader-progress {
    from { transform: scaleX(0.42); }
    to { transform: scaleX(0.92); }
}

@media (max-width: 576px) {
    .tp-page-loader__message {
        right: 0.65rem;
        top: 0.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tp-page-loader.is-visible .tp-page-loader__progress {
        animation: none;
        transform: scaleX(0.72);
    }
}

.modal {
    padding-right: 0 !important;
}

.tp-app-shell {
    display: flex;
    min-height: 100vh;
}

.tp-app-content {
    flex-grow: 1;
    min-width: 0;
}

.tp-topbar-row {
    width: 100%;
}

.tp-topbar-search-icon {
    left: 12px;
    top: 11px;
}

.tp-data-grid {
    width: 100% !important;
}

.tp-table-head-sm {
    font-size: 13px;
}

.tp-table-body-sm {
    font-size: 14px;
}

.tp-inline-form {
    display: inline;
}

.tp-text-12 {
    font-size: 12px;
}

.tp-text-11 {
    font-size: 11px;
}

.tp-detail-label-col {
    width: 130px;
}

.tp-muted-icon {
    color: #dddfeb;
}

.tp-col-select {
    width: 34px;
}

.tp-inv-photo-cell {
    max-width: 62px;
    min-width: 62px;
    width: 62px;
}

.tp-soft-border {
    border: 1px solid var(--tp-border-strong);
}

body.tp-theme-dark .tp-soft-border {
    border-color: #444;
}

body.tp-theme-light .card,
body.tp-theme-light .table-responsive,
body.tp-theme-light .modal-content,
body.tp-theme-light .dropdown-menu,
body.tp-theme-light .list-group-item,
body.tp-theme-light .tp-settings-card,
body.tp-theme-light .tp-settings-panel,
body.tp-theme-light .tp-page-header,
body.tp-theme-light .tp-help-menu,
body.tp-theme-light .tp-note-menu,
body.tp-theme-light .tp-notification-menu,
body.tp-theme-light .tp-profile-menu {
    background: var(--tp-surface) !important;
    border-color: var(--tp-border) !important;
}

body.tp-theme-light .form-control,
body.tp-theme-light .form-select,
body.tp-theme-light .select2-selection,
body.tp-theme-light textarea,
body.tp-theme-light input[type="search"] {
    background: #fffaf2 !important;
    border-color: #d8ccba !important;
}

body.tp-theme-light .form-select,
body.tp-theme-light .dataTables_length select {
    -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='%23525f73' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-position: right 0.85rem center !important;
    background-repeat: no-repeat !important;
    background-size: 16px 12px !important;
    padding-right: 2.3rem !important;
}

.input-group > .tp-currency-addon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 800;
    justify-content: center;
    min-width: 42px;
    padding-inline: 0.7rem;
    white-space: nowrap;
}

.input-group > .tp-currency-addon:not(.tp-currency-addon--suffix) {
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.input-group > .tp-currency-addon.tp-currency-addon--suffix {
    border-bottom-left-radius: 0 !important;
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
    order: 2;
}

.input-group:has(> .tp-currency-addon.tp-currency-addon--suffix) > .form-control,
.input-group:has(> .tp-currency-addon.tp-currency-addon--suffix) > .form-select {
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
    border-top-right-radius: 0 !important;
    order: 1;
}

.tp-phone-field {
    width: 100%;
}

.tp-phone-field__group {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(148px, 220px) minmax(0, 1fr);
    width: 100%;
}

.tp-phone-field__country,
.tp-phone-field__number {
    min-height: 46px;
}

.tp-phone-field__country {
    font-weight: 700;
}

.tp-phone-field--compact .tp-phone-field__group {
    grid-template-columns: minmax(132px, 168px) minmax(0, 1fr);
    gap: 0.5rem;
}

#modalMostradorRapido .modal-dialog {
    max-width: 560px;
}

#modalMostradorRapido .row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

#modalMostradorRapido .form-label {
    margin-bottom: 0.48rem;
}

#modalMostradorRapido .form-control,
#modalMostradorRapido .form-select,
#modalMostradorRapido .input-group-text {
    min-height: 43px;
}

#modalMostradorRapido .tp-phone-field--express .tp-phone-field__group {
    gap: 0.55rem;
    grid-template-columns: minmax(106px, 0.9fr) minmax(0, 1.1fr);
}

#modalMostradorRapido .tp-phone-field--express .tp-phone-field__country,
#modalMostradorRapido .tp-phone-field--express .tp-phone-field__number {
    min-height: 43px;
}

#modalMostradorRapido .input-group {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .tp-phone-field__group {
        grid-template-columns: 1fr;
    }
}

#sidebar,
.sidebar {
    --tp-sidebar-bottom-safe-gap: max(16px, env(safe-area-inset-bottom));
    background: var(--tp-sidebar) !important;
    border-right: 0 !important;
    box-sizing: border-box;
    flex: 0 0 186px !important;
    height: 100vh;
    min-height: 100vh;
    min-width: 186px !important;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: var(--tp-sidebar-bottom-safe-gap);
    position: sticky;
    scroll-padding-bottom: var(--tp-sidebar-bottom-safe-gap);
    top: 0;
    transition: none !important;
    width: 186px !important;
    z-index: 100;
}

@supports (height: 100dvh) {
    #sidebar,
    .sidebar {
        height: 100dvh;
        min-height: 100dvh;
    }
}

.tp-sidebar {
    color: #ffffff;
    display: flex;
    flex-direction: column;
    padding-top: 14px;
}

body.tp-theme-light #sidebar,
body.tp-theme-light .sidebar {
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.09), transparent 34%),
        linear-gradient(180deg, #f4ebde 0%, #ede1d0 100%) !important;
    border-right: 1px solid rgba(190, 173, 147, 0.55) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.3);
}

body.tp-theme-light .tp-sidebar {
    color: #223047;
}

.tp-sidebar-brand {
    align-items: center;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.18), transparent 46%),
        linear-gradient(135deg, rgba(17, 24, 39, 0.96), rgba(33, 49, 77, 0.94));
    border: 1px solid rgba(120, 148, 196, 0.18);
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 20px rgba(9, 14, 24, 0.22);
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    margin: 0 8px 10px !important;
    min-height: 94px !important;
    overflow: hidden;
    padding: 12px 10px !important;
    white-space: normal !important;
    width: calc(100% - 16px);
}

.tp-sidebar-brand--text-only {
    gap: 0;
    min-height: 76px !important;
    padding: 14px 12px !important;
}

.tp-sidebar-brand--logo-only {
    gap: 0;
    min-height: 86px !important;
    padding: 12px !important;
}

body.tp-theme-light .tp-sidebar-brand {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.42), transparent 42%),
        linear-gradient(135deg, #dbe8f6 0%, #c3d8ef 100%);
    border: 1px solid rgba(124, 150, 187, 0.32);
    box-shadow:
        0 10px 24px rgba(74, 96, 138, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body.tp-theme-light .tp-sidebar-brand .sidebar-text {
    color: #16324b;
    text-shadow: none;
}

body.tp-theme-light .tp-sidebar .logo-img {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.55),
        0 8px 16px rgba(54, 79, 117, 0.10);
}

body.tp-theme-light .tp-sidebar-fallback-logo {
    background: linear-gradient(135deg, rgba(21, 118, 248, 0.16), rgba(18, 182, 210, 0.18));
    border-color: rgba(124, 150, 187, 0.25);
    color: #1c6ef3;
}

.tp-sidebar-brand .sidebar-text {
    color: #f8fbff;
    display: block;
    flex: 0 1 auto;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    line-height: 1.08;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-align: center;
    text-shadow: 0 1px 12px rgba(20, 184, 230, 0.14);
    transform: translateY(0);
    width: 100%;
}

.tp-sidebar-brand-main {
    display: block;
    line-height: 1.02;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.tp-sidebar .logo-img {
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    display: block;
    flex-shrink: 0;
    height: 52px !important;
    margin-right: 0;
    min-width: 52px !important;
    object-fit: cover;
    width: 52px !important;
}

.tp-sidebar-fallback-logo {
    align-items: center;
    background: linear-gradient(135deg, rgba(21, 118, 248, 0.22), rgba(18, 182, 210, 0.2));
    border: 1px solid rgba(125, 233, 255, 0.18);
    border-radius: 10px;
    display: inline-flex;
    font-size: 18px;
    height: 42px;
    justify-content: center;
    margin-right: 0;
    min-width: 42px;
}

.tp-sidebar-compact-mark {
    display: none;
}

.tp-sidebar-brand--text-only .sidebar-text {
    font-size: 1.18rem;
    line-height: 1.06;
    max-width: 100%;
}

.tp-sidebar-brand--logo-only .logo-img {
    height: 58px !important;
    min-width: 58px !important;
    width: 58px !important;
}

body > .d-flex > .flex-grow-1 {
    min-width: 0;
}

#sidebar h4,
.sidebar h4 {
    box-sizing: border-box;
    min-height: 44px;
    white-space: nowrap;
}

#sidebar h4.tp-sidebar-brand,
.sidebar h4.tp-sidebar-brand {
    min-height: 56px;
    white-space: normal !important;
}

#sidebar a,
.sidebar a {
    align-items: center;
    border-left: 0;
    box-sizing: border-box;
    color: #c2c8d4 !important;
    display: flex;
    font-size: 15px;
    font-weight: 600;
    gap: 2px;
    line-height: 1.1;
    min-height: 45px;
    padding: 12px 8px;
    text-decoration: none;
    white-space: nowrap;
}

body.tp-theme-light #sidebar a,
body.tp-theme-light .sidebar a {
    border-radius: 12px;
    color: #425674 !important;
    margin: 2px 8px;
    min-height: 43px;
    padding: 11px 10px;
}

#sidebar a i,
.sidebar a i {
    flex: 0 0 20px;
    font-size: 16px;
    margin-right: 8px;
    text-align: center;
    width: 20px;
}

body.tp-theme-light #sidebar a i,
body.tp-theme-light .sidebar a i {
    color: #60748f;
}

#sidebar a:hover,
#sidebar a.active,
.sidebar a:hover,
.sidebar a.active {
    background: var(--tp-sidebar-active) !important;
    border-left-color: transparent !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

body.tp-theme-light #sidebar a:hover,
body.tp-theme-light #sidebar a.active,
body.tp-theme-light .sidebar a:hover,
body.tp-theme-light .sidebar a.active {
    background: linear-gradient(180deg, rgba(74, 96, 138, 0.12), rgba(74, 96, 138, 0.2)) !important;
    border-left-color: transparent !important;
    color: #1f3150 !important;
    box-shadow: inset 0 0 0 1px rgba(118, 138, 173, 0.16) !important;
}

body.tp-theme-light #sidebar a:hover i,
body.tp-theme-light #sidebar a.active i,
body.tp-theme-light .sidebar a:hover i,
body.tp-theme-light .sidebar a.active i {
    color: #1d6ef2 !important;
}

.tp-sidebar-support {
    background: linear-gradient(180deg, rgba(23, 33, 48, 0.88), rgba(18, 27, 40, 0.96));
    border: 1px solid rgba(95, 119, 157, 0.18);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    display: grid;
    gap: 10px;
    margin: auto 8px 12px;
    padding: 12px;
}

body.tp-theme-light .tp-sidebar-support {
    background: linear-gradient(180deg, rgba(240, 234, 222, 0.98), rgba(231, 222, 206, 0.98));
    border-color: rgba(189, 173, 145, 0.52);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.tp-sidebar-support-head {
    align-items: center;
    color: #f8fbff;
    display: flex;
    font-size: 0.88rem;
    font-weight: 800;
    gap: 10px;
}

body.tp-theme-light .tp-sidebar-support-head {
    color: #203047;
}

.tp-sidebar-support-head i {
    color: #77e7af;
    flex: 0 0 18px;
    font-size: 15px;
    text-align: center;
    width: 18px;
}

body.tp-theme-light .tp-sidebar-support-head i {
    color: #218f55;
}

.tp-sidebar-support-links {
    display: grid;
    gap: 8px;
}

.tp-sidebar-support-empty {
    align-items: center;
    color: #b7c3d6;
    display: flex;
    gap: 8px;
    min-height: 38px;
}

body.tp-theme-light .tp-sidebar-support-empty {
    color: #5f6f86;
}

.tp-sidebar-support-empty i {
    color: #7fd7ff;
    flex: 0 0 18px;
    font-size: 14px;
    text-align: center;
    width: 18px;
}

body.tp-theme-light .tp-sidebar-support-empty i {
    color: #2e87c8;
}

#sidebar a.tp-sidebar-support-link,
.sidebar a.tp-sidebar-support-link {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(108, 136, 179, 0.14);
    border-radius: 12px;
    color: #d8e3f3 !important;
    margin: 0;
    min-height: 40px;
    padding: 10px 12px;
}

#sidebar a.tp-sidebar-support-link:hover,
.sidebar a.tp-sidebar-support-link:hover {
    background: rgba(63, 84, 116, 0.65) !important;
    color: #ffffff !important;
}

body.tp-theme-light #sidebar a.tp-sidebar-support-link,
body.tp-theme-light .sidebar a.tp-sidebar-support-link {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(181, 166, 140, 0.45);
    color: #38506f !important;
}

body.tp-theme-light #sidebar a.tp-sidebar-support-link:hover,
body.tp-theme-light .sidebar a.tp-sidebar-support-link:hover {
    background: rgba(255, 255, 255, 0.82) !important;
    color: #173251 !important;
}

html.tp-sidebar-collapsed #sidebar,
html.tp-sidebar-collapsed .sidebar,
body.sidebar-collapsed #sidebar,
body.sidebar-collapsed .sidebar,
#sidebar.collapsed,
.sidebar.collapsed {
    flex-basis: 72px !important;
    min-width: 72px !important;
    width: 72px !important;
}

html.tp-sidebar-collapsed #sidebar .sidebar-text,
html.tp-sidebar-collapsed .sidebar .sidebar-text,
html.tp-sidebar-collapsed #sidebar h4 span,
html.tp-sidebar-collapsed .sidebar h4 span,
body.sidebar-collapsed #sidebar .sidebar-text,
body.sidebar-collapsed .sidebar .sidebar-text,
body.sidebar-collapsed #sidebar h4 span,
body.sidebar-collapsed .sidebar h4 span,
#sidebar.collapsed .sidebar-text,
.sidebar.collapsed .sidebar-text,
#sidebar.collapsed h4 span,
.sidebar.collapsed h4 span {
    display: none !important;
}

html.tp-sidebar-collapsed #sidebar .tp-sidebar-compact-mark,
html.tp-sidebar-collapsed .sidebar .tp-sidebar-compact-mark,
body.sidebar-collapsed #sidebar .tp-sidebar-compact-mark,
body.sidebar-collapsed .sidebar .tp-sidebar-compact-mark,
#sidebar.collapsed .tp-sidebar-compact-mark,
.sidebar.collapsed .tp-sidebar-compact-mark {
    align-items: center;
    background: linear-gradient(135deg, #146cde, #18a9c8);
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 12px;
    color: #ffffff;
    display: inline-flex !important;
    flex: 0 0 42px;
    font-size: 17px;
    height: 42px;
    justify-content: center;
    margin: 0;
    min-width: 42px;
    width: 42px;
}

html.tp-sidebar-collapsed #sidebar h4.tp-sidebar-brand,
html.tp-sidebar-collapsed .sidebar h4.tp-sidebar-brand,
body.sidebar-collapsed #sidebar h4.tp-sidebar-brand,
body.sidebar-collapsed .sidebar h4.tp-sidebar-brand,
#sidebar.collapsed h4.tp-sidebar-brand,
.sidebar.collapsed h4.tp-sidebar-brand {
    min-height: 68px !important;
    padding: 12px 8px !important;
}

html.tp-sidebar-collapsed #sidebar .tp-sidebar-compact-mark i,
html.tp-sidebar-collapsed .sidebar .tp-sidebar-compact-mark i,
body.sidebar-collapsed #sidebar .tp-sidebar-compact-mark i,
body.sidebar-collapsed .sidebar .tp-sidebar-compact-mark i,
#sidebar.collapsed .tp-sidebar-compact-mark i,
.sidebar.collapsed .tp-sidebar-compact-mark i {
    color: inherit !important;
    font-size: 17px !important;
    margin: 0 !important;
}

html.tp-sidebar-collapsed .tp-sidebar-support,
body.sidebar-collapsed .tp-sidebar-support,
#sidebar.collapsed .tp-sidebar-support,
.sidebar.collapsed .tp-sidebar-support {
    display: none !important;
}

html.tp-sidebar-collapsed #sidebar a,
html.tp-sidebar-collapsed .sidebar a,
body.sidebar-collapsed #sidebar a,
body.sidebar-collapsed .sidebar a,
#sidebar.collapsed a,
.sidebar.collapsed a {
    font-size: 0 !important;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html.tp-sidebar-collapsed #sidebar i,
html.tp-sidebar-collapsed .sidebar i,
body.sidebar-collapsed #sidebar i,
body.sidebar-collapsed .sidebar i,
#sidebar.collapsed i,
.sidebar.collapsed i {
    font-size: 1.2rem !important;
    margin-right: 0 !important;
}

html.tp-sidebar-collapsed #sidebar .logo-img,
html.tp-sidebar-collapsed .sidebar .logo-img,
body.sidebar-collapsed #sidebar .logo-img,
body.sidebar-collapsed .sidebar .logo-img,
#sidebar.collapsed .logo-img,
.sidebar.collapsed .logo-img {
    margin-right: 0 !important;
}

.topbar {
    backdrop-filter: blur(18px);
    box-sizing: border-box;
    border-bottom: 1px solid var(--tp-topbar-border) !important;
    background: var(--tp-topbar-surface) !important;
    min-height: 62px;
    position: sticky;
    top: 0;
    z-index: 220;
}

.topbar.tp-main-topbar {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    box-shadow: 0 8px 18px rgba(7, 14, 25, 0.1);
    padding: 10px 16px !important;
}

.tp-topbar-main {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: 12px;
    max-width: 360px;
    min-width: 0;
}

.tp-topbar-main .tp-topbar-search-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.tp-topbar-profile {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    margin-left: auto;
}

.tp-topbar-profile-wrap {
    align-items: center;
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.tp-topbar-profile-wrap > .tp-topbar-chat,
.tp-topbar-profile-wrap > .tp-topbar-bell {
    align-items: center;
    display: flex;
    flex: 0 0 40px;
    height: 40px;
    justify-content: center;
}

.tp-topbar-profile-wrap .tp-chat-trigger,
.tp-topbar-profile-wrap .tp-bell-trigger {
    align-items: center;
    display: inline-flex;
    flex: 0 0 40px;
    height: 40px;
    justify-content: center;
    line-height: 1;
    min-height: 40px;
    min-width: 40px;
    padding: 0 !important;
    width: 40px;
}

.tp-topbar-profile-wrap .tp-chat-trigger > i,
.tp-topbar-profile-wrap .tp-bell-trigger > i {
    line-height: 1;
}

.tp-topbar-bell {
    flex: 0 0 auto;
}

.tp-topbar-help {
    flex: 0 0 auto;
}

.tp-topbar-notes {
    flex: 0 0 auto;
}

.tp-help-trigger {
    background:
        radial-gradient(circle at 30% 25%, rgba(154, 248, 193, 0.22), transparent 38%),
        linear-gradient(145deg, rgba(17, 33, 27, 0.98), rgba(23, 49, 38, 0.96)) !important;
    border: 1px solid rgba(79, 215, 143, 0.26) !important;
    border-radius: 999px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(4, 12, 8, 0.28);
    min-height: 40px;
    min-width: 40px;
    overflow: visible;
    padding: 0 !important;
}

body.tp-theme-light .tp-help-trigger {
    background:
        radial-gradient(circle at 30% 25%, rgba(186, 245, 214, 0.42), transparent 38%),
        linear-gradient(145deg, rgba(234, 246, 238, 0.98), rgba(220, 238, 226, 0.97)) !important;
    border: 1px solid rgba(94, 187, 131, 0.28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 10px 20px rgba(54, 127, 82, 0.12);
}

.tp-help-trigger::after {
    display: none !important;
}

.tp-help-trigger i {
    color: #8ff0b2;
    font-size: 14px;
}

body.tp-theme-light .tp-help-trigger i {
    color: #1f8d53;
}

.tp-note-trigger {
    background:
        radial-gradient(circle at 30% 25%, rgba(156, 163, 175, 0.16), transparent 38%),
        linear-gradient(145deg, rgba(18, 22, 31, 0.98), rgba(31, 38, 52, 0.96)) !important;
    border: 1px solid rgba(126, 140, 163, 0.22) !important;
    border-radius: 999px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(4, 9, 18, 0.28);
    min-height: 40px;
    min-width: 40px;
    overflow: visible;
    padding: 0 !important;
    position: relative;
    z-index: 1;
}

body.tp-theme-light .tp-note-trigger {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 224, 131, 0.34), transparent 36%),
        linear-gradient(145deg, rgba(255, 250, 235, 0.99), rgba(255, 237, 190, 0.98)) !important;
    border: 1px solid rgba(217, 166, 52, 0.42) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 8px 18px rgba(156, 106, 14, 0.13);
}

.tp-note-trigger::after {
    display: none !important;
}

.tp-note-trigger::before {
    background: radial-gradient(circle, rgba(255, 211, 108, 0.14) 0%, rgba(255, 211, 108, 0) 72%);
    border-radius: 999px;
    content: "";
    inset: -4px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: scale(0.94);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.tp-note-trigger.is-filled::before {
    animation: tpBellPulse 3.4s ease-in-out infinite;
    opacity: 0.45;
}

.tp-note-trigger.is-filled {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 221, 122, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(22, 23, 28, 0.98), rgba(36, 38, 47, 0.96)) !important;
    border-color: rgba(255, 210, 92, 0.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 6px 16px rgba(20, 12, 4, 0.16);
}

body.tp-theme-light .tp-note-trigger.is-filled {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 214, 110, 0.34), transparent 34%),
        linear-gradient(145deg, rgba(246, 229, 191, 0.98), rgba(238, 216, 167, 0.97)) !important;
    border-color: rgba(212, 162, 61, 0.34) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 8px 18px rgba(145, 104, 20, 0.16);
}

.tp-note-trigger i {
    color: #aeb9ca;
    filter: drop-shadow(0 0 8px rgba(124, 143, 177, 0.18));
    font-size: 14px;
}

body.tp-theme-light .tp-note-trigger i {
    color: #9a6400;
    filter: none;
}

.tp-note-trigger.is-filled i {
    color: #f2c860;
    filter: drop-shadow(0 0 6px rgba(255, 204, 72, 0.16));
}

body.tp-theme-light .tp-note-trigger.is-filled i {
    color: #9c6a04;
    filter: none;
}

.tp-chat-trigger {
    background:
        radial-gradient(circle at 30% 25%, rgba(156, 163, 175, 0.16), transparent 38%),
        linear-gradient(145deg, rgba(18, 22, 31, 0.98), rgba(31, 38, 52, 0.96)) !important;
    border: 1px solid rgba(126, 140, 163, 0.22) !important;
    border-radius: 999px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(17, 8, 33, 0.32);
    min-height: 40px;
    min-width: 40px;
    overflow: visible;
    padding: 0 !important;
    position: relative;
    z-index: 1;
}

body.tp-theme-light .tp-chat-trigger {
    background:
        radial-gradient(circle at 30% 25%, rgba(126, 190, 255, 0.3), transparent 36%),
        linear-gradient(145deg, rgba(246, 250, 255, 0.99), rgba(219, 235, 255, 0.98)) !important;
    border: 1px solid rgba(81, 146, 225, 0.4) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 8px 18px rgba(44, 111, 191, 0.13);
}

.tp-chat-trigger::after {
    display: none !important;
}

.tp-chat-trigger::before {
    background: radial-gradient(circle, rgba(81, 208, 255, 0.34) 0%, rgba(81, 208, 255, 0) 72%);
    border-radius: 999px;
    content: "";
    inset: -6px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: scale(0.9);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.tp-chat-trigger.is-live::before {
    animation: tpBellPulse 2.2s ease-in-out infinite;
    opacity: 0.95;
}

.tp-chat-trigger i {
    color: #aeb9ca;
    filter: drop-shadow(0 0 8px rgba(124, 143, 177, 0.18));
    font-size: 14px;
}

body.tp-theme-light .tp-chat-trigger i {
    color: #2467ad;
    filter: none;
}

.tp-chat-trigger.is-live {
    background:
        radial-gradient(circle at 30% 25%, rgba(81, 208, 255, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(19, 34, 48, 0.98), rgba(23, 49, 69, 0.96)) !important;
    border-color: rgba(81, 208, 255, 0.24) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 6px 16px rgba(10, 30, 45, 0.18);
}

body.tp-theme-light .tp-chat-trigger.is-live {
    background:
        radial-gradient(circle at 30% 25%, rgba(81, 208, 255, 0.28), transparent 34%),
        linear-gradient(145deg, rgba(227, 244, 249, 0.98), rgba(214, 236, 244, 0.97)) !important;
    border-color: rgba(72, 182, 224, 0.34) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 8px 18px rgba(54, 138, 174, 0.14);
}

.tp-chat-trigger.is-live i {
    color: #9ff2ff;
    filter: drop-shadow(0 0 10px rgba(65, 218, 255, 0.3));
}

body.tp-theme-light .tp-chat-trigger.is-live i {
    color: #1f96c7;
    filter: none;
}

.tp-chat-badge {
    align-items: center;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    border: 2px solid rgba(13, 19, 30, 0.95);
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.28);
    color: #fff;
    display: inline-flex;
    font-size: 10px;
    font-weight: 900;
    height: 19px;
    justify-content: center;
    min-width: 19px;
    padding: 0 4px;
    position: absolute;
    right: -3px;
    top: -4px;
}

body.tp-theme-light .tp-chat-badge {
    border-color: rgba(245, 243, 236, 0.96);
}

.tp-bell-trigger {
    background:
        radial-gradient(circle at 30% 25%, rgba(156, 163, 175, 0.16), transparent 38%),
        linear-gradient(145deg, rgba(18, 22, 31, 0.98), rgba(31, 38, 52, 0.96)) !important;
    border: 1px solid rgba(126, 140, 163, 0.22) !important;
    border-radius: 999px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(5, 20, 35, 0.32);
    min-height: 40px;
    min-width: 40px;
    overflow: visible;
    padding: 0 !important;
    position: relative;
    z-index: 1;
}

body.tp-theme-light .tp-bell-trigger {
    background:
        radial-gradient(circle at 30% 25%, rgba(191, 160, 255, 0.28), transparent 36%),
        linear-gradient(145deg, rgba(251, 249, 255, 0.99), rgba(232, 224, 252, 0.98)) !important;
    border: 1px solid rgba(147, 117, 211, 0.38) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 8px 18px rgba(99, 65, 166, 0.13);
}

.tp-bell-trigger::after {
    display: none !important;
}

.tp-bell-trigger::before {
    background: radial-gradient(circle, rgba(18, 182, 210, 0.3) 0%, rgba(18, 182, 210, 0) 70%);
    border-radius: 999px;
    content: "";
    inset: -7px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: scale(0.88);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.tp-bell-trigger.is-live::before {
    animation: tpBellPulse 2.4s ease-in-out infinite;
    opacity: 1;
}

body.tp-theme-light .tp-bell-trigger.is-live::before {
    opacity: 0.38;
}

.tp-bell-trigger i {
    color: #aeb9ca;
    filter: drop-shadow(0 0 8px rgba(124, 143, 177, 0.18));
    font-size: 14px;
}

body.tp-theme-light .tp-bell-trigger i {
    color: #6746a5;
    filter: none;
}

.tp-bell-trigger.is-live {
    background:
        radial-gradient(circle at 30% 25%, rgba(81, 208, 255, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(19, 34, 48, 0.98), rgba(23, 49, 69, 0.96)) !important;
    border-color: rgba(81, 208, 255, 0.24) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 6px 16px rgba(10, 30, 45, 0.18);
}

body.tp-theme-light .tp-bell-trigger.is-live {
    background:
        radial-gradient(circle at 30% 25%, rgba(81, 208, 255, 0.28), transparent 34%),
        linear-gradient(145deg, rgba(227, 244, 249, 0.98), rgba(214, 236, 244, 0.97)) !important;
    border-color: rgba(72, 182, 224, 0.34) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 8px 18px rgba(54, 138, 174, 0.14);
}

.tp-bell-trigger.is-live i {
    color: #9ff2ff;
    filter: drop-shadow(0 0 10px rgba(65, 218, 255, 0.36));
}

body.tp-theme-light .tp-bell-trigger.is-live i {
    color: #1f96c7;
    filter: none;
}

.tp-bell-badge {
    align-items: center;
    background: linear-gradient(135deg, #ff6a7d, #ef4056);
    border: 2px solid rgba(13, 19, 30, 0.95);
    border-radius: 999px;
    box-shadow: 0 8px 16px rgba(239, 64, 86, 0.3);
    color: #fff;
    display: inline-flex;
    font-size: 10px;
    font-weight: 900;
    height: 19px;
    justify-content: center;
    min-width: 19px;
    padding: 0 4px;
    position: absolute;
    right: -3px;
    top: -4px;
}

.tp-profile-trigger {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    gap: 0;
    min-width: 0;
    padding: 1px !important;
    position: relative;
    white-space: nowrap;
    z-index: 1;
}

.tp-profile-trigger::after {
    display: none !important;
}

.tp-profile-meta {
    display: none;
}

.tp-profile-name {
    color: var(--tp-text);
    display: block;
    font-size: 14px;
    font-weight: 800;
}

.tp-profile-role {
    color: var(--tp-muted);
    display: block;
    font-size: 11px;
    font-weight: 700;
    margin-top: 3px;
}

.tp-profile-avatar-shell {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    height: 37px;
    justify-content: center;
    padding: 0;
    width: 37px;
}

.tp-profile-avatar-shell.is-large {
    background: linear-gradient(135deg, rgba(81, 208, 255, 0.18), rgba(169, 101, 204, 0.22));
    border: 1px solid rgba(97, 171, 232, 0.3);
    height: 54px;
    padding: 4px;
    width: 54px;
}

.tp-profile-avatar {
    border: 0;
    border-radius: 999px;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.tp-profile-avatar-fallback {
    align-items: center;
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.18), transparent 32%),
        linear-gradient(135deg, var(--tp-avatar-start, #33cc99) 0%, var(--tp-avatar-mid, #4ea2e6) 58%, var(--tp-avatar-end, #50d0ff) 100%);
    border: 1px solid var(--tp-avatar-border, rgba(80, 208, 255, 0.26));
    color: #fff;
    display: inline-flex;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 10px 22px var(--tp-avatar-shadow, rgba(20, 86, 109, 0.24));
    font-size: 0.98rem;
    font-weight: 900;
    justify-content: center;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.profile-btn {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px;
    box-shadow: none !important;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 38px;
    padding: 2px 4px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.profile-btn:hover,
.profile-btn:focus-visible {
    background: rgba(21, 118, 248, 0.1);
    box-shadow: 0 0 0 1px rgba(21, 118, 248, 0.2);
    outline: none;
}

.tp-bell-trigger:hover,
.tp-bell-trigger:focus-visible,
.tp-chat-trigger:hover,
.tp-chat-trigger:focus-visible,
.tp-profile-trigger:hover,
.tp-profile-trigger:focus-visible {
    transform: translateY(-1px);
}

.tp-chat-trigger:hover,
.tp-chat-trigger:focus-visible {
    border-color: rgba(192, 129, 236, 0.54) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 14px 30px rgba(28, 12, 54, 0.38),
        0 0 0 1px rgba(169, 101, 204, 0.16) !important;
}

.tp-bell-trigger:hover,
.tp-bell-trigger:focus-visible {
    border-color: rgba(116, 231, 255, 0.52) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 14px 30px rgba(4, 9, 18, 0.38),
        0 0 0 1px rgba(35, 170, 255, 0.14) !important;
}

body.tp-theme-light .tp-chat-trigger:hover,
body.tp-theme-light .tp-chat-trigger:focus-visible {
    border-color: rgba(39, 112, 203, 0.66) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 10px 22px rgba(44, 111, 191, 0.2),
        0 0 0 2px rgba(75, 146, 232, 0.14) !important;
}

body.tp-theme-light .tp-note-trigger:hover,
body.tp-theme-light .tp-note-trigger:focus-visible {
    border-color: rgba(186, 126, 5, 0.66) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 10px 22px rgba(156, 106, 14, 0.2),
        0 0 0 2px rgba(217, 166, 52, 0.14) !important;
    outline: none;
}

body.tp-theme-light .tp-bell-trigger:hover,
body.tp-theme-light .tp-bell-trigger:focus-visible {
    border-color: rgba(104, 70, 165, 0.66) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 10px 22px rgba(99, 65, 166, 0.2),
        0 0 0 2px rgba(132, 96, 197, 0.14) !important;
}

.tp-profile-trigger:hover,
.tp-profile-trigger:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
}

.tp-topbar-profile img {
    display: block;
}

.tp-help-menu,
.tp-notification-menu,
.tp-profile-menu {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    min-width: 0;
    overflow: hidden;
    padding: 10px;
    z-index: 1400;
}

.tp-help-menu {
    width: min(320px, calc(100vw - 28px));
}

.tp-note-menu {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    padding: 10px;
    width: min(360px, calc(100vw - 28px));
    z-index: 1400;
}

.tp-chat-menu {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    padding: 10px;
    width: min(420px, calc(100vw - 28px));
    z-index: 1400;
}

.dropdown.show .tp-note-trigger::before,
.dropdown.show .tp-chat-trigger::before,
.dropdown.show .tp-bell-trigger::before {
    animation: none !important;
    opacity: 0 !important;
}

.dropdown.show .tp-note-trigger,
.dropdown.show .tp-chat-trigger,
.dropdown.show .tp-bell-trigger,
.dropdown.show .tp-profile-trigger {
    z-index: 0;
}

.tp-note-head {
    display: flex;
    gap: 10px;
    padding: 4px 4px 10px;
}

.tp-note-head-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tp-note-head strong {
    color: var(--tp-text);
    font-size: 14px;
}

.tp-note-head small {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 800;
}

.tp-note-textarea {
    border-radius: 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    min-height: 176px;
    resize: vertical;
}

.tp-note-meta {
    align-items: center;
    color: var(--tp-muted);
    display: flex;
    font-size: 11px;
    font-weight: 700;
    gap: 10px;
    justify-content: space-between;
    min-height: 18px;
    margin-top: 10px;
}

.tp-note-status {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-note-counter {
    flex: 0 0 auto;
    white-space: nowrap;
}

.tp-note-status[data-state="draft"] {
    color: var(--tp-primary);
}

.tp-note-status[data-state="saved"] {
    color: var(--tp-success);
}

.tp-note-status[data-state="error"] {
    color: #ef4056;
}

.tp-note-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.tp-chat-tools {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    margin-right: auto;
    position: relative;
}

.tp-chat-icon-btn {
    align-items: center;
    border-radius: 10px !important;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    min-width: 34px;
    padding: 0 !important;
}

.tp-chat-icon-btn i {
    font-size: 13px;
}

.tp-chat-icon-btn.is-active {
    border-color: rgba(43, 123, 255, 0.4) !important;
    box-shadow: 0 0 0 1px rgba(43, 123, 255, 0.12) inset;
    color: var(--tp-primary);
}

.tp-chat-icon-btn.is-muted {
    color: var(--tp-muted);
    opacity: 0.78;
}

.tp-chat-tools-panel {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    margin-top: 10px;
}

.tp-chat-tools-note {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 700;
}

.tp-chat-emoji-panel {
    background: rgba(18, 27, 44, 0.96);
    border: 1px solid rgba(70, 108, 172, 0.32);
    border-radius: 14px;
    display: none;
    margin-top: 10px;
    padding: 8px;
    position: relative;
}

.tp-chat-emoji-panel.is-open {
    display: block;
}

.tp-chat-emoji-track {
    align-items: flex-start;
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    padding: 1px;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.tp-chat-emoji-track::-webkit-scrollbar {
    display: none;
}

.tp-chat-emoji-page {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
}

.tp-chat-emoji-page-head {
    align-items: center;
    color: #b9d4ff;
    display: flex;
    font-size: 0.68rem;
    font-weight: 800;
    justify-content: space-between;
    letter-spacing: 0.03em;
    margin: 1px 4px 7px;
    text-transform: uppercase;
}

.tp-chat-emoji-page-head span {
    color: #85a6d9;
    font-size: 0.64rem;
}

.tp-chat-emoji-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(8, 34px);
    justify-content: space-between;
}

.tp-chat-emoji-scroll {
    align-items: center;
    background: rgba(39, 65, 108, 0.96);
    border: 1px solid rgba(99, 147, 226, 0.35);
    border-radius: 10px;
    color: #b9d4ff;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    height: 30px;
    justify-content: center;
    padding: 0;
    position: absolute;
    top: calc(50% + 8px);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    transform: translateY(-50%);
    width: 30px;
    z-index: 2;
}

.tp-chat-emoji-scroll[data-team-chat-emoji-scroll="previous"] { left: -15px; }
.tp-chat-emoji-scroll[data-team-chat-emoji-scroll="next"] { right: -15px; }

.tp-chat-emoji-scroll:hover,
.tp-chat-emoji-scroll:focus-visible {
    background: rgba(50, 91, 153, 0.98);
    border-color: rgba(129, 181, 255, 0.62);
    color: #fff;
    outline: none;
}

.tp-chat-emoji-scroll:disabled,
.tp-chat-emoji-scroll:disabled:hover,
.tp-chat-emoji-scroll:disabled:focus-visible {
    background: rgba(26, 39, 62, 0.82);
    border-color: rgba(99, 147, 226, 0.16);
    color: rgba(185, 212, 255, 0.34);
    cursor: default;
    opacity: 1;
    outline: none;
}

.tp-chat-emoji-chip {
    align-items: center;
    background: rgba(27, 43, 73, 0.88);
    border: 1px solid rgba(78, 126, 214, 0.28);
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    padding: 0;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    width: 34px;
}

.tp-chat-emoji-chip:hover,
.tp-chat-emoji-chip:focus-visible {
    background: rgba(39, 76, 138, 0.98);
    border-color: rgba(92, 158, 255, 0.48);
    outline: none;
    transform: translateY(-1px);
}

body.tp-theme-light .tp-chat-emoji-panel {
    background: linear-gradient(145deg, #f7fbff, #e7f0fd);
    border-color: #b7cfef;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 18px rgba(45, 91, 157, 0.1);
}

body.tp-theme-light .tp-chat-emoji-page-head {
    color: #315d92;
}

body.tp-theme-light .tp-chat-emoji-page-head span {
    color: #6987ad;
}

body.tp-theme-light .tp-chat-emoji-chip {
    background: #fff;
    border-color: #b9d1ef;
}

body.tp-theme-light .tp-chat-emoji-chip:hover,
body.tp-theme-light .tp-chat-emoji-chip:focus-visible {
    background: #e5f0ff;
    border-color: #659ce2;
}

body.tp-theme-light .tp-chat-emoji-scroll {
    background: #fff;
    border-color: #aac7eb;
    color: #2867ad;
}

body.tp-theme-light .tp-chat-emoji-scroll:hover,
body.tp-theme-light .tp-chat-emoji-scroll:focus-visible {
    background: #dcecff;
    border-color: #5b94dc;
    color: #164f90;
}

body.tp-theme-light .tp-chat-emoji-scroll:disabled,
body.tp-theme-light .tp-chat-emoji-scroll:disabled:hover,
body.tp-theme-light .tp-chat-emoji-scroll:disabled:focus-visible {
    background: #f4f7fb;
    border-color: #d9e4f1;
    color: #aabbd0;
}

@media (max-width: 390px) {
    .tp-chat-emoji-grid {
        gap: 5px;
        grid-template-columns: repeat(8, 32px);
    }

    .tp-chat-emoji-chip {
        flex-basis: 32px;
        height: 32px;
        width: 32px;
    }
}

.tp-note-chat-list {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 260px;
    min-height: 180px;
    overflow-y: auto;
    padding: 12px;
}

.tp-note-chat-empty {
    align-items: center;
    color: var(--tp-muted);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    min-height: 150px;
    text-align: center;
}

.tp-note-chat-item {
    align-items: flex-start;
    display: flex;
    gap: 10px;
}

.tp-note-chat-item.is-own {
    flex-direction: row-reverse;
}

.tp-note-chat-avatar {
    align-items: center;
    background: rgba(43, 123, 255, 0.12);
    border: 1px solid rgba(43, 123, 255, 0.24);
    border-radius: 50%;
    color: var(--tp-text);
    display: inline-flex;
    flex: 0 0 34px;
    font-size: 13px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    overflow: hidden;
    width: 34px;
}

.tp-note-chat-avatar.is-fallback {
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.18), transparent 32%),
        linear-gradient(135deg, var(--tp-avatar-start, #33cc99) 0%, var(--tp-avatar-mid, #4ea2e6) 58%, var(--tp-avatar-end, #50d0ff) 100%);
    border-color: var(--tp-avatar-border, rgba(80, 208, 255, 0.26));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 8px 18px var(--tp-avatar-shadow, rgba(20, 86, 109, 0.18));
    color: #fff;
}

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

.tp-note-chat-avatar-fallback {
    align-items: center;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 900;
    height: 100%;
    justify-content: center;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: 100%;
}

.tp-note-chat-bubble {
    background: var(--tp-panel);
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
}

.tp-note-chat-item.is-own .tp-note-chat-bubble {
    background: rgba(43, 123, 255, 0.12);
    border-color: rgba(43, 123, 255, 0.25);
}

.tp-note-chat-topline {
    align-items: baseline;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.tp-note-chat-topline strong {
    color: var(--tp-text);
    font-size: 12px;
}

.tp-note-chat-topline small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.tp-note-chat-bubble p {
    color: var(--tp-text);
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
    white-space: normal;
    word-break: break-word;
}

.tp-note-chat-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 6px;
}

.tp-note-chat-action {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: var(--tp-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    height: 26px;
    justify-content: center;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    width: 26px;
}

.tp-note-chat-action:hover,
.tp-note-chat-action:focus-visible {
    background: rgba(43, 123, 255, 0.12);
    border-color: rgba(43, 123, 255, 0.28);
    color: #8fc0ff;
    outline: none;
    transform: translateY(-1px);
}

.tp-note-chat-action.is-danger:hover,
.tp-note-chat-action.is-danger:focus-visible {
    background: rgba(255, 84, 112, 0.12);
    border-color: rgba(255, 84, 112, 0.3);
    color: #ff7f97;
}

.tp-note-chat-input {
    border-radius: 14px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-top: 10px;
    max-height: 120px;
    min-height: 72px;
    resize: vertical;
}

/* Keep the global template editor sizing from expanding topbar utilities. */
.tp-note-menu textarea.tp-note-textarea {
    height: 176px !important;
    max-height: min(42vh, 280px) !important;
    min-height: 176px !important;
}

.tp-chat-menu textarea.tp-note-chat-input {
    height: 72px !important;
    max-height: 120px !important;
    min-height: 72px !important;
}

.tp-help-head {
    display: flex;
    gap: 10px;
    padding: 4px 4px 10px;
}

.tp-help-head-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tp-help-head strong {
    color: var(--tp-text);
    font-size: 14px;
}

.tp-help-head small {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 800;
}

.tp-help-list {
    display: grid;
    gap: 10px;
}

.tp-help-item {
    align-items: center;
    background: rgba(36, 49, 68, 0.54);
    border: 1px solid rgba(84, 104, 138, 0.26);
    border-radius: 14px;
    color: inherit;
    display: grid;
    gap: 12px;
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.tp-help-item:hover {
    background: rgba(49, 67, 95, 0.72);
    border-color: rgba(111, 141, 191, 0.34);
    color: inherit;
    transform: translateY(-1px);
}

body.tp-theme-light .tp-help-item {
    background: rgba(237, 245, 239, 0.96);
    border-color: rgba(183, 205, 189, 0.7);
}

body.tp-theme-light .tp-help-item:hover {
    background: rgba(228, 241, 232, 1);
    border-color: rgba(116, 173, 135, 0.72);
}

.tp-help-icon {
    align-items: center;
    background: rgba(25, 118, 79, 0.18);
    border: 1px solid rgba(83, 191, 132, 0.22);
    border-radius: 12px;
    color: #6ae59f;
    display: inline-flex;
    font-size: 0.95rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

body.tp-theme-light .tp-help-icon {
    background: rgba(80, 179, 119, 0.12);
    border-color: rgba(80, 179, 119, 0.22);
    color: #1f8d53;
}

.tp-help-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tp-help-copy strong {
    color: var(--tp-text);
    font-size: 0.92rem;
    font-weight: 800;
}

.tp-help-copy small {
    color: var(--tp-muted);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.tp-help-empty {
    align-items: center;
    color: var(--tp-muted);
    display: flex;
    gap: 10px;
    justify-content: center;
    min-height: 88px;
    text-align: center;
}

.tp-notification-menu {
    width: min(340px, calc(100vw - 28px));
}

.tp-profile-menu {
    min-width: 216px;
    padding: 8px;
    width: min(216px, calc(100vw - 24px));
}

.tp-notification-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 4px 10px;
}

.tp-notification-head-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tp-notification-head strong {
    color: var(--tp-text);
    font-size: 14px;
}

.tp-notification-head small {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 800;
}

.tp-notification-clear-all {
    align-items: center;
    background: rgba(21, 118, 248, 0.08);
    border: 1px solid rgba(21, 118, 248, 0.16);
    border-radius: 999px;
    color: var(--tp-primary);
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    gap: 6px;
    padding: 6px 10px;
}

.tp-notification-clear-all:hover {
    background: rgba(21, 118, 248, 0.14);
}

.tp-notification-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tp-notification-row {
    align-items: stretch;
    display: flex;
    gap: 8px;
}

.tp-notification-row.is-seen .tp-notification-item {
    border-style: dashed;
    filter: saturate(0.72);
    opacity: 0.66;
}

.tp-notification-row.is-seen .tp-notification-icon {
    background: rgba(101, 117, 139, 0.12);
    color: var(--tp-muted);
}

.tp-notification-item {
    align-items: flex-start;
    border: 1px solid var(--tp-border);
    border-radius: 12px;
    color: inherit;
    display: flex;
    flex: 1 1 auto;
    gap: 10px;
    padding: 10px;
    text-decoration: none;
}

.tp-notification-item:hover {
    border-color: var(--tp-primary);
    color: inherit;
}

.tp-notification-item.is-danger { background: rgba(239, 64, 86, 0.05); }
.tp-notification-item.is-warning { background: rgba(243, 181, 27, 0.08); }
.tp-notification-item.is-success { background: rgba(23, 155, 104, 0.08); }
.tp-notification-item.is-info { background: rgba(18, 182, 210, 0.08); }

.tp-notification-icon {
    align-items: center;
    background: var(--tp-surface-soft);
    border-radius: 10px;
    color: var(--tp-primary);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.tp-notification-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tp-notification-copy strong {
    color: var(--tp-text);
    font-size: 13px;
}

.tp-notification-copy small {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.tp-notification-clear-one {
    align-items: center;
    align-self: stretch;
    background: transparent;
    border: 1px solid var(--tp-border);
    border-radius: 12px;
    color: var(--tp-muted);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-width: 40px;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.tp-notification-clear-one:hover {
    background: rgba(23, 155, 104, 0.08);
    border-color: rgba(23, 155, 104, 0.24);
    color: var(--tp-success);
}

.tp-notification-row.is-seen .tp-notification-clear-one {
    background: rgba(23, 155, 104, 0.1);
    border-color: rgba(23, 155, 104, 0.2);
    color: var(--tp-success);
}

.tp-notification-empty {
    align-items: center;
    color: var(--tp-muted);
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    min-height: 120px;
    text-align: center;
}

.tp-profile-menu-head {
    align-items: center;
    display: flex;
    gap: 8px;
    padding: 2px 2px 8px;
}

.tp-profile-avatar-link {
    border-radius: 14px;
    color: inherit;
    display: inline-flex;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease;
}

.tp-profile-avatar-link:hover,
.tp-profile-avatar-link:focus-visible {
    background: rgba(21, 118, 248, 0.08);
    text-decoration: none;
    transform: translateY(-1px);
}

.tp-profile-menu-head strong,
.tp-profile-menu-head small {
    display: block;
    line-height: 1.2;
}

.tp-profile-menu-head strong {
    color: var(--tp-text);
    font-size: 14px;
}

.tp-profile-menu-head small {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 700;
    margin-top: 3px;
}

.tp-profile-menu .dropdown-item {
    padding: 0.52rem 0.6rem;
}

.tp-profile-menu {
    min-width: 270px;
    overflow: hidden;
    position: relative;
}

.tp-profile-panel-main {
    position: relative;
    transition: 0.18s ease;
    z-index: 1;
}

.tp-profile-menu.is-submenu-open .tp-profile-panel-main {
    display: none;
}

.tp-profile-shortcut {
    align-items: center;
    background: transparent;
    border: 0;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    line-height: 1.1;
    min-height: 42px;
    text-align: left;
    width: 100%;
}

.tp-profile-theme-form {
    margin: 0;
}

.tp-profile-theme-row {
    align-items: center;
    background: transparent;
    border: 0;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    line-height: 1.1;
    min-height: 42px;
    padding-right: 2px;
    text-align: left;
    width: 100%;
}

.tp-profile-shortcut-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tp-profile-shortcut-label {
    align-items: center;
    color: var(--tp-text);
    display: inline-flex;
    font-size: 0.96rem;
    font-weight: 800;
}

.tp-profile-shortcut-copy small {
    color: var(--tp-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tp-profile-shortcut-arrow {
    color: var(--tp-muted);
    font-size: 0.78rem;
}

.tp-profile-shortcut:hover .tp-profile-shortcut-arrow,
.tp-profile-shortcut:focus-visible .tp-profile-shortcut-arrow {
    color: var(--tp-primary);
}

.tp-theme-switch {
    align-items: center;
    background: rgba(104, 63, 189, 0.14);
    border: 1px solid rgba(154, 92, 255, 0.42);
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    height: 18px;
    justify-content: flex-start;
    overflow: hidden;
    padding: 1px 2px;
    position: relative;
    transition: 0.18s ease;
    width: 34px;
}

.tp-theme-switch::before {
    color: rgba(255, 255, 255, 0.94);
    content: "✓";
    font-size: 10px;
    font-weight: 900;
    left: 6px;
    line-height: 1;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.18s ease;
}

.tp-theme-switch-knob {
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
    display: block;
    height: 12px;
    transition: 0.18s ease;
    width: 12px;
}

.tp-theme-switch.is-on {
    background: linear-gradient(135deg, rgba(136, 84, 255, 0.98), rgba(188, 105, 255, 0.96));
    border-color: rgba(196, 135, 255, 0.96);
    box-shadow:
        0 0 0 1px rgba(179, 122, 255, 0.08),
        0 6px 14px rgba(122, 74, 219, 0.22);
}

.tp-theme-switch.is-on::before {
    opacity: 1;
}

.tp-theme-switch.is-on .tp-theme-switch-knob {
    transform: translateX(16px);
}

body.tp-theme-light .tp-theme-switch {
    background: rgba(132, 75, 255, 0.08);
    border-color: rgba(154, 92, 255, 0.38);
}

body.tp-theme-light .tp-theme-switch.is-on {
    background: linear-gradient(135deg, rgba(136, 84, 255, 0.94), rgba(188, 105, 255, 0.92));
    border-color: rgba(179, 122, 255, 0.86);
}

.tp-profile-submenu {
    background: var(--tp-panel);
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    inset: auto;
    min-height: 190px;
    opacity: 1;
    padding: 10px 0 6px;
    pointer-events: none;
    position: relative;
    transform: none;
    z-index: 4;
}

.tp-profile-submenu.is-visible {
    animation: tp-profile-submenu-reveal 0.18s ease both;
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

@keyframes tp-profile-submenu-reveal {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

.tp-profile-submenu-head {
    align-items: center;
    border-bottom: 1px solid var(--tp-border);
    display: grid;
    gap: 8px;
    grid-template-columns: 32px 1fr 32px;
    margin-bottom: 8px;
    padding: 0 12px 10px;
}

.tp-profile-submenu-head strong {
    color: var(--tp-text);
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
}

.tp-profile-submenu-back {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--tp-muted);
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.tp-profile-submenu-back:hover,
.tp-profile-submenu-back:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    color: var(--tp-text);
}

.tp-profile-language-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 290px;
    overflow-y: auto;
    padding: 0 8px;
}

.tp-profile-language-item {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--tp-text);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 0.7rem 0.85rem;
    text-align: left;
    text-decoration: none;
    transition: 0.16s ease;
    width: 100%;
}

.tp-profile-language-item:hover,
.tp-profile-language-item:focus-visible {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    color: var(--tp-text);
}

.tp-profile-language-item span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tp-profile-language-item strong {
    color: var(--tp-text);
    font-size: 0.98rem;
    font-weight: 800;
}

.tp-profile-language-item small {
    color: var(--tp-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.tp-profile-language-item i {
    color: var(--tp-muted);
    font-size: 0.9rem;
}

.tp-profile-language-item.is-active {
    background: linear-gradient(135deg, rgba(122, 66, 255, 0.92), rgba(201, 68, 255, 0.86));
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(153, 79, 255, 0.22);
}

.tp-profile-language-item.is-active strong,
.tp-profile-language-item.is-active small,
.tp-profile-language-item.is-active i {
    color: #fff;
}

.tp-profile-language-item.is-link {
    margin-top: 6px;
}

.tp-profile-storage-panel {
    padding: 0 10px 10px;
}

.tp-profile-support-stack {
    display: grid;
    gap: 10px;
}

.tp-profile-contact-card {
    align-items: start;
    background: linear-gradient(135deg, rgba(38, 77, 132, 0.34), rgba(29, 49, 81, 0.7));
    border: 1px solid rgba(94, 151, 234, 0.28);
    border-radius: 14px;
    color: inherit;
    display: grid;
    gap: 10px;
    grid-template-areas:
        "icon copy"
        "icon action";
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 0;
    padding: 12px 13px;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.tp-profile-contact-card:hover,
.tp-profile-contact-card:focus-visible {
    background: linear-gradient(135deg, rgba(47, 100, 170, 0.48), rgba(35, 61, 101, 0.82));
    border-color: rgba(122, 183, 255, 0.52);
    color: inherit;
    outline: none;
    text-decoration: none;
    transform: translateY(-1px);
}

.tp-profile-contact-icon {
    align-items: center;
    background: rgba(47, 137, 255, 0.14);
    border: 1px solid rgba(108, 179, 255, 0.26);
    border-radius: 12px;
    color: #96ceff;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    align-self: center;
    grid-area: icon;
    width: 42px;
}

.tp-profile-contact-copy,
.tp-profile-support-version-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    grid-area: copy;
    min-width: 0;
}

.tp-profile-contact-end {
    align-items: center;
    color: #91c5ff;
    display: flex;
    gap: 8px;
    grid-area: action;
    justify-content: space-between;
    min-width: 0;
    padding-top: 7px;
    width: 100%;
}

.tp-profile-contact-end small {
    color: #9ab5d6;
    font-size: 0.67rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
}

.tp-profile-contact-end i {
    color: #91c5ff;
    font-size: 0.76rem;
}

.tp-profile-contact-badge {
    align-items: center;
    background: rgba(52, 211, 153, 0.16);
    border: 1px solid rgba(52, 211, 153, 0.26);
    border-radius: 999px;
    color: #b5ffd9;
    display: inline-flex;
    font-size: 0.66rem;
    font-weight: 900;
    justify-content: center;
    min-height: 24px;
    padding: 0 0.6rem;
    text-align: center;
    white-space: nowrap;
}

.tp-profile-contact-copy strong,
.tp-profile-contact-copy small {
    display: block;
    line-height: 1.2;
}

.tp-profile-contact-copy > small,
.tp-profile-support-version-copy small {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
}

.tp-profile-contact-copy strong {
    color: var(--tp-text);
    font-size: 0.9rem;
    font-weight: 800;
}

.tp-profile-contact-copy small {
    color: var(--tp-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.tp-profile-contact-card-static {
    cursor: default;
}

.tp-profile-contact-card-static:hover,
.tp-profile-contact-card-static:focus-visible {
    background: linear-gradient(135deg, rgba(38, 77, 132, 0.34), rgba(29, 49, 81, 0.7));
    border-color: rgba(94, 151, 234, 0.28);
    color: inherit;
    transform: none;
}

.tp-profile-support-version {
    background: linear-gradient(135deg, rgba(63, 88, 126, 0.36), rgba(36, 47, 74, 0.72));
    border-color: rgba(123, 158, 216, 0.24);
}

.tp-profile-support-version-icon {
    align-items: center;
    background: rgba(71, 143, 255, 0.12);
    border: 1px solid rgba(103, 171, 255, 0.22);
    border-radius: 12px;
    color: #8bc9ff;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    align-self: center;
    grid-area: icon;
    width: 42px;
}

.tp-profile-support-version-copy {
    gap: 2px;
}

.tp-profile-support-version-copy strong {
    color: var(--tp-text);
    font-size: 0.9rem;
    font-weight: 800;
}

.tp-profile-support-version-copy small {
    color: var(--tp-muted);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
}

.tp-profile-support-version-value {
    color: var(--tp-primary);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    white-space: nowrap;
}

.tp-profile-storage-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}

.tp-profile-storage-drive {
    align-items: center;
    display: flex;
    gap: 10px;
}

.tp-profile-storage-drive-icon {
    align-items: center;
    background: rgba(37, 99, 235, 0.14);
    border: 1px solid rgba(64, 144, 255, 0.24);
    border-radius: 12px;
    color: #8ed0ff;
    display: inline-flex;
    flex: 0 0 40px;
    font-size: 1rem;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.tp-profile-storage-drive-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tp-profile-storage-drive-copy strong,
.tp-profile-storage-drive-copy small {
    display: block;
    line-height: 1.2;
}

.tp-profile-storage-drive-copy strong {
    color: var(--tp-text);
    font-size: 1rem;
    font-weight: 900;
}

.tp-profile-storage-drive-copy small {
    color: var(--tp-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.tp-profile-storage-plan-chip {
    align-self: flex-start;
    background: rgba(21, 118, 248, 0.14);
    border: 1px solid rgba(21, 118, 248, 0.24);
    border-radius: 999px;
    color: #90d6ff;
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1;
    margin-bottom: 2px;
    padding: 5px 8px;
    text-transform: uppercase;
}

.tp-profile-storage-top {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.tp-profile-storage-top strong {
    color: var(--tp-text);
    font-size: 0.98rem;
    font-weight: 800;
}

.tp-profile-storage-top span {
    color: var(--tp-text);
    font-size: 0.94rem;
    font-weight: 800;
}

.tp-profile-storage-meta {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-profile-storage-meta small {
    color: var(--tp-muted);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.tp-profile-storage-meta strong {
    color: var(--tp-text);
    font-size: 0.95rem;
    font-weight: 800;
}

.tp-profile-storage-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-profile-storage-pill {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1;
    padding: 6px 9px;
}

.tp-profile-storage-pill.is-used {
    background: rgba(148, 163, 184, 0.10);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: var(--tp-text);
}

.tp-profile-storage-pill.is-free {
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.18);
    color: #96f7b7;
}

.tp-topbar-search-wrap {
    position: relative;
    width: 100%;
}

.tp-topbar-search-wrap .fa-magnifying-glass {
    top: 50% !important;
    transform: translateY(-50%);
}

.tp-topbar-search-input {
    border-radius: 10px !important;
    font-size: 0.95rem !important;
    height: 38px !important;
    line-height: 1.2 !important;
    padding-left: 35px !important;
    padding-right: 42px !important;
}

.tp-topbar-search-btn {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--tp-primary);
    display: inline-flex;
    height: 30px;
    justify-content: center;
    position: absolute;
    right: 6px;
    top: 4px;
    width: 30px;
}

.tp-topbar-search-btn:hover {
    color: #fff;
}

.tp-settings-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tp-settings-nav {
    border-bottom: 1px solid var(--tp-border);
    gap: 8px;
    padding: 0 2px 2px;
}

.tp-settings-nav .nav-link {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--tp-muted);
    font-size: 15px;
    font-weight: 800;
    padding: 0.78rem 0.35rem;
    white-space: nowrap;
}

.tp-settings-nav .nav-link:hover {
    color: var(--tp-text);
}

.tp-settings-nav .nav-link.active {
    background: transparent;
    border-bottom-color: var(--tp-primary);
    color: var(--tp-text);
}

.tp-settings-panel {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 18px;
    box-shadow: var(--tp-shadow-soft);
    overflow: hidden;
    padding: 18px;
}

.tp-settings-panel:has(#tp-settings-permisos.show.active) {
    overflow: visible;
}

.tp-settings-card {
    background:
        radial-gradient(circle at top right, var(--tp-settings-tone-soft, rgba(21, 118, 248, 0.10)), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 34%),
        var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 18px;
    box-shadow: var(--tp-shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    overflow: hidden;
    padding: 18px;
    position: relative;
}

.tp-settings-card::before {
    background: linear-gradient(90deg, var(--tp-settings-tone-line, rgba(21, 118, 248, 0.42)), transparent 78%);
    content: "";
    height: 3px;
    left: 0;
    opacity: 0.95;
    position: absolute;
    right: 0;
    top: 0;
}

.tp-settings-card-header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

#tp-settings-profile {
    --tp-settings-tone-soft: rgba(56, 189, 248, 0.12);
    --tp-settings-tone-border: rgba(56, 189, 248, 0.18);
    --tp-settings-tone-line: rgba(56, 189, 248, 0.34);
    --tp-settings-tone-text: #61c5f8;
}

#tp-settings-seguridad {
    --tp-settings-tone-soft: rgba(34, 197, 94, 0.11);
    --tp-settings-tone-border: rgba(34, 197, 94, 0.18);
    --tp-settings-tone-line: rgba(34, 197, 94, 0.32);
    --tp-settings-tone-text: #4cd681;
}

#tp-settings-taller {
    --tp-settings-tone-soft: rgba(59, 130, 246, 0.11);
    --tp-settings-tone-border: rgba(59, 130, 246, 0.18);
    --tp-settings-tone-line: rgba(59, 130, 246, 0.32);
    --tp-settings-tone-text: #73b2ff;
}

#tp-settings-preferencias {
    --tp-settings-tone-soft: rgba(245, 158, 11, 0.10);
    --tp-settings-tone-border: rgba(245, 158, 11, 0.18);
    --tp-settings-tone-line: rgba(245, 158, 11, 0.30);
    --tp-settings-tone-text: #f2b84a;
}

#tp-settings-usuarios {
    --tp-settings-tone-soft: rgba(168, 85, 247, 0.10);
    --tp-settings-tone-border: rgba(168, 85, 247, 0.17);
    --tp-settings-tone-line: rgba(168, 85, 247, 0.28);
    --tp-settings-tone-text: #c28aff;
}

#tp-settings-permisos {
    --tp-settings-tone-soft: rgba(14, 165, 233, 0.11);
    --tp-settings-tone-border: rgba(14, 165, 233, 0.17);
    --tp-settings-tone-line: rgba(14, 165, 233, 0.30);
    --tp-settings-tone-text: #57c5eb;
}

#tp-settings-almacenamiento {
    --tp-settings-tone-soft: rgba(6, 182, 212, 0.10);
    --tp-settings-tone-border: rgba(6, 182, 212, 0.17);
    --tp-settings-tone-line: rgba(6, 182, 212, 0.28);
    --tp-settings-tone-text: #46cbde;
}

#tp-settings-historial {
    --tp-settings-tone-soft: rgba(37, 99, 235, 0.10);
    --tp-settings-tone-border: rgba(37, 99, 235, 0.17);
    --tp-settings-tone-line: rgba(37, 99, 235, 0.28);
    --tp-settings-tone-text: #6aa3ff;
}

#tp-settings-datos {
    --tp-settings-tone-soft: rgba(239, 68, 68, 0.08);
    --tp-settings-tone-border: rgba(245, 158, 11, 0.16);
    --tp-settings-tone-line: rgba(245, 158, 11, 0.28);
    --tp-settings-tone-text: #f2b85a;
}

body.tp-theme-light .tp-settings-panel,
body.tp-theme-light .tp-settings-card {
    background:
        radial-gradient(circle at top right, var(--tp-settings-tone-soft, rgba(56, 189, 248, 0.16)), transparent 36%),
        radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.88), transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 236, 223, 0.95)) !important;
    border-color: var(--tp-settings-tone-border, rgba(56, 189, 248, 0.22)) !important;
    box-shadow:
        0 18px 36px rgba(143, 117, 76, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

body.tp-theme-light .tp-settings-panel {
    position: relative;
    overflow: hidden;
}

body.tp-theme-light .tp-settings-panel:has(#tp-settings-permisos.show.active),
body.tp-theme-light #tp-settings-permisos .tp-settings-card {
    overflow: visible;
}

body.tp-theme-light .tp-settings-card::before {
    background: linear-gradient(90deg, var(--tp-settings-tone-line, rgba(56, 189, 248, 0.42)), rgba(255, 255, 255, 0.42) 58%, transparent 88%);
    height: 4px;
    opacity: 1;
}

body.tp-theme-light .tp-page-header,
body.tp-theme-light .dashboard-heading,
body.tp-theme-light .modal-content {
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 38%),
        radial-gradient(circle at bottom left, rgba(245, 158, 11, 0.10), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 236, 223, 0.95)) !important;
    border-color: #d8ccba !important;
    box-shadow:
        0 18px 34px rgba(143, 117, 76, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.tp-history-filters .form-control,
.tp-history-filters .form-select,
.tp-log-tile {
    background: rgba(255, 255, 255, 0.028);
}

body.tp-theme-light .tp-history-filters .form-control,
body.tp-theme-light .tp-history-filters .form-select,
body.tp-theme-light .tp-log-tile {
    background: rgba(255, 255, 255, 0.62);
}

.tp-settings-card-title {
    color: var(--tp-text);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tp-settings-card-title h6 {
    color: var(--tp-text);
    font-size: 1.04rem;
    font-weight: 900;
    margin: 0;
}

.tp-settings-title-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.tp-settings-plan-chip {
    background: linear-gradient(135deg, rgba(21, 118, 248, 0.18), rgba(14, 165, 233, 0.1));
    border: 1px solid rgba(21, 118, 248, 0.26);
    border-radius: 999px;
    color: #8fd3ff;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 6px 10px;
    text-transform: uppercase;
}

.tp-settings-storage-plan-form {
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 14px;
}

.tp-settings-storage-plan-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tp-settings-storage-plan-copy small,
.tp-settings-storage-plan-copy strong,
.tp-settings-storage-plan-copy span {
    display: block;
    line-height: 1.2;
}

.tp-settings-storage-plan-copy small {
    color: var(--tp-muted);
    font-size: 0.73rem;
    font-weight: 800;
    text-transform: uppercase;
}

.tp-settings-storage-plan-copy strong {
    color: var(--tp-text);
    font-size: 1rem;
    font-weight: 900;
}

.tp-settings-storage-plan-copy span {
    color: var(--tp-muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.tp-settings-storage-plan-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.tp-settings-storage-plan-actions .form-select {
    min-width: 140px;
}

@media (max-width: 768px) {
    .tp-settings-storage-plan-form,
    .tp-settings-storage-plan-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .tp-settings-storage-plan-actions .form-select,
    .tp-settings-storage-plan-actions .btn {
        width: 100%;
    }
}

.tp-settings-card-title p {
    color: var(--tp-muted);
    font-size: 0.96rem;
    margin: 0;
}

.tp-settings-panel .form-label,
.tp-settings-panel .form-control,
.tp-settings-panel .form-select,
.tp-settings-panel .btn,
.tp-settings-panel .alert,
.tp-settings-panel .table,
.tp-settings-panel .text-muted,
.tp-settings-panel small {
    font-size: 0.96rem;
}

.tp-settings-card-icon {
    align-items: center;
    background: linear-gradient(135deg, var(--tp-settings-tone-soft, rgba(21, 118, 248, 0.12)), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--tp-settings-tone-border, rgba(21, 118, 248, 0.18));
    border-radius: 14px;
    color: var(--tp-settings-tone-text, var(--tp-primary));
    display: inline-flex;
    flex: 0 0 42px;
    font-size: 1rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.tp-settings-avatar-panel {
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(21, 118, 248, 0.05));
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    display: flex;
    gap: 18px;
    padding: 16px;
}

.tp-settings-avatar-panel-profile {
    align-items: flex-start;
}

.tp-settings-profile-shell {
    align-items: stretch;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
}

.tp-settings-profile-card {
    background:
        radial-gradient(circle at top right, rgba(21, 118, 248, 0.14), transparent 38%),
        linear-gradient(180deg, rgba(14, 20, 29, 0.44), rgba(12, 18, 27, 0.16));
    align-items: center;
    border: 1px solid rgba(21, 118, 248, 0.16);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}

.tp-settings-profile-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.tp-settings-profile-avatar-stage {
    align-items: center;
    display: flex;
    justify-content: center;
}

.tp-settings-profile-identity {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.tp-settings-profile-identity strong {
    color: var(--tp-text);
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.tp-settings-profile-identity small {
    color: var(--tp-muted);
    line-height: 1.4;
}

.tp-settings-avatar-preview {
    align-items: center;
    background: var(--tp-surface-soft);
    border: 2px solid rgba(21, 118, 248, 0.22);
    border-radius: 18px;
    display: inline-flex;
    flex: 0 0 94px;
    height: 94px;
    justify-content: center;
    overflow: hidden;
    width: 94px;
}

.tp-settings-avatar-preview.is-large {
    border-radius: 22px;
    box-shadow:
        0 16px 34px rgba(6, 10, 18, 0.22),
        0 0 0 1px rgba(21, 118, 248, 0.10);
    flex: 0 0 138px;
    height: 138px;
    width: 138px;
}

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

.tp-settings-logo-text-preview {
    align-items: center;
    color: #f8fbff;
    display: flex;
    font-size: 1.05rem;
    font-weight: 900;
    justify-content: center;
    line-height: 1.12;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 0 8px;
    text-align: center;
    width: 100%;
}

.tp-settings-brand-preview {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.tp-settings-brand-preview--logo-only,
.tp-settings-brand-preview--name-only {
    gap: 0;
}

.tp-settings-brand-preview--logo-only img {
    max-height: 66px;
    max-width: 66px;
}

.tp-settings-avatar-fallback {
    color: var(--tp-muted);
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
}

.tp-settings-avatar-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.tp-settings-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.tp-file-input-native {
    height: 1px;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.tp-avatar-upload-card {
    align-items: center;
    background:
        radial-gradient(circle at left center, rgba(21, 118, 248, 0.12), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(21, 118, 248, 0.05));
    border: 1px solid rgba(21, 118, 248, 0.2);
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: flex-start;
    min-height: 84px;
    padding: 12px 14px;
    text-align: left;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    width: 100%;
}

.tp-avatar-upload-card:hover,
.tp-avatar-upload-card:focus-within {
    background:
        radial-gradient(circle at left center, rgba(21, 118, 248, 0.18), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(21, 118, 248, 0.08));
    border-color: rgba(21, 118, 248, 0.34);
    box-shadow: 0 10px 22px rgba(21, 118, 248, 0.10);
    transform: translateY(-1px);
}

.tp-avatar-upload-card.is-selected {
    background:
        radial-gradient(circle at left center, rgba(38, 198, 218, 0.14), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(38, 198, 218, 0.06));
    border-color: rgba(38, 198, 218, 0.34);
    box-shadow: 0 10px 22px rgba(38, 198, 218, 0.10);
}

.tp-avatar-upload-card.is-compact {
    border-radius: 14px;
    gap: 10px;
    min-height: 0;
    padding: 10px 12px;
}

.tp-avatar-upload-card.is-compact .tp-avatar-upload-badge {
    flex-basis: 36px;
    font-size: 0.88rem;
    height: 36px;
    width: 36px;
}

.tp-avatar-upload-card.is-compact .tp-avatar-upload-copy strong {
    font-size: 0.9rem;
}

.tp-avatar-upload-card.is-compact .tp-avatar-upload-file {
    font-size: 0.78rem;
}

.tp-avatar-upload-card.is-disabled {
    cursor: default;
    opacity: 0.72;
}

.tp-avatar-upload-card.is-disabled:hover,
.tp-avatar-upload-card.is-disabled:focus-within {
    box-shadow: none;
    transform: none;
}

.tp-avatar-upload-badge {
    align-items: center;
    background: linear-gradient(180deg, rgba(21, 118, 248, 0.24), rgba(21, 118, 248, 0.1));
    border: 1px solid rgba(21, 118, 248, 0.28);
    border-radius: 999px;
    color: #8dc2ff;
    display: inline-flex;
    flex: 0 0 40px;
    font-size: 0.94rem;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.tp-avatar-upload-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tp-avatar-upload-copy strong {
    color: var(--tp-text);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.1;
}

.tp-avatar-upload-file {
    color: var(--tp-muted);
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-settings-profile-header,
.tp-settings-profile-inline {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.tp-settings-profile-header {
    align-items: flex-start;
    margin-bottom: 2px;
}

.tp-settings-profile-title {
    color: var(--tp-text);
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.tp-settings-profile-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-settings-profile-pill {
    align-items: center;
    background: rgba(21, 118, 248, 0.10);
    border: 1px solid rgba(21, 118, 248, 0.16);
    border-radius: 999px;
    color: var(--tp-muted);
    display: inline-flex;
    font-size: 0.83rem;
    font-weight: 700;
    gap: 7px;
    line-height: 1;
    max-width: 100%;
    padding: 9px 12px;
}

.tp-settings-profile-pill.is-warning {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.2);
    color: #f6c86c;
}

.tp-settings-profile-meta-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.tp-settings-profile-meta-item {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    display: flex;
    gap: 10px;
    padding: 10px 12px;
}

.tp-settings-profile-meta-item.is-warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.16);
}

.tp-settings-profile-meta-icon {
    align-items: center;
    background: rgba(21, 118, 248, 0.12);
    border: 1px solid rgba(21, 118, 248, 0.18);
    border-radius: 11px;
    color: var(--tp-primary);
    display: inline-flex;
    flex: 0 0 34px;
    font-size: 0.9rem;
    height: 34px;
    justify-content: center;
}

.tp-settings-profile-meta-item.is-warning .tp-settings-profile-meta-icon {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.16);
    color: #f6c86c;
}

.tp-settings-profile-meta-item small,
.tp-settings-profile-inline-copy span,
.tp-settings-profile-inline-copy small {
    color: var(--tp-muted);
    display: block;
    line-height: 1.35;
}

.tp-settings-profile-meta-item strong,
.tp-settings-profile-inline-copy strong {
    color: var(--tp-text);
    display: block;
    font-size: 0.96rem;
    line-height: 1.35;
}

.tp-settings-profile-inline-card {
    align-items: center;
    background: linear-gradient(135deg, rgba(21, 118, 248, 0.09), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(21, 118, 248, 0.16);
    border-radius: 16px;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 12px 14px;
}

.tp-settings-profile-inline-copy {
    min-width: 0;
}

.tp-auto-dismiss-alert {
    transition: opacity 0.24s ease, transform 0.24s ease, margin 0.24s ease;
}

.tp-auto-dismiss-alert.is-hiding {
    margin-bottom: 0 !important;
    opacity: 0;
    transform: translateY(-6px);
}

.tp-settings-form-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-settings-form-grid .is-full {
    grid-column: 1 / -1;
}

/* Keep the workshop identity form compact on wide screens without hurting mobile. */
.tp-settings-form-grid > .tp-settings-identity-compact {
    max-width: 30rem;
}

.tp-settings-note {
    background: rgba(21, 118, 248, 0.08);
    border: 1px solid rgba(21, 118, 248, 0.14);
    border-radius: 14px;
    color: var(--tp-muted);
    font-size: 0.96rem;
    padding: 12px 14px;
}

.tp-settings-note strong {
    color: var(--tp-text);
}

.tp-settings-stat-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-settings-section-block {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--tp-border);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
}

.tp-settings-section-block + .tp-settings-section-block {
    margin-top: 14px;
}

.tp-settings-section-storage {
    background:
        linear-gradient(135deg, rgba(30, 144, 255, 0.10), rgba(33, 212, 253, 0.04)),
        var(--tp-surface-soft);
    border-color: rgba(33, 136, 255, 0.24);
}

.tp-settings-section-heading {
    align-items: center;
    display: flex;
    gap: 12px;
}

.tp-settings-section-heading h6 {
    color: var(--tp-text);
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
}

.tp-settings-section-heading p {
    color: var(--tp-muted);
    font-size: 0.92rem;
    margin: 2px 0 0;
}

.tp-settings-section-badge {
    align-items: center;
    background: var(--tp-settings-tone-soft, rgba(21, 118, 248, 0.10));
    border: 1px solid var(--tp-settings-tone-border, rgba(21, 118, 248, 0.16));
    border-radius: 14px;
    color: var(--tp-settings-tone-text, var(--tp-accent));
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.tp-settings-stat {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    padding: 12px 14px;
}

.tp-settings-stat-accent {
    background: linear-gradient(180deg, var(--tp-settings-tone-soft, rgba(21, 118, 248, 0.09)), rgba(255, 255, 255, 0.02));
    border-color: var(--tp-settings-tone-border, rgba(21, 118, 248, 0.18));
}

.tp-settings-stat-wide {
    grid-column: 1 / -1;
}

.tp-settings-stat small,
.tp-settings-stat strong {
    display: block;
    line-height: 1.2;
}

.tp-settings-stat small {
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.tp-settings-stat strong {
    color: var(--tp-text);
    font-size: 1.06rem;
    font-weight: 800;
    margin-top: 5px;
}

.tp-settings-stat-disk span {
    color: var(--tp-muted);
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 4px;
}

.tp-settings-capacity {
    background: rgba(6, 12, 24, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 12px 14px;
}

.tp-settings-capacity-meta {
    align-items: center;
    color: var(--tp-muted);
    display: flex;
    font-size: 0.92rem;
    font-weight: 700;
    justify-content: space-between;
    margin-bottom: 10px;
}

.tp-settings-capacity-meta strong {
    color: var(--tp-text);
    font-size: 0.98rem;
}

.tp-settings-capacity-bar {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.tp-settings-capacity-bar span {
    background: linear-gradient(90deg, #21c9f3, #2f7cff);
    border-radius: inherit;
    display: block;
    height: 100%;
    min-width: 8px;
}

.tp-settings-capacity-bar span.is-warning {
    background: linear-gradient(90deg, #f7b500, #ffcf53);
}

.tp-settings-capacity-bar span.is-danger {
    background: linear-gradient(90deg, #ff5d6c, #ff3048);
}

.tp-settings-alert-preview {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-settings-alert-preview-item {
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
}

.tp-settings-alert-preview-item strong {
    font-size: 0.94rem;
}

.tp-settings-alert-preview-item span {
    color: var(--tp-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.tp-settings-alert-preview-item.is-warning {
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.20);
    color: #f7c75b;
}

.tp-settings-alert-preview-item.is-danger {
    background: rgba(244, 63, 94, 0.10);
    border: 1px solid rgba(244, 63, 94, 0.20);
    color: #ff8998;
}

.tp-settings-user-table th,
.tp-settings-user-table td {
    vertical-align: middle;
}

.tp-settings-user-table thead th {
    font-size: 13px;
}

.tp-settings-user-table tbody td {
    font-size: 15px;
}

.tp-settings-user-actions-head,
.tp-settings-user-actions-cell {
    min-width: 300px;
}

.tp-settings-user-actions {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    width: 100%;
}

.tp-settings-user-role-form {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-left: auto;
    min-width: 0;
}

.tp-settings-user-role-select {
    min-width: 176px;
    width: 176px;
}

.tp-settings-user-icon-form {
    display: inline-flex;
    flex: 0 0 auto;
}

.tp-settings-user-actions > .btn,
.tp-settings-user-icon-form > .btn,
.tp-settings-user-role-form > .btn {
    align-items: center;
    display: inline-flex;
    flex: 0 0 37px;
    justify-content: center;
    min-width: 37px;
    padding-left: 0;
    padding-right: 0;
    width: 37px;
}

@media (max-width: 1200px) {
    .tp-settings-user-table {
        table-layout: fixed;
        width: 100%;
    }

    .tp-settings-user-table thead th,
    .tp-settings-user-table tbody td {
        font-size: 13px;
        padding-left: 0.45rem;
        padding-right: 0.45rem;
        vertical-align: top;
    }

    .tp-settings-user-table tbody td:nth-child(1) {
        width: 26%;
    }

    .tp-settings-user-table tbody td:nth-child(2) {
        overflow-wrap: anywhere;
        width: 24%;
    }

    .tp-settings-user-table tbody td:nth-child(3) {
        width: 16%;
    }

    .tp-settings-user-table tbody td:nth-child(4) {
        width: 12%;
    }

    .tp-settings-user-actions-head,
    .tp-settings-user-actions-cell {
        min-width: 160px;
        width: 22%;
    }

    .tp-settings-user-actions {
        flex-wrap: wrap;
        gap: 6px;
    }

    .tp-settings-user-role-form {
        display: grid;
        flex: 1 1 100%;
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
        justify-content: stretch;
        row-gap: 6px;
        width: 100%;
    }

    .tp-settings-user-role-select {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    .tp-settings-user-role-form > .btn {
        justify-self: end;
    }

    .tp-settings-user-account {
        align-items: flex-start;
        gap: 9px;
    }

    .tp-settings-user-copy strong {
        font-size: 0.9rem;
    }

    .tp-settings-user-copy small,
    .tp-settings-user-login {
        font-size: 0.78rem;
    }
}

.tp-settings-user-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.tp-settings-user-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tp-settings-user-toolbar-controls {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 10px 14px;
    min-width: 0;
}

.tp-settings-user-search {
    flex: 0 1 260px;
    min-width: 210px;
}

.tp-settings-user-search .input-group-text {
    color: var(--tp-muted);
    padding-inline: 0.62rem;
}

.tp-settings-user-search .form-control {
    min-width: 0;
}

.tp-settings-user-search .btn {
    padding-inline: 0.62rem;
}

.tp-settings-user-filter-chip {
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    color: var(--tp-muted);
    display: inline-flex;
    gap: 8px;
    padding: 8px 12px;
    text-decoration: none;
    transition: border-color 0.14s ease, color 0.14s ease, background-color 0.14s ease;
}

.tp-settings-user-filter-chip span,
.tp-settings-user-filter-chip strong {
    line-height: 1;
}

.tp-settings-user-filter-chip span {
    font-size: 0.82rem;
    font-weight: 800;
}

.tp-settings-user-filter-chip strong {
    color: var(--tp-text);
    font-size: 0.86rem;
    font-weight: 900;
}

.tp-settings-user-filter-chip:hover {
    border-color: rgba(96, 165, 250, 0.28);
    color: var(--tp-text);
}

.tp-settings-user-filter-chip.is-active {
    background: rgba(37, 99, 235, 0.14);
    border-color: rgba(59, 130, 246, 0.32);
    color: #dbeafe;
}

.tp-settings-user-filter-chip.is-success.is-active {
    background: rgba(34, 197, 94, 0.13);
    border-color: rgba(34, 197, 94, 0.28);
    color: #baf7cf;
}

.tp-settings-user-filter-chip.is-danger.is-active {
    background: rgba(244, 63, 94, 0.13);
    border-color: rgba(244, 63, 94, 0.28);
    color: #ffc0cb;
}

body.tp-theme-light .tp-settings-user-filter-chip {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(201, 187, 166, 0.78);
    color: #60738f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.tp-theme-light .tp-settings-user-filter-chip strong {
    color: #24334c;
}

body.tp-theme-light .tp-settings-user-filter-chip:hover {
    border-color: rgba(59, 130, 246, 0.34);
    color: #24334c;
}

body.tp-theme-light .tp-settings-user-filter-chip.is-active {
    background: linear-gradient(180deg, rgba(230, 240, 255, 0.98), rgba(217, 232, 255, 0.94));
    border-color: rgba(96, 165, 250, 0.52);
    color: #2b5fa8;
}

body.tp-theme-light .tp-settings-user-filter-chip.is-active strong,
body.tp-theme-light .tp-settings-user-filter-chip.is-active span {
    color: #2b5fa8;
}

body.tp-theme-light .tp-settings-user-filter-chip.is-success.is-active {
    background: linear-gradient(180deg, rgba(229, 250, 237, 0.98), rgba(214, 244, 225, 0.94));
    border-color: rgba(34, 197, 94, 0.34);
    color: #17784c;
}

body.tp-theme-light .tp-settings-user-filter-chip.is-success.is-active strong,
body.tp-theme-light .tp-settings-user-filter-chip.is-success.is-active span {
    color: #17784c;
}

body.tp-theme-light .tp-settings-user-filter-chip.is-danger.is-active {
    background: linear-gradient(180deg, rgba(255, 236, 241, 0.98), rgba(255, 225, 232, 0.94));
    border-color: rgba(244, 63, 94, 0.34);
    color: #b42349;
}

body.tp-theme-light .tp-settings-user-filter-chip.is-danger.is-active strong,
body.tp-theme-light .tp-settings-user-filter-chip.is-danger.is-active span {
    color: #b42349;
}

.tp-settings-user-toolbar-copy {
    color: var(--tp-muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.tp-settings-user-toolbar-copy strong {
    color: var(--tp-text);
}

.tp-settings-user-row-inactive {
    opacity: 0.72;
}

.tp-settings-user-row-inactive td {
    background: linear-gradient(90deg, rgba(244, 63, 94, 0.05), rgba(255, 255, 255, 0.01));
}

.tp-settings-user-account {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tp-settings-user-avatar-shell {
    align-items: center;
    display: inline-flex;
    flex: 0 0 38px;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.tp-settings-user-avatar-button {
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    padding: 0;
}

.tp-settings-user-avatar-button:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.5);
    outline-offset: 3px;
}

.tp-settings-user-avatar {
    border-radius: 999px;
    display: block;
    height: 38px;
    object-fit: cover;
    width: 38px;
}

.tp-settings-user-avatar-fallback {
    align-items: center;
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.18), transparent 32%),
        linear-gradient(135deg, var(--tp-avatar-start, #33cc99) 0%, var(--tp-avatar-mid, #4ea2e6) 58%, var(--tp-avatar-end, #50d0ff) 100%);
    border: 1px solid var(--tp-avatar-border, rgba(80, 208, 255, 0.26));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 8px 18px var(--tp-avatar-shadow, rgba(20, 86, 109, 0.18));
    color: #fff;
    display: inline-flex;
    font-size: 0.92rem;
    font-weight: 900;
    height: 38px;
    justify-content: center;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: 38px;
}

.tp-settings-user-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tp-settings-user-copy strong {
    color: var(--tp-text);
    font-size: 0.96rem;
    line-height: 1.15;
}

.tp-settings-user-copy small,
.tp-settings-user-login {
    color: var(--tp-muted);
    font-size: 0.84rem;
    line-height: 1.2;
}

.tp-settings-user-status-badge {
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.tp-settings-user-status-badge.is-blocked {
    background: rgba(244, 63, 94, 0.14);
    border-color: rgba(244, 63, 94, 0.24);
    color: #ff97aa;
}

.tp-settings-user-login-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tp-settings-user-login-wrap small {
    color: var(--tp-muted);
    font-size: 0.76rem;
    line-height: 1.15;
}

.tp-managed-user-modal .modal-dialog {
    max-width: min(980px, calc(100vw - 28px));
}

.tp-managed-user-modal .modal-dialog-scrollable .tp-managed-user-modal-content {
    height: 100%;
}

.tp-managed-user-modal-content {
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.11), transparent 34%),
        linear-gradient(135deg, rgba(22, 28, 38, 0.98), rgba(18, 24, 33, 0.98));
    border: 1px solid rgba(137, 159, 190, 0.24);
    border-radius: 18px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.48);
    overflow: hidden;
}

.tp-managed-user-modal-content > form {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.tp-managed-user-modal-head {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 34%),
        rgba(11, 18, 29, 0.28);
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    padding: 18px 22px;
}

.tp-managed-user-modal-title {
    align-items: center;
    display: flex;
    gap: 13px;
}

.tp-managed-user-modal-title h5 {
    color: #f8fbff;
    font-size: 1.34rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.tp-managed-user-modal-title small {
    color: rgba(203, 213, 225, 0.84);
    font-weight: 700;
}

.tp-managed-user-modal-icon {
    align-items: center;
    background: rgba(37, 99, 235, 0.16);
    border: 1px solid rgba(59, 130, 246, 0.26);
    border-radius: 14px;
    color: #38bdf8;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.tp-managed-user-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px;
}

.tp-settings-managed-user-shell {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
}

.tp-settings-managed-user-aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tp-settings-managed-user-id-card,
.tp-settings-managed-user-form,
.tp-settings-managed-user-upload,
.tp-managed-user-access-history {
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 34%),
        rgba(15, 23, 42, 0.46);
    border: 1px solid rgba(100, 116, 139, 0.32);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.tp-settings-managed-user-id-card {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    text-align: center;
}

.tp-settings-managed-user-preview {
    align-items: center;
    display: flex;
    justify-content: center;
}

.tp-settings-managed-user-photo {
    align-items: center;
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 24px;
    display: inline-flex;
    height: 128px;
    justify-content: center;
    object-fit: cover;
    width: 128px;
}

.tp-settings-managed-user-photo.tp-settings-user-avatar-fallback {
    font-size: 1.75rem;
    letter-spacing: 0.03em;
    line-height: 1;
}

.tp-settings-managed-user-name {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tp-settings-managed-user-name strong {
    color: var(--tp-text);
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.15;
    word-break: break-word;
}

.tp-settings-managed-user-name span {
    color: var(--tp-muted);
    font-size: 0.84rem;
    line-height: 1.25;
}

.tp-settings-managed-user-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
}

.tp-settings-managed-user-meta {
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
    width: 100%;
}

.tp-settings-managed-user-meta small,
.tp-settings-managed-user-meta span {
    color: var(--tp-muted);
}

.tp-settings-managed-user-meta strong {
    color: var(--tp-text);
}

.tp-settings-managed-user-upload {
    padding: 12px;
}

.tp-settings-managed-user-upload .tp-avatar-upload-card {
    width: 100%;
}

.tp-settings-managed-user-form {
    padding: 16px;
}

.tp-managed-user-access-history {
    grid-column: 1 / -1;
    padding: 14px 16px;
}

.tp-managed-user-access-head {
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.tp-managed-user-access-head strong,
.tp-managed-user-access-head span {
    display: block;
}

.tp-managed-user-access-head strong {
    color: var(--tp-text);
    font-size: 0.92rem;
    font-weight: 900;
}

.tp-managed-user-access-head strong i {
    color: #52b6ff;
    margin-right: 7px;
}

.tp-managed-user-access-head > div > span {
    color: var(--tp-muted);
    font-size: 0.76rem;
    font-weight: 700;
    margin-top: 3px;
}

.tp-managed-user-access-count {
    background: rgba(56, 189, 248, 0.10);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 999px;
    color: #89d5ff;
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 6px 9px;
}

.tp-managed-user-access-list {
    display: grid;
    gap: 7px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 3px;
}

.tp-managed-user-access-event {
    align-items: center;
    background: rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(100, 116, 139, 0.20);
    border-radius: 12px;
    display: grid;
    gap: 10px;
    grid-template-columns: 34px minmax(0, 1fr) minmax(175px, auto);
    padding: 8px 10px;
}

.tp-managed-user-access-icon {
    align-items: center;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    color: #a8b6c9;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.tp-managed-user-access-event.is-new_device .tp-managed-user-access-icon,
.tp-managed-user-access-event.is-login_success .tp-managed-user-access-icon {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.24);
    color: #75e6a0;
}

.tp-managed-user-access-event.is-login_failed_password .tp-managed-user-access-icon,
.tp-managed-user-access-event.is-mfa_invalid .tp-managed-user-access-icon {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.24);
    color: #f8c467;
}

.tp-managed-user-access-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tp-managed-user-access-copy strong {
    color: var(--tp-text);
    font-size: 0.82rem;
    font-weight: 800;
}

.tp-managed-user-access-copy small {
    color: var(--tp-muted);
    font-size: 0.73rem;
    font-weight: 700;
    margin-top: 2px;
}

.tp-managed-user-access-meta {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tp-managed-user-access-meta span {
    color: var(--tp-muted);
    font-size: 0.7rem;
    font-weight: 700;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.tp-managed-user-access-meta i {
    color: #89bdf8;
    margin-right: 5px;
}

.tp-managed-user-access-empty {
    align-items: center;
    color: var(--tp-muted);
    display: flex;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    min-height: 64px;
    text-align: center;
}

.tp-managed-user-section-head {
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 13px;
}

.tp-managed-user-section-head strong,
.tp-managed-user-section-head span {
    display: block;
}

.tp-managed-user-section-head strong {
    color: var(--tp-text);
    font-size: 1rem;
    font-weight: 900;
}

.tp-managed-user-section-head span {
    color: var(--tp-muted);
    font-size: 0.86rem;
    line-height: 1.3;
    margin-top: 2px;
}

.tp-managed-user-lock-chip {
    align-items: center;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 999px;
    color: var(--tp-muted);
    display: inline-flex !important;
    flex: 0 0 auto;
    font-size: 0.78rem !important;
    font-weight: 900;
    gap: 6px;
    padding: 7px 10px;
}

.tp-phone-field--managed-user .tp-phone-field__group {
    gap: 0.45rem;
    grid-template-columns: minmax(120px, 42%) minmax(120px, 1fr);
}

.tp-phone-field--managed-user .tp-phone-field__country,
.tp-phone-field--managed-user .tp-phone-field__number {
    min-height: 42px;
}

.tp-managed-user-modal .modal-footer {
    background: rgba(11, 18, 29, 0.30);
    border-top: 1px solid rgba(148, 163, 184, 0.20);
    gap: 8px;
    padding: 14px 20px;
}

.tp-managed-user-modal-content > form > .modal-header,
.tp-managed-user-modal-content > form > .modal-footer {
    flex: 0 0 auto;
}

body.tp-theme-light .tp-managed-user-modal-content {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.14), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(242, 248, 255, 0.98));
    border-color: rgba(148, 179, 220, 0.54);
    box-shadow: 0 24px 64px rgba(60, 85, 120, 0.22);
}

body.tp-theme-light .tp-managed-user-modal-head {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(239, 248, 255, 0.92), rgba(255, 255, 255, 0.96));
    border-bottom-color: rgba(148, 179, 220, 0.42);
}

body.tp-theme-light .tp-managed-user-modal-title h5 {
    color: #132238;
}

body.tp-theme-light .tp-managed-user-modal-title small {
    color: #52657e;
}

body.tp-theme-light .tp-settings-managed-user-id-card,
body.tp-theme-light .tp-settings-managed-user-form,
body.tp-theme-light .tp-settings-managed-user-upload,
body.tp-theme-light .tp-managed-user-access-history {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.10), transparent 32%),
        rgba(255, 255, 255, 0.78);
    border-color: rgba(177, 198, 226, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 10px 24px rgba(71, 98, 130, 0.08);
}

body.tp-theme-light .tp-settings-managed-user-meta {
    background: rgba(239, 246, 255, 0.78);
    border-color: rgba(177, 198, 226, 0.62);
}

body.tp-theme-light .tp-managed-user-section-head {
    border-bottom-color: rgba(177, 198, 226, 0.54);
}

body.tp-theme-light .tp-managed-user-access-head {
    border-bottom-color: rgba(177, 198, 226, 0.54);
}

body.tp-theme-light .tp-managed-user-access-count {
    background: rgba(224, 241, 255, 0.84);
    border-color: rgba(113, 166, 226, 0.34);
    color: #3873b7;
}

body.tp-theme-light .tp-managed-user-access-event {
    background: rgba(247, 251, 255, 0.86);
    border-color: rgba(177, 198, 226, 0.52);
}

body.tp-theme-light .tp-managed-user-access-meta i,
body.tp-theme-light .tp-managed-user-access-head strong i {
    color: #387bc8;
}

body.tp-theme-light .tp-managed-user-lock-chip {
    background: rgba(226, 232, 240, 0.72);
    border-color: rgba(148, 163, 184, 0.40);
    color: #53647b;
}

body.tp-theme-light .tp-managed-user-modal .modal-footer {
    background: rgba(239, 246, 255, 0.62);
    border-top-color: rgba(177, 198, 226, 0.50);
}

@media (max-width: 991.98px) {
    .tp-settings-managed-user-shell {
        grid-template-columns: 1fr;
    }

    .tp-settings-managed-user-aside {
        align-items: center;
    }

    .tp-settings-managed-user-upload,
    .tp-settings-managed-user-meta,
    .tp-settings-managed-user-badges {
        width: 100%;
    }

    .tp-settings-managed-user-id-card {
        align-items: center;
        max-width: 420px;
        width: 100%;
    }

    .tp-managed-user-access-event {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .tp-managed-user-access-meta {
        align-items: flex-start;
        grid-column: 2;
    }

    .tp-managed-user-access-meta span {
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    .tp-managed-user-modal-body {
        padding: 14px;
    }

    .tp-managed-user-modal-head {
        padding: 16px;
    }

    .tp-settings-managed-user-form {
        padding: 14px;
    }

    .tp-managed-user-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .tp-phone-field--managed-user .tp-phone-field__group {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .tp-settings-user-actions-head,
    .tp-settings-user-actions-cell {
        min-width: 160px;
    }

    .tp-settings-user-actions {
        gap: 6px;
    }

    .tp-settings-user-role-select {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    .tp-settings-user-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .tp-settings-user-filter-group {
        width: 100%;
    }

    .tp-settings-user-toolbar-controls,
    .tp-settings-user-search {
        width: 100%;
    }

    .tp-settings-user-search {
        flex-basis: 100%;
        max-width: none;
    }

    .tp-settings-user-filter-chip {
        justify-content: center;
        flex: 1 1 0;
    }
}

.tp-settings-user-login-live {
    color: #23c16b;
    font-weight: 800;
}

.tp-theme-light .tp-settings-user-login-live {
    color: #198754;
}

.tp-settings-permission-board {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}

.tp-custom-role-section {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 34%),
        rgba(8, 19, 38, 0.32);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 14px;
    padding: 10px 12px;
}

.tp-custom-role-head,
.tp-custom-role-editor-title,
.tp-custom-role-permissions-header,
.tp-custom-role-card-top,
.tp-custom-role-card-footer,
.tp-custom-role-empty {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.tp-custom-role-kicker {
    display: none;
}

.tp-custom-role-head h6,
.tp-custom-role-editor-title h6,
.tp-custom-role-permissions-header h6 {
    color: var(--tp-text);
    font-size: 0.98rem;
    font-weight: 900;
    margin: 0;
}

.tp-custom-role-head p,
.tp-custom-role-permissions-header p,
.tp-custom-role-card-top small,
.tp-custom-role-empty p,
.tp-custom-role-permission-row small,
.tp-custom-role-danger-zone small {
    color: var(--tp-muted);
    display: block;
    font-size: 0.78rem;
    line-height: 1.3;
    margin: 2px 0 0;
}

.tp-custom-role-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    margin-top: 10px;
}

.tp-custom-role-card {
    background: rgba(15, 32, 57, 0.58);
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 12px;
    min-height: 110px;
    padding: 11px 12px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tp-custom-role-card:hover {
    border-color: rgba(56, 189, 248, 0.52);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.2);
    transform: translateY(-1px);
}

.tp-custom-role-card.is-selected {
    border-color: rgba(56, 189, 248, 0.86);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.18), 0 12px 24px rgba(2, 6, 23, 0.18);
}

.tp-custom-role-card-top {
    align-items: flex-start;
    justify-content: flex-start;
}

.tp-custom-role-card-top strong {
    color: var(--tp-text);
    display: block;
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.2;
}

.tp-custom-role-icon,
.tp-custom-role-empty > span {
    align-items: center;
    background: rgba(14, 165, 233, 0.13);
    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: 10px;
    color: #38bdf8;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1rem;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.tp-custom-role-card-footer {
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    margin-top: 8px;
    padding-top: 7px;
}

.tp-custom-role-card-footer form {
    margin: 0;
}

.tp-custom-role-count {
    color: var(--tp-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.tp-custom-role-empty {
    background: rgba(15, 32, 57, 0.34);
    border: 1px dashed rgba(96, 165, 250, 0.32);
    border-radius: 12px;
    justify-content: flex-start;
    margin-top: 8px;
    min-height: 48px;
    padding: 7px 10px;
}

.tp-custom-role-empty strong {
    color: var(--tp-text);
    display: block;
    font-weight: 900;
}

.tp-custom-role-empty p {
    font-size: 0.76rem;
}

.tp-custom-role-editor {
    background: rgba(15, 32, 57, 0.42);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 16px;
    margin-top: 16px;
    padding: 18px;
}

.tp-custom-role-editor-title,
.tp-custom-role-permissions-header {
    align-items: flex-start;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    margin-bottom: 16px;
    padding-bottom: 14px;
}

.tp-custom-role-permissions {
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    padding-top: 18px;
}

.tp-custom-role-permission-groups {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
}

.tp-custom-role-permission-group {
    background: rgba(2, 12, 30, 0.22);
    border: 1px solid rgba(96, 165, 250, 0.16);
    border-radius: 14px;
    overflow: hidden;
}

.tp-custom-role-permission-group > h6 {
    background: rgba(37, 99, 235, 0.12);
    border-bottom: 1px solid rgba(96, 165, 250, 0.16);
    color: var(--tp-text);
    font-size: 0.88rem;
    font-weight: 900;
    margin: 0;
    padding: 11px 13px;
}

.tp-custom-role-permission-row {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin: 0;
    padding: 11px 13px;
}

.tp-custom-role-permission-row + .tp-custom-role-permission-row {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.tp-custom-role-permission-row strong {
    color: var(--tp-text);
    display: block;
    font-size: 0.88rem;
}

.form-check-input.tp-custom-role-switch {
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(180deg, rgba(58, 64, 76, 0.96), rgba(36, 42, 53, 0.98));
    border: 1px solid rgba(124, 132, 148, 0.28);
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    flex: 0 0 auto;
    height: 20px;
    margin: 0;
    position: relative;
    width: 36px;
}

.form-check-input.tp-custom-role-switch::before {
    background: #eef2f8;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.32);
    content: "";
    height: 14px;
    left: 2px;
    position: absolute;
    top: 2px;
    transition: transform 0.18s ease;
    width: 14px;
}

.form-check-input.tp-custom-role-switch:checked {
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.98), rgba(14, 165, 233, 0.95));
    border-color: rgba(74, 222, 255, 0.72);
}

.form-check-input.tp-custom-role-switch:checked::before {
    background: #fff;
    transform: translateX(16px);
}

.tp-custom-role-danger-zone {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 14px;
    padding: 12px 14px;
}

.tp-custom-role-danger-zone > summary {
    color: #fca5a5;
    cursor: pointer;
    font-weight: 900;
    list-style: none;
}

.tp-custom-role-danger-zone > summary::-webkit-details-marker {
    display: none;
}

body.tp-theme-light .tp-custom-role-section {
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.16), transparent 34%),
        rgba(255, 255, 255, 0.72);
    border-color: rgba(59, 130, 246, 0.2);
}

body.tp-theme-light .tp-custom-role-card,
body.tp-theme-light .tp-custom-role-empty,
body.tp-theme-light .tp-custom-role-editor,
body.tp-theme-light .tp-custom-role-permission-group {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(59, 130, 246, 0.18);
}

body.tp-theme-light .tp-custom-role-permission-group > h6 {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.12), rgba(255, 255, 255, 0.65));
}

body.tp-theme-light .tp-custom-role-danger-zone {
    background: rgba(254, 242, 242, 0.82);
    border-color: rgba(239, 68, 68, 0.3);
}

@media (max-width: 420px) {
    .tp-custom-role-head,
    .tp-custom-role-editor-title,
    .tp-custom-role-permissions-header {
        align-items: stretch;
        flex-direction: column;
    }

    .tp-custom-role-head > .btn,
    .tp-custom-role-editor-title > .btn {
        width: 100%;
    }

    .tp-custom-role-grid,
    .tp-custom-role-permission-groups {
        grid-template-columns: 1fr;
    }
}

#tp-settings-permisos .tp-settings-card {
    overflow: visible;
}

.tp-settings-permission-head,
.tp-settings-permission-row {
    display: grid;
    grid-template-columns: var(--tp-settings-permission-grid-desktop, minmax(180px, 1.1fr) minmax(260px, 1.7fr) 92px 92px 130px);
    gap: 12px;
    align-items: center;
}

.tp-settings-permission-head {
    backdrop-filter: blur(16px);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9)),
        var(--tp-surface);
    border: 1px solid rgba(59, 130, 246, 0.14);
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.22);
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 10px 16px;
    position: sticky;
    top: 76px;
    text-transform: uppercase;
    z-index: 40;
}

.tp-settings-permission-head span:nth-child(n + 3) {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.tp-settings-permission-group {
    background: rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: 16px;
    overflow: hidden;
}

.tp-settings-permission-group-title {
    background: rgba(37, 99, 235, 0.12);
    border-bottom: 1px solid rgba(59, 130, 246, 0.12);
    color: var(--tp-text);
    font-size: 0.98rem;
    font-weight: 800;
    padding: 12px 16px;
}

.tp-settings-permission-row {
    padding: 14px 16px;
}

.tp-settings-permission-row + .tp-settings-permission-row {
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.tp-settings-permission-label strong {
    color: var(--tp-text);
    display: block;
    font-size: 0.98rem;
    line-height: 1.25;
}

.tp-settings-permission-description {
    color: var(--tp-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.tp-settings-permission-check,
.tp-settings-permission-admin {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: stretch;
}

.tp-settings-permission-check .form-check-input,
.form-check-input.tp-settings-permission-admin-switch {
    -webkit-appearance: none;
    appearance: none;
    background:
        linear-gradient(180deg, rgba(47, 55, 69, 0.96), rgba(31, 37, 48, 0.96));
    border: 1px solid rgba(112, 122, 138, 0.28);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.34),
        0 1px 2px rgba(2, 6, 23, 0.22);
    cursor: pointer;
    flex: 0 0 auto;
    height: 20px;
    margin: 0;
    position: relative;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    width: 36px;
}

.tp-settings-permission-check .form-check-input::before,
.form-check-input.tp-settings-permission-admin-switch::before {
    background: #eef2f8;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.32);
    content: "";
    height: 14px;
    left: 2px;
    position: absolute;
    top: 2px;
    transition: transform 0.18s ease, background 0.18s ease;
    width: 14px;
}

.tp-settings-permission-check .form-check-input:hover {
    border-color: rgba(140, 152, 170, 0.42);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.34),
        0 0 0 3px rgba(148, 163, 184, 0.08);
}

.tp-settings-permission-check .form-check-input:focus {
    border-color: rgba(148, 163, 184, 0.56);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.34),
        0 0 0 3px rgba(148, 163, 184, 0.12);
    outline: none;
}

.tp-settings-permission-check .form-check-input:checked {
    background:
        linear-gradient(135deg, rgba(29, 78, 216, 0.98), rgba(14, 165, 233, 0.95));
    border-color: rgba(74, 222, 255, 0.72);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        0 0 0 3px rgba(14, 165, 233, 0.12);
}

.form-check-input.tp-settings-permission-admin-switch:checked {
    background:
        linear-gradient(135deg, rgba(29, 78, 216, 0.68), rgba(14, 165, 233, 0.62));
    border-color: rgba(74, 222, 255, 0.42);
    box-shadow: none;
}

body.tp-theme-dark .tp-settings-permission-check .form-check-input:not(:checked) {
    background:
        linear-gradient(180deg, rgba(58, 64, 76, 0.96), rgba(36, 42, 53, 0.98));
    border-color: rgba(124, 132, 148, 0.24);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.34),
        0 1px 2px rgba(2, 6, 23, 0.18);
}

.tp-settings-permission-check .form-check-input:checked::before,
.form-check-input.tp-settings-permission-admin-switch:checked::before {
    background: #ffffff;
    transform: translateX(16px);
}

.tp-settings-permission-check .form-check-input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.form-check-input.tp-settings-permission-admin-switch:disabled {
    cursor: not-allowed;
    filter: saturate(0.58);
    opacity: 0.52;
    pointer-events: none;
}

body.tp-theme-light .tp-settings-permission-group {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(59, 130, 246, 0.16);
}

body.tp-theme-light .tp-settings-permission-head {
    backdrop-filter: blur(18px);
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.16), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(239, 245, 252, 0.96)),
        var(--tp-surface);
    border-color: rgba(59, 130, 246, 0.18);
    box-shadow:
        0 12px 28px rgba(103, 128, 164, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    background-clip: padding-box;
    color: #5f7190;
    position: sticky;
    top: 76px;
    z-index: 42;
}

body.tp-theme-light .tp-settings-permission-head span {
    color: #5f7190;
}

body.tp-theme-light .tp-settings-permission-group-title {
    background:
        linear-gradient(90deg, rgba(56, 189, 248, 0.10), rgba(255, 255, 255, 0.58)),
        rgba(255, 255, 255, 0.72);
}

body.tp-theme-light .tp-settings-permission-board {
    isolation: isolate;
}

body.tp-theme-light .tp-settings-permission-check .form-check-input,
body.tp-theme-light .form-check-input.tp-settings-permission-admin-switch {
    background:
        linear-gradient(180deg, rgba(222, 230, 240, 0.98), rgba(205, 216, 229, 0.98));
    border-color: rgba(118, 137, 167, 0.52);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.72),
        0 1px 2px rgba(108, 129, 159, 0.12);
}

body.tp-theme-light .tp-settings-permission-check .form-check-input::before,
body.tp-theme-light .form-check-input.tp-settings-permission-admin-switch::before {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(97, 118, 149, 0.24);
}

body.tp-theme-light .tp-settings-permission-check .form-check-input:hover {
    border-color: rgba(59, 130, 246, 0.58);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.72),
        0 0 0 3px rgba(59, 130, 246, 0.10);
}

body.tp-theme-light .tp-settings-permission-check .form-check-input:checked {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(14, 165, 233, 0.92));
    border-color: rgba(37, 99, 235, 0.74);
}

body.tp-theme-light .form-check-input.tp-settings-permission-admin-switch:checked {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.58), rgba(14, 165, 233, 0.52));
    border-color: rgba(37, 99, 235, 0.42);
}

body.tp-theme-light .tp-settings-profile-card {
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.15), transparent 34%),
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.74), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(236, 242, 249, 0.95));
    border: 1px solid rgba(143, 176, 214, 0.34);
    box-shadow:
        0 18px 34px rgba(103, 128, 164, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

body.tp-theme-light .tp-settings-profile-identity strong {
    color: #23344f;
}

body.tp-theme-light .tp-settings-profile-identity small {
    color: #5f7190;
}

body.tp-theme-light .tp-settings-avatar-preview.is-large {
    box-shadow:
        0 18px 34px rgba(143, 117, 76, 0.16),
        0 0 0 1px rgba(143, 176, 214, 0.18);
}

.tp-settings-action-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tp-settings-footer-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

@media (max-width: 1200px) {
    .tp-settings-permission-head,
    .tp-settings-permission-row {
        grid-template-columns: var(--tp-settings-permission-grid-tablet, minmax(150px, 1fr) minmax(220px, 1.35fr) 76px 76px 112px);
    }
}

@media (max-width: 992px) {
    .tp-settings-permission-head {
        display: none;
    }

    .tp-settings-permission-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px;
    }

    .tp-settings-permission-label,
    .tp-settings-permission-description {
        grid-column: 1 / -1;
    }

    .tp-settings-permission-check,
    .tp-settings-permission-admin {
        justify-content: space-between;
    }

    .tp-settings-permission-check::before,
    .tp-settings-permission-admin::before {
        color: var(--tp-muted);
        content: attr(data-role-label);
        display: block;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        margin-right: 10px;
    }
}

@media (max-width: 576px) {
    .tp-settings-permission-row {
        grid-template-columns: 1fr;
    }

    .tp-settings-permission-check,
    .tp-settings-permission-admin {
        justify-content: space-between;
    }
}

.tp-page-header,
.dashboard-heading {
    align-items: center;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
}

.tp-page-header-main {
    min-width: 0;
}

.tp-page-header-title {
    color: var(--tp-text);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
}

.tp-page-header-sub {
    color: var(--tp-muted);
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    margin-top: 2px;
}

.tp-page-header-actions,
.dashboard-heading-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.tp-header-quick-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.tp-dashboard-actions {
    align-items: center;
    align-content: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem;
    justify-content: flex-end;
}

.tp-dashboard-actions .btn,
.tp-dashboard-actions .form-select {
    flex: 0 0 auto;
}

.tp-dashboard-actions .btn {
    white-space: nowrap;
}

.tp-dashboard-actions .tp-header-period-filter {
    max-width: 182px;
    min-width: 182px;
    width: 182px !important;
}

.tp-dashboard-actions .form-select {
    background-position: right 0.9rem center;
}

.tp-header-quick-actions .btn,
.tp-header-quick-actions .form-select {
    flex: 0 0 auto;
    min-height: calc(1.5em + 0.5rem + 2px);
}

.tp-header-quick-actions .btn {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
    justify-content: center;
}

.tp-header-period-filter,
.tp-header-quick-actions .form-select {
    font-weight: 700 !important;
    min-width: 180px;
    padding-left: 0.75rem;
    padding-right: 2.25rem;
    text-align: left;
}

@media (max-width: 992px) {
    .tp-page-header,
    .dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tp-page-header-actions,
    .dashboard-heading-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .tp-header-quick-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .tp-dashboard-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .tp-header-quick-actions > * {
        width: 100%;
    }

    .tp-dashboard-actions > * {
        width: 100%;
    }

}

.tp-detail-topbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 62px;
    padding: 10px 18px;
    box-shadow: 0 8px 18px rgba(7, 14, 25, 0.1);
}

.tp-detail-topbar-title {
    min-width: 0;
}

.tp-detail-topbar-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 12px;
    justify-content: flex-end;
    margin-left: auto;
    min-width: 0;
}

.tp-detail-topbar h5 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-detail-topbar-actions .tp-topbar-profile {
    margin-left: 0;
}

.tp-detail-profile-slot,
.tp-detail-profile-slot .tp-topbar-profile {
    align-items: center;
    display: flex;
}

.tp-detail-profile-slot .tp-topbar-profile-wrap {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-left: 0;
}

.tp-detail-profile-slot {
    flex: 0 0 auto;
}

.tp-detail-profile-slot .tp-profile-trigger {
    gap: 8px !important;
    min-height: 36px;
    padding: 1px 4px 1px 8px !important;
}

.tp-detail-profile-slot .tp-profile-meta {
    display: none;
    min-width: 0;
}

.tp-detail-topbar-actions .profile-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 36px;
    padding: 2px 4px !important;
}

.tp-detail-profile-slot .dropdown-menu {
    margin-top: 10px;
}

.tp-detail-back {
    flex: 0 0 auto;
}

.tp-money-inline {
    align-items: center;
    display: inline-flex;
    gap: 4px;
    white-space: nowrap;
}

body.tp-theme-dark {
    --tp-topbar-surface: rgba(24, 29, 37, 0.92);
    --tp-topbar-border: rgba(71, 79, 95, 0.72);
}

@keyframes tpBellPulse {
    0%,
    100% {
        opacity: 0.36;
        transform: scale(0.9);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.08);
    }
}

.tp-lot-summary {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
}

.tp-archived-helper {
    background: rgba(243, 181, 27, 0.1);
    border: 1px solid rgba(243, 181, 27, 0.28);
    border-radius: 8px;
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
    padding: 10px 12px;
}

.tp-lot-section-label {
    color: var(--tp-muted);
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    margin-top: 4px;
}

#btnToggleSidebar,
.tp-sidebar-toggle-shared {
    -webkit-appearance: none;
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 5px;
    box-shadow: none !important;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex: 0 0 35px;
    height: 35px;
    justify-content: center;
    outline: none;
    padding: 0;
    pointer-events: auto;
    position: relative;
    z-index: 260;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    user-select: none;
    width: 35px;
}

#btnToggleSidebar:hover,
.tp-sidebar-toggle-shared:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

#btnToggleSidebar:focus,
#btnToggleSidebar:focus-visible,
#btnToggleSidebar:active,
.tp-sidebar-toggle-shared:focus,
.tp-sidebar-toggle-shared:focus-visible,
.tp-sidebar-toggle-shared:active {
    background: transparent;
    box-shadow: none !important;
    outline: none;
}

body.tp-theme-light #btnToggleSidebar,
body.tp-theme-light .tp-sidebar-toggle-shared {
    background: linear-gradient(145deg, rgba(247, 241, 229, 0.92), rgba(238, 230, 214, 0.9));
    border: 1px solid rgba(210, 200, 183, 0.72);
    border-radius: 9px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 4px 10px rgba(91, 76, 47, 0.06);
    color: #6a7486 !important;
}

body.tp-theme-light #btnToggleSidebar:hover,
body.tp-theme-light .tp-sidebar-toggle-shared:hover {
    background: linear-gradient(145deg, rgba(245, 238, 224, 1), rgba(234, 225, 207, 0.98)) !important;
    border-color: rgba(197, 185, 166, 0.95);
}

.tp-duplicate-hint-list {
    display: grid;
    gap: 8px;
}

.tp-duplicate-hint-item {
    align-items: center;
    background: rgba(255, 255, 255, 0.38);
    border: 1px solid rgba(161, 98, 7, 0.16);
    border-radius: 12px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 10px 12px;
}

.tp-duplicate-hint-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tp-duplicate-hint-copy strong,
.tp-duplicate-hint-copy small {
    line-height: 1.2;
}

.tp-duplicate-hint-copy small {
    color: #7c5c19;
    font-weight: 700;
}

.tp-duplicate-hint-actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

body.tp-theme-dark .tp-duplicate-hint-item {
    background: rgba(24, 27, 35, 0.44);
    border-color: rgba(245, 158, 11, 0.24);
}

body.tp-theme-dark .tp-duplicate-hint-copy small {
    color: #d8b76a;
}

@media (max-width: 576px) {
    .tp-duplicate-hint-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .tp-duplicate-hint-actions {
        width: 100%;
    }
}

.tp-detail-page {
    padding: 24px !important;
}

.tp-facts-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-fact-card {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    padding: 10px 12px;
}

.tp-fact-card small,
.tp-fact-card strong {
    display: block;
    line-height: 1.2;
}

.tp-fact-card small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 900;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.tp-fact-card strong {
    color: var(--tp-text);
    font-size: 15px;
    font-weight: 900;
}

.tp-fact-card-wide {
    grid-column: span 2;
}

.tp-fact-inline {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-intake-grid {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-intake-card {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    padding: 10px 12px;
}

.tp-intake-card small,
.tp-intake-card strong {
    display: block;
    line-height: 1.2;
}

.tp-intake-card small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 900;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.tp-intake-card strong {
    color: var(--tp-text);
    font-size: 14px;
    font-weight: 900;
}

.tp-intake-card-wide {
    grid-column: span 2;
}

.tp-reception-box {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    padding: 12px;
}

.tp-reception-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.tp-reception-header small,
.tp-reception-note small {
    color: var(--tp-muted);
    display: block;
    font-size: 10px;
    font-weight: 900;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.tp-reception-header strong {
    color: var(--tp-text);
    display: block;
    font-size: 14px;
}

.tp-reception-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-reception-chip {
    align-items: center;
    border: 1px solid var(--tp-border);
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    gap: 7px;
    padding: 6px 10px;
}

.tp-reception-chip.is-on {
    background: rgba(20, 166, 100, 0.14);
    border-color: rgba(20, 166, 100, 0.34);
    color: var(--tp-success);
}

.tp-reception-chip.is-off {
    background: rgba(148, 163, 184, 0.14);
    border-color: rgba(148, 163, 184, 0.34);
    color: var(--tp-muted);
}

.tp-reception-meta {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 10px;
}

.tp-reception-meta div {
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    padding: 9px 10px;
}

.tp-reception-meta small,
.tp-reception-meta strong {
    display: block;
    line-height: 1.2;
}

.tp-reception-meta small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 900;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.tp-reception-meta strong {
    color: var(--tp-text);
    font-size: 13px;
    font-weight: 800;
}

.tp-reception-alert {
    align-items: center;
    background: rgba(243, 181, 27, 0.14);
    border: 1px solid rgba(243, 181, 27, 0.34);
    border-radius: 8px;
    color: #9a6a00;
    display: flex;
    font-size: 12px;
    font-weight: 900;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px 10px;
}

.tp-reception-note {
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    padding: 10px;
}

.tp-reception-note p {
    color: var(--tp-text);
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
    white-space: pre-line;
}

.tp-ingreso-shell {
    display: grid;
    gap: 12px;
}

.tp-reception-heading {
    align-items: center;
    background: linear-gradient(100deg, var(--tp-surface-soft), color-mix(in srgb, var(--tp-primary) 7%, var(--tp-surface-soft)));
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 12px 14px;
}

.tp-reception-heading h6 {
    color: var(--tp-text);
    font-size: 15px;
    font-weight: 900;
    margin: 0 0 3px;
}

.tp-reception-heading h6 i {
    color: var(--tp-primary);
    margin-right: 5px;
}

.tp-reception-heading p {
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 700;
    margin: 0;
}

.tp-reception-heading-note {
    align-items: center;
    background: color-mix(in srgb, var(--tp-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tp-primary) 28%, transparent);
    border-radius: 999px;
    color: var(--tp-primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 900;
    gap: 6px;
    padding: 6px 9px;
}

.tp-reception-accessories {
    align-items: center;
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(170px, .9fr) minmax(230px, 1fr) minmax(240px, 1.15fr);
    padding: 10px 12px;
}

.tp-reception-accessories-copy {
    display: grid;
    gap: 3px;
}

.tp-reception-accessories-copy strong {
    color: var(--tp-text);
    font-size: 13px;
    font-weight: 900;
}

.tp-reception-accessories-copy strong i {
    color: var(--tp-primary);
    margin-right: 5px;
}

.tp-reception-accessories-copy small {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 700;
}

.tp-reception-details {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    overflow: hidden;
}

.tp-reception-details > summary {
    align-items: center;
    color: var(--tp-text);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 900;
    gap: 7px;
    list-style: none;
    padding: 11px 13px;
}

.tp-reception-details > summary::-webkit-details-marker {
    display: none;
}

.tp-reception-details > summary::after {
    color: var(--tp-primary);
    content: '\f107';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: auto;
    transition: transform .16s ease;
}

.tp-reception-details[open] > summary {
    border-bottom: 1px solid var(--tp-border);
}

.tp-reception-details[open] > summary::after {
    transform: rotate(180deg);
}

.tp-reception-details > summary i {
    color: var(--tp-primary);
}

.tp-reception-details > summary span {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 700;
    margin-left: 3px;
}

.tp-reception-details > .row {
    margin-left: 0;
    margin-right: 0;
    padding: 0 13px 13px;
}

.tp-ingreso-strip {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tp-ingreso-pill {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    padding: 9px 10px;
}

.tp-ingreso-pill small,
.tp-ingreso-pill strong {
    display: block;
    line-height: 1.2;
}

.tp-ingreso-pill small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 900;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.tp-ingreso-pill strong {
    color: var(--tp-text);
    font-size: 13px;
    font-weight: 800;
}

.tp-ingreso-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tp-check-toggle {
    align-items: center;
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    display: inline-flex;
    gap: 8px;
    margin: 0;
    min-height: 38px;
    padding: 8px 10px;
}

.tp-check-toggle span {
    color: var(--tp-text);
    font-size: 12px;
    font-weight: 800;
}

.tp-work-detail-topbar {
    padding: 15px 25px;
}

.card,
.table-responsive,
.modal-content {
    border-radius: var(--tp-radius) !important;
    box-shadow: var(--tp-shadow) !important;
}

.card {
    border: 1px solid var(--tp-border) !important;
}

.card h5,
.card h6,
.table-responsive h5,
.table-responsive h6 {
    color: var(--tp-text);
}

.text-muted,
.text-secondary {
    color: var(--tp-muted) !important;
}

.form-control,
.form-select,
.input-group-text,
.dataTables_length select {
    border-radius: 6px !important;
}

input.form-control,
select.form-select,
.input-group-text {
    min-height: 42px;
}

input.form-control.form-control-sm,
select.form-select.form-select-sm,
.input-group-sm > input.form-control,
.input-group-sm > select.form-select,
.input-group-sm > .input-group-text,
.dataTables_length select {
    min-height: 36px;
}

.form-control,
.form-select,
textarea.form-control,
.dataTables_length select {
    border-color: var(--tp-border-strong) !important;
    font-weight: 400;
}

.form-control::placeholder,
.form-select::placeholder,
textarea.form-control::placeholder {
    font-weight: 400;
}

input[type="file"].form-control {
    cursor: pointer;
    border-radius: 12px;
    min-height: 48px;
    overflow: hidden;
    padding: 0.34rem 0.42rem;
}

input[type="file"].form-control::file-selector-button {
    background: linear-gradient(180deg, rgba(21, 118, 248, 0.18), rgba(21, 118, 248, 0.1));
    border: 1px solid rgba(21, 118, 248, 0.24);
    border-radius: 9px;
    color: var(--tp-text);
    cursor: pointer;
    font-weight: 700;
    margin-right: 0.9rem;
    padding: 0.64rem 1.05rem;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

input[type="file"].form-control:hover::file-selector-button,
input[type="file"].form-control:focus-within::file-selector-button {
    background: linear-gradient(180deg, rgba(21, 118, 248, 0.28), rgba(21, 118, 248, 0.14));
    border-color: rgba(21, 118, 248, 0.38);
    box-shadow: 0 0 0 0.12rem rgba(21, 118, 248, 0.12);
    transform: translateY(-1px);
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: var(--tp-primary) !important;
    box-shadow: 0 0 0 0.18rem rgba(21, 118, 248, 0.18) !important;
}

.tp-password-wrap {
    position: relative;
}

.tp-password-wrap .form-control {
    padding-right: 2.9rem;
}

.tp-password-wrap .form-control:not([data-password-visible="1"]) {
    -webkit-text-security: disc;
}

.tp-password-wrap .form-control[data-password-visible="1"] {
    -webkit-text-security: none;
}

.tp-password-wrap.tp-password-with-icon .form-control {
    padding-left: 2.7rem;
}

.tp-password-leading-icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tp-muted);
    pointer-events: none;
    z-index: 3;
}

.tp-password-toggle {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--tp-muted);
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.tp-password-toggle:hover,
.tp-password-toggle:focus {
    color: var(--tp-primary);
    outline: none;
    box-shadow: none;
}

.btn {
    border-radius: 6px !important;
    font-weight: 700;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

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

.btn-success {
    background: var(--tp-success) !important;
    border-color: var(--tp-success) !important;
}

.btn-success:hover,
.btn-success:focus-visible {
    background: #178d5f !important;
    border-color: #178d5f !important;
    box-shadow: 0 10px 18px rgba(23, 141, 95, 0.24);
    transform: translateY(-1px);
}

.btn-danger {
    background: var(--tp-danger) !important;
    border-color: var(--tp-danger) !important;
}

.btn-info {
    background: var(--tp-info) !important;
    border-color: var(--tp-info) !important;
}

.btn-info:hover,
.btn-info:focus-visible {
    background: #1fbed8 !important;
    border-color: #1fbed8 !important;
    box-shadow: 0 10px 18px rgba(31, 190, 216, 0.24);
    transform: translateY(-1px);
}

.table {
    margin-bottom: 0;
}

.table thead th {
    border-bottom: 1px solid var(--tp-border-strong) !important;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

.table tbody td {
    vertical-align: middle;
}

.table-hover tbody tr {
    transition: background-color 0.15s ease;
}

.badge {
    align-items: center;
    box-shadow: none !important;
    display: inline-flex;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1.2;
    min-height: 23px;
    padding: 4px 9px;
    border-radius: 6px;
    text-shadow: none !important;
    white-space: nowrap;
    -webkit-font-smoothing: auto;
    text-rendering: auto;
}

.badge.bg-warning,
.badge.bg-warning.text-dark {
    background-color: #f7c21f !important;
    border: 1px solid #f1b400 !important;
    color: #111827 !important;
}

.badge.bg-success {
    background-color: #16a163 !important;
    border: 1px solid #25c17a !important;
    color: #ffffff !important;
}

.badge.bg-danger {
    background-color: #f0445e !important;
    border: 1px solid #ff6b7d !important;
    color: #ffffff !important;
}

.badge.bg-info,
.badge.bg-info.text-dark {
    background-color: #12b6d2 !important;
    border: 1px solid #49d6eb !important;
    color: #082f3a !important;
}

.badge.bg-primary {
    background-color: #1576f8 !important;
    border: 1px solid #58a0ff !important;
    color: #ffffff !important;
}

.badge.bg-secondary {
    background-color: #64748b !important;
    border: 1px solid #94a3b8 !important;
    color: #ffffff !important;
}

.stat-card {
    min-height: 86px;
}

.stat-card .fs-2,
.stat-card i.fs-2 {
    opacity: 0.38 !important;
}

.dashboard-heading h5 {
    line-height: 1.25;
    min-width: 0;
}

.dashboard-heading-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.table-filter-bar select {
    min-width: 170px;
}

.tp-month-chart {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.tp-month-item {
    align-items: center;
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 155px;
    padding: 10px;
    text-align: center;
}

.tp-month-bars {
    align-items: flex-end;
    background: var(--tp-surface-soft);
    border-radius: 7px;
    display: flex;
    height: 58px;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.tp-month-bar {
    background: linear-gradient(180deg, #58a0ff, #1576f8);
    border-radius: 6px 6px 0 0;
    display: block;
    min-height: 6px;
    width: 42%;
}

.tp-month-item strong,
.tp-month-item small {
    line-height: 1.15;
}

.tp-exec-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(140px, 1fr)) minmax(260px, 2fr);
}

.tp-exec-stat,
.tp-exec-actions {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    padding: 12px;
}

.tp-exec-stat small,
.tp-device-kpi-grid small,
.tp-device-finance small,
.tp-portal-grid small {
    color: var(--tp-muted);
    display: block;
    font-size: 12px;
    font-weight: 800;
}

.tp-exec-stat strong,
.tp-device-kpi-grid strong,
.tp-device-finance strong,
.tp-portal-grid strong {
    color: var(--tp-text);
    display: block;
    font-size: 20px;
    line-height: 1.2;
}

.tp-exec-actions {
    display: grid;
    gap: 8px;
}

.tp-exec-actions div,
.tp-device-failures span,
.tp-fast-note,
.tp-portal-box {
    align-items: center;
    display: flex;
    gap: 9px;
}

.tp-exec-actions span,
.tp-fast-note span {
    color: var(--tp-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

.tp-radar-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-radar-stats {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.tp-radar-stat {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    padding: 12px;
}

.tp-radar-stat small,
.tp-radar-stat strong {
    display: block;
    line-height: 1.2;
}

.tp-radar-stat small {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.tp-radar-stat strong {
    color: var(--tp-text);
    font-size: 24px;
    font-weight: 900;
    margin-top: 6px;
}

.tp-top-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tp-top-item {
    align-items: center;
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 11px 12px;
}

.tp-top-item strong,
.tp-top-item small,
.tp-top-item span {
    display: block;
    line-height: 1.2;
}

.tp-top-item strong,
.tp-top-item span {
    color: var(--tp-text);
    font-weight: 800;
}

.tp-top-item small {
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 700;
    margin-top: 3px;
}

.tp-fast-note {
    background: rgba(23, 155, 104, 0.1);
    border: 1px solid rgba(23, 155, 104, 0.35);
    border-radius: 7px;
    padding: 10px 12px;
}

.tp-month-item strong {
    font-size: 13px;
}

.tp-month-item small {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 800;
}

.tp-client-stat {
    min-height: 58px;
}

.tp-client-ledger {
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
}

.tp-client-ledger > div {
    background: var(--tp-surface-soft);
    border-bottom: 1px solid var(--tp-border);
    padding: 10px 12px;
}

.tp-client-ledger > div:nth-child(odd) {
    border-right: 1px solid var(--tp-border);
}

.tp-client-ledger > div:nth-last-child(-n+2) {
    border-bottom: 0;
}

.tp-client-ledger small,
.tp-client-ledger strong {
    display: block;
    line-height: 1.25;
}

.tp-client-ledger small {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.tp-client-ledger strong {
    font-size: 15px;
    margin-top: 3px;
}

.tp-client-notes {
    background: var(--tp-surface-soft);
}

/* Shared layout for creating and editing client records. */
.tp-client-form-dialog {
    max-width: min(900px, calc(100vw - 28px));
}

.tp-client-form-content {
    border-radius: 14px;
    overflow: hidden;
}

.tp-client-form-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tp-client-form-content .modal-header {
    align-items: center;
    padding: 1.05rem 1.25rem;
}

.tp-client-form .modal-body {
    padding: 1.2rem 1.25rem 1.3rem;
}

.tp-client-form .modal-footer {
    background: color-mix(in srgb, var(--tp-surface-soft) 72%, transparent);
    border-top: 1px solid var(--tp-border) !important;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
}

.tp-client-form-label {
    color: var(--tp-text);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    margin: 0 0 0.42rem;
}

.tp-client-form .form-control,
.tp-client-form .form-select {
    min-height: 44px;
}

.tp-client-form textarea.form-control {
    min-height: 104px;
    resize: vertical;
}

.tp-client-address-control {
    align-items: stretch;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.tp-client-address-control .tp-address-autocomplete {
    min-width: 0;
}

.tp-client-address-verify {
    align-items: center;
    display: inline-flex;
    font-size: 0.77rem;
    font-weight: 800;
    gap: 0.38rem;
    justify-content: center;
    min-height: 44px;
    white-space: nowrap;
}

.tp-client-address-helper,
.tp-client-visit-field-help {
    color: var(--tp-muted-text);
    font-size: 0.71rem;
    font-weight: 650;
    line-height: 1.35;
    margin-top: 0.35rem;
}

.tp-client-address-helper:empty {
    display: none;
}

.tp-client-address-helper.is-warning {
    color: var(--tp-warning, #d59a00);
}

.tp-client-form .tp-phone-field__group {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.tp-client-form .tp-phone-field__country,
.tp-client-form .tp-phone-field__number {
    min-width: 0;
}

.tp-client-form .tp-client-visit-details {
    margin-top: 0.15rem;
}

.tp-client-form .tp-client-visit-details[open] > .row {
    padding-top: 0.8rem;
}

.tp-client-profile-card {
    border-radius: 14px;
}

.tp-client-profile-form > .row {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .tp-client-form-dialog {
        margin: 0.75rem;
        max-width: none;
    }

    .tp-client-form .modal-body {
        padding: 1rem;
    }

    .tp-client-form .modal-footer {
        padding: 0.8rem 1rem;
    }

    .tp-client-form .tp-phone-field__group {
        grid-template-columns: 1fr;
    }

    .tp-client-form .tp-client-address-control {
        grid-template-columns: 1fr;
    }

    .tp-client-form .tp-client-address-verify {
        width: 100%;
    }
}

@media (max-width: 499.98px) {
    .tp-client-form .modal-footer .btn {
        flex: 1 1 auto;
    }
}

.tp-client-visit-summary {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-left: 3px solid var(--tp-primary);
    border-radius: 8px;
    padding: 10px 11px;
}

.tp-client-visit-summary-head {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 9px;
}

.tp-client-visit-summary-head strong {
    color: var(--tp-text);
    font-size: 12px;
}

.tp-client-visit-summary-head strong i,
.tp-client-visit-reference i {
    color: var(--tp-primary);
    margin-right: 4px;
}

.tp-client-visit-summary-grid {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-client-visit-summary-grid span,
.tp-client-visit-summary-grid small,
.tp-client-visit-summary-grid b {
    display: block;
}

.tp-client-visit-summary-grid small,
.tp-client-visit-reference {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 700;
}

.tp-client-visit-summary-grid b {
    color: var(--tp-text);
    font-size: 11px;
    line-height: 1.25;
    margin-top: 2px;
}

.tp-client-visit-reference {
    display: block;
    line-height: 1.35;
    margin-top: 9px;
}

.tp-project-modal-dialog .modal-content {
    border-radius: 14px;
}

.tp-project-modal-dialog .modal-body {
    padding: 1.35rem 1.4rem 1.2rem;
}

.tp-project-modal-dialog .form-control,
.tp-project-modal-dialog .form-select {
    min-height: 44px;
}

.tp-project-modal-dialog textarea.form-control {
    min-height: 108px;
}

.tp-client-debt-alert {
    align-items: center;
    background: rgba(240, 68, 94, 0.08);
    border: 1px solid rgba(240, 68, 94, 0.45);
    border-left: 4px solid #f0445e;
    border-radius: 7px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 10px 12px;
    text-align: left;
}

.tp-client-debt-alert strong,
.tp-client-debt-alert small {
    display: block;
    line-height: 1.25;
}

.tp-client-debt-alert strong {
    color: #c81e3a;
    font-size: 14px;
}

.tp-client-debt-alert small {
    color: var(--tp-text);
    font-weight: 700;
    margin-top: 2px;
}

.tp-search-result {
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    color: inherit;
    display: block;
    margin-bottom: 8px;
    padding: 10px 12px;
    text-decoration: none;
}

.tp-search-result:hover {
    border-color: var(--tp-primary);
    color: inherit;
}

.tp-search-result strong,
.tp-search-result small {
    display: block;
    line-height: 1.25;
}

.tp-search-result small {
    color: var(--tp-muted);
    font-weight: 700;
    margin-top: 3px;
}

.tp-search-result-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 6px;
}

.tp-search-result-featured {
    height: 100%;
}

.tp-search-hit {
    background: rgba(37, 99, 235, 0.14);
    border: 1px solid rgba(37, 99, 235, 0.35);
    border-radius: 999px;
    color: var(--tp-primary);
    display: inline-flex;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    padding: 4px 8px;
}

.tp-inline-toolbar {
    align-items: center;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    padding: 12px;
}

.tp-inline-toolbar-main {
    flex: 1 1 auto;
    min-width: 0;
}

.tp-empty-state {
    align-items: center;
    background: var(--tp-surface);
    border: 1px dashed var(--tp-border);
    border-radius: 8px;
    color: var(--tp-muted);
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    min-height: 180px;
    padding: 24px;
    text-align: center;
}

.tp-empty-state i {
    color: var(--tp-primary);
    font-size: 1.5rem;
}

.tp-datatable-empty-cell {
    padding: 0.8rem !important;
}

.tp-datatable-empty-state {
    align-items: center;
    background:
        radial-gradient(circle at top, color-mix(in srgb, var(--tp-primary) 9%, transparent), transparent 62%),
        var(--tp-surface-soft);
    border: 1px dashed var(--tp-border-strong);
    border-radius: 12px;
    color: var(--tp-muted);
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    justify-content: center;
    margin: 0.1rem auto;
    max-width: 620px;
    min-height: 156px;
    padding: 1.15rem;
    text-align: center;
}

.tp-datatable-empty-state > i {
    align-items: center;
    background: color-mix(in srgb, var(--tp-primary) 12%, transparent);
    border-radius: 50%;
    color: var(--tp-primary);
    display: inline-flex;
    font-size: 1.05rem;
    height: 38px;
    justify-content: center;
    margin-bottom: 0.12rem;
    width: 38px;
}

.tp-datatable-empty-title {
    color: var(--tp-text);
    font-size: 0.98rem;
}

.tp-datatable-empty-copy {
    font-size: 0.86rem;
    max-width: 440px;
}

.tp-datatable-empty-action {
    margin-top: 0.32rem;
}

.tp-connection-notice {
    align-items: flex-start;
    background: var(--tp-surface);
    border: 1px solid color-mix(in srgb, var(--tp-danger) 52%, var(--tp-border));
    border-radius: 12px;
    bottom: 1rem;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.2);
    color: var(--tp-text);
    display: flex;
    gap: 0.65rem;
    max-width: min(380px, calc(100vw - 2rem));
    opacity: 0;
    padding: 0.72rem 0.85rem;
    pointer-events: none;
    position: fixed;
    right: 1rem;
    transform: translateY(10px);
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 2201;
}

.tp-connection-notice.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.tp-connection-notice > i {
    color: var(--tp-danger);
    font-size: 1.1rem;
    margin-top: 0.14rem;
}

.tp-connection-notice strong,
.tp-connection-notice span {
    display: block;
}

.tp-connection-notice strong {
    color: var(--tp-text);
    font-size: 0.88rem;
}

.tp-connection-notice span {
    color: var(--tp-muted);
    font-size: 0.8rem;
    margin-top: 0.08rem;
}

.tp-connection-notice.is-online {
    border-color: color-mix(in srgb, var(--tp-success) 52%, var(--tp-border));
}

.tp-connection-notice.is-online > i {
    color: var(--tp-success);
}

.tp-search-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.tp-search-summary-card {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 96px;
    padding: 14px;
}

.tp-search-summary-card small {
    color: var(--tp-muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.tp-search-summary-card strong {
    color: var(--tp-text);
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1;
}

.tp-search-summary-card span {
    color: var(--tp-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.tp-search-recents {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
}

.tp-search-recent-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tp-search-recent-chip {
    align-items: center;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 999px;
    color: var(--tp-text);
    display: inline-flex;
    gap: 8px;
    max-width: 100%;
    padding: 9px 12px;
    text-decoration: none;
}

.tp-search-recent-chip:hover {
    border-color: var(--tp-primary);
    color: var(--tp-primary);
}

.tp-search-recent-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-search-recents-empty {
    font-size: 0.9rem;
}

.tp-search-filterbar {
    align-items: center;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 14px;
}

.tp-search-filterbar-main {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-search-filterbar-meta {
    color: var(--tp-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.tp-search-filter-chip {
    align-items: center;
    background: transparent;
    border: 1px solid var(--tp-border);
    border-radius: 999px;
    color: var(--tp-text);
    display: inline-flex;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 800;
    padding: 7px 12px;
}

.tp-search-filter-chip span {
    background: rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    color: var(--tp-muted);
    font-size: 0.73rem;
    font-weight: 900;
    line-height: 1;
    min-width: 22px;
    padding: 4px 6px;
    text-align: center;
}

.tp-search-filter-chip.is-active {
    background: rgba(37, 99, 235, 0.14);
    border-color: var(--tp-primary);
    color: var(--tp-primary);
}

.tp-search-filter-chip.is-active span {
    background: rgba(37, 99, 235, 0.18);
    color: var(--tp-primary);
}

.tp-alert-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-alert-summary-pill {
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    padding: 7px 10px;
}

.tp-alert-summary-pill.critical {
    background: rgba(239, 68, 68, 0.16);
    color: #ef4444;
}

.tp-alert-summary-pill.high {
    background: rgba(245, 158, 11, 0.16);
    color: #f59e0b;
}

.tp-alert-summary-pill.medium {
    background: rgba(14, 165, 233, 0.16);
    color: #0ea5e9;
}

.tp-alert-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-alert-shortcut {
    align-items: center;
    border: 1px solid var(--tp-border);
    border-radius: 999px;
    color: var(--tp-text);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 900;
    gap: 8px;
    line-height: 1;
    padding: 9px 12px;
    text-decoration: none;
}

.tp-alert-shortcut:hover {
    color: inherit;
}

.tp-alert-shortcut.danger {
    border-color: rgba(239, 68, 68, 0.45);
    color: #ef4444;
}

.tp-alert-shortcut.warning {
    border-color: rgba(245, 158, 11, 0.45);
    color: #f59e0b;
}

.tp-alert-shortcut.info {
    border-color: rgba(14, 165, 233, 0.45);
    color: #0ea5e9;
}

.tp-alert-shortcut.primary {
    border-color: rgba(37, 99, 235, 0.45);
    color: var(--tp-primary);
}

.tp-agenda-quick-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tp-agenda-quick-col {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    min-height: 100%;
    padding: 14px;
}

.tp-agenda-quick-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.tp-agenda-quick-head strong {
    font-size: 0.95rem;
    font-weight: 900;
}

.tp-agenda-quick .tp-search-result {
    background: var(--tp-surface);
}

.tp-smart-alert-list {
    display: grid;
    gap: 12px;
}

.tp-smart-alert-item {
    align-items: center;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-left: 4px solid var(--tp-primary);
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: 12px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: 12px 14px;
    text-decoration: none;
}

.tp-smart-alert-item:hover {
    color: inherit;
    border-color: var(--tp-primary);
}

.tp-smart-alert-item.severity-critical {
    border-left-color: #ef4444;
}

.tp-smart-alert-item.severity-high {
    border-left-color: #f59e0b;
}

.tp-smart-alert-item.severity-medium {
    border-left-color: #0ea5e9;
}

.tp-smart-alert-icon {
    align-items: center;
    background: rgba(37, 99, 235, 0.12);
    border-radius: 10px;
    color: var(--tp-primary);
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.tp-smart-alert-item.severity-critical .tp-smart-alert-icon {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.tp-smart-alert-item.severity-high .tp-smart-alert-icon {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.tp-smart-alert-item.severity-medium .tp-smart-alert-icon {
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
}

.tp-smart-alert-content {
    min-width: 0;
}

.tp-smart-alert-content strong,
.tp-smart-alert-content small,
.tp-smart-alert-content span {
    display: block;
    line-height: 1.25;
}

.tp-smart-alert-content strong {
    color: var(--tp-text);
    font-size: 0.96rem;
    font-weight: 900;
}

.tp-smart-alert-content small {
    color: var(--tp-muted);
    font-weight: 800;
    margin-top: 2px;
}

.tp-smart-alert-content span {
    color: var(--tp-text);
    font-size: 0.84rem;
    font-weight: 700;
    margin-top: 4px;
}

.tp-smart-alert-cta {
    color: var(--tp-primary);
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .tp-search-filterbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .tp-agenda-quick-grid {
        grid-template-columns: 1fr;
    }

    .tp-search-recent-list,
    .tp-search-filterbar-main {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: thin;
    }

    .tp-search-recent-chip,
    .tp-search-filter-chip {
        flex: 0 0 auto;
    }

    .tp-smart-alert-item {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .tp-smart-alert-cta {
        grid-column: 2;
    }
}

@media (max-width: 768px) {
    .tp-search-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tp-search-summary-card {
        min-height: 88px;
        padding: 12px;
    }

    .tp-search-summary-card strong {
        font-size: 1.55rem;
    }

    .tp-search-order-filters .row {
        --bs-gutter-y: 0.75rem;
    }

    .tp-search-order-filters .btn,
    .tp-search-order-filters .form-control,
    .tp-search-order-filters .form-select,
    .tp-search-recent-chip {
        font-size: 0.92rem;
    }
}

@media (max-width: 576px) {
    .tp-search-summary {
        grid-template-columns: 1fr;
    }

    .tp-search-recent-list {
        gap: 8px;
    }

    .tp-search-recent-chip {
        padding: 8px 11px;
    }
}

.tp-order-kpis {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.tp-order-kpi {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-left: 4px solid var(--tp-primary);
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 88px;
    padding: 12px;
}

.tp-order-kpi span {
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
}

.tp-order-kpi strong {
    color: var(--tp-text);
    font-size: 24px;
    line-height: 1;
}

.tp-order-kpi small {
    color: var(--tp-muted);
    font-weight: 700;
    line-height: 1.2;
}

.tp-order-kpi-danger { border-left-color: var(--tp-danger); }
.tp-order-kpi-warning { border-left-color: var(--tp-warning); }
.tp-order-kpi-success { border-left-color: var(--tp-success); }
.tp-order-kpi-info { border-left-color: var(--tp-info); }

.tp-kanban-board {
    display: grid;
    gap: 12px;
    grid-auto-columns: minmax(255px, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: thin;
}

.tp-kanban-column {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    min-height: 390px;
    padding: 10px;
}

.tp-kanban-column.tp-kanban-over {
    border-color: var(--tp-primary);
    box-shadow: 0 0 0 2px rgba(21, 118, 248, 0.18) inset;
}

.tp-kanban-header {
    align-items: center;
    border-bottom: 1px solid var(--tp-border);
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
}

.tp-kanban-header strong,
.tp-kanban-header small {
    display: block;
    line-height: 1.15;
}

.tp-kanban-header small {
    color: var(--tp-muted);
    font-weight: 800;
    margin-top: 3px;
}

.tp-kanban-card {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-left: 4px solid var(--tp-primary);
    border-radius: 7px;
    color: inherit;
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    text-decoration: none;
}

.tp-kanban-card:hover {
    border-color: var(--tp-primary);
    color: inherit;
}

.tp-kanban-card[draggable="true"] {
    cursor: grab;
}

.tp-kanban-card.tp-dragging {
    opacity: 0.55;
}

.tp-kanban-card-title {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.tp-kanban-meta {
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 4px;
}

.tp-kanban-finance {
    align-items: center;
    display: flex;
    gap: 6px;
    justify-content: space-between;
    margin-top: 8px;
}

.tp-kanban-empty {
    align-items: center;
    color: var(--tp-muted);
    display: flex;
    font-size: 13px;
    font-weight: 800;
    justify-content: center;
    min-height: 80px;
    text-align: center;
}

.tp-wizard-section {
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    padding: 14px;
}

.tp-wizard-title {
    align-items: center;
    color: var(--tp-text);
    display: flex;
    font-size: 13px;
    font-weight: 900;
    gap: 8px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.tp-order-create-dialog .modal-content {
    max-height: calc(100vh - 2rem);
}

.tp-order-create-dialog form {
    display: flex;
    flex-direction: column;
    max-height: inherit;
    min-height: 0;
}

.tp-order-create-dialog .modal-body {
    overflow-y: auto;
}

.tp-order-create-dialog .modal-footer {
    flex: 0 0 auto;
}

.tp-profit-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tp-profit-stat {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    padding: 10px;
}

.tp-profit-stat small,
.tp-profit-stat strong {
    display: block;
    line-height: 1.2;
}

.tp-profit-stat small {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 800;
}

.tp-profit-stat strong {
    font-size: 17px;
    margin-top: 4px;
}

.tp-finance-header {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
}

.tp-finance-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-fin-sheet {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tp-fin-summary-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tp-fin-summary-grid--essential {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tp-fin-summary-card {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    min-height: 92px;
    padding: 12px 14px;
}

.tp-fin-summary-card small,
.tp-fin-summary-card strong,
.tp-fin-summary-card span {
    display: block;
    line-height: 1.2;
}

.tp-fin-summary-card small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 900;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.tp-fin-summary-card strong {
    color: var(--tp-text);
    font-size: 18px;
    font-weight: 900;
}

.tp-fin-summary-card span {
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 700;
    margin-top: 7px;
}

.tp-fin-summary-card-emphasis {
    border-color: rgba(59, 130, 246, 0.28);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.08);
}

.tp-finance-balance {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    min-height: 62px;
    padding: 8px 10px;
}

.tp-finance-balance small,
.tp-finance-balance strong {
    display: block;
    line-height: 1.2;
}

.tp-finance-balance small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 900;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.tp-finance-balance strong {
    font-size: 14px;
    font-weight: 900;
}

.tp-finance-panel {
    border-radius: 8px !important;
    padding: 12px !important;
}

.tp-fin-editor-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tp-fin-editor-grid--pricing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-fin-editor-card {
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 10px;
    min-height: 108px;
    padding: 12px;
}

.tp-fin-editor-card label {
    margin-bottom: 6px;
}

.tp-fin-editor-card small {
    color: var(--tp-muted);
    display: block;
    font-size: 11px;
    font-weight: 700;
    margin-top: 8px;
    line-height: 1.25;
}

.tp-fin-editor-balance {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tp-fin-editor-balance strong,
.tp-fin-editor-balance span {
    display: block;
}

.tp-fin-editor-balance strong {
    font-size: 18px;
    font-weight: 900;
    margin-top: 4px;
}

.tp-fin-editor-balance span {
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 700;
    margin-top: 6px;
}

.tp-finance-totals {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: right;
}

.tp-finance-totals div {
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    padding: 9px 10px;
}

.tp-finance-totals small,
.tp-finance-totals strong {
    display: block;
    line-height: 1.2;
}

.tp-finance-totals small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 900;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.tp-finance-totals strong {
    font-size: 18px;
    font-weight: 900;
}

.tp-finance-totals-compact {
    gap: 8px;
    margin-top: 2px;
}

.tp-finance-totals-compact div {
    padding: 8px 10px;
}

.tp-finance-totals-compact strong {
    font-size: 16px;
}

.tp-closeout-strip {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.tp-fin-two-col {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
}

.tp-fin-closeout-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
}

.tp-fin-stock-panel {
    margin-top: 2px;
}

.tp-fin-section-head {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.tp-fin-section-head-right {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tp-fin-count {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.24);
    border-radius: 999px;
    color: #9ec5ff;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 5px 9px;
    white-space: nowrap;
}

.tp-fin-compact-table thead th {
    font-size: 11px;
    padding-bottom: 8px;
    padding-top: 6px;
}

.tp-fin-compact-table tbody td {
    padding-bottom: 8px;
    padding-top: 8px;
    vertical-align: middle;
}

.tp-fin-inline-pill {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    color: var(--tp-text);
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 5px 8px;
}

.tp-fin-inline-pill-info {
    border-color: rgba(34, 211, 238, 0.2);
    color: #7dd3fc;
}

.tp-service-page {
    background:
        radial-gradient(circle at 100% 0, rgba(37, 99, 235, 0.14), transparent 32%),
        var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.12);
    padding: 22px;
}

.tp-service-page-head,
.tp-service-page-head-actions,
.tp-service-filters,
.tp-service-card-top,
.tp-service-card-status,
.tp-service-card-actions {
    align-items: center;
    display: flex;
}

.tp-service-page-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--tp-border);
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 18px;
}

.tp-service-page-eyebrow {
    color: var(--tp-primary);
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    gap: 7px;
    letter-spacing: 0.08em;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.tp-service-page-head h5 {
    color: var(--tp-text);
    font-size: 25px;
    font-weight: 900;
    margin: 0;
}

.tp-service-page-head h5 i {
    color: var(--tp-primary);
    margin-right: 7px;
}

.tp-service-page-head p {
    color: var(--tp-muted);
    font-size: 14px;
    font-weight: 600;
    margin: 7px 0 0;
    max-width: 670px;
}

.tp-service-page-head-actions {
    align-items: center;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.tp-service-category-select {
    min-width: 205px;
    position: relative;
}

.tp-service-category-select > i {
    color: var(--tp-primary);
    left: 11px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.tp-service-category-select .form-select {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    color: var(--tp-text);
    font-size: 12px;
    font-weight: 800;
    min-height: 38px;
    padding-left: 33px;
}

.tp-service-filters {
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
}

.tp-service-filters button {
    background: transparent;
    border: 1px solid var(--tp-border);
    border-radius: 999px;
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 800;
    padding: 7px 10px;
}

.tp-service-filters button:hover,
.tp-service-filters button.is-active {
    background: rgba(37, 99, 235, 0.14);
    border-color: rgba(37, 99, 235, 0.46);
    color: var(--tp-primary);
}

.tp-service-catalog-toolbar {
    align-items: center;
    background: rgba(15, 23, 42, 0.16);
    border: 1px solid var(--tp-border);
    border-radius: 12px;
    display: grid;
    gap: 9px;
    grid-template-columns: minmax(220px, 1fr) minmax(190px, auto) auto auto;
    margin-bottom: 9px;
    padding: 9px;
}

.tp-service-search {
    align-items: center;
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 9px;
    display: flex;
    gap: 8px;
    min-height: 38px;
    padding: 0 11px;
}

.tp-service-search:focus-within {
    border-color: rgba(59, 130, 246, 0.64);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.tp-service-search > i {
    color: var(--tp-primary);
    font-size: 12px;
}

.tp-service-search input {
    background: transparent;
    border: 0;
    color: var(--tp-text);
    font-size: 12px;
    font-weight: 700;
    min-width: 0;
    outline: 0;
    width: 100%;
}

.tp-service-search input::placeholder {
    color: var(--tp-muted);
    opacity: 1;
}

.tp-service-clear-filters {
    background: transparent;
    border: 0;
    color: var(--tp-primary);
    font-size: 11px;
    font-weight: 800;
    padding: 7px 4px;
    white-space: nowrap;
}

.tp-service-clear-filters:hover {
    color: var(--tp-text);
    text-decoration: underline;
}

.tp-service-catalog-status {
    align-items: center;
    color: var(--tp-muted);
    display: flex;
    font-size: 11px;
    font-weight: 700;
    gap: 10px;
    justify-content: space-between;
    margin: 0 2px 10px;
}

.tp-service-catalog-status > span:first-child {
    color: var(--tp-text);
    font-weight: 900;
}

.tp-service-table-wrap {
    border: 1px solid var(--tp-border);
    border-radius: 12px;
    overflow: auto;
}

.tp-service-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--tp-text);
    --bs-table-hover-bg: rgba(59, 130, 246, 0.055);
    --bs-table-hover-color: var(--tp-text);
    margin: 0;
    min-width: 930px;
}

.tp-service-table thead th {
    background: rgba(15, 23, 42, 0.34);
    border-bottom-color: var(--tp-border);
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.045em;
    padding: 10px 12px;
    text-transform: uppercase;
    white-space: nowrap;
}

.tp-service-table tbody + tbody {
    border-top: 1px solid var(--tp-border);
}

.tp-service-category-row td {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), rgba(15, 23, 42, 0.03));
    border: 0;
    padding: 0;
}

.tp-service-category-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--tp-text);
    display: grid;
    gap: 9px;
    grid-template-columns: 28px minmax(0, 1fr) auto 18px;
    padding: 9px 12px;
    text-align: left;
    width: 100%;
}

.tp-service-category-toggle:hover {
    background: rgba(59, 130, 246, 0.06);
}

.tp-service-category-icon {
    align-items: center;
    background: rgba(37, 99, 235, 0.16);
    border-radius: 7px;
    color: var(--tp-primary);
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.tp-service-category-toggle strong,
.tp-service-category-toggle small {
    display: block;
    line-height: 1.15;
}

.tp-service-category-toggle strong {
    font-size: 13px;
    font-weight: 900;
}

.tp-service-category-toggle small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 700;
    margin-top: 2px;
}

.tp-service-category-chevron {
    color: var(--tp-muted);
    font-size: 11px;
    transition: transform 150ms ease;
}

.tp-service-category-section.is-collapsed .tp-service-category-chevron {
    transform: rotate(180deg);
}

.tp-service-category-section.is-collapsed .tp-service-row:not([hidden]) {
    display: none;
}

.tp-service-row td {
    border-bottom-color: rgba(148, 163, 184, 0.12);
    padding: 9px 12px;
    vertical-align: middle;
}

.tp-service-row:hover td {
    background: rgba(59, 130, 246, 0.045);
}

.tp-service-row.is-archived {
    opacity: 0.72;
}

.tp-service-name-cell {
    min-width: 220px;
}

.tp-service-name-cell strong,
.tp-service-name-cell span {
    display: block;
    line-height: 1.25;
}

.tp-service-name-cell strong {
    color: var(--tp-text);
    font-size: 12px;
    font-weight: 900;
}

.tp-service-name-cell span {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 650;
    margin-top: 3px;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-service-mode-chip {
    align-items: center;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 999px;
    color: #a5c9ff;
    display: inline-flex;
    font-size: 10px;
    font-weight: 800;
    gap: 5px;
    padding: 5px 8px;
    white-space: nowrap;
}

.tp-service-mode-chip.is-variable {
    background: rgba(45, 212, 191, 0.08);
    border-color: rgba(45, 212, 191, 0.2);
    color: #99f6e4;
}

.tp-service-money {
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.tp-service-reference {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 185px;
}

.tp-service-reference span {
    align-items: center;
    color: var(--tp-muted);
    display: inline-flex;
    font-size: 10px;
    font-weight: 750;
    gap: 4px;
    white-space: nowrap;
}

.tp-service-reference i {
    color: var(--tp-primary);
}

.tp-service-row-actions {
    display: inline-flex;
    gap: 5px;
    justify-content: flex-end;
}

.tp-service-row-actions form {
    margin: 0;
}

.tp-service-row-actions .btn {
    min-width: 32px;
}

.tp-service-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(180px, max-content));
}

.tp-service-catalog-groups {
    display: grid;
    gap: 10px;
}

.tp-service-category-section {
    background: linear-gradient(120deg, rgba(37, 99, 235, 0.055), rgba(16, 185, 129, 0.025));
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    padding: 10px 12px 12px;
}

.tp-service-category-head {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.tp-service-category-eyebrow {
    color: var(--tp-primary);
    display: inline-flex;
    font-size: 10px;
    font-weight: 900;
    gap: 6px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tp-service-category-head h6 {
    color: var(--tp-text);
    font-size: 15px;
    font-weight: 900;
    margin: 1px 0 0;
}

.tp-service-category-count {
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.26);
    border-radius: 999px;
    color: var(--tp-primary);
    font-size: 11px;
    font-weight: 850;
    padding: 5px 9px;
    white-space: nowrap;
}

.tp-fin-workspace-nav {
    background:
        linear-gradient(115deg, rgba(37, 99, 235, 0.12), transparent 38%),
        var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 16px;
    padding: 9px;
}

.tp-fin-workspace-link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--tp-muted);
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 62px;
    padding: 9px 10px;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.tp-fin-workspace-link:hover {
    background: rgba(59, 130, 246, 0.09);
    border-color: rgba(96, 165, 250, 0.24);
    color: var(--tp-text);
    transform: translateY(-1px);
}

.tp-fin-workspace-link > i {
    align-items: center;
    background: rgba(148, 163, 184, 0.1);
    border-radius: 8px;
    color: #93c5fd;
    display: inline-flex;
    grid-row: span 2;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.tp-fin-workspace-link > span {
    color: inherit;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
}

.tp-fin-workspace-link > small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 3px;
}

.tp-fin-workspace-link.is-active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(8, 47, 73, 0.12));
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: inset 3px 0 0 #3b82f6;
    color: var(--tp-text);
}

.tp-fin-workspace-link.is-active > i {
    background: rgba(59, 130, 246, 0.22);
    color: #bfdbfe;
}

.tp-fin-workspace-card {
    background:
        radial-gradient(circle at 100% 0, rgba(59, 130, 246, 0.1), transparent 28%),
        var(--tp-surface);
    border-color: rgba(96, 165, 250, 0.24);
    box-shadow: 0 16px 28px rgba(2, 6, 23, 0.1);
}

.tp-fin-workspace-card--cash {
    background:
        radial-gradient(circle at 100% 0, rgba(16, 185, 129, 0.12), transparent 30%),
        var(--tp-surface);
    border-color: rgba(52, 211, 153, 0.28);
}

.tp-fin-workspace-card--expenses {
    background:
        radial-gradient(circle at 100% 0, rgba(244, 63, 94, 0.12), transparent 30%),
        var(--tp-surface);
    border-color: rgba(251, 113, 133, 0.28);
}

.tp-fin-workspace-card--reports {
    background:
        radial-gradient(circle at 100% 0, rgba(34, 211, 238, 0.12), transparent 30%),
        var(--tp-surface);
    border-color: rgba(34, 211, 238, 0.28);
}

.tp-fin-workspace-card .tp-fin-summary-card {
    background: rgba(15, 23, 42, 0.18);
}

.tp-service-card {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 10px;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    width: min(100%, 220px);
}

.tp-service-card:hover {
    border-color: rgba(37, 99, 235, 0.52);
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.14);
    transform: translateY(-2px);
}

.tp-service-card.is-archived {
    filter: saturate(0.5);
    opacity: 0.76;
}

.tp-service-card-top {
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 7px;
}

.tp-service-card-icon {
    align-items: center;
    background: rgba(37, 99, 235, 0.13);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 8px;
    color: var(--tp-primary);
    display: inline-flex;
    font-size: 12px;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.tp-service-card-status {
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

.tp-service-card h6 {
    color: var(--tp-text);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 3px;
}

.tp-service-card > p {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 0;
    overflow: hidden;
}

.tp-service-card-mode {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 800;
    margin: 6px 0;
}

.tp-service-card-mode i {
    color: #2dd4bf;
    margin-right: 5px;
}

.tp-service-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 6px;
}

.tp-service-card-meta span {
    align-items: center;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 999px;
    color: var(--tp-muted);
    display: inline-flex;
    font-size: 9px;
    font-weight: 800;
    gap: 4px;
    max-width: 100%;
    padding: 3px 7px;
}

.tp-service-card-meta i {
    color: var(--tp-primary);
}

.tp-service-price-grid {
    border-bottom: 1px solid var(--tp-border);
    border-top: 1px solid var(--tp-border);
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: auto;
    padding: 6px 0;
}

.tp-service-price-grid > div + div {
    border-left: 1px solid var(--tp-border);
    padding-left: 8px;
}

.tp-service-price-grid span,
.tp-service-price-grid strong {
    display: block;
    line-height: 1.2;
}

.tp-service-price-grid span {
    color: var(--tp-muted);
    font-size: 9px;
    font-weight: 800;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.tp-service-price-grid strong {
    font-size: 12px;
    font-weight: 900;
}

.tp-service-card-actions {
    gap: 6px;
    margin-top: 8px;
}

.tp-service-card-actions > .btn,
.tp-service-card-actions form {
    margin: 0;
}

.tp-service-card-actions > .btn:first-child {
    flex: 1;
}

.tp-service-card-actions form .btn {
    min-width: 34px;
}

.tp-order-service-dialog {
    max-width: 560px;
}

#modalServiciosTrabajo .tp-order-service-pricing-row {
    align-items: end;
}

#modalServiciosTrabajo .tp-order-service-field {
    min-width: 0;
}

#modalServiciosTrabajo .tp-order-service-control {
    align-items: center;
    display: flex;
    min-height: 42px;
}

#modalServiciosTrabajo #servicioFijoValor {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#modalServiciosTrabajo .tp-order-service-money .input-group-text,
#modalServiciosTrabajo .tp-order-service-money .form-control {
    min-height: 42px;
}

.tp-service-empty {
    align-items: center;
    border: 1px dashed rgba(59, 130, 246, 0.38);
    border-radius: 13px;
    color: var(--tp-muted);
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    min-height: 270px;
    padding: 30px;
    text-align: center;
}

.tp-service-empty > i {
    color: var(--tp-primary);
    font-size: 27px;
}

.tp-service-empty strong {
    color: var(--tp-text);
    font-size: 16px;
}

.tp-service-empty span {
    font-size: 13px;
    font-weight: 600;
    max-width: 430px;
}

@media (max-width: 768px) {
    .tp-service-page {
        border-radius: 12px;
        padding: 15px;
    }

    .tp-service-page-head {
        align-items: stretch;
        flex-direction: column;
    }

    .tp-service-page-head-actions {
        align-items: stretch;
        justify-content: flex-start;
    }

    .tp-service-catalog-toolbar {
        grid-template-columns: 1fr;
    }

    .tp-service-catalog-toolbar .tp-service-category-select {
        width: 100%;
    }

    .tp-service-catalog-status {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .tp-service-table {
        min-width: 800px;
    }

    .tp-service-category-select {
        min-width: 0;
        width: 100%;
    }

    .tp-service-filters {
        justify-content: flex-start;
    }

    .tp-service-filters button {
        flex: 1;
    }

    .tp-service-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .tp-service-card {
        width: auto;
    }
}

.tp-fin-client-note {
    align-items: center;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 10px;
    color: var(--tp-text);
    display: flex;
    gap: 10px;
    padding: 10px 12px;
}

.tp-fin-client-note i {
    color: var(--tp-primary);
}

.tp-orders-registry-head {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
}

.tp-orders-registry-title {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tp-orders-filter-toolbar {
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.04));
    border: 1px solid var(--tp-border);
    border-radius: 12px;
    flex: 1 1 720px;
    max-width: 100%;
    padding: 10px 12px;
}

.tp-orders-filter-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(145px, 1fr));
}

.tp-orders-filter-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.tp-orders-filter-label {
    align-items: center;
    color: var(--tp-muted);
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    gap: 7px;
    letter-spacing: 0.01em;
    margin: 0;
    text-transform: uppercase;
}

.tp-orders-filter-item .form-control,
.tp-orders-filter-item .form-select {
    min-height: 40px;
}

body.tp-theme-light .tp-orders-filter-toolbar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(246, 240, 229, 0.96));
    border-color: var(--tp-border);
}

body.tp-theme-dark .tp-orders-filter-toolbar {
    background: linear-gradient(180deg, rgba(37, 45, 58, 0.96), rgba(29, 36, 47, 0.96));
    border-color: rgba(148, 163, 184, 0.16);
}

@media (max-width: 1200px) {
    .tp-orders-filter-grid {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

@media (max-width: 768px) {
    .tp-orders-filter-toolbar {
        flex-basis: 100%;
        width: 100%;
    }

    .tp-orders-filter-grid {
        grid-template-columns: 1fr;
    }
}

.tp-fin-client-note span {
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
}

.tp-fin-stock-list {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    display: flex;
    flex-direction: column;
}

.tp-fin-stock-item {
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 0;
}

.tp-fin-stock-item:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
}

.tp-fin-stock-main {
    min-width: 0;
}

.tp-fin-stock-title {
    align-items: center;
    display: flex;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}

.tp-fin-stock-title span {
    min-width: 0;
}

.tp-fin-stock-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.tp-fin-stock-note {
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    margin-top: 6px;
}

.tp-fin-closeout-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-fin-closeout-field {
    min-width: 0;
}

.tp-closeout-card {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    padding: 9px 10px;
}

.tp-closeout-card small,
.tp-closeout-card strong {
    display: block;
    line-height: 1.2;
}

.tp-closeout-card small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 900;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.tp-closeout-card strong {
    font-size: 14px;
    font-weight: 900;
}

.tp-closeout-actions {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, max-content);
    justify-content: end;
}

.tp-section-header {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.tp-tech-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-tech-pill {
    background: rgba(21, 118, 248, 0.12);
    border: 1px solid rgba(21, 118, 248, 0.28);
    border-radius: 999px;
    color: var(--tp-primary);
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    padding: 6px 9px;
}

.tp-tech-guide {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    padding: 12px;
}

.tp-tech-guide-head {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tp-tech-guide-stage {
    display: grid;
    gap: 10px;
    grid-template-columns: 180px minmax(0, 1fr) minmax(240px, 1.15fr);
}

.tp-tech-guide-stage-card {
    background: rgba(15, 23, 42, 0.26);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    padding: 10px;
}

.tp-tech-guide-stage-card strong {
    color: var(--tp-text);
    display: block;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.4;
}

.tp-tech-guide-stage-card ul {
    margin: 0;
    padding-left: 16px;
}

.tp-tech-guide-stage-card li {
    color: var(--tp-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.tp-tech-guide-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-tech-guide-card {
    background: rgba(15, 23, 42, 0.26);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    padding: 10px;
}

.tp-tech-guide-card small,
.tp-tech-guide-history small,
.tp-context-stack-label {
    color: var(--tp-muted);
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .02em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.tp-tech-guide-card p,
.tp-tech-guide-card ul,
.tp-tech-guide-history ul {
    margin: 0;
}

.tp-tech-guide-card p,
.tp-tech-guide-card li,
.tp-tech-guide-history li {
    color: var(--tp-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.tp-tech-guide-card ul,
.tp-tech-guide-history ul {
    padding-left: 16px;
}

.tp-tech-guide-history {
    border-top: 1px dashed rgba(148, 163, 184, 0.2);
    margin-top: 12px;
    padding-top: 10px;
}

.tp-tech-pending {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: 8px;
    padding: 12px;
}

.tp-tech-pending-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.tp-tech-pending-head small,
.tp-tech-pending-head strong {
    display: block;
    line-height: 1.2;
}

.tp-tech-pending-head small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.tp-tech-pending-head strong {
    color: #f59e0b;
    font-size: 13px;
    font-weight: 900;
}

.tp-ingreso-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-ingreso-pending,
.tp-closeout-pending {
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 8px;
    padding: 12px;
}

.tp-ingreso-pending-head,
.tp-closeout-pending-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.tp-ingreso-pending-head small,
.tp-ingreso-pending-head strong,
.tp-closeout-pending-head small,
.tp-closeout-pending-head strong {
    display: block;
    line-height: 1.2;
}

.tp-ingreso-pending-head small,
.tp-closeout-pending-head small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.tp-ingreso-pending-head strong,
.tp-closeout-pending-head strong {
    color: var(--tp-primary);
    font-size: 13px;
    font-weight: 900;
}

.tp-template-panel {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    padding: 10px;
}

.tp-quote-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tp-quote-summary > div {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    padding: 9px;
}

.tp-quote-summary small,
.tp-quote-summary strong {
    display: block;
    line-height: 1.2;
}

.tp-quote-summary small {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.tp-quote-summary strong {
    color: var(--tp-text);
    font-size: 15px;
    margin-top: 4px;
}

.tp-quote-pill {
    border: 1px solid var(--tp-border);
    border-radius: 999px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    padding: 5px 8px;
}

.tp-quote-pendiente {
    background: rgba(243, 181, 27, 0.16);
    border-color: rgba(243, 181, 27, 0.35);
    color: var(--tp-warning);
}

.tp-quote-aprobada {
    background: rgba(20, 166, 100, 0.16);
    border-color: rgba(20, 166, 100, 0.35);
    color: var(--tp-success);
}

.tp-quote-rechazada {
    background: rgba(245, 73, 101, 0.14);
    border-color: rgba(245, 73, 101, 0.35);
    color: var(--tp-danger);
}

.tp-portal-box {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    padding: 10px;
}

.tp-portal-box img {
    background: #ffffff;
    border-radius: 6px;
    height: 92px;
    object-fit: contain;
    padding: 5px;
    width: 92px;
}

.tp-device-kpi-grid,
.tp-device-finance,
.tp-portal-grid {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.tp-device-kpi-grid div,
.tp-device-finance div,
.tp-portal-grid div {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    padding: 10px;
}

.tp-device-action,
.tp-device-failures {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
}

.tp-device-context {
    border-left: 3px solid var(--tp-info) !important;
}

.tp-context-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tp-context-smart-grid,
.tp-device-memory-panel {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tp-context-grid div {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    padding: 9px;
}

.tp-context-smart-grid > div,
.tp-device-memory-panel > div {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    padding: 10px;
}

.tp-context-grid small,
.tp-context-grid strong,
.tp-context-smart-grid small,
.tp-context-smart-grid strong,
.tp-context-smart-grid span,
.tp-device-memory-panel small,
.tp-device-memory-panel strong,
.tp-device-memory-panel span {
    display: block;
    line-height: 1.25;
}

.tp-context-grid small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.tp-context-grid strong {
    color: var(--tp-text);
    font-size: 15px;
    margin-top: 4px;
}

.tp-context-smart-grid small,
.tp-device-memory-panel small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.tp-context-smart-grid strong,
.tp-device-memory-panel strong {
    color: var(--tp-text);
    font-size: 12px;
    font-weight: 900;
    margin-top: 5px;
}

.tp-context-smart-grid span,
.tp-device-memory-panel span {
    color: var(--tp-text-soft);
    font-size: 11px;
    font-weight: 700;
    margin-top: 5px;
}

.tp-context-alert {
    align-items: center;
    border-radius: 7px;
    display: flex;
    font-size: 12px;
    font-weight: 900;
    gap: 8px;
    padding: 9px;
}

.tp-context-danger {
    background: rgba(245, 73, 101, 0.12);
    border: 1px solid rgba(245, 73, 101, 0.32);
    color: var(--tp-danger);
}

.tp-context-success {
    background: rgba(20, 166, 100, 0.13);
    border: 1px solid rgba(20, 166, 100, 0.32);
    color: var(--tp-success);
}

.tp-context-list {
    display: grid;
    gap: 7px;
}

.tp-context-list a {
    align-items: center;
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    color: var(--tp-text);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 8px;
    text-decoration: none;
}

.tp-context-list a:hover {
    border-color: var(--tp-primary);
}

.tp-context-list span {
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
}

.tp-context-list small {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.tp-context-note,
.tp-context-item {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    padding: 9px;
}

.tp-context-note p,
.tp-context-item p {
    color: var(--tp-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    margin: 0;
}

.tp-context-stack {
    display: grid;
    gap: 8px;
}

.tp-context-item-head {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 6px;
}

.tp-context-item-head strong {
    color: var(--tp-text);
    font-size: 12px;
    font-weight: 900;
}

.tp-context-item-head span {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.tp-context-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tp-context-chip {
    background: rgba(21, 118, 248, 0.12);
    border: 1px solid rgba(21, 118, 248, 0.26);
    border-radius: 999px;
    color: var(--tp-primary);
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    padding: 6px 8px;
}

.tp-assistant-panel {
    background: linear-gradient(180deg, rgba(21, 118, 248, 0.10), rgba(21, 118, 248, 0.03));
    border: 1px solid rgba(21, 118, 248, 0.30);
    border-radius: 8px;
    padding: 12px;
}

.tp-assistant-header {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.tp-assistant-header strong,
.tp-assistant-header small {
    display: block;
    line-height: 1.2;
}

.tp-assistant-header strong {
    color: var(--tp-text);
    font-size: 15px;
    font-weight: 900;
}

.tp-assistant-header small {
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 800;
    margin-top: 2px;
}

.tp-assistant-header > span {
    align-items: center;
    background: var(--tp-primary);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
    min-width: 28px;
    padding: 5px 8px;
}

.tp-assistant-list {
    display: grid;
    gap: 8px;
}

.tp-assistant-item {
    align-items: center;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-left: 4px solid var(--tp-info);
    border-radius: 7px;
    display: grid;
    gap: 10px;
    grid-template-columns: 22px 1fr auto;
    min-height: 52px;
    padding: 9px 10px;
}

.tp-assistant-item > i {
    text-align: center;
}

.tp-assistant-item strong,
.tp-assistant-item small {
    display: block;
    line-height: 1.2;
}

.tp-assistant-item strong {
    color: var(--tp-text);
    font-size: 13px;
    font-weight: 900;
}

.tp-assistant-item small {
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
}

.tp-assistant-danger {
    border-left-color: var(--tp-danger);
}

.tp-assistant-danger > i {
    color: var(--tp-danger);
}

.tp-assistant-warning {
    border-left-color: var(--tp-warning);
}

.tp-assistant-warning > i {
    color: var(--tp-warning);
}

.tp-assistant-info {
    border-left-color: var(--tp-info);
}

.tp-assistant-info > i {
    color: var(--tp-info);
}

.tp-assistant-success {
    border-left-color: var(--tp-success);
}

.tp-assistant-success > i {
    color: var(--tp-success);
}

.tp-assistant-action {
    border-color: var(--tp-border) !important;
    color: var(--tp-text) !important;
    font-size: 12px;
    font-weight: 900;
    padding: 4px 8px;
}

.tp-device-failures {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
}

.tp-device-failures span {
    background: rgba(243, 181, 27, 0.1);
    border: 1px solid rgba(243, 181, 27, 0.35);
    border-radius: 6px;
    color: var(--tp-text);
    font-size: 12px;
    font-weight: 800;
    padding: 7px 9px;
}

.tp-portal-shell {
    align-items: center;
    background: var(--tp-bg);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.tp-portal-card {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    box-shadow: var(--tp-shadow);
    max-width: 760px;
    padding: 22px;
    width: 100%;
}

.tp-portal-header,
.tp-portal-status {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.tp-portal-logo,
.tp-portal-logo-icon {
    border-radius: 7px;
    height: 58px;
    object-fit: cover;
    width: 58px;
}

.tp-portal-logo-icon {
    align-items: center;
    background: var(--tp-primary);
    color: #ffffff;
    display: inline-flex;
    justify-content: center;
}

.tp-portal-header h1,
.tp-portal-status h2 {
    color: var(--tp-text);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
}

.tp-portal-header p,
.tp-portal-status p {
    color: var(--tp-muted);
    font-weight: 700;
    margin: 2px 0 0;
}

.tp-portal-hero {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(15, 23, 42, 0.02));
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 12px;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) 220px;
    margin-bottom: 16px;
    padding: 18px;
}

.tp-portal-eyebrow {
    color: var(--tp-primary);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.tp-portal-hero-main h2 {
    color: var(--tp-text);
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1.15;
    margin: 0;
}

.tp-portal-hero-main p {
    color: var(--tp-muted);
    font-size: 0.96rem;
    font-weight: 700;
    margin: 8px 0 0;
}

.tp-portal-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 14px;
}

.tp-portal-hero-meta span {
    align-items: center;
    color: var(--tp-text);
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 800;
    gap: 7px;
}

.tp-portal-state-card {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    padding: 14px;
}

.tp-portal-state-card small,
.tp-portal-state-card p {
    margin: 0;
}

.tp-portal-state-card small {
    color: var(--tp-muted);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.tp-portal-state-card p {
    color: var(--tp-muted);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.tp-portal-mini-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
}

.tp-portal-mini-card {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    padding: 14px;
}

.tp-portal-mini-card small,
.tp-portal-mini-card strong,
.tp-portal-mini-card span {
    display: block;
    line-height: 1.25;
}

.tp-portal-mini-card small {
    color: var(--tp-muted);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.tp-portal-mini-card strong {
    color: var(--tp-text);
    font-size: 1rem;
    font-weight: 900;
    margin-top: 6px;
}

.tp-portal-mini-card span {
    color: var(--tp-muted);
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 6px;
}

.tp-portal-timeline {
    margin-bottom: 16px;
}

.tp-portal-next {
    align-items: center;
    background: rgba(21, 118, 248, 0.08);
    border: 1px solid rgba(21, 118, 248, 0.28);
    border-radius: 7px;
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
}

.tp-portal-next strong,
.tp-portal-next span {
    display: block;
    line-height: 1.25;
}

.tp-portal-next strong {
    color: var(--tp-text);
    font-size: 13px;
}

.tp-portal-next span {
    color: var(--tp-muted);
    font-size: 13px;
    font-weight: 700;
}

.tp-portal-sections {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
}

.tp-portal-sections-simple {
    margin-top: 0;
}

.tp-portal-sections > div {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    padding: 13px;
}

.tp-portal-section-wide {
    grid-column: 1 / -1;
}

.tp-portal-quote .tp-quote-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tp-quote-response textarea {
    background: var(--tp-surface);
    border-color: var(--tp-border);
    color: var(--tp-text);
}

.tp-portal-sections h3 {
    color: var(--tp-text);
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 9px;
}

.tp-portal-sections p {
    color: var(--tp-text);
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 7px;
}

.tp-portal-photo-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.tp-portal-photo-item {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    object-fit: cover;
    width: 100%;
}

.tp-inventory-hero {
    align-items: stretch;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(240px, 320px) 1fr;
}

.tp-inventory-photo {
    align-items: center;
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    display: flex;
    justify-content: center;
    min-height: 220px;
    overflow: hidden;
}

.tp-inventory-photo img {
    height: 100%;
    max-height: 260px;
    object-fit: cover;
    width: 100%;
}

.tp-inventory-title {
    color: var(--tp-text) !important;
}

.tp-stock-alert-toggle {
    align-items: center;
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    height: 100%;
    min-height: 56px;
    padding: 10px 12px;
}

.tp-stock-alert-toggle input {
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

.tp-stock-alert-toggle input[type="hidden"] {
    display: none;
}

.tp-stock-alert-ignore {
    border-color: rgba(243, 181, 27, 0.35);
}

.tp-stock-alert-ignore input[type="checkbox"]:checked + span strong {
    color: var(--tp-warning);
}

.tp-stock-alert-toggle strong,
.tp-stock-alert-toggle small {
    display: block;
    line-height: 1.2;
}

.tp-stock-alert-toggle strong {
    color: var(--tp-text);
    font-size: 13px;
    font-weight: 900;
}

.tp-stock-alert-toggle small {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

.tp-detail-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tp-detail-stat {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    padding: 12px;
}

.tp-detail-stat small,
.tp-detail-stat strong {
    display: block;
    line-height: 1.2;
}

.tp-detail-stat small {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.tp-detail-stat strong {
    font-size: 18px;
    margin-top: 4px;
}

.tp-agenda-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tp-agenda-card {
    min-height: 420px;
}

.tp-agenda-card .tp-search-result {
    background: var(--tp-surface-soft);
}

/* Agenda: una vista mensual operativa evita separar la misma información en cuatro listas. */
.tp-agenda-calendar {
    border: 1px solid var(--tp-border) !important;
    background: var(--tp-surface);
}

.tp-agenda-calendar-head {
    align-items: center;
    border-bottom: 1px solid var(--tp-border);
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 20px 22px 16px;
}

.tp-agenda-calendar-head h2 {
    color: var(--tp-text);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 850;
    line-height: 1.1;
    margin: 4px 0;
}

.tp-agenda-calendar-head p {
    color: var(--tp-muted);
    font-size: .88rem;
    margin: 0;
}

.tp-agenda-calendar-controls {
    display: flex;
    gap: 8px;
    white-space: nowrap;
}

.tp-agenda-calendar-controls .btn {
    align-items: center;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    min-height: 36px;
    min-width: 38px;
}

.tp-agenda-legend {
    align-items: center;
    background: var(--tp-surface-soft);
    border-bottom: 1px solid var(--tp-border);
    color: var(--tp-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .78rem;
    font-weight: 750;
    gap: 16px;
    padding: 10px 22px;
}

.tp-agenda-legend i {
    margin-right: 4px;
}

.tp-calendar-weekdays,
.tp-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-width: 820px;
}

.tp-calendar-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.tp-calendar-weekdays {
    background: var(--tp-surface-soft);
    border-bottom: 1px solid var(--tp-border);
    color: var(--tp-muted);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .045em;
    text-align: right;
    text-transform: uppercase;
}

.tp-calendar-weekdays span {
    padding: 9px 12px;
}

.tp-calendar-grid {
    min-height: 650px;
}

.tp-calendar-day {
    background: var(--tp-surface);
    border-bottom: 1px solid var(--tp-border);
    border-right: 1px solid var(--tp-border);
    min-height: 130px;
    padding: 8px;
}

.tp-calendar-day:nth-child(7n) {
    border-right: 0;
}

.tp-calendar-day.is-outside {
    background: color-mix(in srgb, var(--tp-surface-soft) 72%, transparent);
}

.tp-calendar-day.is-outside .tp-calendar-day-number {
    opacity: .42;
}

.tp-calendar-day.is-today {
    background: color-mix(in srgb, var(--tp-primary) 7%, var(--tp-surface));
    box-shadow: inset 0 3px 0 var(--tp-primary);
}

.tp-calendar-day-number {
    color: var(--tp-text);
    font-size: .78rem;
    font-weight: 850;
    line-height: 1;
    margin: 0 0 8px auto;
    text-align: right;
}

.tp-calendar-day.is-today .tp-calendar-day-number {
    align-items: center;
    background: var(--tp-primary);
    border-radius: 999px;
    color: #fff;
    display: flex;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.tp-calendar-events {
    display: grid;
    gap: 5px;
}

.tp-calendar-event {
    border-left: 3px solid currentColor;
    border-radius: 5px;
    color: var(--tp-primary);
    display: grid;
    font-size: .72rem;
    gap: 1px;
    grid-template-columns: 14px minmax(0, 1fr);
    padding: 5px 6px;
    text-decoration: none;
}

.tp-calendar-event:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: currentColor;
}

.tp-calendar-event i {
    grid-row: span 2;
    margin-top: 2px;
}

.tp-calendar-event span,
.tp-calendar-event small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-calendar-event span {
    color: var(--tp-text);
    font-weight: 850;
}

.tp-calendar-event small {
    color: var(--tp-muted);
    font-size: .67rem;
}

.tp-calendar-event.is-warning { color: #b87800; }
.tp-calendar-event.is-danger { color: #dc3455; }
.tp-calendar-event.is-info { color: #147cba; }

.tp-agenda-calendar-foot {
    align-items: center;
    color: var(--tp-muted);
    display: flex;
    font-size: .78rem;
    gap: 8px;
    padding: 12px 22px;
}

.tp-agenda-calendar-foot i {
    color: var(--tp-primary);
}

/* Agenda operativa: el mes es el foco; el año solo ayuda a orientarse. */
.tp-agenda-page-header {
    align-items: center;
    gap: 18px;
}

.tp-agenda-new {
    flex: 0 0 auto;
    min-height: 40px;
}

.tp-agenda-feedback {
    align-items: center;
    animation: tp-agenda-reveal .32s ease-out both;
    background: color-mix(in srgb, var(--tp-success) 11%, var(--tp-surface));
    border: 1px solid color-mix(in srgb, var(--tp-success) 35%, var(--tp-border));
    border-radius: 10px;
    color: var(--tp-text);
    display: flex;
    font-size: .84rem;
    font-weight: 750;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 13px;
}

.tp-agenda-feedback i { color: var(--tp-success); }

.tp-agenda-workspace {
    align-items: start;
    animation: tp-agenda-reveal .38s ease-out both;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) 285px;
}

.tp-agenda-calendar {
    min-width: 0;
}

.tp-agenda-month-picker input {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border-strong, var(--tp-border));
    border-radius: 8px;
    color: var(--tp-text);
    font-size: .82rem;
    font-weight: 750;
    height: 36px;
    padding: 0 8px;
}

.tp-agenda-legend {
    gap: 7px;
}

.tp-agenda-legend-title {
    color: var(--tp-muted);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .045em;
    margin-right: 4px;
    text-transform: uppercase;
}

.tp-agenda-legend button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--tp-muted);
    font: inherit;
    font-size: .75rem;
    font-weight: 750;
    line-height: 1;
    padding: 6px 8px;
}

.tp-agenda-legend button:hover,
.tp-agenda-legend button.is-active {
    background: color-mix(in srgb, var(--tp-primary) 12%, var(--tp-surface));
    border-color: color-mix(in srgb, var(--tp-primary) 34%, var(--tp-border));
    color: var(--tp-primary);
}

.tp-calendar-day {
    transition: background-color .18s ease, box-shadow .18s ease;
}

.tp-calendar-day:hover {
    background: color-mix(in srgb, var(--tp-primary) 5%, var(--tp-surface));
}

.tp-calendar-day-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.tp-calendar-day-number {
    margin: 0 0 0 auto;
}

.tp-calendar-add {
    align-items: center;
    background: color-mix(in srgb, var(--tp-primary) 10%, var(--tp-surface));
    border: 1px solid color-mix(in srgb, var(--tp-primary) 28%, var(--tp-border));
    border-radius: 7px;
    color: var(--tp-primary);
    display: inline-flex;
    font-size: .68rem;
    height: 24px;
    justify-content: center;
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
    width: 24px;
}

.tp-calendar-day:hover .tp-calendar-add,
.tp-calendar-day:focus-within .tp-calendar-add,
.tp-calendar-day.is-today .tp-calendar-add {
    opacity: 1;
}

.tp-calendar-add:hover {
    background: var(--tp-primary);
    color: #fff;
    transform: translateY(-1px);
}

.tp-calendar-event {
    background: transparent;
    border-bottom: 0;
    border-right: 0;
    border-top: 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.tp-calendar-event.is-success { color: var(--tp-success); }
.tp-calendar-event.is-primary { color: var(--tp-primary); }
.tp-calendar-event.is-violet { color: #8a55e8; }

.tp-calendar-event[hidden] { display: none; }

.tp-agenda-year {
    background: var(--tp-surface) !important;
    border: 1px solid var(--tp-border) !important;
    min-width: 0;
    padding: 16px;
}

.tp-agenda-year-head {
    align-items: flex-start;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.tp-agenda-year-head h3 {
    color: var(--tp-text);
    font-size: 1.35rem;
    font-weight: 850;
    line-height: 1;
    margin: 4px 0 0;
}

.tp-agenda-year > p {
    color: var(--tp-muted);
    font-size: .78rem;
    line-height: 1.4;
    margin: 12px 0;
}

.tp-agenda-year-total {
    background: color-mix(in srgb, var(--tp-primary) 12%, var(--tp-surface));
    border-radius: 999px;
    color: var(--tp-primary);
    font-size: .68rem;
    font-weight: 850;
    padding: 5px 7px;
    white-space: nowrap;
}

.tp-agenda-year-grid {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tp-agenda-year-month {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 9px;
    color: var(--tp-muted);
    display: grid;
    gap: 2px;
    min-height: 64px;
    padding: 8px;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tp-agenda-year-month:hover {
    border-color: var(--tp-primary);
    box-shadow: 0 7px 16px color-mix(in srgb, var(--tp-primary) 15%, transparent);
    color: var(--tp-primary);
    transform: translateY(-2px);
}

.tp-agenda-year-month.is-active {
    background: color-mix(in srgb, var(--tp-primary) 13%, var(--tp-surface));
    border-color: var(--tp-primary);
}

.tp-agenda-year-month span {
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.tp-agenda-year-month strong {
    color: var(--tp-text);
    font-size: 1.15rem;
    line-height: 1;
}

.tp-agenda-year-month small {
    font-size: .62rem;
    white-space: nowrap;
}

.tp-agenda-year-tip {
    border-top: 1px solid var(--tp-border);
    color: var(--tp-muted);
    font-size: .72rem;
    line-height: 1.35;
    margin-top: 14px;
    padding-top: 12px;
}

.tp-agenda-year-tip i { color: var(--tp-primary); margin-right: 4px; }

.tp-agenda-dialog {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    box-shadow: 0 26px 80px rgba(0, 0, 0, .38);
    color: var(--tp-text);
    max-width: min(560px, calc(100vw - 28px));
    padding: 0;
    width: 560px;
}

.tp-agenda-dialog::backdrop {
    background: rgba(6, 12, 22, .56);
    backdrop-filter: blur(3px);
}

.tp-agenda-dialog header,
.tp-agenda-dialog footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 18px 20px;
}

.tp-agenda-dialog header { border-bottom: 1px solid var(--tp-border); }
.tp-agenda-dialog footer { border-top: 1px solid var(--tp-border); gap: 12px; }

.tp-agenda-dialog h2 {
    color: var(--tp-text);
    font-size: 1.2rem;
    font-weight: 850;
    margin: 3px 0;
}

.tp-agenda-dialog header p {
    color: var(--tp-muted);
    font-size: .82rem;
    margin: 0;
}

.tp-dialog-close {
    align-items: center;
    background: transparent;
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    color: var(--tp-muted);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.tp-dialog-close:hover { color: var(--tp-danger); border-color: var(--tp-danger); }

.tp-agenda-dialog-body {
    display: grid;
    gap: 14px;
    padding: 20px;
}

.tp-agenda-dialog label {
    color: var(--tp-text);
    display: grid;
    font-size: .78rem;
    font-weight: 800;
    gap: 6px;
}

.tp-agenda-dialog input,
.tp-agenda-dialog select,
.tp-agenda-dialog textarea {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border-strong, var(--tp-border));
    border-radius: 8px;
    color: var(--tp-text);
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    min-height: 40px;
    padding: 9px 10px;
}

.tp-agenda-dialog textarea { min-height: 110px; resize: vertical; }

.tp-agenda-dialog-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-agenda-dialog-actions,
.tp-agenda-dialog-danger {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@keyframes tp-agenda-reveal {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .tp-agenda-workspace,
    .tp-agenda-feedback,
    .tp-agenda-year-month,
    .tp-calendar-add { animation: none; transition: none; }
}

@media (max-width: 700px) {
    .tp-agenda-calendar-head {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
    }

    .tp-agenda-calendar-controls {
        width: 100%;
    }

    .tp-agenda-calendar-controls .btn:nth-child(2) {
        flex: 1;
    }

    .tp-agenda-legend,
    .tp-agenda-calendar-foot {
        padding-left: 16px;
        padding-right: 16px;
    }

    .tp-calendar-grid {
        min-height: 560px;
    }

    .tp-calendar-day {
        min-height: 112px;
    }

    .tp-agenda-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .tp-agenda-new { width: 100%; }

    .tp-agenda-dialog footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .tp-agenda-dialog-actions,
    .tp-agenda-dialog-danger { width: 100%; }

    .tp-agenda-dialog-actions .btn,
    .tp-agenda-dialog-danger .btn { flex: 1; }

    .tp-agenda-dialog-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
    .tp-agenda-workspace { grid-template-columns: 1fr; }

    .tp-agenda-year-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .tp-agenda-year-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
    #sidebar,
    .sidebar {
        flex-basis: 72px !important;
        min-width: 72px !important;
        position: sticky !important;
        width: 72px !important;
    }

    #sidebar .sidebar-text,
    .sidebar .sidebar-text,
    #sidebar h4 span,
    .sidebar h4 span {
        display: none !important;
    }

    #sidebar a,
    .sidebar a {
        font-size: 0 !important;
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #sidebar i,
    .sidebar i {
        font-size: 1.2rem !important;
        margin-right: 0 !important;
    }

    .topbar {
        align-items: flex-start !important;
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 16px !important;
    }

    .topbar.tp-main-topbar {
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 10px;
        padding: 12px 14px !important;
    }

    .tp-topbar-main {
        flex: 1 1 auto;
        gap: 10px;
        max-width: none;
        width: auto !important;
    }

    .tp-topbar-search-input {
        height: 40px !important;
    }

    .tp-topbar-profile-wrap {
        gap: 6px;
    }

    .tp-note-trigger,
    .tp-bell-trigger {
        min-height: 38px;
        min-width: 38px;
    }

    .tp-topbar-profile {
        margin-left: 0;
        min-width: 42px;
    }

    .tp-profile-meta {
        display: none;
    }

    .tp-history-heading {
        width: 100%;
    }

    .tp-sidebar-brand {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .tp-sidebar .logo-img,
    .tp-sidebar-fallback-logo {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    html.tp-mobile-sidebar-open #sidebar,
    html.tp-mobile-sidebar-open .sidebar,
    body.tp-mobile-sidebar-open #sidebar,
    body.tp-mobile-sidebar-open .sidebar {
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.35);
        flex-basis: 204px !important;
        min-width: 204px !important;
        position: fixed !important;
        top: 0 !important;
        width: 204px !important;
        z-index: 1200 !important;
    }

    html.tp-mobile-sidebar-open #sidebar .sidebar-text,
    html.tp-mobile-sidebar-open .sidebar .sidebar-text,
    html.tp-mobile-sidebar-open #sidebar h4 span,
    html.tp-mobile-sidebar-open .sidebar h4 span,
    body.tp-mobile-sidebar-open #sidebar .sidebar-text,
    body.tp-mobile-sidebar-open .sidebar .sidebar-text,
    body.tp-mobile-sidebar-open #sidebar h4 span,
    body.tp-mobile-sidebar-open .sidebar h4 span {
        display: inline !important;
    }

    html.tp-mobile-sidebar-open #sidebar a,
    html.tp-mobile-sidebar-open .sidebar a,
    body.tp-mobile-sidebar-open #sidebar a,
    body.tp-mobile-sidebar-open .sidebar a {
        font-size: 14px !important;
        justify-content: flex-start !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    html.tp-mobile-sidebar-open #sidebar i,
    html.tp-mobile-sidebar-open .sidebar i,
    body.tp-mobile-sidebar-open #sidebar i,
    body.tp-mobile-sidebar-open .sidebar i {
        margin-right: 10px !important;
    }

    html.tp-mobile-sidebar-open .tp-sidebar-brand,
    body.tp-mobile-sidebar-open .tp-sidebar-brand {
        justify-content: flex-start !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    html.tp-mobile-sidebar-open .tp-sidebar .logo-img,
    body.tp-mobile-sidebar-open .tp-sidebar .logo-img,
    html.tp-mobile-sidebar-open .tp-sidebar-fallback-logo,
    body.tp-mobile-sidebar-open .tp-sidebar-fallback-logo {
        margin-left: 0 !important;
        margin-right: 10px !important;
    }

    html.tp-mobile-sidebar-open .tp-sidebar-brand .sidebar-text,
    body.tp-mobile-sidebar-open .tp-sidebar-brand .sidebar-text {
        display: block !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal !important;
        word-break: break-word;
    }

    .tp-settings-nav {
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .tp-settings-panel,
    .tp-settings-card {
        border-radius: 16px;
        padding: 14px;
    }

    .tp-settings-avatar-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .tp-settings-profile-shell {
        grid-template-columns: 1fr;
    }

    .tp-settings-profile-card {
        padding: 14px;
    }

    .tp-avatar-upload-card {
        min-height: 78px;
        padding: 11px 12px;
    }

    .tp-settings-profile-header,
    .tp-settings-profile-inline,
    .tp-settings-profile-inline-card {
        align-items: stretch;
        flex-direction: column;
    }

    .tp-settings-form-grid,
    .tp-settings-stat-grid,
    .tp-settings-alert-preview {
        grid-template-columns: 1fr;
    }

    .tp-settings-form-grid > .tp-settings-identity-compact {
        max-width: none;
    }

    .tp-settings-footer-actions {
        flex-direction: column;
    }

    body.tp-mobile-sidebar-open::before {
        background: rgba(9, 14, 24, 0.34);
        content: "";
        inset: 0;
        position: fixed;
        z-index: 1100;
    }

    .tp-agenda-topbar {
        align-items: center !important;
        flex-wrap: nowrap;
        min-height: 78px !important;
    }

    .tp-agenda-topbar small {
        display: none;
    }

    .tp-agenda-topbar-actions .btn {
        align-items: center;
        display: inline-flex;
        height: 36px;
        justify-content: center;
        padding: 0;
        width: 36px;
    }

    .tp-agenda-topbar-actions .btn span {
        display: none;
    }

    .tp-detail-topbar {
        align-items: center !important;
        flex-wrap: nowrap;
        min-height: 78px !important;
    }

    .tp-detail-topbar-actions {
        align-items: center;
        gap: 8px;
        justify-content: flex-end;
        width: auto;
    }

    .tp-detail-profile-slot {
        flex: 0 0 auto;
    }

    .tp-detail-profile-slot .tp-profile-meta {
        display: none;
    }

    .tp-detail-back {
        align-items: center;
        display: inline-flex;
        flex: 0 0 36px;
        height: 36px;
        justify-content: center;
        padding: 0;
        width: 36px;
    }

    .tp-detail-back span {
        display: none;
    }

    .tp-work-detail-topbar h4 {
        font-size: 1rem;
    }

    .tp-work-detail-topbar .btn {
        align-items: center;
        display: inline-flex;
        height: 36px;
        justify-content: center;
        padding: 0;
        width: 36px;
    }

    .tp-work-detail-topbar .btn {
        font-size: 0;
    }

    .tp-work-detail-topbar .btn i {
        font-size: 0.875rem;
    }

    .container-fluid {
        padding: 1rem !important;
    }

    .dashboard-heading {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .dashboard-heading-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .table-filter-bar {
        justify-content: flex-start !important;
        width: 100%;
    }

    .tp-month-chart {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tp-order-kpis,
    .tp-detail-grid,
    .tp-agenda-grid,
    .tp-profit-grid,
    .tp-quote-summary,
    .tp-context-grid,
    .tp-context-smart-grid,
    .tp-device-memory-panel,
    .tp-exec-grid,
    .tp-tech-guide-grid,
    .tp-tech-guide-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tp-inventory-hero {
        grid-template-columns: 1fr;
    }

    .tp-client-debt-alert {
        align-items: stretch;
        flex-direction: column;
    }

    .tp-exec-actions {
        grid-column: 1 / -1;
    }

    .tp-radar-grid {
        grid-template-columns: 1fr;
    }

    .tp-portal-header,
    .tp-portal-status,
    .tp-portal-box {
        align-items: flex-start;
        flex-direction: column;
    }

    .tp-portal-sections {
        grid-template-columns: 1fr;
    }
}

h5.tp-history-heading {
    line-height: 1.08;
    word-break: break-word;
}

@media (max-width: 540px) {
    .tp-order-kpis,
    .tp-detail-grid,
    .tp-agenda-grid,
    .tp-profit-grid,
    .tp-exec-grid {
        grid-template-columns: 1fr;
    }

    .tp-timeline-step {
        flex-basis: 124px;
    }
}

.modal-header,
.modal-footer {
    padding-left: 1rem;
    padding-right: 1rem;
}

.dropdown-menu {
    border: 1px solid var(--tp-border) !important;
    border-radius: 8px !important;
}

.dataTables_wrapper .dataTables_length {
    display: none !important;
}

.tp-quote-response-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 10px;
}

.tp-portal-response-switch {
    align-items: flex-start;
    background: rgba(21, 118, 248, 0.06);
    border: 1px solid rgba(21, 118, 248, 0.2);
    border-radius: 9px;
    display: flex;
    gap: 10px;
    padding: 11px 13px;
}

.tp-portal-response-switch .form-check-input {
    flex: 0 0 auto;
    margin-left: 0;
    margin-top: 2px;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin-top: 0.7rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--tp-border);
}

.dataTables_wrapper .dataTables_info {
    color: var(--tp-muted);
    font-size: 0.93rem;
    font-weight: 600;
    min-height: 28px;
}

.dataTables_wrapper .dataTables_paginate {
    display: flex;
    justify-content: flex-end;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    margin-bottom: 0;
}

.tp-table-toolbar {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 0.9rem;
    min-height: 42px;
}

.tp-table-toolbar--end {
    justify-content: flex-end;
}

.tp-table-toolbar-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
}

.tp-data-grid thead th {
    padding-right: 1.75rem !important;
    position: relative;
}

.tp-datatable-meta {
    align-items: center;
    border-top: 1px solid var(--tp-border);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-top: 0.7rem;
    min-height: 54px;
    padding-top: 0.75rem;
}

.tp-datatable-meta[data-tp-ready="0"] {
    visibility: hidden;
}

.tp-datatable-info {
    color: var(--tp-muted);
    font-size: 0.93rem;
    font-weight: 600;
    margin: 0;
    min-height: 24px;
}

.tp-datatable-pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.tp-datatable-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tp-datatable-pages .btn,
.tp-datatable-pagination > .btn {
    min-width: 40px;
}

.tp-datatable-gap {
    align-items: center;
    color: var(--tp-muted);
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 700;
    justify-content: center;
    min-width: 24px;
}

.tp-table-length-control {
    align-items: center;
    color: var(--tp-text);
    display: inline-flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    font-size: 0.98rem;
    font-weight: 600;
    gap: 10px;
    margin: 0;
    white-space: nowrap;
}

.tp-table-length-control select {
    margin: 0 !important;
    min-height: 36px;
    min-width: 74px;
    padding-left: 0.7rem;
    padding-right: 2rem;
}

@media (max-width: 700px) {
    .tp-table-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .tp-table-toolbar--end {
        align-items: flex-end;
    }

    .tp-table-toolbar-actions {
        justify-content: space-between;
    }
}

.select2-container {
    width: 100% !important;
}

.select2-container .select2-selection--single {
    min-height: 38px !important;
    border-radius: 6px !important;
    border-color: var(--tp-border-strong) !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    padding-left: 12px !important;
}

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

.select2-dropdown {
    border-color: var(--tp-border-strong) !important;
    border-radius: 6px !important;
}

.tp-alert-panel {
    min-height: 188px;
}

.tp-main-radar {
    background: linear-gradient(180deg, rgba(31, 41, 55, 0.92) 0%, rgba(24, 32, 45, 0.96) 100%);
    border: 1px solid var(--tp-border);
}

body.tp-theme-light .tp-main-radar {
    background: linear-gradient(180deg, rgba(245, 248, 255, 0.98) 0%, rgba(236, 243, 252, 0.98) 100%);
}

.tp-main-radar-head,
.tp-main-alert-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.tp-main-radar-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-main-radar-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    margin-top: 18px;
}

.tp-main-radar-focus-head {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.tp-main-radar-focus,
.tp-main-radar-panel,
.tp-main-radar-kpi {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 10px;
}

.tp-main-radar-focus {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 34%),
        linear-gradient(135deg, rgba(29, 78, 216, 0.14), rgba(15, 23, 42, 0.08)),
        var(--tp-surface-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    min-height: 104px;
    padding: 18px;
}

.tp-main-radar-focus-state {
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 5px 10px;
    text-transform: uppercase;
}

.tp-main-radar-focus-state.is-clear {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.32);
    color: #34d399;
}

.tp-main-radar-focus-state.is-alert {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.34);
    color: #fbbf24;
}

.tp-main-radar-focus small,
.tp-main-radar-kpi small,
.tp-main-radar-item small,
.tp-main-alert-card small {
    color: var(--tp-muted);
}

.tp-main-radar-focus strong {
    color: var(--tp-text);
    font-size: 1.12rem;
}

.tp-main-radar-focus span {
    color: var(--tp-text);
    font-weight: 600;
    line-height: 1.4;
}

.tp-main-radar-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 2px;
}

.tp-main-radar-summary-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 68px;
    padding: 10px 12px;
}

.tp-main-radar-summary-item strong {
    color: var(--tp-text);
    font-size: 1.05rem;
    font-weight: 800;
}

body.tp-theme-light .tp-main-radar-summary-item {
    background: rgba(255, 255, 255, 0.62);
}

.tp-main-radar-kpis {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-main-radar-kpi {
    background:
        linear-gradient(180deg, rgba(59, 130, 246, 0.06), transparent 56%),
        var(--tp-surface-soft);
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    min-height: 88px;
    overflow: hidden;
    padding: 16px;
    position: relative;
    z-index: 1;
}

.tp-main-radar-kpi::before {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.9), rgba(34, 211, 238, 0.45));
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.tp-main-radar-kpi strong {
    color: var(--tp-text);
    font-size: 1.35rem;
    font-weight: 800;
}

.tp-main-alert-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
}

.tp-main-radar-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 42%),
        var(--tp-surface-soft);
    min-height: 100%;
    padding: 16px;
}

.tp-main-radar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.tp-main-radar-item,
.tp-main-alert-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    color: var(--tp-text);
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.tp-main-radar-item {
    align-items: center;
}

.tp-main-radar-item-icon {
    align-items: center;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.28);
    border-radius: 12px;
    color: #60a5fa;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    min-width: 38px;
}

.tp-main-radar-item-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

body.tp-theme-light .tp-main-radar-item,
body.tp-theme-light .tp-main-alert-card {
    background: rgba(255, 255, 255, 0.55);
}

body.tp-theme-light .tp-main-radar-focus {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 34%),
        linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(255, 255, 255, 0.82)),
        var(--tp-surface-soft);
}

body.tp-theme-light .tp-main-radar-kpi {
    background:
        linear-gradient(180deg, rgba(59, 130, 246, 0.05), rgba(255, 255, 255, 0.82) 58%),
        var(--tp-surface-soft);
}

body.tp-theme-light .tp-main-radar-panel {
    background:
        linear-gradient(180deg, rgba(59, 130, 246, 0.04), rgba(255, 255, 255, 0.92) 42%),
        var(--tp-surface-soft);
}

body.tp-theme-dark input[type="date"],
body.tp-theme-dark input[type="datetime-local"],
body.tp-theme-dark input[type="month"] {
    color-scheme: dark;
}

body.tp-theme-light input[type="date"],
body.tp-theme-light input[type="datetime-local"],
body.tp-theme-light input[type="month"] {
    color-scheme: light;
}

.tp-main-radar-item:hover,
.tp-main-alert-card:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.45);
    transform: translateY(-1px);
}

.tp-main-radar-item strong,
.tp-main-alert-card strong {
    color: var(--tp-text);
    display: block;
    margin-bottom: 4px;
}

.tp-main-alert-card {
    flex-direction: column;
}

.tp-main-alert-card.severity-critical {
    border-left: 4px solid #ef4444;
}

.tp-main-alert-card.severity-high {
    border-left: 4px solid #f59e0b;
}

.tp-main-alert-card.severity-medium {
    border-left: 4px solid #3b82f6;
}

.tp-main-alert-empty {
    align-items: center;
    color: var(--tp-muted);
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 700;
    justify-content: center;
    min-height: 82px;
    text-align: center;
}

.tp-main-alert-empty i {
    color: var(--tp-primary);
    font-size: 1.1rem;
}

.tp-dashboard-shortcut-zone {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.tp-dashboard-shortcut-label {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tp-dashboard-shortcut-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tp-dashboard-shortcut-link {
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    color: var(--tp-text-soft);
    display: inline-flex;
    gap: 7px;
    padding: 4px 10px;
    text-decoration: none;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease;
}

.tp-dashboard-shortcut-link i {
    font-size: 12px;
    opacity: 0.88;
}

.tp-dashboard-shortcut-link span {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.tp-dashboard-shortcut-link:hover,
.tp-dashboard-shortcut-link:focus-visible {
    background: rgba(59, 130, 246, 0.09);
    border-color: rgba(96, 165, 250, 0.34);
    color: var(--tp-text);
    transform: translateY(-1px);
}

.tp-dashboard-shortcut-sep {
    color: rgba(148, 163, 184, 0.5);
    font-size: 12px;
    font-weight: 700;
}

body.tp-theme-light:not(.tp-module-templates) .tp-dashboard-shortcut-link {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(191, 179, 160, 0.42);
    color: #50647f;
}

body.tp-theme-light:not(.tp-module-templates) .tp-dashboard-shortcut-link:hover,
body.tp-theme-light:not(.tp-module-templates) .tp-dashboard-shortcut-link:focus-visible {
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.36);
    color: #20344e;
}

body.tp-theme-light:not(.tp-module-templates) .tp-dashboard-shortcut-sep {
    color: rgba(120, 140, 166, 0.72);
}

.tp-alert-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tp-alert-item {
    align-items: center;
    border: 1px solid var(--tp-border);
    border-radius: 6px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-height: 48px;
    padding: 8px 10px;
}

.tp-alert-empty {
    color: var(--tp-muted);
    font-size: 13px;
    font-weight: 700;
    margin: auto 0 0;
    padding-top: 18px;
}

.tp-workspace-card {
    overflow: hidden;
}

.tp-workspace-urgent {
    border-color: rgba(240, 68, 94, 0.75) !important;
}

.tp-workspace-waiting {
    border-color: rgba(247, 194, 31, 0.75) !important;
}

.tp-priority-callout {
    align-items: center;
    border: 1px solid;
    border-left-width: 4px;
    border-radius: 7px;
    display: flex;
    gap: 12px;
    min-height: 58px;
    padding: 10px 12px;
}

.tp-priority-callout strong,
.tp-priority-callout small {
    display: block;
    line-height: 1.25;
}

.tp-priority-callout strong {
    font-size: 15px;
}

.tp-priority-callout small {
    font-weight: 700;
    margin-top: 2px;
}

.tp-priority-icon {
    align-items: center;
    border-radius: 7px;
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.tp-priority-urgent {
    background: rgba(240, 68, 94, 0.1);
    border-color: rgba(240, 68, 94, 0.7);
    color: #b91c1c;
}

.tp-priority-urgent .tp-priority-icon {
    background: #f0445e;
    color: #ffffff;
}

.tp-priority-waiting {
    background: rgba(247, 194, 31, 0.12);
    border-color: rgba(247, 194, 31, 0.75);
    color: #7a4d00;
}

.tp-priority-waiting .tp-priority-icon {
    background: #f7c21f;
    color: #111827;
}

.tp-work-timeline {
    align-items: stretch;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 10px;
    scrollbar-width: thin;
}

.tp-quick-editor {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    padding: 10px;
}

.tp-quick-editor-heading {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 9px;
}

.tp-quick-editor-heading strong,
.tp-quick-editor-heading small {
    display: block;
}

.tp-quick-editor-heading strong {
    color: var(--tp-text);
    font-size: 14px;
}

.tp-quick-editor-heading small {
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
}

.tp-draft-bar {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: auto auto 1fr;
    margin-bottom: 8px;
}

.tp-draft-meta {
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.tp-recent-changes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 24px;
}

.tp-recent-pill {
    background: rgba(21, 118, 248, 0.12);
    border: 1px solid rgba(21, 118, 248, 0.36);
    border-radius: 999px;
    color: var(--tp-primary);
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
}

.tp-recent-empty {
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 700;
}

.tp-smart-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 8px;
}

.tp-smart-item {
    align-items: center;
    background: rgba(243, 181, 27, 0.14);
    border: 1px solid rgba(243, 181, 27, 0.45);
    border-radius: 999px;
    color: #7a4d00;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 7px;
    line-height: 1.2;
    padding: 5px 10px;
}

.tp-smart-item:hover {
    background: rgba(243, 181, 27, 0.22);
    border-color: rgba(243, 181, 27, 0.65);
}

.tp-smart-index {
    align-items: center;
    background: #f3b51b;
    border-radius: 999px;
    color: #111827;
    display: inline-flex;
    flex: 0 0 18px;
    font-size: 11px;
    font-weight: 900;
    height: 18px;
    justify-content: center;
    width: 18px;
}

.tp-smart-ok {
    align-items: center;
    background: rgba(23, 155, 104, 0.14);
    border: 1px solid rgba(23, 155, 104, 0.44);
    border-radius: 999px;
    color: #0f7d54;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 7px;
    line-height: 1.2;
    padding: 5px 10px;
}

.tp-field-warning {
    border-color: #f3b51b !important;
    box-shadow: 0 0 0 0.14rem rgba(243, 181, 27, 0.24) !important;
}

.tp-quick-grid {
    align-items: end;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(180px, 1.35fr) repeat(4, minmax(128px, 1fr)) auto;
}

.tp-quick-status {
    align-items: center;
    display: flex;
    min-height: 31px;
}

.tp-save-state,
.tp-actionbar-note {
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 800;
}

.tp-save-state-dirty {
    color: #e29b12;
}

.tp-floating-notice {
    align-items: center;
    background: rgba(227, 121, 18, 0.95);
    border: 1px solid rgba(255, 206, 136, 0.6);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    color: #111827;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 8px;
    max-width: min(640px, calc(100vw - 26px));
    opacity: 0;
    padding: 10px 12px;
    pointer-events: none;
    position: fixed;
    right: 12px;
    top: 90px;
    transform: translateY(-6px);
    transition: opacity 0.24s ease, transform 0.24s ease;
    z-index: 1300;
}

.tp-floating-notice.show {
    opacity: 1;
    transform: translateY(0);
}

.tp-timeline-step {
    align-items: flex-start;
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    display: flex;
    flex: 0 0 132px;
    flex-direction: column;
    gap: 9px;
    justify-content: space-between;
    min-height: 78px;
    padding: 11px 12px;
    position: relative;
}

.tp-timeline-step + .tp-timeline-step::before {
    background: var(--tp-border-strong);
    content: "";
    height: 2px;
    left: -11px;
    position: absolute;
    top: 24px;
    width: 11px;
}

.tp-timeline-step small {
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
    white-space: normal;
}

.tp-timeline-dot {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.tp-timeline-done {
    background: rgba(22, 161, 99, 0.08);
    border-color: rgba(22, 161, 99, 0.45);
}

.tp-timeline-done + .tp-timeline-step::before {
    background: rgba(22, 161, 99, 0.65);
}

.tp-timeline-done .tp-timeline-dot {
    background: #16a163;
    color: #ffffff;
}

.tp-timeline-current {
    background: rgba(21, 118, 248, 0.12);
    border-color: rgba(21, 118, 248, 0.7);
    box-shadow: 0 0 0 1px rgba(21, 118, 248, 0.18) inset;
}

.tp-timeline-current .tp-timeline-dot {
    background: #1576f8;
    color: #ffffff;
}

.tp-timeline-current small {
    color: var(--tp-primary);
}

.tp-timeline-pending .tp-timeline-dot {
    background: var(--tp-surface-soft);
    color: var(--tp-muted);
}

.tp-checklist-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tp-check-item {
    align-items: center;
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    font-weight: 700;
    gap: 9px;
    min-height: 40px;
    padding: 8px 10px;
}

.tp-check-item input {
    accent-color: var(--tp-primary);
    height: 16px;
    width: 16px;
}

.tp-check-item span {
    font-size: 13px;
    line-height: 1.25;
}

.tp-quality-item:has(input:checked) {
    background: rgba(23, 155, 104, 0.12);
    border-color: rgba(23, 155, 104, 0.55);
}

.tp-qc-summary {
    align-items: center;
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 13px;
}

.tp-qc-summary small {
    color: var(--tp-muted);
    display: block;
    font-weight: 700;
}

.tp-qc-ok {
    background: rgba(23, 155, 104, 0.1);
    border-color: rgba(23, 155, 104, 0.45);
}

.tp-qc-pending {
    background: rgba(243, 181, 27, 0.12);
    border-color: rgba(243, 181, 27, 0.5);
}

.tp-work-tabs {
    border-bottom: 1px solid var(--tp-border);
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.tp-work-timeline,
.tp-work-tabs {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.tp-work-timeline::-webkit-scrollbar,
.tp-work-tabs::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.tp-hscroll-shell {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr auto auto;
    width: 100%;
}

.tp-hscroll-shell .tp-work-tabs,
.tp-hscroll-shell .tp-work-timeline {
    min-width: 0;
}

.tp-hscroll-btn {
    align-items: center;
    background: transparent;
    border: 1px solid var(--tp-border);
    border-radius: 6px;
    color: var(--tp-muted);
    display: none;
    font-size: 12px;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.tp-hscroll-active .tp-hscroll-btn {
    display: inline-flex;
}

.tp-hscroll-btn:hover {
    border-color: var(--tp-primary);
    color: var(--tp-primary);
}

.tp-hscroll-btn:disabled {
    cursor: default;
    opacity: 0.4;
}

body.tp-theme-dark .tp-hscroll-btn {
    background: #252a31;
    border-color: var(--tp-border-strong);
    color: var(--tp-muted);
}

body.tp-theme-dark .tp-hscroll-btn:hover {
    border-color: #58a0ff;
    color: #58a0ff;
}

.tp-work-tabs .nav-link {
    align-items: center;
    border: 1px solid transparent !important;
    border-radius: 6px 6px 0 0 !important;
    color: var(--tp-muted);
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 7px;
    min-height: 40px;
    padding: 8px 12px;
}

.tp-work-tabs .nav-link:hover {
    border-color: var(--tp-border) !important;
    color: var(--tp-primary);
}

.tp-work-tabs .nav-link.active {
    background-color: var(--tp-surface-soft) !important;
    border-color: var(--tp-border) !important;
    border-bottom-color: var(--tp-surface-soft) !important;
    color: var(--tp-primary) !important;
}

.tp-tab-pane {
    min-height: 220px;
    padding-top: 4px;
}

.tp-actionbar {
    background: var(--tp-surface-soft);
    border-top: 1px solid var(--tp-border);
    bottom: 0;
    position: sticky;
    z-index: 5;
}

@media (max-width: 1280px) {
    .tp-quick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tp-ingreso-strip {
        grid-template-columns: 1fr;
    }

    .tp-reception-accessories {
        grid-template-columns: 1fr 1fr;
    }

    .tp-reception-accessories > .form-control {
        grid-column: span 2;
    }

    .tp-finance-totals,
    .tp-fin-summary-grid,
    .tp-fin-editor-grid,
    .tp-fin-two-col,
    .tp-closeout-strip,
    .tp-profit-grid,
    .tp-quote-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tp-closeout-actions {
        grid-column: span 2;
        justify-content: start;
    }

    .tp-fin-workspace-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .tp-reception-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tp-reception-accessories {
        grid-template-columns: 1fr;
    }

    .tp-reception-accessories > .form-control {
        grid-column: auto;
    }

    .tp-reception-details > summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .tp-reception-details > summary span {
        flex-basis: calc(100% - 24px);
        margin-left: 24px;
    }

    .tp-facts-grid,
    .tp-intake-grid,
    .tp-reception-meta {
        grid-template-columns: 1fr;
    }

    .tp-fact-card-wide,
    .tp-intake-card-wide {
        grid-column: span 1;
    }

    .tp-finance-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .tp-fin-workspace-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tp-fin-workspace-link {
        min-height: 58px;
    }

    .tp-finance-header-actions,
    .tp-finance-totals,
    .tp-fin-summary-grid,
    .tp-fin-editor-grid,
    .tp-fin-two-col,
    .tp-closeout-strip,
    .tp-profit-grid,
    .tp-quote-summary,
    .tp-context-smart-grid,
    .tp-device-memory-panel {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .tp-closeout-actions {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .tp-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .tp-fin-stock-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .tp-fin-closeout-grid {
        grid-template-columns: 1fr;
    }

    .tp-fin-section-head-right {
        align-items: flex-start;
    }

    .tp-quick-editor-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tp-draft-bar {
        grid-template-columns: 1fr;
    }

    .tp-quick-grid {
        grid-template-columns: 1fr;
    }
}

body.tp-readonly form input,
body.tp-readonly form select,
body.tp-readonly form textarea {
    opacity: 0.82;
    pointer-events: none;
}

body.tp-readonly [form="trabajoForm"] {
    opacity: 0.82;
    pointer-events: none;
}

body.tp-readonly [form="proyectoForm"] {
    opacity: 0.82;
    pointer-events: none;
}

body.tp-readonly form button[type="submit"],
body.tp-readonly button[form="trabajoForm"],
body.tp-readonly button[form="proyectoForm"],
body.tp-readonly form input[type="file"],
body.tp-readonly a[href="/backup"],
body.tp-readonly a[href="/backup_completo"],
body.tp-readonly a[href="/exportar_excel_trabajos"],
body.tp-readonly a[href^="/delete_"],
body.tp-readonly a[href^="/edit_"],
body.tp-readonly a[href^="/editar_"],
body.tp-readonly a[href^="/complete_job_view/"],
body.tp-readonly form[action^="/delete_"],
body.tp-readonly form[action^="/aplicar_garantia/"],
body.tp-readonly [data-bs-target^="#modalEdit"],
body.tp-readonly [data-bs-target="#modalRepuestosTrabajo"],
body.tp-readonly [data-bs-target="#modalRepuestosPersonal"],
body.tp-readonly [data-bs-target="#modalRepuestos"],
body.tp-readonly .admin-only {
    display: none !important;
}


@media (max-width: 900px) {
    .tp-portal-hero {
        grid-template-columns: 1fr;
    }

    .tp-portal-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topbar {
        align-items: flex-start;
        gap: 12px;
        min-height: 78px;
        padding: 14px 16px !important;
    }

    .card,
    .table-responsive {
        padding: 14px !important;
    }

    .btn {
        white-space: nowrap;
    }
}

@media (max-width: 991px) {
    .tp-topbar-main {
        max-width: none;
    }

    .tp-detail-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .tp-detail-topbar-actions {
        justify-content: space-between;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .tp-portal-mini-grid {
        grid-template-columns: 1fr;
    }

    .tp-profile-meta {
        min-width: 0;
    }

    .tp-profile-name {
        font-size: 13px;
    }

    .tp-profile-role {
        display: none;
    }

    .tp-note-menu,
    .tp-notification-menu {
        width: min(320px, calc(100vw - 24px));
    }

    .tp-profile-menu {
        min-width: 0;
        width: min(216px, calc(100vw - 24px));
    }

    .tp-detail-topbar-actions {
        align-items: center;
        gap: 8px;
    }

    .tp-detail-back span {
        display: none;
    }
}

/* Activity drawer: compact conversations, block notes and operational alerts. */
.tp-activity-hidden-trigger {
    height: 1px;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: -9999px;
    width: 1px;
}

.tp-alert-menu {
    background: var(--tp-surface) !important;
    border-color: var(--tp-border-strong) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 42px rgba(8, 15, 26, 0.22) !important;
    padding: 12px !important;
}

.tp-activity-close.is-primary {
    background: rgba(43, 123, 255, 0.12);
    border-color: rgba(43, 123, 255, 0.3);
    color: var(--tp-primary);
}

.tp-activity-close.is-primary:hover,
.tp-activity-close.is-primary:focus-visible {
    background: var(--tp-primary);
    border-color: var(--tp-primary);
    color: #fff;
}

.tp-user-note-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow: auto;
    padding: 1px 2px 8px;
}

.tp-user-note-card {
    align-items: stretch;
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    display: flex;
    min-height: 70px;
    overflow: hidden;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.tp-user-note-card:hover {
    border-color: rgba(43, 123, 255, 0.35);
    box-shadow: 0 8px 18px rgba(11, 31, 56, 0.08);
    transform: translateY(-1px);
}

.tp-user-note-open {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: flex;
    flex: 1 1 auto;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    text-align: left;
}

.tp-user-note-icon {
    align-items: center;
    background: rgba(43, 123, 255, 0.11);
    border: 1px solid rgba(43, 123, 255, 0.24);
    border-radius: 9px;
    color: var(--tp-primary);
    display: inline-flex;
    flex: 0 0 31px;
    height: 31px;
    justify-content: center;
}

.tp-user-note-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tp-user-note-copy strong {
    color: var(--tp-text);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-user-note-copy small,
.tp-user-note-time {
    color: var(--tp-muted);
    font-size: 10px;
    line-height: 1.35;
}

.tp-user-note-copy small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tp-user-note-time {
    align-self: flex-start;
    flex: 0 0 auto;
    max-width: 76px;
    text-align: right;
}

.tp-user-note-actions {
    align-items: center;
    border-left: 1px solid var(--tp-border);
    display: flex;
    flex: 0 0 auto;
    gap: 3px;
    padding: 7px;
}

.tp-user-note-actions button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--tp-muted);
    display: inline-flex;
    font-size: 11px;
    height: 27px;
    justify-content: center;
    width: 27px;
}

.tp-user-note-actions button:hover,
.tp-user-note-actions button:focus-visible {
    background: rgba(43, 123, 255, 0.1);
    border-color: rgba(43, 123, 255, 0.26);
    color: var(--tp-primary);
    outline: none;
}

.tp-user-note-actions button.is-danger:hover,
.tp-user-note-actions button.is-danger:focus-visible {
    background: rgba(239, 64, 86, 0.1);
    border-color: rgba(239, 64, 86, 0.28);
    color: #ef4056;
}

.tp-user-note-empty,
.tp-alert-empty {
    align-items: center;
    border: 1px dashed var(--tp-border-strong);
    border-radius: 10px;
    color: var(--tp-muted);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    min-height: 160px;
    padding: 24px;
    text-align: center;
}

.tp-user-note-empty i,
.tp-alert-empty i {
    color: var(--tp-primary);
    font-size: 22px;
}

.tp-user-note-empty strong,
.tp-alert-empty strong {
    color: var(--tp-text);
    font-size: 13px;
}

.tp-user-note-empty span,
.tp-alert-empty span {
    font-size: 11px;
    line-height: 1.45;
}

.tp-user-note-editor {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 11px;
    min-height: 0;
}

.tp-user-note-editor[hidden] {
    display: none !important;
}

.tp-user-note-preview {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 11px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.tp-user-note-preview[hidden] {
    display: none !important;
}

.tp-user-note-preview-head {
    align-items: center;
    border-bottom: 1px solid var(--tp-border);
    display: flex;
    gap: 9px;
    padding: 10px;
}

.tp-user-note-preview-head > span {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tp-user-note-preview-head strong {
    color: var(--tp-text);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-user-note-preview-head small {
    color: var(--tp-muted);
    font-size: 10px;
}

.tp-user-note-preview-back,
.tp-user-note-preview-edit {
    align-items: center;
    background: transparent;
    border: 1px solid var(--tp-border-strong);
    border-radius: 8px;
    color: var(--tp-muted);
    display: inline-flex;
    flex: 0 0 29px;
    height: 29px;
    justify-content: center;
    width: 29px;
}

.tp-user-note-preview-edit {
    background: rgba(43, 123, 255, 0.1);
    border-color: rgba(43, 123, 255, 0.28);
    color: var(--tp-primary);
}

.tp-user-note-preview-back:hover,
.tp-user-note-preview-back:focus-visible,
.tp-user-note-preview-edit:hover,
.tp-user-note-preview-edit:focus-visible {
    border-color: var(--tp-primary);
    color: var(--tp-primary);
    outline: none;
}

.tp-user-note-preview-content {
    color: var(--tp-text);
    flex: 1 1 auto;
    font-size: 13px;
    line-height: 1.55;
    overflow: auto;
    padding: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.tp-user-note-editor label {
    color: var(--tp-muted);
    display: flex;
    flex-direction: column;
    font-size: 10px;
    font-weight: 800;
    gap: 5px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tp-user-note-editor textarea {
    flex: 1 1 auto;
    max-height: none;
    min-height: 165px;
    resize: vertical;
}

.tp-user-note-list-footer {
    border-top: 1px solid var(--tp-border);
    margin-top: 4px;
    padding-top: 10px;
}

.tp-user-note-list-footer[hidden] {
    display: none !important;
}

.tp-alert-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 1px 1px 8px;
}

.tp-alert-item {
    align-items: center;
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    color: inherit;
    display: flex;
    gap: 10px;
    padding: 10px;
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease;
}

.tp-alert-item:hover {
    border-color: rgba(43, 123, 255, 0.34);
    color: inherit;
    transform: translateY(-1px);
}

.tp-alert-icon {
    align-items: center;
    background: rgba(43, 123, 255, 0.11);
    border-radius: 9px;
    color: var(--tp-primary);
    display: inline-flex;
    flex: 0 0 33px;
    height: 33px;
    justify-content: center;
}

.tp-alert-item.is-danger .tp-alert-icon { background: rgba(239, 64, 86, 0.13); color: #ef4056; }
.tp-alert-item.is-warning .tp-alert-icon { background: rgba(240, 170, 31, 0.14); color: #c88700; }
.tp-alert-item.is-success .tp-alert-icon { background: rgba(26, 169, 109, 0.13); color: #109260; }

.tp-alert-item > span:nth-child(2) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tp-alert-item strong { color: var(--tp-text); font-size: 12px; }
.tp-alert-item small { color: var(--tp-muted); font-size: 10px; line-height: 1.35; }
.tp-alert-item > i { color: var(--tp-muted); font-size: 10px; }

.tp-activity-source > .tp-chat-menu .tp-note-chat-list {
    gap: 8px;
    padding: 1px 1px 8px;
}

.tp-activity-source > .tp-chat-menu .tp-note-chat-item { gap: 7px; }
.tp-activity-source > .tp-chat-menu .tp-note-chat-avatar { flex-basis: 29px; height: 29px; width: 29px; }

.tp-activity-source > .tp-chat-menu .tp-note-chat-bubble {
    border-radius: 11px;
    gap: 2px;
    padding: 8px 32px 8px 10px;
    position: relative;
}

.tp-activity-source > .tp-chat-menu .tp-note-chat-topline strong { font-size: 11px; }
.tp-activity-source > .tp-chat-menu .tp-note-chat-topline small { font-size: 9px; }
.tp-activity-source > .tp-chat-menu .tp-note-chat-bubble p { font-size: 12px; line-height: 1.4; }

.tp-activity-source > .tp-chat-menu .tp-note-chat-actions {
    margin: 0;
    position: absolute;
    right: 5px;
    top: 5px;
}

.tp-activity-source > .tp-chat-menu .tp-note-chat-action {
    background: transparent;
    border-color: transparent;
    height: 24px;
    opacity: 0.58;
    width: 24px;
}

.tp-activity-source > .tp-chat-menu .tp-note-chat-item:hover .tp-note-chat-action,
.tp-activity-source > .tp-chat-menu .tp-note-chat-action:focus-visible { opacity: 1; }

.tp-note-chat-context-menu {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border-strong);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(8, 15, 26, 0.2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
    padding: 4px;
    position: absolute;
    right: 0;
    top: 27px;
    z-index: 4;
}

.tp-note-chat-context-menu[hidden] { display: none; }

.tp-note-chat-context-menu button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--tp-text);
    display: flex;
    font-size: 11px;
    gap: 7px;
    padding: 7px 8px;
    text-align: left;
    width: 100%;
}

.tp-note-chat-context-menu button:hover,
.tp-note-chat-context-menu button:focus-visible { background: var(--tp-surface-soft); outline: none; }
.tp-note-chat-context-menu button.is-danger { color: #ef4056; }

@media (max-width: 640px) {
    .tp-user-note-time { display: none; }
}

@keyframes tpFadeLiftIn {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tpSoftPulseIn {
    0% {
        opacity: 0;
        transform: scale(0.985);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes tpExecutiveSweepIn {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.992);
        filter: saturate(0.88);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: saturate(1);
    }
}

@keyframes tpFlowColumnIn {
    0% {
        opacity: 0;
        transform: translateY(16px) translateX(-6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}

@keyframes tpInventoryShelfIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.994);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: inherit;
    }
}

@keyframes tpLedgerRiseIn {
    0% {
        opacity: 0;
        transform: translateY(18px);
        filter: brightness(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: brightness(1);
    }
}

.tp-page-header,
.tp-main-radar,
.tp-settings-shell > .tab-content > .tab-pane.show.active,
.tp-order-workzone,
.tp-workpane {
    animation: none !important;
}

.tp-note-menu,
.tp-chat-menu,
.tp-notification-menu,
.tp-profile-menu {
    animation: none !important;
}

.card,
.table-responsive,
.tp-main-radar-focus,
.tp-main-radar-panel,
.tp-main-radar-kpi,
.tp-settings-card,
.tp-settings-storage-card,
.tp-settings-stat-card,
.tp-empty-state {
    animation: none !important;
    will-change: transform, opacity;
}

.btn,
.tp-page-header-actions .btn,
.tp-work-tabs .nav-link,
.tp-order-workzone .tp-work-tabs .nav-link,
.tp-profile-language-item,
.tp-profile-shortcut,
.tp-chat-icon-btn,
.tp-topbar-search-btn {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.btn:hover,
.tp-page-header-actions .btn:hover,
.tp-topbar-search-btn:hover,
.tp-profile-language-item:hover,
.tp-profile-shortcut:hover,
.tp-work-tabs .nav-link:hover,
.tp-order-workzone .tp-work-tabs .nav-link:hover {
    transform: translateY(-1px);
}

.btn:active,
.tp-page-header-actions .btn:active,
.tp-topbar-search-btn:active,
.tp-profile-language-item:active,
.tp-profile-shortcut:active,
.tp-chat-icon-btn:active,
.tp-work-tabs .nav-link:active,
.tp-order-workzone .tp-work-tabs .nav-link:active {
    transform: translateY(0) scale(0.985);
}

.card:hover,
.table-responsive:hover,
.tp-main-radar-focus:hover,
.tp-main-radar-panel:hover,
.tp-main-radar-kpi:hover,
.tp-settings-card:hover,
.tp-settings-storage-card:hover {
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
}

.table-hover tbody tr,
.dataTable tbody tr {
    transition: background-color 0.14s ease, box-shadow 0.14s ease;
}

.tp-topbar-help > .btn,
.tp-topbar-notes > .btn,
.tp-topbar-bell > .btn,
.tp-topbar-profile,
#btnToggleSidebar {
    transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

.tp-topbar-help > .btn:hover,
.tp-topbar-notes > .btn:hover,
.tp-topbar-bell > .btn:hover,
.tp-topbar-profile:hover,
#btnToggleSidebar:hover {
    transform: translateY(-1px);
}

.tp-topbar-help > .btn:active,
.tp-topbar-notes > .btn:active,
.tp-topbar-bell > .btn:active,
.tp-topbar-profile:active,
#btnToggleSidebar:active {
    transform: scale(0.97);
}


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

body[style],
body {
    scrollbar-color: #586176 transparent;
}

body.tp-theme-dark {
    --tp-bg: #111317;
    --tp-surface: #1c1f24;
    --tp-surface-soft: #252a31;
    --tp-border: #353b45;
    --tp-border-strong: #48515e;
    --tp-text: #f1f5f9;
    --tp-muted: #b8c0cc;
    --tp-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
}

body.tp-theme-dark .topbar,
body.tp-theme-dark .card,
body.tp-theme-dark .table-responsive,
body.tp-theme-dark .modal-content {
    background-color: var(--tp-surface) !important;
    color: var(--tp-text) !important;
    border-color: var(--tp-border) !important;
}

body.tp-theme-dark .table-light th,
body.tp-theme-dark .table thead th {
    background-color: var(--tp-surface-soft) !important;
    color: #f8fafc !important;
}

body.tp-theme-dark .table tbody td {
    background-color: var(--tp-surface) !important;
    border-bottom-color: var(--tp-border) !important;
    color: #f1f5f9 !important;
}

body.tp-theme-dark .table-hover tbody tr:hover td {
    background-color: #252b34 !important;
}

body.tp-theme-dark .tp-work-tabs {
    border-bottom-color: var(--tp-border);
}

body.tp-theme-dark .tp-work-tabs .nav-link {
    color: var(--tp-muted) !important;
}

body.tp-theme-dark .tp-work-tabs .nav-link:hover,
body.tp-theme-dark .tp-work-tabs .nav-link.active {
    background-color: var(--tp-surface-soft) !important;
    border-color: var(--tp-border) !important;
    border-bottom-color: var(--tp-surface-soft) !important;
    color: #58a0ff !important;
}

body.tp-theme-dark .form-control,
body.tp-theme-dark .form-select,
body.tp-theme-dark textarea.form-control,
body.tp-theme-dark .dataTables_length select,
body.tp-theme-dark .input-group-text,
body.tp-theme-dark .select2-container .select2-selection--single,
body.tp-theme-dark .select2-dropdown,
body.tp-theme-dark .select2-search__field {
    background-color: #282d34 !important;
    border-color: var(--tp-border-strong) !important;
    color: #ffffff !important;
}

body.tp-theme-dark input[type="file"].form-control::file-selector-button {
    background: linear-gradient(180deg, rgba(84, 170, 255, 0.18), rgba(39, 91, 160, 0.16));
    border-color: rgba(111, 183, 255, 0.28);
    color: #eff6ff;
}

body.tp-theme-dark input[type="file"].form-control:hover::file-selector-button,
body.tp-theme-dark input[type="file"].form-control:focus-within::file-selector-button {
    background: linear-gradient(180deg, rgba(97, 182, 255, 0.26), rgba(45, 112, 190, 0.18));
    border-color: rgba(131, 196, 255, 0.44);
    box-shadow: 0 0 0 0.12rem rgba(56, 149, 255, 0.18);
}

body.tp-theme-dark .form-select,
body.tp-theme-dark .dataTables_length select {
    -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='%23dbe7ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-position: right 0.85rem center !important;
    background-repeat: no-repeat !important;
    background-size: 16px 12px !important;
    padding-right: 2.3rem !important;
}

body.tp-theme-dark .select2-container--default .select2-selection--single .select2-selection__rendered,
body.tp-theme-dark .select2-results__option {
    color: #ffffff !important;
}

body.tp-theme-dark .select2-results__option {
    background-color: #252a31 !important;
}

body.tp-theme-dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--tp-primary) !important;
    color: #ffffff !important;
}

body.tp-theme-dark .tp-alert-item {
    background-color: #20252d;
    border-color: var(--tp-border);
}

body.tp-theme-dark .tp-priority-urgent {
    color: #ffd7dd;
}

body.tp-theme-dark .tp-priority-waiting {
    color: #ffe49a;
}

body.tp-theme-dark .tp-smart-item {
    background: rgba(243, 181, 27, 0.18);
    border-color: rgba(243, 181, 27, 0.52);
    color: #ffd98b;
}

body.tp-theme-dark .tp-smart-item:hover {
    background: rgba(243, 181, 27, 0.25);
    border-color: rgba(243, 181, 27, 0.72);
}

body.tp-theme-dark .tp-smart-index {
    color: #161616;
}

body.tp-theme-dark .tp-smart-ok {
    background: rgba(23, 155, 104, 0.2);
    border-color: rgba(23, 155, 104, 0.56);
    color: #7de2b8;
}

body.tp-theme-dark .tp-field-warning {
    border-color: #f6cb4f !important;
    box-shadow: 0 0 0 0.15rem rgba(246, 203, 79, 0.28) !important;
}

body.tp-theme-dark .tp-client-debt-alert strong {
    color: #ffb4c0;
}

body.tp-theme-dark .tp-client-debt-alert small {
    color: #f2f5f9;
}

body.tp-theme-dark .form-control::placeholder {
    color: #a6afbd !important;
}

body.tp-theme-dark .text-muted,
body.tp-theme-dark .text-secondary {
    color: var(--tp-muted) !important;
}

body.tp-theme-dark .dropdown-menu {
    background-color: #252a31 !important;
    border-color: var(--tp-border-strong) !important;
}

body.tp-theme-dark .dropdown-item {
    color: #e7edf5 !important;
}

body.tp-theme-dark .dropdown-item:hover {
    background-color: #323946 !important;
}

body.tp-theme-dark.tp-module-orders .btn-outline-dark {
    background-color: rgba(51, 65, 85, 0.34) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: #dbe7f5 !important;
}

body.tp-theme-dark.tp-module-orders .btn-outline-dark i {
    color: #aebfd6 !important;
}

body.tp-theme-dark.tp-module-orders .btn-outline-dark:hover,
body.tp-theme-dark.tp-module-orders .btn-outline-dark:focus {
    background-color: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(96, 165, 250, 0.42) !important;
    color: #f8fbff !important;
}

body.tp-theme-dark .page-link {
    background-color: #252a31 !important;
    border-color: var(--tp-border-strong) !important;
    color: #e7edf5 !important;
}

body.tp-theme-dark .page-item.active .page-link {
    background-color: var(--tp-primary) !important;
    border-color: var(--tp-primary) !important;
    color: #ffffff !important;
}

/* OT detail redesign */
.tp-order-hero {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.92));
}

.tp-order-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding: 20px 22px;
    align-items: start;
}

.tp-order-hero-main {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.tp-order-folio-block {
    border: 1px solid rgba(59, 130, 246, 0.28);
    background: rgba(15, 23, 42, 0.54);
    border-radius: 14px;
    padding: 14px 16px;
}

.tp-order-folio-block small {
    display: block;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.tp-order-folio-block strong {
    display: block;
    color: #f8fafc;
    font-size: 24px;
    line-height: 1.1;
}

.tp-order-hero-copy {
    min-width: 0;
}

.tp-order-hero-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.tp-order-hero-heading h5 {
    margin: 0;
    color: #f8fafc;
    font-size: 24px;
    font-weight: 800;
}

.tp-order-hero-subline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    color: #cbd5e1;
    font-size: 13px;
    margin-bottom: 14px;
}

.tp-order-hero-subline span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tp-order-hero-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tp-order-hero-kpis > div {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.44);
    border-radius: 12px;
    padding: 10px 12px;
}

.tp-order-hero-kpis small {
    display: block;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.tp-order-hero-kpis strong {
    color: #f8fafc;
    font-size: 15px;
    line-height: 1.2;
}

.tp-order-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.tp-order-sidebar {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tp-order-sidebar > .card:first-child {
    position: static;
    top: auto;
}

.tp-sidebar-summary {
    display: flex;
    flex-direction: column;
}

.tp-sidebar-summary-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.tp-sidebar-summary-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-sidebar-summary-grid > div,
.tp-sidebar-summary-wide,
.tp-sidebar-summary-note,
.tp-garantia-inline {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    padding: 10px 12px;
}

.tp-sidebar-summary-grid small,
.tp-sidebar-summary-grid strong,
.tp-sidebar-summary-wide small,
.tp-sidebar-summary-wide strong,
.tp-sidebar-summary-note small {
    display: block;
    line-height: 1.2;
}

.tp-sidebar-summary-grid small,
.tp-sidebar-summary-wide small,
.tp-sidebar-summary-note small,
.tp-garantia-inline small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 900;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.tp-sidebar-summary-grid strong,
.tp-sidebar-summary-wide strong {
    color: var(--tp-text);
    font-size: 14px;
    font-weight: 900;
}

.tp-sidebar-summary-note p {
    color: var(--tp-text);
    font-size: 13px;
    margin: 0;
}

.tp-summary-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-reception-chip.is-neutral {
    background: rgba(51, 65, 85, 0.85);
    border-color: rgba(148, 163, 184, 0.26);
    color: var(--tp-text);
}

.tp-garantia-inline {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tp-garantia-inline strong,
.tp-garantia-inline span {
    display: block;
}

.tp-garantia-inline strong {
    font-size: 14px;
    font-weight: 900;
}

.tp-garantia-inline span {
    color: var(--tp-muted);
    font-size: 12px;
}

.tp-garantia-inline.is-active {
    border-color: rgba(20, 166, 100, 0.28);
}

.tp-garantia-inline.is-active strong {
    color: var(--tp-success);
}

.tp-garantia-inline.is-expired {
    border-color: rgba(245, 73, 101, 0.28);
}

.tp-garantia-inline.is-expired strong {
    color: var(--tp-danger);
}

.tp-order-workzone .tp-workspace-card {
    overflow: hidden;
}

.tp-order-header-simple {
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(22, 28, 36, 0.98), rgba(20, 25, 33, 0.98));
    overflow: visible;
    position: relative;
    z-index: 3;
}

.tp-order-header-simple .dropdown-menu {
    z-index: 1080;
}

.tp-order-header-simple-row {
    align-items: center;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 16px 18px;
}

.tp-order-header-simple-main {
    min-width: 0;
}

.tp-order-header-simple-top {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.tp-order-header-simple-top h5 {
    color: #f8fafc;
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tp-order-folio-inline {
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.28);
    border-radius: 999px;
    color: #93c5fd;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
}

.tp-order-header-simple-meta {
    color: #cbd5e1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    font-size: 13px;
}

.tp-order-header-simple-meta span {
    align-items: center;
    display: inline-flex;
    gap: 7px;
}

.tp-order-header-simple-side {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tp-order-inline-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.tp-order-inline-stats span {
    background: rgba(15, 23, 42, 0.34);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    min-width: 118px;
    padding: 8px 10px;
}

.tp-order-inline-stats small {
    color: #94a3b8;
    display: block;
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.tp-order-inline-stats strong {
    color: #f8fafc;
    display: block;
    font-size: 14px;
    line-height: 1.15;
}

.tp-order-inline-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.tp-order-inline-state {
    align-items: center;
    display: flex;
    gap: 7px;
    min-width: 230px;
}

.tp-order-inline-state label {
    color: var(--tp-muted);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 800;
    gap: 4px;
    line-height: 1;
    text-transform: uppercase;
}

.tp-order-inline-state .form-select {
    background-color: var(--tp-surface-soft);
    border-color: var(--tp-border);
    color: var(--tp-text);
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 800;
    min-height: 36px;
}

.tp-order-decisionbar {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 12px;
    padding: 14px 16px;
}

.tp-order-decisionbar-head strong,
.tp-order-decisionbar-head small {
    display: block;
    line-height: 1.25;
}

.tp-order-decisionbar-head strong {
    color: var(--tp-text);
    font-size: 0.95rem;
    font-weight: 900;
}

.tp-order-decisionbar-head small {
    color: var(--tp-muted);
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 3px;
}

.tp-order-decisionbar-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 12px;
}

.tp-order-decision-card {
    align-items: flex-start;
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-left-width: 4px;
    border-radius: 10px;
    color: inherit;
    display: grid;
    gap: 12px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: 12px;
    text-align: left;
    width: 100%;
}

button.tp-order-decision-card {
    cursor: pointer;
}

button.tp-order-decision-card:hover {
    border-color: var(--tp-primary);
}

.tp-order-decision-icon {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.tp-order-decision-copy {
    min-width: 0;
}

.tp-order-decision-copy strong,
.tp-order-decision-copy small {
    display: block;
    line-height: 1.25;
}

.tp-order-decision-copy strong {
    color: var(--tp-text);
    font-size: 0.9rem;
    font-weight: 900;
}

.tp-order-decision-copy small {
    color: var(--tp-muted);
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 4px;
}

.tp-order-decision-cta {
    align-self: center;
    color: var(--tp-primary);
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.tp-order-decision-danger {
    border-left-color: #ef4444;
}

.tp-order-decision-danger .tp-order-decision-icon {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.tp-order-decision-warning {
    border-left-color: #f59e0b;
}

.tp-order-decision-warning .tp-order-decision-icon {
    background: rgba(245, 158, 11, 0.14);
    color: #f59e0b;
}

.tp-order-decision-info {
    border-left-color: var(--tp-primary);
}

.tp-order-decision-info .tp-order-decision-icon {
    background: rgba(37, 99, 235, 0.12);
    color: var(--tp-primary);
}

.tp-order-decision-success {
    border-left-color: #16a34a;
}

.tp-order-decision-success .tp-order-decision-icon {
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
}

.tp-workrail-bar {
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding-bottom: 12px;
}

.tp-workrail-title span {
    color: #f8fafc;
    display: block;
    font-size: 14px;
    font-weight: 800;
}

.tp-workrail-title small {
    color: #94a3b8;
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-top: 3px;
}

.tp-workrail-status {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.tp-order-workzone .tp-work-tabs {
    gap: 6px;
    border-bottom: none;
}

.tp-order-microbar {
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    padding: 14px 16px;
}

.tp-order-microbar-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tp-order-microbar-status,
.tp-order-microbar-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tp-order-microbar-chip {
    align-items: center;
    background: rgba(37, 99, 235, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.32);
    border-radius: 999px;
    color: #93c5fd;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    gap: 6px;
    padding: 5px 10px;
    text-transform: uppercase;
}

.tp-order-microbar-fields {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(180px, 1.35fr) repeat(4, minmax(120px, 1fr)) auto;
}

.tp-order-microbar .tp-recent-changes {
    min-height: 18px;
}

.tp-smart-checklist-compact {
    margin-bottom: 0;
    margin-top: 6px;
}

.tp-work-tabs-stage {
    border-bottom: none;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 4px;
}

.tp-work-tabs-stage .nav-item {
    min-width: 0;
}

.tp-order-workzone .tp-work-tabs .nav-link {
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.32);
    border-radius: 12px;
    font-weight: 700;
    min-height: 70px;
    min-width: 168px;
    padding: 11px 13px;
    position: relative;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    white-space: normal;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    width: 100%;
}

.tp-order-workzone .tp-work-tabs .nav-link.active {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.2), rgba(30, 41, 59, 0.94));
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.12), 0 8px 24px rgba(2, 6, 23, 0.18);
    color: #f8fafc;
}

.tp-order-workzone .tp-work-tabs .nav-link:hover {
    border-color: rgba(96, 165, 250, 0.48);
    color: #f8fafc;
    transform: translateY(-1px);
}

.tp-order-workzone .tp-work-tabs .nav-link i {
    font-size: 16px;
}

.tp-stage-num {
    align-items: center;
    background: rgba(59, 130, 246, 0.16);
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: 10px;
    color: #93c5fd;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    min-width: 34px;
    padding: 0 8px;
}

.tp-order-workzone .tp-work-tabs .nav-link.active .tp-stage-num {
    background: rgba(59, 130, 246, 0.28);
    border-color: rgba(147, 197, 253, 0.38);
    color: #dbeafe;
}

.tp-stage-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tp-stage-copy strong {
    color: #f8fafc;
    display: block;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.1;
}

.tp-stage-copy small {
    color: #94a3b8;
    display: block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
}

.tp-order-workzone .tp-tab-pane h6 {
    font-size: 15px;
}

body.tp-theme-light {
    --tp-muted: #55697f;
}

body.tp-theme-light .text-muted {
    color: var(--tp-muted) !important;
}

body.tp-theme-light .tp-order-header-simple {
    background: linear-gradient(180deg, #fbf7ef, #f5ede0);
    border-color: var(--tp-border);
}

body.tp-theme-light .tp-order-hero {
    background: linear-gradient(180deg, #fbf7ef, #f5ede0);
    border-color: var(--tp-border);
}

body.tp-theme-light .tp-order-header-simple-top h5,
body.tp-theme-light .tp-order-hero-heading h5,
body.tp-theme-light .tp-order-inline-stats strong,
body.tp-theme-light .tp-order-hero-kpis strong,
body.tp-theme-light .tp-workrail-title span,
body.tp-theme-light .tp-stage-copy strong {
    color: var(--tp-text);
}

body.tp-theme-light .tp-order-header-simple-meta,
body.tp-theme-light .tp-order-hero-subline,
body.tp-theme-light .tp-order-inline-stats small,
body.tp-theme-light .tp-order-hero-kpis small,
body.tp-theme-light .tp-workrail-title small,
body.tp-theme-light .tp-stage-copy small,
body.tp-theme-light .tp-save-state,
body.tp-theme-light .tp-actionbar-note {
    color: var(--tp-muted);
}

body.tp-theme-light .tp-order-folio-inline {
    background: rgba(21, 118, 248, 0.08);
    border-color: rgba(21, 118, 248, 0.24);
    color: #2e6fd3;
}

body.tp-theme-light .tp-order-folio-block {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(21, 118, 248, 0.16);
}

body.tp-theme-light .tp-order-folio-block small {
    color: var(--tp-muted);
}

body.tp-theme-light .tp-order-folio-block strong {
    color: var(--tp-text);
}

body.tp-theme-light .tp-order-inline-stats span {
    background: rgba(255, 255, 255, 0.76);
    border-color: rgba(148, 163, 184, 0.22);
}

body.tp-theme-light .tp-order-hero-kpis > div {
    background: rgba(255, 255, 255, 0.76);
    border-color: rgba(148, 163, 184, 0.22);
}

body.tp-theme-light .tp-order-microbar {
    background: var(--tp-surface-soft);
    border-color: var(--tp-border);
}

body.tp-theme-light .tp-order-microbar-chip {
    background: rgba(21, 118, 248, 0.08);
    border-color: rgba(21, 118, 248, 0.22);
    color: #2e6fd3;
}

body.tp-theme-light .tp-order-workzone .tp-work-tabs .nav-link {
    background: rgba(233, 225, 212, 0.82);
    border-color: rgba(204, 191, 174, 0.9);
    color: var(--tp-text);
}

body.tp-theme-light .tp-order-workzone .tp-work-tabs .nav-link.active {
    background: linear-gradient(180deg, rgba(21, 118, 248, 0.14), rgba(255, 255, 255, 0.92));
    border-color: rgba(21, 118, 248, 0.42);
    box-shadow: inset 0 0 0 1px rgba(21, 118, 248, 0.08), 0 8px 20px rgba(15, 23, 42, 0.08);
    color: var(--tp-text);
}

body.tp-theme-light .tp-order-workzone .tp-work-tabs .nav-link:hover {
    border-color: rgba(21, 118, 248, 0.36);
    color: var(--tp-text);
}

body.tp-theme-light .tp-stage-num {
    background: rgba(21, 118, 248, 0.1);
    border-color: rgba(21, 118, 248, 0.24);
    color: #2e6fd3;
}

body.tp-theme-light .tp-order-workzone .tp-work-tabs .nav-link.active .tp-stage-num {
    background: rgba(21, 118, 248, 0.16);
    border-color: rgba(21, 118, 248, 0.32);
    color: #1e5fd0;
}

body.tp-theme-light .tp-reception-chip.is-neutral {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.28);
    color: var(--tp-text);
}

body.tp-theme-light .tp-profile-storage-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 242, 232, 0.96));
    border-color: rgba(205, 188, 160, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body.tp-theme-light .tp-profile-contact-card {
    background: linear-gradient(135deg, rgba(231, 242, 255, 0.96), rgba(247, 241, 231, 0.98));
    border-color: rgba(119, 164, 219, 0.42);
}

body.tp-theme-light .tp-profile-contact-card:hover,
body.tp-theme-light .tp-profile-contact-card:focus-visible {
    background: linear-gradient(135deg, rgba(218, 236, 255, 1), rgba(242, 234, 219, 1));
    border-color: rgba(67, 129, 204, 0.58);
}

body.tp-theme-light .tp-profile-contact-icon {
    background: rgba(78, 151, 233, 0.12);
    border-color: rgba(78, 151, 233, 0.26);
    color: #2875c4;
}

body.tp-theme-light .tp-profile-contact-copy strong {
    color: #1e293b;
}

body.tp-theme-light .tp-profile-contact-copy small {
    color: #5f6f83;
}

body.tp-theme-light .tp-profile-contact-end small {
    color: #5f6f83;
}

body.tp-theme-light .tp-profile-contact-end i {
    color: #397ac1;
}

body.tp-theme-light .tp-profile-contact-badge {
    background: rgba(27, 160, 111, 0.12);
    border-color: rgba(27, 160, 111, 0.22);
    color: #137651;
}

body.tp-theme-light .tp-profile-contact-card-static:hover,
body.tp-theme-light .tp-profile-contact-card-static:focus-visible {
    background: linear-gradient(135deg, rgba(231, 242, 255, 0.96), rgba(247, 241, 231, 0.98));
    border-color: rgba(119, 164, 219, 0.42);
}

body.tp-theme-light .tp-profile-support-version {
    background: linear-gradient(135deg, rgba(238, 247, 255, 0.92), rgba(251, 247, 239, 0.96));
    border-color: rgba(148, 181, 219, 0.44);
}

body.tp-theme-light .tp-profile-support-version-icon {
    background: rgba(78, 151, 233, 0.11);
    border-color: rgba(78, 151, 233, 0.24);
    color: #2875c4;
}

body.tp-theme-light .tp-profile-support-version-copy strong {
    color: #1e293b;
}

body.tp-theme-light .tp-profile-support-version-copy small {
    color: #5f6f83;
}

body.tp-theme-light .tp-profile-storage-drive-icon {
    background: linear-gradient(180deg, rgba(232, 241, 255, 0.95), rgba(220, 233, 252, 0.96));
    border-color: rgba(112, 156, 224, 0.34);
    color: #4b86d9;
}

body.tp-theme-light .tp-profile-storage-drive-copy strong {
    color: #1e293b;
}

body.tp-theme-light .tp-profile-storage-drive-copy small {
    color: #5f6f83;
}

body.tp-theme-light .tp-profile-storage-plan-chip,
body.tp-theme-light .tp-settings-plan-chip {
    background: linear-gradient(180deg, rgba(222, 238, 255, 0.92), rgba(211, 232, 255, 0.92));
    border-color: rgba(110, 159, 230, 0.3);
    color: #4b7fd1;
}

body.tp-theme-light .tp-profile-storage-pill.is-used {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(183, 164, 130, 0.35);
    color: #2b3442;
}

body.tp-theme-light .tp-profile-storage-pill.is-free {
    background: linear-gradient(180deg, rgba(230, 248, 237, 0.95), rgba(220, 243, 230, 0.95));
    border: 1px solid rgba(111, 190, 139, 0.36);
    color: #2d8a55;
}

body.tp-theme-light .tp-profile-storage-inline {
    gap: 10px;
}

body.tp-theme-light .tp-profile-storage-card .tp-settings-capacity-bar {
    background: rgba(179, 163, 135, 0.18);
}

body.tp-theme-light .tp-profile-storage-card .tp-settings-capacity-bar span.is-normal {
    background: linear-gradient(90deg, #4ea0ff, #79c8ff);
}

body.tp-theme-light .tp-profile-storage-card .tp-settings-capacity-bar span.is-warning {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

body.tp-theme-light .tp-profile-storage-card .tp-settings-capacity-bar span.is-danger {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

body.tp-theme-light .tp-sidebar-summary-head h6,
body.tp-theme-light .tp-page-header-sub,
body.tp-theme-light .tp-detail-stat small,
body.tp-theme-light .tp-order-decisionbar-head small,
body.tp-theme-light .tp-order-decision-copy small {
    color: var(--tp-muted) !important;
}

@media (min-width: 1600px) {
    .tp-order-hero-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1399.98px) {
    .tp-order-sidebar > .card:first-child {
        position: static;
    }
}

@media (max-width: 1199.98px) {
    .tp-order-header-simple-row {
        align-items: flex-start;
        grid-template-columns: minmax(0, 1fr);
    }

    .tp-order-header-simple-side {
        align-items: stretch;
        width: 100%;
    }

    .tp-order-inline-stats {
        justify-content: flex-start;
    }

    .tp-order-inline-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 991.98px) {
    .tp-main-radar-grid,
    .tp-main-alert-grid {
        grid-template-columns: 1fr;
    }

    .tp-main-radar-summary {
        grid-template-columns: 1fr;
    }

    .tp-order-hero-inner,
    .tp-order-hero-main {
        grid-template-columns: 1fr;
    }

    .tp-order-hero-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tp-order-hero-actions {
        justify-content: stretch;
    }

    .tp-order-hero-actions > * {
        flex: 1 1 calc(50% - 8px);
    }

    .tp-order-hero-actions .dropdown {
        display: flex;
    }

    .tp-order-hero-actions .dropdown > .btn {
        width: 100%;
    }

    .tp-order-header-simple-row,
    .tp-order-microbar-head {
        align-items: flex-start;
    }

    .tp-order-header-simple-side,
    .tp-order-inline-actions,
    .tp-order-inline-stats,
    .tp-workrail-bar {
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
    }

    .tp-workrail-bar {
        flex-direction: column;
    }

    .tp-order-decisionbar-grid {
        grid-template-columns: 1fr;
    }

    .tp-workrail-status {
        justify-content: flex-start;
        width: 100%;
    }

    .tp-sidebar-summary-grid {
        grid-template-columns: 1fr;
    }

    .tp-garantia-inline {
        align-items: flex-start;
        flex-direction: column;
    }

    .tp-order-microbar-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tp-order-workzone .tp-work-tabs .nav-link {
        min-height: 62px;
        min-width: 150px;
        padding: 10px 12px;
    }

    .tp-work-tabs-stage {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .tp-main-radar-head,
    .tp-main-alert-head {
        flex-direction: column;
    }

    .tp-main-radar-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .tp-order-hero-inner {
        padding: 16px;
    }

    .tp-order-folio-block strong {
        font-size: 21px;
    }

    .tp-order-hero-heading h5 {
        font-size: 20px;
    }

    .tp-order-hero-kpis {
        grid-template-columns: 1fr;
    }

    .tp-order-hero-actions > * {
        flex: 1 1 100%;
    }

    .tp-order-microbar {
        padding: 12px;
    }

    .tp-order-header-simple-row {
        padding: 14px;
    }

    .tp-order-header-simple-top {
        gap: 8px;
    }

    .tp-order-header-simple-top h5 {
        flex: 1 1 100%;
        font-size: 17px;
    }

    .tp-order-header-simple-meta,
    .tp-order-authorship {
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr;
    }

    .tp-order-inline-stats {
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr;
    }

    .tp-order-inline-stats span,
    .tp-order-inline-actions > *,
    .tp-order-inline-actions .dropdown {
        width: 100%;
    }

    .tp-order-inline-state {
        align-items: flex-start;
        flex-direction: column;
        min-width: 0;
        width: 100%;
    }

    .tp-order-inline-state .form-select {
        width: 100%;
    }

    .tp-order-inline-actions .dropdown > .btn {
        width: 100%;
    }

    .tp-order-microbar-fields {
        grid-template-columns: 1fr;
    }

    .tp-order-workzone .tp-work-tabs {
        gap: 8px;
    }

    .tp-order-workzone .tp-work-tabs .nav-link {
        min-height: 58px;
        min-width: 0;
        padding: 10px 11px;
        gap: 10px;
    }

    .tp-work-tabs-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tp-tech-guide-grid {
        grid-template-columns: 1fr;
    }

    .tp-tech-guide-stage {
        grid-template-columns: 1fr;
    }

    .tp-stage-copy strong {
        font-size: 13px;
    }

    .tp-stage-copy small {
        font-size: 10px;
    }
}

@media (max-width: 420px) {
    .tp-main-radar-kpis {
        grid-template-columns: 1fr;
    }

    .tp-work-tabs-stage {
        grid-template-columns: 1fr;
    }
}

.tp-log-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 10px;
}

.tp-log-tile {
    align-items: center;
    border: 1px solid rgba(132, 145, 166, 0.22);
    border-radius: 10px;
    color: inherit;
    display: flex;
    gap: 10px;
    min-height: 62px;
    padding: 10px 12px;
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.tp-log-tile:hover {
    border-color: #1576f8;
    box-shadow: 0 10px 22px rgba(21, 118, 248, 0.10);
    color: inherit;
    transform: translateY(-1px);
}

.tp-log-tile.active {
    border-color: #1576f8;
    box-shadow: inset 0 0 0 1px #1576f8;
}

.tp-log-icon {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.tp-log-detail {
    display: grid;
    gap: 6px;
    max-width: 900px;
    white-space: normal;
}

.tp-log-action {
    color: #7f8ca3;
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.tp-history-date {
    min-width: 136px;
    white-space: nowrap;
}

.tp-history-record {
    min-width: 76px;
}

.tp-history-record strong,
.tp-history-record small {
    display: block;
}

.tp-history-record small {
    color: var(--tp-muted);
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

.tp-log-actor {
    align-items: center;
    color: var(--tp-muted);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
}

.tp-log-actor i {
    color: var(--tp-primary);
}

.tp-log-summary-copy {
    color: var(--tp-text);
    font-size: 13px;
}

.tp-log-changes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tp-log-change {
    align-items: center;
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    color: var(--tp-text);
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 5px;
    line-height: 1.2;
    padding: 5px 8px;
}

.tp-log-change small {
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tp-log-change strong {
    color: var(--tp-text);
    font-weight: 800;
}

.tp-log-change em {
    color: var(--tp-muted);
    font-size: 11px;
    font-style: normal;
    text-decoration: line-through;
}

.tp-log-change > i {
    color: var(--tp-primary);
    font-size: 10px;
}

.tp-log-technical {
    margin-top: 1px;
}

.tp-log-technical summary {
    color: var(--tp-muted);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    list-style: none;
    width: fit-content;
}

.tp-log-technical summary::-webkit-details-marker {
    display: none;
}

.tp-log-technical summary::before {
    content: '+';
    display: inline-block;
    font-size: 13px;
    margin-right: 5px;
}

.tp-log-technical[open] summary::before {
    content: '-';
}

.tp-log-technical code {
    background: var(--tp-surface-soft);
    border-left: 2px solid var(--tp-border);
    color: var(--tp-muted);
    display: block;
    font-family: inherit;
    font-size: 11px;
    margin-top: 6px;
    overflow-wrap: anywhere;
    padding: 6px 8px;
    white-space: normal;
}

.tp-history-toolbar {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.tp-history-heading {
    max-width: 520px;
    min-width: 0;
}

.tp-history-filters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    min-width: min(100%, 620px);
}

.tp-history-module-label {
    white-space: nowrap;
}

.tp-history-reading-guide {
    align-items: center;
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    color: var(--tp-muted);
    display: flex;
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
    margin: 0 0 14px;
    padding: 9px 11px;
}

.tp-history-reading-guide i {
    color: var(--tp-primary);
    font-size: 14px;
}

@media (max-width: 1200px) {
    .tp-history-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .tp-history-filters {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
        min-width: 0;
        width: 100%;
    }

    .tp-history-heading {
        max-width: none;
        width: 100%;
    }

    .tp-history-filters .form-control,
    .tp-history-filters .form-select,
    .tp-history-filters .btn {
        width: 100% !important;
    }

    .tp-history-filters > * {
        min-width: 0 !important;
    }

    .tp-history-module-label {
        display: block;
        margin: 0;
    }

    .tp-log-summary {
        grid-template-columns: 1fr;
    }
}

body.tp-theme-light:not(.tp-module-templates) .tp-page-header,
body.tp-theme-light:not(.tp-module-templates) .dashboard-heading {
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 36%),
        radial-gradient(circle at bottom left, rgba(245, 158, 11, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 236, 223, 0.95)) !important;
    border: 1px solid #d8ccba !important;
    border-radius: 24px !important;
    box-shadow:
        0 18px 34px rgba(143, 117, 76, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    margin-bottom: 1.35rem;
    padding: 1.1rem 1.25rem !important;
    position: relative;
}

body.tp-theme-light:not(.tp-module-templates) .card,
body.tp-theme-light:not(.tp-module-templates) .table-responsive,
body.tp-theme-light:not(.tp-module-templates) .tp-table-toolbar,
body.tp-theme-light:not(.tp-module-templates) .tp-orders-filter-toolbar,
body.tp-theme-light:not(.tp-module-templates) .tp-fin-summary-card,
body.tp-theme-light:not(.tp-module-templates) .tp-main-radar-focus,
body.tp-theme-light:not(.tp-module-templates) .tp-main-radar-panel,
body.tp-theme-light:not(.tp-module-templates) .tp-main-radar-kpi,
body.tp-theme-light:not(.tp-module-templates) .tp-main-radar-item,
body.tp-theme-light:not(.tp-module-templates) .tp-main-alert-card,
body.tp-theme-light:not(.tp-module-templates) .tp-dashboard-flow-card,
body.tp-theme-light:not(.tp-module-templates) .tp-log-tile,
body.tp-theme-light:not(.tp-module-templates) .tp-closeout-card {
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(243, 247, 255, 0.95)) !important;
    border-color: rgba(191, 179, 160, 0.32) !important;
    border-radius: 20px !important;
    box-shadow:
        0 16px 30px rgba(123, 99, 62, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body.tp-theme-light:not(.tp-module-templates) .tp-table-toolbar,
body.tp-theme-light:not(.tp-module-templates) .tp-orders-filter-toolbar {
    padding: 0.9rem 1rem;
}

body.tp-theme-light:not(.tp-module-templates) .tp-page-header-sub,
body.tp-theme-light:not(.tp-module-templates) .dashboard-heading small {
    color: #58708f !important;
}

body.tp-theme-dark:not(.tp-module-templates) .tp-page-header,
body.tp-theme-dark:not(.tp-module-templates) .dashboard-heading {
    background:
        radial-gradient(circle at top right, rgba(33, 150, 243, 0.14), transparent 34%),
        radial-gradient(circle at bottom left, rgba(14, 165, 233, 0.10), transparent 40%),
        linear-gradient(180deg, rgba(27, 35, 50, 0.98), rgba(31, 44, 66, 0.96)) !important;
    border: 1px solid rgba(91, 124, 176, 0.22) !important;
    border-radius: 24px !important;
    box-shadow:
        0 22px 44px rgba(5, 10, 20, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    margin-bottom: 1.35rem;
    padding: 1.1rem 1.25rem !important;
    position: relative;
}

body.tp-theme-dark:not(.tp-module-templates) .card,
body.tp-theme-dark:not(.tp-module-templates) .table-responsive,
body.tp-theme-dark:not(.tp-module-templates) .tp-table-toolbar,
body.tp-theme-dark:not(.tp-module-templates) .tp-orders-filter-toolbar,
body.tp-theme-dark:not(.tp-module-templates) .tp-fin-summary-card,
body.tp-theme-dark:not(.tp-module-templates) .tp-main-radar-focus,
body.tp-theme-dark:not(.tp-module-templates) .tp-main-radar-panel,
body.tp-theme-dark:not(.tp-module-templates) .tp-main-radar-kpi,
body.tp-theme-dark:not(.tp-module-templates) .tp-main-radar-item,
body.tp-theme-dark:not(.tp-module-templates) .tp-main-alert-card,
body.tp-theme-dark:not(.tp-module-templates) .tp-dashboard-flow-card,
body.tp-theme-dark:not(.tp-module-templates) .tp-log-tile,
body.tp-theme-dark:not(.tp-module-templates) .tp-closeout-card {
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.10), transparent 28%),
        linear-gradient(180deg, rgba(24, 33, 49, 0.98), rgba(29, 42, 63, 0.97)) !important;
    border-color: rgba(91, 124, 176, 0.18) !important;
    border-radius: 20px !important;
    box-shadow:
        0 18px 40px rgba(5, 10, 20, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}

body.tp-theme-dark:not(.tp-module-templates) .tp-table-toolbar,
body.tp-theme-dark:not(.tp-module-templates) .tp-orders-filter-toolbar {
    padding: 0.9rem 1rem;
}

body.tp-theme-dark:not(.tp-module-templates) .tp-page-header-sub,
body.tp-theme-dark:not(.tp-module-templates) .dashboard-heading small {
    color: #a6b8d4 !important;
}

/* Shared visual foundation: restrained surfaces, one geometry and a calmer brand accent. */
:root {
    --tp-primary: #2f6fa8;
    --tp-primary-strong: #245b8d;
    --tp-radius: 10px;
    --tp-radius-lg: 14px;
    --tp-shadow: 0 10px 26px rgba(16, 24, 40, 0.10);
}

body.tp-theme-light {
    --tp-bg: #f5f2ec;
    --tp-surface: #fffdfa;
    --tp-surface-soft: #f7f4ee;
    --tp-border: #ded8cf;
    --tp-border-strong: #c9c1b5;
    --tp-text: #1c2938;
    --tp-muted: #647085;
    --tp-sidebar: #eff1f0;
    --tp-sidebar-active: #d9e5ef;
    --tp-topbar-surface: rgba(255, 253, 250, 0.94);
    --tp-topbar-border: rgba(206, 198, 187, 0.76);
}

body.tp-theme-dark {
    --tp-bg: #10151d;
    --tp-surface: #18212c;
    --tp-surface-soft: #202b38;
    --tp-border: #314052;
    --tp-border-strong: #45566b;
    --tp-text: #edf3f8;
    --tp-muted: #aab9c9;
    --tp-sidebar: #1b2633;
    --tp-sidebar-active: #31445a;
    --tp-topbar-surface: rgba(20, 27, 36, 0.94);
    --tp-topbar-border: rgba(65, 82, 103, 0.72);
}

body {
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.tp-page-header-title,
.dashboard-heading {
    letter-spacing: -0.018em;
}

body.tp-theme-light #sidebar,
body.tp-theme-light .sidebar {
    background: var(--tp-sidebar) !important;
    border-right-color: rgba(178, 190, 196, 0.64) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.72);
}

body.tp-theme-dark #sidebar,
body.tp-theme-dark .sidebar {
    background: var(--tp-sidebar) !important;
    border-right: 1px solid rgba(85, 106, 130, 0.26) !important;
}

.tp-sidebar-brand,
body.tp-theme-light .tp-sidebar-brand,
body.tp-theme-dark .tp-sidebar-brand {
    background: var(--tp-surface) !important;
    border-color: var(--tp-border) !important;
    border-radius: var(--tp-radius-lg) !important;
    box-shadow: 0 7px 16px rgba(19, 29, 43, 0.08) !important;
}

body.tp-theme-dark .tp-sidebar-brand .sidebar-text {
    color: var(--tp-text) !important;
    text-shadow: none !important;
}

.tp-sidebar-group {
    display: block;
    margin: 1px 8px;
    position: relative;
}

.tp-sidebar-group > summary {
    align-items: center;
    border-radius: 10px;
    color: #c9d3df;
    cursor: pointer;
    display: flex;
    font-size: 15px;
    font-weight: 650;
    gap: 8px;
    justify-content: space-between;
    line-height: 1.1;
    list-style: none;
    min-height: 43px;
    padding: 10px 10px;
    user-select: none;
}

.tp-sidebar-group > summary::-webkit-details-marker {
    display: none;
}

.tp-sidebar-group-label {
    align-items: center;
    display: flex;
    min-width: 0;
}

.tp-sidebar-group-label > i {
    flex: 0 0 20px;
    font-size: 16px;
    margin-right: 8px;
    text-align: center;
    width: 20px;
}

.tp-sidebar-group-caret {
    color: #8da1b8;
    font-size: 11px !important;
    margin: 0 !important;
    transition: transform 0.16s ease;
}

.tp-sidebar-group[open] > summary,
.tp-sidebar-group > summary:hover,
.tp-sidebar-group.is-active > summary {
    background: rgba(88, 119, 153, 0.20);
    color: #ffffff;
}

.tp-sidebar-group[open] > summary .tp-sidebar-group-caret {
    transform: rotate(180deg);
}

.tp-sidebar-subnav {
    border-left: 1px solid rgba(130, 154, 181, 0.32);
    display: grid;
    gap: 1px;
    margin: 2px 4px 7px 20px;
    padding: 2px 0 2px 8px;
}

#sidebar .tp-sidebar-subnav a,
.sidebar .tp-sidebar-subnav a {
    background: transparent !important;
    border-radius: 8px;
    color: #aebed0 !important;
    font-size: 12px;
    font-weight: 650;
    gap: 5px;
    margin: 0;
    min-height: 32px;
    padding: 7px 8px;
}

#sidebar .tp-sidebar-subnav a i,
.sidebar .tp-sidebar-subnav a i {
    color: inherit;
    flex-basis: 16px;
    font-size: 12px;
    margin-right: 4px;
    width: 16px;
}

#sidebar .tp-sidebar-subnav a:hover,
#sidebar .tp-sidebar-subnav a.active,
.sidebar .tp-sidebar-subnav a:hover,
.sidebar .tp-sidebar-subnav a.active {
    background: rgba(92, 130, 168, 0.26) !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

body.tp-theme-light .tp-sidebar-group > summary {
    color: #3e526b;
}

body.tp-theme-light .tp-sidebar-group[open] > summary,
body.tp-theme-light .tp-sidebar-group > summary:hover,
body.tp-theme-light .tp-sidebar-group.is-active > summary {
    background: #dce7f0;
    color: #203c56;
}

body.tp-theme-light .tp-sidebar-group-caret {
    color: #5f748b;
}

body.tp-theme-light .tp-sidebar-subnav {
    border-left-color: rgba(105, 128, 148, 0.32);
}

body.tp-theme-light #sidebar .tp-sidebar-subnav a,
body.tp-theme-light .sidebar .tp-sidebar-subnav a {
    color: #5b6d80 !important;
}

body.tp-theme-light #sidebar .tp-sidebar-subnav a:hover,
body.tp-theme-light #sidebar .tp-sidebar-subnav a.active,
body.tp-theme-light .sidebar .tp-sidebar-subnav a:hover,
body.tp-theme-light .sidebar .tp-sidebar-subnav a.active {
    background: #cbddea !important;
    color: #193c5b !important;
}

html.tp-sidebar-collapsed .tp-sidebar-group > summary,
body.sidebar-collapsed .tp-sidebar-group > summary,
#sidebar.collapsed .tp-sidebar-group > summary,
.sidebar.collapsed .tp-sidebar-group > summary {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

html.tp-sidebar-collapsed .tp-sidebar-group .sidebar-text,
body.sidebar-collapsed .tp-sidebar-group .sidebar-text,
#sidebar.collapsed .tp-sidebar-group .sidebar-text,
.sidebar.collapsed .tp-sidebar-group .sidebar-text,
html.tp-sidebar-collapsed .tp-sidebar-group-caret,
body.sidebar-collapsed .tp-sidebar-group-caret,
#sidebar.collapsed .tp-sidebar-group-caret,
.sidebar.collapsed .tp-sidebar-group-caret,
html.tp-sidebar-collapsed .tp-sidebar-subnav,
body.sidebar-collapsed .tp-sidebar-subnav,
#sidebar.collapsed .tp-sidebar-subnav,
.sidebar.collapsed .tp-sidebar-subnav {
    display: none !important;
}

@media (min-width: 921px) {
    /* In compact mode the groups keep their icon rail and expose their links
     * in a small flyout, rather than becoming inaccessible. */
    #sidebar.is-flyout-active,
    .sidebar.is-flyout-active {
        overflow: visible !important;
        z-index: 1700;
    }

    html.tp-sidebar-collapsed .tp-sidebar-group:is(.is-flyout-open, [open]) .tp-sidebar-subnav,
    body.sidebar-collapsed .tp-sidebar-group:is(.is-flyout-open, [open]) .tp-sidebar-subnav,
    #sidebar.collapsed .tp-sidebar-group:is(.is-flyout-open, [open]) .tp-sidebar-subnav,
    .sidebar.collapsed .tp-sidebar-group:is(.is-flyout-open, [open]) .tp-sidebar-subnav {
        background: var(--tp-surface) !important;
        border: 1px solid var(--tp-border-strong) !important;
        border-radius: 10px;
        box-shadow: 12px 16px 32px rgba(5, 12, 22, 0.28);
        display: flex !important;
        flex-direction: column;
        gap: 2px;
        left: calc(100% + 8px);
        margin: 0 !important;
        max-height: calc(100dvh - 16px);
        min-width: 218px;
        overflow-y: auto;
        padding: 6px !important;
        position: absolute;
        top: 0;
        z-index: 1600;
    }

    html.tp-sidebar-collapsed .tp-sidebar-subnav.tp-sidebar-flyout-portal,
    body.sidebar-collapsed .tp-sidebar-subnav.tp-sidebar-flyout-portal,
    .tp-sidebar-subnav.tp-sidebar-flyout-portal {
        background: var(--tp-surface) !important;
        border: 1px solid var(--tp-border-strong) !important;
        border-radius: 10px;
        box-shadow: 12px 16px 32px rgba(5, 12, 22, 0.28);
        display: flex !important;
        flex-direction: column;
        gap: 2px;
        left: var(--tp-sidebar-flyout-left, 80px);
        margin: 0 !important;
        max-height: calc(100dvh - 16px);
        min-width: 218px;
        overflow-y: auto;
        padding: 6px !important;
        position: fixed;
        top: var(--tp-sidebar-flyout-top, 64px);
        z-index: 10000;
    }

    html.tp-sidebar-collapsed #sidebar .tp-sidebar-group.is-flyout-open .tp-sidebar-subnav a,
    body.sidebar-collapsed #sidebar .tp-sidebar-group.is-flyout-open .tp-sidebar-subnav a,
    #sidebar.collapsed .tp-sidebar-group.is-flyout-open .tp-sidebar-subnav a,
    .sidebar.collapsed .tp-sidebar-group.is-flyout-open .tp-sidebar-subnav a {
        font-size: 13px !important;
        justify-content: flex-start !important;
        min-height: 36px;
        padding: 8px 9px !important;
    }

    .tp-sidebar-subnav.tp-sidebar-flyout-portal a {
        color: #aebed0 !important;
        font-size: 13px !important;
        justify-content: flex-start !important;
        min-height: 36px;
        padding: 8px 9px !important;
        text-decoration: none !important;
    }

    .tp-sidebar-subnav.tp-sidebar-flyout-portal a:hover,
    .tp-sidebar-subnav.tp-sidebar-flyout-portal a.active {
        background: rgba(92, 130, 168, 0.26) !important;
        color: #ffffff !important;
    }

    html.tp-sidebar-collapsed #sidebar .tp-sidebar-group.is-flyout-open .tp-sidebar-subnav .sidebar-text,
    body.sidebar-collapsed #sidebar .tp-sidebar-group.is-flyout-open .tp-sidebar-subnav .sidebar-text,
    #sidebar.collapsed .tp-sidebar-group.is-flyout-open .tp-sidebar-subnav .sidebar-text,
    .sidebar.collapsed .tp-sidebar-group.is-flyout-open .tp-sidebar-subnav .sidebar-text {
        display: inline !important;
    }

    html.tp-sidebar-collapsed .tp-sidebar-subnav.tp-sidebar-flyout-portal .sidebar-text,
    body.sidebar-collapsed .tp-sidebar-subnav.tp-sidebar-flyout-portal .sidebar-text,
    .tp-sidebar-subnav.tp-sidebar-flyout-portal .sidebar-text {
        display: inline !important;
    }

    html.tp-sidebar-collapsed #sidebar .tp-sidebar-group.is-flyout-open .tp-sidebar-subnav i,
    body.sidebar-collapsed #sidebar .tp-sidebar-group.is-flyout-open .tp-sidebar-subnav i,
    #sidebar.collapsed .tp-sidebar-group.is-flyout-open .tp-sidebar-subnav i,
    .sidebar.collapsed .tp-sidebar-group.is-flyout-open .tp-sidebar-subnav i {
        font-size: 13px !important;
        margin-right: 7px !important;
    }

    .tp-sidebar-subnav.tp-sidebar-flyout-portal i {
        font-size: 13px !important;
        margin-right: 7px !important;
    }

    body.tp-theme-light #sidebar.tp-sidebar .tp-sidebar-group.is-flyout-open .tp-sidebar-subnav,
    body.tp-theme-light .sidebar.tp-sidebar .tp-sidebar-group.is-flyout-open .tp-sidebar-subnav {
        background: #fffaf3 !important;
        box-shadow: 12px 16px 32px rgba(72, 91, 120, 0.18);
    }

    body.tp-theme-light .tp-sidebar-subnav.tp-sidebar-flyout-portal {
        background: #fffaf3 !important;
        box-shadow: 12px 16px 32px rgba(72, 91, 120, 0.18);
    }
}

/* At tablet widths, the persisted compact desktop state must not hide links.
 * The sidebar becomes an overlay and each native details group opens in place. */
@media (max-width: 920px) {
    html.tp-mobile-sidebar-open #sidebar .tp-sidebar-group > summary,
    html.tp-mobile-sidebar-open .sidebar .tp-sidebar-group > summary,
    body.tp-mobile-sidebar-open #sidebar .tp-sidebar-group > summary,
    body.tp-mobile-sidebar-open .sidebar .tp-sidebar-group > summary {
        justify-content: flex-start !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    html.tp-mobile-sidebar-open #sidebar .tp-sidebar-group-caret,
    html.tp-mobile-sidebar-open .sidebar .tp-sidebar-group-caret,
    body.tp-mobile-sidebar-open #sidebar .tp-sidebar-group-caret,
    body.tp-mobile-sidebar-open .sidebar .tp-sidebar-group-caret {
        display: inline-flex !important;
        margin-left: auto !important;
    }

    html.tp-mobile-sidebar-open #sidebar .tp-sidebar-group[open] .tp-sidebar-subnav,
    html.tp-mobile-sidebar-open .sidebar .tp-sidebar-group[open] .tp-sidebar-subnav,
    body.tp-mobile-sidebar-open #sidebar .tp-sidebar-group[open] .tp-sidebar-subnav,
    body.tp-mobile-sidebar-open .sidebar .tp-sidebar-group[open] .tp-sidebar-subnav {
        display: grid !important;
    }
}

.btn,
.form-control,
.form-select,
.input-group-text {
    border-radius: var(--tp-radius) !important;
}

.badge,
.tp-fin-count,
.tp-page-loader__message {
    border-radius: 999px !important;
}

body.tp-theme-light:not(.tp-module-templates) .tp-page-header,
body.tp-theme-dark:not(.tp-module-templates) .tp-page-header,
body.tp-theme-light:not(.tp-module-templates) .dashboard-heading,
body.tp-theme-dark:not(.tp-module-templates) .dashboard-heading {
    background: var(--tp-surface) !important;
    border-color: var(--tp-border) !important;
    border-radius: var(--tp-radius-lg) !important;
    box-shadow: var(--tp-shadow) !important;
}

body.tp-theme-light:not(.tp-module-templates) .card,
body.tp-theme-dark:not(.tp-module-templates) .card,
body.tp-theme-light:not(.tp-module-templates) .table-responsive,
body.tp-theme-dark:not(.tp-module-templates) .table-responsive,
body.tp-theme-light:not(.tp-module-templates) .tp-table-toolbar,
body.tp-theme-dark:not(.tp-module-templates) .tp-table-toolbar,
body.tp-theme-light:not(.tp-module-templates) .tp-orders-filter-toolbar,
body.tp-theme-dark:not(.tp-module-templates) .tp-orders-filter-toolbar {
    background: var(--tp-surface) !important;
    border-color: var(--tp-border) !important;
    border-radius: var(--tp-radius-lg) !important;
    box-shadow: 0 7px 20px rgba(16, 24, 40, 0.06) !important;
}

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

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--tp-primary-strong) !important;
    border-color: var(--tp-primary-strong) !important;
}

.tp-note-menu,
.tp-chat-menu,
.tp-notification-menu,
.tp-profile-menu {
    background: var(--tp-surface) !important;
    border-color: var(--tp-border-strong) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 42px rgba(8, 15, 26, 0.22) !important;
    padding: 12px !important;
}

.tp-note-head,
.tp-notification-head {
    border-bottom: 1px solid var(--tp-border);
    margin-bottom: 10px;
    padding: 2px 2px 10px;
}

.tp-note-menu textarea.tp-note-textarea,
.tp-chat-menu textarea.tp-note-chat-input {
    background: var(--tp-surface-soft) !important;
    border-color: var(--tp-border-strong) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

.tp-note-chat-list {
    background: transparent !important;
    border-color: var(--tp-border) !important;
}

@media (max-width: 768px) {
    .tp-sidebar-group {
        margin-left: 8px;
        margin-right: 8px;
    }

    .tp-sidebar-subnav {
        margin-left: 22px;
    }
}

/* Dashboard metrics read as one operational strip instead of several nested cards. */
.tp-main-radar-kpis {
    background: var(--tp-surface-soft);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-lg);
    gap: 0 !important;
    overflow: hidden;
}

.tp-main-radar-kpi,
body.tp-theme-light:not(.tp-module-templates) .tp-main-radar-kpi,
body.tp-theme-dark:not(.tp-module-templates) .tp-main-radar-kpi {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 88px !important;
}

.tp-main-radar-kpi + .tp-main-radar-kpi {
    border-left: 1px solid var(--tp-border) !important;
}

.tp-main-radar-kpi::before {
    background: var(--tp-primary) !important;
    height: 2px !important;
}

@media (max-width: 767.98px) {
    .tp-main-radar-kpi + .tp-main-radar-kpi {
        border-left: 0 !important;
        border-top: 1px solid var(--tp-border) !important;
    }
}

/* Flat sidebar hierarchy: the navigation is a list, not a stack of cards. */
#sidebar.tp-sidebar > a,
.sidebar.tp-sidebar > a,
#sidebar.tp-sidebar .tp-sidebar-group > summary,
.sidebar.tp-sidebar .tp-sidebar-group > summary {
    border-radius: 0 !important;
    margin: 0 !important;
}

#sidebar.tp-sidebar > a,
.sidebar.tp-sidebar > a {
    gap: 8px;
    min-height: 43px;
    padding: 10px 14px;
}

/* Direct links and expandable groups share the same icon column. This keeps
 * every label aligned regardless of the Font Awesome glyph being used. */
#sidebar.tp-sidebar > a > i,
.sidebar.tp-sidebar > a > i,
.tp-sidebar-group-label > i {
    flex: 0 0 20px;
    margin-right: 0 !important;
    text-align: center;
    width: 20px;
}

.tp-sidebar-group-label {
    gap: 8px;
}

#sidebar.tp-sidebar > a:hover,
#sidebar.tp-sidebar > a.active,
.sidebar.tp-sidebar > a:hover,
.sidebar.tp-sidebar > a.active {
    background: rgba(88, 119, 153, 0.16) !important;
    box-shadow: inset 3px 0 0 var(--tp-primary) !important;
    color: #f4f8fc !important;
}

.tp-sidebar-group {
    margin: 0 !important;
}

.tp-sidebar-group > summary {
    background: transparent !important;
    min-height: 43px;
    padding: 10px 14px;
}

.tp-sidebar-group > summary:hover,
.tp-sidebar-group.is-active > summary,
.tp-sidebar-group[open] > summary {
    background: transparent !important;
    color: #f4f8fc;
}

.tp-sidebar-group.is-active > summary {
    box-shadow: inset 3px 0 0 var(--tp-primary);
}

.tp-sidebar-group-caret {
    color: #90a0b4 !important;
    flex: 0 0 14px;
    font-size: 11px !important;
    text-align: right;
    transform: none !important;
    width: 14px;
}

.tp-sidebar-group[open] > summary .tp-sidebar-group-caret {
    transform: rotate(90deg) !important;
}

.tp-sidebar-subnav {
    border-left-color: rgba(139, 160, 184, 0.24);
    gap: 0;
    margin: 0 0 5px 25px;
    padding: 2px 0 2px 9px;
}

#sidebar.tp-sidebar .tp-sidebar-subnav a,
.sidebar.tp-sidebar .tp-sidebar-subnav a {
    border-radius: 0 !important;
    font-size: 12px;
    min-height: 31px;
    padding: 7px 8px;
}

#sidebar.tp-sidebar .tp-sidebar-subnav a:hover,
#sidebar.tp-sidebar .tp-sidebar-subnav a.active,
.sidebar.tp-sidebar .tp-sidebar-subnav a:hover,
.sidebar.tp-sidebar .tp-sidebar-subnav a.active {
    background: transparent !important;
    box-shadow: inset 2px 0 0 var(--tp-primary) !important;
    color: #f4f8fc !important;
}

body.tp-theme-light #sidebar.tp-sidebar > a,
body.tp-theme-light .sidebar.tp-sidebar > a,
body.tp-theme-light #sidebar.tp-sidebar .tp-sidebar-group > summary,
body.tp-theme-light .sidebar.tp-sidebar .tp-sidebar-group > summary {
    color: #40546d !important;
}

/* The light palette must not alter navigation geometry. Both the direct links
 * and the expandable entries use the same dark-theme padding and margin. */
body.tp-theme-light #sidebar.tp-sidebar > a,
body.tp-theme-light .sidebar.tp-sidebar > a {
    margin: 0 !important;
    padding: 10px 14px !important;
}

body.tp-theme-light #sidebar.tp-sidebar > a:hover,
body.tp-theme-light #sidebar.tp-sidebar > a.active,
body.tp-theme-light .sidebar.tp-sidebar > a:hover,
body.tp-theme-light .sidebar.tp-sidebar > a.active {
    background: rgba(69, 111, 151, 0.11) !important;
    box-shadow: inset 3px 0 0 var(--tp-primary) !important;
    color: #213e5d !important;
}

body.tp-theme-light .tp-sidebar-group > summary:hover,
body.tp-theme-light .tp-sidebar-group.is-active > summary,
body.tp-theme-light .tp-sidebar-group[open] > summary {
    background: transparent !important;
    color: #213e5d !important;
}

body.tp-theme-light .tp-sidebar-group.is-active > summary {
    box-shadow: inset 3px 0 0 var(--tp-primary) !important;
}

body.tp-theme-light #sidebar.tp-sidebar .tp-sidebar-subnav a:hover,
body.tp-theme-light #sidebar.tp-sidebar .tp-sidebar-subnav a.active,
body.tp-theme-light .sidebar.tp-sidebar .tp-sidebar-subnav a:hover,
body.tp-theme-light .sidebar.tp-sidebar .tp-sidebar-subnav a.active {
    background: transparent !important;
    box-shadow: inset 2px 0 0 var(--tp-primary) !important;
    color: #213e5d !important;
}

/* Unified topbar activity drawer for notes, alerts and team chat. */
.tp-activity-backdrop {
    background: rgba(8, 15, 25, 0.46);
    border: 0;
    bottom: 0;
    display: block;
    left: 0;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: var(--tp-activity-drawer-top, 62px);
    transition: opacity 0.18s ease, visibility 0.18s ease;
    visibility: hidden;
    width: 100%;
    /*
     * The drawer lives inside the topbar stacking context. Keeping the veil
     * underneath the topbar prevents it from dimming the drawer or intercepting
     * its tabs and controls.
     */
    z-index: 210;
}

.tp-activity-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.tp-activity-source > .tp-note-menu,
.tp-activity-source > .tp-chat-menu,
.tp-activity-source > .tp-alert-menu {
    border: 0 !important;
    border-left: 1px solid var(--tp-border-strong) !important;
    border-radius: 0 !important;
    bottom: auto !important;
    box-shadow: -18px 0 42px rgba(5, 12, 22, 0.24) !important;
    height: min(var(--tp-activity-drawer-height, 640px), calc(100dvh - var(--tp-activity-drawer-top, 62px))) !important;
    left: auto !important;
    margin: 0 !important;
    max-height: calc(100dvh - var(--tp-activity-drawer-top, 62px)) !important;
    min-height: min(420px, calc(100dvh - var(--tp-activity-drawer-top, 62px))) !important;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px 14px 20px !important;
    position: fixed !important;
    right: 0 !important;
    top: var(--tp-activity-drawer-top, 62px) !important;
    transform: none !important;
    width: min(410px, 100vw) !important;
    z-index: 1400 !important;
}

.tp-activity-resize-handle {
    align-items: center;
    bottom: 0;
    cursor: ns-resize;
    display: flex;
    height: 13px;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    touch-action: none;
    z-index: 3;
}

.tp-activity-resize-handle::before {
    background: var(--tp-border-strong);
    border-radius: 999px;
    content: "";
    height: 3px;
    transition: background-color 0.16s ease, width 0.16s ease;
    width: 44px;
}

.tp-activity-resize-handle:hover::before,
.tp-activity-resize-handle:focus-visible::before {
    background: var(--tp-primary);
    width: 58px;
}

body.tp-activity-is-resizing,
body.tp-activity-is-resizing * {
    cursor: ns-resize !important;
    user-select: none !important;
}

/*
 * Notes and alerts are opened from tabs, so their hidden triggers must not
 * occupy flex space between the visible Chat and Notifications buttons.
 */
.tp-topbar-profile-wrap > .tp-topbar-notes,
.tp-topbar-profile-wrap > .tp-topbar-alerts {
    display: contents;
}

.tp-activity-source > .tp-note-menu.show,
.tp-activity-source > .tp-chat-menu.show,
.tp-activity-source > .tp-alert-menu.show {
    animation: tp-activity-drawer-enter 0.2s ease-out;
    display: flex !important;
    flex-direction: column;
}

/* Alerts can have less content than the other tabs. Avoid re-running the
 * drawer entrance animation when switching to it, which caused a visual jump. */
.tp-activity-source > .tp-alert-menu.show {
    animation: none;
    clip-path: none;
    opacity: 1;
}

.tp-activity-tabs {
    align-items: stretch;
    border-bottom: 1px solid var(--tp-border);
    display: flex;
    gap: 3px;
    margin: -14px -14px 12px;
    padding: 10px 12px 8px;
}

.tp-activity-tab {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--tp-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 1 1 0;
    font-size: 11px;
    font-weight: 800;
    gap: 6px;
    justify-content: center;
    min-height: 34px;
    padding: 6px 8px;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.tp-activity-tab:hover,
.tp-activity-tab:focus-visible {
    background: var(--tp-surface-soft);
    color: var(--tp-text);
    outline: none;
}

.tp-activity-tab.is-active {
    background: rgba(47, 111, 168, 0.16);
    color: var(--tp-primary);
}

.tp-activity-drawer-head {
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.tp-activity-head-actions {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 7px;
}

.tp-activity-close {
    align-items: center;
    background: transparent;
    border: 1px solid var(--tp-border);
    border-radius: 8px;
    color: var(--tp-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    padding: 0;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    width: 30px;
}

.tp-activity-close:hover,
.tp-activity-close:focus-visible {
    background: rgba(239, 64, 86, 0.1);
    border-color: rgba(239, 64, 86, 0.32);
    color: #ef4056;
    outline: none;
}

.tp-activity-source > .tp-chat-menu.show {
    overflow: hidden;
}

.tp-activity-source > .tp-chat-menu .tp-note-chat-list {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
}

.tp-activity-source > .tp-chat-menu .tp-note-meta,
.tp-activity-source > .tp-chat-menu .tp-note-chat-input,
.tp-activity-source > .tp-chat-menu .tp-note-actions,
.tp-activity-source > .tp-chat-menu .tp-chat-emoji-panel,
.tp-activity-source > .tp-chat-menu .tp-chat-tools-panel {
    flex: 0 0 auto;
}

.tp-activity-source > .tp-alert-menu .tp-alert-list {
    flex: 0 0 auto;
}

@keyframes tp-activity-drawer-enter {
    from {
        clip-path: inset(0 0 0 18px);
        opacity: 0;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@media (max-width: 640px) {
    .tp-activity-source > .tp-note-menu,
    .tp-activity-source > .tp-chat-menu,
    .tp-activity-source > .tp-alert-menu {
        width: 100vw !important;
    }

    .tp-activity-tab {
        font-size: 10px;
        gap: 4px;
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* On the narrow sidebar rail, groups behave like the rest of the icon-only
 * navigation. The caret returns only when the sidebar is opened. */
@media (max-width: 920px) {
    html:not(.tp-mobile-sidebar-open) #sidebar .tp-sidebar-group > summary,
    html:not(.tp-mobile-sidebar-open) .sidebar .tp-sidebar-group > summary {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html:not(.tp-mobile-sidebar-open) #sidebar .tp-sidebar-group-label,
    html:not(.tp-mobile-sidebar-open) .sidebar .tp-sidebar-group-label {
        justify-content: center !important;
        width: 100%;
    }

    html:not(.tp-mobile-sidebar-open) #sidebar .tp-sidebar-group-label > i,
    html:not(.tp-mobile-sidebar-open) .sidebar .tp-sidebar-group-label > i {
        margin-right: 0 !important;
    }

    html:not(.tp-mobile-sidebar-open) #sidebar .tp-sidebar-group-caret,
    html:not(.tp-mobile-sidebar-open) .sidebar .tp-sidebar-group-caret {
        display: none !important;
    }
}

/* Dashboard actions must wrap inside the header before the layout becomes
 * narrow enough for the stacked mobile treatment. */
@media (max-width: 992px) {
    .tp-page-header-actions {
        max-width: 100%;
        min-width: 0;
    }

    .tp-page-header-actions .tp-dashboard-actions {
        flex-wrap: wrap !important;
        max-width: 100%;
        min-width: 0;
    }

    .tp-page-header-actions .tp-dashboard-actions > * {
        max-width: 100%;
        width: auto !important;
    }

    .tp-page-header-actions .tp-dashboard-actions .tp-header-period-filter {
        flex: 1 1 182px;
        min-width: 0;
        width: auto !important;
    }
}

@media (max-width: 420px) {
    .tp-page-header-actions .tp-dashboard-actions .btn,
    .tp-page-header-actions .tp-dashboard-actions .form-select {
        width: 100% !important;
    }
}

/* Light theme refresh: keep the calm work surface, but give the workshop
 * interface warmer material accents and clearer visual landmarks. */
body.tp-theme-light {
    background:
        radial-gradient(circle at 92% -12%, rgba(14, 165, 185, 0.15), transparent 34%),
        radial-gradient(circle at 14% 106%, rgba(245, 158, 11, 0.14), transparent 34%),
        linear-gradient(135deg, #f8f1e7 0%, #f4f7f3 50%, #edf4f8 100%) !important;
}

body.tp-theme-light .topbar {
    background:
        radial-gradient(circle at 72% -80%, rgba(45, 143, 184, 0.16), transparent 46%),
        radial-gradient(circle at 18% 120%, rgba(238, 168, 61, 0.12), transparent 42%),
        rgba(255, 253, 249, 0.92) !important;
    border-bottom-color: rgba(174, 190, 199, 0.72) !important;
}

body.tp-theme-light #sidebar,
body.tp-theme-light .sidebar {
    background:
        radial-gradient(circle at 0 0, rgba(61, 174, 206, 0.20), transparent 31%),
        radial-gradient(circle at 100% 46%, rgba(244, 170, 71, 0.16), transparent 38%),
        linear-gradient(180deg, #e4eff8 0%, #f4e9d8 51%, #e7f1e8 100%) !important;
}

body.tp-theme-light #sidebar a:hover,
body.tp-theme-light #sidebar a.active,
body.tp-theme-light .sidebar a:hover,
body.tp-theme-light .sidebar a.active,
body.tp-theme-light .tp-sidebar-group > summary:hover {
    background: linear-gradient(100deg, rgba(45, 111, 168, 0.18), rgba(36, 169, 175, 0.14)) !important;
    box-shadow: inset 3px 0 0 #2f6fa8, inset 0 0 0 1px rgba(77, 132, 172, 0.16) !important;
}

body.tp-theme-light:not(.tp-module-templates) .tp-page-header,
body.tp-theme-light:not(.tp-module-templates) .dashboard-heading {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 185, 0.20), transparent 34%),
        radial-gradient(circle at bottom left, rgba(245, 158, 11, 0.14), transparent 42%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 249, 0.96)) !important;
    border-color: rgba(145, 180, 194, 0.48) !important;
}

body.tp-theme-light:not(.tp-module-templates) .card,
body.tp-theme-light:not(.tp-module-templates) .table-responsive,
body.tp-theme-light:not(.tp-module-templates) .tp-table-toolbar,
body.tp-theme-light:not(.tp-module-templates) .tp-orders-filter-toolbar,
body.tp-theme-light:not(.tp-module-templates) .tp-fin-summary-card,
body.tp-theme-light:not(.tp-module-templates) .tp-main-radar-focus,
body.tp-theme-light:not(.tp-module-templates) .tp-main-radar-panel,
body.tp-theme-light:not(.tp-module-templates) .tp-main-radar-kpi,
body.tp-theme-light:not(.tp-module-templates) .tp-main-radar-item,
body.tp-theme-light:not(.tp-module-templates) .tp-main-alert-card,
body.tp-theme-light:not(.tp-module-templates) .tp-dashboard-flow-card,
body.tp-theme-light:not(.tp-module-templates) .tp-log-tile,
body.tp-theme-light:not(.tp-module-templates) .tp-closeout-card {
    background:
        radial-gradient(circle at top right, rgba(45, 161, 183, 0.14), transparent 33%),
        radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.06), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 250, 0.96)) !important;
    border-color: rgba(152, 177, 188, 0.34) !important;
}

body.tp-theme-light .tp-main-radar {
    background:
        radial-gradient(circle at 5% 0, rgba(45, 173, 180, 0.16), transparent 27%),
        radial-gradient(circle at 96% 2%, rgba(245, 158, 11, 0.16), transparent 30%),
        linear-gradient(180deg, rgba(246, 252, 251, 0.98), rgba(235, 244, 249, 0.98)) !important;
    border-color: rgba(132, 171, 185, 0.40) !important;
}

body.tp-theme-light .tp-main-radar-focus {
    background:
        radial-gradient(circle at top right, rgba(39, 155, 173, 0.22), transparent 36%),
        linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(228, 248, 244, 0.90)) !important;
}

body.tp-theme-light .tp-main-radar-panel {
    background:
        radial-gradient(circle at top right, rgba(124, 92, 196, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 247, 253, 0.96)) !important;
}

body.tp-theme-light .tp-main-radar-summary-item:nth-child(1) { border-top: 3px solid #2f80c9; }
body.tp-theme-light .tp-main-radar-summary-item:nth-child(2) { border-top: 3px solid #d99526; }
body.tp-theme-light .tp-main-radar-summary-item:nth-child(3) { border-top: 3px solid #7b68c9; }
body.tp-theme-light .tp-main-radar-kpi:nth-child(2)::before { background: linear-gradient(90deg, #179b68, #2eb5ac); }

/* Chat and notifications retain their counters, but the trigger itself stays
 * as a clean icon in the light theme, matching the dark-theme rhythm. */
body.tp-theme-light .tp-chat-trigger,
body.tp-theme-light .tp-chat-trigger.is-live,
body.tp-theme-light .tp-bell-trigger,
body.tp-theme-light .tp-bell-trigger.is-live {
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

body.tp-theme-light .tp-chat-trigger::before,
body.tp-theme-light .tp-bell-trigger::before {
    display: none !important;
}

body.tp-theme-light .tp-chat-trigger:hover,
body.tp-theme-light .tp-chat-trigger:focus-visible,
body.tp-theme-light .tp-chat-trigger.show {
    background: rgba(47, 111, 168, 0.11) !important;
    border-color: rgba(47, 111, 168, 0.18) !important;
}

body.tp-theme-light .tp-bell-trigger:hover,
body.tp-theme-light .tp-bell-trigger:focus-visible,
body.tp-theme-light .tp-bell-trigger.show {
    background: rgba(123, 104, 201, 0.11) !important;
    border-color: rgba(123, 104, 201, 0.18) !important;
}

body.tp-theme-light .tp-chat-trigger i,
body.tp-theme-light .tp-chat-trigger.is-live i { color: #2f6fa8; }
body.tp-theme-light .tp-bell-trigger i,
body.tp-theme-light .tp-bell-trigger.is-live i { color: #6f57b8; }
body.tp-theme-light .tp-chat-badge,
body.tp-theme-light .tp-bell-badge { border-color: #fffdfa; }

/* Private platform registry: a compact operational surface kept outside the
 * workshop navigation, with the same geometry in both colour themes. */
.tp-platform-standalone-body {
    background:
        radial-gradient(circle at top left, rgba(34, 120, 228, 0.18), transparent 24%),
        radial-gradient(circle at top right, rgba(18, 174, 149, 0.16), transparent 22%),
        linear-gradient(180deg, #08111d 0%, #0b1422 52%, #09111d 100%);
    color: #edf5fd;
    margin: 0;
    min-height: 100vh;
}

.tp-platform-shell {
    min-height: 100vh;
    padding: 22px;
}

.tp-platform-topbar {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin: 0 auto 18px;
    max-width: 1480px;
}

.tp-platform-brand {
    align-items: center;
    color: #edf5fd;
    display: inline-flex;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

.tp-platform-brand:hover,
.tp-platform-brand:focus-visible {
    color: #ffffff;
    text-decoration: none;
}

.tp-platform-brand-mark {
    align-items: center;
    background: linear-gradient(180deg, rgba(52, 126, 233, 0.20), rgba(20, 171, 154, 0.18));
    border: 1px solid rgba(121, 168, 228, 0.28);
    border-radius: 15px;
    box-shadow: 0 14px 36px rgba(2, 7, 16, 0.28);
    color: #8fd2ff;
    display: inline-flex;
    flex: 0 0 46px;
    font-size: 1rem;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.tp-platform-brand strong,
.tp-platform-brand small {
    display: block;
}

.tp-platform-brand strong {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.tp-platform-brand small {
    color: #92a9c1;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    margin-top: 0.16rem;
    text-transform: uppercase;
}

.tp-platform-topbar-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.tp-platform-chip {
    align-items: center;
    background: rgba(16, 29, 45, 0.72);
    border: 1px solid rgba(115, 152, 186, 0.22);
    border-radius: 999px;
    color: #bcd0e5;
    display: inline-flex;
    font-size: 0.73rem;
    font-weight: 850;
    gap: 0.45rem;
    padding: 0.5rem 0.78rem;
}

.tp-platform-workspace { align-items: start; display: grid; gap: 1rem; grid-template-columns: 210px minmax(0, 1fr); margin: 0 auto; max-width: 1600px; }
.tp-platform-sidebar { background: linear-gradient(180deg, rgba(21, 37, 58, 0.84), rgba(13, 25, 42, 0.86)); border: 1px solid rgba(117, 162, 201, 0.2); border-radius: 18px; display: grid; gap: 0.22rem; padding: 0.62rem; position: sticky; top: 18px; }
.tp-platform-sidebar-heading { color: #7dbbf2; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.1em; padding: 0.34rem 0.5rem 0.42rem; text-transform: uppercase; }
.tp-platform-sidebar > a { align-items: center; border: 1px solid transparent; border-radius: 10px; color: #b9c9dc; display: flex; font-size: 0.78rem; font-weight: 800; gap: 0.58rem; min-height: 36px; padding: 0.46rem 0.5rem; text-decoration: none; }
.tp-platform-sidebar > a:hover, .tp-platform-sidebar > a:focus-visible, .tp-platform-sidebar > a.is-active { background: rgba(37, 118, 225, 0.14); border-color: rgba(95, 175, 244, 0.2); color: #e7f5ff; text-decoration: none; }
.tp-platform-sidebar > a > i { color: #72c8ff; text-align: center; width: 16px; }
.tp-platform-sidebar > a > span { flex: 1 1 auto; min-width: 0; }
.tp-platform-sidebar > a > small { align-items: center; background: rgba(114, 185, 240, 0.14); border-radius: 999px; color: #94d7ff; display: inline-flex; font-size: 0.62rem; font-weight: 900; justify-content: center; min-width: 20px; padding: 0.08rem 0.3rem; }
.tp-platform-sidebar-help { border-top: 1px solid rgba(133, 163, 194, 0.16); color: #8fa7c0; display: flex; font-size: 0.67rem; gap: 0.45rem; line-height: 1.42; margin-top: 0.35rem; padding: 0.65rem 0.46rem 0.15rem; }
.tp-platform-sidebar-help > i { color: #6fcdf7; margin-top: 0.1rem; }
.tp-platform-sidebar-help strong { color: #bfd5ea; }

.tp-platform-main { margin: 0; max-width: none; min-width: 0; }

.tp-platform-page {
    margin: 0 auto;
    max-width: 1600px;
}

.tp-platform-header {
    align-items: center;
    background:
        radial-gradient(circle at 92% 18%, rgba(34, 211, 238, 0.13), transparent 28%),
        radial-gradient(circle at 3% 104%, rgba(21, 118, 248, 0.17), transparent 36%),
        linear-gradient(130deg, #111d31, #162942 60%, #16353c);
    border: 1px solid rgba(110, 174, 222, 0.22);
    border-radius: 22px;
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    overflow: hidden;
    padding: 1.2rem 1.35rem;
    position: relative;
}

.tp-platform-header::after {
    background-image: radial-gradient(rgba(167, 218, 255, 0.24) 1px, transparent 1px);
    background-size: 13px 13px;
    content: '';
    inset: 0;
    mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
    opacity: 0.2;
    pointer-events: none;
    position: absolute;
}

.tp-platform-header > * { position: relative; z-index: 1; }
.tp-platform-eyebrow { color: #71c8ff; display: inline-flex; font-size: 0.72rem; font-weight: 900; gap: 0.45rem; letter-spacing: 0.09em; text-transform: uppercase; }
.tp-platform-header h1 { color: #f7fbff; font-size: clamp(1.55rem, 2.2vw, 2.25rem); font-weight: 900; letter-spacing: -0.045em; line-height: 1.05; margin: 0.45rem 0 0.35rem; }
.tp-platform-header p { color: #b9cbe0; font-size: 0.94rem; font-weight: 650; margin: 0; max-width: 720px; }

.tp-platform-operator {
    align-items: center;
    background: rgba(6, 18, 34, 0.42);
    border: 1px solid rgba(114, 197, 244, 0.28);
    border-radius: 15px;
    color: #edf8ff;
    display: flex;
    flex: 0 1 365px;
    gap: 0.75rem;
    min-width: 260px;
    padding: 0.8rem 0.9rem;
}
.tp-platform-operator > i { align-items: center; background: rgba(21, 118, 248, 0.18); border: 1px solid rgba(99, 182, 255, 0.26); border-radius: 12px; color: #83cfff; display: inline-flex; font-size: 1rem; height: 39px; justify-content: center; width: 39px; }
.tp-platform-operator strong, .tp-platform-operator small { display: block; }
.tp-platform-operator strong { font-size: 0.88rem; line-height: 1.25; }
.tp-platform-operator small { color: #a8bfd9; font-size: 0.76rem; font-weight: 700; margin-top: 0.14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tp-platform-notice { border-radius: 13px; font-weight: 750; margin-bottom: 1rem; }
.tp-platform-stats { display: grid; gap: 0.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1rem; }
.tp-platform-stats article { background: linear-gradient(155deg, rgba(26, 43, 66, 0.94), rgba(17, 30, 48, 0.97)); border: 1px solid rgba(121, 158, 196, 0.18); border-radius: 16px; min-height: 100px; padding: 0.85rem 0.95rem; position: relative; overflow: hidden; }
.tp-platform-stats article::before { background: linear-gradient(180deg, #33c1e2, #216ee3); border-radius: 999px; content: ''; height: 34px; opacity: 0.78; position: absolute; right: -13px; top: -15px; transform: rotate(40deg); width: 76px; }
.tp-platform-stats article:nth-child(2)::before { background: linear-gradient(180deg, #f0b84a, #d8852a); }
.tp-platform-stats article:nth-child(3)::before { background: linear-gradient(180deg, #47d58b, #13966b); }
.tp-platform-stats article:nth-child(4)::before { background: linear-gradient(180deg, #ed6a7d, #cc3d58); }
.tp-platform-stats span, .tp-platform-stats strong, .tp-platform-stats small { display: block; }
.tp-platform-stats span { color: #8fa5bd; font-size: 0.71rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.tp-platform-stats strong { color: #f5f9ff; font-size: 1.65rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; margin-top: 0.25rem; }
.tp-platform-stats small { color: #b5c2d1; font-size: 0.78rem; font-weight: 750; margin-top: 0.18rem; }

.tp-platform-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr); }
.tp-platform-card { background: linear-gradient(180deg, rgba(25, 40, 62, 0.96), rgba(17, 29, 46, 0.98)); border: 1px solid rgba(121, 158, 196, 0.19); border-radius: 18px; overflow: hidden; }
.tp-platform-card-head { align-items: flex-start; border-bottom: 1px solid rgba(147, 170, 198, 0.14); display: flex; gap: 0.7rem; justify-content: space-between; padding: 0.95rem 1rem; }
.tp-platform-card-head > div { align-items: center; display: flex; gap: 0.7rem; min-width: 0; }
.tp-platform-card h2 { color: #f5f9ff; font-size: 1.05rem; font-weight: 900; margin: 0; }
.tp-platform-card p { color: #9db0c5; font-size: 0.79rem; font-weight: 650; line-height: 1.35; margin: 0.16rem 0 0; }
.tp-platform-card-head .btn { flex: 0 0 auto; white-space: nowrap; }
.tp-platform-icon { align-items: center; border-radius: 12px; display: inline-flex; flex: 0 0 39px; height: 39px; justify-content: center; width: 39px; }
.tp-platform-icon.is-plan { background: rgba(110, 103, 220, 0.14); border: 1px solid rgba(151, 137, 255, 0.24); color: #afa4ff; }
.tp-platform-icon.is-workshop { background: rgba(20, 184, 166, 0.12); border: 1px solid rgba(63, 217, 198, 0.22); color: #70e6d5; }
.tp-platform-plan-catalog { background: linear-gradient(145deg, rgba(53, 67, 112, 0.22), rgba(13, 26, 43, 0.1)); border-bottom: 1px solid rgba(147, 170, 198, 0.14); padding: 0.9rem 1rem 1rem; }
.tp-platform-catalog-copy { display: grid; gap: 0.16rem; margin-bottom: 0.75rem; }
.tp-platform-catalog-copy span { color: #9cbdff; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; }
.tp-platform-catalog-copy strong { color: #dceaff; font-size: 0.8rem; }
.tp-platform-preset-grid { display: grid; gap: 0.55rem; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.tp-platform-preset { background: rgba(7, 17, 31, 0.38); border: 1px solid rgba(126, 160, 200, 0.22); border-radius: 12px; display: flex; flex-direction: column; min-width: 0; padding: 0.7rem; }
.tp-platform-preset.is-recommended { border-color: rgba(93, 163, 255, 0.7); box-shadow: inset 0 0 0 1px rgba(74, 148, 242, 0.13); }
.tp-platform-preset.is-reference { border-color: rgba(93, 221, 185, 0.48); box-shadow: inset 0 0 0 1px rgba(60, 202, 160, 0.1); }
.tp-platform-preset-top { align-items: center; display: flex; gap: 0.35rem; justify-content: space-between; margin-bottom: 0.38rem; }
.tp-platform-preset-top span { color: #98b6ea; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.05em; }
.tp-platform-preset-top em { background: rgba(32, 125, 236, 0.18); border: 1px solid rgba(104, 180, 255, 0.32); border-radius: 999px; color: #9fd4ff; font-size: 0.58rem; font-style: normal; font-weight: 900; padding: 0.14rem 0.38rem; text-transform: uppercase; }
.tp-platform-preset > strong { color: #f0f6ff; font-size: 0.86rem; font-weight: 900; }
.tp-platform-preset > p { font-size: 0.7rem; line-height: 1.35; margin: 0.26rem 0 0.5rem; min-height: 2.85em; }
.tp-platform-preset > small { color: #b7c8dd; font-size: 0.67rem; font-weight: 800; }
.tp-platform-preset > small i + i { margin-left: 0.35rem; }
.tp-platform-preset > ul { color: #c6d4e6; font-size: 0.66rem; line-height: 1.25; list-style: none; margin: 0.56rem 0 0.65rem; padding: 0; }
.tp-platform-preset > ul li { overflow: hidden; padding-left: 0.72rem; position: relative; text-overflow: ellipsis; white-space: nowrap; }
.tp-platform-preset > ul li::before { color: #67c8a2; content: '\2713'; font-weight: 900; left: 0; position: absolute; }
.tp-platform-preset > .btn { align-self: flex-start; font-size: 0.71rem; font-weight: 850; margin-top: auto; }
.tp-platform-list-label { color: #91a9c5; font-size: 0.67rem; font-weight: 900; letter-spacing: 0.07em; padding: 0.75rem 1rem 0.3rem; text-transform: uppercase; }
.tp-platform-list { display: grid; gap: 0; }
.tp-platform-plan-row, .tp-platform-workshop-row { align-items: center; border-bottom: 1px solid rgba(147, 170, 198, 0.11); display: grid; gap: 0.75rem; padding: 0.82rem 1rem; }
.tp-platform-plan-row { grid-template-columns: minmax(0, 1fr) minmax(155px, 0.55fr) auto; }
.tp-platform-workshop-row { grid-template-columns: minmax(0, 1fr) minmax(180px, 0.65fr) auto; }
.tp-platform-plan-row:last-child, .tp-platform-workshop-row:last-child { border-bottom: 0; }
.tp-platform-plan-row.is-inactive { opacity: 0.62; }
.tp-platform-benefits { grid-column: 1 / -1; }
.tp-platform-benefits summary { color: #89c5ff; cursor: pointer; font-size: 0.71rem; font-weight: 850; list-style: none; }
.tp-platform-benefits summary::-webkit-details-marker { display: none; }
.tp-platform-benefits summary i { margin-right: 0.22rem; }
.tp-platform-benefits ul { display: grid; gap: 0.35rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0.5rem 0 0; padding: 0; }
.tp-platform-benefits li { background: rgba(15, 33, 54, 0.56); border: 1px solid rgba(120, 163, 204, 0.16); border-radius: 9px; min-width: 0; padding: 0.42rem 0.5rem; }
.tp-platform-benefits li strong, .tp-platform-benefits li span { display: block; }
.tp-platform-benefits li strong { color: #e6f2ff; font-size: 0.68rem; }
.tp-platform-benefits li span { color: #9db2ca; font-size: 0.63rem; line-height: 1.3; margin-top: 0.1rem; }
.tp-platform-plan-main, .tp-platform-workshop-main, .tp-platform-plan-meta, .tp-platform-workshop-meta { min-width: 0; }
.tp-platform-plan-main strong, .tp-platform-workshop-main strong { color: #f3f7fc; display: block; font-size: 0.9rem; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-platform-plan-main span, .tp-platform-workshop-main span { color: #77baff; display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.68rem; font-weight: 800; margin-top: 0.14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-platform-plan-main small, .tp-platform-workshop-main small, .tp-platform-plan-meta small, .tp-platform-workshop-meta small { color: #9baec2; display: block; font-size: 0.73rem; font-weight: 650; margin-top: 0.18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-platform-plan-meta span { color: #f4f7fb; display: block; font-size: 0.8rem; font-weight: 850; }
.tp-platform-status { border: 1px solid rgba(129, 153, 183, 0.24); border-radius: 999px; color: #bdc9d8; display: inline-flex; font-size: 0.69rem; font-weight: 900; padding: 0.22rem 0.5rem; text-transform: capitalize; }
.tp-platform-status.is-active { background: rgba(22, 163, 74, 0.14); border-color: rgba(73, 210, 127, 0.28); color: #7be5a2; }
.tp-platform-status.is-trial, .tp-platform-status.is-pending { background: rgba(234, 179, 8, 0.12); border-color: rgba(246, 201, 69, 0.26); color: #f9d872; }
.tp-platform-status.is-suspended, .tp-platform-status.is-cancelled { background: rgba(239, 68, 68, 0.12); border-color: rgba(248, 113, 113, 0.26); color: #ff9696; }
.tp-platform-empty { align-items: center; color: #9eb0c4; display: flex; flex-direction: column; gap: 0.35rem; justify-content: center; min-height: 185px; padding: 1.5rem; text-align: center; }
.tp-platform-empty > i { align-items: center; background: rgba(21, 118, 248, 0.12); border-radius: 50%; color: #76bfff; display: inline-flex; height: 42px; justify-content: center; width: 42px; }
.tp-platform-empty strong { color: #edf5fd; font-size: 0.93rem; }
.tp-platform-empty span { font-size: 0.8rem; font-weight: 650; max-width: 320px; }
.tp-platform-next-step { align-items: center; background: rgba(23, 42, 64, 0.65); border: 1px dashed rgba(107, 166, 212, 0.30); border-radius: 15px; color: #b3c4d8; display: flex; gap: 0.75rem; margin-top: 1rem; padding: 0.82rem 0.95rem; }
.tp-platform-next-step > i { color: #76bfff; font-size: 1.1rem; }
.tp-platform-next-step div { flex: 1 1 auto; min-width: 0; }
.tp-platform-next-step strong, .tp-platform-next-step span { display: block; }
.tp-platform-next-step strong { color: #eaf3fd; font-size: 0.84rem; }
.tp-platform-next-step div span { font-size: 0.76rem; font-weight: 650; margin-top: 0.12rem; }
.tp-platform-version { background: rgba(73, 140, 196, 0.14); border: 1px solid rgba(99, 179, 242, 0.24); border-radius: 999px; color: #8ec9ff; flex: 0 0 auto; font-size: 0.71rem; font-weight: 900; padding: 0.3rem 0.55rem; }

.tp-platform-benefit-section { background: linear-gradient(165deg, rgba(24, 41, 64, 0.96), rgba(14, 28, 46, 0.99)); border: 1px solid rgba(121, 158, 196, 0.19); border-radius: 18px; margin-top: 1rem; overflow: hidden; }
.tp-platform-benefit-section h2 { color: #f5f9ff; font-size: 1.05rem; font-weight: 900; margin: 0; }
.tp-platform-benefit-section p { color: #9db0c5; font-size: 0.79rem; font-weight: 650; line-height: 1.35; margin: 0.16rem 0 0; }
.tp-platform-icon.is-benefit { background: rgba(56, 173, 235, 0.13); border: 1px solid rgba(99, 207, 255, 0.25); color: #78d8ff; }
.tp-platform-benefit-catalog { display: grid; gap: 0.65rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 0.85rem 1rem 1rem; }
.tp-platform-benefit-card { background: rgba(7, 17, 31, 0.34); border: 1px solid rgba(126, 160, 200, 0.2); border-radius: 12px; display: flex; flex-direction: column; min-height: 145px; padding: 0.7rem; }
.tp-platform-benefit-card.is-inactive { opacity: 0.55; }
.tp-platform-benefit-card-top { align-items: center; display: flex; justify-content: space-between; margin-bottom: 0.42rem; }
.tp-platform-benefit-card-top span, .tp-platform-benefit-card-top em { border-radius: 999px; font-size: 0.61rem; font-style: normal; font-weight: 900; padding: 0.14rem 0.36rem; }
.tp-platform-benefit-card-top span { background: rgba(80, 151, 220, 0.14); color: #9bcfff; }
.tp-platform-benefit-card-top em { background: rgba(50, 207, 163, 0.12); color: #80e5be; }
.tp-platform-benefit-card > strong { color: #edf6ff; font-size: 0.8rem; font-weight: 900; }
.tp-platform-benefit-card > p { color: #a5b8cc; font-size: 0.7rem; line-height: 1.35; margin: 0.28rem 0 0.65rem; }
.tp-platform-benefit-card > div:last-child { align-items: center; display: flex; gap: 0.45rem; margin-top: auto; justify-content: space-between; }
.tp-platform-benefit-card code { color: #86c5ff; font-size: 0.61rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-platform-benefit-card .btn { font-size: 0.67rem; font-weight: 850; }
.tp-platform-modal-note { align-items: flex-start; background: rgba(29, 104, 181, 0.14); border: 1px solid rgba(87, 172, 241, 0.22); border-radius: 12px; color: #b9d7ee; display: flex; font-size: 0.76rem; gap: 0.56rem; line-height: 1.4; margin-bottom: 0.9rem; padding: 0.7rem 0.76rem; }
.tp-platform-modal-note > i { color: #7ed4ff; margin-top: 0.08rem; }
.tp-platform-modal-note strong { color: #e6f4ff; }
.tp-platform-entitlement-grid { display: grid; gap: 0.62rem; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }
.tp-platform-entitlement { align-items: flex-start; background: rgba(7, 16, 29, 0.42); border: 1px solid rgba(128, 176, 218, 0.2); border-radius: 12px; cursor: pointer; display: flex; gap: 0.62rem; min-height: 98px; padding: 0.72rem; }
.tp-platform-entitlement:has(input:checked) { background: rgba(30, 112, 207, 0.16); border-color: rgba(87, 179, 255, 0.64); box-shadow: inset 0 0 0 1px rgba(74, 162, 235, 0.11); }
.tp-platform-entitlement.is-inactive { opacity: 0.58; }
.tp-platform-entitlement input { flex: 0 0 auto; margin-top: 0.18rem; }
.tp-platform-entitlement span { display: grid; min-width: 0; }
.tp-platform-entitlement strong { color: #eef6ff; font-size: 0.77rem; }
.tp-platform-entitlement small { color: #a5b9cd; font-size: 0.68rem; line-height: 1.35; margin-top: 0.16rem; }
.tp-platform-entitlement em { color: #84caef; font-size: 0.6rem; font-style: normal; font-weight: 900; margin-top: 0.34rem; text-transform: uppercase; }

.tp-platform-modal { background: #15243a; border: 1px solid rgba(128, 176, 218, 0.26); color: #edf5fd; }
.tp-platform-modal .modal-header { align-items: flex-start; border-bottom-color: rgba(144, 171, 199, 0.18); padding: 1rem 1.1rem; }
.tp-platform-modal .modal-header h3 { color: #f7fbff; font-size: 1.12rem; font-weight: 900; margin: 0; }
.tp-platform-modal .modal-header p { color: #9eb3c9; font-size: 0.79rem; font-weight: 650; margin: 0.2rem 0 0; }
.tp-platform-modal .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.tp-platform-modal .modal-body { padding: 1.1rem; }
.tp-platform-modal .modal-footer { border-top-color: rgba(144, 171, 199, 0.18); padding: 0.85rem 1.1rem; }
.tp-platform-modal .form-label { color: #c8d7e6; font-size: 0.76rem; font-weight: 850; }
.tp-platform-modal .form-control, .tp-platform-modal .form-select { background-color: rgba(7, 16, 29, 0.62); border-color: rgba(133, 168, 202, 0.32); color: #f2f7fc; }
.tp-platform-modal .form-control:focus, .tp-platform-modal .form-select:focus { background-color: rgba(7, 16, 29, 0.82); border-color: #4a9ee8; box-shadow: 0 0 0 0.18rem rgba(56, 147, 233, 0.16); color: #fff; }

body.tp-theme-light .tp-platform-header { background: radial-gradient(circle at 92% 18%, rgba(17, 161, 183, 0.16), transparent 28%), radial-gradient(circle at 3% 104%, rgba(67, 127, 183, 0.16), transparent 36%), linear-gradient(130deg, #f9fbfb, #edf7fa 60%, #eaf7f2); border-color: rgba(117, 166, 181, 0.42); }
body.tp-theme-light .tp-platform-header h1 { color: #17314a; }
body.tp-theme-light .tp-platform-header p { color: #50708a; }
body.tp-theme-light .tp-platform-eyebrow { color: #2478a9; }
body.tp-theme-light .tp-platform-operator { background: rgba(255, 255, 255, 0.65); border-color: rgba(93, 151, 178, 0.36); color: #193952; }
body.tp-theme-light .tp-platform-operator strong { color: #193952; }
body.tp-theme-light .tp-platform-operator small { color: #587189; }
body.tp-theme-light .tp-platform-stats article, body.tp-theme-light .tp-platform-card { background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 248, 0.98)); border-color: rgba(143, 169, 180, 0.32); }
body.tp-theme-light .tp-platform-stats span, body.tp-theme-light .tp-platform-card p, body.tp-theme-light .tp-platform-plan-main small, body.tp-theme-light .tp-platform-workshop-main small, body.tp-theme-light .tp-platform-plan-meta small, body.tp-theme-light .tp-platform-workshop-meta small, body.tp-theme-light .tp-platform-empty { color: #657b91; }
body.tp-theme-light .tp-platform-stats strong, body.tp-theme-light .tp-platform-card h2, body.tp-theme-light .tp-platform-plan-main strong, body.tp-theme-light .tp-platform-workshop-main strong, body.tp-theme-light .tp-platform-plan-meta span, body.tp-theme-light .tp-platform-empty strong { color: #19324b; }
body.tp-theme-light .tp-platform-next-step { background: rgba(246, 252, 251, 0.92); border-color: rgba(97, 154, 178, 0.42); color: #557087; }
body.tp-theme-light .tp-platform-next-step strong { color: #193952; }
body.tp-theme-light .tp-platform-plan-catalog { background: linear-gradient(145deg, rgba(222, 236, 251, 0.78), rgba(247, 252, 251, 0.9)); }
body.tp-theme-light .tp-platform-catalog-copy strong, body.tp-theme-light .tp-platform-preset > strong { color: #1b3854; }
body.tp-theme-light .tp-platform-preset { background: rgba(255, 255, 255, 0.78); border-color: rgba(125, 160, 190, 0.32); }
body.tp-theme-light .tp-platform-preset > small, body.tp-theme-light .tp-platform-preset > ul { color: #5d758d; }
body.tp-theme-light .tp-platform-benefits li { background: rgba(244, 250, 253, 0.88); border-color: rgba(123, 161, 188, 0.24); }
body.tp-theme-light .tp-platform-benefits li strong { color: #24435f; }
body.tp-theme-light .tp-platform-benefits li span { color: #668096; }
body.tp-theme-light .tp-platform-sidebar { background: rgba(250, 253, 252, 0.92); border-color: rgba(123, 165, 182, 0.3); }
body.tp-theme-light .tp-platform-sidebar > a { color: #49647c; }
body.tp-theme-light .tp-platform-sidebar > a:hover, body.tp-theme-light .tp-platform-sidebar > a:focus-visible, body.tp-theme-light .tp-platform-sidebar > a.is-active { background: rgba(69, 148, 211, 0.12); border-color: rgba(69, 148, 211, 0.22); color: #183d58; }
body.tp-theme-light .tp-platform-sidebar-help { color: #668096; }
body.tp-theme-light .tp-platform-sidebar-help strong { color: #31536d; }
body.tp-theme-light .tp-platform-benefit-section { background: linear-gradient(160deg, rgba(255, 255, 255, 0.97), rgba(244, 250, 249, 0.98)); border-color: rgba(143, 169, 180, 0.32); }
body.tp-theme-light .tp-platform-benefit-section h2, body.tp-theme-light .tp-platform-benefit-card > strong { color: #19324b; }
body.tp-theme-light .tp-platform-benefit-section p, body.tp-theme-light .tp-platform-benefit-card > p { color: #657b91; }
body.tp-theme-light .tp-platform-benefit-card, body.tp-theme-light .tp-platform-entitlement { background: rgba(252, 254, 254, 0.9); border-color: rgba(123, 161, 188, 0.25); }
body.tp-theme-light .tp-platform-entitlement:has(input:checked) { background: rgba(216, 239, 255, 0.7); border-color: rgba(76, 155, 217, 0.56); }
body.tp-theme-light .tp-platform-entitlement strong { color: #24435f; }
body.tp-theme-light .tp-platform-entitlement small { color: #668096; }
body.tp-theme-light .tp-platform-modal-note { background: rgba(224, 243, 255, 0.72); border-color: rgba(99, 168, 216, 0.32); color: #41647d; }
body.tp-theme-light .tp-platform-modal-note strong { color: #1f4a68; }
body.tp-theme-light .tp-platform-modal { background: #f6fbfa; border-color: rgba(114, 160, 179, 0.46); color: #1d344a; }
body.tp-theme-light .tp-platform-modal .modal-header, body.tp-theme-light .tp-platform-modal .modal-footer { border-color: rgba(132, 161, 176, 0.30); }
body.tp-theme-light .tp-platform-modal .modal-header h3, body.tp-theme-light .tp-platform-modal .form-label { color: #1d344a; }
body.tp-theme-light .tp-platform-modal .modal-header p { color: #60788d; }
body.tp-theme-light .tp-platform-modal .btn-close { filter: none; }
body.tp-theme-light .tp-platform-modal .form-control, body.tp-theme-light .tp-platform-modal .form-select { background: #fffdfa; border-color: rgba(141, 165, 176, 0.56); color: #23394e; }

/* Reuses addresses already saved in the workshop without sending client data elsewhere. */
.tp-address-autocomplete { position: relative; }
.tp-address-suggestions { position: absolute; z-index: 1085; top: calc(100% + 4px); right: 0; left: 0; max-height: 220px; overflow-y: auto; padding: 4px; border: 1px solid var(--tp-border, #c7d5e8); border-radius: 10px; background: var(--tp-surface, #ffffff); box-shadow: 0 14px 28px rgba(17, 44, 78, 0.18); }
.tp-address-suggestion { display: block; width: 100%; padding: 9px 11px; border: 0; border-radius: 7px; color: var(--tp-text, #17243a); background: transparent; text-align: left; font: inherit; }
.tp-address-suggestion:hover, .tp-address-suggestion:focus-visible { color: var(--tp-text, #17243a); background: var(--tp-surface-soft, #edf5ff); outline: none; }
.tp-address-suggestion-title { display: block; font-weight: 700; }
.tp-address-suggestion-meta { display: block; margin-top: 2px; color: var(--tp-muted-text, #63728c); font-size: 0.78rem; }
body.tp-theme-dark .tp-address-suggestions { background: #202733; border-color: #48566a; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.34); }
body.tp-theme-dark .tp-address-suggestion { color: #f1f5f9; }
body.tp-theme-dark .tp-address-suggestion:hover, body.tp-theme-dark .tp-address-suggestion:focus-visible { color: #ffffff; background: #2b3a50; }
body.tp-theme-dark .tp-address-suggestion-meta { color: #aebdd0; }

@media (max-width: 1100px) {
    .tp-platform-workspace { grid-template-columns: 1fr; }
    .tp-platform-sidebar { align-items: center; display: flex; overflow-x: auto; position: static; }
    .tp-platform-sidebar-heading, .tp-platform-sidebar-help { display: none; }
    .tp-platform-sidebar > a { flex: 0 0 auto; }
    .tp-platform-grid { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
    .tp-platform-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tp-platform-preset > p { min-height: 0; }
}
@media (max-width: 760px) {
    .tp-platform-shell { padding: 16px; }
    .tp-platform-topbar { align-items: flex-start; flex-direction: column; }
    .tp-platform-topbar-actions { justify-content: flex-start; }
    .tp-platform-page { padding: 1rem !important; }
    .tp-platform-workspace { gap: 0.72rem; }
    .tp-platform-sidebar { border-radius: 14px; padding: 0.42rem; }
    .tp-platform-header { align-items: stretch; flex-direction: column; padding: 1rem; }
    .tp-platform-operator { flex-basis: auto; min-width: 0; }
    .tp-platform-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tp-platform-card-head { align-items: stretch; flex-direction: column; }
    .tp-platform-card-head .btn { align-self: flex-start; }
    .tp-platform-plan-row, .tp-platform-workshop-row { align-items: flex-start; grid-template-columns: minmax(0, 1fr) auto; }
    .tp-platform-plan-meta, .tp-platform-workshop-meta { grid-column: 1; grid-row: 2; }
    .tp-platform-plan-row > .btn, .tp-platform-workshop-row > .btn { grid-column: 2; grid-row: 1 / span 2; }
    .tp-platform-next-step { align-items: flex-start; }
    .tp-platform-version { margin-left: auto; }
    .tp-platform-benefits ul { grid-template-columns: 1fr; }
    .tp-platform-benefit-catalog, .tp-platform-entitlement-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .tp-platform-shell { padding: 12px; }
    .tp-platform-brand { align-items: flex-start; }
    .tp-platform-topbar-actions .btn,
    .tp-platform-chip { justify-content: center; width: 100%; }
    .tp-platform-stats { grid-template-columns: 1fr; }
    .tp-platform-preset-grid { grid-template-columns: 1fr; }
    .tp-platform-next-step { flex-wrap: wrap; }
    .tp-platform-next-step div { flex-basis: calc(100% - 34px); }
}

/* Client directory actions: mail is violet when available and neutral when missing. */
.tp-client-email-action {
    background: rgba(139, 92, 246, 0.08) !important;
    border-color: #8b5cf6 !important;
    color: #b69cff !important;
}

.tp-client-email-action:hover,
.tp-client-email-action:focus-visible {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
}

.tp-client-email-empty,
.tp-client-email-empty:disabled {
    background: rgba(148, 163, 184, 0.07) !important;
    border-color: #657184 !important;
    color: #8a96a8 !important;
    cursor: not-allowed;
    opacity: 1 !important;
}

body.tp-theme-light .tp-client-email-action {
    background: rgba(124, 58, 237, 0.08) !important;
    border-color: #7c3aed !important;
    color: #6d28d9 !important;
}

body.tp-theme-light .tp-client-email-empty,
body.tp-theme-light .tp-client-email-empty:disabled {
    background: rgba(100, 116, 139, 0.06) !important;
    border-color: #94a3b8 !important;
    color: #64748b !important;
}

/* The client directory keeps the next scheduled action visible without adding another card. */
.tp-client-next-action-cell {
    min-width: 148px;
}

.tp-client-next-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #88c8ff;
    text-decoration: none;
    line-height: 1.12;
}

.tp-client-next-action:hover,
.tp-client-next-action:focus-visible {
    color: #21d4fd;
    text-decoration: none;
}

.tp-client-next-action i {
    color: #20c7d9;
}

.tp-client-next-action span {
    display: grid;
    gap: 0.14rem;
}

.tp-client-next-action small {
    color: var(--tp-text-muted, #aab7c8);
    font-size: 0.72rem;
}

.tp-client-no-action {
    color: var(--tp-text-muted, #8f9aad);
    font-size: 0.82rem;
    white-space: nowrap;
}

.tp-client-no-action i {
    margin-right: 0.26rem;
}

.tp-client-next-action-help {
    color: #7d8ca2;
    cursor: help;
    font-size: 0.72rem;
}

body.tp-theme-light .tp-client-next-action {
    color: #075ea8;
}

body.tp-theme-light .tp-client-next-action:hover,
body.tp-theme-light .tp-client-next-action:focus-visible {
    color: #0054a6;
}

body.tp-theme-light .tp-client-next-action small,
body.tp-theme-light .tp-client-no-action {
    color: #64748b;
}

body.tp-theme-light .tp-client-next-action-help {
    color: #64748b;
}

/* Technical visits use a dedicated workspace so planning a field visit is obvious at first glance. */
.tp-visits-hub {
    background: linear-gradient(135deg, rgba(17, 43, 72, 0.98), rgba(21, 34, 52, 0.98));
    border: 1px solid rgba(77, 148, 214, 0.35);
    border-radius: 18px;
    box-shadow: 0 16px 34px rgba(1, 10, 23, 0.18);
    overflow: hidden;
}

.tp-visits-hub-header {
    align-items: center;
    border-bottom: 1px solid rgba(139, 181, 221, 0.16);
    display: flex;
    gap: 1.2rem;
    justify-content: space-between;
    padding: 1.25rem 1.35rem;
}

.tp-visits-hub-title,
.tp-visits-hub-actions,
.tp-visits-panel-head,
.tp-visit-body-head,
.tp-visit-state,
.tp-visit-status-form,
.tp-visit-commitment {
    align-items: center;
    display: flex;
}

.tp-visits-hub-title { gap: 0.85rem; }

.tp-visits-hub-icon {
    align-items: center;
    background: linear-gradient(145deg, #159ee9, #2256cf);
    border-radius: 13px;
    box-shadow: 0 8px 18px rgba(18, 124, 222, 0.3);
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 48px;
    font-size: 1.25rem;
    height: 48px;
    justify-content: center;
}

.tp-visits-hub-kicker {
    color: #68cbff;
    display: block;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 0.14rem;
    text-transform: uppercase;
}

.tp-visits-hub h5 { color: #ffffff; font-size: 1.2rem; margin: 0; }
.tp-visits-hub-title p { color: #b9cbe0; font-size: 0.86rem; margin: 0.2rem 0 0; }
.tp-visits-hub-actions { flex-wrap: wrap; gap: 0.55rem; justify-content: flex-end; }
.tp-visits-agenda-link { white-space: nowrap; }
.tp-visits-create-button { box-shadow: 0 8px 16px rgba(30, 115, 255, 0.24); min-height: 40px; white-space: nowrap; }

.tp-visits-metrics {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0.9rem 1.35rem;
}

.tp-visits-metric {
    background: rgba(6, 20, 36, 0.42);
    border: 1px solid rgba(139, 181, 221, 0.14);
    border-left: 3px solid #308cf5;
    border-radius: 10px;
    min-width: 0;
    padding: 0.6rem 0.72rem;
}

.tp-visits-metric small { color: #b9cbe0; display: block; font-size: 0.7rem; font-weight: 700; }
.tp-visits-metric strong { color: #ffffff; display: block; font-size: 1.25rem; line-height: 1.05; margin-top: 0.22rem; }
.tp-visits-metric.is-warning { border-left-color: #e3ad22; }
.tp-visits-metric.is-danger { border-left-color: #ef5269; }
.tp-visits-metric.is-info { border-left-color: #20c7d9; }

.tp-visits-workspace {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: minmax(0, 1.17fr) minmax(320px, 0.83fr);
    padding: 0.15rem 1.35rem 1.35rem;
}

.tp-visits-panel {
    background: rgba(7, 19, 34, 0.34);
    border: 1px solid rgba(139, 181, 221, 0.16);
    border-radius: 13px;
    min-width: 0;
    padding: 0.9rem;
}

.tp-visits-panel-head { gap: 0.75rem; justify-content: space-between; margin-bottom: 0.78rem; }
.tp-visits-panel-head h6 { color: #f1f7ff; font-size: 0.94rem; margin: 0; }
.tp-visits-panel-head h6 i { color: #4bc8ff; margin-right: 0.35rem; }
.tp-visits-panel-head p { color: #a8bbcf; font-size: 0.75rem; margin: 0.16rem 0 0; }
.tp-visits-panel-link { color: #72cfff; font-size: 0.76rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.tp-visits-panel-link:hover { color: #ffffff; }

.tp-visits-list,
.tp-visits-commitments { display: grid; gap: 0.55rem; }

.tp-visit-card {
    align-items: stretch;
    background: rgba(24, 45, 70, 0.66);
    border: 1px solid rgba(119, 173, 225, 0.2);
    border-radius: 11px;
    display: grid;
    gap: 0.72rem;
    grid-template-columns: 87px minmax(0, 1fr) auto;
    padding: 0.68rem;
}

.tp-visit-card.is-overdue { border-color: rgba(239, 82, 105, 0.65); }
.tp-visit-date { border-right: 1px solid rgba(157, 195, 229, 0.18); display: grid; padding-right: 0.58rem; place-content: center start; }
.tp-visit-date strong { color: #ffffff; font-size: 0.78rem; }
.tp-visit-date small { color: #79ccff; font-size: 0.72rem; font-weight: 700; }
.tp-visit-body { min-width: 0; }
.tp-visit-body-head { gap: 0.6rem; justify-content: space-between; }
.tp-visit-body-head strong { color: #ffffff; font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-visit-body-head a { color: #76caff; font-size: 0.67rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.tp-visit-body > span { color: #d6e5f5; display: block; font-size: 0.75rem; margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-visit-body small { color: #a7bad0; display: block; font-size: 0.67rem; line-height: 1.45; margin-top: 0.25rem; }
.tp-visit-body small i { color: #5caee1; margin-right: 0.15rem; }
.tp-visit-body em { color: #55d0ec; display: block; font-size: 0.66rem; font-style: normal; margin-top: 0.2rem; }
.tp-visit-state { align-items: flex-end; flex-direction: column; gap: 0.3rem; justify-content: flex-start; }
.tp-visit-state .badge { font-size: 0.62rem; }
.tp-visit-status-form { gap: 0.38rem; grid-column: 2 / -1; justify-content: flex-end; }
.tp-visit-status-form .form-select { max-width: 172px; }

.tp-visit-commitment {
    align-items: flex-start;
    background: rgba(24, 45, 70, 0.54);
    border: 1px solid rgba(119, 173, 225, 0.17);
    border-left: 3px solid #398cf2;
    border-radius: 10px;
    color: inherit;
    gap: 0.7rem;
    justify-content: space-between;
    padding: 0.72rem;
    text-decoration: none;
}

.tp-visit-commitment:hover { background: rgba(36, 67, 101, 0.76); color: inherit; transform: translateY(-1px); }
.tp-visit-commitment--danger { border-left-color: #ef5269; }
.tp-visit-commitment--warning { border-left-color: #e3ad22; }
.tp-visit-commitment--success { border-left-color: #1aae70; }
.tp-visit-commitment strong { color: #ffffff; display: block; font-size: 0.78rem; }
.tp-visit-commitment span { color: #c7d7e7; display: block; font-size: 0.7rem; margin-top: 0.16rem; }
.tp-visit-commitment small { color: #91a8be; display: block; font-size: 0.66rem; margin-top: 0.22rem; }
.tp-visit-commitment > .badge { flex: 0 0 auto; font-size: 0.62rem; }

.tp-visits-empty { align-items: center; color: #9eb4ca; display: grid; justify-items: center; min-height: 180px; padding: 1.2rem; text-align: center; }
.tp-visits-empty > i { color: #4bbef6; font-size: 1.4rem; margin-bottom: 0.2rem; }
.tp-visits-empty strong { color: #edf6ff; font-size: 0.85rem; }
.tp-visits-empty span { font-size: 0.74rem; line-height: 1.45; margin-top: 0.28rem; max-width: 310px; }
.tp-visits-empty .btn { margin-top: 0.72rem; }

body.tp-theme-light .tp-visits-hub { background: linear-gradient(135deg, #ecf7ff, #f9fcff); border-color: #bddbef; box-shadow: 0 14px 30px rgba(33, 84, 128, 0.1); }
body.tp-theme-light .tp-visits-hub-header { border-bottom-color: #d8e8f4; }
body.tp-theme-light .tp-visits-hub h5,
body.tp-theme-light .tp-visits-metric strong,
body.tp-theme-light .tp-visits-panel-head h6,
body.tp-theme-light .tp-visit-date strong,
body.tp-theme-light .tp-visit-body-head strong,
body.tp-theme-light .tp-visit-commitment strong,
body.tp-theme-light .tp-visits-empty strong { color: #152b45; }
body.tp-theme-light .tp-visits-hub-title p,
body.tp-theme-light .tp-visits-metric small,
body.tp-theme-light .tp-visits-panel-head p,
body.tp-theme-light .tp-visit-body small,
body.tp-theme-light .tp-visit-commitment small,
body.tp-theme-light .tp-visits-empty { color: #63758c; }
body.tp-theme-light .tp-visits-metric,
body.tp-theme-light .tp-visits-panel,
body.tp-theme-light .tp-visit-card,
body.tp-theme-light .tp-visit-commitment { background: rgba(255, 255, 255, 0.76); border-color: #d6e5f1; }
body.tp-theme-light .tp-visit-date { border-right-color: #d8e5ef; }
body.tp-theme-light .tp-visit-body > span,
body.tp-theme-light .tp-visit-commitment span { color: #324960; }

/* The visit order picker keeps large order lists off the initial page and readable in the modal. */
.tp-visit-order-picker {
    background: rgba(9, 24, 40, 0.48);
    border: 1px solid rgba(133, 177, 219, 0.24);
    border-radius: 10px;
    padding: 0.48rem;
}

.tp-visit-order-empty,
.tp-visit-order-selected {
    align-items: center;
    display: flex;
    gap: 0.55rem;
    min-height: 42px;
}

.tp-visit-order-empty > i {
    align-items: center;
    background: rgba(24, 131, 223, 0.14);
    border-radius: 8px;
    color: #68cbff;
    display: inline-flex;
    height: 31px;
    justify-content: center;
    width: 31px;
}

.tp-visit-order-empty > div,
.tp-visit-order-selected-copy { min-width: 0; }
.tp-visit-order-empty strong,
.tp-visit-order-selected strong { color: #eff7ff; display: block; font-size: 0.79rem; }
.tp-visit-order-empty small,
.tp-visit-order-selected small { color: #aebfd1; display: block; font-size: 0.67rem; line-height: 1.25; }
.tp-visit-order-empty .btn { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }

.tp-visit-order-selected {
    background: rgba(21, 112, 198, 0.13);
    border: 1px solid rgba(77, 187, 246, 0.32);
    border-radius: 8px;
    padding: 0.42rem 0.5rem;
}

.tp-visit-order-selected-copy { flex: 1 1 auto; }
.tp-visit-order-selected-actions { display: flex; flex: 0 0 auto; gap: 0.35rem; }
.tp-visit-order-selected-actions .btn { white-space: nowrap; }
.tp-visit-order-search { margin-top: 0.55rem; }
.tp-visit-order-search .input-group-text { background: rgba(6, 18, 31, 0.72); border-color: rgba(133, 177, 219, 0.27); color: #6bcaff; }
.tp-visit-order-search-hint { color: #9fb4c9; display: block; font-size: 0.67rem; margin: 0.42rem 0 0.35rem; }

.tp-visit-order-results { display: grid; gap: 0.35rem; max-height: 220px; overflow-y: auto; }
.tp-visit-order-result {
    background: rgba(7, 19, 33, 0.64);
    border: 1px solid rgba(133, 177, 219, 0.18);
    border-radius: 8px;
    color: #eaf5ff;
    display: grid;
    gap: 0.1rem;
    padding: 0.5rem 0.58rem;
    text-align: left;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
    width: 100%;
}

.tp-visit-order-result:hover,
.tp-visit-order-result:focus-visible { background: rgba(22, 111, 191, 0.2); border-color: #55c8ff; outline: 0; transform: translateY(-1px); }
.tp-visit-order-result strong { color: #79d2ff; font-size: 0.76rem; }
.tp-visit-order-result span { color: #edf5fe; font-size: 0.74rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-visit-order-result small { color: #aebfd1; font-size: 0.66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-visit-order-results > p { color: #aebfd1; font-size: 0.73rem; margin: 0.2rem 0; text-align: center; }

body.tp-theme-light .tp-visit-order-picker { background: #f4f9fd; border-color: #c9ddeb; }
body.tp-theme-light .tp-visit-order-empty strong,
body.tp-theme-light .tp-visit-order-selected strong { color: #18304a; }
body.tp-theme-light .tp-visit-order-empty small,
body.tp-theme-light .tp-visit-order-selected small,
body.tp-theme-light .tp-visit-order-search-hint { color: #62758a; }
body.tp-theme-light .tp-visit-order-selected { background: #eaf6ff; border-color: #a9d9ef; }
body.tp-theme-light .tp-visit-order-search .input-group-text,
body.tp-theme-light .tp-visit-order-result { background: #ffffff; border-color: #d0e1ed; }
body.tp-theme-light .tp-visit-order-result span { color: #20374e; }
body.tp-theme-light .tp-visit-order-result small,
body.tp-theme-light .tp-visit-order-results > p { color: #64768b; }

@media (max-width: 575px) {
    .tp-visit-order-empty { align-items: flex-start; flex-wrap: wrap; }
    .tp-visit-order-empty > div { flex: 1 1 calc(100% - 42px); }
    .tp-visit-order-empty .btn { margin-left: 37px; }
    .tp-visit-order-selected { align-items: stretch; flex-direction: column; }
    .tp-visit-order-selected-actions { flex-wrap: wrap; }
}

@media (max-width: 1080px) {
    .tp-visits-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .tp-visits-hub-header { align-items: stretch; flex-direction: column; padding: 1rem; }
    .tp-visits-hub-actions { justify-content: stretch; }
    .tp-visits-hub-actions .btn { flex: 1 1 auto; }
    .tp-visits-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.72rem 1rem; }
    .tp-visits-workspace { padding: 0.12rem 1rem 1rem; }
    .tp-visit-card { grid-template-columns: 1fr auto; }
    .tp-visit-date { border-bottom: 1px solid rgba(157, 195, 229, 0.18); border-right: 0; grid-column: 1 / -1; padding: 0 0 0.45rem; }
    .tp-visit-state { grid-column: 2; grid-row: 2; }
    .tp-visit-status-form { grid-column: 1 / -1; justify-content: stretch; }
    .tp-visit-status-form .form-select { max-width: none; }
}

/* Page accents give each work area a recognizable tone without changing action semantics. */
:root {
    --tp-page-accent: #2f90ef;
    --tp-page-accent-rgb: 47, 144, 239;
    --tp-page-accent-alt: #25c4dc;
    --tp-page-accent-alt-rgb: 37, 196, 220;
}

body.tp-module-dashboard {
    --tp-page-accent: #377de6;
    --tp-page-accent-rgb: 55, 125, 230;
    --tp-page-accent-alt: #25c0d4;
    --tp-page-accent-alt-rgb: 37, 192, 212;
}

body.tp-module-orders {
    --tp-page-accent: #268af0;
    --tp-page-accent-rgb: 38, 138, 240;
    --tp-page-accent-alt: #20c4dc;
    --tp-page-accent-alt-rgb: 32, 196, 220;
}

body.tp-module-agenda {
    --tp-page-accent: #6276e8;
    --tp-page-accent-rgb: 98, 118, 232;
    --tp-page-accent-alt: #28bfd3;
    --tp-page-accent-alt-rgb: 40, 191, 211;
}

body.tp-module-clients {
    --tp-page-accent: #9b63dc;
    --tp-page-accent-rgb: 155, 99, 220;
    --tp-page-accent-alt: #35b7d3;
    --tp-page-accent-alt-rgb: 53, 183, 211;
}

body.tp-module-equipment {
    --tp-page-accent: #4f7fe8;
    --tp-page-accent-rgb: 79, 127, 232;
    --tp-page-accent-alt: #2db9d0;
    --tp-page-accent-alt-rgb: 45, 185, 208;
}

body.tp-module-inventory {
    --tp-page-accent: #1aab8a;
    --tp-page-accent-rgb: 26, 171, 138;
    --tp-page-accent-alt: #58c56b;
    --tp-page-accent-alt-rgb: 88, 197, 107;
}

body.tp-module-finance {
    --tp-page-accent: #dc9a22;
    --tp-page-accent-rgb: 220, 154, 34;
    --tp-page-accent-alt: #22ae78;
    --tp-page-accent-alt-rgb: 34, 174, 120;
}

body.tp-module-projects {
    --tp-page-accent: #8a65dc;
    --tp-page-accent-rgb: 138, 101, 220;
    --tp-page-accent-alt: #e278ad;
    --tp-page-accent-alt-rgb: 226, 120, 173;
}

body.tp-module-settings {
    --tp-page-accent: #7184a3;
    --tp-page-accent-rgb: 113, 132, 163;
    --tp-page-accent-alt: #4bbde6;
    --tp-page-accent-alt-rgb: 75, 189, 230;
}

body.tp-module-history {
    --tp-page-accent: #4d92c8;
    --tp-page-accent-rgb: 77, 146, 200;
    --tp-page-accent-alt: #47c39a;
    --tp-page-accent-alt-rgb: 71, 195, 154;
}

body.tp-module-search {
    --tp-page-accent: #337ed7;
    --tp-page-accent-rgb: 51, 126, 215;
    --tp-page-accent-alt: #8c72dd;
    --tp-page-accent-alt-rgb: 140, 114, 221;
}

body.tp-module-templates {
    --tp-page-accent: #218a83;
    --tp-page-accent-rgb: 33, 138, 131;
    --tp-page-accent-alt: #4c9cec;
    --tp-page-accent-alt-rgb: 76, 156, 236;
}

body[class*="tp-module-"] .tp-app-content {
    background:
        radial-gradient(circle at 95% 0%, rgba(var(--tp-page-accent-rgb), 0.075), transparent 28rem),
        radial-gradient(circle at 20% 100%, rgba(var(--tp-page-accent-alt-rgb), 0.045), transparent 34rem);
}

body.tp-theme-dark:not(.tp-module-templates) .tp-page-header,
body.tp-theme-dark:not(.tp-module-templates) .dashboard-heading {
    background:
        radial-gradient(circle at 92% 0%, rgba(var(--tp-page-accent-rgb), 0.22), transparent 34%),
        radial-gradient(circle at 6% 105%, rgba(var(--tp-page-accent-alt-rgb), 0.13), transparent 38%),
        linear-gradient(135deg, rgba(24, 35, 52, 0.99), rgba(28, 44, 66, 0.97)) !important;
    border-color: rgba(var(--tp-page-accent-rgb), 0.32) !important;
}

body.tp-theme-light:not(.tp-module-templates) .tp-page-header,
body.tp-theme-light:not(.tp-module-templates) .dashboard-heading {
    background:
        radial-gradient(circle at 92% 0%, rgba(var(--tp-page-accent-rgb), 0.15), transparent 35%),
        radial-gradient(circle at 6% 105%, rgba(var(--tp-page-accent-alt-rgb), 0.10), transparent 40%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 252, 0.95)) !important;
    border-color: rgba(var(--tp-page-accent-rgb), 0.28) !important;
}

body[class*="tp-module-"] .tp-page-header,
body[class*="tp-module-"] .dashboard-heading {
    isolation: isolate;
    overflow: visible;
    position: relative;
    z-index: 20;
}

body[class*="tp-module-"] .tp-page-header-actions,
body[class*="tp-module-"] .dashboard-heading-actions {
    position: relative;
    z-index: 30;
}

body[class*="tp-module-"] .tp-page-header .dropdown-menu,
body[class*="tp-module-"] .dashboard-heading .dropdown-menu {
    z-index: 1090;
}

body[class*="tp-module-"] .tp-page-header::after,
body[class*="tp-module-"] .dashboard-heading::after {
    background: linear-gradient(90deg, var(--tp-page-accent), var(--tp-page-accent-alt));
    border-radius: 999px;
    bottom: 0;
    content: "";
    height: 3px;
    left: 1.25rem;
    position: absolute;
    width: 4rem;
    z-index: -1;
}

body[class*="tp-module-"] .tp-page-header-title > i.text-primary,
body[class*="tp-module-"] .dashboard-heading h5 > i.text-primary {
    color: var(--tp-page-accent) !important;
}

body.tp-theme-dark[class*="tp-module-"] .tp-table-toolbar,
body.tp-theme-dark[class*="tp-module-"] .tp-orders-filter-toolbar,
body.tp-theme-dark[class*="tp-module-"] .tp-fin-summary-card,
body.tp-theme-dark[class*="tp-module-"] .tp-main-radar-focus,
body.tp-theme-dark[class*="tp-module-"] .tp-main-radar-panel,
body.tp-theme-dark[class*="tp-module-"] .tp-main-radar-kpi,
body.tp-theme-dark[class*="tp-module-"] .tp-main-radar-item,
body.tp-theme-dark[class*="tp-module-"] .tp-main-alert-card {
    box-shadow: inset 3px 0 0 rgba(var(--tp-page-accent-rgb), 0.65), 0 18px 40px rgba(5, 10, 20, 0.24) !important;
}

body.tp-theme-light[class*="tp-module-"] .tp-table-toolbar,
body.tp-theme-light[class*="tp-module-"] .tp-orders-filter-toolbar,
body.tp-theme-light[class*="tp-module-"] .tp-fin-summary-card,
body.tp-theme-light[class*="tp-module-"] .tp-main-radar-focus,
body.tp-theme-light[class*="tp-module-"] .tp-main-radar-panel,
body.tp-theme-light[class*="tp-module-"] .tp-main-radar-kpi,
body.tp-theme-light[class*="tp-module-"] .tp-main-radar-item,
body.tp-theme-light[class*="tp-module-"] .tp-main-alert-card {
    box-shadow: inset 3px 0 0 rgba(var(--tp-page-accent-rgb), 0.62), 0 16px 30px rgba(123, 99, 62, 0.08) !important;
}

.tp-visits-hub {
    background:
        radial-gradient(circle at 93% 0%, rgba(var(--tp-page-accent-rgb), 0.28), transparent 35%),
        radial-gradient(circle at 5% 100%, rgba(var(--tp-page-accent-alt-rgb), 0.16), transparent 44%),
        linear-gradient(135deg, #102b4a, #102d50 58%, #10243f) !important;
    border-color: rgba(var(--tp-page-accent-rgb), 0.58) !important;
}

body.tp-theme-light .tp-visits-hub {
    background:
        radial-gradient(circle at 93% 0%, rgba(var(--tp-page-accent-rgb), 0.15), transparent 35%),
        radial-gradient(circle at 5% 100%, rgba(var(--tp-page-accent-alt-rgb), 0.11), transparent 42%),
        linear-gradient(135deg, #eff9ff, #fbfdff) !important;
    border-color: rgba(var(--tp-page-accent-rgb), 0.30) !important;
}

@media (max-width: 576px) {
    body[class*="tp-module-"] .tp-page-header::after,
    body[class*="tp-module-"] .dashboard-heading::after { left: 1rem; }
}
/* Read-only notices synchronized from the private AtomFixPro service. */
.tp-platform-announcements { position: fixed; top: 5rem; right: 1.25rem; z-index: 1085; display: grid; gap: .7rem; width: min(30rem, calc(100vw - 2rem)); pointer-events: none; }
.tp-platform-announcement { --tp-announcement-border: #258fe6; --tp-announcement-left: #30d4ff; --tp-announcement-spark: rgba(43, 177, 255, .28); --tp-announcement-start: #102d52; --tp-announcement-end: #0b1b36; --tp-announcement-icon-border: rgba(105, 214, 255, .52); --tp-announcement-icon-bg: #15558b; --tp-announcement-icon-color: #c7f1ff; --tp-announcement-eyebrow: #8de5ff; --tp-announcement-message: #d7ebfb; --tp-announcement-close-border: rgba(198, 235, 255, .35); --tp-announcement-close-bg: rgba(4, 17, 38, .28); --tp-announcement-close-color: #e7f7ff; --tp-announcement-close-hover-border: #bdeeff; --tp-announcement-close-hover-bg: rgba(90, 205, 255, .2); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .85rem; align-items: start; overflow: hidden; padding: 1rem 1rem 1rem 1.08rem; border: 1px solid var(--tp-announcement-border); border-left: 5px solid var(--tp-announcement-left); border-radius: 15px; background: radial-gradient(circle at 100% 0, var(--tp-announcement-spark), transparent 48%), linear-gradient(135deg, var(--tp-announcement-start), var(--tp-announcement-end)); box-shadow: 0 18px 42px rgba(1, 10, 27, .5); color: #fff; pointer-events: auto; animation: tp-platform-announcement-enter .24s ease-out both; }
.tp-platform-announcement.is-level-important { --tp-announcement-border: #e8ab00; --tp-announcement-left: #ffe35c; --tp-announcement-spark: rgba(255, 205, 39, .36); --tp-announcement-start: #584103; --tp-announcement-end: #261a03; --tp-announcement-icon-border: rgba(255, 231, 123, .72); --tp-announcement-icon-bg: #765705; --tp-announcement-icon-color: #fff5b4; --tp-announcement-eyebrow: #ffe982; --tp-announcement-message: #fff2c7; --tp-announcement-close-border: rgba(255, 237, 161, .58); --tp-announcement-close-bg: rgba(66, 47, 0, .42); --tp-announcement-close-color: #fff4c4; --tp-announcement-close-hover-border: #fff5ba; --tp-announcement-close-hover-bg: rgba(255, 215, 72, .28); }
.tp-platform-announcement.is-level-warning { --tp-announcement-border: #ef8831; --tp-announcement-left: #ffc06a; --tp-announcement-spark: rgba(255, 143, 48, .34); --tp-announcement-start: #5b2707; --tp-announcement-end: #281104; --tp-announcement-icon-border: rgba(255, 201, 126, .72); --tp-announcement-icon-bg: #80390c; --tp-announcement-icon-color: #ffe3c0; --tp-announcement-eyebrow: #ffd19a; --tp-announcement-message: #ffe7cf; --tp-announcement-close-border: rgba(255, 210, 151, .58); --tp-announcement-close-bg: rgba(71, 26, 0, .42); --tp-announcement-close-color: #fff0dc; --tp-announcement-close-hover-border: #ffe0b5; --tp-announcement-close-hover-bg: rgba(255, 151, 64, .28); }
.tp-platform-announcement.is-level-critical { --tp-announcement-border: #ec4f70; --tp-announcement-left: #ff91a6; --tp-announcement-spark: rgba(255, 82, 119, .34); --tp-announcement-start: #5d1025; --tp-announcement-end: #2a0712; --tp-announcement-icon-border: rgba(255, 164, 182, .72); --tp-announcement-icon-bg: #831d39; --tp-announcement-icon-color: #ffe0e7; --tp-announcement-eyebrow: #ffb1c1; --tp-announcement-message: #ffe0e7; --tp-announcement-close-border: rgba(255, 179, 195, .58); --tp-announcement-close-bg: rgba(81, 6, 26, .42); --tp-announcement-close-color: #ffebf0; --tp-announcement-close-hover-border: #ffd1db; --tp-announcement-close-hover-bg: rgba(255, 101, 132, .28); }
.tp-platform-announcement[hidden] { display: none !important; }
.tp-platform-announcement-icon { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid var(--tp-announcement-icon-border); border-radius: 50%; background: var(--tp-announcement-icon-bg); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .09); color: var(--tp-announcement-icon-color); }
.tp-platform-announcement-copy { min-width: 0; }
.tp-platform-announcement-eyebrow { display: block; margin: .05rem 0 .2rem; color: var(--tp-announcement-eyebrow); font-size: .67rem; font-weight: 800; letter-spacing: .075em; line-height: 1.15; text-transform: uppercase; }
.tp-platform-announcement-copy strong { display: block; color: #fff; font-size: 1rem; font-weight: 800; line-height: 1.24; }
.tp-platform-announcement-copy p { margin: .28rem 0 0; color: var(--tp-announcement-message); font-size: .88rem; font-weight: 600; line-height: 1.42; white-space: pre-line; }
.tp-platform-announcement-close { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--tp-announcement-close-border); border-radius: 50%; background: var(--tp-announcement-close-bg); color: var(--tp-announcement-close-color); }
.tp-platform-announcement-close:hover, .tp-platform-announcement-close:focus-visible { border-color: var(--tp-announcement-close-hover-border); background: var(--tp-announcement-close-hover-bg); color: #fff; }
@keyframes tp-platform-announcement-enter { from { opacity: 0; transform: translateY(-.5rem) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .tp-platform-announcement { animation: none; } }
body.tp-theme-light .tp-platform-announcement { --tp-announcement-border: #2186d6; --tp-announcement-left: #0077c8; --tp-announcement-spark: rgba(82, 190, 255, .24); --tp-announcement-start: #eff9ff; --tp-announcement-end: #d8efff; --tp-announcement-icon-border: #8ac8f2; --tp-announcement-icon-bg: #ccecff; --tp-announcement-icon-color: #075e9e; --tp-announcement-eyebrow: #0564aa; --tp-announcement-message: #335e7c; --tp-announcement-close-border: #8fc8ef; --tp-announcement-close-bg: rgba(255, 255, 255, .62); --tp-announcement-close-color: #125d94; --tp-announcement-close-hover-border: #217ebd; --tp-announcement-close-hover-bg: #c9eaff; box-shadow: 0 16px 34px rgba(30, 105, 158, .2); color: #103857; }
body.tp-theme-light .tp-platform-announcement.is-level-important { --tp-announcement-border: #d89000; --tp-announcement-left: #f2af00; --tp-announcement-spark: rgba(255, 204, 34, .30); --tp-announcement-start: #fffce2; --tp-announcement-end: #fff0af; --tp-announcement-icon-border: #efc65a; --tp-announcement-icon-bg: #ffe49b; --tp-announcement-icon-color: #765100; --tp-announcement-eyebrow: #8a5b00; --tp-announcement-message: #6c4a00; --tp-announcement-close-border: #e6bd4c; --tp-announcement-close-bg: rgba(255, 255, 255, .7); --tp-announcement-close-color: #795100; --tp-announcement-close-hover-border: #b87800; --tp-announcement-close-hover-bg: #ffe39b; }
body.tp-theme-light .tp-platform-announcement.is-level-warning { --tp-announcement-border: #dc7828; --tp-announcement-left: #ef941f; --tp-announcement-spark: rgba(255, 152, 49, .26); --tp-announcement-start: #fff7ed; --tp-announcement-end: #ffe1bf; --tp-announcement-icon-border: #edb77c; --tp-announcement-icon-bg: #ffd1a0; --tp-announcement-icon-color: #863900; --tp-announcement-eyebrow: #974100; --tp-announcement-message: #743407; --tp-announcement-close-border: #e6ae72; --tp-announcement-close-bg: rgba(255, 255, 255, .72); --tp-announcement-close-color: #813900; --tp-announcement-close-hover-border: #bf5f13; --tp-announcement-close-hover-bg: #ffd2a4; }
body.tp-theme-light .tp-platform-announcement.is-level-critical { --tp-announcement-border: #d94162; --tp-announcement-left: #eb5c79; --tp-announcement-spark: rgba(245, 80, 111, .25); --tp-announcement-start: #fff5f7; --tp-announcement-end: #ffd8e1; --tp-announcement-icon-border: #eaa4b5; --tp-announcement-icon-bg: #ffc3d0; --tp-announcement-icon-color: #851931; --tp-announcement-eyebrow: #941c38; --tp-announcement-message: #701629; --tp-announcement-close-border: #e79bab; --tp-announcement-close-bg: rgba(255, 255, 255, .72); --tp-announcement-close-color: #891b35; --tp-announcement-close-hover-border: #b82d4a; --tp-announcement-close-hover-bg: #ffc8d4; }
body.tp-theme-light .tp-platform-announcement-copy strong { color: #0e3452; }
body.tp-theme-light .tp-platform-announcement-close:hover, body.tp-theme-light .tp-platform-announcement-close:focus-visible { color: #073d68; }
@media (max-width: 767px) { .tp-platform-announcements { top: 4.35rem; right: .7rem; width: calc(100vw - 1.4rem); } }