/** { box-sizing: border-box; }*/

html {
  background: #f9f9f9;
  color-scheme: light;
}

p {
  font-size: 15px;
}

body {
  margin: 0 auto;
  font-family: monospace;
  color: black;
  background: #f9f9f9;
}

/* Full-width scroll container to the right of the sidebar. Filling the whole
   remaining width (not just the 800px column) means the scrollbar sits at the
   viewport edge and scrolling works anywhere right of the sidebar. */
.content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

main {
  max-width: 800px;
  padding: 46px 40px;
  border-left: 1px solid slateblue;
  background: #f9f9f9;
  flex: 1; /* fill .content's height so the border/background span full height */
}

/* TODO: format */
code {
  color: black;
  background: lightyellow;
}

.topbar {
  height: 58px;
  background: #f8f6ff;
  border-bottom: 1px solid slateblue;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu-toggle {
  display: none;
  background: transparent;
  color: SlateBlue;
  border: 1px solid #cdbbff;
  border-radius: 4px;
  font-size: 20px;
  line-height: 1;
  padding: 4px 10px;
  cursor: pointer;
}

.logo {
  font-size: 28px;
  line-height: 1;
  color: red;
}

.brand-text {
  font-size: 30px;
  font-weight: bold;
  color: SlateBlue;
  text-decoration: none;
}

nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

nav a {
  text-decoration: underline;
  color: SlateBlue;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
}

nav a.active {
  font-weight: bold;
  border: 1px solid red;
}

/* Account / Log In button — lives at the top of the sidebar. */
.sidebar .account {
  display: block;
  width: auto;
  text-align: center;
  color: white;
  background: #7650dc;
  padding: 11px 21px;
  margin: 6px 10px 14px;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
}

/* Sign Up button — sits above the Log In button, logged-out only. */
.sidebar .signup {
  display: block;
  width: auto;
  text-align: center;
  color: #7650dc;
  background: white;
  padding: 11px 21px;
  margin: 6px 10px 0;
  border: 1px solid #7650dc;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
}

.page {
  display: flex;
  /* Fill the viewport below the topbar and contain children's scroll, so the
     sidebar and main each scroll independently — the sidebar no longer grows
     with (or scrolls away under) long main content. */
  height: calc(100vh - 59px); /* 58px topbar + 1px border (content-box) */
  overflow: hidden;
}

h1 {
  margin: 0 0 26px;
}

.landing-page {
  h1 {
    font-size: 3em;
    text-align: center;
  }
  h2 {
    font-size: 2em;
  }
}

/* Per-page content tweaks for markdown pages. Scoped to the page's <main>
   (the .page-<slug> class set in layout.erb) so bare element selectors don't
   leak out of the content column into the sidebar <aside>. */
.page-faq {
  ul { margin-top: 1em; }
  li { font-size: 15px; }
  p  { margin-bottom: 1em; }
}

.page-lto {
  ul { padding-left: 1.5em; }
  li { font-size: 16px; }
  td { font-family: monospace; }
  form, table, .dim { opacity: 50%; }
}

.sidebar {
  min-width: 250px;
  background: #f8f6ff;
  border-right: 1px solid #cdbbff;

  padding-left: 0.5em;
  padding-right: 0.5em;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  overflow-y: auto;
}

.sidebar-public {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.sidebar h2 {
  margin-bottom: 5px;
}

.sidebar a {
  display: block;
  text-decoration: none;
  color: blue;
  font-size: 16px;
  margin-bottom: 5px;

  padding: 1px;
  margin-left: 10px;

  width: 200px;
}

.sidebar a.active {
  background: #7650dc;
  color: white;
  border-radius: 3px;
}

.logged-in {
  color: #7650dc;
  font-size: 16px;
  font-style: italic;
  margin: 10px 0 0 0px;
}
.logged-in ul {
  margin: 6px;
  padding-left: 25px;
}

p {
  margin-bottom: 24px;
}

.actions {
  display: flex;
  gap: 4px;
}

button {
  background: #6527d9;
  color: white;
  font-size: 20px;
  padding: 9px 20px;
  border: 1px solid #2b006b;
  border-radius: 4px;
  cursor: pointer;
}

table, td, th {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
  font-size: 16px;
  white-space: nowrap;
}

th {
  color: white;
  background-color: SlateBlue;
  text-align: center;
}

tr.highlight td {
  background: #dff5df;
}

tr.competitor td {
  background: #f5dfdf;
}

tr.competitor td a {
  font-weight: normal;
}

table tr > td:first-child,
table tr > th:first-child {
  white-space: nowrap;
}

/* VM Management Page */

.vm-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.vm-header h1 {
  margin: 0;
}

.vm-control-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 18px 0;
}

.vm-control-row .vm-preview {
  margin: 0;
}

.vm-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}

.vm-actions form {
  display: block;
  margin: 0;
}

.vm-actions button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-size: 14px;
  padding: 5px 12px;
  line-height: 1.4;
  border-width: 2px;
  width: 100%;
  box-sizing: border-box;
}

.btn-secondary {
  background: white;
  color: #6527d9;
  border: 1px solid #cdbbff;
}

.btn-secondary:hover {
  background: #f8f6ff;
}

.btn-danger {
  background: white;
  color: #c0392b;
  border: 1px solid #e8b4b4;
}

.btn-danger:hover {
  background: #fff5f5;
}

