h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

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

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


/*Common CSS*/
.app {
    display: flex;
    height: 100vh;
    width: 100%;
}

.content {
    flex: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 15px;
    background: #eef1f8;
}

/* Sidebar */
.sidebar {
    width: 250px;
    background: #1e293b;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
}

.app.sidebar-closed .sidebar {
    width: 0px;
    overflow: hidden;
}

.app.sidebar-open .sidebar {
    width: 250px;
    overflow: hidden;
}

.sidebar-top {
    padding: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.sidebar-links {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0px;
}

.sidebar-bottom {
    padding: 8px 20px;
    border-top: 1px solid rgba(255,255,255, .07);
}


.marginTop5 {
    margin-top: 5px !important;
}

.marginTop10 {
    margin-top: 10px !important;
}

.marginTop15 {
    margin-top: 15px !important;
}

.marginTop20 {
    margin-top: 20px !important;
}

.requiredEntry::before {
    content: "*";
    color: red;
    padding-right: 3px;
    /*font-size: 13.5px;*/
}

/* Grid CSS */
.edit-icon {
    color: #0029ff !important;
    background: #0064ff1c !important;
    border: 1px solid #0064ff1c !important;
    font-size: 14px !important;
    padding: 3px !important
}

    .edit-icon:disabled {
        color: #555 !important;
        cursor: not-allowed;
    }

.delete-icon {
    color: #d60c0c !important;
    background: #a52a2a1c !important;
    border: 1px solid #a52a2a1c !important;
    font-size: 14px !important;
    padding: 3px !important
}

    .delete-icon:disabled {
        color: #555 !important;
        cursor: not-allowed;
    }

.info-icon {
    color: #565005 !important;
    background: #56500524 !important;
    border: 1px solid #0064ff1c !important;
    font-size: 14px !important;
    padding: 3px !important;
}

    .info-icon:disabled {
        color: #555 !important;
        cursor: not-allowed;
    }

.k-column-title {
    color: black;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px
}

.k-grid .k-cell-inner > .k-link {
    display: flex !important;
    justify-content: center !important;
    padding: 8px 5px !important;
}

.k-grid td, .k-grid .k-table-td {
    font-size: 13px !important
}

td.k-table-td.k-command-cell {
    text-align: center;
}

.k-grid .k-grid-header .k-table-th {
    background: #e5e5e5;
}

.k-checkbox-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

    .k-checkbox-wrap .k-checkbox {
        border: 1px solid #000 !important;
    }

/* Page Form CSS */
.field-label {
    font-size: 14px;
    font-weight: 500;
    color: #525b67;
    letter-spacing: 0.3px;
}

.input-wrap {
    position: relative;
    /*width: 100%;*/
}

.input-field {
    background: #ffffff;
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 14px;
    color: #1e293b;
    outline: none;
    width: 100%;
    font-family: 'JetBrains Mono', monospace;
}

    .input-field:focus {
        border-color: rgba(47, 128, 237, .42);
        box-shadow: 0 0 0 3px rgba(47, 128, 237, .10);
    }

    .input-field::placeholder {
        color: rgba(26, 18, 40, 0.28);
    }

.search-icon {
    position: absolute;
    top: 30%;
    right: 14px;
    color: #64748b;
    font-size: 14px;
}

/* content header css */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 12px;
    background: white;
    border-radius: 5px;
    padding: 10px 12px;
}

.page-title h1 {
    /*font-family: 'Sora', sans-serif;*/
    font-size: 20px;
    font-weight: 700;
    color: black;
    letter-spacing: 0.9px;
    line-height: 1.2;
    margin-bottom: 0px;
}

.page-title p {
    font-size: 14px;
    color: gray;
    margin-top: 3px;
    margin-bottom: 0px;
}

.hamburger-btn {
    background-color: #1e293b;
    color: white;
    border-radius: 4px;
    width: 40px;
    height: 35px;
    font-size: 18px;
}

/* buttons css */
.btnCancel, .btnCommon, .btnExtra1, .btnExtra2, .btnExtra3 {
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    transition: box-shadow 0.2s, transform 0.15s;
    box-shadow: 0 8px 16px #1a335c21;
    letter-spacing: 0.6px;
    cursor: pointer;
}

