/* Admin shell. */

.admin-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: #f7f6fa;
    color: #1a1626;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #e2dfea;
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
}

/* ---- Header --------------------------------------------------------------- */
.admin-header {
    flex: none;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid #ecebf0;
    z-index: 32;
}

.admin-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.admin-icon-btn {
    width: 38px;
    height: 38px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 9px;
    cursor: pointer;
    color: #6b6478;
    font-size: 20px;
}

.admin-icon-btn:hover {
    background: #f2f0f6;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.admin-brand-logo {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    background: linear-gradient(150deg, #a05aff 0%, #6d28d9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    box-shadow: 0 4px 12px rgba(160, 90, 255, 0.3);
}

.admin-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    min-width: 0;
}

.admin-brand-name {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1a1626;
}

.admin-brand-by {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #a9a3b8;
}

.admin-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-search {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #f4f2f8;
    border: 1px solid #ecebf0;
    border-radius: 10px;
    padding: 8px 12px;
    width: 230px;
}

.admin-search i {
    color: #a9a3b8;
    font-size: 15px;
}

.admin-search input {
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 13.5px;
    color: #1a1626;
    width: 100%;
}

/* ---- User menu ------------------------------------------------------------ */
.admin-usermenu {
    position: relative;
}

.admin-usermenu-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 8px 5px 5px;
    border: none;
    background: transparent;
    border-radius: 11px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

.admin-usermenu-btn:hover {
    background: #f2f0f6;
}

.admin-avatar {
    border-radius: 50%;
    background: linear-gradient(150deg, #a05aff, #6d28d9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex: none;
}

.admin-avatar-sm {
    width: 34px;
    height: 34px;
    font-size: 13px;
}

.admin-avatar-lg {
    width: 40px;
    height: 40px;
    font-size: 15px;
}

.admin-usermenu-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.admin-usermenu-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #1a1626;
    line-height: 1.1;
}

.admin-usermenu-role {
    font-size: 11.5px;
    color: #8a8397;
    line-height: 1.2;
}

.admin-usermenu-caret {
    color: #a9a3b8;
    font-size: 14px;
}

.admin-usermenu-dropdown {
    position: absolute;
    top: 52px;
    right: 0;
    width: 256px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #ecebf0;
    box-shadow: 0 24px 50px -16px rgba(26, 4, 50, 0.28);
    overflow: hidden;
    z-index: 25;
    display: none;
}

.admin-usermenu.is-open .admin-usermenu-dropdown {
    display: block;
}

.admin-usermenu-head {
    padding: 15px 16px;
    border-bottom: 1px solid #f0eef4;
}

.admin-usermenu-head-row {
    display: flex;
    align-items: center;
    gap: 11px;
}

.admin-usermenu-head-info {
    min-width: 0;
}

.admin-hidden {
    display: none;
}

.admin-usermenu-head-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a1626;
}

.admin-usermenu-head-email {
    font-size: 12px;
    color: #8a8397;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
}

.admin-usermenu-badge {
    display: inline-block;
    margin-top: 11px;
    padding: 3px 9px;
    border-radius: 6px;
    background: #f2e9ff;
    color: #6d28d9;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Amber, not the house purple. A support session has owner-level reach over somebody else's data, so
   the badge is meant to be noticed rather than to blend in with the rest of the chrome. */
.admin-usermenu-badge.is-support {
    background: #fef3c7;
    color: #92400e;
}

/* Full-bleed above the header, in a colour that appears nowhere else in the console. An operator who
   loses track of which workspace they are in can do real damage believing they are somewhere else, so
   this is deliberately louder than anything else on the page. */
.admin-support-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: #b45309;
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
}

.admin-support-banner i {
    font-size: 18px;
    flex-shrink: 0;
}

.admin-support-banner span {
    flex: 1;
    min-width: 0;
}

.admin-support-banner-actions {
    margin: 0;
    flex-shrink: 0;
}

.admin-support-banner-actions button {
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.admin-support-banner-actions button:hover {
    background: rgba(255, 255, 255, .15);
}


/* The workspace code. Monospace and generously spaced because its whole job is to be read aloud down
   a phone line - the same reason the unlock passwords are monospace. */
.admin-tenantcode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
}

.admin-tenantcode-label {
    font-size: 12px;
    color: #6b7280;
}

.admin-tenantcode-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.admin-tenantcode-value code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #111827;
}

.admin-tenantcode-hint {
    font-size: 10.5px;
    color: #9ca3af;
}

