/* VARIABLES */
:root {
--midnight-navy-rgb: 25,16,73;
--midnight-navy: #191049;
--light-blue-rgb: 102,204,255; 
--light-blue: #99ccff;
--poster-navy: #0b0a46;
--royal-indigo: #384b8b;
--off-white: #e6e8f5;
--white: #ffffff;
--mist-indigo: #d8dbeb;
--grey-indigo: #9f9db1;
--accent-pink-rgb: 255,51,102;
--accent-pink: #ff3366;
--accent-pink-hover: #e62e5c;
--text-grey: #444444;
--text-light: #eeeeee;
--text-muted: #cccccc;
--display-bar-height: 48px;
--display-background: #000000;
}

/* RESET & GLOBALS */
*, *::before, *::after {box-sizing: border-box;}
html,
body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;font-family: Arial, sans-serif;background: var(--display-background);color: var(--midnight-navy);}
body {overflow: hidden;}
a {text-decoration: none;}

/* DISPLAY APP */
#display-app {position: fixed;inset: 0;width: 100vw;height: 100vh;overflow: hidden;background: var(--display-background);}

/* DISPLAY BAR */
#display-bar {position: fixed;top: 0;left: 0;width: 100%;height: var(--display-bar-height);display: flex;align-items: center;justify-content: space-between;padding: 0 14px;background: var(--midnight-navy);z-index: 1000;}

/* RHTC LOGO */
#display-logo {display: flex;align-items: center;height: 100%;}
#display-logo a {display: flex;align-items: center;height: 100%;}
#display-logo img {display: block;width: auto;height: 32px;object-fit: contain;}

/* DISPLAY TITLE */
#display-title {position: absolute;left: 50%;top: 0;height: var(--display-bar-height);transform: translateX(-50%);display: flex;flex-direction: column;align-items: center;justify-content: center;white-space: nowrap;text-align: center;line-height: 1.05;pointer-events: none;}
#display-title h1 {margin: 0;font-size: 15px;font-weight: 700;color: var(--white);}
#display-show-name {margin: 2px 0 0;font-size: 11px;font-weight: 700;letter-spacing: 0.4px;color: var(--accent-pink);}

/* DISPLAY CANVAS */
#display-canvas {position: absolute;top: var(--display-bar-height);left: 0;right: 0;bottom: 0;width: auto;height: auto;margin: 0;padding: 0;overflow: hidden;background: var(--display-background);z-index: 1;}

/* SLIDESHOW */
#display-slideshow {position: absolute;inset: 0;width: 100%;height: 100%;overflow: hidden;background: var(--display-background);}

/* INDIVIDUAL SLIDES */
.display-slide {position: absolute;inset: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;opacity: 0;transition: opacity 800ms ease;pointer-events: none;background: var(--display-background);}
.display-slide.active {opacity: 1;}

/* DISPLAY IMAGES */
.display-slide img {display: block;width: auto;height: auto;max-width: 100%;max-height: 100%;object-fit: contain;user-select: none;pointer-events: none;-webkit-user-drag: none;}

/* PLAYLIST SETTINGS MODAL */
.display-modal {position: fixed;inset: 0;z-index: 2000;display: flex;align-items: center;justify-content: center;padding: 20px;opacity: 0;visibility: hidden;pointer-events: none;transition: opacity 0.25s ease, visibility 0.25s ease;}
.display-modal.active {opacity: 1;visibility: visible;pointer-events: auto;}

/* MODAL BACKDROP */
.display-modal-backdrop {position: absolute;inset: 0;background: rgba(0,0,0,0.75);}

/* MODAL PANEL */
.display-modal-panel {position: relative;z-index: 1;width: 100%;max-width: 700px;max-height: calc(100vh - 40px);display: flex;flex-direction: column;overflow: hidden;background: var(--off-white);color: var(--midnight-navy);border: 1px solid var(--mist-indigo);border-radius: 10px;box-shadow: 0 12px 40px rgba(0,0,0,0.4);}

/* MODAL HEADER */
.display-modal-header {display: flex;align-items: flex-start;justify-content: space-between;gap: 20px;padding: 20px;background: var(--midnight-navy);color: var(--white);border-bottom: 3px solid var(--accent-pink);}
.display-modal-header h2 {margin: 0;font-size: 20px;font-weight: 700;color: var(--white);}
.display-modal-header p {margin: 5px 0 0;font-size: 13px;line-height: 1.4;color: var(--text-muted);}
#display-playlist-modal-close {flex: 0 0 auto;width: 32px;height: 32px;padding: 0;border: 0;background: transparent;color: var(--white);font-size: 30px;line-height: 1;cursor: pointer;}
#display-playlist-modal-close:hover {color: var(--accent-pink);}

/* MODAL CONTENT */
.display-modal-content {padding: 20px;overflow-y: auto;}

/* PLAYLIST CONTROLS */
.playlist-control-group {margin-bottom: 20px;}
.playlist-control-group:last-child {margin-bottom: 0;}
.playlist-control-label,
.playlist-control-group > label {display: block;margin-bottom: 8px;font-size: 14px;font-weight: 700;color: var(--midnight-navy);}

/* YEAR */
#playlist-year {width: 100%;padding: 10px 12px;border: 1px solid var(--grey-indigo);border-radius: 6px;background: var(--white);color: var(--midnight-navy);font: inherit;}

/* RADIO OPTIONS */
.playlist-radio-group {display: flex;flex-wrap: wrap;gap: 10px;}
.playlist-radio-option {display: flex;align-items: center;gap: 8px;padding: 10px 12px;border: 1px solid var(--mist-indigo);border-radius: 6px;background: var(--white);color: var(--midnight-navy);cursor: pointer;}
.playlist-radio-option input {margin: 0;accent-color: var(--accent-pink);}

/* SHOW LIST */
.playlist-show-heading {display: flex;align-items: center;justify-content: space-between;gap: 15px;margin-bottom: 8px;}
#playlist-select-all {padding: 0;border: 0;background: none;color: var(--accent-pink);font: inherit;font-size: 13px;font-weight: 700;cursor: pointer;}
#playlist-select-all:hover {color: var(--accent-pink-hover);}
#playlist-show-list {display: flex;flex-direction: column;gap: 8px;min-height: 50px;padding: 12px;border: 1px solid var(--mist-indigo);border-radius: 6px;background: var(--white);}
#playlist-show-list > p {margin: 0;font-size: 14px;color: var(--text-grey);}

/* MODAL FOOTER */
.display-modal-footer {display: flex;align-items: center;justify-content: flex-end;flex-wrap: wrap;gap: 10px;padding: 16px 20px;border-top: 1px solid var(--mist-indigo);background: var(--white);}
#playlist-save-status {margin-right: auto;font-size: 13px;color: var(--text-grey);}
#playlist-cancel,
#playlist-save {padding: 10px 16px;border-radius: 6px;font: inherit;font-size: 14px;font-weight: 700;cursor: pointer;}
#playlist-cancel {border: 1px solid var(--mist-indigo);background: var(--white);color: var(--midnight-navy);}
#playlist-save {border: 0;background: var(--accent-pink);color: var(--white);}
#playlist-save:hover {background: var(--accent-pink-hover);}