/* ============================================================
   CutiNikah Panel — Stylesheet utama backoffice
   ============================================================ */

/* ============================================================
   1. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--cn-font-body);
  background: var(--cn-cream-100);
  color: var(--cn-dark);
  font-size: 0.9375rem;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--cn-font-body); }

a { color: var(--cn-rust); }
a:hover { color: var(--cn-rust-dark); }

/* Override Bootstrap primary color */
.btn-primary, .bg-primary { background-color: var(--cn-rust) !important; border-color: var(--cn-rust) !important; }
.btn-primary:hover { background-color: var(--cn-rust-dark) !important; border-color: var(--cn-rust-dark) !important; }
.text-primary { color: var(--cn-rust) !important; }
.border-primary { border-color: var(--cn-rust) !important; }

/* ============================================================
   2. SIDEBAR
   ============================================================ */
.cn-sidebar {
  width: var(--cn-sidebar-width);
  background: var(--cn-dark);
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 1040;
  transition: transform var(--cn-dur-slow) var(--cn-ease);
}

/* Logo */
.cn-sidebar-logo {
  padding: var(--cn-space-6);
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.cn-sidebar-logo-text {
  font-family: var(--cn-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cn-cream-100);
  letter-spacing: -0.02em;
  text-decoration: none;
  display: block;
}
.cn-sidebar-logo-text:hover { color: var(--cn-cream-100); text-decoration: none; }
.cn-sidebar-logo-text span { color: var(--cn-gold-light); }
.cn-sidebar-logo-sub {
  font-size: 0.65rem;
  color: var(--cn-cream-600);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 2px;
  font-weight: 500;
}

/* Nav */
.cn-sidebar-nav {
  flex: 1;
  padding: var(--cn-space-3) 0;
  overflow-y: auto;
}

.cn-nav-group-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cn-cream-700);
  padding: var(--cn-space-4) var(--cn-space-6) var(--cn-space-2);
  margin-top: var(--cn-space-2);
}

.cn-nav-item {
  display: flex;
  align-items: center;
  gap: var(--cn-space-3);
  padding: var(--cn-space-2) var(--cn-space-6);
  font-size: 0.875rem;
  color: var(--cn-cream-500);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all var(--cn-dur-fast) var(--cn-ease);
  cursor: pointer;
  position: relative;
}
.cn-nav-item:hover {
  color: var(--cn-cream-100);
  background: rgba(255,255,255,.05);
  text-decoration: none;
}
.cn-nav-item.active {
  color: var(--cn-cream-100);
  background: rgba(184,92,56,.15);
  border-left-color: var(--cn-rust);
  font-weight: 500;
}
.cn-nav-item .cn-nav-icon {
  width: 16px;
  text-align: center;
  font-size: 0.8rem;
  flex-shrink: 0;
  opacity: 0.7;
}
.cn-nav-item.active .cn-nav-icon { opacity: 1; }

/* Submenu */
.cn-nav-submenu { padding-left: 0; }
.cn-nav-submenu .cn-nav-item {
  padding-left: calc(var(--cn-space-6) + 16px + var(--cn-space-3));
  font-size: 0.8125rem;
}

/* Badge di nav item */
.cn-nav-badge {
  margin-left: auto;
  background: var(--cn-rust);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--cn-radius-full);
  line-height: 1.6;
}

/* Sidebar footer — user info */
.cn-sidebar-footer {
  padding: var(--cn-space-4) var(--cn-space-6);
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.cn-sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--cn-space-3);
}
.cn-sidebar-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cn-rust-subtle);
  color: var(--cn-rust);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
}
.cn-sidebar-user-name { font-size: 0.8125rem; font-weight: 600; color: var(--cn-cream-200); line-height: 1.2; }
.cn-sidebar-user-role { font-size: 0.7rem; color: var(--cn-cream-600); }
.cn-sidebar-logout {
  margin-left: auto;
  width: 28px; height: 28px;
  border-radius: var(--cn-radius-md);
  border: none; background: transparent;
  color: var(--cn-cream-600); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  transition: all var(--cn-dur-fast);
}
.cn-sidebar-logout:hover { background: var(--cn-error-bg); color: var(--cn-error); }

