/* GlobalWholesale Hub V4 — shared accessibility, responsive form and portal polish. */
:root {
  --gwh-navy-950: #041323;
  --gwh-navy-900: #071c34;
  --gwh-navy-800: #0b2949;
  --gwh-surface: #ffffff;
  --gwh-canvas: #f5f7fb;
  --gwh-border: #dfe6ef;
  --gwh-text: #13233a;
  --gwh-muted: #637184;
  --gwh-success: #168451;
  --gwh-danger: #c43b45;
  --gwh-shadow: 0 14px 38px rgba(6, 27, 51, .08);
  --gwh-radius: 16px;
}

* { min-width: 0; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; color: var(--gwh-text); background: var(--gwh-canvas); }
img, video, iframe { max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 9999;
  padding: .7rem 1rem;
  border-radius: 10px;
  background: #fff;
  color: var(--gwh-navy-950);
  box-shadow: var(--gwh-shadow);
  font-weight: 800;
  transition: top .18s ease;
}
.skip-link:focus { top: 1rem; outline: 3px solid var(--accent); outline-offset: 2px; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 72%, #fff); outline-offset: 3px; }
.btn:focus-visible, .page-link:focus-visible { box-shadow: 0 0 0 .24rem rgba(246,124,0,.22); }

/* Preserve the premium B2B contrast while improving rhythm at every breakpoint. */
.premium-header, .premium-dashboard-shell { letter-spacing: -.01em; }
.premium-header .header-search { border-radius: 10px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,.16); }
.header-search input, .header-search select { min-height: 42px; }
.header-search button { white-space: nowrap; }
.header-actions > a { position: relative; }
.header-actions > a:hover, .nav-links > a:hover { color: var(--accent); }
.mainnav { border-bottom: 1px solid rgba(255,255,255,.07); }
.nav-links .nav-spacer { margin-left: auto; }

.gwh-theme .panel, .gwh-theme .form-card, .gwh-theme .detail-panel, .gwh-theme .summary-card {
  border: 1px solid var(--gwh-border);
  border-radius: var(--gwh-radius);
  box-shadow: 0 8px 24px rgba(7,28,52,.045);
}
.gwh-theme .panel-head { gap: 1rem; flex-wrap: wrap; }
.gwh-theme .page-heading { gap: 1.25rem; flex-wrap: wrap; }
.gwh-theme .page-heading h2, .gwh-theme .page-heading h1 { letter-spacing: -.04em; }
.gwh-theme .eyebrow { font-weight: 800; letter-spacing: .08em; }

/* Form controls are uniform across public, buyer, vendor, QC and Admin pages. */
.gwh-theme input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.gwh-theme select,
.gwh-theme textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cfd9e6;
  border-radius: 10px;
  background: #fff;
  color: var(--gwh-text);
  padding: .62rem .76rem;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.gwh-theme textarea { min-height: 108px; resize: vertical; }
