/*
 * Custom visual overrides for the Elysian Banquet admin panel.
 * Edit freely — loaded on every admin page via a render hook in
 * AdminPanelProvider. No build step needed, just refresh the browser.
 *
 * Filament's own CSS variables (already available to override here):
 *   --primary-50 ... --primary-950
 *   --danger-50 ... --danger-950
 *   --warning-50 ... --warning-950
 *   --success-50 ... --success-950
 *   --gray-50 ... --gray-950
 *   --font-family
 */
 
 @font-face {
    font-family: 'Caviar Dreams';
    src: url('/fonts/CaviarDreams.woff2') format('woff2'),
         url('/fonts/CaviarDreams.woff') format('woff'),
         url('/fonts/CaviarDreams.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Caviar Dreams';
    src: url('/fonts/CaviarDreams_Bold.woff2') format('woff2'),
         url('/fonts/CaviarDreams_Bold.woff') format('woff'),
         url('/fonts/CaviarDreams_Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Lato';
    src: url('/fonts/Lato-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Lato';
    src: url('/fonts/Lato-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}



.min-h-screen{
position:relative;
}
.fi-simple-layout.flex.min-h-screen.flex-col.items-center .bg-white:not(.fi-checkbox-input):not(.fi-btn) {
background-color:#ffffffaa;
backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}
.fi-simple-header-heading{
    font-size: 18px;
    font-weight: bold;
    font-family: 'Caviar Dreams', sans-serif;
    text-transform:uppercase;
}
.fi-sidebar-header .fi-logo{
height:2.5rem !important;
}
.fi-logo {
height:7.5rem !important;}

.bg-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2;
}

.min-h-screen::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.25);
    z-index:-1;
}
:root.dark .min-h-screen::before{
    background:rgba(0,0,0,.6);
}
.fi-ac button{
background-color:#1a1a1a;
border:1px solid #1a1a1a !important;
border-radius:0 !important;
padding:8px 20px !important;
color:#fff;
transition: background-color 0.35s ease;
}
.fi-ac button:hover{
background-color:#2a2a2a;
}
.fi-btn-label{
    font-family: 'Lato', -apple-system, sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}
.fi-btn-label::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.8);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.fi-btn:hover .fi-btn-label::after{
    width: 100%;
}
.bg-custom-600 {
background: #1a1a1a !important;
transition: background-color 0.35s ease;
}
.bg-custom-600:hover {
background: #2a2a2a !important;
}
.fi-btn.bg-custom-600 {
border:1px solid #1a1a1a !important;
border-radius:0 !important;
padding:8px 20px !important;
}

/* ============================================================
   Quick Calculator — floating utility, unrelated to app data
   ============================================================ */
.qc-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 9990;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    background: #79665b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, background 0.15s ease;
}
.qc-fab:hover {
    background: #8f7a6d;
    transform: scale(1.05);
}

.qc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9995;
}

.qc-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 320px;
    max-width: 90vw;
    background: #1f2023;
    color: #f4f2f0;
    z-index: 9999;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}
.qc-panel-open {
    transform: translateX(0);
}

.qc-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-family: 'Caviar Dreams', sans-serif;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.qc-close {
    background: transparent;
    border: none;
    color: #f4f2f0;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 9999px;
    line-height: 0;
}
.qc-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.qc-display {
    background: #111214;
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: right;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    overflow-x: auto;
    white-space: nowrap;
}

.qc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

.qc-btn {
    background: #2c2d31;
    color: #f4f2f0;
    border: none;
    border-radius: 0.75rem;
    padding: 0.9rem 0;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease;
}
.qc-btn:hover {
    background: #3a3b40;
}
.qc-btn-wide {
    grid-column: span 2;
    text-align: left;
    padding-left: 1.5rem;
}
.qc-btn-fn {
    background: #3d3529;
    color: #dbcfc1;
}
.qc-btn-fn:hover {
    background: #4a4033;
}
.qc-btn-op {
    background: #79665b;
    color: #fff;
}
.qc-btn-op:hover {
    background: #8f7a6d;
}
.qc-btn-eq {
    background: #dbcfc1;
    color: #2c2417;
    font-weight: 700;
}
.qc-btn-eq:hover {
    background: #e6ddd0;
}

@media (max-width: 480px) {
    .qc-panel {
        width: 100vw;
    }
}

