/* Mobile enhancements */
@media (max-width: 900px){
  :root{ --auto-scale:1; --user-ui-scale:1; --table-font-mult:1; --modal-font-mult:1; }
  html, body{ font-size: calc(1rem * var(--ui-mult)); }
  table, .table, table.table{ font-size: calc(1.0rem * var(--table-font-mult)); }
  .fab-container{ position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 2147483000; }
  .fab-btn{ width: 52px; height: 52px; border-radius: 26px; display:inline-flex; align-items:center; justify-content:center; font-size: 22px; }
   .fab-menu{ position: fixed; right: 16px; bottom: 86px; z-index:2147483601; } 
  /* Scale panel */
  .scale-panel-back{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:2147482998; }
  .scale-panel{ position:fixed; left:0; right:0; bottom:0; background:#fff; border-top-left-radius:14px; border-top-right-radius:14px; padding:14px; box-shadow: 0 -12px 28px rgba(0,0,0,.28); transform: translateY(100%); transition: transform .2s ease; z-index:2147482999; }
  .scale-panel.open{ transform: translateY(0); }
  .scale-panel-back.open{ display:block; }
  /* Popups own scale */
  .scale-panel, .fab-menu, .modal, .offcanvas{ font-size: calc(16px * var(--modal-font-mult)); }
  .scale-panel .hdr{ display:flex; align-items:center; justify-content:space-between; font-weight:600; margin-bottom:8px; }
}


@media (max-width: 900px){
  table, .table, table.table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse;
    font-size: calc(1.0rem * var(--table-font-mult)) !important;
  }
  table td, table th, .table td, .table th, table.table td, table.table th {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    vertical-align: top;
    font-size: inherit !important;
    line-height: 1.25;
  }
  .table thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; }
}




