/* =============================================================================
   VARIABLES
============================================================================= */

:root {
    --gold: #C9A84C;
    --gold-light: #E8C97A;
    --dark: #0D0D0D;
    --dark2: #141414;
    --dark3: #1C1C1C;
    --border: rgba(201,168,76,0.18);
    --text: #E8E2D9;
    --muted: #6A6258;
}


/* =============================================================================
   BASE
============================================================================= */

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    background: var(--dark);
    color: var(--text);
    font-family: 'Jost', sans-serif;
    opacity: 0;
    transition: opacity .25s ease-in-out;
}

    body.loaded {
        opacity: 1;
    }

h2, h3, h4 {
    color: var(--gold);
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: .1em;
}

.manage-nav ~ * h2,
.manage-nav ~ * h4 {
    color: var(--text);
}

hr {
    border-color: var(--border);
    opacity: 1;
}

::selection {
    background: rgba(201,168,76,0.3);
    color: var(--text);
}


/* =============================================================================
   LINKS
============================================================================= */

a,
a:link,
a:visited {
    color: var(--gold) !important;
    text-decoration: none;
}

    a:hover,
    a:focus,
    a:active {
        color: var(--gold-light) !important;
        text-decoration: none;
        outline: none;
    }


/* =============================================================================
   SCROLLBAR
============================================================================= */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--dark);
}

::-webkit-scrollbar-thumb {
    background: rgba(201,168,76,0.3);
    border-radius: 3px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--gold);
    }



/* =============================================================================
   NAVBAR NAV ITEMS
============================================================================= */

.navbar-nav .nav-item {
    position: relative;
}

    .navbar-nav .nav-item + .nav-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 12px;
        width: 1px;
        background: rgba(201,168,76,0.25);
    }

.navbar .nav-link {
    color: var(--muted) !important;
    letter-spacing: .1em;
    font-size: .75rem;
    text-transform: uppercase;
    padding: .4rem .9rem !important; /* more breathing room */
    border-radius: 3px;
    transition: color .2s, background .2s;
}

    .navbar .nav-link:hover {
        color: var(--gold) !important;
        background: rgba(201,168,76,0.07);
    }
.navbar {
    min-height: 56px;   
    padding-top: 4px;  
    padding-bottom: 4px; 
    background: var(--dark2) !important;
    border-bottom: 1px solid var(--border);
}

.navbar-brand {
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gold) !important;
}

.navbar .nav-link {
    color: var(--muted) !important;
    letter-spacing: .1em;
    font-size: .75rem;
    text-transform: uppercase;
}

    .navbar .nav-link:hover {
        color: var(--gold) !important;
    }

.navbar-create-account-btn {
    font-family: 'Jost', sans-serif;
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold) !important;
    padding: .5rem 1.25rem;
    margin-right: .75rem;
    border: 1.5px solid var(--gold);
    border-radius: 8px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    transition: background .2s, color .2s, border-color .2s;
}

    .navbar-create-account-btn:hover {
        background: rgba(201,168,76,0.15);
        color: var(--gold-light) !important;
        border-color: var(--gold-light);
    }


/* =============================================================================
   NAVBAR LOGO
============================================================================= */

.nav-logo-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    margin-right: .75rem;
}

.nav-logo-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 4px;
    display: block; /* ← was "none", this was hiding it */
}

.nav-logo-overlay {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .18s;
    cursor: pointer;
}

.nav-logo-wrap:hover .nav-logo-overlay {
    opacity: 1;
}

.nav-logo-overlay svg {
    color: #fff;
    fill: #fff;
}

.nav-logo-remove {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(220,60,60,0.92);
    color: #fff;
    border: none;
    font-size: .55rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.7);
    pointer-events: none;
    transition: background .15s;
}

    .nav-logo-remove:hover {
        background: #e05555;
    }

.nav-logo-wrap:hover .nav-logo-remove[data-has-logo] {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    transition: opacity .18s cubic-bezier(0.34, 1.45, 0.64, 1), transform .18s cubic-bezier(0.34, 1.45, 0.64, 1), background .15s;
}

/* =============================================================================
   NAV ACTIVE STATES
============================================================================= */

a.nav-link.active,
.nav-link.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.nav-item .nav-link.active,
.navbar-nav .nav-link.active,
.nav .nav-link.active,
a.nav-link.active:link,
a.nav-link.active:visited {
    background-color: rgba(201,168,76,0.12) !important;
    color: var(--gold) !important;
    border-color: rgba(201,168,76,0.4) !important;
    box-shadow: none !important;
}

.nav-link:active,
a:active {
    color: var(--gold) !important;
}

.btn-link,
.btn-link:link,
.btn-link:visited,
button.btn-link {
    color: var(--gold) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

    .btn-link:hover,
    button.btn-link:hover {
        color: var(--gold-light) !important;
        text-decoration: underline !important;
    }

    .btn-link:focus,
    .btn-link:active,
    button.btn-link:focus,
    button.btn-link:active {
        color: var(--gold-light) !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .btn:focus,
    .btn:active:focus,
    .btn-link.nav-link:focus,
    .form-control:focus,
    .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem rgba(201,168,76,0.15), 0 0 0 0.25rem rgba(201,168,76,0.35);
        outline: none;
    }

.btn:active,
.btn:active:focus {
    background: rgba(201,168,76,0.15) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
    box-shadow: 0 0 0 0.1rem rgba(201,168,76,0.15), 0 0 0 0.25rem rgba(201,168,76,0.35) !important;
}


/* =============================================================================
   MANAGE NAV (sidebar)
============================================================================= */

.manage-nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .9rem;
    border-radius: 3px;
    border: 1px solid transparent;
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: .25rem;
    transition: color .2s, border-color .2s, background .2s;
}

    .manage-nav-link:hover {
        color: var(--gold) !important;
        border-color: var(--border);
        background: rgba(201,168,76,0.06);
    }

    .manage-nav-link.active,
    .manage-nav-link[aria-current] {
        color: var(--gold) !important;
        border-color: rgba(201,168,76,0.35) !important;
        background: rgba(201,168,76,0.08) !important;
        border-left: 2px solid var(--gold) !important;
    }

.manage-nav .nav-item .active,
.manage-nav .nav-link.active,
.list-group-item-action.active,
.list-group-item.active {
    background-color: rgba(201,168,76,0.12) !important;
    border-color: rgba(201,168,76,0.4) !important;
    color: var(--gold) !important;
    border-left: 2px solid var(--gold) !important;
}


/* =============================================================================
   DROPDOWN
============================================================================= */

.dropdown-menu {
    background-clip: padding-box !important;
    border: 1px solid rgba(201,168,76,0.3) !important;
}

.dropdown-item {
    background-color: #1a1a1a !important;
    color: #e8e0cc !important;
}

    .dropdown-item:hover {
        background-color: rgba(201,168,76,0.12) !important;
        color: #c9a84c !important;
    }

    .dropdown-item + .dropdown-item {
        border-top: 1px solid var(--border) !important;
    }

.dropdown-divider,
.dropdown-menu hr {
    border-color: var(--border) !important;
    opacity: 1 !important;
}

.popover,
.popover-body,
.tooltip-inner {
    background-color: #1a1a1a !important;
    border: 1px solid rgba(201,168,76,0.3) !important;
    color: #e8e0cc !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.85) !important;
}

.luxury-dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1rem;
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .2s, background .2s;
}

    .luxury-dropdown-item:hover {
        color: var(--gold);
        background: rgba(201,168,76,0.07);
    }

.luxury-dropdown-item--danger {
    color: #a05050;
}

    .luxury-dropdown-item--danger:hover {
        color: #e07070;
        background: rgba(180,60,60,0.08);
    }

.lang-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    color: var(--muted);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .2s, background .2s;
}

    .lang-option:hover {
        color: var(--gold);
        background: rgba(201,168,76,0.08);
    }

.lang-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .4;
    flex-shrink: 0;
}


/* =============================================================================
   CARDS
============================================================================= */

.card {
    background: var(--dark2);
    border: 1px solid var(--border);
}

.card-header {
    background: var(--dark3) !important;
    border-bottom: 1px solid var(--border);
    color: var(--gold);
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: .1em;
}


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

.form-control,
.form-select {
    background: var(--dark3);
    border: 1px solid rgba(201,168,76,0.16);
    color: var(--text);
    font-size: .83rem;
    border-radius: 2px;
}

    .form-control:focus,
    .form-select:focus {
        background: var(--dark3);
        border-color: var(--gold);
        box-shadow: 0 0 0 2px rgba(201,168,76,0.18);
        color: var(--text);
    }

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

    .form-control[readonly] {
        background: #111;
        color: var(--muted);
        border-color: rgba(201,168,76,0.07);
    }

.form-label {
    color: var(--muted);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.form-check-input {
    background-color: var(--dark3);
    border-color: rgba(201,168,76,0.3);
    border-radius: 2px;
    cursor: pointer;
}

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

    .form-check-input:focus {
        box-shadow: 0 0 0 2px rgba(201,168,76,0.2);
        border-color: var(--gold);
    }

.form-check-label {
    color: var(--text);
    font-size: .82rem;
    letter-spacing: .03em;
}

.input-group-text {
    background: var(--dark3);
    border-color: rgba(201,168,76,0.16);
    color: var(--gold);
}

.field-label {
    display: block;
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .35rem;
}

.check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: .5rem;
}

