* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    background: #f5f7fa;
    color: #20242a;
}

/* ---------------------------------------
   LOGO
---------------------------------------*/

.logo-work {
    font-weight: 800;
}

.logo-place {
    font-weight: 650;
}

.logo-bo {
    font-weight: 600;
    opacity: 0.35;
}

/* ---------------------------------------
   BOOT SCREEN
---------------------------------------*/

.boot-page {
    min-height: 100vh;
    background: #f7f8fa;
}

.boot-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.boot-logo {
    font-size: clamp(3rem, 8vw, 5.5rem);
    letter-spacing: -0.055em;
    margin-bottom: 38px;
}

.boot-status {
    min-height: 24px;
    font-size: 0.95rem;
    color: #68707d;
    margin-bottom: 14px;
}

.boot-progress {
    width: min(360px, 80vw);
    height: 4px;
    background: #dfe3e8;
    border-radius: 100px;
    overflow: hidden;
}

.boot-progress-bar {
    width: 0;
    height: 100%;
    background: #293241;
    transition: width 0.45s ease;
}

.boot-meta {
    position: fixed;
    bottom: 28px;
    display: flex;
    gap: 12px;
    font-size: 0.72rem;
    color: #a0a7b1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---------------------------------------
   APPLICATION SHELL
---------------------------------------*/

.app-shell {
    min-height: 100vh;
    display: flex;
}

.sidebar {
    width: 245px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    background: #1f2630;
    color: white;
    padding: 25px 18px;
}

.sidebar-logo {
    display: block;
    padding: 5px 10px 28px;
    color: white;
    text-decoration: none;
    font-size: 1.45rem;
    letter-spacing: -0.04em;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nav-item {
    color: #aeb7c5;
    text-decoration: none;
    padding: 11px 12px;
    border-radius: 7px;
    font-size: 0.92rem;
    transition: background 0.15s ease,
        color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-item:hover {
    color: white;
    background: rgba(255, 255, 255, 0.07);
}

.nav-item.active {
    color: white;
    background: rgba(255, 255, 255, 0.10);
}

.sidebar-bottom {
    margin-top: auto;
    padding: 15px 10px 0;
    font-size: 0.72rem;
    color: #7f8997;
}

.system-status {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}

.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5fc48d;
}

.version {
    opacity: 0.7;
}

/* ---------------------------------------
   MAIN AREA
---------------------------------------*/

.main-shell {
    flex: 1;
    margin-left: 245px;
    min-width: 0;
}

.topbar {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 35px;
    background: white;
    border-bottom: 1px solid #e3e7ec;
}

.topbar-left {
    display: flex;
    gap: 6px;
    font-size: 0.86rem;
}

.breadcrumb {
    color: #9299a4;
}

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

.system-clock {
    font-size: 0.82rem;
    color: #858d98;
    font-variant-numeric: tabular-nums;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #293241;
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
}

.user-info {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
}

.user-info span {
    color: #8c949e;
    font-size: 0.7rem;
}

.content {
    padding: 38px;
}

/* ---------------------------------------
   PAGE HEADING
---------------------------------------*/

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
}

.eyebrow {
    margin: 0 0 6px;
    color: #838c98;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.page-heading h1 {
    margin: 0;
    font-size: 2rem;
    letter-spacing: -0.03em;
}

.page-description {
    margin: 7px 0 0;
    color: #7b8490;
}

.workday-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #e0e4e8;
    border-radius: 7px;
    background: white;
    font-size: 0.78rem;
    color: #626b76;
}

/* ---------------------------------------
   DASHBOARD
---------------------------------------*/

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.card {
    background: white;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    padding: 22px;
    min-width: 0;
}

.card-wide {
    grid-column: span 2;
}

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

.card-label {
    margin: 0 0 4px;
    color: #969da7;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.card h2 {
    margin: 0;
    font-size: 1.05rem;
}

.card-status {
    padding: 5px 8px;
    border-radius: 5px;
    background: #f2f4f6;
    font-size: 0.67rem;
    color: #737c86;
    text-transform: uppercase;
}

.metric-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.metric {
    display: flex;
    flex-direction: column;
}

.metric-value {
    font-size: 1.8rem;
    font-weight: 650;
    letter-spacing: -0.04em;
}

.metric-label {
    margin-top: 4px;
    font-size: 0.72rem;
    color: #8a929c;
}

.productivity-score {
    margin-top: 16px;
}

.score {
    font-size: 3rem;
    font-weight: 650;
    letter-spacing: -0.05em;
}

.score-max {
    color: #9aa1aa;
}

.muted {
    color: #858d97;
    font-size: 0.8rem;
    line-height: 1.5;
}

.event-list {
    display: flex;
    flex-direction: column;
}

.event {
    display: flex;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid #edf0f2;
    font-size: 0.82rem;
}

.event:last-child {
    border-bottom: none;
}

.event-time {
    width: 40px;
    color: #9299a2;
}

.event-name {
    font-weight: 500;
}

.announcement {
    display: grid;
    grid-template-columns: 65px 1fr;
    gap: 16px;
    padding: 17px 0;
    border-top: 1px solid #edf0f2;
}

.announcement:first-of-type {
    border-top: none;
}

.announcement-date {
    font-size: 0.68rem;
    font-weight: 700;
    color: #8d959e;
    letter-spacing: 0.05em;
}

.announcement h3 {
    margin: 0 0 5px;
    font-size: 0.88rem;
}

.announcement p {
    margin: 0;
    color: #808892;
    font-size: 0.78rem;
    line-height: 1.5;
}

.text-link {
    color: #657080;
    font-size: 0.75rem;
    text-decoration: none;
}

