/* ==========================================================
   TECHRIDER BASE STYLES
   Loaded by every page before its own stylesheet.

   1. Colour, spacing and shape tokens (use these in page CSS)
   2. Reset, focus outlines, reduced motion
   3. Shared components from js/ui.js: toasts, dialogs,
      loading placeholders, empty states, stars, avatars
========================================================== */

/* ---------------------------------------------------------- 1. tokens */
:root {
  /* brand purples, darkest to lightest */
  --tr-primary-900: #240046;
  --tr-primary-700: #5a189a;
  --tr-primary-500: #9d4edd;
  --tr-primary-400: #c77dff;
  --tr-primary-200: #e0aaff;
  --tr-primary-100: #f3e8ff;
  --tr-primary-50:  #faf7ff;

  /* text */
  --tr-text: #333;
  --tr-text-muted: #666;
  --tr-text-soft: #888;

  /* surfaces and lines */
  --tr-surface: #fff;
  --tr-surface-2: #f6f6f6;
  --tr-border: #e5e5e5;

  /* status colours: strong + soft background */
  --tr-success: #16a34a;
  --tr-success-bg: #dcfce7;
  --tr-warning: #b45309;
  --tr-warning-bg: #fef3c7;
  --tr-danger: #dc2626;
  --tr-danger-bg: #fee2e2;
  --tr-info: #2563eb;
  --tr-info-bg: #dbeafe;
  --tr-star: #f59e0b;

  /* shape */
  --tr-radius-sm: 8px;
  --tr-radius: 12px;
  --tr-radius-lg: 18px;
  --tr-shadow: 0 6px 20px rgba(36, 0, 70, .10);
  --tr-shadow-lg: 0 18px 50px rgba(36, 0, 70, .22);

  /* spacing scale */
  --tr-space-1: 4px;
  --tr-space-2: 8px;
  --tr-space-3: 12px;
  --tr-space-4: 16px;
  --tr-space-5: 24px;
  --tr-space-6: 32px;

  --tr-focus: 0 0 0 3px rgba(157, 78, 221, .45);

  /* text roles that flip in dark mode */
  --tr-heading: var(--tr-primary-900);   /* titles and strong text */
  --tr-link: var(--tr-primary-700);      /* purple text: links, ghost buttons */
  --tr-success-text: #166534;
  --tr-danger-text: #991b1b;

  color-scheme: light;
}

/* ---------------------------------------------------------- 1b. dark mode
   js/theme.js sets <html data-theme="dark"> from the saved choice
   (Light, Dark, or Device = follow the phone/computer setting).
   Brand purples used as backgrounds (sidebars, buttons) stay the same;
   surfaces, text, borders and soft tints change. */
html[data-theme="dark"] {
  --tr-primary-100: #2c2040;
  --tr-primary-50:  #1d1629;

  --tr-text: #ece7f3;
  --tr-text-muted: #b8aec6;
  --tr-text-soft: #8c829b;

  --tr-surface: #1a1424;
  --tr-surface-2: #110d18;
  --tr-border: #33293f;

  --tr-heading: #ecdcff;
  --tr-link: #d4a6ff;

  --tr-success: #22c55e;
  --tr-success-bg: rgba(34, 197, 94, .14);
  --tr-success-text: #86efac;
  --tr-warning: #fbbf24;
  --tr-warning-bg: rgba(251, 191, 36, .13);
  --tr-danger: #e5484d;
  --tr-danger-bg: rgba(248, 113, 113, .14);
  --tr-danger-text: #fca5a5;
  --tr-info: #60a5fa;
  --tr-info-bg: rgba(96, 165, 250, .14);

  --tr-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  --tr-shadow-lg: 0 18px 50px rgba(0, 0, 0, .55);

  color-scheme: dark;
}

html[data-theme="dark"] body { background-color: var(--tr-surface-2); color: var(--tr-text); }

