/* ==========================================================================
   Urenportal — front-end portaal
   Zelfstandige, thema-onafhankelijke opmaak. Alles is gescoped onder
   .up-portal zodat het WordPress-thema de weergave niet beïnvloedt, en
   omgekeerd. Kleur draagt uitsluitend betekenis (status), geen decoratie.
   ========================================================================== */

.up-portal{
    --up-ink:#1c1c1a;
    --up-ink-soft:#5f5e5a;
    --up-ink-faint:#8a8985;
    --up-line:#e4e2da;
    --up-line-strong:#cfcdc4;
    --up-surface:#ffffff;
    --up-surface-alt:#faf9f6;
    --up-accent:#0f6e56;
    --up-accent-dark:#0b5744;
    --up-danger:#993c1d;
    --up-radius:10px;
    --up-radius-sm:6px;

    max-width:1000px;
    margin:0 auto;
    padding:4px;
    color:var(--up-ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:15px;
    line-height:1.6;
    box-sizing:border-box;
}
.up-portal *,
.up-portal *::before,
.up-portal *::after{box-sizing:border-box}

/* --- Koppen --- */
.up-portal h2{
    margin:34px 0 6px;
    font-size:21px;
    font-weight:600;
    letter-spacing:-0.01em;
    color:var(--up-ink);
    line-height:1.3;
}
.up-portal h2:first-child{margin-top:6px}
.up-portal h3{
    margin:0 0 10px;
    font-size:17px;
    font-weight:600;
    letter-spacing:-0.005em;
    color:var(--up-ink);
    line-height:1.35;
}
.up-portal h4{margin:18px 0 6px;font-size:14px;font-weight:600;color:var(--up-ink-soft)}
.up-portal p{margin:0 0 12px}

.up-greeting{
    font-size:13px;
    color:var(--up-ink-faint);
    padding-bottom:14px;
    margin-bottom:4px;
    border-bottom:1px solid var(--up-line);
}
.up-hint{font-size:13.5px;color:var(--up-ink-soft);margin:0 0 14px}

/* --- Inlogscherm --- */
.up-login{
    max-width:400px;
    margin:40px auto;
    padding:32px 30px;
    background:var(--up-surface);
    border:1px solid var(--up-line);
    border-radius:var(--up-radius);
}
.up-login-title{margin:0 0 6px !important;font-size:22px;font-weight:600}
.up-login form p{margin:0 0 14px}
.up-login label{
    display:block;
    margin-bottom:5px;
    font-size:13px;
    font-weight:500;
    color:var(--up-ink-soft);
}
.up-login input[type=text],
.up-login input[type=password]{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--up-line-strong);
    border-radius:var(--up-radius-sm);
    font:inherit;
    font-size:15px;
    background:var(--up-surface);
    color:var(--up-ink);
}
.up-login input[type=text]:focus,
.up-login input[type=password]:focus{
    outline:2px solid var(--up-accent);
    outline-offset:1px;
    border-color:var(--up-accent);
}
.up-login .login-remember label{
    display:flex;
    align-items:center;
    gap:7px;
    font-weight:400;
    color:var(--up-ink-soft);
}
.up-login .login-submit input[type=submit],
.up-login input[type=submit]{
    width:100%;
    padding:11px 18px;
    border:1px solid var(--up-accent);
    border-radius:var(--up-radius-sm);
    background:var(--up-accent);
    color:#fff;
    font:inherit;
    font-weight:600;
    font-size:15px;
    cursor:pointer;
    transition:background-color .12s ease;
}
.up-login .login-submit input[type=submit]:hover,
.up-login input[type=submit]:hover{background:var(--up-accent-dark)}
.up-login-help{margin:16px 0 0;font-size:13px;text-align:center}
.up-login-help a{color:var(--up-ink-soft)}

