/* ═══════════════════════════════════════════════════════════════════════════════
   Admin Pages — CSS Foundation
   EN: Styles for all admin back-office pages (Dashboard, Store, Staff, etc.)
   VI: Styles cho tất cả trang quản trị (Dashboard, Cửa hàng, Nhân sự, v.v.)
   Based on: pencil-design/src/pages/tPOS/admin/ tokens
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════════════
   1. ADMIN DESIGN TOKENS
   ═════════════════════════════════════════════════════════════════════════ */
:root {
    /* EN: Core background colors / VI: Màu nền chính */
    --admin-bg-page: #0A0A0B;
    --admin-bg-elevated: #1A1A1D;
    --admin-bg-interactive: #2A2A2E;

    /* EN: Text colors / VI: Màu chữ */
    --admin-text-primary: #FFFFFF;
    --admin-text-secondary: #ADADB0;
    --admin-text-tertiary: #8B8B90;

    /* EN: Border colors / VI: Màu viền */
    --admin-border-default: #2A2A2E;
    --admin-border-subtle: #1F1F23;

    /* EN: Brand colors / VI: Màu thương hiệu */
    --admin-orange-primary: #FF5C00;
    --admin-orange-gradient: linear-gradient(135deg, #FF5C00 0%, #FF8A4C 100%);

    /* EN: Status colors / VI: Màu trạng thái */
    --admin-success: #22C55E;
    --admin-warning: #F59E0B;
    --admin-danger: #EF4444;
    --admin-info: #3B82F6;
    --admin-purple: #8B5CF6;
    --admin-pink: #EC4899;

    /* EN: Sidebar dimensions / VI: Kích thước sidebar */
    --admin-sidebar-width: 260px;
    --admin-sidebar-collapsed: 72px;
    --admin-topbar-height: 64px;

    /* EN: Spacing & radius / VI: Khoảng cách & bo góc */
    --admin-radius-sm: 8px;
    --admin-radius-md: 10px;
    --admin-radius-lg: 14px;
    --admin-radius-xl: 16px;
    --admin-content-padding: 28px;
    --admin-gap-sm: 8px;
    --admin-gap-md: 12px;
    --admin-gap-lg: 20px;
    --admin-gap-xl: 24px;

    /* EN: Typography / VI: Font chữ */
    --admin-font: 'Roboto', 'Inter', sans-serif;
}

/* ═════════════════════════════════════════════════════════════════════════
   2. ADMIN LAYOUT — Sidebar + TopBar + Content
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: Full-page admin wrapper / VI: Container toàn trang admin */
.admin-layout {
    display: flex;
    width: 100%;
    min-height: 100vh;
    background-color: var(--admin-bg-page);
    font-family: var(--admin-font);
    color: var(--admin-text-primary);
}

/* ═════════════════════════════════════════
   2a. SIDEBAR
   ═════════════════════════════════════════ */

/* EN: Left sidebar / VI: Sidebar bên trái */
.admin-sidebar {
    width: var(--admin-sidebar-width);
    min-width: var(--admin-sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--admin-bg-elevated);
    border-right: 1px solid var(--admin-border-subtle);
    overflow-y: auto;
    z-index: 50;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* EN: Collapsed sidebar / VI: Sidebar thu gọn */
.admin-sidebar--collapsed {
    width: var(--admin-sidebar-collapsed);
    min-width: var(--admin-sidebar-collapsed);
}

/* EN: Logo area / VI: Vùng logo */
.admin-sidebar__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    border-bottom: 1px solid var(--admin-border-subtle);
}

.admin-sidebar__logo-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: var(--admin-orange-gradient);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 800;
}

.admin-sidebar__logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-sidebar__logo-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--admin-text-primary);
}

.admin-sidebar__logo-sub {
    font-size: 11px;
    color: var(--admin-text-tertiary);
}

/* EN: Navigation area / VI: Vùng điều hướng */
.admin-sidebar__nav {
    flex: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}

/* EN: Navigation section label / VI: Nhãn phần điều hướng */
.admin-nav-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--admin-text-tertiary);
    padding: 16px 12px 8px 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.admin-nav-label:first-child {
    padding-top: 0;
}

/* EN: Navigation item / VI: Mục điều hướng */
.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border-radius: var(--admin-radius-md);
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.admin-nav-item i,
.admin-nav-item svg {
    width: 20px;
    height: 20px;
    color: var(--admin-text-secondary);
    flex-shrink: 0;
}

