/*
 * MyTaxBiz look for both Filament panels: logo, login pages, sidebar footer, page footer, Panduan and FAQ.
 * Plain CSS on purpose: the panels use Filament's stock stylesheet, so this file needs no Vite build. Colours come from
 * Filament's own variables, so they follow the panel's primary colour and dark mode.
 */

:root {
    --mtb-desk-bg: #f4f6f9;
    --mtb-desk-paper: #ffffff;
    --mtb-desk-paper-alt: #eef1f5;
    --mtb-desk-ink: #475569;
    --mtb-desk-line: #cbd5e1;
    --mtb-desk-tint: #dbeafe;
    --mtb-desk-highlight: #fef3c7;
    --mtb-desk-accent: #2563eb;
    --mtb-desk-device: #1e293b;
    --mtb-desk-screen: #cfe3dc;
    --mtb-desk-screen-text: #334155;
    --mtb-desk-key: #475569;
    --mtb-desk-key-alt: #64748b;
    --mtb-desk-wood: #e7c9a0;
    --mtb-desk-eraser: #f9a8a8;
    --mtb-desk-mug: #ffffff;
    --mtb-desk-coffee: #4a2c1a;
}

.dark {
    --mtb-desk-bg: #111827;
    --mtb-desk-paper: #1f2937;
    --mtb-desk-paper-alt: #18212f;
    --mtb-desk-ink: #cbd5e1;
    --mtb-desk-line: #4b5563;
    --mtb-desk-tint: #1e3a5f;
    --mtb-desk-highlight: #4a3f1a;
    --mtb-desk-accent: #60a5fa;
    --mtb-desk-device: #0b1220;
    --mtb-desk-screen: #38524a;
    --mtb-desk-screen-text: #d1fae5;
    --mtb-desk-key: #334155;
    --mtb-desk-key-alt: #475569;
    --mtb-desk-mug: #374151;
    --mtb-desk-coffee: #2a1810;
}

/* Laravel Herd adds its "Edit with Herd" button to every page on the local machine. It never reaches production. */

#herd-ai-root,
#herd-ai-host {
    display: none !important;
}

/* Logo */

.mtb-logo {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.mtb-logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--primary-600);
}

.dark .mtb-logo-text {
    color: var(--primary-400);
}

/* User auth pages: two columns */

.fi-simple-layout:has(> .mtb-auth-showcase) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: stretch;
    background: #fff;
}

.dark .fi-simple-layout:has(> .mtb-auth-showcase) {
    background: var(--gray-900);
}

.mtb-auth-showcase {
    position: relative;
    height: 9rem;
    overflow: hidden;
    background: var(--mtb-desk-bg);
}

