* {
    box-sizing: border-box;
}

html {
    font-size: 15px;
}

html,
body {
    min-height: 100%;
}

@media print {
    html {
        font-size: 17px !important;
    }
}

body {
    font-family: var(--stp-font-body);
    color: var(--stp-text);
    background: var(--stp-bg);
    font-size: var(--stp-fs-body, var(--stp-fs, 1rem));
}

h1, .h1 {
    font-size: var(--stp-fs-title);
}

h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.lead,
.small,
small,
.breadcrumb,
.dropdown-menu,
.dropdown-item,
.dropdown-header,
.nav-link,
.navbar,
.alert,
.badge,
.pagination,
.page-link,
.list-group-item {
    font-size: var(--stp-fs-body, var(--stp-fs));
}

.form-text,
.invalid-feedback,
.valid-feedback,
.btn,
.btn-sm,
.btn-lg,
.form-label,
.col-form-label,
.form-control,
.form-select,
.form-check-label,
.form-control-sm,
.form-select-sm,
.input-group-text {
    font-size: var(--stp-fs-form, var(--stp-fs));
}

.table,
.table th,
.table td,
div.dataTables_wrapper,
.dataTables_info,
.dataTables_length,
.dataTables_filter,
.dataTables_paginate {
    font-size: var(--stp-fs-table, var(--stp-fs));
}

.app-sidebar,
.sidebar-link,
.sidebar-label,
.sidebar-brand small,
.sidebar-group-toggle,
.sidebar-filter input {
    font-size: var(--stp-fs-menu, var(--stp-fs));
}

.app-body .fs-1,
.app-body .fs-2,
.app-body .fs-3,
.app-body .fs-4,
.app-body .fs-5,
.app-body .fs-6,
.guest-body .fs-1,
.guest-body .fs-2,
.guest-body .fs-3,
.guest-body .fs-4,
.guest-body .fs-5,
.guest-body .fs-6 {
    font-size: var(--stp-fs-kpi) !important;
}

.guest-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stp-guest-bg);
    background-attachment: fixed;
    padding: 1.25rem;
}

.guest-shell {
    width: min(100%, 560px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-card {
    width: min(100%, 420px);
    background: var(--stp-surface);
    border: var(--stp-border-width) solid var(--stp-border);
    border-radius: var(--stp-radius-lg);
    padding: 2rem 1.5rem;
    box-shadow: var(--stp-shadow-lg);
    color: var(--stp-text);
}

.login-card-wide {
    width: min(100%, 560px);
}

.login-brand {
    text-align: center;
    margin-bottom: 1.75rem;
}

.login-brand h1 {
    font-size: var(--stp-fs-title);
    margin: 0.75rem 0 0.25rem;
    font-family: var(--stp-font-heading);
    color: var(--stp-heading);
}

.login-brand p {
    margin: 0;
    color: var(--stp-muted);
}

.login-signup {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: var(--stp-border-width) solid var(--stp-border);
    text-align: center;
}

.guest-body .btn-outline-primary {
    background: var(--stp-surface);
    color: var(--stp-primary);
    border: var(--stp-border-width) solid var(--stp-primary);
    text-align: center;
    text-decoration: none;
    border-radius: var(--stp-radius-btn);
}

.guest-body .small {
    font-size: var(--stp-fs);
}

.guest-body .mb-2 {
    margin-bottom: 0.5rem;
}

.guest-body .form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.guest-body .form-control {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: var(--stp-border-width) solid var(--stp-border);
    background: var(--stp-input-bg);
    color: var(--stp-text);
    border-radius: var(--stp-radius-input);
}

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

.guest-body .invalid-feedback {
    color: var(--stp-danger);
    font-size: var(--stp-fs-form, var(--stp-fs));
    margin-top: 0.35rem;
}

.guest-body .form-check {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.signup-type-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}

.signup-plan-grid {
    display: grid;
    gap: 0.75rem;
}

.signup-plan-card {
    display: block;
    border: 1px solid var(--stp-border, #d7dee8);
    border-radius: 0.6rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
}

.signup-plan-card input {
    margin-right: 0.4rem;
}

.signup-plan-card:has(input:checked) {
    border-color: var(--stp-primary, #0f2744);
    box-shadow: 0 0 0 1px var(--stp-primary, #0f2744);
}

@media (min-width: 768px) {
    .signup-plan-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.guest-body fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.guest-body legend.form-label {
    float: none;
    width: 100%;
}

.guest-body .d-block {
    display: block;
}

.guest-body .btn {
    display: inline-block;
    padding: 0.75rem 1rem;
    cursor: pointer;
}

.btn.is-submitting,
.guest-body .btn.is-submitting {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
}

.btn.is-submitting .btn-submit-spinner {
    flex: 0 0 auto;
    width: 0.9em;
    height: 0.9em;
    border-width: 0.15em;
    vertical-align: middle;
}

.guest-body .btn-primary {
    color: var(--stp-primary-fg);
}

.guest-body a {
    color: var(--stp-primary);
}

.guest-body .alert {
    width: min(100%, 560px);
    margin: 0 auto 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--stp-radius);
}

.guest-body .login-card .alert {
    width: 100%;
    margin: 0 0 1rem;
}

.guest-body .alert-danger {
    background: var(--stp-err-bg);
    color: var(--stp-err-fg);
    border: var(--stp-border-width) solid var(--stp-err-fg);
}

.guest-body .alert ul {
    padding-left: 1.1rem;
}

.guest-body .mb-3 {
    margin-bottom: 1rem;
}

.guest-body .w-100 {
    width: 100%;
}

.guest-body .text-muted {
    color: var(--stp-muted);
    font-size: var(--stp-fs);
}

.guest-body .mt-2 {
    margin-top: 0.5rem;
}

.guest-body details {
    border: var(--stp-border-width) solid var(--stp-border);
    border-radius: var(--stp-radius);
    padding: 0.75rem 1rem;
}

.guest-body details summary {
    cursor: pointer;
    font-weight: 600;
}

.guest-body code {
    font-size: 1em;
}

.guest-body .alert-success {
    background: var(--stp-ok-bg);
    color: var(--stp-ok-fg);
}

.guest-body .alert-danger {
    background: var(--stp-err-bg);
    color: var(--stp-err-fg);
}

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

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--stp-sidebar);
    background: var(--stp-sidebar-bg);
    color: var(--stp-sidebar-text);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--stp-transition);
    overflow: hidden;
}

.app-sidebar.open {
    transform: translateX(0);
}

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

.sidebar-brand {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 1.25rem 1.1rem;
    border-bottom: var(--stp-border-width) solid var(--stp-sidebar-border);
}

.sidebar-brand small {
    display: block;
    color: var(--stp-sidebar-muted);
    font-size: var(--stp-fs-menu, var(--stp-fs));
}

.sidebar-nav {
    padding: 1rem 0.85rem 1.5rem;
    overflow-y: auto;
    overflow-anchor: none;
    flex: 1;
    scrollbar-width: none;
}

.sidebar-nav::-webkit-scrollbar {
    display: none;
}

.sidebar-label {
    color: var(--stp-sidebar-muted);
    font-size: var(--stp-fs-menu, var(--stp-fs));
    letter-spacing: var(--stp-letter-label);
    text-transform: uppercase;
    margin: 1rem 0.65rem 0.45rem;
}

.sidebar-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: calc(100% - 0.4rem);
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    padding: 0.45rem 0.55rem;
    border: 0;
    border-radius: var(--stp-radius);
    background: transparent;
    color: var(--stp-sidebar-muted);
    font: inherit;
    letter-spacing: var(--stp-letter-label);
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}

.sidebar-group-toggle:hover,
.sidebar-group-toggle:focus-visible {
    background: var(--stp-sidebar-hover);
    color: var(--stp-sidebar-text);
}

.sidebar-group-toggle i {
    font-size: var(--stp-fs-badge);
    transition: transform var(--stp-transition);
}

.sidebar-group.is-open > .sidebar-group-toggle i {
    transform: rotate(180deg);
}

.sidebar-group:not(.is-open):not(.is-pinned) > .sidebar-group-items {
    display: none;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--stp-sidebar-text);
    text-decoration: none;
    padding: 0.7rem 0.8rem;
    border-radius: var(--stp-radius);
    font-size: var(--stp-fs-menu, var(--stp-fs));
    font-weight: var(--stp-fw-normal);
    transition: background-color var(--stp-transition), color var(--stp-transition), box-shadow var(--stp-transition);
}

