/*
Theme Name:   ConstructFlow Theme
Theme URI:    https://constructflow.ro
Description:  Tema child pentru Astra — optimizata pentru platforma ConstructFlow de management al proiectelor de constructii.
Author:       ConstructFlow
Author URI:   https://constructflow.ro
Template:     astra
Version:      1.0.0
Text Domain:  constructflow-theme
License:      GPL v2 or later
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  /* Brand */
  --cf-navy-900: #0d1f35;
  --cf-navy-800: #1e3a5f;
  --cf-navy-700: #254a78;
  --cf-navy-600: #2d5a91;
  --cf-navy-100: #dce8f5;
  --cf-navy-50:  #eef4fb;

  --cf-orange-600: #ea6c0a;
  --cf-orange-500: #f97316;
  --cf-orange-400: #fb923c;
  --cf-orange-100: #ffedd5;
  --cf-orange-50:  #fff7ed;

  /* Neutrals */
  --cf-gray-900: #0f172a;
  --cf-gray-800: #1e293b;
  --cf-gray-700: #334155;
  --cf-gray-600: #475569;
  --cf-gray-500: #64748b;
  --cf-gray-400: #94a3b8;
  --cf-gray-300: #cbd5e1;
  --cf-gray-200: #e2e8f0;
  --cf-gray-100: #f1f5f9;
  --cf-gray-50:  #f8fafc;
  --cf-white:    #ffffff;

  /* Semantic */
  --cf-green-600: #16a34a;
  --cf-green-100: #dcfce7;
  --cf-red-600:   #dc2626;
  --cf-red-100:   #fee2e2;
  --cf-amber-600: #d97706;
  --cf-amber-100: #fef3c7;
  --cf-blue-600:  #2563eb;
  --cf-blue-100:  #dbeafe;

  /* Typography */
  --cf-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cf-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --cf-radius-sm: 4px;
  --cf-radius:    8px;
  --cf-radius-lg: 12px;
  --cf-radius-xl: 16px;

  /* Shadows */
  --cf-shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.1);
  --cf-shadow:    0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.07);
  --cf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.06);

  /* Layout */
  --cf-sidebar-w: 260px;
  --cf-header-h:  60px;
}

/* =========================================================
   ASTRA OVERRIDES — hide default header/footer on CF pages
   ========================================================= */
body.cf-fullpage .ast-header-wrap,
body.cf-fullpage .footer-widget-area,
body.cf-fullpage .site-footer,
body.cf-fullpage .ast-above-header,
body.cf-fullpage .ast-below-header,
body.cf-fullpage #comments { display: none !important; }

body.cf-fullpage { background: var(--cf-gray-100) !important; }
body.cf-fullpage .entry-content { padding: 0 !important; margin: 0 !important; }
body.cf-fullpage .ast-container { max-width: 100% !important; padding: 0 !important; }
body.cf-fullpage .site-content { padding: 0 !important; }

/* =========================================================
   CF APP SHELL
   ========================================================= */
#cf-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--cf-font);
  background: var(--cf-gray-100);
  color: var(--cf-gray-900);
}

/* ---- Top Header Bar ---- */
#cf-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--cf-header-h);
  background: var(--cf-navy-800);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  z-index: 1000;
  gap: 1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}

.cf-topbar-logo {
  display: flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  color: var(--cf-white);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.cf-topbar-logo .cf-logo-icon {
  width: 30px; height: 30px;
  background: var(--cf-orange-500);
  border-radius: var(--cf-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

.cf-topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 1rem;
  flex: 1;
}
.cf-topbar-nav a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: .8125rem;
  font-weight: 500;
  padding: .375rem .75rem;
  border-radius: var(--cf-radius-sm);
  transition: all .15s;
}
.cf-topbar-nav a:hover,
.cf-topbar-nav a.active { color: #fff; background: rgba(255,255,255,.1); }

.cf-topbar-right {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
}
.cf-notif-bell {
  position: relative;
  width: 34px; height: 34px;
  border-radius: var(--cf-radius);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,.8);
  font-size: 16px;
  transition: background .15s;
}
.cf-notif-bell:hover { background: rgba(255,255,255,.15); }
.cf-notif-badge {
  position: absolute;
  top: -3px; right: -3px;
  width: 16px; height: 16px;
  background: var(--cf-orange-500);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}

.cf-user-menu {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  padding: .3rem .625rem;
  border-radius: var(--cf-radius);
  transition: background .15s;
}
.cf-user-menu:hover { background: rgba(255,255,255,.1); }
.cf-user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cf-orange-500);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
}
.cf-user-name { font-size: .8125rem; color: rgba(255,255,255,.85); }
.cf-user-role-tag {
  font-size: .6875rem;
  color: rgba(255,255,255,.5);
}

