:root {
    /* Fujifilm Brand Colors */
    --fujifilm-advanced-green: #01916D;
    --fujifilm-text-dark: #333333;
    --fujifilm-text-muted-dark: #5C5C5C;
    --fujifilm-innovative-grey-10: #FFFFFF;
    --fujifilm-innovative-grey-20: #D6D6D6; /* Used as border color */
    --fujifilm-innovative-grey-60: #999999; /* Used for icons */
    --fujifilm-white: #FFFFFF;
    --fujifilm-communication-red: #FB0020;
    --fujifilm-communication-orange: #EA5504;

    /* RGB values for rgba usage */
    --fujifilm-advanced-green-rgb: 1, 145, 109;
    --fujifilm-innovative-grey-rgb: 81, 81, 81; /* Approximate for shadows */
    --fujifilm-communication-red-rgb: 251, 0, 32;

    /* Compact Spacing Scale (Mobile Optimized) */
    --space-xs: 0.2rem;   /* ~3px */
    --space-s: 0.4rem;    /* ~6px */
    --space-m: 0.8rem;    /* ~13px */
    --space-l: 1.2rem;    /* ~19px */
    --space-xl: 1.5rem;   /* ~24px - significantly reduced */
    --space-xxl: 2rem;    /* ~32px - significantly reduced */

    /* Typography */
    --bs-font-sans-serif: 'Roboto', sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);

    /* Bootstrap 5 Variable Overrides */
    --bs-primary: var(--fujifilm-advanced-green);
    --bs-primary-rgb: var(--fujifilm-advanced-green-rgb);

    --bs-body-bg: var(--fujifilm-innovative-grey-10);
    --bs-body-color: var(--fujifilm-text-dark);

    --bs-link-color: var(--fujifilm-advanced-green);
    --bs-link-hover-color: #006449; /* Darker green */

    --bs-border-color: var(--fujifilm-innovative-grey-20);

    /* Status Colors Overrides */
    --bs-success: var(--fujifilm-advanced-green);
    --bs-success-rgb: var(--fujifilm-advanced-green-rgb);

    --bs-danger: var(--fujifilm-communication-red);
    --bs-danger-rgb: var(--fujifilm-communication-red-rgb);

    --bs-warning: var(--fujifilm-communication-orange);
    --bs-warning-rgb: 234, 85, 4;
}

/* Global Styles */
body {
    font-family: var(--bs-body-font-family);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll on mobile */
    width: 100%;
    padding-top: 85px;
}

/* Title spacing below the header line (mobile first) */
#main-content {
    padding-top: 1.5rem;
}

@media (min-width: 992px) {
    #main-content {
        padding-top: 2rem;
    }
}

h1, h2, h3, h4, h5, h6 {
    color: var(--fujifilm-text-dark);
    font-weight: 500;
    margin-top: 0;
    margin-bottom: var(--space-s);
}

.page-header {
    margin-bottom: var(--space-l);
}

/* Header Style */
.main-header {
    background-color: var(--fujifilm-white);
    padding: 0 var(--space-m); /* Reduced padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 60px; /* Reduced height for mobile */
}

.main-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #00D164, #006449, #01916D, #00FF52, #96FFFD);
}

.main-header .navbar-brand {
    color: var(--fujifilm-text-dark);
    font-weight: 700;
    font-size: 1.25rem;
}

.main-header .nav-link {
    color: var(--fujifilm-text-dark);
    font-weight: 500;
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 3px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.main-header .nav-link:hover {
    color: var(--fujifilm-advanced-green);
}

.main-header .nav-link.active {
    color: var(--fujifilm-advanced-green);
    border-bottom-color: var(--fujifilm-advanced-green);
}

.main-header .nav-link-icon {
    border-bottom: none;
}

.main-header .nav-link-icon.active {
    border-bottom: none;
}

.main-header .btn {
    border-radius: 999px;
    padding: 0.35rem 1.1rem;
}

/* Technician dashboard */
.tech-dashboard {
    /* Spacing handled by container */
}

/* Technician pages */
.tech-compact-page {
    /* Spacing handled by container */
}

.navbar-toggler {
    border-color: var(--bs-border-color);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.35);
}

/* Green Gradation Line */
.green-gradation-line {
    height: 4px;
    width: 100%;
    background: linear-gradient(to right, #00D164, #006449, #01916D, #00FF52, #96FFFD);
    margin-bottom: var(--space-m);
}

/* Standardized Wizard Card (replaces .card, .surface-card, .part-card) */
.wizard-card {
    background-color: var(--fujifilm-white);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem; /* Standardized radius */
    box-shadow: 0 4px 12px rgba(var(--fujifilm-innovative-grey-rgb), 0.08);
    transition: box-shadow 0.2s ease-in-out;
    padding: var(--space-l);
    margin-bottom: var(--space-l);
}

.wizard-card:hover {
    box-shadow: 0 8px 20px rgba(var(--fujifilm-innovative-grey-rgb), 0.12);
}

.wizard-card .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0 0 var(--space-m) 0;
    margin-bottom: var(--space-m);
    font-weight: 500;
}

