/* RamaCareDemo - look and feel close to the RAMACARE workspace screens */
:root {
  --rc-primary: #1565c0;
  --rc-primary-soft: #e3eefb;
  --rc-active: #c9dcf2;
  --rc-ink: #1d2b3a;
  --rc-muted: #64748b;
  --rc-bg: #f4f7fb;
  --rc-line: #e3e8ef;
  --rc-card: #ffffff;
  --rc-danger: #d32f2f;
  --rc-warn: #ef6c00;
  --rc-ok: #2e7d32;
  --rc-teal: #00897b;
  --sidebar-w: 248px;
  --header-h: 64px;
}

html, body { height: 100%; }
body {
  background: var(--rc-bg);
  color: var(--rc-ink);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans Thai", "Leelawadee UI", sans-serif;
  font-size: .925rem;
}
a { color: var(--rc-primary); }
.btn-primary { background: var(--rc-primary); border-color: var(--rc-primary); }
.btn-primary:hover { background: #0d4f9e; border-color: #0d4f9e; }
.text-muted-2 { color: var(--rc-muted) !important; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; }

/* ---------- header ---------- */
.rc-header {
  height: var(--header-h);
  background: #fff;
  border-bottom: 1px solid var(--rc-line);
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; padding: 0 1rem;
}
.rc-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.rc-brand .org { font-size: .75rem; color: var(--rc-primary); font-weight: 600; line-height: 1; }
.rc-brand .name { font-size: 1.15rem; font-weight: 800; color: var(--rc-primary); letter-spacing: .02em; line-height: 1.1; }
.rc-brand .ws { font-size: .8rem; color: var(--rc-muted); border-left: 1px solid var(--rc-line); padding-left: .7rem; margin-left: .3rem; }
.rc-header .icon-btn {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--rc-ink); font-size: 1.25rem; text-decoration: none; border: 0; background: transparent;
}
.rc-header .icon-btn:hover { background: var(--rc-primary-soft); color: var(--rc-primary); }
.rc-user { display: flex; align-items: center; gap: .5rem; border: 0; background: transparent; padding: .25rem .5rem; border-radius: 2rem; }
.rc-user:hover { background: var(--rc-primary-soft); }
.rc-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--rc-primary-soft); color: var(--rc-primary);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}

/* ---------- shell ---------- */
.rc-shell { display: flex; min-height: calc(100vh - var(--header-h)); }
.rc-sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: #fff; border-right: 1px solid var(--rc-line);
  padding: .75rem .5rem; position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto;
  transition: width .15s, flex-basis .15s;
}
.rc-sidebar .nav-link {
  color: var(--rc-ink); border-radius: .4rem; padding: .6rem .75rem; display: flex; align-items: center; gap: .75rem;
  font-weight: 500; white-space: nowrap; overflow: hidden;
}
.rc-sidebar .nav-link i { font-size: 1.15rem; width: 1.4rem; text-align: center; flex: 0 0 auto; }
.rc-sidebar .nav-link:hover { background: var(--rc-primary-soft); }
.rc-sidebar .nav-link.active { background: var(--rc-active); color: #0b3d75; }
.rc-sidebar .nav-group > .nav-link .chev { margin-left: auto; transition: transform .15s; font-size: .8rem; }
.rc-sidebar .nav-group > .nav-link[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.rc-sidebar .sub .nav-link { padding-left: 2.25rem; font-weight: 400; }
.rc-sidebar .ws-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rc-muted); padding: .25rem .75rem .5rem; }
body.sidebar-collapsed .rc-sidebar { width: 64px; flex-basis: 64px; }
body.sidebar-collapsed .rc-sidebar .label, body.sidebar-collapsed .rc-sidebar .chev,
body.sidebar-collapsed .rc-sidebar .ws-title { display: none; }
body.sidebar-collapsed .rc-sidebar .sub .nav-link { padding-left: .75rem; }
.rc-main { flex: 1 1 auto; min-width: 0; padding: 1.25rem; }
.rc-main.no-sidebar { max-width: 1400px; margin: 0 auto; }

