/* Horizon Parts Portal — theme.css
   The ISP dealer portal look (Metronic "page-md", measured in docs/isp-dealer-ui-spec.md) in Horizon colours.
   Loaded by every dealer page together with /shell.js; class names are documented in docs/portal-shell.md.
   No web fonts: "Open Sans" when installed, otherwise Segoe UI / the system sans-serif. */

:root {
  --font: "Open Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --bg: #eff3f8;
  --text: #333;
  --muted: #8896a0;          /* table cells */
  --th: #93a2a9;             /* table headers */
  --line: #e7ecf1;
  --line2: #eef1f5;
  --link: #337ab7;
  --header-h: 73px;
  --nav-h: 51px;
  --nav-bg: #444d58;
  --nav-link: #bcc2cb;
  --nav-active-bg: #4e5966;
  --nav-active: #f1f1f1;
  --finder-bg: #bfcad1;
  --footer-bg: #3b434c;
  --footer-text: #a2abb7;
  --primary: #89c4f4;
  --primary-dark: #5fb0f0;
  --green: #26a69a;          /* dashboard captions */
  --success: #35aa47;
  --success-dark: #2f9740;
  --warning: #f1c40f;
  --danger: #e7505a;
  --danger-dark: #e12330;
  --info: #89c4f4;
  --grey: #e1e5ec;
  --grey-dark: #c2cad8;
  --grey-text: #666;
  --silver: #bfbfbf;         /* catalogue side-panel title bars */
  --dark: #2f353b;
  --blue: #3598dc;
  --yellow-text: #c49f47;
  --radius: 2px;
  --input-border: #c2cad8;
  --input-focus: #94a0b2;
  --shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

/* ---------- base ---------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 13px/1.42857 var(--font); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
#shell-top { flex: none; }
#shell-bottom { flex: none; margin-top: auto; }
.page-content { flex: 1 0 auto; width: 100%; padding: 20px; }
.page-content.narrow { max-width: 1000px; margin: 0 auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3, h4, h5 { font-weight: 300; margin: 0 0 12px; line-height: 1.2; color: #333; }
h1 { font-size: 26px; } h2 { font-size: 22px; } h3 { font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 14px; font-weight: 600; }
p { margin: 0 0 10px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 15px 0; }
small, .small { font-size: 12px; }
code, .mono { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 12px; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex: none; }

/* ---------- header -------------------------------------------------------------------------------------- */
.page-header {
  background: #fff; height: var(--header-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; border-bottom: 1px solid var(--line);
}
.page-logo { display: flex; align-items: center; height: 100%; }
.page-logo img { height: 40px; width: auto; display: block; }
.hdr-tools { display: flex; align-items: center; gap: 4px; height: 100%; }
.hdr-item { position: relative; height: 100%; display: flex; align-items: center; }
.hdr-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px; border: 0;
  background: transparent; color: #7f8c97; font: inherit; cursor: pointer; border-radius: var(--radius); text-decoration: none;
}
.hdr-btn:hover, .hdr-item.open > .hdr-btn { background: #f2f4f7; color: #5b6a76; text-decoration: none; }
.hdr-btn .icon { width: 20px; height: 20px; }
.hdr-btn .caret { width: 12px; height: 12px; opacity: .7; }
.hdr-btn .flag { font-size: 18px; line-height: 1; }
.hdr-name, .hdr-lang { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.badge-count {
  position: absolute; top: 4px; right: 2px; background: var(--success); color: #fff; font-size: 10px; font-weight: 600;
  line-height: 1; padding: 3px 5px; border-radius: 12px; min-width: 18px; text-align: center;
}
.badge-count:empty, .badge-count[data-zero] { display: none; }
.nav-toggle { display: none; }

/* ---------- dropdowns ----------------------------------------------------------------------------------- */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: 100%; right: 0; z-index: 1000; min-width: 190px; margin: 2px 0 0; padding: 4px 0; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: none; text-align: left;
}
.dropdown.open > .dropdown-menu, .hdr-item.open > .dropdown-menu { display: block; }
.dropdown-menu.left { right: auto; left: 0; }
.dropdown-menu > li { margin: 0; padding: 0; }
.dropdown-menu a:not(.btn), .dropdown-menu button.item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 14px; color: #333; text-decoration: none; white-space: nowrap;
  font: inherit; font-size: 13px; background: none; border: 0; text-align: left; cursor: pointer;
}
.dropdown-menu a:not(.btn):hover, .dropdown-menu button.item:hover, .dropdown-menu .active > a:not(.btn), .dropdown-menu button.item.active { background: #f6f8fa; text-decoration: none; }
.dropdown-menu button.item.active { font-weight: 600; }
.dropdown-menu .icon { width: 14px; height: 14px; color: #8896a0; }
.dropdown-menu .divider { height: 1px; background: var(--line2); margin: 4px 0; }
.dropdown-header { padding: 8px 14px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line2); background: #f8fafb; }
.dropdown-menu .flag { font-size: 16px; line-height: 1; }

/* basket dropdown */
.basket-menu { width: 330px; padding: 0; }
.basket-menu .lines { max-height: 280px; overflow: auto; }
.basket-line { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 14px; border-bottom: 1px solid var(--line2); font-size: 12px; }
.basket-line .code { font-weight: 600; color: #333; }
.basket-line .qty { color: var(--muted); white-space: nowrap; }
.basket-line .desc { grid-column: 1 / 3; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.basket-menu .foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; }
.basket-menu .empty { padding: 18px 14px; }

/* ---------- main navigation ----------------------------------------------------------------------------- */
.page-nav { background: var(--nav-bg); min-height: var(--nav-h); display: flex; align-items: stretch; justify-content: space-between; padding: 0 20px; }
.nav-menu { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-menu > li { position: relative; }
.nav-menu > li > a, .nav-menu > li > button {
  display: flex; align-items: center; gap: 6px; height: var(--nav-h); padding: 16px 18px; color: var(--nav-link); font-size: 14px; line-height: 19px;
  text-decoration: none; background: transparent; border: 0; font-family: inherit; cursor: pointer; white-space: nowrap;
}
.nav-menu > li:hover > a, .nav-menu > li:hover > button, .nav-menu > li.active > a, .nav-menu > li.active > button,
.nav-menu > li.open > a, .nav-menu > li.open > button { background: var(--nav-active-bg); color: var(--nav-active); text-decoration: none; }
.nav-menu .caret { width: 12px; height: 12px; opacity: .8; }
.nav-menu .dropdown-menu { left: 0; right: auto; min-width: 230px; margin-top: 0; border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.nav-menu .dropdown-menu a { padding: 9px 14px; }
.nav-menu .dropdown-menu a small { color: var(--muted); margin-left: auto; }
@media (hover: hover) and (min-width: 992px) { .nav-menu > li:hover > .dropdown-menu { display: block; } }
.nav-search { display: flex; align-items: center; margin-left: auto; padding-left: 20px; }
.nav-search form { display: flex; }
.nav-search input {
  height: 34px; width: 200px; padding: 6px 12px; border: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--finder-bg); color: #fff;
  font: inherit; font-size: 13px; outline: 0; transition: width .2s;
}
.nav-search input::placeholder { color: #f4f7f9; opacity: .9; }
.nav-search input:focus { width: 260px; background: #b3c0c8; }
.nav-search button {
  height: 34px; width: 38px; border: 0; border-radius: 0 var(--radius) var(--radius) 0; background: var(--finder-bg); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-search button:hover { background: #a9b6bf; }
.nav-search .icon { width: 16px; height: 16px; }

/* ---------- footer -------------------------------------------------------------------------------------- */
.page-footer { background: var(--footer-bg); color: var(--footer-text); font-size: 12px; padding: 8px 20px; display: flex; justify-content: space-between; align-items: center; min-height: 33px; }
.page-footer a { color: var(--footer-text); }
.go2top { width: 22px; height: 22px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; border-radius: var(--radius); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.go2top:hover { background: rgba(255, 255, 255, .22); }
.go2top .icon { width: 12px; height: 12px; }

/* ---------- page bar, titles, breadcrumbs --------------------------------------------------------------- */
.page-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: -20px -20px 20px; padding: 10px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.page-title { font-size: 26px; font-weight: 300; margin: 0 0 15px; color: #666; }
.page-title small { font-size: 14px; color: #888; margin-left: 6px; }
.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
.page-head .page-title { margin: 0; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; font-size: 13px; color: #7f8c97; }
.breadcrumb a { color: #7f8c97; }
.breadcrumb li + li::before { content: "\203A"; color: #c2cad8; margin: 0 8px; }
.breadcrumb .icon { width: 14px; height: 14px; margin-right: 4px; }

/* ---------- portlets ------------------------------------------------------------------------------------ */
.portlet { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 20px; }
.portlet-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; min-height: 48px; padding: 0 15px; border-bottom: 1px solid var(--line2); }
.portlet-title .caption { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 400; color: var(--green); text-transform: uppercase; padding: 10px 0; letter-spacing: .2px; }
.portlet-title .caption .icon { width: 18px; height: 18px; }
.portlet-title .caption.font-blue { color: var(--blue); }
.portlet-title .caption.font-red { color: var(--danger); }
.portlet-title .caption.font-dark { color: #333; }
.portlet-title .caption.font-grey { color: var(--muted); }
.portlet-title .caption.font-yellow { color: var(--yellow-text); }
.portlet-title .caption.font-green { color: var(--green); }
.portlet-title .caption small, .portlet-title .caption .subtitle { font-size: 12px; color: var(--muted); text-transform: none; font-weight: 400; }
.portlet-title .tools, .portlet-title .actions { display: flex; align-items: center; gap: 6px; }
.portlet-title .tools button, .portlet-title .tools a {
  width: 26px; height: 26px; border: 0; background: transparent; color: #aaa; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); padding: 0;
}
.portlet-title .tools button:hover, .portlet-title .tools a:hover { color: #666; background: #f5f5f5; text-decoration: none; }
.portlet-title .tools .icon { width: 14px; height: 14px; }
.portlet-body { padding: 15px; }
.portlet-body.no-pad, .portlet-body.flush { padding: 0; }
.portlet-body.no-pad .table-scrollable { border: 0; }
.portlet.collapsed > .portlet-body { display: none; }
.portlet.light { border: 0; }
/* solid title-bar ("box") variants: grey-silver is the ISP catalogue side panel */
.portlet.box { border: 0; }
.portlet.box > .portlet-title { border-bottom: 0; padding: 0 10px; min-height: 42px; color: #fff; border-radius: var(--radius) var(--radius) 0 0; }
.portlet.box > .portlet-title .caption { color: #fff; font-size: 15px; font-weight: 600; text-transform: uppercase; padding: 8px 0; }
.portlet.box > .portlet-title .caption small { color: rgba(255, 255, 255, .8); }
.portlet.box > .portlet-title .tools button, .portlet.box > .portlet-title .tools a { color: #fff; opacity: .85; }
.portlet.box > .portlet-title .tools button:hover, .portlet.box > .portlet-title .tools a:hover { opacity: 1; background: rgba(255, 255, 255, .18); color: #fff; }
.portlet.box > .portlet-title .form-control { height: 28px; padding: 3px 8px; font-size: 12px; border-color: rgba(255, 255, 255, .4); }
.portlet.box > .portlet-body { border: 1px solid var(--silver); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: #fff; }
.portlet.box.grey-silver > .portlet-title { background: var(--silver); }
.portlet.box.grey-silver > .portlet-body { border-color: var(--silver); }
.portlet.box.blue > .portlet-title { background: var(--blue); }
.portlet.box.blue > .portlet-body { border-color: var(--blue); }
.portlet.box.green > .portlet-title { background: var(--green); }
.portlet.box.green > .portlet-body { border-color: var(--green); }
.portlet.box.red > .portlet-title { background: var(--danger); }
.portlet.box.red > .portlet-body { border-color: var(--danger); }
.portlet.box.dark > .portlet-title { background: var(--dark); }
.portlet.box.dark > .portlet-body { border-color: var(--dark); }
.portlet.box.grey > .portlet-title { background: #95a5a6; }
.portlet.box.grey > .portlet-body { border-color: #95a5a6; }

/* ---------- tables -------------------------------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; background: #fff; }
.table th { color: var(--th); font-weight: 600; text-align: left; padding: 12px 8px; border-bottom: 2px solid var(--line); vertical-align: bottom; white-space: nowrap; }
.table td { color: var(--muted); padding: 12px 8px; height: 47px; border-top: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:first-child td { border-top: 0; }
.table-hover tbody tr:hover td { background: #f9fafb; }
.table-striped tbody tr:nth-child(odd) td { background: #f9fafb; }
.table-bordered { border: 1px solid var(--line); }
.table-bordered th, .table-bordered td { border: 1px solid var(--line); }
.table-condensed th, .table-condensed td { padding: 6px 8px; height: auto; }
.table .num, .table .text-right, .text-right { text-align: right; }
.table .text-center, .text-center { text-align: center; }
.table .strong, .table td.strong, .strong { color: #333; font-weight: 600; }
.table td a { color: var(--link); }
.table tr.selected td, .table tr.sel td { background: #fff8d6; }
.table tr.highlight td, .table tr.hi td { background: #e8f1ff; }
.table tr.disabled td, .table tr.muted td { opacity: .55; }
.table tr[data-href], .table tr.clickable { cursor: pointer; }
.table .actions { white-space: nowrap; text-align: right; }
.table .actions .btn + .btn { margin-left: 4px; }
.table thead.sticky th, .table.sticky-head th { position: sticky; top: 0; background: #fff; z-index: 1; }
.table-scrollable { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.table-scrollable .table { border: 0; }
.table .pos { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; border: 1.5px solid #333; color: #333; font-weight: 600; font-size: 12px; }
.table .pos.nohs { border-style: dashed; color: var(--muted); border-color: var(--muted); }
.table .thumb { width: 40px; height: 40px; object-fit: contain; border: 1px solid var(--line); background: #fff; }
.table .qty-input { width: 64px; }

/* ---------- buttons ------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; font: 600 13px/1.42857 var(--font); color: #333;
  background: #fff; border: 1px solid var(--grey-dark); border-radius: var(--radius); cursor: pointer; text-decoration: none; white-space: nowrap;
  vertical-align: middle; user-select: none; transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; background: #f4f6f8; color: #333; }
.btn .icon { width: 14px; height: 14px; }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn-primary, .btn.blue { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover, .btn.blue:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-default, .btn.grey { background: var(--grey); border-color: var(--grey); color: var(--grey-text); }
.btn-default:hover, .btn.grey:hover { background: var(--grey-dark); border-color: var(--grey-dark); color: #333; }
.btn-danger, .btn.red { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover, .btn.red:hover { background: var(--danger-dark); border-color: var(--danger-dark); color: #fff; }
.btn-success, .btn.green { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover, .btn.green:hover { background: var(--success-dark); border-color: var(--success-dark); color: #fff; }
.btn-dark { background: var(--dark); border-color: var(--dark); color: #fff; }
.btn-dark:hover { background: #1f2327; color: #fff; }
.btn-outline { background: #fff; border-color: var(--primary); color: #2f7bb6; }
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-link { background: transparent; border-color: transparent; color: var(--link); font-weight: 400; }
.btn-link:hover { background: transparent; text-decoration: underline; color: #23527c; }
.btn-xs { padding: 3px 8px; font-size: 11px; line-height: 1.5; text-transform: uppercase; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 10px 18px; font-size: 15px; }
.btn-block { display: flex; width: 100%; }
.btn-icon { width: 32px; height: 32px; padding: 0; }
.btn-icon.btn-sm { width: 28px; height: 28px; }
.btn-icon.btn-xs { width: 24px; height: 24px; }
.btn.uppercase, .uppercase { text-transform: uppercase; }
.btn.active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15); }
.btn-group { display: inline-flex; vertical-align: middle; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn + .btn { margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.btn-group .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.toolbar, .btn-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.toolbar .spacer { flex: 1; }
.toolbar.bar { padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }

/* ---------- badges, status dots, labels ----------------------------------------------------------------- */
.badge {
  display: inline-block; padding: 3px 9px; font-size: 11px; font-weight: 600; line-height: 1.4; color: #fff; text-transform: uppercase; letter-spacing: .2px;
  border-radius: 12px; background: #8896a0; white-space: nowrap; vertical-align: middle;
}
.badge-square, .label { border-radius: var(--radius); }
.badge-success, .badge[data-status="completed" i], .badge[data-status="approved" i], .badge[data-status="order_accepted" i], .badge[data-status="pushed" i], .badge[data-status="closed" i] { background: var(--success); }
.badge-warning, .badge[data-status="pending" i], .badge[data-status="queued" i], .badge[data-status="open" i] { background: var(--warning); }
.badge-danger, .badge[data-status="refused" i], .badge[data-status="cancelled" i], .badge[data-status="error" i], .badge[data-status="rejected" i] { background: var(--danger); }
.badge-info, .badge-primary, .badge[data-status="processing" i], .badge[data-status="under_processing" i], .badge[data-status="under processing" i] { background: var(--info); }
.badge-default { background: #8896a0; }
.badge-dark { background: var(--dark); }
.badge-light { background: var(--grey); color: #555; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #8896a0; vertical-align: middle; margin-right: 6px; }
.dot-success, .dot[data-status="completed" i], .dot[data-status="approved" i], .dot[data-status="pushed" i] { background: var(--success); }
.dot-warning, .dot[data-status="pending" i], .dot[data-status="queued" i] { background: var(--warning); }
.dot-danger, .dot[data-status="refused" i], .dot[data-status="cancelled" i], .dot[data-status="error" i] { background: var(--danger); }
.dot-info, .dot[data-status="processing" i], .dot[data-status="under_processing" i] { background: var(--info); }
.tag { display: inline-block; padding: 2px 6px; font-size: 11px; border-radius: var(--radius); background: #f0f3f6; color: #5b6a76; border: 1px solid var(--line); vertical-align: middle; }
.avail { color: var(--success); font-weight: 600; font-size: 12px; white-space: nowrap; }
.avail.no, .unavail { color: var(--danger); }

/* ---------- tiles (categories / catalogues / groups / plates) ------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tiles.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tiles.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tile {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: #333; text-decoration: none;
  overflow: hidden; transition: box-shadow .15s, border-color .15s; cursor: pointer; text-align: center; min-width: 0;
}
.tile:hover, .tile:focus-visible { text-decoration: none; color: #333; border-color: var(--primary); box-shadow: 0 2px 10px rgba(0, 0, 0, .1); }
.tile.selected, .tile.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(137, 196, 244, .35); }
.tile-img { height: 170px; display: flex; align-items: center; justify-content: center; padding: 12px; background: #fff; color: #c2cad8; }
.tile-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tile-img .icon { width: 56px; height: 56px; stroke-width: 1.2; }
.tile-caption {
  padding: 10px 12px; border-top: 1px solid var(--line2); font-weight: 600; font-size: 13px; text-transform: uppercase; color: #333; background: #fafbfc;
  min-height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.tile-caption small { font-weight: 400; color: var(--muted); text-transform: none; }
.tile .badge { position: absolute; }
.tiles.compact .tile-img { height: 110px; }
.tiles.compact .tile-caption { font-size: 12px; min-height: 36px; padding: 6px 8px; }

/* ---------- forms --------------------------------------------------------------------------------------- */
.form-group { margin-bottom: 15px; }
label, .control-label { display: block; margin-bottom: 5px; font-weight: 400; color: #333; font-size: 13px; }
.control-label .req, .required { color: var(--danger); }
.form-control {
  display: block; width: 100%; height: 34px; padding: 6px 12px; font: 13px/1.42857 var(--font); color: #555; background: #fff;
  border: 1px solid var(--input-border); border-radius: var(--radius); box-shadow: none; transition: border-color .15s; -webkit-appearance: none; appearance: none;
}
.form-control:focus { border-color: var(--input-focus); outline: 0; }
.form-control::placeholder { color: #999; }
.form-control:disabled, .form-control[readonly] { background: #eef1f5; color: #777; cursor: not-allowed; }
textarea.form-control { height: auto; min-height: 80px; resize: vertical; }
select.form-control {
  padding-right: 28px; background-color: #fff; background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
select.form-control[multiple], select.form-control[size] { height: auto; background-image: none; padding-right: 12px; }
input[type="number"].form-control { -moz-appearance: textfield; }
input[type="file"].form-control { padding: 5px 8px; height: auto; }
.form-control.input-sm, .input-sm { height: 30px; padding: 4px 8px; font-size: 12px; }
.form-control.input-xs, .input-xs { height: 26px; padding: 2px 6px; font-size: 12px; }
.form-control.input-inline, .input-inline { display: inline-block; width: auto; vertical-align: middle; }
.qty-input, input.qty { width: 64px; text-align: center; height: 30px; padding: 4px; }
.input-group { display: flex; align-items: stretch; }
.input-group .form-control { flex: 1; min-width: 0; border-radius: var(--radius) 0 0 var(--radius); }
.input-group .btn, .input-group-addon { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.input-group .btn:first-child, .input-group-addon:first-child { border-radius: var(--radius) 0 0 var(--radius); margin: 0 -1px 0 0; }
.input-group .form-control:not(:first-child):not(:last-child) { border-radius: 0; }
.input-group-addon { display: inline-flex; align-items: center; padding: 0 12px; background: #eef1f5; border: 1px solid var(--input-border); color: #555; font-size: 13px; white-space: nowrap; }
.checkbox, .radio { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; margin: 0 0 8px; }
.checkbox input, .radio input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.checkbox-inline { display: inline-flex; margin-right: 15px; }
.help-block { display: block; margin-top: 5px; font-size: 12px; color: #737373; }
.has-error .form-control { border-color: var(--danger); }
.has-error .help-block, .has-error .control-label { color: var(--danger); }
.has-success .form-control { border-color: var(--success); }
.form-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.form-inline .form-group { margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 15px; }
.form-grid .span-2 { grid-column: span 2; }
.form-horizontal .form-group { display: grid; grid-template-columns: 180px 1fr; gap: 10px; align-items: center; }
.form-horizontal .control-label { margin: 0; text-align: right; }
.form-horizontal .form-group > .help-block, .form-horizontal .form-group > .form-actions { grid-column: 2; }
.form-actions { padding: 15px; border-top: 1px solid var(--line2); background: #f9fafb; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.portlet-body > .form-actions:last-child { margin: 15px -15px -15px; }
.form-actions.right { justify-content: flex-end; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 15px 5px; margin: 0 0 15px; }
legend { font-size: 13px; font-weight: 600; color: var(--th); padding: 0 6px; }
.static-value { display: block; padding-top: 7px; min-height: 34px; color: #333; }

/* ---------- alerts, notes, empties ---------------------------------------------------------------------- */
.alert { padding: 12px 15px; margin-bottom: 15px; border: 1px solid transparent; border-radius: var(--radius); font-size: 13px; }
.alert-success { background: #dff0d8; border-color: #d6e9c6; color: #3c763d; }
.alert-info { background: #d9edf7; border-color: #bce8f1; color: #31708f; }
.alert-warning { background: #fcf8e3; border-color: #faebcc; color: #8a6d3b; }
.alert-danger, .alert-error { background: #f2dede; border-color: #ebccd1; color: #a94442; }
.alert a { font-weight: 600; color: inherit; text-decoration: underline; }
.note { padding: 12px 15px; margin-bottom: 15px; border-left: 4px solid #ddd; background: #fafafa; border-radius: 0 var(--radius) var(--radius) 0; }
.note-info { border-color: var(--primary); background: #f5f9fc; }
.note-success { border-color: var(--success); background: #f3faf4; }
.note-warning { border-color: var(--warning); background: #fdfaf0; }
.note-danger { border-color: var(--danger); background: #fdf5f5; }
.empty { padding: 30px 15px; text-align: center; color: var(--muted); }
.empty .icon { width: 36px; height: 36px; color: #c2cad8; display: block; margin: 0 auto 8px; }
.well { background: #f8f9fb; border: 1px solid var(--line); padding: 15px; border-radius: var(--radius); margin-bottom: 15px; }
.muted, .text-muted { color: var(--muted); }
.text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-warning { color: var(--yellow-text); } .text-info { color: #2f7bb6; }
.bold { font-weight: 600; } .nowrap { white-space: nowrap; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(0, 0, 0, .15); border-top-color: #5b6a76; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
.spinner.lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { color: var(--muted); padding: 20px; text-align: center; }

/* ---------- definition lists, stats (dashboard) ---------------------------------------------------------- */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.dl dt { color: var(--th); font-weight: 600; }
.dl dd { margin: 0; color: #333; }
.stats { display: flex; flex-wrap: wrap; gap: 20px; }
.stat { flex: 1 1 140px; padding: 10px 0; }
.stat .number { font-size: 28px; font-weight: 300; color: #333; line-height: 1.1; }
.stat .label { color: var(--muted); text-transform: uppercase; font-size: 11px; font-weight: 600; letter-spacing: .3px; margin-top: 4px; }
.stat .icon { width: 28px; height: 28px; color: var(--primary); }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line2); }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--th); font-weight: 600; }
.kv .v { color: #333; text-align: right; }
.totals { margin-left: auto; min-width: 260px; }
.totals .kv.total .v, .totals .kv.total .k { font-size: 15px; font-weight: 600; color: #333; }

/* ---------- grid ---------------------------------------------------------------------------------------- */
.row { display: flex; flex-wrap: wrap; margin: 0 -10px; }
[class*="col-"] { padding: 0 10px; width: 100%; min-width: 0; }
.col-1 { width: 8.3333%; } .col-2 { width: 16.6667%; } .col-3 { width: 25%; } .col-4 { width: 33.3333%; } .col-5 { width: 41.6667%; } .col-6 { width: 50%; }
.col-7 { width: 58.3333%; } .col-8 { width: 66.6667%; } .col-9 { width: 75%; } .col-10 { width: 83.3333%; } .col-11 { width: 91.6667%; } .col-12 { width: 100%; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.flex { display: flex; align-items: center; gap: 8px; } .flex-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.flex-wrap { flex-wrap: wrap; } .grow { flex: 1; } .pull-right { margin-left: auto; }
.mt-0 { margin-top: 0; } .mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .mb-0 { margin-bottom: 0; } .mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; }
.p-0 { padding: 0; } .w-100 { width: 100%; }

/* ---------- modal --------------------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; background: rgba(0, 0, 0, .5); overflow: auto; }
.modal-dialog { background: #fff; border-radius: var(--radius); width: 100%; max-width: 640px; box-shadow: 0 5px 15px rgba(0, 0, 0, .5); margin: auto; }
.modal-dialog.modal-lg { max-width: 940px; }
.modal-dialog.modal-sm { max-width: 420px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.modal-title { margin: 0; font-size: 18px; font-weight: 400; }
.modal-close { border: 0; background: none; font-size: 24px; line-height: 1; color: #999; cursor: pointer; padding: 0 4px; }
.modal-close:hover { color: #333; }
.modal-body { padding: 15px; }
.modal-footer { padding: 12px 15px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
body.modal-open { overflow: hidden; }
.modal .part-photo { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; }

/* ---------- pagination ---------------------------------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 15px 0 0; }
.pagination li { margin: 0; }
.pagination a, .pagination span, .pagination button {
  display: inline-block; min-width: 34px; height: 34px; line-height: 32px; padding: 0 10px; text-align: center; color: var(--link); background: #fff;
  border: 1px solid var(--line); margin-left: -1px; text-decoration: none; font: inherit; cursor: pointer;
}
.pagination li:first-child > * { margin-left: 0; border-radius: var(--radius) 0 0 var(--radius); }
.pagination li:last-child > * { border-radius: 0 var(--radius) var(--radius) 0; }
.pagination a:hover, .pagination button:hover { background: #f4f6f8; }
.pagination .active > * { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination .disabled > * { color: #c2cad8; cursor: not-allowed; background: #fff; pointer-events: none; }
.pager-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pager-info { color: var(--muted); font-size: 12px; }

/* ---------- tree (catalogue side panel) ------------------------------------------------------------------ */
.tree { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.tree ul { list-style: none; margin: 0; padding-left: 18px; }
.tree li { margin: 0; }
.tree li.collapsed > ul { display: none; }
.tree .node { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: var(--radius); cursor: pointer; color: #333; text-decoration: none; line-height: 1.3; }
.tree .node:hover { background: #f1f3f5; text-decoration: none; }
.tree .node.selected, .tree .node.active { background: #e8f1ff; font-weight: 600; }
.tree .node .icon { width: 15px; height: 15px; color: var(--blue); }
.tree .node.plate .icon { color: #7f8c97; }
.tree .node .tw { width: 12px; color: #999; font-size: 10px; text-align: center; flex: none; }
.tree .node small { color: var(--muted); margin-left: auto; font-size: 11px; }

/* ---------- plate stage (the catalogue page hand-writes the pan / zoom) ----------------------------------- */
.plate-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line2); background: #fafbfc; }
.plate-toolbar .title { font-weight: 600; color: #333; margin: 0 8px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plate-stage { position: relative; overflow: hidden; background: #fff; touch-action: none; user-select: none; min-height: 320px; cursor: grab; }
.plate-stage.dragging { cursor: grabbing; }
.plate-stage .plate-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.plate-stage img, .plate-stage svg { display: block; }
.balloon { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: background .12s, box-shadow .12s; }
.balloon:hover, .balloon.hi { background: rgba(255, 204, 0, .5); border-color: #e0a800; box-shadow: 0 0 0 4px rgba(255, 204, 0, .3); }
.balloon.selected, .balloon.sel { background: rgba(137, 196, 244, .55); border-color: var(--blue); box-shadow: 0 0 0 4px rgba(53, 152, 220, .3); }

/* ---------- toasts -------------------------------------------------------------------------------------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: #333; color: #fff; padding: 10px 14px; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); font-size: 13px; max-width: 360px; animation: toast-in .2s ease-out; pointer-events: auto; }
.toast.success { background: var(--success); } .toast.danger, .toast.error { background: var(--danger); } .toast.warning { background: #c49f47; } .toast.info { background: var(--blue); }
.toast.out { opacity: 0; transition: opacity .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- responsive ---------------------------------------------------------------------------------- */
@media (max-width: 1200px) { .tiles, .tiles.cols-5, .tiles.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) {
  .nav-toggle { display: inline-flex; }
  .hdr-name { display: none; }
  .page-header { padding: 0 12px; height: 60px; }
  .page-logo img { height: 32px; }
  .page-nav { flex-direction: column; padding: 0; min-height: 0; }
  .page-nav .nav-menu { display: none; flex-direction: column; }
  .page-nav.open .nav-menu { display: flex; }
  .nav-menu > li > a, .nav-menu > li > button { height: auto; width: 100%; padding: 12px 20px; justify-content: space-between; }
  .nav-menu .dropdown-menu { position: static; display: none; box-shadow: none; border: 0; background: #3b434c; border-radius: 0; min-width: 0; margin: 0; padding: 0; }
  .nav-menu > li.open > .dropdown-menu { display: block; }
  .nav-menu .dropdown-menu a { color: var(--nav-link); padding: 10px 36px; }
  .nav-menu .dropdown-menu a:hover, .nav-menu .dropdown-menu .active > a { background: var(--nav-active-bg); color: var(--nav-active); }
  .nav-menu .dropdown-menu .divider { background: #4e5966; }
  .nav-search { display: none; padding: 8px 20px 12px; margin: 0; }
  .page-nav.open .nav-search { display: flex; }
  .nav-search form { width: 100%; }
  .nav-search input, .nav-search input:focus { flex: 1; width: auto; }
  .page-content { padding: 12px; }
  .page-bar { margin: -12px -12px 12px; padding: 8px 12px; }
  .form-horizontal .form-group { grid-template-columns: 1fr; gap: 4px; }
  .form-horizontal .control-label { text-align: left; }
  .form-horizontal .form-group > .help-block, .form-horizontal .form-group > .form-actions { grid-column: 1; }
  .hidden-xs, .hidden-sm { display: none !important; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) { .visible-xs, .visible-sm { display: none !important; } }
@media (max-width: 768px) {
  .tiles, .tiles.cols-3, .tiles.cols-5, .tiles.cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-img { height: 130px; }
  .row { margin: 0; } [class*="col-"] { width: 100%; padding: 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .table th, .table td { padding: 10px 6px; }
  .modal { padding: 12px 8px; }
  .page-title { font-size: 22px; }
  .totals { min-width: 0; width: 100%; }
  .basket-menu { width: calc(100vw - 24px); max-width: 330px; }
}
@media (max-width: 480px) {
  .tiles, .tiles.cols-3, .tiles.cols-5, .tiles.cols-6 { grid-template-columns: 1fr; }
  .hdr-btn { padding: 0 6px; }
  .hdr-lang { display: none; }
}

/* ---------- print --------------------------------------------------------------------------------------- */
.print-only { display: none; }
@media print {
  #shell-top, #shell-bottom, .no-print, .nav-search, .toasts, .btn, .pagination, .modal-close { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; color: #000; font-size: 12px; display: block; min-height: 0; }
  .page-content { padding: 0; }
  a { color: #000; text-decoration: none; }
  .portlet { border: 0; margin-bottom: 12px; page-break-inside: avoid; }
  .portlet-title { border-bottom: 1px solid #999; min-height: 0; padding: 0; }
  .portlet-title .caption { color: #000; font-size: 14px; padding: 4px 0; }
  .portlet.box > .portlet-title { background: none !important; color: #000; }
  .portlet.box > .portlet-title .caption { color: #000; }
  .portlet.box > .portlet-body { border: 0; }
  .portlet-body { padding: 8px 0; }
  .table th, .table td { color: #000; padding: 5px 6px; height: auto; border-color: #999; }
  .table th { border-bottom: 1px solid #000; }
  .table-scrollable { border: 0; overflow: visible; }
  .badge { border: 1px solid #000; color: #000 !important; background: none !important; }
  .tile { break-inside: avoid; }
  .modal { position: static; background: none; padding: 0; }
  .modal-dialog { box-shadow: none; max-width: none; }
  .plate-stage { overflow: visible; min-height: 0; }
}


/* ===== v2 reskin (18 Sep 2026): the interim dealer pages follow the new Horizon look ===== */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Michroma&display=swap');
:root {
  --font: Jost, "Futura PT", Futura, "Century Gothic", "Trebuchet MS", sans-serif;
  --bg: #F4F6F1; --text: #3A423C; --muted: #3A423C; --th: #5F6B62; --line: #E3E8DF; --line2: #E3E8DF; --link: #194027;
  --header-h: 56px; --nav-h: 44px; --nav-bg: #FFFFFF; --nav-link: #3A423C; --nav-active-bg: #EEF6E1; --nav-active: #121714;
  --finder-bg: #FFFFFF; --footer-bg: #F4F6F1; --footer-text: #5F6B62;
  --primary: #194027; --primary-dark: #0F2A19; --green: #5F6B62; --success: #194027; --success-dark: #0F2A19;
  --warning: #ED6B2D; --danger: #B42318; --danger-dark: #8E1B13; --info: #2F5D8A; --grey: #FFFFFF; --grey-dark: #FAFBF8; --grey-text: #121714;
  --silver: #FAFBF8; --dark: #121714; --blue: #194027; --radius: 3px; --input-border: #C9D1C4; --input-focus: #194027; --shadow: 0 1px 2px rgba(18,23,20,.06);
}
body { font-size: 14px; -webkit-font-smoothing: antialiased; }
.page-header { border-bottom: 1px solid var(--line); box-shadow: none; }
.page-logo img { height: 28px; }
.nav-menu { border-bottom: 1px solid var(--line); }
.nav-menu > li > a, .nav-menu > li > button { font-weight: 500; font-size: 13px; }
.nav-menu > li.active > a, .nav-menu > li.active > button { box-shadow: inset 0 -3px 0 #8DC63F; background: transparent; }
.nav-menu > li:hover > a, .nav-menu > li:hover > button { background: #EEF6E1; }
.nav-search input { background: #fff; color: #121714; border: 1px solid #C9D1C4; border-radius: 3px; }
.nav-search input::placeholder { color: #8E988F; }
.nav-search input:focus { background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #194027; }
.nav-search button { background: #194027; color: #fff; border-radius: 3px; } .nav-search button:hover { background: #0F2A19; }
.btn { border-radius: 3px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.btn-default, .btn.grey { border-color: #C9D1C4; }
.btn-primary, .btn.blue, .btn-success, .btn.green { background: #194027; border-color: #194027; }
.portlet { border-radius: 3px; box-shadow: none; }
.portlet-title { border-bottom: 1px solid var(--line); min-height: 40px; }
.portlet-title .caption { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5F6B62; }
.portlet-title .caption .icon { display: none; }
.table th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #5F6B62; border-bottom: 1px solid var(--line); background: #FAFBF8; padding: 8px; }
.table td { color: #3A423C; height: 40px; padding: 8px; }
.table td a { color: #194027; }
.page-footer { border-top: 1px solid var(--line); }
.tile { border-radius: 3px; }
.badge-count { background: #194027; }
.form-control { border-radius: 3px; }
.form-control:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #194027; }
h1, h2, h3, .page-title { color: #121714; font-weight: 600; }

/* badge fix */
.badge-count { width: 18px; height: 18px; min-width: 18px; line-height: 18px; font-size: 11px; padding: 0 4px; border-radius: 999px; top: -4px; right: -6px; }
.hdr-btn .avatar, .hdr-user .avatar, .user-initials { width: 28px; height: 28px; line-height: 28px; font-size: 11px; }

/* badge beside the icon, never over it */
.hdr-btn .badge-count, .badge-count { position: static; margin-left: 4px; width: auto; min-width: 18px; height: 18px; line-height: 18px; padding: 0 6px; font-size: 11px; }