/* ==========================================================================
   josie.wiki -- josiedot design system CSS override for Wiki.js v2
   Injected via Admin > Theme > CSS Override
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font import and custom properties
   -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --jw-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --jw-font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;

  --jw-bg-primary: #f6f6f6;
  --jw-bg-secondary: #ffffff;
  --jw-bg-tertiary: #e0e0e0;
  --jw-text-primary: #333333;
  --jw-text-secondary: #666666;
  --jw-text-tertiary: #999999;
  --jw-border: #e0e0e0;
  --jw-accent: #000000;
  --jw-accent-hover: #333333;

  /* Dark-surface tokens: sidebar + header, unchanged in dark mode */
  --jw-dark-bg: #1a1a1a;
  --jw-dark-bg3: #333333;
  --jw-dark-bg4: #404040;
  --jw-dark-text: #e0e0e0;
  --jw-dark-text2: #a0a0a0;
  --jw-dark-text3: #707070;
}

/* --------------------------------------------------------------------------
   2. Global font override
   -------------------------------------------------------------------------- */

.v-application {
  font-family: var(--jw-font-sans) !important;
}

.v-application .headline,
.v-application .title,
.v-application .subtitle-1,
.v-application .subtitle-2,
.v-application .body-1,
.v-application .body-2,
.v-application .caption,
.v-application .overline,
.v-application .v-btn,
.v-application .v-card,
.v-application .v-list,
.v-application .v-toolbar,
.v-application .v-navigation-drawer,
.v-application .v-footer,
.v-application input,
.v-application textarea {
  font-family: var(--jw-font-sans) !important;
}

/* --------------------------------------------------------------------------
   3. Header (header.nav-header)
   -------------------------------------------------------------------------- */

header.nav-header,
header.nav-header .nav-header-inner {
  background-color: #000000 !important;
}

header.nav-header .v-toolbar__content {
  font-family: var(--jw-font-sans) !important;
}

header.nav-header .v-input__slot {
  background-color: var(--jw-dark-bg3) !important;
  border-radius: 4px !important;
  border: none !important;
}

header.nav-header .v-text-field input,
header.nav-header .search-input input {
  background-color: var(--jw-dark-bg3) !important;
  color: var(--jw-dark-text) !important;
  border-radius: 4px !important;
  border: none !important;
}

header.nav-header .v-text-field input::placeholder,
header.nav-header .search-input input::placeholder {
  color: var(--jw-text-tertiary) !important;
}

header.nav-header .v-label {
  color: var(--jw-text-tertiary) !important;
}

header.nav-header .v-icon,
header.nav-header .v-btn .v-icon {
  color: var(--jw-text-tertiary) !important;
  transition: color 150ms ease-in-out;
}

header.nav-header .v-icon:hover,
header.nav-header .v-btn:hover .v-icon {
  color: #ffffff !important;
}

header.nav-header .v-btn {
  color: var(--jw-text-tertiary) !important;
}

header.nav-header .v-btn:hover {
  color: #ffffff !important;
}

header.nav-header .org-name {
  font-family: var(--jw-font-mono) !important;
  letter-spacing: -0.025em !important;
}

/* --------------------------------------------------------------------------
   4. Sidebar (.v-navigation-drawer)
   -------------------------------------------------------------------------- */

.v-navigation-drawer,
.v-navigation-drawer.primary,
.v-application .v-navigation-drawer.primary {
  background-color: var(--jw-dark-bg) !important;
}

.v-navigation-drawer .v-navigation-drawer__border {
  display: none !important;
}

.v-navigation-drawer .v-list,
.v-navigation-drawer.primary .v-list,
.v-application .v-navigation-drawer .v-list.primary {
  background-color: var(--jw-dark-bg) !important;
}

.v-navigation-drawer .v-list-item {
  color: var(--jw-dark-text) !important;
  font-size: 0.875rem !important;
  transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
}

.v-navigation-drawer .v-list-item .v-list-item__title {
  color: var(--jw-dark-text) !important;
  font-size: 0.875rem !important;
  font-family: var(--jw-font-sans) !important;
}

.v-navigation-drawer .v-list-item:hover {
  background-color: var(--jw-dark-bg3) !important;
}

