/* EWEN: ส่วนกลางสำหรับสี ฟอนต์ และ Responsive Layout */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700&display=swap');:root{--blue:#174c9a;--deep:#102f63;--light:#eef4ff}body{font-family:'Prompt',system-ui,sans-serif;color:#20334e}.portal-bg,.auth-body{min-height:100vh;background:linear-gradient(135deg,#f5f8ff,#e7f0ff)}.brand-symbol,.brand-mini{display:grid;place-items:center;background:linear-gradient(135deg,#1d5db8,#0d346f);color:white;font-weight:700;border-radius:17px}.brand-symbol{width:64px;height:64px;font-size:2rem}.brand-mini{width:36px;height:36px;flex-shrink:0}.portal-card,.auth-card,.surface-card{background:#fff;border:1px solid #e2eaf7;border-radius:22px;box-shadow:0 14px 45px rgba(26,62,118,.07);padding:32px}.portal-card{transition:transform .2s}.portal-card:hover{transform:translateY(-4px)}.portal-icon{font-size:2.2rem;color:var(--blue);margin-bottom:18px}.btn-primary{background:var(--blue);border-color:var(--blue)}.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(100%,480px)}.dashboard-body{background:#f4f7fc}.app-shell{display:flex;min-height:100vh}.app-sidebar{width:258px;background:var(--deep);color:#fff;flex-shrink:0;transition:width .2s;min-height:100vh}.sidebar-brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;padding:22px 18px;font-weight:700;white-space:nowrap}.app-sidebar .nav-link{color:#dce7fa;border-radius:10px;display:flex;align-items:center;gap:14px;padding:12px;white-space:nowrap}.app-sidebar .nav-link:hover{color:white;background:#234a82}.nav-section{font-size:.75rem;opacity:.55;margin:20px 12px 5px}.app-main{min-width:0;flex:1}.topbar{height:74px;background:white;border-bottom:1px solid #e5ebf5;display:flex;align-items:center;padding:0 26px}.content-area{padding:34px}.eyebrow{letter-spacing:.12em;color:#2461a8;font-size:.78rem;font-weight:700}.detail-row{display:flex;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid #edf1f8}.detail-row span{color:#66758d}.sidebar-collapsed .app-sidebar{width:78px}.sidebar-collapsed .sidebar-label{display:none}.sidebar-collapsed .sidebar-brand{padding-left:20px}.sidebar-collapsed .app-sidebar .nav-link{justify-content:center}@media(max-width:767px){.app-sidebar{width:72px}.app-sidebar .sidebar-label{display:none}.app-sidebar .nav-link{justify-content:center}.sidebar-collapsed .app-sidebar{width:0;overflow:hidden}.content-area{padding:20px}.topbar{padding:0 14px}.portal-card,.surface-card{padding:22px}.detail-row{flex-direction:column;gap:4px}}
/* ===== Dashboard cards / Sidebar responsive improvements ===== */
.welcome-panel{background:linear-gradient(110deg,#103568,#2369bc);color:#fff;border-radius:22px;padding:30px 34px;box-shadow:0 15px 35px rgba(20,60,110,.15)}
.welcome-panel .eyebrow{color:#b9d6ff}
.module-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:228px;padding:24px;background:#fff;border:1px solid #e1eaf5;border-radius:20px;text-decoration:none;color:#243955;box-shadow:0 8px 24px rgba(19,51,101,.04);transition:transform .2s,box-shadow .2s,border-color .2s}
.module-card:hover{transform:translateY(-4px);box-shadow:0 15px 35px rgba(19,51,101,.12);border-color:#a8c6f3;color:#174c9a}
.module-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:1.6rem}
.module-blue{background:#e6efff;color:#225ab4}.module-orange{background:#fff0dc;color:#bd7115}.module-purple{background:#f0eaff;color:#7045b2}.module-teal{background:#dcf6f3;color:#137d77}.module-pink{background:#fce9f1;color:#b33c71}
.module-open{font-size:.85rem;font-weight:600;color:#2464b1;margin-top:auto}
.app-sidebar{overflow-x:hidden;overflow-y:auto}.app-sidebar .nav-link{white-space:normal;align-items:flex-start;font-size:.9rem}.app-sidebar .nav-link i{flex-shrink:0;font-size:1.1rem}.app-sidebar .nav-sub{padding-left:23px}.sidebar-group{color:#a8c5ed;font-size:.8rem;font-weight:600;padding:12px 12px 3px}.nav-section{line-height:1.5}
.sidebar-collapsed .sidebar-group{display:none}.sidebar-collapsed .app-sidebar .nav-sub{padding-left:12px}.sidebar-collapsed .app-sidebar .nav-link{align-items:center}
@media(max-width:767px){
 .app-sidebar{width:72px;transition:width .2s;overflow-x:hidden}
 .sidebar-mobile-open .app-sidebar{width:min(84vw,300px);box-shadow:5px 0 22px rgba(0,0,0,.15)}
 .sidebar-mobile-open .app-sidebar .sidebar-label{display:inline}
 .sidebar-mobile-open .app-sidebar .nav-link{justify-content:flex-start}
 .sidebar-mobile-open .app-sidebar .nav-sub{padding-left:23px}
 .sidebar-mobile-open .app-sidebar .sidebar-group{display:block}
 .sidebar-collapsed .app-sidebar{width:72px}
 .topbar-title{font-size:.78rem;line-height:1.3}
 .welcome-panel{padding:24px}
 .module-card{min-height:185px}
}
@media(max-width:420px){.topbar-title{max-width:155px}.content-area{padding:14px}.surface-card{padding:18px}}


/* ================================================================
   EWEN responsive layout patch 2026-10-28
   Desktop: fixed-width sidebar / icon-only collapse.
   Mobile: off-canvas overlay; main content remains full-width.
   ================================================================ */
:root { --ewen-sidebar-width: 280px; --ewen-sidebar-compact: 76px; }
html,body { max-width:100%; overflow-x:hidden; }
.dashboard-body .app-shell { display:flex; width:100%; min-width:0; min-height:100dvh; }
.dashboard-body .app-sidebar {
  position:sticky; top:0; height:100dvh; min-height:0;
  width:var(--ewen-sidebar-width); flex:0 0 var(--ewen-sidebar-width);
  overflow-x:hidden; overflow-y:auto; z-index:1035;
  transition:width .24s ease,flex-basis .24s ease,transform .24s ease;
  scrollbar-width:thin; scrollbar-color:#476997 transparent;
}
.dashboard-body .app-main { flex:1 1 0%; width:0; min-width:0; max-width:100%; }
.dashboard-body .content-area { width:100%; max-width:1500px; margin-inline:auto; }
.dashboard-body .app-sidebar .sidebar-brand { min-width:0; gap:10px; padding:18px 15px; font-size:.9rem; }
.dashboard-body .app-sidebar .sidebar-brand .sidebar-label { overflow:hidden; text-overflow:ellipsis; }
.dashboard-body .app-sidebar nav { padding:10px 12px 24px !important; gap:3px !important; }
.dashboard-body .app-sidebar .nav-link { display:flex; width:100%; min-width:0; align-items:flex-start; justify-content:flex-start; gap:11px; padding:11px 12px; line-height:1.55; font-size:.88rem; border-radius:11px; overflow:hidden; }
.dashboard-body .app-sidebar .nav-link i { flex:0 0 20px; width:20px; text-align:center; margin-top:1px; }
.dashboard-body .app-sidebar .nav-link .sidebar-label { display:block; flex:1; min-width:0; overflow-wrap:anywhere; white-space:normal; }
.dashboard-body .app-sidebar .nav-sub { padding-left:18px; }
.dashboard-body .app-sidebar .nav-section { margin:19px 11px 5px; font-size:.73rem; }
.dashboard-body .app-sidebar .sidebar-group { padding:12px 11px 5px; font-size:.78rem; }
.dashboard-body .topbar { min-width:0; gap:10px; }
.dashboard-body .topbar-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-body .welcome-panel { overflow-wrap:anywhere; }
.dashboard-body .detail-row strong { overflow-wrap:anywhere; text-align:right; }
.dashboard-body .surface-card, .dashboard-body .module-card { min-width:0; }
/* Desktop collapsed: only icons; hide labels AND category headings. */
@media (min-width: 768px) {
  .dashboard-body.sidebar-collapsed .app-sidebar { width:var(--ewen-sidebar-compact); flex-basis:var(--ewen-sidebar-compact); }
  .dashboard-body.sidebar-collapsed .app-sidebar .sidebar-label,
  .dashboard-body.sidebar-collapsed .app-sidebar .sidebar-group,
  .dashboard-body.sidebar-collapsed .app-sidebar .nav-section { display:none !important; }
  .dashboard-body.sidebar-collapsed .app-sidebar nav { padding-inline:9px !important; }
  .dashboard-body.sidebar-collapsed .app-sidebar .nav-link,
  .dashboard-body.sidebar-collapsed .app-sidebar .nav-sub { padding:12px 0; justify-content:center; align-items:center; }
  .dashboard-body.sidebar-collapsed .app-sidebar .nav-link i { margin:0; }
  .dashboard-body.sidebar-collapsed .app-sidebar .sidebar-brand { justify-content:center; padding:18px 0; }
}
/* Mobile: sidebar floats ABOVE content instead of squeezing it. */
.sidebar-backdrop { display:none; }
@media (max-width:767.98px) {
  .dashboard-body .app-shell { display:block; }
  .dashboard-body .app-main { display:block; width:100%; min-width:0; }
  .dashboard-body .app-sidebar,
  .dashboard-body.sidebar-collapsed .app-sidebar {
    position:fixed; inset:0 auto 0 0; height:100dvh;
    width:min(86vw,320px); max-width:320px; min-height:0;
    transform:translateX(-105%); visibility:hidden;
    box-shadow:none; transition:transform .24s ease,visibility .24s ease;
  }
  .dashboard-body.sidebar-mobile-open .app-sidebar {
    transform:translateX(0); visibility:visible;
    box-shadow:8px 0 35px rgba(9,23,52,.25);
  }
  .dashboard-body .app-sidebar .sidebar-label,
  .dashboard-body.sidebar-collapsed .app-sidebar .sidebar-label { display:block !important; }
  .dashboard-body .app-sidebar .nav-link,
  .dashboard-body.sidebar-collapsed .app-sidebar .nav-link { justify-content:flex-start; }
  .dashboard-body .app-sidebar .sidebar-group { display:block; }
  .dashboard-body .topbar { width:100%; height:auto; min-height:66px; padding:10px 14px; }
  .dashboard-body .topbar-title { font-size:.81rem; margin-left:0 !important; }
  .dashboard-body .content-area { padding:18px 14px 28px; }
  .dashboard-body .welcome-panel { padding:22px 20px; }
  .dashboard-body .welcome-panel h1 { font-size:clamp(1.25rem,5vw,1.65rem); }
  .dashboard-body .surface-card { padding:20px 17px; }
  .dashboard-body .detail-row { flex-direction:column; align-items:flex-start; }
  .dashboard-body .detail-row strong { text-align:left; }
  .dashboard-body .module-card { min-height:0; padding:20px; }
  .dashboard-body .sidebar-backdrop {
    display:block; position:fixed; inset:0; z-index:1030;
    background:rgba(9,21,43,.56); opacity:0; visibility:hidden;
    transition:opacity .24s ease,visibility .24s ease;
  }
  .dashboard-body.sidebar-mobile-open .sidebar-backdrop { opacity:1; visibility:visible; }
  .dashboard-body.sidebar-mobile-open { overflow:hidden; }
  .sidebar-mobile-close { display:inline-flex !important; }
}
@media (min-width:768px) { .sidebar-mobile-close { display:none !important; } }
@media (prefers-reduced-motion:reduce) {
  .dashboard-body .app-sidebar,.dashboard-body .sidebar-backdrop { transition:none !important; }
}

/* ================================================================
   EWEN Sidebar: prominent top-level section headings
   Keep the existing sidebar responsive behavior unchanged.
   ================================================================ */
.dashboard-body .app-sidebar .nav-section.ewen-section-heading {
  display:flex; align-items:center; gap:10px;
  margin:20px 0 8px; padding:12px 12px;
  background:linear-gradient(105deg,#27569b 0%,#1b427b 100%);
  border-left:4px solid #77d5ff; border-radius:9px;
  box-shadow:0 4px 14px rgba(2,16,45,.15);
  color:#fff; opacity:1; font-size:.85rem; font-weight:700;
  letter-spacing:.01em; line-height:1.5;
}
.dashboard-body .app-sidebar .ewen-section-heading .section-icon {
  flex:0 0 20px; font-size:1.08rem; text-align:center; color:#bceaff;
}
.dashboard-body .app-sidebar .ewen-section-heading .section-text {
  min-width:0; overflow-wrap:anywhere;
}
.dashboard-body .app-sidebar .sidebar-group {
  color:#bcd5fa; font-weight:600;
}
@media (min-width:768px) {
  .dashboard-body.sidebar-collapsed .app-sidebar .nav-section.ewen-section-heading {
    display:none !important;
  }
}
@media (max-width:767.98px) {
  .dashboard-body .app-sidebar .nav-section.ewen-section-heading {
    margin-top:17px; padding:12px 11px; font-size:.83rem;
  }
}