/* =====================================================
LIVE API DASHBOARD
Use shared ToolyTools CSS as the base layer
===================================================== */

body.dashboardPage{
color:var(--text);
padding:0;
display:flex;
flex-direction:column;
min-height:100vh;
}

body.dashboardPage,
body.dashboardPage *,
body.dashboardPage *::before,
body.dashboardPage *::after{
box-sizing:border-box;
}

body.dashboardPage main,
body.dashboardPage .siteFooter{
z-index:1;
}

.dashboardScreen{
flex:1;
padding:28px 4vw 32px;
}

.dashboardContainer{
width:100%;
max-width:100%;
margin:0 auto;
display:flex;
flex-direction:column;
gap:14px;
}

.dashboardHero{
padding-top:8px;
text-align:center;
}

.heroEyebrow{
margin:0 0 8px;
font-size:13px;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--muted);
}

.dashboardHero h1{
margin:0;
font-size:clamp(34px, 4vw, 52px);
line-height:1.08;
letter-spacing:-0.03em;
color:var(--text);
}

.glassPanel{
background:var(--surface-raised);
border:1px solid var(--border);
}

.sidebarToggleBtn{
position:fixed;
top:26px;
right:26px;
z-index:999;
width:58px;
height:58px;
padding:0;
border-radius:0;
border:none;
background:transparent;
color:var(--button-text);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
box-shadow:none;
transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}

.sidebarToggleBtn.isLive{
color:var(--primary);
}

.sidebarToggleBtn.isLive:hover,
.sidebarToggleBtn.isLive:focus-visible{
color:var(--primary);
}

.sidebarToggleBtn.isLoading{
color:var(--primary);
}

.sidebarToggleBtn.isError{
color:var(--danger);
}

.sidebarToggleBtn:hover{
color:var(--primary);
box-shadow:none;
transform:translateY(-2px);
}

.sidebarToggleBtn.isLive:hover .toggleGlyph,
.sidebarToggleBtn.isLive:focus-visible .toggleGlyph,
.sidebarToggleBtn.isLoading:hover .toggleGlyph,
.sidebarToggleBtn.isLoading:focus-visible .toggleGlyph{
width:auto;
height:auto;
border:none;
background:transparent;
animation:none;
font-size:28px;
font-weight:300;
line-height:1;
transform:translateY(-1px);
}

.sidebarToggleBtn.isLive:hover .toggleGlyph::before,
.sidebarToggleBtn.isLive:focus-visible .toggleGlyph::before{
content:"+";
}

.sidebarToggleBtn:focus-visible{
outline:none;
box-shadow:0 0 0 3px rgba(62,207,142,0.14);
color:var(--primary);
}

.toggleGlyph{
font-size:28px;
line-height:1;
font-weight:300;
transform:translateY(-1px);
}

.loadingGlyph{
font-size:28px;
font-weight:300;
line-height:1;
animation:spin .9s linear infinite;
transform:none;
}

.liveGlyph{
width:10px;
height:10px;
background:currentColor;
border-radius:50%;
animation:pulse 1.5s infinite;
transform:none;
}

.sidebar{
position:fixed;
top:0;
bottom:0;
right:0;
width:400px;
max-width:100vw;
box-sizing:border-box;
z-index:1000;
padding:28px 24px 24px;
display:flex;
flex-direction:column;
gap:18px;
border-radius:0;
border-top:none;
border-right:none;
border-bottom:none;
overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
transform:translateX(calc(100% + 32px));
opacity:0;
visibility:hidden;
pointer-events:none;
transition:transform .35s cubic-bezier(.25,.8,.25,1), opacity .2s ease, visibility .2s ease;
background:var(--surface-raised);
}

.sidebar.open{
transform:translateX(0);
opacity:1;
visibility:visible;
pointer-events:auto;
}

body.dashboardPage.sidebarOpen{
overflow:hidden;
}

