/* ============================================================================
 * 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; }

@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; }
}