/* =====================================================================
   The Job Factory Placements — a Naandi Foundation initiative
   Design system: light warm-white canvas, Naandi orange accents, frosted
   "liquid glass" panels. One file, no framework dependency.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* Brand orange */
  --orange-300:#ffb37a;
  --orange-400:#ff9a4d;
  --orange-500:#ff7a1a;
  --orange-600:#e35f05;
  --orange-700:#b84a03;
  --orange-800:#8a3a02; /* darker, for text/links on white where 500/600 don't have enough contrast */

  /* Light neutral-grey canvas (950 = lightest, 400 = darkest of this set) */
  --ink-950:#f8f8f7;
  --ink-900:#efeeec;
  --ink-800:#e3e1de;
  --ink-700:#cfccc7;
  --ink-600:#a39e97;
  --ink-500:#78756e;
  --ink-400:#57534c;

  --text-hi:#201d18;
  --text-md:#4d493f;
  --text-lo:#847f74;

  --glass-bg: rgba(255,255,255,0.66);
  --glass-bg-strong: rgba(255,255,255,0.88);
  --glass-border: rgba(32,29,24,0.09);
  --glass-border-strong: rgba(32,29,24,0.16);

  --success:#17915c;
  --success-bg: rgba(23,145,92,.13);
  --danger:#cf3f3f;
  --danger-bg: rgba(207,63,63,.13);
  --warning:#a8720a;
  --warning-bg: rgba(168,114,10,.14);
  --info:#1f6fbf;
  --info-bg: rgba(31,111,191,.13);

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --shadow-1: 0 1px 2px rgba(32,29,24,.06);
  --shadow-2: 0 10px 30px rgba(32,29,24,.10);
  --shadow-glow: 0 0 0 1px rgba(255,122,26,.35), 0 8px 24px rgba(255,122,26,.20);

  --font-display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --sidebar-w: 264px;
  --topbar-h: 68px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text-hi);
  background: radial-gradient(1200px 640px at 10% -10%, rgba(255,154,77,.14) 0%, transparent 55%),
              radial-gradient(900px 560px at 98% 0%, rgba(120,117,110,.10) 0%, transparent 50%),
              var(--ink-950);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  font-size: 14.5px;
  line-height: 1.5;
}
h1,h2,h3,h4,h5,h6{ font-family: var(--font-display); font-weight:700; color: var(--text-hi); margin: 0 0 .4em; letter-spacing:-.01em; }
a{ color: var(--orange-800); text-decoration:none; }
a:hover{ color: var(--orange-600); }
p{ color: var(--text-md); margin:0 0 .75em; }
small,.text-muted{ color: var(--text-lo); }
hr{ border:none; border-top:1px solid var(--glass-border); margin:1.25rem 0; }
::selection{ background: var(--orange-400); color:#2b1400; }

/* Scrollbar (webkit) */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background: var(--ink-600); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background: var(--ink-400); }

/* ---------------------------------------------------------------------
   Glass primitive
   --------------------------------------------------------------------- */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-2);
}
.glass-strong{
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
}

/* ---------------------------------------------------------------------
   App shell
   --------------------------------------------------------------------- */
.app-shell{ min-height:100vh; display:flex; }

.sidebar{
  position: fixed; top:0; left:0; bottom:0; width: var(--sidebar-w);
  z-index: 40;
  padding: 20px 14px;
  display:flex; flex-direction:column; gap:6px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.96));
  border-right: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform .25s ease;
  overflow-y: auto;
}
/*
  Brand block: the two logos, and nothing else — no wordmark, since each
  logo already carries its own. They share a row, each sized for its own
  aspect ratio rather than a common height: the Naandi mark is 697x358, so
  matching the near-square Job Factory mark's height squeezed it into an
  unreadable smudge (it used to render 25x13 inline in a sub-line).
*/
.sidebar-brand{
  display:flex; align-items:center;
  padding: 6px 10px 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--glass-border);
}
.sidebar-brand .brand-marks{ display:flex; align-items:center; gap:12px; }
.sidebar-brand .mark-primary{
  height:46px; width:auto; display:block; border-radius:10px;
  filter: drop-shadow(0 2px 5px rgba(32,29,24,.14));
}
.sidebar-brand .mark-secondary{ height:30px; width:auto; display:block; }
.sidebar-brand .mark-divider{ width:1px; height:30px; background: var(--glass-border); display:block; }