.check-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.upload-hint {
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .04em;
    margin-top: .35rem;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    color-scheme: dark;
}

    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
        filter: invert(0.8) sepia(0.3) saturate(2) hue-rotate(5deg) brightness(1.6);
        cursor: pointer;
        opacity: 0.75;
    }

        input[type="date"]::-webkit-calendar-picker-indicator:hover,
        input[type="time"]::-webkit-calendar-picker-indicator:hover,
        input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
            opacity: 1;
        }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    filter: invert(0.8) brightness(1.5);
    opacity: 0.6;
}

    input[type="number"]::-webkit-inner-spin-button:hover,
    input[type="number"]::-webkit-outer-spin-button:hover {
        opacity: 1;
    }

.luxury-input {
    background: var(--dark2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: .6rem .75rem;
    transition: all .3s ease;
}

    .luxury-input:focus {
        border-color: var(--gold);
        box-shadow: 0 0 0 1px var(--gold-light);
        background: var(--dark3);
        outline: none;
    }


/* =============================================================================
   BUTTONS
============================================================================= */

/* Standard Bootstrap overrides */
.btn-primary {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .8rem;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background: rgba(201,168,76,0.15);
        border-color: var(--gold-light);
        color: var(--gold-light);
        box-shadow: none;
    }

.btn-secondary {
    background: transparent;
    border: 1px solid var(--muted);
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .8rem;
}

    .btn-secondary:hover {
        background: rgba(106,98,88,0.2);
        border-color: var(--text);
        color: var(--text);
    }

.btn-dark {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .8rem;
}

    .btn-dark:hover {
        background: rgba(201,168,76,0.08);
        border-color: var(--gold);
        color: var(--gold);
    }

.btn-outline-light {
    border-color: rgba(201,168,76,0.4);
    color: var(--gold);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .btn-outline-light:hover {
        background: rgba(201,168,76,0.12);
        border-color: var(--gold);
        color: var(--gold-light);
    }

.btn-danger {
    background: transparent;
    border: 1px solid rgba(180,60,60,0.4);
    color: #e07070;
    font-size: .75rem;
}

    .btn-danger:hover {
        background: rgba(180,60,60,0.15);
        border-color: #e07070;
    }

.btn-outline-danger {
    border-color: rgba(180,60,60,0.3);
    color: #a05050;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

    .btn-outline-danger:hover {
        background: rgba(180,60,60,0.1);
        border-color: #e07070;
        color: #e07070;
    }

.btn-warning {
    background: transparent;
    border: 1px solid rgba(201,168,76,0.4);
    color: var(--gold);
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

    .btn-warning:hover {
        background: rgba(201,168,76,0.12);
        border-color: var(--gold);
        color: var(--gold-light);
    }

/* Gold filled – used for New Repair, Edit, etc. */
.btn-gold,
.btn-gold:link,
.btn-gold:visited {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: #0D0D0D !important;
    background: var(--gold);
    border: 1.5px solid var(--gold);
    border-radius: 4px;
    padding: .4rem 1.1rem;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: background .2s, color .2s;
}

    .btn-gold:hover,
    .btn-gold:focus,
    .btn-gold:active {
        background: var(--gold-light);
        border-color: var(--gold-light);
        color: #0D0D0D !important;
        text-decoration: none !important;
    }

/* Small action buttons inside the grid */
.btn-action {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
}

    .btn-action:hover {
        border-color: var(--gold);
        color: var(--gold);
        background: rgba(201,168,76,0.08);
    }

.btn-action-danger {
    display: inline-block;
    background: transparent;
    border: 1px solid rgba(180,60,60,0.3);
    color: #a05050;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
}

    .btn-action-danger:hover {
        border-color: #e07070;
        color: #e07070;
        background: rgba(180,60,60,0.08);
    }

/* Submit / report / luxury variants */
.btn-submit-luxury {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .65rem 2.5rem;
    border-radius: 2px;
    cursor: pointer;
    font-family: 'Jost', sans-serif;
    transition: background .2s, color .2s, border-color .2s;
}

    .btn-submit-luxury:hover {
        background: rgba(201,168,76,0.13);
        border-color: var(--gold-light);
        color: var(--gold-light);
    }

.btn-reports {
    display: inline-block;
    background: transparent;
    border: 1px solid rgba(201,168,76,0.35);
    color: var(--gold);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .45rem 1.2rem;
    border-radius: 2px;
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    margin-bottom: 1.5rem;
    transition: background .2s, border-color .2s, color .2s;
}

    .btn-reports:hover {
        background: rgba(201,168,76,0.1);
        border-color: var(--gold);
        color: var(--gold-light);
    }

.btn-luxury {
    background-color: var(--gold);
    color: var(--dark);
    border: none;
    border-radius: 5px;
    transition: background .2s;
}

    .btn-luxury:hover {
        background-color: #ffd633;
    }

.btn-luxury-outline {
    background-color: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 5px;
    text-decoration: none;
    transition: background .2s, color .2s;
}

    .btn-luxury-outline:hover {
        background-color: var(--gold);
        color: var(--dark);
    }

.btn-luxury-delete {
    background-color: transparent;
    color: goldenrod;
    border: 2px solid var(--gold);
    border-radius: 5px;
    transition: background .2s, color .2s;
}

    .btn-luxury-delete:hover {
        background-color: darkred;
        color: white;
    }


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

.alert-success {
    background: rgba(60,160,100,0.1);
    border: 1px solid rgba(60,160,100,0.3);
    color: #6ecfa0;
}

.alert-danger {
    background: rgba(180,60,60,0.1);
    border: 1px solid rgba(180,60,60,0.3);
    color: #e07070;
}

.alert-luxury-success {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(60,160,100,0.08);
    border: 1px solid rgba(60,160,100,0.3);
    border-left: 3px solid #6ecfa0;
    color: #6ecfa0;
    font-size: .82rem;
    letter-spacing: .04em;
    border-radius: 3px;
    padding: .75rem 1rem;
    margin-bottom: 1.5rem;
}


/* =============================================================================
   BADGES
============================================================================= */

.badge-paid {
    background: rgba(60,160,100,0.15);
    color: #6ecfa0;
    border: 1px solid rgba(60,160,100,0.4);
}

.badge-unpaid {
    background: rgba(180,60,60,0.15);
    color: #e07070;
    border: 1px solid rgba(180,60,60,0.4);
}

.badge-instock {
    background: rgba(60,160,100,0.15);
    color: #6ecfa0;
    border: 1px solid rgba(60,160,100,0.4);
}

.badge-pending {
    background: rgba(180,60,60,0.15);
    color: #e07070;
    border: 1px solid rgba(180,60,60,0.4);
}

.badge-warranty {
    background: rgba(80,120,200,0.15);
    color: #7aaaf0;
    border: 1px solid rgba(80,120,200,0.4);
}


/* =============================================================================
   FOOTER
============================================================================= */

footer {
    background: var(--dark2);
    padding: 15px 0;
    border-top: 1px solid var(--border);
}

    footer a {
        color: var(--gold);
        text-decoration: none;
    }

        footer a:hover {
            text-decoration: underline;
        }


/* =============================================================================
   MODALS (Bootstrap + custom)
============================================================================= */

.modal-content {
    background: var(--dark2);
    border: 1px solid var(--border);
}

.modal-footer {
    border-top: 1px solid var(--border);
}

/* Shared modal helpers */
.modal-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .4rem;
}

.modal-footer-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
}

.modal-title-gold {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
}

.modal-subtitle {
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--muted);
    margin-bottom: 1.4rem;
}

/* Fade-in backdrop shared by all custom modals */
.rw-delete-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: rw-fade-in .2s ease forwards;
}

