/* ===============================================
CSS RESET & BASE STYLES
=============================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: "poppins", sans-serif, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    font-size: 15px;
    overflow-x: hidden;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

a {
    text-decoration: none;
    color: inherit;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

img {
    max-width: 100%;
    display: block;
}

input:focus,
textarea:focus,
select:focus,
input:focus-visible {
    outline: none;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 16px;
    margin-bottom: .75rem;
}

ul {
    list-style: none;
}

/* ===============================================
   CSS VARIABLES (COLORS & SPACING)
   =============================================== */

:root {
    /* Primary Colors */
    --primary-blue: #2563EB;
    --primary-blue-hover: #1D4ED8;
    --primary-dark: #0F172A;
    --primary-purple: #6859e6;
    
    /* Background Colors */
    --bg-primary: #F8F9FB;
    --bg-white: #FFFFFF;
    --bg-dark: #0B0E1E;
    --bg-body: linear-gradient( to bottom, #D9DFFF 0%, #EEF1FF 55%, #FFFFFF 90% );
    --bg-light-gery: #dfdfdf;
    --table-hover: #D9DFFF;
    
    /* Text Colors */
    --text-primary: #394A51;
    --text-dark: #0F172A;
    --text-secondary: #787878;
    --text-white: #FFFFFF;
    --text-light-grey: #787878;
    --text-muted: #94A3B8;
    --text-warning: #F59E0B;
    --text-danger: #DC2626;
    --text-danger-dark: #7A0C00;
    
    /* Status Colors */
    --status-active: #158661;
    --status-lead: #3B82F6;
    --status-warning: #F59E0B;
    --status-danger: #EF4444;
    --status-draft: #475569;
    --required: #EF4444;
    
    /* Border & Divider */
    --border-color: #E2E8F0;
    --border-radius: 10px;
    --btn-border-radius: 100px;
    
    /* Shadows */
    --card-shadow: rgba(50, 50, 93, 0.15) 0px 2px 5px -1px, rgba(0, 0, 0, 0.1) 0px 1px 3px -1px;
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Sidebar */
    --sidebar-width: 275px;
    --topbar-height: 64px;
    --nav-text: #CFEAFF;
    
    /* Forms */
    --form-border: rgba(57, 74, 81, .3);
}

.light-text {
    color: var(--text-light-grey);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.mb-sm {
    margin-bottom: 10px !important;
}

.mb-none {
    margin-bottom: 0 !important;
}

.text-center {
    text-align: center;
}

.txt-sm {
    font-size: 12px;
}

.link-highlight {
    color: var(--primary-blue);
}

@media (max-width: 1023px) {
    .hide-mobile {
        display: none;
    }
}

.btn {
    padding: 11px 22px 9px 22px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--btn-border-radius);
    display: inline-block;
    position: relative;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
}

.btn-icon {
    padding-left: 35px;
}

.btn-icon::before {
    content: "+";
    font-size: 24px;
    position: absolute;
    top: 54.5%;
    left: 12px;
    transform: translateY(-50%);
}

.primary-btn {
    color: var(--text-white);
    background: var(--primary-blue);
    border: 1px solid var(--primary-blue);
}

.primary-btn:hover {
    background: var(--primary-blue-hover);
}

.data-details a:not(.data-btn):hover {
    color: var(--primary-blue-hover);
}

.secondary-btn {
    color: var(--primary-blue);
    background: var(--bg-white);
    border: 1px solid var(--primary-blue);
}

.secondary-btn:hover {
    background: #D9DFFFA3;
}

.delete-btn {
    color: #fff;
    background: var(--text-danger);
    border: 1px solid var(--text-danger);
}

.text-danger {
    color: var(--text-danger);
}

.cancel-btn {
    color: var(--primary-blue);
    background: var(--bg-white);
    border: 1px solid var(--primary-blue);
}

.danger-btn {
    color: var(--text-danger);
    border: 1px solid var(--form-border);
}

.btn-md {
    padding: 8px 15px 7px 29px;
}

.btn-md::before {
    top: 21px;
    left: 8px;
}

.btn-border-md {
    color: var(--primary-blue);
    border: 1px solid var(--primary-blue);
    padding: 6px 8px 2px 8px;
    border-radius: var(--border-radius);
    cursor: pointer;
}

.btn-remove svg {
    color: var(--text-danger);
    background: var(--bg-light-gery);
    width: 35px;
    padding: 7px;
    border-radius: var(--border-radius);
    transition: all .3s;
}

.btn-remove svg:hover {
    background: #c4c4c4;
}

button:disabled,
.btn:disabled {
    background-color: #e5e7eb; /* light neutral */
    color: #9ca3af;            /* muted text */
    border-color: #e5e7eb;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    opacity: 1; /* don’t fade */
}

.contrast-primary-btn {
    color: #fff;
    background: var(--primary-purple);
    border: 1px solid var(--primary-purple);
}

.contrast-secondary-btn {
    color: var(--primary-purple);
    background: #fff;
    border: 1px solid var(--primary-purple);
}

.create-new {
    color: var(--primary-blue);
    cursor: pointer;
}

.btn-options {
    padding: 11px 45px 9px 20px;
    font-weight: 500;
    border-radius: var(--btn-border-radius);
    display: inline-block;
    position: relative;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
}

/* Divider */
.btn-options::after {
    content: "";
    position: absolute;
    top: 0;
    right: 43px;
    width: 1px;
    height: 100%;
    background: rgba(255,255,255,0.2);
}

/* Arrow icon */
.btn-options::before {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background-color: currentColor;

    /* SVG as mask */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.text-xs {
    font-size: 11px;
    display: block;
    font-weight: 400;
}

.scroll-container {
    max-height: 500px;
    overflow-y: scroll;
}

.team-activity {
    margin-top: 24px;
}

/* ===============================================
ALERTS
=============================================== */

.alert {
    background: #232531;
    position: fixed;
    top: 76px;
    right: 30px;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: var(--border-radius);
    z-index: 99;

    opacity: 0;
    transform: translateY(-20px) scale(0.98);
}

/* Enter */
.alert.is-visible {
    animation: alertIn 450ms cubic-bezier(.34,1.56,.64,1) forwards;
}

/* Exit */
.alert.is-exiting {
    animation: alertOut 300ms ease forwards;
}

.alert-message {
    margin: 0 60px 0 12px;
}

.alert-icon svg, .alert-close {
    width: 24px;
}

.alert-close {
    font-size: 26px;
}

.alert-icon svg {
    color: var(--status-active);
    background: #3b3e51;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    padding: 7px;
    position: relative;
    top: 4px;
}

.alert.error svg {
    color: var(--text-danger);
}

.alert-title {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.alert-description {
    color: #b9b9b9;
    font-size: 13px;
}

.alert-description a:hover {
    text-decoration: underline;
}

.alert-close {
    color: var(--bg-light-gery);
    cursor: pointer;
}

/* ── Toast additions — action button + progress bar + hide animation ── */

/* Smooth hide animation */
.alert.is-hiding {
    animation: alertOut 300ms ease forwards;
}

/* Action button (e.g. Undo) */
.alert-action-btn {
    color: #92400e;
    background: #FEF3C7;
    flex-shrink: 0;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.85;
    margin-left: 8px;
    margin-right: 5px;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.alert-action-btn:hover {
    opacity: 1;
}

/* Progress bar — shows time remaining for action toasts */
.alert-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--status-active);
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

.alert-progress-bar {
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0 0 6px 6px;
}

.alert.has-progress {
    padding-bottom: 10px;
}

@keyframes alertIn {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.98);
    }
    70% {
        transform: translateY(4px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes alertOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.98);
    }
}

.edit-warning-banner svg, .change-request-banner svg, .conflict-banner-inner svg,
.popup-notice-warning svg {
    width: 20px;
    transform: translateY(5px);
}

/* ===============================================
POPUPS
=============================================== */

/* Popup Base */
.popup {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 500;
}

.popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.popup-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: 92%;
    max-width: 720px;
    background: #fff;
    border-radius: 12px;
    padding: 0 24px 24px 24px;
    will-change: transform;
    opacity: 0;
    transition: 
        opacity 0.2s ease,
        transform 0.2s ease;
}

/* Active State */
.popup.is-active {
    pointer-events: auto;
    z-index: 1000;
}

.popup.is-active .popup-overlay {
    opacity: 1;
}

.popup.is-active .popup-container {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (min-width: 1024px) {
    .popup.is-active .popup-container {
        max-height: 90vh;
        overflow-y: auto;
    }
}

.popup-title {
    color: var(--text-dark);
    font-size: 1.4rem;
    font-weight: 700;
    padding-top: 24px;
    margin-bottom: .5rem;
}

/* Close Button */
.popup-close {
    width: 22px;
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

body.popup-open {
    overflow: hidden;
}

[data-popup="add-customer"] {
    z-index: 9;
}

.duplicate-popup {
    z-index: 1040 !important;
}

.duplicate-results {
    margin-top: 10px;
}

.duplicate-popup .duplicate-item {
    display: block;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s;
}

.duplicate-popup .duplicate-item + .duplicate-item {
    margin-top: 10px;
}

.duplicate-name {
    color: var(--primary-dark);
    font-weight: 600;
}

.duplicate-address {
    color: var(--primary-blue);
}

.category-container, .popup-data-container {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    margin-top: 15px;
    position: relative;
    cursor: pointer;
    transition: all .3s;
}

.popup-data-container {
    justify-content: space-between;
}

.data-name div:nth-child(1),
.data-property div:nth-child(1),
.data-status div:nth-child(1){
    color: var(--primary-dark);
    margin-bottom: 5px;
}

.category-container:hover, .popup-data-container:hover {
    background: #D9DFFFA3;
}

.items-cat-name {
    color: var(--primary-dark);
}

.category-container.active .items-cat-name {
    color: var(--primary-blue);
}

.items-cat-details {
    width: 100%;
}

.items-cat-details .item-details {
    color: var(--primary-dark);
    position: relative;
    display: flex;
    justify-content: space-between;
}

.items-cat-details .item-details .li-star {
    position: absolute;
    left: -20px;
}

.category-container.active .item-details .item-price {
    color: var(--primary-dark);
}

.category-container.active, .popup-data-container.active {
    border-color: var(--primary-blue);
    background: #D9DFFFA3;
}

.cat-box input[type="checkbox"], .ui-cb input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #d0d5dd;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: 0.2s ease;
}

.ui-cb input[type="checkbox"] {
    border-color: var(--text-secondary);
}

.cat-box input[type="checkbox"]:checked, .ui-cb input[type="checkbox"]:checked {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.cat-box input[type="checkbox"]:checked::after, .ui-cb input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 0;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cb-helper {
    display: flex;
}

.cb-helper label {
    position: relative !important;
    top: 2px !important;
    left: 2px !important;
}

.cat-box {
    position: relative;
}

.cat-box::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: var(--bg-light-grey);
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
}

.cat-box.pulse::after {
    animation: checkboxPulse 0.35s ease-out;
}

@keyframes checkboxPulse {
    0% {
        opacity: 0.6;
        transform: scale(0.6);
    }
    100% {
        opacity: 0;
        transform: scale(1.6);
    }
}

#multi-item-results, #requestSearch, #estimateSearch {
    max-height: 500px;
    border: 1px solid var(--border-color);
    padding: 0 10px;
    border-radius: var(--border-radius);
    margin-top: 10px;
    overflow-y: scroll;
}

#requestSearch, #estimateSearch {
    font-size: 14px;
}

#requestSearch .data-name, #estimateSearch .data-name {
    width: 50%;
}

#requestSearch .data-property, #estimateSearch .data-property {
    width: 100%;
}

#requestSearch .data-status, #estimateSearch .data-status {
    display: none;
    font-size: 12px;
    float: right;
}

#requestSearch .data-name div:nth-child(2), #estimateSearch .data-name div:nth-child(2) {
   color: var(--text-light-grey);;
}

#multi-item-results .category-container {
    padding: 15px 10px 8px 10px;
    gap: 8px;
}

#multi-item-results .category-container .cat-box {
    display: none;
}

#multi-item-results .category-container.active .cat-box {
    display: block;
}

#multi-item-results .form-title {
    font-size: 16px;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 6px;
}

#multi-item-results .category-container:nth-child(1) {
    margin-top: 0;
}

.item-description {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#multi-item-results .category-container.is-favorite {
    padding: 15px 10px 8px 30px;
}

#multi-item-results .category-container.is-favorite.active {
    padding-left: 10px;
}

#multi-item-results .category-container.is-favorite.active .item-details {
    padding-left: 14px;
}

#multi-item-results .category-container.is-favorite.active .item-details .li-star {
    left: -5px;
}

#line-items-edit-section .service-totals {
    margin-top: 30px;
}

.line-items-overlay {
    background: rgba(0, 0, 0, 0.5);
    display: none;
    position: fixed;
    inset: 0;
    backdrop-filter: blur(3px);
    z-index: 99;
}

#line-items-edit-section {
    position: relative;
    z-index: 90;
}

.line-items-edit-bar {
    background: #fff;
    position: sticky;
    bottom: 0;
    padding: 24px 0 5px 0;
    margin-top: 24px;
    border-top: 1px solid var(--form-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}

.send-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    padding-bottom: 0;
}
.send-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.send-tab:hover {
    color: var(--text-primary, #1e293b);
}
.send-tab.active {
    color: var(--primary, #3b82f6);
    border-bottom-color: var(--primary, #3b82f6);
}
.send-tab-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.send-tab-notice {
    font-size: 10px;
    background: var(--border-color, #e2e8f0);
    color: var(--text-secondary, #64748b);
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 2px;
}
.sms-char-counter {
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    text-align: right;
    margin-top: 4px;
}
.sms-segments {
    margin-left: 6px;
    color: #f59e0b;
}

@media (max-width: 600px) {
    #multi-item-results .items-cat-details .item-details {              
        display: block;
    }
    #multi-item-results .items-cat-details .item-price {
        margin-top: 8px;
    }
    #multi-item-results .items-cat-details .item-price-label {
        text-align: left;
        margin-top: 0;
    }
}

/* ===============================================
LAYOUT - MOBILE FIRST
=============================================== */

body {
    display: flex;
    min-height: 100vh;
}

/* Mobile Menu Toggle (hamburger) */
.mobile-menu-toggle {
    position: fixed;
    top: 16px;
    left: 1rem;
    z-index: 999;
    width: 40px;
    height: 40px;
    background: var(--bg-white);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.mobile-menu-toggle span {
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    transition: all 0.3s;
}

/* Hide on desktop */
@media (min-width: 1024px) {
    .mobile-menu-toggle {
        display: none;
    }
}

/* Sidebar Overlay (mobile only) */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 1024px) {
    .sidebar-overlay {
        display: none;
    }
}


/* ===============================================
LAYOUT - HELPERS
=============================================== */

.card {
    background: var(--bg-white);
    padding: 20px;
    border: 1px solid #93A2F7A3;
    border-radius: var(--border-radius);
    margin-top: 1rem;
    position: relative;
}

.card .card-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
}

.card .card-info {
    color: var(--text-light-grey);
    font-size: 15px;
}

.card .card-info-icon {
    display: flex;
}

.card .card-info-icon svg {
    color: var(--primary-blue);
    width: 17px;
    margin-right: 5px;
}

.card-content div + div {
    margin-top: 2px;
}

.card-options {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}

#primary-contacts-wrapper .card-options:hover {
    background: var(--bg-light-gery);
}
.service-card .card-options:hover {
    background: var(--bg-white);
}

.card-options svg {
    width: 28px;
}

.card-menu svg {
    width: 17px;
    margin-right: 5px;
    transform: translateY(3px);
}

.card-menu {
    background: #fff;
    width: auto;
    position: absolute;
    top: 40px;
    right: 20px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, .1), 
                0px 4px 12px 0px rgba(0, 0, 0, .4);
    padding: 8px;
    border-radius: var(--border-radius);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.15s ease,
                transform 0.15s ease;
}

.card-menu.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 9;
}

.card-menu ul li {
    border-radius: var(--border-radius);
    padding: 5px 10px 3px 10px;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    transition: all .3s;
}

.card-menu ul li:hover {
    background: #e8e8e8;
}

/*
.card-menu .card-edit {
    color: var(--text-dark);
}
*/

.card-menu .card-delete {
    color: var(--text-danger);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: var(--border-radius);
}

.empty-state svg {
    color: var(--text-muted);
    width: 100px;
}

.table-empty .data-empty {
    color: var(--text-primary);
    font-size: 15px;
    font-style: normal;
    border: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: var(--border-radius);
}

.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    padding: 20px 0;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f3f7;
    border-radius: 8px;
    text-decoration: none;
    color: #1f2937;
    font-size: 20px;
    transition: all 0.2s ease;
}

.pagination-btn svg {
    width: 20px;
}

.pagination-btn:hover {
    background: #e2e8f0;
}

.pagination-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}


/* ===============================================
LAYOUT - LEFT SIDEBAR
=============================================== */

.col-2-wrapper-left-main {
    display: grid;
    grid-template-columns: 350px minmax(0,1fr);
    gap: 24px;
    align-items: start;
}

.col-2-wrapper-right-main {
    display: grid;
    grid-template-columns: minmax(0,1fr) 350px;
    gap: 24px;
    align-items: start;
}

.col-2-wrapper-left {
    display: grid;
    grid-template-columns: 350px minmax(0,1fr);
    gap: 24px;
}

.col-2-left-col,
.col-2-right-col,
.col-2-left-col-main,
.col-2-right-col-main,
.data-container,
.wf-single-container {
    background: var(--bg-white);
    padding: 20px;
    box-shadow: var(--card-shadow);
    border-radius: var(--border-radius);
}

.col-2-right-col-main {
    grid-column: 2;
    min-width: 0;
}