.text-link:hover {
    text-decoration: underline;
}

.pulse-state {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 24px 0 8px;
    font-size: 1.15rem;
    font-weight: 600;
}

.pulse-icon {
    color: #5fc48d;
    font-size: 0.75rem;
}

/* ---------------------------------------
   RESPONSIVE
---------------------------------------*/

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

    .card-wide {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .sidebar {
        display: none;
    }

    .main-shell {
        margin-left: 0;
    }

    .topbar {
        padding: 0 20px;
    }

    .content {
        padding: 25px 20px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .card-wide {
        grid-column: span 1;
    }

    .metric-row {
        grid-template-columns: 1fr 1fr;
    }

    .page-heading {
        flex-direction: column;
        gap: 20px;
    }
}

/* ============================================================
   WORKPLACEBO UI EXPANSION
   ============================================================*/

/* ---------------------------------------
   NAVIGATION ICONS
---------------------------------------*/

.nav-icon {
    width: 18px;
    text-align: center;
    opacity: 0.55;
}

.nav-disabled {
    cursor: pointer;
}

/* ---------------------------------------
   SYSTEM BANNER
---------------------------------------*/

.system-banner {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 35px;
    background: #f0f2f5;
    border-bottom: 1px solid #e0e4e8;
    color: #707986;
    font-size: 0.72rem;
}

.system-banner-label {
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #9199a4;
}

#system-message {
    transition: opacity 0.3s ease;
}

.message-fade {
    opacity: 0;
}

/* ---------------------------------------
   NOTIFICATIONS
---------------------------------------*/

.notification-wrapper {
    position: relative;
}

.notification-button {
    position: relative;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #606a76;
    font-size: 1.15rem;
    cursor: pointer;
}

.notification-button:hover {
    background: #f2f4f6;
}

.notification-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: #ad4c4c;
    color: white;
    border: 2px solid white;
    border-radius: 100px;
    font-size: 0.58rem;
    font-weight: 700;
}

.notification-panel {
    position: absolute;
    width: 340px;
    top: 44px;
    right: 0;
    background: white;
    border: 1px solid #dde1e6;
    border-radius: 9px;
    box-shadow: 0 15px 45px rgba(20, 27, 35, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.15s ease,
        transform 0.15s ease,
        visibility 0.15s ease;
    z-index: 1000;
}

.notification-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.notification-header {
    display: flex;
    justify-content: space-between;
    padding: 15px 17px;
    border-bottom: 1px solid #edf0f2;
    font-size: 0.78rem;
}

.notification-header span {
    color: #969da7;
    font-size: 0.68rem;
}

.notification-item {
    padding: 14px 17px;
    border-bottom: 1px solid #edf0f2;
}

.notification-item strong,
.notification-item span,
.notification-item small {
    display: block;
}

.notification-item strong {
    font-size: 0.78rem;
    margin-bottom: 4px;
}

.notification-item span {
    color: #7d8691;
    font-size: 0.72rem;
    line-height: 1.4;
}

.notification-item small {
    margin-top: 6px;
    color: #a3a9b0;
    font-size: 0.62rem;
}

.notification-item.unread {
    background: #fafbfc;
}

.notification-footer {
    padding: 12px 17px;
    text-align: center;
    color: #a0a6ae;
    font-size: 0.65rem;
}

/* ---------------------------------------
   PRODUCTIVITY
---------------------------------------*/

.score-bar {
    width: 100%;
    height: 5px;
    margin: 10px 0 16px;
    background: #eceff2;
    border-radius: 100px;
    overflow: hidden;
}

.score-bar-fill {
    height: 100%;
    background: #4c5968;
    border-radius: 100px;
}

/* ---------------------------------------
   DASHBOARD DETAILS
---------------------------------------*/

.wellbeing-meta {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid #edf0f2;
    color: #a0a6ae;
    font-size: 0.68rem;
    line-height: 1.5;
}

.condition-list {
    display: flex;
    flex-direction: column;
}

.condition-list div {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #edf0f2;
    font-size: 0.75rem;
}

.condition-list div:last-child {
    border-bottom: none;
}

.condition-list span {
    color: #8a929d;
}

.condition-list strong {
    font-weight: 600;
}

/* ---------------------------------------
   GENERAL CONTENT PANEL
---------------------------------------*/

.content-panel {
    background: white;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    overflow: hidden;
}

/* ---------------------------------------
   TASKS
---------------------------------------*/

.task-toolbar {
    padding: 14px 18px;
    border-bottom: 1px solid #e7eaed;
}

.task-tabs {
    display: flex;
    gap: 6px;
}

.task-tab {
    padding: 7px 11px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #828b96;
    font-size: 0.72rem;
    cursor: pointer;
}

.task-tab.active {
    background: #eef1f4;
    color: #303843;
    font-weight: 600;
}

.task-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 90px 80px;
    gap: 15px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid #edf0f2;
}

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

.task-checkbox {
    width: 15px;
    height: 15px;
    border: 1px solid #c8cdd4;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.62rem;
    cursor: pointer;
    user-select: none;
}

.task-main {
    display: flex;
    flex-direction: column;
}

