/* ==============================================================
   CampusShelf — Admin Panel
   Reuses the design tokens from style.css (colors, fonts, radius)
   so the admin panel feels like part of the same product.
   ============================================================== */

body.admin-body {
    background: var(--bg-soft);
    min-height: 100vh;
    font-family: var(--font-body);
}

/* ---------- GATE (loading / access denied) ---------- */
.admin-gate {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    text-align: center;
    padding: 24px;
}

.admin-gate .spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--line);
    border-top-color: var(--blue);
    animation: adminSpin 0.8s linear infinite;
}

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

.admin-gate h1 {
    font-size: 22px;
}

.admin-gate p {
    color: var(--ink-soft);
    max-width: 360px;
    font-size: 14.5px;
    line-height: 1.6;
}

/* ---------- SHELL ---------- */
.admin-shell {
    display: none;
    min-height: 100vh;
}

.admin-shell.ready {
    display: grid;
    grid-template-columns: 258px 1fr;
}

/* ---------- SIDEBAR ---------- */
.admin-sidebar {
    background: #ffffff;
    border-right: 1px solid var(--line);
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.admin-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    padding: 6px 10px 20px;
    color: var(--ink);
}

.admin-logo .logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-logo small {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 10.5px;
    color: var(--ink-soft);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 1px;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.admin-nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.admin-nav-item:hover {
    background: var(--bg-soft);
    color: var(--ink);
}

.admin-nav-item.active {
    background: #EFF6FF;
    color: var(--blue);
}

.admin-nav-section-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9CA3AF;
    padding: 16px 12px 6px;
}

.admin-sidebar-footer {
    border-top: 1px solid var(--line);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-who {
    padding: 8px 12px 4px;
    font-size: 12.5px;
    color: var(--ink-soft);
}

.admin-who strong {
    display: block;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 700;
}

/* ---------- MAIN ---------- */
.admin-main {
    padding: 26px 34px 60px;
    max-width: 1240px;
    width: 100%;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-page-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 25px;
    letter-spacing: -0.02em;
}

.admin-page-sub {
    color: var(--ink-soft);
    font-size: 13.5px;
    margin-top: 3px;
}

.admin-section { display: none; }
.admin-section.active { display: block; animation: adminFadeIn .25s ease; }

@keyframes adminFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

/* ---------- STAT CARDS ---------- */
.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.admin-stat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
}

.admin-stat-label {
    font-size: 12.5px;
    color: var(--ink-soft);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.admin-stat-value {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.admin-stat-delta {
    font-size: 12px;
    font-weight: 700;
    color: var(--green-dark);
    margin-top: 6px;
}

/* ---------- CARDS / PANELS ---------- */
.admin-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin-bottom: 20px;
}

.admin-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-card-head h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
}

.admin-card-head p {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-top: 2px;
}

.admin-charts-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 18px;
}

.admin-charts-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.admin-chart-wrap {
    position: relative;
    height: 240px;
}

/* ---------- TOOLBAR ---------- */
.admin-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.admin-search {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-soft);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 9px 14px;
}

.admin-search svg { width: 15px; height: 15px; color: var(--ink-soft); flex-shrink: 0; }

.admin-search input {
    border: none;
    background: none;
    outline: none;
    font-size: 13.5px;
    width: 100%;
    font-family: var(--font-body);
}

.admin-select {
    border: 1.5px solid var(--line);
    background: #fff;
    border-radius: 12px;
    padding: 9px 12px;
    font-size: 13.5px;
    font-family: var(--font-body);
    color: var(--ink);
    cursor: pointer;
}

.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    transition: all .15s ease;
    white-space: nowrap;
}

.admin-btn:hover { border-color: var(--blue); color: var(--blue); }

.admin-btn-secondary {
    background: var(--bg-soft);
    border-color: var(--line);
    color: var(--ink);
}
.admin-btn-secondary:hover { border-color: var(--blue); color: var(--blue); background: #fff; }

.admin-btn-primary {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}
.admin-btn-primary:hover { background: var(--blue-dark); color: #fff; }

.admin-btn-danger {
    color: #DC2626;
    border-color: #FCA5A5;
}
.admin-btn-danger:hover { background: #FEF2F2; border-color: #DC2626; color: #DC2626; }

.admin-btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 9px; }

/* ---------- TABLE ---------- */
.admin-table-wrap { overflow-x: auto; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.admin-table th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9CA3AF;
    font-weight: 700;
    padding: 8px 12px;
    border-bottom: 1.5px solid var(--line);
    white-space: nowrap;
}

.admin-table td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--bg-soft); }

