/* ==========================================================================
   Global Theme & Resets
   ========================================================================== */

:root{
  /* Palette (neutral light theme with vivid accents) */
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --text: #0f172a;         /* slate-900 */
  --muted: #475569;        /* slate-600 - darker for better contrast */
  --text-muted: #475569;   /* same as muted for consistency */
  --border: #e5e7eb;       /* gray-200 */
  --accent: #2563eb;       /* blue-600 */
  --accent-2: #1d4ed8;     /* blue-700 */
  --success: #16a34a;      /* green-600 */
  --warning: #f59e0b;      /* amber-500 */
  --danger:  #ef4444;      /* red-500 */

  /* UI */
  --radius: 14px;
  --shadow: 0 6px 20px rgba(2, 6, 23, .06);
  --shadow-soft: 0 2px 8px rgba(2, 6, 23, .05);

  /* Typo & spacing scale */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --fs-0: 12px;
  --fs-1: 14px;
  --fs-2: 16px;
  --fs-3: 18px;
  --fs-4: 22px;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 28px;
}

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

html, body {
  height: 100%;
  color: var(--text);
}

body{
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  color: #013186;
  background: var(--bg);
  font-size: var(--fs-2);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width:100%; display:block; }

/* Links */
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Headings */
h1, h2, h3{
  margin: 0 0 var(--space-2) 0;
  line-height: 1.25;
}
h1{ font-size: var(--fs-4); }
h2{ font-size: var(--fs-3); }
h3{ font-size: var(--fs-2); }

/* Utility */
.container{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}
.right{ display:flex; justify-content:flex-end; align-items:center; }
.muted{ color: var(--muted); }
.hide{ opacity: 0; transform: translateY(-6px); pointer-events:none; }

/* Focus visibility */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ==========================================================================
   Layout: Cards, Buttons, Badges, Forms, Tables
   ========================================================================== */

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-3);
}

/* Product media helpers (store list/detail) */
.product-media{
  width: 100%;
  height: 180px;            /* fallback */
  aspect-ratio: 4 / 3;      /* modern browsers keep ratio */
  background: var(--surface-2);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: hidden;
  position: relative;
}
.product-media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}



.btn{
  display:inline-flex; gap:8px; align-items:center; justify-content:center;
  background: var(--accent); color: #ffffff; font-weight: 700;
  padding: 10px 14px; border-radius: 999px; border:0; cursor:pointer;
  box-shadow: 0 2px 6px rgba(37, 99, 235, .25);
  transition: transform .04s ease, filter .18s ease;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.btn:hover{ filter: brightness(1.04); text-decoration:none; color: #ffffff; }
.btn:active{ transform: translateY(1px); }
.btn--muted{ background: var(--surface-2); color: var(--text); box-shadow:none; text-shadow:none; }
.btn--danger{ background: var(--danger); color: #ffffff; }
.btn--success{ background: var(--success); color: #ffffff; }
.btn--primary{ background: var(--brand); color: #ffffff; }
.btn--info{ background: #0ea5e9; color: #ffffff; }
.btn--warning{ background: #f59e0b; color: #ffffff; }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 10px; font-size: var(--fs-1);
  background: var(--surface-2);
  color: var(--text);
  border:1px solid var(--border); border-radius: 999px;
  white-space: nowrap;
}

/* Soft neutral badge for date/time/status (light background, dark text) */
.badge--soft{ background: var(--surface-2); color: var(--text); border-color: var(--border); }

input, select, textarea{
  width: 100%;
  background: #fff;
  color: #033791;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: var(--fs-2);
}
textarea{ resize: vertical; min-height: 80px; }

label{ font-size: var(--fs-1); color: var(--muted); display:block; margin-bottom: 6px; }

.field{ margin: 10px 0; }

table{
  width: 100%;
  border-collapse: collapse;
  color:black;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
th, td{ padding: 10px 12px; color:black; border-bottom: 1px solid var(--border); }
th{ text-align:left; font-size: var(--fs-1); color: black; background: var(--surface-2); }

/* Ensure links in data tables remain readable on light backgrounds */
table a:not(.btn){
  color: black;
  text-decoration: underline;
  text-underline-offset: 2px;
}
table a:not(.btn):hover{ color: navy; }

/* ==========================================================================
   Navigation & Menus
   (expects #nav-toggle, #nav-links and #user-dd, #dd-btn from your base.html)
   ========================================================================== */

header.site-nav{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; padding: 12px 0;
}
#nav-links{
  display:flex; gap: 12px; align-items:center;
}
#nav-links a{
  color: var(--text); padding: 8px 10px; border-radius: 8px;
}
#nav-links a:hover{ background: var(--surface-2); color: navy; text-decoration:none; }

#nav-toggle{
  display:none; border:1px solid var(--border); background: var(--surface-2);
  padding: 8px 10px; border-radius: 8px; cursor:pointer;
}

/* User dropdown */
#user-dd{
  position: relative;
}
#user-dd .menu{
  position:absolute; right:0; top: calc(100% + 8px);
  min-width: 220px; background: var(--surface);
  border:1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  padding: 6px; display:none;
}
#user-dd.open .menu{ display:block; }
#user-dd .menu a{
  display:block; padding:10px; border-radius:8px; color: var(--text);
}
#user-dd .menu a:hover{ background: var(--surface-2); text-decoration:none; }

/* Mobile nav */
@media (max-width: 900px){
  #nav-toggle{ display:inline-flex; }
  #nav-links{ display:none; flex-direction:column; align-items:flex-start; width:100%; padding:10px 0; }
  #nav-links.open{ display:flex; }
  .nav-inner{ flex-wrap:wrap; }
}

/* ==========================================================================
   Toast Messages (Django messages) — your JS selects elements with .msg
   (Scoped to .flash to avoid clashing with chat rows)
   ========================================================================== */

.flash .msg{
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
  background: #f1f5ff; color:#0b3a9b; border:1px solid #c7d7ff;
  padding: 10px 12px; border-radius: 10px; margin: 8px 0;
  box-shadow: var(--shadow-soft);
}
.flash .msg.error{ background:#fff1f2; color:#9b1c1c; border-color:#fecaca; }
.flash .msg.success{ background:#effdf5; color:#065f46; border-color:#bbf7d0; }
.flash .msg .close{
  border:0; background:transparent; color:inherit; font-size:18px; cursor:pointer;
}

/* ==========================================================================
   Messaging UI (threads & inbox)
   (All chat-specific styles are scoped under .thread-wrap or .inbox to avoid conflicts)
   ========================================================================== */

/* Inbox cards list */
.inbox .list > li > a.row{
  display:flex; align-items:center; gap: 12px;
  padding: 12px; text-decoration:none; color: var(--text);
}
.inbox .list > li{ border-top:1px solid var(--border); }
.inbox .list > li > a.row:hover{ background: var(--surface-2); }

/* Avatar pill */
.avatar{
  width: 40px; height: 40px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface-2); border: 1px solid var(--border);
  font-weight: 800; color: var(--muted);
}

/* Unread badge (right side) */
.unread{
  min-width: 24px; height: 24px; border-radius: 999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--accent); color:#fff; font-weight:700; font-size: var(--fs-1);
  padding: 0 8px;
}

/* === Thread / Conversation === */

.thread-wrap{
  display:grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-2);
}

