/* Handyfixer Partner-portal — lyst, professionelt cockpit (emerald + navy) */
:root{
  --navy:#0B1B2E; --ink:#172433; --mut:#66788A; --line:#E6ECF1;
  --bg:#F4F7F6; --card:#FFFFFF; --raise:#FBFDFC;
  --em:#66c2f4; --em-d:#0b7fa8; --em-bg:#e2f4fc;
  --blue:#1668B8; --amber:#C2740A; --amber-bg:#FBEFD9; --red:#D23A3A; --red-bg:#FBE7E7;
  --sh:0 1px 2px rgba(16,32,48,.04),0 4px 16px rgba(16,32,48,.05);
  --r:16px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
.tnum{font-variant-numeric:tabular-nums}

/* Layout: lys sidebar + indhold */
.pt{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.pt-side{background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.pt-brand{display:flex;align-items:center;gap:11px;padding:22px 22px 18px;font-weight:700;font-size:17px;color:var(--navy)}
.pt-brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--em),var(--em-d));color:#fff;display:flex;align-items:center;justify-content:center}
.pt-brand .logo svg{width:19px;height:19px}
.pt-nav{padding:8px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.pt-nav .grp{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:600;padding:16px 12px 6px}
.pt-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:var(--mut);font-size:14.5px;font-weight:500;transition:background .15s,color .15s}
.pt-nav a i{font-size:19px}
.pt-nav a:hover{background:var(--raise);color:var(--ink)}
.pt-nav a.on{background:var(--em-bg);color:var(--em-d);font-weight:600}
.pt-side-foot{padding:14px;border-top:1px solid var(--line)}
.pt-user{display:flex;align-items:center;gap:11px;padding:8px 6px}
.pt-user .av{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex:none}
.pt-user b{font-size:13.5px;display:block;line-height:1.2;color:var(--ink)}
.pt-user span{font-size:12px;color:var(--mut)}

.pt-main{min-width:0;display:flex;flex-direction:column}
.pt-top{height:64px;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:20}
.pt-top .menu-btn{display:none;background:none;border:0;font-size:22px;color:var(--ink);cursor:pointer}
.pt-content{padding:26px;max-width:1120px;width:100%;margin:0 auto}

h1.pt-h1{font-size:24px;letter-spacing:-.01em;margin:0 0 3px;font-weight:700;color:var(--navy)}
.pt-sub{color:var(--mut);font-size:14.5px;margin:0}
.pt-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}

