/* =========================================================================
   GLASS REDESIGN — โหลดทับ styles.css (override ด้วยลำดับ + specificity)
   ครอบทุกหน้า: portal / leave / calendar / expense
   หลักการ: กระจกใช้กับ "กรอบ/การ์ด/หัว" — ตาราง/อินพุต/ตัวเลขคงพื้นอ่านง่าย
   PDF (generateExpensePdfBlob) ใช้ inline style ของตัวเอง ไม่ถูกแตะ
   ========================================================================= */
:root{
  --teal:#007368;
  --glass-bg:rgba(255,255,255,0.72);
  --glass-bg-strong:rgba(255,255,255,0.86);
  --glass-bg-input:rgba(255,255,255,0.9);
  --glass-border:rgba(255,255,255,0.65);
  --glass-blur:20px;
  --glass-shadow:0 10px 34px rgba(16,60,48,0.13), 0 2px 8px rgba(16,60,48,0.06);
  --glass-shadow-hover:0 18px 50px rgba(16,60,48,0.20), 0 4px 12px rgba(16,60,48,0.10);
  --radius-lg:20px;
  --radius-xl:26px;
  --grad-green:linear-gradient(140deg,#27b487,#007368);
  --grad-blue:linear-gradient(140deg,#5aa6ec,#378ADD);
  --grad-purple:linear-gradient(140deg,#9d96f0,#7F77DD);
  --grad-amber:linear-gradient(140deg,#f6b958,#EF9F27);
  --grad-gray:linear-gradient(140deg,#c2cac6,#9aa39e);
}

/* ---------- BACKGROUND: brand mesh + drifting orbs (ทุกหน้า) ---------- */
body{
  background:
    radial-gradient(58% 48% at 10% 6%,  rgba(29,158,117,0.26), transparent 60%),
    radial-gradient(52% 42% at 94% 10%, rgba(239,159,39,0.22), transparent 60%),
    radial-gradient(60% 58% at 84% 92%, rgba(0,115,104,0.22), transparent 62%),
    radial-gradient(48% 48% at 16% 96%, rgba(127,119,221,0.18), transparent 60%),
    linear-gradient(160deg,#EEF4F1,#E8EEF0) !important;
  background-attachment:fixed;
}
.gorb{position:fixed;z-index:-1;border-radius:50%;filter:blur(72px);opacity:.5;pointer-events:none}
.gorb-1{width:400px;height:400px;top:-100px;left:-70px;background:radial-gradient(circle at 30% 30%,#37c79a,#1D9E75);animation:gdrift1 24s ease-in-out infinite}
.gorb-2{width:340px;height:340px;top:-50px;right:-80px;background:radial-gradient(circle at 40% 40%,#ffd06a,#EF9F27);animation:gdrift2 28s ease-in-out infinite}
.gorb-3{width:460px;height:460px;bottom:-180px;right:5%;background:radial-gradient(circle at 50% 40%,#1fa79a,#007368);animation:gdrift3 32s ease-in-out infinite}
.gorb-4{width:300px;height:300px;bottom:-90px;left:3%;background:radial-gradient(circle at 50% 50%,#a59dff,#7F77DD);animation:gdrift1 30s ease-in-out infinite reverse}
@keyframes gdrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(38px,28px)}}
@keyframes gdrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-32px,24px)}}
@keyframes gdrift3{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,-28px)}}

/* shared glass-surface helper for liquid-glass specular edge */
.profile-card, .quota-card, .detail-box, .records-box, .portal-card,
.lv-request-card, .exp-request-card, .lv-form-card, .exp-form-card,
.lv-filter-card, .exp-filter-card, .portal-widget, .modal-box{
  position:relative;
}
.profile-card::before, .portal-card::after, .portal-widget::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.5),rgba(255,255,255,0) 40%);
  mix-blend-mode:screen;z-index:0;
}

/* ---------- TOPBAR (shared) ---------- */
.topbar{
  background:rgba(255,255,255,0.5) !important;
  backdrop-filter:blur(18px) saturate(165%);-webkit-backdrop-filter:blur(18px) saturate(165%);
  border-bottom:1px solid rgba(255,255,255,0.5) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.45) inset, 0 6px 22px rgba(16,60,48,0.05);
}
.topbar-inner{max-width:980px;height:60px}
.btn-logout,.btn-back{background:rgba(255,255,255,.5);border:1px solid var(--glass-border)}
.btn-logout:hover,.btn-back:hover{background:rgba(255,255,255,.9)}
.user-avatar{box-shadow:0 2px 8px rgba(0,115,104,.35)}

/* ---------- CONTENT WIDTH ---------- */
.portal-content,.content{max-width:980px}
.content{padding:1.75rem 1.5rem 3rem}

/* =========================================================================
   PORTAL
   ========================================================================= */
.portal-content{padding:2.5rem 1.5rem 3.5rem}
.portal-hero{margin-bottom:1.6rem}
.portal-hero-eyebrow{color:var(--teal)}
.portal-greeting{font-size:30px;font-weight:700;letter-spacing:-.025em}
.portal-date-day{color:var(--teal);font-size:40px;font-weight:800}

/* profile card → glass hero */
#portalProfile{margin-bottom:1.6rem}
.profile-card{
  background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur)) saturate(165%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(165%);
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow);padding:1.4rem 1.6rem;gap:1.25rem;
}
.profile-card > *{position:relative;z-index:1}
.profile-photo-wrap,.profile-photo,.profile-photo-fallback{width:66px;height:66px}
.profile-photo-fallback{background:var(--grad-green);box-shadow:0 6px 18px rgba(0,115,104,.4),0 0 0 4px rgba(255,255,255,.55)}
.profile-name{font-size:18px}
.profile-actions{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.qa-btn{display:flex;align-items:center;gap:7px;font-family:inherit;font-size:12.5px;font-weight:600;
  padding:9px 16px;border-radius:11px;cursor:pointer;border:1px solid transparent;transition:.16s;white-space:nowrap}
.qa-btn svg{width:14px;height:14px}
.qa-primary{background:var(--grad-green);color:#fff;box-shadow:0 4px 14px rgba(0,115,104,.3)}
.qa-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,115,104,.4)}
.qa-ghost{background:rgba(255,255,255,.55);color:var(--text-1);border-color:var(--glass-border)}
.qa-ghost:hover{background:rgba(255,255,255,.9);transform:translateY(-2px)}
@media(max-width:600px){.profile-actions{flex-direction:row;width:100%}.qa-btn{flex:1;justify-content:center}}

.portal-section-label{color:var(--text-2);font-weight:700;display:flex;align-items:center;gap:8px}
.portal-section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(22,32,28,.12),transparent)}

