/* Customer Portal — shadcn/ui inspired design system */

:root {
    --cp-background: hsl(0 0% 100%);
    --cp-foreground: hsl(240 10% 3.9%);
    --cp-card: hsl(0 0% 100%);
    --cp-card-foreground: hsl(240 10% 3.9%);
    --cp-primary: hsl(240 5.9% 10%);
    --cp-primary-foreground: hsl(0 0% 98%);
    --cp-secondary: hsl(240 4.8% 95.9%);
    --cp-secondary-foreground: hsl(240 5.9% 10%);
    --cp-muted: hsl(240 4.8% 95.9%);
    --cp-muted-foreground: hsl(240 3.8% 46.1%);
    --cp-accent: hsl(240 4.8% 95.9%);
    --cp-accent-foreground: hsl(240 5.9% 10%);
    --cp-destructive: hsl(0 84.2% 60.2%);
    --cp-destructive-foreground: hsl(0 0% 98%);
    --cp-border: hsl(240 5.9% 90%);
    --cp-input: hsl(240 5.9% 90%);
    --cp-ring: hsl(240 5.9% 10%);
    --cp-radius: 0.5rem;
    --cp-radius-lg: 0.75rem;
    --cp-sidebar-width: 16rem;
    --cp-sidebar-collapsed: 4.5rem;
    --cp-topbar-height: 3.5rem;
    --cp-font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cp-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --cp-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

* {
    box-sizing: border-box;
}

body.cp-app {
    font-family: var(--cp-font);
    background: hsl(240 4.8% 95.9%);
    color: var(--cp-foreground);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ——— Sidebar ——— */
.cp-sidebar {
    width: var(--cp-sidebar-width);
    height: 100vh;
    background: var(--cp-background);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1030;
    border-right: 1px solid var(--cp-border);
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease, transform 0.2s ease;
}

.cp-sidebar.collapsed {
    width: var(--cp-sidebar-collapsed);
}

.cp-sidebar-header {
    padding: 0.4rem 0rem;
    border-bottom: 1px solid var(--cp-border);
    flex-shrink: 0;
}

.cp-brand-logo {
    height: 2.25rem;
    margin-bottom: 0.75rem;
    display: block;
}

.cp-sidebar.collapsed .cp-brand-logo {
    height: 2.6rem;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 0;
}

.cp-sidebar.collapsed .cp-brand-meta,
.cp-sidebar.collapsed .cp-brand-subtitle {
    display: none;
}

.cp-sidebar.collapsed .cp-sidebar-header {
    padding: 0.4rem 0.4rem;
    text-align: center;
    overflow: hidden;
}

.cp-brand-meta {
    font-size: 0.75rem;
    color: var(--cp-muted-foreground);
    line-height: 1.4;
    margin: 0;
}

.cp-brand-meta strong {
    display: block;
    color: var(--cp-foreground);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-top: 0.125rem;
}

.cp-brand-subtitle {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cp-muted-foreground);
    margin-top: 0.5rem;
}

.cp-nav {
    list-style: none;
    padding: 0.75rem;
    margin: 0;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cp-nav-item {
    margin: 0;
}

.cp-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--cp-radius);
    color: var(--cp-muted-foreground);
    text-decoration: none !important;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.cp-nav-link i {
    width: 1rem;
    text-align: center;
    font-size: 0.9375rem;
    flex-shrink: 0;
}

.cp-nav-link:hover {
    background: var(--cp-accent);
    color: var(--cp-accent-foreground);
}

.cp-nav-item.active .cp-nav-link {
    background: var(--cp-secondary);
    color: var(--cp-foreground);
}

.cp-sidebar.collapsed .cp-nav-link span {
    display: none;
}

.cp-sidebar.collapsed .cp-nav-link {
    justify-content: center;
    padding: 0.625rem 0.5rem;
    font-size: 0 !important;
    gap: 0 !important;
}

.cp-sidebar.collapsed .cp-nav-link i {
    font-size: 0.9375rem !important;
    margin: 0 !important;
}

/* ——— Topbar ——— */
.cp-topbar {
    height: var(--cp-topbar-height);
    background: hsl(0 0% 100% / 0.8);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--cp-border);
    position: fixed;
    top: 0;
    right: 0;
    left: var(--cp-sidebar-width);
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    transition: left 0.2s ease;
}

.cp-sidebar.collapsed ~ .cp-topbar {
    left: var(--cp-sidebar-collapsed);
}

