/* ==========================================================================
   ScoopHub Theme — Bulma 1.0 Variable Overrides + Scoop CI Tokens
   ==========================================================================
   Loaded AFTER bulma.min.css to override Bulma's CSS Custom Properties.
   Implements the Scoop Corporate Identity:
     - Primary: #005ca9
     - Slate palette: #f0f2f4 / #e3e6ed / #ced3dc / #616f89 / #111318
     - Fonts: Inter + Noto Sans (display & body)
   ========================================================================== */

:root {
  /* ----- Status colors as Bulma 1.0 HSL tuples ----- */
  --bulma-primary-h: 207deg;  --bulma-primary-s: 100%;  --bulma-primary-l: 33%;   /* #005ca9 */
  --bulma-link-h:    207deg;  --bulma-link-s:    100%;  --bulma-link-l:    33%;
  --bulma-info-h:    188deg;  --bulma-info-s:     90%;  --bulma-info-l:    50%;   /* #0dcaf0 */
  --bulma-success-h: 152deg;  --bulma-success-s:  69%;  --bulma-success-l:  31%;  /* #198754 */
  --bulma-warning-h:  45deg;  --bulma-warning-s: 100%;  --bulma-warning-l:  51%;  /* #ffc107 */
  --bulma-danger-h:  354deg;  --bulma-danger-s:   70%;  --bulma-danger-l:   54%;  /* #dc3545 */

  /* ----- Scoop Slate palette → Bulma scheme ----- */
  --bulma-scheme-main:                 hsl(0, 0%, 100%);
  --bulma-scheme-main-bis:             #f0f2f4;
  --bulma-scheme-main-ter:             #e3e6ed;
  --bulma-scheme-invert:               #111318;
  --bulma-scheme-invert-bis:           #1c1f27;
  --bulma-scheme-invert-ter:           #2a2e38;
  --bulma-background:                  #f0f2f4;
  --bulma-background-hover:            #e3e6ed;
  --bulma-background-active:           #ced3dc;
  --bulma-border-weak:                 #e3e6ed;
  --bulma-border:                      #ced3dc;
  --bulma-border-hover:                #b6bdc9;
  --bulma-text-weak:                   #616f89;
  --bulma-text-light:                  #616f89;
  --bulma-text:                        #111318;
  --bulma-text-strong:                 #111318;
  --bulma-text-title:                  #111318;

  /* ----- Typography ----- */
  --bulma-family-primary:   "Inter", "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --bulma-family-secondary: "Inter", "Noto Sans", system-ui, sans-serif;
  --bulma-family-code:      "JetBrains Mono", "SFMono-Regular", "Courier New", monospace;
  --bulma-weight-light: 300;
  --bulma-weight-normal: 400;
  --bulma-weight-medium: 500;
  --bulma-weight-semibold: 600;
  --bulma-weight-bold: 700;
  --bulma-weight-extrabold: 800;
  --bulma-body-line-height: 1.6;
  --bulma-body-size: 15px;
  --bulma-body-letter-spacing: -0.005em;
  --bulma-body-color:                  #111318;
  --bulma-body-background-color:       #f0f2f4;

  /* Heading rhythm */
  --bulma-title-color:                 #111318;
  --bulma-title-weight:                700;
  --bulma-title-line-height:           1.25;
  --bulma-subtitle-color:              #616f89;
  --bulma-subtitle-weight:             500;

  /* ----- Radii & Shadows ----- */
  --bulma-radius-small:   0.375rem;
  --bulma-radius:         0.5rem;
  --bulma-radius-medium:  0.625rem;
  --bulma-radius-large:   0.75rem;
  --bulma-radius-rounded: 9999px;

  --bulma-shadow:
    0 1px 2px rgba(17, 19, 24, 0.04),
    0 4px 12px rgba(17, 19, 24, 0.04);

  /* ----- Component tokens ----- */
  /* Buttons */
  --bulma-button-color:                       #111318;
  --bulma-button-background-color:            #ffffff;
  --bulma-button-border-color:                #ced3dc;
  --bulma-button-hover-color:                 #111318;
  --bulma-button-hover-background-color:      #f0f2f4;
  --bulma-button-hover-border-color:          #b6bdc9;
  --bulma-button-active-color:                #111318;
  --bulma-button-focus-color:                 #111318;
  --bulma-button-focus-border-color:          #005ca9;
  --bulma-button-focus-box-shadow-size:       0 0 0 3px;
  --bulma-button-focus-box-shadow-color:      rgba(0, 92, 169, 0.18);
  --bulma-button-padding-vertical:            0.55em;
  --bulma-button-padding-horizontal:          1em;
  --bulma-button-weight:                      600;

  /* Inputs */
  --bulma-input-color:                        #111318;
  --bulma-input-background-color:             #ffffff;
  --bulma-input-border-color:                 #ced3dc;
  --bulma-input-height:                       2.5em;
  --bulma-input-shadow:                       inset 0 1px 1px rgba(17, 19, 24, 0.03);
  --bulma-input-hover-color:                  #111318;
  --bulma-input-hover-border-color:           #b6bdc9;
  --bulma-input-focus-color:                  #111318;
  --bulma-input-focus-border-color:           #005ca9;
  --bulma-input-focus-box-shadow-size:        0 0 0 3px;
  --bulma-input-focus-box-shadow-color:       rgba(0, 92, 169, 0.18);
  --bulma-input-placeholder-color:            #8a96ad;

  /* Cards */
  --bulma-card-background-color:              #ffffff;
  --bulma-card-color:                         #111318;
  --bulma-card-shadow:                        0 1px 2px rgba(17, 19, 24, 0.04);
  --bulma-card-radius:                        1rem;
  --bulma-card-header-background-color:       transparent;
  --bulma-card-header-color:                  #111318;
  --bulma-card-header-shadow:                 none;
  --bulma-card-header-weight:                 700;
  --bulma-card-content-padding:               1.5rem;
  --bulma-card-footer-background-color:       transparent;
  --bulma-card-footer-border-top:             1px solid #e3e6ed;

  /* Tables */
  --bulma-table-color:                        #111318;
  --bulma-table-background-color:             transparent;
  --bulma-table-cell-border-color:            #e3e6ed;
  --bulma-table-cell-border:                  1px solid var(--bulma-table-cell-border-color);
  --bulma-table-cell-border-width:            0 0 1px;
  --bulma-table-cell-padding:                 0.85em 1em;
  --bulma-table-cell-heading-color:           #616f89;
  --bulma-table-row-hover-background-color:   #f0f2f4;
  --bulma-table-row-active-background-color:  rgba(0, 92, 169, 0.08);
  --bulma-table-row-active-color:             #005ca9;
  --bulma-table-head-cell-color:              #616f89;

  /* Tags */
  --bulma-tag-background-color:               #f0f2f4;
  --bulma-tag-color:                          #111318;
  --bulma-tag-radius:                         0.5rem;

  /* Notifications */
  --bulma-notification-radius:                0.75rem;
  --bulma-notification-padding:               1rem 1.25rem 1rem 1rem;

  /* Pagination */
  --bulma-pagination-current-background-color: #005ca9;
  --bulma-pagination-current-color:           #ffffff;
  --bulma-pagination-current-border-color:    #005ca9;
  --bulma-pagination-color:                   #111318;

  /* Modals */
  --bulma-modal-background-background-color:  rgba(17, 19, 24, 0.55);
  --bulma-modal-card-radius:                  1rem;

  /* ----- Scoop-only tokens (no Bulma equivalent) ----- */
  --scoop-primary:           #005ca9;
  --scoop-primary-dark:      #00498a;
  --scoop-primary-light:     #1a73c1;
  --scoop-primary-soft:      rgba(0, 92, 169, 0.08);
  --scoop-primary-tint:      rgba(0, 92, 169, 0.14);
  --scoop-success:           #198754;
  --scoop-danger:            #dc3545;
  --scoop-warning:           #ffc107;
  --scoop-info:              #0dcaf0;
  --scoop-slate-50:          #f0f2f4;
  --scoop-slate-100:         #e3e6ed;
  --scoop-slate-200:         #ced3dc;
  --scoop-slate-300:         #b6bdc9;
  --scoop-slate-400:         #616f89;
  --scoop-slate-500:         #4b576e;
  --scoop-slate-700:         #2a3243;
  --scoop-slate-900:         #111318;
  --scoop-white:             #ffffff;

  --scoop-sidebar-w:         16rem;
  --scoop-sidebar-w-min:     4.5rem;
  --scoop-content-max:       1080px;
  --scoop-shell-max:         1180px;

  --scoop-radius:            0.5rem;
  --scoop-radius-lg:         0.75rem;
  --scoop-radius-2xl:        1rem;

  --scoop-shadow-sm:         0 1px 2px rgba(17, 19, 24, 0.05);
  --scoop-shadow:            0 1px 2px rgba(17, 19, 24, 0.04), 0 4px 12px rgba(17, 19, 24, 0.05);
  --scoop-shadow-lg:         0 6px 18px rgba(17, 19, 24, 0.08), 0 1px 2px rgba(17, 19, 24, 0.06);

  --scoop-transition:        150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Force light mode regardless of OS preference */
:root {
  color-scheme: light;
}

/* Body baseline */
html, body {
  background: var(--scoop-slate-50);
  color: var(--scoop-slate-900);
  font-family: var(--bulma-family-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
  color-scheme: light;
}

/* Native form elements: prevent OS dark-mode override */
input, textarea, select, button {
  color-scheme: light;
}

/* Selection color */
::selection {
  background: var(--scoop-primary-tint);
  color: var(--scoop-slate-900);
}

/* Focus rings — Scoop blue accent */
:focus-visible {
  outline: 2px solid var(--scoop-primary);
  outline-offset: 2px;
}

/* Make .button.is-primary truly Scoop blue with crisper hover */
.button.is-primary {
  background-color: var(--scoop-primary);
  border-color: var(--scoop-primary);
  color: var(--scoop-white);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.button.is-primary:hover,
.button.is-primary.is-hovered {
  background-color: var(--scoop-primary-dark);
  border-color: var(--scoop-primary-dark);
  color: var(--scoop-white);
}
.button.is-primary:focus,
.button.is-primary.is-focused {
  border-color: var(--scoop-primary-dark);
  box-shadow: 0 0 0 3px rgba(0, 92, 169, 0.25);
}

/* Subtle outline button → Scoop CI */
.button.is-outlined,
.button.is-light {
  font-weight: 600;
}

/* Compact-mode button */
.button.is-compact {
  height: 2rem;
  padding: 0 0.75em;
  font-size: 0.875rem;
}

/* Links default to Scoop-Blau */
a {
  color: var(--scoop-primary);
  transition: color var(--scoop-transition);
}
a:hover { color: var(--scoop-primary-dark); }

/* Inputs / textareas — softer placeholder */
.input::placeholder,
.textarea::placeholder {
  color: var(--bulma-input-placeholder-color);
  opacity: 1;
}

/* Card refinement */
.card {
  border: 1px solid var(--scoop-slate-100);
  background: var(--scoop-white);
  transition: box-shadow var(--scoop-transition), transform var(--scoop-transition);
}
.card.is-hoverable:hover {
  box-shadow: var(--scoop-shadow-lg);
  transform: translateY(-1px);
}
.card-header-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Tables — modern Scoop look */
.table {
  background: transparent;
  font-size: 0.9375rem;
}
.table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--scoop-slate-400);
  border-bottom-color: var(--scoop-slate-100);
  font-weight: 600;
}
.table tbody tr:hover {
  background: var(--scoop-slate-50);
}
.table.is-fullwidth { width: 100%; }

/* Tags refined */
.tag:not(body) {
  font-weight: 600;
  letter-spacing: 0.005em;
}
.tag.is-primary { background: var(--scoop-primary); color: var(--scoop-white); }
.tag.is-success { background: var(--scoop-success); color: var(--scoop-white); }
.tag.is-danger  { background: var(--scoop-danger);  color: var(--scoop-white); }
.tag.is-warning { background: var(--scoop-warning); color: var(--scoop-slate-900); }
.tag.is-info    { background: var(--scoop-info);    color: var(--scoop-slate-900); }
.tag.is-light   { background: var(--scoop-slate-50); color: var(--scoop-slate-900); border: 1px solid var(--scoop-slate-100); }

/* Notifications — slim left bar in CI color */
.notification {
  border: 1px solid var(--scoop-slate-100);
  background: var(--scoop-white);
  color: var(--scoop-slate-900);
  position: relative;
  padding-left: 1.25rem;
}
.notification::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
  background: var(--scoop-slate-200);
}
.notification.is-success::before { background: var(--scoop-success); }
.notification.is-danger::before  { background: var(--scoop-danger); }
.notification.is-warning::before { background: var(--scoop-warning); }
.notification.is-info::before    { background: var(--scoop-info); }
.notification.is-primary::before { background: var(--scoop-primary); }

