/* Time Punch — shared look (employee pages, admin login, admin).
   Same seasonal theme and look as Fotos / Rutas / Maquinas (see the theme guide).
   Season = body class set by PHP from the New Jersey date (season_body_class() in functions.php).
   --green = buttons/links/active states and the top bar, --green-dark = second bar + text accents,
   --green-light = soft tint, --lime = focus ring, --on-dark = link text on the dark bar.
   Everything below uses these variables, so a season is just one block. */
:root {
  --green: #2e7d32; --green-dark: #1f5a24; --green-light: #e8f3e9; --lime: #9fc24a; --on-dark: #d9f0da;
  --bg: #f6f7f4; --card: #fff; --text: #1d2a1f; --muted: #66726a; --line: #dde3dc; --radius: 14px;
}
body.season-summer { --green: #2e7d32; --green-dark: #1f5a24; --green-light: #e8f3e9; --lime: #9fc24a; --on-dark: #d9f0da; }
body.season-spring { --green: #3a8527; --green-dark: #2a6a1c; --green-light: #ebf5e2; --lime: #b5d36a; --on-dark: #e0f2cf; }
body.season-autumn { --green: #b5541c; --green-dark: #8a3d10; --green-light: #fbefe6; --lime: #e0a84a; --on-dark: #ffe6d2; }
body.season-winter { --green: #3772a3; --green-dark: #285578; --green-light: #e8f0f7; --lime: #8cb8dc; --on-dark: #dcecf8; }

body { background: var(--bg); color: var(--text); }
a { color: var(--green-dark); }
a:hover { color: var(--green); }
.text-muted { color: var(--muted) !important; }

/* ---------- Top bar + site switcher ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px; background: var(--green); color: #fff;
}
.brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.brand:hover { color: #fff; }
.brand img { object-fit: contain; }
.brand .clock { font-weight: 600; font-size: .95rem; margin-left: 4px; padding: 1px 9px; border-radius: 999px; background: rgba(255,255,255,.18); font-variant-numeric: tabular-nums; white-space: nowrap; }
.top-right { display: flex; align-items: center; gap: 8px; }
.langpill { display: inline-flex; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; overflow: hidden; }
.langpill a { padding: 4px 10px; color: #fff; text-decoration: none; font-size: .85rem; font-weight: 600; }
.langpill a.on { background: #fff; color: var(--green-dark); }

.switcher { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 6px 14px; background: var(--green-dark); }
.switcher a { color: var(--on-dark); text-decoration: none; font-size: .85rem; }
.switcher a:hover { color: #fff; text-decoration: underline; }
.switcher .here { color: #fff; font-size: .85rem; font-weight: 700; padding: 1px 10px; border-radius: 999px; background: rgba(255,255,255,.18); }
.switcher .push { margin-left: auto; }
.switcher a.adm { color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.45); border-radius: 8px; padding: 3px 10px; font-size: .8rem; }
.switcher a.adm:hover { background: rgba(255,255,255,.14); text-decoration: none; }

/* ---------- Bootstrap parts in the theme ---------- */
.btn { --bs-btn-border-radius: 12px; font-weight: 600; }
.btn-primary, .btn-success {
  --bs-btn-color: #fff; --bs-btn-bg: var(--green); --bs-btn-border-color: var(--green);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--green-dark); --bs-btn-hover-border-color: var(--green-dark);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--green-dark); --bs-btn-active-border-color: var(--green-dark);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--green); --bs-btn-disabled-border-color: var(--green);
  --bs-btn-focus-shadow-rgb: 120, 120, 120;
}
.btn-outline-primary, .btn-outline-success {
  --bs-btn-color: var(--green); --bs-btn-border-color: var(--green);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--green); --bs-btn-hover-border-color: var(--green);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--green-dark); --bs-btn-active-border-color: var(--green-dark);
  --bs-btn-disabled-color: var(--green); --bs-btn-disabled-border-color: var(--green);
}
.btn-outline-secondary { --bs-btn-color: var(--text); --bs-btn-border-color: #c9d1c8; --bs-btn-hover-bg: var(--green-light); --bs-btn-hover-color: var(--text); --bs-btn-hover-border-color: #c9d1c8; --bs-btn-active-bg: var(--green-light); --bs-btn-active-color: var(--text); --bs-btn-active-border-color: #c9d1c8; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus { outline: 2px solid var(--lime); outline-offset: 1px; box-shadow: none; border-color: var(--green); }
.form-control, .form-select { border-color: #c9d1c8; border-radius: 10px; }
.form-check-input:checked { background-color: var(--green); border-color: var(--green); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.alert { border-radius: 10px; }
.alert-success { --bs-alert-bg: var(--green-light); --bs-alert-color: var(--green-dark); --bs-alert-border-color: transparent; }
.list-group-item { border-color: var(--line); }
.table { --bs-table-border-color: var(--line); }

/* ---------- Employee pages ---------- */
body.crew .btn-lg { min-height: 56px; border-radius: 14px; font-size: 1.15rem; }
body.crew .form-control, body.crew .form-select { padding: 10px 12px; }

/* ---------- Login (admin) ---------- */
.login-page { background: linear-gradient(#f6f7f4, var(--green-light)); min-height: 100vh; }
.login-card { max-width: 380px; margin: 0 auto; padding: calc(24px + env(safe-area-inset-top)) 20px 30px; display: grid; gap: 12px; }
.login-card form { display: grid; gap: 12px; }
.login-card label { display: grid; gap: 4px; font-weight: 600; font-size: .92rem; margin: 0; }
.login-logo { width: 78%; max-width: 280px; margin: 0 auto; display: block; }
.login-top { display: flex; justify-content: space-between; align-items: center; }
.login-admin { color: var(--green-dark); border: 1px solid var(--green); border-radius: 8px; padding: 4px 12px; font-size: .85rem; font-weight: 600; text-decoration: none; }
.login-admin:hover { background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--green-dark); }
.login-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: .88rem; margin: 0; }
.login-card h1, .login-card p { text-align: center; }
.login-card h1 { font-size: 1.4rem; margin: .4rem 0 .6rem; }

/* ---------- Admin ---------- */
/* One pinned header: accent bar + switcher bar (its height is measured into --nav-h by includes/footer.php). */
.site-head { position: sticky; top: 0; z-index: 1040; }
.site-head .navbar { position: static; background: var(--green); padding-top: .4rem; padding-bottom: .4rem; }
.site-head .navbar-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.site-head .navbar-brand img { object-fit: contain; }
.site-head .navbar .nav-link { color: var(--on-dark); }
.site-head .navbar .nav-link:hover, .site-head .navbar .nav-link:focus, .site-head .navbar .nav-link.active { color: #fff; }
.site-head .navbar .nav-link.active { background: rgba(255,255,255,.16); border-radius: 8px; }
.site-head .navbar .dropdown-toggle { color: #fff; }
.site-head .dropdown-menu { border-radius: 10px; border-color: var(--line); }
.site-head .dropdown-item:active { background: var(--green); }
.bg-success, .text-bg-success { background-color: var(--green) !important; }
.text-success { color: var(--green-dark) !important; }