.sidebar-link i {
    width: 1.15rem;
    text-align: center;
}

.sidebar-link:hover,
.sidebar-link.active {
    background: var(--stp-sidebar-hover);
    color: var(--stp-sidebar-text);
}

.sidebar-link.active {
    background: var(--stp-sidebar-active);
}

.sidebar-link.disabled {
    opacity: 0.42;
    cursor: default;
}

.app-main {
    display: flex;
    flex-direction: column;
}

.app-navbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--stp-navbar-bg);
    backdrop-filter: blur(var(--stp-blur));
    border-bottom: var(--stp-border-width) solid var(--stp-border);
    padding: 0.55rem 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-height: 3.25rem;
}

.navbar-title {
    flex: 1;
    min-width: 0;
}

.navbar-title .breadcrumb {
    margin: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    font-size: var(--stp-fs);
    line-height: 1.3;
}

.navbar-title .breadcrumb-item {
    white-space: nowrap;
}

.navbar-title .breadcrumb-item.active {
    color: var(--stp-heading);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-title .breadcrumb-item + .breadcrumb-item::before {
    color: var(--stp-muted);
}

.navbar-title .breadcrumb a {
    color: var(--stp-link);
    text-decoration: none;
}

.navbar-search {
    align-items: center;
    gap: 0.45rem;
    border: var(--stp-border-width) solid var(--stp-border);
    background: var(--stp-surface);
    border-radius: var(--stp-radius);
    padding: 0.15rem 0.7rem;
    min-width: 14rem;
}

.navbar-search i {
    color: var(--stp-muted);
    font-size: var(--stp-fs-icon);
}

.navbar-search input {
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--stp-text);
    width: 100%;
    font-size: var(--stp-fs);
    padding: 0.35rem 0;
}

.btn-back {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    border: var(--stp-border-width) solid var(--stp-border);
    background: var(--stp-surface);
    color: var(--stp-heading);
    border-radius: var(--stp-radius-btn);
    padding: 0.4rem 0.75rem;
    font-weight: var(--stp-fw-btn);
    text-decoration: none;
}

.btn-back:hover {
    background: var(--stp-surface-hover);
    color: var(--stp-heading);
}

.page-chrome {
    width: 100%;
}

.page-chrome-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    gap: 0.75rem;
    margin: -0.15rem 0 0.9rem;
}

.btn-page-close {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--stp-radius-btn);
    border: var(--stp-border-width) solid var(--stp-border);
    background: var(--stp-surface);
    color: var(--stp-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--stp-fs-title);
}