/* ---- Main layout with sidebar ---- */
#cf-layout {
  display: flex;
  margin-top: var(--cf-header-h);
  min-height: calc(100vh - var(--cf-header-h));
}

/* ---- Sidebar ---- */
#cf-sidebar {
  width: var(--cf-sidebar-w);
  flex-shrink: 0;
  background: var(--cf-white);
  border-right: 1px solid var(--cf-gray-200);
  position: fixed;
  top: var(--cf-header-h);
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 900;
  display: flex;
  flex-direction: column;
}

.cf-sidebar-section {
  padding: 1rem .75rem .5rem;
}
.cf-sidebar-section-label {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cf-gray-400);
  padding: 0 .5rem;
  margin-bottom: .375rem;
}

.cf-sidebar-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .75rem;
  border-radius: var(--cf-radius);
  cursor: pointer;
  color: var(--cf-gray-700);
  font-size: .875rem;
  font-weight: 450;
  text-decoration: none;
  transition: all .12s;
  margin-bottom: 1px;
  border: 1px solid transparent;
}
.cf-sidebar-item:hover {
  background: var(--cf-gray-100);
  color: var(--cf-gray-900);
  text-decoration: none;
}
.cf-sidebar-item.active {
  background: var(--cf-navy-50);
  color: var(--cf-navy-800);
  border-color: var(--cf-navy-100);
  font-weight: 600;
}
.cf-sidebar-item .cf-si-icon {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.cf-sidebar-item .cf-si-badge {
  margin-left: auto;
  font-size: .6875rem;
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: 10px;
  background: var(--cf-orange-100);
  color: var(--cf-orange-600);
}

.cf-sidebar-divider { height: 1px; background: var(--cf-gray-200); margin: .5rem .75rem; }

/* ---- Main content ---- */
#cf-main {
  margin-left: var(--cf-sidebar-w);
  flex: 1;
  padding: 1.75rem;
  min-width: 0;
}

/* =========================================================
   PAGE HEADERS
   ========================================================= */
.cf-page-header {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.cf-page-header h1 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--cf-navy-800);
  margin: 0 0 .25rem;
  line-height: 1.2;
}
.cf-page-header .cf-subtitle {
  font-size: .875rem;
  color: var(--cf-gray-500);
  margin: 0;
}
.cf-page-actions { display: flex; gap: .625rem; align-items: center; flex-wrap: wrap; }

/* =========================================================
   STAT CARDS (Manager dashboard)
   ========================================================= */
.cf-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.cf-stat-card {
  background: var(--cf-white);
  border: 1px solid var(--cf-gray-200);
  border-radius: var(--cf-radius-lg);
  padding: 1.25rem;
  box-shadow: var(--cf-shadow-sm);
}
.cf-stat-card .cf-sc-label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cf-gray-500);
  margin-bottom: .5rem;
}
.cf-stat-card .cf-sc-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--cf-navy-800);
  line-height: 1;
  margin-bottom: .25rem;
}
.cf-stat-card .cf-sc-sub {
  font-size: .8125rem;
  color: var(--cf-gray-500);
}
.cf-stat-card.accent-orange { border-top: 3px solid var(--cf-orange-500); }
.cf-stat-card.accent-green  { border-top: 3px solid var(--cf-green-600); }
.cf-stat-card.accent-red    { border-top: 3px solid var(--cf-red-600); }
.cf-stat-card.accent-blue   { border-top: 3px solid var(--cf-blue-600); }

/* =========================================================
   PROJECT CARDS
   ========================================================= */
