/* ==========================================================================
   InstallerNet Portal — Legacy Compatibility Shim
   ----------------------------------------------------------------------------
   Auto-modernizes pages that still use the old class names from the original
   InstallerNet_Installers.css. This file maps the legacy structures
   (.bb_*, .OA_*, .form*, .submit_GV, etc.) to the new design tokens defined
   in portal-theme.css, so legacy pages don't need to be hand-rewritten to
   look reasonable under the new shell.

   Loaded via master Page_Load (AddCssInclude) for every page.
   ========================================================================== */


/* ----------------------------------------------------------------------
   1. KILL the old decorative chrome
   ---------------------------------------------------------------------- */

/* Hide every leftover spacer/box image from the old framed-card design */
img[src*="blue_box/"],
img[src*="red_box/"],
img[src*="grey_box/"],
img[src*="installer_header/spacer"],
img[src*="installer_header/dk_grey"],
img[src*="WorkOrder/Border-Bottom"],
img[src*="WorkOrder/RS_"],
img[src*="WorkOrder/Customer_Information"],
img[src*="WorkOrder/Schedule-Request"],
img[src*="WorkOrder/Job-Desctiption"],
img[src*="WorkOrder/Speical_Notes"],
img[src*="WorkOrder/Products"],
img[src*="WorkOrder/Accessories"],
img[src*="WorkOrder/Location"],
img[src*="WorkOrder/Directions"],
img[src*="Blue_LoadingBar"],
img[src*="recent_loader"] {
    display: none !important;
}

/* Decorative table-cell backgrounds — collapse to nothing */
.bb_top_background,
.bb_top_blue_background,
.bb_bottom_blue_background,
.bb_bottom_blue_background_border,
.bb_dots_pad,
.greyBox_top_background,
.greyBox_btm_background,
.lgt_grey_top_btm,
.dk_grey_middle,
.grey_background_bar,
.footer_grey_background,
.footer_white_background {
    background: transparent !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* Tables that just held the box chrome — release their fixed widths */
table.bb_table_padding {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
    margin: 0;
    background: transparent !important;
}
table.bb_table_padding > tbody > tr > td:first-child img,
table.bb_table_padding > tbody > tr > td:last-child img {
    display: none !important;
}

/* Strip every <table> bgcolor that was hardcoded to grey/white */
table[bgcolor="#FFFFFF"],
table[bgcolor="#E6F0F9"],
tr[bgcolor="#FFFFFF"],
tr[bgcolor="#E6F0F9"],
tr[bgcolor="#F1F7FE"],
td[bgcolor="#FFFFFF"],
td[bgcolor="#F1F7FE"],
td[bgcolor="#E9E9E9"] {
    background: transparent !important;
}


/* ----------------------------------------------------------------------
   2. Promote container cells into cards
   ---------------------------------------------------------------------- */

/* The "main content cell" — wrap content in a card-like surface */
.bb_allBlue_background,
.bb_top_blue_btm_grey_TOP {
    display: block !important;
    background: var(--in-surface) !important;
    border: 1px solid var(--in-border) !important;
    border-radius: var(--in-radius-lg) !important;
    box-shadow: var(--in-shadow-sm) !important;
    padding: var(--in-space-5) var(--in-space-6) !important;
    margin: 0 0 var(--in-space-5) !important;
    color: var(--in-text) !important;
}

/* Section borders / form section wrappers */
.OA_Border,
.formSection {
    display: block;
    background: var(--in-surface);
    border: 1px solid var(--in-border);
    border-radius: var(--in-radius-md);
    padding: var(--in-space-4) var(--in-space-5);
    margin: var(--in-space-4) 0;
    box-shadow: var(--in-shadow-sm);
}


/* ----------------------------------------------------------------------
   3. Promote titles & body text
   ---------------------------------------------------------------------- */

.bb_title,
.OA_Title,
.formTitle {
    display: block !important;
    font-size: var(--in-fs-xl) !important;
    font-weight: var(--in-fw-semibold) !important;
    color: var(--in-text) !important;
    line-height: var(--in-lh-tight) !important;
    margin: 0 0 var(--in-space-3) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
}
.bb_title::after,
.OA_Title::after,
.formTitle::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--in-brand-blue), var(--in-brand-blue-strong));
    margin-top: var(--in-space-2);
}

.redbox_bodytext,
.redbox_bodytext_bottom {
    color: var(--in-text) !important;
    font-size: var(--in-fs-md) !important;
    line-height: var(--in-lh-base) !important;
    background: transparent !important;
    padding: 0 !important;
}

