/* Fx2Owl.UI — Design Tokens */
:root {
  --bg:            #1a1d23;
  --surface:       #22262f;
  --surface-2:     #2b3040;
  --orange:        #f07b20;
  --orange-dim:    #c4611a;
  --text:          #e8eaf0;
  --text-muted:    #7a8099;
  --radius:        12px;
  --area-gap:      0.75rem;
  --footer-height: 3.5rem;
  --color-success: #4ade80;
  --color-error:   #f87171;
  --color-warning: #facc15;

  /* Secondary "selected/on" accent for toggle-style controls (view filters, day pickers, inline
     settings toggles) where the primary orange is reserved for the tile's one primary action.
     Matches the activity-bar blue (Fx2ActivityBars' --ab-active) so the two vocabularies agree;
     -dim is the resting "on" fill, the full brightness is used for borders/hover. */
  --accent-blue:     #3b82f6;
  --accent-blue-dim: #2955a3;
}

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

body {
  background: radial-gradient(ellipse at 100% 0%, #2e2010 0%, var(--bg) 55%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font-family: system-ui, sans-serif;
  font-size: 14px;
}

/* Blazor's <FocusOnNavigate Selector="h1" /> (Fx2Owl/Components/Routes.razor) programmatically
   focuses the page's first <h1> after every navigation, for screen-reader accessibility. Without
   this reset the browser draws its default focus outline around that h1 for a moment on load -
   visible as a boxed/highlighted flash around the heading text (e.g. Home.razor's hero-hello). */
h1:focus { outline: none; }

/* Utility */
.label        { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: .35rem; }
.value-lg     { font-size: 2rem; font-weight: 700; color: var(--orange); line-height: 1; }
.value-md     { font-size: 1.3rem; font-weight: 600; color: var(--text); }
.tag          { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; background: rgba(240,123,32,.15); color: var(--orange); }
.muted        { color: var(--text-muted); }
.row          { display: flex; align-items: center; gap: .5rem; }
.col          { display: flex; flex-direction: column; }
.spacer       { flex: 1; }
.divider      { width: 100%; height: 1px; background: rgba(255,255,255,.06); margin: .75rem 0; }
.btn-section-label { font-size: 11px; color: var(--text-muted); margin-top: 1rem; margin-bottom: .1rem; text-transform: uppercase; letter-spacing: .07em; }
.footer-item        { display: flex; align-items: center; gap: .4rem; }
.footer-dot         { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.footer-link        { color: var(--text-muted); text-decoration: none; transition: color .15s ease; }
.footer-link:hover  { color: var(--orange); }

.data-table         { width: 100%; border-collapse: collapse; }
.data-table th      { padding: .5rem .5rem; text-align: left; white-space: nowrap; }
.data-table td      { padding: .5rem .5rem; font-size: 13px; white-space: nowrap; }
.data-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.06); }
.data-table th:first-child, .data-table td:first-child  { padding-left: 0; }
.data-table th:last-child, .data-table td:last-child    { padding-right: 0; }

/* Global (non-scoped) wrapper for any table whose content can exceed its card's width - every
   .data-table cell is nowrap, so a narrow card must scroll the overflow horizontally instead of
   letting the browser squeeze columns down to unreadable widths. Global rather than per-component
   scoped CSS because scoped rules only apply within their own component's render tree - a
   .table-scroll div rendered from a different .razor file wouldn't pick up a scoped rule at all.
   Usage: wrap every <table class="data-table ..."> in a plain <div class="table-scroll">. */
.table-scroll {
    overflow-x: auto;
    /* Thin, theme-matched scrollbar instead of the OS default chunky bar. */
    scrollbar-width: thin;                         /* Firefox */
    scrollbar-color: var(--surface-2) transparent; /* Firefox: thumb / track */
}

.table-scroll::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.table-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.table-scroll::-webkit-scrollbar-thumb {
    background: var(--surface-2);
    border-radius: 99px;
}

.table-scroll:hover::-webkit-scrollbar-thumb {
    background: #3a4152;
}

.table-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--orange-dim);
}

/* Global (non-scoped) equivalent of Fx2AppButton.razor.css, for plain <button>/<a> markup on
   static SSR Account pages where a real form-post/native anchor is needed instead of an
   EventCallback-driven Fx2AppButton (which has no live circuit to bind to there). Keep
   visually in sync with that file if the design changes. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--surface-2);
  color: var(--text);
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}
.btn:hover:not(:disabled) { background: #333849; border-color: rgba(255,255,255,.2); }
.btn--primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--orange-dim); border-color: var(--orange-dim); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text); }
.btn--ghost:hover:not(:disabled) { background: rgba(255,255,255,.06); }
.btn--outline { background: transparent; border-color: rgba(255,255,255,.2); color: var(--text); }
.btn--outline:hover:not(:disabled) { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.35); }
.btn--sm { padding: .3rem .75rem; font-size: 11px; border-radius: 4px; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn--block { display: flex; width: 100%; }

.input {
  width: 100%;
  padding: .55rem .75rem;
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--bg);
  color: var(--text);
  transition: border-color .15s;
}
.input:focus { outline: none; border-color: var(--orange); }
.input::placeholder { color: var(--text-muted); }
textarea.input { resize: vertical; min-height: 90px; font-family: inherit; line-height: 1.5; }

.form-group { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field-message { font-size: 12px; color: var(--color-error); }

.alert {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .9rem;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}
.alert--success { background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.3); color: var(--color-success); }
.alert--error   { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.3); color: var(--color-error); }
.alert--warning { background: rgba(250,204,21,.12); border-color: rgba(250,204,21,.3); color: var(--color-warning); }
.alert--info    { background: rgba(240,123,32,.12); border-color: rgba(240,123,32,.3); color: var(--orange); }