/*
 * CuraSuite design system — see Master Development Plan v2.0 Part 12.1
 * for the base token values. Tailwind (CDN) handles layout/spacing
 * utilities; this file covers everything Tailwind's CDN build can't
 * (no @apply/build step available without the CLI) — buttons, form
 * validation states, cards, badges, tables, sidebar, icons.
 */
:root {
  --color-primary: #1a5f7a;
  --color-primary-hover: #154f66;
  --color-primary-soft: #e6f0f4;
  --color-accent: #2d9cdb;
  --color-accent-soft: #eaf6fd;
  --color-success: #27ae60;
  --color-success-soft: #e9f7ef;
  --color-warning: #f39c12;
  --color-warning-soft: #fef5e7;
  --color-danger: #e74c3c;
  --color-danger-soft: #fdedeb;
  --color-slate: #64748b;
  --color-slate-soft: #eef1f5;
  --color-violet: #8e44ad;
  --color-violet-soft: #f3ebf7;
  --color-surface: #eef1f6;
  --color-surface-raised: #ffffff;
  --color-text: #1a1a2e;
  --color-text-muted: #5b6472;
  --color-border: #e2e8ee;
  --color-border-strong: #b3d4e0;

  /* Dark "ink" chrome — used for the sidebar rail, hero banners, and
     high-emphasis surfaces, echoing the dark-dock/light-canvas split
     of the reference design without going full dark-mode. */
  --color-ink: #12212b;
  --color-ink-raised: #17303d;
  --color-ink-border: rgb(255 255 255 / 0.08);
  --color-ink-text-muted: rgb(255 255 255 / 0.6);
  --gradient-primary: linear-gradient(135deg, #1a5f7a 0%, #2d9cdb 100%);
  --gradient-ink: linear-gradient(160deg, #12212b 0%, #1a3a48 100%);

  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-2xl: 26px;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 1px rgb(16 24 40 / 0.04);
  --shadow-md: 0 4px 8px -2px rgb(16 24 40 / 0.08), 0 2px 4px -2px rgb(16 24 40 / 0.05);
  --shadow-lg: 0 12px 24px -8px rgb(16 24 40 / 0.14), 0 4px 8px -4px rgb(16 24 40 / 0.08);
  --shadow-float: 0 8px 30px -6px rgb(18 33 43 / 0.18);
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background:
    radial-gradient(1100px 480px at 8% -10%, rgb(45 156 219 / 0.10), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgb(26 95 122 / 0.08), transparent 55%),
    var(--color-surface);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

[x-cloak] { display: none !important; }

svg.icon {
  width: 1rem;
  height: 1rem;
  stroke-width: 2px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-lg);
  font-weight: 500;
  font-size: 0.875rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(45 156 219 / 0.3);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover:not(:disabled) { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-secondary { background-color: #fff; border-color: var(--color-border-strong); color: var(--color-text); }
.btn-secondary:hover:not(:disabled) { background-color: var(--color-surface); }

.btn-danger { background-color: var(--color-danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background-color: #c8392b; }

.btn-ghost { background-color: transparent; color: var(--color-text-muted); }
.btn-ghost:hover:not(:disabled) { background-color: var(--color-surface); color: var(--color-text); }

/* Ghost buttons living on the dark sidebar rail need a light-on-dark hover
   instead of .btn-ghost's default light-surface hover. */
aside .btn-ghost:hover:not(:disabled) { background-color: rgb(255 255 255 / 0.1); color: #fff; }

.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8125rem; }
.btn-icon { padding: 0.5rem; width: 2.25rem; height: 2.25rem; }

/* ------------------------------------------------------------ Form fields */
.field-group { display: flex; flex-direction: column; gap: 0.3rem; }

.form-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
}
.form-label .required { color: var(--color-danger); }

.form-hint { font-size: 0.75rem; color: var(--color-text-muted); }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  background-color: #fff;
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-select { background-color: #fff; }
.form-input::placeholder, .form-textarea::placeholder { color: #9aa5b1; }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgb(45 156 219 / 0.15);
}

.form-input:disabled, .form-select:disabled { background-color: var(--color-surface); color: var(--color-text-muted); }

/* Error state — applied via {% render_field field class="is-invalid" %} */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--color-danger);
}
.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px rgb(231 76 60 / 0.15);
}

.form-error {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-danger);
  font-size: 0.8125rem;
}

.input-icon-wrap { position: relative; }
.input-icon-wrap .form-input { padding-left: 2.25rem; }
.input-icon-wrap .input-icon {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

/* ---------------------------------------------------------------- Alerts */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border-left: 3px solid transparent;
  font-size: 0.875rem;
}
.alert-success { background-color: var(--color-success-soft); border-left-color: var(--color-success); color: #1e7e4a; }
.alert-danger  { background-color: var(--color-danger-soft);  border-left-color: var(--color-danger);  color: #b8362a; }
.alert-warning { background-color: var(--color-warning-soft); border-left-color: var(--color-warning); color: #92600a; }
.alert-info    { background-color: var(--color-accent-soft);  border-left-color: var(--color-accent);  color: #1a6f96; }

/* ----------------------------------------------------------------- Cards */
.card {
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Cards that are themselves a click target (dashboard tiles, list rows
   rendered as cards) get a lift-on-hover; plain informational cards
   opt in explicitly rather than every .card acquiring pointer affordance. */
.card-interactive:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Colored left accent strip — set --card-accent to a token above */
.card-strip {
  border-left-width: 4px;
  border-left-color: var(--card-accent, var(--color-primary));
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
.card-title .icon { color: var(--color-primary); }

/* ------------------------------------------------------------- Stat tile */
.stat-tile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.stat-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-lg);
  background-color: var(--tile-accent-soft, var(--color-primary-soft));
  color: var(--tile-accent, var(--color-primary));
  flex-shrink: 0;
}
.stat-tile-label { font-size: 0.8125rem; color: var(--color-text-muted); margin-bottom: 0.25rem; }
.stat-tile-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }

/* ----------------------------------------------------------------- Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}
.badge-success { background-color: var(--color-success-soft); color: var(--color-success); }
.badge-warning { background-color: var(--color-warning-soft); color: var(--color-warning); }
.badge-danger  { background-color: var(--color-danger-soft);  color: var(--color-danger); }
.badge-info    { background-color: var(--color-accent-soft);  color: var(--color-accent); }
.badge-neutral { background-color: var(--color-surface);      color: var(--color-text-muted); border: 1px solid var(--color-border); }
.badge .dot { width: 0.375rem; height: 0.375rem; border-radius: 999px; background-color: currentColor; }

/* ----------------------------------------------------------------- Table */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); }
table.data-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
table.data-table thead th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  padding: 0.7rem 0.9rem;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
table.data-table tbody td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
}
table.data-table tbody tr:hover { background-color: var(--color-primary-soft); }
table.data-table tbody tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------- Avatar */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--gradient-primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.8125rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.8), var(--shadow-sm);
}

/* --------------------------------------------------------------- Sidebar */
/* Dark "ink" rail — the nav items live on --color-ink, so active/hover
   states are built from white-alpha overlays and a solid pill for the
   active route, rather than the light-theme border-left indicator this
   used to use. */
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink-text-muted);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-link .icon { color: inherit; }
.sidebar-link:hover { background-color: rgb(255 255 255 / 0.08); color: #fff; }
.sidebar-link.active {
  background: var(--gradient-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-md);
}
.sidebar-link.disabled { opacity: 0.4; cursor: not-allowed; }
.sidebar-link.disabled:hover { background-color: transparent; color: var(--color-ink-text-muted); }

/* htmx-swapping element fades in briefly so partial updates are legible */
.htmx-added { opacity: 0; }
.htmx-settling { opacity: 1; transition: opacity 0.15s ease; }

/* ------------------------------------------------------------- Launchpad */
/* The module-launcher grid on the home dashboard — square tiles grouped
   into color-coded categories, with a client-side search filter and a
   staggered entrance animation. Not a generic ".card" reuse: this needs
   its own centered icon-badge + label layout and hover choreography. */
@keyframes launch-tile-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.launch-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--section-accent, var(--color-primary));
  margin-bottom: 0.85rem;
}
.launch-section-label::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background-color: var(--section-accent, var(--color-primary));
}

