/*
 * Application stylesheet
 *
 * Loaded via `stylesheet_link_tag :app` in app/views/layouts/application.html.erb.
 * Uses hard-coded hex values so the brand look applies even before Tailwind
 * recompiles its tokens.
 *
 * Melhores Destinos brand palette
 * --------------------------------
 *   primary blue : #0099dc  (logo / nav headers)
 *   primary 600  : #0082bd  (hover/active)
 *   primary 700  : #006a9c  (sidebar background)
 *   primary 800  : #00547b  (deep accents)
 *   primary 50   : #e6f5fb  (page background tint)
 *   accent orange: #ff8200  (promo / CTA badge)
 */

/* Web font for clean, readable UI text (the @import must come first). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Light-only product: render native controls/scrollbars in light and stop
     prefers-color-scheme:dark from affecting UA-styled elements. */
  color-scheme: light;

  --md-blue-50:  #e6f5fb;
  --md-blue-100: #cceaf7;
  --md-blue-200: #99d5ee;
  --md-blue-500: #0099dc;
  --md-blue-600: #0082bd;
  --md-blue-700: #006a9c;
  --md-blue-800: #00547b;
  --md-blue-900: #003d5a;
  --md-orange-500: #ff8200;
  --md-orange-600: #e67400;

  /* Typography */
  --md-font-sans: "Inter", "Helvetica Neue", "Segoe UI", system-ui, -apple-system, "Apple Color Emoji", Arial, sans-serif;
  --md-text-strong: #0b1220; /* near-black for body copy */
  --md-text-muted:  #475569; /* slate-600 — readable on blue-tinted bg */
}

/* -------------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------------- */