/* Mobile sidebar overlay */
.cn-sidebar-overlay {
  position: fixed; inset: 0;
  background: rgba(26,14,6,.45);
  z-index: 1039;
  opacity: 0; pointer-events: none;
  transition: opacity var(--cn-dur-slow) var(--cn-ease);
}
.cn-sidebar-overlay.show { opacity: 1; pointer-events: all; }

/* ============================================================
   3. TOPBAR
   ============================================================ */
.cn-topbar {
  height: var(--cn-topbar-height);
  background: white;
  border-bottom: 1px solid var(--cn-cream-300);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--cn-space-8);
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: var(--cn-shadow-xs);
}
.cn-topbar-left { display: flex; align-items: center; gap: var(--cn-space-4); }
.cn-topbar-title { font-weight: 600; font-size: 1rem; color: var(--cn-dark); }
.cn-topbar-right { display: flex; align-items: center; gap: var(--cn-space-2); }

/* Breadcrumb di topbar */
.cn-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--cn-space-2);
  font-size: 0.8rem;
  color: var(--cn-cream-600);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cn-breadcrumb-item a { color: var(--cn-cream-600); text-decoration: none; }
.cn-breadcrumb-item a:hover { color: var(--cn-rust); }
.cn-breadcrumb-item.active { color: var(--cn-dark); font-weight: 500; }
.cn-breadcrumb-sep { color: var(--cn-cream-400); font-size: 0.7rem; }

/* Topbar action buttons */
.cn-topbar-btn {
  width: 34px; height: 34px;
  border-radius: var(--cn-radius-md);
  border: none; background: transparent;
  color: var(--cn-cream-600); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; position: relative;
  transition: all var(--cn-dur-fast);
}
.cn-topbar-btn:hover { background: var(--cn-cream-100); color: var(--cn-dark); }
.cn-topbar-notif-dot {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px;
  background: var(--cn-rust); border-radius: 50%;
  border: 2px solid white;
}

/* ============================================================
   4. PAGE WRAPPER
   ============================================================ */
.cn-wrapper {
  margin-left: var(--cn-sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.cn-content {
  flex: 1;
  padding: var(--cn-space-8);
  max-width: 100%;
}

/* Page header (judul halaman + aksi) */
.cn-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--cn-space-8);
  gap: var(--cn-space-4);
}
.cn-page-header > *:only-child { flex: 1; }
.cn-page-title,
.cn-page-header h1 {
  font-family: var(--cn-font-display);
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--cn-dark);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
.cn-page-subtitle {
  font-size: 0.875rem;
  color: var(--cn-cream-600);
  margin-top: var(--cn-space-1);
}

/* ============================================================
   5. CARD
   ============================================================ */
.cn-card {
  background: white;
  border-radius: var(--cn-radius-xl);
  border: 1px solid var(--cn-cream-300);
  box-shadow: var(--cn-shadow-xs);
  overflow: hidden;
}
.cn-card-header {
  padding: var(--cn-space-5) var(--cn-space-6);
  border-bottom: 1px solid var(--cn-cream-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-4);
  background: transparent;
}
.cn-card-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--cn-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--cn-space-2);
}
.cn-card-title i { color: var(--cn-rust); font-size: 0.875rem; }
.cn-card-body { padding: var(--cn-space-6); }
.cn-card-footer {
  padding: var(--cn-space-4) var(--cn-space-6);
  border-top: 1px solid var(--cn-cream-200);
  background: var(--cn-cream-50);
}

/* Form card — header dengan accent strip rust */
.cn-card.cn-card-form > .cn-card-header { border-top: 3px solid var(--cn-rust); }

/* ============================================================
   6. STAT CARD
   ============================================================ */
