:root {
  --sidebar-width: 250px;
  --sidebar-bg: #16213a;
  --sidebar-bg-active: #1f2f52;
  --topbar-bg: #ffffff;
  --content-bg: #eef1f5;
  --accent: #2f6fed;
  --accent-teal: #1fb6a6;
}

body {
  background: var(--content-bg);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #33415c;
}

.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: #c7d0e0;
  flex-shrink: 0;
  transition: width .2s ease;
  overflow-x: hidden;
}
.app-shell.collapsed .app-sidebar { width: 68px; }
.app-shell.collapsed .brand-name,
.app-shell.collapsed .sidebar-nav span,
.app-shell.collapsed .sidebar-nav .bi-chevron-down { display: none; }

.sidebar-brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.1rem 1.2rem; font-weight: 700; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px; background: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.sidebar-nav { list-style: none; margin: 0; padding: .75rem 0; }
.sidebar-nav > li > a, .sidebar-nav ul a {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1.2rem; color: #c7d0e0; text-decoration: none; font-size: .92rem;
}
.sidebar-nav > li > a:hover, .sidebar-nav ul a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-nav > li > a.active, .sidebar-nav ul a.active { background: var(--sidebar-bg-active); color: #fff; border-left: 3px solid var(--accent); }
.sidebar-nav ul { list-style: none; padding-left: 2.5rem; }
.sidebar-nav ul a { padding: .5rem 0; }

.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.app-topbar {
  background: var(--topbar-bg); padding: .75rem 1.5rem; display: flex; align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); gap: 1rem;
}
.topbar-title { font-weight: 600; color: #16213a; }
.app-content { padding: 1.5rem; flex: 1; }
.app-footer { background: transparent; }

.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.25rem; flex-wrap: wrap; gap: .75rem; }
.page-title { font-size: 1.35rem; font-weight: 600; color: #16213a; margin-bottom: .2rem; }
.breadcrumb { margin-bottom: 0; font-size: .85rem; }

.card { border: none; border-radius: .6rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }

.stat-card {
  border-radius: .6rem; overflow: hidden; color: #fff; text-decoration: none; display: flex;
  background: #24304f; min-height: 110px;
}
.stat-card:hover { color: #fff; opacity: .93; }
.stat-card .stat-body { padding: 1rem 1.1rem; flex: 1; }
.stat-card .stat-label { text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; opacity: .8; }
.stat-card .stat-value { font-size: 1.9rem; font-weight: 700; }
.stat-card .stat-icon { width: 82px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); font-size: 1.6rem; }

.badge-status-active, .badge-status-paid, .badge-status-delivered { background: #2f6fed; }
.badge-status-pending, .badge-status-processing { background: #f0ad4e; color: #4a3200; }
.badge-status-inactive, .badge-status-cancelled, .badge-status-unpaid { background: #dc3545; }
.badge-status-shipped, .badge-status-partially_paid { background: #6f42c1; }

.document-card { background: #f8f9fb; border-radius: .5rem; border: 1px solid #e5e9f0; width: 130px; }

.auth-body { background: var(--sidebar-bg); }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-card { width: 100%; max-width: 380px; background: #fff; border-radius: .75rem; padding: 2.25rem; box-shadow: 0 10px 40px rgba(0,0,0,.25); }

.permission-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem .75rem; }
@media (max-width: 576px) { .permission-grid { grid-template-columns: 1fr; } }

.table-responsive table.dataTable { width: 100% !important; }

@media (max-width: 991px) {
  .app-sidebar { position: fixed; z-index: 1040; height: 100vh; left: -260px; }
  .app-shell.sidebar-open .app-sidebar { left: 0; }
  .app-shell.collapsed .app-sidebar { width: var(--sidebar-width); }
}

/* Work sheet: QTY is a hand-written column, so give it room to write in. */
/* QTY and Notes are written on by hand, so they get real room on the page
   and faint rules to write along. */
.worksheet-table td.qty-writein { min-width: 70px; }
.worksheet-table td.notes-writein { min-width: 240px; }
.worksheet-table td.qty-writein,
.worksheet-table td.notes-writein {
  height: 34px;
  background: repeating-linear-gradient(transparent, transparent 32px,
              #dfe4ec 32px, #dfe4ec 33px);
}
.worksheet-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }


/* The company letterhead in the sidebar. The file is white-on-transparent so
   it sits on the dark panel; the documents use the black version. */
.sidebar-brand { padding: 16px 14px; }
.sidebar-brand .brand-logo { width: 100%; max-width: 180px; height: auto; display: block; }


/* The History screen. Each row can carry several field changes, so they are
   laid out as a compact inner table: what moved, from what, to what. The
   before is struck through so the eye lands on the value that is live now. */
.change-table { background: transparent; font-size: .82rem; }
.change-table td { border: 0; padding: 1px 8px 1px 0; vertical-align: top; }
.change-field { color: #6b7a92; white-space: nowrap; }
.change-before { color: #a3382f; text-decoration: line-through; }
.change-arrow { color: #9aa7bb; }
.change-after { color: #1c7c4c; font-weight: 600; }

/* Hovering a row tints it translucent blue, matching the web console.
   Bootstrap's default is a translucent black, which reads as a grey smudge
   on the printed documents; a blue tint stays clearly a highlight. */
.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: transparent;
  background-color: rgba(47, 143, 216, .14);
}
@media print {
  .table-hover > tbody > tr:hover > * { background-color: transparent !important; }
}

/* The compose screen. Laid out as label-beside-field like a real mail
   client, so the eye runs straight down the values rather than reading a
   stack of form labels. Collapses to one column on a phone. */
.compose { max-width: 820px; }
.compose-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: .75rem;
  align-items: start;
  padding: .7rem 0;
  border-bottom: 1px solid #eef1f5;
}
.compose-row:last-of-type { border-bottom: 0; }
.compose-label {
  font-size: .82rem;
  font-weight: 600;
  color: #6b7a92;
  padding-top: .45rem;
}
.compose-field { min-width: 0; }
.compose-row .form-control {
  border: 1px solid transparent;
  background: #f7f9fc;
}
.compose-row .form-control:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: none;
}
.compose-body { font-family: inherit; line-height: 1.6; resize: vertical; }

/* One attachment per line: a tick box, a PDF marker, the document's name and
   the file it will arrive as. Reads as a list of files, not a list of
   checkboxes. */
.attach-list { display: flex; flex-direction: column; gap: .4rem; }
.attach {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .7rem;
  border: 1px solid #e5e9f0;
  border-radius: .5rem;
  background: #fff;
  cursor: pointer;
}
.attach:hover { border-color: #c6d0de; }
.attach:has(input:checked) { border-color: var(--accent); background: #f5f8ff; }
.attach input { flex-shrink: 0; }
.attach-icon {
  flex-shrink: 0;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #b4342c;
  background: #fbe9e7;
  border-radius: .25rem;
  padding: .2rem .35rem;
}
.attach-text { display: flex; flex-direction: column; min-width: 0; }
.attach-label { font-size: .9rem; font-weight: 500; }
.attach-file {
  font-size: .75rem;
  color: #6b7a92;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 576px) {
  .compose-row { grid-template-columns: 1fr; gap: .3rem; }
  .compose-label { padding-top: 0; }
}

/* Finding a document from another shipment. One box, results grouped under
   the shipment they belong to, each document a tick away from the email. */
.finder-search { display: flex; gap: .5rem; }
.finder-search .form-control { flex: 1; min-width: 0; }
.finder-results {
  margin-top: .6rem;
  border: 1px solid #e5e9f0;
  border-radius: .5rem;
  overflow: hidden;
}
.finder-shipment { padding: .6rem .7rem; border-bottom: 1px solid #eef1f5; }
.finder-shipment:last-child { border-bottom: 0; }
.finder-heading {
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .4rem;
}
.finder-meta { font-weight: 400; color: #6b7a92; font-size: .78rem; }
.attach-note {
  font-weight: 400;
  font-size: .72rem;
  color: #1d4fb8;
  background: #e8effd;
  border-radius: .25rem;
  padding: .05rem .3rem;
  margin-left: .3rem;
}

/* The file-type marker on an attachment. Red for PDF, green for a
   spreadsheet, blue for a document, grey for anything else -- the same
   colours these files carry everywhere else, so they are recognised rather
   than read. */
.attach-icon { min-width: 2.2rem; text-align: center; }
.attach-icon-xlsx, .attach-icon-xls, .attach-icon-csv { color: #1c7c4c; background: #e3f4ea; }
.attach-icon-doc, .attach-icon-docx { color: #1d4fb8; background: #e8effd; }
.attach-icon-png, .attach-icon-jpg, .attach-icon-jpeg { color: #a2660f; background: #fbf0dc; }

/* Shipment lookup: one big box, because typing a number is the whole job. */
.lookup-search { display: flex; gap: .5rem; }
.lookup-search .form-control { flex: 1; min-width: 0; }
.lookup-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1.1rem;
  margin: 0;
  font-size: .88rem;
}
.lookup-facts dt { color: #6b7a92; font-weight: 500; white-space: nowrap; }
.lookup-facts dd { margin: 0; font-weight: 500; }
.lookup-files { list-style: none; margin: 0; padding: 0; }
.lookup-files li { padding: .3rem 0; display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline; }
@media (max-width: 576px) {
  .lookup-search { flex-direction: column; }
  .lookup-facts { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .lookup-facts dd { margin-bottom: .4rem; }
}

/* An uploaded spreadsheet shown on screen. Kept tight so a wide packing
   list is readable without scrolling forever, with the row numbers frozen
   at the left the way a spreadsheet has them. */
.sheet-preview { font-size: .8rem; white-space: nowrap; }
.sheet-preview td { padding: .25rem .5rem; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.sheet-preview .sheet-rownum {
  position: sticky; left: 0; background: var(--surface-2, #f4f6f8);
  width: 3rem; user-select: none;
}

/* Charges shown on the invoice for the record, but NOT added into what the
   customer owes. Shaded the same light green as the printed invoice, so the
   screen and the paper agree at a glance. */
.charge-noted > td { background: #e3f4e4; }
.charge-noted-field label { color: #1b5e20; font-weight: 600; }
.charge-noted-field input { background: #f2fbf3; }