/* BALIA Client Workspace v1.0.2
 * Design system: warm cream #F7F4EE / white, black body text, navy #0A2540,
 * gold eyebrow #85681E on light surfaces. No green anywhere.
 * Phone-first: the client reviews on an iPhone.
 */
.balia-cw {
    --balia-navy: #0A2540;
    --balia-cream: #F7F4EE;
    --balia-gold: #85681E;
    --balia-gold-bright: #C9A227;
    --balia-ink: #1a1a1a;
    --balia-muted: #6b6b6b;
    --balia-line: #e5ded1;
    max-width: 880px;
    margin: 0 auto;
    padding: 16px;
    color: var(--balia-ink);
    font-size: 16px;
    line-height: 1.6;
}

.balia-cw-eyebrow {
    color: var(--balia-gold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 8px;
}

.balia-cw h2 {
    color: var(--balia-navy);
    font-size: 28px;
    line-height: 1.25;
    margin: 0 0 8px;
}

.balia-cw h3 {
    color: var(--balia-navy);
    font-size: 20px;
    margin: 0 0 12px;
}

.balia-cw-muted { color: var(--balia-muted); }
.balia-cw-small { font-size: 13px; }

.balia-cw-card {
    background: #fff;
    border: 1px solid var(--balia-line);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(10, 37, 64, 0.06);
}

.balia-cw-login-card {
    max-width: 440px;
    margin: 32px auto;
    background: var(--balia-cream);
}

.balia-cw-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--balia-navy);
}

.balia-cw-form input[type="text"],
.balia-cw-form input[type="email"],
.balia-cw-form input[type="password"],
.balia-cw-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--balia-line);
    border-radius: 8px;
    font-size: 16px; /* prevents iOS zoom on focus */
    background: #fff;
    color: var(--balia-ink);
    box-sizing: border-box;
}

.balia-cw-form input:focus,
.balia-cw-form textarea:focus {
    outline: 2px solid var(--balia-navy);
    outline-offset: 1px;
    border-color: var(--balia-navy);
}

.balia-cw-btn {
    display: inline-block;
    background: var(--balia-navy);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    min-height: 48px; /* comfortable tap target */
}

.balia-cw-btn:hover { background: #123a63; }
.balia-cw-btn:focus-visible { outline: 3px solid var(--balia-gold-bright); outline-offset: 2px; }

.balia-cw-btn-ghost {
    background: transparent;
    color: var(--balia-navy) !important;
    border: 1px solid var(--balia-navy);
}

.balia-cw-error {
    background: #fdecea;
    border: 1px solid #e5a19a;
    color: #8f1d12;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.balia-cw-notice {
    background: var(--balia-cream);
    border: 1px solid var(--balia-line);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.balia-cw-head { margin-bottom: 20px; }

.balia-cw-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .balia-cw-grid { grid-template-columns: 1fr 1fr; }
}

.balia-cw-project-card {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.balia-cw-project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(10, 37, 64, 0.10);
}

.balia-cw-project-card h3 { margin: 8px 0; }

.balia-cw-status {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--balia-cream);
    color: var(--balia-navy);
    border: 1px solid var(--balia-line);
}

.balia-cw-status-completed { background: var(--balia-navy); color: #fff; border-color: var(--balia-navy); }
.balia-cw-status-paused { background: #fff; color: var(--balia-gold); border-color: var(--balia-gold); }
.balia-cw-status-archived { background: #eee; color: var(--balia-muted); }

.balia-cw-progress {
    height: 8px;
    background: var(--balia-cream);
    border-radius: 999px;
    overflow: hidden;
    margin: 12px 0 4px;
    border: 1px solid var(--balia-line);
}

.balia-cw-progress span {
    display: block;
    height: 100%;
    background: var(--balia-navy);
}

.balia-cw-link { color: var(--balia-navy); font-weight: 700; }

.balia-cw-back { margin-bottom: 8px; }
.balia-cw-back a { color: var(--balia-navy); font-weight: 600; text-decoration: none; }

.balia-cw-section {
    background: #fff;
    border: 1px solid var(--balia-line);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.balia-cw-milestones,
.balia-cw-tasks,
.balia-cw-docs { list-style: none; margin: 0; padding: 0; }

.balia-cw-milestones li,
.balia-cw-tasks li {
    padding: 12px 0;
    border-bottom: 1px solid var(--balia-line);
}

.balia-cw-milestones li:last-child,
.balia-cw-tasks li:last-child { border-bottom: none; }

.balia-cw-ms { border-left: 4px solid var(--balia-line); padding-left: 12px !important; }
.balia-cw-ms-complete { border-left-color: var(--balia-navy); }
.balia-cw-ms-in-progress { border-left-color: var(--balia-gold-bright); }

.balia-cw-task-done strong { text-decoration: line-through; color: var(--balia-muted); }

.balia-cw-docs li { margin-bottom: 8px; }

.balia-cw-doc {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--balia-cream);
    border: 1px solid var(--balia-line);
    border-radius: 8px;
    padding: 12px 16px;
}

.balia-cw-doc:hover { border-color: var(--balia-navy); }
.balia-cw-doc strong { color: var(--balia-navy); display: block; }

.balia-cw-messages { margin-bottom: 16px; }

.balia-cw-msg {
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
    max-width: 100%;
}

.balia-cw-msg-staff { background: var(--balia-navy); color: #fff; }
.balia-cw-msg-staff .balia-cw-muted { color: #c9d4e2; }
.balia-cw-msg-client { background: var(--balia-cream); border: 1px solid var(--balia-line); }

.balia-cw-msg-meta { margin: 0 0 6px; font-size: 13px; }
.balia-cw-msg-body p { margin: 0 0 8px; }
.balia-cw-msg-body p:last-child { margin-bottom: 0; }

/* Larger screens: a little more air, same phone-first core */
@media (min-width: 720px) {
    .balia-cw { padding: 32px; }
    .balia-cw h2 { font-size: 34px; }
    .balia-cw-section { padding: 28px; }
}

/* v1.0.2, DEFECT 1 — Fixed-header clearance. Bricks renders the page H1
   ("Client Portal" / "Client Dashboard") outside our shortcode output, and
   the fixed Bricks header overlaps it on portal pages. Same pattern as the
   trade-tools tool pages (Phase 1): push the main content wrapper down on
   pages whose content contains our shortcode output. This stylesheet only
   loads on portal pages (registered in class-balia-cw-auth.php), so the
   :has() scope is belt and braces. 140px desktop / 104px <=991px matches
   the fixed header height on each breakpoint. */
main:has([class*="balia-cw"]),
[role="main"]:has([class*="balia-cw"]) { padding-top: 140px; }
@media (max-width: 991px) {
  main:has([class*="balia-cw"]),
  [role="main"]:has([class*="balia-cw"]) { padding-top: 104px; }
}