/* Port Call Operations Control — application theme
   Palette: white/grey base, dark marine blue identity, semantic status colors only. */

:root {
  --pcoc-ink: #16232c;
  --pcoc-ink-soft: #45535c;
  --pcoc-muted: #6b7a84;
  --pcoc-bg: #f5f7f8;
  --pcoc-surface: #ffffff;
  --pcoc-surface-alt: #eef2f4;
  --pcoc-line: #dce4e8;
  --pcoc-navy: #0b3854;
  --pcoc-accent: #0b5d8c;
  --pcoc-accent-soft: #e3eef4;
  --pcoc-ok: #1e7a4c;
  --pcoc-warn: #a8710a;
  --pcoc-crit: #b0392c;

  --bs-primary: var(--pcoc-accent);
  --bs-primary-rgb: 11, 93, 140;
  --bs-body-bg: var(--pcoc-bg);
  --bs-body-color: var(--pcoc-ink);
  --bs-border-color: var(--pcoc-line);
  --bs-link-color: var(--pcoc-accent);
  --bs-link-hover-color: var(--pcoc-navy);
}

body {
  background: var(--pcoc-bg);
  font-size: .94rem;
}

/* ---------- Topbar ---------- */
.pcoc-topbar {
  background: var(--pcoc-navy);
  color: #fff;
  padding: .55rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.pcoc-topbar .brand {
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}
.pcoc-topbar .brand small {
  font-weight: 400;
  opacity: .7;
  font-size: .72rem;
}
.pcoc-topbar .spacer { flex: 1 1 auto; }
.pcoc-topbar .user-pill {
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .82rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pcoc-topbar .role-badge {
  text-transform: uppercase;
  font-size: .65rem;
  letter-spacing: .05em;
  background: var(--pcoc-accent);
  padding: .1rem .45rem;
  border-radius: 4px;
}

/* ---------- Sidebar ---------- */
.pcoc-sidebar {
  background: var(--pcoc-surface);
  border-right: 1px solid var(--pcoc-line);
  min-height: calc(100vh - 52px);
  padding: 1rem .5rem;
}
.pcoc-sidebar .nav-link {
  color: var(--pcoc-ink-soft);
  border-radius: 8px;
  padding: .5rem .75rem;
  font-size: .87rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .15rem;
}
.pcoc-sidebar .nav-link i { font-size: 1rem; width: 1.1rem; text-align: center; }
.pcoc-sidebar .nav-link:hover { background: var(--pcoc-surface-alt); color: var(--pcoc-ink); }
.pcoc-sidebar .nav-link.active { background: var(--pcoc-accent-soft); color: var(--pcoc-accent); font-weight: 600; }
.pcoc-sidebar .nav-link.disabled { color: #b6c0c6; cursor: default; }
.pcoc-sidebar .nav-section {
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .07em;
  color: var(--pcoc-muted);
  padding: .9rem .75rem .25rem;
}

/* ---------- Cards / KPI ---------- */
.pcoc-card {
  background: var(--pcoc-surface);
  border: 1px solid var(--pcoc-line);
  border-radius: 10px;
}
.pcoc-kpi .value { font-size: 1.7rem; font-weight: 700; color: var(--pcoc-ink); font-variant-numeric: tabular-nums; }
.pcoc-kpi .label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pcoc-muted); }

/* ---------- Status semantics ---------- */
.pcoc-status-ok { color: var(--pcoc-ok); }
.pcoc-status-warn { color: var(--pcoc-warn); }
.pcoc-status-crit { color: var(--pcoc-crit); }
.pcoc-row-link:hover { background: var(--pcoc-surface-alt); }
.pcoc-dot { display:inline-block; width:.5rem; height:.5rem; border-radius:50%; margin-right:.35rem; }
.pcoc-dot.ok { background: var(--pcoc-ok); }
.pcoc-dot.warn { background: var(--pcoc-warn); }
.pcoc-dot.crit { background: var(--pcoc-crit); }

/* ---------- Quick actions ---------- */
.pcoc-quick-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.pcoc-quick-actions .btn { border-radius: 8px; }

/* ---------- Auth page ---------- */
.pcoc-auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--pcoc-navy) 0%, var(--pcoc-navy) 220px, var(--pcoc-bg) 220px);
}
.pcoc-auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--pcoc-surface);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(11,56,84,.25);
  padding: 2rem 1.75rem;
}
.pcoc-auth-brand { text-align: center; margin-bottom: 1.4rem; }
.pcoc-auth-brand i { font-size: 2rem; color: var(--pcoc-accent); }
.pcoc-auth-brand h1 { font-size: 1.15rem; font-weight: 700; margin: .4rem 0 0; color: var(--pcoc-ink); }
.pcoc-auth-brand small { color: var(--pcoc-muted); }