@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

/* =========================================================
   Decap CMS Custom Theme – Schaakclub Dordrecht
   Warm earth-tone palette to match the public website
   ========================================================= */

/* ---------------------------------------------------------
   CSS Custom Properties (mirrors src/styles/global.css)
   --------------------------------------------------------- */
:root {
  --scd-linen: #EDE9E6;
  --scd-tan: #C9996B;
  --scd-brown: #5C4F4A;
  --scd-sage: #5C766D;
  --scd-brown-light: #7a6b65;
  --scd-sage-light: #8aa39a;
  --scd-sage-dark: #4a5f57;
  --scd-accent-light: #e6b894;
  --scd-surface: #FFFFFF;
  --scd-text: #5C4F4A;
  --scd-text-muted: #8a7e78;
  --scd-border: #d6cfc9;

  --font-sans: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
}

/* ---------------------------------------------------------
   Base / Typography
   --------------------------------------------------------- */
body,
.nc-app {
  font-family: var(--font-sans) !important;
  background-color: var(--scd-linen) !important;
  color: var(--scd-text) !important;
}

h1, h2, h3, h4, h5, h6,
.nc-appHeader-siteTitle,
.nc-collectionPage-heading,
.nc-editorContainer-title,
.nc-controlPane-widgets h2,
.nc-listControl-objectLabel,
.nc-workflow-cardTitle,
.nc-entryCard-title,
.nc-collectionPage-sidebarHeading {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  color: var(--scd-brown) !important;
}

/* ---------------------------------------------------------
   Top Header Bar (mirrors website sticky header)
   --------------------------------------------------------- */
