/* CSS Custom Properties for theming */
:root {
    --primary-color: #1b6ec2;
    --primary-hover: #1861ac;
    --warning-color: #f1c40f;
    --warning-hover: #d4ac0d;
    --info-color: #17a2b8;
    --info-hover: #117a8b;
    --dark-color: #2c3e50;
    --dark-hover: #1a2936;
    --link-color: #006bb7;
    --success-color: #26b050;
    --danger-color: #e50000;
    --focus-shadow: 0 0 0 0.25rem #258cfb;
    --bg: #ffffff;
    --surface: #f8f9fa;
    --text: #212529;
    --muted: #6c757d;
    --border: #dee2e6;
}

/* Dark mode is not supported for the admin application — all pages use light theme.
   Pre-login pages (landing, features, etc.) define their own dark variables on .prelogin-page.
   Removing this media query prevents dark-OS users from seeing dark card/form backgrounds. */

html, body {
    color-scheme: light;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}

* {
    box-sizing: border-box;
}

/* Reset and normalize */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 1rem 0;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
}

p {
    margin: 0 0 1rem 0;
}

/* Link styles */
a, .btn-link {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

a:hover, .btn-link:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
    gap: 6px;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
}

/* Solid semantic variants (regular .btn-*) ensure consistent filled colors
   for buttons that use classes like `btn btn-sm btn-success` etc. */
