/**
 * xadmin.css — shared responsive stylesheet for the xapserver admin tools
 * (XEdit, PageEditor, FileCommander, system pages).
 *
 * Every rule is scoped under the .xa wrapper class so nothing leaks into
 * host-site pages that embed the tools. Sites may override the accent via
 * $STYLE['ADMIN_ACCENT'] in their conf (emitted by x_admin_assets() as an
 * inline --xa-accent override).
 */

.xa {
  --xa-accent: #3355aa;
  --xa-accent-text: #ffffff;
  --xa-bg: #f4f5f7;
  --xa-surface: #ffffff;
  --xa-border: #d4d7dd;
  --xa-text: #1c1e21;
  --xa-muted: #667085;
  --xa-danger: #b3261e;
  --xa-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --xa-radius: 6px;

  font-family: var(--xa-font);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--xa-text);
  -webkit-text-size-adjust: 100%;
}

/* Undo legacy element rules (xtheme's TD/A pt fonts, host-site colors)
   inside .xa */
.xa table, .xa td, .xa th, .xa input, .xa select, .xa textarea, .xa button {
  font-family: var(--xa-font);
  font-size: inherit;
  color: var(--xa-text);
}
.xa p, .xa li, .xa i, .xa b { color: inherit; }
.xa h1, .xa h2, .xa h3 {
  font-family: var(--xa-font);
  line-height: 1.2;
  margin: 0 0 0.5em;
}
.xa h1 { font-size: 1.4rem; }
.xa h2 { font-size: 1.2rem; }
.xa h3 { font-size: 1.05rem; }
.xa a { color: var(--xa-accent); text-decoration: none; }
.xa a:hover { text-decoration: underline; }
.xa img { border: 0; max-width: 100%; }

/* ---- Panels & chrome ---------------------------------------------------- */

.xa-panel {
  background: var(--xa-surface);
  border: 1px solid var(--xa-border);
  border-radius: var(--xa-radius);
  padding: 0.75rem;
  margin: 0 0 0.5rem;
}

.xa-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding: 0.5rem 0.75rem;
}
.xa-toolbar .xa-current { color: var(--xa-text); }

/* Menu-style toolbars (XEdit tab/command bars): thin 1px dividers between
   items instead of literal pipe characters, with tighter spacing. */
.xa-menubar { gap: 0; }
.xa-menubar > a {
  padding: 0 0.625rem;
  line-height: 1.2;
  font-weight: 600;
}
.xa-menubar > a:first-child { padding-left: 0; }
.xa-menubar > a + a { border-left: 1px solid var(--xa-border); }

.xa-status {
  color: var(--xa-muted);
  padding: 0.375rem 0;
}

.xa-title h2 { margin: 0; }
.xa-subhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--xa-bg);
  border: 1px solid var(--xa-border);
  border-radius: var(--xa-radius);
  padding: 0.4rem 0.6rem;
  margin: 0.75rem 0 0.5rem;
}
.xa-subbody { padding: 0.25rem 0 0.75rem; }
.xa-subbody p { margin: 0.5rem 0; }
.xa-treerow { padding: 0.2rem 0; }
.xa-statusbar ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }
.xa-statusbar li { margin: 0.125rem 0; color: var(--xa-danger); }

.xa-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  color: var(--xa-muted);
}

/* ---- Messages ----------------------------------------------------------- */

.xa-msg {
  padding: 0.5rem 0.75rem;
  border-radius: var(--xa-radius);
  margin: 0 0 0.75rem;
  background: color-mix(in srgb, var(--xa-accent) 12%, var(--xa-surface));
  border: 1px solid color-mix(in srgb, var(--xa-accent) 35%, var(--xa-border));
}
.xa-error { color: var(--xa-danger); }
.xa-note { color: var(--xa-muted); }

/* Legacy GenericInterface message classes, kept for compatibility */
.xa .giformmsg { color: var(--xa-accent); }
.xa .giformerror, .xa .xsaformerror { color: var(--xa-danger); }

/* ---- Data tables (list views) ------------------------------------------ */

.xa-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--xa-border);
  border-radius: var(--xa-radius);
  background: var(--xa-surface);
  margin: 0 0 0.75rem;
}

.xa-list {
  border-collapse: collapse;
  width: 100%;
  min-width: 100%;
}
.xa-list th, .xa-list td {
  padding: 0.45rem 0.6rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--xa-border);
}
.xa-list .xa-nowrap { white-space: nowrap; }
/* Neutralize legacy bgcolor attributes emitted by shared list helpers
   (GI_ListPager etc.) so CSS striping wins inside .xa-list tables. */
.xa-list td[bgcolor], .xa-list tr[bgcolor], .xa-list tr[bgcolor] > td { background-color: transparent; }
.xa-list th {
  background: var(--xa-bg);
  font-weight: normal;
  white-space: nowrap;
}
.xa-list thead th {
  cursor: pointer;              /* column-sort affordance */
  position: sticky;
  top: 0;
}
.xa-list .xa-list-title {
  background: var(--xa-bg);
  word-break: break-all;        /* long unbroken paths must not force table width */
}
.xa-list tbody tr:nth-child(even) { background: color-mix(in srgb, var(--xa-bg) 45%, var(--xa-surface)); }
.xa-list tbody tr:hover { background: color-mix(in srgb, var(--xa-accent) 8%, var(--xa-surface)); }
.xa-list tbody tr:last-child td { border-bottom: 0; }
.xa-list .xa-num { text-align: right; }
.xa-section-header td {
  background: var(--xa-bg);
}

