/* KAPO ERP V26 — universal mobile compatibility layer */
:root{
  --kapo-mobile-gold:#d4a514;
  --kapo-mobile-soft:#fff8df;
  --kapo-mobile-line:#eadfbe;
  --kapo-mobile-ink:#2e2418;
}

/* Safe defaults on every viewport */
img,svg,video,canvas{max-width:100%;height:auto}
iframe{max-width:100%}
.table-responsive,.kapo-table-scroll{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.kapo-mobile-scroll-hint{display:none}
.kapo-mobile-actions{display:flex;gap:8px;flex-wrap:wrap}
.kapo-mobile-actions>*{max-width:100%}
.kapo-responsive-grid{min-width:0}
.kapo-responsive-grid>*{min-width:0}

/* protect desktop from oversized fixed elements embedded in old pages */
.main-content,.main-content>.card,.main-content form,.main-content fieldset{min-width:0;max-width:100%}
.main-content pre,.main-content code{max-width:100%;overflow:auto}

@media (max-width: 900px){
  html,body{max-width:100%;overflow-x:hidden}
  body{-webkit-text-size-adjust:100%;text-size-adjust:100%}

  .main-content{
    width:100%!important;
    max-width:100%!important;
    margin-right:0!important;
    margin-left:0!important;
    padding:10px!important;
    overflow-x:hidden!important;
  }

  .main-content>.card,
  .main-content .card{
    width:100%!important;
    max-width:100%!important;
    padding:13px!important;
    border-radius:16px!important;
  }

  /* Old inline desktop grids collapse safely */
  .main-content [style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .main-content [style*="grid-column:span"]{
    grid-column:1/-1!important;
  }
  .main-content [style*="display:grid"]>*{min-width:0!important}

  /* Old toolbar / header flex rows */
  .main-content [style*="display:flex"]{
    max-width:100%!important;
    flex-wrap:wrap!important;
  }
  .main-content form[style*="display:flex"]{
    align-items:stretch!important;
  }
  .main-content form[style*="display:flex"]>*{
    flex:1 1 220px!important;
    max-width:100%!important;
  }

  /* Inputs made finger-friendly */
  .main-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .main-content select,
  .main-content textarea,
  .main-content .form-control{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    font-size:16px!important; /* prevents iOS zoom */
  }
  .main-content input[type="date"],
  .main-content input[type="time"],
  .main-content input[type="datetime-local"]{
    min-width:0!important;
  }

  /* Buttons/links */
  .main-content button,
  .main-content input[type="submit"],
  .main-content input[type="button"],
  .main-content .btn-primary,
  .main-content a.btn-primary{
    min-height:44px!important;
    padding:10px 13px!important;
    line-height:1.35!important;
    white-space:normal!important;
    text-align:center;
    touch-action:manipulation;
  }

  /* Universal table behavior */
  .table-responsive,
  .kapo-table-scroll{
    position:relative;
    margin:8px 0;
    border:1px solid var(--kapo-mobile-line);
    border-radius:14px;
    background:#fff;
  }
  .table-responsive table,
  .kapo-table-scroll table,
  .main-content table{
    width:max-content!important;
    min-width:680px!important;
    max-width:none!important;
    margin:0!important;
    font-size:12.5px!important;
  }
  .main-content th,.main-content td{
    padding:8px!important;
    white-space:nowrap!important;
    vertical-align:middle!important;
  }
  .kapo-mobile-scroll-hint{
    display:flex;
    align-items:center;
    gap:6px;
    color:#8a6a16;
    background:#fff8df;
    border:1px solid #ead58d;
    border-radius:10px;
    padding:7px 10px;
    margin:8px 0 5px;
    font-size:11px;
  }

  /* Cards inside dashboards */
  .main-content [style*="repeat(7"],
  .main-content [style*="repeat(6"],
  .main-content [style*="repeat(5"],
  .main-content [style*="repeat(4"],
  .main-content [style*="repeat(3"],
  .main-content [style*="repeat(2"]{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Fixed-width old controls */
  .main-content [style*="width:210mm"],
  .main-content [style*="width: 210mm"],
  .main-content [style*="width:1000px"],
  .main-content [style*="width: 1000px"],
  .main-content [style*="width:900px"],
  .main-content [style*="width: 900px"],
  .main-content [style*="width:800px"],
  .main-content [style*="width: 800px"]{
    width:100%!important;
    max-width:100%!important;
  }

  /* Modal-like panels */
  .main-content [style*="position:fixed"]{
    max-width:calc(100vw - 18px)!important;
  }

  h1{font-size:1.45rem!important}
  h2{font-size:1.24rem!important}
  h3{font-size:1.05rem!important}
  p,li,label{line-height:1.7}

  /* Draft banner */
  .kapo-draft-banner{
    align-items:center!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
  }
  .kapo-draft-banner button{width:auto!important}

  /* Better mobile top bar */
  .mobile-topbar{
    min-height:64px;
    padding:max(8px,env(safe-area-inset-top)) 10px 8px!important;
  }
  .mobile-topbar .mobile-title{
    min-width:0;
    font-size:14px;
  }

  /* Sidebar occupies device safely */
  .sidebar{
    max-width:92vw!important;
    padding-bottom:max(24px,env(safe-area-inset-bottom));
  }
  .sidebar-header{
    padding-top:max(16px,env(safe-area-inset-top))!important;
  }
}

@media (max-width: 560px){
  .main-content{padding:7px!important}
  .main-content>.card,.main-content .card{padding:10px!important;border-radius:14px!important}

  .main-content form[style*="display:flex"]>*{flex-basis:100%!important}
  .main-content button,
  .main-content input[type="submit"],
  .main-content .btn-primary,
  .main-content a.btn-primary{
    width:100%;
  }
  .main-content [style*="justify-content:space-between"]{
    justify-content:flex-start!important;
  }

  .table-responsive table,
  .kapo-table-scroll table,
  .main-content table{
    min-width:620px!important;
    font-size:11.5px!important;
  }

  .main-content [style*="font-size:22px"],
  .main-content [style*="font-size: 22px"]{font-size:18px!important}
  .main-content [style*="font-size:1.7rem"],
  .main-content [style*="font-size: 1.7rem"]{font-size:1.35rem!important}

  /* Keep totals/actions readable */
  .main-content tfoot th,.main-content tfoot td{font-weight:800!important}
}

/* Standalone print/document screens when viewed on mobile */
@media screen and (max-width:850px){
  body.kapo-document-mobile,
  body:has(.sheet){
    overflow-x:hidden!important;
  }
  .sheet{
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:5px!important;
    box-shadow:none!important;
    border-radius:0!important;
  }
  .sheet .frame{min-height:0!important;border-radius:12px!important}
  .sheet .header{height:auto!important;min-height:100px!important;flex-wrap:wrap!important;gap:8px}
  .sheet .brand{min-width:0}
  .sheet .info{grid-template-columns:1fr!important}
  .sheet .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .sheet table{min-width:700px!important}
  .sheet .summary{width:98%!important;grid-template-columns:1fr!important}
  .sheet .extracts{gap:8px!important;flex-wrap:wrap!important;padding:10px!important}
  .sheet .footer{position:static!important;flex-wrap:wrap!important;gap:5px!important}
  .actions{width:100%!important;flex-wrap:wrap!important;padding:0 8px}
  .actions>*{flex:1 1 140px!important}
}

@media print{
  .kapo-mobile-scroll-hint{display:none!important}
}


/* shared navigation/detail polish */
.kapo-back-btn{
  margin:0 0 14px;
  background:#fff!important;
  color:#7a5900!important;
  border:1px solid #dec56e!important;
  padding:10px 14px!important;
  border-radius:13px!important;
  font-weight:800!important;
  box-shadow:0 5px 14px rgba(61,43,18,.06)!important;
}
.sidebar>div[style*="border-top"]{
  border-top:1px solid var(--kapo-mobile-line)!important;
  color:#7f705c!important;
  background:#fffaf0!important;
}
.sidebar>div[style*="border-top"] a{color:#a0362d!important}
.mobile-topbar>a[href="logout.php"]{
  color:#9c332e!important;
  background:#fff1ef;
  border:1px solid #f0cac5;
  border-radius:10px;
  padding:7px 9px;
}
#installAppBtn{
  background:linear-gradient(135deg,#fff4ce,#d4a514)!important;
  color:#2e2418!important;
  border:1px solid #c99a22!important;
}

@media(max-width:560px){
  .kapo-back-btn{width:100%!important}
}