/* --- Portaalkop --- */
.up-header{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    padding:0 0 16px;
    margin-bottom:8px;
    border-bottom:1px solid var(--up-line);
}
.up-header-main{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.up-header-title{
    font-size:17px;
    font-weight:600;
    letter-spacing:-0.01em;
    color:var(--up-ink);
}
.up-header-role{
    display:inline-block;
    padding:3px 10px;
    border-radius:20px;
    background:var(--up-surface-alt);
    border:1px solid var(--up-line);
    font-size:12px;
    font-weight:600;
    color:var(--up-ink-soft);
    white-space:nowrap;
}
.up-header-user{display:flex;align-items:center;gap:14px;font-size:13px}
.up-header-name{color:var(--up-ink-soft)}
.up-header-logout{color:var(--up-ink-soft);text-decoration:none;border-bottom:1px solid var(--up-line-strong)}
.up-header-logout:hover{color:var(--up-ink);border-bottom-color:var(--up-ink-faint)}

/* --- Meldingen --- */
.up-notice{
    background:#e9f5f1;
    border:1px solid #bfe0d5;
    border-left:3px solid var(--up-accent);
    padding:12px 16px;
    margin:16px 0;
    border-radius:var(--up-radius-sm);
    font-size:14px;
}
.up-notice-error{background:#fbeee9;border-color:#e6c6b8;border-left-color:var(--up-danger)}

/* --- Kaarten --- */
.up-card{
    border:1px solid var(--up-line);
    border-radius:var(--up-radius);
    padding:22px 24px;
    margin:18px 0;
    background:var(--up-surface);
}

/* --- Tabellen --- */
.up-table,.up-lines{
    width:100%;
    border-collapse:collapse;
    margin:14px 0;
    font-size:14.5px;
}
.up-table th,.up-lines th{
    text-align:left;
    padding:10px 12px;
    border-bottom:1px solid var(--up-line-strong);
    font-weight:600;
    font-size:12.5px;
    letter-spacing:0.03em;
    text-transform:uppercase;
    color:var(--up-ink-soft);
    white-space:nowrap;
}
.up-table td,.up-lines td{
    padding:10px 12px;
    border-bottom:1px solid var(--up-line);
    vertical-align:middle;
}
.up-table tbody tr:last-child td{border-bottom:none}
.up-table tbody tr:hover{background:var(--up-surface-alt)}

/* --- Formulieren --- */
.up-lines input,.up-lines select,
.up-week-form select,.up-week-form input{
    padding:8px 10px;
    border:1px solid var(--up-line-strong);
    border-radius:var(--up-radius-sm);
    font:inherit;
    color:var(--up-ink);
    background:var(--up-surface);
    max-width:100%;
}
.up-lines input:focus,.up-lines select:focus,
.up-week-form select:focus,.up-week-form input:focus,
.up-decide textarea:focus{
    outline:2px solid var(--up-accent);
    outline-offset:1px;
    border-color:var(--up-accent);
}
.up-lines input[readonly]{background:var(--up-surface-alt);color:var(--up-ink-soft)}
.up-week-form label{
    display:inline-flex;
    flex-direction:column;
    gap:4px;
    margin:0 18px 12px 0;
    font-size:13px;
    color:var(--up-ink-soft);
}

/* --- Knoppen --- */
.up-btn{
    display:inline-block;
    padding:10px 18px;
    border:1px solid var(--up-line-strong);
    border-radius:var(--up-radius-sm);
    background:var(--up-surface-alt);
    color:var(--up-ink);
    font:inherit;
    font-weight:500;
    line-height:1.2;
    cursor:pointer;
    text-decoration:none;
    transition:background-color .12s ease,border-color .12s ease;
}
.up-btn:hover{background:#f0eee7;border-color:var(--up-ink-faint)}
.up-btn:focus-visible{outline:2px solid var(--up-accent);outline-offset:2px}
.up-btn-primary{background:var(--up-accent);border-color:var(--up-accent);color:#fff}
.up-btn-primary:hover{background:var(--up-accent-dark);border-color:var(--up-accent-dark)}
.up-btn-danger{background:var(--up-danger);border-color:var(--up-danger);color:#fff}
.up-btn-danger:hover{background:#7f3018;border-color:#7f3018}

/* --- Beoordelen --- */
.up-decide textarea{
    width:100%;
    min-height:78px;
    padding:10px 12px;
    border:1px solid var(--up-line-strong);
    border-radius:var(--up-radius-sm);
    font:inherit;
    margin:10px 0;
    resize:vertical;
}
.up-decide-buttons{display:flex;gap:10px;flex-wrap:wrap}

/* --- Statuslabels --- */
.up-status{
    display:inline-block;
    padding:3px 11px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.01em;
    white-space:nowrap;
    border:1px solid transparent;
}
.up-status-concept{background:#f1efe8;color:#5f5e5a;border-color:#e0ddd2}
.up-status-ingediend{background:#fdf1de;color:#854f0b;border-color:#f0dcb8}
.up-status-afgekeurd{background:#fbeee9;color:#993c1d;border-color:#eed3c7}
.up-status-goedgekeurd{background:#e5f4ee;color:#0f6e56;border-color:#c3e2d5}
.up-status-klaar_voor_facturatie{background:#fff6da;color:#7a5b00;border-color:#f0e0ae}
.up-status-gefactureerd{background:#e8f0fa;color:#185fa5;border-color:#c9dcf0}

/* --- Verloop (audit-log) --- */
.up-flow{font-size:13px;margin:8px 0 4px}
.up-flow th{font-size:11.5px;padding:8px 10px}
.up-flow td{color:var(--up-ink-soft);padding:8px 10px}

/* --- Filters --- */
.up-filters{
    margin:14px 0 22px;
    padding:16px 18px;
    background:var(--up-surface-alt);
    border:1px solid var(--up-line);
    border-radius:var(--up-radius);
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:flex-end;
}
.up-filters label{
    font-size:12.5px;
    font-weight:500;
    color:var(--up-ink-soft);
    display:flex;
    flex-direction:column;
    gap:5px;
}
.up-filters select,.up-filters input{
    padding:7px 9px;
    border:1px solid var(--up-line-strong);
    border-radius:var(--up-radius-sm);
    font:inherit;
    font-size:14px;
    background:var(--up-surface);
    color:var(--up-ink);
}

/* --- Overig --- */
.up-proforma{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
.up-proforma input[type=email]{padding:9px 10px;border:1px solid var(--up-line-strong);border-radius:var(--up-radius-sm);font:inherit}
.up-role-switch{font-size:13px;margin:10px 0;color:var(--up-ink-soft)}
.up-week-note{font-size:13.5px;color:var(--up-accent);margin:6px 0 14px;min-height:1em}

/* --- Mobiel --- */
@media (max-width:640px){
    .up-portal{font-size:14.5px}
    .up-card{padding:16px}
    .up-table,.up-lines{display:block;overflow-x:auto;white-space:nowrap}
    .up-week-form label{display:flex;margin-right:0;width:100%}
    .up-decide-buttons .up-btn{flex:1 1 auto;text-align:center}
}

/* --- Toegankelijkheid --- */
@media (prefers-reduced-motion:reduce){
    .up-portal *{transition:none !important}
}