:root {
    --pop-white: #ffffff;
    --pop-off-white: #f9f9f9;
    --pop-brand: #01714d;
    --pop-primary: #01714d;
    --pop-primary-hover: #015c3f;
    --pop-primary-subtle: rgba(1, 113, 77, 0.1);
    --pop-accent: #cec1a1;
    --pop-accent-subtle: rgba(206, 193, 161, 0.22);
    --pop-muted: #e0e0e0;
    --pop-charcoal: #444444;
    --pop-black: #000000;
    --pop-accent-hover: #b9aa86;
    --tblr-primary: #01714d;
    --tblr-primary-rgb: 1, 113, 77;
    --tblr-body-color: #444;
    --tblr-body-bg: #f9f9f9;
    --tblr-border-color: #e0e0e0;
    --tblr-border-color-translucent: rgba(68, 68, 68, 0.14);
    --tblr-link-color: #444;
    --tblr-link-hover-color: #000;
}

body {
    color: var(--pop-charcoal);
    background: var(--pop-off-white);
}

.bg-light {
    background-color: var(--pop-off-white) !important;
}

.bg-white {
    background-color: var(--pop-white) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pop-primary);
    box-shadow: 0 0 0 0.25rem rgba(1, 113, 77, 0.2);
}

.page-wrapper,
.page-body {
    background: var(--pop-off-white);
}

.card,
.navbar,
.dropdown-menu,
.modal-content {
    --tblr-card-bg: var(--pop-white);
}

.btn-primary {
    font-weight: 600;
    --tblr-btn-color: var(--pop-white);
    --tblr-btn-bg: var(--pop-primary);
    --tblr-btn-border-color: var(--pop-primary);
    --tblr-btn-hover-color: var(--pop-white);
    --tblr-btn-hover-bg: var(--pop-primary-hover);
    --tblr-btn-hover-border-color: var(--pop-primary-hover);
    --tblr-btn-active-color: var(--pop-white);
    --tblr-btn-active-bg: var(--pop-primary-hover);
    --tblr-btn-active-border-color: var(--pop-primary-hover);
}

.btn-outline-primary {
    font-weight: 600;
    --tblr-btn-color: var(--pop-brand);
    --tblr-btn-border-color: var(--pop-accent);
    --tblr-btn-hover-color: var(--pop-brand);
    --tblr-btn-hover-bg: var(--pop-accent-subtle);
    --tblr-btn-hover-border-color: var(--pop-accent);
    --tblr-btn-active-color: var(--pop-brand);
    --tblr-btn-active-bg: var(--pop-accent-subtle);
    --tblr-btn-active-border-color: var(--pop-accent);
}

.pop-more-actions-button {
    font-weight: 600;
}

.navbar-vertical {
    --tblr-navbar-bg: var(--pop-muted);
    --tblr-navbar-border-color: rgba(68, 68, 68, 0.14);
    background: var(--pop-muted);
    color: var(--pop-charcoal);
}

.navbar-vertical .nav-link.active,
.navbar-vertical .nav-link:hover {
    background: var(--pop-primary-subtle);
}

.pop-project-phase-complete-badge {
    background: var(--pop-primary-subtle);
    color: var(--pop-primary);
}

.navbar-vertical .nav-link.active,
.navbar-vertical .nav-link.active .nav-link-icon {
    color: var(--pop-primary);
}

.navbar-vertical .nav-link,
.navbar-vertical .navbar-brand,
.navbar-vertical .navbar-brand a {
    color: var(--pop-charcoal);
}

.navbar-vertical a.nav-link {
    font-size: 0.9375rem;
    font-weight: 600;
}

.field-shell > .page > header,
.field-bottom-nav {
    background: var(--pop-muted) !important;
}

.field-bottom-nav .field-nav-link {
    color: var(--pop-charcoal);
}

.field-bottom-nav .field-nav-link.fw-bold {
    color: var(--pop-black);
}