/* ---- Forms -------------------------------------------------------------- */

.xa-form {
  display: grid;
  grid-template-columns: minmax(9em, 20%) 1fr;
  gap: 0.5rem 0.75rem;
  align-items: start;
}
.xa-form .xa-label {
  text-align: right;
  padding-top: 0.35rem;
  color: var(--xa-muted);
}
.xa-form .xa-value { min-width: 0; }
.xa-form .xa-span { grid-column: 1 / -1; }
.xa-required { color: var(--xa-danger); }

.xa-input,
.xa input[type="text"], .xa input[type="password"], .xa input[type="email"],
.xa input[type="date"], .xa input[type="datetime-local"], .xa input[type="time"],
.xa input[type="file"], .xa select, .xa textarea {
  font: inherit;
  color: inherit;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--xa-border);
  border-radius: var(--xa-radius);
  background: var(--xa-surface);
  padding: 0.35rem 0.5rem;
}
.xa textarea { width: 100%; resize: vertical; }
/* Read-only value shown as a disabled-looking field so it aligns with the
   editable inputs (same box metrics, muted, non-interactive). */
.xa-readonly {
  display: block;
  width: 100%;
  min-height: calc(1.4em + 0.7rem + 2px);
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--xa-border);
  border-radius: var(--xa-radius);
  background: var(--xa-bg);
  color: var(--xa-text);
  box-sizing: border-box;
}
.xa-readonly.xa-readonly-empty { color: var(--xa-muted); font-style: italic; }
.xa-readonly code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.xa input:focus, .xa select:focus, .xa textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--xa-accent) 55%, transparent);
  outline-offset: 0;
  border-color: var(--xa-accent);
}
.xa input[type="checkbox"], .xa input[type="radio"] {
  accent-color: var(--xa-accent);
  width: 1.05rem;
  height: 1.05rem;
  vertical-align: middle;
}

/* ---- Buttons ------------------------------------------------------------ */

.xa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 0 0.25rem;
}
.xa a.xa-btn { display: inline-block; color: var(--xa-text); }
.xa a.xa-btn:hover { text-decoration: none; }
.xa-btn,
.xa input[type="submit"], .xa input[type="button"], .xa input[type="reset"], .xa button {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--xa-border);
  border-radius: var(--xa-radius);
  background: var(--xa-bg);
  color: var(--xa-text);
  padding: 0.4rem 0.9rem;
}
.xa-btn:hover,
.xa input[type="submit"]:hover, .xa input[type="button"]:hover, .xa input[type="reset"]:hover, .xa button:hover {
  background: color-mix(in srgb, var(--xa-accent) 12%, var(--xa-bg));
  border-color: var(--xa-accent);
}
.xa .xa-btn-primary {
  background: var(--xa-accent);
  border-color: var(--xa-accent);
  color: var(--xa-accent-text);
}
.xa .xa-btn-primary:hover { background: color-mix(in srgb, #000 15%, var(--xa-accent)); }
.xa .xa-btn-danger {
  color: var(--xa-danger);
  border-color: color-mix(in srgb, var(--xa-danger) 50%, var(--xa-border));
}
.xa .xa-btn-danger:hover {
  background: color-mix(in srgb, var(--xa-danger) 10%, var(--xa-surface));
  border-color: var(--xa-danger);
}

/* iOS Safari renders no calendar/clock glyph on date-time inputs (the whole
   field opens the system picker on tap) -- add one as a visual affordance.
   The @supports guard matches only iOS/iPadOS Safari, so Chrome and desktop
   browsers keep their own native indicator untouched. */
@supports (-webkit-touch-callout: none) {
  .xa input[type="date"], .xa input[type="datetime-local"], .xa input[type="time"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem 1rem;
    padding-right: 2rem;
    min-height: 2.2rem;
    -webkit-appearance: none;
    appearance: none;
  }
}

/* ---- Small screens ------------------------------------------------------ */

@media (max-width: 640px) {
  /* Columns/elements marked low-priority are dropped on phones.
     Mark BOTH the th and its tds with .xa-hide-sm. */
  .xa .xa-hide-sm { display: none; }
  .xa-form { grid-template-columns: 1fr; gap: 0.125rem 0; }
  .xa-form .xa-label { text-align: left; padding-top: 0.5rem; }
  .xa-toolbar { gap: 0.25rem 0.6rem; }
  /* 16px floor prevents iOS auto-zoom on focus */
  .xa input[type="text"], .xa input[type="password"], .xa input[type="email"],
  .xa select, .xa textarea { font-size: 16px; width: 100%; }
  .xa input[type="date"], .xa input[type="datetime-local"], .xa input[type="time"] { font-size: 16px; }
}

/* ---- Print -------------------------------------------------------------- */

@media print {
  .xa-actions, .xa-toolbar, .xa-breadcrumb, .xa-pager { display: none !important; }
  .xa-table-scroll { overflow: visible; border: 0; }
  .xa-list th, .xa-list td { border: 1px solid #999; }
  .xa-list thead th { position: static; cursor: default; }
  .xa { color: #000; }
}