/* Shared TPS interface tokens. All future pages use these components. */
:root,[data-bs-theme="light"] {
    --tps-bg:#f6f8fc;
    --tps-surface:#fff;
    --tps-surface-soft:#f0f4fa;
    --tps-text:#19263c;
    --tps-muted:#68788e;
    --tps-line:#e7edf4;
    --tps-primary:#4563e6;
    --tps-primary-hover:#344fcd;
    --tps-primary-soft:#edf0ff;
    --tps-success:#167e69;
    --tps-success-soft:#e7f7f0;
    --tps-danger:#c3465b;
    --tps-danger-soft:#fff0f3;
    --tps-warning:#99711b;
    --tps-warning-soft:#fff6df;
    --tps-info:#287bb2;
    --tps-info-soft:#eaf5ff;
    --tps-shadow:0 6px 28px #233e6410;
    --tps-radius:18px;
    --tps-on-primary:#fff;
    --tps-focus:#7e94ff;
    --bs-body-bg:var(--tps-bg);
    --bs-body-color:var(--tps-text);
    --bs-border-color:var(--tps-line);
    --bs-secondary-color:var(--tps-muted);
    --bs-primary:var(--tps-primary);
    --bs-link-color:var(--tps-primary);
    --bs-link-hover-color:var(--tps-primary-hover);
}

[data-bs-theme="dark"] {
    --tps-bg:#101725;
    --tps-surface:#192334;
    --tps-surface-soft:#202d42;
    --tps-text:#e9effa;
    --tps-muted:#a2b0c6;
    --tps-line:#2b3a50;
    --tps-primary:#a0afff;
    --tps-primary-hover:#bec8ff;
    --tps-primary-soft:#2a3558;
    --tps-success:#75d8b8;
    --tps-success-soft:#173d37;
    --tps-danger:#ff9eae;
    --tps-danger-soft:#442b3a;
    --tps-warning:#eed083;
    --tps-warning-soft:#3f3827;
    --tps-info:#8acbff;
    --tps-info-soft:#223951;
    --tps-shadow:0 6px 28px #0000001c;
    --tps-on-primary:#15203e;
    --tps-focus:#a0afff;
}

/* Semantic select tokens resolve through the active light/dark TPS palette. */
:root,[data-bs-theme="light"],[data-bs-theme="dark"] {
    --select-bg:var(--tps-surface);
    --select-text:var(--tps-text);
    --select-hover-bg:var(--tps-primary);
    --select-hover-text:var(--tps-on-primary);
    --select-selected-bg:var(--tps-primary-soft);
    --select-selected-text:var(--tps-text);
    --select-disabled-text:var(--tps-muted);
    --select-border:var(--tps-line);
}

* {
    box-sizing:border-box;
}

body {
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    font-size:14px;
    line-height:1.6;
    margin:0;
    background:var(--tps-bg);
    color:var(--tps-text);
}

a {
    text-decoration:none;
}

button,input,select,textarea {
    font:inherit;
}

button,a,input,select,textarea {
    touch-action:manipulation;
}

:focus-visible {
    outline:3px solid var(--tps-focus);
    outline-offset:3px;
}

h1,h2,h3,h4 {
    color:var(--tps-text);
    letter-spacing:-.035em;
}

h1 {
    font-size:30px;
    font-weight:750;
    line-height:1.25;
}

h2 {
    font-size:18px;
    font-weight:700;
}

h3 {
    font-size:16px;
    font-weight:650;
}

p {
    color:var(--tps-muted);
}

small {
    font-size:12px;
}

.skip-link {
    position:fixed;
    left:20px;
    top:-80px;
    z-index:2000;
    padding:12px;
    background:var(--tps-surface);
    color:var(--tps-primary);
}

.skip-link:focus {
    top:12px;
}

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

.app-sidebar {
    width:248px!important;
    background:var(--tps-surface)!important;
    color:var(--tps-text)!important;
    border-right:1px solid var(--tps-line)!important;
}

.sidebar-brand {
    height:96px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 27px;
}

.brand {
    display:flex;
    gap:11px;
    align-items:center;
    color:var(--tps-text);
    font-size:23px;
    font-weight:800;
    letter-spacing:-1px;
}

.brand:hover {
    color:var(--tps-primary);
}

.brand-mark {
    display:grid;
    place-items:center;
    background:var(--tps-primary);
    color:var(--tps-on-primary);
    width:40px;
    height:43px;
    border-radius:13px;
    font-size:27px;
    flex-shrink:0;
}

.brand-light {
    font-weight:400;
}

.brand small {
    display:block;
    font-size:8px;
    letter-spacing:1.4px;
    color:var(--tps-muted);
    margin-top:2px;
}

.sidebar-body {
    display:flex!important;
    flex-direction:column;
    padding:20px 18px!important;
}

.nav-label {
    font-size:10px;
    letter-spacing:1.6px;
    color:var(--tps-muted);
    padding:0 14px;
    margin-bottom:14px;
}

.nav-label-spaced {
    margin-top:34px;
}

.sidebar-link {
    border:0;
    width:100%;
    background:transparent;
    display:flex;
    align-items:center;
    gap:13px;
    min-height:47px;
    border-radius:11px;
    padding:10px 14px;
    color:var(--tps-muted);
    text-align:left;
    margin:3px 0;
    font-weight:550;
}

.sidebar-link .mdi {
    font-size:21px;
}

.sidebar-link:hover {
    background:var(--tps-surface-soft);
    color:var(--tps-text);
}

.sidebar-link.active {
    background:var(--tps-primary-soft);
    color:var(--tps-primary);
    font-weight:700;
}

.sidebar-link:disabled {
    cursor:default;
    color:var(--tps-muted);
}

.nav-soon {
    margin-left:auto;
    font-size:9px;
    border:1px solid var(--tps-line);
    padding:1px 6px;
    border-radius:5px;
}

.sidebar-note {
    margin-top:auto;
    padding:20px 14px 24px;
}

.sidebar-note h3 {
    margin-top:14px;
    line-height:1.5;
}

.sidebar-note p {
    font-size:12px;
    line-height:1.8;
}

.sidebar-note a {
    font-size:12px;
    font-weight:650;
}

.sidebar-footer {
    display:flex;
    align-items:center;
    gap:7px;
    border-top:1px solid var(--tps-line);
    padding:21px 8px 3px;
    font-size:10px;
    color:var(--tps-muted);
}

.version-label {
    margin-left:auto;
}

.environment-dot {
    width:6px;
    height:6px;
    background:var(--tps-success);
    border-radius:50%;
    display:inline-block;
    flex-shrink:0;
}

.app-workspace {
    min-width:0;
}