.pop-brand-mark {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    margin-right: 0.55rem;
    place-items: center;
    border-radius: 0.5rem;
    background: var(--pop-brand);
    color: var(--pop-white);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.pop-brand-logo {
    display: inline-block;
    width: 2.25rem;
    height: 2.25rem;
    margin-right: 0.55rem;
    object-fit: contain;
    vertical-align: middle;
}

.pop-brand-logo-lg {
    width: 4.5rem;
    height: 4.5rem;
    margin-right: 0;
}

.pop-brand-name {
    vertical-align: middle;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.pop-settings-layout {
    display: grid;
    grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.pop-settings-navigation {
    position: sticky;
    top: 1rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: 0.5rem;
    background: var(--pop-off-white);
}

.pop-settings-navigation .nav-link {
    color: var(--pop-charcoal);
    font-weight: 600;
}

.pop-settings-nav-heading {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem 0.25rem;
    color: var(--pop-charcoal);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pop-settings-nav-heading:first-child {
    margin-top: 0;
}

.pop-settings-navigation .nav-link:hover,
.pop-settings-navigation .nav-link:focus-visible {
    background: var(--pop-accent-subtle);
    color: var(--pop-brand);
}

.pop-settings-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1rem;
}

.pop-settings-section {
    scroll-margin-top: 1rem;
}

.pop-dashboard-welcome-card {
    min-height: 14rem;
    overflow: hidden;
    border-color: rgba(1, 113, 77, 0.16);
    background: linear-gradient(
        180deg,
        rgba(1, 113, 77, 0.18) 0%,
        rgba(1, 113, 77, 0.07) 38%,
        var(--pop-white) 78%
    );
}

.pop-dashboard-welcome-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0;
    margin-top: auto;
}

.pop-dashboard-welcome-metric {
    min-width: 8rem;
    padding: 0 1.5rem;
}

.pop-dashboard-welcome-metric:first-child {
    padding-left: 0;
}

.pop-dashboard-welcome-metric:not(:first-child) {
    border-left: 1px solid rgba(68, 68, 68, 0.14);
}

.pop-dashboard-metric-details {
    display: grid;
    gap: 0.25rem;
    color: var(--pop-charcoal);
    font-size: 0.8125rem;
}

.pop-dashboard-metric-details > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 767.98px) {
    .pop-dashboard-welcome-metrics {
        grid-template-columns: 1fr;
    }

    .pop-dashboard-welcome-metric,
    .pop-dashboard-welcome-metric:first-child {
        padding: 1rem 0;
    }

    .pop-dashboard-welcome-metric:not(:first-child) {
        border-top: 1px solid rgba(68, 68, 68, 0.14);
        border-left: 0;
    }
}

.pop-dashboard-metric-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 1.125rem;
    color: var(--pop-brand);
}

.pop-work-queue-group-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}

.pop-status-dot {
    width: 0.625rem;
    height: 0.625rem;
    flex: 0 0 0.625rem;
    border-radius: 50%;
    background-color: var(--pop-muted);
}

.pop-status-dot-draft {
    background-color: var(--tblr-secondary);
}

.pop-status-dot-awaiting_response {
    background-color: var(--tblr-warning);
}

.pop-status-dot-approved {
    background-color: var(--tblr-success);
}

.pop-status-dot-converted {
    background-color: var(--tblr-info);
}

.pop-status-dot-awaiting_payment {
    background-color: var(--tblr-warning);
}

.pop-status-dot-past_due {
    background-color: var(--tblr-danger);
}

.pop-status-dot-paid {
    background-color: var(--tblr-success);
}

.pop-status-dot-refunded {
    background-color: var(--tblr-pink);
}

.pop-status-dot-bad_debt {
    background-color: var(--tblr-purple);
}

.pop-status-dot-ready_to_invoice,
.pop-status-dot-recurring_due {
    background-color: var(--tblr-warning);
}

.pop-table-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.pop-table-status-badge::before {
    width: 0.45rem;
    height: 0.45rem;
    flex: 0 0 0.45rem;
    border-radius: 50%;
    background-color: currentColor;
    content: "";
}

@media (max-width: 991.98px) {
    .pop-settings-layout {
        grid-template-columns: 1fr;
    }

    .pop-settings-navigation {
        position: static;
    }

}

.pop-icon {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -0.2em;
}

.field-nav-link {
    display: inline-flex;
    min-width: 5rem;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.75rem;
}

.pop-assignment-type-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    white-space: normal;
}

.pop-calendar-day-actionable {
    cursor: pointer;
}

