/* =============================================================================
   kof-components.css — Reusable BEM components.
   v2.0.0
   ----------------------------------------------------------------------------
   Components in this file:
     .kof-btn          Buttons (variants + sizes)
     .kof-panel        Card/panel container with header
     .kof-stat-card    Dashboard KPI card
     .kof-status       Status pill (project lifecycle states)
     .kof-doc-badge    Offerte/Factuur type badge
     .kof-table        Compact data table
     .kof-field        Form field (label + input)
     .kof-input        Standalone input/select/textarea baseline
     .kof-filters      Filter bar above tables
     .kof-sheet        Modal / right-sheet
     .kof-empty        Empty state inside panels
     .kof-skeleton     Loading skeleton bar
   ============================================================================= */

/* =============================================================================
   Button — .kof-btn
   ============================================================================= */
.kof-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kof-space-2);
    padding: var(--kof-space-2) var(--kof-space-7);          /* 4 14 — Notion-stijl */
    min-height: 2.25rem;                                     /* 36px */
    font-family: inherit;
    font-size: var(--kof-font-size-base);
    font-weight: var(--kof-font-weight-medium);
    line-height: 1.25;
    border-radius: var(--kof-radius-md);
    border: 0.5px solid transparent;
    background: transparent;
    color: var(--kof-color-ink);
    cursor: pointer;
    transition: background var(--kof-transition), border-color var(--kof-transition), color var(--kof-transition);
    white-space: nowrap;
    user-select: none;
}
.kof-btn:disabled,
.kof-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.kof-btn__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: inline-flex;
}
.kof-btn__icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 2;
}

/* Variants */
.kof-btn--primary {
    background: var(--kof-color-brand);
    color: #fff;
    border-color: var(--kof-color-brand);
}
.kof-btn--primary:hover {
    background: var(--kof-color-brand-hover);
    border-color: var(--kof-color-brand-hover);
}

.kof-btn--ink {
    background: var(--kof-color-ink);
    color: #fff;
    border-color: var(--kof-color-ink);
}
.kof-btn--ink:hover {
    background: #000;
}

.kof-btn--ghost {
    background: transparent;
    color: var(--kof-color-text);
    border-color: var(--kof-color-border);
}
.kof-btn--ghost:hover {
    background: var(--kof-color-surface-sub);
    border-color: var(--kof-color-border-strong);
}

.kof-btn--subtle {
    background: var(--kof-color-surface-sub);
    color: var(--kof-color-text);
}
.kof-btn--subtle:hover {
    background: var(--kof-color-border);
}

.kof-btn--danger {
    background: var(--kof-color-danger);
    color: #fff;
    border-color: var(--kof-color-danger);
}
.kof-btn--danger:hover {
    background: #B91C1C;
}

/* Sizes */
.kof-btn--sm {
    min-height: 1.75rem;        /* 28 */
    padding: var(--kof-space-1) var(--kof-space-5);
    font-size: var(--kof-font-size-sm);
}
.kof-btn--lg {
    min-height: 2.5rem;         /* 40 */
    padding: var(--kof-space-3) var(--kof-space-8);
    font-size: var(--kof-font-size-h3);
}
.kof-btn--icon {
    width: 2.25rem;
    padding: 0;
}
.kof-btn--block {
    width: 100%;
}

/* =============================================================================
   Panel — .kof-panel
   ============================================================================= */
.kof-panel {
    background: var(--kof-color-surface);
    border: var(--kof-border-hair);
    border-radius: var(--kof-radius-md);
    overflow: hidden;
}

.kof-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kof-space-6);
    padding: var(--kof-space-6) var(--kof-space-8);
    border-bottom: var(--kof-border-hair);
}

.kof-panel__title {
    display: flex;
    align-items: center;
    gap: var(--kof-space-3);
    font-size: var(--kof-font-size-h3);      /* 16px — per spec */
    font-weight: var(--kof-font-weight-semi);
    color: var(--kof-color-ink);
    line-height: var(--kof-line-tight);
    letter-spacing: var(--kof-letter-tight);
}

.kof-panel__title-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    color: var(--kof-color-text-muted);
}
.kof-panel__title-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.75;
}

.kof-panel__action {
    display: inline-flex;
    align-items: center;
    gap: var(--kof-space-2);
    font-size: var(--kof-font-size-sm);
    color: var(--kof-color-text-muted);
    transition: color var(--kof-transition);
}
.kof-panel__action:hover {
    color: var(--kof-color-ink);
}
.kof-panel__action svg {
    width: 12px;
    height: 12px;
}

.kof-panel__body {
    padding: var(--kof-space-6) var(--kof-space-8);
}
.kof-panel__body--flush {
    padding: 0;
}

.kof-panel__empty {
    padding: var(--kof-space-12) var(--kof-space-8);
    text-align: center;
    color: var(--kof-color-text-muted);
    font-size: var(--kof-font-size-sm);
}