/* launcher cards → glass + gradient icon */
.portal-card{
  background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur)) saturate(165%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(165%);
  border:1px solid var(--glass-border) !important;border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow);overflow:hidden;
}
.portal-card > *{position:relative;z-index:1}
.portal-card::before{display:none !important;} /* remove old 3px top bar */
.portal-card::after{ /* light sweep */
  content:'';position:absolute;top:0;left:-60%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .6s ease;pointer-events:none;z-index:2;mix-blend-mode:normal;
}
.portal-card:hover:not(.disabled){box-shadow:var(--glass-shadow-hover) !important;transform:translateY(-5px)}
.portal-card:hover:not(.disabled)::after{left:130%}
.portal-card-icon{width:50px;height:50px;border-radius:15px;box-shadow:0 6px 16px rgba(0,0,0,.12);position:relative;overflow:hidden}
.portal-card-icon::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,0) 55%)}
.portal-card-icon svg{width:23px;height:23px;color:#fff !important;position:relative;z-index:1}
.portal-card-icon.green{background:var(--grad-green)}
.portal-card-icon.blue{background:var(--grad-blue)}
.portal-card-icon.purple{background:var(--grad-purple)}
.portal-card-icon.amber{background:var(--grad-amber)}
.portal-card-icon.gray{background:var(--grad-gray)}
.portal-card-title{font-size:16px}
.portal-card-action.green,.portal-card-action{color:var(--teal)}

/* ---------- WIDGETS (ภาพรวมของคุณ) ---------- */
#portalWidgetsSection{margin-bottom:30px}
.widget-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.portal-widget{
  background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur)) saturate(165%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(165%);
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow);padding:1.2rem 1.3rem;cursor:pointer;
  transition:transform .16s, box-shadow .16s;overflow:hidden;
}
.portal-widget > *{position:relative;z-index:1}
.portal-widget:hover{transform:translateY(-4px);box-shadow:var(--glass-shadow-hover)}
.portal-widget.static,.portal-widget.static:hover{cursor:default;transform:none;box-shadow:var(--glass-shadow)}
.w-span2{grid-column:span 2}
.w-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.w-ico{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;overflow:hidden}
.w-ico svg{width:17px;height:17px;color:#fff;position:relative;z-index:1}
.w-ico::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,0) 55%)}
.w-ico.green{background:var(--grad-green)} .w-ico.amber{background:var(--grad-amber)}
.w-ico.blue{background:var(--grad-blue)} .w-ico.purple{background:var(--grad-purple)}
.w-label{font-size:12px;font-weight:600;color:var(--text-2)}
.w-balance-row{display:flex;gap:22px}
.w-balance-item{flex:1}
.w-bname{font-size:12px;font-weight:600;color:var(--text-1);margin-bottom:6px}
.w-bnum{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1}
.w-bnum.green{color:var(--teal)} .w-bnum.blue{color:var(--blue)} .w-bnum.purple{color:var(--purple)} .w-bnum.red{color:var(--red)}
.w-bunit{font-size:11px;color:var(--text-3);margin-top:2px}
.w-bar{height:6px;border-radius:4px;background:rgba(22,32,28,.08);overflow:hidden;margin-top:9px}
.w-bar > i{display:block;height:100%;border-radius:4px}
.w-bar .green{background:var(--grad-green)} .w-bar .blue{background:var(--grad-blue)} .w-bar .purple{background:var(--grad-purple)} .w-bar .red{background:linear-gradient(90deg,#f08a8a,#E24B4A)}
.w-holiday-big{font-size:25px;font-weight:800;color:var(--amber-text);letter-spacing:-.02em;line-height:1.05}
.w-holiday-name{font-size:12.5px;font-weight:600;color:var(--text-1);margin-top:6px;line-height:1.35}
.w-holiday-sub{font-size:11px;color:var(--text-3);margin-top:3px}
.w-wol-list{display:flex;flex-direction:column;gap:9px}
.w-wol-row{display:flex;align-items:center;gap:8px}
.w-wol-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.w-wol-dot.v{background:var(--green)} .w-wol-dot.s{background:var(--blue)} .w-wol-dot.p{background:var(--purple)} .w-wol-dot.o{background:var(--text-3)}
.w-wol-name{font-size:12.5px;font-weight:500;color:var(--text-1);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-wol-when{font-size:11px;color:var(--text-3);flex-shrink:0}
.w-empty{font-size:12px;color:var(--text-3);padding:6px 0}
.w-signin{font-size:12.5px;color:var(--text-2);line-height:1.6}
.w-signin b{color:var(--teal)}
@media(max-width:760px){.widget-grid{grid-template-columns:repeat(2,1fr)}.w-span2{grid-column:span 2}}
@media(max-width:600px){.widget-grid{grid-template-columns:1fr}.w-span2{grid-column:span 1}}

/* =========================================================================
   GENERIC GLASS CARDS (leave / expense containers)
   ========================================================================= */
.quota-card,.detail-box,.records-box,.lv-request-card,.exp-request-card,
.lv-form-card,.exp-form-card,.lv-filter-card,.exp-filter-card{
  background:var(--glass-bg) !important;
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--glass-border) !important;border-radius:var(--radius-lg) !important;
  box-shadow:var(--glass-shadow) !important;
}
.lv-request-card:hover,.exp-request-card:hover{box-shadow:var(--glass-shadow-hover) !important;transform:translateY(-2px)}
.records-box{overflow:hidden}

/* quota cards icons → gradient squircle */
.card-icon{width:30px;height:30px;border-radius:9px;position:relative;overflow:hidden}
.card-icon svg{color:#fff !important;position:relative;z-index:1}
.card-icon::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.45),rgba(255,255,255,0) 55%)}
.card-icon.v{background:var(--grad-green)}
.card-icon.s{background:var(--grad-blue)}
.card-icon.p{background:var(--grad-purple)}
.card-icon.o{background:var(--grad-gray)}
.card-big{font-weight:800;letter-spacing:-.02em}
.card-big.green{color:var(--teal)}
.progress-bg{height:6px;border-radius:4px;background:rgba(22,32,28,.08)}
.progress-fill{border-radius:4px}
.progress-fill.v{background:var(--grad-green)}
.progress-fill.s{background:var(--grad-blue)}
.progress-fill.p{background:var(--grad-purple)}

