@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-400.ee260d140d6c.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-600.9868f4ffd74c.ttf") format("truetype");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-700.fc73db04e0e3.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-300.3d3074bd2b1e.ttf") format("truetype");font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-400.a30ea6851b11.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-500.55615481edbe.ttf") format("truetype");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-600.cc204425c059.ttf") format("truetype");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-700.53f7fe6fc2a3.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
:root{--ivory:#faf7f1;--paper:#fffdf9;--green:#344e41;--green-2:#466353;--brown:#4b3624;--clay:#b98068;--gold:#c3a15f;--sage:#8fa692;--mist:#dce5df;--line:#e7dfd4;--muted:#766b61;--danger:#9a4b45;--shadow:0 18px 50px rgba(69,50,34,.08);--serif:"Cormorant Garamond",Georgia,serif;--sans:"Jost","Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--brown);font-family:var(--sans);font-size:16px;line-height:1.55}a{color:var(--green);text-decoration:none}a:hover{text-decoration:none;color:var(--brown)}button,input,textarea,select{font:inherit}h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.05;margin:0;color:var(--brown)}h1{font-size:clamp(2.3rem,4vw,3.75rem);letter-spacing:-.025em}h2{font-size:1.75rem}p{margin:.35rem 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.muted{color:var(--muted)}
.app-shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.sidebar{height:100vh;max-height:100vh;position:sticky;top:0;padding:28px 22px;background:var(--green);color:#f7f1e7;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.brand{display:flex;gap:12px;align-items:center;color:#fff;margin:0 4px 38px}.brand:hover{color:#fff}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.4);border-radius:50%;font-family:var(--serif);font-size:1.8rem;color:#fff;background:rgba(255,255,255,.08)}.brand strong,.brand small{display:block}.brand strong{font-family:var(--serif);font-size:1.25rem}.brand small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.72}.nav-stack{display:grid;gap:5px}.nav-stack a{padding:11px 14px;color:rgba(255,255,255,.74);border-radius:10px;font-size:.92rem}.nav-stack a:hover,.nav-stack a.active{color:#fff;background:rgba(255,255,255,.1)}.nav-stack a.active{box-shadow:inset 3px 0 0 var(--gold)}.nav-section-label{margin:30px 14px 8px;text-transform:uppercase;font-size:.63rem;letter-spacing:.16em;opacity:.46}.nav-secondary a{padding-block:8px;font-size:.83rem}.sidebar-footer{margin-top:auto;padding:18px 4px 0;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;flex-shrink:0}.sidebar-footer .avatar{grid-row:1/3}.sidebar-footer strong,.sidebar-footer small{display:block;font-size:.78rem}.sidebar-footer small{opacity:.6}.sidebar-footer>a{grid-column:2;color:#d7c8b4;font-size:.7rem}.avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#dce5df;color:var(--green);font-family:var(--serif);font-weight:700}.avatar.large{width:44px;height:44px}.avatar.hero{width:72px;height:72px;font-size:1.6rem}.main-content{min-width:0}.topbar{height:54px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:.72rem;color:var(--muted);letter-spacing:.04em}.secure-dot{display:inline-block;width:7px;height:7px;background:#6f9477;border-radius:50%;margin-right:6px;box-shadow:0 0 0 4px rgba(111,148,119,.12)}.page-head,.metric-grid,.two-column,.panel,.card-grid,.calendar-agenda,.filter-row,.tab-row,.detail-grid,.discreet-alert,.form-card,.search-bar{margin-left:4vw;margin-right:4vw}.page-head{padding:48px 0 30px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}.page-head.compact{padding-bottom:20px}.page-head>div>p:last-child{color:var(--muted);max-width:680px}.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:.66rem;font-weight:600;color:var(--green-2);margin:0 0 8px}.head-actions,.form-actions,.inline-actions{display:flex;gap:10px;align-items:center}.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--green);background:var(--green);color:#fff;border-radius:999px;padding:11px 18px;font-weight:600;font-size:.82rem;cursor:pointer;box-shadow:none}.button:hover{background:var(--brown);border-color:var(--brown);color:#fff}.button.secondary{background:transparent;color:var(--green)}.button.secondary:hover{background:var(--green);color:#fff}.button.ghost{border-color:transparent;background:transparent;color:var(--muted)}.large-button{padding:15px 26px;font-size:.95rem}.text-button{border:0;background:transparent;color:var(--green);padding:0;cursor:pointer;font-size:.85rem}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.metric{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;align-items:center;gap:15px;box-shadow:0 8px 25px rgba(69,50,34,.03)}.metric-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-family:var(--serif);font-size:1.4rem}.metric-icon.sage{background:#e4ebe4;color:#4c6853}.metric-icon.clay{background:#f0dfd6;color:#8a5d49}.metric-icon.gold{background:#f3ead5;color:#8a6c31}.metric-icon.mist{background:#e4e9eb;color:#52666d}.metric small,.metric strong{display:block}.metric small{font-size:.67rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.metric strong{font-family:var(--serif);font-size:1.8rem;line-height:1.1}.metric p{font-size:.72rem;color:var(--muted)}.two-column,.detail-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:18px;margin-bottom:48px}.panel,.form-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 40px rgba(69,50,34,.035)}.panel{padding:24px;margin-bottom:18px}.panel-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line)}.panel-head>a{font-size:.8rem}.timeline,.compact-list{display:grid}.timeline-item{display:grid;grid-template-columns:50px 1px 1fr;gap:15px;padding:16px 2px;color:var(--brown)}.timeline-item time{font-family:var(--serif);font-size:1.2rem}.timeline-rule{background:var(--line);position:relative}.timeline-rule:before{content:"";position:absolute;width:7px;height:7px;background:var(--sage);border:3px solid var(--paper);border-radius:50%;left:-3px;top:8px;box-shadow:0 0 0 1px var(--sage)}.timeline-item strong,.compact-list strong{font-size:.9rem}.timeline-item p,.compact-list p{font-size:.75rem;color:var(--muted)}.compact-list>a,.compact-list>.list-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:13px 2px;border-bottom:1px solid var(--line);color:var(--brown)}.compact-list>*:last-child{border-bottom:0}.date-tile{width:42px;height:48px;border-radius:10px;background:#edf1ec;display:grid;place-items:center;align-content:center;color:var(--green)}.date-tile b{font-family:var(--serif);font-size:1.25rem;line-height:1}.date-tile small{text-transform:uppercase;font-size:.55rem;letter-spacing:.1em}.empty{text-align:center;padding:34px 16px;color:var(--muted)}.empty span{display:block;font-family:var(--serif);font-size:1.45rem;color:var(--brown)}.message-stack{position:fixed;right:28px;top:68px;z-index:20;display:grid;gap:8px}.message{padding:12px 16px;background:var(--green);color:#fff;border-radius:12px;box-shadow:var(--shadow);font-size:.82rem}.message.error{background:var(--danger)}
.search-bar{display:flex;max-width:700px;margin-bottom:20px}.search-bar input{border-radius:999px 0 0 999px}.search-bar .button{border-radius:0 999px 999px 0}.table-panel{padding:0;overflow:hidden;margin-bottom:50px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);font-size:.82rem}th{font-size:.65rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);background:#f7f2ea}tbody tr:hover{background:#fcf9f4}tbody tr:last-child td{border-bottom:0}.identity,.identity-title{display:flex;align-items:center;gap:13px}.data-list{margin:0}.data-list>div{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}.data-list>div:last-child{border:0}.data-list dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.data-list dd{margin:0}.card-list>a{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:18px 2px;border-bottom:1px solid var(--line);color:var(--brown)}.case-code,.invoice-number{display:inline-flex;padding:5px 9px;border-radius:7px;background:#eef1ec;color:var(--green);font-family:ui-monospace,monospace;font-size:.72rem}.filter-row,.tab-row{display:flex;gap:7px;margin-bottom:18px;overflow-x:auto}.chip,.tab-row a{padding:7px 13px;border:1px solid var(--line);border-radius:999px;font-size:.76rem;color:var(--muted);white-space:nowrap}.chip.selected,.tab-row a:hover{background:var(--green);border-color:var(--green);color:#fff}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:50px}.case-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px;color:var(--brown);box-shadow:0 10px 32px rgba(69,50,34,.03);transition:.2s transform,.2s box-shadow}.case-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.case-card h2{font-size:1.45rem;margin:25px 0 5px}.case-card>p{font-size:.78rem;color:var(--muted)}.case-card-top,.case-card-foot{display:flex;justify-content:space-between;align-items:center}.case-card-foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);font-size:.75rem}.status{display:inline-flex;padding:4px 8px;border-radius:999px;background:#eee8de;color:#6f6255;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}.status.active,.status.synced,.status.paid{background:#e2ece3;color:#426047}.status.draft,.status.pending,.status.paused{background:#f1eadb;color:#7b6439}.status.failed,.status.conflict,.status.overdue{background:#f2dfdc;color:#8b4842}.discreet-alert{padding:14px 18px;background:#f4ead7;border:1px solid #e7d5b2;border-radius:13px;display:flex;gap:14px;margin-bottom:18px;font-size:.8rem}.discreet-alert span{color:#77664c}.note-list article{padding:20px 2px;border-bottom:1px solid var(--line)}.note-list article:last-child{border:0}.note-list article>div:first-child{display:flex;justify-content:space-between;font-size:.75rem}.note-list article>div:first-child span{color:var(--muted)}.note-list article>p{color:#5f554c}.inline-actions{font-size:.8rem}.file-mark{display:grid;place-items:center;width:42px;height:48px;background:#eee8df;border-radius:10px;font-size:.55rem;letter-spacing:.08em}.calendar-agenda{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:10px 24px;margin-bottom:50px}.agenda-day{display:grid;grid-template-columns:100px 1fr;border-bottom:1px solid var(--line);padding:20px 0}.agenda-day:last-child{border:0}.agenda-date{display:flex;gap:10px;align-items:flex-start}.agenda-date>b{font-family:var(--serif);font-size:2.1rem;line-height:1}.agenda-date>span{font-size:.7rem;text-transform:uppercase}.agenda-date small{display:block;color:var(--muted);text-transform:none}.agenda-items>a{display:grid;grid-template-columns:50px 3px 1fr auto;gap:13px;align-items:center;color:var(--brown);padding:9px;border-radius:10px}.agenda-items>a:hover{background:#f8f4ed}.agenda-items time{font-family:var(--serif);font-size:1.1rem}.event-line{height:38px;background:var(--sage);border-radius:2px}.event-line.online{background:#7695a2}.event-line.walk{background:#8fa692}.form-card{padding:28px;max-width:960px;margin-bottom:50px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{display:grid;gap:6px}.field.wide{grid-column:1/-1}.field label,.stacked-form label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--green)}input:not([type="checkbox"]):not([type="radio"]),textarea,select{width:100%;border:1px solid #d9d0c5;border-radius:10px;background:#fff;padding:11px 12px;color:var(--brown);outline:0}input[type="checkbox"],input[type="radio"]{width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;margin:0 6px 0 0!important;padding:0!important;border:1px solid #d9d0c5!important;background:#fff!important;cursor:pointer;accent-color:var(--green);display:inline-block!important;vertical-align:middle!important}div.field ul,.onboarding-form ul{list-style:none;padding:0;margin:6px 0;display:flex;flex-wrap:wrap;gap:18px}div.field ul li,.onboarding-form ul li{display:flex;align-items:center}div.field ul li label,.onboarding-form ul li label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-transform:none!important;font-size:.92rem!important;letter-spacing:0!important;color:var(--brown);font-weight:500}input:focus,textarea:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(52,78,65,.1)}textarea{resize:vertical}.field small{color:var(--muted);font-size:.7rem}.errorlist{list-style:none;margin:2px 0;padding:0;color:var(--danger);font-size:.72rem}.form-actions{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}.form-errors{padding:12px;background:#f3dfdc;border-radius:10px;color:var(--danger);margin-bottom:18px}.note-editor textarea{font-family:Georgia,serif;font-size:1rem;line-height:1.75;min-height:360px}.privacy-callout{display:flex;flex-direction:column;padding:14px 16px;border-radius:11px;background:#edf2ed;color:var(--green);font-size:.78rem;margin:18px 0}.privacy-callout span{color:#65746a}.stacked-form{display:grid;gap:12px;margin-top:20px}.stacked-form>div{display:grid;gap:5px}.invoice-total{font-family:var(--serif);font-size:3rem;color:var(--green)}.success-state{text-align:center;padding:28px}.success-state>span,.complete-mark{display:grid;place-items:center;margin:0 auto 14px;width:58px;height:58px;border-radius:50%;background:#dfebe0;color:var(--green);font-size:1.5rem}.success-state strong{display:block;font-family:var(--serif);font-size:1.8rem}.handoff-screen{min-height:100vh;display:grid;place-items:center;padding:30px;background:radial-gradient(circle at top,#fefcf8,var(--ivory))}.handoff-card{width:min(600px,100%);text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:50px;box-shadow:var(--shadow)}.handoff-card h1{margin:15px 0}.handoff-card>p:not(.eyebrow){color:var(--muted);margin:0 auto 28px;max-width:470px}.hero-mark{width:66px;height:66px;margin:0 auto;background:var(--green)}.onboarding-body{background:var(--ivory)}.onboarding-header{height:78px;padding:0 max(24px,6vw);display:flex;align-items:center;gap:12px;background:var(--green);color:#fff}.onboarding-header strong,.onboarding-header small{display:block}.onboarding-header strong{font-family:var(--serif);font-size:1.3rem}.onboarding-header small{opacity:.65;text-transform:uppercase;letter-spacing:.12em;font-size:.6rem}.secure-pill{margin-left:auto;padding:5px 10px;border:1px solid rgba(255,255,255,.3);border-radius:999px;font-size:.67rem}.onboarding-main{width:min(760px,calc(100% - 36px));margin:55px auto}.onboarding-intro{margin-bottom:32px}.onboarding-intro>p:last-child{color:var(--muted);font-size:1.05rem}.onboarding-form{display:grid;gap:22px;background:var(--paper);padding:32px;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.consent-box{background:#f2f0e9;border-radius:14px;padding:20px}.consent-box h2{font-size:1.5rem}.consent-text{font-size:.85rem;color:#605a52;max-height:220px;overflow:auto;margin:10px 0 18px}.check-row{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;text-transform:none!important;font-size:.9rem!important;letter-spacing:0!important}.check-row input{width:20px;height:20px}.switch-field{align-content:end}.switch-field label{display:flex;gap:9px;align-items:center;text-transform:none;letter-spacing:0;font-size:.85rem}.switch-field input{width:20px}.complete-mark{width:70px;height:70px;font-size:2rem}code{font-size:.72rem;color:var(--green)}

/* Mobile Navigation Topbar & Drawer */
.mobile-topbar {
  display: none;
  height: 56px;
  padding: 0 16px;
  background: var(--green);
  color: #fff;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.mobile-topbar .brand {
  margin: 0;
}
.mobile-nav-toggle {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.mobile-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
}
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* System & Toast Notifications */
.notification-permission-bar {
  background: var(--brown);
  color: #f7f1e7;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  z-index: 200;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.notification-permission-bar .button {
  padding: 6px 14px;
  font-size: 0.76rem;
}
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  width: calc(100% - 48px);
  pointer-events: none;
}
.crm-toast {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--green);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}
.crm-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.crm-toast.toast-whatsapp {
  border-left-color: #25d366;
}
.crm-toast.toast-email {
  border-left-color: #3498db;
}
.crm-toast.toast-appointment {
  border-left-color: var(--gold);
}
.toast-content strong {
  display: block;
  font-size: 0.88rem;
  color: var(--brown);
  margin-bottom: 2px;
}
.toast-content p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}
.toast-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}

