/* ===========================
   Admin section – one CSS for all admin pages.
   Synced with mcqs_mcqs_backup/admin/style.css (manage_syllabus, manage_files, etc.).
   =========================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@100..900&display=swap');

* { box-sizing: border-box; }
html { min-height: 100%; scrollbar-gutter: stable; }

/* Use same horizontal padding as main app (style.css) so container width matches homepage/MCQ */
:root { --app-content-padding-x: 16px; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans Devanagari', sans-serif;
  background: #eef2f7;
  min-height: 100vh;
  color: #333;
  padding: 15px var(--app-content-padding-x) 32px;
}

.container { max-width: 560px; margin: 0 auto; padding: 0; }
.card { background: #fff; padding: 28px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); margin-bottom: 15px; text-align: center; }
.card:last-child { margin-bottom: 0; }
h1, h2 { margin-top: 0; margin-bottom: 20px; text-align: center; color: #1a2a44; font-size: 1.5rem; }
.top-links { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 14px; }
.top-links a { color: #007bff; text-decoration: underline; font-weight: 600; }
.top-links a:hover { opacity: 0.85; }

input, select, button { width: 100%; padding: 12px; margin: 10px 0; border-radius: 6px; border: 1px solid #ccc; font-size: 16px; font-family: inherit; }
.flow-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.flow-row .block-label { display: inline; margin: 0; min-width: 100px; font-size: 14px; font-weight: 600; color: #444; }
.flow-row .flow-select, .flow-row select.flow-select { margin: 0; flex: 0 1 auto; min-width: 160px; max-width: 320px; width: auto; }

.gen-field { margin-bottom: 18px; text-align: center; }
.gen-field .gen-label { display: block; font-size: 14px; font-weight: 600; color: #444; margin-bottom: 8px; }
.content-box-fixed { width: 100%; height: 100px; min-height: 100px; max-height: 100px; padding: 10px 12px; margin: 0; border-radius: 6px; border: 1px solid #ccc; font-size: 15px; font-family: inherit; resize: none; box-sizing: border-box; }
.mcq-type-box { background: #e9ecef; border: 1px solid #dee2e6; border-radius: 8px; padding: 16px 24px; margin: 0 auto; display: inline-block; text-align: left; }
.mcq-type-checkboxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; align-items: center; }
.mcq-type-checkboxes label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: normal; cursor: pointer; margin: 0; }
.mcq-type-checkboxes input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; flex-shrink: 0; }

button { background: #007bff; color: #fff; border: none; cursor: pointer; font-weight: bold; }
button:hover { background: #0056b3; }
button:disabled { background: #9bbcf5; cursor: not-allowed; }
.card a { color: #007bff; font-weight: 600; text-decoration: none; }
.card a:hover { text-decoration: underline; }
.card.wide { max-width: 900px; }
.test-name-wrap { word-break: break-word; overflow-wrap: break-word; max-width: 100%; min-width: 0; }
.search-row { margin: 12px 0 0; text-align: left; }
.search-input { max-width: 100%; margin: 0; padding: 10px 12px; font-size: 15px; }
.msg { margin: 12px 0; padding: 10px; border-radius: 6px; }
.msg.success { background: #d4edda; color: #155724; }
.msg.error { background: #f8d7da; color: #721c24; }
.hint { font-size: 13px; color: #666; margin-top: 4px; }

.table-wrap { overflow-x: auto; margin-top: 12px; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
th { background: #f1f1f1; }
.manage-tests-table { table-layout: fixed; width: 100%; }
.manage-tests-table .col-num { width: 2.5em; text-align: center; vertical-align: middle; padding: 8px 10px; }
.manage-tests-table .col-test { width: 68%; vertical-align: middle; padding: 8px 10px; word-break: break-word; overflow-wrap: break-word; }
.manage-tests-table .col-test .test-category { margin-bottom: 2px; word-break: break-word; font-size: 12px; color: #555; }
.manage-tests-table .col-test .test-name { font-weight: 600; margin: 0; }
.manage-tests-table .col-actions { width: 30%; white-space: nowrap; vertical-align: middle; padding: 8px 10px; text-align: center; }
.manage-tests-table .col-actions > .btn, .manage-tests-table .col-actions > .action-form { display: inline-block; vertical-align: middle; }
.manage-tests-table .action-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.manage-tests-table .action-form { margin: 0; display: inline-block; }
@media (max-width: 640px) {
  .manage-tests-table .col-actions { width: auto; min-width: 0; white-space: normal; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
  .manage-tests-table .col-actions > .btn, .manage-tests-table .col-actions > .action-form { flex-shrink: 0; }
  .manage-tests-table .col-actions .btn { min-height: 0; }
  .btn, .admin-stat-buttons .stat-row-btn { min-height: 44px; }
  .admin-stats { grid-template-columns: 1fr; }
}
/* Create test filters – mobile (shared with create_test.php) */
@media (max-width: 640px) {
  .create-test-filters { grid-template-columns: 1fr; gap: 8px 0; }
  .create-test-filters .filter-row { flex-wrap: nowrap; min-width: 0; }
  .create-test-filters .filter-row label { width: 90px; min-width: 90px; flex-shrink: 0; }
  .create-test-filters .filter-row select, .create-test-filters .filter-row input { flex: 1; min-width: 0; width: auto; max-width: none; }
}

.btn { padding: 6px 10px; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; color: #fff; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; line-height: 1; vertical-align: middle; box-sizing: border-box; }
a.btn { color: #fff !important; }
a.btn:hover { color: #fff !important; text-decoration: none; }
.btn-edit { background: #0056b3; color: #fff; }
.btn-rename { background: #5a32a3; color: #fff; }
.btn-convert { background: #0a58ca; color: #fff; }
.btn-download { background: #0aa2c0; color: #fff; }
.btn-upload-db { background: #157347; color: #fff; }
.btn-delete { background: #b02a37; color: #fff; }
.btn:hover { filter: brightness(1.1); }
/* Focus styles for keyboard and a11y */
a:focus-visible, .btn:focus-visible, button:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #007bff; outline-offset: 0; }
.msg-success, .msg-error { word-break: break-word; overflow-wrap: break-word; max-width: 100%; box-sizing: border-box; }

.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-box { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(145deg, #f0f4f8 0%, #e4eaf0 100%); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 16px; }
.stat-box .stat-number { font-size: 1.75rem; font-weight: 700; color: #1a2a44; line-height: 1.2; }
.stat-box .stat-label { font-size: 0.8rem; color: #555; margin-top: 4px; text-align: center; }
.admin-stat-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.admin-stat-buttons .stat-row-btn { display: block; width: 100%; padding: 10px 14px; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; color: #fff; background: #007bff; border-radius: 8px; box-sizing: border-box; }
.admin-stat-buttons .stat-row-btn:hover { background: #0056b3; color: #fff; }
.sections { display: grid; gap: 12px; }
.sections a { display: block; padding: 14px 16px; background: #f0f4f8; border-radius: 8px; text-decoration: none; color: #1a2a44; font-weight: 600; text-align: center; }
.sections a:hover { background: #e0e8f0; }
.sections a.primary { background: #28a745; color: #fff; }
.sections a.primary:hover { background: #1e7e34; }

.site-container { max-width: 560px; margin: 0 auto; padding: 0; }

/* Mobile: same content width as homepage/MCQ (main app style.css uses 12px at 768px) */
@media (max-width: 768px) {
  :root { --app-content-padding-x: 12px; }
  body { padding: 15px var(--app-content-padding-x) 32px; }
  .site-container { width: 100%; max-width: 100%; box-sizing: border-box; padding: 0; }
  .container { max-width: 100%; width: 100%; box-sizing: border-box; padding: 0; }
}

.site-header { display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 14px 20px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); margin-bottom: 15px; height: 68px; box-sizing: border-box; }
.site-header .site-name { font-size: 1.25rem; font-weight: 700; color: #1a2a44; line-height: 1.2; }
.site-header .menu-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; background: transparent; color: #1a2a44; cursor: pointer; border-radius: 6px; }
.site-header .menu-toggle:hover { background: #f0f0f0; }
.site-header .header-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 180px; background: #fff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); padding: 8px 0; z-index: 10; }
.site-header .header-menu.open { display: block; }
.site-header .header-menu a { display: block; padding: 10px 16px; color: #0066cc; text-decoration: none; font-size: 15px; }
.site-header .header-menu a:hover { background: #f4f6f8; }
.site-footer { background: #fff; color: #333; text-align: center; padding: 16px 20px; font-size: 13px; margin-top: 15px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.site-footer .footer-site-name { font-weight: 700; color: #1a2a44; font-size: 1.05em; }
.site-footer .footer-link { color: #0066cc; text-decoration: none; }

/* ===========================   Admin dark mode   =========================== */
html[data-theme="dark"] body { background: #1a1d23; color: #f2f3f5; }
html[data-theme="dark"] .card { background: #252830; box-shadow: 0 4px 12px rgba(0,0,0,0.3); color: #f2f3f5; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2 { color: #f5f6f8; }
html[data-theme="dark"] .top-links a, html[data-theme="dark"] .card a { color: #7ab4ff; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #2d3139; border-color: #3a3f48; color: #f2f3f5; }
html[data-theme="dark"] .flow-row .block-label, html[data-theme="dark"] .gen-field .gen-label { color: #c2c6ce; }
html[data-theme="dark"] .content-box-fixed, html[data-theme="dark"] .mcq-type-box { background: #2d3139; border-color: #3a3f48; color: #f2f3f5; }
html[data-theme="dark"] .mcq-type-checkboxes label { color: #e2e4e8; }
html[data-theme="dark"] .hint { color: #a8adb4; }
html[data-theme="dark"] th, html[data-theme="dark"] td { border-color: #3a3f48; color: #f2f3f5; }
html[data-theme="dark"] th { background: #2d3139 !important; color: #f5f6f8 !important; }
html[data-theme="dark"] .manage-tests-table .test-category { color: #e2e4e8 !important; font-size: 12px; }
html[data-theme="dark"] .manage-tests-table .test-name { color: #f2f3f5; }
html[data-theme="dark"] .stat-box { background: linear-gradient(145deg, #2d3139 0%, #252830 100%); color: #f2f3f5; }
html[data-theme="dark"] .stat-box .stat-number { color: #f5f6f8; }
html[data-theme="dark"] .stat-box .stat-label { color: #c2c6ce; }
html[data-theme="dark"] .sections a { background: #2d3139; color: #e2e4e8; }
html[data-theme="dark"] .sections a:hover { background: #3a3f48; }
html[data-theme="dark"] .sections a.primary { background: #28a745; color: #fff; }
html[data-theme="dark"] .admin-stat-buttons .stat-row-btn { background: #3a7bd4; color: #fff !important; }
html[data-theme="dark"] .admin-stat-buttons .stat-row-btn:hover { background: #2d6ac4; color: #fff !important; text-decoration: none; }
html[data-theme="dark"] .btn { color: #fff !important; }
html[data-theme="dark"] button { background: #3a7bd4; color: #fff; }
html[data-theme="dark"] button:hover { background: #2d6ac4; }
html[data-theme="dark"] button:disabled { background: #4a4f58; color: #9ca3af; }
html[data-theme="dark"] .site-header { background: #252830; }
html[data-theme="dark"] .site-header .site-name, html[data-theme="dark"] .site-header .menu-toggle { color: #f5f6f8; }
html[data-theme="dark"] .site-header .menu-toggle:hover { background: #3a3f48; }
html[data-theme="dark"] .site-header .header-menu { background: #252830; }
html[data-theme="dark"] .site-header .header-menu a { color: #7ab4ff; }
html[data-theme="dark"] .site-header .header-menu a:hover { background: #3a3f48; }
html[data-theme="dark"] .site-footer { background: #252830; color: #d8dce4; }
html[data-theme="dark"] .site-footer .footer-site-name { color: #f5f6f8; }
html[data-theme="dark"] .site-footer .footer-link { color: #7ab4ff; }
html[data-theme="dark"] .prompt-box, html[data-theme="dark"] .q-preview { background: #2d3139; color: #e2e4e8; border-color: #3a3f48; }
html[data-theme="dark"] .msg.success { background: #1e4620; color: #c8e6c9; }
html[data-theme="dark"] .msg.error { background: #5c2a2a; color: #ffcdd2; }
html[data-theme="dark"] a:focus-visible, html[data-theme="dark"] .btn:focus-visible, html[data-theme="dark"] button:focus-visible { outline-color: #7ab4ff; }
html[data-theme="dark"] input:focus-visible, html[data-theme="dark"] select:focus-visible, html[data-theme="dark"] textarea:focus-visible { outline-color: #7ab4ff; }
html[data-theme="dark"] .search-input { background: #2d3139; border-color: #3a3f48; color: #f2f3f5; }
html[data-theme="dark"] .s2-card { color: #f2f3f5; }
html[data-theme="dark"] .s2-row label { color: #c2c6ce; }
html[data-theme="dark"] .s2-select { background: #2d3139; border-color: #3a3f48; color: #f2f3f5; }
html[data-theme="dark"] .s2-select:disabled { background: #252830; color: #6b7280; }
html[data-theme="dark"] .s2-add-block { background: #1e3a5f; border-color: #3a5f8f; }
html[data-theme="dark"] .s2-add-block h4 { color: #7ab4ff; }
html[data-theme="dark"] .s2-add-form input[type=text], html[data-theme="dark"] .s2-edit-block .s2-edit-row input[type=text] { background: #2d3139; border-color: #3a3f48; color: #f2f3f5; }
html[data-theme="dark"] .s2-edit-block { background: #3d3520; border-color: #5c4a20; }
html[data-theme="dark"] .s2-edit-block h4 { color: #f5d047; }
html[data-theme="dark"] .s2-preview { background: #252830; border-color: #3a3f48; }
html[data-theme="dark"] .s2-preview h3 { color: #f5f6f8; }
html[data-theme="dark"] .s2-preview-tabs button { background: #2d3139; border-color: #3a3f48; color: #e2e4e8; }
html[data-theme="dark"] .s2-preview-tabs button.active { background: #3a7bd4; color: #fff; border-color: #3a7bd4; }
html[data-theme="dark"] .s2-text-tree { background: #1e2228; color: #e2e4e8; border-radius: 6px; }
html[data-theme="dark"] .s2-mindmap-root { background: #3a7bd4; color: #fff; }
html[data-theme="dark"] .s2-mindmap-branch::before { background: #3a3f48; }
html[data-theme="dark"] .s2-mindmap-node.l0 { background: #3a7bd4; color: #fff; }
html[data-theme="dark"] .s2-mindmap-node.l1 { background: #2d3139; color: #7ab4ff; }
html[data-theme="dark"] .s2-mindmap-node.l2 { background: #252830; color: #e2e4e8; }
html[data-theme="dark"] .s2-mindmap-node.l3 { background: #1e2228; color: #a8adb4; }
html[data-theme="dark"] .s2-upload-block { background: #252830; border-color: #3a3f48; color: #e2e4e8; }
html[data-theme="dark"] .s2-upload-block .s2-upload-heading { color: #f5f6f8; }
html[data-theme="dark"] .s2-upload-block .s2-upload-heading .s2-dl-link { color: #7ab4ff; }
html[data-theme="dark"] .s2-upload-block .s2-upload-hint { color: #d8dce4; }
html[data-theme="dark"] .s2-upload-block .s2-upload-hint code { background: #2d3139; color: #e2e4e8; border: 1px solid #3a3f48; border-radius: 4px; }
html[data-theme="dark"] .s2-upload-block .s2-upload-row input[type=file] { color: #e2e4e8; background: #2d3139; border-color: #3a3f48; }
html[data-theme="dark"] .s2-upload-block .s2-upload-row button { background: #3a7bd4; color: #fff; border: none; }
html[data-theme="dark"] .s2-upload-block .s2-upload-row button:hover { background: #2d6ac4; color: #fff; }
html[data-theme="dark"] .s2-dl-link { color: #7ab4ff; }
html[data-theme="dark"] .s2-csv-preview-block { background: #1e4620; border-color: #2e7d32; }
html[data-theme="dark"] .s2-csv-preview-block h3 { color: #86efac; }
html[data-theme="dark"] .s2-csv-compare-col .s2-csv-compare-label { color: #e2e4e8; }
html[data-theme="dark"] .s2-csv-compare-col .s2-text-tree { background: #1e2228; color: #e2e4e8; }
html[data-theme="dark"] .s2-apply-btn { background: #28a745; color: #fff; }
html[data-theme="dark"] .s2-apply-btn:hover { background: #1e7e34; color: #fff; }
html[data-theme="dark"] .s2-cancel-csv { background: #b91c1c; color: #fff !important; }
html[data-theme="dark"] .s2-cancel-csv:hover { background: #991b1b; color: #fff !important; }

/* Upload page */
html[data-theme="dark"] .upload-cat-row label { color: #c2c6ce; }
html[data-theme="dark"] .upload-cat-row select { background: #2d3139; border-color: #3a3f48; color: #f2f3f5; }
html[data-theme="dark"] .upload-cat-row select:disabled { background: #252830; color: #6b7280; }
html[data-theme="dark"] .upload-other label { color: #c2c6ce; }
html[data-theme="dark"] .upload-other input[type=text],
html[data-theme="dark"] .upload-other input[type=file] { background: #2d3139; border-color: #3a3f48; color: #f2f3f5; }
html[data-theme="dark"] button.upload-btn { background: #28a745; color: #fff; }
html[data-theme="dark"] button.upload-btn:hover { background: #1e7e34; color: #fff; }

/* Videos tab – dark mode (video-lib-style + videos-custom-section) */
html[data-theme="dark"] #tab-videos .video-lib-style-details { border-color: #3a3f48; }
html[data-theme="dark"] #tab-videos .video-lib-style-details summary { background: #2d3139; color: #f2f3f5; }
html[data-theme="dark"] #tab-videos .video-lib-style-details summary .hint { color: #a8adb4; }
html[data-theme="dark"] #tab-videos .video-lib-style-details[open] summary .videos-collapse-arrow { border-left-color: transparent; border-right-color: transparent; border-top-color: #a8adb4; }
html[data-theme="dark"] #tab-videos .video-lib-style-details .videos-collapse-arrow { border-left-color: transparent; border-right-color: transparent; border-top-color: #a8adb4; }
html[data-theme="dark"] #tab-videos .video-lib-style-details .video-lib-body { background: #252830; border-top-color: #3a3f48; color: #f2f3f5; }
html[data-theme="dark"] #tab-videos .video-lib-style-details .video-lib-body .hint { color: #a8adb4; }
html[data-theme="dark"] #tab-videos .video-lib-style-details .video-lib-body label { color: #c2c6ce; }
html[data-theme="dark"] #tab-videos .video-lib-style-details .video-lib-body input { background: #2d3139; border-color: #3a3f48; color: #f2f3f5; }
html[data-theme="dark"] #tab-videos .video-lib-style-details .video-lib-body select { background: #2d3139; border-color: #3a3f48; color: #f2f3f5; }
html[data-theme="dark"] #tab-videos .video-lib-style-list li { background: #2d3139; border-color: #3a3f48; color: #f2f3f5; }
html[data-theme="dark"] #tab-videos .video-lib-style-list .col-num { color: #a8adb4; }
html[data-theme="dark"] #tab-videos .video-lib-style-list .col-fill a { color: #7ab4ff; }
html[data-theme="dark"] #tab-videos .video-lib-style-list .col-fill .hint { color: #a8adb4; }
html[data-theme="dark"] .videos-custom-section { background: #252830 !important; border-color: #3a3f48 !important; }
html[data-theme="dark"] .videos-custom-section label { color: #c2c6ce; }
html[data-theme="dark"] .videos-custom-section select { background: #2d3139; border-color: #3a3f48; color: #f2f3f5; }
html[data-theme="dark"] .videos-custom-section .hint { color: #a8adb4; }
html[data-theme="dark"] .videos-custom-section a.videos-manage-btn { background: #28a745; color: #fff; border-color: #1e7e34; }
html[data-theme="dark"] .videos-custom-section a.videos-manage-btn:hover { background: #1e7e34; color: #fff; }