/* BadgerRMS design system. The content remains a compact light operations UI;
   navigation uses Badger's own light, sectioned command-dock pattern. */

:root {
  --bg:          #f3f6fb;
  --bg-soft:     #ffffff;
  --surface:     #ffffff;
  --surface-2:   #f6f8fb;
  --surface-3:   #edf1f5;
  --border:      #dde0e0;
  --border-2:    #c7ced3;
  --text:        #2a2c2d;
  --text-dim:    #35454c;
  --text-muted:  #6b7785;
  --accent:      #1171e4;
  --accent-dim:  rgba(17,113,228,0.12);
  --accent-strong:#0e5fc2;
  --success:     #1d8a4c;
  --success-dim: rgba(29,138,76,0.12);
  --warn:        #b26a00;
  --warn-dim:    rgba(178,106,0,0.12);
  --danger:      #d6294b;
  --danger-dim:  rgba(214,41,75,0.12);
  --info:        #1171e4;
  --info-dim:    rgba(17,113,228,0.12);
  --violet:      #7c3aed;
  --violet-dim:  rgba(124,58,237,0.12);
  --shadow-pop:  0 10px 28px rgba(20,30,40,.14), 0 2px 6px rgba(20,30,40,.06);

  --sidebar-bg:      #eef4f2;
  --sidebar-text:    #17324d;
  --sidebar-text-dim:#61766f;
  --sidebar-hover:   #e1ece8;
  --nav-accent:      #128a7e;
  --nav-accent-dark: #0c625a;

  /* Legacy badger-* aliases kept so existing rules keep working unchanged */
  --badger-accent:        #1171e4;
  --badger-accent-hover:  #0e5fc2;
  --badger-accent-dim:    rgba(17,113,228,0.12);
  --badger-accent-glow:   rgba(17,113,228,0.18);
  --badger-bg:        #f3f6fb;
  --badger-surface:   #ffffff;
  --badger-surface-2: #f6f8fb;
  --badger-surface-3: #edf1f5;
  --badger-border:    #dde0e0;
  --badger-border-2:  #c7ced3;
  --badger-text:      #2a2c2d;
  --badger-muted:     #6b7785;
  --badger-dim:       #35454c;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  /* daisyUI's default "business" theme paints its own dark oklch background on
     <html>; pin ours explicitly so no dark flash shows through scroll/overscroll gaps. */
  background: var(--bg);
}

body {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* Badger command dock */
.app-workspace { display: flex; flex: 1; min-height: 0; }
.rms-sidebar {
  --bs-offcanvas-width: 252px;
  width: 252px; flex: 0 0 252px; height: calc(100vh - 68px);
  position: sticky; top: 68px; display:flex; flex-direction:column; overflow-y: auto;
  background: var(--sidebar-bg); border-right: 1px solid #d7e3df; color: var(--sidebar-text);
}
.rms-sidebar .sidebar-body { display:block; flex:1; padding:4px 12px 22px; }
.sidebar-mobile-head { display:none; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #d7e3df; }
.sidebar-workspace-card { display:flex; align-items:center; gap:10px; margin:14px 12px 8px; padding:11px; border:1px solid #d7e3df; border-radius:14px; background:rgba(255,255,255,.72); box-shadow:0 4px 12px rgba(23,50,77,.05); }
.sidebar-workspace-card > span:last-child { display:flex; flex-direction:column; min-width:0; }
.sidebar-workspace-card strong { overflow:hidden; color:var(--sidebar-text); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-workspace-card small { color:var(--sidebar-text-dim); font-size:10.5px; }
.sidebar-workspace-mark,.sidebar-workspace-logo { width:34px; height:34px; flex:0 0 34px; border-radius:10px; }
.sidebar-workspace-mark { display:grid; place-items:center; background:linear-gradient(145deg,var(--nav-accent),var(--nav-accent-dark)); color:#fff; font-weight:800; }
.sidebar-workspace-logo { object-fit:contain; padding:3px; background:#fff; }
.sidebar-section-label { margin:16px 9px 6px; color:#789087; font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.sidebar-link { display:flex; align-items:center; gap:10px; min-height:40px; margin:3px 0; padding:6px 9px; border:1px solid transparent; border-radius:11px; color:var(--sidebar-text); font-size:13px; font-weight:650; text-decoration:none; }
.sidebar-icon { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:8px; background:rgba(255,255,255,.72); color:var(--sidebar-text-dim); }
.sidebar-link:hover { border-color:#d1dfda; background:rgba(255,255,255,.78); color:var(--nav-accent-dark); text-decoration:none; }
.sidebar-link.is-active { border-color:rgba(18,138,126,.28); background:#fff; color:var(--nav-accent-dark); box-shadow:0 5px 16px rgba(23,50,77,.08); }
.sidebar-link.is-active .sidebar-icon { background:var(--nav-accent); color:#fff; }
.sidebar-active-arrow { width:auto!important; margin-left:auto; color:var(--nav-accent)!important; font-size:11px!important; }
.sidebar-group-expand { margin:3px 0; }
.sidebar-group-summary { cursor:pointer; list-style:none; }
.sidebar-group-summary::-webkit-details-marker { display:none; }
.sidebar-group-caret { width:auto!important; margin-left:auto; font-size:10px!important; color:var(--sidebar-text-dim); transition:transform .15s ease; }
.sidebar-group-expand[open] > .sidebar-group-summary .sidebar-group-caret { transform:rotate(180deg); }
.sidebar-group-summary.is-active { border-color:rgba(18,138,126,.28); background:#fff; color:var(--nav-accent-dark); box-shadow:0 5px 16px rgba(23,50,77,.08); }
.sidebar-group-summary.is-active .sidebar-icon { background:var(--nav-accent); color:#fff; }
.sidebar-group-body { display:flex; flex-direction:column; gap:1px; margin:2px 0 4px 30px; padding-left:8px; border-left:1px solid #d7e3df; }
.sidebar-sublink { display:block; padding:6px 9px; border-radius:8px; color:var(--sidebar-text-dim); font-size:12.5px; font-weight:600; text-decoration:none; }
.sidebar-sublink:hover { background:rgba(255,255,255,.78); color:var(--nav-accent-dark); text-decoration:none; }
.sidebar-sublink.is-active { background:#fff; color:var(--nav-accent-dark); box-shadow:0 5px 16px rgba(23,50,77,.08); }
.sidebar-footer { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:0 8px; margin:8px 12px 14px; padding:10px 12px; border-top:1px solid #d7e3df; color:var(--sidebar-text-dim); font-size:11px; }
.sidebar-footer small { grid-column:2; font-size:9.5px; }
.status-dot { width:8px; height:8px; grid-row:1 / span 2; border-radius:50%; background:#23a36d; box-shadow:0 0 0 4px rgba(35,163,109,.12); }

/* Open-record tab strip in the topbar */
.record-tabstrip { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; max-width: 46vw; }
.record-tabstrip::-webkit-scrollbar { display: none; }
.record-tab { display: flex; align-items: stretch; flex-shrink: 0; border-bottom: 2px solid transparent; }
.record-tab.is-active { border-bottom-color: var(--accent); }
.record-tab a { display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.record-tab.is-active a { color: var(--accent); }
.record-tab a:hover { color: var(--text); text-decoration: none; }
.record-tab a i { font-size: 13px; }
.record-tab a span { overflow: hidden; text-overflow: ellipsis; }
.record-tab-close { display: flex; align-items: center; padding: 0 6px 0 0; color: var(--text-muted); text-decoration: none; }
.record-tab-close:hover { color: var(--danger); text-decoration: none; }
.topnav-spacer { flex: 1; }
.mobile-nav-toggle { display: none !important; color: var(--text) !important; border-color: var(--border) !important; }
.login-body { width: 100%; }

.form-control, .form-select {
  background: var(--surface); color: var(--text); border-color: var(--border);
}
.form-control:focus, .form-select:focus { background: var(--surface); color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--accent-dim); }
.form-label { color: var(--text-dim); font-size: 12px; font-weight: 650; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text-dim); --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--text); }
.table thead th { color: var(--text-dim); font-size: 13px; font-weight: 600; letter-spacing: normal; text-transform: none; }
.table thead th { position: sticky; top: 0; background: #fff; z-index: 5; box-shadow: 0 1px 0 var(--border); }
.badge { font-weight: 650; }
.config-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.config-grid .card:first-child { grid-row: span 2; }
.card-kicker { color: var(--text-muted); font-size: 11.5px; margin-top: 2px; font-weight: 400; }
.stack-list { display: flex; flex-direction: column; }
.stack-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.stack-row:last-child { border-bottom: 0; }
.stack-row small { display: block; color: var(--text-muted); margin-top: 2px; }
.workflow-track { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.workflow-step { position: relative; display: flex; align-items: center; gap: 7px; min-height: 48px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-weight: 650; }
.workflow-step:not(:last-child)::after { content: ''; position: absolute; right: -9px; width: 9px; height: 1px; background: var(--border-2); }
.permission-manage { background: var(--success-dim); color: var(--success); }
.permission-edit { background: var(--info-dim); color: var(--info); }
.permission-view { background: var(--violet-dim); color: var(--violet); }
.permission-none { background: var(--danger-dim); color: var(--danger); }
.smart-select { position: relative; width: 100%; }
.smart-select-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.smart-select-menu { display: none; position: absolute; z-index: 600; top: calc(100% + 4px); left: 0; right: 0; max-height: 300px; overflow-y: auto; padding: 6px; border: 1px solid var(--border-2); background: var(--surface-2); }
.smart-select-menu.is-open { display: block; }
.smart-select-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.smart-select-option:hover, .smart-select-option.is-active { background: var(--accent-dim); color: var(--accent-strong); }
.smart-select-option small { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.smart-select-empty { padding: 16px 10px; color: var(--text-muted); text-align: center; }
.product-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.warehouse-board { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; align-items: start; }
.warehouse-lane { min-height: 420px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); }
.warehouse-lane > header { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 12px; font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.warehouse-cards { display: flex; flex-direction: column; gap: 8px; }
.warehouse-card { display: flex; flex-direction: column; gap: 3px; padding: 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.warehouse-card:hover { border-color: var(--accent); background: var(--surface-2); text-decoration: none; }
.warehouse-card strong { color: var(--accent-strong); font-size: 12px; }
.warehouse-card small { color: var(--text-muted); }
.warehouse-project-list { display: flex; flex-direction: column; gap: 12px; }
.warehouse-line-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; margin-bottom: 14px; }
.warehouse-line-head > div:first-child { display: flex; flex-direction: column; }
.warehouse-line-head small { color: var(--text-muted); margin-top: 2px; }
.warehouse-counts { display: flex; gap: 6px; flex-wrap: wrap; }
.warehouse-counts span { padding: 5px 8px; border-radius: 5px; background: var(--surface-2); color: var(--text-muted); font-size: 11px; }
.warehouse-counts b { color: var(--text); margin-left: 3px; }
.warehouse-action-grid { display: grid; grid-template-columns: 1.1fr 1.5fr 1.5fr auto; gap: 10px; align-items: end; }
.warehouse-submit { padding-bottom: 12px; }

a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ── */
#app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

#page-body {
  flex: 1;
  overflow: auto;
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}

.page-content {
  padding: 24px 32px 64px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Topbar ── */
#topbar {
  height: 68px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 22px;
  gap: 18px;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 14px;
  box-shadow: none;
  flex-shrink: 0;
}
.brand-stack { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name {
  font-weight: 750; font-size: 16px; letter-spacing: -0.005em;
  white-space: nowrap; color: var(--text);
}
.brand-sub { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }

/* ── Top nav ── */
nav.topnav {
  display: flex; align-items: center; gap: 2px;
  margin-left: 6px;
}
nav.topnav .nav-item {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  font-size: 14px; font-weight: 500;
  color: var(--text-dim);
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  border: none; background: transparent;
}
nav.topnav .nav-item:hover { background: var(--surface-2); color: var(--text); }
nav.topnav .nav-item.is-active { background: var(--surface-2); color: var(--text); font-weight: 600; }
nav.topnav .nav-item i.caret { font-size: 11px; opacity: .65; }

/* Mega menu panel */
.mega-panel {
  display: none;
  position: absolute;
  top: 56px; left: 0; right: 0;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  padding: 22px 32px;
  gap: 28px 40px;
  z-index: 99;
}
.mega-panel.is-open {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.mega-col-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); font-weight: 700;
  padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.mega-panel a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 6px;
  color: var(--text-dim); text-decoration: none;
  font-size: 13.5px;
}
.mega-panel a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.mega-panel a i { font-size: 14px; color: var(--text-muted); width: 16px; }
.mega-panel a.is-active { color: var(--text); background: var(--surface-2); font-weight: 600; }
.mega-panel a.is-active i { color: var(--accent); }

/* Topbar right side — icon row matching Rentman's search/help/bell/avatar cluster */
.topbar-icons { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.topbar-icons .btn.sm.primary { margin: 0 4px; }
.topbar-search-pop { position: relative; }
.topbar-search-pop summary { list-style: none; cursor: pointer; }
.topbar-search-pop summary::-webkit-details-marker { display: none; }
.topbar-search-pop[open] summary.iconbtn { background: var(--surface-2); color: var(--text); }
.topbar-search-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 320px; max-width: 80vw;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; box-shadow: var(--shadow-pop);
  padding: 10px; z-index: 200;
}
.topbar-search-panel input {
  width: 100%; height: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font: 500 13.5px inherit;
  padding: 0 10px;
  outline: none;
}
.topbar-search-panel input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.topbar-search-panel input::placeholder { color: var(--text-muted); }

.iconbtn {
  width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  color: var(--text-dim); cursor: pointer;
  font-size: 15px; flex-shrink: 0;
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); }

.topbar-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #1fb6a8, #0e8f83);
  display: grid; place-items: center;
  color: #fff; font: 600 12px inherit;
  border: none;
  cursor: pointer; flex-shrink: 0;
  position: relative;
}

.user-dropdown {
  position: absolute; top: 42px; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  min-width: 200px;
  padding: 6px;
  z-index: 200;
  display: none;
}
.user-dropdown.is-open { display: block; }
.user-dropdown .ud-header {
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.user-dropdown .ud-name { font-weight: 600; font-size: 13px; color: var(--text); }
.user-dropdown .ud-role { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.user-dropdown a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 6px;
  color: var(--text-dim); font-size: 13px;
}
.user-dropdown a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.user-dropdown a.danger { color: var(--danger); }
.user-dropdown a.danger:hover { background: var(--danger-dim); }

/* Subcrumb */
.subcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-muted);
  padding: 9px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.subcrumb a { color: var(--text-muted); text-decoration: none; }
.subcrumb a:hover { color: var(--text); }
.subcrumb .sep { font-size: 10px; opacity: .6; }
.subcrumb .crumb-current { color: var(--text); font-weight: 600; }

/* Flash messages */
.flash-zone { padding: 12px 32px 0; }
.flash-msg {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 8px; border-left: 3px solid;
  margin-bottom: 8px; font-size: 13.5px; font-weight: 500;
  position: relative;
}
.flash-msg.is-success { background: var(--success-dim); color: var(--success); border-color: var(--success); }
.flash-msg.is-danger  { background: var(--danger-dim);  color: var(--danger);  border-color: var(--danger); }
.flash-msg.is-warning { background: var(--warn-dim);    color: var(--warn);    border-color: var(--warn); }
.flash-msg.is-info    { background: var(--info-dim);    color: var(--info);    border-color: var(--info); }
.flash-close {
  margin-left: auto; background: none; border: none;
  color: inherit; cursor: pointer; opacity: .7; font-size: 16px; padding: 0 4px;
}
.flash-close:hover { opacity: 1; }

/* Bulma notification compat */
.notification {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 8px; border-left: 3px solid;
  margin-bottom: 8px; font-size: 13.5px; font-weight: 500;
}
.notification.is-success { background: var(--success-dim); color: var(--success); border-color: var(--success); }
.notification.is-danger  { background: var(--danger-dim);  color: var(--danger);  border-color: var(--danger); }
.notification.is-warning { background: var(--warn-dim);    color: var(--warn);    border-color: var(--warn); }
.notification.is-info    { background: var(--info-dim);    color: var(--info);    border-color: var(--info); }
.notification .delete {
  margin-left: auto; width: 20px; height: 20px;
  border-radius: 50%; background: rgba(255,255,255,.2);
  border: none; cursor: pointer; display: grid; place-items: center;
  font-size: 10px; color: inherit; flex-shrink: 0;
  position: relative;
}
.notification .delete::before,
.notification .delete::after {
  content: ''; position: absolute;
  width: 10px; height: 1.5px;
  background: currentColor;
}
.notification .delete::before { transform: rotate(45deg); }
.notification .delete::after  { transform: rotate(-45deg); }

/* ── Page header ── */
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 18px 0;
  gap: 24px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.page-header h1, .page-header .title {
  margin: 0 !important;
  font-size: 22px !important; font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: var(--text) !important;
  line-height: 1.2 !important;
}
.page-header .page-sub { color: var(--text-muted); font-size: 13.5px; margin-top: 4px; }
.page-header .page-actions { display: flex; align-items: center; gap: 8px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text);
  font: 500 13.5px inherit;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--text-muted); color: var(--text); text-decoration: none; }
.btn.primary, .btn-primary {
  background: var(--accent); color: #fff;
  border-color: transparent; font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 1px 2px rgba(0,0,0,.2);
}
.btn.primary:hover, .btn-primary:hover { background: var(--accent-strong); color: #fff; }
.btn.ghost, .btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn.ghost:hover, .btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }
.btn.danger, .btn-error { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); }
.btn.danger:hover, .btn-error:hover { background: var(--danger); color: #fff; }
.btn.sm, .btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 6px; }
.btn.xs, .btn-xs { height: 26px; padding: 0 8px; font-size: 11.5px; border-radius: 5px; }
.btn i { font-size: 14px; }
.btn.sm i { font-size: 12px; }

/* Bulma button compatibility */
.button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text);
  font: 500 13.5px inherit;
  cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.button:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.button.is-primary {
  background: var(--accent) !important; color: #fff !important;
  border-color: transparent !important; font-weight: 700 !important;
}
.button.is-primary:hover { background: var(--accent-strong) !important; color: #fff !important; }
.button.is-ghost, .button.is-light {
  background: var(--surface-2) !important; color: var(--text-dim) !important;
  border-color: var(--border) !important;
}
.button.is-ghost:hover, .button.is-light:hover { background: var(--surface-3) !important; color: var(--text) !important; }
.button.is-success { background: var(--success-dim) !important; color: var(--success) !important; border-color: var(--success) !important; }
.button.is-success:hover { background: var(--success) !important; color: #fff !important; }
.button.is-danger { background: var(--danger-dim) !important; color: var(--danger) !important; border-color: var(--danger) !important; }
.button.is-danger:hover { background: var(--danger) !important; color: #fff !important; }
.button.is-danger-light { background: var(--danger-dim) !important; color: var(--danger) !important; border-color: rgba(248,113,113,.3) !important; }
.button.is-warning { background: var(--warn-dim) !important; color: var(--warn) !important; border-color: var(--warn) !important; }
.button.is-info { background: var(--info-dim) !important; color: var(--info) !important; border-color: var(--info) !important; }
.button.is-info.is-light { background: var(--info-dim) !important; color: var(--info) !important; }
.button.is-dark { background: var(--surface-3) !important; color: var(--text-dim) !important; border-color: var(--border) !important; }
.button.is-small, .button.is-small { height: 30px !important; padding: 0 10px !important; font-size: 12.5px !important; border-radius: 6px !important; }
.button.is-fullwidth { width: 100%; justify-content: flex-start; }
.buttons { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.buttons.is-right { justify-content: flex-end; }

/* ── Tags ── */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px;
  font-size: 11.5px; font-weight: 600;
  border-radius: 4px; letter-spacing: 0.005em;
  line-height: 1; white-space: nowrap;
  border: 1px solid transparent;
}
.tag i { font-size: 10px; }
.tag.rent      { background: var(--info-dim);    color: var(--info);    border-color: var(--info-dim); }
.tag.sell      { background: var(--success-dim); color: var(--success); border-color: var(--success-dim); }
.tag.service   { background: var(--violet-dim);  color: var(--violet);  border-color: var(--violet-dim); }
.tag.neutral   { background: var(--surface-3);   color: var(--text-dim); }
.tag.warn      { background: var(--warn-dim);    color: var(--warn); }
.tag.danger    { background: var(--danger-dim);  color: var(--danger); }
.tag.success   { background: var(--success-dim); color: var(--success); }
.tag.accent    { background: var(--accent-dim);  color: var(--accent-strong); }
/* Bulma tag compat */
.tag.is-primary  { background: var(--accent-dim)    !important; color: var(--accent-strong) !important; border-color: var(--accent-dim) !important; }
.tag.is-success  { background: var(--success-dim)   !important; color: var(--success)       !important; }
.tag.is-danger   { background: var(--danger-dim)    !important; color: var(--danger)        !important; }
.tag.is-warning  { background: var(--warn-dim)      !important; color: var(--warn)          !important; }
.tag.is-info     { background: var(--info-dim)      !important; color: var(--info)          !important; }
.tag.is-light    { background: var(--surface-3)     !important; color: var(--text-dim)      !important; }
.tag.is-dark     { background: var(--surface-2)     !important; color: var(--text-muted)    !important; }

.dot {
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.dot.ok      { background: var(--success); }
.dot.warn    { background: var(--warn); }
.dot.danger  { background: var(--danger); }
.dot.info    { background: var(--info); }

/* ── Cards ── */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  /* Not `overflow: hidden` — that clips any absolutely-positioned popover living
     inside a card (the searchable-select dropdown, in particular) to the card's
     own box instead of letting it float above whatever comes after it. The 4px
     radius bleed this trades away is not worth that recurring bug. */
  overflow: visible;
  box-shadow: none !important;
  color: var(--text) !important;
}
.card-content[style*="padding:0"] { overflow: hidden; border-radius: inherit; }
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.card-head h3 {
  margin: 0;
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text);
}
.card-head .pill { font-size: 12px; color: var(--text-muted); font-weight: 500; }
/* Bulma card compat */
.card-header {
  display: flex !important; align-items: center !important;
  padding: 0 !important;
  background: var(--bg-soft) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.card-header-title {
  color: var(--text) !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  padding: 13px 18px !important;
  flex: 1 !important;
}
.card-header-icon {
  padding: 8px 12px !important;
}
.card-content { padding: 16px 18px !important; color: var(--text) !important; }
.card-footer { border-top: 1px solid var(--border) !important; background: var(--bg-soft) !important; }
.card-footer-item { color: var(--text-dim) !important; padding: 10px 16px !important; }

/* ── Tables ── */
table.data, .table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: 13.5px;
  background: transparent !important;
  color: var(--text) !important;
}
table.data th, .table th {
  text-align: left;
  font-size: 13px !important; font-weight: 600 !important;
  color: var(--text-dim) !important;
  text-transform: none; letter-spacing: normal;
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  background: var(--surface) !important;
  white-space: nowrap;
}
table.data td, .table td {
  padding: 13px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  vertical-align: middle !important;
  color: var(--text) !important;
}
table.data tr:last-child td, .table tr:last-child td { border-bottom: none; }
table.data tbody tr:hover td,
.table.is-hoverable tbody tr:hover td { background: var(--bg-soft) !important; }
.table.is-clickable tbody tr { cursor: pointer; }
td.num, th.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.muted, .has-text-dim, .has-text-muted { color: var(--text-muted) !important; }
.mono { font-family: ui-monospace, 'Menlo', monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ── Forms ── */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.label {
  font-size: 11.5px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted) !important;
  margin-bottom: 4px !important;
  display: block;
}
.control { position: relative; }
.control.has-icons-left .input { padding-left: 32px !important; }
.control.has-icons-left .icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted) !important;
  pointer-events: none;
}
.input, .textarea {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  color: var(--text) !important;
  font: 500 13.5px inherit !important;
  outline: none;
  box-shadow: none !important;
  transition: border-color .15s;
}
.textarea { height: auto; padding: 8px 10px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted) !important; }
.input:focus, .textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-dim) !important;
}
.input.is-small { height: 30px !important; font-size: 12.5px !important; }

.select {
  position: relative; display: inline-block; width: 100%;
}
.select::after {
  content: ''; pointer-events: none;
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
}
.select select {
  width: 100%;
  height: 36px;
  padding: 0 28px 0 10px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  color: var(--text) !important;
  font: 500 13.5px inherit !important;
  appearance: none; -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
.select select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-dim) !important; }
.select select option { background: var(--surface-2); color: var(--text); }
.select.is-small select { height: 30px !important; font-size: 12.5px !important; }

/* Most PHP views apply .select directly to the <select>; the earlier Bulma
   compatibility rules target a wrapper. Support both patterns explicitly so
   native dropdowns keep a single arrow, border, hit area and focus ring. */
select.select {
  display: block; width: 100%; height: 36px;
  padding: 0 32px 0 10px;
  border: 1px solid var(--border) !important; border-radius: 4px !important;
  background-color: var(--surface) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7785' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important;
  color: var(--text) !important; font: 500 13.5px inherit !important;
  appearance: none !important; -webkit-appearance: none !important;
  outline: none; cursor: pointer;
}
select.select::after { display: none !important; content: none !important; }
select.select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-dim) !important; }
select.select.select-sm, select.select.is-small { height: 30px; padding-right: 28px; font-size: 12.5px !important; }

input[type="checkbox"] {
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-2); border-radius: 4px;
  background: var(--surface); appearance: none; -webkit-appearance: none;
  cursor: pointer; position: relative; vertical-align: middle;
}
input[type="checkbox"]:checked {
  background: var(--accent); border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2 6l3 3 5-6' stroke='%23201200' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 10px 10px;
}

/* ── Grid (Bulma compat) ── */
.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 16px !important;
}
.columns.is-multiline { flex-wrap: wrap; }
.columns.is-mobile { flex-wrap: nowrap; }
.column { flex: 1 1 0; min-width: 0; }
.column.is-1  { flex: 0 0 calc(8.333% - 8px); max-width: calc(8.333% - 8px); }
.column.is-2  { flex: 0 0 calc(16.666% - 8px); max-width: calc(16.666% - 8px); }
.column.is-3  { flex: 0 0 calc(25% - 8px); max-width: calc(25% - 8px); }
.column.is-4  { flex: 0 0 calc(33.333% - 8px); max-width: calc(33.333% - 8px); }
.column.is-5  { flex: 0 0 calc(41.666% - 8px); max-width: calc(41.666% - 8px); }
.column.is-6  { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); }
.column.is-7  { flex: 0 0 calc(58.333% - 8px); max-width: calc(58.333% - 8px); }
.column.is-8  { flex: 0 0 calc(66.666% - 8px); max-width: calc(66.666% - 8px); }
.column.is-9  { flex: 0 0 calc(75% - 8px); max-width: calc(75% - 8px); }
.column.is-10 { flex: 0 0 calc(83.333% - 8px); max-width: calc(83.333% - 8px); }
.column.is-11 { flex: 0 0 calc(91.666% - 8px); max-width: calc(91.666% - 8px); }
.column.is-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 769px) {
  .column.is-3-tablet  { flex: 0 0 calc(25% - 8px);     max-width: calc(25% - 8px); }
  .column.is-4-tablet  { flex: 0 0 calc(33.333% - 8px); max-width: calc(33.333% - 8px); }
  .column.is-6-tablet  { flex: 0 0 calc(50% - 8px);     max-width: calc(50% - 8px); }
  .column.is-8-tablet  { flex: 0 0 calc(66.666% - 8px); max-width: calc(66.666% - 8px); }
}
@media (min-width: 1024px) {
  .column.is-2-desktop  { flex: 0 0 calc(16.666% - 8px); max-width: calc(16.666% - 8px); }
  .column.is-3-desktop  { flex: 0 0 calc(25% - 8px);     max-width: calc(25% - 8px); }
  .column.is-4-desktop  { flex: 0 0 calc(33.333% - 8px); max-width: calc(33.333% - 8px); }
  .column.is-5-desktop  { flex: 0 0 calc(41.666% - 8px); max-width: calc(41.666% - 8px); }
  .column.is-6-desktop  { flex: 0 0 calc(50% - 8px);     max-width: calc(50% - 8px); }
  .column.is-7-desktop  { flex: 0 0 calc(58.333% - 8px); max-width: calc(58.333% - 8px); }
  .column.is-8-desktop  { flex: 0 0 calc(66.666% - 8px); max-width: calc(66.666% - 8px); }
}
.column.is-narrow { flex: 0 0 auto; }
.column.is-align-self-flex-end { align-self: flex-end; }

