/* ================================================================
   Offertesysteem – Portal CSS
   ================================================================ */

:root {
  --ofs-blue:       #1f5c99;
  --ofs-mid-blue:   #2e75b6;
  --ofs-light-blue: #d6e4f0;
  --ofs-white:      #ffffff;
  --ofs-bg:         #f5f7fa;
  --ofs-text:       #333333;
  --ofs-muted:      #777777;
  --ofs-border:     #dde2ea;
  --ofs-success:    #2e7d32;
  --ofs-success-bg: #eaf4e8;
  --ofs-error:      #c0392b;
  --ofs-error-bg:   #fdecea;
  --ofs-warning-bg: #fff8e1;
  --ofs-radius:     6px;
  --ofs-shadow:     0 2px 8px rgba(0,0,0,.08);
  --ofs-transition: .18s ease;
}

/* ── Layout ─────────────────────────────────────────────────── */
.ofs-portal { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }

.ofs-dashboard { display: flex; gap: 0; align-items: flex-start; }

.ofs-dashboard-nav {
  width: 220px;
  flex-shrink: 0;
  background: var(--ofs-white);
  border: 1px solid var(--ofs-border);
  border-radius: var(--ofs-radius);
  box-shadow: var(--ofs-shadow);
  overflow: hidden;
  margin-right: 24px;
  position: sticky;
  top: 24px;
}
.ofs-dashboard-nav ul { list-style: none; margin: 0; padding: 0; }
.ofs-dashboard-nav li a {
  display: block;
  padding: 12px 20px;
  color: var(--ofs-text);
  text-decoration: none;
  border-bottom: 1px solid var(--ofs-border);
  font-size: 14px;
  transition: background var(--ofs-transition), color var(--ofs-transition);
}
.ofs-dashboard-nav li a:hover,
.ofs-dashboard-nav li.ofs-nav--active a {
  background: var(--ofs-light-blue);
  color: var(--ofs-blue);
  font-weight: 600;
}

.ofs-dashboard__content { flex: 1; min-width: 0; }

/* ── Cards ──────────────────────────────────────────────────── */
.ofs-card {
  background: var(--ofs-white);
  border: 1px solid var(--ofs-border);
  border-radius: var(--ofs-radius);
  box-shadow: var(--ofs-shadow);
  padding: 24px;
  margin-bottom: 20px;
}
.ofs-card--narrow  { max-width: 440px; margin-left: auto; margin-right: auto; }
.ofs-card--full    { padding: 0; overflow: hidden; }
.ofs-card__title   { font-size: 18px; font-weight: 700; color: var(--ofs-blue); margin: 0 0 16px; }

/* ── Detail grid ────────────────────────────────────────────── */
.ofs-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .ofs-detail-grid { grid-template-columns: 1fr; } }

/* ── Tables ─────────────────────────────────────────────────── */
.ofs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ofs-table thead th {
  background: var(--ofs-blue);
  color: var(--ofs-white);
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
}
.ofs-table tbody tr:nth-child(even) { background: var(--ofs-bg); }
.ofs-table tbody tr:hover { background: var(--ofs-light-blue); }
.ofs-table td { padding: 10px 14px; border-bottom: 1px solid var(--ofs-border); vertical-align: middle; }

.ofs-detail-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ofs-detail-table th {
  width: 38%; padding: 8px 12px; background: var(--ofs-bg);
  font-weight: 600; color: var(--ofs-muted); text-align: left;
  border-bottom: 1px solid var(--ofs-border);
}
.ofs-detail-table td { padding: 8px 12px; border-bottom: 1px solid var(--ofs-border); }

.ofs-empty { text-align: center; color: var(--ofs-muted); padding: 32px !important; }