.btnCancel {
    border: 1.5px solid #ef4444;
    background: linear-gradient(135deg, #f87171, #ef4444);
    color: white;
}

    .btnCancel:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px #1a335c33;
    }

.btnCommon {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    color: white;
}

    .btnCommon:hover {
        box-shadow: 0 6px 20px rgba(99,102,241,0.45);
        transform: translateY(-1px);
    }

.btnExtra1 {
    border: 1.5px solid #059669;
    background: linear-gradient(135deg, #059669, #1cb783);
    color: white;
}

    .btnExtra1:hover {
        transform: translateY(-1px);
    }

.btnExtra2 {
    background: #0f2040;
    color: #fff;
}

    .btnExtra2:hover {
        transform: translateY(-1px);
    }

.btnExtra3 {
    border: 1.5px solid #058f96;
    background: linear-gradient(135deg, #17829b, #0288bb);
    color: white;
}

    .btnExtra3:hover {
        transform: translateY(-1px);
    }

/* Common card css */
.commonwhitecard {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
}

.cardtitle {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: black;
    margin-bottom: 15px;
    padding: 0px 0px 0px 14px;
    border-left: 3px solid #db3700;
    letter-spacing: 1px;
}

/* Modal css */
.commonmodalheader {
    display: flex !important;
    flex-direction: column !important;
    align-items: start !important;
    padding: 20px !important;
    border-bottom: 1px solid rgba(102, 126, 172, 0.18) !important;
}

    .commonmodalheader h5 {
        font-size: 20px;
        font-weight: 700;
        color: #000000d6;
        margin-bottom: 4px;
        letter-spacing: 0.8px
    }

    .commonmodalheader p {
        font-size: 14px;
        font-weight: 400;
        color: #494949;
        letter-spacing: 0.8px
    }

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 4px; /* super thin */
}

/* Remove track completely */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Thin vertical line */
::-webkit-scrollbar-thumb {
    background: #85a3d3; /* light blue */
    border-radius: 0; /* straight line (no round) */
}

    /* Optional: slightly brighter on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #85a3d3;
    }

/* Telerik Grid Scroll Area */
.k-grid-content,
.k-grid-content-locked,
.k-grid .k-table-content {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #85a3d3 transparent;
}

    /* Chrome, Edge, Safari */
    .k-grid-content::-webkit-scrollbar,
    .k-grid-content-locked::-webkit-scrollbar,
    .k-grid .k-table-content::-webkit-scrollbar {
        width: 4px;
        height: 4px; /* horizontal scrollbar */
    }

    /* Remove track */
    .k-grid-content::-webkit-scrollbar-track,
    .k-grid-content-locked::-webkit-scrollbar-track,
    .k-grid .k-table-content::-webkit-scrollbar-track {
        background: transparent;
    }

    /* Thin scrollbar line */
    .k-grid-content::-webkit-scrollbar-thumb,
    .k-grid-content-locked::-webkit-scrollbar-thumb,
    .k-grid .k-table-content::-webkit-scrollbar-thumb {
        background: #85a3d3;
        border-radius: 0;
    }

        /* Hover effect */
        .k-grid-content::-webkit-scrollbar-thumb:hover,
        .k-grid-content-locked::-webkit-scrollbar-thumb:hover,
        .k-grid .k-table-content::-webkit-scrollbar-thumb:hover {
            background: #85a3d3;
        }

.commonalert {
    padding: 6px 12px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.gridtotalcount {
    color: #2b2b2b;
    font-size: 14px;
    margin-bottom: 0px;
}

.grid-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* OTP Boxes */
.otp-row {
    display: flex;
    gap: .65rem;
    justify-content: center;
    margin: 1.5rem 0 .5rem;
}

.otp-box {
    width: 52px;
    height: 60px;
    border-radius: 12px;
    border: 1.5px solid rgb(0 0 0 / 32%);
    background: rgba(255, 255, 255, .05);
    color: #0B0E1A;
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    appearance: none;
    padding: 0px !important;
}

    .otp-box:focus {
        border-color: #F5C518;
        background: rgba(245, 197, 24, .08);
        box-shadow: 0 0 0 3px rgba(245, 197, 24, .18);
    }

    .otp-box.filled {
        border-color: rgba(245, 197, 24, .55);
        background: rgba(245, 197, 24, .07);
    }

    .otp-box.error {
        border-color: rgba(245, 80, 80, .7) !important;
        background: rgba(245, 80, 80, .07) !important;
        box-shadow: 0 0 0 3px rgba(245, 80, 80, .15) !important;
        animation: shake .35s ease;
    }

    .otp-box.success-box {
        border-color: rgba(46, 204, 113, .7) !important;
        background: rgba(46, 204, 113, .08) !important;
        box-shadow: 0 0 0 3px rgba(46, 204, 113, .15) !important;
    }

@keyframes shake {
    0%, 100% {
        transform: translateX(0)
    }

    20% {
        transform: translateX(-5px)
    }

    60% {
        transform: translateX(5px)
    }

    80% {
        transform: translateX(-3px)
    }
}

/* Tabs Css */
.k-tabstrip-items .k-item {
    background-color: white !important;
    color: #4f4f4f !important;
    padding: 10px !important;
    border-radius: 0px !important;
}

.k-tabstrip-items-wrapper .k-item.k-active {
    background-color: #0f346014 !important;
    color: #0f3460 !important;
    padding: 6px 10px !important;
    border-top: 2px solid #0f3460 !important;
    border: none;
}

.k-tabstrip-items-wrapper .k-item:focus {
    box-shadow: none !important;
}

.k-tabstrip-items-wrapper .k-item.k-selected {
    color: black !important;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item .k-link {
    padding: 0px !important;
    font-size: 14.4px !important;
    font-weight: 500 !important;
}

/*.k-tabstrip-content {
    background: white !important;
    border: none !important
}*/

/*All Grid Common CSS*/
.grid-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.flex-grid {
    flex: 1;
    min-height: 0;
}

    .flex-grid .k-grid {
        height: 100% !important;
        display: flex;
        flex-direction: column;
    }

    .flex-grid .k-grid-content {
        flex: 1 !important;
        overflow: auto !important;
        min-height: 0 !important;
    }

@media screen and (max-width: 1024px) and (max-height: 768px) {
    .content {
        padding: 12px;
    }

    .sidebar {
        width: 210px;
    }

    .sidebar-top {
        padding: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
        text-align: center;
    }

    .sidebar-bottom {
        padding: 6px 20px;
        border-top: 1px solid rgba(255,255,255, .07);
    }

    .page-header {
        margin-bottom: 15px;
        padding: 15px;
    }

    .page-title h1 {
        font-size: 17px;
    }

    .page-title p {
        font-size: 12px;
        width: 360px;
    }

    .btnCancel {
        padding: 8px 20px;
        font-size: 13px;
    }

    .btnCommon {
        padding: 8px 20px;
        font-size: 13px;
    }

    .btnExtra1 {
        padding: 6px 8px;
        font-size: 12px;
    }

    .btnExtra2 {
        padding: 6px 8px;
        font-size: 12px;
    }

    .closeshiftbtn {
        padding: 6px 8px;
        font-size: 12px;
    }

    .cardtitle {
        font-size: 13px;
        padding: 0px 0px 0px 8px;
        margin-bottom: 10px;
    }

    .commonmodalheader {
        padding: 18px !important;
    }

        .commonmodalheader h5 {
            font-size: 17px;
            margin-bottom: 4px;
        }

        .commonmodalheader p {
            font-size: 12px;
        }

    .commonwhitecard {
        padding: 14px;
    }

    .sidebar-links {
        padding: 0px 0px;
    }

    .marginTopR20 {
        margin-top: 15px !important;
    }

    .k-column-title {
        font-size: 11.6px;
    }

    .k-grid .k-cell-inner > .k-link {
        padding: 5px !important;
    }

    .k-grid td, .k-grid .k-table-td {
        font-size: 11.4px !important;
        padding: 4px 5px !important;
    }

    .edit-icon {
        font-size: 12px !important;
        padding: 1px !important
    }

    .delete-icon {
        font-size: 12px !important;
        padding: 1px !important
    }

    .field-label {
        font-size: 11.2px;
        letter-spacing: normal;
    }

    .input-field {
        padding: 6px 8px;
        font-size: 12px;
        letter-spacing: normal;
    }

        .input-field:focus {
            border-color: rgba(47, 128, 237, .42);
            box-shadow: none;
        }

    .search-icon {
        right: 6%;
        top: 33%;
        font-size: 12px;
    }

    .gridtotalcount {
        font-size: 12px;
    }
}

/* ── Document background ─────────────────────────────────────────────────────
   APPENDED AT THE END ON PURPOSE. wwwroot/mobile.css cites roughly 25 specific
   app.css line numbers in its comments; inserting anything above this point
   invalidates all of them at once. Add new global rules here, not at the top.

   The document had no background of its own and fell back to the UA white. On
   desktop that never showed, because .app fills the viewport. On mobile — where
   the body owns the scroll — it appeared as white bands behind the iOS status
   bar and toolbar, and on any rubber-band overscroll. #eef1f8 is the same shell
   colour .content uses, so the page reads as one surface.

   Deliberately NOT paired with a <meta name="theme-color">: that is a single
   site-wide value, and this app has a dark landing page and a light shell, so
   one of them would always be wrong. With no theme-color, Safari samples the
   page itself and tints its chrome per page — which gets both right. */
body {
    background: #eef1f8;
}

}

/* ══════════════════════════════════════════════════════════════════════════════
   Management console (Alt+U): Stores / Users / Roles & Permissions
   ──────────────────────────────────────────────────────────────────────────────
   Global, not scoped. ManageStoresModal has no .razor.css of its own, so the
   .store-tab rules in Registration.razor.css never reached it - the tab strip
   below is defined here so the console's tabs render for every component that
   uses them.
   ══════════════════════════════════════════════════════════════════════════════ */

.store-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.store-tab {
    flex: 1;
    padding: 9px 0;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #c4a000;
    cursor: pointer;
    letter-spacing: .03em;
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    transition: all .15s;
}

    .store-tab:hover {
        background: #fdf8e1;
        color: #7a5c00;
    }

    .store-tab.active {
        color: #7a5c00;
        border-bottom: 2.5px solid #f5c842;
    }

    .store-tab:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

/* .mgmt-modal-body turns the Bootstrap scrollable body into a flex column so the
   tab strip stays put and only .mgmt-tab-scroll moves. The body itself must NOT
   scroll, otherwise the strip rides up with the content. */
.modal-dialog-scrollable .modal-body.mgmt-modal-body,
.mgmt-modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
}

.mgmt-tabs {
    flex: 0 0 auto;
    margin-bottom: 14px;
}

/* Plain block, deliberately not a flex container: the Stores accordion overflows
   this box, and flex items would shrink to fit instead of scrolling. */
.mgmt-tab-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.mgmt-panel {
    padding: 2px 0 6px;
}

/* Editor mode (New/Edit user or role). The panel takes the full height of the
   scroll area and hands the scrolling to its own middle section, which pins the
   title row above and the Cancel/Save row below. With only the editor inside,
   the scroll box can safely become a flex parent, which gives the panel a
   definite height to fill; height:100% covers browsers without :has(). */
.mgmt-tab-scroll:has(> .mgmt-editor) {
    display: flex;
    flex-direction: column;
}

.mgmt-panel.mgmt-editor {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    padding: 0;
}

.mgmt-editor-head {
    flex: 0 0 auto;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0e6c8;
    background: #fff;
}

    .mgmt-editor-head .mgmt-toolbar {
        margin-bottom: 0;
    }

.mgmt-editor-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 2px 12px;
}

