@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600&display=swap');

:root {
  --font: 'IBM Plex Sans Thai', sans-serif;
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;
  --navy:        #1a1f2e;
  --navy-2:      #252b3b;
  --navy-3:      #2d3447;
  --red:         #c0392b;
  --red-soft:    #fdf0ef;
  --red-border:  #f5c6c2;
  --canvas:      #f7f5f0;
  --surface:     #ffffff;
  --surface-2:   #fafaf8;
  --border:      #e4e1db;
  --border-soft: #ede9e3;
  --text:        #1a1f2e;
  --text-2:      #5a5750;
  --text-3:      #9a9690;
  --text-4:      #c5c2bc;
  --status-pending-text:    #92570a;
  --status-pending-bg:      #fef3c7;
  --status-pending-border:  #fcd34d;
  --status-active-text:     #1a5fa8;
  --status-active-bg:       #eef3fb;
  --status-active-border:   #bcd3f0;
  --status-transit-text:    #0f766e;
  --status-transit-bg:      #ccfbf1;
  --status-transit-border:  #5eead4;
  --status-done-text:       #166534;
  --status-done-bg:         #dcfce7;
  --status-done-border:     #86efac;
  --status-cancelled-text:  #6b7280;
  --status-cancelled-bg:    #f1f5f9;
  --status-cancelled-border:#cbd5e1;
  --status-urgent-text:     #c0392b;
  --status-urgent-bg:       #fdf0ef;
  --status-urgent-border:   #f5c6c2;
  --green:        #166534;
  --green-bg:     #dcfce7;
  --green-border: #86efac;
  --space-1:  4px;  --space-2:  8px;  --space-3:  12px;
  --space-4:  16px; --space-5:  20px; --space-6:  24px;
  --space-8:  32px; --space-10: 40px;
  --radius-sm: 6px; --radius-md: 10px;
  --radius-lg: 14px; --radius-xl: 20px;
  --shadow-sm: 0 1px 4px rgba(26,31,46,0.06);
  --shadow-md: 0 4px 16px rgba(26,31,46,0.08);
  --shadow-lg: 0 8px 32px rgba(26,31,46,0.10);
  --nav-height: 56px;
  --transition: 0.15s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{font-family:var(--font);font-weight:var(--font-weight-regular);font-size:14px;line-height:1.6;color:var(--text);background:var(--canvas);min-height:100vh;-webkit-font-smoothing:antialiased;}
.lova-nav{background:var(--navy);height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:100;}
.nav-brand{font-size:18px;font-weight:var(--font-weight-semi);color:#fff;letter-spacing:2px;text-transform:uppercase;}
.nav-section{font-size:11px;font-weight:var(--font-weight-medium);color:rgba(255,255,255,0.35);letter-spacing:1.5px;text-transform:uppercase;margin-left:12px;}
.nav-right{display:flex;align-items:center;gap:10px;}
.nav-user{font-size:12px;font-weight:var(--font-weight-medium);color:rgba(255,255,255,0.5);}
.nav-role{font-size:10px;font-weight:var(--font-weight-semi);padding:2px 8px;border-radius:var(--radius-sm);background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.5px;}
.lang-toggle{display:flex;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:20px;padding:2px;gap:1px;}
.lang-btn{padding:3px 10px;border-radius:16px;font-family:var(--font);font-size:11px;font-weight:var(--font-weight-semi);cursor:pointer;border:none;background:transparent;color:rgba(255,255,255,0.4);transition:all var(--transition);letter-spacing:0.5px;}
.lang-btn.active{background:rgba(255,255,255,0.18);color:#fff;}
.lang-toggle.light{background:var(--canvas);border-color:var(--border);}
.lang-toggle.light .lang-btn{color:var(--text-3);}
.lang-toggle.light .lang-btn.active{background:var(--navy);color:#fff;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border:none;border-radius:var(--radius-md);font-family:var(--font);font-size:13px;font-weight:var(--font-weight-medium);letter-spacing:0.3px;cursor:pointer;transition:all var(--transition);text-decoration:none;white-space:nowrap;}
.btn:active{transform:scale(0.98);}
.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover:not(:disabled){background:var(--navy-2);}
.btn-secondary{background:transparent;color:var(--text-2);border:1px solid var(--border);}
.btn-secondary:hover:not(:disabled){border-color:var(--navy);color:var(--navy);}
.btn-danger{background:var(--red-soft);color:var(--red);border:1px solid var(--red-border);}
.btn-danger:hover:not(:disabled){background:#fae4e2;}
.btn-ghost{background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,0.12);}
.btn-ghost:hover:not(:disabled){background:rgba(255,255,255,0.12);}
.btn-full{width:100%;}
.btn-sm{height:36px;padding:0 14px;font-size:12px;}
.btn-lg{height:52px;padding:0 28px;font-size:14px;}
.field{margin-bottom:16px;}
.field-label{display:block;font-size:10px;font-weight:var(--font-weight-semi);color:var(--text-3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;}
.field-input,.field-select,.field-textarea{width:100%;background:var(--canvas);border:1.5px solid var(--border);border-radius:var(--radius-md);font-family:var(--font);font-size:14px;font-weight:var(--font-weight-regular);color:var(--text);outline:none;transition:border-color var(--transition),background var(--transition);-webkit-appearance:none;}
.field-input{height:48px;padding:0 14px;}
.field-select{height:48px;padding:0 14px;cursor:pointer;}
.field-textarea{padding:12px 14px;resize:vertical;min-height:88px;}
.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--navy);background:var(--surface);}
.field-input.error{border-color:var(--red);}
.field-hint{font-size:11px;color:var(--text-3);margin-top:5px;}
.field-error{font-size:11px;color:var(--red);margin-top:5px;min-height:16px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm);}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-soft);}
.card-title{font-size:11px;font-weight:var(--font-weight-semi);color:var(--text-3);text-transform:uppercase;letter-spacing:1px;}
.badge{display:inline-block;font-size:10px;font-weight:var(--font-weight-semi);padding:3px 9px;border-radius:4px;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;border:1px solid;}
.badge-pending{color:var(--status-pending-text);background:var(--status-pending-bg);border-color:var(--status-pending-border);}
.badge-active{color:var(--status-active-text);background:var(--status-active-bg);border-color:var(--status-active-border);}
.badge-transit{color:var(--status-transit-text);background:var(--status-transit-bg);border-color:var(--status-transit-border);}
.badge-done{color:var(--status-done-text);background:var(--status-done-bg);border-color:var(--status-done-border);}
.badge-cancelled{color:var(--status-cancelled-text);background:var(--status-cancelled-bg);border-color:var(--status-cancelled-border);}
.badge-urgent{color:var(--status-urgent-text);background:var(--status-urgent-bg);border-color:var(--status-urgent-border);}
.badge-navy{color:#fff;background:var(--navy);border-color:var(--navy);}
.divider{display:flex;align-items:center;gap:12px;margin:16px 0;}
.divider-line{flex:1;height:1px;background:var(--border);}
.divider-text{font-size:11px;color:var(--text-3);font-weight:var(--font-weight-medium);white-space:nowrap;}
.page-content{max-width:1100px;margin:0 auto;padding:28px 20px 80px;}
.page-content-sm{max-width:720px;margin:0 auto;padding:28px 20px 80px;}
.wordmark{font-size:28px;font-weight:var(--font-weight-semi);color:var(--navy);letter-spacing:4px;text-transform:uppercase;}
.wordmark-accent{width:24px;height:2px;background:var(--red);border-radius:1px;margin:8px auto 10px;}
.icon-sm{font-size:16px;} .icon-md{font-size:20px;} .icon-lg{font-size:24px;}
.text-center{text-align:center;} .text-muted{color:var(--text-3);} .text-sm{font-size:12px;} .text-xs{font-size:10px;letter-spacing:0.5px;}
.flex{display:flex;} .flex-center{display:flex;align-items:center;} .flex-between{display:flex;align-items:center;justify-content:space-between;}
.gap-2{gap:var(--space-2);} .gap-3{gap:var(--space-3);} .gap-4{gap:var(--space-4);}
.mt-2{margin-top:var(--space-2);} .mt-3{margin-top:var(--space-3);} .mt-4{margin-top:var(--space-4);} .mb-4{margin-bottom:var(--space-4);}
.loading-text{text-align:center;padding:40px 20px;font-size:13px;color:var(--text-3);display:flex;align-items:center;justify-content:center;gap:10px;}
.loading-text::before{content:'';width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--navy);border-radius:50%;animation:lova-spin 0.7s linear infinite;flex-shrink:0;}
@keyframes lova-spin{to{transform:rotate(360deg);}}
.empty-state{text-align:center;padding:40px 20px;color:var(--text-3);font-size:13px;}

