/*
 * components/widgets.css — Reusable UI primitives.
 * Provides .btn, .btn-row, .badge, .card, .panel, .table, .form-group classes.
 * Loaded by header.php for non-classic themes.
 */

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.4rem;
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 200ms, color 200ms, border-color 200ms, transform 200ms, box-shadow 200ms;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Action-button group wrapper. Use on any inline container holding 2+ buttons
   (or input + button) to get uniform spacing without   or margins.
   Use <span>, not <label> — a <label> wrapping multiple form controls causes
   browser-native focus/click association on the first descendant input.
   Example: <span class="right btn-row"><input class="btn ..."> <input class="btn ..."></span> */
.btn-row {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  vertical-align: middle;
}

/* Shared hover recipe — every variant lifts the same way. Variants below only
   restate their color/border/glow on hover. */
.btn:hover {
  text-decoration: none;
  /*transform: translateY(-1px);*/
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
}
.btn-primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-accent-text);
  box-shadow: 0 4px 12px var(--color-focus-ring-soft);
}

.btn-secondary {
  background-color: var(--color-bg);
  color: var(--color-heading-text);
  border-color: var(--color-border-soft);
}
.btn-secondary:hover {
  background-color: var(--color-heading-bg);
  color: var(--color-heading-text);
}

.btn-danger {
  background-color: var(--color-danger);
  color: #ffffff;
  border-color: var(--color-danger);
}
.btn-danger:hover {
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: #ffffff;
  box-shadow: 0 4px 12px var(--color-danger-glow);
}

.btn-success {
  background-color: var(--color-success-strong);
  color: #ffffff;
  border-color: var(--color-success-strong);
}
.btn-success:hover {
  background-color: var(--color-success-strong-hov);
  border-color: var(--color-success-strong-hov);
  color: #ffffff;
  box-shadow: 0 4px 12px var(--color-success-glow);
}

.btn-warning {
  background-color: var(--color-warning-strong);
  color: #ffffff;
  border-color: var(--color-warning-strong);
}
.btn-warning:hover {
  background-color: var(--color-warning-strong-hov);
  border-color: var(--color-warning-strong-hov);
  color: #ffffff;
  box-shadow: 0 4px 12px var(--color-warning-glow);
}

.btn-dark {
  background-color: var(--color-dark-strong);
  color: #ffffff;
  border-color: var(--color-dark-strong);
}
.btn-dark:hover {
  background-color: var(--color-dark-strong-hover);
  border-color: var(--color-dark-strong-hover);
  color: #ffffff;
  box-shadow: 0 4px 12px var(--color-dark-glow);
}

/* Tertiary — softer than secondary; for less prominent actions */
.btn-tertiary {
  background-color: var(--color-filter-bg);
  color: var(--color-heading-text);
  border-color: var(--color-border-soft);
}
.btn-tertiary:hover {
  background-color: var(--color-heading-bg);
  border-color: var(--color-heading-text);
  color: var(--color-heading-text);
}

/* Ghost — fully transparent until hover; for tertiary actions in tight UIs */
.btn-ghost {
  background-color: transparent;
  color: var(--color-heading-text);
  border-color: transparent;
}
.btn-ghost:hover {
  background-color: var(--color-heading-bg);
  color: var(--color-heading-text);
  border-color: transparent;
}

/* Link — looks and behaves like a plain <a> but carries .btn sizing so it
   aligns correctly inside .btn-row alongside real buttons. No border, no fill,
   no lift on hover. */
.btn-link {
  background-color: transparent;
  color: var(--color-link);
  border-color: transparent;
}
.btn-link:hover {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-link);
  text-decoration: underline;
  transform: none;
}

/* Outline variants — colored border + text, transparent fill; hover fills with
   the variant color and flips text to white (gray flips to heading-bg). Pair
   each with .btn (e.g. <button class="btn btn-outline-primary">). */
.btn-outline-primary {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-outline-primary:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
  box-shadow: 0 4px 12px var(--color-focus-ring-soft);
}

