/* Generated from the Gold Master dashboard-v2.html inline style block for Issue 13 Native document ownership. */
/* Do not hand-edit while Legacy remains the Gold Master; regenerate from the source block instead. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --sidebar-w:240px; --sidebar-collapsed:64px; --topbar-h:60px;
      --bg:#f0f4f8; --surface:#ffffff; --surface2:#f7f9fc; --border:#e2e8f0; --border2:#cbd5e1;
      --ink:#0f172a; --muted:#64748b; --hint:#94a3b8;
      --blue:#1d4ed8; --blue-light:#dbeafe; --blue-mid:#3b82f6; --green:#15803d; --green-light:#dcfce7;
      --amber:#b45309; --amber-light:#fef3c7; --red:#b91c1c; --red-light:#fee2e2; --indigo:#4338ca; --indigo-light:#e0e7ff;
      --sidebar-bg: var(--surface); 
      --sidebar-item: var(--muted); 
      --sidebar-active: var(--blue-mid); 
      --sidebar-active-bg: var(--blue-light); 
      --sidebar-hover-bg: var(--surface2); 
      --sidebar-section: #94a3b8;
      
      --topbar-bg: var(--surface);
      --topbar-border: var(--blue-mid);
      --topbar-text: var(--ink);
      --tb-btn-bg: var(--surface);
      --tb-btn-border: var(--border2);
      --tb-btn-text: var(--ink);
      --tb-btn-hover-bg: var(--blue-light);
      --tb-btn-hover-border: var(--blue-mid);
      --tb-span-bg: var(--surface2);
      --tb-span-border: var(--border2);
      --tb-span-text: var(--muted);

      --radius:8px; --radius-lg:12px; --radius-xl:16px;
      --font:'Sarabun',sans-serif; --mono:'Inter',sans-serif; 
      --transition:0.18s cubic-bezier(.4,0,.2,1);
    }
    .dark{
      --bg:#050b14; --surface:#0b1220; --surface2:#1e293b; --border:#1e293b; --border2:#334155;
      --ink:#f1f5f9; --muted:#94a3b8; --hint:#475569;
      --blue:#60a5fa; --blue-light:#1e3a8a; --blue-mid:#3b82f6; --green:#22c55e; --green-light:#14532d;
      --amber:#fbbf24; --amber-light:#451a03; --red:#f87171; --red-light:#450a0a; --indigo:#818cf8; --indigo-light:#1e1b4b;
      --sidebar-bg: #050b14; 
      --sidebar-item: #94a3b8; 
      --sidebar-active: #ffffff; 
      --sidebar-active-bg: rgba(59,130,246,.18); 
      --sidebar-hover-bg: rgba(255,255,255,.06); 
      --sidebar-section: #334155;

      --topbar-bg: linear-gradient(135deg,#0b1220, #1e3a8a 55%, #0ea5e9);
      --topbar-border: rgba(96,165,250,.6);
      --topbar-text: #fff;
      --tb-btn-bg: rgba(255,255,255,0.1);
      --tb-btn-border: rgba(255,255,255,0.2);
      --tb-btn-text: #fff;
      --tb-btn-hover-bg: rgba(255,255,255,0.2);
      --tb-btn-hover-border: #fff;
      --tb-span-bg: rgba(255,255,255,0.1);
      --tb-span-border: rgba(255,255,255,0.2);
      --tb-span-text: #e0e7ff;
    }

    html,body{height:100%;min-height:100%;min-width:0;font-family:var(--font);font-size:14px;color:var(--ink);background:var(--bg); overflow: hidden;}
    .shell{display:flex;height:100vh;height:100dvh;min-width:0;min-height:0;overflow:hidden}

    /* Sidebar */
    .sidebar{ width:var(--sidebar-w); background:var(--sidebar-bg); border-right: 1px solid var(--border); display:flex;flex-direction:column; transition:width var(--transition); overflow:hidden; flex-shrink:0; z-index:30; box-shadow: 2px 0 10px rgba(0,0,0,0.05); }
    .sidebar.collapsed{width:var(--sidebar-collapsed)}
    .sb-header{ height:var(--topbar-h); display:flex;align-items:center; padding:0 12px;gap:8px; border-bottom:1px solid var(--border); flex-shrink:0; transition: padding var(--transition); cursor: pointer; }
    .sb-login-entry{display:flex;align-items:center;gap:8px;min-width:0;flex:1;text-decoration:none;color:inherit;}
    .sb-logo-group{ display:flex; gap:4px; align-items:center; flex-shrink:0; transition: transform 0.2s; }
    .sb-logo-img{ width:32px; height:32px; background:#fff; border-radius:50%; padding:2px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
    .sb-title{ white-space:nowrap;overflow:hidden; line-height:1.2; flex:1; transition: opacity var(--transition); }
    .sb-title span{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:2px}
    .sb-title #app-province-name{font-size:14px;font-weight:900;color:var(--ink);margin-top:0;letter-spacing:.01em}
    .sb-toggle{ margin-left:auto;flex-shrink:0; width:30px;height:30px;border-radius:6px; border:none;background:transparent; color:var(--muted);cursor:pointer; display:flex;align-items:center;justify-content:center; transition:all 0.2s; }
    .sb-toggle:hover{background:var(--sidebar-hover-bg);color:var(--ink); transform: scale(1.05);}
    
    .sidebar.collapsed .sb-header { padding: 0; justify-content: center; }
    .sidebar.collapsed .sb-title { display: none; } 
    .sidebar.collapsed .sb-toggle { display: none; } 
    .sidebar.collapsed .sb-logo-group { margin: 0 auto; } 
    .sidebar.collapsed .sb-logo-group:hover { transform: scale(1.1); } 
    
    .sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 10px}
    .sb-nav::-webkit-scrollbar{width:3px} .sb-nav::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
    .sb-section{ font-size:10px;font-weight:700;letter-spacing:.05em; color:var(--sidebar-section); padding:12px 10px 6px; text-transform:uppercase; white-space:nowrap;overflow:hidden; transition:color var(--transition); position:relative; }
    .sb-section::after { content:''; position:absolute; left:16px; right:16px; top:50%; height:1px; background:var(--border); opacity:0; transition:opacity var(--transition); pointer-events:none; }
    .sidebar.collapsed .sb-section{ color:transparent; }
    .sidebar.collapsed .sb-section::after{ opacity:1; }
    .sidebar.collapsed .sb-section:first-of-type::after{ opacity:0; }
    .nav-item{ display:flex;align-items:center;gap:10px; padding:8px 12px;border-radius:var(--radius); color:var(--sidebar-item); cursor:pointer; transition:all var(--transition); white-space:nowrap; user-select:none; position:relative; margin-bottom: 2px; }
    .nav-item:hover{background:var(--sidebar-hover-bg);color:var(--ink)}
    .nav-item.active{ background:var(--sidebar-active-bg); color:var(--sidebar-active); font-weight: 600;}
    .nav-item.active::before{ content:'';position:absolute;left:0;top:50%;transform:translateY(-50%); width:3px;height:60%;background:var(--blue-mid);border-radius:0 3px 3px 0; }
    .nav-item svg{width:16px;height:16px;flex-shrink:0}
    .nav-label{font-size:13px;overflow:hidden;text-overflow:ellipsis}
    .nav-badge{ margin-left:auto;font-size:10px;font-weight:700; background:rgba(59,130,246,.2);color:var(--blue-mid); padding:2px 8px;border-radius:999px; }
    .sidebar.collapsed .nav-label,.sidebar.collapsed .nav-badge{display:none}
    .sb-footer{ padding:10px; border-top:1px solid var(--border); flex-shrink:0; }
    .sb-user{ display:flex;align-items:center;gap:10px; padding:8px;border-radius:var(--radius); cursor:pointer; transition:background var(--transition); }
    .sb-user:hover{background:var(--sidebar-hover-bg)}
    .sb-avatar{ width:28px;height:28px;border-radius:50%; background:linear-gradient(135deg,#1d4ed8,#0ea5e9); display:flex;align-items:center;justify-content:center; flex-shrink:0; font-size:11px;font-weight:800;color:#fff; }
    .sb-user-info{overflow:hidden}
    .sb-user-name{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .sb-user-role{font-size:10px;color:var(--muted);white-space:nowrap}
    .sidebar.collapsed .sb-user-info{display:none}
    .sb-login-lock{margin-left:auto;flex:0 0 auto;color:#2563eb;font-size:14px;line-height:1}
    .sidebar.collapsed .sb-login-lock{display:none}

    /* Main & Topbar */
    .main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0}
    .topbar{ 
      height:var(--topbar-h); 
      background: var(--topbar-bg); 
      border-bottom: 4px solid var(--topbar-border);
      color: var(--topbar-text);
      display:flex;align-items:center; padding:0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));gap:12px; flex-shrink:0; z-index:20;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); 
    }
    .topbar-title{ font-size:22px;font-weight:800;color:var(--topbar-text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; flex:1; display:flex; align-items:center; gap:10px; letter-spacing:-0.01em;}
    .topbar-title span{font-size:13px;font-weight:600;color:var(--tb-span-text); background:var(--tb-span-bg); padding: 2px 10px; border-radius: 999px; border: 1px solid var(--tb-span-border);}
    
    .live-dot{ display:inline-flex;align-items:center;gap:4px; font-size:11px;font-weight:700;color:var(--green); background: var(--green-light); padding: 4px 8px; border-radius: 999px; border:1px solid rgba(34,197,94,0.5);}
    .dark .live-dot { color: #fff; background: rgba(34,197,94,0.3); }
    .live-dot::before{ content:'';width:6px;height:6px;border-radius:50%; background:#4ade80; box-shadow:0 0 0 2px rgba(74,222,128,.25); animation:pulse 2s infinite; }
    @keyframes pulse{0%,100%{box-shadow:0 0 0 2px rgba(74,222,128,.25)}50%{box-shadow:0 0 0 5px rgba(74,222,128,.08)}}
    
    .topbar-btns{display:flex;align-items:center;gap:10px}
    .tb-btn{ display:inline-flex;align-items:center;gap:6px; padding:6px 12px;border-radius:var(--radius); font-size:12px;font-weight:700;cursor:pointer; border:1px solid var(--tb-btn-border); background:var(--tb-btn-bg); color:var(--tb-btn-text); text-decoration:none; transition:all var(--transition); }
    .tb-btn:hover{background:var(--tb-btn-hover-bg); border-color:var(--tb-btn-hover-border); transform: translateY(-1px);}
    .tb-btn svg{width:14px;height:14px}
    #theme-btn{ width:32px;height:32px;padding:0; display:flex;align-items:center;justify-content:center; border-radius: 50%;}

    /* Content Area & Cards */
    .content{ flex:1; min-width:0; min-height:0; overflow:hidden; padding:16px max(24px, env(safe-area-inset-right)) 16px max(24px, env(safe-area-inset-left)); background:var(--bg); display: flex; flex-direction: column; }
    .content.has-active-iframe{overflow:hidden;}
    .view{display:none; height: 100%; min-width:0; min-height:0; flex-direction: column;}
    .view.active{display:flex; animation: fadeUp .3s ease both;}
    
    .kpi-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:12px; flex-shrink: 0; }
    @media(max-width:1024px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    .kpi{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 16px; display:flex;flex-direction:column;gap:4px; transition:all var(--transition); position:relative;overflow:hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); }
    .kpi:hover{transform: translateY(-2px); box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.08);}
    .kpi::after{ content:'';position:absolute;left:0;top:0;bottom:0;width:4px; border-radius:4px 0 0 4px; }
    .kpi.y::after{background:#f59e0b} .kpi.g::after{background:#22c55e} .kpi.b::after{background:#3b82f6} .kpi.r::after{background:#ef4444}
    .kpi.p::after{background:#8b5cf6}
    .kpi-row{display:flex;justify-content:space-between;align-items:center}
    .kpi-label{font-size:12px;color:var(--muted);font-weight:700; font-family: var(--font);}
    .kpi-icon{ width:28px;height:28px;border-radius:6px; display:flex;align-items:center;justify-content:center; flex-shrink:0; }
    .kpi-icon svg{width:14px;height:14px}
    .kpi-val{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1; font-family: var(--mono);}
    .kpi-sub{font-size:11px;color:var(--muted);font-weight: 500;}

    /* Custom Layouts */
    .grid-3col { display: flex; gap: 12px; margin-bottom: 12px; flex: 1; min-height: 0; }
    .grid-3col > .card { flex: 1; min-width: 0; }
    
    .grid-25-35-40 { display: flex; gap: 12px; margin-bottom: 0; flex: 1.2; min-height: 0; }
    .grid-25-35-40 > .card:nth-child(1) { flex: 2.5; min-width: 0; }
    .grid-25-35-40 > .card:nth-child(2) { flex: 3.5; min-width: 0; } 
    .grid-25-35-40 > .card:nth-child(3) { flex: 4.0; min-width: 0; }

    @media(max-width: 960px) { 
      .content { overflow-y: auto; display: block; }
      .view { height: auto; display: block;}
      .grid-3col, .grid-25-35-40 { display: grid; grid-template-columns: 1fr; height: auto; flex: none; gap: 12px;}
      .chart-box { min-height: 250px; }
    }

    .card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.02); display:flex; flex-direction:column;}
    .card-hd{ display:flex;align-items:center;justify-content:space-between; padding:10px 16px;border-bottom:1px solid var(--border); background: var(--surface2); }
    .card-title{font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:6px; font-family: var(--font);}
    .card-title svg{width:14px;height:14px;color:var(--muted)}
    .card-body{padding:12px; flex:1; display:flex; flex-direction:column; overflow:hidden;} .card-body.p0{padding:0}

    /* Charts & Donuts */
    .donut-wrap{position:relative;width:150px;height:150px;margin:0 auto}
    .donut-wrap svg{transform:rotate(-90deg); width: 100%; height: 100%;}
    .donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
    .donut-pct{font-size:26px;font-weight:800;line-height:1; font-family: var(--mono);}
    .donut-lbl{font-size:13px;color:var(--muted);margin-top:4px; font-weight: 600;}
    .chart-box{position:relative;height:100%; width: 100%; flex:1; min-height: 0;}
    .trend-legend{display:flex;gap:16px;align-items:center;flex-wrap:nowrap;white-space:nowrap;padding:10px 16px 0; justify-content:center;}
    .legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
    .legend-label{font-size:12px;color:var(--ink);font-weight:600}

    /* Tables */
    .tbl-wrap{overflow:auto; flex:1; min-height: 0;}
    table{width:100%;border-collapse:collapse;font-size:12px}
    th { padding:8px 12px;text-align:left; background:#f0f9ff; color:#1e3a8a; font-weight:800; border:none; box-shadow: inset 0 -2px 0 #3b82f6; white-space:nowrap; position:sticky; top:0; z-index:10;}
th.sortable { cursor: pointer; user-select: none; padding-right: 22px !important; transition: background 0.2s; }
    th.sortable:hover { background: #e0f2fe; }
    .dark th.sortable:hover { background: #1e293b; }
    th.sortable::after { content: '↕'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 14px; opacity: 0.5; display: inline-block; font-family: sans-serif; }
    th.sortable.asc::after { content: '▲'; color: #3b82f6; opacity: 1; font-size: 11px; }
    th.sortable.desc::after { content: '▼'; color: #3b82f6; opacity: 1; font-size: 11px; }
    .dark th { background:#0f172a; color:#cbd5e1; border:none; box-shadow: inset 0 -2px 0 #3b82f6; }
    th.r{text-align:right}
    td{padding:6px 12px;border-bottom:1px solid var(--border);vertical-align:middle; color: var(--ink);}
    td.r{text-align:right;font-family:var(--mono);font-size:13px; font-weight: 600;}
    .project-name-toggle{
      display:block;
      max-width:100%;
      max-height:1.5em;
      line-height:1.5;
      overflow:hidden;
      overflow-wrap:anywhere;
      text-overflow:ellipsis;
      white-space:nowrap;
      cursor:zoom-in;
    }
    .project-name-toggle.is-expanded{
      max-height:none;
      overflow:visible;
      text-overflow:clip;
      white-space:normal;
      cursor:zoom-out;
    }
    tr:last-child td{border-bottom:none}
    tr:nth-child(even) td { background-color: #f8fafc; }
    .dark tr:nth-child(even) td { background-color: rgba(255, 255, 255, 0.02); }
    tr:hover td {background:var(--blue-light) !important; color: var(--blue) !important;}
    .dark tr:hover td {background:rgba(255,255,255,0.05) !important; color: var(--blue-mid) !important;}
    .tbl-foot td{ background:var(--surface2); font-weight:800; border:none; box-shadow: inset 0 2px 0 var(--border2); font-size: 13px; position:sticky; bottom:0; z-index:10;}

    .badge{ display:inline-flex;align-items:center; padding:2px 8px;border-radius:999px; font-size:11px;font-weight:700; }
    .badge.ok{background:var(--green-light);color:var(--green)}
    .badge.warn{background:var(--amber-light);color:var(--amber)}
    .badge.low{background:var(--red-light);color:var(--red)}
    .badge.info{background:var(--blue-light);color:var(--blue)}

    /* CSS สำหรับ Iframe */
    #view-activity, #view-plan, #view-spending_summary, #view-budget, #view-trend_analysis, #view-datatable, #view-loan_tracking {
        margin: -16px -24px;
        height: calc(100% + 32px);
        width: calc(100% + 48px);
        max-width: none;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }
    .view.iframe-content-active { min-width:0; min-height:0; overflow:hidden; }
    .iframe-wrapper { 
        width: 100%; 
        height: 100%; 
        min-width: 0;
        min-height: 0;
        border: none; 
        border-radius: 0; 
        background: transparent; 
        box-shadow: none; 
        display: block; 
    }

    /* Popovers & Filters */
    .filter-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
    .chip{ display:inline-flex;align-items:center;gap:4px; padding:4px 12px;border-radius:999px; font-size:12px;font-weight:700;cursor:pointer; border:1px solid var(--border2); background:var(--surface);color:var(--muted); transition:all var(--transition); }
    .chip:hover,.chip.active{ background:var(--blue-light); border-color:var(--blue-mid); color:var(--blue); }
    .dark .chip:hover,.dark .chip.active{ background:var(--blue-light); color:var(--blue); }

    .btn-filter-local {
        background: var(--surface); border: 1px solid var(--border2); color: var(--ink); padding: 6px 12px;
        border-radius: var(--radius); font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex;
        align-items: center; justify-content: space-between; transition: all 0.2s;
    }
    .btn-filter-local:hover { border-color: var(--blue-mid); background: var(--blue-light); color: var(--blue-mid); }
    .dark .btn-filter-local { background: rgba(255,255,255,0.03); border-color: #334155; }
    .dark .btn-filter-local:hover { background: rgba(59,130,246,0.1); border-color: var(--blue-mid); color: var(--blue-mid); }

    .btn-excel { padding: 6px 12px; border-radius: var(--radius); font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; background: var(--green); border: 1px solid var(--green); color: #fff; }
    .btn-excel:hover { background: #166534; border-color: #166534; }
    .dark .btn-excel { background: rgba(34, 197, 94, 0.1); border: 1px solid var(--green); color: #4ade80; }
    .dark .btn-excel:hover { background: rgba(34, 197, 94, 0.2); }

        .popover{ position:absolute; left:0; top:100%; margin-top:8px; width:280px; background:var(--surface); border:1px solid var(--border2); border-radius:10px; box-shadow:0 10px 25px rgba(0,0,0,.15); z-index:99999; display:none; color:var(--ink); overflow:hidden; }
    .popover.show{ display:block; animation: fadeUp 0.15s ease-out; z-index:99999; }
    #view-districts{ min-height:0; overflow:hidden; }
    #view-districts > .card{ overflow:visible; position:relative; z-index:1; min-height:0; height:100%; display:flex; flex-direction:column; }
    #view-districts > .card > .card-hd{ overflow:visible; position:relative; z-index:1000; flex-shrink:0; }
    #view-districts > .card > div:nth-child(2){ flex-shrink:0; }
    #view-districts > .card > div:nth-child(3){ flex:1; min-height:0; overflow:auto; }
    #view-districts #district-grid{ min-height:0; }
    #view-districts #district-grid .tbl-wrap{ flex:1; min-height:0; overflow:auto; }
    #view-districts #districtPopover{ z-index:99999; }
    .right-popover { left: auto; right: 0; }
    .popover .hdr{ background:var(--blue-light); border-bottom:1px solid var(--border); padding:8px 12px; font-weight:800; font-size:12px; color:var(--blue-mid); }
    .dark .popover .hdr { background:var(--surface2); color:var(--blue-mid); border-bottom:1px solid var(--border2); }
    .popover .body{ padding:10px; max-height: 250px; overflow-y:auto; }
    .popover .ftr { padding: 8px 12px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--surface2); gap: 8px; }
    .popover-item{ display:flex; align-items:center; gap:8px; padding:6px 8px; cursor:pointer; font-weight:600; font-size: 12px; color:var(--ink); border-radius:6px; margin-bottom:2px; transition:0.1s; }
    .popover-item:hover{ background:var(--blue-light); color:var(--blue); }
    .dark .popover-item:hover{ background:var(--surface2); color:var(--blue-mid); }
    
    .btn-pop-action { font-size: 11px; font-weight: 800; cursor: pointer; transition: color 0.2s; white-space: nowrap; background:none; border:none;}
    .btn-pop-action.blue { color: var(--blue-mid); } .btn-pop-action.blue:hover { text-decoration: underline; }
    .btn-pop-action.red { color: var(--red); } .btn-pop-action.red:hover { text-decoration: underline; }
    
    .empty{text-align:center;padding:40px 20px;color:var(--muted); font-weight: 600; font-size: 12px;}
    .empty svg{width:36px;height:36px;margin:0 auto 12px;opacity:.5}

    @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
    
    /* Skeleton Loading Animation */
    @keyframes shimmer {
      0% { background-position: -1000px 0; }
      100% { background-position: 1000px 0; }
    }
    .skeleton {
      animation: shimmer 2s infinite linear;
      background: linear-gradient(to right, #e2e8f0 4%, #cbd5e1 25%, #e2e8f0 36%);
      background-size: 1000px 100%;
      color: transparent !important;
      border-radius: 4px;
      display: inline-block;
      min-width: 50px;
    }
    .dark .skeleton {
      background: linear-gradient(to right, #1e293b 4%, #334155 25%, #1e293b 36%);
      background-size: 1000px 100%;
    }
/* ========================================= */
    /* RESPONSIVE & MOBILE UI (CLEAN VERSION) */
    /* ========================================= */
    .tbl-wrap table { min-width: 650px; }

    /* --- Desktop Behavior --- */
    /* เมื่อหุบเมนูบนคอมพิวเตอร์ ซ่อนปุ่ม Hamburger (เพื่อให้โลโก้เด่นตรงกลาง) */
    .sidebar.collapsed .sb-toggle { display: none !important; }

    /* --- Mobile Behavior (<= 960px) --- */
    /* แก้ไขปัญหาหน้าเว็บยาว (ทุกหน้าโชว์พร้อมกันบนมือถือ) */
    @media(max-width: 960px) {
        .view { display: none !important; }
        .view.active { display: flex !important; flex-direction: column; }
    }

    /* --- Mobile Behavior (<= 768px) --- */
    @media (max-width: 768px) {
        /* ซ่อน Sidebar ไปด้านซ้าย */
        .sidebar {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            transform: translateX(-100%);
            box-shadow: 10px 0 25px rgba(0,0,0,0.5);
            z-index: 40;
        }
        /* คลาสสำหรับสไลด์เมนูออกมา */
        .sidebar.mobile-open {
            transform: translateX(0);
            width: var(--sidebar-w);
        }
        
        /* ป้องกันคลาส collapsed ตีกันบนมือถือ */
        .sidebar.collapsed { width: var(--sidebar-w); transform: translateX(-100%); }

        /* โชว์ปุ่ม Hamburger บน Topbar (มุมซ้ายบน) */
        #mobileMenuBtn { display: inline-flex !important; }

        /* โชว์ปุ่ม Hamburger ใน Sidebar เสมอเวลาเมนูกางออกมาบนมือถือ */
        .sb-toggle { display: flex !important; }

        /* ปรับ Topbar */
        .topbar { padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
        .topbar-title { font-size: 16px; gap: 6px; }
        .topbar-title span { display: none; }
        .topbar-btns { gap: 6px; }
        .tb-btn span { display: none; }

        /* ปรับ กราฟ / KPI */
        .content { padding:12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
        .kpi-grid { grid-template-columns: 1fr; }
        .donut-wrap { width: 120px; height: 120px; }
        #view-activity, #view-plan, #view-spending_summary, #view-budget, #view-trend_analysis, #view-datatable, #view-loan_tracking {
            margin:-12px;
            height:calc(100% + 24px);
            width:calc(100% + 24px);
        }

        /* Modal Popover กลางจอ */
        .popover {
            position: fixed;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: 90vw;
            max-width: 320px;
            margin: 0;
            z-index: 1000;
            box-shadow: 0 0 0 100vw rgba(0,0,0,0.6);
        }
        .popover.show { animation: popCenter 0.2s ease-out; }
        .filter-bar { gap: 4px; }
        .chip { font-size: 11px; padding: 4px 8px; }
    }

    @media (max-height: 560px) and (orientation: landscape) {
        .sb-header, .topbar { height:48px; }
        .sb-nav { padding-top:4px; padding-bottom:4px; }
        .sb-section { padding-top:6px; padding-bottom:4px; }
        .nav-item { padding-top:6px; padding-bottom:6px; }
        .content { padding-top:8px; padding-bottom:8px; }
        .kpi-grid { gap:8px; margin-bottom:8px; }
        .kpi { padding:8px 12px; }
        .kpi-val { font-size:18px; }
    }

    @keyframes popCenter { 
        from { opacity: 0; transform: translate(-50%, -40%) !important; } 
        to { opacity: 1; transform: translate(-50%, -50%) !important; } 
    }