.pop-calendar-day {
    background-color: var(--pop-white);
}

.pop-calendar-day-today {
    background-color: var(--pop-accent-subtle);
}

.pop-linked-table-row {
    cursor: pointer;
}

.pop-linked-table-row:hover > *,
.pop-linked-table-row:focus-visible > * {
    background-color: rgba(206, 193, 161, 0.22) !important;
}

.pop-linked-table-row:focus-visible {
    outline: 2px solid var(--tblr-primary);
    outline-offset: -2px;
}

.pop-table-actions-toggle {
    padding: 0 0.375rem;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
}

.pop-table-actions-toggle:hover,
.pop-table-actions-toggle:focus-visible,
.pop-table-actions-toggle[aria-expanded="true"] {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.pop-calendar-date-current {
    color: var(--pop-black) !important;
}

.pop-calendar-date-adjacent {
    color: var(--pop-charcoal) !important;
}

.pop-piano-record-row-has-reminder > * {
    border-bottom: 0;
    padding-bottom: 0.35rem;
}

.pop-piano-reminder-status-row > td {
    border-bottom-width: 2px;
    padding-top: 0.35rem;
    padding-bottom: 0.75rem;
}

.pop-revenue-chart-scroll {
    overflow-x: auto;
}

.pop-revenue-chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(4rem, 1fr));
    gap: 0.75rem;
    min-width: 52rem;
    padding-top: 1.5rem;
}

.pop-revenue-chart-column {
    display: grid;
    grid-template-rows: 1.5rem 15rem auto auto;
    min-width: 0;
    text-align: center;
}

.pop-revenue-chart-value {
    overflow: hidden;
    color: var(--pop-charcoal);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pop-revenue-chart-track {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 1px solid rgba(98, 105, 118, 0.25);
}

.pop-revenue-chart-bar {
    width: min(3rem, 72%);
    min-height: 0;
    border-radius: 0.375rem 0.375rem 0 0;
    background: var(--tblr-azure, #4299e1);
}

.pop-revenue-chart-label {
    padding-top: 0.5rem;
    font-weight: 600;
}

.pop-revenue-chart-year {
    color: var(--pop-charcoal);
    font-size: 0.7rem;
}

.pop-calendar-assignment {
    display: block;
    white-space: normal;
    transition: background-color 120ms ease-in-out, border-color 120ms ease-in-out;
}

.pop-calendar-assignment:hover,
.pop-calendar-assignment:focus-visible {
    border-color: var(--pop-accent);
    background-color: var(--pop-accent-subtle) !important;
    color: var(--pop-charcoal) !important;
}

.pop-calendar-assignment-member-color {
    border-color: var(--pop-assignment-color) !important;
    background-color: var(--pop-assignment-color) !important;
    color: var(--pop-assignment-text-color) !important;
}

.pop-calendar-assignment-member-color:hover,
.pop-calendar-assignment-member-color:focus-visible {
    border-color: var(--pop-assignment-color) !important;
    background-color: var(--pop-assignment-color) !important;
    color: var(--pop-assignment-text-color) !important;
    filter: brightness(0.94);
}

.pop-calendar-list-member-color > :first-child {
    border-left: 0.35rem solid var(--pop-assignment-color);
}

.pop-team-color-dot {
    width: 0.8rem;
    height: 0.8rem;
    flex: 0 0 0.8rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background-color: var(--pop-team-color);
}

.pop-calendar-assignment-time {
    white-space: nowrap;
}

.pop-calendar-assignment-title {
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.pop-calendar-assignment-span {
    position: relative;
    z-index: 1;
    border-radius: 0;
}

.pop-calendar-assignment-continues-before {
    margin-left: -0.6rem;
    width: calc(100% + 0.6rem) !important;
    border-left-width: 0;
}

.pop-calendar-assignment-continues-after {
    width: calc(100% + 0.6rem) !important;
    border-right-width: 0;
}

.pop-calendar-assignment-continues-before.pop-calendar-assignment-continues-after {
    width: calc(100% + 1.2rem) !important;
}

.pop-assignment-modal-header {
    padding-top: 1.5rem;
    padding-bottom: 1.25rem;
}

.pop-assignment-modal-title {
    margin-top: 0.25rem;
}

.pop-assignment-modal-appointment-title {
    margin-top: 0.3rem;
    color: var(--tblr-body-color);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
}

.pop-nav-section {
    min-height: auto;
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
    color: var(--tblr-secondary-color) !important;
    font-size: 0.675rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 1 !important;
}

.pop-sidebar-account {
    border-top: 1px solid var(--tblr-navbar-border-color);
}

.pop-topbar {
    min-height: 4rem;
}

.pop-topbar-icon-link {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: var(--tblr-border-radius);
    color: var(--pop-charcoal);
}

.pop-topbar-icon-link:hover,
.pop-topbar-icon-link:focus-visible {
    background: rgba(1, 113, 77, 0.1);
    color: var(--pop-primary);
}

.line-item-panel {
    overflow: hidden;
    border: 1px solid var(--pop-muted);
    border-radius: 8px;
    background: var(--pop-white);
}

.line-item-card {
    padding: 1rem;
    border-bottom: 1px solid var(--pop-muted);
}

.line-item-control {
    min-height: 56px;
    border-color: var(--pop-muted);
}

.line-item-total-box {
    min-height: 56px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--pop-muted);
    border-radius: 0.375rem;
    background: var(--pop-white);
}

.line-item-summary {
    padding: 1rem;
    border-top: 2px solid var(--pop-muted);
    background: var(--pop-white);
}

.field-shell {
    overflow-x: hidden;
}

.pop-client-detail-layout {
    --pop-client-notes-width: 22rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0.5rem minmax(18rem, var(--pop-client-notes-width));
    align-items: start;
}

.pop-client-detail-main {
    min-width: 0;
}

.pop-client-notes-resizer {
    align-self: stretch;
    min-height: 12rem;
    cursor: col-resize;
    position: relative;
}

.pop-client-notes-resizer::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: transparent;
    transform: translateX(-50%);
}

.pop-client-notes-resizer:hover::after,
.pop-client-notes-resizer:focus-visible::after,
.pop-client-notes-resizer.is-resizing::after {
    background: var(--pop-primary);
}

.pop-client-notes-sidebar {
    min-width: 0;
    max-height: calc(100vh - 6rem);
    overflow: auto;
    position: sticky;
    top: 1rem;
}

.pop-client-notes-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--pop-white);
}