/* detail grid cells stay readable */
.detail-grid{background:var(--glass-border)}
.detail-cell{background:rgba(255,255,255,.7)}

/* records list rows readable on glass */
.record-item{border-bottom:1px solid rgba(22,32,28,.06)}
.record-item:hover{background:rgba(255,255,255,.45)}
.record-chip-row,.filter-row{border-bottom:1px solid rgba(22,32,28,.06)}

/* section titles */
.sec-title{color:var(--text-2);font-weight:700}

/* =========================================================================
   TABS (leave + expense)
   ========================================================================= */
.lv-tab-nav,.exp-tabs{border-bottom:1px solid rgba(22,32,28,.1)}
.lv-tab.active{color:var(--teal);border-bottom-color:var(--teal)}
.exp-tab.active{color:var(--amber-text);border-bottom-color:var(--amber)}

/* =========================================================================
   FORMS — inputs near-solid for readability
   ========================================================================= */
.lv-input,.lv-select,.lv-textarea,.exp-input,.exp-select,.exp-textarea,
.lv-filter-input,.exp-filter-input,.admin-select,.year-select,.modal-textarea{
  background:var(--glass-bg-input) !important;border-radius:10px !important;
}
.lv-radio-label,.exp-doctype-label{background:rgba(255,255,255,.55) !important;border-radius:12px !important}
.lv-upload-area,.exp-upload-area{background:rgba(255,255,255,.4) !important;border-radius:12px !important}
.exp-items-tbl th{background:rgba(255,255,255,.5)}
.exp-total-bar,.exp-files-section{background:rgba(255,255,255,.5) !important;border-radius:12px !important}