/* form fields and tables that relied on browser defaults */
html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  background-color: var(--tr-surface);
  color: var(--tr-text);
  border-color: var(--tr-border);
}
html[data-theme="dark"] ::placeholder { color: var(--tr-text-soft); opacity: 1; }
html[data-theme="dark"] :is(th, td) { border-color: var(--tr-border); }
html[data-theme="dark"] :is(hr) { border-color: var(--tr-border); }
html[data-theme="dark"] img:not(.tr-avatar-img) { filter: brightness(.92); }

/* smooth switch between themes (not on first paint) */
html.tr-theme-anim, html.tr-theme-anim * { transition: background-color .25s ease, color .25s ease, border-color .25s ease !important; }

/* ---------------------------------------------------------- 2. reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

/* Visible focus for keyboard users (mouse clicks don't show it) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--tr-primary-500);
  outline-offset: 2px;
  box-shadow: var(--tr-focus);
}

img { max-width: 100%; }

.tr-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Page fade-in used by most pages (some pages override it) */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------- 3a. toasts */
.tr-toasts {
  position: fixed;
  z-index: 100000;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.tr-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  border-radius: var(--tr-radius);
  background: var(--tr-surface);
  color: var(--tr-text);
  box-shadow: var(--tr-shadow-lg);
  border-left: 5px solid var(--tr-info);
  font-size: .9rem;
  line-height: 1.45;
  animation: trToastIn .22s ease-out;
}
.tr-toast.leaving { animation: trToastOut .18s ease-in forwards; }
.tr-toast .tr-toast-icon { font-size: 1.1rem; margin-top: 1px; color: var(--tr-info); }
.tr-toast .tr-toast-text { flex: 1; white-space: pre-line; word-break: break-word; }
.tr-toast .tr-toast-close {
  border: 0; background: none; color: var(--tr-text-soft);
  cursor: pointer; font-size: 1rem; padding: 2px 4px; border-radius: 6px;
}
.tr-toast.success { border-left-color: var(--tr-success); }
.tr-toast.success .tr-toast-icon { color: var(--tr-success); }
.tr-toast.error { border-left-color: var(--tr-danger); }
.tr-toast.error .tr-toast-icon { color: var(--tr-danger); }
.tr-toast.warning { border-left-color: var(--tr-star); }
.tr-toast.warning .tr-toast-icon { color: var(--tr-warning); }

@keyframes trToastIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes trToastOut { to { opacity: 0; transform: translateX(20px); } }

@media (max-width: 600px) {
  .tr-toasts { top: auto; bottom: 16px; left: 16px; right: 16px; width: auto; }
}

/* ---------------------------------------------------------- 3b. dialogs */
.tr-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(20, 0, 40, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: trFade .15s ease-out;
}
.tr-dialog {
  width: min(460px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--tr-surface);
  border-radius: var(--tr-radius-lg);
  box-shadow: var(--tr-shadow-lg);
  padding: 22px;
  animation: trPop .18s ease-out;
}
.tr-dialog h2 {
  font-size: 1.1rem;
  color: var(--tr-heading);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tr-dialog h2 i { color: var(--tr-primary-500); }
.tr-dialog.danger h2 i { color: var(--tr-danger); }
.tr-dialog p { color: var(--tr-text-muted); font-size: .92rem; line-height: 1.55; white-space: pre-line; }
.tr-dialog label { display: block; font-size: .85rem; font-weight: 600; color: var(--tr-text); margin: 14px 0 6px; }
.tr-dialog input,
.tr-dialog textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--tr-border);
  border-radius: var(--tr-radius-sm);
  font-size: .92rem;
  background: var(--tr-surface);
  color: var(--tr-text);
}
.tr-dialog textarea { min-height: 96px; resize: vertical; }
.tr-dialog .tr-dialog-error { color: var(--tr-danger); font-size: .82rem; margin-top: 6px; min-height: 1em; }
.tr-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

