/* site.css — minimal app-level overrides for the Gentelella layout.
   Keeps font sizing, focus styles, and other global concerns. */
html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

/* ── Focus styles (Gentelella adaption) ────────────────────────────── */
.btn:focus-visible,
.form-control:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

html { position: relative; min-height: 100%; }

/* ── Table action cells ────────────────────────────────────────────────
   Admin list tables put a mix of <a class="btn"> links and <form>-wrapped
   submit buttons in the last column. Those two align differently on the
   baseline (and a <form> carries its own margin), so the row of buttons
   comes out visibly staggered. Add class="table-actions" to the <td> instead of restyling per page.

   The cell stays a real table cell (an earlier version made the <td> itself display:flex, which
   takes it out of the table layout — its row border no longer lined up with its neighbours).
   Instead:
     - white-space: nowrap keeps every button on ONE line;
     - width: 1% is the classic "shrink this column to its content" hint — the table gives the
       action column exactly the width its buttons need and hands the rest to the data columns.
   On phone-sized viewports DataTables Responsive has already collapsed the other columns away;
   the media query restores wrapping there as a safety valve against horizontal overflow. */
.table-actions {
  white-space: nowrap;
  width: 1%;
}

@media (max-width: 575.98px) {
  .table-actions { white-space: normal; }
}

/* Buttons sit on the text line, so centre them on it and space them with a margin — the buttons
   entity-actions.js appends have no whitespace between them to do that job. */
.table-actions .btn {
  vertical-align: middle;
  margin: .125rem .25rem .125rem 0;
}

/* Forms in an action cell are pure button wrappers — no layout of their own. The row-action host
   span is likewise just a mount point, so its buttons join the same line. */
.table-actions form,
.table-actions [data-row-actions] { margin: 0; display: contents; }

/* Action-button hosts are filled by entity-actions.js, which appends bare buttons — the gap here
   is what spaces them, so the script does not have to carry margin classes. */
[data-entity-actions] {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

/* The row-action host stands alone on the details/edit page headers, so it spaces its own
   buttons. Inside a .table-actions cell the rule above takes over instead (display: contents),
   letting that cell's one-line button row space every button uniformly. */
[data-row-actions] {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  align-items: center;
}

/* ── Entity list: row-select column for Entity-scope actions ───────────
   The checkbox column is decoration around the real control, so keep it
   narrow and centred rather than letting it take a full text column. */
.row-select-cell {
  width: 2.5rem;
  text-align: center;
  vertical-align: middle;
}

/* ── Entity list: filter pane (elements/filter-pane.js) ─────────────────
   Collapsed by default (the toggle button doubles as the card header);
   expanded, its body holds one flex row per condition. */
entapp-filter-pane .filter-pane-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: .6rem 1rem;
  background: none;
  border: none;
  text-align: left;
  font-weight: 500;
  cursor: pointer;
}
entapp-filter-pane .filter-pane-row select,
entapp-filter-pane .filter-pane-row input {
  min-width: 0;
}
entapp-filter-pane .filter-pane-row select:first-child {
  flex: 2 1 0;
}
entapp-filter-pane .filter-pane-row select:nth-child(2) {
  flex: 0 0 auto;
  width: auto;
}
entapp-filter-pane .filter-pane-value {
  flex: 2 1 0;
}

/* ── File field: upload progress panel (elements/file-edit.js) ─────────
   Shown under the file input once a file is chosen. The JS puts exactly one
   state class on .file-upload: is-working (icon bobs, striped bar slides as it
   fills), is-done (bar turns green, tick pops in) or is-error (bar turns red,
   panel shakes). Only the icon for the current state is visible. */
entapp-file-edit .file-upload {
  margin-top: .5rem;
  padding: .6rem .75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-surface-secondary);
}
entapp-file-edit .file-upload-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .45rem;
  font-size: .875rem;
}
entapp-file-edit .file-upload-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text);
}
entapp-file-edit .file-upload-size,
entapp-file-edit .file-upload-pct {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
entapp-file-edit .file-upload-track {
  height: 6px;
  border-radius: 999px;
  background: var(--border-color);
  overflow: hidden;
}
entapp-file-edit .file-upload-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background-color: var(--primary);
  transition: width .25s ease-out, background-color .3s ease;
}

