/* ============================================================
   STRATUM CFO — Mobile Responsive Layer v1.0
   Adapts all views for smartphones & small tablets
   Loaded AFTER all other CSS to override where needed
   ============================================================ */

/* ─── SIDEBAR OVERLAY ─── */
@media (max-width: 768px) {
  .sp-sidebar {
    width: 280px;
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
  }

  .sp-sidebar.open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }

  /* Prevent body scroll when sidebar is open */
  body.sidebar-open {
    overflow: hidden;
  }
}

/* ─── HEADER ─── */
@media (max-width: 768px) {
  .sp-header {
    height: 48px;
    padding: 0 12px 0 52px;
    gap: 8px;
  }

  .sp-header-title {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sp-header-actions {
    gap: 4px;
  }

  .sp-header-actions .sp-btn,
  .sp-header-actions button {
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* ─── CONTENT AREA ─── */
/* Hamburger button is fixed at top:12, height:40 → bottom edge at y=52px.        */
/* Content needs at least 60px top padding to start clear of the hamburger.       */
@media (max-width: 768px) {
  .sp-content {
    padding: 60px 14px 16px;
  }
}

@media (max-width: 430px) {
  .sp-content {
    padding: 60px 10px 12px;
  }
}

/* ─── FOOTER ─── */
@media (max-width: 768px) {
  .sp-footer {
    padding: 16px 12px;
    font-size: 11px;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    gap: 4px 12px;
  }

  .sp-footer a {
    margin: 0;
  }
}

/* ─── DEMO BANNER ─── */
@media (max-width: 768px) {
  .sp-demo-banner {
    font-size: 11px;
    padding: 5px 32px 5px 8px;
  }

  body.has-demo .sp-hamburger {
    top: 38px;
  }
}

/* ─── CARDS ─── */
@media (max-width: 768px) {
  .sp-card {
    padding: 16px;
    border-radius: 12px;
  }

  .sp-card-title {
    font-size: 16px;
  }
}

/* ─── TABLES — Horizontal scroll wrapper ─── */
@media (max-width: 768px) {
  .sp-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 13px;
  }

  .sp-table th {
    padding: 8px 10px;
    font-size: 11px;
  }

  .sp-table td {
    padding: 10px;
    font-size: 13px;
  }

  /* Fade hint to suggest scrolling */
  .table-scroll-wrapper {
    position: relative;
  }

  .table-scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--sp-bg-card));
    pointer-events: none;
    border-radius: 0 12px 12px 0;
  }
}

/* ─── MODALS — Full-width on mobile ─── */
@media (max-width: 768px) {
  .modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 16px 24px !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-input,
  .modal-select {
    font-size: 16px !important; /* Prevent iOS zoom on focus */
    padding: 12px !important;
  }
}

/* ─── BUTTONS ─── */
@media (max-width: 768px) {
  .sp-btn,
  .action-btn,
  .dp-btn,
  .dp-module-btn {
    font-size: 13px;
    padding: 10px 16px;
    min-height: 44px; /* Touch target */
  }

  .sp-btn-sm {
    font-size: 12px;
    padding: 8px 12px;
    min-height: 36px;
  }

  /* Stack buttons vertically when in row */
  .sp-btn-group,
  .dp-empty-actions {
    flex-direction: column;
    width: 100%;
  }

  .sp-btn-group > *,
  .dp-empty-actions > * {
    width: 100%;
    justify-content: center;
  }
}

