/* ==========================================================================
   ZS GLOBAL EMPLOYEE PORTAL - MAIN STYLESHEET & THEME SYSTEM
   ========================================================================== */

/* Native cross-document view transitions (Chrome/Edge 126+): the outgoing
   page's last frame stays visible and cross-fades into the new page instead
   of the browser showing a blank white screen while it navigates. Ignored
   harmlessly by browsers that don't support it yet. */
@view-transition {
    navigation: auto;
}

:root {
    --zs-navy: #0b1a30;
    --zs-navy-light: #152945;
    --zs-navy-dark: #060e1a;
    --zs-blue: #0066cc;
    --zs-blue-hover: #0052a3;
    --zs-teal: #003da1;
    --zs-teal-hover: #002b73;
    --zs-green-light: #e6f7f3;
    --zs-bg: #f4f6fa;
    --zs-card-bg: #ffffff;
    --zs-border: #e2e8f0;
    --zs-text: #1e293b;
    --zs-text-light: #64748b;
    --zs-text-muted: #94a3b8;
    --zs-shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --zs-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --zs-shadow-lg: 0 10px 25px rgba(0,0,0,0.12);
    --zs-radius-sm: 6px;
    --zs-radius-md: 10px;
    --zs-radius-lg: 16px;
    --zs-radius-full: 9999px;
    --zs-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Theme Overrides */
[data-theme="dark"] {
    --zs-dark: #000000;
    --zs-navy: #091322;
    --zs-navy-light: #122036;
    --zs-navy-dark: #040912;
    --zs-bg: #0b1320;
    --zs-card-bg: #131f33;
    --zs-border: #1e2d45;
    --zs-text: #f1f5f9;
    --zs-text-light: #94a3b8;
    --zs-text-muted: #64748b;
    --zs-green-light: rgba(0, 168, 132, 0.15);
    --zs-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --zs-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --zs-shadow-lg: 0 10px 25px rgba(0,0,0,0.5);

    /* --zs-blue is used for plain text links/accents (e.g. the "Back to
       Dashboard" links) with no background behind it, so it needs to stay
       legible against the dark theme's near-black page — use the brand's
       original green here instead of a blue, since blue-on-near-black read
       as washed out. --zs-teal is intentionally left as-is (#003da1) in
       dark mode too: it's mostly used for icon-wrapper fills/borders that
       already sit on their own tinted background box, so it doesn't need a
       separate dark-mode shade. */
    --zs-blue: #00a884;
    --zs-blue-hover: #00c79c;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Preserve native modal centering after the universal margin reset. */
dialog {
    margin: auto;
}

dialog:modal {
    position: fixed;
    inset: 0;
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    overflow: auto;
}

html {
    max-width: 100%;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    background-color: var(--zs-bg);
    color: var(--zs-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
    max-width: 100%;
    overflow-x: hidden; /* safety net so a stray wide element can't create page-level horizontal scroll */
}

/* Headings site-wide were set to bold (700-900) through ~30 separate
   inline style="font-weight:800" attributes plus a dozen more class-based
   rules scattered across the main stylesheet and several pages' own
   <style> blocks (brand-central, hr-central, m365, files). Rather than
   hunt down and edit every one of those individually, this single rule
   targets the heading tags themselves and uses !important so it wins over
   all of them (inline attributes included - a stylesheet's !important
   beats a plain inline style) without touching that scattered markup. */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400 !important;
}

/* ==========================================================================
   USER-PROVIDED THEME TOGGLE (DARK/LIGHT WITH LOCALSTORAGE)
   ========================================================================== */

.toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    line-height: 1;
    transition: var(--zs-transition);
}

.toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}

.input {
    display: none;
}

.icon {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    transition: transform 500ms;
    line-height: 0.1;
}

.icon--moon {
    transition-delay: 200ms;
    color: #b4b4b4;
}

.icon--sun {
    transform: scale(0);
    color: #ffa500;
}

#switch:checked + .icon--moon {
    transform: rotate(360deg) scale(0);
}

#switch:checked ~ .icon--sun {
    transition-delay: 200ms;
    transform: scale(1) rotate(360deg);
}

/* ==========================================================================
   1. LOGIN PAGE STYLES
   ========================================================================== */

.login-body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fixed blue, not var(--zs-blue) — that variable turns green in dark
       mode (needed elsewhere for plain-text contrast), which was leaking
       into this decorative background and turning it green too. This
       gradient should always stay navy-to-blue regardless of theme. */
    background: linear-gradient(135deg, var(--zs-navy-dark), var(--zs-navy), #0066cc);
    padding: 16px;
}

.login-card {
    background: var(--zs-card-bg);
    border-radius: var(--zs-radius-lg);
    padding: 44px 36px;
    text-align: center;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    border: 1px solid var(--zs-border);
}

.login-logo {
    height: 60px;
    margin-bottom: 16px;
}

.login-card h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--zs-navy);
    margin-bottom: 4px;
}

