/**
 * ==========================================
 * ADMIN DASHBOARD STYLES
 * ==========================================
 * CSS cho trang quản trị Admin
 * Part 12A: Base styles
 */

/* ==========================================
   CSS VARIABLES
   ========================================== */
:root {
  /* Colors - Primary */
  --primary: #6366f1;
  --primary-light: #818cf8;
  --primary-dark: #4f46e5;
  --primary-bg: #eef2ff;

  /* Colors - Secondary */
  --secondary: #64748b;
  --secondary-light: #94a3b8;
  --secondary-dark: #475569;

  /* Colors - Status */
  --success: #10b981;
  --success-bg: #d1fae5;
  --warning: #f59e0b;
  --warning-bg: #fef3c7;
  --danger: #ef4444;
  --danger-bg: #fee2e2;
  --info: #0ea5e9;
  --info-bg: #e0f2fe;

  /* Colors - Platform */
  --shopee: #ee4d2d;
  --lazada: #0f146d;
  --tiktok: #000000;
  --facebook: #1877f2;
  --youtube: #ff0000;

  /* Colors - Gray Scale */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --white: #ffffff;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition: 200ms ease;
  --transition-slow: 300ms ease;

  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 70px;
  --header-height: 60px;

  /* Font */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==========================================
   RESET & BASE
   ========================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  background: var(--gray-100);
  color: var(--gray-800);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

.hidden {
  display: none !important;
}

/* ==========================================
   LOGIN PAGE
   ========================================== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: var(--spacing-lg);
}

.login-container {
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-2xl);
}

.login-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.login-logo {
  width: 80px;
  height: 80px;
  background: var(--primary-bg);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
}

.login-logo i {
  font-size: 2.5rem;
  color: var(--primary);
}

.login-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--spacing-xs);
}

.login-subtitle {
  color: var(--gray-500);
  font-size: 0.875rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon i {
  position: absolute;
  left: var(--spacing-md);
  color: var(--gray-400);
  pointer-events: none;
}

.input-with-icon input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  padding-left: 2.75rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  transition: var(--transition);
}

/* Add extra padding-right when password toggle button exists */
.input-with-icon:has(.password-toggle) input {
  padding-right: 2.75rem;
}

.input-with-icon input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  background: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

.password-toggle:hover {
  color: var(--gray-700);
  background: var(--gray-100);
}

.remember-me {
  flex-direction: row;
  align-items: center;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--gray-600);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.login-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--danger-bg);
  border-radius: var(--radius);
  color: var(--danger);
  font-size: 0.875rem;
}

.login-divider {
  display: flex;
  align-items: center;
  margin: var(--spacing-lg) 0;
  color: var(--gray-400);
  font-size: 0.8rem;
}
.login-divider::before, .login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}
.login-divider span {
  padding: 0 var(--spacing-md);
}

.btn-google-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  color: var(--gray-700);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
}
.btn-google-login:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.btn-google-login:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.google-btn-icon {
  width: 18px;
  height: 18px;
}

.login-footer {
  margin-top: var(--spacing-xl);
  text-align: center;
}

.back-link {
  color: var(--gray-500);
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  transition: var(--transition);
}

.back-link:hover {
  color: var(--primary);
}

/* ==========================================
   BUTTONS
   ========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  transition: var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-outline {
  background: var(--white);
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
}

.btn-outline:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.btn-danger {
  background: var(--danger);
  color: var(--white);
}

.btn-danger:hover {
  background: #dc2626;
}

.btn-success {
  background: var(--success);
  color: var(--white);
}

.btn-success:hover {
  background: #059669;
}

.btn-block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================
   ADMIN WRAPPER
   ========================================== */
.admin-wrapper {
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
}

/* ==========================================
   SIDEBAR
   ========================================== */
.admin-sidebar {
  width: var(--sidebar-width);
  background: var(--gray-900);
  color: var(--white);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: var(--transition-slow);
}

.admin-sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.admin-sidebar.collapsed .logo-text,
.admin-sidebar.collapsed .nav-section-title,
.admin-sidebar.collapsed .nav-link span,
.admin-sidebar.collapsed .nav-badge,
.admin-sidebar.collapsed .user-info {
  display: none;
}

.admin-sidebar.collapsed .nav-link {
  justify-content: center;
  padding: var(--spacing-md);
}

.admin-sidebar.collapsed .sidebar-user {
  justify-content: center;
}

/* ==========================================
   COLLAPSED SIDEBAR - CHỈ DESKTOP (>1024px)
   Tooltip, header, footer khi sidebar rút gọn
   ========================================== */
@media (min-width: 1025px) {
  /* Header: chỉ hiện logo, ẩn toggle khỏi header flow */
  .admin-sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-sm);
  }

  /* Logo chỉ hiện icon */
  .admin-sidebar.collapsed .sidebar-logo {
    justify-content: center;
  }

  /* ==========================================
     NÚT TOGGLE FLOATING - giữa cạnh phải sidebar
     ========================================== */
  .admin-sidebar.collapsed .sidebar-toggle {
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-size: 0.7rem;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
    z-index: 101;
    border: 2px solid var(--white);
    transition: all 0.2s ease;
  }

  .admin-sidebar.collapsed .sidebar-toggle:hover {
    background: #4f46e5;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.5);
    transform: translateY(-50%) scale(1.15);
  }

  /* Nút toggle khi sidebar MỞ RỘNG - cũng đẹp hơn */
  .admin-sidebar:not(.collapsed) .sidebar-toggle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.7rem;
  }

  .admin-sidebar:not(.collapsed) .sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
  }

  /* Sidebar-nav: overflow visible để tooltip không bị cắt */
  .admin-sidebar.collapsed .sidebar-nav {
    overflow: visible;
  }

  /* Nav-link: vị trí relative cho tooltip */
  .admin-sidebar.collapsed .nav-link {
    position: relative;
    overflow: visible;
  }

  /* Tooltip: CHỈ cho text span, KHÔNG cho .nav-badge */
  .admin-sidebar.collapsed .nav-link:hover span:not(.nav-badge) {
    display: block !important;
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--gray-800);
    color: var(--white);
    padding: 6px 12px;
    border-radius: var(--radius);
    white-space: nowrap;
    z-index: 200;
    box-shadow: var(--shadow-lg);
    font-size: 0.8125rem;
    pointer-events: none;
  }

  /* Mũi tên tooltip */
  .admin-sidebar.collapsed .nav-link:hover span:not(.nav-badge)::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: var(--gray-800);
  }

  /* Ẩn nút đăng xuất trong sidebar rút gọn */
  .admin-sidebar.collapsed .logout-btn {
    display: none;
  }

  /* Footer gọn gàng */
  .admin-sidebar.collapsed .sidebar-footer {
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-sm);
  }
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-700);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.sidebar-logo i {
  font-size: 1.5rem;
  color: var(--primary-light);
}

.logo-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--white);
}

.sidebar-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-800);
  border-radius: var(--radius);
  color: var(--gray-400);
  transition: var(--transition);
}

.sidebar-toggle:hover {
  background: var(--gray-700);
  color: var(--white);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md) 0;
}

.nav-section {
  margin-bottom: var(--spacing-md);
}

.nav-section-title {
  display: block;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
}

.nav-list {
  list-style: none;
}

.nav-item {
  margin: 2px 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  margin: 0 var(--spacing-sm);
  border-radius: var(--radius);
  color: var(--gray-400);
  font-size: 0.875rem;
  transition: var(--transition);
}

.nav-link:hover {
  background: var(--gray-800);
  color: var(--white);
}

.nav-link.active {
  background: var(--primary);
  color: var(--white);
}

.nav-link i {
  width: 20px;
  text-align: center;
}

.nav-badge {
  margin-left: auto;
  padding: 2px 8px;
  background: var(--danger);
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
}

.sidebar-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.user-avatar {
  width: 36px;
  height: 36px;
  background: var(--gray-700);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

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

.user-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--white);
}

.user-role {
  font-size: 0.6875rem;
  color: var(--gray-500);
}

.logout-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-800);
  border-radius: var(--radius);
  color: var(--gray-400);
  transition: var(--transition);
}

.logout-btn:hover {
  background: var(--danger);
  color: var(--white);
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

/* ==========================================
   MAIN CONTENT
   ========================================== */
.admin-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  min-width: 0;
  overflow-x: hidden;
  max-width: calc(100vw - var(--sidebar-width));
  transition: var(--transition-slow);
}

.admin-sidebar.collapsed ~ .admin-main {
  margin-left: var(--sidebar-collapsed-width);
  max-width: calc(100vw - var(--sidebar-collapsed-width));
}

/* ==========================================
   HEADER
   ========================================== */
.admin-header {
  height: var(--header-height);
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-lg);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.mobile-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border-radius: var(--radius);
  color: var(--gray-600);
}

.header-logo {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.header-logo img {
  max-height: 32px;
  max-width: 150px;
  object-fit: contain;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
}

.breadcrumb-item {
  color: var(--gray-500);
}

.breadcrumb-item.active {
  color: var(--gray-800);
  font-weight: 500;
}

.breadcrumb-separator {
  color: var(--gray-300);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.brand-selector {
  min-width: 200px;
}

.brand-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 0.875rem;
  color: var(--gray-700);
  cursor: pointer;
}

.brand-select:focus {
  outline: none;
  border-color: var(--primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.header-action-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border-radius: var(--radius);
  color: var(--gray-600);
  position: relative;
  transition: var(--transition);
}

.header-action-btn:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

.notification-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--danger);
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================
   ADMIN CONTENT
   ========================================== */
.admin-content {
  padding: var(--spacing-lg);
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  /* clip giữ layout không tràn nhưng cho phép child (table-wrapper) tự cuộn */
}

.page-content {
  display: none;
  min-width: 0;
  max-width: 100%;
}

.page-content.active {
  display: block;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-900);
}

.page-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* ==========================================
   DASHBOARD DATE FILTER
   ========================================== */
.dashboard-date-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding: 12px 16px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}

.date-filter-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.date-filter-presets {
  display: flex;
  gap: 6px;
}

.date-preset {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--text-secondary);
  font-size: 0.825rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.date-preset:hover {
  border-color: var(--primary-light);
  color: var(--primary);
  background: var(--primary-bg);
}

.date-preset.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.date-preset i {
  font-size: 0.75rem;
}

.date-filter-custom {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-input {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.825rem;
  color: var(--text-primary);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s;
}

.date-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.date-separator {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.date-filter-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

#dateFilterApply {
  padding: 5px 12px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================
   STATS CARDS
   ========================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.stat-card {
  background: var(--white);
  border-radius: 14px;
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--gray-100);
  transition: all 0.2s ease;
  position: relative;
}

.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

.stat-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.stat-icon.live {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #dc2626;
}

.stat-icon.upcoming {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #d97706;
}

.stat-icon.hosts {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #2563eb;
}

.stat-icon.pics {
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  color: #be185d;
}

.stat-icon.sessions {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  color: #4f46e5;
}

.stat-icon.total-hours {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #b45309;
}

.stat-icon.brands {
  background: linear-gradient(135deg, var(--primary-bg), #c4b5fd);
  color: var(--primary);
}

.stat-icon.rooms {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #059669;
}

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

.stat-label {
  font-size: 0.8rem;
  color: var(--gray-500);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.stat-value {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.stat-sub-label {
  font-size: 0.68rem;
  color: var(--gray-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.stat-trend {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.75rem;
  font-weight: 500;
  flex-shrink: 0;
}

.stat-trend.up {
  color: var(--success);
}

.stat-trend.down {
  color: var(--danger);
}

/* Chart notes */
.chart-note {
  margin: 0;
  padding: 0 16px 4px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
  opacity: 0.8;
}

/* ==========================================
   DETAIL MODAL (Hosts & Rooms)
   ========================================== */
.detail-btn {
  padding: 0.35rem 0.75rem !important;
  font-size: 0.75rem !important;
  border-radius: 6px;
  gap: 0.3rem;
}

/* Detail modal: z-index cao hơn các modal khác */
#detailModal.active {
  z-index: 9999;
}

/* Confirm modal: luôn trên cùng (trên cả detail modal) */
#confirmModal.active {
  z-index: 99999;
}

#detailModal > .modal-content {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  animation: detailSlideUp 0.25s ease;
}

@keyframes detailSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

#detailModal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

#detailModal .modal-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
}

#detailModal .modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-400);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  border-radius: 6px;
  transition: all 0.15s;
}

#detailModal .modal-close:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

#detailModal .modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

/* Chart container inside detail modal */
.detail-chart-container {
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--gray-50);
  border-radius: 8px;
  position: relative;
  height: 250px;
}

.detail-chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

.detail-date-range {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-date-range i {
  color: var(--primary);
}

.detail-table-wrapper {
  overflow-x: auto;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.detail-table thead th {
  background: var(--gray-50);
  color: var(--gray-600);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 2px solid var(--gray-200);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.detail-table thead th.text-right {
  text-align: right;
}

.detail-table tbody tr {
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.1s;
}

.detail-table tbody tr:hover {
  background: var(--gray-50);
}

.detail-table tbody td {
  padding: 0.7rem 1rem;
  color: var(--gray-700);
}

.detail-table tbody td.text-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.detail-table tbody td.rank {
  font-weight: 700;
  color: var(--gray-400);
  width: 40px;
}

.detail-table tbody tr:nth-child(1) td.rank { color: #f59e0b; }
.detail-table tbody tr:nth-child(2) td.rank { color: #94a3b8; }
.detail-table tbody tr:nth-child(3) td.rank { color: #b45309; }

.detail-table tbody td .host-name,
.detail-table tbody td .room-name {
  font-weight: 500;
  color: var(--gray-900);
}

.detail-table tbody td .platform-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: var(--primary-bg);
  color: var(--primary);
  margin-left: 0.5rem;
}

.detail-summary {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  background: var(--gray-50);
  border-radius: 8px;
  display: flex;
  gap: 2rem;
  font-size: 0.85rem;
  color: var(--gray-600);
}

.detail-summary strong {
  color: var(--gray-900);
}

@media (max-width: 768px) {
  #detailModal .modal-body { padding: 1rem; }
  .detail-summary { flex-direction: column; gap: 0.5rem; }
  .detail-btn span { display: none; }
  .detail-chart-container { height: 200px; }
}

/* ==========================================
   DASHBOARD WIDGETS
   ========================================== */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--spacing-lg);
}

.dashboard-widget {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.widget-lg {
  grid-column: span 8;
}

.widget-md {
  grid-column: span 4;
}

.widget-sm {
  grid-column: span 4;
}

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--gray-100);
}

.widget-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.widget-title i {
  color: var(--gray-500);
}

.widget-link {
  font-size: 0.8125rem;
  color: var(--primary);
  font-weight: 500;
}

.widget-link:hover {
  text-decoration: underline;
}

.widget-body {
  padding: var(--spacing-lg);
}

/* Today Schedule List */
.today-schedule-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-height: 400px;
  overflow-y: auto;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  border-radius: var(--radius);
  background: var(--gray-50);
  transition: var(--transition);
}

.schedule-item:hover {
  background: var(--gray-100);
}

.schedule-item.live {
  background: var(--danger-bg);
}

.schedule-time {
  min-width: 100px;
  font-weight: 600;
  color: var(--gray-700);
}

.schedule-host {
  flex: 1;
  font-weight: 500;
}

.schedule-room {
  color: var(--gray-500);
  font-size: 0.875rem;
}

.schedule-platform {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
}

.schedule-platform.shopee {
  background: rgba(238, 77, 45, 0.1);
  color: var(--shopee);
}

.schedule-platform.lazada {
  background: rgba(15, 20, 109, 0.1);
  color: var(--lazada);
}

.schedule-platform.tiktok {
  background: rgba(0, 0, 0, 0.1);
  color: var(--tiktok);
}

/* Activity List */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-height: 300px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--gray-100);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.activity-icon.add {
  background: var(--success-bg);
  color: var(--success);
}

.activity-icon.edit {
  background: var(--info-bg);
  color: var(--info);
}

.activity-icon.delete {
  background: var(--danger-bg);
  color: var(--danger);
}

.activity-icon.sync {
  background: var(--primary-bg);
  color: var(--primary);
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 0.875rem;
  color: var(--gray-700);
}

.activity-time {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: 2px;
}

/* Loading Placeholder */
.loading-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
  color: var(--gray-400);
  gap: var(--spacing-sm);
}

/* ==========================================
   DATA TABLE
   ========================================== */
.data-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  max-width: 100%;
}

.data-table-wrapper {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Subtle scrollbar for table */
.data-table-wrapper::-webkit-scrollbar {
  height: 6px;
}
.data-table-wrapper::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 3px;
}
.data-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}
.data-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

/* ── Cột Thao tác sticky (cột cuối) ── */
/* Chỉ sticky khi KHÔNG phải td colspan (loading/empty state) */
.data-table th:last-child,
.data-table td:last-child:not([colspan]) {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--white, #fff);
}

.data-table th:last-child {
  background: var(--gray-50);
  z-index: 3;
}

/* Viền trái nhẹ để tách biệt cột sticky */
.data-table th:last-child::before,
.data-table td:last-child:not([colspan])::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to right, rgba(0,0,0,0.06), transparent);
  pointer-events: none;
}

/* Khi hover row, cột sticky cũng đổi nền */
.data-table tbody tr:hover td:last-child:not([colspan]) {
  background: var(--gray-50);
}

.data-table th,
.data-table td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
  white-space: nowrap;
}

/* Loading / Empty / Error state: td colspan căn giữa
   Đặt SAU rule chung để override text-align: left */
.data-table td[colspan] {
  text-align: center;
  white-space: normal;
  padding: var(--spacing-lg);
}

.data-table th {
  background: var(--gray-50);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.data-table tbody tr:hover {
  background: var(--gray-50);
}

.data-table td {
  font-size: 0.8125rem;
  color: var(--gray-700);
}

/* Table Actions */
.table-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}

.table-action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--gray-500);
  transition: var(--transition);
  font-size: 0.75rem;
}

.table-action-btn:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.table-action-btn.edit:hover {
  background: var(--info-bg);
  color: var(--info);
}

.table-action-btn.delete:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Status Badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}

.status-badge.active {
  background: var(--success-bg);
  color: var(--success);
}

.status-badge.inactive {
  background: var(--gray-200);
  color: var(--gray-600);
}

.status-badge.live {
  background: var(--danger-bg);
  color: var(--danger);
}

.status-badge.upcoming {
  background: var(--warning-bg);
  color: var(--warning);
}

.status-badge.past {
  background: var(--gray-200);
  color: var(--gray-500);
}

/* Pagination */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border-top: 1px solid var(--gray-100);
}

.pagination-info {
  font-size: 0.875rem;
  color: var(--gray-500);
}

.pagination-btns {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.pagination-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  color: var(--gray-600);
  font-size: 0.875rem;
  transition: var(--transition);
}

.pagination-btn:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.pagination-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================
   FILTER BAR
   ========================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.search-box i {
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

.search-box input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  padding-left: 2.5rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.search-box input:focus {
  outline: none;
  border-color: var(--primary);
}

.filter-select {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 0.875rem;
  min-width: 150px;
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary);
}

.filter-date {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.filter-date:focus {
  outline: none;
  border-color: var(--primary);
}

/* ==========================================
   SYNC & IMPORT/EXPORT CARDS
   ========================================== */
.sync-grid,
.import-export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.sync-card,
.ie-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.sync-log-card {
  grid-column: 1 / -1;
}

.sync-card-header,
.ie-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-100);
}

.sync-icon,
.ie-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.sync-icon.google,
.ie-icon.import {
  background: var(--primary-bg);
  color: var(--primary);
}

.sync-icon.manual {
  background: var(--info-bg);
  color: var(--info);
}

.sync-icon.log {
  background: var(--gray-200);
  color: var(--gray-600);
}

.ie-icon.export {
  background: var(--success-bg);
  color: var(--success);
}

.sync-card-header h3,
.ie-card-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
}

.sync-card-body,
.ie-card-body {
  padding: var(--spacing-lg);
}

.sync-card-body p,
.ie-card-body p {
  color: var(--gray-600);
  font-size: 0.875rem;
  margin-bottom: var(--spacing-md);
}

/* Auto-sync status info */
.auto-sync-status {
  margin-top: 12px;
  padding: 10px 14px;
  background: #f0fdf4;
  border-radius: 8px;
  border: 1px solid #bbf7d0;
}
.auto-sync-status.hidden { display: none; }
.auto-sync-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.825rem;
  color: #1e293b;
  padding: 3px 0;
}
.auto-sync-status-row i {
  color: #16a34a;
  width: 16px;
  text-align: center;
  font-size: 0.8rem;
}
.auto-sync-status-row strong {
  color: #15803d;
  font-weight: 600;
}

.sync-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.sync-status {
  padding: var(--spacing-sm);
  background: var(--gray-50);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: var(--gray-600);
}

.sync-log {
  max-height: 300px;
  overflow-y: auto;
  font-family: monospace;
  font-size: 0.8125rem;
  padding: var(--spacing-sm);
  background: var(--gray-900);
  border-radius: var(--radius);
  color: var(--gray-300);
}

.sync-log-entry {
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--gray-800);
}

.sync-log-entry.success {
  color: var(--success);
}

.sync-log-entry.error {
  color: var(--danger);
}

.sync-card-footer,
.ie-card-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}

.file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  color: var(--gray-500);
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: var(--spacing-md);
}

.file-upload:hover {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}

.file-upload i {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
}

/* ==========================================
   SETTINGS
   ========================================== */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

@media (max-width: 1024px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

.settings-card {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: all 0.2s ease;
}

.settings-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--gray-300);
}

.settings-card-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-200);
  background: linear-gradient(to bottom, var(--white) 0%, #fafbfc 100%);
}

.settings-card-header h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.settings-card-header h3 i {
  color: var(--primary);
  font-size: 1.125rem;
}

.settings-card-body {
  padding: 24px;
}

/* App Info Grid */
.app-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.app-info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: #f8fafb;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  transition: all 0.2s ease;
}

.app-info-item:hover {
  background: #f0f4f8;
  border-color: var(--gray-300);
}

.app-info-label {
  font-size: 0.75rem;
  color: var(--gray-600);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.app-info-label i {
  color: var(--primary);
  font-size: 0.875rem;
}

.app-info-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  font-family: 'SFMono-Regular', Consolas, monospace;
}

.form-control {
  width: 100%;
  padding: 0.625rem var(--spacing-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.5;
  transition: var(--transition);
}

textarea.form-control {
  min-height: 80px;
}

select.form-control {
  min-height: 40px;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.form-control:disabled,
.form-control[readonly] {
  background: var(--gray-100);
  cursor: not-allowed;
}

.toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 12px;
}

.toggle-label span:first-child {
  flex: 1;
}

.toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  display: inline-block;
  flex-shrink: 0;
  width: 48px;
  height: 26px;
  background: #ccc;
  border-radius: 26px;
  position: relative;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-input:checked + .toggle-slider {
  background: var(--primary, #4f46e5);
}

.toggle-input:checked + .toggle-slider::before {
  transform: translateX(22px);
}

.toggle-slider:hover {
  background: #bbb;
}

.toggle-input:checked + .toggle-slider:hover {
  background: var(--primary-dark, #4338ca);
}

/* Radio Group */
.radio-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: var(--radius, 6px);
  transition: all 0.2s ease;
}

.radio-label:hover {
  background: var(--gray-50, #f9fafb);
}

.radio-label input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary, #4f46e5);
}

.radio-label input[type="radio"]:checked + span {
  font-weight: 500;
  color: var(--primary, #4f46e5);
}

.radio-label:has(input:checked) {
  border-color: var(--primary, #4f46e5);
  background: var(--primary-light, #eef2ff);
}

/* Form Section */
.form-section {
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius, 8px);
  padding: 16px;
  margin-bottom: 16px;
  background: var(--gray-50, #f9fafb);
}

.form-section h4 {
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700, #374151);
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-section h4 i {
  color: var(--primary, #4f46e5);
}

/* Form Row for side-by-side inputs */
.form-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.form-row .form-group {
  flex: 1;
  min-width: 200px;
}

.form-row .col-6 {
  flex: 0 0 calc(50% - 8px);
  min-width: 150px;
}

.form-row .col-4 {
  flex: 0 0 calc(33.33% - 11px);
  min-width: 120px;
}

/* Text muted */
.text-muted {
  color: var(--gray-500, #6b7280);
  font-size: 0.875rem;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--gray-50);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.connection-status i {
  font-size: 0.5rem;
}

.connection-status.connected i {
  color: var(--success);
}

.connection-status.disconnected i {
  color: var(--danger);
}

.settings-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--gray-200);
}

.settings-actions .btn {
  min-width: 140px;
}

/* ==========================================
   LOGS
   ========================================== */
.logs-list {
  max-height: 600px;
  overflow-y: auto;
}

.log-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--gray-100);
}

.log-entry:hover {
  background: var(--gray-50);
}

.log-level {
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

.log-level.info {
  background: var(--info-bg);
  color: var(--info);
}

.log-level.warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.log-level.error {
  background: var(--danger-bg);
  color: var(--danger);
}

.log-content {
  flex: 1;
}

.log-message {
  font-size: 0.875rem;
  color: var(--gray-700);
  word-break: break-word;
}

.log-time {
  font-size: 0.75rem;
  color: var(--gray-400);
  flex-shrink: 0;
}

/* ==========================================
   MODALS
   ========================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--spacing-lg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.modal-overlay.active {
  display: flex;
  opacity: 1;
}

.modal-overlay.active:not(.fl-modal) > .modal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 0;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

/* Form wrapping modal-body + footer needs flex too */
.modal-overlay.active:not(.fl-modal) > .modal > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.modal.show {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  z-index: 1;
}

.modal-content.modal-sm {
  max-width: 480px;
}

.modal-content.modal-lg {
  max-width: 700px;
}

/* Modal Loading Overlay */
.modal-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: var(--radius-xl);
}

.modal-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--primary);
}

.modal-loading-spinner i {
  font-size: 2rem;
}

.modal-loading-spinner span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--gray-400);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  font-size: 1.1rem;
}

