/* public/css/style.css */

:root {
    --font-primary: "Montserrat", -apple-system, BlinkMacSystemFont,
                     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html, body {
  height: 100%;
}
/* UPDATED: Changed background to white for the full-width design */
body { 
    font-family: var(--font-primary);
    margin: 0; 
    background: linear-gradient(
        180deg,
        #FBE4C6 0%,
        #F6D4AA 55%,
        #E7DED2 100%
    ); 
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}
header .logo { font-weight: bold; }
header nav a { padding: 20px 15px; text-decoration: none; color: #333; }
header nav a.active { border-bottom: 2px solid #000; font-weight: bold; }

/* UPDATED: Removed default padding to allow containers to control their own spacing */
main { padding: 0; }
.container { max-width: 1200px; margin: auto; background-color: #fff; padding: 20px; border-radius: 8px; }
.library-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; text-align: left; border-bottom: 2px solid #000000; font-size: 17px; font-weight: 500; max-height: fit-content;}
th { background-color: #f9f9f9; }
button { 
    padding: 10px 15px; 
    border: none; 
    background-color: #000000; 
    color: #fa812b; 
    cursor: pointer; 
    border-radius: 4px; 
    font-size: 20px;
}

.modal-content label {
    padding-bottom: 5px;

}
.modal-content h3{
    font-size: 25px;
    font-weight: 600;
}
.icon-btn { background: none; color: #333; font-size: 16px; }

/* Login Page Styles */
.login-container {
    max-width: 400px;
    margin: 100px auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.login-container h2 {
    color: #000000;
}

.login-container form {
    display: flex;
    flex-direction: column;
}

.login-container input {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.login-container input:focus {
    outline: none;
    border-color: #333;
}

.login-container button {
    padding: 12px;
    background-color: #333;
    color: #fa812b;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-container button:hover {
    background-color: #555;
}

.error-message {
    color: #d32f2f;
    background-color: #ffebee;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    border-left: 4px solid #d32f2f;
}

/* Modal Styles */
.modal { position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); }
.modal.hidden { display: none !important; }
.modal-content { 
    background: linear-gradient(
        180deg,
        #FBE4C6 0%,
        #F6D4AA 55%,
        #E7DED2 100%
    );
    margin: 15% auto; 
    padding: 20px; 
    border: 1px solid #888; 
    width: 400px; 
    border-radius: 8px; 

}
.modal-content input[type="text"]{
    border: 2px solid #fa812b;
    border-radius: 5px;
    margin-bottom: 12px;
}
.close-btn { color: #fa812b; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.modal-content form { display: flex; flex-direction: column; }
.modal-content input { padding: 10px; border: 2px solid #fa812b; border-radius: 8px;}

/* Add these new styles to the bottom of public/css/style.css */

.playlist-detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.playlist-detail-header h2 { margin: 0; display: flex; align-items: center; gap: 10px; }
.playlist-code { background-color: #eee; padding: 5px 10px; border-radius: 4px; font-family: monospace; }

.tabs { display: flex; border-bottom: 1px solid #ddd; margin-bottom: 20px; }
.tabs a { padding: 10px 20px; text-decoration: none; color: #555; border-bottom: 3px solid transparent; }
.tabs a.active { color: #000; font-weight: bold; border-bottom-color: #000; }

.playlist-actions { margin-top: 20px; display: flex; gap: 10px; }
.primary-btn { background-color: #000; color: #fff; }
.delete-btn { background-color: #e74c3c; color: #fff; }

/* Modal Content Styles */
.modal-content.large { width: 600px; }
.modal-body { max-height: 400px; overflow-y: auto; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin: 15px 0; padding: 10px 0;}
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; }
.modal-song-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #f0f0f0; }
.modal-song-item:last-child { border-bottom: none; }
.modal-song-item .add-btn { background-color: #2ecc71; color: white; border-radius: 50%; width: 30px; height: 30px; font-size: 20px; line-height: 30px; text-align: center; padding: 0; }
#song-search-input { 
    width: 100%; 
    box-sizing: border-box; 
    padding: 10px; 
    margin-bottom: 10px;
    color: #333; /* Fix: Set text color */
    background-color: #fff;
}
#song-search-input::placeholder {
    color: #999;
}

/* Add to the bottom of public/css/style.css */
.nav-item.dropdown { position: relative; display: inline-block; }

.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
.dropdown-content a:hover { color: white;}
.dropdown-content a:hover { background-color: #000000; }

/* Add to bottom of public/css/style.css */
.flash-message { padding: 15px; margin: 0 0 20px 0; border-radius: 4px; color: #fff; }
.flash-message.success { background-color: #2ecc71; }
.flash-message.error { background-color: #e74c3c; }

.page-subheader { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.page-subheader a { font-size: 24px; text-decoration: none; color: #333; }
.page-subheader h2 { margin: 0; }

.preview-layout { display: flex; gap: 30px; }
.video-player-container { flex: 2; }
.details-pane { flex: 1; }
.details-pane h3 { margin: 0 0 5px 0; color: #555; font-size: 1em; }
.details-pane p { margin: 0 0 20px 0; font-size: 1.1em; }
.details-pane .timestamps { color: #999; display: block; margin-top: 30px; }
.details-pane .details-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px; }

.details-pane-edit { flex: 1; display: flex; flex-direction: column; }
.details-pane-edit label { margin-bottom: 5px; color: #555; }
.details-pane-edit input, .details-pane-edit select { margin-bottom: 15px; padding: 10px; font-size: 1em; }

/* =========================
   GTT Show Detail – Design Layout
   ========================= */

.show-quiz-page {
    padding-top: 10px;
}

/* Top bar */
.show-quiz-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.show-quiz-back {
    font-size: 34px;
    font-weight: 700;
    color: #000;
    text-decoration: none;
    transition: color 0.2s;
}


.show-quiz-back:hover{
  color: #FA812B;
}


/* Right actions */
.show-quiz-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 20px;
    font-weight: 400;
}

.show-quiz-plus {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Make button text perfectly centered */
.show-quiz-delete-btn,
.show-quiz-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    border-radius: 6px;
    line-height: 1;
    text-decoration: none;
}

/* Keep your existing delete style, just normalize sizing */
.show-quiz-delete-form {
    margin: 0;
}

/* Main layout */
.show-quiz-layout {
    display: flex;
    gap: 36px;
    align-items: flex-start;
}

/* Video slightly smaller (match design feel) */
.show-quiz-video {
    flex: 0 0 58%;
    width: 100%;
}

/* If your aspect wrapper already defines ratio, keep it.
   Otherwise this helps maintain the “design” size consistently. */
.show-quiz-video .aspect-ratio-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}

/* Right pane */
.show-quiz-details {
    flex: 1;
    padding-top: 10px;
}

/* Title on right */
.show-quiz-title {
    margin: 0 0 18px 0;
    font-size: 54px;
    font-weight: 800;
    color: #000;
}

/* Labels & values */
.show-quiz-meta {
    margin-top: 8px;
}

.show-quiz-block {
    margin-bottom: 14px;
}

.show-quiz-label {
    font-size: 18px;
    font-weight: 500;
    color: #000;
    opacity: 0.8;
}

.show-quiz-value {
    font-size: 34px;
    font-weight: 500;
    color: #000;
    margin-top: 2px;
}

.show-quiz-artist {
    font-size: 46px;
    font-weight: 800;
}

/* Timestamps */
.show-quiz-timestamps {
    margin-top: 80px;
    font-size: 18px;
    font-style: italic;
    color: #000;
    opacity: 0.7;
}

.show-quiz-ts-val {
    font-style: italic;
}


/* public/css/style.css */

.library-layout {
    display: flex;
    gap: 30px;
    margin-top: 20px;

    /* NEW: this block fills the remaining height and scrolls */
    flex: 1 1 auto;
    overflow-y: auto;
}


.filters {
    flex-basis: 300px; /* Fixed width for the filter sidebar */
    flex-shrink: 0;
    border: 2px solid #000;      /* black border like table */
    border-radius: 14px;
    padding: 12px 18px;
    box-sizing: border-box;
}

.filters label {
    font-style: italic;
}

/* Filters title */
.filters h4 {
    position: relative;
    font-size: 28px;
    font-weight: 400;
    padding-bottom: 14px;
    margin-bottom: 16px;
    margin-top: 0px;
}

/* Full-width solid divider under title */
.filters h4::after {
    content: "";
    position: absolute;
    left: -18px;        /* match .filters padding-left */
    right: -18px;       /* match .filters padding-right */
    bottom: 0;

    height: 2px;
    background: #000;
}


.filters h5 {
    margin: 10px 0 5px 0;
    font-size: 17px;
    font-weight: 600;
}

.filters div {
    margin-bottom: 5px;
}

.library-content {
    flex-grow: 1; /* The table takes up the remaining space */
}

/* Make search input look better */
.library-header div {
    display: flex;
    gap: 15px;
}
.library-header input[type="search"] {
    padding: 8px;
}
.library-header .button {
    text-decoration: none;
    background: #000;
    color: #fff;
    padding: 10px 15px;
    border-radius: 4px;
}

.modal-playlist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.modal-playlist-item:last-child {
    border-bottom: none;
}
.add-to-playlist-confirm-btn {
    background-color: #2ecc71;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    padding: 0;
}
#playlist-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 10px;
    color: #333; /* Fix: Set text color */
    background-color: #fff;
}
#playlist-search-input::placeholder {
    color: #999;
}

/* upload */

.upload-form-layout {
    display: flex;
    gap: 30px;
}

.file-area-column {
    flex: 2;
}

.form-fields-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-fields-column .submit-button {
    margin-top: auto;
    padding: 12px;
    font-size: 1.1em;
}

/* The wrapper that forces the 16:9 aspect ratio */
.aspect-ratio-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 9 / 16 = 0.5625 */
    background-color: #f9f9f9;
    border-radius: 8px;
    overflow: hidden; /* This will contain the video */
}

/* Make both drop-zone and preview-zone fill the wrapper */
.aspect-ratio-wrapper > .file-drop-area,
.aspect-ratio-wrapper > .file-preview-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.file-drop-area {
    border: 2px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.file-preview-area {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    pointer-events: none;
}

/* This is the key fix for the video size */
.file-preview-area video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #000;
    pointer-events: auto;
}

/* This is the key fix for the preview header */
.file-preview-area .preview-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 10; /* Ensures it's above the video */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(30, 30, 30, 0.9);
    color: #fff;
    padding: 8px 12px;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
    pointer-events: auto;
}

/* Ensure file inputs can be programmatically clicked while visually hidden */
.hidden-file-input {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.file-preview-area:hover .preview-header {
    opacity: 1; /* Show on hover */
}

.preview-header .file-info {
    font-size: 0.9em;
}
.preview-header .file-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    color: #fff;
    padding: 5px;
}

/* START: Login Page Mockup Styles (FINAL) */

/* Add a class to the body tag on the login page for better scoping */
body.login-page {
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

/* Full split layout */
.login-page-wrapper{
    display: flex;
    width: 100%;
    height: 100vh;
}

.left-panel{
    position: relative;
    flex: 0 0 45%;
    background: #000;
    overflow: hidden;
}

.left-panel-top{
    position: relative;
    z-index: 2;
    padding: 150px 72px 0;
}

.brand-logo{
    width: 400px;           /* adjust if needed */
    max-width: 100%;
    height: auto;
    display: block;
}

.left-panel-pattern-img{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    display: block;
    pointer-events: none;
    user-select: none;
    padding-bottom: 10%;
}


.left-panel::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 50%;
    height: 220px;
    background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    z-index: 1;
}

.right-panel{
    flex: 0 0 55%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 40px;
    box-sizing: border-box;

    /* warm gradient like your design */
    background: linear-gradient(
        180deg,
        #FBE4C6 0%,
        #F6D4AA 55%,
        #E7DED2 100%
    );
}

/* Overrides for login-container on the new login page */
.right-panel .login-container {
    margin: 0;
    padding: 30px;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
    max-width: 400px;
}
.right-panel .login-container h2 {
    font-size: 83px;
    font-weight: 700;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
}

.login-logo {
    display: block;
    margin: 0 auto 0;
    width: 350px;
}

/* Updated form field styles */
.right-panel .login-container label {
    font-size: 20px;
    color: #000000;
    margin-bottom: 8px;
    font-weight: 400;
}
.right-panel .login-container input {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px;
}

/* Updated Login button style */
.right-panel .login-container button[type="submit"] {
    background-color: #000000;
    padding: 14px;
    font-size: 26px;
    font-weight: 700;
    margin-top: 15px;
    border-radius: 6px;
}
.right-panel .login-container button[type="submit"]:hover {
    background-color: #1a1a1d;
}

.password-wrapper {
    position: relative;
}

.password-wrapper input#password {
    width: 100%;
    box-sizing: border-box;
    padding-right: 45px; /* Make space for the icon */
}

/* THE FINAL FIX for the eye icon */

.password-toggle-btn:hover {
    background: transparent !important; /* Ensure no background on hover either */
}

.password-toggle-btn img {
    width: 20px;
    height: 20px;
    display: block;
    opacity: 0.5; /* Match the subtle gray look */
}
.password-toggle-btn:hover img {
    opacity: 0.8;
}

/* END: Login Page Mockup Styles (FINAL) */

/* START: New Header Styles */

header {
    background-color: #000000;
    color: #fff;
    padding: 10px 40px;
}

header .logo {
    font-weight: normal; /* Reset bold from original style */
}

header .logo img {
    height: 40px;
    display: block;
}

header nav {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center; /* <-- Add this line */
    gap: 5px;
}

header nav a, 
.nav-item.dropdown > a {
    color: #e0e0e0;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 18px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Remove old active style and replace it */
header nav a.active {
    border-bottom: none; 
    font-weight: 500;
}

header nav a:hover,
.nav-item.dropdown:hover > a,
.nav-item.dropdown > a.active {
    background-color: #333;
    color: #fff;
}

/* User Menu Specific Styles */
.user-menu {
    position: relative;
    display: inline-block;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    height: 20px;
    background: #FA812B;
}

.user-menu-trigger img { 
    height: 100%; 
    width: auto; 
    filter: invert(100%) sepia(93%) saturate(18%) hue-rotate(339deg) brightness(105%) contrast(100%); 
}

.user-menu-trigger:hover {
    background-color: #444;
}

.user-menu .user-icon {
    font-size: 1.2em;
}


/* END: New Header Styles */

/* START: Dropdown Menu Fixes & Enhancements (REVISED) */

/* The dropdown container no longer needs extra padding.
   This is the key to fixing the alignment. */

/* Base style for all dropdown content panels */
.dropdown-content {
    display: none; /* Hide by default */
    position: absolute;
    background-color: #f9f9f9;
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
    border-radius: 8px; /* Rounded corners for all dropdowns */
    top: 100%;

}
div#nav-quiz { margin-top: 10px; }

/* Rule to show the dropdown on hover OR when a parent has the 'active' class (for JS click) */
.dropdown:hover .dropdown-content,
.dropdown.active .dropdown-content {
    display: block;
}

/* Fix for Quiz Category dropdown alignment */
header nav .dropdown-content {
    left: 0;
}

/* Fix for User Menu dropdown alignment */
.user-menu .dropdown-content {
    right: 0;
    left: auto;
}

.user-menu .dropdown-content a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
}

.user-menu .dropdown-content a .dropdown-icon {
    font-weight: bold;
    font-size: 1.2em;
}

/* END: Dropdown Menu Fixes & Enhancements (REVISED) */

/* START: Home Page Menu Styles */

.home-menu-container {
    display: flex;
    justify-content: center;      /* vertical centering */
    align-items: center;
    min-height: calc(100vh - 51px);
}

.home-menu-inner {
    width: 100%;
    max-width: 1400px;            /* controls visual balance */
    padding-left: 80px;           /* matches your design offset */
    box-sizing: border-box;
}

.home-menu-header {
    font-size: 83px;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 0px;
    color: #000;
    text-align: left;
}

.home-menu-grid {
    display: flex;
    gap: 40px;
    flex-wrap: nowrap;    /* same row like design */
}



.menu-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;

    width: 320px;
    height: 320px;
    padding: 32px;

    border-radius: 20px;
    border: none;

    background: #FF8A2A; /* solid default orange */
    color: #000;

    text-decoration: none;
    box-sizing: border-box;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.35s ease;
}


.menu-card:hover {
    background: linear-gradient(
        180deg,
        #FF8A2A 0%,
        #FFB067 55%,
        #FFE1B8 100%
    );

    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.18);
}



.menu-card .menu-card-title {
    display: block;
    max-width: 150px;

    white-space: normal;
    word-break: normal;      /* ← IMPORTANT */
    overflow-wrap: normal;  /* ← IMPORTANT */

    font-size: 37px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}




/* END: Home Page Menu Styles */

/* START: Brand Material Library Page Styles */

/* UPDATED: This container is now truly full-width */
.container-full-width {
    margin: 40px 0;
    padding: 0 40px;
    box-sizing: border-box;

    /* NEW: make the whole library page a flex column */
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px); /* 80px ≈ header height, adjust if needed */
}



.container-full-width .library-title {
    font-size: 1.8em;
    font-weight: 600;
    margin: 0;
}

.container-full-width .library-title .item-count {
    font-weight: 400;
    color: #888;
}

.container-full-width .header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.search-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    background-color: #fff;
    height: 42px;
}

.search-wrapper input[type="search"] {
    border: none;
    padding: 10px 15px;
    font-size: 1em;
    outline: none;
    width: 220px;
    color: #333; /* Fix: Set text color to dark gray */
    background-color: #fff; /* Ensure background is white */
}
.search-wrapper input[type="search"]::placeholder {
    color: #999; /* Lighter gray for placeholder */
}
.search-wrapper input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.search-wrapper .search-btn {
    background: none;
    border: none;
    border-left: 1px solid #eee;
    padding: 0 12px;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
}

.search-wrapper .search-btn img {
    height: 18px;
    width: 18px;
    opacity: 0.7;
}

.header-actions .primary-btn {
    background-color: #000;
    color: #fff;
    padding: 11px 20px;
    border-radius: 6px;
    text-decoration: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
    height: 42px;
    box-sizing: border-box;
}

#material-table {
    width: 100%;
    border-collapse: collapse;
}

#material-table thead th {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.8em;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background-color: transparent;
}

#material-table tbody td {
    padding: 20px 10px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

#material-table tbody tr:last-child td {
    border-bottom: none;
}

#material-table .col-actions {
    text-align: right;
}

#material-table tbody td a {
    color: #333;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
}
#material-table tbody td a:hover {
    text-decoration: underline;
}

/* UPDATED: Styles for the new red delete icon button */
#material-table .icon-btn {
    background: none;
    border: 1px solid #e74c3c;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#material-table .icon-btn:hover {
    background-color: #fef6f5;
}

#material-table .icon-btn img {
    height: 100%;
    width: 100%;
    vertical-align: middle;
    /* This filter converts a black SVG to the target red color (#e74c3c) */
    filter: invert(48%) sepia(48%) saturate(5185%) hue-rotate(334deg) brightness(93%) contrast(91%);
}


.pagination-container {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #888;
    padding: 0 10px;
}

.pagination-controls {
    display: flex;
    gap: 10px;
}

.pagination-btn {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background-color: #FA812B;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    color: #ffffff;
    font-size: 0.9em;
    font-weight: 500;
    display: inline-block;
    transition: background-color 0.2s;
}

.pagination-btn:hover:not(:disabled) {
    background-color: #000000;
    color: #FA812B;
}

.pagination-btn:disabled {
    background-color: #f9f9f9;
    color: #ccc;
    cursor: not-allowed;
    border-color: #FA812B;
}

/* END: Brand Material Library Page Styles */

/* START: Action Icon & Table Styles (FINAL) */

/* 1. Unify Title Link Style across all library tables */
#material-table tbody td a,
#quiz-table tbody td a,
#playlist-table tbody td a {
    color: #333;
    font-weight: 500;
    text-decoration: none;
    
}
#material-table tbody td a:hover,
#quiz-table tbody td a:hover,
#playlist-table tbody td a:hover {
    text-decoration: underline;
}

