/* TIAG — single shared stylesheet (loaded after Bootstrap on every page).
   Light theme (white bg, near-black text, blue accents) + card-driven, airy layout.
   Home of @font-face, Bootstrap overrides, theme, and all component rules. */

/* ============================ Font — Space Grotesk ============================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ============================ Palette ============================
   Background  #ffffff  white
   Text        #374151  slate-grey (headings near-black #111827)
   Accent      #2563eb  blue (links / buttons / icons)
   Hover       #1d4ed8  darker blue  */
:root {
  --bs-font-sans-serif: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bs-body-font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bs-body-bg: #ffffff;
  --bs-body-color: #374151;
  --bs-emphasis-color: #111827;
  --bs-link-color: #2563eb;
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: #1d4ed8;
  --bs-border-color: #e5e7eb;
  --bs-secondary-color: #6b7280;
  --tiag-bg: #ffffff;
  --tiag-text: #374151;
  --tiag-heading: #111827;
  --tiag-muted: #6b7280;
  --tiag-accent: #2563eb;     /* blue */
  --tiag-accent-2: #2563eb;   /* figures also blue */
  --tiag-hover: #1d4ed8;      /* darker blue */
  --tiag-surface: #ffffff;
  --tiag-surface-2: #f9fafb;
  --tiag-input-bg: #ffffff;
  --tiag-border: #e5e7eb;
  --tiag-border-strong: #d1d5db;
  --tiag-radius: 14px;
  --tiag-nav-h: 84px;
}

html, body { background:var(--tiag-bg); color:var(--tiag-text); font-family:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
body { min-height:100vh; display:flex; flex-direction:column; line-height:1.6; letter-spacing:-0.005em; }
*, .btn, .form-control, .form-select, .nav-link, .navbar, .navbar-brand,
.modal, .table, .badge, .dropdown-menu, .card, .alert { font-family:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

h1,h2,h3,h4,h5,h6 { color:var(--tiag-heading); letter-spacing:-0.02em; }
p { color:var(--tiag-text); }
.fw-light{font-weight:300!important;} .fw-normal{font-weight:400!important;}
.fw-medium{font-weight:500!important;} .fw-semibold{font-weight:600!important;}
.fw-bold{font-weight:700!important;}
.text-secondary { color:var(--tiag-muted) !important; }
.text-info { color:var(--tiag-accent) !important; }
::selection { background:rgba(37,99,235,0.15); }

.tiag-eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:600;
  color:var(--tiag-accent); display:inline-block; margin-bottom:.5rem; }

/* ============================ Links (subtle color-only hover) ============================ */
a { color:var(--tiag-accent); text-decoration:none; transition:color .18s ease; }
a:hover, a:focus { color:var(--tiag-hover); background:transparent; }
*:focus-visible { outline:2px solid var(--tiag-accent); outline-offset:2px; }

/* ============================ Top navigation (frosted white) ============================ */
.tiag-nav {
  position:fixed; top:0; left:0; right:0; height:var(--tiag-nav-h); z-index:1030;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--tiag-border); padding:0 1.5rem;
}
.tiag-nav .brand { display:flex; flex-direction:column; justify-content:center; line-height:1.05; }
.tiag-nav .brand:hover, .tiag-nav .brand:focus { background:transparent; }
.tiag-nav .brand-top { position:relative; display:flex; align-items:center; }
.tiag-nav .brand .brand-name { font-weight:700; font-size:2.5rem; letter-spacing:.04em; color:var(--tiag-heading);
  display:inline-block; transform:skewX(-9deg); transform-origin:left bottom; }
.tiag-nav .brand .brand-accent { color:var(--tiag-accent); }
.tiag-nav .brand:hover .brand-name { color:var(--tiag-accent); }
.tiag-nav .brand .brand-tagline { font-size:.72rem; letter-spacing:.03em; color:var(--tiag-muted); margin-top:2px; text-transform:uppercase; }

/* trailing motion (speed) lines at the end of the wordmark */
.tiag-nav .brand-speed { display:inline-flex; flex-direction:column; gap:4px; margin-left:9px; transform:skewX(-9deg); }
.tiag-nav .brand-speed i { display:block; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--tiag-accent), rgba(37,99,235,0)); }
.tiag-nav .brand-speed i:nth-child(1){ width:22px; opacity:.85; }
.tiag-nav .brand-speed i:nth-child(2){ width:15px; opacity:.55; }
.tiag-nav .brand-speed i:nth-child(3){ width:9px;  opacity:.35; }