.gwh-theme input[type="file"] { max-width: 100%; padding: .45rem; border: 1px dashed #b7c5d6; border-radius: 10px; background: #fbfcfe; }
.gwh-theme input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.gwh-theme select:focus,
.gwh-theme textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(246,124,0,.14); background: #fff; outline: 0; }
.gwh-theme label { color: #26374c; font-weight: 700; }
.gwh-theme label .form-hint, .gwh-theme label small.form-hint { display: block; margin-top: .32rem; color: var(--gwh-muted); font-size: .76rem; font-weight: 500; line-height: 1.35; }
.gwh-theme .form-hint { color: var(--gwh-muted); line-height: 1.55; }
.gwh-theme .terms-check { display: flex; align-items: flex-start; gap: .55rem; }
.gwh-theme .terms-check input { margin-top: .25rem; flex: 0 0 auto; }

.gwh-theme .btn { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: .42rem; font-weight: 800; border-radius: 9px; }
.gwh-theme .btn-brand { box-shadow: 0 8px 18px rgba(246,124,0,.19); }
.gwh-theme .btn-brand:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(246,124,0,.25); }
.gwh-theme .btn-light { border-color: #d7e0eb; }
.gwh-theme .btn-danger { background: var(--gwh-danger); border-color: var(--gwh-danger); }
.gwh-theme button[disabled], .gwh-theme .btn[aria-disabled="true"] { opacity: .64; pointer-events: none; }
.gwh-theme form.is-submitting button[type="submit"] { pointer-events: none; opacity: .7; }

.table-responsive { border-radius: 12px; }
.gwh-theme .app-table { margin-bottom: 0; min-width: 690px; }
.gwh-theme .app-table thead th { background: #f6f8fb; color: #506076; border-color: #e5ebf3; font-size: .73rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.gwh-theme .app-table tbody td { border-color: #edf1f5; vertical-align: middle; }
.gwh-theme .app-table tbody tr:hover { background: rgba(246,124,0,.027); }
.gwh-theme .inline-actions { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.gwh-theme .inline-actions form { margin: 0; }
.gwh-theme .status-badge { white-space: nowrap; }

.notification-feed { padding: 0; overflow: hidden; }
.notification-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .8rem; padding: 1.05rem 1.25rem; border-bottom: 1px solid #edf1f5; }
.notification-row:last-child { border-bottom: 0; }
.notification-row.unread { background: linear-gradient(90deg, rgba(246,124,0,.09), rgba(246,124,0,0)); }
.notification-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff0df; color: var(--brand); }
.notification-row h3 { font-size: .97rem; margin: 0 0 .25rem; }
.notification-row p { margin: 0 0 .36rem; color: var(--gwh-muted); line-height: 1.5; }
.notification-row small { color: #8090a5; font-size: .76rem; }

.shipment-update-list { display: grid; gap: 0; }
.shipment-update-list > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .7rem; position: relative; padding: .2rem 0 1rem; }
.shipment-update-list > div:not(:last-child)::before { content: ''; position: absolute; left: 8px; top: 20px; bottom: -4px; width: 2px; background: #e1e8f0; }
.shipment-update-list .status-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: .34rem; background: var(--brand); border: 3px solid #fff4e6; z-index: 1; }
.shipment-update-list b { display: block; }
.shipment-update-list p { margin: .15rem 0; color: var(--gwh-muted); }
.shipment-update-list small { color: #8090a5; }
.qc-summary-card { border-left: 4px solid var(--brand) !important; }
.qc-check-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.qc-check-grid span { padding: .75rem; border: 1px solid #e5ebf3; border-radius: 10px; background: #fbfcfe; font-size: .82rem; color: #69778a; }
.qc-check-grid b { display: block; margin-top: .18rem; color: var(--gwh-text); }

.dash-sidebar { background: linear-gradient(180deg, var(--gwh-navy-950), var(--gwh-navy-800)); }
.dash-sidebar nav a { border-left: 3px solid transparent; }
.dash-sidebar nav a.active, .dash-sidebar nav a:hover { border-left-color: var(--brand); }
.dash-topbar { min-height: 82px; }
.dash-content { padding-bottom: 2.5rem; }
.topbar-icon { display: inline-grid; place-items: center; width: 39px; height: 39px; border-radius: 10px; color: #34475d; background: #f6f8fb; border: 1px solid #e4eaf2; }
.topbar-icon:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, #d9e1eb); }

.modal-content { border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px rgba(3,16,31,.2); }
.modal-header, .modal-footer { border-color: #edf1f5; }
.modal-body { padding: 1.25rem; }

.empty-state { border: 1px dashed #cad7e6; border-radius: 16px; background: linear-gradient(145deg, #fff, #f8fbff); }
.empty-state i { color: var(--brand); }
.alert, .dash-alert { border-radius: 11px; }

@media (max-width: 1199.98px) {
  .nav-links .nav-spacer { margin-left: 0; }
  .header-actions > a span { display: none; }
  .header-actions > a { min-width: 38px; display: grid; place-items: center; }
  .qc-check-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 991.98px) {
  .premium-header .topline { padding-block: .55rem; }
  .header-main-row { grid-template-columns: 1fr auto; }
  .premium-brand small { display: none; }
  .mainnav .nav-shell { position: relative; }
  .nav-links.show { box-shadow: var(--gwh-shadow); }
  .gwh-theme .page-heading { align-items: flex-start; }
  .gwh-theme .page-heading > .inline-actions { width: 100%; }
  .dash-topbar h1 { font-size: 1.18rem; }
}

@media (max-width: 767.98px) {
  body { font-size: .94rem; }
  .site-topline { font-size: .72rem; }
  .site-topline > .container-xxl { justify-content: center !important; text-align: center; }
  .brand.premium-brand { font-size: 1rem; }
  .header-actions { gap: .25rem; }
  .mainnav { min-height: 48px; }
  .mobile-nav-toggle { min-height: 42px; }
  .nav-links { max-height: min(74vh, 560px); overflow-y: auto; }
  .gwh-theme .panel, .gwh-theme .form-card, .gwh-theme .detail-panel { border-radius: 13px; }
  .gwh-theme .panel { padding: 1rem; }
  .gwh-theme .form-card { padding: 1rem; }
  .gwh-theme .btn { width: auto; }
  .gwh-theme .page-heading h2 { font-size: 1.45rem; }
  .gwh-theme .dash-grid.two-col { grid-template-columns: 1fr; }
  .gwh-theme .table-responsive { margin-inline: -.2rem; }
  .gwh-theme .app-table { font-size: .82rem; }
  .gwh-theme .app-table td, .gwh-theme .app-table th { padding: .65rem .55rem; }
  .inline-actions .btn, .inline-actions button { flex: 1 1 auto; }
  .notification-row { padding: .9rem; }
  .qc-check-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .qc-check-grid span { padding: .62rem; font-size: .75rem; }
  .dash-topbar { padding: .7rem .9rem; }
  .dash-actions { gap: .32rem; }
  .topbar-icon { width: 36px; height: 36px; }
  .dash-content { padding: 1rem .85rem 2rem; }
  .modal-dialog { margin: .65rem; }
  .modal-body { padding: 1rem; }
}

@media (max-width: 430px) {
  .header-actions > a:nth-child(2) { display: none; }
  .premium-brand > span, .premium-brand > b { font-size: .94rem; }
  .gwh-theme .page-heading .btn { width: 100%; }
  .qc-check-grid { grid-template-columns: 1fr; }
  .notification-row { grid-template-columns: 34px minmax(0,1fr); gap: .6rem; }
  .notification-icon { width: 32px; height: 32px; font-size: .82rem; }
}

/* Admin-managed visual controls. */
.gwh-theme { font-family: var(--site-font, "DM Sans"), Arial, sans-serif; }
.site-header { background: var(--site-header, var(--navy)); }
.site-footer { background: var(--site-footer, var(--navy)); }
.dash-sidebar { background: linear-gradient(180deg, var(--dashboard-color, var(--gwh-navy-950)), color-mix(in srgb, var(--dashboard-color, var(--gwh-navy-800)) 78%, #000)); }
.footer-social { display: flex; gap: .55rem; margin-top: 1rem; }
.footer-social a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #fff; }
.footer-social a:hover { color: var(--accent); border-color: var(--accent); }
.has-site-loader::after { content: ''; position: fixed; z-index: 9998; inset: 0; background: var(--gwh-canvas); opacity: 1; pointer-events: all; animation: gwh-loader-out .45s ease .25s forwards; }
.has-site-loader::before { content: ''; position: fixed; z-index: 9999; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px; border: 4px solid #d8e1ec; border-top-color: var(--brand); border-radius: 50%; animation: gwh-spin .75s linear infinite, gwh-loader-out .25s ease .2s forwards; }
@keyframes gwh-spin { to { transform: rotate(360deg); } }
@keyframes gwh-loader-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.theme-dark { --gwh-canvas: #07121f; --gwh-surface: #102136; --gwh-border: #24384f; --gwh-text: #e9f0f8; --gwh-muted: #aab8c8; background: #07121f; color: #e9f0f8; }
.theme-dark .panel, .theme-dark .form-card, .theme-dark .detail-panel, .theme-dark .summary-card, .theme-dark .modal-content { background: #102136; border-color: #24384f; color: #e9f0f8; }
.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .theme-dark select, .theme-dark textarea { background: #0c1a2b; color: #edf4fc; border-color: #30465e; }
.theme-dark .app-table thead th, .theme-dark .app-table tbody tr:hover { background: #132942; color: #dbe8f5; }
.theme-dark .app-table tbody td { border-color: #263e57; color: #e4edf8; }
.theme-dark .dash-topbar { background: #102136; border-color: #24384f; }

/* QC handover evidence is readable on desktop and touch-friendly on mobile. */
.qc-evidence-section { margin: 1.25rem 0 1.5rem; border: 1px solid #e4ebf3; border-radius: 12px; overflow: hidden; background: #fbfdff; }
.qc-evidence-section .panel-head { padding: .82rem 1rem !important; }
.qc-evidence-list { display: grid; gap: .5rem; padding: .82rem 1rem 1rem; }
.qc-evidence-list a { display: grid; grid-template-columns: 21px minmax(0,1fr) 20px; align-items: center; gap: .55rem; padding: .68rem .75rem; border: 1px solid #e5ebf3; border-radius: 10px; background: #fff; color: #31465e; }
.qc-evidence-list a:hover { border-color: var(--brand); color: var(--brand); }
.qc-evidence-list b, .qc-evidence-list small { display: block; }
.qc-evidence-list small { margin-top: .15rem; color: var(--gwh-muted); font-size: .76rem; font-weight: 500; }
.theme-dark .qc-evidence-section, .theme-dark .qc-evidence-list a { background: #102136; border-color: #263e57; color: #e9f0f8; }
/* V5 CMS media and menu-management refinements */
.cms-featured-image{margin:0 0 26px;border:1px solid #e5ebf1;border-radius:18px;overflow:hidden;background:#f6f8fb;box-shadow:0 10px 30px rgba(7,26,49,.08)}
.cms-featured-image img{display:block;width:100%;max-height:460px;object-fit:cover}
.compact-list form{margin:0}.icon-button{border:0;background:transparent;padding:6px;border-radius:8px;line-height:1}.icon-button:hover{background:#fff0eb}
@media(max-width:767px){.cms-featured-image{border-radius:13px;margin-bottom:18px}.cms-featured-image img{max-height:260px}}