.cp-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: var(--cp-radius);
    background: transparent;
    color: var(--cp-muted-foreground);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.cp-icon-btn:hover {
    background: var(--cp-accent);
    color: var(--cp-foreground);
}

.cp-topbar-user {
    font-size: 0.875rem;
    color: var(--cp-muted-foreground);
    margin-right: 0.75rem;
}

.cp-topbar-user b {
    color: var(--cp-foreground);
    font-weight: 600;
}

.cp-btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--cp-radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cp-destructive);
    text-decoration: none !important;
    transition: background 0.15s;
}

.cp-btn-logout:hover {
    background: hsl(0 84.2% 60.2% / 0.1);
    color: var(--cp-destructive);
    text-decoration: none !important;
}

/* ——— Main ——— */
.cp-main {
    margin-left: var(--cp-sidebar-width);
    padding: calc(var(--cp-topbar-height) + 1.5rem) 1.5rem 2rem;
    min-height: 100vh;
    transition: margin-left 0.2s ease;
}

.cp-sidebar.collapsed ~ .cp-main {
    margin-left: var(--cp-sidebar-collapsed);
}

.cp-footer {
    margin-left: var(--cp-sidebar-width);
    padding: 1rem 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--cp-muted-foreground);
    border-top: 1px solid var(--cp-border);
    transition: margin-left 0.2s ease;
}

.cp-sidebar.collapsed ~ .cp-footer {
    margin-left: var(--cp-sidebar-collapsed);
}

.cp-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.5);
    z-index: 1025;
    display: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.cp-overlay.show {
    display: block;
    opacity: 1;
}

/* ——— Typography ——— */
.cp-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.cp-page-title {
    margin: 0 0 0.25rem;
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--cp-foreground);
}

.cp-page-description {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cp-muted-foreground);
}

.cp-section-title {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* ——— Card ——— */
.cp-card,
.portal-card {
    background: var(--cp-card);
    color: var(--cp-card-foreground);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow-sm);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.cp-card-body,
.portal-card .card-body {
    padding: 1.5rem;
}

.cp-card-header,
.portal-card .card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--cp-border);
    background: var(--cp-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ——— Buttons ——— */
button.cp-btn {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    font-family: inherit;
    margin: 0;
}

.cp-btn,
.portal-page-actions .btn,
.portal-page-actions .cp-btn,
.portal-page-actions button.cp-btn,
.portal-page-actions a.cp-btn,
.portal-form-actions .btn,
.portal-form-actions .cp-btn,
.portal-form-actions a.cp-btn,
.portal-quick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--cp-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1;
    white-space: nowrap;
}

.cp-btn-primary,
.btn.portal-btn-primary,
.portal-page-actions .btn-primary,
.portal-form-actions .btn-primary {
    background: var(--cp-primary) !important;
    color: var(--cp-primary-foreground) !important;
    border-color: var(--cp-primary) !important;
}

.cp-btn-primary:hover,
.btn.portal-btn-primary:hover,
.portal-page-actions .btn-primary:hover {
    background: hsl(240 5.9% 20%) !important;
    border-color: hsl(240 5.9% 20%) !important;
    color: var(--cp-primary-foreground) !important;
}

.cp-btn-outline,
.btn.btn-outline-primary {
    background: var(--cp-background) !important;
    color: var(--cp-foreground) !important;
    border-color: var(--cp-input) !important;
}

.cp-btn-outline:hover,
.btn.btn-outline-primary:hover {
    background: var(--cp-accent) !important;
    color: var(--cp-accent-foreground) !important;
}

.cp-btn-secondary,
.btn.btn-light,
.btn.btn-outline-secondary {
    background: var(--cp-secondary) !important;
    color: var(--cp-secondary-foreground) !important;
    border-color: transparent !important;
}

.cp-btn-secondary:hover,
.btn.btn-light:hover {
    background: hsl(240 4.8% 90%) !important;
}

.cp-btn-sm {
    height: 2rem;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
}

/* ——— Forms ——— */
.cp-label,
.portal-form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cp-foreground);
    margin-bottom: 0.375rem;
}

.cp-input,
.portal-form-control,
.form-control.portal-form-control {
    display: flex;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--cp-foreground);
    background: var(--cp-background);
    border: 1px solid var(--cp-input);
    border-radius: var(--cp-radius);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cp-input:focus,
