/* ============================================================
   mynoticeboard.online — app.css  v4 (Bootstrap 5 final)
   All layout uses Bootstrap grid. No custom drawer/hamburger.
   ============================================================ */
:root {
  --green:#1A6FFF; --green-mid:#0047CC; --green-light:#EEF4FF;
  --accent:#4D9FFF; --bg:#F4F6F4; --text:#111827;
  --muted:#6B7280; --border:#E5E7EB; --red:#DC2626;
  --blue:#1D4ED8; --purple:#7C3AED;
}
*,*::before,*::after { box-sizing:border-box; }
html { overflow-x:hidden; }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }
img,svg { max-width:100%; height:auto; }

/* ── NAVBAR ─────────────────────────────────────────────────── */
.mnb-navbar   { height:58px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.mnb-brand-text { font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:700; color:#111827; }
.mnb-dot      { color:var(--green); }
.mnb-beta     { font-size:.58rem; background:var(--green-light); color:var(--green); padding:2px 6px; border-radius:6px; font-weight:700; letter-spacing:.5px; }
.mnb-link     { font-size:.83rem; color:var(--muted); text-decoration:none; transition:color .15s; white-space:nowrap; }
.mnb-link:hover { color:var(--green); }
.mnb-btn-post { background:var(--green); color:#fff !important; border:none; padding:7px 15px; border-radius:8px; font-size:.82rem; font-weight:600; cursor:pointer; transition:background .2s; display:inline-flex; align-items:center; gap:5px; text-decoration:none !important; white-space:nowrap; }
.mnb-btn-post:hover { background:var(--green-mid); }

/* Bootstrap toggler override */
.mnb-toggler { border:1.5px solid #D1D5DB !important; border-radius:8px !important; padding:5px 8px !important; background:#fff !important; color:#111827 !important; }
.mnb-toggler:hover { background:var(--green-light) !important; border-color:var(--accent) !important; }
.mnb-toggler:focus { box-shadow:0 0 0 3px rgba(26,111,255,.18) !important; }
.mnb-toggler .bi   { font-size:1.3rem; color:#111827; }

/* Offcanvas nav links */
.mnb-oc-link   { display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; font-size:.9rem; color:#111827; text-decoration:none; transition:background .12s; }
.mnb-oc-link:hover { background:var(--bg); }
.mnb-oc-link i { font-size:1rem; color:var(--muted); width:20px; flex-shrink:0; }
.mnb-oc-primary   { background:var(--green-light); color:var(--green) !important; font-weight:600; }
.mnb-oc-primary i { color:var(--green) !important; }
.mnb-oc-primary:hover { background:#D6E8FF; }
.mnb-oc-danger    { color:var(--red) !important; }
.mnb-oc-danger i  { color:var(--red) !important; }
.mnb-oc-danger:hover { background:#FEF2F2; }

/* ── HERO ────────────────────────────────────────────────────── */
.hero { background:linear-gradient(135deg,#1A6FFF 0%,#0047CC 100%); color:#fff; padding:clamp(20px,5vw,44px) 0 clamp(18px,4vw,36px); position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-80px; right:-80px; width:300px; height:300px; background:rgba(255,255,255,.04); border-radius:50%; pointer-events:none; }
.hero h1 { font-family:'Playfair Display',serif; font-size:clamp(1.35rem,4vw,2.1rem); font-weight:600; line-height:1.22; margin-bottom:.5rem; }
.hero p  { font-size:clamp(.82rem,2vw,.95rem); opacity:.8; margin-bottom:1.1rem; }

.search-box { background:#fff; border-radius:12px; display:flex; align-items:center; gap:0; box-shadow:0 6px 28px rgba(0,0,0,.18); overflow:hidden; }
.search-box input  { border:none; outline:none; flex:1; font-size:.88rem; font-family:'DM Sans',sans-serif; color:var(--text); padding:11px 14px; min-width:0; }
.search-box select { border:none; outline:none; font-size:.8rem; font-family:'DM Sans',sans-serif; color:var(--muted); border-left:1px solid var(--border); padding:0 10px; background:transparent; cursor:pointer; height:100%; }
.search-box button { background:var(--green); color:#fff; border:none; padding:11px 18px; font-size:.84rem; font-weight:600; cursor:pointer; transition:background .2s; white-space:nowrap; flex-shrink:0; }
.search-box button:hover { background:var(--green-mid); }

.hero-stats     { display:flex; gap:clamp(1rem,4vw,2.5rem); margin-top:1.2rem; flex-wrap:wrap; }
.hstat .num     { font-size:clamp(1.1rem,3vw,1.45rem); font-weight:700; }
.hstat .lbl     { font-size:.7rem; opacity:.65; }

/* ── CATEGORY BAR ────────────────────────────────────────────── */
.cat-bar { background:#fff; border-bottom:1px solid var(--border); padding:8px 1rem; overflow-x:auto; white-space:nowrap; display:flex; gap:6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.cat-bar::-webkit-scrollbar { display:none; }
.cpill { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border:1px solid var(--border); border-radius:20px; font-size:.77rem; cursor:pointer; transition:all .15s; color:var(--muted); background:#fff; user-select:none; white-space:nowrap; text-decoration:none; flex-shrink:0; }
.cpill:hover  { border-color:var(--accent); color:var(--green); }
.cpill.active { background:var(--green-light); border-color:var(--accent); color:var(--green); font-weight:600; }

/* ── DESKTOP SIDEBAR ─────────────────────────────────────────── */
.mnb-sidebar   { background:#fff; min-height:calc(100vh - 120px); padding:14px 10px; border-right:1px solid var(--border); }
.mnb-sb-title  { font-size:.64rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); font-weight:700; margin:14px 0 6px; }
.mnb-sb-title:first-child { margin-top:0; }
.mnb-fi { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; font-size:.81rem; color:var(--muted); text-decoration:none; transition:all .12s; }
.mnb-fi:hover  { background:var(--bg); color:var(--text); }
.mnb-fi.active { background:var(--green-light); color:var(--green); font-weight:600; }
.mnb-fi i { font-size:.85rem; width:16px; flex-shrink:0; }

/* Offcanvas sidebar body (mobile) */
.filter-oc-body .mnb-sb-title { padding:0 4px; }
.filter-oc-body .mnb-fi       { padding:8px 10px; }

/* ── VIEW TOGGLE ─────────────────────────────────────────────── */
.mnb-view-tabs { display:flex; gap:3px; background:var(--bg); border-radius:10px; padding:4px; width:fit-content; }
.mnb-vtab { padding:5px 12px; border-radius:8px; font-size:.78rem; cursor:pointer; color:var(--muted); transition:all .15s; border:none; background:transparent; display:flex; align-items:center; gap:5px; font-family:'DM Sans',sans-serif; }
.mnb-vtab.active { background:#fff; color:var(--green); font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.08); }

/* ── NOTICE CARDS ────────────────────────────────────────────── */
.mnb-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:13px 15px; margin-bottom:10px; cursor:pointer; transition:all .18s; animation:fadeUp .28s ease both; }
.mnb-card:hover        { border-color:#4D9FFF; box-shadow:0 4px 18px rgba(26,111,255,.12); transform:translateY(-1px); }
.mnb-card-urgent       { border-left:3px solid var(--red) !important; }
.mnb-card-expired      { opacity:.52; border-style:dashed; }
.mnb-card-title        { font-size:.9rem; font-weight:600; margin-bottom:3px; line-height:1.3; word-break:break-word; }
.mnb-card-biz          { font-size:.75rem; color:var(--muted); margin-bottom:5px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.mnb-card-body         { font-size:.81rem; color:#4B5563; line-height:1.6; margin-bottom:7px; word-break:break-word; }
.mnb-card-meta         { font-size:.71rem; color:var(--muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mnb-card-meta i       { vertical-align:-2px; }

/* ── TAGS / CHIPS / BADGES ───────────────────────────────────── */
.mnb-tag  { display:inline-block; font-size:.67rem; font-weight:600; padding:3px 8px; border-radius:9px; margin-right:3px; margin-bottom:2px; }
.mnb-tag-restaurant,.mnb-tag-offer { background:#DCFCE7; color:#166534; }
.mnb-tag-vacancy    { background:#DBEAFE; color:#1E40AF; }
.mnb-tag-sellrent   { background:#FEF9C3; color:#713F12; }
.mnb-tag-holiday    { background:#EFF6FF; color:#1E40AF; }
.mnb-tag-death      { background:#F1F5F9; color:#334155; }
.mnb-tag-missing    { background:#FFF7ED; color:#9A3412; }
.mnb-tag-wanted     { background:#ECFDF5; color:#065F46; }
.mnb-tag-alert      { background:#FFF7ED; color:#C2410C; }

/* backward compat */
.t-restaurant,.t-offer { background:#DCFCE7; color:#166534; }
.t-vacancy    { background:#DBEAFE; color:#1E40AF; }
.t-sellrent   { background:#FEF9C3; color:#713F12; }
.t-holiday    { background:#EFF6FF; color:#1E40AF; }
.t-death      { background:#F1F5F9; color:#334155; }
.t-missing    { background:#FFF7ED; color:#9A3412; }
.t-wanted     { background:#ECFDF5; color:#065F46; }
.t-alert      { background:#FFF7ED; color:#C2410C; }

.mnb-chip        { display:inline-block; font-size:.67rem; padding:3px 8px; border-radius:9px; font-weight:600; white-space:nowrap; }
.mnb-chip-active { background:#DCFCE7; color:#166534; }
.mnb-chip-soon   { background:#FEF3C7; color:#92400E; }
.mnb-chip-expired{ background:#FEE2E2; color:var(--red); }
.mnb-chip-perp   { background:#EDE9FE; color:var(--purple); }
.exp-active      { background:#DCFCE7; color:#166534; }
.exp-soon        { background:#FEF3C7; color:#92400E; }
.exp-expired     { background:#FEE2E2; color:var(--red); }
.exp-perpetual   { background:#EDE9FE; color:var(--purple); }

.mnb-badge-urg  { background:#FEE2E2; color:var(--red); font-size:.65rem; padding:3px 8px; border-radius:9px; font-weight:700; white-space:nowrap; }
.mnb-badge-new  { background:#EEF4FF; color:#1A6FFF; font-size:.65rem; padding:3px 8px; border-radius:9px; font-weight:700; }
.mnb-badge-perp { background:#EDE9FE; color:var(--purple); font-size:.65rem; padding:3px 8px; border-radius:9px; font-weight:700; }

/* ── FORMS ───────────────────────────────────────────────────── */
.form-label { font-size:.82rem; font-weight:600; margin-bottom:4px; }
.form-control:focus,.form-select:focus { border-color:#4D9FFF; box-shadow:0 0 0 3px rgba(26,111,255,.1); }
.expiry-toggle { display:flex; gap:8px; flex-wrap:wrap; }
.etog { padding:7px 14px; border:1px solid var(--border); border-radius:8px; font-size:.8rem; cursor:pointer; transition:all .15s; background:#fff; color:var(--muted); user-select:none; }
.etog.active { background:var(--green-light); border-color:var(--accent); color:var(--green); font-weight:600; }
.btn-green { background:var(--green); color:#fff; border:none; padding:10px 22px; border-radius:8px; font-weight:600; font-size:.88rem; transition:background .2s; cursor:pointer; font-family:'DM Sans',sans-serif; }
.btn-green:hover { background:var(--green-mid); color:#fff; }
.btn-post { background:var(--green); color:#fff !important; border:none; padding:8px 16px; border-radius:8px; font-size:.82rem; font-weight:600; cursor:pointer; transition:background .2s; display:inline-flex; align-items:center; gap:5px; text-decoration:none !important; white-space:nowrap; }
.btn-post:hover { background:var(--green-mid); }

/* ── TABLES ──────────────────────────────────────────────────── */
.table-responsive { -webkit-overflow-scrolling:touch; border-radius:0 0 12px 12px; }
.table-responsive thead th { white-space:nowrap; }

/* ── AUTH ────────────────────────────────────────────────────── */
.auth-wrap { max-width:420px; margin:clamp(12px,4vw,40px) auto; background:#fff; border-radius:14px; border:1px solid var(--border); padding:clamp(18px,4vw,32px); box-shadow:0 4px 24px rgba(0,0,0,.06); }
.auth-wrap h2 { font-family:'Playfair Display',serif; font-weight:600; font-size:1.4rem; margin-bottom:4px; }

/* ── CARDS (generic) ─────────────────────────────────────────── */
.mnb-info-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:clamp(12px,3vw,18px); }
.stat-card     { background:#fff; border:1px solid var(--border); border-radius:12px; padding:clamp(12px,2vw,18px); transition:box-shadow .15s; }
.stat-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.07); }
.stat-num { font-size:clamp(1.5rem,3vw,2rem); font-weight:700; line-height:1; }
.stat-label { font-size:.78rem; color:var(--muted); margin-top:5px; }
.stat-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }

/* ── FOOTER ──────────────────────────────────────────────────── */
.site-footer { background:#fff; border-top:1px solid var(--border); padding:18px 0; margin-top:clamp(24px,4vw,48px); }
.footer-brand { font-family:'Playfair Display',serif; font-size:.95rem; color:var(--text); }
.footer-copy  { font-size:.76rem; color:var(--muted); }
.footer-link  { font-size:.76rem; color:var(--muted); text-decoration:none; }
.footer-link:hover { color:var(--green); }

/* ── EMPTY ───────────────────────────────────────────────────── */
.empty { text-align:center; padding:clamp(30px,6vw,60px) 20px; color:var(--muted); }
.empty i { font-size:2.8rem; margin-bottom:1rem; opacity:.35; display:block; }

/* ── MAP ─────────────────────────────────────────────────────── */
.map-legend { display:flex; gap:12px; flex-wrap:wrap; font-size:.75rem; color:var(--muted); margin-top:10px; }
.ml-item    { display:flex; align-items:center; gap:5px; }
.ml-dot     { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ── FLASH / ALERT BOXES ─────────────────────────────────────── */
.flash-success { background:#DCFCE7; color:#166534; border:1px solid #BBF7D0; border-radius:8px; padding:10px 16px; margin-bottom:16px; font-size:.85rem; }
.flash-error   { background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; border-radius:8px; padding:10px 16px; margin-bottom:16px; font-size:.85rem; }

/* ── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════════════════════════════
   MOBILE  <992px
   ══════════════════════════════════════════════════════════════ */
@media (max-width:991.98px) {
  .search-box { flex-direction:column; align-items:stretch; padding:0; border-radius:10px; }
  .search-box input  { border-bottom:1px solid var(--border); border-radius:0; padding:10px 14px; }
  .search-box select { border-left:none; border-bottom:1px solid var(--border); border-radius:0; padding:9px 14px; width:100%; }
  .search-box button { border-radius:0 0 10px 10px; padding:10px; }
  .cat-bar { padding:7px 10px; gap:5px; }
  .cpill   { padding:5px 10px; font-size:.73rem; }
  .auth-wrap { margin:14px auto; }
}

@media (max-width:767.98px) {
  .mnb-navbar { height:52px; }
  .mnb-brand-text { font-size:.9rem; }
  .mnb-beta { display:none; }
  .mnb-card        { padding:11px 12px; }
  .mnb-card-title  { font-size:.87rem; }
  .mnb-card-body   { font-size:.79rem; }
  .mnb-card-meta   { gap:7px; font-size:.7rem; }
  .expiry-toggle { flex-direction:column; }
  .etog { text-align:center; }
}

@media (max-width:575.98px) {
  .hero p { margin-bottom:.8rem; }
  .hero-stats { gap:.9rem; }
  .hstat .num { font-size:1.05rem; }
  .mnb-btn-post,.btn-post { padding:6px 10px; font-size:.76rem; }
  .auth-wrap { padding:16px; border-radius:10px; }
}