.nav-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  background: #e74c3c;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  margin-left: auto;
  line-height: 1;
}

/* Touch targets & responsive breakpoints */
@media (max-width: 768px) {
  .app-shell {
    display: block;
  }
  .mobile-topbar {
    display: flex;
  }
  .topbar {
    display: none;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    height: 100vh;
    max-height: 100vh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.2);
    display: flex !important;
    padding: 24px 18px;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .nav-stack {
    display: grid !important;
    overflow-x: visible !important;
  }
  .nav-stack a {
    white-space: normal !important;
    padding: 13px 16px !important;
    font-size: 0.95rem !important;
    min-height: 46px;
    display: flex;
    align-items: center;
  }
  .nav-section-label,
  .nav-secondary,
  .sidebar-footer {
    display: grid !important;
  }

  /* Font size on mobile to prevent iOS Safari auto-zoom on input focus */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .page-head {
    padding-top: 24px;
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
  .page-head h1 {
    font-size: 2.1rem;
  }

  .page-head,
  .metric-grid,
  .two-column,
  .panel,
  .card-grid,
  .calendar-agenda,
  .filter-row,
  .tab-row,
  .detail-grid,
  .discreet-alert,
  .form-card,
  .search-bar,
  .month-controls,
  .month-calendar {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  .metric-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .two-column,
  .detail-grid,
  .card-grid,
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  .panel {
    padding: 16px;
  }
  .button,
  .chip,
  .tab-row a {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .head-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .head-actions .button {
    flex: 1 1 auto;
  }

  /* Table panel horizontal scrolling */
  .table-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
  }
  table {
    min-width: 540px;
  }

  .toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
  }
}

@media (max-width: 480px) {
  .metric-grid {
    grid-template-columns: 1fr;
  }
  .data-list > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .notification-permission-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Quality of Life Contextual Tooltips */
.crm-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  cursor: help;
  color: var(--sage-700, #344e41);
  font-size: 0.9em;
  user-select: none;
}
.crm-tooltip .tooltip-text {
  visibility: hidden;
  width: 230px;
  background-color: #1f2937;
  color: #ffffff;
  text-align: left;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
  position: absolute;
  z-index: 100;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  pointer-events: none;
}
.crm-tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #1f2937 transparent transparent transparent;
}
.crm-tooltip:hover .tooltip-text,
.crm-tooltip:focus .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Month Calendar Grid Styles */
.month-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 4vw;
  margin-right: 4vw;
  margin-bottom: 1.5rem;
}

