/* =====================================================================
   LDP JPM v10.6 — Admin proportional layout + OAuth/camera hardening UI
   Loaded last. Focus: prevent compressed/overlapping tables, make module
   navigation proportional, and keep controls readable on all breakpoints.
   ===================================================================== */

:root{--v106-admin-max:1480px;--v106-table-line:#e5e9f2;--v106-head:#f6f8fc;--v106-text:#20283d;--v106-muted:#687286}

/* ---------- Admin canvas ---------- */
body.admin .adm-main{min-width:0!important;overflow-x:hidden}
body.admin .adm-content{
  width:min(calc(100% - 34px),var(--v106-admin-max))!important;
  max-width:var(--v106-admin-max)!important;
  margin-inline:auto!important;
  padding:1.15rem 0 2.5rem!important;
  min-width:0!important;
}
body.admin .adm-content>*{min-width:0;max-width:100%}
body.admin .adm-panel{width:100%;max-width:100%;min-width:0;overflow:hidden!important}
body.admin .adm-panel .panel-head{width:100%;min-width:0}
body.admin .adm-panel .panel-head>*{min-width:0}
body.admin .adm-panel .panel-head h3,
body.admin .adm-panel .panel-head p{overflow-wrap:normal;word-break:normal}

/* ---------- Unified module tabs ----------
   Desktop/tablet: wrap naturally instead of cutting the last items.
   Phone: horizontal swipe is retained for compactness. */
body.admin .adm-tabs{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:.5rem!important;
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
  padding:.55rem!important;
  margin:0 0 1.1rem!important;
  border:1px solid #e2e7f0!important;
  border-radius:14px!important;
  background:#fff!important;
}
body.admin .adm-tabs .adm-tab{
  flex:0 1 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px!important;
  padding:.62rem .9rem!important;
  border-radius:10px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}

/* ---------- Universal admin table guard ---------- */
body.admin .table-wrap,
body.admin .v106-table-wrap{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  border:1px solid var(--v106-table-line)!important;
  border-radius:12px!important;
  background:#fff!important;
}
body.admin .table-wrap>table,
body.admin .v106-table-wrap>table{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  table-layout:auto!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
body.admin table.data,
body.admin table.table,
body.admin table.table-admin{
  table-layout:auto!important;
  width:100%!important;
  max-width:none!important;
}
body.admin table.data th,
body.admin table.data td,
body.admin table.table th,
body.admin table.table td,
body.admin table.table-admin th,
body.admin table.table-admin td{
  box-sizing:border-box!important;
  min-width:0;
  vertical-align:middle!important;
  line-height:1.42!important;
  white-space:normal;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}
body.admin table.data thead th,
body.admin table.table thead th,
body.admin table.table-admin thead th{
  white-space:nowrap!important;
  background:var(--v106-head)!important;
}
body.admin table.v106-cols-5{min-width:820px!important}
body.admin table.v106-cols-6{min-width:980px!important}
body.admin table.v106-cols-7{min-width:1080px!important}
body.admin table.v106-cols-8{min-width:1180px!important}
body.admin table.v106-cols-9,
body.admin table.v106-cols-10,
body.admin table.v106-cols-many{min-width:1320px!important}
body.admin table .v106-col-actions{min-width:118px!important;white-space:nowrap!important}
body.admin table .v106-col-status{min-width:95px!important;white-space:nowrap!important}
body.admin table .v106-col-date{min-width:118px!important;white-space:nowrap!important}
body.admin table .v106-col-person{min-width:220px!important}
body.admin table .v106-col-title{min-width:220px!important}
body.admin table .v106-col-email{min-width:210px!important}
body.admin table td .actions,
body.admin table td .row-actions,
body.admin table td .table-actions{max-width:100%;flex-wrap:wrap!important;justify-content:flex-start!important}

/* ---------- Attendance monitoring: screenshot-specific correction ---------- */
body.admin .attendance-live .table-wrap{overflow-x:auto!important}
body.admin .presence-table{
  width:100%!important;
  min-width:1180px!important;
  table-layout:fixed!important;
  font-size:.82rem!important;
}
body.admin .presence-table th:nth-child(1){width:100px!important}
body.admin .presence-table th:nth-child(2){width:245px!important}
body.admin .presence-table th:nth-child(3){width:265px!important}
body.admin .presence-table th:nth-child(4){width:360px!important}
body.admin .presence-table th:nth-child(5){width:110px!important}
body.admin .presence-table th:nth-child(6){width:130px!important}
body.admin .presence-table th,
body.admin .presence-table td{padding:.78rem .75rem!important;overflow:hidden!important}
body.admin .presence-user{display:grid!important;grid-template-columns:52px minmax(0,1fr)!important;align-items:center!important;gap:.7rem!important;width:100%!important;min-width:0!important}
body.admin .presence-photo{width:52px!important;height:52px!important;min-width:52px!important;flex:none!important}
body.admin .presence-user-copy{display:block!important;min-width:0!important;max-width:100%!important}
body.admin .presence-user-copy strong,
body.admin .presence-user-copy span{display:block!important;max-width:100%!important;white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important}
body.admin .presence-user-copy strong{line-height:1.35!important}
body.admin .presence-table td:nth-child(3) strong,
body.admin .presence-table td:nth-child(4)>span{display:block;max-width:100%;white-space:normal!important;overflow-wrap:anywhere!important}
body.admin .presence-path{display:block!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
body.admin .attendance-live-stats .stat-card{min-height:98px!important;align-items:center!important}
body.admin .attendance-live-stats .stat-card b{display:block;line-height:1.05!important}
body.admin .attendance-live-stats .stat-card small{display:block;margin-top:.22rem;line-height:1.35!important}

/* Absensi settings and recap */
body.admin .attendance-setting-table{min-width:940px!important;table-layout:auto!important}
body.admin .attendance-setting-table td:nth-child(1),
body.admin .attendance-setting-table td:nth-child(2){min-width:235px!important}
body.admin .attendance-setting-table td:last-child{min-width:185px!important}
body.admin .attendance-toggle-form{display:flex!important;align-items:center!important;gap:.55rem!important;flex-wrap:wrap!important}
body.admin .attendance-recap-table{min-width:930px!important}

/* ---------- Toolbar/form consistency ---------- */
body.admin .toolbar,
body.admin .table-toolbar,
body.admin .adm-filter{
  display:flex!important;
  align-items:flex-end!important;
  flex-wrap:wrap!important;
  gap:.65rem!important;
  width:100%!important;
}
body.admin .toolbar>:is(input,select),
body.admin .table-toolbar>:is(input,select),
body.admin .adm-filter>:is(input,select){min-height:42px;max-width:100%}
body.admin .toolbar input[type=search]{flex:1 1 260px!important}
body.admin .toolbar select{flex:0 1 290px!important}

/* ---------- Security / Google OAuth diagnostics ---------- */
.oauth-health{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1rem 0}
.oauth-health-card{padding:.9rem 1rem;border:1px solid #e1e6ef;border-radius:12px;background:#f9fbff;min-width:0}
.oauth-health-card strong{display:block;margin-bottom:.25rem;color:#26304a}
.oauth-health-card code{display:block;max-width:100%;overflow:auto;white-space:nowrap;padding:.45rem .55rem;border-radius:8px;background:#fff;border:1px solid #e2e7ef;font-size:.76rem}
.oauth-health-ok{border-color:#bfe8cf;background:#f2fbf6}
.oauth-health-warn{border-color:#f0d9a6;background:#fffaf0}
.oauth-copy-row{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}
.oauth-copy-row code{flex:1 1 420px}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  body.admin .adm-content{width:calc(100% - 26px)!important}
  body.admin .adm-tabs{gap:.4rem!important}
  body.admin .adm-tabs .adm-tab{font-size:.82rem!important;padding:.58rem .78rem!important}
  .oauth-health{grid-template-columns:1fr}
}
@media(max-width:760px){
  body.admin .adm-tabs{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    scrollbar-width:thin;
    justify-content:flex-start!important;
  }
  body.admin .adm-tabs .adm-tab{flex:0 0 auto!important}
  /* Let existing mobile card layout own tables below this breakpoint. */
  body.admin table.data.v106-cols-5,
  body.admin table.data.v106-cols-6,
  body.admin table.data.v106-cols-7,
  body.admin table.data.v106-cols-8,
  body.admin table.data.v106-cols-9,
  body.admin table.data.v106-cols-10,
  body.admin table.data.v106-cols-many{min-width:0!important}
  body.admin .presence-table{min-width:0!important;table-layout:auto!important}
  body.admin .attendance-setting-table,
  body.admin .attendance-recap-table{min-width:0!important}
  body.admin .toolbar,body.admin .table-toolbar,body.admin .adm-filter{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important}
  body.admin .toolbar>*,body.admin .table-toolbar>*,body.admin .adm-filter>*{width:100%!important;max-width:none!important}
  .oauth-copy-row{display:grid;grid-template-columns:1fr}
}