/* ==========================================================================
   Inspections page — page-specific overrides layered on top of grid.css
   ----------------------------------------------------------------------------
   Scoped via `body.page-inspections`. Shared chrome (card, filters, search,
   grid, pager) comes from grid.css via the additional `body.page-grid`
   class. This file only holds rules that are Inspections-specific: column
   widths (10 columns), blanked edit-column caption, and the "Create New"
   CTA label.
   ========================================================================== */

/* Column widths */
body.page-inspections tr.dxgvArm > td:nth-child(1)  { width: 13%  !important; min-width: 140px !important; } /* Vessel name */
body.page-inspections tr.dxgvArm > td:nth-child(2)  { width: 12%  !important; min-width: 130px !important; } /* Inspected By */
body.page-inspections tr.dxgvArm > td:nth-child(3)  { width: 9%   !important; min-width: 100px !important; } /* Activity */
body.page-inspections tr.dxgvArm > td:nth-child(4)  { width: 10%  !important; min-width: 110px !important; } /* Port Name */
body.page-inspections tr.dxgvArm > td:nth-child(5)  { width: 10%  !important; min-width: 132px !important; } /* Inspected (date) */
body.page-inspections tr.dxgvArm > td:nth-child(6)  { width: 10%  !important; min-width: 110px !important; } /* Planning */
body.page-inspections tr.dxgvArm > td:nth-child(7)  { width: 10%  !important; min-width: 132px !important; } /* Reminder (date) */
body.page-inspections tr.dxgvArm > td:nth-child(8)  { width: 10%  !important; min-width: 110px !important; } /* Operation */
body.page-inspections tr.dxgvArm > td:nth-child(9)  { width: 10%  !important; min-width: 110px !important; } /* Type */
body.page-inspections tr.dxgvArm > td:nth-child(10) { width: 56px !important; min-width: 56px !important; } /* Edit */

/* Edit-column header blank caption */
body.page-inspections td.dxgvHeader:nth-child(10),
body.page-inspections th.dxgvHeader:nth-child(10),
body.page-inspections td.dxgvHeader:nth-child(10) *,
body.page-inspections th.dxgvHeader:nth-child(10) * {
    font-size: 0 !important;
    color: transparent !important;
}

/* CTA label */
body.page-inspections a[id$='_lbNewInspection'].Img-Std-Add::before {
    content: 'Create New';
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* ============================================================================
 * "New Inspection" modal (InspectionListCustom.ascx — separate copy of the
 * same modal from InspectionDetail.ascx/inspection-container.css §24):
 * Inspected By required-field validator.
 * ----------------------------------------------------------------------------
 * rfvApprovingAgency (CssClass="ValHighlight") still renders the legacy
 * yellow stripe + alertVal.png triangle + red "*" (Main.css/MainWhiteout.css).
 * Mirrors the same re-skin already used for q88search.css/createQuestionnaire.css
 * rfvdlVessel and inspection-container.css's rfvApprovingAgency: hide the "*"
 * text (font-size:0), swap in a red Lucide triangle-alert via ::before, add a
 * plain-language message via ::after.
 * ============================================================================ */
body.page-inspections [id$="_rfvApprovingAgency"] {
    /* No `!important` on display — Display="Dynamic" emits inline
     * style="display:none;" until validation fails; !important here would
     * force the error visible on initial load. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: #dc2626 !important;
    font-family: "Inter", sans-serif;
    font-size: 0 !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-transform: none !important;
    white-space: nowrap !important;
}
body.page-inspections [id$="_rfvApprovingAgency"]::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background-color: #dc2626;
    -webkit-mask: var(--icon-triangle-alert) no-repeat center / 14px;
            mask: var(--icon-triangle-alert) no-repeat center / 14px;
}
body.page-inspections [id$="_rfvApprovingAgency"]::after {
    content: "Please select an organization";
    font-size: 12px;
    line-height: 20px;
    color: #dc2626;
    font-weight: 500;
}

/* Vessel required-field validator — same modal, same re-skin. ClientIDMode is
 * Static here so the rendered id is the bare "cvVesselID" (no naming-container
 * prefix), unlike rfvApprovingAgency above. */
body.page-inspections #cvVesselID {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: #dc2626 !important;
    font-family: "Inter", sans-serif;
    font-size: 0 !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-transform: none !important;
    white-space: nowrap !important;
}
body.page-inspections #cvVesselID::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background-color: #dc2626;
    -webkit-mask: var(--icon-triangle-alert) no-repeat center / 14px;
            mask: var(--icon-triangle-alert) no-repeat center / 14px;
}
body.page-inspections #cvVesselID::after {
    content: "Please select a vessel";
    font-size: 12px;
    line-height: 20px;
    color: #dc2626;
    font-weight: 500;
}