.task-main strong {
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.task-main span {
    color: #858d98;
    font-size: 0.7rem;
}

.task-priority {
    width: fit-content;
    padding: 4px 7px;
    border-radius: 5px;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.priority-normal {
    background: #eef1f4;
    color: #69727d;
}

.priority-high {
    background: #f6ecec;
    color: #955656;
}

.priority-low {
    background: #f3f4f5;
    color: #969ca4;
}

.task-due {
    text-align: right;
    color: #7e8792;
    font-size: 0.7rem;
}

/* ---------------------------------------
   TEAM
---------------------------------------*/

.employee-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.employee-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: white;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
}

.employee-card-you {
    border-style: dashed;
}

.employee-avatar {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #293241;
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
}

.employee-card h3 {
    margin: 0 0 3px;
    font-size: 0.85rem;
}

.employee-card p {
    margin: 0 0 7px;
    color: #878f99;
    font-size: 0.7rem;
}

.employee-status {
    font-size: 0.62rem;
}

.employee-status.online {
    color: #4c9970;
}

.employee-status.busy {
    color: #a25c5c;
}

.employee-status.away {
    color: #9b854e;
}

/* ---------------------------------------
   RESOURCES
---------------------------------------*/

.resource-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.resource-card {
    min-height: 185px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    transition: transform 0.15s ease,
        box-shadow 0.15s ease;
    text-decoration: none;
    color: inherit;
}

.resource-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(20, 27, 35, 0.07);
}

.resource-type {
    margin-bottom: 25px;
    color: #9ba2ab;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.resource-card h3 {
    margin: 0 0 8px;
    font-size: 0.87rem;
}

.resource-card p {
    margin: 0;
    color: #818a95;
    font-size: 0.72rem;
    line-height: 1.5;
}

.resource-meta {
    margin-top: auto;
    padding-top: 18px;
    color: #a2a8af;
    font-size: 0.64rem;
}

/* ---------------------------------------
   EASTER EGG
---------------------------------------*/

.easter-bo {
    cursor: default;
    transition: opacity 0.1s ease,
        transform 0.1s ease;
}

.easter-bo.bo-react {
    opacity: 0.75;
    transform: translateY(-1px);
}

.easter-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    background: rgba(16, 22, 29, 0.72);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease,
        visibility 0.2s ease;
    z-index: 5000;
}

.easter-modal.open {
    opacity: 1;
    visibility: visible;
}

.easter-modal-card {
    width: min(460px, 100%);
    padding: 30px;
    background: #171d24;
    color: #e8ecf0;
    border: 1px solid #39424c;
    border-radius: 9px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}

.easter-modal-code {
    margin-bottom: 25px;
    color: #7d8995;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.easter-modal-card h2 {
    margin: 0 0 12px;
    font-size: 1.25rem;
}

.easter-modal-card p {
    color: #aab3bc;
    font-size: 0.8rem;
    line-height: 1.6;
}

.easter-small {
    opacity: 0.65;
}

.easter-modal-card button {
    margin-top: 12px;
    padding: 9px 13px;
    border: 1px solid #46515c;
    border-radius: 6px;
    background: #242c35;
    color: #dfe4e8;
    cursor: pointer;
}

.easter-modal-card button:hover {
    background: #2d3741;
}

/* ---------------------------------------
   RESPONSIVE EXPANSION
---------------------------------------*/

@media (max-width: 1000px) {
    .employee-grid,
    .resource-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .system-banner {
        padding: 8px 20px;
    }

    .notification-panel {
        position: fixed;
        top: 62px;
        left: 15px;
        right: 15px;
        width: auto;
    }

    .user-info {
        display: none;
    }

    .employee-grid,
    .resource-grid {
        grid-template-columns: 1fr;
    }

    .task-row {
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: flex-start;
    }

    .task-priority,
    .task-due {
        grid-column: 2;
    }

    .task-due {
        text-align: left;
    }
}

/* ============================================================
   WORKPLACEBO EXPANSION 02
   ============================================================*/

/* ---------------------------------------
   USER PROFILE LINK
---------------------------------------*/

.user-menu-link {
    color: inherit;
    text-decoration: none;
    padding: 5px 7px;
    border-radius: 7px;
    transition: background 0.15s ease;
}

.user-menu-link:hover {
    background: #f3f5f7;
}

/* ---------------------------------------
   CALENDAR
---------------------------------------*/

.calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
}

.calendar-main {
    background: white;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    overflow: hidden;
}

.calendar-toolbar {
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #e7eaed;
}

.calendar-month {
    font-size: 0.9rem;
    font-weight: 650;
}

.calendar-controls {
    display: flex;
    gap: 5px;
}

.calendar-controls button {
    min-width: 32px;
    height: 30px;
    border: 1px solid #dfe3e7;
    border-radius: 5px;
    background: white;
    color: #6d7681;
    cursor: pointer;
}

.calendar-controls button:hover {
    background: #f5f7f9;
}

.calendar-today {
    padding: 0 10px;
}

.week-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-bottom: 1px solid #e7eaed;
}

.week-day {
    padding: 13px 10px;
    text-align: center;
    border-right: 1px solid #edf0f2;
}

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

.week-day span {
    display: block;
    margin-bottom: 3px;
    color: #929aa4;
    font-size: 0.58rem;
    letter-spacing: 0.07em;
}

.week-day strong {
    font-size: 0.82rem;
}

.week-day.today {
    background: #f2f4f6;
}

.calendar-time-row {
    min-height: 68px;
    display: grid;
    grid-template-columns: 60px 1fr;
    border-bottom: 1px solid #edf0f2;
}

.calendar-time-row:last-child {
    border-bottom: none;
}

.calendar-hour {
    padding: 9px 10px;
    border-right: 1px solid #edf0f2;
    color: #a0a6ae;
    font-size: 0.62rem;
    text-align: right;
}

.calendar-slot {
    position: relative;
    padding: 6px 10px;
}

.calendar-event {
    width: min(420px, 85%);
    padding: 8px 11px;
    background: #edf1f4;
    border-left: 3px solid #536170;
    border-radius: 5px;
    font-size: 0.7rem;
}