body.md-app {
  font-family: var(--md-font-sans);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Headings: bolder, tighter letter-spacing, MD blue */
body.md-app h1,
body.md-app h2,
body.md-app h3,
body.md-app h4 {
  font-family: var(--md-font-sans);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

body.md-app h1 { font-size: 1.75rem; }
body.md-app h2 { font-size: 1.375rem; }
body.md-app h3 { font-size: 1.125rem; }

/* Bump readability of secondary text (Tailwind's slate-500 / zinc-500 is too
 * faint against the blue-tinted page background). */
body.md-app .text-slate-500,
body.md-app [class*="text-slate-500"],
body.md-app .text-slate-600,
body.md-app [class*="text-slate-600"],
body.md-app main .text-zinc-500,
body.md-app main [class*="text-zinc-500"] {
  color: var(--md-text-muted) !important;
}

/* Form labels stay readable */
body.md-app label {
  font-weight: 500;
}

/* Inputs use the same crisp font and a slightly heavier weight */
body.md-app input,
body.md-app textarea,
body.md-app select,
body.md-app button {
  font-family: var(--md-font-sans);
  font-size: 15px;
}

body.md-app input[type="text"],
body.md-app input[type="email"],
body.md-app input[type="password"],
body.md-app input[type="search"],
body.md-app input[type="number"],
body.md-app textarea {
  color: var(--md-text-strong);
  font-weight: 500;
}

/* Sidebar typography: slightly heavier so it stays crisp on the blue gradient */
body.md-app nav.flex.h-full.min-h-0.flex-col {
  font-family: var(--md-font-sans);
  font-weight: 500;
  letter-spacing: 0.005em;
}

body.md-app nav.flex.h-full.min-h-0.flex-col h3 {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

/* -------------------------------------------------------------------------
 * Page background
 * ------------------------------------------------------------------------- */

body.md-app {
  background-color: var(--md-blue-50);
  color: var(--md-text-strong);
}

/* The Catalyst sidebar layout sets its outer wrapper to lg:bg-zinc-100 — keep
 * that area on-brand instead. */
body.md-app > main > div,
body.md-app .relative.isolate.flex.min-h-svh {
  background-color: var(--md-blue-50);
}

/* -------------------------------------------------------------------------
 * Sidebar (desktop)
 * ------------------------------------------------------------------------- */

/* The Sidebar component renders <nav class="flex h-full min-h-0 flex-col">.
 * Paint it MD blue with white text. */
body.md-app nav.flex.h-full.min-h-0.flex-col {
  background: linear-gradient(180deg, var(--md-blue-700) 0%, var(--md-blue-800) 100%);
  color: #ffffff;
  border-right: 1px solid var(--md-blue-900);
}

/* Sidebar item text + icons */
body.md-app nav.flex.h-full.min-h-0.flex-col a,
body.md-app nav.flex.h-full.min-h-0.flex-col button,
body.md-app nav.flex.h-full.min-h-0.flex-col span,
body.md-app nav.flex.h-full.min-h-0.flex-col h3 {
  color: #ffffff !important;
}

body.md-app nav.flex.h-full.min-h-0.flex-col svg {
  fill: #ffffff;
  color: #ffffff;
}

/* Hover/active backgrounds inside the sidebar */
body.md-app nav.flex.h-full.min-h-0.flex-col a:hover,
body.md-app nav.flex.h-full.min-h-0.flex-col button:hover {
  background-color: rgba(255, 255, 255, 0.603);
}

/* Internal dividers (top/bottom borders) */
body.md-app nav.flex.h-full.min-h-0.flex-col [class*="border-zinc-950/5"],
body.md-app nav.flex.h-full.min-h-0.flex-col hr {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Current-route indicator pill */
body.md-app nav.flex.h-full.min-h-0.flex-col [class*="bg-zinc-950"] {
  background-color: var(--md-zing-950) !important;
}

/* Email/handle in the sidebar footer should be slightly muted */
body.md-app nav.flex.h-full.min-h-0.flex-col .text-zinc-500,
body.md-app nav.flex.h-full.min-h-0.flex-col [class*="text-zinc-500"] {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* -------------------------------------------------------------------------
 * Brand avatar squares (the small "MD" logos) — Catalyst uses bg-zinc-900
 * ------------------------------------------------------------------------- */

body.md-app [class*="bg-zinc-900"] {
  background-color: #ffffff !important;
  color: var(--md-blue-500) !important;

}

/* -------------------------------------------------------------------------
 * Mobile top navbar
 * ------------------------------------------------------------------------- */

body.md-app header {
  background-color: var(--md-blue-700);
  color: #ffffff;
}

body.md-app header svg {
  fill: #ffffff !important;
}

/* -------------------------------------------------------------------------
 * Main content panel
 * ------------------------------------------------------------------------- */

/* Catalyst gives the inner content panel a white card with a subtle ring.
 * Keep it readable but add a blue top accent and brand-blue headings. */
body.md-app main > div {
}

/* Headings — cover both the auth pages (server-rendered) and React screens. */
body.md-app h1,
body.md-app h2,
body.md-app h3 {
  color: var(--md-blue-700);
}

/* Devise auth section card heading: keep it strong blue */
body.md-app section h1 {
  color: var(--md-blue-700);
}

/* -------------------------------------------------------------------------
 * Primary buttons / submit (server-rendered forms)
 * ------------------------------------------------------------------------- */

body.md-app input[type="submit"],
body.md-app button[type="submit"] {
  background-color: var(--md-blue-600);
  color: #ffffff;
  border: none;
}

body.md-app input[type="submit"]:hover,
body.md-app button[type="submit"]:hover {
  background-color: var(--md-blue-500);
}

/* -------------------------------------------------------------------------
 * Links inside content
 * ------------------------------------------------------------------------- */

body.md-app main a {
  color: var(--md-blue-600);
}

body.md-app main a:hover {
  color: var(--md-blue-500);
}

/* -------------------------------------------------------------------------
 * Markdown-to-HTML rendered content (.md-to-html)
 * Applied to every dangerouslySetInnerHTML block that comes from Redcarpet
 * (post-processings, reviews, regenerated outputs).
 * ------------------------------------------------------------------------- */

.md-to-html {
  color: #0b1220;
  font-size: 0.9375rem;  /* 15px */
  line-height: 1.75;
}

.md-to-html h1,
.md-to-html h2,
.md-to-html h3,
.md-to-html h4,
.md-to-html h5,
.md-to-html h6 {
  color: #0b1220;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-top: 1.75em;
  margin-bottom: 0.5em;
}

.md-to-html h1 { font-size: 1.5rem; }
.md-to-html h2 { font-size: 1.25rem; }
.md-to-html h3 { font-size: 1.0625rem; }
.md-to-html h4,
.md-to-html h5,
.md-to-html h6 { font-size: 0.9375rem; }

.md-to-html p {
  color: #0b1220;
  margin-top: 0;
  margin-bottom: 1em;
}

.md-to-html ul,
.md-to-html ol {
  color: #0b1220;
  margin-top: 0.5em;
  margin-bottom: 1em;
  padding-left: 1.5em;
}

.md-to-html ul { list-style-type: disc; }
.md-to-html ol { list-style-type: decimal; }

.md-to-html li {
  color: #0b1220;
  margin-bottom: 0.35em;
}

.md-to-html strong,
.md-to-html b {
  color: #0b1220;
  font-weight: 600;
}

.md-to-html em,
.md-to-html i {
  color: #0b1220;
}

.md-to-html a {
  color: var(--md-blue-600);
}

.md-to-html a:hover {
  color: var(--md-blue-500);
}

.md-to-html code {
  color: #0b1220;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  font-size: 0.875em;
  padding: 0.1em 0.35em;
}

.md-to-html pre {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  margin-bottom: 1em;
}

.md-to-html pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.875rem;
  color: #0b1220;
}

.md-to-html blockquote {
  color: #0b1220;
  border-left: 3px solid var(--md-blue-500);
  margin: 1em 0;
  padding: 0.25em 0 0.25em 1em;
  font-style: italic;
}

.md-to-html hr {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 1.5em 0;
}

.md-to-html table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
  font-size: 0.875rem;
}

.md-to-html th,
.md-to-html td {
  color: #0b1220;
  border: 1px solid #e2e8f0;
  padding: 0.5em 0.75em;
  text-align: left;
}

.md-to-html th {
  background-color: #f1f5f9;
  font-weight: 600;
}