@keyframes rw-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes rw-slide-in {
    from {
        transform: scale(0.87) translateY(16px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Delete modal */
.rw-delete-box {
    background: linear-gradient(155deg, #1e1b13, #131109);
    border: 1px solid rgba(201,168,76,0.28);
    border-radius: 2px;
    padding: 2.6rem 2.8rem 2.1rem;
    width: 400px;
    max-width: 92vw;
    text-align: center;
    position: relative;
    box-shadow: 0 0 0 1px rgba(201,168,76,0.06), 0 40px 80px rgba(0,0,0,0.75), inset 0 1px 0 rgba(201,168,76,0.10);
    animation: rw-slide-in .28s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

    .rw-delete-box::before,
    .rw-delete-box::after,
    .rw-print-select-box::before,
    .rw-print-select-box::after {
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        border-color: rgba(201,168,76,0.45);
        border-style: solid;
    }

    .rw-delete-box::before,
    .rw-print-select-box::before {
        top: 7px;
        left: 7px;
        border-width: 1px 0 0 1px;
    }

    .rw-delete-box::after,
    .rw-print-select-box::after {
        bottom: 7px;
        right: 7px;
        border-width: 0 1px 1px 0;
    }

.rw-delete-icon {
    margin: 0 auto 1.3rem;
    animation: rw-pulse 3s ease-in-out infinite;
}

@keyframes rw-pulse {
    0%, 100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

.rw-delete-eyebrow {
    font-family: 'Cormorant Garamond', serif;
    font-size: .65rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: rgba(201,168,76,0.45);
    margin-bottom: .3rem;
}

.rw-delete-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.65rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
    line-height: 1.1;
}

.rw-delete-body {
    font-size: .78rem;
    letter-spacing: .04em;
    color: rgba(210,200,175,0.55);
    line-height: 1.75;
    margin: 0 0 1.4rem;
}

.rw-delete-rule {
    width: 44px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.35), transparent);
    margin: 0 auto 1.5rem;
}

.rw-delete-actions {
    display: flex;
    gap: .7rem;
    justify-content: center;
}

.rw-btn-cancel,
.rw-btn-confirm {
    font-family: 'Cormorant Garamond', serif;
    font-size: .7rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    border-radius: 2px;
    padding: .55rem 1.75rem;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    transition: all .2s ease;
}

.rw-btn-cancel {
    border-color: rgba(201,168,76,0.22);
    color: rgba(201,168,76,0.55);
}

    .rw-btn-cancel:hover {
        border-color: rgba(201,168,76,0.55);
        color: var(--gold);
        background: rgba(201,168,76,0.05);
    }

.rw-btn-confirm {
    border-color: rgba(190,60,60,0.4);
    color: rgba(220,90,90,0.7);
}

    .rw-btn-confirm:hover {
        border-color: rgba(210,70,70,0.75);
        color: #df7070;
        background: rgba(180,50,50,0.1);
        box-shadow: 0 0 16px rgba(180,50,50,0.2);
    }

    .rw-btn-confirm:active {
        transform: scale(0.97);
    }

/* Details modal */
.rw-details-box {
    background: var(--dark2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    width: min(680px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
}

/* Print selection modal */
.rw-print-select-box {
    background: linear-gradient(155deg, #1e1b13, #131109);
    border: 1px solid rgba(201,168,76,0.28);
    border-radius: 2px;
    padding: 2rem 2.2rem 1.6rem;
    width: 420px;
    max-width: 92vw;
    position: relative;
    box-shadow: 0 0 0 1px rgba(201,168,76,0.06), 0 40px 80px rgba(0,0,0,0.75), inset 0 1px 0 rgba(201,168,76,0.10);
    animation: rw-slide-in .28s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

.rw-print-options {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.rw-print-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(201,168,76,0.12);
    border-radius: 3px;
    padding: .85rem 1rem;
    cursor: pointer;
    text-align: left;
    transition: background .2s, border-color .2s, transform .15s;
}

    .rw-print-option:hover {
        background: rgba(201,168,76,0.06);
        border-color: rgba(201,168,76,0.35);
        transform: translateX(3px);
    }

.rw-print-option-icon {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.rw-print-option-text {
    flex: 1;
}

.rw-print-option-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: .95rem;
    letter-spacing: .06em;
    color: var(--text);
    font-weight: 500;
    margin-bottom: .18rem;
}

.rw-print-option-sub {
    font-size: .68rem;
    letter-spacing: .06em;
    color: var(--muted);
    text-transform: uppercase;
}

.rw-print-option-arrow {
    font-size: 1.2rem;
    color: var(--muted);
    transition: color .2s, transform .2s;
}

.rw-print-option:hover .rw-print-option-arrow {
    color: var(--gold);
    transform: translateX(2px);
}

/* Icon colour variants used in print modal */
.gold-icon {
    background: rgba(201,168,76,0.1);
    border-color: rgba(201,168,76,0.3);
    color: var(--gold);
}

.blue-icon {
    background: rgba(45,109,181,0.1);
    border-color: rgba(45,109,181,0.3);
    color: #4a8fd4;
}

/* Generic luxury modal (Bootstrap-style) */
.luxury-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.luxury-modal-content {
    background: #111;
    border: 1px solid var(--gold);
    border-radius: 12px;
    padding: 2rem 2.5rem;
    width: 420px;
    max-width: 90%;
    text-align: center;
    box-shadow: 0 0 25px rgba(212,175,55,0.25);
    animation: fadeInScale .2s ease-out;
}

    .luxury-modal-content h4 {
        color: var(--gold);
        font-size: 1.4rem;
        letter-spacing: .15em;
        margin-bottom: 1rem;
    }

    .luxury-modal-content p {
        color: #ccc;
        font-size: .95rem;
    }

    .luxury-modal-content .modal-actions {
        margin-top: 1.8rem;
        display: flex;
        justify-content: center;
        gap: 1rem;
    }

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* =============================================================================
   TABLE (luxury hand-rolled table)
============================================================================= */

.table-luxury-wrapper {
    width: 100%;
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold);
    border-radius: 4px;
    overflow: hidden;
    overflow-x: auto;
}

.table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: var(--dark2);
}

    .table thead tr {
        background: linear-gradient(90deg, var(--dark3), #1a1a1a);
        border-bottom: 2px solid var(--gold);
    }

    .table thead th {
        color: var(--gold);
        font-family: 'Cormorant Garamond', serif;
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        padding: 10px 12px;
        border: none;
        border-bottom: 2px solid var(--gold);
        white-space: nowrap;
    }

    .table tbody tr {
        border-bottom: 1px solid var(--border);
        transition: background .2s, box-shadow .2s;
    }

        .table tbody tr:hover {
            background: rgba(201,168,76,0.06);
            box-shadow: inset 3px 0 0 var(--gold);
        }

    .table tbody td {
        color: var(--text);
        font-size: .8rem;
        letter-spacing: .02em;
        padding: 8px 12px;
        border: none;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
        white-space: nowrap;
    }

    .table tbody tr:nth-child(even) {
        background: rgba(255,255,255,0.02);
    }

        .table tbody tr:nth-child(even):hover {
            background: rgba(201,168,76,0.06);
        }

    .table .badge {
        font-family: 'Jost', sans-serif;
        font-size: .7rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        padding: 5px 10px;
        border-radius: 2px;
    }

.tracking-num {
    font-family: 'Courier New', monospace;
    font-size: .78rem;
    color: var(--gold-light);
    letter-spacing: .05em;
}

.doc-link {
    color: var(--gold);
    text-decoration: none;
    font-size: .78rem;
    letter-spacing: .04em;
}

    .doc-link:hover {
        color: var(--gold-light);
        text-decoration: underline;
    }

.repair-photo {
    height: 38px;
    width: 38px;
    object-fit: cover;
    border-radius: 2px;
    cursor: pointer;
    border: 1px solid var(--border);
}


/* =============================================================================
   EXPORT BAR (grid toolbar)
============================================================================= */

.export-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    background: var(--dark3);
    border: 1px solid var(--border);
    border-bottom: none;
    border-top: 2px solid var(--gold);
    width: 100%;
    box-sizing: border-box;
}

.export-bar-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 1rem;
    margin-right: .5rem;
    border-right: 1px solid var(--border);
}

.brand-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: .95rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    line-height: 1.2;
}

.brand-back {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: .6;
    text-decoration: none;
    margin-top: .3rem;
    transition: opacity .2s;
}

    .brand-back:hover {
        opacity: 1;
    }

.export-bar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

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


/* =============================================================================
   PAGE LAYOUT WRAPPERS
============================================================================= */

.admin-wrapper {
    width: 92%;
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.client-wrapper {
    width: 94%;
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.page-content-wrapper {
    width: 92%;
    margin: 0 auto;
    padding: 0 1rem;
}

.reports-page-wrapper {
    width: 94%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 0;
}

    .reports-page-wrapper .container,
    .reports-page-wrapper ~ * .container {
        max-width: 100% !important;
        padding: 0 1rem !important;
    }

.reports-search-bar,
.table-luxury-wrapper,
.card.p-3.mb-3 {
    width: 100%;
}

.page-heading {
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold);
    letter-spacing: .25em;
    text-transform: uppercase;
    font-size: 1.7rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 1.5rem;
}

.reports-title {
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold);
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: 1.6rem;
    font-weight: 400;
}


/* =============================================================================
   REPAIR FORM CARD
============================================================================= */

.repair-form-card {
    background: var(--dark2);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold);
    border-radius: 4px;
    padding: 2.5rem;
}

.section-heading {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold);
    font-size: 1rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 1rem;
}

    .section-heading::before {
        content: '';
        display: inline-block;
        width: 18px;
        height: 1px;
        background: var(--gold);
        opacity: .6;
    }

.luxury-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.75rem 0;
}

.tracking-display .form-control {
    font-family: 'Courier New', monospace;
    font-size: .8rem;
    color: var(--gold-light);
    letter-spacing: .06em;
}

