:root{ --ui-mult:1; --table-font-mult:1; --modal-font-mult:1; --modal-scale:1; --header-boost:1.5; }

@media (max-width: 900px){
  /* FAB */
  .fab-container{ position:fixed; right:16px; bottom:18px; z-index:2147483600; display:grid; grid-auto-flow:column; gap:10px; }
  .fab-btn{ width:52px; height:52px; border-radius:50%; border:0; background:#556ee6; color:#fff; box-shadow:0 10px 22px rgba(0,0,0,.28); font-size:22px; line-height:52px; text-align:center; }
  #fab-menu{ background:#4b5563; }
  .fab-pop{ position:fixed; right:16px; bottom: calc(86px + 60px); z-index:2147483599; }
  .fab-card{ background:#fff; border-radius:14px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.22); min-width:230px; max-width:86vw; max-height:65vh; overflow:auto; font-size:14px !important; }
  .fab-sec-hdr{ font-weight:600; font-size:12px !important; opacity:.8; margin:2px 2px 8px; }
  .fab-menu-item{ width:100%; text-align:left; border:1px solid rgba(0,0,0,.06); background:#f9fafb; color:#111827; border-radius:10px; padding:.45em .6em; font-size:.95rem; }
  .fab-menu-item + .fab-menu-item{ margin-top:6px; }
  .fab-sep{ height:1px; background:#e5e7eb; margin:8px 2px; }

  /* Scale sheet */
  .scale-sheet-back{ position:fixed; inset:0; background: rgba(0,0,0,.34); z-index:2147483601; }
  .scale-sheet{ position:fixed; left:0; right:0; bottom:0; background:#fff; border-radius:16px 16px 0 0; box-shadow:0 -10px 28px rgba(0,0,0,.22); transform: translateY(100%); transition: transform .14s ease-out; z-index:2147483602; max-height:70vh; overflow:auto; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .scale-sheet.on{ transform: translateY(0); }
  .scale-sheet .hdr{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px 6px; position:sticky; top:0; background:#fff; border-bottom:1px solid #edf0f4; }
  .scale-sheet .hdr .ttl{ font-weight:600; font-size:16px; }
  .scale-sheet .hdr .btn-close{ border:none; background:transparent; font-size:22px; line-height:1; }
  .scale-sheet .rows{ padding:8px 14px; }
  .scale-sheet .row{ display:grid; grid-template-columns: 140px 1fr; align-items:center; gap:12px; padding:8px 0; }
  .scale-sheet .lab{ font-size:14px; color:#374151; }
  .scale-sheet .ctrl{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; }
  .scale-sheet .ctrl .minus,.scale-sheet .ctrl .plus{ width:36px; height:36px; border-radius:10px; border:1px solid #e5e7eb; background:#f9fafb; font-size:20px; }
  .scale-sheet .ctrl input[type="range"]{ height:34px; -webkit-appearance:none; appearance:none; }
  .scale-sheet .ctrl input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:#556ee6; border:none; margin-top:-10px; }
  .scale-sheet .ctrl input[type="range"]::-webkit-slider-runnable-track{ height:4px; background:#e5e7eb; border-radius:2px; }
  .scale-sheet .ctrl .val{ min-width:52px; text-align:right; font-size:13px; color:#111827; }

  /* Column drag visualization */
  .col-guide{ position:fixed; top:0; bottom:0; width:2px; background:#556ee6; opacity:.6; pointer-events:none; z-index:2147483603; }
  .col-resizing .col-grip{ background: rgba(85,110,230,.12); }
  .col-highlight{ background: rgba(85,110,230,.06) !important; box-shadow: inset -1px 0 0 #556ee6; }

  /* Clamp horizontal overflow and set width */
  html, body{ overflow-x: hidden !important; }
  .table-responsive, .table-wrap, .table-wrapper, .dataTables_wrapper, .dataTables_scrollBody{ overflow-x: hidden !important; }
  table, .table{ width:90vw !important; max-width:90vw !important; margin:0 auto !important; table-layout: fixed; }

  /* Decouple modal scale from UI */
  html{ font-size: calc(16px * var(--ui-mult, 1)) !important; }
  .modal .modal-content{ font-size: calc(16px * var(--modal-font-mult, 1)) !important; }
  .modal .modal-dialog{ transform: scale(var(--modal-scale, 1)); transform-origin: top center; }

  /* Header boost on reports */
  body.boosted-header h1,
  body.boosted-header .page-title,
  body.boosted-header .card-header .card-title,
  body.boosted-header .content-title,
  body.boosted-header .breadcrumb-item.active,
  body.boosted-header .nav-tabs .nav-link{
    font-size: calc(1em * var(--header-boost, 1.5)) !important;
    line-height: 1.15;
  }
}


@media (max-width: 900px){
  /* Allow top nav tabs to wrap to new lines when they don't fit */
  #nav-tab, .nav-tabs{
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 6px;
    column-gap: 8px;
    overflow: visible !important;
    white-space: normal !important;
  }
  .nav-tabs .nav-item{ flex: 0 1 auto; }
  .nav-tabs .nav-link{
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 10px;
  }
}


@media (max-width: 900px){
  #nav-tab, .nav-tabs{
    display:flex !important; flex-wrap:wrap !important;
    row-gap:6px; column-gap:8px; overflow:visible !important; white-space:normal !important;
  }
  .nav-tabs .nav-item{ flex:0 1 auto; }
  .nav-tabs .nav-link{ white-space:nowrap; padding:6px 10px; border-radius:10px; }
}


/* Hide dock & mobile FAB on index/login */
body[data-page="index"] .fab-container,
body[data-page="index"] #bottomDock,
body[data-page="index"] .bottom-dock,
body[data-page="index"] .scale-sheet,
body[data-page="index"] .scale-sheet-back,
body[data-page="login"] .fab-container,
body[data-page="login"] #bottomDock,
body[data-page="login"] .bottom-dock,
body[data-page="login"] .scale-sheet,
body[data-page="login"] .scale-sheet-back{ display:none !important; }
/* Scale-aware: 30px multiplied by --ui-mult */
.lead{
  font-size: calc(30px * var(--ui-mult)) !important;
  font-weight: 300 !important;
  line-height: 1.3;
}
input.form-control, select.form-select {
    font-size: 30px;
}

element.style {
    width: 10%;
    display: block;
    position: fixed;
    left: 9%;
    max-height: 50%;
    top: 43%;
}
.dropdown-menu {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    width: 100%;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 0.4rem 0.8rem rgba(0,0,0,0.12);
    display: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    font-size: 150%;
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 2000;
}
.main-container {
    max-width: 98%;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}
.section-block {
    /* background: var(--surface-color); */
    /* padding: 1.25rem; */
    /* border-radius: var(--border-radius); */
    /* box-shadow: var(--box-shadow); */
    /* margin-bottom: 1.5rem; */
    /* border: 1px solid var(--border-color); */
}
.form-footer {
    position: static !important;
    bottom: auto !important;
    box-shadow: none !important;
    margin-top: 60%;
}
.offcanvas.offcanvas-end {
    top: 15%;
    right: 0%;
    width: var(--bs-offcanvas-width);
    /* border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); */
    transform: translateX(100%);
}
.offcanvas {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    /* max-width: 100%; */
    /* color: var(--bs-offcanvas-color); */
    /* visibility: hidden; */
    /* background-color: var(--bs-offcanvas-bg); */
    /* background-clip: padding-box; */
    /* outline: 0; */
    /* transition: var(--bs-offcanvas-transition); */
}
.btn {
    /* padding: 0.5rem 0.9rem; */
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    transition: background-color 0.18s, transform 0.12s, box-shadow 0.18s;
    text-align: center;
    line-height: 1.5;
    white-space: nowrap;
    margin: 3px;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
}
.btn.action-btn {
    padding: .45rem .7rem;
    font-size: 170%;
}
#remoteReportStatusDisplay {
    font-size: 130%;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--secondary-color);
    padding: 0.3rem;
    background-color: #e9ecef;
    border-radius: var(--border-radius);
    min-height: 1.5em;
}
.packet-time {
    font-size: 163%;
    color: var(--secondary-color);
    font-weight: 500;
}
.status-message-bar {
    padding: 0.6rem 1rem;
    margin-bottom: 0.8rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-weight: 500;
    text-align: center;
    font-size: 129%;
}
.btn {
    /* padding: 0.5rem 0.9rem; */
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 100%;
    font-weight: 500;
    color: #000000;
    transition: background-color 0.18s, transform 0.12s, box-shadow 0.18s;
    text-align: center;
    line-height: 1.5;
    white-space: nowrap;
    margin: 3px;
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 85%);
}
/* Timesheet primary action buttons 2-per-row on mobile */
@media (max-width: 900px){
  body[data-page="timesheet"] .action-btn-container{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 4%; }
  body[data-page="timesheet"] .action-btn-container .action-btn{ width:48% !important; margin:0 !important; }
}