/* ─── FORMS ─── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important; /* Prevent iOS auto-zoom */
  }

  /* Form grids → single column */
  .form-grid,
  .sp-form-grid {
    grid-template-columns: 1fr !important;
  }

  .form-row {
    flex-direction: column;
    gap: 12px;
  }

  .form-row > * {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ─── ALERTS ─── */
@media (max-width: 768px) {
  .sp-alert {
    padding: 10px 14px;
    font-size: 13px;
    gap: 8px;
  }

  .sp-alert-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* ─── DASHBOARD PREMIUM ─── */
@media (max-width: 768px) {
  .dp-hero {
    padding: 20px 14px 24px;
    margin: -16px -14px 24px;
  }

  .dp-header h2 {
    font-size: 20px;
  }

  .dp-header p {
    font-size: 13px;
  }

  .dp-kpi {
    padding: 14px;
  }

  .dp-kpi-value {
    font-size: 22px;
  }

  .dp-kpi-label {
    font-size: 12px;
  }

  .dp-module {
    padding: 16px;
  }

  .dp-module-title {
    font-size: 16px;
  }

  .dp-module-desc {
    font-size: 12px;
  }

  .dp-module-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
  }

  .dp-quick-results {
    padding: 14px;
  }

  /* Briefing */
  .dp-briefing-body {
    padding: 16px;
    font-size: 13px;
  }

  /* CTA section */
  .dp-cta {
    padding: 20px 14px;
    text-align: center;
  }

  .dp-cta h3 {
    font-size: 18px;
  }

  /* Score ring */
  .dp-score-ring-wrap {
    width: 90px;
    height: 90px;
  }

  .dp-score-num {
    font-size: 28px;
  }

  /* Pillar labels */
  .dp-pillar-label {
    min-width: 110px;
    font-size: 11px;
  }
}

@media (max-width: 430px) {
  .dp-hero {
    padding: 16px 10px 20px;
    margin: -12px -10px 20px;
  }

  .dp-kpi-grid {
    gap: 10px;
  }

  .dp-modules {
    gap: 12px;
  }

  /* Empty state */
  .dp-empty {
    padding: 40px 16px;
  }

  .dp-empty h3 {
    font-size: 20px;
  }

  .dp-empty p {
    font-size: 13px;
  }

  .dp-empty-glyph {
    width: 60px;
    height: 60px;
    font-size: 26px;
    margin-bottom: 20px;
  }
}

/* ─── RESULTS PAGES ─── */
@media (max-width: 768px) {
  .sp-exec-summary {
    padding: 20px 14px;
    border-radius: 12px;
  }

  .sp-exec-header {
    gap: 16px;
  }

  .sp-exec-score {
    width: 72px;
    height: 72px;
  }

  .sp-exec-score-value {
    font-size: 22px;
  }

  .sp-analysis-header {
    padding: 14px;
    font-size: 15px;
  }

  .sp-analysis-body {
    padding: 14px;
    font-size: 13px;
    line-height: 1.7;
  }

  .sp-action-plan {
    padding: 14px;
  }

  .sp-action-item {
    padding: 12px;
  }

  /* Downloads */
  .sp-download-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  .sp-results-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .sp-results-actions .sp-btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
}

/* ─── COPILOT FORM PAGES ─── */
@media (max-width: 768px) {
  /* Inline flex rows → stacked */
  [style*="display:flex"][style*="gap"],
  [style*="display: flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }

  /* Section cards on form pages */
  .sp-card > h2,
  .sp-card > h3 {
    font-size: 16px;
  }

  /* Input labels */
  label {
    font-size: 13px;
  }

  /* Number inputs */
  input[type="number"] {
    width: 100% !important;
  }
}

/* ─── ADMIN PANEL ─── */
@media (max-width: 768px) {
  /* Stats cards at top */
  [style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Actions column in user table */
  .sp-table td:last-child {
    white-space: normal;
  }

  .sp-table td form {
    display: inline;
  }

  /* Action buttons stacked */
  .action-btn {
    font-size: 11px;
    padding: 6px 8px !important;
  }
}

@media (max-width: 430px) {
  [style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─── CHATBOT ─── */
@media (max-width: 768px) {
  .sp-chatbot-fab {
    width: 48px;
    height: 48px;
    bottom: 16px;
    right: 16px;
    font-size: 22px;
  }

  .sp-chatbot-window {
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 80px) !important;
    max-height: none !important;
    bottom: 72px !important;
    right: 8px !important;
    left: 8px !important;
    border-radius: 16px;
  }

  .sp-chatbot-input-area textarea {
    font-size: 16px;
  }
}

/* ─── COOKIE BAR ─── */
@media (max-width: 768px) {
  .sp-cookie-bar > div {
    flex-direction: column !important;
    text-align: center;
    gap: 12px !important;
  }

  .sp-cookie-bar button {
    width: 100%;
  }
}

/* ─── LOADING OVERLAY ─── */
@media (max-width: 768px) {
  .sp-loading-text {
    font-size: 15px;
    padding: 0 16px;
    text-align: center;
  }

  .sp-loading-subtext {
    font-size: 12px;
    padding: 0 20px;
    text-align: center;
  }

  .sp-progress-bar {
    max-width: 260px;
  }
}

/* ─── LOGIN / AUTH PAGES ─── */
@media (max-width: 430px) {
  .login-card {
    margin: 16px;
    padding: 24px 16px;
    max-width: none;
  }

  .login-card h1 {
    font-size: 22px;
  }
}

/* ─── SCROLL TO TOP ─── */
@media (max-width: 768px) {
  .sp-scroll-top {
    bottom: 80px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
}

/* ─── ONBOARDING TUTORIAL ─── */
@media (max-width: 768px) {
  .tut-tooltip {
    max-width: calc(100vw - 32px) !important;
    left: 16px !important;
    right: 16px !important;
    transform: none !important;
  }
}

/* ─── KPI CARDS EVERYWHERE ─── */
@media (max-width: 430px) {
  .sp-kpi-card {
    padding: 12px;
  }

  .sp-kpi-value {
    font-size: 20px;
  }

  .sp-kpi-label {
    font-size: 11px;
  }
}

/* ─── GENERAL TYPOGRAPHY ─── */
@media (max-width: 768px) {
  h1, .sp-h1 { font-size: 22px; }
  h2, .sp-h2 { font-size: 18px; }
  h3, .sp-h3 { font-size: 16px; }
}

@media (max-width: 430px) {
  h1, .sp-h1 { font-size: 20px; }
  h2, .sp-h2 { font-size: 17px; }
  h3, .sp-h3 { font-size: 15px; }

  body {
    font-size: 14px;
  }
}

/* ─── PREVENT HORIZONTAL OVERFLOW ─── */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  .sp-app {
    overflow-x: hidden;
  }

  /* Ensure images don't break layout */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Prevent pre/code blocks from overflowing */
  pre, code {
    max-width: 100%;
    overflow-x: auto;
    word-break: break-word;
  }
}

/* ─── DECISION / CASHFLOW MODULE SPECIFIC ─── */
@media (max-width: 768px) {
  /* Results grid cards */
  .verdict-grid,
  .cashflow-grid {
    grid-template-columns: 1fr !important;
  }

  /* Comparison tables */
  .comparison-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Flex rows in results */
  .result-section {
    padding: 14px;
  }

  .result-header {
    font-size: 16px;
  }
}

/* ─── QUICK MODE ─── */
@media (max-width: 768px) {
  .quick-mode-card {
    padding: 16px;
    border-radius: 12px;
  }

  .quick-mode-result {
    padding: 14px;
    font-size: 13px;
  }
}

/* ─── COMPANY PROFILE ─── */
@media (max-width: 768px) {
  .profile-grid {
    grid-template-columns: 1fr !important;
  }

  .profile-card {
    padding: 16px;
  }
}

/* ─── HISTORY PAGE ─── */
@media (max-width: 768px) {
  .history-item {
    padding: 14px;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .history-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ─── HEALTH PAGE ─── */
@media (max-width: 768px) {
  .health-grid {
    grid-template-columns: 1fr !important;
  }

  .health-card {
    padding: 16px;
  }
}

/* ─── LEGAL PAGES ─── */
@media (max-width: 768px) {
  .legal-content {
    padding: 20px 14px;
    font-size: 14px;
  }

  .legal-content h1 {
    font-size: 22px;
  }

  .legal-content h2 {
    font-size: 18px;
  }
}

/* ─── HELP PAGE ─── */
@media (max-width: 768px) {
  .help-grid {
    grid-template-columns: 1fr !important;
  }

  .help-card {
    padding: 16px;
  }

  .faq-item summary {
    font-size: 14px;
    padding: 12px;
  }
}

/* ─── SAFE TOUCH TARGETS ─── */
@media (max-width: 768px) {
  a, button, [role="button"],
  input[type="submit"],
  input[type="button"],
  select {
    min-height: 44px;
    min-width: 44px;
  }

  /* Exclude tiny inline elements */
  .sp-alert-close,
  .sp-nav-link,
  .sp-footer a {
    min-width: auto;
  }

  .sp-nav-link {
    padding: 11px 12px;
  }
}

/* ─── GESTORÍA PANEL ─── */
@media (max-width: 768px) {
  /* Metrics bar: allow horizontal scroll when metrics don't fit */
  .gestoria-metrics-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding: 12px 14px;
    gap: 0;
  }

  .gestoria-metric {
    padding: 0 16px;
    flex-shrink: 0;
  }

  .gestoria-metrics-progress {
    flex-shrink: 0;
    padding-left: 16px;
  }

  /* Header bar: stack vertically on very small screens */
  .gestoria-header-bar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0 16px 0;
  }

  /* gestoria island: shrink empresa name on mobile */
  .gestoria-island-empresa {
    max-width: 80px;
  }
}

@media (max-width: 430px) {
  .gestoria-metric {
    padding: 0 12px;
  }

  .metric-value {
    font-size: 18px;
  }
}

/* ─── CANVAS / CHARTS ─── */
@media (max-width: 768px) {
  canvas {
    max-width: 100% !important;
  }
}

/* ─── LOGIN / UNAUTHENTICATED PAGES ─── */
/* On login/register pages (unauthenticated), there is no hamburger.
   Reset the top padding so the centered layout isn't pushed down.   */
@media (max-width: 768px) {
  .sp-main[style*="margin-left:0"] .sp-content,
  .sp-main[style*="margin-left: 0"] .sp-content {
    padding-top: 24px;
  }
}