/* =========================================================
   THEMES via CSS variables
   - Default app theme: LIGHT (dashboard/admin/app pages)
   - Optional: .theme-dark (future "TV stage" vibe)
   - Marketing: .theme-marketing (homepage/pricing/faq - slightly warmer)
   ========================================================= */

/* =========================
   LIGHT APP THEME (DEFAULT)
   ========================= */
:root,
body.theme-app {
  /* Base surfaces */
  --bg: #E3DED7;             /* app background (your choice) */
  --content-bg: #E3DED7;     /* main content background */
  --panel: #FFFFFF;          /* cards */
  --panel-soft: #F0ECE6;     /* soft panels/stripes */
  --panel-border: rgba(30, 31, 41, 0.12);
  --ui-scale: 0.8;
  --sidebar-width: calc(260px * var(--ui-scale));

  /* Sidebar */
  --sidebar: #FFFFFF;
  --sidebar-border: rgba(30, 31, 41, 0.12);
  --sidebar-text: #1E1F29;
  --sidebar-link: #1E1F29;
  --sidebar-link-hover-bg: rgba(91, 95, 239, 0.10);
  --sidebar-link-active-bg: rgba(91, 95, 239, 0.14);

  /* Text */
  --text: #1E1F29;
  --text-muted: #5C5F7A;

  /* Brand */
  --primary: #5B5FEF;        /* indigo */
  --primary-hover: #6F73FF;
  --primary-soft: rgba(91, 95, 239, 0.12);

  --accent: #F2C94C;         /* gold */
  --accent-soft: rgba(242, 201, 76, 0.25);

  /* Status */
  --success: #2ECC9A;
  --warning: #F2994A;
  --danger:  #EB5757;
  --info:    #4D9CFF;

  /* Inputs */
  --input-bg: #FFFFFF;
  --input-text: #1E1F29;
  --input-border: rgba(30, 31, 41, 0.18);
  --input-placeholder: rgba(92, 95, 122, 0.75);

  /* UI */
  --radius: 14px;
  --shadow: 0 10px 30px rgba(30, 31, 41, 0.10);
}

/* =========================================================
   SIDEBAR – unified width (user + admin)
   ========================================================= */

body.theme-app .layout { grid-template-columns: var(--sidebar-width) 1fr !important; }
body.theme-app .sidebar,
body.theme-app .admin-sidebar,
body.theme-app #adminSidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
}

/* Scale key paddings/typography to match ~80% Chrome zoom without breaking layout */
body.theme-app .layout > .sidebar,
body.theme-app .admin-root > aside.sidebar {
  padding: calc(20px * var(--ui-scale)) !important;
}

body.theme-app .content {
  /* Vertical rhythm scaled; horizontal padding handled via inner container width */
  padding: calc(24px * var(--ui-scale)) 0 !important;
}

/* Constrain inner page width so content doesn't hug the edges */
body.theme-app .content > .container,
body.theme-app .content > .container-sm,
body.theme-app .content > .container-md,
body.theme-app .content > .container-lg,
body.theme-app .content > .container-xl,
body.theme-app .content > .container-xxl,
body.theme-app .content > .container-fluid {
  width: 80%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 992px) {
  body.theme-app .content > .container,
  body.theme-app .content > .container-sm,
  body.theme-app .content > .container-md,
  body.theme-app .content > .container-lg,
  body.theme-app .content > .container-xl,
  body.theme-app .content > .container-xxl,
  body.theme-app .content > .container-fluid {
    width: 100%;
    max-width: none;
    padding-left: calc(16px * var(--ui-scale));
    padding-right: calc(16px * var(--ui-scale));
  }
}

body.theme-app .admin-content {
  /* Keep top/bottom rhythm; add 10% side breathing room like the user panel */
  padding-top: calc(24px * var(--ui-scale)) !important;
  padding-bottom: calc(24px * var(--ui-scale)) !important;
  padding-left: clamp(calc(16px * var(--ui-scale)), 10vw, calc(160px * var(--ui-scale))) !important;
  padding-right: clamp(calc(16px * var(--ui-scale)), 10vw, calc(160px * var(--ui-scale))) !important;
}

body.theme-app .sidebar nav.nav.flex-column .nav-link,
body.theme-app .admin-root .sidebar .nav-link {
  padding-top: calc(16px * var(--ui-scale)) !important;
  padding-bottom: calc(16px * var(--ui-scale)) !important;
}


/* =========================
   OPTIONAL DARK THEME
   (use later for game display)
   ========================= */
