/*
 * Minimalist Wikipedia-Inspired Theme for Slimmetry
 *
 * This theme transforms Bulma's default styling into an extreme minimalist
 * aesthetic inspired by Wikipedia: no shadows, square corners, minimal borders,
 * grayscale palette with subtle functional colors.
 */

/* ============================================================================
   CSS CUSTOM PROPERTIES - Color Palette
   ========================================================================== */

:root {
  /* Grayscale Foundation */
  --color-white: #ffffff;
  --color-background: #ffffff;
  --color-border-light: #e8e8e8;
  --color-border-medium: #c8c8c8;
  --color-border-dark: #a0a0a0;
  --color-text-primary: #202122;      /* Wikipedia black */
  --color-text-secondary: #54595d;    /* Wikipedia gray */
  --color-text-muted: #72777d;        /* Light gray */

  /* Functional Colors - Desaturated */
  --color-link: #0645ad;              /* Wikipedia blue */
  --color-link-hover: #0b0080;
  --color-success: #14866d;           /* Muted green */
  --color-success-bg: #f0f9f7;
  --color-error: #d33;                /* Muted red */
  --color-error-bg: #fef6f6;
  --color-warning: #c84e00;           /* Muted orange */
  --color-warning-bg: #fef9f3;
  --color-info: #347bbb;              /* Muted blue */
  --color-info-bg: #f5f9fc;

  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;
  --font-family-monospace: "Courier New", Courier, monospace;
  --font-size-base: 14px;
  --font-size-small: 13px;
  --line-height-base: 1.6;
}

/* ============================================================================
   NAVBAR - Complete Transformation (Dark → Light Minimal)
   ========================================================================== */

/* Base navbar - transparent background, no shadow, minimal border */
.navbar {
  background-color: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--color-border-light);
  min-height: 52px;
}

/* Navbar brand */
.navbar-brand {
  min-height: 52px;
}

.navbar-brand .navbar-item {
  color: var(--color-text-primary) !important;
  padding: 0.75rem 1rem;
}

.navbar-brand .navbar-item:hover {
  background-color: var(--color-background) !important;
  color: var(--color-link) !important;
}

/* Navbar burger menu - change to dark lines */
.navbar-burger {
  color: var(--color-text-primary) !important;
  height: 52px;
}

.navbar-burger:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

/* Navbar menu items */
.navbar-menu {
  background-color: transparent !important;
  box-shadow: none;
}

.navbar-item,
.navbar-link {
  color: var(--color-text-primary) !important;
  background-color: transparent !important;
}

.navbar-item:hover,
.navbar-item:focus,
.navbar-link:hover,
.navbar-link:focus {
  background-color: rgba(0, 0, 0, 0.03) !important;
  color: var(--color-link) !important;
}

/* Navbar dropdown */
.navbar-dropdown {
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.navbar-dropdown .navbar-item:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

/* Breadcrumbs in navbar */
.navbar .breadcrumb {
  background: none;
  padding: 0;
}

.navbar .breadcrumb a {
  color: var(--color-link) !important;
  border-bottom: none;
}

.navbar .breadcrumb a:hover {
  color: var(--color-link-hover) !important;
}

.navbar .breadcrumb li.is-active a {
  color: var(--color-text-primary) !important;
  pointer-events: none;
}

.navbar .breadcrumb li + li::before {
  color: var(--color-text-muted) !important;
}

/* Tag in navbar (Admin badge) */
.navbar-item .tag {
  border-radius: 0 !important;
  font-size: 11px;
  height: auto;
  padding: 2px 6px;
}

.navbar-item .tag.is-warning {
  background-color: var(--color-warning-bg) !important;
  color: var(--color-warning) !important;
  border: 1px solid var(--color-warning);
}

/* ============================================================================
   TABLES - Wikipedia-Style Minimal
   ========================================================================== */

.table {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--color-text-primary);
}

.table thead {
  background-color: var(--color-background);
}

.table thead th {
  color: var(--color-text-primary);
  font-weight: 600;
  border-bottom: 2px solid var(--color-border-medium);
  padding: 0.75rem;
  font-size: var(--font-size-small);
}

.table tbody tr {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);
}

/* Remove striping */
.table.is-striped tbody tr:nth-child(even) {
  background-color: var(--color-white);
}

/* Minimal hover effect */
.table.is-hoverable tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

.table td,
.table th {
  border: none;
  border-bottom: 1px solid var(--color-border-light);
  padding: 0.75rem;
  vertical-align: middle;
  font-size: var(--font-size-base);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* Code in tables */
.table code {
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 0;
  padding: 2px 4px;
  font-size: 0.9em;
}

/* ============================================================================
   CARDS - Minimal Bordered Containers
   ========================================================================== */

.card {
  background-color: transparent;
  border: none;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--color-border-light);
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.75rem 1rem;
}

.card-header-title {
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: 1rem;
  padding: 0;
}

.card-content {
  padding: 1rem;
}

