/* =============================================================================
   pos-tables-native.css
   Isolated native-tables theme matching screenshot native-tables-20261102.png
   Scoped exclusively to: body.native-tables-page #pos-shell[data-view="tables"]
   Unit reference: 1px at 1280w, 1.5px at 1920w (clamp(.8px, calc(100vw / 1280), 1.5px))
   ============================================================================= */

@font-face {
  font-family: NativeRoboto;
  src: url('/assets/fonts/NativeRoboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: NativeRoboto;
  src: url('/assets/fonts/NativeRoboto-Medium.ttf') format('truetype');
  font-weight: 500 800;
  font-display: swap;
}
body.native-tables-page .native-tables-only { display: none; }
body.native-tables-page .table-tab-pair { display: contents; }
body.native-tables-page #pos-shell[data-view="tables"] .native-tables-only { display: inline-flex; }

body.native-tables-page #pos-shell[data-view="tables"] {
  /* Design system variables - exact teal palette */
  --nt-accent: #177a6f;
  --nt-dark: #125e56;
  --nt-cream: #eaf2f0;
  --nt-panel: #f4faf8;
  --nt-card: #ffffff;
  --nt-ink: #1b2c36;
  --nt-inksoft: #35505a;
  --nt-muted: #677c85;
  --nt-line: #e4eaed;
  --nt-creamsoft: #eef6f3;
  --nt-border-inactive: #93a4ab;

  /* Responsive native scaling unit */
  --u: clamp(0.8px, calc(100vw / 1280), 1.5px);

  /* Overwrite pos shell background & font */
  background: var(--nt-cream);
  color: var(--nt-ink);
  font-family: NativeRoboto, Roboto, Arial, sans-serif;
  overflow: hidden;
}
body.native-tables-page #pos-shell[data-view="tables"] .table-tab-pair {
  display: flex;
  position: relative;
  flex: 1 1 calc(147 * var(--u));
  min-width: calc(100 * var(--u));
}
body.native-tables-page #pos-shell[data-view="tables"] .table-tab-pair .tab {
  padding-right: calc(36 * var(--u));
  text-align: left;
  color: #5c717a;
}
body.native-tables-page #pos-shell[data-view="tables"] .table-tab-pair > .tab-dismiss {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(36 * var(--u));
  height: calc(42 * var(--u));
  border: 0;
  background: transparent;
  font-size: calc(23 * var(--u));
  font-weight: 400;
  color: #677c85;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Base resets & typography inside shell */
body.native-tables-page #pos-shell[data-view="tables"] button,
body.native-tables-page #pos-shell[data-view="tables"] input,
body.native-tables-page #pos-shell[data-view="tables"] select,
body.native-tables-page #pos-shell[data-view="tables"] textarea {
  font-family: inherit;
  color: inherit;
}

/* =============================================================================
   1. Topbar & Header Navigation
   ============================================================================= */
body.native-tables-page #pos-shell[data-view="tables"] .topbar {
  height: calc(60 * var(--u));
  min-height: calc(60 * var(--u));
  flex: 0 0 calc(60 * var(--u));
  background: var(--nt-card);
  border-bottom: calc(1 * var(--u)) solid var(--nt-line);
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: 0 calc(14 * var(--u));
  z-index: 20;
  overflow-x: clip;
}

/* Brand Tab: 42h, font 13.5 medium, padding 14, gap 8 */
body.native-tables-page #pos-shell[data-view="tables"] .tab.brand {
  height: calc(42 * var(--u));
  min-height: calc(42 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--nt-accent);
  color: #ffffff;
  font-size: calc(13.5 * var(--u));
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
  border: none;
}

body.native-tables-page #pos-shell[data-view="tables"] .tab.brand .tab-icon {
  font-size: calc(15 * var(--u));
  line-height: 1;
}

body.native-tables-page #pos-shell[data-view="tables"] .tab.brand .tab-label {
  font-size: calc(13.5 * var(--u));
  font-weight: 500;
}

/* Table tabs strip: shares area up to ~65% viewport / ~826 native units */
body.native-tables-page #pos-shell[data-view="tables"] .topbar .tabs {
  flex: 0 1 auto;
  max-width: min(calc(826 * var(--u)), 65vw);
  display: flex;
  gap: calc(8 * var(--u));
  overflow-x: auto;
  scrollbar-width: none;
}

