/* Untold Stories — admin panel. Self-contained; reuses brand tokens from globals.css. */
:root{
  --a-bg:#f3ead9; --a-panel:#fbf6eb; --a-ink:#102b3e; --a-ink-deep:#071c2b;
  --a-coral:#ef654f; --a-coral-dark:#c84236; --a-mint:#a5d5c2; --a-gold:#e9bc69;
  --a-line:rgba(16,43,62,.16); --a-muted:rgba(16,43,62,.62);
}
body{background:var(--a-bg);color:var(--a-ink);font-family:var(--sans);}
.admin-wrap{max-width:1120px;margin:0 auto;padding:0 1.25rem 4rem;}

/* Topbar */
.admin-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--a-ink-deep);color:var(--a-panel);padding:.85rem 1.25rem;position:sticky;top:0;z-index:20;}
.admin-top .brand{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:.02em;}
.admin-top .brand img{height:26px;width:auto;display:block;}
.admin-top nav{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;}
.admin-top nav a{display:block;color:rgba(255,255,255,.82);padding:.45rem .8rem;border-radius:999px;font-size:.92rem;font-weight:600;}
.admin-top nav a:hover{background:rgba(255,255,255,.1);color:#fff;}
.admin-top nav a.active{background:var(--a-coral);color:#fff;}
.admin-top nav a.logout{border:1px solid rgba(255,255,255,.28);}

h1.page-h{font-family:var(--serif);font-size:1.9rem;margin:1.8rem 0 .3rem;}
.page-sub{color:var(--a-muted);margin:0 0 1.6rem;}

/* Stat cards */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:2rem;}
.stat{background:var(--a-panel);border:1px solid var(--a-line);border-radius:16px;padding:1.1rem 1.2rem;}
.stat span{display:block;color:var(--a-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;}
.stat strong{display:block;font-family:var(--serif);font-size:1.8rem;margin-top:.35rem;}
.stat.good strong{color:#1c7a54;} .stat.warn strong{color:var(--a-coral-dark);}

/* Panels & tables */
.panel-card{background:var(--a-panel);border:1px solid var(--a-line);border-radius:16px;padding:1.25rem 1.35rem;margin-bottom:1.5rem;}
.panel-card h2{font-family:var(--serif);font-size:1.25rem;margin:0 0 1rem;}
.table-scroll{overflow-x:auto;}
table.data{width:100%;border-collapse:collapse;font-size:.9rem;min-width:720px;}
table.data th,table.data td{text-align:left;padding:.65rem .7rem;border-bottom:1px solid var(--a-line);vertical-align:top;}
table.data th{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--a-muted);white-space:nowrap;}
table.data tbody tr:hover{background:rgba(16,43,62,.03);}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;}
.pill{display:inline-block;padding:.18rem .6rem;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.03em;}
.pill.paid{background:#d6efe1;color:#146c48;}
.pill.created,.pill.attempted{background:#f2e6c6;color:#8a6512;}
.pill.failed{background:#f7d9d3;color:#a5311f;}
.pill.pending_payment{background:#f2e6c6;color:#8a6512;}

/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem;}
.field{display:flex;flex-direction:column;gap:.35rem;}
.field.full{grid-column:1/-1;}
.field label{font-weight:600;font-size:.9rem;}
.field small{color:var(--a-muted);font-size:.78rem;}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=number],.field select,.field textarea{
  padding:.6rem .7rem;border:1px solid var(--a-line);border-radius:10px;background:#fff;font:inherit;color:inherit;}
.field textarea{width:100%;resize:vertical;line-height:1.55;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--a-coral);outline-offset:1px;}
/* Disabled editor (writing window not open) — visible, greyed, clearly locked. */
fieldset[disabled] .field textarea,fieldset[disabled] .field input,fieldset[disabled] .field select{
  background:#f0ece2;color:#9a9484;cursor:not-allowed;border-style:dashed;}
.switch-row{display:flex;align-items:center;gap:.6rem;}
.btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--a-coral);color:#fff;border:none;border-radius:999px;
  padding:.65rem 1.4rem;font-weight:700;cursor:pointer;font-size:.95rem;}
.btn:hover{background:var(--a-coral-dark);}
.btn.ghost{background:transparent;color:var(--a-ink);border:1px solid var(--a-line);}
.notice{padding:.8rem 1rem;border-radius:12px;margin-bottom:1.3rem;font-weight:600;font-size:.92rem;}
.notice.ok{background:#d6efe1;color:#146c48;}
.notice.err{background:#f7d9d3;color:#a5311f;}
.notice.info{background:#eaf1f5;color:#123;}
.notice.notice-window{background:#fde7cf;border:1px solid #e08a1e;color:#8a4b00;font-size:1rem;}

/* Quill rich-text editor (participant dashboard) */
.ql-toolbar.ql-snow,.ql-container.ql-snow{border:1px solid var(--a-line);}
.ql-toolbar.ql-snow{border-top-left-radius:10px;border-top-right-radius:10px;background:#fff;border-bottom:0;}
.ql-container.ql-snow{border-bottom-left-radius:10px;border-bottom-right-radius:10px;background:#fff;font:inherit;}
#storyEditor .ql-editor{min-height:320px;}
#noteEditor .ql-editor{min-height:150px;}
.ql-editor{font-size:1rem;line-height:1.65;overflow-wrap:break-word;word-break:break-word;}
.ql-editor.ql-blank::before{color:#9a9484;font-style:normal;}
/* Read-only (writing window not open) — greyed, clearly locked. */
.ql-container.ql-disabled,.ql-container.ql-disabled .ql-editor{background:#f0ece2;color:#7d7869;border-style:dashed;}
/* Rendered stored rich-text (admin + showcase) */
.rt-content{overflow-wrap:break-word;word-break:break-word;}
.rt-content p{margin:0 0 .9em;}
.rt-content p:last-child{margin-bottom:0;}
.rt-content ul,.rt-content ol{margin:0 0 .9em;padding-left:1.4em;}
.rt-content ul li{list-style:disc;}
.rt-content ol li{list-style:decimal;}
.rt-content blockquote{margin:0 0 .9em;padding-left:1em;border-left:3px solid var(--a-line);color:var(--a-muted);}
.rt-content h2,.rt-content h3{margin:.4em 0 .5em;}

/* Login */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;}
.login-card{background:var(--a-panel);border:1px solid var(--a-line);border-radius:20px;padding:2.2rem;width:100%;max-width:400px;}
.login-card h1{font-family:var(--serif);font-size:1.6rem;margin:0 0 .3rem;}
.login-card p.sub{color:var(--a-muted);margin:0 0 1.6rem;}
.login-card .field{margin-bottom:1rem;}
.login-card input{width:100%;box-sizing:border-box;}
.login-card .btn{width:100%;justify-content:center;}
.masked-note{color:var(--a-muted);font-size:.78rem;}

/* Hamburger button — hidden on desktop, shown on mobile. */
.admin-menu-btn{display:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:1.3rem;line-height:1;width:44px;height:40px;border-radius:9px;cursor:pointer;}

/* ---- Mobile: collapse the nav behind a hamburger toggle ------------------- */
@media (max-width: 760px){
  .admin-top{flex-wrap:wrap;align-items:center;gap:.6rem;padding:.75rem 1rem;}
  .admin-top .brand{flex:1;min-width:0;}
  .admin-menu-btn{display:inline-flex;align-items:center;justify-content:center;}
  .admin-top nav{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:.25rem;
    padding-top:.5rem;border-top:1px solid rgba(255,255,255,.14);}
  .admin-top nav.open{display:flex;}
  .admin-top nav a{font-size:.95rem;padding:.6rem .8rem;border-radius:10px;}
  .admin-wrap{padding-left:1rem;padding-right:1rem;}
  .login-shell{padding:1rem;}
  .login-card{padding:1.5rem;}
}