/* Shared refinements of the existing home-page identity.
 * Opt-in only: canonical invoice/receipt paper and the teaching canvas keep their
 * own layout and branding. Materialize remains responsible for components.
 */
.work-theme-page {
    --theme-panel-radius: 20px;
    --theme-control-radius: 12px;
    --theme-accent-ink: #0369a1;
    --theme-teal-ink: #0f766e;
    background: linear-gradient(180deg, #edf6fc 0, #f8fbff 440px, #f8fbff 100%);
}

.work-theme-page::before,
.work-theme-page::after {
    display: none;
}

.work-theme-page .page-shell {
    padding-top: 48px;
    padding-bottom: 64px;
}

/* Task pages remain visible immediately; motion belongs to interaction feedback. */
.work-theme-page .page-shell > * {
    animation: none;
}

.work-theme-page :is(.section-title, .card-title) {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -0.025em;
}

.work-theme-page .card-soft:not(.theme-page-header) {
    background: #fff;
    border-color: #d7e2ef;
    border-radius: var(--theme-panel-radius);
    box-shadow: 0 12px 30px -22px rgba(7, 27, 56, 0.32);
}

.work-theme-page .card-soft:hover:not(.theme-page-header) {
    box-shadow: 0 14px 34px -22px rgba(7, 27, 56, 0.38);
}

.work-theme-page .card-soft .card-title {
    color: var(--brand-navy-800);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
}

.work-theme-page :is(.card-soft, .filter-card) :is(p, li) {
    line-height: 1.65;
}

.work-theme-page .theme-page-header {
    position: relative;
    margin: 0 0 28px;
    padding: clamp(24px, 3.5vw, 40px);
    border: 1px solid #183f58;
    border-radius: var(--theme-panel-radius);
    background:
        radial-gradient(ellipse at 100% 0, rgba(48, 199, 173, 0.17), transparent 62%),
        linear-gradient(120deg, var(--brand-navy-800), #102b43);
    color: #fff;
    text-align: left;
    box-shadow: 0 14px 34px -24px rgba(7, 27, 56, 0.5);
}

.work-theme-page :is(.invoice-list-page, .dashboard-page, .enquiry-inbox-page, .account-profile-page) > .theme-page-header {
    margin-bottom: 0;
}

.work-theme-page .theme-page-header__heading {
    display: flex;
    align-items: center;
    gap: 18px;
}

.work-theme-page .theme-page-header__icon {
    display: grid;
    place-items: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(48, 199, 173, 0.4);
    border-radius: 14px;
    background: rgba(48, 199, 173, 0.12);
    color: #78ead6;
}

.work-theme-page .theme-page-header__icon .material-icons {
    font-size: 28px;
}

.work-theme-page .theme-page-header :is(.section-title, .card-title) {
    margin: 0;
    color: #fff;
    font-size: clamp(1.65rem, 2.6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-transform: none;
}

.work-theme-page .theme-page-header__kicker,
.work-theme-page .theme-page-header .eyebrow {
    display: block !important;
    margin: 0 0 8px;
    color: #78ead6;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.work-theme-page .theme-page-header :is(.flow-text, .theme-page-header__description, .invoice-editor__hero-copy, .contact-card-copy) {
    max-width: 76ch;
    margin: 16px 0 0;
    color: #d7e9f4;
    font-size: 1rem;
    line-height: 1.7;
    text-align: left;
}

.work-theme-page .theme-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}

.work-theme-page .theme-page-header .btn-ghost-light {
    border: 1px solid #8aa9bb;
    background: transparent;
    color: #fff;
    box-shadow: none;
}

.work-theme-page .theme-page-header .btn-ghost-light:hover {
    background: rgba(255, 255, 255, 0.1);
}

.work-theme-page .theme-page-header .invoice-editor__hero-row {
    align-items: flex-start;
    gap: 12px;
}

.work-theme-page .theme-page-header .invoice-editor__hero-pill {
    color: #d7fff6;
    background: #174c4f;
}

.work-theme-page .theme-page-header :is(.invoice-document-hero__meta, .grey-text) {
    color: #d7e9f4 !important;
}

.work-theme-page .theme-page-header .card-content {
    padding: 0;
}

.work-theme-page .theme-page-header > .row,
.work-theme-page .theme-page-header .row:last-child {
    margin-bottom: 0;
}

.work-theme-page .theme-page-header :is(.center-align, .card-content.center-align) {
    text-align: left;
}

/* Use the same shape and readable primary action throughout working surfaces. */
.work-theme-page :is(.btn, .btn-flat, .btn-small) {
    border-radius: var(--theme-control-radius);
    text-transform: none;
    font-weight: 700;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.work-theme-page .btn-primary {
    background: linear-gradient(115deg, #0369a1, #0f766e);
    color: #fff;
    box-shadow: 0 8px 18px -12px rgba(3, 105, 161, 0.6);
}

.work-theme-page .btn-primary:hover,
.work-theme-page .btn-primary:focus-visible {
    background: linear-gradient(115deg, #075985, #115e59);
}

.work-theme-page .btn-flat {
    color: #0369a1;
}

.work-theme-page :focus-visible {
    outline: 3px solid #0369a1;
    outline-offset: 3px;
}

.work-theme-page .theme-page-header :focus-visible {
    outline-color: #ffcf66;
}

.work-theme-page :is(.input-field > label, .input-field > label.active) {
    color: #475569;
}

.work-theme-page :is(input, textarea)::placeholder {
    color: #64748b;
    opacity: 1;
}

.work-theme-page :is(.invoice-native-select, .browser-default):focus-visible {
    outline-offset: 2px;
}

.work-theme-page :is(.dashboard-kpi, .theme-metric-card, .workspace-stat-card) {
    border-top: 3px solid #0891b2;
    background: linear-gradient(180deg, #f0f9ff, #fff 70%);
}

.work-theme-page :is(.dashboard-kpi, .theme-metric-card) .card-content {
    align-items: flex-start;
    text-align: left;
    gap: 10px;
}

.work-theme-page :is(.dashboard-kpi, .theme-metric-card) .card-title {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #475569;
    letter-spacing: 0;
}

.work-theme-page :is(.dashboard-kpi, .theme-metric-card) h5 {
    margin: 4px 0 0;
    color: var(--brand-navy-800);
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.6vw, 2.15rem);
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.work-theme-page :is(.dashboard-chart-card, .invoice-list-page .card) .card-title {
    text-align: left;
}

.work-theme-page .filter-card {
    border-top: 3px solid #0f766e;
}

.work-theme-page .invoice-action-link {
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #0369a1;
    text-transform: none;
}

.work-theme-page .invoice-action-link:hover {
    background: #edf7fc;
}

.work-theme-page .invoice-editor__sheet {
    border-top: 3px solid #0f766e;
}

.work-theme-page :is(.invoice-editor__panel, .invoice-editor__meta-field) {
    border-radius: var(--theme-control-radius);
    background: #f8fbff;
}

.work-theme-page .invoice-document-guidance .card-content {
    border-left: 4px solid #b45309;
    border-radius: var(--theme-panel-radius);
    background: #fffbeb;
}

.work-theme-page .invoice-document-guidance .card-title {
    text-align: left;
}

.work-theme-page :is(.invoice-line-table, .invoice-payment-table) :is(input, select) {
    border-radius: 8px;
}

.work-theme-page .workspace-tool-card {
    border-top: 3px solid #0891b2;
}

.work-theme-page .account-settings-tabs .tab a {
    color: #475569;
    text-transform: none;
    font-weight: 700;
}

.work-theme-page .account-settings-tabs .tab a.active {
    color: #0369a1;
    background: #edf7fc;
}

.work-theme-page .account-settings-tabs .indicator {
    background: #0f766e;
}

.work-theme-page :is(.legal-page-title, .auth-title) {
    color: var(--brand-navy-800);
}

.work-theme-page .theme-empty-state {
    padding: 28px;
    border: 1px dashed #9bbccc;
    border-radius: 16px;
    background: #f3f9fc;
    color: #475569;
    line-height: 1.65;
}

@media only screen and (max-width: 600px) {
    .work-theme-page .page-shell {
        padding-top: 32px;
        padding-bottom: 52px;
    }

    .work-theme-page .theme-page-header {
        margin-bottom: 22px;
        padding: 24px 20px;
        border-radius: 16px;
    }

    .work-theme-page .theme-page-header__heading {
        align-items: flex-start;
        gap: 12px;
    }

    .work-theme-page .theme-page-header__icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .work-theme-page .theme-page-header__icon .material-icons {
        font-size: 24px;
    }

    .work-theme-page .theme-page-header__actions > a {
        width: 100%;
        min-height: 44px;
        height: auto;
        line-height: 1.4;
        padding: 12px 16px;
        text-align: center;
    }

    .work-theme-page :is(.dashboard-kpi, .theme-metric-card) .card-content {
        padding: 20px;
    }

    .work-theme-page .invoice-action-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .work-theme-page .site-suggestion-fab {
        bottom: 12px;
        left: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-theme-page *,
    .work-theme-page *::before,
    .work-theme-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Stack invoice records at tablet/phone widths instead of clipping their actions. */
@media only screen and (max-width: 992px) {
    .work-theme-page .theme-invoice-table {
        display: block;
        width: 100%;
        border: 0;
    }

    .work-theme-page .theme-invoice-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .work-theme-page .theme-invoice-table tbody {
        display: block;
        width: 100%;
    }

    .work-theme-page .theme-invoice-table tbody tr {
        display: block;
        width: 100%;
        margin: 0 0 18px;
        padding: 12px;
        border: 1px solid #d7e2ef;
        border-radius: 12px;
        background: #f8fbff;
    }

    .work-theme-page .theme-invoice-table tbody td {
        display: grid;
        grid-template-columns: minmax(84px, 0.8fr) minmax(0, 1.2fr);
        align-items: start;
        gap: 8px;
        width: 100%;
        min-height: 0;
        padding: 10px 0;
        border-bottom: 1px solid #e2eaf1;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: left;
    }

    .work-theme-page .theme-invoice-table td::before {
        content: attr(data-label);
        color: #475569;
        font-size: 0.75rem;
        font-weight: 800;
    }

    .work-theme-page .theme-invoice-table td[data-label="Status"] {
        display: block;
    }

    .work-theme-page .theme-invoice-table td[data-label="Status"]::before {
        display: block;
        margin-bottom: 8px;
    }

    .work-theme-page .theme-invoice-table td[data-label="Quick actions"] {
        display: block;
        border-bottom: 0;
    }

    .work-theme-page .theme-invoice-table td[data-label="Quick actions"]::before {
        display: block;
        margin-bottom: 10px;
    }

    .work-theme-page .theme-invoice-table .invoice-list-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
    }

    .work-theme-page .theme-invoice-table .invoice-action-link {
        white-space: normal;
        max-width: 100%;
    }
}

@media only screen and (max-width: 600px) {
    .work-theme-page .theme-metric-card .card-content {
        padding: 18px 14px;
    }

    .work-theme-page .theme-metric-card h5 {
        font-size: 1.35rem;
    }
}

.work-theme-page .theme-page-header .card-content .section-title {
    color: #fff;
    text-align: left;
}

.work-theme-page .theme-page-header .chip {
    border: 1px solid #38747c;
    background: #174c4f;
    color: #d7fff6;
}

.work-theme-page .theme-page-header :is(.btn-flat, .btn-accent) {
    color: #fff;
    border: 1px solid #8aa9bb;
    background: transparent;
}

/* Keep feedback reachable without covering form fields or list actions. */
.work-theme-page .page-shell + .site-suggestion-fab {
    position: static;
    display: flex;
    width: max-content;
    margin: 0 4% 24px;
    transform: none;
}

.work-theme-page .auth-page .auth-title,
.work-theme-page .error-page .auth-title {
    margin: 0 0 20px;
    color: var(--brand-navy-800);
    font-size: 1.85rem;
    text-align: left;
}

.work-theme-page .card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-floating) {
    color: #0369a1;
    text-transform: none;
    font-weight: 700;
}

/* Keep invoice metadata and editable rows readable on small screens. */
@media only screen and (max-width: 600px) {
    .work-theme-page .invoice-editor__header {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .work-theme-page .invoice-editor__header > .col {
        flex: 0 0 100%;
        width: 100%;
        margin-left: 0;
    }

    .work-theme-page .invoice-editor .invoice-line-table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .work-theme-page .invoice-line-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .work-theme-page .invoice-line-table tbody {
        display: block;
        width: 100%;
    }

    .work-theme-page .invoice-line-table tbody tr:not(.is-hidden) {
        display: block;
        padding: 12px;
        margin-bottom: 16px;
        border: 1px solid #d7e2ef;
        border-radius: 12px;
    }

    .work-theme-page .invoice-line-table tbody td {
        display: block;
        width: 100%;
        padding: 8px 0;
        border: 0;
        border-radius: 0;
        text-align: left;
    }

    .work-theme-page .invoice-line-table tbody td::before {
        display: block;
        content: attr(data-label);
        margin-bottom: 6px;
        color: #475569;
        font-size: 0.75rem;
        font-weight: 800;
    }

    .work-theme-page .invoice-line-table .invoice-line-actions {
        min-width: 0;
        white-space: normal;
    }
}

.work-theme-page .theme-page-header .tutor-me-status-row .badge-status {
    color: #d7fff6;
    background: #174c4f;
}

.work-theme-page .theme-page-header .workspace-card-copy {
    color: #d7e9f4;
}


/* Invoice entry uses persistent labels rather than floating placeholders. */
.work-theme-page .invoice-editor .input-field > label {
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 6px !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    color: #334155 !important;
    font-size: .85rem;
    letter-spacing: 0;
    text-transform: none;
}
.work-theme-page .invoice-editor__sheet > .card-content { padding: clamp(16px, 3vw, 30px); }
.work-theme-page .invoice-editor__panel { height: auto; }
.work-theme-page .invoice-editor__header { align-items: start; }


/* Match the homepage's centered page and section headings. */
.work-theme-page :is(.section-title, .card-title, .auth-title, .invoice-editor__panel-title, .invoice-editor__section-title) {
    text-align: center !important;
}
.work-theme-page .theme-page-header,
.work-theme-page .theme-page-header :is(.section-title, .card-title, .center-align, .card-content.center-align),
.work-theme-page .theme-page-header .card-content .section-title,
.work-theme-page :is(.auth-page, .error-page) .auth-title {
    text-align: center !important;
}
.work-theme-page .theme-page-header__heading {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.work-theme-page .theme-page-header :is(.flow-text, .theme-page-header__description, .invoice-editor__hero-copy, .contact-card-copy) {
    margin-right: auto;
    margin-left: auto;
    text-align: center !important;
}
.work-theme-page .theme-page-header__actions { justify-content: center; }
.work-theme-page .theme-page-header .invoice-editor__hero-row {
    align-items: center;
    justify-content: center;
}

.work-theme-page .card-soft .card-title { width: 100%; }