:root {
  --bg: white;
  --text: #363636;
  --bg-dark: #363636;
  --text-dark: #f5f5f5;
}

html, body {
  min-height: 100vh;
  height: 100%;
  background: var(--bg);
}

body[data-theme="dark"] {
  background: #181a1b !important;
  color: #e0e0e0;
}

body[data-theme="light"] {
  background: var(--bg) !important;
  color: var(--text);
}

#theme-toggle {
  border: none;
  background: transparent;
  cursor: pointer;
}
#theme-icon {
  font-size: 1.2rem;
}

body[data-theme="dark"] .box,
body[data-theme="dark"] .notification,
body[data-theme="dark"] .content,
body[data-theme="dark"] details,
body[data-theme="dark"] details[open] > summary,
body[data-theme="dark"] .table,
body[data-theme="dark"] .table th,
body[data-theme="dark"] .table td {
  background-color: #23272f !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

body[data-theme="dark"] .table th,
body[data-theme="dark"] .table td {
  border-color: #444 !important;
}

body[data-theme="dark"] .input,
body[data-theme="dark"] .textarea,
body[data-theme="dark"] .select select {
  background-color: #23272f !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

body[data-theme="dark"] .input:focus,
body[data-theme="dark"] .textarea:focus,
body[data-theme="dark"] .select select:focus {
  border-color: #3273dc !important;
  box-shadow: 0 0 0 0.125em #3273dc40;
}

body[data-theme="dark"] .label,
body[data-theme="dark"] .title,
body[data-theme="dark"] .subtitle,
body[data-theme="dark"] .help {
  color: #e0e0e0 !important;
}

body[data-theme="dark"] .button.is-light,
body[data-theme="dark"] .button {
  background-color: #363636 !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

body[data-theme="dark"] hr {
  background-color: #444 !important;
}

body[data-theme="dark"] .navbar,
body[data-theme="dark"] .navbar-menu {
  background-color: #23272f !important;
}

body[data-theme="dark"] .navbar-item,
body[data-theme="dark"] .navbar-link {
  color: #e0e0e0 !important;
}

body[data-theme="dark"] .section,
body[data-theme="dark"] .container,
body[data-theme="dark"] .hero {
  background: transparent !important;
}

body[data-theme="dark"] ::placeholder {
  color: #b0b0b0 !important;
  opacity: 1;
}
body[data-theme="dark"] :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #b0b0b0 !important;
}
body[data-theme="dark"] ::-ms-input-placeholder { /* Microsoft Edge */
  color: #b0b0b0 !important;
}

body, html {
  min-height: 100vh;
  height: 100%;
}

body > .section {
  min-height: calc(100vh - 3.25rem); /* Adjust if you have a fixed navbar */
}

/* Smaller input and table tweaks */
.input.is-small.cable-qty {
  max-width: 70px;
  font-size: 0.9em;
  padding: 0.25em 0.5em;
}
.table.is-size-7, .table.is-size-7 th, .table.is-size-7 td {
  font-size: 0.9em;
  padding: 0.25em 0.5em;
}

/* Side-by-side tables: already handled by Bulma columns */

/* Custom cable tag dark mode fix */
body[data-theme="dark"] .custom-cable-tag {
  background-color: #3273dc !important;
  color: #fff !important;
  border-color: #3273dc !important;
}

/* Fix for background color below content in dark mode */
body[data-theme="dark"], html[data-theme="dark"] {
  background: #181a1b !important;
}

body[data-theme="dark"] .modal-card,
body[data-theme="dark"] .modal-card-head,
body[data-theme="dark"] .modal-card-foot,
body[data-theme="dark"] .modal-card-body {
  background-color: #23272f !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}
body[data-theme="dark"] .modal-background {
  background-color: #181a1bcc !important;
}