.admin-usermenu-group {
    padding: 6px;
}

.admin-usermenu-group + .admin-usermenu-group {
    border-top: 1px solid #f0eef4;
}

.admin-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #3b3547;
}

.admin-menu-item:hover {
    background: #f5f3f9;
}

.admin-menu-item i {
    width: 19px;
    text-align: center;
    color: #8a8397;
    font-size: 17px;
}

.admin-menu-logout {
    color: #c0392b;
}

.admin-menu-logout:hover {
    background: #fdecea;
}

.admin-menu-logout i {
    color: #c0392b;
}

.admin-logout-form {
    margin: 0;
}

/* ---- Body / sidebar ------------------------------------------------------- */
.admin-body {
    display: flex;
    flex: 1;
    min-height: 0;
    position: relative;
}

.admin-backdrop {
    display: none;
}

.admin-sidebar {
    background: #fff;
    display: flex;
    flex-direction: column;
    flex: none;
    width: 248px;
    border-right: 1px solid #ecebf0;
    transition: width 0.16s ease;
}

.admin-shell.is-rail .admin-sidebar {
    width: 72px;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 12px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.admin-nav-section {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b6b0c2;
    padding: 10px 12px 4px;
}

.admin-nav-section.spaced {
    padding-top: 16px;
}

.admin-shell.is-rail .admin-nav-section {
    display: none;
}

.admin-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #4b4557;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background 0.12s;
}

.admin-nav-link:hover {
    background: #f5f1fb;
    color: #4b4557;
}

.admin-nav-link.active {
    background: #f4eefe;
    color: #6d28d9;
    font-weight: 700;
}

.admin-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #a05aff;
}

.admin-nav-link i {
    width: 24px;
    text-align: center;
    font-size: 19px;
    flex: none;
    color: #9a94a8;
}

.admin-nav-link.active i {
    color: #a05aff;
}

.admin-nav-label {
    white-space: nowrap;
}

.admin-shell.is-rail .admin-nav-label {
    display: none;
}

.admin-shell.is-rail .admin-nav-link {
    justify-content: center;
}

.admin-promo {
    margin: 12px;
    padding: 14px;
    background: #f7f1ff;
    border: 1px solid #e7d6ff;
    border-radius: 14px;
}

.admin-shell.is-rail .admin-promo {
    display: none;
}

.admin-promo-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #4b1f8a;
    margin-bottom: 3px;
}

.admin-promo-text {
    font-size: 11.5px;
    color: #6b4a9e;
    line-height: 1.45;
    margin-bottom: 10px;
}

.admin-promo-btn {
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 9px;
    background: #a05aff;
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.admin-promo-btn:hover {
    background: #8f43f5;
}

/* ---- Main / footer -------------------------------------------------------- */
.admin-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.admin-content {
    flex: 1;
    overflow: auto;
    padding: 30px 40px;
}

.admin-footer {
    flex: none;
    border-top: 1px solid #ecebf0;
    background: #fff;
    padding: 13px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-footer-copy {
    font-size: 12.5px;
    color: #8a8397;
}

.admin-footer-links {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.admin-footer-links a {
    font-size: 12.5px;
    font-weight: 600;
    color: #8a8397;
}

.admin-footer-links a:hover {
    color: #8236e8;
}

.admin-footer-version {
    font-size: 12px;
    color: #c2bccf;
    font-weight: 600;
}

/* ---- Page heading + blank canvas ------------------------------------------ */
.admin-breadcrumb {
    font-size: 12.5px;
    color: #a9a3b8;
    font-weight: 600;
    margin-bottom: 6px;
}

.admin-breadcrumb i {
    font-size: 15px;
    vertical-align: -2px;
}

/* The router focuses the page <h1> after navigation for screen readers; hide the focus ring
   so it doesn't show a box around the heading (headings aren't keyboard-interactive). */
h1:focus,
h1:focus-visible {
    outline: none;
}

.admin-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.admin-page-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0;
    color: #1a1626;
}

.admin-page-actions {
    display: flex;
    gap: 10px;
}

.admin-btn-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #e2dfea;
    background: #fff;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #4b4557;
    cursor: pointer;
}

.admin-btn-secondary:hover {
    background: #faf9fc;
}

.admin-btn-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    background: #a05aff;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 16px -6px rgba(160, 90, 255, 0.5);
}

.admin-btn-primary:hover {
    background: #8f43f5;
}

.admin-blank {
    border: 2px dashed #ddd7e8;
    border-radius: 18px;
    background: #fff;
    min-height: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 40px;
}