.mtb-desk {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mtb-desk-paper { fill: var(--mtb-desk-paper); }
.mtb-desk-paper-alt { fill: var(--mtb-desk-paper-alt); }
.mtb-desk-ink { fill: var(--mtb-desk-ink); }
.mtb-desk-line { fill: var(--mtb-desk-line); }
.mtb-desk-tint { fill: var(--mtb-desk-tint); }
.mtb-desk-highlight { fill: var(--mtb-desk-highlight); }
.mtb-desk-accent { fill: var(--mtb-desk-accent); }
.mtb-desk-device { fill: var(--mtb-desk-device); }
.mtb-desk-screen { fill: var(--mtb-desk-screen); }
.mtb-desk-screen-text { fill: var(--mtb-desk-screen-text); }
.mtb-desk-key { fill: var(--mtb-desk-key); }
.mtb-desk-key-alt { fill: var(--mtb-desk-key-alt); }
.mtb-desk-wood { fill: var(--mtb-desk-wood); }
.mtb-desk-eraser { fill: var(--mtb-desk-eraser); }
.mtb-desk-mug { fill: var(--mtb-desk-mug); }
.mtb-desk-coffee { fill: var(--mtb-desk-coffee); }
.mtb-desk-rule { fill: none; stroke: var(--mtb-desk-line); stroke-width: 2; }
.mtb-desk-box { fill: none; stroke: var(--mtb-desk-line); stroke-width: 2; }
.mtb-desk-check { fill: none; stroke: var(--mtb-desk-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.mtb-desk-handle { fill: none; stroke: var(--mtb-desk-mug); stroke-width: 18; stroke-linecap: round; }
.mtb-desk-shine { fill: none; stroke: #fff; stroke-opacity: 0.25; stroke-width: 6; stroke-linecap: round; }

.mtb-auth-showcase-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mtb-auth-showcase-logo .fi-logo {
    height: auto !important;
    padding: 0.75rem 1.25rem;
    border-radius: 0.875rem;
    background: var(--mtb-desk-paper);
    box-shadow: 0 8px 24px rgb(15 23 42 / 0.12);
}

.fi-simple-layout:has(> .mtb-auth-showcase) .fi-simple-main-ctn {
    align-items: flex-start;
}

.fi-simple-layout:has(> .mtb-auth-showcase) .fi-simple-main {
    margin: 0;
    padding: 2rem 1rem;
    background: transparent;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    border-radius: 0;
}

.fi-simple-layout:has(> .mtb-auth-showcase) .fi-simple-header {
    align-items: flex-start;
}

.fi-simple-layout:has(> .mtb-auth-showcase) .fi-simple-header .fi-logo {
    display: none;
}

.fi-simple-layout:has(> .mtb-auth-showcase) .fi-simple-header-heading {
    font-size: 1.75rem;
    line-height: 1.2;
    text-align: start;
}

.fi-simple-layout:has(> .mtb-auth-showcase) .fi-simple-header-subheading {
    font-size: 1.0625rem;
    line-height: 1.45;
    text-align: start;
}

.fi-simple-layout:has(> .mtb-auth-showcase) .fi-input-wrp {
    background: var(--gray-100);
}

.dark .fi-simple-layout:has(> .mtb-auth-showcase) .fi-input-wrp {
    background: rgb(255 255 255 / 0.05);
}

.fi-simple-layout:has(> .mtb-auth-showcase) .fi-input-wrp input {
    padding-block: 0.625rem;
}

.mtb-auth-tabs {
    display: flex;
    gap: 1.75rem;
}

.mtb-auth-tabs a {
    padding-block: 0.375rem 0.625rem;
    border-bottom: 2px solid var(--gray-200);
    color: var(--gray-500);
    font-weight: 500;
}

.dark .mtb-auth-tabs a {
    border-color: var(--gray-700);
    color: var(--gray-400);
}

.mtb-auth-tabs a:hover {
    color: var(--gray-950);
}

.dark .mtb-auth-tabs a:hover {
    color: #fff;
}

.mtb-auth-tabs a.mtb-active {
    border-color: var(--primary-600);
    color: var(--gray-950);
    font-weight: 700;
}

.dark .mtb-auth-tabs a.mtb-active {
    border-color: var(--primary-400);
    color: #fff;
}

.mtb-auth-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid #f0d67a;
    border-radius: 0.5rem;
    background: #fef8e1;
    color: #5c4708;
    font-size: 0.875rem;
    line-height: 1.45;
}

.dark .mtb-auth-notice {
    border-color: rgb(250 204 21 / 0.3);
    background: rgb(250 204 21 / 0.1);
    color: #fde68a;
}

.mtb-auth-notice p {
    flex: 1;
    min-width: 0;
}

.mtb-auth-notice-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: #d9a400;
}

.mtb-auth-notice button {
    display: flex;
    padding: 0.125rem;
    border-radius: 0.25rem;
    opacity: 0.7;
}

.mtb-auth-notice button:hover {
    opacity: 1;
}

.mtb-auth-notice button svg {
    width: 1rem;
    height: 1rem;
}

.mtb-auth-legal {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--gray-500);
}

.dark .mtb-auth-legal {
    color: var(--gray-400);
}

.mtb-notices {
    display: grid;
    gap: 1.5rem;
    max-height: 55dvh;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.mtb-notice-meta {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.mtb-notice-title {
    margin-top: 0.125rem;
    font-size: 1rem;
    font-weight: 600;
}

.mtb-notice-body {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-line;
}

.dark .mtb-notice-meta {
    color: var(--gray-400);
}

@media (min-width: 1024px) {
    .fi-simple-layout:has(> .mtb-auth-showcase) {
        grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
        grid-template-rows: minmax(100dvh, auto);
    }

    .mtb-auth-showcase {
        position: sticky;
        top: 0;
        height: 100dvh;
    }

    .mtb-auth-showcase-logo .mtb-logo-text {
        font-size: 1.75rem;
    }

    .fi-simple-layout:has(> .mtb-auth-showcase) .fi-simple-main-ctn {
        align-items: center;
    }

    .fi-simple-layout:has(> .mtb-auth-showcase) .fi-simple-main {
        padding: 3rem 2rem;
    }

    .fi-simple-layout:has(> .mtb-auth-showcase) .fi-simple-header-heading {
        font-size: 2.125rem;
    }
}

/* Admin login: a card on a grey page */

.fi-simple-layout:has(> .mtb-admin-login-logo) {
    position: relative;
    overflow: hidden;
    padding-inline: 1rem;
}

.mtb-admin-login-blob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(46rem, 130vw);
    height: min(40rem, 90vh);
    transform: translate(-52%, -44%);
    border-radius: 46% 54% 58% 42% / 44% 40% 60% 56%;
    background: var(--gray-100);
}

.dark .mtb-admin-login-blob {
    background: rgb(255 255 255 / 0.03);
}

.mtb-admin-login-logo {
    position: relative;
    z-index: 1;
    padding-top: 3rem;
}

.mtb-admin-login-logo .fi-logo {
    height: auto !important;
}

.mtb-admin-login-logo .mtb-logo-text {
    font-size: 1.625rem;
}

.fi-simple-layout:has(> .mtb-admin-login-logo) .fi-simple-main-ctn {
    position: relative;
    z-index: 1;
}

.fi-simple-layout:has(> .mtb-admin-login-logo) .fi-simple-main {
    position: relative;
    max-width: 30rem;
    margin-block: 5rem 3rem;
    padding: 4.5rem 1.5rem 2.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 18px 40px rgb(15 23 42 / 0.1);
}

.mtb-admin-login-badge {
    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    background: var(--primary-600);
    color: #fff;
}

.mtb-admin-login-badge svg {
    width: 3rem;
    height: 3rem;
}

@media (min-width: 640px) {
    .fi-simple-layout:has(> .mtb-admin-login-logo) .fi-simple-main {
        padding-inline: 3rem;
    }
}

/* Dashboard: user at the bottom of the sidebar */

.fi-panel-app .fi-sidebar-footer {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.fi-panel-app .fi-sidebar-footer .fi-user-menu {
    flex: 1;
    min-width: 0;
}

.fi-panel-app .fi-sidebar-footer .fi-user-menu-trigger-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtb-sidebar-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

.fi-simple-layout-header .mtb-sidebar-actions {
    display: none;
}

/* Dashboard: page footer */

.fi-panel-app .fi-main-ctn {
    flex-direction: column;
}

.fi-panel-app .fi-main {
    flex: 1 0 auto;
    height: auto;
}

.mtb-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.dark .mtb-footer {
    color: var(--gray-400);
}

.mtb-footer-version {
    margin-left: 0.5rem;
    white-space: nowrap;
}

.mtb-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.mtb-footer a {
    color: var(--gray-700);
}

.dark .mtb-footer a {
    color: var(--gray-200);
}

.mtb-footer a:hover,
.mtb-page-note a:hover {
    color: var(--primary-600);
    text-decoration: underline;
}

.dark .mtb-footer a:hover,
.dark .mtb-page-note a:hover {
    color: var(--primary-400);
}

@media (min-width: 1024px) {
    .fi-panel-app.fi-body-has-navigation .fi-main-ctn {
        min-height: calc(100dvh - 1.5rem);
        margin: 0.75rem 0.75rem 0.75rem 0;
        border-radius: 1rem;
        background: #fff;
        box-shadow: 0 0 0 1px rgb(15 23 42 / 0.06);
    }

    .dark .fi-panel-app.fi-body-has-navigation .fi-main-ctn {
        background: var(--gray-900);
        box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
    }

    .mtb-footer {
        padding-inline: 2rem;
    }
}

/* Panduan, FAQ and Disclaimer */

.mtb-steps {
    counter-reset: mtb-step;
    display: grid;
    gap: 1.5rem;
    max-width: 48rem;
}

.mtb-steps li {
    counter-increment: mtb-step;
    position: relative;
    min-height: 2rem;
    padding-inline-start: 3rem;
}

.mtb-steps li::before {
    content: counter(mtb-step);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: var(--primary-600);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
}

.mtb-steps h2 {
    font-weight: 600;
    line-height: 1.75rem;
    color: var(--gray-950);
}

.dark .mtb-steps h2 {
    color: #fff;
}

.mtb-steps p,
.mtb-faq p,
.mtb-prose {
    max-width: 48rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--gray-600);
}

.dark .mtb-steps p,
.dark .mtb-faq p,
.dark .mtb-prose {
    color: var(--gray-300);
}

.mtb-prose li + li {
    margin-top: 0.5rem;
}

.mtb-prose ol {
    list-style: decimal;
}

.mtb-faq details + details {
    border-top: 1px solid var(--gray-200);
}

.dark .mtb-faq details + details {
    border-color: rgb(255 255 255 / 0.1);
}

.mtb-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.75rem;
    border-radius: 0.25rem;
    color: var(--gray-950);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

.dark .mtb-faq summary {
    color: #fff;
}

.mtb-faq summary::-webkit-details-marker {
    display: none;
}

.mtb-faq summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--gray-400);
}

.mtb-faq details[open] summary::after {
    content: '\2212';
}

.mtb-faq summary:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

.mtb-faq p {
    padding-bottom: 1rem;
}

.mtb-theme-setting {
    display: grid;
    gap: 0.75rem;
    max-width: 24rem;
    font-size: 0.9375rem;
    color: var(--gray-600);
}

.dark .mtb-theme-setting {
    color: var(--gray-300);
}

.mtb-page-note {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.dark .mtb-page-note {
    color: var(--gray-400);
}

.mtb-page-note a {
    color: var(--primary-600);
    font-weight: 500;
}

.dark .mtb-page-note a {
    color: var(--primary-400);
}

/* Admin dashboard: ringgit amounts stay on one line in four cards beside the sidebar. */
.fi-panel-admin .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    font-size: 1.25rem;
    line-height: 1.75rem;
}