/* ============================================================================
   Medora — application theme
   Loaded AFTER the compiled Tailwind bundle, so it overrides it.

   WHY THIS FILE EXISTS
   The compiled stylesheet in public/build came from a Tailwind build we cannot
   re-run from the server. Adding NEW utility classes to a Blade file has no
   effect — they are not in the bundle. So the theme overrides the classes that
   ARE compiled, plus the component classes (.card, .btn-*, .table, .form-*,
   .nav-link, .badge). Fold this into the Tailwind config once someone can run
   npm run build again.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/style.css');

:root{
  --m-lime:#D6FD70; --m-lime-deep:#C2EA55; --m-mint:#CDFAD1;
  --m-coral:#FF4B4E;
  --m-ink:#131313; --m-ink-2:#2F2F2F; --m-body:#5B5B5B; --m-muted:#8A8A8A;
  --m-bg:#EFEEEB; --m-surface:#FFFFFF; --m-line:#E4E2DD; --m-line-2:#D3D0C9;
  --m-r-lg:20px;
  --m-ease:cubic-bezier(.22,1,.36,1);
  --m-shadow:0 1px 2px rgba(19,19,19,.04), 0 10px 30px rgba(19,19,19,.05);
  --m-shadow-lift:0 2px 4px rgba(19,19,19,.05), 0 18px 44px rgba(19,19,19,.09);
}

html, body, .font-sans{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  letter-spacing:-.005em;
}
body{ background:var(--m-bg) !important; color:var(--m-body) !important; }
h1,h2,h3,h4,h5,h6{ color:var(--m-ink) !important; letter-spacing:-.028em; font-weight:600; }
.font-mono, code, kbd, pre{ font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace !important; }
::selection{ background:var(--m-lime); color:var(--m-ink); }

.bg-surface-50   { background-color:var(--m-bg) !important; }
.bg-surface-100  { background-color:#E7E5E0 !important; }
.bg-surface-900  { background-color:var(--m-ink) !important; }
.text-surface-400{ color:var(--m-muted) !important; }
.text-surface-500{ color:var(--m-muted) !important; }
.text-surface-600{ color:var(--m-body) !important; }
.text-surface-700{ color:var(--m-body) !important; }
.text-surface-800{ color:var(--m-ink-2) !important; }
.text-surface-900{ color:var(--m-ink) !important; }
.border-surface-100{ border-color:var(--m-line) !important; }
.border-surface-200{ border-color:var(--m-line) !important; }
.border-surface-300{ border-color:var(--m-line-2) !important; }

.bg-brand-50   { background-color:#F4FFE0 !important; }
.bg-brand-100  { background-color:#EAFFC4 !important; }
.bg-brand-600  { background-color:var(--m-lime) !important; color:var(--m-ink) !important; }
.text-brand-600{ color:#5F7A17 !important; }
.text-brand-700{ color:#4E6612 !important; }
.border-brand-600{ border-color:var(--m-lime-deep) !important; }

header.sticky, header[class*="sticky"]{
  background:rgba(239,238,235,.86) !important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--m-line) !important;
}
aside:not(.m-auth-brand){ background:var(--m-surface) !important; border-right:1px solid var(--m-line) !important; }

.nav-link{
  border-radius:11px !important; font-weight:500 !important; color:var(--m-body) !important;
  transition:all .25s var(--m-ease) !important; position:relative;
}
.nav-link:hover{ background:var(--m-bg) !important; color:var(--m-ink) !important; }
.nav-link-active{ background:var(--m-ink) !important; color:#fff !important; font-weight:600 !important; }
.nav-link-active::before{
  content:''; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:2px; background:var(--m-lime);
}
.nav-link-active svg{ color:var(--m-lime) !important; }

.card{
  background:var(--m-surface) !important; border:1px solid var(--m-line) !important;
  border-radius:var(--m-r-lg) !important; box-shadow:var(--m-shadow) !important;
  transition:box-shadow .45s var(--m-ease), transform .45s var(--m-ease);
}
.card:hover{ box-shadow:var(--m-shadow-lift) !important; }
.card-pad{ padding:26px !important; }
.card .text-2xl, .card .text-3xl{
  font-weight:600 !important; letter-spacing:-.04em !important; color:var(--m-ink) !important;
}

.btn-primary,.btn-secondary,.btn-danger,.btn-ghost{
  border-radius:999px !important; font-weight:600 !important; letter-spacing:.01em !important;
  transition:all .3s var(--m-ease) !important; box-shadow:none !important;
}
.btn-primary{ background:var(--m-ink) !important; color:#fff !important; border:1px solid var(--m-ink) !important; }
.btn-primary:hover{ background:#000 !important; transform:translateY(-1px); }
.btn-secondary{ background:var(--m-surface) !important; color:var(--m-ink) !important; border:1px solid var(--m-line-2) !important; }
.btn-secondary:hover{ border-color:var(--m-ink) !important; background:var(--m-bg) !important; }
.btn-danger{ background:var(--m-coral) !important; border:1px solid var(--m-coral) !important; color:#fff !important; }
.btn-danger:hover{ filter:brightness(.94); }
.btn-ghost{ color:var(--m-body) !important; }
.btn-ghost:hover{ background:var(--m-bg) !important; color:var(--m-ink) !important; }

.form-input,.form-select,.form-textarea,.form-multiselect{
  border-radius:11px !important; border:1px solid var(--m-line-2) !important;
  background:var(--m-surface) !important; color:var(--m-ink) !important;
  padding:11px 13px !important; font-size:14.5px !important;
  transition:border-color .25s var(--m-ease), box-shadow .25s var(--m-ease) !important;
  box-shadow:none !important;
}
.form-input:focus,.form-select:focus,.form-textarea:focus,.form-multiselect:focus{
  border-color:var(--m-ink) !important;
  box-shadow:0 0 0 3px rgba(214,253,112,.55) !important; outline:none !important;
}
.form-input::placeholder,.form-textarea::placeholder{ color:#AFACA6 !important; }
.form-label{
  font-family:'Geist Mono',monospace !important; font-size:10.5px !important;
  letter-spacing:.11em !important; text-transform:uppercase !important;
  color:var(--m-muted) !important; font-weight:500 !important;
}

.table-wrap{
  background:var(--m-surface) !important; border:1px solid var(--m-line) !important;
  border-radius:var(--m-r-lg) !important; overflow:hidden !important; box-shadow:var(--m-shadow) !important;
}
.table thead th{
  background:var(--m-bg) !important; font-family:'Geist Mono',monospace !important;
  font-size:10.5px !important; letter-spacing:.11em !important; text-transform:uppercase !important;
  color:var(--m-muted) !important; font-weight:500 !important;
  padding:13px 16px !important; border-bottom:1px solid var(--m-line) !important;
}
.table tbody td{
  padding:15px 16px !important; border-bottom:1px solid var(--m-line) !important;
  font-size:14.5px !important; color:var(--m-body) !important;
}
.table tbody tr{ transition:background .2s var(--m-ease); }
.table tbody tr:hover{ background:#FAFAF8 !important; }
.table tbody tr:last-child td{ border-bottom:0 !important; }

.badge{
  border-radius:999px !important; font-family:'Geist Mono',monospace !important;
  font-size:10.5px !important; letter-spacing:.07em !important; text-transform:uppercase !important;
  font-weight:600 !important; padding:4px 10px !important; border:1px solid transparent !important;
}

hr{ border-color:var(--m-line) !important; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:#D3D0C9; border-radius:99px; border:3px solid var(--m-bg); }
*::-webkit-scrollbar-thumb:hover{ background:#B9B5AC; }

@keyframes m-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
main > *{ animation:m-in .5s var(--m-ease) backwards; } /* backwards, not both: fill:both holds transform:none as an identity matrix, which becomes a containing block and traps fixed-position modals inside <main>. */
@media(prefers-reduced-motion:reduce){ main > *{ animation:none; } }

