/*
 * Admin panel custom theme.
 *
 * Registered panel-wide in AdminPanelProvider (not per-resource), so every
 * form in the admin gets these field/label/tab styles and not just one.
 * Targets Filament's own stable `.fi-*` class names and its `--gray-*` /
 * `--primary-*` CSS variables (already generated panel-wide from the
 * ->colors() config) rather than hardcoding colors, so it stays in sync if
 * the panel's palette changes later. No build step: this is a plain static
 * file served directly, registered via ->assets([Css::make(...)]).
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');

:root,
.fi-body,
[data-filament-panel-id] {
    --font-display: 'DM Serif Display', Georgia, serif;
}

/* Page / section headings lean on the display serif, matching the brand look. */
.fi-header-heading,
.fi-section-header-heading {
    font-family: var(--font-display);
    font-weight: 400;
}

/* Field labels: small, uppercase, wide-tracked — quieter than the input itself. */
.fi-fo-field-label-content {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.fi-fo-field-label-required-mark {
    color: var(--primary-500);
}

/* Inputs: consistent radius and a calmer border/focus treatment. */
.fi-input,
.fi-select-input,
.fi-textarea {
    border-radius: 0.5rem;
    border-color: var(--gray-200);
}

.fi-input:focus,
.fi-select-input:focus-within,
.fi-textarea:focus {
    border-color: var(--primary-500);
}

/* Tabs: segmented-pill style instead of an underlined strip. */
.fi-tabs {
    display: inline-flex;
    gap: 0.25rem;
    background-color: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.625rem;
    padding: 0.25rem;
}

.fi-tabs-item {
    border-radius: 0.4rem;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.fi-tabs-item.fi-active {
    background-color: var(--fi-panel-bg, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
}

.fi-tabs-item:not(.fi-active) {
    color: var(--gray-400);
}

/* Repeater rows (e.g. Job Order line items): give each row a distinct card
 * feel instead of a flat, borderless list, so items read as discrete units. */
.fi-fo-repeater-items {
    gap: 0.75rem;
}

.fi-fo-repeater-item {
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.fi-fo-repeater-item:hover {
    border-color: var(--gray-300);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Document line-item repeaters (quotations, invoices, credit notes, receipt
 * allocations): a flat table-row look instead of the boxed card above — a
 * row of amount fields reads better as a list than as separate cards. Apply
 * via ->extraAttributes(['class' => 'items-repeater']) on the Repeater. */
.items-repeater .fi-fo-repeater-item {
    border: none;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 0;
    box-shadow: none;
}

.items-repeater .fi-fo-repeater-item:hover {
    border-color: var(--gray-300);
    box-shadow: none;
}

.items-repeater .fi-fo-repeater-items > .fi-fo-repeater-item:last-of-type {
    border-bottom: none;
}

/* Job Order line items specifically (not the shared .items-repeater class
 * above, which Quotation/Invoicing also use — this is scoped to
 * .job-order-items-repeater, applied alongside .items-repeater only on
 * that Repeater): Quantity/Unit Price/Tax/Line total read right-aligned
 * like a ledger, and every field is an underline only instead of a boxed
 * input — a compact, spreadsheet-like row. */
.job-order-items-repeater .items-repeater-align-end .fi-input,
.job-order-items-repeater .items-repeater-align-end .fi-select-input {
    text-align: right;
}

.job-order-items-repeater .fi-input,
.job-order-items-repeater .fi-select-input {
    border: none;
    border-bottom: 1px solid var(--gray-300);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    padding-inline: 0.25rem;
}

.job-order-items-repeater .fi-input:focus,
.job-order-items-repeater .fi-select-input:focus,
.job-order-items-repeater .fi-select-input:focus-within {
    border-bottom-color: var(--primary-500);
    box-shadow: none;
}

/* Table row-selection checkbox: left-aligned instead of centered, so it
 * reads as a compact leading column rather than a wide centered gutter —
 * matches narrow leading icon columns like the Job Order services list's
 * billing checkmark. */
.fi-ta-selection-cell {
    text-align: left;
}

/* Disabled inputs are used for computed, read-only values (e.g. a line's
 * total). Style them as a quiet "stat", not a greyed-out empty field. */
.fi-input:disabled,
.fi-select-input:disabled {
    background-color: var(--gray-50);
    color: var(--gray-700);
    font-weight: 600;
    opacity: 1;
}

/* Topbar tenant menu (see resources/views/vendor/filament-panels/livewire/
 * topbar.blade.php): centered between the logo and the user menu, instead
 * of sitting flush against the logo. */
.fi-topbar-center {
    display: none;
}

@media (min-width: 64rem) {
    .fi-topbar-center {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
    }
}

/* Main content: tighter start (left) padding only, so pages sit closer to
 * the sidebar. Right-hand padding is left at Filament's default. Overrides
 * .fi-main's padding-inline (theme.css) at matching breakpoints. */
.fi-main {
    padding-inline-start: 1rem;
}

@media (min-width: 48rem) {
    .fi-main {
        padding-inline-start: 1.25rem;
    }
}

@media (min-width: 64rem) {
    .fi-main {
        padding-inline-start: 1.5rem;
    }
}

/*
 * Customer profile pages (View + the Contacts/Quotations/Job Orders/
 * Invoices sub-navigation pages) — scoped under `.fi-customer-profile`,
 * a class those pages add via getPageClasses() (see
 * App\Modules\Party\...\Concerns\HasCustomerProfileChrome). Ports a design
 * mock's visual language — rounded white card, soft blue-gray palette,
 * pill badges/chips, dashed label/value rows — onto Filament's real
 * .fi-* markup rather than hand-rolled HTML, so the real breadcrumb,
 * Edit action, and sub-navigation stay fully functional.
 *
 * Deliberately scoped, not applied panel-wide: confirmed on the Customer
 * resource first, other resources' view pages get this only once agreed.
 */

.fi-customer-profile .fi-page-header-main-ctn {
    background: #fff;
    border-radius: 1.75rem;
    box-shadow:
        0 20px 40px -12px rgba(0, 20, 40, 0.12),
        0 8px 24px -8px rgba(0, 32, 64, 0.06);
    overflow: hidden;
}

.fi-customer-profile .fi-header {
    padding: 1.5rem 2rem 1rem 2rem;
}

.fi-customer-profile .fi-breadcrumbs-item-label {
    color: var(--gray-500);
    font-weight: 500;
}

.fi-customer-profile .fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: var(--primary-600);
    font-weight: 600;
}

.fi-customer-profile .fi-header-heading {
    font-size: 1.5rem;
}

/* Name + type icon + status badge, built by
 * HasCustomerProfileChrome::getHeading(). */
.fi-customer-profile-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fi-customer-type-icon {
    display: inline-flex;
    color: var(--primary-500);
}

.fi-customer-type-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.fi-customer-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.fi-customer-status-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    display: inline-block;
}

.fi-customer-status-active {
    background: color-mix(in srgb, var(--success-500) 12%, white);
    color: var(--success-700);
}

.fi-customer-status-active .fi-customer-status-dot {
    background: var(--success-500);
}

.fi-customer-status-inactive {
    background: color-mix(in srgb, var(--danger-500) 12%, white);
    color: var(--danger-700);
}

.fi-customer-status-inactive .fi-customer-status-dot {
    background: var(--danger-500);
}

/* Letterhead-style header row: name/type/status/edit on the left,
 * contact details (and, on Quotations/Job Orders/Invoices, credit terms)
 * right-aligned on the right — built by
 * HasCustomerProfileChrome::getHeader() + resources/views/customers/
 * profile-header.blade.php. */
.fi-customer-profile-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.fi-customer-profile-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fi-customer-profile-header-left {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fi-customer-profile-header-left .fi-header-heading {
    margin: 0;
}

.fi-customer-profile-header-identity {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.fi-customer-profile-header-address {
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--gray-600);
}

.fi-customer-edit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    color: var(--gray-500);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-customer-edit-icon:hover {
    background-color: var(--gray-100);
    color: var(--primary-600);
}

.fi-customer-edit-icon svg {
    width: 1rem;
    height: 1rem;
}

.fi-customer-profile-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    text-align: right;
    padding-top: 0.25rem;
}

.fi-customer-letterhead-line {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--gray-600);
}

.fi-customer-letterhead-line svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--gray-400);
    flex-shrink: 0;
}