.kof-panel--compact .kof-panel__header {
    padding: var(--kof-space-4) var(--kof-space-6);
}
.kof-panel--compact .kof-panel__body {
    padding: var(--kof-space-4) var(--kof-space-6);
}

/* =============================================================================
   Stat card — .kof-stat-card
   ============================================================================= */
.kof-stat-card {
    position: relative;
    background: var(--kof-color-surface);
    border: var(--kof-border-hair);
    border-radius: var(--kof-radius-md);
    padding: var(--kof-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--kof-space-7);
    transition: border-color var(--kof-transition);
}
.kof-stat-card:hover {
    border-color: var(--kof-color-border-strong);
}

.kof-stat-card__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--kof-radius-md);
    background: var(--kof-color-surface-sub);
    border: var(--kof-border-hair);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kof-color-text-muted);
    flex-shrink: 0;
}
.kof-stat-card__icon svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.75;
}

.kof-stat-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--kof-space-1);
    margin-top: auto;
}

.kof-stat-card__label {
    font-size: var(--kof-font-size-sm);
    font-weight: var(--kof-font-weight-medium);
    color: var(--kof-color-text-muted);
    letter-spacing: 0;
    text-transform: none;
}

.kof-stat-card__value {
    font-size: var(--kof-font-size-h1);       /* 24px max — per spec */
    font-weight: var(--kof-font-weight-semi);
    color: var(--kof-color-ink);
    letter-spacing: var(--kof-letter-tight);
    font-variant-numeric: tabular-nums;
    line-height: var(--kof-line-tight);
}

.kof-stat-card__sub {
    margin-top: var(--kof-space-1);
    font-size: var(--kof-font-size-xs);
    color: var(--kof-color-text-muted);
}

/* =============================================================================
   Status pill — .kof-status (project lifecycle)
   ============================================================================= */
.kof-status {
    display: inline-flex;
    align-items: center;
    gap: var(--kof-space-2);
    padding: 2px var(--kof-space-3);
    border-radius: var(--kof-radius-full);
    font-size: var(--kof-font-size-xs);
    font-weight: var(--kof-font-weight-medium);
    background: var(--kof-color-surface-sub);
    color: var(--kof-color-text);
    line-height: 1.4;
    white-space: nowrap;
}
.kof-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--kof-radius-full);
    background: currentColor;
    opacity: 0.7;
}
.kof-status--lead          { background: var(--kof-status-lead-bg);          color: var(--kof-status-lead-fg); }
.kof-status--offerte       { background: var(--kof-status-offerte-bg);       color: var(--kof-status-offerte-fg); }
.kof-status--geaccepteerd  { background: var(--kof-status-geaccepteerd-bg);  color: var(--kof-status-geaccepteerd-fg); }
.kof-status--ingepland     { background: var(--kof-status-ingepland-bg);     color: var(--kof-status-ingepland-fg); }
.kof-status--uitgevoerd    { background: var(--kof-status-uitgevoerd-bg);    color: var(--kof-status-uitgevoerd-fg); }
.kof-status--gefactureerd  { background: var(--kof-status-gefactureerd-bg);  color: var(--kof-status-gefactureerd-fg); }
.kof-status--afgerond      { background: var(--kof-status-afgerond-bg);      color: var(--kof-status-afgerond-fg); }

/* =============================================================================
   Document badge — .kof-doc-badge (Offerte / Factuur)
   ============================================================================= */
.kof-doc-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--kof-space-3);
    border-radius: var(--kof-radius-sm);
    font-size: var(--kof-font-size-xs);
    font-weight: var(--kof-font-weight-semi);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.4;
    border: var(--kof-border-hair);
}
.kof-doc-badge--offerte {
    background: var(--kof-color-surface);
    color: var(--kof-color-text);
    border-color: var(--kof-color-border);
}
.kof-doc-badge--factuur {
    background: var(--kof-color-brand-soft);
    color: var(--kof-color-brand);
    border-color: transparent;
}

/* =============================================================================
   Table — .kof-table (compact data grid)
   ============================================================================= */
.kof-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--kof-font-size-base);
}
.kof-table thead,
.kof-table__head {
    background: var(--kof-color-surface-alt);
}
.kof-table thead th,
.kof-table__head .kof-table__cell {
    font-size: var(--kof-font-size-xs);
    font-weight: var(--kof-font-weight-medium);
    color: var(--kof-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--kof-space-3) var(--kof-space-6);
    text-align: left;
    border-bottom: var(--kof-border-hair);
}
.kof-table tbody tr,
.kof-table__row {
    transition: background var(--kof-transition);
}
.kof-table tbody tr:hover,
.kof-table__row:hover {
    background: var(--kof-color-surface-alt);
}
.kof-table__row--clickable {
    cursor: pointer;
}
.kof-table tbody td,
.kof-table__cell {
    padding: var(--kof-space-4) var(--kof-space-6);
    border-bottom: var(--kof-border-hair);
    color: var(--kof-color-text);
    vertical-align: middle;
}
.kof-table__cell--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.kof-table__cell--actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}
.kof-table tbody tr:last-child td,
.kof-table__body .kof-table__row:last-child .kof-table__cell {
    border-bottom: 0;
}

