/*
 * Swaamy Catering admin theme.
 * Every colour comes from the --primary-* scale, so it follows the
 * primary colour chosen in Settings: --primary-600 is that exact colour
 * (see AdminPanelProvider::primaryPalette()).
 */

/* ---------- Sidebar ---------- */
.fi-sidebar-item-btn:hover {
    background-color: var(--primary-100);
}

.fi-sidebar-item-btn > .fi-sidebar-item-icon {
    color: var(--primary-600);
}

/* Active menu: solid primary with white text */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover {
    background-color: var(--primary-600);
}

.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: #fff;
}

/* ---------- Buttons: solid shade with white text ---------- */
.fi-btn.fi-color:not(.fi-outlined):not(label) {
    --bg: var(--color-600);
    --hover-bg: var(--color-700);
    --dark-bg: var(--color-600);
    --dark-hover-bg: var(--color-500);
    --text: #fff;
    --hover-text: #fff;
    --dark-text: #fff;
    --dark-hover-text: #fff;
}

/* Selected toggle button (e.g. a menu item's Vegetarian / Non-Vegetarian): solid primary like the buttons
   above, instead of Filament's light tint with dark text. */
.fi-fo-toggle-buttons-input:checked + .fi-btn.fi-color-primary,
.dark .fi-fo-toggle-buttons-input:checked + .fi-btn.fi-color-primary {
    background-color: var(--primary-600);
    color: #fff;
}

.fi-fo-toggle-buttons-input:checked + .fi-btn.fi-color-primary:hover,
.dark .fi-fo-toggle-buttons-input:checked + .fi-btn.fi-color-primary:hover {
    background-color: var(--primary-700);
    color: #fff;
}

/* ---------- Headings and sections ---------- */
.fi-header-heading {
    color: var(--primary-600);
}

.fi-section-header-heading {
    color: var(--primary-600);
}

/* ---------- Tabs: active tab in primary ---------- */
.fi-tabs-item.fi-active {
    background-color: var(--primary-600);
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active > .fi-icon {
    color: #fff;
}

.fi-tabs-item.fi-active .fi-badge {
    background-color: #fff;
    color: var(--primary-700);
}

/* ---------- Dashboard stat boxes ---------- */
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    color: var(--primary-600);
}

/* ---------- Links ---------- */
.fi-link.fi-color-primary {
    color: var(--primary-600);
}

/* ---------- Dark mode ---------- */
.dark .fi-sidebar-item-btn:hover {
    background-color: rgb(255 255 255 / 0.05);
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--primary-600);
}

.dark .fi-header-heading,
.dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    color: #fff;
}

.dark .fi-section-header-heading {
    color: var(--primary-400);
}

/* ---------- Login page (split screen with catering hero) ---------- */
.fi-simple-layout:has(> .sc-login-hero) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    min-height: 100dvh;
    padding: 0;
    background:
        radial-gradient(circle at 100% 0%, var(--primary-100), transparent 45%),
        radial-gradient(circle at 0% 100%, var(--primary-50), transparent 40%),
        #fffaf5;
}

@media (min-width: 1024px) {
    .fi-simple-layout:has(> .sc-login-hero) {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .fi-simple-layout:has(> .sc-login-hero) > :not(.sc-login-hero):not(.fi-simple-main-ctn) {
        grid-column: 2;
    }
}

.fi-simple-layout:has(> .sc-login-hero) .fi-simple-main-ctn {
    min-width: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.fi-simple-layout:has(> .sc-login-hero) .fi-simple-main {
    width: 100%;
    max-width: 28rem;
    box-sizing: border-box;
    margin: 0;
    padding: 2.5rem 2.25rem;
    border-radius: 1.5rem;
    background: #fff;
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.04),
        0 20px 50px -20px var(--primary-300);
    border: 1px solid var(--primary-100);
    position: relative;
    overflow: hidden;
}

/* Thin accent band along the card top */
.fi-simple-layout:has(> .sc-login-hero) .fi-simple-main::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-400), var(--primary-600), var(--primary-400));
}

