/* =========================================================
   Custix – Clean UI (Auth + App)
   Single source of truth. No duplicate class definitions.
========================================================= */
:root{
  --cx-bg: #0b1220;
  --cx-bg2:#0a152a;

  --cx-surface: rgba(255,255,255,.06);
  --cx-surface2: rgba(255,255,255,.04);
  --cx-card: rgba(255,255,255,.08);

  --cx-text: rgba(255,255,255,.92);
  --cx-muted: rgba(255,255,255,.65);
  --cx-line: rgba(255,255,255,.10);

  --cx-accent: #5ee4ff;
  --cx-accent2:#7c5cff;

  --cx-ok: rgba(57,217,138,.95);

  --cx-radius: 18px;
  --cx-radius-lg: 24px;

  --cx-shadow: 0 24px 60px rgba(0,0,0,.45);
  --cx-shadow-sm: 0 10px 24px rgba(0,0,0,.35);

  --cx-font: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}




*{ box-sizing:border-box; }
html,body{ height:100%; }

body.cx{
  margin:0;
  font-family: var(--cx-font);
  color: var(--cx-text);
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(94,228,255,.18), transparent 60%),
    radial-gradient(900px 520px at 82% -8%, rgba(124,92,255,.18), transparent 60%),
    linear-gradient(180deg, var(--cx-bg), var(--cx-bg2));
}

/* ---------------------------------------------------------
   Base elements
--------------------------------------------------------- */
a{ color: inherit; }
.cx-muted{ color: var(--cx-muted); }

/* Buttons */
.cx-btn,
.cx-btn-outline{
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 850;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  white-space:nowrap;
}

.cx-btn{
  border: 1px solid rgba(255,255,255,.14);
  color:#081018;
  background: linear-gradient(135deg, var(--cx-accent), var(--cx-accent2));
  box-shadow: 0 18px 44px rgba(94,228,255,.12);
}
.cx-btn:hover{ filter:brightness(1.06); }

.cx-btn-outline{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: var(--cx-text);
}
.cx-btn-outline:hover{ filter:brightness(1.06); }

/* Pills */
.cx-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border: 1px solid var(--cx-line);
  background: rgba(0,0,0,.18);
  border-radius: 999px;
  font-size: 12px;
  color: var(--cx-muted);
}

/* Cards (generic) */
.cx-card{
  border-radius: var(--cx-radius);
  border: 1px solid var(--cx-line);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.cx-card-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom:12px;
}
.cx-card-title{ font-weight: 950; }
.cx-card-sub{ font-size: 12px; color: var(--cx-muted); }

/* ---------------------------------------------------------
   AUTH (Login etc.)
   Optional: if you set <div class="cx-shell cx-shell--auth">
--------------------------------------------------------- */
.cx-shell--auth{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.cx-topbar__inner{
  max-width: 1080px;
  margin:0 auto;
  padding: 18px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.cx-center{
  flex:1;
  display:grid;
  place-items:center;
  padding: 26px 18px;
}

.cx-card__head{
  padding: 20px 20px 10px;
}
.cx-card__head h1{
  margin:0;
  font-size: 22px;
  font-weight: 950;
}
.cx-card__head p{
  margin:8px 0 0;
  color: var(--cx-muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.cx-form{
  padding: 16px 20px 18px;
  display:grid;
  gap: 12px;
}

.cx-field{ display:grid; gap:6px; }
.cx-field label{
  font-size: 12px;
  color: var(--cx-muted);
  font-weight: 800;
  letter-spacing: .02em;
}
.cx-field input{
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--cx-line);
  background: rgba(10,15,30,.35);
  color: var(--cx-text);
  padding: 0 12px;
  outline:none;
  box-shadow: var(--cx-shadow-sm);
  transition: .15s;
}
.cx-field input:focus{
  border-color: rgba(94,228,255,.30);
  box-shadow: 0 0 0 4px rgba(94,228,255,.12);
}

.cx-alerts{ padding: 0 20px; }
.cx-alert{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--cx-line);
  background: rgba(255,255,255,.05);
  font-weight: 800;
  font-size: 13px;
}
.cx-alert--error{
  border-color: rgba(248,113,113,.30);
  background: rgba(248,113,113,.10);
}
.cx-alert--success{
  border-color: rgba(52,211,153,.28);
  background: rgba(52,211,153,.10);
}

/* ---------------------------------------------------------
   APP (Dashboard etc.)
   Requires wrapper: <div class="cx-shell cx-shell--app">
--------------------------------------------------------- */
.cx-shell--app{
  min-height:100vh;
  display:flex;              /* IMPORTANT */
  flex-direction:row;        /* IMPORTANT */
  align-items:stretch;       /* IMPORTANT */
}

/* Sidebar */
.cx-sidebar{
  width: 290px;
  padding: 18px;
  border-right: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cx-sb-brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:16px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}

.cx-sb-logo{
  width:42px;height:42px;
  border-radius:14px;
  background: linear-gradient(135deg, var(--cx-accent), var(--cx-accent2));
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  color:#081018;
}

.cx-sb-title{ font-weight: 950; }
.cx-sb-sub{ font-size:12px; color: var(--cx-muted); }

.cx-sb-section{
  font-size:11px;
  letter-spacing:.12em;
  color: var(--cx-muted);
  margin-top:6px;
}

.cx-sb-item{
  display:block;
  padding:12px 12px;
  border-radius:14px;
  text-decoration:none;
  color: var(--cx-text);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.cx-sb-item:hover{ filter:brightness(1.06); }
.cx-sb-item.active{
  border-color: rgba(124,92,255,.55);
  box-shadow: 0 0 0 4px rgba(124,92,255,.12);
}

.cx-sb-footer{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cx-sb-user{
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px;
  border-radius:14px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.08);
}
.cx-dot{
  width:10px;height:10px;
  border-radius:99px;
  background: var(--cx-ok);
}
.cx-sb-userline{ font-size:12px; color: var(--cx-muted); }
.cx-sb-userline2{ font-size:12px; }

/* Main */
.cx-main{
  flex:1;
  padding: 22px 22px 60px;
  display:flex;              /* IMPORTANT */
  flex-direction:column;     /* IMPORTANT */
  justify-content:flex-start;/* IMPORTANT: fixes your "content at bottom" */
  align-items:stretch;
}

/* Topbar inside main */
.cx-topbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cx-line);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 16px;
}

.cx-h1{ font-size:22px; font-weight: 950; }
.cx-top-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Grid */
.cx-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  align-content:start;
}