.app-topbar {
    height:88px;
    border-bottom:1px solid var(--tps-line);
    padding:0 38px;
    background:var(--tps-surface);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.topbar-context,.topbar-actions {
    display:flex;
    align-items:center;
    gap:13px;
    min-width:0;
}

.workspace-symbol {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    background:var(--tps-surface-soft);
    border:1px solid var(--tps-line);
    border-radius:10px;
    color:var(--tps-muted);
    font-size:20px;
}

.topbar-title {
    display:block;
    font-size:12px;
    font-weight:700;
}

.topbar-caption {
    font-size:10px;
    color:var(--tps-muted);
}

.preview-label {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:10px;
    color:var(--tps-muted);
    margin-right:15px;
}

.topbar-divider {
    height:26px;
    width:1px;
    background:var(--tps-line);
    margin:0 6px;
}

.avatar {
    display:grid;
    place-items:center;
    background:var(--tps-primary-soft);
    color:var(--tps-primary);
    border-radius:12px;
    width:39px;
    height:39px;
    font-size:12px;
    font-weight:750;
}

.profile-button {
    display:flex;
    align-items:center;
    gap:10px;
    border:0;
    background:transparent;
    color:var(--tps-text);
    text-align:left;
    padding:3px;
    min-height:44px;
}

.profile-copy {
    font-size:11px;
    font-weight:700;
}

.profile-copy small {
    display:block;
    font-size:10px;
    font-weight:400;
    color:var(--tps-muted);
}

.app-content {
    max-width:1600px;
    padding:36px 38px 20px;
    margin:auto;
    outline:0;
}

.page-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
}

.eyebrow {
    color:var(--tps-primary);
    font-size:10px;
    letter-spacing:1.8px;
    font-weight:750;
    margin-bottom:9px;
}

.page-description {
    margin:10px 0 0;
    font-size:13px;
}

.content-footer {
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:40px;
    padding:20px 0 4px;
    color:var(--tps-muted);
    font-size:10px;
}

.panel,.card {
    background:var(--tps-surface);
    border:1px solid var(--tps-line);
    border-radius:var(--tps-radius);
    box-shadow:var(--tps-shadow);
    color:var(--tps-text);
}

.panel {
    padding:24px;
}

.panel-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:20px;
}

.panel-heading h2 {
    margin:0;
}

.panel-description {
    font-size:12px;
    margin:6px 0 0;
}

.welcome-panel {
    padding:28px 30px;
    background:linear-gradient(110deg,var(--tps-primary-soft),var(--tps-surface));
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    margin-bottom:26px;
    border-color:transparent;
}

.welcome-panel h2 {
    font-size:23px;
    margin:9px 0;
}

.welcome-panel p {
    font-size:13px;
    max-width:530px;
    margin:0;
}

.welcome-art {
    display:grid;
    place-items:center;
    width:105px;
    height:105px;
    flex-shrink:0;
    background:var(--tps-surface);
    border:9px solid var(--tps-primary-soft);
    border-radius:30px;
    transform:rotate(-8deg);
    color:var(--tps-primary);
    font-size:52px;
}

.section-label {
    font-size:13px;
    letter-spacing:0;
    font-weight:650;
    margin:26px 0 15px;
}

.metric-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-bottom:26px;
}

.metric-card {
    padding:20px;
}

.metric-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--tps-muted);
    font-size:12px;
    font-weight:550;
}

.icon-tile {
    width:37px;
    height:37px;
    display:grid;
    place-items:center;
    border-radius:11px;
    font-size:22px;
    background:var(--tps-primary-soft);
    color:var(--tps-primary);
}

.tone-success {
    background:var(--tps-success-soft)!important;
    color:var(--tps-success)!important;
}

.tone-danger {
    background:var(--tps-danger-soft)!important;
    color:var(--tps-danger)!important;
}

.tone-warning {
    background:var(--tps-warning-soft)!important;
    color:var(--tps-warning)!important;
}

.metric-value {
    font-size:30px;
    color:var(--tps-muted);
    margin:10px 0 0;
    line-height:1.4;
}

.metric-note {
    font-size:10px;
    color:var(--tps-muted);
}

.dashboard-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:22px;
}

.empty-state {
    text-align:center;
    padding:38px 20px;
    display:flex;
    align-items:center;
    flex-direction:column;
}

.empty-state .empty-icon {
    display:grid;
    place-items:center;
    width:66px;
    height:66px;
    background:var(--tps-surface-soft);
    color:var(--tps-muted);
    border-radius:22px;
    font-size:31px;
    margin-bottom:18px;
}

.empty-state h3 {
    font-size:15px;
    margin-bottom:8px;
}

.empty-state p {
    max-width:340px;
    font-size:12px;
    margin:0;
    line-height:1.8;
}

.status-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 0;
    border-bottom:1px solid var(--tps-line);
    font-size:12px;
}

.status-row:last-child {
    border:0;
}

.info-note {
    border-radius:11px;
    background:var(--tps-info-soft);
    color:var(--tps-info);
    font-size:11px;
    padding:13px 15px;
    margin-top:18px;
    line-height:1.8;
}

.btn {
    border-radius:10px;
    min-height:44px;
    padding:10px 17px;
    font-size:12px;
    font-weight:650;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    box-shadow:none;
}

.btn-primary {
    --bs-btn-bg:var(--tps-primary);
    --bs-btn-color:var(--tps-on-primary);
    --bs-btn-border-color:var(--tps-primary);
    --bs-btn-hover-bg:var(--tps-primary-hover);
    --bs-btn-hover-color:var(--tps-on-primary);
    --bs-btn-hover-border-color:var(--tps-primary-hover);
    --bs-btn-active-bg:var(--tps-primary-hover);
    --bs-btn-active-color:var(--tps-on-primary);
    --bs-btn-active-border-color:var(--tps-primary-hover);
    --bs-btn-disabled-bg:var(--tps-primary);
    --bs-btn-disabled-border-color:var(--tps-primary);
}

.btn-outline-secondary,.btn-light {
    --bs-btn-color:var(--tps-text);
    --bs-btn-bg:var(--tps-surface);
    --bs-btn-border-color:var(--tps-line);
    --bs-btn-hover-bg:var(--tps-surface-soft);
    --bs-btn-hover-color:var(--tps-text);
    --bs-btn-hover-border-color:var(--tps-muted);
    --bs-btn-active-bg:var(--tps-surface-soft);
    --bs-btn-active-color:var(--tps-text);
}

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

.btn-icon {
    padding:0;
    width:44px;
    height:44px;
    color:var(--tps-muted);
    font-size:21px;
    border:0;
}

.btn-icon:hover {
    background:var(--tps-surface-soft);
    color:var(--tps-text);
}

.badge {
    font-size:10px;
    font-weight:600;
    padding:6px 9px;
    border-radius:6px;
    display:inline-flex;
    gap:5px;
    align-items:center;
    line-height:1.4;
    white-space:normal;
}

.badge-soft-primary {
    background:var(--tps-primary-soft);
    color:var(--tps-primary);
}

.badge-outline {
    border:1px solid var(--tps-line);
    color:var(--tps-muted);
    background:var(--tps-surface);
}

.badge-neutral {
    background:var(--tps-surface-soft);
    color:var(--tps-muted);
}

.form-label {
    font-size:12px;
    font-weight:650;
    margin-bottom:8px;
    color:var(--tps-text);
}

.form-control,.form-select {
    min-height:46px;
    border-radius:10px;
    border:1px solid var(--tps-line);
    background-color:var(--tps-surface);
    color:var(--tps-text);
    font-size:13px;
    padding:11px 13px;
}

.form-control::placeholder {
    color:var(--tps-muted);
    opacity:.8;
}

.form-control:focus,.form-select:focus {
    background-color:var(--tps-surface);
    color:var(--tps-text);
    border-color:var(--tps-focus);
    box-shadow:0 0 0 3px var(--tps-primary-soft);
}

.form-control:disabled {
    background:var(--tps-surface-soft);
    color:var(--tps-muted);
}

.form-text {
    font-size:11px;
    color:var(--tps-muted);
    margin-top:7px;
}