/* ---------- cards / panels ---------- */
.rc-card { background: var(--rc-card); border: 1px solid var(--rc-line); border-radius: .6rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.rc-card-header { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rc-line); flex-wrap: wrap; }
.rc-card-header h1, .rc-card-header h2 { font-size: 1.2rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: .5rem; }
.rc-card-body { padding: 1.25rem; }
.rc-refresh { color: var(--rc-ink); font-size: 1rem; }
.rc-refresh:hover { color: var(--rc-primary); }
.rc-toolbar { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.rc-toolbar .form-control.search { min-width: 260px; }
.page-title { font-size: 1.35rem; font-weight: 600; margin-bottom: 1rem; }

/* ---------- tables ---------- */
.table-rc { margin: 0; }
.table-rc > thead th { font-weight: 600; color: #334155; background: #fff; border-bottom: 1px solid var(--rc-line); white-space: nowrap; font-size: .85rem; vertical-align: middle; }
.table-rc > tbody td { vertical-align: middle; border-color: #eef1f5; }
.table-rc > tbody tr:hover { background: #f8fbff; }
.table-rc .actions { white-space: nowrap; text-align: right; }
.table-rc .actions .btn { padding: .2rem .45rem; }
.act-icon { color: #263238; font-size: 1.1rem; padding: .15rem .3rem; border: 0; background: none; }
.act-icon:hover { color: var(--rc-primary); }
.act-icon.danger:hover { color: var(--rc-danger); }
.rc-pager { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; padding: .75rem 1.25rem; border-top: 1px solid var(--rc-line); font-size: .85rem; color: var(--rc-muted); flex-wrap: wrap; }
.rc-pager .pagination { margin: 0; }
.filter-row th { padding-top: .25rem; padding-bottom: .5rem; }
.filter-row .form-control, .filter-row .form-select { font-size: .82rem; }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 1rem; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.chip-grey { background: #eceff1; color: #455a64; }
.chip-blue { background: #e3f2fd; color: #1565c0; }
.chip-green { background: #e8f5e9; color: #2e7d32; }
.chip-orange { background: #fff3e0; color: #e65100; }
.chip-red { background: #ffebee; color: #c62828; }
.chip-teal { background: #e0f2f1; color: #00695c; }
.chip-purple { background: #f3e5f5; color: #6a1b9a; }
.chip-outline { border: 1px solid currentColor; background: transparent; }
.method { display: inline-block; min-width: 3.4rem; text-align: center; font-weight: 700; font-size: .72rem; border-radius: .3rem; padding: .15rem .4rem; color: #fff; }
.method-GET { background: #1e88e5; } .method-POST { background: #43a047; } .method-PUT { background: #fb8c00; }
.method-PATCH { background: #8e24aa; } .method-DELETE { background: #e53935; }

/* ---------- launcher ---------- */
.hero { background: #fff; border-radius: .75rem; border: 1px solid var(--rc-line); padding: 2rem 2.25rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.hero .greet { color: var(--rc-primary); font-weight: 500; }
.hero h1 { font-size: 2rem; font-weight: 700; margin: .25rem 0 .5rem; }
.hero .stat { margin-left: auto; background: var(--rc-bg); border-radius: .6rem; padding: 1rem 1.75rem; text-align: center; }
.hero .stat .n { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--rc-ink); }
.ws-card { display: flex; align-items: center; gap: 1.1rem; padding: 1.4rem 1.5rem; background: #f7f9fc; border: 1px solid var(--rc-line); border-radius: .6rem; text-decoration: none; color: inherit; height: 100%; transition: box-shadow .15s, transform .15s, background .15s; }
.ws-card:hover { background: #fff; box-shadow: 0 6px 20px rgba(21, 101, 192, .12); transform: translateY(-2px); color: inherit; }
.ws-card .ic { width: 64px; height: 64px; border-radius: 50%; background: #dbe8f7; color: #0f3b6f; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex: 0 0 auto; }
.ws-card .kicker { font-size: .78rem; color: var(--rc-muted); letter-spacing: .02em; }
.ws-card .title { font-size: 1.15rem; font-weight: 700; }
.ws-card .desc { font-size: .8rem; color: var(--rc-muted); margin-top: .15rem; }
.ws-card .go { margin-left: auto; color: var(--rc-primary); font-size: 1.2rem; align-self: flex-start; }

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;
  background: radial-gradient(circle at 20% 20%, #e3eefb 0, transparent 45%), radial-gradient(circle at 80% 80%, #dff3f0 0, transparent 40%), var(--rc-bg); }
.login-card { width: 100%; max-width: 980px; display: grid; grid-template-columns: 420px 1fr; background: #fff; border-radius: 1rem; overflow: hidden; border: 1px solid var(--rc-line); box-shadow: 0 20px 50px rgba(16, 24, 40, .08); }
.login-form { padding: 2.5rem; }
.login-side { background: linear-gradient(160deg, #0d47a1, #1565c0 55%, #00897b); color: #fff; padding: 2rem; }
.login-side h2 { font-size: 1.1rem; font-weight: 700; }
.demo-acc { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; border-radius: .5rem; padding: .45rem .7rem; margin-bottom: .4rem; font-size: .82rem; }
.demo-acc:hover { background: rgba(255,255,255,.2); }
.demo-acc .u { font-family: Consolas, monospace; font-weight: 700; min-width: 5.5rem; }
.demo-acc .r { opacity: .85; font-size: .74rem; }
@media (max-width: 860px) { .login-card { grid-template-columns: 1fr; } }

/* ---------- patient banner ---------- */
.pt-banner { display: flex; gap: 1rem; background: #fff; border: 1px solid var(--rc-line); border-radius: .6rem; overflow: hidden; }
.pt-banner .left { background: #e3eefb; padding: 1rem 1.25rem; display: flex; gap: 1rem; align-items: center; min-width: 360px; }
.pt-banner .photo { width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--rc-primary); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.pt-banner .name { font-size: 1.15rem; font-weight: 700; }
.pt-banner .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem 1.5rem; padding: 1rem 1.25rem; flex: 1; font-size: .85rem; }
.pt-banner .grid .k { color: var(--rc-muted); font-size: .75rem; }
.vitals { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; }
.vital { background: #fff; border: 1px solid var(--rc-line); border-radius: .5rem; padding: .45rem .6rem; }
.vital .k { font-size: .7rem; color: var(--rc-muted); font-weight: 600; }
.vital .v { font-size: 1rem; font-weight: 700; }
.vital .u { font-size: .7rem; color: var(--rc-muted); }
.nav-tabs .nav-link { color: var(--rc-ink); }
.nav-tabs .nav-link.active { color: var(--rc-primary); font-weight: 600; }
.soap h3 { font-size: .95rem; font-weight: 700; margin-top: 1rem; color: #0b3d75; }
.soap p { white-space: pre-wrap; }

/* ---------- ward ---------- */
.stat-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 2rem; font-weight: 600; border: 1px solid transparent; text-decoration: none; font-size: .85rem; }
.stat-chip.occ { background: #fff3e0; color: #e65100; } .stat-chip.vac { background: #e8f5e9; color: #2e7d32; }
.stat-chip.blk { background: #e0f2f1; color: #00695c; } .stat-chip.tot { background: #e3f2fd; color: #1565c0; }
.stat-chip.on { border-color: currentColor; box-shadow: 0 0 0 2px rgba(0,0,0,.04); }
.bed-card { background: #fff; border: 1px solid var(--rc-line); border-radius: .6rem; height: 100%; display: flex; flex-direction: column; }
.bed-card .bh { padding: .5rem .85rem; border-bottom: 1px solid var(--rc-line); font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.bed-card .bb { padding: .75rem .85rem; flex: 1; font-size: .85rem; }
.bed-card .bf { padding: .5rem .85rem; border-top: 1px solid var(--rc-line); text-align: right; }
.bed-card.vacant { background: #f6fbf6; border-style: dashed; }
.bed-card.blocked { background: #f1f8f7; border-style: dashed; opacity: .85; }

/* ---------- queue ---------- */
.q-tabs .nav-link { display: flex; align-items: center; gap: .5rem; }
.q-no { font-family: Consolas, monospace; font-weight: 800; font-size: 1.1rem; }
.room-pill { font-size: .75rem; }

/* ---------- display board ---------- */
body.board { background: #eef3f9; }
.board-head { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: #fff; border-bottom: 1px solid var(--rc-line); }
.board-head .unit { font-size: 1.7rem; font-weight: 800; color: #0b2545; }
.board-head .clock { margin-left: auto; text-align: right; }
.board-head .clock .t { font-size: 2.6rem; font-weight: 800; line-height: 1; color: #0b2545; }
.board-grid { display: grid; gap: 1.25rem; padding: 1.25rem 1.5rem; }
.room-card { background: #fff; border-radius: .9rem; overflow: hidden; border: 1px solid #d7e1ee; display: flex; flex-direction: column; min-height: 420px; }
.room-card .rh { padding: .8rem 1.2rem; font-size: 1.5rem; font-weight: 800; color: #0b2545; display: flex; justify-content: space-between; align-items: baseline; }
.room-card .rh .doc { font-size: .95rem; font-weight: 500; color: var(--rc-muted); }
.room-card .now { background: #dbeafe; margin: 0 1rem; border-radius: .7rem; padding: 1rem; text-align: center; }
.room-card .now .lbl { font-weight: 700; color: #1e3a8a; }
.room-card .now .num { font-size: 4.2rem; font-weight: 900; color: #0b2545; font-family: Consolas, monospace; line-height: 1.1; }
.room-card .next { padding: 1rem 1.2rem; flex: 1; }
.room-card .next .lbl { font-weight: 700; color: var(--rc-muted); margin-bottom: .4rem; }
.room-card .next .nums span { display: inline-block; font-family: Consolas, monospace; font-size: 1.5rem; font-weight: 700; background: #f1f5f9; border-radius: .5rem; padding: .2rem .7rem; margin: 0 .4rem .4rem 0; }
.room-card .called { background: #fdecec; color: #b71c1c; padding: .7rem 1.2rem; font-weight: 700; }
.room-card .called span { font-family: Consolas, monospace; margin-right: .6rem; }
.board-foot { text-align: center; color: var(--rc-muted); padding-bottom: 1rem; font-size: 1.05rem; }
.dots span { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; margin: 0 3px; }
.dots span.on { background: var(--rc-primary); }

/* ---------- misc ---------- */
.empty-state { text-align: center; color: var(--rc-muted); padding: 3rem 1rem; }
.empty-state i { font-size: 2.6rem; display: block; margin-bottom: .5rem; color: #b0bec5; }
.form-label { font-weight: 500; font-size: .85rem; margin-bottom: .25rem; }
.req::after { content: " *"; color: var(--rc-danger); }
.section-title { font-size: .95rem; font-weight: 700; color: #0b3d75; border-bottom: 1px solid var(--rc-line); padding-bottom: .4rem; margin: 1.25rem 0 .9rem; }
.matrix th.rot { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: .76rem; padding: .5rem .25rem; vertical-align: bottom; }
.matrix td.c { text-align: center; }
.matrix .client-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; background: #f1f5f9 !important; text-align: center; }
.matrix-wrap { overflow: auto; max-height: calc(100vh - 260px); }
.matrix-wrap thead th { position: sticky; top: 0; z-index: 2; }
.matrix-wrap thead tr:nth-child(2) th { top: 29px; }
.matrix-wrap .sticky-col { position: sticky; left: 0; background: #fff; z-index: 1; }
.toast-container { z-index: 2000; }
pre.code { background: #0f172a; color: #e2e8f0; border-radius: .5rem; padding: 1rem; font-size: .8rem; max-height: 320px; overflow: auto; }
textarea.code { font-family: Consolas, "Cascadia Mono", monospace; font-size: .82rem; }
.perm-code { font-family: Consolas, monospace; font-size: .78rem; }
@media print {
  .rc-header, .rc-sidebar, .no-print { display: none !important; }
  .rc-main { padding: 0; }
  body { background: #fff; }
}