/* =============================================
   📱 MOBILE.CSS - PWA / App Mobile Experience
   Optimisé pour Onekana Business Manager
   ============================================= */

/* 
   Ce fichier est chargé uniquement sur mobile via media query dans index.html.
   Il transforme l'interface web en une véritable application mobile native.
*/

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --header-height: 60px;
  --bottom-nav-height: 70px;
}

/* ✅ Reset & App Feel */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

body {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  user-select: none;
}

/* ✅ Layout Adjustments */
.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.app-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--header-height) !important;
  padding: 0 16px !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.app-content {
  margin-top: 0 !important;
  margin-left: 0 !important;
  padding: calc(var(--header-height) + 16px) 16px calc(var(--bottom-nav-height) + 30px) 16px !important;
  height: 100vh !important;
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background-color: var(--color-bg) !important;
  box-sizing: border-box !important;
}

/* ✅ TOPBAR - Hide/Show logic per User Request */

/* 1. Hide Sidebar, Help, Notifications and Footer */
.app-sidebar:not(.is-open),
.btn-help,
.btn-notifications,
footer {
  display: none !important;
}

/* 2. Simplify User Profile Button */
.btn-user-profile {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
  gap: 0 !important;
  min-width: unset !important;
}

/* Hide name, company and chevron */
.user-info-desktop,
.user-chevron-desktop {
  display: none !important;
}

/* Center and style the avatar icon */
.btn-user-profile > div:first-child {
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  border: 2px solid white !important;
}

/* 3. Optimize Logout Button */
.app-header button.btn svg {
  margin: 0 !important;
}

.app-header button.btn span {
  display: none !important;
}

.app-header button.btn {
  padding: 0 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: unset !important;
  border-radius: 50% !important;
  justify-content: center !important;
}

/* ✅ Navigation Basse (Bottom Nav) */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-height);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex !important;
  justify-content: space-around;
  align-items: center;
  padding-bottom: var(--safe-bottom);
  z-index: 1000;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}

.mobile-bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1;
  height: 100%;
}

.mobile-bottom-nav .nav-item.active {
  color: var(--color-accent);
}

.mobile-bottom-nav .nav-item.active svg {
  transform: translateY(-2px);
  filter: drop-shadow(0 2px 4px rgba(201, 169, 98, 0.2));
}

/* ✅ UI Components - Native Feel */
.card {
  border-radius: 20px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  margin-bottom: 16px !important;
}

.btn {
  border-radius: 16px !important;
  font-weight: 600 !important;
}

/* ✅ Chatbot Repositioning (above bottom nav) */
.nirvana-trigger {
  bottom: calc(var(--bottom-nav-height) + 20px) !important;
  right: 20px !important;
  width: 55px !important;
  height: 55px !important;
}

.nirvana-window {
  bottom: calc(var(--bottom-nav-height) + 10px) !important;
  right: 10px !important;
  left: 10px !important; /* Full width on mobile */
  width: calc(100% - 20px) !important;
  height: calc(100vh - var(--header-height) - var(--bottom-nav-height) - 40px) !important;
}

/* ✅ DASHBOARD REDESIGN */

/* Welcome Card */
.welcome-card {
  padding: 20px !important;
  text-align: center;
}

.welcome-card > div {
  flex-direction: column !important;
  gap: 16px !important;
}

.welcome-card .d-flex.align-center {
  flex-direction: column !important;
  gap: 12px !important;
}

.welcome-card h1 {
  font-size: 20px !important;
}

.welcome-card .d-flex.gap-md {
  flex-direction: column !important;
  gap: 8px !important;
  align-items: center !important;
}

/* Nirvana Briefing Card */
.nirvana-briefing-card {
  padding: 20px !important;
}

.nirvana-briefing-card .d-flex.justify-between {
  flex-direction: column !important;
}

.nirvana-briefing-card h2 {
  font-size: 18px !important;
}

.nirvana-briefing-card .insight-grid,
.nirvana-briefing-card > div > div:first-child > div:last-child {
  grid-template-columns: 1fr !important; /* Stack insights */
}

.nirvana-briefing-card > div > div:last-child {
  width: 100% !important;
  margin-top: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px;
}

/* Quick Actions - Make them more compact and aligned */
.quick-actions-grid {
  grid-template-columns: 1fr !important; /* Stack for better readability */
  gap: 12px !important;
}

.quick-actions-grid .card {
  padding: 12px !important;
  margin-bottom: 0 !important;
}

/* Stats Grid - 2 columns but with better size */
.stats-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

.stats-grid .card {
  padding: 16px !important;
  margin-bottom: 0 !important;
}

.stats-grid .card .d-flex.align-center {
  flex-direction: column !important;
  text-align: center;
  gap: 8px !important;
}

.stats-grid .card h3, 
.stats-grid .card p {
  font-size: 12px !important;
}

.stats-grid .card p[style*="font-size: 24"] {
  font-size: 18px !important;
}

