:root {
    /* A center's theme overrides these (see admin.js/view.js, which also derive
       --theme-header-text from --theme-header-color so banner/button text stays readable
       whatever color is chosen). Everything else keeps the app's default look.
       Defaults match the public homepage's navy/gold/cream palette (index.html). */
    --theme-header-color: #1e3a5f;
    --theme-header-text: #fff8ee;
    --theme-bg-color: #fbf8f2;
    --presentation-font: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --presentation-text-color: #1e293b;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--theme-bg-color);
    color: #1e293b;
}

.banner {
    background: var(--theme-header-color);
    color: var(--theme-header-text);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Viewer/projector only: unlike every other page, this bar's middle item (the center's uploaded
   logo + session title) needs to be truly centered over the white section below, not just
   centered in whatever space is left after the brand overlay and the clock. Giving both side
   columns an equal 1fr share (instead of auto) does that - the middle column ends up exactly
   centered regardless of how wide either side's content is - while .banner-brand-overlay keeps
   its own flush-left position via justify-self (grid's default "stretch" would otherwise widen
   its pill shape to fill the whole 1fr column). */
.banner-view {
    grid-template-columns: 1fr auto 1fr;
}

.banner-view .banner-brand-overlay {
    justify-self: start;
}

/* Wraps every banner logo in a link home; display:contents keeps the <a> out of the layout
   entirely so it doesn't change how its image child sizes/positions/overflows within the
   banner (notably .banner-brand-logo's own overflow trick, which depends on being the direct
   flex child it's styled as). */
.banner-logo-link {
    display: contents;
}

.banner-logo {
    height: 72px;
    width: auto;
    border-radius: 50%;
    /* Bigger than the bar itself (same treatment as the public homepage): align to the top of
       the row and pull the row's own sizing back up with a negative bottom margin, so the extra
       24px hangs down into .container's own top padding below (24px) rather than growing the
       bar or poking out above it - nothing exists above the banner (it's the first thing on the
       page), so overflow upward would just get clipped by the viewport edge. */
    align-self: start;
    margin-bottom: -24px;
}

.banner-title {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Viewer/projector only: pairs a center's own uploaded logo with the session title, the logo
   to its left, both centered together as one unit in the bar's middle. */
.banner-title-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    /* No overflow:hidden here - .banner-title already clips its own text via ellipsis, and this
       would otherwise clip the logo's intentional pop-out below the bar (same "escapes its own
       box" treatment as .banner-brand-logo everywhere else). */
}

/* Admin screen only: a fixed-brand "tab" that reads as an overlay sitting on top of the
   center's own themed bar color, regardless of what that color is - escapes .banner's own
   padding (negative margin) to sit flush against the bar's true left/top/bottom edges, with a
   full pill curve on the right where it meets the themed color behind it. */
.banner-brand-overlay {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fdf8f0;
    color: #1e3a5f;
    padding: 6px 28px 6px 20px;
    margin: -12px 0 -12px -20px;
    border-radius: 0 999px 999px 0;
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.18);
    align-self: stretch;
}

.banner-brand-logo {
    height: 96px;
    width: auto;
    /* Pops out past the overlay panel itself (same "bigger than its bar" treatment as the
       public homepage): top-aligned flush with the overlay's own top edge (which is already
       flush with the page's top edge - nothing above it to overflow into), with a negative
       bottom margin that pulls its contribution to the overlay's own sizing back down to its
       original ~64px, so the overlay panel stays the size it already was and only the logo
       visibly hangs past its bottom edge.
    */
    align-self: flex-start;
    margin-bottom: -32px;
}

.banner-brand-text {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.banner-brand-suffix {
    font-weight: 600;
    opacity: 0.7;
}

.banner-clock {
    justify-self: end;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--theme-header-text);
    white-space: nowrap;
}

.banner-session-title {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--theme-header-text);
    white-space: nowrap;
}

.banner-session-title input {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 400;
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    color: #1e293b;
    width: 220px;
}