.btn.btn-success,
.btn-success {
    background-color: var(--success-color) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.btn.btn-success:hover,
.btn-success:hover {
    background-color: #1f8a3f !important;
}

.btn.btn-danger,
.btn-danger {
    background-color: var(--danger-color) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.btn.btn-danger:hover,
.btn-danger:hover {
    background-color: #c40000 !important;
}

.btn.btn-warning,
.btn-warning {
    background-color: var(--warning-color) !important;
    color: #1a1a1a !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.btn.btn-warning:hover,
.btn-warning:hover {
    background-color: var(--warning-hover) !important;
}

.btn.btn-info,
.btn-info {
    background-color: var(--info-color) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.btn.btn-info:hover,
.btn-info:hover {
    background-color: var(--info-hover) !important;
}

.btn.btn-dark,
.btn-dark {
    background-color: var(--dark-color) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.btn.btn-dark:hover,
.btn-dark:hover {
    background-color: var(--dark-hover) !important;
}

.btn-secondary {
    color: var(--text);
    background-color: var(--surface);
    border-color: var(--border);
}

.btn-secondary:hover {
    background-color: var(--muted);
    border-color: var(--muted);
    color: #fff;
}

/* Project-specific override:
   Convert bootstrap outline button variants to solid colored buttons
   so `.btn-outline-*` displays as a filled color matching the
   semantic meaning (primary, success, warning, danger, info, dark, etc.).
   This applies regardless of size (btn-sm, btn-lg, etc.) and keeps
   markup unchanged while updating the visual style.
*/
.btn.btn-outline-primary,
.btn-outline-primary {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.btn.btn-outline-primary:hover,
.btn-outline-primary:hover {
    background-color: var(--primary-hover) !important;
}

.btn.btn-outline-success,
.btn-outline-success {
    background-color: var(--success-color) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.btn.btn-outline-success:hover,
.btn-outline-success:hover {
    background-color: #1f8a3f !important;
}

.btn.btn-outline-danger,
.btn-outline-danger {
    background-color: var(--danger-color) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.btn.btn-outline-danger:hover,
.btn-outline-danger:hover {
    background-color: #c40000 !important;
}

.btn.btn-outline-warning,
.btn-outline-warning {
    background-color: var(--warning-color) !important;
    color: #1a1a1a !important; /* darker text for contrast */
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.btn.btn-outline-warning:hover,
.btn-outline-warning:hover {
    background-color: var(--warning-hover) !important;
}

.btn.btn-outline-info,
.btn-outline-info {
    background-color: var(--info-color) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.btn.btn-outline-info:hover,
.btn-outline-info:hover {
    background-color: var(--info-hover) !important;
}

.btn.btn-outline-dark,
.btn-outline-dark {
    background-color: var(--dark-color) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.btn.btn-outline-dark:hover,
.btn-outline-dark:hover {
    background-color: var(--dark-hover) !important;
}

/* Secondary variant: convert outline-secondary to a subtle surface button */
.btn.btn-outline-secondary,
.btn-outline-secondary {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.btn.btn-outline-secondary:hover,
.btn-outline-secondary:hover {
    background-color: var(--muted) !important;
    color: #fff !important;
}

/* For light variant, convert to subtle solid borderless light button with dark text */
.btn.btn-outline-light,
.btn-outline-light {
    background-color: #ffffff !important;
    color: var(--text) !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.btn.btn-outline-light:hover,
.btn-outline-light:hover {
    background-color: #f8f9fa !important;
}

/* Remove focus outlines for converted outline buttons */
.btn[class*="btn-outline-"],
.btn[class*="btn-outline-"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

.icon-btn {
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.icon-btn:hover {
    background-color: var(--surface);
    border-color: var(--muted);
}

/* Focus styles */
.btn:focus, 
.btn:active:focus, 
.btn-link.nav-link:focus, 
.form-control:focus, 
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, var(--focus-shadow);
    outline: none;
}

/* Form styles */
.form-control,
.form-select {
    background-color: var(--bg);
    border: 1px solid #adb5bd;
    color: var(--text);
    border-radius: 6px;
    padding: 8px 12px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 0.15rem rgba(27, 110, 194, 0.2);
}

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

/* Content area */
.content {
    padding-top: 1.1rem;
    flex: 1;
}

/* Focus management */
h1:focus {
    outline: none;
}

/* Form validation */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success-color);
}

.invalid {
    outline: 1px solid var(--danger-color);
}

.validation-message {
    color: var(--danger-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Error boundary */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMzLjU4NiA2Ni4wMTgzWk0yNjMuNTc2IDg2LjA1NDdDMjYxLjA0OSA4Ni4wNTQ3IDI1OS43ODUgODcuMzAwNSA4OS43OTIxIDI1OS43ODYgOTIuMjgzNyAyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 6px;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* Form enhancements */
.darker-border-checkbox.form-check-input {
    border-color: var(--border);
}

.form-floating > .form-control-plaintext::placeholder, 
.form-floating > .form-control::placeholder {
    color: var(--muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, 
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Utility classes */
.w-100 {
    width: 100%;
}

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

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

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

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

.mt-3 {
    margin-top: 1rem;
}

/* Card component */
.card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.card-header {
    background-color: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1rem;
    border-radius: 8px 8px 0 0;
    margin: -1rem -1rem 1rem -1rem;
}

.card-body {
    padding: 0;
}

/* Navigation improvements */
.nav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
    border-radius: 4px;
}

.nav-link:hover {
    color: var(--primary-color);
    background-color: var(--surface);
}

.nav-link.active {
    color: var(--primary-color);
    background-color: var(--surface);
    font-weight: 600;
}

/* Table improvements */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--text);
    background-color: transparent;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid var(--border);
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--border);
    background-color: var(--surface);
    font-weight: 600;
}

/* Responsive utilities */
@media (max-width: 576px) {
    .btn {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .content {
        padding: 0.5rem;
    }
    
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
}

/* Print styles */
@media print {
    .btn,
    .nav,
    .sidebar,
    .modal,
    .modal-header,
    .modal-footer,
    .btn-close,
    .dialog-overlay,
    .dialog-actions,
    .no-print {
        display: none !important;
    }

    .content {
        padding: 0 !important;
    }

    body {
        background: white !important;
        color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .printable-document {
        width: 100% !important;
        max-width: none !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 auto !important;
        padding: 8px !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        background: white !important;
        color: #000 !important;
    }

    .bill-print,
    .kot-print {
        background: white !important;
        color: #000 !important;
        margin: 0 !important;
        padding: 8px !important;
        width: 100% !important;
        max-width: none !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    /* Ensure all text is visible and black */
    * {
        color: #000 !important;
        background: transparent !important;
    }

    .print-header,
    .print-section,
    .breakdown-rows,
    .breakdown-row {
        background: white !important;
        color: #000 !important;
    }
}

/* Center Focus Carousel Styles */
.center-focus-carousel {
    margin: 2rem 0 3rem 0;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.carousel-track {
    position: relative;
    padding: 2rem 0;
}

.carousel-slide-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    position: relative;
    min-height: 320px;
}

.main-slide {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(1);
    transition: all 0.5s ease;
}

.main-slide img {
    max-width: 380px;
    max-height: 250px;
    width: 100%;
    object-fit: contain;
    border-radius: 12px;
    border: 3px solid white;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.main-slide img:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.9);
}

.preview-slide {
    position: relative;
    z-index: 2;
    cursor: pointer;
    transform: scale(0.65);
    opacity: 0.5;
    transition: all 0.4s ease;
}

.preview-slide:hover {
    transform: scale(0.7);
    opacity: 0.75;
}

.preview-slide img {
    max-width: 240px;
    max-height: 160px;
    width: 100%;
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid white;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    filter: grayscale(30%);
    transition: all 0.3s ease;
}

.preview-slide:hover img {
    filter: grayscale(0%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.8);
}

.left-preview {
    margin-right: -0.5rem;
}

.right-preview {
    margin-left: -0.5rem;
}

.slide-title {
    margin-top: 1rem;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards 0.4s;
    text-align: center;
}

.slide-title h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
    text-align: center;
    padding: 0.5rem 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.4rem;
    color: var(--primary-color);
    transition: all 0.3s ease;
    z-index: 4;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nav-arrow:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(27, 110, 194, 0.4);
}

.left-arrow {
    left: -24px;
}

.right-arrow {
    right: -24px;
}

.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 2rem;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.indicator.active {
    background: white;
    border-color: white;
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.indicator.active::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: indicatorPulse 2s infinite;
}

.indicator:hover {
    transform: scale(1.2);
    border-color: rgba(255, 255, 255, 0.8);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes indicatorPulse {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.3;
        transform: scale(1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .center-focus-carousel {
        margin: 1.5rem 0 2rem 0;
        padding: 0 1rem;
    }
    
    .carousel-slide-group {
        gap: 1rem;
        min-height: 250px;
    }
    
    .main-slide img {
        max-width: 280px;
        max-height: 180px;
    }
    
    .preview-slide {
        transform: scale(0.5);
    }
    
    .preview-slide:hover {
        transform: scale(0.55);
    }
    
    .preview-slide img {
        max-width: 180px;
        max-height: 120px;
    }
    
    .nav-arrow {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .left-arrow {
        left: -10px;
    }
    
    .right-arrow {
        right: -10px;
    }
    
    .slide-title h3 {
        font-size: 1.1rem;
    }
    
    .left-preview, .right-preview {
        margin: 0;
    }
}

@media (max-width: 480px) {
    .carousel-slide-group {
        flex-direction: column;
        gap: 0.5rem;
        min-height: 220px;
    }
    
    .preview-slide {
        display: none;
    }
    
    .main-slide img {
        max-width: 260px;
        max-height: 160px;
    }
    
    .nav-arrow {
        top: 35%;
    }
    
    .slide-title h3 {
        font-size: 1rem;
    }
}

/* Global fixes for Radzen dropdown visibility */
.rz-dropdown-panel,
.rz-dropdown-items {
    background-color: white !important;
    color: #2c3e50 !important;
}

/* Global Radzen breadcrumb styling */
.rz-breadcrumb {
    background-color: #f1f5f9 !important;
    color: #1f2937 !important;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

.rz-breadcrumb .rz-breadcrumb-item,
.rz-breadcrumb .rz-breadcrumb-item a,
.rz-breadcrumb .rz-breadcrumb-separator {
    color: #1f2937 !important;
}

.rz-breadcrumb .rz-breadcrumb-item a:hover {
    color: #111827 !important;
}

.rz-dropdown-item {
    color: #2c3e50 !important;
    background-color: white !important;
}

/* Global fixes for Radzen dialog text visibility */
.rz-dialog {
    border-radius: 14px !important;
}

.rz-dialog-body,
.rz-dialog .rz-dialog-content {
    color: #1a1a1a !important;
    background-color: white !important;
}

.rz-dialog p,
.rz-dialog span,
.rz-dialog div {
    color: #1a1a1a !important;
}

.rz-dialog-title {
    color: white !important;
    font-weight: 700;
}

.rz-dialog-header {
    background: linear-gradient(90deg, #2c3e50 0%, #34495e 100%) !important;
}

/* Confirm dialog specific styling */
.rz-confirm-dialog-content {
    color: #1a1a1a !important;
}

.rz-dialog.rz-dialog-centered .rz-dialog-body {
    color: #1a1a1a !important;
}

.rz-dropdown-item.rz-state-highlight {
    background-color: #e3f2fd !important;
    color: #0d47a1 !important;
}

/* Ensure input text is visible */
.rz-dropdown input,
.rz-dropdown .rz-dropdown-label {
    color: #2c3e50 !important;
    background-color: white !important;
}

/* RadzenAutoComplete dropdown styling */
.rz-autocomplete-panel .rz-autocomplete-items {
    background-color: white !important;
}

.rz-autocomplete-item {
    color: #2c3e50 !important;
    background-color: white !important;
    padding: 8px 12px;
}

.rz-autocomplete-item:hover {
    background-color: #f8f9fa !important;
    color: #1a252f !important;
}
/* Key-figure cards that jump to the rows behind them (see window.hbScrollTo / data-kpi-scroll in assets/app.js). */
[data-kpi-scroll] { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
[data-kpi-scroll]:hover { box-shadow: 0 2px 10px rgba(29, 111, 184, .25); }
.kpi-flash { outline: 2px solid #1d6fb8; outline-offset: 2px; border-radius: 8px; transition: outline-color .4s ease; }

/* Toasts (Radzen notifications) always sit above every drawer, dialog and overlay, so a message raised by an
   action inside a drawer is seen on top of it. */
.rz-notification { z-index: 5000 !important; }
.rz-notification .rz-notification-item { z-index: 5000; }

/* Radzen dialogs (guest details, confirmations) open above drawers (z-index up to 1050). Keep the dialog ABOVE its
   own mask (the mask must stay below the dialog, or the dialog looks dim) and below Radzen popups (2000) and toasts (5000). */
.rz-dialog-mask { z-index: 1100 !important; }
.rz-dialog-wrapper, .rz-dialog { z-index: 1101 !important; }

/* Buttons that can be clicked must look clickable. Radzen's "Light" buttons (Cancel, Keep, Back...) rendered pale grey on
   white and looked disabled, and disabled buttons looked almost the same as enabled ones. Light text buttons get a visible
   border and dark text; disabled buttons are plainly grey with a not-allowed cursor. Icon-only and text-only buttons are
   left as they are. */
.rz-button.rz-light:not(.rz-button-icon-only):not(.rz-variant-text):not(.rz-state-disabled):not(:disabled) {
    background-color: #ffffff;
    color: #1f2937;
    border: 1px solid #9ca3af;
}
.rz-button.rz-light:not(.rz-button-icon-only):not(.rz-variant-text):not(.rz-state-disabled):not(:disabled):hover {
    background-color: #f3f4f6;
}
.rz-button.rz-state-disabled:not(.rz-variant-text),
.rz-button:disabled:not(.rz-variant-text) {
    background-color: #e5e7eb !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}


/* Grids whose whole row opens the details drawer: the pointer shows the row can be clicked. */
.eb-grid-clickable .e-grid .e-row,
.e-grid.eb-grid-clickable .e-row { cursor: pointer; }
.eb-grid-clickable .e-row:hover td { background-color: #f3f7fc; }