.cn-stat-card {
  background: white;
  border-radius: var(--cn-radius-xl);
  border: 1px solid var(--cn-cream-300);
  padding: var(--cn-space-5) var(--cn-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--cn-space-3);
  transition: box-shadow var(--cn-dur-normal) var(--cn-ease);
}
.cn-stat-card:hover { box-shadow: var(--cn-shadow-md); }
.cn-stat-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.cn-stat-icon {
  width: 40px; height: 40px;
  border-radius: var(--cn-radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.cn-stat-icon-rust { background: var(--cn-rust-subtle); color: var(--cn-rust); }
.cn-stat-icon-gold { background: var(--cn-gold-subtle); color: var(--cn-gold-dark); }
.cn-stat-icon-success { background: var(--cn-success-bg); color: var(--cn-success); }
.cn-stat-icon-info { background: var(--cn-info-bg); color: var(--cn-info); }
.cn-stat-icon-error { background: var(--cn-error-bg); color: var(--cn-error); }
.cn-stat-value {
  font-family: var(--cn-font-display);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--cn-dark);
  line-height: 1;
}
.cn-stat-label { font-size: 0.8rem; color: var(--cn-cream-600); }
.cn-stat-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 600;
  padding: 2px 8px; border-radius: var(--cn-radius-full);
}
.cn-stat-trend-up { background: var(--cn-success-bg); color: var(--cn-success); }
.cn-stat-trend-down { background: var(--cn-error-bg); color: var(--cn-error); }

/* ============================================================
   7. BUTTON
   ============================================================ */
.cn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--cn-space-2);
  font-family: var(--cn-font-body); font-weight: 500;
  border: none; cursor: pointer;
  transition: all var(--cn-dur-fast) var(--cn-ease);
  text-decoration: none; white-space: nowrap;
  /* default = ukuran md, dioverride .cn-btn-sm / .cn-btn-lg */
  height: 40px; padding: 0 var(--cn-space-6); font-size: 0.875rem;
  border-radius: var(--cn-radius-lg);
}
.cn-btn:hover { text-decoration: none; }
.cn-btn:active { transform: scale(0.97); }

.cn-btn-sm  { height: 32px; padding: 0 var(--cn-space-4); font-size: 0.8rem;    border-radius: var(--cn-radius-md); }
.cn-btn-md  { height: 40px; padding: 0 var(--cn-space-6); font-size: 0.875rem;  border-radius: var(--cn-radius-lg); }
.cn-btn-lg  { height: 44px; padding: 0 var(--cn-space-8); font-size: 0.9375rem; border-radius: var(--cn-radius-xl); }

.cn-btn-primary   { background: var(--cn-rust);       color: white; box-shadow: 0 2px 6px rgba(184,92,56,.25); }
.cn-btn-primary:hover { background: var(--cn-rust-dark); color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(184,92,56,.30); }

.cn-btn-secondary { background: var(--cn-cream-200);  color: var(--cn-dark); }
.cn-btn-secondary:hover { background: var(--cn-cream-300); color: var(--cn-dark); }

.cn-btn-outline   { background: transparent; color: var(--cn-rust); border: 1.5px solid var(--cn-rust); }
.cn-btn-outline:hover { background: var(--cn-rust-subtle); color: var(--cn-rust-dark); }

.cn-btn-outline-danger { background: transparent; color: var(--cn-error); border: 1.5px solid rgba(192,57,43,.5); }
.cn-btn-outline-danger:hover { background: var(--cn-error-bg); color: var(--cn-error); border-color: var(--cn-error); }

.cn-btn-outline-success { background: transparent; color: var(--cn-success); border: 1.5px solid rgba(61,122,90,.5); }
.cn-btn-outline-success:hover { background: var(--cn-success-bg); color: var(--cn-success); border-color: var(--cn-success); }

.cn-btn-ghost     { background: transparent; color: var(--cn-dark); }
.cn-btn-ghost:hover { background: var(--cn-cream-200); color: var(--cn-dark); }

