/* =============================================================
   base-shell.css — site shell utilities used in every page.
   Replaces the previous inline <style> block in templates/base/base.html
   so the page stays cacheable and we stop shipping leftover Tailwind
   utility duplicates per request.
   Tokens come from design-system.css.
   ============================================================= */

/* ---- Body padding for the fixed top navbar / bottom mobile nav ----
   The floating navbar consumes --ds-navbar-h pixels from the top of the
   viewport (responsive — see design-system.css). When the profile banner
   is rendered, --ds-banner-h adds its height. Pages opt out via the
   `no-top-padding` body class when they paint their own hero/banner under
   the navbar (those pages are responsible for their own navbar-aware
   top spacing). */
body {
  padding-top: calc(var(--ds-navbar-h) + var(--ds-banner-h, 0px));
}
body.no-top-padding,
body.home-page,
body.auth-page {
  /* Pages that draw their own hero still need to clear the banner if it's
     shown — the banner is pinned at top and would otherwise overlay
     content. */
  padding-top: var(--ds-banner-h, 0px) !important;
}

/* ---- Brand-color icon glyph fix for RTL pages — keep FontAwesome happy ---- */
.fas, .far, .fab, .fal, .fad {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro",
               "Font Awesome 6 Brands" !important;
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  margin-left: 0 !important;
  display: inline-block;
}
.far { font-weight: 400 !important; }
.fab { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }

/* ---- Bootstrap-style colour helpers used inside legacy templates ---- */
.bg-primary    { background-color: var(--ds-brand) !important; }
.bg-secondary  { background-color: var(--ds-surface-2) !important; }
.bg-success    { background-color: rgba(0, 166, 147, 0.30) !important; }
.bg-danger     { background-color: rgba(220, 53, 69, 0.30) !important; }
.bg-warning    { background-color: rgba(255, 133, 82, 0.30) !important; }
.bg-info       { background-color: rgba(0, 91, 93, 0.30) !important; }

.text-internal-primary { color: var(--ds-ink) !important; }
.text-primary    { color: var(--ds-brand) !important; }
.text-secondary  { color: var(--ds-muted) !important; }

.btn-primary    { background-color: var(--ds-brand) !important; border-color: transparent !important; }
.btn-primary:hover    { background-color: var(--ds-brand-800) !important; border-color: transparent !important; }
/* Neutral muted button — was mapped to brand-accent orange, which made
   every Bootstrap "btn-secondary" (cancel, back, dismiss, less-important
   action) shout louder than the primary teal CTA next to it. Treat it
   as a quiet gray surface that defers to the primary. */
