.jch-demo-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:999px;background:#2f922f;color:#fff!important;text-decoration:none!important;font-weight:800;box-shadow:0 10px 20px rgba(47,146,47,.22)}
.jch-demo-button:hover{filter:brightness(.96)}
.jch-demo-wrap{max-width:1240px;margin:24px auto;padding:0 16px;font-family:Inter,Arial,sans-serif;color:#1f2d3d;box-sizing:border-box}
.jch-demo-banner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;padding:11px 14px;border:1px solid #cfe7ff;background:#eff8ff;border-radius:14px;color:#20496f}.jch-demo-banner strong{font-weight:950}.jch-demo-banner span{font-size:14px}
.jch-demo-header{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}.jch-demo-header h1{margin:0;font-size:30px;letter-spacing:-.03em}.jch-demo-header p{margin:6px 0 0;color:#64748b}.jch-demo-reset-link{padding:10px 14px;border-radius:12px;background:#f1f5f9;text-decoration:none;font-weight:800;color:#1f2d3d}
.jch-demo-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.jch-demo-kpis div{padding:16px;border:1px solid #e2e8f0;background:#fff;border-radius:18px;box-shadow:0 8px 20px rgba(15,23,42,.05)}.jch-demo-kpis span{display:block;color:#64748b;font-size:13px;font-weight:700}.jch-demo-kpis strong{display:block;margin-top:5px;font-size:28px}
.jch-demo-tabs{display:flex;gap:8px;overflow:auto;padding-bottom:10px;margin-bottom:12px}.jch-demo-tabs a{white-space:nowrap;padding:9px 12px;border-radius:999px;border:1px solid #dbe4ef;color:#334155;text-decoration:none;font-size:13px;font-weight:800;background:#fff}.jch-demo-tabs a.active{background:#183257;color:#fff;border-color:#183257}
.jch-demo-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px}.jch-demo-panel,.jch-demo-side{min-width:0}.jch-demo-panel>h2,.jch-demo-create h2{margin:0 0 12px;font-size:20px}.jch-demo-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.jch-demo-column{padding:14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;min-height:250px}.jch-demo-column h3{margin:0 0 12px;font-size:16px}.jch-demo-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.jch-demo-card{padding:13px;border:1px solid #dce6f2;border-radius:16px;background:#fff;box-shadow:0 8px 18px rgba(15,23,42,.05);margin-bottom:10px}.jch-demo-card-head{display:flex;gap:10px;justify-content:space-between;align-items:flex-start}.jch-demo-card-head strong{font-size:15px}.jch-demo-card-head span{padding:4px 8px;border-radius:999px;background:#eaf7e7;color:#24712a;font-size:11px;font-weight:900;white-space:nowrap}.jch-demo-card p{margin:8px 0 0}.jch-demo-muted{color:#64748b;font-size:13px}.jch-demo-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.jch-demo-actions a{padding:6px 8px;border-radius:9px;background:#f1f5f9;text-decoration:none;color:#334155;font-size:12px;font-weight:800}.jch-demo-empty{color:#64748b;font-size:14px}.jch-demo-create{position:sticky;top:20px;padding:16px;border:1px solid #dce6f2;background:#fff;border-radius:18px;box-shadow:0 10px 24px rgba(15,23,42,.06)}.jch-demo-create label{display:block;margin:0 0 10px;font-size:13px;font-weight:800;color:#334155}.jch-demo-create input[type=text],.jch-demo-create select{width:100%;box-sizing:border-box;margin-top:5px;padding:10px 11px;border:1px solid #d6e2ef;border-radius:12px}.jch-demo-create button{width:100%;border:0;border-radius:13px;padding:12px 14px;background:#2f922f;color:#fff;font-weight:900;cursor:pointer}
@media(max-width:920px){.jch-demo-main{grid-template-columns:1fr}.jch-demo-board,.jch-demo-list{grid-template-columns:1fr}.jch-demo-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.jch-demo-create{position:static}}
@media(max-width:540px){.jch-demo-kpis{grid-template-columns:1fr}.jch-demo-header{display:block}.jch-demo-reset-link{display:inline-flex;margin-top:10px}}


/* Phase 2: real dashboard demo shell */
.jch-demo-core-shell {
    position: relative;
    margin-top: -108px;
}

.jch-demo-mode-ribbon {
    max-width: 1440px;
    margin: 0 auto 6px;
    padding: 6px 12px;
    min-height: 36px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
    color: #1e3a5f;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.jch-demo-mode-ribbon strong {
    font-size: 15px;
    font-weight: 900;
}

.jch-demo-mode-ribbon span {
    font-size: 13px;
    line-height: 1.35;
}

.jch-demo-core-shell .tjc-office-main-actions .tjc-office-primary-action::after {
    content: " Demo";
}

.jch-demo-core-shell .tjc-office-sync-pill::after {
    content: " / Demo Safe";
}

.jch-demo-core-shell .tjc-office-sidebar-footer,
.jch-demo-core-shell .tjc-office-account-menu,
.jch-demo-core-shell .tjc-office-mobile-quickadd {
    display: none !important;
}

@media (max-width: 782px) {
    .jch-demo-core-shell {
        margin-top: -58px;
    }
    .jch-demo-mode-ribbon {
        margin: 6px 10px 8px;
        padding: 8px 10px;
        border-radius: 12px;
        font-size: 13px;
    }
}

/* Phase 3 admin usability + back button */
.jch-demo-mode-ribbon .jch-demo-back-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: #16a34a;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 900;
    border: 1px solid #15803d;
    box-shadow: 0 6px 14px rgba(22, 163, 74, 0.24);
}
.jch-demo-mode-ribbon .jch-demo-back-link:hover {
    background: #15803d;
    color: #ffffff !important;
}
.jch-demo-admin .form-table input.regular-text,
.jch-demo-admin .form-table textarea.large-text,
.jch-demo-admin .form-table select {
    max-width: 620px;
}
@media (max-width: 782px) {
    .jch-demo-mode-ribbon .jch-demo-back-link {
        margin-left: 0;
        width: 100%;
    }
}

.jch-demo-edit-row td { background: #f8fafc; }
.jch-demo-edit-row h3 { margin-top: 0; }

/* Public demo routing controls */
.jch-demo-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
@media(max-width:540px){
    .jch-demo-header-actions {
        justify-content: flex-start;
        margin-top: 10px;
    }
    .jch-demo-header-actions .jch-demo-reset-link {
        margin-top: 0;
    }
}