.cn-btn-danger    { background: var(--cn-error); color: white; }
.cn-btn-danger:hover { background: #a0312a; color: white; }

.cn-btn-success   { background: var(--cn-success); color: white; }
.cn-btn-success:hover { background: #326549; color: white; }
.cn-btn-gold      { background: var(--cn-gold); color: white; }
.cn-btn-gold:hover { background: var(--cn-gold-dark); color: white; }

.cn-btn:disabled  { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ============================================================
   8. BADGE
   ============================================================ */
.cn-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600; border-radius: var(--cn-radius-full);
  white-space: nowrap; font-family: var(--cn-font-body);
  font-size: 0.7rem; padding: 3px 9px; line-height: 1.5;
}
.cn-badge-sm { font-size: 0.65rem; padding: 2px 8px; }
.cn-badge-md { font-size: 0.75rem; padding: 4px 10px; }

.cn-badge-rust    { background: var(--cn-rust-subtle); color: var(--cn-rust-dark); }
.cn-badge-gold    { background: var(--cn-gold-subtle); color: var(--cn-gold-dark); }
.cn-badge-success { background: var(--cn-success-bg); color: var(--cn-success); }
.cn-badge-error   { background: var(--cn-error-bg);   color: var(--cn-error); }
.cn-badge-warning { background: var(--cn-warning-bg); color: var(--cn-gold-dark); }
.cn-badge-info    { background: var(--cn-info-bg);     color: var(--cn-info); }
.cn-badge-neutral { background: var(--cn-cream-200);  color: var(--cn-cream-700); }
.cn-badge-dark    { background: var(--cn-dark);        color: var(--cn-cream-200); }

/* ============================================================
   9. TABLE
   ============================================================ */
.cn-table-wrap {
  overflow-x: auto;
  border-radius: var(--cn-radius-xl);
  border: 1px solid var(--cn-cream-300);
  background: white;
}
/* Di dalam cn-card border & radius sudah dari card-nya */
.cn-card .cn-table-wrap { border: none; border-radius: 0; }
.cn-table {
  width: 100%; border-collapse: collapse; font-size: 0.875rem;
  margin: 0;
}
.cn-table thead tr {
  background: var(--cn-cream-100);
  border-bottom: 1px solid var(--cn-cream-300);
}
.cn-table thead th {
  padding: var(--cn-space-3) var(--cn-space-5);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cn-cream-600); white-space: nowrap;
  text-align: left;
}
.cn-table tbody tr {
  border-bottom: 1px solid var(--cn-cream-200);
  transition: background var(--cn-dur-fast);
}
.cn-table tbody tr:last-child { border-bottom: none; }
.cn-table tbody tr:hover { background: var(--cn-cream-50); }
.cn-table tbody td {
  padding: var(--cn-space-3) var(--cn-space-5);
  color: var(--cn-dark); vertical-align: middle;
}
.cn-table tfoot td, .cn-table tfoot th {
  padding: var(--cn-space-3) var(--cn-space-5);
  background: var(--cn-cream-50);
  border-top: 1px solid var(--cn-cream-200);
}
.cn-table-empty td {
  padding: var(--cn-space-12); text-align: center;
  color: var(--cn-cream-500); font-size: 0.875rem;
}

/* ============================================================
   10. FORM ELEMENTS
   ============================================================ */
.cn-label {
  display: block; font-size: 0.875rem;
  font-weight: 500; color: var(--cn-dark);
  margin-bottom: var(--cn-space-2);
}
.cn-label.required::after { content: ' *'; color: var(--cn-error); }

.cn-input, .cn-select, .cn-textarea {
  width: 100%; font-family: var(--cn-font-body);
  font-size: 0.9375rem; color: var(--cn-dark);
  background: var(--cn-cream-50);
  border: 1.5px solid var(--cn-cream-300);
  border-radius: var(--cn-radius-lg);
  padding: 0 var(--cn-space-4); height: 44px;
  outline: none;
  transition: border-color var(--cn-dur-fast), box-shadow var(--cn-dur-fast), background var(--cn-dur-fast);
}
.cn-textarea, textarea.cn-input {
  height: auto; min-height: 100px;
  padding: var(--cn-space-3) var(--cn-space-4);
  resize: vertical; line-height: 1.6;
}
select.cn-input, .cn-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239E7B5A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 2.5rem; }
.cn-input::placeholder, .cn-textarea::placeholder { color: var(--cn-cream-500); }
.cn-input:hover, .cn-select:hover, .cn-textarea:hover { border-color: var(--cn-cream-400); }
.cn-input:focus, .cn-select:focus, .cn-textarea:focus { border-color: var(--cn-rust); box-shadow: 0 0 0 3px rgba(184,92,56,.14); background: white; }
.cn-input.is-invalid, .cn-select.is-invalid, .cn-textarea.is-invalid { border-color: var(--cn-error); }
.cn-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(192,57,43,.14); }
.cn-input:disabled, .cn-select:disabled, .cn-textarea:disabled,
.cn-input[readonly] { opacity: 0.6; cursor: not-allowed; background: var(--cn-cream-200); }

