/* ==========================================================================
   dissolveX HRMS — Welcome Guide Stylesheet
   Signature Theme: Light Mint Canvas (#eaf6f0), Forest Green (#0b2b20), Emerald (#10b981)
   Matching User Theme & Screenshot Layouts
   ========================================================================== */

:root {
    --wg-primary: #0b2b20;
    --wg-primary-hover: #123d2f;
    --wg-emerald: #10b981;
    --wg-emerald-dark: #059669;
    --wg-emerald-deep: #064e3b;
    --wg-mint-bg: #eaf6f0;
    --wg-surface: #ffffff;
    --wg-text-headings: #0b2b20;
    --wg-text-body: #334155;
    --wg-text-muted: #64748b;
    --wg-border-light: rgba(15, 57, 43, 0.08);
    --wg-border-em: rgba(16, 185, 129, 0.22);
    --font-sans: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Instrument Serif', Georgia, serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    background-color: var(--wg-mint-bg);
}

body.welcome-guide-page {
    font-family: var(--font-sans);
    color: var(--wg-text-body);
    background-color: var(--wg-mint-bg);
    background-image: radial-gradient(circle at 50% 20%, rgba(16, 185, 129, 0.20) 0%, rgba(230, 247, 240, 0.75) 45%, #eaf6f0 80%);
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   1. Page Eyebrow Header
   ========================================================================== */
.wg-main-container {
    padding-top: 105px;
}

.wg-top-header {
    text-align: center;
    padding: 30px 20px 20px;
    position: relative;
    z-index: 2;
}

.wg-hero-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 18px;
    background: rgba(255, 255, 255, 0.9);
    border: 1.5px solid rgba(16, 185, 129, 0.28);
    border-radius: 9999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    color: #065f46;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 18px;
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.08);
}

.wg-page-main-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.8rem, 5.5vw, 4.4rem);
    font-weight: 900;
    line-height: 1.1;
    color: #0b2b20;
    letter-spacing: -0.03em;
    margin: 0 auto 16px;
}

.wg-title-emerald {
    color: #059669;
}

.wg-page-main-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-weight: 500;
    line-height: 1.6;
    color: #475569;
    max-width: 620px;
    margin: 0 auto 10px;
}

/* ==========================================================================
   2. Dual Split Hero Cards (Employee vs Administrator)
   ========================================================================== */
.wg-hero-split-section {
    padding: 10px 0 50px;
    position: relative;
    z-index: 2;
}

.wg-split-container {
    max-width: 1220px;
}

.wg-hero-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.wg-split-card {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 28px;
    padding: 34px 34px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 16px 40px rgba(11, 43, 32, 0.06), 0 2px 6px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
}

.wg-split-card.card-employee {
    border: 1.5px solid rgba(16, 185, 129, 0.24);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(236, 253, 245, 0.7) 100%);
}

.wg-split-card.card-admin {
    border: 1.5px solid rgba(245, 158, 11, 0.28);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(254, 243, 199, 0.6) 100%);
}

.wg-card-header-flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.wg-card-header-left {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.wg-role-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.role-icon-emp {
    background: linear-gradient(135deg, #059669, #10b981);
}

.role-icon-admin {
    background: linear-gradient(135deg, #ea580c, #f59e0b);
}

.wg-role-meta {
    text-align: left;
}

.wg-split-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}

.wg-split-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.4;
    margin: 0 0 10px;
}

.wg-role-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.tag-emp {
    color: #065f46;
}

.tag-admin {
    color: #b45309;
}

.wg-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.dot-emp { background: #059669; }
.dot-admin { background: #ea580c; }

/* 3D Glass Graphics in Header */
.wg-card-header-graphic {
    pointer-events: none;
    flex-shrink: 0;
}

.wg-3d-id-badge {
    width: 90px;
    height: 68px;
    background: rgba(255, 255, 255, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 8px 10px;
    box-shadow: 0 12px 24px rgba(6, 78, 59, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
    transform: rotate(4deg);
}

.wg-id-avatar-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #d1fae5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wg-id-lines-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.wg-id-bar {
    height: 3.5px;
    border-radius: 2px;
    background: #6ee7b7;
}

.wg-id-bar.bar-1 { width: 100%; }
.wg-id-bar.bar-2 { width: 70%; }
.wg-id-bar.bar-3 { width: 45%; }

.wg-3d-chart-badge {
    width: 90px;
    height: 68px;
    background: rgba(255, 255, 255, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 8px 10px;
    box-shadow: 0 12px 24px rgba(217, 119, 6, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transform: rotate(4deg);
}

.wg-crown-mini {
    display: flex;
    align-items: center;
}

.wg-chart-bars-mini {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 28px;
}

.wg-c-bar {
    width: 4px;
    border-radius: 2px;
    background: #f59e0b;
}

.wg-c-bar.bar-1 { height: 8px; }
.wg-c-bar.bar-2 { height: 16px; }
.wg-c-bar.bar-3 { height: 22px; }
.wg-c-bar.bar-4 { height: 28px; }

/* Pills Grid inside Cards */
.wg-pills-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}

.wg-guide-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 9999px;
    padding: 8px 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.84rem;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wg-guide-pill:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.wg-guide-pill.active {
    background: #d1fae5;
    border-color: #10b981;
    color: #065f46;
    font-weight: 700;
}

.card-admin .wg-guide-pill.active {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

/* Card Footer */
.wg-card-footer-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.wg-explore-role-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: background-color 0.2s ease;
}

.wg-explore-role-btn.btn-employee {
    background: #ffffff;
    border: 1.5px solid #059669;
    color: #059669;
}

.wg-explore-role-btn.btn-employee:hover {
    background: #ecfdf5;
}

.wg-explore-role-btn.btn-admin {
    background: #ffffff;
    border: 1.5px solid #d97706;
    color: #d97706;
}

.wg-explore-role-btn.btn-admin:hover {
    background: #fffbeb;
}

.wg-card-doodle {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: 'Caveat', cursive;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.05;
    pointer-events: none;
    user-select: none;
}

.doodle-emp {
    color: #065f46;
    transform: rotate(-3deg);
}

.doodle-adm {
    color: #92400e;
    transform: rotate(-3deg);
}

/* ==========================================================================
   3. Section 1: Employee Services Showcase (15 Cards)
   ========================================================================== */
.wg-services-showcase-section {
    padding: 50px 0 80px;
    position: relative;
}

.wg-services-header-wrap {
    text-align: center;
    position: relative;
    max-width: 820px;
    margin: 0 auto 36px;
}

/* Floating Doodles on Sides */
.wg-srv-doodle {
    position: absolute;
    display: flex;
    flex-direction: column;
    font-family: 'Caveat', cursive;
    font-size: 1.55rem;
    font-weight: 700;
    color: #166534;
    line-height: 1.1;
    pointer-events: none;
    user-select: none;
    z-index: 3;
}

.wg-srv-doodle.doodle-left {
    top: 0px;
    left: -170px;
    text-align: left;
    transform: rotate(-8deg);
}

.wg-srv-doodle.doodle-right {
    top: 0px;
    right: -170px;
    text-align: right;
    align-items: flex-end;
    transform: rotate(6deg);
}

.wg-services-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 18px;
    background: rgba(255, 255, 255, 0.9);
    border: 1.5px solid rgba(16, 185, 129, 0.28);
    border-radius: 9999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    color: #065f46;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.08);
}

.wg-services-main-heading {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.4rem, 4.4vw, 3.4rem);
    font-weight: 900;
    color: #0b2b20;
    line-height: 1.15;
    margin: 0 0 14px;
    letter-spacing: -0.025em;
}

.wg-services-highlight {
    color: #059669;
}

.wg-services-main-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 640px;
}

/* Search Bar */
.wg-services-search-wrapper {
    max-width: 520px;
    margin: 26px auto 0;
    background: #ffffff;
    border: 1.5px solid rgba(16, 185, 129, 0.26);
    border-radius: 9999px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 28px rgba(11, 43, 32, 0.06);
}

.wg-services-search-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.94rem;
    font-weight: 500;
    color: #0f172a;
    flex: 1;
}

.wg-services-search-input::placeholder {
    color: #94a3b8;
}

.wg-search-kbd {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 3px 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
}

/* Explore Services Container */
.wg-explore-services-container {
    background: #ffffff;
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 28px;
    padding: 32px 34px 38px;
    box-shadow: 0 20px 50px -10px rgba(11, 43, 32, 0.08);
}

.wg-explore-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f1f5f9;
}

.wg-explore-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wg-explore-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #d1fae5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wg-explore-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 2px;
}

.wg-explore-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.84rem;
    color: #64748b;
    margin: 0;
}

/* Grid / List Switch */
.wg-view-toggle {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 9999px;
    padding: 4px;
    gap: 4px;
}

.wg-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    border-radius: 9999px;
    padding: 7px 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.wg-toggle-btn.active {
    background: #064e3b;
    color: #ffffff;
    font-weight: 700;
}

/* 15 Cards Grid (5 columns x 3 rows) */
.wg-services-15-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.wg-srv-card {
    background: #ffffff;
    border: 1px solid rgba(16, 185, 129, 0.16);
    border-radius: 20px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    min-height: 180px;
    box-shadow: 0 4px 14px rgba(11, 43, 32, 0.03);
    cursor: default;
}

.wg-srv-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
}

.wg-srv-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.wg-srv-ghost-icon {
    position: absolute;
    top: -6px;
    right: -6px;
    opacity: 0.14;
    pointer-events: none;
}

.wg-srv-content {
    margin: 14px 0 10px;
}

.wg-srv-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 5px;
    line-height: 1.25;
}

.wg-srv-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.45;
    margin: 0;
    min-height: 36px;
}

.wg-srv-card-bottom {
    display: flex;
    justify-content: flex-end;
}

.wg-srv-arrow-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