.modal-close:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.modal-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
}

/* Confirm Modal Specific Styles */
.confirm-modal .modal-body {
  padding: var(--spacing-xl);
  text-align: center;
}

.confirm-modal .modal-body p {
  font-size: 1rem;
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0;
}

.confirm-modal .modal-footer {
  justify-content: center;
}

/* ==========================================
   TOAST
   ========================================== */
.toast-container {
  position: fixed;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 200000;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--gray-800);
  color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
}

.toast.show {
  opacity: 1;
  transform: translateX(0);
}

.toast-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.toast-close:hover {
  opacity: 1;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast-success {
  background: var(--success);
}

.toast-error {
  background: var(--danger);
}

.toast-warning {
  background: var(--warning);
  color: var(--gray-900);
}

.toast-info {
  background: var(--info);
}

/* ==========================================
   LOADING OVERLAY
   ========================================== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 400;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.loading-overlay.active {
  display: flex;
  opacity: 1;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.loading-spinner i {
  font-size: 2rem;
  color: var(--primary);
}

.loading-spinner span {
  color: var(--gray-600);
  font-size: 0.875rem;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .widget-lg {
    grid-column: span 12;
  }

  .widget-md,
  .widget-sm {
    grid-column: span 6;
  }
}

@media (max-width: 1024px) {
  /* Mobile: Ẩn hoàn toàn sidebar (kể cả khi collapsed) */
  .admin-sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width) !important; /* Full width khi mở overlay, không phải 70px */
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  /* Override collapsed ~ main-content rule (specificity cao hơn) */
  .admin-main,
  .admin-sidebar.collapsed ~ .admin-main {
    margin-left: 0;
    max-width: 100vw;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .brand-selector {
    min-width: 140px;
  }

  .brand-select {
    padding: 6px 8px;
    font-size: 0.8rem;
  }

  /* Reset collapsed styles trên mobile - sidebar luôn full width khi mở */
  .admin-sidebar.collapsed .sidebar-header {
    flex-direction: row;
    padding: var(--spacing-lg);
    gap: var(--spacing-sm);
  }

  .admin-sidebar.collapsed .logo-text,
  .admin-sidebar.collapsed .nav-section-title,
  .admin-sidebar.collapsed .nav-link span,
  .admin-sidebar.collapsed .nav-badge,
  .admin-sidebar.collapsed .user-info {
    display: revert;
  }

  .admin-sidebar.collapsed .nav-link {
    justify-content: flex-start;
    padding: var(--spacing-sm) var(--spacing-lg);
  }

  .admin-sidebar.collapsed .sidebar-user {
    justify-content: flex-start;
  }

  .admin-sidebar.collapsed .sidebar-footer {
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .admin-sidebar.collapsed .logout-btn {
    display: flex;
  }

  .admin-sidebar.collapsed .sidebar-toggle {
    width: 32px;
  }

  .admin-sidebar.collapsed .sidebar-nav {
    overflow-y: auto;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .stat-card {
    padding: 0.75rem;
    gap: 0.625rem;
    border-radius: 10px;
  }

  .stat-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    font-size: 1.05rem;
    border-radius: 10px;
  }

  .stat-value {
    font-size: 1.3rem;
  }

  .stat-label {
    font-size: 0.72rem;
  }

  .stat-sub-label {
    display: none;
  }

  .dashboard-date-filter {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .date-filter-left {
    flex-direction: column;
    width: 100%;
  }

  .date-filter-presets {
    width: 100%;
  }

  .date-preset {
    flex: 1;
    justify-content: center;
    padding: 8px 10px;
  }

  .date-filter-custom {
    width: 100%;
    flex-wrap: wrap;
  }

  .date-input {
    flex: 1;
    min-width: 0;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .widget-lg,
  .widget-md,
  .widget-sm {
    grid-column: span 1;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .page-actions {
    width: 100%;
  }

  .page-actions .btn {
    flex: 1;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box {
    min-width: 100%;
  }

  .header-right {
    gap: var(--spacing-sm);
  }

  .brand-selector {
    min-width: 120px;
  }

  .brand-select {
    padding: 5px 6px;
    font-size: 0.75rem;
  }

  .header-actions {
    display: none;
  }

  .admin-content {
    padding: var(--spacing-md);
  }

  /* Mobile: cho phép cuộn ngang thay vì ẩn cột */
  .data-table {
    min-width: 600px;
  }

  .data-table th,
  .data-table td {
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
  }

  /* Loading/Empty trên mobile: giữ giữa viewport khi bảng rộng hơn màn hình */
  .data-table td[colspan] {
    padding: var(--spacing-lg) 0.5rem;
  }

  .data-table td[colspan] .empty-state,
  .data-table td[colspan] .loading-state {
    position: sticky;
    left: 0;
  }

  /* Scrollbar rõ hơn trên mobile để user biết có thể cuộn */
  .data-table-wrapper::-webkit-scrollbar {
    height: 4px;
  }

  .data-table-wrapper {
    scrollbar-width: thin;
  }

  .modal {
    margin: var(--spacing-md);
    max-height: calc(100vh - 2 * var(--spacing-md));
  }
}

@media (max-width: 480px) {
  .breadcrumb {
    display: none;
  }

  .brand-selector {
    min-width: 100px;
    flex: 1;
  }

  .login-container {
    padding: var(--spacing-lg);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }

  .stat-card {
    padding: 0.625rem 0.75rem;
    gap: 0.5rem;
    border-radius: 10px;
  }

  .stat-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 0.95rem;
    border-radius: 8px;
  }

  .stat-value {
    font-size: 1.2rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }

  .stat-trend,
  .stat-sub-label {
    display: none;
  }

  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .btn span {
    display: none;
  }

  .btn i {
    margin: 0;
  }
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-muted { color: var(--gray-500); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-primary { color: var(--primary); }

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }

.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--spacing-sm); }
.gap-2 { gap: var(--spacing-md); }

/* Empty and Loading States */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  color: var(--gray-500);
  text-align: center;
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  opacity: 0.5;
}

.empty-state p {
  font-size: 0.9375rem;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  color: var(--gray-500);
}

.loading-state i {
  font-size: 2rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary);
}

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: capitalize;
}

.status-success {
  background: var(--success-bg);
  color: var(--success);
}

.status-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.status-warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.status-info {
  background: var(--info-bg);
  color: var(--info);
}

.status-secondary {
  background: var(--gray-200);
  color: var(--gray-600);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.page-btn {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-700);
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--transition);
}

.page-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.page-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-ellipsis {
  padding: 0 var(--spacing-sm);
  color: var(--gray-500);
}

.pagination-info {
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--gray-500);
}

/* ==========================================
   SORTABLE TABLE HEADERS
   ========================================== */
.sortable-header {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: relative;
}

.sortable-header:hover {
  background: var(--gray-50);
}

.sort-icon {
  display: inline-block;
  margin-left: 4px;
  color: var(--gray-400);
  font-size: 0.75rem;
  vertical-align: middle;
}

.sort-icon.active {
  color: var(--primary);
}

/* ==========================================
   SCHEDULE PAGINATION BAR
   ========================================== */
.schedule-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}

.rows-per-page {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--gray-600);
}

.rows-per-page-select {
  padding: 4px 8px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 0.85rem;
  color: var(--gray-700);
  cursor: pointer;
  outline: none;
}

.rows-per-page-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.schedule-pagination-info {
  font-size: 0.85rem;
  color: var(--gray-500);
  white-space: nowrap;
}

.schedule-pagination-btns {
  display: flex;
  align-items: center;
  gap: 3px;
}

.sch-page-btn {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-700);
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transition);
  padding: 0 6px;
}

.sch-page-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(59, 130, 246, 0.05);
}

.sch-page-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.sch-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sch-page-ellipsis {
  padding: 0 4px;
  color: var(--gray-400);
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .schedule-pagination-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .schedule-pagination-btns {
    justify-content: center;
  }
  .schedule-pagination-info {
    text-align: center;
  }
  .rows-per-page {
    justify-content: center;
  }
}

/* Form Groups */
.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}

.form-group .form-control {
  width: 100%;
}

.form-group small {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: 0.75rem;
  color: var(--gray-500);
}

.form-row {
  display: flex;
  gap: var(--spacing-md);
}

.form-row .form-group {
  flex: 1;
}

/* Header User Dropdown */
.header-user-wrapper {
  position: relative;
}

.header-user-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.header-user-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-200);
}

.header-user {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
  color: var(--gray-700);
}

.header-user i {
  font-size: 1.25rem;
  color: var(--gray-500);
}

.header-user-arrow {
  font-size: 0.625rem;
  color: var(--gray-400);
  transition: transform 0.2s;
}

.header-user-btn.active .header-user-arrow {
  transform: rotate(180deg);
}

.header-user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 220px;
  z-index: 1000;
  overflow: hidden;
}

.header-user-dropdown.hidden {
  display: none;
}

.dropdown-user-info {
  padding: 12px 16px;
  background: var(--gray-50);
}

.dropdown-user-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--gray-800);
}

.dropdown-user-email {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 2px;
}

.dropdown-divider {
  height: 1px;
  background: var(--gray-200);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--gray-700);
  transition: background 0.15s;
  text-align: left;
}

.dropdown-item:hover {
  background: var(--gray-100);
}

.dropdown-item i {
  width: 16px;
  text-align: center;
  color: var(--gray-500);
}

.dropdown-item-danger {
  color: var(--danger);
}

.dropdown-item-danger:hover {
  background: #fef2f2;
}

.dropdown-item-danger i {
  color: var(--danger);
}

/* ==========================================
   DASHBOARD WIDGETS - ENHANCED
   ========================================== */

/* Widget Badge */
.widget-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: var(--spacing-xs);
}

/* Widget Scrollable */
.widget-scrollable {
  max-height: 280px;
  overflow-y: auto;
}

/* Widget Empty State */
.widget-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  color: var(--gray-400);
  text-align: center;
}

.widget-empty i {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
}

.widget-empty p {
  font-size: 0.875rem;
  margin: 0;
}

/* Widget More Link */
.widget-more {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--gray-100);
  text-align: center;
}

.widget-more a {
  color: var(--primary);
  font-size: 0.875rem;
  text-decoration: none;
}

.widget-more a:hover {
  text-decoration: underline;
}

/* Chart Container */
.chart-container {
  position: relative;
  height: 220px;
  padding: var(--spacing-sm);
}

/* Live Now Items */
.live-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--gray-100);
  transition: var(--transition);
}

.live-item:last-child {
  border-bottom: none;
}

.live-item:hover {
  background: var(--gray-50);
}

.live-indicator {
  position: relative;
  width: 12px;
  height: 12px;
}

.live-indicator .pulse {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--danger);
  border-radius: var(--radius-full);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.live-info {
  flex: 1;
  min-width: 0;
}

.live-host {
  font-weight: 500;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-room {
  font-size: 0.75rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Platform badge trong widget Đang Live */
.live-platform-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0px 4px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.5;
  background: var(--gray-50);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
}
/* === SHOPEE & biến thể: SHP, SP, Shopee, ShopeeVideo, ShpVideo, ShopeeFood === */
.live-platform-badge.platform-shopee,
.live-platform-badge.platform-shp,
.live-platform-badge.platform-sp,
.live-platform-badge.platform-shopeevideo,
.live-platform-badge.platform-shpvideo,
.live-platform-badge.platform-shopeefood,
.live-platform-badge.platform-shopeelive,
.live-platform-badge[class*="platform-shp"],
.live-platform-badge[class*="platform-shopee"] {
  background: #fff0eb;
  color: #ee4d2d;
  border: 1px solid #fcc8b5;
}
/* === TIKTOK & biến thể: TTS, TT, TikTok, TikTokShop, TTShop, TTLive === */
.live-platform-badge.platform-tiktok,
.live-platform-badge.platform-tiktokshop,
.live-platform-badge.platform-tts,
.live-platform-badge.platform-tt,
.live-platform-badge.platform-ttshop,
.live-platform-badge.platform-ttlive,
.live-platform-badge.platform-tiktokshoplive,
.live-platform-badge[class*="platform-tiktok"],
.live-platform-badge[class*="platform-tts"] {
  background: #f0f0f0;
  color: #161823;
  border: 1px solid #c4c4c4;
}
/* === LAZADA & biến thể: LZD, LZ, Lazada, LazLive === */
.live-platform-badge.platform-lazada,
.live-platform-badge.platform-lzd,
.live-platform-badge.platform-lz,
.live-platform-badge.platform-lazlive,
.live-platform-badge[class*="platform-laz"],
.live-platform-badge[class*="platform-lzd"] {
  background: #eef2ff;
  color: #0f146d;
  border: 1px solid #c5cbff;
}
/* === FACEBOOK & biến thể: FB, FBLive, Facebook === */
.live-platform-badge.platform-facebook,
.live-platform-badge.platform-fb,
.live-platform-badge.platform-fblive,
.live-platform-badge.platform-facebooklive,
.live-platform-badge[class*="platform-fb"],
.live-platform-badge[class*="platform-facebook"] {
  background: #e7f0ff;
  color: #1877f2;
  border: 1px solid #b3d4ff;
}
/* === YOUTUBE & biến thể: YT, YouTube, YTLive === */
.live-platform-badge.platform-youtube,
.live-platform-badge.platform-yt,
.live-platform-badge.platform-ytlive,
.live-platform-badge.platform-youtubelive,
.live-platform-badge[class*="platform-youtube"],
.live-platform-badge[class*="platform-yt"] {
  background: #ffeaea;
  color: #ff0000;
  border: 1px solid #ffb3b3;
}
/* === INSTAGRAM & biến thể: IG, Instagram, IGLive === */
.live-platform-badge.platform-instagram,
.live-platform-badge.platform-ig,
.live-platform-badge.platform-iglive,
.live-platform-badge.platform-instagramlive,
.live-platform-badge[class*="platform-instagram"],
.live-platform-badge[class*="platform-ig"] {
  background: #fdf0ff;
  color: #c13584;
  border: 1px solid #e8b3f0;
}
/* === SENDO & biến thể: SD, Sendo === */
.live-platform-badge.platform-sendo,
.live-platform-badge.platform-sd,
.live-platform-badge[class*="platform-sendo"] {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
}
/* === TIKI & biến thể === */
.live-platform-badge.platform-tiki,
.live-platform-badge.platform-tk,
.live-platform-badge[class*="platform-tiki"] {
  background: #e3f2fd;
  color: #1a94ff;
  border: 1px solid #90caf9;
}
/* === ZALO & biến thể === */
.live-platform-badge.platform-zalo,
.live-platform-badge.platform-zl,
.live-platform-badge[class*="platform-zalo"] {
  background: #e8f5e9;
  color: #0068ff;
  border: 1px solid #a5d6a7;
}

/* Brand badge (dùng chung cho live widget, upcoming card, và popup) */
.live-brand-badge,
.upcoming-brand,
.popup-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 0px 4px;
  border-radius: 3px;
  line-height: 1.5;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}
.upcoming-brand i {
  font-size: 0.5rem;
}

/* Custom legend cho Room Usage chart */
/* Room Usage: wrapper chứa cả chart + legend */
.room-usage-wrapper {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);
  overflow: hidden;
}

.room-usage-chart-area {
  position: relative;
  height: 180px;
  flex-shrink: 0;
}

.room-chart-legend {
  margin-top: 10px;
  max-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 4px;
  flex-shrink: 0;
}
.room-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #374151;
  flex-wrap: wrap;
}
.room-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.room-legend-name {
  font-weight: 500;
  white-space: nowrap;
}
.room-legend-badges {
  display: inline-flex;
  gap: 3px;
  flex-wrap: wrap;
}

.live-time {
  text-align: right;
  flex-shrink: 0;
}

.live-time .elapsed {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--danger);
}

.live-time .start-time {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-400);
}

/* ==========================================
   Upcoming Widget - Redesigned
   ========================================== */

/* Thông báo "Đã hết ca live hôm nay" */
.upcoming-today-done {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #f0fdf4;
  border-left: 3px solid #22c55e;
  color: #15803d;
  font-size: 0.8125rem;
  font-weight: 500;
}

.upcoming-today-done i {
  color: #22c55e;
}

/* Section wrapper */
.upcoming-section {
  margin-bottom: 0;
}

.upcoming-section-body {
  padding: 4px 0;
}

/* Section header chung */
.upcoming-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 16px;
}

.upcoming-section-header .section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.upcoming-section-header .section-count {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

/* Header "Hôm nay" */
.upcoming-section-header.today {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-bottom: 1px solid #fde68a;
}

.upcoming-section-header.today .section-label {
  color: #92400e;
}

.upcoming-section-header.today .section-label i {
  color: #f59e0b;
}

.upcoming-section-header.today .section-count {
  color: #92400e;
  background: rgba(245, 158, 11, 0.18);
}

/* Header "Ngày mai" / ngày khác */
.upcoming-section-header.tomorrow {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-bottom: 1px solid #bfdbfe;
}

.upcoming-section-header.tomorrow .section-label {
  color: #1e40af;
}

.upcoming-section-header.tomorrow .section-label i {
  color: #3b82f6;
}

.upcoming-section-header.tomorrow .section-count {
  color: #1e40af;
  background: rgba(59, 130, 246, 0.12);
}

/* ==========================================
   Upcoming Card - List-style layout
   ========================================== */

.upcoming-card {
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gray-100);
  position: relative;
  transition: background 0.15s ease;
}

.upcoming-card:last-child {
  border-bottom: none;
}

.upcoming-card:hover {
  background: var(--gray-50);
}

.upcoming-card.urgent {
  border-left: 3px solid var(--danger);
  background: rgba(239, 68, 68, 0.03);
}

.upcoming-card.soon {
  border-left: 3px solid var(--warning);
  background: rgba(245, 158, 11, 0.03);
}

/* Dòng 1: Thời gian  10:00 → 12:00  +  countdown */
.upcoming-card-time {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.upcoming-card-time .card-start {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--primary);
}

.upcoming-card-time .card-separator {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin: 0 1px;
}

.upcoming-card-time .card-end {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-500);
}

/* Dòng 2: Host */
.upcoming-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.upcoming-card-host {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-800);
}

.upcoming-card-host i {
  font-size: 0.625rem;
  color: var(--gray-400);
  width: 13px;
  text-align: center;
}

/* Dòng 3: Room + Platform + Duration */
.upcoming-card-details {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-left: 18px;
}

.upcoming-card-details .upcoming-room {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.upcoming-card-details .upcoming-room i {
  font-size: 0.5625rem;
  color: var(--gray-400);
}

/* Duration badge */
.upcoming-duration {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6875rem;
  color: var(--gray-500);
  background: var(--gray-50);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--gray-100);
}

.upcoming-duration i {
  font-size: 0.5625rem;
}

/* Countdown pill — góc phải trên */
.upcoming-card-countdown {
  position: absolute;
  top: 10px;
  right: 12px;
}

.upcoming-card-countdown .countdown-text {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-500);
  background: var(--gray-50);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--gray-100);
  white-space: nowrap;
}

.upcoming-card-countdown.urgent .countdown-text {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
}

.upcoming-card-countdown.soon .countdown-text {
  color: #b45309;
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.2);
}

/* Platform badge */
.upcoming-platform {
  display: inline-flex;
  align-items: center;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.upcoming-platform.platform-shopee {
  background: #fff0eb;
  color: #ee4d2d;
  border: 1px solid #fcc8b5;
}

.upcoming-platform.platform-tiktok,
.upcoming-platform.platform-tiktokshop {
  background: #f0f0f0;
  color: #161823;
  border: 1px solid #d4d4d4;
}

.upcoming-platform.platform-lazada {
  background: #eef2ff;
  color: #0f146d;
  border: 1px solid #c5cbff;
}

.upcoming-platform:not(.platform-shopee):not(.platform-tiktok):not(.platform-lazada):not(.platform-tiktokshop) {
  background: var(--gray-50);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
}

/* Activity Items */
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--gray-100);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.75rem;
}

.activity-icon.info {
  background: var(--info-bg);
  color: var(--info);
}

.activity-icon.success {
  background: var(--success-bg);
  color: var(--success);
}

.activity-icon.warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.activity-icon.error {
  background: var(--danger-bg);
  color: var(--danger);
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-message {
  font-size: 0.8125rem;
  color: var(--gray-700);
  line-height: 1.4;
}

.activity-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: 2px;
  font-size: 0.6875rem;
  color: var(--gray-400);
}

.activity-user {
  font-weight: 500;
}

/* ==========================================
   AVATAR / LOGO PICKER
   ========================================== */
.avatar-picker {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}

.avatar-picker-tabs {
  display: flex;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}

.avatar-picker-tab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-500);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.avatar-picker-tab:hover {
  color: var(--gray-700);
  background: var(--gray-100);
}

.avatar-picker-tab.active {
  color: var(--primary);
  background: var(--white);
  border-bottom: 2px solid var(--primary);
}

.avatar-picker-panel {
  display: none;
  padding: 12px;
}

.avatar-picker-panel.active {
  display: block;
}

.avatar-picker-panel .form-control {
  font-size: 0.8125rem;
}

.avatar-picker-upload-area {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--gray-500);
}

.avatar-picker-upload-area:hover {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.03);
  color: var(--primary);
}

.avatar-picker-upload-area i {
  font-size: 1.5rem;
  margin-bottom: 6px;
}

.avatar-picker-upload-area p {
  margin: 4px 0 0;
  font-size: 0.75rem;
}

.avatar-picker-preview {
  margin-top: 10px;
  text-align: center;
  display: none;
}

.avatar-picker-preview.has-image {
  display: block;
}

.avatar-picker-preview-wrap {
  position: relative;
  display: inline-block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 2px solid var(--gray-200);
  background: var(--gray-100);
}

.avatar-picker-preview-wrap img {
  display: block;
  max-width: 160px;
  max-height: 160px;
  object-fit: contain;
}

.avatar-picker-preview-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.2s;
}

.avatar-picker-preview-wrap:hover .avatar-picker-preview-actions {
  opacity: 1;
}

.avatar-picker-preview-actions button {
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.avatar-picker-preview-actions button:hover {
  background: var(--white);
  color: var(--primary);
}

.avatar-picker-preview-actions button.btn-remove:hover {
  color: var(--danger);
}

.avatar-picker-error {
  display: none;
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radius);
  font-size: 0.75rem;
  align-items: center;
  gap: 6px;
}

.avatar-picker-error.show {
  display: flex;
}

.avatar-picker-hint {
  font-size: 0.7rem;
  color: var(--gray-400);
  margin-top: 4px;
}

/* Zoom Overlay */
.image-zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: fadeIn 0.2s ease;
}

.image-zoom-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.image-zoom-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.image-zoom-close:hover {
  background: rgba(255,255,255,0.3);
}

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

/* Stat Card - Rooms icon: đã chuyển vào .stats-grid section */

/* ==========================================
   CRUD TABLE ENHANCEMENTS
   ========================================== */

/* Brand info */
.brand-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  object-fit: cover;
}

.brand-logo-placeholder {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

.brand-name {
  font-weight: 500;
}

/* Host info */
.host-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.host-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.host-avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

.host-name {
  font-weight: 500;
}

.host-nickname {
  font-size: 0.75rem;
  color: var(--gray-500);
}

/* Room info */
.room-name {
  font-weight: 500;
}

.room-platform {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.room-link {
  color: var(--primary);
}

.room-link:hover {
  color: var(--primary-dark);
}

/* Schedule info */
.schedule-host {
  font-weight: 500;
}

.schedule-room {
  font-size: 0.875rem;
}

.schedule-platform {
  font-size: 0.875rem;
  color: var(--gray-500);
}

/* Dashboard countdown - tabular-nums để số không nhảy */
.elapsed[data-start-time],
.countdown-text[data-start-time],
.popup-elapsed[data-start-time],
.popup-countdown[data-start-time] {
  font-variant-numeric: tabular-nums;
}

/* Schedule countdown - real-time timer */
.schedule-countdown {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  white-space: nowrap;
}

.countdown-ending {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.1);
}

.countdown-starting {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
}

/* Live row highlight */
.row-live {
  background: rgba(239, 68, 68, 0.05);
}

.row-live td:first-child {
  border-left: 3px solid var(--danger);
}

/* Row live: cột sticky cũng đổi nền */
.row-live td:last-child {
  background: rgba(239, 68, 68, 0.05);
}

/* ==========================================
   SCHEDULE CONFLICT WARNINGS
   ========================================== */

/* Trùng giờ: nền vàng nhạt */
.row-time-overlap {
  background: rgba(245, 158, 11, 0.08) !important;
}
.row-time-overlap td:first-child {
  border-left: 3px solid #f59e0b;
}

/* Trùng host cùng giờ: nền đỏ nhạt (nghiêm trọng hơn) */
.row-host-conflict {
  background: rgba(239, 68, 68, 0.10) !important;
}
.row-host-conflict td:first-child {
  border-left: 3px solid var(--danger);
}

/* ==========================================
   KEEP LIVE STYLES
   ========================================== */

/* Keep Live row highlight — saved groups (always visible) */
.keep-live-row {
  background: rgba(16, 185, 129, 0.06) !important;
  transition: all 0.2s ease;
}

.keep-live-row[data-keep-live-type="saved"] {
  background: rgba(16, 185, 129, 0.08) !important;
}

.keep-live-row[data-keep-live-type="detected"] {
  background: rgba(245, 158, 11, 0.06) !important;
}

.keep-live-row td:first-child {
  position: relative;
}

/* Keep Live hover effect (when hovering group card) */
.keep-live-hover {
  background: rgba(245, 158, 11, 0.15) !important;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3);
}

