Staff/Roles, UI, Dictionaries, Payroll
====================================== */
@media (max-width: 768px){

  /* In settings content keep action buttons compact (not full-width) */
  #settingsPane .btn,
  #settingsPane .btn2{
    width: auto !important;
  }
  #settingsPane .row{
    flex-direction: row !important;
    align-items: center !important;
  }
  #settingsPane .row[style*="justify-content:space-between"]{
    align-items: flex-start !important;
  }
  #settingsPane .row[style*="justify-content:space-between"] > .row{
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  /* Any 2-column inline grids inside settings -> stack */
  #settingsPane [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns: 1fr !important;
  }
  #settingsPane [style*="grid-template-columns: 1fr 1fr"]{
    grid-template-columns: 1fr !important;
  }

  /* Make tables in settings scroll nicely without affecting page */
  #settingsPane .card[style*="overflow"]{ overflow-x:hidden !important; }
  #settingsPane table{ min-width: 0 !important; width:100% !important; }
}



/* ======================================
   STAFF + PAYROLL (MOBILE) — TABLES
   Reduce columns, stop overflow, keep actions usable
====================================== */
@media (max-width: 768px){

  /* --- Staff table: show only key columns --- */
  #settingsPane .staff-table th,
  #settingsPane .staff-table td{
    padding:10px 10px !important;
    font-size:13px !important;
  }
  /* Hide: Login, Roles, Locations */
  #settingsPane .staff-table th:nth-child(2),
  #settingsPane .staff-table td:nth-child(2),
  #settingsPane .staff-table th:nth-child(3),
  #settingsPane .staff-table td:nth-child(3),
  #settingsPane .staff-table th:nth-child(4),
  #settingsPane .staff-table td:nth-child(4){
    display:none !important;
  }
  /* Actions column tighter */
  #settingsPane .staff-table th:nth-child(6),
  #settingsPane .staff-table td:nth-child(6){
    width:120px !important;
    white-space:nowrap;
  }
  #settingsPane .staff-table .btn2.mini{
    padding:7px 10px !important;
    font-size:12px !important;
    width:auto !important;
  }

  /* --- Payroll table: keep readable + hide extra columns --- */
  .payroll-table th,
  .payroll-table td{
    padding:10px 10px !important;
    font-size:13px !important;
  }
  /* Hide: base, orders, sales, bonus, fine, deductions, net, paid (keep: employee, toPay, actions) */
  /* Columns: 1 employee, 2 base, 3 orders, 4 sales, 5 bonus, 6 fine, 7 deductions, 8 net, 9 paid, 10 toPay, 11 actions */
  .payroll-table th:nth-child(2),
  .payroll-table td:nth-child(2),
  .payroll-table th:nth-child(3),
  .payroll-table td:nth-child(3),
  .payroll-table th:nth-child(4),
  .payroll-table td:nth-child(4),
  .payroll-table th:nth-child(5),
  .payroll-table td:nth-child(5),
  .payroll-table th:nth-child(6),
  .payroll-table td:nth-child(6),
  .payroll-table th:nth-child(7),
  .payroll-table td:nth-child(7),
  .payroll-table th:nth-child(8),
  .payroll-table td:nth-child(8),
  .payroll-table th:nth-child(9),
  .payroll-table td:nth-child(9){
    display:none !important;
  }
  /* Make "К выпл." column stand out */
  .payroll-table th:nth-child(10),
  .payroll-table td:nth-child(10){
    text-align:right !important;
    white-space:nowrap;
  }

  /* Actions: icon-only payout button on mobile */
  .payroll-table td:nth-child(11) .row{
    gap:6px !important;
    flex-wrap:nowrap !important;
  }
  .payroll-table td:nth-child(11) .btn2.mini{
    padding:7px 10px !important;
    font-size:12px !important;
    width:auto !important;
    white-space:nowrap;
  }
  /* If button contains "Выплатить" — hide the text, keep icon */
  .payroll-table td:nth-child(11) .btn2.mini{
    max-width: 90px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}



/* ======================================
   STAFF + PAYROLL SIZE FIX (MOBILE)
   Fix oversized headers, buttons, KPI blocks
====================================== */
@media (max-width: 768px){

  /* ===== STAFF TAB ===== */
  #settingsPane h3{
    font-size:16px !important;
  }

  #settingsPane .card{
    padding:12px !important;
  }

  /* Top action buttons smaller */
  #settingsPane .btn,
  #settingsPane .btn-success{
    height:38px !important;
    padding:8px 14px !important;
    font-size:14px !important;
  }

  #settingsPane .btn2{
    height:36px !important;
    padding:7px 12px !important;
    font-size:13px !important;
  }

  /* Staff table more compact */
  #settingsPane .staff-table td,
  #settingsPane .staff-table th{
    padding:8px 8px !important;
    font-size:13px !important;
  }

  /* ===== PAYROLL TAB ===== */

  /* Header period row wrap nicely */
  #settingsPane .card .row[style*="justify-content:space-between"]{
    gap:8px !important;
  }

  /* KPI block smaller */
  #settingsPane .card .row[style*="space-around"]{
    gap:10px !important;
  }

  #settingsPane .card .row[style*="space-around"] > div{
    min-width:90px !important;
  }

  #settingsPane .card .row[style*="space-around"] div div[style*="font-size:22px"]{
    font-size:18px !important;
  }

  /* Payroll table compact */
  .payroll-table td,
  .payroll-table th{
    padding:8px 8px !important;
    font-size:13px !important;
  }

  /* Payroll action buttons compact */
  .payroll-table .btn2.mini{
    height:32px !important;
    padding:6px 10px !important;
    font-size:12px !important;
  }
}



