/* ============================================================
   ZABDESK Home Page Styles (zn_home.css)
   ============================================================
   Extracted from Index.asp inline <style> block on 2026-09-11.
   Page-specific styles for the main login/home page.
   Global/shared rules live in css/zn_global.css and css/responsive.css.
   ============================================================ */

/* ---------- Text utility classes ---------- */
.style1 { font-size: 16px; }
.style3 { font-size: var(--zn-font-size-sm, 0.875rem); font-weight: bold; }

/* ---------- Alert banner ---------- */
#alert {
    border: 2px solid red;
    padding: 5px;
    font-size: 18px;
    font-style: bold;
    color: red;
}

/* ---------- Slideshow ---------- */
.mySlides { display: none; }

/* ---------- Ordered list with CSS counters (numbered badges) ---------- */
ol {
    counter-reset: li;           /* Initiate a counter */
    list-style: none;             /* Remove default numbering */
    *list-style: decimal;         /* Keep using default numbering for IE6/7 */
    font: 15px;
    padding: 0;
    margin-bottom: 4em;
}
ol ol {
    margin: 0 0 0 2em;            /* Add some left margin for inner lists */
}

/* ---------- Rounded list items with counter badges ---------- */
.rounded-list a {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
}
.rounded-list a:hover {
    background: #eee;
}
.rounded-list a:hover:before {
    transform: rotate(360deg);
}
.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

/* ---------- Clearfix ---------- */
.clearfix { clear: both; }

/* ---------- HEC Resource boxes ---------- */
.resource-box {
    padding: 0;
    margin: 15px 15px 15px 0;
    text-align: center;
    vertical-align: middle;
    float: left;
    width: 190px;
}
.resource-box img {
    max-width: 100%;
    height: auto;
    display: block;
}
.Std-resource-box {
    padding: 0;
    margin: 15px 15px 15px 0;
    text-align: center;
    vertical-align: middle;
    float: left;
    width: 260px;
}

/* ---------- Login sidebar ---------- */
#sidebar {
    background: none;
    color: var(--zn-color-text, #1E293B);
    position: relative;
    margin: 20px 0 20px 20px;
    height: auto;
}
/* ---------- Universal box-sizing for inputs ---------- */
input { box-sizing: border-box; }

/* ---------- Main content area ---------- */
#content,
#main-content {
    display: block;
    box-sizing: border-box;
    overflow-x: auto;
}
#divTabsPanel, .zn-board, .zn-feed {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ---------- Sidebar refined ---------- */
#sidebar {
    border: none;
    top: 0;
    padding: 0 !important;
    min-height: 280px;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---------- Mobile menu toggle (hidden on desktop) ---------- */
.responsive-menu { display: none; }

#menu ul { padding-left: 0; }

/* ---------- Tablet (max 1024px) ---------- */
@media (max-width: 1024px) {
    #sidebar { display: block; }
    #footer { font-size: 1.2em !important; }
    #sidebar {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px auto 0;
        float: none !important;
    }
    #menu a { padding: 0 !important; }
    #menu {
        clear: both;
        margin-top: 8%;
        display: block;
        position: relative;
    }
    .navigation-bar {
        width: 100vw;
        height: 40px;
    }
    #menu li { display: none; }
    .Logo img { min-width: 125px; }
    #content,
    #main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px auto 0;
        display: block;
        padding: 0;
        float: none !important;
    }
    .responsive-menu {
        display: block !important;
        float: right !important;
        margin-right: 5px;
    }
    .ui-dialog { width: 35%; }
    .ui-dialog .ui-dialog-content { overflow: hidden; }
    .ui-widget-overlay {
        background: rgba(0, 0, 0, 0.6);
        opacity: 1;
    }
    #footer .footer-logos { justify-content: center !important; }
    #footer img {
        display: block !important;
        float: none !important;
        height: 48px !important;
        width: auto !important;
        max-width: 75% !important;
        margin: 8px auto !important;
    }
    .navigation-bar-res li {
        display: block;
        float: none;
        width: 100%;
        background: #1d1d1d;
    }
    .navigation-bar-res li:nth-child(2n+1) { background: #2d2d2d; }
    #menu-res { margin-top: 0 !important; }
}