@media (max-width: 1650px) {
    .col-2-wrapper-left-main {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .col-2-left-col-main, .col-2-right-col-main {
        width: 100%;
        position: initial !important;
        top: 0 !important;
    }
}

.col-2-workflow {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    transition: opacity 0.2s ease;
}

@media (max-width: 1200px) {
    .col-2-workflow {
        flex-direction: column;
    }
    .col-2-left-wf, .col-2-right-wf {
        width: 100% !important;
    }
    .distance-strip-toggle {
        width: auto !important;
    }
}

.col-2-left-wf,
.col-2-right-wf {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.col-2-left-wf {
  width: 350px;
  flex-shrink: 0;
}

.col-2-right-wf {
  flex: 1;
  min-width: 0;
}

.col-bottom {
    margin-top: 30px;
}

.sb-new-customer .create-new {
    font-size: 13px;
    position: absolute;
    top: 24px;
    right: 20px;
}

.c-name {
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 600;
}

.data-details {
    margin-top: 10px;
}

.data-block + .data-block {
    margin-top: 20px;
}

.data-details a {
    color: var(--primary-blue);
}

.data-details-light {
    color: var(--text-light-grey);
    font-size: 14px;
}

.data-details svg {
    color: var(--primary-blue);
    width: 20px;
    transform: translateY(-1px);
}

.sidebar-title {
    color: var(--primary-dark);
    font-size: 20px;
    font-weight: 500;
    border-bottom: 1px solid var(--bg-light-gery);
    padding-bottom: 12px;
    margin-bottom: 15px;
}

.data-grid-2 {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.data-grid-2 .data-grid-2-col {
    flex: 1;
}

@media (min-width: 1025px) {
    .col-2-left-col {
        position: sticky;
        top: 75px;
        align-self: start;
    }
    .col-2-left-col-main {
        position: sticky;
        top: 85px;
        align-self: start;
        grid-row: 1 / span 10;
    }
}

@media (max-width: 1024px) {
    .col-2-wrapper-left, .col-2-workflow {
        grid-template-columns: 100%;
    }
}

/* ===============================================
FORMS
=============================================== */

.popup-form-error {
    color: var(--text-danger);
    position: absolute;
    left: 0;
    bottom: -22px;
    font-size: 13px;
    padding-left: 20px;
    text-wrap: nowrap;
}

.popup-form-error::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 14px;
    height: 14px;
    background-image: url("/assets/images/alert.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.form-global-error svg {
    color: var(--text-danger);
    width: 30px;
}

.form-global-error {
    color: var(--text-danger-dark);
    background: #faecea;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
    padding: 11px 15px 9px 15px;
    border-radius: var(--border-radius);
    display: none;
}

.form-global-error.active {
    display: flex;
}

.app-form .form-control, .form-label-helper {
    position: relative;
    margin-bottom: 1rem;
}

.ryno-date-fields .form-control {
    width: 100%;
    margin-bottom: 8px;
}

.form-description {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 400;
    max-width: 600px;
    margin-bottom: 1rem;
}

.form-title {
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: .75rem;
}

.data-block .form-title, .data-container .form-title {
    display: flex;
    align-items: center;
}

.form-title-md {
    font-size: 15px;
    font-weight: 500;
}

.form-title-sub-text {
    margin-bottom: 0;
}

.col-2-left-wf .form-title {
    justify-content: space-between;
}

.form-field-info {
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: .5rem;
}

.form-field-info-sm {
    font-size: 14px;
    margin-bottom: 4px;
}

.btn-container-right {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.btn-container-t-m {
    margin-top: 1rem;
}

.btn-container-b-m {
    margin-bottom: 1rem;
}

input[type="time"] {
    width: 100%;
    box-sizing: border-box;
}

.app-form input:not([type="checkbox"]):not([type="radio"]), .app-form textarea {
    width: 100%;
    padding: 22px 12px 1px 20px;
    font-size: 1rem;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
    background: transparent;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;   
}

.app-form input.form-control {
    margin-bottom: 0 !important;
}

.app-form input:not([type="checkbox"]):not([type="radio"]):hover,
.app-form textarea:hover{
    border-color: var(--text-dark);
    box-shadow: inset 0 0 0 .5px var(--text-dark);
}

.app-form input:not([type="checkbox"]):not([type="radio"]):focus,
.app-form textarea:focus {
    border-color: var(--primary-blue);
    box-shadow: inset 0 0 0 .5px var(--primary-blue);
}

.app-form input:not([type="checkbox"]):not([type="radio"]):focus + label,
.app-form textarea:focus + label {
    color: var(--primary-blue);
}

/* Move label up */
.app-form input:focus + label,
.app-form input:not(:placeholder-shown) + label,
.app-form textarea:focus + label,
.app-form textarea:not(:placeholder-shown) + label {
    top: 8px;
    left: 16px;
    transform: none;
    font-size: .75rem;
}

.app-form .form-control.textarea-lg textarea {
    min-height: 111px;
}
.app-form .form-control.textarea-lg label {
    top: 30px;
}

.app-form .form-control.textarea-lg textarea:focus + label {
    top: 8px;
    font-size: .75rem;
}

.app-form .form-control.textarea-lg textarea:not(:placeholder-shown) + label {
    top: 8px;
}

.form-label-helper label {
    color: var(--primary-dark);
    font-size: .75rem;
    position: absolute;
    top: 8px;
    left: 20px;
}

.form-label-helper input:focus + label,
.form-label-helper input:not(:placeholder-shown) + label {
     left: 20px;
}

.label-active label {
    top: 17px !important;
    left: 16px !important;
    font-size: .75rem !important;
}

.app-form .label-active input:focus + label {
    top: 8px !important;
    left: 16px !important;
}

.form-control select {
    width: 100%;
    padding: 11px 10px 11px 15px;
    font-size: 1rem;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
    background: transparent;
    color: var(--text-light-grey);
    appearance: none;
    outline: none;
}

.form-control select:valid {
    color: var(--text-dark);
}

.app-form .form-control label {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .95rem;
    color: var(--text-primary);
    pointer-events: none;
    transition: all .2s ease;
    padding: 0 4px;
}

.form-control-cb .cat-box {
    display: flex;
    gap: 10px
}

.form-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-col-3 .form-col-3-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

.form-border-col {
    border: 1px solid #d9dfff;
    padding: 20px 20px 0 20px;
    border-radius: 10px;
}

.form-section-highlight {
    background: #D9DFFFA3;
    padding: 20px;
    border-radius: var(--border-radius);
    margin: 1.4rem 0 1rem 0;
}

.form-muted input {
    background: var(--border-color) !important;
    border: none !important;
    font-weight: 500 !important;
    cursor: not-allowed;
}

.form-muted label {
    color: var(--text-dark);
}

.required {
    color: var(--required);
}

.image-preview {
    display: flex;
}

.existing-image-container {
    align-items: center;
    gap: 20px;
}

.existing-image-preview {
    width: 100%;
    height: 100px;
    border-radius: var(--border-radius);
    border: 1px solid var(--form-border);
    overflow: hidden;
}

.existing-image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--border-radius);
}

/* Checkboxes */

.segmented-control {
  position: relative;
  display: flex;
  width: 280px;
  height: 42px;
  background: #D9DFFFA3;
  margin-bottom: 1.5rem;
  border-radius: 50px;
  padding: 4px;
  overflow: hidden;
}

/* Hide actual radios */
.app-form .segmented-control input {
  display: none;
}

/* Labels */
.app-form .segmented-control label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  margin-top: 3px;
  font-weight: 500;
  cursor: pointer;
  z-index: 2;
  border-radius: 50px;
  transition: color 0.25s ease;
  color: #394A51;
}

/* Hover */
.app-form .segmented-control label:hover {
  color: var(--primary-blue);
}

/* Active text color */
.app-form .segmented-control input:checked + label {
  color: var(--text-white);
}

.label-reset label {
    top: 8px !important;
    left: 16px !important;
    transform: none !important;
    font-size: .75rem !important;
    transition: unset !important;
}

/* Slider */
.segmented-control .slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: var(--primary-blue);
  border-radius: 50px;
  transition: transform 0.35s cubic-bezier(.68,-0.55,.27,1.55);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  z-index: 1;
}

/* Move slider second option is selected */
#commercial:checked ~ .slider, #product:checked ~ .slider, #job_type_multi:checked ~ .slider,
#repeater-product:checked ~ .slider,
#addr_personal:checked ~ .slider {
  transform: translateX(100%);
}

.company-name {
    display: none;
    margin-top: 2.5rem;
}

.form-container-hide {
    display: none !important;
}

.currency-field label {
    color: var(--text-primary);
}

.gross-container {
    text-align: right;
}

.form-settings-details {
    font-size: 13px;
    font-weight: 400;
}

.form-assign-container {
    display: flex;
    gap: 40px;
}

.form-assign-container .clear-btn {
    margin-left: 15px;
}

/* ============================================
   SINGLE IMAGE
   ============================================ */

.image-dropzone {
    border: 2px dashed #d0d5dd;
    padding: 12px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s ease;
}

.image-dropzone.dragover {
    border-color: var(--primary-blue);
    background: rgba(0,0,0,0.02);
}

.image-dropzone svg {
    color: var(--primary-blue);
    width: 30px;
}

.image-upload-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

.image-upload-text span {
    color: var(--primary-blue);
}

.image-preview img {
    max-width: 107px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.image-remove-btn {
    color: var(--text-danger);
    background: none;
    margin-left: 10px;
    border: none;
    cursor: pointer;
}

/* ============================================
   Multi-Image & File Uploader
   ============================================ */

.multi-image-uploader {
    width: 100%;
}

/* Image Grid */
.multi-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    gap: 10px;
    margin-bottom: 12px;
}

.multi-image-grid:empty {
    display: none;
    margin-bottom: 0;
}

/* Individual Thumbnail */
.multi-image-thumb {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
}

.multi-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* File Thumbnail (non-image) */
.multi-image-thumb.thumb-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    text-align: center;
}

.multi-image-thumb.thumb-file .thumb-file-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.multi-image-thumb.thumb-file .thumb-file-icon svg {
    width: 32px;
    height: 32px;
    stroke: #64748B;
}

.thumb-file-ext {
    font-size: 0.625rem;
    font-weight: 700;
    color: #3B82F6;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.thumb-file-name {
    font-size: 0.625rem;
    color: #64748B;
    line-height: 1.2;
    margin-top: 4px;
    word-break: break-all;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Loading Spinner Overlay */
.multi-image-thumb .thumb-loading {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.multi-image-thumb .thumb-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #E2E8F0;
    border-top-color: #3B82F6;
    border-radius: 50%;
    animation: multi-upload-spin 0.6s linear infinite;
}

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

/* Error State */
.multi-image-thumb.thumb-error {
    border-color: #EF4444;
}

.multi-image-thumb.thumb-error::after {
    content: '!';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    background: #EF4444;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

/* Remove Button */
.multi-image-thumb .thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
    padding: 0;
}

.multi-image-thumb:hover .thumb-remove {
    opacity: 1;
}

.multi-image-thumb .thumb-remove svg {
    width: 15px;
    height: 15px;
    stroke: #fff;
    flex-shrink: 0;
}

.multi-image-thumb .thumb-remove:hover {
    background: rgba(239, 68, 68, 0.85);
}

/* Dropzone */
.multi-image-dropzone {
    border: 2px dashed #CBD5E1;
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    color: #64748B;
    font-size: 0.875rem;
    line-height: 1.4;
}

.multi-image-dropzone:hover,
.image-dropzone:hover {
    border-color: #94A3B8;
    background: #F8FAFC;
}

.multi-image-dropzone.dragover {
    border-color: #3B82F6;
    background: #EFF6FF;
}

.multi-image-dropzone.is-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

.multi-image-dropzone svg {
    stroke: var(--primary-blue);
    width: 28px;
    height: 28px;
    margin: 0 auto 6px;
    display: block;
}

.multi-image-dropzone span {
    color: #3B82F6;
    font-weight: 500;
    cursor: pointer;
}

.multi-image-meta {
    margin-top: 6px;
    font-size: 0.75rem;
    color: #94A3B8;
}

.media-item-uploading {
    opacity: 0.6;
}

.media-item-error {
    opacity: 0.4;
}

.media-item-action {
    flex-shrink: 0;
    padding: 4px;
    color: var(--text-tertiary);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: var(--border-radius-sm);
    transition: color 0.15s ease;
}

.media-item-action:hover {
    color: var(--text-primary);
}

.media-delete-btn:hover {
    color: var(--danger);
}

/* ===============================================
   SELECT2 - MATCH APP INPUT STYLE
=============================================== */

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

.select2-container .select2-selection--single {
    height: 48px; /* Match your input height */
    padding: 11px 40px 11px 20px;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
    background: transparent;
    font-size: 1rem;
    display: flex;
    align-items: center;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* Text inside field */
.select2-container .select2-selection__rendered {
    color: var(--text-light-grey);
    padding: 0;
    line-height: normal;
}

/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text-light-grey);
}

/* Dropdown arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 23px;
    left: -7px;
    border-width: 8px 8px 0 8px;
}

/* Hover */
.select2-container .select2-selection--single:hover {
    border-color: var(--text-dark);
    box-shadow: inset 0 0 0 .5px var(--text-dark);
}

/* Focus (when open) */
.select2-container--open .select2-selection--single {
    border-color: var(--primary-blue);
    box-shadow: inset 0 0 0 .5px var(--primary-blue);
}

/* Dropdown panel */
.select2-dropdown {
    border-radius: var(--border-radius);
    border: 1px solid var(--form-border);
}

/* Option hover */
.select2-results__option--highlighted {
    background: var(--bg-primary) !important;
    color: var(--text-dark) !important;
}

/* ===============================================
   FLATPICR - MATCH APP INPUT STYLE
=============================================== */

/* Calendar container */
.flatpickr-calendar {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    border: 1px solid var(--form-border);
    font-family: inherit;
}

/* Header */
.flatpickr-months {
    background: #fff;
}

/* Selected day */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

.flatpickr-day.today {
    border: none !important;
}

.flatpickr-day.today:hover {
    background: var(--primary-blue-hover);
    border-color: var(--primary-blue-hover);;
}

/* Hover */
.flatpickr-day:hover {
    background: rgba(37, 99, 235, .08);
}

/* Time inputs */
.flatpickr-time input {
    font-weight: 500;
}

.flatpickr-time input.flatpickr-hour {
    font-weight: 400;
}

.flatpickr-time .flatpickr-am-pm,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
    color: #fff;
    background: var(--primary-blue);
}

.pricing-toggle {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin: 1.8rem 0 1.2rem 0;
}

.radio-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
    position: relative;
}

/* Hide native radio */
.radio-btn input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Outer circle */
.radio-ui {
    width: 18px;
    height: 18px;
    border: 2px solid var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
    position: relative;
    top: -2px;
}

/* Inner filled circle */
.radio-ui::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-blue);
    transform: scale(0);
    transition: 0.2s ease;
}

/* Checked state */
.radio-btn input:checked + .radio-ui::after {
    transform: scale(1);
}

/* Optional subtle hover */
.radio-btn:hover .radio-ui {
    box-shadow: 0 0 0 4px rgba(0, 115, 255, 0.08);
}

.ryno-date-fields {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 2rem;
}

.ryno-date-fields .date-col {
    width: 100%;
}

.create-estimate .ryno-date-fields {
    margin-bottom: 0;
}

.date-col-container {
    display: flex;
    align-items: flex-end;
}

.cb-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cb-container  label {
    color: var(--primary-dark);
    font-size: 15px !important;
    position: relative;
    left: 0px !important;
    top: 3px !important;
}

.app-form .date-col-left input {
    border-radius: 10px 0 0 10px !important;
}
.app-form .date-col-right input {
    border-radius: 0 10px 10px 0px !important;
    border-left: none !important;
}

@media (max-width: 620px) {
    .ryno-date-fields {
        display: block;
    }
    .date-col-container {
        align-items: flex-start !important;
        flex-direction: row;
        gap: 10px;
    }
    .ryno-date-fields .date-col-container .form-control {
        width: 100%;
    }
    .app-form .date-col-left input, .app-form .date-col-right input {
        text-align: left;
        border-radius: var(--border-radius) !important;
    }
    .app-form .date-col-right input {
        border-left: 1px solid var(--form-border) !important;
    }
    input[type="date"],
    input[type="time"] {
        color: var(--text-primary);
        width: 100%;
        min-width: 0;
        min-height: 51px;
        height: 51px;
        line-height: 51px;
        box-sizing: border-box;
        text-align: left !important;
        display: flex;
        justify-content: flex-start !important;
        appearance: none;
        -webkit-appearance: none;
    }
    .app-form input[type="date"] {
        padding: 20px 50px 0px 10px !important;
    }
    .app-form input[type="time"] {
        padding: 20px 90px 0px 10px !important;
    }
    .ryno-date-fields div.date-col:nth-child(2) {
        margin-top: 20px;
    }
}

/* Style Google Place Autocomplete Element */
gmp-place-autocomplete {
    width: 100%;
    height: 50px; /* Match your input height */
    font-family: inherit;
    font-size: inherit;
}

/* Override Google's default styles if needed */
gmp-place-autocomplete::part(input) {
    font-family: inherit;
    font-size: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

/* Ensure Google autocomplete dropdown appears on top */
.pac-container {
    z-index: 9999 !important;
    position: absolute !important;
}

/* If using the new element */
gmp-place-autocomplete {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
}

.form-control {
    overflow: visible !important;
}

.field-error {
    color: var(--text-danger);
    position: absolute;
    left: 0;
    bottom: -25px;
    font-size: 13px;
    padding-left: 20px;
    text-wrap: nowrap;
    display: none;
}

.service-totals-container .field-error {
    position: relative;
}

.field-error::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 14px;
    height: 14px;
    background-image: url("/assets/images/alert.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.label-error {
    color: var(--text-danger) !important;
}

.field-error.active {
    display: block !important;
}

.form-control.error-helper {
    margin-bottom: 2rem;
}

.input-error {
  border-color: var(--text-danger) !important;
  box-shadow: inset 0 0 0 .5px var(--text-danger) !important;
}

.copy-link-wrapper {
    position: relative;
}

.copy-link-input {
    padding: 10px 50px 7px 20px !important;
}

#copy-link-btn {
    position: absolute;
    top: 10px;
    right: 10px;
}

