/* ═══════════════════════════════════════════════════════════════════════════
   ContentFlow Pro v9 — styles.css
   WordPress Classic Design System
   Mobile-First + RTL + Light Mode
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. CSS RESET
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[role="list"], ol[role="list"] { list-style: none; }

body { min-height: 100vh; line-height: 1.5; }

h1, h2, h3, h4, h5, h6 { line-height: 1.2; }

img, picture, svg, video { max-width: 100%; display: block; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

a { color: inherit; text-decoration: none; }

[hidden] { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   2. CSS VARIABLES — WordPress Classic Design Tokens
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Primary Blue (WordPress) ─── */
  --cf-primary:        #2271b1;
  --cf-primary-hover:  #135e96;
  --cf-primary-light:  #ebf4fa;
  --cf-primary-dark:   #0a4b78;

  /* ─── Neutrals (WordPress Grays) ─── */
  --cf-bg:             #f0f0f1;
  --cf-surface:        #ffffff;
  --cf-surface-alt:    #f6f7f7;
  --cf-border:         #dcdcde;
  --cf-border-light:   #f0f0f1;
  --cf-text:           #1d2327;
  --cf-text-secondary: #50575e;
  --cf-text-muted:     #8c8f94;

  /* ─── Status Colors ─── */
  --cf-success:        #00a32a;
  --cf-success-bg:     #f0fdf4;
  --cf-warning:        #dba617;
  --cf-warning-bg:     #fef3c7;
  --cf-warning-dark:   #854f0b;
  --cf-error:          #d63638;
  --cf-error-bg:       #fef2f2;
  --cf-info:           #72aee6;
  --cf-info-bg:        #ebf4fa;

  /* ─── Pipeline Stage Colors ─── */
  --cf-stage-new:       #8c8f94;
  --cf-stage-cleaned:   #0ea5e9;
  --cf-stage-draft:     #d97706;
  --cf-stage-review:    #eab308;
  --cf-stage-approved:  #22c55e;
  --cf-stage-published: #2563eb;
  --cf-stage-excluded:  #6b7280;

  /* ─── Typography ─── */
  --cf-font:      'IBM Plex Sans Arabic', 'Helvetica Neue', Arial, sans-serif;
  --cf-font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --cf-text-xs:   11px;
  --cf-text-sm:   12px;
  --cf-text-base: 14px;
  --cf-text-md:   16px;  /* inputs — iOS no-zoom */
  --cf-text-lg:   20px;
  --cf-text-xl:   28px;

  --cf-font-normal:   400;
  --cf-font-medium:   500;
  --cf-font-semibold: 600;
  --cf-font-bold:     700;

  --cf-line-tight:  1.2;
  --cf-line-normal: 1.5;
  --cf-line-loose:  1.7;

  /* ─── Spacing (4/8px grid) ─── */
  --cf-space-1:  4px;
  --cf-space-2:  8px;
  --cf-space-3:  12px;
  --cf-space-4:  16px;
  --cf-space-5:  20px;
  --cf-space-6:  24px;
  --cf-space-8:  32px;
  --cf-space-10: 40px;
  --cf-space-12: 48px;

  /* ─── Radius ─── */
  --cf-radius-sm:   3px;
  --cf-radius:      4px;
  --cf-radius-md:   6px;
  --cf-radius-lg:   8px;
  --cf-radius-full: 9999px;

  /* ─── Borders ─── */
  --cf-border-thin:   0.5px;
  --cf-border-normal: 1px;
  --cf-border-thick:  2px;

  /* ─── Shadows ─── */
  --cf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --cf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --cf-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --cf-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --cf-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* ─── Transitions ─── */
  --cf-transition-fast: 0.1s ease;
  --cf-transition:      0.15s ease;
  --cf-transition-slow: 0.25s ease;

  /* ─── Z-index ─── */
  --cf-z-dropdown:     100;
  --cf-z-sticky:       200;
  --cf-z-sidebar:      300;
  --cf-z-sidebar-overlay: 400;
  --cf-z-modal-backdrop: 1000;
  --cf-z-modal:        1001;
  --cf-z-toast:        2000;

  /* ─── Layout ─── */
  --cf-sidebar-width:  280px;
  --cf-header-height:  56px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. BASE TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--cf-font);
  font-size: var(--cf-text-base);
  font-weight: var(--cf-font-normal);
  line-height: var(--cf-line-normal);
  color: var(--cf-text);
  background-color: var(--cf-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Use lining (full-height) numerals throughout the admin interface —
     matches admin-panel convention (latin digits even in Arabic UI) */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--cf-font-semibold);
  color: var(--cf-text);
  line-height: var(--cf-line-tight);
}

h1 { font-size: var(--cf-text-xl); font-weight: var(--cf-font-bold); }
h2 { font-size: var(--cf-text-lg); }
h3 { font-size: var(--cf-text-lg); }
h4 { font-size: var(--cf-text-md); }
h5 { font-size: var(--cf-text-base); }
h6 { font-size: var(--cf-text-sm); }

a {
  color: var(--cf-primary);
  transition: color var(--cf-transition);
}
a:hover { color: var(--cf-primary-hover); }

p { margin-bottom: var(--cf-space-3); }
p:last-child { margin-bottom: 0; }

code, pre, kbd, samp {
  font-family: var(--cf-font-mono);
  font-size: 0.9em;
}

kbd {
  display: inline-block;
  padding: 2px var(--cf-space-2);
  background: var(--cf-surface-alt);
  border: 1px solid var(--cf-border);
  border-bottom-width: 2px;
  border-radius: var(--cf-radius-sm);
  font-size: var(--cf-text-xs);
  color: var(--cf-text-secondary);
}

hr {
  border: none;
  border-top: 1px solid var(--cf-border-light);
  margin: var(--cf-space-4) 0;
}

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cf-bg); }
::-webkit-scrollbar-thumb {
  background: #c3c4c7;
  border-radius: 5px;
  border: 2px solid var(--cf-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--cf-text-muted); }