/* Mobile nav (hidden by default, shown via responsive-menu toggle) */
#menu-res { display: none; }

/* ---------- Dialog responsive widths ---------- */
@media (max-width: 767px) {
    .padding-5 img { max-width: 100%; max-height: 100%; }
    #dialogId {
        width: 70vw !important;
        margin-left: -100px !important;
        margin-top: -1500px !important;
    }
}

@media (max-width: 580px) {
    .padding-5 img { max-width: 100%; max-height: 100%; }
    #dialogId {
        width: 70vw !important;
        margin-left: -200px !important;
        margin-top: -700px !important;
    }
}

@media only screen and (max-width: 400px) {
    .padding-5 img { max-width: 100%; max-height: 100%; }
    #dialogId {
        width: 70vw !important;
        margin-left: -5px !important;
        top: 110% !important;
    }
}

@media only screen and (max-width: 300px) {
    .padding-5 img { max-width: 100%; max-height: 100%; }
    #dialogId {
        width: 70vw !important;
        margin-left: -5px !important;
        top: 110% !important;
    }
}

@media (min-width: 992px) {
    .padding-5 img { max-width: 100%; max-height: 100%; }
    #dialogId {
        width: 45vw !important;
        z-index: 300000;
        top: 5% !important;
        margin-left: -100px !important;
    }
}

@media (min-width: 1200px) {
    .padding-5 img { max-width: 100%; max-height: 100%; }
    #dialogId {
        width: 45vw !important;
        z-index: 300000;
        top: 5% !important;
        margin-left: -200px !important;
    }
}

/* ============================================================
   CROSS-DEVICE BREAKPOINTS v20260913p (zn_home.css)
   Large LED screens, 2K, 4K, and very small phones
   ============================================================ */

/* ---------- Large LED displays (>= 1600px) ---------- */
@media (min-width: 1600px) {
    .resource-box {
        width: 210px;
    }
    #sidebar .zn-card {
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- Full HD (>= 1920px) ---------- */
@media (min-width: 1920px) {
    .resource-box {
        width: 230px;
    }
    #sidebar .zn-card {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    #sidebar input[type="text"],
    #sidebar input[type="password"],
    #sidebar select {
        font-size: 16px;
        padding: 10px !important;
    }
}

/* ---------- 2K / QHD (>= 2560px) ---------- */
@media (min-width: 2560px) {
    .resource-box {
        width: 260px;
    }
    #sidebar .zn-card {
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
    }
    #sidebar h2 {
        font-size: 22px;
    }
}

/* ---------- 4K / Ultra HD (>= 3840px) ---------- */
@media (min-width: 3840px) {
    .resource-box {
        width: 300px;
    }
    #sidebar .zn-card {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
    #sidebar h2 {
        font-size: 24px;
    }
}

/* ---------- Very small phones (<= 360px) ---------- */
@media (max-width: 360px) {
    #sidebar {
        margin: 0 !important;
        padding: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #sidebar .zn-card {
        padding: 10px !important;
    }
    #content {
        width: 100% !important;
        padding: 4px !important;
    }
    .resource-box {
        width: 100% !important;
        float: none !important;
        margin: 8px 0 !important;
    }
    #divTabsPanel {
        padding: 2px !important;
    }
    #divTabsPanel > ul li a {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }
}

/* ---------- v20260913p: Mobile resource boxes (<= 900px) ---------- */
@media (max-width: 900px) {
    .resource-box {
        width: 100% !important;
        max-width: 320px !important;
        float: none !important;
        margin: 10px auto !important;
    }
}

/* ---------- v20260913p: Tablet resource boxes (481px - 900px) ---------- */
@media (min-width: 481px) and (max-width: 900px) {
    .resource-box {
        width: 45% !important;
        float: left !important;
        margin: 10px 2.5% 10px 2.5% !important;
    }
}