#copy-link-btn svg {
    width: 25px;
}

/* ===============================================
COMMAND BAR
=============================================== */

.command-bar-page {
    padding-bottom: 85px !important;
}

.command-bar {
    width: 100%;
    background: var(--bg-white);
    position: fixed;
    bottom: 0;
    left: 0;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    border-top: 1px solid var(--border-color);
    z-index: 9;
    padding-bottom: env(safe-area-inset-bottom);
}

.command-bar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 315px;
    padding: 15px 30px 15px 0;
}

.command-bar-right {
    position: relative;
}

/* Hide command bar by default ONLY on work order pages */
.sticky-command-bar .command-bar {
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1),
                opacity 0.25s ease;
}

/* Visible state */
.sticky-command-bar .command-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 1023px) {
    .command-bar-container {
        margin-left: 0;
        padding: 15px;
    }
}

/* ===============================================
SIDEBAR
=============================================== */

.sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-dark);
    padding: var(--spacing-lg);
    overflow-y: auto;
    z-index: 1000;
    transition: left 0.3s;
}

/* Mobile: slide in when active */
.sidebar.active {
    left: 0;
}

/* Desktop: always visible */
@media (min-width: 1024px) {
    .sidebar {
        left: 10px;
        top: 20px;
        border-radius: var(--border-radius);
    }
}

.sidebar-header {
    margin-bottom: var(--spacing-sm);
}

.logo {
    width: 100px;
    height: auto;
}

/* Create Button */
.btn-create {
    width: 100%;
    padding: 8px 8px 7px 7px;
    background: var(--primary-blue);
    color: var(--text-white);
    border-radius: 100px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    transition: background 0.2s;
    max-width: 132px;
    font-size: 16px;
    letter-spacing: .5px;
}

.btn-create svg {
    width: 30px;
    background: var(--primary-dark);
    border-radius: 100%;
}

.btn-create:hover {
    background: var(--primary-blue-hover);
}

/* Sidebar Navigation */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.nav-section-title {
    background: #181D38;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--nav-text);
    margin: 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 10px 6px 15px;
    border-radius: 50px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 8px 10px;
    color: var(--nav-text);
    transition: all 0.2s;
    position: relative;
}

.nav-item:hover, .nav-item:hover svg {
    color: var(--primary-blue);
}

.nav-item.active, .nav-item.active svg {
    color: var(--primary-blue);
}

.nav-item svg {
    color: var(--nav-text);
    width: 20px;
    position: relative;
    bottom: 2px;
    transition: all 0.2s;
}

/* ===============================================
   MAIN CONTENT AREA
   =============================================== */

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Mobile: full width */
    width: 100%;
    min-height: 100vh;
}

/* Desktop: offset by sidebar */
@media (min-width: 1024px) {
    .main-content {
        width: calc(100% - var(--sidebar-width));
    }
}


/* ===============================================
   TOP HEADER
   =============================================== */

.top-header {
    position: sticky;
    top: 0;
    z-index: 99;
    background: #0B1F33;
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-md) var(--spacing-lg);
    padding-top: calc(var(--spacing-md) + env(safe-area-inset-top));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    min-height: var(--topbar-height);
}

.top-header-left {
    margin-left: 295px;
}

.top-header-right {
    display: flex;
    align-items: center;
    padding-right: 17px;
}

@media (max-width: 1023px) {
    .top-header-left {
        display: none;
    }
    .top-header-right {
        margin-left: auto;
        padding-right: 0;
    }
}

.top-header .company-name-wrapper {
    color: var(--nav-text)
    ;   
}

/* Mobile: add left padding for hamburger */
@media (max-width: 767px) {
    .top-header {
        padding-left: 4rem;
    }
}

.top-header .search-wrapper {
    flex: 1;
    max-width: 400px;
}

.top-header .search-input {
    width: 100%;
    padding: 10px 0 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    max-height: 40px;
    font-size: 15px;
}

.top-header .search-input:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: -2px;
}

.header-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.icon-btn {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.icon-btn svg {
    color: var(--text-white);
}

.header-actions .user-badge {
    background: var(--bg-white);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px;
    font-weight: 500;
    font-size: 1rem;
    border-radius: 100%;
}

/* ===============================================
   ACCOUNT BADGE & DROPDOWN
   =============================================== */

/* Account Badge (initials) */
.account-badge {
    width: 35px;
    height: 35px;
    background: var(--bg-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 01rem;
    letter-spacing: 0.5px;
    padding: 12px 10px 8px 10px;
}

.header-user-account {
    padding: 0;
}

.header-user-account:hover .account-badge {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* Account Dropdown Card */
.account-card {
    position: absolute;
    top: calc(100% + 8px);
    right: 20px;
    width: 280px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

.account-card.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Arrow pointer (optional - makes it look polished) */
.account-card::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 24px;
    width: 12px;
    height: 12px;
    background: var(--bg-white);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    transform: rotate(45deg);
}

/* User Info Section */
.account-card-user {
    padding: 20px;
}

.account-user-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.account-user-email {
    font-size: 0.875rem;
    color: var(--text-secondary);
    word-break: break-all;
}

/* Divider */
.account-card-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0;
}

/* Links Section */
.account-card-links {
    padding: 8px;
    display: flex;
    flex-direction: column;
}

.account-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s;
}

.account-link:hover {
    background: var(--bg-primary);
    color: var(--primary-blue);
}

.log-out-link:hover {
    
}

.account-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ===============================================
   PAGE CONTENT
   =============================================== */

.page-content {
    width: auto;
    background: var(--bg-body);
    background-attachment: fixed;
    flex: 1;
    padding: 20px 30px;
    margin: 0 0 0 285px;
    position: relative;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

/* Desktop: offset by sidebar */
@media (max-width: 1023px) {
    .page-content {
        margin-left: 0;
        padding: 20px 12px;
    }
}

.work-order .pagination-top {
    padding-top: 0;
    display: none;
}

/* Page Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.page-header, .page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-dark);
}

.header-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-btns .btn {
    font-size: 16px;
}

.btn-add-new, .btn-more-options {
    padding: .75rem 1.5rem .65rem 1.5rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: background 0.2s;
}

.btn-add-new {
    color: var(--text-white);
    background: var(--primary-blue);
}

.btn-more-options {
    color: var(--primary-blue);
    background: var(--bg-white);
    border: 1px solid var(--primary-blue);
}

.btn-more-options svg {
    width: 25px;
}

.btn-add-new span {
    font-size: 1.5rem;
    line-height: 0;
    transform: translateY(2px);
}

.btn-add-new:hover, .btn-primary:hover {
    background: var(--primary-blue-hover);
}

/* Button Loading State */
.btn-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}
.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.5s linear infinite;
}
.btn-loading.secondary-btn::after {
    border-color: rgba(0, 0, 0, 0.15);
    border-top-color: var(--text-primary);
}

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

/* ===============================================
   STATS GRID
   =============================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.account-grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

/* 2x2 on mobile/tablet */
@media (min-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 4 columns on desktop */
@media (min-width: 1024px) {
    .stats-grid, .account-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1460px) {
    .account-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .account-grid-4 {
        grid-template-columns: 1fr;
    }
}


.stat-card {
    background: var(--bg-white);
    padding: 10px 15px;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

.stat-label {
    font-size: 1.2rem;
    color: var(--text-dark);
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.stat-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.stat-value.stat-primary, .team-admin {
    color: var(--primary-blue);
}

.stat-value.stat-warning,
.stat-change.stat-warning {
    color: var(--text-warning);
}

.stat-value.stat-danger {
    color: var(--text-danger);
}

.stat-meta {
    font-size: 0.875rem;
    color: var(--text-primary);
}
.stat-meta-light {
    color: #94A3B8;
}

.stat-change {
    font-weight: 400;
}

.stat-percent {
    font-weight: 600;
}

.stat-percent.positive, .stat-value.stat-positive {
    color: var(--status-active);
}


/* ===============================================
   FILTERS SECTION
   =============================================== */

.filters-section {
    background: var(--bg-white);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    margin-bottom: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Desktop Filter Buttons (hidden on mobile) */
.filter-buttons {
    display: none;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

@media (min-width: 1024px) {
    .filter-buttons {
        display: flex;
    }
}

.filter-btn {
    padding: 5px 10px;
    border-radius: var(--border-radius);
    background: #D9DFFFA3;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: all 0.2s;
}

.filter-manage-btn {
    color: var(--primary-blue);
    font-weight: 500;
    font-size: 15px;
    position: relative;
    margin-left: auto;
}

.filter-manage-btn .card-menu {
    width: max-content;
    text-align: right;
    top: 38px;
    right: 0;
}
.filter-manage-btn .card-menu.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 99;
}

.filter-btn:hover {
    background: var(--table-hover)
}

.filter-btn.active {
    background: var(--primary-blue);
    color: var(--text-white);
}

.filter-btn .badge {
    color: var(--text-white);
    background: var(--primary-blue);
    padding: 4px 8px 1px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.filter-btn.active .badge {
    background: rgba(255, 255, 255, 0.2);
}

a.filter-btn:last-child {
    color: var(--text-dark);
    background: #fff;
    font-size: 13px;
    padding: 0px 5px;
    margin-left: auto;
}

a.filter-btn:last-child .badge {
    background: var(--text-danger-dark);
}

/* Mobile Filter Dropdown (shown on mobile only) */
.filter-dropdown {
    position: relative;
}

@media (min-width: 1024px) {
    .filter-dropdown {
        display: none;
    }
}

.filter-dropdown-toggle {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
}

.dropdown-arrow {
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.filter-dropdown-toggle.active .dropdown-arrow {
    transform: rotate(180deg);
}

.filter-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-lg);
    margin-top: var(--spacing-xs);
    display: none;
    flex-direction: column;
    z-index: 10;
}

.filter-dropdown-menu.active {
    display: flex;
}

.filter-dropdown-item {
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.filter-dropdown-item:hover {
    background: var(--bg-primary);
}

.filter-dropdown-item.active {
    background: var(--primary-blue);
    color: var(--text-white);
}

/* =====================================================
   Tooltip styles
===================================================== */

.has-tooltip {
    position: relative;
    cursor: default;
}

.has-tooltip .tooltip-box {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 999;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.has-tooltip .tooltip-box::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1a2e;
}

.has-tooltip:hover .tooltip-box {
    display: block;
}

/* ===============================================
   DATE FILTER
   =============================================== */


#dateFilterToggle {
    color: #fff;
    background: #355473;
}

#dateFilterToggle:hover {
    background: #253e57;
}

/* Wrapper */
.date-filter-wrapper {
    position: relative;
}

/* Toggle button */
.date-filter-toggle {
    gap: 6px;
    cursor: pointer;
}
.date-filter-toggle svg {
    flex-shrink: 0;
}

/* Clear X button */
.date-filter-clear {
    font-size: 1rem;
    line-height: 1;
    margin-left: 2px;
    opacity: 0.7;
    cursor: pointer;
}
.date-filter-clear:hover {
    opacity: 1;
}
.filter-btn.active .date-filter-clear {
    color: var(--text-white);
}

/* Divider between date filter and status filters */
.filter-divider {
    width: 1px;
    height: 28px;
    background: var(--form-border);
    align-self: center;
    margin: 0 4px;
}

/* Dropdown menu */
.date-filter-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 280px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-lg);
    display: none;
    flex-direction: column;
    z-index: 20;
    padding: var(--spacing-xs) 0;
}
.date-filter-menu.active {
    display: flex;
}

.date-filter-item:hover {
    background: var(--bg-primary);
}
.date-filter-item.active {
    background: var(--primary-blue);
    color: var(--text-white);
}
.date-filter-clear-item {
    color: var(--text-danger, #dc3545);
}
.date-filter-clear-item:hover {
    background: #fef2f2;
}

.date-filter-select-wrapper {
    padding: 8px 12px;
}
.date-filter-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    background: var(--bg-primary);
    cursor: pointer;
    appearance: auto;
}
.date-filter-select:focus {
    outline: none;
    border-color: var(--primary-blue);
}
.date-filter-clear-btn {
    width: calc(100% - 24px);
    margin: 4px 12px 8px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: none;
    color: var(--text-danger, #dc3545);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: center;
}
.date-filter-clear-btn:hover {
    background: #fef2f2;
}
.date-filter-field-toggle {
    display: flex;
    gap: 12px;
    padding: 8px 12px 4px;
}
.date-field-option {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-primary);
    cursor: pointer;
}
.date-field-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
}
.date-filter-actions {
    padding: 4px 12px 8px;
}
.date-filter-apply {
    width: 100%;
    padding: 8px;
    background: var(--primary-blue);
    color: var(--text-white);
    border: none;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}
.date-filter-apply:hover {
    opacity: 0.9;
}

/* Divider inside menu */
.date-filter-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--spacing-xs) 0;
}

/* Custom range picker area */
.date-filter-custom {
    padding: 8px 16px;
    position: relative;
}
.date-filter-custom .flatpickr-calendar {
    position: absolute !important;
    top: auto !important;
    left: 0 !important;
}
.date-filter-custom input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    cursor: pointer;
    background: var(--bg-primary);
}
.date-filter-custom input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-blue);
}

/* Mobile date filter */
.date-filter-mobile {
    margin-bottom: var(--spacing-sm);
}
.date-filter-toggle-mobile.active-date {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}
.date-filter-menu-mobile {
    top: calc(100% + 4px);
    left: 0;
    right: 0;
}
.date-range-fields {
    display: flex;
    gap: 8px;
}
.date-range-field {
    flex: 1;
}
.date-range-field label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.date-range-field input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    cursor: pointer;
    background: var(--bg-primary);
}
.date-range-field input:focus {
    outline: none;
    border-color: var(--primary-blue);
}
#dateFilterLabel {
    transform: translateY(2px);
}

/* Status badges group (for side-by-side badges) */
.status-badges-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: column;
}

/* Client Search */
.page-search {
    padding: 5px 0;
}
.page-search input {
    width: 100%;
    padding: 12px 15px 10px 15px;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
}

.page-search input:hover {
    border-color: var(--primary-dark);
    box-shadow: inset 0 0 0 .5px var(--primary-dark);
}

.page-search input:focus, .page-search input:focus-visible {
    border-color: var(--primary-dark);
    box-shadow: inset 0 0 0 .5px var(--primary-dark);
}


/* ===============================================
   TABLE / LIST VIEW
   =============================================== */

.table-container {
    background: var(--bg-white);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

/* Table Header (hidden on mobile) */
.table-header {
    display: none;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.table-header .table-col {
    color: var(--text-primary);
    font-size: 1rem;
}

@media (min-width: 1024px) {
    .table-header {
        display: grid;
        grid-template-columns: 2fr 2fr 2fr 2fr 2fr 2fr 0.5fr;
        gap: var(--spacing-md);
        align-items: center;
    }
}

/* Table Row */
.table-row {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}

.table-row .table-cell {
    font-size: 15px;
}

.table-row:hover {
    background: var(--table-hover);
    cursor: pointer;
}

.table-row:last-child {
    border-bottom: none;
}

/* Mobile: Stack cells vertically */
.table-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Desktop: Grid layout */
@media (min-width: 1024px) {
    .table-row {
        display: grid;
        grid-template-columns: 2fr 2fr 2fr 2fr 2fr 2fr 0fr;
        gap: var(--spacing-md);
        align-items: center;
        padding: var(--spacing-md) var(--spacing-lg);
    }
}

/* Table Cell */
.table-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (min-width: 1024px) {
    .table-cell {
        flex-direction: row;
        align-items: center;
    }
}

/* Cell Label (mobile only) */
.cell-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (min-width: 1024px) {
    .cell-label {
        display: none;
    }
}

/* Customer Name with Indicators */
.customer-name {
    display: flex;
    flex-direction: column;
    font-weight: 500;
    position: relative;
}

.customer-indicators {
    display: flex;
    gap: 4px;
    position: absolute;
    top: 7px;
    left: -12px;
}

.indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.indicator-danger {
    background: var(--text-danger);
}

.indicator-warning {
    background: var(--text-warning);
}

.customer-name .data-number {
    color: var(--text-light-grey);
    font-size: 14px;
    font-weight: 400;
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    padding: 4px 12px 2px 20px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    width: fit-content;
    position: relative;
}

.status-badge.status-active,
.status-badge.status-completed,
.status-badge.status-sent,
.status-badge.status-deposit-paid,
.status-badge.status-approved,
.status-badge.status-signature {
    background: rgba(16, 185, 129, 0.1);
    color: var(--status-active);
}

.status-badge.status-lead,
.status-badge.status-open,
.status-badge.status-scheduled,
.status-badge.status-awaiting,
.status-badge.status-pending,
.status-badge.status-reminder,
.status-badge.status-in-progress,
.status-badge.status-in_progress {
    color: var(--status-lead);
    background: rgba(59, 130, 246, 0.1);
}

.status-badge.status-draft {
    color: var(--status-draft);
    background: #DBDBDB;
}

.status-badge.status-overdue,
.status-badge.status-declined {
    color: #EF4444;
    background: #DC262624;
}

.status-badge.status-deleted {
    color: var(--text-danger-dark);
    background: #FF2B1447;
}

.status-badge.status-converted {
    color: #047857;
    background: #0478571c;
}

.status-badge.status-archived {
    color: #6B7280;
    background: #6B728029;
}

.status-badge.status-viewed {
    color: #7168CA;
    background: #DED4FF;
}

.status-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    background: currentColor;
    border-radius: 100px;
    position: absolute;
    top: 12px;
    left: 8px;
    transform: translateY(-50%);
}

.status-badge {
    color: #0ea5e9;
    background: #0ea5e91a;
}

.text-completed {
    color: #158661;
}

.trash-notice, .edit-warning-banner, .change-request-banner, .conflict-banner-inner,
.popup-notice-warning {
    background: #fff1c6;
    border: 1px solid #f4d881;
    color: #92400e;
    padding: 10px 16px;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    margin-bottom: var(--spacing-sm);
}

.change-request-banner {
    position: relative;
}

.change-request-banner .change-request-dismiss {
    position: absolute;
    top: 10px;
    right: 16px;
    text-decoration: underline;
}

.change-request-content p {
    margin-top: 6px;
}

.change-request-content svg {
    width: 24px;
}

/* ===============================================
   ACTIONS MENU (DROPDOWN)
   =============================================== */

.actions-menu {
    position: relative;
}

.actions-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    transition: background 0.2s;
}