/* =============================================================================
   Form field — .kof-field
   ============================================================================= */
.kof-field {
    display: flex;
    flex-direction: column;
    gap: var(--kof-space-2);
}
.kof-field__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: var(--kof-font-size-sm);
    font-weight: var(--kof-font-weight-medium);
    color: var(--kof-color-text);
}
.kof-field__hint {
    font-size: var(--kof-font-size-xs);
    color: var(--kof-color-text-muted);
    font-weight: var(--kof-font-weight-regular);
}
.kof-field__error {
    font-size: var(--kof-font-size-xs);
    color: var(--kof-color-danger);
    margin-top: var(--kof-space-1);
}
.kof-field--required .kof-field__label::after {
    content: ' *';
    color: var(--kof-color-danger);
}

/* Inputs — standalone class so they work outside .kof-field too. */
.kof-input,
.kof-select,
.kof-textarea {
    width: 100%;
    padding: var(--kof-space-3) var(--kof-space-4);
    font-family: inherit;
    font-size: var(--kof-font-size-base);
    line-height: var(--kof-line-snug);
    color: var(--kof-color-ink);
    background: var(--kof-color-surface);
    border: 0.5px solid var(--kof-color-border);
    border-radius: var(--kof-radius-md);
    transition: border-color var(--kof-transition), box-shadow var(--kof-transition);
}
.kof-input:focus,
.kof-select:focus,
.kof-textarea:focus {
    outline: 0;
    border-color: var(--kof-color-brand);
    box-shadow: 0 0 0 3px var(--kof-color-brand-soft);
}
.kof-input:disabled,
.kof-select:disabled,
.kof-textarea:disabled {
    background: var(--kof-color-surface-sub);
    color: var(--kof-color-text-muted);
    cursor: not-allowed;
}
.kof-textarea {
    resize: vertical;
    min-height: 5rem;
}
.kof-input--invalid,
.kof-select--invalid,
.kof-textarea--invalid {
    border-color: var(--kof-color-danger);
}

/* =============================================================================
   Filter bar — .kof-filters
   ============================================================================= */
.kof-filters {
    display: flex;
    align-items: center;
    gap: var(--kof-space-3);
    flex-wrap: wrap;
    padding: var(--kof-space-4) var(--kof-space-6);
    background: var(--kof-color-surface);
    border: var(--kof-border-hair);
    border-radius: var(--kof-radius-md);
}
.kof-filters__search {
    flex: 1 1 14rem;
    min-width: 12rem;
}
.kof-filters__group {
    display: flex;
    gap: var(--kof-space-2);
}
.kof-filters__select {
    min-width: 9rem;
}

/* =============================================================================
   Sheet — .kof-sheet (modal / right drawer)
   ============================================================================= */
.kof-sheet__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: var(--kof-z-modal-bg);
    animation: kof-fade-in 0.15s ease-out;
}
.kof-sheet__panel {
    position: fixed;
    background: var(--kof-color-surface);
    z-index: var(--kof-z-modal);
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,0.08);
}
.kof-sheet--center .kof-sheet__panel {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 92vw);
    max-height: 86vh;
    border-radius: var(--kof-radius-lg);
}
.kof-sheet--right .kof-sheet__panel {
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 92vw);
}
.kof-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--kof-space-6) var(--kof-space-8);
    border-bottom: var(--kof-border-hair);
}
.kof-sheet__title {
    font-size: var(--kof-font-size-h2);    /* 18px — per spec */
    font-weight: var(--kof-font-weight-semi);
    color: var(--kof-color-ink);
}
.kof-sheet__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--kof-space-6) var(--kof-space-8);
}
.kof-sheet__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--kof-space-3);
    padding: var(--kof-space-6) var(--kof-space-8);
    border-top: var(--kof-border-hair);
}

@keyframes kof-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =============================================================================
   Empty state / Skeleton loader
   ============================================================================= */
.kof-empty {
    padding: var(--kof-space-16) var(--kof-space-8);
    text-align: center;
    color: var(--kof-color-text-muted);
}
.kof-empty__icon {
    width: 32px;
    height: 32px;
    margin: 0 auto var(--kof-space-4);
    color: var(--kof-color-text-soft);
}
.kof-empty__title {
    font-size: var(--kof-font-size-h3);
    font-weight: var(--kof-font-weight-semi);
    color: var(--kof-color-ink);
    margin-bottom: var(--kof-space-2);
}
.kof-empty__sub {
    font-size: var(--kof-font-size-sm);
    color: var(--kof-color-text-muted);
}

.kof-skeleton {
    background: linear-gradient(90deg,
        var(--kof-color-surface-sub) 25%,
        var(--kof-color-border) 50%,
        var(--kof-color-surface-sub) 75%);
    background-size: 200% 100%;
    border-radius: var(--kof-radius-sm);
    animation: kof-skel 1.4s infinite linear;
}
@keyframes kof-skel {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}