/* Card Color Tints */
.bg-green { background: #10b981; }
.color-green { color: #10b981; }
.arrow-green { background: #ecfdf5; color: #059669; }
.arrow-green:hover { background: #d1fae5; }

.bg-orange { background: #f97316; }
.color-orange { color: #f97316; }
.arrow-orange { background: #fff7ed; color: #ea580c; }
.arrow-orange:hover { background: #ffedd5; }

.bg-blue { background: #3b82f6; }
.color-blue { color: #3b82f6; }
.arrow-blue { background: #eff6ff; color: #2563eb; }
.arrow-blue:hover { background: #dbeafe; }

.bg-purple { background: #8b5cf6; }
.color-purple { color: #8b5cf6; }
.arrow-purple { background: #f5f3ff; color: #7c3aed; }
.arrow-purple:hover { background: #ede9fe; }

.bg-teal { background: #14b8a6; }
.color-teal { color: #14b8a6; }
.arrow-teal { background: #f0fdfa; color: #0d9488; }
.arrow-teal:hover { background: #ccfbf1; }

.bg-rose { background: #f43f5e; }
.color-rose { color: #f43f5e; }
.arrow-rose { background: #fff1f2; color: #e11d48; }
.arrow-rose:hover { background: #ffe4e6; }

.bg-amber { background: #f59e0b; }
.color-amber { color: #f59e0b; }
.arrow-amber { background: #fffbeb; color: #d97706; }
.arrow-amber:hover { background: #fef3c7; }

.bg-royal-purple { background: #a855f7; }
.color-royal-purple { color: #a855f7; }
.arrow-royal-purple { background: #faf5ff; color: #9333ea; }
.arrow-royal-purple:hover { background: #f3e8ff; }

.bg-mint-green { background: #10b981; }
.color-mint-green { color: #10b981; }
.arrow-mint-green { background: #ecfdf5; color: #059669; }
.arrow-mint-green:hover { background: #d1fae5; }

.bg-sky-blue { background: #0284c7; }
.color-sky-blue { color: #0284c7; }
.arrow-sky-blue { background: #f0f9ff; color: #0284c7; }
.arrow-sky-blue:hover { background: #e0f2fe; }

.bg-magenta { background: #ec4899; }
.color-magenta { color: #ec4899; }
.arrow-magenta { background: #fdf2f8; color: #db2777; }
.arrow-magenta:hover { background: #fce7f3; }

.bg-violet { background: #8b5cf6; }
.color-violet { color: #8b5cf6; }
.arrow-violet { background: #f5f3ff; color: #7c3aed; }
.arrow-violet:hover { background: #ede9fe; }

.bg-crimson { background: #ef4444; }
.color-crimson { color: #ef4444; }
.arrow-crimson { background: #fef2f2; color: #dc2626; }
.arrow-crimson:hover { background: #fee2e2; }

.bg-emerald { background: #059669; }
.color-emerald { color: #059669; }
.arrow-emerald { background: #ecfdf5; color: #059669; }
.arrow-emerald:hover { background: #d1fae5; }

/* 15. Promo Highlight Card */
.wg-srv-highlight-card {
    background: linear-gradient(135deg, #e6f9f0 0%, #d1f4e4 50%, #b8edd5 100%) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.wg-highlight-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.wg-highlight-icon-box {
    margin-bottom: 8px;
}

.wg-highlight-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #064e3b;
    line-height: 1.3;
    margin: 0 0 8px;
}

.wg-highlight-squiggle {
    display: block;
}

/* List View Mode */
.wg-services-15-grid.list-view {
    grid-template-columns: 1fr;
    gap: 12px;
}

.wg-services-15-grid.list-view .wg-srv-card {
    flex-direction: row;
    align-items: center;
    min-height: auto;
    padding: 14px 20px;
}

.wg-services-15-grid.list-view .wg-srv-card-top {
    margin-right: 18px;
}

.wg-services-15-grid.list-view .wg-srv-ghost-icon {
    display: none;
}

.wg-services-15-grid.list-view .wg-srv-content {
    flex: 1;
    margin: 0;
}

.wg-services-15-grid.list-view .wg-srv-desc {
    min-height: auto;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .wg-services-15-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .wg-srv-doodle.doodle-left,
    .wg-srv-doodle.doodle-right {
        display: none;
    }
}

@media (max-width: 992px) {
    .wg-hero-split-grid {
        grid-template-columns: 1fr;
    }
    .wg-services-15-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .wg-services-15-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .wg-explore-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

@media (max-width: 520px) {
    .wg-services-15-grid {
        grid-template-columns: 1fr;
    }
    .wg-card-header-flex {
        flex-direction: column;
    }
    .wg-card-footer-flex {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   6. Section 2 Home Dashboard Mockup
   ========================================================================== */
.wg-dash-window {
    padding-bottom: 24px;
}

.wg-dash-split-body {
    display: flex;
    gap: 0;
    min-height: 540px;
}

/* Left Sidebar — Only Dashboard, Feeds, Announcements are clickable */
.wg-dash-sidebar {
    width: 200px;
    padding: 0 16px 20px 0;
    border-right: 1px solid #f1f5f9;
    flex-shrink: 0;
    position: relative;
    pointer-events: auto !important;
}

/* Blue Speech Bubble Tooltip */
.wg-tooltip-callout {
    position: absolute;
    top: 10px;
    left: 0;
    background: #2563eb;
    color: #ffffff;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
    z-index: 10;
    width: 195px;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.wg-tooltip-callout.is-dashboard {
    top: 10px;
}

.wg-tooltip-callout.is-feeds {
    top: 56px;
}

.wg-tooltip-callout.is-announcements {
    top: 104px;
}

.wg-dash-nav-list {
    list-style: none;
    padding: 0;
    margin: 78px 0 0;
}

.wg-dash-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 8px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.92rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0;
    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
    background: transparent;
}

@media (hover: hover) and (pointer: fine) {
.wg-dash-nav-item:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.03);
}
}

.wg-dash-nav-item.active {
    color: #2563eb;
    font-weight: 700;
    background: transparent;
}

.wg-nav-dot {
    flex-shrink: 0;
}

.wg-nav-dot.active-dot {
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* Main Dashboard Area — Behave like a static image/mockup */
.wg-dash-content {
    flex: 1;
    padding-left: 24px;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.wg-dash-content * {
    pointer-events: none !important;
    cursor: default !important;
}

/* Sub-Header Bar */
.wg-dash-subbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 16px;
}

.wg-timer-pill {
    background: #b91c1c;
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.3px;
}

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

.wg-subbar-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--wg-text-body);
    cursor: default;
}

.wg-subbar-icon-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 5px 8px;
    color: #64748b;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 6 Widgets Grid (3 cols x 2 rows) */
.wg-widgets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-top: 0;
}

.wg-widget-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
}

.wg-widget-card:nth-child(1) { border-top: 3px solid #f97316; }
.wg-widget-card:nth-child(2) { border-top: 3px solid #a855f7; }
.wg-widget-card:nth-child(3) { border-top: 3px solid #06b6d4; }
.wg-widget-card:nth-child(4) { border-top: 3px solid #3b82f6; }
.wg-widget-card:nth-child(5) { border-top: 3px solid #8b5cf6; }
.wg-widget-card:nth-child(6) { border-top: 3px solid #eab308; }

.wg-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #f8fafc;
    margin-bottom: 10px;
}

.wg-widget-title-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--wg-text-headings);
}

.wg-widget-icon-pill {
    display: flex;
    align-items: center;
}

.wg-balloon-icon {
    font-size: 0.95rem;
}

.wg-badge-num {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
}

.wg-badge-status {
    background: #fef3c7;
    color: #b45309;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
}

.wg-widget-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.8rem;
}

/* Widget 1: Announcements */
.wg-feed-item {
    border-bottom: 1px solid #f8fafc;
    padding-bottom: 8px;
}

.wg-feed-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wg-feed-title {
    font-weight: 800;
    color: var(--wg-text-headings);
    font-size: 0.8rem;
    margin-bottom: 2px;
}

.wg-feed-snippet {
    color: var(--wg-text-muted);
    font-size: 0.74rem;
    line-height: 1.35;
    margin-bottom: 4px;
}

.wg-feed-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.68rem;
    color: #64748b;
}

/* Widget 2: Birthday */
.wg-bday-body {
    justify-content: space-between;
}

.wg-bday-featured {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wg-bday-avatar-ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #3b82f6;
    padding: 2px;
}

.wg-bday-name {
    font-weight: 800;
    color: var(--wg-text-headings);
    font-size: 0.82rem;
}

.wg-bday-meta {
    font-size: 0.72rem;
    color: var(--wg-text-muted);
}

.wg-bday-upcoming {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f1f5f9;
    padding-top: 8px;
}

.wg-upcoming-label {
    font-size: 0.72rem;
    color: var(--wg-text-muted);
    font-weight: 700;
}

.wg-bday-bubbles {
    display: flex;
    gap: 6px;
}

/* Widget 3 & 5: Members & New Hires */
.wg-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wg-row-name {
    font-weight: 800;
    color: var(--wg-text-headings);
    font-size: 0.78rem;
}

.wg-row-sub {
    font-size: 0.68rem;
    color: var(--wg-text-muted);
}

/* Widget 4: Approvals */
.wg-approval-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid #f8fafc;
    padding-bottom: 6px;
}

.wg-approval-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wg-app-check {
    color: #065f46;
    font-size: 0.82rem;
    font-weight: 800;
}

.wg-app-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.wg-app-title {
    font-weight: 800;
    color: var(--wg-text-headings);
    font-size: 0.76rem;
}

.wg-app-date {
    font-size: 0.68rem;
    color: var(--wg-text-muted);
}

/* Widget 6: Holidays */
.wg-holiday-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f8fafc;
    padding-bottom: 6px;
}

.wg-holiday-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wg-hol-name {
    font-weight: 800;
    color: var(--wg-text-headings);
    font-size: 0.78rem;
}

.wg-hol-date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.hol-num {
    font-weight: 800;
    color: var(--wg-emerald-deep);
    font-size: 0.76rem;
}

.hol-day {
    font-size: 0.66rem;
    color: var(--wg-text-muted);
}

/* ==========================================================================
   7. Pre-Footer Scenic CTA Banner
   ========================================================================== */

/* ==========================================================================
   Feeds View Styles (Exact Match to User Screenshot)
   ========================================================================== */

.wg-dash-view {
    width: 100%;
}

/* 1. Post Composer */
.wg-feed-composer-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-composer-field {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 8px 14px;
    background: #ffffff;
}

.wg-composer-placeholder {
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 500;
}

/* 2. Feed Filter Tabs Bar */
.wg-feed-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.wg-feed-filter-tabs {
    display: flex;
    align-items: center;
    gap: 18px;
}

.wg-feed-tab {
    background: transparent;
    border: none;
    padding: 6px 2px 10px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    position: relative;
    font-family: var(--font-sans);
    transition: color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
.wg-feed-tab:hover {
    color: #1e293b;
}
}

.wg-feed-tab.active {
    color: #0f172a;
    font-weight: 800;
}

.wg-feed-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2.5px;
    background: #eab308; /* Amber underline indicator matching Zoho exact */
    border-radius: 2px 2px 0 0;
}

.wg-feed-tab.tab-dots {
    color: #94a3b8;
    letter-spacing: 1px;
}

.wg-feed-gear-btn {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
.wg-feed-gear-btn:hover {
    color: #1e293b;
}
}

/* 3. Feed Cards */
.wg-feed-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-feed-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 8px;
}

.wg-feed-header-info {
    flex: 1;
}

.wg-feed-header-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
}

.wg-feed-blue-link {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
.wg-feed-blue-link:hover {
    text-decoration: underline;
}
}

.wg-feed-header-time {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 2px;
}

.wg-feed-card-body {
    padding: 4px 16px 10px 58px;
}

.wg-feed-post-text {
    font-size: 0.86rem;
    color: #334155;
    margin: 0;
}

.wg-feed-card-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 16px 12px 58px;
}

.wg-feed-action-btn {
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    font-family: var(--font-sans);
    transition: color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
.wg-feed-action-btn:hover {
    color: #2563eb;
}
}

/* 4. Case Table Inside Feed Card */
.wg-feed-table-card {
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
}

.wg-feed-case-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.wg-feed-case-table tr {
    border-bottom: 1px solid #f1f5f9;
}

.wg-feed-case-table tr:last-child {
    border-bottom: none;
}

.wg-feed-case-table td {
    padding: 8px 14px;
}

.wg-col-label {
    width: 110px;
    color: #475569;
    font-weight: 600;
    background: #fafbfc;
    border-right: 1px solid #f1f5f9;
}

.wg-col-val {
    color: #1e293b;
    background: #ffffff;
}

.wg-agent-val {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.wg-select-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1e293b;
    font-weight: 600;
    cursor: pointer;
}

.wg-select-pill svg {
    color: #64748b;
}

/* 5. Feed Comments Section */
.wg-feed-comments-wrap {
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
    padding: 10px 16px 12px 58px;
}

.wg-view-comments-btn {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0 0 10px 0;
    display: block;
    font-family: var(--font-sans);
}

@media (hover: hover) and (pointer: fine) {
.wg-view-comments-btn:hover {
    color: #2563eb;
    text-decoration: underline;
}
}

.wg-feed-comment-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wg-feed-comment-text {
    font-size: 0.8rem;
    color: #1e293b;
}

.commenter-name {
    font-weight: 700;
    margin-right: 6px;
}

.comment-msg {
    color: #475569;
}

/* ==========================================================================
   Universal Vector Avatars System (Zero Real Human Photos)
   ========================================================================== */
.wg-avatar-vec {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    user-select: none !important;
    vertical-align: middle;
}

.wg-avatar-vec svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
}

.wg-avatar-vec.sz-64, .wg-avatar-vec.sz-64 svg { width: 64px !important; height: 64px !important; min-width: 64px !important; max-width: 64px !important; }
.wg-avatar-vec.sz-48, .wg-avatar-vec.sz-48 svg { width: 48px !important; height: 48px !important; min-width: 48px !important; max-width: 48px !important; }
.wg-avatar-vec.sz-36, .wg-avatar-vec.sz-36 svg { width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; }
.wg-avatar-vec.sz-28, .wg-avatar-vec.sz-28 svg { width: 28px !important; height: 28px !important; min-width: 28px !important; max-width: 28px !important; }
.wg-avatar-vec.sz-24, .wg-avatar-vec.sz-24 svg { width: 24px !important; height: 24px !important; min-width: 24px !important; max-width: 24px !important; }
.wg-avatar-vec.sz-20, .wg-avatar-vec.sz-20 svg { width: 20px !important; height: 20px !important; min-width: 20px !important; max-width: 20px !important; }
.wg-avatar-vec.sz-18, .wg-avatar-vec.sz-18 svg { width: 18px !important; height: 18px !important; min-width: 18px !important; max-width: 18px !important; }

/* ==========================================================================
   Section 3: Self-Service Styles (Pixel-Perfect Match to User Screenshot)
   ========================================================================== */

/* ==========================================================================
   Sticky Secondary Sub-Navbar (Pills Bar: Visible only when scrolling to Services)
   ========================================================================== */
.wg-sticky-subnav {
    position: fixed;
    top: 58px;
    left: 0;
    width: 100%;
    z-index: 990;
    -webkit-backdrop-filter: blur(16px);
    padding: 7px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s ease;
    pointer-events: none;
}

.wg-sticky-subnav.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.wg-sticky-subnav .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 20px !important;
}

.wg-subnav-pills-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 4px;
}

.wg-subnav-pills-wrap::-webkit-scrollbar {
    display: none;
}

.wg-subnav-pill {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    border-radius: 9999px;
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
    white-space: nowrap;
    flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
.wg-subnav-pill:hover {
    color: var(--wg-text-headings);
    border-color: #cbd5e1;
}
}

.wg-subnav-pill.active {
    border-color: #3b82f6;
}

/* Administrator Sticky Secondary Sub-Navbar Mode */
.wg-sticky-subnav.mode-admin {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}

.wg-subnav-admin .wg-subnav-pill {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

@media (hover: hover) and (pointer: fine) {
.wg-subnav-admin .wg-subnav-pill:hover {
    color: #0f172a;
    border-color: #cbd5e1;
    background: #f8fafc;
}
}

.wg-subnav-admin .wg-subnav-pill.active {
    background: #3ba4f5;
    color: #ffffff;
    border-color: #3ba4f5;
    box-shadow: 0 4px 14px rgba(59, 164, 245, 0.35);
    font-weight: 600;
}

/* Self-Service Window Frame */
.wg-selfservice-window {
    padding: 16px 20px 24px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    margin: 0 auto;
    max-width: 1100px;
}

.wg-selfservice-split-body {
    display: flex;
    min-height: 560px;
}

/* Left Sidebar */
.wg-selfservice-sidebar {
    width: 210px;
    padding: 0 16px 20px 0;
    border-right: 1px solid #f1f5f9;
    flex-shrink: 0;
    position: relative;
    pointer-events: auto !important;
}

.wg-ss-nav-list {
    list-style: none;
    padding: 0;
    margin: 78px 0 0;
}

.wg-ss-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 8px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
    background: transparent;
}

@media (hover: hover) and (pointer: fine) {
.wg-ss-nav-item:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.03);
}
}

.wg-ss-nav-item.active {
    color: #2563eb;
    font-weight: 700;
    background: transparent;
}

/* Right Content: Static Mockup Image Behavior */
.wg-selfservice-content {
    flex: 1;
    padding-left: 20px;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.wg-selfservice-content * {
    pointer-events: none !important;
    cursor: default !important;
}

/* Profile Panoramic Banner */
.wg-profile-banner {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #091a28 0%, #112a3d 40%, #1e1b4b 75%, #0d1f33 100%);
    padding: 20px 16px 12px;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.wg-profile-banner-bg-stars {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(1.5px 1.5px at 30px 20px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 80px 45px, #fef08a, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 150px 25px, #93c5fd, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 220px 55px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 310px 15px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 400px 40px, #fef08a, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 490px 20px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 580px 50px, #93c5fd, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 670px 30px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 750px 60px, #ffffff, rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 320px 80px;
    opacity: 0.85;
    pointer-events: none;
}

.wg-profile-banner-eye-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    z-index: 3;
}

.wg-profile-banner-avatar {
    position: relative;
    z-index: 2;
    display: inline-block;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    margin-bottom: 6px;
    line-height: 0;
}

.wg-profile-banner-info {
    position: relative;
    z-index: 2;
}

.wg-profile-banner-name {
    font-size: 0.86rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
    letter-spacing: 0.2px;
}

.wg-profile-banner-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 0.72rem;
    color: #cbd5e1;
}

/* 2-Column Cards Grid */
.wg-ss-cards-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 14px;
}

.wg-ss-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wg-ss-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-ss-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.wg-card-heading-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-bar-accent {
    width: 3px;
    height: 13px;
    background: #10b981;
    border-radius: 2px;
}

.wg-card-plus-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: #065f46;
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}

/* About Me Grid */
.wg-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    font-size: 0.75rem;
    color: #334155;
    margin-bottom: 12px;
}

.wg-about-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-about-item svg {
    color: #64748b;
    flex-shrink: 0;
}

.wg-personality-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #f8fafc;
    font-size: 0.75rem;
    color: #334155;
}

.wg-dynamic-icon {
    font-size: 0.9rem;
}

/* Skill Set */
.wg-skills-list {
    display: flex;
    gap: 20px;
}

.wg-skill-item {
    flex: 1;
}

.wg-skill-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
}

.wg-skill-bar-wrap {
    background: #e2e8f0;
    height: 4.5px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.wg-skill-bar-fill {
    background: #10b981;
    height: 100%;
    border-radius: 3px;
}

.wg-skill-val {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--wg-text-headings);
}

/* Reporting To Card */
.wg-reporting-body {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wg-rep-info {
    display: flex;
    flex-direction: column;
}

.wg-rep-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-rep-link {
    font-size: 0.68rem;
    color: #2563eb;
    margin-top: 2px;
}

/* Direct Reports Card */
.wg-direct-rep-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wg-dr-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-dr-name {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-dr-role {
    font-size: 0.68rem;
    color: #64748b;
}

.wg-dr-phone {
    font-size: 0.7rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Tags Card */
.wg-tags-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-tag-pill {
    background: #f1f5f9;
    color: #0f172a;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wg-tag-close {
    color: #475569;
    font-size: 0.85rem;
    line-height: 1;
}

/* Passport Card */
.wg-passport-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
}

.wg-pass-label {
    color: #64748b;
}

.wg-pass-val {
    font-weight: 700;
    color: var(--wg-text-headings);
}

/* ==========================================================================
   Self-Service Panels & Views (Team, Calendar, Leave, Timesheets, Attendance)
   ========================================================================== */
.wg-ss-view-panel {
    display: none;
    animation: wgFadeIn 0.22s ease forwards;
}

.wg-ss-view-panel.active {
    display: block;
}

@keyframes wgFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   View 1: Team Styles
   -------------------------------------------------------------------------- */
.wg-ss-team-head-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-ss-team-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wg-ss-th-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-ss-th-role {
    font-size: 0.76rem;
    color: #64748b;
}

.wg-ss-team-head-mid {
    text-align: center;
}

.wg-ss-th-dept {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-ss-th-email {
    font-size: 0.76rem;
    color: #2563eb;
    text-decoration: none;
}

.wg-ss-team-head-right {
    text-align: center;
}

.wg-ss-th-count {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--wg-text-headings);
    line-height: 1.1;
}

.wg-ss-th-members-label {
    font-size: 0.72rem;
    color: #64748b;
}

.wg-ss-team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.wg-ss-team-group-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-ss-team-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f8fafc;
}

.wg-ss-tgh-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-ss-count-badge {
    background: #cbd5e1;
    color: #334155;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 7px;
}

.wg-ss-member-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wg-ss-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

.wg-ss-mem-info-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wg-ss-mem-title {
    font-size: 0.78rem;
    color: var(--wg-text-headings);
}

.wg-ss-mem-id {
    color: #64748b;
}

.wg-ss-mem-meta {
    font-size: 0.7rem;
    color: #64748b;
}

.wg-pipe {
    color: #cbd5e1;
    margin: 0 4px;
}

.wg-ss-status-badge {
    font-size: 0.74rem;
    font-weight: 700;
}

.wg-ss-status-badge.status-in {
    color: #16a34a;
}

.wg-ss-status-badge.status-out {
    color: #dc2626;
}

/* --------------------------------------------------------------------------
   View 2: Calendar Styles
   -------------------------------------------------------------------------- */
.wg-cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 14px;
}

.wg-cal-nav-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wg-cal-today-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}

.wg-cal-arrows {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wg-cal-arrow-btn {
    background: transparent;
    border: none;
    font-size: 0.9rem;
    color: #64748b;
    padding: 2px 6px;
    cursor: pointer;
}

.wg-cal-current-range {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-cal-view-switch {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
}

.wg-cal-switch-item {
    cursor: pointer;
    padding-bottom: 2px;
}

.wg-cal-switch-item.active {
    color: #2563eb;
    border-bottom: 2px solid #2563eb;
}

.wg-cal-grid-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.wg-cal-days-header {
    display: grid;
    grid-template-columns: 55px repeat(7, 1fr);
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}

.wg-cal-time-col-header,
.wg-cal-time-col {
    width: 55px;
    border-right: 1px solid #f1f5f9;
}

.wg-cal-day-cell {
    padding: 8px 6px;
    text-align: center;
    border-right: 1px solid #f1f5f9;
}

.wg-cal-day-cell:last-child {
    border-right: none;
}

.wg-cdc-name {
    display: block;
    font-size: 0.68rem;
    color: #64748b;
}

.wg-cdc-num {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wg-text-headings);
    line-height: 1.1;
}

.wg-cal-day-cell.is-weekend {
    background: #fefce8;
}

.wg-cal-events-row {
    display: grid;
    grid-template-columns: 55px repeat(7, 1fr);
    min-height: 32px;
    align-items: center;
    border-bottom: 1px solid #f8fafc;
}

.wg-cal-ev-col {
    padding: 4px 4px;
    border-right: 1px solid #f8fafc;
    text-align: center;
}

.wg-cal-ev-col.is-weekend {
    background: #fefce8;
}

.wg-cal-pill {
    display: inline-block;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95%;
}

.wg-cal-pill.pill-cyan {
    background: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.wg-cal-status-row {
    display: grid;
    grid-template-columns: 55px repeat(7, 1fr);
    padding: 6px 0;
    border-bottom: 1px solid #e2e8f0;
}

.wg-cal-stat-col {
    border-right: 1px solid #f8fafc;
    text-align: center;
}

.wg-cal-stat-col.is-weekend {
    background: #fefce8;
}

.wg-cal-status-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.wg-cal-status-tag.stat-absent {
    color: #dc2626;
}

.wg-cal-status-tag.stat-weekend {
    color: #ca8a04;
}

.dot-red {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    display: inline-block;
}

.dot-yellow {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #eab308;
    display: inline-block;
}

.wg-cal-grid-body {
    background: #ffffff;
}

.wg-cal-hour-row {
    display: grid;
    grid-template-columns: 55px repeat(7, 1fr);
    border-bottom: 1px solid #f1f5f9;
    min-height: 40px;
}

.wg-cal-hour-label {
    font-size: 0.68rem;
    color: #64748b;
    padding: 6px 6px 0;
    border-right: 1px solid #f1f5f9;
    text-align: right;
}

.wg-cal-hour-cell {
    border-right: 1px solid #f1f5f9;
    position: relative;
}

.wg-cal-hour-cell.is-weekend {
    background: #fefce8;
}

.wg-cal-hour-cell.has-pink-line::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 2px;
    background: #fca5a5;
}

/* --------------------------------------------------------------------------
   View 3: Leave Styles
   -------------------------------------------------------------------------- */
.wg-ss-leave-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.wg-ss-leave-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-ss-apply-leave-btn {
    background: #10b981;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

.wg-ss-leave-table-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 14px;
    overflow: hidden;
}

.wg-ss-leave-row {
    display: grid;
    grid-template-columns: 190px 1.4fr 90px 50px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.78rem;
}

.wg-ss-leave-row:last-child {
    border-bottom: none;
}

.wg-ss-leave-date-col {
    color: #2563eb;
    font-weight: 600;
}

.wg-ss-leave-date-col.multi-date {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.to-label {
    color: #64748b;
    font-size: 0.7rem;
}

.wg-ss-leave-timeline-col {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.wg-leave-track-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background: #38bdf8;
    z-index: 1;
}

.wg-leave-track-line.line-purple {
    background: #c084fc;
}

.wg-leave-track-line.line-green {
    background: #a3e635;
}

.wg-leave-pill {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border-radius: 4px;
    padding: 3px 14px;
    font-size: 0.72rem;
    font-weight: 600;
}

.wg-leave-pill.pill-casual {
    border: 1px solid #38bdf8;
    color: #0284c7;
}

.wg-leave-pill.pill-purple {
    border: 1px solid #c084fc;
    color: #9333ea;
}

.wg-leave-pill.pill-green {
    border: 1px solid #a3e635;
    color: #65a30d;
}

.wg-ss-leave-days-col {
    font-weight: 700;
    color: var(--wg-text-headings);
    text-align: center;
}

.wg-ss-leave-notes-col {
    font-size: 0.72rem;
    color: #64748b;
}

.wg-ss-leave-action-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.wg-ss-leave-footer-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: stretch;
    padding: 8px 12px;
    gap: 14px;
    font-size: 0.72rem;
}

.wg-ss-lfc-title-col {
    border-right: 2px solid #0f172a;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wg-ss-lfc-title-col strong {
    color: var(--wg-text-headings);
    font-size: 0.74rem;
}

.wg-ss-lfc-title-col span {
    color: #64748b;
}

.wg-ss-lfc-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #f1f5f9;
    padding-right: 12px;
}

.wg-ss-lfc-item:last-child {
    border-right: none;
}

.wg-ss-lfc-name {
    color: #64748b;
    margin-bottom: 2px;
}

.wg-ss-lfc-val {
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-ss-lfc-item.more-dots {
    font-size: 1.1rem;
    color: #94a3b8;
    align-items: center;
}

/* --------------------------------------------------------------------------
   View 4: Timesheets Styles
   -------------------------------------------------------------------------- */
.wg-ts-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.wg-ts-nav-range {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-ts-arrow {
    color: #64748b;
    cursor: pointer;
}

.wg-ts-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-ts-log-time-btn {
    background: #10b981;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.wg-ts-icon-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
}

.wg-ts-filter-row {
    justify-content: space-between;
}

.wg-ts-select-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.wg-ts-select-pill {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.74rem;
    color: #334155;
}


.wg-ts-timer-widget {
    background: #10b981;
    color: #ffffff;
    border-radius: 4px;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-family: monospace;
    font-size: 0.88rem;
    flex-shrink: 0;
}

.wg-ts-table-card {
    margin-bottom: 14px;
}



.wg-ts-gh-hours {
    color: #10b981;
    font-weight: 700;
}

.wg-ts-task-row {
    display: grid;
    grid-template-columns: 1.3fr 1.2fr 90px 60px 30px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.76rem;
}

.wg-ts-task-row:last-child {
    border-bottom: none;
}

.wg-ts-tr-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-ts-task-title {
    font-weight: 600;
    color: var(--wg-text-headings);
}

.wg-bullet {
    color: #cbd5e1;
    margin: 0 4px;
}

.wg-task-sub {
    color: #64748b;
    font-weight: 400;
}

.wg-ts-tr-desc {
    color: #475569;
}

.wg-ts-tr-type {
    font-weight: 600;
}

.wg-ts-tr-type.billable {
    color: #10b981;
}

.wg-ts-tr-type.non-billable {
    color: #64748b;
}

.wg-ts-tr-time {
    font-weight: 700;
    color: var(--wg-text-headings);
    text-align: right;
}

.wg-ts-tr-pin {
    text-align: right;
    color: #94a3b8;
    font-size: 0.8rem;
}

.wg-ts-summary-widget {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.wg-ts-sw-col {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 14px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    font-size: 0.72rem;
}

.wg-ts-sw-label {
    color: #64748b;
    margin-bottom: 2px;
}

.wg-ts-sw-val {
    font-weight: 700;
}

.wg-ts-sw-col.is-total .wg-ts-sw-val {
    color: #0f766e;
}

.wg-ts-sw-col.is-sub .wg-ts-sw-val {
    color: #7c3aed;
}

.wg-ts-sw-col.is-notsub {
    border-color: #38bdf8;
}

.wg-ts-sw-col.is-notsub .wg-ts-sw-val {
    color: #0284c7;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --------------------------------------------------------------------------
   View 5: Attendance Styles
   -------------------------------------------------------------------------- */

.wg-att-nav-range {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-att-arrow {
    color: #64748b;
    cursor: pointer;
}

.wg-att-view-icons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wg-att-icon-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
}

.wg-att-icon-btn.active {
    color: #2563eb;
    border-color: #93c5fd;
}

.wg-att-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
    gap: 10px;
    font-size: 0.78rem;
}

.wg-att-notes-placeholder {
    color: #94a3b8;
    flex: 1;
}

.wg-att-shift-label {
    color: #334155;
    font-weight: 600;
}

.wg-att-shift-hours {
    color: #64748b;
}

.wg-att-punch-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-att-break-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wg-att-checkout-btn {
    background: #10b981;
    border: none;
    border-radius: 4px;
    padding: 5px 14px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wg-att-timeline-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 14px 8px;
    margin-bottom: 14px;
}

.wg-att-row {
    display: grid;
    grid-template-columns: 85px 1fr 115px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f8fafc;
    font-size: 0.74rem;
}

.wg-att-row.is-today {
    background: rgba(37, 99, 235, 0.02);
}

.wg-att-day-label {
    color: var(--wg-text-headings);
    display: flex;
    align-items: center;
}

.dot-sm {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 2px;
}

.dot-sm.grey { background: #cbd5e1; }
.dot-sm.green { background: #22c55e; }
.dot-sm.red { background: #ef4444; }

.wg-att-track {
    position: relative;
    height: 12px;
    display: flex;
    align-items: center;
}

.wg-att-bar {
    position: absolute;
    height: 6px;
    border-radius: 9999px;
}

.wg-att-bar.dotted {
    width: 100%;
    background-image: linear-gradient(to right, #94a3b8 33%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 4px 1px;
    background-repeat: repeat-x;
    height: 1px;
}

.wg-att-bar.solid-green {
    background: #22c55e;
    height: 7px;
}

.wg-att-bar.active-blue {
    background: #3b82f6;
    height: 7px;
}

.wg-att-bar.empty-grey {
    width: 100%;
    background: #e2e8f0;
    height: 1px;
}

.wg-att-bar.weekend-line {
    width: 100%;
    background: #fde047;
    height: 1.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wg-att-weekend-badge {
    background: #ffffff;
    border: 1px solid #fde047;
    color: #ca8a04;
    border-radius: 3px;
    padding: 1px 8px;
    font-size: 0.65rem;
    font-weight: 600;
}

.wg-att-total-time {
    text-align: right;
    color: var(--wg-text-headings);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.wg-att-ruler {
    display: grid;
    grid-template-columns: 85px 1fr 115px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #e2e8f0;
}

.wg-att-ruler-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 0.64rem;
    color: #94a3b8;
}

.wg-att-metrics-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: stretch;
    padding: 8px 10px;
    font-size: 0.7rem;
    overflow-x: auto;
}

.wg-att-metric-col {
    border-right: 1px solid #f1f5f9;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
}

.wg-att-metric-col:last-child {
    border-right: none;
}

.wg-att-metric-col.col-header {
    border-right: 2px solid #0f172a;
    padding-left: 4px;
}

.wg-amc-title {
    color: #64748b;
    margin-bottom: 2px;
}

.wg-amc-val {
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-amc-shift {
    color: #64748b;
}

/* --------------------------------------------------------------------------
   Views 7, 8, 9: Generic Table Cards (Files, Qualifications, Medical Claim)
   -------------------------------------------------------------------------- */
.wg-ss-table-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-ss-table-heading {
    padding: 14px 18px 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--wg-text-headings);
    border-bottom: 1px solid #f1f5f9;
}

/* Files Table */
.wg-files-table-header {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr 1fr 1fr;
    padding: 10px 18px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-files-table-row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr 1fr 1fr;
    padding: 12px 18px;
    border-bottom: 1px solid #f8fafc;
    font-size: 0.76rem;
    color: #475569;
    align-items: center;
}

.wg-files-table-row:last-child {
    border-bottom: none;
}

.wg-ft-col.col-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-pdf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
}

.wg-file-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.wg-file-doc-icon {
    font-size: 0.85rem;
    margin-left: 6px;
    color: #94a3b8;
}

/* Educational Qualifications Table */
.wg-edu-table-header {
    display: grid;
    grid-template-columns: 1.4fr 1.6fr 1.6fr 1fr;
    padding: 10px 18px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-edu-table-row {
    display: grid;
    grid-template-columns: 1.4fr 1.6fr 1.6fr 1fr;
    padding: 12px 18px;
    border-bottom: 1px solid #f8fafc;
    font-size: 0.76rem;
    color: #334155;
    align-items: center;
}

.wg-edu-table-row:last-child {
    border-bottom: none;
}

/* Group Medical Form Table */
.wg-gmc-table-header {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1.5fr 1.5fr;
    padding: 10px 18px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-gmc-table-row {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1.5fr 1.5fr;
    padding: 12px 18px;
    border-bottom: 1px solid #f8fafc;
    font-size: 0.76rem;
    color: #334155;
    align-items: center;
}

.wg-gmc-table-row:last-child {
    border-bottom: none;
}

/* ==========================================================================
   Section 4: Organization Styles (Matching Zoho People Screenshots)
   ========================================================================== */

/* Organization Window Frame */
.wg-org-window {
    padding: 16px 20px 24px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    margin: 0 auto;
    max-width: 1100px;
}

.wg-org-split-body {
    display: flex;
    min-height: 560px;
}

/* Left Sidebar */
.wg-org-sidebar {
    width: 210px;
    padding: 0 16px 20px 0;
    border-right: 1px solid #f1f5f9;
    flex-shrink: 0;
    position: relative;
    pointer-events: auto !important;
}

.wg-org-nav-list {
    list-style: none;
    padding: 0;
    margin: 70px 0 0;
}

.wg-org-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px;
    border: none;
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
    background: transparent;
}

@media (hover: hover) and (pointer: fine) {
.wg-org-nav-item:hover {
    color: #2563eb;
}
}

.wg-org-nav-item.active {
    color: #2563eb;
    font-weight: 700;
    background: transparent;
}

.wg-org-nav-item .wg-nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.wg-org-nav-item.active .wg-nav-dot,
.wg-org-nav-item .wg-nav-dot.active-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2563eb;
    border: 2.5px solid #2563eb;
    box-shadow: inset 0 0 0 1.5px #ffffff;
}

/* Right Content: Static Mockup Image Behavior (Zero Real Photos) */
.wg-org-content {
    flex: 1;
    padding-left: 20px;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.wg-org-content * {
    pointer-events: none !important;
    cursor: default !important;
}

.wg-org-view-panel {
    display: none;
    animation: wgFadeIn 0.22s ease forwards;
}

.wg-org-view-panel.active {
    display: block;
}

/* --------------------------------------------------------------------------
   View 1: Organization Tree Styles (Screenshot 2)
   -------------------------------------------------------------------------- */
.wg-org-tree-wrap {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 28px 36px;
    min-height: 480px;
    display: flex;
    flex-direction: column;
}

.wg-org-dept-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wg-text-headings);
    margin-bottom: 28px;
}

.wg-org-tree-canvas {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 10px 0;
}

.wg-org-tree-row {
    display: flex;
    align-items: center;
}

.wg-org-tree-row.root-row {
    align-items: center;
}

.wg-org-tree-row.sub-row {
    align-items: center;
    position: relative;
    padding-left: 14px;
}

.wg-sub-elbow-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.wg-sub-elbow-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    top: -34px;
    height: 34px;
    width: 1.5px;
    background: #94a3b8;
}

.wg-org-node-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    padding: 6px 18px 6px 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    flex-shrink: 0;
    min-width: 175px;
}

.wg-org-node-info {
    display: flex;
    flex-direction: column;
}

.wg-org-node-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--wg-text-headings);
    line-height: 1.25;
}

.wg-org-node-role {
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.2;
    margin-top: 2px;
}

.wg-org-tree-connector {
    display: flex;
    align-items: center;
    margin: 0 4px;
}

.wg-connector-line {
    display: inline-block;
    width: 42px;
    height: 1.5px;
    background: #94a3b8;
    flex-shrink: 0;
}

.wg-connector-line.mid {
    width: 32px;
}

.wg-connector-line.short {
    width: 24px;
}

.wg-connector-line.long {
    width: 44px;
}

.wg-connector-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.wg-connector-badge.badge-blue {
    background: #2563eb;
    color: #ffffff;
}

.wg-connector-badge.badge-grey {
    background: #64748b;
    color: #ffffff;
}

.wg-org-tree-tail {
    display: flex;
    align-items: center;
    margin-left: 4px;
}

/* --------------------------------------------------------------------------
   View 2 & 3: New Hires & Favourites (Screenshots 2 & 3)
   -------------------------------------------------------------------------- */
.wg-org-panel-header {
    margin-bottom: 16px;
}

.wg-org-panel-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wg-text-headings);
    margin: 0;
}

.wg-org-tabs-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 18px;
}

.wg-org-tab-item {
    font-size: 0.88rem;
    font-weight: 700;
    color: #64748b;
    padding-bottom: 8px;
    position: relative;
}

.wg-org-tab-item.active {
    color: #0f172a;
}

.wg-org-tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #eab308;
}

.wg-org-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.wg-org-profile-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
}

.wg-opc-top {
    display: flex;
    justify-content: flex-end;
    min-height: 20px;
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1;
    margin-bottom: 4px;
}

.wg-opc-top.has-badges {
    justify-content: space-between;
    align-items: center;
}

.wg-opc-top-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.star-icon {
    color: #f59e0b;
    font-size: 0.95rem;
}

.chat-icon {
    font-size: 0.85rem;
}

.wg-opc-dots {
    letter-spacing: 1px;
    color: #94a3b8;
}

.wg-opc-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.wg-avatar-silhouette {
    display: inline-flex;
    border-radius: 50%;
    overflow: hidden;
}

.wg-opc-name-row {
    font-size: 0.82rem;
    margin-bottom: 12px;
}

.wg-opc-role-sub {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 2px;
}

.wg-opc-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.72rem;
    color: #475569;
    text-align: left;
    border-top: 1px solid #f8fafc;
    padding-top: 10px;
}

.wg-opc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wg-opc-icon {
    color: #64748b;
    font-size: 0.85rem;
    width: 16px;
    flex-shrink: 0;
    text-align: center;
}

.wg-opc-link {
    color: #2563eb;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   View 4: Announcements (Screenshot 1)
   -------------------------------------------------------------------------- */
.wg-ann-top-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
}

.wg-ann-tabs-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.wg-ann-tab.active {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
}

.wg-ann-tab-sub {
    font-size: 0.92rem;
    font-weight: 500;
    color: #64748b;
}

.wg-ann-actions-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.wg-ann-search-box {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #94a3b8;
}

.wg-ann-search-placeholder {
    color: #64748b;
    font-weight: 500;
}

.wg-ann-add-btn {
    background: #48bb78;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
.wg-ann-add-btn:hover {
    background: #38a169;
}
}

.wg-ann-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wg-ann-item {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 18px 22px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-ann-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.wg-ann-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
    line-height: 1.3;
}

.wg-ann-author {
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 8px;
    font-weight: 500;
}

.wg-ann-desc {
    font-size: 0.84rem;
    color: #334155;
    line-height: 1.45;
    margin: 0;
}

.wg-ann-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.76rem;
    color: #94a3b8;
    white-space: nowrap;
    margin-left: 12px;
    margin-top: 2px;
}

/* --------------------------------------------------------------------------
   View 5 & 6: Groups & Tasks (Screenshot 5)
   -------------------------------------------------------------------------- */
.wg-grp-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.wg-grp-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
}

.wg-grp-active {
    color: #0f172a;
    font-weight: 700;
}

.wg-grp-add-btn {
    background: #10b981;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.wg-grp-table-header {
    display: grid;
    grid-template-columns: 1.4fr 1.6fr 2fr;
    padding: 10px 18px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-grp-table-row {
    display: grid;
    grid-template-columns: 1.4fr 1.6fr 2fr;
    padding: 12px 18px;
    border-bottom: 1px solid #f8fafc;
    font-size: 0.76rem;
    color: #475569;
    align-items: center;
}

.wg-grp-table-row:last-child {
    border-bottom: none;
}

/* ==========================================================================
   Section 5: Timesheets Window & Mockups (Matching Screenshots 1 to 5)
   ========================================================================== */
.wg-ts-window {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-top: 24px;
}

.wg-ts-split-body {
    display: flex;
    padding: 20px 24px 28px;
    min-height: 520px;
    position: relative;
    background: #f8fafc;
}

/* Left Sidebar for Timesheets */
.wg-ts-sidebar {
    width: 225px;
    flex-shrink: 0;
    padding-right: 18px;
    border-right: 1px solid #f1f5f9;
    position: relative;
}

.wg-ts-nav-list {
    list-style: none;
    padding: 0;
    margin: 105px 0 0;
}

.wg-ts-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 10px;
    margin-bottom: 6px;
    border-radius: 6px;
    border: none;
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
    background: transparent;
}

@media (hover: hover) and (pointer: fine) {
.wg-ts-nav-item:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.04);
}
}

.wg-ts-nav-item.active {
    color: #2563eb;
    font-weight: 700;
    background: transparent;
}

.wg-ts-nav-item .wg-nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.wg-ts-nav-item.active .wg-nav-dot,
.wg-ts-nav-item .wg-nav-dot.active-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2563eb;
    border: 2.5px solid #2563eb;
    box-shadow: inset 0 0 0 1.5px #ffffff;
}

/* Right Content: Static Mockup Image Behavior (Zero Real Photos) */
.wg-ts-content {
    flex: 1;
    padding-left: 20px;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.wg-ts-content * {
    pointer-events: none !important;
    cursor: default !important;
}

.wg-ts-view-panel {
    display: none;
    animation: wgFadeIn 0.22s ease forwards;
}

.wg-ts-view-panel.active {
    display: block;
}

/* --------------------------------------------------------------------------
   View 1: TimeLogs Styles (Screenshot 2)
   -------------------------------------------------------------------------- */
.wg-ts-user-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-ts-user-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-ts-user-select {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}

.wg-ts-date-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #475569;
}

.wg-ts-nav-arrow {
    font-size: 1.15rem;
    color: #64748b;
    padding: 0 4px;
    line-height: 1;
}

.wg-ts-date-range {
    color: #1e293b;
    font-weight: 600;
}

.wg-ts-actions-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wg-ts-log-btn {
    background: #065f46;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
}

.wg-ts-icon-btn {
    color: #64748b;
    font-size: 0.82rem;
    padding: 3px 6px;
}

.wg-ts-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.wg-ts-field-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.75rem;
    color: #475569;
    font-weight: 500;
}

.wg-ts-input-box {
    flex: 1;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 0.76rem;
    color: #64748b;
    min-width: 140px;
}

.wg-ts-timer-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wg-ts-timer-digits {
    font-weight: 700;
}

.wg-ts-table-wrap {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-ts-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    padding: 8px 16px;
    border-bottom: 1px solid #edf2f7;
    border-top: 1px solid #edf2f7;
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
}

.wg-ts-group-header:first-child {
    border-top: none;
}

.wg-ts-gh-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wg-ts-gh-date {
    color: #1e293b;
}

.wg-ts-gh-time {
    color: #64748b;
    font-weight: 600;
}

.wg-ts-chk {
    accent-color: #2563eb;
    width: 14px;
    height: 14px;
    margin: 0;
}

.wg-ts-row {
    display: grid;
    grid-template-columns: 24px 2.2fr 2fr 1.1fr 65px 44px;
    align-items: center;
    padding: 9px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.76rem;
    color: #475569;
}

.wg-ts-row:last-child {
    border-bottom: none;
}

.wg-ts-col-job {
    font-weight: 600;
    color: #1e293b;
}

.wg-ts-sub {
    color: #64748b;
    font-weight: normal;
}

.wg-ts-col-desc {
    color: #475569;
}

.wg-ts-col-time {
    font-weight: 600;
    color: #1e293b;
    text-align: right;
    padding-right: 6px;
}

.wg-ts-col-pin {
    font-size: 0.8rem;
    text-align: right;
    white-space: nowrap;
}

.wg-badge-b {
    background: #dcfce7;
    color: #15803d;
    border-radius: 3px;
    padding: 2px 7px;
    font-size: 0.68rem;
    font-weight: 600;
    display: inline-block;
}

.wg-badge-nb {
    background: #f1f5f9;
    color: #475569;
    border-radius: 3px;
    padding: 2px 7px;
    font-size: 0.68rem;
    font-weight: 600;
    display: inline-block;
}

.wg-ts-actions-hover {
    font-size: 0.72rem;
    margin-left: 4px;
}

/* Bottom Status Widget */
.wg-ts-summary-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.wg-ts-sum-box {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-ts-sum-label {
    font-size: 0.76rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 6px;
}

.wg-ts-sum-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.wg-ts-sum-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wg-ts-ext-icon {
    color: #2563eb;
    font-weight: 700;
    font-size: 0.88rem;
}

/* --------------------------------------------------------------------------
   View 2: Timesheets Styles (Screenshot 4)
   -------------------------------------------------------------------------- */
.wg-ts-top-bar-simple {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.wg-ts-dropdown-pill {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
}

.wg-ts-add-btn {
    background: #10b981;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
}

.wg-ts-table-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.th-timesheets {
    display: grid;
    grid-template-columns: 24px 2.2fr 1.8fr 85px 110px 45px;
    align-items: center;
}

.wg-ts-grid-header {
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--wg-text-headings);
}

.wg-ts-grid-row {
    padding: 9px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.75rem;
    color: #475569;
}

.wg-ts-grid-row:last-child {
    border-bottom: none;
}

.wg-btn-app-rej {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #334155;
    display: inline-block;
}

.wg-status-icon {
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
}

/* --------------------------------------------------------------------------
   View 3: Projects Styles (Screenshot 1)
   -------------------------------------------------------------------------- */
.wg-ts-filter-tab {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    background: transparent;
}

.wg-ts-filter-tab.active {
    background: #e2e8f0;
    color: #0f172a;
}

.th-projects {
    display: grid;
    grid-template-columns: 24px 2.5fr 110px 110px 75px 75px;
    align-items: center;
}

.wg-circle-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
}

.wg-job-doc-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.76rem;
    color: #334155;
}

.wg-jdb-num {
    background: #10b981;
    color: #ffffff;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.68rem;
    font-weight: 700;
}

.wg-jdb-num.plus {
    background: #3b82f6;
}

/* --------------------------------------------------------------------------
   View 4: Jobs Styles (Screenshot 5)
   -------------------------------------------------------------------------- */
.th-jobs {
    display: grid;
    grid-template-columns: 24px 2.2fr 95px 85px 80px 95px 120px 60px 65px;
    align-items: center;
}

.wg-tc-log.has-prog {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wg-prog-line {
    width: 80px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
}

.prog-fill {
    display: block;
    height: 100%;
    background: #3b82f6;
}

.wg-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    color: #334155;
}

.wg-ub-num {
    background: #10b981;
    color: #ffffff;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.68rem;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   View 5: Job Schedule Styles (Screenshot 3)
   -------------------------------------------------------------------------- */
.wg-ts-toggle-pill {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #64748b;
}

.wg-ts-toggle-pill span.active {
    color: #0f172a;
    font-weight: 700;
}

.wg-ts-published-btn {
    background: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 0.76rem;
    font-weight: 600;
}

.th-schedule {
    display: grid;
    grid-template-columns: 190px repeat(6, 1fr);
    align-items: stretch;
}

.wg-sc-emp {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-right: 1px solid #f1f5f9;
}

.wg-sc-name {
    font-size: 0.76rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.wg-sc-hours {
    font-size: 0.68rem;
    color: #64748b;
    margin-top: 2px;
}

.wg-sc-day {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #f1f5f9;
    min-height: 48px;
    font-size: 0.74rem;
    color: #475569;
}

.wg-sc-day:last-child {
    border-right: none;
}

.wg-ts-grid-header .wg-sc-day {
    min-height: unset;
    flex-direction: column;
    gap: 2px;
    font-weight: 700;
    color: #334155;
    padding: 8px 4px;
}

.sc-num {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 500;
}

.wg-sc-weekend {
    background: #fef08a;
    color: #854d0e;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   View 6: Reports Styles (Screenshot 6)
   -------------------------------------------------------------------------- */
.th-reports {
    display: grid;
    grid-template-columns: 2.2fr 1.6fr 1.6fr 1fr 1fr;
    align-items: center;
}

.wg-tc-rep-name {
    font-weight: 600;
    color: #1e293b;
}

.wg-tc-rep-by,
.wg-tc-rep-range,
.wg-tc-rep-fmt {
    color: #475569;
}

.wg-tc-rep-st {
    color: #15803d;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   Section 6: Leave Styles (Matching Screenshots 1 to 4)
   ========================================================================== */
.wg-leave-window {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.wg-leave-split-body {
    display: flex;
    min-height: 480px;
    position: relative;
    background: #ffffff;
}

/* --- Left Sidebar & Dynamic Tooltip --- */
.wg-leave-sidebar {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid #edf2f7;
    padding: 24px 16px;
    position: relative;
    background: #fafbfc;
    border-bottom-left-radius: 12px;
}

.wg-leave-nav-list {
    list-style: none;
    padding: 0;
    margin: 110px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wg-leave-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    position: relative;
}

@media (hover: hover) and (pointer: fine) {
.wg-leave-nav-item:hover {
    background: #f1f5f9;
    color: #1e293b;
}
}

.wg-leave-nav-item.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
}

.wg-leave-nav-item .wg-nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: transparent;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s, transform 0.2s, filter 0.2s;
    flex-shrink: 0;
}

.wg-leave-nav-item.active .wg-nav-dot {
    border-color: #2563eb;
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* --- Right Mockup Content Area --- */
.wg-leave-content {
    flex: 1;
    padding: 20px 24px;
    min-width: 0;
    background: #f8fafc;
    border-bottom-right-radius: 12px;
    pointer-events: none !important;
    user-select: none !important;
}

.wg-leave-view-panel {
    display: none;
    animation: wgFadeIn 0.25s ease forwards;
}

.wg-leave-view-panel.active {
    display: block;
}

/* --- Common Top Bars & Buttons --- */
.wg-leave-user-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-leave-user-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-leave-user-select {
    font-size: 0.84rem;
    font-weight: 700;
    color: #1e293b;
}

.wg-leave-date-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
}

.wg-leave-nav-arrow {
    font-size: 1.15rem;
    color: #64748b;
    padding: 0 4px;
    line-height: 1;
    cursor: pointer;
}

.wg-leave-date-range {
    color: #1e293b;
    font-weight: 600;
}

.wg-leave-actions-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wg-leave-btn-primary {
    background: #065f46;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.wg-leave-btn-outline {
    background: #ffffff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 0.76rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wg-leave-icon-btn {
    color: #64748b;
    font-size: 0.82rem;
    padding: 3px 6px;
}

.wg-leave-top-bar-simple {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-leave-dropdown-pill {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 4px 12px;
    border-radius: 4px;
}

.wg-leave-bar-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
}

/* --- View 1: Views Timeline & Balances (Screenshot 2) --- */
.wg-leave-timeline-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-leave-tl-row {
    display: grid;
    grid-template-columns: 145px 1fr 90px 40px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.8rem;
}

.wg-leave-tl-row:last-child {
    border-bottom: none;
}

.wg-leave-tl-date {
    font-weight: 600;
    color: #334155;
    line-height: 1.35;
}

.wg-leave-to-sub {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 500;
}

.wg-leave-tl-bar-wrap {
    display: flex;
    align-items: center;
    padding: 0 12px;
}

.wg-leave-tl-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.76rem;
    font-weight: 600;
}

.wg-leave-tl-bar.bar-lime {
    background: #ecfccb;
    border: 1px solid #a3e635;
    color: #4d7c0f;
}

.wg-leave-tl-bar.bar-duo {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #b45309;
}

.wg-leave-tl-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

.wg-leave-tl-pill {
    font-weight: 600;
}

.wg-leave-tl-val {
    font-weight: 600;
    color: #334155;
    text-align: right;
}

.wg-leave-tl-st {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wg-st-cancel {
    color: #b91c1c;
    font-size: 1.1rem;
}

.wg-leave-bal-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-leave-bal-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #f8fafc;
    border-left: 3px solid #cbd5e1;
}

.wg-leave-bal-col.c-blue {
    border-left-color: #3b82f6;
}

.wg-leave-bal-col.c-navy {
    border-left-color: #1e40af;
}

.wg-leave-bal-col.c-cyan {
    border-left-color: #06b6d4;
}

.wg-leave-bal-col.c-yellow {
    border-left-color: #f59e0b;
}

.wg-leave-bal-col.c-grey {
    border-left-color: #94a3b8;
}

.wg-leave-bal-col.c-dark {
    border-left-color: #334155;
}

.wg-bal-label {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
}

.wg-bal-val {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
}

/* --- View 2: Compensatory Off (Screenshot 1) --- */
.wg-leave-table-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-leave-grid-header {
    background: #f8fafc;
    padding: 10px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    border-bottom: 1px solid #edf2f7;
    text-transform: none;
}

.wg-leave-grid-row {
    padding: 12px 16px;
    font-size: 0.78rem;
    border-bottom: 1px solid #f1f5f9;
    align-items: center;
    transition: background 0.15s;
}

.wg-leave-grid-row:last-child {
    border-bottom: none;
}

.th-compoff {
    display: grid;
    grid-template-columns: 32px 1.5fr 1fr 1.1fr 1.1fr 1.2fr 1fr;
    align-items: center;
}

.wg-btn-book-comp {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    display: inline-block;
    cursor: pointer;
}

.wg-status-availed {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    display: inline-block;
}

/* --- View 3: Holiday (Screenshot 3) --- */
.th-holidays {
    display: grid;
    grid-template-columns: 1.6fr 1.3fr 1.2fr 2.4fr 0.8fr;
    align-items: center;
}

.wg-tc-hname {
    font-weight: 600;
    color: #1e293b;
}

.wg-tc-hdate {
    color: #334155;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wg-day-sub {
    color: #64748b;
    font-size: 0.72rem;
}

.wg-tc-hloc,
.wg-tc-hshift,
.wg-tc-hdesc {
    color: #475569;
}

/* --- View 4: Reports Matrix (Screenshot 4) --- */
.wg-avail-matrix-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-avail-matrix-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wg-avail-matrix-header {
    display: grid;
    grid-template-columns: 180px repeat(21, 38px);
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
    text-align: center;
    min-width: 978px;
}

.wg-avail-matrix-row {
    display: grid;
    grid-template-columns: 180px repeat(21, 38px);
    border-bottom: 1px solid #f1f5f9;
    align-items: center;
    min-width: 978px;
    font-size: 0.76rem;
}

.wg-avail-matrix-row:last-child {
    border-bottom: none;
}

.wg-am-emp-col {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    text-align: left;
    font-weight: 500;
    color: #334155;
    border-right: 1px solid #edf2f7;
    background: #ffffff;
    position: sticky;
    left: 0;
    z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
.wg-avail-matrix-row:hover .wg-am-emp-col {
    background: #fafafa;
}
}

.wg-avail-matrix-header .wg-am-emp-col {
    font-weight: 700;
    color: #64748b;
    background: #f8fafc;
}

.wg-am-day {
    padding: 6px 2px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #334155;
    border-right: 1px solid #edf2f7;
    line-height: 1.15;
}

.wg-sub-d {
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 500;
    display: inline-block;
    margin-top: 2px;
}

.wg-am-cell {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #f1f5f9;
}

.is-weekend-col {
    background: #fefce8 !important;
}

.wg-tag-leave {
    background: #10b981;
    color: #ffffff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}

.wg-tag-holiday {
    background: #f97316;
    color: #ffffff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(249, 115, 22, 0.3);
}

.wg-avail-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.74rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-leg-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wg-leg-item::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.wg-leg-item.c-cyan { color: #06b6d4; }
.wg-leg-item.c-blue { color: #3b82f6; }
.wg-leg-item.c-teal { color: #0d9488; }
.wg-leg-item.c-sky { color: #0284c7; }
.wg-leg-item.c-navy { color: #1e40af; }
.wg-leg-item.c-green { color: #10b981; }
.wg-leg-item.c-yellow { color: #f59e0b; }

.wg-leg-dots {
    color: #94a3b8;
    font-weight: 700;
    font-size: 0.9rem;
}

/* ==========================================================================
   Section 7: Attendance Styles (Matching Screenshots 1 to 3 with India Shifts)
   ========================================================================== */
.wg-att-window {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.wg-att-split-body {
    display: flex;
    min-height: 480px;
    position: relative;
    background: #ffffff;
}

/* --- Left Sidebar & Dynamic Tooltip --- */
.wg-att-sidebar {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid #edf2f7;
    padding: 24px 16px;
    position: relative;
    background: #fafbfc;
    border-bottom-left-radius: 12px;
}

.wg-att-nav-list {
    list-style: none;
    padding: 0;
    margin: 100px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wg-att-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    position: relative;
}

@media (hover: hover) and (pointer: fine) {
.wg-att-nav-item:hover {
    background: #f1f5f9;
    color: #1e293b;
}
}

.wg-att-nav-item.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
}

.wg-att-nav-item .wg-nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: transparent;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s, transform 0.2s, filter 0.2s;
    flex-shrink: 0;
}

.wg-att-nav-item.active .wg-nav-dot {
    border-color: #2563eb;
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* --- Right Mockup Content Area --- */
.wg-att-content {
    flex: 1;
    padding: 20px 24px;
    min-width: 0;
    background: #f8fafc;
    border-bottom-right-radius: 12px;
    pointer-events: none !important;
    user-select: none !important;
}

.wg-att-view-panel {
    display: none;
    animation: wgFadeIn 0.25s ease forwards;
}

.wg-att-view-panel.active {
    display: block;
}

/* --- Common Top Bar & Controls --- */
.wg-att-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-att-user-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-att-user-select {
    font-size: 0.84rem;
    font-weight: 700;
    color: #1e293b;
}

.wg-att-date-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #475569;
}

.wg-att-nav-arrow {
    font-size: 1.15rem;
    color: #64748b;
    padding: 0 4px;
    line-height: 1;
    cursor: pointer;
}

.wg-att-date-month {
    color: #1e293b;
    font-weight: 600;
}

.wg-att-title-pill {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 4px 12px;
    border-radius: 4px;
}

.wg-att-actions-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wg-att-btn-primary {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

.wg-att-icon-btn {
    color: #64748b;
    font-size: 0.82rem;
    padding: 3px 6px;
}

/* --- View 1: Monthly Calendar Grid (Screenshot 1) --- */
.wg-att-cal-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-att-cal-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
    text-align: center;
}

.wg-att-cal-hdr {
    padding: 9px 4px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #64748b;
    border-right: 1px solid #edf2f7;
}

.wg-att-cal-hdr:last-child {
    border-right: none;
}

.wg-att-cal-hdr.is-weekend-hdr {
    color: #854d0e;
    background: #fefce8;
}

.wg-att-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.wg-att-cal-cell {
    min-height: 82px;
    padding: 8px;
    border-right: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    background: #ffffff;
}

.wg-att-cal-cell:nth-child(7n) {
    border-right: none;
}

.wg-att-cal-cell.is-weekend-cell {
    background: #fefce8;
}

.wg-att-cal-cell.empty-cell {
    background: #f8fafc;
    opacity: 0.4;
}

.wg-att-cal-day-num {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}

.wg-att-today-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #065f46;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
}

.wg-att-pill {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 4px;
    border-left: 3px solid transparent;
    line-height: 1.25;
}

.wg-att-pill.pill-present {
    background: #ecfdf5;
    color: #065f46;
    border-left-color: #10b981;
}

.wg-att-pill.pill-absent {
    background: #fef2f2;
    color: #991b1b;
    border-left-color: #ef4444;
}

.wg-att-pill.pill-leave {
    background: #fff7ed;
    color: #9a3412;
    border-left-color: #f97316;
}

.wg-att-pill.pill-holiday {
    background: #eff6ff;
    color: #1e40af;
    border-left-color: #3b82f6;
}

/* --- View 2: Regularization Table (Screenshot 2) --- */
.wg-att-table-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    margin-bottom: 14px;
}

.th-regularization {
    display: grid;
    grid-template-columns: 32px 1.4fr 1.1fr 1.2fr 1.4fr 1.1fr;
    align-items: center;
}

.wg-att-grouped-header {
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
    padding: 8px 16px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
}

.wg-att-tc-chk {
    display: flex;
    align-items: center;
}

.wg-att-tc-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wg-att-grp-title {
    text-align: center;
    font-size: 0.74rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 2px;
}

.wg-att-grp-sub {
    display: flex;
    justify-content: space-around;
    font-size: 0.7rem;
    color: #94a3b8;
}

.wg-att-tc-hrs,
.wg-att-tc-status {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    font-size: 0.78rem;
    color: #475569;
}

.wg-st-half {
    color: #d97706;
    font-weight: 500;
}

.wg-st-pres {
    color: #15803d;
    font-weight: 500;
}

.wg-status-approved {
    color: #15803d;
    font-weight: 600;
    font-size: 0.76rem;
}

.wg-att-grid-row {
    padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.78rem;
    align-items: center;
    transition: background 0.15s;
}

.wg-att-grid-row:last-child {
    border-bottom: none;
}

.wg-att-tc-emp {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1e293b;
}

.wg-att-tc-day {
    color: #334155;
}

.wg-att-tc-appr {
    text-align: center;
}

/* --- View 3: Shift Schedule Table (Screenshot 3 + India Day/Night Shifts) --- */
.th-shifts {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    align-items: center;
    padding: 12px 18px;
}

.wg-att-grid-header.th-shifts {
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
}

.wg-shift-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #1e293b;
    font-size: 0.8rem;
}

.wg-shift-time-cell {
    color: #475569;
    font-size: 0.8rem;
    font-weight: 500;
}

.wg-shift-color-box {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.wg-shift-color-box.box-purple {
    background: #c084fc;
    border: 1px solid #a855f7;
}

.wg-shift-color-box.box-amber {
    background: #fcd34d;
    border: 1px solid #f59e0b;
}

.wg-shift-color-box.box-navy {
    background: #818cf8;
    border: 1px solid #6366f1;
}

.wg-shift-color-box.box-teal {
    background: #5eead4;
    border: 1px solid #14b8a6;
}

.wg-shift-color-box.box-cyan {
    background: #67e8f9;
    border: 1px solid #06b6d4;
}

/* ==========================================================================
   Section 8: Performance Styles (Matching Screenshots 1 and 2)
   ========================================================================== */
.wg-perf-window {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.wg-perf-split-body {
    display: flex;
    min-height: 480px;
    position: relative;
    background: #ffffff;
}

/* --- Left Sidebar & Dynamic Tooltip --- */
.wg-perf-sidebar {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid #edf2f7;
    padding: 24px 16px;
    position: relative;
    background: #fafbfc;
    border-bottom-left-radius: 12px;
}

.wg-perf-nav-list {
    list-style: none;
    padding: 0;
    margin: 95px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wg-perf-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    position: relative;
}

@media (hover: hover) and (pointer: fine) {
.wg-perf-nav-item:hover {
    background: #f1f5f9;
    color: #1e293b;
}
}

.wg-perf-nav-item.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
}

.wg-perf-nav-item .wg-nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: transparent;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s, transform 0.2s, filter 0.2s;
    flex-shrink: 0;
}

.wg-perf-nav-item.active .wg-nav-dot {
    border-color: #2563eb;
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* --- Right Mockup Content Area --- */
.wg-perf-content {
    flex: 1;
    padding: 20px 24px;
    min-width: 0;
    background: #f8fafc;
    border-bottom-right-radius: 12px;
    pointer-events: none !important;
    user-select: none !important;
}

.wg-perf-view-panel {
    display: none;
    animation: wgFadeIn 0.25s ease forwards;
}

.wg-perf-view-panel.active {
    display: block;
}

/* --- View 1: My Review Styles --- */
.wg-perf-emp-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-perf-emp-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wg-perf-emp-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wg-perf-emp-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.wg-perf-emp-role {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
}

.wg-perf-emp-mail {
    font-size: 0.74rem;
    color: #2563eb;
    text-decoration: none;
}

.wg-perf-badges-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wg-perf-badge-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 0.8rem;
}

.wg-perf-badge-pill.pill-pos {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.wg-perf-badge-pill.pill-neg {
    background: #fef2f2;
    border-color: #fecaca;
}

.wg-perf-badge-pill.pill-award {
    background: #fefce8;
    border-color: #fef08a;
}

.wg-perf-badge-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.wg-perf-badge-num {
    font-weight: 700;
    font-size: 0.78rem;
}

.wg-perf-badge-num.num-green { color: #15803d; }
.wg-perf-badge-num.num-red { color: #b91c1c; }
.wg-perf-badge-num.num-yellow { color: #b45309; }

/* Sub-Navigation Tabs */
.wg-perf-sub-tabs {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 14px;
    padding-bottom: 4px;
}

.wg-perf-sub-tab {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    padding: 6px 4px;
    cursor: pointer;
    position: relative;
}

.wg-perf-sub-tab.active {
    color: #2563eb;
    font-weight: 700;
}

.wg-perf-sub-tab.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 2px;
    background: #2563eb;
    border-radius: 2px;
}

/* KRA Section Bar */
.wg-perf-kra-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.wg-perf-kra-heading {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
}

.wg-perf-btn-tag {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

/* KRA List */
.wg-perf-kra-list {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-perf-kra-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.8rem;
}

.wg-perf-kra-item:last-child {
    border-bottom: none;
}

.wg-perf-kra-title {
    font-weight: 600;
    color: #1e293b;
    flex: 1.5;
}

.wg-perf-kra-weight {
    flex: 1;
    color: #15803d;
    font-size: 0.78rem;
    text-align: left;
}

.wg-perf-kra-weight strong {
    font-weight: 700;
}

.wg-perf-kra-chat {
    color: #64748b;
    font-size: 0.85rem;
    opacity: 0.7;
    width: 24px;
    text-align: right;
}

/* --- View 2: Peers View Styles --- */
.wg-perf-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-perf-title-pill {
    font-size: 0.84rem;
    font-weight: 700;
    color: #1e293b;
}

.wg-perf-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-perf-icon-btn {
    color: #64748b;
    font-size: 0.82rem;
    padding: 3px 6px;
}

.wg-perf-peers-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-perf-peers-header {
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
    padding: 9px 18px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #64748b;
}

.wg-perf-peers-list {
    display: flex;
    flex-direction: column;
}

.wg-perf-peer-row {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}

.wg-perf-peer-row:last-child {
    border-bottom: none;
}

.wg-perf-peer-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
}

.wg-perf-peer-name {
    font-weight: 600;
    color: #2563eb;
}

.wg-perf-peer-tenure {
    color: #64748b;
    font-size: 0.76rem;
}

/* ==========================================================================
   Section 9: Files Mockup Styles (#secFiles)
   Matching User Screenshots: Organization Files vs Employee Files
   ========================================================================== */
.wg-files-window {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    margin-top: 24px;
}

.wg-files-chrome {
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
    padding: 10px 16px;
    display: flex;
    align-items: center;
}

.wg-files-split-body {
    display: flex;
    min-height: 440px;
    position: relative;
    background: #ffffff;
}

/* --- Left Sidebar & Dynamic Tooltip --- */
.wg-files-sidebar {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid #edf2f7;
    padding: 24px 16px;
    position: relative;
    background: #fafbfc;
    border-bottom-left-radius: 12px;
}

.wg-files-nav-list {
    list-style: none;
    padding: 0;
    margin: 95px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wg-files-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    position: relative;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

@media (hover: hover) and (pointer: fine) {
.wg-files-nav-item:hover {
    background: #f1f5f9;
    color: #1e293b;
}
}

.wg-files-nav-item.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
}

.wg-files-nav-item .wg-nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: transparent;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s, transform 0.2s, filter 0.2s;
    flex-shrink: 0;
}

.wg-files-nav-item.active .wg-nav-dot {
    border-color: #2563eb;
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* --- Right Mockup Content Area --- */
.wg-files-content {
    flex: 1;
    padding: 20px 24px;
    min-width: 0;
    background: #ffffff;
    border-bottom-right-radius: 12px;
    pointer-events: none !important;
    user-select: none !important;
}

.wg-files-view-panel {
    display: none;
    animation: wgFadeIn 0.25s ease forwards;
}

.wg-files-view-panel.active {
    display: block;
}

/* Top bar for Files */
.wg-files-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 8px;
}

.wg-files-header-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.wg-files-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wg-files-dropdown-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #374151;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.wg-files-caret {
    font-size: 0.7rem;
    color: #6b7280;
}

.wg-files-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #065f46;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.2);
}

.wg-files-btn-add .wg-files-plus {
    font-size: 0.9rem;
    font-weight: 700;
}

.wg-files-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: transparent;
    border: none;
    padding: 4px 6px;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Files Table */
.wg-files-table-wrap {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-files-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.78rem;
}

.wg-files-table thead tr {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.wg-files-table th {
    padding: 10px 14px;
    font-weight: 700;
    color: #1e293b;
    font-size: 0.76rem;
    white-space: nowrap;
}

.wg-files-table th.th-chk,
.wg-files-table td.td-chk {
    width: 36px;
    text-align: center;
    padding-left: 14px;
    padding-right: 6px;
}

.wg-files-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.wg-files-table tbody tr:last-child td {
    border-bottom: none;
}

.wg-file-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-file-name-cell .wg-pdf-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.wg-file-link-title {
    color: #2563eb;
    font-weight: 500;
    font-size: 0.78rem;
}

.wg-file-hover-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    color: #94a3b8;
}

.wg-row-icon {
    stroke: #94a3b8;
}

.wg-files-table td.td-loc,
.wg-files-table td.td-cat,
.wg-files-table td.td-shared,
.wg-files-table td.td-date {
    color: #475569;
    font-size: 0.76rem;
    white-space: nowrap;
}

/* ==========================================================================
   Section 10: Cases Mockup Styles (#secCases)
   Matching User Screenshots: Home, My Requests, Cases, Reports
   ========================================================================== */
.wg-cases-window {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    margin-top: 24px;
}

.wg-cases-chrome {
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
    padding: 10px 16px;
    display: flex;
    align-items: center;
}

.wg-cases-split-body {
    display: flex;
    min-height: 520px;
    position: relative;
    background: #ffffff;
}

/* --- Left Sidebar & Dynamic Tooltip --- */
.wg-cases-sidebar {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid #edf2f7;
    padding: 24px 16px;
    position: relative;
    background: #fafbfc;
    border-bottom-left-radius: 12px;
}

.wg-cases-nav-list {
    list-style: none;
    padding: 0;
    margin: 95px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wg-cases-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    position: relative;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

@media (hover: hover) and (pointer: fine) {
.wg-cases-nav-item:hover {
    background: #f1f5f9;
    color: #1e293b;
}
}

.wg-cases-nav-item.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
}

.wg-cases-nav-item .wg-nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: transparent;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s, transform 0.2s, filter 0.2s;
    flex-shrink: 0;
}

.wg-cases-nav-item.active .wg-nav-dot {
    border-color: #2563eb;
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* --- Right Mockup Content Area --- */
.wg-cases-content {
    flex: 1;
    padding: 20px 24px;
    min-width: 0;
    background: #ffffff;
    border-bottom-right-radius: 12px;
    pointer-events: none !important;
    user-select: none !important;
}

.wg-cases-view-panel {
    display: none;
    animation: wgFadeIn 0.25s ease forwards;
}

.wg-cases-view-panel.active {
    display: block;
}

/* Top bar for Cases */
.wg-cases-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 8px;
}

.wg-cases-header-title {
    font-size: 0.94rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.wg-cases-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wg-cases-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: transparent;
    border: none;
    padding: 4px 6px;
    font-size: 0.9rem;
    cursor: pointer;
}

/* --- View 1: Home Topics Grid --- */
.wg-cases-home-header {
    margin-bottom: 16px;
}

.wg-cases-home-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.wg-cases-topics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.wg-cases-topic-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    min-height: 150px;
    justify-content: space-between;
}

.wg-cases-topic-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.wg-cases-topic-icon-wrap.icon-green {
    background: #ecfdf5;
}

.wg-cases-topic-icon-wrap.icon-purple {
    background: #f5f3ff;
}

.wg-cases-topic-icon-wrap.icon-amber {
    background: #fef3c7;
}

.wg-cases-topic-icon-wrap.icon-rose {
    background: #ffe4e6;
}

.wg-cases-topic-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.wg-cases-topic-desc {
    font-size: 0.7rem;
    color: #64748b;
    margin: 0;
    line-height: 1.3;
}

.wg-cases-topic-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 6px;
}

.wg-cases-topic-user-icon {
    color: #94a3b8;
    display: inline-flex;
}

.wg-cases-topic-more {
    font-size: 0.72rem;
    color: #2563eb;
    font-weight: 600;
}

/* --- Views 2 & 3: Table Styles --- */
.wg-cases-table-wrap {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.wg-cases-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.78rem;
}

.wg-cases-table thead tr {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.wg-cases-table th {
    padding: 10px 14px;
    font-weight: 700;
    color: #1e293b;
    font-size: 0.76rem;
    white-space: nowrap;
}

.wg-cases-table th.th-details {
    width: 52%;
}

.wg-cases-table th.th-category {
    width: 24%;
}

.wg-cases-table th.th-status {
    width: 12%;
}

.wg-cases-table th.th-assigned {
    width: 12%;
    text-align: center;
}

.wg-cases-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.wg-case-detail-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wg-avatar-initials {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 700;
    flex-shrink: 0;
}

.wg-avatar-initials.bg-amber {
    background: #fef3c7;
    color: #d97706;
}

.wg-avatar-initials.bg-rose {
    background: #ffe4e6;
    color: #e11d48;
}

.wg-avatar-user-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wg-case-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wg-case-title {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.78rem;
}

.wg-case-meta {
    font-size: 0.72rem;
    color: #64748b;
}

.wg-case-author {
    color: #2563eb;
}

.wg-cases-table td.td-category {
    color: #475569;
    font-size: 0.76rem;
}

.wg-cases-table td.td-assigned {
    text-align: center;
}

.wg-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
}

.wg-status-badge.status-open {
    color: #0284c7;
    border: 1px solid #bae6fd;
    background: #f0f9ff;
}

.wg-status-badge.status-cancelled {
    color: #dc2626;
    border: 1px solid #fecaca;
    background: #fef2f2;
}

/* Summary Footer Bar */
.wg-cases-summary-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 16px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-top: none;
    border-radius: 0 0 8px 8px;
    font-size: 0.74rem;
}

.wg-cases-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wg-cases-summary-item .sum-label {
    color: #64748b;
    font-size: 0.7rem;
}

.wg-cases-summary-item .sum-val {
    font-weight: 700;
    font-size: 0.78rem;
}

.sum-val.col-blue { color: #2563eb; }
.sum-val.col-orange { color: #d97706; }
.sum-val.col-green { color: #16a34a; }
.sum-val.col-red { color: #dc2626; }

/* --- View 4: Reports Horizontal Stacked Chart --- */
.wg-cases-chart-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wg-cases-chart-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 0.74rem;
    color: #475569;
}

.wg-cases-chart-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.leg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.leg-dot.col-yellow { background: #fde68a; }
.leg-dot.col-blue { background: #93c5fd; }

.wg-cases-chart-body {
    position: relative;
    padding-bottom: 28px;
}

.wg-cases-chart-row {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.wg-chart-row-label {
    width: 140px;
    font-size: 0.74rem;
    color: #475569;
    text-align: right;
    padding-right: 14px;
    flex-shrink: 0;
}

.wg-chart-track {
    flex: 1;
    height: 22px;
    display: flex;
    border-left: 1px solid #cbd5e1;
    background: transparent;
}

.wg-chart-bar {
    height: 100%;
}

.wg-chart-bar.bar-yellow {
    background: #fde68a;
    border-right: 1px solid #ffffff;
}

.wg-chart-bar.bar-blue {
    background: #93c5fd;
    border-right: 1px solid #ffffff;
}

.wg-chart-x-axis {
    display: flex;
    margin-left: 140px;
    height: 1px;
    background: #e2e8f0;
    position: relative;
}

.wg-axis-grid-line {
    flex: 1;
    height: 6px;
    border-right: 1px solid #cbd5e1;
}

.wg-chart-x-title {
    text-align: center;
    margin-left: 140px;
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 8px;
}

/* ==========================================================================
   Section 11: Approvals Mockup Styles (#secApprovals)
   Matching User Screenshot 1: My Approvals & My Requests Table
   ========================================================================== */
.wg-approvals-window {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    margin-top: 24px;
}

.wg-approvals-chrome {
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
    padding: 10px 16px;
    display: flex;
    align-items: center;
}

.wg-approvals-inner {
    padding: 0;
    background: #ffffff;
}

.wg-appr-top-tabs {
    display: flex;
    gap: 0;
    background: #fafbfc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 16px;
}

.wg-appr-tab {
    padding: 13px 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    pointer-events: auto !important;
}

@media (hover: hover) and (pointer: fine) {
.wg-appr-tab:hover {
    color: #0284c7;
}
}

.wg-appr-tab.active {
    color: #0284c7;
    border-bottom-color: #0284c7;
    font-weight: 600;
    background: #ffffff;
}

.wg-appr-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
    flex-wrap: wrap;
    gap: 12px;
}

.wg-appr-user-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    background: #ffffff;
    cursor: default;
}

.wg-appr-filters-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.wg-appr-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #475569;
    background: #f8fafc;
}

.wg-appr-table-wrap {
    overflow-x: auto;
    pointer-events: none !important;
    user-select: none !important;
}

.wg-appr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    text-align: left;
}

.wg-appr-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    padding: 11px 16px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.wg-appr-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

@media (hover: hover) and (pointer: fine) {
.wg-appr-table tr:hover td {
    background: #f8fafc;
}
}

.wg-appr-table .th-chk,
.wg-appr-table .td-chk {
    width: 38px;
    text-align: center;
    padding-left: 16px;
    padding-right: 8px;
}

.wg-appr-table .th-status,
.wg-appr-table .td-status {
    text-align: right;
    width: 140px;
}

.wg-appr-msg-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wg-avatar-vec.sz-26 {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wg-avatar-vec.sz-26 svg {
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.wg-appr-text {
    color: #334155;
    font-size: 0.82rem;
}

.wg-appr-text strong {
    color: #0f172a;
}

.wg-appr-link {
    color: #0369a1;
    font-weight: 500;
}

.wg-btn-appr-rej {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    background: #ffffff;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 500;
    pointer-events: none;
    user-select: none;
}

/* ==========================================================================
   Administrator Section 1: Dashboard Mockup Styles (#secAdminDashboard)
   Matching User Screenshot 2: New Joinee, Attrition, & User Diversity
   ========================================================================== */
.wg-admindash-window {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    margin-top: 24px;
}

.wg-admindash-chrome {
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
    padding: 10px 16px;
    display: flex;
    align-items: center;
}

.wg-admindash-inner {
    padding: 20px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 20px;
    pointer-events: none !important;
    user-select: none !important;
}

.wg-admindash-top-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.wg-dash-report-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 18px;
}

.wg-dash-report-card.border-top-yellow {
    border-top: 3px solid #f59e0b;
}

.wg-dash-report-card.border-top-rose {
    border-top: 3px solid #f43f5e;
}

.wg-report-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.wg-report-card-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.wg-report-card-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-report-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 0.72rem;
    color: #64748b;
    background: #ffffff;
}

.wg-report-icon-btn {
    background: none;
    border: none;
    color: #64748b;
    font-size: 0.85rem;
    padding: 2px 4px;
    cursor: default;
}

.wg-report-chart-wrap {
    width: 100%;
    height: 180px;
}

.wg-spline-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.wg-diversity-chart-wrap {
    width: 100%;
    position: relative;
    padding-top: 10px;
    overflow: hidden;
}

.wg-diversity-svg {
    width: 100%;
    height: auto;
    display: block;
}

.wg-diversity-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 0.72rem;
    color: #64748b;
}

.wg-diversity-legend .leg-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    display: inline-block;
}

/* ==========================================================================
   Administrator Section 2: Organization Mockup Styles (#secAdminOrganization)
   Matching User Screenshot 3: 8-item Nav, Dynamic Bubble, Brand Card & Settings
   ========================================================================== */
.wg-adminorg-window {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    margin-top: 24px;
}

.wg-adminorg-chrome {
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
    padding: 10px 16px;
    display: flex;
    align-items: center;
}

.wg-adminorg-split-body {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 560px;
    position: relative;
    background: #ffffff;
}

.wg-adminorg-sidebar {
    background: #fafbfc;
    border-right: 1px solid #edf2f7;
    padding: 24px 16px;
    position: relative;
}

.wg-adminorg-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 110px;
}

.wg-adminorg-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    border-radius: 6px;
    border: none;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    pointer-events: auto !important;
}

@media (hover: hover) and (pointer: fine) {
.wg-adminorg-nav-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}
}

.wg-adminorg-nav-item.active {
    background: #e0f2fe;
    color: #0369a1;
}

.wg-adminorg-nav-item.active .wg-nav-dot {
    background: #0284c7;
}

.wg-adminorg-content {
    padding: 24px 30px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    pointer-events: none !important;
    user-select: none !important;
}

.wg-adminorg-note-banner {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #1e40af;
}

.wg-note-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #bfdbfe;
    color: #1e40af;
    font-size: 0.7rem;
    font-weight: 700;
}

.wg-adminorg-profile-grid {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 24px;
    align-items: start;
}

.wg-org-brand-card {
    background: #fafbfc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wg-org-logo-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.wg-dummy-logo-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-radius: 6px;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    flex-shrink: 0;
}

.wg-dummy-logo-badge-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wg-dummy-brand-name {
    font-size: 0.82rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    line-height: 1.2;
}

.wg-org-brand-meta .wg-brand-company-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.wg-org-brand-meta .wg-brand-link {
    font-size: 0.72rem;
    color: #0369a1;
    text-decoration: none;
}

.wg-brand-contact-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.72rem;
    color: #475569;
}

.wg-brand-contact-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wg-brand-contact-item svg {
    color: #94a3b8;
    flex-shrink: 0;
}

.wg-brand-address-box {
    border-top: 1px solid #f1f5f9;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wg-addr-title {
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
}

.wg-addr-val {
    font-size: 0.72rem;
    color: #334155;
}

.wg-org-settings-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wg-setting-section {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 10px;
}

.wg-setting-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wg-setting-header {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.wg-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 0.76rem;
}

.wg-set-key {
    color: #64748b;
    font-weight: 500;
}

.wg-set-key.col-red {
    color: #dc2626;
}

.wg-set-val {
    color: #1e293b;
    font-weight: 600;
}

.wg-adminorg-footer {
    padding-top: 8px;
}

.wg-btn-modify-settings {
    padding: 7px 18px;
    border: 1px solid #0284c7;
    border-radius: 6px;
    background: #ffffff;
    color: #0369a1;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: default;
}

/* Administrator Organization Dynamic Tab Panes & Views */
.wg-adminorg-tab-pane {
    display: none;
    animation: wgOrgFade 0.22s ease-out;
}

.wg-adminorg-tab-pane.active {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@keyframes wgOrgFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Common Pane Header */
.wg-org-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
}

.wg-org-pane-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wg-org-pane-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.wg-org-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 7px;
    border-radius: 10px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.7rem;
    font-weight: 700;
}

.wg-org-pane-desc {
    font-size: 0.74rem;
    color: #64748b;
    margin: 0;
}

.wg-org-pane-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-org-search-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #64748b;
}

.wg-org-search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.75rem;
    color: #1e293b;
    width: 140px;
}

.wg-btn-org-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 6px;
    background: #2563eb;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: default;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
}

.wg-org-select-filter {
    padding: 5px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #334155;
    background: #ffffff;
}

/* Organization Tables */
.wg-org-table-wrapper {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.wg-org-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    text-align: left;
}

.wg-org-table th {
    background: #f8fafc;
    color: #64748b;
    font-weight: 600;
    padding: 9px 14px;
    border-bottom: 1px solid #e2e8f0;
    letter-spacing: 0.3px;
}

.wg-org-table td {
    padding: 9px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.wg-org-table tr:last-child td {
    border-bottom: none;
}

.wg-org-td-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-dept-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    font-size: 0.65rem;
    font-weight: 800;
    color: #1e293b;
    flex-shrink: 0;
}

.wg-org-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 600;
}

.wg-org-badge.badge-active {
    background: #dcfce7;
    color: #15803d;
}

.wg-grade-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.68rem;
    font-weight: 600;
}

.wg-alias-tag {
    font-family: monospace;
    font-size: 0.72rem;
    color: #2563eb;
}

/* Locations Grid */
.wg-org-loc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.wg-loc-card {
    background: #fafbfc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wg-loc-card.primary-hq {
    border-color: #93c5fd;
    background: #f0f7ff;
}

.wg-loc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.wg-loc-title-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-loc-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.wg-loc-badge {
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
}

.wg-loc-badge.hq {
    background: #2563eb;
    color: #ffffff;
}

.wg-loc-badge.branch {
    background: #e2e8f0;
    color: #475569;
}

.wg-loc-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
}

.wg-loc-meta-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.72rem;
}

.wg-loc-meta-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.wg-loc-meta-label {
    color: #64748b;
    flex-shrink: 0;
}

.wg-loc-meta-val {
    color: #1e293b;
    font-weight: 500;
    text-align: right;
}

/* Groups Grid */
.wg-org-groups-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.wg-group-card {
    background: #fafbfc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wg-group-badge-icon {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wg-group-title {
    font-size: 0.84rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.wg-group-desc {
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.4;
    margin: 0;
}

.wg-group-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
}

.wg-group-tag {
    padding: 2px 8px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #334155;
    font-weight: 600;
}

.wg-group-email {
    font-family: monospace;
    font-size: 0.7rem;
    color: #2563eb;
}

/* Domain Management */
.wg-domain-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wg-domain-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wg-domain-item.primary {
    border-color: #93c5fd;
    background: #f8faff;
}

.wg-domain-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wg-domain-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-domain-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
}

.wg-domain-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
}

.wg-domain-tag.tag-primary {
    background: #2563eb;
    color: #ffffff;
}

.wg-domain-tag.tag-verified {
    background: #dcfce7;
    color: #15803d;
}

.wg-domain-meta {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 2px;
}

.wg-btn-domain-check {
    padding: 5px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: default;
}

.wg-dns-health-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
}

.wg-dns-health-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px 0;
}

.wg-dns-records-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.wg-dns-record-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
}

.wg-dns-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wg-dns-status-dot.green {
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.wg-dns-rec-text code {
    background: #e2e8f0;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.68rem;
}

/* Pay Period Grid */
.wg-payperiod-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.wg-pay-config-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wg-pay-icon-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.wg-pay-icon {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wg-pay-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.wg-pay-card-sub {
    font-size: 0.7rem;
    color: #64748b;
}

.wg-pay-details-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.74rem;
}

.wg-pay-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
}

.wg-detail-k {
    color: #64748b;
}

.wg-detail-v {
    color: #1e293b;
}

/* Holiday Badges */
.wg-holiday-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
}

.wg-holiday-badge.national {
    background: #e0f2fe;
    color: #0369a1;
}

.wg-holiday-badge.public {
    background: #f1f5f9;
    color: #475569;
}

.wg-holiday-badge.festive {
    background: #fef3c7;
    color: #b45309;
}

/* ==========================================================================
   Administrator Section 20: Employee Mockup Styles (#secAdminEmployee)
   ========================================================================== */
.wg-adminemp-window {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.wg-adminemp-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.wg-adminemp-split-body {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 520px;
    background: #ffffff;
}

.wg-adminemp-sidebar {
    position: relative;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
}

.wg-adminemp-tooltip-text {
    font-size: 0.74rem;
    line-height: 1.35;
    color: #eff6ff;
}

.wg-adminemp-tooltip-text strong {
    color: #ffffff;
    font-weight: 700;
}

.wg-adminemp-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 75px;
}

.wg-adminemp-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    text-align: left;
}

@media (hover: hover) and (pointer: fine) {
.wg-adminemp-nav-item:hover {
    background: #f1f5f9;
    color: #1e293b;
}
}

.wg-adminemp-nav-item.active {
    background: #e0f2fe;
    color: #0284c7;
    font-weight: 600;
}

.wg-adminemp-content {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #ffffff;
    overflow-x: auto;
}

.wg-adminemp-tab-pane {
    display: none;
    animation: wgOrgFade 0.22s ease-out;
}

.wg-adminemp-tab-pane.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wg-adminemp-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.wg-emp-total-count {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
}

.wg-emp-count-num {
    color: #0f172a;
    font-weight: 700;
}

.wg-emp-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wg-emp-btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-btn-emp-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 6px;
    background: #15803d;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 600;
    border: none;
    cursor: default;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

@media (hover: hover) and (pointer: fine) {
.wg-btn-emp-green:hover {
    background: #15803d;
}
}

.wg-btn-emp-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 6px;
    background: #ffffff;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    cursor: default;
}

@media (hover: hover) and (pointer: fine) {
.wg-btn-emp-outline:hover {
    background: #f8fafc;
    color: #1e293b;
}
}

.wg-emp-icon-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wg-emp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    cursor: default;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
.wg-emp-icon-btn:hover {
    background: #f8fafc;
    color: #1e293b;
    border-color: #cbd5e1;
}
}

.wg-emp-icon-btn.wg-help-round {
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
}

.wg-emp-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
}

.wg-emp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    text-align: left;
}

.wg-emp-table thead th {
    padding: 10px 12px;
    background: #f8fafc;
    color: #64748b;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    font-size: 0.72rem;
}

.wg-emp-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
    white-space: nowrap;
}

.wg-emp-table tbody tr:last-child td {
    border-bottom: none;
}

@media (hover: hover) and (pointer: fine) {
.wg-emp-table tbody tr:hover td {
    background: #f8fafc;
}
}

.wg-emp-table .th-cb,
.wg-emp-table .td-cb {
    width: 32px;
    text-align: center;
    padding-left: 12px;
    padding-right: 6px;
}

.wg-emp-table .th-actions,
.wg-emp-table .td-actions {
    width: 70px;
    text-align: right;
    padding-right: 14px;
}

.wg-emp-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wg-emp-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.wg-emp-avatar.av-pink { background: #be185d; }
.wg-emp-avatar.av-blue { background: #1d4ed8; }
.wg-emp-avatar.av-purple { background: #6d28d9; }
.wg-emp-avatar.av-amber { background: #a16207; }
.wg-emp-avatar.av-teal { background: #0f766e; }
.wg-emp-avatar.av-indigo { background: #1d4ed8; }
.wg-emp-avatar.av-rose { background: #be123c; }
.wg-emp-avatar.av-emerald { background: #065f46; }
.wg-emp-avatar.av-cyan { background: #0369a1; }

.wg-emp-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wg-emp-name-row {
    font-size: 0.78rem;
    font-weight: 500;
}

.wg-emp-name {
    font-weight: 600;
    color: #0f172a;
}

.wg-emp-name.col-blue {
    color: #0284c7;
}

.wg-emp-id {
    color: #64748b;
    font-size: 0.72rem;
}

.wg-emp-email {
    color: #64748b;
    font-size: 0.7rem;
}

.wg-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    cursor: default;
}

.wg-action-icon.text-emerald {
    color: #10b981;
}

.wg-action-icon.text-slate {
    color: #94a3b8;
}

@media (hover: hover) and (pointer: fine) {
.wg-action-icon.text-slate:hover {
    color: #475569;
}
}

/* ==========================================================================
   Administrator Section 21: Forms and Services Mockup Styles (#secAdminForms)
   ========================================================================== */
.wg-adminforms-window {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.wg-adminforms-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.wg-adminforms-split-body {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 520px;
    background: #ffffff;
}

.wg-adminforms-sidebar {
    position: relative;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
}

.wg-adminforms-tooltip-text {
    font-size: 0.74rem;
    line-height: 1.35;
    color: #eff6ff;
}

.wg-adminforms-tooltip-text strong {
    color: #ffffff;
    font-weight: 700;
}

.wg-adminforms-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 75px;
}

.wg-adminforms-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    text-align: left;
}

@media (hover: hover) and (pointer: fine) {
.wg-adminforms-nav-item:hover {
    background: #f1f5f9;
    color: #1e293b;
}
}

.wg-adminforms-nav-item.active {
    background: #e0f2fe;
    color: #0284c7;
    font-weight: 600;
}

.wg-adminforms-content {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #ffffff;
    overflow-x: auto;
}

.wg-adminforms-tab-pane {
    display: none;
    animation: wgOrgFade 0.22s ease-out;
}

.wg-adminforms-tab-pane.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wg-forms-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.wg-forms-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-filter-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: #334155;
}

.wg-forms-select {
    padding: 5px 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #1e293b;
    outline: none;
    cursor: default;
}

.wg-forms-right-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wg-forms-count-tag {
    font-size: 0.76rem;
    font-weight: 600;
    color: #0369a1;
}

.wg-count-symbol {
    font-weight: 700;
}

.wg-btn-form-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 6px;
    background: #15803d;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 600;
    border: none;
    cursor: default;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

@media (hover: hover) and (pointer: fine) {
.wg-btn-form-green:hover {
    background: #15803d;
}
}

.wg-btn-form-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 6px;
    background: #ffffff;
    color: #334155;
    font-size: 0.76rem;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    cursor: default;
}

@media (hover: hover) and (pointer: fine) {
.wg-btn-form-outline:hover {
    background: #f8fafc;
    color: #1e293b;
}
}

.wg-form-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: default;
}

.wg-forms-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
}

.wg-forms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
    text-align: left;
}

.wg-forms-table thead th {
    padding: 10px 14px;
    background: #f8fafc;
    color: #64748b;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    font-size: 0.73rem;
}

.wg-forms-table tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
    vertical-align: middle;
    white-space: nowrap;
}

.wg-forms-table tbody tr:last-child td {
    border-bottom: none;
}

@media (hover: hover) and (pointer: fine) {
.wg-forms-table tbody tr:hover td {
    background: #f8fafc;
}
}

.wg-form-link {
    color: #0369a1;
    font-weight: 500;
    text-decoration: none;
    cursor: default;
}

@media (hover: hover) and (pointer: fine) {
.wg-form-link:hover {
    text-decoration: underline;
}
}

.wg-forms-table .th-status,
.wg-forms-table .td-status {
    width: 90px;
    text-align: center;
}

/* Toggle Switches */
.wg-form-toggle {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    border-radius: 9px;
    vertical-align: middle;
    cursor: default;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.wg-form-toggle.on {
    background: #3b82f6;
}

.wg-form-toggle.off {
    background: #cbd5e1;
}

.wg-toggle-knob {
    position: absolute;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.wg-form-toggle.on .wg-toggle-knob {
    right: 2px;
}

.wg-form-toggle.off .wg-toggle-knob {
    left: 2px;
}

/* Services Header Banner & Groups Grid */
.wg-services-header-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.75rem;
    color: #475569;
}

.wg-services-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-services-groups-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.wg-services-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wg-serv-group-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.wg-serv-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.wg-serv-card-head.simple {
    background: #f8fafc;
}

.wg-serv-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
}

.wg-drag-icon {
    color: #94a3b8;
    flex-shrink: 0;
}

.wg-serv-head-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f172a;
}

.wg-serv-items-list {
    display: flex;
    flex-direction: column;
}

.wg-serv-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-bottom: 1px solid #f8fafc;
    font-size: 0.74rem;
    color: #475569;
}

.wg-serv-item:last-child {
    border-bottom: none;
}

@media (hover: hover) and (pointer: fine) {
.wg-serv-item:hover {
    background: #fafbfc;
}
}

.wg-serv-handle {
    color: #cbd5e1;
    font-size: 0.7rem;
    letter-spacing: -1px;
}

/* ==========================================================================
   Administrator Section 22: User Access Control Mockup Styles (#secAdminUserAccess)
   ========================================================================== */
.wg-adminaccess-window {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.wg-adminaccess-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.wg-adminaccess-split-body {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 520px;
    background: #ffffff;
}

.wg-adminaccess-sidebar {
    position: relative;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
}

.wg-adminaccess-tooltip-text {
    font-size: 0.74rem;
    line-height: 1.35;
    color: #eff6ff;
}

.wg-adminaccess-tooltip-text strong {
    color: #ffffff;
    font-weight: 700;
}

.wg-adminaccess-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 75px;
}

.wg-adminaccess-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    text-align: left;
}

@media (hover: hover) and (pointer: fine) {
.wg-adminaccess-nav-item:hover {
    background: #f1f5f9;
    color: #1e293b;
}
}

.wg-adminaccess-nav-item.active {
    background: #e0f2fe;
    color: #0284c7;
    font-weight: 600;
}

.wg-adminaccess-content {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #ffffff;
    overflow-x: auto;
}

.wg-adminaccess-tab-pane {
    display: none;
    animation: wgOrgFade 0.22s ease-out;
}

.wg-adminaccess-tab-pane.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wg-access-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.wg-access-note-text {
    font-size: 0.76rem;
    color: #475569;
}

.wg-access-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-access-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-access-filter-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: #334155;
}

.wg-access-select {
    padding: 5px 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #1e293b;
    outline: none;
    cursor: default;
}

.wg-btn-access-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 6px;
    background: #16a34a;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 600;
    border: none;
    cursor: default;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

@media (hover: hover) and (pointer: fine) {
.wg-btn-access-green:hover {
    background: #15803d;
}
}

.wg-btn-access-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 6px;
    background: #ffffff;
    color: #334155;
    font-size: 0.76rem;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    cursor: default;
}

