/* 203MG Attendance System — front-end styles (v4)
   Organized into clearly separated sections:
   1. Design tokens (variables)      4. Hero / Page Header
   2. Base + Headings                5. Cards, status, forms, badges
   3. Menu (top navigation)          6. Buttons, locked popup, responsive
*/

/* ============ 1. DESIGN TOKENS ============ */
.mg203-wrap, .mg203-menu, .mg203-login-page {
	--ink: #16241F;
	--paper: #F6F5F1;
	--surface: #FFFFFF;
	--teal: #0F6659;
	--teal-deep: #0B4F45;
	--teal-tint: #EAF4F1;
	--amber: #B7791F;
	--amber-tint: #FBF1DF;
	--danger: #9A3B12;
	--danger-tint: #F6E4D8;
	--line: #DDE3DE;
	--muted: #5B6B64;

	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--font-heading: 'Space Grotesk', sans-serif;
	--font-size-base: 16px;
	--paragraph-font-size: 15px;
	--font-weight-base: 400;
	--line-height-base: 1.5;
	--letter-spacing-base: 0;

	--h1-size: 28px; --h2-size: 22px; --h3-size: 18px;
	--h4-size: 16px; --h5-size: 14px; --h6-size: 13px;

	--hero-bg: var(--teal);
	--hero-text: #EFF7F4;
	--hero-radius: 16px;
	--hero-padding: 40px 32px 46px;

	--menu-bg: transparent;
	--menu-link-font-size: 15px;
	--logo-height-menu: 32px;
	--logo-height-login: 56px;

	--btn-bg: var(--teal);
	--btn-bg-hover: var(--teal-deep);
	--btn-text: #ffffff;
	--btn-font-size: 15px;
	--btn-font-weight: 600;
	--btn-radius: 8px;

	--input-font-size: 16px;
	--input-label-font-size: 14px;
	--input-label-font-weight: 500;
	--input-border-color: #DDE3DE;
	--input-focus-color: var(--teal);
	--input-radius: 8px;
	--input-bg: transparent;
}

/* ============ 2. BASE + HEADINGS ============ */
.mg203-wrap {
	max-width: 780px;
	margin: 0 auto;
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-base);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-base);
	color: var(--ink);
	background: var(--paper);
}
.mg203-muted { color: var(--muted); font-size: var(--paragraph-font-size); }

.mg203-heading, .mg203-login-page h1 {
	font-family: var(--font-heading);
	margin: 0 0 8px;
}
.mg203-heading--h1, .mg203-login-page h1 { font-size: var(--h1-size); }
.mg203-heading--h2 { font-size: var(--h2-size); }
.mg203-heading--h3 { font-size: var(--h3-size); }
.mg203-heading--h4 { font-size: var(--h4-size); }
.mg203-heading--h5 { font-size: var(--h5-size); }
.mg203-heading--h6 { font-size: var(--h6-size); }

/* ============ 3. MENU (top navigation) ============ */
.mg203-menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	padding: 14px 18px;
	background: var(--menu-bg);
	border-radius: 12px;
	margin-bottom: 32px;
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.mg203-menu__logo-link { display: flex; align-items: center; text-decoration: none; }
.mg203-menu__logo-img { height: var(--logo-height-menu); width: auto; display: block; }
.mg203-menu__logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--ink); }

.mg203-menu__links { display: flex; gap: 10px; flex-wrap: wrap; }
.mg203-menu__links .mg203-btn { font-size: var(--menu-link-font-size); }

.mg203-menu__auth { display: flex; align-items: center; }
.mg203-btn-sm { padding: 8px 16px; }

/* Menu layout 1 (default): logo left · menu center · button right */
.mg203-menu--layout-left-center-right .mg203-menu__logo-link { order: 1; flex: 1; }
.mg203-menu--layout-left-center-right .mg203-menu__links { order: 2; flex: 0 0 auto; }
.mg203-menu--layout-left-center-right .mg203-menu__auth { order: 3; flex: 1; display: flex; justify-content: flex-end; }

