/* Demo C: booking- og kundesystem */
.bk{display:grid;grid-template-columns:350px minmax(0,1fr);gap:20px;padding:22px;min-height:640px}
.bk-public{display:flex;flex-direction:column;max-height:596px}
.bk-pub-body{flex:1;overflow-y:auto;padding:14px 16px 16px;scrollbar-width:thin}
.bk-step{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:700 .82rem var(--head);color:var(--navy)}
.bk-step>b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:.68rem}
.bk-month{margin-bottom:14px}
.bk-mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.bk-mhead b{font:600 .86rem var(--sans);text-transform:capitalize}
.bk-mhead .u-btn{width:30px;padding:0}
.bk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.bk-dow{text-align:center;font:600 .66rem var(--sans);color:var(--ui-muted);padding:2px 0}
.bk-d{height:32px;border-radius:8px;border:0;background:none;font:500 .8rem var(--sans);color:#9aa4b4;cursor:default}
.bk-d.out{visibility:hidden}
.bk-d.ok{background:var(--blue-tint);color:var(--blue-dark);font-weight:600;cursor:pointer;transition:background .15s,transform .15s}
.bk-d.ok:hover{background:#d6e2ff;transform:translateY(-1px)}
.bk-d[aria-pressed=true]{background:var(--blue);color:#fff}
.bk-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:10px}
.bk-slots button{min-height:34px;border-radius:8px;border:1.5px solid var(--ui-line);background:#fff;font:600 .78rem var(--sans);color:var(--navy);cursor:pointer}
.bk-slots button:hover{border-color:var(--blue)}
.bk-slots [aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.bk-hint{margin:0 0 10px;font-size:.8rem;color:var(--ui-muted)}
.bk-svc{margin-bottom:14px}
.bk-fields{display:grid;gap:8px;margin-bottom:6px}
.bk-fake{margin-left:auto;background:none;border:0;color:var(--blue-dark);font:600 .74rem var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bk-submit{width:100%;margin-top:8px;min-height:40px}
.bk-note{margin:8px 0 0;font-size:.72rem;color:var(--ui-muted)}
.bk-ok{display:flex;gap:10px;align-items:center;padding:12px;border-radius:12px;background:var(--ok-bg);color:#14532d;margin-bottom:12px}
.bk-ok>span{width:30px;height:30px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;flex:none}
.bk-ok p{margin:0;font-size:.8rem}
.bk-mail{border:1px solid var(--ui-line);border-radius:12px;padding:14px;font-size:.82rem;background:#fff;box-shadow:var(--sh-1)}
.bk-mail header{display:grid;gap:4px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--ui-line)}
.bk-mail header .u-demo{justify-self:start}
.bk-mail header small{color:var(--ui-muted)}
.bk-mail header b{color:var(--navy)}
.bk-mail p{margin:0 0 8px}
.bk-mail dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0 0 10px;padding:10px;border-radius:8px;background:var(--ui-soft);font-size:.78rem}
.bk-mail dt{color:var(--ui-muted)}.bk-mail dd{margin:0;font-weight:600}
.bk-sig{color:var(--ui-muted)}
.bk-after{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.bk-right{display:flex;flex-direction:column;gap:12px;min-width:0}
.bk-flow{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:space-between;gap:6px}
.bk-flow li{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:6px 8px;border-radius:10px;border:1px solid var(--st-line);background:rgba(255,255,255,.03);color:var(--st-muted);font:600 .78rem var(--sans);white-space:nowrap;transition:background .35s,color .35s,border-color .35s,box-shadow .35s}
.bk-flow li+li::before{content:"";position:absolute;right:100%;top:50%;width:6px;height:1px;background:var(--st-line2)}
.bk-flow li span{display:grid}
.bk-flow li.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 24px -4px rgba(29,91,255,.8)}
.bk-flow li.done{border-color:rgba(61,220,132,.45);color:#c8f5dc}
.bk-admin{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}
.bk-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 12px 4px}
.bk-kpis .u-kpi{padding:9px 12px}
.bk-kpis .u-kpi b{font-size:1.1rem}
.bk-calhead{display:flex;align-items:center;gap:6px;padding:8px 12px}
.bk-calhead .u-btn[aria-label]{width:30px;padding:0}
.bk-wk{flex:1;font:600 .84rem var(--sans);color:var(--navy);order:-1}
.bk-cal{flex:1;padding:0 12px 12px;min-height:0}
.bk-week{display:grid;grid-template-columns:44px repeat(5,minmax(72px,1fr));min-width:430px}
.bk-hours{display:grid;grid-template-rows:38px repeat(8,40px)}
.bk-hours span{font:500 .66rem var(--sans);color:var(--ui-muted);transform:translateY(-6px)}
.bk-col{border-left:1px solid var(--ui-line)}
.bk-colh{height:38px;display:flex;align-items:baseline;justify-content:center;gap:5px;border-bottom:1px solid var(--ui-line)}
.bk-colh small{font-size:.7rem;color:var(--ui-muted);text-transform:capitalize}
.bk-colh b{font:700 .95rem var(--head);color:var(--navy)}
.bk-col.today .bk-colh b{background:var(--blue);color:#fff;border-radius:6px;padding:0 6px}
.bk-slotsbg{position:relative;display:grid;grid-template-rows:repeat(8,40px)}
.bk-slotsbg>i{border-bottom:1px dashed #edf0f4}
.bk-col.today .bk-slotsbg{background:#f7f9ff}
.bk-ev{position:absolute;left:3px;right:3px;display:grid;align-content:start;gap:0;padding:3px 6px;border-radius:7px;border:0;border-left:3px solid hsl(var(--h) 62% 45%);background:hsl(var(--h) 80% 95%);color:hsl(var(--h) 60% 22%);font:500 .68rem/1.25 var(--sans);text-align:left;overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .15s}
.bk-ev b{font-weight:700}
.bk-ev.short{display:flex;gap:4px;align-items:center;padding-top:1px;padding-bottom:1px}
.bk-ev span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-ev:hover{transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(15,27,45,.5);z-index:2}
.bk-ev.wait{background:repeating-linear-gradient(45deg,#fff7e6,#fff7e6 6px,#fdf0d5 6px,#fdf0d5 12px);border-left-color:#d48a00;color:#6b4300}
.bk-ev.is-new{z-index:3;animation:bk-drop 1.4s var(--spring) both,bk-glow 2.4s 1s ease-out}
@keyframes bk-drop{from{transform:translateY(-40px) scale(1.15);opacity:0}}
@keyframes bk-glow{0%{box-shadow:0 0 0 0 rgba(29,91,255,.6)}100%{box-shadow:0 0 0 12px rgba(29,91,255,0)}}
.bk-drawer{position:absolute;top:0;right:0;bottom:0;z-index:8;width:min(320px,92%);display:flex;flex-direction:column;background:#fff;border-left:1px solid var(--ui-line);box-shadow:-30px 0 50px -30px rgba(15,27,45,.5)}
.bk-dhead{display:flex;gap:10px;align-items:center;padding:14px;border-bottom:1px solid var(--ui-line)}
.bk-dhead .u-av{width:42px;height:42px}
.bk-dhead div{flex:1;min-width:0}
.bk-dhead h5{font-size:1rem}
.bk-dhead small{color:var(--ui-muted);font-size:.74rem}
.bk-x{width:34px;height:34px;border-radius:8px;border:0;background:var(--ui-soft);display:grid;place-items:center;cursor:pointer;color:var(--navy)}
.bk-dbody{flex:1;overflow-y:auto;padding:12px 14px}
.bk-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.bk-contact{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 12px;font-size:.78rem}
.bk-contact dt{color:var(--ui-muted)}.bk-contact dd{margin:0;word-break:break-all}
.bk-dstats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.bk-dstats .u-kpi{padding:8px 10px}.bk-dstats b{font-size:1rem}
.bk-dl{margin:0 0 6px;font:600 .7rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ui-muted)}
.bk-tl{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:2px}
.bk-tl li{display:grid;grid-template-columns:1fr auto;gap:0 8px;padding:7px 8px;border-radius:8px;font-size:.76rem}
.bk-tl li.cur{background:var(--blue-tint)}
.bk-tl b{color:var(--navy)}.bk-tl span{grid-row:2;color:var(--ui-muted)}.bk-tl em{grid-row:span 2;align-self:center;font-style:normal}
.bk-dact{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:1100px){.bk{grid-template-columns:minmax(0,1fr)}.bk-public{max-height:none}.bk-pub-body{overflow:visible}}
@media(max-width:760px){
  .bk{padding:12px;gap:12px;min-height:0}
  .bk-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .bk-flow li{flex-direction:column;gap:2px;font-size:.6rem;padding:6px 2px;white-space:normal;text-align:center;line-height:1.15}
  .bk-flow li+li::before{display:none}
  .bk-kpis{grid-template-columns:1fr 1fr}
  .bk-admin{min-height:620px}
}