/* =====================================================================
   Pierson Workholding — Modern Skin
   Loaded after Bootstrap 4 and after layout.html inline styles.
   Overrides the existing dark/yellow theme with a cleaner industrial look.
   ===================================================================== */

/* ----- Design tokens -------------------------------------------- */
:root {
  --bg:          #111827;   /* gray-900 — main background */
  --surface:     #1f2937;   /* gray-800 — cards, modals, inputs */
  --surface-alt: #374151;   /* gray-700 — hover, zebra, nav */
  --border:      #4b5563;   /* gray-600 */
  --border-light:#374151;   /* gray-700 — subtler borders */

  --ink:         #f9fafb;   /* gray-50  — primary text */
  --ink-muted:   #9ca3af;   /* gray-400 — secondary text */
  --ink-faint:   #6b7280;   /* gray-500 — very subtle text */

  --accent:      #fbbf24;   /* amber-400 — scan highlight, icons */
  --accent-dim:  #d97706;   /* amber-600 — hover state */
  --blue:        #3b82f6;   /* blue-500  — primary interactive */
  --blue-dim:    #2563eb;   /* blue-600  — button hover */
  --success:     #22c55e;   /* green-500 */
  --danger:      #ef4444;   /* red-500   */

  --radius-sm:   4px;
  --radius:      6px;
  --radius-lg:   10px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 4px 12px rgba(0,0,0,.5);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --sidebar-w: 190px;
}

/* ----- Sidebar layout ------------------------------------------- */
#app.has-sidebar {
  display: flex;
  min-height: 100vh;
}

#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background-color: #0f172a;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  border-right: 1px solid var(--border-light);
}

#main-content {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  padding: 24px 28px;
}

/* Brand */
.sidebar-brand {
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  line-height: 1.2;
}
.sidebar-logo {
  display: block;
  width: 100%;
  max-width: 148px;
  height: auto;
  margin-bottom: 4px;
}
.sidebar-brand-sub {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Nav links */
.sidebar-nav {
  list-style: none !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  flex: 1;
}
.sidebar-nav li { margin: 1px 8px; }
.sidebar-nav li a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: var(--ink-muted) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 12px !important;
  border-radius: var(--radius) !important;
  text-decoration: none;
  transition: background-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.sidebar-nav li a i {
  width: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.sidebar-nav li a:hover {
  background-color: rgba(255,255,255,.07) !important;
  color: var(--ink) !important;
}
.sidebar-nav li a:hover i { color: var(--accent); }

/* Footer / user */
.sidebar-footer {
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.sidebar-username {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.sidebar-footer a {
  font-size: 11px;
  color: var(--ink-faint) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sidebar-footer a:hover { color: var(--danger) !important; }

/* Suppress the old top-nav styles */
#logout { display: none !important; }
.horiz-menu { display: none !important; }

/* ----- Base ------------------------------------------------------ */
html, body {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  background-color: var(--bg) !important;
  color: var(--ink) !important;
}

a { color: var(--blue); }
a:hover { color: var(--accent); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

hr {
  border-color: var(--border-light);
  margin: 1rem 0;
}

/* Override Bootstrap's white background helpers */
.bg-white, .card, .card-body { background-color: var(--surface) !important; }

/* ----- Navigation ------------------------------------------------ */
/* The app uses a custom .horiz-menu div, not Bootstrap navbar */
#logout {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border-light);
  padding: 0;
  margin-bottom: 0;
  box-shadow: var(--shadow-sm);
}

.horiz-menu ul {
  background-color: var(--surface) !important;
  display: flex;
  align-items: center;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.horiz-menu li { float: none !important; }

.horiz-menu li a {
  display: block;
  color: var(--ink-muted) !important;
  padding: 14px 18px !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
  border-bottom: 2px solid transparent;
}

.horiz-menu li a:hover {
  color: var(--ink) !important;
  background-color: var(--surface-alt) !important;
  border-bottom-color: var(--accent);
}

/* active page indicator — add .active class via JS or check URL in template */
.horiz-menu li a.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent);
}

/* User / logout area */
#logout .col-md-2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 1.5em;
}

#logout .col-md-2 .large {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}

#logout .col-md-2 a {
  font-size: 12px;
  color: var(--ink-faint);
  margin-left: 8px;
}

#logout .col-md-2 a:hover { color: var(--danger); }

@media (max-width: 860px) {
  .horiz-menu ul { flex-direction: column; }
  .horiz-menu li { width: 100%; }
  .horiz-menu li a { text-align: left !important; }
}

/* ----- Inputs & Forms ------------------------------------------- */
input,
textarea,
select,
.form-control,
.form-control:focus {
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  border: none !important;
  border-bottom: 2px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 6px 8px !important;
  transition: border-color 0.15s !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-bottom-color: var(--accent) !important;
  outline: none !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder { color: var(--ink-faint); }

label {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}

.form-group { margin-bottom: 1.1rem; }

/* Select arrow — darken the native arrow on dark bg */
select {
  appearance: auto;
}

/* ----- Scan input — the primary hero element -------------------- */
.scan-col input {
  height: 3em !important;
  font-size: 1.6em !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  border: 2px solid var(--accent) !important;
  border-radius: var(--radius-sm) !important;
  background-color: var(--surface) !important;
  color: var(--accent) !important;
  letter-spacing: 0.05em;
  padding: 0 14px !important;
  width: 80% !important;
  transition: box-shadow 0.15s, border-color 0.15s !important;
}

.scan-col input:focus {
  box-shadow: 0 0 0 3px rgba(251,191,36,.2) !important;
  border-color: var(--accent) !important;
}

/* Scanner status */
.status-col { text-align: left; }
.status-col h4 {
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 2px 0;
}

/* Scanning active/inactive colors (keep .red and .green from layout) */
.red  { color: var(--danger)  !important; }
.green{ color: var(--success) !important; }

/* ----- Buttons --------------------------------------------------- */
.btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm) !important;
  padding: 6px 16px;
  letter-spacing: 0.01em;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
  border: none;
}

.btn-sm { padding: 4px 10px; font-size: 12px; }

.btn-primary {
  background-color: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--blue-dim) !important;
  border-color: var(--blue-dim) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25) !important;
}