.sidebar-section-label{
  font-size:.68rem; letter-spacing:.10em; text-transform:uppercase; color: var(--text-lo);
  padding: 14px 12px 6px;
}
.nav-link{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius: var(--radius-sm);
  color: var(--text-md); font-weight:600; font-size:.88rem;
  transition: background .15s ease, color .15s ease;
}
.nav-link i{ width:18px; text-align:center; color: var(--text-lo); font-size:.95rem; transition: color .15s ease; }
.nav-link:hover{ background: var(--glass-bg-strong); color: var(--text-hi); }
.nav-link:hover i{ color: var(--orange-600); }
.nav-link.active{
  color:#2b1400;
  background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
  box-shadow: var(--shadow-glow);
}
.nav-link.active i{ color:#2b1400; }

.sidebar-user{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--glass-border);
  display:flex; align-items:center; gap:10px; padding: 12px 10px 4px;
}

.topbar{
  position: sticky; top:0; z-index: 30;
  height: var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 22px;
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.topbar .crumb{ color: var(--text-lo); font-size:.85rem; }
.topbar .crumb b{ color: var(--text-hi); }
.sidebar-toggle{ display:none; background:none; border:none; color:var(--text-hi); font-size:1.2rem; cursor:pointer; }

.main{ margin-left: var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column; }
.content{ padding: 24px 26px 60px; max-width: 1400px; width:100%; margin:0 auto; }

.app-footer{ text-align:center; color:var(--text-lo); font-size:.78rem; padding: 18px; }

@media (max-width: 960px){
  .sidebar{ transform: translateX(-100%); box-shadow: 0 0 0 100vmax rgba(0,0,0,0); }
  .sidebar.open{ transform: translateX(0); box-shadow: 20px 0 60px rgba(32,29,24,.18); }
  .main{ margin-left:0; }
  .sidebar-toggle{ display:inline-flex; align-items:center; justify-content:center; }
}

/* ---------------------------------------------------------------------
   Page header
   --------------------------------------------------------------------- */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
.page-head h1{ font-size:1.5rem; margin:0; }
.page-head .subtitle{ color: var(--text-lo); font-size:.86rem; margin-top:4px; }
.page-head .actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */
.card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-1);
  margin-bottom: 20px;
}
.card-header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding: 16px 20px; border-bottom:1px solid var(--glass-border);
}
.card-header h2,.card-header h3{ font-size:1.02rem; margin:0; }
.card-body{ padding: 20px; }
.card-body.tight{ padding: 0; }

