/* styles.css */
:root {
  --gold: #c9a227;
  --dark: #111418;
  --white: #ffffff;
  --muted: #f5f5f7;
  --border: #dcdcdc;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color: var(--dark); background: var(--muted); }
.header { display:flex; justify-content:space-between; align-items:center; padding: 16px 28px; background: var(--dark); color: var(--white); position: sticky; top: 0; border-bottom: 4px solid var(--gold); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.brand { display:flex; align-items:center; gap: 16px; }
.logo { height: clamp(36px, 5vw, 54px); width: auto; background: transparent; }
.container { max-width: 1000px; margin: 24px auto; padding: 0 16px; }
.login-container { max-width: 1000px; margin: 0 auto; padding: 0 16px; min-height: calc(100vh - 140px); display: flex; align-items: center; justify-content: center; }
.card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
.login-card { max-width: 420px; width: 100%; }
h1 { margin: 0; font-size: 24px; letter-spacing: 0.6px; }
h1 { font-size: clamp(18px, 3.5vw, 24px); }
h2 { margin-top: 0; font-size: 20px; }
/* Distinct card header using brand (logo) color */
.card > h2 {
  background: var(--gold);
  color: var(--dark);
  font-weight: 700;
  padding: 12px 16px;
  margin: -20px -20px 16px; /* stretch to card edges */
  border-radius: 12px 12px 0 0;
}
/* Entry headers inside cards use the same brand color */
.card > h3 {
  background: var(--gold);
  color: var(--dark);
  font-weight: 700;
  padding: 12px 16px;
  margin: -20px -20px 16px; /* stretch to card edges */
  border-radius: 12px 12px 0 0;
}
label { display:block; margin-bottom: 8px; font-weight: 600; }
input, select, textarea { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border); outline: none; background: var(--white); }
.btn { background: var(--dark); color: var(--white); padding: 10px 16px; border: none; border-radius: 8px; cursor: pointer; margin-right: 8px; }
.btn.primary { background: var(--gold); color: var(--dark); font-weight: 700; }
.btn:hover { opacity: 0.9; }
.footer { text-align:center; padding: 20px; color: #666; }
.msg { margin-top: 12px; color: #333; }
.msg.error { color: #b00020; }

/* Utility */
.hidden { display: none !important; }

.tabs { display:flex; gap:8px; margin-bottom:16px; }
.tab-btn { padding: 8px 12px; border: 1px solid var(--border); background: var(--white); border-radius: 8px; cursor: pointer; }
.tab-btn.active { background: var(--gold); color: var(--dark); font-weight: 700; }
.tab { display:none; }
.tab.active { display:block; }

/* Mobile form selector (hidden on desktop) */
.form-selector { display: none; width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--white); }

.rows { display:flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.row { display:flex; flex-direction: column; gap: 8px; }
.row textarea { width: 100%; }

/* Time input with AM/PM indicator */
.time-input-wrap { display: flex; align-items: center; gap: 8px; }
.time-input-wrap input { flex: 1; }
.time-input-wrap .ampm { font-size: 12px; font-weight: 700; color: var(--dark); background: var(--muted); border: 1px solid var(--border); padding: 6px 8px; border-radius: 6px; }

/* Make form buttons stack neatly on small screens */
.card .btn { margin-top: 8px; }

.table table { width: 100%; border-collapse: collapse; }
.table th, .table td { border: 1px solid var(--border); padding: 8px; text-align: left; }
.table th { background: var(--muted); }

/* Viewer tables: enable horizontal scroll on small screens and prevent wrapping */
.table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table .card { overflow: visible; }
.table table { width: max-content; min-width: 100%; }
.table th, .table td { white-space: nowrap; }

/* Header navigation */
nav { display: flex; align-items: center; gap: 16px; }
nav a { color: var(--white); text-decoration: none; margin-left: 0; }
/* Logout button on far right with white background */
nav a#logout { margin-left: auto; background: var(--white); color: var(--dark); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); font-weight: 700; }

/* Removed hamburger and mobile popover menu styles */

/* Cards-first selection grid */
.form-select { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
.menu-card { display: block; width: 100%; background: var(--white); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 6px 14px rgba(0,0,0,0.08); cursor: pointer; overflow: hidden; }
.menu-card h3 { margin: 0; padding: 12px 16px; background: var(--gold); color: var(--dark); font-weight: 700; }
.menu-card:active { transform: translateY(1px); }
/* Distinct colors for each form card */
.menu-card[data-tab="plot_bookings"] h3 { background: #2B6CB0; color: #ffffff; }
.menu-card[data-tab="site_visits"] h3 { background: #2F855A; color: #ffffff; }
.menu-card[data-tab="incidents"] h3 { background: #C53030; color: #ffffff; }
.menu-card[data-tab="feedbacks"] h3 { background: #6B46C1; color: #ffffff; }

/* Desktop adjustments: wider cards, shorter headers on forms page */
@media (min-width: 1024px) {
  /* Match dashboard container/card width */
  .forms-container { max-width: 1000px; }
  .forms-container .form-select { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .forms-container .menu-card h3 { padding: 8px 18px; }
  .forms-container .tab .card { padding: 16px; }
  .forms-container .rows { gap: 8px; }
}

/* Back arrow button fixed at bottom-left */
.btn.back-btn { position: fixed; bottom: 16px; left: 16px; background: var(--gold); color: var(--dark); border: 1px solid var(--gold); box-shadow: 0 6px 14px rgba(0,0,0,0.08); z-index: 1000; font-weight: 700; }
@media (max-width: 480px) {
  .btn.back-btn { bottom: 12px; left: 12px; padding: 10px 12px; }
}

/* Dashboard summary cards */
.summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
.summary-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 24px; min-height: 160px; box-shadow: 0 8px 18px rgba(0,0,0,0.08); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; position: relative; overflow: hidden; }
.summary-card:hover { transform: translateY(-3px); box-shadow: 0 12px 22px rgba(0,0,0,0.1); }
.summary-card h3 { margin: 0 0 10px; font-size: 20px; }
.summary-card .count { font-size: 26px; font-weight: 800; color: var(--gold); }

/* Thin colored strip at top of cards */
.summary-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--gold); border-top-left-radius: 16px; border-top-right-radius: 16px; }
.summary-card[data-type="plot_bookings"]::before { background: #2B6CB0; }
.summary-card[data-type="site_visits"]::before { background: #2F855A; }
.summary-card[data-type="incidents"]::before { background: #C53030; }
.summary-card[data-type="feedbacks"]::before { background: #6B46C1; }

/* Compact filters on dashboard */
.filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filters label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; }
.filters input, .filters select { width: auto; padding: 6px 8px; border-radius: 6px; font-size: 13px; }
.filters select { min-width: 160px; }
.filters .btn { padding: 6px 10px; border-radius: 6px; font-size: 13px; }

@media (max-width: 768px) {
  .header { padding: 12px 16px; flex-direction: row; align-items: center; }
  .brand { width: auto; gap: 12px; justify-content: flex-start; }
  .logo { height: 32px; }
  h1 { font-size: 18px; }
  nav { margin-left: auto; display: flex; gap: 12px; flex-wrap: nowrap; }
  /* Keep logout pushed to far right on mobile */
  nav a#logout { margin-left: auto; }
  .container { padding: 0 12px; }
  .card { padding: 16px; }
  .card > h2 { margin: -16px -16px 12px; padding: 10px 14px; }
  .card > h3 { margin: -16px -16px 12px; padding: 10px 14px; }
  .filters { gap: 6px; }
  .filters input, .filters select { padding: 6px 8px; font-size: 12px; }
  .filters .btn { padding: 6px 10px; font-size: 12px; }
  /* Show form selector and hide tabs on mobile */
  .form-selector { display: none; }
  .tabs { display: none; }
  /* One card per row on mobile/tablet */
  .summary { grid-template-columns: 1fr; }
  .form-select { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* More compact, wrap-friendly header on small phones */
  .header { padding: 10px 12px; flex-direction: row; align-items: center; }
  .brand { width: auto; gap: 8px; align-items: center; flex-wrap: nowrap; }
  .logo { height: 28px; }
  .brand h1 { font-size: 16px; line-height: 1.2; margin: 0; }
  nav { margin-left: auto; gap: 8px; justify-content: flex-start; flex-wrap: nowrap; }
  nav a { padding: 6px 10px; font-size: 14px; }
  nav a#logout { padding: 6px 10px; margin-left: auto; }
  .summary { grid-template-columns: 1fr; gap: 16px; }
  .summary-card { padding: 20px; min-height: 140px; }
  .summary-card h3 { font-size: 18px; }
  .summary-card .count { font-size: 24px; }
}