[data-theme="dark"] .login-card h1 { color: #ffffff; }

/* Navy/teal text has no readable background of its own in a handful of
   spots (Featured Resources links, badges, profile/HR labels, etc.) — it
   reads fine on the light theme's white cards but goes near-invisible on
   dark theme's near-black cards. Switch those specific spots to white
   automatically in dark mode; --zs-teal itself stays navy everywhere else
   (icon-wrapper fills, buttons with their own solid background) per the
   earlier color request. */
[data-theme="dark"] .featured-resources-list a,
[data-theme="dark"] .sidebar-list a,
[data-theme="dark"] .employee-modal-role,
[data-theme="dark"] .user-title,
[data-theme="dark"] .dept-badge,
[data-theme="dark"] .feed-tag-pill,
[data-theme="dark"] [style*="color:var(--zs-teal)"] {
    color: #ffffff;
}

[data-theme="dark"] .featured-resources-list a:hover,
[data-theme="dark"] .sidebar-list a:hover {
    color: #cbd5e1;
}

.login-sub {
    color: var(--zs-text-light);
    font-size: 20px;
    margin-bottom: 28px;
}

.ms-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #8a8886;
    color: #323130;
    padding: 10px 15px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: var(--zs-transition);
}

.ms-login-btn:hover {
    background: #f3f2f1;
    border-color: #323130;
}

.ms-login-btn img {
    width: 20px;
    height: 20px;
}

.login-footnote {
    font-size: 12px;
    color: var(--zs-text-muted);
    margin-top: 24px;
}

/* ==========================================================================
   2. TOPBAR NAVIGATION (HEADER) & MOBILE DRAWER
   ========================================================================== */

.topbar {
    background: var(--zs-navy);
    color: #ffffff;
    height: 64px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Keeps the navy bar full-bleed while aligning its content to the same
   1280px column as the rest of the portal (.portal-container/.portal-main),
   so the header doesn't stretch wider than the page content on zoomed-out /
   wide viewports. */
.topbar-inner {
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.topbar-left {
    display: flex;
    align-items: center;
    min-width: 0;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #ffffff;
}

.topbar-logo {
    /* width: 38px; */
    height: 38px;
    border-radius: 8px;
}

.topbar-page-title {
    max-width: min(40vw, 430px);
    margin-left: 14px;
    overflow: hidden;
    color: #ffffff;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-title,
.topbar-brand::after {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.topbar-title-light {
    font-weight: 300;
    opacity: 0.8;
}

.portal-brand-subline {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 24px 4px;
}

.portal-brand-subline-text {
    color: var(--zs-text);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.create-post-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--zs-text);
    margin-bottom: 12px;
}

.create-post-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.create-post-control {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--zs-border);
    margin-bottom: 12px;
}

.create-post-content {
    margin-bottom: 16px;
}

.create-post-submit {
    width: 100%;
    background: var(--zs-teal);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
}

.topbar-search {
    /* Centered on the header itself (not just balanced between the logo and
       icon cluster), so it stays visually centered in the browser window
       regardless of how wide those two side groups are. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    display: flex;
    align-items: center;
}

.topbar-search input {
    width: 100%;
    height: 40px;
    padding: 0 44px 0 16px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    color: #0f172a;
    outline: none;
    transition: var(--zs-transition);
}

.topbar-search input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.3);
}

.topbar-search button {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-popover-wrapper {
    position: relative;
}

.topbar-icon-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    transition: var(--zs-transition);
}

.topbar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.topbar-icon-btn .badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--zs-blue);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 10px;
    border: 2px solid var(--zs-navy);
}

.user-avatar-circle {
    width: 32px;
    height: 32px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zs-teal), var(--zs-blue));
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #ffffff;
    object-fit: cover; /* no-op on <div>, keeps <img class="user-avatar-circle"> cropped neatly */
}

.user-avatar-circle.large {
    width: 48px;
    height: 48px;
    aspect-ratio: 1 / 1;
    font-size: 18px;
}

/* ============ Profile Photo — Change Photo control ============ */
.profile-avatar-edit {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
}

.profile-avatar-edit-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--zs-teal);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--zs-card-bg);
    transition: var(--zs-transition);
}

.profile-avatar-edit:hover .profile-avatar-edit-badge { background: var(--zs-blue); }

.profile-photo-sync-note {
    font-size: 11.5px;
    color: var(--zs-text-light);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ============ Reusable responsive grid utilities ============ */
.grid-2fr-1fr {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.grid-2col-equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.profile-panels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 700px) {
    .grid-2fr-1fr { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .profile-panels-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .grid-2col-equal { grid-template-columns: 1fr; }
}

.mobile-menu-btn {
    display: none;
}

/* Mobile Hamburger Drawer */
.mobile-drawer {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--zs-navy);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    z-index: 99;
    border-bottom: 2px solid var(--zs-teal);
    padding: 16px;
    animation: fadeIn 0.2s ease;
}

.mobile-drawer.active {
    display: block;
}

.mobile-drawer-search {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.mobile-drawer-search input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    outline: none;
}

.mobile-drawer-search button {
    background: var(--zs-teal);
    color: #fff;
    border: none;
    padding: 0 16px;
    border-radius: 6px;
    cursor: pointer;
}

.mobile-drawer-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-drawer-btn, .mobile-drawer-link {
    display: block;
    width: 100%;
    text-align: left;
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: var(--zs-transition);
}

.mobile-drawer-btn:hover, .mobile-drawer-link:hover {
    background: rgba(255,255,255,0.2);
}

.mobile-drawer-link.logout {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.15);
}

/* Header Dropdowns */
.topbar-dropdown-panel {
    position: absolute;
    top: 48px;
    right: 0;
    width: 280px;
    background: var(--zs-card-bg);
    color: var(--zs-text);
    border-radius: var(--zs-radius-md);
    box-shadow: var(--zs-shadow-lg);
    border: 1px solid var(--zs-border);
    padding: 16px;
    display: none;
    z-index: 150;
}

