/* quPos pfSense-compatible admin skin - v1.0.30 */
:root{
  --pf-nav:#1f1f1f;--pf-nav-2:#2b2b2b;--pf-active:#d71920;--pf-link:#337ab7;
  --pf-bg:#f3f3f3;--pf-panel:#fff;--pf-panel-head:#f5f5f5;--pf-border:#c9c9c9;
  --pf-text:#333;--pf-muted:#777;--pf-input:#fff;--pf-shadow:0 1px 2px rgba(0,0,0,.08);
  --pf-success:#5cb85c;--pf-warning:#f0ad4e;--pf-danger:#d9534f;--pf-info:#5bc0de;--pf-tab-hover-border:#eee;
  --pf-login-bg:#244878;--pf-login-header-bg:#fff;--pf-login-title:#fff;--pf-login-line:#b7c8de;--pf-login-placeholder:#b8aea5;--pf-login-logo:#263ea0;--pf-login-caption:#333;--pf-modal-backdrop-bg:rgba(0,0,0,.62);--pf-modal-shadow:rgba(0,0,0,.24);
  --pf-table-has-items-bg:#ffc5514d;--pf-product-active-bg:#ffc5514d;--pf-product-has-quantity-bg:#c2e2ff;--pf-catalog-active-bg:rgba(201,201,201,.07);--pf-catalog-active-border:rgba(201,201,201,.35);--pf-order-item-hover-bg:var(--pf-panel-head);--pf-adisyon-item-hover-bg:#ffe9cb;--pf-staff-cart-hover-bg:#ffe9cb;--pf-staff-cart-bg:rgb(243,243,243);--pf-staff-cart-border:rgb(204,204,204);--pf-content-top:0px;--pf-navigation-layer:4000;--pf-navigation-dropdown-layer:4010;--pf-navigation-branch-layer:4020;--pf-radius:5px;--ui-control-height:38px;--ui-gap-sm:6px;--ui-gap:10px;--ui-gap-y:12px;--ui-section-gap:20px;
  --brand:var(--pf-active)!important;--ink:var(--pf-text)!important;--muted:var(--pf-muted)!important;
  --line:var(--pf-border)!important;--bg:var(--pf-bg)!important;--card:var(--pf-panel)!important;
  overflow-x:hidden;overflow-y:auto;
}
html[data-pfsense-theme="dark"]{
  --pf-nav:#0f0f10;--pf-nav-2:#1b1b1d;--pf-active:#e53339;--pf-link:#62a8e5;
  --pf-bg:#17181a;--pf-panel:#232528;--pf-panel-head:#2c2f33;--pf-border:#44484d;
  --pf-text:#eceff1;--pf-muted:#aeb4ba;--pf-input:#1c1e20;--pf-shadow:0 1px 2px rgba(0,0,0,.35);--pf-tab-hover-border:#555a60;--pf-table-has-items-bg:#20313c;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body,body *{-webkit-user-select:none!important;user-select:none!important}
html,body{background:var(--pf-bg)!important;color:var(--pf-text)!important;font-family:Arial,Helvetica,sans-serif!important}
a{color:var(--pf-link)}

/* pfSense top navigation */
.manage-top,.pos-top,.admin-sidebar{
  position:sticky!important;top:0!important;z-index:var(--pf-navigation-layer)!important;min-height:52px!important;
  width:100%!important;display:flex!important;align-items:stretch!important;gap:0!important;
  padding:0 14px!important;border:0!important;border-radius:0 !important;
  background:linear-gradient(rgb(43,43,43),rgb(27,27,27))!important;color:rgb(238,238,238)!important;
  box-shadow:rgba(0,0,0,.28) 0 1px 4px!important;
}
.manage-brand,.pos-brand,.admin-brand{
  min-height:49px!important;display:flex!important;align-items:center!important;gap:9px!important;
  margin:0!important;padding:0 14px 0 0!important;color:rgb(255,255,255)!important;text-decoration:none!important;
  border-right:1px solid rgba(255,255,255,.12)!important;white-space:nowrap!important;
}
.manage-brand>span,.pos-brand>span,.admin-brand>span{
  width:auto!important;height:auto!important;display:inline!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:0 !important;color:#fff!important;background:none!important;
  font-size:0!important;line-height:1!important;letter-spacing:0!important;
}
.manage-brand>span:after,.pos-brand>span:after,.admin-brand>span:after{
  content:"quPOS";font:700 italic 19px Arial,Helvetica,sans-serif;color:#fff;letter-spacing:-.5px;
}
.manage-brand strong,.pos-brand strong,.admin-brand strong{color:#ddd!important;font-size:12px!important;font-weight:400!important}
.manage-top nav,.pos-header-menu,.admin-sidebar nav{
  min-width:0!important;display:flex!important;align-items:stretch!important;gap:0!important;margin:0!important;
  padding:0!important;overflow-x:auto!important;overflow-y:hidden!important;
}
.manage-top nav a,.manage-top nav button,.pos-header-menu a,.pos-header-menu button,
.admin-sidebar nav a,.admin-sidebar nav button,.logout-button{
  min-height:49px!important;display:flex!important;align-items:center!important;gap:6px!important;
  flex:0 0 auto!important;margin:0!important;padding:0 14px!important;border:0!important;border-radius:0 !important;
  color:#ddd!important;background:transparent!important;text-decoration:none!important;font:400 13px Arial,Helvetica,sans-serif!important;
  box-shadow:none!important;white-space:nowrap!important;
}
.manage-top nav a:hover,.manage-top nav button:hover,.pos-header-menu a:hover,.pos-header-menu button:hover,
.admin-sidebar nav a:hover,.admin-sidebar nav button:hover,.logout-button:hover{color:#fff!important;background:#363636!important}
.manage-top nav a.active,.pf-pos-screen-menu .pos-screen-menu-item.active,.admin-sidebar nav .active{
  color:#fff!important;background:#111!important;box-shadow:inset 0 -3px 0 var(--pf-active)!important;
}
.admin-sidebar nav button span,.admin-sidebar nav a span{font-size:13px!important}
.admin-sidebar nav button b,.admin-sidebar nav a b{display:inline!important;font-weight:400!important}
.logout-button{margin-left:auto!important;border-left:1px solid rgba(255,255,255,.12)!important}
.pf-theme-toggle{
  min-width:44px!important;min-height:49px!important;margin-left:auto!important;padding:0 12px!important;
  border:0!important;border-left:1px solid rgba(255,255,255,.12)!important;border-radius:0 !important;
  color:#ddd!important;background:transparent!important;font-size:16px!important;cursor:pointer!important;
}
.pf-theme-toggle:hover{color:#fff!important;background:#363636!important}

/* Convert the former sidebar shell into pfSense top-navigation page */
.admin-shell{display:block!important;min-height:100vh!important;background:var(--pf-bg)!important}
.admin-sidebar{height:auto!important;flex-direction:row!important}
.admin-sidebar nav{flex:1 1 auto!important}
.admin-main{width:min(100%,1380px)!important;margin:0 auto!important;padding:18px 15px 60px!important}
.admin-topbar{
  display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:15px!important;
  margin:0 0 14px!important;padding:0 0 8px!important;border-bottom:1px solid var(--pf-border)!important;background:transparent!important;
}
.admin-topbar .eyebrow{display:none!important}
.admin-topbar h1{padding-top:10px;margin:0!important;color:var(--pf-text)!important;font:400 24px/1.25 Arial,Helvetica,sans-serif!important}
.admin-topbar>a{padding:6px 9px!important;border:1px solid var(--pf-border)!important;border-radius:var(--pf-radius) !important;background:var(--pf-panel)!important;color:var(--pf-link)!important;text-decoration:none!important;font-size:12px!important}
.manage-shell{width:min(100%,1380px)!important;margin:0 auto!important;padding:18px 15px 60px!important}
.manage-page-heading{display:flex!important;align-items:baseline!important;justify-content:flex-start!important;flex-wrap:wrap!important;gap:0!important;min-height:34px!important;margin-top:0!important;margin-right:0!important;margin-bottom:15px!important;margin-left:0!important;padding:0!important;border:0!important;color:var(--pf-text)!important}
.manage-page-heading>span,.manage-page-heading>div>span{display:inline!important;margin:0!important;padding:0 5px 0 0!important;color:var(--pf-link)!important;font:400 20px/1.35 Arial,Helvetica,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
.manage-page-heading>span:after,.manage-page-heading>div>span:after{content:" / ";color:var(--pf-muted)!important}
.manage-page-heading>h1,.manage-page-heading>div>h1{display:inline!important;margin:0!important;padding:0!important;color:var(--pf-text)!important;font:400 20px/1.35 Arial,Helvetica,sans-serif!important}
.manage-page-heading>div{display:contents!important}
.manage-page-heading>a,.manage-page-heading .active-project-picker{margin-left:auto!important}
.pos-screen{padding:18px 15px 15px!important}

/* Panels / widgets */
.admin-card,.manage-card,.ticket-panel,.catalog-panel,.payment-selection-panel,.amount-panel,.method-panel,
.table-card,.area-card,.category-admin-grid article,.admin-notice-card,.admin-login-modal,.pos-modal,
.manage-modal form,.manage-modal>section,.new-customer-form,.open-account-customer{
  border:1px solid var(--pf-border)!important;border-radius:var(--pf-radius) !important;
  background:var(--pf-panel)!important;color:var(--pf-text)!important;box-shadow:var(--pf-shadow)!important;
}
.admin-card,.manage-card{padding:0!important;overflow:hidden!important}
.admin-card-toolbar,.manage-card>header{
  margin:0!important;border-bottom:1px solid var(--pf-border)!important;
  background:var(--pf-panel-head)!important;border-radius:0 !important;
}
.admin-card-toolbar h2,.manage-card h2{margin:0!important;font:600 14px Arial,Helvetica,sans-serif!important;color:var(--pf-text)!important}
.admin-card-toolbar p,.manage-card>header p{margin:3px 0 0!important;color:var(--pf-muted)!important}
.admin-card>:not(.admin-card-toolbar):not(.settings-save-row),.manage-card>:not(header){ }
.mode-card{padding:12px 14px!important;overflow:visible!important}
.mode-card h2{font-size:14px!important}
.stat-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin:0 0 16px!important}
.stat-grid article{border:1px solid var(--pf-border)!important;border-radius:var(--pf-radius) !important;padding:12px!important;background:var(--pf-panel)!important;box-shadow:var(--pf-shadow)!important}
.stat-grid article span{color:var(--pf-muted)!important;font-size:11px!important}
.stat-grid article strong{display:block!important;margin-top:4px!important;color:var(--pf-text)!important;font-size:22px!important;font-weight:400!important}

/* Tables */
.admin-table-wrap,.responsive-table{margin:0!important;overflow:auto!important}
table{width:100%!important;border-collapse:collapse!important;background:var(--pf-panel)!important;color:var(--pf-text)!important}
th,td{border-top:1px solid var(--pf-border)!important;border-bottom:0!important;vertical-align:middle!important}
table:not(.system-about-table) th:not(.log-permission-cell),table:not(.system-about-table) td:not(.log-permission-cell):not(.empty-table-row):not(.table-empty){text-align:right!important}
thead th{border-top:0!important;border-bottom:2px solid var(--pf-border)!important;background:var(--pf-panel-head)!important;color:var(--pf-text)!important;font-size:12px!important;font-weight:700!important}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--pf-panel) 92%,var(--pf-text) 8%)!important}
tbody tr:hover{background:color-mix(in srgb,var(--pf-panel) 86%,var(--pf-link) 14%)!important}

/* Inputs / buttons */
button,input,select,textarea{font-family:Arial,Helvetica,sans-serif!important}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.pf-login-input):not(.keypad-input),select,textarea{
  border:1px solid var(--pf-border)!important;border-radius:var(--pf-radius) !important;background:var(--pf-input)!important;
  color:var(--pf-text)!important;box-shadow:inset 0 1px 1px rgba(0,0,0,.08)!important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.pf-login-input):not(.keypad-input),select{height:var(--ui-control-height);min-height:var(--ui-control-height)}
