/* /css/style.css */

/* Gray out the button and change cursor when processing */
button:disabled {
    background-color: #555;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Simple CSS Spinner */
.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
    display: none; /* Hidden by default */
    vertical-align: middle;
    margin-left: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.processing-text {
    display: none;
    color: #3498db;
    font-weight: bold;
    margin-left: 10px;
}

/* 1) CSS Variables */
:root {
  /* Navigation Colors */
  --nav-bg: #333;
  --nav-text: #fff;
  --nav-hover-bg: #ddd;
  --nav-hover-text: #000;

  /* Alert Colors */
  --alert-success-text: #155724;
  --alert-success-bg: #d4edda;
  --alert-success-border: #c3e6cb;
  --alert-danger-text: #a94442;
  --alert-danger-bg: #f2dede;
  --alert-danger-border: #ebccd1;

  /* Rating Colors */
  --rating-primary-bg: #DAF7A6;
  --rating-average-bg: yellow;
  --rating-bad-bg: red;

  /* Page Colors */
  --page-bg: #ffffff;
  --page-text: #000000;

  /* Form Colors (Light Mode) */
  --form-bg: #ffffff;
  --form-text: #000000;
  --form-border: #cccccc;
  --form-placeholder: #666666;
  --button-bg: #eeeeee;
  --button-text: #000000;
  --button-border: #bbbbbb;
  --button-hover-bg: #dddddd;
}

/* Dark Mode Overrides */
body.dark-mode {
  /* Navigation Overrides */
  --nav-bg: #111;
  --nav-text: #ddd;
  --nav-hover-bg: #333;
  --nav-hover-text: #fff;

  /* Alert Overrides */
  --alert-success-text: #d4edda;
  --alert-success-bg: #155724;
  --alert-success-border: #c3e6cb;
  --alert-danger-text: #f2dede;
  --alert-danger-bg: #a94442;
  --alert-danger-border: #ebccd1;

  /* Page Overrides */
  --page-bg: #1e1e1e;
  --page-text: #e0e0e0;

  /* Form Overrides */
  --form-bg: #2a2a2a;
  --form-text: #e0e0e0;
  --form-border: #555555;
  --form-placeholder: #888888;
  --button-bg: #3a3a3a;
  --button-text: #f0f0f0;
  --button-border: #666666;
  --button-hover-bg: #4a4a4a;
}

/* 2) Global Page Styling */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: var(--page-bg);
  color: var(--page-text);
}
h1, h2, h3, h4, h5, h6,
p, li, td, th {
  color: var(--page-text);
}

/* 3) Navigation Bar */
nav {
  background-color: var(--nav-bg);
  overflow: hidden;
}
nav select {
  color: var(--nav-text);
  background-color: transparent;
  border: none;
  padding: 14px 16px;
  font-size: 16px;
}
nav option {
  color: var(--nav-text);
  background-color: var(--nav-bg);
}
nav option:hover {
  background-color: var(--nav-hover-bg);
  color: var(--nav-hover-text);
}

/* 4) Alerts */
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert-success {
  color: var(--alert-success-text);
  background-color: var(--alert-success-bg);
  border-color: var(--alert-success-border);
}
.alert-danger {
  color: var(--alert-danger-text);
  background-color: var(--alert-danger-bg);
  border-color: var(--alert-danger-border);
}

/* 5) Rating Backgrounds */
.rating-primary { background-color: var(--rating-primary-bg); }
.rating-average { background-color: var(--rating-average-bg); }
.rating-bad { background-color: var(--rating-bad-bg); }

/* 6) Utility & Navigation classes */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--nav-bg);
}
.float-right { float: right; }
li {
  float: left;
  position: relative;
}
li a, .dropbtn {
  display: inline-block;
  color: var(--nav-text);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  white-space: nowrap;
}
li a:hover, .dropdown:hover .dropbtn {
  background-color: var(--nav-hover-bg);
  color: var(--nav-hover-text);
}

/* 7) Dropdown menus */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 10000;
}
.dropdown-content a {
  color: #000;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
  display: block;
}

/* 8) Print Helper */
@media print {
  :root,
  html,
  body,
  body.dark-mode {
    --page-bg: #ffffff;
    --page-text: #000000;
    --form-bg: #ffffff;
    --form-text: #000000;
    --form-border: #999999;
    --form-placeholder: #666666;
    --button-bg: #ffffff;
    --button-text: #000000;
    --button-border: #999999;
    --button-hover-bg: #ffffff;
    color: #000 !important;
    background: #fff !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-text-fill-color: #000 !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  body,
  body *,
  h1, h2, h3, h4, h5, h6,
  p, li, td, th,
  a, span, div, label,
  input, select, textarea, button {
    color: #000 !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-text-fill-color: #000 !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  table, thead, tbody, tfoot, tr, th, td {
    background: #fff !important;
  }

  .no-print { display: none !important; }
}

/* 9) Link Styling */
a { color: var(--nav-hover-text); }
a:hover { color: var(--nav-text); }

/* 10) Form Controls */
input, select, textarea {
  background-color: var(--form-bg);
  color: var(--form-text);
  border: 1px solid var(--form-border);
  border-radius: 4px;
  padding: 0px;
  transition: background-color 0.2s, border-color 0.2s;
}
input::placeholder, textarea::placeholder {
  color: var(--form-placeholder);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--nav-hover-bg);
  box-shadow: 0 0 0 2px var(--nav-hover-text);
}
button, input[type="submit"], input[type="button"] {
  background-color: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--button-border);
  border-radius: 4px;
  padding: 0px 5px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  background-color: var(--button-hover-bg);
}