.actions-toggle svg {
    color: var(--text-primary);
    width: 28px;
}

.actions-toggle:hover {
    background: var(--bg-primary);
}

.actions-dropdown {
    background: #fff;
    width: auto;
    min-width: 250px;
    position: absolute;
    top: 40px;
    right: 20px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, .1), 0px 4px 12px 0px rgba(0, 0, 0, .4);
    padding: 8px;
    border-radius: var(--border-radius);
    display: none;
    flex-direction: column;
    z-index: 10;
}

.actions-dropdown.active {
    display: flex;
}

.action-item {
    border-radius: var(--border-radius);
    padding: 5px 10px 3px 10px;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.2s;
}

.action-item:hover {
    background: #e8e8e8;
}

.action-item.danger {
    color: var(--text-danger);
}

.action-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}


/* ===============================================
   UTILITY CLASSES
   =============================================== */
   
.switch {
  position: relative;
  height: 1.5rem;
  width: 3rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 9999px;
  background-color: rgba(100, 116, 139, 0.377);
  transition: all .3s ease;
}

.switch:checked {
  background-color: var(--primary-blue);
}

.switch::before {
  position: absolute;
  content: "";
  left: calc(1.5rem - 1.6rem);
  top: calc(1.5rem - 1.6rem);
  display: block;
  height: 1.6rem;
  width: 1.6rem;
  cursor: pointer;
  border: 1px solid rgba(100, 116, 139, 0.527);
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 3px 10px rgba(100, 116, 139, 0.327);
  transition: all .3s ease;
}

.switch:hover::before {
  box-shadow: 0 0 0px 8px rgba(0, 0, 0, .15);
}

.switch:checked:hover::before {
  box-shadow: 0 0 0px 8px rgba(37, 99, 235, .15);
}

.switch:checked:before {
  transform: translateX(100%);
  border-color: var(--primary-blue);
}

.switch-container {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: .5rem;
}

.switch-container .switch {
    transform: translateY(-2px);
}

.switch-container .form-field-info {
    margin-bottom: 0;
}

.primary-property, .additional-property {
    border: 1px solid var(--form-border);
    padding: 20px;
    border-radius: var(--border-radius);
}

.additional-property {
    margin-top: 1rem;
}

/* Property accordion base */
.property-group {
    position: relative;
}

/* Collapsible body */
.property-body {
    overflow: hidden;
    transition: height 0.35s ease, opacity 0.25s ease;
}

/* Collapsed state */
.property-group.is-collapsed .property-body {
    opacity: 0;
}

/* Summary block */
.property-summary {
    padding: 12px 0 0;
    font-size: 14px;
    color: var(--text-light);
}

/* Optional visual cue */
.property-group.is-collapsed .form-title h4 {
    cursor: pointer;
}

.property-group.is-collapsed {
    background: #D9DFFFA3;
    padding: 20px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
}

.property-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.property-toggle-icon {
    display: flex;
    transition: transform 0.3s ease;
}

.property-toggle-icon svg {
    width: 18px;
    height: 18px;
}

.primary-indicator {
    color: var(--text-dark);
    font-weight: 500;
}

/* Rotate arrow when collapsed */
.property-group.is-collapsed .property-toggle-icon {
    transform: rotate(-90deg);
}

.property-actions {
    margin-top: 1rem;
}

.flex-end {
    align-items: flex-end;
}

.swal2-popup.swal2-modal {
    border-radius: var(--border-radius) !important;
}

.swal2-actions button {
    font-size: 14px;
    border-radius: 50px;
    padding: 11px 22px 9px 22px;
}

.swal2-title {
    font-size: 1.4rem;
    color: var(--primary-dark);
}

.swal2-icon.swal2-warning {
    color: var(--text-warning);
    border-color: var(--text-warning);
}

.swal2-html-container {
    color: var(--text-primary);
}

/* ===============================================
   ITEMS
   =============================================== */
 
.section-container .item-col {
    background: var(--bg-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    position: relative;
    cursor: pointer;
}

.section-container.grid-2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.item-header {
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 20px;
    font-weight: 500;
    font-size: 1.5rem;
    border-bottom: 1px solid #dedede;
    padding-bottom: 10px;
    margin-bottom: 22px;
}

.item-header svg {
    color: var(--primary-blue);
    width: 35px;
    transform: translateY(0);
}

.item-icon svg {
    width: 20px;
    transform: translateY(4px);
}

.item-body p {
    margin: 1rem 0 1.5rem 0;
}

.item-footer {
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--primary-blue);
    padding: 5px 16px;
    border-radius: 1000px;
}

.section-container .item-col a {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.services-grid {
    background: #fff;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
}

.services-grid.loading {
    position: relative;
    opacity: 0.5;
    pointer-events: none;
}

.services-grid.loading::after {
    content: 'Loading...';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    background: rgba(255,255,255,0.6);
}

.service-card {
    min-width: 0;
    background: var(--bg-white);
    display: grid;
    grid-template-columns: 10px 50px 2fr 1fr 1fr;
    gap: 20px;
    align-items: center;
    padding: 20px 10px;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    position: relative;
    cursor: pointer;
    transition: all .3s;
}

.service-card:hover {
    background: var(--table-hover);
}

.service-card > * {
  min-width: 0;
}

.service-card + .service-card {
    margin-top: 20px;
}

.service-image img {
    border-radius: var(--border-radius);
}

.service-card .service-title {
    color: var(--text-dark);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
}

.service-card .service-info {
    color: var(--text-dark);
    font-weight: 500;
    margin-bottom: 5px;
}

.favorite-item {
    position: absolute;
    top: 10px;
    left: 10px;
}

.favorite-item svg {
    width: 20px;
    color: #ffc358;
    fill: #ffc358;
}

.bulk-options-container {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 20px 20px 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--form-border);
}

.bulk-options-container .bulk-select-all {
    margin-right: 10px;
    position: relative;
    top: 4px;
}

.bulk-options-container .primary-btn {
    cursor: pointer;
}

.bulk-options-container .pagination-wrapper {
    margin-left: auto;
    padding: 0;
}

.bulk-options {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
}

.bulk-options span {
    color: var(--primary-blue);
    font-size: 14px;
    padding: 2px 8px 0 8px;
    border: 1px solid var(--primary-blue);
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all .3s;
    cursor: pointer;
}

.bulk-options span svg {
    width: 15px;
    transform: translateY(-1px);
}

.bulk-options  span[data-bulk-action="move"] svg {
    color: #ff8970;
}

.bulk-options  span[data-bulk-action="favorite"] svg {
    color: #ffc358;
    fill: #ffc358;
}

.bulk-options  span[data-bulk-action="unfavorite"] svg {
    color: #ffc358;
}

.bulk-options  span[data-bulk-action="export"] svg {
    color: #30918f;
}

.bulk-options span:not(.card-delete):hover {
    color: #fff;
    background: var(--primary-blue);
}

.bulk-options .card-delete {
    color: var(--text-danger);
    border-color: var(--text-danger);
}

.bulk-options .card-delete:hover {
    color: #fff;
    background: var(--text-danger);
}

.bulk-select-all {
    display: none;
}

.bulk-select .bulk-select-cb {
    opacity: 0;
    pointer-events: none;
}

/* ACTIVE BULK MODE */

.bulk-options-container.bulk-active .bulk-options {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.bulk-options {
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease;
}

/* Show select-all in bulk mode */
.bulk-options-container.bulk-active .bulk-select-all {
    display: inline-block;
}

/* Show checkboxes in bulk mode */
.services-grid.bulk-active .bulk-select-cb {
    opacity: 1;
    pointer-events: auto;
}

/* Mute cards in bulk mode */
.services-grid.bulk-active .service-card {
    opacity: .85;
    transition: opacity .2s ease;
}

.services-grid.bulk-active .service-card:hover {
    background: var(--bg-white);
    outline: 2px solid var(--primary-blue);
}

/* Disable card-options in bulk mode */
.services-grid.bulk-active .card-options {
    opacity: .4;
    pointer-events: none;
}

/* Optional: selected card highlight */
.service-card.bulk-selected {
    outline: 2px solid var(--primary-blue);
}

.services-grid:not(.bulk-active) .bulk-select-cb {
    pointer-events: none;
}

.bulk-options span.active {
    background: var(--primary-blue);
    color: #fff;
}

.bulk-options span.card-delete.active {
    background: var(--text-danger);
    border-color: var(--text-danger);
}

/* ===============================================
   CORE COMPONENTS
   =============================================== */

.customer-create {
    padding: 10px 14px;
    border-top: 1px solid var(--form-border);
    color: var(--primary-blue);
    cursor: pointer;
    font-weight: 500;
}

.customer-picker {
    position: relative;
    margin-bottom: 0 !important;
}

.cp-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid var(--form-border);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    z-index: 50;
    max-height: 320px;
    overflow: auto;
    padding: 6px;
}

.cp-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
}
.cp-item:hover {
    background: var(--border-color)
}

.cp-left { min-width: 0; }
.cp-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
    line-height: 1.2;
}
.cp-sub {
    font-size: 14px;
    color: var(--text-primary);
    margin-top: 3px;
    line-height: 1.2;
}
.cp-meta {
    font-size: 14px;
    color: var(--text-primary);
    margin-top: 6px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cp-pill {
    font-size: 12px;
    padding: 2px 8px;
    border: 1px solid var(--form-border);
    border-radius: 999px;
    color: var(--text-muted);
    white-space: nowrap;
}

.cp-selected {
    margin-top: 10px;
}

.cp-card {
    background: #fff;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
    padding: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cp-property-title {
    font-weight: 700;
    margin: 20px 0 10px 0;
}

.cp-property-card {
    background: #fff;
    padding: 12px;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
    position: relative;
}

.cp-property-card .cp-card-actions {
    position: absolute;
    top: 12px;
    right: 12px;
}

.cp-card-actions[title="Edit customer"] svg,
.cp-card-actions[title="Edit property"] svg {
    color: var(--text-primary);
}

.cp-card .cp-card-left { min-width: 0; }
.cp-card .cp-card-name {
    color: var(--primary-dark);
    font-weight: 700;
}
.cp-card .cp-card-sub { color: var(--text-primary); font-size: 15px; margin-top: 4px; }
.cp-card .cp-card-meta {
    color: var(--primary-dark);
    font-size: 14px;
    line-height: 12px;
    margin-top: 6px;
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cp-property-name {
    color: var(--primary-dark);
    font-weight: 700;
    margin-bottom: 5px;
}

.cp-card-actions {
    padding: 12px 10px 5px 10px;
    border-radius: var(--border-radius);
    user-select: none;
    cursor: pointer;
}

.cp-card-actions svg {
    color: var(--text-danger);
    width: 20px; 
}

.cp-card-actions:hover {
    background: #D9DFFFA3;
}

.cp-property { margin-top: 10px; }
.cp-property .form-control { margin-top: 0; }

.cp-selected-locked {
    max-height: 400px;
    overflow: auto;
}
.cp-selected-locked .form-title {
    margin-top: 20px;
}

.invoice-job-summary-item + .invoice-job-summary-item {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

#property-edit {
    margin-bottom: 20px;
}

.distance-strip-inner {
    color: var(--text-primary);
    font-size: 0.875rem;
    margin-top: 20px;
}

.distance-loading {
    color: #94A3B8;
    margin-top: 20px;
}

.distance-strip-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0px 10px 0;
}

.distance-strip-text strong {
    color: var(--primary-dark);
    margin-right: 3px;
}

.job-distance-strip svg {
    color: #94A3B8;
    width: 18px;
    height: 18px;
}

.job-distance-strip .distance-strip-car {
    color: var(--primary-blue);
}

.distance-strip-duration {
    color: var(--status-active);
}

.distance-strip-toggle {
   color: #fff;
   background: var(--primary-blue);
   width: 100%;
   font-size: 13px;
   margin-bottom: 10px;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   gap: 10px;
   padding: 5px 12px 3px 10px;
   border-radius: 5px;
   border: 1px solid rgba(57, 74, 81, 0.12);
}

.distance-strip-toggle svg {
    color: #fff;
}

.customer-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: .15s ease;
}

.cp-property .form-control {
    margin-bottom: 0;
}

.cp-dropdown, .create-new-property {
    display: none;
}

.create-new-property {
    margin-top: 10px;
}

.cp-dropdown.active {
    display: block;
}

.customer-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Wrapper */
.services-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    margin-top: 15px;
    padding-right: 15px;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
    padding: 18px 35px 12px 35px;
    display: none;
}

.services-container.active {
    display: block;
}

@media (max-width: 767px) {
    .services-container {
        padding: 45px 10px 10px 10px;
    }
}

.services-container.is-optional {
    border-color: var(--primary-purple);
}

/* ---------- TOP ROW ---------- */

.services-row-type {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 125px 125px 125px;
    gap: 16px;
    align-items: flex-end;
}

.line-item-section-badge {
    color: var(--text-secondary);
    font-size: 13px;
    position: absolute;
    top: 11px;
    left: 50px;
}

.line-item-section-date {
    color: var(--primary-dark);
    font-size: 11px;
}

@media (min-width: 1201px) {
    .col-2-right-col-main .services-container,
    .col-2-right-wf .services-container {
        padding-bottom: 4px !important;    
    }
    .col-2-right-col-main .services-row-details,
    .col-2-right-wf .services-row-details {
        grid-template-columns: minmax(0, 1fr) 407px !important;
    }
    .col-2-right-col-main .services-container .services-row-type > div .form-control input[type="text"],
    .col-2-right-wf .services-container .services-row-type > div .form-control input[type="text"] {
        border-radius: 10px 10px 0px 0;
        border-bottom-width: 2px;
    }
    .col-2-right-col-main .services-container .services-row-details > div .textarea-lg,
    .col-2-right-wf .services-container .services-row-details > div .textarea-lg {
        position: relative;
        top: -16px;
        margin-bottom: 0;
    }
    .col-2-right-col-main .services-container .services-row-details > div .textarea-lg textarea,
    .col-2-right-wf .services-container .services-row-details > div .textarea-lg textarea {
        border-radius: 0 0 10px 10px;
        border-top: none;
    }
    .col-2-right-col-main .image-dropzone,
    .col-2-right-wf .image-dropzone {
        padding: 4px !important;    
    }
}
@media (max-width: 1200px) {
    .services-row.services-row-type {
        grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
        gap: 12px; /* optional */
    }
    .services-row.services-row-type > div:first-child{
        grid-column: 1 / -1; /* full width */
    }
    .services-row-details {
        display: flex !important;
        flex-direction: column !important;
        align-items: initial !important;
        gap: 0 !important;
    }
    .services-row.services-row-type > div:nth-child(1) > div:nth-child(1) {
        margin-bottom: 0;
    }
}

.popup .services-row.services-row-type {
    grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
    gap: 12px; /* optional */
}
.popup .services-row.services-row-type > div:first-child {
    grid-column: 1 / -1; /* full width */
}
.popup .services-row-details {
    grid-template-columns: 100%;
}

.popup .services-row > div .form-control {
    margin-bottom: 0;
}

/* Prevent overflow issues inside grid */
.services-row-type > div {
    min-width: 0;
}

/* ---------- DETAILS ROW ---------- */

.services-row-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 16px;
    align-items: stretch;
}

.services-row-details > div {
    min-width: 0;
}

.services-row .cost-trigger {
    color: var(--primary-blue);
    font-size: 12px;
    margin-left: 20px;
    cursor: pointer;
}

.service-totals {
    background: var(--border-color);
    border-top: 2px solid var(--form-border);
    border-radius: 0 0 10px 10px;
    padding: 50px 30px;
    margin-top: 2rem;
}

#view-totals-save-bar {
    margin-top: 20px;
}

.work-order-view .service-totals {
    margin-top: 10px;
}

.work-order-view .title-highlighted {
    margin: 18px 0 !important;
}

.work-order-view .line-item-payments {
    background: #10B981C4;
    margin-top: 20px;
}

.work-order-edit .data-title-container {
    width: 100%;
}
.work-order-edit .data-title {
    justify-content: space-between;
}

.service-totals .line-item {
    width: 50%;
    margin-left: auto;
}

@media (max-width: 660px) {
    .service-totals .line-item {
        width: 100%;
    }
}

.service-totals .line-item-col {
    color: var(--text-dark);
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--form-border);
}

.invoice-balance-due {
    margin-top: 20px;
}

.invoice-balance-due.wf-hidden {
    display: none !important;
}

.service-totals .line-item-col + .line-item-col {
    margin-top: 20px;
}

.service-totals .total-col {
    font-size: 18px;
    font-weight: 600;
    border-bottom: 2px solid var(--form-border);
}

.view-totals-edit {
    text-align: right;
}

#editTotals {
    position: relative;
    top: -20px;
}

.balance-due .totals-display-value,
.invoice-balance-due .totals-display-value {
    font-size: 18px !important;
    font-weight: 600 !important;
}

.delete-item {
    color: var(--text-danger);
    width: 20px;
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
}

.add-line-item-wrapper {
    margin-top: 15px;
}

@media (max-width: 540px) {
    .repeater-btn-remove {
        display: none;
    }
}

.add-additional-line-item.active {
    display: inline-block;
}

.add-additional-line-item {
    display: none;
}

/* Line Item Dropdown */
.li-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1000;
    margin-top: 4px;
}

.li-dropdown.active {
    display: block;
}

.li-dropdown .li-add-new {
    color: var(--primary-blue);
    padding: 10px;
    cursor: pointer;
}

