/* ----------------------------------------------------------------------------------------
 * layouts.css — extracted from Shared/MainLayout.razor on 2026-05-10.
 *
 * Previously a 550-line <style> block lived inline at the top of MainLayout.razor.
 * Moving it here means the styles are cached by the browser (rather than re-served
 * on every Blazor render) and the layout component itself is dramatically easier
 * to scan. No selectors changed during the move — copy-paste only.
 * ---------------------------------------------------------------------------------------- */

    /* Data-heavy pages (the default Large, and ExtraLarge/ExtraExtraLarge) use the full width
       beside the drawer. A page that asks for Medium or Small, or sets its own max-width, keeps
       it: a short form or message stretched across a wide monitor is hard to read. */
    .mud-container {
        width: 100%;
    }

    .mud-container.mud-container-maxwidth-lg,
    .mud-container.mud-container-maxwidth-xl,
    .mud-container.mud-container-maxwidth-xxl {
        max-width: none;
    }

    /* The layout's container sets the page gutter. Pages that wrap themselves in another
       MudContainer would otherwise double it, which cost a phone a tenth of its width. The bottom
       padding keeps a page's last row clear of the feedback button. */
    .app-main-container {
        padding: 24px 28px 96px;
    }

    .app-main-container > .mud-container--gutters {
        padding-left: 0;
        padding-right: 0;
    }

    @media (max-width: 959.98px) {
        .app-main-container {
            padding: 20px 20px 96px;
        }
    }

    @media (max-width: 599.98px) {
        .app-main-container {
            padding: 14px 12px 88px;
        }
    }
    
    /* Enhanced registration number input styling */
    .registration-input .mud-input-root {
        border: none !important;
        box-shadow: none !important;
    }
    
    .registration-input .mud-input-root:hover {
        background-color: var(--mud-palette-background-grey) !important;
    }
    
    .registration-input .mud-input-root:focus-within {
        background-color: var(--mud-palette-background-grey) !important;
    }
    
    /* Search button hover effect */
    .registration-search-btn:hover {
        background-color: var(--mud-palette-primary-hover) !important;
        transform: scale(1.05);
        transition: all 0.2s ease;
    }
    
    /* Paper container hover effect */
    .registration-container:hover {
        border-color: var(--mud-palette-primary) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        transition: all 0.3s ease;
    }

    /* ---- App bar: logo, search, then the bell and the account menu --------------------------- */
    .app-brand {
        display: flex;
        align-items: center;
        margin-left: 8px;
        flex-shrink: 0;
        border-radius: 6px;
    }

    .app-brand-logo {
        display: block;
        height: 34px;
        width: auto;
    }

    /* A company's own logo can be any shape: cap its width so a very wide one can't push the search
       box and the account menu off the bar, and keep its proportions whatever it is. */
    .app-brand-logo-custom {
        max-width: 200px;
        object-fit: contain;
        object-position: left center;
    }

    /* System Settings → Top Bar Logo: the logo in a strip like the app bar, to judge it before saving. */
    .topbar-logo-preview {
        display: inline-flex;
        align-items: center;
        padding: 10px 16px;
        background: #fff;
        border: 1px solid var(--ag-line, #e3e8ef);
        border-radius: 8px;
    }

    .app-bar .mud-icon-button {
        color: var(--ag-ink-500, #4a5768);
    }

    .app-bar-avatar {
        box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ag-line, #e3e8ef);
    }

    /* The pages pinned beside the bell. Icons only, named by their tooltip; the page you are on is lit. */
    .quick-links {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-right: 6px;
        padding-right: 8px;
        border-right: 1px solid var(--ag-line, #e3e8ef);
    }

    .app-bar .quick-link.mud-icon-button {
        border-radius: 10px;
    }

    .app-bar .quick-link.mud-icon-button:hover {
        background-color: var(--ag-surface-3, #eef3f9);
        color: var(--ag-ink-900, #0a1220);
    }

    .app-bar .quick-link-current.mud-icon-button {
        background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
        color: var(--mud-palette-primary);
    }

    .app-bar .quick-link-add.mud-icon-button {
        border: 1px dashed var(--ag-line, #e3e8ef);
    }

    /* The search box: a soft grey pill with the magnifier inside it. In MudBlazor 9 .mud-input-root
       is the <input> itself and the adornment sits beside it, so the pill is the .mud-input wrapper. */
    .global-search-container .mud-input-control {
        margin-top: 0;
        margin-bottom: 0;
    }

    .global-search-input .mud-input.mud-input-outlined {
        height: 38px;
        background-color: var(--ag-surface-3, #eef3f9);
        border-radius: 999px;
        transition: background-color .15s ease, box-shadow .15s ease;
    }

    .global-search-input .mud-input.mud-input-outlined:hover {
        background-color: #e6edf6;
    }

    .global-search-input .mud-input.mud-input-outlined:focus-within {
        background-color: #fff;
        box-shadow: 0 0 0 2px var(--mud-palette-primary), var(--ag-shadow-md, 0 6px 16px rgba(11, 22, 38, 0.06));
    }

    .global-search-input .mud-input-outlined-border {
        border: none !important;
    }

    .global-search-input input.mud-input-slot {
        height: 38px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        font-size: 0.9rem;
        background: transparent;
        color: var(--mud-palette-text-primary);
    }

    .global-search-input input.mud-input-slot:focus {
        box-shadow: none;
    }

    .global-search-input input.mud-input-slot::placeholder {
        color: var(--ag-ink-400, #667585);
        opacity: 1;
    }

    .global-search-input .mud-input-adornment-start .mud-icon-root {
        color: var(--ag-ink-400, #667585);
    }

    /* The company card at the top of the menu. */
    .drawer-company {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 12px 10px 4px;
        padding: 10px;
        border: 1px solid var(--ag-line, #e3e8ef);
        border-radius: 10px;
        background: var(--ag-surface-2, #f7f9fc);
    }

    .drawer-company-mark {
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, #3b76f6, #1d4ed8);
        color: #fff;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-weight: 700;
        font-size: 1rem;
    }

    .drawer-company-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .drawer-company-name,
    .drawer-company-user {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .drawer-company-name {
        font-weight: 600;
        font-size: 0.875rem;
        color: var(--ag-ink-900, #0a1220);
    }

    .drawer-company-user {
        font-size: 0.75rem;
        color: var(--ag-ink-400, #667585);
    }

    /* The unread count on the bell: a small pill on the bell's top corner, ringed in the bar's
       white so it reads as separate from the icon. It was a 20px red disc on the corner of the
       whole button, pushed up against the top edge of the bar. */
    .notif-menu .mud-badge.mud-badge-top.right.mud-badge-overlap {
        inset: 7px auto auto 25px;
        height: 18px;
        min-width: 18px;
        padding: 0 5px;
        border: 2px solid #fff;
        border-radius: 9px;
        font-size: 10px;
        font-weight: 600;
        line-height: 14px;
        letter-spacing: 0;
        box-shadow: none;
    }

    /* Notification Panel */
    .notif-menu .mud-menu-content {
        border-radius: 12px;
        overflow: hidden;
        min-width: min(360px, calc(100vw - 16px));
        max-width: min(420px, calc(100vw - 16px));
    }

    /* Sized on the panel itself: MudBlazor renders the menu's popover outside .notif-menu, so the
       .notif-menu .mud-menu-content rule above never reached it and the panel shrank to 176px. */
    .notif-panel {
        display: flex;
        flex-direction: column;
        width: min(380px, calc(100vw - 40px));
    }

    .notif-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px 12px;
        border-bottom: 1px solid var(--mud-palette-divider);
    }

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

    .notif-header-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
    }

    .notif-count-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--mud-palette-error);
        color: white;
        font-size: 10px;
        font-weight: 700;
        border-radius: 10px;
        min-width: 18px;
        height: 16px;
        padding: 0 4px;
    }

    .notif-scroll {
        max-height: 420px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--mud-palette-divider) transparent;
    }

    .notif-scroll::-webkit-scrollbar { width: 4px; }
    .notif-scroll::-webkit-scrollbar-thumb { background: var(--mud-palette-divider); border-radius: 4px; }

    .notif-item-wrapper.mud-menu-item {
        padding: 0;
        border-bottom: 1px solid var(--mud-palette-divider);
    }

    .notif-item-wrapper.mud-menu-item:hover { background: var(--mud-palette-action-hover) !important; }

    .notif-row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 11px 16px;
    }

    .notif-row-unread { background: rgba(var(--mud-palette-primary-rgb), 0.04); }

    .notif-dot-col {
        width: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 4px;
        flex-shrink: 0;
    }

    .notif-unread-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--mud-palette-primary);
        display: block;
    }

    .notif-body { flex: 1; min-width: 0; }

    .notif-title {
        font-size: 0.85rem;
        line-height: 1.4;
        color: var(--mud-palette-text-primary);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .notif-title-bold { font-weight: 600; }

    .notif-meta {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-top: 3px;
        flex-wrap: wrap;
    }

    .notif-priority-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
        display: inline-block;
    }

    .notif-meta-text { font-size: 0.72rem; color: var(--mud-palette-text-secondary); }
    .notif-meta-sep { font-size: 0.72rem; color: var(--mud-palette-text-disabled); }
    .notif-overdue { color: var(--mud-palette-error) !important; font-weight: 600; }
    .notif-due-soon { color: var(--mud-palette-warning) !important; font-weight: 500; }

    .notif-footer-item-wrapper.mud-menu-item {
        padding: 0;
        border-top: 1px solid var(--mud-palette-divider);
        background: rgba(0,0,0,0.02);
    }

    .notif-footer-item-wrapper.mud-menu-item:hover { background: var(--mud-palette-action-hover) !important; }

    .notif-footer-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 16px;
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--mud-palette-primary);
    }

    .notif-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 36px 24px;
        gap: 8px;
    }

    .notif-empty-text { font-size: 0.85rem; color: var(--mud-palette-text-secondary); }

    /* Global search: up to 440px, giving way when the bar is short of room. */
    .global-search-container {
        flex: 0 1 440px;
        min-width: 0;
        margin: 0 16px;
    }

    .search-result-type-chip {
        font-size: 0.7rem;
        height: 18px;
        min-width: 50px;
    }

        /* Search dropdown styling */
        .mud-autocomplete .mud-popover {
            background-color: white !important;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
            border: 1px solid rgba(0, 0, 0, 0.08);
            max-height: 500px !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }
    
    .mud-autocomplete .mud-popover .mud-list {
        background-color: white !important;
        border-radius: 12px;
        max-height: none !important;
        overflow: visible !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    .mud-autocomplete .mud-popover .mud-list-item {
        overflow: visible !important;
    }
    
        .mud-autocomplete .mud-popover .mud-list-container {
            max-height: 480px !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }
    
        /* Prevent double scrollbars in global search */
        .global-search-input .mud-autocomplete .mud-popover {
            max-height: 500px !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }
    
    .global-search-input .mud-autocomplete .mud-popover .mud-list {
        max-height: none !important;
        overflow: visible !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    .global-search-input         .mud-autocomplete .mud-popover .mud-list-container {
            max-height: 480px !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }

    .mud-autocomplete .mud-list-item {
        border-radius: 8px;
        margin: 2px 4px;
        transition: all 0.2s ease;
    }

    .mud-autocomplete .mud-list-item:hover {
        background-color: var(--mud-palette-action-hover) !important;
        transform: translateX(2px);
    }
    
    /* General dropdown styling to ensure white backgrounds. Not tooltips: they are popovers too,
       but MudBlazor gives them white text, so a white bubble showed no text at all. */
    .mud-popover:not(.mud-tooltip) {
        background-color: white !important;
    }
    
    .mud-popover .mud-list {
        background-color: white !important;
    }
    
    
    .mud-popover .mud-list-item:hover {
        background-color: var(--mud-palette-action-hover) !important;
    }
    
    /* Fix for select dropdowns */
    .mud-select .mud-popover {
        background-color: white !important;
    }
    
    .mud-select .mud-popover .mud-list {
        background-color: white !important;
    }
    

    /* Tablet: the search box shrinks before anything else does. */
    @media (max-width: 959.98px) {
        .global-search-container {
            margin: 0 12px;
        }
    }

    /* The pinned pages need about 210px beside the bell; below 720px that leaves the search box too
       little to type in (70px at 600), and the menu holds every page anyway. */
    @media (max-width: 719.98px) {
        .quick-links {
            display: none;
        }
    }

    /* Phone: search moves behind an icon that opens it full width. */
    @media (max-width: 599.98px) {
        .app-superadmin-chip,
        .global-search-container {
            display: none;
        }

        .mobile-search-icon {
            display: inline-flex !important;
        }

        .app-brand-logo {
            height: 30px;
        }

        .app-brand-logo-custom {
            max-width: 120px;
        }
    }

    .mobile-search-icon {
        display: none;
    }

    /* Mobile search overlay */
    .mobile-search-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(10, 18, 32, 0.45);
        z-index: 1350;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 8px;
    }
    
    .mobile-search-container {
        width: calc(100% - 16px);
        max-width: 480px;
        background: white;
        border-radius: 14px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        padding: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .mobile-search-container .global-search-input {
        flex: 1;
    }
    
    .mobile-search-container .global-search-input .mud-input-control {
        margin: 0;
    }
    
    .mobile-search-close-btn {
        flex-shrink: 0;
    }

/* Feedback FAB — anchored to viewport, sits above the MudBlazor snackbar stack
   (which uses z-index ~1000 for bottom-right toasts) but below open dialogs
   (z-index 1300+). Opacity dip on scroll-bottom would be nice but unnecessary. */
.autoglazer-feedback-fab {
    position: fixed !important;
    right: 24px;
    bottom: 24px;
    z-index: 1100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

@media (max-width: 600px) {
    .autoglazer-feedback-fab {
        right: 16px;
        bottom: 16px;
    }
}

    /* ---- Customise shortcuts dialog ---------------------------------------------------------- */
    .quick-links-dialog .ql-heading {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--ag-ink-400, #667585);
    }

    .quick-links-dialog .ql-count {
        text-transform: none;
        letter-spacing: 0;
        font-weight: 500;
    }

    .quick-links-dialog .ql-slots,
    .quick-links-dialog .ql-options {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .quick-links-dialog .ql-row,
    .quick-links-dialog .ql-option {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 44px;
        padding: 4px 8px 4px 10px;
        border: 1px solid var(--ag-line, #e3e8ef);
        border-radius: 10px;
        background: #fff;
        font: inherit;
        font-size: 0.9rem;
        color: var(--ag-ink-900, #0a1220);
        text-align: left;
    }

    .quick-links-dialog .ql-chosen {
        cursor: grab;
        background: var(--ag-surface-2, #f7f9fc);
        transition: border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
    }

    .quick-links-dialog .ql-chosen.ql-dragging {
        opacity: 0.45;
    }

    .quick-links-dialog .ql-chosen.ql-over {
        border-color: var(--mud-palette-primary);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
    }

    .quick-links-dialog .ql-empty {
        border-style: dashed;
        background: transparent;
        color: var(--ag-ink-400, #667585);
        font-size: 0.85rem;
    }

    .quick-links-dialog .ql-grip {
        color: var(--ag-ink-400, #667585);
        flex-shrink: 0;
    }

    .quick-links-dialog .ql-icon {
        color: var(--mud-palette-primary);
        flex-shrink: 0;
    }

    .quick-links-dialog .ql-label {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-links-dialog .ql-actions {
        display: inline-flex;
        flex-shrink: 0;
    }

    .quick-links-dialog .ql-option {
        cursor: pointer;
        transition: background-color .12s ease, border-color .12s ease;
    }

    .quick-links-dialog .ql-option:hover:not(:disabled) {
        background: var(--ag-surface-3, #eef3f9);
        border-color: var(--mud-palette-primary);
    }

    .quick-links-dialog .ql-option:disabled {
        cursor: not-allowed;
        opacity: 0.55;
    }

    .quick-links-dialog .ql-add {
        color: var(--ag-ink-400, #667585);
    }