/* ============================================================
 * Thundera Shell v1 — design tokens + global UX chrome
 *
 * Loaded by every Thundera surface (landing, auth, eam, susurrate,
 * photomemory, …) from https://thundera.eu/shell/v1/shell.css. It
 * provides:
 *
 *   - Design tokens (colors, spacing, radii, shadows, typography)
 *   - Top bar layout + collapsible product menu
 *   - System banner (announcements / maintenance)
 *   - Spinner + toast helpers
 *   - Drop-in form / button / card primitives
 *
 * Only `:root`, `.tdh-*` selectors and a tiny set of `[data-tdh-*]`
 * data-attribute hooks are used here so embedding apps never have
 * their own CSS clobbered. The Shell never injects `body { ... }`
 * rules; only padding-top is added programmatically by shell.js.
 * ============================================================ */

:root {
  /* Brand */
  --tdh-brand-50:  #f5f3ff;
  --tdh-brand-100: #ede9fe;
  --tdh-brand-300: #c4b5fd;
  --tdh-brand-400: #a78bfa;
  --tdh-brand-500: #8b5cf6;
  --tdh-brand-600: #7c3aed;
  --tdh-brand-700: #6d28d9;
  --tdh-accent-400: #f472b6;

  /* Surfaces */
  --tdh-bg-0:    #0a0b0f;
  --tdh-bg-1:    #0f1117;
  --tdh-bg-2:    #141821;
  --tdh-bg-3:    #1a1f2e;
  --tdh-border:  rgba(255,255,255,0.08);
  --tdh-border-strong: rgba(255,255,255,0.16);

  /* Text */
  --tdh-text:        #f5f5f5;
  --tdh-text-muted:  #aab0bc;
  --tdh-text-dim:    #6b7280;

  /* States */
  --tdh-success: #34d399;
  --tdh-warning: #fbbf24;
  --tdh-danger:  #f87171;
  --tdh-info:    #60a5fa;

  /* Radius / spacing */
  --tdh-radius-sm: 6px;
  --tdh-radius-md: 10px;
  --tdh-radius-lg: 14px;
  --tdh-radius-xl: 20px;

  --tdh-pad-1: 6px;
  --tdh-pad-2: 10px;
  --tdh-pad-3: 14px;
  --tdh-pad-4: 18px;
  --tdh-pad-5: 24px;
  --tdh-pad-6: 32px;

  /* Shadows */
  --tdh-shadow-1: 0 4px 12px rgba(0,0,0,.35);
  --tdh-shadow-2: 0 12px 36px rgba(0,0,0,.5);

  /* Layout */
  --tdh-bar-h: 56px;
  --tdh-banner-h: 0px;
  --tdh-z-bar:    9000;
  --tdh-z-banner: 9001;
  --tdh-z-toast:  9100;
  --tdh-z-modal:  9200;
}

[data-tdh-theme="light"] {
  --tdh-bg-0: #fafafa;
  --tdh-bg-1: #ffffff;
  --tdh-bg-2: #f3f4f6;
  --tdh-bg-3: #e5e7eb;
  --tdh-border: rgba(15,17,23,0.08);
  --tdh-border-strong: rgba(15,17,23,0.16);
  --tdh-text: #0f1117;
  --tdh-text-muted: #4b5563;
  --tdh-text-dim: #6b7280;
}

/* ── Reset just inside our own components ── */
.tdh-root, .tdh-root * { box-sizing: border-box; }

/* ── Top bar ── */
.tdh-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--tdh-bar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 var(--tdh-pad-4);
  background: rgba(10,11,15,0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--tdh-border);
  z-index: var(--tdh-z-bar);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--tdh-text);
}

[data-tdh-theme="light"] .tdh-bar {
  background: rgba(255,255,255,0.85);
  border-bottom-color: rgba(15,17,23,0.08);
}

.tdh-bar-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--tdh-text);
  font-weight: 700; letter-spacing: -0.01em;
  font-size: 0.98rem;
}
.tdh-bar-logo img { height: 22px; width: auto; }
.tdh-bar-app {
  font-size: 0.86rem; color: var(--tdh-text-muted);
  margin-left: 2px; padding-left: 12px;
  border-left: 1px solid var(--tdh-border-strong);
}

.tdh-bar-spacer { flex: 1; }