/* ---------- v20260913p: Anti Plagiarism responsive (<= 900px) ---------- */
@media (max-width: 900px) {
    #dvAntiPlag,
    #dvAntiPlag p,
    #dvAntiPlag ol,
    #dvAntiPlag ul,
    #dvAntiPlag li {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1.2em !important;
    }
    #dvAntiPlag ol { padding-left: 1.5em !important; }
    #dvAntiPlag ol ol { padding-left: 1.8em !important; margin-left: 0 !important; }
    #dvAntiPlag ol ol ol,
    #dvAntiPlag ul { padding-left: 2em !important; margin-left: 0 !important; }
    #dvAntiPlag p,
    #dvAntiPlag li {
        font-size: 14px !important;
        line-height: 1.6 !important;
        text-align: left !important;
    }
    #dvAntiPlag h2 { font-size: 18px !important; }
    #dvAntiPlag { padding: 12px !important; }
}

/* ---------- v20260913p: Cap content width on large screens ---------- */
@media (min-width: 1600px) {
    #main-content { max-width: 1200px; }
}
@media (min-width: 1920px) {
    #main-content { max-width: 1400px; }
}
@media (min-width: 2560px) {
    #main-content { max-width: 1600px; }
}

/* ---------- Extra small phones (<= 320px) ---------- */
@media (max-width: 320px) {
    #sidebar input[type="submit"],
    #sidebar input[type="button"],
    #sidebar button {
        font-size: 13px;
        padding: 10px !important;
    }
    #divTabsPanel > ul li a {
        font-size: var(--zn-font-size-xs, 0.75rem) !important;
        padding: 8px 8px !important;
    }
}

/* Landscape phones: keep a single column so login fields stay 44px and tappable */
@media (min-width: 480px) and (max-width: 844px) and (orientation: landscape) {
    #sidebar,
    #content,
    #main-content {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }
}

/* ============================================================
   Home shell v20260913p — all devices (phone → tablet → LED/projector)
   Beats style.css 968px. IE uses float; modern browsers use flex.
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
#wrapper, #header, #page, #page-bgtop, #page-bgbtm {
    max-width: 1600px !important;
    width: 100% !important;
    box-sizing: border-box;
}
#page-bgbtm { *zoom: 1; }
#page-bgbtm:after { content: ""; display: table; clear: both; }

#sidebar {
    float: left;
    width: 30%;
    max-width: 380px;
    margin: 16px 12px 24px 16px !important;
}
#content,
#main-content {
    float: left;
    width: 66%;
    margin: 16px 12px 24px 0 !important;
    min-width: 0;
}

#sidebar input[type="text"],
#sidebar input[type="password"],
#sidebar select {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 8px 10px !important;
}
#sidebar input[type="submit"],
#sidebar input[type="button"] {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    cursor: pointer;
}
#sidebar a.zn-forgot {
    display: block;
    min-height: 44px;
    line-height: 44px;
}
#sidebar input:focus,
#sidebar select:focus,
#sidebar a:focus {
    outline: 3px solid #F5A623;
    outline-offset: 2px;
}

@supports (display: flex) {
    #page-bgbtm {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 16px;
        padding: 8px 12px 24px;
    }
    #sidebar {
        float: none;
        width: 340px;
        max-width: 100%;
        flex: 0 1 340px;
        margin: 8px 0 16px !important;
    }
    #content,
    #main-content {
        float: none;
        width: auto;
        flex: 1 1 280px;
        min-width: 0;
        margin: 8px 0 16px !important;
    }
}

@media (max-width: 900px) {
    #sidebar,
    #content,
    #main-content {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 !important;
    }
    #wrapper, #header, #page, #page-bgtop, #page-bgbtm {
        max-width: 100% !important;
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (min-width: 1600px) {
    #wrapper, #header, #page, #page-bgtop, #page-bgbtm {
        max-width: 1520px !important;       /* v20260915c: align with responsive spec */
    }
    .zn-card .zn-title { font-size: 18px; }
}
@media (min-width: 1920px) {
    #wrapper, #header, #page, #page-bgtop, #page-bgbtm {
        max-width: 1520px !important;       /* v20260915c: align with responsive spec */
    }
}
@media (min-width: 2560px) {
    #wrapper, #header, #page, #page-bgtop, #page-bgbtm {
        max-width: 2080px !important;       /* v20260915c: align with responsive spec */
    }
    body { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .zn-card, .zn-card:hover, .rounded-list a { transition: none !important; transform: none !important; }
}