/* Wizard */
.wizard-page {
    /* Spacing handled by container */
}

/* Case detail */
.case-detail-page {
   /* Spacing handled by container */
}

/* Unified title offset for technician pages - REMOVED NEGATIVE MARGINS */
.tech-dashboard,
.tech-compact-page,
.wizard-page,
.case-detail-page,
.settings-page {
    /* Reset margins to default */
}

/* Settings page */
.settings-page {
    /* Spacing handled by container */
}

/* Desktop refinements for technician flows */
@media (min-width: 992px) {
    .tech-dashboard,
    .tech-compact-page,
    .wizard-page,
    .settings-page {
        max-width: 1120px;
        margin: 0 auto;
    }

    .tech-dashboard .action-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 920px;
        margin: 0 auto;
    }

    .tech-dashboard .page-header,
    .tech-dashboard .open-cases-header {
        max-width: 920px;
        margin-left: auto;
        margin-right: auto;
    }

    .wizard-content {
        max-width: 1000px;
        margin: 0 auto;
    }

    .wizard-page .page-header {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    .wizard-footer {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    .wizard-footer-actions .btn {
        flex: 0 0 auto;
        min-width: 220px;
    }

    .tech-cases-grid {
        display: grid;
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
        gap: 1.5rem;
        align-items: start;
    }

    .tech-cases-filters {
        position: sticky;
        top: 96px;
    }
}


/* Legacy .card compatibility if needed, but prefer .wizard-card for wizard */
.card {
    background-color: var(--fujifilm-white);
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
    margin-bottom: var(--space-l);
}
.card:hover {
    box-shadow: var(--shadow-md);
}

.card-body {
    padding: 1.25rem;
}

/* Wizard Selection Cards (Step 3 Diagnosis) */
.wizard-selection-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem; /* Standardized radius */
    background-color: var(--fujifilm-white);
    margin-bottom: 1rem;
    transition: all 0.2s ease-in-out;
    overflow: hidden;
}

.wizard-selection-card-header {
    padding: 1rem 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: background-color 0.2s ease;
}

.wizard-selection-card-header:hover {
    background-color: var(--fujifilm-innovative-grey-10);
}

/* Selected State */
.wizard-selection-card.selected {
    border-color: var(--fujifilm-advanced-green);
    border-width: 2px;
    box-shadow: 0 4px 12px rgba(1, 145, 109, 0.15);
}

.wizard-selection-card.selected .wizard-selection-card-header {
    background-color: rgba(1, 145, 109, 0.05);
    /* Adjust padding for thicker border */
    padding: calc(1rem - 1px) calc(1.25rem - 1px);
}

.wizard-selection-card-body {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
    background-color: #fff;
    display: none; /* Hidden by default */
}

.wizard-selection-card.selected .wizard-selection-card-body {
    display: block;
    border-top-color: var(--fujifilm-advanced-green);
    padding: calc(1rem - 1px) calc(1.25rem - 1px);
}

