/* ============================================================================ 
   FILE: /html/css/ultimate.css
   INITIATED: 2025-12-25T00:00:00+00:00
   ROLE: Global Design System — SINGLE SOURCE OF TRUTH
   BRAND: The Candidate Group — Black · Gold · White
   FONT STRATEGY: SELF-HOSTED (CSP-SAFE)
   ============================================================================ */

/* ============================================================================
   [1] FONT FACE — SELF HOSTED (NO CDN, NO GOOGLE, CSP SAFE)
   ============================================================================ */

/* Inter was previously self-hosted. Per request, global font stack is now:
   Noto Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
   If you still want a self-hosted primary, add your own @font-face for "Noto Sans". */

/*
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/Inter-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/Inter-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/Inter-ExtraBold.woff2") format("woff2");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
*/

/* ============================================================================
   [2] ROOT TOKENS
   ============================================================================ */

:root{
  /* UPDATED: global font stack */
  --font-sans: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --black:#000000;
  --ink:#e8e6df;
  --white:#ffffff;

  --gold:#d0a548;
  --gold-dark:#b8943a;
  --gold-light:rgba(208,165,72,.15);

  --bg:#000;
  --panel:#0b0b0b;
  --panel-soft:#111;
  --border:#1a1917;
  --line:rgba(255,255,255,.08);

  /* Dropdown hard rule: always black/grey (even in light theme) */
  --dropdown-bg:#111111;
  --dropdown-bg-2:#0b0b0b;
  --dropdown-ink:#e8e6df;
  --dropdown-border:#1a1917;

  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:22px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 30px rgba(0,0,0,.55);

  --speed-fast:.15s;
  --speed:.25s;
}

/* ============================================================================
   [3] GLOBAL RESET / BASELINE
   ============================================================================ */

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

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1.45;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg,video{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:var(--gold);
  text-decoration:none;
}
a:hover{ color:var(--gold-dark); }

button,input,select,textarea{
  font-family:var(--font-sans);
  font-size:inherit;
}

/* ============================================================================
   [4] TYPOGRAPHY SCALE
   ============================================================================ */

h1,h2,h3,h4,h5,h6{
  font-weight:800;
  color:#fff;
  margin:0 0 .4em;
  letter-spacing:-.015em;
}

h1{font-size:2rem;}
h2{font-size:1.6rem;}
h3{font-size:1.3rem;}
h4{font-size:1.1rem;}
h5{font-size:1rem;}
h6{font-size:.9rem;}

p{margin:0 0 1em;}

.small{font-size:.85rem;}
.muted{color:#a9a39a;}

/* ============================================================================
   [5] BUTTONS
   ============================================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem 1rem;
  border-radius:999px;
  border:1px solid var(--gold);
  background:var(--gold);
  color:#000;
  font-weight:700;
  cursor:pointer;
  transition:background var(--speed),color var(--speed),border-color var(--speed);
}

.btn:hover{
  background:transparent;
  color:var(--gold);
}

.btn.secondary{
  background:transparent;
  color:var(--gold);
}

.btn.secondary:hover{
  background:var(--gold);
  color:#000;
}

/* ============================================================================
   [6] FORMS
   ============================================================================ */

input,textarea,select{
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--ink);
  padding:.55rem .7rem;
  border-radius:var(--radius-sm);
}

input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(208,165,72,.15);
}

::placeholder{
  color:#777;
}

/* Dropdown hard rule (platform-wide): black/grey background always */
select{
  background:var(--dropdown-bg) !important;
  color:var(--dropdown-ink) !important;
  border-color:var(--dropdown-border);
  /* helps native controls in some browsers */
  color-scheme: dark;
}
select:hover{
  border-color:rgba(208,165,72,.55);
}
select:disabled{
  opacity:.65;
  cursor:not-allowed;
}

/* Options / optgroups (works on most browsers; some iOS/Safari limits apply) */
option,
optgroup{
  background:var(--dropdown-bg) !important;
  color:var(--dropdown-ink) !important;
}
option:checked,
option:hover{
  background:var(--dropdown-bg-2) !important;
  color:var(--dropdown-ink) !important;
}

/* ============================================================================
   [7] CARDS / PANELS
   ============================================================================ */

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:1rem;
  box-shadow:var(--shadow-sm);
}

.card.soft{
  background:var(--panel-soft);
}

/* ============================================================================
   [8] TABLES
   ============================================================================ */

table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}

th,td{
  padding:.6rem .7rem;
  border-bottom:1px solid var(--line);
}

th{
  text-align:left;
  font-weight:700;
  color:#fff;
}

/* ============================================================================
   [9] UTILITIES
   ============================================================================ */

.flex{display:flex;}
.flex-col{display:flex;flex-direction:column;}
.center{align-items:center;justify-content:center;}
.space-between{justify-content:space-between;}
.gap-xs{gap:.25rem;}
.gap-sm{gap:.5rem;}
.gap-md{gap:1rem;}
.gap-lg{gap:1.5rem;}