@media (max-width:480px){
  .lova-nav{padding:0 14px;}
  .nav-section{display:none;}
  .nav-user{font-size:11px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .lang-btn{padding:3px 7px;font-size:10px;}
  .lova-nav .btn-sm{padding:0 10px;font-size:11px;height:32px;}
  .nav-right{gap:6px;}
}

/* ── Unified header (LOVA_NAV.renderHeader) ── */
.lova-header{background:var(--navy);height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:100;}
.lova-header-left{display:flex;align-items:center;gap:12px;min-width:0;}
.lova-header-back{color:rgba(255,255,255,0.5);text-decoration:none;font-size:20px;line-height:1;display:flex;align-items:center;flex-shrink:0;}
.lova-header-back:hover{color:#fff;}
.lova-header-brand{font-size:18px;font-weight:var(--font-weight-semi);color:#fff;letter-spacing:2px;flex-shrink:0;}
.lova-header-logo{height:28px;width:auto;flex-shrink:0;display:block;}
.lova-header-label{font-size:10px;font-weight:600;color:rgba(255,255,255,0.35);letter-spacing:1.5px;text-transform:uppercase;padding-left:12px;border-left:1px solid rgba(255,255,255,0.15);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lova-header-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.lova-header-user{font-size:12px;color:rgba(255,255,255,0.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;}
.lova-header-signout{background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,0.12);padding:6px 14px;border-radius:var(--radius-sm);font-family:var(--font);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;}
.lova-header-signout:hover{background:rgba(255,255,255,0.12);}
.lova-header-role{font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.5px;flex-shrink:0;}
@media (max-width:480px){
  .lova-header{padding:0 12px;}
  .lova-header-label{display:none;}
  .lova-header-role{display:none;}
  .lova-header-user{max-width:70px;font-size:11px;}
  .lova-header-signout{padding:5px 9px;font-size:10px;}
  .lova-header-left{gap:8px;}
  .lova-header-right{gap:6px;}
}

/* ---- Nav dropdown menu (LOVA_NAV.renderDropdown) ---- */
.nav-dropdown{position:relative;}
.nav-dropdown-btn{background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.1);padding:8px 14px;border-radius:8px;font-family:'IBM Plex Sans Thai',sans-serif;font-size:12px;font-weight:600;cursor:pointer;}
.nav-dropdown-btn:hover{background:rgba(255,255,255,0.12);color:#fff;}
.nav-dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 12px 32px rgba(0,0,0,0.18);z-index:200;flex-direction:column;padding:6px;}
.nav-dropdown-menu.open{display:flex;}
.nav-menu-item{display:block;padding:9px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--text-2);text-decoration:none;}
.nav-menu-item:hover{background:var(--canvas);}
.nav-menu-item.active{background:var(--navy);color:#fff;}
.nav-menu-divider{height:1px;background:var(--border-soft);margin:6px 4px;}
.nav-menu-signout{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--red);background:none;border:none;cursor:pointer;font-family:'IBM Plex Sans Thai',sans-serif;}
.nav-menu-signout:hover{background:var(--red-soft);}