.btn-success {
  background: white;
  color: #1a7a1a;
  border: 1px solid #8fcf8f;
}

.btn-success:hover {
  background: #f5fff5;
}

.btn-warning {
  background: white;
  color: #8a6d00;
  border: 1px solid #e8d68f;
}

.btn-warning:hover {
  background: #fffceb;
}

.vm-actions button:disabled,
.vm-actions button:disabled:hover {
  background: #f5f5f5;
  color: #999;
  border-color: #ccc;
  cursor: not-allowed;
  opacity: 0.65;
}

.vm-info-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 6px;
}

.vm-info-label {
  color: #6a6a7c;
  white-space: nowrap;
  min-width: 110px;
}

.vm-info-value {
  color: #1a1a2e;
  font-weight: bold;
}

.vm-preview {
  display: block;
  width: 500px;
  margin: 18px 0;
  border: 1px solid #cdbbff;
  border-radius: 4px;
}

@media (prefers-color-scheme: dark) {
  html {
    background: #15151f;
    color-scheme: dark;
  }

  body {
    background: #15151f;
    color: #ddddf0;
  }

  code {
    color: #ddddf0;
    background: #1e1e10;
  }

  a:link {
    color: #8ab4ff;
  }

  a:visited {
    color: #c8a2e8;
  }

  hr {
    border-color: #2a2045;
  }

  .topbar {
    background: #1d1d33;
    border-bottom-color: #5a4fa0;
  }

  .brand-text {
    color: #9d8fdb;
  }

  nav a {
    color: #9d8fdb;
  }

  nav .account {
    background: #5535b8;
    color: white;
  }

  .menu-toggle {
    color: #9d8fdb;
    border-color: #2a2045;
  }

  main {
    background: #15151f;
    border-left-color: #5a4fa0;
  }

  .sidebar {
    background: #1d1d33;
    border-right-color: #2a2045;
  }

  .sidebar a {
    color: #7b9fef;
  }

  .sidebar a.active {
    background: #5535b8;
    color: white;
  }

  .logged-in {
    color: #9d8fdb;
  }

  button {
    background: #5535b8;
    border-color: #3a2090;
  }

  table, td, th {
    border-color: #75758a;
  }

  table {
    border-width: 2px;
  }

  th {
    color: white;
    background-color: #4a3f8a;
  }

  tr.highlight td {
    background: #2a662a;
  }

  tr.competitor td {
    background: #662a2a;
  }

  table td a:link,
  table td a:visited {
    color: #ddddf0;
  }

  .btn-secondary {
    background: #1d1d33;
    color: #9d8fdb;
    border-color: #2a2045;
  }

  .btn-secondary:hover {
    background: #1f1f38;
  }

  .btn-danger {
    background: #1d1d33;
    color: #e06060;
    border-color: #5c2020;
  }

  .btn-danger:hover {
    background: #201010;
  }

  .btn-success {
    background: #1d1d33;
    color: #5cd45c;
    border-color: #2a5c2a;
  }

  .btn-success:hover {
    background: #102010;
  }

  .btn-warning {
    background: #1d1d33;
    color: #e6c060;
    border-color: #5c4a20;
  }

  .btn-warning:hover {
    background: #201a10;
  }

  .vm-actions button:disabled,
  .vm-actions button:disabled:hover {
    background: #15152a;
    color: #5a5a78;
    border-color: #2a2a45;
    cursor: not-allowed;
    opacity: 0.7;
  }

  .vm-info-label {
    color: #8080a0;
  }

  .vm-info-value {
    color: #c8c8e0;
  }

  .vm-preview {
    border-color: #2a2045;
  }

}

/* Mobile: iPhone 13 mini (375px) and up to tablet width */
@media (max-width: 768px) {
  .topbar {
    height: auto;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 14px;
  }

  .brand-text {
    font-size: 24px;
  }

  nav {
    gap: 14px;
    flex-wrap: wrap;
  }

  nav a {
    font-size: 14px;
  }

  nav .account {
    padding: 8px 14px;
    font-size: 14px;
  }

  .page {
    flex-direction: column;
    /* mobile: sidebar is a toggled slide-in menu and the document scrolls
       normally — undo the desktop fixed-viewport/independent-scroll shell */
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .content {
    overflow: visible;
  }

  .menu-toggle {
    display: inline-block;
  }

  .sidebar {
    display: none;
    min-width: 0;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #cdbbff;
    padding: 14px 16px;
  }

  body.menu-open .sidebar {
    display: block;
  }

  .sidebar a {
    width: auto;
    margin-left: 6px;
  }

  main {
    max-width: 100%;
    padding: 24px 16px;
    border-left: none;
    overflow-x: auto;
  }

  h1 {
    font-size: 1.8em;
    margin-bottom: 18px;
  }

  .landing-page h1 {
    font-size: 2em;
  }

  .landing-page h2 {
    font-size: 1.5em;
  }

  table, td, th {
    font-size: 13px;
    white-space: normal;
  }

  td, th {
    padding: 4px 6px;
  }

  /* VM page */
  .vm-control-row {
    gap: 10px;
  }

  .vm-preview {
    width: auto;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 0;
    height: auto;
  }

  .vm-info-label {
    min-width: 100px;
  }

  .col-wwn,
  .col-model {
    display: none;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 768px) {
  .sidebar {
    border-bottom-color: #2a2045;
  }
}