/* Sub-navigation sidebar: narrower than Filament's default 18rem (w-72),
 * and a soft rounded active state instead of the default left-border
 * indicator, so it reads as part of the same card. */
.fi-customer-profile .fi-page-sub-navigation-sidebar-ctn {
    width: 12rem;
    border-inline-end: 1px solid var(--gray-100);
    padding-inline-end: 0.5rem;
}

.fi-customer-profile .fi-sidebar-item-btn {
    border-radius: 0.75rem;
}

.fi-customer-profile .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: color-mix(in srgb, var(--primary-500) 10%, white);
    color: var(--primary-600);
}

.fi-customer-profile .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--primary-500);
}

/* Infolist content: soft-tinted rounded cards instead of Filament's flat
 * bordered sections, and label/value entries get a dashed underline —
 * matches the mock's detail-item rows. */
.fi-customer-profile .fi-page-content .fi-section {
    background-color: #fafcff;
    border-radius: 1.25rem;
    border-color: var(--gray-100);
}

.fi-customer-profile .fi-page-content .fi-in-entry {
    border-bottom: 1px dashed var(--gray-200);
    padding-bottom: 0.5rem;
}

.fi-customer-profile .fi-page-content .fi-in-entry-label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* The actual value text sits in a nested .fi-in-text-item (with its own
 * .fi-size-sm font-size from Filament's base styles), not directly in
 * .fi-in-entry-content — target both so the override actually reaches the
 * visible text instead of just its empty wrapper. */
.fi-customer-profile .fi-page-content .fi-in-entry-content,
.fi-customer-profile .fi-page-content .fi-in-entry-content .fi-in-text-item {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-900);
}

