/* static/style_global.css */

/* ===== Base & layout (theme-agnostic; uses CSS variables) ===== */
:root {
  /* sensible fallbacks if a theme file fails to load */
  --bg: #ffffff;
  --text: #111111;
  --muted-text: #666666;

  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --input-border: #cccccc;
  --border: #d8dde6;

  --btn-bg: #29426b;
  --btn-text: #ffffff;
  --btn-hover-bg: #3a5c93;
  --btn-hover-text: #ffffff;

  --btn-secondary-bg: #777777;
  --btn-secondary-text: #ffffff;
  --btn-secondary-border: #777777;

  --table-border: #dddddd;
  --accent: #29426b;

  --footer-bg: #777777;
  --footer-text: #ffffff;
  --footer-border: #29426b;
  --footer-link: #ffffff;
  --footer-link-hover: #ffffff;

  --chip-bg: #e4e7eb;
  --chip-text: #29426b;
  --chip-danger-bg: #c0392b;
  --chip-danger-text: #ffffff;

  --notice-bg: #e8f3ff;
  --notice-border: #bcd9ff;
  --notice-text: #111111;

  --notice-err-bg: #ffecec;
  --notice-err-border: #ffbdbd;
  --notice-err-text: #a40000;

  --notice-warn-bg: #fff7e0;
  --notice-warn-border: #ffe08a;
  --notice-warn-text: #856404;
}

/* Document */
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  margin: 20px;
  background: url("background.png") center center / cover no-repeat fixed;
  color: var(--text);

  /* Ensure content clears the fixed footer */
  padding-bottom: 90px; /* adjust if your footer is taller */
  box-sizing: border-box;
}

/* Headings & labels */
h1, h2 { margin: 0 0 12px; }
label { display: block; margin: 8px 0 4px; color: var(--muted-text); }

/* Inputs & buttons */
input, select, button, textarea {
  padding: 8px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
}
button { cursor: pointer; }
textarea {
  height: 150px;
  width: 400px;
  resize: none;
}

/* Primary button */
.btn {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background .2s, color .2s, box-shadow .2s;
}
.btn:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-text);
}

/* Secondary button */
.btn.secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
}

/* Cards */
.form-card {
  border: 1px solid var(--table-border);
  border-radius: 10px;
  padding: 16px;
  margin: 12px 0;
  background: var(--card-bg);
  box-shadow: none;
}

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: var(--card-bg);
  color: var(--text);
}
.table th,
.table td {
  border: 1px solid var(--table-border);
  padding: 8px;
  text-align: left;
}

/* Notices (info/warn/error) + fade-out support */
.notice {
  padding: 10px;
  border-radius: 6px;
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  margin-bottom: 12px;
  transition: opacity 1s ease; /* for fade-out */
}
.notice.err {
  background: var(--notice-err-bg);
  border-color: var(--notice-err-border);
  color: var(--notice-err-text);
}
.notice.warn {
  background: var(--notice-warn-bg);
  border-color: var(--notice-warn-border);
  color: var(--notice-warn-text);
}
.notice.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Layout helpers */
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 220px; }
.small { font-size: 12px; color: var(--muted-text); }

/* Spacer used on pages with fixed footer to keep content above it */
.footer-spacer {
  height: 90px; /* match padding-bottom / footer height */
}
@media (max-width: 800px) {
  .footer-spacer {
    height: 110px; /* a bit more room on small screens if footer wraps */
  }
}

/* Print */
.print-hide { display: inline; }
@media print {
  .print-hide { display: none; }
  .footer { position: static !important; box-shadow: none !important; }
  body { padding-bottom: 0 !important; }
}

/* Fixed footer; content is kept clear via body padding + .footer-spacer */
.footer {
  position: fixed; bottom: 0; left: 0; width: 100%;
  background-color: var(--footer-bg);
  color: var(--footer-text);
  text-align: center;
  padding: 10px 0;
  border-top: 3px solid var(--footer-border);
  font-size: 0.9em;
  box-shadow: 0 -2px 8px rgba(0,0,0,.35);
  z-index: 10;
}
.footer-links { margin-bottom: 5px; }
.footer-links a {
  margin: 0 10px;
  color: var(--footer-link);
  text-decoration: none;
  font-weight: bold;
}
.footer-links a:hover {
  text-decoration: underline;
  color: var(--footer-link-hover);
}
.footer-copy { color: var(--footer-copy); }

/* Chips */
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-weight: 600;
  margin-left: 8px;
}
.chip.danger {
  background: var(--chip-danger-bg);
  color: var(--chip-danger-text);
}

.chip.departments {
  font-size: 20px;
}

