/* responsive.css — Responsive behavior + light modernization for Xerox Rebate Portal
   Load AFTER css.css so these rules override legacy defaults.
   No changes to legacy CSS files. */

/* ==========================================================================
   1. FONT SIZE BUMP — base from 8pt to 10pt
   ========================================================================== */

BODY, BLOCKQUOTE, BUTTON, TABLE, TD, LEGEND {
    font-size: 10pt;
}

SPAN.INPUTBODY, DIV.INPUTBODY, TD.INPUTBODY, TR.INPUTBODY {
    font-size: 10pt;
}

/* ==========================================================================
   2. MISSING CLASS DEFINITIONS — used in .aspx pages but not in css.css
   ========================================================================== */

.quantityheaderRequest {
    font: bold 11px Arial, Helvetica, Verdana, Sans-Serif;
    color: #830000;
    padding: 4px 0;
}

.quantityheaderRequest2 {
    font: bold 11px Arial, Helvetica, Verdana, Sans-Serif;
    color: #830000;
    padding: 2px 0;
}

.ERROR {
    font-weight: bold;
    color: #830000;
}

.ERRORMESSAGE {
    font-weight: bold;
    color: #cc0000;
    font-size: 10pt;
}

/* ==========================================================================
   3. BUTTON STYLING — universal submit/button styling
   ========================================================================== */

input[type="submit"],
input[type="button"],
.btn {
    background-color: #830000;
    color: #ffffff;
    border: 1px solid #5a0000;
    padding: 5px 16px;
    font: 11px Arial, Helvetica, Verdana, Sans-Serif;
    cursor: pointer;
    border-radius: 3px;
}

input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover {
    background-color: #a00000;
}

input[type="submit"]:active,
input[type="button"]:active,
.btn:active {
    background-color: #5a0000;
}

/* ==========================================================================
   3b. OVERRIDE LEGACY ORANGE CLASSES — use theme red instead
   ========================================================================== */

SPAN.MINIHEADER2, DIV.MINIHEADER2, TD.MINIHEADER2, TR.MINIHEADER2 {
    background-color: #830000;
}

TD.HEADERBAR {
    background-color: #830000;
}

TD.ERROR {
    color: #830000;
}

/* ==========================================================================
   4. FLUID LAYOUT — override fixed table widths
   ========================================================================== */

#cn_header,
#content,
#cn_footer {
    width: 100%;
    box-sizing: border-box;
}

/* Layout tables: fluid up to max-width */
#cn_header > table,
#content > table,
#cn_footer > table {
    max-width: 895px;
    width: 100% !important;
    margin: 0 auto;
}

/* Spacer images should not force overflow (exclude 1px spacer GIFs) */
#cn_header img:not([height="1"]),
#cn_footer img:not([height="1"]) {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   5. RESPONSIVE — tablet breakpoint at 768px
   ========================================================================== */

@media (max-width: 768px) {
    /* Remove zoom on smaller screens */
    body {
        zoom: 1 !important;
    }

    /* All layout tables go full-width */
    table[width] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Portal.master sidebar stacks above content */
    #cn_header > table td,
    #content > table > tbody > tr > td {
        display: block;
        width: 100% !important;
    }

    /* Hide spacer columns on small screens */
    #content > table > tbody > tr > td[width="20"] {
        display: none;
    }

    /* Portal sidebar images */
    #content > table > tbody > tr > td[width="150"] img {
        display: none;
    }

    /* Header: stack logo and nav vertically */
    #cn_header > table > tbody > tr > td {
        display: block;
        width: 100% !important;
    }

    #cn_header > table > tbody > tr > td[rowspan] {
        text-align: center;
    }

    /* Hide 1px spacer cells */
    #cn_header > table > tbody > tr > td[width="9"],
    #cn_header > table > tbody > tr > td[width="7"] {
        display: none;
    }

    /* Nav bar wraps */
    #cn_pnav_red table {
        width: 100% !important;
    }

    .cn_pnav_link,
    .cn_pnav_link_red_hover {
        padding: 4px 5px !important;
    }

    /* Secondary nav wraps */
    .cn_snav_menu td {
        display: inline-block;
    }

    /* Content area padding */
    #content {
        padding: 0 8px;
    }

    /* GridView / data tables scroll horizontally if needed */
    .INPUTBODY[width="100%"],
    table.INPUTBODY {
        display: block;
        overflow-x: auto;
    }

    /* Wizard content full-width */
    #content > table[width="895"] {
        padding: 0 8px;
        box-sizing: border-box;
    }
}

/* Site banner (helpdesk-managed notifications) */
.site-banner {
    width: 100%;
    margin: 0;
}
.site-banner__item {
    background-color: #fff4ce;
    border-bottom: 1px solid #e6c200;
    color: #3a3a3a;
    text-align: center;
    padding: 10px 16px;
    font-weight: bold;
}