h5.text-muted {
    color: var(--gold) !important;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sort-icon {
    color: var(--muted);
    font-size: .7rem;
    margin-left: 4px;
}

.detail-cell {
    background: rgba(201,168,76,0.04);
    color: var(--muted);
    font-size: .82rem;
    padding: 10px 16px !important;
    border-left: 3px solid var(--gold) !important;
}


/* =============================================================================
   HOME PAGE
============================================================================= */

.home-wrapper {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.home-title {
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold);
    letter-spacing: .3em;
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 2.5rem;
    text-align: center;
}

    .home-title span {
        display: block;
        font-family: 'Jost', sans-serif;
        font-size: .7rem;
        letter-spacing: .4em;
        color: var(--muted);
        margin-top: .4rem;
    }

.ornament {
    color: var(--muted);
    font-size: .7rem;
    letter-spacing: .3em;
    text-align: center;
    margin-bottom: 2rem;
    opacity: .5;
}

.nav-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 320px;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    background: var(--dark2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .9rem 1.4rem;
    text-decoration: none;
    color: var(--text);
    font-family: 'Jost', sans-serif;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: background .2s, border-color .25s, box-shadow .25s, transform .15s;
}

    .nav-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(201,168,76,0.07), transparent);
        opacity: 0;
        border-radius: 10px;
        transition: opacity .25s;
    }

    .nav-btn:hover {
        border-color: var(--gold);
        box-shadow: 0 4px 20px rgba(201,168,76,0.12);
        transform: translateY(-2px);
        color: var(--gold-light);
    }

        .nav-btn:hover::after {
            opacity: 1;
        }

        .nav-btn:hover .btn-icon {
            color: var(--gold);
        }

.btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(201,168,76,0.1);
    border: 1px solid rgba(201,168,76,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: background .2s, color .2s;
}

.btn-label {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.btn-label-main {
    font-size: .82rem;
    letter-spacing: .12em;
    color: inherit;
}

.btn-label-sub {
    font-size: .65rem;
    letter-spacing: .1em;
    color: var(--muted);
    text-transform: uppercase;
}

.btn-arrow {
    margin-left: auto;
    color: var(--muted);
    font-size: .8rem;
    transition: color .2s, transform .2s;
}

.nav-btn:hover .btn-arrow {
    color: var(--gold);
    transform: translateX(3px);
}


/* =============================================================================
   PROFILE PAGE
============================================================================= */

.profile-wrapper {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.profile-card {
    width: 100%;
    max-width: 520px;
    background: var(--dark2);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold);
    border-radius: 4px;
    padding: 2.5rem 2.5rem 2rem;
}

.profile-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(201,168,76,0.1);
    border: 1px solid rgba(201,168,76,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: var(--gold);
}

.profile-title {
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold);
    letter-spacing: .25em;
    text-transform: uppercase;
    font-size: 1.3rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: .25rem;
}

.profile-subtitle {
    font-family: 'Jost', sans-serif;
    font-size: .65rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    margin-bottom: 2rem;
}

.profile-ornament {
    text-align: center;
    color: var(--muted);
    font-size: .65rem;
    letter-spacing: .25em;
    opacity: .45;
    margin-bottom: 1.75rem;
}

.profile-fields {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-field {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: .75rem 0;
    border-bottom: 1px solid var(--border);
    gap: 1rem;
}

    .profile-field:last-child {
        border-bottom: none;
    }

.profile-field-label {
    font-family: 'Jost', sans-serif;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.profile-field-value {
    font-family: 'Jost', sans-serif;
    font-size: .85rem;
    color: var(--text);
    text-align: right;
    word-break: break-word;
}

    .profile-field-value.monospace {
        font-family: 'Courier New', monospace;
        font-size: .8rem;
        color: var(--gold-light);
        letter-spacing: .04em;
    }

.profile-footer {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.profile-footer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .5;
    flex-shrink: 0;
}

.profile-footer-text {
    font-size: .68rem;
    letter-spacing: .1em;
    color: var(--muted);
    text-transform: uppercase;
}

.profile-footer-date {
    margin-left: auto;
    font-family: 'Courier New', monospace;
    font-size: .72rem;
    color: var(--gold-light);
    opacity: .7;
    letter-spacing: .05em;
}


/* =============================================================================
   ANALYTICS PAGE
============================================================================= */

.analytics-wrapper {
    width: 96%;
    max-width: 1300px;
    margin: 2rem auto;
    padding: 0 .5rem;
}

.analytics-title {
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold);
    letter-spacing: .28em;
    text-transform: uppercase;
    font-size: 1.6rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: .35rem;
}

.analytics-subtitle {
    font-family: 'Jost', sans-serif;
    font-size: .65rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    margin-bottom: 2.25rem;
}

.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.kpi-card {
    background: var(--dark2);
    border: 1px solid var(--border);
    border-top: 2px solid rgba(201,168,76,0.35);
    border-radius: 4px;
    padding: 1.1rem 1.25rem;
    position: relative;
    overflow: hidden;
}

    .kpi-card::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40%;
        background: linear-gradient(to top, rgba(201,168,76,0.03), transparent);
        pointer-events: none;
    }

.kpi-label {
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .4rem;
}

.kpi-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    color: var(--gold);
    font-weight: 400;
    line-height: 1;
    letter-spacing: .02em;
}

    .kpi-value.small {
        font-size: 1.3rem;
    }

.kpi-sub {
    font-size: .65rem;
    color: var(--muted);
    letter-spacing: .06em;
    margin-top: .3rem;
}

.section-card {
    background: var(--dark2);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold);
    border-radius: 4px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}

.section-desc {
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--muted);
    margin-bottom: 1.25rem;
}

.chart-container {
    position: relative;
    width: 100%;
    height: 260px;
}

.year-tabs {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.year-tab {
    font-family: 'Jost', sans-serif;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--border);
    background: transparent;
    border-radius: 2px;
    padding: .3rem .8rem;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}

    .year-tab.active,
    .year-tab:hover {
        color: var(--gold);
        border-color: var(--gold);
        background: rgba(201,168,76,0.08);
    }

.pay-table {
    width: 100%;
    border-collapse: collapse;
}

    .pay-table thead tr {
        border-bottom: 2px solid var(--gold);
    }

    .pay-table thead th {
        font-family: 'Cormorant Garamond', serif;
        color: var(--gold);
        font-size: .72rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        padding: 8px 12px;
        text-align: left;
        font-weight: 600;
        white-space: nowrap;
    }

    .pay-table tbody tr {
        border-bottom: 1px solid var(--border);
        transition: background .15s;
    }

        .pay-table tbody tr:hover {
            background: rgba(201,168,76,0.05);
        }

    .pay-table tbody td {
        font-size: .79rem;
        color: var(--text);
        padding: 7px 12px;
        white-space: nowrap;
    }

    .pay-table .col-muted {
        color: var(--muted);
    }

    .pay-table .col-gold {
        color: var(--gold);
    }

    .pay-table .col-red {
        color: #e07070;
    }

.pay-bar-wrap {
    width: 80px;
    height: 5px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-left: .5rem;
}

.pay-bar-fill {
    height: 100%;
    background: var(--gold);
    border-radius: 3px;
    opacity: .7;
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.two-col-responsive {
    grid-template-columns: 1fr;
}


/* =============================================================================
   CLIENT REPAIRS PAGE
============================================================================= */

.client-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.client-greeting {
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold);
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0;
}

    .client-greeting span {
        display: block;
        font-family: 'Jost', sans-serif;
        font-size: .65rem;
        letter-spacing: .35em;
        color: var(--muted);
        margin-top: .2rem;
    }

.repair-count-badge {
    font-family: 'Jost', sans-serif;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(201,168,76,0.1);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 3px;
    padding: .4rem .9rem;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--muted);
}

.empty-state-icon {
    color: rgba(201,168,76,0.2);
    margin-bottom: 1rem;
}

.empty-state-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
}

.repair-card {
    background: var(--dark2);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: 4px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

    .repair-card:hover {
        border-left-color: var(--gold);
        box-shadow: 0 2px 16px rgba(201,168,76,0.08);
    }

.repair-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
}

.repair-card-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.repair-card-right {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.repair-tracking {
    font-family: 'Courier New', monospace;
    font-size: .78rem;
    color: var(--gold-light);
    letter-spacing: .06em;
    white-space: nowrap;
}

.repair-watch-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    color: var(--text);
    letter-spacing: .08em;
}

.repair-entry-date {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.expand-icon {
    color: var(--muted);
    font-size: .75rem;
    transition: transform .25s;
}

.repair-card.open .expand-icon {
    transform: rotate(180deg);
}

.repair-detail-panel {
    display: none;
    border-top: 1px solid var(--border);
    padding: 1.25rem 1.5rem 1.5rem;
    background: rgba(201,168,76,0.02);
}

.repair-card.open .repair-detail-panel {
    display: block;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .6rem 1.5rem;
    margin-bottom: 1.25rem;
}

.detail-item-label {
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .15rem;
}

.detail-item-value {
    font-size: .83rem;
    color: var(--text);
    letter-spacing: .02em;
}

.detail-description {
    background: var(--dark3);
    border: 1px solid var(--border);
    border-left: 3px solid rgba(201,168,76,0.3);
    border-radius: 3px;
    padding: .75rem 1rem;
    font-size: .82rem;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.detail-description-label {
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .4rem;
}

.photo-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.photo-strip-label {
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .5rem;
    width: 100%;
}

.photo-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color .2s, transform .2s;
}

    .photo-thumb:hover {
        border-color: var(--gold);
        transform: scale(1.05);
    }

.detail-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1rem 0;
}