/* jQuery UI paints tabs as blue chips + white type; beat that on the home board */
#divTabsPanel.ui-tabs .ui-tabs-nav,
#divTabsPanel .ui-tabs-nav {
    background: transparent !important;
    border: 0 !important;
    padding: 8px 4px 0 !important;
}
#divTabsPanel.ui-tabs .ui-tabs-nav li,
#divTabsPanel .ui-tabs-nav li,
#divTabsPanel.ui-tabs .ui-tabs-nav li.ui-state-default,
#divTabsPanel.ui-tabs .ui-tabs-nav li.ui-state-active {
    background: none !important;
    border: 0 !important;
    margin: 0 8px 0 0 !important;
}
#divTabsPanel.ui-tabs .ui-tabs-nav li a,
#divTabsPanel .ui-tabs-nav li a,
#divTabsPanel.ui-tabs .ui-tabs-nav li.ui-state-default a,
#divTabsPanel.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    color: #0A2F5A !important;
    background: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    padding: 7px 12px !important;
    border: 1px solid #94a3b8 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
}
#divTabsPanel.ui-tabs .ui-tabs-nav li.ui-state-active a,
#divTabsPanel.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
    color: #ffffff !important;
    background: #0A2F5A !important;
    border-color: #0A2F5A !important;
}

/* Forgot Password: never white-on-white (jQuery/button/link inheritance) */
#sidebar .zn-forgot,
#sidebar a.zn-forgot,
#sidebar button[name="btnForgotPassword"],
#sidebar .zn-btn-group a,
#sidebar .zn-btn-group button,
#sidebar .zn-btns input[type="button"],
#sidebar input[name="btnForgotPassword"] {
    color: #b45309 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    min-height: 44px !important;
    line-height: 44px !important;
    padding: 0 !important;
    margin-top: 8px !important;
    cursor: pointer;
}
#sidebar .zn-forgot:hover,
#sidebar a.zn-forgot:hover,
#sidebar button[name="btnForgotPassword"]:hover {
    color: #0A2F5A !important;
    text-decoration: underline !important;
}
#sidebar .zn-card::before,
#sidebar .zn-login-box::before { display: none !important; }


/* ---------- v20260915c: Quick-access info boxes below tabs ----------
   Two card-style links (HEC Resources + Anti Plagiarism) shown beneath
   the jQuery UI tabs panel. Clicking jumps to the matching tab. JS
   handler wires data-target-tab -> activate tab. */
.zn-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}
.zn-info-card {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 18px 18px;
    border-radius: 10px;
    background: #F1F5FE;            /* lavender / soft blue */
    border: 1px solid #DCE3F2;
    color: #0A2F5A;
    text-decoration: none !important;
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
    box-sizing: border-box;
    min-height: 92px;
}
.zn-info-card:hover,
.zn-info-card:focus {
    background: #E5ECFD;
    box-shadow: 0 2px 8px rgba(10, 47, 90, 0.10);
    transform: translateY(-1px);
    text-decoration: none !important;
    color: #0A2F5A;
}
.zn-info-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: #ffffff;
    color: #0A2F5A;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #DCE3F2;
}
.zn-info-icon svg { display: block; }
.zn-info-icon-hec { color: #0A2F5A; }
.zn-info-icon-anti { color: #1F497D; }
.zn-info-body { flex: 1 1 auto; min-width: 0; }
.zn-info-title {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 700;
    color: #0A2F5A;
    line-height: 1.25;
}
.zn-info-desc {
    margin: 0 0 6px 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.4;
}
.zn-info-cta {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #0A2F5A;
}
.zn-info-card:hover .zn-info-cta,
.zn-info-card:focus .zn-info-cta {
    text-decoration: underline;
}

/* Stack to single column on phone; 2 columns at >= 600px */
@media (max-width: 599px) {
    .zn-info-row {
        grid-template-columns: 1fr;
    }
    .zn-info-card { min-height: auto; padding: 14px; }
}