.form-check-input {
    border-color:var(--tps-muted);
    background-color:var(--tps-surface);
    width:18px;
    height:18px;
}

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

.form-check-label {
    padding-left:4px;
}

.form-section+.form-section {
    border-top:1px solid var(--tps-line);
    margin-top:28px;
    padding-top:28px;
}

.invalid-feedback {
    color:var(--tps-danger);
    font-size:11px;
}

.form-control.is-invalid {
    border-color:var(--tps-danger);
}

.alert {
    border:0;
    border-radius:12px;
    padding:15px 18px;
    font-size:12px;
}

.alert-info {
    background:var(--tps-info-soft);
    color:var(--tps-info);
}

.alert-danger {
    background:var(--tps-danger-soft);
    color:var(--tps-danger);
}

.alert-success {
    background:var(--tps-success-soft);
    color:var(--tps-success);
}

.alert-warning {
    background:var(--tps-warning-soft);
    color:var(--tps-warning);
}

.dropdown-menu {
    --bs-dropdown-bg:var(--tps-surface);
    --bs-dropdown-color:var(--tps-text);
    --bs-dropdown-link-color:var(--tps-text);
    --bs-dropdown-link-hover-color:var(--tps-text);
    --bs-dropdown-link-hover-bg:var(--tps-surface-soft);
    --bs-dropdown-border-color:var(--tps-line);
    padding:9px;
    border-radius:13px;
    box-shadow:var(--tps-shadow);
    min-width:210px;
    max-width:calc(100vw - 24px);
}

.dropdown-heading {
    font-size:11px;
    padding:10px 10px 7px;
    color:var(--tps-muted);
    letter-spacing:0;
}

.dropdown-item {
    border-radius:7px;
    font-size:12px;
    padding:11px;
    min-height:44px;
}

.notification-menu {
    width:290px;
}

.compact-empty {
    text-align:center;
    padding:20px 12px;
}

.compact-empty>.mdi {
    font-size:31px;
    color:var(--tps-muted);
}

.compact-empty p {
    color:var(--tps-text);
    margin:10px 0 5px;
}

.compact-empty small {
    font-size:11px;
    color:var(--tps-muted);
}

.table {
    --bs-table-bg:transparent;
    --bs-table-color:var(--tps-text);
    --bs-table-border-color:var(--tps-line);
    --bs-table-hover-bg:var(--tps-surface-soft);
    --bs-table-hover-color:var(--tps-text);
    font-size:12px;
    margin:0;
}

.table thead th {
    color:var(--tps-muted);
    font-size:10px;
    font-weight:600;
    letter-spacing:.4px;
    background:var(--tps-surface-soft);
    padding:13px 16px;
    border:0;
    white-space:nowrap;
}

.table td {
    padding:18px 16px;
    vertical-align:middle;
}

.table-responsive {
    border-radius:10px;
}

.page-link {
    background:var(--tps-surface);
    border-color:var(--tps-line);
    color:var(--tps-muted);
    min-width:42px;
    min-height:44px;
    display:grid;
    place-items:center;
    font-size:12px;
}

.page-link:hover {
    background:var(--tps-surface-soft);
    color:var(--tps-primary);
    border-color:var(--tps-line);
}

.active>.page-link {
    background:var(--tps-primary);
    border-color:var(--tps-primary);
    color:var(--tps-on-primary);
}

.disabled>.page-link {
    background:var(--tps-surface-soft);
    color:var(--tps-muted);
    border-color:var(--tps-line);
}

.modal-content {
    background:var(--tps-surface);
    border:1px solid var(--tps-line);
    border-radius:20px;
    color:var(--tps-text);
    box-shadow:var(--tps-shadow);
}

.modal-header,.modal-footer {
    border-color:var(--tps-line);
    padding:20px 24px;
}

.modal-body {
    padding:22px 24px;
}

.modal-body p:last-child {
    margin:0;
}

.nav-tabs {
    border-color:var(--tps-line);
    gap:12px;
}

.nav-tabs .nav-link {
    border:0;
    border-bottom:2px solid transparent;
    color:var(--tps-muted);
    padding:13px 15px;
    border-radius:0;
    min-height:44px;
}

.nav-tabs .nav-link.active {
    border-color:var(--tps-primary);
    color:var(--tps-primary);
    background:transparent;
}

.nav-pills {
    gap:7px;
}

.nav-pills .nav-link {
    color:var(--tps-muted);
    min-height:44px;
    border-radius:9px;
    padding:10px 16px;
}

.nav-pills .nav-link.active {
    background:var(--tps-primary-soft);
    color:var(--tps-primary);
}

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

.component-stack {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
}

.component-grid>.panel {
    min-width:0;
}

.loading-state {
    display:flex;
    gap:12px;
    align-items:center;
    color:var(--tps-muted);
    padding:22px 0;
}

.spinner-border {
    color:var(--tps-primary);
    width:20px;
    height:20px;
    border-width:2px;
}

.skeleton {
    background:var(--tps-surface-soft);
    border-radius:7px;
    height:12px;
    width:100%;
    margin:12px 0;
    animation:pulse 1.5s ease-in-out infinite;
}

.skeleton-short {
    width:60%;
}

@keyframes pulse {
    50% {
        opacity:.45;
    }
}

.error-state {
    border-radius:12px;
    background:var(--tps-danger-soft);
    padding:24px;
    color:var(--tps-danger);
}

.error-state p {
    color:inherit;
}

.appearance-options {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    max-width:620px;
}

.theme-option {
    padding:20px;
    border-radius:14px;
    border:2px solid var(--tps-line);
    background:var(--tps-surface);
    color:var(--tps-text);
    text-align:left;
}

.theme-option[aria-pressed="true"] {
    border-color:var(--tps-primary);
    background:var(--tps-primary-soft);
}

.theme-option .mdi {
    font-size:25px;
    color:var(--tps-primary);
}

.theme-option strong {
    display:block;
    margin:10px 0 3px;
}

.theme-option small {
    color:var(--tps-muted);
}

.login-page {
    min-height:100vh;
    padding:28px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:28px;
}

.login-story {
    border-radius:26px;
    background:linear-gradient(140deg,var(--tps-primary-soft),var(--tps-info-soft));
    padding:42px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
}

.login-story-copy {
    padding:50px 0;
    max-width:460px;
}

.login-story h1 {
    font-size:44px;
    line-height:1.2;
    max-width:440px;
}

.login-story p {
    font-size:15px;
    line-height:1.9;
}

.login-visual {
    padding:28px;
    background:var(--tps-surface);
    border:1px solid var(--tps-line);
    border-radius:22px;
    max-width:390px;
    transform:rotate(-3deg);
    margin:34px 0;
}

.login-visual .icon-tile {
    width:48px;
    height:48px;
}

.login-story-footer {
    font-size:11px;
    color:var(--tps-muted);
}

.login-main {
    display:flex;
    flex-direction:column;
    min-width:0;
}

.login-tools {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}

.login-form-wrapper {
    width:100%;
    max-width:405px;
    margin:auto;
    padding:40px 12px;
}

.login-form-wrapper h1 {
    font-size:31px;
    margin-bottom:11px;
}

.login-form-wrapper .form-group {
    margin-bottom:22px;
}

.login-form-wrapper form {
    margin-top:28px;
}

.password-field {
    position:relative;
}

.password-field input {
    padding-right:52px;
}

.password-toggle {
    position:absolute;
    right:2px;
    top:1px;
}

