/* ============================================================
   ZabDesk Sticky-Note Notice Board  (/css/notices.css)
   Dynamic feed rendered by /js/notices.js from /api/notices.asp
   v20260914b: standard font sizes (no large-screen bumps)
   ============================================================ */

/* ---------- palette ----------
   Primary SZABIST blue #0A2F5A · accent gold #F5A623
   Background #F8FAFC · text #1E293B / muted #475569 */
#page, #page-bgtop, #page-bgbtm { background: #F8FAFC !important; }

/* ---------- board toolbar / filter chips ---------- */
.zn-board { padding: 8px 2px 4px; }

.zn-toolbar { margin: 2px 0 16px; }

.zn-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.zn-chip {
    border: 1px solid #c9c2b2;
    background: #fff;
    color: #5a5344;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px !important;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.4;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* v20260917 (S79): this hover keeps a LIGHT surface (#faf7ef) but declared no
   colour. css/zn_global.css loads later and its generic `button:hover` sets
   `color:#fff` (correct for its own dark #1E4D8C surface), which leaked in here
   and gave white-on-near-white = 1.07:1. Rule: a hover that does NOT go dark
   must pin its own text colour. (The `:active` reset also stops the generic
   `button:active{background:#072244}` from flashing this chip dark on click.) */
.zn-chip:hover, .zn-chip:active {
    border-color: #8a8272;
    background: #faf7ef;
    color: #5a5344;
}
.zn-chip.active { background: #0A2F5A; border-color: #0A2F5A; color: #fff; }
.zn-chip-count { opacity: .75; font-weight: 400; margin-left: 4px; font-size: 12px; }

/* Index tabs: Notice board / HEC Resources / Anti Plagiarism */
#divTabsPanel > ul {
    margin: 0;
    padding: 4px 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
#divTabsPanel > ul li {
    display: inline-block;
    float: none;
    margin: 0 4px 0 0;
}
#divTabsPanel > ul li a {
    display: inline-block;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    padding: 7px 12px !important;
    white-space: nowrap;
    color: #334155 !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
#divTabsPanel > ul li a:hover,
#divTabsPanel > ul li a:focus {
    color: #0A2F5A !important;
    border-bottom-color: #F5A623;
    text-decoration: none !important;
}
#divTabsPanel > ul li.ui-tabs-active a,
#divTabsPanel > ul li.ui-state-active a {
    color: #0A2F5A !important;
    border-bottom-color: #0A2F5A;
}
/* v20260914b: Standard font sizes kept consistent across all screen sizes.
   Previously tabs bumped to 15px and chips to 14px at 1600px+ — now kept
   at 14px and 13px respectively for uniform appearance. */
@media (max-width: 600px) {
    #divTabsPanel > ul li a { font-size: 13px !important; padding: 7px 10px !important; }
    .zn-chip { font-size: 12px; min-height: 36px; padding: 6px 12px; }
}

/* ---------- feed grid ----------
   v20260916a: capped at 4 columns on desktop so every sticky note keeps a
   comfortable reading width. Before this, >=1600px showed 5 (cramped) and
   1025-1599px showed 3 (inconsistent). 4 is now the desktop maximum at
   every width, and the notes get wider instead of more numerous.

   IMPORTANT: /css/responsive.css also declares .zn-feed grid-template-columns
   and is loaded AFTER this file (and with !important in the 1280-1599px
   range), so its desktop rules are deliberately kept in sync with the values
   below. If you change one file, change the other. */
