/* ============================================================
   RAQETO DESIGN SYSTEM
   Single source of truth for tokens + components.
   Extracted from Design Manual v1.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   TOKENS — LIGHT (default)
   ============================================================ */
:root,
:root[data-theme="light"] {
  /* Brand surfaces */
  --r-ink:        #1B1340;
  --r-ink-2:      #2D1F5C;
  --r-paper:      #FFF8EE;
  --r-paper-2:    #FBEFD9;
  --r-card:       #FFFFFF;
  --r-line:       #ECE0C8;
  --r-line-2:     #D9C8A4;
  --r-mute:       #6F6589;
  --r-mute-2:     #A096B8;

  /* Brand accents */
  --r-coral:      #FF6A3D;
  --r-coral-deep: #D44217;
  --r-coral-soft: #FFE2D4;
  --r-flame:      #FFC233;
  --r-flame-deep: #C8920A;
  --r-flame-soft: #FFEFC2;
  --r-sky:        #4FC8E0;
  --r-sky-deep:   #1A8AA3;
  --r-sky-soft:   #D2F1F8;
  --r-lilac:      #8B6BFF;
  --r-lilac-deep: #5C3DD9;
  --r-lilac-soft: #E5DDFF;

  /* Legacy aliases (keep until full sweep) */
  --r-flow:       var(--r-flame);
  --r-flow-deep:  var(--r-flame-deep);
  --r-flow-soft:  var(--r-flame-soft);
  --r-blue:       var(--r-sky);
  --r-blue-deep:  var(--r-sky-deep);
  --r-blue-soft:  var(--r-sky-soft);

  /* Semantic */
  --r-warn:       #E08A00;
  --r-warn-soft:  #FFEFC2;
  --r-danger:     #E04545;
  --r-danger-soft:#FFD8D5;
  --r-ok:         #2E9D5F;
  --r-ok-soft:    #D2F2DE;
  --r-info:       var(--r-sky);
  --r-info-soft:  var(--r-sky-soft);

  /* Typography */
  --f-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif: "Instrument Serif", "Times New Roman", serif;
  --f-mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Spacing — 4px base */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px;  --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* Radii */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-5: 24px;
  --r-full: 999px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(27,19,64,.06);
  --sh-2: 0 4px 12px -2px rgba(27,19,64,.10), 0 2px 4px rgba(27,19,64,.05);
  --sh-3: 0 18px 40px -12px rgba(27,19,64,.22), 0 4px 12px -4px rgba(27,19,64,.10);
  --sh-glow: 0 0 0 6px rgba(255,106,61,.18);

  /* Gradients */
  --g-sunset: linear-gradient(90deg, var(--r-coral) 0%, var(--r-flame) 50%, var(--r-sky) 100%);
  --g-feature: linear-gradient(135deg, var(--r-ink) 0%, var(--r-coral-deep) 100%);
  --g-timer:  linear-gradient(140deg, var(--r-ink) 0%, var(--r-lilac-deep) 100%);
  --g-soft:   linear-gradient(135deg, var(--r-coral-soft) 0%, var(--r-sky-soft) 100%);
}

/* ============================================================
   TOKENS — DARK
   ============================================================ */