.tdh-bar-actions {
  display: flex; align-items: center; gap: 8px;
}

.tdh-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid transparent;
  border-radius: var(--tdh-radius-md);
  background: transparent; color: var(--tdh-text-muted);
  cursor: pointer; transition: 120ms ease;
}
.tdh-icon-btn:hover {
  color: var(--tdh-text);
  background: var(--tdh-bg-2);
  border-color: var(--tdh-border);
}
.tdh-icon-btn svg { width: 18px; height: 18px; }

.tdh-bar-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--tdh-border-strong);
  cursor: pointer; transition: 120ms ease; object-fit: cover;
  background: var(--tdh-bg-3);
}
.tdh-bar-avatar:hover { transform: scale(1.04); border-color: var(--tdh-brand-400); }

/* ── Dropdowns ── */
.tdh-dropdown {
  position: fixed;
  top: calc(var(--tdh-bar-h) + var(--tdh-banner-h) + 6px);
  right: 12px;
  min-width: 240px; max-width: 360px;
  background: var(--tdh-bg-1);
  border: 1px solid var(--tdh-border);
  border-radius: var(--tdh-radius-lg);
  box-shadow: var(--tdh-shadow-2);
  padding: 10px;
  z-index: var(--tdh-z-bar);
  opacity: 0; transform: translateY(-4px) scale(0.98); pointer-events: none;
  transition: 130ms ease;
  font-family: 'Inter', sans-serif;
  color: var(--tdh-text);
}
.tdh-dropdown[data-open="true"] {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.tdh-dropdown.tdh-apps { right: auto; left: 50%; transform: translateX(-50%) translateY(-4px); width: 360px; }
.tdh-dropdown.tdh-apps[data-open="true"] { transform: translateX(-50%) translateY(0); }

.tdh-dd-section {
  font-size: 0.7rem; font-weight: 700;
  color: var(--tdh-text-dim); text-transform: uppercase;
  padding: 6px 10px; letter-spacing: 0.04em;
}
.tdh-dd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: var(--tdh-radius-md);
  text-decoration: none; color: var(--tdh-text);
  font-size: 0.92rem; cursor: pointer; transition: 120ms ease;
}
.tdh-dd-item:hover { background: var(--tdh-bg-2); }
.tdh-dd-item .tdh-dd-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--tdh-bg-2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.tdh-dd-item .tdh-dd-icon img { width: 22px; height: 22px; object-fit: contain; }
.tdh-dd-item .tdh-dd-meta { display: flex; flex-direction: column; min-width: 0; }
.tdh-dd-item .tdh-dd-title { font-weight: 600; line-height: 1.1; }
.tdh-dd-item .tdh-dd-sub { font-size: 0.78rem; color: var(--tdh-text-muted); }

.tdh-dd-sep {
  height: 1px; background: var(--tdh-border);
  margin: 6px 4px;
}

