/* === MOBILE.CSS v2 — Univista v2 Mobile Overlay (iPhone Safari first) ===
 * Higher specificity (body prefix + .uv-main) to win over inline styles in templates
 * Breakpoint 1-col bumped to 480px (cover iPhone Pro Max 430px)
 * Author: Claude · 01/05/2026 v2
 */

@media (max-width: 767px) {

  /* === GRID PATTERNS — 2 cols at 768px, 1 col at 480px === */
  body .uv-main [class*="kpi"][class*="grid"],
  body .uv-main .kpi-grid,
  body .uv-main .dp-kpi,
  body .uv-main .ktt-kpi,
  body .uv-main .tc-kpi,
  body .uv-main .stats-grid,
  body .uv-main .cards-grid,
  body .uv-main .ceo-kpi,
  body .uv-main .me-kpi,
  body .uv-main .persona-kpi,
  body .uv-main .alert-grid,
  body .uv-main .action-list,
  body .uv-main .cty-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* iPhone all sizes (390-430px) → 1 column */
  @media (max-width: 480px) {
    body .uv-main [class*="kpi"][class*="grid"],
    body .uv-main .kpi-grid,
    body .uv-main .dp-kpi,
    body .uv-main .ktt-kpi,
    body .uv-main .tc-kpi,
    body .uv-main .stats-grid,
    body .uv-main .cards-grid,
    body .uv-main .ceo-kpi,
    body .uv-main .me-kpi,
    body .uv-main .persona-kpi,
    body .uv-main .alert-grid,
    body .uv-main .action-list,
    body .uv-main .cty-grid {
      grid-template-columns: 1fr !important;
    }
  }

  /* Lifecycle / pipeline / chart-row — 1 col on mobile */
  body .uv-main .lifecycle-grid,
  body .uv-main .pipeline-grid,
  body .uv-main .stage-grid,
  body .uv-main .chart-row {
    grid-template-columns: 1fr !important;
  }

  /* Generic 2-col → 1 col */
  body .uv-main .form-2col,
  body .uv-main .detail-2col,
  body .uv-main .row-2col,
  body .uv-main .grid-50-50,
  body .uv-main [class*="2col"] {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* === KPI CARDS — Compact === */
  body .uv-main .kpi-card,
  body .uv-main .dp-kpi-card,
  body .uv-main .ktt-kpi-card,
  body .uv-main .stat-card,
  body .uv-main [class*="kpi-card"] {
    padding: 12px 14px !important;
  }
  body .uv-main .kpi-card .v,
  body .uv-main .kpi-card .num,
  body .uv-main .kpi-card .val,
  body .uv-main .dp-kpi-card .val,
  body .uv-main .stat-card .val,
  body .uv-main .stat-card .number {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }
  body .uv-main .kpi-card .lbl,
  body .uv-main .kpi-card .label,
  body .uv-main .dp-kpi-card .lbl,
  body .uv-main .stat-card .lbl,
  body .uv-main .stat-card .label {
    font-size: 10px !important;
    letter-spacing: 0.2px !important;
    line-height: 1.3 !important;
  }
  body .uv-main .kpi-card .desc,
  body .uv-main .kpi-card .sub,
  body .uv-main .dp-kpi-card .sub {
    font-size: 11px !important;
  }

  /* === Persona Hero / Welcome card — Compact === */
  body .uv-main .persona-hero,
  body .uv-main .ceo-hero,
  body .uv-main .me-hero,
  body .uv-main .welcome-card,
  body .uv-main [class*="hero"][class*="card"],
  body .uv-main .ceo-section:first-of-type {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
  body .uv-main .persona-hero h1,
  body .uv-main .persona-hero .name,
  body .uv-main .ceo-hero h1,
  body .uv-main .me-hero h1 {
    font-size: 22px !important;
    margin: 4px 0 !important;
  }
  body .uv-main .persona-hero .greeting,
  body .uv-main .ceo-hero .greeting,
  body .uv-main .me-hero .greeting,
  body .uv-main .persona-hero .date,
  body .uv-main .ceo-hero .date {
    font-size: 13px !important;
  }
  body .uv-main .persona-hero .quote,
  body .uv-main .ceo-hero .quote,
  body .uv-main blockquote {
    font-size: 13px !important;
    padding: 10px 12px !important;
    margin-top: 12px !important;
  }
  body .uv-main .persona-hero .role,
  body .uv-main .ceo-hero .role {
    font-size: 13px !important;
    margin-top: 2px !important;
  }

  /* === TABLES — Horizontal scroll === */
  body .uv-main table,
  body .uv-main .dp-tb,
  body .uv-main .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }
  body .uv-main table th,
  body .uv-main table td,
  body .uv-main .dp-tb th,
  body .uv-main .dp-tb td {
    padding: 8px 6px !important;
    font-size: 12px !important;
  }

  /* === FORMS — iOS Safari font-size 16px === */
  body .uv-main input[type="text"],
  body .uv-main input[type="email"],
  body .uv-main input[type="tel"],
  body .uv-main input[type="number"],
  body .uv-main input[type="search"],
  body .uv-main input[type="date"],
  body .uv-main input[type="datetime-local"],
  body .uv-main input[type="password"],
  body .uv-main select,
  body .uv-main textarea {
    font-size: 16px !important;
    min-height: 40px;
    width: 100%;
    box-sizing: border-box;
  }
  body .uv-main .f-row,
  body .uv-main .form-row {
    width: 100% !important;
  }
  body .uv-main .dp-bar,
  body .uv-main .filter-bar,
  body .uv-main .toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  body .uv-main .dp-bar select,
  body .uv-main .dp-bar input,
  body .uv-main .filter-bar select,
  body .uv-main .filter-bar input {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* === BUTTONS === */
  body .uv-main .btn,
  body .uv-main button:not(.uv-hamburger):not(.uv-logout),
  body .uv-main .btn-primary,
  body .uv-main .btn-sec {
    min-height: 40px;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
  body .uv-main form .btn-primary,
  body .uv-main form button[type="submit"],
  body .uv-main .form-actions .btn,
  body .uv-main .form-actions button {
    width: 100%;
  }

  /* === TABS — Scroll horizontal with indicator === */
  body .uv-main .dp-tabs,
  body .uv-main .tabs,
  body .uv-main .tab-bar,
  body .uv-main .dt-tabs,
  body .uv-main .ceo-tabs,
  body .uv-main [class*="-tabs"]:not(.uv-bottom-tab) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    /* Indicator: subtle gradient on right edge to hint scrollable */
    background: linear-gradient(to right, transparent calc(100% - 20px), rgba(255,255,255,0.7));
    background-attachment: local;
  }
  body .uv-main .dp-tabs::-webkit-scrollbar,
  body .uv-main .tabs::-webkit-scrollbar { display: none; }
  body .uv-main .dp-tab,
  body .uv-main .tab,
  body .uv-main .tab-item,
  body .uv-main .dt-pill {
    flex-shrink: 0;
    padding: 9px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  /* Phòng ban / CEO tabs — pill style (specific to persona_ceo) */
  body .uv-main .dt-pill {
    border-radius: 8px;
    padding: 8px 14px !important;
  }

  /* === MODALS === */
  .modal, .uv-modal, [role="dialog"] > div {
    max-width: 100vw !important;
    width: 100% !important;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0 !important;
    overflow-y: auto;
  }
  #da-modal > div, #m-modal > div {
    max-width: 95vw !important;
    width: 95vw !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* === CONTAINERS === */
  body .uv-main .dp-wrap,
  body .uv-main .me-wrap,
  body .uv-main .ktt-wrap,
  body .uv-main .tc-wrap,
  body .uv-main .ceo-wrap,
  body .uv-main [class*="-wrap"]:not(.uv-shell) {
    padding: 10px !important;
    max-width: 100% !important;
  }

  /* === HEADINGS === */
  body .uv-main h1, body .uv-main .dp-h1, body .uv-main .me-h1 { font-size: 18px !important; }
  body .uv-main h2 { font-size: 16px !important; }
  body .uv-main h3 { font-size: 15px !important; }

  /* === Sections compact === */
  body .uv-main .ceo-section {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }
  body .uv-main .ceo-section h2,
  body .uv-main .ceo-section .sec-title {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  /* === Chart containers === */
  body .uv-main canvas,
  body .uv-main .chart-container,
  body .uv-main .chart-box,
  body .uv-main [id*="chart"] {
    max-width: 100% !important;
    height: auto !important;
  }

  /* === Lists === */
  body .uv-main .yc-item,
  body .uv-main .alert-row,
  body .uv-main .alert-card,
  body .uv-main .list-item,
  body .uv-main .card-item,
  body .uv-main .action-item {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  /* Hide non-essential on tiny */
  @media (max-width: 380px) {
    body .uv-main .hide-xs { display: none !important; }
  }
}

/* === iPhone SE / very small === */
@media (max-width: 375px) {
  body .uv-main { padding: 8px !important; padding-bottom: 70px !important; }
  body .uv-main h1, body .uv-main .dp-h1, body .uv-main .me-h1 { font-size: 16px !important; }
  body .uv-main .persona-hero h1 { font-size: 20px !important; }
}

/* === BOTTOM TAB — Text-only minimalist (giong sidebar desktop) === */
@media (max-width: 767px) {
  body .uv-bottom-tab .uv-tab-icon { display: none !important; }
  body .uv-bottom-tab .uv-tab-item {
    padding: 10px 4px !important;
    justify-content: center !important;
  }
  body .uv-bottom-tab .uv-tab-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
  }
  body .uv-bottom-tab .uv-tab-item.is-active .uv-tab-label {
    color: var(--uv-gold, #9A7820) !important;
  }
}

/* === Additional patterns from 5 page audit === */
@media (max-width: 767px) {
  body .uv-main .ktt-stats,
  body .uv-main .stats-row,
  body .uv-main .summary-grid,
  body .uv-main .top-grid,
  body .uv-main [class*='stats'][class*='grid'],
  body .uv-main [class*='grid'][class*='4'] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  @media (max-width: 480px) {
    body .uv-main .ktt-stats,
    body .uv-main .stats-row,
    body .uv-main .summary-grid,
    body .uv-main .top-grid {
      grid-template-columns: 1fr !important;
    }
  }
  /* Sticky topbar an thua khi scroll on iOS — z-index tang */
  body .uv-topbar { z-index: 100 !important; }
  body .uv-bottom-tab { z-index: 99 !important; }
}