/*
 * Makler CRM — Filament panel theme.
 *
 * Plain CSS on top of Filament's compiled stylesheet (no Tailwind build step),
 * loaded after it through the HEAD_END render hook. It targets Filament's
 * stable `fi-*` hook classes and its RGB color variables (--primary-600,
 * --gray-100, ...), so light and dark mode both follow the panel colors set
 * in AdminPanelProvider.
 */

/* ---------------------------------------------------------------- Shell */

.fi-body {
    background-color: #f3f5f8;
}

.dark .fi-body {
    background-color: rgb(var(--gray-950));
}

.fi-topbar > nav {
    box-shadow: none;
    border-bottom: 1px solid rgba(var(--gray-200), 1);
    --tw-ring-shadow: 0 0 #0000;
}

.dark .fi-topbar > nav {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

@media (min-width: 1024px) {
    .fi-main-sidebar {
        background-color: #fff;
        border-inline-end: 1px solid rgba(var(--gray-200), 1);
    }

    .dark .fi-main-sidebar {
        background-color: rgb(var(--gray-900));
        border-inline-end-color: rgba(255, 255, 255, 0.06);
    }

    .fi-main-sidebar .fi-sidebar-header {
        box-shadow: none;
        --tw-ring-shadow: 0 0 #0000;
        border-bottom: 1px solid rgba(var(--gray-200), 1);
    }

    .dark .fi-main-sidebar .fi-sidebar-header {
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }
}

/* -------------------------------------------------------------- Branding */

.mk-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 100%;
}

.mk-brand-mark {
    height: 100%;
    width: auto;
    flex-shrink: 0;
}

.mk-brand-mark rect {
    fill: rgb(var(--primary-600));
}

.mk-brand-mark path {
    fill: #fff;
}

.mk-brand-name {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
    color: rgb(var(--gray-900));
}

.mk-brand-name span {
    color: rgb(var(--primary-600));
}

.dark .mk-brand-name {
    color: #fff;
}

.dark .mk-brand-name span {
    color: rgb(var(--primary-400));
}

/* --------------------------------------------------------------- Sidebar */

.fi-sidebar-nav {
    padding: 1.25rem 1rem;
    row-gap: 1.25rem;
}

.fi-sidebar-nav-groups {
    row-gap: 1.25rem;
}

.fi-sidebar-group-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(var(--gray-400), 1);
}

.fi-sidebar-group-items {
    row-gap: 0.125rem;
}

.fi-sidebar-item-button {
    padding-block: 0.4375rem;
}

.fi-sidebar-item-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: rgba(var(--primary-50), 1);
}

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: rgba(var(--primary-400), 0.1);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    font-weight: 600;
    color: rgba(var(--primary-700), 1);
}

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: rgba(var(--primary-300), 1);
}

/* ---------------------------------------------------------------- Header */

.fi-header-heading {
    letter-spacing: -0.025em;
}

.fi-breadcrumbs-item-label {
    font-size: 0.8125rem;
}

/* ---------------------------------------------------------------- Tables */

.fi-ta-ctn {
    border-radius: 0.875rem;
}

.fi-ta-header-cell {
    padding-block: 0.625rem;
    background-color: rgba(var(--gray-50), 1);
}

.dark .fi-ta-header-cell {
    background-color: rgba(255, 255, 255, 0.02);
}

.fi-ta-header-cell-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(var(--gray-500), 1);
}

.dark .fi-ta-header-cell-label {
    color: rgba(var(--gray-400), 1);
}

.fi-ta-cell .fi-ta-text,
.fi-ta-cell .fi-ta-image,
.fi-ta-cell .fi-ta-icon,
.fi-ta-cell .fi-ta-toggle {
    padding-block: 0.75rem;
}

.fi-ta-cell .fi-ta-image img {
    border-radius: 0.5rem;
    object-fit: cover;
}

.fi-ta-actions {
    gap: 0.25rem;
}

/* Page-level tabs sit at the start, like the table they filter. */
.fi-page .fi-tabs:not(.fi-contained) {
    margin-inline-start: 0;
}

/* -------------------------------------------------------- Status column */

.mk-status {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border-radius: 0.5rem;
    background-color: rgba(var(--c-50), 1);
    color: rgba(var(--c-600), 1);
    box-shadow: inset 0 0 0 1px rgba(var(--c-600), 0.15);
    transition: box-shadow 0.15s, opacity 0.15s;
}