.launch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
@media (min-width: 640px)  { .launch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .launch-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .launch-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.launch-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  aspect-ratio: 1 / 1;
  padding: 1.1rem 0.85rem;
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text);
  overflow: hidden;
  animation: launch-tile-in 0.35s ease both;
  animation-delay: calc(var(--i, 0) * 40ms);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.launch-tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.launch-tile:hover .launch-tile-icon { transform: scale(1.08) rotate(-4deg); }

.launch-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--tile-accent-soft, var(--color-primary-soft)) 0%, color-mix(in srgb, var(--tile-accent, var(--color-primary)) 16%, var(--tile-accent-soft, var(--color-primary-soft))) 100%);
  color: var(--tile-accent, var(--color-primary));
  transition: transform 0.2s ease;
}
.launch-tile-icon .icon { width: 1.5rem; height: 1.5rem; }

.launch-tile-label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
}

.launch-tile-new {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background-color: var(--color-danger);
  color: #fff;
}

.launch-search-wrap { position: relative; max-width: 22rem; }
.launch-search-wrap .icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
}
.launch-search-wrap input {
  width: 100%;
  padding: 0.7rem 1rem 0.7rem 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.875rem;
  background-color: #fff;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.launch-search-wrap input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgb(45 156 219 / 0.15);
}

