/* ============================================================================
   TECSII UI — global design-system layer
   Loaded on the app (admin), guest (auth) and public layouts.
   Brand: deep blue #003f5c · slate #2f4b7c · gold #f9a602 (per corporate image)
   App accent (established): teal #0d9488 on slate.
   Design intent: functional minimalism, clean institutional, circuit/connection feel.
   Safe by construction: inheritable typography + media-query enhancements; only
   uses !important where deliberately overriding an inline rule for mobile layout.
   ========================================================================== */

:root{
  /* Corporate brand */
  --tq-navy:#003f5c;  --tq-navy-deep:#00293c;  --tq-slate:#2f4b7c;
  --tq-gold:#f9a602;  --tq-gold-deep:#d98e00;
  --tq-paper:#f0f0f0; --tq-line-soft:#cccccc;
  /* App / admin surface (established) */
  --tq-ink:#0f172a;   --tq-ink-2:#334155;   --tq-muted:#64748b;
  --tq-line:#e2e8f0;  --tq-bg:#f8fafc;
  --tq-teal:#0d9488;  --tq-teal-700:#0b7e74;
  /* Feedback */
  --tq-ok-bg:#ecfdf5; --tq-ok-bd:#a7f3d0; --tq-ok-fg:#065f46;
  --tq-err-bg:#fef2f2; --tq-err-bd:#fecaca; --tq-err-fg:#991b1b;
  --tq-info-bg:#eff6ff; --tq-info-bd:#bfdbfe; --tq-info-fg:#1e40af;
  /* Shape */
  --tq-radius:12px; --tq-radius-sm:9px;
  --tq-shadow:0 12px 34px -14px rgba(15,23,42,.22);
  --tq-shadow-sm:0 2px 8px -2px rgba(15,23,42,.10);
  --tq-font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --tq-font-display: var(--tq-font-body);
}

