/* ============================================================
   MOBILE RESPONSIVENESS  —  enterprise app shell (Android + iOS)
   Loaded AFTER application.css in every layout, so it wins.
   Standalone /public file — no asset precompile needed.
   Added 2026-09-09.
   ============================================================ */

/* ---- Universal ----------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
* { -webkit-tap-highlight-color: transparent; }

@supports (-webkit-touch-callout: none) {
  .full-height, .vh-100, .min-vh-100 { min-height: -webkit-fill-available; }
}

/* ---- Phones / small tablets (<= 820px) --------------------------- */
@media (max-width: 820px) {

  /* iOS: stop the page zooming in when a field is focused (<16px triggers it) */
  input, select, textarea, .form-control, .form-select { font-size: 16px !important; }

  /* Wide tables that are NOT cardified scroll inside their own box */
  .portal-main table:not(.mobile-cards),
  .main table:not(.mobile-cards),
  .container table:not(.mobile-cards),
  .container-fluid table:not(.mobile-cards),
  .section-card table:not(.mobile-cards),
  .card table:not(.mobile-cards) {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  img, video, canvas, svg, iframe { max-width: 100% !important; height: auto; }

  [style*="width:9"],  [style*="width: 9"],
  [style*="width:8"],  [style*="width: 8"],
  [style*="width:7"],  [style*="width: 7"],
  [style*="width:6"],  [style*="width: 6"],
  [style*="width:5"],  [style*="width: 5"],
  [style*="min-width"] { max-width: 100% !important; }

  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap !important; }

  .row > [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; }

  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=range]),
  select, textarea { width: 100% !important; max-width: 100% !important; }

  button, .btn, a.btn, input[type=submit], input[type=button] { min-height: 42px; }

  .modal-dialog { max-width: calc(100vw - 20px) !important; margin: 10px auto !important; }
  .dropdown-menu { max-width: calc(100vw - 24px); }

  .portal-topbar, .topbar {
    padding-top: env(safe-area-inset-top) !important;
    min-height: 54px;
  }

  /* ---- table -> stacked cards ---------------------------------------
     Applied by portal-enhance.js (adds .mobile-cards + td[data-label]).
     Risky tables (colspan/rowspan/nested) are left as scroll instead. */
  table.mobile-cards { display: block; width: 100%; border: 0; background: none; }
  table.mobile-cards thead { position: absolute; left: -9999px; }
  table.mobile-cards tbody { display: block; width: 100%; }
  table.mobile-cards tr {
    display: block; width: 100%;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    box-shadow: 0 2px 10px rgba(16,24,64,.05);
    margin: 0 0 12px; padding: 4px 2px; overflow: hidden;
  }
  table.mobile-cards td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 9px 13px; border: 0; border-bottom: 1px solid #f2f4f8;
    text-align: right; font-size: 13.5px; white-space: normal; word-break: break-word;
    min-height: 0;
  }
  table.mobile-cards td:last-child { border-bottom: 0; }
  table.mobile-cards td::before {
    content: attr(data-label); flex: 0 0 40%;
    text-align: left; font-weight: 700; color: #6b7280; font-size: 12px;
    text-transform: uppercase; letter-spacing: .3px;
  }
  table.mobile-cards td[data-label=""]::before { content: ""; }
  table.mobile-cards td:empty { display: none; }
}

/* ---- Small phones (<= 420px) ----------------------------------- */
@media (max-width: 420px) {
  .port-title, h1 { font-size: 19px !important; }
  .port-sub { font-size: 12px !important; }
  .stat-card .value { font-size: 22px !important; }
  .section-card { padding: 16px !important; }
}

/* ================================================================
   ENTERPRISE COLOUR PASS (mobile, <=820px)
   The dashboards used a full-bleed saturated gradient per card
   (purple / green / amber / teal / red / ...). Replace that with
   ONE restrained system: white card, thin coloured left-accent,
   dark ink, muted label. Meaning is kept (accent + icon tint),
   the "rainbow" is gone. Layout / view files untouched.
   ================================================================ */
@media (max-width: 820px) {

  /* KPI cards (admin dashboard) + stat cards (portal dashboard) */
  .kpi-card, .stat-card {
    background: #ffffff !important;
    background-image: none !important;
    color: #1e1b4b !important;
    border: 1px solid #e8eaf1 !important;
    border-left: 3px solid #4f46e5 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(16,24,64,.05), 0 6px 16px rgba(16,24,64,.045) !important;
  }
  .kpi-card:hover, .stat-card:hover {
    transform: none !important;
    box-shadow: 0 1px 3px rgba(16,24,64,.05) !important;
  }
  .kpi-title, .stat-card .label { color: #6b7280 !important; opacity: 1 !important; }
  .kpi-value, .stat-card .value { color: #1e1b4b !important; }
  .kpi-sub,   .stat-card .sub   { color: #9aa1b0 !important; opacity: 1 !important; }
  .kpi-icon { opacity: 1 !important; }

  /* semantic left-accent only */
  .kpi-card.card-green,  .stat-card.card-green  { border-left-color: #059669 !important; }
  .kpi-card.card-amber,  .stat-card.card-amber  { border-left-color: #d97706 !important; }
  .kpi-card.card-red,    .stat-card.card-rose,
  .stat-card.card-red                            { border-left-color: #dc2626 !important; }
  .kpi-card.card-blue,   .kpi-card.card-teal,
  .kpi-card.card-purple, .stat-card.card-purple,
  .stat-card.card-blue                           { border-left-color: #4f46e5 !important; }

  /* loud gradient action buttons -> flat, single colour */
  .btn-primary,
  a.btn-primary,
  [style*="linear-gradient(135deg,#4f46e5,#7c3aed)"] {
    background: #4f46e5 !important; background-image: none !important;
    color: #fff !important; box-shadow: none !important;
  }
  [style*="linear-gradient(135deg,#00e676"] {
    background: #059669 !important; background-image: none !important;
    color: #fff !important; box-shadow: none !important;
  }
  #geoFab, #portalGeoFab, .m-tab-fab {
    background: #059669 !important; background-image: none !important;
    box-shadow: 0 6px 18px rgba(5,150,105,.32) !important;
    color: #fff !important;
  }

  /* the two pill buttons stacked on the portal dashboard ("Geo Punch",
     "Run Payroll") — same treatment via their gradients */
  [style*="linear-gradient(135deg,#6366f1"], [style*="linear-gradient(135deg, #6366f1"] {
    background: #4f46e5 !important; background-image: none !important; color: #fff !important;
  }
}