@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Base Fonts and Body */
html, body {
    font-family: 'Montserrat';
    background-color: #f5f7fa;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Headings */
h1:focus, h2:focus, h3:focus {
    outline: none;
}

/* Links and Buttons */
a, .btn-link {
    color: #0071c1;
    text-decoration: none;
    transition: color 0.2s ease;
}

    a:hover, .btn-link:hover {
        color: #005a99;
        text-decoration: underline;
    }

.btn {
    font-weight: 600;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border: 1px solid #1861ac;
}

    .btn-primary:hover {
        background-color: #1861ac;
        border-color: #145a9d;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #ffffff, 0 0 0 0.3rem rgba(37,140,251,0.4);
    outline: none;
}

/* Content Padding */
.content {
    padding: 1.5rem 1rem;
}

/* Form Validation */
.valid.modified:not([type=checkbox]) {
    outline: 2px solid #26b050;
    border-radius: 0.25rem;
}

.invalid {
    outline: 2px solid #ff4d4f;
    border-radius: 0.25rem;
}

.validation-message {
    color: #ff4d4f;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Blazor Error UI */
#blazor-error-ui {
    background: #fff4e5;
    color: #b32121;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    position: fixed;
    display: none;
    z-index: 1000;
    font-weight: 500;
    border-top: 1px solid #f2c2a0;
    border-radius: 0.25rem 0.25rem 0 0;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 1rem;
        top: 0.5rem;
        font-size: 1rem;
    }

/* Blazor Error Boundary */
.blazor-error-boundary {
    background: #b32121;
    background-size: 2rem 2rem;
    background-repeat: no-repeat;
    background-position: 1rem center;
    padding: 1rem 1rem 1rem 3.5rem;
    color: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-weight: 500;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
        display: block;
        margin-top: 0.25rem;
    }

/* Loading Progress */
/* Full screen loading background */
.loading-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background: linear-gradient(135deg, #9D6023, #015974);
    color: white;
    text-align: center;
    font-family: "Segoe UI", sans-serif;
}

/* Logo */
.loading-logo {
    width: 100px;
    height: auto;
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

/* Spinner */
.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid rgba(255, 255, 255, 0.2);
    border-top: 6px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

/* Text */
.loading-text {
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Animations */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}


.navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    width: 100%;
}

.navbar-logo {
    height: 45px;
    margin-left: 15px;
}

.navbar-toggler {
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    position: relative;
}


@media (max-width: 768px) {
    .navbar-toggler-icon {
        display: block;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6l18 18M6 24L24 6'/%3e%3c/svg%3e");
    }
}


.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6l18 18M6 24L24 6'/%3e%3c/svg%3e");
}

@media (max-width: 768px) {
    .navbar-toggler-icon {
        display: block;
    }
}


.liquid-glass {
    position: relative;
    transition: all 0.3s ease;
    
    padding: 10px 15px;
    
    
    -webkit-backdrop-filter: blur(5px);
    
    overflow: hidden;
}

    .liquid-glass:hover {
        transform: translateY(-2px) scale(1.02);
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        color: #ffffff;
        text-decoration: none;
    }

    .liquid-glass::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: 0.5s;
    }

    .liquid-glass:hover::before {
        left: 100%;
    }

.nav-link.liquid-glass.active {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15));
    color: #ffffff;
    font-weight: bold;
}


@media (max-width: 768px) {
    .navbar-collapse {
        max-height: 0; 
        overflow: hidden;
        transition: max-height 0.4s ease, transform 0.4s ease;
        transform: translateX(100%); 
        background: white;
        padding: 0 1rem;
    }

       
        .navbar-collapse.show {
            max-height: 500px; 
            transform: translateX(0);
            box-shadow: -2px 0 6px rgba(0,0,0,0.1);
        }
}


code {
    font-family: 'Fira Code', monospace;
    background-color: #f0f0f0;
    padding: 0.15rem 0.35rem;
    border-radius: 0.25rem;
    color: #c02d76;
}