.v-navigation-drawer .v-list-item--active,
.v-navigation-drawer .v-list-item.v-list-item--active {
  background-color: var(--jw-dark-bg4) !important;
}

.v-navigation-drawer .v-list-item--active .v-list-item__title,
.v-navigation-drawer .v-list-item.v-list-item--active .v-list-item__title {
  color: #ffffff !important;
}

.v-navigation-drawer .v-list-item .v-icon {
  color: var(--jw-dark-text3) !important;
  transition: color 150ms ease-in-out;
}

.v-navigation-drawer .v-list-item--active .v-icon {
  color: var(--jw-dark-text) !important;
}

.v-navigation-drawer .v-divider {
  border-color: var(--jw-dark-bg4) !important;
}

/* --------------------------------------------------------------------------
   5. Content area background
   -------------------------------------------------------------------------- */

main.v-main .container,
main.v-main .container.grey,
main.v-main .container.grey.lighten-4 {
  background-color: var(--jw-bg-primary) !important;
}

.page-col-content {
  color: var(--jw-text-primary) !important;
}

.page-header-headings,
.page-header-headings .headline,
.page-header-headings .text-h4,
.page-header-headings .text-h5 {
  font-family: var(--jw-font-sans) !important;
  color: var(--jw-text-primary) !important;
}

main.v-main .v-divider {
  border-color: var(--jw-border) !important;
}

/* --------------------------------------------------------------------------
   6. Content typography (.contents)
   -------------------------------------------------------------------------- */

.contents {
  font-family: var(--jw-font-sans) !important;
  color: var(--jw-text-primary) !important;
  line-height: 1.5 !important;
}

.contents h1 {
  font-size: 2.25rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
  margin-bottom: 1rem !important;
  color: var(--jw-text-primary) !important;
  border-bottom: none !important;
}

.contents h1::after,
.contents h2::after,
.contents h3::after {
  display: none !important;
}

.contents h2 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
  color: var(--jw-text-primary) !important;
  border-bottom: none !important;
}

.contents h3 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
  color: var(--jw-text-primary) !important;
}

.contents h4,
.contents h5,
.contents h6 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
  color: var(--jw-text-primary) !important;
}

.contents p {
  margin-bottom: 1rem !important;
  color: var(--jw-text-primary) !important;
}