:root[data-theme="dark"] {
  --r-ink:        #FFF8EE;
  --r-ink-2:      #ECE0C8;
  --r-paper:      #1B1340;
  --r-paper-2:    #2D1F5C;
  --r-card:       #2D1F5C;
  --r-line:       rgba(255,248,238,.10);
  --r-line-2:     rgba(255,248,238,.18);
  --r-mute:       #A096B8;
  --r-mute-2:     #6F6589;

  /* Brand accents stay vibrant; soft variants get tinted toward dark surface */
  --r-coral-soft: rgba(255,106,61,.18);
  --r-flame-soft: rgba(255,194,51,.18);
  --r-sky-soft:   rgba(79,200,224,.18);
  --r-lilac-soft: rgba(139,107,255,.22);

  /* Soft semantic shifts to keep readable */
  --r-warn-soft:   rgba(224,138,0,.20);
  --r-danger-soft: rgba(224,69,69,.20);
  --r-ok-soft:     rgba(46,157,95,.20);

  --sh-1: 0 1px 2px rgba(0,0,0,.40);
  --sh-2: 0 4px 12px -2px rgba(0,0,0,.50), 0 2px 4px rgba(0,0,0,.30);
  --sh-3: 0 18px 40px -12px rgba(0,0,0,.60), 0 4px 12px -4px rgba(0,0,0,.40);
  --sh-glow: 0 0 0 6px rgba(255,106,61,.30);

  --g-feature: linear-gradient(135deg, var(--r-ink-2) 0%, var(--r-coral-deep) 100%);
  --g-timer:  linear-gradient(140deg, var(--r-ink-2) 0%, var(--r-lilac-deep) 100%);
  --g-soft:   linear-gradient(135deg, rgba(255,106,61,.18) 0%, rgba(79,200,224,.18) 100%);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--r-paper);
  color: var(--r-ink);
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--r-coral-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--r-mute);
  font-weight: 500;
}
.h-display {
  font-family: var(--f-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1;
}
.h-section {
  font-family: var(--f-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.mono  { font-family: var(--f-mono); }
.tnum  { font-variant-numeric: tabular-nums; }
.muted { color: var(--r-mute); }
.serif { font-family: var(--f-serif); font-style: italic; }

.rule       { height: 1px; background: var(--r-ink); width: 100%; }
.rule-thin  { height: 1px; background: var(--r-line); width: 100%; }
.hairline   { border: 1px solid var(--r-line); }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-6 > * + * { margin-top: var(--s-6); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
@media (max-width: 760px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-4);
}
.card-grid > * { min-width: 0; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-12 { grid-column: span 12; }
@media (max-width: 1100px) {
  .col-3, .col-4, .col-5 { grid-column: span 6; }
  .col-7, .col-8, .col-9 { grid-column: span 12; }
}
@media (max-width: 700px) {
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
}

/* ============================================================
   CARD — base + accent top borders
   Use: <div class="rcard accent--coral">…</div>
   Coral / flame / sky / lilac / ink / ok / danger / warn / sunset
   ============================================================ */
.rcard {
  background: var(--r-card) !important;
  border: 1px solid var(--r-line-2) !important;   /* darker so border is actually visible on cream */
  border-radius: var(--r-3) !important;
  padding: var(--s-5);
  position: relative !important;
  transition: box-shadow .15s, transform .15s, border-color .15s;
  overflow: hidden;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: var(--sh-2);                         /* lifted */
  margin-bottom: var(--s-4);                       /* default spacing if no flex parent */
}
.rcard:hover { border-color: var(--r-ink-2) !important; }
.rcard.hover-able:hover { box-shadow: var(--sh-3); transform: translateY(-1px); }
/* Inside flex / grid parents the parent's gap controls spacing — kill margin */
.stack-3 > .rcard, .stack-4 > .rcard, .stack-6 > .rcard,
[style*="display: flex"] > .rcard, [style*="display:flex"] > .rcard,
[style*="display: grid"] > .rcard, [style*="display:grid"] > .rcard,
.grid > .rcard, .flex > .rcard {
  margin-bottom: 0;
}
/* Optional vertical stack for cards that opt in */
.rcard.stack { display: flex; flex-direction: column; gap: var(--s-3); }

.rcard[class*="accent--"]::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--r-3) var(--r-3) 0 0;
  background: var(--accent-color, var(--r-coral));
  z-index: 1;
  pointer-events: none;
}
.rcard.accent--coral  { --accent-color: var(--r-coral); }
.rcard.accent--flame  { --accent-color: var(--r-flame); }
.rcard.accent--sky    { --accent-color: var(--r-sky); }
.rcard.accent--lilac  { --accent-color: var(--r-lilac); }
.rcard.accent--ink    { --accent-color: var(--r-ink); }
.rcard.accent--ok     { --accent-color: var(--r-ok); }
.rcard.accent--danger { --accent-color: var(--r-danger); }
.rcard.accent--warn   { --accent-color: var(--r-warn); }
.rcard.accent--sunset::before { background: var(--g-sunset); }

.rcard h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.rcard .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}
.rcard .lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--r-mute);
}

/* Accent legenda (used in design manual page) */
.accent-legend {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  padding: var(--s-3);
  background: var(--r-paper-2);
  border: 1px solid var(--r-line);
  border-radius: var(--r-3);
}
@media (max-width: 1100px) { .accent-legend { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px)  { .accent-legend { grid-template-columns: repeat(2, 1fr); } }
.al-item {
  background: var(--r-card);
  border: 1px solid var(--r-line);
  border-radius: var(--r-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.al-bar { height: 4px; }
.al-tx { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 1px; }
.al-name { font-weight: 600; font-size: 12px; letter-spacing: -0.005em; }
.al-role { font-size: 10px; color: var(--r-mute); line-height: 1.3; }

/* ============================================================
   KPI
   ============================================================ */
.kpi { padding: var(--s-5); }
.kpi .num {
  font-family: var(--f-sans);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: var(--s-3);
}
.kpi .num em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: .55em;
  color: var(--r-mute);
  letter-spacing: -0.01em;
  margin-left: 6px;
}
.kpi .trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-mono);
  font-size: 11px;
  margin-top: var(--s-3);
}
.kpi.up .trend   { color: var(--r-ok); }
.kpi.down .trend { color: var(--r-danger); }
.kpi.flat .trend { color: var(--r-mute); }
.kpi-spark { height: 36px; margin-top: var(--s-2); }
.kpi.feature {
  background: var(--g-feature);
  color: var(--r-paper);
  border-color: var(--r-ink);
}
.kpi.feature .lbl    { color: rgba(255,255,255,.85); }
.kpi.feature .num em { color: rgba(255,255,255,.78); }

