/* Bunheng168 Premium Khmer UI — final visual layer */
:root{
  --kh-primary:#5b5bd6;
  --kh-primary-2:#7775e8;
  --kh-ink:#192033;
  --kh-muted:#6b7280;
  --kh-border:#dfe4ec;
  --kh-soft:#f7f8fc;
  --kh-card:#ffffff;
  --kh-radius:16px;
}

body{font-family:"Noto Sans Khmer",Arial,sans-serif!important}

/* Date control: premium app-style */
.date-control{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:"label label" "date today"!important;
  gap:7px 8px!important;
  align-items:center!important;
  min-width:0!important;
  padding:0!important;
  background:transparent!important;
}
.date-control label{
  grid-area:label!important;
  margin:0!important;
  font-size:11px!important;
  line-height:1.2!important;
  font-weight:800!important;
  color:var(--kh-muted)!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
#manualDateInput{
  grid-area:date!important;
  width:100%!important;
  min-width:0!important;
  height:46px!important;
  padding:0 12px!important;
  border:1px solid var(--kh-border)!important;
  border-radius:13px!important;
  background:#fff!important;
  color:var(--kh-ink)!important;
  font-size:15px!important;
  font-weight:800!important;
  box-shadow:0 1px 2px rgba(16,24,40,.03)!important;
  outline:none!important;
}
#manualDateInput:focus{
  border-color:#aaa9ef!important;
  box-shadow:0 0 0 4px rgba(91,91,214,.10)!important;
}
#todayCambodiaBtn{
  grid-area:today!important;
  height:46px!important;
  min-width:138px!important;
  margin:0!important;
  padding:0 14px!important;
  border:1px solid #d9def0!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#27304a!important;
  font-size:13px!important;
  font-weight:800!important;
  white-space:nowrap!important;
  box-shadow:0 1px 2px rgba(16,24,40,.03)!important;
}
#todayCambodiaBtn:hover{background:#f8f8ff!important;border-color:#bbbaf0!important;color:#4c4cc3!important}

/* Main action buttons */
#scanBtn,.upload-btn{
  background:linear-gradient(135deg,var(--kh-primary),var(--kh-primary-2))!important;
  border-color:transparent!important;
  box-shadow:0 7px 18px rgba(91,91,214,.18)!important;
}
#resetBtn{background:#fff!important;border:1px solid var(--kh-border)!important;color:#344054!important}

/* Better Khmer text rhythm */
button,.upload-btn,select,input,label,.paste-zone{font-family:"Noto Sans Khmer",Arial,sans-serif!important}
button{letter-spacing:0!important}

/* Phone: date becomes clean full-width card */
@media(max-width:768px){
  .date-control{
    grid-template-columns:minmax(0,1fr) 124px!important;
    grid-template-areas:"label label" "date today"!important;
    width:100%!important;
    padding:0!important;
  }
  #manualDateInput,#todayCambodiaBtn{height:48px!important;border-radius:14px!important}
  #todayCambodiaBtn{min-width:0!important;width:124px!important;padding:0 10px!important;font-size:12.5px!important}
}

@media(max-width:430px){
  .date-control{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"label" "date" "today"!important;
    gap:7px!important;
  }
  #todayCambodiaBtn{width:100%!important;min-width:0!important}
}

/* Khmer premium modal headers */
.pro-modal-head h3{line-height:1.45!important}
.settings-grid small{line-height:1.55!important}