/* Icons: one per state, only the current state's shows. */
entapp-file-edit .file-upload-icon i { display: none; }
entapp-file-edit .file-upload.is-working .icon-working,
entapp-file-edit .file-upload.is-done .icon-done,
entapp-file-edit .file-upload.is-error .icon-error { display: inline-block; }

/* Working: bobbing icon + diagonal stripes sliding across the filling bar. */
entapp-file-edit .file-upload.is-working .icon-working {
  color: var(--primary);
  animation: file-upload-bob 1s ease-in-out infinite;
}
entapp-file-edit .file-upload.is-working .file-upload-bar {
  background-image: linear-gradient(45deg,
    rgba(255, 255, 255, .25) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .25) 50%,
    rgba(255, 255, 255, .25) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
  animation: file-upload-stripes .6s linear infinite;
}

/* Done: green bar, tick pops in. */
entapp-file-edit .file-upload.is-done .file-upload-bar { background-color: var(--green); }
entapp-file-edit .file-upload.is-done .icon-done {
  color: var(--green);
  animation: file-upload-pop .35s cubic-bezier(.3, 1.6, .5, 1) both;
}

/* Error: red bar, panel shakes once. */
entapp-file-edit .file-upload.is-error { animation: file-upload-shake .4s ease both; }
entapp-file-edit .file-upload.is-error .file-upload-bar { background-color: var(--red); }
entapp-file-edit .file-upload.is-error .icon-error { color: var(--red); }

@keyframes file-upload-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes file-upload-stripes {
  from { background-position: 1rem 0; }
  to   { background-position: 0 0; }
}
@keyframes file-upload-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes file-upload-shake {
  0%, 100%  { transform: translateX(0); }
  20%, 60%  { transform: translateX(-4px); }
  40%, 80%  { transform: translateX(4px); }
}

/* People who ask for less motion still see the progress, just without the movement. */
@media (prefers-reduced-motion: reduce) {
  entapp-file-edit .file-upload,
  entapp-file-edit .file-upload i,
  entapp-file-edit .file-upload-bar { animation: none !important; transition: none; }
}

/* ── Record details: label/value list (Views/Entity/Details.cshtml) ────
   <dl class="detail-list"> holding one <div class="detail-row"><dt/><dd/></div> per field
   (a <div> grouping dt/dd pairs is valid HTML5). Each field is a small stacked block: a quiet
   uppercase label ON TOP, the value underneath in larger, heavier, full-colour text, with a thin
   accent bar on the left tying the two together. Label and value therefore differ in position,
   size, weight, case and colour at once, so the eye separates them without reading. The blocks
   flow into as many columns as fit (one on phones).
   Every rule is scoped to .detail-list because CreateWith.cshtml also uses a "detail-row" class
   (for its master-detail line items) and must not pick up this layout. */
.detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1.25rem 2rem;
  margin: 0;
}
.detail-list .detail-row {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
  padding: .15rem 0 .15rem .85rem;
  border-left: 3px solid var(--primary-lt);
  transition: border-color .15s ease;
}
.detail-list .detail-row:hover { border-left-color: var(--primary); }
.detail-list .detail-row dt {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.detail-list .detail-row dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;   /* long e-mails / URLs must not push the column wider */
}
/* A field with no value shows a muted dash instead of an empty gap (see Details.cshtml). */
.detail-list .detail-empty {
  font-weight: 400;
  color: var(--text-muted);
}

/* ── HTML entity forms on a Page (page-form.js, docs/configuring/html-forms.md) ────
   page-form.js adds .entapp-page-form to every <form data-entapp-form> and gives unclassed
   controls their Bootstrap class. These rules only cover what Bootstrap can't know about the
   free-form markup authors write: a <label> WRAPPING its field reads as a stacked block (label
   text on top, field underneath, like the generated forms), and a detail-row table stays compact.
   Scoped to .entapp-page-form so no other page is affected. */
.entapp-page-form label:has(> input:not([type=checkbox], [type=radio], [type=hidden]), > select, > textarea) {
  display: block;
  margin-bottom: 1rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.entapp-page-form label > :is(input, select, textarea) {
  margin-top: .35rem;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
}
/* Inside the detail rows the column header already names the field — keep rows tight. */
.entapp-page-form [data-entapp-rows] label { margin-bottom: 0; }
.entapp-page-form [data-entapp-rows] :is(input, select, textarea) { margin-top: 0; }
.entapp-page-form table th {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.entapp-page-form [data-entapp-remove-row] { white-space: nowrap; }