/* ===== LED status dots (theme-agnostic; colors come from theme vars) ===== */
:root {
  /* defaults in case a theme file fails to set these */
  --led-in:   #2ecc71; /* clocked in  */
  --led-break:#f1c40f; /* on break    */
  --led-out:  #e74c3c; /* clocked out */
  --led-glow: rgba(0,0,0,.15);
}

.led {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
  /* subtle ring + outer glow; inner color is set by modifier class */
  box-shadow:
    0 0 0 2px var(--card-bg, #fff),
    0 0 6px var(--led-glow);
}

/* Legacy color class support (what you already use) */
.led.green  { background: var(--led-in); }
.led.yellow { background: var(--led-break); }
.led.red    { background: var(--led-out); }

/* New semantic modifiers (optional, nicer naming) */
.led--in    { background: var(--led-in); }
.led--break { background: var(--led-break); }
.led--out   { background: var(--led-out); }

/* Optional size variants */
.led.sm { width: 8px;  height: 8px;  }
.led.lg { width: 16px; height: 16px; }

/* Optional animated glow */
.led.glow {
  animation: ledPulse 1.6s ease-in-out infinite;
}
@keyframes ledPulse {
  0%,100% { box-shadow: 0 0 0 2px var(--card-bg, #fff), 0 0 6px var(--led-glow); }
  50%     { box-shadow: 0 0 0 2px var(--card-bg, #fff), 0 0 12px var(--led-glow); }
}

/* ===== Toolbar (simple spaced header row) ===== */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
}

/* ===== Generic modal (theme-agnostic; uses existing variables) ===== */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  padding: 16px;
  z-index: 1000;
}
.modal.open { display: flex; }

.modal-card {
  width: 100%;
  max-width: 560px;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--table-border);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  overflow: hidden;
}
.modal-head, .modal-foot { padding: 12px 16px; border-bottom: 1px solid var(--table-border); }
.modal-foot { border-top: 1px solid var(--table-border); border-bottom: 0; }
.modal-body { padding: 16px; }
.modal-title { margin: 0; font-size: 1.1rem; }

.btn-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
/* Row variants to control wrapping and sizing */
.row.nowrap { flex-wrap: nowrap; }
@media (max-width: 800px) { .row.nowrap { flex-wrap: wrap; } }

/* Let a field grow wider than siblings */
.grow { flex: 2; }

/* Optionally allow smaller minimums so 3 fields fit nicely */
.row.tight > div { min-width: 160px; }

.chip-x {
  color: #fff;
  background-color: #f00;
  margin-left: 5px;
}
.chip-x:hover {
  border-color: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

fieldset, legend {
  border: 1px solid #dedede;
  border-radius: 7px;
}

fieldset {
  padding-left: 20px;
}

legend {
  padding: 5px 10px;
}

/* ===== Arrival Page Specific ===== */

.results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 800px) {
  .results { grid-template-columns: 1fr; }
}

.companyCard {
  border: 1px solid var(--table-border);
  border-radius: 10px;
  padding: 14px;
  background: var(--card-bg);
}

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

.companyMeta {
  font-size: 13px;
  color: var(--muted-text);
  margin-bottom: 10px;
}

.selectedBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.selectedLeft {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Details accordion styling */
details {
  border: 1px solid var(--table-border);
  border-radius: 10px;
  background: var(--card-bg);
  margin-bottom: 12px;
}

summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 700;
  color: var(--accent);
}

.sectionBody {
  padding: 0 14px 14px 14px;
}

/* =========================
   Global Error/Warning Color
   ========================= */
:root{
  --alert: #ff5c00;
}

/* Common error/warn containers */
.err,
.error,
.warning,
.warn,
.alert,
.notice-error,
.notice-warning{
  border-color: var(--alert) !important;
  color: var(--alert) !important;
}

/* Force ALL text/icons/links inside error/warn blocks to orange */
.err *,
.error *,
.warning *,
.warn *,
.alert *,
.notice-error *,
.notice-warning *{
  color: var(--alert) !important;
}

/* Required asterisk */
.req{
  color: var(--alert) !important;
}

/* Inline validation text (if you use these classes anywhere) */
.field-error,
.validation-error,
.input-error,
.help-error{
  color: var(--alert) !important;
}

/* Form field invalid styling */
/*input:invalid,
select:invalid,
textarea:invalid{
  border-color: var(--alert) !important;
  outline-color: var(--alert) !important;
}
*/
/* If you add an explicit class to fields with server-side errors */
.is-error,
.has-error input,
.has-error select,
.has-error textarea{
  border-color: var(--alert) !important;
  outline-color: var(--alert) !important;
}

/* PHP warnings/notices rendered by some environments (best-effort) */
pre,
.xdebug-error,
.php-error,
.php-warning,
.php-notice{
  color: var(--alert) !important;
  border-color: var(--alert) !important;
}

/* Arrival code status messages */
.status-error {
  color: #ff5c00 !important;
}