.admin-blank-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #f4eefe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a05aff;
    font-size: 26px;
}

.admin-blank-title {
    font-size: 16px;
    font-weight: 700;
    color: #4b4557;
}

.admin-blank-hint {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12.5px;
    color: #a9a3b8;
    max-width: 360px;
    line-height: 1.5;
}

/* ---- Change-password modal ------------------------------------------------ */
.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(26, 22, 38, 0.42);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.admin-modal.is-open {
    display: flex;
}

.admin-modal-dialog {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 70px -20px rgba(26, 4, 50, 0.5);
    overflow: hidden;
}

.admin-modal-head {
    padding: 20px 22px;
    border-bottom: 1px solid #f0eef4;
    display: flex;
    align-items: center;
    gap: 13px;
}

.admin-modal-head-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #f4eefe;
    color: #8236e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex: none;
}

.admin-modal-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1a1626;
}

.admin-modal-subtitle {
    font-size: 13px;
    color: #8a8397;
    margin-top: 2px;
}

.admin-modal-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.admin-modal-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.admin-modal-label {
    font-size: 13px;
    font-weight: 600;
    color: #3b3547;
}

.admin-modal-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e6e2ee;
    border-radius: 11px;
    font-size: 14.5px;
    font-family: inherit;
    color: #1a1626;
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.admin-modal-input:focus {
    border-color: #a05aff;
    box-shadow: 0 0 0 4px rgba(160, 90, 255, 0.13);
}

.admin-modal-pw-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.admin-modal-pw-toggle {
    position: absolute;
    right: 8px;
    padding: 6px 9px;
    background: transparent;
    border: none;
    color: #8236e8;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
}

.admin-modal-pw-toggle:hover {
    background: #f4eefe;
}

.admin-modal-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: #6b4a9e;
    background: #f7f1ff;
    border: 1px solid #e7d6ff;
    padding: 9px 13px;
    border-radius: 10px;
}

.admin-modal-note.is-error {
    color: #c0392b;
    background: #fdecea;
    border-color: #f7c9c3;
}

.admin-modal-note.is-ok {
    color: #197a48;
    background: #e7f8ef;
    border-color: #c3ecd5;
}

.admin-modal-foot {
    padding: 16px 22px;
    border-top: 1px solid #f0eef4;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.admin-modal-cancel {
    padding: 10px 18px;
    border: 1px solid #e2dfea;
    background: #fff;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #4b4557;
    cursor: pointer;
}

.admin-modal-cancel:hover {
    background: #faf9fc;
}

.admin-modal-save {
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    background: #a05aff;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.admin-modal-save:hover {
    background: #8f43f5;
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 899px) {
    .admin-header {
        padding: 0 12px;
    }

    .admin-search,
    .admin-usermenu-meta {
        display: none;
    }

    .admin-sidebar {
        position: fixed;
        top: 62px;
        bottom: 0;
        left: 0;
        width: 256px !important;
        z-index: 30;
        transform: translateX(-110%);
        transition: transform 0.22s ease;
    }

    .admin-shell.is-drawer-open .admin-sidebar {
        transform: translateX(0);
        box-shadow: 0 20px 50px rgba(26, 4, 50, 0.28);
    }

    .admin-shell.is-drawer-open .admin-backdrop {
        display: block;
        position: fixed;
        top: 62px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(26, 4, 50, 0.35);
        z-index: 29;
    }

    /* The rail state doesn't apply on mobile; the drawer always shows full labels. */
    .admin-shell.is-rail .admin-nav-label,
    .admin-shell.is-rail .admin-nav-section,
    .admin-shell.is-rail .admin-promo {
        display: block;
    }

    .admin-shell.is-rail .admin-nav-link {
        justify-content: flex-start;
    }

    .admin-content {
        padding: 22px 16px;
    }

    .admin-footer {
        padding: 12px 16px;
    }
}

/* ------------------------------------------------------------------ */
/*  Notification centre (header bell)                                  */
/* ------------------------------------------------------------------ */
.admin-notif {
    position: relative;
    display: flex;
    align-items: center;
}

.admin-notif-btn {
    position: relative;
}

.admin-notif.is-open .admin-notif-btn {
    background: #f2e9ff;
    color: #6d28d9;
}

.admin-notif-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.admin-notif-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: transparent;
}