.admin-nav-item span {
    font-size: 14px;
    font-weight: 500;
    color: var(--admin-text-secondary);
    white-space: nowrap;
}

.admin-nav-item:hover {
    background-color: var(--admin-bg-interactive);
}

.admin-nav-item:hover i,
.admin-nav-item:hover span {
    color: var(--admin-text-primary);
}

/* EN: Active nav item / VI: Mục điều hướng đang chọn */
.admin-nav-item--active {
    background-color: var(--admin-orange-primary);
}

.admin-nav-item--active i,
.admin-nav-item--active svg {
    color: #FFFFFF;
}

.admin-nav-item--active span {
    color: #FFFFFF;
    font-weight: 600;
}

.admin-nav-item--active:hover {
    background-color: var(--admin-orange-primary);
    opacity: 0.9;
}

/* EN: Sub-nav item (indented) / VI: Mục con (thụt vào) */
.admin-nav-item--sub {
    padding-left: 36px;
}

.admin-nav-item--sub i,
.admin-nav-item--sub svg {
    width: 18px;
    height: 18px;
    color: var(--admin-text-tertiary);
}

.admin-nav-item--sub span {
    font-size: 13px;
    color: var(--admin-text-tertiary);
}

/* EN: Back nav item (← Quay lại Admin) / VI: Mục quay lại Admin */
.admin-nav-item--back {
    color: var(--admin-text-tertiary);
    border-bottom: 1px solid var(--admin-border-subtle);
    border-radius: 0;
    padding-bottom: 12px;
}

.admin-nav-item--back:hover {
    background: transparent;
}

.admin-nav-item--back i,
.admin-nav-item--back svg {
    width: 16px;
    height: 16px;
    color: var(--admin-text-tertiary);
}

.admin-nav-item--back span {
    font-size: 13px;
    color: var(--admin-text-tertiary);
}

/* EN: Store card as clickable link / VI: Thẻ cửa hàng là link bấm được */
a.admin-store-card {
    transition: all 0.2s ease;
}

a.admin-store-card:hover {
    background-color: rgba(255, 92, 0, 0.08);
    border-color: var(--admin-orange-primary);
}

/* EN: Quick action row / VI: Hàng thao tác nhanh */
.admin-quick-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--admin-radius-md);
    background: var(--admin-bg-interactive);
    text-decoration: none;
    color: var(--admin-text-primary);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.admin-quick-action:hover {
    background-color: rgba(255, 92, 0, 0.08);
    color: var(--admin-orange-primary);
}

/* EN: Nav badge / VI: Huy hiệu điều hướng */
.admin-nav-badge {
    width: 22px;
    height: 22px;
    border-radius: 100px;
    background-color: var(--admin-bg-interactive);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--admin-text-tertiary);
    margin-left: auto;
}

/* EN: Sidebar user profile / VI: Profile người dùng sidebar */
.admin-sidebar__user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--admin-border-subtle);
}

.admin-user-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 100px;
    background-color: var(--admin-info);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
}

.admin-user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-user-role {
    font-size: 11px;
    color: var(--admin-text-tertiary);
}

.admin-sidebar__user button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--admin-text-tertiary);
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

.admin-sidebar__user button:hover {
    color: var(--admin-text-primary);
}

/* ═════════════════════════════════════════
   2b. MAIN AREA (TopBar + Content)
   ═════════════════════════════════════════ */

/* EN: Main content area / VI: Vùng nội dung chính */
.admin-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* EN: Top bar / VI: Thanh trên */
.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background-color: var(--admin-bg-elevated);
    border-bottom: 1px solid var(--admin-border-subtle);
    min-height: var(--admin-topbar-height);
}

.admin-topbar__left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-topbar__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--admin-text-primary);
    margin: 0;
}

.admin-topbar__subtitle {
    font-size: 13px;
    color: var(--admin-text-tertiary);
    margin: 0;
}

.admin-topbar__right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* EN: Search box in topbar / VI: Ô tìm kiếm */
.admin-search {
    width: 260px;
    height: 40px;
    background-color: var(--admin-bg-interactive);
    border-radius: var(--admin-radius-md);
    border: none;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--admin-text-primary);
    font-size: 14px;
    font-family: var(--admin-font);
}

.admin-search input::placeholder {
    color: var(--admin-text-tertiary);
}

.admin-search i {
    width: 18px;
    height: 18px;
    color: var(--admin-text-tertiary);
}

/* EN: Icon button (notifications, etc.) / VI: Nút icon */
.admin-icon-btn {
    width: 40px;
    height: 40px;
    background-color: var(--admin-bg-interactive);
    border-radius: var(--admin-radius-md);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease;
}