.calendar-event strong,
.calendar-event span {
    display: block;
}

.calendar-event strong {
    margin-bottom: 3px;
    font-size: 0.72rem;
}

.calendar-event span {
    color: #818a95;
    font-size: 0.62rem;
}

.calendar-event.focus {
    background: #f1f3f4;
    border-left-color: #929ba4;
}

.calendar-event.suspicious {
    background: #f6f1eb;
    border-left-color: #9b805c;
}

.calendar-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.allocation-list,
.activity-list {
    margin-top: 18px;
}

.allocation-list div,
.activity-list div {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #edf0f2;
    font-size: 0.72rem;
}

.allocation-list div:last-child,
.activity-list div:last-child {
    border-bottom: none;
}

.allocation-list span,
.activity-list span {
    color: #858e99;
}

.allocation-list strong,
.activity-list strong {
    font-weight: 600;
}

/* ---------------------------------------
   PROFILE
---------------------------------------*/

.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr)
        minmax(250px, 1fr);
    gap: 20px;
}

.profile-card {
    background: white;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    padding: 28px;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 25px;
    border-bottom: 1px solid #edf0f2;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #293241;
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
}

.profile-header h2 {
    margin: 0 0 4px;
    font-size: 1.25rem;
}

.profile-header p {
    margin: 0;
    color: #89919b;
    font-size: 0.76rem;
}

.profile-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 12px;
}

.profile-field {
    padding: 18px 10px;
    border-bottom: 1px solid #edf0f2;
}

.profile-field:nth-child(odd) {
    padding-left: 0;
}

.profile-field span,
.profile-field strong {
    display: block;
}

.profile-field span {
    margin-bottom: 5px;
    color: #949ba4;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-field strong {
    font-size: 0.78rem;
}

.profile-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-score {
    margin: 15px 0 8px;
}

.profile-score span {
    font-size: 2.6rem;
    font-weight: 650;
}

.profile-score small {
    color: #9ca3ab;
}

.profile-note p {
    margin-bottom: 6px;
    font-size: 0.8rem;
}

.profile-note small {
    color: #999fa7;
    font-size: 0.66rem;
}

/* ---------------------------------------
   TASK COMPLETION
---------------------------------------*/

.task-complete {
    opacity: 0.48;
}

.task-complete .task-main strong {
    text-decoration: line-through;
}

.task-complete .task-checkbox {
    background: #566676;
    border-color: #566676;
}

/* ---------------------------------------
   EASTER ACTIONS
---------------------------------------*/

.easter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
}

.internal-access-link {
    color: #aab7c4;
    font-size: 0.72rem;
    text-decoration: none;
}

.internal-access-link:hover {
    color: white;
}

/* ---------------------------------------
   INTERNAL SYSTEM
---------------------------------------*/

.internal-page {
    min-height: 100vh;
    background: #0f1419;
    color: #c5cdd5;
    font-family: "Courier New",
        Courier,
        monospace;
}

.internal-shell {
    min-height: 100vh;
}

.internal-header {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    border-bottom: 1px solid #293139;
    background: #12181e;
}

.internal-system-name {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

.internal-classification {
    margin-left: 12px;
    padding: 3px 6px;
    border: 1px solid #784f4f;
    color: #c78383;
    font-size: 0.58rem;
}

.internal-node {
    color: #596570;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

.internal-content {
    width: min(1050px, 92%);
    margin: 0 auto;
    padding: 65px 0;
}

.internal-title {
    margin-bottom: 35px;
}

.internal-code {
    margin: 0 0 10px;
    color: #65717c;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

.internal-title h1 {
    margin: 0 0 10px;
    color: #e1e6ea;
    font-size: 1.45rem;
    font-weight: 500;
}

.internal-title > p:last-child {
    margin: 0;
    color: #7f8a94;
    font-size: 0.72rem;
}

.internal-warning {
    padding: 14px 16px;
    margin-bottom: 25px;
    border: 1px solid #604d32;
    background: #1c1914;
    color: #9e8c71;
    font-size: 0.66rem;
}

.internal-warning strong {
    margin-right: 10px;
    color: #c8ad81;
}

.internal-warning span {
    float: right;
}

.internal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.internal-panel {
    border: 1px solid #2a333b;
    background: #12181e;
}

.internal-panel-wide {
    grid-column: span 2;
}

.internal-panel-heading {
    padding: 10px 13px;
    border-bottom: 1px solid #293139;
    color: #717d88;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.internal-data-row {
    display: flex;
    justify-content: space-between;
    padding: 11px 13px;
    border-bottom: 1px solid #20282f;
    font-size: 0.68rem;
}

.internal-data-row:last-child {
    border-bottom: none;
}

.internal-data-row span {
    color: #68747e;
}

.internal-data-row strong {
    color: #aab4bc;
    font-weight: normal;
}

.internal-green {
    color: #6eae88 !important;
}

.internal-amber {
    color: #c0a06d !important;
}

.internal-log {
    padding: 8px 0;
}

.internal-log div {
    display: flex;
    gap: 18px;
    padding: 6px 13px;
    color: #808b94;
    font-size: 0.65rem;
}

.log-time {
    width: 65px;
    flex-shrink: 0;
    color: #515d67;
}

.internal-log-last {
    color: #adb7bf !important;
}

.internal-footer-message {
    margin: 50px 0 35px;
    text-align: center;
    color: #7a858f;
    font-size: 0.72rem;
}

.internal-footer-message p {
    margin: 6px 0;
}

.internal-faint {
    color: #3e4851;
}

.internal-return {
    color: #66737e;
    font-size: 0.68rem;
    text-decoration: none;
}

.internal-return:hover {
    color: #a6b0b8;
}

/* ---------------------------------------
   RESPONSIVE
---------------------------------------*/

@media (max-width: 850px) {
    .calendar-layout,
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .internal-grid {
        grid-template-columns: 1fr;
    }

    .internal-panel-wide {
        grid-column: span 1;
    }
}

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

    .profile-field {
        padding-left: 0;
    }

    .internal-warning span {
        display: block;
        float: none;
        margin-top: 8px;
    }
}

/* ============================================================
   WORKPLACEBO CALLS
   ============================================================*/

/* ---------------------------------------
   NAV BADGE
---------------------------------------*/

.nav-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.11);
    color: #c5ccd4;
    font-size: 0.58rem;
    font-weight: 700;
}

