/* Oakwood Marketing Services — client portal.
   Loaded after styles.css, which supplies the colour variables, fonts, header,
   footer, buttons, and form fields. Only what is new to the portal lives here,
   so the marketing pages stay unchanged and neither surface downloads the
   other's CSS. */

:root {
  /* Status colours. Everything else on the page comes from styles.css. Amber is
     the only hue outside the brand: "needs you" has to stand apart from green,
     because green already means "we are on it". */
  --amber: #9a5b00;
  --amber-bg: #fdf2e0;
  --amber-line: #e8a33d;
  --slate: #4a5a64;
  --slate-bg: #eef2f4;
}

/* ---------- Portal header ---------- */
/* Same bar as the marketing site, minus the sales links. A signed-in client has
   already bought; "Get a Quote" would be noise. */
.portal-account {
  display: flex;
  align-items: center;
  gap: 14px;
}
.portal-account .who {
  text-align: right;
  line-height: 1.3;
}
.portal-account .who strong {
  display: block;
  font-size: 0.92rem;
}
.portal-account .who span {
  font-size: 0.8rem;
  color: var(--muted);
}
.portal-account .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  flex: none;
}
.portal-account .signout {
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 500;
}
.portal-account .signout:hover { color: var(--green); text-decoration: none; }

/* The hidden attribute works through a browser default rule, which any author
   rule setting display beats. Several blocks below set display: flex or grid,
   so without this they stay on screen while marked hidden. */
[hidden] { display: none !important; }

/* ---------- Sign in / set password ---------- */
/* One centred card. The portal is invite only, so there is no sign-up link and
   nothing else on the screen to weigh it down. */
.auth-screen {
  min-height: calc(100vh - 68px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: var(--bg-soft);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--shadow);
}
.auth-card h1 {
  font-size: 1.4rem;
  letter-spacing: -0.4px;
  margin: 0 0 6px;
}
.auth-card .sub {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0 0 24px;
}
.auth-card .btn { width: 100%; }
.auth-links {
  margin-top: 18px;
  text-align: center;
  font-size: 0.9rem;
}
.auth-links button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--green);
  cursor: pointer;
  text-decoration: underline;
}

/* Sits under the button for both the "check your email" confirmations and the
   failures, so the eye lands in one place either way. */
.auth-msg {
  margin: 16px 0 0;
  font-size: 0.9rem;
  padding: 11px 13px;
  border-radius: 10px;
}
.auth-msg.ok {
  color: #14603c;
  background: var(--green-light);
  border: 1px solid #bcd9c8;
}
.auth-msg.bad {
  color: #8a3116;
  background: #fdf0ea;
  border: 1px solid #f3d3c4;
}

/* Held until the session check finishes, so the login card never flashes up in
   front of someone who is already signed in. */
.portal-booting {
  min-height: calc(100vh - 68px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------- Shell ---------- */
.portal {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 36px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 20px 72px;
  align-items: start;
}
/* Grid items default to min-width:auto, which lets a column grow to fit its
   widest child rather than the track. Without this the sidebar's scrolling tab
   strip pushes the whole page sideways on a phone instead of scrolling itself. */
.portal-sidebar,
.portal-main { min-width: 0; }

/* The portal is wider than the marketing pages' 1080px, so the header bar is
   widened to match. Otherwise the logo sits inboard of the sidebar under it. */
.site-header .portal-bar { max-width: 1180px; }

/* ---------- Sidebar ---------- */
.portal-sidebar { position: sticky; top: 96px; }

.portal-nav {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.portal-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 2px;
  transition: background 0.12s ease, color 0.12s ease;
}
.portal-nav a:hover {
  background: var(--bg-soft);
  color: var(--ink);
  text-decoration: none;
}
.portal-nav a.active {
  background: var(--green-light);
  color: var(--green);
  font-weight: 600;
}
.portal-nav svg {
  width: 18px;
  height: 18px;
  flex: none;
}
/* Count of things needing attention, e.g. open requests. */
.portal-nav .count {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-soft);
  border-radius: 999px;
  padding: 1px 8px;
}
.portal-nav a.active .count {
  background: rgba(31, 122, 77, 0.13);
  color: var(--green);
}

.sidebar-help {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  font-size: 0.88rem;
  color: var(--muted);
  /* The email address is nearly as wide as the column and has no spaces to
     break on. */
  overflow-wrap: anywhere;
}
.sidebar-help strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  margin-bottom: 4px;
}