.timeline-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 1.25rem;
}

.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    flex: 1;
    min-width: 80px;
    text-align: center;
    position: relative;
}

    .timeline-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 9px;
        left: 55%;
        width: 90%;
        height: 1px;
        background: var(--border);
    }

.timeline-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--dark3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

    .timeline-dot.active {
        border-color: var(--gold);
        background: rgba(201,168,76,0.15);
    }

        .timeline-dot.active::after {
            content: '';
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--gold);
        }

.timeline-label {
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.timeline-date {
    font-family: 'Courier New', monospace;
    font-size: .65rem;
    color: var(--gold-light);
    opacity: .8;
}


/* =============================================================================
   COLUMN MANAGER BAR
============================================================================= */

.col-manager-bar {
    background: var(--dark2);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: .55rem .85rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    min-height: 46px;
}

.col-manager-label {
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    margin-right: .2rem;
    flex-shrink: 0;
}

.col-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--dark3);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: .28rem .6rem;
    font-family: 'Jost', sans-serif;
    font-size: .68rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text);
    cursor: grab;
    user-select: none;
    white-space: nowrap;
    transition: border-color .18s, color .18s, background .18s, box-shadow .18s;
}

    .col-chip:active {
        cursor: grabbing;
    }

    .col-chip:hover {
        border-color: rgba(201,168,76,0.55);
        color: var(--gold);
        background: rgba(201,168,76,0.07);
    }

    .col-chip.col-hidden {
        opacity: .35;
        border-style: dashed;
        color: var(--muted);
    }

    .col-chip.is-dragging {
        opacity: .4;
        border-color: var(--gold);
        box-shadow: 0 2px 10px rgba(201,168,76,0.22);
    }

    .col-chip.drag-over {
        border-color: var(--gold);
        background: rgba(201,168,76,0.13);
        color: var(--gold);
    }

.chip-dots {
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: .3;
    flex-shrink: 0;
}

    .chip-dots span {
        display: block;
        width: 2.5px;
        height: 2.5px;
        border-radius: 50%;
        background: currentColor;
    }

.chip-eye {
    font-size: .65rem;
    opacity: .5;
    flex-shrink: 0;
    line-height: 1;
}

.col-reset-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(201,168,76,0.18);
    color: var(--muted);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .28rem .7rem;
    border-radius: 3px;
    cursor: pointer;
    font-family: 'Jost', sans-serif;
    flex-shrink: 0;
    transition: color .18s, border-color .18s;
}

    .col-reset-btn:hover {
        color: var(--gold);
        border-color: var(--gold);
    }


/* =============================================================================
   DEVEXPRESS GRID
============================================================================= */

dxbl-grid-header-content,
dxbl-date-edit,
dxbl-text-edit,
dxbl-combo-box,
dxbl-select,
dxbl-calendar,
dxbl-spin-edit,
[class*="dxbl-popup"],
[class*="dxbl-dropdown"],
[class*="dxbl-fl-popup"],
[class*="dxbl-overlay"],
[class*="dxbl-picker"] {
    background-color: #1a1a1a !important;
    border-color: rgba(201,168,76,0.3) !important;
    color: #e8e0cc !important;
}

dxbl-grid-header-content {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

.dxbl-grid-table th,
.dxbl-grid-table th:focus,
.dxbl-grid-table th:focus-visible,
.dxbl-grid-table th:focus-within,
th.dxbl-grid-header,
th.dxbl-grid-header:focus,
th.dxbl-grid-header:focus-visible,
th.dxbl-grid-header:focus-within,
th.dxbl-grid-header-sortable,
th.dxbl-grid-header-sortable:focus,
th.dxbl-grid-header-sortable:focus-visible,
th.dxbl-grid-header-sortable:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: rgba(201,168,76,0.15) !important;
}

[class*="dxbl-drag"],
[class*="dxbl-draggable"],
[class*="dxbl-drag-clone"],
[class*="dxbl-drag-ghost"],
[class*="dxbl-drag-preview"],
[class*="dxbl-drag-placeholder"],
[class*="dxbl-grid-drag"],
[class*="dxbl-grid-header-drag"],
[class*="drag-clone"],
[class*="drag-ghost"],
[class*="drag-preview"] {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    border: 1px solid rgba(201,168,76,0.45) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.8) !important;
    color: #c9a84c !important;
    outline: none !important;
    opacity: 0.92 !important;
}

dxbl-grid {
    display: block;
    width: 100% !important;
    border: 1px solid var(--border) !important;
    border-top: none !important;
    background: var(--dark2) !important;
    font-family: 'Jost', sans-serif !important;
    color: var(--text) !important;
}

.dxbl-scroll-viewer,
.dxbl-scroll-viewer-content {
    background: var(--dark2) !important;
    width: 100% !important;
}

.dxbl-grid-table {
    background: var(--dark2) !important;
    color: var(--text) !important;
    width: 100% !important;
    table-layout: auto !important;
}