/* ---------------------------------------
   CALLS LAYOUT
---------------------------------------*/

.calls-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr)
        minmax(300px, 1fr);
    gap: 20px;
}

.calls-main {
    background: white;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    overflow: hidden;
}

.calls-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 14px 18px;
    border-bottom: 1px solid #e7eaed;
}

.call-tabs {
    display: flex;
    gap: 5px;
}

.call-tab {
    padding: 7px 11px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #818a94;
    font-size: 0.7rem;
    cursor: pointer;
}

.call-tab:hover {
    background: #f3f5f7;
}

.call-tab.active {
    background: #edf0f3;
    color: #303842;
    font-weight: 600;
}

.call-search input {
    width: 180px;
    padding: 8px 10px;
    border: 1px solid #dde2e7;
    border-radius: 6px;
    outline: none;
    font-size: 0.7rem;
    background: #fafbfc;
}

.call-search input:focus {
    border-color: #aeb7c1;
    background: white;
}

/* ---------------------------------------
   CALL ROWS
---------------------------------------*/

.call-row {
    display: grid;
    grid-template-columns: 36px
        minmax(0, 1fr)
        85px
        120px
        55px;
    gap: 14px;
    align-items: center;
    min-height: 67px;
    padding: 11px 18px;
    border-bottom: 1px solid #edf0f2;
    transition: background 0.12s ease;
}

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

.call-row:hover {
    background: #fafbfc;
}

.call-row.call-hidden {
    display: none;
}

.call-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0f2f4;
    color: #707985;
    font-size: 0.8rem;
}

.call-icon.missed {
    background: #f7eeee;
    color: #a15b5b;
}

.call-icon.voicemail {
    background: #eef1f5;
    color: #596979;
    font-size: 0.52rem;
}

.call-person {
    display: flex;
    flex-direction: column;
}

.call-person strong {
    margin-bottom: 3px;
    font-size: 0.77rem;
}

.call-person span {
    color: #8c949e;
    font-size: 0.66rem;
}

.call-direction,
.call-time,
.call-duration {
    color: #7e8792;
    font-size: 0.66rem;
}

.missed-call .call-direction {
    color: #a15b5b;
}

.call-duration {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------
   CALL SIDEBAR
---------------------------------------*/

.calls-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---------------------------------------
   VOICEMAILS
---------------------------------------*/

.voicemail-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.voicemail-card {
    position: relative;
    padding: 14px;
    border: 1px solid #e5e8eb;
    border-radius: 7px;
    background: #fafbfc;
}

.voicemail-card.unread-voicemail::before {
    content: "";
    position: absolute;
    top: 17px;
    left: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #647688;
}

.voicemail-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.voicemail-meta div {
    display: flex;
    flex-direction: column;
}

.voicemail-meta strong {
    margin-bottom: 3px;
    font-size: 0.74rem;
}

.voicemail-meta span,
.voicemail-duration {
    color: #959da7;
    font-size: 0.62rem;
}

.voicemail-transcript {
    color: #69727d;
    font-size: 0.7rem;
    line-height: 1.55;
}

.voicemail-transcript p {
    margin: 0 0 9px;
}

.voicemail-transcript p:last-child {
    margin-bottom: 0;
}

.transcription-note {
    margin-top: 12px;
    padding-top: 9px;
    border-top: 1px solid #e5e8eb;
    color: #a0a7af;
    font-size: 0.58rem;
}

.archived-voicemail {
    opacity: 0.72;
}

/* ---------------------------------------
   PHONE STATUS
---------------------------------------*/

.phone-status-main {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}

.phone-status-main strong {
    font-size: 0.8rem;
}

.phone-status p {
    margin: 10px 0 0;
    color: #87909a;
    font-size: 0.69rem;
    line-height: 1.5;
}

/* ---------------------------------------
   CALL TOAST
---------------------------------------*/

.call-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    max-width: 310px;
    padding: 12px 15px;
    border-radius: 7px;
    background: #222a33;
    color: #e7ebef;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
    font-size: 0.7rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
    z-index: 4000;
}

.call-toast.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ---------------------------------------
   RESPONSIVE
---------------------------------------*/

@media (max-width: 1050px) {
    .calls-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .calls-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .call-search input {
        width: 100%;
    }

    .call-row {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;
    }

    .call-direction,
    .call-time,
    .call-duration {
        grid-column: 2;
    }

    .call-duration {
        text-align: left;
    }
}

/* ============================================================
   WORKPLACEBO EMPLOYEE PULSE
   ============================================================*/

.pulse-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr)
        minmax(260px, 0.7fr);
    gap: 20px;
}

.pulse-survey-panel {
    background: white;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    overflow: hidden;
}

.pulse-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 26px;
    border-bottom: 1px solid #edf0f2;
}