.redbox_subtitle {
    display: block;
    font-size: var(--in-fs-lg) !important;
    font-weight: var(--in-fw-semibold) !important;
    color: var(--in-text) !important;
    margin: var(--in-space-4) 0 var(--in-space-2) !important;
    padding: 0 !important;
}

/* Old "red" links → use brand blue */
a.red_links,
a.red_links:visited {
    color: var(--in-link) !important;
    font-weight: var(--in-fw-medium);
}
a.red_links:hover { color: var(--in-link-hover) !important; }


/* ----------------------------------------------------------------------
   4. Form rows: legacy formLabel / formInput pairs
   ---------------------------------------------------------------------- */

.OA_Questions,
.formQuestions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--in-space-4) var(--in-space-5);
    padding: 0;
    background: transparent;
}
.formLabel {
    display: block;
    font-size: var(--in-fs-sm);
    font-weight: var(--in-fw-medium);
    color: var(--in-text-muted);
    margin-bottom: var(--in-space-1);
}
.formInput {
    display: block;
    margin-bottom: var(--in-space-3);
}
.formInput input[type="text"],
.formInput input[type="email"],
.formInput input[type="password"],
.formInput textarea,
.formInput select {
    width: 100%;
}

/* "Yes/No" radio button cells */
.OA_yesNo_pad,
.OA_yesNo_pad_btm,
.OA_profile,
.OA_profile_btm,
.OA_profile_noWidth {
    background: transparent !important;
    color: var(--in-text) !important;
    padding: var(--in-space-2) var(--in-space-3) !important;
    border: 0 !important;
}

.OA_yesNo input[type="radio"],
.OA_yesNo label {
    margin-right: var(--in-space-2);
}


/* ----------------------------------------------------------------------
   5. Inputs — auto-style legacy plain inputs across the app
   ---------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
    background: var(--in-surface);
    color: var(--in-text);
    border: 1px solid var(--in-border-strong);
    border-radius: var(--in-radius-md);
    padding: 6px 10px;
    font-family: inherit;
    font-size: var(--in-fs-md);
    line-height: var(--in-lh-base);
    transition: border-color var(--in-dur-fast) var(--in-ease),
                box-shadow var(--in-dur-fast) var(--in-ease);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--in-brand-blue);
    box-shadow: var(--in-focus-ring);
}
input[type="text"][disabled],
input[disabled] { background: var(--in-surface-sunken); color: var(--in-text-muted); }

textarea { min-height: 5rem; resize: vertical; }

/* Legacy <asp:Button> renders as <input type="submit/button"> — modernize */
input[type="submit"],
input[type="button"],
input[type="reset"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: var(--in-radius-md);
    border: 1px solid var(--in-brand-blue-strong);
    background: var(--in-brand-blue-strong);
    color: #ffffff;
    font-family: inherit;
    font-size: var(--in-fs-md);
    font-weight: var(--in-fw-medium);
    line-height: var(--in-lh-tight);
    cursor: pointer;
    transition: background var(--in-dur-fast) var(--in-ease),
                border-color var(--in-dur-fast) var(--in-ease),
                box-shadow var(--in-dur-fast) var(--in-ease);
}
input[type="submit"]:hover,
input[type="button"]:hover {
    background: #3a6e9c;
    border-color: #3a6e9c;
}
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
    outline: none;
    box-shadow: var(--in-focus-ring);
}
input[type="submit"][disabled],
input[type="button"][disabled] {
    background: var(--in-surface-sunken);
    border-color: var(--in-border);
    color: var(--in-text-subtle);
    cursor: not-allowed;
}


/* ----------------------------------------------------------------------
   6. Filter rows (OpenPurchaseOrders, RecentTransactions legacy class)
   ---------------------------------------------------------------------- */

.filterDate {
    display: inline-flex;
    flex-direction: column;
    margin-right: var(--in-space-3);
    margin-bottom: var(--in-space-3);
    color: var(--in-text-muted);
    font-size: var(--in-fs-sm);
    font-weight: var(--in-fw-medium);
}


/* ----------------------------------------------------------------------
   7. Legacy GridView (.submit_GV) — restyle as a modern table
   ---------------------------------------------------------------------- */

.submit_GV {
    width: 100%;
    border-collapse: collapse;
    background: var(--in-surface);
    border: 1px solid var(--in-border);
    border-radius: var(--in-radius-md);
    overflow: hidden;
    font-size: var(--in-fs-md);
    color: var(--in-text);
}

