/* =====================================================================
   RURAL & CO. — PROJECT HUB THEME
   A brand skin for Vikunja, matched to ruraland.co.
   Injected same-origin by the nginx theme layer (see nginx/default.conf).

   Structure:
     1. Fonts + brand tokens
     2. Vikunja variable overrides (recolors most of the app)
     3. Typography
     4. Buttons, links, inputs, focus
     5. Navigation / side menu
     6. Login + register (bespoke branded screen)
     7. Small refinements (scrollbar, tables, cards)

   NOTE: Vikunja's exact class names can shift between releases. Selectors
   here are layered defensively and use !important where they must beat
   Bulma. Final tuning happens against the live instance (see runbook).
   ===================================================================== */

/* Brand fonts, self-hosted same-origin (see theme/Dockerfile fonts stage). */
@import url("/rural/fonts/fonts.css");

/* ---------- 1. Brand tokens ---------- */
:root {
  --rural-red:        #c10202;
  --rural-red-dark:   #9a0202;
  --rural-black:      #1d1d1d;   /* warm charcoal, never pure black */
  --rural-clay:       #d4583b;
  --rural-cream:      #f7f4ef;
  --rural-gray-light: #f4f4f4;
  --rural-gray-rule:  #dddddd;
  --rural-gray-meta:  #999999;
  --rural-white:      #ffffff;

  --rural-font-display: 'Cal Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rural-font-sans:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --rural-font-mono:    'Inconsolata', 'Courier New', monospace;

  --rural-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rural-shadow-card: 0 18px 40px -22px rgba(29, 29, 29, 0.35);
}

/* ---------- 2. Vikunja / Bulma variable overrides ----------
   Overriding these recolors buttons, links, active nav items,
   progress bars, checkboxes and priority accents in one shot. */
:root {
  --primary:            #c10202;
  --primary-dark:       #9a0202;
  --primary-light:      #d4583b;
  --primary-hsl:        2, 98%, 38%;
  --link:               #c10202;
  --link-hover:         #9a0202;

  /* Bulma 1.x custom properties (newer Vikunja builds) */
  --bulma-primary:            #c10202;
  --bulma-primary-h:          2deg;
  --bulma-primary-s:          98%;
  --bulma-primary-l:          38%;
  --bulma-link:               #c10202;
  --bulma-link-text:          #c10202;
  --bulma-link-h:             2deg;
  --bulma-link-s:             98%;
  --bulma-link-l:             38%;
  --bulma-scheme-main:        #ffffff;
  --bulma-text-strong:        #1d1d1d;

  /* App surfaces */
  --site-background:    #f7f4ef;   /* cream page backdrop, like the marketing site */
  --grey-50:            #f7f4ef;
}

