/**
 * Wangari Mobile Responsive Fix v3
 * Preserves dashboard card design (d2-kpi) 
 * Fixes overflow on other module cards
 */

/* ═══════ GLOBAL MOBILE RESETS ═══════ */
@media (max-width: 768px) {
  * { max-width: 100% !important; box-sizing: border-box; }
  html, body { overflow-x: hidden; }
  button, a, input, select, textarea { min-height: 44px; }
  h1, h2, h3, p, span, div { word-wrap: break-word; overflow-wrap: break-word; }
}

/* ═══════ HERO SECTION ═══════ */
@media (max-width: 768px) {
  .xai-hero { min-height: auto; padding: 100px 16px 40px; text-align: center; }
  .xai-hero-content { max-width: 100%; padding: 0; }
  .xai-hero h1 { font-size: 2rem !important; line-height: 1.15; margin-bottom: 16px; }
  .xai-hero h1 br { display: none; }
  .xai-hero-sub { font-size: 0.95rem; margin-bottom: 24px; padding: 0 8px; }
  .xai-hero-actions { flex-direction: column; gap: 12px; width: 100%; padding: 0 8px; }
  .xai-hero-actions .xai-btn { width: 100%; justify-content: center; padding: 14px 24px; font-size: 0.95rem; }
  .xai-hero-stats { flex-direction: row; justify-content: space-around; gap: 16px; margin-top: 24px; padding-top: 16px; }
  .xai-stat-value { font-size: 1.5rem; }
  .xai-stat-label { font-size: 0.75rem; }
  .xai-hero-eyebrow { font-size: 0.7rem; padding: 6px 12px; margin-bottom: 16px; }
}
@media (max-width: 359px) {
  .xai-hero { padding: 80px 12px 30px; }
  .xai-hero h1 { font-size: 1.6rem !important; }
  .xai-hero-stats { flex-direction: column; gap: 12px; }
}

/* ═══════ NAVIGATION ═══════ */
@media (max-width: 768px) {
  .xai-nav { padding: 12px 0; }
  .xai-nav-inner { padding: 0 16px; }
  .xai-nav-brand { font-size: 1.2rem; }
  .xai-nav-brand img { height: 32px; }
  .xai-nav-links { display: none !important; }
  .xai-nav-actions { gap: 8px; }
  .xai-nav-ghost, .xai-nav-cta { display: none !important; }
  .xai-mobile-toggle { display: flex !important; width: 44px; height: 44px; }
  .xai-mobile-menu { width: 100%; height: 100%; }
  .xai-mobile-menu-links a { padding: 16px 20px; font-size: 1rem; }
  .xai-mobile-menu-footer { padding: 16px 20px; gap: 12px; }
  .xai-mobile-menu-footer .xai-m-signin, .xai-mobile-menu-footer .xai-m-cta { width: 100%; text-align: center; }
}

/* ═══════ VIDEO PREVIEW ═══════ */
@media (max-width: 768px) {
  .xai-preview { margin-top: -20px; margin-left: 16px; margin-right: 16px; }
  .xai-preview-frame { border-radius: 12px; }
  .xai-preview-bar { padding: 12px 16px; }
  .xai-preview-dot { width: 10px; height: 10px; }
  .xai-preview-title { font-size: 0.75rem; }
  .xai-impact-band { padding: 40px 16px; }
  .xai-impact-grid { grid-template-columns: repeat(2, 1fr); }
  .xai-impact-num { font-size: 1.8rem; }
  .xai-impact-label { font-size: 0.7rem; }
}

/* ═══════ PUBLIC SECTIONS ═══════ */
@media (max-width: 768px) {
  .xai-section { padding: 60px 16px; }
  .xai-container { padding: 0 16px; }
  .xai-sections-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .xai-section-card { padding: 20px 16px; }
  .xai-trio { grid-template-columns: 1fr; gap: 16px; }
  .xai-trio-card { padding: 24px 20px; }
  .xai-modules-grid { grid-template-columns: 1fr; gap: 16px; }
  .xai-module-card { padding: 20px 16px; }
  .xai-features { grid-template-columns: 1fr; gap: 16px; }
  .xai-feature { padding: 24px 20px; }
  .xai-testimonials { grid-template-columns: 1fr; gap: 16px; }
  .xai-testimonial { padding: 24px 20px; }
  .xai-statement { grid-template-columns: 1fr; padding: 32px 20px; gap: 32px; }
  .xai-statement-visual { grid-template-columns: 1fr; }
  .xai-header h2 { font-size: 1.6rem; }
  .xai-pricing-grid { grid-template-columns: 1fr; gap: 20px; }
  .xai-footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .xai-footer-col { text-align: center; }
  .xai-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .xai-auth { grid-template-columns: 1fr; min-height: auto; }
  .xai-auth-brand { display: none !important; }
  .xai-auth-form { padding: 24px; }
  .xai-auth-form h2 { font-size: 1.5rem; }
  .why-wangari-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .hub-tile-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .hub-tile { padding: 16px !important; }
}