.card-footer {
  border-top: 1px solid var(--color-border-light);
  background-color: transparent;
  border-radius: 0 !important;
}

.card-footer-item {
  border-left: 1px solid var(--color-border-light);
  color: var(--color-link);
  padding: 0.75rem;
  font-size: var(--font-size-small);
}

.card-footer-item:first-child {
  border-left: none;
}

.card-footer-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
  color: var(--color-link-hover);
}

/* ============================================================================
   BUTTONS - Minimal with Subtle Styling
   ========================================================================== */

.button {
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 500;
  font-size: var(--font-size-base);
  padding: 0.5rem 1rem;
  transition: background-color 0.1s, border-color 0.1s;
  border-width: 1px;
  border-style: solid;
}

.button:hover,
.button:focus {
  box-shadow: none !important;
}

.button:active {
  box-shadow: none !important;
}

/* Primary button - minimal blue */
.button.is-primary {
  background-color: var(--color-link) !important;
  border-color: var(--color-link) !important;
  color: white !important;
}

.button.is-primary:hover {
  background-color: var(--color-link-hover) !important;
  border-color: var(--color-link-hover) !important;
}

/* Success button */
.button.is-success {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: white !important;
}

.button.is-success:hover {
  background-color: #116654 !important;
  border-color: #116654 !important;
}

/* Danger button */
.button.is-danger {
  background-color: var(--color-error) !important;
  border-color: var(--color-error) !important;
  color: white !important;
}

.button.is-danger:hover {
  background-color: #b32828 !important;
  border-color: #b32828 !important;
}

/* Warning button */
.button.is-warning {
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  color: white !important;
}

.button.is-warning:hover {
  background-color: #a64100 !important;
  border-color: #a64100 !important;
}

/* Info button */
.button.is-info {
  background-color: var(--color-info) !important;
  border-color: var(--color-info) !important;
  color: white !important;
}

.button.is-info:hover {
  background-color: #2a6396 !important;
  border-color: #2a6396 !important;
}

/* Light/secondary button */
.button.is-light {
  background-color: var(--color-white) !important;
  border-color: var(--color-border-medium) !important;
  color: var(--color-text-primary) !important;
}

.button.is-light:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
  border-color: var(--color-border-dark) !important;
}

/* Outlined buttons */
.button.is-outlined {
  background-color: transparent !important;
}

.button.is-primary.is-outlined {
  color: var(--color-link) !important;
  border-color: var(--color-link) !important;
}

.button.is-danger.is-outlined {
  color: var(--color-error) !important;
  border-color: var(--color-error) !important;
}

.button.is-danger.is-outlined:hover {
  background-color: var(--color-error-bg) !important;
}

/* Small buttons */
.button.is-small {
  font-size: var(--font-size-small);
  padding: 0.375rem 0.75rem;
}

/* Button groups */
.buttons {
  flex-wrap: wrap;
}

.field.is-grouped .control {
  margin-right: 0.75rem;
}

/* ============================================================================
   FORMS - Minimal Input Styling
   ========================================================================== */

.input,
.textarea,
.select select {
  border-radius: 0 !important;
  border: 1px solid var(--color-border-medium);
  box-shadow: none !important;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  transition: border-color 0.1s;
}

.input:hover,
.textarea:hover,
.select select:hover {
  border-color: var(--color-border-dark);
}

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--color-link) !important;
  box-shadow: none !important;
  outline: none;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-muted);
}

/* Labels */
.label {
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: var(--font-size-base);
}

/* Help text */
.help {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

/* Field groups */
.field:not(:last-child) {
  margin-bottom: 1rem;
}

/* Icons in controls */
.control.has-icons-left .icon,
.control.has-icons-right .icon {
  color: var(--color-text-muted);
}

/* Checkbox */
.checkbox,
.radio {
  color: var(--color-text-primary);
}

/* ============================================================================
   NOTIFICATIONS & FLASH MESSAGES - Minimal Colored Borders
   ========================================================================== */

.notification {
  background-color: var(--color-white);
  border-left: 4px solid var(--color-border-medium);
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-border-light);
}

.notification.is-success {
  background-color: var(--color-success-bg) !important;
  border-left-color: var(--color-success);
  color: var(--color-text-primary);
}

.notification.is-success.is-light {
  background-color: var(--color-success-bg) !important;
}

.notification.is-danger {
  background-color: var(--color-error-bg) !important;
  border-left-color: var(--color-error);
  color: var(--color-text-primary);
}

.notification.is-danger.is-light {
  background-color: var(--color-error-bg) !important;
}

.notification.is-warning {
  background-color: var(--color-warning-bg) !important;
  border-left-color: var(--color-warning);
  color: var(--color-text-primary);
}

.notification.is-warning.is-light {
  background-color: var(--color-warning-bg) !important;
}

.notification.is-info {
  background-color: var(--color-info-bg) !important;
  border-left-color: var(--color-info);
  color: var(--color-text-primary);
}