.mk-status:hover {
    box-shadow: inset 0 0 0 1px rgba(var(--c-600), 0.4);
}

.mk-status:focus-within {
    box-shadow:
        inset 0 0 0 1px rgba(var(--c-600), 0.4),
        0 0 0 3px rgba(var(--c-600), 0.15);
}

.dark .mk-status {
    background-color: rgba(var(--c-400), 0.1);
    color: rgba(var(--c-400), 1);
    box-shadow: inset 0 0 0 1px rgba(var(--c-400), 0.3);
}

/* Beats Filament's `select:not(.choices)` chevron background (0,1,1). */
.mk-status select.mk-status-select {
    appearance: none;
    -webkit-appearance: none;
    max-width: 13rem;
    margin: 0;
    border: 0;
    background: none;
    background-image: none;
    padding: 0.3125rem 1.75rem 0.3125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
    color: inherit;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: none;
    outline: none;
}

.mk-status-select:focus {
    box-shadow: none;
    outline: none;
}

.mk-status-select:disabled {
    cursor: default;
}

.mk-status-with-icon select.mk-status-select {
    padding-inline-start: 1.75rem;
}

.mk-status-select option {
    color: rgb(var(--gray-950));
    background-color: #fff;
}

.dark .mk-status-select option {
    color: #fff;
    background-color: rgb(var(--gray-900));
}

.mk-status-icon {
    position: absolute;
    inset-inline-start: 0.5rem;
    width: 0.875rem;
    height: 0.875rem;
    pointer-events: none;
}

.mk-status-chevron {
    position: absolute;
    inset-inline-end: 0.375rem;
    width: 1rem;
    height: 1rem;
    opacity: 0.7;
    pointer-events: none;
}

.mk-status-loading {
    opacity: 0.55;
}

.mk-status-invalid {
    box-shadow: inset 0 0 0 1px rgba(var(--danger-600), 1);
}

/* ----------------------------------------------------------------- Stats */

.fi-wi-stats-overview-stat {
    border-radius: 0.875rem;
    padding: 1.25rem 1.5rem;
}

.fi-wi-stats-overview-stat-icon {
    box-sizing: content-box;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0.4375rem;
    border-radius: 0.625rem;
    background-color: rgba(var(--c-50, var(--gray-100)), 1);
    color: rgba(var(--c-600, var(--gray-500)), 1);
}

.dark .fi-wi-stats-overview-stat-icon {
    background-color: rgba(var(--c-400, var(--gray-400)), 0.12);
    color: rgba(var(--c-400, var(--gray-400)), 1);
}

a.fi-wi-stats-overview-stat {
    transition: box-shadow 0.15s, transform 0.15s;
}

a.fi-wi-stats-overview-stat:hover {
    box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.25);
    transform: translateY(-1px);
}

/* ------------------------------------------------------- Dashboard parts */

.mk-pipeline {
    display: grid;
    gap: 0.875rem;
}

.mk-pipeline-row {
    display: grid;
    gap: 0.375rem;
    text-decoration: none;
}

.mk-pipeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.mk-pipeline-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgb(var(--gray-700));
    font-weight: 500;
}

.dark .mk-pipeline-label {
    color: rgb(var(--gray-200));
}

.mk-pipeline-label svg {
    width: 1rem;
    height: 1rem;
    color: rgba(var(--c-600), 1);
}

.dark .mk-pipeline-label svg {
    color: rgba(var(--c-400), 1);
}

.mk-pipeline-count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--gray-950));
}

.dark .mk-pipeline-count {
    color: #fff;
}

.mk-pipeline-track {
    height: 0.5rem;
    border-radius: 999px;
    background-color: rgba(var(--gray-100), 1);
    overflow: hidden;
}

.dark .mk-pipeline-track {
    background-color: rgba(255, 255, 255, 0.06);
}

.mk-pipeline-bar {
    height: 100%;
    min-width: 0.25rem;
    border-radius: inherit;
    background-color: rgba(var(--c-500), 1);
    transition: width 0.3s;
}

.mk-pipeline-row:hover .mk-pipeline-label {
    color: rgb(var(--primary-600));
}

.mk-pipeline-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 0.875rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(var(--gray-100), 1);
    font-size: 0.8125rem;
    color: rgb(var(--gray-500));
}

.dark .mk-pipeline-footer {
    border-top-color: rgba(255, 255, 255, 0.06);
    color: rgb(var(--gray-400));
}

