/* =============================================================
   GESTMAIS — Responsive Design System v2
   Loaded last via pwa_head.php — overrides all page-specific CSS
   ============================================================= */

/* ── Design Tokens — Light mode ─────────────────────────── */
:root,
[data-theme="light"] {
    --r-green-dark:  #1e3a2e;
    --r-green-mid:   #2d5a45;
    --r-accent:      #4caf50;
    --r-bg:          #f0f2f5;
    --r-card:        #ffffff;
    --r-border:      #e4e7eb;
    --r-text:        #111827;
    --r-sub:         #6b7280;
    --r-shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
    --r-shadow-md:   0 4px 16px rgba(0,0,0,0.09), 0 2px 4px rgba(0,0,0,0.04);
    --r-radius:      14px;
    --r-radius-sm:   10px;
}

/* ── Design Tokens — Dark mode ──────────────────────────── */
[data-theme="dark"] {
    --r-bg:     #0f1117;
    --r-card:   #181b25;
    --r-border: #262d3d;
    --r-text:   #e4e6eb;
    --r-sub:    #9ca3af;
    --r-shadow-sm: 0 1px 3px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.2);
    --r-shadow-md: 0 4px 16px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.2);
}

/* ── Global ───────────────────────────────────────────────── */
body { background: var(--r-bg) !important; }

/* Cards: consistent radius + border */
.stat-card,
.card,
.chart-card {
    border-radius: var(--r-radius) !important;
    border: 1px solid var(--r-border) !important;
    box-shadow: var(--r-shadow-sm) !important;
}

/* Hover only on pointer devices (no sticky hover on touch) */
@media (hover: hover) and (pointer: fine) {
    .stat-card:hover,
    .card:hover {
        transform: translateY(-2px) !important;
        box-shadow: var(--r-shadow-md) !important;
    }
}