.mgmt-editor-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 2px;
    border-top: 1px solid #f0e6c8;
    background: #fff;
}

    .mgmt-editor-foot .mgmt-foot-err {
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

.mgmt-foot-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Round icon action for destructive row buttons (delete user / delete role). */
.mgmt-icon-danger {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(185, 28, 28, .45);
    background: #fff5f5;
    color: #b91c1c;
    font-size: .82rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .18s;
}

    .mgmt-icon-danger:hover:not(:disabled) {
        background: #dc2626;
        border-color: #dc2626;
        color: #fff;
        box-shadow: 0 4px 12px rgba(220, 38, 38, .28);
    }

    .mgmt-icon-danger:focus-visible {
        outline: 2px solid #f87171;
        outline-offset: 2px;
    }

    .mgmt-icon-danger:disabled {
        opacity: .45;
        cursor: not-allowed;
        background: #f9fafb;
        border-color: #e5e7eb;
        color: #9ca3af;
    }

/* The pinned Cancel/Save row sits outside .modal-footer, so mobile.css's footer
   sizing does not reach it - give it the same 44px tap targets here. */
@media screen and (max-width: 767.98px) {
    .mgmt-editor-foot {
        flex-wrap: wrap;
    }

    .mgmt-foot-actions {
        width: 100%;
        margin-left: 0;
    }

        .mgmt-foot-actions > button {
            flex: 1 1 140px;
            min-height: 44px;
        }

    .mgmt-icon-danger {
        width: 36px;
        height: 36px;
    }
}

.mgmt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.mgmt-hint {
    font-size: .72rem;
    color: rgba(26, 18, 40, .5);
}

/* ── List rows (a user, a role) ─────────────────────────────────────────────── */

.mgmt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 8px;
    background: #fff;
}

    .mgmt-row:hover {
        border-color: #f0dc9a;
        background: #fffdf5;
    }

