/* ==========================================================================
   MaziwaPlus Portal — design tokens
   Palette: pasture green + milk cream + sky blue accent (rural-dairy,
   not corporate-blue). Built mobile-first for farmers on basic phones
   and collectors standing at a milk can in the yard.
   ========================================================================== */
:root {
  --mp-green-900: #1c3d2e;
  --mp-green-700: #2f6b4f;
  --mp-green-500: #3f8f68;
  --mp-green-100: #e6f2ea;
  --mp-cream: #fbf8f1;
  --mp-cream-dark: #f1ead9;
  --mp-blue: #2f7cad;
  --mp-blue-light: #eaf4fb;
  --mp-amber: #c9822b;
  --mp-amber-light: #fbf0de;
  --mp-red: #b1493a;
  --mp-red-light: #fbeae7;
  --mp-ink: #26302b;
  --mp-ink-soft: #5b665f;
  --mp-ink-faint: #8b9089;
  --mp-border: #e1dccb;
  /* Radius scale, soft-SaaS style: cards get the roundest treatment,
     buttons/inputs a step down, badges/pills fully round. Mirrors a
     rounded-3xl/2xl/full hierarchy rather than one flat radius everywhere. */
  --mp-radius: 20px;
  --mp-radius-sm: 12px;
  --mp-radius-pill: 999px;
  /* Layered, low-contrast shadow instead of one heavy drop shadow -
     reads as "soft SaaS" rather than "skeuomorphic card". */
  --mp-shadow: 0 1px 2px rgba(28, 61, 46, 0.04), 0 4px 14px rgba(28, 61, 46, 0.07);
  --mp-shadow-sm: 0 1px 2px rgba(28, 61, 46, 0.05);
  --mp-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--mp-font-body);
  background: var(--mp-cream);
  color: var(--mp-ink);
  min-height: 100vh;
}

h1, h2, h3, .mp-display {
  font-family: var(--mp-font-display);
  color: var(--mp-green-900);
  font-weight: 600;
  letter-spacing: -0.01em;
}

a { color: var(--mp-green-700); }
a:hover { color: var(--mp-green-900); }

/* ---------- Layout shell: left sidebar + main column ---------- */
.mp-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}
.mp-main-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Main content grows to fill available height so the footer sits pinned
   at the bottom of the viewport on short pages, and simply follows
   content down (not fixed) once a page is taller than the screen. */
.mp-main-col > main {
  flex: 1 0 auto;
}