.topbar-dropdown-panel.active {
    display: block;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-header {
    font-weight: 700;
    font-size: 14px;
    color: var(--zs-text);
    margin-bottom: 10px;
}

.dropdown-list {
    list-style: none;
}

.dropdown-list li {
    font-size: 12.5px;
    color: var(--zs-text-light);
    padding: 8px 0;
    border-bottom: 1px solid var(--zs-border);
}

.dropdown-list li:last-child { border-bottom: none; }

.dropdown-list a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.dropdown-list a:hover { color: var(--zs-text); }

.dropdown-list-time {
    display: block;
    font-size: 11px;
    color: var(--zs-text-muted);
    margin-top: 2px;
}

.dropdown-empty {
    font-size: 12.5px;
    color: var(--zs-text-light);
    padding: 12px 0;
    text-align: center;
}

.user-profile-panel {
    width: 260px;
}

.user-profile-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-name { font-weight: 800; color: var(--zs-text); font-size: 14px; }
.user-email { font-size: 12px; color: var(--zs-text-light); word-break: break-all; }
.user-title { font-size: 11px; color: var(--zs-teal); font-weight: 700; margin-top: 2px; }

.dropdown-divider {
    border: none;
    border-top: 1px solid var(--zs-border);
    margin: 12px 0;
}

.dropdown-link {
    display: block;
    font-size: 13px;
    color: var(--zs-blue);
    text-decoration: none;
    padding: 4px 0;
    font-weight: 600;
}

.dropdown-link.logout { color: #dc2626; }

/* ==========================================================================
   2b. TOAST NOTIFICATIONS
   Replaces the old inline "banner of text on the page" flash messages for
   actions like saving a profile photo, changing a password, or submitting a
   request — those now pop up here instead.
   ========================================================================== */

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
    box-shadow: var(--zs-shadow-lg);
    cursor: pointer;
    pointer-events: auto;
    animation: toastSlideIn 0.35s ease forwards;
}

.toast.toast-out {
    animation: toastSlideOut 0.3s ease forwards;
}

.toast-success { background: #15803d; }
.toast-error { background: #dc2626; }

.toast-icon { flex-shrink: 0; margin-top: 1px; }
.toast-text { flex: 1; }

.toast-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    padding: 0;
    margin-left: 2px;
    flex-shrink: 0;
}
.toast-close:hover { color: #ffffff; }

@keyframes toastSlideIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toastSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(120%); opacity: 0; }
}

@media (max-width: 480px) {
    .toast-container {
        left: 12px;
        right: 12px;
        top: 12px;
        max-width: none;
    }
}

/* ==========================================================================
   3. PORTAL MAIN CONTAINER & SECTION 1 QUICK LINKS
   ========================================================================== */

.portal-container, .portal-main {
    max-width: 1280px;
    margin: 0 auto;
    /* Horizontal padding matches .topbar-inner/.brandbar-inner (24px) so the
       page content's left/right edges line up exactly with where the logo
       starts and the header icons end, at every screen width. */
    padding: 24px 24px;
}

/* ==========================================================================
   Photo hero — full-bleed background photo, greeting, search, and a
   floating announcement card. Fixed-dark like the topbar (not theme-driven)
   since it's meant to read as a photographic banner in both site themes.
   ========================================================================== */

.dashboard-photo-hero {
    position: relative;
    border-radius: var(--zs-radius-lg);
    padding: 40px 32px;
    margin-bottom: 20px;
    min-height: 300px;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: var(--zs-shadow-md);
}

.dashboard-photo-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
    z-index: 0;
}

.dashboard-photo-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(3, 12, 36, 0.92) 0%, rgba(4, 24, 74, 0.8) 40%, rgba(4, 24, 74, 0.35) 75%);
    z-index: 1;
}

.dashboard-photo-hero-content {
    position: relative;
    z-index: 2;
    max-width: 480px;
}

.dashboard-hero-greeting {
    font-size: 32px;
    color: #ffffff;
    margin-bottom: 6px;
}

.dashboard-hero-subtext {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 22px;
}

.dashboard-hero-search {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 380px;
}

.dashboard-hero-search input {
    width: 100%;
    height: 46px;
    padding: 0 46px 0 16px;
    background: rgba(255, 255, 255, 0.96);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    color: #0f172a;
    outline: none;
}

.dashboard-hero-search input:focus {
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.35);
}

.dashboard-hero-search button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
}

