/* ===========================================================================
   Maplestone client portal and admin console (/account, /admin).
   The page also loads the site stylesheet (/styles.css), so the header,
   buttons, fonts and colour tokens are the site's own; this file styles the
   portal components with those tokens.
   =========================================================================== */

.portal-body {
    --p-bg: var(--cream);
    --p-surface: #ffffff;
    --p-soft: var(--paper);
    --p-ink: var(--ink);
    --p-muted: var(--muted);
    --p-line: var(--line);
    --p-accent: var(--gold);
    --p-accent-hover: var(--gold-hover);
    --p-strong: var(--green);
    --p-head: var(--head);
    --p-font: var(--body);
    --p-radius: var(--radius);
    --p-radius-sm: var(--radius-sm);
    --p-shadow: var(--shadow-md);
    --p-ok: #2f7a4f;
    --p-warn: #8a5a00;
    --p-danger: #b3261e;
    margin: 0;
    background: var(--p-bg);
    color: var(--p-ink);
    font-family: var(--p-font);
    line-height: 1.6;
}

.portal-body * { box-sizing: border-box; }
.portal-body h1, .portal-body h2, .portal-body h3 { font-family: var(--p-head); color: var(--p-ink); line-height: 1.15; margin: 0 0 0.4em; }
.portal-body a { color: inherit; }
.portal-body .skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 12px 18px; background: var(--p-strong); color: #fff; }
.portal-body .skip-link:focus { left: 16px; top: 16px; }

.portal-main {
    min-height: calc(100vh - 160px);
    padding: calc(var(--header-h) + 40px) 0 72px;
    outline: none;
}

.portal-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.portal-narrow { max-width: 560px; margin: 0 auto; }
.portal-loading, .portal-muted { color: var(--p-muted); }
.portal-small { font-size: 0.86rem; }

/* ----- Headings and page intro ----- */
.portal-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--p-accent); margin-bottom: 10px;
}
.portal-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
.portal-head h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0; }
.portal-head p { margin: 6px 0 0; color: var(--p-muted); max-width: 640px; }
.portal-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ----- Surfaces ----- */
.portal-card {
    background: var(--p-surface);
    border: 1px solid var(--p-line);
    border-radius: var(--p-radius);
    box-shadow: var(--p-shadow);
    padding: 28px;
}
.portal-card + .portal-card { margin-top: 20px; }
.portal-card h2 { font-size: 1.3rem; }
.portal-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.portal-card-head h2 { margin: 0; }
.portal-split { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
.portal-stack > * + * { margin-top: 20px; }
.portal-note {
    background: var(--p-soft); border: 1px solid var(--p-line); border-radius: var(--p-radius-sm);
    padding: 14px 16px; color: var(--p-ink); font-size: 0.92rem;
}
.portal-note.is-accent { border-left: 4px solid var(--p-accent); }
.portal-empty { text-align: center; padding: 48px 24px; }
.portal-empty p { color: var(--p-muted); margin: 6px auto 20px; max-width: 460px; }

/* ----- Buttons: the site's .btn, .btn-gold and .btn-sm, plus a quiet outline button ----- */
.portal-body .btn[disabled], .portal-body .portal-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.portal-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--p-line);
    background: var(--p-surface); color: var(--p-ink); cursor: pointer;
    font: 600 0.86rem/1.1 var(--p-font); text-decoration: none; white-space: nowrap;
}
.portal-btn:hover { border-color: var(--p-accent); color: var(--p-accent); }
.portal-btn.is-danger { color: var(--p-danger); border-color: rgba(179, 38, 30, 0.35); }
.portal-btn.is-danger:hover { background: var(--p-danger); color: #fff; border-color: var(--p-danger); }
.portal-btn.is-small { padding: 6px 12px; font-size: 0.78rem; }
.portal-link { background: none; border: 0; padding: 0; color: var(--p-accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* ----- Forms ----- */
.portal-form { display: grid; gap: 16px; }
.portal-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.portal-form label, .portal-field { display: grid; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--p-ink); }
.portal-form input[type="text"], .portal-form input[type="email"], .portal-form input[type="tel"],
.portal-form input[type="password"], .portal-form input[type="number"], .portal-form input[type="search"],
.portal-form select, .portal-form textarea, .portal-filter select, .portal-filter input {
    width: 100%; font: 400 0.95rem var(--p-font); color: var(--p-ink);
    padding: 12px 14px; border-radius: var(--p-radius-sm);
    border: 1px solid var(--p-line); background: var(--p-soft);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.portal-form textarea { min-height: 120px; resize: vertical; }
.portal-form input:focus, .portal-form select:focus, .portal-form textarea:focus, .portal-filter select:focus, .portal-filter input:focus {
    outline: none; border-color: var(--p-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-accent) 22%, transparent); background: #fff;
}
.portal-form .hint { font-weight: 400; color: var(--p-muted); font-size: 0.8rem; }
.portal-form .error { color: var(--p-danger); font-weight: 600; font-size: 0.8rem; min-height: 0; }
.portal-form [aria-invalid="true"] { border-color: var(--p-danger); }
.portal-check { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 10px; font-weight: 500 !important; }
.portal-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--p-accent); flex: none; }
.portal-radios { display: flex; flex-wrap: wrap; gap: 10px; }
.portal-radios label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--p-line); border-radius: 999px; background: var(--p-soft); font-weight: 500; cursor: pointer; }
.portal-radios input { accent-color: var(--p-accent); }
.portal-form-error { display: none; padding: 12px 14px; border-radius: var(--p-radius-sm); background: rgba(179, 38, 30, 0.08); color: var(--p-danger); font-weight: 600; }
.portal-form-error.is-shown { display: block; }
.portal-auth { max-width: 520px; margin: 0 auto; }
.portal-auth .portal-card { padding: 36px; }
.portal-auth-switch { text-align: center; margin-top: 18px; color: var(--p-muted); font-size: 0.92rem; }
/* The site stylesheet removes link underlines; text links inside portal copy keep one. */
.portal-auth-switch a, .portal-note a, .portal-check a, .portal-empty p a, .portal-small a {
    color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}

