/* =========================================================
   ABOTRIX CLIENT UNIVERSAL RESPONSIVE V2
   Large Monitor / Desktop / Laptop / Tablet / Mobile
   ========================================================= */

html,
body {
  max-width:100%;
  overflow-x:hidden;
}

#appView,
#appView *,
#content,
#content * {
  box-sizing:border-box;
}

#content img,
#content svg,
#content canvas,
#content video {
  max-width:100%;
  height:auto;
}

#content > * {
  min-width:0;
}


/* =========================================================
   LARGE MONITOR
   1600+
   ========================================================= */

@media (min-width:1600px) {

  body.abotrix-v12-ui #appView > aside.v12-sidebar,
  body.abotrix-authenticated #appView > aside.v12-sidebar {
    width:240px !important;
    padding:16px 13px !important;
  }

  body.abotrix-v12-ui #appView > main,
  body.abotrix-authenticated #appView > main,
  #appView > main {
    min-width:0 !important;
    max-width:none !important;
    padding:20px 24px 32px !important;
  }

  #content {
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
  }

  #content .payroll-layout {
    grid-template-columns:
      minmax(320px,360px)
      minmax(0,1fr) !important;
  }
}


/* =========================================================
   NORMAL DESKTOP
   1280 - 1599
   ========================================================= */

@media (min-width:1280px) and (max-width:1599px) {

  body.abotrix-v12-ui #appView > aside.v12-sidebar,
  body.abotrix-authenticated #appView > aside.v12-sidebar {
    width:225px !important;
    padding:14px 11px !important;
  }

  body.abotrix-v12-ui .v12-sidebar .brand img {
    width:140px !important;
    max-width:140px !important;
    margin:0 auto !important;
  }

  body.abotrix-v12-ui #nav .v12-nav-item {
    min-height:39px !important;
    padding:6px 9px !important;
    font-size:11.5px !important;
  }

  body.abotrix-v12-ui #appView > main,
  body.abotrix-authenticated #appView > main,
  #appView > main {
    min-width:0 !important;
    max-width:none !important;
    padding:16px 18px 26px !important;
  }

  #content {
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
  }

  #content .payroll-layout {
    grid-template-columns:
      minmax(290px,325px)
      minmax(0,1fr) !important;
  }
}


/* =========================================================
   LAPTOP
   1024 - 1279
   ========================================================= */

@media (min-width:1024px) and (max-width:1279px) {

  body.abotrix-v12-ui #appView > aside.v12-sidebar,
  body.abotrix-authenticated #appView > aside.v12-sidebar {
    width:205px !important;
    padding:12px 9px !important;
  }

  body.abotrix-v12-ui .v12-sidebar .brand img {
    width:125px !important;
    max-width:125px !important;
    margin:0 auto !important;
  }

  body.abotrix-v12-ui #nav {
    gap:3px !important;
  }

  body.abotrix-v12-ui #nav .v12-nav-item {
    min-height:36px !important;
    padding:6px 8px !important;
    font-size:10.5px !important;
    gap:8px !important;
  }

  body.abotrix-v12-ui .v12-nav-icon {
    width:22px !important;
    height:22px !important;
    flex-basis:22px !important;
    font-size:11px !important;
  }

  body.abotrix-v12-ui #appView > main,
  body.abotrix-authenticated #appView > main,
  #appView > main {
    min-width:0 !important;
    max-width:none !important;
    padding:12px 14px 20px !important;
  }

  #content {
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
  }

  #content .panel {
    padding:14px !important;
  }

  #content .payroll-layout {
    grid-template-columns:
      minmax(270px,300px)
      minmax(0,1fr) !important;
    gap:12px !important;
  }

  #content .payroll-kpis {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   TABLET
   769 - 1023
   ========================================================= */

@media (min-width:769px) and (max-width:1023px) {

  body.abotrix-v12-ui #appView > aside.v12-sidebar,
  body.abotrix-authenticated #appView > aside.v12-sidebar {
    width:180px !important;
    padding:10px 8px !important;
  }

  body.abotrix-v12-ui .v12-sidebar .brand img {
    width:108px !important;
    max-width:108px !important;
    margin:0 auto !important;
  }

  body.abotrix-v12-ui #nav .v12-nav-item {
    min-height:34px !important;
    padding:5px 7px !important;
    font-size:9.5px !important;
  }

  body.abotrix-v12-ui #appView > main,
  body.abotrix-authenticated #appView > main,
  #appView > main {
    min-width:0 !important;
    max-width:none !important;
    padding:10px !important;
  }

  #content {
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
  }

  #content .grid,
  #content [class*="grid"],
  #content .payroll-layout,
  #content .client-v131-main-grid {
    grid-template-columns:1fr !important;
  }

  #content .payroll-kpis,
  #content .client-v131-kpis {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #content .table-wrap,
  #content .payroll-table-wrap {
    width:100% !important;
    overflow-x:auto !important;
  }
}


/* =========================================================
   MOBILE
   <= 768
   ========================================================= */

@media (max-width:768px) {

  /* Existing drawer rules remain responsible for navigation */

  body.abotrix-v12-ui #appView > main,
  body.abotrix-authenticated #appView > main,
  #appView > main {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:
      12px
      12px
      calc(24px + env(safe-area-inset-bottom))
      !important;
  }

  #content {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:0 !important;
  }

  #content .grid,
  #content [class*="grid"],
  #content .payroll-layout,
  #content .payroll-kpis,
  #content .client-v131-main-grid,
  #content .client-v131-kpis {
    grid-template-columns:1fr !important;
  }

  #content .panel,
  #content .card,
  #content form {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  #content .table-wrap,
  #content .payroll-table-wrap {
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  #content input:not([type="checkbox"]):not([type="radio"]),
  #content select,
  #content textarea {
    width:100% !important;
    max-width:100% !important;
    font-size:16px !important;
  }

  #content button {
    max-width:100% !important;
  }
}


/* =========================================================
   SMALL PHONE
   <= 480
   ========================================================= */

@media (max-width:480px) {

  body.abotrix-v12-ui #appView > main,
  body.abotrix-authenticated #appView > main,
  #appView > main {
    padding:
      10px
      10px
      calc(22px + env(safe-area-inset-bottom))
      !important;
  }

  #appView > main > header h1 {
    font-size:22px !important;
  }

  #content .panel,
  #content .card {
    padding:12px !important;
  }

  #content button {
    min-height:38px !important;
  }
}


/* =========================================================
   GLOBAL DENSITY / SAFETY
   ========================================================= */

@media (min-width:769px) {

  #content .panel,
  #content .card {
    min-width:0;
  }

  #content input:not([type="checkbox"]):not([type="radio"]),
  #content select {
    min-height:36px;
  }

  #content table {
    font-size:12px;
  }

  #content table th {
    padding:8px 9px !important;
    font-size:10px !important;
  }

  #content table td {
    padding:8px 9px !important;
    font-size:11px !important;
  }

  #content .table-wrap {
    width:100%;
    max-width:100%;
    overflow-x:auto;
  }

  #content .client-v131-page,
  #content .restaurant-workspace,
  #content .workspace-shell,
  #content .abotrix-payroll {
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
}