/* color system (tailwind-like) */
:root{
    --red-50:#fef2f2; --red-100:#fee2e2; --red-600:#dc2626; --red-700:#b91c1c; --red-800:#991b1b; --red-900:#7f1d1d;
    --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-400:#9ca3af;
    --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827;
    --green-50:#ecfdf5; --green-100:#dcfce7; --yellow-50:#fffbeb; --yellow-100:#fef3c7; --blue-100:#dbeafe;
    --gold:#eab308;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial; line-height:1.5}

/* helpers */
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.flex{display:flex}
.grid{display:grid;gap:24px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.center{text-align:center}
.mb-3{margin-bottom:12px}
.gap-2{gap:8px}
.gap-3{gap:12px}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.w-full{width:100%}
.text-gray-800{color:var(--gray-800)}
.white{color:#fff}
.red{color:var(--red-600)}
.gold{color:var(--gold)}

/* icons */
.icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}
.icon.sm{width:18px;height:18px}
.icon.lg{width:36px;height:36px}

/* header */
.header{
    color:#fff;
    /*background:linear-gradient(90deg, var(--red-700), var(--gray-900));*/
    background:#da3030;
    padding:8px 0;
    position:sticky;top:0;z-index:50;
    box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.title{font-weight:800;font-size:24px;letter-spacing:.3px}
.nav-links{display:none;gap:24px}
.nav-link{background:transparent;border:0;color:#fff;font-weight:600}
.nav-link:hover{color:#fecaca}
.auth{display:none;align-items:center;gap:12px}
.authed{color:#e5e7eb; text-align: end;}

.mobile-toggle{background:transparent;border:0;display:inline-flex}
.mobile-menu{display:none;background:#1f2937;border:1px solid #374151;border-radius:12px;margin-top:12px;padding:16px}
.mobile-link{background:transparent;border:0;color:#fff;font-weight:600;text-align:left;padding:8px 0}
.mobile-auth{border-top:1px solid #374151;margin-top:12px;padding-top:12px}
@media (min-width: 1000px){
    .nav-links{display:flex}
    .auth{display:flex}
    .mobile-toggle{display:none}
    .mobile-menu{display:none !important}
}

/* buttons */
.btn{border:0;border-radius:10px;padding:10px 16px;font-weight:700;transition:.15s;display:inline-flex;gap:8px;align-items:center}
.btn-red{background:var(--red-600);color:#fff}
.btn-red:hover{background:var(--red-700)}
.btn-white{background:#fff;color:var(--red-600)}
.btn-white:hover{background:var(--gray-100)}
.btn-dark{background:#111827;color:#fff}
.btn-dark:hover{background:#0b1220}

/* hero */
.hero{
    /*background:linear-gradient(180deg, var(--red-700), var(--red-900));*/
    background: url("https://images.unsplash.com/photo-1565891741441-64926e441838?q=80&w=1742&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    color:#fff;    background-size: cover;
    /*padding: 72px 0;*/
    background-position: center;
}
.hero>div{
    backdrop-filter: blur(3px) brightness(0.6);
    height: 100%;
    /*padding: 72px 0;*/
    padding: 82px 0;
    max-width: unset !important;
}
.hero-title{font-size:44px;font-weight:900;margin:0 0 12px}
.hero-sub{max-width:760px;margin:0 auto 20px;color:#f3f4f6}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* cards & stats */
.card{background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:22px}
.stats{background:#fff;padding:42px 0}
.stat-num{font-size:28px;font-weight:800}
.stat-cap{text-transform:uppercase;color:var(--gray-600);font-size:12px;letter-spacing:.8px}

/* badges (status) */
.badge{border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;display:inline-flex;align-items:center}
.badge-free{background:var(--blue-100);color:#1e40af}
.badge-reserved{background:var(--yellow-100);color:#92400e}
.badge-assigned{background:var(--green-100);color:#065f46}
.badge-cancelled{background:#fecaca;color:#7f1d1d}

/* sections */
.section{padding:40px 20px}
.section-title{color:var(--red-600);display:flex;align-items:center;gap:8px;font-size:22px;font-weight:800}

/* tabs */
.tabs{display:flex;gap:8px;border-bottom:1px solid var(--gray-200);margin:8px 0 16px}
.tab{padding:8px 12px;border-radius:10px 10px 0 0;border:1px solid transparent;color:var(--gray-600);font-weight:700}
.tab:hover{color:var(--red-600)}
.tab.active{background:var(--red-600);color:#fff}

/* table */
.table-wrap{overflow:auto;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.08);margin-bottom:22px}
.table{width:100%;border-collapse:collapse}
.table thead{background:var(--gray-50)}
.table th,.table td{padding:12px 16px;border-bottom:1px solid var(--gray-200);white-space:nowrap}
.table th{font-size:12px;letter-spacing:.8px;color:var(--gray-600);text-transform:uppercase}
.sortable{user-select:none;cursor:pointer}
.table tr:hover{background:#fafafa}
tr.assigned{background:var(--green-50)}
tr.reserved{background:var(--yellow-50)}
tr.cancelled{background:var(--red-50)}

/* “how it works” / benefits */
.h2{font-size:28px;font-weight:900;margin:0 0 18px}
.h3{font-weight:800;margin:0 0 6px}
.circle{width:64px;height:64px;border-radius:999px;background:#fee2e2;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.benefit{display:flex;gap:12px;align-items:flex-start}
.bullet{background:#fee2e2;color:var(--red-600);border-radius:999px;padding:10px; height: 44px;
    width: 44px;
    margin-bottom: auto;}

/* testimonials */
.stars{display:flex;gap:4px;margin-bottom:8px}
.author{margin-top:12px}

/* cta */
.cta{background:var(--red-700);color:#fff;padding:52px 0}

/* footer */
.footer{background:var(--gray-900);color:#fff;padding:42px 0;margin-top:auto}
.footer .links{display:flex;flex-direction:column;gap:6px}
.footbar{border-top:1px solid #1f2937;margin-top:22px;padding-top:22px}

/* inputs */
.input, .select{width:100%;padding:10px 12px;border:1px solid var(--gray-300);border-radius:10px;outline:none}
.input:focus, .select:focus{border-color:var(--red-600);box-shadow:0 0 0 3px #fca5a5}
.label{font-weight:700;margin-bottom:6px;color:var(--gray-700);display:block}
.muted{color:var(--gray-600)}

/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}
.modal{background:#fff;border-radius:14px;max-width:900px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 20px 40px rgba(0,0,0,.2)}
.modal-header{z-index: 3;position:sticky;top:0;background:var(--gray-100);padding:16px;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between}
.modal-body{padding:16px}

/* forms in modal: small grid helper */
.grid-1{grid-template-columns:1fr}

/* utility */
.bg-gray-100{background:var(--gray-100)}
.text-gray-800{color:var(--gray-800)}
.white{color:#fff}
.w-full{width:100%}
.hide{display:none}

/* assets/app.css */
.bid-row.winner { border: 2px solid #d4af37; border-radius: 8px; }
.bid-badge { font-size: 12px; padding: 2px 6px; border: 1px solid #d4af37; border-radius: 999px; margin-left: 8px; }

#ordersTable .icon svg{
    height: 18px;
}


:root{
    --red:#b91c1c; --red-dark:#7f1d1d; --bg:#f5f6f8; --muted:#6b7280; --text:#111827;
    --ok:#15803d; --warn:#b45309; --bad:#b91c1c; --line:#e5e7eb;
    --win:#d4af37;
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,Segoe UI,Arial}
a{color:var(--red)}
/*.container{max-width:1100px;margin:24px auto;padding:0 16px}*/
.site-header,.site-footer{background:#fff;border-bottom:1px solid var(--line);padding:12px 16px}
.site-footer{border-top:1px solid var(--line);border-bottom:none;text-align:center;color:var(--muted)}
.site-header{display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:8px;font-size:18px}
.nav{margin-left:auto;display:flex;gap:16px}
.auth{display:flex;gap:8px;align-items:center}
/*.btn{background:#e5e7eb;border:1px solid #d1d5db;border-radius:8px;padding:8px 12px;cursor:pointer}*/
.btn:hover{filter:brightness(.98);transition: .4s}
/*.btn-primary{background:var(--red);border-color:var(--red-dark);color:#fff}*/
/*.btn-outline{background:#fff;border-color:var(--red);color:var(--red)}*/
.btn-success, .btn-green{background:#16a34a;border-color:#15803d;color:#fff}
.btn-warning{background:#f59e0b;border-color:#b45309;color:#fff}
.icon-btn{background:transparent;border:none;font-size:22px;cursor:pointer}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:16px}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.card-info{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-left:4px solid var(--ok)}
.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.badge{z-index:2;display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid #fff;    margin-left: 4px;
    position: relative;
    top: -1px;
}
.badge-success{border-color:#bbf7d0;background:#ecfdf5;color:#065f46}
.badge-winner{    border-color: #ffffff;
    background: #ffe75e;
    color: #745900;}
.list{display:flex;flex-direction:column;gap:8px}
.list .row{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fafafa}
.list .row.winner{border-color:var(--win);box-shadow:0 0 0 2px rgba(212,175,55,.15) inset}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid-inline{display:flex;gap:8px;align-items:end;margin-top:8px}
.mt{margin-top:16px}
/*.modal{position:fixed;inset:0;display:none:margin: auto;}*/
.status-chip{padding:4px 8px;border-radius:8px;font-size:12px;display:inline-block}
.status-free{background:#eff6ff;color:#1d4ed8}
.status-reserved{background:#fffbeb;color:#b45309}
.status-assigned{background:#ecfdf5;color:#065f46}
.status-cancelled{background:#fef2f2;color:#991b1b}


/* ========= Mobile Drawer (global) ========= */
:root{
    --drawer-w: 320px;
    --overlay: rgba(15, 23, 42, 0.55); /* slate-900/55% */
}

.no-scroll { overflow: hidden; }

.mobile-backdrop {
    position: fixed; inset: 0; background: var(--overlay);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
    z-index: 800;
}

.mobile-backdrop.open { opacity: 1; pointer-events: auto; }

.mobile-drawer {
    position: fixed; top: 0; right: 0; height: 100dvh; width: var(--drawer-w);
    max-width: 90vw; background: #0f172a; /* slate-900 */
    color: #fff; transform: translateX(100%);
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
    z-index: 801; display: flex; flex-direction: column;
    box-shadow: -12px 0 30px rgba(0,0,0,.25);
}
.mobile-drawer.open { transform: translateX(0); }

.mobile-drawer .drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-drawer .brand{
    display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px;
}
.mobile-drawer .drawer-body{ padding:12px 16px; flex:1; overflow:auto; }
.mobile-drawer .drawer-foot{ padding:14px 16px; border-top:1px solid rgba(255,255,255,.08); }

.mobile-drawer .menu-col{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.mobile-drawer .menu-title{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; opacity:.6; margin:10px 0 4px; }
.mobile-drawer .menu-link{
    display:flex; align-items:center; gap:10px; padding:12px; border-radius:10px;
    background: rgba(255,255,255,.04); color:#fff; text-align:left; border:0;
}
.mobile-drawer .menu-link:hover{ background: rgba(255,255,255,.08); }
.mobile-drawer .menu-link .icon svg{ width:18px; height:18px; }

.mobile-drawer .btn-block{ width:100%; justify-content:center; }

/* ========= Hamburger button ========= */
.hamburger {
    --size: 22px;
    width: var(--size); height: var(--size); display:inline-grid; place-items:center;
    background: transparent; border: 0; padding: 0; cursor: pointer;
    margin-left: 16px;
}
.hamburger .bars{
    position: relative; width: 22px; height: 14px;
}
.hamburger .bars::before,
.hamburger .bars::after,
.hamburger .bar {
    content:''; position:absolute; left:0; right:0; height:2px; background:#fff; border-radius:2px;
    transition: transform .28s ease, opacity .2s ease, top .28s ease, bottom .28s ease;
}
.hamburger .bar { top:6px; }
.hamburger .bars::before { top:0; }
.hamburger .bars::after  { bottom:0; }

.hamburger.active .bar { opacity:0; }
.hamburger.active .bars::before { top:6px; transform: rotate(45deg); }
.hamburger.active .bars::after  { bottom:6px; transform: rotate(-45deg); }

/* keep header layout as before but ensure the mobile toggle hides on md+ */
@media (min-width: 1000px){
    .hamburger { display:none; }
}

/* Ensure drawer buttons match your existing button system */
.btn.btn-dark { background:#1f2937; color:#fff; border:0; }
.btn.btn-dark:hover { background:#111827; }

.user-profile a strong{margin: auto}
.user-profile a{
    text-decoration: none;
    color: #fff;
    flex: 0;
    display: flex
}

.user-profile svg{    height: 24px;
    margin: auto;}
.user-profile .icon{
    border-radius: 999px;
    background: #ddd;
    height: 40px;
    width: 40px;
    margin-top: auto;
    margin-bottom: auto;
}
.user-profile{
    width: fit-content;
    display: flex
;
    flex-direction: row;
    gap: 10px;
    place-content: flex-end;

}

@media screen and (max-width: 1000px) {
    .user-container-profile{display: none}
    .auth{
        margin-left: auto;
    }
    .auth #btnLogout{
        display: none;
    }
}

.modal-footer{
    padding: 0 15px;
}

.user-profile strong{
    text-wrap: nowrap;
}

@media screen and (max-width: 1100px) {
    .grid-2{
        grid-template-columns:repeat(1,minmax(0,1fr));
    }
    .grid-4{
        grid-template-columns:repeat(2,1fr)
    }
}
@media screen and (max-width: 480px) {
    #btnOpenLogin {
        display: none;
    }
}
@media screen and (max-width: 440px) {

    .grid-4 {
        grid-template-columns:repeat(1, 1fr) !important;
    }
}
@media screen and (max-width: 560px) {
    .btn-users-settings{
        display: none;
    }
    .grid-3{

        grid-template-columns:repeat(2,1fr)
    }

}
@media screen and (max-width: 580px) {

    .grid-3{

        grid-template-columns:repeat(1,1fr) !important;
    }
}


#noteEdit{
    border: 0px;
    width: 100%;
    height: 5rem;
}




/* === Collapsible edit block === */
.collapsible {
    border-radius: 12px;
}

.collapsible-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    background: transparent;
    border: 0;
    padding: 10px 12px;
    font-weight: 800;
    cursor: pointer;
    color: var(--gray-800);
}

.collapsible-header .title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.collapsible-header .chev {
    display: inline-flex;
    width: 18px;
    height: 18px;
    transition: transform 200ms ease;
    transform: rotate(-90deg); /* closed */
}

.collapsible.open .collapsible-header .chev {
    transform: rotate(0deg); /* open */
}

.collapsible-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 240ms ease;
}

.collapsible.open .collapsible-body {
    max-height: 1800px; /* big enough to show full form */
}

.collapsible-body .inner {
    padding: 12px;
    border-top: 1px solid var(--gray-200);
}

/*DAVE*/