::selection {
  background: var(--cf-primary-light);
  color: var(--cf-primary-dark);
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cf-text-xs  { font-size: var(--cf-text-xs); }
.cf-text-sm  { font-size: var(--cf-text-sm); }
.cf-text-lg  { font-size: var(--cf-text-lg); }
.cf-text-xl  { font-size: var(--cf-text-xl); }

.cf-text-muted     { color: var(--cf-text-muted); }
.cf-text-secondary { color: var(--cf-text-secondary); }
.cf-text-success   { color: var(--cf-success); }
.cf-text-error     { color: var(--cf-error); }
.cf-text-warning   { color: var(--cf-warning-dark); }

.cf-font-medium    { font-weight: var(--cf-font-medium); }
.cf-font-semibold  { font-weight: var(--cf-font-semibold); }
.cf-font-bold      { font-weight: var(--cf-font-bold); }

.cf-mt-2 { margin-top: var(--cf-space-2); }
.cf-mt-3 { margin-top: var(--cf-space-3); }
.cf-mt-4 { margin-top: var(--cf-space-4); }
.cf-mt-5 { margin-top: var(--cf-space-5); }
.cf-mt-6 { margin-top: var(--cf-space-6); }
.cf-mb-2 { margin-bottom: var(--cf-space-2); }
.cf-mb-3 { margin-bottom: var(--cf-space-3); }
.cf-mb-4 { margin-bottom: var(--cf-space-4); }
.cf-mb-5 { margin-bottom: var(--cf-space-5); }
.cf-mb-6 { margin-bottom: var(--cf-space-6); }

.cf-hide-mobile { display: none; }
.cf-hide-desktop { display: initial; }


/* ═══════════════════════════════════════════════════════════════════════════
   5. ICONS
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.cf-icon--sm { width: 12px; height: 12px; }
.cf-icon--lg { width: 20px; height: 20px; }
.cf-icon--xl { width: 24px; height: 24px; }

/* Flip direction-aware icons in RTL (chevron-left/right etc.) */
[dir="rtl"] .cf-icon--flip { transform: scaleX(-1); }


/* ═══════════════════════════════════════════════════════════════════════════
   6. COMPONENT — BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cf-space-2);
  padding: var(--cf-space-2) var(--cf-space-4);
  font-family: var(--cf-font);
  font-size: var(--cf-text-base);
  font-weight: var(--cf-font-medium);
  line-height: 1.2;
  border-radius: var(--cf-radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--cf-text);
  cursor: pointer;
  transition: background-color var(--cf-transition),
              border-color var(--cf-transition),
              color var(--cf-transition),
              box-shadow var(--cf-transition);
  white-space: nowrap;
  user-select: none;
  min-height: 36px;
}

.cf-btn:disabled,
.cf-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.cf-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.25);
}

/* Primary */
.cf-btn--primary {
  background: var(--cf-primary);
  color: #fff;
  border-color: var(--cf-primary);
}
.cf-btn--primary:hover {
  background: var(--cf-primary-hover);
  border-color: var(--cf-primary-hover);
}
.cf-btn--primary:active { background: var(--cf-primary-dark); }

/* Secondary */
.cf-btn--secondary {
  background: var(--cf-surface);
  color: var(--cf-text);
  border-color: var(--cf-border);
}
.cf-btn--secondary:hover {
  border-color: var(--cf-primary);
  color: var(--cf-primary);
}

/* Danger */
.cf-btn--danger {
  background: var(--cf-error);
  color: #fff;
  border-color: var(--cf-error);
}
.cf-btn--danger:hover {
  background: #b32d2e;
  border-color: #b32d2e;
}

/* Ghost (transparent, no border) */
.cf-btn--ghost {
  background: transparent;
  color: var(--cf-text-secondary);
}
.cf-btn--ghost:hover {
  background: var(--cf-primary-light);
  color: var(--cf-primary-dark);
}

/* Link (looks like text link) */
.cf-btn--link {
  background: transparent;
  color: var(--cf-primary);
  padding: 0;
  min-height: auto;
  border: none;
}
.cf-btn--link:hover {
  color: var(--cf-primary-hover);
  text-decoration: underline;
}

/* Sizes */
.cf-btn--sm {
  padding: var(--cf-space-1) var(--cf-space-3);
  font-size: var(--cf-text-sm);
  min-height: 28px;
}

.cf-btn--lg {
  padding: var(--cf-space-3) var(--cf-space-5);
  font-size: var(--cf-text-md);
  min-height: 44px;
}

.cf-btn--block {
  display: flex;
  width: 100%;
}

/* Icon-only button (square) */
.cf-btn--icon {
  padding: var(--cf-space-2);
  min-width: 36px;
  min-height: 36px;
}

.cf-btn--icon.cf-btn--sm {
  min-width: 28px;
  min-height: 28px;
  padding: var(--cf-space-1);
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. COMPONENT — FORM FIELDS
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-field {
  display: flex;
  flex-direction: column;
  gap: var(--cf-space-2);
  margin-bottom: var(--cf-space-4);
}

.cf-label {
  font-size: var(--cf-text-base);
  font-weight: var(--cf-font-medium);
  color: var(--cf-text);
}

.cf-label--required::after {
  content: "*";
  color: var(--cf-error);
  margin-inline-start: 4px;
}

.cf-input,
.cf-textarea,
.cf-select {
  width: 100%;
  padding: var(--cf-space-2) var(--cf-space-3);
  font-family: var(--cf-font);
  font-size: var(--cf-text-md);  /* 16px — critical for iOS */
  line-height: 1.4;
  color: var(--cf-text);
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  transition: border-color var(--cf-transition),
              box-shadow var(--cf-transition);
  min-height: 40px;
}

.cf-input::placeholder,
.cf-textarea::placeholder {
  color: var(--cf-text-muted);
}

.cf-input:focus,
.cf-textarea:focus,
.cf-select:focus {
  outline: none;
  border-color: var(--cf-primary);
  box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);
}

.cf-input:disabled,
.cf-textarea:disabled,
.cf-select:disabled {
  background: var(--cf-surface-alt);
  color: var(--cf-text-muted);
  cursor: not-allowed;
}

.cf-input--error,
.cf-textarea--error,
.cf-select--error {
  border-color: var(--cf-error);
}
.cf-input--error:focus,
.cf-textarea--error:focus,
.cf-select--error:focus {
  box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.15);
}

.cf-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: var(--cf-line-normal);
}

.cf-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2350575e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--cf-space-3) center;
  padding-inline-start: var(--cf-space-8);
}

[dir="rtl"] .cf-select {
  background-position: left var(--cf-space-3) center;
}

.cf-field__hint {
  font-size: var(--cf-text-sm);
  color: var(--cf-text-secondary);
}

.cf-field__error {
  font-size: var(--cf-text-sm);
  color: var(--cf-error);
  display: flex;
  align-items: center;
  gap: var(--cf-space-1);
}

/* Checkbox & Radio */
.cf-checkbox,
.cf-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-space-2);
  cursor: pointer;
  user-select: none;
  font-size: var(--cf-text-base);
}

.cf-checkbox input[type="checkbox"],
.cf-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--cf-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* Search input with leading icon */
.cf-search {
  position: relative;
}
.cf-search__icon {
  position: absolute;
  top: 50%;
  inset-inline-start: var(--cf-space-3);
  transform: translateY(-50%);
  color: var(--cf-text-muted);
  pointer-events: none;
  width: 16px;
  height: 16px;
}
.cf-search__input {
  padding-inline-start: var(--cf-space-8);
}
.cf-search__clear {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--cf-space-2);
  transform: translateY(-50%);
  color: var(--cf-text-muted);
  background: none;
  border: none;
  padding: var(--cf-space-1);
  cursor: pointer;
  border-radius: var(--cf-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.cf-search__clear:hover {
  background: var(--cf-border-light);
  color: var(--cf-text);
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. COMPONENT — CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-card {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-md);
  padding: var(--cf-space-5);
  box-shadow: var(--cf-shadow-sm);
}

.cf-card--flat { box-shadow: none; }

.cf-card--clickable {
  cursor: pointer;
  transition: border-color var(--cf-transition),
              box-shadow var(--cf-transition),
              transform var(--cf-transition);
}
.cf-card--clickable:hover {
  border-color: var(--cf-primary);
  box-shadow: var(--cf-shadow-md);
}

.cf-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cf-space-3);
  margin-bottom: var(--cf-space-4);
  padding-bottom: var(--cf-space-3);
  border-bottom: 1px solid var(--cf-border-light);
}

.cf-card__title {
  font-size: var(--cf-text-lg);
  font-weight: var(--cf-font-semibold);
  color: var(--cf-text);
  margin: 0;
}

.cf-card__subtitle {
  font-size: var(--cf-text-sm);
  color: var(--cf-text-secondary);
  margin-top: 2px;
}

.cf-card__body {
  color: var(--cf-text);
}