.cn-input-group { position: relative; display: flex; align-items: center; }
.cn-input-prefix, .cn-input-suffix { position: absolute; display: flex; align-items: center; color: var(--cn-cream-600); font-size: 0.875rem; pointer-events: none; }
.cn-input-prefix { left: var(--cn-space-4); }
.cn-input-suffix { right: var(--cn-space-4); }
.cn-input-group .cn-input.has-prefix { padding-left: 2.75rem; }
.cn-input-group .cn-input.has-suffix { padding-right: 2.75rem; }

.cn-hint { font-size: 0.8rem; color: var(--cn-cream-600); margin-top: var(--cn-space-1); display: block; }
.cn-error-msg { font-size: 0.8rem; color: var(--cn-error); margin-top: var(--cn-space-1); display: flex; align-items: center; gap: 4px; }

.cn-form-row { margin-bottom: var(--cn-space-5); }
.cn-form-section-title {
  font-family: var(--cn-font-display);
  font-size: 1rem; font-weight: 600;
  color: var(--cn-dark); margin-bottom: var(--cn-space-4);
  padding-bottom: var(--cn-space-3);
  border-bottom: 1px solid var(--cn-cream-200);
  display: flex; align-items: center; gap: var(--cn-space-2);
}
.cn-form-section-title i { color: var(--cn-rust); font-size: 0.875rem; }

/* Checkbox & Radio */
.cn-check { display: flex; align-items: flex-start; gap: var(--cn-space-3); cursor: pointer; }
.cn-check input[type="checkbox"], .cn-check input[type="radio"] { appearance: none; width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; background: var(--cn-cream-50); border: 1.5px solid var(--cn-cream-400); transition: all var(--cn-dur-fast) var(--cn-spring); cursor: pointer; }
.cn-check input[type="checkbox"] { border-radius: var(--cn-radius-sm); }
.cn-check input[type="radio"] { border-radius: 50%; }
.cn-check input[type="checkbox"]:checked { background: var(--cn-rust); border-color: var(--cn-rust); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.854 3.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3.5-3.5a.5.5 0 11.708-.708L6.5 10.293l6.646-6.647a.5.5 0 01.708 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.cn-check input[type="radio"]:checked { border-width: 5px; border-color: var(--cn-rust); background: white; }

/* Dropzone — file upload drag & drop */
.cn-dropzone {
  position: relative;
  border: 2px dashed var(--cn-cream-400);
  border-radius: var(--cn-radius-lg);
  background: var(--cn-cream-50);
  padding: var(--cn-space-6) var(--cn-space-5);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--cn-dur-fast) var(--cn-ease), background var(--cn-dur-fast) var(--cn-ease);
}
.cn-dropzone:hover { border-color: var(--cn-rust-light); background: var(--cn-rust-subtle); }
.cn-dropzone.dragover {
  border-color: var(--cn-rust);
  background: var(--cn-rust-subtle);
  box-shadow: 0 0 0 3px rgba(184,92,56,.14);
}
.cn-dropzone.is-invalid { border-color: var(--cn-error); }
.cn-dropzone input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.cn-dropzone-icon {
  font-size: 1.5rem;
  color: var(--cn-cream-500);
  margin-bottom: var(--cn-space-2);
  transition: color var(--cn-dur-fast), transform var(--cn-dur-normal) var(--cn-spring);
}
.cn-dropzone:hover .cn-dropzone-icon,
.cn-dropzone.dragover .cn-dropzone-icon { color: var(--cn-rust); transform: translateY(-2px); }
.cn-dropzone-text { font-size: 0.875rem; color: var(--cn-dark); }
.cn-dropzone-text strong { color: var(--cn-rust); font-weight: 600; }
.cn-dropzone-hint { font-size: 0.75rem; color: var(--cn-cream-600); margin-top: var(--cn-space-1); }
.cn-dropzone.has-file .cn-dropzone-placeholder { display: none; }

