/* ============================================================
   Crisisium — Mobile stylesheet
   Copyright (c) 2026 Crisisium - Abdelillah Toughlada.

   The mobile experience is 100% CSS-@media driven: it applies automatically
   on any narrow viewport with NO JavaScript and NO user action. Everything is
   scoped behind @media (max-width: 768px) (plus a couple of html[data-mobile]
   enhancements), so the desktop layout is provably unaffected.

   OWNERSHIP: this file is the SOLE owner of the <= 768px range. style.css
   layout media queries are floored at min-width: 768.02px. The canonical
   scale is 1280 / 1024 / 768 / 480 — see docs/design-system.md.
   ============================================================ */

/* ---- Login page: never show the Cris AI widget before auth ----
   #chatToggle / #chatPanel live in static HTML; JS only hides them AFTER
   login. Gate them on a body state class so they are hidden on the login
   screen at ALL widths (desktop + mobile). app.js toggles body.pre-auth. */
body.pre-auth #chatToggle,
body.pre-auth #chatPanel { display: none !important; }

/* ============================================================
   MOBILE LAYOUT — applies automatically at <= 768px
   ============================================================ */
@media (max-width: 768px) {

  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; }

  /* ---- Header: sticky, wraps safely, never overflows ---- */
  .header {
    position: sticky;
    top: 0;
    z-index: 60;
    min-height: 56px;
    height: auto;
    padding: 6px 12px;
    gap: 8px;
    flex-wrap: nowrap;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .header-title {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
  }
  .header-actions {
    gap: 6px;
    flex: 0 0 auto;
  }
  /* Collapse noisy header items on phones to prevent overflow */
  .header-actions > span[data-i18n="role_label"] { display: none; }
  #userMenu > span:first-child { display: none; }   /* long user name */
  #userMenu .badge { display: none; }               /* profile/pole badges */
  #userMenu { margin-left: 4px !important; gap: 4px !important; }
  .lang-switcher { transform: scale(.94); }

  /* Logout button → compact icon-sized on phones (text can overflow) */
  #btnLogout {
    padding: 8px 10px !important;
    font-size: 0 !important;          /* hide the text label */
    min-width: 40px;
  }
  #btnLogout::before {
    content: "⏻";                      /* power glyph as compact label */
    font-size: 15px;
    line-height: 1;
  }
  /* Header action icon-buttons: keep them tight */
  .header-actions .btn-xs { padding: 8px !important; }

  /* Hamburger = proper 42px touch target */
  .sidebar-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
  }
  .sidebar-toggle:active { background: var(--bg-alt, rgba(255,255,255,.06)); }

  /* ---- Sidebar as slide-in drawer (mobile.css owns this below 768px) ---- */
  :root { --content-px: 16px; }
  .main { margin-left: 0; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform .2s var(--ease, cubic-bezier(.4,0,.2,1));
    width: min(84vw, 320px);
    box-shadow: 4px 0 32px rgba(0,0,0,.35);
    z-index: 100;
  }
  .sidebar-nav a { padding: 13px 16px; font-size: .95rem; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-nav a .nav-icon { width: 20px; height: 20px; }

  /* ---- Content + dashboard ---- */
  .content { padding: 16px 14px 88px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dashboard-grid,
  .charts-row { grid-template-columns: 1fr; gap: 14px; }
  .kpi-card { padding: 16px; }
  .kpi-value { font-size: 1.5rem; }
  .card { border-radius: 14px; margin-bottom: 14px; }
  .card-header { padding: 14px 16px; }
  .card-body { padding: 16px; }

  /* ---- Data tables: horizontal scroll + sticky header ---- */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-radius: 12px;
  }
  .table-wrap table { min-width: 640px; }
  .table-wrap th,
  .table-wrap td { padding: 11px 12px; font-size: .86rem; white-space: nowrap; }
  .table-wrap thead th { position: sticky; top: 0; z-index: 2; }

  /* ---- Buttons / toolbars ---- */
  .btn, button.btn, .lang-btn, .theme-toggle { min-height: 40px; }
  .btn { padding: 10px 16px; font-size: .9rem; }
  .toolbar, .card-actions, .view-actions { flex-wrap: wrap; gap: 8px; }

  /* ---- Forms: single column, iOS-zoom-safe ---- */
  .form-row, .form-row-3, .form-row-4, .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .form-control,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], select, textarea {
    font-size: 16px;         /* prevents Safari auto-zoom */
    min-height: 44px;
  }

  /* ---- Modals become bottom sheets ---- */
  .modal-overlay { align-items: flex-end; }
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    margin: 0;
    border-radius: 18px 18px 0 0;
    animation: sheetUp .22s ease-out;
  }
  .modal-body { max-height: calc(92vh - 120px); overflow-y: auto; }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* ---- Chat widget: full-width, out of the way ---- */
  .chat-panel {
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    left: 12px;
    bottom: 78px !important;
    max-height: 66vh;
  }
  .chat-toggle { bottom: 16px !important; right: 16px !important; }

  /* ---- Login fits the phone ---- */
  .login-card { width: 100%; max-width: 100%; border-radius: 20px; padding: 28px 22px; }
  .login-wrap { padding: 16px; }
}

/* ---- Small phone: <= 480px (canonical scale, was 400px) ---- */
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .header-title { font-size: .95rem; }
}

/* ---- data-mobile enhancements (real mobile browsers only) ---- */
html[data-mobile="true"] body { overscroll-behavior-y: contain; }