/* ── Modal (Bulma compat) ── */
.modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 1000;
  align-items: center; justify-content: center;
}
.modal.is-active { display: flex; }
.modal-background {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
}
.modal-card {
  position: relative; z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  max-height: 90vh;
  display: flex; flex-direction: column;
  width: 500px; max-width: 92vw;
}
.modal-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  border-radius: 12px 12px 0 0;
}
.modal-card-title {
  font-size: 15px; font-weight: 700;
  color: var(--text);
  margin: 0;
}
.modal-card-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  color: var(--text);
}
.modal-card-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  border-radius: 0 0 12px 12px;
}
.delete {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-3); border: none;
  cursor: pointer; position: relative;
  display: grid; place-items: center;
  color: var(--text-dim);
}
.delete::before, .delete::after {
  content: ''; position: absolute;
  width: 12px; height: 1.5px;
  background: currentColor;
}
.delete::before { transform: rotate(45deg); }
.delete::after  { transform: rotate(-45deg); }
.delete:hover { background: var(--surface-2); }

/* ── Dropdown (Bulma compat) ── */
.dropdown { position: relative; display: inline-flex; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; right: 0;
  z-index: 200;
  min-width: 180px;
  padding: 6px;
}
.dropdown.is-active .dropdown-menu,
.dropdown.is-hoverable:hover .dropdown-menu { display: block; }
.dropdown-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  padding: 4px;
}
.dropdown-item {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--text-dim); font-size: 13.5px;
  text-decoration: none;
}
.dropdown-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.dropdown-item.has-text-danger { color: var(--danger) !important; }
.dropdown-item.has-text-danger:hover { background: var(--danger-dim); }
.dropdown-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.dropdown-trigger { display: inline-flex; }

/* ── Toolbar ── */
.operation-toolbar, .toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0;
  flex-wrap: wrap;
}
.toolbar-count { font-size: 12px; color: var(--text-muted); }

/* ── Filter pills ── */
.filter-pill {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px;
  font-size: 12.5px; font-weight: 500;
  border-radius: 14px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: transparent;
  cursor: pointer; text-decoration: none;
  transition: all .13s;
}
.filter-pill:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); text-decoration: none; }
.filter-pill.is-active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-strong); }

/* ── KPI / Stat cards ── */
.kpi-grid { display: grid; gap: 12px; }
.kpi, .stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
}
.kpi { display: block; }
.kpi.accent { border-color: var(--accent); }
.kpi .label, .stat-label {
  font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted) !important; font-weight: 700 !important;
  margin-bottom: 4px;
}
.kpi .value, .stat-value {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.kpi .delta {
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 4px;
}
.kpi .delta.up { color: var(--success); }
.kpi .delta.dn { color: var(--danger); }
.stat-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 20px; flex-shrink: 0;
}

/* ── Status pipeline ── */
.status-pipeline {
  display: flex; align-items: stretch;
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--surface);
  margin-bottom: 20px;
}
.status-step {
  flex: 1; padding: 10px 8px 10px 20px;
  position: relative;
  background: transparent;
  border-right: 1px solid var(--border);
  cursor: default;
}
.status-step:last-child { border-right: none; }
.status-step.is-completed { background: var(--surface-2); }
.status-step.is-active { background: var(--accent-dim); }
.status-step.is-active.is-danger { background: var(--danger-dim); }
.status-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-muted);
  margin-bottom: 3px; vertical-align: middle; margin-right: 4px;
}
.status-step.is-completed .status-dot { background: var(--success); }
.status-step.is-active .status-dot { background: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-dim); }
.status-step.is-active.is-danger .status-dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-dim); }
.status-label {
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  display: block;
}
.status-step.is-completed .status-label,
.status-step.is-active .status-label { color: var(--text); }

/* ── Empty state ── */
.empty-state {
  text-align: center; padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state .icon-lg { font-size: 32px; color: var(--text-muted); opacity: .5; margin-bottom: 10px; display: block; }
.empty-state h4 { margin: 0 0 6px; color: var(--text); font-size: 15px; }

/* ── Detail layout ── */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w, 340px);
  gap: 20px;
  align-items: start;
}
.detail-rail {
  display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 16px;
}