/* Menu Customizer (booking "Customize Menu" modal) */
.ec-mc {
    font-size: 0.875rem;
    color: #2c2417;
}
.ec-mc-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.ec-mc-label {
    font-weight: 600;
}
.ec-mc-select {
    border: 1px solid #d6cdbf;
    border-radius: 0.375rem;
    padding: 0.375rem 2rem 0.375rem 0.5rem;
    background-color: #fff;
    color: #2c2417;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2379665b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center !important;
    background-size: 1rem !important;
}
.ec-mc-hint {
    color: #79665b;
    font-size: 0.8rem;
}
.ec-mc-columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
}
@media (max-width: 900px) {
    .ec-mc-columns {
        grid-template-columns: 1fr;
    }
}
.ec-mc-pool {
    max-height: 26rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}
.ec-mc-category {
    margin-bottom: 0.75rem;
}
.ec-mc-category-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-weight: 700;
    color: #4a4033;
    margin-bottom: 0.375rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ec-mc-min {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #a3564a;
    font-size: 0.75rem;
}
.ec-mc-pool-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.ec-mc-chip {
    background: #f5f0e6;
    border: 1px solid #e2d8c8;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    cursor: grab;
    user-select: none;
    font-size: 0.8rem;
}
.ec-mc-chip:hover {
    background: #ebe1cf;
    border-color: #d6cdbf;
}
.ec-mc-empty {
    color: #a39a8a;
    font-size: 0.8rem;
    font-style: italic;
}
.ec-mc-selected-pane {
    border: 1px solid #e2d8c8;
    border-radius: 0.5rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    background: #fbf9f5;
}
.ec-mc-selected-list {
    flex: 1;
    min-height: 12rem;
    max-height: 20rem;
    overflow-y: auto;
    border: 1px dashed #d6cdbf;
    border-radius: 0.375rem;
    padding: 0.5rem;
    margin-top: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.ec-mc-selected-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #e2d8c8;
    border-radius: 0.375rem;
    padding: 0.375rem 0.5rem;
    cursor: grab;
}
.ec-mc-drag-handle {
    color: #a39a8a;
}
.ec-mc-selected-cat {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #79665b;
    background: #f5f0e6;
    border-radius: 0.25rem;
    padding: 0.1rem 0.4rem;
}
.ec-mc-selected-name {
    flex: 1;
}
.ec-mc-remove {
    color: #a3564a;
    font-size: 1.1rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0.25rem;
}
.ec-mc-remove:hover {
    color: #7a3a30;
}
.ec-mc-status {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #3f7a4a;
    font-weight: 600;
}
.ec-mc-status-bad {
    color: #a3564a;
}

/* ============================================================
   Dark mode — luxury black & gold
   Light mode keeps the warm cream/brand-brown look. Dark mode is
   a deliberately different palette (not just a darkened version of
   the brown theme): near-black surfaces, white text, gold accents.
   Overriding Filament's --gray-* and --primary-* CSS variables
   carries through to every component that already uses
   dark:bg-gray-900 / text-primary-600 etc. — no per-component
   patching needed.
   ============================================================ */
:root.dark {
    --gray-950: 8, 8, 9;
    --gray-900: 17, 16, 16;
    --gray-800: 27, 25, 24;
    --gray-700: 41, 38, 36;

    --primary-50: 251, 243, 221;
    --primary-100: 246, 230, 186;
    --primary-200: 237, 205, 122;
    --primary-300: 224, 182, 86;
    --primary-400: 212, 161, 60;
    --primary-500: 194, 142, 46;
    --primary-600: 166, 118, 35;
    --primary-700: 130, 93, 28;
    --primary-800: 97, 69, 22;
    --primary-900: 71, 51, 15;
    --primary-950: 43, 30, 9;
}

/* Gray-colored row action links (Edit, View Breakdown, etc.) — give them a
   themed hover color instead of Filament's flat default gray-on-gray. */
.fi-link.fi-color-gray:hover,
.fi-link.fi-color-gray:hover * {
    color: #96793f !important;
}

/* Dark mode topbar — translucent black over the video background instead of
   Filament's default solid/blurred bar. The actual visible background lives
   on the inner <nav>, not the .fi-topbar wrapper — targeting the wrapper
   does nothing visible. The blur is applied via a ::before layer rather
   than directly on <nav> itself, because backdrop-filter on an element
   creates a new containing block for position:fixed descendants — and the
   user-menu dropdown (a fixed-position panel) lives inside this <nav>.
   Filtering <nav> directly breaks that dropdown from opening correctly. */
:root.dark .fi-topbar nav {
    background-color: transparent !important;
    position: relative;
}
:root.dark .fi-topbar nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: -1;
    pointer-events: none;
}

/* The brand logo is solid black line art on a transparent background,
   drawn for light backgrounds. On the near-black dark theme it reads as
   an illegible smudge, so invert it to white in dark mode instead of
   shipping a second logo asset. */
:root.dark .fi-logo {
    filter: invert(1);
}