.cf-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  gap: 1rem;
}
.cf-project-card {
  background: var(--cf-white);
  border: 1px solid var(--cf-gray-200);
  border-radius: var(--cf-radius-lg);
  padding: 1.25rem;
  cursor: pointer;
  transition: all .15s;
  box-shadow: var(--cf-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.cf-project-card:hover {
  border-color: var(--cf-navy-600);
  box-shadow: var(--cf-shadow);
  transform: translateY(-1px);
}
.cf-project-card .cf-pc-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.cf-project-card .cf-pc-name   { font-size: 1rem; font-weight: 700; color: var(--cf-navy-800); line-height: 1.3; }
.cf-project-card .cf-pc-type   { font-size: .8125rem; color: var(--cf-gray-500); }
.cf-project-card .cf-pc-loc    { font-size: .8125rem; color: var(--cf-gray-600); display: flex; align-items: center; gap: .3rem; }
.cf-project-card .cf-pc-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.cf-project-card .cf-pc-date   { font-size: .75rem; color: var(--cf-gray-400); }

/* =========================================================
   BADGES / PILLS
   ========================================================= */
.cf-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .6875rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 20px;
  white-space: nowrap;
}
.cf-badge-activ      { background: var(--cf-green-100);  color: var(--cf-green-600); }
.cf-badge-finalizat  { background: var(--cf-blue-100);   color: var(--cf-blue-600); }
.cf-badge-suspendat  { background: var(--cf-amber-100);  color: var(--cf-amber-600); }
.cf-badge-blocat     { background: var(--cf-red-100);    color: var(--cf-red-600); }
.cf-badge-in_progres { background: var(--cf-orange-100); color: var(--cf-orange-600); }
.cf-badge-in_asteptare { background: var(--cf-gray-100); color: var(--cf-gray-600); }
.cf-badge-warn       { background: var(--cf-amber-100);  color: var(--cf-amber-600); }
.cf-badge-error      { background: var(--cf-red-100);    color: var(--cf-red-600); }

/* =========================================================
   PROGRESS BAR
   ========================================================= */
.cf-progress {
  height: 6px;
  background: var(--cf-gray-200);
  border-radius: 3px;
  overflow: hidden;
}
.cf-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cf-navy-700), var(--cf-navy-600));
  border-radius: 3px;
  transition: width .5s ease;
}
.cf-progress-fill.green  { background: linear-gradient(90deg, var(--cf-green-600), #22c55e); }
.cf-progress-fill.orange { background: linear-gradient(90deg, var(--cf-orange-600), var(--cf-orange-400)); }

/* =========================================================
   STAGES LIST
   ========================================================= */
.cf-stages-list { display: flex; flex-direction: column; gap: .5rem; }
.cf-stage-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--cf-white);
  border: 1px solid var(--cf-gray-200);
  border-radius: var(--cf-radius-lg);
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: all .15s;
  box-shadow: var(--cf-shadow-sm);
}
.cf-stage-row:hover:not(.is-locked) {
  border-color: var(--cf-navy-600);
  box-shadow: var(--cf-shadow);
}
.cf-stage-row.is-locked {
  opacity: .55;
  cursor: not-allowed;
  background: var(--cf-gray-50);
}
.cf-stage-row.is-done   { border-left: 3px solid var(--cf-green-600); }
.cf-stage-row.is-active { border-left: 3px solid var(--cf-orange-500); }

.cf-stage-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cf-navy-800);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .8125rem;
  font-weight: 700;
  flex-shrink: 0;
}
.cf-stage-row.is-done .cf-stage-num  { background: var(--cf-green-600); }
.cf-stage-row.is-active .cf-stage-num { background: var(--cf-orange-500); }
.cf-stage-row.is-locked .cf-stage-num { background: var(--cf-gray-400); }

.cf-stage-info { flex: 1; min-width: 0; }
.cf-stage-info .cf-name  { font-weight: 700; font-size: .9375rem; color: var(--cf-gray-900); }
.cf-stage-info .cf-meta  { font-size: .8125rem; color: var(--cf-gray-500); margin-top: .125rem; }

.cf-stage-right { display: flex; flex-direction: column; align-items: flex-end; gap: .375rem; min-width: 130px; }
.cf-stage-progress-label { font-size: .75rem; color: var(--cf-gray-500); }

/* =========================================================
   STAGE DETAIL PAGE
   ========================================================= */
