:root{
  --bg:#f4f6fa;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#eef2f7;
  --ink:#142033;
  --ink-2:#34445b;
  --muted:#748197;
  --line:#e3e8f0;
  --line-strong:#d7dee9;
  --nav:#0b1728;
  --nav-2:#0e2137;
  --nav-3:#102942;
  --blue:#3768f5;
  --teal:#0fa8a0;
  --good:#15956c;
  --warn:#c88716;
  --danger:#d85067;
  --shadow-sm:0 1px 2px rgba(14,30,52,.04),0 4px 14px rgba(14,30,52,.035);
  --shadow-md:0 14px 40px rgba(21,35,56,.08),0 2px 8px rgba(21,35,56,.04);
  --shadow-lg:0 28px 80px rgba(11,23,40,.16),0 6px 18px rgba(11,23,40,.08);
  --radius:18px;
  --radius-sm:12px;
  --role:#596df3;
  --role-soft:#eef0ff;
}
*{box-sizing:border-box}
html,body,#root{min-height:100%;margin:0}
html{background:var(--bg);scroll-behavior:smooth}
body{
  color:var(--ink);
  background:
    radial-gradient(circle at 92% 0%,rgba(69,104,245,.055),transparent 27rem),
    var(--bg);
  font-family:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit}
button,a{ -webkit-tap-highlight-color:transparent }
button{color:inherit}
a{color:inherit;text-decoration:none}
svg{display:block;flex:0 0 auto}
::selection{background:color-mix(in srgb,var(--role) 22%,transparent);color:var(--ink)}