.contents a {
  color: var(--jw-text-primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.contents a:hover {
  color: var(--jw-accent-hover) !important;
}

.contents .toc-anchor {
  text-decoration: none !important;
  color: var(--jw-text-tertiary) !important;
}

.contents blockquote {
  border-left: 4px solid var(--jw-border) !important;
  padding-left: 1rem !important;
  margin: 1rem 0 !important;
  color: var(--jw-text-secondary) !important;
  background: none !important;
}

.contents code {
  font-family: var(--jw-font-mono) !important;
  font-size: 0.875rem !important;
  background-color: var(--jw-bg-tertiary) !important;
  border-radius: 4px !important;
  padding: 0.125rem 0.375rem !important;
  color: var(--jw-text-primary) !important;
}

.contents pre {
  background-color: var(--jw-dark-bg) !important;
  color: var(--jw-dark-text) !important;
  padding: 1.5rem !important;
  border-radius: 8px !important;
  margin: 1rem 0 !important;
  overflow-x: auto !important;
}

.contents pre code {
  background: none !important;
  color: var(--jw-dark-text) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

.contents table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1rem 0 !important;
}

.contents table th,
.contents table td {
  border: 1px solid var(--jw-border) !important;
  padding: 0.5rem 0.75rem !important;
  text-align: left !important;
}

.contents table th {
  font-weight: 600 !important;
  background-color: var(--jw-bg-tertiary) !important;
}

.contents table tr:nth-child(even) td {
  background-color: var(--jw-bg-secondary) !important;
}

.contents hr {
  border: none !important;
  border-top: 1px solid var(--jw-border) !important;
  margin: 1.5rem 0 !important;
}

.contents ul,
.contents ol {
  padding-left: 1.5rem !important;
  margin-bottom: 1rem !important;
}

.contents li {
  margin-bottom: 0.25rem !important;
}

/* --------------------------------------------------------------------------
   7. Sidebar cards (.page-col-sd)
   -------------------------------------------------------------------------- */

.page-col-sd .v-card {
  background-color: var(--jw-bg-secondary) !important;
  border: 1px solid var(--jw-border) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

.page-col-sd .overline,
.page-col-sd .overline.blue--text,
.page-col-sd .overline.blue--text.text--lighten-2,
.page-col-sd .overline.primary--text {
  color: var(--jw-text-tertiary) !important;
  font-family: var(--jw-font-sans) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
}

.page-col-sd .v-list {
  background-color: transparent !important;
}

.page-col-sd .v-list-item {
  color: var(--jw-text-primary) !important;
}

.page-col-sd .v-list-item:hover {
  background-color: var(--jw-bg-primary) !important;
}

.page-col-sd .v-list-item:hover .v-list-item__title {
  text-decoration: underline !important;
}

.page-col-sd .v-list-item__title {
  font-size: 0.875rem !important;
  font-family: var(--jw-font-sans) !important;
  color: var(--jw-text-primary) !important;
}

.page-col-sd .v-icon {
  color: var(--jw-text-tertiary) !important;
}

.page-col-sd .page-author-card,
.page-col-sd .page-author-card .caption {
  color: var(--jw-text-secondary) !important;
}

.page-col-sd .v-btn {
  font-family: var(--jw-font-sans) !important;
}

.page-col-sd .page-shortcuts-card {
  background-color: transparent !important;
  border: none !important;
}

/* --------------------------------------------------------------------------
   8. Buttons, FAB, and form inputs
   -------------------------------------------------------------------------- */

.v-application .v-btn:not(.v-btn--icon):not(.v-btn--fab) {
  border-radius: 8px !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  font-family: var(--jw-font-sans) !important;
}

.v-application .v-btn.primary,
.v-application .v-btn:not(.v-btn--outlined).primary {
  background-color: var(--jw-accent) !important;
  color: #ffffff !important;
}

.v-application .v-btn.primary:hover,
.v-application .v-btn:not(.v-btn--outlined).primary:hover {
  background-color: var(--jw-accent-hover) !important;
}

.v-application .v-btn--outlined {
  border-color: var(--jw-border) !important;
  color: var(--jw-text-primary) !important;
}

.v-speed-dial .v-btn--fab {
  background-color: var(--jw-accent) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

.v-speed-dial .v-btn--fab:hover {
  background-color: var(--jw-accent-hover) !important;
}

.v-speed-dial .v-btn--fab .v-icon {
  color: #ffffff !important;
}

.v-application .v-text-field .v-input__slot {
  border-radius: 8px !important;
}

.v-application .v-text-field--outlined .v-input__slot {
  border-color: var(--jw-border) !important;
}

.v-application .v-text-field input {
  font-family: var(--jw-font-sans) !important;
}

.v-application textarea {
  font-family: var(--jw-font-sans) !important;
}

/* --------------------------------------------------------------------------
   9. Comments
   -------------------------------------------------------------------------- */

.comments-container .v-card {
  background-color: var(--jw-bg-secondary) !important;
  box-shadow: none !important;
  border: 1px solid var(--jw-border) !important;
  border-radius: 8px !important;
}

.comments-container .v-toolbar,
.comments-container .v-sheet.primary,
.comments-container .v-card > .primary,
.v-application .comments-container .primary {
  background-color: var(--jw-dark-bg) !important;
  color: var(--jw-dark-text) !important;
  border-radius: 8px 8px 0 0 !important;
}

.comments-container .v-toolbar .v-icon {
  color: var(--jw-dark-text) !important;
}

.comments-container textarea {
  font-family: var(--jw-font-sans) !important;
  border-radius: 8px !important;
}

.comments-container .v-btn.primary {
  background-color: var(--jw-accent) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

.comments-container .caption,
.comments-container .overline {
  color: var(--jw-text-tertiary) !important;
  font-family: var(--jw-font-sans) !important;
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.v-footer {
  background-color: var(--jw-bg-primary) !important;
  border-top: 1px solid var(--jw-border) !important;
}

.v-footer .caption {
  color: var(--jw-text-tertiary) !important;
  font-family: var(--jw-font-sans) !important;
  font-size: 0.75rem !important;
}

.v-footer a {
  color: var(--jw-text-tertiary) !important;
  text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   11. Search dialog
   -------------------------------------------------------------------------- */

.v-dialog .search-container {
  border-radius: 8px !important;
}

.v-dialog .v-card {
  border-radius: 8px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.v-overlay__scrim {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

.v-dialog .v-text-field input,
.v-dialog .search-input input {
  font-family: var(--jw-font-sans) !important;
  font-size: 1.125rem !important;
}

.v-dialog .v-list,
.v-dialog .v-list-item__title {
  font-family: var(--jw-font-sans) !important;
}

/* --------------------------------------------------------------------------
   12. Dark mode
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --jw-bg-primary: #1a1a1a;
    --jw-bg-secondary: #2a2a2a;
    --jw-bg-tertiary: #404040;
    --jw-text-primary: #e0e0e0;
    --jw-text-secondary: #a0a0a0;
    --jw-text-tertiary: #707070;
    --jw-border: #404040;
    --jw-accent: #ffffff;
    --jw-accent-hover: #cccccc;
  }

  .v-application {
    background-color: var(--jw-bg-primary) !important;
    color: var(--jw-text-primary) !important;
  }

  .v-application .theme--light.v-card,
  .v-application .theme--light.v-sheet,
  .v-application .theme--dark.v-card,
  .v-application .theme--dark.v-sheet {
    background-color: var(--jw-bg-secondary) !important;
    color: var(--jw-text-primary) !important;
  }

  .v-application .theme--light.v-list,
  .v-application .theme--dark.v-list {
    background-color: transparent !important;
    color: var(--jw-text-primary) !important;
  }

  .v-application .theme--light.v-list-item,
  .v-application .theme--dark.v-list-item {
    color: var(--jw-text-primary) !important;
  }

  .v-application .theme--light.v-list-item .v-list-item__title,
  .v-application .theme--light.v-list .v-list-item__title,
  .v-application .theme--dark.v-list-item .v-list-item__title,
  .v-application .theme--dark.v-list .v-list-item__title {
    color: var(--jw-text-primary) !important;
  }

  .v-application .theme--light.v-divider,
  .v-application .theme--dark.v-divider {
    border-color: var(--jw-border) !important;
  }

  /* Keep sidebar/header dark -- override the broad theme--dark rules above */
  .v-navigation-drawer,
  .v-navigation-drawer.theme--dark,
  .v-navigation-drawer .v-list {
    background-color: var(--jw-dark-bg) !important;
    color: var(--jw-dark-text) !important;
  }

  .v-navigation-drawer .v-list-item {
    color: var(--jw-dark-text) !important;
  }

  .v-navigation-drawer .v-list-item .v-list-item__title {
    color: var(--jw-dark-text) !important;
  }

  .v-navigation-drawer .v-list-item--active .v-list-item__title {
    color: #ffffff !important;
  }

  .v-application .theme--light.v-footer,
  .v-footer {
    background-color: var(--jw-bg-primary) !important;
    border-top-color: var(--jw-border) !important;
  }

  .v-speed-dial .v-btn--fab,
  .v-speed-dial .v-btn--fab.primary {
    background-color: #ffffff !important;
  }

  .v-speed-dial .v-btn--fab .v-icon {
    color: #000000 !important;
  }

  header.nav-header,
  header.nav-header .nav-header-inner {
    background-color: var(--jw-dark-bg) !important;
  }

  .v-application .v-btn.primary,
  .v-application .v-btn:not(.v-btn--outlined).primary {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

  .v-application .v-btn.primary:hover,
  .v-application .v-btn:not(.v-btn--outlined).primary:hover {
    background-color: #cccccc !important;
  }

  .comments-container .v-btn.primary {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

  .comments-container .v-toolbar,
  .comments-container .v-sheet.primary,
  .comments-container .v-card > .primary {
    background-color: var(--jw-dark-bg) !important;
    color: var(--jw-dark-text) !important;
  }

  .page-header-headings,
  .page-header-headings .headline,
  .page-header-headings .text-h4,
  .page-header-headings .text-h5 {
    color: var(--jw-text-primary) !important;
  }
}