/*
 * styles.css — Game Server Control Panel
 * Minimal, modern, responsive. No external fonts or CDN resources.
 * Supports light and dark color schemes via prefers-color-scheme.
 * WCAG AA contrast targets throughout.
 */

/* ============================================================
   Custom properties (design tokens)
   ============================================================ */
:root {
  /* Surface */
  --color-bg:            #f1f3f5;
  --color-surface:       #ffffff;
  --color-surface-hover: #f8f9fa;
  --color-border:        #dee2e6;

  /* Text */
  --color-text:          #1a1d23;
  --color-text-muted:    #576071;

  /* Brand / interactive */
  --color-primary:       #1a6bcc;
  --color-primary-hover: #155ba8;

  /* Semantic: success / warning / danger */
  --color-success:       #157a45;
  --color-success-bg:    #d3f4e1;
  --color-success-text:  #0c4a28;

  --color-warning:       #7a5300;
  --color-warning-bg:    #fff3cd;
  --color-warning-text:  #5a3c00;

  --color-danger:        #b91c1c;
  --color-danger-bg:     #fee2e2;
  --color-danger-text:   #7f1d1d;

  /* Neutral / ghost */
  --color-ghost-bg:      #e9ecef;
  --color-ghost-hover:   #d3d8de;
  --color-ghost-text:    #343a40;

  /* Sparkline */
  --color-sparkline:     #1a6bcc;

  /* Chrome */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow:     0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.07);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);

  /* Typography */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Fira Code", "Source Code Pro",
               Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:            #0d0f14;
    --color-surface:       #1a1d26;
    --color-surface-hover: #222630;
    --color-border:        #2e3340;

    --color-text:          #e4e8f0;
    --color-text-muted:    #8892a4;

    --color-primary:       #5aa3f5;
    --color-primary-hover: #78b5f7;

    --color-success:       #4ade80;
    --color-success-bg:    #052e16;
    --color-success-text:  #86efac;

    --color-warning:       #fbbf24;
    --color-warning-bg:    #1c1206;
    --color-warning-text:  #fde68a;

    --color-danger:        #f87171;
    --color-danger-bg:     #1e0707;
    --color-danger-text:   #fca5a5;

    --color-ghost-bg:      #272b36;
    --color-ghost-hover:   #333848;
    --color-ghost-text:    #c8cdd8;

    --color-sparkline:     #5aa3f5;
  }
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:      var(--font-sans);
  background-color: var(--color-bg);
  color:            var(--color-text);
  line-height:      1.6;
  min-height:       100vh;
}

/* ============================================================
   Utility
   ============================================================ */
.hidden { display: none !important; }

.mono {
  font-family: var(--font-mono);
  font-size:   0.875em;
}

.text-muted { color: var(--color-text-muted); }
.text-sm    { font-size: 0.875rem; }

/* ============================================================
   Views (login / app)
   ============================================================ */
.view { min-height: 100vh; }

/* ============================================================
   Login view
   ============================================================ */
.login-container {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  padding:         1.5rem;
}

.login-card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-md);
  padding:       2.5rem 2rem;
  max-width:     400px;
  width:         100%;
  text-align:    center;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           1.25rem;
}

.login-title {
  font-size:   1.75rem;
  font-weight: 700;
  line-height: 1.25;
}

.login-subtitle {
  color:     var(--color-text-muted);
  font-size: 0.95rem;
}

/* ============================================================
   App header
   ============================================================ */
.app-header {
  background:    var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding:       0 1.5rem;
  height:        56px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           1rem;
  position:      sticky;
  top:           0;
  z-index:       100;
  box-shadow:    var(--shadow-sm);
}

.app-title {
  font-size:   1.1rem;
  font-weight: 600;
  white-space: nowrap;
}

.header-right {
  display:     flex;
  align-items: center;
  gap:         1rem;
  flex-shrink: 0;
}

.refresh-indicator {
  font-size:  0.75rem;
  color:      var(--color-text-muted);
  white-space: nowrap;
  min-width:  120px;
  text-align: right;
}

/* ============================================================
   App content
   ============================================================ */
.app-content {
  max-width:      760px;
  margin:         0 auto;
  padding:        1.5rem 1rem 3rem;
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

/* ============================================================
   Cards
   ============================================================ */
.card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       1.25rem 1.5rem 1.5rem;
  box-shadow:    var(--shadow);
}

.card-heading {
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-bottom:  1rem;
}

.card-heading-sub {
  font-weight:    400;
  text-transform: none;
  letter-spacing: 0;
  font-size:      0.75rem;
}

/* ============================================================
   Info grid (label / value pairs)
   ============================================================ */
.info-grid {
  display:               grid;
  grid-template-columns: 100px 1fr;
  row-gap:               0.5rem;
  align-items:           center;
  margin-bottom:         1rem;
}

.info-label {
  font-size:  0.85rem;
  color:      var(--color-text-muted);
  font-weight: 500;
}

/* ============================================================
   Status pill
   ============================================================ */
.status-pill {
  display:     inline-flex;
  align-items: center;
  padding:     0.2em 0.7em;
  border-radius: 999px;
  font-size:   0.78rem;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  width:       fit-content;
}