.cx-card{ padding:16px; }
.cx-span-2{ grid-column: span 2; }

/* Quick tiles */
.cx-quick{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
.cx-quick-tile{
  text-align:left;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  color: var(--cx-text);
  cursor:pointer;
}
.cx-qt-title{ font-weight: 950; }
.cx-qt-sub{ font-size:12px; color: var(--cx-muted); margin-top:4px; }
.cx-quick-tile:hover{ filter:brightness(1.06); }

/* KPIs */
.cx-kpis{ display:grid; gap:10px; }
.cx-kpi{
  padding:12px;
  border-radius:14px;
  background: rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.08);
}
.cx-kpi-label{ font-size:12px; color: var(--cx-muted); }
.cx-kpi-value{ font-size:22px; font-weight: 950; margin-top:2px; }

/* Timeline */
.cx-timeline{ display:grid; gap:10px; }
.cx-tl-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  border-radius:14px;
  background: rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.08);
}
.cx-tl-dot{
  width:10px;height:10px;
  border-radius:99px;
  background: var(--cx-accent);
  margin-top:4px;
}
.cx-tl-title{ font-weight: 850; }
.cx-tl-sub{ font-size:12px; color: var(--cx-muted); }

/* Projects */
.cx-projects{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
.cx-proj{
  padding:14px;
  border-radius:16px;
  background: rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cx-proj-title{ font-weight: 950; }
.cx-proj-sub{ font-size:12px; color: var(--cx-muted); }
.cx-proj button{ width:100%; }

/* Status */
.cx-status{ display:grid; gap:10px; }
.cx-status-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  border-radius:14px;
  background: rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.08);
}
.cx-badge{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.cx-badge.ok{ border-color: rgba(57,217,138,.35); }

/* Responsive */
@media (max-width: 1100px){
  .cx-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-span-2{ grid-column: span 2; }
  .cx-projects{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .cx-shell--app{ flex-direction:column; }
  .cx-sidebar{ width:auto; }
  .cx-grid{ grid-template-columns: 1fr; }
  .cx-span-2{ grid-column: span 1; }
  .cx-quick{ grid-template-columns: 1fr; }
  .cx-projects{ grid-template-columns: 1fr; }
}



/* -------------------------------------------------
   Dark Form Controls (Inputs, Selects, Textareas)
   ------------------------------------------------- */

.cx-input,
.cx-form input[type="text"],
.cx-form input[type="email"],
.cx-form input[type="password"],
.cx-form select,
.cx-form textarea {
  background: linear-gradient(
    180deg,
    rgba(20, 28, 45, 0.95),
    rgba(14, 20, 34, 0.95)
  );
  border: 1px solid rgba(120, 140, 255, 0.18);
  color: #e6ebff;

  padding: 10px 12px;
  border-radius: 10px;
  outline: none;

  transition: 
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

/* Placeholder */
.cx-input::placeholder,
.cx-form input::placeholder,
.cx-form textarea::placeholder {
  color: rgba(200, 210, 255, 0.35);
}

/* Focus */
.cx-input:focus,
.cx-form input:focus,
.cx-form select:focus,
.cx-form textarea:focus {
  border-color: rgba(120, 140, 255, 0.6);
  box-shadow: 0 0 0 2px rgba(120, 140, 255, 0.15);
  background: linear-gradient(
    180deg,
    rgba(24, 34, 56, 0.98),
    rgba(18, 26, 44, 0.98)
  );
}

/* Select Arrow fix (Dark UI) */
.cx-form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(200,210,255,0.6) 50%),
    linear-gradient(135deg, rgba(200,210,255,0.6) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}


/* Admin list: ensure action buttons are clickable */
.cx-status-row {
  position: relative;
  z-index: 1;
}

.cx-status-row a,
.cx-status-row button {
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

.cx-badge {
  pointer-events: none;
}