/* primary action buttons → gradient */
.btn-submit-leave{background:var(--grad-blue) !important;border-radius:11px !important;box-shadow:0 4px 14px rgba(55,138,221,.3)}
.btn-submit-leave:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px rgba(55,138,221,.4)}
.btn-submit-expense{background:var(--grad-amber) !important;border-radius:11px !important;box-shadow:0 4px 14px rgba(239,159,39,.3)}
.btn-submit-expense:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(239,159,39,.4)}
.btn-add-row{border-radius:11px}
.btn-status,.btn-clear-filter,.btn-cal-today,.cal-list-tab,.lv-status-tag,.exp-status-tag,.filter-btn{
  background:rgba(255,255,255,.6);border-radius:10px;
}
.exp-request-amount{color:var(--amber-text)}

/* =========================================================================
   CALENDAR — container glass, cells solid for legibility
   ========================================================================= */
.cal-nav-btn{background:rgba(255,255,255,.6);border:1px solid var(--glass-border);border-radius:10px}
.cal-grid{
  background:var(--glass-bg) !important;border:1px solid var(--glass-border) !important;
  border-radius:var(--radius-lg) !important;box-shadow:var(--glass-shadow);
  gap:1px;padding:6px;
}
.cal-day-header{background:transparent;color:var(--text-2);font-weight:700}
.cal-cell{background:rgba(255,255,255,.78);border-radius:8px}
.cal-cell.other-month{background:rgba(208,214,210,0.1)}
.cal-cell.today-cell{background:rgba(29,158,117,.16)}
.cal-cell.cal-cell-holiday{background:rgba(226,75,74,.12)}
.cal-day-num.today-num{background:var(--grad-green)}
.cal-chip.chip-vac{background:rgba(29,158,117,.18);color:var(--green-text)}
.cal-chip.chip-sick{background:rgba(55,138,221,.18);color:var(--blue-text)}
.cal-chip.chip-pers{background:rgba(127,119,221,.18);color:var(--purple-text)}
.cal-list-section{border-top:1px solid rgba(22,32,28,.08)}
.cal-list-row{background:rgba(255,255,255,.66) !important;border:1px solid var(--glass-border) !important;border-radius:10px}
.cal-list-row:hover{background:rgba(255,255,255,.92) !important}
.cal-list-tab.active{background:rgba(29,158,117,.16);border-color:var(--teal);color:var(--green-text)}