/* Check Circle Icon */
.check-circle {
    width: 24px;
    height: 24px;
    border: 2px solid var(--fujifilm-innovative-grey-20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.wizard-selection-card.selected .check-circle {
    background-color: var(--fujifilm-advanced-green);
    border-color: var(--fujifilm-advanced-green);
}

.check-circle i {
    color: white;
    font-size: 14px;
    display: none;
}

.wizard-selection-card.selected .check-circle i {
    display: block;
}

.selection-card-label {
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--fujifilm-text-dark);
}

/* Buttons */
.btn {
    min-height: 44px; /* Touch target size optimization */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-sm {
    min-height: 32px; /* Smaller but still accessible */
}

/* Ensure secondary actions like 'Cancel' link have proper touch size */
.text-link-action {
    display: inline-block;
    padding: 12px 24px;
    min-height: 44px;
    text-decoration: none;
    color: var(--fujifilm-text-muted-dark);
}
.text-link-action:hover {
    background-color: var(--fujifilm-innovative-grey-10);
    border-radius: 4px;
    color: var(--fujifilm-text-dark);
}

.btn-primary {
    background-color: var(--fujifilm-advanced-green);
    border-color: var(--fujifilm-advanced-green);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #006449; /* Fallback for older browsers */
    background-color: color-mix(in srgb, var(--fujifilm-advanced-green) 85%, black 15%);
    border-color: color-mix(in srgb, var(--fujifilm-advanced-green) 85%, black 15%);
}

.btn-success {
    background-color: var(--fujifilm-advanced-green);
    border-color: var(--fujifilm-advanced-green);
    color: var(--fujifilm-white);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.btn-success:hover, .btn-success:focus {
    background-color: color-mix(in srgb, var(--fujifilm-advanced-green) 85%, black 15%);
    border-color: color-mix(in srgb, var(--fujifilm-advanced-green) 85%, black 15%);
    color: var(--fujifilm-white);
    box-shadow: var(--shadow-sm);
}

.btn-success:active {
    transform: scale(0.98);
}

.btn-outline-dark, .btn-outline-secondary {
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.btn-outline-dark:active, .btn-outline-secondary:active {
    transform: scale(0.98);
}

.btn-danger {
    background-color: var(--fujifilm-communication-red);
    border-color: var(--fujifilm-communication-red);
    color: var(--fujifilm-white);
}

.btn-danger:hover, .btn-danger:focus {
    background-color: color-mix(in srgb, var(--fujifilm-communication-red) 85%, black 15%);
    border-color: color-mix(in srgb, var(--fujifilm-communication-red) 85%, black 15%);
    color: var(--fujifilm-white);
}

.btn-warning {
    background-color: var(--fujifilm-communication-orange);
    border-color: var(--fujifilm-communication-orange);
    color: var(--fujifilm-white);
}

.btn-warning:hover, .btn-warning:focus {
    background-color: color-mix(in srgb, var(--fujifilm-communication-orange) 85%, black 15%);
    border-color: color-mix(in srgb, var(--fujifilm-communication-orange) 85%, black 15%);
    color: var(--fujifilm-white);
}

.btn-outline-secondary {
    color: var(--fujifilm-text-dark);
    border-color: var(--bs-border-color);
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    color: var(--fujifilm-white);
    background-color: var(--fujifilm-text-dark);
    border-color: var(--fujifilm-text-dark);
}

/* Button outline warning - Force brand orange */
.btn-outline-warning {
    --bs-btn-color: var(--fujifilm-communication-orange);
    --bs-btn-border-color: var(--fujifilm-communication-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--fujifilm-communication-orange);
    --bs-btn-hover-border-color: var(--fujifilm-communication-orange);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--fujifilm-communication-orange);
    --bs-btn-active-border-color: var(--fujifilm-communication-orange);
    --bs-btn-disabled-color: var(--fujifilm-communication-orange);
    --bs-btn-disabled-border-color: var(--fujifilm-communication-orange);
}

/* Icons within cards (Dashboard) */
.text-primary {
    color: var(--fujifilm-advanced-green) !important;
}

.border-primary {
    border-color: var(--fujifilm-advanced-green) !important;
}

/* Adjustments for Alerts */
.alert-danger {
    background-color: color-mix(in srgb, var(--fujifilm-communication-red) 10%, var(--fujifilm-white));
    border-color: color-mix(in srgb, var(--fujifilm-communication-red) 25%, var(--fujifilm-white));
    color: color-mix(in srgb, var(--fujifilm-communication-red) 85%, black);
}

/* Forms */
.form-label {
    color: var(--fujifilm-text-muted-dark);
    font-weight: 500;
}

/* Standardized Form Controls - Wizard uses form-control-lg mostly, but base standard is here */
.form-control, .form-select {
    background-color: var(--fujifilm-white);
    border: 1px solid var(--bs-border-color);
    color: var(--fujifilm-text-dark);
    border-radius: 0.5rem;
    padding: 0.65rem 0.85rem;
    box-shadow: none;
    min-height: 44px; /* Ensure inputs are easy to tap */
}

.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.2);
}

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

/* Mobile-Friendly Form Checks (Checkbox/Radio) */
.form-check {
    min-height: 44px;
    padding-left: 2rem; /* Reserve space for input */
    margin-bottom: 0.5rem;
    position: relative;
    display: block; /* Ensure block context for label/input */
}

.form-check .form-check-input {
    width: 1.3em;
    height: 1.3em;
    margin-left: -2rem; /* Pull back to padding area */
    position: absolute;
    top: 0.75rem; /* Center vertically relative to 44px min-height (approx) */
    margin-top: 0;
}

.form-check .form-check-label {
    display: block;
    width: 100%;
    min-height: 44px;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    cursor: pointer;
    line-height: 1.4;
}

/* Progress bars */
.progress-thin {
    height: 6px;
    background-color: var(--fujifilm-innovative-grey-20);
}

.progress-lg {
    height: 26px;
    border-radius: 0.5rem;
    background-color: var(--fujifilm-innovative-grey-20);
}

/* QR reader placeholder */
.qr-reader {
    display: none;
    width: 100%;
    max-width: 320px;
    margin-top: var(--space-s);
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Headings in colored containers */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-success h1, .bg-success h2, .bg-success h3, .bg-success h4, .bg-success h5, .bg-success h6,
.bg-danger h1, .bg-danger h2, .bg-danger h3, .bg-danger h4, .bg-danger h5, .bg-danger h6,
.bg-warning h1, .bg-warning h2, .bg-warning h3, .bg-warning h4, .bg-warning h5, .bg-warning h6 {
    color: var(--fujifilm-white) !important;
}

/* Badges - Force white text on status colors */
.badge.bg-primary, .badge.bg-success, .badge.bg-danger {
    color: var(--fujifilm-white) !important;
}

.badge.bg-warning {
    color: var(--fujifilm-text-dark) !important;
}

/* HTMX Loading Indicator */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Hover Shadow Utilities */
.hover-shadow:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    transform: translateY(-2px);
    transition: all 0.2s;
}
.hover-shadow:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(1, 145, 109, 0.5), 0 .5rem 1rem rgba(0,0,0,.15)!important;
    transform: translateY(-2px);
    transition: all 0.2s;
    outline: none;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .container {
        padding-left: var(--space-m);
        padding-right: var(--space-m);
    }

    .card-body {
        padding: var(--space-m);
    }

    .main-header .nav-link {
        padding-left: 0;
    }

    .wizard-card {
        padding: var(--space-m);
    }
}

