/* Main Layout Styles */

/* Required field marker (dấu * màu đỏ) */
.required-mark {
    color: #dc3545;
    font-weight: bold;
    margin-left: 2px;
}


/* Modern Header Styling */
.modern-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3) !important;
    position: relative !important;
    overflow: visible !important;
    padding: 0 24px !important;
    height: 60px !important;
    z-index: 1000 !important;
}

/* Animated background pattern */
.header-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    background-image:
        linear-gradient(30deg, rgba(255, 255, 255, 0.1) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.1) 87.5%, rgba(255, 255, 255, 0.1)),
        linear-gradient(150deg, rgba(255, 255, 255, 0.1) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.1) 87.5%, rgba(255, 255, 255, 0.1));
    background-size: 80px 140px;
    animation: pattern-move 20s linear infinite;
}

@keyframes pattern-move {
    0% {
        background-position: 0 0, 0 0;
    }
    100% {
        background-position: 80px 140px, 80px 140px;
    }
}

/* Logo section */
.header-logo-section {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 10;
    cursor: pointer;
    padding: 8px 12px 8px 0;
    border-radius: 10px;
    transition: all 0.3s ease;
    margin-left: -12px;
}

.header-logo-section:hover {
    background: rgba(255, 255, 255, 0.15);
}

.header-logo-section:active {
    transform: scale(0.98);
}

/* Logo là dấu hiệu thương hiệu, không phải nút. Để nó nền mờ + bo góc + viền
   giống hệt nút hamburger ngay bên cạnh thì mắt đọc ra hai cái nút song sinh. */
.logo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon svg {
    width: 28px;
    height: 28px;
    fill: white;
}

.header-title {
    color: white !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
}

/* Đồng hồ header — text tick bằng JS thuần (startLiveClock trong globalJs.js), không qua Blazor */
.header-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
    line-height: 1.2;
    color: white;
}

.header-clock-date {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.85;
}

.header-clock-time {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .header-clock {
        display: none;
    }
}

/* Sidebar toggle button */
.modern-header :deep(.rz-sidebar-toggle) {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
    width: 40px !important;
    height: 40px !important;
    transition: all 0.3s ease !important;
}

.modern-header :deep(.rz-sidebar-toggle:hover) {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05) !important;
}

.modern-header :deep(.rz-sidebar-toggle .rzi) {
    color: white !important;
    font-size: 20px !important;
}

/* Profile menu */
.modern-header :deep(.rz-profile-menu),
.modern-header :deep(.rz-profile-menu-button),
.modern-header :deep(.rz-splitbutton) {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.modern-header :deep(.rz-profile-menu .rz-profile-menu-button),
.modern-header :deep(.rz-profile-menu .rz-button),
.modern-header :deep(.rz-splitbutton .rz-button) {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 6px 12px !important;
    color: white !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: auto !important;
    box-shadow: none !important;
}

.modern-header :deep(.rz-profile-menu .rz-profile-menu-button:hover),
.modern-header :deep(.rz-profile-menu .rz-button:hover),
.modern-header :deep(.rz-splitbutton .rz-button:hover) {
    background: rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-1px) !important;
    box-shadow: none !important;
}

.modern-header :deep(.rz-profile-menu .rzi) {
    color: white !important;
}

/* Custom Profile Menu */
.custom-profile-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.custom-profile-menu:hover {
    background: rgba(255, 255, 255, 0.15);
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.user-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: white;
}

.user-role {
    font-size: 11px;
    opacity: 0.9;
    line-height: 1.2;
    color: white;
}

.profile-arrow {
    font-size: 14px;
    margin-left: 4px;
    color: white;
    transition: transform 0.3s ease;
}

.custom-profile-menu:hover .profile-arrow {
    transform: translateY(2px);
}

/* Custom Dropdown Menu */
.custom-dropdown-menu {
    position: fixed;
    top: 65px;
    right: 24px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid #e8ecf1;
    overflow: hidden;
    min-width: 200px;
    z-index: 20000;
    animation: dropdown-slide 0.2s ease-out;
}

@keyframes dropdown-slide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #333;
    font-size: 14px;
}

.dropdown-item:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
}

.dropdown-item i {
    font-size: 18px;
}

.dropdown-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 4px 0;
}

/* Dropdown menu styling */
.modern-header .rz-dropdown-menu {
    z-index: 10000 !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e8ecf1 !important;
    margin-top: 8px !important;
    overflow: hidden !important;
}

.modern-header .rz-dropdown-menu .rz-dropdown-item {
    padding: 12px 20px !important;
    transition: all 0.2s ease !important;
    color: #333 !important;
}