/* Style for the 'artist' subtitle in tables */
.artist-name {
    color: #666;
}

/* Common styling for action columns to ensure right-alignment */
.col-actions {
    text-align: right;
}

/* A flex container for the action buttons to group them with a gap */
.action-buttons {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

/* The form itself should not add extra space */
.action-buttons form {
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* 2. Base style for ALL icon buttons (the square box) */
.icon-btn {
    border: 1px solid #e74c3c; /* Default border is red for trash */
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: background-color 0.2s;
}
.icon-btn:hover {
    background-color: #fef6f5; /* Default hover is light red */
}

/* Style for the image inside the button */
.icon-btn img {
    height: 100%;
    width: 100%;
    vertical-align: middle;
    /* 3. Default icon color is RED for the trash can */
    filter: invert(48%) sepia(48%) saturate(5185%) hue-rotate(334deg) brightness(93%) contrast(91%);
}


/* --- Overrides for Plus and Pen buttons --- */

/* Override border and hover for non-trash buttons */
.icon-btn-add,
.icon-btn-edit {
    border-color: transparent; /* Neutral gray border */
}
.icon-btn-add:hover,
.icon-btn-edit:hover {
    background-color: #f5f5f5; /* Neutral gray hover */
}

/* Override icon color to BLACK for plus and pen */
.icon-btn-add img,
.icon-btn-edit img {
    /* This filter reliably turns a black SVG into black (i.e., no change) */
    filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(0%) contrast(100%);
}

/* END: Action Icon & Table Styles (FINAL) */

/* START: Upload Page Styles */

/* Main container for upload pages */
.upload-page-container {
    
    margin: 40px auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* Header with back button and title */
.page-subheader {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px; /* Increased space below header */
}

.page-subheader .back-link {
    font-size: 34px;
    font-weight: bold;
    text-decoration: none;
    color: #000000;
    line-height: 1;
    transition: color 0.2s;
}

.page-subheader .back-link:hover {
    color: #FA812B;
}

.page-subheader h2 {
    margin: 0;
    font-size: 34px;
    font-weight: 700;
}

/* Main form layout container */
.upload-form-layout {
    display: flex;
    gap: 40px;
}

/* Column for file drop zones */
.file-area-column {
    flex: 2; /* Takes up more space */
}

/* Special case for GTL with two file columns */
.upload-form-layout.dual-uploader .file-area-column {
    flex: 1; /* Each file column is equal */
}

/* Column for the form fields on the right */
.form-fields-column {
    flex: 1; /* Takes up less space */
    display: flex;
    flex-direction: column;
}

/* General styling for form fields */
.form-fields-column label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
    font-size: 0.9em;
}
/* Add space between form fields */
.form-fields-column label:not(:first-of-type) {
    margin-top: 20px;
}

.form-fields-column input[type="text"],
.form-fields-column select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1em;
    box-sizing: border-box;
    background-color: #fff;
}

.form-fields-column input[type="text"]::placeholder {
    color: #aaa;
}

.form-fields-column input[type="text"]:focus,
.form-fields-column select:focus {
    outline: none;
    border-color: #000;
}

/* Styling for the file drop area */
.file-drop-area {
    border: 1px solid #ddd; /* Changed from dashed to solid */
    border-radius: 8px;
}

.file-drop-area p {
    color: #888;
}

.file-drop-area a { 
    color: #333;
    text-decoration: underline;
    font-weight: 500;
}

/* For GTL titles "Question Video" */
.file-area-column > h3 {
    font-size: 1em;
    font-weight: 500;
    margin: 0 0 10px 0;
    color: #555;
}

/* Submit Button anchored to the bottom right */
.submit-button {
    margin-top: auto; /* Pushes to the bottom */
    align-self: flex-end; /* Aligns to the right */
    background-color: #1a1a1d;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}
.submit-button:hover {
    background-color: #333;
}

/* END: Upload Page Styles */

/* START: Show/Edit Page Styles (FINAL) */

/* Prepare the main container to act as a positioning anchor */
.upload-page-container {
    position: relative;
}

/* 
  Styles and positions the floating action button (+).
  This single rule handles everything.
*/
.page-fab-button {
    position: absolute;
    top: 0;
    right: 40px; /* Aligns with the container's right padding */
    z-index: 10;
}

/* Use flexbox on the details pane to push the actions to the bottom */
.details-pane {
    display: flex;
    flex-direction: column;
}

/* Position the action buttons at the bottom-right of the details pane */
.details-actions {
    margin-top: auto;
    align-self: flex-end;
    display: flex;
    gap: 10px;
}

/* Style for the red outlined "Delete" button */
.details-actions .delete-btn {
    background-color: #fff;
    color: #e74c3c;
    border: 1px solid #e74c3c;
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 0.9em;
}
.details-actions .delete-btn:hover {
    background-color: #fef6f5;
}

/* Style for the solid black "Edit" button */
.details-actions .primary-btn {
    background-color: #1a1a1d;
    color: #fff;
    border: 1px solid #1a1a1d;
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 500;
    text-decoration: none;
    font-size: 0.9em;
}
.details-actions .primary-btn:hover {
    background-color: #333;
}

/* END: Show/Edit Page Styles (FINAL) */

/* START: Video Player Positioning Fix */

/* 
  This rule targets any video that is a direct child of our aspect ratio container.
  It correctly positions the video to fill the container space.
*/
.aspect-ratio-wrapper > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Provides black bars if video isn't 16:9 */
}

/* END: Video Player Positioning Fix */

/* START: Add to Playlist Modal Styles */

/* A wider modal for this specific purpose */
.modal-content.large-ish {
    width: 800px;
    padding: 0; /* Remove default padding to use our own structure */
}

/* Modal Header styling */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
}