/* Keep Live indicator icon - badge style for better visibility */
.keep-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
  margin-left: 4px;
  background: rgba(16, 185, 129, 0.12);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.keep-live-indicator .keep-live-label {
  font-size: 0.6em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Keep Live group card hover */
.keep-live-group-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-1px);
}

/* Keep Live toolbar animation */
#keepLiveToolbar {
  animation: keepLiveSlideIn 0.3s ease-out;
}

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

/* Keep Live toggle button active state */
#keepLiveToggleBtn.active {
  background: #d97706 !important;
  color: white !important;
  border-color: #d97706 !important;
}

/* Keep Live results scrollbar */
#keepLiveResults::-webkit-scrollbar {
  width: 6px;
}

#keepLiveResults::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

#keepLiveResults::-webkit-scrollbar-thumb {
  background: rgba(217, 119, 6, 0.3);
  border-radius: 3px;
}

#keepLiveResults::-webkit-scrollbar-thumb:hover {
  background: rgba(217, 119, 6, 0.5);
}

/* Keep Live Manual Mode - Selected rows */
.keep-live-manual-selected {
  background: rgba(217, 119, 6, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.25);
}

.keep-live-manual-selected td {
  border-top: 1px solid rgba(217, 119, 6, 0.2) !important;
  border-bottom: 1px solid rgba(217, 119, 6, 0.2) !important;
}

/* Keep Live checkbox cell */
.keep-live-checkbox-cell {
  background: rgba(254, 243, 199, 0.3);
}

.keep-live-manual-selected .keep-live-checkbox-cell {
  background: rgba(217, 119, 6, 0.15);
}

/* Keep Live checkbox disabled visual */
.keep-live-checkbox:disabled {
  opacity: 0.3;
}

/* Keep Live th-check header */
.keep-live-th-check {
  background: rgba(254, 243, 199, 0.5) !important;
}

/* Table actions */
.table-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.table-actions .btn-sm {
  padding: 3px 6px;
  font-size: 0.7rem;
  min-width: unset;
}

/* Required field */
.required {
  color: var(--danger);
}

/* ==========================================
   TOOLS MODULE - FILTER LINKS - Cards Layout
   ========================================== */

/* Cards Container */
.fl-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
  padding: 4px;
}

/* Empty State */
.fl-cards-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  background: linear-gradient(145deg, var(--gray-50) 0%, var(--white) 100%);
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-xl);
  text-align: center;
}

.fl-cards-empty i {
  font-size: 3rem;
  color: var(--gray-300);
  margin-bottom: 16px;
}

.fl-cards-empty h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 8px;
}

.fl-cards-empty p {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-bottom: 20px;
}

.fl-cards-empty .btn {
  padding: 10px 20px;
  font-size: 0.875rem;
}

.fl-cards-empty.error i {
  color: var(--danger);
}

.fl-cards-empty.error h3 {
  color: var(--danger);
}

/* Link Card */
.fl-link-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  animation: fl-card-fade-in 0.4s ease-out both;
}

.fl-link-card:nth-child(1) { animation-delay: 0ms; }
.fl-link-card:nth-child(2) { animation-delay: 50ms; }
.fl-link-card:nth-child(3) { animation-delay: 100ms; }
.fl-link-card:nth-child(4) { animation-delay: 150ms; }
.fl-link-card:nth-child(5) { animation-delay: 200ms; }
.fl-link-card:nth-child(6) { animation-delay: 250ms; }
.fl-link-card:nth-child(n+7) { animation-delay: 300ms; }

@keyframes fl-card-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fl-link-card:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(99, 102, 241, 0.08);
  transform: translateY(-2px);
}

.fl-link-card.inactive {
  opacity: 0.7;
  background: var(--gray-50);
}

.fl-link-card.inactive:hover {
  opacity: 1;
}

/* Card Header */
.fl-link-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(145deg, var(--gray-50) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--gray-100);
}

.fl-link-card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.fl-link-card-status.active {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #047857;
}

.fl-link-card-status.active i {
  color: #10b981;
  font-size: 0.5rem;
  animation: pulse-dot 2s ease-in-out infinite;
}

.fl-link-card-status.inactive {
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
  color: var(--gray-600);
}

.fl-link-card-status.inactive i {
  font-size: 0.5rem;
  color: var(--gray-400);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* Card Actions */
.fl-link-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fl-link-action {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.fl-link-action:hover {
  background: var(--primary);
  color: var(--white);
  transform: scale(1.08);
}

.fl-link-action:focus {
  outline: none;
  box-shadow: var(--shadow-sm), 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.fl-link-action:active {
  transform: scale(0.95);
}

.fl-link-action.danger:hover {
  background: var(--danger);
  color: var(--white);
}

/* Copy success animation */
.fl-link-action.copied {
  background: var(--success) !important;
  color: var(--white) !important;
  animation: fl-copy-success 0.3s ease;
}

@keyframes fl-copy-success {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Card Body */
.fl-link-card-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fl-link-card-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fl-link-card-title h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fl-link-card-desc {
  font-size: 0.8125rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card URL Box */
.fl-link-card-url {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fl-link-card-url label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fl-link-url-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(145deg, var(--gray-50) 0%, var(--gray-100) 100%);
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
}

.fl-link-url-box i {
  color: var(--primary);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.fl-link-url-box code {
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 0.75rem;
  color: var(--gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Card Stats */
.fl-link-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fl-link-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--gray-50);
  border-radius: var(--radius);
  font-size: 0.75rem;
  color: var(--gray-600);
  border: 1px solid var(--gray-100);
}

.fl-link-stat i {
  font-size: 0.6875rem;
  color: var(--gray-400);
}

.fl-link-stat strong {
  font-weight: 600;
  color: var(--gray-700);
}

/* Card Features */
/* Brand name badge */
.fl-card-brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: #6366f1;
  font-weight: 500;
  margin-top: 2px;
}
.fl-card-brand i { font-size: 0.65rem; }

/* Room chips on card */
.fl-card-rooms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fl-card-room-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  color: #0369a1;
  white-space: nowrap;
}
.fl-card-room-chip i { font-size: 0.6rem; opacity: 0.7; }
.fl-card-room-chip.more {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

/* Feature toggles */
.fl-link-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.fl-card-feat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 0.675rem;
  font-weight: 500;
  background: #f1f5f9;
  color: #64748b;
}
.fl-card-feat i { font-size: 0.6rem; }
.fl-card-feat.notif { background: #fef2f2; color: #b91c1c; }
.fl-card-feat.event { background: #f0fdf4; color: #15803d; }
.fl-card-feat.pic { background: #eff6ff; color: #1d4ed8; }
.fl-card-feat.night { background: #eef2ff; color: #4338ca; }
.fl-card-feat.refresh { background: #fefce8; color: #a16207; }
.fl-card-feat.img { background: #faf5ff; color: #7c3aed; }

/* Updated date in footer */
.fl-link-updated {
  font-size: 0.75rem;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 5px;
}
.fl-link-updated i { font-size: 0.625rem; }

/* Card Footer */
.fl-link-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(145deg, var(--gray-50) 0%, var(--white) 100%);
  border-top: 1px solid var(--gray-100);
}

.fl-link-created {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.fl-link-created i {
  font-size: 0.6875rem;
  color: var(--gray-400);
}

.fl-link-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.fl-link-open:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(99, 102, 241, 0.4);
}

.fl-link-open i {
  font-size: 0.6875rem;
}

/* Responsive Cards */
@media (max-width: 900px) {
  .fl-cards-container {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .fl-cards-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .fl-link-card-header {
    padding: 12px 14px;
  }

  .fl-link-card-body {
    padding: 14px;
  }

  .fl-link-card-footer {
    padding: 12px 14px;
    flex-direction: column;
    gap: 12px;
  }

  .fl-link-open {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================
   TOOLS MODULE - SYNC
   ========================================== */

.sync-last-time {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--gray-500);
  font-size: 0.8125rem;
  margin-top: var(--spacing-md);
}

.sync-last-time i {
  font-size: 0.75rem;
}

/* Sync Card Header Info */
.sync-card-header-info {
  flex: 1;
  min-width: 0;
}

.sync-card-header-info h3 {
  margin: 0;
}

.sync-card-subtitle {
  display: block;
  font-size: 0.8125rem;
  color: var(--gray-500);
  font-weight: 400;
  margin-top: 2px;
}

/* Sync Rooms List */
.sync-rooms-list {
  margin-top: var(--spacing-md);
}

.sync-room-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--primary-bg);
  color: var(--primary);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  margin: 3px 4px 3px 0;
}

.sync-room-chip i {
  font-size: 0.625rem;
}

.sync-rooms-empty {
  font-size: 0.8125rem;
  color: var(--gray-400);
  font-style: italic;
}

/* Sync Option Items (checkbox redesign) */
.sync-option-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px 14px;
  background: var(--gray-50);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.sync-option-item:hover {
  background: var(--white);
  border-color: var(--gray-200);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.sync-option-item input[type="checkbox"] {
  display: none;
}

.sync-option-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.625rem;
  color: transparent;
  transition: all 0.2s ease;
  background: var(--white);
}

.sync-option-item input[type="checkbox"]:checked ~ .sync-option-check {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.sync-option-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}

.sync-option-info i {
  color: var(--gray-400);
  width: 16px;
  text-align: center;
}

/* Sync Progress Bar */
.sync-progress {
  margin-top: var(--spacing-sm);
}

.sync-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
}

.sync-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light, #818cf8) 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
  animation: syncProgressPulse 1.5s ease-in-out infinite;
}

@keyframes syncProgressPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.sync-progress-text {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 6px;
  text-align: center;
}

/* Sync Card Footer adjustments */
.sync-card-footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.sync-log-list {
  max-height: 400px;
  overflow-y: auto;
}

.sync-log-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.15s;
}

.sync-log-item:hover {
  background: var(--gray-50);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: var(--radius);
}

.sync-log-item:last-child {
  border-bottom: none;
}

.sync-log-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.75rem;
  margin-top: 2px;
}

.sync-log-icon.success {
  background: var(--success-bg);
  color: var(--success);
}

.sync-log-icon.error {
  background: var(--danger-bg);
  color: var(--danger);
}

.sync-log-icon.info {
  background: var(--primary-bg);
  color: var(--primary);
}

.sync-log-content {
  flex: 1;
  min-width: 0;
}

.sync-log-message {
  font-size: 0.8125rem;
  color: var(--gray-700);
  line-height: 1.4;
}

.sync-log-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  color: var(--gray-400);
  margin-top: 4px;
}

.sync-log-time i {
  font-size: 0.625rem;
}

/* Sync Log Tags */
.sync-log-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.sync-log-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
}

.sync-log-tag i {
  font-size: 0.5625rem;
}

.sync-log-tag.google {
  background: #fef3e2;
  color: #d48307;
}

.sync-log-tag.refresh {
  background: var(--primary-bg);
  color: var(--primary);
}

.sync-log-tag.records {
  background: var(--gray-100);
  color: var(--gray-600);
}

.sync-log-tag.duration {
  background: var(--gray-100);
  color: var(--gray-600);
}

.sync-log-tag.added {
  background: #ecfdf5;
  color: #059669;
}

.sync-log-tag.updated {
  background: #eff6ff;
  color: #2563eb;
}

.sync-log-tag.removed {
  background: #fef2f2;
  color: #dc2626;
}

.sync-log-tag.rooms {
  background: #f5f3ff;
  color: #7c3aed;
}

.sync-log-tag.interval {
  background: #fef3c7;
  color: #b45309;
}

.sync-log-tag.auto {
  background: #e0e7ff;
  color: #4338ca;
}

/* Sync Log Header Actions */
.sync-log-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.sync-log-header-actions .btn-ghost {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: transparent;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sync-log-header-actions .btn-ghost:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.sync-log-header-actions .btn-ghost.text-danger:hover {
  background: #fef2f2;
  color: var(--danger);
}

/* Sync Log Empty State */
.sync-log-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-md);
  color: var(--gray-400);
  text-align: center;
}

.sync-log-empty i {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
  opacity: 0.5;
}

.sync-log-empty p {
  margin: 0;
  font-size: 0.875rem;
}

/* Sync Log Footer */
.sync-log-footer {
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-top: 1px solid var(--gray-100);
}

.sync-log-count {
  font-size: 0.75rem;
  color: var(--gray-400);
}

/* ==========================================
   TOOLS MODULE - IMPORT/EXPORT
   ========================================== */

.file-upload.dragover {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}

.file-upload.has-file {
  border-color: var(--success);
  background: var(--success-bg);
}

.file-upload.has-file i {
  color: var(--success);
}

.file-upload small {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: var(--spacing-xs);
}

/* ==========================================
   TOOLS MODULE - USERS
   ========================================== */

.user-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: 0.875rem;
}

.user-email {
  font-size: 0.75rem;
  color: var(--gray-500);
}

/* ==========================================
   TOOLS MODULE - LOGS
   ========================================== */

.log-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: 2px;
  font-size: 0.6875rem;
  color: var(--gray-400);
}

.log-user {
  font-weight: 500;
  color: var(--gray-500);
}

.log-action {
  color: var(--gray-400);
}

/* ==========================================
   TOOLS MODULE - FORM SECTIONS
   ========================================== */

.form-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-700);
  margin: var(--spacing-lg) 0 var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--gray-200);
}

/* Btn small variants */
.btn-sm {
  padding: 4px 8px;
  font-size: 0.75rem;
}

/* ==========================================
   SHEET CONFIGURATION UI
   ========================================== */

.form-section {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md);
  background: var(--gray-50);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
}

.form-section h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.form-section h4 i {
  color: var(--primary);
}

.input-group {
  display: flex;
  gap: var(--spacing-sm);
}

.input-group .form-control {
  flex: 1;
}

.input-group .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.form-row {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

.col-6 {
  width: calc(50% - var(--spacing-sm));
}

.sheet-range-config {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px dashed var(--gray-300);
}

.loading-inline {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
  color: var(--gray-500);
  padding: var(--spacing-sm) 0;
}

.loading-inline i {
  color: var(--primary);
}

.btn-block {
  width: 100%;
}

.data-preview-table {
  margin-top: var(--spacing-sm);
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
}

.preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.preview-table th,
.preview-table td {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--gray-200);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.preview-table th {
  background: var(--gray-100);
  font-weight: 600;
  color: var(--gray-700);
  position: sticky;
  top: 0;
}

.preview-table td {
  color: var(--gray-600);
}

.preview-table tr:hover td {
  background: var(--gray-50);
}

.text-warning {
  color: var(--warning);
}

.text-danger {
  color: var(--danger);
}

.text-muted {
  color: var(--gray-500);
}

/* ==========================================
   ROOM CONFIG PAGE STYLES
   ========================================== */

/* Room Selector */
.room-config-selector {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow);
}

.room-config-selector .form-group {
  max-width: 400px;
  margin-bottom: 0;
}

/* Room Config Container */
.room-config-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Room Info Card */
.rc-info-card {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  color: var(--white);
}

.rc-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rc-room-info h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.rc-brand-name {
  opacity: 0.8;
  font-size: 0.875rem;
}

/* Header actions row — Xem Sheet + badges + sync btn trên 1 hàng */
.rc-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Nút Xem Sheet trên nền tím */
.rc-header-actions .btn-outline {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(255,255,255,0.35);
  font-size: 0.8rem;
  padding: 0.3rem 0.65rem;
}

.rc-header-actions .btn-outline:hover {
  background: rgba(255,255,255,0.3);
  border-color: rgba(255,255,255,0.5);
}

/* Badge container */
.rc-sync-badges {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

/* Base badge style - solid colors visible on purple header */
.rc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
  transition: all 0.2s ease;
  line-height: 1.2;
}

.rc-badge i {
  font-size: 0.65rem;
}

/* ---- Mode badge (Tự động / Thủ công) ---- */
.rc-badge-mode {
  background: #ffffff;
  color: #6d28d9;
}

.rc-badge-mode.mode-auto {
  background: #fbbf24;
  color: #78350f;
}

.rc-badge-mode.mode-manual {
  background: #ffffff;
  color: #6d28d9;
}

/* ---- Auto-sync badge (Bật / Tắt) ---- */
.rc-badge-auto {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

.rc-badge-auto.auto-on {
  background: #34d399;
  color: #064e3b;
}

.rc-badge-auto.auto-off {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* ---- Sync status badge (Đã / Chưa / Đang / Lỗi) ---- */
.rc-badge-status {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.rc-badge-status[style*="cursor: pointer"]:hover {
  background: rgba(255,255,255,0.35);
}

.rc-badge-status.pending {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.rc-badge-status.success {
  background: #34d399;
  color: #064e3b;
}

.rc-badge-status.error {
  background: #f87171;
  color: #fff;
}

.rc-badge-status.syncing {
  background: #60a5fa;
  color: #fff;
  animation: rc-sync-pulse 1.5s ease-in-out infinite;
}

@keyframes rc-sync-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Header sync button on purple bg */
.rc-sync-btn {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
  border: none !important;
  width: 30px;
  height: 30px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  transition: all 0.2s ease;
}

.rc-sync-btn:hover {
  background: rgba(255,255,255,0.35) !important;
}

.rc-sync-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Empty State - khi chưa chọn phòng */
.rc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--gray-500);
  min-height: 300px;
}

.rc-empty-state.hidden {
  display: none;
}

.rc-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.rc-empty-icon i {
  font-size: 2rem;
  color: var(--primary);
}

.rc-empty-state h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gray-700);
  margin: 0 0 0.5rem 0;
}

.rc-empty-state p {
  font-size: 0.9rem;
  color: var(--gray-400);
  margin: 0;
  max-width: 400px;
  line-height: 1.5;
}

/* Tabs */
.rc-tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--gray-100);
  padding: 0.25rem;
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.rc-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.rc-tab:hover {
  color: var(--primary);
  background: var(--white);
}

.rc-tab.active {
  background: var(--white);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.rc-tab i {
  font-size: 1rem;
}

/* Tab Contents */
.rc-tab-contents {
  min-height: 400px;
}

.rc-tab-content {
  display: none;
}

.rc-tab-content.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

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

/* Config Cards */
.rc-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.rc-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.rc-card-header h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
}

.rc-card-header h4 i {
  color: var(--primary);
}

.rc-card-actions {
  display: flex;
  gap: 0.5rem;
}

.rc-card-body {
  padding: var(--spacing-lg);
}

/* Multi-tag container (for host columns, etc.) */
.multi-tag-container {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px;
  background: #fff;
}
.multi-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0;
}
.multi-tag-list:not(:empty) {
  margin-bottom: 8px;
}
.multi-tag-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 10px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  border-radius: 5px;
  font-size: 0.85em;
  font-weight: 600;
  color: #1e40af;
  line-height: 1;
}
.multi-tag-item .tag-index {
  background: #2563eb;
  color: #fff;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.75em;
  font-weight: 700;
  margin-right: 2px;
}
.multi-tag-item .tag-remove {
  cursor: pointer;
  color: #93c5fd;
  font-size: 0.8em;
  padding: 2px;
  border-radius: 3px;
  transition: all 0.15s;
  line-height: 1;
}
.multi-tag-item .tag-remove:hover {
  color: #dc2626;
  background: #fee2e2;
}
.multi-tag-item.tag-exclude {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  border-color: #f87171;
  color: #b91c1c;
}
.multi-tag-item.tag-exclude .tag-remove {
  color: #fca5a5;
}
.multi-tag-item.tag-exclude .tag-remove:hover {
  color: #dc2626;
  background: #fee2e2;
}
.multi-tag-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.multi-tag-input-row .form-control {
  flex: 1;
  margin-bottom: 0 !important;
}

/* Auto-apply toggle switch */
.auto-apply-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  margin-left: 4px;
}
.auto-apply-toggle input[type="checkbox"] {
  display: none;
}
.auto-apply-slider {
  position: relative;
  width: 36px;
  height: 20px;
  background: #cbd5e1;
  border-radius: 20px;
  transition: background 0.25s;
  flex-shrink: 0;
}
.auto-apply-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.auto-apply-toggle input:checked + .auto-apply-slider {
  background: #22c55e;
}
.auto-apply-toggle input:checked + .auto-apply-slider::after {
  transform: translateX(16px);
}
.auto-apply-label {
  font-size: 0.8em;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
  transition: color 0.25s;
}
.auto-apply-toggle input:checked ~ .auto-apply-label {
  color: #16a34a;
  font-weight: 600;
}
/* Disabled state - chưa chọn mẫu template */
.auto-apply-toggle input:disabled + .auto-apply-slider {
  background: #e2e8f0;
  cursor: not-allowed;
  opacity: 0.5;
}
.auto-apply-toggle:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Form Row */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

/* Time Mode Sections */
.rc-time-single,
.rc-time-dual {
  transition: var(--transition);
}

/* Room Filter Config */
.rc-room-filter-config {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-200);
}

/* Analysis Results */
.rc-analysis-result {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--gray-50);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
}

.analysis-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.analysis-stat {
  padding: 0.5rem 1rem;
  background: var(--white);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.analysis-stat strong {
  color: var(--primary);
}

.analysis-stat code {
  background: var(--primary-bg);
  color: var(--primary-dark);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

.analysis-list {
  font-size: 0.875rem;
}

.analysis-list ul {
  margin-top: 0.5rem;
  padding-left: 1.5rem;
}

.analysis-list li {
  margin-bottom: 0.25rem;
}

.analysis-list code {
  background: var(--gray-100);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

/* Custom Columns */
.custom-column-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
}

.custom-column-row .form-control {
  flex: 1;
}

.custom-column-row .custom-col-column {
  max-width: 80px;
}

.custom-column-row .btn-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Preview */
.rc-preview-options {
  margin-bottom: var(--spacing-md);
}

.rc-preview-options .form-group {
  max-width: 150px;
  margin-bottom: 0;
}

.rc-preview-container {
  min-height: 200px;
  max-height: 500px;
  overflow: auto;
}

.rc-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--gray-400);
}

.rc-preview-empty i {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.rc-preview-table-wrapper {
  overflow-x: auto;
}

.rc-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.rc-preview-table th,
.rc-preview-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border: 1px solid var(--gray-200);
}

.rc-preview-table th {
  background: var(--gray-100);
  font-weight: 600;
  white-space: nowrap;
}

.rc-preview-table tr:nth-child(even) {
  background: var(--gray-50);
}

.rc-preview-errors {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--warning-bg);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.rc-preview-errors ul {
  margin-top: 0.5rem;
  padding-left: 1.5rem;
}

