/* ============================================================================
 * crud-modal.css — shared responsive CRUD modal shell for every dashboard.
 *
 * Was defined inline inside businessDashboard.html with a fixed overlay that had
 * NO vertical scroll, so on a phone the form ran past the viewport and the Submit
 * button was clipped/unreachable (couldn't register a customer on mobile). This
 * shared, scroll-safe version is loaded globally via fragments/header :: header-css
 * so Business, Education, Welfare and Agriculture all use one modal treatment.
 * Pair with /js/business/crud-modal.js (openModal/closeModal/newEntity/…).
 * ========================================================================== */

.crud-overlay{
  position:fixed; inset:0;
  background:rgba(9,30,66,.55);
  z-index:1050; display:none;
  padding:32px 14px;
  overflow-y:auto;                 /* the whole overlay scrolls → tall forms stay reachable */
  -webkit-overflow-scrolling:touch;
}
.crud-overlay.open{ display:block; }

.crud-box{
  background:#fff; border-radius:12px;
  width:100%; max-width:900px; margin:0 auto;
  box-shadow:0 18px 50px rgba(9,30,66,.35);
  overflow:hidden;
}

.crud-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 20px;
  background:linear-gradient(135deg,#0D3B8C,#1565C0); color:#fff;
}
.crud-head h4{ margin:0; font-weight:700; font-size:16px; color:#fff; line-height:1.2; }

.crud-x{
  background:none; border:0; font-size:26px; line-height:1;
  cursor:pointer; color:#fff; opacity:.85; padding:0 4px;
}
.crud-x:hover{ opacity:1; }

.crud-body{ padding:20px 22px; }

.crud-bulkbar .btn{ margin-left:4px; }

/* ── "Already registered" panel ─────────────────────────────────────────────────────────────────
 * A compact, scrollable list of the records that already exist, shown INSIDE the form. The screen's
 * own table is always behind this overlay (it is fixed and full-viewport), so without this the
 * operator enters a new record with no sight of what is already there and duplicates it.
 * Generic .crud-existing* names: the Product form uses it first, any CRUD form can adopt it.
 */
.crud-existing{
  border:1px solid #e6eaf0; border-radius:8px;
  background:#f7f9fc;
  padding:10px 12px; margin-bottom:16px;
}
.crud-existing-head{
  display:flex; align-items:baseline; gap:8px;
  font-weight:600; font-size:13px; color:#0D3B8C;
  margin-bottom:6px;
}
.crud-existing-head .text-muted{ font-weight:normal; font-size:12px; }
.crud-existing-list{
  max-height:170px; overflow-y:auto;      /* the panel scrolls, the form never gets pushed off-screen */
  -webkit-overflow-scrolling:touch;
}
.crud-existing-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:5px 6px; border-radius:5px; font-size:13px;
  border-bottom:1px solid #edf1f6;
}
.crud-existing-row:last-child{ border-bottom:0; }
.crud-existing-row:hover{ background:#eef3fb; }
.crud-existing-row .ce-name{ font-weight:600; color:#22303f; }
.crud-existing-row .ce-tag,
.crud-existing-row .ce-cat,
.crud-existing-row .ce-badge{
  font-size:11px; padding:1px 6px; border-radius:10px;
  background:#e4e9f2; color:#4a5a6e;
}
.crud-existing-row .ce-price{ margin-left:auto; color:#22303f; font-variant-numeric:tabular-nums; }
.crud-existing-row.is-inactive .ce-name{ color:#8a94a3; text-decoration:line-through; }
/* The namesake the server-side check reported — the warning points at a row, not just at the field. */
.crud-existing-row.is-flagged{ background:#fff3cd; box-shadow:inset 3px 0 0 #e0a800; }
.crud-existing-row .ce-edit{
  border:0; background:none; padding:0 2px;
  color:#1565C0; font-size:12px; text-decoration:underline; cursor:pointer;
}
.crud-existing-row .ce-edit:hover{ color:#0D3B8C; }
.crud-existing-msg{ font-size:12px; margin-top:6px; }
/* UI-FORM-1: folded until something is typed (catalog-products.js syncExistingIdle). The rows stay rendered. */
.crud-existing-idle{ display:none; font-weight:normal; font-size:12px; }
.crud-existing.is-idle{ padding:7px 12px; }
.crud-existing.is-idle .crud-existing-head{ margin-bottom:0; }
.crud-existing.is-idle .crud-existing-idle{ display:inline; }
.crud-existing.is-idle .crud-existing-list{ display:none; }
/* Unfolded, the list RESERVES its height: results arriving (40 rows -> 1 match -> none) must not move the form or the
 * Save buttons under the operator's pointer. The one height change is the unfold itself, on the keystroke. */
#prodExistingWrap:not(.is-idle){ display:flex; flex-direction:column; height:230px; }
#prodExistingWrap:not(.is-idle) .crud-existing-list{ flex:1 1 auto; min-height:0; max-height:none; }
#prodExistingWrap:not(.is-idle) .crud-existing-msg{ flex:0 0 auto; }
@media (max-width:767px){ #prodExistingWrap:not(.is-idle){ height:190px; } }

@media (max-width:767px){
  /* The form is the task; on a phone give the panel less of the sheet. */
  .crud-existing-list{ max-height:120px; }
  .crud-existing-row .ce-price{ margin-left:0; }
  .crud-existing-row .ce-edit{ min-height:0; }   /* not a 44px tap target — it must not dwarf the row */
}

/* Phone: modal becomes a full-height sheet that scrolls internally, so the action
 * buttons at the bottom are always reachable regardless of form height.
 *
 * 767px, not 768 — at exactly 768px Bootstrap's col-sm-* grid is live, so the old
 * edge stacked the fields to full width while the grid still floated them, giving
 * a one-pixel-wide band of broken layout. Tablets (768–991) now get the wrapping
 * flex treatment in /css/responsive.css instead of this full stack. */
@media (max-width:767px){
  .crud-overlay{ padding:0; }
  .crud-box{
    max-width:100%; min-height:100%;
    border-radius:0; display:flex; flex-direction:column;
  }
  .crud-head{ position:sticky; top:0; z-index:2; }
  .crud-body{ padding:16px; flex:1 1 auto; }
  /* Stack the horizontal form: full-width labels + inputs, comfortable tap targets. */
  .crud-body .form-horizontal .control-label{
    text-align:left; padding-top:0; margin-bottom:5px; float:none; width:100%;
  }
  .crud-body .form-horizontal .form-group > [class^="col-"],
  .crud-body .form-horizontal .form-group > [class*=" col-"]{
    width:100%; float:none;
  }
  .crud-body .form-control{ height:44px; font-size:16px; }  /* 16px stops iOS zoom-on-focus */
  .crud-body select.form-control{ height:44px; }
  .crud-body .btn{ min-height:44px; }
}

/* ── Row actions: the select checkbox + the per-row Edit button ─────────────────────────────────
 * These two used to be loose siblings in the same cell, so they sat on different baselines, drifted
 * apart as the column resized, and wrapped onto separate lines on a phone. main.js now wraps them in
 * .row-actions and this keeps them as one aligned control.
 */
.row-actions{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;        /* never split the checkbox from its button */
}

.row-actions input[type="checkbox"]{
  flex:0 0 auto;
  width:16px; height:16px;
  margin:0;                  /* Bootstrap's stray top-margin is what knocked it off the baseline */
  cursor:pointer;
  accent-color:var(--brand, #1E88E5);
}

.row-actions .js-edit-row{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 10px;
  border-radius:6px;
  line-height:1.5;
  border:1px solid var(--border, #D9E4EF);
  background:var(--surface, #fff);
  color:var(--txt2, #3D5166);
}

.row-actions .js-edit-row:hover{
  border-color:var(--brand, #1E88E5);
  color:var(--brand-dark, #1565C0);
  background:var(--blue-50, #E3F2FD);
}

.row-actions .js-edit-row:focus-visible{
  outline:2px solid var(--brand-light, #42A5F5);
  outline-offset:1px;
}

/* The cell itself: keep it snug and vertically centred against the data columns. main.js tags it, so no
 * :has() is needed (it isn't safe on the browser floor this app targets). */
td.row-actions-cell{ vertical-align:middle; width:1%; }

/* Phones: drop the word, keep the pencil — a full-width tap target beats a truncated label.
 * The button keeps its title/aria-label, so it stays announced and hoverable. */
@media (max-width:600px){
  .row-actions{ gap:8px; }
  .row-actions .js-edit-row{ padding:6px 9px; }         /* comfortable tap target */
  .row-actions .js-edit-row .row-actions__label{ display:none; }
  .row-actions .js-edit-row .glyphicon{ margin:0; }
}

/* ── UI-FORM-1: the form GRID — labels above fields, titled sections, a sticky action bar ────────────────
 * docs/slices/ui-form-1-purchase-product-layout.md. Opt-in per modal (.fg-modal on .crud-box, .fg-form on the
 * form), so every other CRUD form keeps its Bootstrap label-beside-field layout untouched.
 *
 * WHY A GRID: the purchase QTY row hand-counted Bootstrap columns to 20 of 12 and wrapped the Pack/Box toggle
 * to the far edge. A grid cannot overflow — a cell that does not fit starts the next row.
 *
 * ⚠ The form KEEPS class="form-horizontal": main.js finds forms by their ORDINAL among .form-horizontal
 * (getElementsByClassName('form-horizontal')[tableV]), so dropping it would re-point every later form.
 * Cells therefore use .fg-label, never .control-label, which .form-horizontal right-aligns.
 */
.crud-box.fg-modal{ overflow:visible; }                /* hidden would stop the sticky footer from sticking */
.fg-modal .crud-head{ border-radius:12px 12px 0 0; }
.fg-modal .crud-body{ padding-bottom:0; }

.fg-section{ margin-bottom:14px; }
.fg-caption{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#0D3B8C; border-bottom:1px solid #e6eaf0; padding-bottom:5px; margin-bottom:10px;
}
.fg-caption .fg-caption-note{ text-transform:none; letter-spacing:0; font-weight:500; color:#6b7a8c; }
.fg-caption .fg-caption-end{ margin-left:auto; text-transform:none; letter-spacing:0; font-weight:600; color:#1565C0; }
[dir="rtl"] .fg-caption .fg-caption-end{ margin-left:0; margin-right:auto; }

.fg-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px 14px; align-items:start;
}
.fg-cell{ min-width:0; }
.fg-span-2{ grid-column:span 2; }
.fg-span-3{ grid-column:span 3; }
.fg-full{ grid-column:1 / -1; }
.fg-label{
  display:block; margin:0 0 4px; font-size:12px; font-weight:600; color:#3D5166; line-height:1.3;
}
.fg-label.req::after{ content:" *"; color:#c62828; }
.fg-cell .help-block{ margin:3px 0 0; font-size:12px; }
.fg-note{ font-size:12px; color:#4a5a6e; }

/* Read-only figures the form WORKS OUT (description, stock, total, profit): still inputs, because
 * populateFormData posts them, but styled as information so nobody tries to type into them. */
.fg-display .form-control[readonly],
.fg-display .form-control[disabled]{
  background:#f4f6f9; border-color:transparent; box-shadow:none; color:#22303f;
  font-weight:600; cursor:default;
}
.fg-display .form-control::placeholder{ font-weight:400; }

/* Inline options (checkboxes) on one line. */
.fg-options{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px; }
.form-horizontal .fg-options .checkbox{ margin:0; padding-top:0; min-height:0; }

/* The action bar sticks to the bottom of the visible area while the form scrolls (the OVERLAY scrolls). It stays the
 * LAST thing in the form: validateForm() skips the last two elements as "the buttons". */
.fg-actions{
  position:sticky; bottom:0; z-index:3;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px;
  margin:14px -22px 0; padding:12px 22px;
  background:#fff; border-top:1px solid #e6eaf0; border-radius:0 0 12px 12px;
  box-shadow:0 -6px 14px -10px rgba(9,30,66,.35);
}
.fg-actions .fg-actions-info{ margin-right:auto; font-size:12px; color:#6b7a8c; }
[dir="rtl"] .fg-actions .fg-actions-info{ margin-right:0; margin-left:auto; }

@media (max-width:991px){
  .fg-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .fg-span-3{ grid-column:1 / -1; }
}
@media (max-width:767px){
  /* Two columns on a phone: short numeric boxes (.fg-sm) pair up, everything else takes the row. */
  .fg-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .fg-cell{ grid-column:1 / -1; }
  .fg-cell.fg-sm{ grid-column:auto; }
  .fg-modal .crud-body{ padding-bottom:0; }
  .fg-actions{ margin:14px -16px 0; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius:0; }
  .fg-actions .btn{ flex:1 1 auto; }
  .fg-actions .fg-kbd{ display:none; }                  /* keyboard hints mean nothing on a touch screen */
}