.pulse-intro h2 {
    margin: 0;
    font-size: 1.15rem;
}

.pulse-estimate {
    color: #969da6;
    font-size: 0.67rem;
}

.pulse-assurance {
    padding: 16px 26px;
    background: #f7f8fa;
    border-bottom: 1px solid #e7eaed;
}

.pulse-assurance strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.74rem;
}

.pulse-assurance p {
    margin: 0;
    color: #858d97;
    font-size: 0.68rem;
    line-height: 1.5;
}

/* QUESTIONS*/

.pulse-question {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 28px 26px;
    border-bottom: 1px solid #edf0f2;
}

.pulse-question-number {
    padding-top: 3px;
    color: #b0b6bd;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.pulse-question-content h3 {
    max-width: 680px;
    margin: 0 0 7px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
}

.pulse-question-content > p {
    max-width: 680px;
    margin: 0 0 20px;
    color: #8a929c;
    font-size: 0.69rem;
    line-height: 1.5;
}

/* SCALE*/

.pulse-scale {
    max-width: 460px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.pulse-scale label {
    position: relative;
    cursor: pointer;
}

.pulse-scale input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pulse-scale label span {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce1e5;
    border-radius: 6px;
    background: #fafbfc;
    color: #68727d;
    font-size: 0.76rem;
    transition: background 0.12s ease,
        border-color 0.12s ease,
        color 0.12s ease;
}

.pulse-scale label:hover span {
    border-color: #aeb7c0;
    background: #f3f5f7;
}

.pulse-scale input:checked + span {
    border-color: #485766;
    background: #485766;
    color: white;
}

.pulse-option-locked {
    cursor: not-allowed !important;
}

.pulse-option-locked span {
    opacity: 0.28;
    background: #f4f5f6 !important;
    border-color: #e4e7ea !important;
}

.pulse-scale-labels {
    max-width: 460px;
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    color: #a0a7af;
    font-size: 0.58rem;
}

/* SUBMISSION*/

.pulse-submit-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 22px 26px;
}

.pulse-privacy {
    margin: 0 0 3px;
    color: #777f89;
    font-size: 0.65rem;
}

.pulse-privacy-sub {
    margin: 0;
    color: #a1a7ae;
    font-size: 0.59rem;
}

.pulse-submit {
    flex-shrink: 0;
    padding: 10px 17px;
    border: none;
    border-radius: 6px;
    background: #293541;
    color: white;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

.pulse-submit:hover {
    background: #354452;
}

.pulse-message {
    min-height: 0;
    margin: 0 26px 22px;
    font-size: 0.69rem;
    line-height: 1.5;
}

.pulse-message:empty {
    display: none;
}

.pulse-message-success {
    padding: 10px 12px;
    border: 1px solid #dce7df;
    border-radius: 6px;
    background: #f4f8f5;
    color: #607565;
}

.pulse-message-error {
    padding: 10px 12px;
    border: 1px solid #eadada;
    border-radius: 6px;
    background: #faf4f4;
    color: #8d6262;
}

/* SIDEBAR*/

.pulse-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pulse-status-display {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.pulse-status-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef3ef;
    color: #68806e;
    font-size: 0.72rem;
}

.pulse-status-display > div:last-child {
    display: flex;
    flex-direction: column;
}

.pulse-status-display strong {
    margin-bottom: 3px;
    font-size: 0.76rem;
}

.pulse-status-display span {
    color: #969da6;
    font-size: 0.63rem;
}

.pulse-history {
    margin-top: 15px;
}

.pulse-history div {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #edf0f2;
    font-size: 0.67rem;
}

.pulse-history div:last-child {
    border-bottom: none;
}

.pulse-history span {
    color: #8c949e;
}

.pulse-history strong {
    font-weight: 600;
}

/* RESPONSIVE*/

@media (max-width: 950px) {
    .pulse-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .pulse-question {
        grid-template-columns: 1fr;
    }

    .pulse-question-number {
        padding: 0;
    }

    .pulse-submit-area {
        align-items: stretch;
        flex-direction: column;
    }

    .pulse-submit {
        width: 100%;
    }
}

/* ============================================================
   RESOURCE DOCUMENTS
   ============================================================*/

.resource-section-heading {
    margin: 28px 0 14px;
}

.resource-section-heading h2 {
    margin: 3px 0 0;
    font-size: 1rem;
}

.resource-section-heading-spaced {
    margin-top: 38px;
}

.resource-card-action {
    border-left: 3px solid #697989;
}

/* DOCUMENT PAGE*/

.document-page,
.form-page {
    max-width: 1150px;
}

.document-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
}

.document-back {
    color: #66717c;
    font-size: 0.7rem;
    text-decoration: none;
}

.document-back:hover {
    color: #26323d;
}

.document-version {
    color: #9aa1a9;
    font-size: 0.62rem;
}

.document-header {
    max-width: 780px;
    margin-bottom: 30px;
}

.document-header h1 {
    margin: 4px 0 9px;
}

.document-header > p:last-child {
    margin: 0;
    color: #747d87;
    font-size: 0.78rem;
    line-height: 1.6;
}

.document-layout,
.form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr)
        260px;
    gap: 24px;
    align-items: start;
}

.document-body {
    background: #fff;
    border: 1px solid #e2e6e9;
    border-radius: 9px;
}

.document-body-wide {
    max-width: 900px;
}

.document-body section {
    padding: 26px 28px;
    border-bottom: 1px solid #edf0f2;
}

.document-body section:last-child {
    border-bottom: none;
}

.document-body h2 {
    margin: 0 0 12px;
    font-size: 0.92rem;
}