.banner-session-title button {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

.container.wide {
    max-width: 1100px;
}

section {
    position: relative;
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* A center's own uploaded logo (admin screens only - the viewer/projector page shows it in the
   banner instead). One instance per section (collecting/sorting/presenting on admin.html), each
   anchored to its own section's top-right corner, in the blank space next to that section's own
   heading/button row - never over any real text or button. */
.center-logo-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    height: 96px;
    width: auto;
    border-radius: 14px;
    background: #fff;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

h2 {
    margin-top: 0;
}

.entry-form {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.entry-form input[type="text"] {
    flex: 1;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}

.bhajan-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.bhajan-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #475569;
}

.bhajan-form textarea,
.bhajan-form input[type="password"],
.bhajan-form input[type="email"],
.bhajan-form input[type="text"] {
    font-family: inherit;
    padding: 10px;
    font-size: 1rem;
    font-weight: 400;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    resize: vertical;
}

.bhajan-form .form-buttons {
    display: flex;
    gap: 8px;
}

.bhajan-form button {
    align-self: flex-start;
}

.bhajan-form input:disabled {
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

dialog {
    border: none;
    border-radius: 10px;
    padding: 24px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

dialog h2 {
    margin-top: 0;
}

.sai-rhythms-import-row {
    display: flex;
    gap: 8px;
}

.sai-rhythms-import-row input[type="text"] {
    flex: 1;
}

.upload-session-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.theme-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.theme-form .form-buttons {
    display: flex;
    gap: 8px;
}

.theme-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #475569;
}

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

.theme-color-row input[type="color"] {
    width: 48px;
    height: 36px;
    padding: 2px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: none;
    cursor: pointer;
}

.theme-reset-link {
    background: none;
    border: none;
    padding: 0;
    color: #1e3a5f;
    text-decoration: underline;
    font-size: 0.85rem;
    cursor: pointer;
    align-self: flex-start;
}

.theme-logo-preview {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-font-preview {
    font-size: 1.1rem !important;
    padding: 10px !important;
    white-space: normal !important;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
}

.theme-logo-preview img {
    height: 56px;
    width: 56px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #cbd5e1;
}

button {
    padding: 10px 16px;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    background: var(--theme-header-color);
    color: var(--theme-header-text);
    cursor: pointer;
}

button:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

/* "Secondary" buttons (Cancel, Edit, Projector View, etc.) intentionally match the primary
   color now - same as Prev/Next - instead of their own separate shade. Only "danger" (Remove,
   Delete) keeps a distinct color, since that one still needs to read as a warning. */

button.danger {
    background: #a33;
    color: #fff;
}

/* Buttons that live in the colored top bar get a white pill with the bar's own color for text,
   instead of trying to blend a same-color button into a same-color background. */
.banner button {
    background: #fff;
    color: var(--theme-header-color);
}

ul.item-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

ul.item-list li {
    padding: 10px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

ul.item-list li .item-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

ul.item-list li .seq {
    font-weight: 700;
    color: #1e3a5f;
    min-width: 28px;
}

ul.item-list li .text {
    flex: 1;
}

ul.item-list li .item-meta {
    margin: 4px 0 0 38px;
    font-size: 0.85rem;
    color: #64748b;
}

ul.item-list.sortable li {
    cursor: grab;
}

.saved-list {
    list-style: none;
    padding: 0;
}

.list-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.list-toolbar input[type="text"] {
    flex: 1;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid #e2e8f0;
}

.data-table th {
    color: #64748b;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.data-table td.actions {
    text-align: right;
    white-space: nowrap;
}

.data-table td.actions button {
    margin-left: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
}

.data-table tr.no-rows td {
    text-align: center;
    color: #64748b;
    padding: 24px 8px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.pagination span {
    color: #64748b;
    font-size: 0.85rem;
}

.saved-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.presenter-title {
    font-family: var(--presentation-font);
    color: var(--presentation-text-color);
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    padding-top: 16px;
}

.presenter-meta {
    text-align: center;
    color: #64748b;
    font-size: 1rem;
    margin-top: 6px;
}

.presenter-text {
    font-family: var(--presentation-font);
    color: var(--presentation-text-color);
    font-size: 1.6rem;
    text-align: left;
    padding: 24px 10px 40px;
    white-space: pre-wrap;
    line-height: 1.5;
}

.nav-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.presenting-badge {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a33;
    margin-bottom: 20px;
    animation: presenting-flash 1.2s ease-in-out infinite;
}

@keyframes presenting-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.presenting-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 28px;
    align-items: start;
}

@media (max-width: 800px) {
    .presenting-layout {
        grid-template-columns: 1fr;
    }
}

.song-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.song-table th,
.song-table td {
    text-align: left;
    padding: 8px 6px;
    border-bottom: 1px solid #e2e8f0;
}

.song-table th {
    color: #64748b;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.song-table tr.current-row {
    background: #fef3c7;
    font-weight: 700;
}

.song-table tr.current-row td:first-child {
    color: #1e3a5f;
}

/* Projector view: videos on the left, the bhajan content on the right */
.container.with-video {
    max-width: none;
    padding-bottom: 16px;
}

.container.with-video .view-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.video-pane {
    position: sticky;
    top: 16px;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    height: calc(100vh - 140px);
    min-height: 240px;
}

.video-pane video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.new-session-bar {
    text-align: center;
    margin: 8px 0 0;
}

.video-folder-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.error {
    color: #a33;
    margin: 8px 0;
}

.hint {
    color: #64748b;
    font-size: 0.9rem;
}

[hidden] {
    display: none !important;
}

.center-search {
    position: relative;
    max-width: 420px;
    margin: 0 auto 16px;
}

.center-search input {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}

.center-search-results {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.center-search-results li {
    padding: 10px 12px;
    cursor: pointer;
}

.center-search-results li.active,
.center-search-results li:hover:not(.no-match) {
    background: #fef3c7;
}

.center-search-results li.no-match {
    color: #64748b;
    cursor: default;
}

.login-form {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.login-form button {
    align-self: stretch;
}