.pop-client-note-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pop-client-note-files {
    display: grid;
    gap: 0.5rem;
}

.pop-client-note-file {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    padding: 0.5rem;
    border: 1px solid var(--pop-muted);
    border-radius: var(--tblr-border-radius);
    color: inherit;
    text-decoration: none;
}

.pop-client-note-file:hover {
    border-color: var(--pop-primary);
    color: var(--pop-primary);
}

.pop-client-note-file img,
.pop-client-note-file-icon {
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    border-radius: 0.25rem;
}

.pop-client-note-file img {
    object-fit: cover;
}

.pop-client-note-file-icon {
    display: grid;
    place-items: center;
    background: var(--pop-off-white);
    color: var(--pop-charcoal);
    font-size: 0.75rem;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .pop-client-detail-layout {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .pop-client-detail-main,
    .pop-client-notes-sidebar {
        width: 100%;
    }

    .pop-client-notes-sidebar {
        max-height: none;
        position: static;
    }

    .pop-client-notes-resizer {
        display: none;
    }
}

.field-content {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}

.field-bottom-nav {
    padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
}

.field-shell .card,
.field-shell .card-body,
.field-shell .list-group-item,
.field-wrap {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 375px) {
    .field-shell .container-xl {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .field-date-nav .btn {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        font-size: 0.8125rem;
    }
}

@media (min-width: 992px) {
    body {
        font-size: 0.9375rem;
    }

    .page-wrapper .page-body h1 {
        font-size: 1.875rem;
        font-weight: 700;
        line-height: 1.35;
    }

    .page-wrapper .page-body .card,
    .page-wrapper .page-body .border.rounded-2.bg-white {
        font-size: 1.0625rem;
    }

    .page-wrapper .page-body .card h2,
    .page-wrapper .page-body .card-title,
    .page-wrapper .page-body .border.rounded-2.bg-white h2 {
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.35;
    }

    .navbar-vertical .navbar-collapse {
        min-height: calc(100vh - 5rem);
    }
}