.modal-header .modal-title {
    margin: 0;
    font-size: 1.5em;
    font-weight: 600;
}

.modal-header #playlist-modal-search {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 200px;
    color: #333; /* Fix: Set text color */
    background-color: #fff;
}
.modal-header #playlist-modal-search::placeholder {
    color: #999;
}

/* Modal Body with scrolling */
#playlist-modal-body {
    max-height: 420px; /* Limits to ~5 items before scrolling */
    overflow-y: auto;
    padding: 0;
}

/* Modal Footer styling */
.modal-footer {
    padding: 15px 25px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
}
.modal-footer .close-modal-btn {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    padding: 8px 20px;
}
.modal-footer .close-modal-btn:hover {
    background-color: #f5f5f5;
}

/* Table styles inside the modal */
.modal-table {
    width: 100%;
    border-collapse: collapse;
}

.modal-table th {
    text-align: left;
    padding: 12px 25px;
    background-color: #f9ba83;
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    text-transform: uppercase;
}

.modal-table td {
    padding: 15px 25px;
    border-bottom: 2px solid black;
    vertical-align: middle;
}

.playlist-title-info {
    font-weight: 600;
    color: #000000;
}
.playlist-creator {
    font-size: 12px;
    color: #777;
    margin-top: 2px;
    font-style: italic;
}

