/* The back office frame: the same five places, always in the same spot.
   Sidebar on computers, bottom bar on phones. Prefixed dp- so it never clashes with page styles. */
:root{--dp-side:#15303f;--dp-side-ink:#e8f2f5;--dp-side-muted:#9fbac4;--dp-active:#0d7490;--dp-count:#f7b52c;--dp-bar:#ffffff;--dp-bar-line:#d8e4e8;--dp-bar-ink:#4a6270;--dp-bar-active:#0d7490;--dp-bar-active-bg:#dcf0f6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--dp-side:#0e1c24;--dp-bar:#17252c;--dp-bar-line:#2b3d45;--dp-bar-ink:#a9bec6;--dp-bar-active:#7fd0e6;--dp-bar-active-bg:#173845}}
:root[data-theme="dark"]{--dp-side:#0e1c24;--dp-bar:#17252c;--dp-bar-line:#2b3d45;--dp-bar-ink:#a9bec6;--dp-bar-active:#7fd0e6;--dp-bar-active-bg:#173845}
.dp-skip{position:absolute;left:-9999px;top:8px;z-index:50;background:#fff;color:#15303f;padding:10px 14px;border-radius:10px;font-weight:700}
.dp-skip:focus{left:8px}
.dp-side{position:fixed;left:0;top:0;bottom:0;width:236px;background:var(--dp-side);color:var(--dp-side-ink);display:flex;flex-direction:column;padding:20px 14px calc(16px + env(safe-area-inset-bottom,0px));z-index:10;overflow-y:auto}
.dp-brand{display:flex;align-items:center;gap:12px;color:var(--dp-side-ink);text-decoration:none;padding:4px 8px 22px}
.dp-mark{width:40px;height:40px;border-radius:50%;background:#c63d2b;display:grid;place-items:center;font-size:20px;flex:none}
.dp-brand b{display:block;font-size:17px;line-height:1.2}
.dp-brand small{display:block;font-size:13px;color:var(--dp-side-muted);font-weight:400}
.dp-nav{display:flex;flex-direction:column;gap:4px}
.dp-nav a{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 12px;border-radius:12px;color:var(--dp-side-ink);text-decoration:none;font-weight:700;font-size:17px}
.dp-nav a:hover{background:rgba(255,255,255,.08)}
.dp-nav a[aria-current="page"]{background:var(--dp-active);color:#fff}
.dp-ico{font-size:21px;width:26px;text-align:center;flex:none}
.dp-count{margin-left:auto;min-width:26px;height:24px;padding:0 8px;border-radius:999px;background:var(--dp-count);color:#2b2106;font-size:14px;display:grid;place-items:center}
.dp-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.dp-side-foot a{color:var(--dp-side-muted);text-decoration:none;padding:9px 12px;border-radius:10px;font-size:15px}
.dp-side-foot a:hover{color:var(--dp-side-ink);background:rgba(255,255,255,.06)}
.dp-main{margin-left:236px;min-height:100vh}
.dp-bottom{display:none}
.dp-side a:focus-visible,.dp-bottom a:focus-visible{outline:3px solid var(--dp-count);outline-offset:2px}
@media (max-width:860px){
  .dp-side{display:none}
  .dp-main{margin-left:0;padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  .dp-bottom{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--dp-bar);border-top:1px solid var(--dp-bar-line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .dp-bottom a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;border-radius:12px;color:var(--dp-bar-ink);text-decoration:none;font-size:13px;font-weight:700}
  .dp-bottom .dp-ico{font-size:22px;width:auto}
  .dp-bottom a[aria-current="page"]{background:var(--dp-bar-active-bg);color:var(--dp-bar-active)}
  .dp-bottom .dp-count{position:absolute;top:2px;left:calc(50% + 6px);margin:0;height:20px;min-width:20px;padding:0 6px;font-size:12px}
}
@media print{.dp-side,.dp-bottom{display:none}.dp-main{margin:0;padding:0}}