.admin-cell-primary { font-weight: 700; color: var(--ink); }
.admin-cell-sub { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }

.admin-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--green));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px; flex-shrink: 0;
}

.admin-row-flex { display: flex; align-items: center; gap: 10px; }

/* ---------- BADGES ---------- */
.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.badge-green { background: #ECFDF5; color: #059669; }
.badge-blue { background: #EFF6FF; color: #2563EB; }
.badge-amber { background: #FFFBEB; color: #B45309; }
.badge-red { background: #FEF2F2; color: #DC2626; }
.badge-gray { background: #F3F4F6; color: #4B5563; }

/* ---------- TOGGLE ---------- */
.admin-toggle {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--line);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease;
}
.admin-toggle.on { background: var(--blue); }
.admin-toggle::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.admin-toggle.on::after { transform: translateX(16px); }

/* ---------- PAGINATION ---------- */
.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--ink-soft);
}

.admin-pagination-btns { display: flex; gap: 6px; }

/* ---------- EMPTY STATE ---------- */
.admin-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--ink-soft);
    font-size: 13.5px;
}

/* ---------- MODAL ---------- */
.admin-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(17,24,39,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 20px;
}
.admin-modal-overlay.show { display: flex; }

.admin-modal {
    background: #fff;
    border-radius: var(--radius);
    padding: 26px;
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.admin-modal h3 {
    font-family: var(--font-display);
    font-size: 18px;
    margin-bottom: 4px;
}

.admin-modal p.hint { color: var(--ink-soft); font-size: 12.5px; margin-bottom: 16px; }

.admin-field { margin-bottom: 14px; }
.admin-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}
.admin-field input[type=text],
.admin-field input[type=number],
.admin-field input[type=email],
.admin-field select,
.admin-field textarea {
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 11px;
    padding: 10px 12px;
    font-size: 13.5px;
    font-family: var(--font-body);
    outline: none;
    transition: border-color .15s ease;
}
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus { border-color: var(--blue); }
.admin-field textarea { resize: vertical; min-height: 70px; }

.admin-field-row { display: flex; gap: 10px; }
.admin-field-row .admin-field { flex: 1; }

.admin-check-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}
.admin-check-row:first-of-type { border-top: none; }

.admin-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.admin-modal-actions .admin-btn { flex: 1; justify-content: center; }

/* ---------- TOAST ---------- */
#adminToast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink);
    color: #fff;
    padding: 11px 20px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 300;
    box-shadow: var(--shadow-md);
}
#adminToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- INSTITUTIONS LIST ---------- */
.admin-inst-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
}
.admin-inst-row:last-child { border-bottom: none; }
.admin-inst-drag { color: #D1D5DB; cursor: grab; font-size: 15px; user-select: none; }
.admin-inst-info { flex: 1; min-width: 0; }
.admin-inst-name { font-weight: 700; font-size: 13.5px; }
.admin-inst-meta { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
    .admin-shell.ready { grid-template-columns: 1fr; }
    .admin-sidebar {
        position: relative;
        height: auto;
        flex-direction: row;
        overflow-x: auto;
        align-items: center;
        padding: 12px 14px;
    }
    .admin-logo { padding: 0 14px 0 0; }
    .admin-nav { flex-direction: row; }
    .admin-nav-section-label { display: none; }
    .admin-sidebar-footer { flex-direction: row; border-top: none; border-left: 1px solid var(--line); padding: 0 0 0 12px; margin-left: 8px; }
    .admin-who { display: none; }
    .admin-main { padding: 20px 16px 60px; }
    .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-charts-row, .admin-charts-row-2 { grid-template-columns: 1fr; }
}

/* ---------- BLOG CMS ---------- */
.admin-modal.admin-modal-wide { max-width: 880px; }

.blog-status-badge { display:inline-flex; align-items:center; gap:5px; }

/* Live preview panel inside the editor modal */
.blog-preview-panel {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px 26px;
    background: #fff;
    max-height: 60vh;
    overflow-y: auto;
}
.blog-preview-panel .article-title { font-size: 24px; margin-bottom: 14px; }
.blog-preview-panel .article-body p { font-size: 14.5px; }
.blog-preview-empty { color: var(--ink-soft); font-size: 13.5px; text-align: center; padding: 40px 20px; }


/* Template picker (shown when clicking "New post") */
.blog-template-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 6px;
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 780px) {
    .blog-template-grid { grid-template-columns: repeat(2, 1fr); }
}
.blog-template-card {
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    background: #fff;
}
.blog-template-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.blog-template-card .tmpl-thumb {
    height: 88px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-soft);
    position: relative;
    display: flex;
    align-items: flex-end;
}
.blog-template-card .tmpl-thumb-blank {
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
}
.blog-template-card .tmpl-thumb-cat {
    background: rgba(17,24,39,0.72);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    margin: 8px;
}
.blog-template-card .tmpl-body { padding: 12px 14px 14px; }
.blog-template-card .tmpl-emoji { font-size: 24px; margin-bottom: 8px; }
.blog-template-card h4 { font-size: 14px; margin-bottom: 4px; }
.blog-template-card .tmpl-example-title {
    font-size: 12px; font-weight: 700; color: var(--ink);
    margin: 0 0 4px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-template-card .tmpl-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.5; margin: 0; }

