:root {
  --ink: #17201c;
  --ink-2: #223029;
  --paper: #f7f6f2;
  --white: #fff;
  --line: #e2e5e0;
  --muted: #6d7872;
  --sage: #aebcad;
  --sage-light: #e7ece5;
  --sand: #e3d5bd;
  --blue: #cbdad9;
  --clay: #ddc6b7;
  --orange: #ad5f32;
  --display: "Manrope", sans-serif;
  --body: "DM Sans", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button, input, select { color: inherit; font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 25px 18px 20px; color: #fff; background: #121a16; z-index: 10; }
.admin-logo { display: block; padding: 0 12px 25px; border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-logo img { display: block; width: 168px; filter: invert(1); }
.workspace-label { margin: 25px 12px 13px; color: rgba(255,255,255,.35); font-size: 9px; font-weight: 700; letter-spacing: .19em; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item { width: 100%; min-height: 44px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 4px; color: rgba(255,255,255,.61); background: transparent; text-align: left; font-size: 13px; }
.nav-item:hover, .nav-item.active { color: #fff; background: rgba(255,255,255,.095); }
.nav-item span { color: rgba(255,255,255,.42); font-size: 16px; text-align: center; }
.nav-item em { min-width: 26px; padding: 3px 7px; border-radius: 12px; color: #d9e3d8; background: rgba(174,188,173,.18); font-style: normal; font-size: 9px; text-align: center; }
.nav-item i { width: 6px; height: 6px; border-radius: 50%; background: #e19d71; }
.sidebar-bottom { margin-top: auto; }
.public-site-link { display: block; margin: 9px 12px 20px; color: rgba(255,255,255,.42); font-size: 11px; }
.public-site-link:hover { color: #fff; }
.signed-in { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 10px; padding: 16px 8px 0; border-top: 1px solid rgba(255,255,255,.1); }
.avatar { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; color: var(--ink); background: var(--sage); font-size: 10px; font-weight: 700; }
.signed-in strong, .signed-in small { display: block; }
.signed-in strong { font-size: 11px; }
.signed-in small { margin-top: 3px; color: rgba(255,255,255,.4); font-size: 9px; }
.signed-in button { border: 0; color: rgba(255,255,255,.45); background: transparent; }

.admin-main { min-width: 0; }
.admin-topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 0 3vw; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); backdrop-filter: blur(10px); }
.topbar-context { display: flex; gap: 24px; }
.topbar-context label { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; font-weight: 600; }
.topbar-context select { min-width: 125px; padding: 8px 25px 8px 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--white); font-size: 11px; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.icon-control { position: relative; width: 39px; height: 39px; border: 1px solid var(--line); border-radius: 3px; background: var(--white); font-size: 17px; }
.notification-button span { position: absolute; top: 8px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.primary-button, .secondary-button { min-height: 40px; padding: 0 16px; border-radius: 3px; font-size: 11px; font-weight: 700; }
.primary-button { border: 1px solid var(--ink); color: #fff; background: var(--ink); }
.primary-button:hover { background: var(--ink-2); }
.secondary-button { border: 1px solid var(--line); background: var(--white); }
.mobile-menu { display: none; border: 0; background: transparent; font-size: 20px; }
.role-banner { margin: 18px 3vw -8px; padding: 10px 14px; color: #4b5d51; background: var(--sage-light); border-left: 3px solid #819683; font-size: 11px; }
.role-banner strong { margin-right: 8px; }

.admin-view { display: none; padding: 47px 3vw 60px; }
.admin-view.active { display: block; animation: view-in .2s ease; }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
.page-heading.slim { align-items: center; }
.eyebrow { margin: 0 0 9px; color: #87908b; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
h1, h2, h3 { margin: 0; font-family: var(--display); letter-spacing: -.035em; }
.page-heading h1, .placeholder-view h1 { font-size: clamp(34px, 3.2vw, 49px); font-weight: 500; }
.page-heading p:not(.eyebrow) { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.heading-actions { display: flex; gap: 9px; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 17px; }
.stat-card { min-height: 147px; padding: 20px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.stat-card > span { display: block; color: var(--muted); font-size: 11px; }
.stat-card > strong { display: block; margin: 16px 0 10px; font: 600 33px var(--display); letter-spacing: -.04em; }
.stat-card small { color: #818b85; font-size: 9px; }
.stat-card small.positive { color: #59735d; }
.stat-card.attention { background: #fcf8f4; border-color: #ead9cd; }
.progress { height: 4px; margin-top: 16px; border-radius: 2px; background: #edf0ec; overflow: hidden; }
.progress i { display: block; height: 100%; background: #829886; }
.dashboard-grid, .lower-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(270px, .75fr); gap: 17px; margin-bottom: 17px; }
.panel { border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.panel-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.panel-header.compact { padding: 20px; }
.panel-header .eyebrow { margin-bottom: 6px; }
.panel-header h2 { font-size: 20px; font-weight: 600; }
.text-button { padding: 4px 0; border: 0; color: #5e6a63; background: transparent; font-size: 10px; font-weight: 700; }
.day-panel { position: relative; }
.now-line { position: absolute; top: 157px; left: 20px; right: 20px; height: 1px; background: #bf744d; z-index: 2; }
.now-line::before { content: ""; position: absolute; left: 57px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #bf744d; }
.now-line span { position: absolute; top: -7px; left: 0; color: #a65f3b; background: #fff; font-size: 8px; font-weight: 700; }
.day-list { padding: 15px 20px 22px; }
.day-row { min-height: 81px; display: grid; grid-template-columns: 52px repeat(2, 1fr); gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px dashed #e6e8e4; }
.day-row:last-child { border-bottom: 0; }
.day-row time { padding-top: 11px; color: #7c8680; font-size: 10px; }
.booking-card { min-width: 0; min-height: 60px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px; padding: 9px 11px; border-left: 3px solid #829687; border-radius: 3px; background: #eef2ed; }
.booking-card.newbridge-booking { border-left-color: #b79064; background: #f4eee6; }
.booking-card strong, .booking-card small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.booking-card strong { font-size: 10px; }
.booking-card small { margin-top: 4px; color: #717c76; font-size: 8px; }
.booking-card em { color: #64736a; font-style: normal; font-size: 8px; }
.booking-card em.warning { color: #ad633a; }
.client-avatar { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: #506057; background: rgba(255,255,255,.8); font-size: 8px; font-weight: 700; }
.empty-card { grid-template-columns: 1fr auto; border: 1px dashed #cfd5cf; background: #fafbf9; }
.empty-card span { color: #98a19c; font-size: 9px; }
.empty-card button { border: 0; color: #5d6a62; background: transparent; font-size: 9px; font-weight: 700; }
.long-booking { grid-column: 2 / 4; }
.team-list { padding: 3px 20px; }
.team-row { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid #eef0ed; }
.team-row:last-child { border-bottom: 0; }
.avatar.sage { background: var(--sage); }.avatar.sand { background: var(--sand); }.avatar.clay { background: var(--clay); }.avatar.blue { background: var(--blue); }
.team-row strong, .team-row small { display: block; }
.team-row strong { font-size: 10px; }.team-row small { margin-top: 3px; color: #87908b; font-size: 8px; }
.team-row em { color: #617269; font-style: normal; font-size: 8px; }.team-row em.full { color: #a86139; }
.panel-action { width: calc(100% - 40px); min-height: 37px; margin: 13px 20px 18px; border: 1px solid var(--line); border-radius: 3px; background: #fafaf8; font-size: 9px; font-weight: 700; }
.lower-grid { grid-template-columns: minmax(0, 2fr) minmax(250px, .55fr); }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 10px; }
th { padding: 12px 17px; color: #8b948f; background: #fafbf9; text-align: left; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
td { padding: 14px 17px; border-top: 1px solid #edf0ec; color: #536058; }
td strong, td small { display: block; } td strong { color: var(--ink); font-size: 10px; } td small { margin-top: 3px; color: #939b96; font-size: 8px; }
.status { display: inline-block; padding: 4px 7px; border-radius: 10px; font-size: 8px; }
.status.confirmed { color: #536a59; background: #e8efe8; }.status.pending { color: #9a5a35; background: #f6eade; }.status.cancelled { color: #7d7774; background: #efedeb; }
.reminders-panel { padding-bottom: 5px; }
.reminder-metric { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid #edf0ec; font-size: 9px; }
.reminder-metric > span { display: flex; align-items: center; gap: 8px; }.reminder-metric i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; }.email-icon { background: var(--sage-light); }.sms-icon { background: #edf1f4; }.due-icon { background: #f3ece3; }
.reminder-metric strong { font: 600 18px var(--display); }.reminder-metric small { display: block; color: #929a95; font: 400 7px var(--body); text-align: right; }

.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border: 1px solid var(--line); border-bottom: 0; background: #fff; }
.calendar-toolbar button { width: 30px; height: 30px; border: 1px solid var(--line); background: #fff; }.calendar-toolbar strong { margin: 0 16px; font-size: 12px; }
.legend { display: flex; gap: 15px; color: var(--muted); font-size: 9px; }.legend span { display: flex; align-items: center; gap: 6px; }.legend i { width: 8px; height: 8px; border-radius: 2px; }.legend-naas { background: #90a493; }.legend-newbridge { background: #c09a70; }
.calendar-board { min-width: 720px; border: 1px solid var(--line); background: #fff; overflow: hidden; }
.calendar-head, .calendar-row { display: grid; grid-template-columns: 70px repeat(4, 1fr); }
.calendar-head > *, .calendar-row > * { min-width: 0; border-right: 1px solid var(--line); }.calendar-head > *:last-child, .calendar-row > *:last-child { border-right: 0; }
.calendar-head { min-height: 59px; background: #fafbf9; }.calendar-head > * { padding: 13px; }.calendar-head span { color: #89928d; font-size: 8px; }.calendar-head strong { font-size: 10px; }.calendar-head small { display: block; margin-top: 3px; color: #8b948f; font-size: 7px; font-weight: 400; }
.calendar-row { min-height: 82px; border-top: 1px solid var(--line); }.calendar-row time { padding: 13px; color: #7c8680; font-size: 9px; }
.slot { margin: 7px; padding: 10px; border-radius: 3px; font-size: 9px; font-weight: 600; }.slot small { display: block; margin-top: 5px; color: #6f7a73; font-size: 7px; font-weight: 400; }.slot.free { color: #96a09a; border: 1px dashed #d7dcd7; background: #fcfcfa; }.slot.booked-naas { border-left: 3px solid #809686; background: #ebf0ea; }.slot.booked-newbridge { border-left: 3px solid #b58b5d; background: #f5eee5; }.slot.blocked { color: #9ca39f; background: #f1f2f0; }

.data-page { overflow: hidden; }.filter-row { display: flex; gap: 9px; padding: 17px; border-bottom: 1px solid var(--line); }.filter-row input { flex: 1; }.filter-row input, .filter-row select, .client-search input { height: 39px; padding: 0 12px; border: 1px solid var(--line); border-radius: 3px; background: #fff; font-size: 10px; outline: none; }.filter-row input:focus, .client-search input:focus { border-color: #829288; }
.client-grid { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.5fr); gap: 16px; }.client-search { padding: 17px; }.client-search > input { width: 100%; margin-bottom: 13px; }.client-row { width: 100%; display: grid; grid-template-columns: 37px 1fr auto; align-items: center; gap: 10px; padding: 11px 7px; border: 0; border-bottom: 1px solid #edf0ec; background: transparent; text-align: left; }.client-row:hover, .client-row.active { background: #f2f5f1; }.client-row strong, .client-row small { display: block; }.client-row strong { font-size: 10px; }.client-row small { margin-top: 4px; color: #89938d; font-size: 8px; }.client-row em { color: #7e8882; font-style: normal; font-size: 8px; }
.client-profile { padding: 26px; }.profile-head { display: flex; align-items: center; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }.profile-head .avatar { width: 50px; height: 50px; }.profile-head h2 { font-size: 24px; font-weight: 600; }.profile-head p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 22px 0; }.profile-stats span { padding: 0 16px; border-right: 1px solid var(--line); color: var(--muted); font-size: 8px; }.profile-stats span:first-child { padding-left: 0; }.profile-stats span:last-child { border-right: 0; }.profile-stats strong { display: block; margin-top: 7px; color: var(--ink); font: 600 20px var(--display); }.profile-section { padding-top: 20px; border-top: 1px solid var(--line); }.profile-section h3 { font-size: 12px; }.profile-section p { color: var(--muted); font-size: 10px; line-height: 1.6; }
.team-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.team-card { padding: 21px; border: 1px solid var(--line); background: #fff; }.team-card header { display: flex; align-items: center; gap: 12px; }.team-card header .avatar { width: 43px; height: 43px; }.team-card h3 { font-size: 16px; }.team-card header small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }.team-card dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 22px 0; }.team-card dt { color: var(--muted); font-size: 8px; }.team-card dd { margin: 5px 0 0; font-size: 11px; font-weight: 600; }.team-card footer { display: flex; justify-content: space-between; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }.team-card footer button { border: 0; background: transparent; font-size: 9px; font-weight: 700; }
.automation-grid { display: flex; flex-direction: column; gap: 10px; }.automation-card { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 15px; padding: 20px; border: 1px solid var(--line); border-left: 3px solid #cfd4cf; background: #fff; }.automation-card.active-automation { border-left-color: #819585; }.automation-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #eef2ed; }.automation-card strong { font-size: 12px; }.automation-card p { margin: 6px 0 0; color: var(--muted); font-size: 9px; }.switch input { position: absolute; opacity: 0; }.switch i { position: relative; display: block; width: 37px; height: 21px; border-radius: 11px; background: #d9ddd9; }.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: .2s; }.switch input:checked + i { background: #778c7c; }.switch input:checked + i::after { transform: translateX(16px); }
.placeholder-view { min-height: calc(100vh - 76px); }.placeholder-view > p:not(.eyebrow) { color: var(--muted); }.placeholder-chart { height: 260px; display: flex; align-items: end; gap: 14px; margin-top: 50px; padding: 30px; border: 1px solid var(--line); background: #fff; }.placeholder-chart i { flex: 1; background: #b8c5b8; }.placeholder-chart i:nth-child(1) { height: 25%; }.placeholder-chart i:nth-child(2) { height: 48%; }.placeholder-chart i:nth-child(3) { height: 38%; }.placeholder-chart i:nth-child(4) { height: 72%; }.placeholder-chart i:nth-child(5) { height: 57%; }.placeholder-chart i:nth-child(6) { height: 88%; }.placeholder-chart i:nth-child(7) { height: 76%; }

.appointment-dialog { width: min(600px, calc(100% - 30px)); max-width: none; padding: 0; border: 0; border-radius: 5px; background: var(--paper); }.appointment-dialog::backdrop { background: rgba(8,13,10,.65); backdrop-filter: blur(3px); }.appointment-dialog form { padding: 30px; }.appointment-dialog header { display: flex; align-items: start; justify-content: space-between; margin-bottom: 27px; }.appointment-dialog header h2 { font-size: 28px; }.appointment-dialog header button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: #fff; font-size: 20px; }.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }.form-grid label { color: #5f6b64; font-size: 9px; font-weight: 600; }.form-grid .full { grid-column: 1 / -1; }.form-grid input, .form-grid select { width: 100%; height: 43px; display: block; margin-top: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 3px; background: #fff; outline: none; }.form-grid input:focus, .form-grid select:focus { border-color: #829288; }.send-confirmation { display: flex; gap: 9px; margin: 19px 0; color: var(--muted); font-size: 10px; }.send-confirmation input { accent-color: var(--ink); }.appointment-dialog footer { display: flex; justify-content: end; gap: 9px; padding-top: 20px; border-top: 1px solid var(--line); }
.toast { position: fixed; right: 25px; bottom: 25px; z-index: 30; min-width: 315px; display: grid; grid-template-columns: 31px 1fr; align-items: center; gap: 11px; padding: 15px; color: #fff; background: var(--ink); box-shadow: 0 10px 40px rgba(0,0,0,.2); transform: translateY(130%); opacity: 0; transition: .3s ease; }.toast.show { transform: translateY(0); opacity: 1; }.toast > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: var(--ink); background: var(--sage); }.toast strong, .toast small { display: block; }.toast strong { font-size: 10px; }.toast small { margin-top: 4px; color: rgba(255,255,255,.55); font-size: 8px; }
[hidden] { display: none !important; }

@media (max-width: 1100px) {
  .admin-shell { grid-template-columns: 220px minmax(0,1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid, .lower-grid { grid-template-columns: 1fr; }
  .team-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .admin-shell { display: block; }
  .sidebar { position: fixed; left: 0; transform: translateX(-100%); width: 252px; transition: transform .25s ease; }
  .sidebar.open { transform: translateX(0); }
  .admin-topbar { height: auto; min-height: 70px; padding: 12px 18px; }
  .mobile-menu { display: block; }
  .topbar-context { display: none; }
  .topbar-actions .icon-control { display: none; }
  .topbar-actions .primary-button { font-size: 0; }.topbar-actions .primary-button::after { content: "+ Add"; font-size: 10px; }
  .admin-view { padding: 35px 18px 50px; }
  .page-heading { align-items: start; flex-direction: column; }.page-heading .heading-actions .secondary-button { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }.stat-card { min-height: 130px; padding: 16px; }.stat-card > strong { font-size: 28px; }
  .day-row { grid-template-columns: 40px 1fr; }.day-row .booking-card + .booking-card { grid-column: 2; }.long-booking { grid-column: 2; }.now-line::before { left: 44px; }
  .lower-grid { display: none; }
  .client-grid { grid-template-columns: 1fr; }.team-card-grid { grid-template-columns: 1fr; }
  [data-view="calendar"] { overflow-x: auto; }.calendar-toolbar { min-width: 720px; }
  .filter-row { flex-wrap: wrap; }.filter-row input { min-width: 100%; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { min-height: 115px; }
  .panel-header { padding: 18px; }
  .day-list { padding: 12px; }
  .booking-card { grid-template-columns: 29px 1fr; }.booking-card em { display: none; }
  .form-grid { grid-template-columns: 1fr; }.form-grid .full { grid-column: auto; }
  .appointment-dialog form { padding: 23px; }
  .toast { left: 15px; right: 15px; min-width: 0; }
}