/* ============================================================
   CLIENT / PROJECT / TIMER
   ============================================================ */
.client {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-4);
  align-items: center;
}
.avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--r-sky);
  color: var(--r-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.avatar.flow  { background: var(--r-flame); color: var(--r-ink); }
.avatar.ink   { background: var(--r-lilac); color: var(--r-paper); }
.avatar.warm  { background: var(--r-coral); color: var(--r-ink); }
.avatar.sky   { background: var(--r-sky);   color: var(--r-ink); }
.avatar.lilac { background: var(--r-lilac); color: var(--r-paper); }
.avatar.sm    { width: 36px; height: 36px; font-size: 13px; border-radius: 10px; }
.avatar.xs    { width: 24px; height: 24px; font-size: 10px; border-radius: 8px; }

.client .name { font-weight: 600; font-size: 14px; }
.client .meta { font-size: 12px; color: var(--r-mute); }
.client-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-3);
  border-top: 1px solid var(--r-line);
  padding-top: var(--s-3);
  margin-top: var(--s-2);
}
.client-stats .v { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.client-stats .l { font-size: 11px; color: var(--r-mute); margin-top: 1px; }

.project .titlerow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
}
.project .ptitle  { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.project .pclient { font-size: 12px; color: var(--r-mute); margin-top: 2px; }
.project-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  font-size: 12px;
  color: var(--r-mute);
}

.progressbar {
  height: 6px;
  background: var(--r-line);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progressbar > i {
  display: block;
  height: 100%;
  background: var(--r-lilac);
  border-radius: var(--r-full);
  transition: width .4s ease;
}
.project.flow .progressbar > i  { background: var(--r-coral); }
.project.warn .progressbar > i  { background: var(--r-flame); }
.progressbar.over > i { background: var(--r-danger); }

.stack-avatars { display: flex; }
.stack-avatars .a {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--r-card);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--r-ink);
  margin-left: -8px;
  background: var(--r-sky);
}
.stack-avatars .a:first-child { margin-left: 0; }
.stack-avatars .a.coral { background: var(--r-coral); color: var(--r-ink); }
.stack-avatars .a.flame { background: var(--r-flame); color: var(--r-ink); }
.stack-avatars .a.lilac { background: var(--r-lilac); color: var(--r-paper); }

/* Timer */
.timer {
  background: var(--g-timer);
  color: var(--r-paper);
  border-color: var(--r-ink);
}
.timer .lbl { color: rgba(255,255,255,.78); }
.timer .running {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.timer .pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--r-flame);
  box-shadow: 0 0 0 0 rgba(255,194,51,.55);
  animation: r-pulse 1.6s ease-out infinite;
}
@keyframes r-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,194,51,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(255,194,51,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,194,51,0); }
}
.timer .clock {
  font-family: var(--f-mono);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.timer .ctx { color: rgba(255,255,255,.82); font-size: 12px; }
.timer-actions {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

/* ============================================================
   KANBAN
   ============================================================ */
.kanban {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
}
.kcol {
  background: var(--r-paper-2);
  border-radius: var(--r-3);
  padding: var(--s-3);
  min-height: 280px;
}
.kcol h4 {
  margin: 0 0 var(--s-3) 0;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--r-mute);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kcol h4 .count {
  background: var(--r-card);
  border: 1px solid var(--r-line);
  border-radius: var(--r-full);
  padding: 2px 8px;
  font-size: 10px;
  color: var(--r-ink);
}
.ktask {
  background: var(--r-card);
  border: 1px solid var(--r-line);
  border-radius: var(--r-2);
  padding: var(--s-3);
  margin-bottom: var(--s-2);
  display: grid;
  gap: 6px;
  cursor: grab;
}
.ktask .ttext { font-size: 13px; line-height: 1.35; color: var(--r-ink); }
.ktask .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--r-mute);
}
.ktask.priority::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--r-warn);
  border-radius: var(--r-full);
  margin: -2px 0 4px 0;
  width: 28px;
}
.ktask.priority.urgent::before { background: var(--r-danger); }

/* ============================================================
   INVOICE
   ============================================================ */