/* ---------- Sidebar ---------- */
.mp-sidebar {
  --bs-offcanvas-width: 270px;
  width: 264px;
  flex: 0 0 264px;
  background: linear-gradient(165deg, var(--mp-green-900) 0%, #13291e 65%, #0f2118 100%);
  color: var(--mp-cream);
  border: none;
}
/* Pin the sidebar to the viewport on desktop so it stops scrolling away
   with a tall page - only its own nav list (below) scrolls internally
   once the group list outgrows the screen. */
@media (min-width: 992px) {
  .mp-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
  }
}
.mp-sidebar-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.25rem 1rem 1rem;
}
.mp-sidebar-brand, .mp-mobile-brand {
  font-family: var(--mp-font-display);
  color: var(--mp-cream) !important;
  font-size: 1.3rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.mp-sidebar .mp-drop, .mp-mobile-bar .mp-drop {
  width: 12px; height: 16px;
  background: linear-gradient(160deg, var(--mp-amber) 0%, var(--mp-cream) 100%);
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  display: inline-block;
  flex: none;
}
.mp-sidebar-nav {
  margin-top: 1.5rem;
  flex: 1 1 auto;
  overflow-y: auto;
}
.mp-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mp-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--mp-radius-sm);
  color: rgba(251, 248, 241, 0.82);
  font-weight: 500;
  font-size: 0.94rem;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mp-nav-link:hover {
  background: rgba(251, 248, 241, 0.08);
  color: #fff;
}
.mp-nav-link.active {
  background: linear-gradient(90deg, rgba(201,130,43,0.22) 0%, rgba(251,248,241,0.06) 100%);
  color: #fff;
  border-left-color: var(--mp-amber);
  font-weight: 600;
}
.mp-nav-link.mp-nav-sub {
  padding-left: 1.1rem;
  font-size: 0.88rem;
}
.mp-nav-group-label {
  margin: 0.9rem 0 0.15rem;
  padding: 0 0.75rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(251, 248, 241, 0.45);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.mp-sidebar .badge-notif {
  background: var(--mp-amber);
  font-size: 0.65rem;
}
.mp-sidebar .nav-group-badge {
  background: var(--mp-amber);
  font-size: 0.62rem;
}
.badge-new {
  background: var(--mp-blue);
  font-size: 0.6rem;
  vertical-align: middle;
  margin-left: 0.35rem;
  letter-spacing: 0.02em;
}

/* ---------- Sidebar accordion groups ---------- */
/* Each group label is now a toggle button (Bootstrap collapse) rather
   than static text, so 8+ groups don't all render open at once. */
.mp-nav-group { margin: 0; }
.mp-nav-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin: 0.9rem 0 0.15rem;
  padding: 0.3rem 0.75rem;
  background: none;
  border: none;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(251, 248, 241, 0.55);
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.mp-nav-group-toggle:hover {
  color: #fff;
  background: rgba(251, 248, 241, 0.06);
}
.mp-nav-group-toggle-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.mp-chevron {
  transition: transform 0.18s ease;
  flex: none;
}
.mp-nav-group-toggle[aria-expanded="true"] .mp-chevron {
  transform: rotate(90deg);
}
.mp-nav-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* ---------- Unified "needs your attention" indicator ---------- */
/* Replaces separately-rendered $unreadCount / $pendingAdvCount badges
   scattered across the sidebar with one combined signal up top. */
.mp-attention-pill {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--mp-radius-sm);
  background: rgba(201, 130, 43, 0.18);
  border: 1px solid rgba(201, 130, 43, 0.4);
  color: var(--mp-cream);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mp-attention-pill:hover {
  background: rgba(201, 130, 43, 0.3);
  border-color: var(--mp-amber);
  color: #fff;
}
.mp-attention-pill svg { flex: none; color: var(--mp-amber); }
.mp-mobile-attention-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 0.58rem;
  padding: 0.15em 0.4em;
}
.mp-sidebar-bottom {
  border-top: 1px solid rgba(251, 248, 241, 0.14);
  padding-top: 0.9rem;
  margin-top: 0.75rem;
}
.mp-sidebar-user {
  font-size: 0.8rem;
  color: rgba(251, 248, 241, 0.75);
  margin-bottom: 0.6rem;
  line-height: 1.4;
}
.mp-sidebar-role {
  color: rgba(251, 248, 241, 0.5);
  font-size: 0.74rem;
}

/* ---------- Mobile top bar (sidebar becomes an off-canvas drawer below lg) ---------- */
.mp-mobile-bar {
  background: linear-gradient(100deg, var(--mp-green-900) 0%, var(--mp-green-700) 130%);
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.mp-mobile-bar .mp-mobile-brand { font-size: 1.15rem; }
.offcanvas-header .mp-mobile-brand { color: var(--mp-cream) !important; }
@media (min-width: 992px) {
  .mp-mobile-bar { display: none !important; }
}

.btn-mp-logout {
  background: transparent;
  border: 1.5px solid var(--mp-cream);
  color: var(--mp-cream);
  font-weight: 600;
  border-radius: var(--mp-radius-sm);
  padding: 0.3rem 0.75rem;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-mp-logout:hover {
  background: var(--mp-cream);
  border-color: var(--mp-cream);
  color: var(--mp-green-900);
}

/* ---------- Back / Home controls — live in the navbar itself ---------- */
.mp-nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(251, 248, 241, 0.08);
  border: 1px solid rgba(251, 248, 241, 0.3);
  color: var(--mp-cream);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.mp-nav-icon-btn:hover {
  background: var(--mp-amber);
  border-color: var(--mp-amber);
  color: #fff;
}
.mp-nav-icon-btn:active {
  transform: scale(0.94);
}

/* ---------- Breadcrumb ("you are here" trail) ---------- */
.mp-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--mp-ink-soft);
  margin-bottom: 1rem;
}
.mp-breadcrumb a {
  color: var(--mp-ink-soft);
  text-decoration: none;
  font-weight: 600;
}
.mp-breadcrumb a:hover { color: var(--mp-green-700); }
.mp-breadcrumb-sep { color: var(--mp-border); }
.mp-breadcrumb-group { font-weight: 600; color: var(--mp-ink-soft); }
.mp-breadcrumb-current { font-weight: 600; color: var(--mp-green-900); }