.wg-access-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: default;
}

/* Roles Grid & Cards */
.wg-roles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.wg-role-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

@media (hover: hover) and (pointer: fine) {
.wg-role-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
}

.wg-role-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.wg-role-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.wg-role-more-btn {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.85rem;
    letter-spacing: -1px;
    cursor: default;
    padding: 0 2px;
    line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
.wg-role-more-btn:hover {
    color: #475569;
}
}

.wg-role-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wg-role-subtext {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
}

.wg-role-pill-btn {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 0.68rem;
    color: #475569;
    font-weight: 500;
}

.wg-role-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Permissions Table */
.wg-access-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
}

.wg-access-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    text-align: left;
}

.wg-access-table thead th {
    padding: 10px 14px;
    background: #f8fafc;
    color: #64748b;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    font-size: 0.72rem;
}

.wg-access-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
    white-space: nowrap;
}

.wg-access-table tbody tr:last-child td {
    border-bottom: none;
}

@media (hover: hover) and (pointer: fine) {
.wg-access-table tbody tr:hover td {
    background: #f8fafc;
}
}

.wg-access-table .th-perm,
.wg-access-table .td-perm {
    width: 55px;
    text-align: center;
}

.wg-perm-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
}

.wg-perm-check.checked {
    background: #e0f2fe;
    color: #0284c7;
}