/* Actions */
.rc-actions {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.rc-actions .btn {
  flex: 1;
  max-width: 200px;
}

/* Button Success */
.btn-success {
  background: var(--success);
  color: var(--white);
  border-color: var(--success);
}

.btn-success:hover {
  background: #059669;
  border-color: #059669;
}

/* Button Small */
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
  .rc-tabs {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .rc-tab {
    padding: 0.5rem 1rem;
  }

  .rc-tab span {
    display: none;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .rc-actions {
    flex-wrap: wrap;
  }

  .rc-actions .btn {
    max-width: none;
  }

  .rc-info-header {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .rc-header-actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
  }

  .rc-sync-badges {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ==========================================
   PIC AVATAR TABS & UPLOAD
   ========================================== */
.pic-avatar-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}
.pic-avatar-tab {
  padding: 6px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.85em;
  color: #64748b;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}
.pic-avatar-tab:hover { color: #6366f1; }
.pic-avatar-tab.active {
  color: #6366f1;
  border-bottom-color: #6366f1;
  font-weight: 600;
}
.pic-avatar-tab i { margin-right: 4px; }
.pic-avatar-tab-content { position: relative; }
.pic-avatar-url-pane,
.pic-avatar-upload-pane { display: none; }
.pic-avatar-url-pane.active,
.pic-avatar-upload-pane.active { display: block; }
.pic-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: #64748b;
  text-align: center;
  gap: 4px;
}
.pic-upload-zone:hover,
.pic-upload-zone.drag-over {
  border-color: #6366f1;
  background: #f0f0ff;
  color: #6366f1;
}
.pic-upload-zone i { font-size: 1.5em; margin-bottom: 4px; }
.pic-upload-zone small { font-size: 0.8em; color: #94a3b8; }
.pic-avatar-preview {
  display: flex;
  align-items: center;
}

/* ==========================================
   PIC URL LIST
   ========================================== */
.pic-urls-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.pic-urls-empty {
  color: #94a3b8;
  font-size: 0.85em;
  padding: 10px;
  text-align: center;
  border: 1px dashed #e2e8f0;
  border-radius: 6px;
}
.pic-urls-empty i { margin-right: 4px; }
.pic-url-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pic-url-fields {
  display: flex;
  flex: 1;
  gap: 6px;
}
.pic-url-fields .pic-url-title {
  flex: 0 0 35%;
  min-width: 0;
}
.pic-url-fields .pic-url-value {
  flex: 1;
  min-width: 0;
}
.pic-url-row .pic-url-remove {
  flex-shrink: 0;
}

/* ==========================================
   PIC DETAIL VIEW MODAL
   ========================================== */
.pic-detail-view { padding: 0; }

/* -- Header: Avatar + Info -- */
.pic-detail-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  background: linear-gradient(135deg, #f0f0ff 0%, #f8fafc 100%);
  border-radius: 12px;
  margin-bottom: 18px;
  border: 1px solid #e8e8f8;
}
/* Avatar wrap - contains avatar + edit btn + editor */
.pic-detail-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.pic-detail-avatar {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 2px 12px rgba(99,102,241,0.15);
  cursor: pointer;
}
.pic-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s;
}
.pic-detail-avatar:hover img { transform: scale(1.05); }
.pic-detail-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(99,102,241,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  color: #fff;
  font-size: 1.2em;
  pointer-events: none;
}
.pic-detail-avatar:hover .pic-detail-avatar-overlay { opacity: 1; }
.pic-detail-avatar-empty {
  background: #e2e8f0;
  cursor: default;
}
.pic-detail-avatar-empty .pic-detail-avatar-placeholder,
.pic-detail-avatar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pic-detail-avatar-placeholder i { font-size: 2em; color: #94a3b8; }

/* Edit avatar button */
.pic-detail-avatar-edit {
  position: absolute;
  bottom: 0;
  right: -4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #6366f1;
  color: #fff;
  border: 2px solid #fff;
  font-size: 0.75em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.15s;
  z-index: 2;
}
.pic-detail-avatar-edit:hover { background: #4f46e5; transform: scale(1.1); }

/* Avatar editor inline (inside modal flow, not floating) */
.pic-detail-avatar-editor-inline {
  margin: 0;
  padding: 0 16px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.pic-avatar-editor-inline-inner {
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pic-avatar-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pic-avatar-editor-title {
  font-size: 0.85em;
  font-weight: 600;
  color: #6366f1;
}
.pic-avatar-editor-title i { margin-right: 6px; }
.pic-avatar-editor-close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.pic-avatar-editor-close:hover { background: #fee2e2; color: #ef4444; }
.pic-avatar-editor-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e8e8f0;
  padding-bottom: 8px;
}
.pic-avatar-editor-tab {
  flex: 1;
  padding: 5px 8px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.8em;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}
.pic-avatar-editor-tab:hover { background: #f1f5f9; }
.pic-avatar-editor-tab.active { background: #ede9fe; color: #6366f1; font-weight: 600; }
.pic-avatar-editor-tab i { margin-right: 4px; }
.pic-avatar-editor-url-pane,
.pic-avatar-editor-upload-pane { display: none; }
.pic-avatar-editor-url-pane.active,
.pic-avatar-editor-upload-pane.active { display: block; }
.pic-avatar-editor-url-pane .form-control { font-size: 0.85em; padding: 7px 10px; }
.pic-avatar-editor-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border: 2px dashed #e2e8f0;
  border-radius: 8px;
  color: #94a3b8;
  font-size: 0.82em;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.pic-avatar-editor-dropzone:hover,
.pic-avatar-editor-dropzone.drag-over {
  border-color: #6366f1;
  color: #6366f1;
  background: #faf5ff;
}
/* Avatar editor preview */
.pic-avatar-editor-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.pic-avatar-editor-preview img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e2e8f0;
  flex-shrink: 0;
}
.pic-avatar-editor-preview-remove {
  width: 24px;
  height: 24px;
  border: none;
  background: #fee2e2;
  color: #ef4444;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  transition: all 0.15s;
  flex-shrink: 0;
}
.pic-avatar-editor-preview-remove:hover { background: #ef4444; color: #fff; }
.pic-avatar-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.pic-avatar-editor-actions .btn { font-size: 0.8em; padding: 5px 12px; }
.pic-detail-info { flex: 1; min-width: 0; }
.pic-detail-name {
  font-size: 1.25em;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 5px 0;
  line-height: 1.2;
}
.pic-detail-code {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 0.85em;
}
.pic-detail-code i { color: #6366f1; font-size: 0.95em; }
.pic-detail-code code {
  background: #fff;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 0.95em;
  color: #6366f1;
  border: 1px solid #e2e8f0;
}
.pic-detail-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pic-detail-badges .badge-type {
  background: #ede9fe;
  color: #6366f1;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: 500;
}
.pic-detail-badges .badge-type i { margin-right: 4px; }

/* -- Contact rows -- */
.pic-detail-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.pic-detail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
  transition: background 0.15s;
}
.pic-detail-row:hover { background: #f1f5f9; }
.pic-detail-row-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #ede9fe;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pic-detail-row-icon i { color: #6366f1; font-size: 0.9em; }
.pic-detail-row-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.pic-detail-row-label {
  font-size: 0.75em;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.pic-detail-row-content > span:last-child {
  font-size: 0.95em;
  color: #334155;
}

/* -- Sections -- */
.pic-detail-section { margin-bottom: 14px; }
.pic-detail-section:last-child { margin-bottom: 0; }
.pic-detail-section-title {
  font-weight: 600;
  font-size: 0.85em;
  color: #475569;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pic-detail-section-title i { color: #6366f1; margin-right: 6px; }

/* -- URLs -- */
.pic-detail-urls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pic-detail-url-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6366f1;
  text-decoration: none;
  padding: 8px 14px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 0.9em;
  border: 1px solid #f1f5f9;
  transition: all 0.15s;
}
.pic-detail-url-item:hover {
  background: #ede9fe;
  border-color: #c7d2fe;
  transform: translateX(4px);
}
.pic-detail-url-item i { font-size: 0.8em; flex-shrink: 0; }
.pic-detail-url-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pic-detail-empty {
  color: #94a3b8;
  font-style: italic;
  font-size: 0.9em;
  padding: 8px 0;
}

/* -- Description -- */
.pic-detail-desc-content {
  background: #f8fafc;
  border-radius: 10px;
  padding: 14px;
  font-size: 0.9em;
  line-height: 1.7;
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid #f1f5f9;
}
.pic-detail-desc-content img { max-width: 100%; height: auto; border-radius: 6px; }
.pic-detail-desc-content p { margin: 0 0 8px 0; }
.pic-detail-desc-content p:last-child { margin-bottom: 0; }

/* -- PIC Room Badges (table) -- */
.pic-room-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pic-room-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}
.pic-room-badge i { font-size: 0.7rem; }
.pic-room-op {
  background: #ede9fe;
  color: #6d28d9;
}
.pic-room-tech {
  background: #fef3c7;
  color: #b45309;
}
.pic-room-inactive {
  opacity: 0.5;
  text-decoration: line-through;
}
.pic-no-rooms {
  color: var(--gray-400);
  font-size: 0.85rem;
  font-style: italic;
}
.pic-brand-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pic-brand-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 10px;
  white-space: nowrap;
  line-height: 1.4;
}
.pic-brand-label {
  font-size: 0.85rem;
  color: var(--gray-600);
}

/* -- PIC Detail Rooms (modal) -- */
.pic-detail-rooms-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pic-detail-rooms-brand-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: #4338ca;
  margin-bottom: 6px;
}
.pic-detail-rooms-brand-name i { margin-right: 4px; }
.pic-detail-rooms-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 8px;
}
.pic-detail-room-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 0.85rem;
}
.pic-detail-room-role {
  font-size: 0.75rem;
  padding: 1px 6px;
  border-radius: 8px;
  background: #e0e7ff;
  color: #4338ca;
}
.pic-detail-room-platform {
  font-size: 0.75rem;
  padding: 1px 6px;
  border-radius: 8px;
  background: #f0fdf4;
  color: #166534;
}

/* -- PIC Room Assignment Edit UI -- */
.pic-detail-section-title .pic-room-add-btn {
  float: right;
  font-size: 0.78rem;
  padding: 2px 10px;
  border-radius: 12px;
}
.pic-room-add-form {
  margin-top: 10px;
  padding: 10px;
  background: #f1f5f9;
  border-radius: 8px;
  border: 1px dashed #cbd5e1;
}
.pic-room-add-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.pic-room-add-row select {
  min-width: 120px;
  flex: 1;
  font-size: 0.85rem;
  padding: 4px 8px;
}
.pic-room-add-row .btn {
  flex-shrink: 0;
  padding: 4px 10px;
}
.pic-detail-room-item .pic-room-remove-btn {
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s;
  width: 22px;
  height: 22px;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.pic-detail-room-item:hover .pic-room-remove-btn {
  opacity: 1;
}
.btn-icon-xs {
  width: 22px !important;
  height: 22px !important;
  font-size: 0.7rem !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* -- Lightbox -- */
.pic-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pic-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}
.pic-lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  animation: picLightboxIn 0.2s ease;
}
.pic-lightbox-content img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  display: block;
}
.pic-lightbox-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: none;
  color: #475569;
  font-size: 1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: all 0.15s;
}
.pic-lightbox-close:hover { background: #ef4444; color: #fff; }
@keyframes picLightboxIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* -- Warning button style for edit -- */
.pic-detail-modal .btn-warning {
  background: #f59e0b;
  color: #fff;
  border: none;
}
.pic-detail-modal .btn-warning:hover {
  background: #d97706;
}

/* ==========================================
   PIC MULTI-SELECT COMPONENT
   ========================================== */
.pic-multi-select {
  position: relative;
  width: 100%;
}

.pic-selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  min-height: 42px;
  max-height: 120px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.pic-selected-list:hover {
  border-color: var(--primary);
}

.pic-selected-list:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.pic-placeholder {
  color: var(--gray-400);
  font-size: 0.875rem;
}

.pic-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: var(--primary-bg);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.pic-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  transition: background var(--transition), color var(--transition);
}

.pic-tag-remove:hover {
  background: var(--primary);
  color: var(--white);
}

.pic-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin-top: 4px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: none;
  max-height: 300px;
  overflow: hidden;
}

.pic-dropdown.show {
  display: block;
}

.pic-search-box {
  padding: 0.5rem;
  border-bottom: 1px solid var(--gray-200);
}

.pic-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  outline: none;
  transition: border-color var(--transition);
}

.pic-search-input:focus {
  border-color: var(--primary);
}

.pic-options {
  max-height: 240px;
  overflow-y: auto;
}

.pic-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background var(--transition);
}

.pic-option:hover {
  background: var(--gray-50);
}

.pic-option.selected {
  background: var(--primary-bg);
}

.pic-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.pic-option-name {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-800);
}

.pic-option-code {
  font-size: 0.75rem;
  color: var(--gray-500);
  font-family: monospace;
}

.pic-no-options {
  padding: 1rem;
  text-align: center;
  color: var(--gray-500);
  font-size: 0.875rem;
}

/* PIC Table Styles */
.pic-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pic-name {
  font-weight: 500;
  color: var(--gray-800);
}

/* Action Buttons */
.action-btns {
  display: flex;
  gap: 0.5rem;
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--gray-100);
  color: var(--gray-600);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.btn-icon:hover {
  background: var(--primary);
  color: var(--white);
}

.btn-icon-danger:hover {
  background: var(--danger);
  color: var(--white);
}

/* Form Help Text */
.form-help {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--gray-500);
}

/* Required Indicator */
.required {
  color: var(--danger);
}

/* Room PICs Display */
.room-pics {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-width: 250px;
}

.pic-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  word-break: break-word;
}

.pic-row i {
  color: var(--gray-500);
  width: 16px;
  min-width: 16px;
  text-align: center;
  margin-top: 2px;
}

.pic-row i.fa-headset {
  color: var(--primary);
}

.pic-row i.fa-tools {
  color: var(--secondary);
}

/* PIC names list */
.pic-row span {
  flex: 1;
}

/* PIC Type Badges */
.badge-operation {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--info-bg);
  color: var(--info);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-tech {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--warning-bg);
  color: #b45309;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-operation i,
.badge-tech i {
  font-size: 0.6875rem;
}

/* PIC Type Icon in multi-select */
.pic-type-icon {
  color: var(--gray-400);
  font-size: 0.75rem;
}

.pic-option .pic-type-icon.fa-headset {
  color: var(--info);
}

.pic-option .pic-type-icon.fa-tools {
  color: var(--warning);
}

/* ==========================================
   PLATFORM CONFIG STYLES
   ========================================== */
.platform-item {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
}

.platform-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.platform-name-input {
  flex: 1;
  min-width: 150px;
}

.platform-aliases-input {
  flex: 2;
  min-width: 200px;
}

.platform-name-input input,
.platform-aliases-input input {
  width: 100%;
  font-size: 0.875rem;
}

.btn-remove-platform {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-remove-platform i {
  margin: 0;
}

#addPlatformBtn {
  margin-top: 0.5rem;
}

#addPlatformBtn i {
  margin-right: 0.375rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .platform-row {
    flex-wrap: wrap;
  }

  .platform-name-input,
  .platform-aliases-input {
    flex: 1 1 100%;
  }

  .btn-remove-platform {
    margin-left: auto;
  }
}

/* ================================================
   SHEET TEST RESULT STYLES
   ================================================ */
.sheet-test-result {
  padding: var(--spacing-md);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.sheet-test-result.loading {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sheet-test-result.success {
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  color: #065f46;
}

.sheet-test-result.error {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
}

.sheet-test-result .test-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.sheet-test-result .test-details {
  margin-left: 1.5rem;
}

.sheet-test-result .test-detail-item {
  padding: 0.25rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.sheet-test-result .test-detail-item i {
  margin-top: 0.2rem;
  font-size: 0.75rem;
}

.sheet-test-result .test-sample-data {
  margin-top: 0.75rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  font-family: monospace;
  font-size: 0.8rem;
  max-height: 150px;
  overflow-y: auto;
}

.sheet-test-result .test-sample-data table {
  width: 100%;
  border-collapse: collapse;
}

.sheet-test-result .test-sample-data th,
.sheet-test-result .test-sample-data td {
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-test-result .test-sample-data th {
  background: rgba(0, 0, 0, 0.05);
  font-weight: 600;
}

/* ==========================================
   TEMPLATES PAGE STYLES
   ========================================== */

/* Info Card */
.info-card {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: linear-gradient(135deg, #ebf4ff 0%, #f0f7ff 100%);
  border: 1px solid #c3dafe;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-md);
}

.info-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: white;
  border-radius: var(--radius);
  font-size: 1.25rem;
}

.info-card-content h4 {
  margin: 0 0 var(--spacing-xs);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
}

.info-card-content p {
  margin: 0 0 var(--spacing-sm);
  color: var(--gray-600);
  font-size: 0.875rem;
}

.info-card-content code {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.875rem;
}

/* Title Templates Table */
.title-templates-table {
  table-layout: fixed;
  width: 100%;
}

.title-templates-table td {
  white-space: normal;
  overflow: hidden;
}

/* Template Code Display */
.template-code {
  display: block;
  padding: 0.375rem 0.625rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.8125rem;
  color: var(--gray-700);
  word-break: break-all;
  overflow-wrap: break-word;
}

/* Preview Box */
.preview-box {
  padding: var(--spacing-md);
  background: var(--gray-50);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius);
  min-height: 50px;
  display: flex;
  align-items: center;
}

.preview-box strong {
  color: var(--gray-800);
}

.preview-text {
  color: var(--success);
  font-weight: 500;
  word-break: break-all;
  overflow-wrap: break-word;
  display: block;
}

/* Placeholder Buttons */
.placeholder-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: var(--spacing-sm);
  background: var(--gray-50);
  border-radius: var(--radius);
}

.placeholder-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-family: monospace;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.placeholder-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Button Sizes */
.btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

/* Margin utilities */
.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Text utilities */
.text-center {
  text-align: center;
}

.text-muted {
  color: var(--gray-500);
}

/* Badge variants */
.badge-success {
  background: var(--success-bg);
  color: var(--success);
}

.badge-secondary {
  background: var(--gray-100);
  color: var(--gray-500);
}

/* Modal Sizes (moved to main modal section) */

/* Template Actions in Room Config */
.rc-template-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Horizontal Rule */
hr.my-4 {
  margin: 1.5rem 0;
  border: none;
  border-top: 1px solid var(--gray-200);
}

/* Text utilities */
.text-success {
  color: var(--success);
}

.mt-4 {
  margin-top: 1rem;
}

/* ================================================
 * GENERATED TITLE/CART COLUMNS
 * ================================================ */

.col-generated-title,
.col-generated-cart {
  min-width: 150px;
  max-width: 250px;
  overflow: hidden;
}

.cell-generated-title,
.cell-generated-cart {
  padding: 0.35rem 0.4rem !important;
  white-space: nowrap;
}

.generated-content {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--gray-200);
  max-width: 100%;
  overflow: hidden;
}

.generated-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--gray-700);
}

.btn-copy-inline,
.btn-edit-inline {
  flex-shrink: 0;
  padding: 0.125rem 0.25rem;
  background: transparent;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-copy-inline:hover {
  background: var(--gray-200);
  color: var(--primary);
}

.btn-edit-inline:hover {
  background: var(--gray-200);
  color: var(--warning);
}

.btn-copy-inline.copied {
  color: var(--success);
}

.btn-copy-inline i,
.btn-edit-inline i {
  font-size: 0.7rem;
}

/* Cell with add button */
.cell-generated-title .btn-edit-inline,
.cell-generated-cart .btn-edit-inline {
  opacity: 0.6;
}

.cell-generated-title:hover .btn-edit-inline,
.cell-generated-cart:hover .btn-edit-inline {
  opacity: 1;
}

/* Locked edit button when auto mode is ON */
.btn-edit-inline.btn-auto-locked {
  opacity: 0.35 !important;
  cursor: not-allowed;
  color: var(--gray-500);
}
.btn-edit-inline.btn-auto-locked:hover {
  background: transparent;
  color: var(--gray-500);
  opacity: 0.5 !important;
}
.cell-generated-title:hover .btn-edit-inline.btn-auto-locked,
.cell-generated-cart:hover .btn-edit-inline.btn-auto-locked {
  opacity: 0.5 !important;
}

/* Title column styling */
.cell-generated-title .generated-content {
  border-left: 3px solid var(--primary);
}

/* Cart column styling */
.cell-generated-cart .generated-content {
  border-left: 3px solid var(--success);
}

/* Schedule table specific compact layout */
#schedulesTable {
  min-width: 800px;
}

#schedulesTable th,
#schedulesTable td {
  padding: 0.4rem 0.5rem;
}

#schedulesTable .table-actions {
  gap: 1px;
}

/* Responsive handling for generated columns */
@media (max-width: 1400px) {
  .col-generated-title,
  .col-generated-cart {
    min-width: 130px;
    max-width: 200px;
  }
}

@media (max-width: 1200px) {
  .col-generated-title,
  .col-generated-cart {
    min-width: 120px;
    max-width: 180px;
  }
}

/* Schedule table template info indicator */
.schedule-template-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: var(--gray-50);
  border-radius: var(--radius);
}

.schedule-template-info i {
  color: var(--primary);
}

/* ================================================
 * EXPORT BUTTONS FOR GENERATED TITLES
 * ================================================ */

.schedule-export-container {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--gray-300);
}

.export-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.export-label {
  font-size: 0.875rem;
  color: var(--gray-600);
  font-weight: 500;
  margin-right: 0.5rem;
}

.export-label i {
  margin-right: 0.25rem;
}

.export-buttons .btn {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
}

.export-buttons .btn i {
  margin-right: 0.25rem;
}

/* Button variants for export */
.export-buttons .btn-primary {
  border-color: var(--primary);
  color: var(--primary);
}

.export-buttons .btn-primary:hover {
  background: var(--primary);
  color: white;
}

.export-buttons .btn-success {
  border-color: var(--success);
  color: var(--success);
}

.export-buttons .btn-success:hover {
  background: var(--success);
  color: white;
}

/* Prominent filled export buttons */
.export-buttons .btn-export-filled-csv {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
  font-weight: 600;
}
.export-buttons .btn-export-filled-csv:hover {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}
.export-buttons .btn-export-filled-excel {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  font-weight: 600;
}
.export-buttons .btn-export-filled-excel:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

/* Responsive for export buttons */
@media (max-width: 768px) {
  .export-buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .export-label {
    margin-bottom: 0.5rem;
  }

  .export-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================
   CHECKBOX CARDS - Filter Link Selection
   ========================================== */

/* Checkbox Grid Container */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  max-height: 220px;
  overflow-y: auto;
  padding: 0.75rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}

.checkbox-grid::-webkit-scrollbar {
  width: 6px;
}

.checkbox-grid::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.checkbox-grid::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* Individual Checkbox Card */
.checkbox-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.875rem 0.5rem;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.checkbox-card:hover {
  border-color: var(--primary-light);
  background: var(--primary-bg);
  transform: translateY(-2px);
}

.checkbox-card.checked {
  border-color: var(--primary);
  background: var(--primary-bg);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.checkbox-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Checkbox Icon */
.checkbox-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 0.5rem;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  color: var(--gray-500);
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.checkbox-card.checked .checkbox-icon {
  background: var(--primary);
  color: var(--white);
}

.checkbox-card:hover:not(.checked) .checkbox-icon {
  background: var(--primary-light);
  color: var(--white);
}

/* Checkbox Text */
.checkbox-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-700);
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkbox-card.checked .checkbox-text {
  color: var(--primary-dark);
}

/* Check Mark */
.checkbox-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  border-radius: var(--radius-full);
  color: var(--white);
  font-size: 0.6rem;
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--transition-fast);
}

.checkbox-card.checked .checkbox-check {
  opacity: 1;
  transform: scale(1);
}

/* Badge Count */
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 0.5rem;
  background: var(--primary);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
}

/* Platform Colors for Room Cards */
.checkbox-card.platform-shopee.checked {
  border-color: var(--shopee);
  background: rgba(238, 77, 45, 0.08);
}

.checkbox-card.platform-shopee.checked .checkbox-icon {
  background: var(--shopee);
}

.checkbox-card.platform-shopee.checked .checkbox-check {
  background: var(--shopee);
}

.checkbox-card.platform-lazada.checked {
  border-color: var(--lazada);
  background: rgba(15, 20, 109, 0.08);
}

.checkbox-card.platform-lazada.checked .checkbox-icon {
  background: var(--lazada);
}

.checkbox-card.platform-lazada.checked .checkbox-check {
  background: var(--lazada);
}

.checkbox-card.platform-tiktok.checked {
  border-color: var(--tiktok);
  background: rgba(0, 0, 0, 0.05);
}

.checkbox-card.platform-tiktok.checked .checkbox-icon {
  background: var(--tiktok);
}

.checkbox-card.platform-tiktok.checked .checkbox-check {
  background: var(--tiktok);
}

.checkbox-card.platform-facebook.checked {
  border-color: var(--facebook);
  background: rgba(24, 119, 242, 0.08);
}

.checkbox-card.platform-facebook.checked .checkbox-icon {
  background: var(--facebook);
}

.checkbox-card.platform-facebook.checked .checkbox-check {
  background: var(--facebook);
}

.checkbox-card.platform-youtube.checked {
  border-color: var(--youtube);
  background: rgba(255, 0, 0, 0.08);
}

.checkbox-card.platform-youtube.checked .checkbox-icon {
  background: var(--youtube);
}

.checkbox-card.platform-youtube.checked .checkbox-check {
  background: var(--youtube);
}

/* Hint Text */
.hint-text {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.hint-text i {
  color: var(--warning);
  margin-right: 0.25rem;
}

/* Empty hint in checkbox grid */
.empty-hint {
  grid-column: 1 / -1;
  padding: 1.5rem;
  text-align: center;
  color: var(--gray-500);
  font-size: 0.875rem;
}

.empty-hint i {
  margin-right: 0.5rem;
  color: var(--info);
}

/* Form Section Title */
.form-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-700);
}

.form-section-title i {
  color: var(--primary);
  font-size: 0.875rem;
}

/* Form Row */
.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 576px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .checkbox-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    max-height: 180px;
  }

  .checkbox-card {
    padding: 0.625rem 0.375rem;
  }

  .checkbox-icon {
    width: 30px;
    height: 30px;
    font-size: 0.875rem;
  }

  .checkbox-text {
    font-size: 0.75rem;
  }
}


/* ==========================================
   SETTING CARD - Filter Link Advanced Settings
   ========================================== */
.setting-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 10px;
  gap: 16px;
}