.cf-card__footer {
  display: flex;
  gap: var(--cf-space-2);
  justify-content: flex-end;
  margin-top: var(--cf-space-4);
  padding-top: var(--cf-space-3);
  border-top: 1px solid var(--cf-border-light);
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. COMPONENT — STAT CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-stat {
  display: flex;
  flex-direction: column;
  gap: var(--cf-space-2);
}

.cf-stat__label {
  font-size: var(--cf-text-sm);
  font-weight: var(--cf-font-medium);
  color: var(--cf-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
}

.cf-stat__number {
  font-size: var(--cf-text-xl);
  font-weight: var(--cf-font-bold);
  color: var(--cf-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cf-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-space-1);
  font-size: var(--cf-text-sm);
  font-weight: var(--cf-font-medium);
  color: var(--cf-text-secondary);
}

.cf-stat__delta--up    { color: var(--cf-success); }
.cf-stat__delta--down  { color: var(--cf-error); }
.cf-stat__delta--flat  { color: var(--cf-text-muted); }


/* ═══════════════════════════════════════════════════════════════════════════
   10. COMPONENT — BADGES
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-space-1);
  padding: 2px var(--cf-space-2);
  font-size: var(--cf-text-xs);
  font-weight: var(--cf-font-medium);
  line-height: 1.4;
  border-radius: var(--cf-radius-full);
  background: var(--cf-primary-light);
  color: var(--cf-primary-dark);
  white-space: nowrap;
}

.cf-badge--success { background: var(--cf-success-bg);  color: var(--cf-success); }
.cf-badge--warning { background: var(--cf-warning-bg);  color: var(--cf-warning-dark); }
.cf-badge--error   { background: var(--cf-error-bg);    color: var(--cf-error); }
.cf-badge--info    { background: var(--cf-info-bg);     color: var(--cf-primary-dark); }
.cf-badge--neutral { background: var(--cf-surface-alt); color: var(--cf-text-secondary); }

/* Stage badges — one per pipeline stage */
.cf-badge--stage-new       { background: #e4e7eb; color: #50575e; }
.cf-badge--stage-cleaned   { background: #e0f2fe; color: #075985; }
.cf-badge--stage-draft     { background: #fed7aa; color: #9a3412; }
.cf-badge--stage-review    { background: #fef08a; color: #713f12; }
.cf-badge--stage-approved  { background: #bbf7d0; color: #166534; }
.cf-badge--stage-published { background: #bfdbfe; color: #1e40af; }
.cf-badge--stage-excluded  { background: #e5e7eb; color: #374151; }

.cf-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--cf-radius-full);
  background: currentColor;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. COMPONENT — MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--cf-z-modal-backdrop);
  animation: cf-fadeIn 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cf-space-4);
}

.cf-modal {
  position: relative;
  width: min(100%, 800px);
  max-height: 90vh;
  background: var(--cf-surface);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: var(--cf-z-modal);
  animation: cf-slideUp 0.2s ease;
}

.cf-modal--sm { width: min(100%, 480px); }
.cf-modal--lg { width: min(100%, 1000px); }

.cf-modal__header {
  padding: var(--cf-space-4) var(--cf-space-5);
  border-bottom: 1px solid var(--cf-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cf-space-3);
  flex-shrink: 0;
}

.cf-modal__title {
  font-size: var(--cf-text-lg);
  font-weight: var(--cf-font-semibold);
  color: var(--cf-text);
  margin: 0;
}

.cf-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--cf-radius);
  color: var(--cf-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--cf-transition);
  flex-shrink: 0;
}
.cf-modal__close:hover {
  background: var(--cf-surface-alt);
  color: var(--cf-text);
}

.cf-modal__body {
  padding: var(--cf-space-5);
  overflow-y: auto;
  flex: 1 1 auto;
}

.cf-modal__footer {
  padding: var(--cf-space-4) var(--cf-space-5);
  border-top: 1px solid var(--cf-border-light);
  display: flex;
  justify-content: flex-end;
  gap: var(--cf-space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. COMPONENT — TOAST
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-toast-container {
  position: fixed;
  bottom: var(--cf-space-5);
  inset-inline-end: var(--cf-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--cf-space-2);
  z-index: var(--cf-z-toast);
  pointer-events: none;
  max-width: calc(100vw - var(--cf-space-10));
}

.cf-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--cf-space-3);
  padding: var(--cf-space-3) var(--cf-space-4);
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-inline-start: 4px solid var(--cf-primary);
  border-radius: var(--cf-radius-md);
  box-shadow: var(--cf-shadow-lg);
  min-width: 280px;
  max-width: 400px;
  pointer-events: auto;
  animation: cf-slideIn 0.2s ease;
}

.cf-toast--success { border-inline-start-color: var(--cf-success); }
.cf-toast--warning { border-inline-start-color: var(--cf-warning); }
.cf-toast--error   { border-inline-start-color: var(--cf-error); }

.cf-toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--cf-primary);
}
.cf-toast--success .cf-toast__icon { color: var(--cf-success); }
.cf-toast--warning .cf-toast__icon { color: var(--cf-warning); }
.cf-toast--error   .cf-toast__icon { color: var(--cf-error); }

.cf-toast__body {
  flex: 1 1 auto;
  font-size: var(--cf-text-base);
  color: var(--cf-text);
  line-height: 1.4;
}

.cf-toast__title {
  font-weight: var(--cf-font-semibold);
  margin-bottom: 2px;
}

.cf-toast__close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cf-text-muted);
  border-radius: var(--cf-radius);
}
.cf-toast__close:hover { color: var(--cf-text); }


/* ═══════════════════════════════════════════════════════════════════════════
   13. COMPONENT — DROPDOWN
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-dropdown {
  position: relative;
  display: inline-block;
}

.cf-dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  min-width: 180px;
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-md);
  box-shadow: var(--cf-shadow-md);
  padding: var(--cf-space-1) 0;
  z-index: var(--cf-z-dropdown);
  animation: cf-fadeIn 0.1s ease;
}

.cf-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
  padding: var(--cf-space-2) var(--cf-space-3);
  font-size: var(--cf-text-base);
  color: var(--cf-text);
  background: transparent;
  border: none;
  width: 100%;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--cf-transition);
}
.cf-dropdown__item:hover { background: var(--cf-surface-alt); }
.cf-dropdown__item--danger { color: var(--cf-error); }
.cf-dropdown__item--danger:hover { background: var(--cf-error-bg); }

.cf-dropdown__divider {
  height: 1px;
  background: var(--cf-border-light);
  margin: var(--cf-space-1) 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. COMPONENT — TABS
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-tabs {
  display: flex;
  gap: var(--cf-space-1);
  border-bottom: 1px solid var(--cf-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.cf-tabs::-webkit-scrollbar { display: none; }

.cf-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-space-2);
  padding: var(--cf-space-3) var(--cf-space-4);
  font-family: var(--cf-font);
  font-size: var(--cf-text-base);
  font-weight: var(--cf-font-medium);
  color: var(--cf-text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--cf-transition),
              border-color var(--cf-transition);
  min-height: 44px;
}
.cf-tab:hover { color: var(--cf-text); }
.cf-tab[aria-selected="true"] {
  color: var(--cf-primary);
  border-bottom-color: var(--cf-primary);
}

/* Pill-style tabs (alt) */
.cf-tabs--pills {
  border-bottom: none;
  gap: var(--cf-space-2);
  padding: var(--cf-space-1);
  background: var(--cf-surface-alt);
  border-radius: var(--cf-radius-md);
  display: inline-flex;
  width: auto;
}
.cf-tabs--pills .cf-tab {
  border-radius: var(--cf-radius);
  border-bottom: none;
  padding: var(--cf-space-2) var(--cf-space-3);
  min-height: 32px;
  font-size: var(--cf-text-sm);
}
.cf-tabs--pills .cf-tab[aria-selected="true"] {
  background: var(--cf-surface);
  color: var(--cf-text);
  box-shadow: var(--cf-shadow-xs);
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes cf-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes cf-slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cf-slideIn {
  from { opacity: 0; transform: translateX(var(--cf-slide-offset, 20px)); }
  to   { opacity: 1; transform: translateX(0); }
}

[dir="rtl"] .cf-toast { --cf-slide-offset: -20px; }

@keyframes cf-spin {
  to { transform: rotate(360deg); }
}

.cf-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--cf-border);
  border-top-color: var(--cf-primary);
  border-radius: var(--cf-radius-full);
  animation: cf-spin 0.6s linear infinite;
}