.playlist-code-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: monospace;
    color: #555;
}

.copy-code-btn {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.6;
}
.copy-code-btn:hover {
    opacity: 1;
}

/* === Add-to-playlist action button (PLUS / MINUS only) === */
.add-to-playlist-action-btn{
    border: 1px solid #ccc;
    background: #fff;              /* PLUS state = white */
    border-radius: 6px;
    width: 36px;
    height: 36px;
    padding: 0;                    /* IMPORTANT: no padding so icon centers */
    cursor: pointer;

    display: inline-flex;          /* center icon perfectly */
    align-items: center;
    justify-content: center;

    transition: background-color .15s, border-color .15s;
}

/* icon size + default black */
.add-to-playlist-action-btn img{
    width: 16px;
    height: 16px;
    display: block;
    filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(0%) contrast(100%);
}

/* MINUS state = red bg, white icon */
.add-to-playlist-action-btn.added{
    background: #e74c3c;
    border-color: #e74c3c;
}
.add-to-playlist-action-btn.added img{
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(200%) contrast(100%);
}

/* hover */
.add-to-playlist-action-btn:hover{
    background: #f5f5f5;
}
.add-to-playlist-action-btn.added:hover{
    background: #d64533;
}


/* END: Add to Playlist Modal Styles */

/* START: Modal Icon Styles */

/* Style for the copy and plus icons inside the modal table */
.modal-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle; /* Aligns the icon nicely with text */
}

/* END: Modal Icon Styles */

/* START: Final Modal & Form Styles */

/* THE FIX: Use Flexbox for perfect vertical and horizontal centering */
.modal {
    display: flex; /* Changed from none/block */
    align-items: center;
    justify-content: center;
}

/* Base style for the compact modal */
.modal-content.compact {
    width: 500px;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    margin: 0; /* Remove old margin to allow flexbox centering */
}

/* Compact Modal Header */
.modal-header.compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    border-bottom: 1px solid #eee;
}
.modal-header.compact .modal-title {
    margin: 0;
    font-size: 1.4em;
    font-weight: 600;
}
.modal-header.compact .close-btn {
    float: none;
    font-size: 28px;
    font-weight: normal;
    color: #fa812b;
}

/* Compact Modal Body */
.modal-body.compact {
    padding: 10px 30px 10px 30px;
    border-top: none;
    border-bottom: none;
    max-height: none;
    overflow-y: visible;
    background-color: transparent;
}

/* THE FIX: Style for labels and the red asterisk */
.modal-body.compact label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #000; /* Black label text */
}
.modal-body.compact label .required {
    color: #e74c3c; /* Red asterisk */
}
.modal-body.compact label:not(:first-of-type) {
    margin-top: 20px;
}

/* Input field styling */
.modal-body.compact input[type="text"],
.modal-body.compact input[type="password"],
.modal-body.compact select {
    width: 100%;
    padding: 14px;
    border: 2px solid #fa812b;
    border-radius: 8px;
    font-size: 1em;
    box-sizing: border-box;
    background-color: #f9fafb;
}
.modal-body.compact input:focus,
.modal-body.compact select:focus {
    outline: none;
    border-color: #000;
    background-color: #fff;
}

/* Compact Modal Footer */
.modal-footer.compact {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 30px;
    border-top: 1px solid #eee;
}
/* ... (footer button styles are fine) ... */


/* --- User Modal Password Field Styles (FINAL) --- */

.password-input-wrapper {
    position: relative;
}

.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] {
    width: 100%;
    padding-right: 120px;
}

/* THE FIX: Use transform for perfect vertical centering */

.password-input-wrapper .input-icon-btn img {
    height: 18px;
    width: 18px;
    opacity: 0.6;
}
.password-input-wrapper .input-icon-btn:hover img {
    opacity: 1;
}

/* Position each icon button */
#toggle-password-btn { right: 80px; }
#copy-password-btn { right: 45px; }
#generate-password-btn { right: 10px; }

/* END: Final Modal & Form Styles */

/* START: Playlist Detail Page Styles (FINAL) */

/* 1. Make the container full-width */
.playlist-detail-container {
    /* REMOVED max-width and auto margin */
    margin: 40px 0;
    padding: 0 40px;
}

