:root {
  --ink: #1a1a1a;
  --red: #c0392b;
  --bg: #f5f5f5;
  --border: #ddd;
  --green: #2e7d32;
  --amber: #b8860b;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  flex-wrap: wrap;
}
.topbar .brand a { color: #fff; font-weight: bold; font-size: 1.2em; }
.main-nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.userbox { display: flex; gap: 12px; align-items: center; color: #ccc; }
.userbox a { color: #fff; }

.nav-item { position: relative; }
.nav-toggle {
  background: none;
  border: none;
  color: #ddd;
  font-size: 1em;
  font-family: inherit;
  padding: 10px 14px;
  cursor: pointer;
  display: inline-block;
}
.nav-toggle:hover { color: #fff; }
.nav-toggle.active { color: #fff; font-weight: 600; }
a.nav-toggle { text-decoration: none; }
.nav-dropdown a.active { background: var(--bg); font-weight: 600; }
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 20;
  flex-direction: column;
  overflow: hidden;
}
.nav-dropdown a {
  padding: 10px 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover { background: var(--bg); text-decoration: none; }
.nav-item.open .nav-dropdown { display: flex; }
@media (min-width: 701px) {
  .nav-item:hover .nav-dropdown { display: flex; }
}

.container { max-width: 1200px; margin: 0 auto; padding: 20px; }

h1 { margin-top: 0; }

.cards { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  min-width: 180px;
  flex: 1;
}
.card .label { color: #666; font-size: 0.85em; }
.card .value { font-size: 1.8em; font-weight: bold; }
a.card { color: inherit; transition: box-shadow .15s, border-color .15s; }
a.card:hover { text-decoration: none; border-color: var(--red); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
th { background: #eee; }
.table-scroll { overflow-x: auto; }

.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.toolbar form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-block;
  background: var(--red);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95em;
}
.btn:hover { background: #a5281a; text-decoration: none; color: #fff; }
.btn-secondary { background: #666; }
.btn-secondary:hover { background: #444; }
.btn-sm { padding: 4px 10px; font-size: 0.85em; }
.btn-in { background: var(--green); }
.btn-in:hover { background: #245c26; }
.btn-out { background: var(--amber); }
.btn-out:hover { background: #8f6b08; }

input, select, textarea {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.95em;
}

.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 4px; font-weight: 600; }
.form-box { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 20px; max-width: 520px; }

.alert { padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; }
.alert-error { background: #fdecea; color: #a5281a; border: 1px solid #f5c6cb; }
.alert-success { background: #e8f5e9; color: #245c26; border: 1px solid #c8e6c9; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.8em; font-weight: 600; }
.badge-low { background: #fdecea; color: #a5281a; }
.badge-ok { background: #e8f5e9; color: #245c26; }
.badge-in { background: #e8f5e9; color: #245c26; }
.badge-out { background: #fdecea; color: #a5281a; }
.badge-adjust { background: #fff8e1; color: #8f6b08; }

.login-box {
  max-width: 360px;
  margin: 80px auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 30px;
}
.login-box h1 { text-align: center; font-size: 1.3em; }

.pagination { display: flex; gap: 6px; margin-top: 16px; }
.pagination a, .pagination span { padding: 6px 12px; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.pagination .active { background: var(--red); color: #fff; }

@media (max-width: 700px) {
  .topbar { flex-direction: column; align-items: flex-start; }
  .cards { flex-direction: column; }
  .main-nav { width: 100%; }
  .nav-item { width: 100%; }
  .nav-toggle { width: 100%; text-align: left; }
  .nav-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    min-width: 0;
    width: 100%;
    background: rgba(255,255,255,0.06);
  }
  .nav-dropdown a { color: #fff; border-bottom-color: rgba(255,255,255,0.15); padding-left: 28px; }
  .nav-dropdown a:hover { background: rgba(255,255,255,0.12); }
  .userbox { width: 100%; justify-content: space-between; }
  .form-box { max-width: 100%; }
  .login-box { margin: 40px auto; max-width: 100%; }
}

@media (max-width: 480px) {
  .container { padding: 14px; }
  h1 { font-size: 1.4em; }
  .btn, .btn-sm { padding: 9px 14px; }
}

/* No browser header/footer (URL, date, page no.) on printouts/PDFs: with a zero page margin the
   browser has no room for them; the margin is put back as body padding repeated on every page. */
@page { margin: 0; }
@media print {
    html, body { margin: 0 !important; }
    body { padding: 10mm !important; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}