.cf-spinner--lg { width: 24px; height: 24px; border-width: 3px; }

/* Skeleton loading */
@keyframes cf-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.cf-skeleton {
  background: linear-gradient(
    90deg,
    var(--cf-surface-alt) 0%,
    var(--cf-border-light) 50%,
    var(--cf-surface-alt) 100%
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: var(--cf-radius);
  animation: cf-shimmer 1.2s ease-in-out infinite;
  min-height: 14px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   16. LAYOUT — APP SHELL
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-app {
  display: flex;
  min-height: 100vh;
  background: var(--cf-bg);
}

/* Sidebar — mobile default is overlay, desktop is static */
.cf-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: var(--cf-sidebar-width);
  max-width: 85vw;
  background: var(--cf-surface);
  border-inline-end: 1px solid var(--cf-border);
  display: flex;
  flex-direction: column;
  z-index: var(--cf-z-sidebar-overlay);
  transform: translateX(100%);   /* RTL: off-screen to the right in visual terms (start side) */
  transition: transform 0.25s ease;
  overflow: hidden;
}

[dir="rtl"] .cf-sidebar { transform: translateX(100%); }
[dir="ltr"] .cf-sidebar { transform: translateX(-100%); }

.cf-sidebar.is-open { transform: translateX(0); }

.cf-sidebar__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: var(--cf-z-sidebar);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.cf-sidebar__backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.cf-sidebar__header {
  padding: var(--cf-space-4) var(--cf-space-4) var(--cf-space-3);
  border-bottom: 1px solid var(--cf-border-light);
  display: flex;
  align-items: center;
  gap: var(--cf-space-3);
  flex-shrink: 0;
}

.cf-sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
  font-size: var(--cf-text-md);
  font-weight: var(--cf-font-bold);
  color: var(--cf-primary);
}

.cf-sidebar__logo-mark {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cf-primary);
  color: #fff;
  border-radius: var(--cf-radius);
  font-size: var(--cf-text-xs);
  font-weight: var(--cf-font-bold);
  letter-spacing: 0.5px;
}

.cf-sidebar__close {
  margin-inline-start: auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cf-text-muted);
  border-radius: var(--cf-radius);
}
.cf-sidebar__close:hover {
  background: var(--cf-surface-alt);
  color: var(--cf-text);
}

.cf-sidebar__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--cf-space-3) 0;
}

/* Navigation section (primary nav) */
.cf-sidenav {
  display: flex;
  flex-direction: column;
  padding: 0 var(--cf-space-2);
  margin-bottom: var(--cf-space-4);
}

.cf-sidenav__section-title {
  font-size: var(--cf-text-xs);
  font-weight: var(--cf-font-semibold);
  color: var(--cf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--cf-space-2) var(--cf-space-3);
  margin-top: var(--cf-space-2);
}

.cf-sidenav__item {
  display: flex;
  align-items: center;
  gap: var(--cf-space-3);
  padding: var(--cf-space-2) var(--cf-space-3);
  font-size: var(--cf-text-base);
  color: var(--cf-text-secondary);
  border-radius: var(--cf-radius);
  cursor: pointer;
  transition: background-color var(--cf-transition),
              color var(--cf-transition);
  min-height: 40px;
  text-decoration: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: start;
  font-family: var(--cf-font);
  font-weight: var(--cf-font-medium);
}

.cf-sidenav__item:hover {
  background: var(--cf-primary-light);
  color: var(--cf-primary-dark);
}

.cf-sidenav__item.is-active {
  background: var(--cf-primary-light);
  color: var(--cf-primary-dark);
  font-weight: var(--cf-font-semibold);
}

.cf-sidenav__item .cf-icon {
  color: var(--cf-text-muted);
  flex-shrink: 0;
}
.cf-sidenav__item.is-active .cf-icon,
.cf-sidenav__item:hover .cf-icon {
  color: var(--cf-primary);
}

.cf-sidenav__count {
  margin-inline-start: auto;
  font-size: var(--cf-text-xs);
  color: var(--cf-text-muted);
  font-weight: var(--cf-font-normal);
}

.cf-sidenav__divider {
  height: 1px;
  background: var(--cf-border-light);
  margin: var(--cf-space-3) var(--cf-space-3);
}

/* Sites section (inside sidebar) */
.cf-sidesites {
  padding: 0 var(--cf-space-3);
}

.cf-sidesites__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--cf-space-2);
}

.cf-sidesites__title {
  font-size: var(--cf-text-xs);
  font-weight: var(--cf-font-semibold);
  color: var(--cf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cf-sidesites__search {
  margin-bottom: var(--cf-space-3);
}

.cf-sidesites__tabs {
  margin-bottom: var(--cf-space-3);
}

.cf-sidesites__group {
  margin-bottom: var(--cf-space-4);
}

.cf-sidesites__group-title {
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
  font-size: var(--cf-text-xs);
  font-weight: var(--cf-font-semibold);
  color: var(--cf-text-muted);
  margin-bottom: var(--cf-space-2);
  padding: 0 var(--cf-space-2);
}

.cf-sidesites__group-title .cf-icon {
  width: 12px;
  height: 12px;
  color: var(--cf-warning);
  fill: var(--cf-warning);
}

.cf-sidesites__toggle {
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
  width: 100%;
  padding: var(--cf-space-2);
  font-size: var(--cf-text-sm);
  font-weight: var(--cf-font-semibold);
  color: var(--cf-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--cf-radius);
  margin-bottom: var(--cf-space-1);
}
.cf-sidesites__toggle:hover { background: var(--cf-surface-alt); }

.cf-sidesites__toggle .cf-icon {
  transition: transform var(--cf-transition);
}
.cf-sidesites__toggle[aria-expanded="true"] .cf-icon {
  transform: rotate(180deg);
}

.cf-siteitem {
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
  padding: var(--cf-space-2);
  border-radius: var(--cf-radius);
  cursor: pointer;
  transition: background-color var(--cf-transition);
  font-size: var(--cf-text-sm);
  color: var(--cf-text);
  min-height: 36px;
}
.cf-siteitem:hover { background: var(--cf-surface-alt); }
.cf-siteitem.is-active {
  background: var(--cf-primary-light);
  color: var(--cf-primary-dark);
  font-weight: var(--cf-font-medium);
}

.cf-siteitem__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--cf-radius-sm);
  font-size: 10px;
  font-weight: var(--cf-font-bold);
  color: #fff;
  background: var(--cf-text-muted);
}

.cf-siteitem__icon--source  { background: var(--cf-stage-cleaned); }
.cf-siteitem__icon--target  { background: var(--cf-primary); }

.cf-siteitem__name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cf-siteitem__pin {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cf-text-muted);
  border-radius: var(--cf-radius-sm);
  opacity: 0;
  transition: opacity var(--cf-transition), color var(--cf-transition);
  flex-shrink: 0;
}
.cf-siteitem:hover .cf-siteitem__pin { opacity: 1; }
.cf-siteitem__pin:hover { color: var(--cf-warning); }
.cf-siteitem__pin.is-pinned {
  opacity: 1;
  color: var(--cf-warning);
  fill: var(--cf-warning);
}

.cf-sidesites__empty {
  padding: var(--cf-space-4) var(--cf-space-2);
  font-size: var(--cf-text-sm);
  color: var(--cf-text-muted);
  text-align: center;
  font-style: italic;
}

.cf-sidebar__footer {
  border-top: 1px solid var(--cf-border-light);
  padding: var(--cf-space-3) var(--cf-space-4);
  flex-shrink: 0;
}