/* ===== Premium Khmer V2: compact controls + custom Khmer calendar ===== */
.kh-native-date-hidden{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;padding:0!important;border:0!important}
.date-control{grid-template-columns:minmax(0,1fr) 108px!important;gap:6px!important}
.kh-date-display{grid-area:date!important;width:100%!important;height:40px!important;display:grid!important;grid-template-columns:auto 1fr auto!important;gap:8px!important;align-items:center!important;padding:0 11px!important;border:1px solid #dfe4ec!important;border-radius:11px!important;background:#fff!important;color:#1f2937!important;box-shadow:none!important;text-align:left!important;font-size:13px!important;font-weight:800!important}
.kh-date-display:hover{border-color:#b9b8ef!important;background:#fbfbff!important}
.kh-date-icon{font-size:11px;color:#6262d9}.kh-date-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kh-date-arrow{font-size:12px;color:#8a94a6}
#todayCambodiaBtn{height:40px!important;min-width:108px!important;padding:0 9px!important;border-radius:11px!important;font-size:11.5px!important}
.toolbar{gap:7px!important;padding:10px!important}.toolbar .upload-btn,.toolbar button,.toolbar select{min-height:40px!important}.paste-zone{min-height:52px!important}.mode-select{height:40px!important;min-height:40px!important}

.kh-calendar{position:fixed;z-index:200000;display:none;background:#fff;border:1px solid #e4e7ec;border-radius:16px;padding:10px;box-shadow:0 20px 55px rgba(16,24,40,.18);font-family:"Noto Sans Khmer",Arial,sans-serif;user-select:none}
.kh-calendar.show{display:block;animation:khCalIn .14s ease-out}
@keyframes khCalIn{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
.kh-cal-head{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:6px;margin-bottom:7px}.kh-cal-head>div{text-align:center;line-height:1.2}.kh-cal-head b{display:block;font-size:14px;color:#20283b}.kh-cal-head span{display:block;margin-top:2px;font-size:11px;color:#8a94a6}.kh-cal-nav{width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;border:1px solid #e5e7eb!important;border-radius:10px!important;background:#f8fafc!important;color:#353f56!important;font-size:22px!important;line-height:1!important;box-shadow:none!important}
.kh-cal-week,.kh-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.kh-cal-week{margin-bottom:3px}.kh-cal-week span{text-align:center;padding:4px 0;font-size:10px;font-weight:800;color:#98a2b3}
.kh-cal-day{height:32px!important;min-height:32px!important;padding:0!important;border:0!important;border-radius:9px!important;background:transparent!important;color:#344054!important;font:700 11px/1 Arial,"Noto Sans Khmer",sans-serif!important;box-shadow:none!important}.kh-cal-day:hover{background:#f0f1ff!important;color:#4e4ec8!important}.kh-cal-day.outside{color:#c4c9d3!important}.kh-cal-day.today{box-shadow:inset 0 0 0 1px #aaa9ef!important}.kh-cal-day.selected{background:linear-gradient(135deg,#5858d6,#7775e8)!important;color:#fff!important;box-shadow:0 4px 10px rgba(91,91,214,.22)!important}
.kh-cal-foot{display:flex;justify-content:space-between;gap:7px;margin-top:8px;padding-top:8px;border-top:1px solid #eef0f4}.kh-cal-foot button{height:32px!important;min-height:32px!important;padding:0 11px!important;border-radius:9px!important;background:#f6f7fb!important;color:#4b5565!important;border:1px solid #e5e7eb!important;font-size:11px!important;box-shadow:none!important}

@media(max-width:768px){.toolbar{padding:8px!important;gap:7px!important}.date-control{grid-template-columns:minmax(0,1fr) 96px!important}.kh-date-display,#todayCambodiaBtn{height:39px!important;border-radius:10px!important}#todayCambodiaBtn{width:96px!important;min-width:96px!important;font-size:11px!important}.app>header{padding:14px 16px!important}.app>header h1{font-size:20px!important}.panel{padding:10px!important}.pro-toolbar{padding:8px!important}.pro-actions button,.v4-actions button{min-height:36px!important;padding:6px 9px!important;font-size:11px!important}}
@media(max-width:430px){.date-control{grid-template-columns:minmax(0,1fr) 90px!important;grid-template-areas:"label label" "date today"!important}.kh-date-display{height:38px!important;font-size:12px!important}#todayCambodiaBtn{width:90px!important;min-width:90px!important;height:38px!important;padding:0 5px!important;font-size:10.5px!important}.kh-calendar{padding:8px;border-radius:14px}.kh-cal-day{height:31px!important;min-height:31px!important}}

/* ===== Premium Khmer V4: date width follows Khmer date text ===== */
.date-control{
  grid-template-columns:max-content 108px!important;
  justify-content:start!important;
  align-items:end!important;
}
.kh-date-display{
  width:max-content!important;
  min-width:0!important;
  max-width:100%!important;
  grid-template-columns:auto auto auto!important;
  justify-content:start!important;
  padding-left:11px!important;
  padding-right:9px!important;
}
.kh-date-text{
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}
@media(max-width:768px){
  .date-control{
    grid-template-columns:max-content 96px!important;
    justify-content:start!important;
  }
  .kh-date-display{width:max-content!important;max-width:calc(100vw - 145px)!important}
}
@media(max-width:430px){
  .date-control{
    grid-template-columns:max-content 90px!important;
    grid-template-areas:"label label" "date today"!important;
    justify-content:start!important;
  }
  .kh-date-display{width:max-content!important;max-width:calc(100vw - 132px)!important}
}