.tr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--tr-radius-sm);
  padding: 10px 18px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.tr-btn:active { transform: translateY(1px); }
.tr-btn:disabled { opacity: .6; cursor: not-allowed; }
.tr-btn-primary { background: var(--tr-primary-700); color: #fff; }
.tr-btn-primary:hover { background: var(--tr-primary-900); }
.tr-btn-danger { background: var(--tr-danger); color: #fff; }
.tr-btn-danger:hover { background: #b91c1c; }
.tr-btn-ghost { background: var(--tr-surface); color: var(--tr-link); border-color: var(--tr-border); }
.tr-btn-ghost:hover { background: var(--tr-primary-50); }
.tr-btn-sm { padding: 7px 12px; font-size: .82rem; }

@keyframes trFade { from { opacity: 0; } }
@keyframes trPop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------------------------------------------------------- 3c. loading + empty */
.tr-skeleton-list { display: grid; gap: 14px; }
.tr-skeleton-card {
  background: var(--tr-surface);
  border-radius: var(--tr-radius);
  padding: 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
.tr-skel {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eee 0%, #f7f7f7 40%, #eee 80%);
  background-size: 300% 100%;
  animation: trShimmer 1.3s linear infinite;
  margin-top: 10px;
}
.tr-skel:first-child { margin-top: 0; height: 16px; width: 45%; }
.tr-skel.w80 { width: 80%; }
.tr-skel.w60 { width: 60%; }
.tr-skel.w30 { width: 30%; }
@keyframes trShimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

.tr-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--tr-text-muted);
}
.tr-empty .tr-empty-icon {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--tr-primary-100);
  color: var(--tr-link);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.tr-empty h3 { color: var(--tr-heading); font-size: 1.05rem; margin-bottom: 6px; }
.tr-empty p { font-size: .9rem; max-width: 380px; margin: 0 auto; line-height: 1.5; }
.tr-empty .tr-btn { margin-top: 16px; }

/* ---------------------------------------------------------- 3d. stars, avatars, badges */
.tr-stars { color: var(--tr-star); white-space: nowrap; font-size: .85rem; }
.tr-stars .muted { color: #d6d3d1; }
.tr-rating-text { font-size: .82rem; color: var(--tr-text-muted); }

.tr-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.tr-has-photo { padding: 0 !important; overflow: hidden; background: var(--tr-primary-100) !important; }

.tr-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 600;
  background: var(--tr-primary-100); color: var(--tr-link);
}

.tr-test-banner {
  background: var(--tr-warning-bg);
  color: var(--tr-warning);
  border: 1px solid #fcd34d;
  border-radius: var(--tr-radius);
  padding: 10px 14px;
  font-size: .85rem;
  font-weight: 500;
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 14px;
}

/* ---------------------------------------------------------- 3e. job messages (js/chat.js) */
.tr-chat-backdrop {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(20, 0, 40, .45);
  display: flex; justify-content: flex-end;
  animation: trFade .15s ease-out;
}
.tr-chat {
  width: min(420px, 100%);
  height: 100%;
  background: var(--tr-surface);
  display: flex; flex-direction: column;
  box-shadow: var(--tr-shadow-lg);
  animation: trSlideIn .2s ease-out;
}
@keyframes trSlideIn { from { transform: translateX(30px); opacity: 0; } }
.tr-chat-head {
  padding: 16px 18px;
  background: var(--tr-primary-900);
  color: #fff;
  display: flex; align-items: center; gap: 12px;
}
.tr-chat-head h2 { font-size: 1rem; flex: 1; }
.tr-chat-head small { display: block; font-weight: 400; opacity: .8; font-size: .78rem; }
.tr-chat-head button { background: rgba(255,255,255,.12); color: #fff; border: 0; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.tr-chat-tabs { display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; background: var(--tr-surface); border-bottom: 1px solid var(--tr-border); }
.tr-chat-tabs[hidden] { display: none; }
.tr-chat-tab {
  position: relative; flex-shrink: 0; text-align: left; cursor: pointer;
  padding: 7px 12px; border-radius: 10px; border: 1px solid var(--tr-border);
  background: var(--tr-surface); color: var(--tr-text); max-width: 170px;
}
.tr-chat-tab.active { border-color: var(--tr-primary-500); background: var(--tr-primary-100); }
.tr-chat-tab-role { display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tr-link); }
.tr-chat-tab-name { display: block; font-size: .82rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-chat-note { font-size: .76rem; color: var(--tr-warning); background: var(--tr-warning-bg); padding: 8px 14px; }
.tr-chat-list { flex: 1; overflow-y: auto; padding: 16px; background: var(--tr-primary-50); display: flex; flex-direction: column; gap: 10px; }
.tr-msg { max-width: 82%; align-self: flex-start; }
.tr-msg.mine { align-self: flex-end; }
.tr-msg .tr-msg-who { font-size: .72rem; color: var(--tr-text-soft); margin: 0 4px 3px; }
.tr-msg.mine .tr-msg-who { text-align: right; }
.tr-msg .tr-msg-body {
  background: var(--tr-surface);
  border: 1px solid var(--tr-border);
  border-radius: 14px 14px 14px 4px;
  padding: 9px 12px;
  font-size: .88rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--tr-text);
}
.tr-msg.mine .tr-msg-body { background: var(--tr-primary-700); color: #fff; border-color: transparent; border-radius: 14px 14px 4px 14px; }
.tr-msg.admin .tr-msg-body { border-color: var(--tr-primary-200); background: var(--tr-primary-100); }
.tr-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--tr-border); background: var(--tr-surface); }
.tr-chat-form textarea {
  flex: 1; resize: none; height: 44px; max-height: 120px;
  padding: 11px 12px; border: 1px solid var(--tr-border); border-radius: 22px; font-size: .9rem;
}
.tr-chat-form button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--tr-primary-700); color: #fff; cursor: pointer; flex-shrink: 0; }
.tr-chat-form button:disabled { opacity: .5; }