body.native-tables-page #pos-shell[data-view="tables"] .topbar .tabs::-webkit-scrollbar {
  display: none;
}

/* Individual table tabs: 147w screenshot nominal, flex equal width */
body.native-tables-page #pos-shell[data-view="tables"] .topbar .tab:not(.brand) {
  height: calc(42 * var(--u));
  min-height: calc(42 * var(--u));
  width: calc(147 * var(--u));
  flex: 1 1 calc(147 * var(--u));
  min-width: calc(100 * var(--u));
  max-width: calc(190 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--nt-creamsoft);
  color: var(--nt-inksoft);
  font-size: calc(13.5 * var(--u));
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  border: none;
}

body.native-tables-page #pos-shell[data-view="tables"] .topbar .tab:not(.brand):hover {
  background: var(--nt-cream);
  color: var(--nt-ink);
}

body.native-tables-page #pos-shell[data-view="tables"] .topbar .tab:not(.brand).on {
  background: var(--nt-accent);
  color: #ffffff;
}

body.native-tables-page #pos-shell[data-view="tables"] .topbar .tab .lbl {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(13.5 * var(--u));
  font-weight: 500;
}
body.native-tables-page #pos-shell[data-view="tables"] .topbar .table-tab-pair .tab:not(.brand) {
  padding-right: calc(36 * var(--u));
}
@media (max-width: 999px) {
  body.native-tables-page #pos-shell[data-view="tables"] .topbar {
    overflow: visible;
    flex-wrap: wrap;
    height: auto;
    flex-basis: auto;
    padding-top: calc(8 * var(--u));
    padding-bottom: calc(8 * var(--u));
  }
}

/* Tab dismiss indicator (decorative visual X span or standard x) */
body.native-tables-page #pos-shell[data-view="tables"] .topbar .tab .tab-dismiss,
body.native-tables-page #pos-shell[data-view="tables"] .topbar .tab .x {
  display: inline-block;
  font-size: calc(12 * var(--u));
  opacity: 0.7;
  padding: 0 calc(4 * var(--u));
  line-height: 1;
  color: inherit;
  pointer-events: none;
}


/* Add Tab button (+) : 42w x 42h */
body.native-tables-page #pos-shell[data-view="tables"] .addtab {
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  flex: 0 0 calc(42 * var(--u));
  border-radius: calc(12 * var(--u));
  border: calc(1 * var(--u)) solid var(--nt-line);
  background: var(--nt-card);
  color: var(--nt-accent);
  font-size: calc(20 * var(--u));
  font-weight: 500;
  display: grid;
  place-items: center;
  cursor: pointer;
  line-height: 1;
}

body.native-tables-page #pos-shell[data-view="tables"] .addtab:hover {
  background: var(--nt-panel);
}

/* Top Actions: auto margin-left */
body.native-tables-page #pos-shell[data-view="tables"] .top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  flex-shrink: 0;
}

body.native-tables-page #pos-shell[data-view="tables"] .ghost {
  height: calc(42 * var(--u));
  min-height: calc(42 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: calc(12 * var(--u));
  border: calc(1 * var(--u)) solid var(--nt-line);
  background: var(--nt-card);
  font-size: calc(13.5 * var(--u));
  font-weight: 500;
  color: var(--nt-inksoft);
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--u));
  cursor: pointer;
  flex: 0 0 auto;
  text-decoration: none;
}

body.native-tables-page #pos-shell[data-view="tables"] .ghost:hover {
  background: var(--nt-panel);
  border-color: var(--nt-line);
  color: var(--nt-ink);
}

body.native-tables-page #pos-shell[data-view="tables"] .ghost svg,
body.native-tables-page #pos-shell[data-view="tables"] .ghost .ghost-icon {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Shift link #nav-shift if present or inserted */
body.native-tables-page #pos-shell[data-view="tables"] #nav-shift {
  height: calc(42 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: calc(12 * var(--u));
  border: calc(1 * var(--u)) solid var(--nt-line);
  background: var(--nt-card);
  font-size: calc(13.5 * var(--u));
  font-weight: 500;
  color: var(--nt-inksoft);
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--u));
  cursor: pointer;
  text-decoration: none;
}