.modern-header .rz-dropdown-menu .rz-dropdown-item:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
}

.modern-header .rz-dropdown-menu .rz-dropdown-item .rzi {
    color: inherit !important;
}

/* User info section */
.user-info-section {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 10;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: pulse-avatar 3s ease-in-out infinite;
}

@keyframes pulse-avatar {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    50% {
        box-shadow: 0 4px 16px rgba(255, 255, 255, 0.4);
    }
}

/* Notification badge */
.notification-icon {
    position: relative;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.notification-icon:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.notification-icon .rzi {
    color: white;
    font-size: 18px;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff4757;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid #667eea;
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Sidebar styling — giao dien trang giong studio */
.modern-sidebar .rz-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e8ecf1 !important;
    padding: 0 !important;
}

.modern-sidebar .rz-panel-menu {
    background: transparent !important;
    padding: 0.5rem 0 !important;
}

.modern-sidebar .rz-navigation-item-wrapper {
    background: transparent !important;
    border-radius: 8px !important;
    margin: 2px 8px !important;
    transition: all 0.25s ease !important;
}

.modern-sidebar .rz-navigation-item-link {
    color: #4a4a5a !important;
    background: transparent !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
}

.modern-sidebar .rz-navigation-item-link .rzi,
.modern-sidebar .rz-navigation-item-link .rz-navigation-item-icon {
    color: inherit !important;
}

.modern-sidebar .rz-navigation-item-wrapper:hover {
    background: rgba(102, 126, 234, 0.10) !important;
    transform: translateX(4px) !important;
}

.modern-sidebar .rz-navigation-item-wrapper:hover .rz-navigation-item-link {
    color: #667eea !important;
}

.modern-sidebar .rz-navigation-item-wrapper-active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.30) !important;
}

.modern-sidebar .rz-navigation-item-wrapper-active .rz-navigation-item-link,
.modern-sidebar .rz-navigation-item-link-active {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.modern-sidebar .rz-navigation-item > .rz-navigation-item-wrapper-active:has(+ ul) {
    background: #f0f2f5 !important;
    box-shadow: none !important;
}

.modern-sidebar .rz-navigation-item > .rz-navigation-item-wrapper-active:has(+ ul) .rz-navigation-item-link {
    color: #667eea !important;
}

.modern-sidebar .rz-navigation-menu {
    background: transparent !important;
}

.modern-sidebar .rz-navigation-menu .rz-navigation-item-link {
    font-size: 0.92em !important;
}

.modern-sidebar .rz-navigation-item,
.modern-sidebar .rz-navigation-item-wrapper,
.modern-sidebar .rz-navigation-item-link {
    border-color: transparent !important;
}

.modern-sidebar .rz-navigation-item-wrapper-active,
.modern-sidebar .rz-navigation-item-wrapper-active .rz-navigation-item-link {
    border-color: transparent !important;
}

/* Xem trước khi chia sẻ link — dựng theo hình thẻ kết quả của Google để chủ sân nhận ra ngay
   đây là "thứ khách sẽ thấy", không phải một ô cấu hình nữa. */
.seo-preview {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: .75rem 1rem;
    background: #fff;
    max-width: 620px;
}

.seo-preview-url {
    font-size: .8rem;
    color: #5f6368;
    margin-bottom: .15rem;
    word-break: break-all;
}

.seo-preview-title {
    font-size: 1.05rem;
    color: #1a0dab;
    line-height: 1.3;
}

.seo-preview-desc {
    font-size: .85rem;
    color: #4d5156;
    line-height: 1.45;
    margin-top: .2rem;
}

/* Thanh hành động của trang giới thiệu: dính đỉnh khi cuộn, để nút Lưu luôn trong tầm bấm.
   Biểu mẫu này dài — cuộn xuống sửa tiện ích rồi phải cuộn ngược lên mới lưu được là một quãng đi
   thừa, và là chỗ chủ sân dễ bỏ dở nhất. */
.mp-actionbar {
    position: sticky;
    /* Khối cuộn (.rz-body) có đệm trên 16px, nên top:0 dừng thanh ở DƯỚI mép đệm và chừa một dải
       16px cho nội dung cuộn lộ ra giữa thanh tím và thanh nút. Kéo ngược đúng phần đệm đó để thanh
       dán sát mép — không phải đoán màu nền để trám. */
    top: -16px;
    z-index: 30;
    box-shadow: 0 6px 18px -12px rgba(16, 24, 40, 0.28);
}