/*
 * Mumyeong IMS usability layer
 * Loaded after the visual themes so legacy page CSS keeps its layout while
 * shared controls, tables and responsive behavior remain predictable.
 */

html{scroll-behavior:smooth}
body.monochrome-theme{color-scheme:dark;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body.monochrome-theme *,body.monochrome-theme *::before,body.monochrome-theme *::after{box-sizing:border-box}
body.monochrome-theme :is(main,section,article,aside,nav,header,footer,div,form,label){min-width:0}
body.monochrome-theme :is(h1,h2,h3,h4){text-wrap:balance;scroll-margin-top:96px}
body.monochrome-theme :is(p,.muted,.hint,.section-desc){line-height:1.65}
body.monochrome-theme :is(input,select,textarea,button,.btn,a.btn){font:inherit}
body.monochrome-theme :is(input,select,textarea){max-width:100%;min-height:44px;line-height:1.35}
body.monochrome-theme textarea{padding-block:11px;resize:vertical}
body.monochrome-theme :is(button,.btn,a.btn){touch-action:manipulation}
body.monochrome-theme :is(input,select,textarea,button,a,summary,[tabindex]):focus-visible{
  outline:2px solid rgba(232,224,207,.92)!important;
  outline-offset:2px!important;
}
body.monochrome-theme :is(input,select,textarea):focus{border-color:rgba(232,224,207,.58)!important;box-shadow:0 0 0 3px rgba(255,255,255,.07)!important}
body.monochrome-theme :disabled{cursor:not-allowed!important;opacity:.52!important}
body.monochrome-theme table{font-variant-numeric:tabular-nums}
body.monochrome-theme th{white-space:nowrap}
body.monochrome-theme td{line-height:1.45}
body.monochrome-theme :is(.tablebox,.log-table-wrap,.sales-tablebox,.rank-table-wrap,.rp-table-wrap){
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}
body.monochrome-theme :is(.tablebox,.log-table-wrap,.sales-tablebox,.rank-table-wrap,.rp-table-wrap):focus-visible{outline-offset:-2px!important}
body.monochrome-theme :is(.tablebox,.log-table-wrap,.sales-tablebox) thead th{position:sticky;top:0;z-index:2}
body.monochrome-theme tbody tr{transition:background-color .16s ease}
@media (hover:hover){body.monochrome-theme tbody tr:hover{background:rgba(255,255,255,.035)}}

/* Restore native date affordances unless a page supplies its own picker button. */
body.monochrome-theme input[type="date"]::-webkit-calendar-picker-indicator,
body.monochrome-theme input[type="month"]::-webkit-calendar-picker-indicator,
body.monochrome-theme input[type="time"]::-webkit-calendar-picker-indicator{
  display:block!important;
  width:18px!important;
  height:18px!important;
  opacity:.82!important;
  background:initial!important;
  filter:grayscale(1) invert(1)!important;
  cursor:pointer!important;
}
body.monochrome-theme .date-picker-box input::-webkit-calendar-picker-indicator{opacity:0!important;cursor:pointer!important}

/* Neutral information accents. Status colors remain semantic. */
body.monochrome-theme :is(.today-item,.summary-card,.stat)::after{background:rgba(255,255,255,.055)!important;filter:grayscale(1)!important}
body.monochrome-theme :is(.net-money,.item-rate-help,.amount-help b,.price-mini,.vehicle-mini){color:#e4cf9c!important}
body.monochrome-theme .warning-stage.stage2{background:rgba(198,161,91,.15)!important;border-color:rgba(198,161,91,.34)!important;color:#f0d9a8!important}
body.monochrome-theme :is(.empty,.empty-state,.no-data){padding:28px 18px!important;text-align:center!important;color:#aeb6c2!important}
body.monochrome-theme .btn-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
body.monochrome-theme .form-row{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px}
body.monochrome-theme .form-row>label{flex:1 1 220px;margin:0}
body.monochrome-theme .list-row span{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}

/* Desktop/admin shell */
body.app-admin .content>*{min-width:0}
body.app-admin :is(.panel,.card,.tablebox,.calendar-panel,.today-card,.summary-card){max-width:100%}
body.app-admin .sales-tablebox .sales-table{width:100%!important;min-width:1160px!important;table-layout:auto!important}
body.app-admin .log-filter>*{min-width:0}
body.app-admin .mobile-drawer{max-width:none!important}

@media (max-width:1200px){
  body.app-admin .content{padding:20px!important}
  body.app-admin :is(.grid-3,.stats-3){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:900px){
  body.app-admin{overflow-x:hidden!important}
  body.app-admin.mobile-open{overflow:hidden!important}
  body.app-admin .app{max-width:100vw!important;padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;overflow:visible!important}
  body.app-admin .content{width:100%!important;max-width:100vw!important;padding:16px 14px!important;overflow:visible!important}
  body.app-admin .content>*{width:100%!important;max-width:100%!important}
  body.app-admin :is(.panel,.stat,.calendar-panel,.card,.box,.today-card,.summary-card,.sale-item-row,.absence-card,.radio-card,.day,.user,.user-card){max-width:100%!important}
  body.app-admin :is(.tablebox,.log-table-wrap,.sales-tablebox,.rank-table-wrap,.rp-table-wrap){width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important}
  body.app-admin .mobile-drawer{position:fixed!important;inset:0!important;width:auto!important;max-width:none!important;margin:0!important;overflow:visible!important}
  body.app-admin .mobile-drawer-panel{width:min(320px,88vw)!important;max-width:none!important}
  body.app-admin .top{flex-direction:row!important;flex-wrap:nowrap!important;padding:12px 14px!important}
  body.app-admin .top>div:not(.top-actions){min-width:0}
  body.app-admin .top h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.app-admin .top-actions{width:auto!important;margin-left:auto!important;flex:0 0 auto!important}
  body.app-admin .bottom-nav{padding-bottom:calc(8px + env(safe-area-inset-bottom))!important}
}

@media (max-width:760px){
  body.app-admin .content{padding:14px 12px!important}
  body.app-admin :is(.panel,.card,.calendar-panel,.today-card,.summary-card){padding:16px!important;border-radius:18px!important}
  body.app-admin :is(.grid-2,.grid-3,.stats-3,.row){grid-template-columns:1fr!important}
  body.app-admin :is(.log-filter,.sales-filter .row){grid-template-columns:1fr!important}
  body.app-admin :is(.log-filter,.sales-filter) :is(button,.btn){min-height:44px!important}
  body.app-admin .today-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.app-admin .btn-row>*{flex:1 1 132px;min-width:0}
  body.app-admin .btn-row>form>button{width:100%}
}

@media (max-width:560px){
  body.app-admin .activity-main{grid-template-columns:1fr!important}
  body.app-admin .today-grid{grid-template-columns:1fr!important}
  body.app-admin .top-user{min-width:48px!important;padding:6px!important}
  body.app-admin .top h1{font-size:18px!important}
}

/* Mobile shell */
@media (max-width:760px){
  body.app-mobile{overflow-x:hidden!important}
  body.app-mobile :is(input,select,textarea){font-size:16px!important}
  body.app-mobile .m-top{position:relative!important;top:auto!important;padding-top:calc(12px + env(safe-area-inset-top))!important}
  body.app-mobile .m-tabs{position:sticky!important;top:0!important;z-index:35!important;padding:8px 12px!important;scroll-behavior:smooth!important;scrollbar-width:thin!important}
  body.app-mobile .m-tabs a{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;padding:0 14px!important}
  body.app-mobile .m-top-row{display:grid!important;grid-template-columns:minmax(96px,1fr) minmax(0,168px)!important;gap:8px!important;align-items:center!important}
  body.app-mobile .m-brand{width:auto!important;min-width:0!important;flex:auto!important}
  body.app-mobile .m-user-pill{display:grid!important;grid-template-columns:36px minmax(0,1fr) auto!important;width:100%!important;max-width:168px!important;min-width:0!important;height:54px!important;padding:5px 6px!important;gap:6px!important;overflow:hidden!important}
  body.app-mobile .m-user-pill .brand-wolf{width:36px!important;height:36px!important;min-width:36px!important;flex-basis:36px!important;border-radius:12px!important}
  body.app-mobile .m-user-pill .name{max-width:none!important;min-width:0!important;font-size:14px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  body.app-mobile .m-user-pill .name small{font-size:10px!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.app-mobile .m-log-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:42px!important;min-width:42px!important;height:44px!important;min-height:44px!important;padding:0!important;flex-basis:42px!important}
  body.app-mobile .m-page-title{font-size:clamp(24px,7vw,28px)!important;line-height:1.2!important;margin-top:10px!important;overflow-wrap:anywhere}
  body.app-mobile .m-wrap{padding:14px 12px calc(100px + env(safe-area-inset-bottom))!important}
  body.app-mobile .m-wrap>h1,body.app-mobile .m-wrap>.log-mobile-head{display:none!important}
  body.app-mobile :is(.panel,.card,.tablebox,.list-card,.calendar-panel){margin:12px 0!important;padding:16px!important;border-radius:20px!important}
  body.app-mobile .panel>.list-card{margin:10px 0!important;padding:14px!important;border-radius:16px!important;box-shadow:none!important}
  body.app-mobile .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body.app-mobile .stat{min-width:0!important;min-height:96px!important;padding:14px!important}
  body.app-mobile .stat b{font-size:clamp(21px,6.4vw,30px)!important;line-height:1.15!important;overflow-wrap:anywhere}
  body.app-mobile .grid2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.app-mobile :is(.item-head,.rank-head){flex-wrap:wrap!important}
  body.app-mobile :is(.item-head,.rank-head)>*{min-width:0!important}
  body.app-mobile .item-title{min-width:0!important;font-size:17px!important;overflow-wrap:anywhere}
  body.app-mobile .kv{grid-template-columns:76px minmax(0,1fr)!important;gap:8px 10px!important}
  body.app-mobile .kv>*{min-width:0!important}
  body.app-mobile .kv span{overflow-wrap:anywhere!important}
  body.app-mobile :is(.pill,.status-pill,.badge,.role-badge){padding-inline:10px!important}
  body.app-mobile .btn-row>:is(.btn,button,form){flex:1 1 118px!important;min-width:0!important}
  body.app-mobile .btn-row>form>button{width:100%!important}
  body.app-mobile td :is(.btn,button){height:44px!important;min-height:44px!important}
  body.app-mobile .bottom-nav a{display:flex!important;flex-direction:column!important;justify-content:center!important;min-height:48px!important}
  body.app-mobile .rp-check{min-height:44px!important}
  body.app-mobile .rp-modal-card{width:min(520px,100%)!important;max-height:calc(100dvh - 32px)!important;overscroll-behavior:contain}
  body.app-mobile :is(.today-item,.stat,.summary-card,.list-card,.day,.radio-card,.rank-card):hover{transform:none!important}
  body.app-mobile :is(.panel,.tablebox,.calendar-panel,.list-card,.stat,.card){backdrop-filter:blur(8px)!important}
}

@media (max-width:360px){
  body.app-mobile .m-user-pill{max-width:156px!important}
  body.app-mobile :is(.panel,.card,.tablebox,.list-card,.calendar-panel){padding:14px!important}
  body.app-mobile .kv{grid-template-columns:70px minmax(0,1fr)!important}
  body.app-mobile .m-brand-text small{display:none!important}
}

/* Public forms */
body:is(.page-login,.page-register,.page-apply,.page-public,.page-support) :is(input,select,textarea){min-height:46px}
body:is(.page-login,.page-register,.page-apply,.page-public,.page-support) :is(.login-card,.register-card,.apply-card,.support-card){max-width:100%}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}