/* App frame */
.app-shell{min-height:100vh;display:grid;grid-template-columns:258px minmax(0,1fr)}
.sidebar{
  position:fixed;inset:0 auto 0 0;width:258px;z-index:60;
  display:flex;flex-direction:column;overflow:hidden;
  color:#dce7f5;
  background:
    radial-gradient(circle at 6% 1%,rgba(56,104,245,.18),transparent 17rem),
    linear-gradient(180deg,#0a1728 0%,#0c1c30 50%,#0a1728 100%);
  border-right:1px solid rgba(255,255,255,.045);
  box-shadow:10px 0 40px rgba(4,13,25,.05);
}
.side-brand{height:78px;padding:0 22px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.07)}
.brand-symbol{width:39px;height:39px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(145deg,var(--role),color-mix(in srgb,var(--role) 70%,#03c9b2));box-shadow:0 8px 25px color-mix(in srgb,var(--role) 23%,transparent)}
.side-brand>div{display:flex;flex-direction:column;min-width:0}
.side-brand strong{font-size:17px;line-height:1.15;letter-spacing:-.35px;color:#fff;font-weight:760}
.side-brand small{margin-top:3px;font-size:10px;letter-spacing:1.55px;text-transform:uppercase;color:#8397ae;font-weight:700}
.side-close{display:none;margin-left:auto;border:0;background:transparent;color:#a9b7c8;cursor:pointer}
.role-card{margin:18px 14px 8px;padding:13px 14px;display:flex;gap:11px;align-items:center;background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.07);border-radius:14px}
.role-icon{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;background:color-mix(in srgb,var(--role) 76%,#10213a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.role-card>div{min-width:0;display:grid}
.role-card small{font-size:9.5px;text-transform:uppercase;letter-spacing:1.15px;color:#8498af;font-weight:750}
.role-card strong{margin-top:1px;color:#fff;font-size:13px;font-weight:700}
.role-card span:not(.role-icon){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;color:#8fa1b6}
.side-nav{padding:5px 12px 16px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#30445c transparent}
.nav-group{padding:18px 11px 7px;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:1.55px;color:#607993;font-weight:800}
.nav-item{position:relative;height:44px;padding:0 12px;display:flex;align-items:center;gap:11px;border-radius:11px;color:#aebdd0;transition:background .18s ease,color .18s ease,transform .18s ease}
.nav-item>span{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:#8ba0b8;transition:.18s ease}
.nav-item b{font-size:12.5px;font-weight:620;letter-spacing:-.05px}
.nav-item:hover{background:rgba(255,255,255,.045);color:#f2f6fb;transform:translateX(1px)}
.nav-item.active{color:#fff;background:linear-gradient(90deg,color-mix(in srgb,var(--role) 23%,transparent),rgba(255,255,255,.035));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--role) 24%,transparent)}
.nav-item.active>span{background:var(--role);color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--role) 22%,transparent)}
.nav-item.active>i{position:absolute;right:9px;width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--role) 55%,white)}
.side-bottom{margin-top:auto;padding:13px 14px 18px;border-top:1px solid rgba(255,255,255,.06);background:rgba(4,14,25,.18)}
.user-tile{display:grid;grid-template-columns:36px 1fr 30px;gap:10px;align-items:center;padding:5px}
.user-tile>div{min-width:0;display:grid}
.user-tile strong{font-size:11.5px;color:#f1f5fa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-tile span{font-size:10px;color:#71869e}
.user-tile button{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:#7790aa;display:flex;align-items:center;justify-content:center;cursor:pointer}
.user-tile button:hover{background:rgba(255,255,255,.06);color:#fff}
.avatar{width:36px;height:36px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:var(--role-soft);color:color-mix(in srgb,var(--role) 82%,#23304a);font-weight:780;font-size:11px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--role) 9%,transparent)}
.avatar-sm{width:32px;height:32px;border-radius:10px;font-size:10px}

.main-shell{grid-column:2;min-width:0;min-height:100vh}
.topbar{position:sticky;top:0;z-index:40;height:70px;padding:0 28px;display:flex;align-items:center;gap:20px;background:rgba(250,251,253,.89);backdrop-filter:blur(18px) saturate(145%);border-bottom:1px solid rgba(217,224,234,.82)}
.mobile-menu{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;align-items:center;justify-content:center;cursor:pointer}
.crumb{display:flex;align-items:center;gap:7px;white-space:nowrap;color:#8995a7;font-size:11.5px}
.crumb b{color:#26364c;font-weight:650}
.global-search{margin-left:8px;width:min(380px,33vw);height:39px;padding:0 11px;border:1px solid #dde4ee;background:#fff;border-radius:11px;display:flex;align-items:center;gap:9px;color:#8693a6;cursor:pointer;box-shadow:0 1px 0 rgba(14,29,50,.02);transition:.18s ease}
.global-search:hover{border-color:#cdd7e5;box-shadow:0 5px 18px rgba(21,36,57,.05)}
.global-search span{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
kbd{margin-left:auto;padding:2px 6px;border:1px solid #dce3ed;border-bottom-color:#cbd4e1;border-radius:5px;background:#f8fafc;color:#8895a7;font-size:9px;font-family:inherit}
.topbar-spacer{flex:1}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:9px}
.live-pill{height:29px;padding:0 9px;border:1px solid #dce8e4;border-radius:999px;background:#f7fbfa;display:flex;align-items:center;gap:6px;color:#5a766c;font-size:9.5px;font-weight:750;text-transform:uppercase;letter-spacing:.55px}
.live-pill i{width:6px;height:6px;border-radius:50%;background:#20a679;box-shadow:0 0 0 4px rgba(32,166,121,.09)}
.icon-btn{width:35px;height:35px;border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;color:#637187;cursor:pointer}
.icon-btn:hover{border-color:#cbd4e0;color:var(--ink);box-shadow:var(--shadow-sm)}
.top-user{display:flex;align-items:center;gap:8px;padding-left:4px}
.top-user>div{display:grid;min-width:0}
.top-user strong{font-size:10.8px;line-height:1.25;font-weight:720;color:#26354a;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-user span{font-size:9.5px;color:#8b97a9}
.content{width:min(1480px,100%);margin:0 auto;padding:30px 32px 64px}

/* Login */
.login-screen{min-height:100vh;display:grid;grid-template-columns:minmax(540px,1.18fr) minmax(420px,.82fr);background:#f5f7fb}
.login-art{position:relative;min-height:100vh;padding:44px 7vw 42px;color:#fff;overflow:hidden;background:
  radial-gradient(circle at 18% 12%,rgba(72,105,255,.34),transparent 25rem),
  radial-gradient(circle at 88% 80%,rgba(0,190,172,.18),transparent 24rem),
  linear-gradient(145deg,#09182a 0%,#0b2038 58%,#0a192c 100%)}
.login-art:before,.login-art:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.07);border-radius:50%;pointer-events:none}
.login-art:before{width:520px;height:520px;right:-210px;top:10%;box-shadow:0 0 0 70px rgba(255,255,255,.014),0 0 0 140px rgba(255,255,255,.01)}
.login-art:after{width:260px;height:260px;left:-150px;bottom:10%}
.login-brand{position:relative;z-index:2;display:flex;align-items:center;gap:13px}
.login-brand>div{display:grid}
.login-brand strong{font-size:19px;line-height:1.1;font-weight:760;letter-spacing:-.4px}
.login-brand small{margin-top:3px;color:#8fa6bf;font-size:9.5px;text-transform:uppercase;letter-spacing:1.55px;font-weight:700}
.login-copy{position:relative;z-index:2;margin-top:clamp(100px,16vh,175px);max-width:720px}
.signal{display:inline-flex;align-items:center;gap:8px;font-size:10px;text-transform:uppercase;letter-spacing:1.25px;color:#aebdd0;font-weight:750}
.signal i{width:7px;height:7px;border-radius:50%;background:#3bd1b5;box-shadow:0 0 0 6px rgba(59,209,181,.1)}
.login-copy h1{margin:18px 0 17px;font-size:clamp(46px,4.3vw,68px);line-height:.99;letter-spacing:-3.2px;font-weight:720;max-width:770px}
.login-copy h1 em{font-style:normal;color:#9eb0ff;font-weight:610}
.login-copy>p{max-width:620px;margin:0;color:#9cb0c5;font-size:15px;line-height:1.75}
.login-flow{margin-top:43px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}
.login-flow>div{position:relative;padding:22px 20px 22px 0;display:grid;border-right:1px solid rgba(255,255,255,.09)}
.login-flow>div:not(:first-child){padding-left:20px}
.login-flow>div:last-child{border-right:0}
.login-flow b{font-size:9px;color:#5f7893;letter-spacing:1.2px}
.login-flow span{margin-top:6px;font-size:12.5px;color:#eef4fb;font-weight:680}
.login-flow small{margin-top:3px;font-size:10px;color:#7289a2}
.login-foot{position:absolute;left:7vw;right:7vw;bottom:36px;z-index:2;display:flex;gap:22px;color:#7189a2;font-size:9.5px}
.login-foot span{display:flex;align-items:center;gap:6px}
.login-form-wrap{display:flex;align-items:center;justify-content:center;padding:48px;background:radial-gradient(circle at 90% 10%,rgba(89,109,243,.06),transparent 18rem),#f7f8fb}
.login-card{width:min(420px,100%);padding:37px;background:#fff;border:1px solid #e1e6ee;border-radius:22px;box-shadow:0 30px 75px rgba(24,39,65,.10)}
.login-card-head>span{font-size:9.5px;text-transform:uppercase;letter-spacing:1.35px;color:var(--role);font-weight:800}
.login-card-head h2{margin:7px 0 4px;font-size:31px;line-height:1.1;letter-spacing:-1.15px;font-weight:720;color:#15243a}
.login-card-head p{margin:0 0 27px;color:#8190a4;font-size:12px}
.login-card .field{margin-top:15px}
.login-button{width:100%;height:47px;margin-top:23px;padding:0 16px;border:0;border-radius:12px;background:linear-gradient(135deg,#4b65f0,#334fd9);color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:12px;cursor:pointer;box-shadow:0 13px 28px rgba(68,92,224,.22);transition:.18s ease}
.login-button:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(68,92,224,.28)}
.login-button:disabled{opacity:.55;cursor:wait;transform:none}
.login-demo{margin-top:22px;padding:12px 13px;border:1px solid #e5e9f0;border-radius:11px;background:#f9fafc;display:flex;align-items:center;gap:10px;color:#7b8798}
.login-demo>svg{color:#6c79e8}
.login-demo div{display:grid}
.login-demo strong{font-size:10px;color:#46556a}
.login-demo span{font-size:9.5px;margin-top:1px}

/* Typography and title hierarchy */
.page-title{margin:2px 0 23px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.page-title>div:first-child{max-width:820px}
.page-kicker{display:inline-block;margin-bottom:5px;color:var(--role);font-size:9.5px;line-height:1;text-transform:uppercase;letter-spacing:1.35px;font-weight:800}
.page-title h1{margin:0;color:#142238;font-size:30px;line-height:1.15;letter-spacing:-1.12px;font-weight:730}
.page-title p{margin:7px 0 0;max-width:720px;color:#718096;font-size:12px;line-height:1.65}
.page-actions{display:flex;gap:8px;align-items:center}

/* Premium dashboard */
.hero{position:relative;min-height:260px;margin-bottom:18px;padding:34px 38px;display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:28px;overflow:hidden;border-radius:22px;color:#fff;background:
  radial-gradient(circle at 84% 24%,color-mix(in srgb,var(--role) 42%,transparent),transparent 18rem),
  radial-gradient(circle at 8% 100%,rgba(14,198,178,.09),transparent 24rem),
  linear-gradient(135deg,#0c192b 0%,#10233b 57%,#0d1c30 100%);
box-shadow:0 22px 55px rgba(13,28,48,.12)}
.hero:before{content:"";position:absolute;width:440px;height:440px;border:1px solid rgba(255,255,255,.055);border-radius:50%;right:-155px;top:-190px;box-shadow:0 0 0 60px rgba(255,255,255,.016),0 0 0 120px rgba(255,255,255,.010)}
.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--role) 60%,transparent),transparent)}
.hero-copy{position:relative;z-index:2;max-width:730px}
.hero-date{display:flex;align-items:center;gap:8px;color:#91a6be;font-size:9.5px;text-transform:uppercase;letter-spacing:1.2px;font-weight:700}
.hero-date i{width:6px;height:6px;border-radius:50%;background:#3cd1b4;box-shadow:0 0 0 5px rgba(60,209,180,.1)}
.hero h1{margin:16px 0 9px;font-size:39px;line-height:1.02;letter-spacing:-1.7px;font-weight:700;color:#fff}
.hero h1 em{font-style:normal;color:color-mix(in srgb,var(--role) 58%,#fff)}
.hero p{margin:0;max-width:610px;color:#9fb0c4;font-size:12.5px;line-height:1.7}
.hero-actions{margin-top:25px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero .btn-secondary{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#dce6f2}
.hero .btn-secondary:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.17);color:#fff}
.hero .btn-primary{background:var(--role);border-color:var(--role);box-shadow:0 10px 30px color-mix(in srgb,var(--role) 25%,transparent)}
.hero-orbit{position:relative;z-index:2;width:100%;height:172px;border:1px solid rgba(255,255,255,.09);border-radius:19px;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}
.orbit-ring{width:82px;height:82px;border:1px solid color-mix(in srgb,var(--role) 35%,rgba(255,255,255,.12));border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 16px color-mix(in srgb,var(--role) 6%,transparent),0 0 0 32px rgba(255,255,255,.018)}
.orbit-ring>span{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--role),color-mix(in srgb,var(--role) 68%,#18c9b3));color:#fff;box-shadow:0 12px 28px color-mix(in srgb,var(--role) 24%,transparent)}
.hero-role{position:absolute;left:17px;right:17px;bottom:13px;padding:10px 12px;display:grid;grid-template-columns:1fr auto;align-items:center;border-radius:10px;background:rgba(4,13,24,.28)}
.hero-role small{grid-column:1/3;color:#8297ae;font-size:8.5px;text-transform:uppercase;letter-spacing:1px}
.hero-role strong{margin-top:2px;font-size:11px;color:#fff}
.hero-role span{margin-top:2px;color:#8da1b6;font-size:9.5px;text-align:right}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.metric-card{position:relative;min-height:134px;padding:18px 18px 16px;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.metric-card:hover{transform:translateY(-1px);border-color:#d8dfeb;box-shadow:0 10px 26px rgba(20,35,56,.07)}
.metric-card:after{content:"";position:absolute;right:-24px;bottom:-34px;width:92px;height:92px;border-radius:50%;background:color-mix(in srgb,var(--role) 4%,transparent)}
.metric-featured{background:linear-gradient(145deg,#fff 45%,color-mix(in srgb,var(--role) 5%,#fff));border-color:color-mix(in srgb,var(--role) 17%,var(--line))}
.metric-head{display:flex;justify-content:space-between;align-items:center}
.metric-icon{width:35px;height:35px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--role);background:var(--role-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--role) 7%,transparent)}
.metric-head small{font-size:9px;color:#8c99aa}
.metric-card>strong{display:block;margin-top:15px;font-size:24px;line-height:1;letter-spacing:-.75px;font-weight:740;color:#17263a}
.metric-card>b{display:block;margin-top:7px;color:#4b5a6d;font-size:10px;text-transform:uppercase;letter-spacing:.65px;font-weight:760}
.metric-card>p{margin:4px 0 0;color:#8a96a7;font-size:9.5px}
.workspace-grid,.admin-bento,.report-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(310px,.85fr);gap:14px;margin-top:14px}
.admin-bento{grid-template-columns:minmax(0,1.65fr) minmax(320px,.75fr)}
.one-focus{grid-template-columns:minmax(0,1.6fr) minmax(290px,.68fr)}

/* Panels */
.panel{border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}
.panel-head{min-height:68px;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #edf0f5;background:linear-gradient(180deg,#fff,#fdfefe)}
.panel-heading{display:flex;align-items:center;gap:11px;min-width:0}
.panel-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--role-soft);color:var(--role)}
.panel-heading h2{margin:0;color:#223147;font-size:13px;line-height:1.2;font-weight:720;letter-spacing:-.15px}
.panel-heading p{margin:3px 0 0;color:#8a96a7;font-size:9.5px}
.panel-body{padding:18px}
.panel-body.no-pad{padding:0}
.focus-guide{min-height:310px;padding:28px;border-radius:17px;color:#fff;background:
  radial-gradient(circle at 85% 8%,color-mix(in srgb,var(--role) 45%,transparent),transparent 14rem),
  linear-gradient(150deg,#101e32,#0b192a);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:flex-end}
.focus-guide>span{width:43px;height:43px;margin-bottom:auto;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.09);color:color-mix(in srgb,var(--role) 55%,white)}
.focus-guide>small{color:#8ca0b7;font-size:8.5px;text-transform:uppercase;letter-spacing:1.3px;font-weight:800}
.focus-guide h3{margin:8px 0 9px;font-size:25px;line-height:1.1;letter-spacing:-.8px;font-weight:680}
.focus-guide p{margin:0;color:#8da0b5;font-size:11px;line-height:1.65}
.action-stack{display:grid;gap:12px}
.action-card{min-height:148px;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm)}
.action-card>span{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--role-soft);color:var(--role)}
.action-card small{display:block;margin-top:14px;color:#8d99aa;font-size:8.5px;text-transform:uppercase;letter-spacing:1px}
.action-card h3{margin:3px 0 4px;font-size:16px;letter-spacing:-.35px}
.action-card p{margin:0 0 13px;color:#7d899a;font-size:10.5px}
.action-card.primary{color:#fff;border:0;background:linear-gradient(145deg,#13253d,#0d1c2f)}
.action-card.primary>span{background:var(--role);color:#fff}
.action-card.primary h3{color:#fff}
.action-card.primary p{color:#91a4b9}
.pulse-list{display:grid}
.pulse-list>div{position:relative;display:grid;grid-template-columns:14px 1fr;column-gap:8px;padding:13px 0;border-bottom:1px solid #eef1f5}
.pulse-list>div:last-child{border:0}
.pulse-list b{font-size:11px;color:#344359;font-weight:650}
.pulse-list small{grid-column:2;color:#939eac;font-size:9px;margin-top:1px}
.pulse-dot{width:7px;height:7px;margin-top:5px;border-radius:50%;background:#e0a327;box-shadow:0 0 0 4px rgba(224,163,39,.10)}
.pulse-dot.violet{background:#755de4;box-shadow:0 0 0 4px rgba(117,93,228,.1)}
.pulse-dot.blue{background:#4d79ee;box-shadow:0 0 0 4px rgba(77,121,238,.1)}
.pulse-dot.teal{background:#20a89a;box-shadow:0 0 0 4px rgba(32,168,154,.1)}

/* Buttons */
.btn{height:37px;padding:0 13px;border:1px solid #dce2eb;border-radius:10px;background:#fff;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#415169;font-size:10.5px;font-weight:680;cursor:pointer;white-space:nowrap;transition:.16s ease}
.btn:hover{border-color:#ccd5e1;color:#203148;box-shadow:0 5px 16px rgba(22,37,59,.06);transform:translateY(-1px)}
.btn:disabled{opacity:.48;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary{border-color:var(--role);background:var(--role);color:#fff;box-shadow:0 7px 18px color-mix(in srgb,var(--role) 16%,transparent)}
.btn-primary:hover{border-color:color-mix(in srgb,var(--role) 90%,#000);background:color-mix(in srgb,var(--role) 92%,#000);color:#fff}
.btn-sm{height:31px;padding:0 9px;border-radius:8px;font-size:9.5px}
.text-danger{border:0;background:transparent;color:#ca5365;font-size:9.5px;font-weight:650;cursor:pointer}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span{color:#536176;font-size:9.5px;font-weight:720;letter-spacing:.15px}
.field>span b{margin-left:3px;color:#d8576c}
.field>small{color:#96a1b0;font-size:8.8px;line-height:1.45}
.field-full{grid-column:1/-1}
input,select,textarea{width:100%;border:1px solid #dce3ec;border-radius:10px;background:#fff;color:#24344a;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
input,select{height:39px;padding:0 11px}
textarea{min-height:86px;padding:10px 11px;resize:vertical}
input::placeholder,textarea::placeholder{color:#a7b0bd}
input:focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--role) 60%,#cbd4e1);box-shadow:0 0 0 3px color-mix(in srgb,var(--role) 9%,transparent)}
input:disabled,select:disabled,textarea:disabled{background:#f4f6f8;color:#8a95a4;cursor:not-allowed}
.form-grid{display:grid;gap:14px}
.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.check-row{display:flex;gap:10px;margin-top:14px}
.check-row label{padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fafbfd;display:flex;align-items:center;gap:7px;font-size:10px;color:#556478}
.check-row input{width:14px;height:14px;margin:0;accent-color:var(--role)}
.inline-select{height:31px;padding:0 8px;border-radius:8px;font-size:9.5px}

/* Status */
.status{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:4px 8px;border-radius:999px;font-size:8.5px;line-height:1.2;font-weight:760;text-transform:uppercase;letter-spacing:.45px;background:#edf4ff;color:#5076a5}
.status i{width:5px;height:5px;border-radius:50%;background:currentColor}
.status-good{background:#eaf8f3;color:#1d8a6b}
.status-warn{background:#fff6e6;color:#ad7214}
.status-danger{background:#fff0f2;color:#bd4d61}
.status-info{background:#eef3fb;color:#597493}
.role-chip,.mono-chip,.muted-pill{display:inline-flex;align-items:center;width:max-content;border-radius:7px;font-size:9px;font-weight:650}
.role-chip{padding:5px 8px;background:var(--role-soft);color:var(--role)}
.mono-chip{padding:4px 7px;background:#f1f4f8;color:#536174;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.muted-pill{padding:5px 8px;background:#f0f3f7;color:#7e8999}

/* Tables */
.data-table-wrap{width:100%;overflow:auto}
.data-table{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}
.data-table th{height:39px;padding:0 15px;text-align:left;border-bottom:1px solid #e7ebf1;background:#fafbfd;color:#8995a5;font-size:8.5px;text-transform:uppercase;letter-spacing:.78px;font-weight:800;white-space:nowrap}
.data-table td{padding:12px 15px;border-bottom:1px solid #edf0f4;color:#516075;font-size:10.5px;vertical-align:middle}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr{transition:background .14s ease}
.data-table tbody tr:hover{background:#fbfcfe}
.data-table td>b,.subtle-strong{color:#344258;font-size:10.5px;font-weight:680}
.cell-note{display:block;margin-top:2px;color:#929dad;font-size:9px}
.person-cell{display:flex;align-items:center;gap:9px;min-width:155px}
.person-cell .avatar{width:31px;height:31px;border-radius:9px;font-size:9px}
.person-cell>div{display:grid}
.person-cell b{color:#344258;font-size:10.5px}
.person-cell small{color:#919baa;font-size:8.8px}
.flag-row{display:flex;gap:4px;flex-wrap:wrap}
.flag-row span{padding:3px 6px;border-radius:6px;background:#fff2f2;color:#b15a66;font-size:8px;font-weight:650}
.flag-row small{color:#97a2b0}
.table-search{height:33px;min-width:260px;padding:0 5px 0 9px;border:1px solid var(--line);border-radius:9px;background:#fafbfd;display:flex;align-items:center;gap:7px;color:#8794a5}
.table-search input{height:28px;padding:0;border:0;background:transparent;box-shadow:none!important;font-size:9.5px}
.table-search button{border:0;background:transparent;color:var(--role);font-size:9px;font-weight:700;cursor:pointer}

/* Schedule and queue */
.date-toolbar{margin-bottom:12px;padding:9px;border:1px solid var(--line);border-radius:13px;background:#fff;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-sm)}
.date-toolbar>button{width:31px;height:31px;border:1px solid var(--line);border-radius:8px;background:#fafbfd;display:flex;align-items:center;justify-content:center;cursor:pointer}
.date-toolbar>button:first-child svg{transform:rotate(180deg)}
.date-toolbar label{height:31px;padding:0 9px;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;color:#728096}
.date-toolbar input{height:28px;border:0;padding:0;box-shadow:none;font-size:9.5px;background:transparent}
.date-toolbar>span{margin-left:auto;padding-right:7px;color:#8995a4;font-size:9.5px}
.schedule-board{display:grid}
.appointment-row{min-height:65px;padding:10px 16px;display:grid;grid-template-columns:72px 34px minmax(150px,1fr) minmax(120px,.7fr) auto auto;align-items:center;gap:10px;border-bottom:1px solid #edf0f4}
.appointment-row:last-child{border:0}
.appt-time{display:grid}
.appt-time b{font-size:11px;color:#28384f}
.appt-time small{font-size:8.5px;color:#929dad}
.appt-person,.appt-doctor{display:grid}
.appt-person strong{font-size:10.5px;color:#344258}
.appt-person span,.appt-doctor small{font-size:8.8px;color:#919baa}
.appt-doctor b{font-size:9.8px;color:#566579}
.row-actions{display:flex;align-items:center;gap:7px}
.queue-list{display:grid}
.queue-item{min-height:57px;padding:9px 2px;display:grid;grid-template-columns:42px 32px minmax(0,1fr) auto 26px;align-items:center;gap:9px;border-bottom:1px solid #edf0f4}
.queue-item:last-child{border:0}
.queue-item .avatar{width:31px;height:31px;border-radius:9px;font-size:9px}
.token,.visit-token{min-width:36px;padding:4px 6px;border-radius:7px;background:#eff2f7;color:#5b697b;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px;font-weight:700;text-align:center}
.queue-main{display:grid;min-width:0}
.queue-main strong{font-size:10.5px;color:#35445a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue-main small{font-size:8.8px;color:#919caa}
.row-open{width:27px;height:27px;border:1px solid var(--line);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;color:#7c899a;cursor:pointer}
.row-open:hover{border-color:color-mix(in srgb,var(--role) 30%,var(--line));color:var(--role)}
.queue-worklist{display:grid;gap:8px}
.worklist-row{min-height:66px;padding:10px 13px;border:1px solid var(--line);border-radius:13px;background:#fff;display:grid;grid-template-columns:44px 36px minmax(160px,1fr) minmax(150px,.7fr) auto auto;align-items:center;gap:10px;box-shadow:var(--shadow-sm)}
.worklist-row>.avatar{width:34px;height:34px}
.worklist-row>div:nth-of-type(1){display:grid}
.worklist-row strong{font-size:10.8px;color:#334258}
.worklist-row small{font-size:8.9px;color:#919cab}
.worklist-checks{display:flex;gap:6px;flex-wrap:wrap}
.worklist-checks span{padding:4px 7px;border-radius:7px;background:#f2f4f7;color:#8c97a6;display:flex;align-items:center;gap:4px;font-size:8.5px}
.worklist-checks span.done{background:#eaf8f3;color:#268267}
.kanban-queue,.surgery-board{display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));gap:11px;overflow:auto;padding-bottom:3px}
.queue-column,.surgery-col{min-width:185px;padding:10px;border:1px solid var(--line);border-radius:13px;background:#f8fafc}
.queue-col-head,.surgery-col-head{height:32px;padding:0 4px 7px;display:flex;align-items:center;justify-content:space-between;color:#657389;font-size:9px;text-transform:uppercase;letter-spacing:.55px;font-weight:750}
.queue-col-head b,.surgery-col-head b{width:23px;height:23px;border-radius:7px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#607087;font-size:8.5px}
.token-card,.surgery-card{position:relative;margin-top:7px;padding:12px;border:1px solid #e3e8ef;border-radius:11px;background:#fff;box-shadow:0 2px 7px rgba(20,35,55,.03)}
.token-card-top{display:flex;align-items:center;justify-content:space-between}
.token-card-top>span{font:700 9px ui-monospace,SFMono-Regular,Consolas,monospace;color:#56667b}
.token-card>strong{display:block;margin-top:9px;font-size:10.5px;color:#344258}
.token-card>small{display:block;margin:2px 0 10px;font-size:8.5px;color:#919baa}
.waiting-note{font-size:8.5px;color:#8b97a7}
.flow-bar{display:flex;align-items:center;gap:0;margin:0 0 14px;padding:11px 13px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:var(--shadow-sm);overflow:auto}
.flow-step{min-width:145px;display:grid;grid-template-columns:27px 1fr auto;align-items:center;gap:8px}
.flow-step>span{width:27px;height:27px;border-radius:8px;background:#f0f3f7;color:#8490a0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:750}
.flow-step>div{display:grid}
.flow-step b{font-size:9.5px;color:#657388}
.flow-step small{font-size:8px;color:#9ca5b1}
.flow-step>i{width:42px;height:1px;margin:0 11px;background:#e2e7ed}
.flow-step.done>span{background:#e9f7f1;color:#258269}
.flow-step.active>span{background:var(--role);color:#fff;box-shadow:0 5px 13px color-mix(in srgb,var(--role) 18%,transparent)}
.flow-step.active b{color:var(--role)}

/* Clinical encounter */
.patient-context,.encounter-head{margin-bottom:13px;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:var(--shadow-sm)}
.patient-context-main,.encounter-person{display:flex;align-items:center;gap:10px}
.patient-context-main>div,.encounter-person>div{display:grid}
.patient-context strong,.encounter-person strong{font-size:11px;color:#344258}
.patient-context span,.encounter-person span{font-size:9px;color:#8e99a9}
.risk-pills,.encounter-risks{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.risk-pills>span,.encounter-risks>span{padding:5px 8px;border-radius:7px;background:#fff0f2;color:#bd5264;font-size:8.5px;font-weight:650}
.eye-matrix,.rx-grid{overflow:auto;border:1px solid var(--line);border-radius:12px}
.eye-matrix>div,.rx-grid>div{min-width:520px;display:grid;grid-template-columns:140px repeat(2,minmax(150px,1fr));align-items:center;border-bottom:1px solid #edf0f4}
.eye-matrix>div:last-child,.rx-grid>div:last-child{border:0}
.eye-matrix>div>*,.rx-grid>div>*{margin:7px 9px}
.eye-matrix>div>span,.rx-grid>div>span,.rx-grid>div>b{font-size:9px;color:#718095}
.eye-label,.rx-grid>div:first-child{background:#f8fafc}
.eye-label b,.rx-grid>div:first-child span{font-size:8.5px;text-transform:uppercase;letter-spacing:.6px;color:#657388}
.rx-grid>div{grid-template-columns:80px repeat(3,minmax(110px,1fr))}
.rx-grid.big>div{grid-template-columns:70px repeat(4,minmax(90px,1fr))}
.eye-matrix input,.rx-grid input{height:34px}
.encounter-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:13px;align-items:start}
.encounter-nav{position:sticky;top:86px;padding:9px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
.encounter-nav>span{display:block;padding:7px 9px 8px;color:#9aa4b1;font-size:8px;text-transform:uppercase;letter-spacing:1px;font-weight:800}
.encounter-nav button{width:100%;height:38px;padding:0 9px;border:0;border-radius:9px;background:transparent;display:flex;align-items:center;justify-content:space-between;color:#667489;font-size:9.5px;font-weight:620;cursor:pointer}
.encounter-nav button:hover{background:#f6f8fb;color:#39495f}
.encounter-nav button.active{background:var(--role-soft);color:var(--role);font-weight:720}
.encounter-body{display:grid;gap:13px;min-width:0}
.eye-exam-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:13px}
.eye-exam{padding:13px;border:1px solid var(--line);border-radius:12px;background:#fafbfd}
.eye-exam>span{display:block;margin-bottom:10px;color:var(--role);font-size:9px;text-transform:uppercase;letter-spacing:.7px;font-weight:800}
.eye-exam .field{margin-top:9px}
.clinical-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:13px}
.clinical-summary>div{padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;display:grid}
.clinical-summary span{font-size:8px;color:#929dab;text-transform:uppercase;letter-spacing:.5px}
.clinical-summary b{margin-top:3px;color:#334258;font-size:11px}
.clinical-summary small{font-size:8px;color:#9aa3b0}
.summary-wide{grid-column:span 2}
.repeat-grid{display:grid;gap:10px}
.repeat-grid.two-col{grid-template-columns:1fr 1fr}
.repeat-card{position:relative;padding:13px;border:1px solid var(--line);border-radius:12px;background:#fafbfd}
.repeat-index{position:absolute;right:10px;top:9px;width:22px;height:22px;border-radius:7px;background:#eef2f7;color:#8490a0;display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:750}
.dual-section{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.dual-section h3{margin:0 0 8px;font-size:11px;color:#344258}
.mini-form{margin-bottom:8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fafbfd;display:grid;grid-template-columns:1.2fr .5fr .7fr;gap:7px}
.mini-form textarea{grid-column:1/-1;min-height:58px}
.sticky-save{position:sticky;bottom:12px;z-index:25;margin-top:14px;padding:11px 13px;border:1px solid rgba(207,216,228,.9);border-radius:13px;background:rgba(255,255,255,.93);backdrop-filter:blur(15px);box-shadow:0 15px 45px rgba(18,33,54,.13);display:flex;align-items:center;justify-content:space-between;gap:12px}
.sticky-save>div{display:flex;align-items:center;gap:7px;color:#778497;font-size:9.5px}
.doctor-save>div:first-child{min-width:240px}
.doctor-save>div:last-child{margin-left:auto}

/* Invoice */
.invoice-layout{display:grid;grid-template-columns:minmax(0,1.5fr) 330px;gap:13px;align-items:start}
.patient-picker,.invoice-lines,.invoice-summary{border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow-sm)}
.patient-picker,.invoice-lines{padding:16px}
.search-large{position:relative}
.search-large>svg{position:absolute;left:12px;top:12px;color:#8c98a8}
.search-large input{padding-left:38px}
.picker-results{margin-top:6px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.picker-results button{width:100%;padding:9px 11px;border:0;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer}
.picker-results button:last-child{border:0}
.picker-results button:hover{background:#f8fafc}
.picker-results button>div{display:grid}
.picker-results strong{font-size:10px;color:#344258}
.picker-results small{font-size:8.5px;color:#919baa}
.selected-patient{padding:12px;border-radius:11px;background:var(--role-soft);display:flex;align-items:center;gap:9px}
.selected-patient>div{display:grid}
.selected-patient b{font-size:10.5px;color:#35445a}
.selected-patient span{font-size:8.5px;color:#738198}
.invoice-lines{margin-top:12px}
.invoice-line-head,.invoice-line{display:grid;grid-template-columns:130px minmax(160px,1fr) 70px 100px 34px;gap:7px;align-items:center}
.invoice-line-head{padding:0 2px 6px;color:#929dab;font-size:8px;text-transform:uppercase;letter-spacing:.5px}
.invoice-line{padding:7px 0;border-top:1px solid #eef1f4}
.invoice-line>button{width:30px;height:30px;border:0;border-radius:8px;background:#fff0f2;color:#bd5365;display:flex;align-items:center;justify-content:center;cursor:pointer}
.invoice-summary{position:sticky;top:84px;padding:18px}
.invoice-summary h3{margin:0 0 14px;font-size:13px;color:#2f4057}
.invoice-summary>div:not(.field){padding:8px 0;display:flex;justify-content:space-between;border-bottom:1px solid #eef1f4;color:#778395;font-size:9.5px}
.invoice-summary>div strong{color:#344258;font-size:10.5px}
.invoice-summary .balance{margin-bottom:12px;padding:11px 0;border-bottom:0;font-size:11px;color:#4f5f73}
.invoice-summary .balance strong{font-size:18px;color:var(--role)}
.invoice-summary .field{margin-top:11px}
.invoice-detail-grid{display:grid;grid-template-columns:minmax(0,1.4fr) 330px;gap:13px;align-items:start}
.payment-row{padding:10px 13px;display:grid;grid-template-columns:1fr auto auto;gap:12px;border-bottom:1px solid #eef1f4}
.payment-row:last-child{border:0}
.payment-row>div{display:grid}
.payment-row b{font-size:10px;color:#35445a}
.payment-row small{font-size:8.5px;color:#909baa}
.payment-row strong{font-size:11px;color:#2a856c}

/* Optical, surgery, pharmacy */
.compact-table,.stock-list,.alert-grid,.audit-list{display:grid}
.compact-table>div,.stock-list>div,.alert-grid>div{min-height:54px;padding:8px 1px;display:grid;align-items:center;gap:9px;border-bottom:1px solid #eef1f4}
.compact-table>div{grid-template-columns:minmax(0,1fr) auto auto}
.stock-list>div,.alert-grid>div{grid-template-columns:34px minmax(0,1fr) auto}
.compact-table>div:last-child,.stock-list>div:last-child,.alert-grid>div:last-child{border:0}
.compact-table>div>div,.stock-list>div>div,.alert-grid>div>div{display:grid}
.compact-table b,.stock-list b,.alert-grid b{font-size:10px;color:#35445a}
.compact-table small,.stock-list small,.alert-grid small{font-size:8.5px;color:#929dab}
.compact-table>div>span{font-size:9px;color:#738096}
.compact-table>div>strong,.stock-list>div>strong,.alert-grid>div>strong{font-size:10px;color:#45556a}
.stock-icon,.alert-icon{width:31px;height:31px;border-radius:9px;background:var(--role-soft);color:var(--role);display:flex;align-items:center;justify-content:center}
.alert-icon.danger{background:#fff0f2;color:#c35265}
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.case-card{padding:12px;border:1px solid var(--line);border-radius:11px;background:#fafbfd;display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:start}
.case-card>span:first-child,.surgery-eye{width:36px;height:36px;border-radius:10px;background:var(--role-soft);color:var(--role);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800}
.case-card small{color:#929dab;font-size:8px}
.case-card h3{margin:2px 0 1px;font-size:10.5px;color:#35445a}
.case-card p{margin:0;color:#7f8c9d;font-size:8.8px}
.surgery-board{grid-template-columns:repeat(4,minmax(205px,1fr))}
.surgery-card{padding:12px}
.surgery-card .surgery-eye{position:absolute;right:10px;top:10px;width:30px;height:30px}
.surgery-card>small{font-size:8px;color:#929dab}
.surgery-card h3{margin:7px 36px 3px 0;font-size:11px;color:#344258}
.surgery-card p{margin:0;font-size:9.5px;color:#59687d;font-weight:650}
.surgery-card>span{display:block;margin:2px 0 10px;font-size:8.5px;color:#949ead}
.surgery-card select{height:31px;margin-bottom:7px;font-size:8.5px}

/* Reports */
.report-filter{margin-bottom:13px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:#fff;display:flex;align-items:flex-end;gap:10px;box-shadow:var(--shadow-sm)}
.report-filter .field{width:170px}
.report-metrics{margin-top:0}
.chart-wrap{min-height:245px;display:flex;flex-direction:column;justify-content:flex-end}
.chart-wrap svg{width:100%;height:215px;overflow:visible}
.chart-labels{display:flex;justify-content:space-between;color:#97a2b0;font-size:8px;padding:2px 24px 0}
.rank-list{display:grid}
.rank-list>div{min-height:45px;display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:8px;border-bottom:1px solid #eef1f4}
.rank-list>div:last-child{border:0}
.rank-list span{width:23px;height:23px;border-radius:7px;background:#f1f4f8;display:flex;align-items:center;justify-content:center;color:#8490a0;font-size:8px;font-weight:750}
.rank-list b{font-size:9.8px;color:#46556a}
.rank-list strong{font-size:9px;color:var(--role)}

/* Branches / audit */
.branch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.branch-card{position:relative;min-height:180px;padding:18px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow-sm)}
.branch-card>span:first-child{width:35px;height:35px;border-radius:10px;background:var(--role-soft);color:var(--role);display:flex;align-items:center;justify-content:center}
.branch-card>.status{position:absolute;right:14px;top:14px}
.branch-card h3{margin:17px 0 3px;font-size:13px;color:#344258}
.branch-card p{margin:0;min-height:32px;color:#8b96a6;font-size:9.5px}
.branch-card>div{margin-top:17px;padding-top:12px;border-top:1px solid #eef1f4;display:grid;grid-template-columns:auto 1fr auto 1fr;gap:4px 6px;align-items:end}
.branch-card>div b{font-size:14px;color:#344258}
.branch-card>div small{font-size:8px;color:#99a3b0}
.audit-list>div{min-height:64px;padding:10px 15px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;border-bottom:1px solid #eef1f4}
.audit-list>div:last-child{border:0}
.audit-dot{width:31px;height:31px;border-radius:9px;background:#f1f4f8;color:#788698;display:flex;align-items:center;justify-content:center}
.audit-list>div>div{display:grid}
.audit-list b{font-size:10px;color:#35445a}
.audit-list p{margin:1px 0;color:#788597;font-size:9px}
.audit-list small{font-size:8px;color:#9aa4b1}

/* Search overlay */
.search-layer,.modal-layer{position:fixed;inset:0;z-index:120;background:rgba(7,17,30,.48);backdrop-filter:blur(7px);display:flex;align-items:flex-start;justify-content:center;padding:9vh 20px 30px;animation:fadeIn .15s ease}
.search-panel{width:min(650px,100%);max-height:78vh;border:1px solid rgba(255,255,255,.30);border-radius:17px;background:#fff;box-shadow:var(--shadow-lg);overflow:hidden}
.search-input{height:58px;padding:0 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.search-input input{height:45px;border:0;padding:0;box-shadow:none!important;font-size:12px}
.search-input button{width:32px;height:32px;border:0;border-radius:9px;background:#f2f4f8;color:#748195;display:flex;align-items:center;justify-content:center;cursor:pointer}
.search-content{max-height:calc(78vh - 58px);overflow:auto;padding:10px}
.search-group>span{display:block;padding:8px 9px 6px;color:#929dac;font-size:8px;text-transform:uppercase;letter-spacing:1px;font-weight:800}
.search-group>button{width:100%;min-height:52px;padding:7px 9px;border:0;border-radius:10px;background:#fff;display:grid;grid-template-columns:34px 1fr 20px;gap:9px;align-items:center;text-align:left;cursor:pointer}
.search-group>button:hover{background:#f7f9fc}
.search-group>button>div{display:grid}
.search-group strong{font-size:10px;color:#344258}
.search-group small{font-size:8.5px;color:#919baa}
.search-group>button>svg{color:#8e99a7}
.result-icon{width:31px;height:31px;border-radius:9px;background:#f1f4f8;color:#77869a;display:flex;align-items:center;justify-content:center}

/* Modal */
.modal-layer{align-items:center;padding:25px}
.modal{width:min(520px,100%);max-height:88vh;border-radius:18px;background:#fff;box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;animation:modalIn .18s ease}
.modal-wide{width:min(760px,100%)}
.modal-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.modal-head>div{display:grid}
.modal-head span{font-size:8.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--role);font-weight:800}
.modal-head h2{margin:4px 0 0;font-size:18px;letter-spacing:-.5px;color:#24344a}
.modal-head button{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:#fafbfd;color:#748195;display:flex;align-items:center;justify-content:center;cursor:pointer}
.modal-body{padding:19px 20px;overflow:auto}
.modal-foot{padding:12px 20px;border-top:1px solid var(--line);background:#fafbfd}
.modal-foot>div{display:flex;justify-content:flex-end;gap:7px}

/* Empty/loading/error */
.empty-state{min-height:175px;padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#8b96a5}
.empty-visual{width:42px;height:42px;margin-bottom:10px;border-radius:12px;background:#f0f3f7;color:#7d8b9e;display:flex;align-items:center;justify-content:center}
.empty-state strong{color:#506075;font-size:10.5px}
.empty-state p{max-width:360px;margin:4px 0 0;font-size:9.5px;line-height:1.55}
.spinner-wrap{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#8b97a7;font-size:9.5px}
.spinner{width:24px;height:24px;border:2px solid #dfe5ed;border-top-color:var(--role);border-radius:50%;animation:spin .75s linear infinite}
.boot{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f5f7fa;gap:13px;color:#8793a4;font-size:10px}
.boot .brand-symbol{margin-bottom:3px}
.error-box{margin:0 0 12px;padding:10px 12px;border:1px solid #f2ccd3;border-radius:10px;background:#fff5f6;color:#a94d5c;display:flex;align-items:center;gap:8px;font-size:9.5px}
.muted-text{color:#8d99a8}
.danger-text{color:#c44e62!important}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}

/* Print */
@media print{
  .sidebar,.topbar,.page-actions,.btn,.report-filter{display:none!important}
  .app-shell{display:block}.main-shell{display:block}.content{padding:0;max-width:none}.panel,.metric-card{box-shadow:none;break-inside:avoid}.report-grid{grid-template-columns:1fr 1fr}
}

/* Responsive */
@media(max-width:1180px){
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{grid-template-columns:minmax(0,1fr) 250px}
  .workspace-grid,.admin-bento,.report-grid{grid-template-columns:1fr}
  .one-focus{grid-template-columns:1fr}
  .focus-guide{min-height:245px}
  .case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .branch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .global-search{width:300px}
}
@media(max-width:920px){
  .app-shell{display:block}
  .sidebar{transform:translateX(-102%);transition:transform .23s ease;box-shadow:30px 0 60px rgba(7,17,29,.22)}
  .sidebar-open{transform:translateX(0)}
  .side-close,.mobile-menu{display:flex}
  .main-shell{grid-column:auto}
  .content{padding:24px 20px 50px}
  .topbar{padding:0 20px;gap:10px}
  .crumb{display:none}
  .global-search{margin-left:0;flex:1;width:auto}
  .top-user>div,.live-pill{display:none}
  .login-screen{grid-template-columns:1fr}
  .login-art{display:none}
  .login-form-wrap{min-height:100vh;padding:28px}
  .encounter-layout{grid-template-columns:1fr}
  .encounter-nav{position:static;display:flex;overflow:auto;gap:4px}
  .encounter-nav>span{display:none}
  .encounter-nav button{width:auto;flex:0 0 auto;gap:8px}
  .invoice-layout,.invoice-detail-grid{grid-template-columns:1fr}
  .invoice-summary{position:static}
}
@media(max-width:700px){
  .topbar{height:62px;padding:0 13px}
  .global-search span{display:none}.global-search{max-width:46px;justify-content:center}.global-search kbd{display:none}
  .icon-btn{display:none}
  .content{padding:18px 13px 42px}
  .page-title{align-items:flex-start;flex-direction:column;margin-bottom:17px}
  .page-title h1{font-size:25px}
  .page-actions{width:100%;overflow:auto}
  .hero{min-height:auto;padding:25px;grid-template-columns:1fr}
  .hero h1{font-size:31px}
  .hero-orbit{display:none}
  .metric-grid{grid-template-columns:1fr 1fr;gap:9px}
  .metric-card{min-height:124px;padding:15px}
  .metric-card>strong{font-size:21px}
  .form-grid.two,.form-grid.three,.repeat-grid.two-col,.eye-exam-grid,.dual-section{grid-template-columns:1fr}
  .field-full{grid-column:auto}
  .clinical-summary{grid-template-columns:1fr 1fr}.summary-wide{grid-column:auto}
  .branch-grid,.case-grid{grid-template-columns:1fr}
  .appointment-row{grid-template-columns:64px 30px minmax(130px,1fr) auto}.appt-doctor{display:none}.appointment-row>.status{display:none}
  .worklist-row{grid-template-columns:40px 32px 1fr auto}.worklist-checks,.worklist-row>.status{display:none}
  .invoice-line-head{display:none}.invoice-line{grid-template-columns:1fr 1fr}.invoice-line>*:nth-child(2){grid-column:1/-1}.invoice-line>button{justify-self:end}
  .report-filter{align-items:stretch;flex-direction:column}.report-filter .field{width:100%}
  .doctor-save{align-items:stretch;flex-direction:column}.doctor-save>div:first-child{min-width:0;width:100%}.doctor-save>div:last-child{margin-left:0;justify-content:space-between}
  .sticky-save{bottom:8px}
  .login-card{padding:28px 22px}
}
@media(max-width:430px){
  .metric-grid{grid-template-columns:1fr}
  .metric-card{min-height:110px}
  .top-actions{gap:4px}.top-user .avatar{display:none}
  .modal-layer{padding:10px}.modal{max-height:94vh}
}
.notice-box{margin:0 0 12px;padding:10px 12px;border:1px solid #cfe8df;border-radius:10px;background:#f0faf6;color:#257a62;display:flex;align-items:center;gap:8px;font-size:9.5px}
.schedule-list{display:grid}
.schedule-list>div{min-height:56px;padding:8px 1px;display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:10px;border-bottom:1px solid #eef1f4}
.schedule-list>div:last-child{border-bottom:0}
.schedule-list>div>span:first-child{color:#4d5c70;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums}
.schedule-list>div>div{display:grid;min-width:0}
.schedule-list>div>div b{color:#35445a;font-size:10.5px;font-weight:680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.schedule-list>div>div small{margin-top:2px;color:#929dab;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ======================================================================
   V9 PREMIUM CLINIC UI — unified sky / ink / teal design system
   ====================================================================== */
:root{
  --sky:#32A9FF;
  --sky-strong:#128DE4;
  --sky-soft:#EAF7FF;
  --ink:#08131F;
  --ink-2:#1E3145;
  --teal:#18C7B5;
  --teal-soft:#E9FBF8;
  --bg:#F3F8FC;
  --surface:#FFFFFF;
  --surface-2:#F8FBFD;
  --surface-3:#EEF6FA;
  --muted:#6C7F91;
  --line:#DCE8EF;
  --line-strong:#CADBE5;
  --nav:#071522;
  --nav-2:#0A1E2E;
  --role:var(--sky);
  --role-soft:var(--sky-soft);
  --shadow-sm:0 4px 18px rgba(8,37,58,.045);
  --shadow-md:0 14px 40px rgba(8,37,58,.075);
  --shadow-lg:0 30px 80px rgba(4,22,35,.16);
  --radius:20px;
  --radius-sm:13px;
}
html{background:var(--bg)}
body{
  color:var(--ink);
  background:
    radial-gradient(circle at 88% -5%,rgba(50,169,255,.10),transparent 30rem),
    linear-gradient(180deg,#F8FBFD 0,#F3F8FC 30%,#F3F8FC 100%);
  font-family:Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:14px;
  letter-spacing:-.005em;
}
::selection{background:rgba(50,169,255,.22);color:var(--ink)}

/* Frame */
.app-shell{grid-template-columns:270px minmax(0,1fr)}
.sidebar{
  width:270px;
  background:
    radial-gradient(circle at 25% -10%,rgba(50,169,255,.24),transparent 18rem),
    radial-gradient(circle at 90% 82%,rgba(24,199,181,.10),transparent 18rem),
    linear-gradient(180deg,#071522 0%,#091C2A 55%,#071522 100%);
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:18px 0 50px rgba(6,25,40,.06)
}
.side-brand{height:84px;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.065)}
.brand-symbol{width:43px;height:43px;border-radius:14px;background:linear-gradient(145deg,var(--sky),var(--teal));box-shadow:0 11px 30px rgba(50,169,255,.20)}
.brand-logo{background:#fff;padding:4px;overflow:hidden}
.brand-logo img{width:100%;height:100%;object-fit:contain;border-radius:9px}
.side-brand strong{font-size:16px;letter-spacing:-.45px;font-weight:760}
.side-brand small{font-size:8.8px;letter-spacing:1.25px;color:#7892A8}
.role-card{margin:16px 13px 7px;padding:13px 13px;background:linear-gradient(145deg,rgba(50,169,255,.10),rgba(255,255,255,.025));border-color:rgba(109,194,255,.10)}
.role-icon{background:linear-gradient(145deg,rgba(50,169,255,.26),rgba(24,199,181,.17));color:#8BD2FF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.role-card small{color:#68849A}.role-card span:not(.role-icon){color:#849AAF}
.side-nav{padding:4px 11px 18px}
.nav-group{padding:17px 12px 7px;color:#54728A;font-size:8.3px;letter-spacing:1.45px}
.nav-item{height:45px;padding:0 11px;border-radius:12px;color:#AABACA}
.nav-item>span{width:29px;height:29px;border-radius:9px;color:#7895AA}
.nav-item b{font-size:12px;font-weight:640}
.nav-item:hover{background:rgba(255,255,255,.045);transform:none}
.nav-item.active{background:linear-gradient(90deg,rgba(50,169,255,.19),rgba(24,199,181,.06));box-shadow:inset 0 0 0 1px rgba(90,192,255,.16);color:#fff}
.nav-item.active>span{background:linear-gradient(145deg,var(--sky),#2099EB);box-shadow:0 8px 20px rgba(50,169,255,.22)}
.nav-item.active>i{background:var(--teal);box-shadow:0 0 0 4px rgba(24,199,181,.10)}
.side-bottom{padding:13px 13px 16px;background:rgba(2,13,22,.22)}
.user-tile{padding:7px 6px}

.main-shell{grid-column:2}
.topbar{height:72px;padding:0 30px;background:rgba(250,253,255,.90);border-color:rgba(208,224,233,.82);box-shadow:0 1px 0 rgba(8,35,53,.015)}
.crumb{font-size:11px;color:#7C8E9F}.crumb b{color:#1D3143;font-weight:700}
.global-search{height:40px;width:min(410px,34vw);border-color:#D7E5ED;border-radius:12px;box-shadow:0 4px 14px rgba(11,45,67,.025)}
.live-pill{background:var(--teal-soft);border-color:#CDEFE9;color:#208B80}.live-pill i{background:var(--teal)}
.top-user strong{color:#1B3042}.top-user span{color:#8092A2}
.content{width:min(1540px,100%);padding:34px 34px 70px}

/* Dashboard V9 */
.dashboard-v9{display:grid;gap:18px}
.dash-head{position:relative;min-height:126px;padding:28px 30px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;overflow:hidden;border:1px solid #CFE6F3;border-radius:24px;background:
  radial-gradient(circle at 92% 5%,rgba(24,199,181,.18),transparent 18rem),
  radial-gradient(circle at 65% 120%,rgba(50,169,255,.16),transparent 22rem),
  linear-gradient(135deg,#FFFFFF 0%,#F5FBFF 68%,#ECF8FF 100%);
  box-shadow:0 18px 45px rgba(14,72,106,.07)
}
.dash-head:after{content:"";position:absolute;right:-52px;top:-88px;width:270px;height:270px;border:1px solid rgba(50,169,255,.13);border-radius:50%;box-shadow:0 0 0 45px rgba(50,169,255,.035),0 0 0 90px rgba(24,199,181,.018);pointer-events:none}
.dash-head>div:first-child{position:relative;z-index:1}
.dash-eyebrow{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:999px;background:#EAF7FF;color:#167DBD;font-size:8.5px;line-height:1;text-transform:uppercase;letter-spacing:1px;font-weight:800}
.dash-head h1{margin:10px 0 4px;color:#0A1C2B;font-size:33px;line-height:1.05;letter-spacing:-1.25px;font-weight:760}
.dash-head p{margin:0;color:#708496;font-size:11px}
.dash-head-actions{position:relative;z-index:1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.metric-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.metric-card{min-height:142px;padding:18px;border-color:#D9E7EE;border-radius:18px;background:linear-gradient(180deg,#fff,#FCFEFF);box-shadow:0 8px 25px rgba(10,49,73,.045)}
.metric-card:hover{transform:translateY(-2px);border-color:#C7E2F0;box-shadow:0 14px 34px rgba(10,49,73,.075)}
.metric-card:after{right:-20px;bottom:-35px;width:110px;height:110px;background:linear-gradient(145deg,rgba(50,169,255,.07),rgba(24,199,181,.035))}
.metric-featured{background:linear-gradient(145deg,#FFFFFF 35%,#ECF8FF 100%);border-color:#BFE0F2}
.metric-icon{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#E7F6FF,#EAFBF8);color:#168FD8;box-shadow:inset 0 0 0 1px #D0ECF9}
.metric-card>strong{margin-top:17px;color:#0B2030;font-size:25px;letter-spacing:-.8px}
.metric-card>b{color:#455C6E;font-size:9.3px;letter-spacing:.62px}
.metric-card>p{color:#8797A5;font-size:9.4px}
.dashboard-main-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.75fr);gap:16px}
.dashboard-main-grid.admin-dense{grid-template-columns:minmax(0,1.35fr) minmax(360px,.8fr)}
.ops-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ops-card{min-height:105px;padding:16px;border:1px solid #E0EAF0;border-radius:15px;background:#FBFDFE;display:grid;grid-template-columns:40px 1fr;gap:11px;align-items:start}
.ops-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#E8F6FF,#ECFCF9);color:#178ED5}
.ops-card strong{font-size:13px;color:#193044}.ops-card span,.ops-card p{font-size:10px;color:#7B8D9D;margin:3px 0 0}
.recent-patient-list,.clinic-network-list,.activity-feed{display:grid}
.recent-patient-row,.clinic-network-row{min-height:64px;padding:10px 16px;display:grid;align-items:center;gap:11px;border-bottom:1px solid #EDF2F5}
.recent-patient-row{grid-template-columns:36px minmax(0,1fr) auto}
.clinic-network-row{grid-template-columns:42px minmax(0,1fr) auto auto auto}
.recent-patient-row:last-child,.clinic-network-row:last-child{border-bottom:0}
.recent-patient-row b,.clinic-network-row b{display:block;color:#1A3041;font-size:11px}.recent-patient-row small,.clinic-network-row small{display:block;margin-top:2px;color:#8293A2;font-size:9.2px}
.clinic-network-row>span{font-size:9.5px;color:#607789}
.activity-feed>div{padding:11px 0;display:flex;align-items:center;gap:10px;border-bottom:1px solid #EEF3F6}.activity-feed>div:last-child{border-bottom:0}.activity-feed>div>span{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#EAF7FF;color:#168ED5}.activity-feed b{display:block;font-size:10.5px;color:#253C4E}.activity-feed small{display:block;margin-top:2px;font-size:9px;color:#8797A5}
.quick-action-panel{padding:20px;border-radius:18px;background:linear-gradient(145deg,#081827,#0B2436);color:#fff;box-shadow:0 16px 38px rgba(5,28,44,.12)}
.quick-action-panel h3{margin:10px 0 5px;font-size:20px;letter-spacing:-.6px}.quick-action-panel p{margin:0 0 16px;color:#92A9B9;font-size:10.5px;line-height:1.6}
.pharmacy-metrics{margin-bottom:0}
.expiry-watch{display:grid;gap:8px}.expiry-watch>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px 0;border-bottom:1px solid #EEF3F6}.expiry-watch>div:last-child{border-bottom:0}.expiry-watch b{display:block;font-size:10.5px}.expiry-watch small{font-size:9px;color:#8495A3}.expiry-days{align-self:center;padding:4px 7px;border-radius:8px;background:#FFF4E4;color:#A56D17;font-size:8.5px;font-weight:750}.expiry-days.danger{background:#FFF0F2;color:#B85061}
.pharmacy-ops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.pharmacy-ops>button{padding:14px;border:1px solid #DFEAF0;border-radius:14px;background:#FBFDFE;text-align:left;cursor:pointer}.pharmacy-ops>button:hover{border-color:#BFE0F2;background:#F5FBFF}.pharmacy-ops b{display:block;color:#1E3547;font-size:10.5px}.pharmacy-ops span{display:block;margin-top:2px;color:#8192A0;font-size:9px}

/* Panels and cards */
.panel{border-color:#DCE8EF;border-radius:19px;background:rgba(255,255,255,.97);box-shadow:0 8px 28px rgba(8,44,67,.045)}
.panel-head{min-height:70px;padding:15px 18px;border-color:#EAF0F4;background:linear-gradient(180deg,#FFFFFF,#FCFEFF)}
.panel-icon{width:36px;height:36px;border-radius:11px;background:linear-gradient(145deg,#E8F6FF,#EAFBF8);color:#168ED5}
.panel-heading h2{font-size:12.5px;color:#1B3244}.panel-heading p{font-size:9.2px;color:#8192A0}
.panel-body{padding:19px}
.page-title{margin:0 0 22px;align-items:center}.page-kicker{color:#1688CF}.page-title h1{color:#0D2030;font-size:31px;letter-spacing:-1.15px}.page-title p{color:#748898}
.btn{min-height:39px;border-radius:11px;padding:0 13px;font-size:10.5px;font-weight:700;transition:.16s ease}.btn-primary{background:linear-gradient(135deg,var(--sky),#218ED8)!important;border-color:#2094E2!important;color:#fff!important;box-shadow:0 8px 22px rgba(50,169,255,.18)}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 11px 26px rgba(50,169,255,.23)}.btn-secondary{background:#fff;border-color:#D7E5ED;color:#385066}.btn-secondary:hover{background:#F6FBFE;border-color:#BEDCEB;color:#18394F}.btn-sm{min-height:31px;padding:0 9px;border-radius:9px;font-size:9.2px}

/* Tables */
.data-table{min-width:760px}.data-table th{height:43px;padding:0 16px;background:#F7FBFD;border-bottom-color:#E2EBF0;color:#708797;font-size:8px;letter-spacing:.84px}.data-table td{padding:13px 16px;border-bottom-color:#EDF2F5;color:#52697B;font-size:10.4px}.data-table tbody tr:hover{background:#F7FCFF}.data-table td>b,.subtle-strong{color:#203749}
.role-chip{background:#EAF7FF;color:#157BB8}.mono-chip{background:#EFF5F8;color:#41596B}.muted-pill{background:#F0F5F7;color:#708493}
.status{border:1px solid transparent}.status-good{background:#EAF9F5;color:#148070;border-color:#D0F0E8}.status-warn{background:#FFF6E8;color:#9D6715;border-color:#F8E3BD}.status-danger{background:#FFF0F2;color:#B1495A;border-color:#F5D7DC}.status-info{background:#EAF7FF;color:#2B7FB2;border-color:#D5ECF9}

/* Forms */
.field>span{color:#536A7B;font-size:9.4px;font-weight:700}.field>span b{color:#E1566A}
.field input,.field select,.field textarea,.table-search,.search-input{border-color:#D5E4EC;background:#FCFEFF;color:#152B3C;border-radius:11px}.field input:focus,.field select:focus,.field textarea:focus{border-color:#70C5F5;box-shadow:0 0 0 3px rgba(50,169,255,.10);outline:0;background:#fff}.field textarea{min-height:90px}.form-section{margin-top:20px;padding-top:18px;border-top:1px solid #E7EEF2}.form-section h3{margin:0 0 12px;color:#1C3445;font-size:12px}
.modal-layer{background:rgba(4,18,28,.56);backdrop-filter:blur(7px)}.modal{border-radius:22px;border:1px solid rgba(214,231,240,.9);box-shadow:0 36px 90px rgba(4,23,36,.22)}.modal-head{background:linear-gradient(180deg,#FFFFFF,#FBFDFE);border-color:#E8EFF3}.modal-head span{color:#1687CB}.modal-head h2{color:#102738}.modal-foot{background:#F8FBFD;border-color:#E7EFF3}

/* Pharmacy workspaces */
.panel-actions-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.grn-info{margin:0 0 14px;padding:12px 14px;border:1px solid #CFE7F4;border-radius:13px;background:linear-gradient(135deg,#F0FAFF,#F2FCFA);color:#4D697A;font-size:10px;line-height:1.55}.grn-info b{color:#137BB9}
.line-editor{margin:14px 0;padding:14px;border:1px solid #DCE8EF;border-radius:15px;background:#F8FBFD}.line-editor-head{margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}.line-editor-head b{display:block;color:#1A3345;font-size:11px}.line-editor-head small{display:block;margin-top:2px;color:#7E919F;font-size:9px}
.line-editor-row{display:grid;gap:8px;margin-top:8px}.line-editor-row.po{grid-template-columns:minmax(190px,1fr) 110px 140px}.line-editor-row input,.line-editor-row select,.grn-line input,.grn-line select{height:38px;padding:0 10px;border:1px solid #D7E5ED;border-radius:10px;background:#fff;color:#21384A;font-size:9.8px;outline:none}.line-editor-row input:focus,.line-editor-row select:focus,.grn-line input:focus,.grn-line select:focus{border-color:#70C5F5;box-shadow:0 0 0 3px rgba(50,169,255,.08)}
.grn-line{display:grid;grid-template-columns:1.4fr .85fr .95fr 1.05fr .62fr .62fr .8fr .8fr .8fr;gap:6px;margin-top:7px}
.barcode-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);gap:16px}.barcode-card{padding:22px;border:1px dashed #AFD6E9;border-radius:17px;background:linear-gradient(145deg,#fff,#F6FBFE);text-align:center}.fake-barcode{height:75px;margin:18px auto 10px;max-width:260px;background:repeating-linear-gradient(90deg,#08131F 0 2px,transparent 2px 5px,#08131F 5px 6px,transparent 6px 10px,#08131F 10px 13px,transparent 13px 16px)}
.clinic-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.clinic-card-v9{padding:20px;border:1px solid #D9E7EE;border-radius:19px;background:linear-gradient(145deg,#fff,#F8FCFE);box-shadow:0 8px 28px rgba(8,44,67,.045)}.clinic-card-top{display:flex;justify-content:space-between;align-items:center}.clinic-card-v9 h3{margin:15px 0 3px;color:#183144;font-size:16px;letter-spacing:-.4px}.clinic-card-v9 p{margin:0;color:#7B8E9D;font-size:9.6px}.clinic-card-v9>small{display:block;margin-top:13px;color:#8394A2;font-size:9px}.clinic-stat-row{margin-top:16px;padding-top:14px;border-top:1px solid #E8EFF3;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.clinic-stat-row div{display:grid}.clinic-stat-row strong{font-size:16px;color:#163349}.clinic-stat-row span{font-size:8px;color:#8495A3;text-transform:uppercase;letter-spacing:.6px}

/* Report branding */
.report-brand{margin-bottom:14px;padding:14px 17px;border:1px solid #D8E8F0;border-radius:16px;background:linear-gradient(135deg,#fff,#F4FBFF);display:flex;align-items:center;gap:12px}.report-brand>div{display:grid}.report-brand strong{color:#173247;font-size:13px}.report-brand span{color:#7B8E9D;font-size:9px}

/* Login: restrained, clinic-grade, no marketing noise */
.login-screen{grid-template-columns:minmax(520px,1.08fr) minmax(420px,.92fr);background:#F4F9FC}.login-art{background:radial-gradient(circle at 16% 12%,rgba(50,169,255,.30),transparent 24rem),radial-gradient(circle at 90% 84%,rgba(24,199,181,.14),transparent 21rem),linear-gradient(145deg,#071522 0%,#0A2132 64%,#081927 100%)}.login-copy h1{font-size:clamp(43px,4vw,63px);letter-spacing:-2.7px}.login-copy h1 em{color:#77CFFF}.login-card{border-color:#D9E7EE;border-radius:22px;box-shadow:0 30px 80px rgba(8,45,69,.10)}.login-card-head>span{color:#1688CF}.login-button{background:linear-gradient(135deg,var(--sky),#1A91DD);box-shadow:0 13px 28px rgba(50,169,255,.20)}

@media print{
  .sidebar,.topbar,.page-actions,.report-filter,.btn{display:none!important}.main-shell{grid-column:1!important}.content{padding:0!important;max-width:none!important}.panel,.metric-card,.report-brand{box-shadow:none!important;break-inside:avoid}.app-shell{display:block!important}body{background:#fff!important}
}

@media(max-width:1250px){.metric-grid.five{grid-template-columns:repeat(3,minmax(0,1fr))}.clinic-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grn-line{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){.dashboard-main-grid,.dashboard-main-grid.admin-dense,.barcode-layout{grid-template-columns:1fr}.metric-grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}.clinic-network-row{grid-template-columns:42px minmax(0,1fr) auto}.clinic-network-row>span{display:none}.dash-head{align-items:flex-start;flex-direction:column}.dash-head-actions{justify-content:flex-start}}
@media(max-width:760px){.content{padding:22px 16px 54px}.metric-grid.five{grid-template-columns:1fr 1fr}.ops-grid,.clinic-card-grid{grid-template-columns:1fr}.dash-head{padding:22px;border-radius:20px}.dash-head h1{font-size:27px}.pharmacy-ops{grid-template-columns:1fr}.line-editor-row.po,.grn-line{grid-template-columns:1fr}.topbar{padding:0 15px}}
@media(max-width:520px){.metric-grid.five{grid-template-columns:1fr}.dash-head-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.dash-head-actions .btn{width:100%}.clinic-card-grid{grid-template-columns:1fr}}
.clinic-card-actions{margin-top:14px;padding-top:12px;border-top:1px solid #E8EFF3;display:flex;justify-content:flex-end}
/* V9 QA polish */
.expiry-days.expired{background:#FFF0F2;color:#B1495A;border:1px solid #F5D7DC}
.expiry-days.warning{background:#FFF6E8;color:#9D6715;border:1px solid #F8E3BD}
.danger-text{color:#B1495A!important}
.ops-grid>div{min-height:104px;padding:15px;border:1px solid #DDEAF0;border-radius:16px;background:linear-gradient(145deg,#FFFFFF,#F7FBFD);display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:11px;align-items:center;box-shadow:0 6px 18px rgba(8,44,67,.035)}
.ops-grid>div .ops-icon{grid-row:1/3;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#E7F6FF,#E9FBF8);color:#168ED5}
.ops-grid>div b{align-self:end;color:#132D40;font-size:21px;line-height:1;font-weight:780;letter-spacing:-.65px}
.ops-grid>div small{align-self:start;margin-top:4px;color:#7D90A0;font-size:9.2px;line-height:1.35}
.recent-patient-list{display:grid}
.recent-patient-list>div{min-height:64px;padding:10px 18px;display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;align-items:center;gap:11px;border-bottom:1px solid #EDF2F5}
.recent-patient-list>div:last-child{border-bottom:0}
.recent-patient-list>div:hover{background:#F8FCFE}
.recent-patient-list>div>div:nth-child(2){display:grid;min-width:0}
.recent-patient-list b{color:#20384A;font-size:10.7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-patient-list small{margin-top:2px;color:#8697A5;font-size:8.8px}
.recent-patient-list>div>span:last-child{color:#7D8F9D;font-size:8.8px;white-space:nowrap}
.flag-row{display:flex!important;flex-direction:row!important;gap:4px;align-items:center}.flag-row span{padding:3px 6px;border-radius:7px;background:#FFF3E8;color:#95611A;font-size:7.7px;font-weight:700}.flag-row small{margin:0;color:#93A0AA}
.clinic-card-actions .btn{min-width:132px}
@media(max-width:760px){.recent-patient-list>div{grid-template-columns:34px minmax(0,1fr) auto}.recent-patient-list .flag-row{display:none!important}.ops-grid>div{min-height:94px}}

/* ======================================================================
   EyeCare React V10 Fresh UI
   Direction: light healthcare SaaS, sky blue + ink black + mint support.
   The rules below intentionally override the older V9 visual layer while
   keeping the existing React component structure and workflow behavior.
   ====================================================================== */
:root{
  --bg:#f5f9fd;
  --surface:#ffffff;
  --surface-2:#f8fbfe;
  --surface-3:#edf6fd;
  --ink:#0b1726;
  --ink-2:#22354a;
  --muted:#718096;
  --line:#dbe7f0;
  --line-strong:#cbdbe7;
  --nav:#091421;
  --nav-2:#0d1b2a;
  --nav-3:#102336;
  --blue:#2da8ff;
  --teal:#25bda6;
  --good:#1f9b77;
  --warn:#c58a24;
  --danger:#cf5263;
  --role:#2da8ff;
  --role-soft:#e8f6ff;
  --radius:16px;
  --radius-sm:11px;
  --shadow-sm:0 1px 2px rgba(9,20,33,.03),0 8px 24px rgba(9,20,33,.035);
  --shadow-md:0 14px 38px rgba(9,20,33,.075),0 2px 10px rgba(9,20,33,.035);
  --shadow-lg:0 24px 70px rgba(9,20,33,.14);
}
html{font-size:16px;background:var(--bg)}
body{
  min-width:320px;
  background:linear-gradient(180deg,#f9fcff 0,#f5f9fd 240px,#f5f9fd 100%);
  color:var(--ink);
  font-family:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
  letter-spacing:-.005em;
}
button,input,select,textarea{font-size:14px}

/* Frame */
.app-shell{grid-template-columns:264px minmax(0,1fr)}
.sidebar{
  width:264px;
  color:#d7e1ec;
  background:linear-gradient(180deg,#08131f 0%,#0b1826 60%,#091521 100%);
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:none;
}
.side-brand{height:82px;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.07)}
.brand-symbol{
  width:42px;height:42px;border-radius:13px;
  background:#2da8ff;color:#fff;
  box-shadow:0 10px 24px rgba(45,168,255,.22)
}
.brand-logo{overflow:hidden;background:#fff}
.brand-logo img{width:100%;height:100%;object-fit:contain;padding:5px}
.side-brand strong{font-size:17px;font-weight:760;letter-spacing:-.35px}
.side-brand small{font-size:10px;letter-spacing:1.15px;color:#8093a7}
.role-card{
  margin:16px 14px 8px;padding:13px 14px;
  background:#0f2031;border:1px solid rgba(255,255,255,.065);border-radius:13px;
  box-shadow:none
}
.role-icon{background:#183149;color:#63c1ff;box-shadow:none}
.role-card small{font-size:10px;color:#8297aa}.role-card strong{font-size:13px}.role-card span:not(.role-icon){font-size:11px;color:#91a3b4}
.side-nav{padding:6px 12px 18px}
.nav-group{padding:18px 11px 8px;font-size:9.5px;letter-spacing:1.25px;color:#60788e}
.nav-item{height:46px;padding:0 11px;gap:11px;border-radius:11px;color:#aab9c8}
.nav-item b{font-size:13px;font-weight:630}
.nav-item>span{width:30px;height:30px;border-radius:9px;color:#8da0b3}
.nav-item:hover{background:#102437;color:#fff;transform:none}
.nav-item.active{background:#12314a;color:#fff;box-shadow:inset 3px 0 0 #2da8ff}
.nav-item.active>span{background:#2da8ff;color:#fff;box-shadow:none}
.nav-item.active>i{display:none}
.side-bottom{background:#08131f;border-top-color:rgba(255,255,255,.06)}
.user-tile strong{font-size:12px}.user-tile span{font-size:10.5px}

.main-shell{grid-column:2}
.topbar{
  height:72px;padding:0 30px;gap:18px;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid #e4edf4;
  backdrop-filter:blur(16px);
}
.crumb{font-size:12px;color:#8290a1}.crumb b{font-weight:700;color:#203247}
.global-search{height:42px;width:min(420px,36vw);border-color:#d9e5ee;border-radius:12px;background:#f9fbfd;box-shadow:none}
.global-search span{font-size:12px}.live-pill{background:#eefbf8;border-color:#d9f1eb;color:#4b776f;font-size:10px}
.top-user strong{font-size:12px}.top-user span{font-size:10px}
.content{width:min(1540px,100%);padding:34px 36px 70px}

/* Shared typography */
.page-title{margin:0 0 22px;align-items:flex-end}
.page-kicker,.dash-eyebrow{font-size:11px;letter-spacing:.9px;text-transform:uppercase;font-weight:800;color:#278dd2}
.page-title h1,.dash-head h1{margin:5px 0 0;color:#0b1726;font-size:clamp(27px,2.4vw,36px);line-height:1.12;letter-spacing:-1.15px;font-weight:760}
.page-title p,.dash-head p{margin:7px 0 0;color:#718096;font-size:13.5px;max-width:760px;line-height:1.6}
.page-actions,.dash-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Dashboard visual system */
.dashboard-v9{display:block}
.dash-head{
  position:relative;overflow:hidden;
  min-height:126px;margin-bottom:20px;padding:24px 26px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  border:1px solid #d9e8f3;border-radius:20px;
  background:linear-gradient(120deg,#ffffff 0%,#f3faff 68%,#e8f6ff 100%);
  box-shadow:var(--shadow-sm)
}
.dash-head:after{content:"";position:absolute;right:-58px;top:-95px;width:250px;height:250px;border-radius:50%;border:42px solid rgba(45,168,255,.055);pointer-events:none}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:0 0 16px}
.metric-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.metric-card{
  position:relative;min-height:142px;padding:18px 18px 17px;
  border:1px solid #dfe9f1;border-radius:16px;background:#fff;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;align-items:flex-start
}
.metric-card:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 4px 4px 0;background:#dceaf4}
.metric-featured:before{background:#2da8ff}
.metric-head{width:100%;display:flex;align-items:center;justify-content:space-between}
.metric-icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#e9f6ff;color:#218fd8}
.metric-card>strong{margin-top:17px;font-size:25px;line-height:1;font-weight:760;letter-spacing:-.8px;color:#0b1726}
.metric-card>b{margin-top:8px;font-size:12px;text-transform:none;letter-spacing:0;color:#33475d;font-weight:720}
.metric-card>p{margin:4px 0 0;font-size:10.5px;color:#8290a1}
.dashboard-main-grid,.workspace-grid,.admin-bento,.report-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr);gap:16px;margin-top:16px}
.admin-dense{grid-template-columns:minmax(0,1.7fr) minmax(330px,.8fr)}

.panel{border:1px solid #dfe9f1;border-radius:17px;background:#fff;box-shadow:var(--shadow-sm)}
.panel-head{min-height:72px;padding:16px 19px;border-bottom:1px solid #eaf0f5;background:#fff}
.panel-icon{width:36px;height:36px;border-radius:11px;background:#e9f6ff;color:#278fd2}
.panel-heading h2{font-size:14px;font-weight:750;color:#16283b}.panel-heading p{font-size:10.5px;color:#8492a3}
.panel-body{padding:19px}
.ops-grid{gap:10px}.ops-grid>div{border:1px solid #e3ebf2;border-radius:13px;background:#fbfdff;padding:16px}
.ops-grid b{font-size:20px;color:#102033}.ops-grid small{font-size:10px;color:#7d8a9b}
.ops-icon{background:#eaf6ff!important;color:#2b96dc!important}
.flow-bar{margin:0 0 16px;border:1px solid #dfe9f1;border-radius:16px;background:#fff;box-shadow:var(--shadow-sm)}
.flow-step{min-height:76px}.flow-step span{background:#e9f6ff;color:#268ed1}.flow-step.active span{background:#2da8ff;color:#fff}.flow-step b{font-size:12px}.flow-step small{font-size:10px}
.chart-wrap{min-height:250px}.chart-labels{font-size:10px;color:#8492a3}

/* Buttons & forms */
.btn{height:40px;padding:0 14px;border-radius:10px;border-color:#d8e4ed;background:#fff;color:#33475c;font-size:12px;font-weight:700;box-shadow:none}
.btn:hover{transform:none;border-color:#bcd7e9;background:#f9fcff;color:#0b1726;box-shadow:none}
.btn-primary{border-color:#2da8ff;background:#2da8ff;color:#fff;box-shadow:0 8px 18px rgba(45,168,255,.17)}
.btn-primary:hover{background:#179af3;border-color:#179af3;color:#fff}
.btn-sm{height:34px;font-size:10.5px;padding:0 10px}
.field{gap:7px}.field>span{font-size:11px;color:#4d6074;font-weight:720}.field>small{font-size:10px;color:#8795a6}
input,select,textarea{border-color:#d6e3ec;border-radius:10px;background:#fff;color:#1e3246}
input,select{height:42px;padding:0 12px}textarea{min-height:94px;padding:11px 12px}
input:focus,select:focus,textarea:focus{border-color:#75c6f8;box-shadow:0 0 0 3px rgba(45,168,255,.11)}
.form-grid{gap:15px}.check-row label{font-size:11px}

/* Data-heavy screens */
.data-table{min-width:780px}
.data-table th{height:44px;padding:0 16px;background:#f7fafc;border-bottom-color:#e3ebf1;color:#6e7f91;font-size:10px;letter-spacing:.55px}
.data-table td{padding:14px 16px;color:#4d6074;font-size:12px;border-bottom-color:#edf2f6}
.data-table td>b,.subtle-strong,.person-cell b{font-size:12px;color:#21364a}.cell-note,.person-cell small{font-size:10px;color:#8492a3}
.person-cell .avatar{width:34px;height:34px}.mono-chip{font-size:10px;padding:5px 8px;background:#eff5f9}.role-chip{font-size:10px}
.table-search{height:37px;min-width:285px;background:#f8fbfd}.table-search input{font-size:11px}.table-search button{font-size:10px}
.status{font-size:9.5px;padding:5px 9px;letter-spacing:.25px;text-transform:none}
.status-info{background:#eef7fd;color:#3c7da7}.status-good{background:#eaf8f4;color:#247b66}.status-warn{background:#fff7e8;color:#936717}.status-danger{background:#fff0f2;color:#aa4758}

/* Lists */
.recent-patient-list>div,.schedule-list>div,.compact-table>div,.stock-list>div,.expiry-watch>div{min-height:58px;padding:11px 0}
.recent-patient-list b,.schedule-list b,.compact-table b,.stock-list b,.expiry-watch b{font-size:12px;color:#25394d}
.recent-patient-list small,.schedule-list small,.compact-table small,.stock-list small,.expiry-watch small{font-size:10px;color:#8190a1}
.queue-item{min-height:63px}.queue-main strong{font-size:12px}.queue-main small{font-size:10px}
.token{font-size:11px}

/* Login */
.login-screen{grid-template-columns:minmax(520px,1.05fr) minmax(430px,.75fr);background:#f4f9fd}
.login-art{background:linear-gradient(150deg,#08131f 0%,#0d1d2e 68%,#10283d 100%);padding:46px 7vw}
.login-art:before,.login-art:after{opacity:.55}
.login-copy h1{font-size:clamp(44px,4.2vw,65px);font-weight:730;letter-spacing:-2.8px}.login-copy h1 em{color:#5fc0ff}.login-copy>p{font-size:15px;color:#a1b2c3}
.login-form-wrap{background:#f5f9fd}.login-card{border:1px solid #dce8f1;border-radius:20px;box-shadow:0 24px 70px rgba(8,19,31,.09)}
.login-card-head h2{font-size:28px;color:#0b1726}.login-card-head p{font-size:13px}.login-button{height:46px;background:#2da8ff;font-size:13px}

/* Super admin / SaaS */
.clinic-network-list{display:grid}
.clinic-network-row{min-height:72px;padding:12px 18px;display:grid;grid-template-columns:44px minmax(180px,1.35fr) 88px 75px 105px auto;align-items:center;gap:12px;border-bottom:1px solid #edf2f6;font-size:11px}
.clinic-network-row:last-child{border-bottom:0}.clinic-network-row b{font-size:12px;color:#203549}.clinic-network-row small{font-size:10px;color:#8492a3}
.plan-chip,.clinic-plan-row span{display:inline-flex;width:max-content;padding:5px 9px;border-radius:999px;background:#e9f6ff;color:#237fb9;font-size:9.5px;font-weight:760}
.clinic-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.clinic-card-v9{padding:20px;border:1px solid #dce8f1;border-radius:17px;background:#fff;box-shadow:var(--shadow-sm)}
.clinic-card-v9 h3{margin:16px 0 4px;font-size:17px;color:#13273b;letter-spacing:-.35px}.clinic-card-v9>p{font-size:11px;color:#718096}.clinic-card-v9>small{font-size:10.5px;color:#7f8da0}
.clinic-plan-row{margin:12px 0;display:flex;align-items:center;justify-content:space-between;gap:8px}.clinic-plan-row small{font-size:9.5px;color:#8996a6}
.clinic-stat-row{margin:15px 0;padding:13px 0;border-top:1px solid #edf2f6;border-bottom:1px solid #edf2f6}.clinic-stat-row strong{font-size:18px}.clinic-stat-row span{font-size:9.5px}

/* Pharmacy and Optical POS */
.pos-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;margin-bottom:18px;align-items:start}
.pos-workspace{display:grid;gap:15px}
.scan-box{min-height:96px;padding:17px 18px;border:1px solid #cfe5f4;border-radius:16px;background:linear-gradient(120deg,#fff,#f0f9ff);display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:var(--shadow-sm)}
.scan-box>div:first-child{min-width:0;flex:1}.scan-box>div:first-child>span{display:block;margin-bottom:8px;font-size:11px;font-weight:760;color:#38526a}
.scan-input{display:flex;align-items:center;gap:9px}.scan-input>svg{color:#2da8ff}.scan-input input{flex:1;min-width:120px;background:#fff}.scan-input .btn{flex:0 0 auto}
.scan-stock{min-width:90px;padding-left:18px;border-left:1px solid #d5e8f4;display:grid;text-align:right}.scan-stock b{font-size:24px;color:#0b1726}.scan-stock span{font-size:9.5px;color:#7a8b9d}
.product-pick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.product-pick-grid button{min-height:108px;padding:13px;border:1px solid #dfe9f1;border-radius:14px;background:#fff;text-align:left;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:start;cursor:pointer;box-shadow:var(--shadow-sm)}
.product-pick-grid button:hover{border-color:#a9d7f4;background:#fafdff}.product-pick-grid button:disabled{opacity:.5;cursor:not-allowed}
.product-pick-icon{grid-row:1/3;width:34px;height:34px;border-radius:10px;background:#e9f6ff;color:#258dd0;display:flex;align-items:center;justify-content:center}
.product-pick-grid b{display:block;font-size:11.5px;color:#203548;line-height:1.35}.product-pick-grid small{font-size:9.5px;color:#8391a2}.product-pick-grid strong{grid-column:2;font-size:12px;color:#0b1726;margin-top:5px}
.sale-cart{display:grid}.sale-cart-row{min-height:62px;padding:10px 15px;display:grid;grid-template-columns:minmax(180px,1fr) 72px 100px 96px 30px;gap:10px;align-items:center;border-bottom:1px solid #edf2f6}.sale-cart-row:last-child{border-bottom:0}.sale-cart-row b{font-size:12px;color:#203548}.sale-cart-row small{display:block;font-size:9.5px;color:#8492a3}.sale-cart-row input{height:36px}.sale-cart-row strong{text-align:right;font-size:12px}.sale-cart-row button{width:28px;height:28px;border:0;border-radius:8px;background:#fff1f2;color:#c35463;display:flex;align-items:center;justify-content:center;cursor:pointer}
.checkout-card{position:sticky;top:92px;padding:19px;border:1px solid #d8e6f0;border-radius:17px;background:#fff;box-shadow:var(--shadow-md);display:grid;gap:15px}.checkout-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid #eaf0f5}.checkout-head span{font-size:12px;font-weight:760;color:#1b3044}.checkout-head b{font-size:10px;color:#688095;background:#eff6fb;padding:5px 8px;border-radius:999px}.checkout-lines{display:grid;gap:10px}.checkout-lines>div,.checkout-lines>label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#66798c}.checkout-lines input{width:110px;height:36px;text-align:right}.checkout-total{padding-top:12px;border-top:1px solid #eaf0f5!important}.checkout-total span{font-weight:760;color:#1f3448}.checkout-total strong{font-size:22px;color:#0b1726}.checkout-card>.btn{width:100%;height:45px}
.grn-info{border-color:#cfe5f4;background:#f1f9ff}.barcode-card{border-color:#dce8f1;background:#fff}
.pharmacy-metrics.metric-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}

/* Modal */
.modal-layer{background:rgba(6,15,25,.46);backdrop-filter:blur(5px)}
.modal{border:1px solid #dbe7ef;border-radius:19px;box-shadow:0 30px 90px rgba(5,14,23,.22)}
.modal-head{padding:18px 20px;border-bottom-color:#e8eff4}.modal-head span{font-size:10px;color:#2a8dcb}.modal-head h2{font-size:20px;color:#12273a}.modal-body{padding:20px}.modal-foot{padding:14px 20px;border-top-color:#e8eff4;background:#fbfdff}
.form-section{border-color:#e0e9f0;background:#f9fcfe}.form-section h3{font-size:13px;color:#24394c}

/* Feedback */
.error-box,.notice-box{font-size:12px;border-radius:12px;padding:11px 13px}.notice-box{background:#edf9f6;border-color:#d1eee7}.error-box{background:#fff3f4;border-color:#f1d8dd}
.empty-state{padding:35px 22px}.empty-state strong{font-size:13px}.empty-state p{font-size:11px}

/* Responsive */
@media(max-width:1280px){
  .metric-grid.five,.pharmacy-metrics.metric-grid.five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .clinic-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-pick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1040px){
  .app-shell{grid-template-columns:1fr}.main-shell{grid-column:1}.sidebar{transform:translateX(-100%);transition:transform .22s ease}.sidebar.sidebar-open{transform:translateX(0);box-shadow:25px 0 80px rgba(4,13,22,.25)}.side-close,.mobile-menu{display:flex}.topbar{padding:0 20px}.content{padding:28px 22px 60px}.global-search{width:min(330px,40vw)}
  .dashboard-main-grid,.workspace-grid,.admin-bento,.report-grid,.admin-dense{grid-template-columns:1fr}.pos-layout{grid-template-columns:1fr}.checkout-card{position:relative;top:auto}.login-screen{grid-template-columns:1fr}.login-art{display:none}.login-form-wrap{min-height:100vh}.metric-grid,.metric-grid.five,.pharmacy-metrics.metric-grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  body{font-size:14px}.topbar{height:64px;padding:0 14px}.crumb{display:none}.global-search{margin:0;flex:1;width:auto}.top-user>div,.live-pill{display:none}.content{padding:22px 14px 48px}.page-title,.dash-head{align-items:flex-start;flex-direction:column}.page-title h1,.dash-head h1{font-size:27px}.dash-head{min-height:auto;padding:20px}.metric-grid,.metric-grid.five,.pharmacy-metrics.metric-grid.five{grid-template-columns:1fr 1fr;gap:10px}.metric-card{min-height:125px;padding:15px}.metric-card>strong{font-size:22px}.clinic-card-grid{grid-template-columns:1fr}.product-pick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sale-cart-row{grid-template-columns:minmax(130px,1fr) 62px 82px 28px}.sale-cart-row>strong{grid-column:2/4;text-align:right}.scan-box{align-items:stretch;flex-direction:column}.scan-stock{border-left:0;border-top:1px solid #d5e8f4;padding:10px 0 0;display:flex;align-items:center;justify-content:space-between}.form-grid.two,.form-grid.three{grid-template-columns:1fr}.clinic-network-row{grid-template-columns:40px 1fr auto}.clinic-network-row>span:not(.plan-chip){display:none}
}
@media(max-width:520px){
  .metric-grid,.metric-grid.five,.pharmacy-metrics.metric-grid.five{grid-template-columns:1fr}.product-pick-grid{grid-template-columns:1fr}.global-search kbd{display:none}.page-actions,.dash-head-actions{width:100%}.page-actions .btn,.dash-head-actions .btn{flex:1}.checkout-card{padding:16px}.sale-cart-row{grid-template-columns:1fr 68px 28px}.sale-cart-row>input:nth-of-type(2){grid-column:1/2}.sale-cart-row>strong{grid-column:2/3}.modal{width:calc(100vw - 20px);max-height:92vh}.table-search{min-width:0;width:100%}
}

/* =========================================================
   V10.1 READABILITY + CLINICAL WORKFLOW POLISH
   Keeps the same Sky / Ink / Mint product language everywhere.
   ========================================================= */

/* Workflow / queue cards */
.token-card,.surgery-card{margin-top:9px;padding:15px 16px;border-color:#dbe7ef;border-radius:14px;box-shadow:0 5px 18px rgba(8,19,31,.045)}
.token-card-top>span{font-size:10.5px;color:#617589}.token-card>strong{margin-top:10px;font-size:13px;line-height:1.35;color:#20364b}.token-card>small{margin:4px 0 12px;font-size:10.5px;line-height:1.45;color:#7d8da0}
.kanban-queue{gap:14px}.kanban-column{border-color:#dce7ef;background:#f9fcfe}.kanban-column-head{min-height:46px;padding:0 14px}.kanban-column-head b{font-size:12px;color:#263b4f}.kanban-column-head span{font-size:10px}

/* Doctor / EMR workspace */
.patient-context,.encounter-head{margin-bottom:16px;padding:16px 18px;border-color:#dce7ef;border-radius:16px;box-shadow:0 5px 18px rgba(8,19,31,.045)}
.patient-context-main,.encounter-person{gap:12px}.patient-context strong,.encounter-person strong{font-size:13px;color:#1f3448}.patient-context span,.encounter-person span{margin-top:2px;font-size:10.5px;color:#7c8da0}
.encounter-layout{grid-template-columns:220px minmax(0,1fr);gap:16px}.encounter-nav{top:92px;padding:10px;border-color:#dce7ef;border-radius:15px;box-shadow:0 5px 18px rgba(8,19,31,.04)}
.encounter-nav>span{padding:8px 10px 9px;font-size:9.5px;color:#788a9c;letter-spacing:.8px}.encounter-nav button{height:43px;padding:0 11px;border-radius:10px;font-size:11.5px;color:#53687c}.encounter-nav button:hover{background:#f1f8fd;color:#1c78b4}.encounter-nav button.active{background:#e7f5ff;color:#147dbd}
.eye-exam-grid{gap:14px;margin-bottom:16px}.eye-exam{padding:16px;border-color:#dce7ef;border-radius:14px;background:#fbfdff}.eye-exam>span{margin-bottom:12px;font-size:10px;color:#238dce}.eye-exam .field{margin-top:11px}
.clinical-summary{gap:10px;margin-bottom:16px}.clinical-summary>div{padding:14px;border-color:#dce7ef;border-radius:13px}.clinical-summary span{font-size:9.5px;color:#788a9d}.clinical-summary b{margin-top:5px;font-size:13px;color:#203548}.clinical-summary small{font-size:9.5px;color:#8795a5}
.repeat-card{padding:16px;border-color:#dce7ef;border-radius:14px;background:#fbfdff}.repeat-card .field label{font-size:10.5px}

/* Billing */
.invoice-layout{grid-template-columns:minmax(0,1.5fr) 350px;gap:16px}.patient-picker,.invoice-lines,.invoice-summary{border-color:#dbe7ef;border-radius:16px;box-shadow:0 5px 18px rgba(8,19,31,.045)}.patient-picker,.invoice-lines{padding:18px}.invoice-lines{margin-top:15px}
.invoice-line-head,.invoice-line{grid-template-columns:135px minmax(180px,1fr) 76px 110px 36px;gap:9px}.invoice-line-head{padding:0 4px 8px;font-size:9.5px;color:#7a8c9e}.invoice-line{padding:9px 0}.invoice-line input,.invoice-line select{font-size:11.5px}.invoice-summary{padding:18px}.invoice-summary h3{font-size:15px;color:#203548}.invoice-summary-row{font-size:11.5px;color:#63778b}.invoice-summary-total strong{font-size:24px;color:#0b1726}
.payment-history>div{min-height:48px}.payment-history b{font-size:11.5px}.payment-history small{font-size:10px}

/* Surgery */
.surgery-card{padding:16px}.surgery-card .surgery-eye{right:13px;top:13px;width:34px;height:34px}.surgery-card>small{font-size:9.5px}.surgery-card h3{margin:9px 42px 4px 0;font-size:13px;color:#203548}.surgery-card p{font-size:11px;color:#4f6478}.surgery-card>span{margin:4px 0 12px;font-size:10px;color:#7f8fa0}.surgery-card select{height:38px;margin-bottom:9px;font-size:11px}

/* Reports / branches */
.report-filter{margin-bottom:16px;padding:15px 16px;border-color:#dbe7ef;border-radius:15px;gap:12px}.report-filter .field{width:190px}.rank-list>div{min-height:54px;grid-template-columns:30px minmax(0,1fr) auto;gap:10px}.rank-list span{width:28px;height:28px;border-radius:9px;font-size:10px}.rank-list b{font-size:11.5px;color:#30465a}.rank-list strong{font-size:11px;color:#238dce}
.branch-card{min-height:196px;padding:20px;border-color:#dbe7ef;border-radius:16px}.branch-card>span:first-child{width:40px;height:40px}.branch-card h3{margin:18px 0 5px;font-size:16px;color:#203548}.branch-card p{min-height:36px;font-size:10.5px;line-height:1.45;color:#718397}.branch-card>div{margin-top:18px;padding-top:14px}.branch-card>div b{font-size:17px}.branch-card>div small{font-size:9.5px}

/* Quick actions: no detached dark-gradient island; keep one light product theme. */
.quick-action-panel{padding:20px;border:1px solid #cfe5f4;border-radius:17px;background:linear-gradient(140deg,#f4fbff 0%,#ffffff 62%,#eefbf8 100%);color:#10263a;box-shadow:0 7px 24px rgba(8,19,31,.055)}
.quick-action-panel h3{margin:10px 0 6px;font-size:18px;color:#10263a}.quick-action-panel p{margin:0 0 16px;color:#687d91;font-size:11.5px;line-height:1.65}.quick-action-panel svg{color:#2da8ff}
.quick-action-panel .btn-secondary{background:#fff;border-color:#cddfe9;color:#18354d}.quick-action-panel .btn-secondary:hover{background:#eef8ff;border-color:#a8d3ef}

/* Forms are intentionally readable on a clinic counter screen. */
.field label{font-size:10.5px;letter-spacing:.15px}.field input,.field select,.field textarea{font-size:12px}.field textarea{line-height:1.55}.form-hint{font-size:10px}.section-title h2,.panel-title h2{font-size:15px}.section-title p,.panel-title p{font-size:10.5px;line-height:1.5}

/* Better tablet/mobile behavior for dense clinical pages. */
@media(max-width:1120px){
  .encounter-layout{grid-template-columns:1fr}.encounter-nav{position:static;display:flex;overflow-x:auto;gap:5px}.encounter-nav>span{display:none}.encounter-nav button{width:auto;min-width:max-content;flex:0 0 auto;padding:0 13px}.invoice-layout{grid-template-columns:1fr}.invoice-summary{position:relative!important;top:auto!important}
}
@media(max-width:760px){
  .patient-context,.encounter-head{align-items:flex-start;flex-direction:column}.clinical-summary{grid-template-columns:1fr 1fr}.eye-exam-grid{grid-template-columns:1fr}.invoice-line-head{display:none}.invoice-line{grid-template-columns:1fr 82px 34px}.invoice-line>*:nth-child(2){grid-column:1/-1}.invoice-line>strong{grid-column:2/3;text-align:right}.report-filter{align-items:stretch;flex-direction:column}.report-filter .field{width:100%}
}
@media(max-width:480px){.clinical-summary{grid-template-columns:1fr}.token-card,.surgery-card{padding:14px}.patient-context,.encounter-head{padding:14px}}
/* React 16 local runtime compatibility: this wrapper replaces JSX fragments. */
.react-fragment{display:contents}

/* =========================================================
   V11 LIGHT SKY PRO SYSTEM
   One calm clinic theme: white surfaces, light sky accents,
   deep ink typography. No role rainbow, no dark dashboard islands.
   ========================================================= */
:root{
  --bg:#f5faff;
  --surface:#ffffff;
  --surface-2:#f8fcff;
  --surface-3:#eef8ff;
  --ink:#101b2a;
  --ink-2:#31445a;
  --muted:#708198;
  --line:#dfeaf2;
  --line-strong:#cfdfea;
  --nav:#ffffff;
  --nav-2:#f7fbfe;
  --nav-3:#edf8ff;
  --blue:#38aef3;
  --teal:#27b69f;
  --good:#1b9875;
  --warn:#b77b19;
  --danger:#cf5263;
  --role:#38aef3;
  --role-soft:#eaf7ff;
  --shadow-sm:0 4px 18px rgba(21,48,72,.045);
  --shadow-md:0 12px 34px rgba(21,48,72,.075);
  --shadow-lg:0 24px 60px rgba(21,48,72,.12);
}
body{
  background:linear-gradient(180deg,#fafdff 0,#f4faff 280px,#f6faff 100%);
  color:var(--ink);
  font-size:15px;
}

/* Light product frame */
.app-shell{grid-template-columns:272px minmax(0,1fr)}
.sidebar{
  width:272px;
  color:#40536a;
  background:#fff;
  border-right:1px solid #e0ebf2;
  box-shadow:8px 0 30px rgba(36,73,104,.025);
}
.side-brand{height:84px;padding:0 20px;border-bottom:1px solid #e9f0f5;background:#fff}
.brand-symbol{width:43px;height:43px;border-radius:14px;background:linear-gradient(145deg,#46b8f8,#279de3);box-shadow:0 10px 24px rgba(56,174,243,.18)}
.side-brand strong{color:#112238;font-size:17px;font-weight:780}
.side-brand small{color:#7c8ea2;font-size:10px;letter-spacing:1.05px}
.role-card{margin:16px 14px 7px;padding:14px;background:linear-gradient(135deg,#f5fbff,#ecf8ff);border:1px solid #d9edf9;border-radius:14px;box-shadow:none}
.role-icon{background:#dff3ff;color:#238fd0;box-shadow:none}
.role-card small{color:#7990a3;font-size:10px}
.role-card strong{color:#1a2d42;font-size:13.5px}
.role-card span:not(.role-icon){color:#6e8194;font-size:11px}
.side-nav{padding:8px 12px 18px;scrollbar-color:#d5e7f2 transparent}
.nav-group{padding:20px 11px 8px;color:#8b9baa;font-size:9.5px;letter-spacing:1.15px}
.nav-item{height:47px;border-radius:12px;color:#54677b}
.nav-item b{font-size:13.5px;font-weight:650}
.nav-item>span{color:#73879b}
.nav-item:hover{background:#f4faff;color:#193048;transform:none}
.nav-item.active{background:#eaf7ff;color:#167fbf;box-shadow:inset 0 0 0 1px #d3ecfb}
.nav-item.active>span{background:#fff;color:#258fd0;box-shadow:0 4px 12px rgba(41,143,208,.10)}
.nav-item.active>i{display:block;right:10px;background:#39aef3;box-shadow:none}
.side-bottom{background:#fff;border-top:1px solid #e8eff4}
.user-tile strong{color:#24374c;font-size:12px}
.user-tile span{color:#7d8fa2;font-size:10.5px}
.user-tile button{color:#8395a8}
.user-tile button:hover{background:#f2f8fc;color:#28435a}
.avatar{background:#e9f7ff;color:#268bcc;box-shadow:inset 0 0 0 1px #d5edf9}

.main-shell{grid-column:2}
.topbar{height:74px;padding:0 32px;background:rgba(255,255,255,.95);border-bottom:1px solid #e2ecf3;box-shadow:0 1px 0 rgba(30,61,87,.015)}
.crumb{font-size:12.5px;color:#8191a3}.crumb b{color:#24374c;font-weight:700}
.global-search{height:42px;border:1px solid #dae7ef;background:#f8fcff;border-radius:12px;box-shadow:none}
.global-search:hover{border-color:#b9dff4;background:#fff;box-shadow:0 6px 18px rgba(31,86,122,.045)}
.global-search span{font-size:12.5px}
.live-pill{background:#f0fbf7;border-color:#d8efe7;color:#4d746b}
.top-user strong{font-size:12px}.top-user span{font-size:10.5px}
.content{width:min(1580px,100%);padding:34px 38px 72px}

/* Typography */
.page-kicker,.dash-eyebrow{color:#2d94cf;font-size:10.5px;letter-spacing:.85px}
.page-title h1,.dash-head h1{font-size:clamp(30px,2.5vw,38px);font-weight:780;letter-spacing:-1.25px;color:#102033}
.page-title p,.dash-head p{font-size:13.5px;color:#6e8094}
.panel-heading h2{font-size:15px;color:#1b3044;font-weight:760}
.panel-heading p{font-size:11px;color:#8393a4}

/* Shared cards */
.panel{border:1px solid #deebf3;border-radius:18px;background:#fff;box-shadow:var(--shadow-sm)}
.panel-head{min-height:74px;padding:17px 20px;border-bottom:1px solid #eaf1f6;background:#fff}
.panel-icon{width:38px;height:38px;border-radius:12px;background:#ecf8ff;color:#2796d6}
.panel-body{padding:20px}
.metric-grid{gap:14px}
.metric-card{min-height:150px;padding:19px;border:1px solid #dfebf3;border-radius:17px;background:#fff;box-shadow:var(--shadow-sm)}
.metric-card:before{top:20px;bottom:20px;width:3px;background:#dfeaf2}
.metric-featured{background:linear-gradient(145deg,#fff 55%,#f1faff);border-color:#cfe7f6}
.metric-featured:before{background:#3caef0}
.metric-icon{width:40px;height:40px;border-radius:12px;background:#edf8ff;color:#2796d5}
.metric-card>strong{margin-top:18px;font-size:27px;color:#102033;font-weight:780}
.metric-card>b{font-size:12.5px;color:#3d5268}
.metric-card>p{font-size:11px;color:#7d8ea0}
.btn{height:41px;padding:0 14px;border-radius:11px;border-color:#d5e4ed;background:#fff;color:#34495e;font-size:12px;font-weight:710}
.btn:hover{border-color:#bcdcf0;background:#f9fdff;color:#162a3e}
.btn-primary{border-color:#3aaef0;background:#3aaef0;color:#fff;box-shadow:0 8px 20px rgba(58,174,240,.17)}
.btn-primary:hover{background:#299fdf;border-color:#299fdf;color:#fff}

/* V11 clinic admin command dashboard */
.admin-dashboard-pro{display:block}
.admin-welcome{position:relative;overflow:hidden;min-height:210px;margin-bottom:18px;padding:30px 32px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:26px;border:1px solid #d8eaf5;border-radius:22px;background:linear-gradient(125deg,#ffffff 0%,#f4fbff 62%,#eaf7ff 100%);box-shadow:var(--shadow-sm)}
.admin-welcome:before{content:"";position:absolute;right:-92px;top:-130px;width:330px;height:330px;border-radius:50%;border:54px solid rgba(61,177,242,.055);pointer-events:none}
.admin-welcome:after{content:"";position:absolute;right:160px;bottom:-110px;width:200px;height:200px;border-radius:50%;background:rgba(39,182,159,.035);pointer-events:none}
.admin-welcome-main{position:relative;z-index:1;max-width:840px}
.admin-context{display:inline-flex;align-items:center;gap:8px;color:#4f7590;font-size:11px;font-weight:760;text-transform:uppercase;letter-spacing:.75px}
.admin-context i{width:7px;height:7px;border-radius:50%;background:#35b7a0;box-shadow:0 0 0 5px rgba(53,183,160,.10)}
.admin-welcome h1{margin:13px 0 9px;color:#102033;font-size:clamp(34px,3vw,44px);line-height:1.05;letter-spacing:-1.55px;font-weight:790}
.admin-welcome p{margin:0;max-width:770px;color:#66798d;font-size:14px;line-height:1.68}
.admin-welcome-meta{margin-top:20px;display:flex;gap:9px;flex-wrap:wrap}
.admin-welcome-meta span{height:34px;padding:0 10px;display:inline-flex;align-items:center;gap:7px;border:1px solid #dcebf4;border-radius:10px;background:rgba(255,255,255,.82);color:#526a80;font-size:11px;font-weight:650}
.admin-welcome-meta svg{color:#329bd7}
.admin-welcome-actions{position:relative;z-index:1;width:190px;display:grid;gap:9px}
.admin-welcome-actions .btn{width:100%;justify-content:flex-start;height:43px}
.admin-kpi-grid{margin-bottom:18px}
.admin-primary-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(360px,.78fr);gap:16px;margin-top:0}
.admin-performance-panel .panel-body{padding:18px 20px 16px}
.performance-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.performance-summary>div{padding:14px 15px;border:1px solid #e0ebf2;border-radius:13px;background:#fbfdff}
.performance-summary small{display:block;color:#7c8d9e;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.45px}
.performance-summary strong{display:block;margin-top:5px;color:#14283b;font-size:21px;line-height:1.1;font-weight:780}
.performance-summary span{display:block;margin-top:4px;color:#8796a6;font-size:10.5px}
.admin-performance-panel .chart-wrap{min-height:245px}
.admin-flow-list{display:grid;gap:4px}
.admin-flow-row{display:grid;grid-template-columns:38px minmax(100px,1fr) minmax(80px,.85fr) 32px;align-items:center;gap:10px;min-height:58px;padding:8px 0;border-bottom:1px solid #eef3f7}
.admin-flow-row:last-child{border-bottom:0}
.admin-flow-icon{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#edf8ff;color:#2995d3}
.admin-flow-copy{display:grid}.admin-flow-copy b{font-size:12px;color:#2a4055}.admin-flow-copy small{font-size:9.8px;color:#8795a4}
.admin-flow-track{height:7px;border-radius:999px;background:#edf3f7;overflow:hidden}
.admin-flow-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#49b5f3,#37bca7)}
.admin-flow-row>strong{color:#173047;font-size:14px;text-align:right}
.admin-attention-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.admin-attention-card{min-height:118px;padding:17px 18px;display:flex;align-items:flex-start;gap:12px;border:1px solid #deebf3;border-radius:16px;background:#fff;box-shadow:var(--shadow-sm)}
.admin-attention-card>span{width:39px;height:39px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#eef8ff;color:#2b97d4}
.admin-attention-card>div{display:grid;min-width:0}.admin-attention-card small{font-size:10px;color:#8493a3;text-transform:uppercase;letter-spacing:.55px;font-weight:750}.admin-attention-card b{margin-top:4px;color:#22384c;font-size:13px}.admin-attention-card p{margin:3px 0 0;color:#7d8d9e;font-size:10.5px;line-height:1.45}
.admin-secondary-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px;margin-top:16px}
.admin-schedule-list>div{display:grid;grid-template-columns:74px 36px minmax(150px,1fr) auto;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid #edf3f7}
.admin-schedule-list>div:last-child{border-bottom:0}
.schedule-time{font-size:11px!important;font-weight:760!important;color:#276e9b!important}
.admin-recent-list>div{padding:12px 18px;grid-template-columns:36px minmax(140px,1.2fr) minmax(90px,.7fr) auto}
.admin-bottom-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:16px;margin-top:16px}
.admin-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.admin-quick-grid button{min-height:82px;padding:13px;border:1px solid #e0eaf1;border-radius:13px;background:#fbfdff;display:grid;grid-template-columns:36px 1fr 18px;align-items:center;gap:11px;text-align:left;cursor:pointer;color:#6c7f91;transition:.15s ease}
.admin-quick-grid button:hover{background:#f3faff;border-color:#c9e4f4;transform:translateY(-1px)}
.admin-quick-grid button>span{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#e9f7ff;color:#2994d2}
.admin-quick-grid button>div{display:grid}.admin-quick-grid b{font-size:12px;color:#2b4155}.admin-quick-grid small{margin-top:2px;font-size:10px;color:#8795a4;line-height:1.4}
.admin-activity-feed>div{padding:11px 0}.admin-activity-feed b{font-size:11.5px}.admin-activity-feed small{font-size:9.8px}

/* Keep all remaining screens in the same light language */
.dash-head{border-color:#dceaf3;background:linear-gradient(120deg,#fff 0%,#f7fcff 72%,#eef9ff 100%);box-shadow:var(--shadow-sm)}
.focus-guide,.action-card.primary,.quick-action-panel{color:#173049;background:linear-gradient(145deg,#f4fbff,#ffffff);border:1px solid #d9eaf4;box-shadow:var(--shadow-sm)}
.focus-guide>span,.action-card.primary>span{background:#e7f6ff;color:#2795d3}
.focus-guide>small,.focus-guide p,.action-card.primary p{color:#74879a}
.focus-guide h3,.action-card.primary h3{color:#163048}
.quick-action-panel{background:linear-gradient(145deg,#f5fbff,#fff 60%,#f3fbf8)}

/* Light login matching the product */
.login-screen{background:#f5faff}
.login-art{color:#14273a;background:linear-gradient(145deg,#f7fcff 0%,#eaf7ff 60%,#f2fbf8 100%);border-right:1px solid #dcebf4}
.login-art:before,.login-art:after{border-color:rgba(55,163,226,.12)}
.login-brand strong{color:#13273a}.login-brand small{color:#6f8799}
.signal{color:#5f7f95}.signal i{background:#36b69e}
.login-copy h1{color:#11283b}.login-copy h1 em{color:#2f9edc}.login-copy>p{color:#687e91}
.login-flow{border-color:#d6e8f2}.login-flow>div{border-right-color:#dbe9f1}.login-flow b{color:#78a8c4}.login-flow span{color:#254057}.login-flow small{color:#71879a}
.login-foot{color:#6f8395}
.login-form-wrap{background:#fff}
.login-card{border-color:#dbe9f2;box-shadow:0 24px 70px rgba(35,83,113,.09)}
.login-card-head h2{color:#10263a}.login-card-head p{color:#73869a}
.login-demo{background:#f6fbfe;border-color:#dceaf2}

/* Larger clinical/data typography */
.data-table th{font-size:10.5px}.data-table td{font-size:12.5px}.data-table td>b,.subtle-strong,.person-cell b{font-size:12.5px}
.field>span{font-size:11.5px}.field>small{font-size:10.3px}input,select,textarea{font-size:12.5px}
.status{font-size:9.8px}.queue-main strong{font-size:12.5px}.queue-main small{font-size:10.2px}

/* Responsive dashboard */
@media(max-width:1320px){
  .admin-primary-grid{grid-template-columns:minmax(0,1.4fr) minmax(330px,.8fr)}
  .admin-attention-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1080px){
  .app-shell{grid-template-columns:1fr}.main-shell{grid-column:1}.sidebar{transform:translateX(-100%);transition:transform .22s ease}.sidebar.sidebar-open{transform:translateX(0);box-shadow:24px 0 60px rgba(26,58,82,.15)}
  .admin-welcome{grid-template-columns:1fr}.admin-welcome-actions{width:auto;grid-template-columns:repeat(3,minmax(0,1fr))}.admin-primary-grid,.admin-secondary-grid,.admin-bottom-grid{grid-template-columns:1fr}.content{padding:28px 24px 60px}
}
@media(max-width:760px){
  .content{padding:22px 14px 48px}.topbar{padding:0 14px}.admin-welcome{padding:22px;border-radius:18px}.admin-welcome h1{font-size:31px}.admin-welcome-meta{display:grid;grid-template-columns:1fr}.admin-welcome-actions{grid-template-columns:1fr}.admin-kpi-grid{grid-template-columns:1fr 1fr}.admin-attention-grid{grid-template-columns:1fr 1fr}.performance-summary{grid-template-columns:1fr}.admin-quick-grid{grid-template-columns:1fr}.admin-schedule-list>div{grid-template-columns:64px 34px 1fr}.admin-schedule-list .status{grid-column:3}.admin-recent-list>div{grid-template-columns:34px 1fr auto}.admin-recent-list .flag-row{grid-column:2/4}.admin-recent-list>div>span:last-child{grid-column:2/4}
}
@media(max-width:520px){
  .admin-kpi-grid,.admin-attention-grid{grid-template-columns:1fr}.admin-flow-row{grid-template-columns:36px 1fr 34px}.admin-flow-track{grid-column:2/4}.admin-welcome p{font-size:13px}
}

/* =============================================================
   V12 REFERENCE PRO UI
   Clean light SaaS shell inspired by the supplied dashboard ref.
   One visual language across all roles.
   ============================================================= */
:root{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#eef4fb;
  --ink:#111827;
  --ink-2:#374151;
  --muted:#7b8798;
  --line:#e7edf5;
  --line-strong:#dbe4ef;
  --blue:#2563eb;
  --blue-2:#3b82f6;
  --blue-soft:#eef5ff;
  --good:#15a36d;
  --warn:#e09b28;
  --danger:#df5e72;
  --shadow-sm:0 1px 2px rgba(15,23,42,.025),0 5px 18px rgba(15,23,42,.035);
  --shadow-md:0 16px 42px rgba(15,23,42,.075);
  --shadow-lg:0 28px 80px rgba(15,23,42,.14);
  --radius:16px;
  --radius-sm:11px;
  --role:#2563eb!important;
  --role-soft:#eef5ff!important;
}
html{background:var(--bg)}
body{
  background:var(--bg)!important;
  color:var(--ink);
  font-family:Inter,"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif!important;
  font-size:14px;
  letter-spacing:-.01em;
}
.app-shell{grid-template-columns:232px minmax(0,1fr)}
.sidebar{
  width:232px;
  color:#4b5563;
  background:#fff!important;
  border-right:1px solid var(--line)!important;
  box-shadow:none!important;
}
.side-brand{height:72px;padding:0 17px;border-bottom:1px solid var(--line)!important;gap:10px}
.brand-symbol{width:34px;height:34px;border-radius:10px;color:#fff;background:linear-gradient(145deg,#2563eb,#3b82f6);box-shadow:0 8px 18px rgba(37,99,235,.16)}
.brand-logo{background:#fff;border:1px solid var(--line);box-shadow:none;overflow:hidden}
.side-brand strong{font-size:15px;color:#111827!important;font-weight:760;letter-spacing:-.35px}
.side-brand small{font-size:8.5px;color:#a0a8b5!important;letter-spacing:1.25px}
.role-card{margin:12px 12px 3px;padding:10px 11px;background:#f8fbff!important;border:1px solid #edf3fa!important;border-radius:12px;box-shadow:none}
.role-icon{width:32px;height:32px;border-radius:9px;background:#eef5ff!important;color:#2563eb!important;box-shadow:none!important}
.role-card small{font-size:8px;color:#9aa5b4!important;letter-spacing:1px}
.role-card strong{font-size:11.5px;color:#263244!important}
.role-card span:not(.role-icon){font-size:9.5px;color:#9aa5b4!important}
.side-nav{padding:7px 10px 14px;scrollbar-color:#dce5f0 transparent}
.nav-group{padding:16px 9px 7px;font-size:8px;color:#9ba6b5;letter-spacing:1.35px}
.nav-item{height:40px;padding:0 9px;gap:9px;border-radius:9px;color:#667085}
.nav-item>span{width:27px;height:27px;border-radius:8px;color:#7f8b9d}
.nav-item b{font-size:12px;font-weight:620}
.nav-item:hover{background:#f6f9fd;color:#1f2937;transform:none}
.nav-item.active{color:#2563eb;background:#edf5ff!important;box-shadow:none!important}
.nav-item.active>span{background:transparent!important;color:#2563eb!important;box-shadow:none!important}
.nav-item.active>i{left:0;right:auto;width:3px;height:22px;border-radius:0 3px 3px 0;background:#2563eb}
.side-bottom{padding:12px 12px 15px;background:#fff!important;border-top:1px solid var(--line)!important}
.user-tile{grid-template-columns:34px 1fr 28px;padding:4px}
.user-tile strong{font-size:11px;color:#2d3748!important}
.user-tile span{font-size:9px;color:#98a2b3!important}
.user-tile button{color:#8793a5}
.user-tile button:hover{background:#f3f6fa;color:#2563eb}
.avatar{background:#e9f4ff!important;color:#1d4ed8!important;box-shadow:none!important}

.main-shell{grid-column:2;background:#f5f7fb}
.topbar{
  height:64px;padding:0 24px;gap:16px;
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)!important;
}
.crumb{font-size:10.5px;color:#98a2b3}
.crumb b{color:#4b5563;font-weight:650}
.global-search{width:min(390px,36vw);height:36px;border-color:#e4ebf3;border-radius:10px;background:#fbfcfe;box-shadow:none}
.global-search span{font-size:10.5px}
kbd{font-size:8.5px;background:#fff}
.live-pill{display:none!important}
.top-user strong{font-size:10.5px;color:#273346}
.top-user span{font-size:8.8px}
.content{width:min(1450px,100%);padding:24px 28px 54px}

/* Generic page system */
.page-title{margin:1px 0 18px;align-items:center}
.page-kicker{font-size:8.5px;color:#2563eb;letter-spacing:1.15px}
.page-title h1{font-size:26px;letter-spacing:-.85px;color:#171f2d}
.page-title p{font-size:11.5px;color:#7b8798}
.panel{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
.panel-head{min-height:62px;padding:13px 16px;border-bottom:1px solid #edf1f6;background:#fff}
.panel-icon{width:31px;height:31px;border-radius:9px;background:#eef5ff;color:#2563eb}
.panel-heading h2{font-size:12.5px;color:#263244;font-weight:720}
.panel-heading p{font-size:9.5px;color:#96a0ae}
.panel-body{padding:16px}
.btn{height:35px;padding:0 12px;border-color:#e0e7f0;border-radius:9px;color:#536174;font-size:10.5px;background:#fff;box-shadow:none}
.btn:hover{border-color:#cfd9e7;color:#1f2937;box-shadow:0 5px 16px rgba(15,23,42,.045);transform:none}
.btn-primary{background:#2563eb!important;border-color:#2563eb!important;color:#fff!important;box-shadow:0 7px 15px rgba(37,99,235,.18)!important}
.btn-primary:hover{background:#1d4ed8!important;border-color:#1d4ed8!important}
.btn-sm{height:30px;font-size:9.5px}
input,select,textarea{border-color:#e2e8f0;border-radius:9px;font-size:11px}
input,select{height:38px}
input:focus,select:focus,textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.field>span{font-size:9.5px;color:#566275}
.data-table th{height:38px;background:#fbfcfe;color:#98a2b3;font-size:8px}
.data-table td{padding:11px 14px;color:#536174;font-size:10.5px}
.data-table tbody tr:hover{background:#fbfdff}
.status{font-size:8px}

/* Generic role dashboards */
.dash-head{margin-bottom:16px;align-items:center}
.dash-head h1{font-size:26px;letter-spacing:-.9px;color:#171f2d}
.dash-head p{font-size:10.5px;color:#98a2b3}
.dash-eyebrow{font-size:8.5px;color:#2563eb;letter-spacing:1.05px}
.metric-grid{gap:12px;margin-bottom:14px}
.metric-card{min-height:118px;padding:15px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
.metric-card:hover{transform:none;box-shadow:0 10px 24px rgba(15,23,42,.055)}
.metric-card:after{display:none}
.metric-head .metric-icon{width:31px;height:31px;border-radius:9px;background:#eef5ff;color:#2563eb}
.metric-card>strong{margin-top:12px;font-size:22px;color:#172033}
.metric-card>b{font-size:9px;color:#677489;letter-spacing:.55px}
.metric-card>p{font-size:9px;color:#98a2b3}
.workspace-grid,.admin-bento,.report-grid,.dashboard-main-grid{gap:12px}
.flow-bar{background:#fff;border-color:var(--line);box-shadow:var(--shadow-sm)}

/* V12 dashboard */
.dashboard-v12{min-height:calc(100vh - 115px)}
.v12-dashboard-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin:2px 0 18px}
.v12-dashboard-head h1{margin:2px 0 3px;font-size:27px;line-height:1.1;letter-spacing:-1px;font-weight:760;color:#171f2d}
.v12-dashboard-head p{margin:0;color:#8b96a6;font-size:10.5px}
.v12-overline{display:block;color:#2563eb;font-size:8.5px;text-transform:uppercase;letter-spacing:1.12px;font-weight:780}
.v12-head-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.v12-date-chip{height:35px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:#fff;display:inline-flex;align-items:center;gap:7px;color:#6d7888;font-size:9.5px;box-shadow:0 1px 1px rgba(15,23,42,.02)}
.v12-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.v12-kpi-card{min-height:112px;padding:15px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.v12-kpi-card>div{display:flex;align-items:center;gap:9px}
.v12-kpi-icon{width:30px;height:30px;border-radius:8px;background:#eef5ff;display:flex;align-items:center;justify-content:center;color:#2563eb}
.v12-kpi-card small{font-size:9px;text-transform:uppercase;letter-spacing:.55px;color:#7f8b9e;font-weight:760}
.v12-kpi-card>strong{display:block;margin-top:13px;font-size:24px;line-height:1;letter-spacing:-.85px;color:#172033;font-weight:760}
.v12-kpi-card>p{margin:7px 0 0;font-size:8.8px;color:#9aa4b2}
.v12-kpi-card>p b{color:#16a36b;font-weight:760}
.v12-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(255px,.62fr);grid-template-areas:"profit active" "profit patients" "table chat";gap:12px;align-items:stretch}
.v12-card{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}
.v12-profit-card{grid-area:profit;min-height:405px;padding:17px 18px 15px}
.v12-active-card{grid-area:active;min-height:194px;padding:15px}
.v12-patients-card{grid-area:patients;min-height:198px;padding:15px;display:flex;flex-direction:column}
.v12-table-card{grid-area:table;min-height:330px;padding:16px 17px 5px}
.v12-chat-card{grid-area:chat;min-height:330px;padding:15px;display:flex;flex-direction:column}
.v12-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.v12-card-head>div>span{display:block;color:#252f3f;font-size:11.5px;font-weight:730}
.v12-card-head>div>h2{margin:13px 0 2px;font-size:27px;line-height:1;letter-spacing:-1px;color:#151d2b}
.v12-card-head>div>p{margin:4px 0 0;color:#9aa4b2;font-size:8.8px}
.v12-card-head>div>p b{color:#16a36b}
.v12-card-head.compact>div>span{font-size:11px}
.v12-more{border:0;background:transparent;color:#9ca6b5;font-size:13px;letter-spacing:2px;cursor:pointer}
.v12-chart-area{height:190px;margin:8px 0 7px}
.v12-chart-area .chart-wrap{height:100%}
.v12-segment-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border:1px solid #edf1f6;border-radius:11px;padding:9px;background:#fbfcfe}
.v12-tiny-stat{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:8px;padding:4px 8px;border-right:1px solid #edf1f6}
.v12-tiny-stat:last-child{border-right:0}
.v12-tiny-icon{width:29px;height:29px;border-radius:8px;background:#eef5ff;color:#2563eb;display:flex;align-items:center;justify-content:center}
.v12-tiny-stat>div{display:grid}
.v12-tiny-stat small{font-size:8px;color:#9aa4b2}
.v12-tiny-stat strong{font-size:12.5px;color:#334155}
.v12-tiny-stat em{font-size:7.8px;color:#a1aab8;font-style:normal}
.v12-day-bars{height:130px;margin-top:13px;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end}
.v12-day-bar{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;position:relative}
.v12-day-bar b{width:18px;min-height:16px;max-height:93px;border-radius:5px 5px 3px 3px;background:#e8edf4;transition:.2s ease}
.v12-day-bar.active b{background:#2563eb;box-shadow:0 6px 12px rgba(37,99,235,.2)}
.v12-day-bar span{font-size:7.5px;color:#9ca6b4}
.v12-day-bar small{position:absolute;top:0;font-size:7.4px;color:#768295;opacity:0}
.v12-day-bar:hover small{opacity:1}
.v12-ring-wrap{display:flex;justify-content:center;align-items:center;flex:1;padding-top:3px}
.v12-ring{width:112px;height:112px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;transform:rotate(-90deg)}
.v12-ring:after{content:"";position:absolute;width:83px;height:83px;border-radius:50%;background:#fff}
.v12-ring>div{position:relative;z-index:2;display:grid;text-align:center;transform:rotate(90deg)}
.v12-ring strong{font-size:22px;line-height:1;color:#172033;letter-spacing:-.8px}
.v12-ring span{margin-top:5px;font-size:7.5px;color:#98a2b3}
.v12-outline-action{height:27px;margin:2px auto 0;padding:0 10px;border:1px solid #e1e7ef;border-radius:7px;background:#fff;color:#667085;font-size:8.5px;cursor:pointer}
.v12-patient-table{margin-top:12px}
.v12-table-head,.v12-table-row{display:grid;grid-template-columns:minmax(220px,1.2fr) .55fr .62fr .5fr;align-items:center;gap:10px}
.v12-table-head{height:31px;border-bottom:1px solid #edf1f6;color:#a0a9b7;font-size:7.5px;text-transform:uppercase;letter-spacing:.6px;font-weight:760}
.v12-table-row{min-height:48px;border-bottom:1px solid #f0f3f7;color:#657185;font-size:9.5px}
.v12-table-row:last-child{border-bottom:0}
.v12-patient-cell{display:flex;align-items:center;gap:8px;min-width:0}
.v12-patient-cell .avatar{width:29px;height:29px;border-radius:8px;font-size:8.5px}
.v12-patient-cell>div{display:grid;min-width:0}
.v12-patient-cell b{font-size:9.8px;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v12-patient-cell small{font-size:8px;color:#9aa4b2}
.v12-chat-online{display:flex!important;align-items:center;gap:5px;color:#15a36d!important;font-size:8px!important;font-weight:700!important}
.v12-chat-online i{width:5px;height:5px;border-radius:50%;background:#15a36d}
.v12-chat-orb{height:74px;margin-top:8px;display:flex;align-items:center;justify-content:center}
.v12-chat-orb span{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#87b5ff 0%,#3b82f6 35%,#2563eb 68%,#1d4ed8 100%);box-shadow:0 15px 28px rgba(37,99,235,.24),inset -9px -10px 16px rgba(7,42,133,.22)}
.v12-chat-messages{display:grid;gap:6px;min-height:86px;overflow:hidden}
.v12-chat-messages>div{display:grid;padding:7px 8px;border-radius:8px;background:#f8fafc}
.v12-chat-messages b{font-size:8px;color:#485569}
.v12-chat-messages span{margin-top:2px;font-size:8px;line-height:1.35;color:#8b96a6}
.v12-chat-input{height:34px;margin-top:auto;padding:0 5px 0 9px;border:1px solid #e3e9f1;border-radius:9px;background:#fbfcfe;display:flex;align-items:center;gap:6px;color:#a1aab7}
.v12-chat-input input{height:28px;border:0;background:transparent;box-shadow:none!important;padding:0;font-size:8.5px}
.v12-chat-input button{width:25px;height:25px;border:0;border-radius:50%;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.v12-extra-widgets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.v12-extra-card{min-height:86px;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fff;display:grid;grid-template-columns:34px 1fr 24px;align-items:center;gap:9px;box-shadow:var(--shadow-sm)}
.v12-extra-card>span{width:34px;height:34px;border-radius:9px;background:#eef5ff;color:#2563eb;display:flex;align-items:center;justify-content:center}
.v12-extra-card>div{display:grid}
.v12-extra-card small{font-size:8px;color:#98a2b3}
.v12-extra-card strong{font-size:17px;color:#263244;line-height:1.15}
.v12-extra-card p{margin:2px 0 0;font-size:7.8px;color:#a1aab8}
.v12-extra-card>button{width:24px;height:24px;border:0;border-radius:7px;background:#f7f9fc;color:#a0a9b6;display:flex;align-items:center;justify-content:center;cursor:pointer}
.v12-widget-layer{position:fixed;inset:0;z-index:120;background:rgba(15,23,42,.30);backdrop-filter:blur(2px);display:flex;justify-content:flex-end;padding:18px}
.v12-widget-drawer{width:min(390px,calc(100vw - 32px));height:calc(100vh - 36px);border:1px solid #e1e7ef;border-radius:16px;background:#fff;box-shadow:0 28px 80px rgba(15,23,42,.22);overflow:auto}
.v12-widget-head{height:66px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf1f6}
.v12-widget-head small{font-size:8px;color:#9ba5b3;text-transform:uppercase;letter-spacing:1px}
.v12-widget-head h2{margin:1px 0 0;font-size:15px;color:#202938}
.v12-widget-head button{width:28px;height:28px;border:0;border-radius:8px;background:#f7f9fc;color:#7f8a9b;display:flex;align-items:center;justify-content:center;cursor:pointer}
.v12-widget-list{padding:12px;display:grid;gap:9px}
.v12-widget-option{min-height:86px;padding:11px;border:1px solid #e7edf5;border-radius:12px;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px}
.v12-widget-preview{width:52px;height:52px;border-radius:12px;background:#f4f8ff;color:#2563eb;display:flex;align-items:center;justify-content:center}
.v12-widget-option>div{display:grid}
.v12-widget-option b{font-size:9.5px;color:#344054}
.v12-widget-option p{margin:3px 0;font-size:8px;line-height:1.35;color:#98a2b3}
.v12-widget-option small{width:max-content;padding:3px 6px;border-radius:5px;background:#f5f7fa;color:#8b95a5;font-size:7px}
.v12-widget-option>button{height:25px;padding:0 9px;border:0;border-radius:7px;background:#2563eb;color:#fff;font-size:7.8px;font-weight:700;cursor:pointer}
.v12-widget-option>button.selected{background:#eef5ff;color:#2563eb}

/* Login aligned to the same product language */
.login-screen{background:#f5f7fb!important}
.login-art{background:linear-gradient(145deg,#f8fbff 0%,#eef5ff 100%)!important;color:#111827!important;border-right:1px solid #e4ebf4}
.login-art:before,.login-art:after{border-color:#d9e8fb!important;box-shadow:none!important}
.login-brand strong{color:#111827!important}
.login-brand small,.signal,.login-copy>p,.login-foot{color:#76869a!important}
.signal i{background:#2563eb;box-shadow:0 0 0 6px rgba(37,99,235,.08)}
.login-copy h1{color:#111827!important}
.login-copy h1 em{color:#2563eb!important}
.login-flow{border-color:#dbe7f5!important}
.login-flow>div{border-color:#dbe7f5!important}
.login-flow b{color:#2563eb!important}
.login-flow span{color:#2d3748!important}
.login-flow small{color:#8b96a6!important}
.login-form-wrap{background:#fff!important}
.login-card{box-shadow:0 20px 50px rgba(15,23,42,.07)!important;border:1px solid #e6edf5!important}
.login-button{background:#2563eb!important;box-shadow:0 12px 24px rgba(37,99,235,.2)!important}
.login-demo>svg{color:#2563eb}

/* Responsive */
@media (max-width:1180px){
  .app-shell{grid-template-columns:214px minmax(0,1fr)}
  .sidebar{width:214px}
  .content{padding:22px 22px 48px}
  .v12-dashboard-grid{grid-template-columns:minmax(0,1.4fr) minmax(235px,.65fr)}
  .v12-extra-widgets{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .app-shell{display:block}
  .sidebar{width:238px;transform:translateX(-102%);transition:transform .2s ease;box-shadow:18px 0 48px rgba(15,23,42,.12)!important}
  .sidebar.sidebar-open{transform:translateX(0)}
  .main-shell{grid-column:auto}
  .mobile-menu{display:flex}
  .crumb{display:none}
  .global-search{width:min(430px,55vw);margin-left:0}
  .content{padding:20px 18px 42px}
  .v12-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v12-dashboard-grid{grid-template-columns:1fr 1fr;grid-template-areas:"profit profit" "active patients" "table table" "chat chat"}
  .v12-chat-card{min-height:280px}
}
@media (max-width:700px){
  .topbar{height:58px;padding:0 12px}
  .global-search{flex:1;width:auto}
  .global-search kbd,.top-user>div{display:none}
  .content{padding:16px 12px 34px}
  .v12-dashboard-head{align-items:flex-start;flex-direction:column}
  .v12-head-actions{justify-content:flex-start;width:100%}
  .v12-date-chip{width:100%;justify-content:center}
  .v12-kpi-grid{grid-template-columns:1fr}
  .v12-dashboard-grid{grid-template-columns:1fr;grid-template-areas:"profit" "active" "patients" "table" "chat"}
  .v12-profit-card{min-height:auto}
  .v12-chart-area{height:160px}
  .v12-segment-row{grid-template-columns:1fr}
  .v12-tiny-stat{border-right:0;border-bottom:1px solid #edf1f6;padding:7px 4px}
  .v12-tiny-stat:last-child{border-bottom:0}
  .v12-table-head{display:none}
  .v12-table-row{grid-template-columns:1fr auto;gap:7px;padding:9px 0}
  .v12-table-row>span:nth-child(3),.v12-table-row>span:nth-child(4){display:none}
  .v12-extra-widgets{grid-template-columns:1fr}
  .metric-grid{grid-template-columns:1fr 1fr!important}
  .workspace-grid,.admin-bento,.report-grid,.dashboard-main-grid,.one-focus{grid-template-columns:1fr!important}
  .page-title{align-items:flex-start;flex-direction:column}
  .page-actions{width:100%;flex-wrap:wrap}
}
@media (max-width:470px){
  .metric-grid{grid-template-columns:1fr!important}
  .global-search span{display:none}
  .v12-widget-layer{padding:8px}
  .v12-widget-drawer{height:calc(100vh - 16px);width:calc(100vw - 16px)}
}


/* V12.1 LIGHT REFERENCE REFINEMENT */
.app-shell{grid-template-columns:248px minmax(0,1fr);background:#F3F6FB}
.sidebar{width:248px;background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFE 100%);border-right:1px solid #E6EDF5;box-shadow:none}
.side-brand{height:78px;padding:0 18px;border-bottom:1px solid #EEF2F7}
.side-brand strong{color:#132236}.side-brand small{color:#96A3B1}
.role-card{margin:14px 12px 8px;padding:12px;background:#F8FBFF;border:1px solid #E4EDF6;box-shadow:none}
.role-icon{background:linear-gradient(145deg,#EAF5FF,#EFFBFA);color:#1787D4;box-shadow:inset 0 0 0 1px #D9ECFA}
.role-card small{color:#7E8B99}.role-card span:not(.role-icon){color:#9AA7B6}
.side-nav{padding:4px 10px 16px}.nav-group{padding:15px 12px 7px;color:#A0ACB7;font-size:8.1px;letter-spacing:1.4px}
.nav-item{height:43px;padding:0 10px;border-radius:12px;color:#5C6C7D}.nav-item>span{width:30px;height:30px;border-radius:10px;background:#F3F7FB;color:#7C8FA4}
.nav-item b{font-size:12px;font-weight:650;color:#24374A}.nav-item:hover{background:#F7FAFD}
.nav-item.active{background:#EEF5FF;box-shadow:inset 0 0 0 1px #D9E8FF;color:#163B63}.nav-item.active>span{background:linear-gradient(145deg,#4DA8FF,#2D7EF8);box-shadow:none;color:#fff}.nav-item.active>b{color:#163B63}.nav-item.active>i{background:#4DA8FF;box-shadow:0 0 0 4px rgba(77,168,255,.12)}
.side-bottom{padding:12px;background:#FFF;border-top:1px solid #EEF2F7}.user-tile strong{color:#1D3043}.user-tile small{color:#8A98A8}
.topbar{height:70px;padding:0 26px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border-bottom:1px solid #E4ECF3;box-shadow:none}
.global-search{height:42px;border-color:#DCE7F0;background:#fff;box-shadow:none}
.content{width:min(1560px,100%);padding:26px 28px 64px}
.dashboard-v12{display:grid;gap:14px}.v12-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 2px}.v12-toolbar-left{display:grid;gap:4px}.v12-toolbar-left h1{margin:0;color:#17263A;font-size:30px;line-height:1.05;letter-spacing:-1px;font-weight:760}.v12-toolbar-sub{display:block;color:#8391A0;font-size:11px;font-weight:540}.v12-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.v12-date-chip{height:38px;padding:0 12px;border:1px solid #DEE7F0;border-radius:10px;background:#fff;color:#708193;font-size:10px;box-shadow:none}
.v12-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.v12-kpi-card,.v12-card{background:#fff;border:1px solid #E5ECF3;box-shadow:0 8px 22px rgba(17,38,68,.04)}.v12-kpi-card{min-height:108px;border-radius:18px;padding:16px 18px}.v12-kpi-card strong{font-size:28px;color:#16263A;letter-spacing:-.8px}.v12-kpi-card p{font-size:10px;color:#8A97A6}.v12-kpi-card p b{color:#2C7BE5}.v12-kpi-card small{font-size:10px;color:#8B98A6;font-weight:600}.v12-kpi-icon{background:#EEF6FF;color:#2B7FF3}
.v12-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.78fr);grid-template-areas:"profit active" "profit patients" "table chat";gap:12px;align-items:stretch}.v12-card{border-radius:20px}.v12-card-head{padding:18px 18px 0}.v12-card-head span{color:#17263A;font-size:12px;font-weight:700}.v12-card-head p{color:#92A0AD;font-size:10px}.v12-card-head h2{margin:6px 0 0;color:#18283B;font-size:34px;letter-spacing:-1.2px}.v12-more{width:30px;height:30px;border:1px solid #E8EDF3;border-radius:10px;background:#F9FBFD;color:#96A2AE}.v12-chart-area{padding:4px 10px 8px}.v12-segment-row{padding:6px 14px 16px}.v12-tiny-stat{padding:12px;border:1px solid #EDF2F6;background:#FAFCFE;border-radius:14px}.v12-tiny-icon{background:#EEF6FF;color:#2B7FF3}
.v12-day-bars{padding:16px 16px 18px;min-height:208px}.v12-day-bar b{background:linear-gradient(180deg,#8EC6FF 0%,#2F80F7 100%)}.v12-day-bar.active b{background:linear-gradient(180deg,#5AABFF 0%,#1E63E9 100%)}.v12-ring-wrap{padding:8px 0 14px}.v12-ring{width:188px;height:188px;box-shadow:inset 0 0 0 14px #fff, 0 8px 18px rgba(25,49,86,.04)}.v12-outline-action{margin:0 auto 18px}.v12-patient-table{padding:8px 16px 16px}.v12-table-head,.v12-table-row{grid-template-columns:minmax(180px,1.2fr) 110px 120px 120px}.v12-table-row{min-height:58px;border-bottom:1px solid #EEF2F6}.v12-table-row:last-child{border-bottom:0}
.v12-chat-card{overflow:hidden}.v12-chat-orb{padding-top:4px}.v12-chat-orb span{width:74px;height:74px;background:radial-gradient(circle at 38% 30%,#7EC2FF 0%,#2C7EF3 60%,#1D57CC 100%);box-shadow:0 18px 34px rgba(44,126,243,.22)}.v12-chat-messages{padding:4px 16px 8px;gap:8px}.v12-chat-messages>div{padding:10px 12px;border:1px solid #EAF0F5;border-radius:13px;background:#FBFCFE}.v12-chat-input{margin:0 16px 16px;border:1px solid #E2EAF1;background:#fff}
.v12-extra-widgets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.v12-extra-card{border:1px solid #E5ECF3;background:#fff;box-shadow:0 6px 18px rgba(20,41,72,.04)}.v12-widget-drawer{background:#fff;border-left:1px solid #E8EEF5}.v12-widget-option{border-color:#EEF2F6;background:#fff}.v12-widget-option button{background:#2F80F7}
@media(max-width:1180px){.v12-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v12-extra-widgets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:920px){.sidebar{box-shadow:24px 0 48px rgba(13,37,67,.12)}.content{padding:22px 18px 42px}}
@media(max-width:700px){.v12-toolbar{flex-direction:column;align-items:flex-start}.v12-head-actions{width:100%;justify-content:flex-start}.v12-kpi-grid,.v12-extra-widgets{grid-template-columns:1fr}.v12-dashboard-grid{grid-template-columns:1fr;grid-template-areas:"profit" "active" "patients" "table" "chat"}.v12-date-chip{width:auto}}


/* V12.2 Clinic Admin Control Center */
.admin-control-center{gap:14px}
.admin-overview-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.admin-overview-kpis .v12-kpi-card{min-height:104px;padding:14px 15px}
.admin-overview-kpis .v12-kpi-card strong{font-size:22px}
.admin-dashboard-tabs{display:flex;align-items:center;gap:5px;padding:5px;border:1px solid #E3EAF2;background:#fff;border-radius:13px;width:max-content;box-shadow:0 4px 14px rgba(17,38,68,.035)}
.admin-dashboard-tabs button{height:34px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:#748394;font-size:10px;font-weight:700;cursor:pointer}
.admin-dashboard-tabs button.active{background:#EAF3FF;color:#246FCF;box-shadow:inset 0 0 0 1px #D7E8FF}
.admin-tab-stack{display:grid;gap:12px}
.admin-top-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.72fr);gap:12px}
.admin-performance-card .v12-chart-area{min-height:205px}
.admin-schedule-list{padding:6px 16px 14px;display:grid}
.admin-schedule-list>div{min-height:57px;display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:9px;align-items:center;border-bottom:1px solid #EEF2F6}
.admin-schedule-list>div:last-child{border-bottom:0}.time-box{font-size:9.5px;font-weight:750;color:#2D6FC6}.admin-schedule-list b{display:block;font-size:10.5px;color:#26394C}.admin-schedule-list small{display:block;margin-top:2px;font-size:8.7px;color:#8B98A5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-count{min-width:27px;height:27px;padding:0 7px;border-radius:9px;background:#EEF5FF;color:#2E75D1;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.admin-department-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.admin-dept-card{min-height:94px;padding:14px;border:1px solid #E5ECF3;border-radius:16px;background:#fff;box-shadow:0 6px 18px rgba(21,42,71,.035);display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}.admin-dept-card>span{width:34px;height:34px;border-radius:10px;background:#EEF6FF;color:#2F80F7;display:flex;align-items:center;justify-content:center}.admin-dept-card small{display:block;color:#8593A2;font-size:8.5px;text-transform:uppercase;letter-spacing:.55px;font-weight:750}.admin-dept-card strong{display:block;margin-top:3px;color:#17283B;font-size:20px}.admin-dept-card p{margin:3px 0 0;color:#8795A4;font-size:8.7px;line-height:1.35}
.admin-data-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr);gap:12px}.admin-invoice-list{padding:7px 14px 14px;display:grid}.admin-invoice-list button{min-height:57px;padding:8px 2px;display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:9px;align-items:center;border:0;border-bottom:1px solid #EEF2F6;background:transparent;text-align:left;cursor:pointer}.admin-invoice-list button:last-child{border-bottom:0}.admin-invoice-list button:hover{background:#FAFCFE}.invoice-icon{width:32px;height:32px;border-radius:10px;background:#EEF6FF;color:#2F80F7;display:flex;align-items:center;justify-content:center}.admin-invoice-list b{display:block;color:#263A4D;font-size:10.5px}.admin-invoice-list small{display:block;margin-top:2px;color:#8B98A6;font-size:8.7px}.admin-invoice-list>button>strong{color:#263A4D;font-size:10px}
.patient-flow-strip{min-height:88px;padding:14px 18px;border:1px solid #E4EBF2;border-radius:17px;background:#fff;display:grid;grid-template-columns:repeat(9,auto);align-items:center;justify-content:space-between;gap:12px;box-shadow:0 6px 18px rgba(20,42,72,.03)}.patient-flow-strip>div{display:grid;gap:3px;min-width:90px}.patient-flow-strip span{color:#8895A3;font-size:9px}.patient-flow-strip strong{color:#17283B;font-size:22px}.patient-flow-strip i{width:46px;height:1px;background:#DDE7F0;position:relative}.patient-flow-strip i:after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid #A8B8C8;border-right:1px solid #A8B8C8;transform:rotate(45deg)}.admin-status-list{padding:11px 17px 16px;display:grid;gap:8px}.admin-status-list>div{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #EEF2F6}.admin-status-list>div:last-child{border-bottom:0}.admin-status-list strong{font-size:16px;color:#22364B}
.admin-finance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.finance-summary{padding:17px 18px;border:1px solid #E5ECF3;border-radius:17px;background:#fff}.finance-summary small{color:#8493A2;font-size:9px;font-weight:700}.finance-summary strong{display:block;margin:7px 0 4px;color:#16283B;font-size:27px;letter-spacing:-.8px}.finance-summary span{color:#8795A3;font-size:9px}
.branch-overview-list{padding:8px 16px 15px;display:grid}.branch-overview-list>div{min-height:58px;display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:10px;align-items:center;border-bottom:1px solid #EEF2F6}.branch-overview-list>div:last-child{border-bottom:0}.branch-badge{width:32px;height:32px;border-radius:10px;background:#EEF6FF;color:#2F80F7;display:flex;align-items:center;justify-content:center}.branch-overview-list b{display:block;font-size:10.5px}.branch-overview-list small{display:block;color:#8B98A6;font-size:8.7px}.branch-overview-list strong{font-size:9.5px;color:#52667A}.branch-overview-list em{font-style:normal;font-size:9.5px;color:#257A67;font-weight:750}.admin-activity-feed{padding:4px 16px 13px}
@media(max-width:1350px){.admin-overview-kpis,.admin-department-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){.admin-top-grid,.admin-data-grid{grid-template-columns:1fr}.patient-flow-strip{grid-template-columns:repeat(5,1fr)}.patient-flow-strip i{display:none}.admin-finance-grid{grid-template-columns:1fr}}
@media(max-width:700px){.admin-overview-kpis,.admin-department-grid{grid-template-columns:1fr 1fr}.admin-dashboard-tabs{width:100%;overflow:auto}.admin-dashboard-tabs button{white-space:nowrap}.patient-flow-strip{grid-template-columns:1fr 1fr}.admin-invoice-list button{grid-template-columns:34px 1fr auto}.admin-invoice-list button>.status{display:none}.branch-overview-list>div{grid-template-columns:34px 1fr}.branch-overview-list>div>strong,.branch-overview-list>div>em{grid-column:2}}

/* V12.3 POS print, returns, and pharmacy analytics */
.table-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.inline-number{width:82px;height:36px;border:1px solid #dce5ee;border-radius:9px;padding:0 9px;background:#fff;color:#22354a;font:inherit}
.return-sale-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.return-sale-summary>div{padding:13px 15px;border:1px solid #e4ebf2;border-radius:13px;background:#f9fbfd;display:flex;align-items:center;justify-content:space-between}
.return-sale-summary span{font-size:10px;color:#8190a0}.return-sale-summary b{font-size:17px;color:#172a3d}
.simple-bars{display:grid;gap:12px;padding:4px 0}
.simple-bar-row{display:grid;grid-template-columns:minmax(90px,130px) minmax(0,1fr) 58px;align-items:center;gap:10px}
.simple-bar-row>span{font-size:10px;color:#5f7183;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.simple-bar-row>div{height:8px;border-radius:99px;background:#edf3f8;overflow:hidden}
.simple-bar-row>div>b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7dc1ff,#2f80f7)}
.simple-bar-row>strong{font-size:10px;color:#263b4f;text-align:right}
.pharmacy-dashboard-pro{display:grid;gap:14px}
.pharmacy-chart-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.8fr);gap:14px}
.pharmacy-chart-grid.second{grid-template-columns:minmax(320px,.75fr) minmax(0,1.3fr)}
.pharmacy-risk-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.pharmacy-risk-summary span{padding:11px 10px;border:1px solid #e5edf4;border-radius:12px;background:#fafcfe;font-size:9px;color:#77899a;text-align:center}
.pharmacy-risk-summary b{display:block;margin-bottom:2px;font-size:17px;color:#193148}
.pharmacy-quick-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pharmacy-quick-strip>button{min-height:84px;padding:14px;border:1px solid #e1eaf2;border-radius:15px;background:#fff;display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;box-shadow:0 5px 18px rgba(18,45,75,.035)}
.pharmacy-quick-strip>button:hover{border-color:#bddcf7;background:#f8fbff;transform:translateY(-1px)}
.pharmacy-quick-strip>button>span{width:38px;height:38px;border-radius:11px;background:#edf6ff;color:#2f80f7;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pharmacy-quick-strip b{display:block;color:#20364b;font-size:11px}.pharmacy-quick-strip small{display:block;margin-top:3px;color:#8796a5;font-size:9px;line-height:1.35}
@media(max-width:1050px){.pharmacy-chart-grid,.pharmacy-chart-grid.second{grid-template-columns:1fr}.pharmacy-quick-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.pharmacy-quick-strip,.pharmacy-risk-summary{grid-template-columns:1fr}.simple-bar-row{grid-template-columns:90px minmax(0,1fr) 48px}.table-actions{min-width:160px}}

/* ======================================================================
   V12.4 PRE-LIVE POLISH: HealthDoor login, eye management, reports
   ====================================================================== */
.login-screen{grid-template-columns:minmax(560px,1.08fr) minmax(430px,.82fr)!important;background:#F5F8FC!important}
.login-art{position:relative!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;padding:38px 4.5vw 34px!important;background:
  linear-gradient(180deg,rgba(10,31,54,.04),rgba(10,31,54,.18)),
  url('../../assets/images/login-clinic-hero-green.webp') center/cover no-repeat!important;
  color:#10253A!important;border-right:1px solid #E2EAF2!important}
.login-art:before{content:""!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;right:0!important;top:0!important;border:0!important;border-radius:0!important;background:linear-gradient(90deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.62) 42%,rgba(255,255,255,.10) 100%)!important;box-shadow:none!important;opacity:1!important}
.login-art:after{display:none!important}
.login-brand,.login-copy,.login-foot{position:relative!important;z-index:2!important}
.login-logo-mark{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;padding:6px;border:1px solid rgba(67,156,216,.15);box-shadow:0 12px 32px rgba(19,70,106,.10)}
.login-logo-mark img{width:100%;height:100%;object-fit:contain}
.login-brand strong{color:#10243A!important;font-size:20px!important}.login-brand small{color:#6E8396!important}
.login-copy{max-width:560px!important;padding:22px 0!important}.login-copy .signal{color:#2A80BD!important;background:rgba(255,255,255,.80)!important;border-color:#D7E8F4!important}.login-copy h1{color:#10243A!important;text-shadow:none!important}.login-copy h1 em{color:#238ECC!important}.login-copy>p{max-width:520px!important;color:#526A7E!important;font-size:13px!important;line-height:1.7!important}
.login-flow>div{background:rgba(255,255,255,.82)!important;border:1px solid rgba(216,232,243,.94)!important;box-shadow:0 10px 28px rgba(20,63,91,.06)!important}.login-flow b{color:#2E92CE!important}.login-flow span{color:#1D3448!important}.login-flow small{color:#758A9A!important}.login-foot{color:#526A7E!important}.login-foot span{background:rgba(255,255,255,.82)!important;border-color:#DCEAF3!important}
.login-form-wrap{background:linear-gradient(180deg,#FFFFFF,#F7FAFD)!important}
.login-card{max-width:470px!important;border-radius:24px!important;border-color:#E0E8F0!important;box-shadow:0 26px 70px rgba(16,50,76,.09)!important}
.login-form-logo{display:block;width:112px;height:72px;object-fit:contain;object-position:left center;margin:0 0 14px}
.login-card-head>span{color:#248FCB!important}.login-card-head h2{font-size:32px!important;color:#10243A!important}.login-card-head p{font-size:13px!important;color:#75889A!important}
.login-button{background:linear-gradient(135deg,#2A9EDB,#2782CE)!important;box-shadow:0 14px 26px rgba(42,144,210,.18)!important}

.admin-eye-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.eye-management-callout{padding:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,#FFFFFF,#F1F9FF);border-color:#D9EAF5}
.eye-management-callout>div{display:flex;align-items:flex-start;gap:14px}.eye-management-callout small{display:block;color:#7B8D9D;font-size:9px;text-transform:uppercase;letter-spacing:.8px}.eye-management-callout h2{margin:4px 0 5px;color:#18334A;font-size:19px}.eye-management-callout p{margin:0;max-width:780px;color:#71869A;font-size:11px;line-height:1.6}.eye-big-icon{width:52px;height:52px;border-radius:16px;background:#EAF7FF;color:#298FCB;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.eye-admin-page{display:grid;gap:16px}.eye-admin-page .data-table td small{display:block;margin-top:3px;color:#8A98A7}

.reports-pro{display:grid;gap:14px}.report-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:5px;background:#F3F7FB;border:1px solid #E3EBF3;border-radius:14px;width:max-content;max-width:100%}.report-tabs button{height:35px;padding:0 13px;border:0;border-radius:10px;background:transparent;color:#718296;font-size:10px;font-weight:680;cursor:pointer}.report-tabs button.active{background:#fff;color:#1E6FBA;box-shadow:0 2px 8px rgba(17,50,80,.07)}.report-tab-content{display:grid;gap:16px}.report-brand{background:#fff;border:1px solid #E3EBF2;border-radius:16px;padding:14px 16px;box-shadow:0 6px 18px rgba(18,48,76,.03)}.report-brand strong{color:#173047;font-size:14px}.report-brand span{color:#8494A3;font-size:10px}.report-metrics{margin-bottom:0}

@media(max-width:1180px){.admin-eye-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:920px){.login-art{display:none!important}.login-screen{grid-template-columns:1fr!important}.admin-eye-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.eye-management-callout{align-items:flex-start;flex-direction:column}.report-tabs{width:100%;overflow:auto;flex-wrap:nowrap}}
@media(max-width:640px){.admin-eye-kpis{grid-template-columns:1fr}.report-tabs button{white-space:nowrap}.login-form-logo{width:96px;height:64px}}

@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff!important;color:#111!important;font-size:10pt!important}
  .no-print,.sidebar,.topbar,.page-actions,.btn,.report-filter,.report-tabs{display:none!important}
  .app-shell,.main-shell,.content{display:block!important;width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
  .reports-pro{display:block!important}.report-brand{border:0!important;border-bottom:1px solid #D9E1E8!important;border-radius:0!important;padding:0 0 10px!important;margin-bottom:12px!important;box-shadow:none!important}
  .report-tab-content{display:block!important}.panel,.metric-card,.v12-card{break-inside:avoid!important;box-shadow:none!important;border:1px solid #DDE4EA!important;margin-bottom:10px!important}
  .metric-grid,.report-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:8px!important}.metric-grid.five{grid-template-columns:repeat(3,1fr)!important}
  .panel-head{min-height:auto!important}.data-table{font-size:8.5pt!important}.rank-list>div{min-height:auto!important;padding:6px 0!important}
}


/* V12.5 admin system-view + report stability */
.react16-stack{display:grid;gap:16px}
.management-links{display:grid;gap:10px;padding:16px 18px 20px}.management-links>div{display:grid;grid-template-columns:38px 1fr;gap:11px;align-items:start;padding:13px;border:1px solid #e7edf4;border-radius:14px;background:#fbfdff}.management-links>div>span{width:38px;height:38px;border-radius:11px;background:#eef6ff;color:#2b7ff3;display:flex;align-items:center;justify-content:center}.management-links b{display:block;color:#21364a;font-size:11.5px}.management-links small{display:block;margin-top:3px;color:#8393a3;font-size:9.5px;line-height:1.5}
.ui-crash-card{width:min(560px,calc(100% - 32px));margin:80px auto;padding:32px;border:1px solid #e2eaf2;border-radius:22px;background:#fff;box-shadow:0 20px 55px rgba(18,44,76,.10);text-align:center}.ui-crash-card .brand-symbol{margin:0 auto 14px}.ui-crash-card h1{margin:0;color:#1b2d41;font-size:24px}.ui-crash-card p{margin:10px auto 18px;color:#77889a;line-height:1.6;font-size:12px;max-width:460px}.ui-crash-card button{height:40px;padding:0 18px;border:0;border-radius:11px;background:#2f80f7;color:white;font-weight:700;cursor:pointer}
.reports-pro .report-tab-content{min-height:340px}.reports-pro .report-tabs{position:relative;z-index:1}.reports-pro .report-brand{display:flex}
@media print{.report-tabs,.report-filter,.topbar,.sidebar,.page-actions,.no-print{display:none!important}.reports-pro{display:block!important}.report-tab-content{display:block!important}.react16-stack{display:block!important}.react16-stack>*{margin-bottom:14px!important}.report-brand{display:flex!important}.panel,.metric-card,.v12-card{break-inside:avoid;box-shadow:none!important}}

/* V12.6 final pharmacy flow */
.pharmacy-workspace-final{display:grid;gap:16px}
.procurement-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:10px;border:1px solid #DCE9F0;border-radius:18px;background:linear-gradient(135deg,#F9FCFE,#F4FAFD);box-shadow:0 8px 28px rgba(12,55,79,.04)}
.procurement-flow button{min-height:66px;padding:10px 12px;border:1px solid transparent;border-radius:13px;background:transparent;display:flex;align-items:center;gap:10px;text-align:left;color:#28475B;cursor:pointer;transition:.18s ease}
.procurement-flow button:hover{background:#fff;border-color:#DCE8EF;transform:translateY(-1px)}
.procurement-flow button.active{background:#fff;border-color:#BFE2F5;box-shadow:0 8px 22px rgba(22,137,207,.09)}
.procurement-flow button>span{width:30px;height:30px;border-radius:10px;background:#E8F6FD;color:#1688CF;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex:0 0 auto}
.procurement-flow button div{display:grid;gap:2px}.procurement-flow button b{font-size:10.5px;color:#173247}.procurement-flow button small{font-size:8.3px;line-height:1.3;color:#8295A3}
.workflow-warning,.workflow-rule{padding:12px 14px;border-radius:13px;font-size:9.7px;line-height:1.5}
.workflow-warning{border:1px solid #F3D8A6;background:#FFF8EA;color:#855B14}.workflow-rule{border:1px solid #CFE7F4;background:#F2FAFE;color:#326276}.workflow-warning b,.workflow-rule b{color:#173247}
.table-action-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.payable-due{color:#B25A30}.remaining-chip{min-height:38px;border:1px solid #D8E7EF;border-radius:10px;background:#F7FBFD;color:#1D617F;display:flex;align-items:center;justify-content:center;font-weight:780;font-size:10px}
.line-editor-row.po.final-po-line{grid-template-columns:minmax(200px,1.25fr) 90px 120px minmax(150px,.8fr) 34px;align-items:center}.line-remove{height:34px;width:34px;border:1px solid #E6DDE0;border-radius:10px;background:#FFF8F9;color:#A85162;display:flex;align-items:center;justify-content:center;cursor:pointer}.line-remove:disabled{opacity:.35;cursor:not-allowed}
.grn-editor{overflow-x:auto}.grn-head,.grn-line.final-grn-line{min-width:940px;grid-template-columns:minmax(150px,1.35fr) 100px 112px 78px 74px 70px 86px 86px 86px}.grn-head{display:grid;gap:6px;padding:0 0 5px;color:#7D909E;font-size:7.7px;text-transform:uppercase;letter-spacing:.45px}.grn-line.final-grn-line>div:first-child{display:grid;align-content:center;min-width:0}.grn-line.final-grn-line>div:first-child b{font-size:9.8px;color:#203A4D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grn-line.final-grn-line>div:first-child small{font-size:8px;color:#8496A3;margin-top:2px}
@media(max-width:980px){.procurement-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.procurement-flow button:last-child{grid-column:1/-1}}
@media(max-width:760px){.procurement-flow{grid-template-columns:1fr}.procurement-flow button:last-child{grid-column:auto}.line-editor-row.po.final-po-line{grid-template-columns:1fr}.grn-head{display:none}.grn-line.final-grn-line{min-width:0;grid-template-columns:1fr 1fr}.grn-line.final-grn-line>div:first-child{grid-column:1/-1}.remaining-chip{min-height:38px}}

/* ======================================================================
   V13 EYECARE UI · 2026 CLINICAL DESIGN SYSTEM
   Tailwind v4 tokens + role-aware ophthalmology workspace polish
   ====================================================================== */
:root{
  --bg:#f5f8fc;
  --surface:#ffffff;
  --surface-2:#f8fbfe;
  --surface-3:#eef4f9;
  --ink:#0b1f33;
  --ink-2:#334a62;
  --muted:#718399;
  --line:#dde7f0;
  --line-strong:#ccd9e6;
  --nav:#07192b;
  --nav-2:#0a2136;
  --nav-3:#0c2942;
  --blue:#2563eb;
  --teal:#0f8f8a;
  --good:#16835d;
  --warn:#b76a0b;
  --danger:#c84f63;
  --shadow-sm:0 1px 2px rgba(10,31,51,.035),0 7px 20px rgba(22,55,86,.035);
  --shadow-md:0 16px 42px rgba(22,55,86,.075),0 2px 8px rgba(22,55,86,.035);
  --shadow-lg:0 28px 80px rgba(7,25,43,.17),0 8px 24px rgba(7,25,43,.08);
  --radius:18px;
  --radius-sm:12px;
}
html{background:var(--bg)}
body{
  color:var(--ink);
  background:
    radial-gradient(circle at 83% -12%,color-mix(in srgb,var(--role,#2563eb) 7%,transparent),transparent 31rem),
    linear-gradient(180deg,#f8fbfe 0,#f5f8fc 240px,#f5f8fc 100%);
  font-size:14.5px;
  letter-spacing:-.005em;
}
:focus-visible{
  outline:2px solid color-mix(in srgb,var(--role,#2563eb) 74%,white);
  outline-offset:2px;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--role,#2563eb) 13%,transparent);
}

/* Clinical frame */
.app-shell{grid-template-columns:266px minmax(0,1fr)}
.sidebar{
  width:266px;
  background:
    radial-gradient(circle at 16% 0%,color-mix(in srgb,var(--role) 22%,transparent),transparent 18rem),
    radial-gradient(circle at 98% 74%,rgba(16,145,139,.14),transparent 20rem),
    linear-gradient(180deg,#07192b 0%,#0a2136 46%,#071a2d 100%);
  border-right-color:rgba(255,255,255,.055);
  box-shadow:14px 0 50px rgba(7,25,43,.06);
}
.side-brand{height:82px;padding:0 20px;border-bottom-color:rgba(255,255,255,.075)}
.brand-symbol{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,var(--role),#0f9f9a);box-shadow:0 10px 28px color-mix(in srgb,var(--role) 24%,transparent)}
.side-brand strong{font-size:17.5px;font-weight:760;letter-spacing:-.45px}
.side-brand small{font-size:9.5px;letter-spacing:1.45px;color:#87a0b8}
.role-card{margin:16px 12px 8px;padding:13px 13px;border-radius:14px;background:rgba(255,255,255,.048);border-color:rgba(255,255,255,.065);box-shadow:none}
.role-icon{width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--role) 75%,#0a2238)}
.role-card small{font-size:9.5px;color:#7992aa}
.role-card strong{font-size:13.2px}
.role-card span:not(.role-icon){font-size:10.5px;color:#8ca2b7}
.side-nav{padding:5px 10px 18px}
.nav-group{padding:18px 10px 7px;font-size:9.5px;color:#607f9b;letter-spacing:1.45px}
.nav-item{height:46px;padding:0 11px;border-radius:12px;gap:10px;color:#adc0d1}
.nav-item>span{width:30px;height:30px;border-radius:9px;color:#91a9bd}
.nav-item b{font-size:13px;font-weight:640;letter-spacing:-.08px}
.nav-item:hover{background:rgba(255,255,255,.05);transform:none}
.nav-item.active{background:linear-gradient(90deg,color-mix(in srgb,var(--role) 28%,transparent),rgba(255,255,255,.035));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--role) 28%,transparent),0 8px 22px rgba(4,15,27,.08)}
.nav-item.active>span{background:color-mix(in srgb,var(--role) 86%,#0c263e);box-shadow:0 7px 18px color-mix(in srgb,var(--role) 21%,transparent)}
.side-bottom{padding:14px 13px 17px;background:rgba(3,14,25,.16)}
.user-tile strong{font-size:12px}.user-tile span{font-size:10px}

.main-shell{grid-column:2}
.topbar{height:72px;padding:0 30px;background:rgba(248,251,254,.88);backdrop-filter:blur(20px) saturate(150%);border-bottom:1px solid rgba(210,223,235,.84)}
.crumb{font-size:12px;color:#8393a6}.crumb b{color:#243a51;font-weight:690}
.global-search{width:min(410px,35vw);height:41px;border-color:#d8e3ed;border-radius:12px;color:#7c8fa3;box-shadow:0 1px 0 rgba(20,52,82,.02)}
.global-search:hover{border-color:color-mix(in srgb,var(--role) 28%,#d5e0ea);box-shadow:0 8px 22px rgba(18,50,81,.05)}
.global-search span{font-size:12px}.live-pill{height:31px;font-size:9.5px;background:#f3fbf8;border-color:#d9eee7;color:#4c7669}
.top-user strong{font-size:11.5px}.top-user span{font-size:10px}
.content{width:min(1540px,100%);padding:31px 34px 72px}

/* Typography and headers */
.page-title{margin-bottom:22px}
.page-kicker,.dash-eyebrow{font-size:10px;letter-spacing:1.25px;color:color-mix(in srgb,var(--role) 74%,#50677e)}
.page-title h1,.dash-head h1,.v12-toolbar-left h1{color:#0b1f33;font-weight:760;letter-spacing:-1.05px}
.page-title h1{font-size:30px}.dash-head h1{font-size:31px}.v12-toolbar-left h1{font-size:32px}
.page-title p,.dash-head p,.v12-toolbar-sub{color:#778a9e;font-size:12px;line-height:1.55}
.dash-head{margin-bottom:20px;align-items:flex-end}
.dash-head-actions,.page-actions,.v12-head-actions{gap:9px}
.v12-date-chip{height:39px;padding:0 13px;border-color:#d8e4ee;border-radius:11px;color:#667d92;font-size:10.5px;box-shadow:0 1px 2px rgba(19,48,77,.025)}

/* Less card-heavy, more data-first */
.metric-grid{gap:11px;margin-bottom:17px}
.metric-card,.v12-kpi-card,.v12-card,.panel,.admin-dept-card,.finance-summary{
  border-color:#dfe8f1;
  box-shadow:0 6px 18px rgba(18,48,77,.035);
}
.metric-card{min-height:138px;padding:18px;border-radius:17px}
.metric-card:hover{transform:none;border-color:color-mix(in srgb,var(--role) 23%,#dbe6f0);box-shadow:0 10px 26px rgba(16,47,77,.055)}
.metric-card:before,.v12-kpi-card:before{
  content:"";position:absolute;left:16px;right:16px;top:0;height:2px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--role),color-mix(in srgb,var(--role) 22%,transparent));opacity:.58;
}
.metric-card:after{background:radial-gradient(circle,color-mix(in srgb,var(--role) 7%,transparent),transparent 68%)}
.metric-icon,.v12-kpi-icon,.panel-icon,.invoice-icon,.branch-badge{background:var(--role-soft);color:var(--role)}
.metric-head small{font-size:10px}.metric-card>strong{font-size:26px;color:#10263b}.metric-card>b{font-size:10.5px;color:#53677b}.metric-card>p{font-size:10.5px;color:#8695a5}
.v12-kpi-grid,.admin-overview-kpis{gap:10px}
.v12-kpi-card{position:relative;min-height:112px;padding:16px 17px;border-radius:16px;overflow:hidden}
.v12-kpi-card small{font-size:10.5px;color:#75889c;text-transform:none;letter-spacing:0;font-weight:650}
.v12-kpi-card strong{font-size:27px;color:#10263b}.v12-kpi-card p{font-size:10.5px;color:#8191a2}.v12-kpi-card p b{color:var(--role)}
.admin-overview-kpis .v12-kpi-card{min-height:108px;padding:15px 16px}
.admin-overview-kpis .v12-kpi-card strong{font-size:23px}

/* Tabs */
.admin-dashboard-tabs,.report-tabs{padding:4px;border-color:#dce7f0;border-radius:12px;background:#eef4f9;box-shadow:none}
.admin-dashboard-tabs button,.report-tabs button{height:36px;padding:0 14px;border-radius:9px;font-size:10.5px;color:#667b90}
.admin-dashboard-tabs button.active,.report-tabs button.active{background:#fff;color:var(--role);box-shadow:0 2px 8px rgba(22,53,83,.07),inset 0 0 0 1px color-mix(in srgb,var(--role) 12%,#dbe6f0)}

/* Panels and cards */
.panel,.v12-card{border-radius:17px;background:rgba(255,255,255,.98)}
.panel-head,.v12-card-head{min-height:68px;border-bottom-color:#eaf0f5;background:#fff}
.panel-head{padding:15px 17px}.panel-body{padding:18px}
.panel-heading h2,.v12-card-head>div>span{font-size:13.5px;color:#20384f;font-weight:730}
.panel-heading p,.v12-card-head p{font-size:10.5px;color:#8292a2;line-height:1.45}
.v12-card-head h2{font-size:26px;color:#102a42}
.admin-dept-card{min-height:98px;border-radius:15px;padding:14px;background:#fff;grid-template-columns:36px 1fr}
.admin-dept-card>span{width:36px;height:36px;border-radius:11px;background:var(--role-soft);color:var(--role)}
.admin-dept-card small{font-size:9.5px;color:#75889b}.admin-dept-card strong{font-size:21px;color:#163047}.admin-dept-card p{font-size:9.5px;color:#8796a5}
.finance-summary{border-radius:16px;padding:17px 18px}.finance-summary small{font-size:10px}.finance-summary strong{font-size:28px;color:#102b43}.finance-summary span{font-size:10px}

/* Eye-care charts */
.chart-wrap-v13{height:238px;padding-top:2px}
.chart-wrap-v13 svg{overflow:visible}
.chart-grid-line{stroke:#e6edf4;stroke-width:1;stroke-dasharray:3 7;vector-effect:non-scaling-stroke}
.chart-main-line{fill:none;stroke:var(--role);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chart-point{fill:#fff;stroke:color-mix(in srgb,var(--role) 86%,#0d2438);stroke-width:2.3}
.chart-point-last{fill:var(--role);stroke:#fff;stroke-width:3.2}
.chart-labels{padding:7px 6px 0;color:#8594a3;font-size:9.5px}
.v12-day-bars{min-height:205px;padding:15px 16px 18px;gap:8px}
.v12-day-bar b{width:20px;border-radius:7px 7px 4px 4px;background:color-mix(in srgb,var(--role) 24%,#e6edf4)}
.v12-day-bar.active b{background:linear-gradient(180deg,color-mix(in srgb,var(--role) 68%,white),var(--role));box-shadow:0 8px 18px color-mix(in srgb,var(--role) 18%,transparent)}
.v12-day-bar span{font-size:8.5px}.v12-day-bar small{font-size:8.5px;color:#60758a}
.simple-bar-row{gap:10px}.simple-bar-row span{font-size:10.5px;color:#60768b}.simple-bar-row>div{height:8px;background:#edf3f8;border-radius:999px;overflow:hidden}.simple-bar-row>div>b{height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--role) 65%,#68d3c5),var(--role))}.simple-bar-row strong{font-size:10.5px;color:#2c445b}
.v12-ring{box-shadow:inset 0 0 0 15px #fff,0 10px 24px rgba(16,47,76,.055)}

/* Flow visualization */
.flow-bar,.patient-flow-strip{border-color:#dfe8f1;background:#fff;box-shadow:0 5px 18px rgba(19,50,80,.028)}
.flow-step span{background:#eef4f9;color:#6b7f93}.flow-step.active span,.flow-step.done span{background:var(--role);color:#fff}
.flow-step b{font-size:11px}.flow-step small{font-size:9.5px}.flow-step>i,.patient-flow-strip i{background:#dce7f0}
.patient-flow-strip{min-height:92px;border-radius:16px}.patient-flow-strip span{font-size:10px}.patient-flow-strip strong{font-size:23px;color:#12304a}

/* Tables */
.data-table-wrap,.v12-patient-table{scrollbar-color:#bdcbd8 transparent}
.data-table{font-size:11.5px}
.data-table th{height:44px;background:#f7fafc;color:#6d8195;font-size:9.8px;letter-spacing:.55px;border-bottom-color:#dde7f0}
.data-table td{min-height:48px;padding-top:12px;padding-bottom:12px;color:#334b62;border-bottom-color:#edf2f6}
.data-table tbody tr:hover{background:#f8fbfe}
.v12-table-head{font-size:9.5px;color:#75899d;background:#f7fafc;border-radius:10px}
.v12-table-row{min-height:60px;font-size:10.5px;border-bottom-color:#edf2f6}
.v12-patient-cell b,.admin-invoice-list b,.admin-schedule-list b,.branch-overview-list b{font-size:11px;color:#263f57}
.v12-patient-cell small,.admin-invoice-list small,.admin-schedule-list small,.branch-overview-list small{font-size:9.5px;color:#8091a2}
.mono-chip{font-size:9.5px;background:#eef3f8;color:#50677d}

/* Forms */
.field{gap:7px}.field>span{font-size:10.8px;color:#4d647a;font-weight:680}.field>small{font-size:9.5px;color:#8696a6}
input,select{height:42px;padding:0 12px}textarea{min-height:92px;padding:11px 12px}
input,select,textarea{border-color:#d7e2ec;border-radius:11px;color:#20384f;font-size:12.5px;background:#fff}
input::placeholder,textarea::placeholder{color:#9aa8b5}
input:focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--role) 58%,#c4d2df);box-shadow:0 0 0 4px color-mix(in srgb,var(--role) 10%,transparent)}
.check-row label{font-size:10.5px;border-color:#dce6ef;background:#f9fbfd}

/* Buttons */
.btn{height:39px;padding:0 14px;border-color:#d7e2ec;border-radius:10px;color:#3d566e;font-size:11px;font-weight:690;box-shadow:0 1px 2px rgba(15,42,68,.02)}
.btn:hover{transform:none;border-color:color-mix(in srgb,var(--role) 24%,#cfdae5);box-shadow:0 6px 17px rgba(17,48,78,.05)}
.btn-primary{background:linear-gradient(135deg,color-mix(in srgb,var(--role) 92%,#102b45),var(--role));border-color:var(--role);box-shadow:0 8px 20px color-mix(in srgb,var(--role) 18%,transparent)}
.btn-primary:hover{background:color-mix(in srgb,var(--role) 91%,#07192b)}
.btn-sm{height:33px;padding:0 10px;font-size:10px}

/* Status, alerts, empty states */
.status{padding:5px 8px;font-size:8.8px;letter-spacing:.35px}.status-good{background:#eaf8f2;color:#177759}.status-warn{background:#fff6e8;color:#9a620f}.status-danger{background:#fff0f3;color:#b64559}.status-info{background:#edf4fb;color:#52718e}
.error-box,.notice-box{border-radius:12px;font-size:11px}
.empty-state strong{font-size:13px}.empty-state p{font-size:10.5px;line-height:1.55}

/* Modals and overlays */
.modal-layer,.search-layer,.v12-widget-layer{backdrop-filter:blur(8px)}
.modal{border-radius:20px;border:1px solid rgba(220,231,240,.9);box-shadow:0 30px 90px rgba(7,25,43,.22)}
.modal-head{padding:19px 21px;border-bottom-color:#e8eef4}.modal-head span{font-size:9.5px;color:var(--role)}.modal-head h2{font-size:20px;color:#102b43}.modal-body{padding:21px}.modal-foot{padding:15px 21px;border-top-color:#e8eef4;background:#f9fbfd}
.search-panel{border-radius:20px;box-shadow:0 30px 90px rgba(7,25,43,.2)}
.search-input{height:66px}.search-input input{font-size:13.5px}

/* Role-specific subtle atmosphere, same eye-care family */
.app-shell[data-role="doctor"] .content{background-image:linear-gradient(180deg,color-mix(in srgb,var(--role) 2.5%,transparent),transparent 190px)}
.app-shell[data-role="optometrist"] .content{background-image:radial-gradient(circle at 92% 2%,rgba(15,143,138,.05),transparent 25rem)}
.app-shell[data-role="optical"] .content{background-image:radial-gradient(circle at 92% 2%,rgba(109,74,232,.05),transparent 25rem)}
.app-shell[data-role="pharmacy"] .content{background-image:radial-gradient(circle at 92% 2%,rgba(15,118,110,.05),transparent 25rem)}

/* Dashboard density / responsive */
.admin-top-grid{grid-template-columns:minmax(0,1.65fr) minmax(330px,.72fr);gap:11px}
.admin-data-grid{gap:11px}.admin-tab-stack{gap:11px}.admin-performance-card .v12-chart-area{min-height:222px}
.admin-schedule-list>div{min-height:60px}.time-box{font-size:10px;color:var(--role)}
.admin-status-list>div{padding:10px 0}.admin-status-list strong{font-size:17px;color:#173149}
.branch-overview-list>div{min-height:60px}.branch-overview-list em{font-size:10px;color:#16765b}
.quick-action-panel{border-radius:18px;background:linear-gradient(145deg,#0a2238,#0d2a43);box-shadow:0 16px 42px rgba(7,25,43,.12)}
.quick-action-panel>span{background:var(--role);color:#fff}

/* Login aligned to product UI */
.login-screen{background:#f5f8fc}
.login-art{background:radial-gradient(circle at 16% 12%,color-mix(in srgb,#2563eb 34%,transparent),transparent 25rem),radial-gradient(circle at 88% 80%,rgba(15,143,138,.2),transparent 24rem),linear-gradient(145deg,#07192b 0%,#0a2238 58%,#082033 100%)}
.login-copy h1{font-size:clamp(44px,4.1vw,66px);letter-spacing:-3px}.login-copy h1 em{color:#9bc7ff}.login-card{border-radius:22px;border-color:#dce6ef;box-shadow:0 24px 70px rgba(18,48,77,.09)}
.login-button{height:44px;border-radius:11px;background:linear-gradient(135deg,#2563eb,#0f8f8a);box-shadow:0 10px 25px rgba(37,99,235,.18)}

@media(max-width:1350px){.content{padding-left:28px;padding-right:28px}.admin-overview-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){.app-shell{grid-template-columns:1fr}.sidebar{width:266px}.main-shell{grid-column:1}.topbar{padding:0 18px}.content{padding:24px 18px 56px}.global-search{width:min(340px,45vw)}}
@media(max-width:700px){body{font-size:14px}.content{padding:20px 14px 50px}.page-title h1,.dash-head h1,.v12-toolbar-left h1{font-size:27px}.admin-overview-kpis,.admin-department-grid{grid-template-columns:1fr 1fr}.metric-card{min-height:126px}.top-user>div{display:none}}
@media(max-width:480px){.admin-overview-kpis,.admin-department-grid,.metric-grid{grid-template-columns:1fr}.v12-date-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}.btn{font-size:10.5px}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ======================================================================
   V13.4 OPTIC UI POLISH · TYPOGRAPHY, ALIGNMENT & EYE-CARE COLOR SYSTEM
   ====================================================================== */
:root{
  --bg:#f4f9fc;
  --surface:#ffffff;
  --surface-2:#f8fcfe;
  --surface-3:#edf5f9;
  --ink:#102b3d;
  --ink-2:#3d566b;
  --muted:#6d8194;
  --line:#dce8ef;
  --line-strong:#c9dbe6;
  --nav:#06243a;
  --nav-2:#08304a;
  --nav-3:#0a3957;
  --blue:#1d78b7;
  --teal:#0e948a;
  --iris:#6d61c9;
  --good:#207e6b;
  --warn:#a36e22;
  --danger:#b94e63;
  --shadow-sm:0 1px 2px rgba(11,43,61,.03),0 8px 22px rgba(25,74,101,.04);
  --shadow-md:0 15px 42px rgba(15,55,78,.075),0 2px 8px rgba(15,55,78,.035);
  --radius:16px;
  --radius-sm:11px;
}
html{background:#f4f9fc}
body{
  font-family:"Aptos","Segoe UI Variable Text","Segoe UI Variable","Segoe UI",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:15px;
  line-height:1.5;
  letter-spacing:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 88% -10%,rgba(43,145,193,.075),transparent 31rem),
    radial-gradient(circle at 72% 17%,rgba(14,148,138,.045),transparent 25rem),
    linear-gradient(180deg,#f9fcfe 0,#f4f9fc 300px,#f4f9fc 100%);
}
.page-title h1,.dash-head h1,.v12-toolbar-left h1,.login-copy h1,.modal-head h2,.admin-welcome h1,.v12-card-head h2{
  font-family:"Aptos Display","Segoe UI Variable Display","Segoe UI Variable","Segoe UI",ui-sans-serif,system-ui,sans-serif;
}

/* Frame and navigation alignment */
.app-shell{grid-template-columns:268px minmax(0,1fr)}
.sidebar{width:268px;background:radial-gradient(circle at 14% 0%,color-mix(in srgb,var(--role) 21%,transparent),transparent 18rem),radial-gradient(circle at 95% 76%,rgba(14,148,138,.13),transparent 19rem),linear-gradient(180deg,#06243a 0%,#082d47 48%,#06243a 100%)}
.side-brand{height:80px;padding:0 20px;gap:12px}
.side-brand strong{font-size:18px;font-weight:720;letter-spacing:-.28px}
.side-brand small{font-size:10px;letter-spacing:1.2px}
.role-card{margin:15px 12px 8px;padding:13px 14px;gap:11px}
.role-card strong{font-size:13.5px}.role-card span:not(.role-icon){font-size:11px}.role-card small{font-size:10px}
.side-nav{padding:5px 10px 18px}
.nav-group{padding:18px 11px 7px;font-size:10px;letter-spacing:1.25px}
.nav-item{height:46px;padding:0 11px;gap:10px}
.nav-item b{font-size:13.5px;font-weight:620}
.topbar{height:72px;padding:0 30px;gap:18px;background:rgba(249,252,254,.91);border-bottom-color:#dfeaf1}
.crumb{font-size:12px;gap:8px}.crumb b{font-weight:680;color:#214056}
.global-search{height:40px;border-radius:11px;border-color:#d9e6ee}.global-search span{font-size:12px}
.top-user strong{font-size:11.5px}.top-user span{font-size:10px}.live-pill{font-size:10px}
.content{width:min(1500px,100%);padding:30px 32px 68px}

/* Headings and alignment */
.page-title{margin:0 0 24px;align-items:flex-start;gap:24px}
.page-title>div:first-child{max-width:860px}
.page-kicker,.dash-eyebrow{margin-bottom:7px;color:color-mix(in srgb,var(--role) 82%,#3f687e);font-size:10.5px;letter-spacing:1.05px;font-weight:780}
.page-title h1,.dash-head h1{font-size:clamp(31px,2.35vw,38px);line-height:1.08;letter-spacing:-.8px;font-weight:720;color:#102b3d}
.page-title p,.dash-head p{margin-top:8px;max-width:780px;font-size:13.5px;line-height:1.55;color:#6f8293}
.page-actions{align-self:flex-start;display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* Grid rhythm */
.metric-grid{gap:14px;margin-bottom:18px}
.workspace-grid,.admin-bento,.report-grid,.dashboard-main-grid,.admin-top-grid,.admin-data-grid{gap:14px}
.react16-stack,.admin-tab-stack{gap:14px}
.admin-overview-kpis,.admin-department-grid{gap:12px}

/* Cards: cleaner eye-care surfaces */
.panel,.v12-card,.metric-card,.v12-kpi-card,.admin-dept-card,.finance-summary{
  border-color:#dce8ef;
  background:rgba(255,255,255,.985);
  box-shadow:var(--shadow-sm);
}
.panel,.v12-card{border-radius:16px}
.panel-head,.v12-card-head{min-height:72px;padding:16px 19px;background:#fff;border-bottom-color:#e9f0f4}
.panel-heading{gap:12px}
.panel-icon{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,var(--role-soft),#eefbfa);color:var(--role)}
.panel-heading h2,.v12-card-head>div>span{font-size:14.5px;line-height:1.25;font-weight:700;color:#1e3a4e}
.panel-heading p,.v12-card-head p{margin-top:4px;font-size:11px;line-height:1.45;color:#7b8d9d}
.panel-body{padding:20px}
.metric-card{min-height:145px;padding:18px 19px;border-radius:16px}
.metric-card:before{top:20px;bottom:20px;width:3px;background:linear-gradient(180deg,var(--role),#18a69b)}
.metric-card>strong{margin-top:17px;font-size:28px;letter-spacing:-.5px;font-weight:720;color:#102b3d}
.metric-card>b{margin-top:9px;font-size:12px;font-weight:680;color:#3e586d;text-transform:none;letter-spacing:0}
.metric-card>p{margin-top:4px;font-size:11px;color:#7b8c9c}
.metric-icon{background:var(--role-soft)!important;color:var(--role)!important}
.v12-kpi-card small{font-size:11px;color:#6f8496}.v12-kpi-card strong{font-size:27px;color:#102b3d}.v12-kpi-card p{font-size:11px;color:#7b8e9f}
.admin-dept-card{min-height:102px;padding:15px;border-radius:15px;grid-template-columns:38px 1fr;gap:11px}
.admin-dept-card>span{width:38px;height:38px}.admin-dept-card small{font-size:10px}.admin-dept-card strong{font-size:21px}.admin-dept-card p{font-size:10px;line-height:1.4}

/* Forms and buttons */
.form-grid{gap:16px}.field{gap:7px}.field>span{font-size:11.5px;font-weight:660;color:#466176}.field>small{font-size:10px;color:#8193a3}
input,select{height:43px;padding:0 12px}textarea{min-height:94px;padding:11px 12px}
input,select,textarea{border-color:#d5e3ec;border-radius:10px;color:#203f54;font-size:13px;background:#fff}
input:focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--role) 58%,#b9cfdd);box-shadow:0 0 0 4px color-mix(in srgb,var(--role) 10%,transparent)}
.btn{height:40px;padding:0 14px;border-radius:10px;font-size:11.5px;font-weight:660}
.btn-primary{background:linear-gradient(135deg,color-mix(in srgb,var(--role) 92%,#135272),var(--role));box-shadow:0 8px 20px color-mix(in srgb,var(--role) 17%,transparent)}
.btn-sm{height:34px;font-size:10.5px}
.table-search{height:36px}.table-search input{font-size:11px}

/* Tables: clinical readability and column alignment */
.data-table{min-width:780px;font-size:12px}
.data-table th{height:45px;padding:0 16px;background:#f6fafc;color:#657d90;font-size:10px;letter-spacing:.48px;font-weight:760;vertical-align:middle}
.data-table td{padding:13px 16px;color:#385267;font-size:12.5px;line-height:1.42;vertical-align:middle}
.data-table td>b,.subtle-strong,.person-cell b{font-size:12.5px;font-weight:680;color:#203e53}
.cell-note,.person-cell small{font-size:10.5px;color:#7f91a0}
.person-cell{gap:10px}.person-cell .avatar{width:33px;height:33px;font-size:10px}
.mono-chip,.role-chip,.muted-pill{font-size:10px}
.status{padding:5px 9px;font-size:9px;letter-spacing:.28px}

/* Charts: blue-teal optic atmosphere */
.chart-wrap-v13{height:248px;padding-top:4px}
.chart-grid-line{stroke:#dce8ef;stroke-dasharray:2 7}
.chart-main-line{stroke-width:3.2}
.chart-point{stroke-width:2.5}.chart-point-last{stroke-width:3.3}
.chart-labels{padding:8px 7px 0;color:#73879a;font-size:10px}
.v12-day-bars{min-height:212px;padding:16px 17px 19px;gap:9px}
.v12-day-bar b{width:21px;border-radius:7px 7px 4px 4px;background:linear-gradient(180deg,color-mix(in srgb,var(--role) 34%,#bde7e3),color-mix(in srgb,var(--role) 17%,#eaf2f7))}
.v12-day-bar.active b{background:linear-gradient(180deg,color-mix(in srgb,var(--role) 64%,#7ed9d1),var(--role));box-shadow:0 8px 18px color-mix(in srgb,var(--role) 18%,transparent)}
.v12-day-bar span,.v12-day-bar small{font-size:9px}
.simple-bar-row span,.simple-bar-row strong{font-size:11px}.simple-bar-row>div{height:8px;background:#eaf2f6}.simple-bar-row>div>b{background:linear-gradient(90deg,#65c9bf,var(--role))}

/* Tabs and operational strips */
.admin-dashboard-tabs,.report-tabs{padding:4px;background:#eef5f8;border-color:#dbe8ee;border-radius:11px}
.admin-dashboard-tabs button,.report-tabs button{height:37px;padding:0 15px;font-size:11px;color:#60778a}
.admin-dashboard-tabs button.active,.report-tabs button.active{color:var(--role);background:#fff;box-shadow:0 2px 8px rgba(18,62,85,.06),inset 0 0 0 1px color-mix(in srgb,var(--role) 14%,#d8e6ee)}
.flow-step b{font-size:11.5px}.flow-step small{font-size:10px}.patient-flow-strip span{font-size:10.5px}.patient-flow-strip strong{font-size:24px}
.admin-schedule-list>div{min-height:62px}.time-box{font-size:10.5px}.admin-schedule-list b{font-size:11.5px}.admin-schedule-list small{font-size:9.8px}
.admin-invoice-list b{font-size:11.5px}.admin-invoice-list small{font-size:9.8px}

/* Login uses same ophthalmology identity */
.login-screen{background:#f4f9fc}
.login-art{background:radial-gradient(circle at 15% 12%,rgba(35,127,184,.35),transparent 25rem),radial-gradient(circle at 88% 80%,rgba(14,148,138,.22),transparent 24rem),linear-gradient(145deg,#06243a 0%,#08304a 58%,#06243a 100%)}
.login-copy h1{font-weight:690;letter-spacing:-2.4px}.login-copy h1 em{color:#a7d7ef}.login-copy>p{font-size:15px;color:#aac0cf}
.login-card{border-radius:20px;border-color:#d9e7ef;box-shadow:0 24px 70px rgba(18,66,91,.09)}
.login-card-head h2{font-family:"Aptos Display","Segoe UI Variable Display","Segoe UI Variable","Segoe UI",sans-serif}
.login-button{height:45px;border-radius:10px;background:linear-gradient(135deg,#1d78b7,#0e948a);box-shadow:0 10px 25px rgba(29,120,183,.18)}

/* Focus per role remains subtle, not a rainbow UI */
.app-shell[data-role="admin"] .content,.app-shell[data-role="receptionist"] .content{background-image:radial-gradient(circle at 94% 1%,rgba(29,120,183,.04),transparent 26rem)}
.app-shell[data-role="doctor"] .content,.app-shell[data-role="optical"] .content{background-image:radial-gradient(circle at 94% 1%,color-mix(in srgb,var(--role) 4%,transparent),transparent 26rem)}
.app-shell[data-role="optometrist"] .content,.app-shell[data-role="pharmacy"] .content{background-image:radial-gradient(circle at 94% 1%,rgba(14,148,138,.045),transparent 26rem)}

@media(max-width:1350px){.content{padding-left:26px;padding-right:26px}}
@media(max-width:980px){.app-shell{grid-template-columns:1fr}.sidebar{width:268px}.topbar{padding:0 18px}.content{padding:24px 18px 56px}.page-title{align-items:flex-start}.page-actions{width:100%}}
@media(max-width:700px){body{font-size:14.5px}.content{padding:20px 14px 50px}.page-title h1,.dash-head h1,.v12-toolbar-left h1{font-size:28px}.panel-body{padding:17px}.data-table td{font-size:12px}}

/* ======================================================================
   V13.5 FINAL VISUAL QA · BILLING ACTION CARD + LAST-PASS CONTRAST FIXES
   ====================================================================== */
.dashboard-main-grid>.quick-action-panel{
  min-height:100%;
}
.quick-action-panel{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:24px;
  border:1px solid #cfe4ed;
  border-radius:18px;
  background:linear-gradient(135deg,#f2fbff 0%,#ffffff 56%,#edf9f6 100%);
  color:#12354a;
  box-shadow:0 12px 34px rgba(21,75,101,.075);
}
.quick-action-panel::before{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  right:-76px;
  top:-82px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(29,120,183,.13) 0%,rgba(29,120,183,.06) 38%,transparent 70%);
  pointer-events:none;
}
.quick-action-panel::after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-70px;
  bottom:-94px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(14,148,138,.12) 0%,rgba(14,148,138,.045) 42%,transparent 72%);
  pointer-events:none;
}
.quick-action-top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.quick-action-icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:linear-gradient(145deg,#e8f6ff,#eafaf7);
  color:var(--role);
  border:1px solid #d2e8f0;
  box-shadow:0 6px 16px rgba(29,120,183,.08);
}
.quick-action-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid #d8e8ef;
  color:#5b7486;
  font-size:10px;
  font-weight:700;
  letter-spacing:.25px;
}
.quick-action-panel h2{
  position:relative;
  z-index:1;
  margin:20px 0 7px;
  color:#12354a;
  font-family:"Aptos Display","Segoe UI Variable Display","Segoe UI",sans-serif;
  font-size:22px;
  line-height:1.12;
  letter-spacing:-.45px;
  font-weight:720;
}
.quick-action-panel p{
  position:relative;
  z-index:1;
  max-width:34ch;
  margin:0;
  color:#627b8d;
  font-size:12px;
  line-height:1.62;
}
.quick-action-flow{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:8px;
  margin:22px 0 24px;
}
.quick-action-flow span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  border:1px solid #d8e8ef;
  border-radius:9px;
  background:rgba(255,255,255,.88);
  color:#36556a;
  font-size:10px;
  font-weight:680;
  white-space:nowrap;
}
.quick-action-flow i{
  width:16px;
  height:1px;
  background:linear-gradient(90deg,#9bc8dc,#80c9bf);
  flex:0 0 auto;
}
.quick-action-panel>.btn{
  position:relative;
  z-index:1;
  align-self:flex-start;
  margin-top:auto;
  min-width:132px;
  background:linear-gradient(135deg,#1d78b7,#0e948a)!important;
  border-color:#1d78b7!important;
  box-shadow:0 9px 22px rgba(29,120,183,.16)!important;
}
.quick-action-panel>.btn:hover{
  background:linear-gradient(135deg,#17689f,#0c8178)!important;
}

/* Last-pass alignment/contrast safeguards discovered during V13.5 audit. */
.panel-heading h2,.v12-card-head>div>span,.modal-head h2,.page-title h1,.dash-head h1{
  text-wrap:balance;
}
.panel-heading p,.page-title p,.dash-head p,.cell-note{
  text-wrap:pretty;
}
.btn span{line-height:1.2}
.data-table th,.data-table td{font-variant-numeric:tabular-nums}

@media(max-width:980px){
  .dashboard-main-grid>.quick-action-panel{min-height:auto}
  .quick-action-panel{padding:21px}
}
@media(max-width:560px){
  .quick-action-flow{gap:6px;flex-wrap:wrap}
  .quick-action-flow i{display:none}
  .quick-action-panel>.btn{width:100%;justify-content:center}
}