/* ---------- 3. Typography ---------- */
body,
#app,
.input, .textarea, .select select,
button, .button {
  font-family: var(--rural-font-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.title, .subtitle,
.card-title,
.project-title,
.namespace-title,
.task-detail .heading {
  font-family: var(--rural-font-display) !important;
  letter-spacing: -0.01em;
  color: var(--rural-black);
}

/* Numbers / IDs / dates read well in the brand mono */
.task-id, code, kbd, .is-code, time.date {
  font-family: var(--rural-font-mono);
}

/* ---------- 4. Buttons, links, inputs, focus ---------- */
a { color: var(--rural-red); }
a:hover { color: var(--rural-red-dark); }

.button.is-primary,
button.is-primary,
.button.is-primary:not(.is-outlined) {
  background-color: var(--rural-red) !important;
  border-color: var(--rural-red) !important;
  color: #fff !important;
  font-weight: 600;
  transition: background-color 0.22s var(--rural-ease),
              transform 0.16s var(--rural-ease),
              box-shadow 0.22s var(--rural-ease);
  box-shadow: 0 8px 18px -12px rgba(193, 2, 2, 0.65); /* tinted, not neon */
}
.button.is-primary:hover { background-color: var(--rural-red-dark) !important; }
.button.is-primary:active { transform: translateY(1px); }  /* tactile push */

.button.is-primary.is-outlined {
  color: var(--rural-red) !important;
  border-color: var(--rural-red) !important;
  background: transparent !important;
}

/* Inputs pick up a red focus ring instead of the default blue */
.input:focus, .textarea:focus, .select select:focus,
input:focus, textarea:focus,
.input:active {
  border-color: var(--rural-red) !important;
  box-shadow: 0 0 0 2px rgba(193, 2, 2, 0.18) !important;
}

:focus-visible {
  outline: 2px solid var(--rural-red);
  outline-offset: 2px;
}

/* Checkboxes, progress, priority accents that use --primary already
   follow through; nudge the "done" checkmark and progress to red. */
.fancycheckbox input:checked + label .check,
progress.progress.is-primary::-webkit-progress-value { background-color: var(--rural-red) !important; }
progress.progress.is-primary { color: var(--rural-red); }

/* ---------- 5. Navigation / side menu ---------- */
/* Vikunja's default menu is dark blue. We move it to a clean cream/white
   rail with charcoal text and red active markers, echoing the site nav. */
.navbar,
.menu-container,
.namespace-container {
  background: var(--rural-cream) !important;
  border-right: 1px solid var(--rural-gray-rule);
}

.menu-container .menu-label,
.namespace-container .menu-label {
  color: var(--rural-gray-meta) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.72rem;
}

.menu-container a,
.namespace-container a {
  color: var(--rural-black) !important;
  border-radius: 8px;
  transition: background-color 0.18s var(--rural-ease), color 0.18s var(--rural-ease);
}
.menu-container a:hover,
.namespace-container a:hover {
  background: rgba(193, 2, 2, 0.06) !important;
  color: var(--rural-red) !important;
}
.menu-container a.router-link-active,
.menu-container li.is-active > a,
.namespace-container a.router-link-active {
  background: rgba(193, 2, 2, 0.10) !important;
  color: var(--rural-red) !important;
  box-shadow: inset 3px 0 0 var(--rural-red);
}

/* Top navbar (task views) on white */
.navbar.is-fixed-top { background: var(--rural-white) !important; border-bottom: 1px solid var(--rural-gray-rule); }

/* If the native custom logo is not used, drop the Rural mark into the
   menu logo slot as a background image fallback. */
.menu-container .logo img,
.navbar .logo img { max-height: 40px; }

/* ---------- 6. Login + register (bespoke branded screen) ----------
   Fitted to Vikunja's real markup: .no-auth-wrapper > .noauth-container
   with the .image brand panel beside the form under .content. */

/* Page backdrop: drop Vikunja's llama watermark for clean cream. */
.no-auth-wrapper { background: var(--rural-cream) !important; }

/* Left panel: charcoal field with a red wash, replacing the stock photo. */
.noauth-container .image {
  background:
    radial-gradient(900px 520px at 28% 22%, rgba(193, 2, 2, 0.22), transparent 62%),
    var(--rural-black) !important;
  position: relative;
}
/* The Rural mark, top-left of the panel. */
.noauth-container .image::before {
  content: "";
  position: absolute;
  top: 42px;
  left: 42px;
  width: 84px;
  height: 84px;
  background: url("/rural/rural-logo-mark.svg") no-repeat center / contain;
}
/* Replace the stock "Welcome Back!" greeting with the Project Hub wordmark. */
.noauth-container .image .image-title {
  font-size: 0 !important;
  line-height: 1;
}
.noauth-container .image .image-title::before {
  content: "Project Hub";
  display: block;
  font-family: var(--rural-font-display);
  font-size: 2.7rem;
  letter-spacing: -0.02em;
  color: var(--rural-cream);
}
.noauth-container .image .image-title::after {
  content: "Make it Human. Make it Matter.";
  display: block;
  margin-top: 12px;
  font-family: var(--rural-font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #cfc7bb;
}
/* Form heading in the display face. */
.noauth-container .content .title {
  font-family: var(--rural-font-display) !important;
  color: var(--rural-black);
}

/* ---------- 7. Refinements ---------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--rural-gray-rule); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--rural-gray-meta); }

.card, .box, .task-detail .details { border-radius: 12px; }

table.table thead th {
  background: var(--rural-gray-light);
  color: var(--rural-black);
  font-weight: 700;
  border-bottom: 1px solid var(--rural-gray-rule);
}
table.table td { border-color: var(--rural-gray-rule); }

/* Priority "urgent"/"high" labels already lean red; keep them on-brand */
.priority-label.high, .priority-label.urgent, .priority-label.do-now {
  color: var(--rural-red) !important;
}

/* ---------- 8. Live refinements (fitted to the real Vikunja DOM) ---------- */
/* Logo: the Rural mark in the navbar (asset served from /rural/). */
a.logo-link img.logo,
.navbar img.logo {
  height: 36px !important;
  width: auto !important;
}

/* Remove Vikunja's decorative blue-circle llama from empty states; it clashes
   with the brand palette. */
svg.llama-cool { display: none !important; }

/* Sidebar "Powered by Vikunja" bottom link: mute it so it recedes. */
aside.menu-container a.menu-bottom-link {
  color: var(--rural-gray-meta) !important;
  font-size: 0.72rem;
  opacity: 0.8;
}