.btn-page-close:hover {
    background: var(--stp-err-bg);
    color: var(--stp-err-fg);
    border-color: var(--stp-err-fg);
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.btn-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--stp-radius-btn);
    border: var(--stp-border-width) solid var(--stp-border);
    background: var(--stp-surface);
    color: var(--stp-text);
}

.bell-badge {
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: var(--stp-radius-pill);
    background: var(--stp-danger);
    color: var(--stp-on-accent);
    font-size: var(--stp-fs-badge);
    line-height: 1.1rem;
    font-weight: 700;
}

.notification-menu {
    min-width: 280px;
}

.app-content {
    padding: var(--stp-content-pad-mobile);
}

.panel-card,
.kpi-card {
    background: var(--stp-surface);
    border: var(--stp-border-width) solid var(--stp-border);
    border-radius: var(--stp-radius-card);
    padding: var(--stp-card-pad);
    box-shadow: var(--stp-shadow);
    color: var(--stp-text);
}

.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
    grid-auto-rows: 7.5rem;
    gap: 0.75rem;
    align-items: stretch;
}

.kpi-strip-compact {
    grid-auto-rows: 6.25rem;
}

@media (min-width: 768px) {
    .kpi-strip-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .kpi-strip-compact {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.kpi-card {
    height: 100%;
    min-height: 6.75rem;
    display: grid;
    grid-template-rows: auto 1fr 1.7rem;
    grid-template-columns: minmax(0, 1fr);
    box-sizing: border-box;
}

.kpi-strip .kpi-card {
    min-height: 0;
    padding: 0.85rem 0.7rem;
}

.kpi-label {
    display: block;
    color: var(--stp-muted);
    font-size: var(--stp-fs-kpi-label, var(--stp-fs));
    line-height: 1.2;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr));
    gap: 0.75rem;
}

.detail-item {
    min-width: 0;
    padding: 0.7rem 0.85rem;
    border: var(--stp-border-width) solid var(--stp-border);
    border-radius: var(--stp-radius-card);
    background: var(--stp-input-bg, var(--stp-surface));
}

.detail-item .kpi-label {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    margin-bottom: 0.25rem;
}

.detail-item .detail-value,
.detail-item strong,
.detail-item > div {
    display: block;
    font-size: var(--stp-fs);
    line-height: 1.35;
    word-break: break-word;
    white-space: normal;
}

.detail-item-wide {
    grid-column: 1 / -1;
}

.kpi-card strong {
    font-size: var(--stp-fs-kpi);
    line-height: 1.25;
    display: flex;
    align-items: baseline;
    justify-content: center;
    justify-self: center;
    align-self: center;
    gap: 0.2em;
    margin: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.kpi-card > .small {
    color: var(--stp-muted);
    font-size: var(--stp-fs-kpi-caption, var(--stp-fs));
    line-height: 1.25;
    margin-bottom: 0.2rem;
}

.kpi-currency {
    font-size: 1em;
    font-weight: 700;
    flex-shrink: 0;
}

.kpi-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.kpi-row strong {
    display: inline;
}

.kpi-connected {
    border: 0;
    background: var(--stp-kpi-chip-bg);
    color: var(--stp-kpi-chip-fg);
    border-radius: var(--stp-radius-pill);
    padding: 0.2rem 0.65rem;
    font-size: var(--stp-fs);
    font-weight: 700;
    line-height: 1.3;
}

.kpi-connected:hover {
    background: var(--stp-surface-hover);
    color: var(--stp-heading);
}

.kpi-card small {
    display: block;
    margin: 0;
    padding-top: 0.1rem;
    color: var(--stp-muted);
    font-size: var(--stp-fs-kpi-caption, var(--stp-fs));
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}

.kpi-card.compact {
    min-height: 5.75rem;
    padding: 0.8rem 0.7rem;
    grid-template-rows: auto 1fr 0.2rem;
}

.kpi-card.compact strong {
    font-size: var(--stp-fs-kpi);
}

.kpi-success {
    border-left: 4px solid var(--stp-success);
}

.kpi-warning {
    border-left: 4px solid var(--stp-warning);
}

.kpi-danger {
    border-left: 4px solid var(--stp-danger);
}

.kpi-info {
    border-left: 4px solid var(--stp-info);
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--stp-gap);
}

.quick-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.75rem;
    border-radius: var(--stp-radius);
    background: var(--stp-surface);
    border: var(--stp-border-width) solid var(--stp-border);
    color: var(--stp-muted);
    font-weight: var(--stp-fw-btn);
    font-size: var(--stp-fs);
    text-align: center;
    transition: background-color var(--stp-transition), color var(--stp-transition), box-shadow var(--stp-transition), transform var(--stp-transition);
}

.chart-card canvas {
    width: 100% !important;
    max-height: 260px;
}

.form-select {
    border-radius: var(--stp-radius-input);
}

@media (min-width: 768px) {
    .quick-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .quick-actions {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.sms-credit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--stp-ok-bg);
    color: var(--stp-ok-fg);
    border-radius: var(--stp-radius-pill);
    padding: 0.35rem 0.75rem;
    font-size: var(--stp-fs);
    font-weight: 600;
    white-space: nowrap;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: var(--stp-border-width) solid var(--stp-border);
    background: var(--stp-surface);
    color: var(--stp-text);
    border-radius: var(--stp-radius-pill);
    padding: 0.25rem 0.7rem 0.25rem 0.25rem;
    font: inherit;
    cursor: pointer;
}

.user-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--stp-navy);
    color: var(--stp-on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--stp-overlay);
    z-index: 1030;
}