/* Preview file terpilih */
.cn-dropzone-preview {
  display: none;
  align-items: center;
  gap: var(--cn-space-3);
  text-align: left;
}
.cn-dropzone.has-file .cn-dropzone-preview { display: flex; }
.cn-dropzone-thumb {
  width: 56px; height: 56px;
  border-radius: var(--cn-radius-md);
  object-fit: cover;
  border: 1px solid var(--cn-cream-300);
  flex-shrink: 0;
}
.cn-dropzone-fileicon {
  width: 56px; height: 56px;
  border-radius: var(--cn-radius-md);
  background: var(--cn-rust-subtle);
  color: var(--cn-rust);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.cn-dropzone-fileinfo { flex: 1; min-width: 0; }
.cn-dropzone-filename {
  font-size: 0.875rem; font-weight: 600; color: var(--cn-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cn-dropzone-filesize { font-size: 0.75rem; color: var(--cn-cream-600); }
.cn-dropzone-remove {
  position: relative; z-index: 2;
  width: 30px; height: 30px;
  border-radius: var(--cn-radius-md);
  border: none; background: var(--cn-cream-200);
  color: var(--cn-cream-600); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; flex-shrink: 0;
  transition: all var(--cn-dur-fast);
}
.cn-dropzone-remove:hover { background: var(--cn-error-bg); color: var(--cn-error); }
.cn-dropzone-error { font-size: 0.8rem; color: var(--cn-error); margin-top: var(--cn-space-2); display: none; }
.cn-dropzone.has-error .cn-dropzone-error { display: block; }

/* Varian compact (mis. avatar) */
.cn-dropzone-compact { padding: var(--cn-space-4); }
.cn-dropzone-compact .cn-dropzone-icon { font-size: 1.125rem; margin-bottom: var(--cn-space-1); }
.cn-dropzone-compact .cn-dropzone-text { font-size: 0.8rem; }

/* Toggle */
.cn-toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
.cn-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.cn-toggle-track { position: absolute; inset: 0; border-radius: var(--cn-radius-full); background: var(--cn-cream-300); transition: background var(--cn-dur-normal) var(--cn-ease); }
.cn-toggle input:checked + .cn-toggle-track { background: var(--cn-rust); }
.cn-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: var(--cn-shadow-sm); transition: transform var(--cn-dur-normal) var(--cn-spring); }
.cn-toggle input:checked ~ .cn-toggle-thumb { transform: translateX(20px); }

/* ============================================================
   11. ALERT / FLASH
   ============================================================ */
.cn-alert {
  display: flex; gap: var(--cn-space-3);
  padding: var(--cn-space-4) var(--cn-space-5);
  border-radius: var(--cn-radius-lg); border: 1px solid;
  margin-bottom: var(--cn-space-4); font-size: 0.875rem;
}
.cn-alert-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.cn-alert-content { flex: 1; }
.cn-alert-title { font-weight: 600; margin-bottom: 2px; }
.cn-alert-close { background: none; border: none; cursor: pointer; opacity: 0.6; font-size: 0.875rem; align-self: flex-start; padding: 0; color: inherit; transition: opacity var(--cn-dur-fast); }
.cn-alert-close:hover { opacity: 1; }
.cn-alert-success { background: var(--cn-success-bg); border-color: rgba(61,122,90,.25); color: var(--cn-success); }
.cn-alert-error   { background: var(--cn-error-bg);   border-color: rgba(192,57,43,.25); color: var(--cn-error); }
.cn-alert-warning { background: var(--cn-warning-bg); border-color: rgba(201,150,62,.30); color: var(--cn-gold-dark); }
.cn-alert-info    { background: var(--cn-info-bg);     border-color: rgba(44,110,158,.25); color: var(--cn-info); }

/* ============================================================
   12. PAGINATION
   ============================================================ */
.cn-pagination { display: flex; align-items: center; gap: var(--cn-space-1); }
.cn-page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; min-width: 34px; padding: 0 var(--cn-space-2);
  border-radius: var(--cn-radius-md);
  border: 1.5px solid var(--cn-cream-300);
  background: white; color: var(--cn-dark);
  font-size: 0.875rem; font-family: var(--cn-font-body); font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: all var(--cn-dur-fast);
}
.cn-page-btn:hover { background: var(--cn-cream-100); border-color: var(--cn-cream-400); color: var(--cn-dark); }
.cn-page-btn.active { background: var(--cn-rust); border-color: var(--cn-rust); color: white; }
.cn-page-btn.active:hover { background: var(--cn-rust-dark); }
.cn-page-btn:disabled, .cn-page-btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.cn-page-ellipsis { display: inline-flex; align-items: center; justify-content: center; height: 34px; width: 34px; color: var(--cn-cream-500); }

/* ============================================================
   13. MODAL (custom cn-modal)
   ============================================================ */
.cn-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(26,14,6,.55); backdrop-filter: blur(4px);
  z-index: 1055; display: flex; align-items: center; justify-content: center;
  padding: var(--cn-space-6);
  opacity: 0; pointer-events: none;
  transition: opacity var(--cn-dur-slow) var(--cn-ease);
}
.cn-modal-overlay.show { opacity: 1; pointer-events: all; }
.cn-modal {
  background: white; border-radius: var(--cn-radius-2xl);
  width: 100%; max-width: 480px; box-shadow: 0 25px 50px rgba(26,14,6,.20);
  transform: scale(0.95) translateY(12px);
  transition: transform var(--cn-dur-slow) var(--cn-spring), opacity var(--cn-dur-slow) var(--cn-ease);
  opacity: 0; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.cn-modal-overlay.show .cn-modal { transform: scale(1) translateY(0); opacity: 1; }
.cn-modal-sm { max-width: 380px; }
.cn-modal-lg { max-width: 640px; }
.cn-modal-header { padding: var(--cn-space-5) var(--cn-space-8); border-bottom: 1px solid var(--cn-cream-200); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.cn-modal-title { font-family: var(--cn-font-display); font-size: 1.125rem; font-weight: 600; color: var(--cn-dark); margin: 0; }
.cn-modal-close { width: 30px; height: 30px; border-radius: var(--cn-radius-md); border: none; background: var(--cn-cream-100); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--cn-cream-600); font-size: 0.8rem; transition: all var(--cn-dur-fast); }
.cn-modal-close:hover { background: var(--cn-cream-200); color: var(--cn-dark); }
.cn-modal-body { padding: var(--cn-space-6) var(--cn-space-8); overflow-y: auto; flex: 1; }
.cn-modal-footer { padding: var(--cn-space-4) var(--cn-space-8); border-top: 1px solid var(--cn-cream-200); display: flex; justify-content: flex-end; gap: var(--cn-space-3); flex-shrink: 0; }

/* ============================================================
   14. FILTER BAR
   ============================================================ */
.cn-filter-bar {
  background: white;
  border: 1px solid var(--cn-cream-300);
  border-radius: var(--cn-radius-xl);
  padding: var(--cn-space-5) var(--cn-space-6);
  margin-bottom: var(--cn-space-5);
  display: flex; flex-wrap: wrap; gap: var(--cn-space-3); align-items: flex-end;
}
.cn-filter-bar .cn-input,
.cn-filter-bar .cn-select { height: 38px; font-size: 0.875rem; }
.cn-filter-group { display: flex; flex-direction: column; gap: var(--cn-space-1); }
.cn-filter-group .cn-label { font-size: 0.72rem; margin-bottom: 0; }
.cn-filter-search { min-width: 220px; flex: 1; }
.cn-filter-actions { display: flex; gap: var(--cn-space-2); align-items: flex-end; }

/* ============================================================
   15. DIVIDER
   ============================================================ */
.cn-divider { height: 1px; background: var(--cn-cream-300); border: none; margin: var(--cn-space-6) 0; }
.cn-divider-text { display: flex; align-items: center; gap: var(--cn-space-4); color: var(--cn-cream-500); font-size: 0.8rem; margin: var(--cn-space-6) 0; }
.cn-divider-text::before, .cn-divider-text::after { content: ''; flex: 1; height: 1px; background: var(--cn-cream-300); }

/* ============================================================
   16. MISC UTILITIES
   ============================================================ */
.cn-text-mono { font-family: var(--cn-font-mono); font-size: 0.85em; }
.cn-text-muted { color: var(--cn-cream-600) !important; }
.cn-text-rust { color: var(--cn-rust) !important; }
.cn-text-gold { color: var(--cn-gold-dark) !important; }

/* Avatar */
.cn-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; flex-shrink: 0; }
.cn-avatar-sm  { width: 28px; height: 28px; font-size: 0.65rem; }
.cn-avatar-md  { width: 36px; height: 36px; font-size: 0.75rem; }
.cn-avatar-lg  { width: 44px; height: 44px; font-size: 0.9rem; }
.cn-avatar-rust { background: var(--cn-rust-subtle); color: var(--cn-rust); }
.cn-avatar-gold { background: var(--cn-gold-subtle); color: var(--cn-gold-dark); }
.cn-avatar-neutral { background: var(--cn-cream-200); color: var(--cn-cream-700); }

