/*
 * Cashio CRM theme: the parts Filament's PHP options can't set. Colours, the Stone background
 * (gray-50) and the Sora font come from CrmPanelProvider; see docs/crm-theme.md.
 *
 * Published to public/css/app/crm-theme.css by `php artisan filament:assets`. There is no CSS
 * build, so this file is plain CSS against Filament's own class names and CSS variables.
 */

:root {
    /* The brand's 12px control radius, for buttons and inputs (lg) and sections and cards (xl). */
    --radius-lg: 0.75rem;
    --radius-xl: 0.75rem;

    /* Brand colours used directly below (the palettes themselves are registered in PHP). */
    --cashio-ink: #23211F;
    --cashio-ink-deep: #161412;
    --cashio-orange: #E4601F;
    --cashio-orange-bright: #F5813E;
    --cashio-navy: #152A47;
    --cashio-card-shadow: 0 1px 2px rgba(35, 33, 31, 0.06), 0 10px 30px -12px rgba(35, 33, 31, 0.18);
    --cashio-card-shadow-hover: 0 2px 4px rgba(35, 33, 31, 0.06), 0 18px 40px -14px rgba(35, 33, 31, 0.26);
}

/* ── Page ───────────────────────────────────────────────────────────────────────────────── */

/* A warm Stone page with a faint orange glow in the top corner, so white cards lift off it. */
.fi-body {
    background-color: var(--gray-50);
    background-image:
        radial-gradient(900px 420px at 100% -10%, rgba(228, 96, 31, 0.10), transparent 60%),
        radial-gradient(700px 360px at -10% 110%, rgba(21, 42, 71, 0.06), transparent 60%);
    background-attachment: fixed;
}

.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-wi-stats-overview-stat-value {
    letter-spacing: -0.02em;
}

.fi-header-heading {
    font-weight: 600;
}

/* ── Sidebar: ink, with the orange active item ─────────────────────────────────────────── */