/* ---------- Main column ---------- */
.portal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.portal-head h1 {
  margin: 0 0 4px;
  font-size: 1.8rem;
  letter-spacing: -0.5px;
}
.portal-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}
.portal-head .btn { flex: none; }
.portal-head .btn svg {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 6px;
}

/* ---------- Filters ---------- */
.portal-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.filter-tab {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 7px 15px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.filter-tab:hover { border-color: #cfe0d6; color: var(--ink); }
.filter-tab[aria-pressed="true"] {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.filter-tab .n { opacity: 0.7; margin-left: 3px; }

.portal-search {
  margin-left: auto;
  position: relative;
}
.portal-search input {
  width: 220px;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9rem;
  background: #fff;
}
.portal-search input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-light);
}
.portal-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
}

/* ---------- Request rows ---------- */
.req-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.req-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 20px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: 10px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.req-row:hover {
  border-color: #cfe0d6;
  box-shadow: var(--shadow);
}
/* A request we cannot move without the client gets a warm edge, so a page of
   otherwise-identical rows still answers "is anything on me?" at a glance. */
.req-row[data-status="waiting"] {
  border-left: 3px solid var(--amber-line);
  padding-left: 15px;
}

.req-main { min-width: 0; }
.req-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  margin: 0 0 5px;
  line-height: 1.35;
}
.req-title .ref {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--muted);
  margin-right: 8px;
}
.req-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: var(--muted);
}
.req-meta .dot { opacity: 0.5; }

.type-tag {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--bg-soft);
}

/* The latest activity, in plain language. This is the line that stops "any
   update on this?" emails, so it earns a full row of its own. */
.req-note {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  padding-left: 0;
}
.req-row[data-status="waiting"] .req-note {
  color: var(--amber);
  font-weight: 500;
}

/* ---------- Status pills ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.status-new      { background: var(--slate-bg);   color: var(--slate); }
.status-progress { background: var(--green-light); color: var(--green); }
.status-waiting  { background: var(--amber-bg);   color: var(--amber); }
.status-done     { background: var(--bg-soft);    color: var(--muted); }

/* ---------- Empty state ---------- */
.req-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 44px 20px;
  text-align: center;
  color: var(--muted);
}
.req-empty svg {
  width: 34px;
  height: 34px;
  color: var(--green);
  opacity: 0.45;
  margin-bottom: 10px;
}
.req-empty p { margin: 0; }

/* ---------- Demo banner ---------- */
/* Comes out when the portal is wired to real data. */
.portal-demo {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 22px;
}
.portal-demo svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--green); }
.portal-demo p { margin: 0; }

/* ---------- New request dialog ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 22, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  z-index: 100;
}
.modal-backdrop[hidden] { display: none; }

.modal {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(20, 24, 22, 0.22);
  animation: modal-in 0.18s ease-out;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.3px;
}
.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}
.modal-close:hover { color: var(--ink); }
.modal-body { padding: 22px 24px; }
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 24px 22px;
}
.modal .hint {
  font-size: 0.83rem;
  color: var(--muted);
  margin: -4px 0 0;
}

/* Label kept for screen readers where the placeholder and icon carry the
   meaning visually. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .portal {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 24px;
  }
  /* The sidebar becomes a scrolling strip of tabs above the log. */
  .portal-sidebar { position: static; }
  .portal-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-bottom: 4px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .portal-nav li { flex: none; }
  .portal-nav a { margin-bottom: 0; white-space: nowrap; }
  .sidebar-help { display: none; }

  .portal-head { flex-direction: column; align-items: stretch; }
  .portal-head .btn { align-self: flex-start; }
  .portal-search { margin-left: 0; width: 100%; }
  .portal-search input { width: 100%; }
}

@media (max-width: 560px) {
  .portal-account .who { display: none; }
  .req-row { grid-template-columns: 1fr; }
  .req-row .status { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .modal { animation: none; }
  .req-row { transition: none; }
}