:root{
  --bg:#0b1220;
  --panel:#111a2b;
  --panel2:#0f1727;
  --text:#e8eefc;
  --muted:#aeb8d6;
  --blue:#1f6feb;
  --blue2:#0d6efd;
  --stroke:rgba(255,255,255,.08);
  --shadow:0 18px 40px rgba(0,0,0,.35);

  --sb-collapsed:72px;
  --sb-expanded:280px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:#f5f7fb;
  color:#1a1a1a;
}

/* Form controls don't inherit the page font by default in most browsers —
   force them to use the same stack as everything else so labels, buttons,
   and input text all render in one consistent typeface. */
input,select,textarea,button{
  font-family: inherit;
}

.hidden{display:none !important;}
html.ths-support-mode-active{ padding-top:32px; }
html.ths-support-mode-active #ths-support-mode-banner{ height:auto; }

/* ONLY LOGIN */
#view-login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}


 /* ===== LOGIN ===== */
.login-card{
  width:min(440px, 94vw);
  background:#ffffff;
  border:1px solid #e5e9f2;
  border-radius:16px;
  box-shadow:0 20px 40px rgba(0,0,0,.08);
  padding:22px;
}



.login-brand{
  display:flex;
  flex-direction:column;   /* logo trên, chữ dưới */
  align-items:center;      /* căn giữa ngang */
  justify-content:center;
  gap:6px;                 /* khoảng cách logo và chữ */
  text-align:center;
  margin-bottom:16px;
}


.brand-title{font-size:18px; font-weight:800;}
.brand-sub{font-size:12px; color:#777; margin-top:2px;}

.login-form{display:flex; flex-direction:column; gap:12px;}

.field span{
  display:block;
  font-size:12px;
  color:#666;
  margin-bottom:6px;
}

.brand-slogan{
  font-size: 13px;
  color: #6b7280;
  color: #16a34a;   /* green */
  margin-top: 4px;
  text-align: center;
}
.field input{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid #e5e9f2;
  background:#f8faff;
  outline:none;
}

.field input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(31,111,235,.15);
}

.login-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.chk{display:flex; align-items:center; gap:8px; font-size:12px;}

.btn-primary{
  background:linear-gradient(180deg, var(--blue2), var(--blue));
  border:none;
  color:white;
  padding:12px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
}

.btn-primary:hover{filter:brightness(1.05);}

.hint{min-height:16px; margin:0; color:#ff5a5a; font-size:12px;}

.demo-note{margin-top:8px; font-size:12px; color:#777;}



/* ===== APP LAYOUT ===== */
#view-app{
  display:flex;
  height:100vh;
  width:100%;
  padding:0;
  align-items:stretch;
  justify-content:flex-start;
  overflow:hidden;
}

/* ===== LOGIN BRAND (PRO) ===== */
.login-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;               /* khoảng cách logo <-> title */
  margin-bottom:18px;    /* gọn hơn 20 */
}

/* Logo container: NO background, NO blue box */
.brand-mark{
  width:80px;            /* ✅ to hơn cho ấn tượng */
  height:80px;
  margin:0;
  padding:0;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;

  /* ✅ premium shadow nhẹ (không glow xanh) */
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.14));
}

/* Logo image full */
.brand-mark img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

/* Trading name */
.brand-title{
  margin:0;
  font-size:20px;        /* ✅ nổi hơn */
  font-weight:900;       /* ✅ brand mạnh */
  line-height:1.15;
  letter-spacing:.3px;
  color:#111827;
}

/* ===== SIDEBAR ===== */

.sidebar{
  width:var(--sb-collapsed);
  background:#0b1220;
  border-right:1px solid rgba(255,255,255,.06);
  transition:width .2s ease;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  color:#ffffff;
}

.sidebar.is-open{
  width:var(--sb-expanded);
}

/* Hover expand */
.sidebar:not(.pinned):hover{
  width:var(--sb-expanded);
}

.sidebar__brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.logo-box{
  width:42px;
  height:42px;
  border-radius:10px;
  background:#eaf2ff;
  color:#1246a5;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
}

.brand-lines{
  white-space:nowrap;
}

.brand-name{font-weight:800;}
.brand-tag{font-size:11px; color:#9ca7c7;}

.menu{
  padding:10px 8px;
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow:auto;
}

.menu__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:10px;
  color:#e6ecff;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  transition:background .15s ease;
}

.menu__item:hover{
  background:rgba(31,111,235,.25);
}

.menu__item.active{
  background:#1f6feb;
  color:#fff;
}

.ico{
  width:26px;
  display:flex;
  justify-content:center;
}

.txt{
  white-space:nowrap;
  /* Typography pass (2026-09-11): top-level nav labels had no explicit
     size/weight, so they silently inherited the browser default (~16px)
     while .submenu__item below is pinned to 13px -- an unintentional
     mismatch, not a deliberate hierarchy choice. Give both an explicit,
     token-based value instead. */
  font-size:var(--ths-ui-font-size-base);
  font-weight:var(--ths-ui-font-weight-medium);
}

.menu__group{
  display:flex;
  flex-direction:column;
}

.menu__item--toggle{
  background:none;
  border:none;
  width:100%;
  text-align:left;
}

.chev{
  margin-left:auto;
  opacity:.8;
  transition:transform .15s ease;
}

.menu__group.open .chev{
  transform:rotate(90deg);
}

.submenu{
  margin-left:36px;
  display:none;
  flex-direction:column;
  gap:4px;
}

.menu__group.open .submenu{
  display:flex;
}

.submenu__item{
  font-size:13px;
  color:#aeb8d6;
  text-decoration:none;
  padding:6px 8px;
  border-radius:8px;
}

.submenu__item:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

/* Hide text when collapsed */
.sidebar:not(.is-open) .brand-lines,
.sidebar:not(.is-open) .txt,
.sidebar:not(.is-open) .chev{
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}

/* Show when hover */
.sidebar:not(.pinned):hover .brand-lines,
.sidebar:not(.pinned):hover .txt,
.sidebar:not(.pinned):hover .chev{
  opacity:1;
  pointer-events:auto;
}

.sidebar.is-open .brand-lines,
.sidebar.is-open .txt,
.sidebar.is-open .chev{
  opacity:1;
  pointer-events:auto;
}

.sidebar__footer{
  padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.btn-ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}

.btn-ghost:hover{
  background:rgba(255,255,255,.08);
}

/* ===============================
   MOBILE SIDEBAR DRAWER (phones / narrow tablets, non-POS pages)
   POS mode already has its own always-off-canvas + hover-edge sidebar
   (see "POS FULL VIEWPORT OVERLAY SIDEBAR" further down) — this block only
   handles every OTHER page (Report, Dashboard, Orders, etc.). Below 760px
   the sidebar used to sit permanently on screen, eating ~1/4 of a phone's
   width. Now it stays off-canvas by default and slides in via the hamburger
   button in the topbar or by swiping in from near the left edge.
================================ */
.btn-mobile-menu{
  display:none;
}

.mobile-sidebar-backdrop{
  display:none;
}

@media (max-width:760px){
  .btn-mobile-menu{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    margin-right:10px;
    border:1px solid #d7dfeb;
    border-radius:12px;
    background:#fff;
    font-size:18px;
    line-height:1;
    color:#0f172a;
    cursor:pointer;
    flex:0 0 auto;
  }

  .topbar__left{
    display:flex;
    align-items:center;
  }

  body:not(.pos-mode) #view-app .sidebar{
    position:fixed;
    top:0;
    left:0;
    height:100dvh;
    width:var(--sb-expanded) !important;
    max-width:82vw;
    z-index:2000;
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:none;
  }

  body:not(.pos-mode) #view-app .sidebar .brand-lines,
  body:not(.pos-mode) #view-app .sidebar .txt,
  body:not(.pos-mode) #view-app .sidebar .chev{
    opacity:1;
    pointer-events:auto;
  }

  body.mobile-sidebar-open:not(.pos-mode) #view-app .sidebar{
    transform:translateX(0);
    box-shadow:8px 0 28px rgba(15,23,42,.28);
  }

  body.mobile-sidebar-open .mobile-sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:1900;
    background:rgba(15,23,42,.45);
  }

  body.mobile-sidebar-open{
    overflow:hidden;
  }
}

/* ===== MAIN APP ===== */

.app{
  flex:1;
  display:flex;
  flex-direction:column;
  background:#ffffff;
  overflow:auto;        /* cho content scroll bên trong */
}


.topbar{
  height:54px; /* was 64px -- the tallest thing this bar ever has to fit is
    the 38px-tall branch <select> (.input), so 64px left ~13px of empty
    space above AND below it on every single page. 54px keeps a comfortable
    ~8px of breathing room instead while still fitting the mobile-menu
    button (38px) and user-menu text with room to spare. Reuses the exact
    value already used elsewhere in this file for a compact-but-usable
    topbar with this same content (see the dash-page tablet/mobile
    override a few thousand lines down: "min-height:54px"), rather than
    inventing a new untested number. */
  flex-shrink:0; /* .app is a flex column (topbar + .content) inside a
    height:100vh, overflow:hidden ancestor (#view-app), and .app itself is
    overflow:auto so ITS content can scroll internally -- see the "cho
    content scroll ben trong" comment on .app below. Flex items default to
    flex-shrink:1, so whenever the currently loaded page's content is tall
    enough that (topbar + content) exceeds .app's available height, the
    browser must shrink SOMETHING to lay out the row, and with no
    flex-shrink:0 here it was shrinking the topbar itself down toward its
    own minimum content height (~39px) instead of leaving that to .app's
    scrollbar. This was very visible on Setting -> General: its tabs
    briefly show a short "Loading..." placeholder (nothing to shrink, so
    topbar rendered at its correct height) and then swap in a tall settings
    form (forces the topbar to shrink) -- a header-resizes-then-tab-bar-
    jumps-down flicker on every tab click/reload, even though nothing about
    General itself is wrong. A fixed-height header should never shrink on
    ANY page, so this is fixed at the shared class rather than worked
    around per-page; verified this doesn't change anything else because
    .app already had overflow:auto handling the leftover height either way. */
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  border-bottom:1px solid #e5e9f2;
  background:#eef3ff;
}
#app-branch{
  font-weight:800;
  background:#ffffff;
  border:1px solid #0d6efd;
  color:#0d3ea6;
  box-shadow:0 4px 12px rgba(13,110,253,.12);
}
/* ===== Branch Selector ===== */
.topbar__right{
  display:flex;
  align-items:center;
  gap:8px;
}

.branch-label{
  font-size:14px;
  font-weight:700;
  color:#1f2937;
  text-transform:uppercase;
}


.branch-select{
  font-weight:800;
  color:#0d3ea6;
  border:1px solid #0d6efd;
  background:#ffffff;
  box-shadow:0 4px 12px rgba(13,110,253,.12);
  min-width:160px;
}
.power-btn{
  background:none;
  border:none;
  font-size:18px;
  cursor:pointer;
  color:#6b7280;
  transition:.2s;
}

.power-btn:hover{
  color:#ef4444;  /* đỏ khi hover */
}
.caret{
  font-size:35px;   /* tăng kích thước */
  font-weight:700;  /* đậm hơn */
  line-height:1;
  color:#374151;    /* màu đậm hơn một chút */
}
.user-box:hover .caret{
  color:#0d6efd;
}
.user-menu{
  position:relative;
}

.user-box{
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  font-weight:600;
}

.caret{
  font-size:16px;
}

.user-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:140px;
  background:#fff;
  border:1px solid #e5e9f2;
  border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  padding:6px;
  display:none;
  z-index:999;
}

.user-dropdown.show{
  display:block;
}

.user-dropdown__item{
  width:100%;
  border:none;
  background:transparent;
  padding:10px;
  border-radius:8px;
  text-align:left;
  cursor:pointer;
  font-weight:600;
}

.user-dropdown__item:hover{
  background:#f5f7fb;
  color:#ef4444;
}



.crumb{
  font-weight:800;
}

.badge{
  font-size:12px;
  color:#777;
  border:1px solid #e5e9f2;
  padding:6px 10px;
  border-radius:999px;
}

.content{
  padding:16px;
}

.card{
  border:1px solid #e5e9f2;
  border-radius:16px;
  padding:16px;
  background:#ffffff;
  box-shadow:0 12px 26px rgba(0,0,0,.06);
}

/* ===== LOGIN PRO POLISH (override) ===== */
.login-view{
  position:relative;
  background:
    radial-gradient(900px 500px at 20% 15%, rgba(31,111,235,.14), transparent 60%),
    radial-gradient(700px 420px at 80% 20%, rgba(13,110,253,.10), transparent 55%),
    linear-gradient(180deg, #f5f7fb, #eef3ff);
}

/* Card */
.login-card--pro{
  width:min(520px, 94vw);
  border-radius:20px;
  border:1px solid rgba(12, 28, 60, .10);
  box-shadow:
    0 26px 60px rgba(0,0,0,.10),
    0 6px 18px rgba(0,0,0,.06);
  padding:26px 26px 20px;
}

/* BRAND CENTERED */
.login-brand--pro{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  margin-bottom:18px;
}

/* Logo box */
.brand-mark--pro{
  width:60px;
  height:60px;
  border-radius:16px;
  letter-spacing:.5px;
  box-shadow: 0 10px 22px rgba(31,111,235,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:18px;
}
.brand-mark{
  width:64px;
  height:64px;
  margin:0 auto 4px auto;   /* giảm khoảng cách với text */
}


/* Title / subtitle */
.brand-title{
  font-size:20px;
  font-weight:800;
  line-height:1.15;
}

.brand-sub{
  font-size:12px;
  color:#667085;
}

/* LABEL BOLD */
.field span{
  font-weight:800;       /* in đậm */
  color:#1f2937;         /* đậm hơn */
}

/* Field icon wrap */
.field--icon .field-wrap{
  position:relative;
}

.field--icon input{
  padding-left:42px !important;
  background:#f7faff !important;
  border:1px solid #e5e9f2 !important;
  color:#111827 !important;
}

.field--icon input::placeholder{
  color:#98a2b3;
}

.field-ico{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  opacity:.72;
  font-size:16px;
}

.field--icon input:focus{
  border-color:rgba(31,111,235,.55) !important;
  box-shadow:0 0 0 4px rgba(31,111,235,.14) !important;
}

/* Row */
.login-row--pro{
  margin-top:2px;
}

.chk--pro{
  color:#475467;
}

/* Forgot link */
.link-btn--pro{
  color:#1f6feb;
  font-weight:700;
}

.link-btn--pro:hover{
  text-decoration:underline;
}

/* Login button */
.btn-primary--pro{
  border-radius:14px;
  padding:13px 14px;
  font-size:15px;
  letter-spacing:.2px;
  box-shadow:0 14px 26px rgba(31,111,235,.18);
}

/* Hint / alert */
.login-alert{
  margin-top:10px;
  min-height:18px;
  font-size:13px;
  color:#b42318;
}

.login-alert:empty{
  display:none;
}

.demo-note--pro{
  margin-top:12px;
  color:#667085;
  font-size:12px;
}

/* Footer note */
.login-footer-note{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  color:#98a2b3;
  user-select:none;
}




/* ===== Inventory Submenu (3 tabs like screenshot) ===== */
.submenu--radio{
  margin:4px 0 10px 14px;
  padding:8px 8px 8px 10px;
  border-left:1px solid rgba(255,255,255,.10);
  display:none;
  flex-direction:column;
  gap:6px;
}

.submenu--radio .submenu__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:10px;
  color:rgba(255,255,255,.75);
  font-size:13px;
  text-decoration:none;
  transition: background .15s ease, color .15s ease;
}

.submenu--radio .submenu__item .dot{
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
  background:transparent;
  flex:0 0 auto;
}

.submenu--radio .submenu__item:hover{
  background:rgba(255,255,255,.07);
  color:#fff;
}

.submenu--radio .submenu__item.is-active{
  background:rgba(31,111,235,.22);
  color:#fff;
}

.submenu--radio .submenu__item.is-active .dot{
  border-color:rgba(31,111,235,.95);
  background:rgba(31,111,235,.95);
  box-shadow:0 0 0 4px rgba(31,111,235,.14);
}

.submenu--radio .subtxt{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.menu__group.open .submenu--radio{
  display:flex;                 /* ✅ chỉ hiện khi group open */
}

/*===================Manage Inventory=====================*/
/* ================
   INVENTORY UI (Toolbar + Table)================== */
.inv{ display:flex; flex-direction:column; gap:12px; }

.inv-topbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;   /* ✅ sát mép trái */
  gap:18px;
  border-bottom:1px solid #e5e9f2;
  padding-bottom:10px;
}


.inv-topbar__left,
.inv-topbar__right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Đẩy nhóm search sát nhóm button */
.inv-topbar__right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;              /* cho phép nhóm search giãn */
}

#search-q{
  flex: 0 1 420px;   /* mặc định 420px */
  max-width: 100%;
}

#inv-search-q{
  width: 420px !important;
  min-width: 420px;
}




/* Buttons */
.btn{
  border:1px solid #e5e9f2;
  background:#fff;
  color:#111;
  padding:9px 12px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  line-height:1;
}
.btn:hover{ filter:brightness(0.98); }

.btn--primary{
  background:#0d6efd;
  border-color:#0d6efd;
  color:#fff;
}
.btn--success{
  background:#22c55e;
  border-color:#22c55e;
  color:#fff;
}
.btn--teal{
  background:#14b8a6;
  border-color:#14b8a6;
  color:#fff;
}

/* Inputs */
.input{
  height:38px;
  border:1px solid #e5e9f2;
  border-radius:10px;
  padding:0 12px;
  outline:none;
  background:#fff;
}
.input:focus{
  border-color:#0d6efd;
  box-shadow:0 0 0 3px rgba(13,110,253,.12);
}
.input--select{
  padding-right:28px;
}

/* Dropdown */
.dropdown{ position:relative; }

.dropdown__menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:160px;
  background:#fff;
  border:1px solid #e5e9f2;
  border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  padding:6px;
  display:none;
  z-index:999;
}

/* ✅ Open by click (JS adds .is-open) */
.dropdown.is-open .dropdown__menu{ display:block; }


.dropdown__item{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:10px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}
.dropdown__item:hover{ background:#f5f7fb; }

/* Inventory Stock summary cards (total on-hand qty / cost value / retail
   value / SKU count for the currently selected branch filter) */
.inv-summary-bar{
  display:grid;
  grid-template-columns:repeat(4,minmax(160px,1fr));
  gap:12px;
}
@media(max-width:900px){
  .inv-summary-bar{ grid-template-columns:repeat(2,minmax(140px,1fr)); }
}
@media(max-width:520px){
  .inv-summary-bar{ grid-template-columns:1fr; }
}

.inv-summary-card{
  border:1px solid #e5e9f2;
  border-radius:14px;
  background:#f8fafc;
  padding:14px 16px;
}
.inv-summary-card__label{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#64748b;
  margin-bottom:6px;
}
.inv-summary-card__value{
  font-size:20px;
  font-weight:900;
  color:#0f172a;
}
.inv-summary-card--cost{
  background:#fff7ed;
  border-color:#fed7aa;
}
.inv-summary-card--cost .inv-summary-card__value{ color:#c2410c; }
.inv-summary-card--retail{
  background:#ecfdf5;
  border-color:#a7f3d0;
}
.inv-summary-card--retail .inv-summary-card__value{ color:#047857; }

.inv-action-disabled{
  display:inline-block;
  font-size:12px;
  color:#94a3b8;
  font-style:italic;
}

/* Table */
.inv-table-wrap{
  border:1px solid #e5e9f2;
  border-radius:14px;
  overflow:auto;
  background:#fff;
}

.inv-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:1100px;
}

.inv-table thead th{
  position:sticky;
  top:0;
  background:#fff;
  z-index:2;
  font-size:12px;
  color:#111;
  text-align:left;
  padding:12px 10px;
  border-bottom:1px solid #e5e9f2;
  white-space:nowrap;
}

.inv-table tbody td{
  padding:12px 10px;
  border-bottom:1px solid #eef2f7;
  font-size:13px;
  white-space:nowrap;
  color:#111;
}

.inv-table tbody tr:hover td{
  background:#fafcff;
}

.col-num{ text-align:right; }
.col-check{ width:44px; }
.col-action{ width:110px; }

/* Responsive: make toolbar stack nicely */
@media (max-width: 900px){
  .inv-topbar{ align-items:flex-start; }
  .inv-topbar__right{ width:100%; justify-content:flex-start; }
}




/* =========================================================
   BRANCH PAGE — TABLE + ACTION DROPDOWN + MODAL (CLEAN)
   ========================================================= */

/* =========================================================
   1) BRANCH PAGE — COMMON (TABLE + DROPDOWN + HELPERS)
   ========================================================= */

/* ========================= BRANCH TABLE (LIST) ======================== */
/* Lưu ý: table trong page-branches.js cần có class "br-table"
   ví dụ: <table class="inv-table br-table" ...> */
.br-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid #e5e9f2;
  border-radius:14px;
  overflow:hidden;
}

/* Header nổi bật */
.br-table thead th{
  background:#f1f5f9;
  font-weight:900;
  color:#0f172a;
  font-size:13px;
  padding:14px 12px;
  border-bottom:1px solid #e5e9f2;
  text-align:left;
  white-space:nowrap;
}

/* Body cells */
.br-table tbody td{
  padding:14px 12px;
  border-bottom:1px solid #eef2f7;
  font-size:14px;
  color:#334155;
  vertical-align:middle;
}

/* Zebra rows */
.br-table tbody tr:nth-child(even){
  background:#f9fbff;
}

/* Hover */
.br-table tbody tr:hover{
  background:#eef6ff;
  transition:background .15s ease;
}

/* Cột No gọn */
.br-table .col-no{
  width:56px;
  text-align:center;
  color:#64748b;
  font-weight:800;
}

/* ========================= ACTION DROPDOWN (BRANCH) =================== */
/* Cho phép dropdown thoát khỏi table container */
.inv-table-wrap,
.inv-table,
.inv-table tbody tr,
.inv-table tbody td{
  overflow:visible !important;
}

.dropdown.br-dd{ position:relative; }

/* Menu */
.dropdown.br-dd .dropdown__menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  left:auto;

  width:auto;          /* ✅ tự co theo chữ */
  min-width:140px;
  max-width:none;

  background:#fff;
  border:1px solid #e5e9f2;
  border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);

  padding:6px 0;
  z-index:99999;

  display:none;              /* ẩn mặc định */
  flex-direction:column;     /* xếp dọc */
}

.dropdown.br-dd.is-open .dropdown__menu{
  display:flex;              /* mở ra */
}

/* Item */
.dropdown.br-dd .dropdown__item{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 14px;
  border-radius:8px;
  background:transparent;
  border:0;
  cursor:pointer;
  transition:0.15s ease;
  white-space:nowrap;
}

.dropdown.br-dd .dropdown__item:hover{
  background:#eef6ff;
}

/* Delete nổi bật */
.dropdown.br-dd .dropdown__item[data-act="delete"]{
  color:#d92d20;
  font-weight:600;
}

.dropdown.br-dd .dropdown__item[data-act="delete"]:hover{
  background:#fdecec;
  color:#b42318;
}


/* =========================================================
   2) BRANCH PAGE — MODAL (ADD / EDIT BRANCH)
   ========================================================= */

/* ========================= BRANCH PAGE MODAL ========================== */
.br-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:9999;
}

/* ✅ helper: dùng class này để ẩn modal (JS toggle) */
/* FORCE: Branch modal must hide when .hidden exists */
.br-modal.hidden{ 
  display:none !important; 
}


.br-modal__dialog{
  width:min(980px, 96vw); /* ✅ rộng hơn để textarea full-width đẹp */
  background:#fff;
  border:1px solid #e5e9f2;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  overflow:hidden;
}

.br-modal__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid #e5e9f2;
  background:#eef3ff;
}

.br-modal__title{
  font-weight:900;
  font-size:16px;
  color:#0d3ea6;
}

.br-form{ padding:14px; }

.br-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.br-field span{
  display:block;
  font-size:12px;
  font-weight:800;
  margin-bottom:6px;
  color:#1f2937;
}

.br-field--full{ grid-column:1 / -1; }

/* ✅ Inputs/Textareas đồng bộ style (nếu form đang dùng input native) */
.br-field input,
.br-field select,
.br-field textarea{
  width:100%;
  border:1px solid #dfe6f3;
  border-radius:12px;
  padding:12px 12px;
  font-size:14px;
  outline:none;
}

.br-field textarea{
  line-height:1.35;
  resize:vertical;
}

/* Branch form: single-line fields.
   BUG FIXED (Sept 2026): ".input" is height:38px while ".br-field select"
   adds padding:12px top+bottom, leaving ~12px for the text, so the Status
   dropdown showed "Active" cut in half. Give inputs/selects a real height
   and horizontal-only padding so the text is always vertically centred. */
.br-field input.input,
.br-field select.input{
  height:46px;
  padding:0 12px;
  line-height:normal;
  box-sizing:border-box;
}
.br-field select.input{
  padding-right:36px;
}
/* Store Code is system-generated: show it clearly as read-only. */
.br-field input:disabled,
.br-field input[readonly]{
  background:#f1f5f9;
  color:#334155;
  font-weight:700;
  cursor:not-allowed;
}