/* =========================================================================
   MODALS — frosted
   ========================================================================= */
/* ไม่ใช้ backdrop-filter บนโมดอล — Chromium จะดึง scroll container ภายในออกจาก
   compositor fast-path ทำให้สกรอลกระตุกบน main thread. ใช้พื้นทึบ 94% แทน
   (ตามองแทบไม่ต่าง เพราะ overlay มีโทนเข้มทับอยู่แล้ว). */
.modal-overlay{background:rgba(16,32,28,0.48)}
.modal-box{
  background:rgba(255,255,255,0.96) !important;
  border:1px solid var(--glass-border);border-radius:var(--radius-lg) !important;
  box-shadow:0 20px 60px rgba(16,60,48,.28) !important;
}
/* หยุด orb ตอนเปิดโมดอล — กัน body background animate ทำให้คอมโพสิตต้องอัปเดต */
body.modal-open .gorb{animation:none}
.btn-modal-cancel{background:rgba(255,255,255,.6);border-radius:10px}
.btn-modal-confirm{border-radius:10px}

/* admin bar / year row chips */
.year-tag,.admin-label{color:var(--text-2)}

/* =========================================================================
   MICRO-ANIMATIONS
   ========================================================================= */
@keyframes g-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.g-anim{opacity:0;animation:g-rise .55s cubic-bezier(.22,.7,.3,1) forwards}

/* widget skeleton (loading state) */
.w-sk-line{height:12px;border-radius:7px;background:rgba(22,42,36,.08);position:relative;overflow:hidden}
.w-sk-line::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:w-shimmer 1.3s ease-in-out infinite}
.w-ico.sk{background:rgba(22,42,36,.08)}
@keyframes w-shimmer{100%{transform:translateX(100%)}}

/* =========================================================================
   ACCESSIBILITY FALLBACKS
   ========================================================================= */
@media (prefers-reduced-transparency:reduce){
  .topbar,.profile-card,.portal-card,.portal-widget,.quota-card,.detail-box,.records-box,
  .lv-request-card,.exp-request-card,.lv-form-card,.exp-form-card,.lv-filter-card,
  .exp-filter-card,.cal-grid,.modal-box{
    background:#fff !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  }
  .profile-card::before,.portal-card::after,.portal-widget::before{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  .gorb{animation:none}
  .g-anim{animation:none;opacity:1}
  .portal-card::after{display:none}
  .w-sk-line::after{animation:none}
}