.zn-feed {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 18px;
    padding: 8px 2px 18px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

/* Wide desktops / LED walls: still 4 columns — the notes simply breathe more.
   (#wrapper is capped at 1520px, so 5+ columns squeezed cards to ~200px.) */
@media (min-width: 1600px) {
    .zn-feed { gap: 26px 20px; }
}
@media (min-width: 2200px) {
    .zn-feed { gap: 28px 22px; }
}

/* Small laptops (1025px - 1439px): 3 columns — at 1280px the feed is only
   ~860px wide, so 4 columns would squeeze each note to ~203px */
@media (min-width: 1025px) and (max-width: 1439px) {
    .zn-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
}

/* Tablets / small laptops (<= 1024px): 2 columns */
@media (max-width: 1024px) {
    .zn-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
}

/* Large phones landscape / small tablets (<= 700px): 2 columns compact */
@media (max-width: 700px) {
    .zn-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
}

/* Phones (<= 480px): single column with comfortable padding */
@media (max-width: 480px) {
    .zn-feed { grid-template-columns: 1fr; gap: 16px; padding: 14px 6px 22px; }
    .zn-board { padding: 10px 6px 4px; }
}

.zn-feed .zn-card {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
}
/* ---------- sticky note card ---------- */
.zn-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--zn-bg, #FFF9E6);
    border-top: 5px solid var(--zn-accent, #E0C060);
    border-radius: 4px;
    box-shadow: 0 8px 12px -4px rgba(0, 0, 0, 0.15);
    padding: 16px 16px 12px;
    transform: rotate(var(--zn-rot, 0deg));
    transition: transform .18s ease, box-shadow .18s ease;
}
.zn-card:hover,
.zn-card:focus-within {
    transform: rotate(var(--zn-rot, 0deg)) translateY(-4px);
    box-shadow: 0 16px 26px -6px rgba(0, 0, 0, 0.28);
    z-index: 3;
}

/* push-pin */
.zn-card::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    margin-left: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff8a80, #c62828 70%);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}

/* type palettes (derived notice_type) */
.zn-type-exam         { --zn-bg: #FFF6C9; --zn-accent: #E8B93B; }
.zn-type-scholarship  { --zn-bg: #E3F2FD; --zn-accent: #5FA8DC; }
.zn-type-loan         { --zn-bg: #E8F5E9; --zn-accent: #7CB97F; }
.zn-type-fee          { --zn-bg: #FDE7EF; --zn-accent: #E27396; }
.zn-type-registration { --zn-bg: #EDE7F6; --zn-accent: #9575CD; }
.zn-type-calendar     { --zn-bg: #FFF3E0; --zn-accent: #F0A35E; }
.zn-type-general      { --zn-bg: #FFF9E6; --zn-accent: #E0C060; }

/* ---------- v20260916a: keep the sticky-note look on the FEED ----------
   /css/zn_global.css is loaded AFTER this file — it arrives via
   inc_menu/zn_topbar.inc, which index.asp includes late in the document —
   and it declares:

       .zn-card { background: var(--zn-color-bg, #fff);
                  border: 1px solid var(--zn-color-border, #E2E8F0);
                  border-radius: 8px;
                  box-shadow: 0 1px 2px rgba(10,47,90,.05); }

   At equal specificity the later file wins, so that rule flattened every
   notice into a plain white box: paper colour gone, coloured top edge gone,
   lift gone (verified live: computed background was rgb(255,255,255) even
   though --zn-bg was correctly set to #FDE7EF).

   `.zn-feed .zn-card` (0,2,0) outranks `.zn-card` (0,1,0) whatever the load
   order, so the note styling is restored WITHOUT !important.
   Scoped to .zn-feed on purpose: the sidebar LOGIN box also carries the
   .zn-card class and must keep its own white / gold treatment. */
.zn-feed .zn-card {
    background: var(--zn-bg, #FFF9E6);
    border: none;
    border-top: 5px solid var(--zn-accent, #E0C060);
    border-radius: 4px;
    box-shadow: 0 8px 12px -4px rgba(0, 0, 0, .15);
}
.zn-feed .zn-card:hover,
.zn-feed .zn-card:focus-within {
    box-shadow: 0 16px 26px -6px rgba(0, 0, 0, .28);
}

/* ---------- v20260916a: alternating sticky-note papers ----------
   The feed is usually dominated by ONE notice_type at a time (4 of the 6
   live notices are "fee"), so type-based colours made every card look
   identical. Cycle six light pastel papers by card POSITION instead, so
   neighbours always differ. The notice_type stays readable in the badge
   text ("Fees" / "Registration") in the card meta row.
   Uses :nth-of-type — every card is an <article>, while the "load more"
   wrapper is a <div>, so that element can never shift the colour cycle. */
.zn-feed .zn-card:nth-of-type(6n+1) { --zn-bg: #FFF7D1; --zn-accent: #E3B341; }
.zn-feed .zn-card:nth-of-type(6n+2) { --zn-bg: #E4F6EA; --zn-accent: #58B77D; }
.zn-feed .zn-card:nth-of-type(6n+3) { --zn-bg: #E3F0FB; --zn-accent: #5A9FD4; }
.zn-feed .zn-card:nth-of-type(6n+4) { --zn-bg: #FCE7EE; --zn-accent: #E0748F; }
.zn-feed .zn-card:nth-of-type(6n+5) { --zn-bg: #EEE9F8; --zn-accent: #8E77C9; }
.zn-feed .zn-card:nth-of-type(6n+6) { --zn-bg: #FFEFE0; --zn-accent: #EFA05A; }

/* ---------- badges ---------- */
.zn-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.zn-badges:empty { display: none; }

.zn-badge {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1.4;
}
.zn-badge-new      { background: #1565C0; color: #fff; }
.zn-badge-deadline { background: #C62828; color: #fff; }
.zn-badge-closed   { background: #8D8D8D; color: #fff; }

/* ---------- title ---------- */
.zn-title { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 700; color: #1E293B; }

.zn-title-btn {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}
/* v20260917 (S79): these two deliberately opt OUT of the button surface with
   `background:none`. css/zn_global.css loads LATER in the cascade and its
   generic `button:hover{background:#1E4D8C}` (specificity 0-1-1) outranked the
   rest-state `background:none` here (0-1-0), so hovering painted a dark navy
   panel behind text that stayed dark -> 1.46:1 / 1.74:1, unreadable.
   Re-declaring the opt-out on every interactive state restores it; the
   specificity here (0-2-0) beats `button:hover` regardless of sheet order. */
.zn-title-btn:hover, .zn-title-btn:active, .zn-title-btn:focus {
    background: none;
    color: inherit;
    text-decoration: underline;
}
.zn-title-btn:focus { outline: 2px solid rgba(21, 101, 192, .6); outline-offset: 2px; }

/* ---------- body text ---------- */
.zn-body {
    margin: 0;
    font-size: 12.8px;
    line-height: 1.55;
    color: #475569;
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.zn-body.expanded {
    max-height: 170px;
    overflow-y: auto;
}
.zn-more-btn {
    background: none;
    border: 0;
    padding: 0 0 0 4px;
    color: #1565C0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
/* v20260917 (S79): same opt-out restoration as .zn-title-btn above. */
.zn-more-btn:hover, .zn-more-btn:active, .zn-more-btn:focus {
    background: none;
    color: #1565C0;
    text-decoration: underline;
}

/* ---------- action chips / attachments ---------- */
.zn-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.zn-actions:empty { display: none; }

.zn-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1.5px solid rgba(0, 0, 0, .28);
    background: rgba(255, 255, 255, .6);
    color: #333;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    max-width: 100%;
}
.zn-action:hover { background: #fff; border-color: rgba(0, 0, 0, .55); color: #111; }
.zn-action svg { width: 12px; height: 12px; flex: none; fill: currentColor; }
.zn-action-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
}

.zn-attach {
    font-size: 11.5px;
    color: #1565C0;
    text-decoration: none;
    font-weight: 600;
}
.zn-attach:hover { text-decoration: underline; }

/* 2026-09-08: attachment buttons (Open-Link style, opens in new window) */
.zn-action-doc {
    border-color: rgba(12, 84, 163, .45);
    color: #0c54a3;
    background: rgba(12, 84, 163, .06);
}
.zn-action-doc:hover {
    background: #0c54a3;
    border-color: #0c54a3;
    color: #fff;
}
.zn-doc-icon { font-size: 13px; line-height: 1; flex: none; }

/* ---------- card footer: posted / deadline / countdown ---------- */
.zn-meta {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #64748B;
}

.zn-deadline-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #C62828;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.3;
}
.zn-deadline-chip.past { background: #757575; }

.zn-countdown { font-weight: 700; color: #8a5a00; font-size: 11.5px; }

/* ---------- skeleton loader ---------- */
.zn-skel {
    background: #fff;
    border-top: 5px solid #e6e2d6;
    border-radius: 4px;
    box-shadow: 0 8px 12px -4px rgba(0, 0, 0, .08);
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.zn-skel-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eceadf 25%, #f8f6ee 50%, #eceadf 75%);
    background-size: 200% 100%;
    animation: znShimmer 1.3s linear infinite;
}
.zn-skel-line.title { height: 18px; width: 82%; }
.zn-skel-line.w90 { width: 92%; }
.zn-skel-line.w60 { width: 62%; }
.zn-skel-line.w40 { width: 40%; }

@keyframes znShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- empty / error states ---------- */
.zn-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 44px 20px;
    color: #6d6656;
}
.zn-state svg { width: 130px; height: auto; margin-bottom: 14px; }
.zn-state h4 { margin: 0 0 6px; font-size: 16px; color: #4a4436; }
.zn-state p { margin: 0; font-size: 13px; }
.zn-state .zn-state-sub { margin-top: 8px; font-size: 12px; opacity: .75; }

.zn-retry-btn,
.zn-loadmore-btn {
    margin-top: 16px;
    background: #0A2F5A;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 9px 26px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.zn-retry-btn:hover,
.zn-loadmore-btn:hover { background: #12437c; }

.zn-loadmore-wrap { grid-column: 1 / -1; text-align: center; padding: 4px 0 10px; }
.zn-loadmore-btn { background: #fff; color: #0A2F5A; border: 1.5px solid #0A2F5A; }
/* v20260917 (S79): light hover surface (#eef2f5) on a light rest surface (#fff),
   so it must pin its own colour - otherwise the generic `button:hover{color:#fff}`
   in css/zn_global.css wins and the label goes white-on-near-white. */
.zn-loadmore-btn:hover { background: #eef2f5; color: #0A2F5A; }

/* ---------- side drawer (full notice) ---------- */
.zn-drawer-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(20, 24, 32, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    z-index: 99990;
}
.zn-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.zn-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 440px;
    max-width: 94vw;
    background: #fff;
    z-index: 99995;
    box-shadow: -10px 0 28px rgba(0, 0, 0, .22);
    transform: translateX(105%);
    transition: transform .26s ease;
    display: flex;
    flex-direction: column;
}
.zn-drawer.open { transform: translateX(0); }

.zn-drawer-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #eee;
}
.zn-drawer-head h3 { margin: 0; font-size: 16.5px; line-height: 1.4; color: #0A2F5A; flex: 1; }

.zn-drawer-close {
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0 4px;
    flex: none;
}
.zn-drawer-close:hover { color: #333; }

.zn-drawer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 18px;
    font-size: 12px;
    color: #777;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}
.zn-drawer-meta:empty { display: none; }

.zn-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    font-size: 13.5px;
    line-height: 1.65;
    color: #333;
}
.zn-drawer-body h2 { font-size: 16px; margin: 10px 0 6px; color: #0A2F5A; line-height: 1.4; }
.zn-drawer-body h3 { font-size: 14px; margin: 14px 0 6px; color: #0A2F5A; }
.zn-drawer-body p { margin: 6px 0; }
.zn-drawer-body ul, .zn-drawer-body ol { margin: 6px 0 10px; padding-left: 22px; }
.zn-drawer-body li { margin-bottom: 6px; }
.zn-drawer-body hr { border: 0; border-top: 1px solid #e5e5e5; margin: 12px 0; }
.zn-drawer-body .zn-xlink { color: #1565C0; text-decoration: underline; word-break: break-word; }
.zn-drawer-body img { max-width: 100%; height: auto; }

.zn-drawer-foot {
    padding: 12px 18px;
    border-top: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    background: #fff;
}
.zn-drawer-foot:empty { display: none; }

.zn-drawer-loading { text-align: center; padding: 44px 0; color: #888; font-size: 13px; }

.zn-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid #ddd;
    border-top-color: #0A2F5A;
    border-radius: 50%;
    animation: znSpin .8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}
@keyframes znSpin { to { transform: rotate(360deg); } }

body.zn-drawer-open { overflow: hidden; }

/* ---------- header: logo + system status indicator ---------- */
.zn-login-logo { padding: 2px 2px 10px; }

/* clean white login card, content vertically centered */
#sidebar .zn-card::before { display: none !important; }
#sidebar .zn-login-box,
#sidebar .zn-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(10, 47, 90, .10);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

/* v20260916d - heading colour inside the white login card.
   style.css declares `#sidebar h2 { color:#FFFFFF }` because that heading
   was originally painted over a navy background image; style.css later
   does `#sidebar h2 { background: unset }` and this card is #ffffff, so
   the "Login" <h2 class="zn-card-title"> rendered white-on-white and was
   completely invisible (WCAG 1:1). Re-assert the card's own dark heading
   colour. `#sidebar` itself stays navy, so a bare sidebar h2 elsewhere is
   unaffected. */
#sidebar .zn-login-box h2,
#sidebar .zn-login-box .zn-card-title,
#sidebar .zn-card h2,
#sidebar .zn-card .zn-card-title {
    color: #0A2F5A !important;
}

/* stacked fields with clear labels and 16px spacing */

.zn-forgot {
    display: block;
    text-align: center;
    margin-top: 12px;
    color: #b45309 !important;
    font-weight: 700;
    text-decoration: none;
    min-height: 44px;
    line-height: 44px;
}
.zn-forgot:hover, .zn-forgot:focus { text-decoration: underline; color: #0A2F5A; }
#sidebar .zn-field { margin-top: 16px !important; }

/* Private iframe boards (Student / Faculty) — same note cards, float layout */
bodyz, body.zn-priv-nb {
  background: #F8FAFC !important;
  color: #1E293B;
  margin: 10px !important;
  font-family: Arial, Helvetica, sans-serif;
}
zl {
  display: block;
  overflow: hidden;
  padding: 8px 4px 16px;
  zoom: 1;
}
zi {
  float: left;
  width: 23%;
  margin: 0 1% 18px;
}
zi > a {
  background: #FFF9E6 !important;
  color: #1E293B !important;
  width: auto !important;
  min-height: 130px;
  border-top: 5px solid #E0C060;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 8px 12px -4px rgba(0,0,0,.15);
  box-shadow: 0 8px 12px -4px rgba(0,0,0,.15);
  -webkit-transform: none !important;
  -moz-transform: none !important;
  transform: none !important;
  padding: 14px 14px 10px !important;
}
zi > a:hover, zi > a:focus {
  -webkit-transform: none !important;
  margin-top: -4px;
  -webkit-box-shadow: 0 16px 26px -6px rgba(0,0,0,.28);
  box-shadow: 0 16px 26px -6px rgba(0,0,0,.28);
}
zi h2 { color: #0A2F5A !important; font-size: 15px; font-weight: bold; padding-bottom: 6px; }
zi p, zi div { color: #334155 !important; font-size: 13px; }
@media screen and (max-width: 900px) { zi { width: 48%; } }
@media screen and (max-width: 520px) { zi { width: 98%; } }

/* Campus dropdown: proper select with visible arrow icon */
#sidebar .zn-field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2F5A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px !important;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    cursor: pointer;
}

/* gold top accents for visual consistency */
#sidebar .zn-card::before { display: none !important; }
#sidebar .zn-login-box,
#sidebar .zn-card { border-top: 3px solid #F5A623 !important; }
.zn-card { border-top: 3px solid #F5A623; }

/* topbar styles moved to /css/zn_topbar.css (loaded by inc_menu/zn_topbar.inc) */

/* ---------- mobile login optimization ---------- */
@media (max-width: 1024px) {
    /* clip (not hidden) keeps position:sticky working while preventing horizontal scroll */
    html, body { overflow-x: hidden; overflow-x: clip; }

    /* CRITICAL: override zn_home.css flex-basis 280px and overflow-x:auto
       that constrain #main-content to a 280px scrollable box on mobile.
       Without this, the notice board content gets clipped and the user
       sees a scrollbar inside the content area instead of natural page flow. */
    #main-content,
    #content {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-x: visible !important;
        flex-basis: auto !important;
        flex: none !important;
    }

    /* Override jQuery UI tabs inline styles: notices.js sets
       min-height:500px and overflow:auto on #divTabsPanel via
       .tabs().css({...}). On mobile this creates a nested scroll
       area that clips notice cards. Reset to natural flow. */
    #divTabsPanel {
        min-height: 0 !important;
        overflow: visible !important;
    }

    #sidebar {
        height: auto !important;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    #sidebar > form {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin: 0;
    }
    #sidebar .zn-card::before { display: none !important; }
#sidebar .zn-login-box,
#sidebar .zn-card {
        flex: 1;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }
    #sidebar .zn-card > #search {
        margin-top: auto;
        margin-bottom: auto;
    }

    .zn-login-logo { text-align: center; }

    /* stacked full-width fields with 16px gaps, 44px+ tap targets */
    .zn-field { margin-top: 16px !important; }
    .zn-field input[type="text"],
    .zn-field input[type="password"],
    .zn-field select {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        padding: 12px !important;
        font-size: 16px;
    }

    /* full-width rounded Login + centered Forgot Password below */
    .zn-btn-group { margin-top: 22px !important; }
    .zn-btn-group input[type="submit"] {
        width: 100% !important;
        float: none !important;
        padding: 12px !important;
        border-radius: 8px !important;
        font-size: 15px;
        cursor: pointer;
    }
    .zn-btn-group button {
        display: block;
        width: 100% !important;
        float: none !important;
        margin: 12px 0 0 !important;
        padding: 12px !important;
        min-height: 44px;
        background: transparent !important;
        border: none !important;
        color: #F5A623 !important;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
    }

    /* touch-friendly chips and card actions */
    .zn-chip { min-height: 44px; padding: 10px 16px; }
    .zn-action { min-height: 44px; padding: 10px 16px; font-size: 12.5px; }
    .zn-pw-toggle { width: 44px; height: 44px; }
}

/* ---------- password show/hide toggle ---------- */
.zn-pw-wrap { position: relative; }
.zn-pw-wrap input { padding-right: 48px !important; }
.zn-pw-toggle {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #64748B;
}
.zn-pw-toggle:hover { color: #0A2F5A; }
.zn-pw-toggle svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.zn-pw-toggle .zn-eye-off { display: none; }
.zn-pw-toggle.active .zn-eye { display: none; }
.zn-pw-toggle.active .zn-eye-off { display: block; }

/* ---------- full-width buttons: dark blue Login + gold Forgot Password (all viewports) ---------- */
#sidebar .zn-btn-group { margin-top: 20px; }
#sidebar .zn-btn-group input[type="submit"] {
    width: 100% !important;
    float: none !important;
    background: #0A2F5A !important;
    color: #ffffff !important;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 12px !important;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
#sidebar .zn-btn-group input[type="submit"]:hover {
    background: #F5A623 !important;
    color: #0A2F5A !important;
}
#sidebar .zn-btn-group button {
    display: block;
    width: 100% !important;
    float: none !important;
    margin: 12px 0 0 !important;
    padding: 11px !important;
    background: transparent !important;
    border: none !important;
    color: #F5A623 !important;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
#sidebar .zn-btn-group button:hover {
    text-decoration: underline;
    color: #E8960C !important;
}

/* ---------- sticky sidebar support (desktop) ---------- */
@media (min-width: 1025px) {
    /* Login form follows the user slightly as they scroll through notices */
    #sidebar > form {
        position: -webkit-sticky;
        position: sticky;
        top: 14px;
    }
}

/* ---------- responsive ---------- */
@media (max-width: 1400px) {
    .zn-card { transform: rotate(0deg); }
    .zn-card:hover,
    .zn-card:focus-within { transform: translateY(-2px); }
    .zn-card::before { display: none; }
}

/* On mobile (where rotation is fully off), extra padding above the feed
   gives the card top-border some breathing room. */
@media (max-width: 767px) {
    .zn-board { padding: 14px 6px 8px; }
    .zn-feed { padding: 18px 6px 24px; gap: 18px; }
}

/* v20260914b: Touch devices — make entire card tappable */
@media (hover: none) and (pointer: coarse) {
    .zn-card {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(245, 166, 35, 0.25);
    }
    .zn-card:active {
        transform: scale(0.98);
        box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.2);
        transition: transform .08s ease, box-shadow .08s ease;
    }
}

@media (max-width: 480px) {
    .zn-drawer { width: 100vw; max-width: 100vw; }
    .zn-action-label { max-width: 130px; }
}
/* ============================================================
   LEGACY BROWSER COMPATIBILITY LAYER v20260902a  (notices.css)
   REVISED: the previous version (v20260901a) leaked float/width
   rules into modern grid browsers, collapsing notice cards to
   60px strips. This version scopes every fallback STRICTLY to
   browsers that cannot support the modern rule, using:
     - @supports not (...)  -> modern browsers skip entirely
     - star hacks / \9       -> only IE6-9 ever parse
   Modern browsers (grid + custom-props + clamp) get the ORIGINAL
   design untouched.
   ============================================================ */

/* ---------- 1. Feed fallback ONLY for browsers without grid support ----------
   Browsers WITH grid ignore this entire block (Chrome 57+, FF 52+,
   Safari 10.1+, Edge 16+, IE never enters: it lacks @supports). */
@supports not (display: grid) {
    .zn-feed { *zoom: 1; }
    .zn-feed:before, .zn-feed:after { content: ""; display: table; }
    .zn-feed:after { clear: both; }
    .zn-feed .zn-card,
    .zn-feed .zn-skel {
        float: left;
        width: 23%;
        margin: 0 1% 18px;
        box-sizing: border-box;
    }
    @media (max-width: 1024px) {
        .zn-feed .zn-card, .zn-feed .zn-skel { width: 48%; }
    }
    @media (max-width: 600px) {
        .zn-feed .zn-card, .zn-feed .zn-skel { width: 100%; float: none; margin: 0 0 18px; }
    }
    .zn-feed .zn-state,
    .zn-feed .zn-loadmore-wrap { float: none; width: 100%; }
}

/* ---------- 2. Flex-gap fallback ONLY for browsers without gap ----------
   Browsers WITH gap keep the main layer's gap untouched. */
@supports not (gap: 8px) {
    .zn-chips .zn-chip { margin: 0 6px 6px 0; }
    .zn-badges .zn-badge { margin: 0 4px 4px 0; }
    .zn-actions .zn-action,
    .zn-actions .zn-attach { margin: 0 6px 6px 0; }
    .zn-meta .zn-posted,
    .zn-meta .zn-deadline-chip,
    .zn-meta .zn-countdown { margin: 0 8px 4px 0; }
    .zn-drawer-meta > span,
    .zn-drawer-foot > * { margin: 0 6px 6px 0; }
}

/* ---------- 3. var() color fallbacks ----------
   Declared as plain literals BEFORE the var() rules in the cascade:
   browsers that understand var() override these (same specificity,
   later in source order in the MAIN layer above); IE9-11 keep them.
   Safe because these selectors appear EARLIER in this same file with
   var() values - but to guarantee override order we re-list the var()
   forms here at the same position. */
.zn-card {
    background: #FFF9E6;
    border-top-color: #E0C060;
    background: var(--zn-bg, #FFF9E6);
    border-top-color: var(--zn-accent, #E0C060);
}
.zn-type-exam         { background: #FFF6C9; border-top-color: #E8B93B; background: var(--zn-bg, #FFF6C9); border-top-color: var(--zn-accent, #E8B93B); }
.zn-type-scholarship  { background: #E3F2FD; border-top-color: #5FA8DC; background: var(--zn-bg, #E3F2FD); border-top-color: var(--zn-accent, #5FA8DC); }
.zn-type-loan         { background: #E8F5E9; border-top-color: #7CB97F; background: var(--zn-bg, #E8F5E9); border-top-color: var(--zn-accent, #7CB97F); }
.zn-type-fee          { background: #FDE7EF; border-top-color: #E27396; background: var(--zn-bg, #FDE7EF); border-top-color: var(--zn-accent, #E27396); }
.zn-type-registration { background: #EDE7F6; border-top-color: #9575CD; background: var(--zn-bg, #EDE7F6); border-top-color: var(--zn-accent, #9575CD); }
.zn-type-calendar     { background: #FFF3E0; border-top-color: #F0A35E; background: var(--zn-bg, #FFF3E0); border-top-color: var(--zn-accent, #F0A35E); }
.zn-type-general      { background: #FFF9E6; border-top-color: #E0C060; background: var(--zn-bg, #FFF9E6); border-top-color: var(--zn-accent, #E0C060); }

/* ---------- 4. clamp() fallback ----------
   Old browsers that cannot parse clamp() keep the 14px declared
   BEFORE the clamp() line (CSS forward-parses per-declaration). */
body { font-size: 14px; font-size: clamp(0.875rem, 1.5vw + 0.5rem, 1rem); }

/* ---------- 5. IE8-only guards (star hack + \9 - modern browsers never parse) ---------- */
.zn-card { box-shadow: none \9; border: 1px solid #d9cfb6 \9; }
.zn-action,
.zn-chip,
.zn-retry-btn,
.zn-loadmore-btn { display: inline-block \9; *display: inline; zoom: 1; }

/* ---------- 6. sticky fallback ONLY for browsers without position:sticky ---------- */
@supports not ((position: -webkit-sticky) or (position: sticky)) {
    #page-bgbtm > #sidebar > form { position: static; }
}

/* ---------- 7. -webkit- prefixes for iOS 9 / old Chrome/Safari ---------- */
.zn-skel-line {
    -webkit-background-size: 200% 100%;
    background-size: 200% 100%;
}
.zn-drawer {
    -webkit-transform: translateX(105%);
    -webkit-transition: -webkit-transform .26s ease;
}
.zn-drawer.open { -webkit-transform: translateX(0); }
.zn-drawer-backdrop { -webkit-transition: opacity .22s ease; }

/* ---------- 8. SVG icons in IE6-8 (star hack: hidden there only) ---------- */
.zn-action svg, .zn-state svg, .zn-pw-toggle svg, .znf-ico { *display: none; }