.cf-sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--cf-space-3);
  padding: var(--cf-space-2);
  border-radius: var(--cf-radius);
  background: transparent;
  border: none;
  width: 100%;
  text-align: start;
  cursor: pointer;
  color: var(--cf-text);
  font-family: var(--cf-font);
  transition: background-color var(--cf-transition);
}
.cf-sidebar__user:hover { background: var(--cf-surface-alt); }

.cf-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--cf-radius-full);
  background: var(--cf-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--cf-font-semibold);
  font-size: var(--cf-text-sm);
  flex-shrink: 0;
  text-transform: uppercase;
}

.cf-sidebar__user-name {
  flex: 1 1 auto;
  font-size: var(--cf-text-sm);
  font-weight: var(--cf-font-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cf-sidebar__user-role {
  font-size: var(--cf-text-xs);
  color: var(--cf-text-muted);
}


/* ═══════════════════════════════════════════════════════════════════════════
   17. LAYOUT — MAIN CONTENT
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

.cf-topbar {
  position: sticky;
  top: 0;
  z-index: var(--cf-z-sticky);
  background: var(--cf-surface);
  border-bottom: 1px solid var(--cf-border);
  display: flex;
  align-items: center;
  gap: var(--cf-space-3);
  padding: 0 var(--cf-space-4);
  min-height: var(--cf-header-height);
  flex-shrink: 0;
}

.cf-topbar__menu {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cf-text);
  border-radius: var(--cf-radius);
}
.cf-topbar__menu:hover { background: var(--cf-surface-alt); }

.cf-topbar__title {
  font-size: var(--cf-text-md);
  font-weight: var(--cf-font-semibold);
  color: var(--cf-text);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cf-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
  flex-shrink: 0;
}

.cf-content {
  flex: 1 1 auto;
  padding: var(--cf-space-4);
  max-width: 100%;
  overflow-x: hidden;
}

.cf-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--cf-space-4);
  margin-bottom: var(--cf-space-5);
  flex-wrap: wrap;
}

.cf-page-title {
  font-size: var(--cf-text-xl);
  font-weight: var(--cf-font-bold);
  color: var(--cf-text);
  margin: 0;
}

.cf-page-subtitle {
  font-size: var(--cf-text-sm);
  color: var(--cf-text-secondary);
  margin-top: var(--cf-space-1);
}

.cf-page-actions {
  display: flex;
  gap: var(--cf-space-2);
  align-items: center;
  flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════════════════
   18. PAGE — LOGIN
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cf-space-4);
  background: var(--cf-bg);
}

.cf-login__card {
  width: 100%;
  max-width: 420px;
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-lg);
  padding: var(--cf-space-8) var(--cf-space-6);
  box-shadow: var(--cf-shadow-lg);
}

.cf-login__header {
  text-align: center;
  margin-bottom: var(--cf-space-6);
}

.cf-login__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--cf-primary);
  color: #fff;
  border-radius: var(--cf-radius-lg);
  margin-bottom: var(--cf-space-4);
  font-size: var(--cf-text-lg);
  font-weight: var(--cf-font-bold);
  letter-spacing: 0.5px;
}

.cf-login__title {
  font-size: var(--cf-text-xl);
  font-weight: var(--cf-font-bold);
  color: var(--cf-text);
  margin-bottom: var(--cf-space-2);
}

.cf-login__subtitle {
  font-size: var(--cf-text-sm);
  color: var(--cf-text-secondary);
}

.cf-login__form {
  display: flex;
  flex-direction: column;
  gap: var(--cf-space-4);
}

.cf-login__remember {
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
}

.cf-login__error {
  padding: var(--cf-space-3);
  background: var(--cf-error-bg);
  border: 1px solid var(--cf-error);
  border-radius: var(--cf-radius);
  color: var(--cf-error);
  font-size: var(--cf-text-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--cf-space-2);
}

.cf-login__footer {
  margin-top: var(--cf-space-6);
  text-align: center;
  font-size: var(--cf-text-xs);
  color: var(--cf-text-muted);
}


/* ═══════════════════════════════════════════════════════════════════════════
   19. PAGE — DASHBOARD
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-grid {
  display: grid;
  gap: var(--cf-space-4);
}

.cf-grid--stats {
  grid-template-columns: 1fr;
}

.cf-dashboard__section {
  margin-bottom: var(--cf-space-6);
}

.cf-dashboard__section-title {
  font-size: var(--cf-text-lg);
  font-weight: var(--cf-font-semibold);
  color: var(--cf-text);
  margin-bottom: var(--cf-space-4);
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
}

.cf-dashboard__stat-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cf-radius);
  background: var(--cf-primary-light);
  color: var(--cf-primary);
  flex-shrink: 0;
}

.cf-dashboard__stat-icon .cf-icon { width: 20px; height: 20px; }

.cf-dashboard__stat-icon--success { background: var(--cf-success-bg); color: var(--cf-success); }
.cf-dashboard__stat-icon--warning { background: var(--cf-warning-bg); color: var(--cf-warning); }
.cf-dashboard__stat-icon--info    { background: var(--cf-info-bg); color: var(--cf-primary); }

.cf-chart {
  width: 100%;
  min-height: 240px;
  display: block;
}

.cf-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cf-space-2);
  min-height: 240px;
  color: var(--cf-text-muted);
  font-size: var(--cf-text-sm);
}

.cf-chart__bar {
  fill: var(--cf-primary);
  transition: fill var(--cf-transition);
  cursor: pointer;
}
.cf-chart__bar:hover { fill: var(--cf-primary-hover); }

.cf-chart__axis {
  stroke: var(--cf-border);
  stroke-width: 1;
}

.cf-chart__grid {
  stroke: var(--cf-border-light);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.cf-chart__label {
  fill: var(--cf-text-secondary);
  font-size: 11px;
  font-family: var(--cf-font);
}

.cf-chart__value {
  fill: var(--cf-text);
  font-size: 11px;
  font-weight: var(--cf-font-semibold);
  font-family: var(--cf-font);
}

/* Recent list (used in Dashboard for last articles / errors) */
.cf-recent {
  display: flex;
  flex-direction: column;
}

.cf-recent__item {
  display: flex;
  align-items: center;
  gap: var(--cf-space-3);
  padding: var(--cf-space-3) 0;
  border-bottom: 1px solid var(--cf-border-light);
  min-height: 48px;
}
.cf-recent__item:last-child { border-bottom: none; }

.cf-recent__icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cf-radius-full);
  background: var(--cf-surface-alt);
  color: var(--cf-text-muted);
  flex-shrink: 0;
}

.cf-recent__body {
  flex: 1 1 auto;
  min-width: 0;
}

.cf-recent__title {
  font-size: var(--cf-text-base);
  font-weight: var(--cf-font-medium);
  color: var(--cf-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cf-recent__meta {
  font-size: var(--cf-text-xs);
  color: var(--cf-text-muted);
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
  margin-top: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   20. PAGE — PLACEHOLDER (for routes not yet built)
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-placeholder {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cf-space-4);
  padding: var(--cf-space-8);
  background: var(--cf-surface);
  border: 2px dashed var(--cf-border);
  border-radius: var(--cf-radius-lg);
  text-align: center;
}

.cf-placeholder__icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cf-radius-full);
  background: var(--cf-primary-light);
  color: var(--cf-primary);
}
.cf-placeholder__icon .cf-icon { width: 32px; height: 32px; }

.cf-placeholder__title {
  font-size: var(--cf-text-lg);
  font-weight: var(--cf-font-semibold);
  color: var(--cf-text);
}

.cf-placeholder__text {
  font-size: var(--cf-text-sm);
  color: var(--cf-text-secondary);
  max-width: 400px;
}

