/**
 * AF1.0 Customer Portal — Stylesheet
 * AltenaSolutions.com
 */

/* Layout wraps */
.ac-wrap{max-width:860px;margin:0 auto;padding:var(--space-6) var(--space-4) 80px}
.ac-head{margin-bottom:var(--space-5)}
.ac-head h1{font-size:22px;font-weight:700;margin:0 0 var(--space-1)}
.ac-head p{font-size:var(--text-sm);color:var(--color-text-body);margin:0}

/* Grid: sidebar + main */
.ac-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5);align-items:start}
.ac-grid2{display:grid;grid-template-columns:1fr;gap:var(--space-3)}

/* Sidebar nav */
.ac-nav{background:var(--color-white);border:1px solid var(--color-border);border-radius:12px;overflow:hidden}
.ac-nav-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);color:var(--color-neutral-444);text-decoration:none;border-bottom:1px solid var(--color-bg-soft);transition:background .1s}
.ac-nav-item:last-child{border-bottom:none}
.ac-nav-item:hover{background:var(--color-bg-muted);color:var(--color-text-dark)}
.ac-nav-item.active{background:var(--color-success-bg-soft);color:var(--color-success-text);font-weight:600}

/* Cards */
.ac-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:12px;padding:var(--space-5);margin-bottom:var(--space-4)}
.ac-card h1{font-size:22px;font-weight:700;margin:0 0 var(--space-1)}
.ac-card h2{font-size:15px;font-weight:600;margin:0 0 var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-bg-soft)}
.ac-sub{font-size:13px;color:var(--color-text-body);margin:0 0 var(--space-5)}

/* Forms */
.ac-field{margin-bottom:var(--space-3)}
.ac-field label{display:block;font-size:11px;font-weight:600;color:var(--color-neutral-666);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-1)}
.ac-field input,.ac-field select,.ac-field textarea{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-light);border-radius:var(--radius-base);font-size:var(--text-sm);font-family:inherit;color:var(--color-text-dark);box-sizing:border-box;outline:none}
.ac-field input:focus,.ac-field select:focus,.ac-field textarea:focus{border-color:var(--color-neutral-999);box-shadow:0 0 0 var(--space-1) rgba(0,0,0,.05)}
.ac-hint{font-size:11px;color:var(--color-text-body-alt);margin-top:var(--space-1)}
.ac-req{color:var(--color-red)}

/* Buttons */
.ac-btn{width:100%;padding:var(--space-3);background:var(--color-text-dark);color:var(--color-white);border:none;border-radius:9px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;margin-top:var(--space-1)}
.ac-btn:hover{background:var(--color-neutral-333)}
.ac-btn-red{background:var(--color-red)}.ac-btn-red:hover{background:var(--color-red-dark)}
.ac-btn-inline{width:auto;padding:var(--space-2) var(--space-4);font-size:var(--text-sm)}

/* Alerts */
.ac-err{background:var(--color-danger-bg-soft);border:1px solid var(--color-red-light-border);border-radius:var(--radius-base);padding:var(--space-2) var(--space-3);font-size:13px;color:var(--color-red-dark);margin-bottom:var(--space-4)}
.ac-ok{background:var(--color-success-bg-soft);border:1px solid var(--color-success-border);border-radius:var(--radius-base);padding:var(--space-2) var(--space-3);font-size:13px;color:var(--color-success-text);margin-bottom:var(--space-4)}

/* Links */
.ac-links{display:flex;justify-content:space-between;margin-top:var(--space-4);font-size:13px}
.ac-links a{color:var(--color-text-muted);text-decoration:none}
.ac-links a:hover{color:var(--color-text-dark);text-decoration:underline}
.ac-sep{text-align:center;margin:var(--space-4) 0;font-size:var(--text-xs);color:var(--color-text-body);position:relative}
.ac-sep::before,.ac-sep::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--color-border)}
.ac-sep::before{left:0}.ac-sep::after{right:0}

/* 2FA code input */
.ac-code-input{width:100%;padding:var(--space-3);text-align:center;font-size:var(--text-xl);font-weight:700;letter-spacing:.2em;border:2px solid var(--color-border-light);border-radius:10px;font-family:monospace;box-sizing:border-box;outline:none}
.ac-code-input:focus{border-color:var(--color-text-dark)}
.qr-box{background:var(--color-bg-muted);border-radius:10px;padding:var(--space-4);text-align:center;margin-bottom:var(--space-4)}
.qr-secret{font-family:monospace;font-size:13px;letter-spacing:.08em;background:var(--color-white);border:1px solid var(--color-border);border-radius:6px;padding:var(--space-1) var(--space-2);display:inline-block;margin-top:var(--space-2)}

/* Stats */
.ac-stat{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-4)}
.ac-stat-box{background:var(--color-bg-muted);border-radius:10px;padding:var(--space-3);text-align:center}
.ac-stat-box .val{font-size:22px;font-weight:700}
.ac-stat-box .lbl{font-size:11px;color:var(--color-text-body);margin-top:2px}

