/* Seaward Resident Portal — custom overrides only
   Base framework: https://www.w3schools.com/w3css/5/w3.css
   Icons: Google Material Design Icons
   -------------------------------------------------- */

:root {
  --color-primary:          #457fce;
  --color-accent:           #016b8a;
  --color-bg:               #f0f5fb;
  --color-text:             #0d2a3e;
  --color-text-muted:       #5a7a9a;
  --color-error:            #c0392b;
}

body { background: var(--color-bg); color: var(--color-text); }

/* ── Logo circle crop ── */
.logo-circle {
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.logo-banner {
  height: clamp(38px, 6.4vw, 77px) !important;
  width:  clamp(38px, 6.4vw, 77px) !important;
  padding: 4px !important;
}

.logo-login {
  height: clamp(96px, 16vw, 176px);
  width:  clamp(96px, 16vw, 176px);
  display: block;
  margin: 0 auto clamp(8px, 2vw, 20px);
}

/* ── Banner logout button ── */
.banner-logout { margin-left: auto; }

/* ── Banner flex alignment ── */
header.w3-bar {
  display: flex !important;
  align-items: center !important;
}

/* ── Banner title vertical alignment ── */
.banner-title { vertical-align: middle; }

/* ── Login page centering ── */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}

.login-card { width: 100%; max-width: 420px; }

/* ── Sidebar navigation ── */
#sidebar {
  width: 50px;
  height: calc(100% - 87px);
  position: fixed;
  top: 87px;
  left: 0;
  background: var(--color-text);
  transition: width 0.2s;
  overflow: hidden;
  z-index: 100;
  border-radius: 12px 12px 12px 12px;
}

#sidebar.sidebar-open { width: 200px; }

.nav-item {
  display: flex !important;
  align-items: center;
  color: #fff !important;
  white-space: nowrap;
  padding: 12px 13px !important;
}

.nav-item:hover { background: var(--color-accent) !important; }

.nav-active { background: var(--color-primary) !important; }

.nav-icon { font-size: 22px; flex-shrink: 0; }

.nav-label {
  margin-left: 12px;
  opacity: 0;
  transition: opacity 0.15s;
}

#sidebar.sidebar-open .nav-label { opacity: 1; }

/* ── Main content offset ── */
#main-content { margin-left: 50px; transition: margin-left 0.2s; }
#main-content.sidebar-expanded { margin-left: 200px; }