.admin-icon-btn i {
    width: 20px;
    height: 20px;
    color: var(--admin-text-secondary);
}

.admin-icon-btn:hover {
    background-color: var(--admin-border-default);
}

/* EN: Notification dot / VI: Chấm thông báo */
.admin-icon-btn__dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background-color: var(--admin-danger);
    border-radius: 100px;
}

/* EN: Primary CTA button / VI: Nút CTA chính */
.admin-btn-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: var(--admin-orange-primary);
    color: #FFFFFF;
    border: none;
    border-radius: var(--admin-radius-md);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--admin-font);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.admin-btn-primary i {
    width: 18px;
    height: 18px;
}

.admin-btn-primary:hover {
    background-color: #E05200;
    transform: translateY(-1px);
}

/* EN: Content area / VI: Vùng nội dung */
.admin-content {
    flex: 1;
    padding: var(--admin-content-padding);
    overflow-y: auto;
}

/* ═════════════════════════════════════════════════════════════════════════
   3. SHARED ADMIN COMPONENTS
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: KPI stat card / VI: Thẻ KPI thống kê */
.admin-kpi-row {
    display: flex;
    gap: var(--admin-gap-lg);
    width: 100%;
}

.admin-kpi-card {
    flex: 1;
    background-color: var(--admin-bg-elevated);
    border-radius: var(--admin-radius-xl);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-kpi-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-kpi-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-kpi-card__icon i {
    width: 22px;
    height: 22px;
}

.admin-kpi-card__badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.admin-kpi-card__badge i {
    width: 12px;
    height: 12px;
}

/* EN: KPI badge variants / VI: Biến thể badge KPI */
.admin-kpi-card__badge--up {
    background-color: rgba(34, 197, 94, 0.125);
    color: var(--admin-success);
}

.admin-kpi-card__badge--down {
    background-color: rgba(239, 68, 68, 0.125);
    color: var(--admin-danger);
}

.admin-kpi-card__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--admin-text-primary);
}

.admin-kpi-card__label {
    font-size: 13px;
    color: var(--admin-text-tertiary);
}

/* EN: Stat card (compact KPI) / VI: Thẻ thống kê (KPI gọn) */
.admin-stat-card {
    background: var(--admin-bg-elevated);
    border-radius: var(--admin-radius-xl, 16px);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--admin-border-subtle);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-stat-card:hover {
    border-color: rgba(255, 92, 0, 0.25);
    box-shadow: 0 2px 12px rgba(255, 92, 0, 0.06);
}
.admin-stat-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.admin-stat-card__icon i { width: 20px; height: 20px; }
.admin-stat-card__content { display: flex; flex-direction: column; gap: 2px; }
.admin-stat-card__value { font-size: 20px; font-weight: 700; color: var(--admin-text-primary); line-height: 1.2; }
.admin-stat-card__label { font-size: 12px; color: var(--admin-text-tertiary); font-weight: 500; }

/* EN: Panel/card with header / VI: Panel/thẻ có header */
.admin-panel {
    background-color: var(--admin-bg-elevated);
    border-radius: var(--admin-radius-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--admin-border-subtle);
}

.admin-panel__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--admin-text-primary);
    margin: 0;
}

.admin-panel__title i {
    width: 20px;
    height: 20px;
}

.admin-panel__action {
    font-size: 12px;
    font-weight: 600;
    color: var(--admin-orange-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.admin-panel__action:hover {
    opacity: 0.8;
}

.admin-panel__body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}

/* EN: Alert items / VI: Mục cảnh báo */
.admin-alert-list {
    display: flex;
    flex-direction: column;
    gap: var(--admin-gap-sm);
}

.admin-alert-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--admin-radius-md);
}

.admin-alert-item--danger {
    background-color: rgba(239, 68, 68, 0.08);
}

.admin-alert-item--warning {
    background-color: rgba(245, 158, 11, 0.08);
}

.admin-alert-item--info {
    background-color: rgba(59, 130, 246, 0.08);
}

.admin-alert-item i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.admin-alert-item__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-alert-item__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--admin-text-primary);
}

.admin-alert-item__sub {
    font-size: 10px;
    color: var(--admin-text-tertiary);
}

/* EN: Activity feed / VI: Feed hoạt động */
.admin-activity-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-activity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

.admin-activity-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 100px;
}

.admin-activity-item__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-activity-item__title {
    font-size: 12px;
    color: var(--admin-text-primary);
}