.dxbl-grid-header-row {
    background: linear-gradient(90deg, var(--dark3), #1a1a1a) !important;
    border-bottom: 2px solid var(--gold) !important;
}

.dxbl-grid-header,
th.dxbl-grid-header {
    background: transparent !important;
    color: var(--gold) !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: .74rem !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    padding: 7px 8px !important; 
    border-color: var(--border) !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.dxbl-grid-header-indent-cell {
    background: linear-gradient(90deg, var(--dark3), #1a1a1a) !important;
    border-color: var(--border) !important;
}

.dxbl-grid-header-content {
    background-color: #1a1a1a !important;
    border-color: rgba(201,168,76,0.2) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(201,168,76,0.15) !important;
}

th.dxbl-grid-header-sortable[aria-sort="ascending"] .dxbl-grid-header-content,
th.dxbl-grid-header-sortable[aria-sort="descending"] .dxbl-grid-header-content {
    box-shadow: 0 2px 12px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(201,168,76,0.45) !important;
    border-color: rgba(201,168,76,0.45) !important;
}

th.dxbl-grid-header-sortable:focus,
th.dxbl-grid-header-sortable:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

th.dxbl-grid-header-sortable:focus-within {
    outline: 1px solid rgba(201,168,76,0.5) !important;
    outline-offset: -1px !important;
}

.dxbl-grid .dxbl-grid-header-row > th.dxbl-grid-header-sortable:hover .dxbl-grid-header-content {
    background-color: rgba(201,168,76,0.07) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(201,168,76,0.3) !important;
}

.dxbl-grid-sort-asc,
.dxbl-grid-sort-desc,
.dxbl-grid-header .dxbl-image,
.dxbl-grid-header svg.dxbl-image {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    fill: var(--gold) !important;
    color: var(--gold) !important;
    opacity: .75 !important;
    vertical-align: middle !important;
    margin-left: 4px !important;
}

.dxbl-grid-filter-row,
tr.dxbl-grid-filter-row {
    background: var(--dark3) !important;
}

    .dxbl-grid-filter-row td,
    tr.dxbl-grid-filter-row td {
        background: var(--dark3) !important;
        border-color: var(--border) !important;
        padding: 2px 4px !important;
        border-bottom: 1px solid var(--border) !important;
    }

.dxbl-grid-indent-cell {
    background: inherit !important;
    border-color: var(--border) !important;
}

.dxbl-text-edit {
    background: var(--dark2) !important;
    border: 1px solid rgba(201,168,76,0.16) !important;
    border-radius: 2px !important;
}

    .dxbl-text-edit:focus-within {
        border-color: var(--gold) !important;
        box-shadow: 0 0 0 2px rgba(201,168,76,0.15) !important;
    }

.dxbl-text-edit-input {
    background: var(--dark2) !important;
    color: var(--text) !important;
    font-size: .78rem !important;
    font-family: 'Jost', sans-serif !important;
    border: none !important;
    padding: 3px 5px !important;
}

    .dxbl-text-edit-input::placeholder {
        color: var(--muted) !important;
    }

tbody tr[data-visible-index] td,
tbody tr[data-visible-index] td[role="gridcell"] {
    background: var(--dark2) !important;
    color: var(--text) !important;
    font-size: .8rem !important;
    font-family: 'Jost', sans-serif !important;
    border-bottom: 1px solid var(--border) !important;
    border-color: var(--border) !important;
    padding: 5px 8px !important;
    vertical-align: middle !important;
}

tbody tr[data-visible-index]:nth-child(even) td {
    background: rgba(255,255,255,0.018) !important;
}

tbody tr[data-visible-index]:hover td {
    background: rgba(201,168,76,0.06) !important;
    box-shadow: inset 3px 0 0 var(--gold) !important;
}

.dxbl-grid-expand-button-cell {
    background: inherit !important;
    border-color: var(--border) !important;
    padding: 0 4px !important;
    width: 28px !important;
}

.dxbl-grid-expand-button {
    background: transparent !important;
    border: none !important;
    color: var(--gold) !important;
    opacity: .6 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    transition: opacity .2s !important;
}

    .dxbl-grid-expand-button:hover {
        opacity: 1 !important;
        background: transparent !important;
    }

    .dxbl-grid-expand-button .dxbl-image,
    .dxbl-grid-expand-button svg {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
        max-width: 12px !important;
        max-height: 12px !important;
        fill: var(--gold) !important;
        color: var(--gold) !important;
    }

.dxbl-grid-empty-cell {
    background: inherit !important;
    border-color: var(--border) !important;
}

.dxbl-grid-empty-row td {
    background: var(--dark2) !important;
    border: none !important;
    padding: 0 !important;
}

.dxbl-grid-detail-row td {
    background: rgba(201,168,76,0.03) !important;
    border-left: 3px solid var(--gold) !important;
    padding: 0 !important;
    white-space: normal !important;
}

.dxbl-grid-detail-row .detail-cell {
    color: var(--muted) !important;
    font-size: .82rem !important;
    line-height: 1.7 !important;
}

.dxbl-grid-detail-row strong {
    color: var(--text) !important;
}

.dxbl-a11y-status-helper {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    opacity: 0 !important;
}

.dxbl-pager {
    background: var(--dark2) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--muted) !important;
    padding: .35rem .75rem !important;
    font-family: 'Jost', sans-serif !important;
    font-size: .74rem !important;
}

    .dxbl-pager .dxbl-btn {
        background: transparent !important;
        border: 1px solid var(--border) !important;
        color: var(--muted) !important;
        font-size: .72rem !important;
        padding: .2rem .55rem !important;
        border-radius: 2px !important;
        box-shadow: none !important;
    }

        .dxbl-pager .dxbl-btn:hover {
            border-color: var(--gold) !important;
            color: var(--gold) !important;
            background: rgba(201,168,76,0.08) !important;
        }

        .dxbl-pager .dxbl-btn[aria-current="true"] {
            border-color: var(--gold) !important;
            color: var(--gold) !important;
            background: rgba(201,168,76,0.12) !important;
        }

dxbl-scroll-bar,
.dxbl-scroll-viewer-vert-scroll-bar,
.dxbl-scroll-viewer-hor-scroll-bar {
    background: transparent !important;
}

dxbl-context-menu,
.dxbl-context-menu {
    background: var(--dark2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

.dxbl-grid-header.dxbl-drag-over,
.dxbl-grid-header[class*="drag-over"] {
    background: rgba(201,168,76,0.15) !important;
    border: 1px dashed var(--gold) !important;
}

.dxbl-date-edit input,
.dxbl-date-edit .dxbl-editor-input-container input {
    color-scheme: dark;
}

.dxbl-date-edit .dxbl-image,
.dxbl-date-edit svg {
    fill: var(--gold) !important;
    color: var(--gold) !important;
    opacity: 0.7 !important;
}

    .dxbl-date-edit .dxbl-image:hover,
    .dxbl-date-edit svg:hover {
        opacity: 1 !important;
    }

.dxbl-spin-edit .dxbl-image,
.dxbl-spin-edit svg,
.dxbl-editor-btn .dxbl-image,
.dxbl-editor-btn svg {
    fill: var(--gold) !important;
    color: var(--gold) !important;
    opacity: 0.65 !important;
}

    .dxbl-spin-edit .dxbl-image:hover,
    .dxbl-spin-edit svg:hover,
    .dxbl-editor-btn .dxbl-image:hover,
    .dxbl-editor-btn svg:hover {
        opacity: 1 !important;
    }

.dxbl-calendar {
    background: var(--dark2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    font-family: 'Jost', sans-serif !important;
}

.dxbl-calendar-header,
.dxbl-calendar-footer {
    background: var(--dark3) !important;
    border-color: var(--border) !important;
    color: var(--gold) !important;
}

.dxbl-calendar-day,
.dxbl-calendar-item {
    color: var(--text) !important;
}

    .dxbl-calendar-day:hover,
    .dxbl-calendar-item:hover {
        background: rgba(201,168,76,0.1) !important;
        color: var(--gold) !important;
    }

.dxbl-calendar-day-selected,
.dxbl-calendar-item-selected {
    background: var(--gold) !important;
    color: #0D0D0D !important;
}

.dxbl-calendar-nav-btn,
.dxbl-calendar-nav-btn svg,
.dxbl-calendar-nav-btn .dxbl-image {
    fill: var(--gold) !important;
    color: var(--gold) !important;
    opacity: 0.75 !important;
}

    .dxbl-calendar-nav-btn:hover,
    .dxbl-calendar-nav-btn:hover svg,
    .dxbl-calendar-nav-btn:hover .dxbl-image {
        opacity: 1 !important;
        background: rgba(201,168,76,0.1) !important;
    }

.dxbl-calendar-day-name {
    color: var(--gold) !important;
    opacity: 0.6 !important;
    font-size: .7rem !important;
    letter-spacing: .08em !important;
}

.dxbl-calendar-today .dxbl-calendar-day {
    border: 1px solid var(--gold) !important;
    color: var(--gold) !important;
}

.dx-bool-filter .dxbl-text-edit-input {
    color: var(--gold) !important;
    font-family: 'Jost', sans-serif !important;
    font-size: .78rem !important;
    letter-spacing: .04em !important;
}

.dx-bool-filter .dxbl-text-edit {
    border-color: rgba(201,168,76,0.2) !important;
}

    .dx-bool-filter .dxbl-text-edit:focus-within {
        border-color: var(--gold) !important;
        box-shadow: 0 0 0 2px rgba(201,168,76,0.15) !important;
    }

html body .dxbl-popup-window,
html body .dxbl-popup-body,
html body .dxbl-dropdown-body,
html body .dxbl-fl-popup,
html body div[class*="dxbl-popup"],
html body div[class*="dxbl-dropdown"] {
    background-color: #1a1a1a !important;
    border: 1px solid rgba(201,168,76,0.3) !important;
    color: #e8e0cc !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.8) !important;
}

html body .dxbl-list-box,
html body ul[class*="dxbl-list"] {
    background-color: #1a1a1a !important;
    color: #e8e0cc !important;
    border: none !important;
}

html body .dxbl-list-box-item,
html body li[class*="dxbl-list-box-item"] {
    background-color: #1a1a1a !important;
    color: #e8e0cc !important;
    font-family: 'Jost', sans-serif !important;
    font-size: .8rem !important;
    padding: 6px 12px !important;
    border-left: 2px solid transparent !important;
    transition: background .15s, color .15s, border-left-color .15s !important;
}

    html body .dxbl-list-box-item:hover,
    html body li[class*="dxbl-list-box-item"]:hover {
        background-color: rgba(201,168,76,0.12) !important;
        color: #c9a84c !important;
        border-left-color: #c9a84c !important;
        cursor: pointer !important;
    }

    html body .dxbl-list-box-item.dxbl-list-box-item-selected,
    html body li[class*="dxbl-list-box-item"][class*="selected"] {
        background-color: rgba(201,168,76,0.2) !important;
        color: #c9a84c !important;
        border-left-color: #c9a84c !important;
    }

.dxbl-image,
.dxbl-btn .dxbl-image,
dxbl-date-edit .dxbl-image,
dxbl-combo-box .dxbl-image,
dxbl-select .dxbl-image,
dxbl-spin-edit .dxbl-image,
.dxbl-editor-btn .dxbl-image,
.dxbl-filter-row .dxbl-image {
    filter: brightness(0) saturate(100%) invert(65%) sepia(25%) saturate(400%) hue-rotate(5deg) brightness(1.1) !important;
    opacity: 0.75 !important;
}

    .dxbl-image:hover,
    .dxbl-btn:hover .dxbl-image,
    .dxbl-editor-btn:hover .dxbl-image {
        filter: brightness(0) saturate(100%) invert(72%) sepia(30%) saturate(480%) hue-rotate(5deg) brightness(1.2) !important;
        opacity: 1 !important;
    }

    .dxbl-image svg,
    .dxbl-btn svg,
    dxbl-date-edit svg,
    dxbl-combo-box svg,
    dxbl-select svg,
    dxbl-spin-edit svg,
    .dxbl-editor-btn svg {
        fill: var(--gold) !important;
        color: var(--gold) !important;
        opacity: 0.75 !important;
    }

.dxbl-grid-filter-row .dxbl-image,
.dxbl-grid-filter-row svg {
    filter: brightness(0) saturate(100%) invert(65%) sepia(25%) saturate(400%) hue-rotate(5deg) brightness(1.1) !important;
    opacity: 0.75 !important;
}


/* =============================================================================
   PRINT
============================================================================= */

@media print {
    body {
        background: #ffffff !important;
        color: #1a1a1a !important;
        opacity: 1 !important;
    }
}
/* =============================================================================
   DETAILS MODAL
============================================================================= */

.rw-details-modal {
    background: #111;
    border: 1px solid rgba(201,168,76,0.22);
    border-radius: 12px;
    width: 95%;
    max-width: 640px;
    overflow: hidden;
}

.rw-details-gold-bar {
    height: 3px;
    background: linear-gradient(90deg, rgba(201,168,76,0) 0%, rgba(201,168,76,0.85) 50%, rgba(201,168,76,0) 100%);
}

.rw-details-body {
    padding: 1.6rem 1.8rem 1.4rem;
}

.rw-details-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.4rem;
}

.rw-details-eyebrow {
    font-size: .58rem;
    letter-spacing: .14em;
    color: rgba(201,168,76,0.6);
    text-transform: uppercase;
    margin-bottom: .3rem;
}

.rw-details-eyebrow-sep {
    margin: 0 .4rem;
    opacity: .4;
}

.rw-details-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f0ece0;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.rw-details-title-model {
    color: rgba(201,168,76,0.7);
    font-weight: 400;
    text-transform: none;
    font-size: 1rem;
}

.rw-details-close-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #aaa;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    font-size: .85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    transition: background .2s, color .2s;
}

    .rw-details-close-btn:hover {
        background: rgba(255,255,255,0.1);
        color: #fff;
    }

.rw-details-desc-card {
    background: rgba(201,168,76,0.04);
    border: 1px solid rgba(201,168,76,0.14);
    border-radius: 8px;
    padding: .85rem 1rem;
    margin-bottom: 1.1rem;
}

.rw-details-section-label {
    font-size: .55rem;
    letter-spacing: .12em;
    color: rgba(201,168,76,0.55);
    text-transform: uppercase;
    margin-bottom: .35rem;
}

.rw-details-desc-text {
    color: #ccc;
    font-size: .85rem;
    line-height: 1.65;
}

.rw-details-reasons {
    margin-bottom: 1.1rem;
}

.rw-details-reasons-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .45rem;
}

.rw-details-reason-chip {
    background: rgba(201,168,76,0.08);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 4px;
    padding: 3px 11px;
    font-size: .75rem;
    color: #d4bc70;
    line-height: 1.5;
}

.rw-details-divider {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin-bottom: 1.1rem;
}

.rw-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem 2rem;
    margin-bottom: 1.25rem;
}

.rw-details-col {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.rw-det-label {
    font-size: .55rem;
    letter-spacing: .1em;
    color: rgba(201,168,76,0.5);
    text-transform: uppercase;
    margin-bottom: .12rem;
}

.rw-det-value {
    font-size: .83rem;
    color: #ddd;
}

.rw-det-price {
    font-size: .95rem;
    font-weight: 600;
    color: #c9a84c;
}

.rw-det-price-currency {
    font-size: .68rem;
    color: #777;
    font-weight: 400;
}

.rw-det-status-label {
    font-size: .55rem;
    letter-spacing: .1em;
    color: rgba(201,168,76,0.5);
    text-transform: uppercase;
    margin-bottom: .35rem;
}

.rw-det-status-row {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.rw-det-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: .7rem;
    line-height: 1;
}

.rw-det-status-icon-yes {
    background: rgba(80,180,100,0.15);
    border: 1px solid rgba(80,180,100,0.35);
    color: #6ecf85;
}

.rw-det-status-icon-no {
    background: rgba(180,70,70,0.12);
    border: 1px solid rgba(180,70,70,0.28);
    color: #c07070;
}

.rw-det-status-text-yes {
    font-size: .82rem;
    color: #bbb;
}

.rw-det-status-text-no {
    font-size: .82rem;
    color: rgba(255,255,255,0.3);
}

.rw-det-watertest {
    margin-top: .3rem;
}

.rw-details-footer-divider {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin-bottom: 1rem;
}

.rw-details-footer {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
}

.rw-details-edit-btn,
.rw-details-edit-btn:link,
.rw-details-edit-btn:visited {
    background: #c9a84c;
    color: #111 !important;
    border: none;
    border-radius: 5px;
    padding: .42rem 1.4rem;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    letter-spacing: .03em;
    transition: background .2s;
}

    .rw-details-edit-btn:hover,
    .rw-details-edit-btn:focus,
    .rw-details-edit-btn:active {
        background: var(--gold-light);
        color: #111 !important;
    }

.rw-details-close-footer-btn {
    background: transparent;
    color: rgba(255,255,255,0.45);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    padding: .42rem 1.4rem;
    font-size: .8rem;
    cursor: pointer;
    letter-spacing: .03em;
    transition: color .2s, border-color .2s;
}

    .rw-details-close-footer-btn:hover {
        color: rgba(255,255,255,0.7);
        border-color: rgba(255,255,255,0.25);
    }

#isCompanyCheck {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(201,168,76,0.4);
    border-radius: 2px;
    background: rgba(201,168,76,0.06);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all .15s;
}

    #isCompanyCheck:checked {
        background: rgba(201,168,76,0.18);
        border-color: rgba(201,168,76,0.7);
    }

        #isCompanyCheck:checked::after {
            content: '';
            position: absolute;
            left: 2px;
            top: 5px;
            width: 8px;
            height: 4px;
            border-left: 1.5px solid #C9A84C;
            border-bottom: 1.5px solid #C9A84C;
            transform: rotate(-45deg) translateY(-2px);
            display: block;
        }