.cf-placeholder__badge {
  padding: var(--cf-space-1) var(--cf-space-3);
  background: var(--cf-warning-bg);
  color: var(--cf-warning-dark);
  border-radius: var(--cf-radius-full);
  font-size: var(--cf-text-xs);
  font-weight: var(--cf-font-medium);
}


/* ═══════════════════════════════════════════════════════════════════════════
   21. EMPTY & ERROR STATES
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--cf-space-8) var(--cf-space-4);
  text-align: center;
  gap: var(--cf-space-3);
  color: var(--cf-text-muted);
}

.cf-empty__icon {
  width: 48px;
  height: 48px;
  color: var(--cf-text-muted);
}

.cf-empty__title {
  font-size: var(--cf-text-md);
  font-weight: var(--cf-font-semibold);
  color: var(--cf-text-secondary);
}

.cf-empty__text {
  font-size: var(--cf-text-sm);
  max-width: 320px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   22. RESPONSIVE — TABLET & DESKTOP (Mobile-first)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet: 768px+ */
@media (min-width: 768px) {
  .cf-content {
    padding: var(--cf-space-5) var(--cf-space-6);
  }

  .cf-grid--stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .cf-modal {
    max-height: 85vh;
  }

  .cf-hide-tablet { display: none; }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  /* Sidebar becomes permanent */
  .cf-sidebar {
    position: sticky;
    transform: none !important;
    top: 0;
    height: 100vh;
    align-self: flex-start;
    inset-inline-start: auto;
  }

  .cf-sidebar__backdrop { display: none; }

  .cf-sidebar__close,
  .cf-topbar__menu {
    display: none;
  }

  .cf-main { min-width: 0; }

  .cf-hide-desktop { display: none; }
  .cf-hide-mobile  { display: initial; }

  .cf-content {
    padding: var(--cf-space-6) var(--cf-space-8);
  }

  .cf-grid--stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .cf-dashboard__split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--cf-space-5);
  }
}

/* Wide: 1280px+ */
@media (min-width: 1280px) {
  .cf-content {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
  }
}

/* Mobile only fixes (touch targets) */
@media (max-width: 767px) {
  .cf-btn {
    min-height: 44px;
  }
  .cf-btn--sm {
    min-height: 36px;
  }
  .cf-input,
  .cf-textarea,
  .cf-select {
    min-height: 44px;
    font-size: 16px;  /* critical iOS no-zoom */
  }
  .cf-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .cf-modal-backdrop {
    padding: 0;
  }
  .cf-topbar { padding: 0 var(--cf-space-3); }
  .cf-page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .cf-page-actions {
    width: 100%;
  }
  .cf-page-actions .cf-btn {
    flex: 1 1 auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   23. ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

:focus-visible {
  outline: 2px solid var(--cf-primary);
  outline-offset: 2px;
}

.cf-input:focus-visible,
.cf-textarea:focus-visible,
.cf-select:focus-visible {
  outline: none; /* handled via box-shadow above */
}


/* ═══════════════════════════════════════════════════════════════════════════
   24. ARTICLES LIST — Filters Bar
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-filters {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-md);
  padding: var(--cf-space-3) var(--cf-space-4);
  margin-bottom: var(--cf-space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cf-space-3);
  align-items: center;
}

.cf-filters__group {
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
  flex: 0 1 auto;
}

.cf-filters__search {
  flex: 1 1 240px;
  min-width: 180px;
}

.cf-filters__select,
.cf-filters__input {
  min-width: 140px;
  height: 36px;
  padding: var(--cf-space-1) var(--cf-space-3);
  font-size: var(--cf-text-sm);
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  color: var(--cf-text);
  font-family: var(--cf-font);
}
.cf-filters__select:focus,
.cf-filters__input:focus {
  outline: none;
  border-color: var(--cf-primary);
  box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);
}

.cf-filters__range {
  display: flex;
  align-items: center;
  gap: var(--cf-space-1);
}
.cf-filters__range input {
  width: 72px;
  text-align: center;
}
.cf-filters__range-sep {
  color: var(--cf-text-muted);
  font-size: var(--cf-text-sm);
}

.cf-filters__label {
  font-size: var(--cf-text-sm);
  color: var(--cf-text-secondary);
  font-weight: var(--cf-font-medium);
  white-space: nowrap;
}

.cf-filters__count {
  font-size: var(--cf-text-sm);
  color: var(--cf-text-secondary);
  margin-inline-start: auto;
  padding: var(--cf-space-1) var(--cf-space-3);
  background: var(--cf-surface-alt);
  border-radius: var(--cf-radius);
  font-variant-numeric: tabular-nums;
}

.cf-filters__saved {
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
  padding-inline-end: var(--cf-space-3);
  border-inline-end: 1px solid var(--cf-border-light);
}

/* Advanced filters drawer (toggled) */
.cf-filters--advanced-hidden .cf-filters__advanced { display: none; }

.cf-filters__advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-space-1);
  font-size: var(--cf-text-sm);
  color: var(--cf-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--cf-space-1) var(--cf-space-2);
  border-radius: var(--cf-radius);
}
.cf-filters__advanced-toggle:hover {
  background: var(--cf-primary-light);
}

@media (max-width: 767px) {
  .cf-filters {
    padding: var(--cf-space-3);
    gap: var(--cf-space-2);
  }
  .cf-filters__select,
  .cf-filters__input {
    min-width: 0;
    width: 100%;
    height: 44px;
    font-size: 16px;
  }
  .cf-filters__group {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .cf-filters__count {
    width: 100%;
    text-align: center;
    margin: 0;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   25. ARTICLES LIST — Table (Desktop)
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-table-wrap {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-md);
  overflow: hidden;
  box-shadow: var(--cf-shadow-sm);
}

.cf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cf-text-sm);
  font-variant-numeric: lining-nums tabular-nums;
}

.cf-table thead {
  background: var(--cf-surface-alt);
  border-bottom: 1px solid var(--cf-border);
}

.cf-table th {
  padding: var(--cf-space-3) var(--cf-space-3);
  text-align: start;
  font-size: var(--cf-text-xs);
  font-weight: var(--cf-font-semibold);
  color: var(--cf-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
}

.cf-table th.is-sortable {
  cursor: pointer;
}
.cf-table th.is-sortable:hover {
  color: var(--cf-text);
}
.cf-table th.is-sorted {
  color: var(--cf-primary);
}

.cf-table th__sort-icon {
  margin-inline-start: 4px;
  opacity: 0.5;
}
.cf-table th.is-sorted .cf-table th__sort-icon,
.cf-table th.is-sorted-asc .cf-table th__sort-icon,
.cf-table th.is-sorted-desc .cf-table th__sort-icon {
  opacity: 1;
}

.cf-table td {
  padding: var(--cf-space-3) var(--cf-space-3);
  vertical-align: middle;
  border-bottom: 1px solid var(--cf-border-light);
  color: var(--cf-text);
}

.cf-table tbody tr {
  transition: background-color var(--cf-transition-fast);
}
.cf-table tbody tr:hover {
  background: var(--cf-primary-light);
  cursor: pointer;
}
.cf-table tbody tr.is-selected {
  background: var(--cf-primary-light);
}
.cf-table tbody tr.is-selected td {
  border-bottom-color: var(--cf-primary);
}

.cf-table__checkbox-cell {
  width: 40px;
  padding-inline-end: 0 !important;
}

.cf-table__title {
  font-weight: var(--cf-font-medium);
  color: var(--cf-text);
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}

.cf-table__title-meta {
  display: block;
  font-size: var(--cf-text-xs);
  color: var(--cf-text-muted);
  font-weight: var(--cf-font-normal);
  margin-top: 2px;
  white-space: nowrap;
}

.cf-table__cell-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  color: var(--cf-text-secondary);
}

.cf-table__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--cf-space-1);
}