.invoice .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.invoice .num {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--r-mute);
}
.invoice .amt {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.invoice .amt em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: .55em;
  color: var(--r-mute);
  margin-left: 4px;
}
.invoice .duedate { font-size: 12px; color: var(--r-mute); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--s-4);
  border-radius: var(--r-2);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  background: transparent;
  color: var(--r-ink);
  cursor: pointer;
  font-family: var(--f-sans);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn:hover  { text-decoration: none; }
.btn.primary { background: var(--r-ink); color: var(--r-paper); }
.btn.primary:hover { background: var(--r-ink-2); color: var(--r-paper); }
.btn.flow    { background: var(--r-coral); color: var(--r-ink); }
.btn.flow:hover { background: var(--r-coral-deep); color: var(--r-paper); }
.btn.blue    { background: var(--r-sky); color: var(--r-ink); }
.btn.blue:hover { background: var(--r-sky-deep); color: var(--r-paper); }
.btn.lilac   { background: var(--r-lilac); color: var(--r-paper); }
.btn.lilac:hover { background: var(--r-lilac-deep); }
.btn.outline { border-color: var(--r-line-2); color: var(--r-ink); background: var(--r-card); }
.btn.outline:hover { border-color: var(--r-ink); }
.btn.ghost   { color: var(--r-ink); }
.btn.ghost:hover  { background: var(--r-paper-2); }
.btn.danger  { background: var(--r-danger); color: #fff; }
.btn.danger:hover { background: #b53636; }
.btn.sm { height: 28px; padding: 0 var(--s-3); font-size: 12px; }
.btn.lg { height: 44px; padding: 0 var(--s-5); font-size: 14px; }
.btn-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* Icon-only square button (used inside dark surfaces like timer) */
.iconbtn {
  width: 32px;
  height: 32px;
  border-radius: var(--r-2);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.iconbtn:hover { background: rgba(255,255,255,.14); }

/* ============================================================
   PILLS / BADGES
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--r-full);
  background: var(--r-paper-2);
  color: var(--r-ink-2);
  border: 1px solid var(--r-line);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pill .d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
}
.pill.ok     { background: var(--r-ok-soft);     color: var(--r-ok);        border-color: transparent; }
.pill.warn   { background: var(--r-warn-soft);   color: var(--r-warn);      border-color: transparent; }
.pill.danger { background: var(--r-danger-soft); color: var(--r-danger);    border-color: transparent; }
.pill.info   { background: var(--r-sky-soft);    color: var(--r-sky-deep);  border-color: transparent; }
.pill.flow   { background: var(--r-flame-soft);  color: var(--r-flame-deep); border-color: transparent; }
.pill.coral  { background: var(--r-coral-soft);  color: var(--r-coral-deep); border-color: transparent; }
.pill.lilac  { background: var(--r-lilac-soft);  color: var(--r-lilac-deep); border-color: transparent; }
.pill.ink    { background: var(--r-lilac);       color: var(--r-paper);     border-color: transparent; }

/* Legacy badge-* aliases — map onto pill variants for backward compat
   (allows phased migration of templates) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--r-full);
  background: var(--r-paper-2);
  color: var(--r-ink-2);
  border: 1px solid var(--r-line);
  line-height: 1.4;
  white-space: nowrap;
}
.badge-active, .badge-paid, .badge-done, .badge-completed-ok {
  background: var(--r-ok-soft); color: var(--r-ok); border-color: transparent;
}
.badge-on_hold, .badge-overdue, .badge-review, .badge-medium {
  background: var(--r-warn-soft); color: var(--r-warn); border-color: transparent;
}
.badge-completed, .badge-sent, .badge-in_progress {
  background: var(--r-sky-soft); color: var(--r-sky-deep); border-color: transparent;
}
.badge-archived, .badge-draft, .badge-cancelled, .badge-todo, .badge-low {
  background: var(--r-paper-2); color: var(--r-mute); border-color: var(--r-line);
}
.badge-high, .badge-failed { background: var(--r-coral-soft); color: var(--r-coral-deep); border-color: transparent; }
.badge-urgent { background: var(--r-danger); color: #fff; border-color: transparent; }

/* ============================================================
   FORM
   ============================================================ */
.input,
input[type=text],
input[type=email],
input[type=password],
input[type=search],
input[type=number],
input[type=date],
input[type=time],
input[type=datetime-local],
input[type=tel],
input[type=url],
select,
textarea {
  height: 38px;
  padding: 0 var(--s-3);
  border: 1px solid var(--r-line-2);
  border-radius: var(--r-2);
  background: var(--r-card);
  font-family: var(--f-sans);
  font-size: 13px;
  width: 100%;
  color: var(--r-ink);
}
textarea {
  height: auto;
  padding: var(--s-3);
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
.input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--r-coral);
  box-shadow: var(--sh-glow);
}
.input::placeholder,
input::placeholder,
textarea::placeholder { color: var(--r-mute-2); }

.field { display: grid; gap: 6px; }
.field .lbl,
.field > label {
  font-size: 11px;
  font-weight: 500;
  color: var(--r-ink-2);
  font-family: var(--f-sans);
  text-transform: none;
  letter-spacing: 0;
}
.field .help, .field .hint {
  font-size: 11px;
  color: var(--r-mute);
}
.field.error .input,
.field.error input,
.field.error textarea,
.field.error select { border-color: var(--r-danger); }
.field .err {
  font-size: 11px;
  color: var(--r-danger);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.check .box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--r-line-2);
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: var(--r-card);
}
.check.checked .box,
.check input:checked + .box {
  background: var(--r-ink);
  border-color: var(--r-ink);
  color: #fff;
}

/* ============================================================
   SIDEBAR / NAV
   ============================================================ */
.sidebar-mock {
  background: var(--r-card);
  border: 1px solid var(--r-line);
  border-radius: var(--r-3);
  padding: var(--s-4);
  display: grid;
  gap: var(--s-2);
}
.sidebar-mock .brandrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--s-2);
  border-bottom: 1px solid var(--r-line);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-3);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sidebar-mock .nav { display: grid; gap: 2px; }

