/* ========================================
   GLOBAL CSS VARIABLES
   Shared across all layouts (application, dashboard, etc.)
   ======================================== */

:root {
  --navbar-height: 59px;
  --sidebar-width: 280px;
  --sidebar-width-collapsed: 60px;
  --sidebar-width-mobile: 250px;
  --sidebar-header-min-height: 70px;

  /* Our brand colors */
  --primary: #3b82f6;
  --primary-darker: #2563eb;
  --primary-light: #60a5fa;
  --primary-dark: #1d4ed8;

  --accent: #00d1b2;
}

/* ========================================
   UTILITY CLASSES
   Gap utilities (Bulma 1.0.4 doesn't include these)
   ======================================== */

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.5rem; }
.gap-6 { gap: 3rem; }

/* ========================================
   ACTION BUTTONS
   Modifier class for outlined buttons to use darker colors.
   Add .action-btn to any .button.is-outlined for better contrast.
   ======================================== */

.button.is-outlined.action-btn.is-primary {
  color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 55%);
  border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 55%);
}

.button.is-outlined.action-btn.is-link {
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), 55%);
  border-color: hsl(var(--bulma-link-h), var(--bulma-link-s), 55%);
}

.button.is-outlined.action-btn.is-info {
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), 50%);
  border-color: hsl(var(--bulma-info-h), var(--bulma-info-s), 50%);
}

.button.is-outlined.action-btn.is-success {
  color: hsl(var(--bulma-success-h), var(--bulma-success-s), 38%);
  border-color: hsl(var(--bulma-success-h), var(--bulma-success-s), 38%);
}

.button.is-outlined.action-btn.is-warning {
  color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 50%);
  border-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 50%);
}

.button.is-outlined.action-btn.is-danger {
  color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 65%);
  border-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 65%);
}

/* Dark mode - brighter colors for visibility on dark backgrounds */
[data-theme="dark"] .button.is-outlined.action-btn.is-primary {
  color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 70%);
  border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 70%);
}

[data-theme="dark"] .button.is-outlined.action-btn.is-link {
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), 70%);
  border-color: hsl(var(--bulma-link-h), var(--bulma-link-s), 70%);
}

[data-theme="dark"] .button.is-outlined.action-btn.is-info {
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), 65%);
  border-color: hsl(var(--bulma-info-h), var(--bulma-info-s), 65%);
}

[data-theme="dark"] .button.is-outlined.action-btn.is-success {
  color: hsl(var(--bulma-success-h), var(--bulma-success-s), 55%);
  border-color: hsl(var(--bulma-success-h), var(--bulma-success-s), 55%);
}

[data-theme="dark"] .button.is-outlined.action-btn.is-warning {
  color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 65%);
  border-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 65%);
}

[data-theme="dark"] .button.is-outlined.action-btn.is-danger {
  color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 70%);
  border-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 70%);
}

/* ========================================
   SORTABLE TABLE HEADERS
   ======================================== */

.admin-table th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.admin-table th[data-sort]:hover {
  background-color: #f5f5f5;
}

[data-theme="dark"] .admin-table th[data-sort]:hover {
  background-color: #363636;
}

.admin-table th[data-sort] .icon {
  margin-left: 0.25rem;
  vertical-align: middle;
}

/* ========================================
   EMPTY STATE
   Styling for tables and lists with no data
   ======================================== */

.empty-state {
  background-color: #f5f5f5;
  padding: 1.5rem;
  border-radius: 6px;
  text-align: center;
  color: #7a7a7a;
}

[data-theme="dark"] .empty-state {
  background-color: #1f2937;
  color: #b5b5b5;
}

/* ========================================
   STAT COMPONENTS
   Dashboard statistics display
   ======================================== */

.stat-notification {
  height: 100%;
}

.stat-box {
  background-color: #f5f5f5;
  padding: 1rem;
  border-radius: 6px;
  height: 100%;
}

[data-theme="dark"] .stat-box {
  background-color: #1f2937;
}

.info-box {
  background-color: #f5f5f5;
  padding: 1rem;
  border-radius: 6px;
}

[data-theme="dark"] .info-box {
  background-color: #1f2937;
}

.stat-number {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .stat-number {
    font-size: 1.75rem;
  }
}

/* ========================================
   CLICKABLE ELEMENT
   Entire element acts as a link
   ======================================== */

.clickable {
  cursor: pointer;
  transition: border-color 0.15s ease-in-out;
}

.clickable:hover {
  border-color: #3273dc;
}

[data-theme="dark"] .clickable:hover {
  border-color: #485fc7;
}

/* ========================================
   SEARCH INPUT WIDTHS
   Responsive widths for search inputs
   ======================================== */

@media (max-width: 768px) {
  .mobile-search-input.input {
    width: 185px;
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1023px) {
  .mobile-search-input.input {
    width: 370px;
  }
}

/* Desktop */
@media (min-width: 1024px) and (max-width: 1215px) {
  .mobile-search-input.input {
    width: 350px; /* A little less than tablet b/c the sidebar comes back */
  }
}

/* Widescreen */
@media (min-width: 1216px) and (max-width: 1407px) {
  .mobile-search-input.input {
    width: 540px;
  }
}

/* Full HD */
@media (min-width: 1408px) {
  .mobile-search-input.input {
    width: 540px;
  }
}

/* ========================================
   TABLE SCROLL
   Minimum widths for mobile horizontal scrolling
   ======================================== */

.table-scroll-small {
  min-width: 600px;
}

.table-scroll {
  min-width: 800px;
}

.table-scroll-large {
  min-width: 1100px;
}

.table-scroll-extra-large {
  min-width: 1400px;
}

/* ========================================
   DANGER ZONE UTILITY
   Darker danger colors for better contrast in light mode.
   Use .danger-zone class on elements or as a wrapper.
   ======================================== */

/* Buttons with danger-zone */
.button.danger-zone.is-danger {
  background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 30%);
  border-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 30%);
  color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 95%);
}

.button.is-outlined.danger-zone.is-danger {
  background-color: transparent;
  color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 50%);
  border-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 50%);
}

/* Text elements with danger-zone */
.has-text-danger.danger-zone,
.danger-zone .has-text-danger {
  color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 50%) !important;
}

/* Dark mode - keep existing visibility */
[data-theme="dark"] .button.danger-zone.is-danger {
  background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 25%);
  border-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 25%);
}

[data-theme="dark"] .button.is-outlined.danger-zone.is-danger {
  background-color: transparent;
  color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 70%);
  border-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 70%);
}

[data-theme="dark"] .has-text-danger.danger-zone,
[data-theme="dark"] .danger-zone .has-text-danger {
  color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 70%) !important;
}

/* ========================================
   TRON-STYLE HOSTNAME
   Cyan glow effect for server hostnames
   ======================================== */

code.hostname {
  background-color: #e8f7fc;
  color: #0891b2;
  padding: 0.2em 0.5em;
  border-radius: 4px;
  border: 1px solid #0891b240;
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-weight: 500;
  letter-spacing: 0.5px;
}

[data-theme="dark"] code.hostname {
  background-color: #0a0f1a;
  color: #00d4ff;
  border-color: #00d4ff50;
  text-shadow: 0 0 8px #00d4ff80, 0 0 2px #00d4ff;
  box-shadow: inset 0 0 15px #00d4ff20, 0 0 8px #00d4ff15;
}