.tdh-status-pill {
  margin-left: auto; font-size: 0.66rem; font-weight: 700;
  padding: 2px 6px; border-radius: 10px; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tdh-status-pill.tdh-status-maintenance { background: rgba(251,191,36,.15); color: var(--tdh-warning); }
.tdh-status-pill.tdh-status-disabled    { background: rgba(248,113,113,.15); color: var(--tdh-danger);  }

/* ── System banner (announcements + maintenance) ── */
.tdh-banner {
  position: fixed; left: 0; right: 0;
  top: var(--tdh-bar-h);
  padding: 8px 16px;
  background: var(--tdh-bg-2); border-bottom: 1px solid var(--tdh-border);
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem; color: var(--tdh-text);
  display: flex; align-items: center; gap: 10px;
  z-index: var(--tdh-z-banner);
}
.tdh-banner[data-severity="info"]     { background: rgba(96,165,250,.12); border-bottom-color: rgba(96,165,250,.25); }
.tdh-banner[data-severity="success"]  { background: rgba(52,211,153,.12); border-bottom-color: rgba(52,211,153,.25); }
.tdh-banner[data-severity="warning"]  { background: rgba(251,191,36,.12); border-bottom-color: rgba(251,191,36,.25); }
.tdh-banner[data-severity="critical"] { background: rgba(248,113,113,.16); border-bottom-color: rgba(248,113,113,.30); }
.tdh-banner-title { font-weight: 700; }
.tdh-banner-body  { color: var(--tdh-text-muted); }
.tdh-banner-close {
  margin-left: auto; background: transparent; border: 0;
  color: var(--tdh-text-muted); cursor: pointer; font-size: 1.1rem;
}

/* ── Toasts ── */
.tdh-toast-stack {
  position: fixed; right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: var(--tdh-z-toast);
  pointer-events: none;
  font-family: 'Inter', sans-serif;
}
.tdh-toast {
  padding: 10px 14px; border-radius: var(--tdh-radius-md);
  background: var(--tdh-bg-1); border: 1px solid var(--tdh-border);
  color: var(--tdh-text); font-size: 0.88rem;
  box-shadow: var(--tdh-shadow-1);
  pointer-events: auto;
  animation: tdh-toast-in 220ms ease;
}
.tdh-toast[data-kind="success"] { border-color: rgba(52,211,153,.45); }
.tdh-toast[data-kind="error"]   { border-color: rgba(248,113,113,.45); }
.tdh-toast[data-kind="warning"] { border-color: rgba(251,191,36,.45); }
@keyframes tdh-toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Buttons (drop-in primitives) ── */
.tdh-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--tdh-radius-md);
  font-size: 0.88rem; font-weight: 600;
  background: var(--tdh-bg-2); color: var(--tdh-text);
  border: 1px solid var(--tdh-border-strong);
  cursor: pointer; transition: 120ms ease;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
}
.tdh-btn:hover { background: var(--tdh-bg-3); }
.tdh-btn-primary {
  background: linear-gradient(180deg, var(--tdh-brand-500), var(--tdh-brand-600));
  border-color: var(--tdh-brand-700);
}
.tdh-btn-primary:hover { filter: brightness(1.07); }
.tdh-btn-danger { background: linear-gradient(180deg, #ef4444, #b91c1c); border-color: #7f1d1d; }
.tdh-btn-ghost  { background: transparent; }
.tdh-btn-icon   { width: 36px; padding: 0; justify-content: center; }
.tdh-btn-sm     { font-size: 0.78rem; padding: 5px 10px; }
.tdh-btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ── Cards ── */
.tdh-card {
  background: var(--tdh-bg-1);
  border: 1px solid var(--tdh-border);
  border-radius: var(--tdh-radius-lg);
  padding: var(--tdh-pad-5);
  color: var(--tdh-text);
  box-shadow: var(--tdh-shadow-1);
}

/* ── Inputs ── */
.tdh-input, .tdh-select, .tdh-textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--tdh-bg-2);
  border: 1px solid var(--tdh-border-strong);
  border-radius: var(--tdh-radius-md);
  color: var(--tdh-text); font-size: 0.92rem;
  font-family: 'Inter', sans-serif;
  transition: 100ms ease;
}
.tdh-input:focus, .tdh-select:focus, .tdh-textarea:focus {
  outline: none;
  border-color: var(--tdh-brand-500);
  box-shadow: 0 0 0 3px rgba(139,92,246,.2);
}

/* ── Spinner ── */
.tdh-spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: tdh-spin .8s linear infinite;
}
@keyframes tdh-spin { to { transform: rotate(360deg); } }

/* ── Skeleton ── */
.tdh-skeleton {
  background: linear-gradient(90deg, var(--tdh-bg-2) 0%, var(--tdh-bg-3) 50%, var(--tdh-bg-2) 100%);
  background-size: 200% 100%;
  animation: tdh-shimmer 1.4s linear infinite;
  border-radius: var(--tdh-radius-sm);
}
@keyframes tdh-shimmer { from { background-position: 0 0; } to { background-position: -200% 0; } }

/* ── Body padding when bar is active ── */
body.tdh-shell-active { padding-top: var(--tdh-bar-h); transition: padding-top 120ms ease; }
body.tdh-shell-active.tdh-banner-active { padding-top: calc(var(--tdh-bar-h) + var(--tdh-banner-h, 44px)); }

/* ── Mobile ── */
@media (max-width: 640px) {
  .tdh-bar { padding: 0 12px; gap: 8px; }
  .tdh-bar-app { display: none; }
  .tdh-dropdown { left: 8px !important; right: 8px !important; transform: none !important; max-width: none; }
  .tdh-dropdown.tdh-apps { width: auto; }
}