﻿/* Paginа: admin/admins.html — CSS extraido automaticamente */
:root {
            --bg-main:#F5F2E9;
            --bg-secondary:#181818;
            --bg-card: rgba(255,255,255,.045);
            --bg-card-strong: rgba(255,255,255,.065);
            --glass-bg:#FFFFFF;

            --gold:#16804A;
            --gold-soft:rgba(22,128,74,.10);

            --green:#16804A;
            --green-soft:rgba(22,128,74,.10);

            --red:#C93632;
            --red-soft:rgba(201,54,50,.10);

            --blue: #3b82f6;
            --blue-soft: rgba(59,130,246,.12);

            --purple: #8b5cf6;
            --purple-soft: rgba(139,92,246,.12);

            --text:#111111;
            --text-soft:#3b3b3b;
            --text-muted:#6f6a5f;

            --border:rgba(17,17,17,.10);

            --radius: 18px;
            --radius-small: 13px;

            --nav-height: 72px;

            --shadow:
                0 18px 50px rgba(0,0,0,.28);

            --sidebar-width: 270px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;

            background:
                radial-gradient(
                    circle at 15% 5%,
                    rgba(34,139,34,.055),
                    transparent 28%
                ),
                radial-gradient(
                    circle at 90% 20%,
                    rgba(255,215,0,.035),
                    transparent 26%
                ),
                var(--bg-main);

            color: var(--text);

            font-family: "Montserrat", sans-serif;

            min-height: 100vh;

            overflow-x: hidden;

            -webkit-tap-highlight-color: transparent;
        }

        body::before {
            content: "";

            position: fixed;

            inset: 0;

            pointer-events: none;

            background:
                linear-gradient(
                    rgba(11,11,15,.91),
                    rgba(11,11,15,.97)
                ),
                url("/imagens/logoaya2.png");

            background-repeat: no-repeat;

            background-position: center;

            background-size: min(500px, 80vw);

            opacity: .11;

            z-index: -2;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        button,
        input,
        select {
            font-family: inherit;
        }

        /* =====================================================
           SIDEBAR — PADRAO CANONICO DO PORTAL
        ===================================================== */
        .sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);height:100vh;background:var(--bg-secondary);border-right:1px solid var(--border);z-index:1050;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;transition:transform .25s ease;}
        .sidebar-brand{display:flex;align-items:center;gap:11px;padding:20px 18px 18px;border-bottom:1px solid var(--border);text-decoration:none;flex-shrink:0;}
        .sidebar-brand img{width:38px;height:38px;object-fit:contain;flex-shrink:0;}
        .sidebar-brand h5{margin:0;color:var(--gold);font-size:15px;font-weight:800;line-height:1.1;letter-spacing:.8px;}
        .sidebar-brand small{display:block;margin-top:2px;color:var(--text-muted);font-size:9px;font-weight:600;letter-spacing:1px;}
        .sidebar-menu{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:2px;}
        .sidebar-section{padding:14px 10px 5px;color:var(--text-muted);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;}
        .sidebar-menu a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:var(--text-muted);text-decoration:none;font-size:12px;font-weight:600;transition:.15s ease;}
        .sidebar-menu a i{width:20px;text-align:center;font-size:16px;flex-shrink:0;}
        .sidebar-menu a:hover{background:rgba(255,255,255,.055);color:#fff;}
        .sidebar-menu a.active{background:rgba(255,215,0,.10);color:var(--gold);}
        .sidebar-divider{height:1px;margin:9px 10px;background:rgba(255,255,255,.045);flex-shrink:0;}
        .sidebar-footer{padding:14px 18px;border-top:1px solid var(--border);color:var(--text-muted);font-size:9px;text-align:center;flex-shrink:0;}
        .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1040;}
        .sidebar-overlay.show{display:block;}
        .main-content{margin-left:var(--sidebar-width);min-height:100vh;}
        #menuButton{display:none;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border);border-radius:10px;background:var(--glass-bg);color:var(--text-muted);font-size:18px;cursor:pointer;flex-shrink:0;}
        #menuButton:hover{background:rgba(255,255,255,.075);color:#fff;}

        .topbar {
            position: sticky;
            top: 0;
            z-index: 900;

            display: flex;
            align-items: center;
            justify-content: space-between;

            gap: 14px;

            padding: 12px 22px;

            background: rgba(17,17,22,.85);

            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);

            border-bottom: 1px solid var(--border);
        }

        .topbar .page-title {
            display: flex;
            align-items: center;
            gap: 12px;

            min-width: 0;
        }

        .topbar .page-title h4 {
            margin: 0;

            font-size: 15px;
            font-weight: 800;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .topbar .page-title small {
            display: block;

            color: var(--text-muted);

            font-size: 10px;

            margin-top: 1px;
        }

        .admin-profile {
            display: flex;
            align-items: center;
            gap: 10px;

            min-width: 0;
        }

        .admin-avatar {
            width: 38px;
            height: 38px;

            border-radius: 50%;

            background:
                linear-gradient(
                    135deg,
                    var(--gold),
                    var(--green)
                );

            display: flex;
            align-items: center;
            justify-content: center;

            color: #111;

            font-weight: 800;
            font-size: 13px;

            overflow: hidden;

            flex-shrink: 0;
        }

        .admin-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .admin-profile-info {
            min-width: 0;
        }

        .admin-profile-info strong {
            display: block;

            font-size: 11px;
            font-weight: 700;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .admin-profile-info span {
            display: block;

            color: var(--text-muted);

            font-size: 9px;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .btn-outline-aya {
            border: 1px solid rgba(255,215,0,.4);

            color: var(--gold);

            background: transparent;

            border-radius: 9px;

            font-size: 11px;
            font-weight: 600;

            padding: 6px 12px;

            text-decoration: none;

            transition: .15s ease;

            white-space: nowrap;
        }

        .btn-outline-aya:hover {
            background: rgba(255,215,0,.10);
            color: var(--gold);
        }

        /* =========================================================
           APP CONTENT
        ========================================================= */

        .app {
            min-height: 100vh;
            padding-bottom: var(--nav-height);
        }

        .app-content {
            width: 100%;
            max-width: 1180px;
            margin: auto;
            padding: 18px 18px 28px;
        }

        /* =========================================================
           PAGE HEADER
        ========================================================= */

        .page-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 24px;
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            margin-bottom: 8px;
            color: var(--text-muted);
            font-size: 9px;
            font-weight: 600;
        }

        .back-link:hover {
            color: var(--gold);
        }

        .eyebrow {
            margin-bottom: 6px;
            color: var(--gold);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 1.4px;
            text-transform: uppercase;
        }

        .page-title-main {
            margin: 0;
            font-size: clamp(23px,3vw,31px);
            font-weight: 800;
            letter-spacing: -.7px;
        }

        .page-description {
            margin: 6px 0 0;
            color: var(--text-soft);
            font-size: 11px;
        }

        .header-actions {
            display: flex;
            gap: 8px;
        }

        .btn-aya {
            min-height: 41px;
            padding: 0 14px;
            border: 1px solid var(--border);
            border-radius: 11px;
            background: var(--bg-card);
            color: var(--text);
            font-size: 10px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            transition: .2s ease;
        }

        .btn-aya:hover {
            background: var(--bg-card-strong);
        }

        .btn-gold {
            background: var(--gold);
            border-color: var(--gold);
            color: #111;
        }

        .btn-gold:hover {
            background: #e9c500;
            color: #111;
        }

        /* =========================================================
           SUMMARY
        ========================================================= */

        .summary-grid {
            display: grid;
            grid-template-columns: repeat(4,1fr);
            gap: 12px;
            margin-bottom: 18px;
        }

        .summary-card {
            padding: 16px;
            border-radius: 15px;
            background: var(--bg-card);
            border: 1px solid var(--border);
        }

        .summary-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .summary-icon {
            width: 37px;
            height: 37px;
            border-radius: 11px;
            display: grid;
            place-items: center;
            background: var(--gold-soft);
            color: var(--gold);
            font-size: 15px;
        }

        .summary-icon.green {
            background: var(--green-soft);
            color: #55b75a;
        }

        .summary-icon.blue {
            background: var(--blue-soft);
            color: #75a9ff;
        }

        .summary-icon.purple {
            background: var(--purple-soft);
            color: #a98aff;
        }

        .summary-number {
            margin-top: 13px;
            font-size: 22px;
            font-weight: 800;
        }

        .summary-label {
            margin-top: 3px;
            color: var(--text-muted);
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        /* =========================================================
           TOOLBAR
        ========================================================= */

        .toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 13px;
        }

        .search-wrap {
            position: relative;
            flex: 1;
            max-width: 470px;
        }

        .search-wrap i {
            position: absolute;
            top: 50%;
            left: 13px;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 13px;
        }

        .search-input {
            width: 100%;
            height: 42px;
            padding: 0 14px 0 38px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 11px;
            color: var(--text);
            font-size: 10px;
            outline: none;
        }

        .search-input:focus {
            border-color: rgba(255,215,0,.3);
        }

        .filters {
            display: flex;
            gap: 6px;
        }

        .filter-btn {
            min-height: 38px;
            padding: 0 11px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--bg-card);
            color: var(--text-muted);
            font-size: 8px;
            font-weight: 700;
        }

        .filter-btn.active {
            background: var(--gold-soft);
            border-color: rgba(255,215,0,.14);
            color: var(--gold);
        }

        /* =========================================================
           ADMIN LIST
        ========================================================= */

        .admin-card {
            padding: 17px;
            border-radius: 16px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            transition: .2s ease;
        }

        .admin-card:hover {
            background: var(--bg-card-strong);
            border-color: rgba(255,255,255,.11);
        }

        .admin-card-main {
            display: flex;
            align-items: center;
            gap: 13px;
        }

        .admin-avatar-card {
            width: 52px;
            height: 52px;
            flex-shrink: 0;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg,rgba(255,215,0,.2),rgba(34,139,34,.16));
            border: 1px solid rgba(255,215,0,.12);
            color: var(--gold);
            font-size: 13px;
            font-weight: 800;
        }

        .admin-info {
            flex: 1;
            min-width: 0;
        }

        .admin-name {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .admin-name strong {
            font-size: 12px;
            font-weight: 800;
        }

        .admin-name .owner-mark {
            padding: 4px 6px;
            border-radius: 6px;
            background: var(--gold-soft);
            color: var(--gold);
            font-size: 7px;
            font-weight: 800;
            text-transform: uppercase;
        }

        .admin-email {
            margin-top: 3px;
            color: var(--text-muted);
            font-size: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .admin-role {
            margin-top: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

        .role-badge {
            padding: 5px 7px;
            border-radius: 7px;
            background: var(--blue-soft);
            color: #75a9ff;
            font-size: 7px;
            font-weight: 700;
        }

        .role-badge.owner {
            background: var(--gold-soft);
            color: var(--gold);
        }

        .role-badge.editor {
            background: var(--purple-soft);
            color: #aa8cff;
        }

        .role-badge.inactive {
            background: var(--red-soft);
            color: #ef6259;
        }

        .admin-meta {
            display: flex;
            align-items: center;
            gap: 17px;
            margin-left: auto;
            padding-left: 15px;
        }

        .meta-item {
            min-width: 75px;
        }

        .meta-item span {
            display: block;
            color: var(--text-muted);
            font-size: 7px;
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        .meta-item strong {
            display: block;
            margin-top: 4px;
            font-size: 9px;
        }

        .status {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #55b75a;
        }

        .status.inactive .status-dot {
            background: #ef6259;
        }

        .admin-actions {
            display: flex;
            gap: 5px;
            margin-left: 8px;
        }

        .action-btn {
            width: 34px;
            height: 34px;
            border: 1px solid var(--border);
            border-radius: 9px;
            background: rgba(255,255,255,.025);
            color: var(--text-muted);
            display: grid;
            place-items: center;
            font-size: 12px;
            transition: .2s ease;
        }

        .action-btn:hover {
            color: var(--text);
            background: var(--bg-card-strong);
        }

        .action-btn.danger:hover {
            color: #ef6259;
            background: var(--red-soft);
        }

        .empty-state {
            display: none;
            padding: 55px 20px;
            text-align: center;
            border-radius: 16px;
            background: var(--bg-card);
            border: 1px solid var(--border);
        }

        .empty-state.show {
            display: block;
        }

        .empty-icon {
            width: 54px;
            height: 54px;
            margin: 0 auto 12px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: var(--gold-soft);
            color: var(--gold);
            font-size: 21px;
        }

        .empty-state strong {
            display: block;
            font-size: 12px;
        }

        .empty-state p {
            margin: 5px auto 0;
            max-width: 350px;
            color: var(--text-muted);
            font-size: 9px;
            line-height: 1.6;
        }

        .admin-list {
            display: grid;
            gap: 9px;
        }

        /* =========================================================
           MODAL
        ========================================================= */

        .modal-content {
            background: #15151b;
            color: var(--text);
            border: 1px solid var(--border);
            border-radius: 18px;
        }

        .modal-header,
        .modal-footer {
            border-color: var(--border);
        }

        .modal-title {
            font-size: 14px;
            font-weight: 800;
        }

        .modal-description {
            margin-top: 3px;
            color: var(--text-muted);
            font-size: 8px;
        }

        .form-label {
            color: var(--text-soft);
            font-size: 9px;
            font-weight: 600;
        }

        .form-control,
        .form-select {
            min-height: 42px;
            background: #101015;
            border: 1px solid var(--border);
            color: var(--text);
            border-radius: 10px;
            font-size: 10px;
        }

        .form-control:focus,
        .form-select:focus {
            background: #101015;
            color: var(--text);
            border-color: rgba(255,215,0,.35);
            box-shadow: 0 0 0 .2rem rgba(255,215,0,.05);
        }

        .form-select option {
            background: #101015;
            color: var(--text);
        }

        .permission-box {
            padding: 13px;
            border-radius: 12px;
            background: rgba(255,255,255,.025);
            border: 1px solid var(--border);
        }

        .permission-box-title {
            margin-bottom: 10px;
            font-size: 9px;
            font-weight: 700;
        }

        .permission-check {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            color: var(--text-soft);
            font-size: 8px;
        }

        .permission-check:last-child {
            margin-bottom: 0;
        }

        .permission-check input {
            accent-color: var(--gold);
        }

        /* =========================================================
           TOAST
        ========================================================= */

        .toast-aya {
            position: fixed;
            right: 22px;
            bottom: 22px;
            z-index: 2000;
            max-width: 320px;
            padding: 13px 16px;
            border-radius: 12px;
            background: #17171d;
            border: 1px solid var(--border);
            box-shadow: 0 15px 40px rgba(0,0,0,.35);
            transform: translateY(120px);
            opacity: 0;
            pointer-events: none;
            transition: .3s ease;
        }

        .toast-aya.show {
            transform: translateY(0);
            opacity: 1;
        }

        .toast-aya strong {
            display: block;
            font-size: 10px;
        }

        .toast-aya span {
            display: block;
            margin-top: 3px;
            color: var(--text-muted);
            font-size: 8px;
        }

        /* =========================================================
           BOTTOM NAVIGATION
        ========================================================= */

        .bottom-navigation {
            position: fixed;

            left: 0;
            right: 0;
            bottom: 0;

            height: var(--nav-height);

            z-index: 1000;

            background:
                rgba(11,11,15,.94);

            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);

            border-top:
                1px solid rgba(255,255,255,.065);

            padding:
                6px
                max(10px, env(safe-area-inset-right))
                max(6px, env(safe-area-inset-bottom))
                max(10px, env(safe-area-inset-left));
        }

        .bottom-navigation-inner {
            width: 100%;
            max-width: 520px;
            height: 100%;
            margin: auto;

            display: grid;
            grid-template-columns: repeat(5,1fr);
        }

        .nav-item {
            border: 0;
            background: transparent;

            color: var(--text-muted);

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            gap: 4px;

            font-size: .5rem;

            cursor: pointer;

            position: relative;
        }

        .nav-item i {
            font-size: 1.05rem;
            transition: .2s ease;
        }

        .nav-item.active {
            color: var(--gold);
        }

        .nav-item.active i {
            transform: translateY(-1px);
        }

        .nav-item.active::before {
            content: "";

            position: absolute;

            top: 0;

            width: 20px;
            height: 2px;

            border-radius: 10px;

            background: var(--gold);
        }

        .nav-center {
            position: relative;
            color: white;
        }

        .nav-center-icon {
            width: 45px;
            height: 45px;

            margin-top: -19px;

            border-radius: 50%;

            display: flex;
            align-items: center;
            justify-content: center;

            background:
                linear-gradient(
                    145deg,
                    #25252b,
                    #111116
                );

            border:
                1px solid rgba(255,215,0,.23);

            color: var(--gold);

            box-shadow:
                0 8px 25px rgba(0,0,0,.4);
        }

        /* =========================================================
           DESKTOP
        ========================================================= */

        @media (min-width: 768px) {

            .app {
                padding-bottom: 0;
            }

            .bottom-navigation {
                position: fixed;

                left: 24px;
                right: auto;

                top: 50%;
                bottom: auto;

                width: 65px;
                height: auto;

                transform: translateY(-50%);

                padding: 8px;

                border:
                    1px solid rgba(255,255,255,.06);

                border-radius: 20px;

                background:
                    rgba(11,11,15,.88);

                box-shadow:
                    0 15px 40px rgba(0,0,0,.35);
            }

            .bottom-navigation-inner {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

            .nav-item {
                min-height: 55px;
            }

            .nav-center-icon {
                margin-top: 0;
            }

            .nav-item.active::before {
                top: 50%;
                left: -1px;

                width: 2px;
                height: 22px;

                transform:
                    translateY(-50%);
            }

            .app-content {
                padding:
                    28px
                    40px
                    50px;

                margin-left: 70px;
            }

        }

        /* =========================================================
           TABLET / SMALL DESKTOP
        ========================================================= */

        @media (max-width: 1200px) {

            .summary-grid {
                grid-template-columns: repeat(2,1fr);
            }

            .admin-meta {
                display: none;
            }

        }

        @media (max-width: 950px) and (min-width: 768px) {

            .summary-grid {
                grid-template-columns: repeat(2,1fr);
            }

        }

        /* =========================================================
           MOBILE
        ========================================================= */

        @media(max-width:991px){.sidebar{transform:translateX(-100%);}.sidebar.show{transform:translateX(0);}.main-content{margin-left:0;}#menuButton{display:flex;}}

        @media(min-width:992px){#menuButton{display:none;}}

        @media (max-width: 767px) {

            .summary-grid {
                grid-template-columns: repeat(2,1fr);
                gap: 8px;
            }

            .summary-card {
                padding: 13px;
            }

            .summary-number {
                font-size: 19px;
            }

            .header-actions .btn-aya:not(.btn-gold) {
                display: none;
            }

            .header-actions .btn-gold {
                width: 42px;
                padding: 0;
            }

            .header-actions .btn-gold span {
                display: none;
            }

            .admin-card {
                padding: 14px;
            }

            .admin-card-main {
                align-items: flex-start;
            }

            .admin-avatar-card {
                width: 45px;
                height: 45px;
            }

            .admin-actions {
                margin-left: auto;
            }

            .action-btn {
                width: 31px;
                height: 31px;
            }

            .toolbar {
                flex-direction: column;
                align-items: stretch;
            }

            .search-wrap {
                max-width: none;
            }

            .filters {
                overflow-x: auto;
                padding-bottom: 2px;
            }

            .filter-btn {
                flex-shrink: 0;
            }

            .app-content {
                padding:
                    8px
                    14px
                    94px;
            }

            .toast-aya {
                left: 15px;
                right: 15px;
                bottom: 84px;
                max-width: none;
            }

        }

            /* ===== IEPLUS_LIGHT_OVERRIDES : IÃŠ+ tema claro (estrutura/navegaÃ§Ã£o preta com texto claro) ===== */
        .topbar,.sidebar,.sidebar-header,.bottom-navigation,.bottom-nav,.side-nav,.nav-drawer,.app-nav{background:#111111 !important;}
        .topbar,.topbar *,.sidebar *,.bottom-navigation *,.bottom-navigation a,.bottom-navigation i,.bottom-navigation span{color:rgba(255,255,255,.85) !important;}
        .sidebar a.active,.sidebar .active,.bottom-navigation .active{color:#8FE6B4 !important;}
        .sidebar a.active,.bottom-navigation .active{background:rgba(22,128,74,.30) !important;}