/* Header section */
.playlist-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}
.playlist-detail-header .header-main {
    display: flex;
    align-items: center;
    gap: 20px;
}
.playlist-detail-header .back-link {
    font-size: 28px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}
.playlist-detail-header h2 {
    margin: 0;
    font-size: 1.8em;
    display: flex;
    align-items: center;
    gap: 15px;
}
.playlist-detail-header h2 .icon-btn-edit {
    border: none;
    background: none;
}
.playlist-detail-header small {
    display: block;
    color: #888;
    margin-top: 5px;
}

/* 2. Make the code display bigger */
.playlist-code-display {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #f0f0f0;
    padding: 10px 15px; /* Increased padding */
    border-radius: 6px;
    font-family: monospace;
    font-size: 1.1em; /* Increased font size */
}
.playlist-code-display .copy-code-btn {
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

/* Tab styling */
.playlist-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}
.playlist-tabs .tab-link {
    padding: 10px 20px;
    text-decoration: none;
    color: #555;
    border-bottom: 3px solid transparent;
    font-weight: 500;
}
.playlist-tabs .tab-link.active {
    color: #000;
    font-weight: bold;
    border-bottom-color: #000;
}

/* Song list table styling */
.playlist-song-table {
    width: 100%;
    border-collapse: collapse;
}
.playlist-song-table th {
    text-align: left;
    padding: 10px 0;
    font-size: 0.8em;
    color: #999;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid #eee;
}
.playlist-song-table td {
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
}
.playlist-song-table tr:last-child td {
    border-bottom: none;
}
.song-title-artist small {
    color: #777;
}

/* 3. Fix Action buttons in the table */
.song-actions {
    text-align: right;
    display: flex; /* Use flexbox for easy spacing */
    justify-content: flex-end;
    align-items: center;
    gap: 10px; /* This creates the space between buttons */
}

/* Common style for all three action buttons in the table */
.song-actions .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid #ddd; /* Default gray border */
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    padding: 8px;
}
.song-actions .icon-btn img { 
    width: 100%; 
    height: 100%; 
}

/* --- THE FIX: ICON COLORS --- */

/* Make the up and down arrow icons BLACK */
.song-actions .move-up-btn img,
.song-actions .move-down-btn img {
    filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(0%) contrast(100%);
}

/* Make the remove button BORDER red */
.song-actions .remove-song-btn {
    border-color: #e74c3c;
}

/* Make the remove button ICON red */
.song-actions .remove-song-btn img {
    filter: invert(48%) sepia(48%) saturate(5185%) hue-rotate(334deg) brightness(93%) contrast(91%);
}


/* Disabled state for order/remove buttons */
.song-actions .icon-btn {
    opacity: 0.3;
    pointer-events: none;
}
/* Enabled state (when in edit mode) */
.edit-mode-active .song-actions .icon-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Hover effects */
.song-actions .move-up-btn:hover,
.song-actions .move-down-btn:hover {
    background-color: #f5f5f5;
}
.song-actions .remove-song-btn:hover {
    background-color: #fef6f5; /* Light red hover */
}

/* 4. Restyle Main action buttons at the bottom */
.playlist-page-actions {
    margin-top: 40px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
/* Style all buttons in this container */
.playlist-page-actions button {
    padding: 10px 20px;
    font-size: 0.9em;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
}
/* Black button style */
.playlist-page-actions .primary-btn {
    background-color: #fa812b;
    color: #000000;
    transition: color 0.2s linear, background-color 0.2s linear;
}
.playlist-page-actions .primary-btn:hover {
    background-color: #000000;
    color: #fa812b;
}
/* Red outlined button style */
.playlist-page-actions .delete-btn {
    background-color: #fff;
    color: #e74c3c;
    border: 1px solid #e74c3c;
}
.playlist-page-actions .delete-btn:hover {
    background-color: #fef6f5;
}
/* Gray outlined button style (for Cancel) */
.playlist-page-actions .secondary-btn {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
}
.playlist-page-actions .secondary-btn:hover {
    background-color: #f5f5f5;
}

/* Initially hide the Save/Cancel buttons */
#save-order-btn, #cancel-edit-btn {
    display: none;
}
/* Show Save/Cancel and hide others when in edit mode */
.edit-mode-active #add-song-btn,
.edit-mode-active #delete-playlist-form, /* Target the form to hide the delete button */
.edit-mode-active #edit-song-order-btn {
    display: none;
}
.edit-mode-active #save-order-btn,
.edit-mode-active #cancel-edit-btn {
    display: inline-block;
}

/* END: Playlist Detail Page Styles (FINAL) */

/* START: User Library Page Styles */

/* Make the user's full name bold */
#user-table .user-full-name {
    font-weight: 500;
}

/* Style for the 'Change Password' icon button */
.icon-btn-password {
    border-color: #a0a0a0;
}
.icon-btn-password:hover {
    background-color: #f5f5f5;
}
.icon-btn-password img {
    /* Filter to turn a black SVG gray */
    filter: invert(73%) sepia(0%) saturate(22%) hue-rotate(149deg) brightness(87%) contrast(93%);
}

/* END: User Library Page Styles */

/* START: User Modal Password Field Styles */

.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] {
    width: 100%;
    padding-right: 120px; /* Make space for 3 icons */
}

.password-input-wrapper .input-icon-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.password-input-wrapper .input-icon-btn img {
    height: 18px;
    width: 18px;
    opacity: 0.6;
}
.password-input-wrapper .input-icon-btn:hover img {
    opacity: 1;
}

/* Position each icon button */
#toggle-password-btn { right: 80px; }
#copy-password-btn { right: 45px; }
#generate-password-btn { right: 10px; }


/* END: User Modal Password Field Styles */

/* START: User Modal Hint Text Style */

.password-hint-text {
    display: block;
    margin-top: 5px;
    color: #888;
}

/* END: User Modal Hint Text Style */

/* ===========================
   Add Song Modal – Playlist Detail
   =========================== */

/* Big centered modal, similar to Figma mockup */
.add-song-modal-content {
    width: 900px;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    padding: 0;
    margin: 0;
}

/* Header: title left, search + prev/next right */
.add-song-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background-color: transparent;
}

.add-song-modal-header .modal-title {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
}

/* Right-side controls wrapper */
.add-song-modal-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Search input (matches top search style) */
.add-song-search-input {
    width: 320px;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95rem;
    box-sizing: border-box;
    color: #333; /* Fix: Set text color */
    background-color: #fff;
}
.add-song-search-input::placeholder {
    color: #999;
}

/* Prev / Next buttons reusing pagination style */
.add-song-paging {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Body – scrollable list area
   Height tuned so ~10 items are visible before scrolling */
.add-song-modal-body {
    padding: 0;
    background-color: transparent;
    max-height: 480px; /* ≈ 10 rows */
    overflow-y: auto;
}

/* Footer – just the Close button center/right */
.add-song-modal-footer {
    padding: 16px 28px;
    border-top: 0px solid #eee;
    display: flex;
    justify-content: center;
}

/* Close button styling */
.add-song-modal-footer .close-modal-btn {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    padding: 8px 24px;
    border-radius: 6px;
    font-size: 0.95rem;
}
.add-song-modal-footer .close-modal-btn:hover {
    background-color: #f5f5f5;
}

/* ===========================
   Song list rows inside modal
   =========================== */

.add-song-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.add-song-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    border-bottom: 1px solid #f5f5f5;
    background-color: #fff;
}

.add-song-item:last-child {
    border-bottom: none;
}

/* Title + artist text */
.add-song-text strong {
    font-weight: 500;
    color: #333;
}
.add-song-text small {
    color: #888;
    font-size: 0.85rem;
}