.text-gold{color:var(--gold);}
.text-center{text-align:center;}

.hidden{display:none!important;}
.no-scroll{overflow:hidden;}

/* ============================================================================
   [10] ADMIN / PLATFORM BASELINES
   ============================================================================ */

.admin-layout-body{
  background:#0f0f0f;
  min-height:100vh;
}

.admin-main{
  padding:1rem 1.2rem;
}

/* ============================================================================
   [11] TCG BASE BODY + THEMES (CANONICAL)
   - Clean: no patterns, no gradients
   - Two modes: charcoal default + light option
   ============================================================================ */

:root{
  --tcg-bg-charcoal:#0b0b0b;
  --tcg-bg-charcoal-2:#111111;
  --tcg-text-charcoal:#e8e6df;

  --tcg-bg-light:#ffffff;
  --tcg-bg-light-2:#f6f6f6;
  --tcg-text-light:#111111;

  --tcg-line:rgba(255,255,255,.10);
  --tcg-line-light:rgba(0,0,0,.10);
}

/* base body */
.tcg-body{
  min-height:100vh;
  margin:0;
  padding:0;
  background:var(--tcg-bg-charcoal);
  color:var(--tcg-text-charcoal);
}

/* theme: charcoal (default) */
.tcg-theme--charcoal{
  background:var(--tcg-bg-charcoal);
  color:var(--tcg-text-charcoal);
}

/* theme: light */
.tcg-theme--light{
  background:var(--tcg-bg-light);
  color:var(--tcg-text-light);
}

/* ============================================================================
   [12] LAYOUT CONTAINERS
   ============================================================================ */

.tcg-container{
  width:min(1100px, calc(100% - 2rem));
  margin:0 auto;
}

.tcg-main{
  padding:1.25rem 0 2rem;
}

/* ============================================================================
   [13] TOP BAR (NO BOOTSTRAP)
   ============================================================================ */

.tcg-topbar{
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.75);
  backdrop-filter:saturate(120%) blur(8px);
}

.tcg-theme--light .tcg-topbar{
  background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--tcg-line-light);
}

.tcg-topbar__inner{
  width:min(1100px, calc(100% - 2rem));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem 0;
}

.tcg-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
}

.tcg-brand__logo{
  height:32px;
  width:auto;
  display:block;
}

.tcg-topnav{
  display:flex;
  align-items:center;
  gap:1rem;
}

.tcg-topnav__link{
  font-weight:700;
  color:inherit;
  opacity:.9;
  padding:.35rem .45rem;
  border-radius:10px;
}

.tcg-topnav__link:hover{
  opacity:1;
  background:rgba(208,165,72,.12);
}

.tcg-topbar__actions{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.tcg-mobileMenu{
  width:min(1100px, calc(100% - 2rem));
  margin:0 auto;
  padding:.75rem 0 1rem;
  border-top:1px solid var(--line);
}

.tcg-theme--light .tcg-mobileMenu{
  border-top:1px solid var(--tcg-line-light);
}

.tcg-mobileMenu__link{
  display:block;
  padding:.75rem .6rem;
  border-radius:12px;
  color:inherit;
  font-weight:800;
}

.tcg-mobileMenu__link:hover{
  background:rgba(208,165,72,.12);
}

/* ============================================================================
   [14] TYPO HELPERS (CLEAN, DECISION-READY)
   ============================================================================ */

.tcg-h1{ font-size:2rem; line-height:1.1; margin:1rem 0 .5rem; }
.tcg-h2{ font-size:1.25rem; margin:0 0 .5rem; }
.tcg-muted{ opacity:.75; }
.tcg-panel{
  margin-top:1rem;
  padding:1rem;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.tcg-theme--light .tcg-panel{
  background:var(--tcg-bg-light-2);
  border:1px solid var(--tcg-line-light);
}

/* ============================================================================
   [15] RESPONSIVE: MOBILE FIRST
   ============================================================================ */

@media (max-width: 820px){
  .tcg-topnav{ display:none; }
}


/* ============================================================================
   [16] CONTENT CONTAINMENT HARDENING (ENTERPRISE SAFETY LAYER)
   Prevent long URLs / tokens / JSON blobs from breaking layout
   ============================================================================ */

/* 1. Prevent horizontal bleed platform-wide */
html, body{
  overflow-x:hidden;
}

/* 2. Flex children must not overflow containers */
.flex > *,
.tcg-container > *,
.tcg-panel > *,
.card > *{
  min-width:0;
}

/* 3. Long string protection */
p,
span,
div,
td,
th,
.card,
.tcg-panel{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* 4. Textareas + editable content */
textarea{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* 5. Preformatted / code blocks */
pre,
code{
  white-space:pre-wrap;
  word-break:break-word;
  overflow-x:auto;
}

/* 6. Safety for any future preview/render blocks */
[class*="preview"],
[class*="description"],
[class*="content"]{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ============================================================================
   END OF FILE — DO NOT OVERRIDE FONTS ANYWHERE ELSE
   ============================================================================ */