.document-body p {
    margin: 0 0 13px;
    color: #68717b;
    font-size: 0.73rem;
    line-height: 1.7;
}

.document-body p:last-child {
    margin-bottom: 0;
}

.document-body ul {
    margin: 12px 0 0;
    padding-left: 20px;
    color: #68717b;
    font-size: 0.72rem;
    line-height: 1.8;
}

.document-note {
    margin-top: 18px;
    padding: 13px 15px;
    background: #f6f7f8;
    border-left: 3px solid #aeb5bc;
    color: #69727b;
    font-size: 0.69rem;
    line-height: 1.6;
}

.document-link {
    display: inline-block;
    margin-top: 7px;
    color: #445a6e;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
}

.document-sidebar,
.form-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.document-info-card,
.form-help-card {
    padding: 20px;
    background: #fff;
    border: 1px solid #e2e6e9;
    border-radius: 9px;
}

.document-info-card span {
    display: block;
    margin-top: 14px;
    color: #9aa1a9;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.document-info-card span:first-child {
    margin-top: 0;
}

.document-info-card strong {
    display: block;
    margin-top: 3px;
    color: #4d5660;
    font-size: 0.69rem;
    line-height: 1.4;
}

/* MEETING FRAMEWORK*/

.framework-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.framework-steps > div {
    padding: 16px;
    background: #f8f9fa;
    border: 1px solid #e8ebed;
    border-radius: 7px;
}

.framework-steps span {
    display: block;
    margin-bottom: 8px;
    color: #a2a9b0;
    font-size: 0.58rem;
    font-weight: 700;
}

.framework-steps strong {
    display: block;
    margin-bottom: 5px;
    font-size: 0.72rem;
}

.framework-steps p {
    margin: 0;
    font-size: 0.66rem;
}

.document-table {
    margin-top: 18px;
    border: 1px solid #e4e7e9;
    border-radius: 7px;
    overflow: hidden;
}

.document-table-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 11px 14px;
    border-bottom: 1px solid #edf0f2;
    font-size: 0.68rem;
}

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

.document-table-header {
    background: #f6f7f8;
    color: #838b94;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* TRAINING*/

.training-required {
    padding: 5px 8px;
    border-radius: 4px;
    background: #f5eeee;
    color: #875e5e;
    font-size: 0.57rem;
    font-weight: 700;
}

.training-progress-card,
.pto-hero-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-bottom: 22px;
    background: #e6e9eb;
    border: 1px solid #e2e5e7;
    border-radius: 8px;
    overflow: hidden;
}

.training-progress-card > div,
.pto-hero-card > div {
    padding: 17px 20px;
    background: white;
}