.wg-perm-check.empty {
    color: #cbd5e1;
}

.wg-scope-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
}

.wg-scope-badge.scope-org {
    background: #dbeafe;
    color: #1e40af;
}

.wg-scope-badge.scope-self {
    background: #f1f5f9;
    color: #475569;
}

.wg-scope-badge.scope-dept {
    background: #fef3c7;
    color: #92400e;
}

.wg-scope-badge.scope-hier {
    background: #ede9fe;
    color: #6d28d9;
}

.wg-scope-badge.scope-read {
    background: #f3f4f6;
    color: #374151;
}

.wg-ip-code {
    font-family: monospace;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    color: #0f172a;
}

.wg-enforce-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
}

.wg-enforce-badge.strict {
    background: #dcfce7;
    color: #15803d;
}

.wg-enforce-badge.mfa {
    background: #fef3c7;
    color: #b45309;
}

/* Geo Grid & Cards */
.wg-geo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.wg-geo-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wg-geo-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wg-geo-title-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wg-geo-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.wg-geo-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
}

.wg-geo-badge.primary {
    background: #e0f2fe;
    color: #0369a1;
}

.wg-geo-badge.branch {
    background: #f1f5f9;
    color: #475569;
}

.wg-geo-meta-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.74rem;
}

.wg-geo-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wg-geo-k {
    color: #64748b;
}