textarea{height:auto;min-height:88px}
input:not(.pf-login-input):focus,select:focus,textarea:focus{border-color:#66afe9!important;outline:0!important;box-shadow:0 0 0 2px rgba(102,175,233,.22)!important}
.button-primary:not(.pf-login-submit),.primary:not(.pf-login-submit),.touch-keypad-grid .key-complete{
  padding:7px 15px;text-decoration:none;border:1px solid var(--pf-button-red-border)!important;border-radius:var(--pf-radius) !important;color:var(--pf-button-red-text)!important;background:var(--pf-button-red)!important;
}
.button-primary:not(.pf-login-submit):hover,.primary:not(.pf-login-submit):hover{background:var(--pf-button-red-hover)!important;border-color:var(--pf-button-red-border)!important}
.button-secondary,.admin-card button,.manage-card button,
.manage-modal button:not(header button),.pos-modal button:not(header button),
.catalog-categories button,.split-row button,.ticket-tools button,.touch-keypad-grid button,
.customer-picker-tools button,.new-customer-actions button{
  border-radius:var(--pf-radius) !important;border-color:var(--pf-border)!important;background:var(--pf-panel)!important;color:var(--pf-text)!important;
}
.danger,.danger-link{color:#fff!important;background:var(--pf-danger)!important;border-color:#d43f3a!important}

/* Forms */
.admin-form-grid label>span,.field-grid label>span{color:var(--pf-text)!important;font-size:12px!important;font-weight:600!important}
.settings-save-row{border-top:1px solid var(--pf-border)!important;background:var(--pf-panel-head)!important}
.password-card .admin-card-toolbar{border-bottom:1px solid var(--pf-border)!important}

/* Tabs/chips/buttons, close to pfSense bootstrap nav pills */
.catalog-categories{border-bottom:0px solid var(--pf-border)!important;padding-bottom:0px!important}
.catalog-categories button{margin-bottom:0;border-width:1px 1px 0!important;border-style:solid solid none!important;border-color:transparent transparent currentcolor!important;border-image:initial!important;border-top-left-radius:var(--pf-radius)!important;border-top-right-radius:var(--pf-radius)!important;border-bottom-right-radius:0!important;border-bottom-left-radius:0!important;background:transparent!important;color:var(--pf-link)!important}
.catalog-categories button.active{border-color:var(--pf-catalog-active-border)!important;background:var(--pf-catalog-active-bg)!important;color:var(--pf-text)!important}
.tag,.badge{border-radius:var(--pf-radius) !important}

/* Alerts */
.notice,.manage-notice,.pos-notice,.form-error,.payment-error{
  border:1px solid transparent!important;border-radius:var(--pf-radius) !important;box-shadow:none!important;
}
.notice-success{color:#3c763d!important;background:#dff0d8!important;border-color:#d6e9c6!important}
.notice-warning{color:#8a6d3b!important;background:#fcf8e3!important;border-color:#faebcc!important}
.notice-error,.form-error,.payment-error{color:#a94442!important;background:#f2dede!important;border-color:#ebccd1!important}
.manage-notice,.pos-notice{color:#31708f!important;background:#d9edf7!important;border-color:#bce8f1!important}

/* Modals */
.manage-modal,.pos-modal-backdrop,.admin-modal-backdrop,.admin-notice-backdrop,.media-viewer,.admin-login-backdrop:not(.pf-login-screen){
  background:rgba(0,0,0,.62)!important;backdrop-filter:none!important;
}
.manage-modal form,.manage-modal>section,.pos-modal,.admin-modal,.admin-notice-card,.admin-login-modal{border-radius:var(--pf-radius) !important}
.manage-modal header,.pos-modal header,.admin-modal-head,.admin-notice-card header{
  border-bottom:1px solid var(--pf-border)!important;
}
.manage-modal footer,.pos-modal footer,.admin-modal-actions{border-top:1px solid var(--pf-border)!important}

/* POS */
.order-layout{gap:12px!important}
.ticket-panel,.catalog-panel,.payment-selection-panel,.amount-panel,.method-panel{border-radius:var(--pf-radius) !important}
.table-card{min-height:120px!important;border-radius:var(--pf-radius) !important}
.table-card.open{border-left:4px solid var(--pf-active)!important;background:var(--pf-panel)!important}
.table-card.open.has-items{background:var(--pf-table-has-items-bg)!important}
.table-card.empty strong{opacity:.5!important}
.table-card strong{color:var(--pf-link)!important}
.method{border-radius:var(--pf-radius) !important;background:var(--pf-panel)!important;color:var(--pf-text)!important}
.method.active{border-color:var(--pf-active)!important;color:var(--pf-active)!important;background:color-mix(in srgb,var(--pf-panel) 88%,var(--pf-active) 12%)!important}
.amount-summary span,.change-box{border-radius:var(--pf-radius) !important;background:var(--pf-panel-head)!important;color:var(--pf-text)!important}
.touch-keypad-grid button{border-radius:var(--pf-radius) !important}

/* Theme compatibility for hardcoded white areas */
html[data-pfsense-theme="dark"] .preview-slot,
html[data-pfsense-theme="dark"] .product-image-gallery-admin article,
html[data-pfsense-theme="dark"] .product-image-gallery-empty,
html[data-pfsense-theme="dark"] .customer-list-item,
html[data-pfsense-theme="dark"] .payment-history-row{background:var(--pf-panel)!important;color:var(--pf-text)!important;border-color:var(--pf-border)!important}
html[data-pfsense-theme="dark"] .admin-topbar>a{background:var(--pf-panel)!important}

/* Small screens: pfSense top navigation becomes horizontally scrollable */
@media(max-width:980px){
  .admin-shell{grid-template-columns:none!important}
  .admin-sidebar{padding:0 8px!important}
  .admin-brand strong{display:none!important}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .manage-top,.pos-top,.admin-sidebar{position:sticky!important;flex-wrap:nowrap!important;align-items:stretch!important;min-height:50px!important;padding:0 6px!important}
  .manage-top nav,.pos-header-menu,.admin-sidebar nav{order:initial!important;width:auto!important;flex:1 1 auto!important}
  .manage-brand,.pos-brand,.admin-brand{padding-right:8px!important;margin-right:4px!important}
  .manage-brand strong,.pos-brand strong,.admin-brand strong{display:none!important}
  .manage-top nav a,.manage-top nav button,.pos-header-menu a,.pos-header-menu button,.admin-sidebar nav a,.admin-sidebar nav button{padding:0 10px!important;font-size:12px!important}
  .logout-button{font-size:0!important;padding:0 10px!important}.logout-button:after{content:"↪";font-size:16px!important}
  .pf-theme-toggle{min-width:38px!important;padding:0 8px!important}
  .admin-main,.manage-shell,.pos-screen{padding-left:9px!important;padding-right:9px!important}
  .stat-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .admin-card-toolbar,.manage-card>header{align-items:flex-start!important}
}

/* v1.0.16 - comfortable density: reduce visual clutter without changing pfSense structure */
:root{
  --pf-control-h:var(--ui-control-height);
  --pf-control-py:0;
  --pf-control-px:14px;
  --pf-card-py:14px;
  --pf-card-px:16px;
  --pf-cell-py:11px;
  --pf-cell-px:14px;
  --pf-form-gap:var(--ui-gap-y);
}.admin-card-toolbar, .manage-card > header { min-height: 56px !important; padding: 20px !important; }
.admin-card-toolbar h2,.manage-card h2{
  font-size:15px!important;
  line-height:1.35!important;
}
.admin-card-toolbar p,.manage-card>header p{
  margin-top:4px!important;
  font-size:12px!important;
  line-height:1.5!important;
}
.admin-card,.manage-card{margin-bottom:20px!important}

/* Tables: keep the pfSense grid, but stop rows feeling compressed. */
th,td{
  padding:var(--pf-cell-py) var(--pf-cell-px)!important;
  line-height:1.45!important;
}
thead th{font-size:12px!important;line-height:1.35!important}
.row-actions button{
  height:var(--ui-control-height)!important;min-height:var(--ui-control-height)!important;
  padding:0 var(--pf-control-px)!important;
}

/* Form labels and controls. */
.admin-form-grid{
  gap:var(--pf-form-gap)!important;
  padding:18px!important;
}
.field-grid{
  padding:18px!important;
}
.admin-form-grid label,.field-grid label{
  gap:var(--ui-gap-sm)!important;
  line-height:1.4!important;
}
.admin-form-grid label>span,.field-grid label>span,
.admin-form-grid>label:not(.checkbox-field),.field-grid>label{
  font-size:12px!important;
}input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.pf-login-input):not(.keypad-input),select,#qrUrl,.catalog-search input,.customer-picker-tools input,.new-customer-form input{margin:0;min-height:var(--pf-control-h)!important;padding:0 11px!important;line-height:1.35!important}textarea,.new-customer-form textarea{margin:0;padding:9px 11px!important;line-height:1.35!important}
textarea{min-height:88px!important}

/* Buttons throughout admin/management surfaces. */
.manage-shell button:not(.customer-ledger-link):not(.incident-download-button),.admin-main button,
.manage-modal button:not(header button),.admin-modal button:not(.admin-modal-head button),
.admin-login-modal button,.admin-notice-card button:not(.admin-notice-close){
  margin:0;
  height:var(--pf-control-h)!important;min-height:var(--pf-control-h)!important;
  padding:0 var(--pf-control-px)!important;
  line-height:1.2!important;
}
.settings-save-row{
  padding:14px 18px!important;
}
.manage-card .settings-section:not(.company-settings-panel){border-top:1px solid var(--pf-border)}
.manage-card .settings-section:not(.company-settings-panel)>h3{margin:0!important;padding:16px 18px 0!important;color:var(--pf-text)!important;font-size:15px!important;line-height:1.35!important}
.manage-card .settings-section:not(.company-settings-panel)>h3+.field-grid{padding-top:12px!important}
.manage-card .settings-section:not(.company-settings-panel)>.action-row{padding:0 18px 18px!important}

/* Checkbox / permission rows are bordered UI elements, so padding matters directly. */
.permission-grid{
  gap:10px!important;
  margin-top:18px!important;
  padding:0 18px 18px!important;
}
.permission-grid label{
  gap:10px!important;
  padding:11px 12px!important;
  line-height:1.4!important;
}
.permission-grid small{margin-top:3px!important;line-height:1.45!important}
.check-row{gap:14px 20px!important;padding-top:6px!important}
.check-row label{gap:9px!important;padding:4px 0!important}
.checkbox-field{min-height:var(--pf-control-h)!important}

/* Secondary grouped elements. */
.area-card{padding:16px!important;margin-top:16px!important}
.table-chip{padding:12px 13px!important}
.tag,.badge{padding:5px 8px!important;line-height:1.35!important}
.notice,.manage-notice,.pos-notice,.form-error,.payment-error{
  padding:11px 14px!important;
  line-height:1.45!important;
}
.manage-modal form,.manage-modal>section,.admin-modal,.admin-notice-card,.admin-login-modal{
  padding:22px!important;
}
.manage-modal footer,.pos-modal footer,.admin-modal-actions{
  margin-top:18px!important;
  padding-top:14px!important;
}

/* Page-level spacing. */
.admin-main,.manage-shell{
  padding-top:24px!important;
}
.admin-topbar{
  margin-bottom:18px!important;
  padding-bottom:11px!important;
}

@media(max-width:700px){
  :root{
    --pf-card-py:13px;
    --pf-card-px:13px;
    --pf-cell-py:10px;
    --pf-cell-px:11px;
    --pf-form-gap:var(--ui-gap-y);
  }
    .permission-grid{padding:0 14px 14px!important}
  .manage-modal form,.manage-modal>section,.admin-modal,.admin-notice-card,.admin-login-modal{padding:18px!important}
}

/* v1.0.17 - modal spacing, red action buttons and pfSense dropdown navigation */
:root{
  --pf-button-red:var(--pf-active);
  --pf-button-red-text:#fff;
  --pf-button-red-hover:color-mix(in srgb,var(--pf-button-red) 84%,#000 16%);
  --pf-button-red-border:color-mix(in srgb,var(--pf-button-red) 88%,#000 12%);
}

/* Modal header/footer: transparent background; spacing is owned by the modal body. */
.manage-modal header,.pos-modal header,.admin-modal-head,.admin-notice-card header,.admin-login-modal header{
  margin-bottom:10px;
  background:none!important;
  padding:0 0 20px 0!important;
}
.manage-modal footer,.pos-modal footer,.admin-modal-actions,.admin-notice-card footer,.admin-login-modal footer{
  background:none!important;
  padding:20px 0 0 0!important;
}

/* Admin/management action buttons use the theme-level red variable. Header navigation is excluded. */
.manage-shell button:not(.pf-theme-toggle):not(.pf-secondary-action):not(.button-secondary):not(.customer-ledger-link):not(.incident-download-button),
.admin-main button:not(.pf-theme-toggle):not(.preview-slot):not(.product-image-admin-preview):not(.pf-secondary-action):not(.button-secondary),
.manage-modal button:not(.pf-theme-toggle):not(header button):not(.pf-secondary-action):not(.button-secondary),
.admin-modal button:not(.pf-theme-toggle):not(.admin-modal-head button):not(.pf-secondary-action):not(.button-secondary),
.admin-login-modal button:not(.pf-theme-toggle):not(header button):not(.pf-secondary-action):not(.button-secondary),
.admin-notice-card button:not(.pf-theme-toggle):not(.admin-notice-close):not(.pf-secondary-action):not(.button-secondary){
  margin:0;
  height:var(--ui-control-height)!important;min-height:var(--ui-control-height)!important;
  padding:0 var(--pf-control-px)!important;
  border:1px solid var(--pf-button-red-border)!important;
  border-radius:var(--pf-radius) !important;
  color:var(--pf-button-red-text)!important;
  background:var(--pf-button-red)!important;
  box-shadow:none!important;
}
.manage-shell button:not(.pf-theme-toggle):not(.pf-secondary-action):not(.button-secondary):not(.customer-ledger-link):not(.incident-download-button):hover,
.admin-main button:not(.pf-theme-toggle):not(.product-image-admin-preview):not(.pf-secondary-action):not(.button-secondary):hover,
.manage-modal button:not(.pf-theme-toggle):not(header button):not(.pf-secondary-action):not(.button-secondary):hover,
.admin-modal button:not(.pf-theme-toggle):not(.admin-modal-head button):not(.pf-secondary-action):not(.button-secondary):hover,
.admin-login-modal button:not(.pf-theme-toggle):not(header button):not(.pf-secondary-action):not(.button-secondary):hover,
.admin-notice-card button:not(.pf-theme-toggle):not(.admin-notice-close):not(.pf-secondary-action):not(.button-secondary):hover{
  color:var(--pf-button-red-text)!important;
  background:var(--pf-button-red-hover)!important;
  border-color:var(--pf-button-red-border)!important;
}
.manage-shell button:disabled,.admin-main button:disabled,.manage-modal button:disabled,.admin-modal button:disabled{
  opacity:.55!important;
}

/* pfSense-style dropdown navigation. */
.manage-top nav,.admin-sidebar nav,.pos-header-menu{overflow:visible!important}
.pf-nav-item{position:relative!important;display:flex!important;align-items:stretch!important;flex:0 0 auto!important}
.pf-nav-parent{
  min-height:49px!important;display:flex!important;align-items:center!important;gap:7px!important;
  margin:0!important;padding:0 14px!important;border:0!important;border-radius:0 !important;
  color:#ddd!important;background:transparent!important;font:400 13px Arial,Helvetica,sans-serif!important;
  text-decoration:none!important;white-space:nowrap!important;cursor:pointer!important;
}
.pf-nav-parent:hover,.pf-nav-item.open>.pf-nav-parent,.pf-nav-item:focus-within>.pf-nav-parent{color:#fff!important;background:#363636!important}
.pf-nav-parent.active,.pf-nav-item.has-active>.pf-nav-parent{color:#fff!important;background:#111!important;box-shadow:inset 0 -3px 0 var(--pf-active)!important}
.pf-nav-parent .pf-nav-caret{font-size:9px!important;line-height:1;opacity:.8;transform:translateY(1px)}
.pf-nav-dropdown{
  position:absolute!important;top:49px!important;left:0!important;z-index:var(--pf-navigation-dropdown-layer)!important;display:none!important;
  min-width:230px!important;padding:5px 0!important;border:1px solid var(--pf-border)!important;border-top:3px solid var(--pf-active)!important;
  border-radius:var(--pf-radius) !important;background:var(--pf-panel)!important;color:var(--pf-text)!important;
  box-shadow:0 6px 14px rgba(0,0,0,.22)!important;
}
.pf-nav-item.open>.pf-nav-dropdown{display:block!important}
.manage-top nav .pf-nav-dropdown a,.manage-top nav .pf-nav-dropdown button,
.admin-sidebar nav .pf-nav-dropdown a,.admin-sidebar nav .pf-nav-dropdown button,
.pos-header-menu .pf-nav-dropdown a,.pos-header-menu .pf-nav-dropdown button{
  width:100%!important;min-height:0!important;display:block!important;margin:0!important;padding:10px 14px!important;
  border:0!important;border-radius:0 !important;color:var(--pf-text)!important;background:transparent!important;
  box-shadow:none!important;text-align:left!important;text-decoration:none!important;font:400 13px/1.35 Arial,Helvetica,sans-serif!important;
  white-space:nowrap!important;
}
.manage-top nav .pf-nav-dropdown a:hover,.manage-top nav .pf-nav-dropdown button:hover,
.admin-sidebar nav .pf-nav-dropdown a:hover,.admin-sidebar nav .pf-nav-dropdown button:hover,
.pos-header-menu .pf-nav-dropdown a:hover,.pos-header-menu .pf-nav-dropdown button:hover,
.pf-nav-dropdown .active{
  color:#fff!important;background:var(--pf-button-red)!important;
}
.pf-nav-dropdown .pf-submenu-note{display:block;margin-top:2px;color:var(--pf-muted);font-size:10px}

@media(max-width:700px){
  .manage-top nav,.admin-sidebar nav,.pos-header-menu{overflow-x:auto!important;overflow-y:hidden!important}
  .pf-nav-parent{padding:0 10px!important;font-size:12px!important}
  .pf-nav-item.open>.pf-nav-dropdown{
    position:fixed!important;top:50px!important;left:8px!important;right:8px!important;width:auto!important;min-width:0!important;
    max-height:calc(100vh - 62px)!important;overflow:auto!important;
  }
  .pf-nav-item:hover>.pf-nav-dropdown:not(:focus-within){display:none!important}
  .pf-nav-item.open>.pf-nav-dropdown{display:block!important}
}



/* v1.0.18 - business table layout, button spacing and thin scrollbars */
:root{
  --pf-table-chip-bg:#f5f5f5;
  --pf-area-head-border:#ccc;
  --pf-button-gap:var(--ui-gap);
  --ui-scrollbar-thumb:#9a9a9a;
}
html[data-pfsense-theme="dark"]{
  --pf-table-chip-bg:#34383d;
  --pf-area-head-border:#555b61;
  --ui-scrollbar-thumb:#656a70;
}

/* Business / Sections and tables */
#areaCards{padding-bottom:1px!important}
.area-card{margin:10px!important}
.table-chips{grid-template-columns:repeat(auto-fill,300px)!important;gap:10px!important;align-items:start!important}
.table-chip{
  height:75px!important;min-height:75px!important;max-height:75px!important;
  border-radius:var(--pf-radius) !important;
  padding-left:20px!important;
  padding-right:20px!important;
  background:var(--pf-table-chip-bg)!important;
}

/* Section/table appearance is theme aware. */
.area-head{
  border-bottom:1px solid var(--pf-area-head-border)!important;
  padding-bottom:15px!important;
  margin-bottom:16px!important;
}

/* 1px scrollbars in Chromium/WebKit; Firefox native API only supports thin/auto/none. */
*{
  scrollbar-width:thin!important;
  scrollbar-color:var(--ui-scrollbar-thumb) transparent!important;
}
@supports selector(::-webkit-scrollbar){
  /* Chromium also implements scrollbar-width/color; reset them so they do not override WebKit 1px sizing. */
  *{
    scrollbar-width:auto!important;
    scrollbar-color:auto!important;
  }
  *::-webkit-scrollbar{
    width:1px!important;
    height:1px!important;
  }
  *::-webkit-scrollbar-track{
    background:transparent!important;
    border:0!important;
  }
  *::-webkit-scrollbar-thumb{
    background:var(--ui-scrollbar-thumb)!important;
    border:0!important;
    border-radius:0 !important;
    min-width:1px!important;
    min-height:1px!important;
  }
  *::-webkit-scrollbar-button,
  *::-webkit-scrollbar-button:single-button,
  *::-webkit-scrollbar-button:vertical:decrement,
  *::-webkit-scrollbar-button:vertical:increment,
  *::-webkit-scrollbar-button:horizontal:decrement,
  *::-webkit-scrollbar-button:horizontal:increment,
  *::-webkit-scrollbar-button:single-button:vertical:decrement,
  *::-webkit-scrollbar-button:single-button:vertical:increment,
  *::-webkit-scrollbar-button:single-button:horizontal:decrement,
  *::-webkit-scrollbar-button:single-button:horizontal:increment{
    -webkit-appearance:none!important;
    appearance:none!important;
    display:none!important;
    width:0!important;
    height:0!important;
    min-width:0!important;
    min-height:0!important;
    background:transparent!important;
    border:0!important;
  }
  *::-webkit-scrollbar-corner{
    width:0!important;
    height:0!important;
    background:transparent!important;
  }
}

@media(max-width:650px){
  .table-chips{grid-template-columns:repeat(auto-fill,300px)!important}
}


/* v1.0.19 - responsive pfSense top menu, controls and modal-header contract */
:root{
  --pf-modal-header-button-bg:#fff;
  --pf-modal-header-button-text:#000;
  --pf-control-check-size:16px;
}


/* Checkbox/radio alignment is independent from generic input sizing. */
input[type="checkbox"],input[type="radio"]{
  width:var(--pf-control-check-size)!important;height:var(--pf-control-check-size)!important;
  min-width:var(--pf-control-check-size)!important;min-height:var(--pf-control-check-size)!important;
  max-width:var(--pf-control-check-size)!important;max-height:var(--pf-control-check-size)!important;
  margin:0!important;padding:0!important;box-shadow:none!important;vertical-align:middle!important;flex:0 0 var(--pf-control-check-size)!important;
}
.checkbox-field,.check-control,.check-setting,.check-row label,.checks label,.permission-grid label,.project-assignment-grid label{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;text-align:left!important;
}
.checkbox-field>span,.check-control>span,.check-setting>span,.check-row label>span,.checks label>span,.permission-grid label>span,.project-assignment-grid label>span{min-width:0!important;flex:1 1 auto!important}

/* On/off switches stay vertically centered; radius remains component-specific. */
.switch{display:inline-flex!important;align-items:center!important;vertical-align:middle!important;position:relative!important}
.switch input{position:absolute!important;opacity:0!important;pointer-events:none!important}
.switch span{display:block!important;width:58px!important;height:32px!important;position:relative!important}
.switch span:after{content:"";position:absolute!important;top:4px!important;left:4px!important;width:24px!important;height:24px!important}
.switch input:checked+span:after{left:30px!important}

/* Top navigation: do not crop menu items on narrower management screens; wrap cleanly instead. */
.manage-top,.admin-sidebar,.pos-top{overflow:visible!important}
.manage-top nav,.admin-sidebar nav,.pos-header-menu{flex:1 1 auto!important;min-width:0!important;max-width:100%!important}
/* management.css has a broad .manage-top span rule; neutralize it inside dropdown parents. */
.pf-nav-parent>span{color:inherit!important;font:inherit!important;letter-spacing:normal!important}
.pf-nav-parent>.pf-nav-caret{font-size:9px!important;line-height:1!important;opacity:.8!important}
@media(max-width:1100px){
  .manage-top,.admin-sidebar,.pos-top{padding-left:6px!important;padding-right:6px!important}
  .manage-brand,.admin-brand,.pos-brand{margin-right:4px!important;padding-right:8px!important}
  .manage-brand strong,.admin-brand strong,.pos-brand strong{display:none!important}
  .manage-top nav a,.manage-top nav button,.admin-sidebar nav a,.admin-sidebar nav button,.pos-header-menu a,.pos-header-menu button,.pf-nav-parent{padding-left:9px!important;padding-right:9px!important}
}
@media(max-width:760px){
  .manage-top,.admin-sidebar,.pos-top{flex-wrap:wrap!important;height:auto!important;align-items:stretch!important}
  .manage-brand,.admin-brand,.pos-brand{flex:0 0 auto!important;min-height:42px!important}
  .manage-top nav,.admin-sidebar nav,.pos-header-menu{order:2!important;flex:1 0 100%!important;width:100%!important;overflow:visible!important;flex-wrap:wrap!important;border-top:1px solid rgba(255,255,255,.10)!important}
  .manage-top nav>a,.manage-top nav>button,.admin-sidebar nav>a,.admin-sidebar nav>button,.pos-header-menu>a,.pos-header-menu>button,.pf-nav-parent{min-height:42px!important}
  .pf-nav-item{min-height:42px!important}
  .pf-nav-dropdown{top:42px!important}
  .logout-button,.header-logout{margin-left:0!important}
}

/* v1.0.21 - page-based dropdown navigation and menu loading overlay */
.pf-page-loading.admin-login-backdrop{
  position:fixed!important;inset:0!important;z-index:5000!important;
  width:100vw!important;height:100dvh!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  margin:0!important;padding:20px!important;background:rgba(0,0,0,.62)!important;
}
.pf-page-loading.admin-login-backdrop[hidden]{display:none!important}
.pf-page-loading-card{
  min-width:180px;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:18px 22px;border:1px solid var(--pf-border);border-radius:var(--pf-radius);
  background:var(--pf-panel);color:var(--pf-text);box-shadow:0 8px 28px rgba(0,0,0,.28);
}
.pf-page-loading-spinner{
  width:22px;height:22px;display:block;border:2px solid var(--pf-border);border-top-color:var(--pf-active);
  border-radius:999px!important;animation:pf-page-spin .7s linear infinite;
}
@keyframes pf-page-spin{to{transform:rotate(360deg)}}
body.pf-page-loading-open{overflow:hidden!important}

/* Project rule: only explicit action containers own button alignment and spacing. */
.action-row:not(.profile-action-row),.admin-modal-actions,.manage-modal footer,.pos-modal footer,.settings-save-row:not(.profile-action-row),
.new-customer-actions,.ticket-tools{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:var(--pf-button-gap)!important;
}
.row-actions{border-top:0 solid;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:var(--pf-button-gap)!important}
td.row-actions{display:table-cell!important;text-align:right!important;white-space:nowrap!important}
.row-actions-group{display:inline-flex!important;align-items:center!important;justify-content:flex-end!important;gap:var(--pf-button-gap)!important;vertical-align:middle!important}
td.row-actions>.row-actions-group>button{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;min-width:0!important;margin:0!important;vertical-align:middle!important}
.manage-card>header>button,.admin-card-toolbar>button{margin-left:auto!important}
.manage-card>header>.action-row,.admin-card-toolbar>.action-row,.area-head>.area-head-actions,.table-chip>.table-chip-actions{margin-left:auto!important}

.action-row>button,.admin-modal-actions>button,.manage-modal footer>button,.pos-modal footer>button,.settings-save-row>button{width:auto;min-width:0}

/* v1.0.24 - modal header actions and draggable modal handles */
:root{
  --pf-modal-header-button-bg:#fff;
  --pf-modal-header-button-text:#000;
}
.manage-modal header>button,
.pos-modal header>button,
.admin-modal-head>button,
.error-code-qr-modal header>button,
.admin-login-modal header>button,
.admin-notice-card>.admin-notice-close,
.qupos-terminal-dialog>header>button{
  position:relative;
  top:0!important;
  padding:10px!important;
  background-color:var(--pf-modal-header-button-bg)!important;
  color:var(--pf-modal-header-button-text)!important;
  border:0!important;
  box-shadow:none!important;
  font-size:20px!important;
}
.manage-modal header>button:hover,
.pos-modal header>button:hover,
.admin-modal-head>button:hover,
.error-code-qr-modal header>button:hover,
.admin-login-modal header>button:hover,
.admin-notice-card>.admin-notice-close:hover,
.qupos-terminal-dialog>header>button:hover{
  background-color:var(--pf-modal-header-button-bg)!important;
  color:var(--pf-modal-header-button-text)!important;
  border:0!important;
  box-shadow:none!important;
}
.pf-modal-drag-handle{cursor:move;user-select:none;touch-action:none}
.pf-modal-dragging{transition:none!important}

.switch-setting-row{
  width:430px;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
}
.switch-setting-row>span:first-child{display:grid!important;gap:5px!important;min-width:0!important}
.switch-setting-row small{color:var(--pf-muted)!important;font-weight:400!important;line-height:1.45!important}
.field-grid>.wide{grid-column:1/-1!important}
.image-field{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:end!important}
.image-field>label:first-child{min-width:0!important}
.image-field .upload-button{align-self:end!important;white-space:nowrap!important}
.image-field .settings-upload-status{grid-column:1/-1;color:var(--pf-muted)!important;line-height:1.4!important}
.manage-notice.error{background:var(--pf-button-red)!important;color:var(--pf-modal-header-button-bg)!important}
@media(max-width:700px){
  .image-field{grid-template-columns:1fr!important}
  .image-field .settings-upload-status{grid-column:auto!important}
  .switch-setting-row{align-items:flex-start!important}
}

/* v1.0.25 - account menu placement */
.pf-user-menu{margin-left:auto!important}
.pf-user-menu>.pf-nav-dropdown{left:auto!important;right:0!important}
.pf-user-menu>.pf-nav-parent{max-width:220px!important}
.pf-user-menu>.pf-nav-parent>span:first-child{max-width:170px!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* v1.0.26 - user menu, secondary actions, color picker, settings and event log */
:root{
  --pf-secondary-button-bg:#e9ecef;
  --pf-secondary-button-hover:#dce1e5;
  --pf-secondary-button-text:#343a40;
  --pf-secondary-button-border:#c8ced4;
  --pf-event-information:#337ab7;
  --pf-event-warning:#b57900;
  --pf-event-error:#b52a2a;
  --pf-photo-bg:#eceff1;
}
html[data-pfsense-theme="dark"]{
  --pf-modal-header-button-bg:#fff;
  --pf-modal-header-button-text:#000;
  --pf-secondary-button-bg:#3a3e43;
  --pf-secondary-button-hover:#474c52;
  --pf-secondary-button-text:#f0f2f4;
  --pf-secondary-button-border:#575d64;
  --pf-event-information:#70b7f1;
  --pf-event-warning:#efbd59;
  --pf-event-error:#ff7777;
  --pf-photo-bg:#30343a;
}

/* Theme is controlled from the user menu; no standalone top-level toggle is shown. */
.pf-theme-toggle{display:none!important}
.pf-user-menu>.pf-nav-dropdown{min-width:220px!important}
.pf-user-menu-separator,.pf-nav-menu-separator{
  display:block!important;width:auto!important;height:1px!important;min-height:1px!important;
  margin:6px 0!important;padding:0!important;border-right:0!important;border-bottom:0!important;border-left:0!important;border-image:initial!important;border-top:1px solid var(--pf-border)!important;
  background:transparent!important;box-shadow:none!important;pointer-events:none!important;cursor:default!important;
}
.pf-user-branch-menu{position:relative!important}
.pf-user-branch-parent{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important}
.pf-user-branch-dropdown{
  position:absolute!important;top:-6px!important;right:100%!important;z-index:var(--pf-navigation-branch-layer)!important;display:none!important;
  min-width:220px!important;padding:5px 0!important;border:1px solid var(--pf-border)!important;border-top:3px solid var(--pf-active)!important;
  background:var(--pf-panel)!important;color:var(--pf-text)!important;box-shadow:0 6px 14px rgba(0,0,0,.22)!important;
}
.pf-user-branch-menu.open>.pf-user-branch-dropdown{display:block!important}
.pf-user-branch-dropdown button{width:100%!important}

/* Cancel/back actions are intentionally secondary, not brand-red. */
.manage-shell .pf-secondary-action,.admin-main .pf-secondary-action,
.manage-modal .pf-secondary-action,.admin-modal .pf-secondary-action,.pos-modal .pf-secondary-action,
.button-secondary{
  height:var(--ui-control-height);min-height:var(--ui-control-height);
  margin:0;
  color:var(--pf-secondary-button-text)!important;
  background:var(--pf-secondary-button-bg)!important;
  border-color:var(--pf-secondary-button-border)!important;
}
.manage-shell .pf-secondary-action:hover,.admin-main .pf-secondary-action:hover,
.manage-modal .pf-secondary-action:hover,.admin-modal .pf-secondary-action:hover,.pos-modal .pf-secondary-action:hover,
.button-secondary:hover{
  color:var(--pf-secondary-button-text)!important;
  background:var(--pf-secondary-button-hover)!important;
  border-color:var(--pf-secondary-button-border)!important;
}

/* The access close button follows the modal-header theme variables instead of fixed literals. */
#accessClose{background:var(--pf-modal-header-button-bg)!important;color:var(--pf-modal-header-button-text)!important;border:0!important}

/* Canonical color settings align with the shared form grid. */
.color-setting-field{align-content:start!important}
.settings-help{margin:12px 0 0!important;color:var(--pf-muted)!important;font-size:12px!important;line-height:1.5!important}.log-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; margin-left: 20px; margin-top: 25px; margin-bottom: 5px; }

.person-photo,.customer-photo{width:46px;height:46px;display:grid;place-items:center;overflow:hidden;border-radius:var(--pf-radius);background:var(--pf-photo-bg)}
.person-photo img,.customer-photo img{width:100%;height:100%;object-fit:cover}
.person-cell,.customer-cell{display:flex;align-items:center;gap:10px;min-width:220px}
.person-cell-copy,.customer-cell-copy{min-width:0;display:grid;gap:2px}
.person-cell-copy small,.customer-cell-copy small{color:var(--pf-muted)}
.login-fields-block{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px;border:1px solid var(--pf-border);background:var(--pf-panel-head)}
.login-fields-block[hidden]{display:none!important}
.login-fields-block>.wide{grid-column:1/-1}
.photo-upload-field{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.photo-upload-field .upload-status{grid-column:1/-1;color:var(--pf-muted);font-size:12px}
.customer-type-fields{display:contents}
.customer-type-fields[hidden]{display:none!important}.event-log-toolbar{display:grid;grid-template-columns:repeat(5,180px) minmax(220px,1fr) auto;gap:var(--ui-gap);align-items:end;margin-bottom:14px;padding:17px}
.event-log-toolbar label{display:grid;gap:var(--ui-gap-sm)}
.event-log-toolbar .action-row{align-self:end}
.event-level{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-transform:capitalize}
.event-level:before{content:"";width:9px;height:9px;border-radius:var(--pf-radius);background:var(--pf-event-information)}
.event-level.warning:before{background:var(--pf-event-warning)}
.event-level.error:before{background:var(--pf-event-error)}
.event-log-detail{max-width:520px;white-space:normal;line-height:1.4}
.event-log-source{color:var(--pf-muted);font-size:11px}

@media(max-width:1200px){.event-log-toolbar{grid-template-columns:repeat(3,minmax(160px,1fr))}.event-log-toolbar .log-search{grid-column:span 2}}
@media(max-width:800px){
  .log-category-grid{grid-template-columns:1fr}
  .event-log-toolbar{grid-template-columns:1fr 1fr}
  .event-log-toolbar .log-search{grid-column:1/-1}
  .event-log-toolbar .action-row{grid-column:1/-1}
  .login-fields-block{grid-template-columns:1fr}
  .login-fields-block>.wide{grid-column:auto}
}

/* v1.0.28 - pfSense breadcrumb/page heading and top tabs */
.manage-page-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:var(--ui-gap);margin:0 0 15px;padding:0}
.manage-page-toolbar .pf-toolbar-link{display:inline-block;padding:7px 12px;border:1px solid var(--pf-border);border-radius:var(--pf-radius);background:var(--pf-panel);color:var(--pf-link);text-decoration:none}
.manage-page-toolbar .pf-toolbar-link:hover{background:var(--pf-panel-head);color:var(--pf-text)}
.system-project-toolbar .active-project-picker{margin-left:auto}
.binding-summary-list{display:grid;gap:6px}
.binding-summary-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.binding-summary-item strong{overflow-wrap:anywhere}
.binding-project-editor{display:grid;gap:10px}
.binding-editor-table input.binding-value-input{width:100%;margin:0}
.binding-editor-table .check-control{margin:0;min-height:var(--pf-control-h);justify-content:flex-start}
.binding-editor-table th:nth-child(2),.binding-editor-table td:nth-child(2){width:120px}
.binding-editor-table th:last-child,.binding-editor-table td:last-child{width:90px}
.binding-editor-actions{padding-top:0}
.pf-page-tabs{
  display:flex;align-items:flex-end;gap:4px;margin:0 0 15px;padding:0;list-style:none;border:0;
}
.pf-page-tabs>li{margin:0;padding:0;list-style:none}
.pf-page-tabs>li>a{
  position:relative;display:block;margin:0;padding:12px 18px 10px;border:0;border-bottom:4px solid transparent;border-radius:0;background:transparent;color:var(--pf-link);text-decoration:none;font:400 14px/1.42857143 Arial,Helvetica,sans-serif;box-shadow:none;
}
.pf-page-tabs>li>a:hover{border-bottom-color:var(--pf-tab-hover-border);background:transparent;color:var(--pf-link);}
.pf-page-tabs>li.active>a,.pf-page-tabs>li.active>a:hover{border-bottom-color:var(--brand);background:transparent;color:var(--pf-link);cursor:default;}
/* System admin keeps primary navigation/action emphasis on the configured brand color. */
body[data-system-admin="1"] .pf-page-tabs>li.active>a,body[data-system-admin="1"] .pf-page-tabs>li.active>a:hover{border-bottom-color:var(--pf-active);color:var(--pf-active)}
body[data-system-admin="1"] .pf-page-tabs>li>a:hover{border-bottom-color:color-mix(in srgb,var(--pf-active) 28%,transparent);color:var(--pf-active)}
body[data-system-admin="1"] .manage-shell button:not(.pf-secondary-action):not(.button-secondary):not(.danger):not(.incident-download-button):not(.customer-ledger-link),body[data-system-admin="1"] .manage-modal button:not(header button):not(.pf-secondary-action):not(.button-secondary):not(.danger){background:var(--pf-button-red)!important;border-color:var(--pf-button-red-border)!important;color:var(--pf-button-red-text)!important}
body[data-system-admin="1"] .manage-shell button:not(.pf-secondary-action):not(.button-secondary):not(.danger):not(.incident-download-button):not(.customer-ledger-link):hover,body[data-system-admin="1"] .manage-modal button:not(header button):not(.pf-secondary-action):not(.button-secondary):not(.danger):hover{background:var(--pf-button-red-hover)!important;border-color:var(--pf-button-red-border)!important;color:var(--pf-button-red-text)!important}
.company-settings-tabs{margin:0 18px 15px!important;padding-top:14px!important}
.company-settings-panel{margin:0!important;border-top:0!important;padding:18px!important}
.company-settings-panel[hidden]{display:none!important}
.active-project-picker{display:flex!important;align-items:center!important;gap:10px!important}
.active-project-picker>span{white-space:nowrap!important}
.active-project-picker select{margin:0!important;min-width:180px!important}
.active-project-picker button{margin:0!important}
.system-about-table td code{white-space:normal;overflow-wrap:anywhere;color:var(--pf-text);background:transparent}


/* v1.0.30 - toast, log permission matrix, system about tabs, menu editor and image preview isolation */
:root{
  --pf-toast-bg:#2f3338;
  --pf-toast-text:#fff;
  --pf-toast-success:#2f7d4a;
  --pf-toast-warning:#9a6a00;
  --pf-toast-error:var(--pf-button-red);
  --pf-menu-editor-drop:color-mix(in srgb,var(--pf-link) 16%,transparent);
}
html[data-pfsense-theme="dark"]{
  --pf-toast-bg:#111316;
  --pf-toast-text:#f6f7f8;
  --pf-menu-editor-drop:color-mix(in srgb,var(--pf-link) 24%,transparent);
}
.pf-toast-stack{
  position:fixed;right:20px;top:72px;z-index:5000;display:grid;gap:10px;width:min(380px,calc(100vw - 40px));pointer-events:none;
}
.pf-toast{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:12px 14px;
  border:1px solid var(--pf-border);border-left:4px solid var(--pf-toast-success);border-radius:var(--pf-radius);
  background:var(--pf-toast-bg);color:var(--pf-toast-text);box-shadow:0 8px 22px rgba(0,0,0,.24);
  opacity:0;transform:translateY(-8px);transition:opacity .15s ease,transform .15s ease;pointer-events:auto;
}
.pf-toast.show{opacity:1;transform:none}
.pf-toast-warning{border-left-color:var(--pf-toast-warning)}
.pf-toast-error{border-left-color:var(--pf-toast-error)}
.pf-toast-close{
  flex:0 0 auto!important;margin:0!important;padding:0!important;width:22px!important;height:22px!important;min-height:0!important;
  border:0!important;background:transparent!important;color:var(--pf-toast-text)!important;font-size:20px!important;line-height:20px!important;
}
.pf-toast-close:hover{background:transparent!important;color:var(--pf-toast-text)!important;border:0!important}

.log-permission-table th,.log-permission-table td{vertical-align:middle!important}
.log-permission-table thead th:not(:first-child),.log-permission-cell{text-align:center!important}
.log-permission-table tbody th{min-width:210px!important}
.log-permission-table tbody th small{display:block;margin-top:3px;color:var(--pf-muted);font-weight:400}
.log-permission-check{display:inline-flex!important;justify-content:center!important;margin:0!important}
.log-permission-check>span:empty{display:none!important}

.system-about-tabs{overflow-x:auto;margin-top:0!important}
.system-about-group[hidden]{display:none!important}
.system-about-group .responsive-table{margin-top:0!important}
.system-about-table th:first-child{width:280px;text-align:right}.system-about-table td{text-align:left}

.menu-editor-tree{padding:15px 20px 20px}
.menu-editor-list{display:grid;gap:8px;margin:0;padding:0;list-style:none;min-height:12px}
.menu-editor-children{margin:8px 0 0 34px;padding-left:14px;border-left:2px solid var(--pf-border)}
.menu-editor-item{margin:0;padding:0;border:1px solid var(--pf-border);border-radius:var(--pf-radius);background:var(--pf-panel)}
.menu-editor-item.dragging{opacity:.45}
.menu-editor-list.drag-over{background:var(--pf-menu-editor-drop)}
.menu-editor-row{display:flex;align-items:center;gap:12px;padding:10px 12px}
.menu-drag-handle{flex:0 0 auto;cursor:grab;font-size:18px;line-height:1;color:var(--pf-muted);user-select:none}
.menu-drag-handle:active{cursor:grabbing}
.menu-editor-label{display:grid;gap:2px;min-width:0;flex:1}
.menu-editor-label small{color:var(--pf-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-enabled-check{margin-left:auto!important;white-space:nowrap}
.menu-editor-item.is-container>.menu-editor-row{background:var(--pf-panel-head);font-weight:600}

.admin-main .product-image-admin-preview{
  padding:0!important;border:0!important;background:var(--pf-photo-bg)!important;box-shadow:none!important;
}
.admin-main .product-image-admin-preview:hover{
  padding:0!important;border:0!important;background:var(--pf-photo-bg)!important;box-shadow:none!important;
}

@media(max-width:700px){
  .pf-toast-stack{right:10px;top:62px;width:calc(100vw - 20px)}
  .menu-editor-tree{padding:10px}
  .menu-editor-children{margin-left:16px;padding-left:8px}
  .menu-editor-row{align-items:flex-start;flex-wrap:wrap}
  .menu-enabled-check{margin-left:30px!important}
}

/* pfSense WebGUI login composition. Kept separate from generic form/modal selectors. */
.pf-login-screen{
  position:fixed;inset:0;z-index:1000;display:grid;grid-template-rows:88px minmax(0,1fr);
  width:100vw;height:100dvh;margin:0;padding:0;overflow:auto;background:var(--pf-login-bg);color:var(--pf-login-title);
}
.pf-login-screen[hidden]{display:none!important}
body.auth-pending>.manage-top{display:none!important}
.pf-login-header{
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 40px;
  background:var(--pf-login-header-bg);color:var(--pf-login-caption);
}
.pf-login-logo{
  width:min(230px,34vw);height:64px;display:flex;align-items:center;text-decoration:none;
}
.pf-login-logo-image{display:block;width:100%;height:100%;object-fit:contain;object-position:left center;margin-bottom:-11px;margin-left:-15px}
.pf-login-caption{font:400 18px/1.2 Arial,Helvetica,sans-serif}
.pf-login-body{display:grid;place-items:center;padding:40px 20px 18vh}
.pf-login-form{width:min(270px,calc(100vw - 40px));display:grid;gap:0}
.pf-login-form h1{
  margin:0 0 22px;color:var(--pf-login-title);font:400 22px/1.2 Arial,Helvetica,sans-serif;
  letter-spacing:.22em;text-align:center;
}
.pf-login-field{display:block;margin:0}
.pf-login-field>.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pf-login-input{
  width:100%;height:52px;margin:0;padding:0 12px;border:0;border-bottom:2px solid var(--pf-login-line);border-radius:0;
  background:transparent;color:var(--pf-login-title);box-shadow:none;outline:0;font:italic 600 17px/1.2 Arial,Helvetica,sans-serif;
}
.pf-login-input::placeholder{color:var(--pf-login-placeholder);opacity:1}
.pf-login-input:focus{border-bottom-color:var(--pf-login-title);box-shadow:none;outline:0}
.pf-login-remember{display:flex;align-items:center;gap:9px;margin:16px 0 0;color:var(--pf-login-title);font:400 13px/1.3 Arial,Helvetica,sans-serif;cursor:pointer;user-select:none}
.pf-login-remember input{width:18px;height:18px;margin:0;accent-color:var(--pf-active);cursor:pointer}
.pf-login-remember~.pf-login-submit{margin-top:24px}

/* Keep browser/password-manager autofill visually identical to a normally typed pfSense login field. */
.pf-login-input:-webkit-autofill,
.pf-login-input:-webkit-autofill:hover,
.pf-login-input:-webkit-autofill:focus,
.pf-login-input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--pf-login-title);caret-color:var(--pf-login-title);
  -webkit-box-shadow:0 0 0 1000px var(--pf-login-bg) inset;box-shadow:0 0 0 1000px var(--pf-login-bg) inset;
  border-bottom-color:var(--pf-login-line);
  font-family:Arial,Helvetica,sans-serif;font-size:17px;font-style:italic;font-weight:600;line-height:1.2;
}
.pf-login-input:autofill{background:transparent;color:var(--pf-login-title);caret-color:var(--pf-login-title);font-family:Arial,Helvetica,sans-serif;font-size:17px;font-style:italic;font-weight:600;line-height:1.2}
.pf-login-submit{
  width:100%;min-height:34px;margin:42px auto 0;padding:15px 10px;border:1px solid var(--pf-active);border-radius:var(--pf-radius);
  background:var(--pf-active);color:var(--pf-login-title);box-shadow:none;font:600 13px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.08em;
}
.pf-login-submit:hover{background:color-mix(in srgb,var(--pf-active) 88%,var(--pf-login-title) 12%);border-color:var(--pf-active)}
.pf-login-submit:disabled{opacity:.6;cursor:wait}
.pf-login-error{margin:14px 0 0}
.pf-login-back-link{margin:16px auto 0;color:var(--pf-login-line);font-size:12px;text-decoration:none}
.pf-login-back-link:hover{color:var(--pf-login-title)}
/* v2.55 - tenant session-expired relogin is a common admin modal, not a full login page. */
.pf-session-expired-screen{
  position:fixed;inset:0;z-index:1400;display:flex;align-items:center;justify-content:center;
  width:100vw;height:100dvh;margin:0;padding:20px;overflow:auto;
  background:rgba(0,0,0,.72)!important;backdrop-filter:blur(3px)!important;
}
.pf-session-expired-screen[hidden]{display:none!important}
.pf-session-expired-screen>.session-expired-modal{width:min(100%,390px);margin:auto}
.session-expired-brand{display:grid;justify-items:center;gap:6px;margin:0 0 18px}
.session-expired-brand .pf-login-logo{width:150px;height:50px;margin:0;display:flex;align-items:center;justify-content:center}
.session-expired-brand .pf-login-logo-image{display:block;width:100%;height:100%;margin:0;object-fit:contain;object-position:center}
.session-expired-brand .pf-login-caption{margin:0;color:var(--pf-muted);font:600 12px/1.3 Arial,Helvetica,sans-serif;text-align:center}
.session-expired-form{display:grid;gap:12px}
.session-expired-form h1{margin:0 0 4px;color:var(--pf-text);font:600 18px/1.25 Arial,Helvetica,sans-serif;letter-spacing:.10em;text-align:center}
.session-expired-form label{display:grid;gap:6px;margin:0;color:var(--pf-text);font:600 12px/1.3 Arial,Helvetica,sans-serif}
.session-expired-form .pf-login-input{
  width:100%;height:var(--ui-control-height);min-height:var(--ui-control-height);margin:0;padding:0 10px;border:1px solid var(--pf-border);border-radius:var(--pf-radius);
  background:var(--pf-panel);color:var(--pf-text);box-shadow:none;outline:0;font:400 14px/1.35 Arial,Helvetica,sans-serif;text-align:center;
}
.session-expired-form .pf-login-input:focus{border-color:#66afe9;box-shadow:0 0 0 2px rgba(102,175,233,.22);outline:0}
.session-expired-form .pf-login-input::placeholder{color:var(--pf-muted);opacity:1}
.session-expired-form .pf-login-input:-webkit-autofill,
.session-expired-form .pf-login-input:-webkit-autofill:hover,
.session-expired-form .pf-login-input:-webkit-autofill:focus,
.session-expired-form .pf-login-input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--pf-text)!important;caret-color:var(--pf-text);
  -webkit-box-shadow:0 0 0 1000px var(--pf-panel) inset!important;box-shadow:0 0 0 1000px var(--pf-panel) inset!important;
  border-color:var(--pf-border);font:400 14px/1.35 Arial,Helvetica,sans-serif;
}
.session-expired-error{margin:0;padding:9px 11px!important}
.session-expired-form .session-remember{display:flex;align-items:center;gap:9px;margin:0;color:var(--pf-text);font:400 13px/1.3 Arial,Helvetica,sans-serif}
.session-expired-form .session-remember input{width:18px;height:18px;margin:0;accent-color:var(--pf-active)}
.session-expired-submit{width:100%;height:var(--ui-control-height);min-height:var(--ui-control-height);margin:4px 0 0}
@media(max-width:700px){
  .pf-session-expired-screen{padding:14px}
  .pf-session-expired-screen>.session-expired-modal{width:min(100%,360px)}
  .session-expired-brand .pf-login-logo{width:132px;height:44px}
  .session-expired-form h1{font-size:17px;letter-spacing:.08em}
}

@media(max-width:700px){
  .pf-login-screen{grid-template-rows:72px minmax(0,1fr)}
  .pf-login-header{padding:0 18px}
  .pf-login-logo{width:min(190px,44vw);height:54px}
  .pf-login-caption{font-size:13px}
  .pf-login-body{padding-bottom:12vh}
}

/* v0.2.11 - global admin performance trace viewer */
.performance-toolbar{display:block;padding:17px;border-bottom:1px solid var(--pf-border)}
.performance-filter-grid{display:grid;grid-template-columns:repeat(4,180px) minmax(240px,1fr);gap:var(--ui-gap);align-items:end}
.performance-toolbar label{display:grid;gap:6px;min-width:0}
.performance-toolbar .performance-search{min-width:220px}
.performance-toolbar-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.performance-toolbar .performance-auto-refresh{display:flex;align-items:center;gap:8px;margin:0;padding:8px 0}
.performance-toolbar-footer>.action-row{margin-left:auto}
.performance-file-meta{padding:10px 20px;border-bottom:1px solid var(--pf-border);color:var(--pf-muted);font-size:12px;line-height:1.45}
.performance-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:10px;padding:15px 20px}
.performance-summary-card{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--pf-border);border-radius:var(--pf-radius);background:var(--pf-panel-head)}
.performance-summary-card span{color:var(--pf-muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.performance-summary-card strong{color:var(--pf-text);font-size:20px;font-weight:600}
main .performance-tabs{margin:0 20px 15px}
.performance-panel{padding:0 20px 20px}
.performance-empty{padding:24px;border:1px solid var(--pf-border);border-radius:var(--pf-radius);background:var(--pf-panel-head);color:var(--pf-muted);text-align:center}
.performance-trace-list{display:grid;gap:8px}
.performance-trace{border:1px solid var(--pf-border);border-radius:var(--pf-radius);background:var(--pf-panel);overflow:hidden}
.performance-trace>summary{display:grid;grid-template-columns:auto 90px 170px minmax(220px,1fr) 90px 80px;align-items:center;gap:10px;padding:11px 12px;cursor:pointer;list-style:none;background:var(--pf-panel-head)}
.performance-trace>summary::-webkit-details-marker{display:none}
.performance-trace>summary:before{content:"▶";grid-column:1;grid-row:1;color:var(--pf-muted);font-size:10px;transition:transform .12s ease}
.performance-trace[open]>summary:before{transform:rotate(90deg)}
.performance-trace>summary>.performance-level-badge{grid-column:2}
.performance-trace-time{grid-column:3;color:var(--pf-muted);font-size:11px}
.performance-trace-name{grid-column:4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.performance-trace-duration{grid-column:5;text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.performance-trace>summary>.performance-operation-status{grid-column:6;text-align:right}
.performance-trace-body{padding:10px 12px;background:var(--pf-panel)}
.performance-operation-tree{display:grid;gap:7px;margin:7px 0 0 14px;padding:0 0 0 14px;border-left:1px solid var(--pf-border);list-style:none}
.performance-operation-root{margin:0;padding-left:0;border-left:0}
.performance-operation-node{min-width:0}
.performance-operation-line{display:grid;grid-template-columns:90px 130px minmax(220px,1fr) 85px 75px;align-items:center;gap:10px;min-width:0}
.performance-operation-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.performance-operation-category{color:var(--pf-muted);font-size:11px}
.performance-operation-duration,.performance-duration-cell{font-variant-numeric:tabular-nums;font-weight:700;text-align:right}
.performance-operation-details{margin:4px 0 0 230px;color:var(--pf-muted);font:11px/1.45 Consolas,"Courier New",monospace;overflow-wrap:anywhere;white-space:normal}
.performance-level-badge{display:inline-flex;align-items:center;justify-content:center;min-width:82px;padding:3px 6px;border:1px solid var(--pf-border);border-radius:var(--pf-radius);background:var(--pf-panel-head);color:var(--pf-text);font-size:10px;font-weight:700}
.performance-level-badge.normal{border-left:4px solid var(--pf-success)}
.performance-level-badge.slow{border-left:4px solid var(--pf-warning)}
.performance-level-badge.very_slow{border-left:4px solid var(--pf-danger)}
.performance-operation-status{font-size:11px;font-weight:700}
.performance-operation-status.success{color:var(--pf-success)}
.performance-operation-status.error{color:var(--pf-danger)}
.performance-operation-table td{vertical-align:top}
.performance-operation-table td:nth-child(1){white-space:nowrap}
.performance-operation-table td:nth-child(3){white-space:nowrap}
@media(max-width:1100px){.performance-filter-grid{grid-template-columns:1fr 1fr 1fr}.performance-toolbar .performance-search{grid-column:1/-1}.performance-summary-grid{grid-template-columns:repeat(3,minmax(120px,1fr))}.performance-trace>summary{grid-template-columns:auto 85px 140px minmax(180px,1fr) 80px 70px}.performance-operation-line{grid-template-columns:85px 110px minmax(180px,1fr) 75px 70px}.performance-operation-details{margin-left:195px}}
@media(max-width:760px){.performance-filter-grid{grid-template-columns:1fr 1fr}.performance-toolbar .performance-search{grid-column:1/-1}.performance-toolbar-footer{align-items:flex-end;flex-wrap:wrap}.performance-toolbar-footer>.action-row{width:100%;margin-left:0;justify-content:flex-end}.performance-summary-grid{grid-template-columns:1fr 1fr}.performance-trace>summary{grid-template-columns:auto 85px 1fr auto}.performance-trace>summary>.performance-level-badge{grid-column:2}.performance-trace-time{grid-column:3}.performance-trace-name{grid-column:3}.performance-trace-duration{grid-column:4;grid-row:1/4}.performance-trace>summary>.performance-operation-status{grid-column:3;text-align:left}.performance-operation-line{grid-template-columns:85px 1fr auto}.performance-operation-category{grid-column:2}.performance-operation-name{grid-column:2}.performance-operation-duration{grid-column:3;grid-row:1/3}.performance-operation-status{grid-column:2}.performance-operation-details{margin-left:0}}


/* v2.69: direct-source export reconciliation + session error hidden state */
.session-expired-error[hidden]{display:none!important}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.pf-login-input):not(.keypad-input),select,#qrUrl,.catalog-search input,.customer-picker-tools input,.new-customer-form input{margin:0;height:var(--ui-control-height)}
textarea,.new-customer-form textarea{margin:0;height:auto}

/* v2.79 CSS export: panel top-right corner */
.admin-card,.manage-card,.ticket-panel,.catalog-panel,.payment-selection-panel,.amount-panel,.method-panel,.table-card,.area-card,.category-admin-grid article,.admin-notice-card,.admin-login-modal,.pos-modal,.manage-modal form,.manage-modal>section,.new-customer-form,.open-account-customer{border-top-right-radius:0!important}


/* v3.03: products list owns the vertical scroll region */
body.admin-products-page{height:100dvh!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
body.admin-products-page>.manage-top{flex:0 0 auto!important}
body.admin-products-page>main.admin-shell{flex:1 1 auto!important;min-height:0!important;height:auto!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
body.admin-products-page .admin-main.manage-page{flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;padding-bottom:15px!important}
body.admin-products-page .manage-page-heading,body.admin-products-page .manage-page-toolbar,body.admin-products-page .notice,body.admin-products-page .stat-grid{flex:0 0 auto!important}
body.admin-products-page #view-products.active{flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
body.admin-products-page #view-products>.admin-card{flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;margin-bottom:0!important}
body.admin-products-page #view-products .admin-card-toolbar{flex:0 0 auto!important}
body.admin-products-page #view-products .admin-table-wrap{flex:1 1 auto!important;min-height:0!important;overflow:auto!important;overscroll-behavior:contain}
body.admin-products-page #view-products .admin-table thead{position:sticky;top:0;z-index:2}
@media(max-width:700px){body.admin-products-page{height:auto!important;min-height:100dvh!important;overflow:auto!important;display:block!important}body.admin-products-page>main.admin-shell,body.admin-products-page .admin-main.manage-page,body.admin-products-page #view-products.active,body.admin-products-page #view-products>.admin-card{display:block!important;overflow:visible!important}body.admin-products-page #view-products .admin-table-wrap{max-height:none!important;overflow:auto!important}}


/* v3.04: center authenticated modals inside the viewport below the live top menu. */
body.pf-has-manage-top .manage-modal,
body.pf-has-manage-top .pos-modal-backdrop,
body.pf-has-manage-top .admin-modal-backdrop,
body.pf-has-manage-top .admin-notice-backdrop,
body.pf-has-manage-top .media-viewer,
body.pf-has-manage-top .qupos-terminal-modal,
body.pf-has-manage-top .admin-login-backdrop:not(.pf-login-screen){
  top:var(--pf-content-top)!important;right:0!important;bottom:0!important;left:0!important;
  width:100vw!important;height:calc(100dvh - var(--pf-content-top))!important;
}
body.pf-has-manage-top .manage-modal form,
body.pf-has-manage-top .manage-modal>section,
body.pf-has-manage-top .pos-modal,
body.pf-has-manage-top .admin-modal,
body.pf-has-manage-top .admin-notice-card,
body.pf-has-manage-top .qupos-terminal-dialog,
body.pf-has-manage-top .admin-login-modal{
  max-height:calc(100dvh - var(--pf-content-top) - 32px)!important;
}
body.pf-has-manage-top .media-viewer-content{max-height:calc(100dvh - var(--pf-content-top) - 56px)!important}
body.pf-has-manage-top .media-viewer-content img,
body.pf-has-manage-top .media-viewer-content video{max-height:calc(100dvh - var(--pf-content-top) - 56px)!important}
body.pf-has-manage-top .media-viewer-close{top:calc(var(--pf-content-top) + 18px)!important}


/* v3.05: management viewport accessibility and global navigation layering. */
html{min-height:100%;overflow-y:auto}
body{min-height:100dvh}
.manage-top,.pos-top,.admin-sidebar{isolation:isolate}
body.manage-modal-open>.manage-top,body.manage-modal-open>.pos-top,body.manage-modal-open>.admin-sidebar,
body.pos-modal-open>.manage-top,body.pos-modal-open>.pos-top,body.pos-modal-open>.admin-sidebar,
body.modal-open>.manage-top,body.modal-open>.pos-top,body.modal-open>.admin-sidebar{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:5400!important}


/* v3.09 - shared current-password verified password-change modal */
.pf-password-change-screen{position:fixed;inset:0;z-index:5400;display:grid;place-items:center;padding:16px;background:var(--pf-modal-backdrop-bg)}
.pf-password-change-screen[hidden]{display:none!important}
.pf-password-change-card{width:min(100%,440px);max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--pf-border);border-radius:var(--pf-radius);padding:22px;background:var(--pf-panel);color:var(--pf-text);box-shadow:0 18px 60px var(--pf-modal-shadow)}
.pf-password-change-card header,.pf-password-change-card footer{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pf-password-change-card header{margin-bottom:10px;padding:0 0 20px;border-bottom:1px solid var(--pf-border)}
.pf-password-change-card header h2{margin:3px 0 0;font:600 22px/1.25 Arial,Helvetica,sans-serif}
.pf-password-change-eyebrow{color:var(--pf-muted);font:700 10px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.12em}
.pf-password-change-card header>button{width:38px;height:38px;border:0;border-radius:var(--pf-radius);padding:0;background:var(--pf-login-header-bg);color:var(--pf-login-caption);font-size:25px;line-height:1}
.pf-password-change-message{margin:0 0 16px;color:var(--pf-muted);line-height:1.5}
.pf-password-change-fields{display:grid;gap:12px}
.pf-password-change-fields label{display:grid;gap:6px;color:var(--pf-text);font-weight:600}
.pf-password-change-fields input{width:100%;height:var(--ui-control-height);min-height:var(--ui-control-height);border:1px solid var(--pf-border);border-radius:var(--pf-radius);padding:10px 11px;background:var(--pf-panel);color:var(--pf-text)}
.pf-password-change-fields input:focus{border-color:var(--pf-active);outline:0;box-shadow:0 0 0 2px color-mix(in srgb,var(--pf-active) 24%,transparent)}
.pf-password-change-card .form-error{margin:14px 0 0}
.pf-password-change-card footer{justify-content:flex-end;margin-top:18px;padding:20px 0 0;border-top:1px solid var(--pf-border)}
body.pf-password-change-open{overflow:hidden}


/* v3.10 - runtime guard, version watermark, global runtime policy editor and profile action alignment */
.qupos-runtime-watermark{position:fixed;right:18px;bottom:11px;z-index:3990;display:flex;flex-direction:column;align-items:flex-end;gap:2px;pointer-events:none;user-select:none;color:var(--pf-text);font:400 12px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.04em;opacity:.52}.qupos-runtime-clock{font-size:11px;opacity:.86}.qupos-runtime-license{font-size:11px;font-weight:700;color:var(--pf-active);opacity:1}
.qupos-version-guard{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:18px;background:var(--pf-modal-backdrop-bg)}
.qupos-version-guard[hidden]{display:none!important}
.qupos-version-guard-card{width:min(100%,460px);border:1px solid var(--pf-border);border-radius:var(--pf-radius);padding:22px;background:var(--pf-panel);color:var(--pf-text);box-shadow:0 18px 60px var(--pf-modal-shadow)}
.qupos-version-guard-card h2{margin:0 0 10px;font:600 22px/1.25 Arial,Helvetica,sans-serif}
.qupos-version-guard-card p{margin:0;color:var(--pf-muted);line-height:1.5}
.qupos-version-guard-card footer{display:flex;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--pf-border)}
.qupos-version-guard-card footer button{width:auto;min-width:0;height:var(--ui-control-height);min-height:var(--ui-control-height)}
body.qupos-version-blocked{overflow:hidden!important}
.qupos-runtime-settings-card .field-grid{margin-top:0}
.qupos-runtime-settings-card .qupos-runtime-settings-status{margin:0;color:var(--pf-muted);font-size:12px}
.qupos-runtime-busy{position:fixed;inset:0;z-index:11990;display:grid;place-items:center;background:var(--pf-modal-backdrop-bg)}
.qupos-runtime-busy[hidden]{display:none!important}
.qupos-runtime-busy>div{padding:14px 18px;border:1px solid var(--pf-border);border-radius:var(--pf-radius);background:var(--pf-panel);color:var(--pf-text);font-weight:700}
#profileForm>.profile-action-row{display:flex;justify-content:flex-end;align-items:center;gap:var(--ui-gap)}
#profileForm>.profile-action-row>button{width:auto;min-width:0;margin:0}
@media(max-width:520px){#profileForm>.profile-action-row{justify-content:flex-end;flex-wrap:wrap}#profileForm>.profile-action-row>button{width:auto;min-width:0}}
@media print{.qupos-runtime-watermark,.qupos-version-guard,.qupos-runtime-busy{display:none!important}}


/* v3.11 - global project licensing management */
.qupos-license-grid{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:var(--ui-gap);align-items:end}
.qupos-license-grid label{display:grid;gap:var(--ui-gap-sm);color:var(--pf-muted);font-size:11px;font-weight:800}
.qupos-license-grid input,.qupos-license-grid select{height:var(--ui-control-height);min-height:var(--ui-control-height);border:1px solid var(--pf-border);border-radius:var(--pf-radius);padding:8px;background:var(--pf-input);color:var(--pf-text)}
.qupos-license-summary{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:10px;margin:14px 0 0}
.qupos-license-summary article{border:1px solid var(--pf-border);border-radius:var(--pf-radius);padding:12px;background:var(--pf-panel-head)}
.qupos-license-summary span{display:block;color:var(--pf-muted);font-size:10px;font-weight:800}.qupos-license-summary strong{display:block;margin-top:5px;font-size:17px}
.qupos-license-table tbody tr{cursor:pointer}.qupos-license-table tbody tr:hover,.qupos-license-table tbody tr:focus{background:var(--pf-panel-head)}
.qupos-license-status{display:inline-flex;padding:5px 8px;border-radius:var(--pf-radius);font-weight:800;font-size:11px}.qupos-license-status.active{background:var(--pf-panel-head);color:var(--pf-text)}.qupos-license-status.expired,.qupos-license-status.user-limit,.qupos-license-status.session-limit{background:var(--pf-panel-head);color:var(--pf-danger)}
@media(max-width:820px){.qupos-license-grid{grid-template-columns:1fr 1fr}.qupos-license-summary{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.qupos-license-grid,.qupos-license-summary{grid-template-columns:1fr}}


/* v3.14: sysadmin changelog alternating timeline */
.qupos-changelog-card{overflow:hidden}
.qupos-changelog-timeline{position:relative;display:grid;gap:24px;padding:26px 28px 34px}
.qupos-changelog-timeline:before{content:"";position:absolute;left:50%;top:24px;bottom:28px;width:2px;transform:translateX(-1px);background:var(--pf-border)}
.qupos-changelog-entry{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 132px minmax(0,1fr);align-items:start;gap:18px}
.qupos-changelog-entry:before{content:"";position:absolute;left:50%;top:19px;width:10px;height:10px;transform:translate(-50%,-50%);border:3px solid var(--pf-panel);border-radius:999px;background:var(--pf-button-red);box-shadow:0 0 0 1px var(--pf-border);z-index:2}
.qupos-changelog-time{grid-column:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:38px;padding:6px 8px;border-radius:var(--pf-radius);background:var(--pf-button-red);color:var(--pf-button-red-text);text-align:center;font-size:11px;line-height:1.25;z-index:1}
.qupos-changelog-time strong{font-size:12px}.qupos-changelog-time span{white-space:nowrap}
.qupos-changelog-block{border:1px solid var(--pf-border);border-radius:var(--pf-radius);background:var(--pf-panel);overflow:hidden;box-shadow:var(--pf-shadow)}
.qupos-changelog-entry.is-left .qupos-changelog-block{grid-column:1;grid-row:1}.qupos-changelog-entry.is-right .qupos-changelog-block{grid-column:3;grid-row:1}
.qupos-changelog-block ul{display:grid;gap:0;margin:0;padding:0;list-style:none}.qupos-changelog-block li{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;padding:10px 14px;border-bottom:1px solid var(--pf-border);line-height:1.45}.qupos-changelog-block li:last-child{border-bottom:0}.qupos-changelog-kind{font-size:11px;font-weight:700;color:var(--pf-muted);text-transform:uppercase}.qupos-changelog-empty{grid-column:1/-1;padding:24px;border:1px solid var(--pf-border);border-radius:var(--pf-radius);background:var(--pf-panel-head);color:var(--pf-muted);text-align:center}
@media(max-width:760px){.qupos-changelog-timeline{padding:20px 16px 26px 42px}.qupos-changelog-timeline:before{left:22px}.qupos-changelog-entry{display:grid;grid-template-columns:1fr;gap:8px}.qupos-changelog-entry:before{left:-20px;top:18px}.qupos-changelog-time,.qupos-changelog-entry.is-left .qupos-changelog-block,.qupos-changelog-entry.is-right .qupos-changelog-block{grid-column:1;grid-row:auto}.qupos-changelog-time{justify-self:start;align-items:flex-start;text-align:left}.qupos-changelog-block li{grid-template-columns:1fr;gap:3px}}
/* v3.14: terminal about modal */
.qupos-terminal-modal{position:fixed;inset:0;z-index:5300;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.46)}.qupos-terminal-modal[hidden]{display:none!important}.qupos-terminal-dialog{width:min(860px,calc(100vw - 48px));height:min(680px,calc(100vh - 48px));display:flex;flex-direction:column;border:1px solid var(--pf-border);border-radius:var(--pf-radius);background:var(--pf-panel);box-shadow:var(--pf-shadow);overflow:hidden}.qupos-terminal-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:var(--pf-button-gap);padding:10px 14px;border-bottom:1px solid var(--pf-border);background:var(--pf-panel-head)}.qupos-terminal-dialog>header h2{margin:0}.qupos-terminal-tabs{flex:none;margin:12px 14px 15px!important}.qupos-terminal-panels{flex:1 1 auto;min-height:0;overflow:auto;padding:0 14px 14px}.qupos-terminal-panel>.responsive-table{overflow:auto}.qupos-terminal-table{table-layout:fixed}.qupos-terminal-table th,.qupos-terminal-table td{text-align:left!important}.qupos-terminal-table tbody th{width:240px;font-weight:700!important}.qupos-terminal-table td code{display:block;width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left;color:var(--pf-text);background:transparent}.qupos-requirements-table th:nth-child(1){width:210px}.qupos-requirements-table th:nth-child(3){width:170px}.qupos-requirement-detail{display:block;color:var(--pf-text);line-height:1.45}.qupos-requirement-status{display:inline-flex;align-items:center;justify-content:flex-start;white-space:nowrap;font-weight:700}.qupos-requirement-icon{display:inline-grid;place-items:center;min-width:18px;font-size:14px}.qupos-requirement-status.ok{color:var(--pf-success)}.qupos-requirement-status.fail{color:var(--pf-danger)}@media(max-width:640px){.qupos-terminal-modal{padding:8px}.qupos-terminal-dialog{width:calc(100vw - 16px);height:calc(100vh - 16px)}.qupos-requirements-table th:nth-child(1){width:160px}.qupos-requirements-table th:nth-child(3){width:145px}}

/* v3.24 - fullscreen navigation continuity */
.qupos-fullscreen-navigation{position:fixed;inset:0;z-index:20000;visibility:hidden;pointer-events:none;background:var(--pf-bg)}.qupos-fullscreen-navigation.loaded{visibility:visible;pointer-events:auto}.qupos-fullscreen-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--pf-bg);opacity:0;pointer-events:none}.qupos-fullscreen-frame.active{opacity:1;pointer-events:auto}.qupos-fullscreen-frame.preload{opacity:0;pointer-events:none}
/* v3.31 - company settings desktop grid */
.company-settings-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.company-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.company-settings-grid{grid-template-columns:1fr}}
/* v3.42 sysadmin project autocomplete */
.pf-autocomplete{position:relative;width:100%}
.pf-autocomplete-options{position:absolute;z-index:var(--pf-navigation-layer);top:calc(100% + 4px);left:0;right:0;max-height:260px;overflow:auto;border:1px solid var(--pf-border);border-radius:var(--pf-radius);background:var(--pf-panel);color:var(--pf-text);box-shadow:0 8px 24px rgba(0,0,0,.22)}
.pf-autocomplete-options[hidden]{display:none}
.pf-autocomplete-option,.pf-autocomplete-empty{padding:10px 11px;border-bottom:1px solid var(--pf-border);line-height:1.35}
.pf-autocomplete-option:last-child,.pf-autocomplete-empty:last-child{border-bottom:0}
.pf-autocomplete-option{cursor:pointer}
.pf-autocomplete-option:hover,.pf-autocomplete-option.active{background:var(--pf-panel-head);color:var(--pf-link)}
.pf-autocomplete-empty{color:var(--pf-muted)}

/* EYi Color Picker: canonical admin/sysadmin color selection component. Core picker rules are sourced from eyi-color-picker. */
.eyi-color-field{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--ui-control-height);grid-template-areas:"input preview" "value value";gap:6px 8px;align-items:center;width:100%;min-width:0}
.eyi-color-field .eyi-color-picker-input{grid-area:input;width:100%!important;min-width:0!important;font:600 12px Consolas,monospace!important}
.eyi-color-field .eyi-color-preview{grid-area:preview;position:relative;display:block;width:var(--ui-control-height);height:var(--ui-control-height);overflow:hidden;border:1px solid var(--pf-border);border-radius:var(--pf-radius);background-image:linear-gradient(45deg,#d5d5d5 25%,transparent 25%),linear-gradient(-45deg,#d5d5d5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d5d5d5 75%),linear-gradient(-45deg,transparent 75%,#d5d5d5 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0;cursor:pointer}
.eyi-color-field .eyi-color-preview:after{content:"";position:absolute;inset:0;background:var(--eyi-color-preview-value,transparent)}
.eyi-color-field .eyi-color-preview:focus{outline:2px solid var(--pf-active);outline-offset:1px}
.eyi-color-field output{grid-area:value;display:block;margin:0;font:600 12px Consolas,monospace;color:var(--pf-muted)!important;line-height:1.2}
.colorpicker.dropdown-menu{position:absolute;display:none;float:left;background:var(--pf-panel);border:1px solid var(--pf-border);box-shadow:0 6px 18px rgba(0,0,0,.22);background-clip:padding-box}
.colorpicker.colorpicker-visible{display:block}
.colorpicker:before{border-bottom-color:var(--pf-border)!important}
.colorpicker:after{border-bottom-color:var(--pf-panel)!important}
.colorpicker-saturation{width:100px;height:100px;background-image:url(../js/colorpicker/images/saturation.png);cursor:crosshair;float:left}.colorpicker-saturation i{display:block;height:5px;width:5px;border:1px solid #000;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;position:absolute;top:0;left:0;margin:-4px 0 0 -4px}.colorpicker-saturation i b{display:block;height:5px;width:5px;border:1px solid #fff;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.colorpicker-hue,.colorpicker-alpha{width:15px;height:100px;float:left;cursor:row-resize;margin-left:4px;margin-bottom:4px}.colorpicker-hue i,.colorpicker-alpha i{display:block;height:1px;background:#000;border-top:1px solid #fff;position:absolute;top:0;left:0;width:100%;margin-top:-1px}.colorpicker-hue{background-image:url(../js/colorpicker/images/hue.png)}.colorpicker-alpha{background-image:url(../js/colorpicker/images/alpha.png);display:none}div.colorpicker{;top:0;left:0;padding:4px;min-width:130px;margin-top:1px;-webkit-border-radius:-1px;-moz-border-radius:-1px;border-radius:-1px;z-index:2500}.colorpicker:before,.colorpicker:after{display:table;content:"";line-height:0}.colorpicker:after{clear:both}.colorpicker:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #e4e4e4;border-bottom-color:#dfdfdf;position:absolute;top:-7px;left:6px}.colorpicker:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:7px}.colorpicker div{position:relative}.colorpicker.colorpicker-with-alpha{min-width:140px}.colorpicker.colorpicker-with-alpha .colorpicker-alpha{display:block}.colorpicker-color{height:10px;margin-top:5px;clear:both;background-image:url(../js/colorpicker/images/alpha.png);background-position:0 100%}.colorpicker-color div{height:10px}.colorpicker-element .input-group-addon i{display:block;cursor:pointer;width:16px;height:16px}.colorpicker.colorpicker-inline{position:relative;display:inline-block;float:none}.colorpicker.colorpicker-horizontal{width:110px;min-width:110px;height:auto}.colorpicker.colorpicker-horizontal .colorpicker-saturation{margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-color{width:100px}.colorpicker.colorpicker-horizontal .colorpicker-hue,.colorpicker.colorpicker-horizontal .colorpicker-alpha{width:100px;height:15px;float:left;cursor:col-resize;margin-left:0;margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-hue i,.colorpicker.colorpicker-horizontal .colorpicker-alpha i{display:block;height:15px;background:#fff;position:absolute;top:0;left:0;width:1px;border:none;margin-top:0}.colorpicker.colorpicker-horizontal .colorpicker-hue{background-image:url(../js/colorpicker/images/hue-horizontal.png)}.colorpicker.colorpicker-horizontal .colorpicker-alpha{background-image:url(../js/colorpicker/images/alpha-horizontal.png)}.colorpicker.colorpicker-hidden{display:none}.colorpicker.colorpicker-visible{display:block}.colorpicker-inline.colorpicker-visible{display:inline-block}