.tr-chat-btn { position: relative; }
.tr-chat-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--tr-danger); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}

/* ---------------------------------------------------------- 3f. handover code */
.tr-handover {
  display: flex; align-items: center; gap: 14px;
  background: var(--tr-primary-100);
  border: 1px dashed var(--tr-primary-500);
  border-radius: var(--tr-radius);
  padding: 12px 14px;
  margin-top: 12px;
}
.tr-handover .code { font-size: 1.5rem; font-weight: 700; letter-spacing: .3em; color: var(--tr-heading); font-variant-numeric: tabular-nums; }
.tr-handover p { font-size: .8rem; color: var(--tr-text-muted); line-height: 1.4; }

/* rider pickup check (TR.pickupCheck) */
.tr-pickup-check {
  margin-top: 12px; padding: 14px; border-radius: var(--tr-radius);
  border: 1.5px solid var(--tr-warning); background: var(--tr-warning-bg);
}
.tr-pickup-check.ok { border-color: var(--tr-success); background: var(--tr-success-bg); }
.tr-pickup-check.locked { display: flex; gap: 12px; align-items: flex-start; border-color: var(--tr-danger); background: var(--tr-danger-bg); }
.tr-pickup-check.locked > i { color: var(--tr-danger); font-size: 1.2rem; margin-top: 2px; }
.tr-pickup-check strong { color: var(--tr-heading); font-size: .92rem; display: inline-flex; gap: 8px; align-items: center; }
.tr-pickup-check.ok strong i { color: var(--tr-success); }
.tr-pickup-check p { font-size: .82rem; color: var(--tr-text-muted); line-height: 1.5; margin-top: 4px; }
.tr-pc-row { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.tr-pc-row input {
  width: 130px; height: 46px; text-align: center; font-size: 1.4rem; font-weight: 700; letter-spacing: .35em;
  border: 1.5px solid var(--tr-border); border-radius: 12px; background: var(--tr-surface); color: var(--tr-text);
  font-variant-numeric: tabular-nums;
}
.tr-pc-row input:focus { outline: none; border-color: var(--tr-primary-500); box-shadow: var(--tr-focus); }
.tr-pc-error { color: var(--tr-danger-text, var(--tr-danger)); font-size: .82rem; margin-top: 6px; min-height: 1em; }

/* ---------------------------------------------------------- 3g. rating box */
.tr-rate-row { border: 0; margin-top: 14px; }
.tr-rate-row legend { font-size: .88rem; font-weight: 600; color: var(--tr-text); margin-bottom: 4px; }
.tr-rate-stars { display: flex; align-items: center; gap: 2px; }
.tr-rate-stars button { background: none; border: 0; font-size: 1.6rem; color: var(--tr-star); cursor: pointer; padding: 2px 3px; border-radius: 6px; }
.tr-rate-word { margin-left: 8px; font-size: .85rem; color: var(--tr-text-muted); font-weight: 500; }

/* page styles for old empty states must not resize the shared icon */
.tr-empty .tr-empty-icon i { font-size: inherit !important; margin: 0 !important; color: inherit !important; }
.tr-empty h3 { margin-top: 0 !important; }

/* ---------------------------------------------------------- 3h. action menus (js/ui.js) */
.tr-menu { position: relative; display: inline-block; }
.tr-menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 9px;
  border: 1px solid var(--tr-border); background: var(--tr-surface);
  color: var(--tr-link); font-size: .82rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; position: relative;
}
.tr-menu-btn:hover, .tr-menu.open .tr-menu-btn { border-color: var(--tr-primary-400); background: var(--tr-primary-50); }
.tr-menu-btn .chev { font-size: .7rem; transition: transform .15s; }
.tr-menu.open .tr-menu-btn .chev { transform: rotate(180deg); }
/* a dot when something on this job needs you (a quote to send, unread messages) */
.tr-menu.needs .tr-menu-btn::after,
.tr-menu:has(.tr-chat-count) .tr-menu-btn::after {
  content: ""; position: absolute; top: -4px; right: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tr-danger); border: 2px solid var(--tr-surface);
}
.tr-menu-list {
  z-index: 100002;
  background: var(--tr-surface);
  border: 1px solid var(--tr-border);
  border-radius: 12px;
  box-shadow: var(--tr-shadow-lg);
  padding: 6px;
  display: flex; flex-direction: column;
  animation: trPop .12s ease-out;
}
.tr-menu-list[hidden] { display: none; }
.tr-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--tr-text);
  font-size: .85rem; font-weight: 500; text-align: left; cursor: pointer;
  position: relative; white-space: nowrap;
}
.tr-menu-item i { width: 16px; text-align: center; color: var(--tr-primary-500); }
.tr-menu-item:hover, .tr-menu-item:focus-visible { background: var(--tr-primary-50); outline: none; box-shadow: none; }
.tr-menu-item.primary { color: var(--tr-link); font-weight: 600; }
.tr-menu-item.danger { color: var(--tr-danger); }
.tr-menu-item.danger i { color: var(--tr-danger); }
.tr-menu-item.danger:hover { background: var(--tr-danger-bg); }
.tr-menu-item:disabled { color: var(--tr-text-soft); cursor: default; background: transparent; }
.tr-menu-item .tr-chat-count { position: static; margin-left: auto; }
.tr-menu-sep { height: 1px; background: var(--tr-border); margin: 4px 6px; }