.wg-geo-v {
    color: #1e293b;
}

/* ==========================================================================
   Administrator Section 23: Templates Mockup Styles (#secAdminTemplates)
   ========================================================================== */
.wg-admintpl-window {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.wg-admintpl-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.wg-admintpl-split-body {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 520px;
    background: #ffffff;
}

.wg-admintpl-sidebar {
    position: relative;
    background: #ffffff;
    border-right: 1px solid #f1f5f9;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
}

.wg-admintpl-tooltip-text {
    font-size: 0.74rem;
    line-height: 1.35;
    color: #eff6ff;
}

.wg-admintpl-tooltip-text strong {
    color: #ffffff;
    font-weight: 700;
}

.wg-admintpl-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 56px;
}

.wg-admintpl-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    text-align: left;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
.wg-admintpl-nav-item:hover {
    background: #f8fafc;
    color: #0f172a;
}
}

.wg-admintpl-nav-item.active {
    color: #0284c7;
}

.wg-admintpl-content {
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

.wg-admintpl-tab-pane {
    display: none;
    flex-direction: column;
    width: 100%;
    animation: wgFadeIn 0.2s ease;
}

.wg-admintpl-tab-pane.active {
    display: flex;
}

/* Top bar */
.wg-tpl-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    gap: 16px;
}

