/*
PUCKTOSSET.DK · MASTER DESIGN · GODKENDT / LÅST 2026-09-08
Fælles site-ramme. Sideindholdet inde i .dashboard-main ejes af den enkelte side.
*/
:root{
  --pt-bg-a:#031522;
  --pt-bg-b:#0d3852;
  --pt-header:#061b2a;
  --pt-header-active:#103956;
  --pt-side:#102f4b;
  --pt-side-hover:#174260;
  --pt-side-active:#1f638b;
  --pt-red:#df2633;
  --pt-paper:#f7f8f9;
  --pt-white:#ffffff;
  --pt-text:#102333;
  --pt-muted:#6d7b86;
  --pt-radius:15px;
  --pt-width:1500px;
  --pt-sidebar:205px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  margin:0;
  background:linear-gradient(135deg,var(--pt-bg-a),var(--pt-bg-b));
  font-family:Arial,sans-serif;
  color:var(--pt-text);
}
.pt-page{
  width:min(var(--pt-width),calc(100% - 28px));
  margin:18px auto 28px;
}

/* MASTHEAD */
.brand-masthead{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:8px 20px 16px;
  background:var(--pt-paper);
  border-radius:var(--pt-radius) var(--pt-radius) 0 0;
}
.brand-masthead>a{display:block;width:min(900px,92%)}
.brand-masthead img{
  display:block;width:100%;height:auto;max-height:145px;
  margin:0;object-fit:contain;
}

/* TOPMENU */
.app-header{
  min-height:66px;
  display:flex;
  align-items:center;
  gap:18px;
  position:relative;
  z-index:20;
  padding:0 18px 0 0;
  background:var(--pt-header);
  color:#fff;
}
.app-logo{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 var(--pt-sidebar);
  width:var(--pt-sidebar);
  height:66px;
  overflow:hidden;
}
.app-logo img{
  display:block;
  width:100%;
  height:48px;
  max-height:48px;
  object-fit:contain;
  object-position:center center;
}
.app-nav{
  display:flex;align-items:stretch;align-self:stretch;
  gap:0;flex:1;min-width:0;
}
.app-nav a{
  display:flex;align-items:center;
  padding:0 16px;
  border-bottom:4px solid transparent;
  color:#fff;text-decoration:none;
  font-size:13px;font-weight:800;
  white-space:nowrap;
}
.app-nav a:hover,.app-nav a.active{
  background:#0a426f;
  border-bottom-color:#d3202f;
}
.app-nav a.future-link{opacity:.72}