/* Avatar: 42h x 42w */
body.native-tables-page #pos-shell[data-view="tables"] .account {
  position: relative;
  flex: 0 0 auto;
}

body.native-tables-page #pos-shell[data-view="tables"] .avatar {
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--nt-ink);
  color: var(--nt-creamsoft);
  display: grid;
  place-items: center;
  font-weight: 500;
  font-size: calc(13.5 * var(--u));
  border: 0;
  cursor: pointer;
}

/* =============================================================================
   2. Workspace & Views
   ============================================================================= */
body.native-tables-page #pos-shell[data-view="tables"] .work {
  flex: 1;
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--nt-cream);
}

body.native-tables-page #pos-shell[data-view="tables"] .view.tables:not([hidden]) {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--nt-cream);
}

/* =============================================================================
   3. Floors Row (Tab khu vực + search)
   ============================================================================= */
body.native-tables-page #pos-shell[data-view="tables"] .floors {
  display: flex;
  align-items: center;
  padding: calc(12 * var(--u)) calc(16 * var(--u)) 0;
  gap: calc(8 * var(--u));
  flex-wrap: nowrap;
}

body.native-tables-page #pos-shell[data-view="tables"] .floors-tabs {
  display: flex;
  gap: calc(6 * var(--u));
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

body.native-tables-page #pos-shell[data-view="tables"] .floors-tabs::-webkit-scrollbar {
  display: none;
}

/* Floor tab buttons: height 40, no border, hide count <b> */
body.native-tables-page #pos-shell[data-view="tables"] .ft {
  height: calc(40 * var(--u));
  min-height: calc(40 * var(--u));
  padding: 0 calc(16 * var(--u));
  border-radius: calc(10 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 700;
  color: var(--nt-muted);
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--u));
  cursor: pointer;
  background: transparent;
  border: none;
  white-space: nowrap;
}

body.native-tables-page #pos-shell[data-view="tables"] .ft b {
  display: none !important;
}

body.native-tables-page #pos-shell[data-view="tables"] .ft.on {
  background: var(--nt-accent);
  color: #ffffff;
}

body.native-tables-page #pos-shell[data-view="tables"] .ft:hover:not(.on) {
  background: var(--nt-creamsoft);
  color: var(--nt-ink);
}

/* Search input: height 40, 320w at right, no SVG icon */
body.native-tables-page #pos-shell[data-view="tables"] .tables-search {
  height: calc(40 * var(--u));
  width: calc(320 * var(--u));
  max-width: none;
  flex: 0 0 calc(320 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--nt-card);
  border: calc(1 * var(--u)) solid var(--nt-line);
  display: flex;
  align-items: center;
  padding: 0 calc(14 * var(--u));
  margin-left: auto;
}

body.native-tables-page #pos-shell[data-view="tables"] .tables-search svg {
  display: none !important;
}

body.native-tables-page #pos-shell[data-view="tables"] .tables-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: calc(13.5 * var(--u));
  font-weight: 400;
  color: var(--nt-ink);
}

body.native-tables-page #pos-shell[data-view="tables"] .tables-search input::placeholder {
  color: var(--nt-muted);
}

body.native-tables-page #pos-shell[data-view="tables"] .tables-search:focus-within {
  border-color: var(--nt-accent);
  background: #ffffff;
}

/* =============================================================================
   4. Status Filters Row
   ============================================================================= */
body.native-tables-page #pos-shell[data-view="tables"] .filters {
  display: flex;
  gap: calc(4 * var(--u));
  padding: calc(6 * var(--u)) calc(16 * var(--u)) 0;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

body.native-tables-page #pos-shell[data-view="tables"] .filters::-webkit-scrollbar {
  display: none;
}

body.native-tables-page #pos-shell[data-view="tables"] .f {
  height: calc(38 * var(--u));
  min-height: calc(38 * var(--u));
  padding: 0 calc(14 * var(--u));
  border: 0;
  background: transparent;
  font-size: calc(13.5 * var(--u));
  font-weight: 600;
  color: var(--nt-muted);
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--u));
  cursor: pointer;
  border-radius: calc(9 * var(--u));
  white-space: nowrap;
}

/* Indicator dot: 13 units */
body.native-tables-page #pos-shell[data-view="tables"] .f i {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  border-radius: 50%;
  border: calc(1.6 * var(--u)) solid var(--nt-border-inactive);
  background: transparent;
  box-shadow: none;
  flex: 0 0 calc(13 * var(--u));
  display: inline-block;
}