.btn-success {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}
.btn-success:hover {
  background-color: #15803d !important;
  border-color: #15803d !important;
}

.btn-danger {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}
.btn-danger:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

.btn-secondary {
  background-color: var(--surface-alt) !important;
  border-color: var(--border) !important;
  color: var(--ink-muted) !important;
}
.btn-secondary:hover {
  background-color: var(--border) !important;
  color: var(--ink) !important;
}

.btn-warning {
  background-color: var(--accent-dim) !important;
  border-color: var(--accent-dim) !important;
  color: #000 !important;
}

.btn-outline-secondary {
  background-color: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--ink-muted) !important;
}

/* ----- Tables ---------------------------------------------------- */
/* .element-table is the app's custom Vue-rendered table */
.element-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  background-color: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}

.element-table tr th {
  background-color: #0f172a !important;
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.element-table tr td {
  color: var(--ink) !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--border-light) !important;
  vertical-align: middle !important;
  font-size: 13.5px;
}

/* Dark zebra rows */
.element-table tr.odd td {
  background-color: var(--surface) !important;
}
.element-table tr.even td {
  background-color: #273142 !important;
}

.element-table tr:last-child td { border-bottom: none !important; }

.element-table tr:hover td {
  background-color: var(--surface-alt) !important;
  transition: background-color 0.1s;
}

/* Barcode / monospace values in tables */
.element-table td .barcode-number,
.barcode-number {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  color: var(--accent) !important;
  letter-spacing: 0.04em;
}

/* ----- Items table column widths --------------------------------- */
/* Actions: wide enough for Edit+Delete side by side, no wrap       */
/* Item #: narrow numeric                                           */
/* Barcodes: constrained (PIER-XXXX = ~9 chars)                    */
/* Has Email: short but header must not wrap                        */
.items-table th:nth-child(1),
.items-table td:nth-child(1) { width: 145px !important; white-space: nowrap !important; }

.items-table th:nth-child(2),
.items-table td:nth-child(2) { width: 64px !important; white-space: nowrap !important; }

.items-table th:nth-child(4),
.items-table td:nth-child(4) { width: 110px !important; }

.items-table th:nth-child(6),
.items-table td:nth-child(6) { width: 80px !important; white-space: nowrap !important; }

/* ----- DataTables overrides (used on po_report) */
table.dataTable { border-collapse: collapse !important; }

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--ink-muted) !important;
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 4px 10px !important;
  margin: 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--surface-alt) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
}

.dataTables_wrapper .dataTables_filter input {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
  padding: 4px 8px !important;
}

.dataTables_wrapper .dataTables_length select {
  border-radius: var(--radius-sm) !important;
  padding: 4px 6px !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  color: var(--ink-muted) !important;
  font-size: 12.5px;
}

/* ----- Modals ---------------------------------------------------- */
.modal-backdrop { background-color: rgba(0,0,0,.75); }

.modal-content {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow);
  color: var(--ink) !important;
}

.modal-header {
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: 16px 20px;
}

.modal-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.modal-body {
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  padding: 20px;
}

.modal-footer {
  background-color: var(--surface) !important;
  border-top: 1px solid var(--border-light) !important;
  padding: 12px 20px;
}

/* Override the previous .modal background */
.modal { background-color: transparent !important; }

/* Modal icons */
.modal i {
  color: var(--blue) !important;
  margin-left: 10px;
}
.modal i:hover { color: var(--accent) !important; cursor: pointer; }

/* Modal multi-value tags (recipients) */
.modal .modal-multi-val {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--surface-alt);
  color: var(--ink) !important;
  border-radius: 4px;
  padding: 3px 8px;
  margin: 3px 4px 3px 0;
  font-size: 12.5px;
}