.thread-wrap .header.card{ padding: var(--space-3) var(--space-4); }

.thread-wrap .members.card{
  padding: var(--space-2) var(--space-3);
}
.thread-wrap .members .badge{ background: var(--surface-2); }

/* Message list with comfy spacing and high contrast bubbles */
.thread-wrap .msg-list{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  max-height: 66vh;
  overflow:auto;
  display:flex; flex-direction:column; gap: 10px;
}

/* Rows */
.thread-wrap .msg{
  display:flex; gap: 10px; align-items:flex-end;
}
.thread-wrap .msg.me{ justify-content:flex-end; }
.thread-wrap .msg.them{ justify-content:flex-start; }

/* Bubbles: mine = bold blue w/ white text; theirs = soft gray w/ dark text */
.thread-wrap .bubble{
  max-width: min(700px, 80vw);
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-soft);
}
.thread-wrap .msg.me .bubble{
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
.thread-wrap .msg.them .bubble{
  background: #f3f4f6;             /* gray-100 */
  color: #0b1220;                   /* near-black for readability */
}

/* Author & time inside bubbles */
.thread-wrap .bubble .author{
  font-weight: 800; margin-bottom: 3px; letter-spacing: .2px;
}
.thread-wrap .bubble .time{
  font-size: var(--fs-0); color: #6b7280; margin-top: 4px;
}

/* Chat avatars (smaller than inbox) */
.thread-wrap .msg .avatar{
  width: 34px; height: 34px;
}

/* Composer (sticky) */
.thread-wrap .composer{
  position: sticky; bottom: 0; z-index: 5;
  display:flex; gap: 10px; align-items:flex-end;
  background: var(--surface);
  border:1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-2);
  box-shadow: var(--shadow-soft);
}
.thread-wrap .composer textarea{
  background: var(--surface-2);
  border-color: var(--border);
}

/* Join / Leave buttons */
.thread-wrap .btn.leave{ background: var(--danger); color:#fff; }
.thread-wrap .btn.join{ background: var(--success); color:#04130a; }

/* ==========================================================================
   Helpers for spacing & grids
   ========================================================================== */

.grid{
  display:grid; gap: var(--space-3);
}
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1000px){
  .grid.cols-2, .grid.cols-3{ grid-template-columns: 1fr; }
}

/* Lists with no bullets */
.list{ list-style:none; margin:0; padding:0; }

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */

@media (max-width: 720px){
  h1{ font-size: 20px; }
  .avatar{ width:36px; height:36px; }
  .thread-wrap .msg-list{ max-height: calc(70vh - 80px); }
  .thread-wrap .bubble{ max-width: 88vw; }
  .btn{ padding: 10px 12px; }
}

/* ==========================================================================
   Optional Dark Mode (auto if the user prefers dark)
   ========================================================================== */

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --surface: #0f172a;
    --surface-2: #111827;
    --text: #f8fafc;
    --muted: #94a3b8;        /* slate-400 - better contrast on dark */
    --text-muted: #94a3b8;   /* same as muted for consistency */
    --border: #1f2937;
    --accent: #3b82f6;
    --accent-2: #2563eb;
  }
  body{ background: var(--bg); color: var(--text); }
  input, select, textarea{
    background: var(--surface-2); color: var(--text);
    border-color: var(--border);
  }
  .thread-wrap .msg.them .bubble{
    background: #1f2937; color: #f1f5f9;
  }
}