/*
 * Workshop Pro 5.7.0-rc1.35.234
 * Security Inspections UI polish.
 * Presentation-only overrides: no workflow, API or data-model changes.
 */

/* Give the detail modal consistent breathing room between its major panels. */
.security-inspection-detail-modal-v220 #securityInspectionDetailBodyV220 > .security-detail-grid-v220,
.security-inspection-detail-modal-v220 #securityInspectionDetailBodyV220 > .security-access-card-v220,
.security-inspection-detail-modal-v220 #securityInspectionDetailBodyV220 > .card {
  margin-top: 16px;
}

/* Keep card headings, status text and controls from feeling cramped on touch screens. */
.security-inspection-detail-modal-v220 .card-heading {
  gap: 16px;
  align-items: flex-start;
}

.security-inspection-detail-modal-v220 .security-inspection-notes-v223 textarea {
  margin-top: 12px;
}

.security-inspection-detail-modal-v220 .security-inspection-notes-actions-v223 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
}

.security-inspection-detail-modal-v220 .security-inspection-notes-actions-v223 button {
  min-height: 42px;
  margin: 0;
}

/* Certificate rows/empty state need a little internal separation before the footer controls. */
.security-inspection-detail-modal-v220 .security-certificate-row-v220 {
  gap: 14px;
}

.security-inspection-detail-modal-v220 .security-certificate-row-v220 + .security-certificate-row-v220 {
  margin-top: 10px;
}

/*
 * Main modal action dock.
 * This is the issue visible in the supplied iPad screenshot: the buttons sat directly
 * against the Security Certificates card. Give them their own separated action zone.
 */
.security-inspection-detail-modal-v220 .security-detail-actions-v220 {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px !important;
  margin-top: 20px !important;
  padding: 18px 0 4px;
  border-top: 1px solid rgba(148, 163, 184, .22);
}

.security-inspection-detail-modal-v220 .security-detail-actions-v220 > button,
.security-inspection-detail-modal-v220 .security-detail-actions-v220 > .btn {
  min-height: 42px;
  margin: 0 !important;
  white-space: nowrap;
}

/* Destructive Cancel is visually separated from normal workflow controls. */
.security-inspection-detail-modal-v220 .security-detail-actions-v220 > .danger-outline {
  margin-left: auto !important;
}

/* Invoice controls should wrap cleanly instead of compressing into neighbouring content. */
.security-inspection-detail-modal-v220 .security-inspection-invoice-v229 > .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 14px;
}

.security-inspection-detail-modal-v220 .security-inspection-invoice-v229 > .actions > button {
  margin: 0;
  min-height: 42px;
}

/* Page-level actions: consistent spacing in both Open and Completed Inspection views. */
.security-inspections-view-v220 .security-inspection-head-v220 {
  gap: 20px;
}

.security-inspections-view-v220 .security-inspection-head-actions-v224 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.security-inspections-view-v220 .security-inspection-head-actions-v224 > button {
  margin: 0;
  min-height: 42px;
}

/* Active-inspection filters: keep the refresh control aligned with the fields. */
.security-inspections-view-v220 .security-inspection-toolbar-v220 {
  display: grid;
  grid-template-columns: minmax(280px, 2fr) minmax(190px, .85fr) auto;
  align-items: end;
  gap: 14px;
}

.security-inspections-view-v220 .security-inspection-toolbar-v220 > button {
  min-height: 42px;
  margin: 0;
}

/* Completed history has one extra selector; give each control a predictable column. */
.completed-security-inspections-v224 .completed-security-toolbar-v224 {
  grid-template-columns: minmax(280px, 2fr) minmax(190px, .9fr) minmax(170px, .8fr) auto;
}

/* Make history/list rows slightly easier to scan and tap without altering their content. */
.security-inspections-view-v220 .security-inspection-list-v220 {
  display: grid;
  gap: 10px;
}

.security-inspections-view-v220 .security-inspection-row-v220 {
  min-height: 68px;
}

.security-inspections-view-v220 .security-history-empty-v224 {
  margin: 8px 0;
}

/* iPad / smaller desktop: allow filters and footer actions to reflow rather than crowd. */
@media (max-width: 1100px) {
  .security-inspections-view-v220 .security-inspection-toolbar-v220,
  .completed-security-inspections-v224 .completed-security-toolbar-v224 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .security-inspections-view-v220 .security-inspection-toolbar-v220 > button,
  .completed-security-inspections-v224 .completed-security-toolbar-v224 > button {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .security-inspections-view-v220 .security-inspection-toolbar-v220,
  .completed-security-inspections-v224 .completed-security-toolbar-v224 {
    grid-template-columns: minmax(0, 1fr);
  }

  .security-inspection-detail-modal-v220 .security-detail-actions-v220 > .danger-outline {
    margin-left: 0 !important;
  }

  .security-inspection-detail-modal-v220 .security-detail-actions-v220 > button,
  .security-inspection-detail-modal-v220 .security-detail-actions-v220 > .btn {
    flex: 1 1 calc(50% - 6px);
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .security-inspection-detail-modal-v220 .security-detail-actions-v220 > button,
  .security-inspection-detail-modal-v220 .security-detail-actions-v220 > .btn {
    flex-basis: 100%;
  }

  .security-inspection-detail-modal-v220 .security-inspection-notes-actions-v223 {
    align-items: stretch;
    flex-direction: column;
  }

  .security-inspection-detail-modal-v220 .security-inspection-notes-actions-v223 button {
    width: 100%;
  }
}


/*
 * Workshop Pro 5.7.0-rc1.35.234
 * Full Security Inspection dialog polish.
 * Retains the .233 detail/list improvements and normalises every Security Inspection modal.
 */

/* Shared modal rhythm: consistent header, fields and footer action zones. */
.security-inspection-modal-v220 {
  box-sizing: border-box;
}

.security-inspection-modal-v220 .modal-head {
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.security-inspection-modal-v220 .modal-head > div {
  min-width: 0;
}

.security-inspection-modal-v220 .modal-head h2 {
  margin-bottom: 8px;
}

.security-inspection-modal-v220 .modal-head p {
  margin-bottom: 0;
  max-width: 720px;
}

.security-inspection-modal-v220 .modal-head > .icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
}

.security-inspection-modal-v220 > .grid,
.security-inspection-modal-v220 .security-form-section-v220 .grid {
  gap: 16px 18px;
}

.security-inspection-modal-v220 label {
  min-width: 0;
}

.security-inspection-modal-v220 input,
.security-inspection-modal-v220 select,
.security-inspection-modal-v220 textarea {
  box-sizing: border-box;
}

/* Every modal gets a clearly separated footer instead of buttons touching the last panel. */
.security-inspection-modal-v220 > .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px 12px;
  margin-top: 20px !important;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, .22);
}