.fi-sidebar {
    /* Filament colours sidebar text with the grey scale; remap it for a dark surface. All text
       pairs here pass WCAG AA on ink (ThemeContrastTest). */
    --gray-50: rgba(255, 255, 255, 0.06);
    --gray-100: rgba(255, 255, 255, 0.08);
    --gray-200: rgba(255, 255, 255, 0.12);
    --gray-300: rgba(255, 255, 255, 0.18);
    --gray-400: #B8B1A9;
    --gray-500: #B8B1A9;
    --gray-600: #D9D4CE;
    --gray-700: #EDE9E3;
    --gray-800: #F4F1EC;
    --gray-900: #FFFFFF;
    --gray-950: #FFFFFF;
    --primary-700: #F5813E;
    --primary-600: #F5813E;
    --color-white: var(--cashio-ink);

    background-color: var(--cashio-ink);
    background-image: linear-gradient(180deg, #2A2724 0%, var(--cashio-ink) 40%, var(--cashio-ink-deep) 100%);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
    color: #EDE9E3;
}

.fi-sidebar-header {
    background-color: transparent;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* The brand logo on ink: white wordmark and bars, orange roof and dot. */
.fi-sidebar .fi-logo [fill="#23211F"] { fill: #FFFFFF; }
.fi-sidebar .fi-logo [stroke="#23211F"] { stroke: #FFFFFF; }
.fi-sidebar .fi-logo [style*="color: #23211F"] { color: #FFFFFF !important; }

.fi-sidebar-group-label {
    color: #B8B1A9;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fi-sidebar-item-btn {
    border-radius: 0.625rem;
    transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.fi-sidebar-item-label {
    color: #EDE9E3;
    font-weight: 500;
}

.fi-sidebar-item-btn > .fi-icon {
    color: #B8B1A9;
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.07);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover > .fi-sidebar-item-label,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover > .fi-icon {
    color: #FFFFFF;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgba(228, 96, 31, 0.18);
    box-shadow: inset 3px 0 0 var(--cashio-orange);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--cashio-orange-bright);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part {
    background-color: var(--cashio-orange-bright);
}

.fi-sidebar-item-badge-ctn .fi-badge {
    background-color: rgba(255, 255, 255, 0.12);
}

/* ── Topbar ─────────────────────────────────────────────────────────────────────────────── */

.fi-topbar {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 var(--gray-200);
}

/* ── Cards, sections and tables ─────────────────────────────────────────────────────────── */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-chart .fi-wi-widget-content,
.fi-in-section,
.fi-fo-section,
.cashio-welcome,
.fi-wi-widget > .fi-section {
    --tw-ring-color: var(--gray-200);
    box-shadow: var(--cashio-card-shadow);
    border-radius: 1rem;
}

.fi-ta-ctn {
    overflow: hidden;
}

.fi-ta-header-cell {
    background-color: #FAF9F7;
    color: var(--gray-600);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fi-ta-row:hover {
    background-color: #FBF6F2;
}

.fi-ta-row.fi-selected {
    background-color: rgba(228, 96, 31, 0.06);
}

.fi-ta-empty-state-icon-ctn {
    background-color: rgba(228, 96, 31, 0.10);
}

.fi-ta-empty-state-icon-ctn .fi-icon {
    color: var(--cashio-orange);
}

/* ── Buttons, badges, inputs, tabs ──────────────────────────────────────────────────────── */

.fi-btn {
    border-radius: 0.625rem;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.fi-btn:not(.fi-outlined).fi-color-primary {
    background-image: linear-gradient(180deg, var(--primary-500), var(--primary-600));
    box-shadow: 0 1px 2px rgba(35, 33, 31, 0.10), 0 6px 16px -6px rgba(196, 78, 20, 0.55);
}

.fi-btn:not(.fi-outlined).fi-color-primary:not(.fi-disabled):hover {
    background-image: linear-gradient(180deg, var(--primary-400), var(--primary-500));
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(35, 33, 31, 0.10), 0 10px 22px -8px rgba(196, 78, 20, 0.6);
}

.fi-btn:not(.fi-disabled):active {
    transform: translateY(0);
}

.fi-badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ── Chat (App\Filament\Pages\Chat): existing greys and the primary tint, nothing new ────── */

.cashio-chat {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1024px) {
    .cashio-chat { grid-template-columns: minmax(0, 1fr); }
}

.cashio-chat-rows { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }

.cashio-chat-row {
    width: 100%;
    text-align: left;
    padding: 0.625rem 0.75rem;
    border-radius: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    background: transparent;
}

.cashio-chat-row:hover { background-color: rgba(35, 33, 31, 0.05); }

.cashio-chat-row.is-selected { background-color: var(--primary-50); box-shadow: inset 3px 0 0 var(--cashio-orange); }

.cashio-chat-row-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }

.cashio-chat-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cashio-chat-row-preview { font-size: 0.8125rem; opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cashio-chat-row-author { font-weight: 600; }

.cashio-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.25rem 0.25rem 0.75rem;
}

.cashio-chat-message {
    max-width: 80%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.875rem;
    background-color: rgba(35, 33, 31, 0.05);
    align-self: flex-start;
}

.cashio-chat-message.is-mine { background-color: var(--primary-50); align-self: flex-end; }

.cashio-chat-message-meta { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.75rem; }

.cashio-chat-message-author { font-weight: 600; }

.cashio-chat-message-time { opacity: 0.65; }

.cashio-chat-message-body { margin: 0.125rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.cashio-chat-message-body.is-deleted { font-style: italic; opacity: 0.6; }

.cashio-chat-message-actions { display: flex; gap: 0.75rem; margin-top: 0.25rem; }

.cashio-chat-composer { position: relative; margin-top: 0.75rem; }

.cashio-chat-mentions {
    position: absolute;
    bottom: 100%;
    left: 0;
    list-style: none;
    margin: 0 0 0.25rem;
    padding: 0.25rem;
    background-color: var(--color-white, #fff);
    border-radius: 0.625rem;
    box-shadow: var(--cashio-card-shadow);
    z-index: 10;
}

.cashio-chat-mentions button { padding: 0.375rem 0.75rem; width: 100%; text-align: left; border-radius: 0.5rem; }

.cashio-chat-mentions button:hover { background-color: var(--primary-50); }

/* Response states (docs/terminology.md). Due soon is Cash orange (primary-400) with ink text,
   Overdue is brand deep (primary-600) with white text: both AA, neither red. */
.cashio-response-due-soon .fi-badge {
    background-color: var(--cashio-orange);
    color: var(--cashio-ink-deep);
    --tw-ring-color: transparent;
}

.cashio-response-overdue .fi-badge {
    background-color: var(--primary-600);
    color: #FFFFFF;
    --tw-ring-color: transparent;
}

.fi-input-wrp {
    border-radius: 0.625rem;
    box-shadow: 0 1px 2px rgba(35, 33, 31, 0.05);
}

.fi-input-wrp:focus-within {
    --tw-ring-color: var(--primary-400);
    box-shadow: 0 0 0 4px rgba(228, 96, 31, 0.14);
}

.fi-tabs {
    background-color: rgba(35, 33, 31, 0.05);
    border-radius: 0.875rem;
    padding: 0.25rem;
}

.fi-tabs-item {
    border-radius: 0.625rem;
}

.fi-tabs-item.fi-active {
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(35, 33, 31, 0.10);
}

.fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--primary-600);
}

/* ── Stats ──────────────────────────────────────────────────────────────────────────────── */

.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

a.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--cashio-card-shadow-hover);
}

/* A coloured bar along the top and a tinted icon disc: the colour comes from .cashio-stat-*. */
.cashio-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--cashio-stat-from), var(--cashio-stat-to));
}

.cashio-stat .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    box-sizing: content-box;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.5rem;
    border-radius: 0.75rem;
    background-color: var(--cashio-stat-tint);
    color: var(--cashio-stat-from);
}

.cashio-stat .fi-wi-stats-overview-stat-label-ctn {
    align-items: center;
    gap: 0.625rem;
}

.cashio-stat .fi-wi-stats-overview-stat-value {
    font-size: 2rem;
    margin-top: 0.375rem;
    color: var(--gray-950);
}

.cashio-stat-primary { --cashio-stat-from: #C44E14; --cashio-stat-to: #F5813E; --cashio-stat-tint: rgba(228, 96, 31, 0.12); }
.cashio-stat-info    { --cashio-stat-from: #1D4ED8; --cashio-stat-to: #60A5FA; --cashio-stat-tint: rgba(59, 130, 246, 0.12); }
.cashio-stat-success { --cashio-stat-from: #047857; --cashio-stat-to: #34D399; --cashio-stat-tint: rgba(16, 185, 129, 0.12); }
.cashio-stat-warning { --cashio-stat-from: #B45309; --cashio-stat-to: #FBBF24; --cashio-stat-tint: rgba(245, 158, 11, 0.14); }
.cashio-stat-danger  { --cashio-stat-from: #B91C1C; --cashio-stat-to: #F87171; --cashio-stat-tint: rgba(239, 68, 68, 0.12); }
.cashio-stat-gray    { --cashio-stat-from: #4A4540; --cashio-stat-to: #B8B1A9; --cashio-stat-tint: rgba(74, 69, 64, 0.10); }

/* ── Welcome header ─────────────────────────────────────────────────────────────────────── */

.cashio-welcome-widget > .fi-section {
    box-shadow: none;
    background: transparent;
    --tw-ring-color: transparent;
}

.cashio-welcome {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: space-between;
    padding: 1.75rem 2rem;
    color: #FFFFFF;
    background-color: var(--cashio-ink);
    background-image: linear-gradient(120deg, #2A2724 0%, var(--cashio-ink) 45%, #1B2537 100%);
    box-shadow: 0 2px 4px rgba(35, 33, 31, 0.10), 0 24px 48px -20px rgba(35, 33, 31, 0.45);
}

.cashio-welcome-glow {
    position: absolute;
    right: -6rem;
    top: -8rem;
    width: 22rem;
    height: 22rem;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(245, 129, 62, 0.55), rgba(228, 96, 31, 0.0));
    pointer-events: none;
}

.cashio-welcome-body {
    position: relative;
    min-width: 0;
}

.cashio-welcome-eyebrow {
    margin: 0 0 0.375rem;
    color: #D9D4CE;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cashio-welcome-heading {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: #FFFFFF;
}

.cashio-welcome-note {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0.875rem 0 0;
    color: #EDE9E3;
    font-size: 0.95rem;
}

.cashio-welcome-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background-color: var(--cashio-orange);
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 700;
}

.cashio-welcome-pill-good {
    background-color: #047857;
}

.cashio-welcome-links {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cashio-welcome-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem 0.5rem 0.625rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 120ms ease, transform 120ms ease;
}

.cashio-welcome-link:hover {
    background-color: rgba(228, 96, 31, 0.9);
    transform: translateY(-1px);
}

.cashio-welcome-link-icon {
    display: inline-flex;
    width: 1.125rem;
    height: 1.125rem;
}

.cashio-welcome-link-icon svg {
    width: 100%;
    height: 100%;
}

@media (max-width: 640px) {
    .cashio-welcome {
        padding: 1.25rem 1.25rem;
    }

    .cashio-welcome-heading {
        font-size: 1.375rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-btn,
    .fi-wi-stats-overview-stat,
    .cashio-welcome-link,
    .fi-sidebar-item-btn {
        transition: none;
    }
}

/* The brand logo sits on the Stone background; keep the wordmark crisp. */
.fi-logo svg {
    display: block;
}