.li-group-title {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #666;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

.li-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.li-item:hover {
    background: #f9f9f9;
}

.li-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.li-star {
    width: 16px;
    height: 16px;
    color: #fbbf24;
    flex-shrink: 0;
}

.li-name {
    font-weight: 500;
    color: #333;
}

.li-sub {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

.li-price {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.li-price-label, .item-price-label {
    display: block;
    font-size: 11px;
    color: #666;
    text-align: right;
    margin-top: 2px;
    font-weight: 400;
}

.li-item.active {
    background: #D9DFFFA3;
}

/* Make name field container relative for dropdown positioning */
[data-line-item-name] {
    position: relative;
}

.form-control:has([data-line-item-name]) {
    position: relative;
}

.li-type-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    background: #e5e7eb;
    color: #6b7280;
    border-radius: 4px;
    text-transform: uppercase;
}

.totals-extra-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.options-row {
    background: #6859e670;
    padding: 8px 15px 10px 15px;
    border: 1px dashed #6859e891 !important;
    border-radius: var(--border-radius);
}

.options-row .totals-display-value {
  font-weight: 500;
}

/* LEFT: label + trigger link */
.totals-extra-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.totals-extra-text {
    color: var(--text-dark);
    font-size: 15px;
}

.totals-trigger-link, .view-totals-trigger {
    color: var(--primary, #2563eb);
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.totals-trigger-link:hover {
    text-decoration: underline;
}

/* MID: inline editing controls */
.totals-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

.totals-inline-input {
    color: var(--text-dark);
    max-width: 100px;
    background: #fff !important;
    padding: 10px 10px 5px 10px !important;
    border: 1px solid var(--form-border) !important;
    border-radius: var(--border-radius) !important;
    font-size: 16px !important;
    text-align: right;
}
.totals-inline-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* $/% select */
.totals-type-select {
    color: var(--text-dark);
    background: var(--white, #fff);
    padding: 5px 6px 1px 6px;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
    font-size: 16px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    min-width: 50px;
    text-align: center;
}
.totals-type-select:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
}

/* % static label (tax only) */
.totals-type-label {
    font-size: 16px;
}

/* Settings note */
.totals-settings-note {
    font-size: 11px;
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
}

/* RIGHT: value + trash */
.totals-extra-right {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    justify-content: flex-end;
    min-width: 80px;
}

.totals-display-value {
    text-align: right;
    color: var(--text-dark);
    font-size: 14px;
    min-width: 50px;
}

/* Trash button */
.totals-trash {
    color: var(--text-danger, #dc2626);
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: color 0.15s;
    flex-shrink: 0;
}
.totals-trash:hover {
    color: var(--text-danger, #dc2626);
}
.totals-trash svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Deposit row separator */
.totals-deposit-row {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px dashed var(--form-border) !important;
    border-bottom: none !important;
}

.deposit-manual-record {
    font-size: 13px;
    border-top: 1px solid var(--form-border);
    padding: 10px 0;
    margin-top: 5px;
    display: block;
}

.deposit-manual-meta span,
.deposit-manual-note span {
    color: var(--primary-dark);
}

.deposit-manual-note, .extras-left-flex-column .data-sub-text {
    font-size: 13px;
}

.extras-left-flex-column .data-sub-text {
    color: var(--text-primary);
    display: flex;
    align-items: flex-start;
}

.invoice-deposit-row {
    flex-direction: column;
}

.invoice-deposit-row a {
    color: var(--primary-blue);
}

.invoice-balance-due {
    margin-top: 20px;
}

#tax-row #tax-inline {
      margin-left: auto;
}

#tax-row .totals-extra-right,
#tax-row #tax-display {
    min-width: unset !important;
}

.extras-left-flex-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
}

.custom-toggle-btn {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    color: var(--muted-color);
}
.custom-toggle-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.unit-price-wrapper {
    position: relative;
}

.cost-popover {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 100;
    min-width: 200px;
}
.cost-popover-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}
.cost-popover-field {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}
.cost-popover-field .cost-popover-input {
    padding: 10px 10px 5px 10px !important;
}
.cost-popover-currency {
    color: var(--primary-dark);
    font-size: 1rem;
}
.cost-popover-input {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 13px;
    width: 100%;
}
.cost-popover-note {
    font-size: 11px;
    color: var(--muted-color);
}

.optional-items-section .form-title {
    color: #fff;
    background: var(--primary-purple);
    margin: 27px 0 !important;
}

.optional-title {
    color: #fff;
    background: var(--primary-purple) !important;
}

.optional-items-section .services-container {
    background: #9556d31c;
}

.optional-items-section .services-container .form-muted input {
    background: #6859e84f !important;
}

.optional-items-section .services-container,
.optional-items-section .services-container input[type="text"],
.optional-items-section .services-container textarea,
.optional-items-section .services-container .image-dropzone {
    border-color: #6859e891 !important;
}
.optional-items-section .services-container .image-dropzone svg,
.optional-items-section .services-container .image-dropzone span {
    color: var(--primary-purple);
}

.services-view .data-empty {
    margin: 20px 0;
}

.deposit-paid-amount, .totals-value-positive {
    color: var(--status-active) !important;
}

.balance-row .line-item-total {
    font-size: 20px;
    font-weight: 600;
}

/* ============================================
   Line Item Drag & Drop
   ============================================ */

/* Drag Handle */
.drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    padding: 4px 2px;
    position: absolute;
    top: 6px;
    left: 5px;
    border-radius: 4px;
    transition: opacity 0.15s ease;
    opacity: 0.3;
}

.drag-handle:hover {
    opacity: 0.7;
}

.drag-handle:active {
    cursor: grabbing;
}

.drag-handle svg {
    stroke: var(--text-dark);
    width: 25px;
    height: 25px;
}

/* Container needs relative positioning for handle */
.services-container[data-line-item] {
    position: relative;
}

/* Sortable states */
.sortable-ghost {
    opacity: 0.4;
    background: #F1F5F9;
    border-radius: 8px;
}

.sortable-chosen {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.sortable-drag {
    opacity: 0.9;
}

.assessment-section,
.wf-hidden {
    position: relative;
    display: none;
}

.introduction-section,
.schedule-section {
    position: relative;
}

.assessment-section.active {
    display: block;
}

.assessment-section .close-trigger,
.introduction-section .close-trigger,
.schedule-section .close-trigger {
    background: #D9DFFFA3;
    position: absolute;
    top: -30px;
    right: 0;
    line-height: 0;
    padding: 8px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s;
}

.assessment-section .close-trigger:hover,
.introduction-section .close-trigger:hover,
.schedule-section .close-trigger:hover {
    background: var(--table-hover);
}

.introduction-section .close-trigger {
    top: -48px;
}

.close-trigger svg {
    color: var(--primary-dark);
    width: 22px;
}

.assessment-info, .optional-section {
    background: #e7e7f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border-radius: 10px;
    padding: 25px 35px;
}

/* ============================================
   Assessment Field Disabled State
   ============================================ */

.field-disabled {
    color: #6C7B91 !important;
    background: var(--text-muted) !important;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
}

/* ============================================
   Team Member Picker
   ============================================ */

.team-picker {
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* Selected Members (chips) */
.team-picker-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.team-picker-selected:empty {
    display: none;
    margin-bottom: 0;
}

.team-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #94A3B880;
    border-radius: 50px;
    padding: 6px;
    font-size: 0.8125rem;
    line-height: 1;
}

.team-chip-initials, .team-chip-initials-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0B1F33;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    padding-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.025em;
}

.assigned-team-chips-sm {
    display: flex;
    gap: 4px;
}

.team-chip-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    transform: translateY(2px);
}

.team-chip-name {
    color: var(--primary-dark, #0B1F33);
    font-weight: 500;
    font-size: 0.8125rem;
    margin-bottom: 3px;
}

.team-chip-phone {
    font-size: 0.6875rem;
    color: var(--text-primary, #64748B);
    display: none !important;
}

.team-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.team-chip-remove:hover {
    background: #E2E8F0;
}

.team-chip-remove svg {
    width: 14px;
    height: 14px;
    stroke: #94A3B8;
}

.team-chip-remove:hover svg {
    stroke: var(--text-danger)
}

/* Dropdown Trigger - Rounded button style */
.team-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px 8px 14px;
    border: 1px solid var(--form-border);
    border-radius: var(--btn-border-radius, 50px);
    cursor: pointer;
    background: var(--primary-blue);
    transition: all 0.15s ease;
    user-select: none;
}

.team-picker-trigger:hover {
    background: var(--primary-blue-hover);
}

.team-picker-trigger.is-open {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.team-picker-trigger-text {
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
}

.team-picker-trigger-icon {
    width: 16px;
    height: 16px;
    stroke: #fff !important;
    position: relative;
    top: -1px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.team-picker-trigger:hover .team-picker-trigger-icon {
    stroke: #fff;
}

/* Dropdown List */
.team-picker-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 50;
    max-height: 260px;
    overflow-y: auto;
    display: none;
}

.team-picker-dropdown.is-open {
    display: block;
}

/* Dropdown Items */
.team-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.team-picker-item:hover {
    background: #F8FAFC;
}

.team-picker-item.is-selected {
    background: #EFF6FF;
}

.team-picker-item-check {
    width: 18px;
    height: 18px;
    border: 2px solid #CBD5E1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.team-picker-item.is-selected .team-picker-item-check {
    background: var(--primary-blue);
    border-color: #3B82F6;
}

.team-picker-item-check svg {
    width: 12px;
    height: 12px;
    stroke: #fff;
    display: none;
}

.team-picker-item.is-selected .team-picker-item-check svg {
    display: block;
}

.team-picker-item-initials {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0B1F33;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.025em;
}

.team-picker-item-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.team-picker-item-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-dark, #0B1F33);
}

.team-picker-item-phone {
    font-size: 0.75rem;
    color: var(--text-primary, #64748B);
}

/* Empty State */
.team-picker-empty {
    padding: 16px 12px;
    text-align: center;
    font-size: 0.8125rem;
    color: #94A3B8;
}

/* Loading */
.team-picker-loading {
    padding: 16px 12px;
    text-align: center;
    font-size: 0.8125rem;
    color: #94A3B8;
}

/* ============================================
   Worfkflow View Page
   ============================================ */

.data-sent-date {
    color: var(--text-primary, #475569);
    font-size: 13px;
    font-weight: 400;
    display: flex;
    gap: 10px;
}

.data-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.title-icon svg {
    width: 24px;
    margin-top: 6px;
}

.data-title .data-number {
    font-size: 16px;
    font-weight: 400;
    margin-top: 8px;
}

.data-status-container {
    display: flex;
    align-items: center;
    margin-top: 7px;
    gap: 10px;
}

.map-tabs {
    display: flex;
    border-bottom: 1px solid #E2E8F0;
}

.map-tab {
    padding: 8px 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748B;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.map-tab:hover {
    color: var(--primary-dark, #0B1F33);
}

.map-tab.active {
    color: var(--primary-dark, #0B1F33);
    border-bottom-color: var(--primary-dark, #0B1F33);
}

.map-view-container {
    border: 1px solid #E2E8F0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.map-panel {
    display: none;
}

.map-panel.active {
    display: block;
}

.map-container {
    width: 100%;
    height: 260px;
}

.c-property-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary, #64748B);
    margin-bottom: 2px;
}

.c-street a {
    color: var(--primary-dark, #0B1F33);
    text-decoration: none;
}

.c-city-state-zip {
    font-size: 0.8125rem;
    color: var(--text-primary, #64748B);
}

.title-highlighted {
    background: #e7e7f5;
    padding: 10px 10px 8px 10px;
    border-radius: var(--border-radius);
    margin-bottom: 0 !important;
}

.invoice-section-label {
    margin: 20px 0 !important;
}

/* Data Details */
.data-details {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--primary-dark, #0B1F33);
}

.customer-notifications {
    color: var(--status-active);
    margin-top: 15px;
}

.data-container {
    position: relative;    
}

.data-container .data-btn {
    color: var(--primary-blue);
    font-size: 12px;
    border: 1px solid var(--primary-blue);
    border-radius: var(--border-radius);
    padding: 2px 8px 0 8px;
    cursor: pointer;
}

.data-details svg, .data-block svg {
    width: 18px;
    height: 18px;
    stroke: #94A3B8;
    flex-shrink: 0;
    margin-top: 1px;
}

.data-details a {
    color: var(--primary-dark, #0B1F33);
    text-decoration: none;
}

.data-details a {
    color: var(--primary-blue);
}
.linked-data {
    margin-top: 0;
}
.data-details .data-sub-link {
    color: var(--text-primary);
    font-size: 12px;
}

/* Data Body */
.data-body {
    font-size: 0.875rem;
    color: var(--text-primary, #475569);
    line-height: 1.6;
}

/* Empty State */
.data-empty, .data-notice {
    font-size: 0.8125rem;
    color: #94A3B8;
    font-style: italic;
    margin: 5px 0;
}

/* Workflow Containers */
.workflow-container {
    margin-bottom: 28px;
}

/* Assigned Team Chips (read-only) */
.assigned-team-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.team-chip-readonly {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #94A3B880;
    border-radius: 50px;
    padding: 4px 10px 4px 4px;
    font-size: 0.8125rem;
    color: var(--primary-dark, #0B1F33);
    font-weight: 500;
}

.team-chip-readonly .team-chip-initials {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0B1F33;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.025em;
}

/* Status Badges */
.status-unscheduled,
.status-badge.status-change-requested,
.status-badge.status-expiring-soon,
.status-badge.status-refunded,
.status-badge.status-alert,
.status-badge.status-on-hold,
.status-badge.status-on_hold,
.status-badge.status-cancelled {
    color: #92400e;
    background: #FEF3C7;
}

.status-high {
    color: #a651bd;
    background: #a1498f29;
    padding: 2px 9px 0px 17px;
    font-size: 11px;
}

.status-high::before {
    width: 5px;
    height: 5px;
    top: 9px;
    left: 7px;
}

.more-options-wrapper {
    position: relative;
}

.more-card-menu {
    background: #fff;
    width: auto;
    min-width: 200px;
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, .1), 0px 4px 12px 0px rgba(0, 0, 0, .4);
    padding: 8px;
    border-radius: var(--border-radius);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 9;
}

.more-card-menu.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 99;
}

/* Header version of More menu (dropdown downward) */
.header-btns .more-card-menu {
    bottom: auto;
    top: calc(100% + 12px);
    left: 0;
    transform: translateY(-6px); /* reverse initial animation */
}

/* Active state */
.header-btns .more-card-menu.is-active {
    transform: translateY(0);
}

.more-card-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.more-card-menu ul li {
    margin: 0;
}

.more-card-menu .action-item {
    display: block;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: var(--text-dark);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
    transition: background 0.1s ease;
}

.more-card-menu .menu-label {
    color: var(--text-muted);
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 400;
    margin-bottom: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.more-card-menu .action-item:hover {
    background: var(--bg-primary);
}

.more-card-menu .action-item.danger {
    color: var(--danger);
}

.more-card-menu .action-item.danger:hover {
    background: #fef2f2;
}

.menu-divider {
    background: var(--border-color);
    height: 1px;
    margin: 6px 0px !important;
}

/* Notes */
.form-title .btn-add-note,
.popup-trigger {
    color: var(--primary-blue);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    margin-left: 8px;
}

.refund-row {
    margin-top: 10px;
}

.refund-row .refund-trigger {
   color: var(--primary-blue);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
}

.trigger-container-left {
    margin-bottom: 10px;
}

.trigger-btn {
    color: var(--primary-blue);
    background: #fff;
    padding: 5px 5px 3px 5px;
    border: 1px solid var(--primary-blue);
    border-radius: var(--border-radius);
    display: inline-block;
    cursor: pointer;
}

.block-trigger {
    width: 100%;
    display: block;
}

.notes-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.note-entry {
    background: #e7e7f5;
    padding: var(--spacing-sm);
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
}

.note-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.note-user {
    flex-shrink: 0;
}

.note-meta {
    flex: 1;
    min-width: 0;
}

.note-meta-top {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.note-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.note-date {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.note-body {
    margin-top: var(--spacing-xs);
    padding-left: calc(32px + var(--spacing-xs));
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Note Actions Dropdown */
.note-actions {
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
}

.note-actions-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--border-radius-sm);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
}

.note-actions-toggle:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.note-actions-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, .1), 0px 4px 12px 0px rgba(0, 0, 0, .4);
    padding: 4px;
    border-radius: var(--border-radius-sm);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
    min-width: 120px;
}

.note-actions-dropdown.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.note-actions-dropdown .action-item {
    display: block;
    padding: 6px 10px;
    font-size: 0.8rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
}

.note-actions-dropdown .action-item:hover {
    background: var(--bg-primary);
}

.note-actions-dropdown .action-item.danger {
    color: var(--danger);
}

.note-actions-dropdown .action-item.danger:hover {
    background: #fef2f2;
}

.note-edit-textarea, .service-details-edit-textarea  {
    width: 100%;
    padding: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
    resize: vertical;
    line-height: 1.5;
}

.note-edit-actions {
    display: flex;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
    border-radius: 5px;
}

.signature-display img {
    max-width: 300px;
}

.module-header-grid-4, .module-row-grid-4 {
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 1fr;
    gap: 10px;
    font-size: 0.85rem;
}

.module-header-grid-4 > *,
.module-row-grid-4 > * {
  width: 100%;
}

.module-header {
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
}

.module-row {
    margin-bottom: 20px;
}

/* ============================================
   Media List (Attachments)
   ============================================ */

.media-list-grid {
    flex-direction: row !important;
}

.media-list-grid .media-item {
    width: auto;
}

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

.media-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.media-item:hover {
    background: #F8FAFC;
}

.media-item-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-item-thumb svg {
    width: 24px;
    height: 24px;
    stroke: #94A3B8;
}

.media-item-info {
    flex: 1;
    min-width: 0;
}

.media-item-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary-dark, #0B1F33);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-item-date {
    font-size: 0.75rem;
    color: var(--text-primary, #475569);
    margin-top: 2px;
}

.media-item-download {
    flex-shrink: 0;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.media-item-download:hover {
    background: #E2E8F0;
}

.media-item-download svg {
    width: 18px;
    height: 18px;
    stroke: #64748B;
}

/* ============================================
   Lightbox
   ============================================ */

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 1;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 8px;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.lightbox-close svg {
    width: 28px;
    height: 28px;
    stroke: #fff;
}

.lightbox-close:hover svg {
    stroke: #E2E8F0;
}

/* Line Item List */
.line-item-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.line-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #E4E5E5;
    position: relative;
}

.line-item-row:last-child {
    border-bottom: none;
}

.line-item-row.line-item-selected {
    background: #F0FDF4;
    border-bottom: 1px solid #E2E8F0;
    padding: 12px;
    position: relative;
}

#line-items-edit-section .line-item-selected {
    background: #F0FDF4;
    border-color: #16a34a !important;
}

#line-items-edit-section .line-item-selected .optional-selected-icon {
    position: absolute;
    top: 12px;
}

.optional-selected-icon {
    margin-right: 10px;
}

.optional-selected-icon svg {
    color: #16a34a;
    width: 20px;
}

.line-item-added-alert {
    color: #16A34A;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 4px;
    pointer-events: none;
    opacity: 0.12;
}

.line-item-main {
    flex: 1;
    min-width: 0;
}

.line-item-image-placeholder {
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius);
    background: #F1F5F9;
}

.line-item-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-dark, #0B1F33);
}

.line-item-desc {
    font-size: 0.865rem;
    color: var(--text-primary, #475569);
    margin-top: 2px;
}

.line-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    margin-left: 16px;
}

.line-item-qty {
    font-size: 0.75rem;
    color: var(--text-primary, #475569);
}

.line-item-total {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-dark, #0B1F33);
}

.work-order-view .line-item-image,
.work-order-view .line-item-image-placeholder {
    margin-right: 10px;
}

.work-order-view .line-item-image img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.payments-row .line-item-meta {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.payments-label {
    color: var(--primary-blue);
}

.payments-paid-notice svg {
    color: var(--status-active);
    width: 18px;
    transform: translateY(4px);
}

#paymentsModule .payments-paid-notice, #paymentsModule .payments-total-row,
#paymentsModule .payments-balance-row {
    text-align: right;
}

.payments-paid-notice {
    color: var(--text-light-grey);
    font-size: 13px;
}

.payments-total-row, .payments-balance-row {
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
    margin-top: 8px;
}

.payments-total-amount {
    font-weight: 600;
}

/* ============================================
   Activity Log
   ============================================ */

.activity-log {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.activity-entry {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #F1F5F9;
}

.activity-entry:last-child {
    border-bottom: none;
}

.activity-user {
    flex-shrink: 0;
}

.activity-user .team-chip-initials {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0B1F33;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.025em;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-text {
    font-size: 0.8125rem;
    color: #475569;
    line-height: 1.5;
}

.activity-name {
    font-weight: 600;
    color: var(--primary-dark, #0B1F33);
}

.activity-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    font-size: 0.75rem;
}

.activity-old {
    color: var(--text-danger);
    text-decoration: line-through;
}

.activity-new {
    color: var(--status-active);
    font-weight: 500;
}

.activity-date {
    font-size: 0.75rem;
    color: #94A3B8;
    margin-top: 2px;
}

/* ===============================================
   BOOKING CONFIRMATION POPUP
   =============================================== */

.send-tab-panel .form-control:first-of-type .form-label, .send-tab-panel .form-control:first-of-type label {
    left: 6px !important;
}

.send-tab-panel .email-chip {
    margin-left: 22px;
}
#send-tab-sms .email-chip {
    padding-bottom: 0px;
}

.popup-notice {
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-md);
}
.popup-notice p {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
}

.form-email-chip {
    padding: 8px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
}
.email-chip {
    display: inline-flex;
    align-items: center;
    background: var(--bg-white);
    border: 1px solid var(--form-border);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.85rem;
}

.form-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}
.form-checkbox-label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* Schedule Inline Edit */

#scheduleContainer .ryno-date-fields {
    display: block;
    margin-bottom: 20px;
}

#scheduleContainer div.date-col:nth-child(1) {
    margin-bottom: 20px;
}

#scheduleContainer .team-picker {
    padding-bottom: 15px;
    border-bottom: 1px solid var(--bg-light-gery);
}

#scheduleContainer .team-picker-trigger {
    padding: 6px 10px 4px 5px;
}

.schedule-editing {
    border: 2px solid var(--primary-blue);
    border-radius: var(--border-radius);
    transition: border-color 0.3s ease;
}

.schedule-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-xs);
    margin-top: 10px;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-primary);
}