body.theme-dark {
  --bg: #0f1115;
  --content-bg: #0f1115;
  --panel: #2b2f3a;
  --panel-soft: #1b1f2a;
  --panel-border: rgba(255,255,255,.08);

  --sidebar: #252526;
  --sidebar-border: rgba(255,255,255,.10);
  --sidebar-text: #e5e7eb;
  --sidebar-link: #e5e7eb;
  --sidebar-link-hover-bg: rgba(124, 92, 255, 0.15);
  --sidebar-link-active-bg: rgba(124, 92, 255, 0.20);

  --text: #e5e7eb;
  --text-muted: #9ca3af;

  --primary: #7C5CFF;
  --primary-hover: #8F75FF;
  --primary-soft: rgba(124, 92, 255, 0.15);

  --accent: #F2C94C;
  --accent-soft: rgba(242, 201, 76, 0.20);

  --input-bg: #141821;
  --input-text: #e5e7eb;
  --input-border: #374151;
  --input-placeholder: rgba(156, 163, 175, 0.85);

  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0, 0.35);
}

/* =========================
   MARKETING (optional warmer)
   ========================= */
body.theme-marketing {
  --bg: #F6F7FB;
  --content-bg: #F6F7FB;
  --panel: #FFFFFF;
  --panel-soft: #EEF0F7;
  --panel-border: rgba(30, 31, 41, 0.12);

  --sidebar: #FFFFFF;
  --sidebar-border: rgba(30, 31, 41, 0.12);
  --sidebar-text: #1E1F29;
  --sidebar-link: #1E1F29;
  --sidebar-link-hover-bg: rgba(91, 95, 239, 0.10);
  --sidebar-link-active-bg: rgba(91, 95, 239, 0.14);

  --text: #1E1F29;
  --text-muted: #5C5F7A;

  --primary: #5B5FEF;
  --primary-hover: #6F73FF;
  --primary-soft: rgba(91, 95, 239, 0.12);

  --accent: #F2C94C;
  --accent-soft: rgba(242, 201, 76, 0.25);

  --input-bg: #FFFFFF;
  --input-text: #1E1F29;
  --input-border: rgba(30, 31, 41, 0.18);
  --input-placeholder: rgba(92, 95, 122, 0.75);

  --radius: 14px;
  --shadow: 0 10px 30px rgba(30, 31, 41, 0.10);
}

/* =========================================================
   GLOBAL APPLICATION STYLES
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--text);
  height: 100%;
}

html, body { height: 100%; }
body.theme-app.auth-gradient { min-height: 100vh; }

/* Cards */
.card {
  border-radius: var(--radius);
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}

/* Buttons */
.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.btn-primary:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }

.btn-outline-primary {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-outline-primary:hover {
  background: var(--primary) !important;
  color: #fff !important;
}

/* Inputs */
.form-control, .form-select {
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
  border-radius: 12px;
}
.form-control::placeholder { color: var(--input-placeholder); }

/* Sidebar (shared by user + admin) */
.sidebar {
  background: var(--sidebar);
  color: var(--sidebar-text);
  border-right: 1px solid var(--sidebar-border);
}

.sidebar .nav-link {
  color: var(--sidebar-link) !important;
  border-radius: 12px;
  padding: 12px 10px;
}
.sidebar .nav-link:hover {
  background: var(--sidebar-link-hover-bg);
}
.sidebar .nav-link.active {
  background: var(--sidebar-link-active-bg);
  font-weight: 700;
}

/* Content area */
.content {
  background: var(--content-bg);
  color: var(--text);
}

/* Badges */
.badge-unread { background: var(--danger); }
.text-muted { color: var(--text-muted) !important; }

/* Modal: keep readable */
.modal-content {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}

/* Support chat / ticket modal – force light surfaces */
.support-chat,
.ticket-chat,
.chat-window,
.chat-container,
.support-modal,
.ticket-modal,
.modal-body {
  color: var(--text);
}

.support-chat,
.ticket-chat,
.chat-window,
.chat-container {
  background: var(--panel) !important;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}

/* Message bubbles (safe defaults) */
.chat-message,
.message-bubble {
  background: var(--panel-soft) !important;
  color: var(--text) !important;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
}

/* Chat input */
.support-chat input,
.support-chat textarea,
.ticket-chat input,
.ticket-chat textarea,
.chat-window input,
.chat-window textarea {
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--input-border) !important;
}

/* Settings inputs – force token colors */
.settings-page .form-control,
.settings-page .form-select,
.settings-page input,
.settings-page select {
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--input-border) !important;
}
.settings-page .form-control::placeholder {
  color: var(--input-placeholder) !important;
}

/* =========================================================
   LIGHT THEME SAFETY NET
   Prevent leftover dark Bootstrap classes from breaking UI
   ========================================================= */

