/* Mr Barber Theme Tokens — design tokens & theming system (App Shell phase 1.2).
 * Used for: every new theme screen. Variants: light (default) + dark via [data-theme="dark"].
 * Rule: no raw hex values in new theme files — use these tokens only.
 * Palette: the client-approved color system (shadcn-style), authored in OKLCH and
 * converted to sRGB hex here. Brand colors stay overridable per client via the
 * inline vars injected by the router (theme_primary_color / theme_accent_color). */

:root {
  /* Brand colors — per-client customization (injected inline on the wrapper).
   * accent = primary green (buttons/links/active states); primary = dark ink. */
  --mrb-brand-primary: #030306;
  --mrb-brand-accent: #738e00;
  --mrb-brand-text-on-primary: #f8f8f8;
  --mrb-brand-text-on-accent: #f8f8f8;
  /* Logo tint — the inline brand logo fills use currentColor so the owner can
   * recolor the mark per client (defaults to the accent green). */
  --mrb-logo-color: #738e00;

  /* Neutral palette (light theme) */
  --mrb-bg: #f8f8f8;
  --mrb-surface: #f1f1f5;
  --mrb-surface-2: #e4e4eb;
  --mrb-surface-hover: #e4e4eb;
  --mrb-border: #d7d7de;
  --mrb-border-strong: #bdbdc5;
  --mrb-border-faint: color-mix(in srgb, var(--mrb-border) 40%, transparent);
  --mrb-text-primary: #030306;
  --mrb-text-secondary: #55555b;
  --mrb-text-muted: #55555b;
  --mrb-text-faint: #797981;

  /* Status colors (same meanings as backend) */
  --mrb-status-confirmed: #1c8742;
  --mrb-status-pending: #ed9e2f;
  --mrb-status-cancelled: #cc243d;
  --mrb-status-completed: #127eee;
  --mrb-status-confirmed-bg: rgba(28, 135, 66, 0.12);
  --mrb-status-pending-bg: rgba(237, 158, 47, 0.16);
  --mrb-status-cancelled-bg: rgba(204, 36, 61, 0.12);
  --mrb-status-completed-bg: rgba(18, 126, 238, 0.12);

  /* Brand hues for the social icon set (mrb-icon--social-{slug}).
     Light mode defaults: Snapchat cyan-yellow is swapped for a deeper tone
     that stays readable on the light surfaces; TikTok/X stay black on light.
     Dark mode overrides the two black-invisible brands (TikTok, X) to light
     and restores Snapchat's bright yellow. */
  --mrb-brand-instagram: #ff0069;
  --mrb-brand-facebook: #0866ff;
  --mrb-brand-tiktok: #000000;
  --mrb-brand-whatsapp: #25d366;
  --mrb-brand-snapchat: #a99400;
  --mrb-brand-x: #000000;
  --mrb-brand-youtube: #ff0000;

  /* Feedback colors */
  --mrb-success: #1c8742;
  --mrb-warning: #ed9e2f;
  --mrb-danger: #cc243d;
  --mrb-info: #127eee;
  --mrb-success-bg: rgba(28, 135, 66, 0.12);
  --mrb-warning-bg: rgba(237, 158, 47, 0.16);
  --mrb-danger-bg: rgba(204, 36, 61, 0.12);
  --mrb-info-bg: rgba(18, 126, 238, 0.12);

  /* Shadows */
  --mrb-shadow-sm: 0 1px 2px rgba(3, 3, 6, 0.06);
  --mrb-shadow-md: 0 4px 12px rgba(3, 3, 6, 0.1);
  --mrb-shadow-lg: 0 12px 32px rgba(3, 3, 6, 0.16);
  --mrb-overlay: rgba(3, 3, 6, 0.5);

  /* Spacing & shape */
  --mrb-radius: 10px;
  --mrb-radius-sm: 8px;
  --mrb-radius-pill: 999px;
  --mrb-gap: 16px;
  --mrb-gap-sm: 8px;
  --mrb-gap-lg: 24px;

  /* Layout metrics */
  --mrb-sidebar-width: 260px;
  --mrb-sidebar-width-collapsed: 72px;
  --mrb-settings-sidebar-width: 220px;
  --mrb-header-height: 64px;
  --mrb-mobile-nav-height: 64px;

  /* Typography — Raleway (EN display/body), Qatar2022Arabic (AR display),
   * JetBrains Mono (numbers/code). All self-hosted in assets/fonts/. */
  --mrb-font-family: 'Raleway', 'Qatar2022Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mrb-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mrb-font-size-xs: 0.75rem;
  --mrb-font-size-sm: 0.875rem;
  --mrb-font-size-md: 1rem;
  --mrb-font-size-lg: 1.125rem;
  --mrb-font-size-xl: 1.375rem;
  --mrb-font-size-2xl: 1.75rem;
  --mrb-font-weight-normal: 400;
  --mrb-font-weight-medium: 500;
  --mrb-font-weight-semibold: 600;
  --mrb-font-weight-bold: 700;

  /* Motion */
  --mrb-transition-fast: 120ms ease;
  --mrb-transition: 200ms ease;
  --mrb-transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark theme — toggled via data-theme="dark" on <html> or the shell wrapper. */
[data-theme="dark"] {
  --mrb-brand-primary: #f8f8f8;
  --mrb-brand-accent: #c8e928;
  --mrb-brand-text-on-primary: #030306;
  --mrb-brand-text-on-accent: #030306;
  --mrb-logo-color: #c8e928;

  --mrb-bg: #18181f;
  --mrb-surface: #16161c;
  --mrb-surface-2: #15151f;
  --mrb-surface-hover: #21202b;
  /* Border lifted from #21202b (nearly identical to --mrb-bg #030306) to a
     visibly lighter step so form inputs stay findable in dark mode
     (user report 2026-09-06: input boxes invisible). */
  --mrb-border: #3a3947;
  --mrb-border-strong: #4a4958;
  --mrb-border-faint: color-mix(in srgb, var(--mrb-border) 40%, transparent);
  --mrb-text-primary: #f8f8f8;
  --mrb-text-secondary: #7f7f86;
  --mrb-text-muted: #7f7f86;
  --mrb-text-faint: #55555b;

  --mrb-status-confirmed-bg: rgba(28, 135, 66, 0.18);
  --mrb-status-pending-bg: rgba(237, 158, 47, 0.18);
  --mrb-status-cancelled-bg: rgba(204, 36, 61, 0.18);
  --mrb-status-completed-bg: rgba(18, 126, 238, 0.18);
  --mrb-success-bg: rgba(28, 135, 66, 0.18);
  --mrb-warning-bg: rgba(237, 158, 47, 0.18);
  --mrb-danger-bg: rgba(204, 36, 61, 0.18);
  --mrb-info-bg: rgba(18, 126, 238, 0.18);

  --mrb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --mrb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --mrb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --mrb-overlay: rgba(0, 0, 0, 0.6);

  /* Dark-mode overrides for brand icons that are invisible here:
     TikTok + X become light, Snapchat gets back its bright yellow. */
  --mrb-brand-tiktok: #f2f2f2;
  --mrb-brand-x: #ffffff;
  --mrb-brand-snapchat: #fffc00;
}

/* Brand icon hues — per-platform fill sourced from the --mrb-brand-* tokens
   above (NO inline colors: social_icon() outputs class-per-platform only). */
.mrb-theme [class*="mrb-icon--social-"] {
  color: inherit;
}
.mrb-theme .mrb-icon--social-instagram { color: var(--mrb-brand-instagram); }
.mrb-theme .mrb-icon--social-facebook { color: var(--mrb-brand-facebook); }
.mrb-theme .mrb-icon--social-tiktok { color: var(--mrb-brand-tiktok); }
.mrb-theme .mrb-icon--social-whatsapp { color: var(--mrb-brand-whatsapp); }
.mrb-theme .mrb-icon--social-snapchat { color: var(--mrb-brand-snapchat); }
.mrb-theme .mrb-icon--social-x { color: var(--mrb-brand-x); }
.mrb-theme .mrb-icon--social-youtube { color: var(--mrb-brand-youtube); }

/* Base reset & typography for the theme shell. */
.mrb-theme {
  margin: 0;
  font-family: var(--mrb-font-family);
  font-size: var(--mrb-font-size-md);
  line-height: 1.5;
  color: var(--mrb-text-primary);
  background: var(--mrb-bg);
  -webkit-font-smoothing: antialiased;
}

.mrb-theme *,
.mrb-theme *::before,
.mrb-theme *::after {
  box-sizing: border-box;
}

/* Isolation reset — the shell is a standalone document, but this normalizes
 * browser defaults + any residual WP styles so no bullets/circles/appearance
 * leak into our components (nav lists, buttons, inputs). */
.mrb-theme ul,
.mrb-theme ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mrb-theme button,
.mrb-theme input,
.mrb-theme textarea,
.mrb-theme select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.mrb-theme button {
  cursor: pointer;
}
button.mrb-mcard__action.mrb-mcard__action--undo{
  width:100%;
  background:color-mix(in srgb, var(--mrb-brand-accent) 15%, var(--mrb-surface));
}

.mrb-theme img {
  max-width: 100%;
  height: auto;
}

/* Links don't force a color so component classes (e.g. .mrb-sheet__logout,
   .mrb-btn--primary, .mrb-nav-item__label) keep their own themed colors. */
.mrb-theme a {
  text-decoration: none;
}

/* Self-hosted icon wrapper (Huge Icons sprite <use>). Sized by context. */
.mrb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  line-height: 1;
}

.mrb-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Reduced motion for accessibility. */
@media (prefers-reduced-motion: reduce) {
  .mrb-theme * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}