.wg-tpl-filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wg-tpl-filter-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
}

.wg-tpl-select-wrap {
    position: relative;
}

.wg-tpl-select {
    padding: 6px 30px 6px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #334155;
    background: #ffffff;
    cursor: pointer;
    min-width: 170px;
    outline: none;
}

.wg-tpl-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.wg-tpl-actions-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wg-btn-tpl-green {
    background: #10b981;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background 0.15s ease, transform 0.1s ease;
}

@media (hover: hover) and (pointer: fine) {
.wg-btn-tpl-green:hover {
    background: #059669;
    transform: translateY(-1px);
}
}

.wg-tpl-help-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
.wg-tpl-help-icon:hover {
    border-color: #94a3b8;
    color: #475569;
    background: #f8fafc;
}
}

/* Templates Table */
.wg-tpl-table-wrapper {
    overflow-x: auto;
    width: 100%;
}

.wg-tpl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.wg-tpl-table tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s ease;
}

.wg-tpl-table tr.is-highlight-demo {
    background-color: #f8fafc;
}

@media (hover: hover) and (pointer: fine) {
.wg-tpl-table tr:hover {
    background-color: #f8fafc;
}
}

.wg-tpl-table td {
    padding: 10px 18px;
    vertical-align: middle;
}

.td-tpl-name {
    width: 58%;
}

