.admin-app{min-height:100vh;background:#292929;display:flex;color:#18191c}.admin-sidebar{width:252px;flex:0 0 252px;background:#17181c;color:#fff;padding:24px 18px;display:flex;flex-direction:column;min-height:100vh;position:sticky;top:0}.admin-brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-size:22px;font-weight:850;letter-spacing:-.7px;padding:0 8px 25px}.admin-brand>span:last-child span{color:#ff4545}.admin-brand-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#d00000,#ff4545);display:grid;place-items:center;font-weight:900;font-size:21px;box-shadow:0 8px 20px rgba(208,0,0,.25)}.admin-profile{display:flex;align-items:center;gap:11px;padding:18px 8px;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}.admin-avatar{width:42px;height:42px;border-radius:12px;background:#c00000;display:grid;place-items:center;font-weight:850}.admin-profile strong,.admin-profile span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.admin-profile strong{font-size:13px}.admin-profile span{font-size:10px;color:#a5a6ab;margin-top:3px}.admin-menu{display:grid;gap:5px;padding-top:22px}.admin-menu-label{font-size:9px;font-weight:800;letter-spacing:1.5px;color:#74767d;padding:9px 11px 5px}.admin-menu a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:#aeb0b6;text-decoration:none;font-size:13px;transition:.18s}.admin-menu a:hover,.admin-menu a.active{background:#28292e;color:#fff}.admin-menu a.active i{color:#ff4545}.admin-menu a i{width:18px;text-align:center}.admin-signout{margin-top:auto;border:0;background:transparent;color:#ff9b9b;display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;font-size:13px;cursor:pointer;text-align:left}.admin-signout:hover{background:#28292e}.admin-main{min-width:0;flex:1}.admin-topbar{height:76px;background:#fff;border-bottom:1px solid #e7e8eb;padding:0 34px;display:flex;align-items:center;justify-content:space-between}.admin-topbar strong{display:block;font-size:16px;margin-top:2px}.admin-kicker{font-size:9px;font-weight:850;letter-spacing:1.6px;color:#c00000}.admin-topbar-actions{display:flex;align-items:center;gap:18px}.admin-status{font-size:11px;color:#6e7076;display:flex;align-items:center;gap:7px}.admin-status i{width:7px;height:7px;border-radius:50%;background:#22a565}.admin-topbar-actions>a{width:36px;height:36px;border:1px solid #e4e5e8;border-radius:10px;display:grid;place-items:center;color:#444;text-decoration:none}.admin-content{max-width:1400px;margin:0 auto;padding:34px;background:#292929;min-height:calc(100vh - 76px)}.admin-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:25px}.admin-page-head h1{font-size:30px;letter-spacing:-1px;margin:7px 0 5px}.admin-page-head p{margin:0;color:#777;font-size:13px}.admin-primary-button,.admin-secondary-button{height:42px;border:0;border-radius:11px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-size:12px;font-weight:750;cursor:pointer}.admin-primary-button{background:#c00000;color:#fff;box-shadow:0 7px 17px rgba(192,0,0,.16)}.admin-primary-button:hover{background:#a90000;color:#fff}.admin-secondary-button{background:#fff;color:#444;border:1px solid #ddd}.admin-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.admin-overview-card{background:#fff;border:1px solid #e5e6e9;border-radius:18px;padding:22px;display:grid;grid-template-columns:48px 1fr 20px;gap:15px;align-items:start;text-decoration:none;color:#191a1d;box-shadow:0 8px 24px rgba(25,25,35,.035);transition:.2s}.admin-overview-card:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(25,25,35,.08)}.overview-icon{width:48px;height:48px;border-radius:14px;background:#fff0f0;color:#c00000;display:grid;place-items:center;font-size:20px}.admin-overview-card span,.admin-overview-card strong,.admin-overview-card small{display:block}.admin-overview-card span{font-size:9px;letter-spacing:1.2px;color:#c00000;font-weight:800}.admin-overview-card strong{font-size:19px;margin:4px 0}.admin-overview-card small{font-size:12px;line-height:1.5;color:#85868a}.admin-overview-card>i{color:#999}.admin-table-card{background:#fff;border:1px solid #e4e5e8;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(25,25,35,.035)}.admin-table-toolbar{min-height:70px;padding:13px 18px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #ececef}.admin-table-toolbar>div:first-child strong,.admin-table-toolbar>div:first-child span{display:block}.admin-table-toolbar strong{font-size:14px}.admin-table-toolbar span{font-size:10px;color:#888;margin-top:3px}.admin-table-search{height:38px;width:min(300px,45%);border:1px solid #dddfe3;border-radius:10px;display:flex;align-items:center;gap:8px;padding:0 11px}.admin-table-search i{color:#aaa}.admin-table-search input{border:0;outline:0;width:100%;font-size:12px}.admin-table-wrap{overflow:auto}.admin-table{width:100%;border-collapse:collapse;min-width:760px}.admin-table th{background:#fafafb;color:#7b7c81;font-size:9px;letter-spacing:.8px;text-transform:uppercase;text-align:left;padding:12px 18px;border-bottom:1px solid #ececef}.admin-table td{padding:13px 18px;border-bottom:1px solid #f0f0f2;font-size:11px;color:#5f6065;vertical-align:middle}.admin-table tbody tr:last-child td{border-bottom:0}.table-user{display:flex;align-items:center;gap:10px;min-width:210px}.table-avatar{width:35px;height:35px;border-radius:10px;background:#f1f1f3;color:#444;display:grid;place-items:center;font-size:10px;font-weight:800}.table-user strong,.table-user span,.table-user small{display:block}.table-user strong{font-size:12px;color:#292a2d}.table-user span{font-size:10px;color:#777;margin-top:2px}.table-user small{font-size:9px;color:#aaa;margin-top:2px}.role-pill,.status-pill{display:inline-flex;padding:5px 9px;border-radius:20px;font-size:9px;font-weight:800}.role-pill.admin{background:#fff0f0;color:#bd0000}.role-pill.member{background:#f0f5ff;color:#3865a5}.status-pill.active{background:#eaf8f1;color:#16804a}.status-pill.inactive{background:#f2f2f3;color:#777}.actions-col{text-align:right!important}.row-actions{display:flex;justify-content:flex-end;gap:6px}.row-actions button{width:32px;height:32px;border:1px solid #e3e4e7;background:#fff;border-radius:9px;color:#555;cursor:pointer}.row-actions button:hover{background:#f5f5f6}.row-actions button.danger{color:#c00000}.table-manage-link{color:#c00000;text-decoration:none;font-weight:750;font-size:11px}.admin-table-loading,.admin-empty{min-height:250px;display:grid;place-items:center;align-content:center;gap:9px;color:#777;font-size:12px}.admin-empty i{font-size:30px;color:#ccc}.admin-empty strong{font-size:13px;color:#555}.admin-alert{padding:11px 13px;border-radius:10px;background:#eaf8f1;color:#147441;font-size:12px;margin-bottom:16px;display:flex;gap:8px;align-items:center}.admin-alert.error,.admin-form-error{background:#fff0f0;color:#a60000}.admin-modal-backdrop{position:fixed;inset:0;background:rgba(12,13,16,.58);z-index:1000;display:grid;place-items:center;padding:20px}.admin-modal{width:min(100%,620px);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:20px;padding:25px;box-shadow:0 30px 80px rgba(0,0,0,.25)}.admin-modal-head{display:flex;justify-content:space-between;gap:15px;margin-bottom:22px}.admin-modal-head h2{font-size:21px;margin:5px 0}.admin-modal-head p{margin:0;color:#85868a;font-size:11px}.admin-modal-close{width:35px;height:35px;border:1px solid #ddd;background:#fff;border-radius:10px;color:#666}.admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.admin-form-grid>div.full,.admin-check.full{grid-column:1/-1}.admin-form-grid label{display:block;font-size:11px;font-weight:750;color:#45464a;margin-bottom:6px}.admin-form-grid input,.admin-form-grid select{width:100%;height:44px;border:1px solid #dddfe3;border-radius:10px;padding:0 11px;outline:0;font-size:12px;background:#fff;box-sizing:border-box}.admin-form-grid input:focus,.admin-form-grid select:focus{border-color:#c00000;box-shadow:0 0 0 3px rgba(192,0,0,.06)}.admin-check{display:flex!important;align-items:center;gap:8px;font-weight:600!important}.admin-check input{width:auto;height:auto}.admin-form-error{padding:10px;border-radius:9px;margin-top:15px;font-size:11px}.admin-modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}.admin-modal-actions .admin-primary-button{min-width:125px}.admin-modal-actions .admin-secondary-button{min-width:90px}@media(max-width:850px){.admin-sidebar{width:72px;flex-basis:72px;padding:18px 10px}.admin-brand{justify-content:center;padding-left:0;padding-right:0}.admin-brand>span:last-child,.admin-profile>div:last-child,.admin-menu-label,.admin-menu a span,.admin-signout span{display:none}.admin-profile{justify-content:center;padding:15px 0}.admin-menu a,.admin-signout{justify-content:center;padding:12px}.admin-content{padding:25px 18px}.admin-topbar{padding:0 18px}.admin-overview-grid{grid-template-columns:1fr}}@media(max-width:600px){.admin-page-head{align-items:flex-start;flex-direction:column}.admin-table-toolbar{align-items:flex-start;flex-direction:column}.admin-table-search{width:100%;box-sizing:border-box}.admin-form-grid{grid-template-columns:1fr}.admin-form-grid>div.full,.admin-check.full{grid-column:auto}.admin-content{padding:20px 12px}.admin-topbar{height:68px}.admin-status{display:none}}

/* Mobile admin pages: keep the document as the vertical scroll container. */
@media (max-width: 650px) {
    html,
    body,
    #app {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
    }

    #app {
        display: block;
    }

    .admin-app {
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible !important;
        align-items: stretch;
    }

    .admin-main,
    .admin-content {
        height: auto !important;
        min-height: 0;
        overflow: visible !important;
    }

    .admin-table-card {
        overflow: visible !important;
    }

    .admin-table-wrap {
        max-width: 100%;
        overflow: visible !important;
    }

    .admin-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto;
    }

    .admin-table th,
    .admin-table td {
        padding: 8px 6px !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .admin-table th {
        font-size: 8px;
        letter-spacing: 0;
    }

    .admin-table td {
        font-size: 10px;
    }

    .table-user {
        min-width: 0;
        gap: 5px;
    }

    .table-user span,
    .table-user small {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .row-actions {
        gap: 3px;
    }

    .row-actions button {
        width: 27px;
        height: 27px;
        flex-shrink: 0;
    }
}


/* App-wide canvas and admin workspace background. Keep cards and forms light for contrast. */
html, body, #app { min-height: 100%; background: #292929; }

/* Admin page titles sit directly on the dark workspace canvas. */
.admin-page-head h1 { color: #f4f4f5; }
.admin-page-head p { color: #c5c7ce; }

/* Keep text readable on the dark workspace while preserving light cards and forms. */
.admin-app { color: #f3f4f6 !important; }
.admin-content { color: #f3f4f6; }
.admin-content > :not(.admin-table-card):not(.admin-overview-grid):not(.admin-modal-backdrop) {
    color: inherit;
}
.admin-page-head h1 { color: #f4f4f5 !important; }
.admin-page-head p { color: #c5c7ce !important; }
/* Light admin cards retain dark text even though the surrounding canvas is dark. */
.admin-table-card,
.admin-table-toolbar { color: #20232a; }
.admin-table-toolbar strong { color: #20232a; }
.admin-table-toolbar span { color: #777d89; }
.admin-table .admin-empty strong { color: #374151; }


/* Admin readability: slightly larger typography and explicit contrast on both canvases. */
.admin-content { color: #f3f4f6 !important; font-size: 14px; }
.admin-content h1,
.admin-content h2,
.admin-content h3,
.admin-content h4,
.admin-content h5,
.admin-content h6,
.admin-content > p,
.admin-content > label,
.admin-content > small,
.admin-content .admin-page-head h1 { color: #f5f5f5; }
.admin-content .admin-page-head p,
.admin-content .admin-page-head .text-muted { color: #d1d5db !important; }
.admin-sidebar { color: #f3f4f6; }
.admin-sidebar .admin-menu-label,
.admin-sidebar .admin-profile span { color: #c4c7cf; }
.admin-sidebar .admin-menu a,
.admin-sidebar .admin-menu button,
.admin-sidebar .admin-signout { color: #e5e7eb; font-size: 14px; }
.admin-topbar strong { color: #20232a; font-size: 16px; }
.admin-kicker { font-size: 10px; }
.admin-content .admin-overview-card,
.admin-content .admin-table-card,
.admin-content .admin-modal { color: #25272b; }
.admin-content .admin-overview-card h1,
.admin-content .admin-overview-card h2,
.admin-content .admin-overview-card h3,
.admin-content .admin-overview-card strong,
.admin-content .admin-table-card h1,
.admin-content .admin-table-card h2,
.admin-content .admin-table-card h3,
.admin-content .admin-table-card strong,
.admin-content .admin-modal h1,
.admin-content .admin-modal h2,
.admin-content .admin-modal h3,
.admin-content .admin-modal strong { color: #25272b; }
.admin-content .admin-overview-card small,
.admin-content .admin-table-toolbar span,
.admin-content .admin-table td,
.admin-content .table-user span,
.admin-content .table-user small,
.admin-content .admin-modal-head p { color: #555b65; }
.admin-content .admin-table th { color: #555b65; font-size: 11px; }
.admin-content .admin-table td { font-size: 13px; }
.admin-content .admin-table-toolbar strong { color: #20232a; font-size: 15px; }
.admin-content .table-user strong { color: #25272b; font-size: 13px; }
.admin-content .admin-overview-card span { color: #b00000; font-size: 11px; }
.admin-content .admin-overview-card strong { color: #20232a; font-size: 20px; }
.admin-content .admin-form-grid label,
.admin-content .admin-check { color: #343840; font-size: 13px; }
.admin-content .admin-form-grid input,
.admin-content .admin-form-grid select,
.admin-content .admin-table-search input { color: #20232a; font-size: 14px; }
.admin-content .admin-empty { color: #555b65; font-size: 14px; }
.admin-content .admin-empty strong { color: #25272b; font-size: 15px; }
.admin-content .admin-primary-button,
.admin-content .admin-secondary-button { font-size: 13px; }
.admin-content .role-pill,
.admin-content .status-pill { font-size: 11px; }
.admin-content .admin-alert { font-size: 13px; }
.admin-content .admin-table-search input::placeholder,
.admin-content input::placeholder { color: #747985; opacity: 1; }
@media (max-width: 650px) {
    .admin-content { font-size: 14px; }
    .admin-content .admin-table th { font-size: 10px; }
    .admin-content .admin-table td { font-size: 12px; }
    .admin-content .admin-page-head h1 { font-size: 26px; }
}


/* Shared blue hero bars matching the Settings page across core admin sections. */
.admin-page-hero {
    align-items: center !important;
    padding: clamp(18px, 3vw, 32px);
    margin-bottom: 28px !important;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 22px;
    background: linear-gradient(120deg, #172554, #0f172a) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .12);
}
.admin-page-hero .admin-kicker {
    display: inline-block;
    color: #93c5fd !important;
    font-size: 10px;
    letter-spacing: .15em;
}
.admin-page-hero h1 {
    margin: 9px 0 7px !important;
    color: #f8fafc !important;
    font-size: clamp(26px, 3vw, 34px) !important;
    font-weight: 750;
    letter-spacing: -.04em !important;
}
.admin-page-hero p {
    max-width: 620px;
    color: #b9c7da !important;
    font-size: 13px !important;
    line-height: 1.65;
}
@media (max-width: 650px) {
    .admin-page-hero { padding: 20px !important; }
}


/* Keep actions inside shared admin hero bars consistent with Settings. */
.admin-page-hero .admin-primary-button {
    min-height: 44px;
    height: auto;
    padding: 12px 18px;
    flex: 0 0 auto;
    border: 1px solid rgba(147, 197, 253, .28);
    border-radius: 11px;
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: #fff !important;
    box-shadow: 0 7px 18px rgba(37, 99, 235, .22) !important;
    transition: transform .18s ease, filter .18s ease;
}
.admin-page-hero .admin-primary-button:hover,
.admin-page-hero .admin-primary-button:focus-visible {
    background: linear-gradient(135deg, #60a5fa, #2563eb) !important;
    color: #fff !important;
    filter: brightness(1.04);
    transform: translateY(-1px);
}
@media (max-width: 650px) {
    .admin-page-hero .admin-primary-button {
        width: 100%;
        justify-content: center;
    }
}


/* Responsive account listings: preserve the desktop tables and use readable cards on phones. */
.admin-mobile-list {
    display: none;
}

@media (max-width: 650px) {
    .admin-desktop-list {
        display: none !important;
    }

    .admin-mobile-list {
        display: grid;
        gap: 12px;
        padding: 12px;
        background: #f8fafc;
    }

    .admin-mobile-account-card {
        min-width: 0;
        padding: 14px;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
        color: #20232a;
    }

    .admin-mobile-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
    }

    .admin-mobile-card-top .table-user {
        flex: 1 1 auto;
        min-width: 0;
        align-items: flex-start;
        gap: 9px;
    }

    .admin-mobile-card-top .table-avatar {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }

    .admin-mobile-card-top .table-user > div:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .admin-mobile-card-top .table-user strong {
        color: #20232a !important;
        font-size: 14px !important;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .admin-mobile-card-top .table-user span,
    .admin-mobile-card-top .table-user small {
        color: #596273 !important;
        font-size: 12px;
        line-height: 1.45;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .admin-mobile-card-top .status-pill {
        flex: 0 0 auto;
        margin-top: 2px;
        white-space: nowrap;
        font-size: 11px !important;
    }

    .admin-mobile-card-details {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-top: 14px;
    }

    .admin-mobile-card-meta {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 10px;
        border: 1px solid #edf0f4;
        border-radius: 9px;
        background: #f8fafc;
    }

    .admin-mobile-card-meta span {
        color: #667085 !important;
        font-size: 11px;
    }

    .admin-mobile-card-meta strong {
        color: #20232a !important;
        font-size: 13px;
        font-weight: 750;
        overflow-wrap: anywhere;
    }

    .admin-mobile-card-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-top: 13px;
        padding-top: 12px;
        border-top: 1px solid #edf0f4;
    }

    .admin-mobile-card-actions button {
        min-width: 0;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 8px 10px;
        border: 1px solid #dbe2ea;
        border-radius: 9px;
        background: #fff;
        color: #344054;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

    .admin-mobile-card-actions .admin-mobile-edit {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
    }

    .admin-mobile-card-actions .admin-mobile-delete {
        border-color: #fecaca;
        background: #fff1f2;
        color: #b91c1c;
    }

    .admin-table-toolbar {
        padding: 14px;
        gap: 12px;
    }

    .admin-table-toolbar > div:first-child strong {
        font-size: 15px;
    }

    .admin-table-search {
        width: 100%;
        min-width: 0;
        height: 42px;
    }

    .admin-table-search input {
        min-width: 0;
        font-size: 14px !important;
    }

    .admin-table-card {
        border-radius: 14px;
    }
}

@media (max-width: 380px) {
    .admin-mobile-account-card {
        padding: 11px;
    }

    .admin-mobile-card-top {
        flex-wrap: wrap;
    }

    .admin-mobile-card-details {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Compact account cards on mobile only; keep desktop tables unchanged. */
@media (max-width: 650px) {
    .admin-mobile-list {
        gap: 8px;
        padding: 8px;
    }

    .admin-mobile-account-card {
        padding: 10px;
        border-radius: 11px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
    }

    .admin-mobile-card-top {
        gap: 7px;
    }

    .admin-mobile-card-top .table-user {
        gap: 7px;
    }

    .admin-mobile-card-top .table-avatar {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .admin-mobile-card-top .table-user strong {
        font-size: 13px !important;
        line-height: 1.25;
    }

    .admin-mobile-card-top .table-user span,
    .admin-mobile-card-top .table-user small {
        font-size: 11px;
        line-height: 1.3;
        margin-top: 2px;
    }

    .admin-mobile-card-top .status-pill {
        padding: 4px 7px;
        font-size: 10px !important;
    }

    .admin-mobile-card-details {
        gap: 6px;
        margin-top: 8px;
    }

    .admin-mobile-card-meta {
        gap: 2px;
        padding: 7px 8px;
        border-radius: 7px;
    }

    .admin-mobile-card-meta-inline {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .admin-mobile-card-meta-inline span {
        flex: 0 0 auto;
    }

    .admin-mobile-card-meta-inline strong {
        text-align: right;
        font-size: 12px;
    }

    .admin-mobile-card-actions {
        gap: 7px;
        margin-top: 8px;
        padding-top: 8px;
    }

    .admin-mobile-card-actions button {
        min-height: 35px;
        padding: 6px 8px;
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .admin-mobile-card-details {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }
}