/* ---- Typography (inheritable, applies everywhere) ---- */
body{ font-family:var(--tq-font-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,h5,.tq-display{ font-family:var(--tq-font-display); letter-spacing:-.012em; }

/* ---- Overflow guards: keep everything inside the viewport on mobile ---- */
img,svg,video,canvas{ max-width:100%; }
table{ max-width:100%; }
pre,code,kbd{ white-space:pre-wrap; word-break:break-word; }

/* ---- Accessibility & finish ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{ outline:2px solid var(--tq-teal); outline-offset:2px; border-radius:6px; }
html{ scroll-behavior:smooth; }
::selection{ background:rgba(13,148,136,.16); }
[x-cloak]{ display:none !important; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition-duration:.001ms !important; } }

/* ===========================================================================
   Reusable component utilities — for new & refactored screens.
   (Opt-in classes; they never affect existing inline-styled markup.)
   ========================================================================= */
.tq-card{ background:#fff; border:1px solid var(--tq-line); border-radius:var(--tq-radius); }
.tq-card-pad{ padding:18px 20px; }

.tq-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--tq-font-body); font-weight:600; font-size:13px; line-height:1;
  padding:9px 18px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  transition:background .14s,transform .08s,box-shadow .14s,border-color .14s,color .14s;
  white-space:nowrap; text-decoration:none; }
.tq-btn:active{ transform:translateY(1px); }
.tq-btn[disabled],.tq-btn.is-busy{ opacity:.65; cursor:not-allowed; }
.tq-btn-primary{ background:var(--tq-teal); color:#fff; }
.tq-btn-primary:hover{ background:var(--tq-teal-700); box-shadow:0 8px 20px -10px rgba(13,148,136,.7); }
.tq-btn-navy{ background:var(--tq-navy); color:#fff; }
.tq-btn-navy:hover{ background:var(--tq-navy-deep); }
.tq-btn-gold{ background:var(--tq-gold); color:#3a2700; }
.tq-btn-gold:hover{ background:#ffb724; transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(249,166,2,.6); }
.tq-btn-ghost{ background:#fff; color:var(--tq-ink-2); border-color:var(--tq-line); }
.tq-btn-ghost:hover{ background:var(--tq-bg); }

.tq-input,.tq-select,.tq-textarea{ width:100%; border:1px solid var(--tq-line); border-radius:var(--tq-radius-sm);
  padding:9px 12px; font-size:13.5px; font-family:var(--tq-font-body); color:var(--tq-ink);
  background:#fff; outline:none; transition:border-color .14s,box-shadow .14s; }
.tq-input:focus,.tq-select:focus,.tq-textarea:focus{ border-color:var(--tq-teal); box-shadow:0 0 0 3px rgba(13,148,136,.12); }
.tq-label{ display:block; font-size:11px; font-weight:700; color:var(--tq-muted);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }

.tq-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  padding:2px 9px; border-radius:999px; }
.tq-badge-ok{ background:var(--tq-ok-bg); color:var(--tq-ok-fg); }
.tq-badge-warn{ background:#fffbeb; color:#b45309; }
.tq-badge-info{ background:var(--tq-info-bg); color:var(--tq-info-fg); }

/* Horizontal-scroll wrapper for wide tables on small screens */
.tq-table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Inline saved/feedback chips (used next to Save buttons) */
.tq-saved{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:var(--tq-ok-fg); opacity:0; transform:translateY(2px); transition:opacity .2s,transform .2s; }
.tq-saved.is-on{ opacity:1; transform:none; }

/* ===========================================================================
   Toasts
   ========================================================================= */
#tq-toasts{ position:fixed; z-index:99999; top:14px; right:14px; display:flex; flex-direction:column;
  gap:10px; width:min(92vw,380px); pointer-events:none; }
.tq-toast{ pointer-events:auto; display:flex; align-items:flex-start; gap:10px; background:#fff;
  border:1px solid var(--tq-line); border-left:4px solid var(--tq-teal); border-radius:12px;
  box-shadow:var(--tq-shadow); padding:11px 13px; font-family:var(--tq-font-body);
  transform:translateX(118%); opacity:0; transition:transform .34s cubic-bezier(.2,.9,.3,1),opacity .34s; }
.tq-toast.tq-in{ transform:translateX(0); opacity:1; }
.tq-toast.tq-out{ transform:translateX(118%); opacity:0; }
.tq-toast-ic{ flex-shrink:0; width:20px; height:20px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:800; color:#fff; margin-top:1px; }
.tq-toast-body{ flex:1; min-width:0; }
.tq-toast-title{ font-size:12.5px; font-weight:700; color:var(--tq-ink); }
.tq-toast-msg{ font-size:12px; color:var(--tq-muted); margin-top:1px; word-break:break-word; }
.tq-toast-x{ flex-shrink:0; background:none; border:none; color:#cbd5e1; cursor:pointer; font-size:16px; line-height:1; padding:0 2px; }
.tq-toast-x:hover{ color:var(--tq-muted); }
.tq-toast-success{ border-left-color:#10b981; } .tq-toast-success .tq-toast-ic{ background:#10b981; }
.tq-toast-error{ border-left-color:#ef4444; }   .tq-toast-error   .tq-toast-ic{ background:#ef4444; }
.tq-toast-info{ border-left-color:var(--tq-navy); } .tq-toast-info .tq-toast-ic{ background:var(--tq-navy); }

/* ===========================================================================
   App (admin) top-nav — mobile responsiveness.
   Verified grid: child <a> = logo, div:nth-of-type(1) = nav links,
   div:nth-of-type(2) = right controls. Needs only the class `tq-appnav-inner`
   on the inner grid (added by patch_all.php); no DOM change. On narrow screens
   the bar becomes two rows: [logo | controls] and a horizontally-scrollable
   nav-link strip beneath.
   ========================================================================= */
@media (max-width:860px){
  .tq-appnav-inner{ grid-template-columns:1fr auto !important; height:auto !important;
    padding-top:9px !important; padding-bottom:9px !important; gap:8px 10px !important; }
  .tq-appnav-inner > a{ grid-column:1; grid-row:1; align-self:center; }
  .tq-appnav-inner > div:nth-of-type(2){ grid-column:2; grid-row:1; align-self:center; min-width:0; }
  .tq-appnav-inner > div:nth-of-type(1){ grid-column:1 / -1; grid-row:2;
    flex-wrap:wrap !important; justify-content:flex-start !important; gap:6px !important; }
}

/* ---- General mobile niceties (safe, structure-agnostic) ---- */
@media (max-width:560px){
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{ max-width:100%; }
}

/* ===========================================================================
   v3 — extended component layer for the customer-facing refactor.
   Still opt-in and additive: no existing screen changes until it adopts these.
   Every value derives from the brand tokens above.
   ========================================================================= */

/* --- Page shell + header (replaces hand-rolled per-screen headers) --- */
.tq-page{ max-width:1080px; margin:0 auto; }
.tq-page-wide{ max-width:1180px; margin:0 auto; }
.tq-page-narrow{ max-width:920px; margin:0 auto; }
.tq-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:1.25rem; }
.tq-head-main{ min-width:0; }
.tq-h1{ font-family:var(--tq-font-display); font-size:1.55rem; font-weight:800; color:var(--tq-navy);
  margin:0 0 4px; letter-spacing:-.02em; line-height:1.15; }
.tq-sub{ color:var(--tq-muted); font-size:13.5px; margin:0; max-width:64ch; line-height:1.5; }
.tq-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tq-teal-700); margin:0 0 6px; }
.tq-head-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex-shrink:0; }

/* --- Card extras --- */
.tq-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--tq-line); }
.tq-card-title{ font-family:var(--tq-font-display); font-size:1rem; font-weight:700; color:var(--tq-navy); margin:0; }

/* --- Hover-lift (promoted from the buyer Directory reference screen) --- */
.tq-lift{ box-shadow:var(--tq-shadow-sm); transition:transform .14s ease, box-shadow .14s ease; }
.tq-lift:hover{ transform:translateY(-3px); box-shadow:var(--tq-shadow); }
@media (prefers-reduced-motion:reduce){ .tq-lift:hover{ transform:none; } }

/* --- Form helpers --- */
.tq-field{ margin-bottom:.9rem; }
.tq-req{ color:#ef4444; }
.tq-help{ font-size:12px; color:var(--tq-muted); margin:4px 0 0; line-height:1.45; }
.tq-error{ color:var(--tq-err-fg); font-size:12px; margin:3px 0 0; }
.tq-input.is-error,.tq-select.is-error,.tq-textarea.is-error{ border-color:#ef4444; }
.tq-input.is-error:focus,.tq-select.is-error:focus,.tq-textarea.is-error:focus{ box-shadow:0 0 0 3px rgba(239,68,68,.12); }
.tq-grid{ display:grid; gap:.9rem; }
.tq-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.tq-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.tq-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:760px){ .tq-grid-2,.tq-grid-3,.tq-grid-4{ grid-template-columns:1fr; } }

/* --- Button sizes / width --- */
.tq-btn-sm{ padding:6px 13px; font-size:12px; border-radius:8px; }
.tq-btn-lg{ padding:12px 24px; font-size:14px; border-radius:12px; }
.tq-btn-block{ width:100%; }

/* --- Tables (clean institutional; pair with .tq-table-wrap) --- */
.tq-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tq-table th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--tq-muted); padding:10px 14px; border-bottom:1px solid var(--tq-line); white-space:nowrap; }
.tq-table td{ padding:12px 14px; border-bottom:1px solid var(--tq-line); color:var(--tq-ink-2); vertical-align:middle; }
.tq-table tr:last-child td{ border-bottom:0; }
.tq-table tbody tr{ transition:background .12s; }
.tq-table tbody tr:hover{ background:var(--tq-bg); }

/* --- Chips / tags --- */
.tq-chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  color:var(--tq-ink-2); background:var(--tq-bg); border:1px solid var(--tq-line);
  border-radius:999px; padding:3px 11px; max-width:100%; }
.tq-chip-truncate{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; vertical-align:bottom; }

/* --- Empty state --- */
.tq-empty{ text-align:center; padding:3rem 1.5rem; border:1px dashed var(--tq-line-soft);
  border-radius:var(--tq-radius); background:#fff; }
.tq-empty-ic{ width:46px; height:46px; border-radius:50%; background:var(--tq-bg); color:var(--tq-muted);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:12px; }
.tq-empty-title{ font-family:var(--tq-font-display); font-size:1.05rem; font-weight:700; color:var(--tq-ink); margin:0 0 6px; }
.tq-empty-sub{ font-size:13px; color:var(--tq-muted); margin:0 auto 16px; max-width:44ch; line-height:1.5; }

/* --- Stat blocks (dashboard) --- */
.tq-stat{ background:#fff; border:1px solid var(--tq-line); border-radius:var(--tq-radius); padding:16px 18px; }
.tq-stat-num{ font-family:var(--tq-font-display); font-size:1.7rem; font-weight:800; color:var(--tq-navy); line-height:1; }
.tq-stat-label{ font-size:11.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--tq-muted); margin-top:6px; }

/* --- Text link / inline button --- */
.tq-link{ color:var(--tq-teal-700); font-weight:600; text-decoration:none; cursor:pointer;
  background:none; border:none; padding:0; font:inherit; }
.tq-link:hover{ text-decoration:underline; }

/* --- Divider --- */
.tq-divider{ border:0; border-top:1px solid var(--tq-line); margin:1.25rem 0; }

/* --- Trust-tier badges (institutional; align with verification/validation screens) --- */
.tq-trust{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:999px; letter-spacing:.02em; white-space:nowrap; }
.tq-trust-verified{ background:#ecfeff; color:#0e7490; border:1px solid #a5f3fc; }
.tq-trust-validated{ background:#ede9fe; color:#5b21b6; border:1px solid #ddd6fe; }
.tq-trust-pending{ background:var(--tq-bg); color:var(--tq-muted); border:1px solid var(--tq-line); }

/* --- Auth (guest) screens: centered brand card --- */
.tq-auth{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(0,63,92,.06), transparent 60%),
    radial-gradient(900px 480px at 112% 8%, rgba(13,148,136,.06), transparent 55%),
    var(--tq-bg); }
.tq-auth-card{ width:100%; max-width:412px; background:#fff; border:1px solid var(--tq-line);
  border-radius:18px; box-shadow:var(--tq-shadow); padding:30px 30px 26px; }
.tq-auth-brand{ text-align:center; margin-bottom:18px; }
.tq-auth-title{ font-family:var(--tq-font-display); font-size:1.3rem; font-weight:800; color:var(--tq-navy); margin:14px 0 2px; letter-spacing:-.02em; }
.tq-auth-sub{ font-size:13px; color:var(--tq-muted); margin:0; }
.tq-auth-foot{ text-align:center; font-size:12.5px; color:var(--tq-muted); margin-top:18px; }