.dashboard-hero-announcement {
    position: relative;
    z-index: 2;
    display: block;
    text-decoration: none;
    background: linear-gradient(135deg, #0f766e 0%, #155e94 100%);
    border-radius: 14px;
    padding: 22px;
    width: 280px;
    margin-left: auto;
    flex-shrink: 0;
    box-shadow: var(--zs-shadow-lg);
    transition: var(--zs-transition);
}

.dashboard-hero-announcement:hover {
    transform: translateY(-3px);
}

.dashboard-hero-announcement-label {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 8px;
}

.dashboard-hero-announcement h3 {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 8px;
}

.dashboard-hero-announcement p {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin-bottom: 12px;
}

.dashboard-hero-announcement-link {
    font-size: 12.5px;
    font-weight: 700;
    color: #ffffff;
}

/* Campaign tile row — quick visual jumps into a few key areas, sitting
   between the photo hero and the Quick Links band. */
.dashboard-campaign-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.campaign-tile {
    position: relative;
    display: block;
    height: 150px;
    border-radius: 14px;
    background-size: cover;
    /* These banners carry their own headline text on the left side of a
       wide image — anchoring left keeps that text in frame instead of
       cropping into it. */
    background-position: left center;
    background-color: #0b1320;
    overflow: hidden;
    text-decoration: none;
    transition: var(--zs-transition);
}

.campaign-tile:hover {
    transform: translateY(-3px);
}

.campaign-tile-readmore {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(3, 12, 36, 0.72);
    color: #ffffff;
    font-size: 11.5px;
}

/* Hero band: navy gradient with the Quick Links pill grid. This background
   is intentionally fixed-dark in both site themes (like the topbar) rather
   than following --zs-card-bg, since it's meant to read as a colorful
   accent band, not a regular card. */
.dashboard-hero-band {
    position: relative;
    background: linear-gradient(135deg, #04184a 0%, #0a2a6b 45%, #062050 100%);
    border-radius: var(--zs-radius-lg);
    padding: 28px;
    margin-bottom: 32px;
    box-shadow: var(--zs-shadow-md);
    overflow: hidden;
}

.dashboard-hero-band-compact {
    padding: 20px 28px;
}

.quick-links-header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.quick-links-header h2 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.quick-links-toggle-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-links-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.quick-link-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    text-align: left;
    text-decoration: none;
    color: #f1f5f9;
    transition: var(--zs-transition);
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.quick-link-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
}

.quick-link-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-link-icon-wrapper svg {
    width: 18px;
    height: 18px;
}

.quick-link-icon-teal   { background: rgba(45, 212, 191, 0.18); color: #5eead4; }
.quick-link-icon-sky    { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
.quick-link-icon-amber  { background: rgba(251, 191, 36, 0.18); color: #fcd34d; }
.quick-link-icon-violet { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; }
.quick-link-icon-rose   { background: rgba(244, 114, 182, 0.18); color: #f9a8d4; }

.quick-link-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: #f1f5f9;
    max-width: none;
    word-break: break-word;
}

.quick-links-grid .quick-link-hidden-by-collapse {
    display: none;
}

/* ==========================================================================
   4. FEATURED SECTION (SINGLE GRAPHIC HERO CARD)
   ========================================================================== */

.featured-section {
    margin-bottom: 40px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.section-header-text h2 {
    font-size: 26px;
    font-weight: 800;
    color: var(--zs-text);
}

.section-header-text p {
    font-size: 14px;
    color: var(--zs-text-light);
    margin-top: 4px;
}

.view-all-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    background: var(--zs-card-bg);
    border: 1px solid var(--zs-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--zs-text);
    text-decoration: none;
}

.featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.featured-hero-card {
    background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 50%, #1e4d3b 100%);
    border-radius: var(--zs-radius-lg);
    padding: 0;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    box-shadow: var(--zs-shadow-md);
}

.featured-hero-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    z-index: 2;
}

.featured-hero-illustration {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.featured-hero-illustration img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.featured-hero-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.featured-hero-caption span {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

/* Featured Feed Cards */
.featured-posts-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feed-card {
    background: var(--zs-card-bg);
    border-radius: var(--zs-radius-lg);
    border: 1px solid var(--zs-border);
    padding: 20px;
    box-shadow: var(--zs-shadow-sm);
}

.feed-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.author-name { font-weight: 700; color: var(--zs-text); }
.post-time { color: var(--zs-text-muted); }

.feed-card-body-wrapper {
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.feed-card-content { flex: 1; }

.feed-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--zs-text);
    margin-bottom: 6px;
    line-height: 1.35;
}

.feed-card-excerpt {
    font-size: 13.5px;
    color: var(--zs-text-light);
    margin-bottom: 12px;
    line-height: 1.45;
}

.feed-tag-pill {
    display: inline-block;
    background: var(--zs-green-light);
    color: var(--zs-teal);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

.feed-card-thumbnail {
    width: 220px;
    height: 160px;
    border-radius: var(--zs-radius-md);
    background: linear-gradient(135deg, #0f172a, #1e293b);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.feed-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feed-card-thumbnail .thumb-tag {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.feed-card-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--zs-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--zs-text-light);
}

.reactions-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
}

.reactions-emojis span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-right: -4px;
    border: 1.5px solid var(--zs-card-bg);
}

.feed-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.action-btn {
    background: transparent;
    border: none;
    color: var(--zs-text-light);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 4px;
}

/* ==========================================================================
   5. BRAND CENTRAL SECTION STYLES (FULL & STUNNING STYLING)
   ========================================================================== */

.brand-section-wrapper {
    margin-top: 48px;
    border-top: 2px solid var(--zs-border);
    padding-top: 32px;
}

.brandbar, .brand-sub-header {
    background: var(--zs-navy);
    color: #ffffff;
    /* Matches .topbar's height exactly so every nav bar in the portal —
       main header or a page's own local sub-nav — is visually identical. */
    height: 64px;
}

/* Full-bleed navy bar, content column aligned to the same 1280px width as
   .portal-container/.portal-main so the header doesn't stretch wider than
   the page content on zoomed-out / wide viewports. Three-column grid (logo
   | nav | search) so the nav links can sit truly centered in the bar
   regardless of how wide the logo or search side happen to be. */
.brandbar-inner {
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 20px;
}

.brandbar-left, .brand-sub-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.brandbar-logo-link, .brand-logo-text {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
}

.brandbar-logo {
    /* Matches .topbar-logo exactly so the logo renders at the same size,
       undistorted, on Brand Central as on every other page. */
    height: 38px;
    border-radius: 8px;
}

.brandbar-nav, .brand-nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    list-style: none;
    flex-wrap: wrap;
}

.brandbar-nav-link, .brand-nav-links a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.brandbar-nav-link:hover, .brand-nav-links a:hover { color: #ffffff; }

.brandbar-dropdown {
    position: relative;
}

.brandbar-dropdown-menu {
    position: absolute;
    top: 36px;
    left: 0;
    background: var(--zs-card-bg);
    border-radius: 8px;
    box-shadow: var(--zs-shadow-lg);
    width: 190px;
    padding: 8px 0;
    display: none;
    z-index: 120;
    border: 1px solid var(--zs-border);
}

.brandbar-dropdown-menu.active { display: block; }

.brandbar-dropdown-menu a {
    display: block;
    padding: 8px 16px;
    color: var(--zs-text);
    text-decoration: none;
    font-size: 13px;
}

.brandbar-dropdown-menu a:hover {
    background: var(--zs-bg);
    color: var(--zs-blue);
}

.brandbar-search, .brand-search-box {
    position: relative;
}

.brandbar-search input, .brand-search-box input {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 20px;
    padding: 6px 14px 6px 36px;
    color: #ffffff;
    font-size: 13px;
    outline: none;
    width: 180px;
}

.brandbar-search button, .brand-search-box svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
}

/* Brand Main Layout 2-Columns */
.brand-main-layout, .portal-columns {
    display: flex;
    gap: 32px;
    background: var(--zs-card-bg);
    border: 1px solid var(--zs-border);
    border-top: none;
    border-radius: 0 0 var(--zs-radius-lg) var(--zs-radius-lg);
    padding: 32px;
}

.brand-left-column, .portal-col-main {
    flex: 1;
    min-width: 0;
}

.brand-welcome-header h1, .brand-welcome h1 {
    font-size: 30px;
    font-weight: 800;
    color: var(--zs-text);
    margin-bottom: 6px;
}

.brand-welcome-header p, .brand-welcome-sub {
    font-size: 15px;
    color: var(--zs-text-light);
    margin-bottom: 24px;
}

/* Banner Carousel Slider
   The slide images are all 1262x472 (ratio ~2.674), so the container uses
   that exact aspect-ratio instead of a fixed pixel height. That guarantees
   every image fills the box completely with zero cropping and zero
   letterbox gap at any screen width, since background-size:cover only ever
   crops when the box ratio doesn't match the image ratio. */
.brand-carousel-container, .hero-carousel.brand-hero {
    position: relative;
    border-radius: var(--zs-radius-lg);
    overflow: hidden;
    background: #1e293b;
    box-shadow: var(--zs-shadow-md);
    margin-bottom: 16px;
    aspect-ratio: 1262 / 472;
    height: auto;
}

.brand-carousel-slides {
    display: flex;
    align-items: stretch;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.brand-slide, .hero-slide.brand-hero-slide {
    min-width: 100%;
    height: 100%;
    background-color: #0f172a;
    background-image: radial-gradient(circle at center, #334155 0%, #0f172a 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #ffffff;
    text-align: center;
}

.slide-content-overlay, .brand-hero-text {
    text-align: center;
    z-index: 2;
}

.slide-headline, .brand-hero-text h1 {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 8px;
}

.slide-subtext, .brand-hero-text p {
    font-size: 15px;
    color: #cbd5e1;
    max-width: 540px;
    margin: 0 auto;
}

.carousel-arrow, .hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #ffffff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    z-index: 10;
}

.carousel-prev, .hero-prev { left: 16px; }
.carousel-next, .hero-next { right: 16px; }

.carousel-dots, .hero-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.carousel-dot, .hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
}

.carousel-dot.active, .hero-dot.active {
    background: #ffffff;
    width: 24px;
    border-radius: 12px;
}

.carousel-caption, .brand-hero-caption {
    font-size: 13px;
    color: var(--zs-text-light);
    margin-top: 8px;
    margin-bottom: 32px;
}

/* What Is Brand & Mind Map / Wheel Graphic */
.what-is-brand-section, .brand-what-is {
    margin-top: 32px;
}

.section-title-row h2, .brand-what-is h2 {
    font-size: 26px;
    font-weight: 800;
    color: var(--zs-text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.copy-link-btn, .brand-anchor-link {
    background: transparent;
    border: none;
    color: var(--zs-text-light);
    cursor: pointer;
}

.brand-desc-paragraph, .brand-what-is p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--zs-text-light);
    margin-bottom: 36px;
}

.brand-what-is-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--zs-radius-lg);
    box-shadow: var(--zs-shadow-sm);
    margin-bottom: 32px;
}

/* Mind Map Container & Wheel Graphic */
.mindmap-container, .brand-wheel {
    position: relative;
    width: 100%;
    max-width: 720px;
    min-height: 460px;
    margin: 0 auto 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mindmap-center-bubble, .brand-wheel-center {
    width: 160px;
    height: 105px;
    background: var(--zs-card-bg);
    border: 3px solid var(--zs-teal);
    border-radius: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 168, 132, 0.25);
    z-index: 5;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mindmap-center-bubble .tag-our, .brand-wheel-center span:first-child {
    font-size: 24px; font-weight: 900; color: var(--zs-blue); line-height: 1;
}

.mindmap-center-bubble .tag-brand, .brand-wheel-center span:last-child {
    font-size: 26px; font-weight: 900; color: var(--zs-teal); line-height: 1;
}

.mindmap-node, .brand-wheel-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: var(--zs-transition);
    z-index: 6;
}

.mindmap-node:hover, .brand-wheel-item:hover { transform: scale(1.08); }

.mindmap-node-icon, .brand-wheel-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--zs-card-bg);
    border: 2px solid var(--zs-teal);
    color: var(--zs-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--zs-shadow-sm);
    margin-bottom: 6px;
    font-size: 18px;
}

