/* BlueCoree Licence Authority — colourful theme matching the billing app */
:root{
 --indigo:#5b4cf0;--violet:#8b5cf6;--pink:#ec4899;--orange:#f97316;--green:#10b981;--sky:#0ea5e9;--rose:#f43f5e;--amber:#f59e0b;
 --ink:#1e1b3a;--muted:#6b6890;--line:#ebe8fb;--soft:#f6f4ff;
 --primary:linear-gradient(120deg,#5b4cf0,#8b5cf6 55%,#c04cf0);
 --shadow:0 6px 22px #4c1d9512;--shadow-lift:0 12px 30px #4c1d9524;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--ink);font:14px "Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;background:radial-gradient(900px 500px at 100% -10%,#fde7f3 0,transparent 60%),radial-gradient(800px 500px at 0 0,#e5e9ff 0,transparent 55%),#f7f6fd fixed}
a{color:var(--indigo);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}
small,.muted{color:var(--muted)}
::selection{background:#c4b5fd}
:focus-visible{outline:3px solid #a78bfa;outline-offset:2px}

/* Header bar */
.portal-head{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px max(16px,calc((100vw - 1320px)/2));background:linear-gradient(110deg,#1b1748,#3b2a9c 55%,#7e22ce);color:white;box-shadow:0 6px 24px #1b174840}
.portal-brand{display:flex;align-items:center;gap:12px}
.portal-brand img{width:42px;height:42px;padding:5px;background:white;border-radius:12px;box-shadow:0 4px 14px #0005}
.portal-brand strong{display:block;font-size:19px;letter-spacing:-.3px}
.portal-brand small{display:block;color:#c4b5fd;font-size:9.5px;font-weight:700;letter-spacing:2px;margin-top:2px}
.portal-head-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.portal-head-actions form{margin:0}
.head-link{color:white;background:#ffffff1a;border:1px solid #ffffff33;padding:8px 14px;border-radius:20px;font-size:12.5px}
.head-link:hover{background:#ffffff2e;text-decoration:none}
.portal-head .secondary{background:white;color:#4c1d95}

/* Layout */
.portal{max-width:1320px;margin:0 auto;padding:22px 16px 48px}
.page-title{font-size:26px;font-weight:750;letter-spacing:-.5px;margin:6px 0 18px;background:linear-gradient(90deg,#3b2fc9,#a21caf 60%,#db2777);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
h2{font-size:17px;color:#2b2560;margin:0 0 14px;display:flex;align-items:center;gap:10px}
h2:before{content:'';width:8px;height:22px;border-radius:4px;background:linear-gradient(180deg,var(--indigo),var(--pink))}
.panel,.card{background:white;border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:20px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 16px}

/* Stat cards */
.stat-grid{gap:16px;margin-bottom:22px}
.stat-grid .card{margin:0;border:0;color:white;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 10px 24px color-mix(in srgb,var(--a) 30%,transparent);transition:transform .15s}
.stat-grid .card:hover{transform:translateY(-3px)}
.stat-grid .card:after{content:'';position:absolute;width:120px;height:120px;right:-40px;bottom:-60px;border-radius:50%;background:white;opacity:.14}
.stat-grid .card small{color:#ffffffde;font-size:12.5px;font-weight:600}
.stat-grid .card strong{display:block;font-size:30px;font-weight:750;margin-top:10px;font-variant-numeric:tabular-nums}
.stat-grid .card:nth-child(6n+1){--a:#6d5df5;--b:#a855f7}
.stat-grid .card:nth-child(6n+2){--a:#10b981;--b:#14b8a6}
.stat-grid .card:nth-child(6n+3){--a:#f43f5e;--b:#fb7185}
.stat-grid .card:nth-child(6n+4){--a:#f59e0b;--b:#f97316}
.stat-grid .card:nth-child(6n+5){--a:#0ea5e9;--b:#3b82f6}
.stat-grid .card:nth-child(6n+6){--a:#ec4899;--b:#c026d3}

/* Forms */
label{display:block;margin:10px 0;color:#4a4670;font-size:12.5px;font-weight:600}
input,select,textarea{width:100%;padding:10px 12px;margin-top:6px;border:1px solid #dcd7f5;border-radius:10px;background:#fcfbff;font:inherit;color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 3px #8b5cf62e;background:white}
input[type=checkbox]{width:auto;margin-right:6px;accent-color:var(--violet)}
button,.button{display:inline-block;cursor:pointer;background:var(--primary);color:white;border:0;border-radius:10px;padding:10px 18px;font:inherit;font-weight:650;box-shadow:0 4px 12px #5b4cf033;transition:transform .12s,box-shadow .12s,filter .12s}
button:hover,.button:hover{transform:translateY(-1px);box-shadow:0 8px 18px #5b4cf040;filter:brightness(1.05)}
.secondary{background:#efeafe;color:#5039c9;box-shadow:none}
.danger{background:linear-gradient(120deg,var(--rose),#e11d48);box-shadow:0 4px 12px #f43f5e33}
.panel form{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.panel form button{margin-top:8px}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filters{display:flex;gap:15px;align-items:end;flex-wrap:wrap}
.filters label{min-width:140px}
details{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--soft)}
details summary{cursor:pointer;font-weight:650;color:#4c1d95}

/* Tables */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;margin:6px 0 4px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;background:linear-gradient(90deg,#f1eeff,#fbf0fb);color:#5b4a9e;font-weight:650;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
td,th{padding:11px 12px;border-bottom:1px solid #efecfb}
tbody tr:nth-child(even){background:#fcfbff}
tbody tr:hover{background:#f5f2ff}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* Messages */
.notice{background:linear-gradient(90deg,#eef2ff,#fdf2f8);border:1px solid #e0dcfc;border-left:4px solid var(--indigo);padding:14px 16px;border-radius:12px;margin:0 0 18px}
.notice pre{white-space:pre-wrap;word-break:break-all;background:white;border:1px dashed #c4b5fd;border-radius:10px;padding:12px;margin:10px 0 0;font-size:14px}
.error{color:#be123c;background:#fff1f3;border:1px solid #fecdd3;border-left:4px solid var(--rose);padding:12px 14px;border-radius:12px;margin:0 0 18px}
.error:empty{display:none}

/* Sign-in page */
body.portal-login{display:grid;place-items:center;padding:24px 16px;background:radial-gradient(700px 500px at 0 0,#3b2a9c 0,transparent 60%),radial-gradient(600px 500px at 100% 100%,#be185d 0,transparent 60%),#1b1748}
.portal-login .portal{width:100%;max-width:420px;padding:0;margin:0}
.login-card{background:white;border-radius:22px;padding:34px 30px 30px;box-shadow:0 30px 80px #0006;text-align:left}
.login-logo{display:block;width:64px;height:64px;padding:6px;margin-bottom:18px;border-radius:16px;background:white;box-shadow:0 8px 22px #4c1d9530}
.login-kicker{display:block;font-size:10px;font-weight:800;letter-spacing:2px;color:var(--violet)}
.login-card h1{font-size:28px;letter-spacing:-.6px;margin:8px 0 6px}
.login-card .muted{margin:0 0 14px}
.login-card button{width:100%;margin-top:16px;padding:13px}
.portal-login .error{max-width:420px}

@media(max-width:600px){.portal-head{position:static}.stat-grid .card strong{font-size:24px}.panel{padding:16px}}
@media print{.portal-head,form,.no-print{display:none!important}body{background:white}.panel{border:0;box-shadow:none;padding:0}thead{display:table-header-group}tr{break-inside:avoid}@page{size:A4;margin:15mm}}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:capitalize;background:#f1f0f9;color:#6b6890}
.pill-active{background:#d1fae5;color:#047857}
.pill-suspended{background:#ffedd5;color:#c2410c}
.pill-revoked{background:#ffe4e6;color:#be123c}
/* Audit history */
.audit-table td{vertical-align:top}
.nowrap{white-space:nowrap}
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:650;white-space:nowrap}
.tag-violet{background:#ede9fe;color:#6d28d9}
.tag-sky{background:#e0f2fe;color:#0369a1}
.tag-green{background:#d1fae5;color:#047857}
.tag-amber{background:#fef3c7;color:#b45309}
.kv{display:inline-block;margin:0 10px 4px 0;padding:2px 8px;border-radius:8px;background:#f6f4ff;font-size:12px}
.kv b{color:#5b4a9e;font-weight:650}
/* One continuous header gradient per table row */
tr:has(>th){background:linear-gradient(90deg,#f1eeff,#fbf0fb)}
th{background:transparent}
/* My account */
.account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.panel .account-card{margin:0;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.account-card h3{margin:0 0 6px;font-size:15px;color:#2b2560}
#account{scroll-margin-top:90px}
/* Delete customer */
details.danger-zone{background:#fff6f7;border-color:#fecdd3}
details.danger-zone summary{color:#be123c}
.tag-rose{background:#ffe4e6;color:#be123c}
/* Separate pages: sidebar navigation */
.portal-shell{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0;max-width:1440px;margin:0 auto}
.portal-shell .portal{max-width:none;margin:0;padding:22px 24px 48px;min-width:0}
.portal-nav{position:sticky;top:70px;align-self:start;display:flex;flex-direction:column;gap:4px;margin:22px 0 22px 16px;padding:12px;background:white;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.portal-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;color:#3b3663;font-weight:600;text-decoration:none;transition:background .15s,transform .15s}
.portal-nav a:hover{background:var(--soft);transform:translateX(2px);text-decoration:none}
.nav-icon{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;font-size:14px;color:var(--g);background:color-mix(in srgb,var(--g) 14%,white)}
.portal-nav a.active{background:linear-gradient(90deg,var(--g),color-mix(in srgb,var(--g) 70%,#7e22ce));color:white;box-shadow:0 6px 16px color-mix(in srgb,var(--g) 35%,transparent)}
.portal-nav a.active .nav-icon{background:#ffffff30;color:white}
.nav-dashboard{--g:#6d5df5}.nav-customers{--g:#0ea5e9}.nav-licences{--g:#10b981}.nav-installations{--g:#f59e0b}.nav-payments{--g:#ec4899}.nav-audit{--g:#8b5cf6}.nav-account{--g:#64748b}
a.card{display:block;text-decoration:none}
a.card:hover{text-decoration:none}
@media(max-width:860px){.portal-shell{grid-template-columns:1fr}.portal-nav{position:static;flex-direction:row;flex-wrap:wrap;margin:16px 16px 0}.portal-nav a{padding:8px 10px}.portal-shell .portal{padding:18px 16px 40px}}
/* Stored licence keys */
.key-box{display:flex;gap:8px;align-items:center;margin-top:10px}
.key-box input{margin:0;font-family:Consolas,"Cascadia Mono",monospace;font-size:13px;letter-spacing:.3px;background:white}
.key-reveal{border-left-color:var(--green)}
.key-reveal small{display:block;margin-top:8px}
.key-forms{margin-top:18px}
.panel form.account-card{border-top:1px solid var(--line)}
.panel form + h2,.panel h2 + form{margin-top:22px}
.panel > h2:not(:first-child){margin-top:26px}
.panel form.danger-card{background:#fff6f7;border-color:#fecdd3}
.danger-card h3{color:#be123c}
/* Assign licence */
.assign-form{scroll-margin-top:90px}
.assign-form:target{outline:3px solid #a78bfa;outline-offset:6px;border-radius:12px}
.assign-form h3{margin:0 0 4px;color:#2b2560}
.button.small{padding:6px 12px;font-size:12px}
.pill-none{background:#f1f0f9;color:#6b6890}