.mgmt-row-main {
    min-width: 0;
}

.mgmt-row-title {
    font-size: .86rem;
    font-weight: 700;
    color: #1A1228;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mgmt-row-sub {
    font-size: .72rem;
    color: rgba(26, 18, 40, .55);
    margin-top: 2px;
}

.mgmt-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mgmt-chip {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fdf5cc;
    color: #7a5c00;
}

    .mgmt-chip.inactive {
        background: #f3f4f6;
        color: #6b7280;
    }

    .mgmt-chip.sensitive {
        background: #fee2e2;
        color: #b91c1c;
        padding: 1px 6px;
    }

/* ── Permission checkbox grid ───────────────────────────────────────────────── */

.mgmt-perm-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: .78rem;
    font-weight: 700;
    color: #1A1228;
    margin-bottom: 6px;
}

.mgmt-perm-group {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 8px 12px 10px;
    margin-bottom: 8px;
}

.mgmt-perm-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .74rem;
    font-weight: 700;
    color: #7a5c00;
    margin-bottom: 6px;
}

.mgmt-perm-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 4px 12px;
}

.mgmt-perm-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .76rem;
    color: #1A1228;
    cursor: pointer;
    margin: 0;
}

    .mgmt-perm-item input[type="checkbox"] {
        accent-color: #f5c518;
        width: 14px;
        height: 14px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .mgmt-perm-item.sensitive span {
        color: #7f1d1d;
    }

    .mgmt-perm-item input:disabled {
        cursor: not-allowed;
    }

/* ── Per-store role assignment ──────────────────────────────────────────────── */

.mgmt-store-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 6px;
}

    .mgmt-store-row select {
        max-width: 210px;
        font-size: .75rem;
        padding: 5px 8px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
        color: #1A1228;
    }

        .mgmt-store-row select:disabled {
            background: #f9fafb;
            color: #9ca3af;
            cursor: not-allowed;
        }

