/*
 * 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 {
  --app-background: #0d0e10;
  --app-surface: #131416;
  --app-control: #111214;
  --app-control-hover: #202225;
  --app-border: #292b2f;
  --app-border-strong: #3b3e44;
  --app-text: #f0f1f2;
  --app-muted: #92969d;
  --app-accent: #2f9d76;
  --app-accent-hover: #38ad83;
  --app-focus: #70b7ff;
  --app-danger: #ee7d87;
  --app-danger-surface: #211317;
}

html[data-theme="light"] {
  --app-background: #f4f6f8;
  --app-surface: #ffffff;
  --app-control: #ffffff;
  --app-control-hover: #f3f5f7;
  --app-border: #d9dee5;
  --app-border-strong: #aeb8c4;
  --app-text: #17212b;
  --app-muted: #66717d;
  --app-accent: #167a5b;
  --app-accent-hover: #12664c;
  --app-focus: #1769aa;
  --app-danger: #a12835;
  --app-danger-surface: #fae9eb;
}

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: #ffffff;
  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; }
}