/* "i" info icon + tooltip next to a field label (Store Code). */
.br-field .br-label{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
}
.br-info{
  width:18px;
  height:18px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#0d6efd;
  color:#fff;
  font:italic 700 12px/18px Georgia, "Times New Roman", serif;
  text-align:center;
  cursor:pointer;
  flex:0 0 auto;
}
.br-info.is-open{ background:#0a58ca; box-shadow:0 0 0 3px rgba(13,110,253,.18); }
.br-info:focus-visible{ outline:2px solid #93c5fd; outline-offset:2px; }
.br-info__tip{
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  z-index:20;
  width:max-content;
  max-width:min(380px, 90vw);
  white-space:normal;
  padding:8px 10px;
  border-radius:8px;
  background:#0f172a;
  color:#fff;
  font-style:normal;
  font-weight:500;
  font-size:12px;
  line-height:1.4;
  box-shadow:0 8px 24px rgba(15,23,42,.18);
  opacity:0;
  visibility:hidden;
  transition:opacity .12s ease;
  pointer-events:none;
}
/* Shown ONLY when clicked/tapped (.is-open, toggled in page-branches.js).
   No hover/focus: a hover tip covered the input below it, so users could
   not click into the field. Click again / click outside / Esc closes it. */
.br-info.is-open + .br-info__tip{
  opacity:1;
  visibility:visible;
}

/* ✅ Optional helper classes cho Address/Working hour */
.br-textarea--addr{ min-height:120px; }  /* ~4 rows */
.br-textarea--wh{   min-height:190px; }  /* ~7 rows */

.br-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #eef2f7;
}

.br-alert{
  margin-top:10px;
  font-size:13px;
  color:#b42318;
  display:none;
}

/* ===================== Branch modal: tabs + opening hours ===================== */
/* Modal can now be taller (hours / exceptions): keep it inside the viewport
   and scroll the form, header stays visible. */
.br-modal__dialog{ max-height:92vh; display:flex; flex-direction:column; }
.br-modal__dialog > .br-form{ overflow-y:auto; }

.br-tabs{
  display:flex; flex-wrap:wrap; gap:4px; margin:-2px 0 14px; border-bottom:1px solid #e5e9f2;
  /* no overflow clipping: the tab's "i" tip must be able to drop below */
  position:relative; z-index:5;
}
.br-tab{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:10px 14px; font-size:14px; font-weight:700; color:#64748b;
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
}
.br-tab:hover{ color:#0f172a; }
.br-tab.is-active{ color:#0d6efd; border-bottom-color:#0d6efd; }
.br-tab{ position:relative; display:inline-flex; align-items:center; gap:6px; }
.br-tab .br-info{ display:inline-block; font-size:12px; }
.br-info__tip--wide{ width:min(460px, 86vw); max-width:none; left:0; text-align:left; font-size:13px; line-height:1.5; }
.br-tab__count:not(:empty){
  display:inline-block; min-width:18px; padding:0 6px; margin-left:4px;
  border-radius:999px; background:#e0ecff; color:#0d6efd; font-size:11px; line-height:18px; text-align:center;
}
.br-pane.hidden{ display:none; }

/* toolbar + notices */
.bh-tools{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.bh-muted{ font-size:12px; color:#64748b; }
.bh-notice{
  background:#fff7e6; border:1px solid #f5d38a; color:#7a4b00;
  border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:12px; line-height:1.45;
}
.bh-notice__old{ margin-top:6px; color:#8a6a2a; font-size:12px; white-space:pre-line; }
.bh-empty{ padding:22px; text-align:center; color:#64748b; border:1px dashed #d8e0ee; border-radius:12px; font-size:13px; }

/* weekly table */
.bh-table{ border:1px solid #e5e9f2; border-radius:12px; overflow:hidden; }
.bh-row{
  display:grid; grid-template-columns:120px 150px 1fr; gap:12px; align-items:center;
  padding:10px 14px; border-bottom:1px solid #eef2f7; background:#fff;
}
.bh-row:last-child{ border-bottom:0; }
.bh-row.is-closed{ background:#f8fafc; }
.bh-row__day{ font-weight:800; color:#0f172a; font-size:14px; }
.bh-row__ranges{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
.bh-range{ display:inline-flex; align-items:center; gap:6px; }
.bh-dash{ color:#94a3b8; }
.bh-time.input{ height:38px; width:118px; padding:0 8px; font-size:14px; }
.bh-closed-text{ color:#94a3b8; font-size:13px; font-style:italic; }
.bh-link-btn{
  border:0; background:none; color:#0d6efd; font-weight:700; font-size:13px; cursor:pointer; padding:4px 2px;
}
.bh-link-btn:hover{ text-decoration:underline; }
.bh-icon-btn{
  width:30px; height:30px; border:1px solid #e5e9f2; border-radius:8px; background:#fff;
  color:#64748b; cursor:pointer; font-size:13px; line-height:1;
}
.bh-icon-btn:hover{ background:#f1f5f9; color:#0f172a; }
.bh-icon-btn.is-danger:hover{ background:#fee2e2; color:#b42318; border-color:#fecaca; }

/* switch */
.bh-switch{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.bh-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.bh-switch__track{
  width:36px; height:20px; border-radius:999px; background:#cbd5e1; position:relative; transition:background .15s ease; flex:0 0 auto;
}
.bh-switch__track::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s ease;
}
.bh-switch input:checked + .bh-switch__track{ background:#22c55e; }
.bh-switch input:checked + .bh-switch__track::after{ transform:translateX(16px); }
.bh-switch input:focus-visible + .bh-switch__track{ outline:2px solid #93c5fd; outline-offset:2px; }
.bh-switch__label{ font-size:13px; font-weight:700; color:#334155; }

/* preview */
.bh-preview{ margin-top:12px; background:#f8fafc; border:1px solid #e5e9f2; border-radius:12px; padding:10px 14px; }
.bh-preview__title{ font-size:12px; font-weight:800; color:#64748b; margin-bottom:6px; }
.bh-preview__text{ margin:0; font:14px/1.5 inherit; font-family:inherit; color:#0f172a; white-space:pre-wrap; }

/* exceptions: one row per date -- Name | Date | From | To | Closed | delete */
.bh-ex-list{ display:flex; flex-direction:column; gap:8px; }
.bh-ex-head,
.bh-ex{
  display:grid;
  grid-template-columns:minmax(200px,1.6fr) 160px 120px 120px 130px 84px;
  gap:10px; align-items:center;
}
.bh-ex-head{ padding:0 14px; font-size:11px; font-weight:800; color:#64748b; text-transform:uppercase; letter-spacing:.03em; }
.bh-ex{ padding:10px 14px; border:1px solid #e5e9f2; border-radius:12px; background:#fff; }
.bh-ex.is-past{ opacity:.6; background:#f8fafc; }
.bh-ex.is-closed{ background:#fff8f8; border-color:#fde2e2; }
.bh-ex .input{ height:40px; width:100%; padding:0 10px; font-size:14px; box-sizing:border-box; }
.bh-ex .input--select{ padding-right:30px; }
.bh-ex__name{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.bh-ex__time .input:disabled{ background:#f1f5f9; color:#94a3b8; cursor:not-allowed; text-decoration:line-through; }
.bh-ex__actions{ display:flex; gap:6px; align-items:center; justify-content:flex-end; }
.bh-badge{ font-size:11px; font-weight:800; color:#64748b; background:#e2e8f0; border-radius:999px; padding:2px 8px; }
.bh-switch--danger input:checked + .bh-switch__track{ background:#ef4444; }
.bh-ex-head__name{ display:flex; align-items:center; gap:6px; }
.bh-tz{ font-size:13px; color:#0f172a; background:#f8fafc; border:1px solid #e5e9f2; border-radius:10px; padding:8px 12px; margin-bottom:12px; }
.bh-apply-all{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  background:#eef6ff; border:1px solid #cfe0ff; border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:13px; color:#0f172a;
}
.bh-apply-all input{ width:18px; height:18px; margin-top:1px; flex:0 0 auto; accent-color:#0d6efd; }
.bh-apply-all .bh-muted{ display:block; margin-top:2px; }
/* "Custom" name: text box in place of the dropdown, ▾ returns to the list */
.bh-name-input{ position:relative; }
.bh-name-input .input{ padding-right:40px !important; }
.bh-name-input__back{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:28px; height:28px; border:0; border-radius:6px; background:transparent;
  color:#475569; font-size:14px; cursor:pointer;
}
.bh-name-input__back:hover{ background:#eef4ff; color:#0d6efd; }
.bh-edit-btn{
  width:22px; height:22px; padding:0; border:1px solid #cfe0ff; border-radius:6px; background:#eef4ff;
  color:#0d6efd; font-size:13px; line-height:20px; cursor:pointer; text-transform:none;
}
.bh-edit-btn:hover, .bh-edit-btn.is-open{ background:#0d6efd; color:#fff; border-color:#0d6efd; }
.bh-names{ border:1px solid #cfe0ff; background:#f5f9ff; border-radius:12px; padding:10px 12px; margin-bottom:10px; }
.bh-names__head{ display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.bh-names__head b{ font-size:13px; color:#0f172a; white-space:nowrap; }
.bh-names__head .bh-muted{ flex:1; }
.bh-names__list{ display:flex; flex-wrap:wrap; gap:6px; }
.bh-chip{ display:inline-flex; align-items:center; gap:4px; background:#fff; border:1px solid #dbe4f3; border-radius:999px; padding:3px 4px 3px 10px; font-size:13px; color:#0f172a; }
.bh-chip__x{ width:20px; height:20px; border:0; border-radius:50%; background:#f1f5f9; color:#64748b; cursor:pointer; font-size:11px; line-height:20px; padding:0; }
.bh-chip__x:hover{ background:#fee2e2; color:#b42318; }

/* Working Hour column in the branch list shows the generated multi-line text */
.inv-table.br-table td.col-working{ white-space:pre-line; }

@media (max-width: 720px){
  .bh-row{ grid-template-columns:1fr auto; }
  .bh-row__ranges{ grid-column:1 / -1; }
  .bh-ex-head{ display:flex; }
  .bh-ex-head > div:not(.bh-ex-head__name){ display:none; }
  .bh-ex{ grid-template-columns:1fr 1fr; }
  .bh-ex__name{ grid-column:1 / -1; }
}

/* Mobile responsive */
@media (max-width: 860px){
  .br-grid{ grid-template-columns:1fr; }
  .br-field--full{ grid-column:auto; }
}

/* ===== Branch Status Badge ===== */
.br-status{
  display:inline-block;
  padding:4px 10px;
  font-size:12px;
  font-weight:700;
  border-radius:999px;
  text-align:center;
  min-width:70px;
}

/* Active */
.br-status--active{
  background:#e6f9ef;
  color:#0f9d58;
  border:1px solid #b6e8c9;
}

/* Inactive */
.br-status--inactive{
  background:#fff6e0;
  color:#c77700;
  border:1px solid #ffd38a;
}
#br-working-hour{
  height:auto !important;
  min-height:120px !important;  /* 4 dòng */
  line-height:1.4;
  padding:12px;
  resize:vertical;
}


/* ===== Branch table horizontal scroll ===== */
/* ===== Branch table: scroll only inside table area ===== */

/* đảm bảo panel/page không bị kéo ngang */
html, body { overflow-x: hidden; }

/* wrapper ngoài chỉ giữ layout */
.inv-table-wrap{
  width: 100%;
  max-width: 100%;
}

/* ✅ scroll container thật nằm ở đây */
.br-table-scroll{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;     /* hoặc scroll nếu muốn luôn hiện */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;  /* chừa chỗ cho scrollbar */
}

/* table được phép rộng hơn container để sinh scroll */
.br-table-scroll > table{
  width: max-content;   /* quan trọng */
  min-width: 100%;      /* không nhỏ hơn khung */
  border-collapse: collapse;
}

/* =========================
   Branch table horizontal scroll (table-only)
========================= */
.inv-table-wrap{
  width: 100%;
  overflow-x: auto;             /* ✅ scroll ngang của bảng */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* để table giữ layout ổn định */
.inv-table.br-table{
  min-width: 1200px;            /* ✅ tùy, để không bị co cột */
  table-layout: fixed;          /* ✅ cột ổn định, tránh kéo giãn vô hạn */
}

/* wrap dài trong ô, không kéo tràn page */
.inv-table.br-table td,
.inv-table.br-table th{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Branches table: always fill the full width of its card.
   BUG FIXED (Sept 2026): ".br-table-scroll > table { width:max-content }"
   plus ".inv-table.br-table { min-width:1200px }" (higher specificity, it
   overrode "min-width:100%") made the table only as wide as its columns,
   leaving an empty strip on the right on wide screens. Now: 100% wide,
   still scrolls horizontally on small screens thanks to min-width. */
.br-table-scroll > .inv-table.br-table{
  width: 100%;
  min-width: 1100px;
}
/* The card (.inv-table-wrap) already draws the border/radius -- drop the
   table's own border so there is no double frame. */
.inv-table-wrap .inv-table.br-table{
  border: 0;
  border-radius: 0;
}
.inv-table.br-table th.col-action,
.inv-table.br-table td.col-action{
  width: 90px;
  text-align: center;
}

/* cho 2 cột dài cho xuống dòng (Address + Working Hour) */
.inv-table.br-table td.col-address,
.inv-table.br-table td.col-working{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  line-height: 1.25;
}

/* =========================
   Portal dropdown (render to body)
========================= */
.br-dd-portal{
  position: absolute;            /* ✅ đổi fixed -> absolute */
  z-index: 99999;
  margin: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
  min-width: 220px;
}

.br-dd-portal .dropdown__item{
  width: 100%;
  text-align: left;
  padding: 10px 10px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  display: block;
}

.br-dd-portal .dropdown__item:hover{
  background: rgba(13,110,253,.08);
}

.br-dd-portal .dropdown__item.is-danger{ color:#dc3545; }
.br-dd-portal .dropdown__item.is-danger:hover{ background: rgba(220,53,69,.10); }


/* ===============================
   Inventory Row Expand (Pro UI)
================================= */

tr.inv-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

tr.inv-row:hover {
  background: rgba(13,110,253,.05);
}

tr.inv-row.is-expanded {
  background: rgba(13,110,253,.08);
}

.inv-subwrap {
  padding: 8px 10px;
}

.inv-detail-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.inv-detail-table th,
.inv-detail-table td {
  padding: 8px;
  border-top: 1px solid #eee;
  font-size: 13px;
}

.inv-detail-table thead th {
  font-weight: 800;
  background: #f7f9ff;
}



/* ===============================
   INVENTORY MOVE MODAL POLISH
================================ */

#inv-move-modal.br-modal {
  backdrop-filter: blur(3px);
}

#inv-move-modal .br-modal__dialog {
  max-width: 720px;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  animation: invFadeIn .18s ease;
}

@keyframes invFadeIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Top bar */
#inv-move-modal .br-modal__top {
  padding: 18px 22px 12px;
  border-bottom: 1px solid #eef2f7;
}

#inv-move-modal .br-modal__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .3px;
}

#inv-move-modal #inv-move-x.btn {
  background: #f3f4f6;
  border-radius: 10px;
  width: 36px;
  height: 36px;
  font-size: 16px;
  transition: all .15s ease;
}

#inv-move-modal #inv-move-x.btn:hover {
  background: #e5e7eb;
}

/* Body spacing */
#inv-move-modal .br-form {
  padding: 18px 22px 22px;
}

#inv-move-modal .br-grid {
  gap: 18px;
}

/* Input styling */
#inv-move-modal input,
#inv-move-modal select {
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #e2e8f0;
  transition: all .15s ease;
}

#inv-move-modal input:focus,
#inv-move-modal select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
  outline: none;
}

/* Warning styling */
#inv-move-warn {
  background: #fef2f2;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 600;
}

/* Info box */
#inv-move-hint {
  font-size: 13px;
  background: #f8fafc;
}

/* Footer buttons */
#inv-move-modal .br-actions {
  padding-top: 14px;
  border-top: 1px solid #eef2f7;
}

#inv-move-modal .btn {
  border-radius: 12px;
  padding: 8px 16px;
  font-weight: 600;
}

#inv-move-modal .btn--success {
  background: #16a34a;
  border: none;
}

#inv-move-modal .btn--success:hover {
  background: #15803d;
}




/* ===============================
   INVENTORY MOVE MODAL POLISH
/* =========================
   INVENTORY - MOVE STOCK MODAL
   (Move modal uses .inv-add__header in inventory.movefix.v3.js)
========================= */

#inv-move-modal{
  z-index: 1000000; /* higher than dropdown portal */
}

#inv-move-modal .br-modal__dialog{
  max-width: 760px;
  border-radius: 16px;
  overflow: hidden; /* clip topbar radius */
  box-shadow: 0 22px 55px rgba(0,0,0,.22);
}

/* Topbar */
#inv-move-modal .inv-add__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;

  padding: 14px 16px;
  background: #f3f7ff;
  border-bottom: 1px solid #e5e9f2;
}

#inv-move-modal #inv-move-title{
  margin: 0 !important;
  flex: 1 1 auto;
  min-width: 0;

  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  color: #0d3ea6;
}

#inv-move-modal #inv-move-x{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;

  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #eef2ff;
  border: 1px solid #e5e7eb;
}
#inv-move-modal #inv-move-x:hover{
  background: #e0e7ff;
}

/* Body spacing */
#inv-move-modal .br-form{
  padding: 14px 16px 16px;
}
#inv-move-modal .br-grid{
  gap: 14px;
}

/* Hint + warning */
#inv-move-modal #inv-move-hint{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #fbfcff;
  font-weight: 700;
}

#inv-move-modal #inv-move-warn{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #b42318;
  font-weight: 900;
}

/* Footer buttons */
#inv-move-modal .br-actions{
  padding: 12px 16px;
  border-top: 1px solid #e5e9f2;
  background: #fff;
}

#inv-move-modal #inv-move-confirm.btn--success{
  font-weight: 900;
  border-radius: 12px;
  padding: 10px 14px;
}
#inv-move-modal #inv-move-cancel.btn{
  border-radius: 12px;
  padding: 10px 14px;
}

/* =========================
   MORE MODELS (Edit Product)
   - Keep inside group (no overflow)
   - One-line row with horizontal scroll
========================= */

#invp-more-models{
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding-bottom: 6px;          /* space for scrollbar */
  -webkit-overflow-scrolling: touch;
}

/* 1 row = one line */
#invp-more-models .inv-more__row{
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: flex-end;

  min-width: 980px;             /* adjust if needed */
  padding: 14px;
  border: 1px solid #dfe7ee;
  border-radius: 16px;
  background: #fff;
  box-sizing: border-box;
}

/* Field blocks */
#invp-more-models .inv-more__row .field{
  flex: 0 0 auto;
  min-width: 150px;
}

/* Wider description column (optional, if mm-desc exists) */
#invp-more-models .inv-more__row .field:has(.mm-desc),
#invp-more-models .inv-more__row .field:has(select.mm-desc){
  min-width: 220px;
}

/* Retail fixed width */
#invp-more-models .mm-retail{
  width: 140px !important;
  min-width: 140px !important;
  text-align: right;
  padding-right: 12px;
}

/* Compact labels */
#invp-more-models .inv-more__row .lbl{
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
}

/* Inputs/selects sizing */
#invp-more-models .inv-more__row .input,
#invp-more-models .inv-more__row select{
  height: 40px;
  border-radius: 12px;
}

/* Clear button (keep size stable) */
#invp-more-models .inv-more__row button{
  flex: 0 0 auto;
  height: 40px;
  border-radius: 12px;
  padding: 0 14px;
}



/* --- More Models: keep Clear inside row --- */

/* cột chứa button Clear: fixed width */
#invp-more-models .inv-more__row .field:has(button){
  flex: 0 0 110px;
  min-width: 110px;
  max-width: 110px;
}

/* button Clear: fit the column, no overflow */
#invp-more-models .inv-more__row .field:has(button) button{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  height: 40px;
  padding: 0 10px;     /* giảm padding để khỏi tràn */
  border-radius: 12px;
}


/* =========================
   INVENTORY - Add More Model button highlight
   Targets: #invp-add-more-model (Edit Product modal)
========================= */
#invp-add-more-model{
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
  font-weight: 900;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 10px 24px rgba(13,110,253,.22);
}
#invp-add-more-model:hover{ filter: brightness(1.05); }
#invp-add-more-model:active{ transform: translateY(1px); }


/* =========================
   GENERAL SETTINGS (General tab)
   Layout refinement (GENERAL_SETTINGS_UI_REFINEMENT.md, 2026-09-11):
   dropped the big rounded "card inside a page" wrapper and turned the
   8 main tabs (Company/Regional/.../Security) from independent pill
   buttons into a connected rectangular tab strip. Scoped to THIS page
   only -- .thg-page is a dedicated wrapper, NOT the shared .card class
   used by ~10 other pages, so nothing outside General Settings changes.
========================= */
.thg-page{
  /* Was `.card` (border + 16px radius + shadow + 16px padding). The
     page's own .content ancestor still gives 16px LEFT/RIGHT/BOTTOM
     padding (shared by every route, left untouched), but per user
     feedback (screenshot, 2026-09-11) the tab strip should sit flush
     against the bottom edge of the topbar above it, with no gap --
     so the top padding is cancelled here instead, scoped to THIS page
     only via a negative margin (never touch .content itself, every
     other page relies on its 16px top padding too). */
  margin-top:-16px;
  padding:0 0 16px;
}
.thg-tabs{
  display:flex;
  align-items:center;
  gap:0;
  border-bottom:1px solid var(--ths-ui-border,#dbe3ef);
  padding:0;
  margin:0 0 14px;
  flex-wrap:wrap;
}
.thg-tabs__spacer{ flex:1; }
.thg-tab{
  appearance:none;
  align-self:flex-end;
  border:1px solid var(--ths-ui-border,#dbe3ef);
  border-bottom:none;
  background:#f8fafc;
  color:#475569;
  padding:8px 14px;
  border-radius:6px 6px 0 0;
  font-size:var(--ths-ui-font-size-base,14px);
  font-weight:var(--ths-ui-font-weight-medium,500);
  cursor:pointer;
  margin-right:-1px;
  position:relative;
  transition:background .15s ease, color .15s ease;
}
.thg-tab:last-of-type{ margin-right:0; }
.thg-tab:hover{ background:#eef2f7; color:#1e3a5c; }
.thg-tab.is-active{
  background:#0d6efd;
  color:#fff;
  border-color:#0d6efd;
  z-index:1;
}
.thg-btn{
  appearance:none;
  border:1px solid #0d6efd;
  background:#0d6efd;
  color:#fff;
  padding:8px 12px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
}
.thg-btn--ghost{
  background:#fff;
  color:#0d6efd;
}
.thg-body{ padding-top:6px; }
.thg-form{ display:flex; flex-direction:column; gap:10px; max-width:900px; }
.thg-row{ display:grid; grid-template-columns: 260px 1fr; gap:14px; align-items:start; }
.thg-row__label .thg-lbl{ font-weight:800; }
#thg-popular-modal .thg-lbl{ font-weight:700; }
#thg-popular-modal .chk span{ font-weight:700; font-size:14px; }
.thg-hint{ font-size:12px; color:#6c757d; margin-top:4px; }
.thg-timezone-field{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.thg-timezone-clock{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px; font-weight:700; color:#0b5ed7;
  background:#f7fbff; border:1px solid rgba(13,110,253,.25); border-radius:8px;
  padding:4px 10px; white-space:nowrap;
}
.thg-repairflow-rule span{ font-size:15px; font-weight:800; }
.thg-h3{ margin:10px 0 0; font-size:16px; }
.thg-sep{ height:1px; background:rgba(0,0,0,.08); margin:6px 0; }
.thg-note{ background:#f7fbff; border:1px dashed rgba(13,110,253,.25); padding:10px 12px; border-radius:12px; color:#0b5ed7; }
.thg-code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; }
.thg-error{ padding:12px; border-radius:12px; background:#fff3f3; border:1px solid rgba(220,53,69,.25); color:#b02a37; }
@media (max-width: 860px){
  .thg-row{ grid-template-columns: 1fr; }
}

/* =========================
   General Settings - Company tab: grouped boxes (2-col)
========================= */
.thg-form.thg-company-v1{
  max-width:none;
  width:100%;
}
.thg-group{
  border:1px solid var(--ths-ui-border,#dbe3ef);
  border-radius:10px;
  background:#fff;
  padding:16px 18px;
  margin-bottom:16px;
}
.thg-group:last-child{ margin-bottom:0; }
.thg-group__title{
  margin:0 0 14px;
  font-size:var(--ths-ui-font-size-md,16px);
  font-weight:900;
  color:#0f172a;
}
.thg-group__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 28px;
}
.thg-group__grid .thg-row--full{ grid-column:1/-1; }
/* Plain text/select fields (Legal Name, ABN, Phone, Email, Support Email,
   Website, all Address fields, Header Density) were rendering at the
   browser's cramped default input width (~200px) -- e.g. Support Email
   was overflowing/truncating. Widen by ~20mm (CSS mm = 96/25.4px, so
   20mm ~= 76px) on top of that default. Uses ">" (direct child) so it
   does NOT catch the "px" number fields (Logo Height/Trading Name
   Size/Slogan Size -- wrapped in .thg-num-px, only need 2-3 digits) or
   the Trading Name/Slogan fields (wrapped in .thg-inline-color__text,
   which already has its own width:100% to fill the space next to the
   color swatch) -- both stay at their existing, already-correct widths. */
.thg-form.thg-company-v1 .thg-row__field > input.input,
.thg-form.thg-company-v1 .thg-row__field > select.input{
  width:280px;
  max-width:100%;
}
@media (max-width: 860px){
  .thg-group__grid{ grid-template-columns: 1fr; }
}

/* =========================
   General Settings - Regional tab: grouped boxes (2-col), same
   pattern as the Company tab above (see chat "Regional tab -- match
   Company tab: grouped borders, info-icon hints, wider inputs, 2 cols").
========================= */
.thg-form.thg-regional-v1{
  max-width:none;
  width:100%;
}
.thg-form.thg-regional-v1 .thg-row__field > input.input,
.thg-form.thg-regional-v1 .thg-row__field > select.input{
  width:280px;
  max-width:100%;
}
.thg-inline-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.thg-inline-actions select.input{ width:220px; max-width:100%; }
.thg-timezone-field select.input{ width:220px; max-width:100%; }

.thg-regional-preview__title{ font-weight:900; margin-bottom:10px; color:#0f172a; }
.thg-regional-preview__grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px 28px;
}
.thg-regional-preview__item{
  background:#f7fbff;
  border:1px solid rgba(13,110,253,.15);
  border-radius:10px;
  padding:8px 12px;
}
.thg-regional-preview__label{ font-size:12px; color:#6c757d; }
.thg-regional-preview__value{ font-weight:800; color:#0b5ed7; margin-top:2px; }
@media (max-width: 860px){
  .thg-regional-preview__grid{ grid-template-columns: 1fr; }
}

/* =========================
   General Settings - Payments tab: same grouped-box pattern as Company
   above (see chat "tiếp theo làm tab Payments giống Company"). Every
   field here already had an inline hint, so every fieldRow() became
   fieldRowInfo() -- unlike Company, where only some fields had one.
========================= */
.thg-form.thg-payments-v1{
  max-width:none;
  width:100%;
}
.thg-form.thg-payments-v1 .thg-row__field > input.input,
.thg-form.thg-payments-v1 .thg-row__field > select.input{
  width:280px;
  max-width:100%;
}

/* =========================
   General Settings - Printing tab (Barcode / Messages / Rules /
   Profiles sub-tabs): same grouped-box pattern as Company/Regional
   above (see chat "Printing tab -- match Company tab"). The Templates
   sub-tab and its template builder are a card gallery + live preview,
   not a field list, so they keep their existing look untouched.
========================= */
.thg-printing-v1 .thg-group .thg-row__field > input.input,
.thg-printing-v1 .thg-group .thg-row__field > select.input{
  width:280px;
  max-width:100%;
}

/* =========================
   General Settings - POS tab (General / Repair Flow / Popular Cart
   sub-tabs): same "attached panel" treatment as the Printing tab --
   the sub-tab row + whichever sub-tab's content sit inside ONE
   bordered panel, flush under the active "POS" main tab, with a top
   border in the same blue as the active tab (see chat "tiếp tục như
   vậy cho tab POS"). -20px cancels .thg-tabs' 14px bottom margin plus
   .thg-body's 6px padding-top. Scoped to .thg-system-v1 only.
========================= */
.thg-form.thg-system-v1{
  max-width:none;
  width:100%;
  margin-top:-20px;
  border:1px solid var(--ths-ui-border,#dbe3ef);
  border-top:3px solid #0d6efd;
  border-radius:0 0 12px 12px;
  background:#fff;
  padding:16px;
}
.thg-form.thg-system-v1 .thg-group .thg-row__field > input.input,
.thg-form.thg-system-v1 .thg-group .thg-row__field > select.input{
  width:280px;
  max-width:100%;
}
/* .thg-flow (Repair Flow / Popular Cart sections) already gets its own
   top border + spacing from the injected <style> in page-general.js;
   inside the new .thg-system-v1 panel that would double up with the
   panel's own border/padding and the sub-tab row's bottom margin, so
   neutralize it here (used ONLY inside renderFlowSection /
   renderPopularCartSection -- confirmed via grep, safe to scope). */
.thg-system-v1 .thg-flow{
  margin-top:0;
  border-top:none;
  padding-top:0;
}

/* =========================
   General Settings - Notifications tab (Repair Flow / POS / Business
   Documents / SMS & Email Setup sub-tabs): same "attached panel"
   treatment as Printing/POS -- the master switch box + sub-tab row +
   whichever sub-tab's content sit inside ONE bordered panel, flush
   under the active "Notifications" main tab, with a top border in the
   same blue as the active tab (see chat "sub tab Notifications giống
   các tab trước"). -20px cancels .thg-tabs' 14px bottom margin plus
   .thg-body's 6px padding-top. Scoped to .thg-notify-v1 only.
========================= */
.thg-form.thg-notify-v1{
  margin-top:-20px;
  border:1px solid var(--ths-ui-border,#dbe3ef);
  border-top:3px solid #0d6efd;
  border-radius:0 0 12px 12px;
  background:#fff;
  padding:16px;
}
.thg-form.thg-notify-v1 .thg-group{
  margin-bottom:16px;
}


/* =========================
   General Settings - Company Logo (Upload + Crop)
========================= */
.thg-logo{
  display:flex;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.thg-logo__left{ display:flex; gap:12px; align-items:center; min-width:320px; flex:1; }
.thg-logo__preview{
  width:180px; height:76px;
  border:1px dashed rgba(13,110,253,.35);
  background:#f7fbff;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.thg-logo__preview img{ width:100%; height:100%; object-fit:contain; }
.thg-logo__ph{ color:#6b7a99; font-weight:700; font-size:12px; }
.thg-logo__actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.thg-logo__file{ display:none; }

/* Modal */
.thg-modal{ position:fixed; inset:0; z-index:100000; display:none; }
.thg-modal.is-open{ display:block; }
.thg-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.thg-modal__dialog{
  position:relative;
  width:min(980px, calc(100vw - 24px));
  margin:56px auto;
  background:#fff;
  border-radius:18px;
  box-shadow:0 26px 70px rgba(0,0,0,.25);
  overflow:hidden;
}
.thg-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.thg-modal__title{ font-weight:900; color:#111; }
.thg-modal__x{
  appearance:none; border:none; background:transparent;
  font-size:22px; line-height:1;
  cursor:pointer;
  width:36px; height:36px;
  border-radius:10px;
}
.thg-modal__x:hover{ background:rgba(13,110,253,.08); }
.thg-modal__body{ padding:14px; }
.thg-modal__foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:12px 14px;
  border-top:1px solid rgba(0,0,0,.08);
  background:#fafcff;
}

/* Cropper */
.thg-crop{ display:flex; flex-direction:column; gap:12px; }
#thg-crop-canvas{
  width:100%;
  border-radius:14px;
  background:#0b1220;
  border:1px solid rgba(255,255,255,.12);
}
.thg-crop__tools{ display:flex; flex-direction:column; gap:10px; }
.thg-crop__row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.thg-crop__lbl{ font-weight:800; color:#111; min-width:56px; }
.thg-crop__sp{ flex:1; }
.thg-chip{
  appearance:none;
  border:1px solid rgba(13,110,253,.25);
  background:#fff;
  color:#0d6efd;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
}
.thg-chip.is-active{ background:#0d6efd; border-color:#0d6efd; color:#fff; }
.thg-range{ width:min(420px, 100%); }
.thg-crop__val{ font-weight:900; color:#0d6efd; }


.thg-payments .thg-label,
.thg-payments label{
  font-size:12.5px !important;
  font-weight:400 !important;
}

.thg-payments input[type="checkbox"]{
  transform:scale(0.9);
}







/* =========================================
   RBAC / ROLES PAGE
========================================= */

.rbac-page{
  padding: 22px;
  background: #f5f7fb;
  min-height: 100%;
  color: #172033;
}

.rbac-header{
  margin-bottom: 18px;
}

.rbac-header h2{
  margin: 0 0 6px;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 800;
  color: #101828;
}

.rbac-header p{
  margin: 0;
  font-size: 15px;
  color: #667085;
}

/* 2-column enterprise layout */
.rbac-layout{
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* card */
.rbac-card{
  background: #fff;
  border: 1px solid #e7ecf3;
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .05);
  padding: 18px;
}

.rbac-card__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.rbac-card__top h3{
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  color: #101828;
}

/* buttons */
.rbac-page .btn{
  appearance: none;
  border: 1px solid #d7dfeb;
  background: #fff;
  color: #243041;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: .18s ease;
}

.rbac-page .btn:hover{
  border-color: #b9c7da;
  background: #f8fafc;
}

.rbac-page .btn--primary{
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .20);
}

.rbac-page .btn--primary:hover{
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.rbac-page .btn--success{
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
  box-shadow: 0 8px 20px rgba(22, 163, 74, .18);
}

.rbac-page .btn--success:hover{
  background: #15803d;
  border-color: #15803d;
}

.rbac-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* pills / small meta */
.rbac-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.rbac-pill.is-ok{
  background: #ecfdf3;
  color: #067647;
  border-color: #b7ebc6;
}

.rbac-pill.is-muted{
  background: #f2f4f7;
  color: #667085;
  border-color: #e4e7ec;
}

/* left role list */
.rbac-role-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 240px);
  overflow: auto;
  padding-right: 4px;
}

.rbac-role-item{
  width: 100%;
  text-align: left;
  border: 1px solid #e7ecf3;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  transition: .18s ease;
  display: block;
}

.rbac-role-item:hover{
  border-color: #bfd2ff;
  background: #f8fbff;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .08);
}

.rbac-role-item.is-active{
  border-color: #2563eb;
  background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .12);
}

.rbac-role-item__name{
  font-size: 18px;
  font-weight: 800;
  color: #101828;
  margin-bottom: 8px;
}

.rbac-role-item__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: #667085;
}

.rbac-role-item__meta span{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #ebeff5;
}

/* role header */
.rbac-role-head{
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) 180px;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid #edf1f7;
  background: #f9fbff;
  border-radius: 16px;
}

.rbac-inline-field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rbac-inline-field > span{
  font-size: 13px;
  font-weight: 700;
  color: #475467;
}

/* toolbar */
.rbac-perm-toolbar{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  padding-bottom: 10px;
}

/* module cards */
.rbac-perm-groups{
  display: grid;
  gap: 14px;
}

.rbac-module{
  border: 1px solid #e9eef5;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

.rbac-module{
  border-color: #cfd8e6;
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
}

.rbac-module__title{
  padding: 12px 16px 12px 18px;
  background: linear-gradient(90deg, #1e3a8a 0%, #2454c6 100%);
  border-bottom: 1px solid #1e3a8a;
  border-left: 6px solid #f59e0b;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.rbac-module__rows{
  display: grid;
}

/* permission row */
.rbac-perm-row{
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 180px;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #f1f4f8;
}

.rbac-module__rows .rbac-perm-row:last-child{
  border-bottom: 0;
}

.rbac-perm-row:hover{
  background: #fafcff;
}

.rbac-perm-check{
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 3px;
  align-items: start;
  margin: 0;
  cursor: pointer;
}

.rbac-perm-check input[type="checkbox"]{
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
}

.rbac-perm-check span{
  font-size: 15px;
  font-weight: 700;
  color: #172033;
  line-height: 1.35;
}

.rbac-perm-check code{
  grid-column: 2;
  display: inline-block;
  margin-top: 2px;
  font-size: 12px;
  color: #667085;
  background: #f6f8fb;
  border: 1px solid #e8edf4;
  border-radius: 8px;
  padding: 3px 8px;
  width: fit-content;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* inputs */
.rbac-page .input{
  width: 100%;
  min-height: 42px;
  border: 1px solid #d7dfeb;
  border-radius: 12px;
  background: #fff;
  color: #172033;
  padding: 0 12px;
  outline: none;
  transition: .18s ease;
  box-sizing: border-box;
}

.rbac-page textarea.input{
  min-height: 96px;
  padding: 12px;
  resize: vertical;
}

.rbac-page .input:focus{
  border-color: #93b4ff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.rbac-page .input[disabled],
.rbac-page .input:disabled{
  background: #f2f4f7;
  color: #98a2b3;
  cursor: not-allowed;
}

.rbac-page .input--select{
  padding-right: 38px;
}

.rbac-scope{
  justify-self: end;
  width: 180px;
}

/* Roles page: show each permission group in 2 columns (instead of one long
   list) so the page is roughly half as tall. Single column on narrow screens
   (the max-width:820px block below stacks everything). */
@media (min-width: 821px){
  .rbac-module__rows{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rbac-module__rows .rbac-perm-row{
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 10px;
    padding: 12px 14px;
  }

  /* vertical divider between the two columns */
  .rbac-module__rows .rbac-perm-row:nth-child(odd){
    border-right: 1px solid #f1f4f8;
  }

  /* bottom border only between rows: the last row (either column) has none */
  .rbac-module__rows .rbac-perm-row:nth-last-child(2):nth-child(odd){
    border-bottom: 0;
  }

  .rbac-module__rows .rbac-scope{
    width: 160px;
    min-width: 0;
    font-size: 13px;
  }
}

/* modal */
.rbac-modal.hidden{
  display: none;
}

.rbac-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.rbac-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(2px);
}

.rbac-modal__dialog{
  position: relative;
  width: min(760px, calc(100vw - 32px));
  margin: 56px auto;
  background: #fff;
  border: 1px solid #e7ecf3;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(16, 24, 40, .22);
  padding: 18px;
  z-index: 1;
}

.rbac-form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.rbac-form-grid label{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rbac-form-grid label > span{
  font-size: 13px;
  font-weight: 700;
  color: #475467;
}

.rbac-span-2{
  grid-column: 1 / -1;
}

.rbac-checkline{
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding-top: 24px;
}

.rbac-checkline input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
}

/* helper */
.ths-muted{
  color: #667085;
  font-size: 14px;
}

/* responsive */
@media (max-width: 1180px){
  .rbac-layout{
    grid-template-columns: 1fr;
  }

  .rbac-role-list{
    max-height: none;
  }
}

@media (max-width: 820px){
  .rbac-page{
    padding: 16px;
  }

  .rbac-card{
    padding: 14px;
    border-radius: 16px;
  }

  .rbac-card__top{
    flex-direction: column;
    align-items: stretch;
  }

  .rbac-role-head{
    grid-template-columns: 1fr;
  }

  .rbac-perm-row{
    grid-template-columns: 1fr;
  }

  .rbac-scope{
    justify-self: stretch;
    width: 100%;
  }

  .rbac-form-grid{
    grid-template-columns: 1fr;
  }

  .rbac-span-2{
    grid-column: auto;
  }

  .rbac-modal__dialog{
    margin: 24px auto;
    width: min(760px, calc(100vw - 20px));
  }
}





.rbac-perm-count{
  margin-left:10px;
  font-size:13px;
  font-weight:600;
  color:#667085;
}

.rbac-dd{
  position:relative;
  display:inline-block;
}

.rbac-dd__menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:190px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  box-shadow:0 12px 30px rgba(2,6,23,.14);
  padding:6px;
  z-index:9999;
  overflow:hidden;
}

.rbac-dd__item{
  display:block;
  width:100%;
  border:0;
  background:#fff;
  text-align:left;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font:inherit;
  line-height:1.25;
  white-space:nowrap;
}

.rbac-dd__item:hover{
  background:#f3f6fb;
}

.rbac-dd__item.is-danger{
  color:#dc2626;
}

.rbac-dd__item.is-danger:hover{
  background:#fef2f2;
}

.hidden{
  display:none !important;
}

.rbac-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  margin-top:8px;
}
/* ===== User Modal ===== */
.rbac-modal__dialog,
.rbac-modal__dialog.rbac-modal__dialog--lg{
  width:min(760px, calc(100vw - 40px));
  background:#fff;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(2,6,23,.2);
  overflow:hidden;
  padding:0 !important;
}

.rbac-modal__topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin:0;
  padding:16px 22px;
  box-sizing:border-box;
  border-bottom:1px solid #e7edf5;
  background:#f8fbff;
}

.rbac-modal__title-wrap h3{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:#0f172a;
  line-height:1.2;
}

.rbac-modal__x{
  appearance:none;
  border:1px solid #d8e1ec;
  background:#fff;
  width:36px;
  height:36px;
  border-radius:10px;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.rbac-modal__x:hover{
  background:#f1f5f9;
}

/* Add/Edit Customer modal topbar -- previously fell back to the generic
   pale .rbac-modal__topbar look, which didn't match the rest of the
   system's modal topbars (Repair Tools, Trade-in Setting, Notification
   compose all use this same solid blue). Used by both the Customers page
   (page-customers.js) and the shared modal POS opens (customers.js), via
   the same .cust-modal__topbar class on both. */
.cust-modal__topbar{
  background:#0d6efd;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.cust-modal__topbar .rbac-modal__title-wrap h3{
  color:#fff;
}
.cust-modal__topbar .rbac-modal__x{
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.16);
  color:#fff;
}
.cust-modal__topbar .rbac-modal__x:hover{
  background:rgba(255,255,255,.28);
}

.rbac-modal__body{
  padding:20px 22px 24px;
  box-sizing:border-box;
}

.rbac-modal__body label{
  display:block;
  margin-bottom:18px;
}

.rbac-modal__body label > span{
  display:block;
  margin-bottom:8px;
  font-weight:600;
  color:#334155;
}

.rbac-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

/* =========================
   Customers
========================= */
.cust-page{ padding:20px; }
.cust-card{
  background:#fff;
  border:1px solid #e7ecf3;
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}
.cust-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.cust-head h2{ margin:0 0 4px; }
.cust-tools,
.cust-search-wrap{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.cust-search-wrap{
  flex-wrap:nowrap;
}
.cust-search-wrap .input{
  /* .rbac-page .input forces width:100%, which -- inside this flex row --
     makes the input claim the entire line and pushes the Tìm kiếm/Xóa
     buttons onto a second line. Give it a flexible-but-bounded width
     instead so all three stay on one row. */
  width:auto;
  flex:1 1 320px;
  min-width:220px;
}
.cust-search-wrap .btn{
  /* Without this, the buttons' default flex-shrink:1 lets them get
     squeezed narrower than their own label text once the input above
     grows, wrapping "Tìm kiếm" onto two lines. */
  flex:0 0 auto;
  white-space:nowrap;
}
.cust-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.cust-toolbar-left{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.cust-branch-filter{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  flex:0 0 auto;
}
.cust-branch-pill{
  font-size:13px;
  color:#475467;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:999px;
  padding:8px 12px;
}
.cust-table-wrap{ overflow:auto; }
.cust-row{ cursor:pointer; }
.cust-row:hover{ background:#f8fafc; }
.cust-orders-body{ padding:18px; overflow:auto; flex:1 1 auto; min-height:0; }
.cust-name-main{ font-weight:700; color:#0f172a; }
.cust-name-sub{ font-size:12px; color:#64748b; margin-top:2px; }

.cust-modal{
  width:min(1180px, calc(100vw - 32px)) !important;
  max-height:calc(100vh - 32px);
  margin:16px auto !important;
  display:flex;
  flex-direction:column;
}
.cust-orders-modal{
  width:90vw !important;
  max-width:none !important;
  height:90vh;
  max-height:90vh;
  margin:5vh auto !important;
  display:flex;
  flex-direction:column;
}
.cust-orders-footer{
  flex:0 0 auto;
  padding:14px 18px;
  border-top:1px solid #e7edf5;
  background:#fff;
}
/* Match the invoice-detail modal's teal header so the two popups feel like
   one connected flow (clicking an order inside this popup opens that
   modal directly). Scoped to .cust-orders-modal only -- .rbac-modal__topbar
   is shared with Suppliers/Users/the Customer-edit modal, which should
   keep their own light header. */
.cust-orders-modal .rbac-modal__topbar{
  background:linear-gradient(135deg,#0f766e,#14b8a6);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.cust-orders-modal .rbac-modal__title-wrap h3{
  color:#fff;
}
.cust-orders-modal .rbac-modal__x{
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.16);
  color:#fff;
}
.cust-orders-modal .rbac-modal__x:hover{
  background:rgba(255,255,255,.26);
}
.cust-modal__body{
  padding:16px 22px 18px;
  overflow:auto;
  flex:1 1 auto;
  min-height:0;
}
.cust-modal__footer{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  padding:14px 22px 18px;
  border-top:1px solid #e7edf5;
  background:#fff;
  position:sticky;
  bottom:0;
}
.cust-advanced-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px dashed #dbe5f0;
  border-radius:14px;
  background:#f8fbff;
  padding:12px 14px;
  margin-bottom:16px;
}
.cust-checkline{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:#334155;
}
.cust-checkline input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:#2563eb;
}
.cust-checkline--boxed{
  min-height:48px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:10px 12px;
}
.cust-section{
  border:1px solid #e6edf5;
  border-radius:16px;
  padding:16px;
  margin-bottom:16px;
  background:#fff;
}
.cust-section__title{
  font-size:15px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:12px;
}
.cust-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px 18px;
}
.cust-form-grid--basic{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.cust-form-grid--single{ grid-template-columns:1fr; }
.cust-form-grid label,
.cust-address-card label{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cust-form-grid label > span,
.cust-field-label{
  font-size:13px;
  font-weight:700;
  color:#475467;
}
.cust-span-2{ grid-column:1 / -1; }
.cust-check-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.cust-check-pill{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #dbe5f0;
  border-radius:999px;
  padding:8px 12px;
  background:#fff;
  font-size:13px;
  font-weight:600;
  color:#334155;
}
.cust-check-pill input[type="checkbox"]{
  width:15px;
  height:15px;
  accent-color:#2563eb;
}
.cust-address-layout{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}
.cust-address-card{
  border:1px solid #e7edf5;
  border-radius:14px;
  padding:14px;
  background:#fbfdff;
}
.cust-address-card__title{
  font-weight:800;
  color:#0f172a;
  margin-bottom:12px;
}





/* Customer Action button uses system teal action colour */
.cust-action-btn{
  background:linear-gradient(135deg,#14b8a6,#10b3a3) !important;
  border:1px solid #12a89a !important;
  color:#fff !important;
  border-radius:12px !important;
  font-weight:900 !important;
  min-width:104px;
  justify-content:center;
  box-shadow:0 8px 18px rgba(20,184,166,.22) !important;
}
.cust-action-btn:hover{
  background:linear-gradient(135deg,#12c7b5,#0fa99b) !important;
  border-color:#0fa99b !important;
  color:#fff !important;
  transform:translateY(-1px);
}
.cust-action-btn:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(20,184,166,.18) !important;
}

/* Customer table pagination */
.cust-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 4px 0;
  flex-wrap:wrap;
}
.cust-pagination__left,
.cust-pagination__right,
.cust-per-page{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.cust-per-page{
  color:#334155;
  font-size:13px;
  font-weight:700;
}
.cust-per-page select{
  width:88px;
  min-height:38px;
  padding:8px 32px 8px 12px;
  border-radius:12px;
}
.cust-page-summary{
  color:#64748b;
  font-size:13px;
  font-weight:600;
}
.cust-page-number{
  color:#334155;
  font-weight:800;
  font-size:14px;
  white-space:nowrap;
}
.cust-page-btn{
  min-width:82px;
  justify-content:center;
  border-radius:12px;
  font-weight:800;
}
.cust-page-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
}

@media (max-width: 1080px){
  .cust-form-grid--basic{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 820px){
  .cust-page{ padding:14px; }
  .cust-head,
  .cust-toolbar,
  .cust-advanced-toggle{ flex-direction:column; align-items:stretch; }
  .cust-search-wrap{ flex-wrap:wrap; }
  .cust-search-wrap .input{ width:100%; flex:1 1 100%; }
  .cust-form-grid,
  .cust-form-grid--basic,
  .cust-address-layout{ grid-template-columns:1fr; }
  .cust-span-2{ grid-column:auto; }
  .cust-modal{ width:min(100vw - 12px, 1180px) !important; max-height:calc(100vh - 12px); margin:6px auto !important; }
  .cust-modal__body{ padding:14px; }
  .cust-modal__footer{ padding:12px 14px 14px; }
  .cust-pagination{ align-items:stretch; }
  .cust-pagination__left,
  .cust-pagination__right,
  .cust-per-page{ width:100%; justify-content:flex-start; }
  .cust-pagination__right{ justify-content:space-between; }
}



.dup-phone-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 99999;
}

.dup-phone-box{
  width: min(440px, calc(100vw - 32px));
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  animation: dupPhonePop .18s ease-out;
}

.dup-phone-head{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid #eef2f7;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.dup-phone-icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff4e5;
  color: #d97706;
  font-size: 20px;
  flex: 0 0 42px;
}

.dup-phone-title{
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: #111827;
}

.dup-phone-body{
  padding: 18px 22px 22px;
}

.dup-phone-text{
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
  margin: 0;
}

.dup-phone-note{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
}

.dup-phone-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.dup-phone-actions button{
  appearance: none;
  border: none;
  outline: none;
  min-width: 108px;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
}

.dup-phone-actions .btn-cancel{
  background: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
}

.dup-phone-actions .btn-cancel:hover{
  background: #f9fafb;
  border-color: #9ca3af;
}

.dup-phone-actions .btn-view{
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.dup-phone-actions .btn-view:hover{
  background: #1d4ed8;
  transform: translateY(-1px);
}

.dup-phone-actions .btn-cancel:active,
.dup-phone-actions .btn-view:active{
  transform: translateY(0);
}

@keyframes dupPhonePop{
  from{
    opacity: 0;
    transform: translateY(10px) scale(.98);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== POS FULL VIEWPORT OVERLAY SIDEBAR ===== */
body.pos-mode #view-app{
  position:relative;
}

body.pos-mode #view-app .app{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  overflow:hidden;
  background:#07101d;
}

body.pos-mode #view-app .topbar{
  display:none !important;
}

body.pos-mode #view-app .content{
  height:100vh;
  padding:0;
  overflow:hidden;
  background:#07101d;
}

body.pos-mode #view-app .content > *{
  height:100%;
}

body.pos-mode #view-app .sidebar{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:var(--sb-expanded);
  transform:translateX(calc(-100% - 8px));
  transition:transform .18s ease, box-shadow .18s ease;
  z-index:4100;
  overflow-y:auto;
  box-shadow:none;
}

body.pos-mode #view-app .sidebar .brand-lines,
body.pos-mode #view-app .sidebar .txt,
body.pos-mode #view-app .sidebar .chev{
  opacity:1 !important;
  pointer-events:auto !important;
}

body.pos-mode #view-app.pos-sidebar-visible .sidebar{
  transform:translateX(0);
  box-shadow:0 24px 60px rgba(0,0,0,.42);
}

body.pos-mode #view-app .sidebar__footer{
  margin-top:auto;
}

#view-app .pos-sidebar-edge{
  display:none;
}

body.pos-mode #view-app .pos-sidebar-edge{
  display:block;
  position:fixed;
  left:0;
  top:0;
  width:3px;
  height:100vh;
  z-index:4050;
  background:transparent;
}

#view-app .pos-sidebar-backdrop{
  display:none;
}

body.pos-mode #view-app.pos-sidebar-pinned .pos-sidebar-backdrop{
  display:block;
  position:fixed;
  inset:0;
  z-index:4080;
  background:rgba(3,10,20,.22);
}

.ths-pos-embed-wrap{
  position:relative;
  width:100%;
  height:100%;
  background:#07101d;
}

.ths-pos-embed-frame{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#07101d;
}





/* =========================================================
   REPORT PAGE
   ========================================================= */
.report-page{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.report-card{
  padding:22px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}

/* filter toolbar — hugs its own content (fit-content) instead of stretching
   the border across the whole card, so it reads as a real control toolbar
   and not a full-width panel with empty space after "More". From/To/Apply
   only render (and take up space) when the user picks Custom from the More
   menu; max-width:100% keeps it from ever overflowing a narrow viewport. */
.report-filters--compact{
  width:fit-content;
  max-width:100%;
  padding:10px 16px;
  min-height:56px;
  border:1px solid #e5e7eb;
  border-radius:6px;
  background:#fafbfc;
}

.report-filters__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
}

.report-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

/* Branch stays a single horizontal row: label immediately left of the
   dropdown, both on the same line as the period buttons where space allows. */
.report-field--branch{
  flex:0 0 auto;
  flex-direction:row;
  align-items:center;
  gap:8px;
  min-width:0;
}

.report-field span{
  font-size:12px;
  font-weight:800;
  color:#64748b;
  white-space:nowrap;
}

.report-field .input,
.report-field .input--select{
  width:100%;
  max-width:100%;
  min-width:0;
  background:#fff;
  border:1px solid #d7dfeb;
  border-radius:12px;
  min-height:40px;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  font-size:14px;
}

.report-field--branch .input--select{
  width:250px;
  max-width:260px;
  flex:0 1 260px;
}

/* Mobile browsers (iOS Safari especially) draw their own rounded box/shadow
   around <input type="date">, which then renders on top of our custom
   border/radius above — the visual result is a doubled, oversized-looking
   border that "bleeds" past the card edge. Stripping the native chrome
   leaves only our own border, so it matches every other field. */
.report-field input[type="date"]{
  -webkit-appearance:none;
  appearance:none;
}

/* period buttons: Today / Yesterday / This Week / More */
.report-periods{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.report-period-btn,
#rpt-more-btn{
  height:38px;
  padding:0 14px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  line-height:1;
  white-space:nowrap;
}

.report-period-btn.is-active{
  background:#0d6efd;
  border-color:#0d6efd;
  color:#fff;
}

.report-more{
  position:relative;
}

.report-more__menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:20;
  min-width:180px;
  padding:6px;
  background:#fff;
  border:1px solid #e5e9f2;
  border-radius:12px;
  box-shadow:0 14px 34px rgba(15,23,42,.14);
}

.report-more__item{
  display:block;
  width:100%;
  text-align:left;
  padding:9px 12px;
  border:0;
  background:transparent;
  border-radius:8px;
  font-weight:700;
  font-size:13px;
  color:#0f172a;
  cursor:pointer;
}

.report-more__item:hover{
  background:#f1f5f9;
}

.report-more__item.is-active{
  background:#eaf2ff;
  color:#0d6efd;
}

/* custom range row: hidden entirely unless the Custom period is selected */
.report-custom-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:12px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed #dbe4f0;
}

.report-custom-row .report-field{
  flex:0 1 180px;
  min-width:160px;
}

#rpt-apply{
  height:40px;
  padding:0 18px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  white-space:nowrap;
}

@media (max-width: 900px){
  /* Below this width the fit-content toolbar no longer has room to hug its
     content on one line, so let it take the full row width and allow the
     branch/period groups to stack instead of overflowing. */
  .report-filters--compact{
    width:100%;
  }

  .report-filters__row{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .report-periods{
    justify-content:flex-start;
  }
}

@media (max-width: 640px){
  .report-field--branch .input--select{
    width:100%;
    max-width:none;
    flex:1 1 auto;
  }

  .report-periods{
    width:100%;
  }

  .report-period-btn,
  #rpt-more-btn{
    flex:1 1 auto;
  }

  .report-more{
    flex:1 1 auto;
  }

  #rpt-more-btn{
    width:100%;
  }

  .report-more__menu{
    left:0;
    right:0;
  }

  .report-custom-row{
    flex-direction:column;
    align-items:stretch;
  }

  .report-custom-row .report-field{
    flex:1 1 auto;
    max-width:none;
  }

  #rpt-apply{
    width:100%;
  }
}






/* kpi zone */
.report-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
  margin-bottom:20px;
}

