/* ==========================================================
   CyberSentinel Global UI Polish Patch
   - restores readable main-site theme
   - reduces oversized Sentinel AI UI
   - fixes account menu overlap
   - improves login/signup/pricing layout
   ========================================================== */

/* ---------- GLOBAL READABILITY ---------- */

:root {
  --cs-page-bg: #f3f7fc;
  --cs-surface: #ffffff;
  --cs-surface-soft: #f8fbff;
  --cs-text: #102033;
  --cs-muted: #5f6f82;
  --cs-border: #d8e2ee;
  --cs-blue: #173a6a;
  --cs-blue-2: #1f4a84;
  --cs-yellow: #ffc928;
  --cs-danger: #ff4e3a;
  --cs-radius: 18px;
}

html {
  scroll-behavior: smooth;
}

body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) {
  background: var(--cs-page-bg) !important;
  color: var(--cs-text) !important;
}

body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) main,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) section,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) .page,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) .content {
  color: var(--cs-text);
}

body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) .card,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) .panel,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) .box,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) .module,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) .scanner-card,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) .result-card,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) .auth-card,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) .pricing-card {
  background: var(--cs-surface) !important;
  color: var(--cs-text) !important;
  border-color: var(--cs-border) !important;
  box-shadow: 0 14px 34px rgba(16, 32, 51, .08) !important;
}

body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) h1,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) h2,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) h3,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) h4,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) label,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) strong {
  color: var(--cs-text) !important;
}

body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) p,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) span,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) li,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) small {
  color: inherit;
}

body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) .muted,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) .subtitle,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) .sub,
body:not(.sentinel-page):not(.sentinel-ai-page):not([data-page="sentinel"]) .description {
  color: var(--cs-muted) !important;
}

/* ---------- NAVIGATION ORIGINAL-LIKE THEME ---------- */