.nc-appHeader {
  background-color: var(--scd-brown) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.nc-appHeader a,
.nc-appHeader button,
.nc-appHeader-siteTitle {
  color: #fff !important;
}

.nc-appHeader a:hover,
.nc-appHeader button:hover {
  color: var(--scd-accent-light) !important;
}

.nc-appHeader-backArrow {
  color: #fff !important;
}

/* Avatar / user menu */
.nc-appHeader-avatar {
  border: 2px solid var(--scd-tan) !important;
}

/* ---------------------------------------------------------
   Sidebar (Collections nav)
   --------------------------------------------------------- */
.nc-collectionPage-sidebar {
  background-color: var(--scd-brown) !important;
  border-right: none !important;
}

.nc-collectionPage-sidebarHeading {
  color: #fff !important;
  font-family: var(--font-serif) !important;
}

.nc-collectionPage-sidebarNavLink {
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--font-sans) !important;
  border-radius: 0.375rem !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.nc-collectionPage-sidebarNavLink:hover {
  background-color: var(--scd-brown-light) !important;
  color: #fff !important;
}

.nc-collectionPage-sidebarNavLink-active {
  background-color: var(--scd-sage) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------
   Main Content Area
   --------------------------------------------------------- */
.nc-collectionPage-main,
.nc-editorContainer {
  background-color: var(--scd-linen) !important;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.nc-button {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  border-radius: 0.375rem !important;
  transition: all 0.2s ease !important;
}

/* Primary buttons → brown */
.nc-button-default,
.nc-button-primary {
  background-color: var(--scd-brown) !important;
  color: #fff !important;
  border: none !important;
}

.nc-button-default:hover,
.nc-button-primary:hover {
  background-color: var(--scd-brown-light) !important;
}

/* Secondary / warm buttons → tan */
.nc-button-secondary {
  background-color: var(--scd-tan) !important;
  color: var(--scd-brown) !important;
  border: none !important;
}

.nc-button-secondary:hover {
  background-color: var(--scd-accent-light) !important;
}

/* Danger / red buttons – keep functional but soften */
.nc-button-red {
  background-color: #b94a48 !important;
  color: #fff !important;
}

/* ---------------------------------------------------------
   Cards (entry listings, workflow cards, etc.)
   --------------------------------------------------------- */
.nc-entryListing-card,
.nc-workflow-card,
.nc-controlPane-widget,
.nc-objectWidget-topBar,
.nc-listControl-item {
  background-color: var(--scd-surface) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid var(--scd-border) !important;
}

.nc-entryListing-card:hover,
.nc-workflow-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ---------------------------------------------------------
   Tables (listing rows)
   --------------------------------------------------------- */
.nc-listControl-objectLabel,
.nc-listControl-objectLabel:hover {
  background-color: transparent !important;
}

.nc-listControl-item {
  border-bottom: 1px solid var(--scd-border) !important;
}

.nc-listControl-item:hover {
  background-color: rgba(92, 118, 109, 0.15) !important;
}

/* ---------------------------------------------------------
   Form Inputs
   --------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
textarea,
select,
.nc-textField-input,
.nc-textarea-input,
.nc-dateTime-input,
.nc-select-input {
  font-family: var(--font-sans) !important;
  background-color: var(--scd-surface) !important;
  color: var(--scd-text) !important;
  border: 1px solid var(--scd-border) !important;
  border-radius: 0.375rem !important;
  padding: 0.75rem 1rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input:focus,
textarea:focus,
select:focus,
.nc-textField-input:focus,
.nc-textarea-input:focus,
.nc-dateTime-input:focus,
.nc-select-input:focus {
  border-color: var(--scd-sage) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(92, 118, 109, 0.2) !important;
}

/* Labels */
.nc-controlPane-label,
.nc-field-label {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  color: var(--scd-brown) !important;
}

/* ---------------------------------------------------------
   Markdown Editor tweaks
   --------------------------------------------------------- */
.nc-editor-toolbar {
  background-color: var(--scd-surface) !important;
  border-bottom: 1px solid var(--scd-border) !important;
}

.nc-editor-toolbar button {
  color: var(--scd-brown) !important;
}

.nc-editor-toolbar button:hover {
  background-color: rgba(92, 118, 109, 0.15) !important;
  color: var(--scd-sage-dark) !important;
}

/* Editor pane background */
.nc-editorContainer-pane,
.nc-splitPane-pane {
  background-color: var(--scd-surface) !important;
}

/* ---------------------------------------------------------
   Login / Authentication screen
   --------------------------------------------------------- */
.nc-login {
  background-color: var(--scd-linen) !important;
}

.nc-login-card {
  background-color: var(--scd-surface) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid var(--scd-border) !important;
}

.nc-login-card h1 {
  font-family: var(--font-serif) !important;
  color: var(--scd-brown) !important;
}

.nc-loginButton {
  background-color: var(--scd-brown) !important;
  color: #fff !important;
  border-radius: 0.375rem !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
}

.nc-loginButton:hover {
  background-color: var(--scd-brown-light) !important;
}

/* ---------------------------------------------------------
   Dropdowns / Menus
   --------------------------------------------------------- */
.nc-dropdown-list {
  background-color: var(--scd-surface) !important;
  border: 1px solid var(--scd-border) !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.nc-dropdown-list button {
  color: var(--scd-text) !important;
}

.nc-dropdown-list button:hover {
  background-color: rgba(92, 118, 109, 0.15) !important;
  color: var(--scd-brown) !important;
}

/* ---------------------------------------------------------
   Scrollbar (matches website custom scrollbar)
   --------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scd-linen);
}

::-webkit-scrollbar-thumb {
  background: var(--scd-sage-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scd-sage);
}

/* ---------------------------------------------------------
   Selection
   --------------------------------------------------------- */
::selection {
  background-color: var(--scd-tan);
  color: var(--scd-brown);
}

/* ---------------------------------------------------------
   Deploy Status Bar
   --------------------------------------------------------- */
.scd-deploy-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: background-color 0.2s ease;
}

.scd-deploy-bar__icon {
  font-size: 14px;
  line-height: 1;
}

.scd-deploy-bar__text {
  line-height: 1;
}

/* Success (sage green) */
.scd-deploy-bar--success {
  background-color: rgba(92, 118, 109, 0.12);
  color: #3d524a;
  border-bottom-color: rgba(92, 118, 109, 0.25);
}
.scd-deploy-bar--success:hover {
  background-color: rgba(92, 118, 109, 0.2);
}

/* In progress (tan/amber) */
.scd-deploy-bar--in-progress {
  background-color: rgba(201, 153, 107, 0.15);
  color: #7a5a3a;
  border-bottom-color: rgba(201, 153, 107, 0.35);
}
.scd-deploy-bar--in-progress:hover {
  background-color: rgba(201, 153, 107, 0.25);
}

/* Failure (warm red) */
.scd-deploy-bar--failure {
  background-color: rgba(185, 74, 72, 0.1);
  color: #8a2a2a;
  border-bottom-color: rgba(185, 74, 72, 0.25);
}
.scd-deploy-bar--failure:hover {
  background-color: rgba(185, 74, 72, 0.2);
}

/* Unknown (neutral) */
.scd-deploy-bar--unknown {
  background-color: #f0eeec;
  color: var(--scd-text-muted);
  border-bottom-color: var(--scd-border);
}
.scd-deploy-bar--unknown:hover {
  background-color: #e8e4e1;
}

/* ---------------------------------------------------------
   Misc utility overrides
   --------------------------------------------------------- */
/* Breadcrumbs / path */
.nc-breadcrumbs {
  color: var(--scd-text-muted) !important;
}

.nc-breadcrumbs a {
  color: var(--scd-brown-light) !important;
}

.nc-breadcrumbs a:hover {
  color: var(--scd-sage-dark) !important;
}

/* Status labels (Draft / In Review / Ready) */
.nc-workflow-status {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}

/* Toast / notification banners */
.nc-toast {
  font-family: var(--font-sans) !important;
  border-radius: 0.375rem !important;
}

/* Modals */
.nc-modal {
  background-color: var(--scd-surface) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid var(--scd-border) !important;
}

.nc-modal h1,
.nc-modal h2,
.nc-modal h3 {
  font-family: var(--font-serif) !important;
  color: var(--scd-brown) !important;
}

/* File / image widget drop zones */
.nc-imageWidget-imageWrapper,
.nc-fileWidget-dropArea {
  background-color: var(--scd-surface) !important;
  border: 2px dashed var(--scd-border) !important;
  border-radius: 0.5rem !important;
}

.nc-fileWidget-dropArea:hover {
  border-color: var(--scd-sage) !important;
  background-color: rgba(92, 118, 109, 0.05) !important;
}