/* BRUGER + DROPDOWN */
.app-user{
  margin-left:auto;
  color:#fff;
  position:relative;
  white-space:nowrap;
  min-width:max-content;
}
.app-user>summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:9px;
}
.app-user>summary::-webkit-details-marker{display:none}
.app-user-avatar{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:#edf1f3;color:#17324b;font-size:18px;
}
.app-user-text{display:flex;flex-direction:column;line-height:1.15}
.app-user-text strong{font-size:13px;font-weight:900}
.app-user-text small{font-size:11px;opacity:.78;margin-top:3px}
.pt-user-arrow{font-size:14px;line-height:1;margin-left:2px}
.pt-user-dropdown{
  position:absolute;right:0;top:calc(100% + 13px);z-index:1000;
  min-width:230px;padding:7px;
  background:#fff;border:1px solid #d7e0e6;border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.20);
}
.pt-user-dropdown a{
  display:block;padding:9px 10px;border-radius:6px;
  text-decoration:none;color:#263f4e;font-size:13px;font-weight:700;
}
.pt-user-dropdown a:hover{background:#eef4f7;color:#0d405f}
.pt-user-divider{height:1px;background:#dfe6eb;margin:6px 3px}
.pt-user-heading{
  padding:6px 10px 4px;color:#657785;font-size:10px;
  font-weight:900;letter-spacing:.06em;text-transform:uppercase;
}

/* FÆLLES ARBEJDSRAMME */
.pt-shell{
  margin-top:0;
  background:transparent;
  overflow:visible;
  box-shadow:none;
}
.dashboard-layout{
  display:grid;
  grid-template-columns:var(--pt-sidebar) minmax(0,1fr);
  min-height:760px;
}

/* VENSTREMENU */
.side-nav{
  background:transparent;
  color:#fff;
  padding:22px 0;
}
.side-section{margin-bottom:23px}
.side-title{
  padding:0 18px 8px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#93afc3;font-weight:900;
}
.side-nav a{
  display:block;color:#e8f0f5;text-decoration:none;
  padding:10px 18px;border-left:4px solid transparent;
  font-size:13px;font-weight:700;
}
.side-nav a:hover{background:rgba(31,99,139,.55);color:#fff}
.side-nav a.active{
  background:rgba(31,99,139,.82);color:#fff;
  border-left-color:var(--pt-red);
}

/* DET HVIDE FELT: siden må selv designe alt herinde */
.dashboard-main{
  min-width:0;
  background:#fff;
  padding:24px;
  border-radius:var(--pt-radius);
  overflow:hidden;
  box-shadow:0 25px 70px rgba(0,0,0,.22);
}

/* FÆLLES FOOTER */
.pt-footer{
  padding:17px 16px 2px;
  text-align:center;
  color:rgba(255,255,255,.70);
  font-size:12px;
  letter-spacing:.01em;
}
.pt-footer strong{color:rgba(255,255,255,.90);font-weight:700}

/* RESPONSIV */
@media(max-width:1100px){
  .app-header{gap:10px}
  .app-logo{flex-basis:170px}
  .app-nav{overflow-x:auto}
  .app-nav a{padding:0 11px;font-size:12px}
}
@media(max-width:820px){
  .pt-page{width:min(100% - 12px,var(--pt-width));margin-top:6px}
  .brand-masthead{padding:6px 8px 10px}
  .brand-masthead>a{width:98%}
  .brand-masthead img{max-height:105px}
  .app-header{padding:0 10px 0 0;min-height:62px}
  .app-logo{flex:0 0 150px;width:150px}
  .app-logo img{height:44px;max-height:44px}
  .app-nav{display:none}
  .dashboard-layout{grid-template-columns:1fr}
  .side-nav{display:none}
  .dashboard-main{padding:14px}
  .pt-user-dropdown{right:0;min-width:210px}
}
@media(max-width:520px){
  .app-logo{flex-basis:132px}
  .app-user-text small{display:none}
  .pt-footer{font-size:11px}
}


/* ==========================================================
   V2.1 · PRODUKTIONSLÅS
   Disse regler ligger sidst med vilje og beskytter den
   godkendte fællesramme mod ældre side-specifik CSS.
   ========================================================== */
@media (min-width:821px){
  .app-header{
    height:66px !important;
    min-height:66px !important;
    max-height:66px !important;
    padding:0 18px 0 0 !important;
    gap:18px !important;
  }

  .app-logo{
    box-sizing:border-box !important;
    flex:0 0 var(--pt-sidebar) !important;
    width:var(--pt-sidebar) !important;
    min-width:var(--pt-sidebar) !important;
    max-width:var(--pt-sidebar) !important;
    height:66px !important;
    min-height:66px !important;
    max-height:66px !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .app-logo img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:48px !important;
    min-height:0 !important;
    max-height:48px !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain !important;
    object-position:center center !important;
  }

  .dashboard-layout{
    grid-template-columns:var(--pt-sidebar) minmax(0,1fr) !important;
    background:transparent !important;
  }

  /* Samme gradient som den yderste site-ramme.
     background-attachment:fixed får gradienten til at følge viewporten,
     så venstremenuen visuelt fortsætter den omgivende baggrund. */
  .side-nav{
    background:linear-gradient(135deg,var(--pt-bg-a),var(--pt-bg-b)) !important;
    background-attachment:fixed !important;
    color:#fff !important;
    padding:22px 0 !important;
    border-radius:0 !important;
  }

  .dashboard-main{
    min-width:0 !important;
    background:#fff !important;
    padding:24px !important;
    border-radius:var(--pt-radius) !important;
    overflow:hidden !important;
    box-shadow:0 25px 70px rgba(0,0,0,.22) !important;
  }

  .pt-shell{
    background:transparent !important;
    overflow:visible !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }
}