.fi-customer-profile .fi-page-content .fi-badge {
    border-radius: 999px;
}

/* Main profile details: a slightly roomier grid gives the name and identity
 * entries the same visual priority as the reference profile. */
.fi-customer-profile .fi-customer-details-section {
    margin-right: 1rem;
}

.fi-customer-profile .fi-customer-details-section .fi-in-entry:first-child {
    padding-bottom: 0.75rem;
}

.fi-customer-profile .fi-customer-details-section .fi-in-entry:first-child .fi-in-entry-content {
    font-size: 1.15rem;
}

.fi-customer-profile .fi-customer-address-entry {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 0;
    padding-bottom: 0.25rem;
}

.fi-customer-profile .fi-customer-address-entry .fi-in-entry-label {
    display: none;
}

.fi-customer-profile .fi-customer-address-entry .fi-in-entry-content,
.fi-customer-profile .fi-customer-address-entry .fi-in-entry-content .fi-in-text-item {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--gray-600);
}

.fi-customer-profile .fi-customer-address-entry .fi-in-entry-icon {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--gray-400);
    flex-shrink: 0;
}


.fi-customer-profile .fi-customer-terms-section .fi-in-entry {
    border-bottom: 0;
    padding-bottom: 0;
}

.fi-job-order-profile .fi-page-header-main-ctn {
    background: #fff;
    border-radius: 1.75rem;
    box-shadow: 0 20px 40px -12px rgba(0, 20, 40, 0.12), 0 8px 24px -8px rgba(0, 32, 64, 0.06);
    overflow: hidden;
}

.fi-job-order-profile-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem 2rem 1rem;
}

.fi-job-order-profile-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
}

.fi-job-order-profile-header-left {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fi-job-order-profile-header-left .fi-header-heading {
    margin: 0;
}

.fi-job-order-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.fi-job-order-status-open,
.fi-job-order-status-in_progress {
    background: color-mix(in srgb, var(--primary-500) 12%, white);
    color: var(--primary-700);
}

.fi-job-order-status-completed {
    background: color-mix(in srgb, var(--success-500) 12%, white);
    color: var(--success-700);
}

.fi-job-order-status-cancelled {
    background: color-mix(in srgb, var(--danger-500) 12%, white);
    color: var(--danger-700);
}

.fi-job-order-edit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    color: var(--gray-500);
}

.fi-job-order-edit-icon:hover {
    background: var(--gray-100);
    color: var(--primary-600);
}

.fi-job-order-profile-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.fi-job-order-profile-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.fi-job-order-profile-date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--gray-600);
    font-size: 0.8rem;
}

.fi-job-order-profile-date svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--gray-400);
}

.fi-job-order-progress-entry {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    background: var(--gray-100);
    padding: 0.45rem 0.75rem;
}

.fi-job-order-progress-entry::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--progress, 0%);
    background: color-mix(in srgb, var(--success-500) 24%, white);
    transition: width 0.25s ease;
}

.fi-job-order-progress-entry .fi-in-entry-content,
.fi-job-order-progress-entry .fi-in-entry-content .fi-in-text-item {
    position: relative;
    z-index: 1;
    font-weight: 700;
}

.fi-job-order-contact-details {
    border-top: 1px dashed var(--gray-200);
    padding-top: 0.75rem;
}

@media (max-width: 48rem) {
    .fi-customer-profile .fi-customer-contacts-section .fi-in-entry {
        min-height: 2.75rem;
    }

    .fi-job-order-profile-header-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .fi-job-order-profile-header-right {
        align-items: flex-start;
        width: 100%;
    }
}