#inline-instructions {
    padding: 10px;
}

.associated-request-selected, .associated-estimate-selected {
    color: var(--text-dark);
    background: #D9DFFFA3;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 10px;
}

.associated-request-selected svg, .associated-estimate-selected svg {
   width: 20px;
   position: relative;
   top: 3px; 
}

.clear-btn {
    position: relative;
    top: 1px;
}

.clear-btn {
    float: right;
}

.clear-btn svg {
    color: var(--text-danger);
    width: 20px;
}

#collectSignatureForm .btn-svg svg {
    color: var(--text-primary);
    position: relative;
    top: -1px;
}

#collectSignatureForm #clear-collect-signature {
    border: 1px solid var(--form-border);
    padding: 8px 10px 5px 10px;
    border-radius: var(--border-radius);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#collectSignatureForm .form-field-info {
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    padding: 12px;
    border-bottom: 1px solid var(--form-border);
}

#collect-signature-pad {
    display: block;
    width: 100%;
    height: 200px;
}

.signature-pad-wrapper {
    background: #fff;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
    margin: 15px 0;
    overflow: hidden;
}

/* ── Timeline ────────────────────────────────────────────────── */

.timeline-unscheduled-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-light, #f8fafc);
    border-radius: var(--border-radius, 8px);
    border: 1px solid #e2e8f0;
    font-size: 13px;
    color: var(--text-muted, #64748b);
    margin-bottom: 20px;
}

.timeline-unscheduled-notice svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-muted, #64748b);
}

.job-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 8px 0 4px;
    position: relative;
}

.job-timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Connecting dashed line */
.timeline-connector {
    flex: 1;
    height: 2px;
    border-top: 2px dashed #94A3B8;
    margin-top: 23px; /* vertically centers with the 48px circles */
    transition: border-color 0.3s ease;
}

.timeline-connector.connector-done {
    border-top-style: solid;
    border-color: var(--primary-blue);
}

/* Step circle button */
.job-timeline-step {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #94A3B8;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.job-timeline-step svg {
    width: 20px;
    height: 20px;
    color: #94A3B8;
    transition: color 0.2s ease;
}

.job-timeline-step:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(var(--primary-blue-rgb, 59, 130, 246), 0.1);
}

.job-timeline-step:hover svg {
    color: var(--primary-blue);
}

.job-timeline-step.job-timeline-completed svg {
    color: #fff;
}

/* Pending state — default gray */
.job-timeline-pending {
    border-color: #94A3B8;
}

/* Active state — blue border + pulse */
.job-timeline-active {
    border-color: var(--primary-blue);
}

.job-timeline-active svg {
    color: var(--primary-blue);
}

.job-timeline-active::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--primary-blue);
    opacity: 0;
    animation: timeline-pulse 2s ease-out infinite;
}

@keyframes timeline-pulse {
    0%   { opacity: 0.6; transform: scale(0.9); }
    100% { opacity: 0;   transform: scale(1.3); }
}

/* Completed state — filled blue */
.job-timeline-completed {
    border-color: var(--primary-blue);
    background: var(--primary-blue);
}

.job-timeline-completed svg {
    color: #fff;
}

/* Checkmark overlay */
.timeline-check {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background: var(--primary-blue);
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-check svg {
    width: 8px;
    height: 8px;
    color: #fff;
}

/* Labels */
.timeline-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    text-align: center;
    letter-spacing: 0.02em;
}

.timeline-sublabel {
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    text-align: center;
    margin-top: -4px;
}

.timeline-sublabel a {
    color: var(--primary-blue);
    text-decoration: none;
}

.metrics-tabs {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 22px;
    padding-bottom: 10px;
    display: flex;
    gap: 20px;
}

#metrics-visit-empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.metrics-tab.active {
    color: var(--primary-blue);
}

#recalculate-true-cost-btn {
    margin-left: auto;
}

