/*
  Structural stylesheet for the whole app -- no frameworks, no build step.

  Everything theme-able (colors, fonts, radii, shadows) is a CSS variable
  declared in theme_vars.css; these are the "Default" theme values. A theme is
  a second stylesheet (core/static/core/themes/<id>.css) that overrides
  these variables and may add a few flavor rules of its own. The active
  theme is chosen in the admin (Core > Site settings) and linked in
  base.html after this file.
*/

@import url('theme_vars.css');

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
}

/* --- Navigation bar --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-width) solid var(--line);
}

.site-header nav {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.brand { white-space: nowrap; }

.brand a {
  font-family: var(--font-heading);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 120ms ease;
}

.site-header nav a:hover { color: var(--ink); }

.site-header nav .brand a { color: var(--ink); font-size: 1rem; }

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.username {
  color: var(--muted);
  font-size: 0.9rem;
}

/* The logout button lives in a form (POST) but should look like a nav link. */
.inline-form { display: inline; }

.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--muted);
  cursor: pointer;
  transition: color 120ms ease;
}

.link-button:hover { color: var(--ink); }

/* --- Page content --- */

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
}

h1 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1rem;
}

h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}

p { margin: 0.75rem 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.error {
  background: var(--danger-bg);
  border: var(--border-width) solid var(--danger-line);
  color: var(--danger);
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
}

/* --- Flash messages (django.contrib.messages) --- */

.messages {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.message {
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  color: var(--ink);
}

.message.error {
  background: var(--danger-bg);
  border-color: var(--danger-line);
  color: var(--danger);
}

/* --- Status labels and small action buttons (tables) --- */

.status-available { color: var(--accent); font-weight: 600; }
.status-hold { color: var(--ink); font-weight: 600; }
.status-out { color: var(--muted); }

.help-text {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Keep short labels (e.g. Status) on one line. */
.col-no-wrap {
  white-space: nowrap;
  width: 1%;
}

.small-button {
  padding: 0.3rem 0.85rem;
  border: none;
  border-radius: calc(var(--radius) / 1.4);
  background: var(--button-bg);
  color: var(--button-fg);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
}

.small-button:hover { background: var(--button-bg-hover); }

/* --- Item thumbnails (checkout module) --- */

.item-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  max-width: 14rem;
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.item-title {
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.item-author {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.4;
}

.item-thumb {
  height: 160px;
  width: 120px;
  object-fit: cover;
  border-radius: calc(var(--radius) / 2);
  border: var(--border-width) solid var(--line);
}

/* --- Forms --- */

.narrow-form {
  max-width: 24rem;
  margin-top: 1.5rem;
  padding: 1.75rem;
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.narrow-form label {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.narrow-form label:first-child { margin-top: 0; }

.narrow-form input {
  padding: 0.55rem 0.75rem;
  border: var(--border-width) solid var(--line);
  border-radius: calc(var(--radius) / 1.4);
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.narrow-form input::placeholder { color: var(--muted); opacity: 0.7; }

.narrow-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.narrow-form button {
  margin-top: 1.25rem;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: calc(var(--radius) / 1.4);
  background: var(--button-bg);
  color: var(--button-fg);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.narrow-form button:hover { background: var(--button-bg-hover); }
.narrow-form button:active { transform: translateY(1px); }

/* --- Embedded maps --- */

.map {
  width: 100%;
  height: 28rem;
  margin-top: 1.5rem;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* --- Tables --- */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 1.5rem;
}

.table-wrap table { margin-top: 0; }

table {
  width: 100%;
  margin-top: 1.5rem;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

th, td {
  text-align: left;
  padding: 0.7rem 1rem;
  overflow-wrap: anywhere;
}

th {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: var(--border-width) solid var(--line);
}

td { border-bottom: var(--border-width) solid var(--line); }

tr:last-child td { border-bottom: none; }

table tr:hover td { background: var(--surface-2); }

/* --- Mobile layout (all themes inherit these rules) --- */

@media (max-width: 48rem) {
  body { overflow-x: clip; }

  .site-header nav {
    flex-wrap: wrap;
    gap: 0.55rem 0.9rem;
    padding: 0.75rem 1rem;
  }

  .brand {
    white-space: normal;
    min-width: 0;
    flex: 1 1 auto;
  }

  .nav-right {
    margin-left: 0;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 0.65rem 0.9rem;
  }

  .username {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  main {
    padding: 2rem 1rem 3rem;
  }

  h1 { font-size: 1.65rem; }

  th, td {
    padding: 0.55rem 0.65rem;
    font-size: 0.92rem;
  }

  .item-thumb {
    height: 96px;
    width: 72px;
    flex-shrink: 0;
  }

  .item-cell {
    min-width: 0;
  }

  .map { height: 20rem; }
}