/* --------------------------------------------------------- Hero banner */
/* Welcome banner at the top of the launchpad — the one intentionally
   "dark ink" surface outside the sidebar, giving the page a focal point
   the way the reference design uses a dark card among light ones. */
.hero-banner {
  position: relative;
  background: var(--gradient-ink);
  border-radius: var(--radius-2xl);
  padding: 2rem 2.25rem;
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-float);
}
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 240px at 88% 8%, rgb(45 156 219 / 0.35), transparent 70%),
    radial-gradient(320px 220px at 100% 100%, rgb(255 255 255 / 0.06), transparent 70%);
  pointer-events: none;
}
.hero-banner > * { position: relative; }
.hero-banner-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 0.65);
}
.hero-banner-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin-top: 0.35rem; }
.hero-banner-sub { font-size: 0.875rem; color: rgb(255 255 255 / 0.7); margin-top: 0.4rem; max-width: 34rem; }

/* ----------------------------------------------------- Segmented pills */
/* A rounded pill-group used for the category quick-jump on the
   launchpad — mirrors the reference design's pill navigation without
   needing JS beyond an anchor scroll / Alpine active-state toggle. */
.segmented-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.35rem;
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.segmented-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.segmented-pill:hover { background-color: var(--color-surface); color: var(--color-text); }
.segmented-pill.active { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-sm); }
.segmented-pill .dot { width: 0.4rem; height: 0.4rem; border-radius: 999px; background-color: var(--pill-accent, var(--color-primary)); }
.segmented-pill.active .dot { background-color: #fff; }

/* --------------------------------------------------- Branding/sponsor placeholders */
.placeholder-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  text-align: center;
  padding: 1rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.placeholder-box:hover { border-color: var(--color-accent); background-color: var(--color-accent-soft); }
.placeholder-box-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background-color: #fff;
  color: var(--color-text-muted);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.placeholder-box-label { font-size: 0.8rem; font-weight: 600; }
.placeholder-box-sub { font-size: 0.7rem; color: var(--color-text-muted); }
.brand-logo-box { height: 4.5rem; }
.brand-logo-box img { max-height: 3.25rem; max-width: 100%; object-fit: contain; }
.sponsor-banner-box { height: 4.5rem; }
.sponsor-banner-box img { max-height: 3.25rem; max-width: 100%; object-fit: contain; }