/* ==========================================================================
   نظام الزنجيل — app.css
   Design tokens + custom styles. Follows design.md (authoritative reference).
   Bootstrap 5 RTL is the foundation; this file only extends it.
   ========================================================================== */

:root {
  /* ── Brand / Primary ── */
  --color-primary:       #1a56db;
  --color-primary-dark:  #1241a8;
  --color-primary-light: #ebf0ff;

  /* ── Semantic ── */
  --color-success:       #0f9d58;
  --color-danger:        #e53935;
  --color-warning:       #f4a823;
  --color-info:          #039be5;

  /* ── Neutrals ── */
  --color-surface:       #ffffff;
  --color-bg:            #f5f7fb;
  --color-border:        #dee2e6;
  --color-text:          #212529;
  --color-muted:         #6c757d;
  --color-sidebar-bg:    #ffffff;

  /* ── Typography ── */
  --font-family:         'Cairo', sans-serif;
  --font-size-base:      1rem;
  --font-size-sm:        0.875rem;
  --font-size-lg:        1.125rem;
  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --line-height:         1.7;
  --line-height-heading: 1.3;

  /* ── Spacing ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;

  /* ── Borders ── */
  --radius-sm: 0.25rem;
  --radius:    0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 4px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);

  /* ── Transitions ── */
  --transition: 0.2s ease;
}

/* ── Base ── */
body {
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: var(--line-height);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }

/* ── Reusable token-backed utility classes (design.md references these) ── */
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.text-primary     { color: var(--color-primary) !important; }

/* ── Cards ── */
.card { border-radius: var(--radius); border-color: var(--color-border); }

/* ── Tables ── */
.table th { font-weight: var(--font-weight-semibold); }

/* ==========================================================================
   Admin shell — sidebar + topbar
   ========================================================================== */
.app-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--color-sidebar-bg);
  border-inline-start: 1px solid var(--color-border) !important;
}
.app-sidebar .nav-link {
  color: var(--color-muted);
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}
.app-sidebar .nav-link:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.app-sidebar .nav-link.active {
  color: var(--color-primary);
  background: var(--color-primary-light);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 767.98px) {
  .app-sidebar {
    width: 100%;
    border-inline-start: none !important;
    border-block-end: 1px solid var(--color-border) !important;
  }
}

/* ==========================================================================
   Public page — state-machine view panels
   ========================================================================== */
.view-panel { display: none; }
.view-panel.active { display: block; }

/* ── QR code ── */
.qr-wrapper {
  position: relative;
  display: inline-block;
}
#qr-container canvas,
#qr-container img {
  border-radius: var(--radius);
}
.qr-logo {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%); /* RTL-safe centering */
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 2px;
  box-shadow: var(--shadow-sm);
}

/* ── Verification code input ── */
.code-input {
  letter-spacing: .75rem;
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
}

/* ── Phone prefix badge ── */
.phone-prefix {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   Announcement bar (fixed top)
   ========================================================================== */
#announcement-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1100;
}
body.has-announcement { padding-block-start: 52px; }

/* ==========================================================================
   Popup ad overlay
   ========================================================================== */
.popup-ad-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.75);
  padding: var(--space-3);
}
.popup-ad-overlay.show { display: flex; }
.popup-ad-overlay img,
.popup-ad-overlay video {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.popup-ad-close {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
}

/* ==========================================================================
   Dashboard colored tab pills
   ========================================================================== */
.tab-pill {
  border: none !important;
  color: #fff !important;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.tab-pill:hover { color: #fff !important; opacity: .92; }
.tab-pill.active {
  transform: scale(1.05);
  box-shadow: var(--shadow) !important;
}
/* Tab color scheme (original palette, mapped to fixed values) */
.tab-blue    { background-color: #1a56db; }
.tab-green   { background-color: #0f9d58; }
.tab-yellow  { background-color: #f4a823; color: #1f2937 !important; }
.tab-purple  { background-color: #7c3aed; }
.tab-red     { background-color: #e53935; }
.tab-indigo  { background-color: #4f46e5; }
.tab-pink    { background-color: #db2777; }
.tab-teal    { background-color: #0d9488; }
.tab-orange  { background-color: #ea580c; }
.tab-cyan    { background-color: #0891b2; }
.tab-fuchsia { background-color: #c026d3; }
.tab-lime    { background-color: #65a30d; }

/* ==========================================================================
   Loading overlay (per-tab / per-card)
   ========================================================================== */
.position-relative > .loading-overlay { position: absolute; }
.loading-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.7);
  z-index: 10;
  align-items: center;
  justify-content: center;
}
.loading-overlay.show { display: flex; }

/* ── Footer ── */
.app-footer {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   Media Picker (settings tab) — see design.md §5.10
   ========================================================================== */
.media-picker .mp-preview {
  background: var(--color-bg);
  min-height: 3rem;
}
.media-picker .mp-preview-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-picker .mp-preview-name {
  flex: 1;
  min-width: 0;
}
img.mp-thumb {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.mp-lib-item {
  border: 2px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.mp-lib-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.mp-item-preview {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
img.mp-thumb-sm {
  max-width: 60px;
  max-height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.mp-item-name {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}