body.native-tables-page #pos-shell[data-view="tables"] .f b {
  font-size: calc(14 * var(--u));
  font-weight: 700;
  color: var(--nt-ink);
}

body.native-tables-page #pos-shell[data-view="tables"] .f.on {
  color: var(--nt-dark);
  background: var(--nt-creamsoft);
}

body.native-tables-page #pos-shell[data-view="tables"] .f.on i {
  border-color: var(--nt-accent);
  background: var(--nt-accent);
  box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--nt-cream);
}

body.native-tables-page #pos-shell[data-view="tables"] .f.on b {
  color: var(--nt-dark);
}

/* =============================================================================
   5. Table Grid (tgrid)
   Exact 8 columns at desktop >= 1000px, rows 132 units, gap 4v 6h, padding 8v 16h
   ============================================================================= */
body.native-tables-page #pos-shell[data-view="tables"] .tgrid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: calc(132 * var(--u));
  gap: calc(4 * var(--u)) calc(6 * var(--u));
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  align-content: start;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(23, 122, 111, 0.28) transparent;
}

body.native-tables-page #pos-shell[data-view="tables"] .tgrid::-webkit-scrollbar {
  width: calc(6 * var(--u));
}

body.native-tables-page #pos-shell[data-view="tables"] .tgrid::-webkit-scrollbar-thumb {
  background: rgba(23, 122, 111, 0.25);
  border-radius: calc(99 * var(--u));
}

/* Transparent table card with rounded corners */
body.native-tables-page #pos-shell[data-view="tables"] .t {
  position: relative;
  background: transparent;
  border: calc(1 * var(--u)) solid transparent;
  border-radius: calc(14 * var(--u));
  padding: calc(12 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  gap: 0;
  transition: background-color 0.12s ease;
  min-width: 0;
  overflow: hidden;
}

body.native-tables-page #pos-shell[data-view="tables"] .t:hover {
  background: var(--nt-creamsoft);
}

/* Table Icon: 64x44 viewBox 0 0 64 44 (or 0 0 96 64 viewBox styled proportionally) */
body.native-tables-page #pos-shell[data-view="tables"] .t > svg {
  width: calc(64 * var(--u));
  height: calc(44 * var(--u));
  flex: 0 0 calc(44 * var(--u));
  stroke: var(--nt-border-inactive);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: calc(5 * var(--u));
}

body.native-tables-page #pos-shell[data-view="tables"] .t > svg .top {
  fill: var(--nt-card);
}

body.native-tables-page #pos-shell[data-view="tables"] .t > svg .inn {
  stroke: var(--nt-border-inactive);
  stroke-width: 1.1;
  opacity: 0.55;
}

/* Table typography: name 13.5 bold, sub 12, no extra gap */
body.native-tables-page #pos-shell[data-view="tables"] .t .nm {
  font-size: calc(13.5 * var(--u));
  font-weight: 700;
  color: var(--nt-ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
  margin: 0;
}

body.native-tables-page #pos-shell[data-view="tables"] .t .sub {
  font-size: calc(12 * var(--u));
  font-weight: 700;
  color: var(--nt-muted);
  line-height: 1.2;
  margin: 0;
}

/* Active / Busy (Open) table styling */
body.native-tables-page #pos-shell[data-view="tables"] .t.open {
  background: transparent;
  border-color: transparent;
}

body.native-tables-page #pos-shell[data-view="tables"] .t.open:hover {
  background: var(--nt-creamsoft);
}

body.native-tables-page #pos-shell[data-view="tables"] .t.open > svg {
  stroke: var(--nt-dark);
}

body.native-tables-page #pos-shell[data-view="tables"] .t.open > svg .top {
  fill: var(--nt-accent);
}

body.native-tables-page #pos-shell[data-view="tables"] .t.open > svg .inn {
  stroke: var(--nt-creamsoft);
  opacity: 0.85;
}

body.native-tables-page #pos-shell[data-view="tables"] .t.open .nm {
  color: var(--nt-dark);
}

body.native-tables-page #pos-shell[data-view="tables"] .t.open .sub {
  color: var(--nt-dark);
}