/* ----- Upload area ----- */
.portal-drop {
    display: grid; place-items: center; gap: 6px; text-align: center;
    padding: 26px; border: 2px dashed var(--p-line); border-radius: var(--p-radius);
    background: var(--p-soft); cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.portal-drop:hover, .portal-drop.is-over { border-color: var(--p-accent); background: #fff; }
.portal-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.portal-drop strong { color: var(--p-accent); }
.portal-queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 12px; }
.portal-queue figure { margin: 0; position: relative; border-radius: var(--p-radius-sm); overflow: hidden; border: 1px solid var(--p-line); background: #fff; }
.portal-queue img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.portal-queue .doc { display: grid; place-items: center; aspect-ratio: 4 / 3; font-weight: 700; color: var(--p-muted); }
.portal-queue figcaption { font-size: 0.72rem; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-queue button { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer; }

/* ----- Project cards and lists ----- */
.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.portal-project {
    position: relative; display: grid; gap: 10px; text-decoration: none;
    background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius);
    padding: 22px; box-shadow: var(--p-shadow); transition: transform 0.2s ease, border-color 0.2s ease;
}
.portal-project:hover { transform: translateY(-2px); border-color: var(--p-accent); }
.portal-project h3 { font-size: 1.15rem; margin: 0; }
.portal-project .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--p-muted); font-size: 0.84rem; }
.portal-ref { font: 600 0.78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; color: var(--p-muted); }
.portal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--p-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-accent) 20%, transparent); }
.portal-project .portal-dot { position: absolute; top: 18px; right: 18px; }