/* ── Detail key-value pairs ── */
.kv-list { padding: 4px 0; }
.kv-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 18px; font-size: 13px;
  border-top: 1px solid var(--border);
}
.kv-row:first-child { border-top: none; }
.kv-label { color: var(--text-muted); flex-shrink: 0; margin-right: 12px; }
.kv-value { font-weight: 500; text-align: right; }
.detail-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 700; margin-bottom: .2rem; }
.key-info-section summary.card-header { cursor: pointer; list-style: none; }
.key-info-section summary.card-header::-webkit-details-marker { display: none; }
.key-info-section summary.card-header i { margin-right: 14px; font-size: 12px; color: var(--text-muted); transition: transform .15s ease; }
.key-info-section:not([open]) summary.card-header i { transform: rotate(180deg); }
.key-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.key-info-grid > div { min-width: 0; }
.key-info-grid strong { display: block; font-size: 13.5px; margin-top: 1px; }
.key-info-schedule { display: flex; flex-direction: column; gap: 10px; }
.key-info-schedule small { display: block; color: var(--text-muted); margin-top: 1px; }
.detail-value { font-size: 13.5px; color: var(--text); font-weight: 500; }

/* ── Totals ── */
.totals-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 18px;
}
.totals-row {
  display: flex; justify-content: space-between;
  padding: 5px 0; font-size: 13px; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.totals-row.is-total {
  border-top: 1px solid var(--border-2);
  margin-top: 6px; padding-top: 10px;
  font-weight: 700; font-size: 16px; color: var(--accent-strong);
}

/* ── Product search dropdown ── */
#productResults {
  position: absolute; top: 100%; left: 0; right: 0;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  max-height: 240px; overflow-y: auto;
  display: none;
}
#productResults.is-open { display: block; }
.product-result {
  padding: 10px 14px; font-size: 13.5px;
  color: var(--text);
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; border: none; background: transparent; width: 100%; text-align: left;
  border-bottom: 1px solid var(--border);
}
.product-result:last-child { border-bottom: none; }
.product-result:hover { background: var(--surface-2); }

/* ── Stock bar ── */
.stock-bar {
  height: 5px; background: var(--surface-3);
  border-radius: 3px; overflow: hidden;
  display: flex;
}
.stock-bar .seg-avail { background: var(--success); }
.stock-bar .seg-booked { background: var(--accent); }

/* ── Segmented control ── */
.seg {
  display: inline-flex; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 3px;
}
.seg button {
  height: 28px; padding: 0 12px;
  background: transparent; border: 0; border-radius: 6px;
  color: var(--text-dim); font: 500 12.5px inherit;
  cursor: pointer;
}
.seg button.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.2); }

/* ── Utility helpers (Bulma compat) ── */
.is-hidden { display: none !important; }
.is-flex { display: flex !important; }
.is-block { display: block !important; }
.is-fullwidth { width: 100% !important; }
.has-text-right { text-align: right !important; }
.has-text-left { text-align: left !important; }
.has-text-centered { text-align: center !important; }
.has-text-muted { color: var(--text-muted) !important; }
.has-text-dim { color: var(--text-muted) !important; }
.has-text-success { color: var(--success) !important; }
.has-text-danger  { color: var(--danger) !important; }
.has-text-warning { color: var(--warn) !important; }
.has-text-info    { color: var(--info) !important; }
.has-text-accent  { color: var(--accent) !important; }
.has-text-grey    { color: var(--text-muted) !important; }
.has-text-grey-light { color: var(--text-muted) !important; opacity: .6; }
.has-text-weight-bold { font-weight: 700 !important; }
.is-align-items-center { align-items: center !important; }
.is-justify-content-center { justify-content: center !important; }
.is-align-self-center { align-self: center !important; }
.is-size-7 { font-size: 11px !important; }
.is-size-6 { font-size: 13px !important; }
.is-size-5 { font-size: 16px !important; }
.icon { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; }
.icon.is-small { width: 1.2em; height: 1.2em; font-size: 14px; }
.icon.is-large { width: 2em; height: 2em; font-size: 24px; }
.icon-text { display: inline-flex; align-items: center; gap: 6px; }
.has-icons-left { padding-left: 32px !important; }
.content { color: var(--text); line-height: 1.6; }
.content p { margin: 0 0 8px; }
.title { font-size: 22px !important; font-weight: 700 !important; color: var(--text) !important; margin: 0; letter-spacing: -0.015em; }
.title.is-2 { font-size: 32px !important; }
.title.is-4 { font-size: 18px !important; }
.heading { font-size: 11px !important; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--text-muted) !important; }
.image { display: block; position: relative; overflow: hidden; }
.image.is-4by3::after,
.image.is-square::after { content: ''; display: block; }
.image.is-4by3::after { padding-top: 75%; }
.image.is-square::after { padding-top: 100%; }
.image img, .image figure { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.has-background-light { background: var(--surface-2) !important; }
code, .mono { font-family: ui-monospace, 'Menlo', 'Monaco', monospace; font-size: 12.5px; letter-spacing: -0.01em; }
code { background: var(--surface-3); padding: 2px 6px; border-radius: 4px; color: var(--text-dim); }
p { margin: 0 0 8px; }
h1,h2,h3,h4,h5,h6 { color: var(--text); }

/* Spacing helpers */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-5 { margin-bottom: 24px !important; }
.mb-6 { margin-bottom: 32px !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mt-5 { margin-top: 24px !important; }
.ml-1 { margin-left: 4px !important; }
.ml-2 { margin-left: 8px !important; }
.ml-3 { margin-left: 12px !important; }
.ml-auto { margin-left: auto !important; }
.mr-1 { margin-right: 4px !important; }
.mr-2 { margin-right: 8px !important; }
.mr-3 { margin-right: 12px !important; }
.p-0 { padding: 0 !important; }
.p-2 { padding: 8px !important; }
.p-3 { padding: 12px !important; }
.p-4 { padding: 16px !important; }
.p-5 { padding: 24px !important; }
.px-4 { padding-left: 16px !important; padding-right: 16px !important; }
.py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }

/* ── Focus ── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Hero / product detail ── */
.product-hero {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 20px; align-items: center;
  margin-bottom: 20px;
}
.product-thumb {
  width: 100px; height: 100px; border-radius: 12px;
  background: var(--surface-2);
  display: grid; place-items: center;
  border: 1px solid var(--border);
  overflow: hidden; color: var(--text-muted);
  font-size: 36px;
  position: relative;
}
.product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }

/* ── Tab bar ── */
.tab-bar {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.tab-item {
  padding: 10px 14px;
  font-size: 13.5px; font-weight: 500;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.tab-item:hover { color: var(--text); text-decoration: none; }
.tab-item.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-count {
  font-size: 10.5px; padding: 1px 7px;
  border-radius: 10px; background: var(--surface-3);
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}

/* ── Spin animation ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; display: inline-block; }

/* ── Image source modal grid ── */
.is-official-border { border-color: var(--success) !important; }

/* ── is-multiline for columns ── */
.columns.is-multiline { flex-wrap: wrap !important; }
.columns.is-multiline .column { flex-basis: auto; }
.columns.is-mobile .column { flex-basis: 0 !important; }

/* ── Responsive admin layout ── */
@media (max-width: 768px) {
  .mobile-nav-toggle { display: inline-flex !important; }
  .rms-sidebar { position:fixed; z-index:1000; top:0; left:0; height:100vh; transform:translateX(-105%); transition:transform .18s ease; box-shadow:var(--shadow-pop); }
  .rms-sidebar.is-open { transform: translateX(0); }
  .sidebar-mobile-head { display: flex; }
  .config-grid { grid-template-columns: 1fr; }
  .config-grid .card:first-child { grid-row: auto; }
  .workflow-track { grid-template-columns: 1fr 1fr; }
  .product-summary-grid { grid-template-columns: 1fr 1fr; }
  .warehouse-board { grid-template-columns: 1fr; }
  .warehouse-lane { min-height: 0; }
  .warehouse-line-head { flex-direction: column; }
  .warehouse-action-grid { grid-template-columns: 1fr; }
  body { overflow-x: hidden; }
  #topbar {
    height: auto;
    min-height: 68px;
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  nav.topnav {
    order: 10;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  nav.topnav::-webkit-scrollbar { display: none; }
  nav.topnav .nav-item { padding: 7px 10px; font-size: 13px; }
  .brand-sub { display: none; }
  .topbar-icons .btn.sm.primary { display: none; }
  .subcrumb { padding: 8px 16px; }
  .flash-zone { padding: 10px 16px 0; }
  .page-content { padding: 18px 16px 48px; }
  .page-header { flex-wrap: wrap; gap: 10px; align-items: center; }
  .page-header .title { font-size: 20px !important; }
  .columns:not(.is-mobile) { display: block; }
  .columns:not(.is-mobile) > .column,
  .columns.is-multiline:not(.is-mobile) > .column {
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
  }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-rail { position: static; }
  .operation-toolbar { overflow-x: auto; }
  .card-content { overflow-x: auto; }
  .product-hero { grid-template-columns: 72px 1fr; }
  .product-hero > :last-child { grid-column: 1 / -1; }
  .product-thumb { width: 72px; height: 72px; }
}

/* ── Opportunity items tree ── */
.items-tree tr.group-header { background: var(--bg-soft) !important; cursor: pointer; }
.items-tree tr.group-header:hover td { background: var(--surface-2) !important; }
.items-tree tr.cat-header { cursor: pointer; }
.items-tree tr.cat-header:hover td { background: var(--bg-soft) !important; }

/* Search selectors must escape warehouse cards and overlap following rows. */
.warehouse-line { position: relative; overflow: visible !important; }
.warehouse-line:focus-within { z-index: 50; }
.warehouse-line .card-content { overflow: visible !important; }
.smart-select:focus-within { z-index: 650; }
.smart-select-input:focus {
  outline: 0 !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(240,168,24,.22) !important;
}
.template-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; max-width: 980px; }
.template-card { display: flex; flex-direction: column; gap: 8px; min-height: 170px; padding: 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); text-decoration: none; }
.template-card:hover { border-color: var(--accent); background: var(--surface-2); text-decoration: none; }
.template-card i { color: var(--accent); font-size: 28px; }
.template-card strong { font-size: 15px; }
.template-card span { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.create-choice-row, .create-choice-grid { display: grid; gap: 10px; margin-bottom: 16px; }
.create-choice-row { grid-template-columns: 1fr 1fr; }
.create-choice-grid { grid-template-columns: repeat(3,1fr); }
.choice-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border-2); border-radius: 7px; background: var(--surface-2); cursor: pointer; }
.choice-card:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
.choice-card input { accent-color: var(--accent); margin-top: 3px; }
.choice-card span { display: flex; flex-direction: column; }
.choice-card small { color: var(--text-muted); margin-top: 2px; font-size: 11px; }
.choice-card.compact { margin-top: 8px; }
@media (max-width: 768px) { .template-picker, .create-choice-row, .create-choice-grid { grid-template-columns: 1fr; } }

/* Base rules above already carry the Rentman palette directly — no theme branch. */

