/* ============================================================
   VIEWS.CSS — Login · New Order Form · Admin styles
   ============================================================ */

/* ── Login Page ──────────────────────────────────────────── */
.login-body {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-base);
  padding: 1rem;
}

.login-wrap { width: 100%; max-width: 420px; animation: fadeInUp 0.45s ease both; }

.login-logo-area {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.login-logo-area img { width: 60px; height: 60px; filter: drop-shadow(0 2px 8px rgba(37,99,235,0.2)); }
.login-logo-area h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); }
.login-logo-area p { font-size: 0.9rem; color: var(--text-muted); }

.login-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.login-tabs { display: flex; border-bottom: 1px solid var(--border); }
.login-tab {
  flex: 1; padding: 0.875rem;
  background: none; border: none; cursor: pointer;
  font-size: 0.925rem; font-weight: 600;
  color: var(--text-muted);
  transition: color var(--tr), border-color var(--tr);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.login-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.login-panel { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.login-panel.hidden { display: none; }

.login-hint {
  text-align: center; font-size: 0.825rem; color: var(--text-muted);
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.6rem 1rem;
}
.login-hint code { color: var(--primary); font-family: monospace; font-weight: 600; }

/* ── New Order Form ──────────────────────────────────────── */
.new-order-wrap {
  max-width: 640px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.new-order-title { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); }

/* ── Order photo thumbnail viewer ────────────────────────── */
.order-photo-thumb { transition: opacity var(--tr); }
.order-photo-thumb:hover { opacity: 0.85; }

/* ── Responsive filter tweaks ────────────────────────────── */
@media (max-width: 900px) {
  .status-flow { display: none; }
  .filter-row { gap: 0.625rem; }
}
@media (max-width: 600px) {
  .filter-row { padding: 0.625rem 0.875rem; }
  .quick-date-group { gap: 2px; }
  .status-tab-group { gap: 2px; }
  .quick-date-btn,
  .status-tab-btn { padding: 0.22rem 0.6rem; font-size: 0.78rem; }
}