/* Plus button on the right (square, with the plus.svg) */
.add-song-btn.icon-btn.icon-btn-add {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    border-color: #ddd;
    background-color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-song-btn.icon-btn.icon-btn-add:hover {
    background-color: #f5f5f5;
}

/* Ensure the plus icon is black (not red) */
.add-song-btn.icon-btn.icon-btn-add img {
    filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(0%) contrast(100%);
    width: 16px;
    height: 16px;
}

.mk-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.mk-modal-backdrop.active { display: flex; }

.mk-modal {
  background: linear-gradient(180deg, #FBE4C6 0%, #F6D4AA 55%, #E7DED2 100%);
  width: 420px;
  max-width: calc(100vw - 32px);
  border-radius: 8px;
  padding: 22px 22px 16px;
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  box-sizing: border-box;
}

.mk-modal-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: #111;
}

.mk-modal-close {
  position: absolute;
  right: 10px;
  top: 8px;
  border: none;
  background: transparent;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  color: #fa812b;              /* FIX: visible X */
  line-height: 1;
  opacity: 0.7;
}
.mk-modal-close:hover { opacity: 1; }

.mk-form { display: grid; gap: 8px; }

.mk-label {
  font-size: 12px;
  font-weight: 600;
  color: #333;
}
.mk-required { color: #e23b3b; }

.mk-input-wrap {
  position: relative;
  width: 100%;
}

.mk-input-wrap input {
  width: 100%;
  height: 38px;
  padding: 0 44px 0 10px;   /* FIX: space for eye */
  border-radius: 6px;
  border: 2px solid #fa812b;
  box-sizing: border-box;   /* FIX: prevents overflow */
  font-size: 13px;
}

.mk-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);  /* FIX: aligns eye vertically */
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
}
.mk-eye:hover { opacity: 1; }

.mk-eye img { width: 16px; height: 16px; display: none; }
.mk-eye .mk-eye-open { display: block; }
.mk-eye.is-open .mk-eye-open { display: none; }
.mk-eye.is-open .mk-eye-closed { display: block; }

.mk-modal-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.mk-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.mk-btn-primary { background: #111; color: #fa812b; border: none; }
.mk-btn-ghost { background: #fff; border: 1px solid #222; color: #222; }

.mk-error {
  margin-top: 6px;
  padding: 8px;
  color: #b00020;
  background: #ffecec;
  border-radius: 6px;
  font-size: 12px;
}
.mk-success {
  margin-top: 6px;
  padding: 8px;
  color: #0b7d0b;
  background: #eaffea;
  border-radius: 6px;
  font-size: 12px;
}

.mk-hidden { display: none !important; }

/* Add-song modal plus/minus button */
.add-song-action-btn{
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s, border-color .15s;
}
.add-song-action-btn img{
    width: 16px;
    height: 16px;
    display: block;
    filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(0%) contrast(100%);
}
.add-song-action-btn.added{
    background: #e74c3c;
    border-color: #e74c3c;
}
.add-song-action-btn.added img{
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(200%) contrast(100%);
}

/* Entire row clickable hover */
.clickable-row {
    cursor: pointer;
    transition: background-color .15s ease;
}

.clickable-row:hover {
    background: #fba568;
    box-shadow: inset 0 0 0 1px #e6e9ef;
}

/* Flash message helper */
.flash-hidden {
    display: none !important;
}

/* Empty state message */
.empty-state-message {
    padding: 20px;
    text-align: center;
    color: #666;
}

/* Drag and drop styling */
.file-drop-area {
    cursor: pointer;
}

.file-drop-area.drag-over {
    border-color: #007bff !important;
}

/* Hidden utility class */
.hidden {
    display: none !important;
}

/* Delete confirmation modal buttons */
.delete-modal-cancel-btn {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
}
.delete-modal-cancel-btn:hover {
    background-color: #f5f5f5;
}

.delete-modal-delete-btn {
    background-color: #e74c3c;
    color: #fff;
    border: 1px solid #e74c3c;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
}
.delete-modal-delete-btn:hover {
    background-color: #d64533;
}
/* Center everything inside the delete-confirm-modal */
#delete-confirm-modal .modal-content.compact {
    text-align: center;
}

/* Center the title */
#delete-confirm-modal .modal-header.compact {
    justify-content: center;       /* center the heading */
}

/* Keep the X button on the right */
#delete-confirm-modal .modal-header.compact .close-btn {
    position: absolute;
    right: 24px;
}

/* Center the message text */
#delete-confirm-modal .modal-body.compact p {
    margin-bottom: 24px;
}

/* Center the buttons horizontally */
#delete-confirm-modal .modal-footer.compact {
    justify-content: center;
    gap: 12px;
}


/* Filters layout inside Add Song modal (for GTT & GTL) */
.add-song-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 8px 24px 12px;
    font-size: 14px;
}

.add-song-filters-group {
    min-width: 220px;
}

.add-song-filters-group .filters-label {
    font-weight: 600;
    margin-bottom: 4px;
}

.add-song-filters-group .filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.filter-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* Scroll area for table body */
.add-song-table-wrapper {
    max-height: 430px;
    overflow-y: auto;
}

/* Ensure last column (buttons) hugs the right edge */
.modal-table th.col-actions,
.modal-table td.col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.add-song-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Optional: tighten cell padding so it feels like the library tables */
.add-song-table td,
.add-song-table th {
    padding-right: 16px;
}

/* Modal size – a bit taller so content fits nicely */
.add-song-modal-content {
    max-width: 960px;
    max-height: 88vh;          /* was 80vh */
    display: flex;
    flex-direction: column;
}

.add-song-modal-header,
.add-song-modal-footer {
    flex: 0 0 auto;
}

.add-song-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;          /* ONLY this scrolls */
    padding: 0 24px 16px;      /* no top padding, let filters handle it */
    border: 0px;
}

/* ===== Sticky filters at the very top ===== */
.add-song-filters {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fae0bf;
    padding: 10px 0 10px;      /* vertical padding inside modal body */
    margin: 0;                 /* no margin, avoids weird offsets */
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
}

.add-song-filters-group {
    min-width: 220px;
}

.add-song-filters-group .filters-label {
    font-weight: 600;
    margin-bottom: 4px;
}

.add-song-filters-group .filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Checkbox + text centered nicely */
.filter-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-style: italic;
}

.filter-checkbox input {
    margin: 0;
}

/* ===== Table + sticky header just under filters ===== */
.add-song-table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid black;
}

/* Make header thicker and fully cover rows behind it */
.add-song-table thead th {
    position: sticky;
    top: 56px;                 /* height of filters block – adjust 52–64px if needed */
    z-index: 4;
    background: #f9c494;
    padding: 12px 16px;        /* bigger header height */
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: black;
}
/* When there are NO filters (DTC & KM), header should sit at top */
.add-song-table.no-filters thead th {
    top: 0;
}


/* Cells */
.add-song-table td {
    padding: 10px 16px;
}

/* Keep + / – column on the far right */
.add-song-table th.col-actions,
.add-song-table td.col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.add-song-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* FIX: keep GTL / GTT quiz table columns a fixed size */
#quiz-table {
    table-layout: fixed;          /* columns use the widths below */
}

/* Prevent content from stretching columns */
#quiz-table th,
#quiz-table td {
    overflow: hidden;
}

/* NO column */
#quiz-table th:nth-child(1),
#quiz-table td:nth-child(1) {
    width: 6%;
}

/* Title column */
#quiz-table th:nth-child(2),
#quiz-table td:nth-child(2) {
    width: 30%;
}

/* Middle columns (Level / Category) */
#quiz-table th:nth-child(3),
#quiz-table td:nth-child(3),
#quiz-table th:nth-child(4),
#quiz-table td:nth-child(4) {
    width: 14%;
}

/* Actions column (+ / trash) */
#quiz-table th:nth-child(5),
#quiz-table td:nth-child(5),
#quiz-table td.col-actions {
    width: 6%;
    text-align: right;
}

/* Make long titles nicely truncated instead of pushing layout */
#quiz-table .row-title {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 17px;
    font-weight: 600;
}

#quiz-table .artist-name {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-style: italic;
}

/* === Make all library pages 1 screen tall, with internal scroll === */

