/* ============================================================
   User Management - Excel-style sheet
   ------------------------------------------------------------
   Replaces the old card/header treatment. The page is now a plain
   full-width spreadsheet: a flat toolbar strip, a borderless-body
   sheet with visible gridlines that fills the leftover viewport
   height, and a plain permissions strip underneath.

   Scoping: everything is anchored on the .wua-users-host /
   .wua-users-page classes rendered by
   dash_actions/UserManagement.js and UserManagementView.js, so no
   other page can match. Nothing here depends on inline styles any
   more, so React re-renders and future markup tweaks cannot break
   the layout the way the old `height: 400px` anchor did.

   Desktop only: below 769px the mobile block at the bottom of this
   file and mobile-responsive-fixes.css take over.
   ============================================================ */

@media screen and (min-width: 769px) {

    /* ---- 1. Host: fill the dashboard pane, drop the old padding ---- */
    .mjdhs-irpe > .wua-users-host {
        padding: 0 !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* ---- 2. Page column ---- */
    .wua-users-page {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    /* ---- 3. Toolbar ----
       The coloured header band itself comes from the app-wide
       .lksjs-pepe class (same gradient, left accent bar, radius,
       title colour and dark-mode variant used by Customers, Staff,
       Invoicing, Payments, Settings and the rest). Only the flex
       arrangement is set here, so the header matches every other page
       instead of re-implementing the look. */
    .wua-users-toolbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 10px 12px !important;
    }

    .wua-users-heading {
        display: flex !important;
        align-items: baseline !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    /* Title text is styled by .lksjs-pepe h3 - deliberately not
       overridden here so it stays identical to the other pages. */
    .wua-users-count {
        font-size: 12px !important;
        font-weight: 600;
        color: #5f6b7a !important;
        white-space: nowrap !important;
    }

    [data-theme="dark"] .wua-users-count {
        color: #90a4ae !important;
    }

    .wua-users-tools {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .wua-users-search {
        width: 300px !important;
        max-width: 100% !important;
    }

    .wua-users-search input {
        font-size: 13px !important;
    }

    /* ---- 4. Sheet: Excel-style bordered panel, fills leftover height ---- */
    .wua-users-sheet {
        position: relative !important;
        flex: 1 1 auto !important;
        min-height: 240px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border: 1px solid #b0bec5 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .06) !important;
        overflow: hidden !important;
    }

    .wua-users-sheet > .MuiDataGrid-root {
        height: 100% !important;
    }

    /* ---- 5. Blue header band: grid column headers + search field ----
       The column header row (Checkbox selection, ID, Name, Username 1,
       Username 2, Role, Phone, Email, Status, Last Login) and the Search
       box are filled with the app's blue and their text turned white.
       Body cells keep the white/Excel look so the data stays readable. */
    /* main.css paints `background:linear-gradient(180deg,#6366f11a,#6366f108)
       !important` + `color:#000 !important` on BOTH `.MuiDataGrid-columnHeaders`
       and every `.MuiDataGrid-columnHeader`. That near-white wash sits on each
       header cell and hides the fill, so the blue must be re-asserted on the
       cells themselves, not just on the scrolling container. */
    .wua-users-sheet .MuiDataGrid-columnHeaders,
    .wua-users-sheet .MuiDataGrid-columnHeaders .MuiDataGrid-columnHeader,
    .wua-users-sheet .MuiDataGrid-columnHeader {
        background: linear-gradient(135deg, #1565c0, #1976d2) !important;
        background-color: #1976d2 !important;
        color: #fff !important;
        border-bottom: 1px solid #0d47a1 !important;
        border-right: 1px solid rgba(255, 255, 255, .28) !important;
    }

    /* modern-ui-enhancements.css lays a translucent white sheet over whichever
       column is sorted, which greys out the blue and fades the white label. */
    .wua-users-sheet .MuiDataGrid-columnHeader--sorted,
    .wua-users-sheet .MuiDataGrid-columnHeader--sorted .MuiDataGrid-columnHeaderTitleContainer {
        background: linear-gradient(135deg, #1565c0, #1976d2) !important;
        background-color: #1976d2 !important;
        color: #fff !important;
    }

    .wua-users-sheet .MuiDataGrid-columnHeader .MuiDataGrid-columnHeaderTitle,
    .wua-users-sheet .MuiDataGrid-columnHeader .MuiDataGrid-columnHeaderTitleContainer,
    .wua-users-sheet .MuiDataGrid-columnHeaderTitle,
    .wua-users-sheet .MuiDataGrid-root [role="columnheader"] {
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: .3px;
        text-transform: uppercase;
        color: #fff !important;
    }

    /* main.css also forces `overflow:hidden` + `white-space:normal` + centred
       text + `text-overflow:ellipsis` on the header labels, which wraps
       "Username 1"/"Last Login" onto a second line and shaves the descenders
       off. One line, left aligned, nothing trimmed. */
    .wua-users-sheet .MuiDataGrid-columnHeader .MuiDataGrid-columnHeaderTitle,
    .wua-users-sheet .MuiDataGrid-columnHeaderTitle,
    .wua-users-sheet .MuiDataGrid-root [role="columnheader"] {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        text-align: left !important;
        line-height: 1.3 !important;
    }

    /* "Select all" checkbox in the header row, plus sort/menu affordances,
       which default to dark grey and vanish on a blue background. */
    .wua-users-sheet .MuiDataGrid-columnHeader .MuiCheckbox-root,
    .wua-users-sheet .MuiDataGrid-columnHeader .MuiCheckbox-root svg {
        color: #fff !important;
        fill: #fff !important;
    }

    .wua-users-sheet .MuiDataGrid-columnHeader .MuiDataGrid-sortIcon,
    .wua-users-sheet .MuiDataGrid-columnHeader .MuiDataGrid-menuIcon,
    .wua-users-sheet .MuiDataGrid-columnHeader .MuiDataGrid-menuIconButton:hover {
        color: rgba(255, 255, 255, .8) !important;
        fill: rgba(255, 255, 255, .8) !important;
    }

    .wua-users-sheet .MuiDataGrid-columnHeader:focus,
    .wua-users-sheet .MuiDataGrid-columnHeader:focus-within {
        outline: none !important;
    }

    .wua-users-search .MuiOutlinedInput-root {
        background: linear-gradient(135deg, #1565c0, #1976d2) !important;
        border-radius: 8px !important;
    }

    .wua-users-search .MuiOutlinedInput-notchedOutline {
        border-color: #0d47a1 !important;
    }

    .wua-users-search .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
        border-color: #64b5f6 !important;
    }

    .wua-users-search .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
        border-color: #90caf9 !important;
        border-width: 2px !important;
    }

    .wua-users-search input,
    .wua-users-search input.MuiInputBase-input {
        color: #fff !important;
    }

    .wua-users-search input::placeholder {
        color: rgba(255, 255, 255, .85) !important;
        opacity: 1 !important;
    }

    .wua-users-search .MuiInputAdornment-root {
        color: #fff !important;
    }

    .wua-users-sheet .MuiDataGrid-cell {
        font-size: 13px !important;
        border-right: 1px solid #eceff1 !important;
        border-bottom: 1px solid #eceff1 !important;
    }

    .wua-users-sheet .MuiDataGrid-cell:focus,
    .wua-users-sheet .MuiDataGrid-cell:focus-within {
        outline: none !important;
    }

    .wua-cell-strong {
        font-weight: 600;
    }

    .wua-cell-muted {
        color: #90a4ae;
    }

    /* ---- 6. Row action bar (checkbox selection) ------------------
       Reuses the app-wide .tables-actions-handle markup so the buttons
       pick up the shared blue underlined text-link styling, but is
       flattened here to match the sheet instead of a drop-shadow card. */
    .wua-users-actions {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px 10px !important;
        margin: 0 0 8px !important;
        padding: 7px 12px !important;
        width: 100% !important;
        background: #eef4fb !important;
        border: 1px solid #90caf9 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .06) !important;
    }

    .wua-users-actions .content-centre {
        flex: 0 0 auto !important;
        padding: 0 !important;
    }

    .wua-users-actions .content-centre h3 {
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: .3px;
        color: #0d47a1 !important;
    }

    .wua-users-actions .actions-items {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 2px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .wua-users-selection {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #0d47a1 !important;
        margin-right: 10px !important;
        white-space: nowrap !important;
    }

    .wua-users-actions button[disabled] {
        opacity: .45 !important;
        cursor: not-allowed !important;
    }

    .wua-users-action-danger,
    .wua-users-action-danger:hover {
        color: #c62828 !important;
        border-bottom-color: #c62828 !important;
    }

    /* ---- 7. Permissions strip: plain, scrolls internally ---- */
    .wua-users-permissions {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        background: #fff !important;
        border: 1px solid #b0bec5 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .06) !important;
        max-height: 42vh;
        overflow: auto;
    }

    .wua-users-permissions-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid #eceff1;
    }

    .wua-users-permissions-head h4 {
        margin: 0 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    .wua-users-permissions-tools {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .wua-users-hint {
        flex: 0 0 auto !important;
        margin-top: 8px !important;
        padding: 8px 12px !important;
        font-size: 12.5px;
        color: #5f6b7a;
        background: #f6f8fa;
        border: 1px solid #b0bec5;
        border-radius: 8px;
    }

    /* ---- 8. Login Info dialog ---- */
    .wua-login-info {
        display: grid;
        grid-template-columns: 130px 1fr;
        gap: 6px 12px;
        margin: 8px 0 0;
    }

    .wua-login-info dt {
        font-weight: 700;
        color: #37474f;
    }

    .wua-login-info dd {
        margin: 0;
        word-break: break-all;
    }

    /* ---- 9. Dark mode ----
       The header band's own dark variant comes from .lksjs-pepe, so
       only the pieces this file owns are listed here. */
    [data-theme="dark"] .wua-users-count {
        color: #90a4ae !important;
    }

    [data-theme="dark"] .wua-users-actions {
        background: #1b2440 !important;
        border-color: #37474f !important;
    }

    [data-theme="dark"] .wua-users-sheet,
    [data-theme="dark"] .wua-users-permissions {
        background: #1a1a2e !important;
        border-color: #37474f !important;
    }

    [data-theme="dark"] .wua-users-sheet .MuiDataGrid-columnHeaders {
        background: linear-gradient(135deg, #1565c0, #1976d2) !important;
    }

    [data-theme="dark"] .wua-users-sheet .MuiDataGrid-columnHeader {
        color: #fff !important;
        border-right-color: rgba(255, 255, 255, .28) !important;
    }

    [data-theme="dark"] .wua-users-sheet .MuiDataGrid-cell {
        border-right-color: #2c3550 !important;
        border-bottom-color: #2c3550 !important;
    }

    [data-theme="dark"] .wua-users-permissions-head {
        border-bottom-color: #37474f !important;
    }

    [data-theme="dark"] .wua-users-hint {
        background: #16162a !important;
        border-color: #37474f !important;
    }
}

/* ============================================================
   Mobile: keep a small gutter and stack the toolbar. The sheet,
   permissions strip and dialog list keep their desktop styling.
   ============================================================ */
@media screen and (max-width: 768px) {
    .mjdhs-irpe > .wua-users-host {
        padding: 12px !important;
    }

    .wua-users-toolbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .wua-users-tools {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .wua-users-search {
        width: 100% !important;
    }
}