:root {
  --brand-primary: #1f2330;
  --brand-primary-hover: #343a4d;
  --bg: #f3f4f7;
  --surface: #ffffff;
  --text: #1a1d27;
  --text-muted: #6b7280;
  --border: #e3e5ea;
  --danger: #d9534f;
  --danger-hover: #c9302c;
  --success-bg: #e6f4ea;
  --success-text: #1e7a34;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 3px rgba(16, 18, 26, 0.08), 0 1px 2px rgba(16, 18, 26, 0.06);
  --spacing: 1rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Header */
.site-header {
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  box-shadow: var(--shadow);
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
}

.site-header .brand img {
  height: 32px;
  width: auto;
  border-radius: 4px;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
}

.site-header nav a,
.site-header nav span,
.site-header nav button {
  color: rgba(255, 255, 255, 0.85);
}

.site-header nav a:hover {
  color: #fff;
}

.link-button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

/* Layout */
main {
  max-width: 1080px;
  margin: 1.5rem auto 3rem;
  padding: 0 1.5rem;
}

main.main-wide {
  max-width: none;
  margin: 1.5rem 0 3rem;
  padding: 0 1rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.card h1 {
  margin-top: 0;
  font-size: 1.4rem;
}

.card h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

/* Buttons */
.btn {
  display: inline-block;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  border-color: var(--brand-primary);
  text-decoration: none;
}

.btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--brand-primary-hover);
}

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn-danger:hover {
  background: var(--danger-hover);
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand-primary);
  text-decoration: underline;
}

.actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.75rem 0;
}

/* Forms */
form p {
  margin: 0 0 0.9rem;
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  color: var(--text-muted);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="file"],
input[type="color"],
select,
textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 1px;
}

/* Tables */
.table-wrap {
  overflow-x: auto;
}

table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

table.table th,
table.table td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.65rem;
  text-align: left;
}

table.table thead th {
  background: #f8f9fb;
  position: sticky;
  top: 0;
  z-index: 2;
}

table.table tbody tr:nth-child(even) {
  background: #fafbfc;
}

table.table input[type="text"] {
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
}

/* Excel file viewer: full-height scrollable area with both header rows frozen */
.excel-table-wrap {
  overflow: auto;
  max-height: 75vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

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

.excel-table-wrap table.table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.excel-table-wrap table.table thead th {
  position: static;
  white-space: nowrap;
}

/* Messages */
.messages {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.messages li {
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  background: var(--success-bg);
  color: var(--success-text);
  font-size: 0.9rem;
}

.messages li.error {
  background: #fdecea;
  color: #b3261e;
}

/* Pagination */
.pagination {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 0.9rem;
  margin-top: 1rem;
}

/* Lists */
.plain-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plain-list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.plain-list li:last-child {
  border-bottom: none;
}

/* Login page */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-primary), #11131a);
  background-size: cover;
  background-position: center;
}

.login-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  width: 100%;
  max-width: 360px;
}

.login-card .login-brand {
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-card .login-brand img {
  max-height: 56px;
  margin-bottom: 0.5rem;
}

.login-card .login-brand h1 {
  font-size: 1.2rem;
  margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  main {
    padding: 0 1rem;
    margin: 1rem auto 2rem;
  }

  .card {
    padding: 1rem;
  }
}

/* Watermark overlay: scoped to the Excel table area only. The container
   is sized to match the table's own visible (scrollable) viewport, and the
   watermark is centered within it via absolute positioning, so it stays
   centered while scrolling the table but never bleeds outside the table. */
.excel-watermark-container {
  position: relative;
  overflow: hidden;
}

.watermark-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  z-index: 500;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  max-width: 90%;
}

.watermark-overlay.watermark-text {
  font-size: 2.2rem;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
}

.watermark-overlay.watermark-image img {
  max-width: 40vw;
  max-height: 40vh;
}

/* Footer */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.85rem 1rem;
  margin-top: 2rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.3;
}

.site-footer p {
  margin: 0.15rem 0;
}

.site-footer-tagline {
  font-weight: 600;
  color: var(--text);
}

.site-footer a {
  color: var(--text-muted);
}

.site-footer-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.site-footer-line > span:not(:last-child)::after {
  content: "\2022";
  margin-left: 0.5rem;
  color: var(--border);
}

.site-footer-social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.site-footer-social a {
  color: var(--text-muted);
  display: inline-flex;
}

.site-footer-social a:hover {
  color: var(--brand-primary);
}