/* ISHLO Responsive App Layer v2026.10.07
   Presentation-only layer. It does not change business logic, endpoints, storage or form names. */
*,*::before,*::after{box-sizing:border-box;}
:root{
  --mx-touch:48px;
  --mx-radius:16px;
  --mx-safe-bottom:env(safe-area-inset-bottom,0px);
}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{overflow-x:hidden;}
img,svg,video,canvas{max-width:100%;height:auto;}
button,a,input,select,textarea{touch-action:manipulation;}
button,.btn,[role="button"],input[type="submit"],input[type="button"],input[type="reset"],.icon-btn{
  min-height:var(--mx-touch);
}
.icon-btn{min-width:var(--mx-touch);}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid rgba(40,96,220,.32);outline-offset:2px;}
input,select,textarea{font-size:16px;max-width:100%;}
textarea{overflow:auto;}
input[type="checkbox"],input[type="radio"]{accent-color:#2860dc;}
input[type="file"]{min-height:var(--mx-touch);padding:8px;}

/* Prevent accidental desktop-width children from forcing page-level horizontal scrolling. */
.wrap,.page,.employee-shell,.main-content,.app-layout,.card,.hero,.box,.shell,.form-grid,.grid,.section-head,.actions{min-width:0;}
.table-wrap,.timecard-table,.history-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
.table-wrap table,.timecard-table table,.history-table table{max-width:none;}

/* Desktop remains the source layout. Tablet becomes denser without becoming a phone UI. */
@media (min-width:768px) and (max-width:1199px){
  .wrap{width:min(100% - 32px,1280px);padding:22px 0 58px!important;}
  .page{width:min(100% - 32px,1440px);padding:20px 0 58px;}
  .employee-shell{padding:22px 16px 64px!important;}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .section-head,.card-head{gap:14px;}
  .actions{gap:8px;}
  .topbar,.top,.employee-brand-row{gap:14px;}
  .nav,.employee-nav{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .nav::-webkit-scrollbar,.employee-nav::-webkit-scrollbar{display:none;}
  .nav a,.employee-nav-link{white-space:nowrap;min-height:44px;}
  .table-wrap table{min-width:680px;}
  .modal{padding:24px;}
  .modal-card{max-height:calc(100dvh - 48px);overflow:auto;}
  .offer-page{padding:42px 44px;min-height:820px;}
  .offer-scroll{height:min(760px,75dvh);}
}

/* Phone: app-like shell, one-column forms, large actions, no page-level two-axis scrolling. */
@media (max-width:767px){
  body{padding-bottom:var(--mx-safe-bottom);}
  .wrap,.page{width:100%!important;max-width:none!important;padding:12px 12px calc(76px + var(--mx-safe-bottom))!important;}
  .employee-shell{width:100%!important;max-width:none!important;padding:12px 12px calc(88px + var(--mx-safe-bottom))!important;}
  .topbar,.top,.employee-brand-row,.section-head,.card-head,.hero,.hero-brand,.account{align-items:stretch;}
  .topbar,.top{flex-direction:column;gap:12px;}
  .account{width:100%;}
  .account .user{padding:0!important;border:0!important;text-align:left!important;}
  .brand-logo img,.brand img{width:140px;max-height:48px;object-fit:contain;}
  .title,.hero h1{font-size:25px!important;line-height:1.18;}
  .subtitle,.hero p{font-size:13px;line-height:1.55;}
  .hero{padding:18px!important;margin-bottom:14px;}
  .hero-icon{width:50px!important;height:50px!important;}
  .hero-icon img{width:38px!important;height:38px!important;}
  .card{padding:16px!important;border-radius:17px!important;margin-bottom:14px;}
  .grid,.form-grid,.quick,.review-grid,.review-info-grid,.manage-actions{grid-template-columns:1fr!important;}
  .full{grid-column:auto!important;}
  .section-head,.card-head{flex-direction:column;align-items:stretch;}
  .section-head>.btn,.card-head>.btn,.section-head>a.btn,.card-head>a.btn{width:100%;}
  .actions{display:grid;grid-template-columns:1fr;gap:9px;}
  .actions>*{width:100%!important;min-width:0!important;}
  .btn{width:100%;min-height:48px;padding:11px 14px;font-size:14px;}
  .field{min-width:0;}
  .field label{font-size:13px;margin-bottom:7px;}
  .field input,.field select,.field textarea{min-height:48px;padding:11px 13px;border-radius:12px;}
  .field textarea{min-height:120px;}
  .pill-row{gap:7px;}
  .badge{min-height:32px;align-items:center;}
  .nav,.employee-nav{position:sticky;top:0;z-index:18;overflow-x:auto;flex-wrap:nowrap;padding:5px;margin:0 0 12px;border-radius:13px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .nav::-webkit-scrollbar,.employee-nav::-webkit-scrollbar{display:none;}
  .nav a,.employee-nav-link{flex:0 0 auto;white-space:nowrap;min-height:44px;padding:10px 13px;}
  .table-wrap{border-radius:13px;}
  .table-wrap table{min-width:680px;}
  .table-wrap th,.table-wrap td{padding:11px 12px;}
  .table-wrap th{position:sticky;top:0;z-index:2;}
  .table-wrap td .btn,.table-wrap td button{width:auto;min-width:44px;}
  .table-wrap .actions{display:flex;}
  .modal{align-items:flex-end;padding:0;}
  .modal-card{width:100%;max-width:none;max-height:92dvh;overflow:auto;border-radius:20px 20px 0 0;padding:18px 16px calc(20px + var(--mx-safe-bottom));}
  .modal-card .actions{position:sticky;bottom:0;background:inherit;padding-top:10px;}
  .close{min-width:44px;min-height:44px;}
  .notice,.error{font-size:13px;line-height:1.5;}
  .employee-page-heading{align-items:stretch!important;flex-direction:column!important;gap:12px!important;}
  .employee-page-heading h1{font-size:25px!important;}
  .employee-user-area{width:100%;justify-content:space-between;}
  .employee-signout,.employee-back{min-height:48px;}
  .employee-nav{margin-top:12px;}
  .employee-brand img{width:140px!important;}
  footer,.site-footer,.employee-footer{padding-bottom:calc(24px + var(--mx-safe-bottom))!important;}

  /* Candidate/onboarding */
  .profile-grid,.verification-grid{grid-template-columns:1fr!important;}
  .box,.shell{width:calc(100% - 20px)!important;max-width:none!important;padding:20px!important;border-radius:20px!important;}
  .box h1,.shell h1{font-size:25px!important;}
  .offer-actions{flex-direction:column;align-items:stretch;gap:12px;}
  .offer-actions .btn{width:100%;}
  .offer-scroll{height:68dvh;padding:12px;border-radius:14px;}
  .offer-page{min-height:auto;padding:28px 20px 54px;margin-bottom:14px;}
  .offer-page h3{font-size:24px;margin:34px 0 18px;}
  .offer-signatures-inline{grid-template-columns:1fr;}
  .signature-modal{width:100%;}
  #signatureCanvas{height:220px;}

  /* Long operational content: keep the document scrollable, never the viewport. */
  .code-link{max-width:100%;}
  .history-item{grid-template-columns:1fr!important;gap:8px;}
  .review-change-row{grid-template-columns:1fr!important;}
  .review-change-head{display:none;}
  .review-change-row>div:nth-child(2):before{content:'Before';display:block;font-size:11px;font-weight:800;color:#68758d;text-transform:uppercase;margin-bottom:4px;}
  .review-change-row>div:nth-child(3):before{content:'After';display:block;font-size:11px;font-weight:800;color:#68758d;text-transform:uppercase;margin-bottom:4px;}
}

/* Coarse pointer enhancement: keep desktop/tablet controls comfortable when touch is the primary input. */
@media (pointer:coarse){
  .side-link{min-height:46px;}
  .icon-btn{min-width:48px;min-height:48px;}
  .btn,.employee-nav-link,.nav a{min-height:48px;}
  .field input,.field select,.field textarea{min-height:48px;}
}

/* ISHLO management dashboard: preserve the existing drawer and add a compact mobile app bar. */
@media (max-width:767px){
  .app-topbar{position:sticky!important;top:0;z-index:45;height:60px!important;padding:7px 10px!important;}
  .app-brand-mobile{min-height:46px;}
  .app-topbar .account{width:auto!important;flex-direction:row!important;align-items:center!important;margin-left:auto!important;}
  .app-topbar .account .btn.secondary{width:auto!important;min-height:44px;}
  .app-topbar .icon-btn{width:46px;height:46px;}
  .mobile-nav-toggle{min-width:46px!important;min-height:46px!important;margin-left:0!important;}
  .main-content{padding:12px 10px calc(78px + var(--mx-safe-bottom))!important;}
  .sidebar{max-height:calc(100dvh - 60px)!important;top:60px!important;border-radius:0 16px 16px 0!important;}
  .sidebar.open:after{inset:60px 0 0 0!important;}
  .main-content .table-wrap{border-radius:13px;}
  .main-content .table-wrap table{min-width:680px;}
  .main-content .employee-directory-table table{min-width:720px;}
  .employee-directory-filters{grid-template-columns:1fr!important;}
  .employee-directory-actions{display:grid!important;grid-template-columns:1fr!important;}
  .employee-directory-actions>*{width:100%!important;}
  .employee-directory-footer{flex-direction:column!important;align-items:stretch!important;}
  .employee-pagination{width:100%;justify-content:space-between;}
  .hiring-pipeline-head{align-items:stretch!important;flex-direction:column!important;}
  .hiring-pipeline-meta{width:100%;}
  .hiring-display-control{width:100%;justify-content:space-between;}
  .hiring-display-control select{flex:1;min-height:40px;}
  .company-doc-current,.migration-note,.replace-inline{align-items:stretch!important;flex-direction:column!important;}
}

/* Simple operations pages (employee import/audit/system pages). */
@media (max-width:767px){
  .wrap>.topbar .top-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;}
  .wrap>.topbar .top-actions .btn{width:100%;}
  .wrap>.topbar .top-actions .btn:first-child{grid-column:1/-1;}
  .wrap>.nav{position:sticky;top:0;z-index:18;}
}

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

/* Compact app navigation for the HR dashboard and operations utility pages. */
.mobile-bottom-nav,.ops-mobile-bottom-nav{display:none;}
@media(max-width:767px){
  .mobile-bottom-nav,.ops-mobile-bottom-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    padding:7px 6px calc(7px + var(--mx-safe-bottom));
    background:rgba(255,255,255,.97);border-top:1px solid #dfe5ee;
    box-shadow:0 -10px 30px rgba(20,33,61,.10);backdrop-filter:blur(18px);
  }
  .mobile-bottom-nav a,.mobile-bottom-nav button,.ops-mobile-bottom-nav a{
    min-height:54px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;
    border:0;background:transparent;color:#69768b;text-decoration:none;font:inherit;border-radius:12px;
  }
  .mobile-bottom-nav span,.ops-mobile-bottom-nav span{font-size:18px;line-height:1;}
  .mobile-bottom-nav small,.ops-mobile-bottom-nav small{font-size:10px;font-weight:850;line-height:1;}
  .mobile-bottom-nav a.active,.ops-mobile-bottom-nav a.active{color:#2860dc;background:#eef3ff;}
  .mobile-bottom-nav button{cursor:pointer;}
  .mobile-bottom-nav button:hover{background:#f4f6fa;}
  .app-topbar + .app-layout{padding-bottom:0;}
}
/* ISHLO dashboard navigation correction — tablet and mobile only.
   Keep all existing routes and navigation links; expose them in a fully visible,
   touch-scrollable strip instead of a clipped off-canvas sidebar. */
@media (max-width: 1000px) {
  .app-layout {
    display: block !important;
    min-height: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
  }

  .sidebar {
    position: sticky !important;
    inset-inline: auto !important;
    left: auto !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 5px 16px rgba(13, 25, 45, .10) !important;
    z-index: 40 !important;
  }

  .sidebar-brand {
    display: none !important;
  }

  .side-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 2px 3px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 10px;
    scrollbar-width: thin;
  }

  .side-nav::-webkit-scrollbar {
    height: 4px;
  }

  .side-nav::-webkit-scrollbar-thumb {
    background: rgba(213, 221, 236, .55);
    border-radius: 999px;
  }

  .side-group {
    display: contents !important;
    margin: 0 !important;
  }

  .side-label {
    display: none !important;
  }

  .side-link {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 44px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 13px !important;
    white-space: nowrap !important;
    border-radius: 11px !important;
    line-height: 1.2;
    scroll-margin-inline: 10px;
  }

  .side-link > span:not(.side-ico):not(.nav-count) {
    display: inline !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .side-link .side-ico {
    flex: 0 0 auto !important;
  }

  .side-link .nav-count {
    flex: 0 0 auto !important;
    margin-left: 2px;
  }

  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
}

/* The app header is already sticky on phones; keep the nav strip immediately below it. */
@media (max-width: 767px) {
  .sidebar {
    top: 60px !important;
    padding: 7px 8px !important;
  }

  .side-nav {
    gap: 5px !important;
    padding-bottom: 3px !important;
  }

  .side-link {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  .main-content {
    padding-inline: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-nav {
    scroll-behavior: auto !important;
  }
}