header,
.navbar,
.site-header,
.topbar,
.cs-navbar {
  background: linear-gradient(180deg, #1d4277, #173463) !important;
  color: #ffffff !important;
  border-bottom: 5px solid var(--cs-yellow) !important;
}

header a,
.navbar a,
.site-header a,
.topbar a,
.cs-navbar a,
header button,
.navbar button,
.site-header button,
.topbar button,
.cs-navbar button {
  color: #ffffff !important;
}

header a.active,
.navbar a.active,
.site-header a.active,
.topbar a.active,
.cs-navbar a.active,
header button.active,
.navbar button.active,
.site-header button.active,
.topbar button.active,
.cs-navbar button.active,
header a[aria-current="page"],
.navbar a[aria-current="page"] {
  background: var(--cs-yellow) !important;
  color: #102033 !important;
  border-radius: 16px !important;
  box-shadow: 0 0 0 4px rgba(255,201,40,.25) !important;
}

a[href*="sentinel"],
button[data-open-sentinel],
.sentinel-nav-button {
  background: #08172b !important;
  color: #ffffff !important;
  border-radius: 999px !important;
}

/* ---------- FORMS / INPUTS ---------- */

input,
textarea,
select {
  background: #ffffff !important;
  color: #102033 !important;
  border: 1px solid #cdd9e6 !important;
}

input::placeholder,
textarea::placeholder {
  color: #758295 !important;
}

/* ---------- REPORT CENTER CLEANUP ---------- */

.cs-hide-back-home,
.cs-hide-redundant-upgrade {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---------- ACCOUNT / LOGIN PAGE COMPACT FIX ---------- */

body.cs-auth-page {
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

body.cs-auth-page .auth-page,
body.cs-auth-page .account-page,
body.cs-auth-page main,
body.cs-auth-page .main {
  min-height: calc(100vh - 90px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
}

body.cs-auth-page .auth-card,
body.cs-auth-page .login-card,
body.cs-auth-page .account-card,
body.cs-auth-page form {
  max-width: 560px !important;
  width: min(560px, calc(100vw - 28px)) !important;
}

body.cs-auth-page .auth-card,
body.cs-auth-page .login-card,
body.cs-auth-page .account-card {
  padding: 22px !important;
  border-radius: 24px !important;
}

body.cs-auth-page h1,
body.cs-auth-page h2 {
  font-size: clamp(26px, 4vw, 38px) !important;
  line-height: 1.05 !important;
  margin: 0 0 10px !important;
}

body.cs-auth-page p {
  font-size: 15px !important;
  line-height: 1.35 !important;
  margin: 0 0 12px !important;
}

body.cs-auth-page label {
  font-size: 14px !important;
  margin-bottom: 5px !important;
}

body.cs-auth-page input {
  min-height: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
}

body.cs-auth-page button,
body.cs-auth-page .btn,
body.cs-auth-page a.button {
  min-height: 48px !important;
  border-radius: 16px !important;
  font-size: 16px !important;
  padding: 10px 16px !important;
}

.cs-password-suggestion {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #eef6ff;
  color: #16345d;
  border: 1px solid #cfe4ff;
  font-size: 13px;
  line-height: 1.35;
}

.cs-password-suggestion button {
  min-height: 32px !important;
  height: 32px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  margin-top: 8px;
  background: #173a6a !important;
  color: white !important;
}

/* ---------- PRICING PAGE NORMAL SCALE ---------- */

body.cs-pricing-page main,
body.cs-pricing-page .pricing-page {
  padding: 28px 20px !important;
}

body.cs-pricing-page h1 {
  font-size: clamp(34px, 5vw, 56px) !important;
  line-height: 1.05 !important;
  margin-bottom: 16px !important;
}

body.cs-pricing-page .pricing-grid,
body.cs-pricing-page .plans,
body.cs-pricing-page .price-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 18px !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
}

body.cs-pricing-page .pricing-card,
body.cs-pricing-page .plan,
body.cs-pricing-page .price-card {
  padding: 22px !important;
  border-radius: 22px !important;
  min-height: auto !important;
}

body.cs-pricing-page .pricing-card h2,
body.cs-pricing-page .plan h2 {
  font-size: 25px !important;
}

body.cs-pricing-page .price,
body.cs-pricing-page .amount {
  font-size: 36px !important;
}

/* ---------- SENTINEL AI GLOBAL FIX ---------- */

body.cs-sentinel-page,
body.sentinel-page,
body.sentinel-ai-page,
body[data-page="sentinel"] {
  font-size: 16px !important;
  line-height: 1.5 !important;
  overflow: hidden !important;
}

body.cs-sentinel-page h1,
body.sentinel-page h1,
body.sentinel-ai-page h1,
body[data-page="sentinel"] h1 {
  font-size: 24px !important;
  line-height: 1.15 !important;
}

body.cs-sentinel-page h2,
body.sentinel-page h2,
body.sentinel-ai-page h2,
body[data-page="sentinel"] h2 {
  font-size: 20px !important;
}

body.cs-sentinel-page p,
body.cs-sentinel-page li,
body.cs-sentinel-page button,
body.cs-sentinel-page input,
body.cs-sentinel-page textarea,
body.sentinel-page p,
body.sentinel-page li,
body.sentinel-page button,
body.sentinel-page input,
body.sentinel-page textarea,
body.sentinel-ai-page p,
body.sentinel-ai-page li,
body.sentinel-ai-page button,
body.sentinel-ai-page input,
body.sentinel-ai-page textarea,
body[data-page="sentinel"] p,
body[data-page="sentinel"] li,
body[data-page="sentinel"] button,
body[data-page="sentinel"] input,
body[data-page="sentinel"] textarea {
  font-size: 15px !important;
}

body.cs-sentinel-page .message,
body.cs-sentinel-page .msg,
body.cs-sentinel-page .chat-message,
body.sentinel-page .message,
body.sentinel-page .msg,
body.sentinel-page .chat-message,
body.sentinel-ai-page .message,
body.sentinel-ai-page .msg,
body.sentinel-ai-page .chat-message,
body[data-page="sentinel"] .message,
body[data-page="sentinel"] .msg,
body[data-page="sentinel"] .chat-message {
  font-size: 16px !important;
  line-height: 1.55 !important;
  max-width: 850px !important;
}

body.cs-sentinel-page .sidebar,
body.cs-sentinel-page aside,
body.sentinel-page .sidebar,
body.sentinel-page aside,
body.sentinel-ai-page .sidebar,
body.sentinel-ai-page aside,
body[data-page="sentinel"] .sidebar,
body[data-page="sentinel"] aside {
  font-size: 14px !important;
}

/* Chat composer must stay visible above account button */
body.cs-sentinel-page .composer,
body.cs-sentinel-page form,
body.sentinel-page .composer,
body.sentinel-page form,
body.sentinel-ai-page .composer,
body.sentinel-ai-page form,
body[data-page="sentinel"] .composer,
body[data-page="sentinel"] form {
  z-index: 20 !important;
}

/* ---------- BOTTOM KP ACCOUNT MENU: SMALLER, NO OVERLAP ---------- */

#cs-bottom-account,
#cs-kp-account-shell {
  left: 16px !important;
  bottom: 14px !important;
  z-index: 80 !important;
}

#cs-bottom-account .cs-account-pill,
#cs-kp-account-shell .cs-kp-pill {
  width: 330px !important;
  min-height: 72px !important;
  border-radius: 24px !important;
  padding: 10px 14px !important;
}

#cs-bottom-account .cs-account-avatar,
#cs-kp-account-shell .cs-kp-avatar {
  width: 52px !important;
  height: 52px !important;
  font-size: 20px !important;
}

#cs-bottom-account .cs-account-name,
#cs-kp-account-shell .cs-kp-name {
  font-size: 18px !important;
}

#cs-bottom-account .cs-account-plan,
#cs-kp-account-shell .cs-kp-plan {
  font-size: 15px !important;
  margin-top: 3px !important;
}

#cs-bottom-account .cs-account-chevron,
#cs-kp-account-shell .cs-kp-chevron {
  font-size: 30px !important;
}