/* Main wrapper for library pages */
.container-full-width {
    /* remove vertical margin so it doesn't add extra height */
    margin: 0;
    padding: 20px 40px 20px;
    box-sizing: border-box;

    /* take up the whole viewport (minus top navbar height ~60px) */
    min-height: calc(100vh - 51px);

    display: flex;
    flex-direction: column;
}

/* Middle content (filters + table) should fill remaining space and scroll */
.library-layout {
    display: flex;
    gap: 30px;
    margin-top: 20px;

    flex: 1 1 auto;
    min-height: 0;          /* important for flexbox scrolling */
    overflow-y: auto;       /* scroll inside, not the whole page */
}

/* Pages without sidebar (no .library-layout) – let the table area scroll */
.container-full-width > .library-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Pagination stays fixed at bottom of the container */
.pagination-container {
    margin-top: 15px;
    flex-shrink: 0;
}


.login-container.login-container--mockup{
    width: 520px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}


/* form spacing */


/* inputs match thin border look */
.login-form input[type="text"],
.login-form input[type="password"]{
    height: 54px;
    border: 1px solid #111;
    border-radius: 6px;
    padding: 0 16px;
    font-size: 16px;
    background: rgba(255,255,255,0.25);
    box-sizing: border-box;
}

.login-form input:focus{
    outline: none;
    border-color: #111;
    background: rgba(255,255,255,0.35);
}

/* password eye stays inside */
.password-wrapper{
    position: relative;
}

.password-wrapper input#password{
    width: 100%;
    padding-right: 54px;
}

.password-toggle-btn{
    position: absolute;
    right: 14px;
    top: 40%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.password-toggle-btn img{
    width: 18px;
    height: 18px;
    opacity: 0.55;
}

.password-toggle-btn:hover img{
    opacity: 0.85;
}

/* button: black with orange text */
.login-btn{
    background: #0B0B0B;
}

.login-btn:hover{
    background: #111;
}

/* Responsive: stack panels on small screens */
@media (max-width: 900px){
    .login-page-wrapper{ flex-direction: column; }
    .left-panel{ flex-basis: auto; height: 38vh; }
    .right-panel{ flex-basis: auto; height: 62vh; }
    .left-panel-top{ padding: 28px; }
    .login-title{ font-size: 44px; }
}

/* ============================
   GTT / Quiz Library – UI polish
   (no changes to .icon-btn / trash / plus)
   ============================ */

.container-full-width .library-title{
    font-size: 75px;
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
}

.container-full-width .library-title .item-count{
    display: block;          /* pushes to next line */
    margin-top: 8px;
    font-size: 31px;
    font-weight: 700;
    color: #FF8A2A;          /* keep orange */
}


/* Search bar border + icon button */
.container-full-width .search-wrapper{
    border: 2px solid #FF8A2A;   /* orange border */
    border-radius: 10px;
    height: 46px;
    background: #fff;
}

/* Make the inner divider orange too */
.container-full-width .search-wrapper .search-btn{
    border-left: 2px solid #FF8A2A;
}

/* Optional: make search icon orange (remove if you prefer it black) */
.container-full-width .search-wrapper .search-btn img{
    opacity: 1;
    filter: invert(55%) sepia(87%) saturate(2400%) hue-rotate(346deg) brightness(100%) contrast(101%);
}

/* Upload button orange (only this button; doesn't affect + / trash icons) */
.container-full-width .header-actions .primary-btn{
    background: #FF8A2A;
    border: 2px solid #FF8A2A;
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
    height: 46px;
    padding: 0 22px;
}

.container-full-width .header-actions .primary-btn:hover{
    background: #ff7a10;
    border-color: #ff7a10;
}

/* ===== Table: black borders ===== */
#quiz-table{
    border: 2px solid #000;       /* outside border */
    border-radius: 14px;
    overflow: hidden;             /* keeps rounded corners clean */
    border-collapse: separate;    /* needed for border-radius */
    border-spacing: 0;
}

#quiz-table thead th{
    background: transparent;
    color: #000;
    font-size: 28px;
    font-weight: 400;
    border-bottom: 2px solid #000;  /* header separator */
}

#quiz-table tbody td{
    border-bottom: 2px solid #000;  /* row separators */
}

/* remove last row bottom border so table border looks clean */
#quiz-table tbody tr:last-child td{
    border-bottom: none;
}

/* Upload button centered text */
.container-full-width .header-actions .primary-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;          /* prevents text sitting low */
}

/* ============================
   Unified Library Table Style
   (Quiz, Brand Material, Playlist, User)
   ============================ */

.library-content table {
    width: 100%;
    border: 2px solid #000;
    border-radius: 14px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

/* Table header */
.library-content table thead th {
    font-weight: 700;
    font-size: 16px;
    text-align: left;
    padding: 14px 16px;
    border-bottom: 2px solid #000;
}

/* Table rows */
.library-content table tbody td {
    border-bottom: 2px solid #000;
    vertical-align: middle;
}

/* Remove last row divider */
.library-content table tbody tr:last-child td {
    border-bottom: none;
}

/* =========================================================
   UNIFY TABLE LOOK: quiz-table style for ALL libraries
   (Brand Material, Playlist, User) + keep your icon buttons
   ========================================================= */

/* Outer border + rounded corners like quiz table */
#quiz-table,
#material-table,
#playlist-table,
#user-table {
  width: 100%;
  border: 2px solid #000;
  border-radius: 14px;
  border-collapse: separate;   /* needed for rounded corners */
  border-spacing: 0;
  overflow: hidden;
  background: transparent;
}

/* Transparent thead + font sizing like quiz table */
#quiz-table thead th,
#material-table thead th,
#playlist-table thead th,
#user-table thead th {
  background: transparent !important; /* override global th bg */
  color: #000;
  font-size: 20px;                    /* match quiz table header size */
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 16px 18px;
  border-bottom: 2px solid #000;
}

/* Row separators (black) */
#quiz-table tbody td,
#material-table tbody td,
#playlist-table tbody td,
#user-table tbody td {
  border-bottom: 2px solid #000;
  vertical-align: middle;
}

/* No border on last row */
#quiz-table tbody tr:last-child td,
#material-table tbody tr:last-child td,
#playlist-table tbody tr:last-child td,
#user-table tbody tr:last-child td {
  border-bottom: none;
}

/* Make sure Brand Material doesn't look "overwritten" (no forced uppercase/gray header) */
#material-table thead th {
  color: #000;
}
#material-table tbody td a {
  text-transform: none !important;
}

.video-player-container .aspect-ratio-wrapper{
  position: static;
  padding-top: 0;
  background: transparent;
}

.video-player-container video{
  position: static;
  width: 100%;
  height: auto;
  display: block;
  object-fit: initial;
}

