/* =====================================================================
   CC WATERPROOFING — Urban Company–style design system (2026)
   Visual layer only. Loaded last in <head>; page-scoped <style> blocks
   still refine their own components. No markup/PHP depends on this file.
   ===================================================================== */
:root{
  /* Technical industrial palette (2026-10): navy + concrete, water-blue accent, orange CTA */
  --uc-navy:#0b2a42;--uc-navy2:#0a84c6;--uc-navy-dk:#071c2c;
  --uc-orange:#ff6b2c;--uc-orange-dk:#e8571b;--uc-orange-lt:#fff2eb;
  --uc-ink:#0b2a42;--uc-text:#3b4a56;--uc-muted:#647480;
  --uc-line:#d9dfe3;--uc-line2:#c5ced4;--uc-soft:#eef1f3;--uc-tile:#e6eaed;--uc-sky:#e6f3fa;
  --uc-green:#0b7a4f;--uc-green-lt:#e7f6ee;--uc-amber:#a15c00;--uc-amber-lt:#fff4e0;--uc-red:#c0362c;--uc-red-lt:#fdecea;
  --uc-r-sm:4px;--uc-r:4px;--uc-r-lg:6px;
  --uc-shadow:0 12px 30px rgba(11,42,66,.10);--uc-shadow-lg:0 18px 48px rgba(11,42,66,.18);
  --uc-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --uc-display:'Barlow Condensed','Arial Narrow','Roboto Condensed',Inter,sans-serif;
  --uc-mono:ui-monospace,'SFMono-Regular','Cascadia Mono',Consolas,'Liberation Mono',monospace;
  /* remap legacy app.css tokens so older components inherit the new palette */
  --blue:#0b2a42;--blue-dark:#071c2c;--blue-light:#0a84c6;--orange:#ff6b2c;--orange-light:#ff8a52;
  --ink:#0b2a42;--muted:#647480;--line:#d9dfe3;--soft:#eef1f3;--shadow:0 12px 30px rgba(11,42,66,.10);
  --cc-navy:#0b2a42;--cc-navy2:#071c2c;--cc-orange:#ff6b2c;--cc-text:#0b2a42;--cc-muted:#647480;--cc-line:#d9dfe3;
}