.fi-simple-layout:has(> .sc-login-hero) .fi-logo {
    color: var(--primary-700);
    letter-spacing: 0.08em;
}

.fi-simple-layout:has(> .sc-login-hero) .fi-simple-header-heading {
    font-size: 1.75rem;
    color: #1f1a17;
}

.fi-simple-layout:has(> .sc-login-hero) .fi-simple-header-subheading {
    color: #78716c;
}

.fi-simple-layout:has(> .sc-login-hero) .fi-input-wrp {
    border-radius: 0.75rem;
    background-color: #fffcf9;
}

.fi-simple-layout:has(> .sc-login-hero) .fi-input {
    padding-block: 0.7rem;
}

.fi-simple-layout:has(> .sc-login-hero) .fi-btn {
    border-radius: 0.75rem;
    padding-block: 0.75rem;
    font-size: 0.95rem;
    box-shadow: 0 8px 20px -8px var(--primary-600);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fi-simple-layout:has(> .sc-login-hero) .fi-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -10px var(--primary-700);
}

/* Hero panel */
.sc-login-hero {
    display: none;
    position: relative;
    overflow: hidden;
    min-height: 100dvh;
    color: #fff;
    background:
        radial-gradient(circle at 20% 15%, var(--primary-500), transparent 55%),
        radial-gradient(circle at 85% 90%, var(--primary-900), transparent 60%),
        linear-gradient(150deg, var(--primary-600), var(--primary-800));
}

@media (min-width: 1024px) {
    .sc-login-hero {
        display: block;
    }
}

.sc-login-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none' stroke='white' stroke-width='1.5'%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3Ccircle cx='16' cy='16' r='2'/%3E%3Cpath d='M44 40c4-6 12-6 14-2-4 4-10 5-14 2z'/%3E%3Cpath d='M48 8v12M52 8v12M50 20v8'/%3E%3C/svg%3E");
    background-size: 64px 64px;
}

.sc-login-hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 3rem clamp(2rem, 5vw, 4.5rem);
}

.sc-login-hero-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.95rem;
}

.sc-login-hero-brand-mark {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: rgb(255 255 255 / 0.15);
    border: 1px solid rgb(255 255 255 / 0.25);
}

.sc-login-hero-brand-mark svg {
    width: 1.4rem;
    height: 1.4rem;
}

.sc-login-hero-body {
    max-width: 30rem;
    padding-block: 2rem;
}

.sc-login-hero-art {
    width: 14rem;
    height: auto;
    margin-bottom: 2rem;
    color: rgb(255 255 255 / 0.9);
}

.sc-steam {
    animation: sc-steam 3s ease-in-out infinite;
    opacity: 0.7;
}

.sc-steam-2 { animation-delay: 0.6s; }
.sc-steam-3 { animation-delay: 1.2s; }

@keyframes sc-steam {
    0%, 100% { transform: translateY(0); opacity: 0.25; }
    50% { transform: translateY(-5px); opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-steam { animation: none; }
}

.sc-login-hero-title {
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sc-login-hero-text {
    margin-top: 1rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgb(255 255 255 / 0.85);
}

.sc-login-hero-features {
    margin-top: 2rem;
    display: grid;
    gap: 0.75rem;
}

.sc-login-hero-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: fit-content;
    padding: 0.6rem 1rem 0.6rem 0.75rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.12);
    border: 1px solid rgb(255 255 255 / 0.2);
    font-weight: 500;
    backdrop-filter: blur(4px);
}

.sc-login-hero-features svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.sc-login-hero-foot {
    font-size: 0.85rem;
    color: rgb(255 255 255 / 0.65);
}

/* Login page in dark mode */
.dark .fi-simple-layout:has(> .sc-login-hero) {
    background: radial-gradient(circle at 100% 0%, rgb(255 255 255 / 0.04), transparent 45%), #0f0d0c;
}

.dark .fi-simple-layout:has(> .sc-login-hero) .fi-simple-main {
    background: #1c1917;
    border-color: rgb(255 255 255 / 0.08);
    box-shadow: 0 20px 50px -20px rgb(0 0 0 / 0.6);
}