.cf-stage-detail-header {
  background: linear-gradient(135deg, var(--cf-navy-800) 0%, var(--cf-navy-700) 100%);
  color: #fff;
  border-radius: var(--cf-radius-xl);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.cf-stage-detail-header::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 160px; height: 160px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
}
.cf-sdh-step   { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--cf-orange-400); margin-bottom: .375rem; }
.cf-sdh-title  { font-size: 1.375rem; font-weight: 700; margin-bottom: .5rem; }
.cf-sdh-purpose { font-size: .9375rem; opacity: .85; line-height: 1.6; margin-bottom: 1rem; }
.cf-sdh-meta   { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.cf-sdh-meta-item { font-size: .8125rem; opacity: .7; }
.cf-sdh-meta-item strong { color: rgba(255,255,255,.9); display: block; font-size: .75rem; margin-bottom: .1rem; }

/* Stage body 2-col grid */
.cf-stage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 900px) { .cf-stage-grid { grid-template-columns: 1fr; } }

/* =========================================================
   CARDS (generic panel)
   ========================================================= */
.cf-panel {
  background: var(--cf-white);
  border: 1px solid var(--cf-gray-200);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-sm);
  margin-bottom: 1rem;
  overflow: hidden;
}
.cf-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--cf-gray-200);
  background: var(--cf-gray-50);
}
.cf-panel-header h4 {
  margin: 0;
  font-size: .875rem;
  font-weight: 700;
  color: var(--cf-navy-800);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.cf-panel-body { padding: 1.25rem; }

/* =========================================================
   CHECKLIST / TASKS
   ========================================================= */
.cf-task-list { display: flex; flex-direction: column; gap: .125rem; }
.cf-task-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .5rem;
  border-radius: var(--cf-radius);
  transition: background .1s;
}
.cf-task-item:hover { background: var(--cf-gray-50); }
.cf-task-item .cf-task-title {
  flex: 1;
  font-size: .875rem;
  color: var(--cf-gray-800);
  line-height: 1.4;
}
.cf-task-item.done .cf-task-title {
  text-decoration: line-through;
  color: var(--cf-gray-400);
}
.cf-task-mandatory-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cf-red-600);
  flex-shrink: 0;
}
.cf-task-select {
  font-size: .75rem;
  padding: .2rem .4rem;
  border: 1px solid var(--cf-gray-300);
  border-radius: var(--cf-radius-sm);
  background: var(--cf-white);
  color: var(--cf-gray-700);
  cursor: pointer;
}

/* =========================================================
   DOCUMENTS
   ========================================================= */
.cf-doc-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .5rem;
  border-radius: var(--cf-radius);
  transition: background .1s;
}
.cf-doc-item:hover { background: var(--cf-gray-50); }
.cf-doc-icon { font-size: 16px; flex-shrink: 0; }
.cf-doc-name {
  flex: 1;
  font-size: .875rem;
  color: var(--cf-gray-800);
  line-height: 1.4;
}
.cf-doc-mandatory { font-size: .7rem; color: var(--cf-red-600); margin-left: .25rem; }
.cf-doc-select {
  font-size: .75rem;
  padding: .2rem .4rem;
  border: 1px solid var(--cf-gray-300);
  border-radius: var(--cf-radius-sm);
  background: var(--cf-white);
  cursor: pointer;
}

/* =========================================================
   RISK ITEMS
   ========================================================= */
.cf-risk-item {
  padding: .875rem 1rem;
  border-radius: var(--cf-radius);
  margin-bottom: .5rem;
  border-left: 3px solid transparent;
}
.cf-risk-item.ridicat { background: var(--cf-red-100);   border-left-color: var(--cf-red-600);   }
.cf-risk-item.mediu   { background: var(--cf-amber-100); border-left-color: var(--cf-amber-600); }
.cf-risk-item.scazut  { background: var(--cf-green-100); border-left-color: var(--cf-green-600); }
.cf-risk-title { font-size: .875rem; font-weight: 600; color: var(--cf-gray-900); margin-bottom: .25rem; }
.cf-risk-mitigation { font-size: .8125rem; color: var(--cf-gray-600); line-height: 1.5; }

/* =========================================================
   EDUCATIONAL MODULE
   ========================================================= */