/* ── Badges ─────────────────────────────────────────────────── */
.ofs-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.ofs-badge--nieuw              { background: #e3f2fd; color: #1565c0; }
.ofs-badge--offerte_verzonden  { background: #fff3e0; color: #e65100; }
.ofs-badge--offerte_akkoord    { background: var(--ofs-success-bg); color: var(--ofs-success); }
.ofs-badge--offerte_niet_akkoord { background: var(--ofs-error-bg); color: var(--ofs-error); }
.ofs-badge--in_behandeling     { background: #fff3e0; color: #e65100; }
.ofs-badge--goedgekeurd        { background: var(--ofs-success-bg); color: var(--ofs-success); }
.ofs-badge--afgekeurd          { background: var(--ofs-error-bg); color: var(--ofs-error); }

/* ── Buttons ────────────────────────────────────────────────── */
.ofs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 20px; border-radius: var(--ofs-radius);
  font-size: 14px; font-weight: 600; cursor: pointer;
  border: 2px solid transparent; text-decoration: none;
  transition: all var(--ofs-transition);
}
.ofs-btn--primary  { background: var(--ofs-blue);     color: var(--ofs-white); border-color: var(--ofs-blue); }
.ofs-btn--primary:hover { background: var(--ofs-mid-blue); border-color: var(--ofs-mid-blue); }
.ofs-btn--secondary{ background: transparent; color: var(--ofs-blue); border-color: var(--ofs-blue); }
.ofs-btn--secondary:hover { background: var(--ofs-light-blue); }
.ofs-btn--ghost    { background: transparent; color: var(--ofs-text); border-color: var(--ofs-border); }
.ofs-btn--ghost:hover { background: var(--ofs-bg); }
.ofs-btn--danger   { background: var(--ofs-error); color: var(--ofs-white); border-color: var(--ofs-error); }
.ofs-btn--full     { width: 100%; }
.ofs-btn--sm       { padding: 5px 12px; font-size: 13px; }

/* ── Forms ──────────────────────────────────────────────────── */
.ofs-form { }
.ofs-form__section-title { font-size: 15px; font-weight: 700; color: var(--ofs-blue); margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--ofs-light-blue); }
.ofs-form__row    { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .ofs-form__row { grid-template-columns: 1fr; } }
.ofs-form__group  { display: flex; flex-direction: column; margin-bottom: 14px; }
.ofs-form__label  { font-size: 13px; font-weight: 600; color: var(--ofs-text); margin-bottom: 5px; }
.ofs-form__input  {
  padding: 9px 12px; border: 1px solid var(--ofs-border);
  border-radius: var(--ofs-radius); font-size: 14px; color: var(--ofs-text);
  transition: border-color var(--ofs-transition), box-shadow var(--ofs-transition);
  background: var(--ofs-white);
}
.ofs-form__input:focus { outline: none; border-color: var(--ofs-mid-blue); box-shadow: 0 0 0 3px rgba(46,117,182,.15); }
.ofs-form__textarea { resize: vertical; min-height: 90px; }
.ofs-form__hint   { font-size: 12px; color: var(--ofs-muted); margin: 4px 0 0; }
.ofs-form__group--inline { flex-direction: row; align-items: center; justify-content: space-between; }
.ofs-form__link   { font-size: 13px; color: var(--ofs-mid-blue); }
.ofs-required     { color: var(--ofs-error); }

/* ── Notices ────────────────────────────────────────────────── */
.ofs-notice {
  padding: 12px 16px; border-radius: var(--ofs-radius);
  margin-bottom: 16px; font-size: 14px; border-left: 4px solid;
}
.ofs-notice--success { background: var(--ofs-success-bg); border-color: var(--ofs-success); color: var(--ofs-success); }
.ofs-notice--error   { background: var(--ofs-error-bg);   border-color: var(--ofs-error);   color: var(--ofs-error); }
.ofs-notice--info    { background: #e3f2fd; border-color: #1565c0; color: #1565c0; }
.ofs-notice ul       { margin: 6px 0 0 18px; padding: 0; }

/* ── Pagination ─────────────────────────────────────────────── */
.ofs-pagination { display: flex; gap: 6px; padding: 16px; flex-wrap: wrap; }
.ofs-pagination__btn {
  display: inline-block; padding: 5px 11px; border: 1px solid var(--ofs-border);
  border-radius: var(--ofs-radius); font-size: 13px; color: var(--ofs-text);
  text-decoration: none; background: var(--ofs-white);
}
.ofs-pagination__btn:hover { background: var(--ofs-light-blue); }
.ofs-pagination__btn--active { background: var(--ofs-blue); color: var(--ofs-white); border-color: var(--ofs-blue); }

/* ── Misc ───────────────────────────────────────────────────── */
.ofs-page-title { font-size: 22px; font-weight: 700; color: var(--ofs-blue); margin: 0 0 20px; }
.ofs-divider    { border: none; border-top: 1px solid var(--ofs-border); margin: 18px 0; }
.ofs-muted      { color: var(--ofs-muted); }
.ofs-pdf-link   { font-size: 20px; text-decoration: none; }
.ofs-logo-preview { margin-bottom: 8px; }
.ofs-reclameer-block summary { cursor: pointer; }
.ofs-reclameer-block[open] summary { margin-bottom: 10px; }

/* ── Login / register wrap ──────────────────────────────────── */
.ofs-login-wrap    { max-width: 480px; }
.ofs-register-wrap { max-width: 760px; }