/* Performance Grid */
.performance-grid {
  grid-template-columns: 1fr !important;
}

/* Campaign Types Grid */
.campaign-types-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.campaign-types-grid > div {
  padding: 16px !important;
  border-radius: 16px !important;
}

.campaign-types-grid h3 {
  font-size: 14px !important;
  margin-bottom: 2px !important;
}

.campaign-types-grid p {
  font-size: 12px !important;
  margin-bottom: 12px !important;
  height: 36px !important; /* Force small height */
}

.campaign-types-grid .d-flex.align-center.gap-16 {
    gap: 10px !important;
}

.campaign-types-grid div[style*="width: 52px"] {
    width: 40px !important;
    height: 40px !important;
}

.campaign-types-grid svg {
    width: 18px !important;
    height: 18px !important;
}

/* End of Campaign Types Grid optimizations */

.campaign-types-grid p {
  font-size: 12px !important; /* Smaller description */
  height: 36px !important; /* Smaller height */
  margin-bottom: 12px !important;
}

.campaign-types-grid .d-flex.align-center > div:first-child {
  width: 40px !important; /* Smaller icon container */
  height: 40px !important;
}

.campaign-types-grid .d-flex.align-center svg {
  width: 18px !important; /* Smaller icon */
  height: 18px !important;
}

.campaign-types-grid div[style*="padding-top: 16"] {
  padding-top: 10px !important; /* Smaller footer padding */
}

.campaign-types-grid span {
  font-size: 11px !important; /* Smaller tags and footer text */
}

/* Page Titles and Layout polish */
.dashboard-content h2, 
.dashboard-content h3 {
  text-align: center;
  margin-bottom: 12px !important;
}

/* Button polish for mobile */
.welcome-card .btn {
  width: 100% !important;
  margin-bottom: 8px;
}

/* ✅ Sidebars Handling */
.app-sidebar {
  position: fixed !important;
  left: -280px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 280px !important;
  z-index: 2000 !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important; /* Always flex but off-screen */
}

.app-sidebar.is-open {
  transform: translateX(280px) !important;
}

.app-right-sidebar {
  display: none !important;
}

/* Burger Menu Visibility */
.burger-menu {
  display: flex !important;
}

/* ✅ Smooth Transitions */
.page-container {
  animation: mobileFadeIn 0.3s ease-out;
}

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

/* ✅ Forms Mobile Optimization */
input, select, textarea {
  font-size: 16px !important; /* Prevent iOS zoom on focus */
}

/* ✅ Scrollbar Hide */
.app-content::-webkit-scrollbar {
  display: none;
}

/* --- Campaigns Page Modernization --- */
.campaigns-page {
    padding: 10px !important;
}

.campaigns-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px;
    margin-bottom: 20px !important;
}

.campaigns-header .btn-primary {
    width: 100%;
    justify-content: center;
    padding: 14px !important;
    border-radius: 12px !important;
    font-weight: 600;
}