/* ======================================
   STAFF + PAYROLL (MOBILE) — FINAL FIX
   Ensure styles actually apply in tabs
====================================== */
@media (max-width: 768px){

  /* -------- Staff tab -------- */
  #settingsPane .settings-staff .row{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap:10px !important;
  }
  #settingsPane .settings-staff .row > .row{
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap:8px !important;
  }
  #settingsPane .settings-staff h3{ font-size:16px !important; }
  #settingsPane .settings-staff .small{ font-size:13px !important; }

  /* Hide extra columns on phones (Login/Roles/Locations) */
  #settingsPane .settings-staff table th:nth-child(2),
  #settingsPane .settings-staff table td:nth-child(2),
  #settingsPane .settings-staff table th:nth-child(3),
  #settingsPane .settings-staff table td:nth-child(3),
  #settingsPane .settings-staff table th:nth-child(4),
  #settingsPane .settings-staff table td:nth-child(4){
    display:none !important;
  }
  #settingsPane .settings-staff table th,
  #settingsPane .settings-staff table td{
    padding:8px 8px !important;
    font-size:13px !important;
  }
  #settingsPane .settings-staff table th:last-child,
  #settingsPane .settings-staff table td:last-child{
    width:120px !important;
    white-space:nowrap;
  }
  #settingsPane .settings-staff .btn,
  #settingsPane .settings-staff .btn2{
    width:auto !important;
    height:36px !important;
    padding:8px 12px !important;
    font-size:13px !important;
  }
  #settingsPane .settings-staff .btn-success{
    height:38px !important;
    padding:8px 14px !important;
    font-size:14px !important;
  }
  #settingsPane .settings-staff .btn2.mini{
    height:32px !important;
    padding:6px 10px !important;
    font-size:12px !important;
  }

  /* -------- Payroll tab -------- */
  .settings-payroll .row{
    flex-direction: row !important;
    align-items: center !important;
  }
  .settings-payroll .payroll-period{
    flex: 0 0 auto;
  }
  .settings-payroll .payroll-actions{
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap:8px !important;
    width:100%;
  }
  .settings-payroll .payroll-actions .btn,
  .settings-payroll .payroll-actions .btn2{
    width:auto !important;
    max-width:100% !important;
    height:36px !important;
    padding:8px 12px !important;
    font-size:13px !important;
    flex: 1 1 160px;   /* wraps nicely */
    text-align:center;
    justify-content:center;
  }
  /* Make the long primary action not blow up */
  .settings-payroll .payroll-actions .btn{
    flex: 1 1 220px;
  }

  /* KPI numbers smaller */
  .settings-payroll .card .row[style*="space-around"] div div[style*="font-size:22px"]{
    font-size:18px !important;
  }

  /* Payroll table: keep only key columns (Employee / To pay / Actions) */
  .payroll-table th:nth-child(2),
  .payroll-table td:nth-child(2),
  .payroll-table th:nth-child(3),
  .payroll-table td:nth-child(3),
  .payroll-table th:nth-child(4),
  .payroll-table td:nth-child(4),
  .payroll-table th:nth-child(5),
  .payroll-table td:nth-child(5),
  .payroll-table th:nth-child(6),
  .payroll-table td:nth-child(6),
  .payroll-table th:nth-child(7),
  .payroll-table td:nth-child(7),
  .payroll-table th:nth-child(8),
  .payroll-table td:nth-child(8),
  .payroll-table th:nth-child(9),
  .payroll-table td:nth-child(9){
    display:none !important;
  }
  .payroll-table th,
  .payroll-table td{
    padding:8px 8px !important;
    font-size:13px !important;
  }
  .payroll-table td:nth-child(11) .btn2.mini{
    height:32px !important;
    padding:6px 10px !important;
    font-size:12px !important;
    width:auto !important;
  }
}



/* ======================================
   STAFF + PAYROLL (MOBILE) — FORCE APPLY
   Override global .btn/.btn2=100% width rules
====================================== */
@media (max-width: 768px){
  /* Staff action buttons */
  #settingsPane .settings-staff .btn,
  #settingsPane .settings-staff .btn2{ width:auto !important; }

  /* Payroll action buttons row */
  .settings-payroll .payroll-actions .btn,
  .settings-payroll .payroll-actions .btn2{
    width:auto !important;
    flex: 1 1 150px !important;
    max-width: 100% !important;
  }
  .settings-payroll .payroll-actions{
    width:100% !important;
  }
}



