/* Anandoham Clinician Dashboard — brand palette ported from the booking site (tailwind.config.js) so admin. matches book. visually. THEMING Light is the default. The dark palette lives in ONE place (:root[data-theme="dark"]); an inline script in stamps data-theme on before first paint, from localStorage or the OS setting, so there's no flash and no duplicated CSS block. DESIGN INTENT (ADHD-friendly, per Dev's brief) - One obvious answer per screen. Today's "next session" is the biggest thing on the page; everything else is quieter. - Never make the reader do arithmetic or hold state in their head — show "in 2h 15m", not just "16:00". - Status is colour + text + shape, never colour alone. - Big tap targets (min 44px) — this is used on a phone, one-handed, between clients. - Generous whitespace and short rows so the eye can scan without re-reading. */ :root{ /* Brand constants — identical in both themes */ --emerald:#15A172; --emerald-deep:#0E7A56; --saffron:#E8873C; --gold:#B08D4C; --gold-light:#C9A86A; --gold-pale:#E7D9B8; --rose:#B4453C; --amber:#C08A2E; /* Surfaces + text — these are what the dark theme overrides */ --ink:#1A1F1C; --stone:#5C6660; --mist:#D9DDDA; --paper:#F7F5F0; --cream:#FBF8F1; --white:#fff; /* Tinted fills, re-stated per theme so contrast holds */ --emerald-tint:rgba(21,161,114,.14); --rose-tint:rgba(180,69,60,.12); --amber-tint:rgba(192,138,46,.15); --gold-tint:var(--gold-pale); --gold-tint-ink:#6b5325; --accent-text:var(--emerald-deep); --today-ring:rgba(21,161,114,.5); --r1:8px; --r2:14px; --r3:20px; --shadow:0 4px 6px -1px rgba(0,0,0,.08),0 2px 4px -2px rgba(0,0,0,.06); --shadow-lg:0 10px 30px -8px rgba(0,0,0,.18); } :root[data-theme="dark"]{ --ink:#E9E7E1; --stone:#98A29B; --mist:#333B36; --paper:#101412; --cream:#191F1C; --white:#212926; /* Deep greens go muddy on dark — lift the accent so text and buttons stay legible. */ --emerald:#22C48D; --emerald-deep:#2FD79C; --gold-light:#D8BC82; --rose:#E8746A; --amber:#D9A648; --emerald-tint:rgba(34,196,141,.16); --rose-tint:rgba(232,116,106,.16); --amber-tint:rgba(217,166,72,.16); --gold-tint:rgba(201,168,106,.16); --gold-tint-ink:#D8BC82; --accent-text:#2FD79C; --today-ring:rgba(34,196,141,.55); --shadow:0 4px 6px -1px rgba(0,0,0,.4),0 2px 4px -2px rgba(0,0,0,.3); --shadow-lg:0 10px 30px -8px rgba(0,0,0,.6); color-scheme:dark; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:'DM Sans',system-ui,sans-serif; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; line-height:1.5; transition:background .2s ease,color .2s ease; } h1,h2,h3{font-family:'Fraunces',serif;font-weight:500;margin:0} a{color:var(--accent-text)} /* Layout helpers */ .center-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem} .wrap{max-width:920px;margin:0 auto;padding:1.25rem 1.25rem 4rem} [hidden]{display:none !important} /* Spinner */ .spinner{width:34px;height:34px;border:3px solid var(--mist);border-top-color:var(--emerald);border-radius:50%;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* Brand / logo. Two files, one per theme: the mark has dark lettering on light and cream lettering on dark, so a single image can't serve both. */ /* flex-shrink:0 matters: without it the topbar row squeezes the image to 0 width. */ .logo{height:34px;width:auto;display:block;flex-shrink:0} .logo-dark{display:none} :root[data-theme="dark"] .logo-light{display:none} :root[data-theme="dark"] .logo-dark{display:block} .brand-mark{font-family:'Fraunces',serif;font-size:1.7rem;font-weight:600;color:var(--accent-text);letter-spacing:.01em} .brand-mark.small{font-size:1.15rem} .brand-sub{color:var(--gold);font-weight:500;font-size:.85em} .logo-stack{display:flex;align-items:center;gap:.6rem;min-width:0;flex-shrink:0} .logo-tag{font-family:'Fraunces',serif;font-size:.9rem;color:var(--gold);white-space:nowrap} /* On a phone the logo + account email + two buttons can't all fit. The logo and the controls are what matter; the signed-in address is the thing to drop. */ @media (max-width:640px){ .logo-tag{display:none} .who{display:none} .logo{height:28px} .topbar-inner{padding:.6rem .9rem} } /* Login */ .login-card{background:var(--cream);border:1px solid var(--mist);border-radius:var(--r3);padding:2.25rem 2rem;max-width:400px;width:100%;text-align:center;box-shadow:var(--shadow)} .login-card .logo{height:52px;margin:0 auto 1rem} .login-title{font-size:1.6rem;margin:.75rem 0 .35rem} .login-sub{color:var(--stone);font-size:.95rem;margin:0 0 1.5rem} .g-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:#fff;color:#4285F4;border-radius:50%;font-weight:700;margin-right:.4rem;font-family:Fraunces,serif} /* Top bar */ .topbar{background:var(--cream);border-bottom:1px solid var(--mist);position:sticky;top:0;z-index:20} .topbar-inner{max-width:920px;margin:0 auto;padding:.75rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem} .topbar-right{display:flex;align-items:center;gap:.6rem;flex-shrink:0} .who{color:var(--stone);font-size:.82rem} .tabs{max-width:920px;margin:0 auto;padding:0 1rem;display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab{background:none;border:0;border-bottom:2.5px solid transparent;padding:.7rem .85rem;font-family:inherit;font-size:.92rem;font-weight:500;color:var(--stone);cursor:pointer;white-space:nowrap;min-height:44px} .tab:hover{color:var(--ink)} .tab.active{color:var(--accent-text);border-bottom-color:var(--emerald)} /* Settings tabs are used rarely — separate them so the daily-driver tabs read as a group. */ .tab-divider{width:1px;background:var(--mist);margin:.55rem .45rem;flex-shrink:0} /* Theme toggle */ .icon-btn{background:transparent;border:1px solid var(--mist);border-radius:var(--r1);width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--stone);font-size:1rem;padding:0} .icon-btn:hover{color:var(--ink);border-color:var(--stone)} /* Panels & cards */ .tab-panel{padding-top:1.5rem} .panel-head{margin-bottom:1rem} .panel-head h2{font-size:1.35rem} .panel-head p{color:var(--stone);font-size:.9rem;margin:.3rem 0 0} .card{background:var(--cream);border:1px solid var(--mist);border-radius:var(--r2);padding:1.1rem 1.15rem;margin-bottom:1rem;box-shadow:var(--shadow)} .card-title{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:500;display:flex;align-items:center;gap:.5rem;justify-content:space-between} .card-sub{color:var(--stone);font-size:.82rem;margin-top:.15rem} .muted{color:var(--stone)} .pill{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:.15rem .5rem;border-radius:999px;background:var(--gold-tint);color:var(--gold-tint-ink);white-space:nowrap} .pill.on{background:var(--emerald-tint);color:var(--accent-text)} .pill.off{background:var(--rose-tint);color:var(--rose)} .pill.warn{background:var(--amber-tint);color:var(--amber)} /* Forms */ .field{margin-top:.7rem} .field label{display:block;font-size:.78rem;font-weight:600;color:var(--stone);margin-bottom:.25rem} .field .hint{font-weight:400;color:var(--stone);opacity:.8} input[type=text],input[type=number],input[type=date],input[type=datetime-local],input[type=search],select,textarea{ width:100%;font-family:inherit;font-size:.95rem;color:var(--ink); background:var(--white);border:1px solid var(--mist);border-radius:var(--r1); padding:.55rem .65rem; } input:focus,select:focus,textarea:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 2px var(--emerald-tint)} .row{display:flex;gap:.75rem;flex-wrap:wrap} .row > .field{flex:1;min-width:120px;margin-top:.7rem} .inline{display:flex;align-items:center;gap:.5rem} .days{display:flex;gap:.3rem;flex-wrap:wrap} .day-chip{border:1px solid var(--mist);border-radius:999px;padding:.35rem .65rem;font-size:.8rem;cursor:pointer;user-select:none;background:var(--white);color:var(--ink)} .day-chip.sel{background:var(--emerald);color:#fff;border-color:var(--emerald)} /* Toggle */ .switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0} .switch input{opacity:0;width:0;height:0} .slider{position:absolute;cursor:pointer;inset:0;background:var(--mist);border-radius:999px;transition:.2s} .slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s} .switch input:checked + .slider{background:var(--emerald)} .switch input:checked + .slider:before{transform:translateX(18px)} /* Buttons */ /* text-decoration:none — some buttons are real links (Join Meet, Call). */ .btn{font-family:inherit;font-size:.9rem;font-weight:500;border:1px solid transparent;border-radius:var(--r1);padding:.55rem .95rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;transition:background .15s,color .15s,border-color .15s;min-height:40px;text-decoration:none} .btn:disabled{opacity:.55;cursor:not-allowed} .btn-primary{background:var(--emerald-deep);color:#04150E} .btn-primary:hover:not(:disabled){background:var(--emerald)} :root[data-theme="light"] .btn-primary,:root:not([data-theme]) .btn-primary{color:var(--cream)} :root[data-theme="light"] .btn-primary:hover:not(:disabled),:root:not([data-theme]) .btn-primary:hover:not(:disabled){background:#0b6446} .btn-ghost{background:transparent;color:var(--stone);border-color:var(--mist)} .btn-ghost:hover:not(:disabled){color:var(--ink);border-color:var(--stone)} .btn-danger{background:transparent;color:var(--rose);border-color:var(--rose);opacity:.85} .btn-danger:hover:not(:disabled){background:var(--rose-tint);opacity:1} .btn-sm{padding:.35rem .7rem;font-size:.82rem;min-height:34px} .btn-block{width:100%} .btn-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem} /* Price preview */ .preview{background:var(--paper);border:1px dashed var(--gold);border-radius:var(--r1);padding:.5rem .7rem;font-size:.85rem;color:var(--ink);margin-top:.6rem} .preview .rupee{font-weight:600;color:var(--accent-text)} .strike{text-decoration:line-through;color:var(--stone);opacity:.7} /* Coupon / list rows */ .coupon{border:1px solid var(--mist);border-radius:var(--r1);padding:.7rem .8rem;margin-bottom:.6rem;background:var(--white)} .coupon-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem} .coupon-code{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;letter-spacing:.03em} .coupon-meta{font-size:.8rem;color:var(--stone);margin-top:.25rem;line-height:1.5} .section-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin:1.4rem 0 .5rem} /* Error + toast */ .error-line{color:var(--rose);font-size:.85rem;margin-top:.9rem} .toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;border-radius:var(--r1);font-size:.88rem;box-shadow:var(--shadow-lg);z-index:60;max-width:90vw} .toast.err{background:var(--rose);color:#fff} /* ========================================================== TODAY — the landing page. Answers "what's next?" before the reader has to look for it. ========================================================== */ .hero{background:var(--cream);border:1px solid var(--mist);border-left:4px solid var(--emerald);border-radius:var(--r2);padding:1.25rem 1.3rem;margin-bottom:1rem;box-shadow:var(--shadow-lg)} .hero-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-bottom:.4rem} /* The countdown is the single biggest thing on the page, on purpose. */ .hero-when{font-family:'Fraunces',serif;font-size:2rem;font-weight:600;color:var(--accent-text);line-height:1.1} .hero-when.soon{color:var(--saffron)} .hero-who{font-size:1.15rem;font-weight:600;margin-top:.5rem} .hero-what{color:var(--stone);font-size:.9rem;margin-top:.15rem} .hero-note{background:var(--paper);border:1px dashed var(--gold);border-radius:var(--r1);padding:.55rem .7rem;font-size:.85rem;margin-top:.75rem} .hero-empty{text-align:center;padding:1.5rem 1rem} .hero-empty .big{font-family:'Fraunces',serif;font-size:1.4rem;margin-bottom:.3rem} /* Stat strip */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:.6rem;margin-bottom:1.2rem} .stat{background:var(--cream);border:1px solid var(--mist);border-radius:var(--r1);padding:.65rem .7rem;text-align:center} .stat-num{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;line-height:1.1} .stat-lbl{font-size:.7rem;color:var(--stone);text-transform:uppercase;letter-spacing:.05em;margin-top:.15rem} .stat.alert .stat-num{color:var(--rose)} /* Session rows — the timeline for a day */ .session{display:flex;gap:.8rem;align-items:flex-start;background:var(--white);border:1px solid var(--mist);border-radius:var(--r1);padding:.75rem .8rem;margin-bottom:.55rem;text-align:left;width:100%;font-family:inherit;cursor:pointer;color:var(--ink)} .session:hover{border-color:var(--emerald)} .session.past{opacity:.55} .session.now{border-color:var(--saffron);border-left:3px solid var(--saffron);background:var(--paper)} .session-time{font-family:'Fraunces',serif;font-weight:600;font-size:.95rem;min-width:72px;flex-shrink:0} .session-body{flex:1;min-width:0} .session-who{font-weight:600;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .session-meta{font-size:.78rem;color:var(--stone);margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .session-side{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;flex-shrink:0} .session.diary{border-style:dashed;background:transparent} /* ========================================================== CALENDAR ========================================================== */ .cal-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.8rem;flex-wrap:wrap} .cal-title{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:600} .cal-nav{display:flex;gap:.35rem;align-items:center} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem} .cal-dow{text-align:center;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--stone);padding:.3rem 0} .cal-day{background:var(--cream);border:1px solid var(--mist);border-radius:var(--r1);min-height:74px;padding:.35rem;cursor:pointer;display:flex;flex-direction:column;gap:.2rem;font-family:inherit;color:var(--ink);text-align:left} .cal-day:hover{border-color:var(--emerald)} .cal-day.other{opacity:.35} .cal-day.today{border-color:var(--emerald);box-shadow:0 0 0 2px var(--today-ring)} .cal-day.selected{background:var(--emerald-tint);border-color:var(--emerald)} .cal-daynum{font-size:.8rem;font-weight:600} .cal-chip{font-size:.62rem;background:var(--emerald-tint);color:var(--accent-text);border-radius:3px;padding:.05rem .2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .cal-chip.diary{background:var(--gold-tint);color:var(--gold-tint-ink)} .cal-more{font-size:.6rem;color:var(--stone)} .cal-dots{display:flex;gap:2px;flex-wrap:wrap} .cal-dot{width:5px;height:5px;border-radius:50%;background:var(--emerald)} @media (max-width:560px){ .cal-day{min-height:52px;padding:.25rem} .cal-chip{display:none} .cal-daynum{font-size:.72rem} } /* ========================================================== CLIENTS — directory ========================================================== */ .filter-row{display:flex;gap:.4rem;flex-wrap:wrap;margin:.7rem 0 1rem} .filter-chip{border:1px solid var(--mist);background:var(--white);color:var(--stone);border-radius:999px;padding:.4rem .75rem;font-size:.82rem;font-family:inherit;cursor:pointer;min-height:36px} .filter-chip:hover{color:var(--ink)} .filter-chip.sel{background:var(--emerald);border-color:var(--emerald);color:#fff;font-weight:600} .client-row{display:flex;gap:.7rem;align-items:center;background:var(--white);border:1px solid var(--mist);border-radius:var(--r1);padding:.7rem .8rem;margin-bottom:.5rem;cursor:pointer;width:100%;text-align:left;font-family:inherit;color:var(--ink);min-height:56px} .client-row:hover{border-color:var(--emerald)} .avatar{width:38px;height:38px;border-radius:50%;background:var(--emerald-tint);color:var(--accent-text);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:600;font-size:.95rem;flex-shrink:0} .client-main{flex:1;min-width:0} .client-name{font-weight:600;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .client-sub{font-size:.78rem;color:var(--stone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .client-badges{display:flex;gap:.25rem;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;max-width:45%} .back-link{background:none;border:0;color:var(--stone);font-family:inherit;font-size:.85rem;cursor:pointer;padding:.4rem 0;display:inline-flex;align-items:center;gap:.3rem;min-height:40px} .back-link:hover{color:var(--ink)} .empty{text-align:center;color:var(--stone);padding:2rem 1rem;font-size:.9rem} .banner{background:var(--amber-tint);border:1px solid var(--amber);color:var(--ink);border-radius:var(--r1);padding:.6rem .8rem;font-size:.83rem;margin-bottom:.9rem} .banner.err{background:var(--rose-tint);border-color:var(--rose)}