/* _content/XpowerBot/Components/AdminChats.razor.rz.scp.css */
.bg-gradient-primary[b-czk90mguy3] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Container */
.admin-chats-container[b-czk90mguy3] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Header Section */
.page-header[b-czk90mguy3] {
    margin-bottom: 8px;
}

.page-title[b-czk90mguy3] {
    font-size: 30px;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px 0;
}

.title-icon[b-czk90mguy3] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);
    display: flex;
  align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    font-size: 24px;
}

.page-subtitle[b-czk90mguy3] {
    color: #9ca3af;
    margin: 0;
 font-size: 14px;
}

/* Grid Layout */
.chats-grid[b-czk90mguy3] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 1024px) {
    .chats-grid[b-czk90mguy3] {
        grid-template-columns: 1fr 2fr;
    }
}

@media (min-width: 1280px) {
    .chats-grid[b-czk90mguy3] {
        grid-template-columns: 300px 1fr;
    }
}

/* Users Sidebar */
.users-sidebar[b-czk90mguy3] {
    width: 100%;
}

.sidebar-card[b-czk90mguy3] {
    background: rgba(31, 41, 55, 0.5);
  backdrop-filter: blur(16px);
    border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(75, 85, 99, 0.5);
    overflow: hidden;
}

.sidebar-header[b-czk90mguy3] {
    background: linear-gradient(to right, #a855f7, #3b82f6);
    padding: 16px 24px;
}

.header-content[b-czk90mguy3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}

.header-left[b-czk90mguy3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-icon[b-czk90mguy3] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.header-title[b-czk90mguy3] {
    font-weight: 600;
    font-size: 15px;
}

.users-count[b-czk90mguy3] {
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
 font-size: 14px;
    font-weight: bold;
}

/* Users List */
.users-list[b-czk90mguy3] {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    border-top: 1px solid rgba(75, 85, 99, 0.5);
}

.users-list[b-czk90mguy3]::-webkit-scrollbar {
    width: 8px;
}

.users-list[b-czk90mguy3]::-webkit-scrollbar-track {
    background: transparent;
}

.users-list[b-czk90mguy3]::-webkit-scrollbar-thumb {
    background-color: rgba(107, 114, 128, 0.5);
    border-radius: 4px;
}

.user-item[b-czk90mguy3] {
    width: 100%;
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-right: 4px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    text-align: right;
    border-bottom: 1px solid rgba(75, 85, 99, 0.3);
}

.user-item:hover[b-czk90mguy3] {
    background: rgba(55, 65, 81, 0.5);
}

.user-item.active[b-czk90mguy3] {
    background: rgba(168, 85, 247, 0.2);
    border-right-color: #a855f7;
}

.user-content[b-czk90mguy3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.user-info[b-czk90mguy3] {
    flex: 1;
    min-width: 0;
}

.user-header[b-czk90mguy3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.user-avatar[b-czk90mguy3] {
  width: 40px;
  height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c084fc, #60a5fa);
    display: flex;
  align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
    flex-shrink: 0;
}

.user-name[b-czk90mguy3] {
    font-weight: 600;
    color: white;
 overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.user-meta[b-czk90mguy3] {
    display: flex;
    align-items: center;
    gap: 8px;
  color: #9ca3af;
    font-size: 12px;
}

.meta-icon[b-czk90mguy3] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.meta-text[b-czk90mguy3] {
    font-size: 12px;
}

.message-count[b-czk90mguy3] {
    padding: 4px 12px;
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
  border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Chat Area */
.chat-area[b-czk90mguy3] {
    width: 100%;
}

.empty-state-card[b-czk90mguy3] {
    background: rgba(31, 41, 55, 0.5);
    backdrop-filter: blur(16px);
    border-radius: 16px;
 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(75, 85, 99, 0.5);
    padding: 48px;
}

.empty-state[b-czk90mguy3] {
    text-align: center;
}

.empty-icon[b-czk90mguy3] {
    width: 128px;
    height: 128px;
    margin: 0 auto 16px;
    color: #4b5563;
}

.empty-title[b-czk90mguy3] {
    font-size: 24px;
    font-weight: bold;
color: white;
    margin: 0 0 8px 0;
}

.empty-text[b-czk90mguy3] {
    color: #9ca3af;
    margin: 0;
    font-size: 14px;
}

/* Chat Card */
.chat-card[b-czk90mguy3] {
background: rgba(31, 41, 55, 0.5);
backdrop-filter: blur(16px);
    border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(75, 85, 99, 0.5);
    overflow: hidden;
 display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
}

.chat-header[b-czk90mguy3] {
    background: rgba(55, 65, 81, 0.5);
    padding: 16px 24px;
    border-bottom: 1px solid rgba(75, 85, 99, 0.5);
}

.chat-header-content[b-czk90mguy3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-user-info[b-czk90mguy3] {
    display: flex;
  align-items: center;
    gap: 12px;
}

.chat-avatar[b-czk90mguy3] {
  width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.chat-details[b-czk90mguy3] {
    display: flex;
    flex-direction: column;
}

.chat-user-name[b-czk90mguy3] {
    font-weight: bold;
    color: white;
    font-size: 16px;
}

.chat-stats[b-czk90mguy3] {
    font-size: 13px;
    color: #9ca3af;
}

.status-badge[b-czk90mguy3] {
padding: 8px 16px;
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot[b-czk90mguy3] {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse-b-czk90mguy3 2s infinite;
}

@keyframes pulse-b-czk90mguy3 {
    0%, 100% {
        opacity: 1;
    }
    50% {
  opacity: 0.5;
  }
}

/* Messages Container */
.messages-container[b-czk90mguy3] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.messages-container[b-czk90mguy3]::-webkit-scrollbar {
    width: 8px;
}

.messages-container[b-czk90mguy3]::-webkit-scrollbar-track {
 background: transparent;
}

.messages-container[b-czk90mguy3]::-webkit-scrollbar-thumb {
    background-color: rgba(107, 114, 128, 0.5);
    border-radius: 4px;
}

.message-row[b-czk90mguy3] {
    display: flex;
}

.message-row.user-row[b-czk90mguy3] {
    justify-content: flex-end;
}

.message-row.assistant-row[b-czk90mguy3] {
    justify-content: flex-start;
}

.message-wrapper[b-czk90mguy3] {
    max-width: 80%;
}

.message-content[b-czk90mguy3] {
    display: flex;
    align-items: start;
    gap: 12px;
}

.message-content.user-message[b-czk90mguy3] {
    flex-direction: row-reverse;
}

.message-avatar[b-czk90mguy3] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.message-avatar.user-avatar[b-czk90mguy3] {
 background: linear-gradient(135deg, #4ade80, #10b981);
}

.message-avatar.ai-avatar[b-czk90mguy3] {
    background: linear-gradient(135deg, #a855f7, #3b82f6);
}

.avatar-icon[b-czk90mguy3] {
    width: 20px;
    height: 20px;
    color: white;
}

.message-bubble-wrapper[b-czk90mguy3] {
    flex: 1;
}

.message-bubble[b-czk90mguy3] {
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.message-bubble.user-bubble[b-czk90mguy3] {
    background: linear-gradient(135deg, #22c55e, #10b981);
}

.message-bubble.ai-bubble[b-czk90mguy3] {
background: rgba(55, 65, 81, 0.8);
}

.bubble-header[b-czk90mguy3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.bubble-author[b-czk90mguy3] {
    font-weight: 600;
    color: white;
    font-size: 13px;
}

.bubble-text[b-czk90mguy3] {
    color: white;
    line-height: 1.6;
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.message-timestamp[b-czk90mguy3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 0 8px;
}

.message-timestamp.timestamp-end[b-czk90mguy3] {
    justify-content: flex-end;
}

.message-timestamp.timestamp-start[b-czk90mguy3] {
    justify-content: flex-start;
}

.timestamp-icon[b-czk90mguy3] {
    width: 12px;
    height: 12px;
    color: #6b7280;
}

.timestamp-text[b-czk90mguy3] {
    font-size: 11px;
    color: #6b7280;
}

/* No Messages */
.no-messages[b-czk90mguy3] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.no-messages-content[b-czk90mguy3] {
    text-align: center;
}

.no-messages-icon[b-czk90mguy3] {
    width: 96px;
  height: 96px;
    margin: 0 auto 16px;
    color: #4b5563;
}

.no-messages-text[b-czk90mguy3] {
    font-size: 18px;
    color: #9ca3af;
    margin: 0;
}
/* _content/XpowerBot/Components/Layout/MainLayout.razor.rz.scp.css */
:root[b-gq3pkot4pg] {
    --bn-h: calc(64px + env(safe-area-inset-bottom, 0px));
}

.app-shell[b-gq3pkot4pg] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    overflow-x: hidden;
    padding-bottom: var(--bn-h)
}

.main[b-gq3pkot4pg] {
    flex: 1 0 auto;
}

.menu-open[b-gq3pkot4pg] {
    overflow: hidden
}

/* Aurora background (��� �� �� ������ �������) */
.bg-aurora[b-gq3pkot4pg] {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(1200px 700px at 80% -10%, rgba(122,92,255,.25), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(0,231,255,.22), transparent 60%), linear-gradient(180deg, #0b1220 0%, #070b12 100%);
}

    .bg-aurora[b-gq3pkot4pg]::before {
        content: "";
        position: absolute;
        inset: -20%;
        z-index: -1;
        background: conic-gradient(from 120deg at 50% 50%, rgba(0,231,255,.18), rgba(122,92,255,.18), rgba(0,255,183,.18), rgba(255,46,134,.12), rgba(0,231,255,.18));
        filter: blur(60px);
        animation: auroraShift-b-gq3pkot4pg 14s ease-in-out infinite alternate
    }

    .bg-aurora[b-gq3pkot4pg]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 1px, transparent 1px 32px), repeating-linear-gradient(205deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px);
        mask: radial-gradient(600px 400px at 50% 10%, rgba(255,255,255,.9), transparent 70%);
        opacity: .25;
        mix-blend-mode: screen
    }

@keyframes auroraShift-b-gq3pkot4pg {
    0% {
        transform: translate3d(-4%, -2%, 0) rotate(0deg)
    }

    100% {
        transform: translate3d(4%, 2%, 0) rotate(10deg)
    }
}

/* Topbar */
.topbar[b-gq3pkot4pg] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(to bottom, rgba(11,18,32,.8), rgba(11,18,32,.4), transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.06)
}

    .topbar .bar[b-gq3pkot4pg] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 0
    }

.brand[b-gq3pkot4pg] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: .3px
}

    .brand span[b-gq3pkot4pg] {
        font-size: 18px
    }

.desktop-nav[b-gq3pkot4pg] {
    display: flex;
    gap: 22px;
    color: var(--muted)
}

    .desktop-nav a[b-gq3pkot4pg], .desktop-nav .active[b-gq3pkot4pg] {
        padding: 8px 10px;
        border-radius: 10px;
        transition: color .2s, background .2s
    }

        .desktop-nav a:hover[b-gq3pkot4pg], .desktop-nav .active[b-gq3pkot4pg] {
            color: var(--text);
            background: rgba(255,255,255,.05)
        }

/* CTA + Hamburger */
.actions[b-gq3pkot4pg] {
    display: flex;
    align-items: center;
    gap: 10px
}

.desktop-only[b-gq3pkot4pg] {
    display: inline-flex
}

.hamburger[b-gq3pkot4pg] {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.03);
    position: relative;
    overflow: hidden;
    transition: background .2s, border-color .2s
}

    .hamburger:hover[b-gq3pkot4pg] {
        border-color: rgba(255,255,255,.28)
    }

    .hamburger span[b-gq3pkot4pg] {
        position: absolute;
        left: 10px;
        right: 10px;
        height: 2px;
        background: linear-gradient(90deg, var(--c1), var(--c2));
        transition: transform .35s var(--ease-out), opacity .2s;
        border-radius: 2px
    }

        .hamburger span:nth-child(1)[b-gq3pkot4pg] {
            top: 13px
        }

        .hamburger span:nth-child(2)[b-gq3pkot4pg] {
            top: 20px
        }

        .hamburger span:nth-child(3)[b-gq3pkot4pg] {
            top: 27px
        }

.menu-open .hamburger span:nth-child(1)[b-gq3pkot4pg] {
    transform: translateY(7px) rotate(45deg)
}

.menu-open .hamburger span:nth-child(2)[b-gq3pkot4pg] {
    opacity: 0
}

.menu-open .hamburger span:nth-child(3)[b-gq3pkot4pg] {
    transform: translateY(-7px) rotate(-45deg)
}

/* Mobile menu overlay */
.mobile-menu-overlay[b-gq3pkot4pg] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    background: radial-gradient(800px 400px at 50% 10%, rgba(0,231,255,.10), transparent 60%), rgba(7,11,18,.72);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease-out)
}

    .mobile-menu-overlay.open[b-gq3pkot4pg] {
        opacity: 1;
        pointer-events: auto
    }

.mobile-menu[b-gq3pkot4pg] {
    width: min(720px, 90vw);
    border-radius: 20px;
    padding: 22px 18px 18px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0,0,0,.5)
}

.mobile-nav[b-gq3pkot4pg] {
    display: grid;
    gap: 8px;
    margin-bottom: 14px
}

    .mobile-nav a[b-gq3pkot4pg] {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        border-radius: 14px;
        font-size: 18px;
        font-weight: 800;
        background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
        border: 1px solid rgba(255,255,255,.12);
        transition: transform .18s var(--ease-out), background .2s
    }

        .mobile-nav a:hover[b-gq3pkot4pg] {
            transform: translateY(-2px);
            background: rgba(255,255,255,.08)
        }

.mobile-cta[b-gq3pkot4pg] {
    display: flex;
    gap: 10px;
    justify-content: center
}

/* Bottom navigation (mobile only) */
.bottom-nav[b-gq3pkot4pg] {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    width: min(680px, 94vw);
    height: 64px;
    z-index: 40;
    display: none;
    align-items: center;
    justify-content: space-around;
    gap: 10px;
    padding: 8px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    box-shadow: 0 20px 40px rgba(0,0,0,.45)
}

.menu-open .bottom-nav[b-gq3pkot4pg] {
    opacity: 0;
    transform: translate(-50%, 10px);
    pointer-events: none
}

.bn-item[b-gq3pkot4pg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2px;
    padding: 6px 4px;
    border-radius: 10px;
    transition: color .2s, background .2s
}

    .bn-item:hover[b-gq3pkot4pg] {
        color: var(--text);
        background: rgba(255,255,255,.05)
    }

    .bn-item svg[b-gq3pkot4pg] {
        color: var(--c1)
    }

/* Footer */
.site-footer[b-gq3pkot4pg] {
    margin-top: auto;
    padding: 28px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(to top, rgba(11,18,32,.5), transparent)
}

.foot[b-gq3pkot4pg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap
}

.foot-left[b-gq3pkot4pg] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted)
}

.sep[b-gq3pkot4pg] {
    opacity: .6
}

.foot-right[b-gq3pkot4pg] {
    display: flex;
    gap: 10px
}

/* Responsive rules */
@media (max-width: 1024px) {
    .desktop-nav[b-gq3pkot4pg] {
        display: none
    }
}

@media (max-width: 768px) {
    .desktop-only[b-gq3pkot4pg] {
        display: none
    }

    .hamburger[b-gq3pkot4pg] {
        display: block
    }

    .bottom-nav[b-gq3pkot4pg] {
        display: flex
    }
}
/* _content/XpowerBot/Components/Layout/MainLayoutAdmin.razor.rz.scp.css */
/* Main Layout Admin Styles - RTL Support */

.admin-layout[b-225ufr1szf] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    position: relative;
  overflow: hidden;
    direction: rtl;
}

.admin-layout[b-225ufr1szf]::before {
    content: '';
    position: fixed;
    inset: 0;
  background: 
        radial-gradient(circle at 20% 20%, rgba(14, 165, 233, 0.1) 0%, transparent 50%),
  radial-gradient(circle at 80% 80%, rgba(217, 70, 239, 0.1) 0%, transparent 50%);
 pointer-events: none;
 animation: backgroundPulse-b-225ufr1szf 15s ease-in-out infinite;
}

@keyframes backgroundPulse-b-225ufr1szf {
  0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.admin-container[b-225ufr1szf] {
    position: relative;
display: flex;
    height: 100vh;
overflow: hidden;
}

/* Main Content Area - ����� ����� �� ������ ������� �������� */
.main-content[b-225ufr1szf] {
    flex: 1;
    overflow-y: auto;
background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(10px);
    padding: 2rem;
    margin-right: 18rem; /* ����� ������� �������� */
}

@media (max-width: 1280px) {
    .main-content[b-225ufr1szf] {
        margin-right: 16rem;
    }
}

@media (max-width: 1024px) {
    .main-content[b-225ufr1szf] {
        margin-right: 0;
 padding-bottom: 5rem; /* ����� ������� ������� �� �������� */
    }
}

.content-wrapper[b-225ufr1szf] {
    max-width: 1920px;
    margin: 0 auto;
}

/* Header Styles */
.admin-header[b-225ufr1szf] {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.header-content[b-225ufr1szf] {
    padding: 1.25rem 2rem;
    direction: rtl;
}

.header-actions[b-225ufr1szf] {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
}

.header-logo[b-225ufr1szf] {
 width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #0ea5e9, #d946ef);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(14, 165, 233, 0.5);
}

.header-title[b-225ufr1szf] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-align: right;
}

.header-subtitle[b-225ufr1szf] {
    font-size: 0.875rem;
    color: #94a3b8;
 margin: 0;
    text-align: right;
}

/* Button Styles */
.btn-icon[b-225ufr1szf] {
padding: 0.625rem;
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
  color: #94a3b8;
    transition: all 0.2s ease;
  cursor: pointer;
}

.btn-icon:hover[b-225ufr1szf] {
    background: #1e293b;
 color: #fff;
    transform: translateY(-2px);
}

.notification-badge[b-225ufr1szf] {
    position: absolute;
    top: 0.375rem;
  left: 0.375rem; /* ����� �� right ��� left */
    width: 0.625rem;
    height: 0.625rem;
  background: #ef4444;
    border-radius: 50%;
    border: 2px solid #0f172a;
    animation: pulse-b-225ufr1szf 2s ease-in-out infinite;
}

@keyframes pulse-b-225ufr1szf {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

.admin-profile[b-225ufr1szf] {
  display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-avatar[b-225ufr1szf] {
    width: 2.25rem;
  height: 2.25rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #f59e0b, #fb923c);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.profile-name[b-225ufr1szf] {
  font-size: 0.875rem;
  font-weight: 600;
 color: #fff;
}

/* Footer Styles */
.admin-footer[b-225ufr1szf] {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
 padding: 1rem 2rem;
    direction: rtl;
}

.footer-content[b-225ufr1szf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
}

.footer-text[b-225ufr1szf] {
    color: #94a3b8;
}

.footer-highlight[b-225ufr1szf] {
    font-weight: 600;
    color: #fff;
}

.status-indicator[b-225ufr1szf] {
    display: flex;
    align-items: center;
  gap: 0.5rem;
    color: #94a3b8;
}

.status-dot[b-225ufr1szf] {
    width: 0.5rem;
    height: 0.5rem;
    background: #f59e0b;
    border-radius: 50%;
    animation: pulse-b-225ufr1szf 2s ease-in-out infinite;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .header-content[b-225ufr1szf] {
  padding: 1rem 1.5rem;
}

    .main-content[b-225ufr1szf] {
    padding: 1.5rem;
    }

    .admin-footer[b-225ufr1szf] {
        padding: 0.75rem 1.5rem;
    }

    .profile-name[b-225ufr1szf] {
        display: none;
 }
}

@media (max-width: 640px) {
    .header-title[b-225ufr1szf] {
        font-size: 1.25rem;
    }

    .header-subtitle[b-225ufr1szf] {
        font-size: 0.75rem;
    }

    .main-content[b-225ufr1szf] {
   padding: 1rem;
    }

    .footer-content[b-225ufr1szf] {
    flex-direction: column;
  gap: 0.5rem;
 font-size: 0.75rem;
    }
}

/* Animation */
@keyframes fadeIn-b-225ufr1szf {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in[b-225ufr1szf] {
  animation: fadeIn-b-225ufr1szf 0.5s ease-out;
}
/* _content/XpowerBot/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-i4m1nxxblh] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-i4m1nxxblh] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-i4m1nxxblh] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-i4m1nxxblh] {
    font-size: 1.1rem;
}

.bi[b-i4m1nxxblh] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-i4m1nxxblh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-i4m1nxxblh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-i4m1nxxblh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-i4m1nxxblh] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-i4m1nxxblh] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-i4m1nxxblh] {
        padding-bottom: 1rem;
    }

    .nav-item[b-i4m1nxxblh]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-i4m1nxxblh]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-i4m1nxxblh]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-i4m1nxxblh] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-i4m1nxxblh] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-i4m1nxxblh] {
        display: none;
    }

    .nav-scrollable[b-i4m1nxxblh] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/XpowerBot/Components/Layout/NavMenuAdmin.razor.rz.scp.css */
/* ============================================
 NavMenuAdmin - Pure CSS Styles (RTL)
   ============================================ */

/* SVG Icon Size Fix */
svg[b-v4jyayptjx] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Desktop Sidebar - RTL */
.admin-sidebar[b-v4jyayptjx] {
    display: none;
    position: fixed;
 right: 0; /* ����� �� left ��� right */
    top: 0;
    bottom: 0;
    width: 18rem;
  background: rgba(17, 24, 39, 0.8);
  backdrop-filter: blur(60px);
  border-left: 1px solid rgba(255, 255, 255, 0.05); /* ����� �� border-right */
    box-shadow: -25px 0 50px -12px rgba(0, 0, 0, 0.5); /* ��� ���� */
    flex-direction: column;
    z-index: 40;
}

@media (min-width: 1024px) {
    .admin-sidebar[b-v4jyayptjx] {
        display: flex;
  }
}

/* Logo Section */
.sidebar-logo[b-v4jyayptjx] {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.logo-link[b-v4jyayptjx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    transition: transform 0.3s ease;
    direction: rtl;
}

.logo-link:hover[b-v4jyayptjx] {
    transform: scale(1.02);
}

.logo-icon[b-v4jyayptjx] {
 width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    display: flex;
 align-items: center;
  justify-content: center;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
transition: transform 0.3s ease;
}

.logo-link:hover .logo-icon[b-v4jyayptjx] {
    transform: scale(1.05);
}

.logo-icon svg[b-v4jyayptjx] {
    width: 2rem;
    height: 2rem;
color: white;
}

.logo-text h2[b-v4jyayptjx] {
    font-size: 1.25rem;
 font-weight: 700;
    color: white;
    margin: 0 0 0.125rem 0;
    text-align: right;
}

.logo-text p[b-v4jyayptjx] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin: 0;
    text-align: right;
}

/* Sidebar Navigation */
.sidebar-nav[b-v4jyayptjx] {
    flex: 1;
padding: 1.5rem 1rem;
 overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  direction: rtl;
}

/* Custom Scrollbar */
.sidebar-nav[b-v4jyayptjx]::-webkit-scrollbar {
    width: 0.375rem;
}

.sidebar-nav[b-v4jyayptjx]::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.3);
    border-radius: 0.375rem;
}

.sidebar-nav[b-v4jyayptjx]::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 0.375rem;
}

.sidebar-nav[b-v4jyayptjx]::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.5);
}

/* Nav Link */
.nav-link[b-v4jyayptjx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
  text-decoration: none;
    color: #9ca3af;
    font-weight: 600;
    font-size: 0.875rem;
  transition: all 0.2s ease;
  position: relative;
    direction: rtl;
}

.nav-link:hover[b-v4jyayptjx] {
    background: rgba(31, 41, 55, 0.5);
    color: white;
}

.nav-link.active[b-v4jyayptjx] {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
    color: white;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.nav-link.active[b-v4jyayptjx]::before {
    content: '';
    position: absolute;
    right: 0; /* ����� �� left ��� right */
 top: 50%;
    transform: translateY(-50%);
    width: 0.25rem;
    height: 70%;
    background: linear-gradient(180deg, #3b82f6, #8b5cf6);
    border-radius: 0.25rem 0 0 0.25rem; /* ��� ������ */
}

/* Nav Icon */
.nav-icon[b-v4jyayptjx] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: rgba(31, 41, 55, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
 transition: all 0.2s ease;
}

.nav-link:hover .nav-icon[b-v4jyayptjx] {
    background: rgba(59, 130, 246, 0.2);
}

.nav-link.active .nav-icon[b-v4jyayptjx] {
    background: rgba(59, 130, 246, 0.2);
}

.nav-icon svg[b-v4jyayptjx] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Nav Text */
.nav-text[b-v4jyayptjx] {
  flex: 1;
    text-align: right;
}

/* Nav Badge */
.nav-badge[b-v4jyayptjx] {
  padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.625rem;
  font-weight: 700;
}

.nav-badge.new[b-v4jyayptjx] {
    background: #8b5cf6;
    color: white;
}

.nav-badge.important[b-v4jyayptjx] {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: white;
    animation: pulse-b-v4jyayptjx 2s infinite;
}

@keyframes pulse-b-v4jyayptjx {
 0%, 100% {
        opacity: 1;
 transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Nav Divider */
.nav-divider[b-v4jyayptjx] {
    margin: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Sidebar Footer */
.sidebar-footer[b-v4jyayptjx] {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    direction: rtl;
}

.footer-link[b-v4jyayptjx] {
    display: flex;
  align-items: center;
 gap: 0.75rem;
  padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid;
    cursor: pointer;
    background: none;
    width: 100%;
    direction: rtl;
}

.footer-link.back[b-v4jyayptjx] {
    background: rgba(31, 41, 55, 0.8);
    border-color: rgba(255, 255, 255, 0.05);
    color: #9ca3af;
}

.footer-link.back:hover[b-v4jyayptjx] {
    background: rgba(55, 65, 81, 1);
    color: white;
}

.footer-link.logout[b-v4jyayptjx] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.footer-link.logout:hover[b-v4jyayptjx] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.footer-link svg[b-v4jyayptjx] {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Mobile Bottom Navigation */
.mobile-nav[b-v4jyayptjx] {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(60px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 -25px 50px -12px rgba(0, 0, 0, 0.5);
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 1024px) {
    .mobile-nav[b-v4jyayptjx] {
    display: none;
    }
}

.mobile-nav-grid[b-v4jyayptjx] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
}

.mobile-nav-link[b-v4jyayptjx] {
    display: flex;
    flex-direction: column;
    align-items: center;
 gap: 0.375rem;
    padding: 0.5rem;
    border-radius: 0.75rem;
    text-decoration: none;
    color: #9ca3af;
    transition: all 0.2s ease;
}

.mobile-nav-link:hover[b-v4jyayptjx] {
    background: rgba(31, 41, 55, 0.5);
    color: white;
}

.mobile-nav-link.active[b-v4jyayptjx] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
 color: white;
}

.mobile-nav-link svg[b-v4jyayptjx] {
    width: 1.5rem;
    height: 1.5rem;
}

.mobile-nav-link span[b-v4jyayptjx] {
    font-size: 0.625rem;
    font-weight: 700;
}

/* Animations */
@keyframes slideInRight-b-v4jyayptjx {
    from {
      transform: translateX(100%); /* �� ������ */
     opacity: 0;
 }
    to {
 transform: translateX(0);
     opacity: 1;
    }
}

.admin-sidebar[b-v4jyayptjx] {
    animation: slideInRight-b-v4jyayptjx 0.3s ease-out;
}

/* Responsive Adjustments */
@media (max-width: 1280px) {
 .admin-sidebar[b-v4jyayptjx] {
 width: 16rem;
    }
}

@media (max-width: 1024px) {
    .admin-sidebar[b-v4jyayptjx] {
        display: none;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .nav-link[b-v4jyayptjx] {
        min-height: 2.75rem;
    }
 
    .mobile-nav-link[b-v4jyayptjx] {
        min-height: 3.5rem;
    }
}
/* _content/XpowerBot/Components/Pages/About.razor.rz.scp.css */
/* ABOUT */
.about-grid[b-4q8tg62idy] {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 22px;
    align-items: start
}

.profile-card[b-4q8tg62idy] {
    padding: 20px;
    text-align: center
}

.avatar[b-4q8tg62idy] {
    width: 180px;
    height: 180px;
    margin: 6px auto 10px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.02)
}

.avatar img[b-4q8tg62idy] {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.name[b-4q8tg62idy] {
    margin: 10px 0 4px;
    font-size: 20px
}

.bio[b-4q8tg62idy] {
    margin: 0 0 12px;
    color: var(--muted)
}

.socials[b-4q8tg62idy] {
    justify-content: center
}

.stats[b-4q8tg62idy] {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px
}

.stats .s-item[b-4q8tg62idy] {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    padding: 12px;
    border-radius: 12px;
    display: grid;
    place-items: center
}

.stats strong[b-4q8tg62idy] {
    font-size: 22px
}

.about-right .about-features[b-4q8tg62idy] {
    margin-top: 8px;
    display: grid;
    gap: 12px
}

.a-card[b-4q8tg62idy] {
    display: flex;
    gap: 12px;
    padding: 16px;
    align-items: flex-start
}

.a-ic[b-4q8tg62idy] {
    font-size: 22px;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(0,231,255,.16), rgba(255,255,255,.04))
}

/* Responsive */
@media (max-width: 1024px) {
    .about-grid[b-4q8tg62idy] { grid-template-columns: 1fr; }
    .profile-card[b-4q8tg62idy] { order: 2; }
}
/* _content/XpowerBot/Components/Pages/AdminAnalytics.razor.rz.scp.css */
/* ============================================
   XPOWER Analytics - Pure CSS Styles
   ============================================ */

/* Container */
.analytics-container[b-3823ga9ao9] {
    padding: 2rem;
    animation: fadeInUp-b-3823ga9ao9 0.5s ease-out;
}

@keyframes fadeInUp-b-3823ga9ao9 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Page Header */
.page-header[b-3823ga9ao9] {
  display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-title[b-3823ga9ao9] {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.page-description[b-3823ga9ao9] {
    color: #9ca3af;
font-size: 0.95rem;
  margin: 0;
}

.header-actions[b-3823ga9ao9] {
  display: flex;
    align-items: center;
    gap: 0.75rem;
}

.period-selector[b-3823ga9ao9] {
    padding: 0.75rem 1rem;
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    color: #ffffff;
    font-size: 0.875rem;
  cursor: pointer;
    transition: all 0.2s ease;
}

.period-selector:hover[b-3823ga9ao9] {
    background: rgba(31, 41, 55, 0.8);
    border-color: rgba(59, 130, 246, 0.3);
}

.period-selector:focus[b-3823ga9ao9] {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-refresh[b-3823ga9ao9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 0.75rem;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
 transition: all 0.2s ease;
}

.btn-refresh:hover[b-3823ga9ao9] {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.btn-refresh svg[b-3823ga9ao9] {
    width: 1rem;
    height: 1rem;
}

/* Loading State */
.loading-state[b-3823ga9ao9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

.spinner-large[b-3823ga9ao9] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(59, 130, 246, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-3823ga9ao9 0.8s linear infinite;
}

@keyframes spin-b-3823ga9ao9 {
  to { transform: rotate(360deg); }
}

.loading-state p[b-3823ga9ao9] {
    color: #9ca3af;
    font-size: 0.95rem;
}

/* KPI Cards Grid */
.kpi-grid[b-3823ga9ao9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* KPI Card */
.kpi-card[b-3823ga9ao9] {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.kpi-card:hover[b-3823ga9ao9] {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.1);
}

.kpi-card.primary[b-3823ga9ao9] { border-left: 4px solid #3b82f6; }
.kpi-card.success[b-3823ga9ao9] { border-left: 4px solid #10b981; }
.kpi-card.info[b-3823ga9ao9] { border-left: 4px solid #8b5cf6; }
.kpi-card.warning[b-3823ga9ao9] { border-left: 4px solid #f59e0b; }

.kpi-icon[b-3823ga9ao9] {
  width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
 display: flex;
    align-items: center;
    justify-content: center;
 flex-shrink: 0;
}

.kpi-card.primary .kpi-icon[b-3823ga9ao9] {
    background: rgba(59, 130, 246, 0.2);
}

.kpi-card.success .kpi-icon[b-3823ga9ao9] {
    background: rgba(16, 185, 129, 0.2);
}

.kpi-card.info .kpi-icon[b-3823ga9ao9] {
    background: rgba(139, 92, 246, 0.2);
}

.kpi-card.warning .kpi-icon[b-3823ga9ao9] {
    background: rgba(245, 158, 11, 0.2);
}

.kpi-icon svg[b-3823ga9ao9] {
    width: 1.75rem;
    height: 1.75rem;
}

.kpi-card.primary .kpi-icon svg[b-3823ga9ao9] { color: #60a5fa; }
.kpi-card.success .kpi-icon svg[b-3823ga9ao9] { color: #34d399; }
.kpi-card.info .kpi-icon svg[b-3823ga9ao9] { color: #a78bfa; }
.kpi-card.warning .kpi-icon svg[b-3823ga9ao9] { color: #fbbf24; }

.kpi-content[b-3823ga9ao9] {
    flex: 1;
}

.kpi-label[b-3823ga9ao9] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin: 0 0 0.5rem 0;
}

.kpi-value[b-3823ga9ao9] {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
}

.kpi-change[b-3823ga9ao9] {
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0;
}

.kpi-change.positive[b-3823ga9ao9] { color: #34d399; }
.kpi-change.negative[b-3823ga9ao9] { color: #f87171; }

.kpi-extra[b-3823ga9ao9] {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

/* Charts Row */
.charts-row[b-3823ga9ao9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Chart Card */
.chart-card[b-3823ga9ao9] {
background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.chart-card.full-width[b-3823ga9ao9] {
    grid-column: 1 / -1;
}

.chart-header[b-3823ga9ao9] {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.chart-header h3[b-3823ga9ao9] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.chart-body[b-3823ga9ao9] {
    padding: 1.5rem;
}

/* Pie Chart */
.pie-chart[b-3823ga9ao9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.pie-legend[b-3823ga9ao9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.legend-item[b-3823ga9ao9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.legend-color[b-3823ga9ao9] {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.legend-color.active[b-3823ga9ao9] {
    background: linear-gradient(135deg, #10b981, #059669);
}

.legend-color.expired[b-3823ga9ao9] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.legend-color.inactive[b-3823ga9ao9] {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.legend-label[b-3823ga9ao9] {
    color: #d1d5db;
    font-size: 0.875rem;
 flex: 1;
}

.legend-value[b-3823ga9ao9] {
 color: #9ca3af;
    font-size: 0.875rem;
    font-weight: 600;
}

.pie-visual[b-3823ga9ao9] {
    position: relative;
}

.pie-svg[b-3823ga9ao9] {
    width: 100%;
    height: auto;
    max-width: 200px;
    margin: 0 auto;
    display: block;
}

.pie-slice[b-3823ga9ao9] {
    stroke: rgba(17, 24, 39, 0.8);
    stroke-width: 2;
    transition: all 0.3s ease;
}

.pie-slice:hover[b-3823ga9ao9] {
    opacity: 0.8;
    transform: scale(1.05);
}

.pie-slice.active[b-3823ga9ao9] {
 fill: url(#activeGradient);
}

.pie-slice.expired[b-3823ga9ao9] {
    fill: url(#expiredGradient);
}

.pie-slice.inactive[b-3823ga9ao9] {
    fill: url(#inactiveGradient);
}

.pie-center[b-3823ga9ao9] {
    fill: rgba(17, 24, 39, 0.9);
}

.pie-total-label[b-3823ga9ao9] {
    fill: #9ca3af;
    font-size: 10px;
    text-anchor: middle;
}

.pie-total-value[b-3823ga9ao9] {
    fill: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-anchor: middle;
}

/* Bar Chart */
.bar-chart[b-3823ga9ao9] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bar-item[b-3823ga9ao9] {
    display: flex;
 flex-direction: column;
    gap: 0.5rem;
}

.bar-label[b-3823ga9ao9] {
    display: flex;
    justify-content: space-between;
 align-items: center;
}

.role-name[b-3823ga9ao9] {
    color: #d1d5db;
    font-size: 0.875rem;
    font-weight: 500;
}

.role-count[b-3823ga9ao9] {
    color: #9ca3af;
    font-size: 0.875rem;
    font-weight: 600;
}

.bar-track[b-3823ga9ao9] {
    height: 0.75rem;
    background: rgba(31, 41, 55, 0.6);
  border-radius: 0.5rem;
    overflow: hidden;
}

.bar-fill[b-3823ga9ao9] {
    height: 100%;
    border-radius: 0.5rem;
    transition: width 0.6s ease;
}

.bar-fill.owner[b-3823ga9ao9] {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.bar-fill.admin[b-3823ga9ao9] {
  background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

.bar-fill.distributor[b-3823ga9ao9] {
    background: linear-gradient(90deg, #10b981, #059669);
}

/* Product List */
.product-list[b-3823ga9ao9] {
    display: flex;
 flex-direction: column;
    gap: 1rem;
}

.product-item[b-3823ga9ao9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-info[b-3823ga9ao9] {
display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-name[b-3823ga9ao9] {
 color: #d1d5db;
    font-size: 0.875rem;
    font-weight: 500;
}

.product-count[b-3823ga9ao9] {
    color: #9ca3af;
    font-size: 0.75rem;
}

.product-bar[b-3823ga9ao9] {
    height: 0.5rem;
    background: rgba(31, 41, 55, 0.6);
    border-radius: 0.5rem;
    overflow: hidden;
}

.product-bar-fill[b-3823ga9ao9] {
  height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 0.5rem;
    transition: width 0.6s ease;
}

/* Activity List */
.activity-list[b-3823ga9ao9] {
    display: flex;
flex-direction: column;
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

.activity-item[b-3823ga9ao9] {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(31, 41, 55, 0.3);
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.activity-item:hover[b-3823ga9ao9] {
    background: rgba(31, 41, 55, 0.5);
}

.activity-icon[b-3823ga9ao9] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
align-items: center;
    justify-content: center;
 flex-shrink: 0;
}

.activity-icon svg[b-3823ga9ao9] {
    width: 1.25rem;
    height: 1.25rem;
}

.activity-icon.create[b-3823ga9ao9] {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.activity-icon.update[b-3823ga9ao9] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.activity-icon.delete[b-3823ga9ao9] {
background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.activity-icon.login[b-3823ga9ao9] {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

.activity-icon.default[b-3823ga9ao9] {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.activity-content[b-3823ga9ao9] {
    flex: 1;
    min-width: 0;
}

.activity-description[b-3823ga9ao9] {
    color: #d1d5db;
    font-size: 0.875rem;
    margin: 0 0 0.25rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-meta[b-3823ga9ao9] {
  color: #6b7280;
    font-size: 0.75rem;
    margin: 0;
    display: flex;
    gap: 0.5rem;
}

/* Line Chart */
.line-chart[b-3823ga9ao9] {
    position: relative;
}

.trend-svg[b-3823ga9ao9] {
    width: 100%;
    height: 200px;
    margin-bottom: 1rem;
}

.grid-line[b-3823ga9ao9] {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 1;
}

.trend-line[b-3823ga9ao9] {
  fill: none;
    stroke: #3b82f6;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trend-area[b-3823ga9ao9] {
    fill: url(#trendGradient);
    opacity: 0.3;
}

.trend-labels[b-3823ga9ao9] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    overflow-x: auto;
}

.trend-label[b-3823ga9ao9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 60px;
}

.trend-date[b-3823ga9ao9] {
    color: #6b7280;
    font-size: 0.75rem;
}

.trend-value[b-3823ga9ao9] {
    color: #3b82f6;
    font-size: 0.875rem;
  font-weight: 600;
}

/* Tables Row */
.tables-row[b-3823ga9ao9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
 margin-bottom: 2rem;
}

.table-card[b-3823ga9ao9] {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.table-card.full[b-3823ga9ao9] {
    grid-column: 1 / -1;
}

.table-header[b-3823ga9ao9] {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.table-header h3[b-3823ga9ao9] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.table-body[b-3823ga9ao9] {
    padding: 1.5rem;
    overflow-x: auto;
}

.stats-table[b-3823ga9ao9] {
    width: 100%;
    border-collapse: collapse;
}

.stats-table thead th[b-3823ga9ao9] {
    text-align: right;
    padding: 0.75rem 1rem;
    color: #9ca3af;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stats-table tbody td[b-3823ga9ao9] {
    padding: 0.875rem 1rem;
    color: #d1d5db;
  font-size: 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.stats-table tbody tr:hover[b-3823ga9ao9] {
    background: rgba(31, 41, 55, 0.3);
}

.user-cell[b-3823ga9ao9] {
    font-weight: 500;
}

.progress-cell[b-3823ga9ao9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.progress-bar[b-3823ga9ao9] {
    height: 0.5rem;
    background: rgba(31, 41, 55, 0.6);
    border-radius: 0.5rem;
overflow: hidden;
    flex: 1;
}

.progress-fill[b-3823ga9ao9] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 0.5rem;
    transition: width 0.6s ease;
}

.progress-text[b-3823ga9ao9] {
    color: #9ca3af;
    font-size: 0.75rem;
}

/* Health Metrics */
.health-metrics[b-3823ga9ao9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.health-item[b-3823ga9ao9] {
 display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(31, 41, 55, 0.3);
    border-radius: 0.75rem;
}

.health-label[b-3823ga9ao9] {
    color: #9ca3af;
    font-size: 0.875rem;
}

.health-value[b-3823ga9ao9] {
    font-size: 1.5rem;
  font-weight: 700;
}

.health-value.success[b-3823ga9ao9] { color: #34d399; }
.health-value.warning[b-3823ga9ao9] { color: #fbbf24; }
.health-value.danger[b-3823ga9ao9] { color: #f87171; }
.health-value.info[b-3823ga9ao9] { color: #60a5fa; }

/* Empty State */
.empty-state-small[b-3823ga9ao9] {
    text-align: center;
    padding: 2rem 1rem;
}

.empty-state-small p[b-3823ga9ao9] {
    color: #6b7280;
    font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .kpi-grid[b-3823ga9ao9] {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-row[b-3823ga9ao9] {
        grid-template-columns: 1fr;
    }

    .pie-chart[b-3823ga9ao9] {
     grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .analytics-container[b-3823ga9ao9] {
 padding: 1rem;
    }

    .page-header[b-3823ga9ao9] {
        flex-direction: column;
        align-items: flex-start;
    }

    .kpi-grid[b-3823ga9ao9] {
        grid-template-columns: 1fr;
    }

 .tables-row[b-3823ga9ao9] {
        grid-template-columns: 1fr;
    }

.health-metrics[b-3823ga9ao9] {
  grid-template-columns: 1fr;
    }

    .kpi-value[b-3823ga9ao9] {
        font-size: 1.5rem;
    }

    .chart-card.full-width[b-3823ga9ao9] {
        grid-column: 1;
 }
}

/* Add gradient definitions inline via CSS variables (for SVG fallback) */
@supports not (fill: url(#gradient)) {
    .pie-slice.active[b-3823ga9ao9] {
     fill: #10b981;
    }
 
    .pie-slice.expired[b-3823ga9ao9] {
        fill: #f59e0b;
  }
    
 .pie-slice.inactive[b-3823ga9ao9] {
        fill: #6b7280;
    }
}
/* _content/XpowerBot/Components/Pages/AdminAudit.razor.rz.scp.css */
/* ============================================
   XPOWER Audit Log - Pure CSS Styles
   ============================================ */

/* Container */
.audit-container[b-2wevgy6mro] {
    padding: 2rem;
    animation: fadeInUp-b-2wevgy6mro 0.5s ease-out;
}

@keyframes fadeInUp-b-2wevgy6mro {
    from {
    opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
  transform: translateY(0);
    }
}

/* Page Header */
.page-header[b-2wevgy6mro] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-title[b-2wevgy6mro] {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.page-description[b-2wevgy6mro] {
    color: #9ca3af;
    font-size: 0.95rem;
    margin: 0;
}

.header-actions[b-2wevgy6mro] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-refresh[b-2wevgy6mro] {
    display: inline-flex;
    align-items: center;
gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 0.75rem;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refresh:hover:not(:disabled)[b-2wevgy6mro] {
  transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.btn-refresh:disabled[b-2wevgy6mro] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-refresh svg[b-2wevgy6mro] {
    width: 1rem;
height: 1rem;
}

/* Loading State */
.loading-state[b-2wevgy6mro] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
min-height: 400px;
  gap: 1rem;
}

.spinner-large[b-2wevgy6mro] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(59, 130, 246, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-2wevgy6mro 0.8s linear infinite;
}

@keyframes spin-b-2wevgy6mro {
 to { transform: rotate(360deg); }
}

.loading-state p[b-2wevgy6mro] {
    color: #9ca3af;
    font-size: 0.95rem;
}

/* Stats Grid */
.stats-grid[b-2wevgy6mro] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Stat Card */
.stat-card[b-2wevgy6mro] {
background: rgba(17, 24, 39, 0.6);
  backdrop-filter: blur(40px);
    border-radius: 1.5rem;
 padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.stat-card:hover[b-2wevgy6mro] {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.1);
}

.stat-card.primary[b-2wevgy6mro] { border-left: 4px solid #3b82f6; }
.stat-card.success[b-2wevgy6mro] { border-left: 4px solid #10b981; }
.stat-card.danger[b-2wevgy6mro] { border-left: 4px solid #ef4444; }
.stat-card.info[b-2wevgy6mro] { border-left: 4px solid #8b5cf6; }

.stat-icon[b-2wevgy6mro] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
  display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card.primary .stat-icon[b-2wevgy6mro] {
    background: rgba(59, 130, 246, 0.2);
}

.stat-card.success .stat-icon[b-2wevgy6mro] {
    background: rgba(16, 185, 129, 0.2);
}

.stat-card.danger .stat-icon[b-2wevgy6mro] {
    background: rgba(239, 68, 68, 0.2);
}

.stat-card.info .stat-icon[b-2wevgy6mro] {
    background: rgba(139, 92, 246, 0.2);
}

.stat-icon svg[b-2wevgy6mro] {
    width: 1.75rem;
 height: 1.75rem;
}

.stat-card.primary .stat-icon svg[b-2wevgy6mro] { color: #60a5fa; }
.stat-card.success .stat-icon svg[b-2wevgy6mro] { color: #34d399; }
.stat-card.danger .stat-icon svg[b-2wevgy6mro] { color: #f87171; }
.stat-card.info .stat-icon svg[b-2wevgy6mro] { color: #a78bfa; }

.stat-content[b-2wevgy6mro] {
    flex: 1;
}

.stat-label[b-2wevgy6mro] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin: 0 0 0.5rem 0;
}

.stat-value[b-2wevgy6mro] {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
}

.stat-extra[b-2wevgy6mro] {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

/* Filters Card */
.filters-card[b-2wevgy6mro] {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    margin-bottom: 2rem;
    overflow: hidden;
}

.filters-header[b-2wevgy6mro] {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filters-header h3[b-2wevgy6mro] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
  margin: 0;
}

.btn-link[b-2wevgy6mro] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
 border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 0.5rem;
    color: #f87171;
    font-size: 0.875rem;
 cursor: pointer;
    transition: all 0.2s ease;
}

.btn-link:hover[b-2wevgy6mro] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.5);
}

.btn-link svg[b-2wevgy6mro] {
    width: 0.875rem;
    height: 0.875rem;
}

.filters-body[b-2wevgy6mro] {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.filter-group[b-2wevgy6mro] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label[b-2wevgy6mro] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #d1d5db;
}

.filter-select[b-2wevgy6mro],
.filter-input[b-2wevgy6mro] {
width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    color: #ffffff;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.filter-select:focus[b-2wevgy6mro],
.filter-input:focus[b-2wevgy6mro] {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(31, 41, 55, 0.8);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-select option[b-2wevgy6mro] {
    background: #1f2937;
    color: #ffffff;
}

.search-input[b-2wevgy6mro] {
    position: relative;
}

.search-input svg[b-2wevgy6mro] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: #6b7280;
    pointer-events: none;
}

.search-input .filter-input[b-2wevgy6mro] {
    padding-right: 3rem;
}

/* Timeline Card */
.timeline-card[b-2wevgy6mro] {
  background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.timeline-header[b-2wevgy6mro] {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timeline-header h3[b-2wevgy6mro] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.timeline-info[b-2wevgy6mro] {
display: flex;
    align-items: center;
    gap: 1rem;
}

.results-count[b-2wevgy6mro] {
    font-size: 0.875rem;
    color: #9ca3af;
}

.timeline-body[b-2wevgy6mro] {
    padding: 1.5rem;
}

/* Timeline */
.timeline[b-2wevgy6mro] {
    position: relative;
    padding-right: 2rem;
}

.timeline[b-2wevgy6mro]::before {
 content: '';
    position: absolute;
    right: 0.75rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
}

.timeline-item[b-2wevgy6mro] {
    position: relative;
    margin-bottom: 2rem;
    padding-right: 3rem;
}

.timeline-item:last-child[b-2wevgy6mro] {
    margin-bottom: 0;
}

.timeline-marker[b-2wevgy6mro] {
    position: absolute;
    right: 0;
    top: 0;
}

.timeline-icon[b-2wevgy6mro] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(17, 24, 39, 0.9);
}

.timeline-icon svg[b-2wevgy6mro] {
    width: 1.25rem;
    height: 1.25rem;
}

.timeline-icon.create[b-2wevgy6mro] {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.timeline-icon.update[b-2wevgy6mro] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.timeline-icon.delete[b-2wevgy6mro] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.timeline-icon.login[b-2wevgy6mro] {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

.timeline-icon.validate[b-2wevgy6mro] {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.timeline-icon.toggle[b-2wevgy6mro] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.timeline-icon.default[b-2wevgy6mro] {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.timeline-item.failed .timeline-icon[b-2wevgy6mro] {
    background: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.timeline-content[b-2wevgy6mro] {
    background: rgba(31, 41, 55, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.timeline-content:hover[b-2wevgy6mro] {
    background: rgba(31, 41, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.timeline-content-header[b-2wevgy6mro] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    gap: 1rem;
}

.timeline-meta[b-2wevgy6mro] {
    display: flex;
  align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.timeline-action[b-2wevgy6mro] {
    font-size: 0.875rem;
    font-weight: 600;
}

.timeline-action.success[b-2wevgy6mro] {
    color: #34d399;
}

.timeline-action.failed[b-2wevgy6mro] {
    color: #f87171;
}

.timeline-badge[b-2wevgy6mro] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.timeline-badge.failed[b-2wevgy6mro] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.timeline-date[b-2wevgy6mro] {
    font-size: 0.75rem;
    color: #6b7280;
}

.timeline-description[b-2wevgy6mro] {
    color: #d1d5db;
    font-size: 0.875rem;
    margin: 0 0 0.75rem 0;
    line-height: 1.6;
}

.timeline-details[b-2wevgy6mro] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.timeline-detail-item[b-2wevgy6mro] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  font-size: 0.75rem;
    color: #9ca3af;
}

.timeline-detail-item svg[b-2wevgy6mro] {
    width: 1rem;
    height: 1rem;
    color: #6b7280;
}

.timeline-error[b-2wevgy6mro] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 0.5rem;
    margin-top: 0.75rem;
}

.timeline-error svg[b-2wevgy6mro] {
    width: 1.25rem;
    height: 1.25rem;
    color: #f87171;
    flex-shrink: 0;
}

.timeline-error span[b-2wevgy6mro] {
    color: #f87171;
    font-size: 0.875rem;
}

.timeline-changes[b-2wevgy6mro] {
    margin-top: 0.75rem;
}

.btn-details[b-2wevgy6mro] {
    display: inline-flex;
  align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 0.5rem;
    color: #60a5fa;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-details:hover[b-2wevgy6mro] {
    background: rgba(59, 130, 246, 0.2);
}

.btn-details svg[b-2wevgy6mro] {
    width: 1rem;
    height: 1rem;
}

.changes-content[b-2wevgy6mro] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.change-section h5[b-2wevgy6mro] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #d1d5db;
    margin: 0 0 0.5rem 0;
}

.change-data[b-2wevgy6mro] {
    padding: 1rem;
    background: rgba(17, 24, 39, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    color: #34d399;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    line-height: 1.6;
    overflow-x: auto;
 margin: 0;
}

/* Empty State */
.empty-state[b-2wevgy6mro] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state svg[b-2wevgy6mro] {
    width: 5rem;
  height: 5rem;
  margin: 0 auto 1.5rem;
  color: #4b5563;
}

.empty-state h3[b-2wevgy6mro] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-2wevgy6mro] {
    color: #9ca3af;
    font-size: 0.95rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .stats-grid[b-2wevgy6mro] {
   grid-template-columns: repeat(2, 1fr);
    }

    .filters-body[b-2wevgy6mro] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .audit-container[b-2wevgy6mro] {
   padding: 1rem;
    }

    .page-header[b-2wevgy6mro] {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats-grid[b-2wevgy6mro] {
        grid-template-columns: 1fr;
    }

    .filters-body[b-2wevgy6mro] {
        grid-template-columns: 1fr;
    }

    .timeline[b-2wevgy6mro] {
        padding-right: 1.5rem;
  }

    .timeline[b-2wevgy6mro]::before {
        right: 0.5rem;
    }

    .timeline-item[b-2wevgy6mro] {
  padding-right: 2.5rem;
    }

    .timeline-icon[b-2wevgy6mro] {
        width: 2rem;
    height: 2rem;
    }

  .timeline-icon svg[b-2wevgy6mro] {
        width: 1rem;
        height: 1rem;
    }

    .timeline-content-header[b-2wevgy6mro] {
        flex-direction: column;
    }

    .stat-value[b-2wevgy6mro] {
   font-size: 1.5rem;
    }
}
/* _content/XpowerBot/Components/Pages/AdminBackup.razor.rz.scp.css */
/* Admin Backup Page Styles */

.admin-container[b-8qdq28v1nw] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.admin-header[b-8qdq28v1nw] {
    background: linear-gradient(135deg, #1a1f35 0%, #0f1419 100%);
    border-radius: 16px;
padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.header-content[b-8qdq28v1nw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.header-title-section[b-8qdq28v1nw] {
    display: flex;
  align-items: center;
    gap: 1rem;
}

.header-icon[b-8qdq28v1nw] {
    width: 48px;
    height: 48px;
    color: #60a5fa;
}

.header-title[b-8qdq28v1nw] {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.header-subtitle[b-8qdq28v1nw] {
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0 0;
}

.header-actions[b-8qdq28v1nw] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Statistics Cards */
.stats-grid[b-8qdq28v1nw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-8qdq28v1nw] {
    background: linear-gradient(135deg, #1a1f35 0%, #141824 100%);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
 transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover[b-8qdq28v1nw] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.15);
}

.stat-icon[b-8qdq28v1nw] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg[b-8qdq28v1nw] {
    width: 28px;
    height: 28px;
    color: #fff;
}

.stat-icon.primary[b-8qdq28v1nw] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.stat-icon.success[b-8qdq28v1nw] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.stat-icon.danger[b-8qdq28v1nw] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.stat-icon.warning[b-8qdq28v1nw] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-content[b-8qdq28v1nw] {
flex: 1;
}

.stat-label[b-8qdq28v1nw] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.25rem;
}

.stat-value[b-8qdq28v1nw] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* Alert */
.alert[b-8qdq28v1nw] {
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    animation: slideDown-b-8qdq28v1nw 0.3s ease-out;
}

@keyframes slideDown-b-8qdq28v1nw {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
      opacity: 1;
        transform: translateY(0);
  }
}

.alert-success[b-8qdq28v1nw] {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.alert-error[b-8qdq28v1nw] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.alert-warning[b-8qdq28v1nw] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.alert-content[b-8qdq28v1nw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.alert-icon[b-8qdq28v1nw] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.alert-success .alert-icon[b-8qdq28v1nw] {
  color: #10b981;
}

.alert-error .alert-icon[b-8qdq28v1nw] {
 color: #ef4444;
}

.alert-warning .alert-icon[b-8qdq28v1nw] {
    color: #f59e0b;
}

.alert-title[b-8qdq28v1nw] {
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.25rem;
}

.alert-message[b-8qdq28v1nw] {
    color: rgba(255, 255, 255, 0.8);
 margin: 0;
    font-size: 0.9rem;
}

.alert-close[b-8qdq28v1nw] {
    background: none;
  border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
 align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.alert-close:hover[b-8qdq28v1nw] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Table Card */
.table-card[b-8qdq28v1nw] {
    background: linear-gradient(135deg, #1a1f35 0%, #141824 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.table-header[b-8qdq28v1nw] {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.table-title[b-8qdq28v1nw] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.table-filters[b-8qdq28v1nw] {
    display: flex;
    gap: 1rem;
}

.search-input[b-8qdq28v1nw] {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    min-width: 250px;
    transition: all 0.2s;
}

.search-input:focus[b-8qdq28v1nw] {
    outline: none;
  border-color: #60a5fa;
    background: rgba(255, 255, 255, 0.08);
}

.search-input[b-8qdq28v1nw]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Table */
.table-responsive[b-8qdq28v1nw] {
    overflow-x: auto;
}

.data-table[b-8qdq28v1nw] {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead[b-8qdq28v1nw] {
    background: rgba(255, 255, 255, 0.03);
}

.data-table th[b-8qdq28v1nw] {
    padding: 1rem 1.5rem;
    text-align: right;
    font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.data-table td[b-8qdq28v1nw] {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.data-table tbody tr[b-8qdq28v1nw] {
    transition: background-color 0.2s;
}

.data-table tbody tr:hover[b-8qdq28v1nw] {
    background: rgba(96, 165, 250, 0.05);
}

.file-info[b-8qdq28v1nw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.file-icon[b-8qdq28v1nw] {
    width: 20px;
    height: 20px;
    color: #60a5fa;
    flex-shrink: 0;
}

.file-name[b-8qdq28v1nw] {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #60a5fa;
}

.description[b-8qdq28v1nw] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.status-badge[b-8qdq28v1nw] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-success[b-8qdq28v1nw] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-error[b-8qdq28v1nw] {
    background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.status-warning[b-8qdq28v1nw] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.status-default[b-8qdq28v1nw] {
    background: rgba(156, 163, 175, 0.2);
    color: #9ca3af;
}

.action-buttons[b-8qdq28v1nw] {
display: flex;
    gap: 0.5rem;
}

.btn-icon[b-8qdq28v1nw] {
    background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon svg[b-8qdq28v1nw] {
    width: 18px;
    height: 18px;
}

.btn-icon.success:hover[b-8qdq28v1nw] {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #10b981;
}

.btn-icon.primary:hover[b-8qdq28v1nw] {
    background: rgba(96, 165, 250, 0.2);
    border-color: #60a5fa;
    color: #60a5fa;
}

.btn-icon.danger:hover[b-8qdq28v1nw] {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}

.btn-icon:disabled[b-8qdq28v1nw] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Loading & Empty States */
.loading-container[b-8qdq28v1nw] {
    padding: 4rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

.spinner-large[b-8qdq28v1nw] {
    width: 48px;
    height: 48px;
 border: 4px solid rgba(96, 165, 250, 0.2);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: spin-b-8qdq28v1nw 0.8s linear infinite;
    margin: 0 auto 1rem;
}

.empty-state[b-8qdq28v1nw] {
    padding: 4rem;
    text-align: center;
}

.empty-icon[b-8qdq28v1nw] {
    width: 64px;
    height: 64px;
    color: rgba(255, 255, 255, 0.3);
    margin: 0 auto 1rem;
}

.empty-text[b-8qdq28v1nw] {
    font-size: 1.25rem;
 font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 0.5rem;
}

.empty-subtext[b-8qdq28v1nw] {
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Modal */
.modal-overlay[b-8qdq28v1nw] {
position: fixed;
    top: 0;
    left: 0;
    right: 0;
 bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  padding: 1rem;
    animation: fadeIn-b-8qdq28v1nw 0.2s ease-out;
}

@keyframes fadeIn-b-8qdq28v1nw {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content[b-8qdq28v1nw] {
    background: linear-gradient(135deg, #1a1f35 0%, #141824 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 500px;
    width: 100%;
    animation: slideUp-b-8qdq28v1nw 0.3s ease-out;
}

@keyframes slideUp-b-8qdq28v1nw {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
      transform: translateY(0);
    }
}

.modal-header[b-8qdq28v1nw] {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3[b-8qdq28v1nw] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.modal-close[b-8qdq28v1nw] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.modal-close:hover[b-8qdq28v1nw] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.modal-body[b-8qdq28v1nw] {
  padding: 2rem;
}

.modal-footer[b-8qdq28v1nw] {
    padding: 1.5rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

/* Upload Zone */
.upload-zone[b-8qdq28v1nw] {
    position: relative;
    border: 2px dashed rgba(96, 165, 250, 0.3);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
    margin-bottom: 1.5rem;
}

.upload-zone:hover[b-8qdq28v1nw] {
    border-color: #60a5fa;
    background: rgba(96, 165, 250, 0.05);
}

.file-input[b-8qdq28v1nw] {
    position: absolute;
    top: 0;
  left: 0;
 width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-content[b-8qdq28v1nw] {
    pointer-events: none;
}

.upload-icon[b-8qdq28v1nw] {
    width: 48px;
    height: 48px;
    color: #60a5fa;
    margin: 0 auto 1rem;
}

.upload-text[b-8qdq28v1nw] {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.5rem;
}

.upload-hint[b-8qdq28v1nw] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.form-group[b-8qdq28v1nw] {
    margin-bottom: 1rem;
}

.checkbox-label[b-8qdq28v1nw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
}

.checkbox-label input[type="checkbox"][b-8qdq28v1nw] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Buttons */
.btn[b-8qdq28v1nw] {
    padding: 0.75rem 1.5rem;
  border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.btn svg[b-8qdq28v1nw] {
    width: 20px;
    height: 20px;
}

.btn:disabled[b-8qdq28v1nw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-8qdq28v1nw] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
}

.btn-primary:hover:not(:disabled)[b-8qdq28v1nw] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-secondary[b-8qdq28v1nw] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover:not(:disabled)[b-8qdq28v1nw] {
    background: rgba(255, 255, 255, 0.15);
}

.btn-outline[b-8qdq28v1nw] {
    background: transparent;
    color: #60a5fa;
    border: 1px solid #60a5fa;
}

.btn-outline:hover:not(:disabled)[b-8qdq28v1nw] {
    background: rgba(96, 165, 250, 0.1);
}

.spinner[b-8qdq28v1nw] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-8qdq28v1nw 0.6s linear infinite;
}

@keyframes spin-b-8qdq28v1nw {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
.admin-container[b-8qdq28v1nw] {
        padding: 1rem;
    }

    .admin-header[b-8qdq28v1nw] {
        padding: 1.5rem;
    }

    .header-content[b-8qdq28v1nw] {
        flex-direction: column;
 align-items: flex-start;
    }

    .header-actions[b-8qdq28v1nw] {
        width: 100%;
    }

    .header-actions .btn[b-8qdq28v1nw] {
 flex: 1;
  }

    .stats-grid[b-8qdq28v1nw] {
        grid-template-columns: 1fr;
    }

    .table-header[b-8qdq28v1nw] {
        flex-direction: column;
    align-items: flex-start;
    }

    .search-input[b-8qdq28v1nw] {
 width: 100%;
      min-width: auto;
    }

    .data-table[b-8qdq28v1nw] {
    font-size: 0.8rem;
    }

    .data-table th[b-8qdq28v1nw],
    .data-table td[b-8qdq28v1nw] {
   padding: 0.75rem;
    }
}
/* _content/XpowerBot/Components/Pages/AdminDashboard.razor.rz.scp.css */
/* ============================================
   XPOWER Admin Dashboard - Pure CSS Styles
   ============================================ */

/* Container & Layout */
.dashboard-container[b-pt5fedpi9m] {
    padding: 2rem;
    animation: fadeIn-b-pt5fedpi9m 0.5s ease-in-out;
}

@keyframes fadeIn-b-pt5fedpi9m {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* SVG Icon Size Fix - Global */
svg[b-pt5fedpi9m] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Welcome Banner */
.welcome-banner[b-pt5fedpi9m] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #8b5cf6 100%);
  border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.5);
    padding: 2rem;
    margin-bottom: 2rem;
}

.banner-pattern[b-pt5fedpi9m] {
    position: absolute;
    inset: 0;
    opacity: 0.1;
}

.pattern-overlay[b-pt5fedpi9m] {
    position: absolute;
    inset: 0;
}

.banner-content[b-pt5fedpi9m] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.banner-text[b-pt5fedpi9m] {
    flex: 1;
}

.banner-title[b-pt5fedpi9m] {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.75rem;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.banner-subtitle[b-pt5fedpi9m] {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.banner-date-card[b-pt5fedpi9m] {
    text-align: left;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.date-label[b-pt5fedpi9m] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.date-value[b-pt5fedpi9m] {
    font-size: 1.875rem;
    font-weight: 700;
color: white;
    margin-bottom: 0.25rem;
}

.time-value[b-pt5fedpi9m] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Stats Grid */
.stats-grid[b-pt5fedpi9m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Stat Card */
.stat-card[b-pt5fedpi9m] {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-card:hover[b-pt5fedpi9m] {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

/* Stat Header */
.stat-header[b-pt5fedpi9m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.stat-icon-wrapper[b-pt5fedpi9m] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
 justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.stat-card:hover .stat-icon-wrapper[b-pt5fedpi9m] {
    transform: scale(1.1);
}

.stat-icon-wrapper.primary[b-pt5fedpi9m] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1));
}

.stat-icon-wrapper.accent[b-pt5fedpi9m] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.1));
}

.stat-icon-wrapper.secondary[b-pt5fedpi9m] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.1));
}

.stat-icon-wrapper.warning[b-pt5fedpi9m] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.1));
}

.stat-icon[b-pt5fedpi9m] {
    width: 1.75rem;
    height: 1.75rem;
}

.stat-icon-wrapper.primary .stat-icon[b-pt5fedpi9m] { color: #60a5fa; }
.stat-icon-wrapper.accent .stat-icon[b-pt5fedpi9m] { color: #34d399; }
.stat-icon-wrapper.secondary .stat-icon[b-pt5fedpi9m] { color: #a78bfa; }
.stat-icon-wrapper.warning .stat-icon[b-pt5fedpi9m] { color: #fbbf24; }

/* Stat Content */
.stat-label[b-pt5fedpi9m] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #9ca3af;
    margin-bottom: 0.5rem;
}

.stat-value[b-pt5fedpi9m] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 0.75rem;
}

/* Stat Progress */
.stat-progress[b-pt5fedpi9m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-bar[b-pt5fedpi9m] {
    flex: 1;
    background: rgba(31, 41, 55, 0.8);
    border-radius: 9999px;
    height: 0.375rem;
    overflow: hidden;
}

.progress-fill[b-pt5fedpi9m] {
    background: linear-gradient(90deg, #3b82f6, #10b981);
    height: 100%;
    border-radius: 9999px;
    transition: width 0.5s ease;
}

.progress-fill.warning[b-pt5fedpi9m] {
    background: linear-gradient(90deg, #f59e0b, #10b981);
}

.progress-text[b-pt5fedpi9m] {
    font-size: 0.75rem;
    color: #10b981;
    font-weight: 700;
    white-space: nowrap;
}

.progress-text.warning[b-pt5fedpi9m] {
  color: #fbbf24;
}

/* Stat Footer */
.stat-footer[b-pt5fedpi9m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.status-dot[b-pt5fedpi9m] {
    width: 0.5rem;
    height: 0.5rem;
    background: #10b981;
    border-radius: 50%;
}

.status-dot.pulse[b-pt5fedpi9m] {
    animation: pulse-b-pt5fedpi9m 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-b-pt5fedpi9m {
    0%, 100% {
    opacity: 1;
    }
    50% {
  opacity: 0.5;
    }
}

.stat-info[b-pt5fedpi9m] {
    color: #9ca3af;
}

.stat-highlight[b-pt5fedpi9m] {
    color: #10b981;
    font-weight: 700;
}

.stat-footer-icon[b-pt5fedpi9m] {
    width: 1rem;
    height: 1rem;
    color: #a78bfa;
}

.stat-footer-icon.accent[b-pt5fedpi9m] {
    color: #10b981;
}

/* Actions Grid */
.actions-grid[b-pt5fedpi9m] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 1024px) {
    .actions-grid[b-pt5fedpi9m] {
        grid-template-columns: 1fr;
    }
}

/* Activity Card */
.activity-card[b-pt5fedpi9m] {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* Card Header */
.card-header[b-pt5fedpi9m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.card-title[b-pt5fedpi9m] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.title-icon[b-pt5fedpi9m] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
 justify-content: center;
}

.title-icon.primary[b-pt5fedpi9m] {
    background: rgba(59, 130, 246, 0.2);
}

.title-icon.secondary[b-pt5fedpi9m] {
  background: rgba(139, 92, 246, 0.2);
}

.title-icon .icon[b-pt5fedpi9m] {
    width: 1.25rem;
    height: 1.25rem;
    color: #60a5fa;
}

.title-icon.secondary .icon[b-pt5fedpi9m] {
    color: #a78bfa;
}

.view-all-link[b-pt5fedpi9m] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #3b82f6;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.view-all-link:hover[b-pt5fedpi9m] {
    color: #2563eb;
    background: rgba(59, 130, 246, 0.1);
}

/* Activity List */
.activity-list[b-pt5fedpi9m] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activity-item[b-pt5fedpi9m] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background: rgba(31, 41, 55, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.activity-item:hover[b-pt5fedpi9m] {
    background: rgba(31, 41, 55, 0.6);
    border-color: rgba(59, 130, 246, 0.2);
}

.activity-avatar[b-pt5fedpi9m] {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
    flex-shrink: 0;
}

.activity-details[b-pt5fedpi9m] {
    flex: 1;
    min-width: 0;
}

.activity-description[b-pt5fedpi9m] {
    color: white;
    font-weight: 600;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-time[b-pt5fedpi9m] {
    font-size: 0.875rem;
    color: #9ca3af;
}

.activity-badge[b-pt5fedpi9m] {
    padding: 0.375rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
  border: 1px solid;
    flex-shrink: 0;
}

.activity-badge.success[b-pt5fedpi9m] {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}

.activity-badge.danger[b-pt5fedpi9m] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Empty State */
.empty-state[b-pt5fedpi9m] {
    text-align: center;
    padding: 2rem;
    color: #9ca3af;
}

/* Quick Actions Card */
.quick-actions-card[b-pt5fedpi9m] {
    background: rgba(17, 24, 39, 0.6);
 backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.quick-actions-list[b-pt5fedpi9m] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quick-action-item[b-pt5fedpi9m] {
    display: block;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid;
    transition: all 0.2s ease;
    text-decoration: none;
}

.quick-action-item.primary[b-pt5fedpi9m] {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
    border-color: rgba(59, 130, 246, 0.2);
}

.quick-action-item.accent[b-pt5fedpi9m] {
 background: linear-gradient(90deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.15));
    border-color: rgba(16, 185, 129, 0.2);
}

.quick-action-item.secondary[b-pt5fedpi9m] {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.15));
    border-color: rgba(139, 92, 246, 0.2);
}

.quick-action-item.warning[b-pt5fedpi9m] {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.15), rgba(251, 191, 36, 0.15));
    border-color: rgba(245, 158, 11, 0.2);
}

.quick-action-item.gray[b-pt5fedpi9m] {
    background: linear-gradient(90deg, rgba(107, 114, 128, 0.15), rgba(75, 85, 99, 0.15));
    border-color: rgba(107, 114, 128, 0.2);
}

.quick-action-item:hover[b-pt5fedpi9m] {
    transform: translateX(5px);
}

.quick-action-item.primary:hover[b-pt5fedpi9m] {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.25), rgba(139, 92, 246, 0.25));
    border-color: rgba(59, 130, 246, 0.4);
}

.quick-action-item.accent:hover[b-pt5fedpi9m] {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.25), rgba(6, 182, 212, 0.25));
    border-color: rgba(16, 185, 129, 0.4);
}

.quick-action-item.secondary:hover[b-pt5fedpi9m] {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.25), rgba(168, 85, 247, 0.25));
    border-color: rgba(139, 92, 246, 0.4);
}

.quick-action-item.warning:hover[b-pt5fedpi9m] {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.25), rgba(251, 191, 36, 0.25));
    border-color: rgba(245, 158, 11, 0.4);
}

.quick-action-item.gray:hover[b-pt5fedpi9m] {
    background: linear-gradient(90deg, rgba(107, 114, 128, 0.25), rgba(75, 85, 99, 0.25));
    border-color: rgba(107, 114, 128, 0.4);
}

.action-content[b-pt5fedpi9m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.action-icon[b-pt5fedpi9m] {
 width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.3s ease;
}

.quick-action-item:hover .action-icon[b-pt5fedpi9m] {
    transform: scale(1.1);
}

.quick-action-item.primary .action-icon[b-pt5fedpi9m] { color: #60a5fa; }
.quick-action-item.accent .action-icon[b-pt5fedpi9m] { color: #34d399; }
.quick-action-item.secondary .action-icon[b-pt5fedpi9m] { color: #a78bfa; }
.quick-action-item.warning .action-icon[b-pt5fedpi9m] { color: #fbbf24; }
.quick-action-item.gray .action-icon[b-pt5fedpi9m] { color: #9ca3af; }

.action-text[b-pt5fedpi9m] {
  color: white;
  font-weight: 700;
}

/* Distributor Quota Card */
.distributor-quota-card[b-pt5fedpi9m] {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.quota-stats[b-pt5fedpi9m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.quota-stat-item[b-pt5fedpi9m] {
 padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid;
}

.quota-stat-item.primary[b-pt5fedpi9m] {
    background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.2);
}

.quota-stat-item.accent[b-pt5fedpi9m] {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

.quota-stat-item.warning[b-pt5fedpi9m] {
    background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.2);
}

.quota-label[b-pt5fedpi9m] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
}

.quota-value[b-pt5fedpi9m] {
    font-size: 1.875rem;
    font-weight: 700;
 color: white;
}

.quota-actions[b-pt5fedpi9m] {
    margin-top: 1.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .dashboard-container[b-pt5fedpi9m] {
 padding: 1rem;
    }

    .stats-grid[b-pt5fedpi9m] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .banner-title[b-pt5fedpi9m] {
      font-size: 1.75rem;
    }

    .banner-subtitle[b-pt5fedpi9m] {
        font-size: 1rem;
    }

    .stat-value[b-pt5fedpi9m] {
      font-size: 2rem;
    }

    .actions-grid[b-pt5fedpi9m] {
        gap: 1rem;
    }

    .activity-card[b-pt5fedpi9m], .quick-actions-card[b-pt5fedpi9m], .distributor-quota-card[b-pt5fedpi9m] {
        padding: 1.5rem;
    }
}
/* _content/XpowerBot/Components/Pages/AdminLicenses.razor.rz.scp.css */
/* ============================================
   XPOWER Admin Licenses - Pure CSS Styles
   ============================================ */

/* SVG Icon Size Fix - Global */
svg[b-b4dlz80ub6] {
    width: 1.25rem;
  height: 1.25rem;
}

/* Container */
.licenses-container[b-b4dlz80ub6] {
  padding: 2rem;
  animation: fadeInUp-b-b4dlz80ub6 0.5s ease-out;
}

@keyframes fadeInUp-b-b4dlz80ub6 {
    from {
     opacity: 0;
 transform: translateY(30px);
    }
  to {
  opacity: 1;
        transform: translateY(0);
    }
}

/* Page Header */
.page-header[b-b4dlz80ub6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
  margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-title[b-b4dlz80ub6] {
    font-size: 1.875rem;
 font-weight: 700;
 color: #ffffff;
 margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.page-description[b-b4dlz80ub6] {
    color: #9ca3af;
    font-size: 0.95rem;
  margin: 0;
}

.btn-primary[b-b4dlz80ub6] {
    display: inline-flex;
    align-items: center;
 gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
border: none;
    border-radius: 0.75rem;
  color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
  cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover[b-b4dlz80ub6] {
 transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
}

/* Stats Grid */
.stats-grid[b-b4dlz80ub6] {
 display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Stat Card */
.stat-card[b-b4dlz80ub6] {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.stat-card:hover[b-b4dlz80ub6] {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.1);
}

.stat-card.highlight[b-b4dlz80ub6] {
    border-color: rgba(59, 130, 246, 0.2);
}

.stat-icon-wrapper[b-b4dlz80ub6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
 margin-bottom: 1rem;
}

.stat-icon[b-b4dlz80ub6] {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.primary[b-b4dlz80ub6] {
    background: rgba(59, 130, 246, 0.2);
}

.stat-icon.accent[b-b4dlz80ub6] {
    background: rgba(16, 185, 129, 0.2);
}

.stat-icon.secondary[b-b4dlz80ub6] {
background: rgba(139, 92, 246, 0.2);
}

.stat-icon.warning[b-b4dlz80ub6] {
    background: rgba(245, 158, 11, 0.2);
}

.stat-icon svg[b-b4dlz80ub6] {
    width: 1.5rem;
    height: 1.5rem;
}

.stat-icon.primary svg[b-b4dlz80ub6] { color: #60a5fa; }
.stat-icon.accent svg[b-b4dlz80ub6] { color: #34d399; }
.stat-icon.secondary svg[b-b4dlz80ub6] { color: #a78bfa; }
.stat-icon.warning svg[b-b4dlz80ub6] { color: #fbbf24; }

.stat-label[b-b4dlz80ub6] {
    font-size: 0.875rem;
    color: #9ca3af;
 margin-bottom: 0.25rem;
}

.stat-value[b-b4dlz80ub6] {
  font-size: 1.875rem;
    font-weight: 700;
  color: #ffffff;
    margin: 0;
}

.stat-extra[b-b4dlz80ub6] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

/* Table Container */
.table-container[b-b4dlz80ub6] {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Table */
.data-table[b-b4dlz80ub6] {
width: 100%;
  border-collapse: collapse;
}

.table-head[b-b4dlz80ub6] {
    background: rgba(31, 41, 55, 0.4);
}

.table-head th[b-b4dlz80ub6] {
    padding: 1.25rem 1.5rem;
  text-align: right;
    font-size: 0.875rem;
    font-weight: 600;
    color: #d1d5db;
    white-space: nowrap;
}

.table-body tr[b-b4dlz80ub6] {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.table-body tr:hover[b-b4dlz80ub6] {
    background: rgba(31, 41, 55, 0.4);
}

.table-body td[b-b4dlz80ub6] {
 padding: 1.25rem 1.5rem;
 font-size: 0.875rem;
}

/* Product Name */
.product-name[b-b4dlz80ub6] {
    color: #ffffff;
}

/* License Key Code */
.license-key code[b-b4dlz80ub6] {
 display: inline-block;
 padding: 0.5rem 0.75rem;
 background: rgba(59, 130, 246, 0.2);
    border-radius: 0.5rem;
    color: #60a5fa;
  font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Customer Name */
.customer-name[b-b4dlz80ub6] {
    color: #d1d5db;
}

/* Creator Name */
.creator-name[b-b4dlz80ub6] {
    color: #d1d5db;
}

/* Expiry Date */
.expiry-date[b-b4dlz80ub6] {
    color: #d1d5db;
}

.text-danger[b-b4dlz80ub6] {
    color: #f87171;
    font-weight: 600;
}

.text-primary[b-b4dlz80ub6] {
    color: #60a5fa;
    font-weight: 600;
}

.text-muted[b-b4dlz80ub6] {
    color: #6b7280;
    font-style: italic;
}

/* Badge */
.badge[b-b4dlz80ub6] {
    display: inline-block;
    padding: 0.5rem 0.875rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
font-weight: 700;
  border-width: 1px;
  border-style: solid;
}

.badge.active[b-b4dlz80ub6] {
 background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}

.badge.inactive[b-b4dlz80ub6] {
 background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
 border-color: rgba(107, 114, 128, 0.3);
}

.badge.expired[b-b4dlz80ub6] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Device Count */
.device-count[b-b4dlz80ub6] {
    color: #d1d5db;
}

.device-count span[b-b4dlz80ub6] {
color: #d1d5db;
}

/* Action Buttons */
.action-buttons[b-b4dlz80ub6] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-b4dlz80ub6] {
    display: flex;
  align-items: center;
    justify-content: center;
    width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  border: 1px solid;
cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
}

.btn-icon svg[b-b4dlz80ub6] {
    width: 1rem;
    height: 1rem;
}

.btn-icon.btn-primary[b-b4dlz80ub6] {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.btn-icon.btn-primary:hover[b-b4dlz80ub6] {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    transform: scale(1.1);
}

.btn-icon.btn-warning[b-b4dlz80ub6] {
background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.btn-icon.btn-warning:hover[b-b4dlz80ub6] {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.4);
    transform: scale(1.1);
}

.btn-icon.btn-danger[b-b4dlz80ub6] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.btn-icon.btn-danger:hover[b-b4dlz80ub6] {
    background: rgba(239, 68, 68, 0.2);
 border-color: rgba(239, 68, 68, 0.4);
  transform: scale(1.1);
}

/* Empty State */
.empty-state[b-b4dlz80ub6] {
    text-align: center;
    padding: 4rem 1.5rem;
}

.empty-icon[b-b4dlz80ub6] {
    width: 4rem;
    height: 4rem;
  margin: 0 auto 1.25rem;
    color: #4b5563;
}

.empty-text[b-b4dlz80ub6] {
    color: #9ca3af;
    font-size: 0.95rem;
}

/* Modal */
.modal-overlay[b-b4dlz80ub6] {
    position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    display: flex;
  align-items: center;
    justify-content: center;
  z-index: 9999;
    padding: 1rem;
    animation: fadeIn-b-b4dlz80ub6 0.2s ease-out;
}

@keyframes fadeIn-b-b4dlz80ub6 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-container[b-b4dlz80ub6] {
  background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(40px);
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    max-width: 42rem;
  width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-b4dlz80ub6 0.3s ease-out;
}

@keyframes slideUp-b-b4dlz80ub6 {
    from {
        opacity: 0;
  transform: translateY(50px) scale(0.95);
    }
    to {
 opacity: 1;
    transform: translateY(0) scale(1);
    }
}

.modal-header[b-b4dlz80ub6] {
    padding: 1.75rem;
 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-header-content[b-b4dlz80ub6] {
    display: flex;
  align-items: center;
 justify-content: space-between;
}

.modal-icon-wrapper[b-b4dlz80ub6] {
  display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-icon[b-b4dlz80ub6] {
  width: 3rem;
  height: 3rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-icon.primary[b-b4dlz80ub6] {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.modal-icon.accent[b-b4dlz80ub6] {
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

.modal-icon svg[b-b4dlz80ub6] {
    width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
}

.modal-title[b-b4dlz80ub6] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
 margin: 0 0 0.25rem 0;
}

.modal-subtitle[b-b4dlz80ub6] {
    font-size: 0.875rem;
    color: #9ca3af;
 margin: 0;
}

.modal-close-btn[b-b4dlz80ub6] {
    width: 2.5rem;
  height: 2.5rem;
 border-radius: 0.75rem;
 background: transparent;
 border: none;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
  display: flex;
    align-items: center;
justify-content: center;
}

.modal-close-btn:hover[b-b4dlz80ub6] {
  background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.modal-close-btn svg[b-b4dlz80ub6] {
    width: 1.25rem;
    height: 1.25rem;
}

.modal-body[b-b4dlz80ub6] {
  padding: 1.75rem;
}

.form-group[b-b4dlz80ub6] {
    margin-bottom: 1.5rem;
}

.form-label[b-b4dlz80ub6] {
    display: block;
 font-size: 0.875rem;
    font-weight: 600;
    color: #d1d5db;
  margin-bottom: 0.75rem;
}

.form-label .required[b-b4dlz80ub6] {
color: #f87171;
    margin-left: 0.25rem;
}

.input-with-icon[b-b4dlz80ub6] {
    position: relative;
}

.input-icon[b-b4dlz80ub6] {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
}

.input-icon svg[b-b4dlz80ub6] {
    width: 1.25rem;
  height: 1.25rem;
    color: #6b7280;
}

.form-control[b-b4dlz80ub6] {
    width: 100%;
  padding: 0.875rem 1rem;
 background: rgba(31, 41, 55, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: 0.75rem;
    color: #ffffff;
  font-size: 0.875rem;
 transition: all 0.2s ease;
}

.input-with-icon .form-control[b-b4dlz80ub6] {
    padding-right: 3rem;
}

.form-control:focus[b-b4dlz80ub6] {
outline: none;
  border-color: rgba(59, 130, 246, 0.5);
    background: rgba(31, 41, 55, 0.7);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control[b-b4dlz80ub6]::placeholder {
  color: #6b7280;
}

.form-control:disabled[b-b4dlz80ub6] {
    opacity: 0.5;
    cursor: not-allowed;
}

textarea.form-control[b-b4dlz80ub6] {
    resize: vertical;
    min-height: 100px;
}

.form-hint[b-b4dlz80ub6] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

.form-hint.warning[b-b4dlz80ub6] {
    color: #fbbf24;
}

.form-row[b-b4dlz80ub6] {
display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

/* Checkbox Wrapper */
.checkbox-wrapper[b-b4dlz80ub6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(31, 41, 55, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.checkbox-wrapper:hover[b-b4dlz80ub6] {
    background: rgba(31, 41, 55, 0.7);
    border-color: rgba(59, 130, 246, 0.3);
}

.checkbox-wrapper input[type="checkbox"][b-b4dlz80ub6] {
width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.375rem;
    border: 2px solid #6b7280;
    background: rgba(31, 41, 55, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    accent-color: #3b82f6;
}

.checkbox-wrapper input[type="checkbox"]:checked[b-b4dlz80ub6] {
    background: #3b82f6;
    border-color: #3b82f6;
}

.checkbox-wrapper input[type="checkbox"]:focus[b-b4dlz80ub6] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.checkbox-wrapper input[type="checkbox"]:disabled[b-b4dlz80ub6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkbox-label[b-b4dlz80ub6] {
    font-size: 0.875rem;
    color: #d1d5db;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

/* Info Card */
.info-card[b-b4dlz80ub6] {
    padding: 1.25rem;
  background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 1rem;
}

.info-card-content[b-b4dlz80ub6] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.info-icon[b-b4dlz80ub6] {
    width: 1.25rem;
  height: 1.25rem;
    color: #60a5fa;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.info-details[b-b4dlz80ub6] {
    flex: 1;
}

.info-title[b-b4dlz80ub6] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
}

.info-stats[b-b4dlz80ub6] {
  display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    font-size: 0.75rem;
}

.info-stat[b-b4dlz80ub6] {
    display: flex;
    flex-direction: column;
}

.info-stat-label[b-b4dlz80ub6] {
 color: #9ca3af;
}

.info-stat-value[b-b4dlz80ub6] {
    font-weight: 700;
    margin-top: 0.25rem;
}

.info-stat-value[b-b4dlz80ub6] { color: #ffffff; }
.info-stat-value.primary[b-b4dlz80ub6] { color: #60a5fa; }
.info-stat-value.accent[b-b4dlz80ub6] { color: #34d399; }

.modal-footer[b-b4dlz80ub6] {
    padding: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
    align-items: center;
    justify-content: flex-end;
gap: 0.875rem;
}

.btn-secondary[b-b4dlz80ub6] {
 padding: 0.875rem 1.5rem;
 background: rgba(107, 114, 128, 0.2);
  border: 1px solid rgba(107, 114, 128, 0.3);
  border-radius: 0.75rem;
    color: #d1d5db;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-b4dlz80ub6] {
    background: rgba(107, 114, 128, 0.3);
}

.btn-secondary:disabled[b-b4dlz80ub6],
.btn-primary:disabled[b-b4dlz80ub6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner[b-b4dlz80ub6] {
    display: inline-block;
width: 1rem;
    height: 1rem;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    margin-left: 0.5rem;
    animation: spin-b-b4dlz80ub6 0.6s linear infinite;
}

@keyframes spin-b-b4dlz80ub6 {
 to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 1024px) {
 .stats-grid[b-b4dlz80ub6] {
   grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
.licenses-container[b-b4dlz80ub6] {
 padding: 1rem;
    }

    .stats-grid[b-b4dlz80ub6] {
  grid-template-columns: 1fr;
    }

 .table-container[b-b4dlz80ub6] {
        overflow-x: auto;
    }

    .data-table[b-b4dlz80ub6] {
        min-width: 800px;
    }

    .form-row[b-b4dlz80ub6] {
     grid-template-columns: 1fr;
}

    .info-stats[b-b4dlz80ub6] {
        grid-template-columns: 1fr;
    }

    .page-header[b-b4dlz80ub6] {
        flex-direction: column;
      align-items: flex-start;
    }
}
/* _content/XpowerBot/Components/Pages/AdminLogin.razor.rz.scp.css */
*[b-7kck3wszfx] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.login-page[b-7kck3wszfx] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

.login-background[b-7kck3wszfx] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.1;
}

.bg-pattern[b-7kck3wszfx] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 50%, rgba(14, 165, 233, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(217, 70, 239, 0.3) 0%, transparent 50%);
    animation: pulse-b-7kck3wszfx 8s ease-in-out infinite;
}

@keyframes pulse-b-7kck3wszfx {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.login-container[b-7kck3wszfx] {
    position: relative;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 1.5rem;
    padding: 3rem 2.5rem;
    width: 100%;
    max-width: 450px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.login-header[b-7kck3wszfx] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.login-logo[b-7kck3wszfx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0ea5e9, #d946ef);
    border-radius: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.3);
    animation: float-b-7kck3wszfx 3s ease-in-out infinite;
}

@keyframes float-b-7kck3wszfx {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.login-logo svg[b-7kck3wszfx] {
    width: 40px;
    height: 40px;
    color: white;
}

.login-title[b-7kck3wszfx] {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #0ea5e9, #d946ef);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.login-subtitle[b-7kck3wszfx] {
    color: #94a3b8;
    font-size: 1rem;
}

.alert-error[b-7kck3wszfx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 0.75rem;
    color: #fca5a5;
    margin-bottom: 1.5rem;
    animation: shake-b-7kck3wszfx 0.5s;
}

@keyframes shake-b-7kck3wszfx {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

.alert-icon[b-7kck3wszfx] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.login-form[b-7kck3wszfx] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group[b-7kck3wszfx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label[b-7kck3wszfx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #cbd5e1;
}

.label-icon[b-7kck3wszfx] {
    width: 18px;
    height: 18px;
    color: #0ea5e9;
}

.form-control[b-7kck3wszfx] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    color: white;
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .form-control:focus[b-7kck3wszfx] {
        outline: none;
        border-color: #0ea5e9;
        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
        background: rgba(30, 41, 59, 1);
    }

    .form-control[b-7kck3wszfx]::placeholder {
        color: #64748b;
    }

.btn-submit[b-7kck3wszfx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #0ea5e9, #d946ef);
    border: none;
    border-radius: 0.75rem;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

    .btn-submit:hover:not(:disabled)[b-7kck3wszfx] {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(14, 165, 233, 0.4);
    }

    .btn-submit:active:not(:disabled)[b-7kck3wszfx] {
        transform: translateY(0);
    }

    .btn-submit:disabled[b-7kck3wszfx] {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .btn-submit svg[b-7kck3wszfx] {
        width: 20px;
        height: 20px;
    }

.loading-spinner[b-7kck3wszfx] {
    animation: spin-b-7kck3wszfx 1s linear infinite;
}

@keyframes spin-b-7kck3wszfx {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.login-footer[b-7kck3wszfx] {
    margin-top: 2rem;
    text-align: center;
}

.back-link[b-7kck3wszfx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
    margin-bottom: 1rem;
}

    .back-link:hover[b-7kck3wszfx] {
        color: #0ea5e9;
    }

    .back-link svg[b-7kck3wszfx] {
        width: 16px;
        height: 16px;
    }

.copyright[b-7kck3wszfx] {
    color: #64748b;
    font-size: 0.75rem;
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .login-container[b-7kck3wszfx] {
        padding: 2rem 1.5rem;
    }

    .login-title[b-7kck3wszfx] {
        font-size: 1.5rem;
    }
}
/* _content/XpowerBot/Components/Pages/AdminMonitoring.razor.rz.scp.css */
/* ============================================
   XPOWER Admin Monitoring - Professional CSS
   ============================================ */

/* SVG Icon Sizes */
svg[b-8ol4tyyl8c] {
    width: 1.25rem;
    height: 1.25rem;
}

.monitoring-container[b-8ol4tyyl8c] {
    padding: 0;
    width: 100%;
}

/* ============================================
   HEADER SECTION
   ============================================ */

.monitoring-header[b-8ol4tyyl8c] {
    margin-bottom: 2rem;
}

    .monitoring-header .header-content[b-8ol4tyyl8c] {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

.header-title-section[b-8ol4tyyl8c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.header-title[b-8ol4tyyl8c] {
    font-size: 2rem;
    font-weight: 800;
    color: #e7f1ff;
    margin: 0;
    letter-spacing: -0.02em;
}

.header-subtitle[b-8ol4tyyl8c] {
    font-size: 1rem;
    color: #a1b1cc;
    margin: 0;
    font-weight: 400;
}

.header-actions[b-8ol4tyyl8c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Button Variants */
.btn[b-8ol4tyyl8c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.875rem;
    font-weight: 700;
    font-size: 0.95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

    .btn svg[b-8ol4tyyl8c] {
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
    }

.btn-primary[b-8ol4tyyl8c] {
    background: linear-gradient(135deg, #00e7ff, #7a5cff);
    color: #060912;
    box-shadow: 0 10px 30px rgba(0, 231, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.06);
}

    .btn-primary:hover[b-8ol4tyyl8c] {
        transform: translateY(-3px) scale(1.01);
        box-shadow: 0 16px 40px rgba(0, 231, 255, 0.25);
        filter: saturate(1.15);
    }

    .btn-primary:active[b-8ol4tyyl8c] {
        transform: translateY(0) scale(0.99);
    }

.btn-success[b-8ol4tyyl8c] {
    background: linear-gradient(135deg, #00ffb7, #00e7ff);
    color: #060912;
    box-shadow: 0 10px 30px rgba(0, 255, 183, 0.18);
    border-color: rgba(255, 255, 255, 0.06);
}

    .btn-success:hover[b-8ol4tyyl8c] {
        transform: translateY(-3px) scale(1.01);
        box-shadow: 0 16px 40px rgba(0, 255, 183, 0.25);
        filter: saturate(1.15);
    }

    .btn-success:active[b-8ol4tyyl8c] {
        transform: translateY(0) scale(0.99);
    }

.btn-outline[b-8ol4tyyl8c] {
    background: transparent;
    color: #e7f1ff;
    border: 1px solid #a1b1cc;
    box-shadow: none;
}

    .btn-outline:hover[b-8ol4tyyl8c] {
        background: rgba(255, 255, 255, 0.05);
        border-color: #e7f1ff;
        transform: translateY(-2px);
    }

.btn-sm[b-8ol4tyyl8c] {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
}

.btn:disabled[b-8ol4tyyl8c] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Alert Messages */
.alert[b-8ol4tyyl8c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 0.875rem;
    border-left: 4px solid;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    animation: slideInDown-b-8ol4tyyl8c 0.3s ease-out;
}

    .alert p[b-8ol4tyyl8c] {
        margin: 0;
        flex: 1;
        font-weight: 500;
    }

    .alert button[b-8ol4tyyl8c] {
        background: none;
        border: none;
        color: inherit;
        cursor: pointer;
        font-size: 1.5rem;
        padding: 0;
        line-height: 1;
        margin-left: 1rem;
        transition: transform 0.2s;
    }

        .alert button:hover[b-8ol4tyyl8c] {
            transform: scale(1.2);
        }

.alert-success[b-8ol4tyyl8c] {
    border-left-color: #00ffb7;
    color: #00ffb7;
}

.alert-error[b-8ol4tyyl8c] {
    border-left-color: #ff2e86;
    color: #ff2e86;
}

/* ============================================
   STATS GRID
   ============================================ */

.stats-grid[b-8ol4tyyl8c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-8ol4tyyl8c] {
    background: linear-gradient(135deg, rgba(11, 18, 32, 0.6), rgba(11, 18, 32, 0.3));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    padding: 1.5rem;
    transition: all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

    .stat-card[b-8ol4tyyl8c]::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(600px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 231, 255, 0.05), transparent);
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
    }

    .stat-card:hover[b-8ol4tyyl8c] {
        border-color: rgba(0, 231, 255, 0.3);
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0, 231, 255, 0.15);
    }

        .stat-card:hover[b-8ol4tyyl8c]::before {
            opacity: 1;
        }

    .stat-card.stat-warning[b-8ol4tyyl8c] {
        border-color: rgba(255, 194, 61, 0.2);
    }

        .stat-card.stat-warning:hover[b-8ol4tyyl8c] {
            border-color: rgba(255, 194, 61, 0.4);
            box-shadow: 0 12px 40px rgba(255, 194, 61, 0.1);
        }

    .stat-card.stat-danger[b-8ol4tyyl8c] {
        border-color: rgba(255, 46, 134, 0.2);
    }

        .stat-card.stat-danger:hover[b-8ol4tyyl8c] {
            border-color: rgba(255, 46, 134, 0.4);
            box-shadow: 0 12px 40px rgba(255, 46, 134, 0.1);
        }

.stat-icon[b-8ol4tyyl8c] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .stat-icon.blue[b-8ol4tyyl8c] {
        background: rgba(0, 231, 255, 0.15);
        color: #00e7ff;
        border: 1px solid rgba(0, 231, 255, 0.3);
    }

    .stat-icon.green[b-8ol4tyyl8c] {
        background: rgba(0, 255, 183, 0.15);
        color: #00ffb7;
        border: 1px solid rgba(0, 255, 183, 0.3);
    }

    .stat-icon.red[b-8ol4tyyl8c] {
        background: rgba(255, 46, 134, 0.15);
        color: #ff2e86;
        border: 1px solid rgba(255, 46, 134, 0.3);
    }

    .stat-icon.purple[b-8ol4tyyl8c] {
        background: rgba(122, 92, 255, 0.15);
        color: #7a5cff;
        border: 1px solid rgba(122, 92, 255, 0.3);
    }

    .stat-icon.warning[b-8ol4tyyl8c] {
        background: rgba(255, 194, 61, 0.15);
        color: #ffc23d;
        border: 1px solid rgba(255, 194, 61, 0.3);
    }

    .stat-icon.danger[b-8ol4tyyl8c] {
        background: rgba(255, 46, 134, 0.15);
        color: #ff2e86;
        border: 1px solid rgba(255, 46, 134, 0.3);
    }

    .stat-icon svg[b-8ol4tyyl8c] {
        width: 1.75rem;
        height: 1.75rem;
    }

.stat-content[b-8ol4tyyl8c] {
    display: flex;
    flex-direction: column;
}

.stat-label[b-8ol4tyyl8c] {
    font-size: 0.875rem;
    color: #a1b1cc;
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value[b-8ol4tyyl8c] {
    font-size: 2rem;
    font-weight: 800;
    color: #e7f1ff;
    margin: 0;
    line-height: 1;
}

/* ============================================
   TABLE SECTION
   ============================================ */

.table-card[b-8ol4tyyl8c] {
    background: linear-gradient(135deg, rgba(11, 18, 32, 0.6), rgba(11, 18, 32, 0.3));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.table-header[b-8ol4tyyl8c] {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.table-header-content[b-8ol4tyyl8c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.table-title[b-8ol4tyyl8c] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #e7f1ff;
    margin: 0;
}

.table-filters[b-8ol4tyyl8c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-checkbox[b-8ol4tyyl8c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
    user-select: none;
}

    .filter-checkbox:hover[b-8ol4tyyl8c] {
        background: rgba(255, 255, 255, 0.05);
    }

    .filter-checkbox input[b-8ol4tyyl8c] {
        cursor: pointer;
        width: 1rem;
        height: 1rem;
        accent-color: #00e7ff;
    }

/* Loading State */
.loading-container[b-8ol4tyyl8c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    gap: 1rem;
    min-height: 400px;
    color: #a1b1cc;
}

.spinner-large[b-8ol4tyyl8c] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(0, 231, 255, 0.2);
    border-top-color: #00e7ff;
    border-radius: 50%;
    animation: spin-b-8ol4tyyl8c 1s linear infinite;
}

.spinner[b-8ol4tyyl8c] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-8ol4tyyl8c 0.6s linear infinite;
    margin-right: 0.5rem;
}

@keyframes spin-b-8ol4tyyl8c {
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.empty-state[b-8ol4tyyl8c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    min-height: 300px;
    gap: 1rem;
    color: #a1b1cc;
}

    .empty-state svg[b-8ol4tyyl8c] {
        width: 4rem;
        height: 4rem;
        opacity: 0.5;
        margin-bottom: 0.5rem;
    }

    .empty-state p[b-8ol4tyyl8c] {
        margin: 0;
        font-size: 1rem;
    }

/* Table Responsive */
.table-responsive[b-8ol4tyyl8c] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table[b-8ol4tyyl8c] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

    .data-table thead[b-8ol4tyyl8c] {
        background: rgba(0, 0, 0, 0.3);
    }

        .data-table thead th[b-8ol4tyyl8c] {
            padding: 1rem 1.5rem;
            text-align: right;
            font-weight: 700;
            color: #e7f1ff;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

    .data-table tbody tr[b-8ol4tyyl8c] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        transition: background 0.2s;
    }

        .data-table tbody tr:hover[b-8ol4tyyl8c] {
            background: rgba(255, 255, 255, 0.04);
        }

        .data-table tbody tr.suspicious-row[b-8ol4tyyl8c] {
            background: rgba(255, 46, 134, 0.05);
            border-left: 3px solid #ff2e86;
        }

            .data-table tbody tr.suspicious-row:hover[b-8ol4tyyl8c] {
                background: rgba(255, 46, 134, 0.1);
            }

    .data-table td[b-8ol4tyyl8c] {
        padding: 1rem 1.5rem;
        color: #e7f1ff;
    }

.cell-with-icon[b-8ol4tyyl8c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
}

    .cell-with-icon svg[b-8ol4tyyl8c] {
        color: #00e7ff;
        flex-shrink: 0;
    }

.monospace[b-8ol4tyyl8c] {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
}

.customer-info[b-8ol4tyyl8c] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .customer-info strong[b-8ol4tyyl8c] {
        color: #e7f1ff;
        font-weight: 600;
    }

    .customer-info small[b-8ol4tyyl8c] {
        color: #a1b1cc;
        font-size: 0.8rem;
    }

.badge-info[b-8ol4tyyl8c] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: rgba(0, 231, 255, 0.15);
    color: #00e7ff;
    border: 1px solid rgba(0, 231, 255, 0.3);
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-success[b-8ol4tyyl8c] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: rgba(0, 255, 183, 0.15);
    color: #00ffb7;
    border: 1px solid rgba(0, 255, 183, 0.3);
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.text-truncate[b-8ol4tyyl8c] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-muted[b-8ol4tyyl8c] {
    color: #a1b1cc;
}

/* Status Badge */
.status-badge[b-8ol4tyyl8c] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid;
}

.status-dot[b-8ol4tyyl8c] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    display: inline-block;
    animation: pulse-b-8ol4tyyl8c 2s ease-in-out infinite;
}

.status-online[b-8ol4tyyl8c] {
    background: rgba(0, 255, 183, 0.15);
    color: #00ffb7;
    border-color: rgba(0, 255, 183, 0.3);
}

    .status-online .status-dot[b-8ol4tyyl8c] {
        background: #00ffb7;
    }

.status-offline[b-8ol4tyyl8c] {
    background: rgba(255, 46, 134, 0.15);
    color: #ff2e86;
    border-color: rgba(255, 46, 134, 0.3);
}

    .status-offline .status-dot[b-8ol4tyyl8c] {
        background: #ff2e86;
        animation: none;
    }

@keyframes pulse-b-8ol4tyyl8c {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.timestamp[b-8ol4tyyl8c] {
    color: #a1b1cc;
    font-size: 0.875rem;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

/* Warning Badge */
.warning-badge[b-8ol4tyyl8c] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 46, 134, 0.15);
    color: #ff2e86;
    border: 1px solid rgba(255, 46, 134, 0.3);
    border-radius: 0.625rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

    .warning-badge:hover[b-8ol4tyyl8c] {
        background: rgba(255, 46, 134, 0.25);
        border-color: rgba(255, 46, 134, 0.5);
        transform: scale(1.05);
    }

    .warning-badge svg[b-8ol4tyyl8c] {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
    }

/* Action Buttons */
.action-buttons[b-8ol4tyyl8c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-icon[b-8ol4tyyl8c] {
    padding: 0.625rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a1b1cc;
}

    .btn-icon:hover[b-8ol4tyyl8c] {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        transform: scale(1.1);
    }

    .btn-icon.btn-view[b-8ol4tyyl8c] {
        color: #00e7ff;
    }

        .btn-icon.btn-view:hover[b-8ol4tyyl8c] {
            background: rgba(0, 231, 255, 0.15);
            border-color: rgba(0, 231, 255, 0.3);
        }

    .btn-icon.btn-programs[b-8ol4tyyl8c] {
        color: #7a5cff;
    }

        .btn-icon.btn-programs:hover[b-8ol4tyyl8c] {
            background: rgba(122, 92, 255, 0.15);
            border-color: rgba(122, 92, 255, 0.3);
        }

    .btn-icon.btn-edit[b-8ol4tyyl8c] {
        color: #ffc23d;
    }

        .btn-icon.btn-edit:hover[b-8ol4tyyl8c] {
            background: rgba(255, 194, 61, 0.15);
            border-color: rgba(255, 194, 61, 0.3);
        }

    .btn-icon.btn-delete[b-8ol4tyyl8c] {
        color: #ff2e86;
    }

        .btn-icon.btn-delete:hover[b-8ol4tyyl8c] {
            background: rgba(255, 46, 134, 0.15);
            border-color: rgba(255, 46, 134, 0.3);
        }

    .btn-icon:disabled[b-8ol4tyyl8c] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
    }

/* ============================================
   MODAL DIALOGS
   ============================================ */

.modal-overlay[b-8ol4tyyl8c] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: radial-gradient(800px 400px at 50% 10%, rgba(0, 231, 255, 0.05), transparent 60%), rgba(6, 9, 18, 0.7);
    backdrop-filter: blur(8px);
    padding: 1rem;
    overflow-y: auto;
}

.modal-container[b-8ol4tyyl8c] {
    background: linear-gradient(135deg, rgba(11, 18, 32, 0.95), rgba(11, 18, 32, 0.85));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.25rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    max-width: 50rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn-b-8ol4tyyl8c 0.3s ease-out;
}

    .modal-container.modal-large[b-8ol4tyyl8c] {
        max-width: 60rem;
    }

@keyframes modalSlideIn-b-8ol4tyyl8c {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header[b-8ol4tyyl8c] {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.modal-header-content[b-8ol4tyyl8c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.modal-icon-wrapper[b-8ol4tyyl8c] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.modal-icon[b-8ol4tyyl8c] {
    width: 3rem;
    height: 3rem;
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .modal-icon.primary[b-8ol4tyyl8c] {
        background: rgba(0, 231, 255, 0.15);
        color: #00e7ff;
        border: 1px solid rgba(0, 231, 255, 0.3);
    }

    .modal-icon.success[b-8ol4tyyl8c] {
        background: rgba(0, 255, 183, 0.15);
        color: #00ffb7;
        border: 1px solid rgba(0, 255, 183, 0.3);
    }

    .modal-icon.warning[b-8ol4tyyl8c] {
        background: rgba(255, 194, 61, 0.15);
        color: #ffc23d;
        border: 1px solid rgba(255, 194, 61, 0.3);
    }

    .modal-icon svg[b-8ol4tyyl8c] {
        width: 1.5rem;
        height: 1.5rem;
    }

.modal-title[b-8ol4tyyl8c] {
    font-size: 1.375rem;
    font-weight: 800;
    color: #e7f1ff;
    margin: 0 0 0.25rem 0;
}

.modal-subtitle[b-8ol4tyyl8c] {
    font-size: 0.875rem;
    color: #a1b1cc;
    margin: 0;
}

.modal-close-btn[b-8ol4tyyl8c] {
    background: none;
    border: none;
    color: #a1b1cc;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .modal-close-btn:hover[b-8ol4tyyl8c] {
        color: #e7f1ff;
        transform: scale(1.1);
    }

    .modal-close-btn:disabled[b-8ol4tyyl8c] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

/* Modal Body */
.modal-body[b-8ol4tyyl8c] {
    padding: 1.5rem;
    max-height: calc(90vh - 200px);
    overflow-y: auto;
}

    .modal-body[b-8ol4tyyl8c]::-webkit-scrollbar {
        width: 6px;
    }

    .modal-body[b-8ol4tyyl8c]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
    }

    .modal-body[b-8ol4tyyl8c]::-webkit-scrollbar-thumb {
        background: rgba(0, 231, 255, 0.3);
        border-radius: 10px;
    }

        .modal-body[b-8ol4tyyl8c]::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 231, 255, 0.5);
        }

/* Form Groups */
.form-group[b-8ol4tyyl8c] {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.form-row[b-8ol4tyyl8c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-label[b-8ol4tyyl8c] {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: #e7f1ff;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.required[b-8ol4tyyl8c] {
    color: #ff2e86;
    margin-left: 0.25rem;
}

.form-control[b-8ol4tyyl8c] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    color: #e7f1ff;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s;
    resize: vertical;
}

    .form-control[b-8ol4tyyl8c]::placeholder {
        color: #64748b;
    }

    .form-control:focus[b-8ol4tyyl8c] {
        outline: none;
        border-color: #00e7ff;
        background: rgba(0, 231, 255, 0.05);
        box-shadow: 0 0 0 3px rgba(0, 231, 255, 0.1);
    }

    .form-control:disabled[b-8ol4tyyl8c] {
        opacity: 0.5;
        cursor: not-allowed;
        background: rgba(15, 23, 42, 0.3);
    }

.form-hint[b-8ol4tyyl8c] {
    font-size: 0.8rem;
    color: #a1b1cc;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

    .form-hint svg[b-8ol4tyyl8c] {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
    }

/* Input with Icon */
.input-with-icon[b-8ol4tyyl8c] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-8ol4tyyl8c] {
    position: absolute;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #a1b1cc;
}

.input-with-icon .form-control[b-8ol4tyyl8c] {
    padding-right: 2.75rem;
}

/* Programs System */
.label-with-action[b-8ol4tyyl8c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.program-count[b-8ol4tyyl8c] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(0, 231, 255, 0.15);
    color: #00e7ff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.program-input-container[b-8ol4tyyl8c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.input-with-button[b-8ol4tyyl8c] {
    display: flex;
    gap: 0.75rem;
}

    .input-with-button .form-control[b-8ol4tyyl8c] {
        flex: 1;
    }

.add-program-btn[b-8ol4tyyl8c] {
    padding: 0.875rem 1rem;
    background: rgba(0, 255, 183, 0.15);
    border: 1px solid rgba(0, 255, 183, 0.3);
    color: #00ffb7;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .add-program-btn:hover:not(:disabled)[b-8ol4tyyl8c] {
        background: rgba(0, 255, 183, 0.25);
        border-color: rgba(0, 255, 183, 0.5);
        transform: scale(1.05);
    }

    .add-program-btn:disabled[b-8ol4tyyl8c] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Quick Add Section */
.quick-add-section[b-8ol4tyyl8c] {
    margin-bottom: 1rem;
}

.quick-add-label[b-8ol4tyyl8c] {
    font-size: 0.875rem;
    color: #a1b1cc;
    margin: 0 0 0.75rem 0;
    font-weight: 600;
}

.quick-add-buttons[b-8ol4tyyl8c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.quick-add-btn[b-8ol4tyyl8c] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a1b1cc;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

    .quick-add-btn svg[b-8ol4tyyl8c] {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
    }

    .quick-add-btn:hover:not(:disabled)[b-8ol4tyyl8c] {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
    }

    .quick-add-btn.added[b-8ol4tyyl8c] {
        background: rgba(0, 255, 183, 0.15);
        border-color: rgba(0, 255, 183, 0.3);
        color: #00ffb7;
    }

    .quick-add-btn:disabled[b-8ol4tyyl8c] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

/* Programs Tags */
.programs-tags-container[b-8ol4tyyl8c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(0, 231, 255, 0.05);
    border-radius: 0.75rem;
    border: 1px dashed rgba(0, 231, 255, 0.2);
}

.program-tag[b-8ol4tyyl8c] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: rgba(0, 231, 255, 0.15);
    border: 1px solid rgba(0, 231, 255, 0.3);
    color: #00e7ff;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    animation: tagSlideIn-b-8ol4tyyl8c 0.2s ease-out;
}

@keyframes tagSlideIn-b-8ol4tyyl8c {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.tag-icon[b-8ol4tyyl8c] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.tag-text[b-8ol4tyyl8c] {
    flex: 1;
    word-break: break-word;
}

.tag-remove-btn[b-8ol4tyyl8c] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s;
}

    .tag-remove-btn:hover[b-8ol4tyyl8c] {
        transform: scale(1.2);
    }

    .tag-remove-btn:disabled[b-8ol4tyyl8c] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

    .tag-remove-btn svg[b-8ol4tyyl8c] {
        width: 1rem;
        height: 1rem;
    }

.empty-programs[b-8ol4tyyl8c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0.75rem;
    border: 1px dashed rgba(255, 255, 255, 0.05);
    color: #a1b1cc;
    text-align: center;
}

    .empty-programs svg[b-8ol4tyyl8c] {
        width: 3rem;
        height: 3rem;
        opacity: 0.5;
        margin-bottom: 0.5rem;
    }

    .empty-programs p[b-8ol4tyyl8c] {
        margin: 0;
        font-size: 0.95rem;
    }

/* Checkbox Groups */
.checkbox-group[b-8ol4tyyl8c] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 1rem;
}

.checkbox[b-8ol4tyyl8c] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: #00e7ff;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.checkbox-group label[b-8ol4tyyl8c] {
    flex: 1;
    cursor: pointer;
}

.checkbox-label[b-8ol4tyyl8c] {
    display: block;
    font-weight: 600;
    color: #e7f1ff;
    margin-bottom: 0.25rem;
}

.checkbox-hint[b-8ol4tyyl8c] {
    margin: 0;
    font-size: 0.8rem;
    color: #a1b1cc;
}

/* Modal Footer */
.modal-footer[b-8ol4tyyl8c] {
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-secondary[b-8ol4tyyl8c] {
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a1b1cc;
    font-weight: 700;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-secondary:hover:not(:disabled)[b-8ol4tyyl8c] {
        background: rgba(255, 255, 255, 0.08);
        color: #e7f1ff;
        border-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
    }

    .btn-secondary:disabled[b-8ol4tyyl8c] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Bulk Add Grid */
.bulk-actions[b-8ol4tyyl8c] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.licenses-grid[b-8ol4tyyl8c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.5rem;
}

    .licenses-grid[b-8ol4tyyl8c]::-webkit-scrollbar {
        width: 6px;
    }

    .licenses-grid[b-8ol4tyyl8c]::-webkit-scrollbar-thumb {
        background: rgba(0, 231, 255, 0.3);
        border-radius: 10px;
    }

.license-card[b-8ol4tyyl8c] {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    display: flex;
    gap: 0.75rem;
}

    .license-card:hover:not(.disabled)[b-8ol4tyyl8c] {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(0, 231, 255, 0.3);
        transform: translateY(-2px);
    }

    .license-card.disabled[b-8ol4tyyl8c] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .license-card.selected[b-8ol4tyyl8c] {
        background: rgba(0, 231, 255, 0.15);
        border-color: rgba(0, 231, 255, 0.5);
        box-shadow: 0 0 0 2px rgba(0, 231, 255, 0.1);
    }

.license-checkbox[b-8ol4tyyl8c] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

    .license-checkbox input[b-8ol4tyyl8c] {
        width: 1.125rem;
        height: 1.125rem;
        cursor: pointer;
        accent-color: #00e7ff;
    }

.license-info[b-8ol4tyyl8c] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.license-header[b-8ol4tyyl8c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

    .license-header strong[b-8ol4tyyl8c] {
        color: #e7f1ff;
        font-weight: 700;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

.license-customer[b-8ol4tyyl8c] {
    color: #a1b1cc;
    margin: 0;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.license-product[b-8ol4tyyl8c] {
    color: #7a5cff;
    display: block;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.license-expiry[b-8ol4tyyl8c] {
    color: #ffc23d;
    display: block;
    font-size: 0.8rem;
}

/* Suspicious Programs */
.suspicious-programs-list[b-8ol4tyyl8c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.suspicious-program-card[b-8ol4tyyl8c] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid;
    border-radius: 0.75rem;
    transition: all 0.2s;
}

    .suspicious-program-card.risk-high[b-8ol4tyyl8c] {
        border-left-color: #ff2e86;
        background: rgba(255, 46, 134, 0.1);
    }

    .suspicious-program-card.risk-medium[b-8ol4tyyl8c] {
        border-left-color: #ffc23d;
        background: rgba(255, 194, 61, 0.1);
    }

    .suspicious-program-card.risk-low[b-8ol4tyyl8c] {
        border-left-color: #00ffb7;
        background: rgba(0, 255, 183, 0.1);
    }

.program-risk-icon[b-8ol4tyyl8c] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.suspicious-program-card.risk-high .program-risk-icon[b-8ol4tyyl8c] {
    background: rgba(255, 46, 134, 0.2);
    color: #ff2e86;
}

.suspicious-program-card.risk-medium .program-risk-icon[b-8ol4tyyl8c] {
    background: rgba(255, 194, 61, 0.2);
    color: #ffc23d;
}

.suspicious-program-card.risk-low .program-risk-icon[b-8ol4tyyl8c] {
    background: rgba(0, 255, 183, 0.2);
    color: #00ffb7;
}

.program-risk-icon svg[b-8ol4tyyl8c] {
    width: 1.25rem;
    height: 1.25rem;
}

.program-details[b-8ol4tyyl8c] {
    flex: 1;
    min-width: 0;
}

.program-header[b-8ol4tyyl8c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

    .program-header strong[b-8ol4tyyl8c] {
        color: #e7f1ff;
        font-weight: 700;
    }

.risk-badge[b-8ol4tyyl8c] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .risk-badge.risk-high[b-8ol4tyyl8c] {
        background: rgba(255, 46, 134, 0.2);
        color: #ff2e86;
    }

    .risk-badge.risk-medium[b-8ol4tyyl8c] {
        background: rgba(255, 194, 61, 0.2);
        color: #ffc23d;
    }

    .risk-badge.risk-low[b-8ol4tyyl8c] {
        background: rgba(0, 255, 183, 0.2);
        color: #00ffb7;
    }

.program-path[b-8ol4tyyl8c] {
    color: #a1b1cc;
    font-size: 0.8rem;
    margin: 0 0 0.5rem 0;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.program-status[b-8ol4tyyl8c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.status-indicator[b-8ol4tyyl8c] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
}

    .status-indicator.running[b-8ol4tyyl8c] {
        background: rgba(0, 255, 183, 0.15);
        color: #00ffb7;
    }

    .status-indicator.stopped[b-8ol4tyyl8c] {
        background: rgba(255, 255, 255, 0.05);
        color: #a1b1cc;
    }

.last-check[b-8ol4tyyl8c] {
    color: #a1b1cc;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1280px) {
    .stats-grid[b-8ol4tyyl8c] {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .form-row[b-8ol4tyyl8c] {
        grid-template-columns: 1fr;
    }

    .table-filters[b-8ol4tyyl8c] {
        gap: 0.75rem;
    }
}

@media (max-width: 1024px) {
    .header-actions[b-8ol4tyyl8c] {
        width: 100%;
        flex-direction: column;
    }

    .btn[b-8ol4tyyl8c] {
        width: 100%;
        justify-content: center;
    }

    .stats-grid[b-8ol4tyyl8c] {
        grid-template-columns: repeat(2, 1fr);
    }

    .table-responsive[b-8ol4tyyl8c] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table[b-8ol4tyyl8c] {
        font-size: 0.85rem;
    }

        .data-table td[b-8ol4tyyl8c] {
            padding: 0.875rem 1rem;
        }

    .licenses-grid[b-8ol4tyyl8c] {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .monitoring-container[b-8ol4tyyl8c] {
        padding: 0;
    }

    .header-title[b-8ol4tyyl8c] {
        font-size: 1.5rem;
    }

    .header-subtitle[b-8ol4tyyl8c] {
        font-size: 0.875rem;
    }

    .stats-grid[b-8ol4tyyl8c] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-card[b-8ol4tyyl8c] {
        padding: 1rem;
    }

    .stat-value[b-8ol4tyyl8c] {
        font-size: 1.5rem;
    }

    .table-header-content[b-8ol4tyyl8c] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .table-title[b-8ol4tyyl8c] {
        width: 100%;
    }

    .table-filters[b-8ol4tyyl8c] {
        width: 100%;
        flex-direction: column;
    }

    .filter-checkbox[b-8ol4tyyl8c] {
        width: 100%;
    }

    .table-responsive[b-8ol4tyyl8c] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table[b-8ol4tyyl8c] {
        min-width: 600px;
        font-size: 0.8rem;
    }

        .data-table thead th[b-8ol4tyyl8c] {
            padding: 0.75rem 1rem;
        }

        .data-table td[b-8ol4tyyl8c] {
            padding: 0.75rem 1rem;
        }

    .cell-with-icon[b-8ol4tyyl8c] {
        flex-direction: column;
        align-items: flex-start;
    }

    .action-buttons[b-8ol4tyyl8c] {
        gap: 0.375rem;
    }

    .btn-icon[b-8ol4tyyl8c] {
        padding: 0.5rem;
    }

        .btn-icon svg[b-8ol4tyyl8c] {
            width: 0.875rem;
            height: 0.875rem;
        }

    .modal-container[b-8ol4tyyl8c] {
        border-radius: 1rem;
        max-height: 95vh;
    }

    .modal-header[b-8ol4tyyl8c] {
        padding: 1rem;
    }

    .modal-body[b-8ol4tyyl8c] {
        padding: 1rem;
        max-height: calc(95vh - 150px);
    }

    .modal-footer[b-8ol4tyyl8c] {
        padding: 1rem;
        gap: 0.75rem;
    }

    .form-row[b-8ol4tyyl8c] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .btn[b-8ol4tyyl8c] {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }

    .btn-sm[b-8ol4tyyl8c] {
        width: 100%;
    }

    .btn svg[b-8ol4tyyl8c] {
        width: 1rem;
        height: 1rem;
    }

    .programs-tags-container[b-8ol4tyyl8c] {
        gap: 0.5rem;
    }

    .program-tag[b-8ol4tyyl8c] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .licenses-grid[b-8ol4tyyl8c] {
        grid-template-columns: 1fr;
        max-height: 50vh;
    }

    .quick-add-buttons[b-8ol4tyyl8c] {
        gap: 0.5rem;
    }

    .quick-add-btn[b-8ol4tyyl8c] {
        flex: 1;
        min-width: calc(50% - 0.375rem);
    }

    .modal-icon-wrapper[b-8ol4tyyl8c] {
        flex-direction: column;
    }

    .modal-title[b-8ol4tyyl8c] {
        font-size: 1.125rem;
    }
}

@media (max-width: 480px) {
    .header-title[b-8ol4tyyl8c] {
        font-size: 1.25rem;
    }

    .stat-card[b-8ol4tyyl8c] {
        padding: 0.875rem;
    }

    .stat-icon[b-8ol4tyyl8c] {
        width: 3rem;
        height: 3rem;
    }

    .stat-value[b-8ol4tyyl8c] {
        font-size: 1.375rem;
    }

    .table-responsive[b-8ol4tyyl8c] {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0;
    }

    .data-table[b-8ol4tyyl8c] {
        min-width: 500px;
    }

    .button-group[b-8ol4tyyl8c] {
        width: 100%;
    }

    .btn[b-8ol4tyyl8c] {
        width: 100%;
        padding: 0.75rem;
    }

    .modal-container[b-8ol4tyyl8c] {
        border-radius: 0.875rem;
        margin: 1rem;
    }

    .programs-tags-container[b-8ol4tyyl8c] {
        gap: 0.5rem;
    }

    .program-tag[b-8ol4tyyl8c] {
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }

    .quick-add-btn[b-8ol4tyyl8c] {
        min-width: auto;
        flex-basis: calc(50% - 0.375rem);
    }
}

/* ============================================
   ANIMATIONS & TRANSITIONS
   ============================================ */

@keyframes slideInDown-b-8ol4tyyl8c {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn-b-8ol4tyyl8c {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-8ol4tyyl8c] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode (Already applied by default) */
@media (prefers-color-scheme: dark) {
    body[b-8ol4tyyl8c] {
        color-scheme: dark;
    }
}

/* Print Styles */
@media print {
    .modal-overlay[b-8ol4tyyl8c],
    .header-actions[b-8ol4tyyl8c],
    .action-buttons[b-8ol4tyyl8c] {
        display: none;
    }

    .modal-container[b-8ol4tyyl8c] {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}
/* _content/XpowerBot/Components/Pages/AdminMonitoringPrograms.razor.rz.scp.css */
/* ============================================
   Device Programs - Complete CSS
   ============================================ */

.programs-container[b-xf35mgyrk1] {
    padding: 2rem;
    animation: fadeInUp-b-xf35mgyrk1 0.5s ease-out;
}

@keyframes fadeInUp-b-xf35mgyrk1 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.programs-header[b-xf35mgyrk1] {
    margin-bottom: 2rem;
}

.header-content[b-xf35mgyrk1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-title-section[b-xf35mgyrk1] {
    flex: 1;
}

.btn-back[b-xf35mgyrk1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(107, 114, 128, 0.2);
    border: 1px solid rgba(107, 114, 128, 0.3);
    border-radius: 0.75rem;
    color: #d1d5db;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1rem;
}

    .btn-back:hover[b-xf35mgyrk1] {
        background: rgba(107, 114, 128, 0.3);
        transform: translateX(5px);
    }

    .btn-back svg[b-xf35mgyrk1] {
        width: 1.125rem;
        height: 1.125rem;
    }

.header-title[b-xf35mgyrk1] {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.header-subtitle[b-xf35mgyrk1] {
    color: #9ca3af;
    font-size: 0.95rem;
    margin: 0;
    word-break: break-all;
}

.header-actions[b-xf35mgyrk1] {
    display: flex;
    gap: 0.75rem;
}

.btn[b-xf35mgyrk1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-outline[b-xf35mgyrk1] {
    background: transparent;
    border: 1px solid rgba(107, 114, 128, 0.3);
    color: #d1d5db;
}

    .btn-outline:hover[b-xf35mgyrk1] {
        background: rgba(107, 114, 128, 0.2);
        border-color: rgba(107, 114, 128, 0.5);
        transform: translateY(-2px);
    }

.btn svg[b-xf35mgyrk1] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Alert */
.alert[b-xf35mgyrk1] {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideDown-b-xf35mgyrk1 0.3s ease-out;
}

@keyframes slideDown-b-xf35mgyrk1 {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-xf35mgyrk1] {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.alert-error[b-xf35mgyrk1] {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.alert p[b-xf35mgyrk1] {
    margin: 0;
    font-weight: 600;
}

.alert button[b-xf35mgyrk1] {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.5rem;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: background 0.2s ease;
}

    .alert button:hover[b-xf35mgyrk1] {
        background: rgba(255, 255, 255, 0.1);
    }

/* Loading */
.loading-container[b-xf35mgyrk1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

    .loading-container p[b-xf35mgyrk1] {
        color: #9ca3af;
        font-size: 1rem;
    }

.spinner-large[b-xf35mgyrk1] {
    width: 3rem;
    height: 3rem;
    border: 4px solid rgba(59, 130, 246, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-xf35mgyrk1 0.8s linear infinite;
}

@keyframes spin-b-xf35mgyrk1 {
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.empty-state[b-xf35mgyrk1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: rgba(17, 24, 39, 0.6);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

    .empty-state svg[b-xf35mgyrk1] {
        width: 5rem;
        height: 5rem;
        color: #4b5563;
        margin-bottom: 1.5rem;
    }

    .empty-state h3[b-xf35mgyrk1] {
        font-size: 1.5rem;
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 0.5rem 0;
    }

    .empty-state p[b-xf35mgyrk1] {
        color: #9ca3af;
        font-size: 1rem;
        margin: 0;
    }

/* Programs Info Cards */
.programs-info[b-xf35mgyrk1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.info-card[b-xf35mgyrk1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

    .info-card svg[b-xf35mgyrk1] {
        width: 2.5rem;
        height: 2.5rem;
        color: #60a5fa;
        flex-shrink: 0;
    }

    .info-card > div[b-xf35mgyrk1] {
        flex: 1;
    }

.info-label[b-xf35mgyrk1] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin: 0 0 0.25rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value[b-xf35mgyrk1] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

/* Programs List */
.programs-list[b-xf35mgyrk1] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Program Card */
.program-card[b-xf35mgyrk1] {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    animation: cardFadeIn-b-xf35mgyrk1 0.5s ease-out;
}

@keyframes cardFadeIn-b-xf35mgyrk1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.program-card:hover[b-xf35mgyrk1] {
    transform: translateY(-5px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.program-card.running[b-xf35mgyrk1] {
    border-color: rgba(16, 185, 129, 0.3);
}

    .program-card.running:hover[b-xf35mgyrk1] {
        border-color: rgba(16, 185, 129, 0.5);
    }

.program-card.stopped[b-xf35mgyrk1] {
    border-color: rgba(107, 114, 128, 0.2);
}

/* Program Header */
.program-header[b-xf35mgyrk1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(31, 41, 55, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.program-icon[b-xf35mgyrk1] {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

    .program-icon svg[b-xf35mgyrk1] {
        width: 1.75rem;
        height: 1.75rem;
        color: #ffffff;
    }

.program-info-header[b-xf35mgyrk1] {
    flex: 1;
}

.program-name[b-xf35mgyrk1] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.program-status[b-xf35mgyrk1] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
}

    .program-status svg[b-xf35mgyrk1] {
        width: 1rem;
        height: 1rem;
    }

.status-running[b-xf35mgyrk1] {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-stopped[b-xf35mgyrk1] {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Program Details */
.program-details[b-xf35mgyrk1] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-row[b-xf35mgyrk1] {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
    align-items: start;
}

    .detail-row.full[b-xf35mgyrk1] {
        grid-template-columns: 150px 1fr;
    }

.detail-label[b-xf35mgyrk1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #9ca3af;
    font-weight: 600;
}

    .detail-label svg[b-xf35mgyrk1] {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        color: #6b7280;
    }

.detail-value[b-xf35mgyrk1] {
    color: #d1d5db;
    font-size: 0.875rem;
    word-break: break-word;
}

    .detail-value.path[b-xf35mgyrk1] {
        font-family: 'Courier New', monospace;
        background: rgba(31, 41, 55, 0.5);
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

/* Program Actions */
.program-actions[b-xf35mgyrk1] {
    padding: 0 1.5rem 1.5rem;
    display: flex;
    gap: 0.75rem;
}

.btn-delete[b-xf35mgyrk1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    border-radius: 0.75rem;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

    .btn-delete:hover[b-xf35mgyrk1] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
    }

    .btn-delete svg[b-xf35mgyrk1] {
        width: 1.125rem;
        height: 1.125rem;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .programs-container[b-xf35mgyrk1] {
        padding: 1rem;
    }

    .header-content[b-xf35mgyrk1] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-xf35mgyrk1] {
        width: 100%;
    }

    .btn[b-xf35mgyrk1] {
        width: 100%;
        justify-content: center;
    }

    .programs-info[b-xf35mgyrk1] {
        grid-template-columns: 1fr;
    }

    .program-header[b-xf35mgyrk1] {
        flex-wrap: wrap;
    }

    .detail-row[b-xf35mgyrk1] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .detail-label[b-xf35mgyrk1] {
        font-size: 0.8125rem;
    }

    .detail-value[b-xf35mgyrk1] {
        font-size: 0.8125rem;
    }
}

@media (max-width: 480px) {
    .header-title[b-xf35mgyrk1] {
        font-size: 1.5rem;
    }

    .info-card[b-xf35mgyrk1] {
        padding: 1rem;
    }

        .info-card svg[b-xf35mgyrk1] {
            width: 2rem;
            height: 2rem;
        }

    .info-value[b-xf35mgyrk1] {
        font-size: 1.125rem;
    }

    .program-header[b-xf35mgyrk1] {
        padding: 1rem;
    }

    .program-details[b-xf35mgyrk1] {
        padding: 1rem;
    }

    .program-actions[b-xf35mgyrk1] {
        padding: 0 1rem 1rem;
    }

    .program-name[b-xf35mgyrk1] {
        font-size: 1rem;
    }

    .program-icon[b-xf35mgyrk1] {
        width: 2.5rem;
        height: 2.5rem;
    }

        .program-icon svg[b-xf35mgyrk1] {
            width: 1.5rem;
            height: 1.5rem;
        }
}

/* Scrollbar */
.programs-container[b-xf35mgyrk1]::-webkit-scrollbar {
    width: 8px;
}

.programs-container[b-xf35mgyrk1]::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.4);
    border-radius: 4px;
}

.programs-container[b-xf35mgyrk1]::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 4px;
}

    .programs-container[b-xf35mgyrk1]::-webkit-scrollbar-thumb:hover {
        background: rgba(59, 130, 246, 0.5);
    }
/* _content/XpowerBot/Components/Pages/AdminMonitoringScreenshots.razor.rz.scp.css */
/* ============================================
   Device Screenshots - Complete CSS
   ============================================ */

.screenshots-container[b-njustxt159] {
    padding: 2rem;
    animation: fadeInUp-b-njustxt159 0.5s ease-out;
}

@keyframes fadeInUp-b-njustxt159 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.screenshots-header[b-njustxt159] {
    margin-bottom: 2rem;
}

.header-content[b-njustxt159] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-title-section[b-njustxt159] {
    flex: 1;
}

.btn-back[b-njustxt159] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(107, 114, 128, 0.2);
    border: 1px solid rgba(107, 114, 128, 0.3);
    border-radius: 0.75rem;
    color: #d1d5db;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1rem;
}

    .btn-back:hover[b-njustxt159] {
        background: rgba(107, 114, 128, 0.3);
        transform: translateX(5px);
    }

    .btn-back svg[b-njustxt159] {
        width: 1.125rem;
        height: 1.125rem;
    }

.header-title[b-njustxt159] {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.header-subtitle[b-njustxt159] {
    color: #9ca3af;
    font-size: 0.95rem;
    margin: 0;
    word-break: break-all;
}

.header-actions[b-njustxt159] {
    display: flex;
    gap: 0.75rem;
}

.btn[b-njustxt159] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-outline[b-njustxt159] {
    background: transparent;
    border: 1px solid rgba(107, 114, 128, 0.3);
    color: #d1d5db;
}

    .btn-outline:hover[b-njustxt159] {
        background: rgba(107, 114, 128, 0.2);
        border-color: rgba(107, 114, 128, 0.5);
        transform: translateY(-2px);
    }

.btn-success[b-njustxt159] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

    .btn-success:hover[b-njustxt159] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
 }

.btn-danger[b-njustxt159] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

    .btn-danger:hover[b-njustxt159] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
    }

.btn svg[b-njustxt159] {
    width: 1.25rem;
    height: 1.25rem;
}

/* ========================================
   Live Video Mode Styles
   ======================================== */

.live-video-container[b-njustxt159] {
    margin: 2rem 0;
    background: rgba(17, 24, 39, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.live-video-player[b-njustxt159] {
    position: relative;
    background: #000;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
    aspect-ratio: 16/9;
}

.live-image[b-njustxt159] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.live-indicator[b-njustxt159] {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(239, 68, 68, 0.95);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.875rem;
    border-radius: 1.25rem;
    z-index: 10;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.live-dot[b-njustxt159] {
    width: 0.625rem;
    height: 0.625rem;
    background: #ffffff;
    border-radius: 50%;
    animation: livePulse-b-njustxt159 1.5s ease-in-out infinite;
}

@keyframes livePulse-b-njustxt159 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.8);
    }
}

.live-info-overlay[b-njustxt159] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
}

.live-timestamp[b-njustxt159] {
    font-size: 1rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.live-frame-counter[b-njustxt159] {
    font-size: 0.875rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    backdrop-filter: blur(8px);
}

/* Live Controls */
.live-controls[b-njustxt159] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.playback-controls[b-njustxt159] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

.control-btn[b-njustxt159] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .control-btn:hover:not(:disabled)[b-njustxt159] {
        background: rgba(59, 130, 246, 0.2);
        border-color: #3b82f6;
        transform: scale(1.1);
    }

    .control-btn:disabled[b-njustxt159] {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .control-btn svg[b-njustxt159] {
        width: 1.5rem;
        height: 1.5rem;
        color: #ffffff;
    }

.control-btn-large[b-njustxt159] {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

    .control-btn-large:hover:not(:disabled)[b-njustxt159] {
        transform: scale(1.15);
        box-shadow: 0 12px 32px rgba(59, 130, 246, 0.5);
    }

    .control-btn-large svg[b-njustxt159] {
        width: 2rem;
        height: 2rem;
    }

/* Speed Control */
.speed-control[b-njustxt159] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.speed-control label[b-njustxt159] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 700;
        font-size: 0.875rem;
        color: #9ca3af;
    }

        .speed-control label svg[b-njustxt159] {
    width: 1.125rem;
            height: 1.125rem;
    color: #3b82f6;
        }

.speed-slider[b-njustxt159] {
    -webkit-appearance: none;
    width: 100%;
    height: 0.375rem;
    border-radius: 0.1875rem;
    background: rgba(255, 255, 255, 0.05);
  outline: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .speed-slider[b-njustxt159]::-webkit-slider-thumb {
  -webkit-appearance: none;
        appearance: none;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        cursor: pointer;
   border: 2px solid #111827;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
        transition: transform 0.2s ease;
    }

        .speed-slider[b-njustxt159]::-webkit-slider-thumb:hover {
   transform: scale(1.2);
    }

    .speed-slider[b-njustxt159]::-moz-range-thumb {
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        cursor: pointer;
        border: 2px solid #111827;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }

.speed-presets[b-njustxt159] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.preset-btn[b-njustxt159] {
    padding: 0.5rem 1rem;
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #d1d5db;
    font-weight: 700;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .preset-btn:hover[b-njustxt159] {
        background: rgba(59, 130, 246, 0.15);
   border-color: #3b82f6;
        transform: translateY(-2px);
    }

    .preset-btn.active[b-njustxt159] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
      border-color: transparent;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }

/* Progress Control */
.progress-control[b-njustxt159] {
 display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.progress-slider[b-njustxt159] {
    -webkit-appearance: none;
    width: 100%;
    height: 0.5rem;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.05);
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

    .progress-slider[b-njustxt159]::-webkit-slider-thumb {
        -webkit-appearance: none;
 appearance: none;
        width: 1.125rem;
     height: 1.125rem;
        border-radius: 50%;
        background: #3b82f6;
        cursor: pointer;
border: 3px solid #111827;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
   transition: transform 0.2s ease;
    }

        .progress-slider[b-njustxt159]::-webkit-slider-thumb:hover {
       transform: scale(1.3);
        }

    .progress-slider[b-njustxt159]::-moz-range-thumb {
        width: 1.125rem;
        height: 1.125rem;
   border-radius: 50%;
        background: #3b82f6;
        cursor: pointer;
  border: 3px solid #111827;
   box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
    }

.progress-info[b-njustxt159] {
    display: flex;
    justify-content: space-between;
font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
}

/* Loop Control */
.loop-control[b-njustxt159] {
    display: flex;
  justify-content: center;
}

.checkbox-control[b-njustxt159] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .checkbox-control:hover[b-njustxt159] {
        background: rgba(59, 130, 246, 0.1);
        border-color: #3b82f6;
    }

  .checkbox-control input[type="checkbox"][b-njustxt159] {
        width: 1.25rem;
        height: 1.25rem;
      cursor: pointer;
        accent-color: #3b82f6;
    }

    .checkbox-control svg[b-njustxt159] {
     width: 1.25rem;
        height: 1.25rem;
    color: #3b82f6;
    }

  .checkbox-control span[b-njustxt159] {
        font-weight: 700;
   font-size: 0.875rem;
        color: #d1d5db;
    }

/* ========================================
   Existing Styles (Grid View, etc.)
   ======================================== */

/* Alert */
.alert[b-njustxt159] {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideDown-b-njustxt159 0.3s ease-out;
}

@keyframes slideDown-b-njustxt159 {
    from {
      opacity: 0;
    transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-njustxt159] {
  background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.alert-error[b-njustxt159] {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.alert p[b-njustxt159] {
    margin: 0;
    font-weight: 600;
}

.alert button[b-njustxt159] {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.5rem;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: background 0.2s ease;
}

    .alert button:hover[b-njustxt159] {
        background: rgba(255, 255, 255, 0.1);
    }

/* Loading */
.loading-container[b-njustxt159] {
    display: flex;
    flex-direction: column;
    align-items: center;
justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

    .loading-container p[b-njustxt159] {
        color: #9ca3af;
        font-size: 1rem;
    }

.spinner-large[b-njustxt159] {
    width: 3rem;
    height: 3rem;
    border: 4px solid rgba(59, 130, 246, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-njustxt159 0.8s linear infinite;
}

@keyframes spin-b-njustxt159 {
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.empty-state[b-njustxt159] {
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: rgba(17, 24, 39, 0.6);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

    .empty-state svg[b-njustxt159] {
        width: 5rem;
        height: 5rem;
      color: #4b5563;
        margin-bottom: 1.5rem;
    }

    .empty-state h3[b-njustxt159] {
    font-size: 1.5rem;
font-weight: 700;
        color: #ffffff;
        margin: 0 0 0.5rem 0;
    }

    .empty-state p[b-njustxt159] {
   color: #9ca3af;
    font-size: 1rem;
 margin: 0;
    }

/* Screenshots Info Cards */
.screenshots-info[b-njustxt159] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.info-card[b-njustxt159] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

    .info-card svg[b-njustxt159] {
        width: 2.5rem;
        height: 2.5rem;
        color: #60a5fa;
  flex-shrink: 0;
    }

    .info-card > div[b-njustxt159] {
        flex: 1;
 }

.info-label[b-njustxt159] {
    font-size: 0.75rem;
    color: #9ca3af;
 margin: 0 0 0.25rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value[b-njustxt159] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

/* Screenshots Grid */
.screenshots-grid[b-njustxt159] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Screenshot Card */
.screenshot-card[b-njustxt159] {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    animation: cardFadeIn-b-njustxt159 0.5s ease-out;
}

@keyframes cardFadeIn-b-njustxt159 {
    from {
        opacity: 0;
      transform: translateY(20px);
    }

    to {
   opacity: 1;
        transform: translateY(0);
    }
}

.screenshot-card:hover[b-njustxt159] {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.screenshot-image-wrapper[b-njustxt159] {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
background: #000000;
    overflow: hidden;
    cursor: pointer;
}

    .screenshot-image-wrapper img[b-njustxt159] {
        position: absolute;
  top: 0;
        left: 0;
        width: 100%;
        height: 100%;
   object-fit: cover;
        transition: transform 0.3s ease;
    }

    .screenshot-image-wrapper:hover img[b-njustxt159] {
        transform: scale(1.05);
    }

.screenshot-overlay[b-njustxt159] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
gap: 0.5rem;
opacity: 0;
    transition: opacity 0.3s ease;
}

.screenshot-image-wrapper:hover .screenshot-overlay[b-njustxt159] {
    opacity: 1;
}

.screenshot-overlay svg[b-njustxt159] {
    width: 3rem;
    height: 3rem;
    color: #ffffff;
}

.screenshot-overlay span[b-njustxt159] {
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
}

/* Screenshot Info */
.screenshot-info[b-njustxt159] {
    padding: 1.25rem;
}

.screenshot-time[b-njustxt159] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #d1d5db;
  margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

    .screenshot-time svg[b-njustxt159] {
        width: 1.125rem;
        height: 1.125rem;
        color: #60a5fa;
        flex-shrink: 0;
    }

.screenshot-details[b-njustxt159] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.detail-item[b-njustxt159] {
  display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
  color: #9ca3af;
}

    .detail-item svg[b-njustxt159] {
        width: 1rem;
     height: 1rem;
  color: #6b7280;
      flex-shrink: 0;
    }

/* Screenshot Actions */
.screenshot-actions[b-njustxt159] {
    display: flex;
    gap: 0.5rem;
}

.btn-action[b-njustxt159] {
    flex: 1;
    display: flex;
  align-items: center;
    justify-content: center;
 padding: 0.75rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-action svg[b-njustxt159] {
 width: 1.25rem;
        height: 1.25rem;
    }

.btn-download[b-njustxt159] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
 color: #ffffff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

    .btn-download:hover[b-njustxt159] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
    }

.btn-delete[b-njustxt159] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

    .btn-delete:hover[b-njustxt159] {
        transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
    }

/* Fullscreen Image Viewer */
.fullscreen-overlay[b-njustxt159] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeIn-b-njustxt159 0.2s ease-out;
}

@keyframes fadeIn-b-njustxt159 {
    from {
    opacity: 0;
    }

    to {
      opacity: 1;
    }
}

.fullscreen-container[b-njustxt159] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
  gap: 1rem;
    animation: zoomIn-b-njustxt159 0.3s ease-out;
}

@keyframes zoomIn-b-njustxt159 {
    from {
        opacity: 0;
      transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fullscreen-container img[b-njustxt159] {
    max-width: 100%;
    max-height: calc(90vh - 4rem);
    object-fit: contain;
    border-radius: 1rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}

.fullscreen-close[b-njustxt159] {
    position: absolute;
    top: -3rem;
    left: 0;
    width: 3rem;
    height: 3rem;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    border-radius: 0.75rem;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

    .fullscreen-close:hover[b-njustxt159] {
        background: #dc2626;
        transform: scale(1.1);
 }

    .fullscreen-close svg[b-njustxt159] {
        width: 1.5rem;
        height: 1.5rem;
    }

.fullscreen-info[b-njustxt159] {
    text-align: center;
    color: #ffffff;
}

    .fullscreen-info p[b-njustxt159] {
    margin: 0.25rem 0;
    font-size: 0.875rem;
    }

      .fullscreen-info p:first-child[b-njustxt159] {
            font-weight: 700;
    font-size: 1rem;
        }

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
    .screenshots-container[b-njustxt159] {
        padding: 1rem;
    }

    .header-content[b-njustxt159] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-njustxt159] {
        width: 100%;
     flex-direction: column;
    }

    .btn[b-njustxt159] {
        width: 100%;
        justify-content: center;
    }

    .live-video-container[b-njustxt159] {
        padding: 1rem;
    }

    .live-indicator[b-njustxt159] {
        top: 0.625rem;
     left: 0.625rem;
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }

    .live-info-overlay[b-njustxt159] {
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .live-timestamp[b-njustxt159] {
  font-size: 0.875rem;
    }

    .live-frame-counter[b-njustxt159] {
 font-size: 0.75rem;
    }

    .control-btn[b-njustxt159] {
        width: 2.5rem;
        height: 2.5rem;
    }

        .control-btn svg[b-njustxt159] {
  width: 1.25rem;
     height: 1.25rem;
        }

    .control-btn-large[b-njustxt159] {
        width: 3.5rem;
        height: 3.5rem;
    }

        .control-btn-large svg[b-njustxt159] {
          width: 1.75rem;
     height: 1.75rem;
        }

    .speed-presets[b-njustxt159] {
 gap: 0.375rem;
    }

    .preset-btn[b-njustxt159] {
padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    }

  .screenshots-info[b-njustxt159] {
        grid-template-columns: 1fr;
    }

    .screenshots-grid[b-njustxt159] {
        grid-template-columns: 1fr;
    }

    .fullscreen-overlay[b-njustxt159] {
        padding: 1rem;
    }

    .fullscreen-container[b-njustxt159] {
        max-width: 95vw;
     max-height: 95vh;
    }

     .fullscreen-container img[b-njustxt159] {
   max-height: calc(95vh - 3rem);
        }

    .fullscreen-close[b-njustxt159] {
        top: auto;
     bottom: -3.5rem;
   left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 480px) {
    .header-title[b-njustxt159] {
      font-size: 1.5rem;
    }

    .info-card[b-njustxt159] {
        padding: 1rem;
    }

        .info-card svg[b-njustxt159] {
            width: 2rem;
       height: 2rem;
}

    .info-value[b-njustxt159] {
        font-size: 1.125rem;
    }

    .screenshot-info[b-njustxt159] {
        padding: 1rem;
    }
}

/* Scrollbar */
.screenshots-container[b-njustxt159]::-webkit-scrollbar {
    width: 8px;
}

.screenshots-container[b-njustxt159]::-webkit-scrollbar-track {
  background: rgba(31, 41, 55, 0.4);
  border-radius: 4px;
}

.screenshots-container[b-njustxt159]::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 4px;
}

    .screenshots-container[b-njustxt159]::-webkit-scrollbar-thumb:hover {
        background: rgba(59, 130, 246, 0.5);
    }
/* _content/XpowerBot/Components/Pages/AdminProducts.razor.rz.scp.css */
/* ============================================
   XPOWER Admin Products - Pure CSS Styles
   ============================================ */

/* SVG Icon Size Fix - Global */
svg[b-xc6nxudyk3] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Container */
.products-container[b-xc6nxudyk3] {
    padding: 2rem;
    animation: fadeInUp-b-xc6nxudyk3 0.5s ease-out;
}

@keyframes fadeInUp-b-xc6nxudyk3 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Page Header */
.page-header[b-xc6nxudyk3] {
  display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-title[b-xc6nxudyk3] {
font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
text-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.page-description[b-xc6nxudyk3] {
    color: #9ca3af;
    font-size: 0.95rem;
    margin: 0;
}

/* Primary Button */
.btn-primary[b-xc6nxudyk3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border: none;
    border-radius: 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover[b-xc6nxudyk3] {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
}

.btn-primary:active[b-xc6nxudyk3] {
    transform: translateY(0);
}

.btn-primary svg[b-xc6nxudyk3] {
    width: 1.25rem;
    height: 1.25rem;
}

.btn-primary:disabled[b-xc6nxudyk3] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Stats Grid */
.stats-grid[b-xc6nxudyk3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
 margin-bottom: 2rem;
}

/* Stat Card */
.stat-card[b-xc6nxudyk3] {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
  padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.stat-card:hover[b-xc6nxudyk3] {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.1);
}

.stat-icon-wrapper[b-xc6nxudyk3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.stat-icon[b-xc6nxudyk3] {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.primary[b-xc6nxudyk3] {
    background: rgba(59, 130, 246, 0.2);
}

.stat-icon.accent[b-xc6nxudyk3] {
    background: rgba(16, 185, 129, 0.2);
}

.stat-icon.secondary[b-xc6nxudyk3] {
    background: rgba(139, 92, 246, 0.2);
}

.stat-icon svg[b-xc6nxudyk3] {
    width: 1.5rem;
    height: 1.5rem;
}

.stat-icon.primary svg[b-xc6nxudyk3] { color: #60a5fa; }
.stat-icon.accent svg[b-xc6nxudyk3] { color: #34d399; }
.stat-icon.secondary svg[b-xc6nxudyk3] { color: #a78bfa; }

.stat-label[b-xc6nxudyk3] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}

.stat-value[b-xc6nxudyk3] {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
margin: 0;
}

/* Products Grid */
.products-grid[b-xc6nxudyk3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Product Card */
.product-card[b-xc6nxudyk3] {
    background: rgba(17, 24, 39, 0.6);
  backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover[b-xc6nxudyk3] {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.product-card-content[b-xc6nxudyk3] {
    padding: 1.5rem;
}

/* Product Header */
.product-header[b-xc6nxudyk3] {
    display: flex;
  align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.product-icon-wrapper[b-xc6nxudyk3] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    display: flex;
 align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.product-icon[b-xc6nxudyk3] {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

/* Status Badge */
.badge[b-xc6nxudyk3] {
    padding: 0.375rem 0.75rem;
border-radius: 0.5rem;
 font-size: 0.75rem;
    font-weight: 700;
    border-width: 1px;
    border-style: solid;
}

.badge.active[b-xc6nxudyk3] {
    background: rgba(16, 185, 129, 0.2);
  color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}

.badge.inactive[b-xc6nxudyk3] {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border-color: rgba(107, 114, 128, 0.3);
}

/* Product Title */
.product-title[b-xc6nxudyk3] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
}

.product-description[b-xc6nxudyk3] {
    color: #9ca3af;
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Product Details */
.product-details[b-xc6nxudyk3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.product-detail-item[b-xc6nxudyk3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  font-size: 0.875rem;
}

.detail-icon[b-xc6nxudyk3] {
    width: 1rem;
 height: 1rem;
    flex-shrink: 0;
    color: #60a5fa;
}

.detail-label[b-xc6nxudyk3] {
  color: #9ca3af;
}

.detail-value[b-xc6nxudyk3] {
    color: #ffffff;
    font-weight: 600;
}

/* Product Meta */
.product-meta[b-xc6nxudyk3] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Product Actions */
.product-actions[b-xc6nxudyk3] {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-info[b-xc6nxudyk3] {
    flex: 1;
    display: flex;
    align-items: center;
  justify-content: center;
    gap: 0.5rem;
  padding: 0.75rem;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 0.5rem;
    color: #22d3ee;
    font-weight: 600;
    font-size: 0.875rem;
 cursor: pointer;
 transition: all 0.2s ease;
}

.btn-info:hover[b-xc6nxudyk3] {
    background: rgba(6, 182, 212, 0.2);
    border-color: rgba(6, 182, 212, 0.4);
    transform: translateY(-2px);
}

.btn-info svg[b-xc6nxudyk3] {
    width: 1rem;
    height: 1rem;
}

.btn-icon[b-xc6nxudyk3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
 border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
}

.btn-icon.btn-danger[b-xc6nxudyk3] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.btn-icon.btn-danger:hover[b-xc6nxudyk3] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    transform: translateY(-2px);
}

.btn-icon svg[b-xc6nxudyk3] {
    width: 1rem;
    height: 1rem;
}

/* Modal/Dialog */
.modal-overlay[b-xc6nxudyk3] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
  z-index: 9999;
    padding: 1rem;
    animation: fadeIn-b-xc6nxudyk3 0.2s ease-out;
}

@keyframes fadeIn-b-xc6nxudyk3 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-container[b-xc6nxudyk3] {
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    max-width: 42rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-xc6nxudyk3 0.3s ease-out;
}

@keyframes slideUp-b-xc6nxudyk3 {
    from {
        opacity: 0;
 transform: translateY(50px) scale(0.95);
    }
 to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Header */
.modal-header[b-xc6nxudyk3] {
    padding: 1.5rem;
 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-header-content[b-xc6nxudyk3] {
    display: flex;
    align-items: center;
  justify-content: space-between;
}

.modal-icon-wrapper[b-xc6nxudyk3] {
display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-icon[b-xc6nxudyk3] {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-icon.primary[b-xc6nxudyk3] {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.modal-icon svg[b-xc6nxudyk3] {
 width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
}

.modal-title[b-xc6nxudyk3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
}

.modal-subtitle[b-xc6nxudyk3] {
  font-size: 0.875rem;
    color: #9ca3af;
    margin: 0;
}

.modal-close-btn[b-xc6nxudyk3] {
    width: 2.5rem;
    height: 2.5rem;
border-radius: 0.75rem;
  background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn:hover[b-xc6nxudyk3] {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.modal-close-btn svg[b-xc6nxudyk3] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Modal Body */
.modal-body[b-xc6nxudyk3] {
    padding: 1.5rem;
}

.form-group[b-xc6nxudyk3] {
    margin-bottom: 1.5rem;
}

.form-label[b-xc6nxudyk3] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #d1d5db;
    margin-bottom: 0.75rem;
}

.form-label .required[b-xc6nxudyk3] {
 color: #f87171;
    margin-left: 0.25rem;
}

.input-with-icon[b-xc6nxudyk3] {
    position: relative;
}

.input-icon[b-xc6nxudyk3] {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
}

.input-icon svg[b-xc6nxudyk3] {
    width: 1.25rem;
    height: 1.25rem;
 color: #6b7280;
}

.form-control[b-xc6nxudyk3] {
 width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(31, 41, 55, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: #ffffff;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.input-with-icon .form-control[b-xc6nxudyk3] {
    padding-right: 3rem;
}

.form-control:focus[b-xc6nxudyk3] {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(31, 41, 55, 0.7);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control[b-xc6nxudyk3]::placeholder {
    color: #6b7280;
}

.form-control:disabled[b-xc6nxudyk3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-hint[b-xc6nxudyk3] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

/* Form Grid */
.form-row[b-xc6nxudyk3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Checkbox Group */
.checkbox-group[b-xc6nxudyk3] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(31, 41, 55, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
}

.checkbox[b-xc6nxudyk3] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    border: 1px solid #475569;
    background: #1e293b;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.checkbox:checked[b-xc6nxudyk3] {
    background: #3b82f6;
  border-color: #3b82f6;
}

.checkbox-group label[b-xc6nxudyk3] {
    flex: 1;
    cursor: pointer;
}

.checkbox-label[b-xc6nxudyk3] {
    color: #d1d5db;
font-weight: 600;
    font-size: 0.875rem;
}

.checkbox-hint[b-xc6nxudyk3] {
  color: #6b7280;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Modal Footer */
.modal-footer[b-xc6nxudyk3] {
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-secondary[b-xc6nxudyk3] {
    padding: 0.75rem 1.5rem;
    background: rgba(107, 114, 128, 0.2);
    border: 1px solid rgba(107, 114, 128, 0.3);
  border-radius: 0.5rem;
    color: #d1d5db;
    font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-xc6nxudyk3] {
    background: rgba(107, 114, 128, 0.3);
}

.btn-secondary:disabled[b-xc6nxudyk3] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Loading Spinner */
.spinner[b-xc6nxudyk3] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
 border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    margin-left: 0.5rem;
    animation: spin-b-xc6nxudyk3 0.6s linear infinite;
}

@keyframes spin-b-xc6nxudyk3 {
    to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state[b-xc6nxudyk3] {
    text-align: center;
    padding: 4rem 1rem;
}

.empty-icon[b-xc6nxudyk3] {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.25rem;
    color: #4b5563;
}

.empty-text[b-xc6nxudyk3] {
  color: #9ca3af;
    font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
  .products-container[b-xc6nxudyk3] {
 padding: 1rem;
    }

    .stats-grid[b-xc6nxudyk3],
    .products-grid[b-xc6nxudyk3] {
        grid-template-columns: 1fr;
    }

    .form-row[b-xc6nxudyk3] {
    grid-template-columns: 1fr;
    }

    .modal-container[b-xc6nxudyk3] {
      margin: 0;
     border-radius: 1rem;
    }

    .page-header[b-xc6nxudyk3] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* _content/XpowerBot/Components/Pages/AdminPrograms.razor.rz.scp.css */
.admin-programs-page[b-ncguuv6gs4] {
    max-width: 1600px;
margin: 0 auto;
    padding: 2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.page-header[b-ncguuv6gs4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
  border-bottom: 2px solid #e0e0e0;
}

.page-header h1[b-ncguuv6gs4] {
    font-size: 2rem;
    color: #333;
    margin: 0;
}

.alert[b-ncguuv6gs4] {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.alert-success[b-ncguuv6gs4] {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error[b-ncguuv6gs4] {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.loading-container[b-ncguuv6gs4] {
    text-align: center;
    padding: 4rem 2rem;
}

.spinner[b-ncguuv6gs4] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin-b-ncguuv6gs4 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin-b-ncguuv6gs4 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.table-container[b-ncguuv6gs4] {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
}

.data-table[b-ncguuv6gs4] {
  width: 100%;
    border-collapse: collapse;
}

.data-table thead[b-ncguuv6gs4] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.data-table th[b-ncguuv6gs4] {
    padding: 1rem;
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

.data-table td[b-ncguuv6gs4] {
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
}

.data-table tbody tr:hover[b-ncguuv6gs4] {
    background: #f8f9fa;
}

.thumbnail[b-ncguuv6gs4] {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.5rem;
}

.thumbnail-placeholder[b-ncguuv6gs4] {
    width: 60px;
 height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.badge[b-ncguuv6gs4] {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.badge-success[b-ncguuv6gs4] {
    background: #28a745;
    color: white;
}

.badge-secondary[b-ncguuv6gs4] {
    background: #6c757d;
    color: white;
}

.badge-warning[b-ncguuv6gs4] {
    background: #ffc107;
    color: #333;
}

.badge-info[b-ncguuv6gs4] {
    background: #17a2b8;
    color: white;
}

.badge-light[b-ncguuv6gs4] {
    background: #e0e0e0;
    color: #666;
}

.stat-badge[b-ncguuv6gs4] {
 display: inline-block;
    padding: 0.3rem 0.6rem;
    background: #f0f0f0;
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.action-buttons[b-ncguuv6gs4] {
    display: flex;
    gap: 0.5rem;
flex-wrap: wrap;
}

.btn-icon[b-ncguuv6gs4] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
 justify-content: center;
}

.btn-edit[b-ncguuv6gs4] {
    background: #ffc107;
}

.btn-edit:hover[b-ncguuv6gs4] {
    background: #e0a800;
    transform: scale(1.1);
}

.btn-toggle[b-ncguuv6gs4] {
    background: #17a2b8;
}

.btn-toggle:hover[b-ncguuv6gs4] {
    background: #138496;
    transform: scale(1.1);
}

.btn-star[b-ncguuv6gs4] {
    background: #ffd700;
}

.btn-star:hover[b-ncguuv6gs4] {
    background: #ffed4e;
    transform: scale(1.1);
}

.btn-delete[b-ncguuv6gs4] {
 background: #dc3545;
}

.btn-delete:hover[b-ncguuv6gs4] {
  background: #c82333;
    transform: scale(1.1);
}

.btn[b-ncguuv6gs4] {
    padding: 0.75rem 1.5rem;
    border: none;
 border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary[b-ncguuv6gs4] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-primary:hover[b-ncguuv6gs4] {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-secondary[b-ncguuv6gs4] {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover[b-ncguuv6gs4] {
    background: #5a6268;
}

.btn-danger[b-ncguuv6gs4] {
    background: #dc3545;
    color: white;
}

.btn-danger:hover[b-ncguuv6gs4] {
    background: #c82333;
}

.empty-state[b-ncguuv6gs4] {
    text-align: center;
    padding: 4rem 2rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
}

.empty-icon[b-ncguuv6gs4] {
    font-size: 5rem;
    margin-bottom: 1rem;
}

.empty-state h3[b-ncguuv6gs4] {
    font-size: 1.8rem;
    color: #333;
margin-bottom: 0.5rem;
}

.empty-state p[b-ncguuv6gs4] {
    font-size: 1.1rem;
    color: #666;
}

/* Modal Styles */
.modal-overlay[b-ncguuv6gs4] {
    position: fixed;
    top: 0;
    left: 0;
  right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content[b-ncguuv6gs4] {
    background: white;
    border-radius: 1rem;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-content.modal-small[b-ncguuv6gs4] {
    max-width: 500px;
}

.modal-header[b-ncguuv6gs4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 2px solid #e0e0e0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 1rem 1rem 0 0;
}

.modal-header h2[b-ncguuv6gs4] {
    margin: 0;
    font-size: 1.5rem;
}

.btn-close[b-ncguuv6gs4] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-close:hover[b-ncguuv6gs4] {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.modal-body[b-ncguuv6gs4] {
    padding: 2rem;
}

.modal-footer[b-ncguuv6gs4] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.form-group[b-ncguuv6gs4] {
    margin-bottom: 1.5rem;
}

.form-group label[b-ncguuv6gs4] {
    display: block;
    margin-bottom: 0.5rem;
 font-weight: 600;
    color: #333;
}

.form-control[b-ncguuv6gs4] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
  border-radius: 0.5rem;
    font-size: 1rem;
  transition: all 0.3s ease;
}

.form-control:focus[b-ncguuv6gs4] {
    outline: none;
  border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-row[b-ncguuv6gs4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.validation-summary[b-ncguuv6gs4] {
    background: #f8d7da;
    color: #721c24;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid #f5c6cb;
}

.validation-message[b-ncguuv6gs4] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.warning-text[b-ncguuv6gs4] {
    color: #856404;
    background: #fff3cd;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .admin-programs-page[b-ncguuv6gs4] {
        padding: 1rem;
    }

    .page-header[b-ncguuv6gs4] {
        flex-direction: column;
     align-items: flex-start;
        gap: 1rem;
    }

    .form-row[b-ncguuv6gs4] {
        grid-template-columns: 1fr;
    }

    .data-table[b-ncguuv6gs4] {
        font-size: 0.9rem;
    }

    .data-table th[b-ncguuv6gs4],
    .data-table td[b-ncguuv6gs4] {
    padding: 0.5rem;
    }

    .action-buttons[b-ncguuv6gs4] {
    flex-direction: column;
    }

    .modal-content[b-ncguuv6gs4] {
        width: 95%;
        max-height: 95vh;
  }

    .modal-body[b-ncguuv6gs4] {
        padding: 1rem;
    }
}
/* _content/XpowerBot/Components/Pages/AdminQuotas.razor.rz.scp.css */
/* ============================================
   XPOWER Admin Quotas - Pure CSS Styles
   ============================================ */

/* SVG Icon Size Fix - Global */
svg[b-hgybwv8hkl] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Container */
.quotas-container[b-hgybwv8hkl] {
    padding: 2rem;
    animation: fadeInUp-b-hgybwv8hkl 0.5s ease-out;
}

@keyframes fadeInUp-b-hgybwv8hkl {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
      transform: translateY(0);
    }
}

/* Page Header */
.page-header[b-hgybwv8hkl] {
    display: flex;
    align-items: center;
justify-content: space-between;
    margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-title[b-hgybwv8hkl] {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.page-description[b-hgybwv8hkl] {
    color: #9ca3af;
    font-size: 0.95rem;
    margin: 0;
}

.btn-primary[b-hgybwv8hkl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 0.75rem;
    color: #ffffff;
    font-weight: 600;
 font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover[b-hgybwv8hkl] {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
}

.btn-primary svg[b-hgybwv8hkl] {
    width: 1.25rem;
    height: 1.25rem;
}

.btn-primary:disabled[b-hgybwv8hkl] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Stats Grid */
.stats-grid[b-hgybwv8hkl] {
    display: grid;
 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Stat Card */
.stat-card[b-hgybwv8hkl] {
 background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
  border-radius: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.stat-card:hover[b-hgybwv8hkl] {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.1);
}

.stat-icon-wrapper[b-hgybwv8hkl] {
    display: flex;
 align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.stat-icon[b-hgybwv8hkl] {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
  justify-content: center;
}

.stat-icon.primary[b-hgybwv8hkl] {
    background: rgba(59, 130, 246, 0.2);
}

.stat-icon.accent[b-hgybwv8hkl] {
    background: rgba(16, 185, 129, 0.2);
}

.stat-icon.warning[b-hgybwv8hkl] {
    background: rgba(245, 158, 11, 0.2);
}

.stat-icon.secondary[b-hgybwv8hkl] {
    background: rgba(139, 92, 246, 0.2);
}

.stat-icon svg[b-hgybwv8hkl] {
    width: 1.5rem;
    height: 1.5rem;
}

.stat-icon.primary svg[b-hgybwv8hkl] { color: #60a5fa; }
.stat-icon.accent svg[b-hgybwv8hkl] { color: #34d399; }
.stat-icon.warning svg[b-hgybwv8hkl] { color: #fbbf24; }
.stat-icon.secondary svg[b-hgybwv8hkl] { color: #a78bfa; }

.stat-label[b-hgybwv8hkl] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}

.stat-value[b-hgybwv8hkl] {
    font-size: 1.875rem;
    font-weight: 700;
  color: #ffffff;
    margin: 0;
}

/* Table Container */
.table-container[b-hgybwv8hkl] {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Table */
.data-table[b-hgybwv8hkl] {
    width: 100%;
 border-collapse: collapse;
}

.table-head[b-hgybwv8hkl] {
 background: rgba(31, 41, 55, 0.4);
}

.table-head th[b-hgybwv8hkl] {
    padding: 1.25rem 1.5rem;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 600;
  color: #d1d5db;
  white-space: nowrap;
}

.table-body tr[b-hgybwv8hkl] {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.table-body tr:hover[b-hgybwv8hkl] {
    background: rgba(31, 41, 55, 0.4);
}

.table-body td[b-hgybwv8hkl] {
    padding: 1.25rem 1.5rem;
    font-size: 0.875rem;
}

/* User Cell */
.user-cell[b-hgybwv8hkl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar[b-hgybwv8hkl] {
    width: 2.5rem;
    height: 2.5rem;
border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  font-weight: 700;
font-size: 0.875rem;
    flex-shrink: 0;
}

.user-name[b-hgybwv8hkl] {
    color: #ffffff;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.user-username[b-hgybwv8hkl] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin: 0;
}

/* Product Cell */
.product-cell[b-hgybwv8hkl] {
    display: flex;
align-items: center;
    gap: 0.5rem;
}

.product-icon-small[b-hgybwv8hkl] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
 background: rgba(59, 130, 246, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
  flex-shrink: 0;
}

.product-icon-small svg[b-hgybwv8hkl] {
    width: 1rem;
    height: 1rem;
    color: #60a5fa;
}

.product-name[b-hgybwv8hkl] {
    color: #ffffff;
  font-weight: 600;
}

/* Quota Values */
.quota-total span[b-hgybwv8hkl] {
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
}

.quota-used span[b-hgybwv8hkl] {
 color: #60a5fa;
 font-weight: 700;
}

.quota-remaining span[b-hgybwv8hkl] {
  color: #34d399;
    font-weight: 700;
}

/* Badge */
.badge[b-hgybwv8hkl] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
 font-weight: 700;
    border-width: 1px;
    border-style: solid;
}

.badge.active[b-hgybwv8hkl] {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}

.badge.inactive[b-hgybwv8hkl] {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border-color: rgba(107, 114, 128, 0.3);
}

/* Action Buttons */
.action-buttons[b-hgybwv8hkl] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-hgybwv8hkl] {
    display: flex;
align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
border: 1px solid;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon.btn-info[b-hgybwv8hkl] {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
}

.btn-icon.btn-info:hover[b-hgybwv8hkl] {
    background: rgba(6, 182, 212, 0.2);
    border-color: rgba(6, 182, 212, 0.4);
    transform: scale(1.1);
}

.btn-icon.btn-danger[b-hgybwv8hkl] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.btn-icon.btn-danger:hover[b-hgybwv8hkl] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    transform: scale(1.1);
}

.btn-icon svg[b-hgybwv8hkl] {
    width: 1rem;
    height: 1rem;
}

/* Empty State */
.empty-state[b-hgybwv8hkl] {
    text-align: center;
  padding: 4rem 1.5rem;
}

.empty-icon[b-hgybwv8hkl] {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.25rem;
    color: #4b5563;
}

.empty-text[b-hgybwv8hkl] {
color: #9ca3af;
    font-size: 0.95rem;
}

/* Modal */
.modal-overlay[b-hgybwv8hkl] {
    position: fixed;
    inset: 0;
 background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    display: flex;
  align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
animation: fadeIn-b-hgybwv8hkl 0.2s ease-out;
}

@keyframes fadeIn-b-hgybwv8hkl {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-container[b-hgybwv8hkl] {
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    max-width: 42rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-hgybwv8hkl 0.3s ease-out;
}

@keyframes slideUp-b-hgybwv8hkl {
    from {
 opacity: 0;
  transform: translateY(50px) scale(0.95);
    }
    to {
  opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-hgybwv8hkl] {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-header-content[b-hgybwv8hkl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-icon-wrapper[b-hgybwv8hkl] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-icon[b-hgybwv8hkl] {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-icon.primary[b-hgybwv8hkl] {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.modal-icon svg[b-hgybwv8hkl] {
    width: 1.5rem;
  height: 1.5rem;
    color: #ffffff;
}

.modal-title[b-hgybwv8hkl] {
    font-size: 1.5rem;
 font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
}

.modal-subtitle[b-hgybwv8hkl] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin: 0;
}

.modal-close-btn[b-hgybwv8hkl] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: transparent;
    border: none;
    color: #9ca3af;
cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn:hover[b-hgybwv8hkl] {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.modal-close-btn svg[b-hgybwv8hkl] {
    width: 1.25rem;
    height: 1.25rem;
}

.modal-body[b-hgybwv8hkl] {
    padding: 1.5rem;
}

.form-group[b-hgybwv8hkl] {
    margin-bottom: 1.5rem;
}

.form-label[b-hgybwv8hkl] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #d1d5db;
    margin-bottom: 0.75rem;
}

.form-label .required[b-hgybwv8hkl] {
    color: #f87171;
    margin-left: 0.25rem;
}

.input-with-icon[b-hgybwv8hkl] {
  position: relative;
}

.input-icon[b-hgybwv8hkl] {
  position: absolute;
    top: 50%;
  right: 1rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
pointer-events: none;
}

.input-icon svg[b-hgybwv8hkl] {
    width: 1.25rem;
    height: 1.25rem;
color: #6b7280;
}

.form-control[b-hgybwv8hkl] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(31, 41, 55, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: #ffffff;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.input-with-icon .form-control[b-hgybwv8hkl] {
    padding-right: 3rem;
}

.form-control:focus[b-hgybwv8hkl] {
outline: none;
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(31, 41, 55, 0.7);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control[b-hgybwv8hkl]::placeholder {
    color: #6b7280;
}

.form-control:disabled[b-hgybwv8hkl] {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-hint[b-hgybwv8hkl] {
    font-size: 0.75rem;
 color: #6b7280;
    margin-top: 0.5rem;
}

.form-hint.warning[b-hgybwv8hkl] {
    color: #fbbf24;
}

/* Info Card Grid */
.info-card-grid[b-hgybwv8hkl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
    background: rgba(31, 41, 55, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
}

.info-card-item[b-hgybwv8hkl] {
    display: flex;
    flex-direction: column;
}

.info-label[b-hgybwv8hkl] {
  font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
}

.info-value[b-hgybwv8hkl] {
  color: #ffffff;
    font-weight: 600;
}

/* Checkbox Group */
.checkbox-group[b-hgybwv8hkl] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
  background: rgba(31, 41, 55, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
}

.checkbox[b-hgybwv8hkl] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    border: 1px solid #475569;
    background: #1e293b;
cursor: pointer;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.checkbox:checked[b-hgybwv8hkl] {
    background: #3b82f6;
    border-color: #3b82f6;
}

.checkbox-group label[b-hgybwv8hkl] {
    flex: 1;
    cursor: pointer;
}

.checkbox-label[b-hgybwv8hkl] {
    color: #d1d5db;
    font-weight: 600;
    font-size: 0.875rem;
}

.checkbox-hint[b-hgybwv8hkl] {
 color: #6b7280;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Info Card */
.info-card[b-hgybwv8hkl] {
    padding: 1.25rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 1rem;
}

.info-card-content[b-hgybwv8hkl] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.info-icon[b-hgybwv8hkl] {
    width: 1.25rem;
    height: 1.25rem;
    color: #60a5fa;
  margin-top: 0.125rem;
    flex-shrink: 0;
}

.info-details[b-hgybwv8hkl] {
    flex: 1;
}

.info-title[b-hgybwv8hkl] {
    font-size: 0.875rem;
    font-weight: 600;
color: #ffffff;
    margin: 0 0 0.75rem 0;
}

.info-stats[b-hgybwv8hkl] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    font-size: 0.75rem;
}

.info-stat[b-hgybwv8hkl] {
    display: flex;
    flex-direction: column;
}

.info-stat-label[b-hgybwv8hkl] {
    color: #9ca3af;
}

.info-stat-value[b-hgybwv8hkl] {
    font-weight: 700;
    margin-top: 0.25rem;
}

.info-stat-value[b-hgybwv8hkl] { color: #ffffff; }
.info-stat-value.primary[b-hgybwv8hkl] { color: #60a5fa; }
.info-stat-value.accent[b-hgybwv8hkl] { color: #34d399; }

.modal-footer[b-hgybwv8hkl] {
    padding: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
 align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-secondary[b-hgybwv8hkl] {
    padding: 0.75rem 1.5rem;
    background: rgba(107, 114, 128, 0.2);
    border: 1px solid rgba(107, 114, 128, 0.3);
border-radius: 0.5rem;
    color: #d1d5db;
    font-weight: 600;
 font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-hgybwv8hkl] {
    background: rgba(107, 114, 128, 0.3);
}

.btn-secondary:disabled[b-hgybwv8hkl] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner[b-hgybwv8hkl] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    margin-left: 0.5rem;
    animation: spin-b-hgybwv8hkl 0.6s linear infinite;
}

@keyframes spin-b-hgybwv8hkl {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 1024px) {
    .stats-grid[b-hgybwv8hkl] {
    grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .quotas-container[b-hgybwv8hkl] {
        padding: 1rem;
    }

    .stats-grid[b-hgybwv8hkl] {
        grid-template-columns: 1fr;
  }

    .table-container[b-hgybwv8hkl] {
        overflow-x: auto;
    }

    .data-table[b-hgybwv8hkl] {
   min-width: 900px;
  }

    .info-card-grid[b-hgybwv8hkl] {
     grid-template-columns: 1fr;
    }

    .info-stats[b-hgybwv8hkl] {
 grid-template-columns: 1fr;
    }

    .page-header[b-hgybwv8hkl] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* _content/XpowerBot/Components/Pages/AdminUsers.razor.rz.scp.css */
/* AdminUsers Styles */

/* SVG Icon Size Fix - Global */
svg[b-thwbbvad6z] {
    width: 1.25rem;
    height: 1.25rem;
}

.users-container[b-thwbbvad6z] {
    padding: 0;
}

/* Page Header */
.page-header[b-thwbbvad6z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-title[b-thwbbvad6z] {
    font-size: 1.875rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem 0;
}

.page-description[b-thwbbvad6z] {
    font-size: 1rem;
 color: #94a3b8;
    margin: 0;
}

.btn-primary[b-thwbbvad6z] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
 padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
    font-weight: 600;
 border: none;
    border-radius: 0.75rem;
 cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.btn-primary:hover[b-thwbbvad6z] {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.4);
    transform: translateY(-2px);
}

.btn-primary svg[b-thwbbvad6z] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Stats Cards */
.stats-grid[b-thwbbvad6z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-thwbbvad6z] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(20px);
  border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.stat-card:hover[b-thwbbvad6z] {
  border-color: rgba(14, 165, 233, 0.3);
    transform: translateY(-3px);
}

.stat-icon-wrapper[b-thwbbvad6z] {
display: flex;
  align-items: center;
    justify-content: space-between;
 margin-bottom: 1rem;
}

.stat-icon[b-thwbbvad6z] {
  width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
 display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.primary[b-thwbbvad6z] {
    background: rgba(14, 165, 233, 0.2);
}

.stat-icon.accent[b-thwbbvad6z] {
    background: rgba(245, 158, 11, 0.2);
}

.stat-icon.secondary[b-thwbbvad6z] {
    background: rgba(217, 70, 239, 0.2);
}

.stat-icon.warning[b-thwbbvad6z] {
    background: rgba(245, 158, 11, 0.2);
}

.stat-icon svg[b-thwbbvad6z] {
  width: 1.5rem;
    height: 1.5rem;
}

.stat-label[b-thwbbvad6z] {
  font-size: 0.875rem;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}

.stat-value[b-thwbbvad6z] {
    font-size: 1.875rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* Table Container */
.table-container[b-thwbbvad6z] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(20px);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.table-header[b-thwbbvad6z] {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.table-header-content[b-thwbbvad6z] {
    display: flex;
align-items: center;
    justify-content: space-between;
 flex-wrap: wrap;
    gap: 1rem;
}

.table-title[b-thwbbvad6z] {
    font-size: 1.25rem;
 font-weight: 700;
    color: #fff;
    margin: 0;
}

.table-filters[b-thwbbvad6z] {
    display: flex;
    align-items: center;
  gap: 1rem;
    flex-wrap: wrap;
}

.input-field[b-thwbbvad6z] {
 padding: 0.625rem 1rem;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: #fff;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    min-width: 150px;
}

.input-field:focus[b-thwbbvad6z] {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.input-field[b-thwbbvad6z]::placeholder {
    color: #64748b;
}

/* Table */
.table-wrapper[b-thwbbvad6z] {
    overflow-x: auto;
}

.data-table[b-thwbbvad6z] {
    width: 100%;
    border-collapse: collapse;
}

.table-head[b-thwbbvad6z] {
    background: rgba(15, 23, 42, 0.4);
}

.table-head th[b-thwbbvad6z] {
    padding: 1rem 1.5rem;
    text-align: right;
    font-size: 0.875rem;
  font-weight: 600;
    color: #cbd5e1;
}

.table-body tr[b-thwbbvad6z] {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.table-body tr:hover[b-thwbbvad6z] {
    background: rgba(15, 23, 42, 0.4);
}

.table-body td[b-thwbbvad6z] {
    padding: 1rem 1.5rem;
}

/* User Cell */
.user-cell[b-thwbbvad6z] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar[b-thwbbvad6z] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #d946ef);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.user-name[b-thwbbvad6z] {
    color: #fff;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.user-username[b-thwbbvad6z] {
    font-size: 0.875rem;
 color: #94a3b8;
    margin: 0;
}

.user-email[b-thwbbvad6z] {
    color: #cbd5e1;
}

/* Badge */
.badge[b-thwbbvad6z] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
 border: 1px solid;
}

.badge.owner[b-thwbbvad6z] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.badge.admin[b-thwbbvad6z] {
    background: rgba(14, 165, 233, 0.2);
    color: #0ea5e9;
    border-color: rgba(14, 165, 233, 0.3);
}

.badge.distributor[b-thwbbvad6z] {
  background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
 border-color: rgba(245, 158, 11, 0.3);
}

/* Status */
.status[b-thwbbvad6z] {
  display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-dot[b-thwbbvad6z] {
width: 0.5rem;
 height: 0.5rem;
    border-radius: 50%;
}

.status.active[b-thwbbvad6z] {
    color: #f59e0b;
}

.status.active .status-dot[b-thwbbvad6z] {
    background: #f59e0b;
}

.status.inactive[b-thwbbvad6z] {
    color: #94a3b8;
}

.status.inactive .status-dot[b-thwbbvad6z] {
    background: #64748b;
}

.last-login[b-thwbbvad6z] {
    color: #cbd5e1;
    font-size: 0.875rem;
}

/* Action Buttons */
.action-buttons[b-thwbbvad6z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-icon[b-thwbbvad6z] {
    padding: 0.5rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon svg[b-thwbbvad6z] {
    width: 1rem;
    height: 1rem;
}

.btn-icon.btn-info[b-thwbbvad6z] {
    background: rgba(14, 165, 233, 0.2);
    color: #0ea5e9;
}

.btn-icon.btn-info:hover[b-thwbbvad6z] {
    background: rgba(14, 165, 233, 0.3);
    transform: scale(1.1);
}

.btn-icon.btn-warning[b-thwbbvad6z] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.btn-icon.btn-warning:hover[b-thwbbvad6z] {
    background: rgba(245, 158, 11, 0.3);
    transform: scale(1.1);
}

.btn-icon.btn-danger[b-thwbbvad6z] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.btn-icon.btn-danger:hover[b-thwbbvad6z] {
    background: rgba(239, 68, 68, 0.3);
    transform: scale(1.1);
}

/* Modal */
.modal-overlay[b-thwbbvad6z] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 1rem;
}

.modal-container[b-thwbbvad6z] {
    background: #0f172a;
    border-radius: 1rem;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 42rem;
    width: 100%;
 max-height: 90vh;
overflow-y: auto;
}

.modal-header[b-thwbbvad6z] {
  padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title[b-thwbbvad6z] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
margin: 0;
}

.modal-body[b-thwbbvad6z] {
    padding: 1.5rem;
}

.form-group[b-thwbbvad6z] {
    margin-bottom: 1rem;
}

.form-label[b-thwbbvad6z] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 0.5rem;
}

.form-control[b-thwbbvad6z] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: #fff;
  font-size: 0.875rem;
    transition: all 0.2s ease;
}

.form-control:focus[b-thwbbvad6z] {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.form-control:disabled[b-thwbbvad6z] {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkbox-group[b-thwbbvad6z] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.checkbox[b-thwbbvad6z] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    border: 1px solid #475569;
    background: #1e293b;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.checkbox:checked[b-thwbbvad6z] {
    background: #0ea5e9;
    border-color: #0ea5e9;
}

.checkbox-group label[b-thwbbvad6z] {
    flex: 1;
    cursor: pointer;
}

.modal-footer[b-thwbbvad6z] {
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-secondary[b-thwbbvad6z] {
    padding: 0.75rem 1.5rem;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-thwbbvad6z] {
    background: rgba(15, 23, 42, 1);
color: #fff;
}

/* Empty State */
.empty-state[b-thwbbvad6z] {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-icon[b-thwbbvad6z] {
  width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    color: #475569;
}

.empty-text[b-thwbbvad6z] {
    color: #94a3b8;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .stats-grid[b-thwbbvad6z] {
grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-header[b-thwbbvad6z] {
        flex-direction: column;
   align-items: flex-start;
    }

    .stats-grid[b-thwbbvad6z] {
        grid-template-columns: 1fr;
    }

    .table-filters[b-thwbbvad6z] {
 width: 100%;
        flex-direction: column;
    }

    .input-field[b-thwbbvad6z] {
   width: 100%;
    }

    .table-container[b-thwbbvad6z] {
     overflow-x: auto;
    }

    .data-table[b-thwbbvad6z] {
        min-width: 800px;
    }
}
/* _content/XpowerBot/Components/Pages/ApiDocs.razor.rz.scp.css */
/* ============================================
   XPOWER API Documentation - Professional Styles
============================================ */

/* Container */
.api-docs-container[b-ckfdktp1hv] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0f1e 0%, #1a1f3a 100%);
    padding: 0;
}

/* Hero Section */
.api-hero[b-ckfdktp1hv] {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #8b5cf6 100%);
 padding: 4rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.api-hero[b-ckfdktp1hv]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
  right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.05"><path d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30v4h-4v2h4v4h2v-4h4V6h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/></g></g></svg>');
    opacity: 0.3;
}

.hero-content[b-ckfdktp1hv] {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.hero-icon[b-ckfdktp1hv] {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
  justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.hero-icon svg[b-ckfdktp1hv] {
    width: 3rem;
    height: 3rem;
    color: #ffffff;
}

.api-hero h1[b-ckfdktp1hv] {
    font-size: 3rem;
    font-weight: 800;
    color: #ffffff;
 margin: 0 0 1rem 0;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.api-hero p[b-ckfdktp1hv] {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2rem 0;
}

.hero-badges[b-ckfdktp1hv] {
  display: flex;
    justify-content: center;
  gap: 1rem;
    flex-wrap: wrap;
}

.badge[b-ckfdktp1hv] {
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-block;
}

.badge.version[b-ckfdktp1hv] {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
 border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge.rest[b-ckfdktp1hv] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge.json[b-ckfdktp1hv] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge.encrypted[b-ckfdktp1hv] {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.badge.recommended[b-ckfdktp1hv] {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-size: 0.75rem;
}

.badge.testing[b-ckfdktp1hv] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
    font-size: 0.75rem;
}

.badge.auth[b-ckfdktp1hv] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
  font-size: 0.75rem;
}

/* Quick Start Section */
.quick-start-section[b-ckfdktp1hv],
.endpoints-section[b-ckfdktp1hv],
.response-codes-section[b-ckfdktp1hv],
.error-codes-section[b-ckfdktp1hv],
.security-section[b-ckfdktp1hv],
.support-section[b-ckfdktp1hv] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.quick-start-section h2[b-ckfdktp1hv],
.endpoints-section h2[b-ckfdktp1hv],
.response-codes-section h2[b-ckfdktp1hv],
.error-codes-section h2[b-ckfdktp1hv],
.security-section h2[b-ckfdktp1hv],
.support-section h2[b-ckfdktp1hv] {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 2rem 0;
    text-align: center;
}

.steps-grid[b-ckfdktp1hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.step-card[b-ckfdktp1hv] {
    background: rgba(31, 41, 55, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.step-card:hover[b-ckfdktp1hv] {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.2);
}

.step-number[b-ckfdktp1hv] {
    width: 4rem;
  height: 4rem;
 margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

.step-card h3[b-ckfdktp1hv] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
}

.step-card p[b-ckfdktp1hv] {
    color: #9ca3af;
    font-size: 0.95rem;
 margin: 0;
}

/* Endpoint Cards */
.endpoint-card[b-ckfdktp1hv] {
    background: rgba(31, 41, 55, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 2rem;
    overflow: hidden;
}

.endpoint-header[b-ckfdktp1hv] {
    padding: 1.5rem;
    background: rgba(17, 24, 39, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
  justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.endpoint-title[b-ckfdktp1hv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    flex: 1;
}

.method[b-ckfdktp1hv] {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
}

.method.post[b-ckfdktp1hv] {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.method.get[b-ckfdktp1hv] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.endpoint-url[b-ckfdktp1hv] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 1rem;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.btn-collapse[b-ckfdktp1hv] {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #60a5fa;
}

.btn-collapse:hover[b-ckfdktp1hv] {
    background: rgba(59, 130, 246, 0.2);
}

.btn-collapse svg[b-ckfdktp1hv] {
    width: 1.25rem;
    height: 1.25rem;
}

.endpoint-body[b-ckfdktp1hv] {
    padding: 2rem;
    animation: slideDown-b-ckfdktp1hv 0.3s ease;
}

@keyframes slideDown-b-ckfdktp1hv {
    from {
        opacity: 0;
 transform: translateY(-10px);
    }
    to {
        opacity: 1;
 transform: translateY(0);
    }
}

.endpoint-description[b-ckfdktp1hv] {
    margin-bottom: 2rem;
}

.endpoint-description p[b-ckfdktp1hv] {
    color: #d1d5db;
    font-size: 1rem;
margin: 0.5rem 0;
}

.warning[b-ckfdktp1hv] {
 color: #fbbf24;
    background: rgba(245, 158, 11, 0.1);
    padding: 1rem;
  border-radius: 0.5rem;
  border-left: 4px solid #fbbf24;
}

.note[b-ckfdktp1hv] {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.1);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid #60a5fa;
    margin: 1rem 0;
}

/* Section Blocks */
.section-block[b-ckfdktp1hv] {
 margin-bottom: 2rem;
}

.section-block h4[b-ckfdktp1hv] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 1rem 0;
}

/* Code Blocks */
.code-block[b-ckfdktp1hv] {
    background: rgba(17, 24, 39, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    overflow: hidden;
    margin: 1rem 0;
}

.code-header[b-ckfdktp1hv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(31, 41, 55, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.code-header span[b-ckfdktp1hv] {
    color: #9ca3af;
    font-size: 0.875rem;
    font-weight: 600;
}

.btn-copy[b-ckfdktp1hv] {
  display: inline-flex;
    align-items: center;
    gap: 0.5rem;
padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.1);
 border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 0.5rem;
    color: #60a5fa;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-copy:hover[b-ckfdktp1hv] {
    background: rgba(59, 130, 246, 0.2);
}

.btn-copy svg[b-ckfdktp1hv] {
    width: 1rem;
    height: 1rem;
}

.code-block pre[b-ckfdktp1hv] {
    margin: 0;
    padding: 1.5rem;
    overflow-x: auto;
}

.code-block code[b-ckfdktp1hv] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #34d399;
}

/* Example Tabs */
.example-tabs[b-ckfdktp1hv] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
}

.tab-btn[b-ckfdktp1hv] {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.tab-btn:hover[b-ckfdktp1hv] {
    color: #d1d5db;
}

.tab-btn.active[b-ckfdktp1hv] {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
}

/* Response Codes */
.codes-grid[b-ckfdktp1hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.code-item[b-ckfdktp1hv] {
background: rgba(31, 41, 55, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1rem;
    padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.code-item.success[b-ckfdktp1hv] {
    border-left: 4px solid #34d399;
}

.code-item.error[b-ckfdktp1hv] {
    border-left: 4px solid #f87171;
}

.code-number[b-ckfdktp1hv] {
    font-size: 2rem;
    font-weight: 700;
  color: #ffffff;
}

.code-item.success .code-number[b-ckfdktp1hv] {
    color: #34d399;
}

.code-item.error .code-number[b-ckfdktp1hv] {
    color: #f87171;
}

.code-desc h4[b-ckfdktp1hv] {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
}

.code-desc p[b-ckfdktp1hv] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin: 0;
}

/* Error Table */
.error-table[b-ckfdktp1hv] {
  background: rgba(31, 41, 55, 0.6);
    backdrop-filter: blur(40px);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.error-table table[b-ckfdktp1hv] {
    width: 100%;
    border-collapse: collapse;
}

.error-table thead[b-ckfdktp1hv] {
    background: rgba(17, 24, 39, 0.8);
}

.error-table th[b-ckfdktp1hv] {
    padding: 1rem 1.5rem;
    text-align: right;
    font-weight: 600;
    color: #9ca3af;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.error-table td[b-ckfdktp1hv] {
    padding: 1rem 1.5rem;
    color: #d1d5db;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.error-table tbody tr:hover[b-ckfdktp1hv] {
    background: rgba(59, 130, 246, 0.05);
}

.error-table code[b-ckfdktp1hv] {
    font-family: 'Consolas', 'Monaco', monospace;
    background: rgba(59, 130, 246, 0.1);
    padding: 0.25rem 0.5rem;
 border-radius: 0.25rem;
    color: #60a5fa;
    font-size: 0.875rem;
}

/* Best Practices */
.best-practices[b-ckfdktp1hv] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.practice-item[b-ckfdktp1hv] {
    display: flex;
    gap: 1.5rem;
    background: rgba(31, 41, 55, 0.6);
 backdrop-filter: blur(40px);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.practice-icon[b-ckfdktp1hv] {
  font-size: 2rem;
    flex-shrink: 0;
}

.practice-content h4[b-ckfdktp1hv] {
    font-size: 1.125rem;
    font-weight: 600;
 color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.practice-content p[b-ckfdktp1hv] {
    color: #9ca3af;
    font-size: 0.95rem;
    margin: 0;
}

.practice-content code[b-ckfdktp1hv] {
    font-family: 'Consolas', 'Monaco', monospace;
 background: rgba(59, 130, 246, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    color: #60a5fa;
    font-size: 0.875rem;
}

/* Support Cards */
.support-cards[b-ckfdktp1hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.support-card[b-ckfdktp1hv] {
    background: rgba(31, 41, 55, 0.6);
  backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    transition: all 0.3s ease;
}

.support-card:hover[b-ckfdktp1hv] {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.2);
}

.support-icon[b-ckfdktp1hv] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.support-card h4[b-ckfdktp1hv] {
  font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.support-card p[b-ckfdktp1hv] {
    color: #60a5fa;
  font-size: 1rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .api-hero[b-ckfdktp1hv] {
 padding: 3rem 1.5rem;
    }

    .api-hero h1[b-ckfdktp1hv] {
        font-size: 2rem;
    }

    .api-hero p[b-ckfdktp1hv] {
      font-size: 1rem;
    }

    .quick-start-section[b-ckfdktp1hv],
    .endpoints-section[b-ckfdktp1hv],
    .response-codes-section[b-ckfdktp1hv],
    .error-codes-section[b-ckfdktp1hv],
    .security-section[b-ckfdktp1hv],
    .support-section[b-ckfdktp1hv] {
        padding: 2rem 1rem;
    }

    .endpoint-header[b-ckfdktp1hv] {
        flex-direction: column;
        align-items: flex-start;
    }

    .endpoint-title[b-ckfdktp1hv] {
        flex-direction: column;
        align-items: flex-start;
    }

    .endpoint-url[b-ckfdktp1hv] {
        font-size: 0.875rem;
    word-break: break-all;
    }

    .code-block pre[b-ckfdktp1hv] {
 font-size: 0.75rem;
    }

    .error-table[b-ckfdktp1hv] {
        overflow-x: auto;
    }

    .example-tabs[b-ckfdktp1hv] {
        overflow-x: auto;
    }
}
/* _content/XpowerBot/Components/Pages/Contact.razor.rz.scp.css */
/* CONTACT CTA */
.cta[b-2sjc6nu0rb] {
    padding: 28px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))
}

.cta h3[b-2sjc6nu0rb] { margin: 0 0 6px; font-size: 24px }
.cta p[b-2sjc6nu0rb] { margin: 0 0 16px; color: var(--muted) }
/* _content/XpowerBot/Components/Pages/Home.razor.rz.scp.css */
/* HERO */
.hero[b-mjf35xklg5] {
    padding: 100px 0 40px;
    position: relative
}

.hero-inner[b-mjf35xklg5] {
    text-align: center;
    position: relative
}

.pre-badges[b-mjf35xklg5] {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px
}

.title[b-mjf35xklg5] {
    margin: 0 0 10px;
    font-size: clamp(34px, 6.6vw, 74px);
    line-height: 1.08;
    letter-spacing: .2px;
    text-shadow: 0 8px 40px rgba(0,0,0,.6)
}

.subtitle[b-mjf35xklg5] {
    color: var(--muted);
    max-width: 920px;
    margin: 12px auto 18px;
    font-size: 18px
}

.hero-actions[b-mjf35xklg5] {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
    flex-wrap: wrap
}

/* Top chat CTA */
.chat-cta[b-mjf35xklg5] { margin-top: 18px; }
.chat-cta .cta-btn[b-mjf35xklg5] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(0,231,255,.35);
    background: rgba(10,12,24,.72);
    color: #eaffff;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(0,231,255,.10);
    transition: transform .12s ease;
}
.chat-cta .cta-btn .dot[b-mjf35xklg5] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00e7ff;
    box-shadow: 0 0 0 0 rgba(0,231,255,.8);
    animation: nudge-ping-b-mjf35xklg5 1.8s cubic-bezier(.22,.61,.36,1) infinite;
}
.chat-cta .cta-btn:hover[b-mjf35xklg5] { transform: translateY(-2px); }

/* reuse keyframes from AiChat css if present, else define */
@keyframes nudge-ping-b-mjf35xklg5 {
    0%   { box-shadow: 0 0 0 0 rgba(0,231,255,.8); }
    70%  { box-shadow: 0 0 0 12px rgba(0,231,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,231,255,0); }
}

.hero-stats[b-mjf35xklg5] {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px
}

.chip[b-mjf35xklg5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: rgba(255,255,255,.03);
    border-radius: 14px;
    border: 1px solid var(--border)
}

    .chip strong[b-mjf35xklg5] {
        font-size: 22px;
        letter-spacing: .3px
    }

/* Glitch effect for title */
.glitch[b-mjf35xklg5] {
    position: relative;
    display: inline-block
}

    .glitch[b-mjf35xklg5]::before, .glitch[b-mjf35xklg5]::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        pointer-events: none;
        mix-blend-mode: screen
    }

    .glitch[b-mjf35xklg5]::before {
        text-shadow: -2px 0 var(--c1);
        clip-path: polygon(0 2%,100% 2%,100% 40%,0 40%);
        animation: g1-b-mjf35xklg5 2.2s infinite linear alternate-reverse
    }

    .glitch[b-mjf35xklg5]::after {
        text-shadow: 2px 0 var(--c2);
        clip-path: polygon(0 60%,100% 60%,100% 98%,0 98%);
        animation: g2-b-mjf35xklg5 2.0s infinite linear alternate-reverse
    }

@keyframes g1-b-mjf35xklg5 {
    0% {
        transform: translate(0)
    }

    100% {
        transform: translate(-1px, .6px)
    }
}

@keyframes g2-b-mjf35xklg5 {
    0% {
        transform: translate(0)
    }

    100% {
        transform: translate(1px, -.6px)
    }
}

/* Hero ambient visuals */
.hero-ambient[b-mjf35xklg5] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1
}

    .hero-ambient .orb[b-mjf35xklg5] {
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        filter: blur(40px);
        opacity: .30;
        animation: floaty 5s ease-in-out infinite alternate
    }

    .hero-ambient .o1[b-mjf35xklg5] {
        right: 10%;
        top: -40px;
        background: radial-gradient(circle at 30% 30%, rgba(0,231,255,.8), transparent 60%)
    }

    .hero-ambient .o2[b-mjf35xklg5] {
        left: 12%;
        top: 120px;
        background: radial-gradient(circle at 70% 30%, rgba(122,92,255,.8), transparent 60%);
        animation-duration: 6.2s
    }

    .hero-ambient .ring[b-mjf35xklg5] {
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translateX(-50%);
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: conic-gradient(from 0deg, rgba(0,231,255,.3), rgba(122,92,255,.3), rgba(0,255,183,.3), rgba(0,231,255,.3));
        mask: radial-gradient(closest-side, transparent 68%, #000 69% 72%, transparent 73%);
        filter: blur(8px);
        opacity: .5;
        animation: gradientSpin 12s linear infinite
    }

    .hero-ambient .grid[b-mjf35xklg5] {
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/ 40px 40px, linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/ 40px 40px;
        mask: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
        opacity: .2
    }

/* RESPONSIVE (Home only) */
@media (max-width: 640px) {
    .hero-stats[b-mjf35xklg5] {
        grid-template-columns: 1fr
    }
}

/* Extra: subtle hover lift on touch devices - disable tilt transforms when used inside Home */
@media (hover: none) {
    .tilt[b-mjf35xklg5] {
        transform: none
    }
}
/* _content/XpowerBot/Components/Pages/Programs.razor.rz.scp.css */
.programs-page[b-mlyfc8bx80] {
max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.programs-header[b-mlyfc8bx80] {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color: white;
    border-radius: 1rem;
}

.programs-header h1[b-mlyfc8bx80] {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.programs-header p[b-mlyfc8bx80] {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* Loading State */
.loading-container[b-mlyfc8bx80] {
    min-height: 400px;
    display: grid;
    place-items: center;
}

.spinner-wrapper[b-mlyfc8bx80] {
 position: relative;
    width: 80px;
    height: 80px;
}

.spinner-glow[b-mlyfc8bx80] {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
  background: radial-gradient(circle, var(--c1), transparent);
filter: blur(30px);
    animation: glowPulse-b-mlyfc8bx80 2s ease-in-out infinite;
}

.spinner[b-mlyfc8bx80] {
    position: relative;
    width: 80px;
    height: 80px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--c1);
    border-right-color: var(--c2);
    border-radius: 50%;
    animation: spin-b-mlyfc8bx80 1s linear infinite;
}

@keyframes spin-b-mlyfc8bx80 {
    to {
        transform: rotate(360deg);
    }
}

/* Programs Grid */
.programs-grid[b-mlyfc8bx80] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
    margin-top: 32px;
}

@media (max-width: 768px) {
    .programs-grid[b-mlyfc8bx80] {
        grid-template-columns: 1fr;
gap: 20px;
    }
}

/* Program Card */
.program-card[b-mlyfc8bx80] {
    position: relative;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    transition: all 0.4s var(--ease-out);
}

    .program-card:hover[b-mlyfc8bx80] {
      transform: translateY(-8px);
     box-shadow: 0 32px 70px rgba(0, 0, 0, 0.6),
              0 0 60px rgba(0, 231, 255, 0.15);
 }

    .program-card.featured[b-mlyfc8bx80] {
      background: linear-gradient(135deg, rgba(0, 231, 255, 0.08), rgba(122, 92, 255, 0.06));
    }

  .program-card.featured:hover[b-mlyfc8bx80] {
 box-shadow: 0 32px 70px rgba(0, 0, 0, 0.6),
         0 0 80px rgba(0, 231, 255, 0.25);
        }

/* Featured Badge */
.featured-badge[b-mlyfc8bx80] {
    position: absolute;
 top: 16px;
    right: 16px;
    z-index: 10;
display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    color: #03131a;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.3px;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0, 231, 255, 0.3);
    animation: glowPulse-b-mlyfc8bx80 3s ease-in-out infinite;
}

    .featured-badge span[b-mlyfc8bx80] {
        font-size: 14px;
        animation: floaty-b-mlyfc8bx80 2s ease-in-out infinite alternate;
    }

/* Program Image */
.program-image-wrapper[b-mlyfc8bx80] {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bg-0), var(--bg-1));
}

.program-image[b-mlyfc8bx80] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease-out), filter 0.4s;
}

.program-card:hover .program-image[b-mlyfc8bx80] {
    transform: scale(1.08);
    filter: brightness(1.1) saturate(1.2);
}

.program-placeholder[b-mlyfc8bx80] {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(0, 231, 255, 0.1), rgba(122, 92, 255, 0.1));
    position: relative;
    overflow: hidden;
}

    .program-placeholder[b-mlyfc8bx80]::before {
        content: "";
        position: absolute;
        inset: -50%;
        background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        animation: gradientSpin-b-mlyfc8bx80 4s linear infinite;
    }

.placeholder-icon[b-mlyfc8bx80] {
    font-size: 64px;
    opacity: 0.4;
  position: relative;
    z-index: 1;
}

/* Program Content */
.program-content[b-mlyfc8bx80] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.program-title[b-mlyfc8bx80] {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.3px;
    color: var(--text);
    transition: color 0.3s;
}

.program-card:hover .program-title[b-mlyfc8bx80] {
    background: linear-gradient(90deg, var(--c1), var(--c3));
    -webkit-background-clip: text;
    background-clip: text;
 color: transparent;
}

.program-description[b-mlyfc8bx80] {
    margin: 0;
  font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Program Meta */
.program-meta[b-mlyfc8bx80] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

    .program-meta .badge.small[b-mlyfc8bx80] {
        font-size: 11px;
        padding: 6px 10px;
        font-weight: 800;
    }

    .program-meta .price[b-mlyfc8bx80] {
        background: linear-gradient(135deg, rgba(255, 199, 61, 0.15), rgba(255, 46, 134, 0.15));
        border-color: rgba(255, 199, 61, 0.3);
   color: var(--c5);
    }

    .program-meta .free[b-mlyfc8bx80] {
  border-color: rgba(0, 255, 183, 0.3);
    }

/* Program Stats */
.program-stats[b-mlyfc8bx80] {
    display: flex;
    gap: 20px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.stat-item[b-mlyfc8bx80] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}

.stat-icon[b-mlyfc8bx80] {
    font-size: 16px;
}

.stat-value[b-mlyfc8bx80] {
    font-weight: 800;
 color: var(--text);
}

.stat-label[b-mlyfc8bx80] {
    font-size: 12px;
}

/* Program Actions */
.program-actions[b-mlyfc8bx80] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .program-actions .btn[b-mlyfc8bx80] {
        flex: 1;
    min-width: 120px;
        justify-content: center;
     font-size: 14px;
    }

        .program-actions .btn i[b-mlyfc8bx80] {
      font-size: 18px;
        }
/* Empty State */
.empty-state[b-mlyfc8bx80] {
    text-align: center;
}

.empty-icon[b-mlyfc8bx80] {
    font-size: 80px;
    margin-bottom: 20px;
    animation: floaty-b-mlyfc8bx80 3s ease-in-out infinite alternate;
}

    .empty-state h3[b-mlyfc8bx80] {
  margin: 0 0 12px;
        font-size: 24px;
     font-weight: 800;
    }

    .empty-state p[b-mlyfc8bx80] {
        margin: 0 0 24px;
        color: var(--muted);
    }

/* Section Spacing */
.featured-section[b-mlyfc8bx80],
.regular-section[b-mlyfc8bx80] {
    padding: 60px 0;
}

.programs-main[b-mlyfc8bx80] {
    min-height: calc(100vh - var(--headerH));
}

/* Animations */
@keyframes floaty-b-mlyfc8bx80 {
    0% {
     transform: translateY(0);
    }
    100% {
        transform: translateY(-12px);
    }
}

@keyframes glowPulse-b-mlyfc8bx80 {
 0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

@keyframes gradientSpin-b-mlyfc8bx80 {
    0% {
      transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .programs-hero[b-mlyfc8bx80] {
        padding: 90px 0 60px;
    }

    .program-image-wrapper[b-mlyfc8bx80] {
        height: 180px;
    }

    .program-content[b-mlyfc8bx80] {
        padding: 18px;
    }

    .program-title[b-mlyfc8bx80] {
     font-size: 18px;
    }

    .program-actions[b-mlyfc8bx80] {
        flex-direction: column;
    }

        .program-actions .btn[b-mlyfc8bx80] {
      width: 100%;
        }

    .featured-section[b-mlyfc8bx80],
    .regular-section[b-mlyfc8bx80] {
        padding: 40px 0;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .program-card[b-mlyfc8bx80],
    .program-image[b-mlyfc8bx80],
    .spinner[b-mlyfc8bx80],
    .orb[b-mlyfc8bx80],
    .empty-icon[b-mlyfc8bx80],
    .featured-badge span[b-mlyfc8bx80] {
      animation: none;
     transition: none;
    }

    .program-card:hover[b-mlyfc8bx80] {
        transform: none;
    }
}

/* License Popup Overlay */
.license-popup-overlay[b-mlyfc8bx80] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  padding: 20px;
 animation: fadeIn-b-mlyfc8bx80 0.3s ease-out;
}

@keyframes fadeIn-b-mlyfc8bx80 {
    from {
     opacity: 0;
 }
    to {
        opacity: 1;
    }
}

/* License Popup Content */
.license-popup-content[b-mlyfc8bx80] {
    max-width: 500px;
    width: 100%;
    background: linear-gradient(135deg, rgba(20, 30, 48, 0.95), rgba(36, 59, 85, 0.95));
    border: 2px solid rgba(0, 231, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7),
           0 0 100px rgba(0, 231, 255, 0.2);
 animation: slideUp-b-mlyfc8bx80 0.4s ease-out;
    position: relative;
    overflow: hidden;
}

    .license-popup-content[b-mlyfc8bx80]::before {
        content: "";
        position: absolute;
 top: 0;
      left: 0;
        right: 0;
 height: 4px;
        background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
        animation: shimmer-b-mlyfc8bx80 2s linear infinite;
    }

@keyframes slideUp-b-mlyfc8bx80 {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
  opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes shimmer-b-mlyfc8bx80 {
    0% {
        background-position: -200% 0;
    }
 100% {
      background-position: 200% 0;
    }
}

/* Popup Header */
.popup-header[b-mlyfc8bx80] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border);
}

    .popup-header h3[b-mlyfc8bx80] {
        margin: 0;
   font-size: 22px;
        font-weight: 900;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.close-btn[b-mlyfc8bx80] {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.3s;
}

    .close-btn:hover[b-mlyfc8bx80] {
     background: rgba(255, 255, 255, 0.1);
        color: var(--text);
      transform: rotate(90deg);
    }

/* Popup Body */
.popup-body[b-mlyfc8bx80] {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.program-info[b-mlyfc8bx80] {
    text-align: center;
  padding: 20px;
    background: rgba(0, 231, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(0, 231, 255, 0.15);
}

    .program-info h4[b-mlyfc8bx80] {
        margin: 0 0 8px;
     font-size: 20px;
 font-weight: 900;
    }

    .program-info p[b-mlyfc8bx80] {
        margin: 0;
font-size: 14px;
        color: var(--muted);
        line-height: 1.6;
    }

.form-group[b-mlyfc8bx80] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .form-group label[b-mlyfc8bx80] {
        font-weight: 700;
        font-size: 14px;
   color: var(--text);
        display: flex;
        align-items: center;
      gap: 6px;
    }

.form-control[b-mlyfc8bx80] {
    width: 100%;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    transition: all 0.3s;
}

    .form-control:focus[b-mlyfc8bx80] {
        outline: none;
        border-color: var(--c1);
        background: rgba(0, 0, 0, 0.5);
 box-shadow: 0 0 20px rgba(0, 231, 255, 0.2);
    }

    .form-control:disabled[b-mlyfc8bx80] {
        opacity: 0.5;
   cursor: not-allowed;
    }

    .form-control[b-mlyfc8bx80]::placeholder {
        color: var(--muted);
     font-weight: 400;
        letter-spacing: normal;
    }

/* Validation Message */
.validation-message[b-mlyfc8bx80] {
    padding: 14px 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 14px;
    animation: slideDown-b-mlyfc8bx80 0.3s ease-out;
}

@keyframes slideDown-b-mlyfc8bx80 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
    transform: translateY(0);
    }
}

.validation-message.success[b-mlyfc8bx80] {
    background: rgba(0, 255, 183, 0.1);
    border: 2px solid rgba(0, 255, 183, 0.3);
    color: var(--c4);
}

    .validation-message.success i[b-mlyfc8bx80] {
        color: var(--c4);
        font-size: 18px;
    }

.validation-message.error[b-mlyfc8bx80] {
    background: rgba(255, 61, 113, 0.1);
    border: 2px solid rgba(255, 61, 113, 0.3);
    color: #ff6b9d;
}

    .validation-message.error i[b-mlyfc8bx80] {
        color: #ff6b9d;
        font-size: 18px;
    }

/* Popup Footer */
.popup-footer[b-mlyfc8bx80] {
    padding: 20px 28px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

    .popup-footer .btn[b-mlyfc8bx80] {
   min-width: 130px;
    }

/* Spinner for button */
.spinner-border[b-mlyfc8bx80] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-mlyfc8bx80 0.75s linear infinite;
}

.spinner-border-sm[b-mlyfc8bx80] {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* Responsive Popup */
@media (max-width: 576px) {
    .license-popup-overlay[b-mlyfc8bx80] {
        padding: 10px;
    }

    .popup-header[b-mlyfc8bx80] {
        padding: 20px;
    }

    .popup-header h3[b-mlyfc8bx80] {
    font-size: 18px;
        }

    .popup-body[b-mlyfc8bx80] {
    padding: 20px;
    }

    .program-info h4[b-mlyfc8bx80] {
      font-size: 18px;
    }

    .popup-footer[b-mlyfc8bx80] {
        padding: 16px 20px;
        flex-direction: column;
    }

        .popup-footer .btn[b-mlyfc8bx80] {
   width: 100%;
        }
}
/* _content/XpowerBot/Components/Pages/Services.razor.rz.scp.css */
/* SERVICES */
.services-grid[b-ikti385yfn] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 14px
}

.service-card[b-ikti385yfn] {
    padding: 18px;
    text-align: center
}

.svc-ic[b-ikti385yfn] {
    font-size: 26px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    margin: 4px auto 8px;
    background: linear-gradient(135deg, rgba(0,231,255,.18), rgba(122,92,255,.10))
}

.service-card h3[b-ikti385yfn] {
    margin: 6px 0 6px;
    font-size: 18px
}

.service-card p[b-ikti385yfn] {
    margin: 0;
    color: var(--muted)
}

/* Responsive */
@media (max-width: 1200px) { .services-grid[b-ikti385yfn] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .services-grid[b-ikti385yfn] { grid-template-columns: repeat(2, 1fr); } }
/* _content/XpowerBot/Components/Shared/AdminBar.razor.rz.scp.css */
:host[b-0a533hclgf]{
  display:block;
  direction:rtl;
  background-color:rgba(13,110,253,.05);
  border-bottom:1px solid rgba(13,110,253,.15);
  position:sticky;
  top:0;
  z-index:1030;
  backdrop-filter:saturate(160%) blur(6px);
}

/* ����� ������� */
.container[b-0a533hclgf]{padding-top:.25rem;padding-bottom:.25rem}
.d-flex[b-0a533hclgf]{justify-content:flex-end}

/* ����� ������ */
.btn[b-0a533hclgf]{font-weight:500; transition:transform .1s ease}
.btn:hover[b-0a533hclgf]{transform:translateY(-1px)}
.btn:active[b-0a533hclgf]{transform:translateY(0)}

.btn-outline-primary[b-0a533hclgf],.btn-outline-danger[b-0a533hclgf]{background-color:#fff;border-width:1px}
.btn-outline-primary:hover[b-0a533hclgf]{color:#fff}
/* _content/XpowerBot/Components/Shared/AiChat.razor.rz.scp.css */
/* AI Chat widget - RTL friendly, clean UI with high contrast */
.ai-chat.card[b-8owqb87xrt] {
    background: rgba(10,12,24,.85);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    color: #fff; /* Ensure high contrast text */
    position: relative; /* for nudge positioning */
}

.ai-chat-header[b-8owqb87xrt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border-bottom: 1px solid var(--border);
    font-weight: 700;
}

.ai-chat-body[b-8owqb87xrt] {
    height: min(64vh, 560px);
    overflow: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}

.msg[b-8owqb87xrt] {
    border-radius: 12px;
    padding: 12px 14px;
    width: fit-content;
    max-width: 100%;
    color: #fff;           /* White text for better contrast */
    font-weight: 600;      /* Slightly bold */
}

.msg-system[b-8owqb87xrt] {
    margin: 8px auto;
    color: #e7e7e7; /* keep readable but lighter */
}

.msg-user[b-8owqb87xrt] {
    margin-left: auto;
    background: rgba(122,92,255,.18);
    border: 1px solid rgba(122,92,255,.35);
}

.msg-assistant[b-8owqb87xrt] {
    background: rgba(0,231,255,.10);
    border: 1px solid rgba(0,231,255,.28);
}

.ai-chat-input[b-8owqb87xrt] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--border);
    background: rgba(255,255,255,.04);
}

.ai-chat-input textarea[b-8owqb87xrt] {
    resize: vertical;
    min-height: 44px;
    max-height: 180px;
}

/* Rate limit warning message */
.rate-limit-warning[b-8owqb87xrt] {
    grid-column: 1 / -1;
    padding: 10px 14px;
    background: rgba(255, 100, 50, 0.15);
    border: 1px solid rgba(255, 100, 50, 0.4);
    border-radius: 10px;
    color: #ffb3a0;
    font-weight: 600;
    text-align: center;
    animation: warning-pulse-b-8owqb87xrt 0.3s ease-in-out;
}

@keyframes warning-pulse-b-8owqb87xrt {
    0% { transform: scale(0.95); opacity: 0; }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}

/* Prose styles for rendered markdown */
.prose[b-8owqb87xrt] {
    line-height: 1.75;
    color: #fff; /* ensure markdown text is white */
}

.prose p[b-8owqb87xrt] { margin: 0 0 10px; }
.prose a[b-8owqb87xrt] { color: var(--link, #5BE1FF); }
.prose code[b-8owqb87xrt] {
    background: rgba(255,255,255,.08);
    padding: 2px 6px;
    border-radius: 8px;
}
.prose pre[b-8owqb87xrt] {
    background: #0b1020;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    overflow: auto;
    position: relative;          /* allow absolute-positioned copy button */
    padding-top: 42px;           /* space for header with copy button */
}
.prose pre code[b-8owqb87xrt] { display: block; }

/* Copy button for code blocks */
.prose pre .copy-btn[b-8owqb87xrt] {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px; /* RTL friendly */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: #eaf9ff;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}
.prose pre .copy-btn:hover[b-8owqb87xrt] { background: rgba(255,255,255,.12); }
.prose pre .copy-btn:active[b-8owqb87xrt] { transform: scale(.98); }

/* Lists */
.prose ul[b-8owqb87xrt], .prose ol[b-8owqb87xrt] { padding-inline-start: 22px; margin: 0 0 10px; }

/* --- Attention nudge styles --- */
.chat-nudge[b-8owqb87xrt] {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px; /* RTL aware */
    display: none;           /* shown via JS */
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 2;
}
.chat-nudge .dot[b-8owqb87xrt] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00e7ff;
    box-shadow: 0 0 0 0 rgba(0,231,255,.8);
    animation: nudge-ping-b-8owqb87xrt 1.8s cubic-bezier(.22,.61,.36,1) infinite;
}
.chat-nudge .pulse[b-8owqb87xrt] {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    inset: 10px auto auto  auto;
    background: rgba(0,231,255,.25);
    filter: blur(6px);
    animation: nudge-pulse-b-8owqb87xrt 2.2s ease-out infinite;
    pointer-events: none;
}
.chat-nudge .bubble[b-8owqb87xrt] {
    direction: rtl;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(10,12,24,.9);
    border: 1px solid rgba(0,231,255,.35);
    color: #eaffff;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0,231,255,.12);
    transform-origin: 100% 0;
    animation: bubble-pop-b-8owqb87xrt .7s cubic-bezier(.2, .8, .2, 1) both;
}
.chat-nudge .bubble .close[b-8owqb87xrt] {
    margin-inline-start: 4px;
    opacity: .7;
}
.chat-nudge .bubble .close:hover[b-8owqb87xrt] { opacity: 1; }

@keyframes nudge-ping-b-8owqb87xrt {
    0%   { box-shadow: 0 0 0 0 rgba(0,231,255,.8); }
    70%  { box-shadow: 0 0 0 12px rgba(0,231,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,231,255,0); }
}
@keyframes nudge-pulse-b-8owqb87xrt {
    0% { transform: scale(1); opacity: .6; }
    60% { transform: scale(2.8); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}
@keyframes bubble-pop-b-8owqb87xrt {
    0% { transform: scale(.6) translateY(-6px); opacity: 0; }
    60% { transform: scale(1.05) translateY(0); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* subtle glow to draw attention until interaction */
#ai-chat.attention[b-8owqb87xrt] {
    box-shadow: 0 0 0 0 rgba(0,231,255,.0), 0 0 32px rgba(0,231,255,.15) inset, 0 0 60px rgba(122,92,255,.12);
    animation: widget-glow-b-8owqb87xrt 2.6s ease-in-out infinite;
}
@keyframes widget-glow-b-8owqb87xrt {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,231,255,.0), 0 0 32px rgba(0,231,255,.08) inset, 0 0 36px rgba(122,92,255,.08); }
    50% { box-shadow: 0 0 0 0 rgba(0,231,255,.0), 0 0 50px rgba(0,231,255,.18) inset, 0 0 72px rgba(122,92,255,.16); }
}