/* Portal dashboard (index.php). Moved out of the page and recoloured with the DK tokens.
   Load after dk-tokens.css and dk-components.css. Colours are var(--dkc-*) only, so dark mode works. */

:root{font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit}
button,input,select{font:inherit}
button,summary,select{cursor:pointer}
button{color:inherit}
a,button,input,select,summary{outline-offset:4px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--dkc-accent)}
[hidden]{display:none!important}
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.sidebar{background:var(--dkc-surface);border-right:1px solid var(--dkc-line);padding:30px 18px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{font-size:19px;font-weight:750;padding:0 12px 30px;display:flex;align-items:center;gap:12px}
.brand-icon{background:var(--dkc-accent);color:var(--dkc-primary-ink);border-radius:12px;padding:10px}
.nav-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dkc-muted);padding:28px 12px 10px}
.nav-button{display:flex;width:100%;align-items:center;gap:12px;text-align:left;background:transparent;border:0;padding:12px;border-radius:9px;margin:3px 0;font-size:14px}
.nav-button i{width:18px;text-align:center}
.nav-button .count{margin-left:auto;color:var(--dkc-muted);font-size:12px}
.nav-button:hover{background:var(--dkc-surface-2)}
.nav-button[aria-pressed=true]{background:var(--dkc-tint);color:var(--dkc-accent);font-weight:650}
.old-link{display:block;margin:32px 12px;font-size:13px;color:var(--dkc-muted)}
.main{padding:30px 42px 60px;max-width:1500px;width:100%;margin:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:34px}
.eyebrow{font-size:12px;color:var(--dkc-muted)}
.account{display:flex;align-items:center;gap:18px;font-size:13px}
.account>a{color:var(--dkc-muted)}
.admin{position:relative}
.admin summary{border:1px solid var(--dkc-line);background:var(--dkc-surface);border-radius:8px;padding:9px 13px}
.admin-panel{position:absolute;right:0;top:42px;z-index:5;width:260px;background:var(--dkc-surface);border:1px solid var(--dkc-line);box-shadow:0 12px 30px #2433481c;padding:12px;border-radius:12px}
.admin-panel a{display:block;padding:8px;text-decoration:none;border-radius:5px}
.admin-panel a:hover{background:var(--dkc-tint)}
.admin-panel form{border-top:1px solid var(--dkc-line);margin-top:8px;padding:12px 8px}
.admin-panel select{max-width:100%;margin-top:8px;padding:6px}
.intro h1{font-size:30px;letter-spacing:-.035em;margin:0 0 10px}
.intro p{color:var(--dkc-muted);margin:0 0 26px;line-height:1.5}
.search{display:flex;align-items:center;gap:14px;background:var(--dkc-surface);border:1px solid var(--dkc-line);border-radius:12px;padding:0 17px;max-width:800px;box-shadow:0 3px 8px #24334803}
.search i{color:var(--dkc-muted)}
.search input{width:100%;border:0;background:transparent;padding:17px 0;color:var(--dkc-ink);outline-offset:0}
.search kbd{border:1px solid var(--dkc-line);padding:2px 7px;color:var(--dkc-muted);border-radius:4px}
.filters{margin:15px 0 28px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filters select{padding:8px 12px;border:1px solid var(--dkc-line);border-radius:8px;background:var(--dkc-surface);max-width:230px}
.clear{border:0;background:none;color:var(--dkc-accent);padding:8px}
.result-count{margin-left:auto;font-size:12px;color:var(--dkc-muted)}
.section{margin-top:29px}
.section h2{font-size:16px;margin:0 0 15px;display:flex;gap:10px;align-items:center}
.section h2 i{color:var(--dkc-muted);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.app{display:flex;align-items:flex-start;gap:13px;text-decoration:none;background:var(--dkc-surface);border:1px solid var(--dkc-line);border-radius:12px;padding:19px;min-height:132px;transition:border-color .15s,box-shadow .15s}
.app:hover{border-color:var(--dkc-accent);box-shadow:0 5px 18px #24334809}
.app-icon{width:38px;height:38px;flex-shrink:0;border-radius:10px;background:var(--dkc-tint);color:var(--dkc-accent);display:grid;place-items:center}
.app-body{display:flex;flex-direction:column;min-width:0;gap:7px}
.app strong{font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.description{font-size:12px;color:var(--dkc-muted);line-height:1.55;overflow-wrap:anywhere}
.metadata{font-size:10px;color:var(--dkc-muted);line-height:1.5;margin-top:3px}
.launch{color:var(--dkc-muted);font-size:15px;margin-left:auto}
.empty{padding:42px;background:var(--dkc-surface);border:1px dashed var(--dkc-line-strong);border-radius:12px;text-align:center}
.empty p{color:var(--dkc-muted)}
.notice{background:var(--dkc-warn-bg);border:1px solid var(--dkc-warn);padding:12px 16px;border-radius:8px;font-size:13px;margin-bottom:24px}
.gate{max-width:430px;margin:12vh auto;padding:30px;background:var(--dkc-surface);border:1px solid var(--dkc-line);border-radius:16px}
.gate h1{font-size:25px}
.gate input{display:block;width:100%;padding:12px;border:1px solid var(--dkc-line-strong);border-radius:8px;margin:12px 0}
.primary{background:var(--dkc-accent);color:var(--dkc-primary-ink);padding:11px 18px;border:0;border-radius:8px}
.error{color:var(--dkc-err-text)}
.gate a{font-size:13px}
.footer{margin-top:40px;color:var(--dkc-muted);font-size:12px}
@media(min-width:1600px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1150px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.main{padding:25px}
.shell{grid-template-columns:210px minmax(0,1fr)}
}
@media(max-width:740px){.shell{display:block}
.sidebar{position:static;height:auto;padding:16px;border-right:0;border-bottom:1px solid var(--dkc-line)}
.brand{padding:0 0 12px}
.navigation{display:flex;gap:5px;overflow:auto}
.nav-button{white-space:nowrap;width:auto;flex-shrink:0}
.nav-label,.old-link{display:none}
.main{padding:22px 16px}
.topbar{margin-bottom:25px}
.account{gap:12px}
.grid{grid-template-columns:1fr}
.intro h1{font-size:27px}
.app{min-height:110px}
.search kbd{display:none}
.result-count{width:100%;margin-left:0}
.gate{margin:40px 16px}
.admin-panel{width:240px}
}
/* Compact launcher: retain each app's configured colour. */
.app{position:relative;border-left:4px solid var(--app-color);align-items:center}
.app-icon{background:color-mix(in srgb,var(--app-color) 14%,var(--dkc-surface));color:var(--app-color)}
.environment{font-size:10px;font-weight:650;padding:4px 6px;background:var(--dkc-surface-2);border:1px solid var(--dkc-line);border-radius:5px;flex-shrink:0}
.density{display:flex;border:1px solid var(--dkc-line);border-radius:8px;padding:3px;background:var(--dkc-surface);gap:3px}
.density button{border:0;background:transparent;padding:6px 10px;border-radius:5px;font-size:12px}
.density button[aria-pressed=true]{background:var(--dkc-tint);color:var(--dkc-accent);font-weight:650}
body:not(.detailed) .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
body:not(.detailed) .app{min-height:72px;padding:12px;gap:10px}
body:not(.detailed) .app-icon{width:32px;height:32px;border-radius:8px;font-size:14px}
body:not(.detailed) .app strong{font-size:13px;line-height:1.4}
body:not(.detailed) .metadata,body:not(.detailed) .launch{display:none}
body:not(.detailed) .description{position:absolute;top:calc(100% + 5px);left:8px;right:8px;z-index:10;background:var(--dkc-primary-bg);color:var(--dkc-primary-ink);padding:10px 12px;border-radius:7px;box-shadow:0 5px 15px #24334820;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s}
body:not(.detailed) .app:hover .description,body:not(.detailed) .app:focus-visible .description{opacity:1;visibility:visible}
body:not(.detailed) .app:hover,body:not(.detailed) .app:focus-visible{z-index:2}
body:not(.detailed) .app-body{flex:1}
@media(min-width:1600px){body:not(.detailed) .grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:1250px){body:not(.detailed) .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1000px){body:not(.detailed) .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){body:not(.detailed) .grid{grid-template-columns:1fr}
}
/* Put launch controls in the rail and use all remaining viewport width. */
.shell{grid-template-columns:260px minmax(0,1fr)}
.sidebar{padding:22px 16px;display:flex;flex-direction:column}
.brand{padding:0 8px 20px}
.main{max-width:none;margin:0;padding:22px 26px 40px;min-width:0}
.intro h1{font-size:25px;margin-bottom:6px}
.intro p{font-size:13px;margin-bottom:16px}
.section{margin-top:20px}
.section h2{margin-bottom:12px}
.sidebar-controls{padding-bottom:15px;border-bottom:1px solid var(--dkc-line);margin-bottom:12px}
.sidebar .search{padding:0 10px;gap:8px;border-radius:8px;width:100%}
.sidebar .search input{min-width:0;font-size:12px;padding:12px 0}
.sidebar .search kbd{font-size:11px;padding:1px 5px}
.sidebar .filters{display:flex;flex-direction:column;align-items:stretch;gap:9px;margin:13px 0 0}
.sidebar .filters>label{font-size:12px;color:var(--dkc-muted)}
.sidebar .filters select{width:100%;max-width:none;font-size:12px}
.sidebar .density button{flex:1}
.sidebar .clear{text-align:left;padding:3px 0;font-size:12px}
.sidebar .result-count{margin:0;line-height:1.5;font-size:11px}
.sidebar-account{border-top:1px solid var(--dkc-line);margin-top:20px;padding-top:12px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.sidebar-account>a{padding:10px 12px;border-radius:8px;text-decoration:none}
.sidebar-account>a:hover{background:var(--dkc-tint)}
.sidebar .admin-panel{position:static;width:100%;box-shadow:none;border:0;padding:8px 0}
.sidebar .admin summary{background:var(--dkc-surface-2)}
body:not(.detailed) .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
body.detailed .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
@media(max-width:740px){.shell{display:block}
.sidebar{position:static;height:auto;display:block;padding:16px}
.main{padding:18px 16px 32px}
.sidebar-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.sidebar .filters{margin:0}
.sidebar .search{align-self:start}
.sidebar-account{flex-direction:row;flex-wrap:wrap;align-items:start;margin-top:12px;gap:8px}
.sidebar-account .admin{min-width:120px}
.sidebar-account .admin[open]{width:100%}
.navigation{margin-top:4px}
}
@media(max-width:420px){.sidebar-controls{grid-template-columns:1fr}
}
.brand{font-size:18px;gap:10px;white-space:nowrap}
.brand-icon{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;padding:0;font-size:23px;font-weight:800;line-height:1}
.main>.section:first-of-type{margin-top:0}
.app-item{position:relative;min-width:0}
.app-item>.app{height:100%}
.app-item:hover,.app-item:focus-within{z-index:3}
.editing .app{padding-right:43px!important}
.pin-button{position:absolute;right:8px;top:8px;z-index:4;width:28px;height:28px;border:1px solid var(--dkc-line);background:var(--dkc-surface);border-radius:7px;color:var(--dkc-muted)}
.pin-button[aria-pressed=true]{color:var(--dkc-warn-text);background:var(--dkc-warn-bg)}
.edit-toggle{text-decoration:none;border-top:1px solid var(--dkc-line);margin-top:15px}
.editing .edit-toggle{background:var(--dkc-tint);color:var(--dkc-accent)}
.dragging{opacity:.45}
.editing .grid[data-group-id]{min-height:74px}
#edit-status{display:block;margin-top:6px;color:var(--dkc-err-text)}
.notice>a{margin-left:12px;font-weight:650}

/* DK header sits above the shell, so the shell no longer needs to fill the whole viewport. */
.shell{min-height:calc(100vh - 61px)}
.sidebar{top:0}
.main{min-width:0}
/* shadows that used 8-digit hex alpha are fine in light mode; keep them subtle in dark mode too */
.gate{box-shadow:var(--dkc-shadow)}
.gate h1{margin-top:0}
.primary{background:var(--dkc-primary-bg);color:var(--dkc-primary-ink);min-height:36px}
.notice{border-left:4px solid var(--dkc-warn);color:var(--dkc-warn-text)}
.admin-panel{box-shadow:0 12px 30px rgba(0,0,0,.18)}
@media(max-width:740px){.shell{min-height:0}}
.sidebar-account:empty{display:none}

/* The logo is a dark shape: give it a faint outline on dark backgrounds so it does not vanish into the top bar. */
@media (prefers-color-scheme: dark) { .dkc-brand img { filter: drop-shadow(0 0 1px rgba(255,255,255,.6)); } }