/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Agenta brand look & feel — typography and corner radii from the style guide.
 * Inter for body, Inter Tight for display/headings; brand radii 12/8/4px. */
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, .card-title, .stat-value, .navbar .font-semibold {
  font-family: "Inter Tight", system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
}

:root {
  --radius-box: 0.75rem;     /* 12px — cards, modals */
  --radius-field: 0.5rem;    /* 8px — buttons, inputs */
  --radius-selector: 0.25rem;/* 4px — small controls */

  /* Schedule chart — Agenta soft signature palette (per-theme tuned below). */
  --chart-over:   #6B8278;   /* Verdigris — over target */
  --chart-on:     #B8C5BE;   /* Verdigris Soft — on target */
  --chart-under:  #8C2E1B;   /* Cinnabar Deep — under target */
  --chart-target: #B5462E;   /* Cinnabar — target marker */
}

/* Agenta footer wordmark — brand colours per theme.
 * Letters: Obsidian in light (agenta-light), Parchment in the dark theme.
 * Underscore: Cinnabar in both themes. */
.agenta-wordmark { fill: #1B1A24; }
[data-theme="agenta-dark"] .agenta-wordmark { fill: #F4EEE2; }
.agenta-underscore { fill: #B5462E; }

/* Navbar logo badge. Default (dark theme): Cinnabar box, Parchment icon.
 * Light theme: Obsidian box, signature Cinnabar icon. */
.logo-badge { background: var(--color-primary); color: var(--color-primary-content); }
[data-theme="agenta-light"] .logo-badge { background: #1B1A24; color: #B5462E; }

/* Schedule bar hover tooltip — a small graphical stat card. */
.bar-col:hover { z-index: 30; }
.bar-tip {
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translateX(-50%) translateY(-4px);
  z-index: 30;
  width: 124px;
  padding: 10px 12px 11px;
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.bar-col:hover .bar-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}