.campaigns-filters {
    padding: 16px !important;
    border-radius: 16px !important;
    margin-bottom: 20px !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.filters-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.campaigns-list-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.campaigns-table, 
.campaigns-table thead, 
.campaigns-table tbody, 
.campaigns-table tr, 
.campaigns-table td {
    display: block !important;
    width: 100% !important;
}

.campaigns-table thead {
    display: none !important; /* Hide table headers on mobile */
}

.campaign-row {
    background: #1A1D21 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.2s ease !important;
}

.campaign-row:active {
    transform: scale(0.98);
}

.campaign-row td {
    padding: 0 !important;
    border: none !important;
    margin-bottom: 12px;
}

.col-campaign {
    margin-bottom: 16px !important;
    padding-right: 100px !important; /* Espace pour le badge de statut */
}

.campaign-name {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
}

.campaign-type {
    display: inline-block;
    background: rgba(201, 169, 98, 0.15);
    color: #C9A962 !important;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.col-status {
    position: absolute;
    top: 18px;
    right: 16px;
    margin-bottom: 0 !important;
    z-index: 2;
}

.campaign-status-badge {
    padding: 6px 12px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.col-budget {
    background: rgba(255, 255, 255, 0.02);
    padding: 12px !important;
    border-radius: 12px;
    margin-bottom: 16px !important;
}

.budget-info .d-flex {
    align-items: center;
}

.budget-total {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
}

.col-dates {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px !important;
    padding: 0 4px !important;
}

.date-item {
    font-size: 12px !important;
    color: #94A3B8 !important;
}

.col-actions {
    margin-bottom: 0 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.actions-group {
    justify-content: space-between !important;
    width: 100%;
    display: flex !important;
    gap: 8px !important;
}

.action-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.action-btn-pay {
    flex: 1;
    margin-left: 4px !important;
    height: 42px !important;
    border-radius: 10px !important;
    font-weight: 600;
}

/* Empty state adjustment */
.campaign-empty-state {
    padding: 40px 20px !important;
    border-radius: 24px !important;
}

/* --- Trajets Page Modernization --- */
.trajets-page {
    padding: 0 !important;
}

.trajets-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px;
    margin-bottom: 24px !important;
}

.trajets-header .btn-primary {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
}

.trajets-filters {
    padding: 12px !important;
    border-radius: 16px !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.trajets-filters .btn-secondary {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px !important;
    border-radius: 10px !important;
}

.trajets-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

.trajet-card {
    border-radius: 20px !important;
    padding: 14px !important;
    background: #1A1D21 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.trajet-card h3 {
    color: #FFFFFF !important;
}

.trajet-card p, .trajet-card span {
    color: rgba(255, 255, 255, 0.7) !important;
}

.trajet-card:active {
    transform: scale(0.98);
    transition: transform 0.1s;
}

.trajet-icon {
    width: 36px !important;
    height: 36px !important;
    background: rgba(201, 169, 98, 0.1) !important;
    border-radius: 12px !important;
}

.trajet-route {
    background: rgba(255, 255, 255, 0.02) !important;
    padding: 12px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
}

.route-indicator {
    padding-top: 4px;
}

.route-line {
    background: rgba(201, 169, 98, 0.3) !important;
    width: 1px !important;
}

.dot-start {
    background: #C9A962 !important;
    box-shadow: 0 0 8px #C9A962;
}

.dot-end {
    border-color: #C9A962 !important;
}

.address-text {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #F8FAFC !important;
    max-width: calc(100vw - 110px) !important;
}

.trajet-footer {
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    gap: 8px !important;
}

.stat-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 6px 10px;
    border-radius: 8px;
    justify-content: center;
}

.stat-item span, .stat-item svg {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.action-btn-view {
    background: #C9A962 !important;
    color: #0A0C10 !important;
    height: 40px !important;
    border-radius: 12px !important;
}

.trajets-empty-state {
    padding: 60px 20px !important;
    border-radius: 28px !important;
}

/* --- Public Transport Page Mobile Optimization --- */
.transport-page {
    padding: 0 !important;
    height: calc(100vh - var(--header-height) - var(--bottom-nav-height)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Ensure app-content doesn't scroll when transport-page is active to allow internal scroll */
.app-content:has(.transport-page) {
    overflow: hidden !important;
    padding: var(--header-height) 0 0 0 !important;
}

.transport-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding: 0 16px !important;
}

.transport-header > div:last-child {
    width: 100% !important;
}

.transport-header .btn {
    width: 100% !important;
    justify-content: center !important;
}

.transport-grid {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    overflow: hidden !important;
    gap: 0 !important;
}

.transport-map-card {
    height: 280px !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.transport-list-card {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 24px 16px 120px 16px !important;
    border-radius: 24px 24px 0 0 !important;
    margin-top: -24px !important;
    background: var(--color-bg) !important;
    position: relative !important;
    z-index: 11 !important;
    border: none !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1) !important;
}

.transport-list-card .list-item {
    padding: 14px !important;
    margin-bottom: 8px !important;
}

.transport-list-card h3 {
    font-size: 16px !important;
}

/* --- Points Chauds Page Mobile Optimization --- */
.points-chauds-page {
    padding: 0 !important;
    height: calc(100vh - var(--header-height) - var(--bottom-nav-height)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.app-content:has(.points-chauds-page) {
    overflow: hidden !important;
    padding: var(--header-height) 0 0 0 !important;
}

.points-chauds-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    padding: 0 16px !important;
}

.points-chauds-header .btn {
    width: 100% !important;
    justify-content: center !important;
}

.points-chauds-filters {
    margin: 0 16px 16px 16px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
}

.points-chauds-grid {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important; /* Fix for flex children height */
    overflow: hidden !important;
    gap: 0 !important;
}

.points-chauds-map-card {
    height: 280px !important;
    min-height: 280px !important;
    width: 100% !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important; /* Changed from sticky to relative for safety */
    z-index: 10 !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.points-chauds-map-card > div {
    height: 100% !important;
    width: 100% !important;
}

.points-chauds-list-card {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 24px 16px 120px 16px !important;
    border-radius: 24px 24px 0 0 !important;
    margin-top: -24px !important;
    background: var(--color-bg) !important;
    position: relative !important;
    z-index: 11 !important;
    border: none !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1) !important;
}

.points-chauds-list-card .list-item {
    padding: 14px !important;
    margin-bottom: 8px !important;
}

.points-chauds-list-card h3 {
    font-size: 16px !important;
}

/* --- Messaging Page Mobile Optimization --- */
.messaging-page {
    gap: 16px !important;
}

.messaging-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.messaging-header > div:last-child {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.messaging-header .btn {
    padding: 10px !important;
    font-size: 12px !important;
    justify-content: center !important;
}

.platform-status-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

.platform-status-grid button {
    padding: 12px !important;
    gap: 10px !important;
}

.platform-status-grid button div:first-child div {
    width: 32px !important;
    height: 32px !important;
}

.platform-status-grid button p {
    font-size: 12px !important;
}

.chat-container {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: unset !important;
}

.contacts-panel {
    max-height: 120px !important;
    margin-bottom: 12px !important;
}

.contacts-panel h3, .contacts-panel span {
    display: none !important;
}

.contacts-panel > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    padding: 10px !important;
    gap: 12px !important;
    -webkit-overflow-scrolling: touch !important;
}

.contacts-panel > div:last-child > div {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    border: none !important;
    min-width: 60px !important;
}

.contacts-panel > div:last-child > div div:first-child {
    width: 44px !important;
    height: 44px !important;
}

.contacts-panel > div:last-child > div div:last-child {
    text-align: center !important;
}

.contacts-panel > div:last-child > div p {
    font-size: 10px !important;
    max-width: 60px !important;
}

.contacts-panel > div:last-child > div p:last-child {
    display: none !important; /* Hide preview content */
}

.messages-panel {
    height: 450px !important;
}

.messages-panel .chat-header {
    padding: 12px !important;
}

.messages-panel .chat-header > div:last-child {
    display: none !important; /* Hide platform switcher tabs in chat header on mobile */
}

.messages-panel div[style*="padding: 20px 24px"] {
    padding: 16px !important;
}

.messages-panel form {
    padding: 10px 12px !important;
}

.messages-panel form input {
    font-size: 14px !important;
}

.messages-panel form button {
    padding: 10px 16px !important;
    font-size: 12px !important;
}

/* --- Payments Page Mobile Optimization --- */
.payments-page {
    gap: 16px !important;
}

.payments-header {
    padding: 20px !important;
    border-radius: 16px !important;
}

.payments-header > div:first-child {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
}

.payments-header h1 {
    font-size: 22px !important;
}

.payments-header p {
    font-size: 14px !important;
}

.payments-tabs {
    align-self: stretch !important;
    overflow-x: auto !important;
    padding: 4px !important;
    gap: 4px !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
}

.payments-tabs button {
    padding: 8px 14px !important;
    font-size: 13px !important;
    flex: 1 !important;
}

.methods-grid, .available-methods-grid, .pending-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.wallet-container {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.wallet-container h3 {
    font-size: 28px !important;
}

.wallet-container .card {
    padding: 20px !important;
}

.payments-page .card[style*="padding: 18px 24px"] {
    padding: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.payments-page .card[style*="padding: 18px 24px"] > div:last-child {
    width: 100% !important;
    text-align: left !important;
    justify-content: space-between !important;
}

.payments-page div[style*="gridTemplateColumns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important; /* Expansion details in history */
    gap: 12px !important;
    padding: 16px !important;
}

.payments-page div[style*="gridTemplateColumns: repeat(4, 1fr)"] > div:last-child {
    grid-column: span 2 !important;
    text-align: center !important;
}

/* --- My Packs Page Mobile Optimization --- */
.mypacks-page {
    gap: 16px !important;
    padding-top: 10px !important;
}

.mypacks-header {
    padding: 20px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
}

.mypacks-header > div:first-child {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}

.mypacks-header h1 {
    font-size: 18px !important;
}

.mypacks-header p {
    font-size: 13px !important;
}

.mypacks-header .btn {
    width: 100% !important;
    justify-content: center !important;
}

.mypacks-pending-banner {
    padding: 16px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
}

.mypacks-pending-banner > div:last-child {
    width: 100% !important;
}

.mypacks-pending-banner h3 {
    font-size: 15px !important;
}

.mypacks-pending-banner p {
    font-size: 12px !important;
}

.mypacks-pending-banner div[style*="display: flex; gap: 32"] {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
}

.mypacks-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding-bottom: 100px !important;
}

.mypacks-grid .card {
    padding: 16px !important;
    gap: 12px !important;
}

.mypacks-grid .card h3 {
    font-size: 15px !important;
}

.mypacks-grid .card span[style*="font-size: 16"] {
    font-size: 14px !important;
}

/* --- Packs Selection Page Mobile Optimization --- */
.packs-selection-page {
    padding-bottom: 120px !important;
}

.packs-selection-header {
    padding: 20px !important;
    text-align: center !important;
}

.packs-selection-header h1 {
    font-size: 20px !important;
}

.packs-selection-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

.packs-selection-grid .card {
    padding: 20px !important;
}

.packs-selection-grid .card h3 {
    font-size: 16px !important;
}

.packs-selection-grid .card span[style*="font-size: 15"] {
    font-size: 13px !important;
}

.packs-selection-nav {
    padding: 16px !important;
}

.packs-selection-nav > div {
    flex-direction: column-reverse !important;
    gap: 12px !important;
}

.packs-selection-nav .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px !important;
}

/* --- Settings Page Mobile Optimization --- */
.settings-page {
    padding-bottom: 80px !important;
}

.settings-header {
    margin-bottom: 16px !important;
}

.settings-header h1 {
    font-size: 20px !important;
}

.settings-tabs {
    align-self: stretch !important;
    overflow-x: auto !important;
    padding: 0 !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px !important;
}

.settings-tabs > div {
    display: flex !important;
}

.settings-tabs button {
    padding: 14px 18px !important;
    font-size: 13px !important;
    flex: 1 !important;
}

.settings-form-container {
    max-width: 100% !important;
}

.settings-form-container .card {
    padding: 20px !important;
}

.settings-form-container h3 {
    font-size: 16px !important;
}

.settings-form-container .btn {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 10px !important;
}

.settings-form-container .d-flex.gap-sm {
    flex-direction: column !important;
    gap: 10px !important;
}

.settings-form-container label.d-flex.align-center.gap-sm {
    align-items: flex-start !important;
}

.settings-form-container input[type="checkbox"] {
    margin-top: 4px !important;
}

/* --- Notifications Page Mobile Optimization --- */
.notifications-page {
    padding-bottom: 100px !important;
}

.notifications-header {
    padding: 16px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
}

.notifications-header > div:last-child {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
}

.notifications-header .btn {
    flex: 1 !important;
    justify-content: center !important;
    padding: 10px !important;
    font-size: 13px !important;
}

.notifications-main-layout {
    flex-direction: column !important;
}

.notifications-sidebar {
    width: 100% !important;
    box-sizing: border-box !important;
}

.notifications-toolbar {
    padding: 16px !important;
}

.notifications-toolbar > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
}

.notifications-toolbar div[style*="background: var(--color-bg-tertiary)"] {
    width: 100% !important;
    display: flex !important;
}

.notifications-toolbar div[style*="background: var(--color-bg-tertiary)"] button {
    flex: 1 !important;
}

.notifications-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.notifications-stats-grid .card {
    padding: 16px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
}

.notifications-list {
    grid-template-columns: 1fr !important;
}

.notifications-list .card > div {
    padding: 16px !important;
    position: relative !important;
}

.notifications-list .card h3 {
    font-size: 13px !important;
}

.notifications-list .card p {
    font-size: 12px !important;
}

/* Action buttons on mobile card */
.notifications-list .card div[style*="flexDirection: column"] {
    flex-direction: row !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    gap: 2px !important;
}

.notifications-list .card div[style*="flexDirection: column"] button {
    padding: 4px !important;
}

/* --- Nirvana AI Chatbot Mobile Optimization --- */
.nirvana-trigger {
    bottom: calc(var(--bottom-nav-height) + 20px) !important;
    right: 20px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
}

.nirvana-window {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    z-index: 10000 !important; /* Ensure it's above everything including bottom nav */
}

.nirvana-window > div:first-child {
    height: 64px !important;
    padding: 0 16px !important;
    border-radius: 0 !important;
}

.nirvana-window [style*="height: 32px"] {
    display: none !important; /* Hide minimize button on mobile */
}

.nirvana-window [style*="height: 32px"]:last-child {
    display: flex !important; /* Show close button only */
}

.nirvana-window div[style*="padding: 24px 20px"] {
    padding: 16px !important;
}

.nirvana-window div[style*="gridTemplateColumns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

.nirvana-window div[style*="padding: 20px"] {
    padding: 12px 16px !important;
    padding-bottom: env(safe-area-inset-bottom, 20px) !important;
}

.nirvana-window input {
    font-size: 16px !important; /* Prevent iOS zoom on focus */
}

/* --- Trajet Details Page Mobile Optimization --- */
.trajet-details-page {
    padding: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - var(--header-height) - var(--bottom-nav-height)) !important;
    overflow: hidden !important;
}

.trajet-details-header {
    padding: 16px !important;
    margin-bottom: 0 !important;
    background: white !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.trajet-details-header h1 {
    font-size: 18px !important;
}

.trajet-details-header [style*="display: flex; gap: 12"] {
    display: none !important; /* Hide share/print on mobile header to save space */
}

.trajet-details-grid {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    overflow: hidden !important;
    gap: 0 !important;
}

.trajet-details-map-card {
    height: 300px !important;
    min-height: 300px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 10 !important;
    position: relative !important;
    display: block !important;
}

.trajet-details-map-card .map-canvas {
    height: 300px !important;
    width: 100% !important;
    border-radius: 0 !important;
}

.trajet-details-info {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px 16px !important;
    gap: 16px !important;
    background: var(--color-bg-secondary) !important;
}

.trajet-details-info .card {
    padding: 16px !important;
    border-radius: 16px !important;
}

.trajet-details-info h3 {
    font-size: 15px !important;
}

.trajet-details-info div[style*="fontSize: 24"] {
    font-size: 20px !important;
}

.trajet-details-info .btn {
    width: 100% !important;
    justify-content: center !important;
}

/* --- Campaign Details Page Mobile Optimization --- */
.campaign-details-page {
    padding-bottom: 100px !important;
}

.campaign-details-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
}

.campaign-details-actions > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

.campaign-details-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px !important;
    font-size: 13px !important;
}

.campaign-details-unpaid-banner {
    padding: 20px 16px !important;
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
}

.campaign-details-unpaid-banner > div {
    flex-direction: column !important;
}

.campaign-details-header-card {
    padding: 24px 16px !important;
    text-align: center !important;
}

.campaign-details-header-card > div:first-child {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
}

.campaign-details-header-card h1 {
    font-size: 24px !important;
}

.campaign-details-header-card div[style*="textAlign: right"] {
    text-align: center !important;
}

.campaign-header-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    padding-top: 24px !important;
}

.campaign-details-main-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
}

.campaign-performance-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.campaign-details-performance-section .card, .campaign-details-sidebar .card {
    padding: 20px 16px !important;
}

.campaign-details-performance-section h3, .campaign-details-sidebar h3 {
    font-size: 16px !important;
    margin-bottom: 16px !important;
}

.campaign-details-performance-section div[style*="height: 400"] {
    height: 250px !important;
}

/* --- Campaign Update Page Mobile Optimization --- */
.campaign-update-page {
    padding-bottom: 100px !important;
}

.campaign-update-stepper {
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.campaign-update-stepper span {
    display: none !important; /* Hide labels on mobile to save space */
}

.campaign-update-stepper > div {
    gap: 0 !important;
}

.campaign-update-stepper div[style*="width: 40"] {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
}

.campaign-update-form, .campaign-update-targeting, .campaign-update-validation {
    padding: 24px 16px !important;
}

.campaign-update-form h2, .campaign-update-targeting h2, .campaign-update-validation h2 {
    font-size: 18px !important;
    margin-bottom: 24px !important;
}

.campaign-update-dates-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

.campaign-update-hotspots-grid {
    grid-template-columns: 1fr 1fr !important;
}

.campaign-update-targeting div[style*="padding: 24"] {
    padding: 16px !important;
}

.campaign-update-summary-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center !important;
}

.campaign-update-summary-grid div[style*="textAlign: right"] {
    text-align: center !important;
}

.campaign-update-summary-grid div[style*="fontSize: 32"] {
    font-size: 24px !important;
}

.campaign-update-footer {
    flex-direction: column-reverse !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.campaign-update-footer .btn {
    width: 100% !important;
    justify-content: center !important;
}

/* --- Campaign Type Selection Mobile Optimization --- */
.campaign-type-selection-page {
    padding-bottom: 100px !important;
}

.campaign-type-header {
    margin-bottom: 24px !important;
    text-align: center !important;
}

.campaign-type-header > div:first-child {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}

.campaign-type-header h1 {
    font-size: 22px !important;
}

.campaign-type-header p {
    font-size: 14px !important;
}

.campaign-type-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

.campaign-type-card {
    padding: 24px 20px !important;
}

.campaign-type-card h3 {
    font-size: 18px !important;
}

.campaign-type-card p {
    height: auto !important;
    margin-bottom: 16px !important;
}

.campaign-type-footer {
    display: none !important; /* Hidden by default on mobile */
}

.campaign-type-footer.type-selected {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    position: fixed !important;
    bottom: var(--bottom-nav-height) !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    padding: 16px !important;
    border-top: 1px solid var(--color-border) !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1) !important;
    z-index: 1100 !important; /* Above bottom nav (1000) */
    margin: 0 !important;
    animation: slideUp 0.3s ease-out !important;
}

.campaign-type-footer.type-selected .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px !important;
}