.login-footer {
    font-size:11px;
    text-align:center;
    color:var(--tps-muted);
    padding:20px;
}

.login-notice {
    margin-top:25px;
    font-size:11px;
    line-height:1.8;
}

.login-mobile-brand {
    display:none;
}

.component-caption {
    font-size:11px;
    margin-bottom:17px;
}

.full-span {
    grid-column:1/-1;
}

.preview-table-note {
    font-size:11px;
    padding:14px 0 0;
    margin:0;
}

.btn .spinner-border {
    color:inherit;
    width:15px;
    height:15px;
}

.btn-close {
    opacity:.7;
}

.offcanvas-backdrop {
    background:#070e20;
}

@media(min-width:992px) {
    .app-sidebar {
        position:fixed!important;
        top:0;
        bottom:0;
        left:0;
        display:flex;
        flex-direction:column;
        z-index:1030;
    }
    .sidebar-body {
        overflow-y:auto;
    }
    .app-workspace {
        margin-left:248px;
    }
}

@media(min-width:1500px) {
    .app-content {
        padding-top:44px;
    }
    .welcome-panel {
        padding:34px 36px;
    }
    .metric-card {
        padding:25px;
    }
    .dashboard-grid {
        grid-template-columns:minmax(0,1fr) 350px;
    }
}

@media(max-width:1199px) {
    .app-topbar {
        padding:0 25px;
    }
    .app-content {
        padding:28px 25px 18px;
    }
    .dashboard-grid {
        grid-template-columns:minmax(0,1fr);
    }
    .login-story {
        padding:30px;
    }
    .login-story h1 {
        font-size:36px;
    }
}

@media(max-width:991px) {
    .sidebar-brand {
        flex-shrink:0;
    }
    .sidebar-body {
        min-height:0;
    }
    .sidebar-note {
        margin-top:30px;
    }
    .app-topbar {
        height:76px;
    }
    .metric-grid {
        gap:14px;
    }
    .topbar-actions {
        gap:5px;
    }
    .login-page {
        padding:18px;
        gap:10px;
    }
    .login-story {
        padding:25px;
    }
    .login-story h1 {
        font-size:32px;
    }
    .login-visual {
        padding:20px;
    }
}

@media(max-width:767px) {
    h1 {
        font-size:26px;
    }
    .app-content {
        padding:25px 18px 15px;
    }
    .app-topbar {
        padding:0 12px;
        height:70px;
    }
    .topbar-context {
        gap:7px;
    }
    .topbar-actions {
        gap:0;
    }
    .topbar-divider {
        margin:0 5px;
    }
    .page-header {
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
        margin-bottom:23px;
    }
    .page-header>.badge {
        display:none;
    }
    .page-description {
        line-height:1.8;
    }
    .welcome-panel {
        padding:24px;
        gap:12px;
    }
    .welcome-panel h2 {
        font-size:20px;
    }
    .welcome-art {
        width:64px;
        height:70px;
        font-size:32px;
        border-width:6px;
        border-radius:20px;
    }
    .metric-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .metric-card {
        padding:16px;
    }
    .panel {
        padding:20px;
    }
    .metric-top {
        font-size:11px;
    }
    .component-grid {
        grid-template-columns:minmax(0,1fr);
    }
    .content-footer {
        flex-direction:column;
        gap:5px;
        margin-top:25px;
    }
    .login-page {
        display:block;
        padding:0;
    }
    .login-story {
        display:none;
    }
    .login-main {
        min-height:100vh;
    }
    .login-tools {
        padding:14px 18px;
    }
    .login-form-wrapper {
        padding:25px 24px;
    }
    .login-mobile-brand {
        display:block;
        margin-bottom:45px;
    }
    .login-form-wrapper h1 {
        font-size:28px;
    }
    .login-footer {
        padding-bottom:25px;
    }
    .appearance-options {
        gap:12px;
    }
    .theme-option {
        padding:16px;
    }
    .dashboard-grid {
        gap:18px;
    }
}

@media(max-width:374px) {
    .app-content {
        padding:22px 14px 14px;
    }
    .topbar-title {
        font-size:11px;
    }
    .topbar-caption {
        font-size:9px;
    }
    .topbar-context .btn-icon {
        width:36px;
    }
    .topbar-actions .btn-icon {
        width:36px;
    }
    .avatar {
        width:34px;
        height:36px;
    }
    .topbar-divider {
        margin:0 3px;
    }
    .metric-grid {
        gap:10px;
    }
    .metric-card {
        padding:13px;
    }
    .metric-top {
        align-items:flex-start;
        gap:5px;
    }
    .icon-tile {
        width:29px;
        height:29px;
        font-size:18px;
        flex-shrink:0;
    }
    .metric-note {
        font-size:9px;
    }
    .welcome-art {
        display:none;
    }
    .panel-heading {
        align-items:flex-start;
        flex-wrap:wrap;
    }
    .appearance-options {
        grid-template-columns:1fr;
    }
    .login-form-wrapper {
        padding:20px;
    }
    .btn {
        padding-left:13px;
        padding-right:13px;
    }
}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important;
    }
}

