/* QuestLog. Injected into every page by the questlog-branding nginx (nginx.conf).
   Theme: professional dark, warm charcoal with an amber accent. Built on Vikunja's own CSS variables,
   so upgrades fall back to the stock look rather than break. (Previous cyberpunk theme: archive/cyber-theme/.) */
@import url(/branding/fonts.css);

/* ---------- Palette (forced dark, whichever theme the user picks) ---------- */
:root, :root.dark {
  color-scheme: dark;
  --qw-bg: #1b1a19;
  --qw-surface: #242220;
  --qw-surface-2: #2c2a27;
  --qw-border: #3a3632;
  --qw-text: #ebe5dc;
  --qw-accent: #d39a55;
  --qw-accent-soft: rgba(211, 154, 85, .14);

  --primary-h: 32deg; --primary-s: 58%; --primary-l: 58%;
  --danger-h: 8deg;   --danger-s: 66%;  --danger-l: 63%;
  --warning-h: 39deg; --warning-s: 71%; --warning-l: 63%;
  --success-h: 115deg; --success-s: 23%; --success-l: 62%;
  --info-h: 209deg;   --info-s: 38%;    --info-l: 63%;

  --site-background: var(--qw-bg);
  --white: var(--qw-surface);
  --scheme-main: var(--qw-surface);
  --grey-50: var(--qw-surface);
  --grey-100-hsl: 30, 4%, 10%;   --grey-100: hsl(var(--grey-100-hsl));
  --grey-200: var(--qw-border);
  --grey-300: #4a4540;
  --grey-400: #6e675f;
  --grey-500-hsl: 33, 7%, 60%;   --grey-500: hsl(var(--grey-500-hsl));
  --grey-600: #b3aaa0;
  --grey-700: #cfc7bd;
  --grey-800: var(--qw-text);
  --grey-900-hsl: 36, 33%, 95%;  --grey-900: hsl(var(--grey-900-hsl));
  --text: var(--qw-text);
  --text-strong: #f6f1ea;
  --text-light: #a69d92;
  --link: #e3b27a;
  --border: var(--qw-border);
  --radius: 6px; --radius-small: 4px; --radius-large: 10px;
  --body-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --code-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

html, body { background-color: var(--qw-bg); color: var(--qw-text); }
body, input, textarea, select, button { font-family: var(--body-family) !important; }
::selection { background: rgba(211, 154, 85, .35); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #4a4540 transparent; }

/* ---------- Type ---------- */
/* Vikunja hard-codes Quicksand/Open Sans in these, with scoped (higher-specificity) rules */
h1, h2, h3, h4, h5, h6, .title, .subtitle, .menu-label, .button, .tag, label.label,
.menu-list li, .menu-list a, .project-title, .task h3, .input.title, .username, .bottom-sheet__title,
.notifications .notifications-list .head, .notifications .notifications-list .single-notification .user span,
.result-item-button, .search-result-button, .datepicker-popup__clear,
.calendar-month__month-select, .calendar-month__year-input,
.is-family-primary, .is-family-secondary, .is-family-sans-serif {
  font-family: var(--body-family) !important;
}
h1, h2, h3, .title { color: #f6f1ea; font-weight: 600; letter-spacing: -.01em; }
.menu-label { color: var(--text-light) !important; font-size: .72rem; font-weight: 600; letter-spacing: .06em; }
a:hover { color: #f0c896; }

/* ---------- Surfaces ---------- */
.card, .box, .modal-card, .bucket, .project-card {
  background: var(--qw-surface) !important;
  border: 1px solid var(--qw-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .22) !important;
}
.card-header { border-bottom: 1px solid var(--qw-border); box-shadow: none !important; }
.dropdown-content, .popup, .datepicker-popup {
  background: var(--qw-surface-2) !important; border: 1px solid var(--qw-border) !important;
  border-radius: 8px !important; box-shadow: 0 12px 30px rgba(0, 0, 0, .45) !important;
}

/* ---------- Buttons and inputs ---------- */
.button { border-radius: 6px !important; font-weight: 600; }
.button.is-primary { background: var(--qw-accent) !important; color: #1b1a19 !important; border: 0 !important; }
.button.is-primary:hover, .button.is-primary:focus-visible { background: #e0ab6b !important; }
.button.is-danger { color: #1b1a19 !important; }
.input, .textarea, .select select, .multiselect .input-wrapper, input[type=text], input[type=password], input[type=email], input[type=search] {
  background: #1f1d1b !important; color: var(--qw-text) !important;
  border: 1px solid var(--qw-border) !important; border-radius: 6px !important; box-shadow: none !important;
}
.input:focus, .textarea:focus, .select select:focus, input:focus {
  border-color: var(--qw-accent) !important; box-shadow: 0 0 0 3px rgba(211, 154, 85, .22) !important; outline: none;
}
.input::placeholder, .textarea::placeholder, input::placeholder { color: #7c746a !important; }

/* ---------- Top bar and sidebar ---------- */
.navbar { background: #1f1d1c !important; border-bottom: 1px solid var(--qw-border); box-shadow: none !important; }
.menu-container, aside.menu { background: #201e1c !important; border-right: 1px solid var(--qw-border); }
.menu-list a { border-radius: 6px; }
.menu-list a.router-link-exact-active, .menu-list a.is-active, .menu-list a.router-link-active {
  background: var(--qw-accent-soft) !important; color: #f0c896 !important;
}
.menu-list a:hover { background: rgba(255, 255, 255, .04) !important; }
.top-menu .menu-list li, .top-menu .menu-list a { font-weight: 500; }

/* Header logo (dog + QuestLog wordmark) */
img.logo { height: 40px !important; width: auto !important; max-height: none !important; max-block-size: none !important;
  max-width: min(80vw, 260px) !important; max-inline-size: min(80vw, 260px) !important; object-fit: contain; }

/* ---------- Login page ---------- */
.no-auth-wrapper .image { position: relative; }
.no-auth-wrapper .image::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(27, 26, 25, .8)); }
.no-auth-wrapper .image-title { position: relative; z-index: 1; color: #f6f1ea !important; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }

/* ---------- "Add to home screen" banner: a hint, not a button (iOS can't install from a page) ---------- */
.add-to-home-screen p { font-size: 0 !important; }
.add-to-home-screen p::after {
  content: "To install: on iPhone tap Share, then \201CAdd to Home Screen\201D. On Android tap \22EE, then \201CAdd to Home screen\201D.";
  font-size: .9rem;
}

/* ---------- Mascot swaps ---------- */
/* "Nothing to do": the mullet dog in aviators instead of the cool llama. */
svg.llama-cool { background: url(/branding/nothing-to-do.png) center / contain no-repeat; }
svg.llama-cool > * { display: none; }
/* Loading screen and any other default (inline SVG) llama logo: the round dog. */
svg.logo { background: url(/branding/logo.png) center / contain no-repeat; }
svg.logo > * { display: none; }