.report-kpi{
  position:relative;
  border:1px solid #e7edf5;
  background:#fff;
  border-radius:18px;
  padding:18px 18px 16px;
  min-height:116px;
  box-shadow:0 4px 16px rgba(15,23,42,.04);
}

.report-kpi::before{
  content:"";
  position:absolute;
  left:18px;
  top:14px;
  width:36px;
  height:4px;
  border-radius:999px;
  background:#2563eb;
  opacity:.18;
}

.report-kpi__label{
  font-size:12px;
  font-weight:900;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.report-kpi__value{
  margin-top:14px;
  font-size:26px;
  line-height:1.1;
  font-weight:900;
  color:#0f172a;
}

.report-kpi__hint{
  margin-top:8px;
  font-size:13px;
  color:#667085;
}





/* ===============================
   EMPTY / LOADING
================================ */

.report-loading,
.report-empty,
.report-orders-loading,
.report-orders-empty,
.report-orders-error,
.report-empty-row{
  padding:22px;
  color:#475569;
  border:1px dashed #d9e2ef;
  border-radius:16px;
  background:#fff;
}

/* Only the two top-level states rendered straight into #rpt-summary (loading
   / no data at all) need to clear the filter toolbar above them; the nested
   .report-orders-* / .report-empty-row variants already sit inside a table
   row and must not gain the same top gap. */
.report-loading,
.report-empty{
  margin-top:18px;
}


/* ===============================
   TABLE WRAP
================================ */

.report-table-wrap{
  border:1px solid #e5e9f2;
  border-radius:18px;
  overflow:auto;
  background:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.035);
}


/* ===============================
   MAIN REPORT TABLE
================================ */

.report-table{
  width:100%;
  min-width:1960px;
  table-layout:fixed;
  border-collapse:collapse;
}

.report-table th,
.report-table td{
  box-sizing:border-box;
  vertical-align:middle;
}

.report-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:#f8fafc;
  color:#344054;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:14px 12px;
  border-bottom:1px solid #e7edf5;
  white-space:nowrap;
}

.report-table tbody td{
  padding:18px 12px;
  border-top:1px solid #eef2f7;
  font-size:14px;
  color:#111827;
  white-space:nowrap;
}


/* ===============================
   ROW HOVER
================================ */
.report-table tbody tr:hover td{
  background:transparent;
}

.report-branch-row{
  cursor:pointer;
  transition:background-color .18s ease, box-shadow .18s ease;
}

/* đổi màu khi rê chuột vào row store */
.report-branch-row:hover td{
  background:#dbeafe !important;
}

.report-branch-row.is-open td{
  background:#eef4ff;
}

.report-branch-row.is-open:hover td{
  background:#dbeafe;
}

/* focus fix */
.report-branch-row:focus,
.report-branch-row:active{
  outline:none;
}

.report-branch-row:focus td{
  box-shadow:none;
}

/* tránh button làm nổi border */
.report-branch-row td:last-child .btn{
  position:relative;
  z-index:2;
}


/* ===============================
   COLUMN ALIGNMENT
================================ */

.report-table th:first-child,
.report-table td:first-child{
  text-align:left;
}

.report-table th:last-child,
.report-table td:last-child{
  text-align:left;
}

.report-table .col-num{
  text-align:right;
}


/* ===============================
   COLUMN WIDTHS
================================ */

.report-table th:nth-child(1),
.report-table td:nth-child(1){ width:180px; }

.report-table th:nth-child(2),
.report-table td:nth-child(2){ width:90px; }

.report-table th:nth-child(3),
.report-table td:nth-child(3){ width:110px; }

.report-table th:nth-child(4),
.report-table td:nth-child(4){ width:90px; }

.report-table th:nth-child(5),
.report-table td:nth-child(5){ width:100px; }

.report-table th:nth-child(6),
.report-table td:nth-child(6){ width:130px; }

.report-table th:nth-child(7),
.report-table td:nth-child(7){ width:130px; }

.report-table th:nth-child(8),
.report-table td:nth-child(8){ width:110px; }

.report-table th:nth-child(9),
.report-table td:nth-child(9){ width:110px; }


/* ===============================
   BRANCH INFO
================================ */

.report-branch-name{
  font-weight:900;
  font-size:16px;
  color:#0f172a;
  line-height:1.2;
}

.report-branch-code{
  font-size:12px;
  color:#64748b;
  margin-top:6px;
}


/* ===============================
   ORDER DETAIL ROW
================================ */

.report-orders-row td{
  background:#f8fbff;
  padding:0 !important;
  border-top:1px solid #e5edf7;
}

.report-orders-wrap{
  padding:14px;
}


/* ===============================
   ORDER TABLE
================================ */

.report-orders-table{
  width:100%;
  min-width:1280px;
  background:#fff;
  border-collapse:separate;
  border-spacing:0;
}

.report-orders-table thead th{
  background:#f1f5fb;
  color:#334155;
  font-weight:700;
  border-bottom:1px solid #dbe3ef;
}

/* Clear vertical separators between columns so adjacent cells (e.g. Outstanding
   and Completed) never look visually merged, especially on narrower screens. */
.report-orders-table th,
.report-orders-table td{
  border-right:1px solid #eef2f7;
}

.report-orders-table th:last-child,
.report-orders-table td:last-child{
  border-right:none;
}

/* Highlight orders whose sale/payment/credit/outstanding don't add up for the
   selected period — this is what rolls up into the branch row's Balance Check. */
.report-orders-table td.is-balance-off{
  color:#b91c1c;
  font-weight:800;
}

/* Outstanding / Balance Check columns: these sit right next to a left-aligned
   date/text column (Completed) and were reading as visually merged with it
   (e.g. "$0.00" running into "03 July, 03:30 pm"). Center the value inside a
   wide cell so there's always clear empty space on both sides, independent of
   any border. Applies to both the branch summary table and the per-order
   drilldown table. */
.report-table td.col-outstanding,
.report-table th.col-outstanding,
.report-table td.col-balance,
.report-table th.col-balance,
.report-orders-table td.col-outstanding,
.report-orders-table th.col-outstanding,
.report-orders-table td.col-balance,
.report-orders-table th.col-balance{
  text-align:center !important;
  min-width:130px;
  padding-left:24px;
  padding-right:24px;
}

.report-orders-table td.col-completed,
.report-orders-table th.col-completed{
  padding-left:48px !important;
  min-width:190px;
}


/* highlight header when open */

.report-branch-row.is-open + .report-orders-row thead th{
  background:#e8f0ff;
  color:#1e293b;
  border-bottom:1px solid #cbd7f3;
}

.report-branch-row.is-open + .report-orders-row thead th:first-child{
  border-left:4px solid #2563eb;
}


/* ===============================
   BADGES
================================ */

.report-badge{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  text-transform:capitalize;
  background:#e2e8f0;
  color:#0f172a;
}


/* ===============================
   MOBILE / TABLET: Report tables as stacked cards
   The branch-summary table and the per-order drilldown both have 15-16
   columns, which only ever worked as a horizontally-scrolling table. Below
   1024px (covers phones and most tablets) each row becomes a self-contained
   card, and each cell's value gets a visible label in front of it (from the
   data-label attribute set in reports.js) instead of relying on a column
   header far above it.
================================ */
@media (max-width:1024px){

  .report-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .report-table-wrap,
  .report-orders-wrap{
    overflow:visible;
    border:none;
    box-shadow:none;
    background:transparent;
  }

  .report-table,
  .report-orders-table{
    min-width:0;
    width:100%;
    table-layout:auto;
    border-collapse:separate;
    border-spacing:0 12px;
  }

  .report-table thead,
  .report-orders-table thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }

  .report-table tbody tr.report-branch-row,
  .report-orders-table tbody tr{
    display:block;
    background:#fff;
    border:1px solid #e6ebf2;
    border-radius:16px;
    box-shadow:0 4px 14px rgba(15,23,42,.045);
    margin-bottom:12px;
    overflow:hidden;
  }

  .report-table tbody tr.report-orders-row{
    display:block;
    background:transparent;
    box-shadow:none;
  }

  .report-table td,
  .report-orders-table td{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:14px;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    text-align:right;
    white-space:normal;
    word-break:break-word;
    padding:10px 16px !important;
    border:none;
    border-bottom:1px solid #f1f4f9;
    background-image:none !important;
  }

  .report-table td:last-child,
  .report-orders-table td:last-child{
    border-bottom:none;
  }

  .report-table td::before,
  .report-orders-table td::before{
    content:attr(data-label);
    flex:0 0 auto;
    text-align:left;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#8a96a8;
  }

  /* Card "title" cells: branch name and order id sit on their own, no label,
     styled like a card header instead of a label/value row. */
  .report-table td.col-branch,
  .report-orders-table td.col-order-id{
    display:block;
    text-align:left;
    background:#f8fafc;
    padding:12px 16px !important;
    border-bottom:1px solid #eef2f7;
    font-weight:900;
  }

  .report-table td.col-branch::before,
  .report-orders-table td.col-order-id::before{
    content:none;
  }

  .report-orders-table td.col-order-id{
    font-size:15px;
    color:#0f172a;
  }

  /* Outstanding / Balance no longer need the extra desktop spacing hacks —
     the card layout already gives every value its own full-width row. */
  .report-table td.col-outstanding,
  .report-table th.col-outstanding,
  .report-table td.col-balance,
  .report-table th.col-balance,
  .report-orders-table td.col-outstanding,
  .report-orders-table th.col-outstanding,
  .report-orders-table td.col-balance,
  .report-orders-table th.col-balance,
  .report-orders-table td.col-completed,
  .report-orders-table th.col-completed{
    min-width:0;
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .report-table td.col-action{
    display:block;
    text-align:stretch;
    padding:12px 16px !important;
  }

  .report-table td.col-action .btn{
    width:100%;
  }

  /* The expanded "View Orders" panel spans the full card width, not a
     label/value row. */
  .report-table td.report-orders-cell{
    display:block !important;
    padding:0 !important;
  }

  .report-table td.report-orders-cell::before{
    content:none;
  }

  .report-orders-wrap{
    margin-top:8px;
  }
}

@media (max-width:480px){
  .report-kpis{
    grid-template-columns:1fr;
  }
}

/* edit mode */

/* Only lock fields inside POS ticket view when not in edit mode */
.ticket-shell:not(.ticket-edit-mode) input,
.ticket-shell:not(.ticket-edit-mode) select,
.ticket-shell:not(.ticket-edit-mode) textarea{
  pointer-events:none;
}

.ticket-shell.ticket-edit-mode input,
.ticket-shell.ticket-edit-mode select,
.ticket-shell.ticket-edit-mode textarea{
  pointer-events:auto;
  background:#fff;
}
/* ===== Printing Phase 1 ===== */
.thg-printing-v1{ display:grid; gap:16px; }
/* Printing sub-tab bar (Templates/Messages/Barcode/Profiles/Rules): a
   compact, tinted "segmented control" instead of full-width pill buttons
   with big gaps -- so it reads as a second-level nav that belongs to the
   Printing tab above it, not another row of top-level tabs (see chat
   "các nút chuyển tab con -- phải gần nhau, bớt bo tròn, thấy rõ là con
   của tab Printing"). inline-flex keeps the box only as wide as its
   buttons, further setting it apart from the full-width main tab row. */
.thg-printing-nav{
  display:inline-flex;
  gap:0;
  flex-wrap:wrap;
  /* Sits at the very top of the now-attached .thg-printing-v1 panel (see
     that rule's border-top) -- the bottom rule + margin below separates
     the sub-tab row from the sub-tab's own content underneath, inside
     the SAME bordered panel. */
  margin-bottom:16px;
}
/* Buttons sit flush against each other (no gap) and each carries its own
   thin border, with adjacent borders overlapping (-1px margin) into one
   shared line -- a classic joined "segmented control" so it visually
   reads as one strip of switches for the sub-tabs below, not separate
   floating buttons (see chat "nút subtab phải có border, sát nhau không
   khoảng cách"). Only the two outer corners are rounded; the active
   button is raised with z-index so its border isn't overdrawn by its
   neighbours' overlapping edges. */