.portal-pill {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content; white-space: nowrap;
    padding: 4px 11px; border-radius: 999px; font-size: 0.76rem; font-weight: 700;
    background: var(--p-soft); color: var(--p-ink); border: 1px solid var(--p-line);
}
.portal-pill[data-status="submitted"], .portal-pill[data-status="in_review"] { background: #edf0e6; color: #3b522e; border-color: #d3dbc6; }
.portal-pill[data-status="site_visit"], .portal-pill[data-status="proposal_sent"] { background: #fff5e2; color: #8a5a00; border-color: #f4dfb5; }
.portal-pill[data-status="approved"], .portal-pill[data-status="in_progress"] { background: #e8f6ee; color: #1f6b40; border-color: #c8e8d5; }
.portal-pill[data-status="completed"] { background: #1f6b40; color: #fff; border-color: #1f6b40; }
.portal-pill[data-status="on_hold"] { background: #f2f2f2; color: #555; }
.portal-pill[data-status="cancelled"], .portal-pill[data-status="withdrawn"] { background: #fbeceb; color: #9a2a22; border-color: #f2cfcc; }
.portal-pill.is-admin { background: var(--p-strong); color: #fff; border-color: var(--p-strong); }
.portal-pill.is-off { background: #fbeceb; color: #9a2a22; }

/* ----- Status tracker ----- */
.portal-steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.portal-steps li { position: relative; padding-top: 30px; font-size: 0.74rem; font-weight: 600; color: var(--p-muted); text-align: center; }
.portal-steps li::before {
    counter-increment: step; content: counter(step);
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: var(--p-soft); border: 2px solid var(--p-line); font-size: 0.72rem; color: var(--p-muted);
}
.portal-steps li::after { content: ""; position: absolute; top: 11px; left: calc(50% + 15px); right: calc(-50% + 15px); height: 2px; background: var(--p-line); }
.portal-steps li:last-child::after { display: none; }
.portal-steps li.is-done { color: var(--p-ink); }
.portal-steps li.is-done::before { content: "✓"; background: var(--p-strong); border-color: var(--p-strong); color: #fff; }
.portal-steps li.is-done::after { background: var(--p-strong); }
.portal-steps li.is-current { color: var(--p-accent); }
.portal-steps li.is-current::before { background: var(--p-accent); border-color: var(--p-accent); color: #fff; }

/* ----- Detail list ----- */
.portal-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 0.92rem; }
.portal-facts dt { color: var(--p-muted); }
.portal-facts dd { margin: 0; overflow-wrap: anywhere; }
.portal-description { white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0 0; }

/* ----- Timeline ----- */
.portal-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.portal-timeline li { position: relative; padding-left: 22px; font-size: 0.9rem; }
.portal-timeline li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--p-accent); }
.portal-timeline li + li::after { content: ""; position: absolute; left: 8px; top: -14px; height: 20px; width: 1px; background: var(--p-line); }
.portal-timeline time { display: block; color: var(--p-muted); font-size: 0.78rem; }
.portal-timeline p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ----- Message thread ----- */
.portal-thread { display: grid; gap: 12px; margin-bottom: 16px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.portal-msg { max-width: 82%; padding: 12px 16px; border-radius: 16px; background: var(--p-soft); border: 1px solid var(--p-line); }
.portal-msg.is-mine { justify-self: end; background: var(--p-strong); color: #fff; border-color: var(--p-strong); }
.portal-msg.is-internal { background: #fff8e5; border-style: dashed; border-color: #e7c66b; justify-self: stretch; max-width: none; }
.portal-msg header { display: flex; gap: 10px; align-items: baseline; font-size: 0.76rem; opacity: 0.8; margin-bottom: 4px; }
.portal-msg header strong { font-size: 0.82rem; opacity: 1; }
.portal-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ----- Gallery ----- */
.portal-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.portal-file { margin: 0; border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); overflow: hidden; background: #fff; display: grid; }
.portal-file a.thumb { display: block; background: var(--p-soft); }
.portal-file img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.portal-file .doc { display: grid; place-items: center; aspect-ratio: 4 / 3; font-weight: 800; letter-spacing: 0.1em; color: var(--p-muted); text-decoration: none; }
.portal-file .info { padding: 10px 12px; display: grid; gap: 6px; font-size: 0.78rem; }
.portal-file .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-file .by { color: var(--p-muted); }
.portal-switch { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; cursor: pointer; }
.portal-switch input { accent-color: var(--p-accent); width: 16px; height: 16px; }

/* ----- Admin ----- */
.portal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; }
.portal-stat { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius); padding: 18px 20px; box-shadow: var(--p-shadow); }
.portal-stat strong { display: block; font: 700 1.8rem/1.1 var(--p-head); }
.portal-stat span { color: var(--p-muted); font-size: 0.84rem; }
.portal-meter { height: 8px; border-radius: 999px; background: var(--p-soft); overflow: hidden; margin-top: 10px; border: 1px solid var(--p-line); }
.portal-meter span { display: block; height: 100%; background: var(--p-accent); }
.portal-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 16px; }
.portal-filter label { display: grid; gap: 4px; font-size: 0.76rem; font-weight: 600; color: var(--p-muted); }
.portal-filter select, .portal-filter input { padding: 9px 12px; min-width: 150px; }
.portal-table-wrap { overflow-x: auto; background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius); box-shadow: var(--p-shadow); }
.portal-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.portal-table th { text-align: left; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-muted); padding: 12px 14px; border-bottom: 1px solid var(--p-line); white-space: nowrap; }
.portal-table td { padding: 12px 14px; border-bottom: 1px solid var(--p-line); vertical-align: top; }
.portal-table tr:last-child td { border-bottom: 0; }
.portal-table tr[data-href] { cursor: pointer; }
.portal-table tr[data-href]:hover td { background: var(--p-soft); }
.portal-table .sub { display: block; color: var(--p-muted); font-size: 0.8rem; }
.portal-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.portal-linkbox { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.portal-linkbox input { flex: 1; font: 0.82rem ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px; border-radius: var(--p-radius-sm); border: 1px solid var(--p-line); background: var(--p-soft); }

/* ----- Portal tabs (under the site header, once signed in) ----- */
.portal-tabs {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
    margin: -12px 0 30px; padding-bottom: 12px; border-bottom: 1px solid var(--p-line);
}
.portal-tabs-links { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.portal-tabs-links a {
    position: relative; padding: 6px 0; text-decoration: none;
    font: 700 0.95rem/1.2 var(--p-font); letter-spacing: 0.02em; color: var(--green);
}
.portal-tabs-links a::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2.5px;
    border-radius: 2px; background: var(--sage); transition: width 0.25s ease;
}
.portal-tabs-links a:hover { color: var(--sage); }
.portal-tabs-links a:hover::after { width: 100%; }
.portal-tabs-links a[aria-current="page"] { color: var(--green); }
.portal-tabs-links a[aria-current="page"]::after { width: 100%; background: var(--gold); }
.portal-account { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 0.9rem; color: var(--p-muted); }
.portal-account a, .portal-account button {
    font: 700 0.88rem/1.2 var(--p-font); color: var(--green); background: none; border: 0; padding: 4px 0;
    cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.portal-account a:hover, .portal-account button:hover { color: var(--sage); }
.portal-account strong { color: var(--p-ink); }

.portal-footer.site-footer { padding: 28px 0; }
.portal-footer .footer-sub-links a { white-space: nowrap; }
.portal-footer .footer-bottom { padding-top: 0; border-top: 0; }

/* ----- Toast ----- */
.portal-toast {
    position: fixed; right: 24px; bottom: 24px; z-index: 10000; max-width: 380px;
    padding: 14px 20px; border-radius: var(--p-radius-sm); background: var(--p-strong); color: #fff;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3); font-weight: 600; font-size: 0.92rem;
    transform: translateY(140%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; pointer-events: none;
}
.portal-toast.is-shown { transform: translateY(0); opacity: 1; }
.portal-toast.is-error { background: var(--p-danger); }

/* ----- Responsive ----- */
@media (max-width: 1023px) {
    .portal-split { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .portal-main { padding: calc(var(--header-h) + 24px) 0 56px; }
    .portal-wrap { padding: 0 16px; }
    .portal-card { padding: 20px; }
    .portal-auth .portal-card { padding: 24px 20px; }
    .portal-form .row { grid-template-columns: 1fr; }
    .portal-steps { grid-template-columns: repeat(4, 1fr); row-gap: 16px; }
    .portal-steps li::after { display: none; }
    .portal-msg { max-width: 92%; }
    .portal-table th:nth-child(n+4), .portal-table td:nth-child(n+4) { display: none; }
    .portal-facts { grid-template-columns: 1fr; gap: 2px; }
    .portal-facts dd { margin-bottom: 8px; }
    .portal-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
    .portal-tabs { margin-top: -4px; }
    .portal-tabs-links { gap: 4px 20px; }
}