@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');

/* Clinical Intelligence Workspace — canonical UI layer, loaded after Ra-admin. */
:root {
  --ns-ink:#14313f; --ns-muted:#617784; --ns-navy:#0b2734; --ns-navy-2:#123b49;
  --ns-teal:#1aa9a4; --ns-teal-strong:#0c817f; --ns-teal-soft:#e3f6f4; --ns-cyan:#71d8d1;
  --ns-canvas:#f3f7f8; --ns-surface:#fff; --ns-border:#dbe6e9;
  --ns-shadow-sm:0 2px 10px rgba(11,39,52,.055); --ns-shadow-md:0 14px 34px rgba(11,39,52,.09);
  --ns-radius-sm:10px; --ns-radius-md:16px; --ns-radius-lg:22px;
  --ns-sidebar:280px; --ns-header:72px;
  --bs-body-font-family:"Noto Sans Thai","Leelawadee UI","Golos Text",Tahoma,sans-serif;
  --bs-body-color:var(--ns-ink); --bs-body-bg:var(--ns-canvas);
  --bs-primary:var(--ns-teal); --bs-primary-rgb:26,169,164;
}
html{scrollbar-color:#9ab1b9 #e8eff1;scrollbar-width:thin}
*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:#e8eff1}
*::-webkit-scrollbar-thumb{background:#9ab1b9;border:2px solid #e8eff1;border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:#6f8a94}
body{color:var(--ns-ink);background:radial-gradient(circle at 88% 3%,rgba(113,216,209,.13),transparent 28rem),var(--ns-canvas);font-family:var(--bs-body-font-family);font-size:15px;line-height:1.62;letter-spacing:-.008em}

/* Stable dark clinical navigation */
.app-wrapper{min-height:100vh}
.app-wrapper>nav{width:var(--ns-sidebar);border-radius:0;border-right:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 10% 2%,rgba(113,216,209,.18),transparent 15rem),linear-gradient(180deg,var(--ns-navy-2),var(--ns-navy) 44%);box-shadow:12px 0 34px rgba(7,31,43,.14);color:#e8f2f4;overflow:hidden;transition:none!important;animation:none!important;transform:none!important;contain:layout paint}
.app-wrapper>nav .app-logo{height:86px;padding:20px 20px 14px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.09);position:relative}
.app-wrapper>nav .app-logo::after{content:"NURSING MIS";margin-left:11px;color:#fff;font:800 12px/1 "Golos Text",sans-serif;letter-spacing:.14em;white-space:nowrap}
.app-wrapper>nav .app-logo .logo{width:42px;height:42px;flex:0 0 42px;display:grid!important;place-items:center;border-radius:13px;background:#fff;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.16)}
.app-wrapper>nav .app-logo .logo img{width:36px!important;max-height:36px!important;object-fit:contain;float:none}
.app-wrapper>nav .toggle-semi-nav{margin-left:auto;color:#cce7e7;background:rgba(255,255,255,.08)!important}
.app-wrapper>nav .app-nav{height:calc(100vh - 86px);padding:12px 10px 28px;overflow-y:scroll;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-gutter:stable}
.app-wrapper>nav,.app-wrapper>nav *{animation:none!important}
.app-wrapper>nav .app-logo,.app-wrapper>nav .app-nav,.app-wrapper>nav .main-nav,.app-wrapper>nav .main-nav>li,.app-wrapper>nav .main-nav>li>a{transition:none!important;transform:none!important}
nav .app-nav .main-nav{margin:0}nav .app-nav .main-nav>li{padding:0}
nav .app-nav .main-nav .menu-title{margin:18px 10px 7px;padding:0}
nav .app-nav .main-nav .menu-title:first-of-type{margin-top:10px}
nav .app-nav .menu-title span{display:block;padding:0!important;color:#7fd6d1!important;background:transparent!important;font-size:11px;font-weight:750;letter-spacing:.07em;line-height:1.45;text-transform:uppercase}
nav .app-nav .main-nav>li:not(.menu-title){margin:3px 0}
nav .app-nav .main-nav>li:not(.menu-title)>a{min-height:43px;padding:9px 12px;border:1px solid transparent;border-radius:12px;color:#d3e1e5;font-weight:540;line-height:1.35;gap:9px;transition:background-color .14s ease,color .14s ease,border-color .14s ease}
nav .app-nav .main-nav>li:not(.menu-title)>a i{width:22px;margin:0;color:#7ec6c5;font-size:19px;text-align:center}
nav .app-nav .main-nav>li:not(.menu-title)>a:hover,nav .app-nav .main-nav>li:not(.menu-title)>a:focus-visible{color:#fff;background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.08);outline:0}
nav .app-nav .main-nav>li.active>a{color:#082d35;background:linear-gradient(135deg,#80ded7,#4fc3bd);border-color:rgba(255,255,255,.26);box-shadow:0 8px 22px rgba(1,17,23,.25);font-weight:720}
nav .app-nav .main-nav>li.active>a i{color:#0c6566}

/* Header and content frame */
.app-wrapper .app-content{padding:calc(var(--ns-header) + 24px) 0 40px var(--ns-sidebar);min-width:0;overflow:visible;background:transparent;box-shadow:none}
header.header-main{height:var(--ns-header);padding-left:var(--ns-sidebar);background:rgba(255,255,255,.92);border-bottom:1px solid rgba(20,49,63,.09);box-shadow:0 4px 20px rgba(11,39,52,.045);backdrop-filter:blur(14px);transition:none!important}
header.header-main::before{display:none}header.header-main .container-fluid{height:100%;padding:11px 22px;border:0}
header.header-main .container-fluid>.row{height:100%;align-items:center}
header.header-main .header-toggle{width:40px;height:40px;padding:0!important;display:none!important;place-items:center;color:var(--ns-teal-strong);background:var(--ns-teal-soft)!important;border:1px solid #c9eae7}
.topbar-user-cluster{display:flex;align-items:center;gap:10px;margin-right:10px;min-width:0}
.topbar-avatar{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--ns-teal),#237c91);font-weight:800;box-shadow:0 6px 15px rgba(26,169,164,.22)}
.topbar-user-meta{min-width:0;text-align:left;line-height:1.25}.topbar-user-email{display:block;max-width:240px;color:var(--ns-ink);font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-user-role{display:block;color:var(--ns-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-action{min-height:38px;border-radius:11px;font-weight:650;display:inline-flex;align-items:center;justify-content:center}
main.container-fluid{max-width:1720px;padding-inline:clamp(16px,2.2vw,34px)!important}.main-title{margin-bottom:20px!important}
.main-title h4,main>.main-title,main h1{color:var(--ns-ink);font-weight:780;letter-spacing:-.025em}

/* Canonical surfaces */
.card,.chart-card,.glass-card{border:1px solid var(--ns-border)!important;border-radius:var(--ns-radius-md)!important;background:rgba(255,255,255,.97)!important;box-shadow:var(--ns-shadow-sm)!important;overflow:visible}
.card:hover{border-color:#cedcdf}.card-header{min-height:58px;padding:15px 18px!important;display:flex;align-items:center;background:#fbfdfd!important;border-bottom:1px solid var(--ns-border)!important}
.card-header h5,.card-header h6{margin:0;color:var(--ns-ink);font-weight:740}.card-body{padding:clamp(16px,1.7vw,24px)!important}
.kpi-card{border:1px solid var(--ns-border);border-radius:var(--ns-radius-md);background:var(--ns-surface);box-shadow:var(--ns-shadow-sm)}
.kpi-card:hover{transform:none;border-color:#bed7da;box-shadow:var(--ns-shadow-md)}.kpi-value{color:var(--ns-ink);letter-spacing:-.035em}.kpi-icon-circle{border-radius:14px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}

/* Forms and actions */
.form-label{margin-bottom:7px;color:#31505e;font-weight:680!important}
.form-control,.form-select,.input-group-text{min-height:43px;border-color:#cfdbdf;border-radius:var(--ns-radius-sm);color:var(--ns-ink);background-color:#fff;box-shadow:none!important}
.form-control::placeholder{color:#9aabb3}.form-control:hover,.form-select:hover{border-color:#9fc0c5}
.form-control:focus,.form-select:focus,.form-check-input:focus{border-color:var(--ns-teal);box-shadow:0 0 0 3px rgba(26,169,164,.14)!important}
textarea.form-control{resize:none;min-height:96px}.btn{min-height:40px;border-radius:11px;padding:8px 15px;font-weight:680;letter-spacing:-.006em}
.btn-primary{--bs-btn-bg:var(--ns-teal);--bs-btn-border-color:var(--ns-teal);--bs-btn-hover-bg:var(--ns-teal-strong);--bs-btn-hover-border-color:var(--ns-teal-strong);box-shadow:0 6px 14px rgba(26,169,164,.16)}
.btn:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(26,169,164,.34)!important;outline-offset:2px}

/* Tabs */
.pill-tabs,.nav-pills{gap:7px;padding:5px;border:1px solid var(--ns-border);border-radius:14px;background:#eaf1f3;width:fit-content;max-width:100%;overflow-x:auto;scrollbar-width:thin}
.pill-tabs .nav-link,.nav-pills .nav-link{min-height:38px;padding:8px 14px;border:0;border-radius:10px!important;color:#4a6672;font-weight:680;white-space:nowrap}
.pill-tabs .nav-link.active,.nav-pills .nav-link.active{color:#fff!important;background:linear-gradient(135deg,var(--ns-teal),#238c98)!important;box-shadow:0 6px 14px rgba(17,126,130,.22)!important}

/* Data surfaces */
.table-responsive{border-radius:12px;scrollbar-gutter:stable}.table{margin-bottom:0;color:var(--ns-ink);vertical-align:middle}
.table>:not(caption)>*>*{padding:12px 13px;border-bottom-color:#e5edef}.table thead th{color:#355663;background:#edf4f5!important;border-bottom:1px solid #cbdcdf!important;font-size:12px;font-weight:780;letter-spacing:.015em;white-space:nowrap}
.table tbody tr{background:#fff}.table tbody tr:hover>*{background:#f3fbfa!important}
.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select{border:1px solid #cfdbdf;border-radius:9px;padding:6px 9px;background:#fff}
.page-link{color:var(--ns-teal-strong);border-color:#d9e5e7}.active>.page-link,.page-link.active{background:var(--ns-teal);border-color:var(--ns-teal)}
.badge{padding:.45em .7em;border-radius:999px;font-weight:680}.modal-content{border:0;border-radius:20px;box-shadow:0 24px 70px rgba(5,27,37,.24);overflow:hidden}
.modal-header{padding:17px 20px;border-bottom-color:var(--ns-border)}.modal-footer{padding:14px 20px;border-top-color:var(--ns-border);background:#f8fbfb}.alert{border-radius:13px;border-width:1px}
#appFooter{margin:30px clamp(16px,2.2vw,34px) 0!important;padding:20px 12px!important;width:auto!important;color:#78909a!important;border-top:1px solid var(--ns-border);line-height:1.65}

@media(max-width:1199.98px){
  .app-wrapper .app-content{padding-left:0}header.header-main{padding-left:0}header.header-main .header-toggle{display:grid!important}
  .app-wrapper>nav{width:0!important}.app-wrapper>nav.semi-nav,.app-wrapper>nav.semi-nav:hover{width:min(86vw,292px)!important}
  .app-wrapper>nav.semi-nav .app-logo .logo{width:42px;overflow:hidden}.app-wrapper>nav.semi-nav .app-logo .logo img{width:36px!important}
  .app-wrapper>nav.semi-nav .app-nav .main-nav li a{font-size:14px;text-align:left}.app-wrapper>nav.semi-nav .app-nav .menu-title span{display:block;font-size:11px;white-space:nowrap}
}
@media(max-width:767.98px){
  :root{--ns-header:64px}body{font-size:14px}.app-wrapper .app-content{padding-top:calc(var(--ns-header) + 18px)}
  header.header-main .container-fluid{padding:9px 13px}.topbar-user-cluster{display:none}.topbar-action{width:40px;padding:0}.topbar-action .topbar-action-label{display:none}
  main.container-fluid{padding-inline:14px!important}.card-header{padding:13px 15px!important}.card-body{padding:15px!important}
  .pill-tabs,.nav-pills{width:100%;flex-wrap:nowrap}.table>:not(caption)>*>*{padding:10px 11px}#appFooter{margin-inline:14px!important;font-size:11px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
@media(forced-colors:active){*{scrollbar-color:auto}nav .app-nav .main-nav>li.active>a{border:2px solid CanvasText}}