.nitem {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-2);
  font-size: 13px;
  color: var(--r-ink-2);
  cursor: pointer;
  text-decoration: none;
}
.nitem:hover { background: var(--r-paper-2); text-decoration: none; }
.nitem.active {
  background: var(--r-coral);
  color: var(--r-ink);
  font-weight: 600;
}
.nitem .num {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--r-mute);
}
.nitem.active .num { color: rgba(27,19,64,.7); }
.nitem .ic {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--r-mute);
}
.nitem.active .ic { color: var(--r-ink); }

.nsection {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--r-mute);
  text-transform: uppercase;
  padding: var(--s-3) 10px var(--s-1);
}

/* ============================================================
   TABLE
   ============================================================ */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--r-ink);
}
.tbl th {
  text-align: left;
  font-weight: 500;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--r-mute);
  padding: 10px var(--s-3);
  border-bottom: 1px solid var(--r-line);
  background: transparent;
}
.tbl td {
  padding: 14px var(--s-3);
  border-bottom: 1px solid var(--r-line);
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: var(--r-paper-2); }
.tbl .lead { font-weight: 600; }
.tbl .num-col { font-variant-numeric: tabular-nums; text-align: right; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty {
  text-align: center;
  padding: var(--s-8) var(--s-5);
  border: 1px dashed var(--r-line-2);
  border-radius: var(--r-3);
  background: var(--r-paper-2);
}
.empty .glyph {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--s-4);
  border-radius: var(--r-3);
  background: var(--r-card);
  border: 1px solid var(--r-line);
  display: grid;
  place-items: center;
  color: var(--r-mute);
}
.empty h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px 0; }
.empty p  { margin: 0 0 var(--s-4) 0; color: var(--r-mute); font-size: 13px; }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  background: var(--g-timer);
  color: var(--r-paper);
  border-radius: var(--r-3);
  padding: var(--s-4) var(--s-5);
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  box-shadow: var(--sh-3);
}
.toast .icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-2);
  background: var(--r-flame);
  color: var(--r-ink);
  display: grid;
  place-items: center;
}
.toast .ttitle { font-size: 13px; font-weight: 600; }
.toast .tdesc  { font-size: 12px; color: rgba(255,255,255,.82); margin-top: 1px; }
.toast .close  { color: rgba(255,255,255,.7); cursor: pointer; }

/* ============================================================
   MODAL
   ============================================================ */