.portal-form-control:focus {
    outline: none;
    border-color: var(--cp-ring);
    box-shadow: 0 0 0 2px hsl(240 5.9% 10% / 0.1);
}

.cp-input.is-invalid,
.portal-form-control.is-invalid {
    border-color: var(--cp-destructive) !important;
    box-shadow: 0 0 0 2px hsl(0 84.2% 60.2% / 0.15) !important;
}

.cp-input-readonly,
.portal-readonly {
    background: var(--cp-muted) !important;
    color: var(--cp-muted-foreground) !important;
    cursor: not-allowed;
}

textarea.cp-input,
textarea.portal-form-control {
    min-height: 5rem;
    resize: vertical;
}

.portal-form-group {
    margin-bottom: 1.25rem;
}

.portal-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--cp-border);
    margin-top: 0.5rem;
}

/* ——— Select2 ——— */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 2.5rem !important;
    border: 1px solid var(--cp-input) !important;
    border-radius: var(--cp-radius) !important;
    background: var(--cp-background) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.375rem !important;
    padding-left: 0.75rem !important;
    color: var(--cp-foreground) !important;
    font-size: 0.875rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.375rem !important;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--cp-ring) !important;
    box-shadow: 0 0 0 2px hsl(240 5.9% 10% / 0.1) !important;
}

.select2-container--default .select2-dropdown {
    border: 1px solid var(--cp-border) !important;
    border-radius: var(--cp-radius) !important;
    box-shadow: var(--cp-shadow) !important;
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--cp-accent) !important;
    color: var(--cp-accent-foreground) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--cp-primary) !important;
    color: var(--cp-primary-foreground) !important;
}

.select2-container {
    width: 100% !important;
}

/* ——— Badge ——— */
.cp-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    border: 1px solid transparent;
}

.cp-badge-default {
    background: var(--cp-secondary);
    color: var(--cp-secondary-foreground);
}

.cp-badge-outline {
    background: transparent;
    border-color: var(--cp-border);
    color: var(--cp-foreground);
}

/* ——— Dashboard ——— */
.cp-welcome {
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--cp-shadow-sm);
}

.cp-welcome h2 {
    margin: 0 0 0.375rem;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.cp-welcome p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cp-muted-foreground);
}

.cp-stat-card,
.stat-card {
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    padding: 1.25rem;
    box-shadow: var(--cp-shadow-sm);
    height: 100%;
}

.cp-stat-card h4,
.stat-card h4 {
    margin: 0 0 0.25rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--cp-foreground);
}

.cp-stat-card span,
.stat-card span {
    font-size: 0.8125rem;
    color: var(--cp-muted-foreground);
}

a.cp-stat-card-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
}

a.cp-stat-card-link:hover,
a.cp-stat-card-link:focus,
a.cp-stat-card-link:hover .cp-stat-card,
a.cp-stat-card-link:focus .cp-stat-card,
a.cp-stat-card-link:hover .cp-stat-card h4,
a.cp-stat-card-link:hover .cp-stat-card span,
a.cp-stat-card-link:focus .cp-stat-card h4,
a.cp-stat-card-link:focus .cp-stat-card span {
    text-decoration: none !important;
}

a.cp-stat-card-link:hover .cp-stat-card,
a.cp-stat-card-link:focus .cp-stat-card {
    border-color: var(--cp-primary);
    box-shadow: var(--cp-shadow);
    transform: translateY(-1px);
}

a.cp-stat-card-link .cp-stat-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cp-detail-list {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
}

.cp-detail-list li {
    margin-bottom: 0.25rem;
}

.cp-alert {
    border-radius: var(--cp-radius);
    font-size: 0.875rem;
}

.cp-quick-card-body .portal-quick-btn + .portal-quick-btn {
    margin-top: 0.5rem;
}

.cp-quick-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cp-quick-actions .portal-quick-btn + .portal-quick-btn {
    margin-top: 0;
}

.cp-quick-card-body.flex-column .portal-quick-btn {
    width: 100%;
    text-align: center;
}

.cp-quick-card-body,
.portal-quick-card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ——— Info grid ——— */
.portal-info-item {
    margin-bottom: 1rem;
}

.portal-info-item strong {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cp-muted-foreground);
    margin-bottom: 0.25rem;
}

.portal-info-item {
    font-size: 0.875rem;
}

/* ——— Table ——— */
.cp-table-wrap .table {
    margin-bottom: 0;
    font-size: 0.875rem;
}