/* ── Form skin for the console panels ───────────────────────────────────────
   ManageStoresModal carries this skin (label.fl, .input-icon, the input box)
   in its own inline <style>, which is only in the DOM while that modal is
   open. ManageUsersPanel / ManageRolesPanel used to render nowhere else, so
   they rode on it - but they now also render on /user-management, where the
   modal is absent and every field fell back to unstyled browser defaults: the
   icon sat inline BEFORE the input instead of inside it. Same reason the
   .store-tab rules further up live here rather than in a component.

   Scoped to .mgmt-form and NOT published as a bare .input-wrap rule on
   purpose: 21 components use .input-wrap, each with its own copy of the skin
   in its .razor.css (Registration, ChangePasswordModal, ForgotPassword), and a
   global rule would restyle all of them. The values below are copied verbatim
   from ManageStoresModal.razor so the console renders exactly as before.
   ─────────────────────────────────────────────────────────────────────────── */

.mgmt-form .fl {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: #3D3152;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.mgmt-form .input-wrap {
    position: relative;
}

.mgmt-form .input-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: .55;
    pointer-events: none;
    color: orange;
    z-index: 1;
    line-height: 1;
}

.mgmt-form .input-wrap input[type=text],
.mgmt-form .input-wrap input[type=email],
.mgmt-form .input-wrap input[type=password],
.mgmt-form .input-wrap input[type=number],
.mgmt-form .input-wrap select {
    width: 100%;
    padding: 8px 10px 8px 32px;
    background: #FFFBF0;
    border: 1.5px solid rgba(26, 18, 40, 0.1);
    border-radius: 8px;
    color: #1A1228;
    font-family: 'DM Sans', sans-serif;
    font-size: .85rem;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
    appearance: auto;
}

    .mgmt-form .input-wrap input:focus,
    .mgmt-form .input-wrap select:focus {
        border-color: #F5C518;
        background: #FFFFFF;
        box-shadow: 0 0 0 3px rgba(245, 197, 24, .12);
    }

    .mgmt-form .input-wrap input:disabled,
    .mgmt-form .input-wrap select:disabled {
        opacity: .5;
        cursor: not-allowed;
        background: rgba(26, 18, 40, .04);
    }

