/* ────────────────────────────────────────────── THE AMSTERDAMIAN — shared stylesheet ────────────────────────────────────────────── */ :root{ --black:#0a0806; --dark:#110e0a; --rich:#1a1510; --card:#1f1a14; --gold:#c9a84c; --gold-light:#e8c97a; --gold-dim:#8a6f32; --cream:#f5edd8; --cream-dim:#c4b896; --text:#d8cdb8; --muted:#7a7060; --border:rgba(201,168,76,0.2); --border-hi:rgba(201,168,76,0.5); --red:#8b2020; --green:#2a5a1a; /* Semantic accent palette. Status pills, badges, schedule flags, checklist note types, etc. all reach for these instead of raw hex so a light-mode override (below) flips every accent at once. Naming: = legible foreground/icon color -bg = translucent panel background -bd = subtle border tint */ --accent-success: #8fc46a; --accent-success-bg: rgba(95,160,90,.12); --accent-success-bd: rgba(143,196,106,.30); --accent-warn: #e8c97a; --accent-warn-bg: rgba(132,106,27,.30); --accent-warn-bd: rgba(201,168,76,.40); --accent-danger: #f5b5b5; --accent-danger-bg: rgba(139,32,32,.30); --accent-danger-bd: rgba(200,80,80,.40); --accent-info: #7ab5e8; --accent-info-bg: rgba(122,181,232,.10); --accent-info-bd: rgba(122,181,232,.30); /* Typography stacks. Display serif for headlines; sans-serif for UI density on dashboards; mono for time/date/label runs. */ --display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --ui: 'Manrope', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* ── Light theme (dashboard-only, opt-in via toggle) ───────────────── Overrides the same variable names so the existing rules across the stylesheet automatically pick up new values. Names are kept (--black, --cream, etc.) for minimal-diff churn — semantically they mean "darkest/lightest in the active theme," not literal colors. Gold stays untouched as the brand anchor; the dark/cream scale flips. Activated by setting `data-theme="light"` on the element. JS handles persistence (localStorage) and the inline script in admin.html / staff.html applies it before paint to avoid a flash of dark theme. */ html[data-theme="light"] { --black: #e8e6e1; /* page background — slightly warmer & darker grey */ --dark: #f0eeea; /* secondary surfaces */ --rich: #f5f3ee; /* tertiary surfaces (header/footer strips) */ --card: #ffffff; /* card backgrounds — pure white for crisp contrast */ --cream: #1f1a14; /* primary text — was light, now near-black */ --cream-dim:#4a4035; /* secondary text */ --text: #1f1a14; --muted: #8a8275; --border: rgba(40, 30, 10, 0.18); --border-hi:rgba(138, 111, 50, 0.55); --gold-dim: #6e5824; /* darker gold reads better on light bg */ /* Semantic accents flipped to darker variants — same purpose, but legible against light backgrounds. */ --accent-success: #2f6f1f; --accent-success-bg: rgba(47,111,31,.13); --accent-success-bd: rgba(47,111,31,.40); --accent-warn: #8a6a18; --accent-warn-bg: rgba(138,106,24,.16); --accent-warn-bd: rgba(138,106,24,.45); --accent-danger: #a52a2a; --accent-danger-bg: rgba(165,42,42,.12); --accent-danger-bd: rgba(165,42,42,.45); --accent-info: #1c5e94; --accent-info-bg: rgba(28,94,148,.10); --accent-info-bd: rgba(28,94,148,.40); } /* Logo inversion in light mode. The logo PNG is white/cream on a transparent background, so on a light page bg it would disappear. Using invert(1) + hue-rotate(180deg) preserves the gold tones in the brand mark while flipping light pixels to dark. The .pwa-install-trigger is excluded — its icon stays as-is. */ /* Logo inversion runs only when the BACKGROUND is light. The logo PNG is cream-on-transparent, so it disappears on light bgs without an invert. Hawthorne defaults to dark (Slate) — so DON'T invert there. Only when Hawthorne flips to light (Linen via the personal toggle) do we invert. */ html[data-theme="light"] .adm-sb-logo img, html[data-brand-theme="hawthorne"][data-theme="light"] .adm-sb-logo img, html[data-brand-theme="custom"][data-theme="light"] .adm-sb-logo img { filter: invert(1) hue-rotate(180deg); } /* Several dashboard surfaces hardcode dark backgrounds rather than using the theme variables (legacy from before light mode existed). These overrides flip them so light mode renders correctly without refactoring every rule. */ /* Page background of the dashboard */ html[data-theme="light"] .adm-wrap, html[data-brand-theme="hawthorne"] .adm-wrap, html[data-brand-theme="custom"] .adm-wrap { background: var(--black); } /* Today panel's hero card — was a dark-to-darker gradient. In light mode we use the standard --card surface so it sits naturally above the page bg. */ html[data-theme="light"] .today-hero, html[data-brand-theme="hawthorne"] .today-hero, html[data-brand-theme="custom"] .today-hero { background: var(--card); } /* Sidebar surface — the existing rule pulls from --dark in light mode, but we want a touch of warmth + a clear edge against the slightly different page bg. */ html[data-theme="light"] .adm-sidebar, html[data-brand-theme="hawthorne"] .adm-sidebar, html[data-brand-theme="custom"] .adm-sidebar { background: var(--card); border-right: 1px solid var(--border); } /* Modal overlays are pure-black-with-alpha by default. Keep them dark in light mode too (overlays are meant to recede the bg) but slightly softer. */ html[data-theme="light"] .modal-ov, html[data-brand-theme="hawthorne"] .modal-ov, html[data-brand-theme="custom"] .modal-ov { background: rgba(20, 20, 20, 0.6); } /* (Per-state .todo-status colors now flow from the semantic accent palette defined in :root + html[data-theme="light"] above, so no hardcoded overrides needed here.) */ /* Message bubbles hardcode dark backgrounds for the bubble surfaces so they pop against the dark dashboard. In light mode we replace each bubble bg with a soft tint and bump the borders so bubbles still feel distinct. The "mine" bubble's gold gradient holds up on light, just with darker tones for legibility. */ /* Speakeasy light-mode bubble overrides — force white bg + dark text. The :root msg-bubble defaults are dark-brown for Speakeasy's dark look, which would be unreadable on Speakeasy's light theme. */ html[data-theme="light"]:not([data-brand-theme="hawthorne"]):not([data-brand-theme="custom"]) .msg-bubble { background: #ffffff; border-color: rgba(40, 30, 10, 0.16); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } html[data-theme="light"]:not([data-brand-theme="hawthorne"]):not([data-brand-theme="custom"]) .msg-bubble.mine { background: linear-gradient(180deg, rgba(201, 168, 76, 0.22), rgba(201, 168, 76, 0.10)); border-color: var(--gold); color: #1f1a14; } html[data-theme="light"]:not([data-brand-theme="hawthorne"]):not([data-brand-theme="custom"]) .msg-bubble.mine, html[data-theme="light"]:not([data-brand-theme="hawthorne"]):not([data-brand-theme="custom"]) .msg-bubble.mine * { color: #1f1a14; } html[data-theme="light"]:not([data-brand-theme="hawthorne"]):not([data-brand-theme="custom"]) .msg-bubble.broadcast { background: var(--accent-info-bg); border-color: var(--accent-info-bd); } html[data-theme="light"]:not([data-brand-theme="hawthorne"]):not([data-brand-theme="custom"]) .msg-bubble.broadcast .msg-bubble-body { color: var(--accent-info); } /* Hawthorne (Slate + Linen) bubble styles — variable-driven so they auto-adapt to whichever light/dark mode is active. --card is the surface (white in Linen, slate in Slate); --cream is the inverse ink color; --gold is the brand accent. The "mine" bubble blends the accent INTO the card surface so it reads as a subtle tinted variant of the normal bubble rather than a separate component. */ html[data-brand-theme="hawthorne"] .msg-bubble, html[data-brand-theme="custom"] .msg-bubble { background: var(--card); border-color: var(--border); color: var(--cream); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } html[data-brand-theme="hawthorne"] .msg-bubble *, html[data-brand-theme="custom"] .msg-bubble * { color: var(--cream); } html[data-brand-theme="hawthorne"] .msg-bubble.mine, html[data-brand-theme="custom"] .msg-bubble.mine { background: color-mix(in oklch, var(--gold) 18%, var(--card)); border-color: var(--gold); } html[data-brand-theme="hawthorne"] .msg-bubble.mine, html[data-brand-theme="hawthorne"] .msg-bubble.mine *, html[data-brand-theme="custom"] .msg-bubble.mine, html[data-brand-theme="custom"] .msg-bubble.mine * { color: var(--cream); } html[data-brand-theme="hawthorne"] .msg-bubble.broadcast, html[data-brand-theme="custom"] .msg-bubble.broadcast { background: var(--accent-info-bg); border-color: var(--accent-info-bd); } html[data-brand-theme="hawthorne"] .msg-bubble.broadcast .msg-bubble-body, html[data-brand-theme="custom"] .msg-bubble.broadcast .msg-bubble-body { color: var(--accent-info); } /* The bubble meta (timestamps, sender name) needs dimmer text — same muted variable our other components use. */ html[data-brand-theme="hawthorne"] .msg-bubble-meta, html[data-brand-theme="custom"] .msg-bubble-meta { color: var(--cream-dim); } html[data-brand-theme="hawthorne"] .msg-bubble-meta strong, html[data-brand-theme="custom"] .msg-bubble-meta strong { color: var(--gold); } /* The email preview pane is intentionally dark — that's how the email will render to recipients. Keep it dark in both themes by force-applying the dark surface inside the panel. */ html[data-theme="light"] .eb-prev { background: #0a0806; border-color: rgba(201, 168, 76, 0.4); } /* Image cropper stage stays black — it's a media canvas, intentional. */ /* Group avatar pile gradient — keep readable on light cards. */ html[data-theme="light"] .emp-photo-group, html[data-brand-theme="hawthorne"] .emp-photo-group, html[data-brand-theme="custom"] .emp-photo-group { background: linear-gradient(135deg, #d8d3c7, #b8b1a3); color: #1f1a14; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--black); color:var(--text); font-family:'Cormorant Garamond',serif; font-size:18px; line-height:1.7; min-height:100vh; } .hidden{display:none!important;} a{color:inherit;text-decoration:none;} /* ── NAV ── Split horizontal layout (BotB-style): all-caps Cinzel links on each side, prominent logo in the middle as the brand centerpiece. */ :root{--nav-h:160px;} nav.site-nav{ position:fixed;top:0;left:0;right:0;z-index:1000; background:rgba(10,8,6,0.97); border-bottom:1px solid var(--border); padding:1.2rem 2rem; display:flex;flex-direction:row;align-items:center;justify-content:center; gap:2.4rem;height:auto; } .nav-logo{cursor:pointer;display:block;text-align:center;flex:0 0 auto;} .nav-logo img{ height:118px;width:auto; opacity:.97;transition:opacity .3s;display:block;margin:0 auto; } .nav-logo img:hover{opacity:1;} /* Sentence-case nav with underline-from-left animation on hover — BotB-flavored. Larger, less aggressive tracking than the old uppercase pattern. The `::after` pseudo-element draws a 1px gold line beneath each link that grows in from the left on hover/active. */ .nav-links{ display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap; } .nav-links-left{flex:1;justify-content:flex-end;} .nav-links-right{flex:1;justify-content:flex-start;} .nav-links a{ position:relative; font-family:'Cinzel',serif;font-weight:400; /* Bumped from .74rem to .96rem (~30% larger) for a more confident, less timid header. Still well within range for Cinzel as a display face. If the labels start crowding on narrow desktop widths (~1280-1366px), we can either: • drop letter-spacing from .16em → .12em (subtle de-crowd) • OR tighten .nav-links gap from 1.5rem to 1.2rem Both kick in only if the user complains. */ font-size:.96rem;letter-spacing:.16em;text-transform:uppercase; color:var(--cream);cursor:pointer;transition:color .25s; padding:.25rem 0; } .nav-links a::after{ content:'';position:absolute;left:0;bottom:-2px; width:100%;height:1px;background:var(--gold); transform:scaleX(0);transform-origin:left center; transition:transform .35s ease; } .nav-links a:hover{color:var(--gold);} .nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);} .nav-links a.active{color:var(--gold);} .nav-cta{ /* legacy, no longer rendered in nav — kept for backward compat */ font-family:'Josefin Sans',sans-serif;font-weight:300; font-size:.62rem;letter-spacing:.24em;text-transform:uppercase; background:transparent;border:1px solid var(--gold-dim);color:var(--gold); padding:.55rem 1.3rem;cursor:pointer;transition:all .3s; } .nav-cta:hover{background:var(--gold);color:var(--black);border-color:var(--gold);} /* Hero CTA — outlined gold button, more visually prominent than the tiny .text-link variant. Used on the homepage hero where Reserve a Table is the dominant call-to-action. */ .btn-hero{ display:inline-block; font-family:'Josefin Sans',sans-serif;font-weight:300; font-size:.85rem;letter-spacing:.42em;text-transform:uppercase; color:var(--gold);background:transparent; border:1px solid var(--gold); padding:1.15rem 2.8rem;cursor:pointer; transition:background .3s,color .3s; } .btn-hero:hover{background:var(--gold);color:var(--black);} .nav-toggle{ display:none;background:none;border:none;color:var(--gold); font-size:1.4rem;cursor:pointer;position:absolute;top:50%;right:1.1rem; transform:translateY(-50%); } @media (max-width:880px){ :root{--nav-h:108px;} nav.site-nav{ padding:1rem 1.1rem;flex-direction:row;justify-content:center;align-items:center; position:fixed; } .nav-logo img{height:78px;} .nav-toggle{display:block;} /* Hide the split groups by default on mobile — the logo stands alone. */ .nav-links-left,.nav-links-right{display:none;} /* When the user taps the hamburger, the nav itself becomes a column and reveals both link groups stacked beneath the logo. Single gap on the parent gives uniform spacing — items in left, the boundary between left and right, and items in right all feel identical. */ nav.site-nav.open{ flex-direction:column;padding:1rem 1.1rem 1.6rem;gap:1.1rem; } nav.site-nav.open .nav-links-left, nav.site-nav.open .nav-links-right{ display:flex;flex-direction:column;width:100%; align-items:center;gap:1.1rem;padding:0;margin:0; flex:0 0 auto;justify-content:flex-start; } nav.site-nav.open .nav-logo{order:1;margin-bottom:.5rem;} nav.site-nav.open .nav-links-left{order:2;} nav.site-nav.open .nav-links-right{order:3;} } /* ── PAGE WRAPPER ── */ .page{padding-top:var(--nav-h);min-height:100vh;} /* ── HERO ── */ .hero{position:relative;height:calc(100vh - var(--nav-h));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;} .hero-bg{position:absolute;inset:0;background-position:center;background-size:cover;filter:brightness(.28);} .hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 65%,rgba(201,168,76,.07) 0%,transparent 60%);} .hero-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:0 1rem;} .hero-content img{ width:260px;max-width:80vw;height:auto; margin-bottom:1.4rem; } .orn{font-family:'Josefin Sans',sans-serif;font-size:.58rem;letter-spacing:.4em;color:var(--gold-dim);text-transform:uppercase;display:flex;align-items:center;gap:1.2rem;margin-bottom:.8rem;} .orn::before,.orn::after{content:'';display:block;width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim));} .orn::after{transform:scaleX(-1);} .hero-sub{font-family:'Josefin Sans',sans-serif;font-size:.58rem;letter-spacing:.5em;color:var(--gold);text-transform:uppercase;margin-bottom:1.6rem;} .hero-tag{font-size:1.05rem;font-style:italic;color:var(--cream-dim);margin-bottom:2.2rem;max-width:370px;} .hero-btns{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;} /* ── BUTTONS ── */ .btn-p,.btn-g,.f-submit,.nav-cta{ font-family:'Josefin Sans',sans-serif;font-weight:300; text-transform:uppercase;cursor:pointer;transition:all .3s; } .btn-p{ font-size:.6rem;letter-spacing:.25em; background:var(--gold);color:var(--black);border:none; padding:.85rem 2rem; } .btn-p:hover{background:var(--gold-light);} .btn-g{ font-size:.6rem;letter-spacing:.25em; background:transparent;color:var(--cream-dim);border:1px solid var(--muted); padding:.85rem 2rem; } .btn-g:hover{border-color:var(--cream-dim);color:var(--cream);} .scroll-hint{position:absolute;bottom:1.8rem;z-index:1;font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.28em;color:var(--muted);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.55rem;} .scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--gold-dim),transparent);animation:sp 2s infinite;} @keyframes sp{0%,100%{opacity:.3}50%{opacity:1}} /* ── PHOTO STRIP / ABOUT STRIP ── */ .photo-strip{display:grid;grid-template-columns:repeat(4,1fr);height:260px;} .ps-item{overflow:hidden;} .ps-item img{width:100%;height:100%;object-fit:cover;filter:brightness(.7);transition:transform .5s,filter .4s;} .ps-item:hover img{transform:scale(1.05);filter:brightness(.9);} .about-strip{background:var(--rich);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:3.5rem 3rem;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;} .about-col{text-align:center;} .about-col .num{font-family:'Playfair Display',serif;font-size:2.8rem;font-style:italic;color:var(--gold);display:block;margin-bottom:.3rem;} .about-col p{font-size:.87rem;color:var(--cream-dim);max-width:200px;margin:0 auto;} @media (max-width:760px){ .photo-strip{grid-template-columns:repeat(2,1fr);height:auto;} .ps-item{height:180px;} .about-strip{grid-template-columns:1fr;padding:2.4rem 1.5rem;gap:1.5rem;} } /* ── SECTIONS ── */ .section{padding:4.5rem 3rem;max-width:1100px;margin:0 auto;} @media (max-width:760px){.section{padding:3rem 1.3rem;}} .sec-label{font-family:'Josefin Sans',sans-serif;font-size:.56rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:.65rem;} .sec-title{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,3.5vw,3rem);font-weight:400;color:var(--cream);line-height:1.15;margin-bottom:1rem;} .divider{width:48px;height:1px;background:var(--gold-dim);margin:1rem 0;} .divider.c{margin:1rem auto;} /* ── PHOTO BREAK ── */ .photo-break{position:relative;height:400px;overflow:hidden;} .photo-break img{width:100%;height:100%;object-fit:cover;filter:brightness(.38);} .pb-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;} .pb-text h2{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,3.2rem);font-style:italic;color:var(--cream);margin-bottom:.8rem;} .pb-text p{font-size:.95rem;font-style:italic;color:var(--cream-dim);max-width:420px;} /* ── GALLERY ── */ .gallery{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem;margin:1.5rem 0;} .gallery img{width:100%;height:250px;object-fit:cover;filter:brightness(.78);transition:filter .3s;} .gallery img:hover{filter:brightness(1);} .gallery img.wide{grid-column:span 2;} @media (max-width:760px){.gallery{grid-template-columns:1fr 1fr;}.gallery img{height:170px;}.gallery img.wide{grid-column:span 2;}} /* ── PAGE HEADER (sub-pages) ── */ .page-hero{position:relative;height:240px;overflow:hidden;} .page-hero img{width:100%;height:100%;object-fit:cover;filter:brightness(.32);} .page-hero-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 1rem;} .page-hero-text h1{font-family:'Playfair Display',serif;font-size:clamp(2rem,5vw,2.8rem);font-style:italic;color:var(--cream);font-weight:400;} /* ── MENU ── */ .menu-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:2.5rem;} .menu-tab{font-family:'Josefin Sans',sans-serif;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;background:none;border:none;color:var(--muted);padding:.65rem 1.4rem;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .3s;} .menu-tab.active{color:var(--gold);border-bottom-color:var(--gold);} .menu-tab:hover{color:var(--cream-dim);} .menu-section-hidden{display:none;} .menu-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:2.5rem; position:relative; } .menu-grid::before{ content:'';position:absolute; left:50%;top:0;bottom:0; width:1px;background:rgba(201,168,76,.12); pointer-events:none; } @media (max-width:680px){ .menu-grid{grid-template-columns:1fr;column-gap:0;} .menu-grid::before{display:none;} } .mi{ padding:1.05rem 0; border-bottom:1px solid rgba(201,168,76,.1); display:flex;justify-content:space-between;align-items:flex-start;gap:1rem; } .mi > :first-child{flex:1;min-width:0;} .mi-body{min-width:0;flex:1;} .mi-name{font-family:'Playfair Display',serif;font-size:.98rem;color:var(--cream);line-height:1.25;} .mi-desc{font-size:.82rem;color:var(--muted);font-style:italic;margin-top:.18rem;line-height:1.45;} .mi-price{ font-family:'Josefin Sans',sans-serif;font-size:.82rem; color:var(--gold);white-space:nowrap; padding-top:.22rem;flex-shrink:0; } /* Generic two-column section that collapses on mobile (used for wine/beer split) */ .menu-2col{ display:grid; grid-template-columns:1fr 1fr; column-gap:2.5rem; position:relative; } .menu-2col::before{ content:'';position:absolute; left:50%;top:0;bottom:0; width:1px;background:rgba(201,168,76,.12); pointer-events:none; } @media (max-width:680px){ .menu-2col{grid-template-columns:1fr;column-gap:0;row-gap:1.5rem;} .menu-2col::before{display:none;} } .menu-subhead{ text-align:center;padding:.4rem 0 1rem; } .menu-subhead .icon{font-size:1.3rem;margin-bottom:.3rem;} .menu-subhead .lbl{ font-family:'Josefin Sans',sans-serif;font-size:.55rem; letter-spacing:.25em;text-transform:uppercase;color:var(--gold); } /* Feature card (image + text) that collapses on mobile */ .feature-split{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:center; margin-top:2.2rem; } .feature-split img{ width:100%;height:300px;object-fit:cover; filter:brightness(.85);display:block; } @media (max-width:680px){ .feature-split{grid-template-columns:1fr;gap:1.1rem;} .feature-split img{height:220px;} } /* HAPPY HOUR */ .hh-wrap{background:var(--rich);border:1px solid var(--border-hi);padding:2.5rem;margin-bottom:3rem;position:relative;overflow:hidden;} .hh-wrap::before{content:'HAPPY HOUR';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Playfair Display',serif;font-size:7rem;font-style:italic;color:rgba(201,168,76,.04);white-space:nowrap;pointer-events:none;letter-spacing:.05em;} .hh-top{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap;} .hh-badge{font-family:'Josefin Sans',sans-serif;font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;background:var(--gold);color:var(--black);padding:.28rem .75rem;} .hh-title{font-family:'Playfair Display',serif;font-size:1.5rem;font-style:italic;color:var(--cream);} .hh-time{font-family:'Josefin Sans',sans-serif;font-size:.56rem;letter-spacing:.2em;color:var(--gold-dim);text-transform:uppercase;margin-top:.1rem;} .hh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;} @media (max-width:760px){.hh-grid{grid-template-columns:1fr;}.hh-wrap{padding:1.6rem;}.hh-wrap::before{font-size:4rem;}} .hh-card{background:var(--card);border:1px solid var(--border);padding:1.1rem 1.4rem;} .hh-label{font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:.5rem;} .hh-item{font-size:.87rem;color:var(--cream-dim);padding:.22rem 0;border-bottom:1px solid rgba(201,168,76,.07);display:flex;justify-content:space-between;} .hh-item:last-child{border-bottom:none;} .hh-item span{color:var(--gold);font-family:'Josefin Sans',sans-serif;font-size:.78rem;} /* ── EVENTS LISTING ── */ .events-grid{display:grid;gap:1.1rem;} .ev-card-link{text-decoration:none;color:inherit;display:block;} .ev-card-v2{ background:var(--card);border:1px solid var(--border); padding:1.4rem 1.6rem; display:grid;grid-template-columns:minmax(0,260px) 1fr; gap:1.6rem;align-items:center; transition:border-color .3s; } .ev-card-v2:hover{border-color:var(--border-hi);} .ev-flyer-col{display:flex;align-items:center;justify-content:center;background:var(--rich);border:1px solid var(--border);padding:.8rem;} .ev-flyer-img{ width:100%;max-width:260px;height:auto; display:block;object-fit:contain; } .ev-date-block{ width:100%;text-align:center;padding:1.6rem 0; } .ev-info-col{display:flex;flex-direction:column;min-width:0;} .ev-tag-line{font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:.45rem;} .ev-card-title{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:1.4rem;color:var(--cream);line-height:1.2;margin-bottom:.4rem;} .ev-when-row{font-family:'Cormorant Garamond',serif;font-size:.92rem;color:var(--cream-dim);margin-bottom:.3rem;} .ev-detail-row{font-size:.85rem;color:var(--muted);font-style:italic;margin-bottom:.85rem;line-height:1.55;} .ev-month{font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);} .ev-day{font-family:'Playfair Display',serif;font-size:2.4rem;color:var(--cream);line-height:1;margin-top:.2rem;} .ev-cta-row{ display:flex;align-items:center;flex-wrap:wrap;gap:.8rem; margin-top:.6rem;padding-top:.7rem; border-top:1px solid rgba(201,168,76,.1); } .ev-price{font-family:'Playfair Display',serif;font-style:italic;color:var(--gold);font-size:1.25rem;} .ev-price-unit{font-family:'Cormorant Garamond',serif;font-style:normal;font-size:.75rem;color:var(--cream-dim);margin-left:.2rem;} .ev-stock-warn{ font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.18em; text-transform:uppercase;color:#e8c97a; border:1px solid rgba(232,201,122,.4);background:rgba(232,201,122,.1); padding:.18rem .45rem; } .ev-buy-btn{ margin-left:auto; font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.22em; text-transform:uppercase;background:var(--gold);color:var(--black); padding:.55rem 1.1rem;transition:background .2s; } .ev-card-link:hover .ev-buy-btn{background:var(--gold-light);} .ev-soldout-pill{ font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.22em; text-transform:uppercase;color:#f5b5b5; background:rgba(139,32,32,.18);border:1px solid rgba(224,92,92,.4); padding:.45rem 1rem; } .ev-rsvp-note{font-size:.78rem;color:var(--muted);font-style:italic;} @media (max-width:680px){ .ev-card-v2{grid-template-columns:1fr;padding:1.2rem 1.3rem;gap:1rem;} .ev-flyer-col{padding:.6rem;} .ev-flyer-img{max-width:340px;margin:0 auto;} .ev-date-block{padding:.8rem 0;} .ev-buy-btn{margin-left:0;width:100%;text-align:center;} } /* ── PRIVATE ── */ .priv-hero{position:relative;height:360px;overflow:hidden;} .priv-hero img{width:100%;height:100%;object-fit:cover;filter:brightness(.4);} .priv-hero-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2.5rem 1.5rem;} .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-bottom:2.5rem;} @media (max-width:680px){.feat-grid{grid-template-columns:1fr;}} .feat-card{background:var(--card);border:1px solid var(--border);padding:1.6rem;} .feat-title{font-family:'Playfair Display',serif;font-size:1rem;color:var(--cream);margin-bottom:.35rem;} .feat-desc{font-size:.86rem;color:var(--muted);} /* ── FORMS ── */ .res-wrap{max-width:600px;margin:0 auto;} .f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;} @media (max-width:580px){.f-row{grid-template-columns:1fr;}} .fg{display:flex;flex-direction:column;gap:.32rem;margin-bottom:.85rem;} .fg label{font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);} .fg input:not([type=checkbox]):not([type=radio]), .fg select,.fg textarea{ background:var(--card);border:1px solid var(--border);color:var(--cream); padding:.68rem .88rem;font-family:'Cormorant Garamond',serif;font-size:1rem; outline:none;transition:border-color .3s;appearance:none; } .fg input:not([type=checkbox]):not([type=radio]):focus, .fg select:focus,.fg textarea:focus{border-color:var(--gold-dim);} .fg select option{background:var(--dark);} .fg textarea{resize:vertical;min-height:85px;} .fg input[type=checkbox],.fg input[type=radio]{accent-color:var(--gold);cursor:pointer;} /* Structured "Hours of Operation" row in Site Settings. Layout: a Closed checkbox + open time + dash + close time, all on one row. Time inputs collapse to readable widths; on narrow screens the controls wrap and the dash hides for clarity. */ .fg.hours-row{margin-bottom:.6rem;} .hours-row-controls{ display:flex;align-items:center;gap:.6rem;flex-wrap:wrap; } .hours-row-controls input[type=time]{ background:var(--card);border:1px solid var(--border);color:var(--cream); padding:.5rem .65rem;font-family:'Cormorant Garamond',serif;font-size:.95rem; outline:none;transition:border-color .2s;appearance:none; min-width:7rem; color-scheme:dark; } .hours-row-controls input[type=time]:focus{border-color:var(--gold-dim);} /* When the day is marked Closed, mute and disable the time fields so the row visually communicates "no hours apply here." */ .hours-row-controls input[type=time]:disabled{ opacity:.4;cursor:not-allowed; } .hours-closed{ display:inline-flex;align-items:center;gap:.4rem;cursor:pointer; font-family:'Cormorant Garamond',serif;font-size:.92rem;color:var(--cream-dim); letter-spacing:0;text-transform:none; /* Override .fg label which would force this into Josefin caps. */ } .hours-closed input[type=checkbox]{margin:0;} .hours-dash{color:var(--gold-dim);font-size:1.1rem;line-height:1;padding:0 .15rem;} @media (max-width: 520px){ .hours-dash{display:none;} .hours-row-controls input[type=time]{min-width:0;flex:1;} } /* Toggle row pattern (used by Ticketed event toggle) */ .toggle-row{ display:flex;align-items:center;gap:.8rem;cursor:pointer; padding:.4rem 0; font-family:'Cormorant Garamond',serif;font-size:.98rem;color:var(--cream); text-transform:none;letter-spacing:0; } .toggle-row input[type=checkbox]{ width:18px;height:18px;flex-shrink:0; accent-color:var(--gold);cursor:pointer; appearance:auto;-webkit-appearance:checkbox; margin:0; } .toggle-row .toggle-title{ font-family:'Playfair Display',serif;font-style:italic; } .toggle-row .toggle-hint{ color:var(--muted);font-size:.85rem;font-style:normal; font-family:'Cormorant Garamond',serif; } .f-submit{ width:100%;font-size:.62rem;letter-spacing:.3em; background:var(--gold);color:var(--black);border:none; padding:1rem;margin-top:.3rem; } .f-submit:hover{background:var(--gold-light);} .ok-msg{text-align:center;padding:2.2rem;background:var(--card);border:1px solid var(--border);} .ok-msg .ck{font-size:1.6rem;color:var(--gold);margin-bottom:.7rem;} .ok-msg h3{font-family:'Playfair Display',serif;font-size:1.35rem;color:var(--cream);margin-bottom:.35rem;} /* ── CONTACT ── */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start;} @media (max-width:780px){.contact-grid{grid-template-columns:1fr;gap:2rem;}} .info-card{background:var(--card);border:1px solid var(--border);padding:1.8rem 2rem;} .info-block{padding:.9rem 0;border-bottom:1px solid rgba(201,168,76,.1);} .info-block:last-child{border-bottom:none;} .info-lbl{font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:.35rem;} .info-val{color:var(--cream);font-size:.97rem;} .info-val a:hover{color:var(--gold);} .map-wrap{aspect-ratio:4/3;border:1px solid var(--border);overflow:hidden;background:var(--card);position:relative;} .map-wrap iframe{width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) brightness(.9);} /* Leaflet container fills the wrapper. The dark CartoDB tiles already match our brand, so no filter needed (unlike the legacy iframe). */ .map-wrap .leaflet-container{width:100%;height:100%;background:var(--rich);font-family:'Cormorant Garamond',serif;} /* Tame Leaflet's default popup chrome to feel a touch more bar-elegant. */ .leaflet-popup-content-wrapper{border-radius:2px;background:var(--cream);box-shadow:0 6px 28px rgba(0,0,0,.45);} .leaflet-popup-content{margin:.85rem 1rem;line-height:1.5;} .leaflet-popup-tip{background:var(--cream);} .leaflet-control-attribution{background:rgba(10,8,6,.7)!important;color:var(--cream-dim)!important;font-size:.62rem!important;} .leaflet-control-attribution a{color:var(--gold)!important;} /* ── CAREERS ── */ .careers-intro{max-width:680px;} .role-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-bottom:2.5rem;} @media (max-width:680px){.role-grid{grid-template-columns:1fr;}} .role-card{background:var(--card);border:1px solid var(--border);padding:1.6rem 1.8rem;cursor:pointer;transition:border-color .3s;} .role-card:hover,.role-card.selected{border-color:var(--gold-dim);} .role-tag{font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem;} .role-title{font-family:'Playfair Display',serif;font-size:1.18rem;color:var(--cream);margin-bottom:.35rem;} .role-meta{font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin-bottom:.7rem;} .role-desc{font-size:.86rem;color:var(--cream-dim);} /* ── FOOTER ── */ footer.site-footer{background:var(--rich);border-top:1px solid var(--border);padding:2.5rem;text-align:center;} footer.site-footer img{height:40px;width:auto;opacity:.55;margin-bottom:.55rem;} .f-addr{font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;line-height:2;} .f-links{display:flex;gap:1.6rem;justify-content:center;margin-top:1.3rem;flex-wrap:wrap;} .f-links a{font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color .3s;} .f-links a:hover{color:var(--gold);} /* ── LOGIN ── */ .login-keep{ display:flex;align-items:center;gap:.55rem;cursor:pointer; margin:0 0 1rem; font-family:'Josefin Sans',sans-serif;font-size:.6rem;letter-spacing:.16em; text-transform:uppercase;color:var(--cream-dim);user-select:none; } .login-keep input[type=checkbox]{ position:absolute;opacity:0;width:0;height:0;pointer-events:none; } .login-keep .login-keep-mark{ width:18px;height:18px;border:1px solid var(--gold-dim); display:inline-flex;align-items:center;justify-content:center; background:transparent;flex-shrink:0;transition:all .15s; position:relative; } .login-keep input[type=checkbox]:checked + .login-keep-mark{ background:var(--gold);border-color:var(--gold); } .login-keep input[type=checkbox]:checked + .login-keep-mark::after{ content:'';position:absolute; width:5px;height:9px;border:solid var(--black); border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px); } .login-keep input[type=checkbox]:focus-visible + .login-keep-mark{ box-shadow:0 0 0 2px rgba(201,168,76,.4); } .login-keep:hover .login-keep-mark{border-color:var(--gold);} .login-keep .login-keep-text{line-height:1.2;} .login-pg{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:1.5rem;} .login-bg{position:absolute;inset:0;background:url('../images/DSC01817.jpg') center/cover;filter:brightness(.18);} .login-box{background:rgba(31,26,20,.97);border:1px solid var(--border);padding:2.6rem;width:380px;max-width:100%;text-align:center;position:relative;z-index:1;} .login-box img{width:170px;height:auto;margin-bottom:1.1rem;} .login-sub{font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.28em;color:var(--muted);text-transform:uppercase;margin-bottom:1.6rem;} .role-toggle{display:flex;border:1px solid var(--border);margin-bottom:1.4rem;} .role-toggle button{ flex:1;background:none;border:none;color:var(--muted); font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.2em; text-transform:uppercase;padding:.65rem;cursor:pointer;transition:all .3s; } .role-toggle button.active{background:var(--gold);color:var(--black);} .login-hint{font-size:.7rem;color:var(--muted);margin-top:.85rem;line-height:1.5;} .login-back{display:inline-block;margin-top:1rem;font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);cursor:pointer;} .login-back:hover{color:var(--gold);} /* PWA install trigger on the login page — only visible on devices that can install AND haven't already done so. Hidden by JS otherwise. */ .pwa-install-trigger{ display:flex;align-items:center;gap:.7rem;width:100%; margin-top:1.2rem;padding:.85rem 1rem; background:linear-gradient(135deg,rgba(201,168,76,.14),rgba(201,168,76,.04)); border:1px solid rgba(201,168,76,.45); color:var(--cream); cursor:pointer;font-family:'Cormorant Garamond',serif;text-align:left; transition:background .15s ease,border-color .15s ease; } .pwa-install-trigger:hover{ background:linear-gradient(135deg,rgba(201,168,76,.22),rgba(201,168,76,.08)); border-color:var(--gold); } .pwa-install-icon{font-size:1.5rem;line-height:1;} .pwa-install-copy{display:flex;flex-direction:column;gap:.15rem;flex:1;} .pwa-install-title{ font-family:'Josefin Sans',sans-serif; font-size:.62rem;letter-spacing:.18em;text-transform:uppercase; color:var(--gold); } .pwa-install-sub{ font-size:.85rem;color:var(--cream-dim);font-style:italic;line-height:1.4; } /* "Running on Hawthorne" credit — small platform-attribution stamp shown in the admin sidebar footer + the login page. Copper is Hawthorne's signature brand color (#c08552 -> --hawthorne) so the mark reads as a distinct platform brand instead of fading into the Amsterdamian gold. Public-site footer can reuse this class once Hawthorne is ready for outward-facing attribution. */ .hawthorne-credit{ font-family:'Josefin Sans',sans-serif; font-size:.55rem;letter-spacing:.22em;text-transform:uppercase; color:rgba(232,224,200,.32); text-align:center; line-height:1.4; margin-top:1.1rem; } .hawthorne-credit a{ color:#c08552; text-decoration:none; transition:color .15s ease; } .hawthorne-credit a:hover{ color:#d99e6c; } .hawthorne-mark{ font-family:'Playfair Display',serif; font-weight:500; letter-spacing:.04em; text-transform:none; font-size:.78rem; vertical-align:-1px; } /* Image variant of the Hawthorne mark — hot-linked from gethawthorne.io so we have a single canonical logo across all bars hosted on the platform. The PNG ships with a dark wordmark on white, but we render everywhere on dark surfaces here, so: - filter: invert(1) flips the wordmark to near-white and the white bg to black - brightness(1.05) nudges the wordmark all the way to clean white - mix-blend-mode:screen makes pure-black (the inverted bg) transparent against any dark background, so the logo reads as floating type instead of a chip. Height-only sizing keeps the aspect ratio intact at any width. */ .hawthorne-mark-img{ display:inline-block; /* Default sized for sidebar/login placements — small surfaces. The public footer (.site-footer) overrides this with a smaller value so the logo doesn't dominate the wider context. */ height:20px; width:auto; vertical-align:middle; margin-left:.5rem; filter:invert(1) brightness(1.05); mix-blend-mode:screen; opacity:.85; transition:opacity .15s ease; } .hawthorne-credit a:hover .hawthorne-mark-img{ opacity:1; } /* Public-footer override — wider context = needs a smaller mark so it doesn't out-shout the Amsterdamian logo above it. Also drop the left margin since the footer credit centers the image on its own line (no inline "Running on" label sitting next to it visually). */ .site-footer .hawthorne-mark-img{ height:19px; margin-left:0; } /* Stack "RUNNING ON" above the logo (instead of trying to align them inline). The all-caps small-tracked label and the wordmark have different visual baselines that never line up cleanly side-by-side — putting the logo on its own line below the label is both prettier and more readable. */ .site-footer .hawthorne-credit a{ display:block; margin-top:.6rem; } /* Login-card override — logo-only treatment. 20px keeps it discreet relative to the Amsterdamian wordmark up top. Have to explicitly re-assert width:auto + margin:0 here because the legacy `.login-box img{ width:170px; ... }` rule above was written for the Amsterdamian wordmark and would otherwise stretch our logo flat. */ .login-box .hawthorne-mark-img{ height:20px; width:auto; margin:0; } .login-box .hawthorne-credit{ margin-top:1.4rem; } /* ── ADMIN / STAFF DASHBOARD ── */ :root{ --adm-sb-w: 240px; } .adm-wrap{background:#0d0b09;min-height:100vh;padding-top:0;} /* Sidebar (desktop) */ .adm-sidebar{ position:fixed;top:0;left:0;height:100vh;width:var(--adm-sb-w); background:var(--dark);border-right:1px solid var(--border); display:flex;flex-direction:column; z-index:90;overflow-y:auto;overflow-x:hidden; transition:transform .25s ease; } .adm-sb-head{ padding:1.5rem 1.2rem 1.1rem;border-bottom:1px solid var(--border); display:flex;flex-direction:column;align-items:center;text-align:center; position:relative; } .adm-sb-logo{display:block;} .adm-sb-logo img{height:64px;display:block;} .adm-sb-title{ font-family:'Playfair Display',serif;font-size:1rem;font-style:italic; color:var(--gold);margin-top:.7rem; } .adm-sb-userline{ display:flex;align-items:center;gap:.45rem;margin-top:.55rem;flex-wrap:wrap;justify-content:center; } .adm-sb-userline .user-greeting{ font-family:var(--chat-font);color:var(--cream);font-size:.92rem; text-decoration:none;cursor:pointer; } .adm-sb-userline .user-greeting:hover{color:var(--gold);} /* Bell button */ .adm-bell{ position:absolute;top:1.2rem;right:1rem; width:36px;height:36px;background:transparent; border:1px solid var(--border);color:var(--gold);cursor:pointer; display:flex;align-items:center;justify-content:center;transition:all .15s; } .adm-bell:hover{border-color:var(--gold);background:rgba(201,168,76,.08);} /* Theme controls now live in Site Settings → Display Preferences instead of the sidebar header (less visually intrusive). The data-theme-toggle handler in dashboard-shared.js still binds to any element with that attribute, so any button placement works. */ .theme-segmented{ display:inline-flex;border:1px solid var(--border);overflow:hidden; background:var(--card); /* Without align-self the segmented control inherits `align-items: stretch` from its parent `.fg` flex column and the inline-flex ends up stretched to the column's full width — leaving a visible empty strip after the last button. align-self:flex-start makes it size to its actual content. */ align-self:flex-start; width:max-content; } .theme-segmented button{ background:transparent;border:none;cursor:pointer; padding:.55rem 1.1rem; font-family:'Josefin Sans',sans-serif;font-size:.62rem;letter-spacing:.18em; text-transform:uppercase;color:var(--cream-dim); transition:background .15s,color .15s; } .theme-segmented button:not(:last-child){border-right:1px solid var(--border);} .theme-segmented button:hover{color:var(--gold);} .theme-segmented button.active{background:var(--gold);color:var(--black);} .theme-segmented .theme-seg-icon{ display:inline-block;vertical-align:middle;margin-right:.4rem; } /* ── Pull-to-refresh indicator (mobile only) ────────────────────────── A small gold circle with a refresh icon. Sits offscreen above the top of the viewport by default; transform translates it down as the user pulls. Wired in dashboard-shared.js. */ #ptr-indicator{ position:fixed; top:-44px; left:50%; transform:translate(-50%, 0); width:38px;height:38px;border-radius:50%; background:var(--card); border:1px solid var(--gold); color:var(--gold); display:flex;align-items:center;justify-content:center; z-index:9999; box-shadow:0 4px 14px rgba(0,0,0,.35); pointer-events:none; opacity:.85; transition:opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1); } /* While actively dragging we want the transform to follow the finger without easing — JS sets transform inline; we override the transition only when committing or springing back. */ #ptr-indicator.ptr-ready{opacity:1;} #ptr-indicator.ptr-committing svg{animation:ptr-spin .8s linear infinite;} @keyframes ptr-spin{ to{transform:rotate(360deg);} } .adm-bell-icon{display:block;} .adm-bell-count{ position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px; background:var(--red);color:#fff; font-family:'Josefin Sans',sans-serif;font-size:.55rem;font-weight:700; border-radius:9px;display:flex;align-items:center;justify-content:center; line-height:1;letter-spacing:.02em; } /* Bell dropdown */ .adm-bell-dropdown{ position:absolute;top:calc(100% + .35rem);right:.6rem;left:.6rem; max-height:60vh;overflow-y:auto; background:var(--card);border:1px solid var(--gold-dim); z-index:120;box-shadow:0 14px 36px rgba(0,0,0,.55); display:flex;flex-direction:column; } .adm-bell-dropdown-head{ padding:.7rem .85rem;border-bottom:1px solid var(--border); display:flex;justify-content:space-between;align-items:center; } .adm-bell-dropdown-title{ font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.18em; text-transform:uppercase;color:var(--gold); } .adm-bell-dropdown-clear{ background:transparent;border:none;color:var(--muted);cursor:pointer; font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.16em;text-transform:uppercase; } .adm-bell-dropdown-clear:hover{color:var(--gold);} .adm-bell-empty{padding:1.2rem;text-align:center;color:var(--muted);font-style:italic;font-size:.85rem;} .adm-bell-item{ position:relative; display:flex;gap:.6rem;align-items:flex-start;padding:.65rem .85rem; border-bottom:1px solid rgba(201,168,76,.08);cursor:pointer; border-left:3px solid transparent; transition:background .15s; } .adm-bell-item:last-child{border-bottom:none;} .adm-bell-item:hover{background:rgba(201,168,76,.08);} /* UNREAD ("new") — strong gold accent, lit text, gold dot, NEW pill */ .adm-bell-item.unread{ background:rgba(201,168,76,.07); border-left-color:var(--gold); } .adm-bell-item.unread .adm-bell-item-dot{ background:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.18); } .adm-bell-item.unread .adm-bell-item-title{ color:var(--cream);font-weight:500; } .adm-bell-item.unread .adm-bell-item-meta{color:var(--gold);} /* READ ("seen") — demoted, neutral, hollow dot */ .adm-bell-item.read{opacity:.78;} .adm-bell-item.read .adm-bell-item-dot{background:transparent;border:1px solid var(--border);} .adm-bell-item.read .adm-bell-item-title{color:var(--cream-dim);font-style:normal;} .adm-bell-item-dot{ width:8px;height:8px;border-radius:50%;background:var(--gold); margin-top:.45rem;flex-shrink:0;transition:all .15s; } .adm-bell-item-body{flex:1;min-width:0;} .adm-bell-item-title-row{ display:flex;align-items:center;gap:.45rem;flex-wrap:wrap; } .adm-bell-item-title{ font-family:'Cormorant Garamond',serif;font-size:1rem;color:var(--cream); font-style:italic;line-height:1.3; } .adm-bell-item-pill{ font-family:'Josefin Sans',sans-serif;font-size:.45rem;letter-spacing:.18em; text-transform:uppercase;font-weight:700; background:var(--gold);color:var(--black); padding:.12rem .35rem;border-radius:2px;line-height:1; } .adm-bell-item-kind{ font-family:'Josefin Sans',sans-serif;font-size:.45rem;letter-spacing:.18em; text-transform:uppercase;color:var(--gold-dim); border:1px solid var(--gold-dim); padding:.12rem .35rem;line-height:1; } .adm-bell-item.read .adm-bell-item-kind{color:var(--muted);border-color:var(--border);} .adm-bell-item-text{ color:var(--cream-dim);font-size:.85rem;margin-top:.22rem;line-height:1.35; white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; } .adm-bell-item-meta{ font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);margin-top:.3rem; } .adm-sb-nav{flex:1;padding:.85rem 0;display:flex;flex-direction:column;gap:.4rem;} .adm-sb-group{display:flex;flex-direction:column;} .adm-sb-group-label{ font-family:'Josefin Sans',sans-serif;font-size:.48rem;letter-spacing:.22em; text-transform:uppercase;color:var(--gold-dim); padding:.55rem 1.2rem .25rem; } .adm-sidebar .adm-ntab{ font-family:'Josefin Sans',sans-serif;font-size:.62rem;letter-spacing:.16em; text-transform:uppercase;background:none;border:none; color:var(--cream-dim);padding:.62rem 1.2rem; cursor:pointer;text-align:left;width:100%;display:flex;align-items:center;gap:.5rem; border-left:3px solid transparent;transition:all .15s ease; text-decoration:none;line-height:1.1; } .adm-sidebar .adm-ntab:hover:not(.active){ background:rgba(201,168,76,.05);color:var(--gold); } .adm-sidebar .adm-ntab.active{ background:rgba(201,168,76,.1);color:var(--gold); border-left-color:var(--gold); } .adm-sidebar .adm-ntab .ntab-badge{ background:var(--gold);color:var(--black); font-family:'Josefin Sans',sans-serif;font-size:.5rem;font-weight:700; padding:.1rem .4rem;border-radius:8px;letter-spacing:.05em;line-height:1; } /* Sidebar nav icons (injected by dashboard-shared.js → injectAdminNavIcons). Inherit currentColor from the button so they match the active/hover gold tint. The .nav-icon wrapper is flex-aligned with the label. */ .adm-sidebar .adm-ntab .nav-icon{ width:14px;height:14px; color:var(--cream-dim); transition:color .15s ease,opacity .15s ease; } .adm-sidebar .adm-ntab:hover:not(.active) .nav-icon, .adm-sidebar .adm-ntab.active .nav-icon{ color:var(--gold);opacity:1; } /* Quick-search bar at the top of the admin body. Searches across reservations, staff, events, reviews — dropdown shows grouped results. Click a result to jump to the relevant panel. */ .adm-topsearch{ position:sticky;top:0;z-index:60; /* Solid background — sticky positioning was already correct, but the previous `transparent` let panel content scroll visibly through the bar so it read as if the search itself was moving with the page. Match the .adm-wrap fill + add a subtle bottom edge so content scrolling under it gets a clean cut-off line. */ background:#0d0b09; border-bottom:1px solid var(--border); box-shadow:0 4px 10px rgba(0,0,0,.35); padding:.7rem 1rem .9rem; margin:0 -1rem .6rem; /* bleed into the .adm-body padding for full-width cover */ } /* Light theme: match the panel background instead so the sticky bar doesn't look like a dark slab in the middle of a cream page. */ :root[data-theme="light"] .adm-topsearch{ background:var(--bg, #f6efe2); } .adm-topsearch-wrap{ position:relative;max-width:520px; } .adm-topsearch-icon{ position:absolute;left:.85rem;top:50%;transform:translateY(-50%); color:var(--muted);pointer-events:none; } .adm-topsearch-input{ width:100%;background:var(--card); border:1px solid var(--border); color:var(--cream); padding:.55rem .85rem .55rem 2.2rem; font-family:inherit;font-size:.88rem; border-radius:3px;outline:none; transition:border-color .15s ease,background .15s ease; } .adm-topsearch-input::placeholder{color:var(--muted);font-style:italic;} .adm-topsearch-input:focus{ border-color:var(--gold-dim); background:var(--rich); } .adm-topsearch-input:focus + .adm-topsearch-clear, .adm-topsearch-input:not(:placeholder-shown) ~ .adm-topsearch-clear{ display:inline-flex; } .adm-topsearch-clear{ position:absolute;right:.55rem;top:50%;transform:translateY(-50%); background:transparent;border:none;color:var(--muted); font-size:1.3rem;line-height:1;cursor:pointer; width:24px;height:24px; display:none;align-items:center;justify-content:center; border-radius:3px; } .adm-topsearch-clear:hover{color:var(--cream);background:rgba(255,255,255,.04);} .adm-topsearch-clear.hidden{display:none !important;} .adm-topsearch-results{ position:absolute;top:100%;left:0; width:100%;max-width:520px; background:var(--card); border:1px solid var(--border); border-top:none; max-height:60vh;overflow-y:auto; margin-top:-1px; box-shadow:0 8px 28px rgba(0,0,0,.4); } .adm-topsearch-group{ padding:.5rem 0; border-top:1px solid var(--border); } .adm-topsearch-group:first-child{border-top:none;} .adm-topsearch-group-label{ font-family:'Josefin Sans',sans-serif; font-size:.6rem;letter-spacing:.18em;text-transform:uppercase; color:var(--gold-dim); padding:.3rem .85rem .45rem; } .adm-topsearch-row{ padding:.5rem .85rem;cursor:pointer; display:flex;justify-content:space-between;align-items:center;gap:.7rem; transition:background .12s ease; } .adm-topsearch-row:hover,.adm-topsearch-row.active{ background:rgba(201,168,76,.08); } .adm-topsearch-row-main{flex:1;min-width:0;} .adm-topsearch-row-title{ color:var(--cream);font-size:.88rem;font-weight:500; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .adm-topsearch-row-sub{ color:var(--muted);font-size:.74rem;margin-top:.1rem; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .adm-topsearch-row-meta{ font-family:'Josefin Sans',sans-serif;font-size:.6rem; letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim); flex-shrink:0; } .adm-topsearch-empty{ padding:1.2rem .85rem;text-align:center; color:var(--muted);font-style:italic;font-size:.85rem; } .adm-sb-foot{ padding:.95rem 1.2rem;border-top:1px solid var(--border); display:flex;flex-direction:column;gap:.5rem; } .adm-sb-foot .user-greeting{ font-family:var(--chat-font);color:var(--cream);font-size:.95rem; text-decoration:none;cursor:pointer; } .adm-sb-foot .user-greeting:hover{color:var(--gold);} .adm-sb-foot .adm-badge{align-self:flex-start;} .adm-sb-foot-actions{display:flex;gap:.4rem;flex-wrap:wrap;} .adm-sb-foot-actions .abtn{flex:1;text-align:center;padding:.45rem .6rem;font-size:.55rem;} .adm-badge{font-family:'Josefin Sans',sans-serif;font-size:.52rem;letter-spacing:.13em;background:var(--red);color:#f5b5b5;padding:.23rem .65rem;text-transform:uppercase;display:inline-block;} .adm-badge.staff{background:var(--accent-warn-bg);color:var(--accent-warn);} /* Main body shifts to make room for sidebar */ .adm-body{padding:1.6rem 2.2rem;margin-left:var(--adm-sb-w);} /* Mobile burger + slide-in sidebar */ .adm-burger{ display:none;position:fixed;top:.85rem;left:.85rem;z-index:95; width:42px;height:42px;background:var(--dark); border:1px solid var(--border);cursor:pointer; flex-direction:column;align-items:center;justify-content:center;gap:5px; } .adm-burger span{display:block;width:20px;height:2px;background:var(--gold);} .adm-sb-overlay{ display:none;position:fixed;inset:0;background:rgba(0,0,0,.55); z-index:85; } .adm-sb-overlay.show{display:block;} @media (max-width:900px){ .adm-sidebar{transform:translateX(-100%);box-shadow:0 0 24px rgba(0,0,0,.7);} .adm-sidebar.open{transform:translateX(0);} .adm-burger{display:flex;} .adm-body{margin-left:0;padding:4.2rem 1rem 1.4rem;} } .adm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.6rem;} @media (max-width:760px){.adm-stats{grid-template-columns:repeat(2,1fr);}} .stat{background:var(--card);border:1px solid var(--border);padding:1rem 1.3rem;cursor:default;transition:border-color .3s,transform .2s;} .stat.clickable{cursor:pointer;} .stat.clickable:hover{border-color:var(--gold-dim);transform:translateY(-2px);} .stat-lbl{font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem;display:flex;align-items:center;gap:.4rem;} .stat-lbl .arrow{color:var(--gold-dim);font-size:.6rem;opacity:0;transition:opacity .2s;} .stat.clickable:hover .stat-lbl .arrow{opacity:1;} .stat-num{font-family:'Playfair Display',serif;font-size:1.85rem;color:var(--gold);} .adm-panel{display:none;} .adm-panel.active{display:block;} .tbl-wrap{background:var(--card);border:1px solid var(--border);overflow:hidden;overflow-x:auto;} .tbl-head{padding:.85rem 1.3rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;} .tbl-ttl{font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.17em;text-transform:uppercase;color:var(--cream-dim);} table{width:100%;border-collapse:collapse;} th{font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:.6rem 1.3rem;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;} td{padding:.8rem 1.3rem;border-bottom:1px solid rgba(201,168,76,.07);font-size:.87rem;} tr:last-child td{border-bottom:none;} tr:hover td{background:rgba(201,168,76,.03);} /* Status pill — purely an indicator, not a button. Cursor stays default and a small leading dot reinforces "this is a label." Used on pickup cards and elsewhere to communicate state. The variant classes (.s-confirmed, .s-pending, .s-private, etc.) layer the semantic accent colors on top of this base. */ .sbadge{ font-family:'Josefin Sans',sans-serif;font-size:.48rem;letter-spacing:.09em; text-transform:uppercase;padding:.2rem .5rem;display:inline-flex; align-items:center;gap:.4rem;cursor:default;user-select:none; } .sbadge::before{ content:'';display:inline-block;width:6px;height:6px;border-radius:50%; background:currentColor;opacity:.8;flex-shrink:0; } .s-confirmed{background:var(--accent-success-bg);color:var(--accent-success);border:1px solid var(--accent-success-bd);} .s-pending{background:var(--accent-warn-bg);color:var(--accent-warn);border:1px solid var(--accent-warn-bd);} .s-private{background:var(--accent-danger-bg);color:var(--accent-danger);border:1px solid var(--accent-danger-bd);} .s-approved{background:var(--accent-success-bg);color:var(--accent-success);border:1px solid var(--accent-success-bd);} .s-denied{background:var(--accent-danger-bg);color:var(--accent-danger);border:1px solid var(--accent-danger-bd);} .abtn{font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.09em;text-transform:uppercase;background:none;border:1px solid var(--muted);color:var(--muted);padding:.2rem .52rem;cursor:pointer;transition:all .2s;margin-right:.22rem;} .abtn:hover{border-color:var(--gold);color:var(--gold);} .abtn.danger:hover{border-color:#e05c5c;color:#e05c5c;} .abtn.msg:hover{border-color:var(--accent-info);color:var(--accent-info);} .abtn.primary{background:var(--gold);color:var(--black);border-color:var(--gold);} .abtn.primary:hover{background:var(--gold-light);color:var(--black);border-color:var(--gold-light);} .ftabs{display:flex;gap:0;margin-bottom:1.3rem;flex-wrap:wrap;} .ftab{font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;background:none;border:1px solid var(--border);color:var(--muted);padding:.4rem 1.05rem;cursor:pointer;margin-right:-1px;transition:all .2s;} .ftab.active{background:var(--gold);color:var(--black);border-color:var(--gold);z-index:1;} .ftab:hover:not(.active){color:var(--cream-dim);} /* ── MODAL ── */ .modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem;} .modal-box{background:var(--dark);border:1px solid var(--border);padding:1.8rem;width:560px;max-width:96vw;max-height:88vh;overflow-y:auto;} .modal-title{font-family:'Playfair Display',serif;font-size:1.25rem;color:var(--cream);margin-bottom:.25rem;} .modal-sub{font-size:.83rem;color:var(--muted);margin-bottom:1.3rem;} .msg-tpls{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1.1rem;} @media (max-width:580px){.msg-tpls{grid-template-columns:1fr;}} .mtpl{background:var(--card);border:1px solid var(--border);padding:.75rem;cursor:pointer;transition:border-color .2s;} .mtpl:hover,.mtpl.sel{border-color:var(--gold-dim);} .mtpl-title{font-family:'Josefin Sans',sans-serif;font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.2rem;} .mtpl-prev{font-size:.78rem;color:var(--muted);} .modal-acts{display:flex;gap:.7rem;margin-top:1.1rem;flex-wrap:wrap;} /* Credentials card — shown after "+ Add Employee" succeeds. Lists the new hire's name, username, email, the one-time temp password (large monospace + copy button), and the sign-in URL. */ .emp-cred-card{ margin:1rem 0 .9rem; background:var(--card); border:1px solid var(--border); border-left:3px solid var(--gold); padding:.9rem 1.1rem; display:flex;flex-direction:column;gap:.55rem; } .emp-cred-row{ display:flex;align-items:center;gap:.7rem; flex-wrap:wrap; } .emp-cred-label{ font-family:'Josefin Sans',sans-serif; font-size:.6rem;letter-spacing:.16em;text-transform:uppercase; color:var(--muted); flex-shrink:0;width:96px; } .emp-cred-val{ color:var(--cream);font-size:.92rem;flex:1;min-width:0; word-break:break-all; } .emp-cred-pw{ font-family:'Courier New',monospace; background:rgba(201,168,76,.12); color:var(--gold); padding:.35rem .55rem; font-size:1rem;letter-spacing:.04em; user-select:all; border:1px dashed rgba(201,168,76,.4); border-radius:3px; } .emp-cred-url{font-size:.82rem;color:var(--muted);} .emp-cred-copy{padding:.3rem .65rem;font-size:.72rem;flex-shrink:0;} .emp-cred-status{ font-size:.82rem;margin:.6rem 0 .2rem;min-height:1em; } .chip-ok{font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;background:var(--accent-success-bg);color:var(--accent-success);border:1px solid var(--accent-success-bd);padding:.23rem .65rem;display:inline-block;} /* ── EMAIL / EVENT BUILDER ── */ .eb{background:var(--card);border:1px solid var(--border);overflow:hidden;} .eb-toolbar{background:var(--rich);border-bottom:1px solid var(--border);padding:.7rem 1.1rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;} .eb-tlbl{font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-right:.4rem;} .eb-btn{font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.11em;text-transform:uppercase;background:none;border:1px solid var(--border);color:var(--cream-dim);padding:.27rem .62rem;cursor:pointer;transition:all .2s;} .eb-btn:hover{border-color:var(--gold-dim);color:var(--gold);} .eb-btn.act{background:var(--gold);color:var(--black);border-color:var(--gold);} .eb-body{display:grid;grid-template-columns:1fr 320px;min-height:500px;} @media (max-width:880px){.eb-body{grid-template-columns:1fr;}} .eb-canvas{padding:1.3rem;border-right:1px solid var(--border);overflow-y:auto;max-height:640px;} @media (max-width:880px){.eb-canvas{border-right:none;border-bottom:1px solid var(--border);}} .eb-side{padding:1.1rem;overflow-y:auto;max-height:640px;} .eb-side-ttl{font-family:'Josefin Sans',sans-serif;font-size:.51rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem;} .eb-prev{background:#161210;border:1px solid var(--border);min-height:340px;overflow:hidden;} .tpl-card{background:var(--dark);border:1px solid var(--border);padding:.88rem;margin-bottom:.7rem;cursor:pointer;transition:border-color .2s;position:relative;} .tpl-card:hover{border-color:var(--gold-dim);} .tpl-card.sel{border-color:var(--gold);} .tpl-card-name{font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.22rem;} .tpl-card-desc{font-size:.78rem;color:var(--muted);} .tpl-mark{position:absolute;top:.62rem;right:.62rem;width:15px;height:15px;background:var(--gold);border-radius:50%;display:none;align-items:center;justify-content:center;font-size:8px;color:var(--black);} .tpl-card.sel .tpl-mark{display:flex;} .eb-field{margin-bottom:.9rem;} .eb-field label{font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dim);display:block;margin-bottom:.28rem;} .eb-field input,.eb-field textarea,.eb-field select{ width:100%;background:var(--black);border:1px solid var(--border);color:var(--cream); padding:.5rem .7rem;font-family:'Cormorant Garamond',serif;font-size:.92rem; outline:none;transition:border-color .2s; } .eb-field input:focus,.eb-field textarea:focus,.eb-field select:focus{border-color:var(--gold-dim);} .eb-field textarea{resize:vertical;min-height:72px;} /* Image upload */ .img-zone{border:1px dashed var(--border-hi);padding:1.1rem;text-align:center;cursor:pointer;position:relative;background:var(--black);transition:border-color .2s;} .img-zone:hover{border-color:var(--gold);} .img-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;} .img-zone p{font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);} .img-zone p span{color:var(--gold);} .img-thumb{width:100%;max-height:170px;object-fit:cover;display:block;margin-top:.65rem;border:1px solid var(--border);} .img-rmv{font-family:'Josefin Sans',sans-serif;font-size:.47rem;letter-spacing:.1em;text-transform:uppercase;background:none;border:1px solid var(--muted);color:var(--muted);padding:.18rem .48rem;cursor:pointer;margin-top:.35rem;transition:all .2s;} .img-rmv:hover{border-color:#e05c5c;color:#e05c5c;} /* Rich text editor */ .rt-toolbar{display:flex;flex-wrap:wrap;gap:.3rem;padding:.45rem;background:var(--dark);border:1px solid var(--border);border-bottom:none;} .rt-btn{ font-family:'Josefin Sans',sans-serif;font-size:.6rem; background:none;border:1px solid transparent;color:var(--cream-dim); width:28px;height:26px;cursor:pointer;border-radius:2px;transition:all .15s; } .rt-btn:hover{border-color:var(--gold-dim);color:var(--gold);} .rt-btn.b{font-weight:700;} .rt-btn.i{font-style:italic;} .rt-btn.u{text-decoration:underline;} .rt-divider{width:1px;background:var(--border);margin:.15rem .25rem;} .rt-area{ width:100%;min-height:130px;background:var(--black);border:1px solid var(--border);color:var(--cream); padding:.7rem .85rem;font-family:'Cormorant Garamond',serif;font-size:.95rem;line-height:1.6; outline:none;transition:border-color .2s;overflow-y:auto; } .rt-area:focus{border-color:var(--gold-dim);} .rt-area p{margin-bottom:.5rem;} .rt-area:empty::before{content:attr(data-placeholder);color:var(--muted);font-style:italic;} /* ── MAILING ── */ .ml-row{display:flex;justify-content:space-between;align-items:center;padding:.55rem 0;border-bottom:1px solid rgba(201,168,76,.08);font-size:.87rem;gap:.5rem;flex-wrap:wrap;} .ml-row:last-child{border-bottom:none;} .ml-email{color:var(--cream-dim);word-break:break-all;} .ml-date{font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.09em;color:var(--muted);} /* ── SCHEDULE ── */ .sched-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;} @media (max-width:760px){.sched-grid{grid-template-columns:1fr;}} .sched-day{background:var(--card);border:1px solid var(--border);padding:.85rem .9rem;min-height:130px;} .sched-day.today{border-color:var(--gold-dim);} .sched-dnum{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--cream);} .sched-dlbl{font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem;} .sched-shift{font-size:.78rem;color:var(--cream-dim);background:rgba(201,168,76,.07);padding:.28rem .42rem;margin-bottom:.32rem;border-left:2px solid var(--gold-dim);} .sched-shift .who{font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.1em;color:var(--gold);text-transform:uppercase;display:block;} .sched-off{font-size:.72rem;color:var(--accent-danger);background:var(--accent-danger-bg);padding:.2rem .42rem;margin-top:.3rem;border-left:2px solid var(--red);} /* Admin Today landing — roster + action-required */ .adm-roster-row{ display:grid;grid-template-columns:auto 1fr auto auto;gap:.7rem;align-items:center; padding:.55rem .8rem;border-left:3px solid var(--emp-color, var(--gold-dim)); background:rgba(201,168,76,.04);margin-bottom:.4rem;flex-wrap:wrap; } .adm-roster-dot{ width:8px;height:8px;border-radius:50%;background:var(--emp-color,var(--gold)); flex-shrink:0; } .adm-roster-name{ color:var(--emp-color,var(--cream)); font-family:'Josefin Sans',sans-serif;font-size:.6rem;letter-spacing:.18em; text-transform:uppercase;font-weight:500; } .adm-roster-role{color:var(--cream-dim);font-size:.85rem;} .adm-roster-time{color:var(--cream);font-size:.85rem;font-family:var(--chat-font);} @media (max-width:580px){ .adm-roster-row{grid-template-columns:auto 1fr;gap:.5rem;} .adm-roster-role,.adm-roster-time{grid-column:2;font-size:.78rem;} } .adm-action-row{ display:flex;justify-content:space-between;align-items:center;gap:.8rem; padding:.7rem .9rem;background:rgba(232,201,122,.06); border:1px solid rgba(232,201,122,.3);border-left:3px solid #e8c97a; margin-bottom:.5rem;flex-wrap:wrap; } .adm-action-row:last-child{margin-bottom:0;} .adm-action-title{color:var(--cream);font-size:.92rem;flex:1;min-width:0;} .tor-form{background:var(--card);border:1px solid var(--border);padding:1.4rem 1.6rem;max-width:560px;} .warn-box{background:var(--accent-warn-bg);border:1px solid var(--accent-warn-bd);padding:.8rem 1rem;font-size:.82rem;color:var(--accent-warn);margin-bottom:1rem;} .warn-box strong{color:var(--gold);} /* ── TODAY LANDING ── */ .today-hero{ background:linear-gradient(180deg,rgba(31,26,20,.9),rgba(17,14,10,.95)); border:1px solid var(--border);padding:2rem 2.2rem;margin-bottom:1.6rem; display:flex;justify-content:space-between;align-items:flex-end;gap:1.4rem;flex-wrap:wrap; } .today-hero h1{ font-family:'Playfair Display',serif;font-style:italic;font-weight:400; color:var(--cream);font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1; } .today-hero .date-line{ font-family:'Josefin Sans',sans-serif;font-size:.6rem;letter-spacing:.32em; text-transform:uppercase;color:var(--gold);margin-bottom:.5rem; } /* Quick stats — when sitting as their own row (new admin Today layout), give them a bordered tile so they don't float in dead space. Each stat gets a thin separator instead of independent tile borders, so it reads as one unit. */ .quick-stats{ background:var(--card); border:1px solid var(--border); padding:1.2rem 1.6rem; display:flex; gap:0; flex-wrap:wrap; margin-bottom:1.3rem; } .qs{ flex:1; text-align:center; padding:0 1rem; border-left:1px solid var(--border); min-width:80px; } .qs:first-child{border-left:none;} .qs-num{ font-family:'Playfair Display',serif; font-style:italic;font-weight:600; font-size:2.1rem;color:var(--gold);line-height:1; } .qs-lbl{ font-family:'JetBrains Mono','Josefin Sans',sans-serif; font-size:.55rem;font-weight:500; letter-spacing:.2em;text-transform:uppercase; color:var(--muted);margin-top:.45rem; } /* Legacy: when .quick-stats sits INSIDE .today-hero (original layout), strip the new tile chrome so it doesn't double up. */ .today-hero .quick-stats{ background:transparent;border:none;padding:0;margin-bottom:0; } .today-hero .qs{border-left:none;} .today-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:1.3rem;margin-bottom:1.3rem;} @media (max-width:980px){.today-grid{grid-template-columns:1fr;}} .today-card{background:var(--card);border:1px solid var(--border);padding:1.4rem 1.6rem;} .today-card h2{ font-family:'Playfair Display',serif;font-size:1.18rem;font-style:italic; color:var(--cream);margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center;gap:.6rem; } .today-card h2 .count{ font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.2em; text-transform:uppercase;color:var(--gold);font-style:normal; background:rgba(201,168,76,.1);border:1px solid var(--border);padding:.22rem .55rem; } .today-empty{font-style:italic;color:var(--muted);padding:1.2rem 0;text-align:center;font-size:.86rem;} /* Events row */ .today-events{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.9rem;} .tev{background:var(--rich);border:1px solid var(--border);padding:1rem 1.2rem;border-left:3px solid var(--gold);} .tev-time{font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;} .tev-title{font-family:'Playfair Display',serif;font-size:1rem;color:var(--cream);margin:.25rem 0 .35rem;} .tev-detail{font-size:.82rem;color:var(--cream-dim);} .tev-tag{display:inline-block;font-family:'Josefin Sans',sans-serif;font-size:.48rem;letter-spacing:.13em; text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-dim);padding:.14rem .42rem;margin-top:.5rem;} /* Reservation list */ .tres-list{display:flex;flex-direction:column;} .tres-row{display:grid;grid-template-columns:80px 1fr auto;gap:1rem;padding:.85rem 0;border-bottom:1px solid rgba(201,168,76,.08);align-items:start;} .tres-row:last-child{border-bottom:none;} /* Clickable variant — used on the Today dashboard so admins can jump straight to the matching row in the Reservations panel. */ .tres-row--clickable{cursor:pointer;padding:.85rem .75rem;margin:0 -.75rem;border-bottom:1px solid rgba(201,168,76,.08);transition:background .15s ease;} .tres-row--clickable:hover{background:rgba(201,168,76,.05);} .tres-row--clickable:focus-visible{outline:1px solid var(--gold);outline-offset:-1px;background:rgba(201,168,76,.08);} /* Flash highlight applied briefly to the destination row in the Reservations table after the user clicks through from Today. Animation gradient draws attention without being garish. */ @keyframes row-flash-fade{ 0% { background-color: rgba(201,168,76,.35); } 100% { background-color: transparent; } } .row-flash{animation: row-flash-fade 1.8s ease-out;} .tres-time{font-family:'Playfair Display',serif;font-style:italic;color:var(--gold);font-size:1rem;line-height:1.1;} .tres-time .ampm{font-family:'Josefin Sans',sans-serif;font-style:normal;font-size:.6rem;letter-spacing:.15em;color:var(--gold-dim);text-transform:uppercase;display:block;margin-top:.1rem;} .tres-name{color:var(--cream);font-size:.95rem;} .tres-meta{font-size:.78rem;color:var(--muted);margin-top:.18rem;} .tres-notes{font-size:.78rem;color:var(--cream-dim);font-style:italic;margin-top:.32rem;border-left:2px solid var(--gold-dim);padding-left:.55rem;} .tres-party{ background:var(--rich);border:1px solid var(--border); padding:.32rem .65rem;text-align:center;min-width:46px; } .tres-party .num{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--gold);line-height:1;} .tres-party .lbl{font-family:'Josefin Sans',sans-serif;font-size:.45rem;letter-spacing:.15em;color:var(--muted);text-transform:uppercase;display:block;margin-top:.15rem;} .tres-private-tag{display:inline-block;font-family:'Josefin Sans',sans-serif;font-size:.45rem;letter-spacing:.13em;color:var(--accent-danger);border:1px solid var(--accent-danger-bd);background:var(--accent-danger-bg);padding:.13rem .42rem;margin-left:.4rem;text-transform:uppercase;vertical-align:middle;} /* Specials */ .tspec-list{display:flex;flex-direction:column;gap:.8rem;} .tspec{background:var(--rich);border:1px solid var(--border);padding:.95rem 1.1rem;border-left:3px solid var(--gold);position:relative;} .tspec.t-drink{border-left-color:var(--gold);} .tspec.t-promo{border-left-color:var(--accent-info);} .tspec.t-note {border-left-color:#e05c5c;} .tspec-tag{font-family:'Josefin Sans',sans-serif;font-size:.45rem;letter-spacing:.18em;text-transform:uppercase; display:inline-block;padding:.14rem .42rem;margin-bottom:.42rem;} .tspec.t-drink .tspec-tag{color:var(--gold);background:rgba(201,168,76,.1);border:1px solid var(--border);} .tspec.t-promo .tspec-tag{color:var(--accent-info);background:var(--accent-info-bg);border:1px solid var(--accent-info-bd);} .tspec.t-note .tspec-tag{color:#e05c5c;background:rgba(224,92,92,.1);border:1px solid rgba(224,92,92,.3);} .tspec-title{font-family:'Playfair Display',serif;font-size:.97rem;color:var(--cream);margin-bottom:.28rem;} .tspec-note{font-size:.83rem;color:var(--cream-dim);line-height:1.55;} .tspec-actions{position:absolute;top:.55rem;right:.55rem;display:flex;gap:.25rem;opacity:0;transition:opacity .15s;} .tspec:hover .tspec-actions{opacity:1;} /* Specials editor row */ .spec-editor-row{display:grid;grid-template-columns:120px 1fr 1.6fr auto;gap:.6rem;align-items:start;padding:.7rem 0;border-bottom:1px solid rgba(201,168,76,.07);} .spec-editor-row:last-child{border-bottom:none;} @media (max-width:760px){.spec-editor-row{grid-template-columns:1fr;}} /* Roles editor row (admin Careers panel) */ .role-editor-row{ display:grid; grid-template-columns:130px 1fr 1fr 1fr 2fr auto; gap:.55rem;align-items:start; padding:.85rem 0;border-bottom:1px solid rgba(201,168,76,.07); } .role-editor-row:last-child{border-bottom:none;} @media (max-width:980px){ .role-editor-row{grid-template-columns:1fr 1fr;gap:.5rem;} .role-editor-row textarea{grid-column:1/-1;} .role-editor-row [data-role-rmv]{grid-column:1/-1;justify-self:end;} } .role-toggle-label{ display:flex;align-items:center;gap:.45rem;cursor:pointer; background:var(--rich);border:1px solid var(--border); padding:.5rem .65rem; font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.18em; text-transform:uppercase;color:var(--cream-dim); align-self:start; } .role-toggle-label input[type=checkbox]{ accent-color:var(--gold);cursor:pointer; appearance:auto;-webkit-appearance:checkbox; width:14px;height:14px;margin:0; } .role-editor-row input[type=text], .role-editor-row textarea, .spec-editor-row input[type=text], .spec-editor-row textarea, .spec-editor-row select{ background:var(--black);border:1px solid var(--border);color:var(--cream); padding:.55rem .7rem;font-family:'Cormorant Garamond',serif;font-size:.92rem; outline:none;transition:border-color .2s;width:100%; } .role-editor-row input[type=text]:focus, .role-editor-row textarea:focus, .spec-editor-row input[type=text]:focus, .spec-editor-row textarea:focus, .spec-editor-row select:focus{border-color:var(--gold-dim);} .role-editor-row textarea, .spec-editor-row textarea{resize:vertical;font-family:'Cormorant Garamond',serif;line-height:1.5;} /* ── User greeting in header ── */ .user-greeting{ color:var(--cream-dim);font-size:.85rem;cursor:pointer; text-decoration:none;transition:color .2s; } .user-greeting #user-name{color:var(--gold);} .user-greeting:hover{color:var(--cream);} .user-greeting:hover #user-name{color:var(--gold-light);} /* ── Team directory ── */ .team-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; } .team-card{ background:var(--card);border:1px solid var(--border); padding:1.1rem;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start; } .team-avatar{flex-shrink:0;} .team-info{min-width:0;} .team-name{font-family:'Playfair Display',serif;font-style:italic;color:var(--cream);font-size:1.1rem;line-height:1.2;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;} .team-color-dot{ display:inline-block;width:10px;height:10px;border-radius:50%; background:var(--emp-color,var(--gold-dim)); flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,.3) inset; } .team-role{font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:.3rem;} .team-contact{margin-top:.55rem;display:flex;flex-direction:column;gap:.18rem;} .team-contact-link{ color:var(--cream-dim);font-size:.8rem;text-decoration:none; word-break:break-all; } .team-contact-link:hover{color:var(--gold);} .team-actions{display:flex;gap:.4rem;margin-top:.7rem;flex-wrap:wrap;} /* Avatars */ .emp-photo{ width:64px;height:64px;border-radius:50%;display:block;object-fit:cover; border:1px solid var(--gold-dim); } .emp-photo-initials{ background:linear-gradient(135deg,var(--gold-dim),var(--gold)); color:var(--black);font-family:'Playfair Display',serif;font-style:italic; font-size:1.4rem; display:flex;align-items:center;justify-content:center; } .emp-photo-broadcast{ background:var(--rich);border-color:var(--gold); display:flex;align-items:center;justify-content:center;font-size:1.5rem; } .emp-photo-group{ background:linear-gradient(135deg,#3a3527,#2a2418); border-color:var(--gold-dim); display:flex;align-items:center;justify-content:center; font-size:1.4rem;color:var(--gold); } /* Custom group photo: replaces the gradient with a cover-fit image */ .emp-photo-group.has-photo{ background-size:cover;background-position:center; font-size:0;color:transparent; } /* Editable group avatar (creator only) — clickable circle with hover overlay */ .group-avatar-editable{position:relative;cursor:pointer;} .group-avatar-editable .emp-photo{transition:transform .18s, box-shadow .18s;} .group-avatar-editable:hover .emp-photo{ transform:scale(1.04); box-shadow:0 0 0 2px var(--gold), 0 6px 18px rgba(0,0,0,.45); } /* Camera-pip badge that always shows in the corner — strong cue this is editable */ .group-avatar-editable::after{ content:'📷';position:absolute;right:-3px;bottom:-3px; width:20px;height:20px;border-radius:50%; background:var(--gold);color:var(--black); display:flex;align-items:center;justify-content:center; font-size:.7rem;line-height:1; border:2px solid var(--rich); transition:transform .15s; z-index:1; } .group-avatar-editable:hover::after{transform:scale(1.12);} /* Soft "Change photo" overlay on hover (covers the photo with a tint) */ .group-avatar-editable::before{ content:'Change';position:absolute;inset:0;border-radius:inherit; background:rgba(0,0,0,.55);color:var(--gold); font-family:'Josefin Sans',sans-serif;font-size:.45rem;letter-spacing:.16em; text-transform:uppercase; display:flex;align-items:center;justify-content:center; opacity:0;transition:opacity .18s; pointer-events:none;border-radius:50%; } .group-avatar-editable:hover::before{opacity:1;} .group-icon-edit{ margin-left:.5rem;background:transparent;border:1px solid var(--gold-dim); color:var(--gold);padding:.18rem .55rem; font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.16em; text-transform:uppercase;cursor:pointer; } .group-icon-edit:hover{background:rgba(201,168,76,.1);border-color:var(--gold);} /* ── Profile view ── */ .profile-wrap{max-width:680px;} .profile-hero{ display:flex;gap:1.4rem;align-items:flex-start; padding:1.4rem 0; } .profile-photo-wrap{position:relative;flex-shrink:0;} .profile-photo-wrap .emp-photo{width:120px;height:120px;font-size:2.5rem;} .profile-photo-upload{ display:block;margin-top:.55rem;text-align:center; font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.18em; text-transform:uppercase;color:var(--gold-dim);cursor:pointer; position:relative; } .profile-photo-upload input[type=file]{ position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%; } .profile-photo-upload:hover{color:var(--gold);} .profile-meta{flex:1;min-width:0;} .profile-role{ font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.25em; text-transform:uppercase;color:var(--gold);margin-bottom:.25rem; } .profile-name{ font-family:'Playfair Display',serif;font-style:italic;font-weight:400; color:var(--cream);font-size:clamp(1.6rem,3.5vw,2.1rem);line-height:1.1;margin:.1rem 0 .3rem; } .profile-joined{font-size:.82rem;color:var(--muted);font-style:italic;} .profile-body{margin-top:.6rem;} .profile-fields{ display:grid;grid-template-columns:1fr 1fr;gap:.8rem; background:var(--card);border:1px solid var(--border); padding:1.1rem 1.3rem; } @media (max-width:680px){.profile-fields{grid-template-columns:1fr;}} .profile-row{display:flex;flex-direction:column;gap:.32rem;} .profile-row-full{grid-column:1/-1;} .profile-label{ font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.22em; text-transform:uppercase;color:var(--gold-dim); } .profile-input{ background:var(--black);border:1px solid var(--border);color:var(--cream); padding:.55rem .7rem;font-family:'Cormorant Garamond',serif;font-size:.95rem; outline:none;transition:border-color .2s; } .profile-input:focus{border-color:var(--gold-dim);} .profile-fields.read .profile-row{padding:.55rem 0;border-bottom:1px solid rgba(201,168,76,.07);} .profile-fields.read .profile-row:last-child{border-bottom:none;} .profile-value{color:var(--cream);font-size:.95rem;} .profile-value.bio{font-style:italic;line-height:1.65;color:var(--cream-dim);} .profile-edit-hint{ font-size:.74rem;color:var(--muted);font-style:italic;margin-top:.5rem;text-align:right; } .profile-actions{margin-top:1.2rem;} .profile-empty{color:var(--muted);font-style:italic;padding:2rem;text-align:center;} /* ── Team toolbar + admin pill ── */ .team-toolbar{ display:flex;align-items:center;gap:.8rem;flex-wrap:wrap; margin-bottom:1rem; } .team-toolbar-hint{font-size:.78rem;color:var(--muted);font-style:italic;} .team-admin-pill{ display:inline-block;font-family:'Josefin Sans',sans-serif;font-size:.42rem; letter-spacing:.18em;text-transform:uppercase;color:var(--gold); border:1px solid var(--gold-dim);background:rgba(201,168,76,.08); padding:.06rem .35rem;margin-left:.35rem;vertical-align:middle; } .team-archive{ margin-top:1.6rem;padding-top:1.2rem; border-top:1px solid var(--border); } .team-archive-row{ display:flex;justify-content:space-between;align-items:center;gap:.6rem; padding:.55rem 0;border-bottom:1px solid rgba(201,168,76,.06);flex-wrap:wrap; } .team-archive-name{color:var(--cream-dim);font-size:.92rem;} /* ── HR section (admin-only) ── */ .hr-section{ margin-top:2rem;padding-top:1.6rem; border-top:1px solid var(--border); } .hr-section-title{ font-family:'Playfair Display',serif;font-style:italic;font-weight:400; color:var(--cream);font-size:1.18rem;margin:.2rem 0 .9rem; } .hr-grid{ display:grid;grid-template-columns:1fr 1fr;gap:.75rem; background:var(--card);border:1px solid var(--border); padding:1.1rem 1.3rem; } @media (max-width:680px){.hr-grid{grid-template-columns:1fr;}} .hr-row{display:flex;flex-direction:column;gap:.32rem;} .hr-row-full{grid-column:1/-1;} .hr-label{ font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.22em; text-transform:uppercase;color:var(--gold-dim); display:flex;align-items:center;gap:.4rem;flex-wrap:wrap; } .hr-secure{ font-family:'Josefin Sans',sans-serif;font-size:.42rem;letter-spacing:.15em; text-transform:uppercase;color:var(--accent-warn); border:1px solid var(--accent-warn-bd);background:var(--accent-warn-bg); padding:.06rem .35rem; } .hr-ssn-row{display:flex;gap:.4rem;align-items:center;} .hr-ssn-row input{flex:1;font-family:var(--chat-font);letter-spacing:.05em;} .hr-empty{ color:var(--muted);font-style:italic;font-size:.85rem;padding:.45rem 0; } .hr-file-chip{ display:flex;align-items:center;gap:.6rem; background:var(--rich);border:1px solid var(--border); padding:.55rem .65rem;flex-wrap:wrap; } .hr-note-add{ display:grid;grid-template-columns:1fr auto;gap:.5rem; margin-bottom:.9rem; } .hr-note-add textarea{ background:var(--card);border:1px solid var(--border);color:var(--cream); padding:.55rem .7rem;font-family:var(--chat-font);font-size:.95rem; outline:none;resize:vertical;min-height:48px; } .hr-note-add textarea:focus{border-color:var(--gold-dim);} .hr-notes-list{display:flex;flex-direction:column;gap:.5rem;} .hr-note{ background:var(--card);border:1px solid var(--border); padding:.7rem .9rem;position:relative; } .hr-note-meta{ font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.18em; color:var(--gold-dim);text-transform:uppercase;margin-bottom:.35rem; } .hr-note-body{ color:var(--cream-dim);font-size:.92rem;line-height:1.55; font-family:var(--chat-font);white-space:pre-wrap; } .hr-note-rm{ position:absolute;top:.4rem;right:.4rem; width:24px;height:24px;font-size:.95rem;line-height:1;padding:0; opacity:.5; } .hr-note:hover .hr-note-rm{opacity:1;} .hr-account{ background:var(--card);border:1px solid var(--border); padding:1rem 1.3rem; } .hr-account-row{ display:flex;justify-content:space-between;align-items:center; padding:.5rem 0;border-bottom:1px solid rgba(201,168,76,.05);gap:.6rem;flex-wrap:wrap; } .hr-account-row:last-of-type{border-bottom:none;} .hr-account-row > span:first-child{ font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.2em; text-transform:uppercase;color:var(--gold-dim); } .hr-account-row strong{color:var(--cream);font-weight:500;} .hr-account-actions{ display:flex;gap:.5rem;margin-top:.7rem;padding-top:.7rem; border-top:1px solid var(--border);flex-wrap:wrap; } /* ── Schedule day calendar row (holidays + events) ── */ .sched-cal-row{ display:flex;flex-direction:column;gap:.3rem; margin:.45rem 0 .2rem;padding:.4rem .5rem; background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.12); } .sched-holiday{ font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.2em; text-transform:uppercase;color:var(--gold); } .sched-event-link{ display:block; font-family:var(--chat-font);font-size:.82rem;color:var(--cream); text-decoration:none; border-left:2px solid var(--gold-dim);padding:.18rem .45rem; background:rgba(201,168,76,.07); word-wrap:break-word; } .sched-event-link:hover{background:rgba(201,168,76,.14);color:var(--gold-light);} /* ── Messages panel ── */ .msg-grid{ display:grid;grid-template-columns:300px 1fr;gap:0; background:var(--card);border:1px solid var(--border); min-height:520px;overflow:hidden; } @media (max-width:780px){.msg-grid{grid-template-columns:1fr;}} .msg-sidebar{ border-right:1px solid var(--border); display:flex;flex-direction:column; } @media (max-width:780px){.msg-sidebar{border-right:none;border-bottom:1px solid var(--border);}} .msg-side-head{ display:flex;justify-content:space-between;align-items:center;gap:.6rem; padding:.85rem 1rem;border-bottom:1px solid var(--border); font-family:'Josefin Sans',sans-serif;font-size:.55rem;letter-spacing:.22em; text-transform:uppercase;color:var(--gold-dim); } .msg-conv-list{flex:1;overflow-y:auto;max-height:480px;} .msg-conv-item{ display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center; padding:.7rem 1rem;border-bottom:1px solid rgba(201,168,76,.05); cursor:pointer;transition:background .15s; } .msg-conv-item:hover{background:rgba(201,168,76,.04);} .msg-conv-item.active{background:rgba(201,168,76,.08);border-left:2px solid var(--gold);padding-left:calc(1rem - 2px);} .msg-conv-avatar .emp-photo{width:36px;height:36px;font-size:.9rem;} .msg-conv-avatar .emp-photo-broadcast{font-size:.95rem;} .msg-conv-info{min-width:0;} .msg-conv-name{ font-family:var(--chat-font);font-weight:600;color:var(--cream);font-size:.95rem; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em; } .msg-conv-snippet{ font-family:var(--chat-font); font-size:.82rem;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:.15rem; } .msg-bcast-pill{ display:inline-block;font-family:'Josefin Sans',sans-serif;font-size:.42rem; letter-spacing:.18em;text-transform:uppercase;color:var(--gold); border:1px solid var(--gold-dim);padding:.06rem .35rem;background:rgba(201,168,76,.08); } .msg-bcast-pill.group{ color:var(--accent-info);border-color:var(--accent-info-bd);background:var(--accent-info-bg); } .msg-unread-dot{ background:var(--gold);color:var(--black); font-family:'Josefin Sans',sans-serif;font-size:.6rem;font-weight:bold; min-width:18px;height:18px;border-radius:9px; display:flex;align-items:center;justify-content:center;padding:0 .35rem; } .msg-conv-empty{color:var(--muted);font-style:italic;padding:1.4rem;text-align:center;font-size:.85rem;} .msg-thread-pane{display:flex;flex-direction:column;} .msg-thread-empty{ flex:1;display:flex;align-items:center;justify-content:center; color:var(--muted);font-style:italic;padding:2rem;text-align:center; } .msg-thread-head{ display:flex;align-items:center;gap:.7rem; padding:.85rem 1.1rem;border-bottom:1px solid var(--border);background:var(--rich); } .msg-thread-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;} .msg-thread-avatar .emp-photo{width:38px;height:38px;font-size:.9rem;} /* When the avatar is a