/* Split out of style.css — enqueued only where it is needed.
   Edit here, not in style.css. */

/* ═══════════════════════════════════════════════════════
   CLIENT PORTAL — quotations & invoices list
═══════════════════════════════════════════════════════ */
.tpc-portal-docs { display: flex; flex-direction: column; gap: .75rem; }

.tpc-portal-doc {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--r-lg, 16px);
    background: var(--c-surface-2);
    border: 1px solid rgba(255, 255, 255, .07);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.tpc-portal-doc:hover {
    border-color: rgba(59, 130, 246, .35);
    background: var(--c-surface-hover, #1a2236);
    transform: translateY(-2px);
}

.tpc-portal-doc__icon { font-size: 1.35rem; flex-shrink: 0; width: 28px; text-align: center; }

.tpc-portal-doc__body { flex: 1; min-width: 0; }
.tpc-portal-doc__title {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tpc-portal-doc__date {
    display: block;
    font-size: .78rem;
    color: var(--c-text-muted, #94a3b8);
    margin-top: .15rem;
}

.tpc-portal-doc__amount {
    font-weight: 800;
    font-size: .95rem;
    color: #fff;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tpc-portal-doc__status {
    padding: .22rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

/* A quote still waiting on the client gets an explicit prompt. */
.tpc-portal-doc__cta {
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--c-primary);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .tpc-portal-doc { flex-wrap: wrap; }
    .tpc-portal-doc__body { flex: 1 1 100%; order: -1; }
}

/* ═══════════════════════════════════════════════════════
   CLIENT PORTAL — file exchange & phase approvals
═══════════════════════════════════════════════════════ */
.tpc-portal-msg {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.1rem;
    border-radius: var(--r-md, 12px);
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.tpc-portal-msg.is-ok  { background: rgba(34,197,94,.1);  border: 1px solid rgba(34,197,94,.25);  color: #4ade80; }
.tpc-portal-msg.is-err { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.25);  color: #f87171; }

/* ── Phase approval ─────────────────────────────────── */
.tpc-approval {
    padding: 1.75rem;
    border-radius: var(--r-lg, 16px);
    background: linear-gradient(135deg, rgba(245,158,11,.08), var(--c-surface-2));
    border: 1px solid rgba(245,158,11,.28);
}
.tpc-approval__head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.tpc-approval__head > i { font-size: 1.6rem; color: #f59e0b; flex-shrink: 0; margin-top: .15rem; }
.tpc-approval__head h4 { color: #fff; font-size: 1.05rem; font-weight: 700; margin: 0 0 .35rem; }
.tpc-approval__head p  { color: var(--c-text-muted, #94a3b8); font-size: .9rem; line-height: 1.6; margin: 0; }

.tpc-approval__form textarea {
    width: 100%;
    padding: .8rem 1rem;
    border-radius: var(--r-md, 12px);
    background: var(--c-surface);
    border: 1px solid rgba(255,255,255,.1);
    color: var(--c-text);
    font-family: inherit;
    font-size: .9rem;
    resize: vertical;
}
.tpc-approval__form textarea:focus { outline: none; border-color: var(--c-primary); }
.tpc-approval__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .85rem; }

/* ── Upload ─────────────────────────────────────────── */
.tpc-upload {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.tpc-upload__drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 2rem 1rem;
    border-radius: var(--r-lg, 16px);
    background: var(--c-surface-2);
    border: 2px dashed rgba(255,255,255,.14);
    cursor: pointer;
    text-align: center;
    transition: border-color .2s ease, background .2s ease;
}
.tpc-upload__drop:hover { border-color: var(--c-primary); background: var(--c-surface-hover, #1a2236); }
.tpc-upload__drop > i   { font-size: 1.9rem; color: var(--c-primary); }
.tpc-upload__label      { color: #fff; font-weight: 700; font-size: .95rem; }
.tpc-upload__hint       { color: var(--c-text-muted, #94a3b8); font-size: .8rem; }

/* The native control is kept focusable rather than display:none. */
.tpc-upload__drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.tpc-upload__drop:focus-within { border-color: var(--c-primary); }

.tpc-upload__note {
    padding: .75rem 1rem;
    border-radius: var(--r-md, 12px);
    background: var(--c-surface-2);
    border: 1px solid rgba(255,255,255,.1);
    color: var(--c-text);
    font-family: inherit;
    font-size: .9rem;
}
.tpc-upload__note:focus { outline: none; border-color: var(--c-primary); }
.tpc-upload button { justify-self: start; }

/* ── File list ──────────────────────────────────────── */
.tpc-files { display: flex; flex-direction: column; gap: .6rem; }

.tpc-file {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.1rem;
    border-radius: var(--r-md, 12px);
    background: var(--c-surface-2);
    border: 1px solid rgba(255,255,255,.07);
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease;
}
.tpc-file:hover { border-color: rgba(59,130,246,.35); background: var(--c-surface-hover, #1a2236); }

.tpc-file__icon { font-size: 1.25rem; color: var(--c-primary); width: 26px; text-align: center; flex-shrink: 0; }
.tpc-file__body { flex: 1; min-width: 0; }
.tpc-file__name {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tpc-file__meta { display: block; font-size: .76rem; color: var(--c-text-muted, #94a3b8); margin-top: .15rem; }

.tpc-file__tag {
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}
.tpc-file__tag.is-in  { background: rgba(59,130,246,.14); color: #60a5fa; }
.tpc-file__tag.is-out { background: rgba(34,197,94,.14);  color: #4ade80; }

.tpc-file__dl { color: var(--c-text-muted, #94a3b8); flex-shrink: 0; }
.tpc-file:hover .tpc-file__dl { color: var(--c-primary); }

@media (max-width: 640px) {
    .tpc-file { flex-wrap: wrap; }
    .tpc-file__body { flex: 1 1 100%; order: -1; }
}



/* ════════════════════
   CLIENT PORTAL — template block — moved out of template-portal.php (portal template).
════════════════════ */
.portal-phone-wrapper { display:flex; justify-content:center; align-items:center; padding:2rem 0; perspective: 1000px; }
                        .portal-phone { position:relative; width: 280px; height: 560px; border: 10px solid #1e293b; border-radius: 36px; background:#030712; box-shadow: 0 20px 40px rgba(0,0,0,0.6); transform-style: preserve-3d; transition: transform 0.2s ease; }
                        .portal-phone-notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:100px; height:20px; background:#1e293b; border-bottom-left-radius:10px; border-bottom-right-radius:10px; z-index:10; }
                        .portal-phone-screen { position:relative; width:100%; height:100%; border-radius:26px; overflow:hidden; }
                        
                        .p-slider { position:relative; width:100%; height:100%; overflow:hidden; user-select:none; touch-action: pan-y; }
                        .p-slider img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
                        .p-img-after { z-index:1; }
                        .p-img-before { z-index:2; clip-path:polygon(0 0, 50% 0, 50% 100%, 0 100%); }
                        
                        .p-slider-handle { position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; z-index:5; cursor:ew-resize; transform:translateX(-50%); touch-action: none; }
                        .p-handle-btn { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:32px; height:32px; background:#fff; color:#000; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow: 0 2px 6px rgba(0,0,0,0.3); font-size:0.75rem; touch-action: none; }