/* ============================================================
   TJNA Event Management — brand design system (SDD §14)
   Colours & type sourced from brand.taxjusticeafrica.net
   ============================================================ */
:root {
  --color-primary: #D00000;          /* Free Speech Red */
  --color-primary-contrast: #FFFFFF;
  --color-accent: #F39422;           /* Carrot Orange — BLACK text on it */
  --color-accent-contrast: #000000;
  --color-authority: #052443;        /* Oxford Blue — headers/nav/footer */
  --color-authority-contrast: #FFFFFF;

  --color-success: #4CAF50;
  --color-danger: #D00000;
  --color-info: #375069;

  --color-bg: #FFFFFF;
  --color-surface: #F8F9FA;
  --color-border: #E0E0E0;
  --color-text: #333333;
  --color-text-muted: #666666;

  --font-display: Futura, "Arial Black", "Century Gothic", sans-serif;
  --font-heading: Tahoma, "Arial Bold", "Trebuchet MS", sans-serif;
  --font-body: Calibri, Arial, sans-serif;

  --radius: 8px;
  --shadow: 0 2px 8px rgba(5, 36, 67, .08);
  --space: 8px;
}

html, body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface);
  line-height: 1.6;
}

h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-authority); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.tjna-pad { padding: calc(var(--space) * 3); }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-success); }
.invalid { outline: 1px solid var(--color-danger); }
.validation-message { color: var(--color-danger); font-size: .85rem; }

/* ---- Layout ---- */
.tjna-app { min-height: 100vh; display: flex; flex-direction: column; }

.tjna-header { background: var(--color-authority); color: var(--color-authority-contrast); box-shadow: var(--shadow); }
.tjna-header-inner {
  max-width: 1100px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.tjna-brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.tjna-brand:hover { text-decoration: none; }
.tjna-brand-mark {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 1px;
  background: var(--color-primary); color: #fff; padding: 6px 10px; border-radius: var(--radius);
}
.tjna-brand-text { color: #fff; font-family: var(--font-heading); font-size: 1.05rem; line-height: 1.1; display: flex; flex-direction: column; }
.tjna-brand-text small { color: var(--color-accent); font-family: var(--font-body); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; }

.tjna-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tjna-nav a, .tjna-nav .tjna-linkbtn { color: #fff; font-family: var(--font-heading); font-size: .95rem; }
.tjna-nav a.active { color: var(--color-accent); }
.tjna-nav a:hover { color: var(--color-accent); text-decoration: none; }
.tjna-linkbtn { background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; padding: 6px 12px; border-radius: var(--radius); cursor: pointer; }
.tjna-lang { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: var(--radius); padding: 6px 8px; font-family: var(--font-heading); }
.tjna-lang option { color: #333; }
.tjna-linkbtn:hover { background: rgba(255,255,255,.1); }

.tjna-main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 28px 20px; box-sizing: border-box; }
.tjna-footer { background: var(--color-authority); color: #cdd3d9; text-align: center; padding: 16px; font-size: .85rem; }

/* ---- Type ---- */
.tjna-h1 { font-size: 1.8rem; margin: 0 0 20px; }
.tjna-muted { color: var(--color-text-muted); }
.tjna-back { font-size: .9rem; }

/* ---- Cards / grid ---- */
.tjna-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.tjna-card {
  display: block; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); color: var(--color-text);
  border-top: 4px solid var(--color-accent);
}
.tjna-card:hover { text-decoration: none; box-shadow: 0 6px 18px rgba(5,36,67,.14); transform: translateY(-1px); transition: .12s; }
.tjna-card h3 { margin: 8px 0 6px; }
.tjna-panel { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); max-width: 640px; }

/* ---- Badges ---- */
.tjna-badge { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 999px; background: var(--color-info); color: #fff; }

/* ---- Buttons ---- */
.tjna-btn { font-family: var(--font-heading); border: none; border-radius: var(--radius); padding: 10px 18px; cursor: pointer; font-size: .95rem; }
.tjna-btn-primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.tjna-btn-accent { background: var(--color-accent); color: var(--color-accent-contrast); } /* black on orange (AA) */
.tjna-btn:disabled { opacity: .5; cursor: not-allowed; }
.tjna-btn:hover:not(:disabled) { filter: brightness(.95); }

/* ---- Forms ---- */
.tjna-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; }
.tjna-field label { font-family: var(--font-heading); font-size: .85rem; color: var(--color-authority); }
.tjna-input, .tjna-select {
  padding: 9px 11px; border: 1px solid var(--color-border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: .95rem; background: #fff;
}
.tjna-input:focus, .tjna-select:focus { outline: 2px solid var(--color-accent); border-color: var(--color-accent); }
.tjna-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }

/* ---- Alerts ---- */
.tjna-alert { border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; border-left: 4px solid; }
.tjna-alert-error { background: #FDF3F3; border-color: var(--color-danger); color: #7a0000; }
.tjna-alert-success { background: #f0f9f0; border-color: var(--color-success); color: #1e5620; }

/* ---- Ticket-type rows ---- */
.tjna-tt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.tjna-tt:last-child { border-bottom: none; }
.tjna-qty { width: 72px; }

/* ---- Tiles ---- */
.tjna-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 18px; }
.tjna-tile { background: var(--color-bg); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius); padding: 16px; }
.tjna-tile .val { font-family: var(--font-display); font-size: 1.7rem; color: var(--color-authority); }
.tjna-tile .lbl { font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-muted); }
.tjna-ticket { font-family: monospace; font-size: .78rem; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: 6px; padding: 6px 8px; word-break: break-all; margin: 4px 0; }

/* ---- Disaggregation table ---- */
.tjna-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.tjna-table th { text-align: left; font-family: var(--font-heading); font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-muted); border-bottom: 2px solid var(--color-border); padding: 8px 10px; }
.tjna-table td { padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
.tjna-table td:first-child { font-family: var(--font-heading); color: var(--color-authority); }
.tjna-bar-cell { width: 40%; }
.tjna-bar { background: var(--color-surface); border-radius: 999px; height: 12px; overflow: hidden; }
.tjna-bar-fill { background: var(--color-accent); height: 100%; border-radius: 999px; min-width: 2px; }

/* ============================================================
   Blazor shell (loader + error UI) — referenced by index.html
   ============================================================ */
.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem; }
.loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--color-primary); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0; font-family: var(--font-heading); color: var(--color-authority); }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

#blazor-error-ui { background: #FDF3F3; color: #7a0000; border-top: 3px solid var(--color-danger); bottom: 0; display: none; left: 0; padding: 0.8rem 1.2rem; position: fixed; width: 100%; z-index: 1000; box-sizing: border-box; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .8rem; }