/* ---------------------------------------------------------- 3i. sidebar badges (js/badges.js) */
.tr-has-badge { position: relative; }
.tr-nav-badge {
  margin-left: auto;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--tr-danger); color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
  flex-shrink: 0;
}
.tr-nav-badge.pop { animation: trBadgePop .35s ease-out; }
@keyframes trBadgePop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
/* admin sidebar folded to icons: the badge sits on the icon's corner */
.sidebar.collapsed .tr-nav-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; line-height: 16px; font-size: .6rem; padding: 0 4px; }

/* ---------------------------------------------------------- 3j. page fade-in + scroll reveals (js/ui.js) */
/* Opacity only, and nothing kept after it ends: a transform left on <body>
   would make fixed elements (sidebars, toasts, dialogs) scroll with the page. */
@keyframes trPageIn { from { opacity: 0; } to { opacity: 1; } }
html.tr-motion body.tr-page-in { animation: trPageIn .4s ease-out backwards; }

/* Sidebars stay pinned to the window and scroll on their own when they're
   taller than the screen */
.sidebar { top: 0; overscroll-behavior: contain; }
html.tr-motion .tr-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease-out, transform .55s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--tr-delay, 0ms);
}
html.tr-motion .tr-reveal.tr-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------- 3k. dark mode touch-ups */
html[data-theme="dark"] .tr-skel { background: linear-gradient(90deg, #2a2236 0%, #362c45 40%, #2a2236 80%); background-size: 300% 100%; }
html[data-theme="dark"] .tr-skeleton-card,
html[data-theme="dark"] .tr-dialog,
html[data-theme="dark"] .tr-toast,
html[data-theme="dark"] .tr-menu-list { border: 1px solid var(--tr-border); }
html[data-theme="dark"] .tr-test-banner { border-color: rgba(251, 191, 36, .35); }
html[data-theme="dark"] .tr-dialog-backdrop,
html[data-theme="dark"] .tr-chat-backdrop { background: rgba(0, 0, 0, .65); }

/* ---------------------------------------------------------- 3l. theme picker (js/theme.js) */
.tr-theme-choice {
  display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 4px; border-radius: 12px;
  background: var(--tr-surface-2); border: 1px solid var(--tr-border);
}
.tr-theme-choice button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border: 0; border-radius: 9px; background: transparent;
  color: var(--tr-text-muted); font-size: .84rem; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.tr-theme-choice button[aria-pressed="true"] { background: var(--tr-surface); color: var(--tr-link); font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.tr-theme-card {
  margin-top: 20px; padding: 18px 20px; border-radius: 16px;
  background: var(--tr-surface); border: 1px solid var(--tr-border);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.tr-theme-card h3 { font-size: 1rem; color: var(--tr-heading); }
.tr-theme-card p { font-size: .82rem; color: var(--tr-text-muted); margin-top: 2px; }
.tr-theme-toggle {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--tr-border); background: var(--tr-surface);
  color: var(--tr-link); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: .95rem;
}
.tr-theme-toggle:hover { border-color: var(--tr-primary-400); }
.tr-theme-floating { position: fixed; top: 14px; right: 14px; z-index: 50; }
.tr-theme-link { cursor: pointer; }
/* red counters keep a strong red so white numbers stay readable */
html[data-theme="dark"] :is(.tr-nav-badge, .tr-chat-count, .notificationBadge, #notificationBadge, .inboxCount, .badge-count) { background: #dc2626; color: #fff; }
html[data-theme="dark"] .btn.deleteBtn, html[data-theme="dark"] .badge.pending { background: #b91c1c; color: #fff; }
html[data-theme="dark"] .badge.pending { background: #4b5563; }

/* TechRider logo mark inside the brand squares */
.brand-icon img, .logo img:not(.tr-avatar-img) { width: 74%; height: 74%; object-fit: contain; display: block; }

/* "Remove photo" on the profile pages */
.tr-remove-photo {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 10px; padding: 7px 12px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 600;
  background: transparent; color: var(--tr-danger-text, var(--tr-danger));
  border: 1px solid var(--tr-border);
}
.tr-remove-photo:hover { background: var(--tr-danger-bg); border-color: var(--tr-danger); }
.tr-remove-photo[hidden] { display: none; }