/* Lone Star Learning - additions for charts, admin forms and tables.
   Uses only the theme tokens from app.css, so colors and light/dark themes stay the same. */

/* ---- Live graphs ---- */
.live-chart{display:flex;flex-direction:column;gap:12px}
.live-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.live-status{font-size:.82rem;color:var(--sage);font-weight:600;display:inline-flex;align-items:center;gap:8px}
.live-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 0 var(--sage);animation:livepulse 2s infinite}
.live-status.is-error{color:var(--amber)}
.live-status.is-error::before{background:var(--amber);animation:none}
@keyframes livepulse{0%{box-shadow:0 0 0 0 var(--sage-soft)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.chart-plot{width:100%}
.chart-plot svg{width:100%;height:auto;display:block}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.88rem}
.legend-item{display:inline-flex;align-items:center;gap:6px}
.legend-item i{width:12px;height:12px;border-radius:3px;display:inline-block}
.range{display:flex;gap:8px;flex-wrap:wrap}
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.feed li{border-top:1px solid var(--line);padding-top:10px;font-size:.92rem}
.feed li:first-child{border-top:0;padding-top:0}

/* ---- Forms ---- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 18px;align-items:end}
.form-grid .span-2{grid-column:1/-1}
.field-note{font-size:.84rem;color:var(--ink-2);margin-top:4px}
.input,.select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font:inherit;color:inherit}
textarea.input{resize:vertical;min-height:90px}
.checkline{display:flex;gap:8px;align-items:center;font-weight:550}
.inline{display:inline}
.btn.danger{background:transparent;color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
.btn.danger:hover{background:var(--red-soft)}
.btn.tiny{padding:4px 10px;font-size:.8rem}
.muted-link{color:var(--ink-2);font-size:.86rem}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.flagbox{display:flex;gap:6px;align-items:center;font-size:.86rem;color:var(--ink-2)}

/* ---- Lists of editable items (lessons, questions) ---- */
.edit-card{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--panel);display:flex;flex-direction:column;gap:12px}
.edit-card + .edit-card{margin-top:14px}
.edit-card:target{outline:3px solid var(--focus);outline-offset:2px}
.edit-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.edit-head h3{font-size:1rem}
.pill.draft{background:var(--amber-soft);color:var(--amber)}
.pill.live{background:var(--sage-soft);color:var(--sage)}
.pill.role{background:var(--panel-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.opt-lines{font-family:inherit}

/* ---- Tables ---- */
td .actions{flex-wrap:nowrap}
td.wrap{white-space:normal;min-width:180px}
details.box{border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:var(--panel)}
details.box > summary{cursor:pointer;font-weight:650}
details.box[open] > summary{margin-bottom:14px}
.search-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

@media (max-width: 880px){
  .form-grid{grid-template-columns:1fr}
}

/* ---- Lone Star Market logo ---- */
.brand{flex-direction:column;align-items:stretch;gap:12px}
.brand-logo{display:block;width:100%;height:auto;background:#fff;border-radius:10px;padding:10px;box-sizing:border-box}
.auth-logo{display:block;width:240px;max-width:100%;height:auto;background:#fff;border-radius:10px;padding:10px;box-sizing:border-box}