.rw-invoice-ok {
    background: rgba(39, 120, 60, 0.1);
    border: 1px solid rgba(39, 120, 60, 0.35);
    color: #5fc878;
    border-radius: 3px;
    padding: .6rem 1rem;
    font-size: .82rem;
    margin-bottom: .75rem;
}

.rw-invoice-err {
    background: rgba(180, 50, 30, 0.1);
    border: 1px solid rgba(200, 70, 50, 0.35);
    color: #e07070;
    border-radius: 3px;
    padding: .6rem 1rem;
    font-size: .82rem;
    margin-bottom: .75rem;
}

.rw-print-option-loading {
    opacity: .65;
    cursor: not-allowed;
}

.badge-noinvoice {
    display: inline-block;
    padding: .18rem .5rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(120, 80, 80, 0.12);
    color: rgba(220, 100, 100, 0.7);
    border: 1px solid rgba(220, 100, 100, 0.25);
    border-radius: 3px;
    white-space: nowrap;
}

.badge-todo {
    background: rgba(201, 168, 76, 0.15);
    color: #C9A84C;
    border: 1px solid rgba(201, 168, 76, 0.5);
}

/* =============================================================================
   EXPORT BAR RESPONSIVE
============================================================================= */

.export-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    background: var(--dark3);
    border: 1px solid var(--border);
    border-bottom: none;
    border-top: 2px solid var(--gold);
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.export-bar-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 1rem;
    margin-right: .5rem;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
}

.export-bar-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    flex: 1;
}

.export-bar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* =============================================================================
   GRID RESPONSIVE OVERRIDES
============================================================================= */

/* Ensure grid never overflows its container */
dxbl-grid,
.dxbl-scroll-viewer,
.dxbl-scroll-viewer-content {
    max-width: 100% !important;
    overflow-x: auto !important;
}

.dxbl-grid-table {
    min-width: 320px !important;
}

/* =============================================================================
   TABLET - iPad Mini, iPad, Galaxy Tab S9 (600px - 1024px)
============================================================================= */

