:root {
  --brand: #facc15 !important;
  --brand-dark: #eab308 !important;
  --ink: #111111 !important;
  --nav: #080808 !important;

  /* The semantic colours. Each page defined these in its own :root, but not
     every page defined all of them: --danger and --success were missing from
     dashboard and login, and --warning from four pages, so anything referring
     to them there silently resolved to nothing. Declared here with the values
     the other pages already agreed on, so the whole admin shares one palette. */
  --danger: #dc2626 !important;
  --success: #16a34a !important;
  --warning: #d97706 !important;
  --soft: #f8fafc !important;
  --line: #e2e8f0 !important;
  --muted: #64748b !important;
}

::selection {
  background: #facc15;
  color: #111111;
}

.sidebar {
  background: #080808 !important;
  border-right-color: rgba(250, 204, 21, .14) !important;
}

.brand {
  min-height: 96px;
}

.brand-mark {
  width: 54px !important;
  height: 62px !important;
  flex: 0 0 54px;
  background: #080808 url("../assets/images/abbizonenobg.png") center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
}

.brand-name {
  color: #ffffff;
}

.brand-sub {
  color: rgba(255, 255, 255, .43) !important;
}

.nav-item.active {
  color: #facc15 !important;
  border-left-color: #facc15 !important;
  background: rgba(250, 204, 21, .10) !important;
}

.nav-item:hover {
  color: #facc15 !important;
  background: rgba(250, 204, 21, .06) !important;
}

.topbar {
  border-bottom-color: rgba(17, 17, 17, .14) !important;
}

.eyebrow,
.section-kicker,
.card-kicker,
.shift-date {
  color: #9a6d00 !important;
}

.panel.dark {
  border-top: 3px solid #facc15 !important;
}

.btn-primary,
.btn-accept,
.generate,
.submit {
  background: #facc15 !important;
  color: #111111 !important;
}

.btn-primary:hover,
.btn-accept:hover,
.generate:hover,
.submit:hover {
  background: #eab308 !important;
}

.action-btn:hover,
.small-btn:hover,
.toolbar button:hover {
  border-color: #d6a900 !important;
  color: #8a6200 !important;
}

.act-edit,
.download {
  color: #8a6200 !important;
}

.bar-fill,
.progress-fill,
.prog-fill {
  background-color: #facc15;
}

.mode-bar,
.status-prospect,
.status-progress,
.chip-inprog,
.doc-type {
  background: #fef9c3 !important;
  color: #713f12 !important;
}

tr.editing-row {
  background: #fffbeb !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #d6a900 !important;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, .16);
}

.login-panel {
  background: #101010 !important;
  color: #ffffff;
}

.login-card h2 {
  color: #ffffff;
}

.login-card > p {
  color: rgba(255, 255, 255, .52) !important;
}

.login-panel label {
  color: rgba(255, 255, 255, .48) !important;
}

.login-panel input {
  border-color: rgba(255, 255, 255, .14) !important;
  background: #080808;
  color: #ffffff;
}

.login-panel .input-wrap i,
.login-panel .password-toggle {
  color: rgba(255, 255, 255, .45) !important;
}

.login-panel .public-link {
  color: rgba(255, 255, 255, .55) !important;
}

.login-panel .public-link:hover {
  color: #facc15 !important;
}

.message.info {
  background: rgba(250, 204, 21, .13) !important;
  color: #fde68a !important;
}

.brand-panel::after {
  border-color: rgba(250, 204, 21, .13) !important;
  box-shadow:
    0 0 0 90px rgba(250, 204, 21, .025),
    0 0 0 180px rgba(250, 204, 21, .016) !important;
}

@media (max-width: 780px) {
  .brand-mark {
    width: 48px !important;
    height: 56px !important;
    flex-basis: 48px;
  }
}

/* Visible to screen readers only. For labelling controls that are clear
   enough visually from context but need a real accessible name. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Canonical button system ─────────────────────────────────────────────────
   Every admin page declared its own .btn base inline, and they had drifted:
   padding ranged from 9px 12px to 14px 16px, font-size was 9px on five pages
   and 10px on two, letter-spacing came in three values, inventory alone had a
   border-radius, and schedule alone had width:100% — which inventory then had
   to fight with width:auto on its own button classes. The same action was a
   different size and shape on each page.

   Eight class names had also grown for four visual roles: btn-primary and
   btn-accept were identical, as were btn-danger/btn-decline,
   btn-soft/btn-cancel and btn-neutral/btn-dark. They are aliased here rather
   than renamed, so existing markup keeps working and no page needs editing.

   This file is linked after each page's inline <style> on all thirteen pages,
   so these rules win at equal specificity without !important. The one
   exception is reports.html's `.btn{display:none!important}`, which is inside
   an @media print block and is meant to win. */
.btn {
  border: 0;
  padding: 11px 14px;
  font-size: 9px;
  font-weight: 600;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1.2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  border-radius: 0;
  text-decoration: none;
}

/* Primary action. One per view, so it stays the obvious next step. */
.btn-primary,
.btn-accept {
  background: var(--brand);
  color: #fff;
}

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

/* Destructive or negative. Outlined rather than filled so it never competes
   with the primary action for attention. */
.btn-danger,
.btn-decline {
  background: #fff;
  color: var(--danger);
  border: 1px solid #fecaca;
}

.btn-danger:hover,
.btn-decline:hover {
  background: #fff1f2;
}

/* Secondary, for cancel and for actions that sit beside a primary. */
.btn-soft,
.btn-cancel {
  background: var(--soft);
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn-soft:hover,
.btn-cancel:hover {
  border-color: var(--brand);
}

/* Dark neutral, for a strong action that is not the primary and not
   destructive, such as opening an editor. */
.btn-neutral,
.btn-dark {
  background: var(--ink);
  color: #fff;
}

.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}