/* Booking cards */
.bk-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:12px;padding:var(--space-4) var(--space-4);margin-bottom:var(--space-3)}
.bk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);flex-wrap:wrap}
.bk-title{font-size:15px;font-weight:600}
.bk-badge{font-size:11px;font-weight:600;padding:var(--space-1) var(--space-2);border-radius:20px;white-space:nowrap}
.bk-meta{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-2);font-size:13px;color:var(--color-neutral-666)}
.bk-meta span::before{margin-right:var(--space-1)}
.bk-empty{background:var(--color-bg-muted);border:1px solid var(--color-border);border-radius:12px;padding:var(--space-6);text-align:center;color:var(--color-text-body)}

/* Responsive — mobile-first */
@media(min-width:480px){
  .ac-stat{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:768px){
  .ac-grid{grid-template-columns:220px 1fr}
  .ac-grid2{grid-template-columns:1fr 1fr}
}

/* Facturen (account-invoices.php) */
.inv-summary{display:flex;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-4) 0 var(--space-5)}
.inv-summary-item{padding:var(--space-4) var(--space-5);border-radius:var(--radius-base,8px);border:1px solid var(--cb);background:var(--color-white);min-width:170px;display:flex;flex-direction:column;gap:var(--space-1)}
.inv-summary-item--overdue{border-color:var(--color-red);background:var(--color-danger-bg-soft)}
.inv-summary-item--open{border-color:var(--color-warning-accent);background:var(--color-warning-bg-soft)}
.inv-summary-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-neutral-666);font-weight:600}
.inv-summary-value{font-size:1.375rem;font-weight:700;color:var(--color-text-dark);font-variant-numeric:tabular-nums}
.inv-empty{text-align:center;padding:var(--space-7) var(--space-4);color:var(--color-neutral-666);background:var(--color-bg-muted);border-radius:var(--radius-base,8px);border:1px dashed var(--cb)}
.inv-empty h3{margin:0 0 var(--space-2);font-size:1.125rem;color:var(--color-text-dark)}

/* Invoice table — mobile-first: card layout is base */
.inv-table{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:.9375rem;background:transparent;
  border:none;overflow:hidden;margin-top:var(--space-4)
}
.inv-table thead{display:none}
.inv-table tbody{display:flex;flex-direction:column;gap:var(--space-3)}
.inv-table tr{
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-3);
  background:var(--color-white);border:1px solid var(--cb);border-radius:var(--radius-base,8px);
  padding:var(--space-4)
}
.inv-table td{
  text-align:left;vertical-align:middle;line-height:1.5;
  border:none;padding:0
}
.inv-table td.inv-cell-nr{grid-column:1 / -1;font-size:var(--text-base);margin-bottom:var(--space-1)}
.inv-table td:not(.inv-cell-nr)::before{
  content:attr(data-label);color:var(--color-neutral-888);font-size:.75rem;
  text-transform:uppercase;letter-spacing:.05em
}
.inv-table tbody tr:last-child td{border-bottom:none}
.inv-col-right{text-align:left}

.inv-cell-nr{font-variant-numeric:tabular-nums;min-width:140px}
.inv-nr-link{
  display:inline-flex;align-items:center;gap:var(--space-2);
  text-decoration:none;color:var(--p);font-weight:600;
  padding:var(--space-1) var(--space-2);margin:calc(-1 * var(--space-1)) calc(-1 * var(--space-2));border-radius:6px;
  transition:background .15s,color .15s
}
.inv-nr-link:hover{background:rgba(61,175,255,.08);color:var(--pd)}
.inv-nr-link:hover .inv-dl-icon{transform:translateY(1px)}
.inv-dl-icon{flex-shrink:0;transition:transform .15s ease;color:var(--p);opacity:.85}
.inv-nr-text{color:var(--color-neutral-666);font-weight:600}

.inv-amount{font-variant-numeric:tabular-nums;font-weight:600;color:var(--color-text-dark);white-space:nowrap}

.inv-badge{
  display:inline-flex;align-items:center;
  font-size:.75rem;font-weight:600;
  padding:.25rem .7rem;border-radius:999px;border:1px solid;line-height:1.3;
  white-space:nowrap
}
.inv-paid-date{display:block;font-size:.6875rem;color:var(--color-neutral-666);margin-top:var(--space-1)}

@media (min-width:768px){
  .inv-table{background:var(--color-white);border:1px solid var(--cb);border-radius:var(--radius-base,8px)}
  .inv-table thead{display:table-header-group;background:var(--color-bg-elevated-cool)}
  .inv-table tbody{display:table-row-group}
  .inv-table tr{display:table-row;background:none;border:none;border-radius:0;padding:0}
  .inv-table th{
    padding:var(--space-4);
    font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-neutral-666);
    text-align:left;border-bottom:1px solid var(--cb);white-space:nowrap
  }
  .inv-table td{padding:var(--space-4);border-bottom:1px solid var(--cb)}
  .inv-table td.inv-cell-nr{grid-column:auto;font-size:inherit;margin-bottom:0}
  .inv-table td:not(.inv-cell-nr)::before{content:none}
  .inv-table tbody tr:hover td{background:var(--color-bg-elevated-warm-2)}
  .inv-col-right{text-align:right}
}