:root { --p: #0ea5e9; --s: #1e293b; --bg: #f0f2f5; --bdr: #cbd5e1; --txt: #334155; }
    html, body { margin:0; padding:0; height:100%; height:100dvh; width:100vw; overflow:hidden; position:fixed; top:0; left:0; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:var(--bg); color:var(--txt); box-sizing:border-box; }
    body { display:flex; }
    
    #sidebar { display:none; flex-direction:column; width:250px; background:var(--s); color:#fff; flex-shrink:0; height:100%; overflow-y:auto; transition:.3s ease; position:relative; z-index:10000; }
    body.logged-in #sidebar { display:flex; }
    body.logged-in #main-content { display:flex; flex-direction:column; flex:1; height:100%; overflow:hidden; padding:15px; transition:.3s ease; }
    body.sidebar-hidden #sidebar { margin-left:-250px !important; }
    #mobile-overlay { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.5); z-index:9999; }
    #sidebar ul { list-style:none; padding:0; margin:0; flex:1; }
    #sidebar li { padding: 12px 15px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; height: 45px !important; min-height: 45px !important; margin: 0 !important; border-top: none !important; cursor:pointer; transition:.2s; border-bottom:1px solid #334155; font-size:14px; }
    #sidebar li:hover { background-color:#334155; padding-left:20px; color:#38bdf8; }
    
    .admin-only, .teacher-access { display:none; }
    body.role-admin .admin-only, body.role-admin .teacher-access, body.role-teacher .teacher-access { display:block; }
    body.role-teacher #menu-student, body.role-teacher #menu-class, body.role-teacher #menu-user, body.role-teacher #menu-report, body.role-teacher #menu-finance, body.role-teacher .admin-only { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; }

    #login-container { width:100vw; height:100vh; display:flex; justify-content:center; align-items:center; background:linear-gradient(135deg, #2c3e50, #34495e); position:absolute; top:0; left:0; z-index:100; }
    body.logged-in #login-container { display:none !important; }
    .login-box { background:#fff; padding:30px; border-radius:10px; width:320px; text-align:center; box-shadow:0 10px 25px rgba(0,0,0,0.2); box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
    .login-box h2, .login-box input, .login-box button, .login-box p { box-sizing: border-box !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
    .login-box input, .finance-input, .student-input-field, .user-main-input-field { padding:10px; margin:8px 0; border:1px solid var(--bdr); border-radius:5px; font-size:13px; outline:none; }
    .login-box button { padding:10px; background:#27ae60; color:#fff; border:none; border-radius:5px; cursor:pointer; font-weight:bold; font-size:15px; }
    .finance-input { box-sizing: border-box !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
    
    .modal-overlay { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.4) !important; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); z-index:9999; justify-content:center; align-items:center; transition:opacity 0.3s ease; }
    .modal-overlay.active { display:flex !important; }
    .modal-box { background:rgba(255,255,255,0.95) !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:28px 30px !important; border-radius:20px !important; width:420px; max-width:95vw; max-height:90vh; overflow-y:auto; box-shadow:0 20px 40px rgba(0,0,0,0.15) !important; animation:iosScaleUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards; border:1px solid rgba(255,255,255,0.4); }
    @keyframes iosScaleUp { 0% { transform:scale(0.9); opacity:0; } 100% { transform:scale(1); opacity:1; } }
    .modal-box h3 { text-align:center; margin:0 0 24px 0 !important; font-weight:600; font-size:20px; color:#1c1c1e; letter-spacing:-0.5px; }
    .modal-box p[id$="-subtitle"] { text-align:center; font-size:13px !important; color:#8e8e93 !important; margin-top:-16px !important; margin-bottom:20px !important; }
    .modal-box input[type="text"], .modal-box input[type="number"], .modal-box input[type="date"], .modal-box input[type="file"], .modal-box select, .modal-box textarea, .student-input-field, .user-main-input-field { width:100% !important; background:#f2f2f7 !important; border:1px solid transparent !important; border-radius:12px !important; padding:14px 16px !important; font-size:15px !important; color:#1c1c1e !important; box-sizing:border-box !important; transition:all 0.2s ease; }
    .modal-box input:focus, .modal-box select:focus, .modal-box textarea:focus { background:#fff !important; border:1px solid #007aff !important; box-shadow:0 0 0 4px rgba(0,122,255,0.15) !important; outline:none !important; }
    .modal-box .save-btn, .modal-box .delete-btn { padding:14px 20px !important; border-radius:14px !important; font-size:16px !important; font-weight:600 !important; transition:transform 0.1s, opacity 0.2s !important; cursor:pointer; border:none; outline:none; display:flex; align-items:center; justify-content:center; }
    .modal-box .save-btn:active, .modal-box .delete-btn:active { transform:scale(0.96) !important; opacity:0.8 !important; }
    .modal-box .save-btn[style*="background:#cbd5e1"] { background:#f2f2f7 !important; color:#007aff !important; flex:1; }
    .modal-box .save-btn:not([style*="background:#cbd5e1"]) { background:#007aff !important; color:#fff !important; flex:1; }
    .modal-box .delete-btn { background:#ff3b30 !important; color:#fff !important; margin-right:auto; padding:14px 16px !important; }
    .modal-box div[style*="display:flex;gap:10px;justify-content:flex-end"] { margin-top:28px !important; padding-top:20px; border-top:1px solid #e5e5ea; display:flex !important; gap:12px !important; justify-content:space-between !important; width:100%; }
    .modal-box label input[type="radio"], .modal-box label input[type="checkbox"] { width:18px; height:18px; accent-color:#007aff; cursor:pointer; }
    .modal-box::-webkit-scrollbar { width:6px; } .modal-box::-webkit-scrollbar-thumb { background:#c7c7cc; border-radius:10px; }
    
    .page-card { flex:1; min-height:0; background:#fff; padding:15px; border-radius:10px; box-shadow:0 4px 6px rgba(0,0,0,0.05); display:flex; flex-direction:column; overflow:hidden; }
    #header-container { flex-shrink:0; margin-bottom:10px; }
    h1#tab-title { margin:0 0 10px 0; font-size:20px; display:flex; justify-content:space-between; align-items:center; color:var(--s); font-weight:700; }
    h1#tab-title > div { display:flex; align-items:center; }
    .search-input { padding:8px 15px; border:1px solid var(--bdr); border-radius:20px; font-size:13px; width:220px; outline:none; }
    .add-btn, .save-btn, .delete-btn, .pdf-btn { border:none; padding:6px 12px; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; color:#fff; }
    .add-btn { background:var(--p); } .save-btn { background:#f59e0b; } .delete-btn { background:#ef4444; } .pdf-btn { background:#8b5cf6; }
    .work-tabs { display:flex; gap:10px; border-bottom:2px solid #e2e8f0; padding-bottom:10px; margin-bottom:10px; overflow-x:auto; }
    .work-tab-btn { padding:6px 12px; border:none; background:#f1f5f9; color:#64748b; border-radius:6px; font-weight:600; cursor:pointer; }
    .work-tab-btn.active { background:var(--p); color:#fff; }
    .att-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:10px; background:#f8fafc; padding:10px; border-radius:8px; border:1px solid #e2e8f0; }
    .att-controls select, .att-controls input { padding:6px; border:1px solid #cbd5e1; border-radius:5px; font-size:13px; outline:none; }
    
    .att-legend { display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; justify-content:flex-start !important; gap:20px !important; width:100% !important; padding:10px 15px !important; background:#f8f9fa; border-radius:5px; border:1px solid #eee; box-sizing:border-box !important; }
    .att-legend .legend-item { display:flex !important; align-items:center !important; gap:8px !important; white-space:nowrap !important; margin:0 !important; font-size:13px !important; font-weight:500; }
    .legend-color { width:14px; height:14px; border-radius:3px; display:inline-block; }

    #table-container { flex:1 1 auto; min-height:0; overflow-x:auto !important; overflow-y:auto; border:1px solid #e2e8f0; border-radius:8px; background:#fff; }
    #table-container td, #data-table td { white-space:normal !important; word-wrap:break-word !important; line-height:1.5 !important; }
    table { width:100%; border-collapse:separate; border-spacing:0; }
    th, td { border-bottom:1px solid #e2e8f0; border-right:1px solid #e2e8f0; padding:10px; text-align:left; font-size:13px; white-space:nowrap; }
    th { background:#f8fafc; color:var(--s); font-weight:600; position:sticky; top:0; z-index:5; box-shadow:0 1px 2px rgba(0,0,0,0.05); }
    tr:hover td { background-color:#f8fafc; }
    
    .att-matrix { table-layout:fixed !important; width:max-content !important; border-spacing:0!important; border-collapse:separate!important; }
    .att-matrix thead tr:nth-child(2) th { position:sticky; top:0; z-index:5; background:#f8fafc; }
    .att-matrix thead tr:nth-child(3) th { position:sticky; top:42px; z-index:4; background:#f8fafc; }
    .att-matrix .freeze-col-1 { position:sticky; left:0; z-index:10; background:#fff !important; text-align:center; font-weight:bold; }
    .att-matrix .freeze-col-2 { position:sticky; left:70px; z-index:10; background:#fff !important; font-weight:600; }
    .att-matrix thead .freeze-col-1, .att-matrix thead .freeze-col-2 { z-index:15; }
    .att-shift-col { text-align:center !important; padding:0 !important; font-size:11px; color:#64748b; overflow:hidden; box-sizing:border-box; }
    .att-day-col { padding:4px 0 !important; text-align:center; border-right:2px solid #cbd5e1 !important; overflow:hidden; box-sizing:border-box; }
    .att-cell { height:30px; border-right:1px dashed #e2e8f0; cursor:pointer; }
    .border-right-thick { border-right:2px solid #cbd5e1 !important; }
    .bg-dihoc { background-color:#10b981 !important; color:#fff !important; }
    .bg-xinnghi { background-color:#ef4444 !important; color:#fff !important; }
    .bg-nop { background-color:#f59e0b !important; color:#fff !important; }

    .status-pill { display:inline-block; padding:4px 10px; border-radius:12px; font-size:11px; font-weight:bold; text-align:center; }
    .status-pill.active { background:#ecfdf5; color:#047857; } .status-pill.closed { background:#fef2f2; color:#b91c1c; }
    
    .class-form-group { margin-bottom:18px !important; display:flex; flex-direction:column; gap:5px; }
    .class-form-group label { font-weight:500; font-size:12px !important; color:#8e8e93 !important; text-transform:uppercase; letter-spacing:0.5px; }
    .class-form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px !important; }
    .schedule-row-item { background:#f2f2f7 !important; padding:12px !important; border-radius:12px !important; border:none !important; margin-bottom:12px !important; display:grid; grid-template-columns:70px 100px 1fr 1fr 30px; gap:12px !important; align-items:center; }
    .schedule-row-item select, .schedule-row-item input { padding:10px !important; border-radius:8px !important; background:#fff !important; border:1px solid #d1d1d6 !important; }
    
    .db-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:15px; }
    .db-card { padding:15px; border-radius:10px; color:#fff; display:flex; flex-direction:column; justify-content:center; box-shadow:0 4px 6px rgba(0,0,0,0.1); position:relative; overflow:hidden; }
    .db-card h4 { margin:0 0 5px 0; font-size:12px; font-weight:600; opacity:0.9; text-transform:uppercase; z-index:2; }
    .db-card .db-val { font-size:22px; font-weight:bold; z-index:2; }
    .db-card .db-icon { position:absolute; right:-10px; bottom:-15px; font-size:70px; opacity:0.2; z-index:1; }
    .db-chart-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:15px; }
    .db-chart-box { background:#fff; padding:15px; border-radius:10px; border:1px solid #e2e8f0; display:flex; flex-direction:column; height:300px; }
    .db-chart-box h3 { margin:0 0 10px 0; font-size:14px; border-bottom:1px solid #f1f5f9; padding-bottom:8px; }
    .db-chart-container { position:relative; flex:1; width:100%; height:100%; min-height:0; }
    .bg-blue { background:linear-gradient(135deg,#3b82f6,#2563eb); } .bg-red { background:linear-gradient(135deg,#ef4444,#dc2626); }
    .bg-green { background:linear-gradient(135deg,#10b981,#059669); } .bg-orange { background:linear-gradient(135deg,#f59e0b,#d97706); }

    .finance-table { width:100%; border-collapse:separate; border-spacing:0; }
    .finance-table th { background:#f8fafc; color:var(--txt); padding:10px; border-bottom:2px solid #cbd5e1; }
    
    .tkb-tooltip { position:relative; }
    .tkb-tooltip .tooltip-text { visibility:hidden; width:max-content; max-width:250px; background-color:#1e293b; color:#fff; text-align:left; border-radius:6px; padding:10px 12px; position:absolute; z-index:99999; bottom:100%; left:50%; transform:translateX(-50%) translateY(5px); opacity:0; transition:opacity 0.2s, transform 0.2s; box-shadow:0 10px 15px -3px rgba(0,0,0,0.3); white-space:pre-wrap; font-size:12px; font-weight:500; pointer-events:none; }
    .tkb-tooltip .tooltip-text::after { content:""; position:absolute; top:100%; left:50%; margin-left:-6px; border-width:6px; border-style:solid; border-color:#1e293b transparent transparent transparent; }
    .tkb-tooltip:hover .tooltip-text { visibility:visible; opacity:1; transform:translateX(-50%) translateY(-6px); }
    
    #table-container > div[style*="grid-template-columns:repeat(7,1fr)"] { height:auto !important; grid-template-rows:auto !important; grid-auto-rows:1fr !important; overflow:visible !important; }
    #table-container > div[style*="grid-template-columns:repeat(7,1fr)"] > div { min-height:120px !important; height:auto !important; overflow:visible !important; }

    ::-webkit-scrollbar { height:6px; width:6px; }
    ::-webkit-scrollbar-track { background:#f1f5f9; border-radius:3px; }
    ::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }

    @media (max-width:1024px) {
      body.logged-in #sidebar { position:fixed; top:0; left:0; transform:translateX(-100%); margin-left:0 !important; box-shadow:2px 0 15px rgba(0,0,0,0.5); }
      body.mobile-sidebar-open #sidebar { transform:translateX(0) !important; }
      body.mobile-sidebar-open #mobile-overlay { display:block; }
      #close-sidebar-btn { display:block !important; }
      .db-grid { grid-template-columns:1fr 1fr; }
      .db-chart-row { grid-template-columns:1fr; height:auto; }
      .db-chart-box { height:250px; }
    }
    #print-section { display:none; }


    /* ================= MOBILE RESPONSIVE FIX =================
       Mục tiêu: app luôn fit theo viewport thật của thiết bị,
       không bị tràn ngang toàn trang, header/control co lại hợp lý,
       bảng vẫn cuộn bên trong #table-container thay vì đẩy vỡ layout. */
    *, *::before, *::after { box-sizing: border-box; }
    #main-content, .page-card, #header-container, #sub-header-container, #table-container { min-width: 0; }
    body.logged-in #main-content { width: 100%; max-width: 100vw; }
    #table-container { max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

    @media (max-width: 1024px) {
      html, body {
        width: 100%;
        max-width: 100vw;
        height: var(--app-height, 100dvh);
        min-height: var(--app-height, 100dvh);
        overflow: hidden;
      }
      body.logged-in #main-content {
        width: 100vw;
        max-width: 100vw;
        height: var(--app-height, 100dvh);
        min-height: 0;
        padding: 10px;
      }
      body.logged-in #sidebar {
        width: min(84vw, 300px);
        max-width: 300px;
        height: var(--app-height, 100dvh);
      }
      #mobile-overlay {
        height: var(--app-height, 100dvh);
      }
      .page-card {
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 10px;
      }
      h1#tab-title {
        gap: 8px;
        flex-wrap: wrap;
      }
      h1#tab-title > div {
        min-width: 0;
      }
      #tab-name-display {
        max-width: calc(100vw - 110px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      #sub-header-container {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .att-controls {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .att-controls > div {
        min-width: 0;
        flex-wrap: wrap;
      }
      .att-controls label {
        white-space: nowrap;
      }
      .search-input {
        width: min(220px, 56vw);
      }
      .modal-overlay {
        height: var(--app-height, 100dvh);
        align-items: flex-end;
        padding: 8px;
      }
      .modal-box,
      .modal-box[style] {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(var(--app-height, 100dvh) - 16px) !important;
        padding: 18px 16px !important;
        border-radius: 18px 18px 8px 8px !important;
      }
      .class-form-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px !important;
      }
      .schedule-row-item {
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
      }
      .schedule-row-item > *:last-child {
        justify-self: end;
      }
    }

    @media (max-width: 768px) {
      body.logged-in #main-content { padding: 8px; }
      .page-card { padding: 8px; border-radius: 8px; }
      #header-container { margin-bottom: 6px; }
      h1#tab-title { font-size: 16px; margin-bottom: 6px; }
      .add-btn, .save-btn, .delete-btn, .pdf-btn, .work-tab-btn {
        padding: 6px 9px;
        font-size: 12px;
        white-space: nowrap;
      }
      .att-controls {
        padding: 8px;
        gap: 6px;
        margin-bottom: 6px;
      }
      .att-controls select,
      .att-controls input,
      .att-controls button {
        font-size: 12px !important;
        max-width: 100%;
      }
      .work-tabs {
        gap: 6px;
        padding-bottom: 6px;
        margin-bottom: 6px;
      }
      th, td {
        padding: 7px 8px;
        font-size: 12px;
      }
      .db-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 8px;
      }
      .db-card { padding: 10px; }
      .db-card h4 { font-size: 10px; }
      .db-card .db-val { font-size: 18px; }
      .db-chart-row { gap: 8px; margin-bottom: 8px; }
      .db-chart-box { height: 220px; padding: 10px; }
      .class-form-row { grid-template-columns: 1fr !important; }
      .login-box {
        width: calc(100vw - 32px);
        max-width: 360px;
        padding: 24px 18px;
      }
    }

    @media (max-width: 600px) {
      #table-container > div[style*="grid-template-columns:repeat(7,1fr)"] {
        gap: 4px !important;
        padding: 4px !important;
        border-radius: 6px !important;
      }
      #table-container > div[style*="grid-template-columns:repeat(7,1fr)"] > div {
        min-height: 88px !important;
        padding: 4px !important;
        overflow: hidden !important;
        font-size: 10px !important;
      }
      #table-container > div[style*="grid-template-columns:repeat(7,1fr)"] .tkb-tooltip {
        font-size: 10px !important;
        padding: 4px !important;
        line-height: 1.25 !important;
      }
      #table-container > div[style*="grid-template-columns:repeat(7,1fr)"] .tkb-tooltip div {
        font-size: 10px !important;
      }
      .tkb-tooltip .tooltip-text {
        display: none !important;
      }
    }

    @media (max-width: 430px) {
      body.logged-in #main-content { padding: 6px; }
      .page-card { padding: 6px; border-radius: 0; }
      h1#tab-title { font-size: 15px; }
      #tab-name-display { max-width: calc(100vw - 92px); }
      #btn-toggle-menu { margin-right: 6px !important; }
      .search-input { width: min(180px, 52vw); }
      .db-grid { grid-template-columns: 1fr; }
      .db-chart-box { height: 200px; }
      th, td { padding: 6px; font-size: 11px; }
      .modal-box,
      .modal-box[style] {
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
        padding: 16px 14px !important;
      }
      .schedule-row-item { grid-template-columns: 1fr !important; }
    }

    @media (orientation: landscape) and (max-height: 500px) {
      body.logged-in #main-content { padding: 6px; }
      .page-card { padding: 6px; }
      #header-container { margin-bottom: 4px; }
      h1#tab-title { margin-bottom: 4px; }
      .att-controls { padding: 6px; margin-bottom: 4px; }
      .modal-box,
      .modal-box[style] {
        max-height: calc(var(--app-height, 100dvh) - 10px) !important;
      }
    }



    /* ================= CLASS & FINANCE UI FIX ================= */
    .class-action-group {
      display: grid;
      grid-template-columns: repeat(3, minmax(72px, 1fr));
      gap: 6px;
      align-items: center;
      justify-content: center;
      min-width: 260px;
    }
    .class-action-btn {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      padding: 7px 10px !important;
      border-radius: 8px !important;
      white-space: nowrap;
      font-size: 12px !important;
      line-height: 1.2;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    }
    .finance-kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(160px, 1fr));
      gap: 12px;
      margin-bottom: 14px;
    }
    .finance-kpi-card {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px;
      box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05);
    }
    .finance-kpi-card .label {
      font-size: 12px;
      color: #64748b;
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .finance-kpi-card .value {
      font-size: 20px;
      font-weight: 900;
      color: #0f172a;
    }
    .finance-status-select {
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 700;
      background: #fff;
      outline: none;
    }
    @media (max-width: 768px) {
      .class-action-group {
        grid-template-columns: 1fr;
        min-width: 110px;
      }
      .finance-kpi-grid {
        grid-template-columns: 1fr 1fr;
      }
    }
    @media (max-width: 430px) {
      .finance-kpi-grid {
        grid-template-columns: 1fr;
      }
    }
    @media print {
      #sidebar, #header-container, #sub-header-container, #login-container, .modal-overlay { display:none !important; }
      body, html { display:block !important; height:auto !important; background:#fff !important; overflow:visible !important; }
      #print-section { display:block !important; }
    }


/* ==================== PWA INSTALL UI ==================== */
.pwa-install-btn {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 10000;
  border: 0;
  border-radius: 999px;
  padding: 11px 16px;
  background: #0f172a;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .28);
  cursor: pointer;
}
.pwa-install-btn[hidden],
.pwa-install-help[hidden] {
  display: none !important;
}
.pwa-install-help {
  position: fixed;
  right: 16px;
  bottom: calc(68px + env(safe-area-inset-bottom));
  z-index: 10000;
  width: min(320px, calc(100vw - 32px));
  border-radius: 14px;
  padding: 13px 15px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .2);
  border: 1px solid #e2e8f0;
}
@media (display-mode: standalone) {
  .pwa-install-btn,
  .pwa-install-help {
    display: none !important;
  }
}


/* ==================== PWA V3 UPDATE UI ==================== */
.pwa-update-toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 10001;
  width: min(560px, calc(100vw - 28px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #dbe3ee;
  border-radius: 16px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pwa-update-toast[hidden] {
  display: none !important;
}

.pwa-update-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #0f172a;
}

.pwa-update-copy strong {
  font-size: 14px;
}

.pwa-update-copy span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.pwa-update-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

.pwa-update-actions button {
  border: 0;
  border-radius: 10px;
  padding: 9px 12px;
  font-weight: 700;
  cursor: pointer;
}

#pwa-update-btn {
  background: #0f172a;
  color: #fff;
}

#pwa-update-btn:disabled {
  cursor: wait;
  opacity: .7;
}

#pwa-update-dismiss {
  background: #eef2f7;
  color: #334155;
}

@media (max-width: 560px) {
  .pwa-update-toast {
    align-items: stretch;
    flex-direction: column;
  }

  .pwa-update-actions {
    justify-content: flex-end;
  }
}


/* ==================== PWA V3.2 — iPHONE STANDALONE FIX ==================== */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

html,
body {
  width: 100%;
  max-width: 100%;
  touch-action: manipulation;
}

body.logged-in #main-content,
#login-container,
.modal-overlay {
  padding-left: max(0px, var(--safe-left));
  padding-right: max(0px, var(--safe-right));
}

/* Prevent iOS from zooming the whole standalone app after tapping a field.
   iOS commonly auto-zooms controls whose computed font-size is below 16px. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    input,
    select,
    textarea,
    .att-controls input,
    .att-controls select,
    .modal-box input,
    .modal-box select,
    .modal-box textarea {
      font-size: 16px !important;
    }
  }
}

/* The iPhone home-screen app uses an edge-to-edge viewport.
   Keep interactive content away from the status bar, Dynamic Island and home indicator. */
@media (display-mode: standalone) {
  html,
  body {
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
  }

  body.logged-in #main-content {
    height: var(--app-height, 100dvh);
    padding-top: calc(8px + var(--safe-top));
    padding-right: calc(8px + var(--safe-right));
    padding-bottom: calc(8px + var(--safe-bottom));
    padding-left: calc(8px + var(--safe-left));
  }

  #login-container {
    height: var(--app-height, 100dvh);
    padding-top: calc(12px + var(--safe-top));
    padding-right: calc(12px + var(--safe-right));
    padding-bottom: calc(12px + var(--safe-bottom));
    padding-left: calc(12px + var(--safe-left));
  }

  body.logged-in #sidebar {
    height: var(--app-height, 100dvh);
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
  }

  #mobile-overlay,
  .modal-overlay {
    height: var(--app-height, 100dvh);
  }

  .modal-overlay {
    padding-top: calc(8px + var(--safe-top));
    padding-right: calc(8px + var(--safe-right));
    padding-bottom: calc(8px + var(--safe-bottom));
    padding-left: calc(8px + var(--safe-left));
  }
}

/* Stable mobile header: menu + title stay on one line and never sit under the status bar. */
@media (max-width: 768px) {
  h1#tab-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  h1#tab-title > div:first-child {
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap;
  }

  #btn-toggle-menu {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    margin-right: 8px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    font-size: 20px !important;
  }

  #tab-name-display {
    display: block;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
  }

  #header-actions:empty {
    display: none;
  }
}

/* Dashboard date filters: no orphaned label/input rows on iPhone. */
.dashboard-range-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 10px;
  overflow: visible;
}

.dashboard-month-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.dashboard-month-field label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}

.dashboard-month-field input {
  width: 100%;
  min-width: 0;
  height: 42px;
  margin: 0;
}

.dashboard-analyze-btn {
  min-height: 42px;
  padding-left: 16px;
  padding-right: 16px;
}

@media (max-width: 700px) {
  .dashboard-range-controls {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-analyze-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .dashboard-range-controls {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .dashboard-analyze-btn {
    grid-column: 1;
  }

  .dashboard-month-field input {
    height: 44px;
  }

  .page-card {
    min-height: 0;
  }
}