.modal {
  background: var(--r-card);
  border: 1px solid var(--r-line);
  border-radius: var(--r-4);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.modal-head {
  padding: var(--s-5);
  border-bottom: 1px solid var(--r-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-head h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
.modal-body { padding: var(--s-5); display: grid; gap: var(--s-4); }
.modal-foot {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--r-line);
  background: var(--r-paper-2);
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  font-size: 13px;
  border-left: 4px solid var(--r-mute);
  background: var(--r-paper-2);
}
.alert-error,
.alert.danger    { background: var(--r-danger-soft); color: var(--r-danger); border-left-color: var(--r-danger); }
.alert.warn      { background: var(--r-warn-soft);   color: var(--r-warn);   border-left-color: var(--r-warn); }
.alert.ok,
.alert-success   { background: var(--r-ok-soft);     color: var(--r-ok);     border-left-color: var(--r-ok); }
.alert.info      { background: var(--r-sky-soft);    color: var(--r-sky-deep); border-left-color: var(--r-sky); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes r-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes r-slideup {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in  { animation: r-fadein .4s ease-out; }
.animate-slide-up { animation: r-slideup .4s ease-out both; }

/* ============================================================
   COMMENTS / DISCUSSION
   ============================================================ */
.comment {
  border-left: 3px solid var(--r-line);
  padding: var(--s-2) var(--s-4);
  margin-bottom: var(--s-3);
}
.comment .author { font-weight: 600; font-size: 13px; }
.comment .ts     { font-size: 11px; color: var(--r-mute); margin-left: var(--s-2); }
.comment .body   { font-size: 13px; margin-top: 4px; line-height: 1.55; }
.comment .reply  { margin-left: var(--s-5); border-left-color: var(--r-sky); margin-top: var(--s-2); }

/* ============================================================
   LEGACY CLASS ALIASES — backward-compat for templates that have not
   yet been migrated to .rcard / .btn / .pill.
   These delegate to the design-system styles so screens stay coherent.
   ============================================================ */

/* Legacy dashboard `.card` / `.glass-card` → forcefully styled like rcard.
   Lovable bundle defines `.glass-card { background-color: hsl(var(--card)/0.7);
   border-color: hsl(var(--border)/0.5); backdrop-filter: blur(24px) }`. We need
   to defeat those (raqeto.css now loads LAST in <head>, !important on critical
   visual properties for safety). */
.card,
.kpi-card,
.glass-card {
  background: var(--r-card) !important;
  border: 1px solid var(--r-line-2) !important;     /* darker visible border */
  border-radius: var(--r-3) !important;
  padding: var(--s-5);
  margin-bottom: var(--s-4);
  position: relative !important;
  overflow: hidden;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: var(--sh-2);                          /* lifted, not flush */
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.card:hover,
.glass-card:hover {
  box-shadow: var(--sh-3);
  border-color: var(--r-ink-2) !important;
  transform: translateY(-1px);
}
/* Floating popovers / context menus reuse `.glass-card` styling but need
   to escape the relative positioning above. Without this the entry-menu
   in today's schedule (and similar popovers) renders far below the
   viewport because Tailwind's `.fixed` loses to `position: relative !important`. */
.glass-card.fixed    { position: fixed !important; }
.glass-card.absolute { position: absolute !important; }
.glass-card.sticky   { position: sticky !important; }
/* Inside flex/grid parents — parent gap drives spacing, kill margin */
[style*="display: flex"] > .glass-card, [style*="display:flex"] > .glass-card,
[style*="display: grid"] > .glass-card, [style*="display:grid"] > .glass-card,
.grid > .glass-card, .flex > .glass-card,
.space-y-1 > .glass-card, .space-y-2 > .glass-card,
.space-y-3 > .glass-card, .space-y-4 > .glass-card,
.space-y-6 > .glass-card { margin-bottom: 0; }

/* Default coral accent strip — visible on every glass-card. */
.glass-card::before,
.card.accent::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--r-coral);
  z-index: 1;
  pointer-events: none;
}
.glass-card.no-accent::before { display: none !important; }
.glass-card.accent-coral::before  { background: var(--r-coral); }
.glass-card.accent-lilac::before  { background: var(--r-lilac); }
.glass-card.accent-sky::before    { background: var(--r-sky); }
.glass-card.accent-flame::before  { background: var(--r-flame); }
.glass-card.accent-ok::before     { background: var(--r-ok); }
.glass-card.accent-warn::before   { background: var(--r-warn); }
.glass-card.accent-danger::before { background: var(--r-danger); }
.glass-card.accent-sunset::before { background: var(--g-sunset); }
.glass-card.accent-ink::before    { background: var(--r-ink); }

/* Padding override for cards with explicit Tailwind padding utilities (p-3, p-4, p-5).
   Lovable's p-* set padding directly. We add MORE breathing room above the
   content so the accent strip doesn't sit right under text. */
.glass-card.p-3 { padding-top: 14px !important; }
.glass-card.p-4 { padding-top: 18px !important; }
.glass-card.p-5 { padding-top: 22px !important; }

/* When glass-card / rcard sits inside a grid-stack-item:
   • kill margin-bottom (widget owns its slot)
   • take full height of the slot
   • show the accent strip sitting INSIDE the rounded card  */
.grid-stack-item-content > .glass-card,
.grid-stack-item-content > .rcard { margin-bottom: 0 !important; height: 100% !important; }

/* Gridstack widgets — let gridstack control inset (margin: 16 in JS init).
   We DON'T override inset here — that breaks the JS-calculated gaps.
   The grid-stack-item-content default margin:0 + width:auto is correct. */
.kpi-card .label,
.kpi-card .lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--r-mute);
  margin-bottom: 6px;
}
.kpi-card .value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--r-ink);
  font-variant-numeric: tabular-nums;
}
.kpi-card .sub {
  font-size: 12px;
  color: var(--r-mute);
  margin-top: 2px;
}