.dark .fi-simple-layout:has(> .sc-login-hero) .fi-simple-header-heading {
    color: #fff;
}

.dark .fi-simple-layout:has(> .sc-login-hero) .fi-simple-header-subheading {
    color: #a8a29e;
}

.dark .fi-simple-layout:has(> .sc-login-hero) .fi-input-wrp {
    background-color: rgb(255 255 255 / 0.04);
}

.dark .fi-simple-layout:has(> .sc-login-hero) .fi-logo {
    color: var(--primary-400);
}

/* ---------- Quotation form ---------- */
.sc-grand-total {
    padding-block: 0.5rem;
    border-block: 1px dashed var(--primary-300);
}

/* ---------- Menu items: category tabs on desktop, filter popup on mobile ---------- */
@media (max-width: 767px) {
    .menu-category-tabs {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .menu-category-filter {
        display: none !important;
    }
}

/* ---------- Menu items: inactive card looks disabled (greyed photo, faded text, "Unavailable" tag) ---------- */
.sc-menu-item-inactive {
    background-color: var(--gray-50);
}

.sc-menu-item-inactive .fi-ta-image img,
.sc-menu-item-inactive .fi-ta-text,
.sc-menu-item-inactive .fi-ta-icon {
    filter: grayscale(1);
    opacity: 0.55;
}

.sc-menu-item-inactive .fi-ta-image {
    position: relative;
}

.sc-menu-item-inactive .fi-ta-image::after {
    content: "Unavailable";
    position: absolute;
    left: 50%;
    bottom: 0.75rem;
    transform: translateX(-50%);
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background-color: rgb(17 24 39 / 0.85);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dark .sc-menu-item-inactive {
    background-color: rgb(255 255 255 / 0.02);
}

/* ---------- Billings: balance tabs on the left, event date on the right ---------- */
.sc-billing-toolbar .fi-tabs {
    margin-inline: 0;
}

.sc-billing-event-date {
    min-width: 15rem;
}

@media (min-width: 768px) {
    .sc-billing-toolbar {
        justify-content: space-between;
    }
}

/* ---------- Dropdown options: hover / keyboard focus / selected in primary (Filament uses gray) ---------- */
.fi-select-input-option:not(.fi-disabled):not([disabled]):hover,
.fi-select-input-option:not(.fi-disabled):not([disabled]):focus-visible,
.fi-select-input-option:not(.fi-disabled):not([disabled]).fi-selected {
    background-color: var(--primary-50);
    color: var(--primary-700);
}

.dark .fi-select-input-option:not(.fi-disabled):not([disabled]):hover,
.dark .fi-select-input-option:not(.fi-disabled):not([disabled]):focus-visible,
.dark .fi-select-input-option:not(.fi-disabled):not([disabled]).fi-selected {
    background-color: color-mix(in oklab, var(--primary-400) 15%, transparent);
    color: var(--primary-300);
}

/* ---------- Billings: payment history popup ---------- */
.sc-payment-history-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.sc-payment-history-summary > div {
    padding: 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--primary-50);
}

.sc-payment-history-summary dt {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.sc-payment-history-summary dd {
    font-weight: 700;
    color: var(--primary-700);
}

.sc-payment-history-summary dd.sc-paid,
.sc-payment-history-table .sc-paid {
    color: var(--success-600);
}

.sc-payment-history-summary dd.sc-due {
    color: var(--danger-600);
}

.sc-payment-history-table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}

.sc-payment-history-table th {
    text-align: left;
    font-weight: 600;
    color: var(--gray-500);
    padding: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.sc-payment-history-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
}

.sc-payment-history-table .sc-amount {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

.sc-payment-history-table .sc-note {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.sc-payment-history-table .sc-empty {
    text-align: center;
    color: var(--gray-500);
    padding: 1.5rem;
}

.dark .sc-payment-history-summary > div {
    background-color: color-mix(in oklab, var(--primary-400) 10%, transparent);
}

.dark .sc-payment-history-summary dd {
    color: var(--primary-300);
}

.dark .sc-payment-history-table th,
.dark .sc-payment-history-table td {
    border-color: color-mix(in oklab, white 10%, transparent);
}