.modal .modal-multi-val i {
  color: var(--ink-faint) !important;
  margin-left: 4px;
  font-size: 11px;
}
.modal .modal-multi-val i:hover { color: var(--danger) !important; }

/* Modal fixed info labels (read-only values in log viewer) */
.modal-fixed-info {
  color: var(--accent) !important;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Close button */
.modal .close {
  color: var(--ink-muted) !important;
  opacity: 0.8;
  text-shadow: none;
}
.modal .close:hover { color: var(--ink) !important; opacity: 1; }

/* ----- Alerts ---------------------------------------------------- */
.alert {
  border-radius: var(--radius) !important;
  border: none !important;
  font-size: 13.5px;
  font-weight: 500;
}

.alert-danger {
  background-color: rgba(239,68,68,.15) !important;
  color: #fca5a5 !important;
  border-left: 3px solid var(--danger) !important;
}

.alert-success {
  background-color: rgba(34,197,94,.12) !important;
  color: #86efac !important;
  border-left: 3px solid var(--success) !important;
}

.alert-info {
  background-color: rgba(59,130,246,.12) !important;
  color: #93c5fd !important;
  border-left: 3px solid var(--blue) !important;
}

/* ----- Badges ---------------------------------------------------- */
.badge {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-sm) !important;
  padding: 3px 7px;
}

/* ----- Input groups ---------------------------------------------- */
.input-group-btn .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
.input-group .form-control { border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; }
.input-group-text {
  background-color: var(--surface-alt) !important;
  border-color: var(--border) !important;
  color: var(--ink-muted) !important;
}

/* ----- Search input ---------------------------------------------- */
.search-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
}
.search-input i { color: var(--ink-faint); font-size: 14px; }
.search-input input {
  border: none !important;
  border-bottom: 2px solid var(--border) !important;
  flex: 1;
  font-size: 14px;
  padding: 6px 0 !important;
}
.search-input input:focus { border-bottom-color: var(--accent) !important; }

/* ----- Email textarea -------------------------------------------- */
.email-input {
  height: 22em !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  line-height: 1.5;
  resize: vertical !important;
  width: 100% !important;
}

/* ----- Login page ------------------------------------------------ */
form[action="/ui/login"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

form[action="/ui/login"]::before {
  content: 'Pierson Workholding';
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}

form[action="/ui/login"]::after {
  content: 'Purchasing System';
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 32px;
}

form[action="/ui/login"] .form-group {
  width: 280px;
  margin-bottom: 16px;
}

form[action="/ui/login"] input {
  width: 100%;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  background-color: var(--surface) !important;
  color: var(--ink) !important;
}

form[action="/ui/login"] input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(251,191,36,.15) !important;
}

form[action="/ui/login"] .btn-primary {
  width: 280px;
  padding: 10px;
  font-size: 14px;
  margin-top: 8px;
}

/* ----- Page layout & containers ---------------------------------- */
.container, .container-fluid {
  padding-top: 0;
}

/* Main content area spacing */
.container:not(#logout .container):not(#app > .container:first-child),
.container-fluid:not(#logout) {
  padding-top: 20px;
}

/* ----- Section headings ------------------------------------------ */
h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Centering helpers — leave <center> working but style it */
center { display: block; text-align: center; }

/* ----- Utility: .medium, .large ---------------------------------- */
.medium { font-size: 1.15em; }
.large  { font-size: 1.4em; }

/* ----- Barcode images -------------------------------------------- */
.barcode-holder img { filter: invert(1); }  /* invert black barcode on dark bg */

/* ----- Checkbox / toggle ----------------------------------------- */
.custom-control-label::before {
  background-color: var(--surface-alt);
  border-color: var(--border);
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--blue);
  border-color: var(--blue);
}

/* ----- Dropdown -------------------------------------------------- */
.dropdown-menu {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}
.dropdown-item {
  color: var(--ink-muted) !important;
  font-size: 13.5px;
}
.dropdown-item:hover {
  background-color: var(--surface-alt) !important;
  color: var(--ink) !important;
}

/* ----- Date range picker (po_report) ----------------------------- */
.daterangepicker {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
  border-radius: var(--radius) !important;
}
.daterangepicker .calendar-table {
  background-color: var(--surface) !important;
  border-color: var(--border-light) !important;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: var(--blue) !important;
}
.daterangepicker td.in-range {
  background-color: var(--surface-alt) !important;
  color: var(--ink) !important;
}
.daterangepicker .drp-buttons .btn { font-size: 12px; }

/* ----- Scrollbar (webkit) --------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--surface-alt); }

/* ----- Topmost specificity guard -------------------------------- */
/* Any existing yellow-on-dark color in inline styles */
[style*="color: #FFE000"],
[style*="color:#FFE000"] {
  color: var(--accent) !important;
}