/* ===== Base ===== */
:root{
  --cf-border:#e5e7eb;
  --cf-bg:#f7f7f8;
  --cf-white:#fff;
  --cf-text:#0f172a;
  --cf-muted:#64748b;
  --cf-brand:#111827;
  --cf-green:#50C878;
  --cf-gray:#f1f5f9;
  --cf-purple:#4f46e5;
}

/* Outfit as Global font */
.cf-app,
.cf-app * {
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, Segoe UI,
               Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji",
               "Segoe UI Symbol" !important;
}

*{box-sizing:border-box}
.cf-app{min-height:100vh;background:linear-gradient(#fff,#f8fafc)}
.screen-reader-text{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* ===== Header (60px) ===== */
.cf-header{
  position:sticky;top:0;z-index:20;height:60px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--cf-border);
}
.cf-header-left{display:flex;align-items:center;gap:10px}
.cf-sidebar-toggle{border:1px solid var(--cf-border);background:#fff;padding:6px;border-radius:10px}
.cf-brand{display:flex;align-items:center;gap:8px}
.cf-logo{width:22px;height:22px;color:var(--cf-brand)}
.cf-title{font-weight:700;font-size:18px}
.cf-pill{font-size:12px;color:#475569;background:#eef2f7;border-radius:999px;padding:2px 6px}
.cf-auth{display:flex;gap:8px}
.cf-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--cf-border);padding:8px 10px;border-radius:25px;font-size:14px;color:var(--cf-text);background:#fff}
.cf-btn.primary{background:#50C878;color:#fff;border-color:#50C878}
.cf-btn.ghost:hover,.cf-sidebar-toggle:hover{background:#f8fafc}

/* ===== Sidebar ===== */
.cf-sidebar{
  position:fixed;left:0;top:60px;bottom:64px;width:264px;
  background:var(--cf-gray);border-right:1px solid var(--cf-border);
  transition:width .25s ease;overflow:hidden;z-index:15;
}
.cf-sidebar.collapsed{width:0px}
.cf-nav{list-style:none;margin:0;padding:12px}
.cf-nav-link{
  display:flex;align-items:center;gap:10px;padding:10px 12px;margin:2px 0;
  border-radius:25px;color:#111827;text-decoration:none;
}
.cf-nav-link:hover{background:#fff}
.cf-collapse{
  position:absolute;right:8px;bottom:8px;border:1px solid var(--cf-border);
  background:#fff;padding:6px;border-radius:10px
}

/* ===== View ===== */
.cf-view{
  max-width:1000px;margin:0 auto;padding:16px 16px 96px 16px;
  }
.cf-view.collapsed{padding-left:px}

/* Cards & grids */
.cf-grid{display:grid;gap:16px}
.cf-grid.kpi{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 900px){.cf-grid.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cf-card{background:#fff;border:1px solid var(--cf-border);border-radius:25px;padding:16px}
.cf-k{display:flex;align-items:center;justify-content:space-between}
.cf-k .label{font-size:13px;color:var(--cf-muted)}
.cf-k .value{font-weight:700;font-size:22px}

/* Chart canvases */
.cf-chart{height:240px}
.cf-chart canvas{width:100%!important;height:100%!important}

/* ===== Data Input ===== */
.cf-form{display:grid;gap:12px}
.cf-form .row{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 900px){.cf-form .row{grid-template-columns:1fr}}
.cf-input, .cf-select, .cf-textarea{
  width:100%;padding:10px 12px;border:1px solid var(--cf-border);border-radius:12px;background:#fff
}
.cf-label{font-size:12px;color:var(--cf-muted);margin-bottom:6px;display:block}
.cf-actions{display:flex;gap:10px;align-items:center;margin-top:8px}

/* ===== Chat Dock ===== */
.cf-chat{
  position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--cf-border);z-index:25
}
.cf-chat-head{display:flex;align-items:center;justify-content:space-between;padding:8px 16px}
.cf-chat-title{display:flex;align-items:center;gap:8px;font-weight:600}
.cf-chat-body{padding:8px 16px;border-top:1px solid var(--cf-border)}
.cf-msgs{list-style:none;margin:0;padding:0;max-height:170px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.cf-bubble{display:inline-block;max-width:85%;padding:8px 10px;border-radius:16px;font-size:14px}
.cf-bubble.me{background:#50C878;color:#fff;align-self:flex-end}
.cf-bubble.ai{background:#f1f5f9;color:#111827;align-self:flex-start}
.cf-quick{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.cf-chip{border:1px solid var(--cf-border);background:#fff;padding:6px 10px;border-radius:999px;font-size:13px}
.cf-chat-input{display:flex;gap:8px;align-items:flex-end}
#cf-chat-text{flex:1;min-height:40px;max-height:100px}

/* ===== Accessibility focus ===== */
:focus-visible{outline:3px solid #a7f3d0;outline-offset:2px}

/* ===== Helpers ===== */
.hide{display:none!important}

/* Let the Ctrl Freak app break out of the WP block content clamp */
.is-layout-constrained:has(#cf-app) {
  max-width: none !important;
}

/* Optional: remove side padding if the theme adds it on the same wrapper */
.is-layout-constrained:has(#cf-app) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.cf-chat-toggle: {
    border-radius: 10px !important;
    border: 1px !important;
}
}