/* ── Header ───────────────────────────────────────────────── */
.header {
    box-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
    border-bottom: 1px solid var(--r-border) !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — max-width: 768px
   ══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
    .user-name { display: none !important; }

    .header {
        padding: 0 14px !important;
        height: 56px !important;
        min-height: 0 !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-direction: row !important;
        flex-direction: row !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        -webkit-justify-content: space-between !important;
        justify-content: space-between !important;
        -webkit-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    .header-left {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        -webkit-align-self: center !important;
        align-self: center !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
        gap: 10px !important;
        -webkit-flex: 1 1 auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .header-right {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        -webkit-align-self: center !important;
        align-self: center !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
        gap: 8px !important;
        -webkit-flex-shrink: 0 !important;
        flex-shrink: 0 !important;
        -webkit-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
    }
    .header-title,
    .header-left h1 {
        font-size: 17px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        overflow: hidden !important;
        min-width: 0 !important;
        letter-spacing: -0.02em !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
    .header-title i,
    .header-left h1 i {
        flex-shrink: 0 !important;
        font-size: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Mobile: sidebar oculto por defeito — bottom-nav */
    .sidebar,
    .sidebar-overlay { display: none !important; }
    .hamburger-btn   { display: none !important; }

    /* Sidebar abre quando clicada (overlay visível no hamburger) */
    .sidebar.active          { display: flex !important; left: 0; }
    .sidebar-overlay.active  { display: block !important; }

    /* Bottom padding for bottom nav */
    .main-container { padding: 14px 14px 84px !important; }

    /* Modals: bottom sheet */
    .modal { align-items: flex-end !important; padding: 0 !important; }
    .modal-content {
        border-radius: 20px 20px 0 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: 92vh !important;
    }

    /* Notification panel: fixed from top so it never goes off-screen */
    .notif-panel {
        position: fixed !important;
        top: 60px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        z-index: 1000 !important;
    }

    /* Chart heights */
    .chart-container { height: 200px !important; }
    .chart-wrapper   { height: 200px !important; }

    /* ── Definições — responsivo completo ─────────────────── */
    .settings-section { border-radius: 12px !important; margin-bottom: 14px !important; }
    .section-header   { padding: 14px 16px !important; gap: 10px !important; }
    .section-icon     { width: 36px !important; height: 36px !important; font-size: 15px !important; }
    .section-body     { padding: 16px !important; }
    .page-header      { margin-bottom: 18px !important; }

    /* Avatar: centrado e empilhado */
    .avatar-container {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
    }
    .avatar-preview-wrap { margin: 0 auto !important; }
    .avatar-preview      { width: 96px !important; height: 96px !important; }
    .avatar-info         { width: 100% !important; }
    .avatar-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    .avatar-actions .btn,
    .avatar-actions label.btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
    }

    /* Formulário perfil */
    .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
    .form-group { margin-bottom: 14px !important; }
    .form-group input,
    .form-group select,
    .form-group textarea { font-size: 16px !important; } /* evita zoom iOS */

    /* Botões de ação */
    .btn-group {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .btn-group .btn,
    .btn-block {
        width: 100% !important;
        justify-content: center !important;
        padding: 13px 16px !important;
        font-size: 15px !important;
    }

    /* Security card: empilhar e botão a 100% */
    .security-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .security-card > form,
    .security-card > button { width: 100% !important; }
    .security-card > form .btn,
    .security-card > button.btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 11px 16px !important;
    }

    /* Tema: 2 colunas lado a lado */
    .theme-options { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

    /* Notificações toggle */
    .notif-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — max-width: 600px
   STATS GRID: always 2 columns + compact cards
   ══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 600px) {

    /* ── Stats grid: 2 columns, no exceptions ── */
    .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    /* ── Stat card: compact vertical ── */
    .stat-card {
        padding: 13px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        min-height: 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Top accent stripe (reset from any left-stripe overrides) */
    .stat-card::before {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        right: 0 !important; bottom: auto !important;
        width: auto !important; height: 3px !important;
    }

    /* Icon */
    .stat-icon {
        width: 36px !important; height: 36px !important;
        border-radius: var(--r-radius-sm) !important;
        font-size: 16px !important;
        margin-bottom: 10px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Wrappers */
    .stat-info, .stat-content {
        flex: unset !important; width: 100% !important;
    }

    /* Label */
    .stat-label {
        font-size: 11px !important;
        line-height: 1.3 !important;
        margin-bottom: 3px !important;
        font-weight: 500 !important;
        color: var(--r-sub) !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    /* Value */
    .stat-value {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }

    /* Badge below value (poupança, etc.) */
    .stat-change {
        font-size: 11px !important;
        margin-top: 3px !important;
    }

    /* ── Poupança: colored cards use flex-row by default ── */
    .stat-card.purple,
    .stat-card.green,
    .stat-card.blue,
    .stat-card.orange {
        flex-direction: column !important;
        padding: 13px 12px !important;
        gap: 0 !important;
        align-items: flex-start !important;
    }
    .stat-card.purple .stat-icon,
    .stat-card.green  .stat-icon,
    .stat-card.blue   .stat-icon,
    .stat-card.orange .stat-icon {
        width: 36px !important; height: 36px !important;
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
    .stat-card.purple .stat-value,
    .stat-card.green  .stat-value,
    .stat-card.blue   .stat-value,
    .stat-card.orange .stat-value {
        font-size: 15px !important;
    }

    /* ── Investimentos (inv-*) ── */
    .inv-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .inv-stat {
        padding: 12px 10px !important;
        gap: 8px !important;
        border-radius: var(--r-radius) !important;
    }
    .inv-stat-icon {
        width: 34px !important; height: 34px !important;
        font-size: 15px !important;
    }
    .inv-stat-label { font-size: 10px !important; }
    .inv-stat-value {
        font-size: 12px !important;
        word-break: break-all !important;
        line-height: 1.3 !important;
    }

    /* ── Header: compact ── */
    .header {
        padding: 0 12px !important;
        height: 52px !important;
        min-height: 0 !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-direction: row !important;
        flex-direction: row !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        -webkit-justify-content: space-between !important;
        justify-content: space-between !important;
        -webkit-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    .header-left {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        -webkit-align-self: center !important;
        align-self: center !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
        gap: 8px !important;
        -webkit-flex: 1 1 auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .header-right {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        -webkit-align-self: center !important;
        align-self: center !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
        gap: 5px !important;
        -webkit-flex-shrink: 0 !important;
        flex-shrink: 0 !important;
        -webkit-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
    }
    .header-title,
    .header-left h1 {
        font-size: 15px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow: hidden !important;
        min-width: 0 !important;
        letter-spacing: -0.02em !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
    .header-title i,
    .header-left h1 i {
        flex-shrink: 0 !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Hide print button on mobile (useless on touch) */
    .btn-print { display: none !important; }

    /* Hide PRO badge inside circle buttons — tooltip shows it's premium */
    .pro-badge { display: none !important; }

    /* Hamburger: sizing only on phone (display controlled by min-width block) */
    .hamburger-btn {
        flex-shrink: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        font-size: 20px !important;
    }

    /* Action buttons in header: circle icon-only */
    .header-right > button,
    .header-right > a[class*="btn"] {
        position: relative !important;
        width: 36px !important; height: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        min-width: unset !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
        overflow: hidden !important;
    }
    .header-right > button > i,
    .header-right > a[class*="btn"] > i {
        font-size: 15px !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        line-height: 1 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }
    /* Span text labels inside header buttons: hide */
    .header-right > button > span:not(.notif-badge),
    .header-right > button > .btn-label {
        display: none !important;
    }

    /* Special classes */
    .btn-qr,
    .inv-btn-novo {
        position: relative !important;
        width: 34px !important; height: 34px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    .btn-qr i,
    .inv-btn-novo i {
        font-size: 14px !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .inv-btn-label { display: none !important; }

    /* User menu: compact */
    .user-menu {
        padding: 4px !important;
        border-radius: 50% !important;
        gap: 0 !important;
        background: transparent !important;
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .user-avatar, .user-avatar-letter {
        width: 30px !important; height: 30px !important;
        font-size: 12px !important;
    }
    .user-menu > i.fa-chevron-down { display: none !important; }
    .user-name { display: none !important; }

    /* Main container */
    .main-container { padding: 12px !important; }

    /* Section header title sizes */
    .section-title, .card-title { font-size: 15px !important; }

    /* Filters compact */
    .filters-section, .filters-bar {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    /* Bottom padding for bottom nav */
    .main-container { padding: 12px 12px 84px !important; }

    /* iOS: prevent zoom on input focus (font-size must be ≥16px) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Prevent horizontal overflow globally — clip avoids creating a new scroll container */
    html, body { overflow-x: clip !important; }

    /* Search input: full width */
    .search-input { width: 100% !important; }

    /* Chart heights reduced */
    .chart-container { height: 170px !important; }
    .chart-wrapper   { height: 170px !important; }
    .chart-canvas-box { height: 200px !important; }

    /* Bolsa: market-card change badges – don't wrap text */
    .market-card-change { white-space: nowrap !important; }

    /* Contas: hero pills full width on very small */
    .hero-right { flex-wrap: wrap !important; gap: 8px !important; }
    .hero-pill  { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; }

    /* Investimentos: tipo badges */
    .tipo-badge { font-size: 10px !important; padding: 3px 7px !important; }

    /* Avisos: action buttons */
    .aviso-actions { flex-wrap: wrap !important; gap: 6px !important; }

    /* Settings grid: single column, no overflow */
    .settings-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — max-width: 480px — extra compact
   ══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 480px) {
    .stats-grid { gap: 8px !important; }

    .stat-card { padding: 12px 10px !important; }
    .stat-icon { width: 32px !important; height: 32px !important; font-size: 14px !important; margin-bottom: 8px !important; }
    .stat-value { font-size: 15px !important; }
    .stat-label { font-size: 10px !important; }

    .main-container { padding: 10px 10px 84px !important; }

    /* Chart heights extra small */
    .chart-container  { height: 150px !important; }
    .chart-wrapper    { height: 150px !important; }
    .chart-canvas-box { height: 170px !important; }

    /* Market grid: single column on very small */
    .market-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .market-card { padding: 14px 12px !important; }
    .market-card-price { font-size: 20px !important; }

    /* Watchlist layout: stacked */
    .watchlist-layout { grid-template-columns: 1fr !important; }

    /* Investimentos: single column */
    .investimentos-grid { grid-template-columns: 1fr !important; }

    /* Poupança: goal item compact */
    .goal-item { padding: 16px !important; }
    .goal-name { font-size: 15px !important; }

    /* Categorias: 2 cols */
    .categories-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

    /* Contas: hero compact */
    .hero-balance { font-size: 34px !important; }
    .hero-right   { flex-direction: column !important; }
    .hero-pill    { min-width: 0 !important; width: 100% !important; }

    /* Notif panel: already handled by fixed positioning at 768px */

    /* Auth title */
    .auth-form-title { font-size: 22px !important; }

    /* Table overflow: horizontal scroll */
    .expenses-table, .data-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   TABLET + PC — min-width: 641px
   Sidebar lateral com hamburger; bottom-nav oculto.
   Overrides os max-width:768px das page-*.css (loaded last).
   ══════════════════════════════════════════════════════════════ */
@media screen and (min-width: 641px) {
    /* ── Sidebar e hamburger: visíveis ─────────────────── */
    .sidebar                { display: flex   !important; }
    .sidebar-overlay        { display: none              ; }
    .sidebar.active         { left:    0      !important; }
    .sidebar-overlay.active { display: block  !important; }
    .hamburger-btn          { display: flex   !important; }

    /* ── Bottom-nav: oculto em tablet/PC ───────────────── */
    .bottom-nav { display: none !important; }

    /* ── Remove espaço reservado para bottom-nav ───────── */
    .main-container { padding-bottom: 20px !important; }
}

/* ── Tablet (641–1024px): ajustes de layout ──────────────── */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .main-container {
        padding: 18px 20px 20px !important;
    }
}