/* ════════════════════════════════════════════════════════════════ BookEasy — shared app styles (shell + tokens + components) Used by every authenticated page. Dark default, light via . ════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --indigo:#6366f1; --indigo-bright:#818cf8; --indigo-soft:#a5b4fc; --violet:#a78bfa; --emerald:#34d399; --amber:#fbbf24; --rose:#fb7185; --sky:#60a5fa; --bg:#0A0E1A; --bg-2:#0C1120; --surface:#141A2B; --surface-2:#1A2236; --raised:#202A42; --hair:rgba(148,163,210,0.12); --hair-2:rgba(148,163,210,0.18); --text:#EEF1F8; --muted:#9AA4BC; --muted-2:#6B7590; --shadow: 0 24px 60px -34px rgba(0,0,0,0.75); --ease:cubic-bezier(0.2,0.7,0.2,1); --header-h:58px; --sidebar-w:264px; color-scheme: dark; } html[data-theme="light"], body[data-theme="light"] { --bg:#F4F6FC; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7F8FD; --raised:#FFFFFF; --hair:rgba(30,41,79,0.10); --hair-2:rgba(30,41,79,0.15); --text:#18213B; --muted:#59617A; --muted-2:#8B93A8; --indigo-soft:#4F46E5; --emerald:#0E9F6E; --amber:#B7791F; --rose:#E11D6B; --sky:#2563EB; --shadow: 0 20px 48px -34px rgba(40,46,92,0.4); color-scheme: light; } body { font-family:'Inter',system-ui,sans-serif; color:var(--text); -webkit-font-smoothing:antialiased; min-height:100vh; position:relative; z-index:0; background-color:var(--bg); background-image: linear-gradient(rgba(148,163,210,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,210,0.035) 1px, transparent 1px); background-size:58px 58px, 58px 58px; background-attachment:fixed; } /* Aurora glow layer — sits behind content, above the grid + base fill. */ body::before { content:''; position:fixed; inset:-15% -10%; z-index:-1; pointer-events:none; background: radial-gradient(38% 42% at 82% 2%, rgba(99,102,241,0.20), transparent 62%), radial-gradient(34% 38% at 6% 10%, rgba(167,139,250,0.14), transparent 60%), radial-gradient(40% 36% at 95% 96%, rgba(96,165,250,0.10), transparent 64%); will-change:transform; } @media (prefers-reduced-motion: no-preference) { body::before { animation:auroraDrift 34s ease-in-out infinite alternate; } } @keyframes auroraDrift { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(-2.5%,1.8%,0) scale(1.06); } } html[data-theme="light"] body { background-image: linear-gradient(rgba(30,41,79,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(30,41,79,0.04) 1px, transparent 1px); } html[data-theme="light"] body::before { background: radial-gradient(38% 42% at 82% 2%, rgba(99,102,241,0.12), transparent 62%), radial-gradient(34% 38% at 6% 10%, rgba(167,139,250,0.10), transparent 60%), radial-gradient(40% 36% at 95% 96%, rgba(96,165,250,0.08), transparent 64%); } h1,h2,h3,h4,.tnum { font-family:'Inter Tight','Inter',sans-serif; } a { color:inherit; text-decoration:none; } ::selection { background:rgba(99,102,241,0.3); } .tnum { font-variant-numeric: tabular-nums; letter-spacing:-0.02em; } /* ── Header ─────────────────────────────────────────────── */ .app-header { position:fixed; top:0; left:0; right:0; height:var(--header-h); z-index:200; background:var(--surface); border-bottom:1px solid var(--hair); display:flex; align-items:center; gap:0.5rem; padding:0 1rem 0 0.65rem; } .icon-btn { width:38px; height:38px; flex-shrink:0; display:grid; place-items:center; background:transparent; border:none; border-radius:9px; color:var(--muted); cursor:pointer; transition:background 0.15s, color 0.15s; } .icon-btn:hover { background:rgba(148,163,210,0.09); color:var(--text); } .icon-btn svg { width:19px; height:19px; } .h-logo { display:inline-flex; align-items:center; gap:0.55rem; font-family:'Inter Tight'; font-weight:700; font-size:1.15rem; letter-spacing:-0.02em; margin-right:auto; padding-left:0.35rem; } .h-logo .mk { width:28px; height:28px; border-radius:8px; flex-shrink:0; background:linear-gradient(150deg,var(--indigo),var(--violet)); display:grid; place-items:center; box-shadow:0 4px 12px rgba(99,102,241,0.45); } .h-logo .mk svg { width:65%; height:65%; } .h-logo .e { color:var(--indigo-soft); } .h-actions { display:flex; align-items:center; gap:0.4rem; } .h-support { font-family:inherit; background:transparent; border:none; font-size:0.85rem; font-weight:500; color:var(--muted); padding:0.45rem 0.7rem; border-radius:8px; cursor:pointer; transition:color 0.15s, background 0.15s; } .h-support:hover { color:var(--text); background:rgba(148,163,210,0.09); } .profile-btn { display:flex; align-items:center; gap:0.5rem; background:transparent; border:1px solid var(--hair-2); border-radius:9px; padding:0.28rem 0.6rem 0.28rem 0.36rem; cursor:pointer; font-family:inherit; transition:background 0.15s, border-color 0.15s; } .profile-btn:hover { background:rgba(148,163,210,0.06); border-color:var(--indigo); } .avatar { width:27px; height:27px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:0.72rem; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--indigo),var(--violet)); } .profile-btn .pname { font-size:0.82rem; font-weight:600; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); } .profile-btn .chev { color:var(--muted-2); } /* ── Sidebar ────────────────────────────────────────────── */ .sidebar { position:fixed; left:0; top:var(--header-h); bottom:0; width:var(--sidebar-w); z-index:150; background:var(--surface); border-right:1px solid var(--hair); display:flex; flex-direction:column; padding:0.9rem 0.7rem; } .nav-group { display:flex; flex-direction:column; gap:0.12rem; } .nav-cap { font-size:0.68rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted-2); padding:0.5rem 0.85rem 0.4rem; } .nav-link { display:flex; align-items:center; gap:0.8rem; padding:0.62rem 0.85rem; border-radius:10px; color:var(--muted); font-size:0.92rem; font-weight:500; transition:background 0.14s, color 0.14s; position:relative; } .nav-link svg { width:19px; height:19px; flex-shrink:0; opacity:0.9; } .nav-link:hover { background:rgba(148,163,210,0.07); color:var(--text); } .nav-link.active { background:rgba(99,102,241,0.14); color:var(--indigo-soft); font-weight:600; } .nav-link.active svg { opacity:1; } .nav-link.active::before { content:''; position:absolute; left:-0.7rem; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--indigo); } .nav-badge { margin-left:auto; font-size:0.7rem; font-weight:700; color:var(--amber); background:rgba(251,191,36,0.14); border-radius:999px; padding:0.05rem 0.42rem; } .nav-div { height:1px; background:var(--hair); margin:0.7rem 0.5rem; } .sb-card { margin-top:auto; background:linear-gradient(180deg,var(--surface-2),var(--bg-2)); border:1px solid var(--hair); border-radius:13px; padding:0.95rem 1rem; } .sb-card .t { font-size:0.82rem; font-weight:700; } .sb-card .s { font-size:0.76rem; color:var(--muted); margin-top:0.2rem; line-height:1.45; } .sb-card .link { display:inline-flex; align-items:center; gap:0.3rem; margin-top:0.65rem; font-size:0.78rem; font-weight:600; color:var(--indigo-soft); } /* ── Main / layout ──────────────────────────────────────── */ .main { margin-top:var(--header-h); margin-left:var(--sidebar-w); min-height:calc(100vh - var(--header-h)); } .container { max-width:1180px; margin:0 auto; padding:2.1rem 2rem 4rem; } .page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.8rem; } .page-head .head-text { flex:0 1 auto; } .page-head h1 { font-size:1.6rem; font-weight:700; letter-spacing:-0.025em; line-height:1.15; } @media (min-width:760px) { .page-head h1 { white-space:nowrap; } } .page-head .sub { color:var(--muted); font-size:0.9rem; margin-top:0.3rem; display:flex; align-items:center; gap:0.4rem; } .booking-link { color:var(--indigo-soft); font-weight:600; display:inline-flex; align-items:center; gap:0.25rem; } .booking-link:hover { text-decoration:underline; } .head-actions { display:flex; gap:0.6rem; flex-shrink:0; } /* ── Buttons ────────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; gap:0.5rem; font-family:inherit; font-weight:600; font-size:0.88rem; line-height:1; padding:0.7rem 1.15rem; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:transform 0.16s var(--ease), background 0.16s, border-color 0.16s, box-shadow 0.2s; white-space:nowrap; } .btn svg { width:16px; height:16px; } .btn-primary { background:var(--indigo); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 20px rgba(79,70,229,0.35); } .btn-primary:hover { background:#5457ee; transform:translateY(-1px); } .btn-ghost { background:transparent; color:var(--text); border-color:var(--hair-2); } .btn-ghost:hover { background:rgba(148,163,210,0.06); border-color:var(--indigo); } .btn-sm { padding:0.5rem 0.85rem; font-size:0.82rem; } /* ── Section header ─────────────────────────────────────── */ .sec-head { display:flex; align-items:center; gap:0.7rem; margin:0 0 1rem; } .sec-head h2 { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted-2); } .sec-head .line { flex:1; height:1px; background:var(--hair); } .sec-head .link { font-size:0.8rem; font-weight:600; color:var(--indigo-soft); } /* ── Cards / grid helpers ───────────────────────────────── */ .grid { display:grid; gap:1rem; } .card { background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--hair); border-radius:14px; } .panel { background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--hair); border-radius:14px; overflow:hidden; } /* ── Status badges ──────────────────────────────────────── */ .badge { display:inline-flex; align-items:center; gap:0.32rem; padding:0.25rem 0.6rem; border-radius:999px; font-size:0.73rem; font-weight:600; text-transform:capitalize; white-space:nowrap; } .badge .bd { width:6px; height:6px; border-radius:50%; } .badge.pending { background:rgba(251,191,36,0.13); color:var(--amber); } .badge.pending .bd { background:var(--amber); } .badge.confirmed { background:rgba(52,211,153,0.12); color:var(--emerald); } .badge.confirmed .bd { background:var(--emerald); } .badge.cancelled { background:rgba(251,113,133,0.12); color:var(--rose); } .badge.cancelled .bd { background:var(--rose); } .badge.neutral { background:rgba(148,163,210,0.12); color:var(--muted); } .badge.neutral .bd { background:var(--muted); } /* ── Avatars ────────────────────────────────────────────── */ .c-av { border-radius:9px; flex-shrink:0; display:grid; place-items:center; font-weight:700; color:#fff; } /* ── Icon action buttons ────────────────────────────────── */ .ab { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--hair-2); border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; transition:all 0.14s; } .ab svg { width:15px; height:15px; } .ab:hover { color:var(--text); border-color:var(--muted-2); } .ab.confirm:hover { color:var(--emerald); border-color:var(--emerald); background:rgba(52,211,153,0.08); } .ab.cancel:hover { color:var(--rose); border-color:var(--rose); background:rgba(251,113,133,0.08); } /* ── Search input ───────────────────────────────────────── */ .search { position:relative; } .search svg { position:absolute; left:0.8rem; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted-2); pointer-events:none; } .search input { width:100%; background:var(--bg-2); border:1px solid var(--hair-2); border-radius:10px; padding:0.62rem 0.9rem 0.62rem 2.3rem; color:var(--text); font-family:inherit; font-size:0.88rem; outline:none; transition:border-color 0.16s; } .search input::placeholder { color:var(--muted-2); } .search input:focus { border-color:var(--indigo); } /* ── Table ──────────────────────────────────────────────── */ .tbl-wrap { background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--hair); border-radius:14px; overflow:hidden; } table.tbl { width:100%; border-collapse:collapse; } table.tbl thead th { text-align:left; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted-2); padding:0.85rem 1.2rem; border-bottom:1px solid var(--hair); white-space:nowrap; } table.tbl tbody td { padding:0.85rem 1.2rem; border-bottom:1px solid var(--hair); font-size:0.9rem; vertical-align:middle; } table.tbl tbody tr:last-child td { border-bottom:none; } table.tbl tbody tr { transition:background 0.14s; } table.tbl tbody tr:hover { background:rgba(148,163,210,0.04); } .td-name { display:flex; align-items:center; gap:0.7rem; } .td-name .nm { font-weight:600; } .td-name .meta { font-size:0.78rem; color:var(--muted-2); margin-top:0.1rem; } .cell-muted { color:var(--muted); } .row-actions { display:flex; gap:0.3rem; justify-content:flex-end; } /* ── Forms (settings / profile) ─────────────────────────── */ .settings-card { background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--hair); border-radius:14px; padding:1.5rem 1.6rem; margin-bottom:1.3rem; } .settings-card .sc-h { margin-bottom:1.3rem; } .settings-card .sc-h .t { font-size:1.02rem; font-weight:600; letter-spacing:-0.01em; } .settings-card .sc-h .d { font-size:0.84rem; color:var(--muted); margin-top:0.25rem; } .field { margin-bottom:1.1rem; } .field:last-child { margin-bottom:0; } .field > label { display:block; font-size:0.8rem; font-weight:600; color:var(--text); margin-bottom:0.45rem; } .field .hint { font-size:0.76rem; color:var(--muted-2); margin-top:0.4rem; } .input, .textarea, select.input { width:100%; background:var(--bg-2); border:1px solid var(--hair-2); border-radius:9px; padding:0.65rem 0.9rem; color:var(--text); font-family:inherit; font-size:0.9rem; outline:none; transition:border-color 0.15s; } .input::placeholder, .textarea::placeholder { color:var(--muted-2); } .input:focus, .textarea:focus, select.input:focus { border-color:var(--indigo); } .textarea { min-height:90px; resize:vertical; line-height:1.55; } .input-group { display:flex; align-items:center; background:var(--bg-2); border:1px solid var(--hair-2); border-radius:9px; overflow:hidden; transition:border-color 0.15s; } .input-group:focus-within { border-color:var(--indigo); } .input-group .pre { padding:0.65rem 0 0.65rem 0.9rem; color:var(--muted-2); font-size:0.9rem; white-space:nowrap; } .input-group input { flex:1; background:transparent; border:none; padding:0.65rem 0.9rem 0.65rem 0.15rem; color:var(--text); font-family:inherit; font-size:0.9rem; outline:none; } .field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } @media (max-width:600px){ .field-row { grid-template-columns:1fr; } } /* segmented control */ .segmented { display:inline-flex; gap:0.2rem; background:var(--bg-2); border:1px solid var(--hair-2); border-radius:10px; padding:0.25rem; } .segmented button { display:inline-flex; align-items:center; gap:0.4rem; font-family:inherit; font-size:0.85rem; font-weight:600; color:var(--muted); background:transparent; border:none; border-radius:7px; padding:0.5rem 0.95rem; cursor:pointer; transition:background 0.14s, color 0.14s; } .segmented button svg { width:15px; height:15px; } .segmented button.on { background:var(--indigo); color:#fff; } /* toggle switch */ .switch-row { display:flex; align-items:center; gap:1rem; padding:0.85rem 0; border-bottom:1px solid var(--hair); } .switch-row:last-child { border-bottom:none; } .switch-row .sr-text { flex:1; } .switch-row .sr-text .t { font-size:0.9rem; font-weight:600; } .switch-row .sr-text .d { font-size:0.78rem; color:var(--muted-2); margin-top:0.15rem; } .switch { position:relative; width:42px; height:24px; flex-shrink:0; cursor:pointer; } .switch input { position:absolute; opacity:0; width:0; height:0; } .switch .track { position:absolute; inset:0; background:rgba(148,163,210,0.25); border-radius:999px; transition:background 0.18s; } .switch .track::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform 0.18s; box-shadow:0 1px 3px rgba(0,0,0,0.3); } .switch input:checked + .track { background:var(--indigo); } .switch input:checked + .track::after { transform:translateX(18px); } /* ── Mobile ─────────────────────────────────────────────── */ @media (max-width:860px) { .sidebar { transform:translateX(-100%); transition:transform 0.22s var(--ease); box-shadow:var(--shadow); } body.sb-open .sidebar { transform:none; } .main { margin-left:0; } .container { padding:1.5rem 1.1rem 3rem; } }