/* Legacy task-card / kanban-col mapped to ktask / kcol */
.task-card {
  background: var(--r-card);
  border: 1px solid var(--r-line);
  border-radius: var(--r-2);
  padding: var(--s-3);
  margin-bottom: var(--s-2);
  display: grid;
  gap: 6px;
}
.task-card a {
  font-size: 13px;
  font-weight: 500;
  color: var(--r-ink);
  display: block;
}
.task-card a:hover { color: var(--r-coral-deep); text-decoration: none; }
.task-card .meta { font-size: 11px; color: var(--r-mute); }

.kanban-col {
  background: var(--r-paper-2);
  border-radius: var(--r-3);
  padding: var(--s-3);
  min-height: 200px;
}
.kanban-col h3 {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--r-mute);
  margin: 0 0 var(--s-3) 0;
}

/* Legacy buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px var(--s-4);
  border-radius: var(--r-2);
  font-size: 13px;
  font-weight: 500;
  background: var(--r-coral);
  color: var(--r-ink);
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:hover { background: var(--r-coral-deep); color: var(--r-paper); text-decoration: none; }
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px var(--s-4);
  border-radius: var(--r-2);
  font-size: 13px;
  background: var(--r-card);
  color: var(--r-ink);
  border: 1px solid var(--r-line-2);
  text-decoration: none;
  cursor: pointer;
}
.btn-outline:hover { border-color: var(--r-ink); text-decoration: none; }
.btn-sm { padding: 4px var(--s-3); font-size: 12px; }

/* Legacy progress bar */
.progress-bar-wrap {
  background: var(--r-line);
  border-radius: var(--r-full);
  height: 8px;
  margin-top: 6px;
  overflow: hidden;
}
.progress-bar {
  background: var(--r-coral);
  border-radius: var(--r-full);
  height: 100%;
  transition: width 0.4s ease;
}
.progress-bar.over { background: var(--r-danger); }

/* Legacy alert */
.alert-error {
  background: var(--r-danger-soft);
  color: var(--r-danger);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  font-size: 13px;
  border-left: 4px solid var(--r-danger);
}
.alert-success {
  background: var(--r-ok-soft);
  color: var(--r-ok);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  font-size: 13px;
  border-left: 4px solid var(--r-ok);
}

/* Legacy `.muted` text helper variants */
.text-muted { color: var(--r-mute); font-size: 13px; }
.text-mute  { color: var(--r-mute); }

/* Legacy section-label (sidebar nav heading) */
.section-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--r-mute);
  text-transform: uppercase;
  padding: var(--s-3) 10px var(--s-1);
  font-weight: 500;
}

/* Legacy toolbar */
.toolbar {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}

/* ============================================================
   TAILWIND COMPATIBILITY OVERRIDES
   Stránky napříč dashboardem používají Lovable Tailwind utility
   třídy (`bg-primary`, `text-2xl font-bold`, `inline-flex … bg-primary
   text-primary-foreground …`). Tyto overrides je zarovnávají s Raqeto
   designem, aniž bychom museli sahat do každé šablony.
   ============================================================ */

/* Tailwind primary buttons → Raqeto coral */
.bg-primary.text-primary-foreground,
button.bg-primary,
a.bg-primary {
  background: var(--r-coral) !important;
  color: var(--r-ink) !important;
  border: none;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.bg-primary.text-primary-foreground:hover,
button.bg-primary:hover,
a.bg-primary:hover {
  background: var(--r-coral-deep) !important;
  color: var(--r-paper) !important;
  text-decoration: none;
}

/* Text-primary links (used widely for inline links/CTAs) */
.text-primary {
  color: var(--r-coral-deep) !important;
}
.text-primary:hover {
  color: var(--r-coral) !important;
}

/* Tailwind primary tints used for pill backgrounds */
.bg-primary\/15,
.bg-primary\/10 {
  background: var(--r-coral-soft) !important;
}
.bg-primary\/20 {
  background: rgba(255, 106, 61, 0.20) !important;
}
.bg-primary\/30 {
  background: rgba(255, 106, 61, 0.30) !important;
}
.text-primary {
  color: var(--r-coral-deep) !important;
}

/* Accent (lilac) tints */
.bg-accent\/10, .bg-accent\/15 { background: var(--r-lilac-soft) !important; }
.bg-accent\/20 { background: rgba(139, 107, 255, 0.20) !important; }
.text-accent { color: var(--r-lilac-deep) !important; }
.text-accent-foreground { color: var(--r-paper) !important; }
.bg-accent { background: var(--r-lilac) !important; color: var(--r-paper) !important; }

/* Foreground / background utilities on dashboard layouts */
.text-foreground { color: var(--r-ink) !important; }
.bg-card { background: var(--r-card) !important; }
.text-card-foreground { color: var(--r-ink) !important; }

/* Hover states on links inside cards */
.hover\:text-primary:hover { color: var(--r-coral-deep) !important; }
.hover\:text-foreground:hover { color: var(--r-ink) !important; }
.hover\:bg-secondary:hover { background: var(--r-paper-2) !important; }
.hover\:bg-primary\/90:hover { background: var(--r-coral-deep) !important; color: var(--r-paper) !important; }

/* Page titles (text-2xl font-bold pattern across dashboard pages) */
.rq-main-body h1.text-2xl,
.rq-main-body h2.text-2xl {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--r-ink);
}
.rq-main-body .text-muted-foreground {
  color: var(--r-mute) !important;
}