/* ──────────────────────────────────────
   Table Styling
────────────────────────────────────── */
table {
  width: max-content;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

/* ViewPO table styling to match view_updates.php */
.po-table {
  width: max-content;
  margin-top: 20px;
  --po-desc-min: 30ch;
}

.po-table .eta-cell {
  min-width: 10ch;
  white-space: nowrap;
}

/* ViewPO column sizing: keep rows aligned, let Description take remaining width */
.po-table {
  table-layout: auto;
}

.po-table th:nth-child(1),
.po-table td:nth-child(1) { min-width: 10ch; }   /* Line */
.po-table th:nth-child(2),
.po-table td:nth-child(2) { min-width: 90px; }   /* Item */
.po-table th:nth-child(4),
.po-table td:nth-child(4),
.po-table th:nth-child(5),
.po-table td:nth-child(5),
.po-table th:nth-child(6),
.po-table td:nth-child(6) { min-width: 4ch; }   /* Qty/Rec/Canc */
.po-table th:nth-child(3),
.po-table td:nth-child(3) { white-space: nowrap; min-width: var(--po-desc-min); } /* Description grows from longest */
.po-table th:nth-child(8),
.po-table td:nth-child(8) {
  white-space: nowrap;
  min-width: 24ch;
} /* Tracking stays on one line */

.po-table td:nth-child(1) input { width: 10ch; } /* Line input */
.po-table td:nth-child(4) input,
.po-table td:nth-child(5) input,
.po-table td:nth-child(6) input { width: 4ch; }  /* Qty/Rec/Canc inputs */
.po-table th,
.po-table td {
  padding: 1px 2px;
}

.po-table input {
  padding: 0 2px;
  height: 18px;
  line-height: 18px;
}

.po-table .tracking-add-btn {
  margin-left: 6px;
  padding: 0 6px;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
}

.po-table .tracking-input.is-hidden {
  display: none;
}

th, td {
  border: 1px solid var(--form-border);
  padding: 1px 2px;
  text-align: left;
  color: var(--page-text);
  background-color: transparent; /* lets the row background show */
}

  /* highlight on hover OR when any input inside has focus */
  tbody tr:hover,
  tbody tr:focus-within {
    background-color: #FF7F7F !important;
  }

/* Header row */
/*thead th {
/*  background-color: var(--nav-bg);
/*  color: var(--nav-text);
/*}

/* Zebra striping */
tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.03);
}

/* Dark‐mode overrides for zebra stripes */
body.dark-mode tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Row autosave status */
.save-status {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.save-status:empty {
  display: none;
}

.save-status.is-saving {
  color: #666;
}

.save-status.is-saved {
  color: #2e7d32;
}

.save-status.is-error {
  color: #b00020;
}

body.dark-mode .save-status.is-saving {
  color: #bbb;
}

body.dark-mode .save-status.is-saved {
  color: #7ddc8b;
}

body.dark-mode .save-status.is-error {
  color: #ff6b6b;
}

/* in css/style.css */
.newsletter-table { width: 50%; }


/* pickScripts: visually de-emphasize exact matches */
tr.exactMatch { opacity: 0.5; }

/* optional: make it unmistakable */
tr.exactMatch td { color: #666; }

/*Dropzone, etc. CHBackorders.php */
/* CHBackorders upload UI */
.form-container {
    width: 100%;
    padding: 20px;
}

.form-textarea {
    width: 98%;
    height: 150px;
}

.dropZone {
    border: 2px dashed #999;
    border-radius: 10px;
    padding: 28px 18px;
    margin-bottom: 14px;
    cursor: pointer;
    user-select: none;
    width: 100%;
    max-width: 900px;
    text-align: center;
    background: rgba(0,0,0,0.02);
}

.dropZone.isDragOver {
    border-style: solid;
    border-color: #3498db;
    background: rgba(52,152,219,0.08);
}

.dropZoneTitle {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.dropZoneSub {
    font-size: 13px;
    opacity: 0.85;
}

+.dropZoneHint {
    margin-top: 10px;
    font-size: 12px;
    opacity: 0.75;
}

.fileInput {
    display: none;
}

.orDivider {
    margin: 14px 0 8px 0;
    font-weight: 600;
}

.notice {
    padding: 10px 12px;
    margin: 0 0 12px 0;
    border: 1px solid #bbb;
    border-radius: 8px;
}

/* Upload overlay (shown on auto-submit / submit) */
.uploadOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.uploadOverlay.isVisible {
    display: flex;
}

.uploadOverlayBox {
    width: 100%;
    max-width: 520px;
    background: var(--form-bg);
    color: var(--form-text);
    border: 1px solid var(--form-border);
    border-radius: 12px;
    padding: 18px 18px 16px 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    text-align: center;
}

.uploadOverlayTitle {
    font-weight: 700;
    margin-bottom: 6px;
}

.uploadOverlayMsg {
    opacity: 0.9;
    margin-bottom: 14px;
}

.uploadOverlaySpinner {
    width: 34px;
    height: 34px;
    border: 4px solid rgba(0,0,0,0.12);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px auto;
}