.admin-activity-item__time {
    font-size: 10px;
    color: var(--admin-text-tertiary);
}

/* EN: Store card / VI: Thẻ cửa hàng */
.admin-store-card {
    background-color: var(--admin-bg-interactive);
    border-radius: var(--admin-radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-store-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-store-card__info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-store-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--admin-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-store-card__avatar i {
    width: 20px;
    height: 20px;
}

.admin-store-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--admin-text-primary);
}

.admin-store-card__type {
    font-size: 11px;
    color: var(--admin-text-tertiary);
}

/* EN: Status badge / VI: Badge trạng thái */
.admin-status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.admin-status-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 100px;
}

.admin-status-badge--online {
    background-color: rgba(34, 197, 94, 0.125);
    color: var(--admin-success);
}

.admin-status-badge--online .admin-status-badge__dot {
    background-color: var(--admin-success);
}

.admin-status-badge--setup {
    background-color: rgba(245, 158, 11, 0.125);
    color: var(--admin-warning);
}

.admin-status-badge--setup .admin-status-badge__dot {
    background-color: var(--admin-warning);
}

.admin-status-badge--offline {
    background-color: rgba(239, 68, 68, 0.125);
    color: var(--admin-danger);
}

.admin-status-badge--offline .admin-status-badge__dot {
    background-color: var(--admin-danger);
}

/* EN: Store stats row / VI: Hàng thống kê cửa hàng */
.admin-store-card__stats {
    display: flex;
    gap: 16px;
}

.admin-store-stat {
    flex: 1;
    background-color: var(--admin-bg-page);
    border-radius: var(--admin-radius-sm);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
}

.admin-store-stat__value {
    font-size: 14px;
    font-weight: 700;
    color: var(--admin-text-primary);
}

.admin-store-stat__label {
    font-size: 10px;
    color: var(--admin-text-tertiary);
}

/* EN: CTA button in store card / VI: Nút CTA trong thẻ cửa hàng */
.admin-store-card__cta {
    width: 100%;
    height: 36px;
    border-radius: var(--admin-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.admin-store-card__cta--warning {
    background-color: rgba(245, 158, 11, 0.125);
    color: var(--admin-warning);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.admin-store-card__cta--warning:hover {
    background-color: rgba(245, 158, 11, 0.2);
}

/* EN: Label/count badge / VI: Badge số */
.admin-badge-count {
    width: 22px;
    height: 22px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.admin-badge-count--danger {
    background-color: var(--admin-danger);
    color: #FFFFFF;
}

/* EN: General secondary button / VI: Nút phụ chung */
.admin-btn-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: var(--admin-bg-interactive);
    color: var(--admin-text-secondary);
    border: 1px solid var(--admin-border-default);
    border-radius: var(--admin-radius-md);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--admin-font);
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-btn-secondary:hover {
    background-color: var(--admin-border-default);
    color: var(--admin-text-primary);
}

/* ═════════════════════════════════════════════════════════════════════════
   4. DATA TABLE COMPONENTS
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: Admin data table / VI: Bảng dữ liệu admin */
.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--admin-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--admin-border-subtle);
}

.admin-table td {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--admin-text-primary);
    border-bottom: 1px solid var(--admin-border-subtle);
}

.admin-table tr:hover td {
    background-color: var(--admin-bg-interactive);
}

/* EN: Page header / VI: Header trang */
.admin-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--admin-gap-xl);
}

.admin-page-header__left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-page-header__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--admin-text-primary);
    margin: 0;
}

.admin-page-header__subtitle {
    font-size: 13px;
    color: var(--admin-text-tertiary);
    margin: 0;
}