/* Make right column stretch and push timestamps to bottom */
.details-pane{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Push timestamps to bottom of the right column */
.details-pane .timestamps{
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Optional: keep same “light/italic” feel */
.details-pane .timestamps span{
  display: block;
}

/* =========================
   Playlist Detail – Design Layout (Override)
   Put this at the VERY BOTTOM of style.css
   ========================= */

.playlist-detail-container{
    margin: 0;
    padding: 24px 40px 40px;
}

/* Top header (title left, code pill right) */
.playlist-design-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
}

.playlist-design-header .header-left{
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.playlist-design-header .back-link{
    font-size: 34px;
    font-weight: 800;
    color: #000;
    text-decoration: none;
    line-height: 1;
}
.playlist-design-header .back-link:hover{
    color: #FA812B;
}

.playlist-design-header .title-stack{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.playlist-design-header .playlist-title{
    margin: 0;
    font-size: 64px;
    font-weight: 800;
    color: #000;
    line-height: 1.05;
    display: flex;
    align-items: center;
    gap: 12px;
}

.playlist-created-by{
    font-size: 22px;
    font-style: italic;
    color: #FA812B;
}

/* Code pill on the right */
.playlist-code-pill{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FA812B;
    border-radius: 10px;
    padding: 12px 16px;
}

.playlist-code-pill .code-text{
    font-family: monospace;
    font-size: 18px;
    font-weight: 700;
    color: #000;
}

.playlist-code-pill .copy-code-btn{
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: 0.85;
}
.playlist-code-pill .copy-code-btn:hover{
    opacity: 1;
}
.playlist-code-pill .copy-code-btn img{
    width: 18px;
    height: 18px;
    filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(0%) contrast(100%);
}

/* Tabs row */
.playlist-design-tabs{
    display: flex;
    gap: 26px;
    border-bottom: none;
    margin: 8px 0 18px;
}

.playlist-design-tabs .tab-link{
    padding: 8px 0;
    text-decoration: none;
    color: #000;
    font-size: 20px;
    font-weight: 500;
    opacity: 0.75;
    border-bottom: 3px solid transparent;
}

.playlist-design-tabs .tab-link.active{
    opacity: 1;
    border-bottom-color: #FA812B;
}

/* List card */
.playlist-list-card{
    border: 2px solid #000;
    border-radius: 14px;
    overflow: hidden;
    background: transparent;
}

/* Table look like your mock */
.playlist-design-table{
    width: 100%;
    border-collapse: collapse;
}

.playlist-design-table thead th{
    background: rgba(250,129,43,0.25);
    color: #000;
    font-size: 22px;
    font-weight: 600;
    text-transform: none;
    padding: 14px 18px;
    border-bottom: 2px solid #000;
}

.playlist-design-table tbody td{
    padding: 16px 18px;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    background: transparent;
    min-height: 50px;
}

.playlist-design-table tbody tr:last-child td{
    border-bottom: none;
}

.playlist-design-table .song-title-artist small{
    font-style: italic;
    color: rgba(0,0,0,0.65);
}

/* Action buttons: tighter + match design spacing */
.playlist-design-table .song-actions{
    white-space: nowrap;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
}

/* Make arrow buttons look “icon-only” like the mock */
.playlist-design-table .song-actions .icon-btn{
    width: auto;
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
}

/* Keep arrow icons orange-ish like mock */
.playlist-design-table .move-up-btn img,
.playlist-design-table .move-down-btn img{
    width: 20px;
    height: 20px;
    filter: invert(55%) sepia(75%) saturate(3000%) hue-rotate(345deg) brightness(98%) contrast(92%);
}

/* Minus as orange circle */
.playlist-design-table .remove-song-btn{
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #FA812B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.playlist-design-table .remove-song-btn img{
    width: 16px;
    height: 16px;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(200%) contrast(100%);
}

/* Respect your edit-mode lock */
.playlist-design-table .song-actions .icon-btn{
    opacity: 0.3;
    pointer-events: none;
}
.edit-mode-active .playlist-design-table .song-actions .icon-btn{
    opacity: 1;
    pointer-events: auto;
}

/* Back button alignment */
.playlist-design-header .header-left{
    align-items: center; /* was flex-start */
}

.playlist-design-header .back-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 64px;              /* match title visual height */
    transform: translateY(-2px); /* tiny nudge like your mock */
}

/* Code pill positioned at top-right of the table/card */
.playlist-list-wrap{
    position: relative;
    margin-top: 8px;
}

.playlist-code-on-card{
    position: absolute;
    right: 0;
    top: -58px;          /* lifts it above the card like your mock */
    z-index: 5;
}

/* FIX: Action column alignment (playlist detail table) */
.playlist-song-table td.song-actions {
    padding-right: 0;                 /* remove default table padding */
    display: flex;
    justify-content: flex-end;         /* push buttons to far right */
    align-items: center;                        /* spacing like your design */
    white-space: nowrap;
    padding-right: 18px;
}

/* FIX: Normalize all playlist table icon buttons */
.playlist-song-table .song-actions .icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;                        /* KEY FIX */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: transparent;
    box-sizing: border-box;
    transition: background 0.2s linear;
}

.playlist-song-table .song-actions .icon-btn:hover {
    background: white;
}

/* FIX: Icon sizing inside action buttons */
.playlist-song-table .song-actions .icon-btn img {
    width: 16px;
    height: 16px;
    display: block;
}

/* Up / Down arrows = black */
.playlist-song-table .move-up-btn img,
.playlist-song-table .move-down-btn img {
    filter: invert(0%);
}

/* Minus button = red */
.playlist-song-table .remove-song-btn {
    border-color: #e74c3c;
}
.playlist-song-table .remove-song-btn img {
    filter: invert(48%) sepia(48%) saturate(5185%)
            hue-rotate(334deg) brightness(93%) contrast(91%);
}

/* =========================
   GTL Show Detail – Design Layout (2 videos)
   ========================= */

.show-gtl-page{
    padding-top: 10px;
}

/* Top bar */
.show-gtl-topbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.show-gtl-back{
    font-size: 34px;
    font-weight: 700;
    color: #000;
    text-decoration: none;
    transition: color 0.2s;
}
.show-gtl-back:hover{
    color: #FA812B;
}

/* Right actions */
.show-gtl-actions{
    display: flex;
    align-items: center;
    gap: 16px;
}

.show-gtl-plus{
    width: 44px;
    height: 44px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Delete / Edit buttons like the design */
.show-gtl-delete-form{
    margin: 0;
}

/* Delete = outlined orange (like screenshot) */
.show-gtl-delete-btn{
    height: 44px;
    padding: 0 22px;
    border-radius: 6px;
    line-height: 1;
    background: transparent;
    border: 1px solid red;
    color: red;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s, color .15s, border-color .15s;
}
.show-gtl-delete-btn:hover{
    background: red;
    border-color: red;
    color: white;
}

/* Edit = solid orange (like screenshot) */
.show-gtl-edit-btn{
    height: 44px;
    padding: 0 22px;
    border-radius: 6px;
    line-height: 1;
    background: #FA812B;
    border: 1px solid #FA812B;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s, color .15s, border-color .15s;
}
.show-gtl-edit-btn:hover{
    background: #000;
    border-color: #000;
    color: #FA812B;
}

/* Two-video grid */
.show-gtl-grid{
    display: flex;
    gap: 36px;
    align-items: flex-start;
}

/* Each side is equal width */
.show-gtl-col{
    flex: 1;
}

/* Make sure wrapper looks like the big rectangles */
.show-gtl-video{
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}

/* Left info block under left video */
.show-gtl-info{
    margin-top: 18px;
}

.show-gtl-title{
    margin: 0 0 10px 0;
    font-size: 54px;
    font-weight: 800;
    color: #000;
}

.show-gtl-label{
    font-size: 18px;
    font-weight: 500;
    color: #000;
    opacity: 0.8;
    margin-top: 6px;
}

.show-gtl-artist{
    font-size: 46px;
    font-weight: 800;
    color: #000;
    margin-top: 2px;
}

/* Timestamps under right video */
.show-gtl-timestamps{
    display: block;
    margin-top: 18px;
    font-size: 18px;
    font-style: italic;
    color: #000;
    opacity: 0.7;
}

/* GTL: force true 16:9 without the old padding-top trick */
.show-gtl-grid{
  display: flex;
  gap: 36px;
  align-items: flex-start;
}

.show-gtl-col{
  flex: 1;
  min-width: 0; /* prevents overflow pushing layout */
}

/* IMPORTANT: override any existing padding-top aspect-ratio hack */
.aspect-ratio-wrapper.show-gtl-video{
  padding-top: 0 !important;   /* kills 56.25% padding hack if you have it */
  height: auto !important;
  aspect-ratio: 16 / 9;        /* true 16:9 */
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  width: 100%;
}

/* Ensure the <video> fills the 16:9 box */
.aspect-ratio-wrapper.show-gtl-video > video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* use 'contain' if you prefer no cropping */
  display: block;
}

/* Right-side info under answer video */
.show-gtl-info-right{
    margin-top: 18px;
}

.show-gtl-category{
    font-size: 26px;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
}