/* =============================================================
   Charlie & Kitty Dashboard — Dark Theme
   All custom dk-* utility classes live here.
   Tailwind CDN config stays in base.html (must be inline JS).
   ============================================================= */

/* ── Base ── */
body {
  font-family: 'Nunito', sans-serif;
  background-color: #080810;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(244, 114, 182, 0.1) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 90%, rgba(167, 139, 250, 0.07) 0%, transparent 60%);
  background-attachment: fixed;
}

/* ── Gradient text ── */
.dk-gradient-text {
  background: linear-gradient(135deg, #f472b6 0%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Cards ── */
.dk-card {
  background: linear-gradient(135deg, rgba(30, 20, 38, 0.95) 0%, rgba(18, 12, 26, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.dk-card-petal    { border-color: rgba(244, 114, 182, 0.2); }
.dk-card-lavender { border-color: rgba(167, 139, 250, 0.2); }

/* ── Column headers ── */
.dk-col-header-petal    { background: rgba(244, 114, 182, 0.1); border: 1px solid rgba(244, 114, 182, 0.2); }
.dk-col-header-lavender { background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.2); }
.dk-col-title-petal     { color: #f472b6; }
.dk-col-title-lavender  { color: #a78bfa; }
.dk-col-sub-petal       { color: rgba(244, 114, 182, 0.55); }
.dk-col-sub-lavender    { color: rgba(167, 139, 250, 0.55); }
.dk-col-badge-petal     { background: rgba(244, 114, 182, 0.18); color: #f472b6; }
.dk-col-badge-lavender  { background: rgba(167, 139, 250, 0.18); color: #a78bfa; }

/* ── Schedule items ── */
.dk-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.15s;
}
.dk-item:hover    { background: rgba(255, 255, 255, 0.055); }
.dk-time-petal    { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.dk-time-lavender { background: rgba(167, 139, 250, 0.15); color: #a78bfa; }

/* ── Inputs ── */
.dk-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
  transition: all 0.2s;
}
.dk-input::placeholder { color: rgba(156, 163, 175, 0.35); }
.dk-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(244, 114, 182, 0.6);
  box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.1);
}
input[type="time"] { color-scheme: dark; }

/* ── Buttons ── */
.dk-btn {
  background: linear-gradient(135deg, #f472b6 0%, #c084fc 100%);
  box-shadow: 0 4px 16px rgba(244, 114, 182, 0.3);
  transition: all 0.2s;
}
.dk-btn:hover  { box-shadow: 0 6px 24px rgba(244, 114, 182, 0.45); transform: translateY(-1px); }
.dk-btn:active { transform: translateY(0); }

.dk-btn-lavender {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  box-shadow: 0 4px 16px rgba(167, 139, 250, 0.3);
}
.dk-btn-lavender:hover { box-shadow: 0 6px 24px rgba(167, 139, 250, 0.45); }

/* ── Add form dashed border ── */
.dk-add-form-petal    { border-color: rgba(244, 114, 182, 0.2); }
.dk-add-form-lavender { border-color: rgba(167, 139, 250, 0.2); }

/* ── Navbar ── */
.dk-nav {
  background: rgba(8, 8, 16, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
}

/* ── HTMX animations ── */
.htmx-added    { animation: fadeIn 0.3s ease; }
.htmx-swapping { opacity: 0; transition: opacity 0.2s; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}