.popup-notice {
    padding: 10px 14px;
    border-radius: var(--border-radius, 8px);
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.5;
}
.popup-notice-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}
.popup-notice-info a {
    text-decoration: underline;
}
.popup-summary-row:last-of-type {
    margin-bottom: 10px;
}
.popup-summary-row span:nth-child(1) {
    color: var(--text-secondary);
}
.popup-summary-row span:nth-child(2) {
    font-weight: 600;
}
.form-row-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #475569);
    margin-bottom: 8px;
    margin-top: 4px;
}
.timeline-undo-btn {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted, #94a3b8);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-bottom: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
    height: 16px;
    display: block;
    text-align: center;
    position: absolute;
    bottom: -10px;
}
.timeline-undo-btn:hover {
    color: var(--text-danger, #dc2626);
}
.timeline-undo-btn.timeline-undo-warn {
    color: #f59e0b;
}
.timeline-undo-btn.timeline-undo-warn:hover {
    color: #dc2626;
}
.timeline-undo-placeholder {
    position: absolute;
    height: 16px;
    margin-bottom: 4px;
}
.timeline-duration {
    font-weight: 600;
    color: var(--text-secondary, #475569);
}

/* ── Metrics grid ────────────────────────────────────────────── */
.metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}

.metric-card {
    background: var(--bg-light, #f8fafc);
    border-radius: var(--border-radius, 8px);
    padding: 12px 16px;
}

.metric-card-full {
    grid-column: 1 / -1;
}

.metric-label {
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.metric-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
}

.text-success { color: #16a34a; }
.text-danger, .totals-value-negative {
    color: #dc2626;
}

/* ── Distance strip ──────────────────────────────────────────── */
.job-distance-strip {
    margin: 8px 0 4px;
}

#customerPropertyContainer a:not(.data-btn) {
    color: var(--primary-blue);
}

#customerPropertyContainer .job-distance-strip {
    margin-bottom: 22px;
}

.labor-entry {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.labor-entry:last-child {
    border-bottom: none;
}
.labor-meta {
    flex: 1;
    min-width: 0;
}
.labor-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.job-type-badge {
    display: flex;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
}
.job-type-badge svg {
    width: 14px;
    color: var(--primary-blue);
    transform: translateY(-2px);transform: translateY(-2px);
}
.labor-detail {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    margin-top: 2px;
}
.labor-detail .expense-receipt {
    color: var(--primary-blue) !important;
}
.labor-notes {
    font-size: 12px;
    color: #94A3B8;
    margin-top: 4px;
    font-style: italic;
}
.labor-cost-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 80px;
    flex-shrink: 0;
}
.labor-rate {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
}
.labor-add-rate {
    font-size: 12px;
    color: var(--primary, #3b82f6);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.labor-cost {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
}
.labor-totals {
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
.labor-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    color: var(--text-secondary, #64748b);
}
.labor-total-row.labor-total-final {
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    border-top: 1px solid var(--border-color, #e2e8f0);
    margin-top: 5px;
    padding-top: 12px;
}
.labor-total-duration {
    flex: 1;
    text-align: center;
    font-size: 12px;
}
.labor-total-cost {
    min-width: 80px;
    text-align: right;
}
.labor-missing-rate-notice {
    font-size: 11px;
    color: #f59e0b;
    margin-top: 8px;
    text-align: right;
}
/* ── KPI Cards ────────────────────────────────────────────── */
.metrics-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.metric-kpi-card {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 12px 14px;
}
.metric-kpi-label {
    color: var(--text-secondary, #64748b);
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.metric-kpi-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    line-height: 1.2;
}
.metric-positive { color: var(--status-active) !important; }
.metric-negative { color: var(--text-danger) !important; }
.metric-warning  { color: #f59e0b !important; }
 
/* ── Charts Row ───────────────────────────────────────────── */
.metrics-charts-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
    margin-bottom: 12px;
    align-items: start;
}
.metrics-chart-card {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 14px;
}
.metrics-chart-card-grow { flex: 1; }
.metrics-chart-card-full {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
}
.metrics-chart-title {
    color: var(--text-primary, #0f172a);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 12px;
}
 
/* ── Donut ────────────────────────────────────────────────── */
.metrics-donut-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 12px;
}
.metrics-donut-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}
.metrics-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}
.metrics-donut-pct {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
}
.metrics-donut-lbl {
    display: block;
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    margin-top: 2px;
}
.metrics-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.metrics-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-primary, #0f172a);
}
.metrics-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
 
/* ── Bars ─────────────────────────────────────────────────── */
.metrics-bars { display: flex; flex-direction: column; gap: 10px; }
.metrics-bar-row {
    display: grid;
    grid-template-columns: 120px 1fr 80px;
    align-items: center;
    gap: 10px;
}
.metrics-bar-label {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.metrics-bar-track {
    height: 20px;
    background: var(--border-color, #e2e8f0);
    border-radius: 4px;
    overflow: hidden;
}
.metrics-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 4px;
}
.metrics-bar-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    text-align: right;
}
.metrics-bar-duration {
    color: var(--text-primary, #0f172a);
    display: flex;
    gap: 16px;
    font-size: 12px;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    margin-top: 17px;
}
.metrics-bar-total {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    padding-top: 4px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
 
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .metrics-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .metrics-charts-row { grid-template-columns: 1fr; }
    .metrics-bar-row { grid-template-columns: 90px 1fr 70px; }
}

/* ── Schedule layout ─────────────────────────────────────── */

.schedule-page {
    background: #fff;
}

.schedule-layout {
    background: #fff;
    gap: 0;
    height: calc(100vh - 160px);
    min-height: 600px;
}

/* ── Filters ─────────────────────────────────────────────── */

.schedule-filters {
    display: flex;
    gap: 8px;
    padding: 0 0 12px;
    flex-wrap: wrap;
}

.filter-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #0f172a);
    cursor: pointer;
}

/* ── Header controls ─────────────────────────────────────── */

.schedule-view-switcher {
    display: flex;
    gap: 2px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.schedule-view-btn {
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    background: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary, #64748b);
    transition: all 0.15s;
}

.schedule-view-btn.active {
    color: var(--primary-blue);
    background: #fff;
    border: 1px solid var(--primary-blue);
    border-radius: 6px;
}

.schedule-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.btn-icon-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    cursor: pointer;
    color: var(--text-secondary, #64748b);
}

.btn-icon-sm:hover {
    background: var(--bg-secondary, #f8fafc);
}

.btn-sm {
    padding: 4px 12px 2px 12px;
    font-size: 13px;
}

/* ── Sidebar ─────────────────────────────────────────────── */

.schedule-sidebar {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    border-right: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary, #fff);
}

.schedule-sidebar-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    flex-shrink: 0;
}

.schedule-sidebar-tab {
    color: var(--text-primary);
    flex: 1;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: -1px;
}

.schedule-sidebar-tab.active {
    color: var(--primary, #3b82f6);
    border-bottom-color: var(--primary, #3b82f6);
}

.sidebar-count {
    background: var(--primary, #3b82f6);
    color: #fff;
    font-size: 10px;
    border-radius: 10px;
    padding: 0 5px;
    min-width: 16px;
    text-align: center;
}

.schedule-sidebar-panel {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.schedule-sidebar-panel.active {
    display: block;
}

.sidebar-empty {
    text-align: center;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
    padding: 24px 8px;
}

.sidebar-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-card {
    background: var(--border-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 8px !important;
    cursor: grab !important;
    transition: box-shadow 0.15s, transform 0.15s;
    user-select: none;
    transition: box-shadow 0.15s ease;
}

.sidebar-card:hover {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.4);
}

.sidebar-card:active {
    cursor: grabbing;
}

.sidebar-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-card-meta {
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Team legend ─────────────────────────────────────────── */

.schedule-sidebar-legend {
    border-top: 1px solid var(--border-color, #e2e8f0);
    padding: 10px;
    flex-shrink: 0;
}

.sidebar-legend-title {
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.sidebar-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-primary, #0f172a);
    margin-bottom: 4px;
}

.sidebar-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Calendar wrap ───────────────────────────────────────── */

.schedule-calendar-wrap {
    flex: 1;
    overflow: hidden;
    padding: 0;
}

#ryno-calendar {
    height: 100%;
}

/* ── FullCalendar overrides ──────────────────────────────── */

.fc .fc-timegrid-now-indicator-arrow{
    border-color: var(--status-active);
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-width: 5px 0px 5px 6px;
    left: 0px;
}

.fc-timegrid-now-indicator-line {
    border-color: var(--status-active) !important;
}

.fc {
    height: 100%;
    font-family: inherit;
}

.fc .fc-toolbar {
    display: none;
}

.fc .fc-day-today {
    background: transparent !important;
}

.fc .fc-col-header-cell {
    background: #fff;
    padding: 20px;
    border: unset;
}

.fc .fc-col-header-cell-cushion {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    padding: 6px 4px;
    text-decoration: none;
}

.fc .fc-timegrid-axis-cushion,
.fc-timegrid-axis {
    font-size: 12px;
    border: unset !important;
}

.fc .fc-timegrid-slot {
    height: 40px;
}

.fc .fc-timegrid-slot-label-cushion {
    font-size: 12px;
    color: var(--text-secondary, #94a3b8);
}

.fc .fc-timeline-slot {
    border-color: var(--border-color, #e2e8f0);
}

.fc .fc-timegrid-now-indicator-line {
    border-color: #ef4444;
    display: none !important;
}

/* Drag-select highlight color */
.fc .fc-highlight {
    background-color: #3b82f6 !important;
    opacity: 0.15 !important;
}

/* ── FC events ───────────────────────────────────────────── */

.fc-event {
    border-radius: 4px;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.fc-daygrid-event.fc-event {
    color: #fff;
    background-color: var(--primary-blue);
}

.fc-timegrid-event-harness {
    overflow: hidden;
}

.fc .fc-daygrid-event-harness .fc-event {
    opacity: 1;
}
/*
.fc .fc-event:hover {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.4);
}
*/
.fc-event-inner {
    padding: 1px 0;
}

.fc-event-title {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-event-meta {
    font-size: 10px;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-event-type {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/* Completed — faded + strikethrough */
.fc-event.event-completed {
    opacity: 0.45 !important;
}

.fc-event.event-completed .fc-event-title {
    text-decoration: line-through;
}

/* On hold — amber background, dark text */
.fc-event.event-on-hold {
    background-color: #FEF3C7 !important;
    border-color: #FEF3C7 !important;
    background-image: none !important;
}

.fc-event.event-on-hold .fc-event-title,
.fc-event.event-on-hold .fc-event-meta {
    color: #92400E;
}

.fc-daygrid-event.fc-event.event-on-hold {
    background-color: #FEF3C7 !important;
}

.fc-event.event-overdue {
    border-left: 3px solid #ef4444 !important;
}

/* Preview event block (shown while create modal is open) */
.ryno-preview-event {
    opacity: 1 !important;
    pointer-events: all !important;
}

.ryno-preview-event .fc-event-inner {
    opacity: 0.9;
}

/* ── Create modal — no overlay wrapper, fixed directly ───── */

#create-modal-inner {
    display: none;
    position: fixed;
    z-index: 1050;
    top: 80px;
    right: 40px;
    width: 415px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 120px);
    background: var(--bg-primary, #fff);
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.96) translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: all;
}

#create-modal-inner.is-open {
    display: flex;
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ── Detail modal — keeps full-screen overlay wrapper ──────── */

.sched-modal {
    position: fixed;
    z-index: 1050;
    pointer-events: none;
    inset: 0;
    display: none;
}

.sched-modal.is-open {
    pointer-events: all;
    display: block;
}

.sched-modal-inner {
    position: absolute;
    top: 80px;
    right: 40px;
    width: 415px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 120px);
    background: var(--bg-primary, #fff);
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.96) translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: all;
}

.sched-modal.is-open .sched-modal-inner {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ── Shared modal parts ──────────────────────────────────── */

.sched-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    cursor: move;
    user-select: none;
    flex-shrink: 0;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 10px 10px 0 0;
}

.sched-modal-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}

.sched-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #64748b);
    padding: 2px;
    border-radius: 4px;
    line-height: 1;
}

.sched-modal-close:hover {
    background: var(--border-color, #e2e8f0);
}

.sched-modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    padding: 0 16px;
    flex-shrink: 0;
}

.sched-modal-tab {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: var(--text-secondary, #64748b);
    margin-bottom: -1px;
}

.sched-modal-tab.active {
    color: var(--primary, #3b82f6);
    border-bottom-color: var(--primary, #3b82f6);
}

.sched-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    position: relative;
}

.sched-modal-body .sb-new-customer {
    text-align: right;
}

.sched-modal-body .sb-new-customer .create-new {
    position: relative;
    top: -8px;
}

.sched-modal-body .create-new-property {
    margin-bottom: 10px;
}

.sched-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-top: 15px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.sched-form {
    display: none;
}

.sched-form.active {
    display: block;
}

.panel-more-link {
    font-size: 12px;
    color: var(--primary, #3b82f6);
    text-decoration: none;
}

.panel-more-link:hover {
    text-decoration: underline;
}

#qc-team-picker {
    margin-bottom: 5px;
}

.btn-modal {
    color: var(--primary-blue);
    background: #fff;
    padding: 5px 12px 2px 26px;
}

.btn-modal::before {
    font-size: 20px;
    top: 16px;
    left: 8px;
}

.qc-btn-container {
    margin-bottom: 10px;
}

/* ── Detail modal content ────────────────────────────────── */

.sched-detail-loading {
    text-align: center;
    color: var(--text-secondary);
    padding: 24px;
    font-size: 13px;
}

.sched-detail-section {
    margin-bottom: 16px;
}

.sched-detail-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

.sched-detail-value {
    font-size: 13px;
    color: var(--text-primary, #0f172a);
}

.sched-detail-value a {
    color: var(--primary, #3b82f6);
    text-decoration: none;
}

.sched-detail-value a:hover {
    text-decoration: underline;
}

.sched-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.sched-detail-chip {
    color: var(--primary-dark) !important;
    background: #94A3B880 !important;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 6px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

/* ── Line items ──────────────────────────────────────────── */

.sched-line-items {
    margin-top: 4px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.sched-line-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.sched-line-item:last-child {
    border-bottom: none;
    border-top: none;
    padding-top: 8px;
}

.sched-line-item-name {
    color: var(--text-primary, #0f172a);
}

.sched-line-item-price {
    color: var(--text-secondary, #64748b);
    font-weight: 500;
}

.sched-line-item-total {
    border-top: 2px solid var(--border-color, #e2e8f0);
    margin-top: 2px;
    padding-top: 4px;
}

.sched-line-item-total .sched-line-item-price {
    color: var(--primary-dark);
}

/* ── Quick line items (create modal) ─────────────────────── */

.quick-line-items {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    min-height: 40px;
    padding: 6px;
}

.quick-line-items-empty {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    text-align: center;
    padding: 8px;
}

.quick-line-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    font-size: 12px;
    border-radius: 4px;
}

.quick-line-item-row:hover {
    background: var(--border-color, #e2e8f0);
}

.quick-line-item-name {
    color: var(--text-primary, #0f172a);
    font-weight: 500;
}

.quick-line-item-price {
    color: var(--text-secondary, #64748b);
}

/* ── Customer search dropdown ────────────────────────────── */

.customer-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 200;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}

.customer-search-results.is-open {
    display: block;
}

.customer-result-item {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-primary, #0f172a);
}

.customer-result-item:hover {
    background: var(--bg-secondary, #f8fafc);
}

/* ── FAB (mobile) ────────────────────────────────────────── */

.schedule-fab {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary, #3b82f6);
    color: #fff;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
    z-index: 900;
    transition: transform 0.15s, box-shadow 0.15s;
}

.schedule-fab:active {
    transform: scale(0.93);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* ── Type toggle (Job | Assessment) ─────────────────────── */

.sched-type-toggle {
    display: flex;
    position: relative;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    padding: 0 16px;
    flex-shrink: 0;
}

.sched-type-btn {
    flex: 1;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #64748b);
    position: relative;
    z-index: 1;
    transition: color 0.2s ease;
}

.sched-type-btn.active {
    color: var(--primary, #3b82f6);
}

.sched-type-indicator {
    position: absolute;
    bottom: -1px;
    left: 16px;
    height: 2px;
    background: var(--primary, #3b82f6);
    border-radius: 2px 2px 0 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Mobile overrides ────────────────────────────────────── */

@media (max-width: 768px) {

    .schedule-sidebar {
        display: none;
    }

    .schedule-panel-content {
        width: 100vw;
    }

    .schedule-filters {
        gap: 6px;
    }

    .filter-select {
        font-size: 12px;
        padding: 5px 8px;
    }

    /* Bottom sheet style for schedule modals on mobile */
    #create-modal-inner,
    .sched-modal-inner {
        top: 10px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 10px) !important;
        border-radius: 16px 16px 0 0 !important;
        overscroll-behavior: contain;
    }

    .sched-modal-header {
        cursor: grab;
        touch-action: none;
        user-select: none;
    }

    .schedule-fab {
        display: flex;
    }

}

/* ── Bottom Sheet — app popups on mobile/tablet (≤ 1024px) ── */

@media (max-width: 1024px) {

    .popup .popup-overlay {
        background: rgba(0, 0, 0, 0.4);
    }

    .popup .popup-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: 10px;
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 10px);
        border-radius: 16px 16px 0 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        margin: 0;
        transform: translateY(100%);
    }

    .popup.is-active .popup-container {
        transform: translateY(0);
    }

    .bs-handle {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 14px 0 6px;
        cursor: grab;
        flex-shrink: 0;
        margin: 0 -16px;
        touch-action: none;
    }

    .bs-handle-pill {
        display: block;
        width: 36px;
        height: 4px;
        background: var(--border-color, #e2e8f0);
        border-radius: 2px;
        position: relative;
    }
    
    .popup-container .bs-handle-pill {
        top: 10px;
    }
    
    #create-modal-inner .bs-handle-pill {
        top: 10px;
    }

    .bs-handle:active .bs-handle-pill {
        background: var(--text-secondary, #94a3b8);
    }

    .popup-title {
        cursor: grab;
        touch-action: none;
        user-select: none;
    }

    .popup-body,
    .popup-container > form {
        overscroll-behavior: contain;
    }

}

@media (min-width: 1025px) {
    .bs-handle {
        display: none;
    }
}

/* ── Quick create modal — line items list ────────────────── */

.qc-line-items-list {
    margin: 10px 0 10px 0;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.qc-line-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-primary, #fff);
}

.qc-line-item:last-child {
    border-bottom: none;
}

.qc-line-item-info {
    flex: 1;
    min-width: 0;
}

.qc-line-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qc-line-item-desc {
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qc-line-item-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    margin-top: 3px;
}

.qc-line-item-total {
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}

.qc-line-item-delete {
    color: var(--text-danger);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    flex-shrink: 0;
    border-radius: 4px;
    line-height: 1;
    margin-top: 1px;
}

.sched-line-item-desc,
.qc-line-item-desc {
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.qc-line-item.qc-line-item-subtotal {
    background: var(--bg-secondary, #f8fafc);
    border-top: 1px solid var(--border-color, #e2e8f0);
    border-bottom: none;
}

.qc-line-item-subtotal .qc-line-item-name {
    font-weight: 600;
}

.qc-line-item-subtotal-amount {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    white-space: nowrap;
}

#instructions {
    display: none;
    margin-top: 8px;
}

#instructions.active {
    display: block;
}

.sched-detail-edit-trigger {
    font-size: 11px;
    font-weight: 500;
    color: var(--primary, #3b82f6);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}
.sched-detail-edit-trigger:hover {
    background: var(--bg-secondary, #f8fafc);
}
.sched-team-edit {
    margin-top: 8px;
    padding: 10px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 6px;
    border: 1px solid var(--border-color, #e2e8f0);
}

.fc-event-member-dots {
    display: flex;
    gap: 3px;
    margin-top: 3px;
    flex-wrap: wrap;
}

.fc-event-member-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.4);
    flex-shrink: 0;
}

/* ── Job Type Toggle ─────────────────────────────────────────── */

.job-type-toggle-wrap {
    margin-bottom: 16px;
}

/* ── Generate Visits Bar ─────────────────────────────────────── */

.generate-visits-bar {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--border-radius, 8px);
    padding: 16px;
    margin-bottom: 20px;
}

.generate-visits-fields {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.generate-visits-fields .form-control {
    flex: 1;
    min-width: 120px;
    margin-bottom: 0;
}

.generate-visits-fields .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.form-helper-text {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    margin-top: 8px;
    margin-bottom: 0;
}

/* ── Visit Row ───────────────────────────────────────────────── */

.visit-row {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--border-radius, 8px);
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: border-color 0.15s;
}

.visit-row:hover {
    border-color: var(--primary, #3b82f6);
}

.visit-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.visit-row-label {
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 600;
}

.visit-row-remove {
    color: var(--text-danger);
    background: none;
    width: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}

.visit-row-remove:hover {
    background: var(#fef2f2);
}

.visit-row-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.visit-row-fields .form-control {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .visit-row-fields {
        grid-template-columns: 1fr 1fr;
    }

    .visit-date-field {
        grid-column: 1 / -1;
    }

    .generate-visits-fields .form-control {
        min-width: 100%;
    }
}

/* ── Visit Repeater Actions ──────────────────────────────────── */

.visit-repeater-actions {
    margin-top: 15px;
    margin-bottom: 20px;
}

/* ── Visit row team picker ───────────────────────────────────── */

.visit-row-team {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.visit-row .visit-row-team {
    border-top: none;
}

.visit-row-team .form-field-info {
    margin-bottom: 8px;
    margin-top: 0;
}

.visit-team-picker .team-picker-dropdown {
    max-height: 200px;
    overflow-y: auto;
}

/* ── Bulk add form footer ────────────────────────────────────── */

.generate-visits-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.generate-visits-footer .form-helper-text {
    margin: 0;
    flex: 1;
    min-width: 200px;
}

/* ── Visit row remove button sizing ─────────────────────────── */
.visit-row-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
}
 
.visit-row-remove .size-6 {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
 
/* ── Schedule sidebar — per-visit breakdown ─────────────────── */
 
.visit-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
 
.visit-schedule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
 
.visit-schedule-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
 
.visit-schedule-date {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
}
 
.visit-date-completed {
    color: var(--status-active);
    text-decoration: line-through;
}
 
.visit-schedule-time {
    font-size: 12px;
    color: var(--text-secondary);
}
 
.visit-schedule-team {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
 
.visit-member-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    cursor: default;
    flex-shrink: 0;
}

/* ── Visits module ───────────────────────────────────────────── */
 
.visits-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 6px;
}
 
.visits-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}

.visits-list .visit-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.15s;
}

.visits-list .visit-row.visit-completed {
    background: #1586612e;
    border: 1px solid #15866140;
}

.visits-list .visit-row.visit-completed .cat-box input[type="checkbox"]:checked {
    background: var(--status-active);
    border-color: var(--status-active);
}

.visit-row:hover {
    background: var(--bg-hover, #f8fafc);
}
 
.visit-row.visit-completed .visit-row-date {
    text-decoration: line-through;
    color: var(--text-secondary);
}
 
.visit-row-check {
    flex-shrink: 0;
}
 
.visit-row-info {
    min-width: 0;
    flex: 1;
    padding: 20px 0;
}
 
.visit-row-date {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
}
 
.visit-row-time {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 1px;
}
 
.visit-row-team {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

#visits-repeater .visit-row-team {
    display: block;
}
 
/* ── Visit popup ─────────────────────────────────────────────── */
 
.visit-popup-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
 
@media (max-width: 600px) {
    .visit-popup-header {
        grid-template-columns: 1fr;
    }
}
 
.visit-customer-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
}
 
.visit-customer-address {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 2px;
}
 
.visit-popup-meta .data-details {
    margin-bottom: 6px;
}
 
.visit-popup-section {
    margin-bottom: 20px;
}
 
.visit-popup-section:last-of-type {
    border-bottom: none;
}

.popup-line-items {
    padding: 20px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.true-cost-visit-section {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 15px;
}

.true-cost-visit-header {
    color: var(--primary-dark);
    background: #e7e7f5;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding: 13px 10px 10px 10px;
    border-radius: var(--border-radius);
}

.true-cost-restore-btn {
    color: var(--primary-blue);
}

#true-cost-totals {
    margin-bottom: 20px;
}
 
.visit-popup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
 
/* ── Visit line items — view mode ────────────────────────────── */
 
.visit-items-view-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
 
.visit-item-view-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}
 
.visit-item-view-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
}
 
.visit-item-view-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}
 
.visit-item-view-qty {
    font-size: 13px;
    color: var(--text-primary);
    flex-shrink: 0;
}
 
/* ── Visit line items — edit mode ────────────────────────────── */
 
.visit-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
 
.visit-item-row:last-child {
    border-bottom: none;
}
 
.visit-item-remove {
    color: var(--text-danger);
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}
 
.visit-item-remove:hover {
    color: #dc2626;
}
 
.visit-item-remove .size-6 {
    width: 18px;
    height: 18px;
}
 
.visit-item-name {
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

.visit-item-financials {
    color: var(--text-primary);
    font-size: 12px;
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.visit-popup-totals {
    background: var(--border-color);
    padding: 20px;
    border-radius: 0 0 10px 10px;
    margin-top: 10px;
    text-align: right;
}

.visit-popup-total-row {
    color: var(--text-dark);
    max-width: 50%;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    margin-left: auto;
}

.visit-popup-totals div:nth-child(1) {
    border-bottom: 1px solid var(--form-border);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.visit-popup-totals div:nth-child(2) {
    font-weight: 600;
}
 
.visit-item-qty-edit {
    width: 60px;
    flex-shrink: 0;
}

.visit-item-qty-edit .visit-qty-input {
    padding: 8px 5px 3px 5px !important;
}

.visit-qty-input {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
}
 
.visit-qty-input:focus {
    outline: none;
    border-color: var(--primary-blue);
}
 
/* ── New item rows in edit mode ──────────────────────────────── */
 
.visit-new-item-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
 
.visit-new-item-fields {
    flex: 1;
}
 
.visit-new-item-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px;
    margin-top: 8px;
    display: flex;
    align-items: center;
}
 
.visit-new-item-remove:hover { color: #dc2626; }
.visit-new-item-remove .size-6 { width: 18px; height: 18px; }
 
.form-3-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

/* ── Visit row remove button sizing ─────────────────────────── */
/* Already have .visit-row-remove but missing these overrides */
.visit-row-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
}

.visit-row-remove .size-6 {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── Visit qty modified highlight ────────────────────────────── */
.visit-qty-input.visit-qty-modified {
    border-color: #f59e0b;
    background: #fffbeb;
}

/* ── View mode badges ─────────────────────────────────────────── */
/*
.visit-qty-badge-modified {
    color: #f59e0b;
}
*/
.visit-qty-modified-label {
    font-size: 11px;
    margin-left: 2px;
    opacity: 0.7;
}

.visit-item-added-badge, .true-cost-removed-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px 0 6px;
    border-radius: 10px;
    vertical-align: middle;
}

.true-cost-item-removed .visit-item-name,
.true-cost-item-removed .visit-item-view-name,
.true-cost-item-removed .visit-item-desc,
.true-cost-item-removed .visit-item-view-desc {
    color: rgba(0,0,0,.3);
}

.visit-item-added-badge {
    color: #1d4ed8;
    background: #dbeafe;
    margin-left: 6px;
}

.true-cost-removed-label {
    color: #EF4444;
    background: #DC262624;
}

.visit-item-restore-btn {
    color: var(--primary-blue);
}

/* ── New item template rows ───────────────────────────────────── */
#visit-new-items .services-container {
    margin-bottom: 12px;
    padding: 42px 12px 12px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--bg-muted, #f8fafc);
}

/* ── Items header ─────────────────────────────────────────────── */
.visit-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.visit-items-header .form-title {
    margin-bottom: 0;
}

/* ── Visit item name col ──────────────────────────────────────── */
.visit-item-name-col {
    flex: 1;
    min-width: 0;
}

.visit-item-desc {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 2px;
}

/* ── Footer button group ─────────────────────────────────────── */
.visit-popup-footer .btn-group {
    display: flex;
    gap: 8px;
}

.visit-item-view-uom {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: right;
}

/* ── Overview visit metadata ─────────────────────────────────── */
 
.visit-overview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    align-items: center;
}
 
.visit-date-link {
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 11px;
}
 
.visit-date-link:hover {
    text-decoration: underline;
}
 
.visit-dates-toggle {
    color: var(--primary-blue);
    cursor: pointer;
    font-size: 11px;
}
 
.visit-dates-toggle:hover {
    text-decoration: underline;
}
 
.visit-overview-totals-note {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    font-size: 12px;
    color: var(--text-secondary);
}
 
.visit-overview-totals-note .size-6 {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Visit popup section titles (Services / Materials) ───────── */
.visit-items-section-title {
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 8px 0 4px;
    margin-top: 8px;
}
 
.visit-items-section-title:first-child {
    margin-top: 0;
    border-top: none;
}

.visit-qty-modified-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px 0 6px;
    border-radius: 10px;
    background: #fef3c7;
    color: #d97706;
    margin-left: 6px;
    vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────
   Line Item Repeater — Mobile Accordion
   Add these styles to your main CSS file
   ───────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
    .line-item-summary {
        display: none;
    }
}
@media (max-width: 1023px) {

    /* Collapsed state — hides all rows except drag handle and summary */
    .services-container.li-collapsed .services-row,
    .services-container.li-collapsed .delete-item {
        display: none !important;
    }

    /* Summary row — shown when collapsed */
    .line-item-summary {
        padding: 12px 8px;
        cursor: pointer;
        user-select: none;
    }

    .line-item-summary-name {
        font-weight: 500;
        font-size: 0.95rem;
        color: var(--text-primary);
        margin-bottom: 4px;
    }

    .line-item-summary-meta {
        color: var(--text-secondary);
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        font-size: 0.8rem;
    }

    .line-item-summary-meta span {
        white-space: nowrap;
    }

    /* Collapsed container visual */
    .services-container.li-collapsed {
        background: var(--bg-secondary, #f8f9fb);
        border-radius: 8px;
        margin-bottom: 8px;
    }

    /* Drag handle stays visible in collapsed state */
    .services-container.li-collapsed .drag-handle {
        display: flex !important;
        align-self: center;
        padding: 12px 8px;
    }

    /* Keep expanded row looking normal */
    .services-container:not(.li-collapsed) {
        margin-bottom: 16px;
    }
    .line-item-summary-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .line-item-summary-chevron {
        width: 18px;
        height: 18px;
        color: var(--text-muted);
        flex-shrink: 0;
    }
    .li-collapse-btn {
        width: 100%;
        max-width: 160px;
        color: var(--primary-dark);
        display: flex;
        align-items: center;
        padding: 8px;
        background: none;
        border: none;
        position: absolute;
        top: 0;
        left: 38px;
        cursor: pointer;
    }
    .li-collapse-btn svg {
        width: 26px;
    }
    .services-container.li-collapsed .li-collapse-btn {
        display: none !important;
    }
}

@media (max-width: 1200px) {
    .col-2-workflow {
        display: flex;
        flex-direction: column;
    }
    .work-order-view .data-container {
        width: 100%;
    }
    .work-order-view .col-2-left-wf,
    .work-order-view .col-2-right-wf {
        display: contents;
    }
    /* jobs */
    .job-view .wf-right-1      { order: 1;  } /* Timeline */
    .job-view .wf-left-1       { order: 2;  } /* Map */
    .job-view .wf-left-2       { order: 3;  } /* Customer/Property */
    .job-view .wf-left-3       { order: 4;  } /* Schedule */
    .job-view .wf-right-2, .job-view #line-items-edit-section      { order: 5;  } /* Line Items */
    .job-view .wf-right-visits { order: 6;  } /* Visits */
    .job-view .wf-right-7      { order: 7;  } /* Notes */
    .job-view .wf-left-5      { order: 8;  } /* Attachments */
    .job-view .wf-right-3      { order: 9;  } /* Labor */
    .job-view .wf-right-4      { order: 10; } /* Expenses */
    .job-view .wf-right-5      { order: 11; } /* Payments */
    .job-view .wf-left-4       { order: 12; } /* Job Details */
    .job-view .wf-right-6      { order: 13; } /* Job Metrics */
    .job-view .wf-right-8      { order: 14; } /* Activity */
    .job-view .data-container {
        width: 100%;
    }
    
    .page-estimate-view #customerPropertyContainer { order: 1; }
    .page-estimate-view #scheduleContainer { order: 2; }
    .page-estimate-view #line-items-view-section, .page-estimate-view #line-items-edit-section { order: 3; }
    .page-estimate-view #noteSection { order: 4; }
    .page-estimate-view #internalAttachments { order: 5; }
    .page-estimate-view #introContainer { order: 6; }
    .page-estimate-view #estimateDetails { order: 7; }
    .page-estimate-view #contractContainer { order: 8; }
    .page-estimate-view #activity { order: 9; }
}

/* ── Step Indicator ─────────────────────────────────── */
.step-indicator {
    width: 100%;
    max-width: 800px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 24px 0 32px;
    margin: 0 auto;
}

.step-indicator-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

.step-number {
    color: var(--primary-blue);
    background: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    border: 2px solid var(--primary-blue);
    padding-top: 4px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.step-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    font-weight: 400;
    transition: color 0.2s;
}

.step-indicator-item.active .step-number {
    background: var(--primary-blue, #1e5fd4);
    border-color: var(--primary-blue, #1e5fd4);
    color: #fff;
}

.step-indicator-item.active .step-label {
    color: var(--color-text-primary);
    font-weight: 500;
}

.step-indicator-item.completed .step-number {
    background: var(--primary-blue, #1e5fd4);
    border-color: var(--primary-blue, #1e5fd4);
    color: #fff;
}

.step-indicator-divider {
    width: 35%;
    height: 1px;
    background: var(--form-border);
    margin: 0 8px;
    margin-bottom: 28px;
    flex-shrink: 0;
}

.form-module .form-control label {
    top: 45%;
}

.wf-single-container .form-module .btn {
    color: var(--primary-blue);
    background: #fff;
    width: 100%;
    border: 1px solid var(--primary-blue);
    text-align: center;
    padding: 13px 0px;
}

.wf-single-container .form-footer {
    text-align: center;
    margin-top: 40px;
    border-top: 1px solid var(--border-color);
    padding: 40px 0 20px 0;
}

/* ── Job Selection Table ─────────────────────────────── */
.job-select-header,
.job-select-row {
    display: grid;
    grid-template-columns: 0 1fr 240px 140px 140px 100px;
    align-items: center;
    gap: 25px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.job-select-header {
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 8px;
    padding-right: 20px;
    border-bottom: 3px solid var(--border-color);
}

.job-select-row {
    cursor: pointer;
    transition: background 0.15s;
    border-radius: var(--border-radius-md);
    padding: 12px 20px 12px 22px;
}

.job-select-row:last-child {
    border-bottom: none;
}

.job-select-row:hover,
.job-select-row:has(.job-checkbox:checked) {
    background: #D9DFFFA3;
}

.job-select-row:has(.job-checkbox:checked) {
    border-color: #2563EB40;    
}

.job-select-title {
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 500;
    margin-left: 10px;
}

.job-select-number {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
    margin-left: 10px;
}

.job-select-address, .job-select-date {
    font-size: 13px;
}

.job-select-amount {
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 500;
}

.job-select-mods-notice {
    font-size: 11px;
    color: var(--text-warning);
    margin-top: 2px;
}

.text-right {
    text-align: right;
}

.job-summary-row {
    color: var(--primary-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 8px;
}

.customer-group {
    background: var(--bg-primary, #fff);
    width: max-content;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.jobs-group {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.jobs-group .form-title {
    background: var(--bg-primary, #fff);
    border-bottom: 1px solid var(--border-color);
    padding: 20px 20px 15px 20px;
}  

.data-label {
    color: var(--primary-dark);
    font-size: 15px;
}

.payment-note-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: var(--color-text-muted);
    margin-left: 4px;
}

.payment-note-tooltip svg {
    color: var(--primary-blue);
    width: 18px;
    height: 18px;
}

.payment-note-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-gray-900, #111827);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: pre-wrap;
    max-width: 220px;
    width: max-content;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 100;
}

.payment-note-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--color-gray-900, #111827);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 100;
}

.payment-note-tooltip:hover::after,
.payment-note-tooltip:hover::before {
    opacity: 1;
}

#invoice-qr-code img {
    margin: auto;
}

.copy-link-field {
    margin-top: 30px;
}
#invoice-public-link {
    padding-right: 64px;
}
.copy-link-field #copy-invoice-link {
    background: var(--bg-light-gery);
    padding: 13px;
    position: absolute;
    top: .16rem;
    right: .16rem;
    line-height: 0;
    border-radius: var(--border-radius);
}
.copy-link-field #copy-invoice-link svg {
    width: 20px;
}

.team-member-card {
    background: #fff;
}
.avatar-placeholder, .avatar-placeholder img, .title-avatar {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
}

.avatar-placeholder, .avatar-placeholder img {
    background: #F1F5F9;
    width: 60px;
    height: 60px;
}

.team-member-initials, .title-avatar-placeholder, .title-avatar {
    color: #fff;
}

.title-avatar {
    width: 40px;
    height: 40px;
    font-size: 17px;
}

.avatar-placeholder.user-pending .team-member-initials {
    color: var(--text-primary);
}

.upload-form-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.avatar-placeholder.active-indicator {
    box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--status-active);
}

.team-member-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.team-member-info-row + .team-member-info-row {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    margin-top: 6px;
}

.team-member-card .card-options {
    position: absolute;
    top: 2px;
    right: 8px;
}

.team-member-card .card-menu {
    top: 40px;
    right: 10px;
}

.team-owner {
    color: #AF5400;
}
#invite-user-popup .form-field-info {
    color: var(--primary-dark);
}
#invite-user-popup .segmented-control {
    width: 320px;
}
.team-color-picker {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.team-color-picker span, .color-swatch-display {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    display: block;
}
.team-color-picker {
    cursor: pointer;
}
.color-taken {
    position: relative;
    opacity: 0.5;
    cursor: not-allowed;
    outline: 2px solid #dc2626;
    outline-offset: 1px;
}

.color-taken::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -2px;
    right: -2px;
    height: 2px;
    background: #dc2626;
    transform: rotate(-45deg);
    pointer-events: none;
}
.team-color-picker span.active {
    box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--primary-blue);
}
.popup .form-section-highlight {
    margin-top: 0;
}

/* ── Settings layout ─────────────────────────────────────────── */
.settings-page .col-2-left-wf {
    width: 210px;
    flex-shrink: 0;
}

.settings-sidebar-title {
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-nav-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.settings-nav-item {
    display: block;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.settings-nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.settings-nav-item.active {
    color: var(--primary-blue);
    background: var(--primary-light);
    font-weight: 500;
}

/* ── Settings content ────────────────────────────────────────── */
.settings-content {
    flex: 1;
    min-width: 0;
}

.settings-section {
    padding: 24px 0;
}

.settings-section:first-child {
    padding-top: 0;
}

.settings-section-header {
    margin-bottom: 20px;
}

.settings-section-title {
    color: var(--primary-dark);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.settings-section-desc {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

.settings-save-row {
    margin-top: 16px;
}

.settings-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0 0;
}

/* ── Connect status ──────────────────────────────────────────── */
.connect-status-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
 
.connect-status-icon {
    flex-shrink: 0;
    margin-top: 2px;
}
 
.connect-status-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 20px;
}
 
.connect-status-text strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
 
.connect-status-text span {
    color: #94A3B8;
    font-size: 13px;
}
 
.connect-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Notification cards ──────────────────────────────────────── */
.notifications-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}
 
.notifications-section-title {
    color: var(--primary-dark);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
 
.notification-card {
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 10px;
    margin-top: 12px;
    margin-bottom: 12px;
}
 
.notification-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
 
.notification-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-dark);
}
 
.notification-preview-subject {
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
 
.notification-preview-body {
    font-size: 13px;
    line-height: 1.5;
}

.notif-view-panel {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
}
 
/* ── View / Edit tabs ────────────────────────────────────────── */
.notification-view-tabs,
.notification-edit-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.notif-view-tab,
.notif-edit-tab {
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    background: transparent;
}

.notif-view-tab:hover,
.notif-edit-tab:hover {
    color: var(--text-primary);
}

.notif-view-tab.active,
.notif-edit-tab.active {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
    font-weight: 600;
}

.notification-edit {
    border: 1px solid var(--primary-blue);
    border-radius: var(--border-radius);
    padding: 10px;
}
 
/* ── Compose box (Jobber style) ──────────────────────────────── */
.notification-compose-box {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 12px;
}
 
.notification-compose-subject {
    border-bottom: 1px solid var(--border-color);
    padding: 10px 14px;
    background: var(--bg-white);
}
 
.notification-compose-subject input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--text-primary);
    background: transparent;
    font-family: inherit;
}
 
.notification-compose-subject input::placeholder {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
 
.notification-compose-body {
    padding: 10px 14px;
    background: var(--bg-white);
}
 
.notification-compose-body textarea {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--text-primary);
    background: transparent;
    font-family: inherit;
    resize: vertical;
    line-height: 1.6;
}
 
/* ── Variables ───────────────────────────────────────────────── */
.notif-vars {
    margin-bottom: 25px;
}
 
.notif-vars-label {
    font-size: 14px;
    margin-bottom: 8px;
}
 
.notif-vars-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
 
.notif-var-chip {
    color: #fff;
    background: var(--primary-dark);
    font-weight: 500;
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 20px;
    font-family: monospace;
    transition: background 0.15s, color 0.15s;
    user-select: none;
    cursor: pointer;
}
 
/* ── Preview modal ───────────────────────────────────────────── */
.notif-preview-email {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}
 
.notif-preview-email-subject {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-light);
    display: flex;
    gap: 10px;
    align-items: baseline;
}
 
.notif-preview-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    flex-shrink: 0;
}
 
.notif-preview-email-body {
    padding: 0 16px 20px 16px;
    font-size: 14px;
    line-height: 1.7;
    white-space: preserve-breaks;
    text-align: left;
}
 
.notif-preview-sms {
    padding: 20px;
    display: flex;
    justify-content: flex-start;
}
 
.sms-bubble {
    background: var(--bg-hover);
    border-radius: 16px 16px 16px 4px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.6;
    max-width: 80%;
}

/* ── Branding ────────────────────────────────────────────────── */

.sample-data {
    width: 100%;
    cursor: pointer;
}

.sample-data svg {
    background: #eff6ff;
    width: 100px;
    height: 100px;
    padding: 20px;
    border-radius: 100%;
}

.center-col {
    text-align: center;
    height: 100%;
    align-items: center;
}

.sample-container {
    position: relative;
}

#logoDropzone {
    padding: 20px !important;
}

.logo-dropzone-meta {
    color: #94A3B8;
    font-size: 0.75rem;
}

.logo-upload-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}
 
.logo-preview-existing {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-light);
}
 
.logo-preview-img-wrap {
    flex: 1;
    min-width: 0;
}
 
.logo-preview-img-wrap img {
    max-height: 60px;
    max-width: 200px;
    object-fit: contain;
    display: block;
}
 
.btn-icon-danger {
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.btn-icon-danger:hover {
    color: rgba(239, 68, 68, 0.85);
    background: #fef2f2;
}
 
.btn-icon-danger svg {
    width: 18px;
    height: 18px;
}
 
.branding-preview-layout {
    align-items: flex-start;
}
 
.branding-color-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
 
.branding-color-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}
 
.branding-color-picker-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
 
.branding-color-swatch {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid var(--border-color);
    transition: border-color 0.15s;
    flex-shrink: 0;
}
 
.branding-color-swatch:hover {
    border-color: var(--primary);
}
 
.branding-color-hex {
    font-size: 13px;
    color: var(--text-muted);
    font-family: monospace;
    cursor: pointer;
}
 
.branding-email-preview, .branding-preview-layout .app-form {
    min-width: 0;
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: var(--border-radius);
}
 
.branding-preview-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 10px;
}
 
.branding-email-mock {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    font-size: 13px;
}
 
.branding-email-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
 
.branding-preview-logo {
    max-width: 100px;
    object-fit: contain;
    display: block;
}
 
.branding-email-body {
    padding: 20px;
    background: var(--bg-white);
    color: var(--text-primary);
    line-height: 1.6;
}
 
.branding-email-body p {
    margin: 0 0 10px;
}
 
.branding-preview-cta {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 6px;
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    margin: 8px 0;
    transition: background 0.2s ease;
}
 
.branding-email-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    text-align: center;
}

@media (max-width: 1200px) {
    .settings-page .col-2-workflow {
        flex-direction: column;
    }

    .settings-page .col-2-left-wf {
        width: 100%;
    }
    
    .settings-sidebar {
        padding-bottom: 12px;
    }

    .settings-nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

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

    .settings-nav-group {
        flex-direction: row;
        gap: 4px;
        flex-shrink: 0;
    }

    .settings-nav-label {
        display: none;
    }

    .settings-nav-item {
        white-space: nowrap;
        flex-shrink: 0;
        background: var(--bg-hover);
        border-radius: 20px;
        font-size: 13px;
        padding: 6px 14px;
    }

    .settings-sidebar-title {
        display: none;
    }

    .settings-fields {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .form-2-col-mobile-full {
        display: block;
    }
    .logo-uploader-container {
      max-width: unset;
    }
    .logo-preview-existing {
        margin-bottom: 20px;
    }
    .branding-email-preview {
        margin-top: 20px;
    }
}