/* animated light-speed beams above & below the logo */
.tiag-nav .brand-top::before, .tiag-nav .brand-top::after {
  content:""; position:absolute; left:-35%; width:34%; height:1.6px; pointer-events:none;
  opacity:0; border-radius:2px; filter:blur(.4px);
  background:linear-gradient(90deg, rgba(37,99,235,0), rgba(96,165,250,.95), rgba(37,99,235,0));
  box-shadow:0 0 7px rgba(37,99,235,.5);
  animation:tiag-streak 7s cubic-bezier(.2,.7,.2,1) infinite;
}
.tiag-nav .brand-top::before { top:-2px; }
.tiag-nav .brand-top::after  { bottom:-2px; width:24%; animation-duration:9.5s; animation-delay:3.5s; }
.tiag-links { display:flex; align-items:center; gap:.15rem; }
.tiag-links a, .tiag-links button.navlink {
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.5rem .85rem;
  border-radius:9px; color:#374151; background:transparent; border:0; font-size:.92rem; font-weight:500;
  transition:color .18s ease, background-color .18s ease;
}
.tiag-links a:hover, .tiag-links a:focus,
.tiag-links button.navlink:hover, .tiag-links button.navlink:focus { color:var(--tiag-heading); background:#f3f4f6; }
.tiag-links a.active { color:var(--tiag-accent); background:rgba(37,99,235,0.10); }
.tiag-logout { color:#dc2626 !important; }
.tiag-logout:hover, .tiag-logout:focus { color:#fff !important; background:#dc2626 !important; }
.tiag-hamburger { display:none; background:transparent; border:0; color:var(--tiag-heading); font-size:1.5rem; min-width:44px; min-height:44px; }

main.tiag-main { flex:1 0 auto; padding-top:calc(var(--tiag-nav-h) + 2.5rem); padding-bottom:3.5rem; }
.tiag-main .container { max-width:1080px; }

/* ============================ Footer ============================ */
.tiag-footer {
  flex-shrink:0; background:#f9fafb; border-top:1px solid var(--tiag-border);
  padding:2rem 1rem; text-align:center; color:var(--tiag-muted); font-size:.9rem;
}
.tiag-footer .links { display:flex; gap:1.25rem; justify-content:center; flex-wrap:wrap; margin-bottom:.5rem; }
.tiag-footer .links a { color:var(--tiag-muted); }
.tiag-footer .links a:hover { color:var(--tiag-accent); }
.tiag-footer .tagline { color:var(--tiag-accent); font-style:italic; margin-top:.35rem; }

/* ============================ Cards / surfaces ============================ */
.card {
  background:var(--tiag-surface); border:1px solid var(--tiag-border); border-radius:var(--tiag-radius);
  box-shadow:0 1px 2px rgba(17,24,39,0.04);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card .card-body { padding:1.6rem; }
.card .card-header { background:var(--tiag-surface-2); border-bottom:1px solid var(--tiag-border); font-weight:600; padding:1.1rem 1.6rem; }
a.card, .card.card-interactive { cursor:pointer; }
a.card:hover, .card.card-interactive:hover { transform:translateY(-3px); border-color:var(--tiag-accent); box-shadow:0 8px 24px rgba(37,99,235,0.12); }

/* Hero — open section (no box), light-weight display heading, generous space */
.tiag-hero { padding:3.5rem 0 2.5rem; margin-bottom:1.5rem; }
.tiag-hero h1 { font-weight:300; font-size:3rem; letter-spacing:-0.03em; margin-bottom:.75rem; }
.tiag-hero .subtitle { color:var(--tiag-muted); font-size:1.2rem; font-weight:400; max-width:42rem; margin-bottom:0; }
.tiag-hero.text-center .subtitle { margin-left:auto; margin-right:auto; }
.tiag-hero.text-center > .d-flex { justify-content:center; }

/* Light-speed streak keyframe (used by the nav brand beams) */
@keyframes tiag-streak {
  0%   { left:-35%; opacity:0; }
  3%   { opacity:1; }
  11%  { left:135%; opacity:0; }
  100% { left:135%; opacity:0; }
}

/* Open content sections (no card); cards reserved for tiles/forms */
.tiag-section { margin-bottom:3.5rem; }
.tiag-section:last-child { margin-bottom:0; }
.tiag-divider { border-top:1px solid var(--tiag-border); padding-top:3rem; }
.prose { max-width:54rem; }
.prose:last-child { margin-bottom:0; }
.lead { font-weight:300; color:#4b5563; }

/* Rotating "ideals" hero — cross-fades between stacked items */
.tiag-rotator { display:grid; }
.tiag-rotator .rotator-item { grid-area:1 / 1; opacity:0; transform:translateY(8px);
  transition:opacity .6s ease, transform .6s ease; pointer-events:none; }
.tiag-rotator .rotator-item.active { opacity:1; transform:none; pointer-events:auto; }
.tiag-rotator-hero { min-height:6rem; align-items:center; justify-items:center; padding:1.25rem 0 1.75rem; }
.tiag-rotator-hero .rotator-title { display:block; font-size:2.6rem; font-weight:300; letter-spacing:-0.03em; color:var(--tiag-heading); line-height:1.1; }
.tiag-rotator-hero .rotator-sub { display:block; font-size:1.05rem; color:var(--tiag-accent); margin-top:.4rem; }
@media (max-width:576px) { .tiag-rotator-hero .rotator-title { font-size:1.8rem; } }

/* Collapsible "Supporting evidence" citations */
.evidence { margin-top:.85rem; border-top:1px dashed var(--tiag-border-strong); padding-top:.6rem; }
.evidence summary { cursor:pointer; color:var(--tiag-accent); font-size:.78rem; font-weight:500;
  list-style:none; display:inline-flex; align-items:center; gap:.35rem; }
.evidence summary::-webkit-details-marker { display:none; }
.evidence summary::before { content:"\F229"; font-family:"bootstrap-icons"; font-size:.7rem; transition:transform .18s ease; }
.evidence[open] summary::before { transform:rotate(90deg); }
.evidence .cite { font-size:.78rem; color:var(--tiag-muted); margin:.5rem 0 .25rem; }
.evidence a { font-size:.78rem; word-break:break-word; }

.metric { font-size:2.25rem; font-weight:700; color:var(--tiag-accent); letter-spacing:-0.02em; }

/* Icon chip */
.feature-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:12px;
  background:rgba(37,99,235,0.10); color:var(--tiag-accent); font-size:1.4rem;
}

/* ============================ Buttons ============================ */
.btn { border-radius:10px; font-weight:600; padding:.55rem 1.15rem; transition:background-color .18s ease, color .18s ease, border-color .18s ease; }
.btn-tiag { background:var(--tiag-accent); color:#fff; border:1px solid var(--tiag-accent); }
.btn-tiag:hover, .btn-tiag:focus { background:var(--tiag-hover); color:#fff; border-color:var(--tiag-hover); }
.btn-outline-tiag { background:transparent; color:var(--tiag-accent); border:1px solid var(--tiag-border-strong); }
.btn-outline-tiag:hover, .btn-outline-tiag:focus { background:rgba(37,99,235,0.08); color:var(--tiag-hover); border-color:var(--tiag-accent); }

/* ============================ Forms ============================ */
.form-control, .form-select, .form-control:focus, .form-select:focus {
  background:var(--tiag-input-bg); color:var(--tiag-heading); border:1px solid var(--tiag-border-strong); font-size:16px; min-height:46px; border-radius:10px;
}
.form-control:focus, .form-select:focus { border-color:var(--tiag-accent); box-shadow:0 0 0 .2rem rgba(37,99,235,.15); }
.form-control::placeholder { color:#9ca3af; }
.form-label { color:var(--tiag-heading); font-weight:500; margin-bottom:.35rem; }
.form-text { color:var(--tiag-muted); }
.code-input { font-size:1.6rem; letter-spacing:.6rem; text-align:center; font-weight:700; }

/* ============================ Tables ============================ */
.table { --bs-table-bg:transparent; --bs-table-color:var(--tiag-text); color:var(--tiag-text); }
.table > :not(caption) > * > * { background:transparent; color:var(--tiag-text); border-color:var(--tiag-border); padding:.75rem .9rem; }
.table thead th { color:var(--tiag-muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; border-bottom:1px solid var(--tiag-border); }
.table-wrap { overflow-x:auto; }

/* ============================ Badges / alerts ============================ */
.badge { font-weight:600; padding:.4em .7em; border-radius:7px; }
.badge.bg-role-admin { background:#dc2626!important; color:#fff; }
.badge.bg-role-super { background:#7c3aed!important; color:#fff; }
.badge.bg-role-employee { background:var(--tiag-accent)!important; color:#fff; }
.badge.bg-ok { background:#16a34a!important; color:#fff; }
.badge.bg-pending { background:#d97706!important; color:#fff; }
.alert { border-radius:12px; border-width:1px; color:#1f2937; padding:1rem 1.15rem; }
.alert-info { background:rgba(37,99,235,0.07); border-color:rgba(37,99,235,0.35); color:#1e3a8a; }
.alert-success { background:rgba(22,163,74,0.08); border-color:rgba(22,163,74,0.35); color:#14532d; }
.alert-danger { background:rgba(220,38,38,0.08); border-color:rgba(220,38,38,0.35); color:#7f1d1d; }
.alert-warning { background:rgba(217,119,6,0.08); border-color:rgba(217,119,6,0.35); color:#78350f; }

/* ============================ Modals ============================ */
.modal-content { background:#fff; border:1px solid var(--tiag-border); border-radius:16px; color:var(--tiag-text); }
.modal-header, .modal-footer { border-color:var(--tiag-border); }

/* ============================ Auth pages ============================ */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; }
.auth-card { width:100%; max-width:430px; background:#fff; border:1px solid var(--tiag-border);
  border-radius:18px; padding:2.25rem; box-shadow:0 4px 24px rgba(17,24,39,0.06); }
.auth-card .logo { display:block; height:32px; margin:0 auto 1.25rem; }

.text-platform { color:#7c3aed; }

/* ============================ Subtle entrance animation ============================ */
@keyframes tiag-fade-up { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.tiag-hero, .card { animation:tiag-fade-up .5s ease both; }
.row > [class*="col"]:nth-child(1) .card { animation-delay:.02s; }
.row > [class*="col"]:nth-child(2) .card { animation-delay:.08s; }
.row > [class*="col"]:nth-child(3) .card { animation-delay:.14s; }
.row > [class*="col"]:nth-child(4) .card { animation-delay:.20s; }
.row > [class*="col"]:nth-child(5) .card { animation-delay:.26s; }
.row > [class*="col"]:nth-child(6) .card { animation-delay:.32s; }

/* ============================ Responsive ============================ */
@media (max-width:768px) {
  .tiag-hamburger { display:inline-flex; align-items:center; justify-content:center; }
  .tiag-links {
    position:fixed; top:var(--tiag-nav-h); left:0; right:0; flex-direction:column; align-items:stretch;
    gap:0; background:rgba(255,255,255,0.98); backdrop-filter:blur(12px); border-bottom:1px solid var(--tiag-border); padding:.5rem;
    display:none;
  }
  .tiag-links.open { display:flex; }
  .tiag-links a, .tiag-links button.navlink { width:100%; }
  .tiag-hero { padding:2.5rem 0 1.5rem; }
  .tiag-hero h1 { font-size:2.1rem; }
  .tiag-hero .subtitle { font-size:1.05rem; }
  main.tiag-main { padding-top:calc(var(--tiag-nav-h) + 1.5rem); }
}
@media (max-width:576px) {
  main.tiag-main { padding-left:.5rem; padding-right:.5rem; }
  .card .card-body { padding:1.25rem; }
  .code-input { font-size:1.3rem; letter-spacing:.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, .tiag-hero, .card { animation:none !important; transition:none !important; }
  .tiag-nav .brand-top::before, .tiag-nav .brand-top::after { animation:none !important; opacity:0 !important; }
}

/* small utilities (replace one-off inline styles) */
.icon-hero { font-size:3.5rem; line-height:1; }
.text-check { color:#16a34a; }
.ls-wide { letter-spacing:.1em; }