.mindmap-node-label, .brand-wheel-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--zs-text);
    white-space: nowrap;
}

/* 9 Radial Positions */
.node-who-we-are, .wheel-pos-1     { top: 20px; left: 140px; }
.node-how-we-appear, .wheel-pos-2  { top: 10px; left: 320px; }
.node-what-we-say, .wheel-pos-3    { top: 70px; right: 100px; }
.node-how-we-say-it, .wheel-pos-4  { top: 200px; right: 40px; }
.node-what-we-do, .wheel-pos-5     { bottom: 40px; right: 110px; }
.node-how-we-do-it, .wheel-pos-6   { bottom: 10px; left: 310px; }
.node-think-about-us, .wheel-pos-7 { bottom: 30px; left: 140px; }
.node-feel-about-us, .wheel-pos-8  { top: 240px; left: 20px; }
.node-what-we-sell, .wheel-pos-9   { top: 100px; left: 40px; }

.mindmap-svg-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* Right Sidebar (Images 2 & 3) */
.brand-sidebar, .portal-sidebar {
    width: 320px;
    flex-shrink: 0;
}

.sidebar-block-title, .portal-sidebar h3 {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--zs-text);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.featured-resources-list, .sidebar-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.featured-resources-list a, .sidebar-list a {
    color: var(--zs-teal);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: var(--zs-transition);
}