.sidebarHeader{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
padding-bottom:16px;
border-bottom:1px solid var(--border);
}

.sidebarEyebrow{
margin:0 0 6px;
font-family:var(--font-mono);
font-size:12px;
letter-spacing:0;
text-transform:uppercase;
color:var(--muted);
}

.sidebarHeader h2{
margin:0;
font-size:24px;
line-height:1.15;
color:var(--text);
}

.closeBtn{
border:none;
background:transparent;
color:var(--muted);
font-size:34px;
line-height:1;
cursor:pointer;
padding:0;
transition:color .2s ease;
}

.closeBtn:hover{
color:var(--danger);
}

.sidebarIntro{
margin:0;
font-family:var(--font-mono);
font-size:14px;
line-height:1.55;
color:var(--muted-strong);
}

.sidebarForm{
display:flex;
flex-direction:column;
gap:18px;
}

.inputGroup{
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:0;
}

.inputGroup .formLabel{
font-size:14px;
font-weight:500;
color:var(--muted);
margin-bottom:0;
}

.inputWrapper{
position:relative;
display:flex;
align-items:center;
}

.inputWrapper input,
.inputWrapper textarea,
.sortRow select{
border-color:var(--border);
background:var(--input);
color:var(--text);
}

.inputWrapper input{
padding-left:46px;
}

.inputWrapper textarea{
min-height:116px;
padding:14px 14px 14px 46px;
border:1px solid var(--border);
background:var(--input);
color:var(--text);
}

.sortRow{
display:flex;
gap:10px;
}

.sortFieldWrap{
flex:1;
}

.sortRow select{
width:110px;
padding:0 14px;
flex-shrink:0;
}

.inputWrapper input:focus,
.inputWrapper textarea:focus,
.sortRow select:focus{
border-color:var(--border-accent);
box-shadow:0 0 0 3px rgba(62,207,142,0.08);
background:#141414;
}

.fieldMark{
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
width:20px;
height:20px;
border-radius:0;
display:flex;
align-items:center;
justify-content:center;
font-size:10px;
font-weight:700;
letter-spacing:.06em;
color:var(--muted);
background:rgba(255,255,255,0.04);
border:1px solid var(--border);
pointer-events:none;
}

.textareaMark{
top:16px;
transform:none;
}

.actionButtons{
display:flex;
flex-direction:column;
gap:10px;
margin-top:4px;
}

.primaryBtn{
height:48px;
background:var(--button-bg);
}

.secondaryBtn{
height:48px;
background:var(--button-bg);
color:var(--button-text);
}

.secondaryBtn:hover:not(:disabled){
color:var(--primary);
}

.errorMessage{
padding:14px 16px;
border-radius:0;
border:1px solid rgba(248,113,113,0.3);
background:rgba(248,113,113,0.08);
color:#fecaca;
font-size:14px;
line-height:1.5;
}

.resetBtn{
align-self:flex-start;
padding:8px 14px;
border-radius:0;
border:none;
background:var(--button-bg);
color:var(--button-text);
font-family:inherit;
font-size:13px;
cursor:pointer;
transition:background .2s ease, color .2s ease;
}

.resetBtn:hover{
color:var(--primary);
}

@keyframes spin{
to{ transform:rotate(360deg); }
}

@keyframes pulse{
0%{ box-shadow:0 0 0 0 rgba(62,207,142,0.4); }
70%{ box-shadow:0 0 0 10px rgba(62,207,142,0); }
100%{ box-shadow:0 0 0 0 rgba(52,211,153,0); }
}

.dashboardArea{
animation:fadeIn .6s ease both;
}

.dashboardHeader{
display:flex;
justify-content:flex-end;
align-items:center;
margin-bottom:12px;
}

.lastUpdated{
font-size:13px;
color:var(--muted);
}

.cardsGrid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:18px;
}