#cs-bottom-account .cs-account-menu,
#cs-kp-account-shell .cs-kp-menu {
  width: 420px !important;
  max-width: calc(100vw - 24px) !important;
  bottom: 82px !important;
  max-height: min(620px, calc(100vh - 110px)) !important;
  overflow-y: auto !important;
  border-radius: 24px !important;
  padding: 12px !important;
}

#cs-bottom-account .cs-account-profile,
#cs-kp-account-shell .cs-kp-menu-profile {
  padding: 10px 12px !important;
  border-radius: 18px !important;
}

#cs-bottom-account .cs-account-profile .cs-account-avatar,
#cs-kp-account-shell .cs-kp-menu-profile .cs-kp-avatar {
  width: 56px !important;
  height: 56px !important;
}

#cs-bottom-account .cs-account-profile strong,
#cs-kp-account-shell .cs-kp-menu-profile strong {
  font-size: 19px !important;
}

#cs-bottom-account .cs-account-profile span,
#cs-kp-account-shell .cs-kp-menu-profile span {
  font-size: 14px !important;
}

#cs-bottom-account .cs-account-row,
#cs-kp-account-shell .cs-kp-menu-row {
  font-size: 18px !important;
  padding: 13px 16px !important;
  border-radius: 16px !important;
  gap: 14px !important;
}

#cs-bottom-account .cs-account-icon,
#cs-kp-account-shell .cs-kp-menu-icon {
  font-size: 19px !important;
  width: 24px !important;
}

/* Settings modal should not be gigantic */
#cs-settings-modal .cs-settings-window,
#cs-settings-overlay .cs-settings-window {
  width: min(980px, calc(100vw - 28px)) !important;
  height: min(680px, calc(100vh - 28px)) !important;
  grid-template-columns: 260px 1fr !important;
  border-radius: 24px !important;
}

#cs-settings-modal .cs-settings-sidebar,
#cs-settings-overlay .cs-settings-sidebar {
  padding: 16px !important;
}

#cs-settings-modal .cs-settings-close,
#cs-settings-overlay .cs-settings-close {
  width: 78px !important;
  height: 48px !important;
  font-size: 24px !important;
  border-radius: 16px !important;
  margin-bottom: 16px !important;
}

#cs-settings-modal .cs-settings-nav-item,
#cs-settings-overlay .cs-settings-nav-item {
  font-size: 15px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  border-radius: 14px !important;
  gap: 10px !important;
}

#cs-settings-modal .cs-settings-main,
#cs-settings-overlay .cs-settings-main {
  padding: 28px !important;
}

#cs-settings-modal .cs-settings-main h2,
#cs-settings-overlay .cs-settings-main h2 {
  font-size: 30px !important;
  margin-bottom: 20px !important;
}

#cs-settings-modal .cs-settings-card,
#cs-settings-overlay .cs-settings-card {
  padding: 20px !important;
  border-radius: 20px !important;
}

#cs-settings-modal .cs-settings-card h3,
#cs-settings-overlay .cs-settings-card h3 {
  font-size: 20px !important;
}

#cs-settings-modal .cs-settings-card p,
#cs-settings-overlay .cs-settings-card p,
#cs-settings-modal .cs-settings-row span,
#cs-settings-overlay .cs-settings-row span {
  font-size: 14px !important;
}

#cs-settings-modal .cs-settings-row,
#cs-settings-overlay .cs-settings-row {
  padding: 16px 0 !important;
}

#cs-settings-modal .cs-settings-row strong,
#cs-settings-overlay .cs-settings-row strong {
  font-size: 17px !important;
}

#cs-settings-modal .cs-settings-value,
#cs-settings-overlay .cs-settings-value {
  font-size: 15px !important;
}

#cs-settings-modal .cs-settings-toggle,
#cs-settings-overlay .cs-settings-toggle {
  width: 74px !important;
  height: 36px !important;
}

#cs-settings-modal .cs-settings-toggle::after,
#cs-settings-overlay .cs-settings-toggle::after {
  width: 26px !important;
  height: 26px !important;
}

/* Back to CyberSentinel better position */
.cs-back-to-cybersentinel-fixed {
  position: fixed !important;
  left: 16px !important;
  top: 88px !important;
  z-index: 90 !important;
  background: rgba(15, 31, 54, .92) !important;
  color: #eaf3ff !important;
  border: 1px solid rgba(90, 150, 220, .45) !important;
  border-radius: 999px !important;
  padding: 9px 14px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.28) !important;
}

@media (max-width: 820px) {
  #cs-bottom-account .cs-account-pill,
  #cs-kp-account-shell .cs-kp-pill {
    width: 260px !important;
  }

  #cs-bottom-account .cs-account-menu,
  #cs-kp-account-shell .cs-kp-menu {
    width: calc(100vw - 24px) !important;
  }

  #cs-settings-modal .cs-settings-window,
  #cs-settings-overlay .cs-settings-window {
    grid-template-columns: 1fr !important;
  }

  #cs-settings-modal .cs-settings-sidebar,
  #cs-settings-overlay .cs-settings-sidebar {
    display: none !important;
  }
}