/* Kort */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card-h{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.card-h h3{font-size:15.5px;margin:0;font-weight:650;color:var(--navy)}
.card-b{padding:20px 22px}

/* Stat-kort */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh);position:relative;overflow:hidden}
.stat .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:14px}
.stat.em .ic{background:var(--em-bg);color:var(--em-d)} .stat.blue .ic{background:#E7F0FB;color:var(--blue)}
.stat.amber .ic{background:var(--amber-bg);color:var(--amber)} .stat.navy .ic{background:#E9EDF2;color:var(--navy)}
.stat .num{font-size:27px;font-weight:750;letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1}
.stat .lbl{font-size:13px;color:var(--mut);margin-top:5px}

/* Knapper */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:11px;padding:10px 16px;font-size:14px;font-weight:600;font-family:var(--font);cursor:pointer;transition:background .15s,border-color .15s,transform .05s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-em{background:var(--em);color:#06283a;font-weight:700} .btn-em:hover{background:#4bb2ee}
.btn-ghost{background:var(--card);border-color:var(--line);color:var(--ink)} .btn-ghost:hover{background:var(--raise)}
.btn-sm{padding:7px 12px;font-size:13px}
.btn-lg{padding:13px 22px;font-size:15px;width:100%;justify-content:center}

/* Badges */
.badge{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;display:inline-block}
.badge.ok{background:var(--em-bg);color:var(--em-d)} .badge.warn{background:var(--amber-bg);color:var(--amber)}
.badge.off{background:#EEF2F5;color:var(--mut)} .badge.blue{background:#E7F0FB;color:var(--blue)}

/* Tabel/liste */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:600;padding:11px 16px;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:14px}
.tbl tr:last-child td{border-bottom:0}

/* Felter */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:13px;font-weight:600;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px;font-family:var(--font);font-size:14.5px;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--em);box-shadow:0 0 0 3px rgba(102,194,244,.13)}

.alert{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border-radius:12px;margin-bottom:18px;font-size:14px}
.alert.ok{background:var(--em-bg);color:var(--em-d)} .alert.err{background:var(--red-bg);color:var(--red)}
.alert i{font-size:19px;flex:none}

@media(max-width:1000px){ .stats{grid-template-columns:repeat(2,1fr)} }
@media(max-width:860px){
  .pt{grid-template-columns:1fr}
  .pt-side{position:fixed;left:-260px;z-index:60;transition:left .2s;width:250px} .pt-side.open{left:0}
  .pt-top .menu-btn{display:block}
}
@media(max-width:560px){ .stats{grid-template-columns:1fr} .pt-content{padding:18px} }

/* Login */
.pt-login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.pt-login-hero{background:linear-gradient(150deg,var(--navy),#0A2E3A 60%,var(--em-d));color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between}
.pt-login-hero .logo{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.pt-login-hero h2{font-size:32px;line-height:1.15;letter-spacing:-.02em;margin:0 0 12px;font-weight:750;text-wrap:balance}
.pt-login-hero p{font-size:16px;color:rgba(255,255,255,.8);max-width:38ch;margin:0}
.pt-login-form{display:flex;align-items:center;justify-content:center;padding:40px}
.pt-login-form .inner{width:100%;max-width:360px}
@media(max-width:820px){ .pt-login{grid-template-columns:1fr} .pt-login-hero{display:none} }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIL
   Portalen var bygget til skrivebord: dashboardet fyldte 495px paa en 390px
   skaerm, saa siden kunne trilles sidelaens, og halvdelen af knapperne var
   under 44px. Reglerne herunder er tilfoejet 2026-08-01.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sidemenuen ligger uden for skaermen og skydes ind med .open. Uden et
   moerkt lag bagved kan man hverken se at den er modal eller lukke den igen
   uden at ramme burgeren praecist. */
.pt-overlay{
    position:fixed; inset:0; background:rgba(9,20,33,.55);
    opacity:0; pointer-events:none; transition:opacity .2s; z-index:55;
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.pt-side.open ~ .pt-overlay,
.pt-overlay.vis{ opacity:1; pointer-events:auto; }

@media(max-width:860px){
    /* Fanger indhold der stikker ud, saa hele siden ikke kan trilles sidelaens. */
    .pt-content{ overflow-x:hidden; }

    /* Brede tabeller skal rulle i deres EGEN kasse, ikke tage siden med sig. */
    .table-wrap, .pt-content .card-b > table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .pt-content table{ min-width:520px; }
    .pt-content .card-b:has(> table){ overflow-x:auto; }
}

@media(max-width:560px){
    /* Inline-styling slaar almindelige regler, saa de faa gitter der reelt
       braekker maa rammes praecist paa deres style-attribut. 1fr auto og
       auto-fill roeres ikke — de klarer sig selv. */

    /* 44px er minimum for en tommel (WCAG 2.5.8 / Apple HIG). */
    .pt-content .btn, .pt-top .btn, .pt-side a{ min-height:44px; }
    .pt-content .btn{ display:inline-flex; align-items:center; justify-content:center; }
    /* Under 16px zoomer iOS ind naar feltet faar fokus. */
    .pt-content input, .pt-content select, .pt-content textarea{ min-height:46px; font-size:16px; }

    .pt-content{ padding:16px; }
    .pt-content .card-b{ padding:16px; }
    /* Knapper i kort-hoveder skal under overskriften, ikke klemmes ved siden af. */
    .card-h{ flex-wrap:wrap; gap:10px; }
}

/* Brede tabeller ruller vandret i deres EGEN kasse — ellers traekker de hele
   siden med sig. Gaelder alle bredder, ikke kun mobil: en tabel med mange
   kolonner kan ogsaa sprænge et smalt browservindue. */
.tabel-rul{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.tabel-rul > table{ min-width:560px; }

@media(max-width:560px){
    /* Alle inline-satte gitre bliver én kolonne. Paa 390px er to kolonner
       alligevel aldrig rigtigt, og alternativet — at jagte hver enkelt
       broek-variant — betoed at "Hurtige handlinger" laa 598px ude og var
       usynlig bag overflow-x:hidden. */
    .pt-content [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
    /* Burgeren var 28x28. */
    .pt-top .menu-btn{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
}

@media(max-width:560px){
    /* Et 1fr-spor har min-width:auto og kan derfor IKKE krympe under sit
       indholds egen minimumsbredde — en bred tabel inde i kortet holdt sporet
       paa 562px selv efter at gitteret var faldet til én kolonne.
       min-width:0 giver sporet lov til at give efter. */
    .pt-content [style*="grid-template-columns"] > *{ min-width:0; }
    .pt-content .card, .pt-content .card-b{ min-width:0; max-width:100%; }
    .pt-content .card-b > *{ max-width:100%; }
}

@media(max-width:560px){
    /* Ikon-knapper i topbjaelke og sidefod laa uden for .pt-content og blev
       derfor ikke ramt af reglen ovenfor. 44px gaelder ALLE klikflader. */
    .btn-sm, .pt-top button, .pt-side button, .pt-side-foot a, .pt-side-foot button{
        min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center;
    }
}