.mk-pipeline-footer strong {
    color: rgb(var(--gray-950));
    font-weight: 600;
}

.dark .mk-pipeline-footer strong {
    color: #fff;
}

/* ------------------------------------------------------- Matches modals */

.mk-match-list {
    display: grid;
    gap: 0.5rem;
}

.mk-match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(var(--gray-200), 1);
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s;
}

a.mk-match:hover {
    border-color: rgba(var(--primary-500), 0.5);
    background-color: rgba(var(--primary-50), 0.5);
}

.dark .mk-match {
    border-color: rgba(255, 255, 255, 0.1);
}

.dark a.mk-match:hover {
    background-color: rgba(var(--primary-400), 0.06);
}

.mk-match-title {
    font-weight: 600;
    color: rgb(var(--gray-950));
}

.dark .mk-match-title {
    color: #fff;
}

.mk-match-meta {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: rgb(var(--gray-500));
}

.dark .mk-match-meta {
    color: rgb(var(--gray-400));
}

.mk-match-side {
    flex-shrink: 0;
    text-align: end;
    font-size: 0.8125rem;
}

.mk-match-price {
    font-weight: 600;
    font-size: 0.875rem;
    color: rgb(var(--gray-950));
}

.dark .mk-match-price {
    color: #fff;
}

.mk-match-empty {
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.875rem;
    color: rgb(var(--gray-500));
}

/* ------------------------------------------------------------ Auth pages */

.fi-simple-layout {
    background:
        radial-gradient(900px 480px at 0% 0%, rgba(var(--primary-200), 0.55), transparent 65%),
        radial-gradient(700px 420px at 100% 100%, rgba(var(--primary-100), 0.7), transparent 60%),
        #f3f5f8;
}

.dark .fi-simple-layout {
    background:
        radial-gradient(900px 480px at 0% 0%, rgba(var(--primary-500), 0.16), transparent 65%),
        radial-gradient(700px 420px at 100% 100%, rgba(var(--primary-500), 0.08), transparent 60%),
        rgb(var(--gray-950));
}

.fi-simple-main {
    box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.25);
}

@media (min-width: 640px) {
    .fi-simple-main {
        border-radius: 1rem;
    }
}

.fi-simple-header-subheading {
    margin-top: 0.25rem;
}

.mk-auth-footer {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.8125rem;
    color: rgb(var(--gray-500));
    text-align: center;
}

/* ---------------------------------------------------------------- Phones */

@media (max-width: 767px) {
    .fi-wi-stats-overview-stats-ctn {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .fi-wi-stats-overview-stat {
        padding: 0.875rem 1rem;
    }

    .fi-wi-stats-overview-stat-value {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .fi-wi-stats-overview-stat-description {
        font-size: 0.75rem;
        line-height: 1rem;
    }
}

/*
 * Below sm a wide table only scrolls sideways, hiding the status and price
 * behind the fold. Lay each row out as a small card instead: checkbox,
 * thumbnail and the primary column (.mk-cell-primary, set per column) on the
 * first line, everything else wrapping underneath.
 */
@media (max-width: 639px) {
    .fi-ta-content .fi-ta-table > thead {
        display: none;
    }

    .fi-ta-content .fi-ta-table,
    .fi-ta-content .fi-ta-table > tbody {
        display: block;
        width: 100%;
    }

    .fi-ta-content .fi-ta-table > tbody > tr.fi-ta-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 0.375rem 0.5rem;
    }

    .fi-ta-content .fi-ta-table > tbody > tr.fi-ta-row > td:not(.hidden) {
        display: block;
    }

    .fi-ta-content .fi-ta-table > tbody > tr.fi-ta-row > td.mk-cell-primary {
        flex: 1 1 calc(100% - 7rem);
        min-width: 0;
    }

    .fi-ta-content .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell {
        margin-inline-start: auto;
    }

    .fi-ta-content .fi-ta-cell .fi-ta-text,
    .fi-ta-content .fi-ta-cell .fi-ta-image,
    .fi-ta-content .fi-ta-cell .fi-ta-icon,
    .fi-ta-content .fi-ta-cell .mk-status-cell {
        padding: 0.375rem 0.5rem;
    }
}

/* The "no photo" placeholder is a light SVG; tone it down on dark rows. */
.dark .fi-ta-image img[src$="no-photo.svg"] {
    opacity: 0.35;
}