/* Phone: allow horizontal scroll inside the card body so wide grids
   don't blow out the layout */
@media (max-width: 700px) {
    .in-card__body--flush { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .submit_GV { min-width: 600px; font-size: var(--in-fs-sm); }
    .submit_GV th, .submit_GV td { padding: var(--in-space-2); }
}
.submit_GV th {
    background: var(--in-surface-alt);
    color: var(--in-text-muted);
    font-weight: var(--in-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--in-fs-xs);
    text-align: left;
    padding: var(--in-space-3) var(--in-space-3);
    border-bottom: 1px solid var(--in-border);
}
.submit_GV td {
    padding: var(--in-space-3) var(--in-space-3);
    border-bottom: 1px solid var(--in-divider);
    vertical-align: middle;
}
.submit_GV tr:last-child td { border-bottom: 0; }
.submit_GV tr:hover td { background: var(--in-surface-sunken); }
.submit_GV_alt td,
.submit_GV tr.submit_GV_alt td { background: var(--in-surface-alt); }

/* Pager links */
.submit_GV a {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 2px;
    border-radius: var(--in-radius-sm);
    color: var(--in-link);
}
.submit_GV a:hover { background: var(--in-brand-blue-soft); text-decoration: none; }


/* ----------------------------------------------------------------------
   8. Modal popups (ajaxToolkit ModalPopupExtender)
   ---------------------------------------------------------------------- */

.modalBackground {
    background: var(--in-overlay) !important;
    backdrop-filter: blur(2px);
}

.submitPanel {
    background: var(--in-surface) !important;
    border: 1px solid var(--in-border) !important;
    border-radius: var(--in-radius-lg) !important;
    box-shadow: var(--in-shadow-lg) !important;
    padding: var(--in-space-5) !important;
    color: var(--in-text) !important;
    max-width: 480px;
}
.submitPanel .header {
    font-size: var(--in-fs-lg);
    font-weight: var(--in-fw-semibold);
    margin-bottom: var(--in-space-3);
    padding-bottom: var(--in-space-3);
    border-bottom: 1px solid var(--in-divider);
}
.submitPanel .list ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--in-space-3);
}
.submitPanel .list li {
    padding: var(--in-space-1) 0;
    color: var(--in-text-muted);
    font-size: var(--in-fs-sm);
}
.submitPanel .button { display: inline-block; margin-right: var(--in-space-2); }
.submitPanel .button a {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--in-radius-md);
    background: var(--in-brand-blue-strong);
    color: #fff !important;
    font-weight: var(--in-fw-medium);
    text-decoration: none;
}
.submitPanel .button a:hover { background: #3a6e9c; }


/* ----------------------------------------------------------------------
   9. Validation summary
   ---------------------------------------------------------------------- */

.vsApplication {
    display: block;
    background: var(--in-danger-soft);
    color: var(--in-danger);
    border: 1px solid var(--in-danger);
    border-radius: var(--in-radius-md);
    padding: var(--in-space-3) var(--in-space-4);
    margin-bottom: var(--in-space-4);
}


/* ----------------------------------------------------------------------
   10. Misc — login status, profile status labels, hours table
   ---------------------------------------------------------------------- */

.Profile_lblStatus { color: var(--in-success); font-weight: var(--in-fw-medium); }
.login_status, .login_Status { color: var(--in-danger); font-size: var(--in-fs-xs); }

table.hours { border-collapse: collapse; }
table.hours .hours_header td,
table.hours .hours_header th {
    color: var(--in-text-muted);
    font-size: var(--in-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--in-space-2) var(--in-space-3);
    text-align: center;
}
table.hours td {
    padding: var(--in-space-1) var(--in-space-2);
    text-align: center;
}

/* WorkOrder legacy (when not using the standalone print version) */
.Table_Background {
    background: var(--in-surface) !important;
    border: 1px solid var(--in-border) !important;
    border-radius: var(--in-radius-md);
    padding: var(--in-space-3) !important;
}
.ci_Questions { color: var(--in-text-muted); font-weight: var(--in-fw-medium); font-size: var(--in-fs-sm); }
.Answer_Fields { color: var(--in-text); font-size: var(--in-fs-md); }
.Answer_Fields_nopad { color: var(--in-text); font-size: var(--in-fs-md); padding: 0; }

/* OA-style toolbar text */
.OA_Title.formTitle { padding: 0; }

/* Legacy ".bold" helper from page-level <style> */
.bold { font-weight: var(--in-fw-semibold); }