/* ============================================================
   Mineola Market — "Premium" default theme (navy + gold)
   Override stylesheet loaded on top of style.css for the
   default (non-picked) theme. Users who selected another
   theme still get theirs (that theme's CSS loads after this).
   ============================================================ */
:root {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #16202e;
  --muted: #5b6b7f;
  --primary: #1e3a5f;      /* deep navy */
  --primary-dark: #16293f;
  --green: #31a24c;
  --red: #c0392b;
  --border: #e3e8ef;
  --radius: 14px;
  --shadow: 0 4px 20px rgba(23,42,66,.08);
  --shadow-hover: 0 10px 30px rgba(23,42,66,.16);
  --gold: #c9a84c;
  --gold-dark: #b08a2e;
  --gold-soft: #e7d9b3;
}

body { background: var(--bg); }

/* ===== Topbar (navy gradient) ===== */
.topbar {
  background: linear-gradient(135deg,#16293f 0%,#1e3a5f 55%,#24466f 100%) !important;
  border-bottom: none;
  box-shadow: 0 2px 12px rgba(16,32,54,.35);
}
.topbar-welcome { color: #ffffff !important; font-size: 19px; font-weight: 800; }
.welcome-sub { color: #c8d4e4 !important; }
.topbar-clock { color: #c8d4e4 !important; }
.topbar .brand { color: #fff; font-weight: 800; }
.nav-toggle-bar { background: #fff; }

/* Brand logo: if it's an img it keeps its height; give text brand a gold em */
.brand em { color: var(--gold); font-style: normal; }

/* ===== Topnav (dark band, gold active) ===== */
.topnav {
  background: rgba(8,18,32,.60);
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  gap: 0;
}
.topnav .nav-link {
  color: #dde6f1;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  border-radius: 0;
}
.topnav .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.topnav .nav-link.active { background: none; color: #fff; border-bottom-color: var(--gold); }
.topnav .btn-login,
.topnav .btn-nav {
  background: linear-gradient(135deg,#c9a84c,#b08a2e) !important;
  color: #16202e !important;
  border-radius: 8px;
  margin: 7px 4px;
  padding: 6px 15px;
  font-weight: 700;
}
.topnav .btn-login:hover,
.topnav .btn-nav:hover { background: #d9b95c !important; color: #16202e !important; }
.topnav .nav-invite { background: var(--gold); color: #16202e; }
.topnav .nav-invite:hover { background: #d9b95c; color: #16202e; }

/* Dropdown */
.nav-dropdown-menu { border-radius: 12px; box-shadow: var(--shadow-hover); border: 1px solid var(--border); }
.nav-dropdown-menu .dd-item { color: var(--text); }
.nav-dropdown-menu .dd-item:hover { background: var(--surface-2); color: var(--primary); }

/* ===== Sidebar (white card, gold accents) ===== */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.sidebar-divider { border-top: 1px solid var(--border); }
.sidebar-chat-btn {
  background: var(--primary);
  color: #fff;
  border-radius: 9px;
  padding: 11px;
  font-weight: 700;
}
.sidebar-chat-btn:hover { background: var(--primary-dark); color: #fff !important; }
.sidebar-auth { background: linear-gradient(135deg,#c9a84c,#b08a2e); }
.sidebar-auth:hover { background: #d9b95c; color: #16202e !important; }
.sidebar-auth-2 { background: var(--primary); }
.sidebar-auth-2:hover { background: var(--primary-dark); color: #fff !important; }
.sidebar-section-title { color: var(--primary); font-weight: 800; letter-spacing: .6px; }
.sidebar-cats { display: flex; flex-direction: column; gap: 0; }
.sidebar-cats .cat-link { color: var(--text); background: transparent; border-radius: 0; }
.sidebar-cats .cat-link:hover { background: rgba(30,58,95,.12); color: var(--primary); }

/* ===== Page title & toolbar ===== */
.page-title { color: var(--primary); font-weight: 800; }
.toolbar input[type=search], .toolbar select {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
}
.toolbar input[type=search]:focus, .toolbar select:focus { border-color: var(--gold); }

/* ===== Buttons ===== */
.btn { background: linear-gradient(135deg,#1e3a5f,#24466f); border-radius: 9px; font-weight: 700; color:#fff; }
.btn:hover { background: var(--primary-dark); }
.btn-outline { background: none; border: 1.5px solid var(--gold); color: var(--primary); }
.btn-outline:hover { background: var(--gold-soft); color: var(--primary); }
.btn-green { background: var(--green); }

/* ===== Listing cards (premium) ===== */
.card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: #cdd6e2; }
.card-price { color: var(--primary); font-weight: 800; }
.card-rating { color: var(--gold); font-weight: 700; }
.cond-badge { border-radius: 20px; }
.card-img { background: #e9edf3; }

/* ===== Home layout right rail (white cards, gold dot) ===== */
.home-side { gap: 18px; }
.home-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.home-block-title { color: var(--primary); font-weight: 800; }
.home-block-title::before { content: "● "; color: var(--gold); font-size: 12px; vertical-align: middle; }
.side-post, .side-sale, .side-member, .side-online-user { border-radius: 9px; }
.side-post:hover, .side-sale:hover, .side-member:hover, .side-online-user:hover { background: var(--surface-2); }
.side-post-author { color: var(--primary); font-weight: 700; }
.side-sale-date { background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; color: var(--primary); font-weight: 700; }
.online-dot { background: var(--green); }
.online-dot-mini { background: var(--green); }

/* ===== Flash ===== */
.flash { border-radius: var(--radius); }
.flash-success { background: #e4f4e7; color: #1f7a35; }
.flash-error { background: #fdecea; color: #a93226; }

/* ===== Chat (premium blue-heavy, gold accent only) ===== */
.chat-online-head,
.chat-rooms-head,
.chat-room-title {
  color: var(--primary);
  font-weight: 700;
}
.chat-online-head { border-bottom-color: var(--border); }
.chat-online-count {
  background: rgba(30,58,95,.12);
  color: var(--primary);
}
.chat-online-user.me { background: rgba(30,58,95,.08); }
.chat-online-user:hover { background: rgba(30,58,95,.12); }
.chat-btn {
  border: 1px solid rgba(30,58,95,.35);
  background: #fff;
  color: var(--primary);
}
.chat-btn:hover { background: rgba(30,58,95,.06); border-color: var(--primary); }
.chat-room-item:hover { background: rgba(30,58,95,.05); }
.chat-room-item.active {
  background: rgba(30,58,95,.10);
  border-color: rgba(30,58,95,.35);
}
.chat-room-name { color: var(--primary); }
.chat-announcement {
  border: 1px solid rgba(30,58,95,.25);
  background: #eef3fa;
  color: var(--primary);
}
.chat-modbar { background: #eef3fa; }
.chat-mod-btn {
  background: linear-gradient(135deg,#1e3a5f,#2a4d7a);
  color: #fff;
}
.chat-mod-btn:hover { background: #2a4d7a; }
.chat-mod-chip { color: var(--primary); }
.chat-mod-chip:hover { border-color: var(--primary); }
.mod-menu-item:hover { background: #eef3fa; border-color: var(--primary); }
.chat-messages { background: #f0f4fa; }
.chat-msg-name { color: var(--primary); font-weight: 700; }
.chat-msg.other .chat-bubble {
  background: #fff;
  border: 1px solid #d3dce8;
  color: var(--text);
}
.chat-msg.own .chat-bubble {
  background: linear-gradient(135deg,#1e3a5f,#2a4d7a);
  color: #fff;
}
.chat-reply-prev-name { color: var(--primary); }
.chat-reaction { background: #e8eef7; }
.chat-reaction.mine {
  background: rgba(30,58,95,.15);
  border-color: rgba(30,58,95,.45);
}
.chat-listing-price { color: var(--primary); }
.chat-attach {
  background: rgba(30,58,95,.08);
  border: 1px solid rgba(30,58,95,.3);
}
.chat-attach-label { color: var(--primary); }

/* Composer + send */
.chat-composer input:focus { border-color: var(--primary); }
.chat-reply-bar, .chat-listing-bar { background: #eef3fa; }
.chat-reply-label { color: var(--primary); }
.chat-share-btn {
  background: #eef3fa;
  border: 1px solid rgba(30,58,95,.3);
  color: var(--primary);
}
.chat-share-btn:hover { background: rgba(30,58,95,.1); }
.chat-send-btn {
  background: linear-gradient(135deg,#1e3a5f,#2a4d7a);
}
.chat-send-btn:hover { filter: brightness(1.1); }