.cf-table__actions button {
  width: 32px;
  height: 32px;
  border-radius: var(--cf-radius);
  background: transparent;
  border: none;
  color: var(--cf-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--cf-transition);
}
.cf-table__actions button:hover {
  background: var(--cf-surface-alt);
  color: var(--cf-text);
}
.cf-table__actions button.cf-danger:hover {
  background: var(--cf-error-bg);
  color: var(--cf-error);
}

/* Empty state for table */
.cf-table-empty {
  padding: var(--cf-space-12) var(--cf-space-4);
  text-align: center;
  color: var(--cf-text-muted);
}

/* Article card for mobile */
.cf-artcard {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-md);
  padding: var(--cf-space-3);
  margin-bottom: var(--cf-space-2);
  display: flex;
  gap: var(--cf-space-3);
  cursor: pointer;
  transition: border-color var(--cf-transition);
}
.cf-artcard:hover { border-color: var(--cf-primary); }
.cf-artcard.is-selected {
  border-color: var(--cf-primary);
  background: var(--cf-primary-light);
}

.cf-artcard__checkbox {
  flex-shrink: 0;
  margin-top: 2px;
}

.cf-artcard__body { flex: 1 1 auto; min-width: 0; }

.cf-artcard__title {
  font-size: var(--cf-text-base);
  font-weight: var(--cf-font-medium);
  color: var(--cf-text);
  margin-bottom: var(--cf-space-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cf-artcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cf-space-2);
  align-items: center;
  font-size: var(--cf-text-xs);
  color: var(--cf-text-muted);
}
.cf-artcard__meta-sep {
  color: var(--cf-border);
}

@media (min-width: 768px) {
  .cf-artcard { display: none; }
}
@media (max-width: 767px) {
  .cf-table-wrap { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   26. PAGINATION
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cf-space-3);
  padding: var(--cf-space-3) var(--cf-space-4);
  flex-wrap: wrap;
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-top: none;
  border-radius: 0 0 var(--cf-radius-md) var(--cf-radius-md);
}

.cf-pagination__info {
  font-size: var(--cf-text-sm);
  color: var(--cf-text-secondary);
  font-variant-numeric: tabular-nums;
}

.cf-pagination__controls {
  display: flex;
  align-items: center;
  gap: var(--cf-space-1);
}

.cf-pagination__btn {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--cf-space-2);
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  color: var(--cf-text);
  cursor: pointer;
  font-size: var(--cf-text-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--cf-transition);
  font-variant-numeric: tabular-nums;
}
.cf-pagination__btn:hover:not(:disabled) {
  border-color: var(--cf-primary);
  color: var(--cf-primary);
}
.cf-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cf-pagination__btn.is-active {
  background: var(--cf-primary);
  color: #fff;
  border-color: var(--cf-primary);
  cursor: default;
}


/* ═══════════════════════════════════════════════════════════════════════════
   27. BULK ACTIONS BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-bulkbar {
  position: sticky;
  top: var(--cf-header-height);
  z-index: var(--cf-z-sticky);
  background: var(--cf-primary);
  color: #fff;
  border-radius: var(--cf-radius-md);
  padding: var(--cf-space-3) var(--cf-space-4);
  margin-bottom: var(--cf-space-3);
  display: flex;
  align-items: center;
  gap: var(--cf-space-3);
  box-shadow: var(--cf-shadow-md);
  animation: cf-slideUp 0.15s ease;
  flex-wrap: wrap;
}

.cf-bulkbar__count {
  font-weight: var(--cf-font-semibold);
  font-variant-numeric: tabular-nums;
}

.cf-bulkbar__actions {
  display: flex;
  gap: var(--cf-space-2);
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.cf-bulkbar__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-space-1);
  padding: var(--cf-space-1) var(--cf-space-3);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--cf-radius);
  cursor: pointer;
  font-size: var(--cf-text-sm);
  font-weight: var(--cf-font-medium);
  transition: background-color var(--cf-transition);
  min-height: 32px;
  font-family: var(--cf-font);
}
.cf-bulkbar__btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.cf-bulkbar__btn--danger:hover {
  background: var(--cf-error);
  border-color: var(--cf-error);
}

.cf-bulkbar__close {
  margin-inline-start: auto;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  border-radius: var(--cf-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cf-bulkbar__close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}


/* ═══════════════════════════════════════════════════════════════════════════
   28. ARTICLE MODAL (Detail View)
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-art-modal__body {
  padding: 0;
}

.cf-art-hero {
  padding: var(--cf-space-5);
  background: linear-gradient(to bottom, var(--cf-primary-light), var(--cf-surface));
  border-bottom: 1px solid var(--cf-border-light);
}

.cf-art-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cf-space-2);
  margin-bottom: var(--cf-space-3);
  font-size: var(--cf-text-xs);
}

.cf-art-hero__title {
  font-size: var(--cf-text-lg);
  font-weight: var(--cf-font-semibold);
  color: var(--cf-text);
  line-height: 1.4;
  margin: 0 0 var(--cf-space-2);
}

.cf-art-hero__subtitle {
  font-size: var(--cf-text-sm);
  color: var(--cf-text-secondary);
  line-height: 1.6;
}

.cf-art-sections {
  padding: var(--cf-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--cf-space-5);
}

.cf-art-section {
  display: flex;
  flex-direction: column;
  gap: var(--cf-space-2);
}

.cf-art-section__title {
  font-size: var(--cf-text-sm);
  font-weight: var(--cf-font-semibold);
  color: var(--cf-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
}

.cf-art-section__body {
  font-size: var(--cf-text-base);
  color: var(--cf-text);
  line-height: 1.6;
}

.cf-art-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cf-space-3);
}

@media (min-width: 640px) {
  .cf-art-stats { grid-template-columns: repeat(4, 1fr); }
}

.cf-art-stat {
  padding: var(--cf-space-3);
  background: var(--cf-surface-alt);
  border-radius: var(--cf-radius);
  text-align: center;
}

.cf-art-stat__num {
  font-size: var(--cf-text-lg);
  font-weight: var(--cf-font-bold);
  color: var(--cf-text);
  font-variant-numeric: tabular-nums;
}

.cf-art-stat__label {
  font-size: var(--cf-text-xs);
  color: var(--cf-text-secondary);
  margin-top: 2px;
}

.cf-art-content {
  max-height: 400px;
  overflow-y: auto;
  padding: var(--cf-space-3);
  background: var(--cf-surface-alt);
  border-radius: var(--cf-radius);
  font-size: var(--cf-text-sm);
  line-height: 1.6;
  border: 1px solid var(--cf-border-light);
}

.cf-art-content p { margin-bottom: var(--cf-space-3); }
.cf-art-content h1,
.cf-art-content h2,
.cf-art-content h3 { margin-top: var(--cf-space-3); margin-bottom: var(--cf-space-2); }

/* Status selector */
.cf-status-select {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-space-2);
}


/* ═══════════════════════════════════════════════════════════════════════════
   29. KANBAN BOARD
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-kanban {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Tabs view on mobile */
.cf-kanban__tabs {
  display: flex;
  overflow-x: auto;
  gap: var(--cf-space-1);
  padding: 0 var(--cf-space-1);
  border-bottom: 1px solid var(--cf-border);
  margin-bottom: var(--cf-space-3);
  scrollbar-width: none;
}
.cf-kanban__tabs::-webkit-scrollbar { display: none; }

.cf-kanban__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-space-2);
  padding: var(--cf-space-3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--cf-font);
  font-size: var(--cf-text-sm);
  font-weight: var(--cf-font-medium);
  color: var(--cf-text-secondary);
  white-space: nowrap;
  min-height: 44px;
  transition: color var(--cf-transition), border-color var(--cf-transition);
}
.cf-kanban__tab[aria-selected="true"] {
  color: var(--cf-primary);
  border-bottom-color: var(--cf-primary);
}