.sidebar-backdrop.show {
    display: block;
}

.form-control,
.form-control:focus {
    border-radius: var(--stp-radius-input);
}

.form-control:focus {
    border-color: var(--stp-primary);
    box-shadow: var(--stp-focus-ring);
}

.btn-primary {
    background: var(--stp-primary);
    border-color: var(--stp-primary);
    color: var(--stp-primary-fg);
    border-radius: var(--stp-radius-btn);
    font-weight: var(--stp-fw-btn);
}

.btn-call,
.btn-wa {
    border-radius: var(--stp-radius-pill);
    font-weight: var(--stp-fw-btn);
}

.btn-call {
    background: var(--stp-info-bg);
    color: var(--stp-info-fg);
}

.btn-wa {
    background: var(--stp-ok-bg);
    color: var(--stp-ok-fg);
}

.phone-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.status-pill {
    display: inline-flex;
    border-radius: var(--stp-radius-pill);
    padding: 0.2rem 0.6rem;
    font-size: var(--stp-fs);
    font-weight: 600;
}

.status-active,
.status-paid,
.status-completed,
.status-issued,
.status-opened,
.status-sent {
    background: var(--stp-ok-bg);
    color: var(--stp-ok-fg);
}

.status-inactive,
.status-left {
    background: var(--stp-neutral-bg);
    color: var(--stp-neutral-fg);
}

.status-partial {
    background: var(--stp-info-bg);
    color: var(--stp-info-fg);
}

.status-unpaid,
.status-calculated,
.status-prepared {
    background: var(--stp-warn-bg);
    color: var(--stp-warn-fg);
}

.status-overdue,
.status-failed {
    background: var(--stp-err-bg);
    color: var(--stp-err-fg);
}

.net-fee-box {
    background: var(--stp-surface-2);
    border-radius: var(--stp-radius);
    padding: 0.85rem 1rem;
    font-weight: 600;
}

.quick-action-link {
    color: var(--stp-heading);
    text-decoration: none;
}

.quick-action-link:hover {
    border-color: var(--stp-primary);
    color: var(--stp-primary);
}

.expiry-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    font-weight: 600;
}

.expiry-badge small {
    font-weight: 600;
    font-size: var(--stp-fs);
}

.dashboard-document-alert {
    white-space: nowrap;
}

.dashboard-document-alert span + span {
    margin-left: 0.5rem;
}

.expiry-ok { color: var(--stp-success); }
.expiry-soon { color: var(--stp-warning); }
.expiry-expired { color: var(--stp-danger); }

.tenant-context-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin: 0 1rem;
    padding: 0.75rem 1rem;
    background: var(--stp-banner-bg);
    border: var(--stp-border-width) solid var(--stp-banner-border);
    border-radius: var(--stp-radius);
    color: var(--stp-banner-fg);
}

@media (min-width: 992px) {
    .tenant-context-banner {
        margin: 0.75rem 1.75rem 0;
    }
}

.reminder-box {
    white-space: pre-wrap;
    background: var(--stp-surface-2);
    border-radius: var(--stp-radius);
    padding: 1rem;
    font-family: inherit;
}

.nav-pills .nav-link {
    white-space: nowrap;
    border-radius: var(--stp-radius-pill);
    color: var(--stp-heading);
    background: var(--stp-surface);
    border: var(--stp-border-width) solid var(--stp-border);
}

.nav-pills .nav-link.active {
    background: var(--stp-primary);
    border-color: var(--stp-primary);
    color: var(--stp-primary-fg);
}

@media (min-width: 992px) {
    .app-sidebar {
        transform: none;
    }

    .app-main {
        margin-left: var(--stp-sidebar);
    }

    .app-content {
        padding: var(--stp-content-pad);
    }

    .login-card {
        padding: 2.4rem;
    }
}

.student-photo-frame {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--stp-radius);
    border: var(--stp-border-width) solid var(--stp-border);
    background: var(--stp-surface-2);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.15rem;
}

.student-photo-frame-lg {
    width: 8rem;
    height: 8rem;
    padding: 0.35rem;
}

.student-photo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.student-photo-fallback {
    color: var(--stp-heading);
    font-weight: 700;
    font-size: var(--stp-fs);
}

.student-photo-frame-lg .student-photo-fallback {
    font-size: 2rem;
}

button.student-photo-frame {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
}

.student-photo-zoom {
    cursor: zoom-in;
}

.student-photo-picker video {
    width: 100%;
    max-width: 20rem;
    min-height: 12rem;
    border-radius: var(--stp-radius);
    background: #111;
    display: block;
}

.student-photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--stp-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.student-photo-lightbox[hidden] {
    display: none !important;
}

.student-photo-lightbox img {
    max-width: min(96vw, 52rem);
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--stp-radius);
    box-shadow: var(--stp-shadow-lg);
    background: var(--stp-surface);
}

.student-photo-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: var(--stp-radius-pill);
    background: var(--stp-surface);
    color: var(--stp-heading);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.document-preview-image {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    background: var(--stp-surface);
    border-radius: var(--stp-radius);
}

.document-preview-frame {
    width: 100%;
    min-height: 75vh;
    border: 0;
    border-radius: var(--stp-radius);
    background: var(--stp-surface);
}

.stop-map {
    width: 100%;
    height: 280px;
    border-radius: var(--stp-radius-lg);
    border: var(--stp-border-width) solid var(--stp-border);
    background: var(--stp-surface-2);
}

.stop-student-list {
    max-height: 16rem;
    overflow: auto;
    border: var(--stp-border-width) solid var(--stp-border);
    border-radius: var(--stp-radius);
    padding: 0.4rem 0.85rem;
}