/* Any container still using bg-dark/text-white should behave like light */
body.theme-app .bg-dark,
body.theme-app .bg-black,
body.theme-app .text-bg-dark {
  background: var(--panel) !important;
  color: var(--text) !important;
}

/* If something sets text-white on light surfaces */
body.theme-app .text-white {
  color: var(--text) !important;
}

/* Tables accidentally left as table-dark */
body.theme-app .table-dark {
  --bs-table-bg: var(--panel) !important;
  --bs-table-striped-bg: var(--panel-soft) !important;
  --bs-table-color: var(--text) !important;
  --bs-table-border-color: var(--panel-border) !important;
}

body.theme-app .table {
  color: var(--text) !important;
}

/* Any modal content should always be light in theme-app */
body.theme-app .modal-content {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--panel-border) !important;
}
body.theme-app .modal-header,
body.theme-app .modal-body,
body.theme-app .modal-footer {
  background: transparent !important;
  color: var(--text) !important;
}

/* Light theme buttons: improve outline contrast */
body.theme-app .btn-outline-light,
body.theme-app .btn-outline-secondary {
  color: #1e1f29 !important;
  border-color: #6b7280 !important;
  background: transparent !important;
}

body.theme-app .btn-outline-light:hover,
body.theme-app .btn-outline-light:focus,
body.theme-app .btn-outline-secondary:hover,
body.theme-app .btn-outline-secondary:focus {
  color: #0f1115 !important;
  border-color: #4b5563 !important;
  background: rgba(30, 31, 41, 0.08) !important;
}

/* Admin content back links using text-warning */
body.theme-app .admin-content a.text-warning {
  color: #1e1f29 !important;
}
body.theme-app .admin-content a.text-warning:hover {
  color: #0f1115 !important;
  text-decoration: underline;
}

/* Modal close buttons: ensure visible on light modal backgrounds */
.modal .btn-close,
.modal .close,
.modal .modal-close,
.modal .close-btn,
.modal button[aria-label="Close"],
.modal [data-dismiss="modal"] {
  color: #1e1f29;
  opacity: 0.75;
}

.modal .btn-close {
  filter: none;
}

.modal .btn-close:hover,
.modal .btn-close:focus,
.modal .close:hover,
.modal .close:focus,
.modal .modal-close:hover,
.modal .modal-close:focus,
.modal .close-btn:hover,
.modal .close-btn:focus,
.modal button[aria-label="Close"]:hover,
.modal button[aria-label="Close"]:focus,
.modal [data-dismiss="modal"]:hover,
.modal [data-dismiss="modal"]:focus {
  opacity: 1;
  color: #0f1115;
}

/* Support chat bubbles: adjust contrast */
body.theme-app .modal .bg-secondary.text-white {
  background: #d6d9de !important;
  color: #1e1f29 !important;
}

body.theme-app .modal .bg-light.text-dark {
  background: #eef1f4 !important;
  color: #1e1f29 !important;
}

/* Ready-to-use questions list (project view modal) */
body.theme-app #builtinsModal .fw-bold,
body.theme-app #builtinsModal .small,
body.theme-app #builtinsModal .text-muted,
body.theme-app #builtinsModal .border-bottom {
  color: #1e1f29 !important;
}

body.theme-app #builtinsModal .btn-warning {
  color: #1b1b1b !important;
}

/* Project question list buttons */
body.theme-app .list-group-item .btn-outline-light {
  color: #1e1f29 !important;
  border-color: #6b7280 !important;
}

/* Common “dark panel” hardcodes used in popups/lists */
body.theme-app .panel-dark,
body.theme-app .dark-panel,
body.theme-app .dark-box,
body.theme-app .list-dark {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--panel-border) !important;
}

/* Inputs inside modals/popups */
body.theme-app .modal .form-control,
body.theme-app .modal .form-select,
body.theme-app .modal input,
body.theme-app .modal select,
body.theme-app .modal textarea {
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--input-border) !important;
}
body.theme-app .modal .form-control::placeholder,
body.theme-app .modal textarea::placeholder {
  color: var(--input-placeholder) !important;
}

.login-shift-up { margin-top: -120px; }
@media (max-width: 576px) {
  .login-shift-up { margin-top: -70px; }
}
.familiada-login-brand {
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: .5px;
}

.login-top-brand{
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 20;
  text-decoration: none;
}

.login-top-logo{
  height: 46px;
  width: auto;
  display: block;
}


html { scroll-behavior: smooth; font-size: calc(100% * var(--ui-scale, 1)); }
section { scroll-margin-top: 90px; }

/* =========================
   HOMEPAGE READABILITY FIX
   ========================= */

.homepage section {
  color: #1e1e1e; /* main readable text */
}

