/* quPos pfSense-compatible admin skin - v1.0.29 */
: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-radius:3px;
  --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;
}
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;
  color-scheme:dark;
}
*{box-sizing:border-box}
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:500!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,.pos-header-menu .top-tab.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,.table-toolbar .eyebrow,.payment-head .eyebrow{display:none!important}
.admin-topbar h1,.table-toolbar h1,.payment-head 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:0 0 15px!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 55px!important}

/* Panels / widgets */
.admin-card,.manage-card,.ticket-panel,.catalog-panel,.discount-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;text-align:left!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(.pf-login-input),select,textarea,.admin-form-grid input,.admin-form-grid select,.admin-form-grid textarea,
.field-grid input,.field-grid select,.field-grid textarea,#qrUrl,.catalog-search input,.keypad-input,
.customer-picker-tools input,.new-customer-form input,.new-customer-form 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(.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{
  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),
.area-tabs 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 */
.area-tabs,.catalog-categories{border-bottom:1px solid var(--pf-border)!important;padding-bottom:0!important}
.area-tabs button,.catalog-categories button{border:1px solid transparent!important;border-bottom:0!important;border-radius:var(--pf-radius) var(--pf-radius) 0 0!important;background:transparent!important;color:var(--pf-link)!important}
.area-tabs button.active,.catalog-categories button.active{border-color:var(--pf-border)!important;background:var(--pf-panel)!important;color:var(--pf-text)!important}
.tag,.badge{border-radius:2px!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,.discount-panel,.amount-panel,.method-panel{border-radius:var(--pf-radius)!important}
.table-card{min-height:110px!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 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:38px;
  --pf-control-py:9px;
  --pf-control-px:14px;
  --pf-card-py:14px;
  --pf-card-px:16px;
  --pf-cell-py:11px;
  --pf-cell-px:14px;
  --pf-form-gap:16px;
}.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{
  min-height:34px!important;
  padding:7px 10px!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:8px!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), select, textarea, #qrUrl, .catalog-search input, .keypad-input, .customer-picker-tools input, .new-customer-form input, .new-customer-form textarea { margin-left: 10px; margin-top: 20px; margin-bottom: 10px; min-height: var(--pf-control-h) !important; padding: var(--pf-control-py) 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){
  min-height:var(--pf-control-h)!important;
  padding:var(--pf-control-py) var(--pf-control-px)!important;
  line-height:1.2!important;
}
.settings-save-row{
  padding:14px 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-control-h:40px;
    --pf-control-py:10px;
    --pf-control-px:13px;
    --pf-card-py:13px;
    --pf-card-px:13px;
    --pf-cell-py:10px;
    --pf-cell-px:11px;
    --pf-form-gap:14px;
  }
    .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-page-tab):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){
  padding:10px!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-page-tab):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:1200!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:0 0 var(--pf-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,.pf-nav-item:hover>.pf-nav-dropdown,.pf-nav-item:focus-within>.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:10px;
  --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{
  border-radius:5px!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;
}

/* 2px scrollbars, horizontal and vertical; no arrow buttons. */
*{
  scrollbar-width:thin!important;
  scrollbar-color:var(--ui-scrollbar-thumb) transparent!important;
}
*::-webkit-scrollbar{
  width:2px!important;
  height:2px!important;
}
*::-webkit-scrollbar-track{background:transparent!important}
*::-webkit-scrollbar-thumb{
  background:var(--ui-scrollbar-thumb)!important;
  border:0!important;
  border-radius:0!important;
}
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:horizontal,
*::-webkit-scrollbar-button:vertical{
  display:none!important;
  width:0!important;
  height:0!important;
}
.manage-top nav,.pos-header-menu,.admin-sidebar nav{scrollbar-width:thin!important}
.manage-top nav::-webkit-scrollbar,.pos-header-menu::-webkit-scrollbar,.admin-sidebar nav::-webkit-scrollbar{
  display:block!important;
  width:2px!important;
  height:2px!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:50%;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,.admin-modal-actions,.manage-modal footer,.pos-modal footer,.settings-save-row,
.new-customer-actions,.payment-head-actions,.ticket-tools{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:var(--pf-button-gap)!important;
}
.row-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:var(--pf-button-gap)!important;border-top:1px solid var(--pf-border)!important}
td.row-actions{display:table-cell!important;text-align:right!important;white-space:nowrap!important}
td.row-actions>button{display:inline-flex!important;vertical-align:middle!important}
td.row-actions>button+button{margin-left:var(--pf-button-gap)!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}

/* 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{
  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{
  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{
  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:1300!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:hover>.pf-user-branch-dropdown,.pf-user-branch-menu:focus-within>.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{
  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}

/* Native color control must display the selected color instead of inheriting generic input background. */
.color-setting-field{align-content:start!important}
.color-picker-wrap{margin-top:19px;margin-left:10px;display:flex!important;align-items:center!important;gap:10px!important}
input[type="color"]{
  width:64px!important;height:40px!important;min-height:40px!important;padding:3px!important;
  border:1px solid var(--pf-border)!important;background:transparent!important;cursor:pointer!important;
}
input[type="color"]::-webkit-color-swatch-wrapper{padding:0!important}
input[type="color"]::-webkit-color-swatch{border:0!important;border-radius:2px!important}
input[type="color"]::-moz-color-swatch{border:0!important;border-radius:2px!important}
.color-alpha-input{width:72px!important;min-width:72px!important;margin:0!important}.color-alpha-suffix{margin-left:-7px;color:var(--pf-muted);font-size:12px}.color-picker-wrap output{font:600 12px Consolas,monospace;color:var(--pf-muted)!important}.settings-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pf-border); padding-left: 20px; padding-bottom: 20px; }.settings-section:first-of-type { margin-top: 0px; border-top: 0px; padding: 20px 20px 5px; }.settings-section h3 { margin: 0px 0px 10px; font-size: 15px; color: var(--pf-text); }
.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:50%;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: 180px 180px minmax(220px, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 14px; padding: 17px; }
.event-log-toolbar label{display:grid;gap:6px}
.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:50%;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: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:10px;margin:-5px 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}
main .manage-page-tabs,main .pf-page-tabs{
  display:flex;align-items:flex-end;gap:4px;margin:0 0 15px;padding:0;list-style:none;border:0;
}
main .manage-page-tabs>a,main .manage-page-tabs>button,main .manage-page-tabs>li>a,main .pf-page-tabs>a,main .pf-page-tabs>button,main .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;
}
main .manage-page-tabs>a:hover,main .manage-page-tabs>button:hover,main .manage-page-tabs>li>a:hover,main .pf-page-tabs>a:hover,main .pf-page-tabs>button:hover,main .pf-page-tabs>li>a:hover{border-bottom-color:var(--pf-tab-hover-border);background:transparent;color:var(--pf-link);}
main .manage-page-tabs>.active,main .manage-page-tabs>li.active>a,main .pf-page-tabs>.active,main .pf-page-tabs>li.active>a,main .manage-page-tabs>.active:hover,main .manage-page-tabs>li.active>a:hover,main .pf-page-tabs>.active:hover,main .pf-page-tabs>li.active>a:hover{border-bottom-color:var(--brand);background:transparent;color:var(--pf-link);cursor:default;}
.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:-4px!important}
.system-about-tabs>.pf-page-tab.active,.system-about-tabs>.pf-page-tab[aria-selected="true"]{border-bottom-color:var(--brand)!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}

.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}
.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}
.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}

/* 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:162px;min-height:34px;margin:42px auto 0;padding:7px 18px;border:1px solid var(--pf-active);border-radius:2px;
  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)}
@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:170px 160px 190px 150px minmax(240px,1fr);gap:10px;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}}