/* ---------- Base ---------- */
html{-webkit-text-size-adjust:100%}
body{font-family:var(--uc-font);font-size:15px;line-height:1.55;color:var(--uc-ink);background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:0}
h1,h2,h3,h4{font-family:var(--uc-font);color:var(--uc-ink);letter-spacing:-.02em;line-height:1.2}
h1{font-weight:700}h2,h3,h4{font-weight:600}
a{transition:color .15s,background-color .15s,border-color .15s}
::selection{background:#ffd9c7;color:var(--uc-ink)}
:focus-visible{outline:2px solid var(--uc-navy2);outline-offset:2px}
img{max-width:100%}
.container{max-width:1232px;padding-left:24px;padding-right:24px}
main.container{padding-top:28px;padding-bottom:40px}

/* ---------- Utility strip ---------- */
.utility{background:var(--uc-ink)!important}
.utility .container{min-height:34px}
.utility .container>div:first-child{font-size:12px!important;font-weight:500!important;letter-spacing:0!important;color:rgba(255,255,255,.78)}
.utility-links a{font-size:12px!important;font-weight:500!important;border-radius:6px!important}

/* ---------- Main header ---------- */
header.top{background:#fff!important;border-bottom:1px solid var(--uc-line)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
@media(min-width:981px){
  header.top{position:sticky!important;top:0;z-index:3000}
  header.top .nav{min-height:72px;gap:24px}
  header.top .brand-logo{width:210px!important;max-height:52px}
  .service-brand{border-left:1px solid var(--uc-line)!important;padding-left:16px!important}
  .service-brand small{font-size:11px!important;font-weight:600!important;letter-spacing:.4px!important;color:var(--uc-orange)!important;text-transform:none!important}
  .service-brand strong{font-size:15px!important;font-weight:700!important;color:var(--uc-ink)!important}
  header.top .primary-nav{gap:4px!important}
  header.top .primary-nav>a{min-height:40px;padding:8px 14px!important;border-radius:8px;font-size:14px!important;font-weight:500!important;color:var(--uc-text)!important;line-height:1.2}
  header.top .primary-nav>a:hover{background:var(--uc-soft)!important;color:var(--uc-ink)!important;transform:none!important}
  header.top .primary-nav>a.cc-active-inquiries{background:var(--uc-orange-lt)!important;color:var(--uc-orange-dk)!important;box-shadow:none!important}
  header.top .primary-nav .admin-main-link{background:var(--uc-sky)!important;color:var(--uc-navy)!important;font-weight:600!important}
  header.top .primary-nav .btn,header.top .primary-nav .btn.orange{margin-left:6px;padding:8px 18px!important;border:0!important;border-radius:8px!important;background:var(--uc-orange)!important;color:#fff!important;font-weight:600!important;box-shadow:none!important}
  header.top .primary-nav .btn.orange:hover{background:var(--uc-orange-dk)!important}
}
@media(min-width:981px) and (max-width:1180px){
  header.top .brand-logo{width:180px!important}
  header.top .primary-nav>a{padding:8px 10px!important;font-size:13px!important}
}

/* ---------- Member / buyer / vendor sub-navigation (desktop) ---------- */
@media(min-width:981px){
  .member-subnav-wrap{background:#fff!important;border-top:1px solid var(--uc-line)!important;border-bottom:1px solid var(--uc-line)!important;box-shadow:none!important}
  .member-subnav{min-height:52px;gap:4px}
  .member-subnav-label{font-size:14px!important;font-weight:700!important;letter-spacing:0!important;color:var(--uc-ink)!important}
  .member-subnav-label:before{width:28px!important;height:28px!important;border-radius:8px!important;background:var(--uc-ink)!important;font-size:11px!important;font-weight:700!important}
  .member-subnav a{min-height:36px;padding:8px 12px!important;border-radius:999px!important;color:var(--uc-text)!important;font-size:13px!important;font-weight:500!important;letter-spacing:0!important}
  .member-subnav a:hover{background:var(--uc-soft)!important;color:var(--uc-ink)!important}
  .member-subnav a.cc-active-inquiries{background:var(--uc-orange-lt)!important;color:var(--uc-orange-dk)!important;box-shadow:none!important}
  .member-subnav-sep{background:var(--uc-line)!important}
  .member-subnav a.logout{margin-left:6px;border:1px solid var(--uc-line2)!important;background:#fff!important;color:var(--uc-ink)!important}
  .member-subnav a.logout:hover{border-color:var(--uc-red)!important;color:var(--uc-red)!important;background:#fff!important}

  .admin-nav-wrap{background:var(--uc-soft)!important;border-top:1px solid var(--uc-line)!important;border-bottom:1px solid var(--uc-line)!important;box-shadow:none!important}
  .admin-nav{min-height:52px!important;justify-content:flex-start!important;gap:4px!important}
  .admin-nav-label{padding:7px 12px!important;border:0!important;border-radius:999px!important;background:var(--uc-ink)!important;color:#fff!important;font-size:11px!important;font-weight:600!important;letter-spacing:.4px!important}
  .admin-nav a{min-height:36px!important;padding:8px 12px!important;border-radius:999px!important;color:var(--uc-text)!important;font-size:13px!important;font-weight:500!important}
  .admin-nav a:hover{background:#fff!important;color:var(--uc-ink)!important;box-shadow:0 1px 3px rgba(15,31,44,.08)}
  .admin-nav a.admin-logout{margin-left:auto!important;border:1px solid var(--uc-line2)!important;background:#fff!important;color:var(--uc-ink)!important}
  .admin-nav a.admin-logout:hover{border-color:var(--uc-red)!important;color:var(--uc-red)!important;background:#fff!important}
}

/* ---------- Mobile header + drawers (refine colours/type only) ---------- */
@media(max-width:980px){
  header.top .nav{min-height:60px!important}
  .mobile-nav-toggle,.mobile-subnav-toggle{border-color:var(--uc-line)!important;background:#fff!important;box-shadow:none!important;border-radius:10px!important}
  .mobile-nav-toggle span,.mobile-subnav-toggle span{background:var(--uc-ink)!important}
  body > #ccPrimaryNav.cc-mobile-portal,
  .member-subnav-wrap.open,.member-subnav-wrap.open .member-subnav,
  .admin-nav-wrap.open,.admin-nav-wrap.open .admin-nav{background:#fff!important}
  body > #ccPrimaryNav.cc-mobile-portal:after,
  .member-subnav-wrap.open .member-subnav:after,
  .admin-nav-wrap.open .admin-nav:after{color:var(--uc-muted)!important;font-size:12px!important;font-weight:600!important;letter-spacing:.4px!important;border-color:var(--uc-line)!important}
  body > #ccPrimaryNav.cc-mobile-portal > a,
  .member-subnav-wrap.open .member-subnav a,
  .admin-nav-wrap.open .admin-nav a{min-height:54px!important;border:0!important;border-bottom:1px solid var(--uc-line)!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;color:var(--uc-ink)!important;font-size:16px!important;font-weight:500!important;margin:0!important}
  body > #ccPrimaryNav.cc-mobile-portal > a:after,
  .member-subnav-wrap.open .member-subnav a:after,
  .admin-nav-wrap.open .admin-nav a:after{color:#a9b6bf!important}
  body > #ccPrimaryNav.cc-mobile-portal > .btn.orange,
  .member-subnav-wrap.open .member-subnav a.logout,
  .admin-nav-wrap.open .admin-nav a.admin-logout{margin-top:16px!important;border-radius:10px!important;border:0!important;justify-content:center!important;background:var(--uc-orange)!important;color:#fff!important;font-weight:600!important}
  body > #ccPrimaryNav.cc-mobile-portal > .btn.orange:after,
  .member-subnav-wrap.open .member-subnav a.logout:after,
  .admin-nav-wrap.open .admin-nav a.admin-logout:after{display:none!important}
  body > #ccPrimaryNav.cc-mobile-portal .cc-main-close,
  .mobile-subnav-toggle.open{border-color:var(--uc-line)!important;border-radius:50%!important;box-shadow:none!important;background:var(--uc-soft)!important;color:var(--uc-ink)!important}
  .member-subnav-wrap.open .member-subnav a.cc-active-inquiries,
  body > #ccPrimaryNav.cc-mobile-portal > a.cc-active-inquiries{background:var(--uc-orange-lt)!important;color:var(--uc-orange-dk)!important}
}
@media(max-width:600px){
  .container{padding-left:16px;padding-right:16px}
  main.container{padding-top:18px}
  .utility .container>div:first-child{font-size:11px!important}
  .utility-links a{font-size:11px!important}
}

/* ---------- Buttons ---------- */
.btn,.button,button[type=submit],input[type=submit]{font-family:var(--uc-font)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border:1px solid var(--uc-navy);border-radius:var(--uc-r-sm);background:var(--uc-navy);color:#fff!important;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none!important;box-shadow:none;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--uc-navy-dk);border-color:var(--uc-navy-dk);transform:none;box-shadow:none}
.btn.orange{background:var(--uc-orange);border-color:var(--uc-orange);box-shadow:none}
.btn.orange:hover{background:var(--uc-orange-dk);border-color:var(--uc-orange-dk)}
.btn.secondary,.btn.outline,.btn.light{background:#fff;border-color:var(--uc-line2);color:var(--uc-ink)!important}
.btn.secondary:hover,.btn.outline:hover,.btn.light:hover{background:#fff;border-color:var(--uc-ink)}
.btn.danger{background:var(--uc-red);border-color:var(--uc-red)}
.btn.danger:hover{background:#a12b22;border-color:#a12b22}
.btn.green,.btn.success{background:var(--uc-green);border-color:var(--uc-green)}
.btn.small{min-height:36px;padding:7px 14px;font-size:14px}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn:hover,button[type=submit]:hover,input[type=submit]:hover{transform:none}

/* ---------- Cards, panels, KPIs ---------- */
.card{border:1px solid var(--uc-line);border-radius:var(--uc-r);padding:20px;background:#fff;box-shadow:none;transition:box-shadow .2s,border-color .2s}
.card:hover{border-color:var(--uc-line);box-shadow:var(--uc-shadow)}
.kpi{font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--uc-ink)}
.stat-title{font-size:13px;font-weight:500;color:var(--uc-muted)}
.muted{color:var(--uc-muted)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--uc-orange)}
.hero{border:1px solid var(--uc-line);border-radius:var(--uc-r-lg);background:var(--uc-soft);box-shadow:none}
.hero h1{color:var(--uc-ink);font-weight:700;letter-spacing:-.03em}
.hero p{color:var(--uc-muted)}
.hero-card{border:1px solid var(--uc-line);border-radius:var(--uc-r);box-shadow:none}
.page-head h1,.section h2,h2{color:var(--uc-ink)}
.page-head h1{font-size:30px;font-weight:700;letter-spacing:-.03em}
.catalog-card{border:1px solid var(--uc-line);border-radius:var(--uc-r);box-shadow:none}
.catalog-card:hover{box-shadow:var(--uc-shadow);border-color:var(--uc-line)}
.catalog-card h3{color:var(--uc-ink);font-size:18px;font-weight:600}
.catalog-icon{border-radius:10px;background:var(--uc-tile);color:var(--uc-navy)}
.catalog-master{background:var(--uc-soft);border:1px solid var(--uc-line);border-radius:var(--uc-r)}
.price-large{color:var(--uc-ink);font-weight:700}

/* ---------- Badges, alerts, notices ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.4;background:var(--uc-soft);color:var(--uc-text)}
.badge.success{background:var(--uc-green-lt);color:var(--uc-green)}
.badge.warning{background:var(--uc-amber-lt);color:var(--uc-amber)}
.badge.danger{background:var(--uc-red-lt);color:var(--uc-red)}
.alert{display:flex;align-items:center;gap:10px;margin:16px 0;padding:14px 16px;border:1px solid transparent;border-radius:var(--uc-r-sm);font-size:14px;font-weight:500}
.alert.success{background:var(--uc-green-lt);border-color:#bfe6d1;color:var(--uc-green)}
.alert.error{background:var(--uc-red-lt);border-color:#f5c6c1;color:var(--uc-red)}
.alert.success:before,.alert.error:before{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#fff;font-size:13px;font-weight:700}
.alert.success:before{content:"✓";background:var(--uc-green)}
.alert.error:before{content:"!";background:var(--uc-red)}
.notice{border-radius:var(--uc-r-sm);background:var(--uc-orange-lt);border-color:#ffd6c2;color:#9a3d0f;font-size:14px}
.empty{padding:40px 20px;border:1px dashed var(--uc-line2);border-radius:var(--uc-r);color:var(--uc-muted);font-size:14px}
.taxonomy-chip{padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--uc-line);color:var(--uc-ink);font-size:13px;font-weight:500}

/* ---------- Forms ---------- */
.field{gap:6px}
.field label,label{font-size:14px;font-weight:500;color:var(--uc-ink)}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),select,textarea{min-height:46px;padding:11px 14px;border:1px solid var(--uc-line2);border-radius:var(--uc-r-sm);background:#fff;color:var(--uc-ink);font-family:var(--uc-font);font-size:15px;line-height:1.4;transition:border-color .15s,box-shadow .15s}
textarea{min-height:110px}
select[multiple],.multi-select{min-height:180px}
input::placeholder,textarea::placeholder{color:#9aa8b2}
input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover{border-color:#b9c5cd}
input:focus,select:focus,textarea:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--uc-navy2);box-shadow:0 0 0 3px rgba(8,122,163,.14)}
input[type=checkbox],input[type=radio]{accent-color:var(--uc-orange);width:18px;height:18px}
input[type=file]{font-family:var(--uc-font);font-size:14px}
input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:1px solid var(--uc-line2);border-radius:var(--uc-r-sm);background:#fff;color:var(--uc-ink);font:600 13px var(--uc-font);cursor:pointer}
.form-grid{gap:18px}
.check{font-size:14px;font-weight:500}

/* ---------- Tables ---------- */
.table-wrap{border:1px solid var(--uc-line);border-radius:var(--uc-r);background:#fff;-webkit-overflow-scrolling:touch}
.table{font-size:14px}
.table th,.table td{padding:13px 16px;border-bottom:1px solid var(--uc-line)}
.table th{background:var(--uc-soft);color:var(--uc-muted);font-size:12px;font-weight:600;letter-spacing:.4px}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:#fafbfc}

/* ---------- Footer ---------- */
footer{border-top:0}

/* ---------- Motion ---------- */
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* =====================================================================
   TECHNICAL INDUSTRIAL CHROME (2026-10) — header, top strip, menu bars.
   Construction-chemicals look: navy/concrete, water-blue accent, condensed
   engineering type, square 4px corners. Page bodies are not touched here.
   ===================================================================== */
:root{--tx-navy:#0b2a42;--tx-navy-dk:#071c2c;--tx-water:#0a84c6;--tx-concrete:#eef1f3;--tx-line:#d9dfe3;
  --tx-display:'Barlow Condensed','Arial Narrow','Roboto Condensed',Inter,sans-serif;
  --tx-mono:ui-monospace,'SFMono-Regular','Cascadia Mono',Consolas,'Liberation Mono',monospace}
.utility{background:var(--tx-navy-dk)!important;border-bottom:2px solid var(--uc-orange)!important}
.utility .container>div:first-child{font-family:var(--tx-mono)!important;font-size:12px!important;letter-spacing:.8px!important;text-transform:uppercase;color:#9fb6c6!important}
.utility-links a{font-family:var(--tx-mono)!important;text-transform:uppercase;letter-spacing:.6px!important;border-radius:3px!important;color:#e3edf3!important}
.utility-links a:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
header.top{border-bottom:1px solid var(--tx-line)!important}
@media(min-width:981px){
  .service-brand{border-left:2px solid var(--tx-line)!important}
  .service-brand small{font-family:var(--tx-mono)!important;font-size:12px!important;letter-spacing:.8px!important;text-transform:uppercase!important;color:var(--tx-water)!important}
  .service-brand strong{font-family:var(--tx-display)!important;font-size:22px!important;line-height:1!important;text-transform:uppercase;letter-spacing:.3px;color:var(--tx-navy)!important}
  header.top .primary-nav{flex-wrap:nowrap!important}
  header.top .primary-nav>a{padding:8px 10px!important;border-radius:0!important;font-size:13px!important;font-weight:600!important;letter-spacing:.3px;text-transform:uppercase;color:var(--tx-navy)!important}
  header.top .primary-nav>a:hover{background:transparent!important;color:var(--tx-water)!important;box-shadow:inset 0 -2px 0 var(--uc-orange)}
  header.top .primary-nav>a.cc-active-inquiries{background:transparent!important;color:var(--uc-orange-dk)!important;box-shadow:inset 0 -2px 0 var(--uc-orange)!important}
  header.top .primary-nav .admin-main-link{background:var(--tx-concrete)!important;color:var(--tx-navy)!important;border-radius:3px!important}
  header.top .primary-nav .btn,header.top .primary-nav .btn.orange{border-radius:4px!important;box-shadow:none!important}
  header.top .primary-nav .btn.orange:hover{box-shadow:none!important}
  .member-subnav-wrap{background:var(--tx-concrete)!important;border-top:1px solid var(--tx-line)!important;border-bottom:1px solid var(--tx-line)!important}
  .member-subnav-label{font-family:var(--tx-display)!important;font-size:18px!important;text-transform:uppercase;color:var(--tx-navy)!important}
  .member-subnav-label:before{border-radius:3px!important;background:var(--tx-navy)!important}
  .member-subnav a,.admin-nav a{border-radius:3px!important;color:var(--tx-navy)!important}
  .member-subnav a:hover,.admin-nav a:hover{background:#fff!important;box-shadow:inset 0 -2px 0 var(--tx-water)!important}
  .member-subnav a.logout,.admin-nav a.admin-logout{border-radius:4px!important}
  .admin-nav-wrap{background:var(--tx-concrete)!important}
  .admin-nav-label{border-radius:3px!important;background:var(--tx-navy)!important;font-family:var(--tx-mono)!important;letter-spacing:.8px!important}
}
@media(min-width:981px) and (max-width:1240px){
  .service-brand{display:none!important}
  header.top .primary-nav>a{padding:8px 7px!important;font-size:12px!important;letter-spacing:.2px}
}
@media(max-width:980px){
  .mobile-nav-toggle,.mobile-subnav-toggle{border-radius:4px!important;border-color:var(--tx-line)!important}
  body > #ccPrimaryNav.cc-mobile-portal:after,
  .member-subnav-wrap.open .member-subnav:after,
  .admin-nav-wrap.open .admin-nav:after{font-family:var(--tx-mono)!important;letter-spacing:.8px!important}
  body > #ccPrimaryNav.cc-mobile-portal > .btn.orange,
  .member-subnav-wrap.open .member-subnav a.logout,
  .admin-nav-wrap.open .admin-nav a.admin-logout{border-radius:4px!important}
  body > #ccPrimaryNav.cc-mobile-portal .cc-main-close,
  .mobile-subnav-toggle.open{border-radius:4px!important}
}
/* ---------- Technical industrial base components (2026-10) ---------- */
.eyebrow{font-family:var(--uc-mono);font-size:12px;font-weight:600;letter-spacing:1px;color:var(--uc-navy2)}
.page-head h1,.hero h1{font-family:var(--uc-display);font-size:40px;font-weight:700;line-height:1.02;letter-spacing:.2px;text-transform:uppercase;color:var(--uc-ink)}
.hero{background-color:#f6f8f9;background-image:linear-gradient(rgba(10,132,198,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(10,132,198,.07) 1px,transparent 1px);background-size:24px 24px;border-color:var(--uc-line)}
.badge,.taxonomy-chip{border-radius:3px}
.badge{font-family:var(--uc-mono);letter-spacing:.4px;text-transform:uppercase}
.table th{font-family:var(--uc-mono);letter-spacing:.6px;color:var(--uc-ink);background:var(--uc-soft)}
.card:hover,.catalog-card:hover{border-color:var(--uc-navy)}
.kpi{font-family:var(--uc-display);font-size:34px;line-height:1}
.stat-title{font-family:var(--uc-mono);font-size:12px;letter-spacing:.6px;text-transform:uppercase}
.empty{border-color:#b9c3ca;background:var(--uc-soft)}
@media(max-width:600px){.page-head h1,.hero h1{font-size:32px}}

/* ---------- Legacy layout resets (2026-10) ----------
   app.css turns every .hero into a 2fr/1fr grid (meant for .hero + .hero-card) and
   ccshoppe-inspired-2026.css gives .stat/.panel/... a soft shadow + 13px radius.
   Restyled pages stack their hero and use square tiles; pages that want a grid set it
   in their own scoped rules, which load later and win. */
.hero{display:block}
.panel,.stat,.tile,.service-card,.vendor-card{box-shadow:none;border-radius:4px}