.status-running  { background: var(--color-success-bg); color: var(--color-success-text); }
.status-stopped  { background: var(--color-ghost-bg);   color: var(--color-text-muted); }
.status-pending  { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status-stopping { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status-unknown  { background: var(--color-ghost-bg);   color: var(--color-text-muted); }

/* ============================================================
   Action row
   ============================================================ */
.action-row {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  flex-wrap:   wrap;
}

.action-message {
  font-size: 0.85rem;
  color:     var(--color-text-muted);
  flex:      1 1 auto;
  min-height: 1.25em;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.4em;
  padding:         0.5em 1.25em;
  border:          none;
  border-radius:   var(--radius);
  cursor:          pointer;
  font-family:     var(--font-sans);
  font-size:       0.9rem;
  font-weight:     500;
  line-height:     1.4;
  white-space:     nowrap;
  text-decoration: none;
  transition:      background-color 0.12s ease, opacity 0.12s ease, filter 0.12s ease;
  -webkit-user-select: none;
  user-select:     none;
}

.btn:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.42;
  cursor:  not-allowed;
}

.btn-primary {
  background: var(--color-primary);
  color:      #fff;
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.btn-success {
  background: var(--color-success);
  color:      #fff;
}
.btn-success:hover:not(:disabled) {
  filter: brightness(1.12);
}

.btn-danger {
  background: var(--color-danger);
  color:      #fff;
}
.btn-danger:hover:not(:disabled) {
  filter: brightness(1.1);
}

.btn-ghost {
  background: var(--color-ghost-bg);
  color:      var(--color-ghost-text);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--color-ghost-hover);
}

.btn-large { padding: 0.7em 2.5em; font-size: 1rem; }
.btn-small { padding: 0.3em 0.85em; font-size: 0.8rem; }

/* ============================================================
   Spinner
   ============================================================ */
.spinner {
  width:        18px;
  height:       18px;
  border:       2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  flex-shrink:  0;
  animation:    spin 0.65s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Banners (error / info)
   ============================================================ */
.banner {
  padding:       0.75rem 1rem;
  border-radius: var(--radius);
  font-size:     0.875rem;
  border-left:   4px solid transparent;
  width:         100%;
}

.banner-error {
  background:   var(--color-danger-bg);
  color:        var(--color-danger-text);
  border-left-color: var(--color-danger);
}

/* ============================================================
   Target health list
   ============================================================ */
.target-health-list {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

.target-health-item {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  font-size:   0.875rem;
  flex-wrap:   wrap;
}

.health-pill {
  display:     inline-flex;
  align-items: center;
  padding:     0.15em 0.6em;
  border-radius: 999px;
  font-size:   0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.health-healthy   { background: var(--color-success-bg); color: var(--color-success-text); }
.health-unhealthy { background: var(--color-danger-bg);  color: var(--color-danger-text);  }
.health-initial   { background: var(--color-warning-bg); color: var(--color-warning-text); }
.health-draining  { background: var(--color-ghost-bg);   color: var(--color-text-muted);   }
.health-unknown   { background: var(--color-ghost-bg);   color: var(--color-text-muted);   }

.health-target {
  font-family: var(--font-mono);
  font-size:   0.8rem;
  color:       var(--color-text-muted);
}

.health-reason {
  font-size:  0.8rem;
  color:      var(--color-text-muted);
  font-style: italic;
}

/* ============================================================
   Metrics
   ============================================================ */
.metrics-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:                   1rem 1.5rem;
}

.metric-tile {
  display:        flex;
  flex-direction: column;
  gap:            0.1rem;
}

.metric-label {
  font-size:      0.7rem;
  font-weight:    700;
  color:          var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom:  0.15rem;
}

.metric-row {
  display:     flex;
  align-items: baseline;
  gap:         0.3em;
}

.metric-value {
  font-size:   1.5rem;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1.1;
  color:       var(--color-text);
}

.metric-unit {
  font-size: 0.75rem;
  color:     var(--color-text-muted);
}

.sparkline {
  display:    block;
  margin-top: 0.35rem;
  opacity:    0.85;
}

.metrics-timestamp {
  margin-top: 1rem;
  font-size:  0.75rem;
  color:      var(--color-text-muted);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 520px) {
  .app-header { padding: 0 1rem; }
  .app-title  { font-size: 0.95rem; }
  .refresh-indicator { display: none; } /* too narrow — hide countdown on mobile */

  .app-content { padding: 1rem 0.75rem 2rem; }

  .card { padding: 1rem 1rem 1.25rem; }

  .info-grid { grid-template-columns: 90px 1fr; }

  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .metric-value { font-size: 1.2rem; }

  .btn-large { padding: 0.65em 2em; }

  .login-card { padding: 2rem 1.25rem; }
  .login-title { font-size: 1.5rem; }
}

/* ============================================================
   Settings form
   ============================================================ */
.settings-form {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:                   0.85rem 1.25rem;
  margin-bottom:         1.25rem;
}

.form-field {
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
}

.form-field label {
  font-size:   0.8rem;
  font-weight: 500;
  color:       var(--color-text-muted);
}

.form-input {
  font-family:   var(--font-sans);
  font-size:     0.9rem;
  padding:       0.4rem 0.55rem;
  color:         var(--color-text);
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  width:         100%;
}

.form-input:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 1px;
  border-color:   var(--color-primary);
}

select.form-input { cursor: pointer; }

/* Checkbox fields lay out horizontally: box on the left, label on the right. */
.form-field-checkbox {
  flex-direction: row;
  align-items:    center;
  gap:            0.5rem;
}

.form-field-checkbox label {
  order:     2;
  font-size: 0.9rem;
  color:     var(--color-text);
}

.form-field-checkbox .form-input {
  order: 1;
  width: auto;
  flex:  0 0 auto;
}

/* Password field with Show/Hide reveal toggle */
.input-row {
  display:     flex;
  gap:         0.4rem;
  align-items: center;
}

.input-row .form-input { flex: 1 1 auto; }

.reveal-btn {
  flex:          0 0 auto;
  font-size:     0.8rem;
  padding:       0.35rem 0.6rem;
  color:         var(--color-text);
  background:    var(--color-ghost-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  cursor:        pointer;
}

.reveal-btn:hover        { background: var(--color-ghost-hover); }
.reveal-btn:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 1px;
}