.training-progress-card span,
.pto-hero-card span {
    display: block;
    margin-bottom: 4px;
    color: #999fa6;
    font-size: 0.57rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.training-progress-card strong,
.pto-hero-card strong {
    font-size: 0.73rem;
}

.primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: #293541;
    color: white;
    font-family: inherit;
    font-size: 0.69rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.primary-action:hover {
    background: #354452;
}

.primary-action:disabled {
    opacity: 0.55;
    cursor: default;
}

.document-action {
    margin-top: 8px;
}

.form-result {
    margin-top: 12px !important;
    color: #667b69 !important;
}

/* FORMS*/

.workplace-form {
    background: white;
    border: 1px solid #e2e6e9;
    border-radius: 9px;
    overflow: hidden;
}

.form-section {
    padding: 25px 27px;
    border-bottom: 1px solid #edf0f2;
}

.form-section h2 {
    margin: 0 0 18px;
    font-size: 0.87rem;
}

.form-section label:not(.form-checkbox) {
    display: block;
    margin-top: 17px;
    color: #59636e;
    font-size: 0.67rem;
    font-weight: 600;
}

.form-section label:not(.form-checkbox):first-of-type {
    margin-top: 0;
}

.form-section input[type="text"],
.form-section input[type="date"],
.form-section select,
.form-section textarea {
    box-sizing: border-box;
    width: 100%;
    margin-top: 7px;
    padding: 10px 11px;
    border: 1px solid #dce1e5;
    border-radius: 6px;
    background: #fff;
    color: #333b43;
    font-family: inherit;
    font-size: 0.72rem;
}

.form-section textarea {
    resize: vertical;
    line-height: 1.55;
}

.form-section input:focus,
.form-section select:focus,
.form-section textarea:focus {
    outline: none;
    border-color: #8d9aa6;
    box-shadow: 0 0 0 2px rgba(80, 96, 110, 0.08);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.optional-label {
    margin-left: 5px;
    color: #a0a7ae;
    font-size: 0.58rem;
    font-weight: 400;
}

.form-section-muted {
    background: #fafbfb;
}

.form-checkbox {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    color: #68717a;
    font-size: 0.66rem;
    line-height: 1.55;
}

.form-checkbox:last-child {
    margin-bottom: 0;
}

.form-checkbox input {
    flex-shrink: 0;
    margin-top: 3px;
}

.form-guidance {
    margin: -8px 0 17px;
    color: #9299a1;
    font-size: 0.65rem;
    line-height: 1.5;
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 21px 27px;
}

.form-actions > span {
    color: #959ca4;
    font-size: 0.62rem;
    line-height: 1.5;
}

.form-help-card strong {
    display: block;
    margin-bottom: 10px;
    font-size: 0.72rem;
}

.form-help-card p {
    color: #868e97;
    font-size: 0.65rem;
    line-height: 1.6;
}

.submission-result {
    display: none;
    margin: 0 27px 25px;
    padding: 15px;
    border: 1px solid #dce6de;
    border-radius: 7px;
    background: #f4f8f5;
    color: #617366;
    font-size: 0.68rem;
}

.submission-result-visible {
    display: block;
}

.submission-result > strong {
    display: block;
    margin-bottom: 3px;
    font-size: 0.75rem;
}

.submission-result > span {
    color: #939b95;
    font-size: 0.61rem;
}

.submission-result p {
    margin: 10px 0;
    line-height: 1.55;
}

.submission-status {
    padding-top: 9px;
    border-top: 1px solid #dfe7e1;
}

/* ACRONYMS*/

.acronym-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.acronym-toolbar input {
    width: 310px;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid #dce1e5;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.71rem;
}

.acronym-toolbar span {
    color: #989fa7;
    font-size: 0.61rem;
}

.acronym-list {
    background: white;
    border: 1px solid #e2e6e9;
    border-radius: 8px;
    overflow: hidden;
}

.acronym-row {
    display: grid;
    grid-template-columns: 90px 1.1fr 1fr;
    gap: 20px;
    padding: 13px 16px;
    border-bottom: 1px solid #edf0f2;
    font-size: 0.68rem;
}

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

.acronym-row strong {
    color: #46515d;
}

.acronym-row span {
    color: #737c86;
}

.acronym-row span:last-child {
    color: #a0a6ad;
}

.acronym-note {
    max-width: 800px;
}

/* RESPONSIVE*/

@media (max-width: 900px) {
    .document-layout,
    .form-layout {
        grid-template-columns: 1fr;
    }

    .document-sidebar,
    .form-sidebar {
        order: -1;
    }
}

@media (max-width: 650px) {
    .document-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .training-progress-card,
    .pto-hero-card {
        grid-template-columns: 1fr;
    }

    .framework-steps {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .primary-action {
        width: 100%;
    }

    .acronym-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .acronym-toolbar input {
        width: 100%;
    }

    .acronym-row {
        grid-template-columns: 65px 1fr;
        gap: 7px 12px;
    }

    .acronym-row span:last-child {
        grid-column: 2;
    }
}

/* ============================================================
   PTO REQUEST FORM REFINEMENTS
   ============================================================*/

.form-page-narrow {
    max-width: 900px;
}

.workplace-form-single {
    width: 100%;
}

.workplace-form-single .form-section {
    padding: 28px 30px;
}

.workplace-form-single .form-section h2 {
    margin-bottom: 22px;
}

/* Put fields on deliberate rows instead of letting them bunch together*/

.workplace-form-single label:not(.form-checkbox) {
    display: block;
    margin-top: 22px;
}

.workplace-form-single label:not(.form-checkbox):first-of-type {
    margin-top: 0;
}

/* Date fields*/

.form-row-dates {
    display: grid;
    grid-template-columns: 220px 220px;
    gap: 22px;
    align-items: start;
}

.form-row-dates label {
    margin-top: 0 !important;
}

.form-row-dates input[type="date"] {
    width: 220px;
}

/* Fixed field widths*/

.form-field-medium {
    width: 320px;
    max-width: 100%;
}

.form-field-wide {
    width: 620px;
    max-width: 100%;
}

/* Inputs*/

.workplace-form-single select,
.workplace-form-single textarea,
.workplace-form-single input[type="date"] {
    display: block;
    box-sizing: border-box;
    margin-top: 8px;
    border: 1px solid #d7dde2;
    border-radius: 6px;
    background: #fff;
    color: #303840;
    font-family: inherit;
    font-size: 0.73rem;
}

.workplace-form-single select {
    width: 320px;
    max-width: 100%;
    height: 42px;
    padding: 0 11px;
}

.workplace-form-single input[type="date"] {
    height: 42px;
    padding: 0 10px;
}

.workplace-form-single textarea {
    width: 100%;
    padding: 11px 12px;
    line-height: 1.5;
    resize: vertical;
}

/* Checkbox area*/

.workplace-form-single .form-checkbox {
    max-width: 700px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.workplace-form-single .form-checkbox input {
    margin-top: 2px;
}

/* Bottom submit section*/

.workplace-form-single .form-actions {
    padding: 22px 30px;
}

/* Mobile*/

@media (max-width: 650px) {
    .form-row-dates {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-row-dates input[type="date"] {
        width: 100%;
    }

    .form-field-medium,
    .form-field-wide {
        width: 100%;
    }

    .workplace-form-single select {
        width: 100%;
    }
}

/* ============================================================
   MOBILE NAVIGATION
   ============================================================ */

.mobile-menu-button {
    display: none;

    width: 40px;
    height: 40px;

    align-items: center;
    justify-content: center;

    margin-right: 12px;

    border: 1px solid #dde2e6;
    border-radius: 6px;

    background: #fff;
    color: #35404a;

    font-size: 1.15rem;
    line-height: 1;

    cursor: pointer;
}

.mobile-sidebar-overlay {
    display: none;
}


/* MOBILE */

@media (max-width: 760px) {

    .mobile-menu-button {
        display: inline-flex;
    }

    .sidebar {
        display: block;

        position: fixed;

        top: 0;
        left: 0;

        width: 245px;
        height: 100%;

        z-index: 1002;

        transform: translateX(-100%);

        transition: transform 0.22s ease;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .mobile-sidebar-overlay {
        display: block;

        position: fixed;

        inset: 0;

        z-index: 1001;

        background: rgba(18, 24, 30, 0.42);

        opacity: 0;
        pointer-events: none;

        transition: opacity 0.22s ease;
    }

    .mobile-sidebar-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

    .main-shell {
        margin-left: 0;
    }

}