.wg-tpl-link {
    color: #0369a1;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
.wg-tpl-link:hover {
    color: #0369a1;
    text-decoration: underline;
}
}

.td-tpl-form {
    width: 32%;
    color: #475569;
    font-size: 0.8rem;
}

.td-tpl-actions {
    width: 10%;
    text-align: right;
    white-space: nowrap;
}

.wg-tpl-act-btn {
    border: none;
    background: transparent;
    color: #94a3b8;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.td-tpl-actions.show-demo .wg-tpl-act-btn {
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
.wg-tpl-table tr:hover .wg-tpl-act-btn {
    opacity: 1;
}
}

@media (hover: hover) and (pointer: fine) {
.wg-tpl-act-btn:hover {
    color: #0284c7;
    background: #e0f2fe;
}
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1080px) {
    .wg-services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .wg-widgets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .wg-org-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 860px) {
    .wg-hero-split-grid {
        grid-template-columns: 1fr;
    }
    .wg-dash-split-body {
        flex-direction: column;
    }
    .wg-dash-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 16px;
    }
    .wg-tooltip-callout {
        position: static;
        width: 100%;
        margin-bottom: 12px;
    }
    .wg-dash-content {
        padding-left: 0;
        padding-top: 18px;
    }
    .wg-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .wg-selfservice-split-body {
        flex-direction: column;
    }
    .wg-selfservice-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 14px;
    }
    .wg-selfservice-content {
        padding-left: 0;
        padding-top: 16px;
    }
    .wg-ss-cards-grid {
        grid-template-columns: 1fr;
    }
    /* Section 4 Responsive */
    .wg-org-split-body {
        flex-direction: column;
    }
    .wg-org-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 14px;
    }
    .wg-org-content {
        padding-left: 0;
        padding-top: 16px;
        overflow-x: auto;
    }
    .wg-org-tree-canvas {
        min-width: 600px;
    }
    /* Section 5 Responsive */
    .wg-ts-split-body {
        flex-direction: column;
    }
    .wg-ts-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 14px;
    }
    .wg-ts-content {
        padding-left: 0;
        padding-top: 16px;
        overflow-x: auto;
    }
    .wg-ts-table-card,
    .wg-ts-table-wrap,
    .wg-ts-user-bar,
    .wg-ts-filter-row {
        min-width: 600px;
    }
    /* Section 6 Leave Responsive */
    .wg-leave-split-body {
        flex-direction: column;
    }
    .wg-leave-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 14px;
    }
    .wg-leave-content {
        padding-left: 0;
        padding-top: 16px;
        overflow-x: auto;
    }
    .wg-leave-table-card,
    .wg-leave-user-bar,
    .wg-leave-top-bar-simple,
    .wg-leave-timeline-card,
    .wg-leave-bal-bar {
        min-width: 600px;
    }
    /* Section 7 Attendance Responsive */
    .wg-att-split-body {
        flex-direction: column;
    }
    .wg-att-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 14px;
    }
    .wg-att-content {
        padding-left: 0;
        padding-top: 16px;
        overflow-x: auto;
    }
    .wg-att-cal-card,
    .wg-att-table-card,
    .wg-att-top-bar {
        min-width: 600px;
    }
    /* Section 8 Performance Responsive */
    .wg-perf-split-body {
        flex-direction: column;
    }
    .wg-perf-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 14px;
    }
    .wg-perf-content {
        padding-left: 0;
        padding-top: 16px;
        overflow-x: auto;
    }
    .wg-perf-emp-card,
    .wg-perf-kra-list,
    .wg-perf-peers-card,
    .wg-perf-top-bar {
        min-width: 580px;
    }
    /* Section 9 Files Responsive */
    .wg-files-split-body {
        flex-direction: column;
    }
    .wg-files-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 14px;
    }
    .wg-files-content {
        padding-left: 0;
        padding-top: 16px;
        overflow-x: auto;
    }
    .wg-files-top-bar,
    .wg-files-table-wrap {
        min-width: 580px;
    }
    /* Section 10 Cases Responsive */
    .wg-cases-split-body {
        flex-direction: column;
    }
    .wg-cases-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 14px;
    }
    .wg-cases-content {
        padding-left: 0;
        padding-top: 16px;
        overflow-x: auto;
    }
    .wg-cases-top-bar,
    .wg-cases-topics-grid,
    .wg-cases-table-wrap,
    .wg-cases-summary-bar,
    .wg-cases-chart-card {
        min-width: 580px;
    }

    /* Section 11 Approvals Responsive */
    .wg-appr-controls-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .wg-appr-table-wrap {
        overflow-x: auto;
    }
    .wg-appr-table {
        min-width: 620px;
    }

    /* Section 18 Admin Dashboard Responsive */
    .wg-admindash-top-grid {
        grid-template-columns: 1fr;
    }
    .wg-diversity-chart-wrap {
        overflow-x: auto;
    }

    /* Section 19 Admin Organization Responsive */
    .wg-adminorg-split-body {
        grid-template-columns: 1fr;
    }
    .wg-adminorg-sidebar {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 16px;
    }
    .wg-adminorg-nav-list {
        margin-top: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .wg-adminorg-content {
        padding: 18px 16px;
    }
    .wg-adminorg-profile-grid {
        grid-template-columns: 1fr;
    }

    /* Section 20 Admin Employee Responsive */
    .wg-adminemp-split-body {
        grid-template-columns: 1fr;
    }
    .wg-adminemp-sidebar {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 16px;
    }
    .wg-adminemp-nav-list {
        margin-top: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .wg-adminemp-content {
        padding: 18px 14px;
    }
    .wg-emp-table {
        min-width: 620px;
    }

    /* Section 21 Admin Forms and Services Responsive */
    .wg-adminforms-split-body {
        grid-template-columns: 1fr;
    }
    .wg-adminforms-sidebar {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 16px;
    }
    .wg-adminforms-nav-list {
        margin-top: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .wg-adminforms-content {
        padding: 18px 14px;
    }
    .wg-forms-table {
        min-width: 580px;
    }
    .wg-services-groups-grid {
        grid-template-columns: 1fr;
    }

    /* Section 22 Admin User Access Control Responsive */
    .wg-adminaccess-split-body {
        grid-template-columns: 1fr;
    }
    .wg-adminaccess-sidebar {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 16px;
    }
    .wg-adminaccess-nav-list {
        margin-top: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .wg-adminaccess-content {
        padding: 18px 14px;
    }
    .wg-roles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .wg-access-table {
        min-width: 580px;
    }
    .wg-geo-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .wg-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .wg-widgets-grid {
        grid-template-columns: 1fr;
    }
    .wg-org-cards-grid {
        grid-template-columns: 1fr;
    }
    .wg-ts-summary-bar {
        grid-template-columns: 1fr;
    }
    .wg-leave-bal-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .wg-att-cal-cell {
        min-height: 60px;
        padding: 4px;
    }
    .wg-perf-emp-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .wg-perf-badges-right {
        width: 100%;
        justify-content: flex-start;
    }
    .wg-split-title {
        font-size: 1.8rem;
    }
    .wg-block-role {
        font-size: 1.8rem;
    }
    .wg-block-heading {
        font-size: 1.5rem;
    }
    .wg-adminorg-nav-list {
        grid-template-columns: 1fr;
    }
    .wg-adminemp-nav-list {
        grid-template-columns: 1fr;
    }
    .wg-adminforms-nav-list {
        grid-template-columns: 1fr;
    }
    .wg-adminaccess-nav-list {
        grid-template-columns: 1fr;
    }
    .wg-roles-grid {
        grid-template-columns: 1fr;
    }
    .wg-forms-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .wg-services-header-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .wg-access-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .wg-admintpl-split-body {
        grid-template-columns: 1fr;
    }
    .wg-admintpl-sidebar {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding: 16px;
    }
    .wg-admintpl-nav-list {
        margin-top: 48px;
        flex-direction: row;
        overflow-x: auto;
    }
    .wg-tpl-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .wg-appr-top-tabs {
        overflow-x: auto;
    }
    .wg-appr-tab {
        padding: 10px 14px;
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   DISSOLVEX SIGNATURE ENTERPRISE ARCHITECTURE
   Transforms generic product mockups into a bespoke, modern enterprise experience
   while preserving the brand's Mint (#eaf6f0), Forest Green (#0b2b20), and Emerald (#10b981) palette.
   ========================================================================== */

/* 1. Ambient Lighting & Atmospheric Depth */
.wg-guide-block {
    position: relative;
    padding: 85px 0 !important;
}

.wg-guide-block::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 70%;
    background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.07) 0%, rgba(234, 246, 240, 0) 72%);
    pointer-events: none;
    z-index: 0;
}

.wg-guide-container,
.wg-guide-block > .container {
    position: relative;
    z-index: 1;
}

/* 2. Section Block Eyebrow Badge & Typography */
.wg-block-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 40px !important;
    position: relative;
}

.wg-block-role {
    font-size: 2.35rem !important;
    font-weight: 800 !important;
    color: #0b2b20 !important;
    margin: 0 0 6px !important;
    letter-spacing: -0.5px !important;
}

.wg-block-heading,
.wg-block-title {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: #0b2b20 !important;
    margin: 0 0 14px !important;
    letter-spacing: -0.5px !important;
}

.wg-block-desc,
.wg-block-subtitle {
    font-size: 1.05rem !important;
    color: #475569 !important;
    line-height: 1.75 !important;
    margin: 0 auto !important;
}

/* 3. Dual Split Hero Cards (Executive Command Center) */
.wg-split-card {
    border-radius: 24px !important;
    padding: 50px 38px 56px !important;
    box-shadow: 0 20px 45px -10px rgba(11, 43, 32, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.7) inset !important;
    position: relative !important;
    overflow: hidden !important;
    backdrop-filter: blur(12px) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
.wg-split-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 28px 55px -10px rgba(11, 43, 32, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.9) inset !important;
}
}