.dark body{ background:#0E0E0E !important; color:#A8A8A8 !important; }
.dark .card,.dark .table-wrap{ background:#191919 !important; border-color:#2A2A2A !important; }
.dark aside:not(.m-auth-brand){ background:#141414 !important; border-right-color:#262626 !important; }
.dark .table thead th{ background:#141414 !important; border-bottom-color:#2A2A2A !important; }
.dark .table tbody td{ border-bottom-color:#232323 !important; color:#A8A8A8 !important; }
.dark .table tbody tr:hover{ background:#1E1E1E !important; }
.dark .form-input,.dark .form-select,.dark .form-textarea{
  background:#191919 !important; border-color:#2E2E2E !important; color:#EDEDED !important;
}
.dark .btn-secondary{ background:#191919 !important; border-color:#2E2E2E !important; color:#EDEDED !important; }
.dark h1,.dark h2,.dark h3,.dark h4,.dark h5,.dark h6{ color:#F5F5F5 !important; }
.dark .nav-link{ color:#A8A8A8 !important; }
.dark .nav-link:hover{ background:#1E1E1E !important; color:#fff !important; }
.dark .nav-link-active{ background:var(--m-lime) !important; color:var(--m-ink) !important; }
.dark .nav-link-active svg{ color:var(--m-ink) !important; }
.dark *::-webkit-scrollbar-thumb{ background:#333; border-color:#0E0E0E; }


/* ---- generic Tailwind greys used as page/panel backgrounds ---- */
.bg-gray-50,.bg-gray-100,.bg-slate-50,.bg-slate-100,.bg-neutral-50,.bg-neutral-100{
  background-color:var(--m-bg) !important;
}
.dark .bg-gray-800,.dark .bg-gray-900,.dark .bg-slate-800,.dark .bg-slate-900{
  background-color:#141414 !important;
}
.border-gray-200,.border-gray-300,.border-slate-200{ border-color:var(--m-line) !important; }
.text-gray-500,.text-gray-600,.text-slate-500{ color:var(--m-muted) !important; }
.text-gray-700,.text-gray-800,.text-gray-900{ color:var(--m-ink) !important; }

/* ---- auth card (guest layout uses raw utilities, not .card) ---- */
.min-h-screen > .bg-white,
.sm\:max-w-md.bg-white{
  border:1px solid var(--m-line) !important;
  border-radius:var(--m-r-lg) !important;
  box-shadow:var(--m-shadow) !important;
  padding:30px !important;
}


/* ============================================================================
   SIGN-IN — split screen, mirrors the marketing hero
   ============================================================================ */
.m-auth-body{ background:var(--m-bg) !important; }
.m-auth{ display:grid; grid-template-columns:1.05fr 1fr; min-height:100vh; }
@media(max-width:900px){ .m-auth{ grid-template-columns:1fr; } }

/* ---- brand panel ---- */
.m-auth-brand{
  background:var(--m-ink) !important; border-right:0 !important; position:relative; overflow:hidden;
  padding:56px 52px; display:flex; align-items:center;
}
.m-auth-brand::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(680px 320px at 82% -8%, rgba(214,253,112,.20), transparent 62%),
    radial-gradient(520px 300px at 8% 106%, rgba(143,0,255,.18), transparent 60%);
}
@media(max-width:900px){ .m-auth-brand{ display:none; } }
.m-auth-brand-inner{
  position:relative; display:flex; flex-direction:column; gap:40px;
  max-width:460px; margin:0 auto; width:100%;
}
.m-auth-logo{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:20px; color:#fff !important; letter-spacing:-.03em; text-decoration:none;
}
.m-auth-mark{
  width:32px; height:32px; border-radius:9px; background:var(--m-lime); color:var(--m-ink);
  display:grid; place-items:center; font-size:16px; font-weight:800;
}
.m-auth-eyebrow{
  font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.46); margin-bottom:18px; display:flex; align-items:center; gap:9px;
}
.m-auth-eyebrow::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--m-lime); }
.m-auth-head{
  color:#fff !important; font-size:clamp(30px,3.4vw,46px); line-height:1.08;
  font-weight:400 !important; letter-spacing:-.035em; margin:0;
}
.m-auth-head em{ font-style:normal; color:var(--m-lime); }
.m-auth-sub{ color:rgba(255,255,255,.58); font-size:16.5px; margin-top:20px; line-height:1.65; }
.m-auth-points{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.m-auth-points li{
  display:flex; gap:12px; align-items:flex-start;
  color:rgba(255,255,255,.72); font-size:15px;
}
.m-auth-points li span{
  flex-shrink:0; width:20px; height:20px; border-radius:50%; background:rgba(214,253,112,.16);
  color:var(--m-lime); display:grid; place-items:center; font-size:11px; font-weight:700; margin-top:2px;
}
.m-auth-foot{
  font-family:'Geist Mono',monospace; font-size:11.5px; letter-spacing:.06em;
  color:rgba(255,255,255,.34); margin:0;
}
.m-auth-foot a{ color:rgba(255,255,255,.62) !important; text-decoration:underline; }
.m-auth-foot a:hover{ color:var(--m-lime) !important; }

/* ---- form panel ---- */
.m-auth-panel{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 32px; gap:22px;
}
.m-auth-card{
  width:100%; max-width:410px; background:var(--m-surface);
  border:1px solid var(--m-line); border-radius:22px; padding:38px 34px;
  box-shadow:0 1px 2px rgba(19,19,19,.04), 0 18px 50px rgba(19,19,19,.07);
}
.m-auth-logo-sm{ color:var(--m-ink) !important; font-size:18px; margin-bottom:26px; display:none; }
@media(max-width:900px){ .m-auth-logo-sm{ display:inline-flex; } }
.m-auth-logo-sm .m-auth-mark{ background:var(--m-ink); color:var(--m-lime); }
.m-auth-hospital{ width:46px; height:46px; margin-bottom:20px; border-radius:10px; }
.m-auth-title{ font-size:27px !important; margin:0 0 6px !important; letter-spacing:-.035em; }
.m-auth-hint{ color:var(--m-muted); font-size:14.5px; margin:0 0 26px; }
.m-auth-legal{
  font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:.07em;
  color:var(--m-muted); text-align:center; margin:0;
}

/* ---- the Breeze form inside the card ---- */
.m-auth-card label,
.m-auth-card .block.font-medium{
  font-family:'Geist Mono',monospace !important; font-size:10.5px !important;
  letter-spacing:.11em !important; text-transform:uppercase !important;
  color:var(--m-muted) !important; font-weight:500 !important;
}
.m-auth-card input[type="email"],
.m-auth-card input[type="password"],
.m-auth-card input[type="text"]{
  width:100% !important; border-radius:11px !important;
  border:1px solid var(--m-line-2) !important; background:var(--m-bg) !important;
  padding:12px 14px !important; font-size:15px !important; color:var(--m-ink) !important;
  transition:border-color .25s var(--m-ease), box-shadow .25s var(--m-ease), background .25s !important;
  box-shadow:none !important;
}
.m-auth-card input:focus{
  border-color:var(--m-ink) !important; background:#fff !important;
  box-shadow:0 0 0 3px rgba(214,253,112,.55) !important; outline:none !important;
}
.m-auth-card button[type="submit"],
.m-auth-card .btn-primary{
  width:100%; justify-content:center; border-radius:999px !important;
  background:var(--m-ink) !important; color:#fff !important; border:1px solid var(--m-ink) !important;
  padding:12px 22px !important; font-weight:600 !important; font-size:13.5px !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  transition:all .3s var(--m-ease) !important;
}
.m-auth-card button[type="submit"]:hover{ background:#000 !important; transform:translateY(-1px); }
.m-auth-card a{ color:var(--m-body); font-size:13.5px; }
.m-auth-card a:hover{ color:var(--m-ink); }
.m-auth-card input[type="checkbox"]{ accent-color:var(--m-ink); border-radius:5px; }
.m-auth-card .text-red-600,.m-auth-card .text-sm.text-red-600{ color:var(--m-coral) !important; font-size:13px !important; }

/* dark mode */
.dark .m-auth-body{ background:#0E0E0E !important; }
.dark .m-auth-card{ background:#191919 !important; border-color:#2A2A2A !important; }
.dark .m-auth-card input{ background:#111 !important; border-color:#2E2E2E !important; color:#EDEDED !important; }
.dark .m-auth-title{ color:#F5F5F5 !important; }


/* ---- AUTH ACTIONS ROW — keep the forgot link on one line ---- */
.m-auth-card form > div:last-child,
.m-auth-card .flex.items-center.justify-end{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:16px !important; margin-top:26px !important; flex-wrap:nowrap !important;
}
.m-auth-card form > div:last-child a{ white-space:nowrap; flex-shrink:0; }
.m-auth-card button[type="submit"]{ width:auto !important; min-width:132px; }

/* ============================================================================
   DASHBOARD POLISH
   ============================================================================ */

/* page heading block */
main h1,
main > div > h1{ font-size:29px !important; letter-spacing:-.038em !important; }
main h1 + p{ color:var(--m-muted) !important; font-size:15px !important; }

/* stat tiles — big number, quiet label, lime accent bar on hover */
.card .text-xs.uppercase,
.card .text-xs.font-semibold.uppercase{
  font-family:'Geist Mono',monospace !important; letter-spacing:.12em !important;
  color:var(--m-muted) !important; font-size:10.5px !important;
}
.card{ position:relative; overflow:hidden; }
.card::after{
  content:''; position:absolute; left:0; top:0; height:100%; width:3px;
  background:var(--m-lime); opacity:0; transition:opacity .4s var(--m-ease);
}
.card:hover::after{ opacity:1; }

/* empty states read as considered rather than broken */
.text-center .text-surface-500,
[class*="empty"] p{ color:var(--m-muted) !important; }

/* tabs */
[role="tablist"] a, .tab-link{
  font-family:'Geist Mono',monospace !important; font-size:11.5px !important;
  letter-spacing:.09em !important; text-transform:uppercase !important;
}

/* toasts */
[x-data*="toast"] > div, .toast{
  border-radius:14px !important; border:1px solid var(--m-line) !important;
  box-shadow:0 12px 34px rgba(19,19,19,.14) !important;
  font-size:14px !important;
}

/* pagination */
nav[role="navigation"] span, nav[role="navigation"] a{
  border-radius:9px !important; font-size:13.5px !important;
}


/* ---------------------------------------------------------------------------
   SIGN-IN — "Book a demo" CTA
   Product-led entry point for visitors who land on the login page without an
   account. Sits below the sign-in card, deliberately quieter than LOG IN so it
   does not compete with the primary action for existing staff.
--------------------------------------------------------------------------- */
.m-auth-cta{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.5rem;
  margin:1.25rem auto 0; max-width:24rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(19,19,19,.10);
}
.m-auth-cta-text{
  font-size:.8125rem; color:rgba(19,19,19,.55); letter-spacing:.01em;
}
.m-auth-cta-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.6875rem; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase;
  color:#131313; text-decoration:none;
  padding:.5rem .85rem; border-radius:999px;
  background:var(--m-lime, #D6FD70);
  border:1px solid rgba(19,19,19,.12);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.m-auth-cta-link:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(19,19,19,.14);
  background:#e2ff8c;
}
.m-auth-cta-arw{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.05rem; height:1.05rem; border-radius:999px;
  background:#131313; color:#D6FD70;
  font-size:.625rem; line-height:1;
}
.dark .m-auth-cta{ border-top-color:rgba(255,255,255,.12); }
.dark .m-auth-cta-text{ color:rgba(255,255,255,.60); }


/* ---------------------------------------------------------------------------
   FIX — search inputs with a leading icon
   The .form-input rule above sets "padding:11px 13px !important", which also
   overrides Tailwind's pl-9 / pl-10 utilities because this file loads after the
   compiled bundle. The icon is absolutely positioned at the left edge, so the
   text ran straight through it. Restore the left inset here.
--------------------------------------------------------------------------- */
.form-input.pl-8 { padding-left:2.00rem !important; }
.form-input.pl-9 { padding-left:2.25rem !important; }
.form-input.pl-10{ padding-left:2.50rem !important; }
.form-input.pl-11{ padding-left:2.75rem !important; }
.form-input.pl-12{ padding-left:3.00rem !important; }

/* Some views place the icon before the field without a pl-* utility at all
   (the global search in the top bar). Catch those structurally. */
.relative > .absolute ~ .form-input,
.relative > svg.absolute ~ .form-input { padding-left:2.40rem !important; }

/* Keep the icon itself on the left edge and optically centred. */
.relative > svg.absolute.h-4,
.relative > span.absolute.inset-y-0 { left:.80rem; }
.relative > svg.absolute.h-4 { top:50%; transform:translateY(-50%); }

/* ---------------------------------------------------------------------------
   FIX — page content alignment on wide screens
   The shell is "lg:pl-64" (256px for the fixed sidebar) and the page container
   is "mx-auto max-w-7xl". On a wide monitor the 1280px container is centred
   inside the *remaining* space, which leaves a large dead gap next to the
   sidebar and makes the whole page look shunted to the right. Widening the
   container on large screens closes that gap while keeping line lengths sane.
--------------------------------------------------------------------------- */
@media (min-width:1600px){
  .lg\:pl-64 main.mx-auto.max-w-7xl,
  .lg\:pl-64 .mx-auto.max-w-7xl { max-width:1600px !important; }
}
@media (min-width:2000px){
  .lg\:pl-64 main.mx-auto.max-w-7xl,
  .lg\:pl-64 .mx-auto.max-w-7xl { max-width:1840px !important; }
}


/* ---------------------------------------------------------------------------
   MODAL — always keep the footer (Save/Cancel) reachable
   The dialog markup is the standard fixed + overflow scroll pattern, which is
   correct, but on a short viewport a tall form (e.g. Book Appointment) can push
   the footer buttons below the fold and the user cannot get to them. Capping the
   panel at the viewport height, scrolling the BODY internally, and keeping the
   header and footer pinned guarantees the buttons are visible at every size.
--------------------------------------------------------------------------- */
.m-dialog-panel{
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 2rem);
  max-height:calc(100dvh - 2rem);   /* accounts for mobile browser chrome */
}
.m-dialog-panel > *{ flex:0 0 auto; }      /* header and footer keep their size */
.m-dialog-body{
  flex:1 1 auto;                            /* body takes the remaining space   */
  overflow-y:auto;                          /* and scrolls on its own           */
  overscroll-behavior:contain;             /* don't scroll the page behind it  */
}


/* Destructive row action (delete). Red so it reads as dangerous; needs
   !important to beat the shared .btn-ghost colour rule. */
.btn-ghost.btn-del{ color:#dc2626 !important; }
.btn-ghost.btn-del:hover{ color:#b91c1c !important; background:rgba(220,38,38,.10) !important; }
.dark .btn-ghost.btn-del{ color:#f87171 !important; }