.security-inspection-modal-v220 > .actions > button,
.security-inspection-modal-v220 > .actions > .btn {
  min-height: 42px;
  margin: 0 !important;
}

.security-inspection-modal-v220 > .error:not(:empty) {
  margin-top: 12px;
}

/* Issue Certificate: use a deliberate single-column flow. The old 50/50 row made
 * the date input huge and forced the repeat-inspection control into an awkward bubble. */
#securityCertificateIssueFormV220 {
  width: min(820px, calc(100vw - 40px));
  max-width: 820px;
}

#securityCertificateIssueFormV220 > .grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

#securityCertificateIssueFormV220 > .grid > label {
  width: 100%;
}

#securityCertificateIssueFormV220 input[name="returned_date"] {
  display: block;
  width: min(100%, 320px);
  min-height: 44px;
  margin-top: 8px;
}

#securityCertificateIssueFormV220 .security-inspection-toggle-v219 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 0;
  padding: 15px 16px;
}

#securityCertificateIssueFormV220 .security-inspection-toggle-v219 input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
}

#securityCertificateIssueFormV220 .security-inspection-toggle-v219 span {
  min-width: 0;
}

#securityCertificateIssueFormV220 .security-inspection-toggle-v219 b,
#securityCertificateIssueFormV220 .security-inspection-toggle-v219 small {
  display: block;
}

#securityCertificateIssueFormV220 .security-inspection-toggle-v219 small {
  margin-top: 3px;
  line-height: 1.35;
}

#securityCertificateIssueFormV220 textarea[name="notes"] {
  display: block;
  width: 100%;
  min-height: 104px;
  max-height: 180px;
  resize: vertical;
  margin-top: 8px;
}

/* Mark Passed: keep the confirmation bubbles consistent and separate the notes/footer. */
#securityInspectionPassFormV220 {
  width: min(860px, calc(100vw - 40px));
  max-width: 860px;
}

#securityInspectionPassFormV220 .security-inspection-checks-v219 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

#securityInspectionPassFormV220 .security-inspection-checks-v219 > label {
  min-height: 0;
  padding: 14px 16px;
}

#securityInspectionPassFormV220 textarea[name="inspection_notes"] {
  display: block;
  width: 100%;
  min-height: 132px;
  margin-top: 8px;
}

/* Payment dialog is intentionally compact. */
#securityInspectionPaymentFormV229 {
  width: min(700px, calc(100vw - 40px));
  max-width: 700px;
}

#securityInspectionPaymentFormV229 > .grid {
  gap: 16px;
}

/* Intake remains the wider workflow, but sections and footer now share the same rhythm. */
#securityInspectionIntakeFormV220 {
  width: min(1040px, calc(100vw - 40px));
  max-width: 1040px;
}

#securityInspectionIntakeFormV220 .security-form-section-v220 + .security-form-section-v220 {
  margin-top: 18px;
}

#securityInspectionIntakeFormV220 .security-form-section-v220 {
  padding: 18px;
}

#securityInspectionIntakeFormV220 .security-print-toggle-v220 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 15px 16px;
}

#securityInspectionIntakeFormV220 .security-print-toggle-v220 input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
}

/* Detail modal keeps .233 spacing but gets a little extra bottom breathing room. */
.security-inspection-detail-modal-v220 {
  padding-bottom: 4px;
}

/* Tablet: certificate/pass dialogs stay one-column and intake grids can reflow cleanly. */
@media (max-width: 900px) {
  #securityInspectionIntakeFormV220 .grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #securityInspectionPaymentFormV229 > .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  #securityCertificateIssueFormV220,
  #securityInspectionPassFormV220,
  #securityInspectionPaymentFormV229,
  #securityInspectionIntakeFormV220 {
    width: calc(100vw - 24px);
  }

  #securityCertificateIssueFormV220 input[name="returned_date"] {
    width: 100%;
  }

  .security-inspection-modal-v220 > .actions > button,
  .security-inspection-modal-v220 > .actions > .btn {
    flex: 1 1 160px;
  }
}

@media (max-width: 480px) {
  .security-inspection-modal-v220 > .actions > button,
  .security-inspection-modal-v220 > .actions > .btn {
    flex-basis: 100%;
  }
}