.btn-secondary  { background-color: var(--ds-surface-2, #F1F5F9) !important; color: var(--ds-ink, #0F172A) !important; border: 1px solid var(--ds-line, #E5E7EB) !important; }
.btn-secondary:hover  { background-color: var(--ds-line, #E5E7EB) !important; color: var(--ds-ink, #0F172A) !important; border-color: var(--ds-line, #E5E7EB) !important; }
.btn-danger     { background-color: rgba(220, 53, 69, 0.85) !important; border-color: transparent !important; }
.btn-danger:hover { background-color: rgba(220, 53, 69, 1) !important; border-color: transparent !important; }
.btn-success    { background-color: var(--ds-brand) !important; border-color: transparent !important; }
.btn-success:hover    { background-color: var(--ds-brand-800) !important; border-color: transparent !important; }
.btn-warning    { background-color: var(--ds-accent) !important; border-color: transparent !important; }
.btn-warning:hover    { background-color: var(--ds-accent-600) !important; border-color: transparent !important; }
.btn-info       { background-color: var(--ds-brand-800) !important; border-color: transparent !important; }
.btn-info:hover { background-color: #004345 !important; border-color: transparent !important; }
.nav-tabs .nav-link.active { border-bottom: 3px solid var(--ds-brand) !important; }

/* `.btn-primary` / `.btn-secondary` above use `display` implicitly via
   their default browser style + Bootstrap layout; their `!important`
   surface colour rules don't beat the HTML `hidden` attribute, but
   button-layout helpers in other stylesheets sometimes reintroduce
   `display: inline-block`. Keep `[hidden]` authoritative so the
   add-property wizard's prev / submit buttons actually disappear on
   the first step. */
[hidden] { display: none !important; }

/* ---- Django flash messages container ---- */
.messages-container {
  position: fixed;
  top: 20px;
  inset-inline-end: 20px;
  z-index: var(--ds-z-toast);
  max-width: 400px;
  width: 90%;
  pointer-events: none;
}

.message-alert {
  margin-bottom: 1rem;
  padding: 14px 18px;
  border-radius: var(--ds-radius-lg);
  border: none;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: var(--ds-weight-medium);
  box-shadow: var(--ds-shadow-lg);
  backdrop-filter: blur(10px);
  animation: messageSlideIn 0.4s var(--ds-ease);
  font-family: var(--ds-font);
  direction: rtl;
  text-align: right;
  pointer-events: auto;
  border-inline-start: 4px solid currentColor;
}
.message-alert.success { background: rgba(16, 185, 129, 0.95); color: #ffffff; }
.message-alert.error   { background: rgba(239, 68, 68, 0.95);  color: #ffffff; }
.message-alert.warning { background: rgba(245, 158, 11, 0.95); color: #ffffff; }
.message-alert.info    { background: rgba(0, 166, 147, 0.95);  color: #ffffff; }

.message-icon { font-size: var(--ds-text-lg); flex-shrink: 0; }
.message-content { flex: 1; line-height: var(--ds-leading-snug); }

.message-close {
  background: none;
  border: none;
  color: #ffffff;
  font-size: var(--ds-text-xl);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background var(--ds-fast), opacity var(--ds-fast), transform var(--ds-fast);
  flex-shrink: 0;
  opacity: 0.85;
}
.message-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.1);
}

@keyframes messageSlideIn {
  from { opacity: 0; transform: translateX(-100px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes messageSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-100px); }
}
.message-alert.hiding { animation: messageSlideOut 0.3s var(--ds-ease) forwards; }

@media (max-width: 640px) {
  .messages-container { top: 10px; inset-inline: 10px; max-width: none; width: auto; }
  .message-alert { padding: 12px 14px; font-size: var(--ds-text-sm); }
}

/* ---- Hide top navbar on mobile; let the bottom nav take over ---- */
@media (max-width: 768px) {
  .modern-navbar { display: none !important; }
  body {
    /* Banner still pinned at top on mobile — keep padding for it.
       Navbar is hidden so navbar-h is already 0 (see design-system.css). */
    padding-top: var(--ds-banner-h, 0px) !important;
    /* padding-bottom is owned by bottom-navbar.css — it includes the +22px FAB
       protrusion term. Re-declaring it here (loads later) dropped that term and
       re-introduced the content-under-FAB overlap fixed in iter278/279. */
  }
}

/* ============================================================
   Mobile top bar — visible only on ≤768 px. Slim sticky bar with
   the brand mark + a sign-in/profile shortcut + a primary search
   action. The desktop .modern-navbar is hidden on mobile so this
   is the only top-anchored brand surface on a phone.
   ============================================================ */
.mobile-topbar { display: none; }

@media (max-width: 768px) {
  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: fixed;
    top: var(--ds-banner-h, 0px);
    left: 0;
    right: 0;
    height: 54px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--ds-line-2);
    z-index: var(--ds-z-navbar, 500);
    direction: rtl;
  }

  /* Pages that paint their own hero (home, blog list, etc.) opt into a
     fully transparent top bar at the top, then it solidifies on scroll
     via the .is-stuck class set by JS. */
  body.home-page .mobile-topbar,
  body.no-top-padding .mobile-topbar {
    background: rgba(15, 23, 42, 0.18);
    border-bottom-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
  }
  body.home-page .mobile-topbar.is-stuck,
  body.no-top-padding .mobile-topbar.is-stuck {
    background: rgba(255, 255, 255, 0.96);
    border-bottom-color: var(--ds-line-2);
  }
  body.home-page .mobile-topbar:not(.is-stuck) .mobile-topbar__name,
  body.no-top-padding .mobile-topbar:not(.is-stuck) .mobile-topbar__name { color: #fff; }
  body.home-page .mobile-topbar:not(.is-stuck) .mobile-topbar__btn,
  body.no-top-padding .mobile-topbar:not(.is-stuck) .mobile-topbar__btn {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.24);
  }
  body.home-page .mobile-topbar:not(.is-stuck) .mobile-topbar__btn--accent,
  body.no-top-padding .mobile-topbar:not(.is-stuck) .mobile-topbar__btn--accent {
    background: var(--ds-brand);
    color: #fff;
    border-color: transparent;
  }

  /* Other pages get a tiny bit of top padding so content doesn't slide
     under the bar. Hero pages paint themselves under it on purpose. */
  body:not(.home-page):not(.no-top-padding):not(.auth-page) {
    padding-top: 54px !important;
  }

  /* Mobile bottom nav is fixed too — make sure body padding clears both. */
}

.mobile-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}
.mobile-topbar__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--ds-brand-50) 0%, #fff 100%);
  border: 1px solid var(--ds-brand-100);
  color: var(--ds-brand);
  flex-shrink: 0;
}
.mobile-topbar__logo img { width: 20px; height: 20px; display: block; }
.mobile-topbar__name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ds-brand);
  letter-spacing: 0.01em;
  transition: color 200ms var(--ds-ease);
}

.mobile-topbar__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mobile-topbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-line);
  color: var(--ds-ink-2);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 200ms var(--ds-ease), color 200ms var(--ds-ease), border-color 200ms var(--ds-ease);
}
.mobile-topbar__btn:hover { background: var(--ds-brand-50); color: var(--ds-brand); }
.mobile-topbar__btn--accent {
  background: var(--ds-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 166, 147, 0.30);
}
.mobile-topbar__btn--accent:hover { background: var(--ds-brand-700); color: #fff; }

/* ---- Optional translucent navbar overlay used by hero pages ---- */
body.green-navbar-overlay .modern-navbar {
  background: rgba(0, 166, 147, 0.95);
  backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, 0.2);
}
body.green-navbar-overlay .modern-navbar .nav-link,
body.green-navbar-overlay .modern-navbar .brand-text { color: #ffffff; }
body.green-navbar-overlay .modern-navbar .nav-link:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
}
body.green-navbar-overlay .modern-navbar .auth-btn.login-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}
body.green-navbar-overlay .modern-navbar .auth-btn.login-btn:hover {
  color: var(--ds-brand);
  background: #ffffff;
  border-color: #ffffff;
}