@media (max-width: 576px) {
    body {
        padding-top: 64px;
    }
}

/* Custom Expanded State for Part Buttons */
.main-part-btn.expanded {
    color: #fff;
    background-color: var(--fujifilm-advanced-green);
    border-color: var(--fujifilm-advanced-green);
}

.main-part-btn.expanded .text-muted {
    color: #fff !important;
}

/* Force Green Brand Color on Active/Hover for Main Part Buttons (overriding btn-outline-dark) */
.main-part-btn:hover,
.main-part-btn:focus,
.main-part-btn:active,
.main-part-btn.active {
    background-color: var(--fujifilm-advanced-green) !important;
    border-color: var(--fujifilm-advanced-green) !important;
    color: #fff !important;
}

/* Ensure inner text is white on active/hover */
.main-part-btn:hover .text-muted,
.main-part-btn:focus .text-muted,
.main-part-btn:active .text-muted,
.main-part-btn.active .text-muted {
    color: #fff !important;
}

/* Color Soft Buttons (Option C: Glassmorphism/Soft) */
.color-soft-btn {
    min-height: 50px;
    border-radius: 8px; /* Slightly softer radius */
    border-width: 2px;
    border-style: solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease-in-out;
    background-color: transparent; /* Fallback */
}

.color-soft-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    opacity: 0.9;
}

.color-soft-btn:active {
    transform: translateY(0);
}

/*
   Soft Colors Definition:
   Background: ~10-15% opacity of the main color
   Border & Text: Solid version of the color (tweaked for readability on white)
*/

/* Cyan */
.btn-soft-cyan {
    background-color: rgba(0, 188, 212, 0.1); /* Material Cyan 500 at 10% */
    border-color: #00ACC1; /* Material Cyan 600 */
    color: #00ACC1;
}
.btn-soft-cyan:hover {
    background-color: rgba(0, 188, 212, 0.2);
    border-color: #00838F;
    color: #00838F;
}

/* Magenta */
.btn-soft-magenta {
    background-color: rgba(233, 30, 99, 0.1); /* Material Pink 500 at 10% */
    border-color: #D81B60; /* Material Pink 600 */
    color: #D81B60;
}
.btn-soft-magenta:hover {
    background-color: rgba(233, 30, 99, 0.2);
    border-color: #C2185B;
    color: #C2185B;
}

/* Yellow */
.btn-soft-yellow {
    background-color: rgba(255, 235, 59, 0.2); /* Material Yellow 500 at 20% */
    border-color: #F9A825; /* Material Yellow 800 - Darker for readability */
    color: #F9A825;
}
.btn-soft-yellow:hover {
    background-color: rgba(255, 235, 59, 0.3);
    border-color: #F57F17;
    color: #F57F17;
}

/* Black */
.btn-soft-black {
    background-color: rgba(0, 0, 0, 0.08);
    border-color: #212121;
    color: #212121;
}
.btn-soft-black:hover {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: #000000;
    color: #000000;
}

/* Management Dashboard Hover Effect */
.hover-elevate {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.hover-elevate:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(81, 81, 81, 0.15) !important;
}

.bg-success-subtle { background-color: rgba(1, 145, 109, 0.1) !important; }
.bg-primary-subtle { background-color: rgba(13, 110, 253, 0.1) !important; }
.bg-info-subtle { background-color: rgba(13, 202, 240, 0.1) !important; }
.bg-warning-subtle { background-color: rgba(255, 193, 7, 0.1) !important; }
.bg-danger-subtle { background-color: rgba(220, 53, 69, 0.1) !important; }