/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  color-scheme: dark;
  --app-background: #060708;
  --app-surface: #131417;
  --app-control: #1a1c20;
  --app-control-hover: #2c3039;
  --app-border: #363a43;
  --app-border-strong: #4b4f5a;
  --app-text: #eef0f3;
  --app-muted: #a2a7b1;
  --app-accent: #4fd1a0;
  --app-accent-hover: #44b48a;
  --app-focus: #70b7ff;
  --app-danger: #ff8f85;
  --app-danger-surface: #3a1f1d;
}

body.session-layout-body {
  background: var(--app-background);
  color: var(--app-text);
}

.session-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--app-background);
  padding: 24px;
}

.session-panel {
  width: min(360px, 100%);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface);
  padding: 26px;
}

.session-header { display: grid; gap: 5px; }
.session-header h1 { font-size: 20px; font-weight: 700; line-height: 1.25; }
.session-header p { color: var(--app-muted); font-size: 12px; }

.session-alert {
  margin-top: 18px;
  border: 1px solid color-mix(in srgb, var(--app-danger) 42%, var(--app-border));
  border-radius: 6px;
  background: var(--app-danger-surface);
  color: var(--app-danger);
  padding: 9px 10px;
  font-size: 12px;
}

.session-form { display: grid; gap: 16px; margin-top: 24px; }
.session-field { display: grid; gap: 7px; }
.session-field label { color: var(--app-muted); font-size: 11px; font-weight: 700; }
.session-field input {
  width: 100%;
  height: 32px;
  border: 1px solid var(--app-border);
  border-radius: 6px;
  background: var(--app-control);
  color: var(--app-text);
  padding: 0 10px;
  font-size: 12px;
}
.session-submit {
  height: 32px;
  border: 1px solid var(--app-accent);
  border-radius: 6px;
  background: var(--app-accent);
  color: #05231a;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 750;
}
.session-field input:hover { border-color: var(--app-border-strong); background: var(--app-control-hover); }
.session-submit:hover { border-color: var(--app-accent-hover); background: var(--app-accent-hover); }
.session-field input:focus,
.session-submit:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }

@media (max-width: 480px) {
  .session-page { align-items: start; padding: 48px 16px 16px; }
  .session-panel { padding: 20px; }
}