/* ── Print Layout ────────────────────────────────────────── */
@media print {
    .sidebar {
        display: none !important;
    }

    .top-bar {
        display: none !important;
    }

    .page {
        display: block !important;
    }

    main {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .content {
        padding: 0 !important;
        margin: 0 !important;
    }

    body {
        background-color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

.logo-container {
    background-color: white !important;
    border-bottom: none !important;



}

/* =============================================================
   GLOBAL RESPONSIVE LAYER
   Catches common patterns across all pages without per-page edits.
   Breakpoints align with Bootstrap 5: sm 576, md 768, lg 992, xl 1200.
   ============================================================= */

/* Prevent horizontal page scroll caused by overflowing fixed-width children.
   Use overflow-x: clip — `hidden` would break position: sticky on the sidebar. */
html, body { max-width: 100%; overflow-x: clip; }

/* Images and media never overflow their container */
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }

/* Wrap any raw <table> in horizontal scroll on small screens */
@media (max-width: 991.98px) {
    .table-responsive-auto,
    .ve-card table,
    .content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Tablet (≤ 992px) ── */
@media (max-width: 991.98px) {
    .content { padding: 1rem 0.75rem; }

    /* Force Bootstrap fixed-px containers to shrink */
    .container,
    .container-md,
    .container-lg,
    .container-xl { max-width: 100%; }

    /* Common fixed widths used across pages */
    [style*="width: 600px"],
    [style*="width:600px"],
    [style*="width: 700px"],
    [style*="width:700px"],
    [style*="width: 800px"],
    [style*="width:800px"],
    [style*="width: 900px"],
    [style*="width:900px"],
    [style*="width: 1000px"],
    [style*="width:1000px"] { width: 100% !important; max-width: 100% !important; }

    /* Modals shrink, never fixed */
    .modal-dialog { max-width: 95vw; margin: 0.75rem auto; }
    .modal-content { width: 100%; }

    /* Page header rows stack */
    .ve-page-header,
    .page-header,
    .header-row { flex-wrap: wrap; gap: 12px; }
}

/* ── Phone (≤ 768px) ── */
@media (max-width: 767.98px) {
    .content { padding: 0.75rem 0.5rem; }

    /* Headings shrink */
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.2rem; }
    h3 { font-size: 1.05rem; }

    /* Bootstrap rows: ensure no negative margin overflow */
    .row { margin-left: -8px; margin-right: -8px; }
    .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }

    /* Cards/panels fluid */
    .card, .ve-card { width: 100% !important; max-width: 100% !important; }

    /* Forms — full-width inputs, single column */
    .form-control, .form-select, input[type="text"], input[type="email"],
    input[type="password"], input[type="number"], input[type="tel"],
    input[type="date"], input[type="search"], textarea, select {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Toolbars and action button rows stack */
    .toolbar,
    .actions-row,
    .btn-toolbar,
    .d-flex.justify-content-end:not(.no-stack),
    .d-flex.justify-content-between:not(.no-stack) {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Buttons sized down */
    .btn { padding: 0.45rem 0.85rem; font-size: 0.875rem; }
    .btn-lg { padding: 0.6rem 1.1rem; font-size: 0.95rem; }

    /* Stacked button groups go full width */
    .btn-group-vertical-mobile .btn,
    .actions-stack .btn { width: 100%; }

    /* Tables — smaller padding */
    .table th, .table td { padding: 0.5rem 0.5rem; font-size: 0.85rem; }

    /* Modal goes near full screen */
    .modal-dialog { max-width: 100%; margin: 0.4rem; }
    .modal-body { padding: 0.85rem; }
    .modal-header, .modal-footer { padding: 0.75rem 0.85rem; }

    /* Tabs scroll horizontally instead of wrapping */
    .nav-tabs, .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar { height: 4px; }

    /* Pagination wraps */
    .pagination { flex-wrap: wrap; }

    /* Dropdown menus do not exceed viewport */
    .dropdown-menu { max-width: 95vw; }

    /* Generic flex-rows that should stack on phone */
    .stack-sm { flex-direction: column !important; align-items: stretch !important; }
    .stack-sm > * { width: 100%; }
}

/* ── Extra small phones (≤ 480px) ── */
@media (max-width: 479.98px) {
    .content { padding: 0.6rem 0.4rem; }
    h1 { font-size: 1.25rem; }
    .btn { font-size: 0.82rem; }
    .table th, .table td { padding: 0.4rem 0.4rem; font-size: 0.8rem; }
}

/* Helper: hide on small screens (used by markup that opts in) */
@media (max-width: 767.98px) { .hide-sm { display: none !important; } }
@media (min-width: 768px)    { .show-sm-only { display: none !important; } }

/* =============================================================
   MODAL Z-INDEX + RESPONSIVE FIX (global)
   Mobile sidebar navbar uses z-index 210, top-bar 90, nav overlay 200.
   Modals must always sit above all of those.
   ============================================================= */

/* Bootstrap modals */
.modal-backdrop { z-index: 10500 !important; }
.modal          { z-index: 10600 !important; }

/* Custom modal overlays used across pages (Admin/QA JobsBoard etc.) */
.modal-overlay,
.ve-modal-overlay,
.custom-modal-overlay,
[class*="modal-overlay"] {
    z-index: 10600 !important;
}

/* Modal panels follow */
.modal-panel,
.ve-modal,
.custom-modal {
    z-index: 10700 !important;
}

/* Mobile modal sizing: never bleed into navbar-glass area */
@media (max-width: 991.98px) {
    .modal-overlay,
    .ve-modal-overlay,
    [class*="modal-overlay"] {
        padding: 8px !important;
        align-items: flex-start !important;
        padding-top: 16px !important;
    }

    .modal-panel,
    .modal-content,
    .ve-modal {
        max-height: calc(100vh - 32px) !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* Modal body scrolls, header/footer stay */
    .modal-body-qa,
    .ve-modal-body,
    .modal-body {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
}

@media (max-width: 480px) {
    .modal-overlay,
    .ve-modal-overlay,
    [class*="modal-overlay"] {
        padding: 4px !important;
        padding-top: 8px !important;
    }
    .modal-panel,
    .ve-modal { border-radius: 10px !important; }
}