.month-controls h2 {
  font-family: var(--serif, serif);
  font-size: 1.75rem;
  margin: 0;
  color: var(--brown, #2a2421);
}

.month-calendar {
  margin-left: 4vw;
  margin-right: 4vw;
  margin-bottom: 50px;
  background: var(--paper, #fff);
  border: 1px solid var(--line, #e2d9cd);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 10px 40px rgba(69, 50, 34, 0.035);
  overflow-x: auto;
}

.month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sage-700, #344e41);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line, #e2d9cd);
  margin-bottom: 8px;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  gap: 8px;
}

.month-day {
  min-height: 140px;
  background-color: #fdfbf7;
  /* 1-hour bold lines (every 48px) and 15-min dotted lines (every 12px) */
  background-image:
    linear-gradient(to bottom, rgba(160, 140, 120, 0.45) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(160, 140, 120, 0.3) 1px, transparent 1px);
  background-size: 100% 48px, 6px 12px;
  background-position: 0 0, 0 0;
  border: 1px solid var(--line, #e2d9cd);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.month-day:hover {
  border-color: var(--sage-700, #344e41);
  background-color: #f7f9f7;
}

.month-day.outside-month {
  opacity: 0.45;
  background-color: #f4f1eb;
}

.month-day.today {
  border: 2px solid var(--sage-700, #344e41);
  background-color: #f0f4f1;
}

.month-day-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.month-day-head time {
  font-family: var(--serif, serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brown, #2a2421);
}

.day-view-link {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sage-700, #344e41);
  text-decoration: none;
  background: rgba(52, 78, 65, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.day-view-link:hover {
  background: rgba(52, 78, 65, 0.18);
}

.month-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: 150px;
}

.month-events a {
  display: block;
  padding: 4px 6px;
  background: var(--sage-100, #e2ece3);
  color: var(--sage-900, #1b2e22);
  border-left: 3px solid var(--sage-700, #344e41);
  border-radius: 4px;
  font-size: 0.72rem;
  line-height: 1.25;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.month-events a:hover {
  background: var(--sage-200, #c8dcd0);
  transform: translateX(2px);
}

.month-events a strong {
  color: var(--sage-900, #1b2e22);
  font-weight: 700;
  display: block;
  font-size: 0.73rem;
}

.month-events a .event-code {
  font-weight: 600;
  color: var(--brown, #2a2421);
}

.month-events a .event-service {
  display: block;
  font-size: 0.68rem;
  opacity: 0.85;
}

/* Day Schedule View Styles */
.day-schedule-card {
  background: #ffffff;
  border: 1px solid var(--line, #e2d9cd);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .day-schedule-card {
    grid-template-columns: 1fr;
  }
}

.day-schedule-legend {
  grid-column: 1 / -1;
  display: flex;
  gap: 1.5rem;
  font-size: 0.82rem;
  color: var(--sage-800, #2d4534);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line, #e2d9cd);
  margin-bottom: 1rem;
}

.day-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: crosshair;
  user-select: none;
}

.timeline-drag-box {
  position: absolute;
  left: 68px;
  right: 12px;
  background: rgba(52, 78, 65, 0.22);
  border: 2px dashed #2d5a27;
  border-radius: 8px;
  pointer-events: none;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #143611;
  font-size: 0.85rem;
  box-shadow: 0 4px 12px rgba(45, 90, 39, 0.2);
  box-sizing: border-box;
}

.hour-row {
  display: flex;
  height: 60px;
  box-sizing: border-box;
  border-top: 2px solid var(--brown, #2a2421); /* Bold line at 1-hour interval */
  position: relative;
}

.day-timeline-overlay {
  position: absolute;
  top: 0;
  left: 60px;
  right: 0;
  bottom: 0;
  pointer-events: none;
}


.timeline-event-block {
  position: absolute;
  left: 8px;
  right: 12px;
  pointer-events: auto;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
}

.timeline-event-block:hover {
  transform: translateY(-1px) scale(1.005);
  z-index: 10;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.timeline-event-block.practice-event-block {
  background: repeating-linear-gradient(
    45deg,
    #fee2e2,
    #fee2e2 12px,
    #fca5a5 12px,
    #fca5a5 24px
  );
  border: 1.5px solid #dc2626;
  color: #7f1d1d;
}

.timeline-event-block.appointment-event-block {
  background: #e2ece3;
  border: 1.5px solid #2d5a27;
  color: #143611;
}

.timeline-event-block strong {
  font-weight: 700;
  font-size: 0.85rem;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.timeline-event-block span {
  font-size: 0.76rem;
  opacity: 0.95;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.hour-label {
  width: 60px;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brown, #2a2421);
  padding-top: 2px;
}

.hour-slot {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.quarter-line {
  height: 15px;
  box-sizing: border-box;
  border-bottom: 1.5px dotted #94a3b8; /* Prominent dotted line at 15-min intervals */
  display: flex;
  align-items: flex-end;
  padding-right: 4px;
}

.quarter-line span {
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
  margin-left: auto;
  opacity: 0.9;
}

.day-appointments-panel h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--brown, #2a2421);
}

.day-appointments-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.day-appt-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: #fdfbf7;
  border: 1px solid var(--line, #e2d9cd);
  border-left: 4px solid var(--sage-700, #344e41);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.day-appt-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.day-appt-time {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sage-900, #1b2e22);
}

.day-appt-details strong {
  display: block;
  font-size: 0.95rem;
}

.day-appt-details p {
  font-size: 0.8rem;
  color: #666;
}

.month-events a.practice-block-item {
  background: #fdf2f0;
  border-left: 3px solid #b04a37;
  color: #722718;
}

.month-events a.practice-block-item:hover {
  background: #f8e1dd;
}

.month-events a.practice-block-item strong {
  color: #8c3222;
}

.day-appt-card.practice-block-card {
  border-left-color: #b04a37;
  background: repeating-linear-gradient(
    -45deg,
    #fdf5f4,
    #fdf5f4 10px,
    #fbf0ee 10px,
    #fbf0ee 20px
  );
}

.day-appt-card.practice-block-card .day-appt-time {
  color: #8c3222;
}

.practice-block-agenda .mode-busy {
  background: #b04a37 !important;
}

/* Week Schedule View Styles */
.week-schedule-card {
  background: #ffffff;
  border: 1px solid var(--line, #e2d9cd);
  border-radius: 12px;
  padding: 1.25rem;
  margin-top: 1rem;
  overflow-x: auto;
}

.week-grid-container {
  min-width: 900px;
  display: flex;
  flex-direction: column;
}

.week-grid-header {
  display: flex;
  border-bottom: 2px solid var(--line, #e2d9cd);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.week-time-gutter-head {
  width: 55px;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  display: flex;
  align-items: flex-end;
  padding-left: 4px;
}

.week-days-head {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.week-day-col-head {
  text-align: center;
  padding: 6px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.week-day-col-head.today {
  background: #ecfdf5;
  border-color: #10b981;
  color: #065f46;
}

.week-day-col-head strong {
  font-size: 0.85rem;
  font-weight: 700;
}

.week-day-col-head span {
  font-size: 0.78rem;
  color: #64748b;
}

.week-day-col-head .day-link {
  font-size: 0.72rem;
  color: #2d5a27;
  text-decoration: none;
  margin-top: 2px;
}

.week-grid-body {
  display: flex;
  position: relative;
}

.week-time-gutter {
  width: 55px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.week-time-gutter .hour-label {
  height: 60px;
  box-sizing: border-box;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brown, #2a2421);
  padding-top: 0px;
  border-top: 2px solid transparent;
}

.week-days-columns {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.week-day-column {
  position: relative;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  background: #ffffff;
  min-height: 1020px;
}

.week-day-column.today {
  background: #f0fdf4;
}

.week-day-column .hour-slot {
  height: 60px;
  box-sizing: border-box;
  border-top: 1px solid #cbd5e1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.week-day-column .hour-slot:first-child {
  border-top: 2px solid var(--brown, #2a2421);
}

.week-day-column .day-timeline-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.week-day-column .timeline-event-block {
  left: 2px;
  right: 2px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 0.72rem;
}

/* ==========================================================================
   Dark Theme (App-wide)
   ========================================================================== */
html[data-theme="dark"] {
  --ivory: #0b0f19;
  --paper: #162032;
  --green: #48bb78;
  --green-2: #68d391;
  --brown: #f1f5f9;
  --clay: #e2e8f0;
  --gold: #ecc94b;
  --sage: #a0aec0;
  --mist: #1e293b;
  --line: #2d3c52;
  --muted: #94a3b8;
  --danger: #f87171;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --ivory: #0b0f19;
    --paper: #162032;
    --green: #48bb78;
    --green-2: #68d391;
    --brown: #f1f5f9;
    --clay: #e2e8f0;
    --gold: #ecc94b;
    --sage: #a0aec0;
    --mist: #1e293b;
    --line: #2d3c52;
    --muted: #94a3b8;
    --danger: #f87171;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  }
}

html[data-theme="dark"] body {
  background: var(--ivory);
  color: var(--brown);
}

/* Sidebar & Navigation in Dark Mode */
html[data-theme="dark"] .sidebar {
  background: #08100d;
  border-right: 1px solid #1e293b;
  color: #f1f5f9;
}
html[data-theme="dark"] .mobile-topbar {
  background: #08100d;
  border-bottom: 1px solid #1e293b;
}
html[data-theme="dark"] .topbar {
  background: #0b0f19;
  border-bottom-color: var(--line);
  color: var(--muted);
}
html[data-theme="dark"] .nav-stack a {
  color: rgba(255, 255, 255, 0.74);
}
html[data-theme="dark"] .nav-stack a:hover,
html[data-theme="dark"] .nav-stack a.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Containers, Panels, Cards, Metrics */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .case-card,
html[data-theme="dark"] .calendar-agenda,
html[data-theme="dark"] .handoff-card,
html[data-theme="dark"] .onboarding-form,
html[data-theme="dark"] .table-panel {
  background: var(--paper);
  border-color: var(--line);
  color: var(--brown);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .panel-head {
  border-bottom-color: var(--line);
}

/* Headings and Text */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] strong {
  color: var(--brown);
}
html[data-theme="dark"] .eyebrow {
  color: var(--green-2);
}

/* Inputs, Textareas, Selects */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #0b1120 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.25);
}

/* Rich Text & Session Note Cards */
html[data-theme="dark"] .rich-text-content,
html[data-theme="dark"] .rich-text-content:focus {
  background: #0b1120 !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .note-card-item,
html[data-theme="dark"] .note-list article {
  background: #162032 !important;
  border-color: #2d3c52 !important;
  color: #f1f5f9 !important;
}

/* Buttons */
html[data-theme="dark"] .button {
  background: #23683f;
  border-color: #2b7a4b;
  color: #fff;
}
html[data-theme="dark"] .button:hover {
  background: #2d8250;
  border-color: #48bb78;
}
html[data-theme="dark"] .button.secondary {
  background: transparent;
  border-color: #48bb78;
  color: #68d391;
}
html[data-theme="dark"] .button.secondary:hover {
  background: #23683f;
  color: #fff;
}
html[data-theme="dark"] .text-button {
  color: #68d391;
}
html[data-theme="dark"] .button.ghost {
  color: var(--muted);
}

/* Tables */
html[data-theme="dark"] table th {
  background: #111a29;
  color: #94a3b8;
  border-bottom-color: var(--line);
}
html[data-theme="dark"] table td {
  border-bottom-color: var(--line);
  color: #f8fafc;
}
html[data-theme="dark"] tbody tr:hover {
  background: #1e2c40;
}
html[data-theme="dark"] tr.table-row-supervisee {
  background: rgba(139, 92, 246, 0.12) !important;
}
html[data-theme="dark"] tr.table-row-supervisee:hover {
  background: rgba(139, 92, 246, 0.2) !important;
}

/* Chips & Tabs */
html[data-theme="dark"] .chip,
html[data-theme="dark"] .tab-row a {
  background: #162032;
  border-color: #2d3c52;
  color: #94a3b8;
}
html[data-theme="dark"] .chip.selected,
html[data-theme="dark"] .tab-row a:hover {
  background: #23683f;
  border-color: #48bb78;
  color: #fff;
}

/* Status Badges */
html[data-theme="dark"] .status {
  background: #1e2c40;
  color: #cbd5e1;
}
html[data-theme="dark"] .status.active,
html[data-theme="dark"] .status.synced,
html[data-theme="dark"] .status.paid {
  background: #064e3b;
  color: #6ee7b7;
}
html[data-theme="dark"] .status.draft,
html[data-theme="dark"] .status.pending,
html[data-theme="dark"] .status.paused {
  background: #451a03;
  color: #fcd34d;
}
html[data-theme="dark"] .status.failed,
html[data-theme="dark"] .status.conflict,
html[data-theme="dark"] .status.overdue {
  background: #450a0a;
  color: #fca5a5;
}

/* Modals */
html[data-theme="dark"] [id$="-modal"] > div,
html[data-theme="dark"] .modal-content {
  background: #162032 !important;
  color: #f8fafc !important;
  border: 1px solid #2d3c52 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75) !important;
}

/* Inline light background overrides */
html[data-theme="dark"] div[style*="background: #ffffff"],
html[data-theme="dark"] div[style*="background: #fff;"],
html[data-theme="dark"] div[style*="background:#fff;"],
html[data-theme="dark"] div[style*="background: #fff "],
html[data-theme="dark"] div[style*="background: white"],
html[data-theme="dark"] div[style*="background:#ffffff"] {
  background: #162032 !important;
  color: #f8fafc !important;
  border-color: #2d3c52 !important;
}

html[data-theme="dark"] div[style*="background: #fafaf9"],
html[data-theme="dark"] div[style*="background:#fafaf9"],
html[data-theme="dark"] div[style*="background: #fdfbf7"],
html[data-theme="dark"] div[style*="background:#fdfbf7"],
html[data-theme="dark"] div[style*="background: #f9fafb"],
html[data-theme="dark"] div[style*="background:#f9fafb"],
html[data-theme="dark"] div[style*="background: #f3f4f6"],
html[data-theme="dark"] div[style*="background:#f3f4f6"] {
  background: #111a29 !important;
  border-color: #2d3c52 !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] div[style*="color: var(--sage-800, #283618)"],
html[data-theme="dark"] div[style*="color: #283618"] {
  color: #86efac !important;
}

html[data-theme="dark"] div[style*="background: #f8fafc"],
html[data-theme="dark"] div[style*="background:#f8fafc"] {
  background: #111a29 !important;
  border-color: #2d3c52 !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] div[style*="background: #f0fdf4"],
html[data-theme="dark"] div[style*="background:#f0fdf4"] {
  background: #0a2114 !important;
  border-color: #166534 !important;
  color: #86efac !important;
}

html[data-theme="dark"] div[style*="background: #fffbeb"],
html[data-theme="dark"] div[style*="background:#fffbeb"] {
  background: #2b1d0e !important;
  border-color: #854d0e !important;
  color: #fde047 !important;
}

html[data-theme="dark"] div[style*="background: #fef2f2"],
html[data-theme="dark"] div[style*="background:#fef2f2"] {
  background: #331010 !important;
  border-color: #7f1d1d !important;
  color: #fca5a5 !important;
}

html[data-theme="dark"] span[style*="background: #f1f5f9"],
html[data-theme="dark"] span[style*="background:#f1f5f9"] {
  background: #1e2c40 !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .date-tile {
  background: #1e2c40;
  color: #48bb78;
}

html[data-theme="dark"] .compact-list > a,
html[data-theme="dark"] .compact-list > .list-row,
html[data-theme="dark"] .data-list > div {
  border-bottom-color: var(--line);
  color: var(--brown);
}

html[data-theme="dark"] .case-code,
html[data-theme="dark"] .invoice-number {
  background: #1e2c40;
  color: #68d391;
}

/* Flatpickr Date/Time Picker Dark Theme */
html[data-theme="dark"] .flatpickr-calendar {
  background: #162032 !important;
  border: 1px solid #2d3c52 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .flatpickr-day {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .flatpickr-day:hover {
  background: #2d3c52 !important;
}
html[data-theme="dark"] .flatpickr-day.selected {
  background: #23683f !important;
  border-color: #48bb78 !important;
}
html[data-theme="dark"] .flatpickr-time {
  background: #162032 !important;
  border-top: 1px solid #2d3c52 !important;
}
html[data-theme="dark"] .flatpickr-time input {
  color: #f1f5f9 !important;
  background: #0b1120 !important;
}
html[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
  color: #f1f5f9 !important;
  background: #111a29 !important;
}
html[data-theme="dark"] .flatpickr-months .flatpickr-month {
  background: #162032 !important;
  color: #f1f5f9 !important;
  fill: #f1f5f9 !important;
}
html[data-theme="dark"] span.flatpickr-weekday {
  background: #162032 !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] .flatpickr-prev-month svg,
html[data-theme="dark"] .flatpickr-next-month svg {
  fill: #f1f5f9 !important;
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
  margin-left: 4vw;
  margin-right: 4vw;
  padding-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.breadcrumb-nav a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--green);
  text-decoration: none;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(52, 78, 65, 0.08);
  transition: 0.15s background, 0.15s color;
}
.breadcrumb-nav a:hover {
  background: rgba(52, 78, 65, 0.18);
  color: var(--brown);
}
.breadcrumb-separator {
  opacity: 0.5;
  font-size: 0.75rem;
}

/* ==========================================================================
   Calendar Dark Theme Overrides (Month, Day, Week Views & Navigation)
   ========================================================================== */
html[data-theme="dark"] .month-calendar {
  background: #111a29;
  border-color: #2d3c52;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .month-weekdays {
  color: #94a3b8;
  border-bottom-color: #2d3c52;
}
html[data-theme="dark"] .month-day {
  background-color: #0f172a;
  background-image:
    linear-gradient(to bottom, rgba(51, 65, 85, 0.5) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(51, 65, 85, 0.35) 1px, transparent 1px);
  border-color: #2d3c52;
}
html[data-theme="dark"] .month-day:hover {
  border-color: #10b981;
  background-color: #162032;
}
html[data-theme="dark"] .month-day.outside-month {
  opacity: 0.35;
  background-color: #090d16;
}
html[data-theme="dark"] .month-day.today {
  border: 2px solid #10b981;
  background-color: #0a1f18;
}
html[data-theme="dark"] .month-day-head time {
  color: #f1f5f9;
}
html[data-theme="dark"] .day-view-link {
  color: #86efac;
  background: rgba(16, 185, 129, 0.15);
}
html[data-theme="dark"] .day-view-link:hover {
  background: rgba(16, 185, 129, 0.25);
}
html[data-theme="dark"] .month-events a {
  background: #064e3b;
  color: #ecfdf5;
  border-left-color: #10b981;
}
html[data-theme="dark"] .month-events a:hover {
  background: #047857;
}
html[data-theme="dark"] .month-events a strong {
  color: #ecfdf5;
}
html[data-theme="dark"] .month-events a .event-code {
  color: #d1fae5;
}
html[data-theme="dark"] .month-events a.practice-block-item {
  background: #450a0a;
  border-left-color: #ef4444;
  color: #fca5a5;
}
html[data-theme="dark"] .month-events a.practice-block-item strong,
html[data-theme="dark"] .month-events a.practice-block-item .event-code {
  color: #fecaca;
}

/* Day Schedule View Dark Mode */
html[data-theme="dark"] .day-schedule-card {
  background: #111a29;
  border-color: #2d3c52;
}
html[data-theme="dark"] .day-schedule-legend {
  color: #cbd5e1;
  border-bottom-color: #2d3c52;
}
html[data-theme="dark"] .hour-row {
  border-top-color: #334155;
}
html[data-theme="dark"] .hour-label {
  color: #cbd5e1;
}
html[data-theme="dark"] .quarter-line {
  border-bottom-color: #1e293b;
}
html[data-theme="dark"] .quarter-line span {
  color: #64748b;
}
html[data-theme="dark"] .timeline-event-block.appointment-event-block {
  background: #064e3b;
  border-color: #10b981;
  color: #ecfdf5;
}
html[data-theme="dark"] .timeline-event-block.appointment-event-block strong,
html[data-theme="dark"] .timeline-event-block.appointment-event-block span {
  color: #ecfdf5;
}
html[data-theme="dark"] .timeline-event-block.practice-event-block {
  background: repeating-linear-gradient(45deg, #450a0a, #450a0a 12px, #7f1d1d 12px, #7f1d1d 24px);
  border-color: #ef4444;
  color: #fca5a5;
}
html[data-theme="dark"] .timeline-event-block.practice-event-block strong,
html[data-theme="dark"] .timeline-event-block.practice-event-block span {
  color: #fca5a5;
}
html[data-theme="dark"] .day-appointments-panel {
  border-color: #2d3c52;
}
html[data-theme="dark"] .day-appointments-panel h3 {
  color: #f1f5f9;
}
html[data-theme="dark"] .day-appt-card {
  background: #162032;
  border-color: #2d3c52;
  color: #f1f5f9;
}
html[data-theme="dark"] .day-appt-card:hover {
  border-color: #48bb78;
  background: #1e2c40;
}
html[data-theme="dark"] .day-appt-card .day-appt-time {
  color: #86efac;
}
html[data-theme="dark"] .day-appt-card strong {
  color: #f1f5f9;
}
html[data-theme="dark"] .day-appt-card p {
  color: #94a3b8;
}
html[data-theme="dark"] .day-appt-card.practice-block-card {
  border-left-color: #ef4444;
  background: #2b1212;
}
html[data-theme="dark"] .day-appt-card.practice-block-card .day-appt-time {
  color: #fca5a5;
}

/* View toggle in Calendar header */
html[data-theme="dark"] .view-toggle {
  background: #162032;
  border-color: #2d3c52;
}
html[data-theme="dark"] .view-toggle a {
  color: #94a3b8;
}
html[data-theme="dark"] .view-toggle a.active {
  background: #23683f;
  color: #ecfdf5;
}
html[data-theme="dark"] .month-controls h2 {
  color: #f1f5f9;
}
html[data-theme="dark"] .bank-holiday-badge,
html[data-theme="dark"] .bank-holiday-pill {
  background: #2b1d0e !important;
  color: #fde047 !important;
  border-color: #854d0e !important;
}

/* Audio Session Recorder Animation & Theme */
@keyframes pulse-rec {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0.5; }
}

html[data-theme="dark"] .session-recorder-btn {
  background: #162032;
  border-color: #2d3c52;
  color: #f1f5f9;
}
html[data-theme="dark"] .session-recorder-btn:hover {
  background: #1e2c40;
  border-color: #48bb78;
}

/* ==========================================================================
   Clinical Session Notes (View & Edit) Dark Mode Overrides
   ========================================================================== */
html[data-theme="dark"] .session-note-content,
html[data-theme="dark"] .session-note-content *,
html[data-theme="dark"] .note-formatted-content,
html[data-theme="dark"] .note-formatted-content *,
html[data-theme="dark"] .rich-text-content,
html[data-theme="dark"] .rich-text-content *,
html[data-theme="dark"] .note-preview,
html[data-theme="dark"] .note-preview *,
html[data-theme="dark"] [id^="note-preview-"],
html[data-theme="dark"] [id^="note-preview-"] *,
html[data-theme="dark"] [id^="note-full-"],
html[data-theme="dark"] [id^="note-full-"] * {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .session-note-content *,
html[data-theme="dark"] .note-formatted-content *,
html[data-theme="dark"] .rich-text-content *:not(button):not(select),
html[data-theme="dark"] [id^="note-preview-"] *,
html[data-theme="dark"] [id^="note-full-"] * {
  background-color: transparent !important;
}

html[data-theme="dark"] [id^="note-full-"],
html[data-theme="dark"] .note-full-wrapper {
  background: #0f172a !important;
  border-color: #2d3c52 !important;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .session-note-content,
  html[data-theme="system"] .session-note-content *,
  html[data-theme="system"] .note-formatted-content,
  html[data-theme="system"] .note-formatted-content *,
  html[data-theme="system"] .rich-text-content,
  html[data-theme="system"] .rich-text-content *,
  html[data-theme="system"] .note-preview,
  html[data-theme="system"] .note-preview *,
  html[data-theme="system"] [id^="note-preview-"],
  html[data-theme="system"] [id^="note-preview-"] *,
  html[data-theme="system"] [id^="note-full-"],
  html[data-theme="system"] [id^="note-full-"] * {
    color: #f1f5f9 !important;
  }

  html[data-theme="system"] .session-note-content *,
  html[data-theme="system"] .note-formatted-content *,
  html[data-theme="system"] .rich-text-content *:not(button):not(select),
  html[data-theme="system"] [id^="note-preview-"] *,
  html[data-theme="system"] [id^="note-full-"] * {
    background-color: transparent !important;
  }

  html[data-theme="system"] [id^="note-full-"],
  html[data-theme="system"] .note-full-wrapper {
    background: #0f172a !important;
    border-color: #2d3c52 !important;
  }
}

/* ==========================================================================
   To-Do Items & Dashboard Pods Styling
   ========================================================================== */
.todo-client-name {
  color: var(--green, #344e41);
}
.todo-client-name:hover {
  color: var(--brown, #4b3624);
  text-decoration: underline;
}
.todo-notes {
  color: var(--brown, #4b3624);
}
.todo-case-badge {
  background: #e0f2fe;
  color: #0369a1;
}
.todo-due-date {
  color: #d97706;
}
.todo-done-btn {
  color: #166534;
  border-color: #86efac;
  background: #f0fdf4;
}
.todo-done-btn:hover {
  background: #166534;
  color: #fff;
}
.todo-item-card {
  background: #fff;
  border-color: var(--line);
}
.todo-item-card.completed {
  background: #f9fafb;
}
.todo-item-card.completed .todo-notes {
  text-decoration: line-through;
  color: #9ca3af;
}

html[data-theme="dark"] .todo-client-name {
  color: #68d391 !important;
}
html[data-theme="dark"] .todo-client-name:hover {
  color: #a7f3d0 !important;
  text-decoration: underline;
}
html[data-theme="dark"] .todo-notes,
html[data-theme="dark"] .todo-item-row p,
html[data-theme="dark"] .todo-list p:not(.muted) {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .todo-case-badge {
  background: #0c4a6e !important;
  color: #7dd3fc !important;
  border: 1px solid #0369a1 !important;
}
html[data-theme="dark"] .todo-due-date {
  color: #fbbf24 !important;
}
html[data-theme="dark"] .todo-done-btn {
  color: #86efac !important;
  border-color: #166534 !important;
  background: #064e3b !important;
}
html[data-theme="dark"] .todo-done-btn:hover {
  background: #166534 !important;
  color: #fff !important;
}
html[data-theme="dark"] .todo-item-card {
  background: #111a29 !important;
  border-color: #2d3c52 !important;
}
html[data-theme="dark"] .todo-item-card.completed {
  background: #0b1120 !important;
}
html[data-theme="dark"] .todo-item-card.completed .todo-notes {
  color: #64748b !important;
}
html[data-theme="dark"] .date-tile {
  background: #1e293b !important;
  color: #68d391 !important;
}
html[data-theme="dark"] .compact-list > a {
  color: #f1f5f9;
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .compact-list > a:hover {
  background: #1e2c40;
}
html[data-theme="dark"] .compact-list strong {
  color: #f1f5f9;
}
html[data-theme="dark"] .compact-list p {
  color: #94a3b8;
}
html[data-theme="dark"] .timeline-item {
  color: #f1f5f9;
}
html[data-theme="dark"] .timeline-item strong {
  color: #f1f5f9;
}
html[data-theme="dark"] .timeline-item p {
  color: #94a3b8;
}
html[data-theme="dark"] .timeline-item time {
  color: #cbd5e1;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .todo-client-name {
    color: #68d391 !important;
  }
  html[data-theme="system"] .todo-client-name:hover {
    color: #a7f3d0 !important;
    text-decoration: underline;
  }
  html[data-theme="system"] .todo-notes,
  html[data-theme="system"] .todo-item-row p,
  html[data-theme="system"] .todo-list p:not(.muted) {
    color: #f1f5f9 !important;
  }
  html[data-theme="system"] .todo-case-badge {
    background: #0c4a6e !important;
    color: #7dd3fc !important;
    border: 1px solid #0369a1 !important;
  }
  html[data-theme="system"] .todo-due-date {
    color: #fbbf24 !important;
  }
  html[data-theme="system"] .todo-done-btn {
    color: #86efac !important;
    border-color: #166534 !important;
    background: #064e3b !important;
  }
  html[data-theme="system"] .todo-done-btn:hover {
    background: #166534 !important;
    color: #fff !important;
  }
  html[data-theme="system"] .todo-item-card {
    background: #111a29 !important;
    border-color: #2d3c52 !important;
  }
  html[data-theme="system"] .todo-item-card.completed {
    background: #0b1120 !important;
  }
  html[data-theme="system"] .todo-item-card.completed .todo-notes {
    color: #64748b !important;
  }
  html[data-theme="system"] .date-tile {
    background: #1e293b !important;
    color: #68d391 !important;
  }
  html[data-theme="system"] .compact-list > a {
    color: #f1f5f9;
    border-bottom-color: var(--line);
  }
  html[data-theme="system"] .compact-list > a:hover {
    background: #1e2c40;
  }
  html[data-theme="system"] .compact-list strong {
    color: #f1f5f9;
  }
  html[data-theme="system"] .compact-list p {
    color: #94a3b8;
  }
  html[data-theme="system"] .timeline-item {
    color: #f1f5f9;
  }
  html[data-theme="system"] .timeline-item strong {
    color: #f1f5f9;
  }
  html[data-theme="system"] .timeline-item p {
    color: #94a3b8;
  }
  html[data-theme="system"] .timeline-item time {
    color: #cbd5e1;
  }
}

/* ==========================================================================
   Calendar Clashes Banner
   ========================================================================== */
.calendar-clashes-panel {
  border-left: 4px solid #ef4444;
  background: #fef2f2;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
}
.calendar-clashes-container {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.calendar-clashes-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.calendar-clashes-body {
  flex: 1;
}
.calendar-clashes-title {
  color: #991b1b;
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}
.calendar-clashes-intro {
  color: #7f1d1d;
  font-size: 0.88rem;
  margin: 0 0 0.75rem;
  line-height: 1.4;
}
.calendar-clashes-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.calendar-clash-item {
  background: #ffffff;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.calendar-clash-date {
  font-weight: 600;
  color: #111827;
  font-size: 0.95rem;
}
.calendar-clash-details {
  margin-top: 4px;
  font-size: 0.88rem;
  color: #4b5563;
}
.calendar-clash-time {
  color: #dc2626;
  font-weight: 600;
}
.calendar-clash-separator {
  margin: 0 6px;
  color: #9ca3af;
}
.calendar-clash-actions {
  display: flex;
  gap: 0.5rem;
}

/* ==========================================================================
   Outstanding Invoices Modal & Components
   ========================================================================== */
.metric--clickable {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.metric--clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(69, 50, 34, 0.08);
}
.crm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.crm-modal-dialog {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}
.crm-modal-lg {
  max-width: 920px;
}
.crm-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.crm-modal-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--brown);
}
.crm-modal-close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
}
.crm-modal-close:hover {
  color: var(--brown);
  background: rgba(0, 0, 0, 0.05);
}
.crm-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  max-height: calc(90vh - 140px);
}
.crm-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  background: var(--ivory);
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  background: #e4ebe4;
  color: #344e41;
  border: 1px solid #c2d6c3;
}
.badge.secondary {
  background: #eee8de;
  color: #6f6255;
  border-color: #dcd4c7;
}
.btn-sm {
  padding: 5px 12px !important;
  font-size: 0.78rem !important;
}
.payment-drawer-row td {
  padding: 0 !important;
  background: #f8fafc;
  border-bottom: 2px solid var(--line);
}
.payment-drawer-content {
  padding: 14px 18px;
  border-left: 4px solid var(--green);
  margin: 6px 0;
}
.payment-drawer-title {
  font-size: 0.85rem;
  margin-bottom: 10px;
  color: var(--brown);
}
.payment-drawer-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.payment-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 140px;
}
.payment-field-group label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
}
.payment-drawer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.form-control-sm {
  padding: 6px 10px !important;
  font-size: 0.82rem !important;
  border-radius: 6px !important;
}
.invoice-row-paid {
  background: #f0fdf4 !important;
  transition: background 0.3s ease;
}
.crm-alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.crm-alert.success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}
.crm-alert.error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.font-semibold {
  font-weight: 600;
}
.text-danger {
  color: var(--danger);
}

/* Dark theme overrides for Calendar Clashes & Outstanding Invoices */
html[data-theme="dark"] .calendar-clashes-panel {
  background: #2a1215 !important;
  border-color: #ef4444 !important;
  border-left: 4px solid #ef4444 !important;
}
html[data-theme="dark"] .calendar-clashes-title {
  color: #fca5a5 !important;
}
html[data-theme="dark"] .calendar-clashes-intro {
  color: #f87171 !important;
}
html[data-theme="dark"] .calendar-clash-item {
  background: #1e1418 !important;
  border-color: #5c242c !important;
}
html[data-theme="dark"] .calendar-clash-date {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .calendar-clash-details {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .calendar-clash-time {
  color: #f87171 !important;
}
html[data-theme="dark"] .calendar-clash-separator {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .badge {
  background: #064e3b !important;
  color: #86efac !important;
  border-color: #166534 !important;
}
html[data-theme="dark"] .badge.secondary {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .payment-drawer-row td {
  background: #111a29 !important;
}
html[data-theme="dark"] .invoice-row-paid {
  background: #072a15 !important;
}
html[data-theme="dark"] .crm-alert.success {
  background: #064e3b !important;
  border-color: #166534 !important;
  color: #86efac !important;
}
html[data-theme="dark"] .crm-alert.error {
  background: #450a0a !important;
  border-color: #7f1d1d !important;
  color: #fca5a5 !important;
}
html[data-theme="dark"] .crm-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .calendar-clashes-panel {
    background: #2a1215 !important;
    border-color: #ef4444 !important;
    border-left: 4px solid #ef4444 !important;
  }
  html[data-theme="system"] .calendar-clashes-title {
    color: #fca5a5 !important;
  }
  html[data-theme="system"] .calendar-clashes-intro {
    color: #f87171 !important;
  }
  html[data-theme="system"] .calendar-clash-item {
    background: #1e1418 !important;
    border-color: #5c242c !important;
  }
  html[data-theme="system"] .calendar-clash-date {
    color: #f1f5f9 !important;
  }
  html[data-theme="system"] .calendar-clash-details {
    color: #cbd5e1 !important;
  }
  html[data-theme="system"] .calendar-clash-time {
    color: #f87171 !important;
  }
  html[data-theme="system"] .calendar-clash-separator {
    color: #94a3b8 !important;
  }
  html[data-theme="system"] .badge {
    background: #064e3b !important;
    color: #86efac !important;
    border-color: #166534 !important;
  }
  html[data-theme="system"] .badge.secondary {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
  }
  html[data-theme="system"] .payment-drawer-row td {
    background: #111a29 !important;
  }
  html[data-theme="system"] .invoice-row-paid {
    background: #072a15 !important;
  }
  html[data-theme="system"] .crm-alert.success {
    background: #064e3b !important;
    border-color: #166534 !important;
    color: #86efac !important;
  }
  html[data-theme="system"] .crm-alert.error {
    background: #450a0a !important;
    border-color: #7f1d1d !important;
    color: #fca5a5 !important;
  }
  html[data-theme="system"] .crm-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  html[data-theme="system"] .webauthn-btn {
    background: #13281d !important;
    border-color: #38a169 !important;
    color: #68d391 !important;
  }
  html[data-theme="system"] .webauthn-btn:hover {
    background: #23683f !important;
    color: #fff !important;
  }
}

/* WebAuthn / Passkey Biometric Button */
.webauthn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  background: #edf5ef;
  border: 1.5px solid var(--green);
  color: var(--green);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.webauthn-btn:hover {
  background: var(--green);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] .webauthn-btn {
  background: #13281d !important;
  border-color: #38a169 !important;
  color: #68d391 !important;
}

html[data-theme="dark"] .webauthn-btn:hover {
  background: #23683f !important;
  color: #fff !important;
}