.location-map .btn {
    min-height: 38px;
}

.drive-body {
    min-height: 100vh;
    margin: 0;
    background: var(--stp-bg);
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom));
}

.drive-shell {
    width: min(100%, 40rem);
    margin: 0 auto;
}

.drive-kicker {
    margin: 0 0 0.35rem;
    color: var(--stp-muted);
    font-size: var(--stp-fs);
    font-weight: 600;
}

.drive-shell h1 {
    margin: 0 0 0.5rem;
    font-size: var(--stp-fs-title);
}

.drive-lead {
    color: var(--stp-muted);
    margin: 0 0 1rem;
}

.drive-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.85rem 1rem;
    font-size: var(--stp-fs);
    margin-bottom: 1rem;
}

.drive-stops {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.drive-stop {
    display: flex;
    gap: 0.75rem;
    background: var(--stp-surface);
    border: var(--stp-border-width) solid var(--stp-border);
    border-radius: var(--stp-radius-card);
    padding: 0.9rem;
    box-shadow: var(--stp-shadow);
}

.drive-stop-index {
    flex: 0 0 2rem;
    height: 2rem;
    border-radius: var(--stp-radius-pill);
    background: var(--stp-navy);
    color: var(--stp-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.drive-stop-body {
    flex: 1;
    min-width: 0;
}

.drive-stop-address {
    color: var(--stp-muted);
    font-size: var(--stp-fs);
    margin: 0.2rem 0 0.55rem;
}

.drive-stop-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.drive-btn-sm {
    min-height: 2.6rem;
    padding: 0.45rem 0.85rem;
    font-weight: 600;
}

.drive-body .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: var(--stp-radius-btn);
    border: var(--stp-border-width) solid transparent;
}

.drive-body .btn-primary {
    background: var(--stp-primary);
    color: var(--stp-primary-fg);
}

.drive-body .btn-success {
    background: var(--stp-success);
    color: var(--stp-on-accent);
}

.drive-body .btn-outline-primary {
    background: var(--stp-surface);
    color: var(--stp-primary);
    border-color: var(--stp-primary);
}

.license-history-row td {
    background: var(--stp-table-stripe);
    font-size: var(--stp-fs);
}

.student-list-cell {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 11.5rem;
}

.student-list-identity {
    min-width: 0;
}

.student-name-link,
.student-secondary-link {
    font-weight: 650;
    color: var(--stp-heading);
    text-decoration: none;
}

.student-name-link {
    display: inline-block;
    line-height: 1.25;
}

.student-name-link:hover,
.student-secondary-link:hover {
    color: var(--stp-primary);
    text-decoration: underline;
}

.student-phone-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.students-table .student-phone-line,
.students-table .phone-actions {
    flex-wrap: nowrap;
}

.student-phone-line + .student-phone-line {
    margin-top: 0.35rem;
}

.student-phone-label {
    min-width: 3.5rem;
    font-size: var(--stp-fs);
    color: var(--stp-muted);
}

.students-table .student-actions-col {
    min-width: 11.5rem;
}

.students-table .table-actions .btn {
    min-height: 2.15rem;
}

@media (max-width: 991.98px) {
    .students-table .table-actions .btn {
        flex: 1 1 auto;
        min-width: 5.5rem;
    }
}

.live-tracking-map {
    width: 100%;
    height: min(38vh, 20rem);
    min-height: 11.25rem;
    background: var(--stp-surface-2);
}

.route-nav-map {
    width: 100%;
    min-height: 22rem;
    height: min(70vh, 36rem);
    border-radius: var(--stp-radius-lg);
    background: var(--stp-surface-2);
}

.route-nav-pin {
    position: absolute;
    transform: translate(-0.85rem, calc(-100% - 0.15rem));
    display: flex;
    align-items: center;
    gap: 0.3rem;
    pointer-events: none;
    white-space: nowrap;
}

.route-nav-pin-num {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: var(--stp-radius-pill);
    background: var(--stp-primary);
    color: var(--stp-primary-fg);
    font-weight: 700;
    font-size: var(--stp-fs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--stp-shadow);
    flex-shrink: 0;
}

.route-nav-pin-name {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--stp-surface);
    color: var(--stp-heading);
    font-size: var(--stp-fs);
    font-weight: 650;
    line-height: 1.2;
    padding: 0.2rem 0.45rem;
    border-radius: var(--stp-radius-sm);
    box-shadow: var(--stp-shadow);
}

.route-nav-list {
    list-style: none;
    padding: 0;
}

.route-nav-list-item {
    display: flex;
    gap: 0.7rem;
    padding: 0.7rem 0;
    border-bottom: var(--stp-border-width) solid var(--stp-border);
}

.route-nav-list-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.route-nav-list-num {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: var(--stp-radius-pill);
    background: var(--stp-primary);
    color: var(--stp-primary-fg);
    font-weight: 700;
    font-size: var(--stp-fs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.gps-keepalive .btn {
    min-height: 2.4rem;
}

@media (max-width: 576px) {
    .gps-keepalive .btn {
        width: 100%;
    }
}

/* Veli / öğrenci aile kabuğu — native uygulama görünümü */
.portal-app {
    background: var(--stp-bg-2);
}

.portal-app .app-main {
    margin-left: 0;
    max-width: 30rem;
    margin-inline: auto;
    background: var(--stp-bg);
    min-height: 100vh;
    min-height: 100dvh;
    box-shadow: var(--stp-shadow-lg);
    position: relative;
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

.portal-navbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: calc(0.65rem + env(safe-area-inset-top, 0px)) 1rem 0.65rem;
    background: var(--stp-navbar-bg);
    border-bottom: var(--stp-border-width) solid var(--stp-border);
}

.portal-navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.portal-navbar-brand img {
    border-radius: var(--stp-radius-sm, 0.4rem);
    flex-shrink: 0;
}

.portal-navbar-title {
    min-width: 0;
}

.portal-navbar-title strong,
.portal-navbar-title small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-navbar-title strong {
    font-size: var(--stp-fs);
    color: var(--stp-heading);
    font-family: var(--stp-font-heading);
}

.portal-navbar-title small {
    color: var(--stp-muted);
    font-size: var(--stp-fs);
}

.portal-navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.portal-user-chip {
    border: 0;
    background: transparent;
    padding: 0;
    min-width: 0;
}

.portal-tabbar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 30rem);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    background: var(--stp-surface);
    border-top: var(--stp-border-width) solid var(--stp-border);
    padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    z-index: 1080;
}

.portal-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 3.1rem;
    padding: 0.25rem 0.1rem;
    color: var(--stp-muted);
    text-decoration: none;
    font-size: var(--stp-fs);
    font-weight: 650;
}