/* Headings */
h1, h2, h3, h4, h5, h6,
.title, .subtitle {
  font-family: var(--bulma-family-primary);
  letter-spacing: -0.015em;
}

/* Section/box defaults */
.box {
  background: var(--scoop-white);
  border: 1px solid var(--scoop-slate-100);
  box-shadow: var(--scoop-shadow-sm);
  border-radius: var(--scoop-radius-2xl);
}

/* Pagination Scoop-blau */
.pagination-link.is-current {
  background-color: var(--scoop-primary);
  border-color: var(--scoop-primary);
  color: var(--scoop-white);
}

/* Help / form validation text */
.help.is-danger { color: var(--scoop-danger); font-weight: 500; }
.help.is-success { color: var(--scoop-success); font-weight: 500; }

/* ==========================================================================
   Force light mode even if browser prefers dark
   --------------------------------------------------------------------------
   Bulma 1.0 has built-in dark-mode tokens that activate via
   prefers-color-scheme. ScoopHub is light-only, so we re-assert the light
   palette inside the dark-media-query to neutralise Bulma's dark fallbacks.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root,
  html,
  html[data-theme="light"] {
    color-scheme: light;
    --bulma-scheme-main:           hsl(0, 0%, 100%);
    --bulma-scheme-main-bis:       #f0f2f4;
    --bulma-scheme-main-ter:       #e3e6ed;
    --bulma-background:            #f0f2f4;
    --bulma-border-weak:           #e3e6ed;
    --bulma-border:                #ced3dc;
    --bulma-text-weak:             #616f89;
    --bulma-text-light:            #616f89;
    --bulma-text:                  #111318;
    --bulma-text-strong:           #111318;
    --bulma-body-color:            #111318;
    --bulma-body-background-color: #f0f2f4;
    --bulma-input-color:           #111318;
    --bulma-input-background-color: #ffffff;
    --bulma-input-border-color:    #ced3dc;
    --bulma-card-background-color: #ffffff;
    --bulma-card-color:            #111318;
  }

  html, body { background: #f0f2f4; color: #111318; }
  input, textarea, select {
    background-color: #ffffff !important;
    color: #111318 !important;
    border-color: #ced3dc !important;
  }
  .input, .textarea, .select select {
    background-color: #ffffff !important;
    color: #111318 !important;
    border-color: #ced3dc !important;
  }
  .box, .card, .notification {
    background-color: #ffffff !important;
    color: #111318 !important;
  }
}