.thg-printing-nav .thg-btn{
  border-radius:0;
  padding:7px 14px;
  font-size:13px;
  border:1px solid #bcd2f7;
  margin-left:-1px;
  position:relative;
}
.thg-printing-nav .thg-btn:first-child{ margin-left:0; border-top-left-radius:8px; border-bottom-left-radius:8px; }
.thg-printing-nav .thg-btn:last-child{ border-top-right-radius:8px; border-bottom-right-radius:8px; }
.thg-printing-nav .thg-btn.thg-btn--ghost{
  background:#f5f9ff;
  color:#1d4ed8;
}
.thg-printing-nav .thg-btn.thg-btn--ghost:hover{
  background:#e3edff;
}
.thg-printing-nav .thg-btn.is-active{ background:#0d6efd; color:#fff; border-color:#0d6efd; z-index:1; }
.thg-print-title{ font-size:18px; font-weight:900; margin-bottom:6px; }
.thg-print-group{ display:grid; gap:10px; }
.thg-print-group__title{ font-size:13px; font-weight:900; text-transform:uppercase; color:#334155; }
.thg-print-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.thg-print-card{ border:1px solid rgba(13,110,253,.14); border-radius:14px; padding:14px; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.04); display:grid; gap:12px; }
.thg-print-card.is-active{ border-color:rgba(13,110,253,.5); box-shadow:0 10px 24px rgba(13,110,253,.10); }
.thg-print-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.thg-print-card__title{ font-weight:900; font-size:15px; }
.thg-print-card__meta{ font-size:12px; color:#64748b; margin-top:4px; }
.thg-print-pill{ display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.10); font-size:12px; font-weight:800; white-space:nowrap; }
.thg-print-pill.is-active{ color:#166534; background:#ecfdf5; border-color:#bbf7d0; }
.thg-print-card__actions{ display:flex; gap:8px; flex-wrap:wrap; }
.thg-btn--danger{ border-color:#fecaca !important; color:#b91c1c !important; }
.thg-print-list{ border:1px solid rgba(13,110,253,.12); background:#f8fbff; border-radius:14px; padding:16px; }
.thg-print-message-actions{ display:flex; justify-content:flex-end; margin-top:12px; }
.thg-builder-shell{ border:1px solid rgba(13,110,253,.18); border-radius:16px; background:#fff; overflow:hidden; }
.thg-builder-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:#eff6ff; border-bottom:1px solid rgba(13,110,253,.15); }
.thg-builder-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.thg-builder-topmeta{ padding:14px 16px 0; display:grid; gap:12px; }
.thg-builder-body{ display:grid; grid-template-columns:260px 1fr; gap:0; min-height:480px; }
.thg-builder-library{ border-right:1px solid rgba(0,0,0,.08); background:#fbfdff; padding:14px; display:grid; align-content:start; gap:12px; }
.thg-builder-side-title{ font-size:13px; font-weight:900; text-transform:uppercase; color:#334155; }
.thg-builder-lib-list{ display:grid; gap:8px; }
.thg-builder-lib-msg{ display:grid; gap:10px; }
.thg-builder-msg-item{ border:1px solid rgba(0,0,0,.08); border-radius:10px; padding:10px; background:#fff; font-size:12px; color:#475569; }
.thg-builder-canvas{ padding:16px; display:grid; gap:16px; background:#f8fafc; }
.thg-builder-section{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:14px; display:grid; gap:12px; }
.thg-builder-section__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.thg-builder-section__tools{ display:flex; gap:8px; }
.thg-builder-cols{ display:flex; gap:12px; align-items:stretch; }
.thg-builder-col{ min-width:0; display:grid; gap:10px; border:1px dashed rgba(13,110,253,.22); border-radius:12px; padding:10px; background:#fcfdff; }
.thg-builder-col__head{ font-size:12px; font-weight:800; color:#475569; }
.thg-builder-blocks{ display:grid; gap:10px; }
.thg-builder-block{ border:1px solid rgba(0,0,0,.08); border-radius:10px; padding:10px; display:grid; gap:8px; background:#fff; }
.thg-builder-block__meta{ font-size:11px; font-weight:900; text-transform:uppercase; color:#0f172a; opacity:.68; }
.thg-print-empty{ padding:16px; color:#64748b; }
@media (max-width: 900px){ .thg-builder-body{ grid-template-columns:1fr; } .thg-builder-library{ border-right:none; border-bottom:1px solid rgba(0,0,0,.08); } .thg-builder-cols{ flex-direction:column; } }


/* ===== Printing font hard-fix =====
   The settings UI shell (.thg-printing-v1 / .thg-builder-shell) matches the
   rest of the app's font stack. The on-screen print preview
   (.thg-print-preview-wrap / .thg-print-preview-sheet) now uses the SAME
   unified system-font stack — plain Arial renders Vietnamese diacritics
   poorly on some platforms (falls back to a generic sans substitute), so
   this is no longer hard-locked to Arial. The physical print output is
   unaffected: each print window (openTemplatePrintWindow,
   openDirectDocumentPrintWindow, etc. in general-printing.js) writes its
   own self-contained HTML with its own inline Arial font-family for print
   fidelity, entirely independent of this stylesheet. */
.thg-printing-v1,
.thg-printing-v1 *,
.thg-builder-shell,
.thg-builder-shell *,
.thg-print-preview-wrap,
.thg-print-preview-wrap *,
.thg-print-preview-sheet,
.thg-print-preview-sheet * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
.thg-print-preview__barcode-wrap{ display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; }
.thg-print-preview__barcode{ display:block; width:100%; height:46px; }
.thg-print-preview__barcode text,
.thg-print-preview__barcode-text{ font-family: Arial, Helvetica, sans-serif !important; }
.thg-print-preview__barcode-text{ font-size:11px; line-height:1; letter-spacing:.4px; text-align:center; }

/* =========================
   Printing Templates - Split Preview Layout
   ========================= */
.thg-form.thg-printing-v1{
  max-width:none;
  width:100%;
  /* Attach the whole Printing panel (sub-tab row + content) directly to
     the bottom edge of the active "Printing" main tab -- no gap, and a
     top border in the SAME blue as the active tab's fill -- so it reads
     as one connected unit instead of a second floating row (see chat
     "2 hàng tab và subtab phải cạnh nhau, có border rõ ràng là con của
     Printing"). -20px cancels .thg-tabs' 14px bottom margin plus
     .thg-body's 6px padding-top. Scoped to .thg-printing-v1 only, so
     Company/Regional/etc. keep their normal spacing. */
  margin-top:-20px;
  border:1px solid var(--ths-ui-border,#dbe3ef);
  border-top:3px solid #0d6efd;
  border-radius:0 0 12px 12px;
  background:#fff;
  padding:16px;
}

.thg-printing-split{
  display:grid;
  grid-template-columns:minmax(0,.5fr) minmax(360px,1.5fr);
  gap:18px;
  align-items:start;
}

.thg-printing-split__left,
.thg-printing-split__right{
  min-width:0;
}

.thg-printing-split__left.thg-print-list{
  border:1px solid rgba(13,110,253,.12);
  background:#f8fbff;
  border-radius:14px;
  padding:16px;
}

.thg-printing-split__left .thg-print-intro{
  margin-bottom:14px;
}

.thg-printing-split__left .thg-print-grid{
  grid-template-columns:1fr;
}

.thg-printing-split__right.thg-builder-preview{
  position:sticky;
  top:16px;
  border:1px solid rgba(13,110,253,.12);
  background:#f8fbff;
  border-radius:14px;
  overflow:hidden;
}

.thg-printing-split__right .thg-builder-head{
  padding:16px 18px;
  background:#eef4ff;
  border-bottom:1px solid rgba(13,110,253,.12);
}

.thg-print-preview-panel-meta{
  padding:16px 18px 0;
}

.thg-printing-split__right .thg-print-empty{
  padding:24px 18px;
  color:#64748b;
}

.thg-printing-split__right .thg-print-preview-wrap{
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.thg-printing-split__right .thg-print-preview-sheet{
  background:#fff;
  border:1px solid #dbe4f0;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  padding:14px;
  max-width:100%;
  overflow:hidden;
}

.thg-printing-split__right .thg-product-label-fixed{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.thg-printing-split__right .thg-print-preview-meta{
  width:100%;
  text-align:center;
  font-size:12px;
  color:#64748b;
  line-height:1.45;
}

.thg-printing-split__right .thg-print-preview-meta.is-below{
  margin-top:2px;
  padding-top:10px;
  border-top:1px dashed #dbe4f0;
}

.thg-print-card.is-selected{
  border-color:#0d6efd;
  background:linear-gradient(180deg,#f9fbff 0%,#eef5ff 100%);
  box-shadow:0 10px 24px rgba(13,110,253,.10);
}

.thg-print-card.is-selected .thg-print-card__title{
  color:#0d3ea6;
}

@media (max-width: 1180px){
  .thg-printing-split{
    grid-template-columns:1fr;
  }

  .thg-printing-split__right.thg-builder-preview{
    position:relative;
    top:0;
  }
}


/* ===== Printing preview: Invoice A4 ===== */
.thg-print-preview-wrap--invoice-a4{ align-items:center; }
.thg-invoice-a4{
  box-sizing:border-box;
  background:#fff;
  color:#111;
  border:1px solid #cfd7e6;
  border-radius:0;
  padding:28px 30px 24px;
  box-shadow:0 8px 24px rgba(17,24,39,.08);
  display:flex;
  flex-direction:column;
  gap:12px;
  font-family:Arial,"Helvetica Neue",Helvetica,"Segoe UI",sans-serif;
}
.thg-invoice-a4__header{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:18px;
  align-items:start;
}
.thg-invoice-a4__header-left,
.thg-invoice-a4__header-right{
  min-width:0;
  font-size:13px;
  line-height:1.42;
}
.thg-invoice-a4__header-right{
  text-align:right;
  border:0;
  padding:0;
  background:transparent;
}
.thg-invoice-a4__logo-wrap{
  width:140px;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:10px;
  overflow:hidden;
}
.thg-invoice-a4__logo-img{
  display:block;
  max-width:140px;
  max-height:70px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.thg-invoice-a4__logo-ph{
  width:84px;
  height:42px;
  border:1px dashed #9aa4b2;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  margin-bottom:10px;
}
.thg-invoice-a4__company-name{
  font-size:22px;
  line-height:1.05;
  font-weight:800;
  margin-bottom:8px;
}
.thg-invoice-a4__title{
  font-size:34px;
  line-height:1;
  font-weight:900;
  letter-spacing:.4px;
  margin-bottom:14px;
}
.thg-invoice-a4__invoice-meta + .thg-invoice-a4__invoice-meta{ margin-top:7px; }
.thg-invoice-a4__info-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.thg-invoice-a4__box{
  border:1px solid #cfd7e6;
  padding:12px 12px 10px;
  font-size:13px;
  line-height:1.5;
}
.thg-invoice-a4__box-title,
.thg-invoice-a4__section-title{
  font-size:13px;
  font-weight:800;
  margin-bottom:8px;
}
.thg-invoice-a4__table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.thg-invoice-a4__table th,
.thg-invoice-a4__table td{
  border:1px solid #cfd7e6;
  padding:8px 9px;
  vertical-align:top;
}
.thg-invoice-a4__table th{ background:#f8fafc; font-weight:800; text-align:left; }
.thg-invoice-a4__table th:nth-child(n+2),
.thg-invoice-a4__table td.num{ text-align:right; }
.thg-invoice-a4__table tr.is-summary td:first-child,
.thg-invoice-a4__table tr.is-grand td:first-child{ text-align:right; font-weight:700; }
.thg-invoice-a4__table tr.is-grand td{
  font-weight:900;
  font-size:14px;
}
.thg-invoice-a4__note-wrap{ margin-top:2px; }
.thg-invoice-a4__note-text{
  font-size:13px;
  line-height:1.55;
  white-space:pre-wrap;
}
.thg-invoice-a4__payment{
  font-size:13px;
  line-height:1.55;
}
.thg-invoice-a4__footer-box{
  border:0;
  padding:0;
  font-size:13px;
  line-height:1.5;
}
@media (max-width: 900px){
  .thg-invoice-a4{ padding:22px 20px; }
  .thg-invoice-a4__header{ grid-template-columns:1fr; }
  .thg-invoice-a4__info-row{ grid-template-columns:1fr; }
}


/* ===== Printing preview: Thermal Invoice 80mm ===== */
.thg-print-preview-wrap--thermal-invoice{ align-items:center; }
.thg-thermal-invoice{
  box-sizing:border-box;
  background:#fff;
  color:#111;
  border:1px solid #d8dee8;
  border-radius:0;
  padding:16px 14px 18px;
  box-shadow:0 8px 24px rgba(17,24,39,.08);
  display:flex;
  flex-direction:column;
  gap:0;
  font-family:Arial,"Helvetica Neue",Helvetica,"Segoe UI",sans-serif;
}
.thg-thermal-invoice__header{ text-align:center; }
.thg-thermal-invoice__company{ font-size:28px; line-height:1.1; font-weight:900; letter-spacing:.2px; }
.thg-thermal-invoice__sub{ font-size:15px; line-height:1.35; margin-top:4px; }
.thg-thermal-invoice__rule{ border-top:1px dashed #111; margin:12px 0; }
.thg-thermal-invoice__section,
.thg-thermal-invoice__totals{ display:grid; gap:7px; font-size:15px; line-height:1.35; }
.thg-thermal-invoice__section-title{ font-size:15px; line-height:1.25; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.thg-thermal-invoice__row,
.thg-thermal-invoice__totals div,
.thg-thermal-invoice__item-line{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.thg-thermal-invoice__row span,
.thg-thermal-invoice__totals span{ flex:0 0 auto; padding-right:8px; }
.thg-thermal-invoice__row strong{ flex:1 1 auto; text-align:right; word-break:break-word; }
.thg-thermal-invoice__items{ display:grid; gap:12px; }
.thg-thermal-invoice__item-name{ font-size:16px; line-height:1.35; font-weight:700; }
.thg-thermal-invoice__item-line{ font-size:15px; line-height:1.35; margin-top:4px; }
.thg-thermal-invoice__totals .is-grand{ font-weight:900; font-size:17px; }
.thg-thermal-invoice__footer{ text-align:center; font-size:15px; line-height:1.45; padding-top:2px; }



.thg-print-rules__shell{ display:grid; grid-template-columns:220px 1fr; gap:16px; align-items:start; margin-top:14px; }
.thg-print-rules__groups{ display:grid; gap:10px; }
.thg-print-group-btn{ border:1px solid rgba(13,110,253,.14); background:#fff; border-radius:12px; padding:12px 14px; text-align:left; font-weight:800; cursor:pointer; }
.thg-print-group-btn.is-active{ background:#0d6efd; color:#fff; border-color:#0d6efd; }
.thg-print-group-btn span{ opacity:.8; font-weight:700; }
.thg-print-rules__listwrap{ border:1px solid rgba(13,110,253,.12); background:#fff; border-radius:14px; padding:16px; }
.thg-print-rules__toolbar{ display:flex; gap:12px; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.thg-print-group-title{ font-weight:900; font-size:18px; }
.thg-print-rule-tools{ display:flex; gap:8px; flex-wrap:wrap; }
.thg-print-rule-grid{ display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:10px; }
.thg-rule-item{ display:flex; align-items:center; gap:10px; border:1px solid rgba(13,110,253,.12); background:#f8fbff; border-radius:12px; padding:12px 14px; min-height:48px; }
.thg-rule-item input{ transform:scale(1.05); }
@media (max-width: 980px){ .thg-print-rules__shell{ grid-template-columns:1fr; } .thg-print-rule-grid{ grid-template-columns:repeat(2,minmax(180px,1fr)); } }
@media (max-width: 640px){ .thg-print-rule-grid{ grid-template-columns:1fr; } }


/* Inventory retail price incl/excl compound control */
.invp-price-inline{
  display:flex;
  align-items:stretch;
  gap:0;
  width:100%;
  border:1px solid #e5e9f2;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.invp-price-inline:focus-within{
  border-color:#0d6efd;
  box-shadow:0 0 0 3px rgba(13,110,253,.12);
}
.invp-price-inline #invp-retail{
  flex:1 1 auto;
  min-width:0;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent;
}
.invp-price-inline .invp-price-mode{
  width:84px;
  flex:0 0 84px;
  min-width:84px;
  text-align:center;
  padding-left:8px;
  padding-right:26px; /* chừa chỗ cho arrow */
}
.invp-price-inline .invp-price-mode:hover{
  background:#f1f5f9;
}
/* wrapper */
.invp-price-inline{
  display:flex;
  border:1px solid #d0d5dd;
  border-radius:10px;
  overflow:hidden; /* quan trọng để cắt bo góc bên trong */
  background:#fff;
}

/* input bên trái */
.invp-price-inline .input{
  flex:1;
  border:none;
  outline:none;
  border-radius:0; /* 👈 remove bo */
}

/* select bên phải */
.invp-price-inline .invp-price-mode{
  width:84px;
  flex:0 0 84px;
  border:none;
  outline:none;
  border-left:1px solid #e5e7eb;
  border-radius:0; /* 👈 QUAN TRỌNG: bỏ bo góc */
  padding-right:26px;
  background:#f9fafb;
}



/* =========================================================
   MANAGE INVOICES / TICKET / INVOICE
   SOFT LIGHT UI — white background, black/gray text,
   lower contrast, normal font weight
   ========================================================= */

.manage-invoices-page,
.orders-page,
.invoice-page{
  background:#f5f7fb !important;
  color:#1f2937 !important;
}

.manage-invoices-page .card,
.orders-page .card,
.invoice-page .card,
.manage-invoices-page .mi-shell,
.orders-page .mi-shell,
.invoice-page .mi-shell{
  background:#ffffff !important;
  color:#1f2937 !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 4px 14px rgba(15,23,42,.04) !important;
}

/* hero / page top */
.manage-invoices-page .mi-hero,
.orders-page .mi-hero,
.invoice-page .mi-hero{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 4px 14px rgba(15,23,42,.04) !important;
}

.manage-invoices-page .mi-hero h1,
.manage-invoices-page .mi-hero h2,
.manage-invoices-page .mi-hero .title,
.orders-page .mi-hero h1,
.orders-page .mi-hero h2,
.orders-page .mi-hero .title,
.invoice-page .mi-hero h1,
.invoice-page .mi-hero h2,
.invoice-page .mi-hero .title{
  color:#111827 !important;
  font-weight:700 !important;
}

.manage-invoices-page .mi-hero p,
.manage-invoices-page .mi-hero .sub,
.orders-page .mi-hero p,
.orders-page .mi-hero .sub,
.invoice-page .mi-hero p,
.invoice-page .mi-hero .sub{
  color:#6b7280 !important;
  font-weight:400 !important;
}

/* tabs */
.manage-invoices-page .mi-tabs,
.orders-page .mi-tabs,
.invoice-page .mi-tabs{
  background:transparent !important;
}

.manage-invoices-page .mi-tab,
.orders-page .mi-tab,
.invoice-page .mi-tab{
  background:#ffffff !important;
  color:#334155 !important;
  border:1px solid #dbe3ee !important;
  font-weight:600 !important;
}

.manage-invoices-page .mi-tab.is-active,
.orders-page .mi-tab.is-active,
.invoice-page .mi-tab.is-active{
  background:#eff6ff !important;
  color:#0d3ea6 !important;
  border-color:#bfdbfe !important;
  box-shadow:none !important;
}

/* toolbar / search */
.manage-invoices-page .mi-toolbar,
.orders-page .mi-toolbar,
.invoice-page .mi-toolbar{
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  box-shadow:none !important;
}

.manage-invoices-page .mi-toolbar .input,
.manage-invoices-page .mi-toolbar input,
.manage-invoices-page .mi-toolbar select,
.orders-page .mi-toolbar .input,
.orders-page .mi-toolbar input,
.orders-page .mi-toolbar select,
.invoice-page .mi-toolbar .input,
.invoice-page .mi-toolbar input,
.invoice-page .mi-toolbar select{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid #d7dfeb !important;
  font-weight:400 !important;
}

.manage-invoices-page .mi-toolbar input::placeholder,
.orders-page .mi-toolbar input::placeholder,
.invoice-page .mi-toolbar input::placeholder{
  color:#9ca3af !important;
}

/* table shell */
.manage-invoices-page .mi-table-wrap,
.orders-page .mi-table-wrap,
.invoice-page .mi-table-wrap{
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  border-radius:16px !important;
  box-shadow:0 4px 14px rgba(15,23,42,.04) !important;
}

/* full white background */
.manage-invoices-page table,
.orders-page table,
.invoice-page table,
.manage-invoices-page thead,
.manage-invoices-page tbody,
.orders-page thead,
.orders-page tbody,
.invoice-page thead,
.invoice-page tbody{
  background:#ffffff !important;
}

/* header */
.manage-invoices-page thead th,
.invoice-page thead th{
  background:#f9fafb !important;
  color:#6b7280 !important;
  border-bottom:1px solid #e5e7eb !important;
  font-weight:600 !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
}

/* Orders page: sync with Inventory table */
.orders-page thead th{
  background:#ffffff !important;
  color:#111111 !important;
  border-bottom:1px solid #e5e9f2 !important;
  font-weight:600 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:12px !important;
  padding:12px 10px !important;
}

/* body cells */
.manage-invoices-page tbody td,
.invoice-page tbody td{
  background:#ffffff !important;
  color:#111827 !important;
  border-bottom:1px solid #f1f5f9 !important;
  font-weight:400 !important;
}

.orders-page tbody td{
  background:#ffffff !important;
  color:#111111 !important;
  border-bottom:1px solid #eef2f7 !important;
  font-weight:400 !important;
  font-size:13px !important;
  padding:12px 10px !important;
}

.orders-page tbody tr:hover td{
  background:#fafcff !important;
}

/* links / ids */
.manage-invoices-page tbody td a,
.orders-page tbody td a,
.invoice-page tbody td a{
  font-weight:600 !important;
}

/* secondary text */
.manage-invoices-page .subtext,
.manage-invoices-page small,
.manage-invoices-page .muted,
.orders-page .subtext,
.orders-page small,
.orders-page .muted,
.invoice-page .subtext,
.invoice-page small,
.invoice-page .muted{
  color:#9ca3af !important;
  font-weight:400 !important;
}

/* hover softer */
.manage-invoices-page tbody tr:hover td,
.orders-page tbody tr:hover td,
.invoice-page tbody tr:hover td{
  background:#f8fafc !important;
}

/* badge soften */
.manage-invoices-page .badge,
.orders-page .badge,
.invoice-page .badge{
  background:#f3f4f6 !important;
  color:#374151 !important;
  border:1px solid #e5e7eb !important;
  font-weight:600 !important;
  box-shadow:none !important;
}

.manage-invoices-page .badge.approval,
.orders-page .badge.approval,
.invoice-page .badge.approval{
  background:#fef3c7 !important;
  color:#92400e !important;
  border-color:#fde68a !important;
}

.manage-invoices-page .badge.testing,
.orders-page .badge.testing,
.invoice-page .badge.testing{
  background:#e0e7ff !important;
  color:#3730a3 !important;
  border-color:#c7d2fe !important;
}

.manage-invoices-page .badge.pickup,
.orders-page .badge.pickup,
.invoice-page .badge.pickup{
  background:#dcfce7 !important;
  color:#166534 !important;
  border-color:#bbf7d0 !important;
}

.manage-invoices-page .badge.checkin,
.orders-page .badge.checkin,
.invoice-page .badge.checkin,
.manage-invoices-page .badge.check-in,
.orders-page .badge.check-in,
.invoice-page .badge.check-in{
  background:#f3f4f6 !important;
  color:#4b5563 !important;
  border-color:#e5e7eb !important;
}

/* balance */
.manage-invoices-page .balance,
.orders-page .balance,
.invoice-page .balance{
  color:#22c55e !important;
  font-weight:600 !important;
}

.manage-invoices-page .balance.is-due,
.orders-page .balance.is-due,
.invoice-page .balance.is-due{
  color:#dc2626 !important;
}

/* buttons */
.manage-invoices-page .btn,
.orders-page .btn,
.invoice-page .btn{
  font-weight:600 !important;
  box-shadow:none !important;
}

.manage-invoices-page .btn--ghost,
.orders-page .btn--ghost,
.invoice-page .btn--ghost{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid #d7dfeb !important;
}

/* dropdown */
.manage-invoices-page .dropdown__menu,
.orders-page .dropdown__menu,
.invoice-page .dropdown__menu{
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 12px 28px rgba(15,23,42,.10) !important;
}

.manage-invoices-page .dropdown__item,
.orders-page .dropdown__item,
.invoice-page .dropdown__item{
  color:#111827 !important;
  font-weight:500 !important;
}

.manage-invoices-page .dropdown__item:hover,
.orders-page .dropdown__item:hover,
.invoice-page .dropdown__item:hover{
  background:#f5f7fb !important;
}

/* make everything inside page less bold by default */
.manage-invoices-page *,
.orders-page *,
.invoice-page *{
  text-shadow:none !important;
}

.manage-invoices-page strong,
.manage-invoices-page b,
.orders-page strong,
.orders-page b,
.invoice-page strong,
.invoice-page b{
  font-weight:600 !important;
}


/* Enterprise POS Security: lock screen / switch user */
.pos-lock-screen{
  position:fixed;
  inset:0;
  z-index:999999;
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.pos-lock-screen.hidden{display:none!important;}
.pos-lock-card{
  width:min(420px, calc(100vw - 32px));
  background:#fff;
  border:1px solid #e5e9f2;
  border-radius:24px;
  box-shadow:0 28px 90px rgba(0,0,0,.24);
  padding:28px;
  text-align:center;
}

.pos-lock-icon{font-size:42px;margin-bottom:10px;}
.pos-lock-card h2{margin:0 0 6px;font-size:24px;font-weight:900;color:#0f172a;}
.pos-lock-card p{margin:0 0 18px;color:#64748b;font-weight:600;}
.pos-lock-pin{
  width:100%;
  height:52px;
  border:1px solid #cbd5e1;
  border-radius:14px;
  font-size:20px;
  text-align:center;
  letter-spacing:8px;
  outline:none;
}
.pos-lock-pin:focus{border-color:#0ea5e9;box-shadow:0 0 0 4px rgba(14,165,233,.14);}
.pos-lock-error{min-height:22px;margin:10px 0;color:#dc2626;font-weight:700;}
.pos-lock-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px;}
.pos-lock-keypad button,.pos-lock-actions button{
  border:1px solid #e2e8f0;
  background:#f8fafc;
  border-radius:14px;
  min-height:48px;
  font-weight:800;
  cursor:pointer;
}
.pos-lock-keypad button:hover,.pos-lock-actions button:hover{background:#e0f2fe;border-color:#7dd3fc;}
.pos-lock-actions{margin-top:16px;}
.pos-lock-actions button{width:100%;background:#fff;color:#ef4444;}
.user-dropdown__item.is-danger{color:#ef4444;}
.user-dropdown__item.is-danger:hover{background:#fef2f2;color:#dc2626;}
.user-dropdown__item.is-shift-close{color:var(--ths-ui-warning,#f59e0b);}
.user-dropdown__item.is-shift-close:hover{background:#fffbeb;color:#d97706;}

/* Switch User -- Confirm PIN modal (self-PIN check before switching account).
   Same centered-card / dimmed-backdrop visual language as .pos-lock-screen,
   kept as separate classes/ids so it doesn't collide with the full lock
   screen's state (thsLockMode, idle timers, etc.) -- see app.js. */
.ths-confirmpin-backdrop{
  position:fixed;
  inset:0;
  z-index:1000000;
  background:rgba(15,23,42,.5);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.ths-confirmpin-backdrop.hidden{display:none!important;}
.ths-confirmpin-card{
  width:min(380px, calc(100vw - 32px));
  background:#fff;
  border:1px solid #e5e9f2;
  border-radius:22px;
  box-shadow:0 28px 90px rgba(0,0,0,.24);
  padding:26px;
  text-align:center;
}
.ths-confirmpin-card h2{margin:0 0 6px;font-size:20px;font-weight:900;color:#0f172a;}
.ths-confirmpin-card p{margin:0 0 16px;color:#64748b;font-weight:600;font-size:14px;}
.ths-confirmpin-card .ths-confirmpin-actions{margin-top:14px;}
.ths-confirmpin-card .ths-confirmpin-actions button{
  width:100%;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  border-radius:14px;
  min-height:44px;
  font-weight:800;
  cursor:pointer;
  color:#475569;
}
.ths-confirmpin-card .ths-confirmpin-actions button:hover{background:#f1f5f9;}

/* Switch User -- "will refresh the page / not saved" warning modal */
.ths-switchwarn-backdrop{
  position:fixed;
  inset:0;
  z-index:1000000;
  background:rgba(15,23,42,.5);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.ths-switchwarn-backdrop.hidden{display:none!important;}
.ths-switchwarn-card{
  width:min(420px, calc(100vw - 32px));
  background:#fff;
  border:1px solid #e5e9f2;
  border-radius:22px;
  box-shadow:0 28px 90px rgba(0,0,0,.24);
  padding:26px;
  text-align:center;
}
.ths-switchwarn-card h2{margin:0 0 6px;font-size:20px;font-weight:900;color:#0f172a;}
.ths-switchwarn-card p{margin:0 0 6px;color:#475569;font-weight:600;font-size:14px;line-height:1.5;}
.ths-switchwarn-actions{display:flex;gap:10px;margin-top:18px;}
.ths-switchwarn-actions button{
  flex:1 1 0;
  min-height:46px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
}
.ths-switchwarn-actions .ths-switchwarn-cancel{border:1px solid #e2e8f0;background:#f8fafc;color:#475569;}
.ths-switchwarn-actions .ths-switchwarn-cancel:hover{background:#f1f5f9;}
.ths-switchwarn-actions .ths-switchwarn-confirm{border:1px solid var(--ths-ui-warning,#f59e0b);background:var(--ths-ui-warning,#f59e0b);color:#fff;}
.ths-switchwarn-actions .ths-switchwarn-confirm:hover{background:#d97706;border-color:#d97706;}

/* Generic small info/blocking-alert dialog (re-used for "no active shift"
   and "unfinished cart" messages before Close Shift can proceed) */
.ths-infoalert-backdrop{
  position:fixed;
  inset:0;
  z-index:1000001;
  background:rgba(15,23,42,.5);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.ths-infoalert-backdrop.hidden{display:none!important;}
.ths-infoalert-card{
  width:min(420px, calc(100vw - 32px));
  background:#fff;
  border:1px solid #e5e9f2;
  border-radius:22px;
  box-shadow:0 28px 90px rgba(0,0,0,.24);
  padding:26px;
  text-align:center;
}
.ths-infoalert-card h2{margin:0 0 6px;font-size:20px;font-weight:900;color:#0f172a;}
.ths-infoalert-card p{margin:0 0 6px;color:#475569;font-weight:600;font-size:14px;line-height:1.5;}
.ths-infoalert-card button{
  margin-top:18px;
  width:100%;
  min-height:46px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
  color:#475569;
}
.ths-infoalert-card button:hover{background:#f1f5f9;}

/* Working Shift Review -- hard modal (spec section 7): dismissible only by
   the explicit X control or a successful Confirm & Close Shift. */
.ths-shiftreview-backdrop{
  position:fixed;
  inset:0;
  z-index:1000002;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.ths-shiftreview-backdrop.hidden{display:none!important;}
.ths-shiftreview-card{
  width:min(480px, calc(100vw - 24px));
  max-height:calc(100vh - 36px);
  overflow-y:auto;
  background:#fff;
  border:1px solid #e5e9f2;
  border-radius:22px;
  box-shadow:0 28px 90px rgba(0,0,0,.28);
  padding:0;
}
.ths-shiftreview-head{
  position:sticky;
  top:0;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid #eef1f6;
  border-radius:22px 22px 0 0;
}
.ths-shiftreview-head h2{margin:0;font-size:18px;font-weight:900;color:#0f172a;}
.ths-shiftreview-x{
  width:32px;height:32px;border-radius:10px;border:none;background:#f1f5f9;
  font-size:16px;font-weight:800;cursor:pointer;color:#475569;
}
.ths-shiftreview-x:hover{background:#e2e8f0;}
.ths-shiftreview-body{padding:18px 22px;}
.ths-shiftreview-warning{
  background:#fffbeb;
  border:1px solid #fde68a;
  color:#92400e;
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  font-weight:700;
  margin-bottom:14px;
}
.ths-shiftreview-section{margin-bottom:16px;}
.ths-shiftreview-section h3{
  margin:0 0 8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#94a3b8;
}
.ths-shiftreview-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 0;
  font-size:14px;
  color:#334155;
}
.ths-shiftreview-row b{color:#0f172a;font-weight:800;}
.ths-shiftreview-row.total{border-top:1px dashed #e2e8f0;margin-top:4px;padding-top:10px;}
.ths-shiftreview-row.negative b{color:#dc2626;}
.ths-shiftreview-row.positive b{color:#16a34a;}
.ths-shiftreview-empty{color:#94a3b8;font-size:13px;font-style:italic;padding:4px 0;}
.ths-shiftreview-foot{padding:16px 22px 22px;}
.ths-shiftreview-confirm{
  width:100%;
  min-height:56px;
  border:none;
  border-radius:16px;
  background:linear-gradient(135deg,#16a34a,#22c55e);
  color:#fff;
  font-weight:900;
  font-size:15px;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(22,163,74,.28);
}
.ths-shiftreview-confirm:hover{filter:brightness(1.05);}
.ths-shiftreview-confirm:disabled{opacity:.6;cursor:not-allowed;filter:none;}



/* Restock / Stock Warning action modal */
/* BACKDROP */
.sw-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* MODAL */
.sw-modal {
  width: 440px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 25px 70px rgba(0,0,0,.25);
  overflow: hidden;
}

/* HEADER */
.sw-modal__head {
  padding: 16px 18px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sw-modal__head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
}

.sw-modal__x {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: #f1f5f9;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

/* BODY */
.sw-modal__body {
  padding: 16px;
}

/* ITEM CARD */
.sw-item-card {
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #dbe3ef;
  margin-bottom: 14px;
}

.sw-item-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
}

.sw-item-sub {
  margin-top: 4px;
  color: #64748b;
  font-weight: 600;
}

/* LABEL */
.sw-modal label {
  display: block;
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
}

/* INPUT */
.sw-modal input {
  width: 100%;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #dbe3ef;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
  outline: none;
}

.sw-modal input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.sw-modal input[readonly] {
  background: #f1f5f9;
}

/* ARROW BUTTON */
.sw-copy-arrow {
  width: 38px;
  height: 38px;
  margin: 10px auto;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sw-copy-arrow:hover {
  background: #dbeafe;
}

/* FOOTER */
.sw-modal__foot {
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: #f8fafc;
}

/* BUTTONS */
.sw-btn-cancel {
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #dbe3ef;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}

.sw-btn-primary {
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background: #2563eb;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.sw-btn-primary:hover {
  background: #1d4ed8;
}

/* =========================================================
   TechHubStore Dashboard v1 - Single Store Control Center
   Green + Blue system palette. Module-safe CSS: dash-* only.
========================================================= */
.dash-page{--dash-blue:#2563eb;--dash-blue-2:#60a5fa;--dash-green:#16a34a;--dash-green-2:#37c871;--dash-ink:#0f172a;--dash-muted:#64748b;--dash-line:#e5edf7;--dash-soft:#f8fbff;--dash-card:#fff;--dash-shadow:0 16px 45px rgba(15,23,42,.08);display:block;padding:18px;min-height:100%;background:linear-gradient(180deg,#f6fbff 0%,#f8fafc 55%,#fff 100%);color:var(--dash-ink)}
.dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 16px}.dash-kicker{text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:900;color:var(--dash-green)}.dash-head h1{margin:4px 0 4px;font-size:30px;line-height:1.1;font-weight:950;color:var(--dash-ink)}.dash-head p{margin:0;color:var(--dash-muted);font-weight:700}.dash-controls{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.dash-modebox{display:grid;gap:6px}.dash-modebox span{font-size:12px;text-transform:uppercase;color:var(--dash-muted);font-weight:900}.dash-modebox select{height:40px;min-width:150px;border:1px solid #cbd5e1;border-radius:14px;background:#fff;padding:0 34px 0 12px;font-weight:950;color:var(--dash-ink);outline:none;cursor:pointer}.dash-modebox select:focus{border-color:var(--dash-blue);box-shadow:0 0 0 4px rgba(37,99,235,.12)}.dash-modebox select:disabled{background:#f1f5f9;color:#94a3b8;cursor:not-allowed}.dash-datebox{display:grid;gap:6px}.dash-datebox span{font-size:12px;text-transform:uppercase;color:var(--dash-muted);font-weight:900}.dash-datebox input{height:40px;border:1px solid #cbd5e1;border-radius:14px;background:#fff;padding:0 12px;font-weight:900;color:var(--dash-ink);outline:none}.dash-datebox input:focus{border-color:var(--dash-blue);box-shadow:0 0 0 4px rgba(37,99,235,.12)}.dash-refresh{height:40px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--dash-blue),#1d4ed8);color:#fff;font-weight:950;padding:0 16px;box-shadow:0 10px 24px rgba(37,99,235,.22);cursor:pointer}.dash-status{margin:0 0 14px;padding:10px 14px;border:1px solid var(--dash-line);border-radius:16px;background:#fff;color:var(--dash-muted);font-weight:900}.dash-status.is-loading{background:#eff6ff;color:#1d4ed8}.dash-status.is-ready{background:#ecfdf5;color:#15803d;border-color:#bbf7d0}.dash-status.is-error{background:#fff1f2;color:#be123c;border-color:#fecdd3}.dash-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.dash-kpi{position:relative;overflow:hidden;border:1px solid var(--dash-line);border-radius:22px;background:#fff;box-shadow:var(--dash-shadow);padding:16px 18px}.dash-kpi:after{content:"";position:absolute;right:-28px;top:-28px;width:90px;height:90px;border-radius:99px;opacity:.13}.dash-kpi span{display:block;font-weight:950;color:var(--dash-muted);font-size:13px}.dash-kpi strong{display:block;margin-top:6px;font-size:26px;line-height:1.1;font-weight:950;color:var(--dash-ink)}.dash-kpi em{display:block;margin-top:7px;font-style:normal;color:var(--dash-muted);font-weight:800}.dash-kpi--blue:after{background:var(--dash-blue)}.dash-kpi--green:after{background:var(--dash-green)}.dash-kpi--soft:after{background:var(--dash-green-2)}.dash-kpi--dark:after{background:#0f172a}.dash-grid{display:grid;gap:14px}.dash-grid--hero{grid-template-columns:1fr;margin-bottom:14px}.dash-card{border:1px solid var(--dash-line);border-radius:24px;background:rgba(255,255,255,.94);box-shadow:var(--dash-shadow);padding:16px;min-width:0}.dash-card--hero{padding:18px}.dash-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}.dash-card-head h2{margin:0 0 4px;font-size:20px;font-weight:950;color:var(--dash-ink)}.dash-card-head p{margin:0;color:var(--dash-muted);font-weight:700}.dash-legend{display:flex;align-items:center;gap:7px;white-space:nowrap;color:var(--dash-muted);font-weight:900;font-size:13px}.dash-legend span{width:12px;height:12px;border-radius:4px;display:inline-block}.dash-legend .rev{background:var(--dash-green)}.dash-legend .cost{background:var(--dash-blue)}.dash-chart-wrap{position:relative;overflow:hidden;border:1px solid #eaf1fb;border-radius:20px;background:linear-gradient(180deg,#fff,#f8fbff);padding:12px}.dash-chart-wrap canvas{display:block;width:100%;max-width:100%}.dash-chart-tip{position:absolute;z-index:5;display:none;min-width:160px;background:#0f172a;color:#fff;border-radius:14px;padding:10px 12px;box-shadow:0 18px 40px rgba(15,23,42,.25);pointer-events:none}.dash-chart-tip.show{display:grid;gap:2px}.dash-chart-tip b{font-size:13px}.dash-chart-tip span{font-size:12px;color:#dbeafe}.dash-card--pattern{margin-bottom:14px}.dash-card-head--tabs{align-items:center}.dash-tabs{display:flex;gap:8px;padding:5px;border:1px solid #dbeafe;border-radius:16px;background:#eff6ff}.dash-tabs button{border:0;background:transparent;border-radius:12px;padding:9px 14px;font-weight:950;color:#1d4ed8;cursor:pointer}.dash-tabs button.is-active{background:linear-gradient(135deg,var(--dash-blue),#1d4ed8);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.20)}.dash-pattern-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}.dash-pattern-summary div{border:1px solid #dbeafe;background:#f8fbff;border-radius:16px;padding:11px 13px}.dash-pattern-summary strong{display:block;font-size:12px;color:var(--dash-muted);text-transform:uppercase;letter-spacing:.06em}.dash-pattern-summary span{display:block;margin-top:4px;font-weight:950;color:var(--dash-ink)}.dash-heatmap-scroll{overflow:auto;border:1px solid #edf2f7;border-radius:18px;background:#fff;padding:12px}.dash-heatmap{display:grid;grid-template-columns:80px repeat(var(--dash-hours,24),minmax(19px,1fr));gap:4px;min-width:720px}.hm-corner,.hm-hour,.hm-row-label{font-size:11px;color:#64748b;font-weight:900}.hm-hour{text-align:center}.hm-row-label{display:flex;align-items:center;justify-content:flex-end;padding-right:6px;color:#334155}.hm-cell{position:relative;min-height:21px;border:0;border-radius:7px;background:#eef6ff;cursor:help}.hm-l0{background:#f1f5f9}.hm-l1{background:#dbeafe}.hm-l2{background:#bfdbfe}.hm-l3{background:#93c5fd}.hm-l4{background:#60a5fa}.hm-l5{background:#2563eb}.hm-cell.is-peak{outline:3px solid rgba(22,163,74,.36);box-shadow:0 0 0 3px rgba(34,197,94,.12),0 8px 18px rgba(22,163,74,.20)}.hm-cell.is-peak:after{content:"";position:absolute;inset:5px;border-radius:99px;background:#22c55e;box-shadow:0 0 18px rgba(34,197,94,.75)}.dash-insights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.dash-mini-table{width:100%;border-collapse:collapse}.dash-mini-table tr+tr td{border-top:1px solid #eef2f7}.dash-mini-table td{padding:11px 6px;vertical-align:middle}.dash-mini-table b{display:block;color:var(--dash-ink);font-weight:950;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dash-mini-table small{display:block;margin-top:3px;color:var(--dash-muted);font-weight:800}.dash-mini-table strong{display:block;text-align:right;color:var(--dash-ink);font-weight:950}.dash-mini-table .green{color:var(--dash-green)}.dash-empty{border:1px dashed #cbd5e1;border-radius:16px;padding:18px;text-align:center;color:var(--dash-muted);font-weight:900;background:#f8fafc}.dash-refund-box{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}.dash-refund-box div{border-radius:18px;border:1px solid #dbeafe;background:#f8fbff;padding:13px}.dash-refund-box span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--dash-muted);font-weight:950}.dash-refund-box strong{display:block;margin-top:5px;font-size:23px;font-weight:950;color:var(--dash-ink)}.dash-card--boost{background:linear-gradient(135deg,#ffffff 0%,#f0fdf4 100%)}.dash-suggest{border:1px solid #dbeafe;border-radius:18px;background:#fff;padding:13px 14px;margin-bottom:10px}.dash-suggest span{display:block;font-weight:950;color:#0f172a}.dash-suggest p{margin:5px 0 8px;color:#475569;font-weight:750;line-height:1.35}.dash-suggest em{font-style:normal;display:inline-flex;border-radius:999px;background:#dcfce7;color:#15803d;font-size:12px;font-weight:950;padding:5px 9px}
@media(max-width:1100px){.dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-insights{grid-template-columns:1fr}.dash-pattern-summary{grid-template-columns:1fr}.dash-head{display:block}.dash-controls{margin-top:12px}.dash-card-head{display:block}.dash-legend{margin-top:10px}.dash-card-head--tabs .dash-tabs{margin-top:12px;display:inline-flex}}
@media(max-width:640px){.dash-page{padding:12px}.dash-kpis{grid-template-columns:1fr}.dash-head h1{font-size:24px}.dash-tabs{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.dash-tabs button{padding:9px 8px}.dash-refund-box{grid-template-columns:1fr}.dash-heatmap{min-width:680px}}

/* Dashboard Multi Store V1.1 */
.dash-page--multi .dash-kicker{color:#2563eb}.dash-multi-top{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(420px,1.1fr);gap:14px;margin-bottom:14px}.dash-store-legend{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:12px}.dash-store-legend span{display:inline-flex;align-items:center;gap:7px;font-weight:900;color:#475569;font-size:12px}.dash-store-legend i{width:11px;height:11px;border-radius:999px;display:inline-block;box-shadow:0 0 0 3px rgba(37,99,235,.08)}.dash-tabs--mode{background:#ecfdf5;border-color:#bbf7d0}.dash-tabs--mode button{color:#15803d}.dash-tabs--mode button.is-active{background:linear-gradient(135deg,#16a34a,#2563eb);color:#fff}#dash-revenue-donut,#dash-profit-bars,#dash-multi-line{display:block;width:100%;max-width:100%}.dash-page--multi .dash-card--hero{margin-bottom:14px}.dash-page--multi .dash-insights{margin-top:14px}.dash-page--multi .dash-mini-table small{max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:1100px){.dash-multi-top{grid-template-columns:1fr}}

/* Dashboard responsive polish v1.2 - tablet + mobile */
@media (max-width: 1180px){
  .dash-page{
    padding:16px;
  }
  .dash-head{
    align-items:stretch;
  }
  .dash-controls{
    justify-content:flex-end;
  }
  .dash-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dash-kpi{
    min-height:104px;
  }
  .dash-multi-top{
    grid-template-columns:1fr;
  }
}

@media (max-width: 900px){
  .dash-page{
    padding:14px;
  }
  .dash-head{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    padding:14px;
    border:1px solid #e5edf7;
    border-radius:24px;
    background:rgba(255,255,255,.86);
    box-shadow:0 12px 34px rgba(15,23,42,.06);
  }
  .dash-head h1{
    font-size:22px;
  }
  .dash-head p{
    font-size:14px;
    line-height:1.35;
  }
  .dash-controls{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:10px;
    align-items:end;
  }
  .dash-modebox,
  .dash-datebox{
    min-width:0;
  }
  .dash-modebox select,
  .dash-datebox input{
    width:100%;
    min-width:0;
  }
  .dash-refresh{
    min-width:110px;
  }
  .dash-card{
    border-radius:22px;
    padding:14px;
  }
  .dash-card-head{
    gap:10px;
    margin-bottom:12px;
  }
  .dash-card-head h2{
    font-size:18px;
  }
  .dash-chart-wrap{
    border-radius:18px;
    padding:10px;
  }
  .dash-pattern-summary{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .dash-insights{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .dash-page{
    padding:10px;
    background:linear-gradient(180deg,#f6fbff 0%,#fff 100%);
  }
  .dash-head{
    padding:14px;
    border-radius:22px;
    margin-bottom:12px;
  }
  .dash-kicker{
    font-size:11px;
    letter-spacing:.08em;
  }
  .dash-head h1{
    font-size:20px;
    line-height:1.15;
  }
  .dash-head p{
    font-size:13px;
  }
  .dash-controls{
    grid-template-columns:1fr 1fr;
  }
  .dash-refresh{
    grid-column:1 / -1;
    width:100%;
    height:44px;
    border-radius:16px;
  }
  .dash-modebox span,
  .dash-datebox span{
    font-size:11px;
  }
  .dash-modebox select,
  .dash-datebox input{
    height:44px;
    border-radius:16px;
    font-size:13px;
  }
  .dash-status{
    margin-bottom:12px;
    border-radius:16px;
    font-size:14px;
    line-height:1.35;
  }
  .dash-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .dash-kpi{
    border-radius:20px;
    padding:14px;
    min-height:102px;
  }
  .dash-kpi:after{
    width:72px;
    height:72px;
    right:-26px;
    top:-26px;
  }
  .dash-kpi span{
    font-size:12px;
  }
  .dash-kpi strong{
    font-size:23px;
  }
  .dash-kpi em{
    font-size:13px;
    line-height:1.25;
  }
  .dash-card{
    border-radius:20px;
    padding:12px;
  }
  .dash-card--hero{
    padding:12px;
  }
  .dash-card-head,
  .dash-card-head--tabs{
    display:grid;
    grid-template-columns:1fr;
  }
  .dash-legend{
    flex-wrap:wrap;
    white-space:normal;
    margin-top:6px;
  }
  .dash-chart-wrap{
    padding:8px;
    border-radius:16px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .dash-tabs{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    padding:5px;
  }
  .dash-tabs--mode{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dash-tabs button{
    padding:10px 6px;
    font-size:13px;
  }
  .dash-pattern-summary{
    grid-template-columns:1fr;
  }
  .dash-heatmap-scroll{
    padding:8px;
  }
  .dash-heatmap{
    min-width:640px;
  }
  .dash-mini-table td{
    padding:10px 4px;
  }
  .dash-mini-table b{
    max-width:190px;
  }
  .dash-mini-table small{
    font-size:12px;
    line-height:1.3;
  }
  .dash-mini-table strong{
    font-size:14px;
  }
  .dash-refund-box{
    grid-template-columns:1fr;
  }
  .dash-store-legend{
    gap:8px;
  }
  .dash-store-legend span{
    font-size:11px;
  }
}

@media (max-width: 420px){
  .dash-page{
    padding:8px;
  }
  .dash-controls{
    grid-template-columns:1fr;
  }
  .dash-kpis{
    grid-template-columns:1fr;
  }
  .dash-kpi{
    min-height:94px;
  }
  .dash-head h1{
    font-size:22px;
  }
  .dash-mini-table tr{
    display:grid;
    grid-template-columns:1fr;
    gap:4px;
  }
  .dash-mini-table td{
    display:block;
    border-top:0!important;
  }
  .dash-mini-table td:last-child strong{
    text-align:left;
  }
  .dash-mini-table b{
    max-width:100%;
  }
}

/* Dashboard full-screen layout for tablet + mobile v1.3
   Hide the left sidebar only while the Dashboard page is active.
   Do not affect POS/global branch logic or desktop layout. */
@media (max-width: 1180px){
  #view-app:has(.content .dash-page){
    display:block;
    height:100dvh;
    overflow:hidden;
  }

  #view-app:has(.content .dash-page) .sidebar,
  #view-app:has(.content .dash-page) .pos-sidebar-edge,
  #view-app:has(.content .dash-page) .pos-sidebar-backdrop{
    display:none !important;
  }

  #view-app:has(.content .dash-page) .app{
    width:100vw;
    max-width:100vw;
    height:100dvh;
    min-height:100dvh;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  #view-app:has(.content .dash-page) .topbar{
    position:sticky;
    top:0;
    z-index:50;
    width:100%;
    min-height:54px;
    height:auto;
    padding:8px 12px;
    gap:10px;
  }

  #view-app:has(.content .dash-page) .content{
    width:100%;
    max-width:100%;
    padding:0;
    margin:0;
  }

  #view-app:has(.content .dash-page) .dash-page{
    width:100%;
    min-height:calc(100dvh - 54px);
    padding:14px;
  }
}

@media (max-width: 760px){
  #view-app:has(.content .dash-page) .topbar{
    align-items:flex-start;
    flex-wrap:wrap;
    padding:8px 10px;
  }

  #view-app:has(.content .dash-page) .topbar__right{
    width:100%;
    justify-content:space-between;
    gap:8px;
  }

  #view-app:has(.content .dash-page) .branch-select,
  #view-app:has(.content .dash-page) #app-branch{
    min-width:0;
    max-width:58vw;
  }

  #view-app:has(.content .dash-page) .dash-page{
    padding:10px;
  }
}

@media (max-width: 420px){
  #view-app:has(.content .dash-page) .topbar{
    padding:7px 8px;
  }

  #view-app:has(.content .dash-page) .branch-label{
    font-size:12px;
  }

  #view-app:has(.content .dash-page) .branch-select,
  #view-app:has(.content .dash-page) #app-branch{
    max-width:62vw;
    font-size:13px;
  }

  #view-app:has(.content .dash-page) .user-box{
    font-size:13px;
  }
}

/* =========================================================
   REPORT KPI SEMANTIC COLOR GROUPS — PRO READABILITY PATCH
   Scope-safe: Report page only. Uses current KPI render order.
   Groups:
   - Sales / Performance: green
   - Payment / Cashflow: blue
   - Adjustments: amber
   - Cost / GST: slate / violet
   - Warning / Reconciliation: red when important
   ========================================================= */
.report-page{
  --rpt-sales:#16a34a;
  --rpt-sales-soft:#ecfdf5;
  --rpt-sales-line:#bbf7d0;
  --rpt-payment:#2563eb;
  --rpt-payment-soft:#eff6ff;
  --rpt-payment-line:#bfdbfe;
  --rpt-adjust:#f59e0b;
  --rpt-adjust-soft:#fffbeb;
  --rpt-adjust-line:#fde68a;
  --rpt-danger:#dc2626;
  --rpt-danger-soft:#fef2f2;
  --rpt-danger-line:#fecaca;
  --rpt-cost:#475569;
  --rpt-cost-soft:#f8fafc;
  --rpt-cost-line:#cbd5e1;
  --rpt-gst:#7c3aed;
  --rpt-gst-soft:#f5f3ff;
  --rpt-gst-line:#ddd6fe;
}

.report-kpis{
  gap:14px;
}

.report-kpi{
  overflow:hidden;
  border-radius:20px;
  border:1px solid #e7edf5;
  background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
  box-shadow:0 8px 22px rgba(15,23,42,.045);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.report-kpi:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(15,23,42,.085);
}

.report-kpi::before{
  width:44px;
  height:5px;
  top:16px;
  opacity:1;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}

.report-kpi::after{
  content:"";
  position:absolute;
  right:-34px;
  top:-34px;
  width:104px;
  height:104px;
  border-radius:999px;
  opacity:.13;
  pointer-events:none;
}

.report-kpi__label{
  position:relative;
  z-index:1;
  color:#5f6f86;
}

.report-kpi__value,
.report-kpi__hint{
  position:relative;
  z-index:1;
}

.report-kpi__value{
  letter-spacing:-.02em;
}

/* 1 Orders — neutral / volume */
.report-kpis .report-kpi:nth-child(1){
  border-color:#dbe4f0;
  background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);
}
.report-kpis .report-kpi:nth-child(1)::before,
.report-kpis .report-kpi:nth-child(1)::after{background:#64748b;}
.report-kpis .report-kpi:nth-child(1) .report-kpi__value{color:#0f172a;}

/* 2 Total Sale, 5 Net Profit, 15 Avg Order — SALES / PERFORMANCE */
.report-kpis .report-kpi:nth-child(2),
.report-kpis .report-kpi:nth-child(5),
.report-kpis .report-kpi:nth-child(15){
  border-color:var(--rpt-sales-line);
  background:linear-gradient(135deg,#ffffff 0%,var(--rpt-sales-soft) 100%);
}
.report-kpis .report-kpi:nth-child(2)::before,
.report-kpis .report-kpi:nth-child(2)::after,
.report-kpis .report-kpi:nth-child(5)::before,
.report-kpis .report-kpi:nth-child(5)::after,
.report-kpis .report-kpi:nth-child(15)::before,
.report-kpis .report-kpi:nth-child(15)::after{background:var(--rpt-sales);}
.report-kpis .report-kpi:nth-child(2) .report-kpi__value,
.report-kpis .report-kpi:nth-child(5) .report-kpi__value,
.report-kpis .report-kpi:nth-child(15) .report-kpi__value{color:#065f46;}

/* 3 GST — tax / accounting */
.report-kpis .report-kpi:nth-child(3){
  border-color:var(--rpt-gst-line);
  background:linear-gradient(135deg,#ffffff 0%,var(--rpt-gst-soft) 100%);
}
.report-kpis .report-kpi:nth-child(3)::before,
.report-kpis .report-kpi:nth-child(3)::after{background:var(--rpt-gst);}
.report-kpis .report-kpi:nth-child(3) .report-kpi__value{color:#5b21b6;}

/* 4 Cost — cost group */
.report-kpis .report-kpi:nth-child(4){
  border-color:var(--rpt-cost-line);
  background:linear-gradient(135deg,#ffffff 0%,var(--rpt-cost-soft) 100%);
}
.report-kpis .report-kpi:nth-child(4)::before,
.report-kpis .report-kpi:nth-child(4)::after{background:var(--rpt-cost);}
.report-kpis .report-kpi:nth-child(4) .report-kpi__value{color:#334155;}

/* 6 Payment Received, 9 Net Received, 10 Cash, 11 Card, 12 Transfer — PAYMENT / CASHFLOW */
.report-kpis .report-kpi:nth-child(6),
.report-kpis .report-kpi:nth-child(9),
.report-kpis .report-kpi:nth-child(10),
.report-kpis .report-kpi:nth-child(11),
.report-kpis .report-kpi:nth-child(12){
  border-color:var(--rpt-payment-line);
  background:linear-gradient(135deg,#ffffff 0%,var(--rpt-payment-soft) 100%);
}
.report-kpis .report-kpi:nth-child(6)::before,
.report-kpis .report-kpi:nth-child(6)::after,
.report-kpis .report-kpi:nth-child(9)::before,
.report-kpis .report-kpi:nth-child(9)::after,
.report-kpis .report-kpi:nth-child(10)::before,
.report-kpis .report-kpi:nth-child(10)::after,
.report-kpis .report-kpi:nth-child(11)::before,
.report-kpis .report-kpi:nth-child(11)::after,
.report-kpis .report-kpi:nth-child(12)::before,
.report-kpis .report-kpi:nth-child(12)::after{background:var(--rpt-payment);}
.report-kpis .report-kpi:nth-child(6) .report-kpi__value,
.report-kpis .report-kpi:nth-child(9) .report-kpi__value,
.report-kpis .report-kpi:nth-child(10) .report-kpi__value,
.report-kpis .report-kpi:nth-child(11) .report-kpi__value,
.report-kpis .report-kpi:nth-child(12) .report-kpi__value{color:#1d4ed8;}

/* 7 Store Credit Used, 8 Refunds — ADJUSTMENTS */
.report-kpis .report-kpi:nth-child(7),
.report-kpis .report-kpi:nth-child(8){
  border-color:var(--rpt-adjust-line);
  background:linear-gradient(135deg,#ffffff 0%,var(--rpt-adjust-soft) 100%);
}
.report-kpis .report-kpi:nth-child(7)::before,
.report-kpis .report-kpi:nth-child(7)::after,
.report-kpis .report-kpi:nth-child(8)::before,
.report-kpis .report-kpi:nth-child(8)::after{background:var(--rpt-adjust);}
.report-kpis .report-kpi:nth-child(7) .report-kpi__value,
.report-kpis .report-kpi:nth-child(8) .report-kpi__value{color:#b45309;}

/* 13 Outstanding, 14 Balance Check — RECONCILIATION / ALERT */
.report-kpis .report-kpi:nth-child(13),
.report-kpis .report-kpi:nth-child(14){
  border-color:var(--rpt-danger-line);
  background:linear-gradient(135deg,#ffffff 0%,var(--rpt-danger-soft) 100%);
}
.report-kpis .report-kpi:nth-child(13)::before,
.report-kpis .report-kpi:nth-child(13)::after,
.report-kpis .report-kpi:nth-child(14)::before,
.report-kpis .report-kpi:nth-child(14)::after{background:var(--rpt-danger);}
.report-kpis .report-kpi:nth-child(13) .report-kpi__value,
.report-kpis .report-kpi:nth-child(14) .report-kpi__value{color:#b91c1c;}

/* Subtle group labels through card hints: keep readable and less noisy */
.report-kpi__hint{
  color:#64748b;
  font-weight:500;
}

/* Branch summary table: lightly tint money columns so KPI groups carry into table */
.report-table thead th:nth-child(7),
.report-table tbody td:nth-child(7),
.report-table thead th:nth-child(8),
.report-table tbody td:nth-child(8),
.report-table thead th:nth-child(9),
.report-table tbody td:nth-child(9),
.report-table thead th:nth-child(10),
.report-table tbody td:nth-child(10){
  background-image:linear-gradient(0deg,rgba(37,99,235,.035),rgba(37,99,235,.035));
}

.report-table thead th:nth-child(11),
.report-table tbody td:nth-child(11),
.report-table thead th:nth-child(12),
.report-table tbody td:nth-child(12){
  background-image:linear-gradient(0deg,rgba(245,158,11,.045),rgba(245,158,11,.045));
}

.report-table thead th:nth-child(13),
.report-table tbody td:nth-child(13),
.report-table thead th:nth-child(14),
.report-table tbody td:nth-child(14){
  background-image:linear-gradient(0deg,rgba(220,38,38,.035),rgba(220,38,38,.035));
}

/* Mobile: keep color grouping but reduce decoration size */
@media (max-width:768px){
  .report-kpi{
    min-height:108px;
    padding:16px;
  }
  .report-kpi::after{
    width:82px;
    height:82px;
    right:-30px;
    top:-30px;
  }
  .report-kpi__value{
    font-size:20px;
  }
}


/* =========================================================
   STORE SPECIAL ORDER - staff UI module
   ========================================================= */
.so-page{
  min-height:100%;
  padding:20px;
  background:linear-gradient(180deg,#f6fbff 0%,#f8fafc 55%,#fff 100%);
  color:#0f172a;
}
.so-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
  padding:20px;
  border:1px solid #e5edf7;
  border-radius:24px;
  background:#fff;
  box-shadow:0 12px 34px rgba(15,23,42,.06);
}
.so-kicker{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#16a34a;}
.so-hero h1{margin:5px 0 6px;font-size:30px;line-height:1.1;font-weight:950;color:#0f172a;}
.so-hero p{margin:0;max-width:760px;color:#64748b;font-weight:700;line-height:1.45;}
.so-store-pill{min-width:130px;border:1px solid #bfdbfe;background:#eff6ff;border-radius:18px;padding:12px 14px;text-align:right;}
.so-store-pill span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:#64748b;}
.so-store-pill strong{display:block;margin-top:3px;font-size:20px;color:#0d3ea6;}
.so-card{border:1px solid #e5edf7;border-radius:24px;background:#fff;box-shadow:0 12px 34px rgba(15,23,42,.055);padding:18px;margin-bottom:16px;}
.so-add-card{background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);}
.so-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;}
.so-card-head h2{margin:0 0 4px;font-size:20px;font-weight:950;color:#0f172a;}
.so-card-head p{margin:0;color:#64748b;font-weight:700;}
.so-card-head--table h2 span{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;margin-left:6px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:13px;}
.so-search-wrap{position:relative;margin-bottom:12px;}
.so-search-box{position:relative;}
.so-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:18px;z-index:1;}
#so-search{width:100%;height:58px;border:1px solid #cbd5e1;border-radius:18px;padding:0 58px 0 44px;font-size:17px;font-weight:800;outline:none;background:#fff;box-shadow:0 3px 10px rgba(15,23,42,.035);}
#so-search:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12);}
.so-camera{position:absolute;right:9px;top:9px;width:40px;height:40px;border:1px solid #dbeafe;border-radius:14px;background:#eff6ff;cursor:pointer;font-size:18px;}
.so-camera:hover{background:#dbeafe;}
.so-suggest{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;border:1px solid #e5edf7;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.18);padding:8px;max-height:360px;overflow:auto;}
.so-suggest.is-open{display:block;}
.so-suggest-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;background:#fff;border-radius:14px;padding:12px;text-align:left;cursor:pointer;}
.so-suggest-item:hover{background:#f8fbff;}
.so-suggest-item b{display:block;color:#0f172a;font-weight:900;}
.so-suggest-item small{display:block;margin-top:4px;color:#64748b;font-weight:700;}
.so-suggest-item em{font-style:normal;color:#2563eb;font-weight:900;white-space:nowrap;}
.so-suggest-custom{border-top:1px solid #eef2f7;margin-top:4px;}
.so-selected{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:18px;border:1px solid #e5edf7;background:#fff;margin-bottom:14px;}
.so-selected strong{display:block;font-weight:950;color:#0f172a;}
.so-selected small{display:block;margin-top:4px;color:#64748b;font-weight:700;}
.so-selected--inventory{border-color:#bbf7d0;background:#f0fdf4;}
.so-selected--custom{border-color:#fed7aa;background:#fff7ed;}
.so-selected--empty{background:#f8fafc;}
.so-link{border:0;background:transparent;color:#2563eb;font-weight:900;cursor:pointer;}
.so-form-grid{display:grid;grid-template-columns:120px 180px 160px minmax(260px,1fr) auto;gap:12px;align-items:end;}
.so-form-grid label{display:flex;flex-direction:column;gap:7px;min-width:0;}
.so-form-grid label span{font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:900;color:#64748b;}
.so-form-grid input,.so-form-grid select{height:44px;border:1px solid #cbd5e1;border-radius:14px;background:#fff;padding:0 12px;font-weight:800;outline:none;}
.so-form-grid input:focus,.so-form-grid select:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.10);}
.so-span-2{grid-column:auto;}
.so-actions{display:flex;justify-content:flex-end;}
.so-btn{height:40px;border:1px solid #d7dfeb;border-radius:14px;background:#fff;color:#0f172a;padding:0 14px;font-weight:900;cursor:pointer;white-space:nowrap;}
.so-btn:hover{background:#f8fafc;}
.so-btn--primary{height:44px;background:#2563eb;border-color:#2563eb;color:#fff;box-shadow:0 10px 24px rgba(37,99,235,.20);}
.so-btn--primary:hover{background:#1d4ed8;}
.so-btn--success{background:#16a34a;border-color:#16a34a;color:#fff;}
.so-btn--success:hover{background:#15803d;}
.so-table-wrap{border:1px solid #e5edf7;border-radius:18px;overflow:auto;background:#fff;}
.so-table{width:100%;min-width:1120px;border-collapse:collapse;}
.so-table th{position:sticky;top:0;z-index:1;background:#f8fafc;color:#334155;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:13px 12px;border-bottom:1px solid #e5edf7;}
.so-table td{padding:14px 12px;border-top:1px solid #eef2f7;vertical-align:middle;font-size:14px;color:#111827;}
.so-table td b{display:block;font-weight:900;color:#0f172a;}
.so-table td small{display:block;margin-top:4px;color:#64748b;font-weight:700;}
.so-table tr.is-sent td{background:#f0fdf4;}
.so-num{text-align:right;font-weight:900;}
.so-priority,.so-status{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:950;white-space:nowrap;}
.so-priority--urgent{background:#fff1f2;color:#be123c;border:1px solid #fecdd3;}
.so-priority--stock{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;}
.so-priority--custom{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;}
.so-status--requested{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;}
.so-status--preparing{background:#fef9c3;color:#854d0e;border:1px solid #fde68a;}
.so-status--sent{background:#dcfce7;color:#166534;border:1px solid #bbf7d0;}
.so-muted{color:#94a3b8;font-weight:800;}
.so-empty{padding:24px;text-align:center;color:#64748b;font-weight:900;background:#f8fafc;border-radius:14px;}
@media(max-width:1100px){.so-form-grid{grid-template-columns:1fr 1fr 1fr}.so-span-2{grid-column:1 / -1}.so-actions{grid-column:1 / -1;justify-content:stretch}.so-actions .so-btn{width:100%;}.so-hero{display:block}.so-store-pill{text-align:left;margin-top:12px;display:inline-block}}
@media(max-width:720px){.so-page{padding:12px}.so-hero,.so-card{border-radius:20px;padding:14px}.so-hero h1{font-size:24px}.so-form-grid{grid-template-columns:1fr}.so-span-2,.so-actions{grid-column:auto}.so-card-head{display:block}.so-card-head .so-btn{margin-top:10px;width:100%}#so-search{font-size:15px}}

/* =========================================================
   Special Order Management (Inventory tab)
   System colors: teal action + blue active tabs + semantic badges
========================================================= */
.so-mgr-page{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:4px 0 18px;
}
.so-mgr-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  background:#fff;
  border:1px solid #e5e9f2;
  border-radius:18px;
  padding:18px;
  box-shadow:0 8px 22px rgba(15,23,42,.04);
}
.so-mgr-head h2{margin:0 0 4px;font-size:24px;font-weight:900;color:#0f172a;}
.so-mgr-head p{margin:0;color:#64748b;font-size:13px;font-weight:600;}
.so-mgr-head-actions{display:flex;gap:8px;align-items:center;}
.so-mgr-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.so-mgr-tab{
  border:1px solid #dbe3ef;
  background:#fff;
  border-radius:12px;
  padding:10px 15px;
  font-weight:900;
  color:#334155;
  cursor:pointer;
}
.so-mgr-tab:hover{background:#f8fbff;border-color:#bfdbfe;color:#0d6efd;}
.so-mgr-tab.is-active{background:#0d6efd;color:#fff;border-color:#0d6efd;box-shadow:0 8px 18px rgba(13,110,253,.18);}
.so-mgr-filters{
  display:grid;
  grid-template-columns:160px 160px 160px 190px minmax(220px,1fr);
  gap:10px;
  background:#f8fbff;
  border:1px solid #e5e9f2;
  border-radius:16px;
  padding:12px;
}
.so-mgr-filters .input{height:40px;}
.so-mgr-card{
  background:#fff;
  border:1px solid #e5e9f2;
  border-radius:18px;
  padding:14px;
  box-shadow:0 8px 22px rgba(15,23,42,.04);
}
.so-mgr-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.so-mgr-card-head h3{margin:0 0 4px;font-size:18px;font-weight:900;color:#0f172a;}
.so-mgr-card-head p{margin:0;color:#64748b;font-size:12px;font-weight:600;}
.so-mgr-count{display:inline-flex;align-items:center;border-radius:999px;background:#ecfeff;color:#0f766e;border:1px solid #99f6e4;padding:6px 10px;font-size:12px;font-weight:900;}
.so-mgr-table-wrap{overflow:auto;border:1px solid #e5e9f2;border-radius:14px;background:#fff;}
.so-mgr-table{min-width:1180px;}
.so-mgr-table thead th{background:#f8fafc;color:#334155;font-weight:900;}
.so-mgr-table tbody tr:hover td{background:#f8fbff;}
.so-mgr-table .ths-muted{font-size:12px;color:#64748b;margin-top:3px;}
.so-mgr-empty{padding:22px!important;text-align:center;color:#64748b;font-weight:800;background:#fff;}
.so-mgr-row-sent td{background:#f0fdf4!important;}
.so-mgr-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900;text-transform:capitalize;white-space:nowrap;border:1px solid transparent;}
.so-mgr-badge.priority-urgent{background:#fff1f2;color:#be123c;border-color:#fecdd3;}
.so-mgr-badge.priority-stock{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe;}
.so-mgr-badge.priority-custom{background:#fff7ed;color:#c2410c;border-color:#fed7aa;}
.so-mgr-badge.status-requested{background:#f1f5f9;color:#334155;border-color:#e2e8f0;}
.so-mgr-badge.status-added_to_order{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe;}
.so-mgr-badge.status-waiting{background:#fff7ed;color:#c2410c;border-color:#fed7aa;}
.so-mgr-badge.status-sent{background:#ecfdf5;color:#15803d;border-color:#bbf7d0;}
.so-mgr-badge.status-received{background:#e6fffb;color:#0f766e;border-color:#99f6e4;}
.so-mgr-badge.status-cancelled,.so-mgr-badge.status-canceled{background:#fef2f2;color:#b91c1c;border-color:#fecaca;}
.so-mgr-action{position:relative;display:inline-flex;}
.so-mgr-action .btn--teal,
.so-mgr-head-actions .btn--teal{
  background:#14b8a6!important;
  border-color:#14b8a6!important;
  color:#fff!important;
  font-weight:900;
  box-shadow:0 8px 18px rgba(20,184,166,.18);
}
.so-mgr-action .btn--teal:hover,
.so-mgr-head-actions .btn--teal:hover{filter:brightness(.96);}
.so-mgr-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:170px;
  display:none;
  flex-direction:column;
  gap:3px;
  z-index:99999;
  background:#fff;
  border:1px solid #e5e9f2;
  border-radius:14px;
  padding:6px;
  box-shadow:0 18px 42px rgba(15,23,42,.16);
}
.so-mgr-action.is-open .so-mgr-menu{display:flex;}
.so-mgr-menu button{
  width:100%;
  border:0;
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
  text-align:left;
  font-weight:800;
  color:#0f172a;
  cursor:pointer;
  white-space:nowrap;
}
.so-mgr-menu button:hover{background:#ecfeff;color:#0f766e;}
.so-mgr-menu button.is-danger{color:#dc2626;}
.so-mgr-menu button.is-danger:hover{background:#fef2f2;color:#b91c1c;}
.btn--danger{background:#dc2626!important;border-color:#dc2626!important;color:#fff!important;}
@media(max-width:1100px){.so-mgr-filters{grid-template-columns:repeat(2,minmax(0,1fr));}.so-mgr-head{flex-direction:column;}.so-mgr-head-actions{width:100%;}.so-mgr-head-actions .btn{width:100%;}}
@media(max-width:680px){.so-mgr-filters{grid-template-columns:1fr;}.so-mgr-tab{flex:1 1 auto;}.so-mgr-card{padding:10px;}}

/* Special Order Manager: render Action dropdown through body portal so table overflow never clips it */
.so-mgr-menu-portal{
  position:absolute;
  min-width:170px;
  display:flex;
  flex-direction:column;
  gap:3px;
  z-index:99999;
  background:#fff;
  border:1px solid #e5e9f2;
  border-radius:14px;
  padding:6px;
  box-shadow:0 18px 42px rgba(15,23,42,.16);
}
.so-mgr-menu-portal button{
  width:100%;
  border:0;
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
  text-align:left;
  font-weight:800;
  color:#0f172a;
  cursor:pointer;
  white-space:nowrap;
}
.so-mgr-menu-portal button:hover{background:#ecfeff;color:#0f766e;}
.so-mgr-menu-portal button.is-danger{color:#dc2626;}
.so-mgr-menu-portal button.is-danger:hover{background:#fef2f2;color:#b91c1c;}

/* =========================================================
   USER ACTIVITY — Enterprise audit trail UI
   System palette: blue / green / teal with soft cards
========================================================= */
.ua-page{
  --ua-blue:#2563eb;
  --ua-blue2:#0d6efd;
  --ua-green:#16a34a;
  --ua-teal:#14b8a6;
  --ua-orange:#f59e0b;
  --ua-red:#dc2626;
  --ua-ink:#0f172a;
  --ua-muted:#64748b;
  --ua-line:#e5edf7;
  padding:20px;
  min-height:100%;
  background:linear-gradient(180deg,#f6fbff 0%,#f8fafc 58%,#ffffff 100%);
  color:var(--ua-ink);
}
.ua-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:22px;
  border-radius:24px;
  background:linear-gradient(135deg,#0b1220 0%,#10264f 55%,#0d6efd 140%);
  color:#fff;
  box-shadow:0 18px 44px rgba(15,23,42,.16);
  border:1px solid rgba(255,255,255,.12);
  margin-bottom:16px;
}
.ua-kicker{font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.12em;color:#8be7ff;margin-bottom:6px;}
.ua-hero h1{margin:0 0 6px;font-size:31px;line-height:1.1;font-weight:950;color:#fff;}
.ua-hero p{margin:0;color:rgba(255,255,255,.82);font-weight:700;line-height:1.4;}
.ua-refresh{
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);
  color:#fff;
  min-height:42px;
  padding:0 16px;
  border-radius:14px;
  font-weight:950;
  cursor:pointer;
  backdrop-filter:blur(6px);
}
.ua-refresh:hover{background:rgba(255,255,255,.18);}
.ua-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px;}
.ua-kpi{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--ua-line);
  border-radius:22px;
  padding:17px 18px;
  box-shadow:0 10px 26px rgba(15,23,42,.05);
}
.ua-kpi:after{content:"";position:absolute;right:-30px;top:-30px;width:92px;height:92px;border-radius:999px;opacity:.13;background:var(--ua-blue);}
.ua-kpi span{display:block;font-size:12px;font-weight:950;letter-spacing:.07em;text-transform:uppercase;color:var(--ua-muted);}
.ua-kpi strong{display:block;margin-top:7px;font-size:27px;line-height:1.1;font-weight:950;color:var(--ua-ink);}
.ua-kpi em{display:block;margin-top:6px;font-style:normal;font-size:13px;font-weight:700;color:var(--ua-muted);}
.ua-kpi--green:after{background:var(--ua-green);}.ua-kpi--cyan:after{background:var(--ua-teal);}.ua-kpi--orange:after{background:var(--ua-orange);}.ua-kpi--blue:after{background:var(--ua-blue);}
.ua-card{background:#fff;border:1px solid var(--ua-line);border-radius:24px;box-shadow:0 12px 32px rgba(15,23,42,.055);padding:16px;}
.ua-toolbar{display:grid;grid-template-columns:minmax(260px,1.4fr) 150px 150px 150px 150px auto auto;gap:10px;align-items:center;margin-bottom:14px;padding:12px;border-radius:18px;background:#f8fbff;border:1px solid #e5edf7;}
.ua-toolbar .input{height:42px;border-radius:13px;}
.ua-feed{display:grid;gap:10px;min-height:180px;}
.ua-feed.is-loading{opacity:.72;}
.ua-row{display:grid;grid-template-columns:46px minmax(0,1fr);gap:12px;align-items:center;border:1px solid #e8edf5;border-radius:18px;background:#fff;padding:12px 14px;transition:.16s ease;}
.ua-row:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.07);border-color:#cfe0ff;background:#fbfdff;}
.ua-row__icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#eff6ff;color:#1d4ed8;font-size:20px;font-weight:950;}
.ua-type-sale .ua-row__icon{background:#ecfdf5;color:#15803d;}.ua-type-booking .ua-row__icon{background:#eff6ff;color:#1d4ed8;}.ua-type-stock .ua-row__icon{background:#fff7ed;color:#c2410c;}.ua-type-customer .ua-row__icon{background:#f0fdfa;color:#0f766e;}.ua-type-security .ua-row__icon{background:#f1f5f9;color:#334155;}.ua-type-settings .ua-row__icon{background:#f5f3ff;color:#6d28d9;}
.ua-row__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;}
.ua-row__top strong{font-size:15px;font-weight:950;color:#0f172a;}
.ua-row__top span{font-size:12px;font-weight:900;color:#64748b;white-space:nowrap;}
.ua-row__meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.ua-row__meta b,.ua-row__meta i{display:inline-flex;align-items:center;min-height:24px;border-radius:999px;padding:0 9px;font-size:12px;font-weight:850;font-style:normal;}
.ua-row__meta b{background:#eef6ff;color:#0d3ea6;border:1px solid #bfdbfe;}
.ua-row__meta i{background:#f8fafc;color:#475569;border:1px solid #e2e8f0;}
.ua-empty{padding:28px;text-align:center;border:1px dashed #cbd5e1;border-radius:18px;background:#f8fafc;color:#64748b;font-weight:900;}
@media(max-width:1180px){.ua-toolbar{grid-template-columns:1fr 1fr 1fr}.ua-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}.ua-toolbar .ua-search{grid-column:1 / -1;}}
@media(max-width:720px){.ua-page{padding:12px}.ua-hero{display:block;padding:18px;border-radius:22px}.ua-refresh{margin-top:14px;width:100%;}.ua-kpis{grid-template-columns:1fr}.ua-toolbar{grid-template-columns:1fr}.ua-row{grid-template-columns:1fr}.ua-row__icon{width:40px;height:40px}.ua-row__top{display:block}.ua-row__top span{display:block;margin-top:4px}.ua-row__meta{margin-top:6px}}


/* Customers: count summary + pagination context */
.cust-table-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:18px 0 10px;
  padding:0 2px;
}
.cust-total-count{
  font-size:18px;
  line-height:1.2;
  font-weight:800;
  color:#0f172a;
}
.cust-total-sub{
  font-size:13px;
  font-weight:600;
  color:#64748b;
}
@media (max-width: 720px){
  .cust-table-meta{ align-items:flex-start; flex-direction:column; gap:4px; }
}

/* =========================
   Support / Help Center
========================= */
.support-page{display:flex;flex-direction:column;gap:16px;min-height:calc(100vh - 86px);}
.support-hero{display:flex;justify-content:space-between;gap:18px;align-items:stretch;background:linear-gradient(135deg,#0f766e,#0d6efd);color:#fff;border-radius:18px;padding:22px;box-shadow:0 12px 30px rgba(2,6,23,.14);}
.support-kicker{text-transform:uppercase;font-size:12px;letter-spacing:.11em;font-weight:800;opacity:.9;margin-bottom:6px;}
.support-hero h1{margin:0 0 8px;font-size:28px;line-height:1.1;}
.support-hero p{margin:0;max-width:720px;color:rgba(255,255,255,.9);font-size:15px;}
.support-hero-card{min-width:250px;max-width:330px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px;backdrop-filter:blur(10px);}
.support-hero-card b{font-size:16px;}.support-hero-card span{font-size:13px;color:rgba(255,255,255,.86);line-height:1.45;}
.support-search-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:12px;box-shadow:0 8px 22px rgba(15,23,42,.06);}
.support-search{flex:1;height:42px;border:1px solid #cbd5e1;border-radius:12px;padding:0 14px;font-size:14px;outline:none;background:#f8fafc;}
.support-search:focus{border-color:#0d6efd;background:#fff;box-shadow:0 0 0 3px rgba(13,110,253,.12);}
.support-count{font-size:13px;color:#64748b;white-space:nowrap;font-weight:700;}
/* 2-column layout: a single nav tree (topics, with multi-page topics
   expanding to their sub-pages inline) on the left, and the article itself
   -- now much wider, since it no longer shares space with a separate
   middle "article list" column -- on the right. */
.support-layout{display:grid;grid-template-columns:272px 1fr;gap:16px;align-items:start;}
.support-nav,.support-viewer{background:#fff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 8px 22px rgba(15,23,42,.06);}
.support-nav{padding:12px;position:sticky;top:12px;max-height:calc(100vh - 190px);overflow:auto;}
.support-nav-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#64748b;font-weight:900;margin:4px 4px 10px;}
.support-nav-tree{display:flex;flex-direction:column;gap:2px;}
.support-nav-topic{width:100%;display:flex;align-items:center;gap:9px;border:0;background:transparent;text-align:left;border-radius:10px;padding:9px 10px;cursor:pointer;color:#334155;}
.support-nav-topic b{font-size:13px;font-weight:800;flex:1;min-width:0;}
.support-nav-topic:hover{background:#f1f5f9;}
.support-nav-topic.is-active{background:#eaf3ff;color:#0d6efd;box-shadow:inset 3px 0 0 #0d6efd;}
.support-nav-topic__icon{flex:0 0 auto;font-size:15px;line-height:1;}
.support-nav-chevron{flex:0 0 auto;font-size:10px;color:#94a3b8;transition:transform .15s ease;}
.support-nav-group.is-open>.support-nav-topic .support-nav-chevron{transform:rotate(180deg);}
.support-nav-group.is-open>.support-nav-topic{color:#0d6efd;font-weight:700;}
.support-nav-sub{display:none;flex-direction:column;gap:1px;padding:2px 0 6px 34px;}
.support-nav-group.is-open .support-nav-sub{display:flex;}
.support-nav-sub-item{width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:7px 10px;font-size:12.5px;line-height:1.35;color:#475569;cursor:pointer;}
.support-nav-sub-item:hover{background:#f1f5f9;color:#0f172a;}
.support-nav-sub-item.is-active{background:#eaf3ff;color:#0d6efd;font-weight:700;}
.support-empty{color:#64748b;padding:18px;text-align:center;border:1px dashed #cbd5e1;border-radius:14px;background:#f8fafc;}
.support-viewer{padding:0;overflow:hidden;min-height:520px;}
/* Compact article header: one tight block (pill, title, description, meta)
   instead of the old, more spaced-out version -- keeps more of the panel
   for the actual content below. */
.support-article-head{padding:16px 22px 14px;border-bottom:1px solid #e2e8f0;background:linear-gradient(180deg,#f8fafc,#fff);}
.support-pill{display:inline-flex;align-items:center;gap:5px;background:#eaf3ff;color:#0d6efd;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:900;margin-bottom:7px;}
.support-article-head h2{margin:0 0 4px;color:#0f172a;font-size:19px;line-height:1.22;}.support-article-head p{margin:0;color:#64748b;font-size:13px;line-height:1.45;}.support-meta{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;font-size:11.5px;color:#64748b;}.support-meta span{background:#f1f5f9;border-radius:999px;padding:3px 8px;color:#475569;}
.support-article-body{padding:20px 24px;color:#1e293b;font-size:14px;line-height:1.62;}.support-article-body h3{margin:20px 0 8px;font-size:16px;color:#0f172a;}.support-article-body h3:first-child{margin-top:0;}.support-article-body p{margin:0 0 12px;}.support-article-body ol,.support-article-body ul{margin:8px 0 14px;padding-left:22px;}.support-article-body li{margin:5px 0;}
.support-article-body h4{margin:16px 0 6px;font-size:14.5px;color:#0f172a;}.support-note p,.support-warning p{margin:6px 0 0;}.support-note ul,.support-warning ul{margin:6px 0 0;}
.support-note,.support-warning{border-radius:14px;padding:12px 14px;margin:14px 0;border:1px solid;}.support-note{background:#ecfdf5;border-color:#bbf7d0;color:#065f46;}.support-warning{background:#fff7ed;border-color:#fed7aa;color:#9a3412;}
.support-table{width:100%;border-collapse:separate;border-spacing:0;margin:12px 0 16px;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;}.support-table th,.support-table td{padding:10px 12px;border-bottom:1px solid #e2e8f0;text-align:left;vertical-align:top;}.support-table th{background:#f8fafc;color:#0f172a;font-size:13px;}.support-table tr:last-child th,.support-table tr:last-child td{border-bottom:0;}
.support-video-placeholder{height:180px;border-radius:16px;background:linear-gradient(135deg,#111827,#334155);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;margin-top:12px;}
.support-timeline{display:flex;flex-direction:column;gap:10px;margin:14px 0;}.support-timeline>div{display:grid;grid-template-columns:90px 1fr;gap:12px;align-items:start;border-left:3px solid #0d6efd;background:#f8fafc;border-radius:12px;padding:12px;}.support-timeline b{color:#0d6efd;}.support-timeline span{color:#334155;}
.support-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}.support-action-btn{border:0;background:#0d6efd;color:#fff;border-radius:999px;padding:10px 14px;font-weight:800;cursor:pointer;}.support-action-btn:hover{filter:brightness(.95);}.support-action-btn--secondary{background:#0f766e;}

/* Introduction topic: a plain illustrative screenshot, no hotspots */
.support-intro-image{width:100%;display:block;border-radius:16px;border:1px solid #e2e8f0;margin:14px 0;box-shadow:0 8px 22px rgba(15,23,42,.10);}
/* Narrow/portrait screenshots (e.g. a single POS panel, not the full screen) should not stretch full width */
.support-intro-image--narrow{width:auto;max-width:280px;margin-left:auto;margin-right:auto;}

/* Interface Guide topic: image + numbered clickable hotspots */
.support-screenshot-scroll{overflow-x:auto;margin:14px 0;-webkit-overflow-scrolling:touch;border-radius:16px;}
.support-screenshot-wrap{position:relative;width:100%;aspect-ratio:3840/1764;border-radius:16px;overflow:hidden;border:1px solid #e2e8f0;background:#0f172a;box-shadow:0 8px 22px rgba(15,23,42,.10);}
.support-screenshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.support-hotspot-pin{position:absolute;transform:translate(-50%,-50%);width:21px;height:21px;border-radius:50%;border:2px solid #fff;background:#0d6efd;color:#fff;font-weight:900;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(2,6,23,.4);transition:transform .15s ease,background .15s ease,box-shadow .15s ease;padding:0;z-index:1;}
.support-hotspot-pin:hover{background:#0b5ed7;transform:translate(-50%,-50%) scale(1.14);}
.support-hotspot-pin.is-active{background:#f59e0b;box-shadow:0 0 0 5px rgba(245,158,11,.32);z-index:2;}
.support-hotspot-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;}
.support-hotspot-legend__item{display:flex;align-items:center;gap:10px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;padding:10px 12px;text-align:left;cursor:pointer;font-size:13px;color:#0f172a;transition:border-color .15s ease,background .15s ease;}
.support-hotspot-legend__item:hover{border-color:#93c5fd;background:#f8fbff;}
.support-hotspot-legend__item.is-active{border-color:#0d6efd;background:#eff6ff;}
.support-hotspot-legend__num{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#0d6efd;color:#fff;font-weight:900;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s ease;}
.support-hotspot-legend__item.is-active .support-hotspot-legend__num{background:#f59e0b;}

/* Floating note that opens right next to the clicked pin/list row -- a
   position:fixed portal appended to <body> (same technique as the (i)
   info-badge popover used elsewhere in the app), so it always sits on top
   and is never clipped by the screenshot's rounded/scrolling container. */
.support-hotspot-portal{position:fixed;z-index:2147483000;background:#0f172a;color:#fff;font-size:13px;line-height:1.55;border-radius:14px;box-shadow:0 16px 36px rgba(15,23,42,.35);padding:12px 14px;--arrow-left:24px;}
.support-hotspot-portal::after{content:'';position:absolute;left:var(--arrow-left);bottom:-7px;transform:translateX(-50%);border-width:7px 7px 0 7px;border-style:solid;border-color:#0f172a transparent transparent transparent;}
.support-hotspot-portal--below::after{bottom:auto;top:-7px;border-width:0 7px 7px 7px;border-color:transparent transparent #0f172a transparent;}
.support-hotspot-portal__head{display:flex;align-items:center;gap:8px;font-weight:900;margin-bottom:5px;}
.support-hotspot-portal__num{flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:#f59e0b;color:#0f172a;font-weight:900;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;}
.support-hotspot-portal__body{color:#e2e8f0;}

@media (max-width:1180px){.support-layout{grid-template-columns:240px 1fr;}}
@media (max-width:760px){.support-hero{flex-direction:column;padding:18px;}.support-hero h1{font-size:24px;}.support-hero-card{max-width:none;min-width:0;}.support-search-row{flex-direction:column;align-items:stretch;}.support-layout{grid-template-columns:1fr;}.support-nav{position:static;max-height:none;}.support-article-head,.support-article-body{padding:16px;}.support-timeline>div{grid-template-columns:1fr;gap:4px;}.support-screenshot-wrap{min-width:900px;}.support-hotspot-legend{grid-template-columns:1fr;}}

/* =========================================================
   AI Assistant / Business Insights - Phase 1 UI shell
   ========================================================= */
.ai-assistant-page{padding:22px;max-width:1480px;margin:0 auto;color:#0f172a}.ai-page-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px 24px;border:1px solid #dbeafe;background:linear-gradient(135deg,#eff6ff 0%,#f8fafc 62%,#ecfeff 100%);border-radius:22px;box-shadow:0 12px 30px rgba(15,23,42,.07);margin-bottom:16px}.ai-eyebrow{font-size:12px;font-weight:800;color:#0284c7;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}.ai-page-hero h1{margin:0;font-size:28px;line-height:1.15}.ai-page-hero p{margin:8px 0 0;color:#475569}.ai-hero-badge{white-space:nowrap;border:1px solid #bae6fd;background:#fff;color:#0369a1;font-weight:800;border-radius:999px;padding:9px 12px;font-size:12px}.ai-tabs{display:flex;gap:8px;border-bottom:1px solid #e2e8f0;margin:0 0 16px}.ai-tab{border:0;background:transparent;padding:13px 16px;font-weight:800;color:#64748b;cursor:pointer;border-bottom:3px solid transparent}.ai-tab:hover{color:#0f766e}.ai-tab.is-active{color:#0f766e;border-bottom-color:#0f766e}.ai-bi-page{display:flex;flex-direction:column;gap:16px}.ai-bi-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}.ai-bi-toolbar h2{margin:0;font-size:22px}.ai-bi-toolbar p{margin:5px 0 0;color:#64748b}.ai-bi-filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.ai-bi-filters select{height:38px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;padding:0 10px;color:#0f172a}.ai-bi-cardgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.ai-bi-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:15px;box-shadow:0 8px 24px rgba(15,23,42,.05);position:relative;overflow:hidden}.ai-bi-card:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:#38bdf8}.ai-bi-card.ai-tone-good:before{background:#10b981}.ai-bi-card.ai-tone-warn:before{background:#f59e0b}.ai-bi-card.ai-tone-info:before{background:#0ea5e9}.ai-bi-card__label{font-size:12px;color:#64748b;font-weight:800}.ai-bi-card__value{font-size:26px;font-weight:900;margin-top:8px}.ai-bi-card__foot{display:flex;align-items:center;gap:8px;margin-top:10px;color:#64748b}.ai-bi-card__foot span{font-weight:900;color:#0f766e}.ai-bi-card__foot small{font-size:12px}.ai-bi-section{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:16px;box-shadow:0 8px 24px rgba(15,23,42,.05)}.ai-bi-section__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.ai-bi-section__head h3{margin:0;font-size:17px}.ai-bi-section__head span{font-size:12px;color:#64748b}.ai-bi-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.ai-bi-tablewrap{overflow:auto;border:1px solid #e2e8f0;border-radius:14px}.ai-bi-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;min-width:620px}.ai-bi-table th{background:#f8fafc;color:#334155;text-align:left;font-size:12px;text-transform:none;padding:11px 12px;border-bottom:1px solid #e2e8f0;white-space:nowrap}.ai-bi-table td{padding:12px;border-bottom:1px solid #eef2f7;color:#0f172a;vertical-align:middle}.ai-bi-table tbody tr:last-child td{border-bottom:0}.ai-bi-table tbody tr:hover td{background:#f8fafc}.ai-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:900;border:1px solid #cbd5e1;background:#f8fafc;color:#475569;white-space:nowrap}.ai-pill.good,.ai-pill.redeemed{background:#ecfdf5;color:#047857;border-color:#a7f3d0}.ai-pill.info,.ai-pill.active{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}.ai-pill.warn,.ai-pill.medium,.ai-pill.suspicious{background:#fffbeb;color:#b45309;border-color:#fde68a}.ai-pill.high{background:#fef2f2;color:#b91c1c;border-color:#fecaca}.ai-pill.low,.ai-pill.expired{background:#f1f5f9;color:#475569;border-color:#cbd5e1}.ai-funnel{display:flex;flex-direction:column;gap:12px}.ai-funnel__label{display:flex;justify-content:space-between;font-size:13px;color:#334155;margin-bottom:6px}.ai-funnel__label b{color:#0f172a}.ai-funnel__bar{height:12px;border-radius:999px;background:#e2e8f0;overflow:hidden}.ai-funnel__bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#0f766e,#22c55e)}.ai-reco-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ai-reco{border:1px solid #e2e8f0;border-radius:16px;padding:14px;background:#fff}.ai-reco.ai-priority-high{border-color:#fecaca;background:#fff7f7}.ai-reco.ai-priority-medium{border-color:#fde68a;background:#fffdf5}.ai-reco__top{display:flex;gap:9px;align-items:center}.ai-reco__top strong{font-size:14px}.ai-reco p{color:#475569;line-height:1.45;margin:10px 0 12px;font-size:13px}.ai-credit-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.ai-credit-kpis div{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:12px;text-align:center}.ai-credit-kpis b{display:block;font-size:21px}.ai-credit-kpis span{display:block;color:#64748b;font-size:11px;font-weight:800;margin-top:3px}.ai-note{margin:12px 0 0;color:#64748b;font-size:13px;line-height:1.45}.ai-code{display:inline-flex;align-items:center;justify-content:center;letter-spacing:.12em;font-weight:950;background:#0f172a;color:#fff;border-radius:10px;padding:6px 9px;min-width:54px}.ai-empty-panel{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:22px;box-shadow:0 8px 24px rgba(15,23,42,.05)}.ai-empty-panel h2{margin:0 0 8px}.ai-empty-panel p{margin:0;color:#64748b}.ai-empty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.ai-empty-grid div{border:1px solid #e2e8f0;background:#f8fafc;border-radius:16px;padding:14px}.ai-empty-grid b{display:block}.ai-empty-grid span{display:block;color:#64748b;font-size:13px;margin-top:6px;line-height:1.4}@media (max-width:1200px){.ai-bi-cardgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.ai-reco-list{grid-template-columns:1fr}.ai-bi-grid2{grid-template-columns:1fr}}@media (max-width:760px){.ai-assistant-page{padding:14px}.ai-page-hero,.ai-bi-toolbar{flex-direction:column;align-items:stretch}.ai-hero-badge{align-self:flex-start}.ai-bi-cardgrid,.ai-empty-grid{grid-template-columns:1fr}.ai-bi-filters{justify-content:flex-start}.ai-bi-filters select,.ai-bi-filters .btn{width:100%}.ai-credit-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* AI Assistant - Repair Credit Settings */
.ai-credit-settings__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ai-credit-settings__grid label{display:flex;flex-direction:column;gap:7px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:14px;padding:12px}.ai-credit-settings__grid label>span{font-size:12px;font-weight:900;color:#475569}.ai-credit-settings__grid input[type="number"]{height:38px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;padding:0 10px;font-weight:800;color:#0f172a;min-width:0}.ai-credit-settings__grid textarea{width:100%;border:1px solid #cbd5e1;border-radius:10px;background:#fff;padding:10px;font-weight:700;color:#0f172a;resize:vertical;min-height:72px}.ai-credit-message-field{grid-column:span 3}.ai-credit-message-field small{font-size:12px;color:#64748b;font-weight:700}.ai-switch-row{grid-column:span 3;flex-direction:row!important;align-items:center;justify-content:space-between}.ai-switch-row span{display:flex;flex-direction:column;gap:3px}.ai-switch-row b{font-size:14px;color:#0f172a}.ai-switch-row small{font-size:12px;color:#64748b;font-weight:700}.ai-switch-row input[type="checkbox"]{width:46px;height:24px;accent-color:#0f766e;cursor:pointer}.ai-input-prefix{display:flex;align-items:center;gap:0}.ai-input-prefix b{height:38px;min-width:34px;border:1px solid #cbd5e1;border-right:0;background:#fff;border-radius:10px 0 0 10px;display:flex;align-items:center;justify-content:center;color:#64748b}.ai-input-prefix input{border-radius:0 10px 10px 0!important;width:100%}.ai-credit-settings__footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}.ai-credit-preview{display:flex;gap:8px;align-items:center;background:#ecfeff;border:1px solid #a5f3fc;color:#155e75;border-radius:14px;padding:10px 12px;font-size:13px;line-height:1.4}.ai-credit-preview b{letter-spacing:.1em}.ai-credit-actions{display:flex;gap:8px;white-space:nowrap}@media (max-width:900px){.ai-credit-settings__grid{grid-template-columns:1fr}.ai-switch-row{grid-column:span 1}.ai-credit-settings__footer{flex-direction:column;align-items:stretch}.ai-credit-actions{justify-content:flex-end}}

/* AI Assistant - live data cleanup */
.ai-error-note{margin:0 0 10px;padding:10px 12px;border:1px solid #fecaca;background:#fff7f7;color:#991b1b;border-radius:12px;font-weight:800;font-size:13px;}
.ai-empty-cell{padding:18px!important;text-align:center!important;color:#64748b!important;background:#f8fafc!important;font-weight:800;}
.ai-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.ai-settings-grid label{display:flex;flex-direction:column;gap:7px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:14px;padding:12px;}
.ai-settings-grid label>span{font-size:12px;font-weight:900;color:#475569;}
.ai-settings-grid input[type="number"]{height:38px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;padding:0 10px;font-weight:800;color:#0f172a;min-width:0;}
.ai-settings-grid .ai-switch-row{grid-column:span 3;flex-direction:row!important;align-items:center;justify-content:space-between;}
.ai-message-field{display:flex;flex-direction:column;gap:7px;margin-top:12px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:14px;padding:12px;}
.ai-message-field span{font-size:12px;font-weight:900;color:#475569;}
.ai-message-field textarea{width:100%;border:1px solid #cbd5e1;border-radius:10px;background:#fff;padding:10px;font-weight:700;color:#0f172a;resize:vertical;min-height:86px;}
.ai-credit-preview{margin-top:12px;display:block;background:#ecfeff;border:1px solid #a5f3fc;color:#155e75;border-radius:14px;padding:12px;font-size:13px;line-height:1.4;}
.ai-credit-preview pre{margin:8px 0 0;white-space:pre-wrap;font-family:inherit;color:#0f172a;}
.ai-setting-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;}
@media (max-width:900px){.ai-settings-grid{grid-template-columns:1fr}.ai-settings-grid .ai-switch-row{grid-column:auto}.ai-setting-actions{justify-content:stretch;flex-direction:column}.ai-setting-actions .btn{width:100%;}}

/* =========================================================
   PUBLIC REPAIR PAGE — iPad/tablet full-width layout fix
   Scope: only pages that contain the repair pricing UI.
   Goal: desktop/mobile untouched, tablet/iPad uses full available width.
========================================================= */
@media (min-width: 721px) and (max-width: 1024px){
  body:has(.repair-final),
  body:has(.repair-tabs),
  body:has(.repair-pricing),
  body:has(.ths-repair),
  body:has(.ths-repair-flow),
  body:has(.product-cat-flow),
  body:has(#repair-tabs),
  body:has(#product-cat-flow),
  body:has([data-repair-tabs]){
    overflow-x:hidden;
  }

  body:has(.repair-final) .site,
  body:has(.repair-tabs) .site,
  body:has(.repair-pricing) .site,
  body:has(.ths-repair) .site,
  body:has(.ths-repair-flow) .site,
  body:has(.product-cat-flow) .site,
  body:has(#repair-tabs) .site,
  body:has(#product-cat-flow) .site,
  body:has([data-repair-tabs]) .site,
  body:has(.repair-final) .site-content,
  body:has(.repair-tabs) .site-content,
  body:has(.repair-pricing) .site-content,
  body:has(.ths-repair) .site-content,
  body:has(.ths-repair-flow) .site-content,
  body:has(.product-cat-flow) .site-content,
  body:has(#repair-tabs) .site-content,
  body:has(#product-cat-flow) .site-content,
  body:has([data-repair-tabs]) .site-content,
  body:has(.repair-final) .content-area,
  body:has(.repair-tabs) .content-area,
  body:has(.repair-pricing) .content-area,
  body:has(.ths-repair) .content-area,
  body:has(.ths-repair-flow) .content-area,
  body:has(.product-cat-flow) .content-area,
  body:has(#repair-tabs) .content-area,
  body:has(#product-cat-flow) .content-area,
  body:has([data-repair-tabs]) .content-area,
  body:has(.repair-final) .entry-content,
  body:has(.repair-tabs) .entry-content,
  body:has(.repair-pricing) .entry-content,
  body:has(.ths-repair) .entry-content,
  body:has(.ths-repair-flow) .entry-content,
  body:has(.product-cat-flow) .entry-content,
  body:has(#repair-tabs) .entry-content,
  body:has(#product-cat-flow) .entry-content,
  body:has([data-repair-tabs]) .entry-content{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    float:none !important;
    box-sizing:border-box !important;
  }

  body:has(.repair-final) #primary,
  body:has(.repair-tabs) #primary,
  body:has(.repair-pricing) #primary,
  body:has(.ths-repair) #primary,
  body:has(.ths-repair-flow) #primary,
  body:has(.product-cat-flow) #primary,
  body:has(#repair-tabs) #primary,
  body:has(#product-cat-flow) #primary,
  body:has([data-repair-tabs]) #primary{
    width:100% !important;
    max-width:100% !important;
    padding-left:14px !important;
    padding-right:14px !important;
    box-sizing:border-box !important;
  }

  body:has(.repair-final) #secondary,
  body:has(.repair-tabs) #secondary,
  body:has(.repair-pricing) #secondary,
  body:has(.ths-repair) #secondary,
  body:has(.ths-repair-flow) #secondary,
  body:has(.product-cat-flow) #secondary,
  body:has(#repair-tabs) #secondary,
  body:has(#product-cat-flow) #secondary,
  body:has([data-repair-tabs]) #secondary,
  body:has(.repair-final) .sidebar,
  body:has(.repair-tabs) .sidebar,
  body:has(.repair-pricing) .sidebar,
  body:has(.ths-repair) .sidebar,
  body:has(.ths-repair-flow) .sidebar,
  body:has(.product-cat-flow) .sidebar,
  body:has(#repair-tabs) .sidebar,
  body:has(#product-cat-flow) .sidebar,
  body:has([data-repair-tabs]) .sidebar,
  body:has(.repair-final) .widget-area,
  body:has(.repair-tabs) .widget-area,
  body:has(.repair-pricing) .widget-area,
  body:has(.ths-repair) .widget-area,
  body:has(.ths-repair-flow) .widget-area,
  body:has(.product-cat-flow) .widget-area,
  body:has(#repair-tabs) .widget-area,
  body:has(#product-cat-flow) .widget-area,
  body:has([data-repair-tabs]) .widget-area{
    display:none !important;
  }

  .repair-tabs,
  #repair-tabs,
  .repair-pricing,
  .ths-repair,
  .ths-repair-flow,
  .product-cat-flow,
  #product-cat-flow,
  [data-repair-tabs]{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }

  .repair-tabs *,
  #repair-tabs *,
  .repair-pricing *,
  .ths-repair *,
  .ths-repair-flow *,
  .product-cat-flow *,
  #product-cat-flow *,
  [data-repair-tabs] *{
    box-sizing:border-box !important;
  }

  .repair-tabs .repair-shell,
  #repair-tabs .repair-shell,
  .repair-pricing .repair-shell,
  .ths-repair .repair-shell,
  .ths-repair-flow .repair-shell,
  .product-cat-flow .repair-shell,
  #product-cat-flow .repair-shell,
  [data-repair-tabs] .repair-shell,
  .repair-tabs .repair-wrap,
  #repair-tabs .repair-wrap,
  .repair-pricing .repair-wrap,
  .ths-repair .repair-wrap,
  .ths-repair-flow .repair-wrap,
  .product-cat-flow .repair-wrap,
  #product-cat-flow .repair-wrap,
  [data-repair-tabs] .repair-wrap,
  .repair-tabs .repair-card,
  #repair-tabs .repair-card,
  .repair-pricing .repair-card,
  .ths-repair .repair-card,
  .ths-repair-flow .repair-card,
  .product-cat-flow .repair-card,
  #product-cat-flow .repair-card,
  [data-repair-tabs] .repair-card,
  .repair-tabs .repair-flow,
  #repair-tabs .repair-flow,
  .repair-pricing .repair-flow,
  .ths-repair .repair-flow,
  .ths-repair-flow .repair-flow,
  .product-cat-flow .repair-flow,
  #product-cat-flow .repair-flow,
  [data-repair-tabs] .repair-flow,
  .repair-tabs .repair-final,
  #repair-tabs .repair-final,
  .repair-pricing .repair-final,
  .ths-repair .repair-final,
  .ths-repair-flow .repair-final,
  .product-cat-flow .repair-final,
  #product-cat-flow .repair-final,
  [data-repair-tabs] .repair-final{
    width:100% !important;
    max-width:100% !important;
  }

  .repair-tabs .repair-final,
  #repair-tabs .repair-final,
  .repair-pricing .repair-final,
  .ths-repair .repair-final,
  .ths-repair-flow .repair-final,
  .product-cat-flow .repair-final,
  #product-cat-flow .repair-final,
  [data-repair-tabs] .repair-final{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  .repair-tabs input[type="search"],
  .repair-tabs input[type="text"],
  #repair-tabs input[type="search"],
  #repair-tabs input[type="text"],
  .repair-pricing input[type="search"],
  .repair-pricing input[type="text"],
  .ths-repair input[type="search"],
  .ths-repair input[type="text"],
  .ths-repair-flow input[type="search"],
  .ths-repair-flow input[type="text"],
  .product-cat-flow input[type="search"],
  .product-cat-flow input[type="text"],
  #product-cat-flow input[type="search"],
  #product-cat-flow input[type="text"],
  [data-repair-tabs] input[type="search"],
  [data-repair-tabs] input[type="text"]{
    width:100% !important;
    max-width:100% !important;
  }

  .repair-tabs .repair-search,
  #repair-tabs .repair-search,
  .repair-pricing .repair-search,
  .ths-repair .repair-search,
  .ths-repair-flow .repair-search,
  .product-cat-flow .repair-search,
  #product-cat-flow .repair-search,
  [data-repair-tabs] .repair-search,
  .repair-tabs .repair-search-row,
  #repair-tabs .repair-search-row,
  .repair-pricing .repair-search-row,
  .ths-repair .repair-search-row,
  .ths-repair-flow .repair-search-row,
  .product-cat-flow .repair-search-row,
  #product-cat-flow .repair-search-row,
  [data-repair-tabs] .repair-search-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    align-items:center !important;
  }

  .repair-tabs .repair-options,
  #repair-tabs .repair-options,
  .repair-pricing .repair-options,
  .ths-repair .repair-options,
  .ths-repair-flow .repair-options,
  .product-cat-flow .repair-options,
  #product-cat-flow .repair-options,
  [data-repair-tabs] .repair-options,
  .repair-tabs .repair-list,
  #repair-tabs .repair-list,
  .repair-pricing .repair-list,
  .ths-repair .repair-list,
  .ths-repair-flow .repair-list,
  .product-cat-flow .repair-list,
  #product-cat-flow .repair-list,
  [data-repair-tabs] .repair-list{
    width:100% !important;
    max-width:100% !important;
  }
}

/* =========================================================
   PUBLIC REPAIR PAGE — iPad/tablet search controls inside card
   Fix: keep AI search input, search button and reset button inside the
   repair pricing border on iPad/tablet instead of overflowing outside.
========================================================= */
@media (min-width: 721px) and (max-width: 1180px){
  /* Make the repair pricing block behave as one full-width card on iPad. */
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs]):has(input[placeholder*="AI Search"]),
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs]):has(input[placeholder*="Search device"]),
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs]):has(input[placeholder*="problem"]){
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:22px !important;
    border:1px solid rgba(30,64,175,.22) !important;
    border-radius:16px !important;
    background:#fff !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* If the inner flow/list already has its own border, keep it as a section,
     but do not let it define the full card width by itself. */
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs])
  :where(.repair-flow,.repair-final,.repair-list,.repair-options,.repair-grid,.ths-flow-grid,.flow-grid,.category-flow,.repair-card-list){
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* Search row: input + search button + reset button must stay inside the card. */
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs])
  :where(form,div,section):has(input[placeholder*="AI Search"]),
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs])
  :where(form,div,section):has(input[placeholder*="Search device"]){
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 56px 96px !important;
    gap:10px !important;
    align-items:center !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    margin:14px 0 16px !important;
  }

  /* Common explicit class names if present. */
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs])
  :where(.repair-search,.repair-search-row,.repair-ai-search,.repair-ai-row,.ths-repair-search,.ths-ai-search,.ai-search-row,.search-row,.searchbar,.search-bar){
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 56px 96px !important;
    gap:10px !important;
    align-items:center !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    margin:14px 0 16px !important;
  }

  /* Search input should never exceed the repair card width. */
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs])
  input[placeholder*="AI Search"],
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs])
  input[placeholder*="Search device"],
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs])
  input[type="search"]{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:48px !important;
    box-sizing:border-box !important;
  }

  /* Buttons in the repair search area. */
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs])
  :where(.repair-search,.repair-search-row,.repair-ai-search,.repair-ai-row,.ths-repair-search,.ths-ai-search,.ai-search-row,.search-row,.searchbar,.search-bar,form:has(input[placeholder*="AI Search"]),div:has(input[placeholder*="AI Search"]))
  button{
    width:100% !important;
    min-width:0 !important;
    height:48px !important;
    margin:0 !important;
    padding:0 14px !important;
    white-space:nowrap !important;
    box-sizing:border-box !important;
  }

  /* If the search button has only an icon, keep it square. */
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs])
  :where(button[type="submit"],button[aria-label*="Search"],button[title*="Search"],.search-btn,.repair-search-btn,.ai-search-btn){
    min-width:48px !important;
  }

  /* Prevent any single child from escaping the bordered card. */
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs]) > *,
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs]) .entry-content > *{
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* Smaller iPad portrait / narrow tablet: keep Search + Reset inside the same bordered card.
   Fix: the old 1fr + 56px grid only had room for one button, so Reset overflowed. */
@media (min-width: 721px) and (max-width: 900px){
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs])
  :where(form,div,section):has(input[placeholder*="AI Search"]),
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs])
  :where(form,div,section):has(input[placeholder*="Search device"]),
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs])
  :where(.repair-search,.repair-search-row,.repair-ai-search,.repair-ai-row,.ths-repair-search,.ths-ai-search,.ai-search-row,.search-row,.searchbar,.search-bar){
    grid-template-columns:minmax(0,1fr) auto auto !important;
    gap:10px !important;
    align-items:center !important;
    overflow:hidden !important;
  }

  /* Let action buttons size to their content instead of forcing a full-width grid cell. */
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs])
  :where(.repair-search,.repair-search-row,.repair-ai-search,.repair-ai-row,.ths-repair-search,.ths-ai-search,.ai-search-row,.search-row,.searchbar,.search-bar,form:has(input[placeholder*="AI Search"]),div:has(input[placeholder*="AI Search"]))
  button{
    width:auto !important;
    min-width:52px !important;
    max-width:100% !important;
    padding-left:14px !important;
    padding-right:14px !important;
    white-space:nowrap !important;
  }

  /* Reset must stay on the same row on iPad, not drop outside/under the border. */
  :where(.repair-tabs,#repair-tabs,.repair-pricing,.ths-repair,.ths-repair-flow,.product-cat-flow,#product-cat-flow,[data-repair-tabs])
  :where(.repair-search,.repair-search-row,.repair-ai-search,.repair-ai-row,.ths-repair-search,.ths-ai-search,.ai-search-row,.search-row,.searchbar,.search-bar,form:has(input[placeholder*="AI Search"]),div:has(input[placeholder*="AI Search"]))
  button:last-child{
    grid-column:auto !important;
  }
}



/* =========================================================
   PUBLIC REPAIR PAGE — Bootstrap parent layout one-column fix
   Root cause from DevTools:
   #content > .container > .row is split into:
   .col-lg-9.col-md-8.mt-5  +  #sidebar.col-lg-3.col-md-4

   On /repair, force that parent Bootstrap layout to one full-width column.
   This fixes the outer repair border because #repair-flow was only full
   inside the left 8/9-column content area.
========================================================= */

body:has(#repair-flow.ths-repair) #content > .container{
  width:100% !important;
  max-width:100% !important;
  padding-left:12px !important;
  padding-right:12px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

body:has(#repair-flow.ths-repair) #content > .container > .row{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}

body:has(#repair-flow.ths-repair) #content > .container > .row > :where(.col-lg-9,.col-md-8,.col-12,.mt-5),
body:has(#repair-flow.ths-repair) #post-3344,
body:has(#repair-flow.ths-repair) .post-content{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;
}

body:has(#repair-flow.ths-repair) #content > .container > .row > #sidebar,
body:has(#repair-flow.ths-repair) #content > .container > .row > .col-lg-3,
body:has(#repair-flow.ths-repair) #content > .container > .row > .col-md-4{
  display:none !important;
  width:0 !important;
  max-width:0 !important;
  flex:0 0 0 !important;
  padding:0 !important;
  margin:0 !important;
}

body:has(#repair-flow.ths-repair) #repair-flow.ths-repair{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}

/* Keep the search/actions inside the now-full parent border */
body:has(#repair-flow.ths-repair) #repair-flow.ths-repair .ths-repair__actions{
  width:100% !important;
  max-width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:12px !important;
  align-items:center !important;
  box-sizing:border-box !important;
}

body:has(#repair-flow.ths-repair) #repair-flow.ths-repair .ths-repair__search{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 56px !important;
  gap:8px !important;
  align-items:center !important;
  box-sizing:border-box !important;
}

body:has(#repair-flow.ths-repair) #repair-flow.ths-repair .ths-search-wrap,
body:has(#repair-flow.ths-repair) #repair-flow.ths-repair #rf-ai-search{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

body:has(#repair-flow.ths-repair) #repair-flow.ths-repair #rf-btn-reset{
  white-space:nowrap !important;
  min-width:96px !important;
  width:auto !important;
}

/* Tablet/iPad */
@media (min-width:721px) and (max-width:1024px){
  body:has(#repair-flow.ths-repair) #content > .container{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  body:has(#repair-flow.ths-repair) #repair-flow.ths-repair{
    width:100% !important;
    max-width:100% !important;
  }

  body:has(#repair-flow.ths-repair) #repair-flow.ths-repair .ths-repair__grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    width:100% !important;
    max-width:100% !important;
  }
}

/* Mobile keeps existing stacked behaviour */
@media (max-width:720px){
  body:has(#repair-flow.ths-repair) #content > .container{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  body:has(#repair-flow.ths-repair) #repair-flow.ths-repair .ths-repair__actions{
    grid-template-columns:1fr !important;
  }

  body:has(#repair-flow.ths-repair) #repair-flow.ths-repair #rf-btn-reset{
    width:100% !important;
  }
}

.ai-info-note{margin:0 0 10px;padding:10px 12px;border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:12px;font-weight:800;font-size:13px;}

/* AI Assistant - Customer Assist Primary Actions */
.ai-ca-page{gap:16px}.ai-ca-flow{background:linear-gradient(135deg,#ffffff 0%,#f8fafc 65%,#ecfeff 100%)}.ai-ca-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.ai-ca-steps div{border:1px solid #e2e8f0;background:#fff;border-radius:16px;padding:14px;box-shadow:0 8px 22px rgba(15,23,42,.04)}.ai-ca-steps b{width:30px;height:30px;border-radius:999px;background:#0284c7;color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-bottom:9px}.ai-ca-steps span{display:block;font-weight:950;color:#0f172a}.ai-ca-steps small{display:block;color:#64748b;line-height:1.4;margin-top:5px}.ai-ca-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.ai-ca-action-card{border:1px solid #e2e8f0;background:#fff;border-radius:18px;padding:15px;box-shadow:0 8px 22px rgba(15,23,42,.05)}.ai-ca-action-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.ai-ca-action-card h3{margin:0;font-size:18px}.ai-ca-action-card p{color:#475569;line-height:1.45;margin:0 0 12px}.ai-ca-mini-block{border:1px solid #dbeafe;background:#f8fafc;border-radius:16px;padding:12px}.ai-ca-mini-block b{display:block;margin-bottom:7px}.ai-ca-mini-block pre{white-space:pre-wrap;margin:0;font-family:inherit;font-size:13px;color:#0f172a;line-height:1.5}.ai-ca-next{margin-top:11px;color:#334155;font-size:13px;line-height:1.45}.ai-ca-test-note p{margin:8px 0 0;color:#475569;line-height:1.5}@media(max-width:1100px){.ai-ca-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-ca-action-grid{grid-template-columns:1fr}}@media(max-width:700px){.ai-ca-steps{grid-template-columns:1fr}.ai-ca-action-card__top{align-items:flex-start;flex-direction:column}}

/* AI Customer Assist — Behavior Intelligence MVP */
.ai-ca-muted{display:block;margin-top:4px;color:#64748b;font-size:12px;line-height:1.35;max-width:360px;white-space:normal}.ai-ca-page code{font-size:12px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;padding:2px 6px}.ai-ca-page .ai-bi-table td{vertical-align:top}.ai-tone-warn{border-color:#fde68a}.ai-tone-good{border-color:#bbf7d0}.ai-pill.waiting-admin-rule,.ai-pill.pending{background:#fff7ed;color:#9a3412;border-color:#fed7aa}.ai-pill.matched-logic,.ai-pill.high{background:#ecfdf5;color:#047857;border-color:#bbf7d0}.ai-pill.waiting-more-signals,.ai-pill.medium{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}.ai-pill.low{background:#f8fafc;color:#475569;border-color:#e2e8f0}

/* =========================
   Repair Tools page
========================= */
.repair-tools-page{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.repair-tools-header,
.repair-tools-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}

.repair-tools-header{
  padding:20px 22px;
}

.repair-tools-header h2{
  margin:0 0 6px;
  font-size:20px;
  color:#0f172a;
}

.repair-tools-header p{
  margin:0;
  color:#64748b;
  line-height:1.45;
}

.repair-tools-card{
  overflow:hidden;
}

.repair-tools-tabs{
  display:flex;
  gap:8px;
  padding:14px 16px 0;
  border-bottom:1px solid #e5e7eb;
  background:#f8fafc;
}

.repair-tools-tab{
  border:1px solid transparent;
  border-bottom:none;
  background:transparent;
  color:#475569;
  padding:10px 16px;
  border-radius:12px 12px 0 0;
  font-weight:700;
  cursor:pointer;
}

.repair-tools-tab:hover{
  background:#eef6ff;
  color:#0f172a;
}

.repair-tools-tab.is-active{
  background:#fff;
  color:#0f172a;
  border-color:#e5e7eb;
  box-shadow:0 -1px 0 #fff inset;
}

.repair-tools-panel{
  display:none;
  padding:18px;
}

.repair-tools-panel.is-active{
  display:block;
}

.repair-tools-device-layout{
  display:grid;
  grid-template-columns:minmax(260px, 360px) 1fr;
  gap:18px;
}

.repair-tools-device-main,
.repair-tools-device-info,
.repair-tools-placeholder{
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  padding:16px;
}

.repair-tools-section-title{
  font-size:16px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:10px;
}

.repair-tools-status{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  margin-bottom:14px;
}

.repair-tools-status--idle{ background:#eef2ff; color:#3730a3; }
.repair-tools-status--loading{ background:#fff7ed; color:#9a3412; }
.repair-tools-status--ok{ background:#dcfce7; color:#166534; }
.repair-tools-status--warn{ background:#fef3c7; color:#92400e; }

.repair-tools-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.repair-tools-help{
  margin:0;
  color:#64748b;
  line-height:1.45;
}

.repair-tools-help code{
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:6px;
  padding:1px 5px;
  color:#0f172a;
}

.repair-tools-device-info{
  display:grid;
  grid-template-columns:repeat(2, minmax(220px, 1fr));
  gap:10px;
}

.repair-tools-info-row{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  background:#f8fafc;
}

.repair-tools-info-label{
  font-size:12px;
  font-weight:800;
  color:#64748b;
  margin-bottom:5px;
}

.repair-tools-info-value{
  min-height:20px;
  font-size:14px;
  font-weight:700;
  color:#0f172a;
  word-break:break-word;
}

.repair-tools-placeholder h3{
  margin:0 0 8px;
  color:#0f172a;
}

.repair-tools-placeholder p{
  margin:0;
  color:#64748b;
}

@media (max-width: 900px){
  .repair-tools-device-layout,
  .repair-tools-device-info{
    grid-template-columns:1fr;
  }
  .repair-tools-tabs{
    overflow:auto;
  }
  .repair-tools-tab{
    white-space:nowrap;
  }
}

/* Repair Tools - independent tool launcher + modal */
.repair-tools-intro-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:start;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  padding:18px;
}

.repair-tools-intro-text{
  margin:0 0 12px;
  color:#475569;
  line-height:1.5;
}

.repair-tools-feature-list{
  margin:0;
  padding-left:20px;
  color:#475569;
  line-height:1.65;
}

.repair-tools-feature-list li + li{
  margin-top:4px;
}

.repair-tools-intro-action{
  display:flex;
  justify-content:flex-end;
  min-width:160px;
}

.repair-tools-open-btn{
  min-width:140px;
  min-height:42px;
  font-weight:800;
}

.repair-tools-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
}

.repair-tools-modal.is-open{
  display:block;
}

.repair-tools-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.36);
}

.repair-tools-modal__dialog{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:min(1400px, 80vw);
  height:min(780px, 86vh);
  max-width:calc(100vw - 12px);
  max-height:calc(100vh - 6px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #dbe4ef;
  border-radius:20px;
  box-shadow:0 28px 80px rgba(15,23,42,.28);
}

.repair-tools-modal__topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:42px;
  padding:7px 18px;
  color:#fff;
  background:linear-gradient(135deg, #0d6efd, #0099ff);
}

.repair-tools-modal__topbar h3{
  margin:0;
  font-size:18px;
  line-height:1.1;
  font-weight:900;
}

.repair-tools-modal__topbar p{
  display:none;
  margin:0;
  opacity:.94;
  line-height:1.4;
  font-size:16px;
}

.repair-tools-modal__close{
  width:34px;
  height:34px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.repair-tools-modal__close:hover{
  background:rgba(255,255,255,.28);
}

.repair-tools-modal__body{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  padding:18px;
  display:grid;
  grid-template-columns:minmax(350px, 420px) 1fr;
  gap:18px;
  background:#f8fafc;
}

.repair-tools-device-info--modal{
  background:#fff;
  gap:14px;
  align-content:start;
}

#repair-tools-device-info-modal .repair-tools-device-main,
#repair-tools-device-info-modal .repair-tools-device-info{
  border-radius:18px;
  padding:18px;
}

#repair-tools-device-info-modal .repair-tools-section-title{
  font-size:19px;
  margin-bottom:10px;
}

#repair-tools-device-info-modal .repair-tools-status{
  min-height:36px;
  padding:8px 14px;
  font-size:15px;
  margin-bottom:16px;
}

#repair-tools-device-info-modal .repair-tools-actions{
  gap:12px;
  margin-bottom:18px;
}

#repair-tools-device-info-modal .repair-tools-actions .btn{
  min-height:44px;
  padding:0 18px;
  font-size:15px;
  font-weight:800;
}

#repair-tools-device-info-modal .repair-tools-help{
  font-size:16px;
  line-height:1.45;
}

#repair-tools-device-info-modal .repair-tools-info-row{
  min-height:72px;
  border-radius:14px;
  padding:12px 15px;
}

#repair-tools-device-info-modal .repair-tools-info-label{
  font-size:13px;
  margin-bottom:8px;
  letter-spacing:.01em;
}

#repair-tools-device-info-modal .repair-tools-info-value{
  min-height:24px;
  font-size:18px;
  line-height:1.25;
}

#repair-tools-device-info-modal [data-device-field="imei"],
#repair-tools-device-info-modal [data-device-field="tac"],
#repair-tools-device-info-modal [data-device-field="udid"]{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:17px;
}

@media (max-width: 900px){
  .repair-tools-intro-card,
  .repair-tools-modal__body{
    grid-template-columns:1fr;
  }
  .repair-tools-intro-action{
    justify-content:flex-start;
  }
}

/* Repair Tools - app-like minimize/taskbar behavior */
.repair-tools-modal.is-minimized{
  display:none;
}

.repair-tools-modal__window-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.repair-tools-modal__minimize,
.repair-tools-modal__close{
  width:30px;
  height:30px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.repair-tools-modal__minimize{
  font-size:22px;
  font-weight:900;
  padding-bottom:4px;
}

.repair-tools-modal__minimize:hover,
.repair-tools-modal__close:hover{
  background:rgba(255,255,255,.28);
}

.repair-tools-taskbar-btn{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:100000;
  display:none;
  align-items:center;
  gap:10px;
  min-width:190px;
  height:46px;
  padding:0 16px;
  border:1px solid rgba(13,110,253,.35);
  border-radius:999px;
  background:linear-gradient(135deg, #0d6efd, #0099ff);
  color:#fff;
  font-weight:800;
  box-shadow:0 14px 34px rgba(15,23,42,.28);
  cursor:pointer;
}

.repair-tools-taskbar-btn.is-visible{
  display:inline-flex;
}

.repair-tools-taskbar-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 42px rgba(15,23,42,.32);
}

.repair-tools-taskbar-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.18);
  flex:0 0 auto;
}


/* Repair Tools Device Info - Pro compact modal v0.9 */
#repair-tools-device-info-modal .repair-tools-modal__topbar p{
  display:none !important;
}
#repair-tools-device-info-modal .repair-tools-device-info--modal{
  grid-template-columns:repeat(2, minmax(250px, 1fr));
}
#repair-tools-device-info-modal .repair-tools-modal__body{
  max-height:none;
}
#repair-tools-device-info-modal .repair-tools-device-main,
#repair-tools-device-info-modal .repair-tools-device-info{
  overflow:hidden;
  min-height:0;
}
#repair-tools-device-info-modal .repair-tools-device-main{
  height:100%;
}
#repair-tools-device-info-modal .repair-tools-device-info{
  height:100%;
}
@media (max-height: 760px){
  #repair-tools-device-info-modal .repair-tools-modal__dialog{
    height:min(720px, 92vh);
  }
  #repair-tools-device-info-modal .repair-tools-modal__body{
    padding:14px;
    gap:14px;
  }
  #repair-tools-device-info-modal .repair-tools-info-row{
    min-height:64px;
    padding:10px 13px;
  }
  #repair-tools-device-info-modal .repair-tools-help{
    font-size:14px;
    line-height:1.35;
  }
}

/* =========================
   Payroll-lite Employee Tab
========================= */
.rbac-modal__dialog.rbac-modal__dialog--payroll{
  width:min(1120px, calc(100vw - 40px));
  max-height:calc(100vh - 36px);
  margin:18px auto;
  display:flex;
  flex-direction:column;
}
.payroll-modal-body{
  overflow:auto;
  padding:18px 22px 24px;
}
.payroll-summary-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.payroll-summary-card{
  border:1px solid #e5edf6;
  background:#f8fbff;
  border-radius:16px;
  padding:12px 14px;
  min-height:70px;
}
.payroll-summary-card b{
  display:block;
  font-size:12px;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:6px;
}
.payroll-summary-card span{
  display:block;
  font-weight:800;
  color:#0f172a;
  line-height:1.25;
}
.payroll-tabs{
  display:flex;
  gap:8px;
  overflow:auto;
  border-bottom:1px solid #e5edf6;
  margin:0 -2px 18px;
  padding:0 2px;
}
.payroll-tab{
  appearance:none;
  border:0;
  background:transparent;
  color:#475569;
  padding:12px 12px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  border-bottom:3px solid transparent;
}
.payroll-tab.is-active{
  color:#0f766e;
  border-bottom-color:#0f766e;
}
.payroll-panel{
  display:none;
}
.payroll-panel.is-active{
  display:block;
}
.payroll-note{
  border:1px solid #dbeafe;
  background:#eff6ff;
  color:#1e3a8a;
  border-radius:14px;
  padding:10px 12px;
  font-size:13px;
  font-weight:700;
  margin-bottom:14px;
}
.payroll-note--warn{
  border-color:#fde68a;
  background:#fffbeb;
  color:#92400e;
}
.payroll-check{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding-top:26px;
}
.payroll-check input[type="checkbox"]{
  width:17px;
  height:17px;
  accent-color:#0f766e;
}
.payroll-input-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.payroll-input-row .input{
  flex:1 1 auto;
}
.payroll-history-wrap{
  overflow:auto;
  border:1px solid #e5edf6;
  border-radius:14px;
}
.payroll-history-table{
  min-width:760px;
}
.payroll-actions{
  justify-content:flex-end;
  border-top:1px solid #e5edf6;
  margin:18px -22px -24px;
  padding:16px 22px;
  background:#fbfdff;
}
@media (max-width: 900px){
  .payroll-summary-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .rbac-modal__dialog.rbac-modal__dialog--payroll{ width:calc(100vw - 18px); margin:9px auto; }
}
@media (max-width: 560px){
  .payroll-summary-grid{ grid-template-columns:1fr; }
}

/* Payroll Phase 1 - visible Users entry */
.payroll-open-btn{
  border-color:#bfdbfe;
  background:#eff6ff;
  color:#1d4ed8;
  font-weight:800;
  padding:8px 12px;
  border-radius:10px;
}
.payroll-open-btn:hover{
  background:#dbeafe;
}

/* Payroll phase 1.1: pro template-first settings */
.payroll-header-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.payroll-open-btn{white-space:nowrap}
.payroll-settings-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:18px;align-items:start}
.payroll-settings-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.payroll-settings-card h4,.payroll-template-list h4{margin:0 0 12px;font-size:16px;color:#0f172a}
.payroll-template-list{margin-top:18px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(15,23,42,.05)}
.payroll-template-editor .rbac-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.input.is-readonly{background:#f8fafc;color:#64748b;cursor:not-allowed}
.btn--danger{border-color:#fecaca;color:#b91c1c;background:#fff5f5}
.btn--danger:hover{background:#fee2e2}
@media (max-width:1100px){.payroll-settings-grid{grid-template-columns:1fr}.payroll-template-editor .rbac-form-grid{grid-template-columns:1fr}}

/* Payroll MVP calculator sandbox */
.payroll-sandbox-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.payroll-sandbox-head .payroll-note{margin:6px 0 0}
.payroll-sandbox-form{margin-top:12px}
.payroll-sandbox-result{margin-top:16px;border-top:1px solid #e5edf6;padding-top:14px}
.payroll-empty-state{border:1px dashed #cbd5e1;background:#f8fafc;color:#64748b;border-radius:14px;padding:16px;font-weight:700;text-align:center}
.payroll-calc-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.payroll-calc-meta{display:flex;gap:10px;flex-wrap:wrap;color:#64748b;font-size:12px;font-weight:700;margin:10px 0 12px}
.payroll-calc-meta span{background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;padding:6px 10px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.payroll-calc-alert{border-radius:14px;padding:10px 12px;font-size:13px;font-weight:800;margin:10px 0}
.payroll-calc-alert.is-warn{border:1px solid #fde68a;background:#fffbeb;color:#92400e}
.payroll-calc-alert.is-error{border:1px solid #fecaca;background:#fef2f2;color:#991b1b}
.payroll-audit-table pre{margin:0;white-space:pre-wrap;word-break:break-word;font-size:11px;line-height:1.35;color:#334155;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px;max-width:360px}
.payroll-step-status{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900;background:#e2e8f0;color:#334155;text-transform:uppercase}
.payroll-step-status.success{background:#dcfce7;color:#166534}
.payroll-step-status.warning{background:#fef3c7;color:#92400e}
.payroll-step-status.error,.payroll-step-status.fatal{background:#fee2e2;color:#991b1b}
.payroll-step-status.skipped{background:#f1f5f9;color:#64748b}
@media (max-width:900px){.payroll-sandbox-head{flex-direction:column}.payroll-calc-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.payroll-calc-summary{grid-template-columns:1fr}}

/* Payroll Runs / Payslip Register */
.payroll-runs-dialog{max-width:1280px}
.payroll-run-create-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.payroll-runs-table th,.payroll-runs-table td,.payroll-payslip-table th,.payroll-payslip-table td{white-space:nowrap;vertical-align:top}
.payroll-run-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:260px}
.payroll-runs-table .btn,.payroll-payslip-table .btn{padding:7px 10px;font-size:12px}
@media (max-width:1100px){.payroll-run-create-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.payroll-run-create-grid{grid-template-columns:1fr}.payroll-run-actions{min-width:180px}}

/* Payroll modal fullscreen workspace patch */
.rbac-modal__dialog.rbac-modal__dialog--payroll,
.rbac-modal__dialog.rbac-modal__dialog--payroll.payroll-runs-dialog{
  width:calc(100vw - 16px) !important;
  max-width:none !important;
  height:calc(100vh - 16px) !important;
  max-height:calc(100vh - 16px) !important;
  margin:8px auto !important;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.rbac-modal__dialog.rbac-modal__dialog--payroll .rbac-modal__head{
  flex:0 0 auto;
}
.rbac-modal__dialog.rbac-modal__dialog--payroll .payroll-modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:18px 22px 24px;
}
.rbac-modal__dialog.rbac-modal__dialog--payroll .rbac-table-wrap,
.rbac-modal__dialog.rbac-modal__dialog--payroll .payroll-history-wrap{
  max-width:100%;
  overflow:auto;
}
@media (max-width:720px){
  .rbac-modal__dialog.rbac-modal__dialog--payroll,
  .rbac-modal__dialog.rbac-modal__dialog--payroll.payroll-runs-dialog{
    width:100vw !important;
    height:100vh !important;
    max-height:100vh !important;
    margin:0 !important;
    border-radius:0;
  }
}

/* =========================
   Manager > Accounting UI
========================= */
.acc-page{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:calc(100vh - 110px);
}
.acc-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.acc-head h2{margin:0 0 4px;font-size:22px;color:#0f172a;}
.acc-head p{margin:0;color:#64748b;font-size:13px;}
.acc-tabs{
  display:flex;
  gap:8px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:8px;
  width:max-content;
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}
.acc-tab{
  border:0;
  background:#f1f5f9;
  color:#334155;
  border-radius:10px;
  padding:9px 16px;
  font-weight:700;
  cursor:pointer;
}
.acc-tab.is-active{
  background:#0d6efd;
  color:#fff;
}


/* Accounting page: keep Manager > Accounting header and tabs height consistent across sub-tabs.
   Kept in sync with the shared .topbar height (54px) above -- this override predates the
   shared flex-shrink:0 fix (it was Accounting's own workaround for the same shrink bug) and
   is now mostly redundant, but left in place with the current value so Accounting doesn't
   end up taller than every other page. */
#view-app:has(.content .acc-page) .topbar{
  height:54px;
  min-height:54px;
  padding:0 18px;
  flex:0 0 54px;
  flex-wrap:nowrap;
  box-sizing:border-box;
}
#view-app:has(.content .acc-page) .topbar > *{
  min-height:0;
}
#view-app:has(.content .acc-page) .content{
  padding-top:14px;
}
.acc-page{
  gap:12px;
}
.acc-page .acc-tabs{
  height:48px;
  min-height:48px;
  max-height:48px;
  flex:0 0 48px;
  align-items:center;
  box-sizing:border-box;
  margin:0;
}
.acc-page .acc-tab{
  height:32px;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.acc-page [data-acc-panel][hidden]{
  display:none !important;
}
.acc-panel{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.acc-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.acc-toolbar--wrap{flex-wrap:wrap;}
.acc-toolbar .input{min-width:150px;}
.acc-toolbar .acc-date-input{min-width:145px;}
.acc-table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
}
.acc-table{
  min-width:1180px;
  margin:0;
}
.acc-sales-table{min-width:1320px;}
.acc-expense-table{min-width:2050px;}

/* Accounting Sales alignment: keep headers, body and totals perfectly aligned */
.acc-sales-table{
  table-layout:fixed;
}
.acc-sales-table th,
.acc-sales-table td{
  padding:12px 12px;
}
.acc-sales-table th.num,
.acc-sales-table td.num,
.acc-sales-table tfoot th.num{
  text-align:right !important;
  font-variant-numeric:tabular-nums;
}
.acc-sales-table th.text,
.acc-sales-table td:first-child,
.acc-sales-table tfoot th.text{
  text-align:left !important;
}
.acc-sales-table thead th{
  vertical-align:bottom;
  line-height:1.2;
}
.acc-sales-table tfoot th{
  vertical-align:middle;
}
.acc-sales-table th:nth-child(1),
.acc-sales-table td:nth-child(1){width:120px;}
.acc-sales-table th:nth-child(2),
.acc-sales-table td:nth-child(2){width:82px;}
.acc-sales-table th:nth-child(3),
.acc-sales-table td:nth-child(3),
.acc-sales-table th:nth-child(8),
.acc-sales-table td:nth-child(8),
.acc-sales-table th:nth-child(9),
.acc-sales-table td:nth-child(9),
.acc-sales-table th:nth-child(10),
.acc-sales-table td:nth-child(10){width:135px;}
.acc-sales-table th:nth-child(4),
.acc-sales-table td:nth-child(4),
.acc-sales-table th:nth-child(5),
.acc-sales-table td:nth-child(5),
.acc-sales-table th:nth-child(7),
.acc-sales-table td:nth-child(7),
.acc-sales-table th:nth-child(11),
.acc-sales-table td:nth-child(11),
.acc-sales-table th:nth-child(12),
.acc-sales-table td:nth-child(12),
.acc-sales-table th:nth-child(13),
.acc-sales-table td:nth-child(13){width:112px;}
.acc-sales-table th:nth-child(6),
.acc-sales-table td:nth-child(6){width:145px;}


.acc-expense-table th,
.acc-expense-table td{
  padding:11px 10px;
}
.acc-expense-table th.num,
.acc-expense-table td.num{
  text-align:right!important;
  font-variant-numeric:tabular-nums;
}
.acc-expense-table thead th{
  vertical-align:bottom;
  line-height:1.2;
}
.acc-expense-table th:nth-child(1),
.acc-expense-table td:nth-child(1),
.acc-expense-table th:nth-child(3),
.acc-expense-table td:nth-child(3),
.acc-expense-table th:nth-child(4),
.acc-expense-table td:nth-child(4),
.acc-expense-table th:nth-child(5),
.acc-expense-table td:nth-child(5){width:110px;}
.acc-expense-table th:nth-child(2),
.acc-expense-table td:nth-child(2){width:150px;}
.acc-expense-table th:nth-child(6),
.acc-expense-table td:nth-child(6),
.acc-expense-table th:nth-child(7),
.acc-expense-table td:nth-child(7),
.acc-expense-table th:nth-child(10),
.acc-expense-table td:nth-child(10),
.acc-expense-table th:nth-child(13),
.acc-expense-table td:nth-child(13),
.acc-expense-table th:nth-child(14),
.acc-expense-table td:nth-child(14),
.acc-expense-table th:nth-child(15),
.acc-expense-table td:nth-child(15),
.acc-expense-table th:nth-child(16),
.acc-expense-table td:nth-child(16),
.acc-expense-table th:nth-child(17),
.acc-expense-table td:nth-child(17){width:130px;}
.acc-expense-table th:nth-child(8),
.acc-expense-table td:nth-child(8){width:160px;}
.acc-expense-table th:nth-child(9),
.acc-expense-table td:nth-child(9){width:220px;}
.acc-expense-table th:nth-child(11),
.acc-expense-table td:nth-child(11),
.acc-expense-table th:nth-child(12),
.acc-expense-table td:nth-child(12){width:105px;}

.acc-table th,
.acc-table td{
  white-space:nowrap;
  vertical-align:middle;
}
.acc-table .num{text-align:right;font-variant-numeric:tabular-nums;}
.acc-table tfoot th{
  background:#f8fafc;
  border-top:1px solid #e5e7eb;
  font-weight:800;
}
.acc-empty{
  color:#64748b;
  text-align:center;
  padding:24px 12px!important;
  white-space:normal!important;
}
.acc-badge,
.acc-status{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:3px 9px;
  font-size:12px;
  font-weight:700;
}
.acc-badge.is-system{background:#e0f2fe;color:#075985;}
.acc-badge.is-manual{background:#ecfdf5;color:#047857;}
.acc-status{background:#f1f5f9;color:#475569;}
.acc-status.is-paid{background:#dcfce7;color:#166534;}
.acc-status.is-unpaid{background:#fef3c7;color:#92400e;}
.acc-status.is-cancelled{background:#fee2e2;color:#991b1b;}
/* Accounting Expense Action dropdown - match system teal action button style */
.acc-action{
  min-width:110px;
  height:36px;
  padding:4px 32px 4px 14px;
  border:1px solid #12a89a !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,#14b8a6,#10b3a3) !important;
  color:#fff !important;
  font-weight:900 !important;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(20,184,166,.22) !important;
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(135deg,#14b8a6,#10b3a3),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat,no-repeat !important;
  background-position:center,right 12px center !important;
  background-size:100% 100%,12px 12px !important;
}
.acc-action:hover{
  background-image:
    linear-gradient(135deg,#12c7b5,#0fa99b),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5z'/%3E%3C/svg%3E") !important;
  border-color:#0fa99b !important;
  transform:translateY(-1px);
}
.acc-action:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(20,184,166,.22),0 8px 18px rgba(20,184,166,.22) !important;
}
.acc-action option{
  background:#fff;
  color:#0f172a;
  font-weight:700;
}
.acc-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.52);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.acc-modal{
  width:min(980px,96vw);
  max-height:92vh;
  overflow:auto;
  background:#fff;
  border-radius:18px;
  border:1px solid #e5e7eb;
  box-shadow:0 24px 80px rgba(15,23,42,.25);
}
.acc-modal__head,
.acc-modal__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid #e5e7eb;
}
.acc-modal__foot{
  border-top:1px solid #e5e7eb;
  border-bottom:0;
  justify-content:flex-end;
}
.acc-modal__head h3{margin:0 0 3px;font-size:20px;color:#0f172a;}
.acc-modal__head p{margin:0;color:#64748b;font-size:13px;}

.acc-modal--expense{width:min(1180px,96vw);}

.acc-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:18px;
}
.acc-form-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:#334155;}
.acc-form-grid textarea{resize:vertical;min-height:72px;}
.acc-form-grid.acc-form-grid--expense{grid-template-columns:repeat(3,minmax(0,1fr));}
.acc-span-2{grid-column:1 / -1;}
@media (max-width: 760px){
  .acc-tabs{width:100%;}
  .acc-tab{flex:1;}
  .acc-toolbar .input{min-width:100%;}
  .acc-toolbar .btn{width:100%;}
  .acc-form-grid,
  .acc-form-grid--expense{grid-template-columns:1fr;}
  .acc-span-2{grid-column:auto;}
}

/* Accounting Expense sub tabs + Subscription UI */
.acc-subtabs{
  display:flex;
  gap:8px;
  align-items:center;
  margin:0 0 12px;
  padding:6px;
  width:max-content;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:12px;
}
.acc-subtab{
  border:0;
  background:transparent;
  color:#334155;
  border-radius:9px;
  padding:8px 14px;
  font-weight:800;
  cursor:pointer;
}
.acc-subtab.is-active{
  background:#0d6efd;
  color:#fff;
  box-shadow:0 8px 18px rgba(13,110,253,.20);
}
.acc-note-box{
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid #bfdbfe;
  border-radius:12px;
  background:#eff6ff;
  color:#1e3a8a;
  font-size:13px;
  font-weight:700;
}
.acc-subscription-table{
  min-width:1580px;
  table-layout:fixed;
}
.acc-subscription-table th,
.acc-subscription-table td{
  padding:11px 10px;
}
.acc-subscription-table th.num,
.acc-subscription-table td.num{
  text-align:right !important;
  font-variant-numeric:tabular-nums;
}
.acc-subscription-table th:nth-child(1),
.acc-subscription-table td:nth-child(1){width:190px;}
.acc-subscription-table th:nth-child(2),
.acc-subscription-table td:nth-child(2){width:135px;}
.acc-subscription-table th:nth-child(3),
.acc-subscription-table td:nth-child(3){width:150px;}
.acc-subscription-table th:nth-child(4),
.acc-subscription-table td:nth-child(4){width:175px;}
.acc-subscription-table th:nth-child(5),
.acc-subscription-table td:nth-child(5){width:115px;}
.acc-subscription-table th:nth-child(6),
.acc-subscription-table td:nth-child(6),
.acc-subscription-table th:nth-child(7),
.acc-subscription-table td:nth-child(7),
.acc-subscription-table th:nth-child(8),
.acc-subscription-table td:nth-child(8){width:120px;}
.acc-subscription-table th:nth-child(9),
.acc-subscription-table td:nth-child(9),
.acc-subscription-table th:nth-child(10),
.acc-subscription-table td:nth-child(10){width:110px;}
.acc-subscription-table th:nth-child(11),
.acc-subscription-table td:nth-child(11){width:150px;}
.acc-subscription-table th:nth-child(12),
.acc-subscription-table td:nth-child(12){width:110px;}
.acc-subscription-table th:nth-child(13),
.acc-subscription-table td:nth-child(13){width:130px;}
.acc-status.is-active{background:#dcfce7;color:#166534;}
.acc-status.is-paused{background:#fef3c7;color:#92400e;}
.acc-status.is-ended{background:#e2e8f0;color:#475569;}
@media (max-width: 760px){
  .acc-subtabs{width:100%;}
  .acc-subtab{flex:1;}
}

/* Accounting pagination */
.acc-pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 4px 0;
  color:#334155;
  font-size:13px;
}
.acc-pager__controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.acc-page-size{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
}
.acc-page-size .input{
  width:82px;
  min-width:82px;
  height:34px;
}
.acc-page-count{
  min-width:105px;
  text-align:center;
  color:#475569;
}
.acc-pager .btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
@media (max-width: 720px){
  .acc-pager{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* Accounting Cash Flow v1 */
.acc-summary-cards{
  display:grid;
  grid-template-columns:repeat(6, minmax(140px, 1fr));
  gap:12px;
  margin:12px 0;
}
.acc-summary-card{
  border:1px solid #dbe3ef;
  border-radius:14px;
  background:#fff;
  padding:13px 14px;
  box-shadow:0 8px 22px rgba(15,23,42,.05);
}
.acc-summary-card span{
  display:block;
  color:#64748b;
  font-size:12px;
  font-weight:700;
  margin-bottom:6px;
}
.acc-summary-card b{
  display:block;
  color:#0f172a;
  font-size:18px;
  line-height:1.2;
}
.acc-summary-card.is-positive b,
.acc-table .is-positive{color:#15803d;font-weight:800;}
.acc-summary-card.is-negative b,
.acc-table .is-negative{color:#b91c1c;font-weight:800;}
.acc-cashflow-table{min-width:1180px;table-layout:fixed;}
.acc-cashflow-table th:nth-child(1),
.acc-cashflow-table td:nth-child(1){width:130px;}
.acc-cashflow-table th:nth-child(2),
.acc-cashflow-table td:nth-child(2){width:170px;}
.acc-cashflow-table th:nth-child(3),
.acc-cashflow-table td:nth-child(3),
.acc-cashflow-table th:nth-child(4),
.acc-cashflow-table td:nth-child(4),
.acc-cashflow-table th:nth-child(5),
.acc-cashflow-table td:nth-child(5),
.acc-cashflow-table th:nth-child(6),
.acc-cashflow-table td:nth-child(6),
.acc-cashflow-table th:nth-child(7),
.acc-cashflow-table td:nth-child(7),
.acc-cashflow-table th:nth-child(8),
.acc-cashflow-table td:nth-child(8){width:130px;}
@media (max-width: 1100px){
  .acc-summary-cards{grid-template-columns:repeat(3, minmax(140px, 1fr));}
}
@media (max-width: 680px){
  .acc-summary-cards{grid-template-columns:1fr;}
}

/* Accounting Cash Flow polish: cards, chart, drilldown */
.acc-summary-card.is-cash-in{
  border-color:#bfdbfe;
  background:linear-gradient(180deg,#eff6ff 0%,#ffffff 78%);
}
.acc-summary-card.is-cash-out{
  border-color:#fecaca;
  background:linear-gradient(180deg,#fff1f2 0%,#ffffff 78%);
}
.acc-summary-card.is-net-positive{
  border-color:#bbf7d0;
  background:linear-gradient(180deg,#f0fdf4 0%,#ffffff 78%);
}
.acc-summary-card.is-net-negative{
  border-color:#fecaca;
  background:linear-gradient(180deg,#fef2f2 0%,#ffffff 78%);
}
.acc-summary-card.is-method{
  border-color:#ddd6fe;
  background:linear-gradient(180deg,#f5f3ff 0%,#ffffff 78%);
}
.acc-summary-card.is-cash-in b{color:#1d4ed8;}
.acc-summary-card.is-cash-out b{color:#b91c1c;}
.acc-summary-card.is-net-positive b{color:#15803d;}
.acc-summary-card.is-net-negative b{color:#b91c1c;}
.acc-chart-card{
  border:1px solid #dbe3ef;
  border-radius:14px;
  background:#fff;
  padding:12px 14px;
  margin:10px 0 12px;
  box-shadow:0 8px 22px rgba(15,23,42,.04);
}
.acc-chart-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#0f172a;
  margin-bottom:6px;
}
.acc-chart-title span{font-size:12px;color:#64748b;font-weight:700;}
.acc-cf-chart{display:block;width:100%;height:180px;overflow:visible;}
.acc-chart-zero{stroke:#cbd5e1;stroke-width:1;stroke-dasharray:4 4;}
.acc-chart-line{stroke:#0d6efd;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.acc-cf-chart circle{fill:#0d6efd;stroke:#fff;stroke-width:2;}
.acc-chart-empty{color:#64748b;font-weight:700;padding:12px;}
.acc-money-link{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  color:inherit;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
}
.acc-money-link:hover{text-decoration:underline;}
.acc-drilldown{
  border:1px solid #dbe3ef;
  border-radius:14px;
  background:#fff;
  padding:12px;
  margin:12px 0 0;
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.acc-drilldown__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.acc-drilldown__head b{display:block;font-size:15px;color:#0f172a;}
.acc-drilldown__head span{display:block;font-size:12px;color:#64748b;font-weight:700;margin-top:2px;text-transform:capitalize;}

/* =========================================================
   HISTORY REPAIR PAGE (Repair history / warranty lookup)
   Added to restore the missing page styling. Keep selectors
   scoped to .hrp-page so other POS tables are not affected.
   ========================================================= */
.hrp-page{
  width:100%;
  min-width:0;
  padding:4px;
  color:#111827;
}

.hrp-page *{ box-sizing:border-box; }

.hrp-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  margin:0 0 14px;
  overflow:hidden;
}

.hrp-section{
  padding:14px 16px;
}

.hrp-section h3,
.hrp-detail-head h3{
  margin:0;
  font-size:18px;
  line-height:1.25;
  font-weight:800;
  color:#0f172a;
}

.hrp-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid #eef2f7;
}

.hrp-sub,
.hrp-muted{
  color:#64748b;
  font-size:12px;
  line-height:1.35;
}

.hrp-search{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.hrp-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:240px;
}

.hrp-field.grow{ flex:1 1 520px; }

.hrp-field label{
  font-size:12px;
  font-weight:800;
  color:#475569;
}

.hrp-input,
.hrp-select{
  height:40px;
  border:1px solid #dbe3ef;
  border-radius:10px;
  background:#fff;
  color:#111827;
  padding:0 12px;
  font-size:14px;
  outline:none;
}

.hrp-input:focus,
.hrp-select:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.14);
}

.hrp-btn{
  min-height:38px;
  border:1px solid #d6deea;
  border-radius:10px;
  background:#fff;
  color:#0f172a;
  padding:8px 13px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.hrp-btn:hover:not(:disabled){
  background:#f8fafc;
  border-color:#b8c7dc;
  transform:translateY(-1px);
}

.hrp-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.hrp-btn.primary,
.hrp-btn.blue{
  background:linear-gradient(180deg,#2f7df6,#0d6efd);
  border-color:#0d6efd;
  color:#fff;
  box-shadow:0 8px 18px rgba(13,110,253,.20);
}

.hrp-btn.primary:hover:not(:disabled),
.hrp-btn.blue:hover:not(:disabled){
  background:linear-gradient(180deg,#3b82f6,#0b63df);
}

.hrp-btn.small{
  min-height:32px;
  padding:6px 10px;
  font-size:12px;
  border-radius:8px;
}

.hrp-btn.warranty{
  background:linear-gradient(180deg,#22c55e,#16a34a);
  border-color:#16a34a;
  color:#fff;
  box-shadow:0 8px 18px rgba(22,163,74,.20);
}

.hrp-btn.warranty:hover:not(:disabled){
  background:linear-gradient(180deg,#34d399,#15803d);
}

.hrp-warranty-tag{
  display:inline-flex;
  align-items:center;
  margin-top:4px;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  border:1px solid #bbf7d0;
  background:#ecfdf5;
  color:#15803d;
  white-space:nowrap;
}

.hrp-empty{
  padding:26px 16px;
  text-align:center;
  color:#64748b;
  font-weight:700;
}

.hrp-table-wrap{
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.hrp-table{
  width:100%;
  min-width:1320px;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
}

.hrp-table th,
.hrp-table td{
  padding:10px 12px;
  border-bottom:1px solid #eef2f7;
  text-align:left;
  vertical-align:top;
  font-size:13px;
  line-height:1.3;
}

.hrp-table th{
  position:sticky;
  top:0;
  z-index:2;
  background:#f8fafc;
  color:#334155;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  white-space:nowrap;
  box-shadow:inset 0 -1px 0 #e5e7eb;
}

.hrp-table tbody tr:hover{ background:#f8fbff; }
.hrp-table td:nth-child(1),
.hrp-table td:nth-child(2),
.hrp-table td:nth-child(10),
.hrp-table td:nth-child(12){ white-space:nowrap; }
.hrp-table td:nth-child(6){ min-width:360px; }
.hrp-table td:nth-child(9){ min-width:150px; }
.hrp-table td:nth-child(11){ min-width:120px; }

.hrp-device-title{
  color:#0f172a;
  font-weight:800;
  margin-bottom:3px;
}

.hrp-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  line-height:1.15;
  border:1px solid #dbeafe;
  background:#eff6ff;
  color:#1d4ed8;
  white-space:nowrap;
}

.hrp-pill.green,
.hrp-pill.good{
  border-color:#bbf7d0;
  background:#ecfdf5;
  color:#15803d;
}

.hrp-pill.bad{
  border-color:#fecaca;
  background:#fef2f2;
  color:#b91c1c;
}

.hrp-pill.blue{
  border-color:#bfdbfe;
  background:#eff6ff;
  color:#1d4ed8;
}

.hrp-pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border-top:1px solid #eef2f7;
  background:#fbfdff;
  flex-wrap:wrap;
}

.hrp-pager-left,
.hrp-pager-right{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}

.hrp-summary{
  display:grid;
  grid-template-columns:repeat(5,minmax(160px,1fr));
  gap:12px;
}

.hrp-stat,
.hrp-box{
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  padding:13px;
}

.hrp-stat b,
.hrp-box h4{
  display:block;
  margin:0 0 7px;
  font-size:12px;
  font-weight:900;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.hrp-stat strong{
  display:block;
  color:#0f172a;
  font-size:16px;
  line-height:1.3;
  margin-bottom:4px;
}

/* Detail modal */
.hrp-detail-backdrop,
.hrp-lightbox{
  position:fixed;
  inset:0;
  z-index:100000;
  background:rgba(15,23,42,.58);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}

.hrp-detail{
  width:min(1180px,96vw);
  max-height:92vh;
  background:#fff;
  border-radius:18px;
  box-shadow:0 28px 80px rgba(15,23,42,.35);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.hrp-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  background:linear-gradient(180deg,#f8fbff,#eef6ff);
  border-bottom:1px solid #dbeafe;
}

.hrp-detail-head p{
  margin:4px 0 0;
  color:#64748b;
  font-size:13px;
}

.hrp-x{
  width:36px;
  height:36px;
  border:none;
  border-radius:10px;
  background:#fff;
  color:#0f172a;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(15,23,42,.08);
}

.hrp-detail-body{
  padding:16px;
  overflow:auto;
}

.hrp-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}

.hrp-col-6{ grid-column:span 6; }
.hrp-col-12{ grid-column:span 12; }

.hrp-kv{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:8px 12px;
  font-size:13px;
}

.hrp-kv b{ color:#64748b; }
.hrp-kv span{ color:#0f172a; min-width:0; overflow-wrap:anywhere; }

.hrp-note{
  min-height:48px;
  white-space:pre-wrap;
  color:#0f172a;
  line-height:1.45;
  font-size:13px;
}

.hrp-photos{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.hrp-photo{
  width:92px;
  height:92px;
  padding:0;
  border:1px solid #dbe3ef;
  border-radius:12px;
  overflow:hidden;
  background:#f8fafc;
  cursor:pointer;
}

.hrp-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hrp-lightbox img{
  max-width:94vw;
  max-height:90vh;
  border-radius:14px;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.38);
}

.hrp-mini-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.hrp-mini-table th,
.hrp-mini-table td{
  padding:9px 10px;
  border-bottom:1px solid #eef2f7;
  text-align:left;
  vertical-align:top;
}

.hrp-mini-table th{
  background:#f8fafc;
  color:#475569;
  font-size:12px;
  font-weight:900;
}

@media (max-width: 980px){
  .hrp-summary{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hrp-col-6{ grid-column:span 12; }
}

@media (max-width: 680px){
  .hrp-page{ padding:0; }
  .hrp-section{ padding:12px; }
  .hrp-search{ align-items:stretch; }
  .hrp-field,
  .hrp-field.grow,
  .hrp-btn{ width:100%; }
  .hrp-pager{ align-items:stretch; }
  .hrp-pager-left,
  .hrp-pager-right{ width:100%; justify-content:space-between; }
  .hrp-summary{ grid-template-columns:1fr; }
  .hrp-detail-backdrop{ padding:10px; }
  .hrp-detail{ width:100%; max-height:94vh; border-radius:14px; }
  .hrp-kv{ grid-template-columns:1fr; }
}

/* Phase next: make Cash Flow Ledger Diagnostics visible and easy to verify. */
.acc-ledger-diagnostics-box{
  display:block !important;
  border-width:2px;
  border-left:6px solid #0d6efd;
  box-shadow:0 8px 20px rgba(13,110,253,.08);
}
.acc-ledger-diagnostics-box.is-ok{
  border-color:#86efac;
  border-left-color:#16a34a;
  background:#f0fdf4;
  color:#14532d;
}
.acc-ledger-diagnostics-box.is-warn{
  border-color:#fde68a;
  border-left-color:#d97706;
  background:#fffbeb;
  color:#78350f;
}
.acc-ledger-diagnostics-box.is-error{
  border-color:#fecaca;
  border-left-color:#dc2626;
  background:#fef2f2;
  color:#7f1d1d;
}
.acc-ledger-diagnostics__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:4px;
}


/* Ledger Auto-Heal / Health Snapshot */
.acc-ledger-autoheal{
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #cfe8d7;
  background:#f4fff7;
  color:#14532d;
  font-weight:600;
}
.acc-ledger-autoheal.is-error{
  border-color:#fecaca;
  background:#fff1f2;
  color:#991b1b;
}


/* Accounting Transfer Register v2 */
.acc-transfer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.acc-transfer-register{
  margin-top:10px;
}
.acc-transfer-register__title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:4px 0 8px;
}
.acc-transfer-table-wrap{
  margin-top:6px;
  max-height:260px;
  overflow:auto;
}
.acc-transfer-table th,
.acc-transfer-table td{
  white-space:nowrap;
}
.acc-transfer-table td:last-child{
  white-space:normal;
  min-width:180px;
}
@media (max-width: 760px){
  .acc-transfer-head,
  .acc-transfer-register__title{
    display:block;
  }
  .acc-transfer-head .btn{
    margin-top:8px;
  }
}

/* Phase next: Cash Flow Payment Method Breakdown */
.acc-method-breakdown{
  background:#fff;
  border:1px solid #dbeafe;
  border-radius:14px;
  padding:12px;
  margin:12px 0;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}
.acc-method-breakdown__title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.acc-method-breakdown__table tfoot th{
  background:#f8fafc;
  font-weight:800;
}
@media (max-width: 760px){
  .acc-method-breakdown__title{align-items:flex-start;flex-direction:column;}
}


/* =========================================================
   Phase 6 UX Professionalization — Unified UI foundation
   Scope: visual consistency only. No API/auth/backend changes.
   ========================================================= */
:root{
  --ths-ui-blue:#0d6efd;
  --ths-ui-blue-dark:#0957c3;
  --ths-ui-teal:#14b8a6;
  --ths-ui-danger:#dc3545;
  --ths-ui-warning:#f59e0b;
  --ths-ui-success:#16a34a;
  --ths-ui-text:#1f2937;
  --ths-ui-muted:#6b7280;
  --ths-ui-border:#dbe3ef;
  --ths-ui-soft:#f6f9fc;
  --ths-ui-card:#ffffff;
  --ths-ui-shadow:0 12px 30px rgba(15, 23, 42, .12);
  --ths-ui-radius:14px;

  /* Typography tokens (POS_TYPOGRAPHY_STANDARDIZATION.md, 2026-09-11).
     Keep the app's existing system-font stack (no Inter) -- decided with
     the user to avoid self-hosting a web font on POS terminals that may
     have unreliable internet. Scale keeps 13px as a legitimate "sm" step
     (not just 12/14/16...) because it's already the de-facto baseline for
     dense tables/lists across the app -- forcing everything to 14px would
     reduce information density on screens that were built around 13px.
     Weight scale intentionally stops at 600: the app currently leans on
     700/800/900/950(!) almost everywhere, which is exactly what this
     token set is migrating AWAY from, area by area (see tracker doc). */
  --ths-ui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ths-ui-font-size-xs:12px;
  --ths-ui-font-size-sm:13px;
  --ths-ui-font-size-base:14px;
  --ths-ui-font-size-md:16px;
  --ths-ui-font-size-lg:18px;
  --ths-ui-font-size-xl:24px;
  --ths-ui-font-weight-regular:400;
  --ths-ui-font-weight-medium:500;
  --ths-ui-font-weight-semibold:600;
}

/* Unified table polish: safe defaults for existing tables */
.table-wrap,
.table-scroll,
.br-table-scroll,
.inv-table-wrap,
.orders-table-wrap,
.report-table-wrap,
.payroll-table-wrap{
  scrollbar-width:thin;
}

table th,
.data-table th,
.br-table th,
.inv-table th,
.orders-table th,
.report-table th{
  color:#334155;
  font-weight:700;
  letter-spacing:.01em;
}

table td,
.data-table td,
.br-table td,
.inv-table td,
.orders-table td,
.report-table td{
  color:#1f2937;
}

table tbody tr:hover td,
.data-table tbody tr:hover td,
.br-table tbody tr:hover td,
.inv-table tbody tr:hover td,
.orders-table tbody tr:hover td{
  background:#f8fbff;
}

/* Unified action buttons and dropdown portals */
button[data-dd-btn="1"],
.action-btn,
.cust-action-btn,
.so-mgr-action,
.acc-action,
.payroll-actions button,
.payroll-run-actions button,
.repair-tools-actions button{
  transition:background .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}

button[data-dd-btn="1"]:active,
.action-btn:active,
.cust-action-btn:active,
.so-mgr-action:active,
.acc-action:active{
  transform:translateY(1px);
}

.dropdown__menu,
.br-dd-portal,
.rbac-dd__menu,
.user-dropdown{
  border:1px solid var(--ths-ui-border) !important;
  border-radius:12px !important;
  box-shadow:var(--ths-ui-shadow) !important;
  background:#fff !important;
  overflow:hidden;
  z-index:99999 !important;
}

.dropdown__item,
.rbac-dd__item,
.user-dropdown__item,
.br-dd-portal button,
.br-dd button{
  min-height:36px;
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  border:0;
  background:#fff;
  color:var(--ths-ui-text);
  cursor:pointer;
  text-align:left;
  transition:background .12s ease, color .12s ease;
}

.dropdown__item:hover,
.rbac-dd__item:hover,
.user-dropdown__item:hover,
.br-dd-portal button:hover,
.br-dd button:hover{
  background:#eef6ff !important;
  color:#0759c7 !important;
}

/* Unified modal polish without changing modal JS behavior */
.modal,
.ths-modal,
.repair-tools-modal,
#printing-modal,
#pos-modal{
  overscroll-behavior:contain;
}

.modal__dialog,
.modal-content,
.ths-modal__dialog,
.repair-tools-modal__window,
.printing-modal__dialog{
  border-radius:var(--ths-ui-radius);
  box-shadow:0 22px 60px rgba(2, 8, 23, .24);
}

.modal input,
.modal select,
.modal textarea,
.ths-modal input,
.ths-modal select,
.ths-modal textarea,
.repair-tools-modal input,
.repair-tools-modal select,
.repair-tools-modal textarea{
  border-color:#ccd6e3;
}

.modal input:focus,
.modal select:focus,
.modal textarea:focus,
.ths-modal input:focus,
.ths-modal select:focus,
.ths-modal textarea:focus,
.repair-tools-modal input:focus,
.repair-tools-modal select:focus,
.repair-tools-modal textarea:focus{
  outline:2px solid rgba(13,110,253,.16);
  border-color:var(--ths-ui-blue);
}

/* Unified toast engine */
.ths-toast-wrap{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:100000;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.ths-toast{
  pointer-events:auto;
  min-width:260px;
  max-width:380px;
  display:grid;
  grid-template-columns:28px 1fr auto;
  gap:10px;
  align-items:start;
  background:#111827;
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-left:5px solid #60a5fa;
  padding:12px 12px;
  border-radius:14px;
  box-shadow:0 16px 34px rgba(15,23,42,.25);
  animation:thsToastIn .18s ease-out;
}

.ths-toast--success{ border-left-color:var(--ths-ui-success); }
.ths-toast--error{ border-left-color:var(--ths-ui-danger); }
.ths-toast--warning{ border-left-color:var(--ths-ui-warning); }
.ths-toast--info{ border-left-color:#60a5fa; }

.ths-toast__icon{
  width:26px;
  height:26px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.13);
  font-weight:800;
}

.ths-toast__title{
  font-weight:800;
  margin-bottom:2px;
}

.ths-toast__message{
  font-size:13px;
  line-height:1.35;
}

.ths-toast__action,
.ths-toast__close{
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
}

.ths-toast__action{
  font-weight:800;
  padding:3px 6px;
  border-radius:8px;
  background:rgba(255,255,255,.12);
}

.ths-toast__close{
  font-size:20px;
  line-height:1;
  opacity:.72;
  margin-left:2px;
}

.ths-toast__close:hover{ opacity:1; }
.ths-toast--hide{ opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease; }

@keyframes thsToastIn{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

@media (max-width: 640px){
  .ths-toast-wrap{
    left:12px;
    right:12px;
    bottom:12px;
  }
  .ths-toast{
    max-width:none;
    min-width:0;
    width:100%;
  }
  .dropdown__menu,
  .br-dd-portal,
  .rbac-dd__menu,
  .user-dropdown{
    max-width:calc(100vw - 24px);
  }
}

/* =========================
   Manage > Trade-in UI shell
========================= */
.tradein-page{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:calc(100vh - 110px);
}
.tradein-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.tradein-head h2{margin:0 0 4px;font-size:22px;color:#0f172a;}
.tradein-head p{margin:0;color:#64748b;font-size:13px;}
.tradein-settings-btn{
  width:42px;
  height:42px;
  border:1px solid #d7e2f0;
  border-radius:12px;
  background:#f8fafc;
  color:#0f172a;
  font-size:20px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.tradein-settings-btn:hover{background:#eaf3ff;border-color:#9cc7ff;}
.tradein-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  min-height:340px;
  padding:16px;
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}
.tradein-empty-card{
  border:1px dashed #cbd5e1;
  border-radius:14px;
  background:#f8fafc;
  padding:24px;
  color:#475569;
}
.tradein-empty-card h3{margin:0 0 8px;color:#0f172a;font-size:18px;}
.tradein-empty-card p{margin:0;font-size:13px;line-height:1.5;}
body.tradein-modal-open{overflow:hidden;}
.tradein-setting-modal.hidden{display:none;}
.tradein-setting-modal{
  position:fixed;
  inset:0;
  z-index:100000;
}
.tradein-setting-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(2px);
}
.tradein-setting-modal__dialog{
  position:relative;
  z-index:1;
  width:100vw;
  height:100vh;
  background:#f5f7fb;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.tradein-setting-modal__topbar{
  height:72px;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 22px;
  background:#0d6efd;
  color:#fff;
  box-shadow:0 4px 18px rgba(15,23,42,.22);
}
.tradein-setting-modal__topbar h2{margin:0 0 3px;font-size:21px;color:#fff;}
.tradein-setting-modal__topbar p{margin:0;color:rgba(255,255,255,.84);font-size:13px;}
.tradein-setting-modal__close{
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:12px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.tradein-setting-modal__close:hover{background:rgba(255,255,255,.24);}
.tradein-setting-tabs{
  display:flex;
  gap:8px;
  padding:12px 18px;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  overflow:auto;
}
.tradein-setting-tab{
  border:0;
  border-radius:10px;
  padding:10px 18px;
  font-weight:800;
  background:#eef2f7;
  color:#334155;
  cursor:pointer;
  white-space:nowrap;
}
.tradein-setting-tab.is-active{background:#0d6efd;color:#fff;}
.tradein-setting-body{
  flex:1 1 auto;
  overflow:auto;
  padding:18px;
}
.tradein-setting-panel{max-width:1280px;margin:0 auto;}
@media (max-width:720px){
  .tradein-head{align-items:flex-start;}
  .tradein-setting-modal__topbar{height:auto;min-height:72px;padding:14px 16px;}
}

/* Trade-in Settings: Expected Profit Tables */
.tradein-profit-builder{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.tradein-profit-builder__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}
.tradein-profit-builder__head h3{margin:0 0 5px;color:#0f172a;font-size:19px;}
.tradein-profit-builder__head p{margin:0;color:#64748b;font-size:13px;}
.tradein-profit-note{
  background:#eef6ff;
  border:1px solid #bfdbfe;
  color:#1e3a8a;
  border-radius:12px;
  padding:11px 14px;
  font-size:13px;
}
.tradein-profit-tables{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.tradein-profit-table{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}
.tradein-profit-table__top{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:12px;
  margin-bottom:12px;
}
.tradein-profit-table__top label{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#334155;
  font-size:12px;
  font-weight:800;
}
.tradein-profit-table__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.tradein-input{
  height:38px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  padding:0 10px;
  background:#fff;
  color:#0f172a;
  outline:none;
}
.tradein-input:focus{border-color:#0d6efd;box-shadow:0 0 0 3px rgba(13,110,253,.12);}
.tradein-profit-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 110px;
  gap:8px;
  align-items:end;
}
.tradein-profit-grid--head{
  padding:10px 12px;
  border-radius:10px;
  background:#f1f5f9;
  color:#334155;
  font-size:12px;
  font-weight:900;
}
.tradein-profit-rows{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}
.tradein-profit-row{
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
}
.tradein-profit-row label{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#475569;
  font-size:11px;
  font-weight:800;
}
.tradein-profit-row--empty{
  display:block;
  color:#64748b;
  font-size:13px;
  background:#f8fafc;
}
.tradein-btn{
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  color:#0f172a;
  height:38px;
  padding:0 13px;
  font-weight:800;
  cursor:pointer;
}
.tradein-btn:hover{background:#f8fafc;border-color:#94a3b8;}
.tradein-btn--primary{background:#0d6efd;border-color:#0d6efd;color:#fff;}
.tradein-btn--primary:hover{background:#0b5ed7;border-color:#0b5ed7;}
.tradein-btn--danger{background:#fff5f5;border-color:#fecaca;color:#b91c1c;}
.tradein-btn--danger:hover{background:#fee2e2;border-color:#fca5a5;}
@media (max-width:760px){
  .tradein-profit-builder__head,.tradein-profit-table__top{align-items:stretch;flex-direction:column;}
  .tradein-profit-table__actions{justify-content:flex-start;}
  .tradein-profit-grid{grid-template-columns:1fr;}
  .tradein-profit-grid--head{display:none;}
}

/* Trade-in Expected Profit: regional currency display */
.tradein-profit-builder__tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.tradein-currency-pill{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 11px;
  border:1px solid #bfdbfe;
  border-radius:999px;
  background:#eff6ff;
  color:#1e40af;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.tradein-money-field{
  display:flex;
  align-items:center;
  width:100%;
}
.tradein-money-symbol{
  height:38px;
  min-width:36px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #cbd5e1;
  background:#f8fafc;
  color:#475569;
  font-weight:900;
  font-size:13px;
  line-height:1;
}
.tradein-money-field.is-before .tradein-money-symbol{
  border-right:0;
  border-radius:10px 0 0 10px;
}
.tradein-money-field.is-before .tradein-money-input{
  border-radius:0 10px 10px 0;
}
.tradein-money-field.is-after .tradein-money-input{
  border-radius:10px 0 0 10px;
}
.tradein-money-field.is-after .tradein-money-symbol{
  border-left:0;
  border-radius:0 10px 10px 0;
}
.tradein-money-input{width:100%;min-width:0;}
@media (max-width:760px){
  .tradein-profit-builder__tools{justify-content:flex-start;}
  .tradein-currency-pill{white-space:normal;}
}

/* Trade-in Expected Profit: compact add-row workflow */
.tradein-profit-entry{
  border:1px solid #dbeafe;
  background:#f8fbff;
  border-radius:14px;
  padding:12px;
  margin:10px 0 14px;
}
.tradein-profit-entry__title{
  color:#0f172a;
  font-size:13px;
  font-weight:900;
  margin-bottom:8px;
}
.tradein-profit-entry__grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 150px;
  gap:8px;
  align-items:end;
}
.tradein-profit-entry__grid label{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#334155;
  font-size:11px;
  font-weight:900;
}
.tradein-profit-entry__grid .tradein-btn{
  width:100%;
}
.tradein-profit-entry__hint{
  margin-top:7px;
  color:#64748b;
  font-size:12px;
}
.tradein-profit-list{
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.tradein-profit-list__head,
.tradein-profit-list__row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 110px;
  align-items:center;
}
.tradein-profit-list__head{
  background:#eef2f7;
  color:#0f172a;
  font-size:12px;
  font-weight:900;
}
.tradein-profit-list__head > div,
.tradein-profit-list__row > div{
  padding:10px 12px;
  border-right:1px solid #e5e7eb;
}
.tradein-profit-list__head > div:last-child,
.tradein-profit-list__row > div:last-child{
  border-right:0;
}
.tradein-profit-list__row{
  min-height:40px;
  color:#0f172a;
  font-size:13px;
  border-top:1px solid #e5e7eb;
}
.tradein-profit-list__row:nth-child(even){background:#f8fafc;}
.tradein-profit-row-action{
  color:#64748b;
  font-weight:800;
  font-size:12px;
}
.tradein-mobile-label{display:none;}
.tradein-profit-row--empty{
  padding:14px;
  border:0;
  border-top:1px solid #e5e7eb;
  border-radius:0;
  background:#fff;
}
@media (max-width:760px){
  .tradein-profit-entry__grid,
  .tradein-profit-list__head,
  .tradein-profit-list__row{
    grid-template-columns:1fr;
  }
  .tradein-profit-list__head{display:none;}
  .tradein-profit-list__row > div{
    border-right:0;
    border-bottom:1px solid #e5e7eb;
    display:flex;
    justify-content:space-between;
    gap:10px;
  }
  .tradein-profit-list__row > div:last-child{border-bottom:0;}
  .tradein-mobile-label{display:inline;font-weight:900;color:#64748b;}
}

/* Trade-in Expected Profit: action dropdown + compact columns */
.tradein-profit-entry__grid{
  grid-template-columns:minmax(120px,.8fr) minmax(120px,.8fr) minmax(120px,.8fr) 260px;
}
.tradein-profit-entry__actions{
  display:flex;
  align-items:end;
  gap:8px;
  width:100%;
}
.tradein-profit-entry__actions .tradein-btn--primary{flex:1 1 auto;}
.tradein-profit-entry__actions .tradein-sort-menu{flex:0 0 88px;}
.tradein-btn--icon{
  width:100%;
  padding:0 10px;
  white-space:nowrap;
}
.tradein-profit-list__head,
.tradein-profit-list__row{
  grid-template-columns:minmax(90px,.75fr) minmax(90px,.75fr) minmax(110px,.8fr) 150px;
}
.tradein-profit-row-action{
  position:relative;
  overflow:visible;
}
.tradein-dropdown{
  position:relative;
  display:inline-flex;
  width:100%;
}
.tradein-action-btn{
  width:100%;
  height:32px;
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#fff;
  color:#0f172a;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.tradein-action-btn:hover{background:#f8fafc;border-color:#94a3b8;}
.tradein-dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + 5px);
  right:0;
  z-index:30;
  min-width:140px;
  padding:6px;
  border:1px solid #dbe2ea;
  border-radius:11px;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.16);
}
.tradein-dropdown.is-open .tradein-dropdown-menu{display:flex;flex-direction:column;gap:4px;}
.tradein-dropdown-menu button{
  width:100%;
  border:0;
  border-radius:8px;
  background:#fff;
  color:#0f172a;
  text-align:left;
  padding:8px 10px;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}
.tradein-dropdown-menu button:hover{background:#f1f5f9;}
.tradein-dropdown-menu button.is-danger{color:#b91c1c;}
.tradein-dropdown-menu button.is-danger:hover{background:#fee2e2;}
.tradein-profit-list{overflow:visible;}
.tradein-profit-rows{overflow:visible;}
@media (max-width:760px){
  .tradein-profit-entry__grid,
  .tradein-profit-list__head,
  .tradein-profit-list__row{grid-template-columns:1fr;}
  .tradein-profit-entry__actions{align-items:stretch;}
  .tradein-profit-list__row > div:last-child{justify-content:flex-end;}
  .tradein-dropdown-menu{left:0;right:auto;}
}


/* =========================================================
   Trade-in Settings tabs fix
   - Remove horizontal scrollbar in setting tab header
   - Keep tab names fully visible
   - Allow tabs to wrap normally when screen is narrow
   ========================================================= */
.tradein-setting-tabs{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
  padding:12px 18px !important;
  min-height:54px !important;
  height:auto !important;
  overflow:visible !important;
  overflow-x:visible !important;
  overflow-y:visible !important;
}

.tradein-setting-tab{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:34px !important;
  height:auto !important;
  line-height:1.2 !important;
  padding:9px 18px !important;
  white-space:nowrap !important;
}

.tradein-setting-body{
  min-height:0 !important;
}

@media (max-width:720px){
  .tradein-setting-tabs{
    padding:10px 12px !important;
  }
  .tradein-setting-tab{
    flex:1 1 calc(50% - 8px) !important;
    min-width:120px !important;
  }
}



/* =========================================================
   Trade-in Device Catalog Data Source
   Category -> Brand -> Series -> Model CRUD
========================================================= */
.tradein-catalog-builder{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.tradein-catalog-card{
  background:#fff;
  border:1px solid #dbe5f0;
  border-radius:16px;
  padding:14px;
  box-shadow:0 6px 18px rgba(15,23,42,.035);
}
.tradein-catalog-entry__title{
  font-weight:900;
  color:#0f172a;
  margin-bottom:12px;
}
.tradein-catalog-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  align-items:end;
}
.tradein-catalog-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.tradein-catalog-grid label > span{
  font-size:12px;
  font-weight:900;
  color:#334155;
}
.tradein-catalog-grid__wide{
  grid-column:span 2;
}
.tradein-catalog-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.tradein-catalog-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  background:#f8fbff;
  border:1px solid #dbeafe;
  border-radius:14px;
  padding:10px;
}
.tradein-catalog-toolbar [data-catalog-search]{
  flex:1 1 auto;
  min-width:260px;
}
.tradein-catalog-toolbar [data-catalog-filter-status]{
  flex:0 0 170px;
}
.tradein-catalog-table{
  border:1px solid #dbe5f0;
  border-radius:16px;
  overflow:auto;
  background:#fff;
}
.tradein-catalog-table__head,
.tradein-catalog-row{
  display:grid;
  grid-template-columns:1fr 1fr 1.15fr 1.35fr .85fr .9fr 1.1fr .75fr 150px;
  min-width:1120px;
}
.tradein-catalog-table__head{
  background:#eef3fa;
  color:#0f172a;
  font-size:12px;
  font-weight:900;
}
.tradein-catalog-table__head > div,
.tradein-catalog-row > div{
  padding:11px 12px;
  border-right:1px solid #dbe5f0;
}
.tradein-catalog-table__head > div:last-child,
.tradein-catalog-row > div:last-child{
  border-right:0;
}
.tradein-catalog-row{
  border-top:1px solid #e9eef5;
  font-size:13px;
  color:#0f172a;
  align-items:center;
}
.tradein-catalog-row:nth-child(even){
  background:#f8fbff;
}
.tradein-catalog-row:hover{
  background:#eef6ff;
}
.tradein-catalog-row b{
  font-weight:900;
}
.tradein-catalog-row__actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.tradein-action-btn.is-danger{
  background:#fff1f2;
  border-color:#fecaca;
  color:#b91c1c;
}
.tradein-status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid #dbe5f0;
  background:#f8fafc;
  color:#475569;
  font-size:12px;
  font-weight:900;
  text-transform:capitalize;
}
.tradein-status-pill.is-active{
  background:#ecfdf5;
  border-color:#bbf7d0;
  color:#15803d;
}
.tradein-status-pill.is-inactive{
  background:#f1f5f9;
  border-color:#cbd5e1;
  color:#475569;
}
.tradein-status-pill.is-draft{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#c2410c;
}
.tradein-catalog-empty{
  padding:22px;
  color:#64748b;
  font-weight:800;
  text-align:center;
  background:#f8fafc;
}
@media (max-width: 1180px){
  .tradein-catalog-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .tradein-catalog-grid__wide{
    grid-column:1 / -1;
  }
  .tradein-catalog-actions{
    grid-column:1 / -1;
    justify-content:flex-start;
  }
}
@media (max-width: 720px){
  .tradein-catalog-grid,
  .tradein-catalog-toolbar{
    display:grid;
    grid-template-columns:1fr;
  }
  .tradein-catalog-toolbar [data-catalog-search],
  .tradein-catalog-toolbar [data-catalog-filter-status]{
    min-width:0;
    width:100%;
    flex:auto;
  }
}


/* =========================================================
   Trade-in Device Catalog Flow UI refinement
   - Cascading Category -> Brand -> Series -> Model
   - Compact Excel-style rows, row click loads edit form
========================================================= */
.tradein-catalog-grid .tradein-input:disabled{
  background:#f1f5f9;
  color:#94a3b8;
  cursor:not-allowed;
  border-color:#dbe5f0;
}
.tradein-catalog-table--compact{
  overflow:auto;
}
.tradein-catalog-table--compact .tradein-catalog-table__head,
.tradein-catalog-table--compact .tradein-catalog-row{
  grid-template-columns:1fr 1fr 1.15fr 1.35fr .75fr .85fr .85fr 1fr .7fr;
  min-width:1100px;
}
.tradein-catalog-table--compact .tradein-catalog-table__head > div,
.tradein-catalog-table--compact .tradein-catalog-row > div{
  padding:7px 9px;
}
.tradein-catalog-table--compact .tradein-catalog-row{
  min-height:34px;
  cursor:pointer;
  font-size:12px;
}
.tradein-catalog-table--compact .tradein-catalog-row:hover,
.tradein-catalog-table--compact .tradein-catalog-row.is-selected{
  background:#eaf3ff;
}
.tradein-catalog-table--compact .tradein-status-pill{
  padding:2px 7px;
  font-size:11px;
}
.tradein-catalog-actions .tradein-btn[hidden]{
  display:none !important;
}

/* Trade-in catalog dropdown flow controls */
.tradein-flow-control{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 38px;
  gap:6px;
  align-items:center;
}
.tradein-flow-control .tradein-input{
  width:100%;
  min-width:0;
}
.tradein-mini-add{
  height:38px;
  width:38px;
  border:1px solid #bfdbfe;
  border-radius:10px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:20px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}
.tradein-mini-add:hover:not(:disabled){
  background:#dbeafe;
  border-color:#93c5fd;
}
.tradein-mini-add:disabled{
  opacity:.45;
  cursor:not-allowed;
  background:#f1f5f9;
  color:#94a3b8;
  border-color:#dbe5f0;
}

/* =========================================================
   Trade-in Problem Deduction Rules
   Model-level Screen / Battery / Add-on problem setup
========================================================= */
.tradein-problem-builder{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.tradein-problem-modelbar{
  display:flex;
  gap:10px;
  align-items:end;
  background:#f8fbff;
  border:1px solid #dbeafe;
  border-radius:14px;
  padding:12px;
}
.tradein-problem-modelbar label{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.tradein-problem-modelbar label span{
  font-size:12px;
  font-weight:900;
  color:#334155;
}
.tradein-problem-card{
  background:#fff;
  border:1px solid #dbe5f0;
  border-radius:16px;
  padding:14px;
  box-shadow:0 6px 18px rgba(15,23,42,.035);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tradein-problem-group{
  border:1px solid #d8e6f6;
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow:0 8px 22px rgba(15,23,42,.035);
}
.tradein-problem-group + .tradein-problem-group{margin-top:6px;}
.tradein-problem-group--condition{border-left:4px solid #7c3aed;}
.tradein-problem-group--screen{border-left:4px solid #2563eb;}
.tradein-problem-group--battery{border-left:4px solid #16a34a;}
.tradein-problem-group--addons{border-left:4px solid #f59e0b;}
.tradein-problem-group-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  padding-bottom:10px;
  border-bottom:1px solid #eef3fa;
}
.tradein-problem-group-title > span{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#eef6ff;
  font-size:18px;
}
.tradein-problem-group--condition .tradein-problem-group-title > span{background:#f5f3ff;}
.tradein-problem-group--battery .tradein-problem-group-title > span{background:#ecfdf3;}
.tradein-problem-group--addons .tradein-problem-group-title > span{background:#fff7ed;}
.tradein-problem-group-title strong{
  display:block;
  color:#0f172a;
  font-size:14px;
  font-weight:900;
}
.tradein-problem-group-title small{
  display:block;
  margin-top:2px;
  color:#64748b;
  font-size:12px;
  font-weight:700;
}
.tradein-problem-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:8px;
  border-bottom:1px solid #e2e8f0;
}
.tradein-problem-title strong{
  display:block;
  font-size:18px;
  color:#0f172a;
}
.tradein-problem-title span{
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:12px;
  font-weight:800;
}
.tradein-condition-rule-head,
.tradein-condition-rule-row,
.tradein-problem-head,
.tradein-condition-rule-row,
.tradein-problem-row{
  display:grid;
  grid-template-columns:1.1fr 1.7fr .7fr .7fr 90px;
  gap:8px;
  align-items:center;
}
.tradein-condition-rule-head,
.tradein-problem-head{
  background:#eef3fa;
  color:#0f172a;
  border-radius:10px;
  padding:8px 10px;
  font-size:12px;
  font-weight:900;
}
.tradein-problem-row{
  padding:8px 0;
  border-bottom:1px solid #edf2f7;
}
.tradein-condition-rule-row:last-child,
.tradein-problem-row:last-child{border-bottom:0;}
.tradein-condition-help{
  margin:-2px 0 12px;
  padding:10px 12px;
  border:1px solid #ddd6fe;
  border-radius:12px;
  background:#faf5ff;
  color:#4c1d95;
  font-size:12px;
  font-weight:800;
}
.tradein-percent-field{
  display:flex;
  align-items:center;
  border:1px solid #cbd5e1;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.tradein-percent-field .tradein-input{
  border:0;
  border-radius:0;
  min-width:0;
}
.tradein-percent-field span{
  padding:0 10px;
  color:#334155;
  font-size:13px;
  font-weight:900;
  border-left:1px solid #e2e8f0;
}

.tradein-problem-lock{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  height:34px;
  border-radius:10px;
  background:#f1f5f9;
  color:#64748b;
  font-size:12px;
  font-weight:900;
}
.tradein-problem-addon-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 12px;
  padding-bottom:10px;
  border-bottom:1px solid #eef3fa;
}
.tradein-problem-addon-top .tradein-problem-group-title{
  margin:0;
  padding:0;
  border-bottom:0;
}
@media (max-width: 980px){
  .tradein-problem-modelbar,
  .tradein-problem-title,
  .tradein-problem-addon-top{align-items:stretch;flex-direction:column;}
  .tradein-problem-group{padding:12px;border-radius:14px;}
  .tradein-condition-rule-head, .tradein-problem-head{display:none;}
  .tradein-condition-rule-row, .tradein-problem-row{grid-template-columns:1fr;gap:7px;background:#f8fbff;border:1px solid #e2e8f0;border-radius:12px;padding:10px;margin-bottom:8px;}
}

/* Trade-in Problem: model search in settings */
.tradein-problem-modelbar .tradein-problem-search-label{
  flex:0 0 38%;
}
.tradein-problem-modelbar [data-problem-model-select]{
  min-width:260px;
}
@media (max-width: 980px){
  .tradein-problem-modelbar .tradein-problem-search-label{flex:1 1 auto;}
  .tradein-problem-modelbar [data-problem-model-select]{min-width:0;width:100%;}
}

/* Trade-in Shipping Address settings */
.tradein-shipping-builder{display:flex;flex-direction:column;gap:16px;}
.tradein-shipping-card{border:1px solid #d8e2f0;border-radius:14px;background:#fff;padding:16px;box-shadow:0 8px 20px rgba(15,23,42,.04);}
.tradein-shipping-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end;}
.tradein-shipping-form-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#42526b;}
.tradein-shipping-form-grid label.is-wide{grid-column:span 2;}
.tradein-shipping-form-grid textarea.tradein-input{min-height:84px;resize:vertical;}
.tradein-shipping-form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap;}
.tradein-shipping-table{border:1px solid #d8e2f0;border-radius:14px;background:#fff;overflow:hidden;}
.tradein-shipping-head,.tradein-shipping-row{display:grid;grid-template-columns:1.2fr 2fr .7fr 1fr;gap:12px;align-items:center;padding:10px 12px;}
.tradein-shipping-head{font-size:12px;font-weight:800;color:#64748b;background:#f8fafc;border-bottom:1px solid #e5edf8;text-transform:uppercase;letter-spacing:.02em;}
.tradein-shipping-row{font-size:13px;color:#0f172a;border-bottom:1px solid #eef3fa;}
.tradein-shipping-row:last-child{border-bottom:0;}
.tradein-shipping-row strong{display:block;font-size:13px;color:#0f172a;}
.tradein-shipping-row span{display:block;color:#64748b;font-size:12px;margin-top:2px;}
.tradein-shipping-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
@media (max-width:900px){.tradein-shipping-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.tradein-shipping-head,.tradein-shipping-row{grid-template-columns:1fr;}.tradein-shipping-actions{justify-content:flex-start;}.tradein-shipping-form-grid label.is-wide{grid-column:span 2;}}
@media (max-width:560px){.tradein-shipping-form-grid{grid-template-columns:1fr;}.tradein-shipping-form-grid label.is-wide{grid-column:span 1;}}


/* Trade-in Quotes table */
.tradein-quotes-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.tradein-quotes-head h3{margin:0 0 4px;font-size:18px;font-weight:900;color:#0f172a}
.tradein-quotes-head p{margin:0;color:#475569;font-size:13px;font-weight:600}
.tradein-mini-btn{border:1px solid #bfdbfe;background:#eff6ff;color:#0d6efd;border-radius:12px;padding:9px 14px;font-weight:900;cursor:pointer}
.tradein-mini-btn:hover{background:#dbeafe}
.tradein-table-scroll{width:100%;overflow:auto;border:1px solid #dbe7f5;border-radius:16px;background:#fff}
.tradein-quotes-table{width:100%;border-collapse:separate;border-spacing:0;min-width:1120px;font-size:13px}
.tradein-quotes-table th{background:#f8fafc;color:#334155;text-align:left;font-weight:900;padding:13px 14px;border-bottom:1px solid #e2e8f0;white-space:nowrap}
.tradein-quotes-table td{padding:13px 14px;border-bottom:1px solid #eef2f7;color:#0f172a;vertical-align:top;line-height:1.35}
.tradein-quotes-table tbody tr:hover{background:#f8fbff}
.tradein-quotes-table tbody tr:last-child td{border-bottom:0}
.tradein-quotes-table td span{color:#64748b;font-size:12px;font-weight:700}
.tradein-status-pill{display:inline-flex!important;align-items:center;border-radius:999px;background:#ecfdf5;color:#047857!important;border:1px solid #bbf7d0;padding:4px 9px;font-size:12px!important;font-weight:900!important;text-transform:capitalize}


/* Trade-in Settings Help tab */
.tradein-help-wrap{
  display:flex;
  flex-direction:column;
  gap:18px;
  color:#0f172a;
}
.tradein-help-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:18px;
  align-items:stretch;
  padding:22px;
  border:1px solid #d7e6ff;
  border-radius:20px;
  background:linear-gradient(135deg,#f8fbff,#eef6ff);
  box-shadow:0 14px 32px rgba(15,23,42,.06);
}
.tradein-help-kicker{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  background:#dbeafe;
  color:#0d6efd;
  font-weight:800;
  font-size:12px;
  margin-bottom:10px;
}
.tradein-help-hero h3{
  margin:0 0 8px;
  font-size:24px;
  line-height:1.2;
}
.tradein-help-hero p{
  margin:0;
  color:#475569;
  font-size:14px;
  line-height:1.6;
  max-width:760px;
}
.tradein-help-formula{
  border:1px solid #bfdbfe;
  border-radius:18px;
  padding:18px;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}
.tradein-help-formula small{
  color:#64748b;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.tradein-help-formula strong{
  color:#0d47a1;
  font-size:16px;
  line-height:1.45;
}
.tradein-help-flow{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.tradein-help-step{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:14px;
  padding:18px;
  border:1px solid #e2e8f0;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}
.tradein-help-step__no{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#0d6efd;
  color:#fff;
  font-weight:900;
}
.tradein-help-step h4{
  margin:0 0 8px;
  font-size:17px;
}
.tradein-help-step p{
  margin:0 0 10px;
  color:#475569;
  line-height:1.55;
  font-size:13px;
}
.tradein-help-step ul{
  margin:0;
  padding-left:18px;
  color:#334155;
  font-size:13px;
  line-height:1.65;
}
.tradein-help-step li+li{margin-top:3px;}
.tradein-help-example{
  padding:18px;
  border:1px solid #fde68a;
  border-radius:18px;
  background:#fffbeb;
}
.tradein-help-example h4{
  margin:0 0 12px;
  font-size:17px;
  color:#92400e;
}
.tradein-help-example-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.tradein-help-example-grid div{
  padding:13px;
  border-radius:14px;
  background:#fff;
  border:1px solid #fde68a;
}
.tradein-help-example-grid span{
  display:block;
  color:#64748b;
  font-size:12px;
  font-weight:800;
  margin-bottom:5px;
}
.tradein-help-example-grid strong{
  color:#111827;
  font-size:14px;
}
@media (max-width: 980px){
  .tradein-help-hero{grid-template-columns:1fr;}
  .tradein-help-flow{grid-template-columns:1fr;}
  .tradein-help-example-grid{grid-template-columns:1fr;}
}

.tradein-market-run-btn{
  min-height:34px;
  white-space:nowrap;
}
.tradein-market-run-btn[disabled]{
  opacity:.62;
  cursor:wait;
}


/* =========================================================
   FIX: Manage > Special Order > Order Processing List table fit
   Keep every column visible when zooming/long custom item names.
   This page is rendered by the Manage Special Order screen, but
   the shared CSS class is .so-mgr-table. No inventory JS change needed.
========================================================= */
.so-mgr-page .so-mgr-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
}
.so-mgr-page .so-mgr-table{
  width:100%;
  min-width:0 !important;
  table-layout:fixed;
}
.so-mgr-page .so-mgr-table th,
.so-mgr-page .so-mgr-table td{
  white-space:normal;
  vertical-align:top;
  overflow-wrap:anywhere;
  word-break:normal;
}
.so-mgr-page .so-mgr-table th:nth-child(1),
.so-mgr-page .so-mgr-table td:nth-child(1){width:9%;}
.so-mgr-page .so-mgr-table th:nth-child(2),
.so-mgr-page .so-mgr-table td:nth-child(2){width:40%;}
.so-mgr-page .so-mgr-table th:nth-child(3),
.so-mgr-page .so-mgr-table td:nth-child(3){width:4%;text-align:center;}
.so-mgr-page .so-mgr-table th:nth-child(4),
.so-mgr-page .so-mgr-table td:nth-child(4){width:9%;}
.so-mgr-page .so-mgr-table th:nth-child(5),
.so-mgr-page .so-mgr-table td:nth-child(5){width:7%;}
.so-mgr-page .so-mgr-table th:nth-child(6),
.so-mgr-page .so-mgr-table td:nth-child(6){width:8%;}
.so-mgr-page .so-mgr-table th:nth-child(7),
.so-mgr-page .so-mgr-table td:nth-child(7){width:8%;}
.so-mgr-page .so-mgr-table th:nth-child(8),
.so-mgr-page .so-mgr-table td:nth-child(8){width:7%;}
.so-mgr-page .so-mgr-table th:nth-child(9),
.so-mgr-page .so-mgr-table td:nth-child(9){width:8%;}
.so-mgr-page .so-mgr-badge,
.so-mgr-page .so-mgr-action .btn{
  max-width:100%;
  white-space:nowrap;
}
@media(max-width:1100px){
  .so-mgr-page .so-mgr-table{min-width:980px !important;}
}

/* =========================================================
   FIX: Manage > Special Order > History table column layout
   Previous generic SO table fit rule uses nth-child for 9-column
   active tables. History has an extra checkbox column, so Item is
   column 3 and must stay wide.
========================================================= */
.so-mgr-page .so-mgr-table:has(#so-history-check-all){
  width:100%;
  min-width:1120px !important;
  table-layout:fixed;
}
.so-mgr-page .so-mgr-table:has(#so-history-check-all) th,
.so-mgr-page .so-mgr-table:has(#so-history-check-all) td{
  vertical-align:top;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
}
.so-mgr-page .so-mgr-table:has(#so-history-check-all) th:nth-child(1),
.so-mgr-page .so-mgr-table:has(#so-history-check-all) td:nth-child(1){width:3%;text-align:center;}
.so-mgr-page .so-mgr-table:has(#so-history-check-all) th:nth-child(2),
.so-mgr-page .so-mgr-table:has(#so-history-check-all) td:nth-child(2){width:11%;}
.so-mgr-page .so-mgr-table:has(#so-history-check-all) th:nth-child(3),
.so-mgr-page .so-mgr-table:has(#so-history-check-all) td:nth-child(3){width:34%;}
.so-mgr-page .so-mgr-table:has(#so-history-check-all) th:nth-child(4),
.so-mgr-page .so-mgr-table:has(#so-history-check-all) td:nth-child(4){width:4%;text-align:center;}
.so-mgr-page .so-mgr-table:has(#so-history-check-all) th:nth-child(5),
.so-mgr-page .so-mgr-table:has(#so-history-check-all) td:nth-child(5){width:10%;}
.so-mgr-page .so-mgr-table:has(#so-history-check-all) th:nth-child(6),
.so-mgr-page .so-mgr-table:has(#so-history-check-all) td:nth-child(6){width:8%;}
.so-mgr-page .so-mgr-table:has(#so-history-check-all) th:nth-child(7),
.so-mgr-page .so-mgr-table:has(#so-history-check-all) td:nth-child(7){width:9%;}
.so-mgr-page .so-mgr-table:has(#so-history-check-all) th:nth-child(8),
.so-mgr-page .so-mgr-table:has(#so-history-check-all) td:nth-child(8){width:8%;}
.so-mgr-page .so-mgr-table:has(#so-history-check-all) th:nth-child(9),
.so-mgr-page .so-mgr-table:has(#so-history-check-all) td:nth-child(9){width:8%;}
.so-mgr-page .so-mgr-table:has(#so-history-check-all) th:nth-child(10),
.so-mgr-page .so-mgr-table:has(#so-history-check-all) td:nth-child(10){width:8%;}
.so-mgr-page .so-mgr-table:has(#so-history-check-all) td:nth-child(3) strong{
  display:block;
  line-height:1.25;
}
.so-mgr-page .so-mgr-table:has(#so-history-check-all) td:nth-child(3) .ths-muted{
  display:block;
  margin-top:4px;
}