.portal-tab i {
    font-size: var(--stp-fs-title);
}

.portal-tab.is-active {
    color: var(--stp-primary);
}

.portal-home {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.portal-hello h1 {
    font-size: var(--stp-fs-title);
    margin: 0 0 0.2rem;
    color: var(--stp-heading);
    font-family: var(--stp-font-heading);
}

.portal-hello p {
    margin: 0;
    color: var(--stp-muted);
}

.portal-hello-kicker {
    font-size: var(--stp-fs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--stp-primary);
    margin-bottom: 0.15rem !important;
}

.portal-debt-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: var(--stp-radius-card);
    background: var(--stp-err-bg);
    color: var(--stp-err-fg);
    text-decoration: none;
    font-weight: 650;
}

.portal-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.portal-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    min-height: 5.4rem;
    padding: 0.95rem 0.9rem;
    border-radius: var(--stp-radius-card);
    background: var(--stp-surface);
    border: var(--stp-border-width) solid var(--stp-border);
    color: var(--stp-heading);
    text-decoration: none;
    font-weight: 650;
    font-size: var(--stp-fs);
}

.portal-tile-count {
    position: absolute;
    top: 0.7rem;
    right: 0.75rem;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--stp-danger);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.portal-tile i {
    font-size: 1.25rem;
    color: var(--stp-primary);
}

.portal-section-title {
    font-size: var(--stp-fs);
    margin: 0.25rem 0 0;
    color: var(--stp-heading);
}

.portal-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.portal-student-card,
.portal-row {
    background: var(--stp-surface);
    border: var(--stp-border-width) solid var(--stp-border);
    border-radius: var(--stp-radius-card);
    padding: 0.9rem;
}

.portal-student-main {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.portal-student-copy {
    min-width: 0;
    flex: 1;
}

.portal-student-copy strong,
.portal-student-copy span,
.portal-row strong,
.portal-row span {
    display: block;
}

.portal-student-copy span,
.portal-row span {
    color: var(--stp-muted);
    font-size: var(--stp-fs);
}

.portal-avatar {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--stp-surface-2);
}

.portal-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--stp-primary);
}

.portal-status {
    margin-top: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--stp-radius);
    background: var(--stp-surface-2);
    color: var(--stp-muted);
    font-size: var(--stp-fs);
}

.portal-status small {
    display: block;
    margin-top: 0.1rem;
}

.portal-status-ok {
    background: var(--stp-ok-bg);
    color: var(--stp-ok-fg);
}

.portal-status-missed {
    background: var(--stp-warn-bg);
    color: var(--stp-warn-fg);
}

.portal-status-debt {
    background: var(--stp-err-bg);
    color: var(--stp-err-fg);
}

.portal-student-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.portal-student-actions .btn {
    flex: 1 1 8rem;
    min-height: 2.75rem;
}

.portal-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}

a.portal-row {
    text-decoration: none;
    color: inherit;
}

.portal-row-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}

.portal-subnav {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.portal-subnav a {
    flex: 1;
    text-align: center;
    padding: 0.65rem 0.5rem;
    min-height: 2.75rem;
    border-radius: var(--stp-radius-pill);
    background: var(--stp-surface);
    border: var(--stp-border-width) solid var(--stp-border);
    color: var(--stp-text);
    text-decoration: none;
    font-weight: 650;
}

.portal-subnav a.is-active {
    background: var(--stp-primary);
    border-color: var(--stp-primary);
    color: var(--stp-primary-fg);
}

.portal-app .app-content {
    padding: 1rem 1rem 1.25rem;
}

.portal-app .btn-primary,
.portal-app .btn-outline-primary,
.portal-app .form-control,
.portal-app .form-select {
    min-height: 2.75rem;
}

.portal-app .nav-pills .nav-link {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
}

@media (min-width: 992px) {
    .portal-app .app-main {
        margin-left: 0;
    }
}

.student-barcode-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 3.5rem;
    font-size: var(--stp-fs);
    font-weight: 700;
    margin-bottom: 1rem;
}

.student-barcode-screen {
    text-align: center;
    padding: 0.25rem 0 1.5rem;
}

.student-barcode-qr {
    background: #fff;
    border-radius: 1.25rem;
    padding: 1.25rem;
    display: inline-block;
    box-shadow: 0 8px 24px rgba(15, 39, 68, 0.12);
}