/* =============================================================================
   6. Footer & Actions Bar
   Footer 69h, padding 8v 16h, gap 10; 5 equal buttons 52h, font 15, radius 14
   ============================================================================= */
body.native-tables-page #pos-shell[data-view="tables"] .actions {
  height: calc(69 * var(--u));
  min-height: calc(69 * var(--u));
  flex: 0 0 calc(69 * var(--u));
  border-top: calc(1 * var(--u)) solid var(--nt-line);
  background: var(--nt-panel);
  display: flex;
  gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  align-items: center;
}

/* 5 equal buttons */
body.native-tables-page #pos-shell[data-view="tables"] .actions .a {
  flex: 1 1 0;
  height: calc(52 * var(--u));
  min-height: calc(52 * var(--u));
  border-radius: calc(14 * var(--u));
  border: calc(1 * var(--u)) solid var(--nt-line);
  background: var(--nt-card);
  font-size: calc(15 * var(--u));
  font-weight: 700;
  color: var(--nt-inksoft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s ease;
  padding: 0 calc(8 * var(--u));
}

body.native-tables-page #pos-shell[data-view="tables"] .actions .a:hover {
  background: var(--nt-creamsoft);
}

/* Primary action (Mở bàn) */
body.native-tables-page #pos-shell[data-view="tables"] .actions .a.primary,
body.native-tables-page #pos-shell[data-view="tables"] .actions #act-open {
  background: var(--nt-accent);
  border-color: var(--nt-accent);
  color: #ffffff;
  box-shadow: none;
}

body.native-tables-page #pos-shell[data-view="tables"] .actions .a.primary:hover,
body.native-tables-page #pos-shell[data-view="tables"] .actions #act-open:hover {
  background: var(--nt-dark);
  border-color: var(--nt-dark);
}

/* Unsupported action buttons: aria-disabled=true (same visual style, cursor help) */
body.native-tables-page #pos-shell[data-view="tables"] .actions .a[aria-disabled="true"] {
  cursor: help;
  color: var(--nt-inksoft);
  background: var(--nt-card);
  border-color: var(--nt-line);
  opacity: 1;
}

body.native-tables-page #pos-shell[data-view="tables"] .actions .a[aria-disabled="true"]:hover {
  background: var(--nt-creamsoft);
}

/* Accessible focus visible */
body.native-tables-page #pos-shell[data-view="tables"] button:focus-visible,
body.native-tables-page #pos-shell[data-view="tables"] input:focus-visible,
body.native-tables-page #pos-shell[data-view="tables"] a:focus-visible,
body.native-tables-page #pos-shell[data-view="tables"] .t:focus-visible,
body.native-tables-page #pos-shell[data-view="tables"] .a:focus-visible {
  outline: calc(2 * var(--u)) solid var(--nt-accent);
  outline-offset: calc(2 * var(--u));
}

/* =============================================================================
   7. Responsive Adaptations
   ============================================================================= */
@media (max-width: 999px) {
  /* Tablet layout: 4 columns */
  body.native-tables-page #pos-shell[data-view="tables"] .tgrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.native-tables-page #pos-shell[data-view="tables"] .tables-search {
    width: min(calc(240 * var(--u)), 35vw);
    flex: 0 1 auto;
  }
}

@media (max-width: 600px) {
  /* Mobile/compact view: 2 columns, footer wrap, header contained */
  body.native-tables-page #pos-shell[data-view="tables"] .tgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: calc(6 * var(--u)) calc(8 * var(--u));
  }

  body.native-tables-page #pos-shell[data-view="tables"] .floors {
    flex-wrap: wrap;
    padding: calc(8 * var(--u)) calc(10 * var(--u)) 0;
  }

  body.native-tables-page #pos-shell[data-view="tables"] .tables-search {
    width: 100%;
    flex: 1 1 100%;
    margin-left: 0;
    margin-top: calc(6 * var(--u));
  }

  body.native-tables-page #pos-shell[data-view="tables"] .actions {
    height: auto;
    min-height: calc(69 * var(--u));
    flex: 0 0 auto;
    flex-wrap: wrap;
    padding: calc(8 * var(--u)) calc(10 * var(--u));
  }

  body.native-tables-page #pos-shell[data-view="tables"] .actions .a {
    min-width: calc(120 * var(--u));
  }
}