.wg-split-card.card-employee {
    background: linear-gradient(145deg, #d8eef9 0%, #c4e4f5 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

.wg-split-card.card-admin {
    background: linear-gradient(145deg, #fcedc5 0%, #f6e2ad 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

.wg-split-card.card-employee .wg-split-title::after {
    content: "● 11 Interactive Workflows";
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #0369a1;
    margin-top: 6px;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.wg-split-card.card-admin .wg-split-title::after {
    content: "● 6 Governance Modules";
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #92400e;
    margin-top: 6px;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.wg-guide-pill {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0b2b20 !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    padding: 8px 20px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05) !important;
    font-weight: 700 !important;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.wg-guide-pill.active {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(11, 43, 32, 0.16) !important;
    background: #0b2b20 !important;
    color: #ffffff !important;
    border-color: #0b2b20 !important;
}

@media (hover: hover) and (pointer: fine) {
.wg-guide-pill:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(11, 43, 32, 0.16) !important;
    background: #0b2b20 !important;
    color: #ffffff !important;
    border-color: #0b2b20 !important;
}
}

/* 4. Dissolvex Enterprise Window Containers & Modern App Bars */
.wg-window-mockup,
.wg-admindash-window,
.wg-adminorg-window,
.wg-adminemp-window,
.wg-adminforms-window,
.wg-adminaccess-window,
.wg-admintpl-window,
.wg-approvals-window,
.wg-files-window,
.wg-cases-window {
    background: #ffffff !important;
    border: 1px solid rgba(11, 43, 32, 0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(11, 43, 32, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.9) inset !important;
    overflow: hidden !important;
    position: relative !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

@media (hover: hover) and (pointer: fine) {
.wg-window-mockup:hover,
.wg-admindash-window:hover,
.wg-adminorg-window:hover,
.wg-adminemp-window:hover,
.wg-adminforms-window:hover,
.wg-adminaccess-window:hover,
.wg-admintpl-window:hover,
.wg-approvals-window:hover,
.wg-files-window:hover,
.wg-cases-window:hover {
    box-shadow: 0 32px 65px -12px rgba(11, 43, 32, 0.14), 0 0 0 1px rgba(16, 185, 129, 0.2) inset !important;
}
}

.wg-window-header,
.wg-admindash-chrome,
.wg-adminorg-chrome,
.wg-adminemp-chrome,
.wg-adminforms-chrome,
.wg-adminaccess-chrome,
.wg-admintpl-chrome,
.wg-approvals-chrome,
.wg-files-chrome,
.wg-cases-chrome {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 20px !important;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 1px solid rgba(11, 43, 32, 0.08) !important;
    margin-bottom: 0 !important;
}

.wg-chrome-dots,
.wg-window-header {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.dot,
.wg-window-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.dot.dot-close,
.wg-window-dot.dot-red {
    background: #f87171 !important;
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.4) !important;
}

.dot.dot-min,
.wg-window-dot.dot-yellow {
    background: #fbbf24 !important;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.4) !important;
}

.dot.dot-max,
.wg-window-dot.dot-green {
    background: #34d399 !important;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.4) !important;
}

.wg-chrome-dots::after,
.wg-window-header::after,
.wg-admindash-chrome::after,
.wg-adminorg-chrome::after,
.wg-adminemp-chrome::after,
.wg-adminforms-chrome::after,
.wg-adminaccess-chrome::after,
.wg-admintpl-chrome::after,
.wg-approvals-chrome::after,
.wg-files-chrome::after,
.wg-cases-chrome::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Sidebar navigation remains clickable and interactive */
.wg-dash-sidebar,
.wg-selfservice-sidebar,
.wg-org-sidebar,
.wg-ts-sidebar,
.wg-leave-sidebar,
.wg-att-sidebar,
.wg-perf-sidebar,
.wg-files-sidebar,
.wg-cases-sidebar,
.wg-adminorg-sidebar,
.wg-adminemp-sidebar,
.wg-adminforms-sidebar,
.wg-adminaccess-sidebar,
.wg-admintpl-sidebar {
    position: relative !important;
    z-index: 25 !important;
    pointer-events: auto !important;
}

/* Right-side mockup preview areas are unclickable and static like an image */
.wg-dash-content,
.wg-selfservice-content,
.wg-org-content,
.wg-ts-content,
.wg-leave-content,
.wg-att-content,
.wg-perf-content,
.wg-files-content,
.wg-cases-content,
.wg-adminorg-content,
.wg-adminemp-content,
.wg-adminforms-content,
.wg-adminaccess-content,
.wg-admintpl-content,
.wg-approvals-inner,
.wg-admindash-inner,
.wg-services-grid {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: default !important;
}

.wg-dash-content *,
.wg-selfservice-content *,
.wg-org-content *,
.wg-ts-content *,
.wg-leave-content *,
.wg-att-content *,
.wg-perf-content *,
.wg-files-content *,
.wg-cases-content *,
.wg-adminorg-content *,
.wg-adminemp-content *,
.wg-adminforms-content *,
.wg-adminaccess-content *,
.wg-admintpl-content *,
.wg-approvals-inner *,
.wg-admindash-inner *,
.wg-services-grid * {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: default !important;
}

/* 5. Tooltip Popups Completely Removed */
.wg-tooltip-callout {
    display: none !important;
}

/* Ensure all sidebar nav lists start cleanly from top without blank gaps */
.wg-dash-nav-list,
.wg-ss-nav-list,
.wg-org-nav-list,
.wg-ts-nav-list,
.wg-leave-nav-list,
.wg-att-nav-list,
.wg-perf-nav-list,
.wg-files-nav-list,
.wg-cases-nav-list,
.wg-adminorg-nav-list,
.wg-adminemp-nav-list,
.wg-adminforms-nav-list,
.wg-adminaccess-nav-list,
.wg-admintpl-nav-list {
    margin-top: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 6. Unified Active Card Div (Matching Locations in Image 3 across all sections) */
.wg-dash-nav-item,
.wg-ss-nav-item,
.wg-org-nav-item,
.wg-ts-nav-item,
.wg-leave-nav-item,
.wg-att-nav-item,
.wg-perf-nav-item,
.wg-files-nav-item,
.wg-cases-nav-item,
.wg-appr-tab,
.wg-adminorg-nav-item,
.wg-adminemp-nav-item,
.wg-adminforms-nav-item,
.wg-adminaccess-nav-item,
.wg-admintpl-nav-item {
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
    cursor: pointer !important;
    background: transparent;
}

@media (hover: hover) and (pointer: fine) {
.wg-dash-nav-item:hover,
.wg-ss-nav-item:hover,
.wg-org-nav-item:hover,
.wg-ts-nav-item:hover,
.wg-leave-nav-item:hover,
.wg-att-nav-item:hover,
.wg-perf-nav-item:hover,
.wg-files-nav-item:hover,
.wg-cases-nav-item:hover,
.wg-adminorg-nav-item:hover,
.wg-adminemp-nav-item:hover,
.wg-adminforms-nav-item:hover,
.wg-adminaccess-nav-item:hover,
.wg-admintpl-nav-item:hover {
    background: rgba(16, 185, 129, 0.08) !important;
    color: #0b2b20 !important;
    transform: translateX(3px) !important;
}
}

.wg-dash-nav-item.active,
.wg-ss-nav-item.active,
.wg-org-nav-item.active,
.wg-ts-nav-item.active,
.wg-leave-nav-item.active,
.wg-att-nav-item.active,
.wg-perf-nav-item.active,
.wg-files-nav-item.active,
.wg-cases-nav-item.active,
.wg-appr-tab.active,
.wg-adminorg-nav-item.active,
.wg-adminemp-nav-item.active,
.wg-adminforms-nav-item.active,
.wg-adminaccess-nav-item.active,
.wg-admintpl-nav-item.active {
    background: #ffffff !important;
    color: #0b2b20 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(11, 43, 32, 0.08), 0 0 0 1px rgba(16, 185, 129, 0.25) !important;
    border-left: 3.5px solid #10b981 !important;
    border-radius: 8px !important;
    transform: translateX(3px) !important;
}

.wg-nav-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #cbd5e1 !important;
    display: inline-block !important;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease !important;
}

.wg-dash-nav-item.active .wg-nav-dot,
.wg-ss-nav-item.active .wg-nav-dot,
.wg-org-nav-item.active .wg-nav-dot,
.wg-ts-nav-item.active .wg-nav-dot,
.wg-leave-nav-item.active .wg-nav-dot,
.wg-att-nav-item.active .wg-nav-dot,
.wg-perf-nav-item.active .wg-nav-dot,
.wg-files-nav-item.active .wg-nav-dot,
.wg-cases-nav-item.active .wg-nav-dot,
.wg-adminorg-nav-item.active .wg-nav-dot,
.wg-adminemp-nav-item.active .wg-nav-dot,
.wg-adminforms-nav-item.active .wg-nav-dot,
.wg-adminaccess-nav-item.active .wg-nav-dot,
.wg-admintpl-nav-item.active .wg-nav-dot,
.wg-nav-dot.active-dot {
    background: #10b981 !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.75) !important;
}

/* 7. Stabilize Heights to Completely Prevent Div Size Changes on Tab Switch */
.wg-dash-split-body,
.wg-org-split-body,
.wg-ts-split-body,
.wg-leave-split-body,
.wg-att-split-body,
.wg-perf-split-body,
.wg-files-split-body,
.wg-cases-split-body {
    min-height: 560px !important;
    max-height: 560px !important;
    overflow: hidden !important;
}

.wg-dash-content,
.wg-adminorg-content,
.wg-adminemp-content,
.wg-adminforms-content,
.wg-adminaccess-content,
.wg-admintpl-content {
    height: 560px !important;
    max-height: 560px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.wg-dash-sidebar,
.wg-org-sidebar,
.wg-ts-sidebar,
.wg-leave-sidebar,
.wg-att-sidebar,
.wg-perf-sidebar,
.wg-files-sidebar,
.wg-cases-sidebar,
.wg-adminorg-sidebar,
.wg-adminemp-sidebar,
.wg-adminforms-sidebar,
.wg-adminaccess-sidebar,
.wg-admintpl-sidebar {
    height: 560px !important;
    max-height: 560px !important;
    overflow-y: auto !important;
    position: relative !important;
}

/* 7. Tables, Buttons & Status Surfaces */
.wg-tpl-table tr,
.wg-access-table tbody tr,
.wg-forms-table tr {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease !important;
}

@media (hover: hover) and (pointer: fine) {
.wg-tpl-table tr:hover,
.wg-access-table tbody tr:hover,
.wg-forms-table tr:hover {
    background-color: rgba(16, 185, 129, 0.04) !important;
}
}

.wg-btn-access-green,
.wg-btn-tpl-green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    border: none !important;
    color: #ffffff !important;
}

@media (hover: hover) and (pointer: fine) {
.wg-btn-access-green:hover,
.wg-btn-tpl-green:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
    transform: translateY(-1px) !important;
}
}

.wg-role-count-badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
}

/* Service tiles in Section 1 */
.wg-service-tile {
    background: #ffffff !important;
    border: 1px solid rgba(11, 43, 32, 0.07) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(11, 43, 32, 0.03) !important;
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
.wg-service-tile:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 36px rgba(16, 185, 129, 0.14) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}
}

.wg-service-icon-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.04) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-radius: 14px !important;
}

/* 8. Sticky Secondary Subnav Floating Dock */
.wg-sticky-subnav {
    backdrop-filter: blur(16px) !important;
    background: rgba(234, 246, 240, 0.92) !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.18) !important;
    box-shadow: 0 10px 30px rgba(11, 43, 32, 0.06) !important;
}

.wg-subnav-pill {
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
.wg-subnav-pill:hover {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #064e3b !important;
}
}

.wg-subnav-pill.active {
    background: #0b2b20 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(11, 43, 32, 0.25) !important;
}

.wg-sticky-subnav.mode-admin .wg-subnav-pill.active {
    background: #064e3b !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(6, 78, 59, 0.25) !important;
}

/* ==========================================================================
   Page Scenic CTA Backdrop Image
   ========================================================================== */
.feat-cta-banner-section,
[class*="-cta-banner-section"],
.onb-cta-banner-section,
.mf-download-section {
    background-image: none !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}