.cf-edu-panel {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
  border: 1px solid var(--cf-blue-100);
  border-radius: var(--cf-radius-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.cf-edu-panel h5 {
  font-size: .875rem;
  font-weight: 700;
  color: var(--cf-blue-600);
  margin: 0 0 .75rem;
  display: flex; align-items: center; gap: .5rem;
}
.cf-edu-item {
  font-size: .875rem;
  color: var(--cf-gray-700);
  line-height: 1.6;
  padding: .375rem 0;
  border-bottom: 1px solid rgba(37,99,235,.08);
  display: flex; gap: .625rem;
}
.cf-edu-item:last-child { border-bottom: none; }
.cf-edu-item::before { content: '💡'; flex-shrink: 0; }

.cf-mistakes-panel {
  background: linear-gradient(135deg, #fff8f0 0%, #fff2e5 100%);
  border: 1px solid var(--cf-orange-100);
  border-radius: var(--cf-radius-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.cf-mistakes-panel h5 {
  font-size: .875rem;
  font-weight: 700;
  color: var(--cf-orange-600);
  margin: 0 0 .75rem;
  display: flex; align-items: center; gap: .5rem;
}
.cf-mistake-item {
  font-size: .875rem;
  color: var(--cf-gray-700);
  line-height: 1.6;
  padding: .375rem 0;
  border-bottom: 1px solid rgba(249,115,22,.1);
  display: flex; gap: .625rem;
}
.cf-mistake-item:last-child { border-bottom: none; }
.cf-mistake-item::before { content: '⚠'; flex-shrink: 0; }

/* =========================================================
   FLOWCHART (visual flow)
   ========================================================= */
#cf-flowchart-wrap {
  background: var(--cf-white);
  border: 1px solid var(--cf-gray-200);
  border-radius: var(--cf-radius-lg);
  padding: 1.5rem;
  overflow-x: auto;
  box-shadow: var(--cf-shadow-sm);
}
#cf-flowchart-wrap svg { display: block; margin: 0 auto; max-width: 100%; }

/* =========================================================
   LIBRARY / TEMPLATES
   ========================================================= */
.cf-lib-filters {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.cf-lib-filter-btn {
  font-size: .8125rem;
  font-weight: 500;
  padding: .375rem .875rem;
  border-radius: 20px;
  border: 1px solid var(--cf-gray-300);
  background: var(--cf-white);
  color: var(--cf-gray-600);
  cursor: pointer;
  transition: all .15s;
}
.cf-lib-filter-btn:hover { border-color: var(--cf-navy-600); color: var(--cf-navy-800); }
.cf-lib-filter-btn.active { background: var(--cf-navy-800); color: #fff; border-color: var(--cf-navy-800); }

.cf-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 1rem;
}
.cf-template-card {
  background: var(--cf-white);
  border: 1px solid var(--cf-gray-200);
  border-radius: var(--cf-radius-lg);
  padding: 1.25rem;
  box-shadow: var(--cf-shadow-sm);
  transition: all .15s;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.cf-template-card:hover { border-color: var(--cf-navy-600); box-shadow: var(--cf-shadow); }
.cf-template-card .cf-tc-icon { font-size: 28px; }
.cf-template-card .cf-tc-name { font-size: .9375rem; font-weight: 700; color: var(--cf-navy-800); }
.cf-template-card .cf-tc-desc { font-size: .8125rem; color: var(--cf-gray-500); line-height: 1.5; flex: 1; }
.cf-template-card .cf-tc-cat  { font-size: .75rem; color: var(--cf-gray-400); }
.cf-template-card .cf-tc-actions { display: flex; gap: .5rem; }

/* =========================================================
   NOTIFICATIONS PANEL
   ========================================================= */
.cf-notif-dropdown {
  position: absolute;
  top: calc(var(--cf-header-h) + 4px);
  right: 1.25rem;
  width: 360px;
  background: var(--cf-white);
  border: 1px solid var(--cf-gray-200);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-lg);
  z-index: 2000;
  display: none;
}
.cf-notif-dropdown.open { display: block; }
.cf-notif-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--cf-gray-200);
  display: flex; align-items: center; justify-content: space-between;
}
.cf-notif-header h4 { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--cf-navy-800); }
.cf-notif-item {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--cf-gray-100);
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  cursor: pointer;
  transition: background .1s;
}
.cf-notif-item:hover { background: var(--cf-gray-50); }
.cf-notif-item.unread { background: var(--cf-navy-50); }
.cf-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cf-orange-500); flex-shrink: 0; margin-top: 5px; }
.cf-notif-dot.read { background: transparent; border: 1px solid var(--cf-gray-300); }
.cf-notif-text { font-size: .875rem; color: var(--cf-gray-700); line-height: 1.4; }
.cf-notif-time { font-size: .75rem; color: var(--cf-gray-400); margin-top: .2rem; }