.featured-resources-list a:hover, .sidebar-list a:hover {
    color: var(--zs-teal-hover);
    transform: translateX(4px);
}

.sidebar-divider {
    border: none;
    border-top: 1px solid var(--zs-border);
    margin: 16px 0;
}

.grab-go-card {
    background: var(--zs-bg);
    border: 1px solid var(--zs-border);
    border-radius: var(--zs-radius-md);
    overflow: hidden;
    margin-bottom: 16px;
}

.grab-go-img {
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, #0b1a30, #152945);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.grab-go-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grab-go-content { padding: 14px; }
.grab-go-content strong { display: block; font-size: 14px; color: var(--zs-text); margin-bottom: 4px; }
.grab-go-content p { font-size: 12.5px; color: var(--zs-text-light); }

.new-employees-box, .sidebar-card {
    background: var(--zs-bg);
    border-radius: var(--zs-radius-md);
    padding: 16px;
    border-left: 4px solid var(--zs-teal);
    border: 1px solid var(--zs-border);
    border-left-width: 4px;
}

.sidebar-card-alt {
    background: var(--zs-teal);
    color: #ffffff;
    border: none;
}

.sidebar-card-alt p { color: #e6f7f3; }

/* ==========================================================================
   6. FLOATING FAB & MODALS
   ========================================================================== */

.floating-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--zs-navy);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(11, 26, 48, 0.4);
    z-index: 90;
}

.scroll-top-fab {
    position: fixed;
    bottom: 85px;
    right: 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--zs-card-bg);
    color: var(--zs-text);
    border: 1px solid var(--zs-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: var(--zs-transition);
}

.scroll-top-fab.visible { opacity: 1; pointer-events: auto; }

.node-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: var(--zs-transition);
}

.node-modal-backdrop.active { opacity: 1; pointer-events: auto; }

.node-modal-card {
    background: var(--zs-card-bg);
    border-radius: var(--zs-radius-lg);
    width: 90%;
    max-width: 460px;
    padding: 28px;
    position: relative;
    border: 1px solid var(--zs-border);
}

.node-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--zs-text-muted);
}

/* ==========================================================================
   7. FULL RESPONSIVENESS DOWN TO 350PX SCREEN SIZE
   ========================================================================== */