.homepage h1,
.homepage h2,
.homepage h3,
.homepage h4 {
  color: #111;
}

.homepage p,
.homepage li,
.homepage .accordion-body {
  color: #333;
}

.homepage .lead {
  color: #222;
}

/* Cards / panels on homepage */
.homepage .card,
.homepage .rounded-4 {
  background: #ffffff;
  color: #1e1e1e;
}

/* Accordion buttons */
.homepage .accordion-button {
  color: #111;
  background-color: #f6f6f6;
}

.homepage .accordion-button:not(.collapsed) {
  background-color: #ececec;
  color: #111;
}

/* Small muted text */
.homepage .text-muted,
.homepage .opacity-75,
.homepage .opacity-50 {
  color: #555 !important;
}

/* Darker top navigation bar */
.navbar,
.navbar-dark {
  background: linear-gradient(
    180deg,
    #0b0d12,
    #090b10
  ) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}


/* Navbar text contrast */
.navbar .nav-link,
.navbar .navbar-brand {
  color: rgba(255,255,255,0.90) !important;
}

.navbar .nav-link:hover {
  color: #ffc107 !important;
}


/* ==================================================
   PROJECT VIEW – QUESTIONS & ANSWERS READABILITY
   ================================================== */

/* Question container */
.project-view .question-card,
.project-view .question-item,
.project-view .list-group-item {
  background: #f5f6f8 !important;
  border: 1px solid #e1e3e6;
  color: #111 !important;
}

/* Question text */
.project-view .question-text,
.project-view .question-title {
  color: #111 !important;
  font-weight: 600;
}

/* ANSWERS TEXT (this is what you meant) */
.project-view .answer-text,
.project-view .answer,
.project-view .list-group-item span {
  color: #1a1a1a !important;
  font-weight: 500;
}

/* Points next to answers */
.project-view .points,
.project-view .answer-points,
.project-view .badge {
  color: #6f42c1 !important;           /* purple */
  background-color: rgba(111,66,193,0.12) !important;
  border: 1px solid rgba(111,66,193,0.35);
  font-weight: 700;
}

/* Spacing so answers don't feel cramped */
.project-view .answer-row,
.project-view .list-group-item {
  padding: 0.75rem 1rem;
}

/* ================================
   PROJECT VIEW – FORCE ANSWERS DARK
   ================================ */

/* Any text inside question rows / answer rows */
.project-view .list-group-item *,
.project-view .question-item *,
.project-view .question-card * {
  color: #1a1a1a !important;
}

/* Re-apply purple only to points (override the override) */
.project-view .points,
.project-view .answer-points,
.project-view .badge {
  color: #6f42c1 !important;
}

/* =========================
   AUTH PAGES (login/register)
   Dark gradient background
   ========================= */
body.theme-app.auth-gradient {
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(255, 193, 7, 0.20), transparent 60%),
    radial-gradient(900px 520px at 80% 22%, rgba(129, 72, 255, 0.22), transparent 58%),
    radial-gradient(1100px 700px at 50% 78%, rgba(0, 180, 255, 0.10), transparent 60%),
    linear-gradient(180deg, #06080c 0%, #070a10 35%, #05070b 100%) !important;
}

/* ensure the layout container doesn't "paint" over the background */
body.theme-app.auth-gradient main.container {
  background: transparent !important;
}

/* top-left logo on auth pages */
body.theme-app.auth-gradient .auth-top-brand {
  position: fixed;
  top: 18px;
  left: 20px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

body.theme-app.auth-gradient .auth-top-brand img {
  height: 44px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}

/* keep cards readable on dark bg */
body.theme-app.auth-gradient .card {
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* Footer matches navbar */
.site-footer, footer{
  background: var(--nav-bg, #0b0d14);
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ===========================
   DASHBOARD AD BANNERS
   =========================== */

.dashboard-ad-slot {
  width: 100%;
  aspect-ratio: 5 / 1;     /* 1500x300 visible area */
  overflow: hidden;
  border-radius: 12px;
}

.dashboard-ad-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* fills slot, crops instead of letterboxing */
  display: block;
}

@media (max-width: 768px) {
  /* your homepage hero wrapper is: <section class="mb-5 pt-5"> */
  section.mb-5.pt-5 {
    padding-top: 16px !important;   /* was pt-5 (~48px) */
    margin-bottom: 16px !important; /* reduce mb-5 too */
  }

  /* keep the inner hero card a bit tighter on mobile */
  .hp-hero.hp-hero-split {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}

@media (max-width: 768px) {
  .hp-hero-left {
    text-align: center !important;
  }

  .hp-hero-left p,
  .hp-hero-left .lead {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hp-hero-left .d-flex {
    justify-content: center !important;
  }
}