style.css

 .management-view{display:none}.management-view.visible{display:block}.management-panel{min-height:430px}.compact{width:260px;margin:0}.customer-list{padding:0 19px 12px}.customer-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line)}.customer-row div:nth-child(2){flex:1}.customer-row strong,.customer-row span{display:block}.customer-row strong{font-size:12px}.customer-row span{font-size:10px;color:var(--muted);margin-top:3px}.customer-row .tag{background:var(--green);border:0;color:var(--green-ink)}.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.price-card{background:#fff;border:1px solid #ebe9e5;border-radius:10px;padding:18px}.price-card h3{font:600 14px 'Space Grotesk';margin:0 0 5px}.price-card p{font-size:10px;color:var(--muted);margin:0 0 17px}.price-card strong{font:600 21px 'Space Grotesk';color:#bf654f}.broadcast-panel{max-width:620px;padding:22px}.broadcast-panel form{display:grid;gap:15px}.broadcast-panel label{display:grid;gap:6px;color:var(--muted);font-size:11px;font-weight:600}.broadcast-panel select,.broadcast-panel textarea{border:1px solid var(--line);border-radius:6px;padding:10px;background:#fdfcfb;outline:0;font-size:11px}.broadcast-panel .save-appointment{width:max-content}@media(max-width:760px){.price-grid{grid-template-columns:1fr}.compact{width:190px}}
*{box-sizing:border-box} :root{--ink:#252728;--muted:#777b79;--line:#e7e5e0;--paper:#fff;--canvas:#f6f3ee;--coral:#ed7f68;--coral-soft:#fbe8e2;--green:#dff3e9;--green-ink:#287452;--yellow:#fff2b8;--lav:#eceafa;--navy:#303b42}body{margin:0;background:var(--canvas);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;color:inherit;background:none}.app-shell{display:flex;min-height:100vh}.sidebar{width:238px;background:#fdfcf9;border-right:1px solid var(--line);padding:26px 14px 15px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;padding:0 12px 28px}.brand-mark{background:var(--coral);color:#fff;font-family:'Space Grotesk';font-weight:700;font-size:14px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center}.brand strong,.brand span{display:block}.brand strong{font-family:'Space Grotesk';font-size:16px}.brand span{font-size:10px;color:var(--muted);letter-spacing:.04em;margin-top:1px}.workspace-switcher{border:1px solid var(--line);border-radius:10px;padding:9px;display:flex;align-items:center;gap:8px;margin:0 6px 28px;background:#fff}.workspace-switcher div:nth-child(2){flex:1;min-width:0}.workspace-switcher small,.workspace-switcher strong{display:block}.workspace-switcher small{font-size:10px;color:var(--muted)}.workspace-switcher strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-switcher svg{width:13px;color:var(--muted)}.workspace-avatar,.mini-avatar{width:27px;height:27px;border-radius:8px;background:#eed8c9;display:grid;place-items:center;color:#815d4c;font-weight:700;font-size:11px}.main-nav{display:grid;gap:3px}.nav-item{height:38px;display:flex;align-items:center;gap:11px;padding:0 12px;color:#6d716e;text-decoration:none;border-radius:8px;font-weight:500}.nav-item svg{width:17px;height:17px}.nav-item b{margin-left:auto;background:var(--coral-soft);color:#c35f4d;border-radius:5px;padding:2px 6px;font-size:10px}.nav-item em{margin-left:auto;background:#e1f3eb;color:#287452;border-radius:4px;font-style:normal;font-size:9px;padding:3px 5px}.nav-item.active,.nav-item:hover{background:#f5ebe6;color:var(--ink)}.nav-section-label{font-size:10px;color:#a1a29e;text-transform:uppercase;letter-spacing:.11em;margin:27px 12px 9px}.sidebar-bottom{margin-top:auto;padding:19px 8px 16px;border-top:1px solid var(--line)}.team-title{display:flex;justify-content:space-between;color:#858987;font-size:11px;margin-bottom:10px}.team-member{height:34px;display:flex;align-items:center;gap:8px;font-size:12px}.team-member small{color:#aaa;margin-left:auto}.status-dot,.status-away{width:6px;height:6px;border-radius:50%;background:#64bd8c}.status-away{background:#e5b75c}.coral{background:#f4c2b6;color:#a64d3e}.mint{background:#c8e9d9;color:#32785b}.yellow{background:#f6e5a1;color:#97751d}.brand-avatar{background:var(--coral);color:#fff}.sidebar-footer{border-top:1px solid var(--line);padding:15px 5px 0;display:flex;align-items:center;gap:8px}.sidebar-footer div:nth-child(2){flex:1}.sidebar-footer strong,.sidebar-footer small{display:block}.sidebar-footer strong{font-size:11px}.sidebar-footer small{color:var(--muted);font-size:10px}.sidebar-footer svg{width:16px;color:#a1a29e}.main-content{flex:1;min-width:0;padding:36px 38px 45px;max-width:1700px;margin:0 auto}.topbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:29px}.eyebrow{color:#989b98;font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px}.topbar h1{font:600 25px 'Space Grotesk';margin:0;letter-spacing:0}.topbar h1 span{color:var(--coral);font-size:18px}.top-actions{display:flex;align-items:center;gap:10px}.icon-button{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:#777b79}.icon-button:hover{background:#ece9e3}.icon-button svg{width:16px}.notification-button{position:relative;width:32px;height:32px;color:#777b79}.notification-button svg{width:17px}.notification-button span{position:absolute;right:6px;top:5px;width:5px;height:5px;border-radius:50%;background:var(--coral)}.new-conversation,.save-appointment{background:var(--navy);color:#fff;padding:10px 14px;border-radius:7px;font-weight:600;font-size:12px;display:flex;align-items:center;gap:7px;box-shadow:0 3px 8px #25333b16}.new-conversation:hover,.save-appointment:hover{background:#202a30}.new-conversation svg,.save-appointment svg{width:15px}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:22px}.stat-card{background:var(--paper);border:1px solid #efede9;border-radius:10px;padding:17px 15px;display:flex;gap:12px;min-width:0;box-shadow:0 3px 12px #493b2c05}.stat-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;flex:0 0 auto}.stat-icon svg{width:16px}.peach{background:#fce8df;color:#d56c54}.green{background:var(--green);color:#4a9a75}.lemon{background:var(--yellow);color:#b58c20}.lavender{background:var(--lav);color:#756bb3}.stat-card span,.stat-card strong,.stat-card small{display:block}.stat-card span{font-size:10px;color:#8a8e8a;margin:1px 0 5px}.stat-card strong{font:600 20px 'Space Grotesk'}.stat-card small{font-size:10px;color:var(--green-ink);margin-top:4px}.stat-card label{color:#a1a4a0;margin-left:3px}.workspace-grid{display:grid;grid-template-columns:minmax(270px,1fr) minmax(390px,1.65fr) minmax(240px,.85fr);gap:14px;align-items:stretch}.panel{background:#fff;border:1px solid #ebe9e5;border-radius:10px;box-shadow:0 3px 12px #493b2c05}.inbox-panel,.chat-panel{min-height:650px}.panel-heading,.chat-header{display:flex;justify-content:space-between;align-items:flex-start;padding:19px 19px 15px}.panel h2{font:600 17px 'Space Grotesk';margin:0}.panel-heading p{color:#999c99;font-size:11px;margin:5px 0 0}.count-pill{font:500 10px 'DM Sans';background:var(--coral-soft);color:#bf654f;padding:3px 6px;border-radius:5px;vertical-align:2px}.inbox-tabs{display:flex;gap:4px;padding:0 19px;border-bottom:1px solid var(--line)}.tab{padding:9px 10px 11px;color:#999c99;font-size:11px;position:relative}.tab.active{color:var(--ink);font-weight:700}.tab.active:after{content:'';height:2px;background:var(--coral);position:absolute;bottom:-1px;left:7px;right:7px}.tab span{font-size:10px;margin-left:3px}.search-field{margin:14px 17px 9px;background:#faf9f7;border:1px solid #eeece8;border-radius:7px;height:33px;display:flex;align-items:center;padding:0 9px;gap:7px;color:#aaa}.search-field svg{width:14px}.search-field input{border:0;outline:0;background:transparent;font-size:11px;width:100%}.conversation-list{padding-bottom:5px}.conversation{display:flex;gap:9px;padding:12px 17px;border-left:3px solid transparent;cursor:pointer}.conversation:hover{background:#fcfaf8}.conversation.selected{background:#fff5f0;border-left-color:var(--coral)}.customer-avatar{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:10px;font-weight:700;flex:0 0 auto}.conversation-main{min-width:0;flex:1}.conversation-top{display:flex;justify-content:space-between;gap:5px}.conversation strong{font-size:12px}.conversation time{font-size:9px;color:#a5a6a2}.conversation p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#8b8e8b;font-size:10px;margin:4px 0 0}.unread-dot{display:inline-block;width:5px;height:5px;background:var(--coral);border-radius:50%;margin-left:4px;vertical-align:2px}.chat-panel{display:flex;flex-direction:column}.chat-header{border-bottom:1px solid var(--line);align-items:center}.chat-header .chat-title{flex:1;margin-left:10px}.chat-title h2{font-size:15px}.chat-title p{font-size:10px;color:#72a083;margin:4px 0 0}.verified svg{width:13px;color:#4a9a75;vertical-align:-2px}.large{width:36px;height:36px}.chat-actions{display:flex;gap:2px}.chat-body{padding:19px 23px;flex:1;overflow:auto;background:#fdfcfb}.date-divider{text-align:center;color:#aaa;font-size:10px;margin:0 0 20px;display:flex;align-items:center;gap:9px}.date-divider:before,.date-divider:after{content:'';height:1px;background:#edeae5;flex:1}.message{max-width:74%;padding:10px 12px;border-radius:10px;margin:9px 0;position:relative}.message p{font-size:11px;line-height:1.45;margin:0}.message time{display:block;color:#a6aaa5;font-size:9px;text-align:right;margin-top:5px}.message time svg{width:11px;height:11px;color:#4eaf7b;vertical-align:-2px}.received{background:#f1f0ec;border-top-left-radius:3px}.sent{background:#dcf2e7;margin-left:auto;border-top-right-radius:3px}.message-note{display:flex;gap:7px;align-items:center;background:#fff6cf;color:#8c772f;padding:8px 10px;border-radius:7px;font-size:10px;margin:20px 0 0}.message-note svg{width:14px}.composer{border-top:1px solid var(--line);padding:12px 16px 15px}.quick-replies{display:flex;gap:5px;overflow:auto;margin-bottom:10px}.quick-replies button{border:1px solid #e8e5df;padding:5px 8px;border-radius:5px;white-space:nowrap;font-size:9px;color:#8f928f}.quick-replies svg{width:10px;vertical-align:-3px;margin-left:3px}.composer-row{display:flex;align-items:center;gap:4px;border:1px solid #e2e1de;border-radius:7px;padding:3px 4px 3px 6px}.composer-row input{border:0;outline:0;flex:1;font-size:11px;padding:6px}.composer-row .icon-button{width:25px}.emoji-button{font-size:17px;color:#929692;padding:0 5px}.send-button{background:var(--coral);color:#fff;width:28px;height:28px;border-radius:6px;display:grid;place-items:center}.send-button svg{width:14px}.profile-panel{padding:19px 19px 0;overflow:hidden}.profile-top{display:flex;justify-content:space-between;color:#999c99;font-size:10px;text-transform:uppercase;letter-spacing:.1em}.profile-identity{text-align:center;border-bottom:1px solid var(--line);padding:17px 0 20px}.xlarge{width:57px;height:57px;border-radius:17px;font-size:14px;margin:auto}.profile-identity h2{font:600 16px 'Space Grotesk';margin:10px 0 3px}.profile-identity p{font-size:10px;color:#a1a4a0;margin:0}.profile-tags{display:flex;justify-content:center;gap:5px;margin-top:11px}.tag{display:inline-block;border:1px solid #e6e5e0;border-radius:4px;padding:4px 6px;color:#888c89;font-size:9px}.tag.vip{background:#fff3cd;color:#a68425;border:0}.profile-details{padding:15px 0;border-bottom:1px solid var(--line);display:grid;gap:13px}.detail-row{display:flex;gap:10px;align-items:center}.detail-row svg{width:14px;color:#999c98}.detail-row small,.detail-row strong{display:block}.detail-row small{font-size:9px;color:#a3a6a2;margin-bottom:2px}.detail-row strong{font-size:10px}.profile-section{padding:15px 0;border-bottom:1px solid var(--line)}.profile-section.last{border:0}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.section-heading h3,.upcoming-row h3{font:600 12px 'Space Grotesk';margin:0}.section-heading h3 span{color:#a4a7a3;font:400 10px 'DM Sans';margin-left:3px}.text-button{color:#cd6a56;font-size:10px;display:inline-flex;align-items:center;gap:4px}.pet-item{display:flex;align-items:center;gap:8px;padding:7px 0}.pet-icon{width:29px;height:29px;border-radius:8px;background:#f9e4dc;display:grid;place-items:center;font-size:15px}.pet-icon.cat{background:#edeafa}.pet-item div:nth-child(2){flex:1}.pet-item strong,.pet-item span{display:block}.pet-item strong{font-size:11px}.pet-item span{font-size:9px;color:#999c99;margin-top:2px}.pet-item svg{width:13px;color:#aaa}.all-tags{display:flex;flex-wrap:wrap;gap:5px}.last-order{display:flex;justify-content:space-between;align-items:center}.last-order strong,.last-order span{display:block}.last-order strong{font-size:10px}.last-order span{font-size:9px;color:#a0a39f;margin-top:3px}.order-status{background:var(--green);color:#327b5b;padding:4px 6px;border-radius:4px;font-size:9px}
/* Scheduling */
.schedule-view{display:none}.schedule-view.visible{display:block}.schedule-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.schedule-heading h2{font:600 28px 'Space Grotesk';margin:0}.schedule-heading>div>p:last-child{color:#858a86;font-size:12px;margin:8px 0 0}.schedule-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.week-switcher,.schedule-filters{display:flex;align-items:center;gap:6px}.week-switcher strong{font:600 13px 'Space Grotesk';margin:0 7px}.today-button,.filter-button{border:1px solid var(--line);background:#fff;padding:8px 10px;border-radius:6px;font-size:10px}.today-button{margin-left:6px}.filter-button{display:flex;align-items:center;gap:14px;color:#747874}.filter-button svg{width:12px}.calendar-panel{overflow:hidden}.calendar-grid{display:grid;grid-template-columns:58px repeat(7,1fr);min-width:710px}.calendar-grid>div{border-right:1px solid #efede9;border-bottom:1px solid #efede9}.cal-head{height:61px;padding:12px 7px;text-align:center;background:#fdfcfb}.cal-head span,.cal-head strong{display:block}.cal-head span{color:#a0a39f;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.cal-head strong{font:600 17px 'Space Grotesk';margin-top:6px}.cal-head.today strong{color:var(--coral);background:var(--coral);color:#fff;width:25px;height:25px;border-radius:50%;line-height:25px;margin:3px auto 0}.time-label{height:76px;text-align:center;padding-top:9px;color:#a5a8a3;font-size:9px}.cal-slot{height:76px;padding:5px;position:relative}.calendar-event{border-left:3px solid var(--coral);border-radius:4px;background:#fff0eb;padding:6px;font-size:9px;line-height:1.3}.calendar-event strong,.calendar-event span{display:block}.calendar-event strong{font-size:10px}.calendar-event span{color:#956c61;margin-top:3px}.calendar-event.mint-event{border-color:#65b58d;background:#e6f5ed}.calendar-event.mint-event span{color:#54866d}.calendar-event.lav-event{border-color:#8880cd;background:#f0effc}.calendar-event.lav-event span{color:#746fa5}.upcoming-row{display:flex;justify-content:space-between;align-items:flex-end;margin:27px 0 12px}.upcoming-row p{font-size:11px;color:#969a96;margin:5px 0 0}.upcoming-row .text-button svg{width:12px}.appointment-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.appointment-card{background:#fff;border:1px solid #ebe9e5;border-radius:9px;padding:13px;display:flex;align-items:center;gap:10px}.appointment-card .pet-icon{width:36px;height:36px;font-size:18px}.appointment-card div:nth-child(2){flex:1;min-width:0}.appointment-card strong,.appointment-card span{display:block}.appointment-card strong{font-size:11px}.appointment-card span{font-size:9px;color:#999c99;margin-top:3px}.appointment-time{font-size:10px!important;color:#ae6253!important;font-weight:700}.modal-backdrop{display:none;position:fixed;inset:0;background:#26323870;z-index:10;align-items:center;justify-content:center;padding:20px}.modal-backdrop.open{display:flex}.appointment-modal{background:#fff;border-radius:12px;width:min(430px,100%);padding:23px;box-shadow:0 15px 50px #18202840}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:17px}.modal-header h2{font:600 21px 'Space Grotesk';margin:0}.appointment-modal form{display:grid;gap:12px}.appointment-modal label{display:grid;gap:5px;font-size:10px;color:#777b78;font-weight:600}.appointment-modal input,.appointment-modal select,.appointment-modal textarea{width:100%;border:1px solid #e3e1dd;border-radius:6px;padding:9px;outline:0;font-size:11px;background:#fdfcfb;resize:vertical}.appointment-modal input:focus,.appointment-modal select:focus,.appointment-modal textarea:focus{border-color:var(--coral)}.form-split{display:grid;grid-template-columns:1fr 1fr;gap:10px}.save-appointment{justify-content:center;margin-top:4px;width:100%;padding:11px}.toast{position:fixed;right:25px;bottom:25px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:7px;font-size:11px;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none;z-index:20}.toast.show{opacity:1;transform:translateY(0)}.toast svg{width:15px;color:#8ce0b3}@media(max-width:1100px){.workspace-grid{grid-template-columns:280px minmax(390px,1fr)}.profile-panel{display:none}.stats-row{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.sidebar{width:62px;padding:18px 8px}.brand{padding:0 6px 24px}.brand>div:last-child,.workspace-switcher>div:not(.workspace-avatar),.workspace-switcher>svg,.nav-item span,.nav-item b,.nav-item em,.nav-section-label,.sidebar-bottom,.sidebar-footer>div:not(.mini-avatar),.sidebar-footer>svg{display:none}.workspace-switcher{margin:0 0 16px;justify-content:center;border:0;background:transparent;padding:0}.nav-item{justify-content:center;padding:0}.main-content{padding:23px 14px}.topbar h1{font-size:20px}.desktop-search{display:none}.new-conversation{font-size:0;padding:10px}.new-conversation svg{margin:0}.stats-row{grid-template-columns:1fr 1fr;gap:8px}.stat-card{padding:12px 10px}.stat-card strong{font-size:16px}.stat-card label{display:none}.workspace-grid{display:block}.inbox-panel{display:none}.chat-panel{min-height:600px}.schedule-heading{display:block}.schedule-heading h2{font-size:23px}.schedule-heading .new-conversation{font-size:12px;margin-top:14px;padding:10px 14px}.schedule-toolbar{display:block}.schedule-filters{margin-top:10px}.calendar-panel{overflow-x:auto}.appointment-cards{grid-template-columns:1fr}.schedule-view{margin-top:10px}}