.admin-notif-panel {
    position: absolute;
    top: 52px;
    right: 0;
    width: 380px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 16px;
    border: 1px solid #ecebf0;
    box-shadow: 0 24px 60px -18px rgba(26, 4, 50, 0.34);
    overflow: hidden;
    z-index: 31;
    display: flex;
    flex-direction: column;
    max-height: min(560px, calc(100vh - 90px));
}

.admin-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 16px;
    border-bottom: 1px solid #f0eef4;
}

.admin-notif-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 800;
    color: #1a1626;
    letter-spacing: -0.01em;
}

.admin-notif-count {
    padding: 2px 8px;
    border-radius: 6px;
    background: #f2e9ff;
    color: #6d28d9;
    font-size: 11px;
    font-weight: 700;
}

.admin-notif-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: #6d28d9;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 8px;
}

.admin-notif-link:hover:not(:disabled) {
    background: #f5f3f9;
}

.admin-notif-link:disabled {
    color: #b6b0c2;
    cursor: default;
}

.admin-notif-link.is-danger {
    color: #c0392b;
}

.admin-notif-link.is-danger:hover {
    background: #fdecea;
}

.admin-notif-list {
    overflow-y: auto;
    flex: 1;
}

.admin-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border-bottom: 1px solid #f4f2f8;
    position: relative;
}

.admin-notif-item:hover {
    background: #faf9fc;
}

.admin-notif-item.is-unread {
    background: #f8f4ff;
}

.admin-notif-item.is-unread:hover {
    background: #f3ecff;
}

.admin-notif-item.is-unread::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #6d28d9;
}

.admin-notif-icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: #eef2ff;
    color: #4f46e5;
}

.admin-notif-item.sev-warning .admin-notif-icon {
    background: #fff4e5;
    color: #c2740a;
}

.admin-notif-item.sev-critical .admin-notif-icon {
    background: #fdecea;
    color: #c0392b;
}

.admin-notif-content {
    min-width: 0;
    flex: 1;
    cursor: pointer;
}

.admin-notif-item-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1a1626;
    line-height: 1.3;
}

.admin-notif-item-text {
    font-size: 12.5px;
    color: #6b6478;
    line-height: 1.4;
    margin-top: 2px;
}

.admin-notif-time {
    font-size: 11px;
    color: #a9a3b8;
    font-weight: 600;
    margin-top: 5px;
}

.admin-notif-clear {
    flex: none;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 7px;
    color: #b6b0c2;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-notif-clear:hover {
    background: #efedf4;
    color: #6b6478;
}

.admin-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 44px 24px;
    text-align: center;
    color: #8a8397;
}

.admin-notif-empty i {
    font-size: 30px;
    color: #c9c3d6;
}

.admin-notif-empty span {
    font-size: 13.5px;
    font-weight: 700;
    color: #565064;
}

.admin-notif-empty small {
    font-size: 12px;
    color: #a9a3b8;
    max-width: 240px;
}

/* "Showing the N most recent" - a quiet caption, not a notice: it explains the cap without
   competing with the notifications themselves. */
.admin-notif-more {
    padding: 8px 14px 0;
    font-size: 11.5px;
    font-weight: 600;
    color: #a9a3b8;
    text-align: center;
    letter-spacing: 0.01em;
}