/* Keep the full navigation label comfortable beside the placeholder badge. */
.sidebar-link {
    gap: 10px;
    font-size: 13px;
}
.text-secondary {
    color: var(--tps-muted) !important;
}
/* Company branding reuses the shared layout and validated semantic tokens. */
.brand-image-pair { flex-shrink: 0; max-width: 82px; }
.brand-logo { max-width: 82px; max-height: 42px; object-fit: contain; }
.brand-logo-dark { display: none; }
[data-bs-theme="dark"] .brand-logo-light { display: none; }
[data-bs-theme="dark"] .brand-logo-dark { display: inline; }
.brand-wordmark { display: block; max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
.brand-image-pair + .brand-wordmark { max-width: 100px; }
.brand-upload-preview { padding: 18px; border-radius: 12px; background: var(--tps-surface-soft); margin-bottom: 12px; }
.brand-upload-preview img { max-width: 100%; max-height: 80px; object-fit: contain; }
.welcome-panel { background: linear-gradient(110deg, var(--tps-primary-soft), var(--tps-brand-secondary-soft, var(--tps-surface))); }
.login-story { background: linear-gradient(140deg, var(--tps-primary-soft), var(--tps-brand-secondary-soft, var(--tps-info-soft))); }
.environment-dot { background: var(--tps-brand-accent, var(--tps-success)); }
.profile-copy { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-title { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 374px) { .topbar-title { max-width: 115px; } }
/* Developer console uses the same cards, forms, spacing and semantic status tokens. */
.company-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.company-grid > .panel { min-width: 0; }
.company-title, .company-host { overflow-wrap: anywhere; }
.company-facts { margin: 0; font-size: 12px; }
.company-facts > div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--tps-line); }
.company-facts dt { color: var(--tps-muted); font-weight: 500; }
.company-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.identifier-text { font-size: 10px; }
.company-summary-row, .company-domain-row, .company-member-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--tps-line); color: var(--tps-text); }
.company-summary-row small, .company-member-row small { display: block; color: var(--tps-muted); font-size: 11px; }
.company-domain-row > div:first-child, .company-member-row > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.company-member-controls { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.company-member-controls > div:not([data-form-feedback]) { min-width: 110px; }
.company-summary-row:hover { color: var(--tps-primary); }
@media (max-width: 991px) { .company-member-row { align-items: start; flex-direction: column; } }
@media (max-width: 767px) {
    .company-grid { grid-template-columns: minmax(0, 1fr); }
    .company-domain-row { align-items: start; flex-direction: column; }
    .company-member-controls { width: 100%; }
    .company-member-controls > div:not([data-form-feedback]) { flex: 1; }
    .company-member-controls > button { width: 100%; }
    .company-facts > div { gap: 10px; }
}
/* CEISA configuration reuses shared form components; secrets are status text, never values. */
.secret-mask { width: auto; flex: 1; min-width: 135px; letter-spacing: .08em; }
.secret-mask small { letter-spacing: normal; color: var(--tps-muted); margin-left: 8px; }
.advanced-settings-summary { min-height: 44px; cursor: pointer; font-size: 16px; font-weight: 650; color: var(--tps-text); padding: 9px 0; }

/* Shared native/Select2 controls. Scope through the container to override vendor
   default/classic/Bootstrap states without page-specific color overrides. */
.form-select { color-scheme:light; }
[data-bs-theme="dark"] .form-select { color-scheme:dark; }
.form-select option,.form-select optgroup {
    background:var(--select-bg);
    color:var(--select-text);
}
.form-select option:checked { background:var(--select-selected-bg); color:var(--select-selected-text); }
.form-select option:hover { background:var(--select-hover-bg); color:var(--select-hover-text); }
.form-select option:disabled { color:var(--select-disabled-text); }
.select2-container[class] { max-width:100%; }
.select2-container[class] .select2-selection {
    background:var(--select-bg);
    color:var(--select-text);
    border:1px solid var(--select-border);
    min-height:42px;
    border-radius:10px;
}
.select2-container[class] .select2-selection--single { padding:6px 3px; }
.select2-container[class] .select2-selection .select2-selection__rendered { color:var(--select-text); }
.select2-container[class] .select2-selection .select2-selection__placeholder,
.select2-container[class] .select2-selection .select2-selection__clear { color:var(--select-disabled-text); }
.select2-container[class] .select2-selection .select2-selection__choice {
    background:var(--select-selected-bg); color:var(--select-selected-text); border-color:var(--select-border);
}
.select2-container[class].select2-container--focus .select2-selection,
.select2-container[class].select2-container--open .select2-selection {
    border-color:var(--tps-focus);
    outline:2px solid var(--tps-focus);
    outline-offset:1px;
}
.select2-container[class].select2-container--disabled .select2-selection {
    background:var(--tps-surface-soft); color:var(--select-disabled-text);
}
.select2-container[class].select2-container--disabled .select2-selection__rendered { color:var(--select-disabled-text); }
.select2-container[class].select2-container--open { z-index:1085; }
.select2-container[class] .select2-dropdown {
    background:var(--select-bg); color:var(--select-text);
    border:1px solid var(--select-border); border-radius:10px;
    box-shadow:var(--tps-shadow); overflow:hidden;
}
.select2-container[class] .select2-results { background:var(--select-bg); color:var(--select-text); }
.select2-container[class] .select2-dropdown .select2-results .select2-results__option {
    background:var(--select-bg); color:var(--select-text); overflow-wrap:anywhere;
}
.select2-container[class] .select2-dropdown .select2-results .select2-results__option--selected,
.select2-container[class] .select2-dropdown .select2-results .select2-results__option[aria-selected="true"] {
    background:var(--select-selected-bg); color:var(--select-selected-text);
}
.select2-container[class] .select2-dropdown .select2-results .select2-results__option.select2-results__option--highlighted {
    background:var(--select-hover-bg); color:var(--select-hover-text);
}
.select2-container[class] .select2-dropdown .select2-results .select2-results__option.select2-results__option--disabled,
.select2-container[class] .select2-dropdown .select2-results .select2-results__option[aria-disabled="true"] {
    background:var(--select-bg); color:var(--select-disabled-text);
}
.select2-container[class] .select2-search .select2-search__field {
    background:var(--select-bg); color:var(--select-text); caret-color:var(--select-text);
    border:1px solid var(--select-border); border-radius:6px;
}
.select2-container[class] .select2-search .select2-search__field::placeholder { color:var(--select-disabled-text); opacity:1; }
.select2-container[class] .select2-search .select2-search__field:focus {
    border-color:var(--tps-focus); outline:2px solid var(--tps-focus); outline-offset:1px;
}

/* Shared AJAX list and process feedback, using the existing theme palette. */
.ajax-list-panel { min-height: 220px; }
.packaging-list-table { width: 100%; table-layout: fixed; }
.packaging-list-table th, .packaging-list-table td { overflow-wrap: anywhere; }
.packaging-list-table th:last-child { width: 150px; }
.packaging-list-table td:last-child { white-space: nowrap; overflow-wrap: normal; }
.packaging-list-table .btn { white-space: nowrap; flex-shrink: 0; }
.packaging-list-table th { white-space: normal; }
.packaging-list-table details { font-weight: normal; }
/* Theme dropdown animation/top:100% override Popper coordinates after portalling.
   Non-adaptive Popper writes top:0/left:0 and supplies the actual transform. */
.app-table-action-menu.dropdown-menu {
    --bs-dropdown-zindex:1025;
    min-width:200px;
    max-width:calc(100vw - 16px);
    z-index:var(--bs-dropdown-zindex);
    animation:none;
}
.app-table-action-menu.dropdown-menu.show { top:0!important; bottom:auto!important; left:0!important; right:auto!important; animation:none!important; }
.app-table-action-menu .dropdown-item:focus-visible { outline:2px solid var(--tps-focus); outline-offset:-2px; }
@media (max-width: 767.98px) {
    .packaging-list-table th:last-child { width: 106px; }
    .packaging-list-table th, .packaging-list-table td { padding: .65rem .4rem; }
    .packaging-list-table { font-size: .8rem; }
    .packaging-list-table .btn { padding: .3rem .4rem; }
}



/* Global process shell. Bootstrap owns focus/backdrop mechanics, not its visual language. */
:root,[data-bs-theme="light"],[data-bs-theme="dark"] {
    --process-modal-bg:var(--tps-surface);
    --process-modal-border:var(--tps-line);
    --process-modal-text:var(--tps-text);
    --process-modal-muted:var(--tps-muted);
    --process-modal-detail:var(--tps-surface-soft);
    --process-success:var(--tps-success);
    --process-success-bg:var(--tps-success-soft);
    --process-error:var(--tps-danger);
    --process-error-bg:var(--tps-danger-soft);
    --process-warning:var(--tps-warning);
    --process-warning-bg:var(--tps-warning-soft);
    --process-info:var(--tps-info);
    --process-info-bg:var(--tps-info-soft);
    --process-action:var(--tps-primary);
    --process-action-hover:var(--tps-primary-hover);
    --process-action-text:var(--tps-on-primary);
    --process-focus:var(--tps-focus);
}
:root,[data-bs-theme="light"] {
    --process-modal-shadow:0 24px 80px #12213b26,0 6px 20px #12213b12;
    --process-backdrop:#142039;
}
[data-bs-theme="dark"] {
    --process-modal-shadow:0 28px 88px #0008,0 6px 20px #0004;
    --process-backdrop:#030913;
}
.app-process-overlay { opacity:0; transition:opacity 140ms ease,display 140ms allow-discrete; }
.app-process-overlay.show { opacity:1; }
.app-process-dialog.modal-dialog { width:calc(100% - 32px); max-width:420px; margin:16px auto; min-height:calc(100% - 32px); }
.app-process-modal.modal-content {
    --process-state:var(--process-info);
    --process-state-bg:var(--process-info-bg);
    position:relative;
    display:flex;
    align-items:flex-start;
    padding:30px;
    max-height:calc(100dvh - 32px);
    overflow:auto;
    border:1px solid var(--process-modal-border);
    border-radius:24px;
    background:var(--process-modal-bg);
    color:var(--process-modal-text);
    box-shadow:var(--process-modal-shadow);
    font-family:inherit;
}
.app-process-overlay.show .app-process-modal { animation:process-enter 180ms cubic-bezier(.2,.7,.3,1) both; }
[data-process-state="SUCCESS"] .app-process-modal { --process-state:var(--process-success); --process-state-bg:var(--process-success-bg); }
[data-process-state="ERROR"] .app-process-modal { --process-state:var(--process-error); --process-state-bg:var(--process-error-bg); }
[data-process-state="WARNING"] .app-process-modal,
[data-process-environment="production"] .app-process-modal { --process-state:var(--process-warning); --process-state-bg:var(--process-warning-bg); }
.app-process-icon { display:grid; place-items:center; width:54px; height:54px; flex-shrink:0; margin-bottom:22px; border-radius:18px; background:var(--process-state-bg); color:var(--process-state); }
.app-process-icon .mdi { font-size:28px; line-height:1; }
.app-process-eyebrow { color:var(--process-modal-muted); font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin:0 0 8px; }
.app-process-title { color:var(--process-modal-text); font-size:1.35rem; line-height:1.3; font-weight:700; letter-spacing:-.025em; margin:0 0 10px; }
.app-process-message { color:var(--process-modal-muted); font-size:.9rem; line-height:1.7; margin:0; overflow-wrap:anywhere; white-space:pre-line; }
.app-process-context { width:100%; margin:20px 0 0; padding:16px; border-radius:14px; background:var(--process-modal-detail); display:grid; gap:12px; }
.app-process-context dt { font-size:.69rem; color:var(--process-modal-muted); font-weight:500; margin-bottom:3px; }
.app-process-context dd { font-size:.84rem; font-weight:600; color:var(--process-modal-text); overflow-wrap:anywhere; margin:0; }
[data-process-environment="sandbox"] .app-process-context { background:var(--process-info-bg); }
[data-process-environment="sandbox"] .app-process-context dd:first-of-type { color:var(--process-info); }
[data-process-environment="production"] .app-process-context { background:var(--process-warning-bg); border-inline-start:3px solid var(--process-warning); }
.app-process-detail { width:100%; margin-top:18px; padding:12px 14px; background:var(--process-modal-detail); border-radius:12px; font-size:.8rem; color:var(--process-modal-muted); }
.app-process-detail summary { cursor:pointer; font-weight:600; color:var(--process-modal-text); }
.app-process-detail [data-process-detail-content] { max-height:180px; overflow:auto; overscroll-behavior:contain; margin-top:12px; }
.app-process-detail p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
.app-process-actions { width:100%; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:26px; }
.app-process-button { appearance:none; border:1px solid transparent; border-radius:11px; min-height:44px; padding:10px 18px; font:inherit; font-size:.84rem; font-weight:600; line-height:1.4; cursor:pointer; transition:background-color 130ms ease,box-shadow 130ms ease; }
.app-process-button-primary { background:var(--process-action); color:var(--process-action-text); box-shadow:0 2px 4px #00000008; }
.app-process-button-primary:hover { background:var(--process-action-hover); }
.app-process-button-secondary { background:var(--process-modal-detail); color:var(--process-modal-text); }
.app-process-button-secondary:hover { border-color:var(--process-modal-border); }
.app-process-button:focus-visible,.app-process-detail summary:focus-visible { outline:3px solid var(--process-focus); outline-offset:3px; }
.app-process-button:disabled { opacity:.55; cursor:wait; }
.app-process-loader { display:flex; align-items:center; gap:5px; height:24px; }
.app-process-loader span { display:block; width:6px; height:6px; background:currentColor; border-radius:50%; animation:process-dot 1.1s ease-in-out infinite; }
.app-process-loader span:nth-child(2) { animation-delay:120ms; }
.app-process-loader span:nth-child(3) { animation-delay:240ms; }
.app-process-open .modal-backdrop { background:var(--process-backdrop); backdrop-filter:blur(3px); }
.app-process-open .modal-backdrop.show { opacity:.62; }
.app-process-modal [hidden] { display:none!important; }
@keyframes process-enter { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes process-dot { 0%,70%,100% { transform:translateY(0); opacity:.5; } 35% { transform:translateY(-4px); opacity:1; } }
@media (max-width:479.98px) {
    .app-process-modal.modal-content { padding:24px; border-radius:20px; }
    .app-process-title { font-size:1.2rem; }
    .app-process-actions { gap:8px; }
    .app-process-button { flex:1 1 auto; padding-inline:12px; }
}
@media (prefers-reduced-motion:reduce) {
    .app-process-overlay,.app-process-overlay.show .app-process-modal,.app-process-loader span,.app-process-button { animation:none!important; transition:none!important; }
    .app-process-loader span { opacity:1; }
}

/* Company workspace navigation: one shared desktop/offcanvas menu. */
.sidebar-body > .nav-label-spaced,
.sidebar-body nav > .nav-label-spaced { margin-top:22px; }
.workspace-options { max-height:240px; overflow-y:auto; }
.workspace-options .dropdown-item { overflow-wrap:anywhere; }
.page-header > div { min-width:0; }
.page-header h1 { overflow-wrap:anywhere; }

/* Shared operational summary links: reuse existing semantic surface/status tokens. */
.operational-kpi { color:var(--tps-text); text-decoration:none; min-width:0; overflow-wrap:anywhere; }
.operational-kpi:hover,.operational-kpi:focus-visible { color:var(--tps-text); border-color:var(--tps-primary); }
.operational-kpi .badge { max-width:100%; white-space:normal; }
.operational-activity td:first-child { overflow-wrap:anywhere; }

/* Shared analytical cards: local ApexCharts, Dashboard + Reports. */
:root { --chart-failure:#8d4d32; --chart-data-four:#8560bb; --chart-tooltip-bg:var(--tps-surface); }
[data-bs-theme="dark"] { --chart-failure:#e7ac83; --chart-data-four:#c6a8ee; --chart-tooltip-bg:var(--tps-surface-soft); }
.chart-card { min-width:0; overflow:visible; }
.chart-card h2 { font-size:1.05rem; }
.chart-plot { width:100%; min-width:0; }
.chart-total { margin:.5rem 0 0; color:var(--tps-muted); font-size:.8rem; }
.chart-empty { min-height:160px; display:flex; align-items:center; justify-content:center; color:var(--tps-muted); text-align:center; }
.chart-skeleton { height:240px; border-radius:var(--tps-radius); background:var(--tps-surface-soft); }
.chart-values { font-size:.8rem; color:var(--tps-muted); }
.chart-values summary { cursor:pointer; }
.chart-values table { margin-top:1rem; }
.chart-card .apexcharts-tooltip, .chart-card .apexcharts-xaxistooltip { background:var(--chart-tooltip-bg)!important; color:var(--tps-text)!important; border:1px solid var(--tps-muted)!important; border-radius:10px!important; box-shadow:var(--tps-shadow)!important; max-width:min(260px,calc(100vw - 40px)); z-index:20; white-space:normal; pointer-events:none; transition:none!important; }
.chart-card .apexcharts-tooltip-title { background:var(--chart-tooltip-bg)!important; color:var(--tps-text)!important; border-bottom:1px solid var(--tps-line)!important; }
.chart-card .apexcharts-legend-text { color:var(--tps-text)!important; }
.chart-card .apexcharts-legend-series { max-width:100%; }
@media(max-width:479px) { .chart-card { padding:16px; } .chart-card .apexcharts-legend { padding:0!important; } }

/* Chart text inherits the active tenant theme, including Apex donut center defaults. */
.chart-card .apexcharts-datalabel-label,.chart-card .apexcharts-datalabel-value { fill:var(--tps-text)!important; }
.chart-card .apexcharts-xaxis-label,.chart-card .apexcharts-yaxis-label { fill:var(--tps-muted)!important; }
.row-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap; }
.row-actions form { margin:0!important; }
.row-actions .btn { min-height:32px; padding:.35rem .65rem; border-radius:8px; font-size:.8rem; white-space:nowrap; }
.btn-danger-subtle { color:var(--tps-danger); background:var(--tps-danger-soft); border:1px solid transparent; }
.btn-danger-subtle:hover,.btn-danger-subtle:focus { color:var(--tps-danger); background:var(--tps-surface-soft); border-color:var(--tps-danger); }
.dropdown-menu .danger-action { border-top:1px solid var(--tps-line); margin-top:.35rem; padding-top:.35rem; }
.review-json pre { max-height:24rem; overflow:auto; white-space:pre; font-size:.8rem; }

main .panel pre { max-height:24rem; overflow:auto; }

@media(max-width:767.98px) { .row-actions { gap:.3rem; } .row-actions .btn, .packaging-list-table .row-actions .btn { padding:.3rem; } }

/* Pie tooltips receive inline series fills from Apex; keep the shared elevated surface. */
.chart-card .apexcharts-tooltip.apexcharts-active { opacity:1; }
.chart-card .apexcharts-tooltip-series-group { background:var(--chart-tooltip-bg)!important; padding:8px 10px!important; }
.chart-card .apexcharts-tooltip-text,.chart-card .apexcharts-tooltip-y-group { color:var(--tps-text)!important; }
.chart-card .apexcharts-tooltip-text-y-label { color:var(--tps-text)!important; }
.chart-card .apexcharts-tooltip-text-y-value { color:var(--tps-text)!important; font-weight:700; }
.chart-card .apexcharts-tooltip-marker { display:inline-block!important; border:1px solid var(--tps-muted); flex-shrink:0; }

/* Keep the fixed tooltip inside its chart canvas, including narrow donut plots. */
.chart-card .apexcharts-tooltip { left:0!important; top:0!important; max-width:min(260px,100%,calc(100vw - 40px)); }

/* Shared form/review actions; table row actions retain their compact Phase 20B rules. */
.action-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-block:20px; }
.action-row > .btn { margin:0!important; }
.action-row + [data-form-feedback] { flex-basis:100%; }
.table-responsive + .component-stack { margin-top:20px; }
.modal-footer { gap:10px; }
.modal-footer > .btn { margin:0; }
@media(max-width:479px) { .action-row { gap:10px; } .action-row > .btn { max-width:100%; white-space:normal; } }

/* Dedicated operational CTA: shared by creation and the existing Reports drill action. */
:root {
    --operational-cta-start:var(--tps-primary);
    --operational-cta-end:color-mix(in srgb,var(--tps-primary) 68%,var(--tps-text));
    --operational-cta-shadow:0 5px 14px color-mix(in srgb,var(--tps-primary) 20%,transparent);
    --operational-cta-hover-shadow:0 8px 20px color-mix(in srgb,var(--tps-primary) 30%,transparent);
    --operational-cta-icon-bg:color-mix(in srgb,var(--tps-on-primary) 16%,transparent);
    --operational-cta-icon-fg:var(--tps-on-primary);
}
[data-bs-theme="dark"] {
    --operational-cta-end:color-mix(in srgb,var(--tps-primary) 78%,var(--tps-surface));
    --operational-cta-icon-bg:color-mix(in srgb,var(--tps-surface) 92%,transparent);
    --operational-cta-icon-fg:var(--tps-primary);
}
.operational-primary-action { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; }
.operational-primary-action > form { margin:0; min-width:0; }
.operational-primary-action .action-row { margin:0; }
.operational-cta {
    display:inline-flex; align-items:center; justify-content:center; gap:12px;
    min-height:54px; padding:8px 18px 8px 8px; border:1px solid transparent; border-radius:14px;
    background:linear-gradient(110deg,var(--operational-cta-start),var(--operational-cta-end));
    background-size:120% 100%; background-position:0 50%; color:var(--tps-on-primary);
    font-family:inherit; font-size:13px; font-weight:650; line-height:1.3; text-decoration:none;
    box-shadow:var(--operational-cta-shadow); cursor:pointer;
    transition:transform 180ms ease,box-shadow 180ms ease,background-position 180ms ease;
}
.operational-cta .operational-cta-icon {
    display:inline-flex; align-items:center; justify-content:center; flex:0 0 36px;
    width:36px; height:36px; border-radius:10px;
    background:var(--operational-cta-icon-bg); color:var(--operational-cta-icon-fg);
    border:1px solid color-mix(in srgb,var(--operational-cta-icon-fg) 22%,transparent);
    transition:background-color 180ms ease;
}
.operational-cta .mdi { display:inline-flex; font-size:20px; line-height:1; opacity:1; }
.operational-cta .operational-cta-icon .mdi { color:var(--operational-cta-icon-fg); }
.operational-cta-label { min-width:0; }
.operational-cta-arrow { display:inline-flex; flex:0 0 auto; align-items:center; color:var(--tps-on-primary); transition:transform 180ms ease; }
.operational-cta:focus-visible { outline:3px solid var(--tps-focus)!important; outline-offset:3px; }
@media(hover:hover) {
    .operational-cta:hover { color:var(--tps-on-primary); background-position:100% 50%; box-shadow:var(--operational-cta-hover-shadow); transform:translateY(-2px); }
    .operational-cta:hover .operational-cta-icon { background:color-mix(in srgb,var(--operational-cta-icon-bg) 88%,var(--operational-cta-icon-fg)); }
    .operational-cta:hover .operational-cta-arrow { transform:translateX(3px); }
}
.operational-cta:active { color:var(--tps-on-primary); transform:translateY(0); box-shadow:var(--operational-cta-shadow); }
.operational-cta:disabled,.operational-cta.disabled { opacity:.65; transform:none; box-shadow:none; cursor:default; }
@media(max-width:479px) {
    .operational-primary-action > .operational-cta,.operational-primary-action > form,.operational-primary-action .action-row,.operational-primary-action .operational-cta { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
    .operational-cta,.operational-cta .operational-cta-icon,.operational-cta-arrow { transition:none; }
    .operational-cta:hover,.operational-cta:hover .operational-cta-arrow { transform:none; }
}

/* Operational metric cards: shared presentation, existing numbers and drill behavior. */
.operational-summary-card {
    --summary-color:var(--tps-primary); --summary-soft:var(--tps-primary-soft);
    position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:16px;
    min-width:0; padding:20px; border-radius:16px; border:1px solid var(--tps-line);
    background:linear-gradient(135deg,var(--tps-surface) 55%,color-mix(in srgb,var(--summary-soft) 65%,var(--tps-surface)));
    color:var(--tps-text); box-shadow:var(--tps-shadow); overflow:hidden;
}
.operational-summary-card[data-summary-tone="info"] { --summary-color:var(--tps-info); --summary-soft:var(--tps-info-soft); }
.operational-summary-card[data-summary-tone="success"] { --summary-color:var(--tps-success); --summary-soft:var(--tps-success-soft); }
.operational-summary-card[data-summary-tone="warning"] { --summary-color:var(--tps-warning); --summary-soft:var(--tps-warning-soft); }
.operational-summary-card[data-summary-tone="danger"] { --summary-color:var(--tps-danger); --summary-soft:var(--tps-danger-soft); }
.operational-summary-card[data-summary-tone="neutral"] { --summary-color:var(--tps-muted); --summary-soft:var(--tps-surface-soft); }
.operational-summary-icon { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:var(--summary-soft); color:var(--summary-color); }
.operational-summary-icon .mdi { display:inline-flex; font-size:22px; line-height:1; }
.operational-summary-content { display:flex; flex-direction:column; gap:6px; width:100%; min-width:0; }
.operational-summary-label { display:block; margin:0; color:var(--tps-muted); font-size:12px; font-weight:550; line-height:1.5; overflow-wrap:anywhere; }
.operational-summary-value { display:block; color:var(--tps-text); font-size:30px; font-weight:750; line-height:1.15; letter-spacing:-.6px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
button.operational-summary-card { cursor:pointer; transition:border-color 160ms ease,box-shadow 160ms ease; }
button.operational-summary-card:hover:not(:disabled) { border-color:var(--summary-color); box-shadow:0 5px 18px color-mix(in srgb,var(--summary-color) 14%,transparent); }
button.operational-summary-card:focus-visible { outline:3px solid var(--tps-focus)!important; outline-offset:3px; }
button.operational-summary-card:disabled { cursor:default; opacity:.65; }
@media(max-width:479px) { .operational-summary-card { padding:16px; gap:12px; } .operational-summary-value { font-size:27px; } .operational-summary-label { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { button.operational-summary-card { transition:none; } }

/* Developer role editor: existing switches, shared panels, responsive permission groups. */
.permission-role-select { max-width:340px; }
.permission-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.permission-group { min-width:0; }
.permission-group h2 { font-size:1rem; margin-bottom:16px; }
.permission-option { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid var(--tps-line); cursor:pointer; }
.permission-copy { min-width:0; font-size:13px; }
.permission-key { color:var(--tps-muted); overflow-wrap:anywhere; font-size:11px; margin-top:4px; }
.permission-option .form-switch { flex:0 0 auto; padding-left:2.8em; }
.permission-option .form-check-input { min-width:2.3em; cursor:pointer; }
.permission-option .form-check-input:focus-visible { outline:2px solid var(--tps-focus)!important; outline-offset:3px; }
.permission-save { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.permission-save .action-row { margin:0; }
.permission-save [data-form-feedback] { flex-basis:100%; }
@media(max-width:767.98px) { .permission-groups { grid-template-columns:minmax(0,1fr); } .permission-save .action-row { width:100%; } }

/* Global search uses the existing theme tokens and Bootstrap modal focus/escape handling. */
.global-search-modal .modal-dialog { max-width:640px; margin:80px auto 24px; }
.global-search-modal .modal-content { background:var(--tps-surface); color:var(--tps-text); border:1px solid var(--tps-line); border-radius:20px; box-shadow:var(--tps-shadow); overflow:hidden; }
.global-search-modal .modal-header { border-bottom:1px solid var(--tps-line); padding:20px; }
.global-search-input { padding:16px 20px; }
.global-search-input small { display:block; margin-top:8px; color:var(--tps-muted); }
.global-search-results { max-height:60vh; overflow:auto; padding:0 12px 12px; }
.global-search-state { color:var(--tps-muted); padding:24px 8px; margin:0; text-align:center; }
.global-search-group h3 { color:var(--tps-muted); font-size:11px; font-weight:700; text-transform:uppercase; padding:14px 8px 6px; }
.global-search-result { display:flex; align-items:center; gap:12px; padding:12px 8px; border-radius:10px; color:var(--tps-text); text-decoration:none; }
.global-search-result>i { color:var(--tps-primary); font-size:22px; flex:none; }
.global-search-result>span { flex:1; min-width:0; overflow-wrap:anywhere; }
.global-search-result strong,.global-search-result small { display:block; }
.global-search-result small { color:var(--tps-muted); margin-top:3px; }
.global-search-result:hover,.global-search-result:focus-visible { background:var(--tps-bg); color:var(--tps-text); }
.global-search-result:focus-visible { outline:2px solid var(--tps-focus)!important; }
@media(max-width:767.98px) { .global-search-modal .modal-dialog { margin:12px 8px; } .global-search-input,.global-search-modal .modal-header { padding:16px; } .global-search-results { max-height:65vh; } }

.ceisa-diagnostics { min-width:0; max-width:100%; }
.ceisa-diagnostics pre { font-family:monospace; white-space:pre-wrap; overflow-wrap:anywhere; overflow:auto; max-height:28rem; max-width:100%; padding:12px; color:inherit; background:var(--tps-surface-soft); border:1px solid var(--tps-line); border-radius:8px; }
.ceisa-diagnostics button { margin-block:5px; }

/* Compact authentication surface; system-state layouts retain their existing styles. */
.login-page.login-compact {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    min-height:100svh;
    padding:76px 20px;
    background:radial-gradient(ellipse at 15% 10%,var(--tps-primary-soft),transparent 52%),
        radial-gradient(ellipse at 90% 90%,var(--tps-brand-secondary-soft,var(--tps-info-soft)),transparent 48%),var(--tps-bg);
}
.login-compact .login-tools {
    position:absolute;
    top:18px;
    right:20px;
    padding:0;
}
.login-shell { width:100%; max-width:440px; min-width:0; position:relative; }
.login-compact .login-form-wrapper {
    max-width:none;
    margin:0;
    padding:36px;
    border:1px solid var(--tps-line);
    border-radius:var(--tps-radius);
    background:var(--tps-surface);
    box-shadow:var(--tps-shadow);
}
.login-brand { margin-bottom:28px; }
.login-brand .brand { max-width:100%; }
.login-brand .brand-wordmark { max-width:100%; min-width:0; }
.login-brand .brand-wordmark small { display:none; }
.login-compact .login-form-wrapper h1 { font-size:25px; line-height:1.3; margin-bottom:8px; }
.login-subtitle { font-size:13px; line-height:1.65; margin:0; overflow-wrap:anywhere; }
.login-compact .login-form-wrapper form { margin-top:24px; }
.login-compact .form-group { margin-bottom:18px; }
.login-compact .form-control { height:44px; }
.login-compact #login-submit { min-height:44px; }
.login-compact .login-notice { margin:18px 0 0; font-size:11px; line-height:1.6; text-align:center; color:var(--tps-muted); }
.login-compact .login-footer { position:absolute; top:100%; width:100%; padding:18px 0 0; overflow-wrap:anywhere; }
@media(max-width:479px) {
    .login-page.login-compact { padding:72px 16px; }
    .login-compact .login-form-wrapper { padding:24px; }
}