/**
 * SEAMOU ID - ENTERPRISE ACCOUNT CONSOLE PLAYBOOK STYLES
 * Overrides PatternFly v5 components to match Seamou Cyberpunk Deep Space Glassmorphism.
 * Strict Zero-Emoji: 100% SVG Vector Icons & Plain Text.
 */

:root,
html.pf-v5-theme-dark,
body {
  --pf-v5-global--BackgroundColor--100: #060810 !important;
  --pf-v5-global--BackgroundColor--200: #0b0f19 !important;
  --pf-v5-global--BackgroundColor--dark-100: #060810 !important;
  --pf-v5-global--BackgroundColor--dark-200: #0b0f19 !important;
  --pf-v5-global--BackgroundColor--dark-300: #101726 !important;
  --pf-v5-global--Color--100: #f1f5f9 !important;
  --pf-v5-global--Color--200: #cbd5e1 !important;
  --pf-v5-global--primary-color--100: #00f0ff !important;
  --pf-v5-global--primary-color--200: #38bdf8 !important;
  --pf-v5-global--link--Color: #00f0ff !important;
  --pf-v5-global--link--Color--hover: #38bdf8 !important;
  --pf-v5-global--BorderColor--100: rgba(255, 255, 255, 0.1) !important;
  --pf-v5-global--FontFamily--sans-serif: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Page Base */
body, #app, .pf-v5-c-page {
  background-color: #060810 !important;
  background-image: 
    radial-gradient(circle at 10% 12%, rgba(0, 240, 255, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 90% 88%, rgba(139, 92, 246, 0.05) 0%, transparent 45%),
    linear-gradient(180deg, #060810 0%, #0b0f19 100%) !important;
  background-attachment: fixed !important;
  color: #f1f5f9 !important;
  font-family: var(--pf-v5-global--FontFamily--sans-serif) !important;
}

/* Top Masthead Header */
.pf-v5-c-masthead {
  background-color: #0b0f19 !important;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
  padding: 0 20px !important;
  height: 64px !important;
}

/* Header Brand / Logo */
.pf-v5-c-masthead__brand {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.pf-v5-c-masthead__brand img,
img.pf-v5-c-brand {
  height: 38px !important;
  width: auto !important;
  max-height: 40px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.35)) !important;
}

/* Top Right User Avatar & Admin Link */
.pf-v5-c-avatar,
img.pf-v5-c-avatar {
  border-radius: 50% !important;
  border: 1.5px solid #00f0ff !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4) !important;
  background: rgba(16, 23, 38, 0.9) !important;
  filter: invert(0.9) hue-rotate(170deg) brightness(1.2) !important;
  transition: all 0.2s ease !important;
}

.pf-v5-c-avatar:hover,
img.pf-v5-c-avatar:hover {
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.7) !important;
}

/* Sidebar Navigation */
.pf-v5-c-page__sidebar {
  background-color: #0b0f19 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4) !important;
}

.pf-v5-c-nav__list {
  padding: 16px 8px !important;
}

.pf-v5-c-nav__link {
  color: #94a3b8 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  margin: 3px 0 !important;
  padding: 10px 16px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

.pf-v5-c-nav__link:hover {
  color: #00f0ff !important;
  background-color: rgba(0, 240, 255, 0.08) !important;
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
  color: #ffffff !important;
  font-weight: 700 !important;
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.16) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
  border-left: 3px solid #00f0ff !important;
  border-radius: 4px 8px 8px 4px !important;
}

/* ==================== INJECTED SVG VECTOR ICONS FOR SIDEBAR ITEMS ==================== */

/* PatternFly v5 overrides: unbind ::before from absolute positioning */
.pf-v5-c-nav__link::before {
  position: static !important;
  display: inline-block !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

/* Align subnav toggle arrow to the far right */
.pf-v5-c-nav__toggle {
  margin-left: auto !important;
}

/* 1. Personal Info / Thông Tin Cá Nhân (User Profile SVG Icon) */
.pf-v5-c-nav__list > .pf-v5-c-nav__item:first-child > .pf-v5-c-nav__link::before,
.pf-v5-c-nav__link[href*="personal-info"]::before,
.pf-v5-c-nav__link[aria-current="page"]::before,
.pf-v5-c-nav__link[data-testid=""]::before {
  content: '' !important;
  width: 18px !important;
  height: 18px !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center !important;
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
}

/* 2. Account Security / Bảo Mật Tài Khoản (Security Shield Lock SVG Icon) */
button.pf-v5-c-nav__link::before,
.pf-v5-c-nav__list > .pf-v5-c-nav__item:nth-child(2) > .pf-v5-c-nav__link::before,
.pf-v5-c-nav__item.pf-m-expandable > .pf-v5-c-nav__link::before,
.pf-v5-c-nav__link[href*="account-security"]::before {
  content: '' !important;
  width: 18px !important;
  height: 18px !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") no-repeat center !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") no-repeat center !important;
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
}

/* 3. Applications / Ứng Dụng (Grid Apps SVG Icon) */
.pf-v5-c-nav__link[data-testid="applications"]::before,
.pf-v5-c-nav__list > .pf-v5-c-nav__item:nth-child(3) > .pf-v5-c-nav__link::before,
.pf-v5-c-nav__link[href*="applications"]::before {
  content: '' !important;
  width: 18px !important;
  height: 18px !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E") no-repeat center !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E") no-repeat center !important;
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
}