.emptyState{
grid-column:1 / -1;
padding:64px 24px;
border-radius:var(--radius-lg);
border:1px dashed var(--border-strong);
background:var(--surface-muted);
text-align:center;
color:var(--muted-strong);
}

.emptyStateBadge{
width:68px;
height:68px;
margin:0 auto 18px;
border-radius:0;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
font-weight:700;
letter-spacing:.16em;
color:var(--text);
background:var(--bg-deep);
border:1px solid var(--border);
}

.emptyState p{
margin:0;
font-size:15px;
}

.dataCard{
background:var(--surface-raised);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:20px;
display:flex;
flex-direction:column;
gap:14px;
position:relative;
overflow:hidden;
transition:transform .28s ease, background .28s ease, border-color .28s ease;
}

.dataCard::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:3px;
background:linear-gradient(90deg, var(--primary), var(--primary-strong));
opacity:0;
transition:opacity .28s ease;
}

.dataCard:hover{
transform:translateY(-4px);
background:var(--bg-elevated);
border-color:var(--border-accent);
}

.dataCard:hover::before{
opacity:1;
}

.dataCard.initialAnimate{
animation:slideUp .45s ease both;
}

.cardTitle{
font-size:18px;
font-weight:600;
line-height:1.35;
padding-bottom:12px;
border-bottom:1px solid var(--border);
color:var(--text);
}

.cardBody{
display:flex;
flex-direction:column;
gap:10px;
}

.actionButtons.formActions{
margin-top:4px;
flex-direction:column;
gap:10px;
}

.dataRow{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:18px;
padding:6px 0;
}

.dataRow:not(:last-child){
border-bottom:1px dashed var(--border-soft);
}

.dataKey{
max-width:42%;
font-size:14px;
font-weight:500;
color:var(--muted);
word-break:break-word;
}

.dataValue{
max-width:58%;
font-size:15px;
font-weight:600;
text-align:right;
word-break:break-word;
color:var(--text);
}

.dataValue.number{
color:var(--success);
font-variant-numeric:tabular-nums;
}

.dataValue.boolean{
color:var(--primary-strong);
}

.dataValue.null{
color:var(--muted);
font-style:italic;
}

.dataValue a{
color:var(--primary);
text-decoration:none;
}

.dataCard.flashing{
animation:flash 1s ease-out;
}

.liveApiFooter{
margin-top:0;
}

.liveApiFooter .footerInner{
color:var(--muted);
}

.liveApiFooter .footerLinks a{
color:inherit;
}

.liveApiFooter .footerLinks a:hover{
color:var(--primary);
}

@keyframes fadeIn{
from{ opacity:0; }
to{ opacity:1; }
}

@keyframes slideUp{
from{ opacity:0; transform:translateY(18px); }
to{ opacity:1; transform:translateY(0); }
}

@keyframes flash{
0%{ box-shadow:none; background:rgba(62,207,142,0.12); }
100%{ box-shadow:none; background:linear-gradient(180deg, rgba(29,29,29,0.98), rgba(20,20,20,0.98)); }
}

body.dashboardPage ::-webkit-scrollbar{
width:8px;
height:8px;
}

body.dashboardPage ::-webkit-scrollbar-track{
background:#111111;
}

body.dashboardPage ::-webkit-scrollbar-thumb{
background:#363636;
border-radius:0;
}

body.dashboardPage ::-webkit-scrollbar-thumb:hover{
background:rgba(62,207,142,0.4);
}

@media (max-width:768px){

.dashboardScreen{
padding:20px 16px 28px;
}

.dashboardHero{
padding-top:10px;
text-align:left;
padding-right:72px;
}

.sidebar{
width:100%;
right:0;
padding:24px 18px 40px;
}

.sidebarToggleBtn{
top:18px;
right:18px;
height:52px;
width:52px;
}

.cardsGrid{
grid-template-columns:1fr;
gap:14px;
}

.dashboardHeader{
justify-content:flex-start;
}

}