/* OmniMate TV license portal — dark theme (default), mobile-friendly */

:root {
  color-scheme: dark;
  --omni-bg: #0f1117;
  --omni-bg-elevated: #161b26;
  --omni-surface: #1c2230;
  --omni-surface-hover: #252d3d;
  --omni-border: #2e3848;
  --omni-text: #e8ecf1;
  --omni-text-muted: #9aa3b2;
  --omni-link: #6eb3ff;
  --omni-link-hover: #9ecaff;
  --omni-accent: #48c774;
  --omni-warning: #ffdd57;
  --omni-danger: #f14668;
  --omni-radius: 8px;
  --omni-nav-height: 3.25rem;
}

html {
  background: var(--omni-bg);
}

body {
  min-height: 100vh;
  background: var(--omni-bg);
  color: var(--omni-text);
}

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

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

.section {
  padding: 1.25rem 1rem 2.5rem;
}

@media screen and (min-width: 769px) {
  .section {
    padding: 1.5rem 1.5rem 3rem;
  }
}

.container {
  max-width: 1100px;
}

.title,
.subtitle {
  color: var(--omni-text);
}

.title.has-text-grey,
.subtitle.has-text-grey,
.has-text-grey {
  color: var(--omni-text-muted) !important;
}

.help {
  color: var(--omni-text-muted);
}

/* —— Navbar (mobile menu + visible links) —— */
.navbar.is-dark {
  background: var(--omni-bg-elevated) !important;
  border-bottom: 1px solid var(--omni-border);
  min-height: var(--omni-nav-height);
}

.navbar.is-dark .navbar-item,
.navbar.is-dark .navbar-link {
  color: var(--omni-text);
}

.navbar.is-dark .navbar-item:hover,
.navbar.is-dark .navbar-item.is-active,
.navbar.is-dark .navbar-link:hover {
  background: var(--omni-surface-hover);
  color: #fff;
}

.navbar-brand .navbar-item {
  font-size: 1.05rem;
}

.navbar-burger {
  color: var(--omni-text);
}

.navbar-burger:hover {
  background: var(--omni-surface-hover);
}

.navbar-burger span {
  background-color: currentColor;
  height: 2px;
}

@media screen and (max-width: 1023px) {
  .navbar-menu {
    background: var(--omni-bg-elevated);
    border-top: 1px solid var(--omni-border);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
  }

  .navbar-menu .navbar-item {
    display: block;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--omni-border);
  }

  .navbar-menu .navbar-end .navbar-item {
    border-bottom: none;
  }

  .navbar-user-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem 0;
  }
}

@media screen and (min-width: 1024px) {
  .navbar-user-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    max-width: 28rem;
  }
}

/* —— Surfaces —— */
.box {
  background: var(--omni-surface);
  color: var(--omni-text);
  border: 1px solid var(--omni-border);
  border-radius: var(--omni-radius);
  box-shadow: none;
}

.box-credits {
  border-left: 4px solid var(--omni-accent);
}

.notification {
  border-radius: var(--omni-radius);
}

.notification .delete {
  background: rgba(255, 255, 255, 0.25);
}

.notification .delete::before,
.notification .delete::after {
  background-color: var(--omni-bg);
}

/* —— Forms —— */
.input,
.textarea,
.select select {
  background: var(--omni-bg-elevated);
  border-color: var(--omni-border);
  color: var(--omni-text);
}

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

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--omni-link);
  box-shadow: 0 0 0 2px rgba(110, 179, 255, 0.25);
}

.label {
  color: var(--omni-text);
}

/* —— Buttons —— */
.button.is-link {
  background: #3273dc;
  color: #fff;
}

.button.is-primary {
  color: #fff;
}

.button.is-light {
  background: var(--omni-surface-hover);
  color: var(--omni-text);
  border-color: var(--omni-border);
}

.button.is-light:hover {
  background: var(--omni-border);
  color: #fff;
}

/* —— Tables (desktop, scroll container) —— */
.table-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--omni-border);
  border-radius: var(--omni-radius);
  background: var(--omni-surface);
}

.table {
  background: var(--omni-surface);
  color: var(--omni-text);
}

.table thead th {
  background: var(--omni-bg-elevated);
  color: var(--omni-text);
  border-color: var(--omni-border);
  white-space: nowrap;
}

.table td,
.table th {
  border-color: var(--omni-border);
  vertical-align: middle;
}

.table.is-striped tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

.table-licenses {
  margin: 0;
  min-width: 720px;
}

.table-licenses td,
.table-licenses th {
  vertical-align: middle;
}

.table-licenses .license-actions {
  white-space: nowrap;
}

.table-licenses .license-actions .button {
  margin-bottom: 0.25rem;
}

code,
code.device-id {
  background: var(--omni-bg-elevated);
  color: #c9d4e8;
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.82rem;
  word-break: break-all;
}

/* —— License cards (mobile) —— */
.license-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.license-card {
  background: var(--omni-surface);
  border: 1px solid var(--omni-border);
  border-radius: var(--omni-radius);
  padding: 1rem;
}

.license-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.license-card__label {
  font-weight: 600;
  font-size: 1.05rem;
}

.license-card__row {
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
}

.license-card__row strong {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--omni-text-muted);
  margin-bottom: 0.15rem;
}

.license-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--omni-border);
}

.license-card__actions .button {
  flex: 1 1 auto;
  min-width: 7rem;
}

.license-view--desktop {
  display: none;
}

.license-view--mobile {
  display: block;
}

@media screen and (min-width: 900px) {
  .license-view--desktop {
    display: block;
  }

  .license-view--mobile {
    display: none;
  }
}

/* —— Forms / layout on narrow screens —— */
@media screen and (max-width: 768px) {
  .field.is-horizontal .field-body {
    display: block;
  }

  .field.is-horizontal .field:not(:last-child) {
    margin-bottom: 0.75rem;
  }

  .buttons {
    flex-wrap: wrap;
  }

  .buttons .button {
    margin-bottom: 0.35rem;
  }

  .columns {
    margin-left: 0;
    margin-right: 0;
  }

  .column {
    padding-left: 0;
    padding-right: 0;
  }
}

/* —— Tags on dark —— */
.tag {
  font-weight: 600;
}

.tag.is-info {
  background: #2e5a8a;
  color: #e8f4ff;
}

.tag.is-success {
  background: #2d6a4a;
  color: #d8ffe8;
}

.tag.is-warning {
  background: #6b5a1e;
  color: #fff6c8;
}

.tag.is-danger {
  background: #7a2e3a;
  color: #ffe0e6;
}

/* —— Links in content —— */
.content a,
p a,
li a,
td a {
  color: var(--omni-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.content a:hover,
p a:hover {
  color: var(--omni-link-hover);
}