@media (max-width: 1024px) {
    .featured-grid, .brand-main-layout, .portal-columns {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
    .brand-sidebar, .portal-sidebar {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-menu-btn { display: flex !important; }

    .mindmap-container, .brand-wheel {
        transform: scale(0.85);
        height: 380px;
    }
    .dashboard-photo-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
    }
    .dashboard-hero-announcement {
        margin-left: 0;
        margin-top: 24px;
        width: 100%;
    }
    .dashboard-campaign-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Small Screens down to 350px width */
@media (max-width: 500px) {
    .topbar-inner {
        padding: 0 12px;
    }
    .portal-brand-subline {
        padding: 6px 12px 0;
    }
    .topbar-page-title {
        max-width: calc(100vw - 220px);
        margin-left: 8px;
        font-size: 13px;
    }
    /* Keep the content column's left/right edges matching the header's
       12px padding at this breakpoint too (the 480px rule below only
       adjusts it 20px later, which briefly threw the two out of sync). */
    .portal-container, .portal-main {
        padding-left: 12px;
        padding-right: 12px;
    }
    .topbar-title-light {
        display: none;
    }
    .dashboard-hero-band {
        padding: 18px;
    }
    .dashboard-hero-greeting {
        font-size: 24px;
    }
    .dashboard-campaign-row {
        grid-template-columns: 1fr;
    }
    .feed-card-body-wrapper {
        flex-direction: column;
    }
    .feed-card-thumbnail {
        width: 100%;
        height: 200px;
    }
    .mindmap-container, .brand-wheel {
        transform: scale(0.65);
        height: 300px;
    }
    .brand-hero-text h1 {
        font-size: 22px;
    }
}

/* Narrow phones (down to 350px) — the tier this whole section targets */
@media (max-width: 480px) {
    .portal-container, .portal-main {
        padding: 16px 12px;
    }

    /* Brand Central's own layout box + its header bar */
    .brand-main-layout, .portal-columns {
        padding: 16px;
        gap: 20px;
    }
    .brandbar-inner, .brand-sub-header {
        padding: 0 12px;
    }

    /* Hero carousel: smaller type/padding so slides never need to scroll.
       Height is left alone here — JS resizes .brand-carousel-container to
       match each slide's real image ratio at any viewport width. */
    .brand-slide, .hero-slide.brand-hero-slide {
        padding: 20px;
    }
    .slide-headline, .brand-hero-text h1 {
        font-size: 17px;
    }
    .slide-subtext, .brand-hero-text p {
        font-size: 12.5px;
    }
    .carousel-arrow, .hero-arrow {
        width: 34px;
        height: 34px;
    }

    /* "What Is Brand?" mind map: the radial layout only really works with
       room to breathe, so below 480px it becomes a plain 2-column list —
       same click targets, same modal, guaranteed to never overlap/overflow. */
    .mindmap-svg-lines,
    .mindmap-center-bubble,
    .brand-wheel-center {
        display: none;
    }
    .mindmap-container, .brand-wheel {
        transform: none;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
        margin: 0 0 24px;
    }
    .mindmap-node, .brand-wheel-item {
        position: static;
        margin: 0;
    }
    .mindmap-node-label, .brand-wheel-label {
        white-space: normal;
        font-size: 11.5px;
    }

    /* Modal cards */
    .node-modal-card {
        width: 92%;
        padding: 18px;
    }

    /* Microsoft Apps Hub header */
    .ms-hub-header {
        padding: 20px;
    }
    .ms-hub-header p {
        font-size: 12.5px;
    }

    /* A lot of pages wrap their content in a card with a hard-coded inline
       padding — shrink the most common ones so there's usable width left
       for buttons/tables/forms at very small screen sizes. */
    [style*="padding:32px"],
    [style*="padding: 32px"] {
        padding: 16px !important;
    }
    [style*="padding:48px"],
    [style*="padding: 48px"] {
        padding: 20px !important;
    }
    [style*="padding:40px"],
    [style*="padding: 40px"] {
        padding: 20px !important;
    }

    /* Card/tile grids built with an inline auto-fill/auto-fit minmax() track
       can't shrink below their minmax minimum — force a single column once
       the viewport is too narrow for even one full-size track. */
    [style*="grid-template-columns:repeat(auto-fill"],
    [style*="grid-template-columns:repeat(auto-fit"],
    [style*="grid-template-columns: repeat(auto-fill"],
    [style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============ Page Loader ============ */
#page-loader{
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    transition: opacity .5s ease, visibility .5s ease;
}
[data-theme="dark"] #page-loader {
    background-color: #000;
}
#page-loader.hide{
    opacity: 0;
    visibility: hidden;
}
.loadingspinner {
  --square: 26px;
  --offset: 30px;
  --duration: 2.4s;
  --delay: 0.2s;
  --timing-function: ease-in-out;
  --in-duration: 0.4s;
  --in-delay: 0.1s;
  --in-timing-function: ease-out;
  width: calc( 3 * var(--offset) + var(--square));
  height: calc( 2 * var(--offset) + var(--square));
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 30px;
  position: relative;
}

.loadingspinner div {
  display: inline-block;
  background: linear-gradient(135deg, #00AEEF 0%, #7ED957 100%);
  border: none;
  border-radius: 2px;
  width: var(--square);
  height: var(--square);
  position: absolute;
  padding: 0px;
  margin: 0px;
  font-size: 6pt;
  color: black;
}

.loadingspinner #square1 {
  left: calc( 0 * var(--offset) );
  top: calc( 0 * var(--offset) );
  animation: square1 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}

.loadingspinner #square2 {
  left: calc( 0 * var(--offset) );
  top: calc( 1 * var(--offset) );
  animation: square2 var(--duration) var(--delay) var(--timing-function) infinite,
              squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}

.loadingspinner #square3 {
  left: calc( 1 * var(--offset) );
  top: calc( 1 * var(--offset) );
  animation: square3 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both;
}

.loadingspinner #square4 {
  left: calc( 2 * var(--offset) );
  top: calc( 1 * var(--offset) );
  animation: square4 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both;
}

.loadingspinner #square5 {
  left: calc( 3 * var(--offset) );
  top: calc( 1 * var(--offset) );
  animation: square5 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both;
}

