/* Shared dashboard interaction styles loaded after each page's inline theme. */

/* Hidden sidebar labels must keep their expanded geometry so the rail never shifts vertically. */
.sidebar .brand-text,
.sidebar .brand-name,
.sidebar .brand-title,
.sidebar .brand-sub,
.sidebar .nav-label,
.sidebar nav a span,
.sidebar .nav-item span {
  white-space: nowrap;
}

.sidebar .brand-text,
.sidebar .nav-label,
.sidebar nav a span,
.sidebar .nav-item span {
  flex: 0 0 auto;
}

.sidebar nav a svg,
.sidebar .nav-item svg {
  width: 19px;
  height: 19px;
  filter: drop-shadow(0 0 5px color-mix(in oklch, currentColor 45%, transparent));
  transition: color 160ms ease, filter 160ms ease, transform 160ms ease;
}

.sidebar nav a:hover svg,
.sidebar .nav-item:hover svg,
.sidebar nav a.active svg,
.sidebar .nav-item.active svg {
  filter: drop-shadow(0 0 8px currentColor);
  transform: scale(1.08);
}

.icon-button,
button[data-od-id="refresh-button"] {
  position: relative;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in oklch, var(--neon, var(--accent)) 55%, var(--border));
  border-radius: 11px;
  color: var(--neon, var(--accent));
  background:
    linear-gradient(145deg, color-mix(in oklch, var(--neon, var(--accent)) 19%, transparent), transparent 58%),
    var(--surface, oklch(0.21 0.035 255));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, white 5%, transparent),
    0 0 18px color-mix(in oklch, var(--neon, var(--accent)) 16%, transparent);
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.icon-button svg,
button[data-od-id="refresh-button"] svg {
  width: 19px;
  height: 19px;
  stroke-width: 2;
  filter: drop-shadow(0 0 5px currentColor);
}

.icon-button:hover,
button[data-od-id="refresh-button"]:hover {
  color: var(--fg);
  border-color: var(--neon, var(--accent));
  background:
    linear-gradient(145deg, color-mix(in oklch, var(--neon, var(--accent)) 30%, transparent), transparent 68%),
    var(--surface, oklch(0.21 0.035 255));
  box-shadow: 0 0 24px color-mix(in oklch, var(--neon, var(--accent)) 28%, transparent);
  transform: translateY(-1px);
}

.icon-button:focus-visible,
button[data-od-id="refresh-button"]:focus-visible,
.table-mode-button:focus-visible,
.table-page-button:focus-visible {
  outline: 3px solid color-mix(in oklch, var(--neon, var(--accent)) 30%, transparent);
  outline-offset: 3px;
}

.icon-button:disabled,
button[data-od-id="refresh-button"]:disabled {
  cursor: progress;
  opacity: .72;
}

.table-pagination-shell {
  min-width: 0;
}

.table-display-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: 0 0 10px;
}

.table-display-controls {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 1px solid color-mix(in oklch, var(--accent) 28%, var(--border));
  border-radius: 11px;
  background: color-mix(in oklch, var(--surface, oklch(0.22 0.035 255)) 90%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, white 3%, transparent);
}

.table-mode-button,
.table-page-button {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.table-mode-button svg,
.table-page-button svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.9;
  filter: drop-shadow(0 0 4px currentColor);
}

.table-mode-button:hover:not(:disabled),
.table-page-button:hover:not(:disabled) {
  color: var(--fg);
  border-color: color-mix(in oklch, var(--neon, var(--accent)) 42%, var(--border));
  background: color-mix(in oklch, var(--neon, var(--accent)) 11%, transparent);
  transform: translateY(-1px);
}

.table-mode-button[aria-pressed="true"] {
  color: oklch(0.16 0.03 255);
  border-color: transparent;
  background: linear-gradient(135deg, var(--neon, var(--accent)), var(--accent));
  box-shadow: 0 0 15px color-mix(in oklch, var(--neon, var(--accent)) 25%, transparent);
}

.table-pagination-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin-top: 10px;
}

.table-page-status {
  min-width: 132px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.table-page-button {
  border-color: color-mix(in oklch, var(--accent) 25%, var(--border));
  background: color-mix(in oklch, var(--surface, oklch(0.22 0.035 255)) 92%, transparent);
}

.table-page-button:disabled {
  cursor: default;
  opacity: .35;
  filter: saturate(.5);
}

.table-pagination-nav[hidden] {
  display: none;
}

@media (min-width: 981px) {
  .sidebar {
    align-items: stretch;
  }

  .sidebar .brand,
  .sidebar .nav-label,
  .sidebar nav,
  .sidebar .nav-list {
    flex-shrink: 0;
  }
}

@media (max-width: 980px) {
  .sidebar .brand-text,
  .sidebar .nav-label,
  .sidebar nav a span,
  .sidebar .nav-item span {
    white-space: nowrap;
  }
}