.admin-page-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ═════════════════════════════════════════════════════════════════════════
   5. RESPONSIVE (Tablet / Mobile)
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .admin-sidebar {
        position: fixed;
        left: -260px;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 200;
    }

    .admin-sidebar--open {
        left: 0;
    }

    /* EN: Mobile sidebar overlay / VI: Overlay sidebar trên mobile */
    .admin-sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 199;
        backdrop-filter: blur(2px);
    }

    /* EN: Mobile hamburger button / VI: Nút hamburger trên mobile */
    .admin-topbar__menu-btn {
        display: flex !important;
    }

    .admin-topbar {
        padding: 12px 20px;
    }

    .admin-content {
        padding: 20px;
    }

    .admin-kpi-row {
        flex-wrap: wrap;
    }

    .admin-kpi-card {
        min-width: calc(50% - 10px);
    }

    /* EN: Stat card grid responsive / VI: Lưới stat card responsive */
    .admin-stat-card {
        min-width: calc(50% - 8px);
    }
    .admin-stat-card__value { font-size: 18px; }
    .admin-stat-card__icon { width: 36px; height: 36px; }

    /* EN: Tables scroll horizontally / VI: Bảng scroll ngang */
    .admin-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .admin-kpi-card {
        min-width: 100%;
    }

    .admin-stat-card {
        min-width: 100%;
    }

    .admin-content {
        padding: 16px;
    }

    .admin-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .admin-topbar__title {
        font-size: 18px;
    }

    .admin-search {
        width: 100%;
    }

    .admin-store-card__stats {
        flex-wrap: wrap;
    }

    .admin-store-stat {
        min-width: calc(50% - 8px);
    }

    .admin-btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   6. TABS
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: Tab bar container / VI: Thanh tab */
.admin-tabs {
    display: flex;
    border-bottom: 1px solid var(--admin-border-subtle);
    background-color: var(--admin-bg-elevated);
    padding: 0 32px;
    gap: 0;
}

/* EN: Individual tab / VI: Tab đơn */
.admin-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--admin-font);
    color: var(--admin-text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.admin-tab i {
    width: 16px;
    height: 16px;
}

.admin-tab:hover {
    color: var(--admin-text-primary);
}

.admin-tab--active {
    color: var(--admin-orange-primary);
    font-weight: 600;
    border-bottom-color: var(--admin-orange-primary);
}

/* EN: Tab badge / VI: Badge trong tab */
.admin-tab__badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background-color: var(--admin-bg-interactive);
    color: var(--admin-text-tertiary);
}

.admin-tab__badge--active {
    background-color: var(--admin-orange-primary);
    color: #FFFFFF;
}

/* ═════════════════════════════════════════════════════════════════════════
   7. STORE LIST CARD (full-width row card)
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: Store list card / VI: Thẻ cửa hàng dạng row */
.admin-store-list-card {
    width: 100%;
    background-color: var(--admin-bg-elevated);
    border-radius: var(--admin-radius-xl);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-store-list-card:hover {
    background-color: var(--admin-bg-interactive);
    transform: translateY(-1px);
}

.admin-store-list-card--paused {
    opacity: 0.75;
}

.admin-store-list-card__left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.admin-store-list-card__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-store-list-card__stats {
    display: flex;
    gap: 32px;
    align-items: center;
}

.admin-store-list-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 24px;
}

/* EN: Paused status badge / VI: Badge trạng thái tạm dừng */
.admin-status-badge--paused {
    background-color: rgba(245, 158, 11, 0.125);
    color: var(--admin-warning);
}

.admin-status-badge--paused .admin-status-badge__dot {
    background-color: var(--admin-warning);
}

/* ═════════════════════════════════════════════════════════════════════════
   8. FORM COMPONENTS (input, label, group, textarea, select)
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: Form group / VI: Nhóm form */
.admin-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* EN: Form label / VI: Nhãn form */
.admin-form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--admin-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* EN: Form input / VI: Input form */
.admin-form-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background-color: var(--admin-bg-interactive);
    color: var(--admin-text-primary);
    border: 1px solid var(--admin-border-default);
    border-radius: var(--admin-radius-md);
    font-size: 14px;
    font-family: var(--admin-font);
    outline: none;
    transition: border-color 0.2s ease;
}

.admin-form-input:focus {
    border-color: var(--admin-orange-primary);
}

.admin-form-input::placeholder {
    color: var(--admin-text-tertiary);
}

/* EN: Textarea variant / VI: Dạng textarea */
textarea.admin-form-input {
    height: auto;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.5;
}

/* EN: Select variant / VI: Dạng select */
select.admin-form-input {
    appearance: none;
    cursor: pointer;
}

/* ═════════════════════════════════════════════════════════════════════════
   9. TYPE SELECTOR CARD (StoreCreate vertical type picker)
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: Type selector card / VI: Thẻ chọn loại hình */
.admin-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background-color: var(--admin-bg-interactive);
    border: 2px solid var(--admin-border-default);
    border-radius: var(--admin-radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    color: var(--admin-text-primary);
    font-family: var(--admin-font);
}

.admin-type-card:hover {
    border-color: var(--admin-text-tertiary);
    background-color: var(--admin-border-default);
}

.admin-type-card--active {
    border-color: var(--admin-orange-primary);
    background-color: rgba(255, 92, 0, 0.08);
}