/* Tables inside cards — auto Raqeto-style */
.glass-card table.w-full,
.rcard table.w-full,
.glass-card > table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--r-ink);
}
.glass-card table.w-full thead th,
.rcard table.w-full thead th,
.glass-card > table thead th {
  text-align: left;
  font-weight: 500;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--r-mute);
  padding: 10px var(--s-3);
  border-bottom: 1px solid var(--r-line);
  background: transparent;
}
.glass-card table.w-full tbody td,
.rcard table.w-full tbody td,
.glass-card > table tbody td {
  padding: 12px var(--s-3);
  border-bottom: 1px solid var(--r-line);
  vertical-align: middle;
  color: var(--r-ink);
}
.glass-card table.w-full tbody tr:last-child td,
.rcard table.w-full tbody tr:last-child td,
.glass-card > table tbody tr:last-child td { border-bottom: 0; }
.glass-card table.w-full tbody tr:hover td,
.rcard table.w-full tbody tr:hover td,
.glass-card > table tbody tr:hover td { background: var(--r-paper-2); }

/* Avatar circle (gradient-primary in tables/cells) */
.gradient-primary { background: var(--g-feature) !important; color: var(--r-paper); }
.gradient-accent  { background: var(--g-timer) !important; color: var(--r-paper); }
.gradient-flow    { background: linear-gradient(135deg, var(--r-coral), var(--r-lilac)) !important; color: var(--r-paper); }

/* Search/filter inputs in dashboards */
input[type=search].bg-transparent,
.glass-card input[type=search] {
  background: var(--r-card);
  border: 1px solid var(--r-line);
  border-radius: var(--r-2);
  padding: 6px var(--s-3);
}
input[type=search].bg-transparent:focus,
.glass-card input[type=search]:focus {
  border-color: var(--r-coral);
  box-shadow: var(--sh-glow);
  outline: none;
}

/* Tailwind tag/badge spans inside dashboard pages — already mapped via
   bg-green-100/.text-green-800 etc. in miravento-admin.css */

/* Make sure status colors picked up by Tailwind classes look right
   regardless of theme (light cream vs ink dark). */
.bg-secondary { background: var(--r-paper-2) !important; }
.bg-secondary\/40 { background: rgba(251, 239, 217, 0.40) !important; }
.bg-secondary\/50 { background: rgba(251, 239, 217, 0.50) !important; }
.bg-secondary\/60 { background: rgba(251, 239, 217, 0.60) !important; }
.bg-secondary\/80 { background: rgba(251, 239, 217, 0.80) !important; }
.bg-secondary\/30 { background: rgba(251, 239, 217, 0.30) !important; }

/* Borders in dashboard pages */
.border-border { border-color: var(--r-line) !important; }
.border-border\/30 { border-color: rgba(236, 224, 200, 0.30) !important; }
.border-border\/50 { border-color: rgba(236, 224, 200, 0.50) !important; }
.divide-border > * + * { border-color: var(--r-line) !important; }

/* Fix for `<div class="flex-1 p-6 overflow-y-auto">` not being inside flex parent in our shell */
.rq-main-body > .flex-1.p-6 {
  flex: unset !important;
  padding: var(--s-6);
}
.rq-main-body > div[class*="flex-1"] {
  flex: unset !important;
}

/* ============================================================
   SKELETON SCREENS — placeholder shimmer for async-loaded content
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg,
    var(--r-paper-2) 25%,
    var(--r-line) 50%,
    var(--r-paper-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-2);
  display: block;
}
.skeleton-text { height: 14px; margin: 6px 0; }
.skeleton-text.sm { height: 10px; }
.skeleton-text.lg { height: 18px; }
.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 70%; }
.skeleton-card { height: 100%; min-height: 80px; }
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  body { background: #fff; color: #000; }
  .rcard::before { display: none; }
  .rcard { box-shadow: none; border-color: #ccc; }
  .sidebar-mock, .nav, nav.nav, .toast, .iconbtn { display: none !important; }
}