.mgmt-form .input-wrap input::placeholder {
    color: rgba(26, 18, 40, 0.28);
}

.mgmt-form .ferr {
    font-size: .72rem;
    color: #c00;
    margin-top: 2px;
    padding-left: 1px;
}

/* A hint sitting under its field, rather than beside a heading. */
.mgmt-form .input-wrap + .mgmt-hint {
    display: block;
    margin-top: 5px;
    line-height: 1.4;
}

/* Role Code is an identifier and is upper-cased on change; show that while
   typing instead of only after the field loses focus. */
.mgmt-code-input input {
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Editor sections ────────────────────────────────────────────────────────
   One heading grammar for both editors. .mgmt-form-section is the bordered
   card used for a block of fields; .mgmt-section-head is also used on its own
   above a list that brings its own boxes (the permission groups, the per-store
   rows), so those never end up as a card inside a card. */

.mgmt-form-section {
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
    padding: 14px 16px 16px;
    margin-bottom: 14px;
}

.mgmt-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #7a5c00;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #f0e6c8;
}

    .mgmt-section-head i {
        margin-right: 7px;
        opacity: .75;
    }

/* Standalone (not inside a card): it heads the list that follows, so it
       needs the gap above that the card's own margin would have given. */
.mgmt-form-section + .mgmt-section-head,
.data-status-bar + .mgmt-section-head {
    margin-top: 2px;
}

/* ── Small buttons & status bars used by the console panels ─────────────────── */

.btn-small,
.btn-small-danger {
    font-size: .72rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #1A1228;
    cursor: pointer;
    transition: all .15s;
}

    .btn-small:hover:not(:disabled) {
        border-color: #f5c518;
        background: #fffbf0;
    }

.btn-small-danger {
    border-color: #fecaca;
    color: #b91c1c;
}

    .btn-small-danger:hover:not(:disabled) {
        background: #fef2f2;
        border-color: #f87171;
    }

    .btn-small:disabled,
    .btn-small-danger:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

.btn-link {
    background: none;
    border: none;
    padding: 0;
    font-size: .7rem;
    font-weight: 600;
    color: #c4a000;
    cursor: pointer;
}

    .btn-link:hover {
        color: #7a5c00;
        text-decoration: underline;
    }

.data-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: .74rem;
    padding: 8px 12px;
    border-radius: 10px;
    margin-bottom: 10px;
}

    .data-status-bar.no-data {
        background: #f0fdf4;
        color: #15803d;
        border: 1px solid #bbf7d0;
    }

    .data-status-bar.has-data {
        background: #fffbeb;
        color: #92400e;
        border: 1px solid #fde68a;
    }

/* Sign-up "Add your team" step */
.team-card {
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
}

/* Sidebar secondary action (Change Password) */
.sidebar-secondary-btn {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .78);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all .15s;
}

    .sidebar-secondary-btn:hover {
        border-color: #f5c518;
        color: #f5c518;
    }