.notification.is-info.is-light {
  background-color: var(--color-info-bg) !important;
}

/* Delete button in notifications */
.notification .delete {
  background-color: transparent;
  border-radius: 0;
}

.notification .delete:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Pre blocks in notifications (for token display) */
.notification pre {
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 0;
  padding: 0.75rem;
  border: 1px solid var(--color-border-light);
}

/* ============================================================================
   BOX - Simple Bordered Container
   ========================================================================== */

.box {
  background-color: transparent;
  border: none;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1.25rem;
}

/* Pre/code blocks in boxes */
.box pre {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 0;
  padding: 1rem;
  overflow-x: auto;
}

/* ============================================================================
   TAGS - Minimal Bordered Labels
   ========================================================================== */

.tag {
  background-color: var(--color-background);
  border: 1px solid var(--color-border-medium);
  border-radius: 0 !important;
  color: var(--color-text-primary);
  font-size: var(--font-size-small);
  padding: 0.25rem 0.5rem;
}

.tag.is-success {
  background-color: var(--color-success-bg) !important;
  border-color: var(--color-success);
  color: var(--color-success);
}

.tag.is-danger {
  background-color: var(--color-error-bg) !important;
  border-color: var(--color-error);
  color: var(--color-error);
}

.tag.is-warning {
  background-color: var(--color-warning-bg) !important;
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.tag.is-info {
  background-color: var(--color-info-bg) !important;
  border-color: var(--color-info);
  color: var(--color-info);
}

.tag.is-light {
  background-color: var(--color-background) !important;
  border-color: var(--color-border-light);
  color: var(--color-text-secondary);
}

/* ============================================================================
   TYPOGRAPHY & LAYOUT - Clean Readable Text
   ========================================================================== */

.title {
  color: var(--color-text-primary);
  font-weight: 600;
  line-height: 1.3;
}

.subtitle {
  color: var(--color-text-secondary);
  font-weight: 400;
}

.heading {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Sections */
.section {
  padding: 2rem 1.5rem;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Columns */
.columns {
  margin: 0;
}

.column {
  padding: 0.75rem;
}

/* Level */
.level {
  align-items: center;
}

.level:not(:last-child) {
  margin-bottom: 1.5rem;
}

/* ============================================================================
   LINKS - Wikipedia Blue
   ========================================================================== */

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.1s;
}

a:hover {
  color: var(--color-link-hover);
}

a:visited {
  color: #0645ad; /* Keep links the same color when visited */
}

/* Prevent visited color on navbar links */
.navbar a:visited {
  color: inherit;
}

/* ============================================================================
   MOBILE RESPONSIVENESS
   ========================================================================== */

@media screen and (max-width: 1023px) {
  .navbar-menu {
    box-shadow: none;
    padding: 0.5rem 0;
  }

  .navbar-menu.is-active {
    border-top: 1px solid var(--color-border-light);
  }

  .section {
    padding: 1.5rem 1rem;
  }
}

@media screen and (max-width: 768px) {
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .level {
    flex-direction: column;
    align-items: stretch;
  }

  .level-left,
  .level-right {
    width: 100%;
  }

  .level-item {
    margin-bottom: 0.5rem;
  }
}

/* ============================================================================
   UTILITY CLASSES & SPECIAL CASES
   ========================================================================== */

/* Text colors */
.has-text-grey {
  color: var(--color-text-secondary) !important;
}

.has-text-grey-light {
  color: var(--color-text-muted) !important;
}

/* Backgrounds */
.has-background-dark {
  background-color: #2b2b2b !important;
  border-radius: 0 !important;
}

.has-text-light {
  color: #f5f5f5 !important;
}

/* Text alignment */
.has-text-centered {
  text-align: center !important;
}

.has-text-right {
  text-align: right !important;
}

/* Family */
.is-family-code {
  font-family: var(--font-family-monospace) !important;
}

/* Spacing */
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.5rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }

/* Icons */
.icon {
  color: currentColor;
}

.icon.has-text-warning {
  color: var(--color-warning) !important;
}

/* ============================================================================
   DARK MODE SUPPORT
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1a1a1a;
    --color-white: #2b2b2b;
    --color-border-light: #3a3a3a;
    --color-border-medium: #505050;
    --color-border-dark: #707070;
    --color-text-primary: #e8e8e8;
    --color-text-secondary: #b8b8b8;
    --color-text-muted: #888888;
    --color-link: #6cb6ff;
    --color-link-hover: #8dc7ff;
    --color-success-bg: #0f2419;
    --color-error-bg: #2a1a1a;
    --color-warning-bg: #2a1f15;
    --color-info-bg: #152535;
  }

  /* Update specific elements for dark mode */
  body {
    background-color: var(--color-background);
    color: var(--color-text-primary);
  }

  .navbar {
    border-bottom-color: var(--color-border-light);
  }

  /* Code blocks in dark mode */
  .table code,
  .box pre,
  .notification pre {
    background-color: rgba(255, 255, 255, 0.05);
  }
}