/* ---------- Cards ---------- */
.mp-card {
  background: #fff;
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow);
  padding: 1.5rem;
  align-items: center;
  margin:15px ;
  
}


.mp-stat {
  position: relative;
  border-radius: var(--mp-radius);
  padding: 1.35rem 1.5rem 1.25rem;
  border: 1px solid var(--mp-border);
  box-shadow: var(--mp-shadow-sm);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mp-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--mp-stat-accent, var(--mp-green-500));
}
a:hover > .mp-stat {
  transform: translateY(-3px);
  box-shadow: var(--mp-shadow);
  cursor: pointer;
}
.mp-stat--green { background: linear-gradient(165deg, var(--mp-green-100) 0%, #fff 130%); --mp-stat-accent: var(--mp-green-500); }
.mp-stat--blue { background: linear-gradient(165deg, var(--mp-blue-light) 0%, #fff 130%); --mp-stat-accent: var(--mp-blue); }
.mp-stat--amber { background: linear-gradient(165deg, var(--mp-amber-light) 0%, #fff 130%); --mp-stat-accent: var(--mp-amber); }
.mp-stat--red { background: linear-gradient(165deg, var(--mp-red-light) 0%, #fff 130%); --mp-stat-accent: var(--mp-red); }
.mp-stat .label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mp-ink-soft);
  font-weight: 700;
}
.mp-stat .value {
  font-family: var(--mp-font-display);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mp-green-900);
  line-height: 1.15;
}
.mp-stat .value.live::after {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--mp-green-500);
  animation: mp-pulse 1.6s infinite;
  vertical-align: middle;
}
@keyframes mp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(63,143,104,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(63,143,104,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,143,104,0); }
}

/* ---------- Buttons ---------- */
.btn-mp-primary {
  background: linear-gradient(135deg, var(--mp-green-500) 0%, var(--mp-green-700) 100%);
  border-color: var(--mp-green-700);
  border-radius: var(--mp-radius-sm);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(28, 61, 46, 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-mp-primary:hover {
  background: linear-gradient(135deg, var(--mp-green-700) 0%, var(--mp-green-900) 100%);
  border-color: var(--mp-green-900);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(28, 61, 46, 0.28);
}
.btn-mp-outline {
  border: 1.5px solid var(--mp-green-700);
  border-radius: var(--mp-radius-sm);
  color: var(--mp-green-700);
  font-weight: 600;
  background: #fff;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-mp-outline:hover { background: var(--mp-green-700); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(28, 61, 46, 0.18); }
.btn, .btn-sm, .form-control, .form-select, .input-group-text {
  border-radius: var(--mp-radius-sm) !important;
}

/* ---------- Forms ---------- */
.mp-form-panel {
  max-width: 460px;
  margin: 3rem auto;
  padding: 50px
  
 
}
.form-control, .form-select {
  border-color: var(--mp-border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--mp-green-500);
  box-shadow: 0 0 0 0.2rem rgba(63,143,104,0.18);
}
label { font-weight: 600; color: var(--mp-ink); font-size: 0.9rem; }

/* ---------- Tables ---------- */
.mp-table thead th {
  background: var(--mp-green-100);
  color: var(--mp-green-900);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: none;
}
.mp-table td, .mp-table th { vertical-align: middle; }

/* ---------- Status badges ----------
   Soft-pill treatment: tinted background + matching border + solid text,
   rather than a solid fill with white text - reads calmer in a table full
   of them and keeps the fill colors from competing with primary buttons. */
.badge-status-pending, .badge-status-approved, .badge-status-rejected,
.badge-status-clarification_requested, .text-bg-purple,
.badge-status-processed, .badge-status-disbursed {
  border-radius: var(--mp-radius-pill);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  padding: 0.32em 0.75em;
  border: 1px solid transparent;
}
.badge-status-pending { background: var(--mp-amber-light); color: var(--mp-amber); border-color: #ecd2a8; }
.badge-status-approved { background: var(--mp-blue-light); color: var(--mp-blue); border-color: #bfe0f2; }
.badge-status-rejected { background: var(--mp-red-light); color: var(--mp-red); border-color: #eec6bd; }
.badge-status-clarification_requested { background: #efecf7; color: #6a5a9e; border-color: #d8d0ec; }
.text-bg-purple { background: #efecf7; color: #6a5a9e; }
.badge-status-processed { background: var(--mp-blue-light); color: var(--mp-blue); border-color: #bfe0f2; }
.badge-status-disbursed { background: var(--mp-green-100); color: var(--mp-green-700); border-color: #c7e3d3; }

/* Bootstrap's own text-bg-* badges (used for vet-visit / order / appointment
   status elsewhere) get the same soft-pill treatment for consistency. */
.badge.rounded-pill, span.badge {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- Toasts / flash ---------- */
.mp-toast { border-radius: var(--mp-radius-sm); border: none; }

/* ---------- Misc ---------- */
.mp-section-title {
  font-family: var(--mp-font-display);
  color: var(--mp-green-900);
  border-bottom: 2px solid var(--mp-green-100);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}
.mp-footer {
  color: var(--mp-ink-soft);
  font-size: 0.85rem;
  text-align: center;
  padding: 2rem 1rem 1rem;
}
.mp-spinner-overlay {
  position: fixed; inset: 0; background: rgba(251,248,241,0.7);
  display: none; align-items: center; justify-content: center; z-index: 2000;
}
.mp-spinner-overlay.active { display: flex; }

/* ---------- Split-screen auth page (login.php) ---------- */
.mp-auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .mp-auth-shell { flex-direction: row; }
}
.mp-auth-brand {
  flex: 0 0 auto;
  min-height: 220px;
  background:
    radial-gradient(circle at 15% 20%, rgba(251,248,241,0.10) 0%, transparent 45%),
    linear-gradient(155deg, var(--mp-green-500) 0%, var(--mp-green-900) 55%, #0f2118 100%);
  color: var(--mp-cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
}
@media (min-width: 992px) {
  .mp-auth-brand {
    flex: 0 0 44%;
    min-height: 100vh;
    padding: 3rem 4rem;
  }
}
.mp-auth-brand .mp-drop {
  width: 20px; height: 26px;
  background: linear-gradient(160deg, var(--mp-amber) 0%, var(--mp-cream) 100%);
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  display: inline-block;
  margin-bottom: 1.5rem;
}
.mp-auth-brand h1 {
  color: var(--mp-cream);
  font-size: 2.1rem;
  max-width: 420px;
}
@media (min-width: 992px) {
  .mp-auth-brand h1 { font-size: 2.6rem; }
}
.mp-auth-brand p {
  color: rgba(251, 248, 241, 0.78);
  max-width: 380px;
  font-size: 1.02rem;
}
.mp-auth-brand-glow {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,130,43,0.28) 0%, transparent 70%);
  bottom: -160px; right: -120px;
  pointer-events: none;
}
.mp-auth-form {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  background: var(--mp-cream);
}
.mp-auth-card {
  width: 100%;
  max-width: 400px;
}
.mp-auth-card .mp-back-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mp-ink-soft);
  text-decoration: none;
}
.mp-auth-card .mp-back-link:hover { color: var(--mp-green-900); }

/* ---------- Auth topbar: single Staff/Farmer toggle button ---------- */
/* Replaces the old "Log in as" <select> - a farmer never sees a dropdown
   of roles to cycle through; staff opt in with one click and can just as
   plainly switch back. */
.mp-auth-topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}
.mp-mode-toggle-btn {
  background: transparent;
  border: 1.5px solid var(--mp-border);
  color: var(--mp-ink-soft);
  font-weight: 600;
  font-size: 0.82rem;
  border-radius: var(--mp-radius-pill);
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mp-mode-toggle-btn:hover {
  border-color: var(--mp-green-700);
  color: var(--mp-green-700);
  background: var(--mp-green-100);
}
.mp-auth-shell[data-mode="staff"] .mp-mode-toggle-btn {
  border-color: var(--mp-green-700);
  background: var(--mp-green-100);
  color: var(--mp-green-700);
}

/* ---------- Month-view calendar (includes/calendar.php) ---------- */
.mp-calendar {
  background: #fff;
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-sm);
  padding: 1.25rem;
}
.mp-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.mp-cal-title {
  font-family: var(--mp-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--mp-green-900);
}
.mp-cal-nav {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--mp-border);
  color: var(--mp-green-900);
  text-decoration: none;
  font-weight: 700;
}
.mp-cal-nav:hover { background: var(--mp-green-100); }
.mp-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.mp-cal-dow { margin-bottom: 4px; }
.mp-cal-dow-cell {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mp-ink-soft);
  padding: 0.25rem 0;
}
.mp-cal-cell {
  min-height: 68px;
  border-radius: var(--mp-radius-sm);
  border: 1px solid transparent;
  padding: 0.3rem;
  background: var(--mp-cream);
}
.mp-cal-cell--empty { background: transparent; }
.mp-cal-cell--today { border-color: var(--mp-amber); background: var(--mp-amber-light); }
.mp-cal-cell--has-events { background: var(--mp-green-100); }
.mp-cal-daynum {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--mp-ink-soft);
  margin-bottom: 0.2rem;
}
.mp-cal-cell--today .mp-cal-daynum { color: var(--mp-amber); }
.mp-cal-event {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 5px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Default fill only applies when no Bootstrap text-bg-* badge class is
   present on the event. Written with :where() (zero specificity) so a
   per-event status colour (text-bg-warning, text-bg-success, etc. -
   see includes/calendar.php) always wins the cascade instead of being
   silently overridden by this rule just because style.css loads after
   bootstrap.min.css. Previously every calendar event rendered the same
   flat green regardless of its actual status. */
:where(.mp-cal-event) {
  background: var(--mp-green-700);
  color: #fff;
}
.mp-cal-more { font-size: 0.6rem; color: var(--mp-ink-soft); font-weight: 600; }

@media (max-width: 576px) {
  .mp-cal-cell { min-height: 44px; }
  .mp-cal-event { display: none; }
  .mp-cal-cell--has-events .mp-cal-daynum::after { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--mp-amber); margin-left: 4px; }
}

/* ==========================================================================
   News & Updates — manager-authored articles surfaced on every dashboard
   and on the full news.php feed. Same soft-card language as the rest of
   the app; photos get a light border/radius rather than a "blog" treatment
   so it feels native to MaziwaPlus rather than bolted on.
   ========================================================================== */
.mp-news-viewall {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--mp-blue);
  text-decoration: none;
  white-space: nowrap;
}
.mp-news-viewall:hover { text-decoration: underline; }

/* --- Dashboard widget (compact list) --- */
.mp-news-list { display: flex; flex-direction: column; gap: 0.65rem; }
.mp-news-item {
  display: flex;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  padding: 0.4rem;
  border-radius: var(--mp-radius-sm);
  transition: background 0.15s ease;
}
.mp-news-item:hover { background: var(--mp-cream-dark); }
.mp-news-thumb {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--mp-green-100);
}
.mp-news-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.mp-news-item-body { display: flex; flex-direction: column; min-width: 0; }
.mp-news-item-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--mp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-news-item-excerpt {
  font-size: 0.78rem;
  color: var(--mp-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-news-item-date {
  font-size: 0.7rem;
  color: var(--mp-ink-faint);
  margin-top: 0.1rem;
}

/* --- Manager's gallery thumbnails on news_manage.php --- */
.mp-news-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.mp-news-gallery-item {
  position: relative;
  width: 96px;
  height: 96px;
}
.mp-news-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--mp-radius-sm);
  border: 1px solid var(--mp-border);
}
.mp-news-gallery-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--mp-red);
  color: #fff;
  line-height: 1;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--mp-shadow-sm);
}

/* --- Full feed on news.php --- */
.mp-news-feed { display: flex; flex-direction: column; gap: 1.25rem; }
.mp-news-post-meta {
  display: flex;
  gap: 0.6rem;
  font-size: 0.75rem;
  color: var(--mp-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.mp-news-post-title {
  font-family: var(--mp-font-display);
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
}
.mp-news-post-body {
  color: var(--mp-ink-soft);
  margin-bottom: 0;
  white-space: pre-line;
}
.mp-news-post-gallery {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  grid-template-columns: 1fr;
}
.mp-news-post-gallery--2 { grid-template-columns: 1fr 1fr; }
.mp-news-post-gallery--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.mp-news-post-gallery--3 img:first-child { grid-row: span 2; }
.mp-news-post-gallery img {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  border-radius: var(--mp-radius-sm);
}

@media (max-width: 576px) {
  .mp-news-post-gallery--3 { grid-template-columns: 1fr 1fr; }
  .mp-news-post-gallery--3 img:first-child { grid-row: auto; grid-column: span 2; }
}