/* Menu layout 2: logo center · menu left · button right */
.mg203-menu--layout-center-left-right .mg203-menu__links { order: 1; flex: 1; }
.mg203-menu--layout-center-left-right .mg203-menu__logo-link { order: 2; flex: 0 0 auto; }
.mg203-menu--layout-center-left-right .mg203-menu__auth { order: 3; flex: 1; display: flex; justify-content: flex-end; }

/* Menu layout 3: logo left · menu + button grouped right */
.mg203-menu--layout-left-grouped-right .mg203-menu__logo-link { order: 1; }
.mg203-menu--layout-left-grouped-right .mg203-menu__links { order: 2; margin-left: auto; margin-right: 10px; }
.mg203-menu--layout-left-grouped-right .mg203-menu__auth { order: 3; }

/* ============ 4. HERO / PAGE HEADER ============ */
.mg203-hero {
	background: var(--hero-bg);
	color: #EFF7F4;
	padding: var(--hero-padding);
	border-radius: var(--hero-radius);
	position: relative;
	overflow: hidden;
	margin-bottom: -26px;
}
.mg203-hero::after {
	content: "";
	position: absolute;
	right: -50px; top: -50px;
	width: 180px; height: 180px;
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 50%;
}
.mg203-hero__inner { position: relative; z-index: 1; max-width: 520px; }
.mg203-hero__title { font-weight: 700; color: var(--hero-text); }
.mg203-hero__description { margin: 0; font-size: var(--paragraph-font-size); color: var(--hero-text); opacity: 0.82; }

.mg203-content-after-band { position: relative; z-index: 2; padding-top: 42px; }

/* ============ 5. CARDS, STATUS, FORMS, BADGES ============ */
.mg203-card {
	background: var(--surface);
	border: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 20px;
}

.mg203-card.mg203-quote {
	background: var(--teal-tint);
	border-left: 4px solid var(--teal);
	padding: 20px 26px;
	position: relative;
}
.mg203-quote {
	color: var(--ink);
	font-style: italic;
	font-weight: 500;
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.5;
}

.mg203-notice {
	padding: 12px 16px;
	border-radius: 10px;
	margin-bottom: 16px;
	font-weight: 500;
	font-size: 0.92rem;
}
.mg203-notice-success { background: #ECFDF5; color: #146C43; border: 1px solid #BBF7D0; }
.mg203-notice-warning { background: var(--amber-tint); color: var(--amber); border: 1px solid #F4DFAF; }

.mg203-status-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px;
	border-left: 4px solid var(--teal);
}
.mg203-status-on_break { border-left-color: var(--amber); }
.mg203-status-done { border-left-color: var(--line); }

.mg203-status-badge { display: block; font-weight: 600; font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; }
.mg203-status-value { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; }
.mg203-status-on_break .mg203-status-value { color: var(--amber); }
.mg203-break-tag { font-weight: 400; opacity: 0.85; font-size: 1rem; }

.mg203-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mg203-inline { display: inline-block; }

.mg203-timeline, .mg203-breaks { list-style: none; margin: 12px 0 0; padding: 0; }
.mg203-timeline li, .mg203-breaks li {
	display: flex; justify-content: space-between; align-items: center;
	padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem;
}
.mg203-timeline li:last-child, .mg203-breaks li:last-child { border-bottom: none; }
.mg203-time { color: var(--muted); min-width: 90px; }

.mg203-tag-live { background: var(--danger-tint); color: var(--danger); border-radius: 999px; font-size: 0.72rem; padding: 2px 8px; margin-left: 6px; }

.mg203-form { margin-top: 6px; }
.mg203-field { margin-bottom: 20px; }
.mg203-field label { display: block; font-weight: var(--input-label-font-weight); font-size: var(--input-label-font-size); margin-bottom: 6px; color: var(--ink); }
.mg203-field-row { display: flex; gap: 20px; }
.mg203-field-row .mg203-field { flex: 1; }

.mg203-input {
	width: 100%; padding: 10px 2px; border: none; border-bottom: 1.5px solid var(--input-border-color);
	border-radius: 0; font-size: var(--input-font-size); font-family: var(--font-body);
	box-sizing: border-box; background: var(--input-bg); color: var(--ink);
}
.mg203-input:focus { outline: none; border-bottom-color: var(--input-focus-color); }
textarea.mg203-input { border: 1px solid var(--input-border-color); border-radius: var(--input-radius); padding: 10px 12px; background: var(--surface); }
textarea.mg203-input:focus { border-color: var(--input-focus-color); }
input[type="file"].mg203-input { border: none; padding: 6px 0; background: transparent; }
select.mg203-input { border: 1px solid var(--input-border-color); border-radius: var(--input-radius); padding: 10px 12px; background: var(--surface); }
select.mg203-input:focus { border-color: var(--input-focus-color); }

.mg203-badge { font-size: 0.76rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.mg203-badge-pending { background: var(--amber-tint); color: var(--amber); }
.mg203-badge-approved { background: var(--teal-tint); color: var(--teal-deep); }
.mg203-badge-rejected { background: var(--danger-tint); color: var(--danger); }

/* ============ 6. BUTTONS, LOCKED POPUP, LOGIN, RESPONSIVE ============ */
.mg203-btn {
	border: none;
	border-radius: var(--btn-radius);
	padding: 12px 20px;
	font-size: var(--btn-font-size);
	font-weight: var(--btn-font-weight);
	font-family: var(--font-body);
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease;
}
.mg203-btn:active { transform: scale(0.98); }
.mg203-btn-primary { background: var(--btn-bg); color: var(--btn-text); }
.mg203-btn-primary:hover { background: var(--btn-bg-hover); }
.mg203-btn-secondary { background: var(--teal-tint); color: var(--teal-deep); }
.mg203-btn-secondary:hover { filter: brightness(0.95); }
.mg203-btn-danger { background: var(--danger-tint); color: var(--danger); }
.mg203-btn-danger:hover { filter: brightness(0.95); }

.mg203-locked-overlay {
	position: fixed; inset: 0; background: rgba(22,36,31,0.55);
	display: flex; align-items: center; justify-content: center;
	z-index: 9999; padding: 20px;
}
.mg203-locked-modal { background: var(--surface); border-radius: 16px; padding: 38px 32px; max-width: 360px; text-align: center; position: relative; }
.mg203-locked-close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--muted); }
.mg203-locked-icon { font-size: 2rem; margin-bottom: 10px; }
.mg203-locked-modal h2 { margin: 0 0 8px; font-size: 1.2rem; font-family: var(--font-heading); }
.mg203-locked-modal p { margin: 0 0 22px; color: var(--muted); font-size: 0.92rem; }