.student-barcode-qr svg {
    width: min(78vw, 320px);
    height: auto;
    display: block;
}

.student-barcode-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--stp-fs);
    letter-spacing: 0.02em;
    margin-top: 0.85rem;
    word-break: break-all;
}

.announcement-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 39, 68, 0.55);
}

body:has(.announcement-popup-overlay) {
    overflow: hidden;
}

.announcement-popup-card {
    width: min(100%, 32rem);
    max-height: min(90vh, 40rem);
    overflow: auto;
    border-radius: 1rem;
    background: var(--stp-surface, #fff);
    box-shadow: var(--stp-shadow-lg, 0 1rem 2.5rem rgba(15, 39, 68, 0.28));
}

.announcement-popup-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
}

.announcement-popup-head h2 {
    flex: 1;
    line-height: 1.3;
}

.announcement-popup-main {
    padding: 1rem 1.1rem;
}

.announcement-popup-body {
    font-size: var(--stp-fs);
    line-height: 1.5;
}

.announcement-popup-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0 1.1rem 1.1rem;
}

.announcement-popup-ack {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--stp-border, #d9e2ec);
    border-radius: 0.75rem;
    background: var(--stp-surface, #fff);
}

.announcement-popup-ack .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    flex-shrink: 0;
}

.announcement-popup-ack .form-check-label {
    font-weight: 600;
}

.portal-app .announcement-popup-ack,
.portal-app .announcement-popup-footer .btn-primary {
    min-height: 48px;
}

.custom-permission-panel .permission-matrix[hidden] {
    display: none !important;
}

.custom-permission-panel:has(#custom_permissions:checked) .permission-matrix {
    display: block !important;
}

.sidebar-filter {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    padding: 0.4rem 0.65rem;
    border: var(--stp-border-width) solid var(--stp-sidebar-border);
    border-radius: var(--stp-radius);
    color: var(--stp-sidebar-muted);
}

.sidebar-filter input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--stp-sidebar-text);
    font-size: var(--stp-fs-menu, var(--stp-fs));
}

.sidebar-filter input:focus {
    outline: none;
}

.sidebar-link.is-filtered-out {
    display: none !important;
}

.dash-stack {
    display: flex;
    flex-direction: column;
}

.dash-block {
    order: 10;
}

.dash-compact-panel .panel-card {
    height: 100%;
}

.dash-compact-panel h2,
.dash-compact-panel .h6 {
    font-size: var(--stp-fs-body, var(--stp-fs));
}

.dash-compact-panel .table,
.dash-compact-panel .table th,
.dash-compact-panel .table td {
    font-size: var(--stp-fs-table, var(--stp-fs));
}

.dash-compact-panel .text-muted,
.dash-compact-panel a:not(.btn),
.dash-compact-panel .dashboard-document-alert {
    font-size: var(--stp-fs-body, var(--stp-fs));
}

.dash-compact-panel .panel-card > p.text-muted {
    margin-bottom: 0.45rem !important;
}

html[data-workspace="classic"] .dash-filter { order: 1; }
html[data-workspace="classic"] .dash-actions { order: 2; }
html[data-workspace="classic"] .dash-kpis { order: 3; }
html[data-workspace="classic"] .dash-ops { order: 4; }
html[data-workspace="classic"] .dash-finance { order: 5; }
html[data-workspace="classic"] .dash-charts { order: 6; }
html[data-workspace="classic"] .dash-docs { order: 7; }

html[data-workspace="ops"] .dash-ops { order: 1; }
html[data-workspace="ops"] .dash-actions { order: 2; }
html[data-workspace="ops"] .dash-filter { order: 3; }
html[data-workspace="ops"] .dash-kpis { order: 4; }
html[data-workspace="ops"] .dash-finance { order: 5; }
html[data-workspace="ops"] .dash-charts { order: 6; }
html[data-workspace="ops"] .dash-docs { order: 7; }

html[data-workspace="finance"] .dash-kpis { order: 1; }
html[data-workspace="finance"] .dash-finance { order: 2; }
html[data-workspace="finance"] .dash-charts { order: 3; }
html[data-workspace="finance"] .dash-actions { order: 4; }
html[data-workspace="finance"] .dash-filter { order: 5; }
html[data-workspace="finance"] .dash-ops { order: 6; }
html[data-workspace="finance"] .dash-docs { order: 7; }

html[data-workspace="compact"] .dash-actions { order: 1; }
html[data-workspace="compact"] .dash-ops { order: 2; }
html[data-workspace="compact"] .dash-kpis { order: 3; }
html[data-workspace="compact"] .dash-finance { order: 4; }
html[data-workspace="compact"] .dash-charts { order: 5; }
html[data-workspace="compact"] .dash-filter { order: 6; }
html[data-workspace="compact"] .dash-docs { order: 7; }

html[data-workspace="ops"] .sidebar-link {
    padding-top: 0.42rem;
    padding-bottom: 0.42rem;
    font-size: var(--stp-fs-menu, var(--stp-fs));
}

html[data-workspace="finance"] .dash-kpis .kpi-strip {
    grid-auto-rows: 7.75rem;
}

html[data-workspace="compact"] .kpi-strip {
    grid-auto-rows: 5.75rem;
}

