/* Shared Admin UI v1 */
body:has(.admin-shell) { background-image: none; background-color: #f4f6f8; padding-top: 0; }
.admin-shell { min-height: 100vh; display: flex; background: #f4f6f8; color: #212529; }
.admin-sidebar { width: 248px; flex: 0 0 248px; min-height: 100vh; position: sticky; top: 0; align-self: flex-start; display: flex; flex-direction: column; padding: 1.5rem 1rem; background: #1f2937; border-right: 1px solid #111827; color: #fff; }
.admin-brand { color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: .01em; text-decoration: none; padding: 0 .65rem 1.25rem; }
.admin-nav { display: flex; flex-direction: column; gap: .2rem; }
.admin-nav-heading { color: #9ca3af; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 1rem .65rem .35rem; }
.admin-nav-link { min-height: 40px; display: flex; align-items: center; border-radius: .45rem; color: #d1d5db; padding: .55rem .75rem; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.admin-nav-link:hover { color: #fff; background: #374151; }
.admin-nav-link.active { color: #fff; background: #2563eb; box-shadow: inset 3px 0 0 #93c5fd; font-weight: 600; }
.admin-main { min-width: 0; flex: 1; }
.admin-page { max-width: 1500px; margin: 0 auto; padding: 1.75rem 2rem 2.5rem; }
.admin-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.admin-page-header h1 { margin: 0; color: #111827; font-size: 1.65rem; font-weight: 700; line-height: 1.3; }
.admin-page-header p { margin: .35rem 0 0; color: #6b7280; font-size: .92rem; }
.admin-page .card { border: 1px solid #e2e8f0; border-radius: .7rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); overflow: hidden; }
.admin-page .card-header { background: #fff; border-bottom: 1px solid #e5e7eb; color: #374151; font-weight: 600; padding: .85rem 1.1rem; }
.admin-page .card-body { padding: 1.1rem; }
.admin-page .form-label { color: #374151; font-size: .84rem; font-weight: 600; margin-bottom: .35rem; }
.admin-page .form-control, .admin-page .form-select { min-height: 38px; border-color: #d1d5db; border-radius: .45rem; font-size: .9rem; }
.admin-page .form-control:focus, .admin-page .form-select:focus { border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12); }
.admin-page .btn { border-radius: .45rem; font-size: .875rem; font-weight: 600; padding: .42rem .75rem; }
.admin-page .btn-sm { padding: .3rem .55rem; font-size: .8rem; }
.admin-page .table-responsive { border: 1px solid #e2e8f0; border-radius: .7rem; background: #fff; }
.admin-page .table { margin-bottom: 0; min-width: 760px; }
.admin-page .table > :not(caption) > * > * { border-color: #edf0f3; padding: .75rem; vertical-align: middle; }
.admin-page .table > thead > tr > th { background: #f8fafc; color: #475569; font-size: .76rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.admin-page .table tbody tr:hover { background: #f8fbff; }
.admin-page .alert { border-radius: .6rem; margin-bottom: 1rem; }
.admin-toast-container { position: fixed; z-index: 1080; top: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .65rem; width: min(420px, calc(100vw - 2rem)); pointer-events: none; }
.admin-toast { display: flex; align-items: flex-start; gap: .75rem; margin: 0; box-shadow: 0 .5rem 1.25rem rgba(15, 23, 42, .18); pointer-events: auto; }
.admin-toast-message { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.admin-toast .btn-close { flex: 0 0 auto; }
.admin-status-badge { display: inline-flex; align-items: center; border-radius: 999px; font-size: .75rem; font-weight: 700; padding: .25rem .55rem; white-space: nowrap; }
.admin-status-badge.is-active { background: #dcfce7; color: #166534; }
.admin-status-badge.is-inactive { background: #f1f5f9; color: #475569; }
.admin-status-badge.is-online { background: #dbeafe; color: #1d4ed8; }
.admin-status-badge.is-offline { background: #fef3c7; color: #92400e; }
.online-upload-progress { min-width: 0; margin-top: .5rem; }
.online-upload-progress .progress { height: .45rem; }
.online-upload-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 600; }
.admin-empty { border: 1px dashed #cbd5e1; border-radius: .7rem; background: #fff; color: #64748b; padding: 2.5rem 1rem; text-align: center; }
@media (max-width: 767.98px) { .admin-shell { display: block; } .admin-sidebar { width: auto; min-height: auto; position: static; padding: 1rem; } .admin-brand { display: block; padding: 0 0 .75rem; } .admin-nav { flex-flow: row wrap; gap: .4rem; } .admin-nav-heading { display: none; } .admin-nav-link { min-height: 36px; border: 1px solid #4b5563; padding: .4rem .6rem; } .admin-sidebar form { margin-top: .75rem; padding-top: .75rem; } .admin-page { padding: 1.25rem 1rem 2rem; } .admin-page-header { margin-bottom: 1.1rem; } .admin-page-header h1 { font-size: 1.4rem; } .admin-page .card-body { padding: 1rem; } }
/* Issue Admin card list */
.issue-card-list { display: grid; gap: 1rem; }
.issue-admin-card { margin: 0; }
.issue-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.issue-card-title { margin: 0; color: #1f2937; font-size: 1.1rem; font-weight: 700; }
.issue-card-meta { margin: .25rem 0 0; color: #64748b; font-size: .86rem; }
.issue-card-body { display: grid; gap: 1.25rem; }
.issue-edit-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.issue-field-bookcode { grid-column: span 2; }
.issue-check-field, .issue-save-field { min-height: 38px; display: flex; align-items: center; }
.issue-check-field .form-check { margin: 0; white-space: nowrap; }
.issue-save-field { justify-content: flex-end; }
.issue-save-field .btn { min-width: 88px; white-space: nowrap; }
.issue-audio-section { border-top: 1px solid #e5e7eb; padding-top: 1.1rem; }
.issue-section-heading { margin: 0 0 .75rem; color: #374151; font-size: .9rem; font-weight: 700; }
.issue-audio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.issue-audio-panel { min-width: 0; border: 1px solid #e2e8f0; border-radius: .55rem; background: #f8fafc; padding: .85rem; }
.issue-audio-panel h4 { margin: 0 0 .65rem; color: #475569; font-size: .82rem; font-weight: 700; }
.issue-audio-cell { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.issue-audio-current { display: flex; align-items: center; gap: .5rem; min-width: 0; white-space: nowrap; }
.issue-audio-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; flex: 1 1 auto; }
.issue-audio-delete { flex: 0 0 auto; white-space: nowrap; }
.issue-audio-input { width: 100%; max-width: 100%; min-width: 0; }
.issue-create-primary-grid { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(2, minmax(120px, 1fr)); gap: 1rem; }
.issue-create-secondary-grid { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)) minmax(180px, 1.5fr) minmax(105px, .8fr); gap: 1rem; align-items: end; }
.issue-create-action { display: flex; align-items: end; }
.issue-create-files-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 991.98px) { .issue-edit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .issue-field-bookcode { grid-column: span 2; } .issue-create-primary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .issue-create-secondary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .issue-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .issue-field-bookcode { grid-column: span 2; } .issue-save-field { justify-content: flex-start; } .issue-create-primary-grid, .issue-create-secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .issue-card-header { align-items: flex-start; flex-direction: column; } .issue-edit-grid, .issue-create-primary-grid, .issue-create-secondary-grid, .issue-create-files-grid, .issue-audio-grid { grid-template-columns: 1fr; } .issue-field-bookcode { grid-column: auto; } }