.cf-kanban__tab-count {
  font-size: var(--cf-text-xs);
  padding: 1px var(--cf-space-2);
  background: var(--cf-surface-alt);
  border-radius: var(--cf-radius-full);
  font-variant-numeric: tabular-nums;
}

/* Columns grid */
.cf-kanban__cols {
  display: flex;
  gap: var(--cf-space-3);
  min-height: 60vh;
  overflow-x: auto;
  padding-bottom: var(--cf-space-3);
}

.cf-kanban__col {
  background: var(--cf-surface-alt);
  border-radius: var(--cf-radius-md);
  display: flex;
  flex-direction: column;
  min-width: 260px;
  max-height: 75vh;
  transition: background-color var(--cf-transition);
}

.cf-kanban__col.is-drag-over {
  background: var(--cf-primary-light);
  outline: 2px dashed var(--cf-primary);
  outline-offset: -4px;
}

.cf-kanban__col-header {
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
  padding: var(--cf-space-3);
  border-bottom: 1px solid var(--cf-border-light);
  flex-shrink: 0;
}

.cf-kanban__col-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--cf-radius-full);
  flex-shrink: 0;
}

.cf-kanban__col-title {
  font-size: var(--cf-text-sm);
  font-weight: var(--cf-font-semibold);
  color: var(--cf-text);
  flex: 1 1 auto;
}

.cf-kanban__col-count {
  font-size: var(--cf-text-xs);
  color: var(--cf-text-muted);
  background: var(--cf-surface);
  padding: 2px var(--cf-space-2);
  border-radius: var(--cf-radius-full);
  font-variant-numeric: tabular-nums;
}

.cf-kanban__col-body {
  padding: var(--cf-space-2);
  overflow-y: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--cf-space-2);
}

.cf-kcard {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  padding: var(--cf-space-3);
  cursor: grab;
  transition: border-color var(--cf-transition),
              box-shadow var(--cf-transition),
              opacity var(--cf-transition);
  user-select: none;
}
.cf-kcard:hover {
  border-color: var(--cf-primary);
  box-shadow: var(--cf-shadow-sm);
}
.cf-kcard:active { cursor: grabbing; }
.cf-kcard.is-dragging { opacity: 0.4; }

.cf-kcard__title {
  font-size: var(--cf-text-sm);
  font-weight: var(--cf-font-medium);
  color: var(--cf-text);
  line-height: 1.4;
  margin-bottom: var(--cf-space-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cf-kcard__meta {
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
  font-size: var(--cf-text-xs);
  color: var(--cf-text-muted);
  flex-wrap: wrap;
}

.cf-kanban-empty {
  padding: var(--cf-space-6) var(--cf-space-3);
  text-align: center;
  font-size: var(--cf-text-xs);
  color: var(--cf-text-muted);
  font-style: italic;
}

/* Desktop Kanban — 7 columns visible */
@media (min-width: 1280px) {
  .cf-kanban__tabs { display: none; }
  .cf-kanban__col { min-width: 0; flex: 1 1 0; }
  .cf-kanban__cols { overflow-x: visible; }
}

/* Tablet — show 4 cols with horizontal scroll */
@media (min-width: 768px) and (max-width: 1279px) {
  .cf-kanban__tabs { display: none; }
  .cf-kanban__col { flex: 0 0 280px; }
}

/* Mobile — one column at a time via tabs */
@media (max-width: 767px) {
  .cf-kanban__cols {
    overflow-x: hidden;
    min-height: auto;
  }
  .cf-kanban__col {
    min-width: 0;
    width: 100%;
    flex: 1 1 auto;
    max-height: none;
    display: none;
  }
  .cf-kanban__col.is-active-tab {
    display: flex;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   30. SAVED FILTERS (dropdown)
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-saved-filters {
  position: relative;
}

.cf-saved-filters__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-space-1);
  padding: var(--cf-space-1) var(--cf-space-3);
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  font-size: var(--cf-text-sm);
  color: var(--cf-text);
  cursor: pointer;
  min-height: 36px;
  font-family: var(--cf-font);
}
.cf-saved-filters__btn:hover { border-color: var(--cf-primary); }

.cf-saved-filters__menu {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  min-width: 260px;
  max-width: 320px;
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-md);
  box-shadow: var(--cf-shadow-md);
  padding: var(--cf-space-1);
  z-index: var(--cf-z-dropdown);
}

.cf-saved-filters__item {
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
  padding: var(--cf-space-2) var(--cf-space-3);
  border-radius: var(--cf-radius);
  cursor: pointer;
  font-size: var(--cf-text-sm);
  color: var(--cf-text);
  transition: background-color var(--cf-transition);
}
.cf-saved-filters__item:hover {
  background: var(--cf-surface-alt);
}

.cf-saved-filters__name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cf-saved-filters__delete {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cf-text-muted);
  background: none;
  border: none;
  border-radius: var(--cf-radius-sm);
  cursor: pointer;
  opacity: 0;
  flex-shrink: 0;
}
.cf-saved-filters__item:hover .cf-saved-filters__delete { opacity: 1; }
.cf-saved-filters__delete:hover {
  color: var(--cf-error);
  background: var(--cf-error-bg);
}

.cf-saved-filters__empty {
  padding: var(--cf-space-3);
  color: var(--cf-text-muted);
  font-size: var(--cf-text-sm);
  text-align: center;
  font-style: italic;
}

.cf-saved-filters__divider {
  height: 1px;
  background: var(--cf-border-light);
  margin: var(--cf-space-1) 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   31. CHECKBOX (styled)
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-check {
  width: 18px;
  height: 18px;
  accent-color: var(--cf-primary);
  cursor: pointer;
}

@media (max-width: 767px) {
  .cf-check { width: 22px; height: 22px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   32. KANBAN — Load More / View All (clickable!)
   ═══════════════════════════════════════════════════════════════════════════ */

.cf-kcol-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cf-space-1);
  width: 100%;
  padding: var(--cf-space-3);
  background: var(--cf-primary-light);
  color: var(--cf-primary-dark);
  border: 1px dashed var(--cf-primary);
  border-radius: var(--cf-radius);
  font-family: var(--cf-font);
  font-size: var(--cf-text-sm);
  font-weight: var(--cf-font-medium);
  cursor: pointer;
  margin-top: var(--cf-space-2);
  transition: background-color var(--cf-transition);
}
.cf-kcol-more:hover {
  background: var(--cf-primary);
  color: #fff;
  border-color: var(--cf-primary);
}
.cf-kcol-more__hint {
  font-size: var(--cf-text-xs);
  opacity: 0.75;
  font-weight: var(--cf-font-normal);
}

.cf-kcol-cap {
  padding: var(--cf-space-3);
  background: var(--cf-warning-bg);
  border: 1px solid var(--cf-warning);
  border-radius: var(--cf-radius);
  margin-top: var(--cf-space-2);
  text-align: center;
}
.cf-kcol-cap__text {
  font-size: var(--cf-text-xs);
  color: var(--cf-warning-dark);
  margin-bottom: var(--cf-space-2);
  font-weight: var(--cf-font-medium);
}

.cf-kcol-viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cf-space-1);
  padding: var(--cf-space-2);
  margin-top: var(--cf-space-2);
  font-size: var(--cf-text-xs);
  color: var(--cf-text-secondary);
  background: transparent;
  border: 1px dashed var(--cf-border);
  border-radius: var(--cf-radius);
  text-decoration: none;
  transition: all var(--cf-transition);
}
.cf-kcol-viewall:hover {
  color: var(--cf-primary);
  border-color: var(--cf-primary);
  background: var(--cf-primary-light);
}