@media (max-width: 1024px) {

    /* Fix tablet centering */
    .page-content-wrapper,
    .admin-wrapper,
    .client-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 .5rem !important;
        margin: 0 auto !important;
    }

    .export-bar {
        padding: .4rem .5rem;
        gap: .35rem;
    }

    .export-bar-brand {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        width: 100%;
        border-bottom: 1px solid var(--border);
        padding-bottom: .3rem;
        margin-bottom: .2rem;
    }

    .export-bar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .brand-title {
        font-size: .85rem;
    }

    /* Compact column headers */
    .dxbl-grid-header,
    th.dxbl-grid-header {
        font-size: .65rem !important;
        padding: 5px 5px !important;
        letter-spacing: .06em !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    tbody tr[data-visible-index] td {
        font-size: .72rem !important;
        padding: 4px 5px !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .btn-action,
    .btn-action-danger {
        font-size: .62rem !important;
        padding: 3px 6px !important;
        letter-spacing: .04em !important;
        white-space: nowrap !important;
    }

    .repair-photo {
        width: 32px !important;
        height: 32px !important;
    }

    .dxbl-pager {
        font-size: .68rem !important;
        flex-wrap: wrap !important;
    }
}

/* =============================================================================
   MOBILE - Galaxy, Pixel, iPhone (max 767px)
============================================================================= */

@media (max-width: 767px) {

    .export-bar {
        padding: .35rem .4rem;
        gap: .3rem;
    }

    .export-bar-actions {
        gap: .3rem;
    }

    /* Make all buttons same small size */
    .btn-action,
    .btn-action-danger {
        font-size: .6rem !important;
        padding: 4px 7px !important;
        min-height: 30px !important;
        letter-spacing: .03em !important;
        white-space: nowrap !important;
    }

    .btn-gold {
        font-size: .62rem !important;
        padding: .35rem .8rem !important;
        min-height: 30px !important;
    }

    /* Grid cells - prevent text tangling */
    .dxbl-grid-header,
    th.dxbl-grid-header {
        font-size: .6rem !important;
        padding: 4px 4px !important;
        letter-spacing: .04em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 80px !important;
    }

    tbody tr[data-visible-index] td {
        font-size: .68rem !important;
        padding: 3px 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 90px !important;
    }

    /* Action buttons vertical stack on mobile */
    .dxbl-grid-table .d-flex.gap-1 {
        flex-direction: column !important;
        gap: .2rem !important;
        align-items: stretch !important;
    }

        .dxbl-grid-table .d-flex.gap-1 .btn-action,
        .dxbl-grid-table .d-flex.gap-1 .btn-action-danger {
            width: 100% !important;
            text-align: center !important;
            justify-content: center !important;
        }

    .repair-photo {
        width: 28px !important;
        height: 28px !important;
    }

    /* Navbar responsive */
    .navbar .nav-link {
        font-size: .65rem !important;
        padding: .3rem .5rem !important;
    }
}

/* =============================================================================
   SMALL MOBILE - iPhone SE, small Androids (max 480px)
============================================================================= */

@media (max-width: 480px) {

    .brand-title {
        font-size: .75rem;
        letter-spacing: .1em;
    }

    .brand-back {
        font-size: .62rem;
    }

    .export-bar-actions {
        gap: .25rem;
    }

    .btn-action,
    .btn-action-danger {
        font-size: .58rem !important;
        padding: 3px 5px !important;
    }

    .btn-gold {
        font-size: .58rem !important;
        padding: .3rem .6rem !important;
    }

    .dxbl-grid-header,
    th.dxbl-grid-header {
        font-size: .55rem !important;
        padding: 3px 3px !important;
        max-width: 60px !important;
    }

    tbody tr[data-visible-index] td {
        font-size: .62rem !important;
        padding: 2px 3px !important;
        max-width: 70px !important;
    }

    .repair-photo {
        width: 24px !important;
        height: 24px !important;
    }

    .dxbl-pager .dxbl-btn {
        padding: .12rem .35rem !important;
        font-size: .6rem !important;
    }
}

/* =============================================================================
   TOUCH DEVICES - Better tap targets
============================================================================= */

@media (hover: none) and (pointer: coarse) {
    .btn-action,
    .btn-action-danger,
    .btn-gold {
        min-height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Remove hover glow on touch - use active instead */
    tbody tr[data-visible-index]:hover td {
        background: inherit !important;
        box-shadow: none !important;
    }

    tbody tr[data-visible-index]:active td {
        background: rgba(201,168,76,0.06) !important;
        box-shadow: inset 3px 0 0 #C9A84C !important;
    }
}

/* =============================================================================
   REPAIR REASONS PAGE RESPONSIVE
============================================================================= */

@media (max-width: 767px) {
    .admin-wrapper,
    .client-wrapper {
        width: 100% !important;
        padding: 0 .75rem !important;
        margin: 1rem auto !important;
    }

    .page-heading {
        font-size: 1.2rem !important;
        letter-spacing: .15em !important;
    }

    .table thead th {
        font-size: .65rem !important;
        padding: 7px 8px !important;
    }

    .table tbody td {
        font-size: .72rem !important;
        padding: 6px 8px !important;
    }
}

@media (max-width: 1024px) {
    main,
    main.pb-3,
    .container-fluid,
    .container-fluid.px-2,
    .container-fluid.px-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .export-bar,
    dxbl-grid,
    .dxbl-scroll-viewer {
        border-radius: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}



.rw-sort-btn {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: .8rem;
    letter-spacing: .04em;
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    opacity: .85;
    transition: opacity .15s, color .15s;
}

    .rw-sort-btn:hover {
        opacity: 1;
        color: var(--gold, #C9A84C);
    }

    .rw-sort-btn-active,
    .rw-sort-btn:focus-visible {
        color: var(--gold, #C9A84C);
        opacity: 1;
        outline: none;
    }

.rw-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.rw-search-input {
    background: var(--dark2, #1a1a1a);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 3px;
    color: #eee;
    font-size: .78rem;
    padding: .35rem 2rem .35rem .65rem;
    width: 200px;
    outline: none;
    transition: border-color .15s;
}

    .rw-search-input:focus {
        border-color: rgba(201, 168, 76, 0.7);
    }

    .rw-search-input::placeholder {
        color: rgba(255, 255, 255, 0.3);
    }

.rw-search-clear {
    position: absolute;
    right: .4rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    font-size: .75rem;
    padding: 0;
    line-height: 1;
}

    .rw-search-clear:hover {
        color: #C9A84C;
    }

.rw-pagesize-btn {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .08em;
    padding: 4px 10px;
    border-radius: 2px;
    cursor: pointer;
    transition: all .2s ease;
    font-family: 'Jost', sans-serif;
}

    .rw-pagesize-btn:hover {
        border-color: var(--gold);
        color: var(--gold);
        background: rgba(201,168,76,0.08);
    }

.rw-pagesize-btn-active {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201,168,76,0.12);
}

.rw-search-input[type="number"] {
    width: 70px;
    padding: 4px 8px;
    text-align: center;
}

/* ── Filter dropdown ──────────────────────────────────────────────────────── */
.rw-filter-wrap {
    position: relative;
}

.rw-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #C9A84C;
    color: #111;
    font-size: .6rem;
    font-weight: 700;
    border-radius: 999px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .3rem;
    margin-left: .35rem;
    vertical-align: middle;
}

.rw-filter-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 9999;
    background: #1a1a1a;
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 6px;
    padding: .9rem 1rem;
    min-width: 220px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.rw-filter-group {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.rw-filter-group-label {
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #C9A84C;
    font-weight: 600;
}

.rw-filter-group-btns {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.rw-filter-opt {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: #ccc;
    font-size: .75rem;
    padding: .25rem .65rem;
    border-radius: 3px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}

    .rw-filter-opt:hover {
        background: rgba(201,168,76,0.12);
        border-color: rgba(201,168,76,0.4);
        color: #C9A84C;
    }

.rw-filter-opt-active {
    background: rgba(201,168,76,0.18);
    border-color: #C9A84C;
    color: #C9A84C;
    font-weight: 600;
}

.rw-filter-clear {
    margin-top: .25rem;
    background: none;
    border: 1px solid rgba(200,80,80,0.4);
    color: #e07070;
    font-size: .72rem;
    padding: .3rem .7rem;
    border-radius: 3px;
    cursor: pointer;
    align-self: flex-start;
    transition: background .15s;
}

    .rw-filter-clear:hover {
        background: rgba(200,80,80,0.12);
    }

/* date pair - side by side */
.rw-filter-date-pair {
    display: flex;
    gap: .75rem;
}

    .rw-filter-date-pair .rw-filter-group {
        flex: 1;
    }

.rw-filter-date-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: #ccc;
    font-size: .73rem;
    padding: .25rem .4rem;
    border-radius: 3px;
    width: 100%;
    cursor: pointer;
    transition: border-color .15s;
    color-scheme: dark;
}

    .rw-filter-date-input:focus {
        outline: none;
        border-color: rgba(201,168,76,0.5);
    }

    .rw-filter-date-input::-webkit-calendar-picker-indicator {
        filter: invert(0.6);
        cursor: pointer;
    }

/* highlight the Filters button when active */
.btn-action-active {
    border-color: #C9A84C !important;
    color: #C9A84C !important;
}

/* =============================================================================
   COMPACT GRID — fit all columns in 100% viewport width
============================================================================= */

/* Header cells */
.dxbl-grid-header,
th.dxbl-grid-header {
    font-size: .60rem !important;
    letter-spacing: .04em !important;
    padding: 4px 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Data cells */
tbody tr[data-visible-index] td,
tbody tr[data-visible-index] td[role="gridcell"] {
    font-size: .72rem !important;
    padding: 3px 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Filter row inputs and selects */
.rw-search-input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: .68rem !important;
    padding: .2rem .3rem !important;
    box-sizing: border-box !important;
}

.dxbl-grid-filter-row td,
tr.dxbl-grid-filter-row td {
    padding: 1px 2px !important;
}

/* Smaller badges */
.badge,
.badge-paid, .badge-unpaid,
.badge-instock, .badge-pending,
.badge-todo, .badge-noinvoice {
    font-size: .58rem !important;
    padding: 1px 4px !important;
    letter-spacing: .03em !important;
}

/* Smaller company/individual tags */
span[style*="font-size:.62rem"],
span[style*="font-size:.72rem"] {
    font-size: .52rem !important;
    padding: 1px 3px !important;
    letter-spacing: .03em !important;
}

/* Smaller action buttons */
.btn-action,
.btn-action-danger {
    font-size: .58rem !important;
    padding: 2px 5px !important;
    letter-spacing: .03em !important;
}

/* Tighter sort buttons */
.rw-sort-btn {
    font-size: .60rem !important;
    letter-spacing: .03em !important;
}

/* Photos thumbnail */
.repair-photo {
    width: 26px !important;
    height: 26px !important;
}

/* Tracking number */
.tracking-num {
    font-size: .68rem !important;
}

/* Date inputs in filter row */
input.rw-search-input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    font-size: .65rem !important;
    padding: .18rem .2rem !important;
}

/* Select dropdowns in filter row */
select.rw-search-input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: .65rem !important;
    padding: .18rem .2rem !important;
}

/* Force table to use fixed layout so widths are respected */
.dxbl-grid-table {
    table-layout: fixed !important;
    width: 100% !important;
}