/* Muazu Team Operations Portal — shared design tokens & components
   Deep Forest Green #013220 · Vivid Orange #FF4400 · Cream #FAF6EC
   Used by: admin screens, the public /team-portal/ app, and (inline) emails share the same palette. */

:root {
	--mtop-forest: #013220;
	--mtop-orange: #FF4400;
	--mtop-cream: #FAF6EC;
	--mtop-card: #FFFFFF;
	--mtop-hairline: #E7DFCB;
	--mtop-text: #16241C;
	--mtop-text-mute: #5C6B62;
	--mtop-sage: #5C8A6E;
	--mtop-sage-bg: #E9F1EA;
	--mtop-gold: #B8791A;
	--mtop-gold-bg: #FBF0DC;
	--mtop-red: #C23F1A;
	--mtop-red-bg: #FCEAE3;
}

.mz-font-display { font-family: 'Fraunces', Georgia, serif; }
.mz-font-body, .mtop-admin-wrap, #mtop-portal-root, .mtop-entry-form { font-family: 'IBM Plex Sans', -apple-system, sans-serif; }

/* ---- shared primitives (admin + portal) ---- */
.mtop-h1 { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600; color: var(--mtop-forest); margin: 4px 0 4px; }
.mtop-h2 { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 600; color: var(--mtop-forest); margin: 0 0 14px; }
.mtop-sub { color: var(--mtop-text-mute); font-size: 13.5px; margin-bottom: 20px; }
.mtop-muted { color: var(--mtop-text-mute); }

.mtop-card { background: var(--mtop-card); border: 1px solid var(--mtop-hairline); border-radius: 14px; padding: 20px; margin-bottom: 18px; }

.mtop-stat-row { display: flex; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.mtop-stat-card { flex: 1; min-width: 150px; background: #fff; border: 1px solid var(--mtop-hairline); border-radius: 14px; padding: 18px 20px; }
.mtop-stat-value { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 600; color: var(--mtop-forest); line-height: 1; }
.mtop-stat-label { font-size: 12.5px; color: var(--mtop-text-mute); margin-top: 6px; font-weight: 500; }

.mtop-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 20px; background: #F1EEE3; color: var(--mtop-text-mute); white-space: nowrap; }
.mtop-pill-new, .mtop-pill-approved, .mtop-pill-complete { background: var(--mtop-sage-bg); color: var(--mtop-sage); }
.mtop-pill-under_review, .mtop-pill-pending, .mtop-pill-submitted { background: var(--mtop-gold-bg); color: var(--mtop-gold); }
.mtop-pill-overdue, .mtop-pill-rejected { background: var(--mtop-red-bg); color: var(--mtop-red); }

.mtop-btn-primary { background: var(--mtop-orange); color: #fff; border: none; border-radius: 9px; padding: 9px 16px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.mtop-btn-ghost { background: transparent; color: var(--mtop-forest); border: 1px solid var(--mtop-hairline); border-radius: 8px; padding: 7px 12px; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.mtop-btn-sm { padding: 6px 11px; font-size: 12px; }

.mtop-table { width: 100%; border-collapse: collapse; }
.mtop-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--mtop-text-mute); padding: 8px 10px; border-bottom: 1px solid var(--mtop-hairline); }
.mtop-table td { padding: 12px 10px; border-bottom: 1px solid var(--mtop-hairline); font-size: 13.5px; vertical-align: top; }

.mtop-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--mtop-hairline); }
.mtop-tab { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--mtop-text-mute); text-decoration: none; border-bottom: 2px solid transparent; }
.mtop-tab.active { color: var(--mtop-forest); border-bottom-color: var(--mtop-orange); }

.mtop-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--mtop-hairline); font-size: 13.5px; font-weight: 500; }
.mtop-toggle-row:first-of-type { border-top: none; }
.mtop-field { display: block; margin-bottom: 16px; font-size: 12.5px; font-weight: 600; color: var(--mtop-text-mute); }
.mtop-field input { display: block; width: 100%; max-width: 360px; margin-top: 6px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--mtop-hairline); font-size: 13.5px; font-family: inherit; }

.mtop-notice { background: var(--mtop-gold-bg); color: var(--mtop-gold); padding: 10px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.mtop-notice-success { background: var(--mtop-sage-bg); color: var(--mtop-sage); }

/* ---- admin wrapper ---- */
.mtop-admin-wrap { background: var(--mtop-cream); margin: 0 -20px; padding: 20px 26px 60px; color: var(--mtop-text); }
.mtop-admin-topbar { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.mtop-admin-logo { width: 28px; height: 28px; border-radius: 7px; background: var(--mtop-orange); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 700; }
.mtop-admin-title { font-family: 'Fraunces', serif; font-weight: 600; color: var(--mtop-forest); font-size: 15px; }

/* ---- public portal shell ---- */
.mtop-portal-body { background: var(--mtop-cream); margin: 0; }
.mtop-portal-loggedout { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.mtop-portal-loggedout-card { background: #fff; border: 1px solid var(--mtop-hairline); border-radius: 16px; padding: 40px; text-align: center; max-width: 360px; }
.mtop-portal-logo { width: 44px; height: 44px; border-radius: 11px; background: var(--mtop-orange); color: #fff; font-family: 'Fraunces', serif; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.mtop-portal-loggedout-card h1 { font-family: 'Fraunces', serif; font-size: 20px; color: var(--mtop-forest); margin: 0 0 8px; }
.mtop-portal-loggedout-card p { color: var(--mtop-text-mute); font-size: 13.5px; margin-bottom: 20px; }

#mtop-portal-root { min-height: 100vh; display: flex; }
.mtop-sidebar { width: 230px; flex-shrink: 0; background: var(--mtop-forest); padding: 22px 14px; }
.mtop-sidebar-nav-item { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 9px; color: #B9CFC1; font-size: 13.5px; font-weight: 500; cursor: pointer; margin-bottom: 2px; border-left: 2.5px solid transparent; }
.mtop-sidebar-nav-item.active { background: rgba(255,68,0,0.16); color: #fff; font-weight: 600; border-left-color: var(--mtop-orange); }
.mtop-main { flex: 1; min-width: 0; padding: 26px; }

.mtop-next-action { border-color: var(--mtop-orange); border-width: 1.5px; background: #FFF9F6; }
.mtop-attention-banner { background: var(--mtop-forest); color: #fff; border: none; }
.mtop-attention-item { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.mtop-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mtop-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--mtop-hairline); color: var(--mtop-forest); background: #fff; white-space: nowrap; }

/* ---- public entry form ---- */
.mtop-entry-form { max-width: 440px; }
.mtop-entry-form label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--mtop-text-mute); }
.mtop-entry-form input, .mtop-entry-form select, .mtop-entry-form textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--mtop-hairline); font-size: 13.5px; font-family: inherit; }
.mtop-entry-form-message { margin-top: 12px; font-size: 13px; font-weight: 600; }