/* =========================================================
   USER MANAGEMENT
   ========================================================= */
.cf-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.cf-users-table th {
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cf-gray-500);
  padding: .625rem 1rem;
  border-bottom: 1px solid var(--cf-gray-200);
  background: var(--cf-gray-50);
}
.cf-users-table td {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--cf-gray-100);
  color: var(--cf-gray-800);
  vertical-align: middle;
}
.cf-users-table tr:hover td { background: var(--cf-gray-50); }
.cf-user-row-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cf-navy-800);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  margin-right: .625rem;
}

/* =========================================================
   FORMS
   ========================================================= */
.cf-form-group { margin-bottom: 1.25rem; }
.cf-form-group label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--cf-gray-700);
  margin-bottom: .375rem;
}
.cf-form-group .cf-hint {
  font-size: .8125rem;
  color: var(--cf-gray-500);
  margin-top: .25rem;
}
.cf-input, .cf-select, .cf-textarea {
  width: 100%;
  padding: .625rem .875rem;
  border: 1px solid var(--cf-gray-300);
  border-radius: var(--cf-radius);
  font-size: .9375rem;
  color: var(--cf-gray-900);
  background: var(--cf-white);
  font-family: var(--cf-font);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.cf-input:focus, .cf-select:focus, .cf-textarea:focus {
  border-color: var(--cf-navy-600);
  box-shadow: 0 0 0 3px rgba(45,90,145,.12);
}
.cf-textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.cf-required { color: var(--cf-red-600); margin-left: 2px; }
.cf-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .cf-form-grid-2 { grid-template-columns: 1fr; } }

/* =========================================================
   BUTTONS
   ========================================================= */
.cf-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5625rem 1.125rem;
  border-radius: var(--cf-radius);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--cf-font);
  line-height: 1;
}
.cf-btn:focus { outline: 2px solid var(--cf-navy-600); outline-offset: 2px; }

.cf-btn-primary { background: var(--cf-navy-800); color: #fff; border-color: var(--cf-navy-800); }
.cf-btn-primary:hover { background: var(--cf-navy-900); }

.cf-btn-orange { background: var(--cf-orange-500); color: #fff; border-color: var(--cf-orange-500); }
.cf-btn-orange:hover { background: var(--cf-orange-600); }

.cf-btn-outline { background: transparent; color: var(--cf-gray-700); border-color: var(--cf-gray-300); }
.cf-btn-outline:hover { background: var(--cf-gray-100); border-color: var(--cf-gray-400); }

.cf-btn-ghost { background: transparent; color: var(--cf-navy-700); border-color: transparent; }
.cf-btn-ghost:hover { background: var(--cf-navy-50); }

.cf-btn-danger { background: var(--cf-red-600); color: #fff; border-color: var(--cf-red-600); }
.cf-btn-danger:hover { background: #b91c1c; }

.cf-btn-sm { padding: .375rem .75rem; font-size: .8125rem; }
.cf-btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }
.cf-btn-full { width: 100%; justify-content: center; }
.cf-btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* =========================================================
   BREADCRUMB
   ========================================================= */
.cf-breadcrumb {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-bottom: 1.25rem;
  font-size: .875rem;
  color: var(--cf-gray-500);
  flex-wrap: wrap;
}
.cf-breadcrumb a, .cf-breadcrumb button {
  color: var(--cf-navy-700);
  text-decoration: none;
  font-weight: 500;
  background: none; border: none; cursor: pointer;
  font-size: .875rem; font-family: var(--cf-font); padding: 0;
}
.cf-breadcrumb a:hover, .cf-breadcrumb button:hover { text-decoration: underline; }
.cf-breadcrumb .sep { color: var(--cf-gray-400); }

/* =========================================================
   OBSERVATIONS
   ========================================================= */
.cf-obs-list { display: flex; flex-direction: column; gap: .75rem; }
.cf-obs-item {
  padding: .75rem;
  background: var(--cf-gray-50);
  border-radius: var(--cf-radius);
  border-left: 2px solid var(--cf-gray-300);
}
.cf-obs-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .375rem; }
.cf-obs-author { font-size: .8125rem; font-weight: 700; color: var(--cf-navy-800); }
.cf-obs-date   { font-size: .75rem; color: var(--cf-gray-400); }
.cf-obs-content { font-size: .875rem; color: var(--cf-gray-700); line-height: 1.5; }

/* =========================================================
   MODALS
   ========================================================= */
.cf-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.5);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  display: none;
}
.cf-modal-backdrop.open { display: flex; }
.cf-modal {
  background: var(--cf-white);
  border-radius: var(--cf-radius-xl);
  box-shadow: var(--cf-shadow-lg);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
}
.cf-modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--cf-gray-200);
  display: flex; align-items: center; justify-content: space-between;
}
.cf-modal-header h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--cf-navy-800); }
.cf-modal-close { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--cf-gray-500); padding: .25rem; border-radius: var(--cf-radius-sm); }
.cf-modal-close:hover { background: var(--cf-gray-100); }
.cf-modal-body   { padding: 1.5rem; }
.cf-modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--cf-gray-200); display: flex; justify-content: flex-end; gap: .625rem; }