.record-tabs { display:flex; gap:0; overflow-x:auto; margin:-4px 0 18px; border-bottom:1px solid var(--border); white-space:nowrap; }
.record-tab { padding:11px 14px 10px; border-bottom:3px solid transparent; color:var(--text-dim); font-size:12.5px; font-weight:600; text-decoration:none; }
.record-tab:hover { background:var(--surface-2); color:var(--accent); text-decoration:none; }
.record-tab.is-active { border-bottom-color:var(--accent); color:var(--accent); }
.rentman-detail { grid-template-columns:minmax(0,1fr) 330px; align-items:start; }
.form-grid { display:grid; gap:2px 16px; }
.form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.product-summary-grid.compact { grid-template-columns:1fr 1fr; }
.record-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.record-toolbar small { display:block; margin-top:2px; color:var(--text-muted); }
.info-banner { margin-bottom:14px; padding:12px 14px; border:1px solid #b9d8fa; border-left:4px solid var(--accent); background:#eaf4ff; color:#31536f; }
.empty-cell { padding:28px!important; color:var(--text-muted)!important; text-align:center; }
.empty-state { padding:54px!important; text-align:center; color:var(--text-muted); }
.empty-state i { display:block; margin-bottom:10px; color:var(--accent); font-size:32px; }
.empty-state h2 { margin:0 0 5px; color:var(--text); font-size:18px; }
.split-selector { display:grid; grid-template-columns:minmax(270px,.42fr) minmax(0,1fr); gap:14px; align-items:start; }
.check-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; color:var(--text-dim); font-size:12px; }
.check-grid input { accent-color:var(--accent); }
.table td small { display:block; color:var(--text-muted); }
@media(max-width:900px){.rentman-detail,.split-selector{grid-template-columns:1fr}.form-grid.three{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.form-grid.two,.form-grid.three,.check-grid{grid-template-columns:1fr}.record-tab{padding-inline:10px}}
.booking-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.booking-toolbar form { display:grid; grid-template-columns:210px minmax(280px,520px) 80px auto; gap:8px; flex:1; }
.scan-field { position:relative; }
.scan-field i { position:absolute; left:12px; top:50%; z-index:2; transform:translateY(-50%); color:var(--accent); }
.scan-field .input { padding-left:36px; }
.warehouse-name { color:var(--text-muted); font-size:12px; white-space:nowrap; }
.booking-board { display:grid; grid-template-columns:repeat(3,minmax(320px,1fr)); gap:14px; align-items:start; min-width:1000px; }
.booking-stage { border-top:3px solid var(--accent); }
.booking-stage > header { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:12px 2px; }
.booking-stage > header div { display:flex; flex-direction:column; }
.booking-stage > header strong { font-size:12px; letter-spacing:.035em; }
.booking-stage > header small,.booking-stage > header span { color:var(--text-muted); font-size:10.5px; }
.booking-stage > header .booking-stage-actions { display:flex; flex-direction:row; align-items:center; gap:10px; }
.booking-stage-actions form { margin:0; }
.booking-stage-actions .btn { white-space:nowrap; }
.booking-lines { display:flex; flex-direction:column; gap:8px; }
.booking-line { display:grid; grid-template-columns:54px minmax(0,1fr); gap:12px; padding:14px; border:1px solid var(--border); background:#fff; box-shadow:0 1px 3px rgba(24,39,56,.08); }
.booking-progress { grid-row:1 / span 2; align-self:center; color:var(--text-dim); font-size:12px; }
.booking-equipment { display:flex; flex-direction:column; min-width:0; }
.booking-equipment .equipment-type { color:var(--text-muted); font-size:10.5px; }
.booking-equipment strong { margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.booking-equipment small { color:var(--text-muted); font-size:10.5px; }
.booking-equipment > a { color:inherit; text-decoration:none; overflow:hidden; }
.booking-equipment > a:hover strong { color:var(--accent); text-decoration:underline; }
.booking-line form { grid-column:2; display:grid; grid-template-columns:minmax(0,1fr) 36px; gap:6px; margin-top:7px; }
.booking-line .smart-select { min-width:0; }
.booking-line .btn-square { width:36px; padding:0; justify-content:center; }
.qty-stepper { text-align:center; }
.stage-empty { padding:13px 15px; border:1px solid #bddaf6; background:#eaf4ff; color:#31536f; font-size:12px; }
.stage-empty i { margin-right:7px; color:var(--accent); }
@media(max-width:1100px){.booking-toolbar{align-items:stretch;flex-direction:column}.booking-toolbar form{grid-template-columns:1fr 1fr 80px auto}.booking-board{overflow-x:auto}.page-content:has(.booking-board){max-width:none}}
@media(max-width:700px){.booking-toolbar form{grid-template-columns:1fr}.scan-qty{width:100%}}

.public-document { max-width:760px; margin:0 auto; }
.document-snapshot { line-height:1.6; }
.document-snapshot h1 { font-size:22px; margin-bottom:14px; }
.document-snapshot p { margin-bottom:10px; color:var(--text); }
.document-snapshot table { width:100%; border-collapse:collapse; margin:14px 0; }
.document-snapshot table th,.document-snapshot table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); font-size:13px; }
.document-snapshot .carnet-table { min-width:920px; }
.document-snapshot .carnet-table th,.document-snapshot .carnet-table td { border:1px solid #9aa7b3; padding:6px; vertical-align:top; font-size:10px; }
.document-snapshot .carnet-table thead th { background:#eef3f5; }
.document-snapshot .carnet-total th { background:#e4ecef; }
.carnet-alert { margin:12px 0; padding:10px 12px; border-left:4px solid #dc8a00; background:#fff7df; color:#6f4b00; font-size:12px; }
.carnet-warning { display:block; color:#b42318; font-size:9px; }
.customs-cell { min-width:90px; }

.progress-checklist { list-style:none; margin:0; padding:0; }
.progress-row { display:flex; align-items:flex-start; gap:10px; padding:10px 15px; border-bottom:1px solid var(--border); }
.progress-row:last-child { border-bottom:none; }
.progress-row > i:first-child { color:var(--text-muted); margin-top:2px; }
.progress-row.is-done > i:first-child { color:var(--accent); }
.progress-row strong { display:block; font-size:12.5px; }
.progress-row small { color:var(--text-muted); font-size:11px; }
.progress-check { color:#2b9348; margin-left:auto; }
.tenant-logo { width:34px; height:34px; object-fit:contain; border-radius:4px; background:#fff; padding:2px; }
.admin-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(320px,.8fr); gap:18px; align-items:start; }
.tenant-admin-head { display:grid; grid-template-columns:88px 1fr; gap:18px; align-items:center; }
.tenant-logo-preview,.tenant-logo-placeholder { width:88px; height:64px; object-fit:contain; display:grid; place-items:center; border:1px solid var(--border); border-radius:4px; background:#fff; color:var(--accent); font-size:28px; font-weight:800; }
.field-help { margin:-8px 0 12px; color:var(--text-muted); font-size:11px; }
.row-actions { display:flex; align-items:center; gap:5px; }
.danger-link { color:var(--danger)!important; }
.editable-table input[type="checkbox"] { accent-color:var(--accent); }
.editable-table .badge { white-space:nowrap; }
.line-number { width:82px!important; min-width:70px; }
.percent-field { position:relative; width:82px; }
.percent-field span { position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:11px; }
.percent-field input { padding-right:22px; }
.category-row td { padding:8px 14px!important; background:#edf2f7!important; color:#52606e!important; font-size:11px!important; font-weight:800!important; letter-spacing:.055em; text-transform:uppercase; }
.form-grid.four { grid-template-columns:minmax(260px,2fr) repeat(3,minmax(110px,1fr)); }
.form-grid.five { grid-template-columns:minmax(230px,1.8fr) minmax(145px,1.1fr) repeat(3,minmax(105px,.75fr)); }
.project-group-manager .card-header { align-items:flex-end; gap:18px; }
.project-group-manager .card-header form { margin-left:auto; }
.card-header > div:first-child:has(> .card-header-title) { min-width:0; padding:13px 18px; }
.card-header > div:first-child:has(> .card-header-title) > .card-header-title { padding:0!important; }
.card-header > div:first-child:has(> .card-header-title) > .card-kicker { margin-top:3px; }
.inline-create { display:flex; align-items:center; gap:7px; }
.project-group-list { display:flex; flex-direction:column; gap:7px; }
.project-group-chip { display:grid; grid-template-columns:minmax(180px,1fr) 80px auto auto auto; gap:8px; align-items:center; padding:8px; border:1px solid var(--border); border-radius:8px; background:var(--bg-soft); }
.project-group-chip > span { color:var(--text-muted); font-size:11px; white-space:nowrap; }
.group-order { width:80px; }
.group-select { min-width:140px; }
.project-order-table { min-width:1120px; table-layout:auto; }
.project-order-table th:first-child,.project-order-table td:first-child { min-width:135px; }
.project-order-table th:nth-child(2),.project-order-table td:nth-child(2) { min-width:165px; }
.project-order-table .row-actions { justify-content:flex-end; }
.project-group-row td { padding:10px 14px!important; background:#dcefeb!important; color:#155e58!important; font-size:12px!important; font-weight:800!important; letter-spacing:.025em; }
.project-group-row i { margin-right:6px; }
.danger-zone { padding:14px; border:1px solid #efb4b4; border-radius:8px; background:#fff6f6; }
.danger-zone summary { color:var(--danger); font-weight:750; cursor:pointer; }
.danger-zone p { margin:10px 0; color:var(--text-dim); font-size:12px; }
.organisation-edit-panel { padding-top:4px; }
.admin-quick-actions { display:flex; justify-content:flex-end; margin:-12px 0 12px; }
.deal-chips { display:flex; flex-wrap:wrap; gap:7px; }
.deal-chips form { display:flex; align-items:center; gap:7px; padding:6px 8px 6px 10px; border:1px solid var(--border); border-radius:20px; background:var(--surface-2); font-size:12px; }
.deal-chips button { border:0; background:transparent; color:var(--text-muted); cursor:pointer; }
.bulk-menu { position:relative; }
.bulk-menu summary { list-style:none; }
.bulk-menu summary::-webkit-details-marker { display:none; }
.bulk-menu-panel { position:absolute; z-index:40; top:calc(100% + 5px); right:0; display:flex; flex-direction:column; gap:6px; min-width:160px; padding:8px; border:1px solid var(--border); border-radius:4px; background:#fff; box-shadow:0 10px 28px rgba(20,35,50,.16); }
.bulk-menu-panel form,.bulk-menu-panel button { width:100%; }
.category-manage-panel { min-width:280px; }
.category-manage-panel form:first-child { display:grid; gap:6px; }
.bulk-check { display:grid; place-items:center; align-self:center; }
.bulk-check input { width:16px; height:16px; accent-color:var(--accent); }
.booking-line:has(.bulk-check) { grid-template-columns:22px 54px minmax(0,1fr); }
.booking-line:has(.bulk-check) .booking-progress { grid-column:2; }
.booking-line:has(.bulk-check) .booking-equipment,.booking-line:has(.bulk-check) form { grid-column:3; }
@media(max-width:900px){.admin-grid{grid-template-columns:1fr}.form-grid.four,.form-grid.five{grid-template-columns:1fr 1fr}.tenant-admin-head{grid-template-columns:1fr}.tenant-logo-preview,.tenant-logo-placeholder{width:120px}.project-group-chip{grid-template-columns:minmax(150px,1fr) 70px auto}.project-group-chip form{justify-self:end}}
@media(max-width:600px){.form-grid.four,.form-grid.five{grid-template-columns:1fr}.project-group-manager .card-header{align-items:stretch;flex-direction:column}.project-group-manager .card-header form{margin-left:0}.inline-create{align-items:stretch;flex-direction:column}.project-group-chip{grid-template-columns:1fr 72px}.project-group-chip>span{grid-column:1/-1}}

.create-menu { position: relative; display: inline-block; }
.create-menu summary { list-style: none; cursor: pointer; }
.create-menu summary::-webkit-details-marker { display: none; }
.create-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 180px; z-index: 40; padding: 6px; display: flex; flex-direction: column; }
.create-menu-panel a { padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 13px; }
.create-menu-panel a:hover { background: var(--surface-2); }

.note-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.note-row:last-of-type { border-bottom: none; }
.note-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.note-row-head small { color: var(--text-muted); font-size: 11px; }
.note-row-head form { margin-left: auto; }
.note-row p { font-size: 13px; color: var(--text); white-space: pre-wrap; }

.booking-line { position: relative; }
.shortage-flag { position: absolute; top: 8px; right: 8px; z-index: 2; }

.planner-toolbar { flex-wrap: wrap; gap: 10px; align-items: center; }
.planner-status-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.planner-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-muted); background: var(--surface-2); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.planner-chip input { accent-color: var(--accent); }
.planner-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; font-size: 13px; }
.planner-board { border: 1px solid var(--border); background: #fff; overflow-x: auto; }
.planner-days { display: grid; border-bottom: 1px solid var(--border); min-width: 900px; }
.planner-day { padding: 8px 6px; font-size: 10.5px; text-align: center; color: var(--text-muted); border-right: 1px solid var(--border); }
.planner-day:last-child { border-right: none; }
.planner-rows { position: relative; min-width: 900px; padding: 6px 0; }
.planner-row { position: relative; height: 34px; }
.planner-bar { position: absolute; top: 3px; height: 28px; border-radius: 5px; display: flex; align-items: center; overflow: hidden; text-decoration: none; background: var(--surface-2); border: 1px solid var(--border); }
.planner-bar-label { position: relative; z-index: 1; font-size: 11px; font-weight: 600; white-space: nowrap; padding: 0 8px; color: inherit; }
.planner-bar-usage { position: absolute; top: 0; bottom: 0; background: rgba(0,0,0,.18); border-radius: 4px; }
.planner-bar.is-info     { background: var(--info-dim); color: var(--info); }
.planner-bar.is-link     { background: var(--info-dim); color: var(--info); }
.planner-bar.is-primary  { background: var(--accent-dim); color: var(--accent-strong); }
.planner-bar.is-success  { background: var(--success-dim); color: var(--success); }
.planner-bar.is-danger   { background: var(--danger-dim); color: var(--danger); }
.planner-bar.is-warning  { background: var(--warn-dim); color: var(--warn); }
.planner-bar.is-dark     { background: var(--surface-2); color: var(--text-muted); }

.pipeline-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pipeline-kicker { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.pipeline-stages { display: flex; gap: 28px; }
.pipeline-stages small { display: block; color: var(--text-muted); font-size: 11px; }
.pipeline-stages strong { display: block; font-size: 20px; margin: 2px 0 6px; }
.pipeline-bar { width: 130px; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.pipeline-bar span { display: block; height: 100%; border-radius: 3px; }
.pipeline-bar span.is-info { background: var(--info); }
.pipeline-bar span.is-warning { background: var(--warn); }
.pipeline-bar span.is-success { background: var(--success); }
.pipeline-value { text-align: right; }
.pipeline-value small { display: block; color: var(--text-muted); font-size: 11px; margin-bottom: 4px; }
.pipeline-value strong { font-size: 24px; }
.dashboard-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.dashboard-tile { display: block; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; text-decoration: none; position: relative; overflow: hidden; transition: box-shadow .15s; }
.dashboard-tile:hover { box-shadow: 0 2px 10px rgba(24,39,56,.1); }
.dashboard-tile-label { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.dashboard-tile-value { font-size: 24px; font-weight: 700; color: var(--text); }
.dashboard-tile-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.dashboard-tile-bar.is-info { background: var(--info); }
.dashboard-tile-bar.is-warning { background: var(--warn); }
.dashboard-tile-bar.is-success { background: var(--success); }
.dashboard-tile-bar.is-danger { background: var(--danger); }
.dashboard-tile-bar.is-primary { background: var(--accent); }
@media(max-width:700px){.pipeline-summary{flex-direction:column;align-items:flex-start}.pipeline-value{text-align:left}}

.warehouse-card { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.warehouse-card-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.warehouse-card-qr { flex-shrink: 0; border-radius: 4px; background: #fff; padding: 2px; }
.comm-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.comm-row:last-of-type { border-bottom: none; }
.comm-row-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.comm-row-head small { color: var(--text-muted); font-size: 11px; }
.comm-row.comm-sent .comm-row-head strong { color: var(--info); }
.comm-row.comm-received .comm-row-head strong { color: var(--success); }
.comm-subject { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.comm-row p { font-size: 13px; color: var(--text); white-space: pre-wrap; }

.view-toggle-inline { display: flex; gap: 4px; margin-left: auto; }
.view-toggle-inline .btn.is-active { background: var(--accent-dim); color: var(--accent-strong); border-color: var(--accent-dim); }
.job-overview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.view-toggle { display: flex; gap: 4px; }
.view-toggle .btn.is-active { background: var(--accent-dim); color: var(--accent-strong); border-color: var(--accent-dim); }
.equipment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.equipment-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--text); transition: box-shadow .15s; }
.equipment-card:hover { box-shadow: 0 3px 12px rgba(24,39,56,.12); }
.equipment-card img { width: 100%; height: 130px; object-fit: cover; background: var(--surface-2); }
.equipment-card-noimg { width: 100%; height: 130px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-muted); font-size: 28px; }
.equipment-card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.equipment-card-body strong { font-size: 13px; }
.equipment-card-body small { color: var(--text-muted); font-size: 11px; }
.equipment-card-price { font-weight: 700; font-size: 13px; color: var(--accent-strong); margin-top: 2px; }
.product-photo { width: 100%; border-radius: 6px; object-fit: cover; max-height: 200px; }
.product-photo-placeholder { width: 100%; height: 140px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-muted); font-size: 32px; border-radius: 6px; }

/* ---- User menu, profile, sign-in (polish pass) ---- */
.user-menu { position: relative; }
.user-menu > summary { list-style: none; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu[open] > summary { box-shadow: 0 0 0 3px var(--accent-dim); }
.user-menu-panel {
  position: absolute; right: 0; top: 42px; z-index: 60; min-width: 230px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-pop); padding: 6px;
}
.user-menu-panel a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 7px;
  color: var(--text); text-decoration: none; font-size: 14px;
}
.user-menu-panel a:hover { background: var(--surface-2); }
.user-menu-head { display: flex; flex-direction: column; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.user-menu-head small { color: var(--text-muted); overflow-wrap: anywhere; }

.profile-grid { display: grid; grid-template-columns: 280px minmax(0, 640px); gap: 20px; align-items: start; }
@media (max-width: 800px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-summary { text-align: center; }
.profile-avatar {
  width: 72px; height: 72px; border-radius: 50%; margin: 6px auto 12px;
  display: grid; place-items: center; font-size: 24px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #1fb6a8, #0e8f83);
}
.profile-name { font-size: 18px; font-weight: 600; margin: 0 0 2px; }
.profile-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; text-align: left; margin: 18px 0; padding: 14px 0; border-block: 1px solid var(--border); }
.profile-meta dt { color: var(--text-muted); font-size: 13px; }
.profile-meta dd { margin: 0; font-weight: 500; text-align: right; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: linear-gradient(160deg, #eef4f2 0%, #f3f6fb 55%, #e6eef9 100%); }
.login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 32px 28px; }
.login-logo { display: block; width: 84px; height: 84px; object-fit: contain; margin: 0 auto 12px; }
.login-card h1 { text-align: center; font-size: 22px; margin: 0 0 4px; }
.login-card .login-sub { text-align: center; color: var(--text-muted); margin: 0 0 22px; font-size: 14px; }
.login-card .button, .login-card .btn { width: 100%; justify-content: center; margin-top: 6px; }

/* Flash alerts */
.alert { padding: 11px 14px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); font-size: 14px; transition: opacity .4s ease; }
.alert-success { background: var(--success-dim); color: var(--success); border-color: var(--success); }
.alert-danger  { background: var(--danger-dim);  color: var(--danger);  border-color: var(--danger); }
.alert-warning { background: var(--warn-dim);    color: var(--warn);    border-color: var(--warn); }
.alert-info    { background: var(--info-dim);    color: var(--info);    border-color: var(--info); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.table-wrap, .card-content:has(> table) { overflow-x: auto; }

/* ---- Warehouse detail view (OnRent-style: Functions | Allocate | Prepare | Book out | Check-in) ---- */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wh-crumbs { font-size:14px; color:var(--text-muted); margin-bottom:6px; } .wh-crumbs a { color:var(--accent); text-decoration:none; } .wh-crumbs span { color:var(--text); }
.wh-pagehead { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px; }
.wh-title { font-size:30px; font-weight:500; margin:0 0 6px; } .wh-sub { color:var(--text-muted); font-size:14px; }
.wh-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start; }
@media (max-width:1100px){ .wh-layout { grid-template-columns:1fr; } }
.wh-itemshead { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; } .wh-itemshead h2 { font-size:24px; font-weight:500; margin:0; }
.wh-itemsbtns { display:flex; gap:8px; flex-wrap:wrap; }
.wh-pillbtn { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:6px; border:1px solid var(--nav-accent); color:var(--nav-accent-dark); background:var(--surface); font-weight:600; font-size:14px; text-decoration:none; }
.wh-pillbtn:hover { background:var(--surface-2); } .wh-pillbtn.solid { background:var(--nav-accent); color:#fff; border-radius:999px; width:38px; height:38px; justify-content:center; padding:0; }

.wh-tabs { display:flex; gap:2px; border-bottom:3px solid var(--nav-accent); overflow-x:auto; }
.wh-tab { padding:10px 18px; background:var(--surface-3); color:var(--text-dim); font-size:15px; text-decoration:none; white-space:nowrap; display:flex; gap:7px; align-items:center; }
.wh-tab:hover { background:var(--surface-2); } .wh-tab.is-active { background:var(--nav-accent); color:#fff; font-weight:600; }
.wh-panel { background:var(--surface-2); padding:16px; margin-bottom:14px; }
.wh-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.wh-toolbtn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:6px; border:1px solid var(--nav-accent); background:var(--surface); color:var(--nav-accent-dark); font-weight:600; font-size:14px; cursor:pointer; text-decoration:none; list-style:none; }
.wh-toolbtn.primary { background:var(--nav-accent); color:#fff; } .wh-toolbtn:hover { filter:brightness(.96); }
.wh-actionmenu .select { min-width:150px; } .wh-op-container { max-width:200px; }
.wh-hint { margin:12px 0 0; font-size:13px; color:var(--text-muted); }

.wh-scan-row { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; margin-bottom:12px; } .wh-scan-row.bottom { margin:0; align-items:center; }
.wh-scan-field { display:flex; flex-direction:column; gap:4px; } .wh-scan-field.grow { flex:1 1 220px; } .wh-scan-field.qty { width:200px; }
.wh-scan-field label { font-size:14px; color:var(--text-dim); }
.wh-scan-go { background:var(--nav-accent); color:#fff; border:0; border-radius:6px; padding:9px 22px; font-size:15px; font-weight:600; cursor:pointer; text-transform:lowercase; }
.wh-switch { display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--text-dim); cursor:pointer; margin-right:24px; position:relative; }
.wh-switch input { position:absolute; opacity:0; width:44px; height:24px; margin:0; bottom:0; left:0; cursor:pointer; }
.wh-switch i { width:44px; height:24px; border-radius:999px; background:#c9d1d6; border:2px solid #4a5663; position:relative; transition:background .15s; }
.wh-switch i::after { content:''; position:absolute; top:1px; left:1px; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid #4a5663; transition:transform .15s; box-sizing:border-box; }
.wh-switch input:checked + i { background:var(--nav-accent); border-color:var(--nav-accent-dark); } .wh-switch input:checked + i::after { transform:translateX(20px); border-color:var(--nav-accent-dark); }
.wh-switch input:focus-visible + i { outline:2px solid var(--accent); outline-offset:2px; }
.wh-spacer { flex:1; }
.wh-lockbar { margin:-4px 0 12px; padding:8px 14px; background:var(--warn-dim); color:var(--warn); border-radius:6px; font-size:13px; }

.wh-pop { position:relative; display:inline-block; } .wh-pop > summary { list-style:none; cursor:pointer; } .wh-pop > summary::-webkit-details-marker { display:none; }
.wh-pop.inline { display:inline; } .wh-pop.inline > summary { color:var(--text-dim); font-weight:400; }
.wh-pop-panel { position:absolute; left:0; top:calc(100% + 6px); z-index:50; width:340px; max-width:90vw; text-align:left; white-space:normal; padding:14px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-pop); display:flex; flex-direction:column; gap:10px; font-weight:400; color:var(--text); }
.wh-rowmenu .wh-pop-panel { left:auto; right:0; }
.wh-menu { position:absolute; z-index:50; top:calc(100% + 6px); left:0; min-width:200px; background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-pop); padding:4px; display:flex; flex-direction:column; text-transform:none; letter-spacing:0; }
.wh-menu a { padding:8px 12px; border-radius:6px; text-decoration:none; color:var(--text); font-size:14px; font-weight:400; } .wh-menu a:hover { background:var(--surface-2); } .wh-menu a.is-on { background:var(--accent-dim); font-weight:600; }
.wh-rowactions { display:flex; flex-direction:column; gap:2px; } .wh-rowactions button { text-align:left; padding:8px 10px; border:0; background:none; border-radius:6px; cursor:pointer; font-size:14px; color:var(--text); } .wh-rowactions button:hover { background:var(--surface-2); }
.wh-rowcontainer { display:flex; gap:6px; margin-top:4px; } .wh-rowcontainer .input { flex:1; } .wh-rowcontainer button { background:var(--nav-accent); color:#fff; text-align:center; }
.wh-checkinform { border-top:1px solid var(--border); padding-top:10px; display:flex; flex-direction:column; gap:10px; }
.wh-qty-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .wh-qty-row label, .wh-note-label { font-size:12px; font-weight:600; color:var(--text-dim); display:flex; flex-direction:column; gap:3px; }
.wh-asset-choice { border:1px solid var(--border); border-radius:8px; padding:6px 10px; display:flex; flex-wrap:wrap; gap:4px 12px; font-size:13px; } .wh-asset-choice legend { font-weight:600; padding:0 4px; }
.wh-warn { padding:10px 12px; background:var(--warn-dim); border-radius:8px; color:var(--warn); font-size:13px; } .wh-warn ul { margin:6px 0 0 18px; }

.wh-tablewrap { overflow-x:auto; background:var(--surface); }
.wh-table { width:100%; border-collapse:collapse; font-size:15px; min-width:900px; }
.wh-table thead th { text-align:left; padding:10px 12px; font-weight:400; color:var(--text-dim); background:var(--surface-3); border-bottom:1px solid var(--border); font-size:14px; white-space:nowrap; }
.wh-table thead a { color:var(--accent); text-decoration:none; } .wh-table thead a.is-on { font-weight:700; }
.wh-table td { padding:9px 12px; border-bottom:1px solid var(--surface-3); vertical-align:middle; }
.wh-table .num { text-align:right; font-variant-numeric:tabular-nums; width:56px; } .wh-table .c-check { width:36px; } .wh-table .c-act { width:48px; text-align:right; }
.wh-table .c-name { min-width:220px; } .wh-table .c-name a { color:var(--text); text-decoration:none; } .wh-table .c-name a:hover { text-decoration:underline; } .wh-table .c-name small { display:block; color:var(--warn); font-size:12px; }
.wh-table .c-asset em { color:var(--text-muted); }
.wh-grouphead td { background:var(--surface); padding:12px; border-bottom:1px solid var(--border); font-size:18px; }
.wh-grouphead strong { font-weight:600; } .wh-groupmeta { color:var(--text-muted); font-size:13px; margin-left:8px; font-weight:400; }
.wh-groupcheck { margin:0 8px; vertical-align:middle; }
.wh-collapse { background:none; border:0; cursor:pointer; padding:2px 6px; color:var(--text-dim); } .wh-collapse[aria-expanded="false"] i::before { content:"\f4fe"; }
.wh-lockbtn { float:right; width:44px; height:34px; display:grid; place-items:center; border-radius:6px; background:var(--nav-accent); color:#fff; text-decoration:none; font-size:14px; } .wh-lockbtn.is-on { background:var(--warn); }
.wh-group.is-dim { opacity:.4; }
.wh-container { display:inline-block; padding:2px 8px; border-radius:6px; background:var(--surface-3); font-size:13px; }
.wh-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:600; color:#fff; white-space:nowrap; }
.wh-pill.type { background:#0f77c8; } .wh-pill.type.is-sale { background:#7a4fd1; }
.wh-pill.is-reserved { background:#6b7785; } .wh-pill.is-mixed { background:#c27a00; } .wh-pill.is-allocated { background:#1171e4; } .wh-pill.is-prepared { background:#7c3aed; }
.wh-pill.is-out { background:#d6294b; } .wh-pill.is-partin { background:#0e8f83; } .wh-pill.is-in { background:#1d8a4c; } .wh-pill.is-done { background:#2a2c2d; }
.wh-rowmenu > summary { width:34px; height:30px; display:grid; place-items:center; color:var(--accent); border-radius:6px; } .wh-rowmenu > summary:hover { background:var(--surface-2); }
.wh-legend { margin:10px 0 0; font-size:12px; color:var(--text-muted); }

.wh-aside section { padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid var(--border); }
.wh-aside h3 { font-size:22px; font-weight:500; margin:0 0 12px; }
.wh-aside dl { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0; } .wh-aside dl > div.wide { grid-column:1 / -1; }
.wh-aside dt { color:var(--text-muted); font-size:14px; } .wh-aside dd { margin:2px 0 0; font-weight:600; font-size:15px; }
.wh-attrs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
@media (max-width:700px){ .wh-title { font-size:24px; } .wh-scan-field.qty { width:100%; } }
.carnet-note { font-size:11px; color:#4a5663; margin:8px 0; }
.carnet-sign { width:100%; border-collapse:collapse; margin-top:16px; } .carnet-sign td { border:1px solid #9aa7b3; padding:6px; font-size:11px; width:50%; }
.trial-banner { margin:0; padding:9px 32px; background:#fff4d6; color:#6f4b00; border-bottom:1px solid #f0d58a; font-size:14px; } .trial-banner a { color:#6f4b00; font-weight:700; }

/* ---- Order view (project Equipment tab) ---- */
.order-tabs { margin-bottom:0; } .order-tabgap { height:16px; }
.order-count { font-size:14px; color:var(--text-muted); font-weight:400; margin-left:8px; }
.order-actions { align-items:center; }
.wh-pillbtn.solid-brand { background:var(--nav-accent); color:#fff; } .wh-pillbtn.is-disabled { opacity:.5; cursor:not-allowed; }
.wh-pillbtn { cursor:pointer; list-style:none; } .wh-pillbtn::-webkit-details-marker { display:none; }
.order-actions .wh-pop-panel { left:0; right:auto; } .order-actions .wh-pop:nth-child(n+4) .wh-pop-panel { left:auto; right:0; }
.order-hint { margin:0; font-size:12px; color:var(--text-muted); }
.wh-qty-row.two { grid-template-columns:90px 1fr; }
.order-table { min-width:820px; } .order-table .c-name { min-width:240px; }
.order-sub { display:block; color:var(--text-muted); font-size:12px; font-weight:400; }
.order-num { width:92px; text-align:right; padding:6px 8px; height:auto; } .order-table .num { width:110px; }
.order-grouptools { float:right; display:flex; gap:6px; align-items:center; }
.order-mini { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:6px; border:1px solid var(--nav-accent); background:var(--surface); color:var(--nav-accent-dark); font-size:13px; font-weight:600; cursor:pointer; list-style:none; } .order-mini::-webkit-details-marker { display:none; }
.order-grouptools .wh-pop-panel { right:0; left:auto; }
.order-text td { background:#fffdf3; font-style:italic; color:#4a3b00; } .order-text i { color:var(--warn); margin-right:6px; }
.order-emptyrow { padding:14px 12px !important; color:var(--text-muted); font-size:14px; }
.order-linkbtn { background:none; border:0; padding:0; color:var(--accent); cursor:pointer; font:inherit; text-decoration:underline; }
.order-empty { text-align:center; padding:56px 20px; background:var(--surface); border:2px dashed var(--border); border-radius:12px; } .order-empty i { font-size:40px; color:var(--nav-accent); } .order-empty h3 { margin:10px 0 6px; font-size:20px; } .order-empty p { margin:0 auto; max-width:460px; color:var(--text-muted); }
.order-deals { margin-top:18px; } .order-deals > summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; } .order-deals > summary::-webkit-details-marker { display:none; }
.order-view .wh-itemshead h2 { font-size:24px; }

/* ===== Top navigation (replaces the sidebar) ===== */
#app-layout { height:auto; min-height:100vh; overflow:visible; }
#page-body { overflow:visible; }
#topbar { height:auto; padding:0; gap:0; flex-direction:column; align-items:stretch; background:#1b2a4e; border-bottom:0; position:sticky; top:0; z-index:200; }
.topbar-main { display:flex; align-items:center; gap:8px; min-height:60px; padding:0 20px; }
#topbar .brand { color:#fff; margin-right:12px; } #topbar .brand-name { color:#fff; font-size:17px; } #topbar .brand-mark { background:linear-gradient(135deg,#1fb6a8,#0e8f83); }
#topbar .tenant-logo { height:36px; width:auto; max-width:140px; object-fit:contain; background:#fff; border-radius:8px; padding:3px; }
.topnav { display:flex; align-items:stretch; align-self:stretch; gap:2px; }
.topnav-link { display:flex; align-items:center; gap:6px; padding:0 16px; color:#dfe6f7; font-size:15.5px; font-weight:500; text-decoration:none; cursor:pointer; list-style:none; border-radius:0; white-space:nowrap; }
.topnav-link::-webkit-details-marker { display:none; } .topnav-link i { font-size:11px; opacity:.8; }
.topnav-link:hover, .topnav-menu[open] > .topnav-link { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }
.topnav-link.is-active { background:var(--nav-accent); color:#fff; font-weight:600; }
.topnav-menu { position:relative; display:flex; } .topnav-menu > summary { height:100%; }
.topnav-panel { position:absolute; top:100%; left:0; min-width:230px; background:#fff; border:1px solid var(--border); border-top:3px solid var(--nav-accent); border-radius:0 0 10px 10px; box-shadow:var(--shadow-pop); padding:8px; z-index:300; display:flex; flex-direction:column; }
.topnav-panel a { padding:11px 14px; border-radius:7px; color:var(--text); text-decoration:none; font-size:15px; } .topnav-panel a:hover { background:var(--surface-2); text-decoration:none; } .topnav-panel a.is-active { background:var(--accent-dim); font-weight:600; color:var(--nav-accent-dark); }
#topbar .iconbtn { color:#dfe6f7; } #topbar .iconbtn:hover, #topbar .topbar-search-pop[open] summary.iconbtn { background:rgba(255,255,255,.12); color:#fff; }
#topbar .topbar-icons { gap:8px; } .topbar-search-panel { z-index:300; }
.nav-toggle { display:none; background:none; border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:8px; width:40px; height:40px; font-size:22px; cursor:pointer; }
.topbar-tabs { background:#f0f4f7; border-bottom:1px solid var(--border); padding:0 20px; } .topbar-tabs .record-tabstrip { max-width:none; height:38px; }
.topbar-tabs .record-tab a { font-size:13.5px; padding:0 12px; max-width:200px; }
.user-menu-panel { z-index:300; }
@media (max-width:1100px) { .hide-sm { display:none; } }
@media (max-width:980px) {
  .nav-toggle { display:block; margin-left:auto; order:3; } .topbar-icons { order:2; margin-left:auto; } .topnav-spacer { display:none; }
  .topbar-main { flex-wrap:wrap; padding:8px 14px; }
  .topnav { display:none; order:5; flex:0 0 100%; flex-direction:column; padding:6px 0 10px; } .topnav.is-open { display:flex; }
  .topnav-link { padding:12px 8px; } .topnav-menu { flex-direction:column; } .topnav-panel { position:static; box-shadow:none; border:0; border-left:3px solid var(--nav-accent); border-radius:0; margin:0 0 4px 12px; background:rgba(255,255,255,.96); }
}

/* ===== More breathing room across the app ===== */
body { font-size:15.5px; line-height:1.55; }
.page-content { padding:32px 40px 80px; max-width:1520px; }
.page-header { margin-bottom:26px; } .page-header .title { font-size:30px; }
.card { border-radius:12px; } .card-header { padding:18px 22px; } .card-content { padding:22px; }
.table th, .table td { padding:14px 16px !important; } .table th { font-size:13px; }
.btn, .button { min-height:40px; }
.input, .select, .textarea { min-height:42px; font-size:15px; }
.stat-card, .dash-stat { padding:20px 22px; }
@media (max-width:700px) { .page-content { padding:20px 16px 60px; } }

/* ===== Project page header, tiles, activities, summary rail ===== */
.oh-actions { display:flex; gap:10px; align-items:center; }
.oh-select { display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border:2px solid var(--text); border-radius:8px; background:var(--surface); font-weight:500; font-size:15.5px; cursor:pointer; list-style:none; min-width:130px; justify-content:space-between; } .oh-select::-webkit-details-marker { display:none; }
.oh-actions .wh-menu { left:auto; right:0; min-width:230px; } .oh-actions .wh-menu form { margin:0; }
.wh-menu button { display:block; width:100%; text-align:left; padding:10px 12px; border:0; background:none; border-radius:6px; cursor:pointer; font:inherit; font-size:14.5px; color:var(--text); } .wh-menu button:hover { background:var(--surface-2); }
.wh-menu .is-danger { color:var(--danger); } .wh-menu a i, .wh-menu button i { margin-right:8px; }
.oh-tiles { display:grid; grid-template-columns:repeat(6,1fr); border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface-2); margin:6px 0 26px; }
.oh-tile { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; padding:16px 18px; color:var(--text-dim); text-decoration:none; border-right:1px solid var(--border); } .oh-tile:last-child { border-right:0; }
.oh-tile:hover { background:#fff; text-decoration:none; } .oh-tile i { grid-row:1 / 3; font-size:26px; align-self:center; color:var(--text-muted); } .oh-tile span { font-size:14px; } .oh-tile strong { font-size:22px; color:var(--text); font-weight:600; }
.oh-activities { margin-bottom:26px; } .oh-activities-head { display:flex; align-items:center; justify-content:space-between; gap:12px; } .oh-activities h2 { font-size:24px; font-weight:500; margin:0 0 10px; }
.oh-actlist { list-style:none; margin:0 0 10px; padding:0; border:1px solid var(--border); border-radius:10px; background:var(--surface); } .oh-actlist li { display:flex; gap:14px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--surface-3); } .oh-actlist li:last-child { border-bottom:0; } .oh-actlist small { margin-left:auto; color:var(--text-muted); }
.oh-acttype { padding:2px 10px; border-radius:999px; background:var(--surface-3); font-size:12px; font-weight:600; color:var(--text-dim); }
.summary-rail { position:relative; padding-left:20px; border-left:1px solid var(--border); gap:0; }
.summary-rail .card { border:0; box-shadow:none; background:transparent; border-radius:0; border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:10px; }
.summary-rail .card-header { padding:8px 0 12px; } .summary-rail .card-header-title { font-size:21px; font-weight:500; } .summary-rail .card-content { padding:0 0 8px; }
.summary-rail .key-info-grid { gap:18px 16px; } .summary-rail .detail-label { color:var(--text-muted); font-size:14px; } .summary-rail strong { font-size:15.5px; }
.summary-rail .totals-box { display:none; }
.rail-toggle { align-self:flex-start; background:none; border:0; font-size:22px; color:var(--text-dim); cursor:pointer; padding:4px 6px; border-radius:6px; margin-bottom:8px; } .rail-toggle:hover { background:var(--surface-3); }
.detail-layout.rail-collapsed { grid-template-columns:1fr 48px; } .detail-layout.rail-collapsed .summary-rail > :not(.rail-toggle) { display:none; } .detail-layout.rail-collapsed .summary-rail { padding-left:0; border-left:0; }
@media (max-width:1100px) { .oh-tiles { grid-template-columns:repeat(3,1fr); } .oh-tile:nth-child(3) { border-right:0; } .oh-tile:nth-child(-n+3) { border-bottom:1px solid var(--border); } .summary-rail { border-left:0; padding-left:0; } }
.detail-rail.summary-rail .card, .detail-rail.summary-rail details.card { border:0 !important; box-shadow:none !important; background:transparent !important; border-radius:0 !important; border-bottom:1px solid var(--border) !important; padding:0 0 12px !important; margin:0 0 14px !important; }
.detail-rail.summary-rail .card-header, .detail-rail.summary-rail summary.card-header { padding:6px 0 12px !important; background:transparent !important; border:0 !important; }
.detail-rail.summary-rail .card-content { padding:0 0 6px !important; }
.wh-switch-row { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; cursor:pointer; } .wh-switch-row input { margin-top:4px; width:18px; height:18px; flex:none; } .wh-switch-row small { display:block; color:var(--text-muted); font-size:12.5px; margin-top:2px; }
.wh-pill.is-moved { background:#5b6770; }
.gci-choices { display:flex; flex-direction:column; gap:6px; margin:10px 0; max-height:260px; overflow:auto; } .gci-choices label { display:flex; gap:8px; align-items:center; padding:8px 10px; background:var(--surface); border:1px solid var(--border); border-radius:8px; } .gci-choices small { color:var(--text-muted); }
.gci-row { display:flex; gap:10px; align-items:center; } .gci-toolbar { margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.gci-other { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; padding:6px 0; border-bottom:1px solid var(--surface-3); }
.gci-settings { width:360px; } .oh-actions .gci-settings, .wh-pagehead .wh-pop-panel { left:auto; right:0; }
.gci .wh-selectall { display:flex; align-items:center; gap:6px; font-weight:600; font-size:14px; }
.stage-count { display:inline-block; min-width:22px; padding:0 7px; margin-left:6px; border-radius:999px; background:rgba(0,0,0,.12); font-size:12px; text-align:center; } .wh-tab.is-active .stage-count { background:rgba(255,255,255,.28); }
.stage-steps { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:14px 0 4px; padding:0; list-style:none; }
.stage-steps li { display:flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; background:var(--surface-3); color:var(--text-muted); font-size:14px; font-weight:600; }
.stage-steps li.is-done { background:var(--success-dim); color:var(--success); } .stage-steps li.is-current { background:var(--nav-accent); color:#fff; }
.stage-steps li + li::before { content:none; } .stage-sep { color:var(--text-muted); font-size:12px; }
.stage-actions { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; } .stage-actions form { margin:0; }
.stage-btn { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:8px; border:2px solid var(--nav-accent); background:var(--nav-accent); color:#fff; font:inherit; font-weight:700; cursor:pointer; } .stage-btn.ghost { background:var(--surface); color:var(--nav-accent-dark); }
.stage-note { margin:8px 0 0; color:var(--text-muted); font-size:13.5px; }
.topnav-group-label { margin:8px 14px 2px; padding-top:10px; border-top:1px solid var(--border); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }

/* ===== Edit windows (read-only sections + dialog) ===== */
.edit-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; margin-bottom:18px; background:#eef6f4; border:1px solid #cfe3de; border-left:5px solid var(--nav-accent); border-radius:10px; }
.edit-bar strong { display:block; font-size:18px; } .edit-bar span { color:var(--text-muted); font-size:14px; }
.edit-readonly { pointer-events:none; user-select:text; }
.edit-readonly button, .edit-readonly .btn, .edit-readonly summary, .edit-readonly input[type=submit], .edit-readonly .row-actions, .edit-readonly .inline-create { display:none !important; }
.edit-readonly input, .edit-readonly select, .edit-readonly textarea { background:var(--surface-2) !important; border-color:transparent !important; color:var(--text) !important; opacity:1; }
.edit-window { width:min(1100px,95vw); max-height:90vh; padding:0; border:0; border-radius:14px; box-shadow:0 24px 80px rgba(10,20,40,.35); }
.edit-window::backdrop { background:rgba(15,25,45,.55); }
.edit-window > header { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 22px; background:var(--nav-accent); color:#fff; }
.edit-window > header h2 { margin:0; font-size:20px; } .edit-kicker { font-size:12px; text-transform:uppercase; letter-spacing:.1em; opacity:.85; }
.edit-window > header .iconbtn { color:#fff; border-color:rgba(255,255,255,.4); }
.edit-body { padding:22px; background:var(--bg); max-height:calc(90vh - 70px); overflow:auto; }
.lock-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 12px; border-radius:999px; background:#fff1d6; color:#8a5a00; font-size:13px; font-weight:700; border:1px solid #f0d58a; }
.order-lock { display:flex; align-items:center; gap:14px; padding:14px 18px; margin-bottom:14px; background:#fff7df; border:1px solid #f0d58a; border-left:5px solid #dc8a00; border-radius:10px; color:#6f4b00; } .order-lock i { font-size:22px; } .order-lock > div { flex:1; } .order-lock form { margin:0; }
.order-num[readonly] { background:var(--surface-2); color:var(--text-muted); cursor:not-allowed; }
.plain-fieldset { border:0; margin:0; padding:0; min-width:0; }
.copy-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 12px; border-radius:999px; background:#7c3aed; color:#fff; font-size:13px; font-weight:800; letter-spacing:.06em; } .copy-badge.sm { padding:1px 8px; font-size:11px; }
.copy-banner { display:flex; align-items:center; gap:14px; padding:14px 18px; margin:0 0 16px; background:#f1eaff; border:1px solid #d6c4fb; border-left:6px solid #7c3aed; border-radius:10px; color:#3b1e7a; } .copy-banner i { font-size:24px; color:#7c3aed; } .copy-banner a { color:#5b21b6; font-weight:700; }
/* ===== Order view / Detail view toggle + edit-job view ===== */
.view-toggle { display:inline-flex; border:2px solid var(--nav-accent); border-radius:10px; overflow:hidden; margin-right:auto; margin-left:14px; }
.view-toggle a, .view-toggle span { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; font-weight:700; font-size:15px; text-decoration:none; color:var(--nav-accent-dark); background:var(--surface); }
.view-toggle a:hover { background:var(--surface-2); text-decoration:none; } .view-toggle .is-active { background:var(--nav-accent); color:#fff; } .view-toggle .is-disabled { opacity:.5; cursor:not-allowed; }
.edit-job-btn { text-decoration:none; }
.editmode-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 22px; margin:6px 0 18px; background:#14304d; color:#fff; border-radius:12px; border-left:8px solid #f2b705; }
.editmode-bar strong { display:block; font-size:22px; } .editmode-bar small { font-weight:400; opacity:.8; font-size:14px; } .editmode-kicker { display:inline-flex; gap:8px; align-items:center; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#f2b705; font-weight:800; }
.editmode-bar .stage-btn.ghost { background:#fff; }
.edit-shell { display:grid; grid-template-columns:230px minmax(0,1fr); gap:24px; align-items:start; }
.edit-nav { position:sticky; top:84px; display:flex; flex-direction:column; gap:2px; padding:8px; background:var(--surface); border:1px solid var(--border); border-radius:12px; }
.edit-nav a { padding:11px 14px; border-radius:8px; color:var(--text); text-decoration:none; font-size:15px; } .edit-nav a:hover { background:var(--surface-2); } .edit-nav a.is-active { background:var(--nav-accent); color:#fff; font-weight:700; }
.edit-nav .edit-nav-back { border-bottom:1px solid var(--border); border-radius:8px 8px 0 0; margin-bottom:6px; color:var(--nav-accent-dark); font-weight:700; }
@media (max-width:900px) { .edit-shell { grid-template-columns:1fr; } .edit-nav { position:static; flex-direction:row; flex-wrap:wrap; } }
/* ===== Drag to reorder ===== */
.drag-handle { display:inline-grid; place-items:center; width:22px; height:28px; margin:0 6px 0 -6px; color:var(--text-muted); cursor:grab; border-radius:6px; vertical-align:middle; user-select:none; } .drag-handle:hover { background:var(--surface-3); color:var(--text); } .drag-handle:active { cursor:grabbing; }
.order-table tr.is-dragging { opacity:.4; background:var(--accent-dim); }
.order-table tr.drop-above > td { box-shadow:inset 0 3px 0 var(--nav-accent); } .order-table tr.drop-below > td { box-shadow:inset 0 -3px 0 var(--nav-accent); }
.order-table tbody.drop-into .wh-grouphead td { background:var(--accent-dim); outline:2px dashed var(--nav-accent); outline-offset:-3px; }
.order-moveform { display:flex; gap:6px; }
.order-saving { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); padding:10px 18px; border-radius:999px; background:#1b2a4e; color:#fff; font-weight:600; z-index:500; box-shadow:var(--shadow-pop); }
.equip-details { border:1px solid var(--border); border-radius:10px; padding:14px 16px 6px; margin:14px 0; background:var(--surface-2); } .equip-details legend { padding:0 8px; font-weight:700; font-size:14px; color:var(--text-dim); }
/* ===== Theatre / production organisations: no pricing anywhere ===== */
body.org-theatre .price-only,
body.org-theatre .field:has(input[name=rental_rate]), body.org-theatre .field:has(input[name=sale_price]), body.org-theatre .field:has(input[name=subrental_cost]),
body.org-theatre .field:has(input[name=list_price]), body.org-theatre .field:has(input[name=margin_price]), body.org-theatre .field:has(input[name=discount_group]),
body.org-theatre .field:has(input[name=factor_group]), body.org-theatre .field:has(input[name=vat_class]), body.org-theatre .field:has(input[name=ledger_credit]), body.org-theatre .field:has(input[name=ledger_debit]),
body.org-theatre .create-choice-row, body.org-theatre .pipeline-summary { display:none !important; }
.theatre-only { display:none; } body.org-theatre .theatre-only { display:revert; } body.org-theatre th.theatre-only, body.org-theatre td.theatre-only { display:table-cell; }
.wh-pill.type.is-hired { background:#8a5a00; }
.oh-tiles { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important; }
.loc-assets td { background:#fafbfd; } .loc-assets summary { cursor:pointer; color:var(--accent); font-weight:600; } .loc-sub { width:100%; margin:8px 0; border-collapse:collapse; font-size:14px; } .loc-sub th, .loc-sub td { padding:6px 10px; border-bottom:1px solid var(--surface-3); text-align:left; }
.loc-table td div { padding:1px 0; }

/* ===== Left navigation (collapsible) ===== */
#app-layout { display:flex; flex-direction:row; align-items:stretch; min-height:100vh; }
#main-col { flex:1; min-width:0; display:flex; flex-direction:column; }
#sidebar { position:sticky; top:0; height:100vh; width:252px; flex:0 0 252px; background:#1b2a4e; color:#dfe6f7; display:flex; flex-direction:column; z-index:260; transition:width .18s ease, flex-basis .18s ease; overflow:hidden; }
html.sb-collapsed #sidebar { width:70px; flex-basis:70px; }
.sb-head { padding:16px 14px 10px; border-bottom:1px solid rgba(255,255,255,.1); min-height:68px; display:flex; align-items:center; }
#sidebar .brand { color:#fff; display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; }
#sidebar .brand-name { color:#fff; font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sidebar .tenant-logo { height:38px; width:auto; max-width:120px; object-fit:contain; background:#fff; border-radius:8px; padding:3px; flex:0 0 auto; }
.sb-nav { flex:1; overflow-y:auto; padding:10px 8px; display:flex; flex-direction:column; gap:2px; scrollbar-width:thin; }
.sb-link { display:flex; align-items:center; gap:12px; padding:11px 12px; color:#dfe6f7; font-size:15px; font-weight:500; text-decoration:none; border-radius:8px; cursor:pointer; list-style:none; white-space:nowrap; }
.sb-link::-webkit-details-marker { display:none; }
.sb-link > i:first-child { font-size:18px; width:22px; text-align:center; flex:0 0 22px; }
.sb-link:hover, .sb-group[open] > .sb-link { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }
.sb-link.is-active { background:var(--nav-accent, #1fb6a8); color:#fff; font-weight:600; }
.sb-caret { margin-left:auto; font-size:11px; opacity:.7; transition:transform .15s; }
.sb-group[open] > summary .sb-caret { transform:rotate(180deg); }
.sb-panel { display:flex; flex-direction:column; padding:2px 0 6px 34px; }
.sb-panel a { padding:8px 12px; color:#c9d3ec; font-size:14.5px; text-decoration:none; border-radius:6px; }
.sb-panel a:hover { background:rgba(255,255,255,.08); color:#fff; }
.sb-panel a.is-active { color:#fff; font-weight:600; background:rgba(255,255,255,.12); }
.sb-group-label { margin:8px 12px 2px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#8d9bc0; }
.sb-collapse { margin:6px 8px 12px; display:flex; align-items:center; gap:12px; padding:10px 12px; background:rgba(255,255,255,.07); border:0; color:#dfe6f7; border-radius:8px; font:inherit; font-size:14px; cursor:pointer; }
.sb-collapse:hover { background:rgba(255,255,255,.15); } .sb-collapse i { width:22px; text-align:center; transition:transform .18s; }
html.sb-collapsed .sb-collapse i { transform:rotate(180deg); }
html.sb-collapsed .sb-label, html.sb-collapsed .sb-caret, html.sb-collapsed .sb-panel, html.sb-collapsed #sidebar .brand-stack { display:none; }
html.sb-collapsed .sb-head { justify-content:center; padding:16px 6px 10px; } html.sb-collapsed #sidebar .tenant-logo { max-width:46px; }
html.sb-collapsed .sb-link, html.sb-collapsed .sb-collapse { justify-content:center; padding-left:0; padding-right:0; }
.sb-backdrop { display:none; }
/* the top bar becomes a light utility strip beside the menu */
#topbar { background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:200; flex-direction:column; }
#topbar .topbar-main { min-height:56px; padding:0 24px; }
#topbar .iconbtn { color:var(--text); } #topbar .iconbtn:hover, #topbar .topbar-search-pop[open] summary.iconbtn { background:var(--surface-2); color:var(--text); }
#topbar .brand-name { color:var(--text); }
.nav-toggle { display:none; background:none; border:1px solid var(--border); color:var(--text); border-radius:8px; width:40px; height:40px; font-size:22px; cursor:pointer; margin:0 10px 0 0; order:0; }
@media (max-width:980px) {
  #sidebar { position:fixed; left:-270px; top:0; width:260px; flex-basis:260px; transition:left .2s ease; box-shadow:none; }
  html.sb-open #sidebar { left:0; box-shadow:0 0 30px rgba(0,0,0,.35); }
  html.sb-open .sb-backdrop { display:block; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:250; }
  html.sb-collapsed #sidebar { width:260px; flex-basis:260px; }
  html.sb-collapsed .sb-label, html.sb-collapsed .sb-caret, html.sb-collapsed #sidebar .brand-stack { display:revert; } html.sb-collapsed .sb-panel { display:flex; }
  html.sb-collapsed .sb-link, html.sb-collapsed .sb-collapse { justify-content:flex-start; padding-left:12px; padding-right:12px; }
  .sb-collapse { display:none; }
  .nav-toggle { display:block; order:0; margin:0 10px 0 0; }
  #topbar .topbar-main { flex-wrap:nowrap; padding:0 14px; } .topnav-spacer { display:block; flex:1; } .topbar-icons { order:2; margin-left:auto; }
}

/* ===== Dashboard: week strip, attention list, pipeline bar (every element is a link) ===== */
.dash2-pipe { margin-bottom:22px; }
.dash2-pipe-bar { display:flex; gap:4px; height:46px; border-radius:12px; overflow:hidden; }
.dash2-pipe-bar a { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 16px; color:#fff; text-decoration:none; font-weight:600; min-width:84px; transition:filter .15s; }
.dash2-pipe-bar a:hover { filter:brightness(1.12); text-decoration:none; } .dash2-pipe-bar b { font-size:18px; }
.dash2-pipe-legend { display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:10px; }
.dash2-pipe-legend a { color:var(--text); text-decoration:none; font-size:14.5px; display:inline-flex; align-items:center; gap:8px; } .dash2-pipe-legend a:hover { text-decoration:underline; }
.dash2-pipe-legend i { width:10px; height:10px; border-radius:50%; display:inline-block; }
.dash2 { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr); gap:22px; align-items:start; }
.dash2-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:6px 0 10px; margin-bottom:22px; }
.dash2-card > header { display:flex; justify-content:space-between; align-items:baseline; padding:14px 20px 8px; } .dash2-card h2 { font-size:17px; font-weight:700; margin:0; }
.dash2-card > header a { font-size:13.5px; text-decoration:none; }
.dash2-week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; padding:6px 14px 10px; }
.dash2-day { background:var(--surface-2); border-radius:10px; padding:8px; min-height:132px; display:flex; flex-direction:column; gap:5px; }
.dash2-day.is-today { background:#e8f6f4; outline:2px solid #1fb6a8; }
.dash2-dayhead { display:flex; align-items:baseline; gap:6px; text-decoration:none; color:var(--text); } .dash2-dayhead small { text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--text-muted); } .dash2-dayhead strong { font-size:20px; }
.dash2-chip { display:block; background:#fff; border-left:4px solid #2563eb; border-radius:6px; padding:5px 7px; font-size:12.5px; line-height:1.3; color:var(--text); text-decoration:none; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.dash2-chip:hover { background:#eef4ff; text-decoration:none; } .dash2-chip b { font-weight:700; } .dash2-chip small { display:block; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash2-chip.s2 { border-left-color:#d97706; } .dash2-chip.s6 { border-left-color:#16a34a; } .dash2-chip.s7, .dash2-chip.s8 { border-left-color:#64748b; }
.dash2-none { color:var(--text-muted); font-size:13px; }
.dash2-att { border-top:1px solid var(--border); padding:4px 20px; } .dash2-att:first-of-type { border-top:0; }
.dash2-att summary { display:flex; align-items:center; gap:12px; padding:10px 0; cursor:pointer; list-style:none; font-weight:600; } .dash2-att summary::-webkit-details-marker { display:none; }
.dash2-att summary i { font-size:19px; } .dash2-att summary span { flex:1; }
.dash2-count { min-width:34px; text-align:center; padding:3px 10px; border-radius:20px; font-weight:800; text-decoration:none; background:#e2e8f0; color:#334155; }
.tone-danger .dash2-count { background:#fee2e2; color:#b91c1c; } .tone-danger summary i { color:#dc2626; } .tone-warn .dash2-count { background:#fef3c7; color:#92400e; } .tone-warn summary i { color:#d97706; } .tone-ok summary i { color:#16a34a; }
.dash2-att ul { list-style:none; margin:0 0 6px 31px; padding:0; } .dash2-att li { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-top:1px dashed var(--border); } .dash2-att li a { text-decoration:none; } .dash2-att li a:hover { text-decoration:underline; } .dash2-att li em { color:var(--text-muted); font-style:normal; white-space:nowrap; }
.dash2-more { display:inline-block; margin:0 0 8px 31px; font-size:13.5px; text-decoration:none; }
.dash2-clear { margin:2px 0 8px 31px; color:var(--text-muted); } .dash2-clear i { color:#16a34a; }
.dash2-list { list-style:none; margin:0; padding:0 8px; } .dash2-list li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:4px 0; }
.dash2-list li > a { flex:1; min-width:0; display:block; padding:8px 12px; border-radius:8px; color:var(--text); text-decoration:none; overflow:hidden; text-overflow:ellipsis; } .dash2-list li > a:hover { background:var(--surface-2); text-decoration:none; }
.dash2-list small { display:block; color:var(--text-muted); font-size:12.5px; } .dash2-pill { background:#dbeafe; color:#1d4ed8; padding:3px 10px; border-radius:20px; font-size:12.5px; font-weight:700; white-space:nowrap; margin-right:8px; }
.dash2-side .tag { margin-right:8px; white-space:nowrap; }
.dash2-facts { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:6px 14px 10px; }
.dash2-facts a { display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; padding:10px 12px; background:var(--surface-2); border-radius:10px; color:var(--text); text-decoration:none; } .dash2-facts a:hover { background:#e6edf7; }
.dash2-facts i { grid-row:span 2; font-size:20px; color:#2563eb; } .dash2-facts strong { font-size:19px; line-height:1.1; } .dash2-facts span { font-size:12.5px; color:var(--text-muted); }
@media (max-width:1180px) { .dash2 { grid-template-columns:1fr; } }
@media (max-width:760px) { .dash2-week { grid-template-columns:1fr 1fr; } .dash2-day { min-height:0; } }

/* Collapse button lives at the top-right of the menu */
.sb-head { justify-content:space-between; gap:8px; }
.sb-head .sb-collapse { margin:0; padding:0; width:36px; height:36px; flex:0 0 36px; justify-content:center; border-radius:8px; background:rgba(255,255,255,.08); }
.sb-head .sb-collapse i { width:auto; transform:none; font-size:18px; }
html.sb-collapsed .sb-head { flex-direction:column; justify-content:center; padding:12px 6px; gap:10px; }
html.sb-collapsed .sb-head .brand { display:none; }
html.sb-collapsed .sb-head .sb-collapse i { transform:none; }
@media (max-width:980px) { .sb-head .sb-collapse { display:none; } html.sb-collapsed .sb-head .brand { display:flex; } html.sb-collapsed .sb-head { flex-direction:row; padding:16px 14px 10px; } }

/* ===== Job page: fluid header, progress track, workspace tabs ===== */
.page-content { max-width:min(1560px,100%); }
.jd-head { display:flex; flex-wrap:wrap; gap:14px 24px; align-items:flex-start; justify-content:space-between; background:linear-gradient(180deg,#fff,#f7f9fc); border:1px solid var(--border); border-radius:16px; padding:clamp(14px,2.2vw,24px); margin-bottom:14px; }
.jd-main { flex:1 1 360px; min-width:0; }
.jd-idrow { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.jd-title { margin:0; font-size:clamp(1.35rem,2.6vw,2rem); line-height:1.15; overflow-wrap:anywhere; }
.jd-ref { color:var(--text-muted); font-weight:600; }
.jd-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; align-items:center; }
.jd-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; background:var(--surface-2); color:var(--text); font-size:13.5px; text-decoration:none; max-width:100%; }
a.jd-chip:hover { background:#e6edf7; text-decoration:none; } .jd-chip.is-warn { background:#fef3c7; color:#92400e; }
.jd-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; flex:0 1 auto; }
.jd-stage-actions { display:flex; flex-wrap:wrap; gap:8px; }
.jd-stage-actions form { margin:0; }
.jd-stage-actions .stage-btn { background:#2563eb; color:#fff; border:0; border-radius:10px; padding:10px 16px; font-weight:600; display:inline-flex; gap:8px; align-items:center; cursor:pointer; min-height:42px; }
.jd-stage-actions .stage-btn.ghost { background:#fff; color:#1d4ed8; border:1.5px solid #bfd0f5; }
.jd-stage-actions .stage-btn:hover { filter:brightness(.96); }
.jd-btn, .jd-controls .oh-select { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; min-height:42px; min-width:0; border:1.5px solid var(--border); border-radius:10px; background:#fff; color:var(--text); font-weight:600; font-size:14.5px; text-decoration:none; cursor:pointer; list-style:none; }
.jd-btn:hover, .jd-controls .oh-select:hover { background:var(--surface-2); text-decoration:none; }
.jd-controls .wh-menu { left:auto; right:0; min-width:230px; } .jd-controls .wh-menu form { margin:0; }
.jd-track { display:flex; list-style:none; margin:0 0 6px; padding:6px 4px 14px; gap:0; }
.jd-track li { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; color:var(--text-muted); font-size:13px; font-weight:600; min-width:0; }
.jd-track li::before { content:''; position:absolute; top:15px; left:-50%; width:100%; height:3px; background:var(--border); z-index:0; }
.jd-track li:first-child::before { display:none; }
.jd-dot { width:32px; height:32px; border-radius:50%; background:#fff; border:3px solid var(--border); display:grid; place-items:center; z-index:1; font-size:13px; color:var(--text-muted); }
.jd-track li.is-done::before, .jd-track li.is-current::before { background:#16a34a; } .jd-track li.is-done .jd-dot { background:#16a34a; border-color:#16a34a; color:#fff; }
.jd-track li.is-current { color:var(--text); } .jd-track li.is-current .jd-dot { border-color:#2563eb; color:#2563eb; box-shadow:0 0 0 4px rgba(37,99,235,.15); }
.jd-track li.is-cancelled .jd-dot { background:#dc2626; border-color:#dc2626; color:#fff; } .jd-track li.is-cancelled { color:#dc2626; }
.jd-steplabel { text-align:center; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.jd-tabs { display:flex; flex-wrap:wrap; gap:4px; align-items:center; border-bottom:2px solid var(--border); margin:6px 0 18px; }
.jd-tabs > a { display:inline-flex; align-items:center; gap:7px; padding:11px 16px; margin-bottom:-2px; border-bottom:3px solid transparent; color:var(--text-muted); font-weight:600; text-decoration:none; white-space:nowrap; }
.jd-tabs > a:hover { color:var(--text); text-decoration:none; } .jd-tabs > a.is-on { color:#1d4ed8; border-bottom-color:#2563eb; }
.jd-tabs b { background:var(--surface-3,#e5e9f0); color:var(--text); font-size:12px; border-radius:999px; padding:1px 8px; }
.jd-tabs .jd-tabs-gap { flex:1; } .jd-tabs a.jd-rel { font-size:13.5px; font-weight:500; padding:8px 10px; border-bottom:0; margin:0; }
.jd-panels { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:18px; align-items:start; }
.jd-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:6px 0 14px; } .jd-card > header { display:flex; justify-content:space-between; align-items:center; padding:12px 18px 6px; } .jd-card h2 { margin:0; font-size:1.05rem; }
.jd-card .oh-actlist, .jd-card .note-row, .jd-card > p, .jd-noteform { margin-left:14px; margin-right:14px; } .jd-noteform { display:flex; gap:8px; margin-bottom:10px; } .jd-noteform .input { flex:1; min-width:0; }
/* never let the job page push wider than the screen */
.detail-layout, .detail-layout > section, .detail-layout > aside { min-width:0; }
.detail-layout > section .table, .detail-layout > section table { max-width:100%; }
.detail-layout > section { overflow-x:auto; }
@media (max-width:1180px) { .detail-layout { grid-template-columns:minmax(0,1fr) !important; } .detail-layout .summary-rail { order:2; } }
@media (max-width:640px) { .jd-controls { justify-content:flex-start; width:100%; } .jd-btn span { display:none; } .jd-tabs > a { padding:10px 10px; } .jd-steplabel { font-size:11.5px; } .jd-dot { width:28px; height:28px; } .jd-track li::before { top:13px; } }

/* ===== New job form and date fields ===== */
.jd-newtabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.jd-newtabs button { border:1.5px solid var(--border); background:#fff; border-radius:999px; padding:9px 18px; font-weight:600; color:var(--text-muted); cursor:pointer; }
.jd-newtabs button.is-on { background:#2563eb; border-color:#2563eb; color:#fff; }
.jd-newpanel[hidden] { display:none; } .jd-newpanel { max-width:1000px; }
.jd-new .label { display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:13.5px; } .jd-new .label .input, .jd-new .label .select, .jd-new .label .textarea { font-weight:400; }
.jd-new .req { color:#dc2626; } .jd-new-actions { display:flex; gap:10px; margin-top:16px; max-width:1000px; align-items:center; } .jd-new-actions .btn-primary { margin-left:auto; }
.jd-dates .label { display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:13.5px; } .jd-dates .input { font-weight:400; }
.jd-stages { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:10px; }
.jd-stage { border:1px solid var(--border); border-radius:10px; padding:8px 12px 12px; display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:0; } .jd-stage legend { font-weight:700; font-size:13px; padding:0 6px; } .jd-stage label { font-size:12px; color:var(--text-muted); display:flex; flex-direction:column; gap:4px; min-width:0; }
.jd-dates-note { margin:0 0 10px; }
.jd-new .label, .jd-dates .label, .jd-stage label { text-align:left; text-transform:none; letter-spacing:0; align-items:stretch; font-size:13.5px; color:var(--text); }
.jd-new .label .help { font-weight:400; color:var(--text-muted); font-size:13px; padding:10px 0; }

/* ===== System setup ===== */
.setup-nav { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.setup-nav a { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px; border:1.5px solid var(--border); background:#fff; color:var(--text); font-weight:600; font-size:14px; text-decoration:none; }
.setup-nav a:hover { background:var(--surface-2); text-decoration:none; } .setup-nav a.is-on { background:#2563eb; color:#fff; border-color:#2563eb; }
.setup-desc { color:var(--text-muted); margin:0 0 18px; }
.setup-body { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr)); gap:18px; align-items:start; }
.setup-body > .wide, .setup-body > .setup-prefs { grid-column:1/-1; }
.setup-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px 20px; }
.setup-field .label, .setup-card .label { display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:13.5px; text-align:left; text-transform:none; letter-spacing:0; color:var(--text); }
.setup-field .label .input, .setup-field .label .select, .setup-card .label .input, .setup-card .label .select, .setup-card .label .textarea { font-weight:400; }
.help { font-weight:400; color:var(--text-muted); font-size:12.5px; }
.setup-savebar { position:sticky; bottom:0; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 40%); padding:16px 0 4px; }
.setup-inline { display:flex; gap:8px; align-items:center; margin-bottom:8px; } .setup-inline .input { flex:1; min-width:120px; }
.setup-twocol { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:20px; } .setup-card h4 { margin:0 0 8px; font-size:14px; }
.setup-rule { border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-bottom:8px; } .setup-rule summary { cursor:pointer; }
.setup-card .check { display:flex; gap:8px; align-items:center; margin:4px 0; font-size:14px; }
.setup-engines { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:10px; } .setup-engine { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:1.5px solid var(--border); border-radius:10px; color:var(--text); text-decoration:none; background:#fff; } .setup-engine:hover { border-color:#2563eb; text-decoration:none; } .setup-engine small { color:var(--text-muted); }
.nowrap { white-space:nowrap; }
.setup-card .label, .setup-card .label *, .setup-field .label, .jd-new .label, .jd-new .label *, .jd-dates .label, .jd-dates .label *, .jd-stage label { text-align:left !important; text-transform:none; letter-spacing:0; }
.setup-card .label small, .setup-card .label .help { display:block; }

/* ===== Visual document editor ===== */
.tpl-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:12px; margin-bottom:12px; align-items:end; }
.tpl-meta .label { display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:13.5px; text-align:left; text-transform:none; letter-spacing:0; color:var(--text); }
.tpl-toolbar { position:sticky; top:56px; z-index:20; display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:8px; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 2px 6px rgba(15,23,42,.06); }
.tpl-toolbar button { width:36px; height:36px; border:0; background:transparent; border-radius:8px; cursor:pointer; font-size:17px; color:var(--text); } .tpl-toolbar button:hover { background:var(--surface-2); }
.tpl-toolbar .select { width:auto; min-width:130px; min-height:36px; } .tpl-toolbar .sep { width:1px; height:24px; background:var(--border); margin:0 4px; }
.tpl-colour { position:relative; width:36px; height:36px; display:grid; place-items:center; cursor:pointer; font-size:17px; } .tpl-colour input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.tpl-stage { background:#e8edf3; border-radius:12px; padding:clamp(10px,3vw,32px); margin-top:12px; overflow-x:auto; }
.tpl-page { background:#fff; width:min(100%,794px); min-height:560px; margin:0 auto; padding:clamp(18px,5vw,56px) clamp(18px,6vw,64px); box-shadow:0 4px 20px rgba(15,23,42,.15); border-radius:2px; outline:none; font-size:14px; line-height:1.5; color:#1b2a4e; }
.tpl-page:focus { box-shadow:0 4px 20px rgba(37,99,235,.35); } .tpl-page table { width:100%; border-collapse:collapse; } .tpl-page td, .tpl-page th { border:1px solid #cbd5e1; padding:6px; }
.tpl-page .mf { background:#dbeafe; color:#1d4ed8; border-radius:4px; padding:1px 6px; font-weight:600; user-select:all; white-space:nowrap; } .tpl-page .mf.is-live { background:#ecfdf5; color:inherit; font-weight:inherit; outline:1px dashed #86efac; white-space:normal; }
.tpl-page .mf.is-block { display:block; padding:0; } .tpl-note { text-align:center; color:var(--text-muted); font-size:13px; margin:14px 0 0; }
.tpl-actions { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; align-items:center; }
.tpl-page h1 { font-size:26px; margin:0 0 10px; } .tpl-page h2 { font-size:20px; margin:14px 0 8px; } .tpl-page h3 { font-size:16px; margin:12px 0 6px; } .tpl-page p { margin:0 0 10px; } .tpl-page blockquote { border-left:4px solid #cbd5e1; margin:8px 0; padding-left:12px; color:#475569; } .tpl-page ul, .tpl-page ol { padding-left:24px; margin:0 0 10px; }

/* ===== Schedule calendar and planner heat ===== */
.cal-wrap { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr); gap:20px; align-items:start; } @media (max-width:900px){ .cal-wrap { grid-template-columns:1fr; } }
.cal { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; } .cal-nav { display:flex; align-items:center; gap:10px; margin-bottom:10px; } .cal-nav strong { flex:1; text-align:center; font-size:1.1rem; }
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; } .cal-dow { text-align:center; font-size:12px; font-weight:700; color:var(--text-muted); padding:4px 0; }
.cal-cell { aspect-ratio:1/0.85; border-radius:8px; border:1px solid var(--border); display:flex; flex-direction:column; justify-content:space-between; padding:5px 7px; color:var(--text); text-decoration:none; min-width:0; } .cal-cell:hover { border-color:#2563eb; text-decoration:none; } .cal-cell.is-empty { border:0; }
.cal-cell.is-sel { outline:3px solid #2563eb; } .cal-cell.is-today span { background:#2563eb; color:#fff; border-radius:50%; width:24px; height:24px; display:grid; place-items:center; } .cal-cell b { align-self:flex-end; font-size:15px; }
.cal-key { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-muted); margin:12px 0 0; } .cal-key i { display:inline-block; width:22px; height:12px; border-radius:3px; border:1px solid var(--border); }
.cal-day { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 16px; } .cal-day h2 { margin:0 0 10px; font-size:1.05rem; } .cal-item { display:block; padding:9px 10px; border-radius:8px; color:var(--text); text-decoration:none; border-top:1px solid var(--border); } .cal-item:hover { background:var(--surface-2); text-decoration:none; } .cal-item small { display:block; color:var(--text-muted); }
.planner-heat { display:grid; gap:2px; margin:0 0 6px; } .planner-heat div { height:22px; border-radius:4px; text-align:center; font-size:12px; font-weight:700; line-height:22px; background:var(--surface-2); }
body.hide-values .price-only { display:none !important; }

/* ===== Pagination ===== */
.pager { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:12px 0; } .pager-count { color:var(--text-muted); font-size:14px; } .pager-links { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-left:auto; }
.pager .is-disabled { opacity:.4; pointer-events:none; } .pager-gap { padding:0 4px; color:var(--text-muted); } .pager-per { font-size:13.5px; color:var(--text-muted); display:flex; gap:8px; } .pager-per b { color:var(--text); }
.sort-link { color:inherit; text-decoration:none; white-space:nowrap; display:inline-flex; gap:6px; align-items:center; } .sort-link:hover { color:#2563eb; text-decoration:none; } .sort-link i { font-size:13px; }
.jobs-filter { flex-wrap:wrap; gap:8px 12px; align-items:center; } .jobs-filter-date { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--text-muted); text-transform:none; letter-spacing:0; } .jobs-filter-date .input { width:auto; }

/* ===== Nested groups and sub-items in the item list ===== */
.order-table tr.is-sub td.c-name { padding-left:44px; } .order-submark, .order-nestmark { color:var(--text-muted); margin-right:6px; }
.order-table tr.is-sub { background:#fafbfd; } .order-table tr.is-sub input.order-num { background:#fafbfd; }
.order-table tr.drop-into-row { outline:2px solid #2563eb; outline-offset:-2px; background:#eef4ff; } .order-table tr.drop-into-row td.c-name::after { content:' ↳ drop here to make a sub-item'; color:#2563eb; font-size:12px; font-weight:600; }
.order-table tbody.depth-1 .wh-grouphead td, .order-table tbody.depth-2 .wh-grouphead td, .order-table tbody.depth-3 .wh-grouphead td { background:#f6f8fb; font-size:.95em; }

/* ===== Item list detail: descriptions, agreed prices, shortages, collapsing ===== */
.order-desc { display:block; color:var(--text-muted); font-size:12.5px; line-height:1.35; margin-top:2px; max-width:68ch; } .order-desc em { font-style:italic; }
.order-groupdesc td { color:var(--text-muted); font-size:13px; padding-top:0 !important; padding-bottom:8px !important; }
.deal-badge { display:inline-block; background:#b91c1c; color:#fff; border-radius:6px; padding:2px 9px; font-size:12px; font-weight:700; margin-left:8px; vertical-align:middle; }
.order-table tr.is-short td { background:#fde8e8; } .order-table tr.is-indeal td { color:var(--text-muted); }
.order-collapse { border:0; background:transparent; padding:0 6px 0 0; cursor:pointer; color:var(--text-muted); font-size:16px; vertical-align:middle; } .order-collapse:hover { color:#2563eb; }
.order-table tbody.is-collapsed > tr:not(.wh-grouphead) { display:none; } .order-sub-toggle { border:0; background:transparent; cursor:pointer; color:var(--text-muted); padding:0 4px; font-weight:700; } .order-table tr.sub-hidden { display:none; }

/* ===== Availability grid ===== */
.av-wrap { overflow:auto; max-height:75vh; }
.av-table { border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; }
.av-table th, .av-table td { padding:4px 6px; text-align:center; white-space:nowrap; font-size:12px; border-bottom:1px solid var(--border); }
.av-table .av-name { position:sticky; left:0; z-index:2; background:var(--surface); text-align:left; min-width:230px; max-width:300px; white-space:normal; border-right:1px solid var(--border); }
.av-table thead th { position:sticky; top:0; z-index:3; background:var(--surface-2); }
.av-table thead .av-name { z-index:4; }
.av-day span { display:block; font-size:10px; color:var(--text-muted); text-transform:uppercase; } .av-day small { display:block; font-size:9px; color:var(--text-muted); } .av-day.is-weekend { background:var(--surface-3, #eef1f6); }
.av-cell { min-width:34px; font-variant-numeric:tabular-nums; } .av-ok { color:var(--text); } .av-zero { background:#fff4d6; color:#8a5a00; font-weight:600; } .av-short { background:#fbdcdc; color:#b42318; font-weight:700; }
.rp-table .rp-group td { background:var(--surface-2); font-weight:700; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
.rp-cell a { font-weight:600; font-size:11px; } .rp-cell small { color:inherit; margin-left:2px; }
.rp-busy { background:#dbeafe; } .rp-clash { background:#fde68a; } .rp-off { background:#e5e7eb; color:#6b7280; font-style:italic; }
.rp-key { display:inline-block; width:12px; height:12px; border-radius:3px; margin:0 4px 0 12px; vertical-align:middle; }

/* ===== Warehouse detail: quick row buttons, in-place loading ===== */
.wh-quickform { display:inline-block; margin:0 4px 0 0; vertical-align:middle; }
.wh-quick { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; border:1px solid var(--nav-accent, #2563eb); background:#fff; color:var(--nav-accent, #2563eb); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.wh-quick:hover { background:var(--nav-accent, #2563eb); color:#fff; }
.wh-detail.is-loading { opacity:.55; pointer-events:none; transition:opacity .15s; }

/* ===== Resize handles ===== */
.detail-rail { position:relative; } .summary-rail { position:relative; }
.rail-resizer { position:absolute; left:-14px; top:0; bottom:0; width:12px; cursor:col-resize; z-index:5; }
.rail-resizer::after { content:''; position:absolute; left:5px; top:0; bottom:0; width:2px; border-radius:2px; background:transparent; transition:background .15s; }
.rail-resizer:hover::after, body.is-col-resizing .rail-resizer::after { background:var(--nav-accent, #2563eb); }
.wh-table thead th { position:relative; }
.col-resizer { position:absolute; right:0; top:0; bottom:0; width:9px; cursor:col-resize; user-select:none; }
.col-resizer::after { content:''; position:absolute; right:3px; top:22%; bottom:22%; width:2px; border-radius:2px; background:var(--border); transition:background .15s; }
.col-resizer:hover::after, body.is-col-resizing .col-resizer::after { background:var(--nav-accent, #2563eb); }
body.is-col-resizing { cursor:col-resize; user-select:none; }
@media (max-width: 980px) { .rail-resizer { display:none; } }

/* ===== Completed / follow-on job banner ===== */
.job-complete-banner { display:flex; gap:14px; align-items:center; margin:0 0 16px; padding:14px 18px; border-radius:12px; background:#e7f6ed; border:1px solid #9bd3b0; color:#14532d; }
.job-complete-banner > i { font-size:28px; color:#16a34a; flex:none; } .job-complete-banner strong { display:block; font-size:17px; } .job-complete-banner span { font-size:14.5px; } .job-complete-banner a { color:inherit; font-weight:600; text-decoration:underline; }
.job-complete-banner.is-follow { background:#fff4d6; border-color:#e9c565; color:#6b4a00; } .job-complete-banner.is-follow > i { color:#b7791f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .job-complete-banner { background:#12301f; border-color:#2d6a45; color:#bde8cb; } :root:not([data-theme="light"]) .job-complete-banner.is-follow { background:#35290a; border-color:#7a5c14; color:#f0d58a; } }
.wh-unbooked-list { margin:.3rem 0 .5rem 1.1rem; padding:0; font-size:13px; } .wh-unbooked-list em { color:var(--text-muted); }
.wh-radio { display:flex; gap:8px; align-items:flex-start; margin:6px 0; cursor:pointer; } .wh-radio input { margin-top:4px; } .wh-radio small { display:block; color:var(--text-muted); font-size:12.5px; }

/* ===== Flag an issue ===== */
.issue-btn { position:relative; } .issue-dot { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#dc2626; color:#fff; font:700 11px/18px system-ui; text-align:center; } .issue-dot.inline { position:static; display:inline-block; margin-left:6px; }
.issue-modal { position:fixed; inset:0; z-index:2000; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto; } .issue-modal[hidden] { display:none; }
.issue-card { position:relative; background:var(--surface); color:var(--text); width:min(620px,100%); max-height:calc(100vh - 32px); overflow:auto; border-radius:14px; padding:24px 26px; box-shadow:0 24px 60px rgba(0,0,0,.35); border:1px solid var(--border); }
.issue-card h2 { margin:0 0 6px; font-size:22px; } .issue-x { position:absolute; top:10px; right:14px; border:0; background:none; font-size:28px; line-height:1; cursor:pointer; color:var(--text-muted); }
.issue-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; } .issue-error { background:#fde8e8; color:#9b1c1c; border:1px solid #f5b5b5; padding:8px 12px; border-radius:8px; margin:10px 0 0; font-size:14px; }
.issue-drop { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:6px; } .issue-thumbs { display:flex; gap:8px; flex-wrap:wrap; width:100%; } .issue-thumb { position:relative; } .issue-thumb img { width:86px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--border); display:block; } .issue-thumb button { position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; border:0; background:#1f2937; color:#fff; cursor:pointer; line-height:1; }
.issue-review { background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin:10px 0; white-space:pre-wrap; } .issue-review p { margin:.3rem 0; }
.issue-details pre { max-height:210px; overflow:auto; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:12.5px; white-space:pre-wrap; margin:6px 0; }
body.issue-open { overflow:hidden; }
.issue-thread { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; } .issue-msg { max-width:760px; padding:12px 16px; border-radius:12px; border:1px solid var(--border); background:var(--surface); } .issue-msg.is-support { background:#eef4ff; border-color:#c7d8fb; } .issue-msg.is-mine { margin-left:auto; }
.issue-meta { font-size:12.5px; color:var(--text-muted); margin-bottom:4px; } .issue-shots { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; } .issue-shots img { max-width:240px; max-height:170px; border-radius:8px; border:1px solid var(--border); }
.issue-reply { max-width:760px; display:grid; gap:12px; } .issue-trail { margin:.3rem 0 0 1.1rem; padding:0; font-size:12.5px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .issue-msg.is-support { background:#18243b; border-color:#2f4670; } :root:not([data-theme="light"]) .issue-error { background:#3b1a1a; color:#fbb; border-color:#6b2a2a; } }
.issue-card .label, .issue-reply .label { display:block; font-weight:600; } .issue-card .textarea, .issue-reply .textarea { display:block; width:100%; box-sizing:border-box; margin-top:6px; font-weight:400; } .issue-reply .input[type="file"] { margin-top:6px; width:auto; max-width:100%; }
.issue-card h2 .bi { margin-right:6px; }
.issue-mine { background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin:0 0 16px; display:grid; gap:6px; } .issue-mine a { display:flex; justify-content:space-between; gap:10px; align-items:center; color:var(--text); text-decoration:none; font-size:14px; } .issue-mine a:hover span:first-child { text-decoration:underline; } .issue-mine .issue-all { color:var(--accent); font-size:13px; justify-content:flex-start; }
.order-wnote, .wh-desc { display:block; margin-top:2px; font-size:12.5px; } .order-wnote { color:#7a4b00; background:#fff4d6; border-radius:6px; padding:1px 7px; width:fit-content; } .wh-desc { color:var(--text-muted); font-style:italic; }
.order-notesform { display:grid; gap:8px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--border); } .order-notesform small, .wh-notepop small { font-weight:400; color:var(--text-muted); }
.wh-notepop { display:inline-block; margin-right:4px; }

/* ===== Support access banner ===== */
.support-banner { position:sticky; top:0; z-index:900; display:flex; gap:12px; align-items:center; padding:9px 18px; background:#7c2d12; color:#fff; font-size:14px; } .support-banner > i { font-size:20px; } .support-banner span { flex:1; } .support-banner form { margin:0; } .support-banner .btn { background:#fff; color:#7c2d12; border:0; font-weight:700; }
@media (max-width: 620px) { .dash2-pipe-bar { height:auto; flex-wrap:wrap; } .dash2-pipe-bar a { flex:1 1 calc(50% - 4px) !important; min-height:44px; min-width:0; padding:0 12px; } }