:root {
  --border: #d9d9d9;
  --muted: #f7f7f7;
  --ok: #2e7d32;
  --err: #c62828;
}

body { margin:0; font-family: system-ui, sans-serif; }
header {
    display:flex; align-items:center; justify-content:space-between;
    background:#f8f8f8; padding:0.5rem 1rem; border-bottom:1px solid #ddd;
}
header img.logo { height:40px; }
.userbox { display:flex; align-items:center; gap:.5rem; }
.userbox img { height:24px; }
.userbox span { font-weight:500; }
.logout-btn {
    background:#e53935; color:#fff; border:none; border-radius:6px;
    padding:.4rem .8rem; cursor:pointer; font:inherit;
}

.logout-btn:hover { background:#c62828; }
main { padding:1rem; }

.navbar {
  background-color: #333;
  padding: 0.5rem 1rem;
}

.navbar ul {
  list-style: none;
  display: flex;         /* horizontal layout */
  gap: 1rem;             /* spacing between buttons */
  margin: 0;
  padding: 0;
}

.navbar li {
  margin: 0;
}

.navbar a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #555;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.navbar a:hover {
  background-color: #777;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70vh;                 /* take most of the screen height */
  background: linear-gradient(135deg, #1a1a1a, #333); 
  color: white;
  text-align: center;
}

.hero .tagline {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}


.toolbar { display:flex; gap:10px; flex-wrap:wrap; margin: 12px 0 18px; }
.btn {
    display:inline-flex; align-items:center; gap:.4rem;
    border:1px solid var(--border); background:var(--muted); color:inherit;
    padding:.55rem .9rem; border-radius:.5rem; cursor:pointer; text-decoration:none;
}
.msg { padding:.7rem 1rem; border-radius:.5rem; border:1px solid var(--border); margin:.7rem 0; }
.success { border-color:#a5d6a7; color:var(--ok); }
.error { border-color:#ef9a9a; color:var(--err); }
form { border:1px solid var(--border); border-radius:.5rem; padding:12px; margin:10px 0 20px; }
label { display:block; margin:.5rem 0 .25rem; }
input, textarea, select { width:100%; }
input, textarea { padding:.5rem .6rem; border:1px solid var(--border); border-radius:.35rem; background:#fff; color:inherit; }
select { padding:.45rem .6rem; border:1px solid var(--border); border-radius:.35rem; background:#fff; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media (max-width: 900px){ .row { grid-template-columns: 1fr; } }

table { width:100%; border-collapse: collapse; table-layout: fixed; } /* forces even distribution */
th, td { border:1px solid var(--border); padding:.55rem .6rem; vertical-align: top; }
th { background:var(--muted); text-align:left; }
td, th { overflow-wrap:anywhere; word-break:break-word; }

table td, table th {
  word-wrap: break-word;  /* prevents overflow */
}

td:last-child {
  width: 80px; /* or whatever fits your button */
}

.icon-btn { display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border:1px solid var(--border);
    border-radius:.4rem; background:var(--muted); text-decoration:none; color:inherit; }
.section-hidden { display:none; }
.warnings-table td, .warnings-table th { font-size: .9rem; }

.orders-page .filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .5rem .75rem;
  margin: 1rem 0;
}

.orders-page .filters input[type="text"],
.orders-page .filters input[type="date"],
.orders-page .filters select {
  padding: .45rem .6rem;
}

.orders-page .filters button,
.orders-page .filters .btn-secondary {
  padding: .45rem .8rem;
  border: none;
  background: #333;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.orders-page .filters .btn-secondary { background: #777; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .55rem .6rem; border-bottom: 1px solid #e5e5e5; }
.table th { text-align: left; background: #fafafa; }

.summary { margin: .5rem 0 1rem; color: #555; }

.pagination { display: flex; gap: .5rem; margin: 1rem 0; }
.pagination a {
  padding: .4rem .7rem; background: #333; color: #fff; border-radius: 6px; text-decoration: none;
}

.btn-icon {
  display: inline-block;
  padding: .25rem .45rem;
  border-radius: 6px;
  text-decoration: none;
  background: #eee;
  color: #222;
}
.btn-icon:hover { background: #ddd; }

input:read-only,
textarea:read-only {
  background-color: #f2f2f2;  /* light grey */
}

.inv-row { display:none; background:#fafafa; }
.inv-row.open { background: #e7f1ff; } /* light blue */

.loc-save i,
.loc-del i {
  pointer-events: none;
}

.table-highlight {
  border-collapse: separate; /* allows spacing between cells */
  border-spacing: 0 6px;     /* vertical gap between rows */
}

.table-highlight tr {
  border: 2px solid rgb(0, 17, 255);
  border-radius: 6px;       /* optional: rounded corners */
}

.table-highlight td {
  border: none;             /* remove inner borders */
}

.userbox .user-icon {
  width: 36px;
  height: 36px;
}

.btn,
.btn:hover,
.btn:focus,
.btn:active,
.btn:disabled {
  border-color: blue !important;
}