@media (min-width: 992px) {
    html[data-workspace="ops"] {
        --stp-sidebar: 248px;
    }

    html[data-workspace="compact"] {
        --stp-sidebar: 4.55rem;
    }

    html[data-workspace="compact"] .app-sidebar {
        transition: width 0.16s ease;
        overflow: hidden;
    }

    html[data-workspace="compact"] .sidebar-brand {
        justify-content: center;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    html[data-workspace="compact"] .sidebar-brand div,
    html[data-workspace="compact"] .sidebar-label,
    html[data-workspace="compact"] .sidebar-link span,
    html[data-workspace="compact"] .sidebar-filter,
    html[data-workspace="compact"] .sidebar-theme {
        display: none;
    }

    html[data-workspace="compact"] .sidebar-link {
        justify-content: center;
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

    html[data-workspace="compact"] .sidebar-group-items[hidden] {
        display: flex !important;
        flex-direction: column;
    }

    html[data-workspace="compact"] .app-sidebar:hover {
        width: 280px;
        box-shadow: 8px 0 28px rgba(15, 39, 68, 0.18);
        z-index: 1050;
    }

    html[data-workspace="compact"] .app-sidebar:hover .sidebar-brand {
        justify-content: flex-start;
    }

    html[data-workspace="compact"] .app-sidebar:hover .sidebar-brand div,
    html[data-workspace="compact"] .app-sidebar:hover .sidebar-label,
    html[data-workspace="compact"] .app-sidebar:hover .sidebar-link span,
    html[data-workspace="compact"] .app-sidebar:hover .sidebar-filter,
    html[data-workspace="compact"] .app-sidebar:hover .sidebar-theme {
        display: block;
    }

    html[data-workspace="compact"] .app-sidebar:hover .sidebar-filter {
        display: flex;
    }

    html[data-workspace="compact"] .app-sidebar:hover .sidebar-link {
        justify-content: flex-start;
    }
}

.workspace-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
    gap: 0.85rem;
}

.workspace-pick {
    display: block;
    cursor: pointer;
    margin: 0;
}

.workspace-pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.workspace-pick-body {
    display: block;
    height: 100%;
    padding: 0.9rem;
    border: var(--stp-border-width) solid var(--stp-border);
    border-radius: var(--stp-radius-card);
    background: var(--stp-surface);
}

.workspace-pick.is-current .workspace-pick-body,
.workspace-pick:has(input:checked) .workspace-pick-body {
    border-color: var(--stp-primary);
    box-shadow: 0 0 0 1px var(--stp-primary);
}

.workspace-mock {
    display: flex;
    height: 5.5rem;
    margin-bottom: 0.75rem;
    border-radius: 0.4rem;
    overflow: hidden;
    background: var(--stp-surface-2, #eef2f6);
}

.workspace-mock-side {
    width: 28%;
    background: #16375f;
}

.workspace-mock-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.4rem;
}

.workspace-mock-bar,
.workspace-mock-kpis,
.workspace-mock-grid {
    display: block;
    border-radius: 0.2rem;
    background: rgba(22, 55, 95, 0.12);
}

.workspace-mock-bar { height: 0.55rem; }
.workspace-mock-kpis { height: 1.35rem; }
.workspace-mock-grid { flex: 1; }

.workspace-mock-ops .workspace-mock-kpis {
    background: #f0c14b;
}

.workspace-mock-finance .workspace-mock-kpis {
    height: 2.1rem;
    background: #198754;
}

.workspace-mock-compact .workspace-mock-side {
    width: 12%;
}

body.portal-app .sidebar-filter {
    display: none;
}

th.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    padding-right: 1.4rem;
    position: relative;
}

th.sortable-th::before,
th.sortable-th::after {
    position: absolute;
    right: 0.3rem;
    opacity: 0.35;
    font-size: 0.65em;
    line-height: 1;
    pointer-events: none;
}

th.sortable-th::before {
    content: "▲";
    top: 0.45em;
}

th.sortable-th::after {
    content: "▼";
    bottom: 0.4em;
}

th.sortable-th.sorting_asc::before,
th.sortable-th.sorting_desc::after {
    opacity: 1;
}

.daily-date-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.daily-date-nav-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.daily-date-nav-row .form-control {
    flex: 1;
    min-width: 9rem;
    max-width: 14rem;
}

.daily-date-nav-row .js-daily-date-step {
    flex: 0 0 auto;
    width: 2.5rem;
    padding-left: 0;
    padding-right: 0;
}

.daily-trip-table td.daily-trip-factory {
    min-width: 12rem;
}

.daily-trip-table td.daily-trip-qty {
    min-width: 4.5rem;
}

@media (max-width: 767.98px) {
    .daily-trip-wrap.table-responsive {
        overflow: visible;
    }

    .daily-trip-table thead {
        display: none;
    }

    .daily-trip-table,
    .daily-trip-table tbody {
        display: block;
        width: 100%;
    }

    .daily-trip-table tr.js-daily-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.4rem;
        width: 100%;
        margin-bottom: 0.85rem;
        padding: 0.75rem;
        border: 1px solid var(--stp-border, #d5dee8);
        border-radius: 0.6rem;
        background: var(--stp-surface, #fff);
    }

    .daily-trip-table td {
        display: grid;
        grid-template-columns: 5.25rem minmax(0, 1fr);
        gap: 0.5rem;
        align-items: center;
        min-width: 0 !important;
        width: 100%;
        padding: 0;
        border: 0;
    }

    .daily-trip-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--stp-muted, #5b6b7c);
        line-height: 1.2;
    }

    .daily-trip-table td.daily-trip-remove {
        display: flex;
        justify-content: flex-end;
        grid-template-columns: none;
    }

    .daily-trip-table td.daily-trip-remove::before {
        content: none;
    }

    .daily-trip-table td.daily-trip-notes {
        min-width: 0;
    }
}