/* ==========================================================================
   Admin (site editor) styles. Builds on tokens/base/components.
   ========================================================================== */
body.admin { background: var(--surface-page); }
.admin-bar { background: var(--surface-raised); color: var(--text-heading); box-shadow: var(--shadow-sm); }
.admin-bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); flex-wrap: wrap; }
.admin-brand, .admin-brand:visited { color: var(--text-heading); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.admin-user { display: flex; align-items: center; gap: var(--space-4); font-size: 0.95rem; }
.admin-user a, .admin-user a:visited { color: var(--link); }
.admin-user[hidden], #app[hidden], #auth[hidden], #setup-warning[hidden] { display: none; }
body.admin main { padding-block: var(--space-6) var(--space-8); }

.auth-card { max-width: 26rem; margin: var(--space-6) auto; background: #fff; box-shadow: var(--shadow-sm); border-radius: var(--radius-xl); padding: var(--space-6); }
.auth-card h1 { font-size: 1.8rem; }


/* Panel heads and cards */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.panel-head h1 { font-size: 1.9rem; margin: 0; }
.panel-intro { color: var(--text-muted); max-width: var(--measure); }
.admin h2 { font-size: 1.3rem; margin: var(--space-6) 0 var(--space-3); }
.card { background: #fff; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.card-head h2 { margin: 0; font-size: 1.25rem; }
.card-head p { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: 0.95rem; }
.actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }

/* Buttons */
.link-btn { background: none; border: 0; padding: var(--space-2) 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; display: block; margin-top: var(--space-3); }
.icon-btn { min-width: 2.2rem; }

/* Tables */
.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-lg); font-size: 0.98rem; overflow: hidden; }
.admin-table th, .admin-table td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); }
.admin-table tbody tr + tr > * { box-shadow: inset 0 1px 0 var(--navy-50); }
.admin-table th { background: var(--navy-10); color: var(--text-muted); font-size: 0.9rem; font-weight: 600; }
.admin-table tbody th { background: #fff; font-size: inherit; font-weight: 600; }
.admin-table tbody th { color: var(--text-heading); }
.admin-table small { display: block; color: var(--text-muted); font-weight: 400; }
.table-scroll { overflow-x: auto; }

/* Reorderable item rows */
.item-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; max-width: none; }
.item-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; margin: 0; flex-wrap: wrap; }
.item-row + .item-row { box-shadow: inset 0 1px 0 var(--navy-50); }
.item-row .item-main { min-width: 0; flex: 1 1 14rem; }
.item-row .item-title { font-weight: 600; margin: 0; }
.item-row .item-sub { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.empty { color: var(--text-muted); margin: var(--space-3) 0 0; }

/* Forms */
@media (max-width: 40rem) { .form-grid { grid-template-columns: 1fr; } }

/* Dialog */
.admin-dialog { width: min(52rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); border: 0; border-radius: var(--radius-xl); padding: 0; box-shadow: var(--shadow-lg); }
.admin-dialog::backdrop { background: rgba(7, 18, 26, 0.55); }
.admin-dialog form { padding: var(--space-5) var(--space-6) var(--space-6); }
.admin-dialog h2 { margin: 0 0 var(--space-4); font-size: 1.5rem; }
.dialog-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.admin-dialog .toastui-editor-defaultUI { font-family: var(--font-body); }
.admin-dialog .toastui-editor-contents p { max-width: none; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: var(--space-2); align-items: center; pointer-events: none; }
.toast div { background: var(--navy-800); color: #fff; padding: var(--space-3) var(--space-5); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
.toast .toast-error { background: var(--rose-800); }

/* Sign-in extras */
.social { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.social[hidden] { display: none; }
.social .btn { justify-content: center; width: 100%; }
.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--text-muted); margin: var(--space-4) 0; font-size: 0.95rem; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--navy-100); }
#noaccess[hidden], #signup-form[hidden] { display: none; }
.tag-you { margin-left: var(--space-2); }
.admin-tabs a[hidden] { display: none; }