.rekodoc{ --rk-accent:#0b5fad; }
.rekodoc__toolbar{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; width:100%; margin-bottom:1rem; }
.rekodoc__search{ flex:1 1 520px; height:44px; min-width:260px; }
.rk-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 14px;border-radius:10px;border:1px solid #d1d5db;background:#fff;color:#111827;cursor:pointer}
.rk-btn--primary{background:#0b5fad;color:#fff;border-color:#0b5fad}
.rk-btn--ghost{background:#fff;color:#374151}
.rekodoc__filters{ display:flex; gap:.4rem; flex-wrap:wrap; margin:.25rem 0 1rem; }
.rk-filter{ height:30px; padding:0 .6rem; border-radius:999px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }
.rk-filter.is-active{ background:var(--rk-accent); color:#fff; border-color:transparent; }

/* View toggle */
.rekodoc__view{ margin-left:auto; display:flex; gap:6px; }
.rk-toggle{ height:34px; padding:0 .8rem; border-radius:999px; border:1px solid #d1d5db; background:#fff; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.rk-toggle .rk-toggle__icon{ width:18px; height:18px; display:block; }
.rk-toggle.is-active{ background:var(--rk-accent); color:#fff; border-color:transparent; }
.rk-toggle.is-active .rk-toggle__icon{ filter:brightness(0) invert(1); }

/* Cards */
.rk-card{ border:1px solid #e5e7eb; border-radius:14px; padding:12px; position:relative; }
.rk-card__head{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.rk-card__title{ font-size:1.1rem; margin:0; }
.rk-actions{ display:flex; gap:.4rem; }
.rk-ico{ width:40px; height:40px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; border:2px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.rk-ico--edit{ background:#0b5fad; color:#fff; }
.rk-ico--delete{ background:#b91c1c; color:#fff; }
.rk-chip{ display:inline-flex; align-items:center; height:24px; padding:0 .6rem; border-radius:999px; background:#eef2ff; color:#1f2937; font-size:.85rem; }
.rk-card__meta{ margin:.4rem 0 .6rem; }
.rk-card__actions .rk-btn{ height:36px; }

.rekodoc__list{ display:grid; grid-template-columns:repeat(1, minmax(0,1fr)); gap:16px; }
@media (min-width: 900px){ .rekodoc__list{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width: 1200px){ .rekodoc__list{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* Table */
.rekodoc__tablewrap{ display:none; }
.rekodoc[data-view="table"] .rekodoc__tablewrap{ display:block; }
.rekodoc[data-view="table"] .rekodoc__list{ display:none; }
.rekodoc__table{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.rekodoc__table thead th{ text-align:left; font-weight:600; color:#111827; padding:6px 8px; }
.rekodoc__table tbody td{ background:#fff; border:1px solid #e5e7eb; padding:10px 12px; }
.rekodoc__table tbody tr td:first-child{ border-top-left-radius:10px; border-bottom-left-radius:10px; }
.rekodoc__table tbody tr td:last-child{ border-top-right-radius:10px; border-bottom-right-radius:10px; }
.rk-col-actions{ width:120px; }

/* Modal */
.rk-modal{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.35); z-index:9999; }
.rk-modal[hidden]{ display:none; }
.rk-modal__dialog{ background:#fff; border-radius:14px; max-width:720px; width:95vw; max-height:92vh; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.rk-modal__title{ margin:0; padding:14px 16px 0; font-size:20px; }
.rk-modal__body{ padding:12px 16px; overflow:auto; }
.rk-modal__actions{ display:flex; gap:.5rem; justify-content:flex-end; padding:10px 16px 16px; }
.rk-modal__close{ position:absolute; right:12px; top:12px; width:32px; height:32px; border-radius:999px; background:#0b5fad; color:#fff; border:none; cursor:pointer; }
.rk-field{ display:flex; flex-direction:column; gap:.35rem; margin:0 0 .75rem; }
.rk-field input, .rk-field textarea, .rk-field select{ width:100%; border:1px solid #d1d5db; border-radius:10px; padding:.6rem .7rem; }
.rk-field textarea{ min-height:120px; resize:vertical; }
.rk-inline{ display:flex; gap:.6rem; align-items:center; }
.rk-preview{ font-size:.9rem; color:#374151; }

/* === Scoped resilience (markup-based) === */
.rk-scope .rk-ico, .rk-scope .rk-ico *, .rk-scope .rk-toggle, .rk-scope .rk-toggle *, .rk-scope .rk-svg{ all: revert; }
.rk-scope .rk-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.rk-scope .rk-ico__inner{ display:block; line-height:0; }
.rk-scope .rk-svg{ width:18px; height:18px; display:block; stroke:#fff; fill:none; }
.rk-scope .rk-ico{ background-image: var(--rk-icon); background-repeat:no-repeat; background-position:center; background-size:18px 18px; }

/* Fallback pseudo icons */
.rk-ico::before{ content:""; width:18px; height:18px; display:block; background-repeat:no-repeat; background-position:center; background-size:contain; }
.rk-ico.rk-ico--edit::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/></svg>"); }
.rk-ico.rk-ico--delete::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/></svg>"); }

/* Focus & hover */
.rk-ico:hover{ filter:brightness(1.05); }
.rk-ico:focus-visible{ outline:3px solid rgba(14,165,233,.6); outline-offset:2px; }


/* =========================
   v1.3.0 Unified UI (Kalender/FAQ)
   ========================= */

.rekodoc{ --rk-accent:#0b5fad; --rk-danger:#b91c1c; --rk-text:#0f172a; --rk-muted:#4b5563; }
.rk-scope *{ box-sizing:border-box; }

/* Toolbar */
.rekodoc__toolbar{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin:0 0 1rem; }
.rekodoc__search{ flex:1 1 640px; height:48px; border-radius:12px; border:1px solid #d1d5db; padding:0 14px; font-size:16px; background:#f9fafb; }
.rk-btn{ height:44px; padding:0 16px; border-radius:12px; border:1px solid #d1d5db; background:#fff; color:var(--rk-text); font-weight:600; }
.rk-btn--primary{ background:var(--rk-accent); color:#fff; border-color:var(--rk-accent); }
.rk-btn--ghost{ background:#fff; color:var(--rk-text); border-color:#d1d5db; }

/* View toggle as segmented control */
.rekodoc__view{ display:flex; align-items:center; gap:6px; background:#f3f4f6; padding:4px; border-radius:999px; border:1px solid #e5e7eb; }
.rk-toggle{ height:34px; padding:0 .8rem; border-radius:999px; border:0; background:transparent; display:inline-flex; align-items:center; gap:8px; color:#111827; }
.rk-toggle .rk-toggle__icon{ width:18px; height:18px; display:block; filter:none; }
.rk-toggle.is-active{ background:#fff; color:#111827; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.rk-toggle.is-active .rk-toggle__icon{ filter:none; }
@media (max-width:520px){ .rk-toggle .rk-toggle__label{ display:none; } }

/* Filter pills */
.rekodoc__filters{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.25rem 0 1.25rem; }
.rk-filter{ height:36px; padding:0 .9rem; border-radius:999px; border:1px solid #d1d5db; background:#fff; color:#111827; font-weight:600; }
.rk-filter.is-active{ background:var(--rk-accent); color:#fff; border-color:transparent; }

/* Cards */
.rk-card{ position:relative; border:1px solid #e5e7eb; border-radius:16px; padding:16px 16px 18px; background:#fff; }
.rk-card__head{ display:block; }
.rk-card__title{ margin:0 0 .6rem; font-size: clamp(18px, 1.8vw, 22px); font-weight:800; color:var(--rk-text); }
.rk-card__meta{ margin:0 0 .9rem; }
.rk-chip{ height:28px; padding:0 .8rem; border-radius:999px; background:#eef2ff; color:#0f172a; border:1px solid #e5e7eb; font-weight:600; }
.rk-card__actions .rk-btn{ height:40px; padding:0 14px; border-radius:12px; }

/* Floating icon action buttons (match Kalender/FAQ) */
.rk-actions{ position:absolute; right:12px; top:12px; display:flex; gap:10px; }
.rk-ico{ width:44px; height:44px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; border:2px solid #fff; box-shadow:0 10px 24px rgba(0,0,0,.24); }
.rk-ico--edit{ background:var(--rk-accent); color:#fff; }
.rk-ico--delete{ background:var(--rk-danger); color:#fff; }
.rk-ico .rk-svg{ width:20px; height:20px; display:block; stroke:#fff; }

/* Grid layout spacing */
.rekodoc__list{ display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:20px; }
@media (min-width: 900px){ .rekodoc__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width: 1200px){ .rekodoc__list{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* Table look (clean, rounded rows) */
.rekodoc__tablewrap{ display:none; }
.rekodoc[data-view="table"] .rekodoc__tablewrap{ display:block; }
.rekodoc[data-view="table"] .rekodoc__list{ display:none; }
.rekodoc__table{ width:100%; border-collapse:separate; border-spacing:0 10px; }
.rekodoc__table thead th{ text-align:left; font-weight:800; color:#0f172a; padding:6px 8px; font-size:14px; }
.rekodoc__table tbody td{ background:#fff; border:1px solid #e5e7eb; padding:12px 14px; vertical-align:middle; }
.rekodoc__table tbody tr td:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px; }
.rekodoc__table tbody tr td:last-child{ border-top-right-radius:12px; border-bottom-right-radius:12px; }
.rk-col-actions{ width:130px; }

/* Modal (same style as kalender/faq) */
.rk-modal__dialog{ border-radius:16px; }
.rk-modal__close{ width:36px; height:36px; border-radius:999px; background:var(--rk-accent); color:#fff; border:none; }

/* Hard override to kill theme borders that paint black squares on icons */
.rk-scope .rk-ico{ border:2px solid #fff !important; background-clip:padding-box; }
.rk-scope .rk-ico, .rk-scope .rk-ico *{ border-color:transparent !important; }


/* === v1.4.0 calendar-like cards with media header === */
.rekodoc__view{ display:none; } /* hide toggle */
.rk-card{ border:0; padding:0; background:transparent; }
.rk-card__media{ position:relative; margin:0 0 .8rem; }
.rk-card__img{ width:100%; height:auto; display:block; border-radius:16px; }
.rk-card__img--placeholder{ width:100%; height:180px; background:#f3f4f6; border-radius:16px; }
.rk-actions--media{ position:absolute; right:12px; top:12px; display:flex; gap:10px; }
.rk-ico{ width:40px; height:40px; border-radius:999px; border:2px solid #fff; box-shadow:0 8px 18px rgba(0,0,0,.22); }
.rk-ico--edit{ background:#0b5fad; }
.rk-ico--delete{ background:#b91c1c; }
.rk-card__title{ font-size: clamp(20px, 1.9vw, 24px); font-weight:800; color:#0f172a; margin:0 0 .35rem; }
.rk-card__meta{ display:flex; gap:10px; align-items:center; margin:0 0 .45rem; }
.rk-chip{ height:28px; padding:0 .8rem; border-radius:999px; background:#eef2ff; border:1px solid #e5e7eb; color:#0f172a; font-weight:600; }
.rk-card__actions{ display:flex; gap:.6rem; }
.rk-card__actions .rk-btn{ height:40px; padding:0 16px; border-radius:10px; font-weight:700; }
.rk-card__actions .rk-btn:first-child{ background:#0b5fad; color:#fff; border-color:#0b5fad; }
.rk-card__actions .rk-btn + .rk-btn{ background:#fff; color:#0f172a; border-color:#e5e7eb; }
.rekodoc__list{ gap:28px; }


/* === v1.4.0 calendar-like cards with media header === */
.rekodoc__view{ display:none; } /* hide toggle */
.rk-card{ border:0; padding:0; background:transparent; }
.rk-card__media{ position:relative; margin:0 0 .8rem; }
.rk-card__img{ width:100%; height:auto; display:block; border-radius:16px; }
.rk-card__img--placeholder{ width:100%; height:180px; background:#f3f4f6; border-radius:16px; }
.rk-actions--media{ position:absolute; right:12px; top:12px; display:flex; gap:10px; }
.rk-ico{ width:40px; height:40px; border-radius:999px; border:2px solid #fff; box-shadow:0 8px 18px rgba(0,0,0,.22); }
.rk-ico--edit{ background:#0b5fad; }
.rk-ico--delete{ background:#b91c1c; }
.rk-card__title{ font-size: clamp(20px, 1.9vw, 24px); font-weight:800; color:#0f172a; margin:0 0 .35rem; }
.rk-card__meta{ display:flex; gap:10px; align-items:center; margin:0 0 .45rem; }
.rk-chip{ height:28px; padding:0 .8rem; border-radius:999px; background:#eef2ff; border:1px solid #e5e7eb; color:#0f172a; font-weight:600; }
.rk-card__actions{ display:flex; gap:.6rem; }
.rk-card__actions .rk-btn{ height:40px; padding:0 16px; border-radius:10px; font-weight:700; }
.rk-card__actions .rk-btn:first-child{ background:#0b5fad; color:#fff; border-color:#0b5fad; }
.rk-card__actions .rk-btn + .rk-btn{ background:#fff; color:#0f172a; border-color:#e5e7eb; }
.rekodoc__list{ gap:28px; }


/* v1.4.2 harden icon buttons */
.rk-ico{ overflow:hidden; font-size:0; line-height:0; }
.rk-ico .rk-ico__inner{ font-size:0; line-height:0; }


/* v1.4.3 — hardened action icons */
.rk-actions--media{ font-size:0; line-height:0; }
.rk-actions--media *{ font-size:initial; line-height:initial; }
.rk-ico{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:2px solid #fff; background-clip:padding-box;
  background:none; padding:0; margin:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:999px;
  box-shadow:0 8px 18px rgba(0,0,0,.22); position:relative; z-index:2;
  overflow:hidden;
}
.rk-ico--edit{ background:#0b5fad; color:#fff; }
.rk-ico--delete{ background:#b91c1c; color:#fff; }
.rk-ico .rk-iconimg{ width:18px; height:18px; display:block; }