/* Royal Navy & Gold look (picked by Nabeel 2026-11-04). Sits on top of look.css (data-look="c" side menu).
   html[data-skin="navy"] switches it on; remove that attribute to go back to the old teal look. */
/* ===== shared for all 3 demo skins ===== */
html[data-skin] body{font-family:"Inter","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
html[data-skin] .stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
html[data-skin] .stat{padding:16px 18px 16px 18px;min-height:96px;align-content:space-between;border:0}
html[data-skin] .stat::before{display:none}
html[data-skin] #dash .stat::after{content:"";position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;background:var(--ic,var(--accent));-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
html[data-skin] .stat span{text-transform:none;letter-spacing:0}
html[data-skin] #dash .stat span{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--muted);padding-right:40px}
html[data-skin] .stat b{font-size:30px;font-weight:800;letter-spacing:-.02em}
html[data-skin] #dash .stat:nth-child(1){--ic:var(--c1)} html[data-skin] #dash .stat:nth-child(2){--ic:var(--c2)}
html[data-skin] #dash .stat:nth-child(3){--ic:var(--c3)} html[data-skin] #dash .stat:nth-child(4){--ic:var(--c4)}
html[data-skin] #dash #toAppts{--ic:var(--c5)} html[data-skin] #dash #toSummary,html[data-skin] #dash #myDay{--ic:var(--c4)}
html[data-skin] #dash #toSummary2{--ic:var(--c3)} html[data-skin] #dash #goReminders{--ic:var(--c2)} html[data-skin] #dash #toStock{--ic:var(--c6)}
html[data-skin] .col h3{text-transform:none;letter-spacing:0;font-size:15px;font-weight:700;color:var(--fg)}
html[data-skin] .qc{border:0}
html[data-skin] .tok{border-radius:50%}
html[data-skin] #dash>.panel-h h2{font-size:24px;font-weight:800;letter-spacing:-.01em}
html[data-skin] .login{grid-template-columns:1fr;padding:0}
@media (min-width:900px){
  html[data-skin] .login{grid-template-columns:1.1fr 1fr}
  html[data-skin] .login::before{content:"Your clinic,\A organised.";white-space:pre-wrap;align-self:stretch;justify-self:stretch;box-sizing:border-box;display:flex;align-items:flex-end;padding:64px;font-size:46px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:#fff;background:radial-gradient(circle at 85% 12%,rgba(255,255,255,.18) 0 120px,transparent 121px),radial-gradient(circle at 70% 40%,rgba(255,255,255,.08) 0 220px,transparent 221px),var(--hero)}
}

/* ===== Skin 3: Royal Navy & Gold (premium dark side menu) ===== */
html:root[data-skin="navy"]{--accent:#0b2545;--accent-2:#071a33;--accent-fg:#fff;--accent-soft:#f5ecd2;--bg:#f6f4ef;--fg:#13213a;--muted:#6b7385;--line:#e7e2d6;--head:#0b2545;--head-fg:#e9edf5;--gold:#c9a227;
  --c1:#0b2545;--c2:#c9a227;--c3:#2f6690;--c4:#2e7d5b;--c5:#8a5a44;--c6:#b42318;
  --shadow:0 1px 2px rgba(11,37,69,.06),0 8px 24px rgba(11,37,69,.08);
  --hero:linear-gradient(160deg,#0b2545 0%,#13315c 60%,#1d4e89 140%)}
html[data-skin="navy"] h2,html[data-skin="navy"] h1,html[data-skin="navy"] .brand span{font-family:Georgia,"Times New Roman",serif}
html[data-skin="navy"] .brand .mark{background:linear-gradient(135deg,#e6c55a,#b8901c);color:#0b2545;border-radius:50%}
html[data-skin="navy"] .nav .btn.on{box-shadow:inset 3px 0 0 var(--gold)!important;color:#f3d77a!important}
html[data-skin="navy"] .nav .btn:hover{color:#f3d77a!important}
html[data-skin="navy"] .search .btn{border:1px solid rgba(201,162,39,.5)!important}
html[data-skin="navy"] .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:inset 0 -2px 0 var(--gold)}
html[data-skin="navy"] main .btn:not(.primary){border-color:#ddd5c2}
html[data-skin="navy"] main .btn:hover{border-color:var(--gold);color:var(--accent)}
html[data-skin="navy"] .stat{background:#fff;border-radius:14px;border-top:3px solid var(--gold)}
html[data-skin="navy"] #dash .stat::after{background:var(--ic);opacity:.9}
html[data-skin="navy"] .col{background:#efeadf}
html[data-skin="navy"] .col h3{font-family:Georgia,serif;font-size:16px}
html[data-skin="navy"] .col h3 span{background:var(--accent);color:#f3d77a}
html[data-skin="navy"] .qc{border-radius:12px}
html[data-skin="navy"] .tok{background:var(--accent);color:#f3d77a}
html[data-skin="navy"] .mr{background:#f5ecd2;color:#7a5c0e}
html[data-skin="navy"] .login-card{border:0;box-shadow:none;background:transparent}
@media (min-width:900px){html[data-skin="navy"] .login{background:#fbfaf6} html[data-skin="navy"] .login::before{font-family:Georgia,serif;font-weight:700;border-right:6px solid var(--gold)}}

/* guided tour in navy & gold */
html[data-skin="navy"] .tour-head{background:linear-gradient(135deg,#0b2545,#13315c 60%,#1d4e89)}
html[data-skin="navy"] .tour-bar i{background:linear-gradient(90deg,#b8901c,#e6c55a)}
html[data-skin="navy"] .tour-text b{color:#0b2545}
html[data-skin="navy"] .tour-foot .tour-skip:hover{color:#0b2545}
html[data-skin="navy"] .tour-arrow.below{background:#13315c}
html[data-skin="navy"] .tour-spot{box-shadow:0 0 0 3px #e6c55a,0 0 0 9px rgba(230,197,90,.28),0 0 0 200vmax rgba(8,20,40,.66)}
html[data-skin="navy"] .tour-spot::after{border-color:#e6c55a}
/* stat card icons */
html[data-skin] #dash .stat:nth-child(1)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M2.5%2020c.8-3.6%203.4-5.5%206.5-5.5s5.7%201.9%206.5%205.5M16%204.5a3.5%203.5%200%200%201%200%207M18%2014.6c1.9.6%203.1%202.4%203.5%205.4%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M2.5%2020c.8-3.6%203.4-5.5%206.5-5.5s5.7%201.9%206.5%205.5M16%204.5a3.5%203.5%200%200%201%200%207M18%2014.6c1.9.6%203.1%202.4%203.5%205.4%22/%3E%3C/svg%3E")}
html[data-skin] #dash .stat:nth-child(2)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%207v5l3%202%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%207v5l3%202%22/%3E%3C/svg%3E")}
html[data-skin] #dash .stat:nth-child(3)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203v6a6%206%200%200%200%2012%200V3%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2216%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M12%2015v2a4%204%200%200%200%204%204h0a2%202%200%200%200%202-2v-1%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203v6a6%206%200%200%200%2012%200V3%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2216%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M12%2015v2a4%204%200%200%200%204%204h0a2%202%200%200%200%202-2v-1%22/%3E%3C/svg%3E")}
html[data-skin] #dash .stat:nth-child(4)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M8%2012l3%203%205-6%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M8%2012l3%203%205-6%22/%3E%3C/svg%3E")}
html[data-skin] #dash #toAppts::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3%2010h18M8%203v4M16%203v4%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3%2010h18M8%203v4M16%203v4%22/%3E%3C/svg%3E")}
html[data-skin] #dash #toSummary::after,html[data-skin] #dash #myDay::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%2220%22%20height%3D%2213%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212.5%22%20r%3D%222.5%22/%3E%3Cpath%20d%3D%22M6%2012.5h.01M18%2012.5h.01%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%2220%22%20height%3D%2213%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212.5%22%20r%3D%222.5%22/%3E%3Cpath%20d%3D%22M6%2012.5h.01M18%2012.5h.01%22/%3E%3C/svg%3E")}
html[data-skin] #dash #toSummary2::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.5%203.5l-7%207a4.95%204.95%200%200%200%207%207l7-7a4.95%204.95%200%200%200-7-7z%22/%3E%3Cpath%20d%3D%22M7%207l7%207%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.5%203.5l-7%207a4.95%204.95%200%200%200%207%207l7-7a4.95%204.95%200%200%200-7-7z%22/%3E%3Cpath%20d%3D%22M7%207l7%207%22/%3E%3C/svg%3E")}
html[data-skin] #dash #goReminders::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%208a6%206%200%200%201%2012%200c0%207%203%209%203%209H3s3-2%203-9%22/%3E%3Cpath%20d%3D%22M10.3%2021a1.94%201.94%200%200%200%203.4%200%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%208a6%206%200%200%201%2012%200c0%207%203%209%203%209H3s3-2%203-9%22/%3E%3Cpath%20d%3D%22M10.3%2021a1.94%201.94%200%200%200%203.4%200%22/%3E%3C/svg%3E")}
html[data-skin] #dash #toStock::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%2016H3z%22/%3E%3Cpath%20d%3D%22M12%2010v4M12%2017h.01%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%2016H3z%22/%3E%3Cpath%20d%3D%22M12%2010v4M12%2017h.01%22/%3E%3C/svg%3E")}