/* ============================================================
   SRC App Styles — src-* + ap-* tokens + utilities
   ============================================================
   Extracted from index.html on 2026-05-21 as Phase A of HTML
   split. Includes:
     - CSS custom properties (--src-*, --ap-*)
     - Apple-style typography utilities (.ap-display, .ap-body, ...)
     - App utilities (.src-gradient, .card, .modal-overlay, ...)
     - Mobile/responsive overrides
     - Safe-area for notch phones
   ============================================================ */
  :root{
    --src-primary:#0f2a5f;
    --src-primary-dark:#0a1f47;
    --src-accent:#d4a447;
    --src-accent-light:#f0c96a;
    --src-bg:#f7f8fb;
    /* === Apple-inspired tokens (used by .ap-* utilities below) === */
    --ap-action:#0066cc;
    --ap-action-focus:#0071e3;
    --ap-action-on-dark:#2997ff;
    --ap-ink:#1d1d1f;
    --ap-ink-muted-80:#333333;
    --ap-ink-muted-48:#7a7a7a;
    --ap-canvas:#ffffff;
    --ap-parchment:#f5f5f7;
    --ap-pearl:#fafafc;
    --ap-hairline:#e0e0e0;
    --ap-divider-soft:#f0f0f0;
  }
  body{font-family:'Noto Sans Thai','Noto Sans Lao','Noto Sans Myanmar','Segoe UI',Tahoma,sans-serif;background:var(--src-bg);}
  /* === Apple typography utilities — negative letter-spacing คือ signature ของ Apple === */
  .ap-display{font-size:34px;font-weight:600;line-height:1.1;letter-spacing:-0.374px;color:var(--ap-ink);}
  .ap-display-lg{font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-0.4px;color:var(--ap-ink);}
  .ap-tagline{font-size:21px;font-weight:600;line-height:1.19;letter-spacing:-0.2px;color:var(--ap-ink);}
  .ap-body{font-size:17px;font-weight:400;line-height:1.47;letter-spacing:-0.374px;color:var(--ap-ink);}
  .ap-body-strong{font-size:17px;font-weight:600;line-height:1.24;letter-spacing:-0.374px;color:var(--ap-ink);}
  .ap-caption{font-size:14px;font-weight:400;line-height:1.43;letter-spacing:-0.224px;color:var(--ap-ink-muted-48);}
  .ap-caption-strong{font-size:14px;font-weight:600;line-height:1.29;letter-spacing:-0.224px;color:var(--ap-ink);}
  .ap-metric{font-size:48px;font-weight:600;line-height:1;letter-spacing:-0.5px;color:var(--ap-ink);font-variant-numeric:tabular-nums;}
  /* === Apple components === */
  .ap-card{background:var(--ap-canvas);border:1px solid var(--ap-hairline);border-radius:18px;padding:24px;}
  .ap-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--ap-action);color:#fff;font-size:17px;font-weight:400;letter-spacing:-0.374px;padding:11px 22px;border-radius:9999px;transition:transform .15s ease,background-color .15s ease;}
  .ap-pill:hover{background:var(--ap-action-focus);}
  .ap-pill:active{transform:scale(0.96);}
  .ap-pill-ghost{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--ap-action);border:1px solid var(--ap-action);font-size:17px;font-weight:400;letter-spacing:-0.374px;padding:11px 22px;border-radius:9999px;transition:background-color .15s ease;}
  .ap-pill-ghost:hover{background:rgba(0,102,204,0.06);}
  .ap-link{color:var(--ap-action);font-weight:400;letter-spacing:-0.374px;}
  .ap-link:hover{text-decoration:underline;}
  .ap-divider{height:1px;background:var(--ap-divider-soft);width:100%;}
  .src-bg-primary{background-color:var(--src-primary);}
  .src-bg-primary-dark{background-color:var(--src-primary-dark);}
  .src-text-primary{color:var(--src-primary);}
  .src-bg-accent{background-color:var(--src-accent);}
  .src-text-accent{color:var(--src-accent);}
  .src-border-primary{border-color:var(--src-primary);}
  .src-gradient{background:linear-gradient(135deg,#0f2a5f 0%,#1e4488 50%,#0a1f47 100%);}
  .step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;transition:all .3s;font-size:.85rem;}
  @media (min-width:640px){.step-circle{width:40px;height:40px;font-size:1rem;}}
  .step-active{background:var(--src-accent);color:#fff;transform:scale(1.1);box-shadow:0 4px 12px rgba(212,164,71,.4);}
  .step-done{background:#10b981;color:#fff;}
  .step-pending{background:#e5e7eb;color:#9ca3af;}
  .step-line{height:3px;flex:1;transition:all .3s;}
  .line-done{background:#10b981;}
  .line-pending{background:#e5e7eb;}
  .card{background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(15,42,95,.08);}
  .input-field{width:100%;padding:.75rem 1rem;border:1.5px solid #d1d5db;border-radius:8px;transition:all .2s;}
  .input-field:focus{outline:none;border-color:var(--src-primary);box-shadow:0 0 0 3px rgba(15,42,95,.1);}
  .btn-primary{background:var(--src-primary);color:#fff;padding:.75rem 1.75rem;border-radius:8px;font-weight:600;transition:all .2s;}
  .btn-primary:hover{background:var(--src-primary-dark);transform:translateY(-1px);}
  .btn-primary:disabled{background:#9ca3af;cursor:not-allowed;transform:none;}
  .btn-accent{background:var(--src-accent);color:#fff;padding:.75rem 1.75rem;border-radius:8px;font-weight:600;transition:all .2s;}
  .btn-accent:hover{background:var(--src-accent-light);}
  .btn-outline{background:#fff;color:var(--src-primary);border:1.5px solid var(--src-primary);padding:.75rem 1.75rem;border-radius:8px;font-weight:600;transition:all .2s;}
  .btn-outline:hover{background:#f3f4f6;}
  .badge{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600;}
  .badge-pending{background:#fef3c7;color:#92400e;}
  .badge-review{background:#dbeafe;color:#1e40af;}
  .badge-approve{background:#d1fae5;color:#065f46;}
  .badge-reject{background:#fee2e2;color:#991b1b;}
  .badge-active{background:#e0e7ff;color:#3730a3;}
  .accordion-item{border:1px solid #e5e7eb;border-radius:8px;margin-bottom:.5rem;overflow:hidden;}
  .accordion-header{padding:1rem;background:#f9fafb;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;}
  .accordion-content{padding:1rem;background:#fff;border-top:1px solid #e5e7eb;font-size:.9rem;line-height:1.7;}
  .progress-bar{height:12px;background:#e5e7eb;border-radius:9999px;overflow:hidden;}
  .progress-fill{height:100%;background:linear-gradient(90deg,#10b981,#34d399);transition:width .5s;}
  .strength-meter{display:flex;gap:4px;margin-top:.5rem;}
  .strength-seg{flex:1;height:6px;border-radius:3px;background:#e5e7eb;transition:all .3s;}
  .s1{background:#ef4444;} .s2{background:#f59e0b;} .s3{background:#3b82f6;} .s4{background:#10b981;}
  .tab-btn{padding:.75rem 1.5rem;border-bottom:3px solid transparent;font-weight:600;color:#6b7280;transition:all .2s;cursor:pointer;}
  .tab-btn.active{border-bottom-color:var(--src-accent);color:var(--src-primary);}
  .lang-btn{padding:.25rem .75rem;border-radius:6px;font-size:.85rem;font-weight:600;transition:all .2s;cursor:pointer;}
  .lang-btn.active{background:var(--src-accent);color:#fff;}
  .lang-btn:not(.active){background:rgba(255,255,255,.1);color:#fff;}
  .lang-btn:not(.active):hover{background:rgba(255,255,255,.2);}
  .table-srsc{width:100%;border-collapse:collapse;}
  .table-srsc th{background:var(--src-primary);color:#fff;padding:.75rem;text-align:left;font-weight:600;font-size:.85rem;}
  .table-srsc td{padding:.75rem;border-bottom:1px solid #e5e7eb;font-size:.9rem;}
  .table-srsc tr:hover{background:#f9fafb;}
  .stat-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 10px rgba(0,0,0,.05);border-left:4px solid var(--src-accent);}
  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:50;}
  .modal-content{background:#fff;border-radius:12px;max-width:600px;width:90%;max-height:90vh;overflow-y:auto;position:relative;}
  /* ★ Disabled state — explicit so user เห็นชัดเจน */
  button:disabled, .btn-primary:disabled, .btn-outline:disabled, .btn-accent:disabled{opacity:.5;cursor:not-allowed;}
  .fade-in{animation:fadeIn .3s ease-in;}
  @keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
  /* Tab switch transition — เร็วและนุ่ม สำหรับสลับ tab admin */
  .tab-fade{animation:tabFade 220ms cubic-bezier(0.22,0.61,0.36,1);}
  @keyframes tabFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  /* Bottom sheet — backdrop fade + sheet slide-up (iOS Modal feel) */
  .sheet-backdrop{animation:sheetBackdrop 200ms ease-out;}
  @keyframes sheetBackdrop{from{opacity:0;}to{opacity:1;}}
  .sheet-slide{animation:sheetSlide 320ms cubic-bezier(0.22,0.61,0.36,1);}
  @keyframes sheetSlide{from{transform:translateY(100%);}to{transform:translateY(0);}}
  .sheet-backdrop-out{animation:sheetBackdropOut 220ms ease-in forwards;}
  @keyframes sheetBackdropOut{from{opacity:1;}to{opacity:0;}}
  .sheet-slide-out{animation:sheetSlideOut 280ms cubic-bezier(0.55,0.06,0.68,0.19) forwards;}
  @keyframes sheetSlideOut{from{transform:translateY(0);}to{transform:translateY(100%);}}
  /* iOS-style HUD overlay — centered success popup, frosted glass, scale pop */
  @keyframes hud-fade{from{opacity:0;}to{opacity:1;}}
  @keyframes hud-pop{from{opacity:0;transform:scale(.82);}60%{opacity:1;transform:scale(1.04);}to{opacity:1;transform:scale(1);}}
  @media (prefers-reduced-motion:reduce){
    .tab-fade,.fade-in,.sheet-backdrop,.sheet-slide,.sheet-backdrop-out,.sheet-slide-out{animation:none;}
  }
  @keyframes slideInRight{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}

  /* ★ Skeleton shimmer — gradient sweep ที่นุ่มกว่า animate-pulse opacity เพราะ
     ตา human ไวต่อ luminance ที่ทอด-เคลื่อนไหวมากกว่า opacity blink.
     Apply ลง placeholder div (รวม dimension ผ่าน Tailwind h- w- หรือ inline).
     Auto-fallback ลด motion สำหรับผู้ใช้ที่ปิด animation. */
  .src-shimmer{
    position:relative;
    overflow:hidden;
    background-color:#e9ecef;
    background-image:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0) 100%);
    background-size:200% 100%;
    background-repeat:no-repeat;
    background-position:-150% 0;
    animation:srcShimmerSweep 1.4s linear infinite;
    border-radius:6px;
    color:transparent;
    user-select:none;
  }
  .src-shimmer-dark{background-color:#374151;}
  .src-shimmer-light{background-color:#f1f3f5;}
  @keyframes srcShimmerSweep{
    0%   {background-position:-150% 0;}
    100% {background-position: 150% 0;}
  }
  @media (prefers-reduced-motion:reduce){
    .src-shimmer{animation:none;opacity:.7;}
  }

  .checkbox-custom{width:20px;height:20px;accent-color:var(--src-primary);}
  .required::after{content:' *';color:#ef4444;}
  .sidebar-item{padding:.75rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.75rem;font-weight:500;}
  .sidebar-item:hover{background:rgba(255,255,255,.1);}
  .sidebar-item.active{background:var(--src-accent);color:#fff;}

  /* ===== A11y — keyboard focus indicators (only for keyboard nav, not mouse) ===== */
  /* ใช้ accent gold เพื่อ contrast สูงทั้งบน navy gradient และพื้นขาว */
  :focus{outline:none;}
  :focus-visible{outline:2px solid var(--src-accent);outline-offset:2px;border-radius:4px;}
  .btn-primary:focus-visible,
  .btn-accent:focus-visible,
  .btn-outline:focus-visible,
  .lang-btn:focus-visible,
  .tab-btn:focus-visible,
  .sidebar-item:focus-visible,
  .card:focus-visible,
  .accordion-header:focus-visible,
  .mobile-bottom-nav button:focus-visible{
    outline:2px solid var(--src-accent);
    outline-offset:2px;
    box-shadow:0 0 0 4px rgba(212,164,71,.25);
  }
  /* Input fields ใช้ :focus (มี indicator ตลอดเวลาขณะ focus เพราะ user กำลังพิมพ์) */
  .input-field:focus-visible{outline:none;}
  /* Touch tap highlight — ตัดสีเทาบน iOS Safari */
  button,a,[role="button"]{-webkit-tap-highlight-color:transparent;}

  @media print{.no-print{display:none!important;}}

  /* ===== RESPONSIVE — Mobile First ===== */
  /* Touch-friendly targets */
  @media (max-width:768px){
    .btn-primary,.btn-accent,.btn-outline{padding:.85rem 1.25rem;font-size:.95rem;min-height:44px;}
    .input-field{padding:.85rem 1rem;font-size:1rem;min-height:44px;}
    .lang-btn{padding:.6rem .9rem;font-size:.85rem;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
    .card{border-radius:10px;}
    /* ★ Mobile bottom sheet — rounded top + drag handle + slide-up animation */
    .modal-content{width:100%;max-height:92vh;border-radius:16px 16px 0 0;margin:0;animation:slideUpSheet .25s ease-out;}
    .modal-content::before{
      content:'';display:block;width:36px;height:4px;background:rgba(0,0,0,.18);
      border-radius:2px;margin:8px auto 0;flex-shrink:0;
    }
    .modal-overlay{align-items:flex-end;}
    @keyframes slideUpSheet{from{transform:translateY(100%);}to{transform:translateY(0);}}
    .container{padding-left:12px;padding-right:12px;}
  }

  /* Mobile table → card layout */
  @media (max-width:640px){
    .table-srsc thead{display:none;}
    .table-srsc tbody tr{display:block;margin-bottom:.75rem;border:1px solid #e5e7eb;border-radius:10px;padding:.75rem;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06);}
    .table-srsc tbody td{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;border-bottom:1px solid #f3f4f6;font-size:.85rem;}
    .table-srsc tbody td:last-child{border-bottom:none;padding-top:.5rem;}
    .table-srsc tbody td::before{content:attr(data-label);font-weight:600;color:#6b7280;font-size:.75rem;text-transform:uppercase;flex-shrink:0;margin-right:.75rem;}
    /* Fallback for tables without data-label */
    .resp-card thead{display:none;}
    .resp-card tbody tr{display:block;margin-bottom:.75rem;border:1px solid #e5e7eb;border-radius:10px;padding:.75rem;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06);}
    .resp-card tbody td{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;border-bottom:1px solid #f3f4f6;font-size:.85rem;}
    .resp-card tbody td:last-child{border-bottom:none;}
    .resp-card tbody td::before{content:attr(data-label);font-weight:600;color:#6b7280;font-size:.75rem;margin-right:.75rem;}
  }

  /* Mobile bottom tab bar — sized for thumb-friendly mobile use (Apple HIG 44pt min) */
  .mobile-bottom-nav{display:none;}
  @media (max-width:768px){
    .mobile-bottom-nav{
      display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;
      border-top:1px solid #e5e7eb;z-index:40;padding:.375rem .5rem .25rem;
      padding-bottom:max(.5rem,env(safe-area-inset-bottom));
      box-shadow:0 -2px 12px rgba(0,0,0,.06);
      gap:4px;
    }
    .mobile-bottom-nav button{
      flex:1;min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
      padding:.4rem .25rem;border-radius:10px;font-size:.7rem;font-weight:500;line-height:1.1;
      color:#6b7280;background:transparent;border:none;cursor:pointer;transition:all .2s;
      white-space:nowrap;
    }
    .mobile-bottom-nav button:active{transform:scale(0.94);background:rgba(0,0,0,0.04);}
    .mobile-bottom-nav button.active{color:var(--ap-action);font-weight:600;background:transparent;}
    .mobile-bottom-nav.admin button.active{color:var(--src-primary);}
    .mobile-bottom-nav.admin button.active::after{content:'';position:absolute;bottom:1px;left:50%;transform:translateX(-50%);width:26px;height:3px;background:var(--src-accent);border-radius:2px;}
    .mobile-bottom-nav.admin button{position:relative;}
    .mobile-bottom-nav button span.tab-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;}
    .mobile-bottom-nav button span.tab-icon svg{width:22px;height:22px;}
    .desktop-tabs{display:none;}
    body{padding-bottom:80px;}
  }
  @media (min-width:769px){
    .desktop-tabs{display:flex;flex-wrap:wrap;}
  }

  /* Mobile header */
  @media (max-width:640px){
    .header-user-info{display:none;}
    .header-logo-text .text-xl{font-size:1rem;}
    .header-logo-text .text-xs{font-size:.65rem;}
  }

  /* Stat cards responsive */
  @media (max-width:480px){
    .stat-grid-5{grid-template-columns:repeat(2,1fr);}
    .stat-grid-5>:last-child{grid-column:span 2;}
  }

  /* Safe area for notch phones */
  @supports(padding:max(0px)){
    body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
  }