.cp-table-wrap .table thead th {
    background: var(--cp-muted);
    color: var(--cp-muted-foreground);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--cp-border);
    border-top: none;
    padding: 0.75rem 1rem;
}

.cp-table-wrap .table tbody td {
    padding: 0.875rem 1rem;
    vertical-align: middle;
    border-color: var(--cp-border);
    color: var(--cp-foreground);
}

.cp-table-wrap .table-striped tbody tr:nth-of-type(odd) {
    background: hsl(240 4.8% 95.9% / 0.5);
}

.cp-table-wrap .table tbody tr:hover {
    background: var(--cp-muted);
}

/* ——— WO status badges (shadcn secondary/outline variants) ——— */
.wo-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    border: 1px solid transparent;
}

.wo-status-new { background: var(--cp-primary); color: var(--cp-primary-foreground); }
.wo-status-acknowledged { background: hsl(48 96% 89%); color: hsl(32 95% 30%); border-color: hsl(48 96% 80%); }
.wo-status-assigned { background: hsl(199 89% 94%); color: hsl(199 89% 30%); border-color: hsl(199 89% 85%); }
.wo-status-scheduled { background: hsl(221 83% 93%); color: hsl(221 83% 35%); border-color: hsl(221 83% 85%); }
.wo-status-progress { background: hsl(142 76% 90%); color: hsl(142 72% 29%); border-color: hsl(142 76% 80%); }
.wo-status-hold { background: hsl(38 92% 90%); color: hsl(32 95% 30%); border-color: hsl(38 92% 80%); }
.wo-status-complete { background: var(--cp-secondary); color: var(--cp-secondary-foreground); border-color: var(--cp-border); }
.wo-status-closed { background: hsl(240 4.8% 90%); color: var(--cp-muted-foreground); }
.wo-status-unassigned { background: hsl(0 84.2% 95%); color: hsl(0 72% 40%); border-color: hsl(0 84.2% 88%); }
.wo-status-default { background: var(--cp-secondary); color: var(--cp-secondary-foreground); }

/* ——— Mobile WO cards ——— */
.wo-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wo-mobile-card {
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    padding: 1rem;
    box-shadow: var(--cp-shadow-sm);
}

.wo-mobile-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}

.wo-mobile-number {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cp-foreground);
}

.wo-mobile-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--cp-muted-foreground);
    margin-bottom: 0.625rem;
}

.wo-mobile-meta i {
    width: 1rem;
    margin-right: 0.375rem;
    opacity: 0.7;
}

.wo-mobile-desc {
    font-size: 0.875rem;
    color: var(--cp-foreground);
    margin: 0 0 0.875rem;
    line-height: 1.5;
}

/* ——— Modals ——— */
.modal-content {
    border: 1px solid var(--cp-border) !important;
    border-radius: var(--cp-radius-lg) !important;
    box-shadow: var(--cp-shadow) !important;
}

.modal-header {
    border-bottom: 1px solid var(--cp-border) !important;
    padding: 1rem 1.5rem !important;
}

.modal-header .modal-title {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--cp-foreground) !important;
}

.modal-body {
    padding: 1.5rem !important;
}

.modal-footer {
    border-top: 1px solid var(--cp-border) !important;
    padding: 1rem 1.5rem !important;
}

.modal-backdrop.show {
    opacity: 0.5 !important;
}

/* ——— Timeline cards in portal ——— */
.portal-timeline-card,
.timeline-card.wo-card {
    background: var(--cp-card) !important;
    border: 1px solid var(--cp-border) !important;
    border-radius: var(--cp-radius-lg) !important;
    box-shadow: var(--cp-shadow-sm) !important;
    padding: 1.5rem !important;
}

.portal-timeline-card h3,
.timeline-card h3 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--cp-foreground) !important;
}

/* ——— Photos ——— */
.wo-photo-card {
    border: 1px solid var(--cp-border) !important;
    border-radius: var(--cp-radius-lg) !important;
    box-shadow: var(--cp-shadow-sm) !important;
    overflow: hidden;
    transition: box-shadow 0.15s;
}

.wo-photo-card:hover {
    box-shadow: var(--cp-shadow) !important;
    transform: none;
}

.wo-photo-card img {
    height: 10rem;
    object-fit: cover;
    width: 100%;
}

/* ——— Auth pages ——— */
body.cp-auth {
    font-family: var(--cp-font);
    background: hsl(240 4.8% 95.9%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 1.25rem;
    color: var(--cp-foreground);
    -webkit-font-smoothing: antialiased;
}

.cp-auth-card {
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow);
    width: 100%;
    max-width: 24rem;
    padding: 2rem;
    text-align: center;
}