/* Stat / KPI cards */
.stat-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:16px; margin-bottom:22px; }
.stat-card{
  position:relative; overflow:hidden;
  padding:18px 20px; border-radius: var(--radius-lg);
  background: var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-1);
}
.stat-card::after{
  content:''; position:absolute; inset:auto -30% -60% auto; width:160px; height:160px;
  background: radial-gradient(circle, rgba(255,122,26,.14), transparent 70%);
  pointer-events:none;
}
.stat-card .icon{
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--orange-400), var(--orange-600)); color:#2b1400; font-size:1rem;
  margin-bottom:12px; box-shadow: var(--shadow-glow);
}
.stat-card.tone-success .icon{ background: linear-gradient(135deg,#4fe0a0,#1f9a63); box-shadow:none; color:#06301e; }
.stat-card.tone-danger .icon{ background: linear-gradient(135deg,#ff8a75,#c23a24); box-shadow:none; color:#3a0f08; }
.stat-card.tone-info .icon{ background: linear-gradient(135deg,#7cc2ff,#2172c9); box-shadow:none; color:#052240; }
.stat-card.tone-warning .icon{ background: linear-gradient(135deg,#ffd27a,#c98a1a); box-shadow:none; color:#3a2600; }
.stat-card .value{ font-family: var(--font-display); font-size:1.7rem; font-weight:800; color:var(--text-hi); line-height:1; }
.stat-card .label{ color: var(--text-lo); font-size:.8rem; margin-top:6px; font-weight:600; }
.stat-card .delta{ font-size:.74rem; margin-top:8px; color:var(--text-lo); }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding: 9px 16px; border-radius: 10px; border:1px solid transparent;
  font-weight:600; font-size:.85rem; cursor:pointer; font-family: var(--font-body);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-orange{
  background: linear-gradient(135deg, var(--orange-400), var(--orange-600)); color:#2b1400;
  box-shadow: var(--shadow-glow);
}
.btn-orange:hover{ filter:brightness(1.05); color:#2b1400; }
.btn-ghost{ background: var(--glass-bg-strong); border-color: var(--glass-border); color: var(--text-hi); }
.btn-ghost:hover{ background:#fff; color:var(--text-hi); }
.btn-outline{ background:transparent; border-color: var(--orange-500); color: var(--orange-700); }
.btn-outline:hover{ background: rgba(255,122,26,.08); color: var(--orange-800); }
.btn-danger{ background: rgba(207,63,63,.12); border-color: rgba(207,63,63,.35); color:#a52f2f; }
.btn-danger:hover{ background: rgba(207,63,63,.2); color:#8a2626; }
.btn-success{ background: rgba(23,145,92,.13); border-color: rgba(23,145,92,.35); color:#127248; }
.btn-sm{ padding:6px 11px; font-size:.76rem; border-radius:8px; }
.btn-lg{ padding:12px 22px; font-size:.95rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn-icon{ width:34px; height:34px; padding:0; border-radius:9px; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.form-group{ margin-bottom:16px; }
.form-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px; }
label,.form-label{ display:block; font-size:.8rem; font-weight:600; color: var(--text-md); margin-bottom:6px; }
.form-hint{ font-size:.74rem; color:var(--text-lo); margin-top:5px; }
.form-error{ font-size:.74rem; color: var(--danger); margin-top:5px; }

.form-control, select.form-control, textarea.form-control{
  width:100%; padding: 10px 13px; border-radius:10px;
  background: rgba(255,255,255,.9); border:1px solid var(--glass-border-strong);
  color: var(--text-hi); font-family: var(--font-body); font-size:.87rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-control::placeholder{ color: var(--text-lo); }
.form-control:focus{
  outline:none; border-color: var(--orange-500); background:#fff;
  box-shadow: 0 0 0 3px rgba(255,122,26,.16);
}
textarea.form-control{ resize: vertical; min-height:80px; }
select.form-control{ appearance:none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23847f74'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 14px center; padding-right:34px;
}
select[multiple].form-control{ background-image:none; padding-right:13px; min-height:120px; }
.form-check{ display:flex; align-items:center; gap:8px; }
.form-check input[type=checkbox],.form-check input[type=radio]{ width:16px; height:16px; accent-color: var(--orange-500); }

.checkbox-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:8px;
  max-height:260px; overflow-y:auto; padding:12px; border-radius:12px;
  background: rgba(32,29,24,.03); border:1px solid var(--glass-border);
}
.checkbox-grid label{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px 7px; font-weight:500; font-size:.82rem; color:var(--text-md); margin:0;
  min-width:0;
}
.checkbox-grid label input[type="checkbox"]{ flex-shrink:0; margin-top:3px; }
.checkbox-grid label .cbg-name{ overflow-wrap:anywhere; word-break:break-word; min-width:0; }
.checkbox-grid label .cbg-role{ white-space:nowrap; }

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */
.table-wrap{ overflow-x:auto; border-radius: var(--radius-md); }
table.table{ width:100%; border-collapse: collapse; font-size:.85rem; }
table.table thead th{
  text-align:left; padding:12px 16px; background: rgba(32,29,24,.045);
  color: var(--text-lo); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--glass-border); position:sticky; top:0; white-space:nowrap;
}
table.table thead th a{ color:inherit; }
table.table tbody td{ padding:11px 16px; border-bottom:1px solid rgba(32,29,24,.07); color: var(--text-md); vertical-align:middle; }
table.table tbody tr:hover td{ background: rgba(32,29,24,.035); }
table.table tbody tr:last-child td{ border-bottom:none; }
.table-empty{ text-align:center; padding: 40px 20px; color: var(--text-lo); }

/* Numeric columns: right-aligned (header and cells alike) so a column of
   figures lines up on its ones-place regardless of how many digits any one
   row has — a left-aligned column of numbers reads as ragged/misaligned. */
table.table th.num, table.table td.num{ text-align:right; }
table.table tfoot td{ padding:11px 16px; border-top:2px solid var(--glass-border); color: var(--text-hi); }

/* Sortable table headers: click a column to sort its rows (see app.js
   data-sort-table). The tiny arrow stays faint until that column is the
   active sort, then flips to point the current direction. */
table.table.table-sortable thead th[data-sort]{ cursor:pointer; user-select:none; position:relative; padding-right:22px; }
table.table.table-sortable thead th[data-sort]:hover{ color: var(--text-md); }
/* Pinned to the header's own right edge (not inline after the label) so a
   two-word label like "Training Category" can wrap onto its own second
   line without dragging the arrow down onto an awkward line of its own. */
table.table.table-sortable thead th[data-sort] .sort-arrow{
  position:absolute; right:6px; top:50%; transform:translateY(-50%); width:.8em; opacity:.3;
}
table.table.table-sortable thead th[data-sort].sort-asc .sort-arrow,
table.table.table-sortable thead th[data-sort].sort-desc .sort-arrow{ opacity:1; color: var(--orange-600); }
table.table.table-sortable thead th[data-sort].sort-asc .sort-arrow::before{ content:"\25B2"; }
table.table.table-sortable thead th[data-sort].sort-desc .sort-arrow::before{ content:"\25BC"; }
table.table.table-sortable thead th[data-sort]:not(.sort-asc):not(.sort-desc) .sort-arrow::before{ content:"\25B4"; }
/* The first column's header can be a longer label than the others
   ("Training Category" vs. "State") — let it wrap onto two lines like the
   category names already do in the body, instead of forcing the whole
   table wider than its card and clipping the last column off the edge.
   Scoped to [data-sort]:first-child (not a bare :first-child) so tables
   whose leading column is a blank checkbox header (bulk-assign pickers)
   or an unsorted action column aren't forced wider for no reason. */
table.table.table-sortable thead th[data-sort]:first-child{ white-space:normal; min-width:110px; }

/* Badges */
.badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.02em; }
.badge-success{ background: var(--success-bg); color: var(--success); }
.badge-danger{ background: var(--danger-bg); color: var(--danger); }
.badge-warning{ background: var(--warning-bg); color: var(--warning); }
.badge-info{ background: var(--info-bg); color: var(--info); }
.badge-neutral{ background: var(--glass-bg-strong); color: var(--text-md); }
.badge-orange{ background: rgba(255,122,26,.14); color: var(--orange-700); }

/* Avatar */
.avatar{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--orange-400), var(--orange-600)); color:#2b1400; font-weight:800; font-size:.78rem; flex-shrink:0; }
.avatar.sm{ width:28px; height:28px; font-size:.68rem; }

/* Progress bar */
.progress{ height:8px; border-radius:999px; background: rgba(32,29,24,.09); overflow:hidden; }
.progress > span{ display:block; height:100%; background: linear-gradient(90deg, var(--orange-500), var(--orange-300)); border-radius:999px; }

/* Pagination */
.pagination{ display:flex; align-items:center; justify-content:space-between; padding: 14px 20px; gap:10px; flex-wrap:wrap; }
.pagination .pages{ display:flex; gap:6px; }
.pagination a, .pagination span.current{
  display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 8px;
  border-radius:8px; font-size:.8rem; font-weight:600; color: var(--text-md); border:1px solid var(--glass-border);
}
.pagination span.current{ background: linear-gradient(135deg, var(--orange-400), var(--orange-600)); color:#2b1400; border-color:transparent; }
.pagination a:hover{ background: var(--glass-bg-strong); color:var(--text-hi); }
.pagination .per-page-form{ margin:0; }
.pagination .per-page-form select.form-control-sm{
  width:auto; display:inline-block; padding:6px 30px 6px 10px; font-size:.78rem; border-radius:8px;
}

/* Tabs (reports) */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; padding: 4px; background: rgba(32,29,24,.03); border-radius:12px; border:1px solid var(--glass-border); margin-bottom:18px; }
.tabs a{ padding:9px 15px; border-radius:9px; font-size:.82rem; font-weight:600; color:var(--text-md); }
.tabs a:hover{ background: var(--glass-bg-strong); color:var(--text-hi); }
.tabs a.active{ background: linear-gradient(135deg, var(--orange-400), var(--orange-600)); color:#2b1400; box-shadow: var(--shadow-glow); }

/* Filters bar */
.filters{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:18px; }
.filters .form-group{ margin-bottom:0; min-width:160px; }

/* Alerts / flash messages */
.alert{ padding:13px 16px; border-radius:12px; margin-bottom:14px; font-size:.85rem; display:flex; gap:10px; align-items:flex-start; border:1px solid; }
.alert-success{ background: var(--success-bg); border-color: rgba(23,145,92,.3); color:#0f6b41; }
.alert-error{ background: var(--danger-bg); border-color: rgba(207,63,63,.3); color:#a52f2f; }
.alert-info{ background: var(--info-bg); border-color: rgba(31,111,191,.3); color:#1a5a99; }

/* Modal (lightweight, no framework) */
.modal-backdrop{ position:fixed; inset:0; background: rgba(20,18,15,.45); backdrop-filter: blur(3px); z-index:100; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop.open{ display:flex; }
.modal{ width:100%; max-width:560px; max-height:88vh; overflow-y:auto; background: rgba(255,255,255,.97); }
.modal.modal-lg{ max-width:760px; }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--glass-border); }
.modal-header h3{ margin:0; font-size:1.05rem; }
.modal-close{ background:none; border:none; color: var(--text-lo); font-size:1.3rem; cursor:pointer; line-height:1; }
.modal-close:hover{ color: var(--text-hi); }
.modal-body{ padding:22px; }
.modal-footer{ display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--glass-border); }

/* Empty state */
.empty-state{ text-align:center; padding:50px 20px; color:var(--text-lo); }
.empty-state i{ font-size:2rem; color: var(--ink-600); margin-bottom:12px; display:block; }

/* Chart card */
.chart-wrap{ position:relative; height: 300px; }
.chart-wrap.short{ height:220px; }

/* ---------------------------------------------------------------------
   Auth (login) screens
   --------------------------------------------------------------------- */
.tjf-auth{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; position:relative; overflow:hidden;
}
.tjf-auth::before,.tjf-auth::after{
  content:''; position:absolute; width:520px; height:520px; border-radius:50%; filter: blur(10px);
}
.tjf-auth::before{ background: radial-gradient(circle, rgba(255,122,26,.20), transparent 65%); top:-180px; left:-160px; }
.tjf-auth::after{ background: radial-gradient(circle, rgba(120,117,110,.16), transparent 65%); bottom:-200px; right:-160px; }
.auth-card{ width:100%; max-width:420px; padding:34px 32px; position:relative; z-index:1; }
.auth-logo{ text-align:center; margin-bottom:20px; display:flex; align-items:center; justify-content:center; gap:14px; }
.auth-logo img{ height:52px; border-radius:10px; }
.auth-logo img.mark-square{ height:44px; width:44px; object-fit:cover; box-shadow: var(--shadow-1); }
.auth-title{ text-align:center; margin-bottom:26px; }
.auth-title h1{ font-size:1.25rem; margin-bottom:4px; }
.auth-title p{ font-size:.82rem; margin:0; color:var(--text-lo); }
.auth-switch{ text-align:center; margin-top:18px; font-size:.82rem; color:var(--text-lo); }
.auth-footer{ text-align:center; margin-top:28px; font-size:.72rem; color:var(--text-lo); position:relative; z-index:1; }

/* ---------------------------------------------------------------------
   Error pages
   --------------------------------------------------------------------- */
.tjf-error-body{ min-height:100vh; display:flex; align-items:center; justify-content:center; margin:0;
  background: linear-gradient(180deg, var(--ink-950), var(--ink-900)); font-family: var(--font-body); color: var(--text-hi); }
.tjf-error-card{ max-width:420px; padding:44px 36px; text-align:center; }
.tjf-error-code{ font-family: var(--font-display); font-size:3rem; font-weight:800; color: var(--orange-600); line-height:1; margin-bottom:10px; }

/* ---------------------------------------------------------------------
   Public landing page
   --------------------------------------------------------------------- */
.landing-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 5vw; background: rgba(255,255,255,.78);
  border-bottom:1px solid var(--glass-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.landing-brand{ display:flex; align-items:center; gap:11px; }
.landing-brand img{ height:34px; width:auto; border-radius:8px; filter: drop-shadow(0 2px 5px rgba(32,29,24,.14)); }
.landing-brand .name{ font-family: var(--font-display); font-weight:700; font-size:1.02rem; color:var(--text-hi); line-height:1.1; }
.landing-brand .sub{ font-size:.66rem; color: var(--text-lo); letter-spacing:.08em; text-transform:uppercase; }
.landing-nav-actions{ display:flex; gap:10px; }

.landing-hero{
  position:relative; overflow:hidden; text-align:center;
  padding: 84px 5vw 96px;
}
.landing-hero::before,.landing-hero::after{
  content:''; position:absolute; width:560px; height:560px; border-radius:50%; filter: blur(10px); z-index:0;
}
.landing-hero::before{ background: radial-gradient(circle, rgba(255,122,26,.18), transparent 65%); top:-220px; left:-180px; }
.landing-hero::after{ background: radial-gradient(circle, rgba(120,117,110,.14), transparent 65%); top:-120px; right:-200px; }
.hero-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; }
.hero-badge{
  display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:999px;
  background: rgba(255,122,26,.12); border:1px solid rgba(255,122,26,.3);
  color: var(--orange-700); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:22px;
}
.landing-hero h1{ font-size: clamp(1.9rem, 4vw, 2.9rem); line-height:1.15; margin-bottom:16px; }
.landing-hero h1 span{ color: var(--orange-600); }
.landing-hero .lead{ font-size:1.02rem; color: var(--text-md); max-width:600px; margin:0 auto 32px; }
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.landing-section{ padding: 20px 5vw 84px; max-width:1180px; margin:0 auto; }
.section-head{ text-align:center; max-width:600px; margin:0 auto 40px; }
.section-head .kicker{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--orange-600); margin-bottom:8px; }
.section-head h2{ font-size:1.7rem; margin-bottom:10px; }
.section-head p{ color: var(--text-lo); font-size:.92rem; }

.steps-grid,.feature-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:20px; }
.step-card,.feature-card{
  padding:26px 24px; border-radius: var(--radius-lg);
  background: var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: transform .18s ease, border-color .18s ease;
}
.step-card:hover,.feature-card:hover{ transform: translateY(-3px); border-color: var(--glass-border-strong); }
.step-num{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px;
  background: linear-gradient(135deg, var(--orange-400), var(--orange-600)); color:#2b1400; font-weight:800; font-family: var(--font-display);
  margin-bottom:16px; font-size:.92rem;
}
.feature-card .icon{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px;
  background: var(--glass-bg-strong); color: var(--orange-600); font-size:1.05rem; margin-bottom:16px;
}
.step-card h3,.feature-card h3{ font-size:1.02rem; margin-bottom:8px; }
.step-card p,.feature-card p{ font-size:.86rem; color: var(--text-lo); margin:0; }

.login-choice-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:22px; }
.login-choice-card{
  padding:32px 28px; border-radius: var(--radius-lg); text-align:left;
  background: var(--glass-bg-strong); border:1px solid var(--glass-border-strong);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display:flex; flex-direction:column; gap:14px;
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.login-choice-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-glow); }
.login-choice-card .icon{
  display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:13px;
  background: linear-gradient(135deg, var(--orange-400), var(--orange-600)); color:#2b1400; font-size:1.2rem;
}
.login-choice-card h3{ font-size:1.15rem; margin:0; }
.login-choice-card p{ font-size:.87rem; color: var(--text-lo); margin:0; flex:1; }

.landing-footer{
  text-align:center; padding:30px 5vw 40px; border-top:1px solid var(--glass-border);
  color: var(--text-lo); font-size:.78rem;
}
.landing-footer .foot-brand{ color: var(--text-md); font-weight:600; margin-bottom:4px; }
.landing-footer .foot-logos{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:14px; }
.landing-footer .foot-logos img{ height:26px; border-radius:6px; }

@media (max-width:640px){
  .landing-nav-actions .btn span.full{ display:none; }
}

/* ---------------------------------------------------------------------
   Project logo — shown wherever a project is chosen or listed
   --------------------------------------------------------------------- */
.project-logo{ width:32px; height:32px; border-radius:9px; object-fit:cover; border:1px solid var(--glass-border); background:#fff; flex-shrink:0; }
.project-logo.lg{ width:56px; height:56px; border-radius:14px; }
.project-logo-placeholder{
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--glass-bg-strong); border:1px solid var(--glass-border); color: var(--text-lo); font-size:.8rem;
}
.project-context{ display:flex; align-items:center; gap:10px; }
.project-context .name{ font-weight:700; font-size:.88rem; color:var(--text-hi); }
.project-context .sub{ font-size:.72rem; color:var(--text-lo); }
.logo-upload-preview{ display:flex; align-items:center; gap:12px; margin-top:8px; }

/* Utility */
.d-flex{ display:flex; } .align-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; } .mt-12{ margin-top:12px; } .mb-12{ margin-bottom:12px; }
.text-right{ text-align:right; } .text-center{ text-align:center; }
.w-100{ width:100%; }
.nowrap{ white-space:nowrap; }

/* The asterisk marking the only genuinely required fields on a form. */
.req-mark{ color: var(--danger, #cf3f3f); font-weight:700; margin-left:2px; }