/* Skeleton */
@keyframes cn-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.cn-skeleton { background: linear-gradient(90deg, var(--cn-cream-200) 25%, var(--cn-cream-100) 50%, var(--cn-cream-200) 75%); background-size: 800px 100%; animation: cn-shimmer 1.5s ease-in-out infinite; border-radius: var(--cn-radius-md); }

/* Tooltip */
[data-cn-tooltip] { position: relative; cursor: pointer; }
[data-cn-tooltip]::after { content: attr(data-cn-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--cn-dark); color: var(--cn-cream-100); font-size: 0.72rem; padding: 4px 10px; border-radius: var(--cn-radius-md); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--cn-dur-fast); z-index: var(--cn-z-tooltip, 700); font-family: var(--cn-font-body); }
[data-cn-tooltip]:hover::after { opacity: 1; }

/* Empty state */
.cn-empty { text-align: center; padding: var(--cn-space-12) var(--cn-space-8); }
.cn-empty-icon { font-size: 2.5rem; color: var(--cn-cream-400); margin-bottom: var(--cn-space-4); }
.cn-empty-title { font-family: var(--cn-font-display); font-size: 1.125rem; font-weight: 600; color: var(--cn-dark); margin-bottom: var(--cn-space-2); }
.cn-empty-desc { font-size: 0.875rem; color: var(--cn-cream-600); max-width: 320px; margin: 0 auto var(--cn-space-6); line-height: 1.65; }

/* Spinner kecil untuk tombol loading */
@keyframes cn-spin { to { transform: rotate(360deg); } }
.cn-spinner-sm { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; animation: cn-spin .7s linear infinite; }

/* Scrollbar */
.cn-sidebar::-webkit-scrollbar, .cn-content::-webkit-scrollbar { width: 5px; }
.cn-sidebar::-webkit-scrollbar-track { background: transparent; }
.cn-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }
.cn-content::-webkit-scrollbar-thumb { background: var(--cn-cream-300); border-radius: 3px; }

/* ============================================================
   17. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .cn-sidebar { transform: translateX(-100%); }
  .cn-sidebar.open { transform: translateX(0); }
  .cn-wrapper { margin-left: 0; }
  .cn-topbar { padding: 0 var(--cn-space-4); }
  .cn-content { padding: var(--cn-space-4); }
  .cn-page-header { flex-direction: column; align-items: flex-start; }
  .cn-filter-bar { flex-direction: column; }
  .cn-filter-search { min-width: 0; width: 100%; }
}