.campaign-type-footer.type-selected .btn-secondary {
    order: 2 !important;
}

.campaign-type-footer.type-selected .btn-primary {
    order: 1 !important;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* --- Campaign Builder Page Mobile Optimization --- */
.campaign-builder-page {
    padding-bottom: 100px !important;
}

.campaign-builder-stepper {
    gap: 8px !important;
    margin-bottom: 24px !important;
}

.campaign-builder-stepper span, .campaign-builder-stepper div[style*="width: 80"] {
    display: none !important;
}

.campaign-builder-stepper div[style*="width: 40"] {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
}

.campaign-builder-type-card {
    flex-direction: column !important;
    text-align: center !important;
    padding: 20px !important;
}

.campaign-builder-type-card button {
    width: 100% !important;
    margin-top: 12px !important;
}

.campaign-builder-form .form-label {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.campaign-builder-form .form-label button {
    width: 100% !important;
    justify-content: center !important;
}

.campaign-builder-dates-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

.campaign-builder-budget-card {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
}

.campaign-builder-budget-card p {
    font-size: 20px !important;
}

.campaign-builder-tabs {
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch !important;
}

.campaign-builder-tabs button {
    flex-shrink: 0 !important;
}

.campaign-builder-targets-grid {
    grid-template-columns: 1fr 1fr !important;
    max-height: 300px !important;
}

.campaign-builder-recap-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    text-align: center !important;
}

.campaign-builder-recap-grid div[style*="textAlign: right"] {
    text-align: center !important;
}

.campaign-builder-recap-grid div[style*="fontSize: 32"] {
    font-size: 24px !important;
}

.campaign-builder-footer {
    flex-direction: column-reverse !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.campaign-builder-footer .btn {
    width: 100% !important;
    justify-content: center !important;
}

.campaign-builder-page .card {
    padding: 24px 16px !important;
}

/* --- Campaign Delete Page Mobile Optimization --- */
.campaign-delete-page {
    padding-bottom: 100px !important;
}

.campaign-delete-header {
    margin-bottom: 20px !important;
}

.campaign-delete-header .btn {
    width: 100% !important;
    justify-content: center !important;
}

.campaign-delete-alert {
    padding: 32px 16px !important;
}

.campaign-delete-alert h1 {
    font-size: 22px !important;
}

.campaign-delete-alert p {
    font-size: 14px !important;
}

.campaign-delete-summary {
    padding: 20px 16px !important;
    margin-bottom: 32px !important;
}

.campaign-delete-summary > div:first-child {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
}

.campaign-delete-summary > div:first-child div[style*="width: 48"] {
    margin: 0 auto !important;
}

.campaign-delete-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    text-align: center !important;
}

.campaign-delete-actions {
    flex-direction: column !important;
    gap: 12px !important;
}

.campaign-delete-actions .btn {
    width: 100% !important;
    height: 50px !important;
}

.campaign-delete-actions .btn-secondary {
    order: 2 !important;
}

.campaign-delete-actions .btn-primary {
    order: 1 !important;
}

.campaign-delete-info {
    padding: 16px !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
}

.campaign-delete-info svg {
    margin: 0 auto !important;
}

/* Unlock body scroll for auth pages */
body:has(.auth-page) {
    overflow: auto !important;
    position: static !important;
    height: auto !important;
}

/* =============================================
   🔐 AUTHENTICATION PAGES (Login & Register)
   ============================================= */

.auth-page {
    padding: 0 !important;
    background-color: #0D0F12 !important;
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
    width: 100vw !important;
    position: relative !important;
}

/* Hide header/nav on auth pages if they try to show up */
.auth-page ~ .app-header,
.auth-page ~ .mobile-bottom-nav {
    display: none !important;
}

.auth-container {
    flex-direction: column !important;
    overflow: visible !important;
}

.auth-left {
    display: none !important; /* Always hide left panel on mobile */
}

.auth-right {
    padding: 24px 16px !important;
    width: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.auth-card {
    background: #1A1D21 !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
    border-radius: 24px !important;
    padding: 32px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
}

.auth-card h1 {
    font-size: 22px !important;
    margin-bottom: 8px !important;
}

.auth-card p.text-muted {
    font-size: 14px !important;
    margin-bottom: 24px !important;
}

.auth-form-grid {
    grid-template-columns: 1fr !important; /* Stack columns on mobile */
    gap: 16px !important;
}

.auth-page .form-group {
    margin-bottom: 20px !important;
}

.auth-page .form-label {
    font-size: 13px !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.auth-page .form-input {
    height: 52px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 16px !important;
    padding: 0 16px 0 44px !important;
}

.auth-page .form-input:focus {
    border-color: var(--color-accent) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.auth-page textarea.form-input {
    height: auto !important;
    padding: 12px 16px 12px 44px !important;
}

/* OTP Verification Specifics */
.otp-verification-page {
    background-color: #0D0F12 !important;
}

.otp-verification-page .auth-card {
    text-align: center !important;
}

.otp-verification-page .form-input {
    text-align: center !important;
    padding: 0 !important;
    font-size: 28px !important;
    letter-spacing: 0.4em !important;
    height: 64px !important;
    background: rgba(212, 175, 55, 0.05) !important;
    border: 2px solid rgba(212, 175, 55, 0.2) !important;
}

/* Auth Buttons */
.auth-page .btn-primary {
    height: 54px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    margin-top: 10px !important;
}

.auth-page .btn-secondary {
    height: 50px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Register specific sections */
.register-page h3 {
    font-size: 16px !important;
    margin: 24px 0 16px 0 !important;
    color: var(--color-accent) !important;
    text-align: left !important;
}

/* =============================================
   🚀 SETUP FLOW (Sector & Activity Selection)
   ============================================= */

.setup-page .auth-right {
    padding: 30px 16px !important;
}

.setup-header {
    margin-bottom: 30px !important;
    text-align: left !important;
}

.setup-header h1 {
    font-size: 32px !important;
    line-height: 1.1 !important;
    margin-bottom: 12px !important;
}

.setup-header p {
    font-size: 15px !important;
    line-height: 1.5 !important;
}

.crixus-interface {
    padding: 16px !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
    border-radius: 4px 16px 16px 4px !important;
}

.crixus-core {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
}

.crixus-core svg {
    width: 24px !important;
    height: 24px !important;
}

.crixus-text {
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.neural-status {
    top: 8px !important;
    right: 12px !important;
    font-size: 8px !important;
}

/* Sector & Activity Cards */
.sector-card, .activity-card {
    padding: 16px !important;
    gap: 16px !important;
    border-radius: 14px !important;
    background: rgba(15, 20, 28, 0.8) !important;
}

.sector-card:hover, .activity-card:hover {
    transform: none !important; /* Disable hover transform on mobile */
}

.sector-card:active, .activity-card:active {
    background: rgba(201, 169, 98, 0.1) !important;
    transform: scale(0.98) !important;
}

.icon-box, .icon-box-small {
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
}

.icon-box svg, .icon-box-small svg {
    width: 24px !important;
    height: 24px !important;
}

.sector-name {
    font-size: 17px !important;
}

.sector-meta {
    font-size: 9px !important;
}

.activity-name {
    font-size: 15px !important;
}

/* Back Button */
.setup-back-btn {
    padding: 8px 12px !important;
    margin-bottom: 24px !important;
    font-size: 9px !important;
    letter-spacing: 1px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
}

/* Cyber Button */
.setup-page .cyber-button {
    width: 100% !important;
    padding: 18px 20px !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    border-radius: 12px !important;
    justify-content: center !important;
}

.setup-page .cyber-button:hover:not(:disabled) {
    letter-spacing: 2px !important; /* Disable letter-spacing expand on mobile hover */
}

/* Grid background on mobile */
.setup-page.auth-container::before {
    background-size: 30px 30px !important;
}

/* Setup Success specific */
.setup-success-page .success-card {
    padding: 40px 24px !important;
    width: 95% !important;
    border-radius: 4px 24px 24px 4px !important;
}

.setup-success-page .check-wrapper {
    width: 80px !important;
    height: 80px !important;
    margin-bottom: 30px !important;
}

.setup-success-page .check-icon-box svg {
    width: 40px !important;
    height: 40px !important;
}

.setup-success-page h1 {
    font-size: 28px !important;
}

.setup-success-page p {
    font-size: 15px !important;
}

.setup-success-page .hud-tag {
    padding: 6px 12px !important;
    font-size: 9px !important;
    margin-bottom: 24px !important;
}

.setup-success-page .cyber-button-gold {
    padding: 18px 20px !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    border-radius: 12px !important;
}

.setup-success-page .hud-label-small {
    font-size: 7px !important;
}

/* =============================================

   �x
 `
 DASHBOARD PAGE

   ============================================= */



.dashboard-page {

    padding: 16px !important;

}



/* Nirvana Briefing */

.nirvana-briefing-section {

    padding: 20px 16px !important;

    border-radius: 20px !important;

}



.nirvana-briefing-section .d-flex.justify-between {

    flex-direction: column !important;

    gap: 24px !important;

}



.nirvana-briefing-section h2 {

    font-size: 20px !important;

}



.nirvana-briefing-section p {

    font-size: 14px !important;

}



.nirvana-briefing-section div[style*="gridTemplateColumns"] {

    grid-template-columns: 1fr !important; /* Stack insights */

}



.nirvana-briefing-section .btn {

    width: 100% !important;

    justify-content: center !important;

}



/* Welcome Section */

.welcome-section {

    padding: 20px 16px !important;

}



.welcome-section .d-flex.justify-between {

    flex-direction: column !important;

    gap: 24px !important;

    align-items: flex-start !important;

}



.welcome-section .d-flex.align-center[style*="gap: 24"] {

    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;

    width: 100% !important;

}



.welcome-section .d-flex.align-center.gap-md {

    flex-direction: column !important;

    gap: 8px !important;

}



.welcome-section .d-flex.gap-sm {

    width: 100% !important;

}



.welcome-section .btn {

    flex: 1 !important;

    justify-content: center !important;

}



/* Quick Actions */

.quick-actions-section {

    grid-template-columns: 1fr !important;

    gap: 12px !important;

}



.quick-actions-section .card {

    padding: 16px !important;

}



/* Stats Section */

.stats-section {

    grid-template-columns: 1fr !important;

    gap: 12px !important;

}



.stats-section .card {

    padding: 16px !important;

}



.stats-section p[style*="fontSize: 24"] {

    font-size: 20px !important;

}



/* Performance Section */

.performance-section {

    padding: 20px 16px !important;

}



.performance-grid {

    grid-template-columns: 1fr !important;

    gap: 12px !important;

}



/* Activity Section */

.activity-section {

    padding: 20px 16px !important;

}



/* Campaigns Section (if present) */

.campaign-types-section {

    padding: 20px 16px !important;

}



/* Standardize card margins on mobile dashboard */

.dashboard-page .card {

    margin-bottom: 16px !important;

}