/* ═════════════════════════════════════════════════════════════════════════
   10. DAY CHIP (StoreCreate days of week)
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: Day chip toggle / VI: Chip chọn ngày */
.admin-day-chip {
    width: 42px;
    height: 38px;
    border-radius: 8px;
    background-color: var(--admin-bg-interactive);
    border: 1px solid var(--admin-border-default);
    color: var(--admin-text-secondary);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--admin-font);
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-day-chip:hover {
    border-color: var(--admin-text-tertiary);
}

.admin-day-chip--active {
    background-color: var(--admin-orange-primary);
    border-color: var(--admin-orange-primary);
    color: #FFFFFF;
}

/* ═════════════════════════════════════════════════════════════════════════
   11. STAFF CARD (grid item)
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: Staff grid card / VI: Thẻ nhân viên dạng grid */
.admin-staff-card {
    background-color: var(--admin-bg-elevated);
    border-radius: var(--admin-radius-xl);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-staff-card:hover {
    background-color: var(--admin-bg-interactive);
    transform: translateY(-1px);
}

.admin-staff-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* ═════════════════════════════════════════════════════════════════════════
   12. USER AVATAR
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: User avatar circle / VI: Avatar tròn */
.admin-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--admin-orange-primary);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--admin-font);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════════════════════
   13. SCHEDULE GRID (weekly view)
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: Schedule grid / VI: Lưới lịch làm việc */
.admin-schedule-grid {
    display: flex;
    flex-direction: column;
    min-width: 900px;
}

.admin-schedule-header {
    display: flex;
    border-bottom: 1px solid var(--admin-border-subtle);
}

.admin-schedule-header__cell {
    flex: 1;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 600;
    background-color: var(--admin-bg-elevated);
}

.admin-schedule-header__cell:first-child {
    flex: 0 0 160px;
    align-items: flex-start;
    padding-left: 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--admin-text-tertiary);
    text-transform: uppercase;
    justify-content: center;
}

.admin-schedule-row {
    display: flex;
    border-bottom: 1px solid var(--admin-border-subtle);
}

.admin-schedule-row__name {
    flex: 0 0 160px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
}

.admin-schedule-cell {
    flex: 1;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* EN: Shift time chip / VI: Chip thời gian ca */
.admin-shift-chip {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* ═════════════════════════════════════════════════════════════════════════
   14. PRODUCT CARD (catalog grid)
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: Product catalog card / VI: Thẻ sản phẩm dạng grid */
.admin-product-card {
    background-color: var(--admin-bg-elevated);
    border-radius: var(--admin-radius-xl);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.admin-product-card__image {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-product-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ═════════════════════════════════════════════════════════════════════════
   15. ROLE CARD (role-permissions sidebar)
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: Role selector card / VI: Thẻ chọn vai trò */
.admin-role-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background-color: var(--admin-bg-elevated);
    border: 1px solid var(--admin-border-subtle);
    border-radius: var(--admin-radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--admin-font);
    color: var(--admin-text-primary);
}

.admin-role-card:hover {
    background-color: var(--admin-bg-interactive);
}

.admin-role-card--active {
    border-color: var(--admin-orange-primary);
    background-color: rgba(255, 92, 0, 0.06);
}

/* ═════════════════════════════════════════════════════════════════════════
   16. STATUS BADGE OFFLINE
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: Offline status badge / VI: Badge trạng thái offline */
.admin-status-badge--offline {
    background-color: rgba(239, 68, 68, 0.125);
    color: var(--admin-danger);
}

.admin-status-badge--offline .admin-status-badge__dot {
    background-color: var(--admin-danger);
}

/* ═════════════════════════════════════════════════════════════════════════
   17. MOBILE BAR (hamburger toggle header — visible ≤ 1024px only)
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: Hidden on desktop / VI: Ẩn trên desktop */
.admin-mobile-bar {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background-color: var(--admin-bg-elevated);
    border-bottom: 1px solid var(--admin-border-subtle);
}

.admin-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--admin-radius-md);
    background: transparent;
    border: 1px solid var(--admin-border-default);
    color: var(--admin-text-primary);
    cursor: pointer;
    transition: background 0.2s ease;
}

.admin-mobile-toggle:hover {
    background-color: var(--admin-bg-interactive);
}

.admin-mobile-toggle i {
    width: 20px;
    height: 20px;
}

.admin-mobile-bar__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--admin-text-primary);
}

@media (max-width: 1024px) {
    .admin-mobile-bar {
        display: flex;
    }
}