/* Sub-items inside Account Security */
.pf-v5-c-nav__subnav .pf-v5-c-nav__link[data-testid*="signing-in"]::before,
.pf-v5-c-nav__subnav .pf-v5-c-nav__link[href*="signing-in"]::before {
  content: '' !important;
  width: 15px !important;
  height: 15px !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2l-2 2m-1.5 1.5L16 7l-1.5-1.5M16 7l-4 4m0 0l-1.5-1.5M12 11l-2 2m0 0l-1.5-1.5M10 13l-4 4m0 0a5 5 0 1 1-7-7 5 5 0 0 1 7 7z'/%3E%3C/svg%3E") no-repeat center !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2l-2 2m-1.5 1.5L16 7l-1.5-1.5M16 7l-4 4m0 0l-1.5-1.5M12 11l-2 2m0 0l-1.5-1.5M10 13l-4 4m0 0a5 5 0 1 1-7-7 5 5 0 0 1 7 7z'/%3E%3C/svg%3E") no-repeat center !important;
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
}

.pf-v5-c-nav__subnav .pf-v5-c-nav__link[data-testid*="device-activity"]::before,
.pf-v5-c-nav__subnav .pf-v5-c-nav__link[href*="device-activity"]::before {
  content: '' !important;
  width: 15px !important;
  height: 15px !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E") no-repeat center !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E") no-repeat center !important;
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
}

.pf-v5-c-nav__subnav .pf-v5-c-nav__link[data-testid*="linked-accounts"]::before,
.pf-v5-c-nav__subnav .pf-v5-c-nav__link[href*="linked-accounts"]::before {
  content: '' !important;
  width: 15px !important;
  height: 15px !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") no-repeat center !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") no-repeat center !important;
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
}

/* Hover effect on icons */
.pf-v5-c-nav__link:hover::before {
  transform: scale(1.1);
  color: #00f0ff !important;
}

/* Main Content & Section Cards */
.pf-v5-c-page__main-section {
  background: transparent !important;
}

.pf-v5-c-card {
  background: rgba(11, 15, 25, 0.82) !important;
  border: 1px solid rgba(0, 240, 255, 0.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.7), 0 0 20px 0 rgba(0, 240, 255, 0.06) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  padding: 26px !important;
  margin-bottom: 24px !important;
}

.pf-v5-c-title {
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  font-weight: 700 !important;
}

/* Form Inputs, Selects & Checkboxes */
.pf-v5-c-form-control,
.pf-v5-c-form-control input,
.pf-v5-c-form-control select {
  background-color: rgba(16, 23, 38, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  color: #f1f5f9 !important;
  font-size: 0.95rem !important;
  padding: 10px 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.pf-v5-c-form-control:focus,
.pf-v5-c-form-control input:focus,
.pf-v5-c-form-control select:focus {
  border-color: #00f0ff !important;
  box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.25) !important;
  outline: none !important;
}

.pf-v5-c-form-control:disabled,
.pf-v5-c-form-control input:disabled {
  background-color: rgba(10, 14, 23, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: #64748b !important;
  cursor: not-allowed !important;
}

.pf-v5-c-form__label-text {
  color: #cbd5e1 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
}

/* Action Buttons with SVG Icons */
.pf-v5-c-button.pf-m-primary {
  background: linear-gradient(135deg, #00f0ff 0%, #00b4d8 45%, #8b5cf6 100%) !important;
  color: #060810 !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Checkmark Icon on Save Button */
.pf-v5-c-button.pf-m-primary::before {
  content: '' !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  background-color: #060810 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center !important;
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
  flex-shrink: 0 !important;
}

.pf-v5-c-button.pf-m-primary:hover {
  box-shadow: 0 6px 24px rgba(0, 240, 255, 0.55) !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
}

.pf-v5-c-button.pf-m-link,
.pf-v5-c-button.pf-m-secondary {
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Cancel / Back Icon */
.pf-v5-c-button.pf-m-link::before,
.pf-v5-c-button.pf-m-secondary::before {
  content: '' !important;
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center !important;
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
  flex-shrink: 0 !important;
}

.pf-v5-c-button.pf-m-link:hover,
.pf-v5-c-button.pf-m-secondary:hover {
  color: #ffffff !important;
  border-color: rgba(0, 240, 255, 0.4) !important;
  background-color: rgba(0, 240, 255, 0.05) !important;
}

/* Alert / Toast Messages */
.pf-v5-c-alert {
  background: rgba(11, 15, 25, 0.95) !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 240, 255, 0.15) !important;
  backdrop-filter: blur(12px) !important;
}

.pf-v5-c-alert.pf-m-success {
  border-left: 4px solid #10b981 !important;
}

.pf-v5-c-alert__title {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* User Menu & Dropdowns */
.pf-v5-c-menu,
.pf-v5-c-dropdown__menu {
  background: #0b0f19 !important;
  border: 1px solid rgba(0, 240, 255, 0.2) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7) !important;
}

.pf-v5-c-menu__item-text,
.pf-v5-c-dropdown__menu-item {
  color: #e2e8f0 !important;
}

.pf-v5-c-menu__item:hover,
.pf-v5-c-dropdown__menu-item:hover {
  background: rgba(0, 240, 255, 0.08) !important;
  color: #00f0ff !important;
}