.btn-outline-secondary {
  background-color: transparent;
  color: var(--color-heading-text);
  border-color: var(--color-border-soft);
}
.btn-outline-secondary:hover {
  background-color: var(--color-heading-bg);
  border-color: var(--color-heading-text);
  color: var(--color-heading-text);
}

.btn-outline-success {
  background-color: transparent;
  color: var(--color-success-strong);
  border-color: var(--color-success-strong);
}
.btn-outline-success:hover {
  background-color: var(--color-success-strong);
  border-color: var(--color-success-strong);
  color: #ffffff;
  box-shadow: 0 4px 12px var(--color-success-glow);
}

.btn-outline-danger {
  background-color: transparent;
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.btn-outline-danger:hover {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: #ffffff;
  box-shadow: 0 4px 12px var(--color-danger-glow);
}

.btn-outline-warning {
  background-color: transparent;
  color: var(--color-warning-strong);
  border-color: var(--color-warning-strong);
}
.btn-outline-warning:hover {
  background-color: var(--color-warning-strong);
  border-color: var(--color-warning-strong);
  color: #ffffff;
  box-shadow: 0 4px 12px var(--color-warning-glow);
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: 0.5rem 1.25rem;
  font-size: var(--font-size-base);
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
/* Base + colored variants. Use as: <span class="badge badge-blue">text</span> */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  background: var(--color-heading-bg);
  color: var(--color-heading-text);
  white-space: nowrap;
}

.badge-blue   { background-color: #dbeafe; color: #1d4ed8; }
.badge-green  { background-color: #dcfce7; color: #15803d; }
.badge-red    { background-color: #fee2e2; color: #dc2626; }
.badge-yellow { background-color: #fef9c3; color: #a16207; }
.badge-orange { background-color: #ffedd5; color: #c2410c; }
.badge-gray   { background-color: var(--color-heading-bg); color: var(--color-heading-text); }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(92, 99, 105, 0.15);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(92, 99, 105, 0.2);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  background-color: var(--color-heading-bg);
  border-bottom: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-weight: 600;
  font-size: var(--font-size-h3);
  color: var(--color-heading-text);
}

.card-body {
  padding: 1rem;
}

.card-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-border-soft);
  background-color: var(--color-filter-bg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.panel {
  background-color: var(--color-filter-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: 1rem;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */

.table-container {
  overflow-x: auto;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.table thead tr {
  background-color: var(--color-heading-bg);
}

.table thead th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-weight: 600;
  color: var(--color-heading-text);
  border-bottom: 1px solid var(--color-border-soft);
  white-space: nowrap;
}

.table tbody td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:nth-child(even) {
  background-color: var(--color-row-even);
}

.table tbody tr:hover {
  background-color: var(--color-row-alt);
}

.table .col-right  { text-align: right; }
.table .col-center { text-align: center; }
.table .col-num    { text-align: right; font-variant-numeric: tabular-nums; }

/* Sortable headers — uses existing Sorter::GetTableHeader() which outputs th.sort.asc / th.sort.desc */
.table thead th.sort {
  cursor: pointer;
  user-select: none;
  padding-right: 1.25rem;
  position: relative;
}
.table thead th.sort:hover {
  background-color: var(--color-row-alt);
}
.table thead th.sort::after {
  content: '↕';
  position: absolute;
  right: 0.375rem;
  opacity: 0.35;
  font-size: 0.65rem;
}
.table thead th.sort.asc::after  { content: '▲'; opacity: 1; color: var(--color-accent); }
.table thead th.sort.desc::after { content: '▼'; opacity: 1; color: var(--color-accent); }

/* ── Forms ──────────────────────────────────────────────────────────────── */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-heading-text);
}
.form-label.required::after {
  content: ' *';
  color: var(--color-required);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.4rem 0.75rem;
  min-height: 38px;
  font-size: var(--font-size-sm);
  font-family: var(--font-base);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: border-color 200ms, box-shadow 200ms;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 3px var(--color-focus-ring-soft);
}

.form-error {
  font-size: var(--font-size-xs);
  color: var(--color-required);
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-style: italic;
}

/* ── Combobox ───────────────────────────────────────────────────────────── */
/*
 * jquery.combo.js searchable dropdown.
 *
 * DOM structure:
 *   <input class="ComboInput" />
 *   <div class="ComboList">
 *     <div class="ComboItem blank" combo="">— Select —</div>
 *     <div class="ComboItem" combo="value">Item label</div>
 *     ...
 *   </div>
 *
 * State classes:
 *   .ComboItem            — every option
 *   .ComboItem.selected   — currently focused / arrow-key target
 *   .ComboItem.blank      — placeholder (— Select —) row
 *   .ComboItem .highlight — span around the substring matching the input
 */

.ComboInput        { cursor: default; }
.ComboInput:focus  { cursor: text; }

.ComboList {
  max-height: 400px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  overflow-y: auto;
  z-index: 90000;
}

.ComboList > div {
  white-space: pre;
  cursor: pointer;
  text-align: left;
}

.ComboList .ComboItem {
  padding: 2px 6px;
  min-height: 16px;
  color: var(--color-text);
}

.ComboList .ComboItem:hover {
  background: var(--color-hover-bg);
  color: var(--color-hover-text);
}

/* Blank "— Select —" placeholder row */
.ComboList .ComboItem.blank {
  color: var(--color-muted);
  font-style: italic;
}

/* The keyboard-focused / arrow-key-targeted item — defined AFTER .blank
   so it wins on source-order tie when an item is both .blank and .selected
   (e.g. the placeholder row when the list first opens). */
.ComboList .ComboItem.selected,
.ComboList .ComboItem.blank.selected {
  background: var(--color-selection-bg);
  color: var(--color-selection-text);
  font-style: normal;
}

.ComboList .ComboItem .highlight {
  text-decoration: underline;
  font-weight: 600;
}

/* ── Filter crumbs (.CrumbList) ─────────────────────────────────────────── */
/*
 * Rendered by ListSection::PrintHeader as:
 *   <div class="CrumbList">
 *     <span remove="fieldName">Employee ID = 123</span>
 *   </div>
 * Click anywhere on a chip to drop that filter.
 */

.CrumbList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}

.CrumbList span[remove] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 10px;
  border-radius: 999px;
  background: var(--color-heading-bg);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  cursor: pointer;
  transition: background 120ms ease;
}

.CrumbList span[remove]::after {
  content: "×";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  padding-bottom: 2px;
  color: var(--color-muted);
  transition: background 120ms ease, color 120ms ease;
}

.CrumbList span[remove]:hover {
  background: color-mix(in srgb, var(--color-required) 10%, var(--color-heading-bg));
}
.CrumbList span[remove]:hover::after {
  background: var(--color-required);
  color: #fff;
}

/* ── Tipsy tooltips ─────────────────────────────────────────────────────── */

.tipsy {
  font-size: var(--font-size-sm);
  position: absolute;
  padding: 5px;
  z-index: 100000;
}
.tipsy-inner {
  background-color: var(--tooltip-bg);
  color: var(--tooltip-text);
  max-width: 260px;
  padding: 5px 8px;
  text-align: center;
  border-radius: var(--radius-sm);
  line-height: 1.4;
}
.tipsy-arrow {
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  border: 5px dashed var(--tooltip-bg);
}
.tipsy-n   .tipsy-arrow { top: 0;    left: 50%; margin-left: -5px; border-bottom-color: var(--tooltip-bg); border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-nw  .tipsy-arrow { top: 0;    left: 10px;                   border-bottom-color: var(--tooltip-bg); border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-ne  .tipsy-arrow { top: 0;    right: 10px;                  border-bottom-color: var(--tooltip-bg); border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-s   .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-color:    var(--tooltip-bg); border-top-style:    solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-sw  .tipsy-arrow { bottom: 0; left: 10px;                   border-top-color:    var(--tooltip-bg); border-top-style:    solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-se  .tipsy-arrow { bottom: 0; right: 10px;                  border-top-color:    var(--tooltip-bg); border-top-style:    solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-e   .tipsy-arrow { right: 0;  top: 50%;  margin-top: -5px;  border-left-color:   var(--tooltip-bg); border-left-style:   solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
.tipsy-w   .tipsy-arrow { left: 0;   top: 50%;  margin-top: -5px;  border-right-color:  var(--tooltip-bg); border-right-style:  solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }

/* ── .floatStyle popover ────────────────────────────────────────────────── */
/* Detail/preview popover used in *Management/*Form pages (AR/AP). */

.floatStyle {
  position: absolute;
  display: none;
  z-index: 100;
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.4);
          box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.4);
}
.floatStyle th {
  background: var(--color-heading-bg);
  color: var(--color-heading-text);
}

/* ── Support Ticket page (sptTicketManagement) ─────────────────────────────── */
/* Ported from common.css block at line 2842+; token-driven so dark theme tracks. */

/* Small auto-generated badge next to a ticket title. */
span.badgeAuto {
  font-size: 0.7em;
  font-weight: normal;
  padding: 2px 8px;
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-sm);
  vertical-align: middle;
  margin-left: 6px;
}

/* Internal-note row tint inside the conversation table. */
table.ListingTable tr.rowInternal,
table.ListingTable tr.rowInternal td {
  background: var(--color-warning-bg);
}

/* Secondary / muted inline text — counts, hints. */
.muted {
  color: var(--color-muted);
  font-weight: normal;
}

/* Attachment thumbnails inside the Attachments column. */
.attThumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.attItem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 200px;
  word-break: break-word;
}
.attThumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}
.attDesc {
  display: block;
  color: var(--color-muted);
  font-size: 0.85em;
  margin-top: 2px;
}

/* Hidden out-of-tree forms paired with HTML5 form="..." attribute on inputs. */
.outOfTreeForm {
  display: none;
}

/* Paste-image staging strip below the ticket composer — clipboard images
   appended here as thumbnails until the user clicks Post; each has an ×
   button to drop before submit. */
.pastedAttachments {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pastedAttachment {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-soft);
  padding: 4px;
  background: var(--color-bg);
  width: 170px;
}
.pastedAttachment img {
  max-height: 80px;
  max-width: 160px;
  display: block;
}
.pastedAttachment input[type="text"] {
  width: 100%;
  margin-top: 4px;
  font-size: 0.85em;
  padding: 2px 4px;
  box-sizing: border-box;
}
/* Non-image files (PDFs, docs, etc.) show just the file name — no thumbnail tile. */
.pastedAttachment .pastedFileName {
  display: block;
  padding: 4px 0;
  font-size: 0.9em;
  word-break: break-word;
}

/* Form drag-over highlight while a file is being dragged onto the staged-attachments composer. */
form.dragOver {
  outline: 2px dashed var(--color-accent, var(--color-link));
  outline-offset: 2px;
}

/* Duplicate-file feedback: flash the existing card + show a transient note next to the strip. */
.pastedAttachment.dupFlash {
  animation: pastedAttachmentDupFlash 1.4s ease-out;
}
@keyframes pastedAttachmentDupFlash {
  0%   { box-shadow: 0 0 0 0 var(--color-warning, var(--color-link)); }
  20%  { box-shadow: 0 0 0 4px var(--color-warning, var(--color-link)); }
  100% { box-shadow: 0 0 0 0 var(--color-warning, var(--color-link)); }
}
.pastedAttachments .dupNotice {
  align-self: center;
  font-size: 0.85em;
  color: var(--color-warning, var(--color-danger));
  padding: 0 6px;
}
.pastedAttachment a.remove {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--color-bg);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 14px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}