@keyframes square1 {
  0% {
    left: calc( 0 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

  8.333% {
    left: calc( 0 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  100% {
    left: calc( 0 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }
}

@keyframes square2 {
  0% {
    left: calc( 0 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  8.333% {
    left: calc( 0 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

  16.67% {
    left: calc( 1 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

  25.00% {
    left: calc( 1 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  83.33% {
    left: calc( 1 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  91.67% {
    left: calc( 1 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

  100% {
    left: calc( 0 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }
}

@keyframes square3 {
  0%,100% {
    left: calc( 1 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  16.67% {
    left: calc( 1 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  25.00% {
    left: calc( 1 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

  33.33% {
    left: calc( 2 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

  41.67% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  66.67% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  75.00% {
    left: calc( 2 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

  83.33% {
    left: calc( 1 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

  91.67% {
    left: calc( 1 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }
}

@keyframes square4 {
  0% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  33.33% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  41.67% {
    left: calc( 2 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

  50.00% {
    left: calc( 3 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

  58.33% {
    left: calc( 3 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  100% {
    left: calc( 3 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }
}

@keyframes square5 {
  0% {
    left: calc( 3 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  50.00% {
    left: calc( 3 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  58.33% {
    left: calc( 3 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

  66.67% {
    left: calc( 2 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

  75.00% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  100% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }
}

@keyframes squarefadein {
  0% {
    transform: scale(0.75);
    opacity: 0.0;
  }

  100% {
    transform: scale(1.0);
    opacity: 1.0;
  }
}

/* ==========================================================================
   EMPLOYEE DIRECTORY
   ========================================================================== */
.directory-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.directory-search-wrap {
    position: relative;
    flex: 1 1 260px;
}

.directory-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--zs-text-muted);
    pointer-events: none;
}

.directory-search-input {
    width: 100%;
    padding: 11px 14px 11px 38px;
    border-radius: var(--zs-radius-md);
    border: 1px solid var(--zs-border);
    background: var(--zs-bg);
    color: var(--zs-text);
    font-size: 14px;
    transition: var(--zs-transition);
}

.directory-search-input:focus {
    outline: none;
    border-color: var(--zs-blue);
    background: var(--zs-card-bg);
}

.directory-filter-select {
    padding: 11px 14px;
    border-radius: var(--zs-radius-md);
    border: 1px solid var(--zs-border);
    background: var(--zs-bg);
    color: var(--zs-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex: 0 1 200px;
}

.directory-filter-select:focus {
    outline: none;
    border-color: var(--zs-blue);
}

.directory-results-count {
    font-size: 13px;
    color: var(--zs-text-light);
    font-weight: 600;
    margin: 0 0 16px 2px;
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.employee-card {
    border: 1px solid var(--zs-border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--zs-card-bg);
    box-shadow: var(--zs-shadow-sm);
    cursor: pointer;
    transition: var(--zs-transition);
}

/* --zs-border sits too close in luminance to --zs-card-bg in dark mode,
   so at rest the cards barely read as separate from the page until
   hovered — bump the border to a theme-independent light tone so they're
   visibly boxed even before interaction. */
[data-theme="dark"] .employee-card {
    border-color: rgba(255, 255, 255, 0.14);
}

.employee-card:hover,
.employee-card:focus-visible {
    border-color: var(--zs-blue);
    box-shadow: var(--zs-shadow-md);
    transform: translateY(-2px);
    outline: none;
}

.employee-card-info {
    flex: 1;
    min-width: 0;
}

.employee-you-tag {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 800;
    color: var(--zs-blue);
    background: rgba(0, 102, 204, 0.1);
    padding: 1px 7px;
    border-radius: var(--zs-radius-full);
    vertical-align: middle;
}

.employee-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.dept-badge {
    font-size: 11px;
    background: var(--zs-green-light);
    color: var(--zs-teal);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    white-space: nowrap;
}

.office-badge {
    font-size: 11px;
    color: var(--zs-text-light);
    font-weight: 600;
    white-space: nowrap;
}

.employee-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.employee-action-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--zs-radius-full);
    border: 1px solid var(--zs-border);
    background: var(--zs-bg);
    color: var(--zs-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--zs-transition);
}

.employee-action-btn:hover {
    background: var(--zs-blue);
    border-color: var(--zs-blue);
    color: #fff;
}

.directory-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--zs-text-light);
}

.directory-empty-state p {
    margin: 0 0 6px;
    font-size: 15px;
}

.directory-empty-sub {
    font-size: 13px !important;
}

.directory-clear-btn {
    background: none;
    border: none;
    color: var(--zs-blue);
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    text-decoration: underline;
}

.employee-modal-card {
    max-width: 420px;
}

.employee-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--zs-border);
}

.employee-modal-name {
    font-size: 19px;
    font-weight: 800;
    color: var(--zs-text);
    margin-bottom: 2px;
}

.employee-modal-role {
    font-size: 13px;
    color: var(--zs-teal);
    font-weight: 700;
}

.employee-modal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--zs-border);
    font-size: 13px;
}

.employee-modal-row:last-of-type {
    border-bottom: none;
}

.employee-modal-label {
    color: var(--zs-text-light);
    font-weight: 600;
    flex-shrink: 0;
}

.employee-modal-value {
    color: var(--zs-text);
    font-weight: 600;
    text-align: right;
}

.employee-modal-value a {
    color: var(--zs-blue);
    text-decoration: none;
}

.employee-modal-bio {
    margin-top: 14px;
    font-size: 13px;
    color: var(--zs-text-light);
    line-height: 1.6;
}

.employee-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.employee-modal-actions a {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: var(--zs-radius-sm);
    font-size: 13px;
    text-decoration: none;
    transition: var(--zs-transition);
}

.employee-modal-actions .btn-email {
    background: var(--zs-blue);
    color: #fff;
}

.employee-modal-actions .btn-email:hover {
    background: var(--zs-blue-hover);
}

.employee-modal-actions .btn-call {
    background: var(--zs-bg);
    color: var(--zs-text);
    border: 1px solid var(--zs-border);
}

.employee-modal-actions .btn-call:hover {
    border-color: var(--zs-blue);
    color: var(--zs-blue);
}

@media (max-width: 640px) {
    .directory-filter-select {
        flex: 1 1 100%;
    }
}