/* =========================================================
   ALERTS / TOAST
   ========================================================= */
#cf-toasts {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  z-index: 9999;
  pointer-events: none;
}
.cf-toast {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.25rem;
  background: var(--cf-gray-900);
  color: #fff;
  border-radius: var(--cf-radius-lg);
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--cf-shadow-lg);
  pointer-events: all;
  animation: cfToastIn .25s ease;
  max-width: 360px;
}
.cf-toast.success { background: var(--cf-green-600); }
.cf-toast.error   { background: var(--cf-red-600); }
.cf-toast.warning { background: var(--cf-amber-600); }
@keyframes cfToastIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   LOADING / EMPTY STATES
   ========================================================= */
.cf-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--cf-gray-500);
  font-size: .9375rem;
  gap: .75rem;
}
.cf-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--cf-gray-200);
  border-top-color: var(--cf-navy-700);
  border-radius: 50%;
  animation: cfSpin .7s linear infinite;
}
@keyframes cfSpin { to { transform: rotate(360deg); } }

.cf-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--cf-gray-500);
  font-size: .9375rem;
  gap: .75rem;
  text-align: center;
}
.cf-empty-state .cf-es-icon { font-size: 2.5rem; opacity: .4; }
.cf-empty-state h4 { margin: 0; font-size: 1rem; color: var(--cf-gray-700); }

/* =========================================================
   MANAGER CHARTS
   ========================================================= */
.cf-chart-wrap {
  position: relative;
  padding: 1rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  :root { --cf-sidebar-w: 220px; }
}
@media (max-width: 768px) {
  #cf-sidebar { transform: translateX(-100%); transition: transform .25s; }
  #cf-sidebar.mobile-open { transform: translateX(0); }
  #cf-main { margin-left: 0; padding: 1rem; }
  .cf-topbar-nav { display: none; }
  .cf-stage-grid { grid-template-columns: 1fr; }
  .cf-stat-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .cf-stat-grid { grid-template-columns: 1fr; }
  .cf-projects-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   MISC UTILITIES
   ========================================================= */
.cf-flex    { display: flex; }
.cf-gap-sm  { gap: .5rem; }
.cf-gap-md  { gap: 1rem; }
.cf-mt-md   { margin-top: 1rem; }
.cf-mb-md   { margin-bottom: 1rem; }
.cf-text-sm { font-size: .875rem; }
.cf-text-xs { font-size: .8125rem; }
.cf-muted   { color: var(--cf-gray-500); }
.cf-bold    { font-weight: 700; }
.cf-divider { height: 1px; background: var(--cf-gray-200); margin: 1rem 0; }
.cf-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }