/*
 KET Intranet v5.22
 Forced mobile layout.
 Applied when <html class="mobile-ui"> is set by index/app detection.
*/

html.mobile-ui{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

html.mobile-ui body{
  overflow-x:hidden !important;
  padding-bottom:calc(70px + env(safe-area-inset-bottom)) !important;
}

html.mobile-ui body.mobile-nav-open{
  overflow:hidden !important;
}

/* ---------- Header ---------- */
html.mobile-ui .topbar{
  height:60px !important;
  min-height:60px !important;
  padding:8px 10px !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  position:sticky !important;
  top:0 !important;
  z-index:200 !important;
}

html.mobile-ui .brand{
  min-width:0 !important;
  flex:1 1 auto !important;
  gap:8px !important;
  overflow:hidden !important;
}

html.mobile-ui .brand .mark{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  border-radius:10px !important;
  font-size:12px !important;
}

html.mobile-ui .brand>div:last-child{
  min-width:0 !important;
}

html.mobile-ui .brand b{
  display:block !important;
  max-width:100% !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  font-size:14px !important;
}

html.mobile-ui .brand small{
  display:none !important;
}

html.mobile-ui .userbox{
  display:flex !important;
  flex:none !important;
  margin-left:0 !important;
  gap:4px !important;
}

html.mobile-ui .userbox b{
  display:block !important;
  max-width:64px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:10px !important;
}

html.mobile-ui .userbox span,
html.mobile-ui .userbox button{
  display:none !important;
}

html.mobile-ui .mobile-menu-btn{
  display:flex !important;
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  gap:4px !important;
  border:0 !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.12) !important;
  padding:0 !important;
  order:3 !important;
}

html.mobile-ui .mobile-menu-btn span{
  display:block !important;
  width:19px !important;
  height:2px !important;
  border-radius:999px !important;
  background:#fff !important;
}

/* ---------- Drawer ---------- */
html.mobile-ui .nav{
  position:fixed !important;
  top:0 !important;
  right:-340px !important;
  bottom:0 !important;
  z-index:230 !important;
  width:min(320px,88vw) !important;
  height:100vh !important;
  height:100dvh !important;
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  gap:5px !important;
  padding:18px 14px calc(20px + env(safe-area-inset-bottom)) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  background:linear-gradient(180deg,#082a47 0%,#0a3457 100%) !important;
  box-shadow:-18px 0 45px rgba(5,30,55,.30) !important;
  transition:right .22s ease !important;
}

html.mobile-ui body.mobile-nav-open .nav{
  right:0 !important;
}

html.mobile-ui .nav>button{
  display:block !important;
  width:100% !important;
  min-height:45px !important;
  flex:0 0 auto !important;
  text-align:left !important;
  padding:12px 14px !important;
  border-radius:10px !important;
  font-size:14px !important;
}

html.mobile-ui .mobile-nav-profile{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:8px 6px 15px !important;
  margin-bottom:5px !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
}

html.mobile-ui .mobile-nav-profile-mark{
  width:40px !important;
  height:40px !important;
  display:grid !important;
  place-items:center !important;
  flex:none !important;
  border-radius:11px !important;
  background:#1769d3 !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:900 !important;
}

html.mobile-ui .mobile-nav-profile b{
  display:block !important;
  color:#fff !important;
  font-size:14px !important;
}

html.mobile-ui .mobile-nav-profile span{
  display:block !important;
  margin-top:3px !important;
  color:#b9cee2 !important;
  font-size:10px !important;
}

html.mobile-ui .mobile-nav-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:7px !important;
  margin-top:auto !important;
  padding-top:12px !important;
  border-top:1px solid rgba(255,255,255,.14) !important;
}

html.mobile-ui .mobile-nav-actions button{
  display:block !important;
  min-height:42px !important;
  text-align:center !important;
  background:rgba(255,255,255,.08) !important;
  color:#e6f0fa !important;
}

html.mobile-ui .mobile-nav-backdrop{
  display:none !important;
  position:fixed !important;
  inset:0 !important;
  z-index:220 !important;
  background:rgba(4,19,32,.50) !important;
  backdrop-filter:blur(2px);
}

html.mobile-ui body.mobile-nav-open .mobile-nav-backdrop{
  display:block !important;
}

/* ---------- Bottom navigation ---------- */
html.mobile-ui .mobile-bottom-nav{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:180 !important;
  min-height:64px !important;
  padding:5px 7px calc(5px + env(safe-area-inset-bottom)) !important;
  border-top:1px solid #d9e3ee !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 -5px 20px rgba(31,65,105,.11) !important;
  backdrop-filter:blur(12px);
}

html.mobile-ui .mobile-bottom-nav button{
  min-width:0 !important;
  min-height:50px !important;
  border:0 !important;
  background:transparent !important;
  color:#74869b !important;
  border-radius:10px !important;
  padding:3px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
}

html.mobile-ui .mobile-bottom-nav button span{
  font-size:19px !important;
  line-height:1 !important;
}

html.mobile-ui .mobile-bottom-nav button b{
  font-size:9px !important;
}

html.mobile-ui .mobile-bottom-nav button.active{
  color:#1769d3 !important;
  background:#eef5ff !important;
}

/* ---------- Main layout ---------- */
html.mobile-ui .container{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:14px 10px 20px !important;
}

html.mobile-ui .hero{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:10px !important;
  margin-bottom:13px !important;
}

html.mobile-ui .hero h1{
  font-size:22px !important;
  line-height:1.25 !important;
  margin:0 0 5px !important;
}

html.mobile-ui .hero p{
  font-size:11px !important;
  line-height:1.55 !important;
}

html.mobile-ui .hero>.btn,
html.mobile-ui .hero>.actions,
html.mobile-ui .hero .actions .btn{
  width:100% !important;
}

html.mobile-ui .panel{
  padding:13px !important;
  margin-bottom:12px !important;
  border-radius:14px !important;
}

html.mobile-ui .panel h2{
  font-size:17px !important;
}

html.mobile-ui .panel-head{
  gap:8px !important;
  flex-wrap:wrap !important;
}

html.mobile-ui .grid2,
html.mobile-ui .grid13,
html.mobile-ui .form2,
html.mobile-ui .form3,
html.mobile-ui .timeline-grid,
html.mobile-ui .equipment-detail-top,
html.mobile-ui .equipment-detail-grid,
html.mobile-ui .project-detail-grid{
  grid-template-columns:1fr !important;
}

html.mobile-ui .stats,
html.mobile-ui .personal-stats,
html.mobile-ui .admin-leave-summary,
html.mobile-ui .expense-summary-grid,
html.mobile-ui .personal-expense-summary,
html.mobile-ui .expense-ledger-summary,
html.mobile-ui .equipment-summary-grid,
html.mobile-ui .project-summary-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  margin-bottom:12px !important;
}

html.mobile-ui .stat{
  min-width:0 !important;
  padding:12px !important;
  border-radius:13px !important;
}

html.mobile-ui .stat strong{
  font-size:24px !important;
}

html.mobile-ui input,
html.mobile-ui select,
html.mobile-ui textarea{
  min-height:46px !important;
  font-size:16px !important;
  padding:10px 11px !important;
  border-radius:10px !important;
}

html.mobile-ui textarea{
  min-height:88px !important;
}

html.mobile-ui .btn{
  min-height:42px !important;
  padding:10px 12px !important;
}

html.mobile-ui .btn.tiny{
  min-height:36px !important;
  padding:8px 10px !important;
}

/* ---------- Filters ---------- */
html.mobile-ui .equipment-list-head,
html.mobile-ui .project-list-head,
html.mobile-ui .admin-leave-head,
html.mobile-ui .expense-panel-head{
  flex-direction:column !important;
  align-items:stretch !important;
}

html.mobile-ui .equipment-filters,
html.mobile-ui .project-filters,
html.mobile-ui .admin-leave-tools,
html.mobile-ui .expense-tools{
  width:100% !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:7px !important;
}

html.mobile-ui .equipment-filters input,
html.mobile-ui .equipment-filters select,
html.mobile-ui .project-filters input,
html.mobile-ui .project-filters select,
html.mobile-ui .admin-leave-tools input,
html.mobile-ui .expense-tools input,
html.mobile-ui .expense-tools select{
  width:100% !important;
  min-width:0 !important;
}

/* ---------- Tables become cards ---------- */
html.mobile-ui .table-wrap:not(.expense-ledger-wrap){
  overflow:visible !important;
}

html.mobile-ui table.mobile-card-table{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  font-size:12px !important;
}

html.mobile-ui table.mobile-card-table thead{
  display:none !important;
}

html.mobile-ui table.mobile-card-table tbody{
  display:grid !important;
  width:100% !important;
  gap:9px !important;
}

html.mobile-ui table.mobile-card-table tbody tr{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  border:1px solid #dce6f0 !important;
  border-radius:13px !important;
  background:#fff !important;
  padding:8px 11px !important;
}

html.mobile-ui table.mobile-card-table tbody td,
html.mobile-ui table.mobile-card-table.leave-admin-table tbody td,
html.mobile-ui table.mobile-card-table.leave-admin-table .leave-rate-cell{
  display:flex !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:8px 0 !important;
  border:0 !important;
  border-bottom:1px solid #edf1f5 !important;
  text-align:right !important;
  white-space:normal !important;
}

html.mobile-ui table.mobile-card-table tbody td:last-child{
  border-bottom:0 !important;
}

html.mobile-ui table.mobile-card-table tbody td::before{
  content:attr(data-label) !important;
  flex:0 0 32% !important;
  max-width:32% !important;
  color:#75869a !important;
  font-size:10px !important;
  font-weight:900 !important;
  line-height:1.45 !important;
  text-align:left !important;
}

html.mobile-ui table.mobile-card-table tbody td.mobile-full-cell{
  display:block !important;
  text-align:center !important;
  padding:18px 4px !important;
}

html.mobile-ui table.mobile-card-table tbody td.mobile-full-cell::before{
  display:none !important;
}

html.mobile-ui .employee-admin-actions,
html.mobile-ui .schedule-row-actions,
html.mobile-ui .equipment-actions,
html.mobile-ui .project-actions,
html.mobile-ui .leave-decision-actions{
  min-width:0 !important;
  max-width:68% !important;
  justify-content:flex-end !important;
  margin-left:auto !important;
}

/* ---------- Schedule / Leave calendars ---------- */
html.mobile-ui .calendar-toolbar,
html.mobile-ui .leave-calendar-toolbar{
  gap:6px !important;
}

html.mobile-ui .calendar-toolbar button,
html.mobile-ui .leave-calendar-toolbar button{
  min-height:38px !important;
  padding:8px 8px !important;
  font-size:10px !important;
}

html.mobile-ui .calendar{
  width:100% !important;
  table-layout:fixed !important;
}

html.mobile-ui .day{
  min-height:68px !important;
  padding:4px !important;
}

html.mobile-ui .leave-day{
  min-height:62px !important;
  padding:4px !important;
}

html.mobile-ui .daynum,
html.mobile-ui .leave-daynum{
  font-size:10px !important;
}

html.mobile-ui .cal-event.schedule-user-color{
  min-height:7px !important;
  height:7px !important;
  padding:0 !important;
  margin:2px 0 !important;
  border-radius:999px !important;
  font-size:0 !important;
  overflow:hidden !important;
}

html.mobile-ui .leave-cal-event{
  min-height:8px !important;
  height:8px !important;
  padding:0 !important;
  border-radius:999px !important;
  font-size:0 !important;
  overflow:hidden !important;
}

/* ---------- Expense ledger ---------- */
html.mobile-ui .expense-control-row{
  flex-direction:column !important;
  align-items:stretch !important;
}

html.mobile-ui .expense-control-group{
  width:100% !important;
}

html.mobile-ui .expense-control-group select{
  width:100% !important;
  min-width:0 !important;
}

html.mobile-ui .expense-month-tabs,
html.mobile-ui .project-type-tabs,
html.mobile-ui .leave-approval-tabs{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  gap:7px !important;
  scrollbar-width:none;
}

html.mobile-ui .expense-month-tabs::-webkit-scrollbar,
html.mobile-ui .project-type-tabs::-webkit-scrollbar,
html.mobile-ui .leave-approval-tabs::-webkit-scrollbar{
  display:none;
}

html.mobile-ui .expense-month-tab{
  min-width:92px !important;
  flex:0 0 92px !important;
}

html.mobile-ui .project-type-tab,
html.mobile-ui .leave-approval-tab{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

html.mobile-ui .expense-ledger-wrap{
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
  margin:0 -13px !important;
  padding:0 13px 10px !important;
}

html.mobile-ui .expense-ledger-table{
  min-width:1300px !important;
}

html.mobile-ui .expense-ledger-table .expense-date-col,
html.mobile-ui .expense-ledger-table .expense-date-cell{
  position:sticky !important;
  left:0 !important;
  z-index:4 !important;
  box-shadow:4px 0 8px rgba(31,65,105,.06) !important;
}

html.mobile-ui .expense-ledger-table .expense-date-col{
  background:#f8fbff !important;
}

html.mobile-ui .expense-ledger-table .expense-date-cell{
  background:#fff !important;
}

/* ---------- Modals become bottom sheets ---------- */
html.mobile-ui .modal-backdrop{
  align-items:flex-end !important;
  padding:0 !important;
}

html.mobile-ui .modal{
  width:100% !important;
  max-width:none !important;
  max-height:94vh !important;
  max-height:94dvh !important;
  margin:0 !important;
  border-radius:22px 22px 0 0 !important;
  padding:18px 14px calc(20px + env(safe-area-inset-bottom)) !important;
  overflow-y:auto !important;
}

html.mobile-ui .equipment-modal-wide,
html.mobile-ui .equipment-detail-modal,
html.mobile-ui .equipment-photo-modal,
html.mobile-ui .project-modal-wide,
html.mobile-ui .project-detail-modal{
  width:100% !important;
  max-width:none !important;
}

html.mobile-ui .member-grid{
  grid-template-columns:1fr !important;
  max-height:260px !important;
}

/* ---------- Login ---------- */
html.mobile-ui .login-bg{
  padding:14px !important;
}

html.mobile-ui .login-card{
  width:100% !important;
  max-width:430px !important;
  padding:24px 18px !important;
  border-radius:18px !important;
}

@media(max-width:390px){
  html.mobile-ui .container{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  html.mobile-ui .stat{
    padding:10px !important;
  }

  html.mobile-ui .stat strong{
    font-size:21px !important;
  }
}