.cp-auth-logo {
    display: block;
    height: auto;
    max-height: 4.75rem;
    max-width: min(100%, 16rem);
    width: auto;
    margin: 0 auto 1.5rem;
    object-fit: contain;
}

.cp-auth-tagline {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cp-muted-foreground);
    margin-bottom: 0.25rem;
}

.cp-auth-subtitle {
    font-size: 0.8125rem;
    color: var(--cp-muted-foreground);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.cp-auth-form {
    text-align: left;
}

.cp-auth-form .form-group {
    margin-bottom: 1rem;
    position: relative;
}

.cp-auth-form .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
    display: block;
}

.cp-auth-form .cp-input {
    height: 2.5rem;
}

.cp-auth-form .password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 2.525rem;
    cursor: pointer;
    color: var(--cp-muted-foreground);
}

.cp-auth-btn {
    width: 100%;
    height: 2.5rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

.cp-auth-link {
    font-size: 0.8125rem;
    color: var(--cp-muted-foreground);
    margin-top: 1rem;
    display: block;
}

.cp-auth-link a {
    color: var(--cp-foreground);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cp-auth-link a:hover {
    color: var(--cp-foreground);
}

/* ——— Loader / blockUI ——— */
.blockUI.blockMsg.blockPage,
.blockUI.blockMsg {
    border: none !important;
    background: transparent !important;
    width: auto !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: default !important;
}

.blockUI.blockOverlay {
    background-color: hsl(240 4.8% 95.9%) !important;
    opacity: 0.82 !important;
}

.cp-loading-card,
.loading-container {
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow);
    padding: 1.5rem 2rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    min-width: 11rem;
}

.cp-loader,
.loader {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--cp-border);
    border-top-color: var(--cp-foreground);
    border-radius: 50%;
    animation: cp-spin 0.65s linear infinite;
    display: inline-block;
    box-sizing: border-box;
}

.cp-loader::after,
.loader::after {
    display: none;
}

.cp-loading-text,
.loading-text {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cp-muted-foreground);
    letter-spacing: 0.01em;
    text-transform: none;
}

@keyframes cp-spin {
    to { transform: rotate(360deg); }
}

/* ——— Photo upload modal loader ——— */
.cp-upload-modal-content {
    position: relative;
    overflow: hidden;
}

.cp-upload-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(0 0% 100% / 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: inherit;
}

.cp-upload-loading-card {
    min-width: 14rem;
    padding: 1.75rem 2rem;
    animation: cp-upload-fade-in 0.25s ease-out;
}

.cp-upload-loader {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
}

.cp-upload-subtext {
    margin: 0;
    max-width: 14rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--cp-muted-foreground);
    text-align: center;
}

.cp-upload-in-progress .modal-header .close,
.cp-upload-in-progress .cp-btn-secondary {
    opacity: 0.45;
    pointer-events: none;
}

@keyframes cp-upload-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ——— Toast (auth pages) ——— */
.jq-toast-wrap { width: 22rem !important; }
.jq-toast-single {
    background: var(--cp-card) !important;
    color: var(--cp-foreground) !important;
    border-radius: var(--cp-radius-lg) !important;
    box-shadow: var(--cp-shadow) !important;
    border: 1px solid var(--cp-border) !important;
    padding: 0.875rem 1rem !important;
}
.jq-toast-single.jq-icon-success { border-left: 3px solid hsl(142 72% 40%) !important; }
.jq-toast-single.jq-icon-error { border-left: 3px solid var(--cp-destructive) !important; }
.jq-toast-single.jq-icon-warning { border-left: 3px solid hsl(38 92% 50%) !important; }
.jq-toast-single.jq-icon-info { border-left: 3px solid hsl(221 83% 53%) !important; }
.jq-toast-heading {
    font-family: var(--cp-font) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.25rem !important;
    color: var(--cp-foreground) !important;
}
.jq-toast-single .close-jq-toast { color: var(--cp-muted-foreground) !important; }

@media (max-width: 480px) {
    body.cp-auth {
        align-items: flex-start;
        padding-top: 2rem;
    }
    .cp-auth-card {
        padding: 1.5rem;
    }
    .jq-toast-wrap {
        width: calc(100vw - 2rem) !important;
        max-width: 22rem !important;
    }
}

