@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* NovaCare Patient Portal - v4. Uses the public website palette (style.css):
   cyan #00b4d8, navy ink #03045e, light cyan #dff9ff, amber #f5b301, Poppins. */
:root{
  --p-primary:#0093b0; --p-primary-ink:#007a93; --p-cyan:#00b4d8; --p-teal:#00b4d8; --p-purple:#03045e;
  --p-deep:#03045e; --p-mint:#dff9ff; --p-amber:#f5b301;
  --p-ink:#03045e; --p-muted:#686877; --p-line:#e4edf0; --p-bg:#f4f9fb;
  --p-success:#0d7a4b; --p-success-soft:#e3f6ec;
  --p-warning:#8a5d00; --p-warning-soft:#fff3d6;
  --p-danger:#b42318; --p-danger-soft:#fde9e7;
  --p-shadow:0 1px 2px rgba(3,4,94,.06); --p-shadow2:0 10px 30px rgba(3,4,94,.12);
  --p-radius:14px; --p-radius-lg:20px;
  --p-dur:.2s; --p-dur-slow:.3s; --p-ease:ease; --p-ease-spring:ease;
  --font-display:'Poppins',Inter,system-ui,sans-serif;
}
body{ background:var(--p-bg); color:var(--p-ink); font-family:'Poppins',Inter,system-ui,-apple-system,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
a,button,.btn,input,select{ transition:background-color var(--p-dur),border-color var(--p-dur),color var(--p-dur),box-shadow var(--p-dur); }
:focus-visible{ outline:3px solid rgba(0,180,216,.5); outline-offset:2px; }
@keyframes p-fade{ from{opacity:0} to{opacity:1} }
@keyframes p-rise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.p-anim{ animation:p-fade var(--p-dur-slow) ease both; }
.p-reveal{ animation:p-rise .6s cubic-bezier(.22,1,.36,1) .1s both; }
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* Top bar */
.p-nav{ background:var(--p-deep); border-bottom:1px solid rgba(255,255,255,.08); padding:12px 0; position:sticky; top:0; z-index:100; color:#fff; }
.p-nav .brand-mark{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; color:#fff; text-decoration:none; }
.p-nav .brand-mark img{ width:34px; height:34px; background:#fff; border-radius:9px; padding:3px; }
.p-nav .greet{ color:rgba(255,255,255,.7); font-size:13px; }
.p-nav .btn-outline-secondary,.p-nav .btn-outline-danger{ color:#fff; border-color:rgba(255,255,255,.3); }
.p-nav .btn-outline-secondary:hover,.p-nav .btn-outline-danger:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.55); }

/* Panels (older pages use .card-soft) */
.card-soft,.p-panel{ background:#fff; border:1px solid var(--p-line); border-radius:var(--p-radius); box-shadow:none; }
.p-panel{ padding:22px; }
.p-panel h2{ font-family:var(--font-display); font-size:17px; font-weight:600; margin:0 0 6px; display:flex; align-items:center; gap:9px; }
.p-panel h2 i{ color:var(--p-cyan); }
.p-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--p-line); }
.p-row:first-of-type{ border-top:0; }
.p-row .t{ font-weight:500; } .p-row .s{ color:var(--p-muted); font-size:13px; }

/* Hero + next-visit slip */
.p-hero{ background:var(--p-deep) radial-gradient(900px 400px at 100% 0,rgba(0,180,216,.40),transparent 70%); color:#fff; padding:36px 0 84px; }
.p-hero .wrap{ display:grid; grid-template-columns:1fr minmax(320px,430px); gap:32px; align-items:center; }
.p-hero h1{ font-family:var(--font-display); font-size:clamp(28px,5vw,42px); font-weight:600; letter-spacing:-.02em; line-height:1.15; margin:0 0 8px; }
.p-hero .sub{ color:rgba(255,255,255,.75); font-size:16px; }
.p-slip{ background:#fff; color:var(--p-ink); border-radius:18px; display:grid; grid-template-columns:116px 1fr; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,30,.35); border-top:4px solid var(--p-amber); }
.p-slip .date{ background:var(--p-mint); text-align:center; padding:18px 8px; display:flex; flex-direction:column; justify-content:center; }
.p-slip .date b{ font-family:var(--font-display); font-size:52px; line-height:1.05; font-weight:700; color:var(--p-deep); }
.p-slip .date span{ font-size:13px; font-weight:600; color:var(--p-primary); }
.p-slip .info{ padding:20px 22px; border-left:2px dashed #a8dbe6; }
.p-slip .when{ font-family:var(--font-display); font-size:24px; font-weight:600; line-height:1.15; }
.p-slip .who{ color:var(--p-muted); margin:4px 0 12px; }
.p-slip.empty{ grid-template-columns:1fr; padding:24px; }
.p-slip.empty .when{ font-size:21px; }
@media (max-width:860px){ .p-hero .wrap{ grid-template-columns:1fr; } }

/* Summary strip overlapping the hero */
.p-strip{ display:grid; grid-template-columns:repeat(3,1fr); background:#fff; border:1px solid var(--p-line); border-radius:var(--p-radius); margin-top:-48px; position:relative; box-shadow:var(--p-shadow2); }
.p-strip > div{ padding:18px 24px; }
.p-strip > div + div{ border-left:1px solid var(--p-line); }
.p-strip .k{ color:var(--p-muted); font-size:13px; font-weight:500; }
.p-strip .v{ font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:-.02em; }
@media (max-width:700px){ .p-strip{ grid-template-columns:1fr; } .p-strip > div + div{ border-left:0; border-top:1px solid var(--p-line); } }

/* Older stat tiles (other pages) */
.p-stat{ background:#fff; border:1px solid var(--p-line); border-radius:var(--p-radius); padding:20px; }
.p-stat .p-ico{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--p-mint); color:var(--p-primary); font-size:20px; margin-bottom:10px; }
.p-stat .p-num{ font-family:var(--font-display); font-size:25px; font-weight:600; }
.p-stat .p-label{ color:var(--p-muted); font-size:13px; font-weight:500; }

/* Badges, buttons, tables, forms */
.badge-soft{ background:var(--p-mint); color:#006f87; border-radius:999px; padding:4px 11px; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.badge-soft::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-soft.ok{ background:var(--p-success-soft); color:var(--p-success); }
.badge-soft.warn{ background:var(--p-warning-soft); color:var(--p-warning); }
.badge-soft.bad{ background:var(--p-danger-soft); color:var(--p-danger); }
.btn{ border-radius:10px !important; font-weight:500; }
.btn-primary{ background:var(--p-primary) !important; border:0 !important; box-shadow:none; font-weight:600; }
.btn-primary:hover{ background:var(--p-primary-ink) !important; }
.btn-outline-primary{ color:var(--p-primary); border-color:var(--p-primary); }
.btn-outline-primary:hover{ background:var(--p-primary); border-color:var(--p-primary); }
.btn-outline-secondary{ color:var(--p-ink); border-color:#c9dbe0; }
.btn-outline-secondary:hover{ background:var(--p-mint); color:var(--p-ink); border-color:#a8dbe6; }
.table{ font-size:14px; } .table thead th{ color:var(--p-muted); font-weight:500; font-size:12.5px; border-bottom:1px solid var(--p-line); }
.table tbody tr:hover{ background:#f6fbfd; }
.form-control,.form-select{ border-radius:10px; border-color:#c9dbe0; padding:10px 13px; }
.form-control:focus,.form-select:focus{ border-color:var(--p-cyan); box-shadow:0 0 0 4px rgba(0,180,216,.18); }
.p-empty{ text-align:center; padding:26px 12px; color:var(--p-muted); }
.p-empty .ico{ font-size:30px; color:#a8dbe6; margin-bottom:6px; }

/* Login */
.p-login-shell{ min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; }
@media (max-width:900px){ .p-login-shell{ grid-template-columns:1fr; } .p-login-visual{ display:none; } }
.p-login-visual{ position:relative; overflow:hidden; background:var(--p-deep) radial-gradient(700px 500px at 90% 0,rgba(0,180,216,.5),transparent 70%); display:flex; flex-direction:column; justify-content:space-between; padding:48px; color:#fff; }
.p-login-visual .blob{ display:none; }
.p-login-visual .content{ position:relative; z-index:2; }
.p-login-visual .content .badge-line{ display:inline-block; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); padding:6px 14px; border-radius:999px; font-size:13px; font-weight:500; margin-bottom:18px; }
.p-login-visual h1{ font-family:var(--font-display); font-size:38px; font-weight:600; letter-spacing:-.02em; line-height:1.15; max-width:16ch; }
.p-login-visual p{ opacity:.82; max-width:38ch; margin-top:12px; }
.p-login-visual .services{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.p-login-visual .services span{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); padding:6px 12px; border-radius:10px; font-size:13px; }
.p-login-form{ display:flex; align-items:center; justify-content:center; padding:32px; background:#fff; }
.p-login-form .inner{ width:100%; max-width:380px; }