.mg203-login-page { max-width: 380px; margin: 60px auto; }
.mg203-login-logo-wrap { text-align: center; margin-bottom: 24px; }
.mg203-login-logo { max-height: var(--logo-height-login); width: auto; display: inline-block; }
.mg203-login-logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; color: var(--ink); }
.mg203-login-card { background: var(--surface); border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); border-radius: 14px; padding: 38px 34px; }
.mg203-login-card .mg203-login-sub { color: var(--muted); font-size: var(--paragraph-font-size); margin-bottom: 26px; }
.mg203-login-foot { text-align: center; margin-top: 16px; font-size: 0.82rem; color: var(--muted); }
.mg203-login-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.mg203-login-actions .mg203-btn { flex: 1; min-width: 140px; }

@media (max-width: 600px) {
	.mg203-card, .mg203-hero { padding: 18px; border-radius: 10px; }
	.mg203-actions { flex-direction: column; }
	.mg203-btn { width: 100%; }
	.mg203-timeline li, .mg203-breaks li { flex-direction: column; align-items: flex-start; gap: 4px; }
	.mg203-field-row { flex-direction: column; gap: 0; }

	.mg203-menu { flex-direction: column; align-items: center; text-align: center; }
	.mg203-menu--layout-left-center-right .mg203-menu__logo-link,
	.mg203-menu--layout-center-left-right .mg203-menu__logo-link,
	.mg203-menu--layout-left-grouped-right .mg203-menu__logo-link,
	.mg203-menu--layout-left-center-right .mg203-menu__auth,
	.mg203-menu--layout-center-left-right .mg203-menu__auth { flex: none; justify-content: center; }
	.mg203-menu--layout-left-grouped-right .mg203-menu__links { margin: 0; }

	.mg203-login-page { margin: 30px auto; padding: 0 16px; }
	.mg203-login-card { padding: 26px 22px; }
}