/* Small cover thumbnail in the admin blog table */
.admin-blog-thumb {
    width: 40px; height: 40px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}
.admin-blog-thumb-emoji {
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    background: var(--bg-soft);
}

/* Two-column post editor: meta fields on the left, block editor on the right */
.blog-editor-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 22px;
    align-items: start;
}
@media (max-width: 720px) {
    .blog-editor-grid { grid-template-columns: 1fr; }
}

.blog-block-list { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.blog-block-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--bg-soft);
}
.blog-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.blog-block-type-badge {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--blue);
    background: rgba(37,99,235,0.1);
    padding: 3px 9px;
    border-radius: 999px;
}
.blog-block-actions { display:flex; gap:4px; }
.blog-block-actions button {
    width: 26px; height: 26px;
    display:flex; align-items:center; justify-content:center;
    border-radius: 7px;
    color: var(--ink-soft);
    font-size: 13px;
    transition: background .12s ease, color .12s ease;
}
.blog-block-actions button:hover { background: #fff; color: var(--ink); }
.blog-block-actions button.danger:hover { color: #DC2626; }

.blog-block-card input[type=text],
.blog-block-card textarea,
.blog-block-card select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 13.5px;
    font-family: inherit;
    background: #fff;
    margin-bottom: 8px;
}
.blog-block-card textarea { resize: vertical; min-height: 56px; }
.blog-block-card label.mini { font-size: 11px; font-weight: 700; color: var(--ink-soft); display:block; margin-bottom: 4px; }
.blog-block-list-items { display:flex; flex-direction:column; gap:6px; }
.blog-block-list-item-row { display:flex; gap:6px; align-items:center; }
.blog-block-list-item-row input { margin-bottom: 0 !important; }
.blog-block-list-item-row button { flex-shrink:0; width:26px; height:26px; border-radius:7px; color:var(--ink-soft); }
.blog-block-list-item-row button:hover { background:#fff; color:#DC2626; }

.blog-add-block-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 4px;
}
.blog-add-block-row select { flex: 1; }

/* ---------- Visual (WYSIWYG) blog editor ---------- */
.admin-modal.admin-modal-editor {
    max-width: 1320px;
    width: calc(100vw - 40px);
    height: calc(100vh - 40px);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
}
.blog-editor-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.blog-editor-topbar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.blog-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.toolbar-group { display: flex; align-items: center; gap: 8px; }
.toolbar-group label { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.toolbar-group select {
    border: 1.5px solid var(--line);
    border-radius: 9px;
    padding: 7px 10px;
    font-size: 12.5px;
    font-family: var(--font-body);
    background: #fff;
}
.toolbar-group input[type=color] {
    width: 28px; height: 28px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 2px;
    cursor: pointer;
    background: #fff;
}
.blog-editor-body {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 18px;
    flex: 1;
    min-height: 0;
    padding-top: 16px;
}
.blog-editor-frame {
    width: 100%;
    height: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}
.blog-editor-sidebar {
    overflow-y: auto;
    padding-right: 2px;
}
.blog-block-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.blog-block-pill {
    padding: 6px 10px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
    background: #fff;
    cursor: grab;
    user-select: none;
}
.blog-block-pill:active { cursor: grabbing; }
.blog-block-pill:hover { border-color: var(--blue); color: var(--blue); }
@media (max-width: 980px) {
    .admin-modal.admin-modal-editor { max-width: calc(100vw - 20px); height: calc(100vh - 20px); }
    .blog-editor-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
    .blog-editor-frame { min-height: 320px; }
    .blog-editor-sidebar { max-height: 260px; }
}