/* Column editor panel */
@media (max-width: 900px){
  .cols-panel-back{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:2147482998; }
  .cols-panel{ position:fixed; left:0; right:0; bottom:0; background:#fff; border-top-left-radius:16px; border-top-right-radius:16px; box-shadow:0 -10px 28px rgba(0,0,0,.26); transform:translateY(100%); transition: transform .2s ease; z-index:2147483001; padding:12px 14px 16px; max-height:80vh; overflow:auto; font-size: calc(16px * var(--modal-font-mult)); }
  .cols-panel.open{ transform:translateY(0); } .cols-panel-back.open{ display:block; }
  .cols-panel .hdr{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .cols-panel .tbl-name{ font-weight:600; font-size:14px; margin:6px 0 8px; opacity:.9; }
  .cols-panel .grid{ display:grid; grid-template-columns: 1fr auto auto; gap: 10px 8px; align-items:center; }
  .cols-panel .col-item{ display:contents; }
  .cols-panel .c-label{ font-size:14px; }
  .cols-panel .c-type{ opacity:.6; }
  .cols-panel .c-input{ width: 90px; }
  .cols-panel .c-suf{ opacity:.6; }
  .cols-panel .actions{ position:sticky; bottom:0; background:#fff; padding-top:6px; margin-top:8px; }
  .cols-panel .tbl-actions{ display:flex; gap:6px; }
  .cols-panel .pct-editor{ background:#f9fafb; border:1px solid #e5e7eb; border-radius:10px; padding:8px; margin-top:6px; }
  .cols-panel .pct-title{ font-weight:600; margin-bottom:6px; font-size:13px; }
  .cols-panel .pct-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
  .cols-panel .pct-item{ display:flex; align-items:center; gap:6px; background:#fff; border:1px solid #eceff3; border-radius:8px; padding:6px 8px; }
  .cols-panel .pct-item input{ width:70px; }
}
/* Base mobile table rules */
@media (max-width: 900px){
  table, .table, table.table{ table-layout: fixed; width: 100%; }
  table.table th, table.table td, .table th, .table td{
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .col-id{ min-width: 4ch; max-width: 6ch; text-align: center; }
  .col-qty{ min-width: 4ch; max-width: 6ch; text-align: right; }
  .col-money{ min-width: 8ch; max-width: 12ch; text-align: right; }
  .col-datetime{ min-width: 11ch; max-width: 14ch; white-space: pre-wrap !important; }
  .col-name{ min-width: 14ch; }
  .col-product{ min-width: 14ch; }
  .col-address{ min-width: 20ch; }
  .col-status{ min-width: 8ch; max-width: 12ch; }
  .col-comment{ min-width: 18ch; max-width: 28ch; }
}
/* FAB */
@media (max-width:900px){
  .fab-container{ position:fixed; right:16px; bottom:18px; z-index:2147483600; display:grid; grid-auto-flow:column; gap:10px; }
  .fab-btn{ width:56px; height:56px; border-radius:28px; border:none; background:#5469d4; color:#fff; font-size:22px; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px rgba(0,0,0,.28); }
  .fab-btn:active{ transform:scale(.98); }
  .fab-pop{ position:fixed; right:16px; bottom:86px; z-index:2147483599; }
  .fab-pop .fab-card{ background:#fff; border-radius:14px; padding:8px; box-shadow:0 12px 26px rgba(0,0,0,.22); border:1px solid rgba(0,0,0,.06); display:flex; flex-direction:column; gap:6px; min-width:220px; }
  .fab-pop .fab-item{ appearance:none; width:100%; text-align:left; font-size:14px; line-height:1.2; padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.06); background:#f9fafb; color:#111827; }
}
/* Drag handles */
@media (max-width:900px){
  th .col-handle{ position:absolute; top:0; right:0; width:10px; height:100%; cursor: ew-resize; touch-action: none;
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 50%, rgba(0,0,0,0) 100%); }
  th .col-handle:after{ content:''; position:absolute; top:25%; bottom:25%; right:2px; width:2px; border-radius:2px; background:#9ca3af; }
}



:root{ --ui-mult:1; --table-mult:1; }
@media (max-width:900px){
  body{ font-size: calc(1rem * var(--ui-mult)); }
  table, .table{ font-size: calc(1rem * var(--table-mult)); }
  .scale-back{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:2147483600; }
  .scale-back.open{ display:block; }
  .scale-fallback{ position:fixed; left:0; right:0; bottom:0; background:#fff; border-top-left-radius:16px; border-top-right-radius:16px; box-shadow:0 -10px 28px rgba(0,0,0,.26); transform:translateY(100%); transition: transform .2s ease; z-index:2147483601; padding:12px 14px 16px; max-height:80vh; overflow:auto; }
  .scale-fallback.open{ transform:translateY(0); }
  .scale-fallback .hdr{ display:flex; align-items:center; justify-content:space-between; font-weight:600; margin-bottom:8px; }
  .scale-fallback .block{ margin:8px 0; }
  .btn-close{ background:none; border:none; font-size:18px; line-height:1; }
}



@media (max-width:900px){
  .ce-gear{ font-size:14px; }
}



@media (max-width:900px){
  th{ position: relative; }
  th .col-handle{ z-index: 5; width:14px; }
  th .col-handle:after{ opacity:.85; }
}



@media (max-width:900px){
  /* pointer/touch improvements */
  th .col-handle{ touch-action: none; -ms-touch-action: none; }
  th, th * { -webkit-user-select: none; user-select: none; }
}

@media (max-width:900px){ #sp-cols, .ce-gear{ display:none !important; } }

@media (max-width:900px){
  #fab-pop .fab-card{ padding:10px 12px; border-radius:18px; }
  #fab-pop .fab-item{ font-size:14px; padding:10px 8px; }
  #fab-pop .fab-sep{ margin:6px 0; }
}

@media (max-width:900px){
  #fab-pop .fab-card{ padding:8px 10px !important; border-radius:16px !important; }
  #fab-pop .fab-item{ font-size:13px !important; padding:8px 8px !important; line-height:1.2 !important; }
  #fab-pop .fab-sep{ margin:6px 0 !important; height:1px; background:rgba(0,0,0,.06); }
  #sp-cols, .ce-gear{ display:none !important; }
}


/* Highlight filters area when jumped to */
@keyframes filterFlash { 0%{box-shadow:0 0 0 rgba(0,0,0,0);} 20%{box-shadow:0 0 0 4px rgba(59,130,246,.35);} 100%{box-shadow:0 0 0 rgba(0,0,0,0);} }
.highlight-filters{ animation: filterFlash 1.2s ease-out 1; border-radius: 12px; }

/* Cap modal and offcanvas sizes on mobile similar to v10 */
@media (max-width: 900px){
  .modal .modal-dialog{ max-width: 96vw; margin: 12px auto; }
  .modal .modal-body{ max-height: 70vh; overflow:auto; }
  .offcanvas{ width: min(96vw, 480px); }
}

/* Keep filters controls tidy on mobile (match v10 look) */
@media (max-width: 900px){
  .tab-pane .controls{ font-size: 1rem; }
  .tab-pane .controls .form-label,
  .tab-pane .controls .form-select,
  .tab-pane .controls .form-control,
  .tab-pane .controls .btn{ font-size: 1rem; line-height: 1.25; }
}


/* Column resize handle: better touch UX */
@media (max-width: 900px){
  th .col-handle{ touch-action: none; cursor: ew-resize; min-width: 18px; }
}





/* Modal/offcanvas/filters scale follows --modal-font-mult (half of UI scale) */
@media (max-width: 900px){
  .modal, .offcanvas, .scale-panel, .fab-menu{ font-size: calc(1rem * var(--modal-font-mult)) !important; }
  .tab-pane .controls{ font-size: calc(1rem * var(--modal-font-mult)); }
  .tab-pane .controls .form-label,
  .tab-pane .controls .form-select,
  .tab-pane .controls .form-control,
  .tab-pane .controls .btn{ font-size: calc(1rem * var(--modal-font-mult)); line-height: 1.25; }
}





/* === Machines tab: make table 20% smaller so it fits, without transform artifacts === */
@media (max-width: 1200px){
  #nav-machines #machines-table{
    font-size: calc(1rem * 0.8);
  }
  #nav-machines #machines-table th,
  #nav-machines #machines-table td{
    padding: .25rem .5rem;
  }
}


/* Tidy look for offcanvas/modal filters on mobile */
@media (max-width: 900px){
  .offcanvas .offcanvas-header h5{ font-size: 1.1em; margin: 0; }
  .offcanvas .offcanvas-body .form-label{ margin-bottom: .25rem; }
  .offcanvas .offcanvas-body .form-control,
  .offcanvas .offcanvas-body .form-select{ padding:.4rem .6rem; border-radius:.5rem; }
  .offcanvas .offcanvas-body .btn{ padding:.35rem .6rem; border-radius:.6rem; }
  .tab-pane .controls h5, .tab-pane .controls h4{ font-size: 1.15em; }
}


/* === Harmonized modal/offcanvas design for mobile === */
@media (max-width: 900px){
  :root{ --radius: 14px; --gap: 12px; }
  .offcanvas, .modal .modal-dialog{ padding: 0; }
  .offcanvas .offcanvas-header, .modal .modal-header{
    padding: calc(var(--gap) * .9) var(--gap);
    border-bottom: 0;
  }
  .offcanvas .offcanvas-title, .modal .modal-title{
    font-size: calc(1.15rem * var(--modal-font-mult));
    font-weight: 700;
  }
  .offcanvas .offcanvas-body, .modal .modal-body{
    padding: var(--gap);
  }
  .offcanvas .form-label, .modal .form-label{ margin-bottom: .35rem; }
  .offcanvas .form-control, .offcanvas .form-select,
  .modal .form-control, .modal .form-select{
    padding: .5rem .7rem;
    border-radius: var(--radius);
  }
  .offcanvas .btn, .modal .btn{ padding: .45rem .8rem; border-radius: calc(var(--radius) - 4px); }
  .offcanvas .list-group-item{ padding:.55rem .75rem; }
  .offcanvas .offcanvas-content, .modal .modal-content{
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
  }
}


/* === Unified popup theme (filters / links / scale-panel / modals) === */
@media (max-width: 900px){
  :root{ --modal-font-mult: var(--modal-font-mult); --ui-gap: 12px; --ui-radius: 14px; }
  .offcanvas, .modal .modal-dialog{ padding: 0; }
  .offcanvas .offcanvas-content, .modal .modal-content, .scale-panel{
    font-size: calc(1rem * var(--modal-font-mult));
    border-radius: var(--ui-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
  }
  .offcanvas .offcanvas-header, .modal .modal-header{
    padding: calc(var(--ui-gap)*.9) var(--ui-gap);
    border-bottom: 0;
  }
  .offcanvas .offcanvas-title, .modal .modal-title{ 
    font-size: 1.15em; font-weight: 700; margin: 0;
  }
  .offcanvas .offcanvas-body, .modal .modal-body, .scale-panel{
    padding: var(--ui-gap);
  }
  .offcanvas .form-label, .modal .form-label, .scale-panel .form-label{ margin-bottom: .35em; }
  .offcanvas .form-control, .offcanvas .form-select,
  .modal .form-control, .modal .form-select,
  .scale-panel .form-control, .scale-panel .form-select{
    padding: .55em .75em; border-radius: .6em;
  }
  .offcanvas .btn, .modal .btn, .scale-panel .btn{ padding: .5em .9em; border-radius: .7em; }
  .offcanvas .list-group-item{ padding:.6em .9em; }
  /* Controls when filters are inline */
  .tab-pane .controls{
    font-size: calc(1rem * var(--modal-font-mult));
  }
}

@media (max-width: 900px){
  #linksOffcanvas .offcanvas-body{ padding: var(--ui-gap); }
  #linksOffcanvas .list-group-item{ padding:.6em .9em; border-radius:.6em; }
}