/* apps/mizanos/mizanos/public/css/mizanos_web.css
   MizanOS — public website + login page branding.
   Loaded via web_include_css. The desk stylesheet (mizanos.css) does NOT
   load on /login, which is why the login screen was still plain grey. */

:root {
  --mz-navy: #002b5c;
  --mz-navy-700: #003f8a;
  --mz-gold: #c9a227;
  --mz-gold-600: #a8871f;
  --mz-cream: #fbf8f2;
  --mz-ink: #1c1c1c;
  --mz-line: #ebeef2;
}

/* ── Page canvas ─────────────────────────────────────────────────── */
body.login-page,
.page_content,
body[data-path="login"] {
  background-color: var(--mz-cream) !important;
}

/* ── Brand bar across the top ────────────────────────────────────── */
body[data-path="login"] .navbar,
.website-navbar {
  background-color: var(--mz-navy) !important;
  border-bottom: 3px solid var(--mz-gold) !important;
}

body[data-path="login"] .navbar .navbar-brand,
.website-navbar .navbar-brand {
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ── The login card ──────────────────────────────────────────────── */
.page-card {
  background: #ffffff !important;
  border: 1px solid var(--mz-line) !important;
  border-top: 4px solid var(--mz-gold) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 16px rgba(0, 43, 92, 0.08) !important;
}

.page-card-head h4,
.page-card h4,
.page-card .page-card-head {
  color: var(--mz-navy) !important;
  font-weight: 700 !important;
}

/* ── Primary action ──────────────────────────────────────────────── */
.page-card .btn-primary,
.btn-login,
#login_btn {
  background-color: var(--mz-navy) !important;
  border-color: var(--mz-navy) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 10px !important;
}

.page-card .btn-primary:hover,
.btn-login:hover,
#login_btn:hover {
  background-color: var(--mz-navy-700) !important;
  border-color: var(--mz-navy-700) !important;
}

/* ── Secondary action ────────────────────────────────────────────── */
.page-card .btn-secondary,
.page-card .btn-default {
  background-color: transparent !important;
  border: 1px solid var(--mz-gold) !important;
  color: var(--mz-navy) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

.page-card .btn-secondary:hover {
  background-color: rgba(201, 162, 39, 0.12) !important;
}

/* ── Inputs ──────────────────────────────────────────────────────── */
.page-card .form-control,
.page-card input {
  border-radius: 8px !important;
  border: 1px solid var(--mz-line) !important;
}

.page-card .form-control:focus,
.page-card input:focus {
  border-color: var(--mz-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18) !important;
}

.page-card a {
  color: var(--mz-navy-700) !important;
}

/* ── Architect credit card, injected by mizanos_web.js ───────────── */
.mz-credit-card {
  background: var(--mz-cream);
  border: 1px solid var(--mz-line);
  border-radius: 12px;
  padding: 1.25rem;
  max-width: 400px;
  margin: 1.5rem auto 3rem;
  font-family: system-ui, -apple-system, sans-serif;
}

.mz-credit-header { text-align: center; margin-bottom: 14px; }

.mz-credit-pre {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(0, 43, 92, 0.55);
  margin: 0 0 2px;
  text-transform: uppercase;
}

.mz-credit-brand {
  font-size: 16px;
  font-weight: 600;
  color: var(--mz-navy);
  margin: 0;
}

.mz-credit-body {
  border-top: 1px solid var(--mz-line);
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
}

.mz-credit-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--mz-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--mz-gold);
  flex-shrink: 0;
}

.mz-credit-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--mz-navy);
  margin: 0;
  line-height: 1.2;
}

.mz-credit-title {
  font-size: 12px;
  color: rgba(0, 43, 92, 0.85);
  margin: 2px 0 0;
}

.mz-credit-academic {
  font-size: 11px;
  color: rgba(0, 43, 92, 0.6);
  margin: 2px 0 0;
}

.mz-credit-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.mz-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 99px;
  padding: 6px 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mz-btn-outline {
  color: var(--mz-navy) !important;
  border: 1px solid rgba(0, 43, 92, 0.2);
}

.mz-btn-outline:hover {
  background: rgba(0, 43, 92, 0.05);
  border-color: var(--mz-navy);
}

.mz-btn-solid {
  background: var(--mz-gold);
  color: var(--mz-navy) !important;
  border: 1px solid var(--mz-gold);
}

.mz-btn-solid:hover { filter: brightness(0.95); }

/* ── Login splash mark ───────────────────────────────────────────── */
/* Same reasoning as the desk navbar: the default 48px is too small for
   a mark that carries both a device and a wordmark. */
.page-card .app-logo,
.page-card img.app-logo,
#page-login img.app-logo,
.login-content img {
  height: 72px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain;
  margin-bottom: 6px;
}

/* ── Login page logo ─────────────────────────────────────────────────
   Same problem on /login: the splash mark renders at ~48px and the
   detail is lost. This is the first screen anyone sees. */
.page-card .app-logo,
.for-login .app-logo,
#page-login img.app-logo,
.login-content img {
  height: 72px;
  width: auto;
  max-height: 72px;
  object-fit: contain;
  margin-bottom: 4px;
}