/* ======================================
   SETTINGS MENU + PAYROLL ACTIONS (MOBILE)
   Short labels + tighter buttons
====================================== */
@media (max-width: 768px){
  .settings-menu-card .btn2{
    min-height:46px;
    padding:12px 14px !important;
    font-size:14px !important;
  }
  .settings-menu-card .btn2 > span:last-child{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Payroll action buttons slightly smaller */
  .settings-payroll .payroll-actions .btn,
  .settings-payroll .payroll-actions .btn2{
    height:34px !important;
    padding:7px 10px !important;
    font-size:12.5px !important;
  }
}


/* ======================================
   STAFF TAB — TRUE MOBILE FIX
====================================== */
@media (max-width: 768px){

  /* Compact header */
  #settingsPane .staff-mobile-fix h3{
    font-size:16px !important;
  }
  #settingsPane .staff-mobile-fix .small{
    font-size:13px !important;
  }

  /* Buttons compact and not full width */
  #settingsPane .staff-mobile-fix .btn,
  #settingsPane .staff-mobile-fix .btn2{
    width:auto !important;
    height:34px !important;
    padding:6px 10px !important;
    font-size:13px !important;
  }

  /* Force action buttons row layout */
  #settingsPane .staff-mobile-fix .row{
    flex-direction:row !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  /* Table compact */
  #settingsPane .staff-mobile-fix table th,
  #settingsPane .staff-mobile-fix table td{
    padding:8px 6px !important;
    font-size:13px !important;
  }

  /* Hide extra columns (login, roles, locations) */
  #settingsPane .staff-mobile-fix table th:nth-child(2),
  #settingsPane .staff-mobile-fix table td:nth-child(2),
  #settingsPane .staff-mobile-fix table th:nth-child(3),
  #settingsPane .staff-mobile-fix table td:nth-child(3),
  #settingsPane .staff-mobile-fix table th:nth-child(4),
  #settingsPane .staff-mobile-fix table td:nth-child(4){
    display:none !important;
  }

  /* Keep actions visible */
  #settingsPane .staff-mobile-fix table th:last-child,
  #settingsPane .staff-mobile-fix table td:last-child{
    width:110px !important;
    white-space:nowrap;
  }

}



/* ======================================
   PAYROLL ACTIONS (MOBILE) — FIT LONG LABELS
   Keep "＋ Премия/Штраф" but make buttons wrap nicely
====================================== */
@media (max-width: 768px){
  .settings-payroll .payroll-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  .settings-payroll .payroll-actions .btn,
  .settings-payroll .payroll-actions .btn2{
    flex: 1 1 140px !important;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    padding:8px 10px !important;
    font-size:13px !important;
    line-height:1.15 !important;
    white-space:normal !important;   /* allow wrap */
    text-align:center !important;
    justify-content:center !important;
  }
}



/* ======================================
   SETTINGS MENU (MOBILE) — CONSISTENT ROW HEIGHTS
====================================== */
@media (max-width: 768px){
  .settings-menu-card .btn2{
    min-height:46px !important;
    padding:12px 14px !important;
  }
  .settings-menu-card .btn2 > span:last-child{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}


/* ======================================
   MOBILE SIZING PACK (2026-02-19 FINAL)
   Coherent mobile sizes + no layout jumps
====================================== */

/* Lock body scroll when off-canvas sidebar is open */
@media (max-width: 768px){
  body.mobile-nav-open{ overflow:hidden !important; }
}

/* Use safe dynamic viewport on mobile */
@supports (height: 100dvh){
  body{ min-height: 100dvh; }
}

/* Prevent cards/tables from expanding the whole page */
@media (max-width: 768px){

  /* Content spacing */
  .content{ padding: 10px !important; }

  /* Forms: inputs should not create horizontal overflow */
  .content .input,
  .content select,
  .content textarea,
  .modal-box .input,
  .modal-box select,
  .modal-box textarea{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Grids stack by default */
  .content .grid2,
  .content .grid3,
  .content .grid4{
    grid-template-columns: 1fr !important;
  }

  /* Tables: no horizontal scroll */
  .card{ overflow-x:hidden !important; }

  /* POS: keep split panels readable */
  .pos-container{ gap: 12px !important; }
  .pos-cart{ max-height: none !important; }

  /* Modals / drawers: full width */
  .modal-box{ width: 94vw !important; max-height: 90dvh !important; }
  .order-drawer{ width: 100% !important; max-width: 100vw !important; }
  .pos-drawer{ width: min(420px, 96vw) !important; }
}

/* Very small phones */
@media (max-width: 420px){
  .topbar-inner{ padding: 8px 8px !important; }
  .burger{ width: 38px; height: 38px; }
  .sidebar{ width: 92vw !important; max-width: 360px !important; }
  .card table:not(.sch-table){ min-width: 0 !important; width:100% !important; }
}

/* Settings: tables should remain readable and scroll inside the card */
@media (max-width: 768px){
  #settingsPane .card{ overflow-x:hidden !important; }
}


/* ==========================================================================
   📱 ФИНАЛЬНАЯ ПРОРАБОТКА МОБИЛЬНОЙ ВЕРСИИ CRM (РЕЛИЗ 2026)
========================================================================== */