/* ═══════ ADMIN DASHBOARD (preserves d2-kpi design) ═══════ */
@media (max-width: 768px) {
  .admin-content { margin-left: 0 !important; padding: 12px !important; }
  .d2-hero { padding: 16px !important; }
  .d2-hero h1 { font-size: 1.3rem !important; }
  .d2-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .d2-kpi { padding: 12px !important; }
  .d2-kpi strong { font-size: 1rem !important; }
  .d2-kpi small { font-size: 0.65rem !important; }
  .admin-card { padding: 16px !important; margin-bottom: 12px !important; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-table { font-size: 0.8rem !important; min-width: 600px; }
  .w2-sidebar { transform: translateX(-100%); z-index: 1100; }
  .w2-sidebar.open { transform: translateX(0); }
  .stat-grid, .stats-grid, .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .stat-card, .stat-box { padding: 12px !important; }
  .stat-card strong, .stat-box strong { font-size: 1rem !important; }
  .stat-card small, .stat-box small { font-size: 0.65rem !important; }
  .stat-card-icon, .stat-box-icon { width: 32px !important; height: 32px !important; }
  .xai-feature:hover, .xai-trio-card:hover, .xai-module-card:hover, .xai-testimonial:hover { transform: none; box-shadow: none; }
  * { touch-action: manipulation; }
}

@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; } }
@media (max-width: 359px) { .stat-grid, .stats-grid, .kpi-grid { grid-template-columns: 1fr !important; } .d2-kpi-grid { grid-template-columns: 1fr !important; } }

@supports (padding: env(safe-area-inset-bottom)) {
  .xai-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .xai-mobile-menu-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

@media (max-height: 500px) and (orientation: landscape) {
  .xai-hero { min-height: auto; padding: 80px 16px 20px; }
  .xai-hero h1 { font-size: 1.5rem; }
  .xai-hero-sub { display: none; }
}

@media print {
  .xai-nav, .xai-mobile-toggle, .xai-mobile-menu, .xai-footer { display: none !important; }
  body { background: white; color: black; }
}

/* ═══════ ADMIN CARD HEADER OVERFLOW ═══════ */
@media (max-width: 768px) {
  .admin-card > div[style*="flex"],
  .admin-card > div[style*="display: flex"],
  .admin-card-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .admin-card h3 { width: 100% !important; margin-bottom: 8px !important; }
  .admin-card .btn-group,
  .admin-card button + button,
  [style*="display:flex"][style*="gap"] { flex-wrap: wrap !important; }
  .admin-card button[onclick*="print"],
  .admin-card button[onclick*="Print"],
  .admin-card button[onclick*="export"],
  .admin-card button[onclick*="Export"],
  .admin-card button[onclick*="refresh"],
  .admin-card button[onclick*="Refresh"] {
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }
  .admin-card table { min-width: 500px !important; font-size: 0.75rem !important; }
  .admin-card [style*="grid-template-columns"] { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .admin-card [style*="overflow-x"] { -webkit-overflow-scrolling: touch !important; }
  .admin-card button[onclick*="SACCO"],
  .admin-card button[onclick*="sacco"] {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 0.8rem !important;
    text-align: center !important;
  }
}

/* ═══════ PRINT / EXPORT BUTTONS ═══════ */
@media (max-width: 768px) {
  .print-btn { margin-top: 8px !important; padding: 6px 12px !important; font-size: 0.75rem !important; }
  .export-btn { padding: 6px 12px !important; font-size: 0.75rem !important; }
  .admin-card .card-header-row { flex-wrap: wrap !important; gap: 8px !important; }
  .admin-card h3[style*="flex"],
  .admin-card h3[style*="display: flex"] { flex-wrap: wrap !important; gap: 8px !important; row-gap: 4px !important; }
  .admin-card h3 + div[style*="flex"],
  .admin-card h3 + div[style*="display: flex"] { flex-wrap: wrap !important; }
  .admin-table th { font-size: 0.7rem !important; padding: 8px !important; white-space: nowrap !important; }
  .admin-card button[style*="background:#6366f1"] { width: 100% !important; display: block !important; text-align: center !important; }
}

/* ═══════ CARD ACTION BAR ═══════ */
.card-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.admin-card h3 .help-tip,
.admin-card h3 .w2-help-tip,
.admin-card h3 [style*="cursor: help"] { vertical-align: middle; margin-left: 6px; }
.card-action-bar .btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
@media (max-width: 768px) {
  .card-action-bar { gap: 6px; margin-bottom: 10px; }
  .card-action-bar .btn { padding: 5px 10px !important; font-size: 0.7rem !important; }
  .card-action-bar .btn svg { width: 12px !important; height: 12px !important; }
}

/* ═══════ NON-DASHBOARD MODULE CARD FIXES ═══════ */
/* Removes green left borders from OTHER modules (not dashboard d2-kpi) */
.stat-card,
.stat-box {
  border-left: none !important;
}
.stat-card.accent,
.stat-card.info,
.stat-card.warning {
  border-left: none !important;
}
.stat-card:hover,
.stat-card:focus,
.stat-box:hover,
.stat-box:focus {
  transform: none !important;
}

/* Hub alerts - remove left border accent */
.hub-alert-success,
.hub-alert-error,
.hub-alert-warning,
.hub-alert-info {
  border-left: none !important;
}

/* Batch analytics widget - remove green left border */
.admin-card[style*="border-left:4px"],
.admin-card[style*="border-left: 4px"] {
  border-left: none !important;
}
.admin-card[style*="border-left:4px solid"] {
  border-left: none !important;
  border-left-width: 0 !important;
}

/* Field status cards - remove colored borders */
.field-status-card,
.status-card {
  border-left: none !important;
}

/* Tab active state */
.tab-btn.active,
.w2-tab.active {
  border-bottom: 2px solid #166534 !important;
}