.admin-notif-foot {
    padding: 9px 12px;
    border-top: 1px solid #f0eef4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* The primary way out of the panel, so it carries more weight than the plain links beside it. */
.admin-notif-viewall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e6e1f0;
    background: #faf9fd;
    color: #6d28d9;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 7px 12px;
    border-radius: 9px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.admin-notif-viewall:hover {
    background: #f2eefb;
    border-color: #d9cff0;
}

.admin-notif-viewall:active {
    transform: translateY(1px);
}

.admin-notif-viewall:focus-visible {
    outline: 2px solid #6d28d9;
    outline-offset: 2px;
}

.admin-notif-spin {
    animation: admin-notif-spin 0.8s linear infinite;
}

@keyframes admin-notif-spin {
    to { transform: rotate(360deg); }
}

/* ---- maps must not paint over the console -----------------------------------------------------

   Leaflet numbers its own furniture on a scale of its own: tiles at 200, shapes at 400, markers at
   600, popups at 700 and controls at 800 rising to 1000. This console's overlay chrome - dialogs,
   dropdowns, the notification panel - lives in the tens, because that is all it ever needed to beat.
   So a map painted straight through an open dialog, and through the notification dropdown, on every
   screen that has one.

   Raising the chrome instead would be an arms race we would lose the next time a plugin picks a big
   number. isolation:isolate makes each map its own stacking context, so all of Leaflet's numbers are
   settled INSIDE the map and the map as a whole takes its natural place on the page. Its internal
   ordering is untouched - tiles still sit under markers, markers under popups.

   Keyed on Leaflet's own class rather than ours, so it covers the dashboard map, the zones map, the
   device location map, and any map added later without anyone having to remember this. */
.leaflet-container {
    isolation: isolate;
}

/* ---- Global search (header) -----------------------------------------------
   Replaces the inert .admin-search box. The panel is absolutely positioned under the field, so the
   wrapper is the positioning context and needs a stacking order above the page but below the modals
   the console opens over everything (.admin-header is 32). */
.gs {
    position: relative;
    z-index: 40;
}

.gs-box {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 300px;
    padding: 8px 12px;
    background: #f4f2f8;
    border: 1px solid #ecebf0;
    border-radius: 10px;
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.gs-box:focus-within {
    background: #fff;
    border-color: #d9c2fa;
    box-shadow: 0 0 0 3px rgba(130, 54, 232, .10);
}

/* Square off the bottom while the panel is attached, so the two read as one surface. */
.gs-box.is-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.gs-box > i { color: #a9a3b8; font-size: 15px; flex: none; }

.gs-box input {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 13.5px;
    color: #1a1626;
}

.gs-box input::placeholder { color: #a9a3b8; }

.gs-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #a9a3b8;
    cursor: pointer;
}

.gs-clear:hover { background: #ece7f6; color: #6a2fbf; }
.gs-clear i { font-size: 13px; }

@keyframes gs-spin { to { transform: rotate(360deg); } }
.gs-spin { animation: gs-spin .8s linear infinite; color: #8236e8 !important; }

.gs-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 460px;
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid #d9c2fa;
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 24px 60px -24px rgba(40, 24, 70, .40);
}

/* Wider than the field: results carry a title, a subtitle and a badge, and the field is sized for
   typing rather than for reading them. Anchored right so it cannot run off the header's edge. */
.gs-panel {
    left: auto;
    right: 0;
    width: 420px;
}

.gs-group {
    padding: 9px 10px 5px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #a9a3b8;
}

.gs-hit {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: 9px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* One highlight class for hover AND keyboard, so arrowing down looks identical to pointing at it. */
.gs-hit.is-active { background: #f4ecff; }

.gs-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
}

.gs-icon i { font-size: 16px; }

/* A colour per kind. The eye separates a device from a policy before either label is read, which is
   the whole point of grouping them in one list. */
.gs-icon.is-device  { background: #ede4ff; color: #6a2fbf; }
.gs-icon.is-user    { background: #e2f0ff; color: #1d6fb8; }
.gs-icon.is-group   { background: #fdf0dd; color: #a06a12; }
.gs-icon.is-policy  { background: #e8f7ef; color: #17794a; }
.gs-icon.is-config  { background: #fee9f3; color: #a8306e; }
.gs-icon.is-package { background: #eceaf3; color: #5b5470; }

.gs-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }

.gs-title {
    font-size: 13px;
    font-weight: 650;
    color: #1a1626;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Monospace, because a subtitle here is nearly always a serial or a package name - strings that are
   read character by character and compared against something on a screen or a sticker. */
.gs-sub {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
    font-size: 11px;
    color: #8a8397;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gs-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex: none;
    max-width: 140px;
}

.gs-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f2f0f6;
    font-size: 10.5px;
    font-weight: 700;
    color: #5b5470;
    white-space: nowrap;
}

.gs-badge.is-online    { background: #e8f7ef; color: #17794a; }
.gs-badge.is-inservice { background: #ede4ff; color: #6a2fbf; }
.gs-badge.is-missing   { background: #fdecec; color: #b42318; }

.gs-meta {
    font-size: 10.5px;
    color: #a9a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

.gs-hint, .gs-more {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 14px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #8a8397;
}

.gs-hint i, .gs-more i { color: #b79be6; font-size: 15px; flex: none; margin-top: 1px; }

.gs-more {
    margin-top: 4px;
    padding-top: 11px;
    border-top: 1px solid #f3f1f7;
    font-size: 11.5px;
}

/* The field is the first thing to give up room on a narrow header - the bell and the account menu
   cannot shrink, and a 300px box beside them pushes the brand off. */
@media (max-width: 1100px) {
    .gs-box { width: 210px; }
    .gs-panel { width: min(380px, calc(100vw - 40px)); }
}

@media (max-width: 720px) {
    .gs-box { width: 150px; }
}