/* ——— Utilities ——— */
.text-muted {
    color: var(--cp-muted-foreground) !important;
}

.portal-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.portal-page-header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--cp-foreground);
}

.portal-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.portal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.portal-timeline-card {
    overflow-x: hidden;
}

/* ——— Responsive ——— */
@media (max-width: 1024px) {
    .cp-sidebar {
        transform: translateX(-100%);
        width: 16rem !important;
    }

    .cp-sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: var(--cp-shadow);
    }

    .cp-topbar,
    .cp-main,
    .cp-footer {
        left: 0 !important;
        margin-left: 0 !important;
    }

    .cp-main {
        padding: calc(var(--cp-topbar-height) + 1rem) 1rem 1.5rem;
    }

    .cp-topbar-user {
        display: none;
    }
}

@media (max-width: 767px) {
    .cp-page-title,
    .portal-page-header h2 {
        font-size: 1.5rem;
    }

    .portal-page-header,
    .cp-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .portal-page-actions,
    .portal-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .portal-page-actions .cp-btn,
    .portal-page-actions button.cp-btn,
    .portal-page-actions a.cp-btn,
    .portal-form-actions .btn,
    .portal-form-actions .cp-btn,
    .portal-form-actions a.cp-btn,
    .portal-quick-btn {
        width: 100%;
    }

    .cp-quick-card-body,
    .portal-quick-card-body {
        flex-direction: column;
        align-items: stretch;
    }

    .portal-card .card-body,
    .cp-card-body {
        padding: 1rem !important;
    }

    .portal-timeline-card {
        padding: 1rem !important;
    }

    .cp-welcome h2 {
        font-size: 1.25rem;
    }

    .cp-stat-card h4,
    .stat-card h4 {
        font-size: 1.5rem;
    }

    .cp-input,
    .portal-form-control,
    .select2-container--default .select2-selection--single {
        font-size: 1rem;
    }

    .modal-dialog {
        margin: 0.75rem auto;
        max-width: calc(100% - 1.5rem);
    }

    .modal-footer {
        flex-direction: column-reverse;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 0 0 0.5rem;
    }
}

/* Custom additions for Customer Portal updates */
.cp-sidebar.collapsed .cp-brand-meta-wrapper {
    display: none;
}

.cp-sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--cp-border);
    font-size: 0.75rem;
    color: var(--cp-muted-foreground);
    text-align: center;
    flex-shrink: 0;
    margin-top: auto;
}

.cp-sidebar.collapsed .cp-sidebar-footer {
    display: none;
}

/* modern shadcn-style dropdowns */
.dropdown-menu {
    border-radius: var(--cp-radius) !important;
    border: 1px solid var(--cp-border) !important;
    box-shadow: var(--cp-shadow) !important;
    padding: 0.25rem !important;
    font-size: 0.875rem !important;
    background-color: var(--cp-background) !important;
}

.dropdown-item {
    border-radius: calc(var(--cp-radius) - 0.125rem) !important;
    padding: 0.375rem 0.75rem !important;
    color: var(--cp-foreground) !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    text-align: left !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--cp-secondary) !important;
    color: var(--cp-foreground) !important;
    outline: none !important;
}

.dropdown-item i {
    width: 1rem !important;
    text-align: center !important;
    color: var(--cp-muted-foreground) !important;
}

/* File upload styling to vertically center native elements */
input[type="file"].form-control {
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

input[type="file"].form-control::-webkit-file-upload-button {
    height: 100%;
    margin: 0;
    margin-right: 0.75rem;
    padding: 0 1rem;
    border: none;
    border-right: 1px solid var(--cp-border);
    background-color: var(--cp-secondary);
    color: var(--cp-foreground);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

input[type="file"].form-control::-webkit-file-upload-button:hover {
    background-color: var(--cp-accent);
}

input[type="file"].form-control::file-selector-button {
    height: 100%;
    margin: 0;
    margin-right: 0.75rem;
    padding: 0 1rem;
    border: none;
    border-right: 1px solid var(--cp-border);
    background-color: var(--cp-secondary);
    color: var(--cp-foreground);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

input[type="file"].form-control::file-selector-button:hover {
    background-color: var(--cp-accent);
}
body .tooltip {
    pointer-events: none;
    z-index: 99999;
}
    body .tooltip.bs-tooltip-right {
        margin-left: 8px;
    }

        body .tooltip.bs-tooltip-right .arrow {
            left: 0;
        }