.setting-card:hover {
  background: var(--gray-100, #f3f4f6);
  border-color: var(--gray-300, #d1d5db);
}

.setting-info {
  flex: 1;
}

.setting-info h4 {
  margin: 0 0 4px 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-900, #111827);
}

.setting-info p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--gray-500, #6b7280);
  line-height: 1.4;
}

.toggle-label.compact {
  justify-content: flex-end;
  flex-shrink: 0;
}

.toggle-label.compact span:first-child {
  display: none;
}

/* Character Count */
.char-count {
  display: block;
  text-align: right;
  font-size: 0.75rem;
  color: var(--gray-400, #9ca3af);
  margin-top: 4px;
}

/* Form Section Title Enhanced */
.form-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-700, #374151);
  margin: 24px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}

.form-section-title i {
  color: var(--primary, #4f46e5);
  font-size: 1rem;
}

.form-section-title:first-of-type {
  margin-top: 0;
}

/* ==========================================
   RICH TEXT EDITOR - TinyMCE Wrapper
   ========================================== */
.rich-editor-wrapper {
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.rich-editor-wrapper .tox-tinymce {
  border: none !important;
  border-radius: 0 !important;
}

.rich-editor-wrapper .tox-toolbar__primary {
  background: var(--gray-50, #f9fafb) !important;
  border-bottom: 1px solid var(--gray-200, #e5e7eb) !important;
}

.rich-editor-wrapper:focus-within {
  border-color: var(--primary, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.editor-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--gray-500, #6b7280);
}

.editor-hint i {
  margin-right: 4px;
  color: var(--primary, #4f46e5);
}

/* TinyMCE Custom Styles */
.tox .tox-statusbar {
  border-top: 1px solid var(--gray-200, #e5e7eb) !important;
}

.tox .tox-tbtn {
  cursor: pointer !important;
}

.tox .tox-tbtn:hover {
  background: var(--gray-100, #f3f4f6) !important;
}

/* Dark mode support for TinyMCE */
.dark-mode .rich-editor-wrapper {
  border-color: var(--gray-600);
  background: var(--gray-800);
}

.dark-mode .tox-toolbar__primary {
  background: var(--gray-700) !important;
}

/* ==========================================
   TAG INPUT - Notification Links
   ========================================== */
.field-description {
  font-size: 0.8125rem;
  color: var(--gray-500, #6b7280);
  margin: 4px 0 12px 0;
}

.tag-input-wrapper {
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  min-height: 50px;
}

.tag-input-wrapper:focus-within {
  border-color: var(--primary, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.tag-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--primary-light, #eef2ff);
  border: 1px solid var(--primary, #4f46e5);
  border-radius: 6px;
  font-size: 0.8125rem;
  color: var(--primary, #4f46e5);
  max-width: 100%;
}

.tag-item i {
  font-size: 0.75rem;
  opacity: 0.7;
}

.tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px;
}

.tag-remove {
  border: none;
  background: none;
  color: var(--gray-500, #6b7280);
  cursor: pointer;
  padding: 0 2px;
  margin-left: 4px;
  font-size: 0.875rem;
  line-height: 1;
  transition: color 0.2s;
}

.tag-remove:hover {
  color: var(--danger, #ef4444);
}

.tag-input {
  width: 100%;
  border: none;
  outline: none;
  padding: 8px;
  font-size: 0.875rem;
  background: transparent;
}

.tag-input::placeholder {
  color: var(--gray-400, #9ca3af);
}

/* ==========================================
   IMAGE LINKS CONTAINER
   ========================================== */
.image-links-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.image-link-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
  transition: all 0.2s;
}

.image-link-item:hover {
  background: #fff;
  border-color: var(--gray-300, #d1d5db);
  box-shadow: var(--shadow-sm);
}

.image-preview {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--gray-100, #f3f4f6);
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-link-info {
  flex: 1;
  min-width: 0;
}

.image-url {
  font-size: 0.8125rem;
  color: var(--gray-600, #4b5563);
  word-break: break-all;
}

.btn-icon-remove {
  width: 36px;
  height: 36px;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 6px;
  background: #fff;
  color: var(--gray-500, #6b7280);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.btn-icon-remove:hover {
  background: var(--danger-light, #fef2f2);
  border-color: var(--danger, #ef4444);
  color: var(--danger, #ef4444);
}

.add-image-link-row {
  display: flex;
  gap: 10px;
}

.add-image-link-row .form-control {
  flex: 1;
}

.add-image-link-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Empty state for image container */
.image-links-container:empty::before {
  content: 'Chưa có hình ảnh nào';
  display: block;
  padding: 20px;
  text-align: center;
  color: var(--gray-400, #9ca3af);
  font-size: 0.875rem;
  background: var(--gray-50, #f9fafb);
  border: 1px dashed var(--gray-300, #d1d5db);
  border-radius: 8px;
}

/* ==========================================
   OVERNIGHT OPTIONS
   ========================================== */
.overnight-options {
  margin-top: 16px;
  padding: 16px;
  background: var(--gray-50, #f9fafb);
  border-radius: 10px;
  border: 1px solid var(--gray-200, #e5e7eb);
  transition: all 0.3s ease;
}

.overnight-options.hidden {
  display: none;
}

.overnight-options label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700, #374151);
  margin-bottom: 10px;
}

.input-group-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.input-prefix,
.input-suffix {
  font-size: 0.875rem;
  color: var(--gray-600, #4b5563);
  white-space: nowrap;
}

.input-group-inline .form-control-sm {
  width: auto;
  min-width: 80px;
  max-width: 100px;
}

.overnight-options .hint-text {
  display: block;
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--gray-500, #6b7280);
}

.overnight-options .hint-text i {
  color: var(--warning, #f59e0b);
  margin-right: 5px;
}

/* ==========================================
   AUTO REFRESH OPTIONS
   ========================================== */
.auto-refresh-options {
  margin-left: 16px;
  padding-left: 16px;
  border-left: 3px solid var(--primary, #4f46e5);
  transition: all 0.3s ease;
}

.auto-refresh-options.hidden {
  display: none;
}

.auto-refresh-options label {
  font-size: 0.875rem;
  color: var(--gray-600, #4b5563);
  margin-bottom: 6px;
}

.auto-refresh-options select {
  max-width: 200px;
}

/* ==========================================
   RICH EDITOR WRAPPER
   ========================================== */
.rich-editor-wrapper {
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.rich-editor-wrapper .tox-tinymce {
  border: none !important;
  border-radius: 0 !important;
}

.editor-hint {
  display: block;
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--gray-500, #6b7280);
}

.editor-hint i {
  color: var(--info, #0ea5e9);
  margin-right: 5px;
}

/* Setting card enhancements */
.setting-card + .setting-card {
  margin-top: 12px;
}

/* Section divider style */
.form-section-title + .form-group {
  margin-top: 0;
}

/* ==========================================
   IMAGE UPLOAD ZONE - Attached Images
   ========================================== */
.image-upload-zone {
  border: 2px dashed var(--gray-300, #d1d5db);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  background: var(--gray-50, #f9fafb);
  transition: all 0.3s ease;
  cursor: pointer;
}

.image-upload-zone:hover {
  border-color: var(--primary, #4f46e5);
  background: var(--primary-bg, #eef2ff);
}

.image-upload-zone.drag-over {
  border-color: var(--primary, #4f46e5);
  background: var(--primary-bg, #eef2ff);
  transform: scale(1.01);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

.upload-icon {
  font-size: 3rem;
  color: var(--gray-400, #9ca3af);
  margin-bottom: 12px;
  transition: color 0.2s;
}

.image-upload-zone:hover .upload-icon,
.image-upload-zone.drag-over .upload-icon {
  color: var(--primary, #4f46e5);
}

.upload-text {
  font-size: 0.9375rem;
  color: var(--gray-600, #4b5563);
  margin-bottom: 16px;
}

.upload-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.upload-btn {
  cursor: pointer;
}

.upload-btn input[type="file"] {
  display: none;
}

.upload-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--gray-500, #6b7280);
  background: rgba(255, 255, 255, 0.6);
  padding: 8px 16px;
  border-radius: 6px;
}

.upload-info i {
  color: var(--info, #0ea5e9);
}

/* Attached Images Grid */
.attached-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.attached-images-grid:empty {
  display: none;
}

.attached-image-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gray-100, #f3f4f6);
  border: 2px solid var(--gray-200, #e5e7eb);
  transition: all 0.2s;
}

.attached-image-item:hover {
  border-color: var(--primary, #4f46e5);
  box-shadow: var(--shadow-md);
}

.attached-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.attached-image-item:hover .image-overlay {
  opacity: 1;
}

.btn-overlay {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--gray-700, #374151);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.btn-overlay:hover {
  background: #fff;
  transform: scale(1.1);
}

.btn-overlay.btn-danger:hover {
  background: var(--danger, #ef4444);
  color: #fff;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .image-upload-zone {
    padding: 24px 16px;
  }

  .upload-icon {
    font-size: 2.5rem;
  }

  .upload-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .upload-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .attached-images-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
  }

  .btn-overlay {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
  }
}

/* ==========================================
   NOTIFICATION LINKS - Simple Tag Style
   ========================================== */
.notif-links-wrapper {
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 10px;
  padding: 12px;
}

.notif-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  min-height: 40px;
}

.notif-links-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  color: var(--gray-400, #9ca3af);
  font-size: 0.875rem;
  font-style: italic;
}

/* Tag item */
.notif-link-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 12px;
  background: var(--white, #fff);
  border: 1px solid var(--primary-light, #a5b4fc);
  border-radius: 8px;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.notif-link-tag:hover {
  border-color: var(--primary, #6366f1);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15);
}

.notif-link-tag .tag-icon {
  color: var(--primary, #6366f1);
  font-size: 0.8rem;
}

.notif-link-tag .tag-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-dark, #4338ca);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tag buttons */
.notif-link-tag .tag-btn-edit,
.notif-link-tag .tag-btn-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--gray-400, #9ca3af);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.notif-link-tag .tag-btn-edit:hover {
  background: var(--primary-bg, #eef2ff);
  color: var(--primary, #6366f1);
}

.notif-link-tag .tag-btn-remove:hover {
  background: var(--danger-bg, #fef2f2);
  color: var(--danger, #ef4444);
}

/* Add link input row */
.notif-links-input-row {
  display: flex;
  gap: 10px;
}

.notif-links-input-row .form-control {
  flex: 1;
  font-size: 0.875rem;
  padding: 8px 12px;
  border-color: var(--gray-200, #e5e7eb);
}

.notif-links-input-row .form-control:focus {
  border-color: var(--primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Empty state */
.empty-list-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: var(--gray-50, #f8fafc);
  border: 1px dashed var(--gray-300, #d1d5db);
  border-radius: 8px;
  color: var(--gray-400, #9ca3af);
  font-size: 0.875rem;
}

.empty-list-hint i {
  font-size: 1rem;
}

/* ==========================================
   NOTIFICATION IMAGES GRID - Enhanced
   ========================================== */
.notification-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  min-height: 60px;
}

.notification-image-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gray-100, #f3f4f6);
  border: 2px solid var(--gray-200, #e5e7eb);
  transition: all 0.2s ease;
}

.notification-image-item:hover {
  border-color: var(--primary, #6366f1);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
  transform: translateY(-2px);
}

.notification-image-item .image-preview-box {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.notification-image-item .image-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.notification-image-item:hover .image-preview-box img {
  transform: scale(1.05);
}

.notification-image-item .image-preview-box.error {
  background: var(--danger-bg, #fef2f2);
}

.notification-image-item .image-preview-box.error::after {
  content: 'Lỗi tải hình';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  color: var(--danger, #ef4444);
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 8px;
  border-radius: 4px;
}

.notification-image-item .image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.notification-image-item:hover .image-overlay {
  opacity: 1;
}

.notification-image-item .image-url-text {
  padding: 6px 8px;
  font-size: 0.6875rem;
  color: var(--gray-500, #64748b);
  background: var(--white, #fff);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}

/* Add Image Form */
.add-image-form {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.add-image-form .form-control {
  flex: 1;
  font-size: 0.875rem;
}

.add-image-form .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hint text enhancement */
.hint-text {
  display: block;
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--gray-500, #64748b);
}

.hint-text i {
  color: var(--info, #0ea5e9);
  margin-right: 5px;
}

/* Responsive for notification components */
@media (max-width: 576px) {
  .notif-links-wrapper {
    padding: 10px;
  }

  .notif-link-tag {
    max-width: 100%;
  }

  .notif-link-tag .tag-title {
    max-width: 120px;
    font-size: 0.8125rem;
  }

  .notif-links-input-row {
    flex-direction: column;
  }

  .notif-links-input-row .btn {
    width: 100%;
  }

  .notification-images-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }

  .add-image-form {
    flex-direction: column;
  }

  .add-image-form .btn {
    width: 100%;
  }
}

/* ==========================================
   ATTACHED IMAGES - Enhanced Upload Area
   ========================================== */
.attached-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
  min-height: 50px;
}

.attached-image-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gray-100, #f3f4f6);
  border: 2px solid var(--gray-200, #e5e7eb);
  transition: all 0.2s ease;
}

.attached-image-item:hover {
  border-color: var(--primary, #6366f1);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.18);
  transform: translateY(-3px);
}

.attached-image-item .attached-image-preview {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.attached-image-item .attached-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.attached-image-item:hover .attached-image-preview img {
  transform: scale(1.08);
}

.attached-image-item .attached-image-preview.error {
  background: var(--danger-bg, #fef2f2);
}

.attached-image-item .attached-image-preview.error::after {
  content: 'Lỗi tải hình';
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  color: var(--danger, #ef4444);
  background: rgba(255, 255, 255, 0.9);
  padding: 3px 10px;
  border-radius: 4px;
}

.attached-image-item .attached-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.6) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  padding-bottom: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.attached-image-item:hover .attached-image-overlay {
  opacity: 1;
}

.attached-image-item .attached-image-url {
  padding: 8px 10px;
  font-size: 0.6875rem;
  color: var(--gray-500, #64748b);
  background: var(--white, #fff);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}

/* Upload Area */
.attached-images-upload-area {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.upload-drop-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: var(--gray-50, #f8fafc);
  border: 2px dashed var(--gray-300, #d1d5db);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-drop-zone:hover {
  background: var(--primary-bg, #eef2ff);
  border-color: var(--primary, #6366f1);
}

.upload-drop-zone.drag-over {
  background: var(--primary-bg, #eef2ff);
  border-color: var(--primary, #6366f1);
  transform: scale(1.02);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

.upload-drop-zone .drop-zone-icon {
  font-size: 2.5rem;
  color: var(--gray-400, #9ca3af);
  margin-bottom: 10px;
  transition: color 0.2s;
}

.upload-drop-zone:hover .drop-zone-icon,
.upload-drop-zone.drag-over .drop-zone-icon {
  color: var(--primary, #6366f1);
}

.upload-drop-zone .drop-zone-text {
  font-size: 0.9375rem;
  color: var(--gray-600, #4b5563);
  margin-bottom: 6px;
}

.upload-drop-zone .drop-zone-or {
  font-size: 0.8125rem;
  color: var(--gray-400, #9ca3af);
  margin-bottom: 12px;
}

.upload-drop-zone .drop-zone-buttons {
  display: flex;
  gap: 10px;
}

/* Upload URL Section */
.upload-url-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upload-url-input-group {
  display: flex;
  gap: 10px;
}

.upload-url-input-group .form-control {
  flex: 1;
  font-size: 0.875rem;
}

.upload-url-input-group .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Responsive for attached images */
@media (max-width: 768px) {
  .attached-images-upload-area {
    flex-direction: column;
  }

  .upload-drop-zone {
    padding: 20px 16px;
  }

  .upload-drop-zone .drop-zone-icon {
    font-size: 2rem;
  }

  .attached-images-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
  }

  .upload-url-input-group {
    flex-direction: column;
  }

  .upload-url-input-group .btn {
    width: 100%;
  }
}

/* ==========================================
   IMAGE PREVIEW MODAL - Lightbox Style
   ========================================== */
.image-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.image-preview-modal.active {
  opacity: 1;
}

.image-preview-modal.closing {
  opacity: 0;
}

.image-preview-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.image-preview-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.image-preview-content img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-preview-close {
  position: absolute;
  top: -45px;
  right: 0;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.25rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.image-preview-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.image-preview-loader {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 0.9rem;
}

.image-preview-loader i {
  font-size: 2rem;
}

/* ==========================================
   EDIT LINK POPUP MODAL
   ========================================== */
.edit-link-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.edit-link-modal.active {
  opacity: 1;
}

.edit-link-modal.closing {
  opacity: 0;
}

.edit-link-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.edit-link-dialog {
  position: relative;
  width: 100%;
  max-width: 450px;
  margin: 20px;
  background: var(--white, #fff);
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  z-index: 1;
  animation: slideUp 0.25s ease;
}

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

.edit-link-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}

.edit-link-header h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gray-800, #1f2937);
  display: flex;
  align-items: center;
  gap: 10px;
}

.edit-link-header h4 i {
  color: var(--primary, #6366f1);
}

.edit-link-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-500, #6b7280);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.edit-link-close:hover {
  background: var(--gray-200, #e5e7eb);
  color: var(--gray-700, #374151);
}

.edit-link-body {
  padding: 24px;
}

.edit-link-body .form-group {
  margin-bottom: 20px;
}

.edit-link-body .form-group:last-child {
  margin-bottom: 0;
}

.edit-link-body label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--gray-700, #374151);
  font-size: 0.9rem;
}

.edit-link-body label i {
  color: var(--gray-400, #9ca3af);
  font-size: 0.85rem;
}

.edit-link-body .form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 10px;
  font-size: 0.95rem;
  transition: all 0.15s ease;
}

.edit-link-body .form-control:focus {
  border-color: var(--primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  outline: none;
}

.edit-link-body .required {
  color: var(--danger, #ef4444);
}

.edit-link-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 24px;
  border-top: 1px solid var(--gray-200, #e5e7eb);
  background: var(--gray-50, #f9fafb);
  border-radius: 0 0 16px 16px;
}

.edit-link-footer .btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.edit-link-footer .btn-secondary {
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-600, #4b5563);
  border: 1px solid var(--gray-300, #d1d5db);
}

.edit-link-footer .btn-secondary:hover {
  background: var(--gray-200, #e5e7eb);
}

.edit-link-footer .btn-primary {
  background: var(--primary, #6366f1);
  color: #fff;
  border: none;
}

.edit-link-footer .btn-primary:hover {
  background: var(--primary-dark, #4f46e5);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

/* Responsive */
@media (max-width: 480px) {
  .edit-link-dialog {
    margin: 10px;
    border-radius: 12px;
  }

  .edit-link-header {
    padding: 14px 18px;
  }

  .edit-link-body {
    padding: 18px;
  }

  .edit-link-footer {
    padding: 14px 18px;
    flex-direction: column;
  }

  .edit-link-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .image-preview-close {
    top: 10px;
    right: 10px;
  }
}

/* ==========================================
   FILTER LINK MODAL - Premium Redesign 4.0
   ========================================== */

/* ---- Modal Container ---- */
.fl-modal.modal-overlay.active > .modal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: static;
  max-width: 1400px;
  width: 98%;
  height: 90vh;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 25px 60px rgba(0, 0, 0, 0.2),
    0 10px 24px rgba(0, 0, 0, 0.1);
  animation: flModalIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes flModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- Header ---- */
.fl-modal .modal-header {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  border-bottom: none;
  padding: 20px 28px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.fl-modal .modal-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 40%);
  pointer-events: none;
}

.fl-modal .modal-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.fl-modal .modal-header h3,
.fl-modal .modal-header .modal-title {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0,0,0,0.12);
  position: relative;
  z-index: 1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.fl-modal .modal-header h3::before,
.fl-modal .modal-header .modal-title::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
  animation: flPulse 2s ease infinite;
  flex-shrink: 0;
}

@keyframes flPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

/* Close button - positioned at top-right corner of MODAL */
.fl-modal .modal-close,
.fl-modal .modal-header .modal-close,
.fl-modal .modal-header .close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 100;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.fl-modal .modal-close:hover,
.fl-modal .modal-header .modal-close:hover,
.fl-modal .modal-header .close-btn:hover {
  background: rgba(0,0,0,0.45);
  color: #fff;
  transform: scale(1.1);
}

/* ---- Body ---- */
.fl-modal .modal-body {
  padding: 0;
  overflow: hidden;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ---- Form inside body ---- */
.fl-modal .modal-body .fl-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ---- Tabs wrapper (fixed, no scroll) ---- */
.fl-modal .modal-body .fl-tabs-wrapper {
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 10;
}

/* Reset inner .fl-tabs sticky when inside wrapper */
.fl-modal .modal-body .fl-tabs-wrapper .fl-tabs {
  position: relative;
  top: auto;
  box-shadow: none;
  background: transparent;
}

/* ---- Tab panels (the ONLY scroll container) ---- */
.fl-modal .modal-body .fl-tab-panels {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  min-height: 0;
}

.fl-modal .modal-body .fl-tab-panels::-webkit-scrollbar {
  width: 6px;
}

.fl-modal .modal-body .fl-tab-panels::-webkit-scrollbar-track {
  background: transparent;
}

.fl-modal .modal-body .fl-tab-panels::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 6px;
}

.fl-modal .modal-body .fl-tab-panels::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ---- Footer ---- */
.fl-modal .modal-footer {
  background: #fff;
  border-top: 1px solid #e2e8f0;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.fl-modal .modal-footer .btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: none;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  transition: all 0.25s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.fl-modal .modal-footer .btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.4s ease;
}

.fl-modal .modal-footer .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.fl-modal .modal-footer .btn-primary:hover::before {
  left: 100%;
}

.fl-modal .modal-footer .btn-secondary,
.fl-modal .modal-footer .btn-outline {
  background: #fff;
  border: 2px solid #e2e8f0;
  color: #475569;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.fl-modal .modal-footer .btn-secondary:hover,
.fl-modal .modal-footer .btn-outline:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  transform: translateY(-1px);
}

/* ---- Form container ---- */
.fl-form {
  display: flex;
  flex-direction: column;
}

/* ==========================================
   Tab Navigation - Premium Style
   ========================================== */
.fl-tabs {
  display: flex;
  gap: 6px;
  padding: 16px 24px;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.fl-tabs::-webkit-scrollbar {
  height: 4px;
}

.fl-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.fl-tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.fl-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 2px solid transparent;
  background: transparent;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.fl-tab i {
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.fl-tab span {
  position: relative;
}

.fl-tab:hover {
  background: #f1f5f9;
  color: #475569;
}

/* Tab Active */
.fl-tab.active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.35);
}

.fl-tab.active::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
  border-radius: 8px;
  pointer-events: none;
}

/* Tab notification badge */
.fl-tab .fl-tab-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
  border: 2px solid #fff;
}

/* ==========================================
   Tab Content
   ========================================== */
.fl-tab-content {
  display: none;
  padding: 24px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 50%);
}

.fl-tab-content.active {
  display: block;
  animation: flTabFadeIn 0.3s ease;
}

@keyframes flTabFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   Section Cards - Premium Glass Style
   ========================================== */
.fl-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 6px rgba(0, 0, 0, 0.02);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.fl-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fl-section:hover {
  border-color: #c7d2fe;
  box-shadow:
    0 4px 20px rgba(99, 102, 241, 0.08),
    0 8px 30px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.fl-section:hover::before {
  opacity: 1;
}

.fl-section:last-child {
  margin-bottom: 0;
}

/* Section Header - Premium Style */
.fl-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: linear-gradient(135deg, #fafbff 0%, #fff 100%);
  border-bottom: 1px solid #f1f5f9;
  position: relative;
}

/* Section Icon - Floating 3D Style */
.fl-section-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  color: #6366f1;
  border-radius: 14px;
  font-size: 1.1rem;
  box-shadow:
    0 4px 12px rgba(99, 102, 241, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.fl-section:hover .fl-section-icon {
  transform: scale(1.05) rotate(-3deg);
  box-shadow:
    0 6px 16px rgba(99, 102, 241, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Color variants for section icons */
.fl-section-icon.green {
  background: linear-gradient(135deg, #ecfdf5 0%, #bbf7d0 100%);
  color: #059669;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);
}

.fl-section-icon.orange {
  background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
  color: #ea580c;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.2);
}

.fl-section-icon.blue {
  background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%);
  color: #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.fl-section-icon.purple {
  background: linear-gradient(135deg, #faf5ff 0%, #e9d5ff 100%);
  color: #9333ea;
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.2);
}

.fl-section-icon.pink {
  background: linear-gradient(135deg, #fdf2f8 0%, #fbcfe8 100%);
  color: #db2777;
  box-shadow: 0 4px 12px rgba(219, 39, 119, 0.2);
}

.fl-section-icon.cyan {
  background: linear-gradient(135deg, #ecfeff 0%, #a5f3fc 100%);
  color: #0891b2;
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.2);
}

/* Section Title */
.fl-section-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #1e293b;
  flex: 1;
  letter-spacing: -0.02em;
}

/* Section Badge - Pill Style */
.fl-section-badge {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow:
    0 2px 8px rgba(99, 102, 241, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  letter-spacing: 0.02em;
}

/* Section Body */
.fl-section-body {
  padding: 24px;
  background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
}

/* ==========================================
   Form Fields - Ultra Premium Style
   ========================================== */
.fl-field {
  margin-bottom: 24px;
}

.fl-field:last-child {
  margin-bottom: 0;
}

/* Label with floating effect feel */
.fl-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.fl-label i {
  color: #8b5cf6;
  font-size: 0.9rem;
  opacity: 0.8;
}

.fl-required {
  color: #ef4444;
  margin-left: 2px;
  font-weight: 700;
  animation: requirePulse 2s ease infinite;
}

@keyframes requirePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Input Wrapper with glow effect */
.fl-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.fl-input-icon {
  position: absolute;
  left: 18px;
  color: #94a3b8;
  font-size: 1rem;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.fl-input-wrapper:focus-within .fl-input-icon {
  color: #6366f1;
  transform: scale(1.1);
}

/* Input - Neumorphic Style */
.fl-input {
  width: 100%;
  padding: 16px 18px 16px 50px;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  color: #1e293b;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.fl-input:hover {
  border-color: #c7d2fe;
  background: #fff;
}

.fl-input:focus {
  border-color: #6366f1;
  box-shadow:
    0 0 0 4px rgba(99, 102, 241, 0.1),
    0 4px 12px rgba(99, 102, 241, 0.08);
  outline: none;
  background: #fff;
}

.fl-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

/* Textarea */
.fl-textarea-wrapper {
  display: block;
}

.fl-textarea {
  width: 100%;
  padding: 16px 18px;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 500;
  resize: vertical;
  min-height: 110px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  color: #1e293b;
  line-height: 1.6;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.fl-textarea:hover {
  border-color: #c7d2fe;
  background: #fff;
}

.fl-textarea:focus {
  border-color: #6366f1;
  box-shadow:
    0 0 0 4px rgba(99, 102, 241, 0.1),
    0 4px 12px rgba(99, 102, 241, 0.08);
  outline: none;
  background: #fff;
}

/* Hint Box - Info Card Style */
.fl-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 16px;
  font-size: 0.8rem;
  color: #475569;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 12px;
  border-left: 4px solid #6366f1;
  line-height: 1.5;
}

.fl-hint i {
  color: #6366f1;
  font-size: 0.9rem;
  margin-top: 1px;
  flex-shrink: 0;
}

/* ==========================================
   Select - Custom Dropdown Style
   ========================================== */
.fl-select-wrapper {
  position: relative;
}

.fl-select {
  width: 100%;
  padding: 16px 48px 16px 18px;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 500;
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  cursor: pointer;
  appearance: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #1e293b;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.fl-select:hover {
  border-color: #c7d2fe;
  background: #fff;
}

.fl-select:focus {
  border-color: #6366f1;
  box-shadow:
    0 0 0 4px rgba(99, 102, 241, 0.1),
    0 4px 12px rgba(99, 102, 241, 0.08);
  outline: none;
  background: #fff;
}

.fl-select-arrow {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fl-select:focus + .fl-select-arrow {
  transform: translateY(-50%) rotate(180deg);
  color: #6366f1;
}

.fl-select-sm {
  padding: 12px 40px 12px 16px;
  font-size: 0.875rem;
  border-radius: 12px;
}

/* Row layout */
.fl-row {
  display: flex;
  gap: 24px;
}

.fl-field-half {
  flex: 1;
  min-width: 0;
}

/* ==========================================
   Toggle Card - Interactive Card Style
   ========================================== */
.fl-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: linear-gradient(135deg, #fff 0%, #fafbff 100%);
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.fl-toggle-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fl-toggle-card:hover {
  border-color: #c7d2fe;
  box-shadow:
    0 8px 25px rgba(99, 102, 241, 0.08),
    0 4px 10px rgba(0, 0, 0, 0.03);
  transform: translateY(-2px);
}

.fl-toggle-card:hover::before {
  opacity: 1;
}

.fl-toggle-card:last-child {
  margin-bottom: 0;
}

/* Toggle Info */
.fl-toggle-info {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: auto;
}

/* Toggle Icon - 3D Floating Style */
.fl-toggle-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border: none;
  border-radius: 14px;
  color: #64748b;
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.fl-toggle-card:hover .fl-toggle-icon {
  transform: scale(1.05) rotate(-3deg);
}

.fl-toggle-icon.active {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  box-shadow:
    0 6px 16px rgba(34, 197, 94, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Toggle Text */
.fl-toggle-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.fl-toggle-text strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.fl-toggle-text span {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.45;
}

/* ==========================================
   Switch - Premium Animated Toggle
   ========================================== */
.fl-switch {
  position: relative;
  width: 58px;
  height: 32px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Ensure switch stays on right in toggle cards */
.fl-toggle-card > .fl-switch {
  margin-left: 16px;
}

.fl-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.fl-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
  border-radius: 32px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.05);
}

.fl-switch-slider:before {
  content: '';
  position: absolute;
  height: 26px;
  width: 26px;
  left: 3px;
  bottom: 3px;
  background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-switch input:checked + .fl-switch-slider {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.15),
    0 0 20px rgba(99, 102, 241, 0.35);
}

.fl-switch input:checked + .fl-switch-slider:before {
  transform: translateX(26px);
  box-shadow:
    0 3px 12px rgba(99, 102, 241, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Switch hover effect */
.fl-switch:hover .fl-switch-slider:before {
  transform: scale(1.05);
}

.fl-switch:hover input:checked + .fl-switch-slider:before {
  transform: translateX(26px) scale(1.05);
}

/* ==========================================
   Conditional Content - Expandable
   ========================================== */
.fl-conditional {
  margin-top: 18px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 14px;
  animation: conditionalSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.fl-conditional::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 24px;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-left: 1px solid rgba(99, 102, 241, 0.15);
  border-top: 1px solid rgba(99, 102, 241, 0.15);
  transform: rotate(45deg);
}

@keyframes conditionalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 500px;
  }
}

.fl-conditional.hidden {
  display: none;
}

/* Time picker */
.fl-time-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.fl-time-label {
  font-size: 0.9rem;
  color: #475569;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ==========================================
   Room Grid - Ultra Premium Selection Cards
   ========================================== */
.fl-room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 14px;
  max-height: 340px;
  overflow-y: auto;
  padding: 8px;
  margin: -8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
}

.fl-room-grid::-webkit-scrollbar {
  width: 8px;
}

.fl-room-grid::-webkit-scrollbar-track {
  background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.05) 100%);
  border-radius: 8px;
}

.fl-room-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.fl-room-grid::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4f46e5 0%, #7c3aed 100%);
}

.fl-room-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 14px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Shimmer effect on hover */
.fl-room-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(99, 102, 241, 0.08) 50%,
    transparent 100%
  );
  transition: left 0.5s ease;
}

.fl-room-card:hover::before {
  left: 100%;
}

.fl-room-card:hover {
  border-color: #c7d2fe;
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 12px 28px rgba(99, 102, 241, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.05);
}

.fl-room-card.selected {
  border-color: #6366f1;
  background: linear-gradient(145deg, #eef2ff 0%, #e0e7ff 100%);
  box-shadow:
    0 8px 24px rgba(99, 102, 241, 0.25),
    0 0 0 3px rgba(99, 102, 241, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Pulse animation for selected state */
.fl-room-card.selected::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  border: 2px solid rgba(99, 102, 241, 0.4);
  animation: roomCardPulse 2s ease-in-out infinite;
}

@keyframes roomCardPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(1.03);
  }
}

.fl-room-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fl-room-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 14px;
  color: #64748b;
  font-size: 1.3rem;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.fl-room-card:hover .fl-room-icon {
  transform: scale(1.08) rotate(-3deg);
}

.fl-room-card.selected .fl-room-icon {
  transform: scale(1.1);
  box-shadow:
    0 6px 16px rgba(99, 102, 241, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Platform-specific icon styles with enhanced gradients */
.fl-room-card.platform-shopee .fl-room-icon {
  background: linear-gradient(145deg, #fff1ef 0%, #fecaca 100%);
  color: var(--shopee);
  box-shadow:
    0 4px 12px rgba(238, 77, 45, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.fl-room-card.platform-lazada .fl-room-icon {
  background: linear-gradient(145deg, #eef0ff 0%, #c7d2fe 100%);
  color: var(--lazada);
  box-shadow:
    0 4px 12px rgba(15, 36, 140, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.fl-room-card.platform-tiktok .fl-room-icon {
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  color: var(--tiktok);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.fl-room-card.platform-facebook .fl-room-icon {
  background: linear-gradient(145deg, #e7f3ff 0%, #bfdbfe 100%);
  color: var(--facebook);
  box-shadow:
    0 4px 12px rgba(24, 119, 242, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.fl-room-card.platform-youtube .fl-room-icon {
  background: linear-gradient(145deg, #ffebeb 0%, #fecaca 100%);
  color: var(--youtube);
  box-shadow:
    0 4px 12px rgba(255, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.fl-room-name {
  font-size: 0.82rem;
  font-weight: 650;
  color: #334155;
  text-align: center;
  line-height: 1.35;
  word-break: break-word;
  letter-spacing: -0.015em;
  transition: color 0.25s ease;
}

.fl-room-card.selected .fl-room-name {
  color: #4338ca;
}

.fl-room-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #e2e8f0 0%, #cbd5e1 100%);
  border-radius: 50%;
  color: #fff;
  font-size: 0.7rem;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(0.5) rotate(-180deg);
}

.fl-room-card.selected .fl-room-check {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  opacity: 1;
  transform: scale(1) rotate(0deg);
  box-shadow:
    0 3px 10px rgba(99, 102, 241, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Check icon bounce animation */
.fl-room-card.selected .fl-room-check i {
  animation: checkBounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s;
}

@keyframes checkBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ==========================================
   Empty State - Ultra Premium Illustration
   ========================================== */
.fl-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 55px 24px;
  color: #94a3b8;
  position: relative;
}

.fl-empty-state::before {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  animation: emptyStatePulse 3s ease-in-out infinite;
}

@keyframes emptyStatePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
}

.fl-empty-state i {
  font-size: 3.2rem;
  opacity: 0.5;
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
}

.fl-empty-state span {
  font-size: 0.95rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

/* ==========================================
   Links Container - Ultra Premium Glass
   ========================================== */
.fl-links-container {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transition: all 0.3s ease;
}

.fl-links-container:hover {
  border-color: #c7d2fe;
  box-shadow:
    0 8px 24px rgba(99, 102, 241, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-links-list {
  max-height: 240px;
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
}

.fl-links-list::-webkit-scrollbar {
  width: 6px;
}

.fl-links-list::-webkit-scrollbar-track {
  background: transparent;
}

.fl-links-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 6px;
}

.fl-links-list:empty {
  display: none;
}

.fl-links-add {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-top: 1px solid #e2e8f0;
}

.fl-links-add .fl-input-wrapper {
  flex: 1;
}

.fl-links-add .fl-input {
  padding-left: 46px;
}

/* ==========================================
   Button - Ultra Premium Interactive
   ========================================== */
.fl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border: none;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
}

/* Ripple effect container */
.fl-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.fl-btn:active::before {
  width: 300px;
  height: 300px;
}

.fl-btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  color: #fff;
  box-shadow:
    0 4px 16px rgba(99, 102, 241, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.fl-btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 8px 28px rgba(99, 102, 241, 0.45),
    0 4px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.fl-btn-primary:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow:
    0 4px 12px rgba(99, 102, 241, 0.3),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Shimmer animation for primary button */
.fl-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  transition: left 0.6s ease;
}

.fl-btn-primary:hover::after {
  left: 100%;
}

.fl-btn-secondary {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
  color: #475569;
  border: 2px solid #e2e8f0;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-btn-secondary:hover {
  background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
  border-color: #c7d2fe;
  color: #6366f1;
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(99, 102, 241, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-btn-secondary:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.fl-btn-sm {
  padding: 10px 16px;
  font-size: 0.82rem;
  border-radius: 12px;
}

.fl-btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
}

.fl-btn-icon:hover i {
  transform: scale(1.15);
}

.fl-btn i {
  transition: transform 0.25s ease;
}

/* ==========================================
   Images Grid - Ultra Premium Gallery
   ========================================== */
.fl-images-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
  padding: 4px;
}

.fl-images-grid:empty {
  display: none;
}

.fl-images-large {
  grid-template-columns: repeat(3, 1fr);
}

/* Grid for images with titles - wider cards for better title input */
.fl-images-grid:has(.fl-image-with-title) {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .fl-images-grid:has(.fl-image-with-title) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================
   Image Add Section - Ultra Premium Glass
   ========================================== */
.fl-image-add {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transition: all 0.3s ease;
}

.fl-image-add:hover {
  border-color: #c7d2fe;
  box-shadow:
    0 8px 28px rgba(99, 102, 241, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-image-add-tabs {
  display: flex;
  border-bottom: 2px solid #e2e8f0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 6px 6px 0;
  gap: 4px;
}

.fl-image-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border-radius: 12px 12px 0 0;
  margin-bottom: -2px;
}

.fl-image-tab i {
  font-size: 1rem;
  transition: all 0.3s ease;
}

.fl-image-tab:hover {
  color: #475569;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.fl-image-tab:hover i {
  transform: scale(1.15);
}

.fl-image-tab.active {
  color: #6366f1;
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border: 2px solid #e2e8f0;
  border-bottom: 2px solid #ffffff;
  box-shadow:
    0 -4px 12px rgba(99, 102, 241, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-image-tab.active i {
  color: #8b5cf6;
}

.fl-image-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 20%;
  right: 20%;
  height: 3px;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  border-radius: 3px 3px 0 0;
  animation: tabSlideIn 0.3s ease;
}

@keyframes tabSlideIn {
  from {
    left: 50%;
    right: 50%;
    opacity: 0;
  }
  to {
    left: 20%;
    right: 20%;
    opacity: 1;
  }
}

.fl-image-add-content {
  padding: 20px;
  background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
}

.fl-image-url-input {
  display: none;
  gap: 14px;
}

.fl-image-url-input.active {
  display: flex;
  animation: fadeSlideIn 0.3s ease;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fl-image-url-input .fl-input-wrapper {
  flex: 1;
}

.fl-image-upload-input {
  display: none;
}

.fl-image-add-content .fl-image-upload-input:not(.fl-image-url-input.active ~ .fl-image-upload-input) {
  display: block;
  animation: fadeSlideIn 0.3s ease;
}

.fl-image-url-input.active + .fl-image-upload-input {
  display: none !important;
}

/* ==========================================
   Upload Zone - Ultra Premium Animated Dropzone
   ========================================== */
.fl-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 28px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 3px dashed #c7d2fe;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle pattern background */
.fl-upload-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, #e2e8f0 1px, transparent 0);
  background-size: 24px 24px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.fl-upload-zone:hover::before {
  opacity: 0.3;
}

.fl-upload-zone:hover {
  border-color: #6366f1;
  background: linear-gradient(145deg, #eef2ff 0%, #e0e7ff 100%);
  transform: translateY(-3px);
  box-shadow:
    0 12px 32px rgba(99, 102, 241, 0.15),
    0 0 0 4px rgba(99, 102, 241, 0.08);
}

.fl-upload-zone.drag-over {
  border-color: #6366f1;
  border-style: solid;
  background: linear-gradient(145deg, #eef2ff 0%, #e0e7ff 100%);
  transform: scale(1.03);
  box-shadow:
    0 16px 40px rgba(99, 102, 241, 0.25),
    0 0 0 4px rgba(99, 102, 241, 0.15),
    inset 0 0 30px rgba(99, 102, 241, 0.05);
}

.fl-upload-zone.drag-over::before {
  opacity: 0;
}

.fl-upload-zone i {
  font-size: 2.8rem;
  color: #94a3b8;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

.fl-upload-zone:hover i {
  color: #6366f1;
  transform: scale(1.15) translateY(-4px);
}

.fl-upload-zone.drag-over i {
  color: #6366f1;
  transform: scale(1.2) translateY(-8px);
  animation: uploadBounce 0.6s ease infinite;
}

@keyframes uploadBounce {
  0%, 100% {
    transform: scale(1.2) translateY(-8px);
  }
  50% {
    transform: scale(1.2) translateY(-14px);
  }
}

.fl-upload-zone span {
  font-size: 0.95rem;
  font-weight: 650;
  color: #475569;
  position: relative;
  z-index: 1;
  letter-spacing: -0.01em;
  transition: all 0.3s ease;
}

.fl-upload-zone:hover span {
  color: #6366f1;
}

.fl-upload-zone small {
  font-size: 0.82rem;
  color: #94a3b8;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.fl-upload-zone:hover small {
  color: #64748b;
}

/* ==========================================
   Editor Wrapper - Ultra Premium Neumorphic
   ========================================== */
.fl-editor-wrapper {
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  background: linear-gradient(145deg, #ffffff 0%, #fafbff 100%);
}

.fl-editor-wrapper:hover {
  border-color: #c7d2fe;
  box-shadow:
    0 6px 18px rgba(99, 102, 241, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-editor-wrapper:focus-within {
  border-color: #6366f1;
  box-shadow:
    0 0 0 4px rgba(99, 102, 241, 0.12),
    0 8px 24px rgba(99, 102, 241, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-editor-wrapper .rich-editor {
  border: none !important;
  border-radius: 0 !important;
}

/* TinyMCE in Filter Link Form - Enhanced Style */
#filterLinkForm .tox-tinymce {
  border-radius: 12px !important;
  border: 2px solid #e2e8f0 !important;
  overflow: hidden;
}

#filterLinkForm .tox-tinymce:focus-within {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

#filterLinkForm .tox-toolbar__primary {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

#filterLinkForm .tox-edit-area {
  background: #fff !important;
}

#filterLinkForm .tox-statusbar {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* ==========================================
   Time Picker - Ultra Premium Style
   ========================================== */
.fl-time-picker .fl-input {
  min-width: 140px;
  text-align: center;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ==========================================
   Responsive - Part 2 Enhancements
   ========================================== */
/* Responsive */
@media (max-width: 640px) {
  .fl-tabs {
    padding: 12px;
    gap: 2px;
  }

  .fl-tab {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .fl-tab span {
    display: none;
  }

  .fl-tab-content {
    padding: 14px;
  }

  .fl-row {
    flex-direction: column;
    gap: 12px;
  }

  .fl-room-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fl-toggle-card {
    padding: 12px;
  }

  .fl-toggle-icon {
    width: 36px;
    height: 36px;
  }

  .fl-section-body {
    padding: 14px;
  }
}

/* ==========================================
   FILTER LINK - Image Cards Ultra Premium
   ========================================== */

/* Image Card - Premium Glass Effect */
.fl-image-card {
  position: relative;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-image-card:hover {
  border-color: #6366f1;
  box-shadow:
    0 8px 20px rgba(99, 102, 241, 0.15),
    0 0 0 2px rgba(99, 102, 241, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-3px);
}

.fl-image-card-lg {
  /* Larger cards for attached images */
}

.fl-image-thumb {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  overflow: hidden;
}

.fl-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fl-image-card:hover .fl-image-thumb img {
  transform: scale(1.08);
  filter: brightness(1.02);
}

.fl-image-thumb.error {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
}

.fl-image-thumb.error::after {
  content: '\f03e';
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  font-size: 2.2rem;
  color: #cbd5e1;
}

/* Image Actions Overlay - Premium Glass */
.fl-image-actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.55) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fl-image-card:hover .fl-image-actions {
  opacity: 1;
}

.fl-img-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #475569;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(8px);
  opacity: 0;
}

.fl-image-card:hover .fl-img-btn {
  transform: translateY(0);
  opacity: 1;
}

.fl-image-card:hover .fl-img-btn:nth-child(1) {
  transition-delay: 0.05s;
}

.fl-image-card:hover .fl-img-btn:nth-child(2) {
  transition-delay: 0.1s;
}

.fl-image-card:hover .fl-img-btn:nth-child(3) {
  transition-delay: 0.15s;
}

.fl-img-btn:hover {
  transform: scale(1.15) translateY(-2px);
}

.fl-img-view:hover {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  box-shadow:
    0 6px 16px rgba(99, 102, 241, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.fl-img-edit:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  box-shadow:
    0 6px 16px rgba(59, 130, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.fl-img-delete:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  box-shadow:
    0 6px 16px rgba(239, 68, 68, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Image Number Badge - Premium Floating */
.fl-image-number {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 6px;
  box-shadow:
    0 2px 8px rgba(99, 102, 241, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 2;
  transition: all 0.25s ease;
}

.fl-image-card:hover .fl-image-number {
  transform: scale(1.1);
}

/* Image Title Input - Clean & Readable */
.fl-image-title-input {
  padding: 8px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
}

.fl-image-title-input input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.82rem;
  color: #334155;
  background: #f8fafc;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.fl-image-title-input input::placeholder {
  color: #94a3b8;
  font-style: italic;
}

.fl-image-title-input input:focus {
  outline: none;
  border-color: #6366f1;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Image Info - Premium Glass Footer */
.fl-image-info {
  padding: 8px 10px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
}

.fl-image-url {
  display: block;
  font-size: 0.65rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.fl-image-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 8px;
  letter-spacing: -0.01em;
}

.fl-image-badge.upload {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #15803d;
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.12);
}

/* Empty State - Premium Illustration */
.fl-images-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 50px 24px;
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
  border: 3px dashed #c7d2fe;
  border-radius: 18px;
  color: #94a3b8;
  position: relative;
  overflow: hidden;
}

.fl-images-empty::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  animation: emptyImagePulse 3s ease-in-out infinite;
}

@keyframes emptyImagePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.2;
  }
}

.fl-images-empty i {
  font-size: 2.4rem;
  color: #94a3b8;
  position: relative;
  z-index: 1;
}

.fl-images-empty span {
  font-size: 0.92rem;
  font-weight: 600;
  color: #64748b;
  position: relative;
  z-index: 1;
}

/* ==========================================
   FILTER LINK - Edit Image URL Modal Ultra Premium
   ========================================== */

.fl-edit-url-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.fl-edit-url-modal.active {
  opacity: 1;
  visibility: visible;
}

.fl-edit-url-modal.closing {
  opacity: 0;
}

.fl-edit-url-backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.6) 0%,
    rgba(30, 41, 59, 0.7) 100%
  );
  backdrop-filter: blur(8px);
}

.fl-edit-url-dialog {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 20px;
  background: linear-gradient(145deg, #ffffff 0%, #fafbff 100%);
  border-radius: 24px;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  animation: editModalAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

@keyframes editModalAppear {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fl-edit-url-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  position: relative;
  overflow: hidden;
}

/* Shimmer effect on header */
.fl-edit-url-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  animation: editHeaderShimmer 3s ease-in-out infinite;
}

@keyframes editHeaderShimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

.fl-edit-url-header h4 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.fl-edit-url-header h4 i {
  color: #fff;
  font-size: 1.1rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  backdrop-filter: blur(4px);
}

.fl-edit-url-close {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 1;
}

.fl-edit-url-close:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: rotate(90deg);
}

.fl-edit-url-body {
  padding: 26px;
}

.fl-edit-url-preview {
  width: 100%;
  height: 200px;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e2e8f0;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.04);
  position: relative;
}

.fl-edit-url-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent 48%,
    rgba(99, 102, 241, 0.03) 50%,
    transparent 52%
  );
  background-size: 20px 20px;
  pointer-events: none;
}

.fl-edit-url-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.fl-edit-url-preview:hover img {
  transform: scale(1.02);
}

/* Wide dialog for edit image with tabs */
.fl-edit-url-dialog-wide {
  max-width: 680px;
}

.fl-edit-image-layout {
  display: flex;
  gap: 26px;
  align-items: flex-start;
}

.fl-edit-image-layout .fl-edit-url-preview {
  width: 220px;
  height: 180px;
  flex-shrink: 0;
  margin-bottom: 0;
  border: 2px solid #e2e8f0;
}

.fl-edit-image-options {
  flex: 1;
  min-width: 0;
}

/* Edit Image Tabs - Premium Style */
.fl-edit-image-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.fl-edit-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border: 2px solid #e2e8f0;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.fl-edit-tab i {
  transition: all 0.3s ease;
}

.fl-edit-tab:hover {
  border-color: #c7d2fe;
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
  color: #475569;
}

.fl-edit-tab:hover i {
  transform: scale(1.15);
}

.fl-edit-tab.active {
  border-color: #6366f1;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  color: #6366f1;
  box-shadow:
    0 4px 12px rgba(99, 102, 241, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.fl-edit-tab.active i {
  color: #8b5cf6;
}

/* Edit Image Content */
.fl-edit-image-content {
  min-height: 90px;
}

.fl-edit-url-input {
  display: none;
  gap: 12px;
}

.fl-edit-url-input.active {
  display: flex;
  animation: fadeSlideIn 0.3s ease;
}

.fl-edit-url-input .fl-input-wrapper {
  flex: 1;
}

.fl-edit-upload-input {
  display: none;
}

.fl-edit-upload-input.active {
  display: block;
}

.fl-edit-upload-input .fl-cover-dropzone {
  padding: 20px;
  min-height: auto;
}

@media (max-width: 640px) {
  .fl-edit-image-layout {
    flex-direction: column;
  }

  .fl-edit-image-layout .fl-edit-url-preview {
    width: 100%;
    height: 140px;
  }
}

.fl-edit-url-footer {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 20px 26px;
  border-top: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 0 0 24px 24px;
}

/* ==========================================
   Responsive - Part 3 Enhancements
   ========================================== */
@media (max-width: 480px) {
  .fl-edit-url-dialog {
    margin: 10px;
    border-radius: 20px;
  }

  .fl-edit-url-header {
    padding: 16px 20px;
  }

  .fl-edit-url-header h4 {
    font-size: 1rem;
  }

  .fl-edit-url-body {
    padding: 20px;
  }

  .fl-edit-url-footer {
    padding: 16px 20px;
    flex-direction: column;
    gap: 10px;
  }

  .fl-edit-url-footer .fl-btn {
    width: 100%;
    justify-content: center;
  }

  .fl-img-btn {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }

  .fl-image-add-tabs {
    padding: 4px 4px 0;
  }

  .fl-image-tab {
    padding: 12px 14px;
    font-size: 0.8rem;
  }

  .fl-upload-zone {
    padding: 32px 20px;
  }

  .fl-upload-zone i {
    font-size: 2.4rem;
  }

  .fl-images-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .fl-images-large {
    grid-template-columns: repeat(2, 1fr);
  }

  .fl-img-btn {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }
}

/* ==========================================
   FILTER LINK - Notification Links Ultra Premium
   ========================================== */

/* Links Empty State - Premium */
.fl-links-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px;
  color: #94a3b8;
  position: relative;
}

.fl-links-empty::before {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  animation: emptyLinksPulse 3s ease-in-out infinite;
}

@keyframes emptyLinksPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
}

.fl-links-empty i {
  font-size: 1.8rem;
  color: #94a3b8;
  position: relative;
  z-index: 1;
}

.fl-links-empty span {
  font-size: 0.88rem;
  font-weight: 600;
  color: #64748b;
  position: relative;
  z-index: 1;
}

/* Link Item - Premium Glass */
.fl-link-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.fl-link-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.fl-link-item:last-child {
  margin-bottom: 0;
}

.fl-link-item:hover {
  border-color: #c7d2fe;
  background: linear-gradient(145deg, #eef2ff 0%, #e0e7ff 100%);
  transform: translateX(6px);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.12);
}

.fl-link-item:hover::before {
  transform: scaleY(1);
}

/* Link Icon - Premium */
.fl-link-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.fl-link-item:hover .fl-link-icon {
  background: linear-gradient(145deg, #eef2ff 0%, #c7d2fe 100%);
  transform: scale(1.08);
}

.fl-link-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.fl-link-icon i {
  font-size: 1rem;
  color: var(--gray-500);
}

.fl-link-item:hover .fl-link-icon {
  background: var(--primary);
}

.fl-link-item:hover .fl-link-icon i {
  color: var(--white);
}

/* Link Content */
.fl-link-content {
  flex: 1;
  min-width: 0;
}

.fl-link-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.fl-link-url {
  font-size: 0.75rem;
  color: var(--gray-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Link Actions */
.fl-link-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.fl-link-item:hover .fl-link-actions {
  opacity: 1;
}

.fl-link-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fl-link-btn:hover {
  transform: scale(1.1);
}

.fl-link-edit:hover {
  background: var(--info);
  color: var(--white);
}

.fl-link-delete:hover {
  background: var(--danger);
  color: var(--white);
}

/* Responsive for links */
@media (max-width: 480px) {
  .fl-link-item {
    padding: 10px 12px;
    gap: 10px;
  }

  .fl-link-icon {
    width: 32px;
    height: 32px;
  }

  .fl-link-actions {
    opacity: 1;
  }

  .fl-link-btn {
    width: 28px;
    height: 28px;
  }
}

/* =========================================
   FILTER LINK - EVENTS SECTION
   ========================================= */

/* Events List */
.fl-events-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Events Empty State */
.fl-events-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--gray-50);
  border: 2px dashed var(--gray-200);
  border-radius: 12px;
  text-align: center;
}

.fl-events-empty i {
  font-size: 3rem;
  color: var(--gray-300);
  margin-bottom: 16px;
}

.fl-events-empty span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.fl-events-empty small {
  font-size: 0.85rem;
  color: var(--gray-400);
}

/* Event Item */
.fl-event-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fl-event-item:hover {
  border-color: var(--primary-light);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
  transform: translateY(-2px);
}

.fl-event-item.inactive {
  opacity: 0.6;
  background: var(--gray-50);
}

.fl-event-item.inactive:hover {
  opacity: 0.8;
}

/* Event Cover Image */
.fl-event-cover {
  width: 100px;
  height: 80px;
  flex-shrink: 0;
  background: var(--gray-100);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fl-event-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fl-event-cover i {
  font-size: 1.8rem;
  color: var(--gray-300);
}

.fl-event-cover.no-image {
  background: var(--gray-100);
}

.fl-event-cover.no-image img {
  display: none;
}

.fl-event-cover.no-image::after {
  content: '\f03e';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--gray-300);
}

/* Event Content */
.fl-event-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fl-event-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.fl-event-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.3;
}

.fl-event-title em {
  color: var(--gray-400);
  font-weight: 400;
}

.fl-event-status .status-active {
  color: var(--success);
}

.fl-event-status .status-inactive {
  color: var(--gray-400);
}

/* Event Date Badge */
.fl-event-date {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fl-event-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}

.fl-event-badge i {
  font-size: 0.7rem;
}

.fl-event-badge.today {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
}

.fl-event-badge.range {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1e40af;
}

.fl-event-badge.always {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46;
}

/* Event Source (Room/Brand) */
.fl-event-source {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.fl-event-source-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 600;
}

.fl-event-source-tag i {
  font-size: 0.65rem;
}

.fl-event-source-tag.brand {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
}

.fl-event-source-tag.room {
  background: rgba(6, 182, 212, 0.1);
  color: #0891b2;
}

/* Event Preview */
.fl-event-preview {
  font-size: 0.85rem;
  color: var(--gray-500);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Event Actions */
.fl-event-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.fl-event-item:hover .fl-event-actions {
  opacity: 1;
}

.fl-event-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fl-event-btn:hover {
  transform: scale(1.1);
}

.fl-event-edit:hover {
  background: var(--info);
  color: var(--white);
}

.fl-event-toggle:hover {
  background: var(--warning);
  color: var(--white);
}

.fl-event-delete:hover {
  background: var(--danger);
  color: var(--white);
}

/* Section header with button */
.fl-section-header .fl-btn {
  margin-left: auto;
}

.fl-btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
}

/* Responsive for events */
@media (max-width: 640px) {
  .fl-event-item {
    flex-direction: column;
    gap: 12px;
  }

  .fl-event-cover {
    width: 100%;
    height: 140px;
  }

  .fl-event-actions {
    flex-direction: row;
    opacity: 1;
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .fl-event-item {
    padding: 12px;
  }

  .fl-event-cover {
    height: 120px;
  }

  .fl-event-title {
    font-size: 0.95rem;
  }

  .fl-event-badge {
    font-size: 0.7rem;
    padding: 3px 8px;
  }
}

/* =========================================
   FILTER LINK - EVENT MODAL
   ========================================= */

/* Event Modal Overlay */
.fl-event-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.fl-event-modal.active {
  opacity: 1;
}

.fl-event-modal.closing {
  opacity: 0;
}

.fl-event-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

/* Event Modal Dialog */
.fl-event-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 950px;
  max-height: 92vh;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  animation: eventModalSlideUp 0.25s ease;
  z-index: 1;
}

/* TinyMCE in Event Modal - ensure proper display */
.fl-event-modal .tox.tox-tinymce {
  border-radius: 12px;
  border: 1px solid var(--gray-300);
  z-index: 10;
}

.fl-event-modal .tox .tox-toolbar,
.fl-event-modal .tox .tox-toolbar__primary {
  background: #f8fafc !important;
}

.fl-event-modal .tox .tox-tbtn {
  cursor: pointer;
}

.fl-event-modal .tox .tox-edit-area__iframe {
  background: #fff;
}

/* TinyMCE auxiliary elements (dropdowns, color picker, etc.) - ensure proper z-index */
.tox-tinymce-aux {
  z-index: 100001 !important;
}

.tox .tox-menu,
.tox .tox-dialog,
.tox .tox-dialog-wrap {
  z-index: 100002 !important;
}

.tox .tox-collection__item {
  cursor: pointer;
}

@keyframes eventModalSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fl-event-modal.closing .fl-event-modal-dialog {
  animation: eventModalSlideDown 0.2s ease forwards;
}

@keyframes eventModalSlideDown {
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
}

/* Modal Header */
.fl-event-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-200);
}

.fl-event-modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: 10px;
}

.fl-event-modal-header h3 i {
  color: var(--primary);
}

.fl-event-modal-close {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--gray-100);
  color: var(--gray-500);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.fl-event-modal-close:hover {
  background: var(--gray-200);
  color: var(--gray-700);
}

/* Modal Body */
.fl-event-modal-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* Event Form */
.fl-event-form .fl-field {
  margin-bottom: 20px;
}

.fl-event-form .fl-field:last-child {
  margin-bottom: 0;
}

/* Event Title Input - Larger */
.fl-event-form #eventTitle {
  font-size: 1.1rem;
  font-weight: 500;
  padding: 14px 16px;
  border-width: 2px;
}

.fl-event-form #eventTitle:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* TinyMCE Container in Event Form */
.fl-event-form .tox-tinymce {
  border-radius: 10px !important;
  border: 2px solid var(--gray-200) !important;
}

.fl-event-form .tox-tinymce:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* Cover Image Section */
.fl-event-cover-section {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-100);
}

.fl-event-cover-preview {
  width: 180px;
  height: 120px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--gray-100), var(--gray-50));
  border: 2px dashed var(--gray-200);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.2s ease;
}

.fl-event-cover-preview i {
  font-size: 2rem;
  color: var(--gray-300);
  margin-bottom: 8px;
}

.fl-event-cover-preview span {
  font-size: 0.8rem;
  color: var(--gray-400);
}

.fl-event-cover-preview.has-image {
  border-style: solid;
  border-color: var(--primary-light);
}

.fl-event-cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cover Actions */
.fl-event-cover-actions {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fl-event-cover-tabs {
  display: flex;
  gap: 8px;
}

.fl-cover-tab {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-600);
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.fl-cover-tab:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.fl-cover-tab.active {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}

/* Cover Inputs */
.fl-event-cover-inputs {
  flex: 1;
}

.fl-cover-upload-input,
.fl-cover-url-input {
  display: none;
}

.fl-cover-upload-input.active,
.fl-cover-url-input.active {
  display: flex;
}

.fl-cover-url-input {
  gap: 8px;
}

.fl-cover-url-input .fl-input-wrapper {
  flex: 1;
}

/* Cover Dropzone */
.fl-cover-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--gray-50);
  border: 2px dashed var(--gray-200);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 80px;
}

.fl-cover-dropzone:hover {
  border-color: var(--primary-light);
  background: var(--primary-bg);
}

.fl-cover-dropzone.dragover {
  border-color: var(--primary);
  background: var(--primary-bg);
  transform: scale(1.02);
}

.fl-cover-dropzone i {
  font-size: 1.5rem;
  color: var(--gray-400);
  margin-bottom: 6px;
}

.fl-cover-dropzone span {
  font-size: 0.85rem;
  color: var(--gray-600);
  font-weight: 500;
}

.fl-cover-dropzone small {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: 4px;
}

/* Date Type Options */
.fl-date-type-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* 4 columns layout for Filter Link date type */
.fl-date-type-options.fl-date-type-4cols {
  grid-template-columns: repeat(4, 1fr);
}

/* Specific Date Section (for Filter Link) */
.fl-specific-date-section {
  display: none;
  margin-top: 16px;
  padding: 16px;
  background: var(--gray-50);
  border-radius: 12px;
  animation: fadeInSlide 0.2s ease;
}

.fl-specific-date-section.active {
  display: block;
}

.fl-date-type-option {
  cursor: pointer;
}

.fl-date-type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fl-date-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.fl-date-type-card i {
  font-size: 1.5rem;
  color: var(--gray-400);
  transition: color 0.2s ease;
}

.fl-date-type-card span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-600);
  text-align: center;
}

.fl-date-type-option:hover .fl-date-type-card {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.fl-date-type-option.active .fl-date-type-card {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.fl-date-type-option.active .fl-date-type-card i {
  color: var(--primary);
}

.fl-date-type-option.active .fl-date-type-card span {
  color: var(--primary-dark);
}

/* Date Range Section */
.fl-date-range-section {
  display: none;
  margin-top: 16px;
  padding: 16px;
  background: var(--gray-50);
  border-radius: 12px;
  animation: fadeInSlide 0.2s ease;
}

.fl-date-range-section.active {
  display: block;
}

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

.fl-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.fl-field-row:last-child {
  margin-bottom: 0;
}

.fl-field-row .fl-field {
  margin-bottom: 0;
}

/* Toggle Inline */
.fl-toggle-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--gray-50);
  border-radius: 10px;
  cursor: pointer;
}

.fl-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--gray-700);
}

.fl-toggle-label i {
  color: var(--gray-400);
}

.fl-toggle-text {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--gray-500);
}

/* Modal Footer */
.fl-event-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  border-radius: 0 0 16px 16px;
}

/* Button styles for modal */
.fl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fl-btn-primary {
  background: var(--primary);
  color: var(--white);
}

.fl-btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.fl-btn-secondary {
  background: var(--gray-100);
  color: var(--gray-600);
}

.fl-btn-secondary:hover {
  background: var(--gray-200);
}

.fl-btn-danger {
  background: var(--danger);
  color: var(--white);
}

.fl-btn-danger:hover {
  background: #dc2626;
}

.fl-btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
}

/* Responsive Event Modal */
@media (max-width: 768px) {
  .fl-event-modal {
    padding: 10px;
  }

  .fl-event-modal-dialog {
    max-height: 95vh;
  }

  .fl-event-cover-section {
    flex-direction: column;
  }

  .fl-event-cover-preview {
    width: 100%;
    height: 160px;
  }

  .fl-date-type-options {
    grid-template-columns: 1fr;
  }

  .fl-date-type-options.fl-date-type-4cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .fl-field-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .fl-date-type-options.fl-date-type-4cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .fl-event-modal-header {
    padding: 16px 20px;
  }

  .fl-event-modal-body {
    padding: 20px;
  }

  .fl-event-modal-footer {
    padding: 16px 20px;
    flex-direction: column;
  }

  .fl-event-modal-footer .fl-btn {
    width: 100%;
  }

  .fl-cover-dropzone {
    min-height: 60px;
    padding: 12px;
  }
}

/* ==========================================
   GOOGLE ACCOUNT SECTION (Sync Page)
   ========================================== */

.google-account-section {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

/* OAuth Config Panel */
.google-oauth-config {
  margin-bottom: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}

.google-oauth-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.google-oauth-config-header:hover {
  background: #f1f5f9;
}

.google-oauth-config-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}

.google-oauth-config-title > i {
  color: #94a3b8;
}

.google-oauth-config-arrow {
  color: #94a3b8;
  font-size: 12px;
  transition: transform 0.3s ease;
}

.google-oauth-config-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #fef2f2;
  color: #dc2626;
}

.google-oauth-config-badge.configured {
  background: #f0fdf4;
  color: #16a34a;
}

.google-oauth-config-body {
  padding: 14px;
  border-top: 1px solid #e2e8f0;
  animation: googleFadeIn 0.2s ease;
}

.google-oauth-config-field {
  margin-bottom: 12px;
}

.google-oauth-config-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 4px;
}

.google-oauth-config-field .form-control {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'SF Mono', 'Consolas', monospace;
  transition: border-color 0.2s;
}

.google-oauth-config-field .form-control:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.google-oauth-config-field small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: #94a3b8;
}

.input-with-toggle {
  position: relative;
  display: flex;
}

.input-with-toggle .form-control {
  padding-right: 36px;
}

.btn-toggle-secret {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 34px;
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 6px 6px 0;
  transition: color 0.2s;
}

.btn-toggle-secret:hover {
  color: #475569;
}

.google-oauth-config-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.google-oauth-config-source {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}

/* Chưa kết nối */
.google-not-connected {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: googleFadeIn 0.3s ease;
}

.google-not-connected .google-connect-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.google-connect-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary, #64748b);
  font-size: 14px;
}

/* --- Shared Accounts (dùng chung tài khoản) --- */
.google-shared-accounts {
  width: 100%;
}

.google-shared-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.google-shared-label i {
  color: var(--primary, #6366f1);
}

.google-shared-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.google-shared-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--gray-50, #f8fafc);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.google-shared-item:hover {
  background: #fff;
  border-color: var(--primary, #6366f1);
  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.1);
}

.google-shared-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.google-shared-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.google-shared-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e8eaf6;
  color: #4285f4;
  font-size: 14px;
  flex-shrink: 0;
}

.google-shared-item-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.google-shared-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.google-shared-item-email {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.google-shared-item-brands {
  font-size: 11px;
  color: var(--text-tertiary, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.google-use-account-btn {
  flex-shrink: 0;
  font-size: 12px !important;
  padding: 4px 12px !important;
}

.google-shared-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 4px;
  color: var(--text-tertiary, #94a3b8);
  font-size: 12px;
}

.google-shared-divider::before,
.google-shared-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200, #e2e8f0);
}

/* --- Shared Note (ghi chú dùng chung khi đã kết nối) --- */
.google-shared-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: 12px;
  color: #1e40af;
  margin-top: 8px;
}

.google-shared-note i {
  color: #3b82f6;
  flex-shrink: 0;
}

.google-connect-icon {
  font-size: 20px;
  color: var(--text-tertiary, #94a3b8);
}

.btn-google {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-google:hover {
  background: #f8f9fa;
  border-color: #c6c9cc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.google-btn-logo {
  width: 18px;
  height: 18px;
}

/* Đã kết nối */
.google-connected {
  /* shown/hidden via .hidden class */
  animation: googleFadeIn 0.3s ease;
}

@keyframes googleFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Disconnect button polish */
.google-user-info .btn-ghost.text-danger {
  transition: all 0.2s ease;
  border-radius: 8px;
  padding: 6px 8px;
}

.google-user-info .btn-ghost.text-danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

.google-user-info .btn-ghost.text-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.google-detail-info {
  margin-top: 10px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12.5px;
  color: #475569;
}

.google-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.google-detail-row i {
  width: 14px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
}

.google-detail-row strong {
  color: #334155;
  font-weight: 600;
}

.google-token-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 4px;
  flex-shrink: 0;
}

.google-token-dot.active {
  background: #22c55e;
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}

.google-token-dot.expired {
  background: #ef4444;
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
}

.google-token-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--warning-bg, #fef3c7);
  border: 1px solid var(--warning, #f59e0b);
  border-radius: 8px;
  font-size: 13px;
  color: #92400e;
}

.google-token-warning i {
  color: var(--warning, #f59e0b);
  flex-shrink: 0;
}

.google-token-warning span {
  flex: 1;
}

.btn-google-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.btn-google-sm:hover {
  background: #f8f9fa;
}

.google-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.google-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
}

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

.google-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.google-user-email {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive */
@media (max-width: 480px) {
  .google-not-connected {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .google-connect-prompt {
    justify-content: center;
  }

  .btn-google {
    justify-content: center;
  }
}

/* ==========================================
   USERS TABLE - REDESIGN
   ========================================== */

/* Table layout */
.users-table .th-stt { width: 50px; text-align: center; }
.users-table .th-user { min-width: 280px; }
.users-table .th-role { width: 120px; text-align: center; }
.users-table .th-auth { width: 150px; text-align: center; }
.users-table .th-status { width: 120px; text-align: center; }
.users-table .th-date { width: 120px; text-align: center; }
.users-table .th-actions { width: 130px; text-align: center; }

.users-table .td-stt {
  text-align: center;
  color: var(--gray-400);
  font-size: 0.8rem;
  font-weight: 500;
}

.users-table .td-role,
.users-table .td-auth,
.users-table .td-status,
.users-table .td-date {
  text-align: center;
}

.users-table .td-actions {
  text-align: center;
}

/* User row hover */
.users-table .user-row {
  transition: background-color var(--transition-fast);
}

.users-table .user-row:hover {
  background-color: var(--gray-50);
}

/* User info cell */
.user-tbl-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-tbl-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.user-tbl-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--gray-200);
}

.user-tbl-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
}

.user-tbl-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-tbl-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-tbl-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.user-tbl-username {
  color: var(--primary);
  font-weight: 500;
}

.user-tbl-email-sep {
  color: var(--gray-300);
}

.user-tbl-email {
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Role badges */
.user-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.user-role-badge i {
  font-size: 0.65rem;
}

.role-admin {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  border: 1px solid #fcd34d;
}

.role-editor {
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  color: #075985;
  border: 1px solid #7dd3fc;
}

.role-viewer {
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
}

/* Auth provider badges */
.user-auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.user-auth-badge i {
  font-size: 0.7rem;
}

.auth-local {
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
}

.auth-google {
  background: #fef7f0;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.auth-both {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46;
  border: 1px solid #6ee7b7;
}

/* Status badges */
.user-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.user-status-badge i {
  font-size: 0.65rem;
}

.user-status-active {
  background: var(--success-bg);
  color: #065f46;
}

.user-status-inactive {
  background: var(--danger-bg);
  color: #991b1b;
}

/* Date cell */
.users-table .td-date {
  font-size: 0.8rem;
  color: var(--gray-600);
  line-height: 1.4;
}

.users-table .td-date small {
  color: var(--gray-400);
}

/* Action buttons */
.user-tbl-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.8rem;
}

.btn-action:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-action-key:hover {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

.btn-action-edit:hover {
  background: var(--primary-bg);
  border-color: var(--primary-light);
  color: var(--primary);
}

.btn-action-delete:hover {
  background: var(--danger-bg);
  border-color: #fca5a5;
  color: var(--danger);
}

/* Responsive */
@media (max-width: 768px) {
  .users-table .th-auth,
  .users-table .td-auth,
  .users-table .th-date,
  .users-table .td-date {
    display: none;
  }

  .users-table .th-user { min-width: 200px; }

  .user-tbl-email {
    max-width: 120px;
  }
}

/* ==========================================
   AVATAR UPLOAD IN MODAL
   ========================================== */

.avatar-upload-section {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--gray-50);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-lg);
}

.avatar-preview-wrap { flex-shrink: 0; }

.avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 3px solid var(--white);
  box-shadow: var(--shadow-md);
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-preview #avatarPreviewIcon {
  font-size: 3rem;
  color: var(--gray-400);
}

.avatar-controls {
  flex: 1;
  min-width: 0;
}

.avatar-controls > label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
  display: block;
}

.avatar-input-group {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.avatar-input-group .form-control {
  flex: 1;
  font-size: 0.8rem;
  padding: 6px 10px;
}

.avatar-input-group .btn { flex-shrink: 0; }

.avatar-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.avatar-upload-btn {
  cursor: pointer;
  font-size: 0.75rem !important;
}

.avatar-upload-section small {
  display: block;
  font-size: 0.7rem;
  color: var(--gray-500);
  line-height: 1.4;
}

@media (max-width: 480px) {
  .avatar-upload-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .avatar-input-group { flex-direction: column; }
  .avatar-upload-row { justify-content: center; }
}

/* ==========================================
   DROPDOWN AVATAR
   ========================================== */

.dropdown-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dropdown-avatar-wrap {
  flex-shrink: 0;
}

.dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gray-200);
}

/* ==========================================
   LOGS V2 - REDESIGN
   ========================================== */

.log-entry-v2 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition-fast);
}
.log-entry-v2:hover { background: var(--gray-50); }
.log-entry-v2:last-child { border-bottom: none; }

.log-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 80px;
}

.log-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  min-width: 48px;
}

.level-info { background: var(--info-bg); color: var(--info); }
.level-success { background: var(--success-bg); color: #065f46; }
.level-warning { background: var(--warning-bg); color: #92400e; }
.level-error { background: var(--danger-bg); color: var(--danger); }
.level-debug { background: var(--gray-100); color: var(--gray-500); }

.log-action-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: 500;
  background: var(--gray-100);
  color: var(--gray-600);
  white-space: nowrap;
}
.log-action-badge i { font-size: 0.6rem; }

.log-body { flex: 1; min-width: 0; }

.log-msg {
  font-size: 0.85rem;
  color: var(--gray-800);
  line-height: 1.5;
  word-break: break-word;
}

.log-details-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
}

.log-detail-item {
  font-size: 0.75rem;
  color: var(--gray-600);
  background: var(--white);
  padding: 2px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
}
.log-detail-item strong { color: var(--gray-700); font-weight: 600; }

.log-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.log-who, .log-brand, .log-ip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--gray-400);
}
.log-who i, .log-brand i, .log-ip i { font-size: 0.6rem; }
.log-who { color: var(--primary); font-weight: 500; }

.log-right {
  flex-shrink: 0;
  text-align: right;
  min-width: 90px;
}

.log-datetime {
  font-size: 0.75rem;
  color: var(--gray-500);
  line-height: 1.5;
}

.log-time-hour {
  color: var(--gray-400);
  font-size: 0.7rem;
}

@media (max-width: 768px) {
  .log-entry-v2 { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .log-left { flex-direction: row; min-width: auto; }
  .log-right { width: 100%; text-align: left; min-width: auto; }
  .log-datetime { font-size: 0.7rem; }
}

/* Import Preview */
.import-preview {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--gray-50, #f8f9fa);
  border: 1px solid var(--gray-200, #e9ecef);
  border-radius: var(--radius);
  max-height: 400px;
  overflow-y: auto;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.875rem;
}

.preview-header strong {
  color: var(--gray-700);
}

#previewInfo {
  color: var(--gray-500);
  font-size: 0.8125rem;
}

#previewTable {
  max-height: 200px;
  overflow: auto;
  margin-bottom: 0.75rem;
}

#previewTable table {
  width: 100%;
  font-size: 0.8125rem;
  border-collapse: collapse;
}

#previewTable th {
  position: sticky;
  top: 0;
  background: var(--white);
  padding: 0.5rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--gray-300);
  font-size: 0.75rem;
  color: var(--gray-700);
}

#previewTable td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--gray-200);
}

#previewValidation {
  font-size: 0.8125rem;
}

.validation-summary {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.validation-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.validation-item i {
  font-size: 0.75rem;
}

.validation-item.valid {
  color: var(--success, #28a745);
}

.validation-item.invalid {
  color: var(--danger, #dc3545);
}

.validation-errors {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  max-height: 100px;
  overflow-y: auto;
}

.validation-error {
  font-size: 0.75rem;
  color: #856404;
  margin-bottom: 0.25rem;
}

.validation-error:last-child {
  margin-bottom: 0;
}

/* Import/Export Footer */
.ie-card-footer {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.ie-card-footer .btn-sm {
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
}

/* Import History Section */
.import-history-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-700);
}

.section-title i {
  color: var(--primary);
  font-size: 0.9rem;
}

.import-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.import-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.import-history-item:hover {
  background: var(--gray-100);
  transform: translateX(2px);
}

.history-item-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.history-item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.875rem;
}

.history-item-icon.import {
  background: #e3f2fd;
  color: #1976d2;
}

.history-item-icon.export {
  background: #e8f5e9;
  color: #388e3c;
}

.history-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.history-item-title {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--gray-800);
}

.history-item-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.history-item-meta span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.history-item-meta i {
  font-size: 0.625rem;
}

.history-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.history-item-time {
  font-size: 0.75rem;
  color: var(--gray-400);
}

.history-item-status {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
}

.history-item-status.success {
  background: #d4edda;
  color: #155724;
}

.history-item-status.warning {
  background: #fff3cd;
  color: #856404;
}

.empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--gray-400);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.empty-state i {
  font-size: 2rem;
  opacity: 0.5;
}

/* Import Progress Overlay */
.import-progress-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.import-progress-overlay.active {
  display: flex;
}

.import-progress-content {
  background: var(--white);
  border-radius: 12px;
  padding: 2rem;
  min-width: 320px;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.progress-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.progress-header h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  color: var(--gray-800);
}

.progress-header p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--gray-500);
}

.progress-bar-container {
  width: 100%;
  height: 8px;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #42a5f5);
  border-radius: 4px;
  transition: width 0.3s ease;
  position: relative;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}

.progress-stat {
  text-align: center;
}

.progress-stat-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-800);
}

.progress-stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.25rem;
}

/* ==========================================
   RESPONSIVE DESIGN - IMPORT/EXPORT
   ========================================== */

@media (max-width: 1024px) {
  .import-export-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .import-history-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .history-item-right {
    align-items: flex-start;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    margin-top: 0.5rem;
  }

  .history-item-meta {
    flex-wrap: wrap;
  }

  .ie-card-footer {
    flex-direction: column;
  }

  .ie-card-footer button {
    width: 100%;
  }
}

/* ==========================================
   ANIMATIONS & TRANSITIONS
   ========================================== */

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

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.import-history-item {
  animation: slideInRight 0.3s ease-out;
}

.import-history-item:nth-child(1) { animation-delay: 0.05s; }
.import-history-item:nth-child(2) { animation-delay: 0.1s; }
.import-history-item:nth-child(3) { animation-delay: 0.15s; }
.import-history-item:nth-child(4) { animation-delay: 0.2s; }
.import-history-item:nth-child(5) { animation-delay: 0.25s; }

.import-preview {
  animation: fadeIn 0.3s ease-out;
}

.ie-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ie-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* File upload hover states */
.file-upload {
  transition: all 0.3s ease;
}

.file-upload:hover {
  border-color: var(--primary);
  background: #f8f9ff;
}

.file-upload.dragover {
  border-color: var(--primary);
  background: #e8f0fe;
  transform: scale(1.02);
}

/* Button loading state */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn .fas.fa-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================
   KEYBOARD SHORTCUTS HINT
   ========================================== */

.keyboard-hint {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

.keyboard-hint.show {
  opacity: 1;
}

.kbd {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.875em;
  margin: 0 0.125rem;
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .import-history-item {
    border-width: 2px;
  }

  .history-item-status {
    border: 1px solid currentColor;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================
   LOADING SKELETON
   ========================================== */

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-item {
  height: 60px;
  margin-bottom: 0.75rem;
}

/* ==========================================
   History Filters
   ========================================== */
.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.auto-refresh-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #64748b;
  transition: color 0.2s;
}

.auto-refresh-toggle:hover {
  color: #475569;
}

.auto-refresh-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.auto-refresh-toggle i {
  font-size: 0.85rem;
}

.auto-refresh-toggle input:checked ~ i {
  color: #10b981;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.history-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.filter-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.filter-select {
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9rem;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 160px;
}

.filter-select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.btn-clear-filters {
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-clear-filters:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
}

.import-history-item.hidden {
  display: none;
}

/* Responsive filters */
@media (max-width: 768px) {
  .history-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .history-filters {
    flex-direction: column;
  }

  .filter-input,
  .filter-select {
    width: 100%;
    min-width: auto;
  }
}

/* ==========================================
   WEBHOOKS SECTION
   ========================================== */
/* ==========================================
   WEBHOOKS PAGE - INFO BANNER
   ========================================== */
.webhooks-info-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
  border: 1px solid #7dd3fc;
  border-radius: 16px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.webhooks-info-banner::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.webhooks-info-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.webhooks-info-icon i {
  font-size: 1.5rem;
  color: white;
}

.webhooks-info-content {
  flex: 1;
  min-width: 0;
}

.webhooks-info-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0c4a6e;
  margin: 0 0 4px 0;
}

.webhooks-info-desc {
  font-size: 0.8125rem;
  color: #0369a1;
  margin: 0;
  line-height: 1.5;
}

.webhooks-info-actions {
  flex-shrink: 0;
}

.btn-add-webhook {
  padding: 10px 20px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb, 59, 130, 246), 0.3);
}

/* ==========================================
   WEBHOOKS - SUMMARY BAR
   ========================================== */
.webhooks-summary {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.webhooks-summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  font-size: 0.8125rem;
  color: var(--gray-600);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.webhooks-summary-item .summary-count {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--gray-900);
}

.webhooks-summary-item.active-count .summary-icon {
  color: #10b981;
}

.webhooks-summary-item.inactive-count .summary-icon {
  color: #6b7280;
}

.webhooks-summary-item.total-count .summary-icon {
  color: #3b82f6;
}

/* ==========================================
   WEBHOOKS - LIST CONTAINER
   ========================================== */
.webhooks-list {
  display: grid;
  gap: 14px;
}

/* ==========================================
   WEBHOOKS - CARD
   ========================================== */
.webhook-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 0;
  transition: all 0.25s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

.webhook-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}

.webhook-card.inactive {
  background: var(--gray-50);
  border-color: var(--gray-200);
}

.webhook-card.inactive:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-color: var(--gray-300);
}

/* Left status indicator */
.webhook-card-indicator {
  width: 5px;
  flex-shrink: 0;
  background: #10b981;
}

.webhook-card.inactive .webhook-card-indicator {
  background: #d1d5db;
}

/* Card body */
.webhook-card-body {
  flex: 1;
  padding: 18px 20px;
  min-width: 0;
}

/* Card header */
.webhook-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 12px;
}

.webhook-header-left {
  flex: 1;
  min-width: 0;
}

.webhook-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--gray-900);
  margin: 0 0 4px 0;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.webhook-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.webhook-brand-badge.brand-specific {
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
}

.webhook-brand-badge.brand-all {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.webhook-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  white-space: nowrap;
}

.webhook-status.active {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.webhook-status.active i {
  color: #10b981;
}

.webhook-status.inactive {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #d1d5db;
}

.webhook-status.inactive i {
  color: #9ca3af;
}

.webhook-status i {
  font-size: 0.5rem;
}

/* URL display */
.webhook-url {
  font-size: 0.75rem;
  color: var(--gray-500);
  word-break: break-all;
  margin-bottom: 12px;
  font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace;
  line-height: 1.5;
  background: var(--gray-50);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--gray-100);
  max-height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Events tags */
.webhook-events {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.webhook-event-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 500;
  pointer-events: none;
  user-select: none;
}

/* Event tag colors by category */
.webhook-event-tag.tag-schedule {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.webhook-event-tag.tag-sync {
  background: #e0f2fe;
  color: #075985;
  border: 1px solid #bae6fd;
}
.webhook-event-tag.tag-host {
  background: #fce7f3;
  color: #9d174d;
  border: 1px solid #fbcfe8;
}
.webhook-event-tag.tag-room {
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
}
.webhook-event-tag.tag-pic {
  background: #ccfbf1;
  color: #115e59;
  border: 1px solid #99f6e4;
}
.webhook-event-tag.tag-import,
.webhook-event-tag.tag-export {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.webhook-event-tag.tag-auth {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.webhook-event-tag.tag-settings {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.webhook-event-tag.tag-more {
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
  font-style: italic;
}

/* Actions bar */
.webhook-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}

.webhook-actions .btn {
  padding: 6px 14px;
  font-size: 0.8125rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.webhook-actions .btn-icon {
  padding: 6px 10px;
}

.webhook-actions .btn i {
  font-size: 0.75rem;
}

/* ==========================================
   WEBHOOKS - MODAL ENHANCEMENTS
   ========================================== */
.webhook-modal-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.webhook-modal-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.webhook-modal-header-icon i {
  font-size: 1rem;
  color: white;
}

.webhook-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.webhook-url-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 0.75rem;
  color: #64748b;
}

.webhook-url-hint i {
  color: #94a3b8;
  font-size: 0.6875rem;
}

.webhook-events-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.webhook-events-label-row label {
  margin-bottom: 0;
}

.webhook-events-quick-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
}

.webhook-events-quick-actions .btn-link {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 4px;
  text-decoration: none;
}

.webhook-events-quick-actions .btn-link:hover {
  text-decoration: underline;
  color: #1d4ed8;
}

.webhook-events-quick-actions .divider {
  color: var(--gray-300);
}

.webhook-toggle-row {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}

/* Webhook Events Grid in Modal */
.webhook-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding: 12px;
  background: var(--gray-50);
  border-radius: 12px;
  border: 1px solid var(--gray-200);
}

.webhook-events-grid::-webkit-scrollbar {
  width: 6px;
}
.webhook-events-grid::-webkit-scrollbar-track {
  background: transparent;
}
.webhook-events-grid::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.webhook-event-group {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.2s ease;
}

.webhook-event-group:hover {
  border-color: var(--gray-300);
}

.webhook-event-group-title {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--gray-700);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 8px;
}

.webhook-event-group-title i {
  font-size: 0.8125rem;
  width: 18px;
  text-align: center;
}

/* Category-specific icon colors */
.webhook-event-group-title .icon-schedule { color: #d97706; }
.webhook-event-group-title .icon-sync { color: #0284c7; }
.webhook-event-group-title .icon-host { color: #db2777; }
.webhook-event-group-title .icon-room { color: #7c3aed; }
.webhook-event-group-title .icon-pic { color: #0d9488; }
.webhook-event-group-title .icon-import { color: #16a34a; }
.webhook-event-group-title .icon-auth { color: #dc2626; }
.webhook-event-group-title .icon-settings { color: #64748b; }

.webhook-event-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--gray-700);
  transition: color 0.15s ease;
}

.webhook-event-checkbox input[type="checkbox"] {
  cursor: pointer;
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  border-radius: 3px;
}

.webhook-event-checkbox:hover {
  color: var(--primary);
}

/* ==========================================
   WEBHOOKS - EMPTY STATE
   ========================================== */
.webhooks-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--gray-500);
}

.webhooks-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.webhooks-empty-icon i {
  font-size: 1.75rem;
  color: #0ea5e9;
}

.webhooks-empty h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-700);
  margin: 0 0 6px 0;
}

.webhooks-empty p {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin: 0;
}

/* ==========================================
   WEBHOOKS - RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
  .webhooks-info-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
  }

  .webhooks-info-actions {
    width: 100%;
  }

  .webhooks-info-actions .btn-add-webhook {
    width: 100%;
    justify-content: center;
  }

  .webhooks-summary {
    flex-direction: column;
  }

  .webhook-card {
    flex-direction: column;
  }

  .webhook-card-indicator {
    width: 100%;
    height: 4px;
  }

  .webhook-header {
    flex-direction: column;
    gap: 8px;
  }

  .webhook-actions {
    justify-content: flex-start;
  }

  .webhook-events-grid {
    grid-template-columns: 1fr;
  }

  .webhook-form-row {
    grid-template-columns: 1fr;
  }

  .webhook-events-label-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ==========================================
   INVALID LINK MESSAGE SECTION
   ========================================== */
.settings-section {
  grid-column: 1 / -1;
  margin-top: var(--spacing-xl);
  padding: 24px;
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  border: 2px solid #f472b6;
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 12px rgba(244, 114, 182, 0.15);
}

.settings-section .section-header {
  display: flex;
  align-items: start;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 2px solid rgba(244, 114, 182, 0.3);
}

.settings-section .section-header-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-section .section-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #831843;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-section .section-header h3 i {
  color: #ec4899;
  font-size: 1.125rem;
}

.settings-section .section-description {
  margin: 0;
  font-size: 0.875rem;
  color: #9d174d;
  line-height: 1.5;
  max-width: 600px;
}

.settings-section .form-group {
  margin-bottom: var(--spacing-lg);
}

.settings-section .form-group label {
  display: block;
  font-weight: 600;
  color: #831843;
  margin-bottom: var(--spacing-sm);
  font-size: 0.9rem;
}

.settings-section .form-help {
  display: block;
  margin-top: var(--spacing-sm);
  color: #9d174d;
  font-size: 0.8125rem;
}

.settings-section .form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--spacing-md);
}

/* ==========================================
 * LOGO UPLOAD AREA
 * ========================================== */

.upload-area {
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f8fafc;
}

.upload-area:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.upload-area.drag-over {
  border-color: #3b82f6;
  background: #dbeafe;
  transform: scale(1.02);
}

.upload-placeholder i {
  font-size: 3rem;
  color: #94a3b8;
  margin-bottom: 1rem;
}

.upload-placeholder p {
  margin: 0.5rem 0;
  color: #64748b;
  font-size: 0.9375rem;
}

.upload-placeholder small {
  color: #94a3b8;
  font-size: 0.8125rem;
}

.upload-browse {
  color: #3b82f6;
  text-decoration: underline;
  cursor: pointer;
}

.upload-browse:hover {
  color: #2563eb;
}

/* Logo Preview Wrapper */
.logo-preview-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.logo-preview-box {
  position: relative;
  width: fit-content;
  max-width: 100%;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.logo-preview-box:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.logo-preview-box img {
  display: block;
  max-width: 300px;
  max-height: 150px;
  object-fit: contain;
  margin: 0 auto;
}

.logo-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 10px;
}

.logo-preview-box:hover .logo-preview-overlay {
  opacity: 1;
}

.btn-preview-action {
  background: white;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-preview-action:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-preview-action i {
  font-size: 1.25rem;
  color: #3b82f6;
}

.logo-preview-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Logo Zoom Modal */
.logo-zoom-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: fadeIn 0.2s ease;
}

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

.logo-zoom-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}

.logo-zoom-content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.logo-zoom-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.logo-zoom-close:hover {
  background: white;
  transform: rotate(90deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.logo-zoom-close i {
  font-size: 1.25rem;
  color: #1f2937;
}

.logo-zoom-image-container {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  max-width: 90vw;
  max-height: 80vh;
  overflow: auto;
}

.logo-zoom-image-container img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.logo-zoom-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  font-size: 0.875rem;
  opacity: 0.8;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.5rem 1rem;
  border-radius: 6px;
}

.logo-zoom-info i {
  font-size: 1rem;
}

/* ==========================================
   SHEET PREVIEW MODAL
   ========================================== */

.sheet-preview-modal {
  max-width: 95vw !important;
  max-height: 90vh;
  width: 95vw;
}

.sheet-preview-modal .modal-body {
  max-height: calc(90vh - 180px);
  overflow-y: auto;
}

.sheet-preview-table-wrapper {
  background: white;
}

.sheet-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-family: 'Courier New', monospace;
}

.sheet-preview-table th,
.sheet-preview-table td {
  border: 1px solid #dee2e6;
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
  min-width: 80px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-preview-table th {
  background: #f8f9fa;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
  color: #495057;
}

.sheet-preview-table tbody tr:hover {
  background: #f8f9fa;
}

/* Row number column */
.sheet-preview-table .row-num {
  background: #e9ecef;
  font-weight: 600;
  text-align: center;
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  color: #6c757d;
  position: sticky;
  left: 0;
  z-index: 5;
}

.sheet-preview-table thead .row-num {
  z-index: 11;
}

/* Cell với màu background từ Google Sheets */
.sheet-cell-colored {
  position: relative;
}

/* Text formatting */
.sheet-cell-bold {
  font-weight: 700;
}

.sheet-cell-italic {
  font-style: italic;
}

.sheet-cell-underline {
  text-decoration: underline;
}

.sheet-cell-strikethrough {
  text-decoration: line-through;
}

/* Spinner for loading */
.spinner {
  border: 4px solid #f3f4f6;
  border-top: 4px solid #6366f1;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Button trong rc-card-header */
.rc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rc-card-header h4 {
  margin: 0;
  flex: 1;
}

.rc-card-header .btn {
  flex-shrink: 0;
}

/* ==========================================
   SHEET PREVIEW - PART 2: CONFIG COLUMN HIGHLIGHTING
   ========================================== */

/* Config column highlighting - Time columns */
.config-column.config-time {
  background-color: #fff3cd !important;
  border-left: 3px solid #ffc107 !important;
  border-right: 3px solid #ffc107 !important;
}

.sheet-preview-table thead th.config-column.config-time {
  background-color: #ffecb5 !important;
  font-weight: 700;
}

/* Config column highlighting - Date columns */
.config-column.config-date {
  background-color: #cfe2ff !important;
  border-left: 3px solid #0d6efd !important;
  border-right: 3px solid #0d6efd !important;
}

.sheet-preview-table thead th.config-column.config-date {
  background-color: #b6d4fe !important;
  font-weight: 700;
}

/* Config column highlighting - Host columns */
.config-column.config-host {
  background-color: #d1ecf1 !important;
  border-left: 3px solid #0dcaf0 !important;
  border-right: 3px solid #0dcaf0 !important;
}

.sheet-preview-table thead th.config-column.config-host {
  background-color: #b8e3e9 !important;
  font-weight: 700;
}

/* Config column highlighting - Room columns */
.config-column.config-room {
  background-color: #d1e7dd !important;
  border-left: 3px solid #198754 !important;
  border-right: 3px solid #198754 !important;
}

.sheet-preview-table thead th.config-column.config-room {
  background-color: #badbcc !important;
  font-weight: 700;
}

/* Config column highlighting - Platform columns */
.config-column.config-platform {
  background-color: #e7d6f5 !important;
  border-left: 3px solid #9b59b6 !important;
  border-right: 3px solid #9b59b6 !important;
}

.sheet-preview-table thead th.config-column.config-platform {
  background-color: #d4bde8 !important;
  font-weight: 700;
}

/* Config column highlighting - Brand columns */
.config-column.config-brand {
  background-color: #ffe5cc !important;
  border-left: 3px solid #fd7e14 !important;
  border-right: 3px solid #fd7e14 !important;
}

.sheet-preview-table thead th.config-column.config-brand {
  background-color: #ffd4b3 !important;
  font-weight: 700;
}

/* Config column highlighting - Extra columns (product, notes, link, custom) */
.config-column.config-extra {
  background-color: #e2e3e5 !important;
  border-left: 3px solid #6c757d !important;
  border-right: 3px solid #6c757d !important;
}

.sheet-preview-table thead th.config-column.config-extra {
  background-color: #d3d4d6 !important;
  font-weight: 700;
}

/* Config label in header */
.sheet-preview-table thead th .config-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: #495057;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Start row highlighting */
.sheet-preview-table tbody tr.start-row {
  background-color: #e7f3ff !important;
  border-top: 2px solid #0d6efd !important;
  border-bottom: 2px solid #0d6efd !important;
}

.sheet-preview-table tbody tr.start-row td {
  font-weight: 600;
}

/* Legend styling */
.sheet-legend {
  background: #f8f9fa;
  padding: 12px 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  border-left: 4px solid #6366f1;
}

.sheet-legend .legend-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #495057;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sheet-legend .legend-title i {
  color: #6366f1;
}

.sheet-legend .legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sheet-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #6c757d;
}

.sheet-legend .legend-color {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.sheet-legend .legend-color.config-time {
  background-color: #fff3cd;
  border-color: #ffc107;
}

.sheet-legend .legend-color.config-date {
  background-color: #cfe2ff;
  border-color: #0d6efd;
}

.sheet-legend .legend-color.config-host {
  background-color: #d1ecf1;
  border-color: #0dcaf0;
}

.sheet-legend .legend-color.config-room {
  background-color: #d1e7dd;
  border-color: #198754;
}

.sheet-legend .legend-color.config-platform {
  background-color: #e7d6f5;
  border-color: #9b59b6;
}

.sheet-legend .legend-color.config-brand {
  background-color: #ffe5cc;
  border-color: #fd7e14;
}

.sheet-legend .legend-color.config-extra {
  background-color: #e2e3e5;
  border-color: #6c757d;
}

.sheet-legend .legend-text {
  font-weight: 500;
}

/* ==========================================
   SHEET PREVIEW - PART 3: UX IMPROVEMENTS
   ========================================== */

/* Clickable column headers */
.sheet-preview-table thead th[style*="cursor: pointer"]:hover {
  background-color: #e9ecef !important;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

.sheet-preview-table thead th[style*="cursor: pointer"]:active {
  transform: translateY(0);
}

/* Load more button positioning */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

/* Refresh button styling */
#refreshSheetPreview {
  white-space: nowrap;
}

#refreshSheetPreview:hover {
  background-color: #f8f9fa;
}

/* Load more button styling */
#loadMoreSheetPreview {
  white-space: nowrap;
}

/* Info section improvements */
.sheet-preview-info > div > div {
  white-space: nowrap;
}

.sheet-preview-info strong {
  color: #495057;
}

/* ==========================================
   SHEET PREVIEW - PART 4: TAB DROPDOWN, HEADER ROW, SYNC
   ========================================== */

/* Controls row */
.sheet-preview-controls {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.sheet-control-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sheet-control-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #495057;
  white-space: nowrap;
  margin-bottom: 0;
}

.sheet-control-group label i {
  margin-right: 3px;
  color: #6c757d;
}

.sheet-control-select {
  padding: 5px 10px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 0.85rem;
  background: white;
  color: #495057;
  min-width: 140px;
  max-width: 250px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sheet-control-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  outline: none;
}

.sheet-control-input {
  padding: 5px 10px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 0.85rem;
  background: white;
  color: #495057;
  width: 70px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sheet-control-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  outline: none;
}

/* Apply button */
#applySheetSettings {
  white-space: nowrap;
  padding: 5px 12px;
  font-size: 0.85rem;
}

/* Sync checkbox label */
.sheet-sync-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: #6c757d;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  margin-left: auto;
}

.sheet-sync-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--primary);
}

.sheet-sync-label span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sheet-sync-label i {
  font-size: 0.75rem;
}

/* Stats row */
.sheet-preview-stats {
  padding-top: 8px;
  border-top: 1px solid #e9ecef;
}

/* Header row styling (rows before data start row) */
.sheet-preview-table tbody tr.header-row {
  background-color: #e8f4fd !important;
}

.sheet-preview-table tbody tr.header-row td {
  font-weight: 600;
  color: #0d6efd;
  font-size: 0.8rem;
}

.sheet-preview-table tbody tr.header-row td.row-num {
  color: #0d6efd;
  font-weight: 700;
}

/* Data start row highlight */
.sheet-preview-table tbody tr.start-row {
  border-top: 3px solid #28a745 !important;
}

.sheet-preview-table tbody tr.start-row td.row-num {
  color: #28a745;
  font-weight: 700;
}

/* Responsive controls */
@media (max-width: 768px) {
  .sheet-preview-controls {
    gap: 10px;
  }

  .sheet-control-select {
    min-width: 100px;
  }

  .sheet-sync-label {
    margin-left: 0;
    width: 100%;
  }
}

/* ==========================================
   GOOGLE SHEET EMBEDDED MODAL (Admin Only)
   ========================================== */

/* Modal fullscreen variant */
.modal-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Google Sheet Embed Modal Styles */
.google-sheet-embed-modal .modal-body {
  padding: 0;
  overflow: hidden;
}

.google-sheet-iframe-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.google-sheet-iframe-container iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

/* Loading animation for Google Sheet */
.google-sheet-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f8f9fa;
}

.google-sheet-loading .spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Admin-only button styling */
.btn.admin-only {
  position: relative;
}

.btn.admin-only::after {
  content: '🔒';
  margin-left: 5px;
  font-size: 0.75em;
  opacity: 0.7;
}

/* Success button variant */
.btn-success {
  background: linear-gradient(135deg, #28a745 0%, #218838 100%);
  color: white;
  border: none;
}

.btn-success:hover {
  background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-success:active {
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .modal-fullscreen .modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-fullscreen .modal-footer > div {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* ==========================================
   DASHBOARD SCHEDULE POPUP
   ========================================== */

.dash-popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}
.dash-popup-overlay.active {
  display: flex;
}

.dash-popup {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: dashPopupIn 0.25s ease-out;
}
@keyframes dashPopupIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dash-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}
.dash-popup-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.dash-popup-title i {
  color: #6366f1;
}
.dash-popup-badge {
  background: #6366f1;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  margin-left: 4px;
}
.dash-popup-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.15s;
}
.dash-popup-close:hover {
  background: #f1f5f9;
  color: #475569;
}

.dash-popup-body {
  overflow-y: auto;
  padding: 1rem 1.5rem 1.5rem;
  flex: 1;
}

.dash-popup-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #94a3b8;
}
.dash-popup-empty i {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  display: block;
}

/* ── Date Group ── */
.popup-date-group {
  margin-bottom: 1.25rem;
}
.popup-date-group:last-child {
  margin-bottom: 0;
}

.popup-date-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.85rem;
}
.popup-date-header.today {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
}
.popup-date-header.later {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  color: #5b21b6;
}
.popup-date-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.popup-date-count {
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
}

/* ── Schedule Card ── */
.popup-schedule-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
  background: #fafbfc;
  margin-bottom: 0.5rem;
  transition: all 0.15s;
}
.popup-schedule-card:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
}
.popup-schedule-card.urgent {
  border-left: 3px solid #ef4444;
  background: #fef2f2;
}
.popup-schedule-card.soon {
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
}
.popup-schedule-card.popup-live {
  border-left: 3px solid #22c55e;
  background: #f0fdf4;
}

.popup-card-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 130px;
}
.popup-card-indicator.live-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  animation: livePulseAnim 2s infinite;
}
@keyframes livePulseAnim {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.popup-card-time {
  display: flex;
  flex-direction: column;
}
.popup-time-main {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1e293b;
}
.popup-time-duration {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 2px;
}

.popup-card-center {
  flex: 1;
  min-width: 0;
}
.popup-card-host {
  font-weight: 600;
  font-size: 0.9rem;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popup-card-host i {
  color: #6366f1;
  font-size: 0.8rem;
}
.popup-card-room {
  font-size: 0.8rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popup-card-room i {
  font-size: 0.7rem;
}

.popup-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 90px;
}
.popup-platform {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #e5e7eb;
  color: #374151;
}
.popup-platform.platform-shopee {
  background: #fee2e2;
  color: #dc2626;
}
.popup-platform.platform-tiktok,
.popup-platform.platform-tiktokshop {
  background: #1e293b;
  color: #fff;
}
.popup-platform.platform-lazada {
  background: #dbeafe;
  color: #1d4ed8;
}

.popup-countdown {
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
}
.popup-countdown.urgent {
  color: #ef4444;
  font-weight: 700;
}
.popup-countdown.soon {
  color: #f59e0b;
  font-weight: 600;
}

.popup-elapsed {
  font-size: 0.78rem;
  color: #22c55e;
  font-weight: 500;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .dash-popup-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .dash-popup {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
  }
  .popup-schedule-card {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .popup-card-left {
    min-width: unset;
  }
  .popup-card-right {
    flex-direction: row;
    min-width: unset;
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
}