/* /mygames admin page styles
   Only rules that can't be easily expressed in Tailwind utility classes live here. */

/* Subtle top/bottom separator between game entries — no box, just a hairline */
.mg-entry + .mg-entry { border-top: 1px solid rgb(229 231 235 /* gray-200 */); }
.dark .mg-entry + .mg-entry { border-top-color: rgb(31 41 55 /* gray-800 */); }

/* Code block for voting script / embed snippets */
.mg-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
    line-height: 1.45;
    background: rgb(249 250 251 /* gray-50 */);
    color: rgb(17 24 39 /* gray-900 */);
    border: 1px solid rgb(229 231 235 /* gray-200 */);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    white-space: pre-wrap;
    word-break: break-all;
    position: relative;
}
.dark .mg-code {
    background: rgb(17 24 39 /* gray-900 */);
    color: rgb(243 244 246 /* gray-100 */);
    border-color: rgb(55 65 81 /* gray-700 */);
}
.mg-code .tag { color: rgb(37 99 235 /* blue-600 */); }
.mg-code .attr { color: rgb(107 114 128 /* gray-500 */); }
.mg-code .str { color: rgb(22 101 52 /* green-800 */); }

.mg-copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    min-height: 32px;
    min-width: 72px;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(55 65 81);
    background: rgb(255 255 255);
    border: 1px solid rgb(229 231 235);
    border-radius: 0.375rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.mg-copy-btn:hover { background: rgb(243 244 246); }
.mg-copy-btn.is-copied { color: rgb(22 101 52); border-color: rgb(134 239 172); background: rgb(240 253 244); }
.dark .mg-copy-btn { color: rgb(209 213 219); background: rgb(31 41 55); border-color: rgb(55 65 81); }
.dark .mg-copy-btn:hover { background: rgb(55 65 81); }

/* Small inline copy icon next to URLs */
.mg-copy-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 0 2px;
    color: rgb(156 163 175 /* gray-400 */);
    cursor: pointer;
    border-radius: 0.25rem;
}
.mg-copy-icon:hover { color: rgb(37 99 235 /* blue-600 */); background: rgb(243 244 246 /* gray-100 */); }
.mg-copy-icon.is-copied { color: rgb(22 163 74 /* green-600 */); }
.dark .mg-copy-icon:hover { background: rgb(31 41 55); }

/* Premium features — dim+blur overlay when not premium */
.mg-premium-wrap { position: relative; }
.mg-premium-locked .mg-premium-content {
    opacity: 0.35;
    filter: blur(2px);
    pointer-events: none;
    user-select: none;
}
.mg-premium-overlay {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.75));
}
.dark .mg-premium-overlay {
    background: linear-gradient(180deg, rgba(17,24,39,0.35), rgba(17,24,39,0.75));
}
.mg-premium-locked .mg-premium-overlay { display: flex; }
.mg-premium-overlay .mg-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-weight: 600;
    color: #ffffff;
    background: rgb(37 99 235 /* blue-600 */);
    border-radius: 0.5rem;
    text-decoration: none;
}
.mg-premium-overlay .mg-cta:hover { background: rgb(29 78 216 /* blue-700 */); }
.mg-premium-overlay .mg-cta-sub {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: rgb(75 85 99 /* gray-600 */);
    max-width: 24rem;
}

/* Rating card preview — checkered bg so transparent colors are visible */
.mg-preview {
    min-height: 200px;
    background-color: #f9fafb;
    background-image:
        linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
        linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
}
.dark .mg-preview { background-color: #111827; border-color: rgb(55 65 81); }

/* Group label (small caps above each action group) */
.mg-group-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(107 114 128 /* gray-500 */);
    margin-bottom: 0.375rem;
}

/* Disabled (locked) action item */
.mg-action-locked {
    color: rgb(156 163 175 /* gray-400 */);
    cursor: not-allowed;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Color row inside the rating-card editor */
.mg-color-row { display: grid; grid-template-columns: 6.5rem 2.5rem 1fr auto; gap: 0.5rem; align-items: center; }
.mg-color-row label { font-size: 0.8125rem; color: rgb(55 65 81); }
.dark .mg-color-row label { color: rgb(209 213 219); }
.mg-color-row input[type="color"] { height: 2rem; width: 2.5rem; padding: 0; border: 1px solid rgb(229 231 235); border-radius: 0.25rem; cursor: pointer; }
.mg-color-row input[type="text"] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; padding: 0.25rem 0.5rem; border: 1px solid rgb(229 231 235); border-radius: 0.25rem; background: #fff; }
.dark .mg-color-row input[type="text"] { background: rgb(31 41 55); border-color: rgb(55 65 81); color: #fff; }
.mg-color-row button { font-size: 0.75rem; color: rgb(107 114 128); padding: 0.125rem 0.375rem; }
.mg-color-row button:hover { color: rgb(37 99 235); }

/* Collapsible panels (rating card editor, article picker) */
.mg-panel { display: none; }
.mg-panel.is-open { display: block; }
.mg-toggle { cursor: pointer; user-select: none; }
.mg-toggle .mg-chevron { display: inline-block; transition: transform 150ms ease-out; }
.mg-toggle.is-open .mg-chevron { transform: rotate(180deg); }

/* Status chip */
.mg-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500; border-radius: 9999px; }
.mg-chip-gray { background: rgb(243 244 246); color: rgb(75 85 99); }
.mg-chip-red { background: rgb(254 226 226); color: rgb(153 27 27); }
.mg-chip-blue { background: rgb(219 234 254); color: rgb(30 64 175); }
.dark .mg-chip-gray { background: rgb(31 41 55); color: rgb(209 213 219); }
.dark .mg-chip-red { background: rgb(127 29 29 / 0.4); color: rgb(254 202 202); }
.dark .mg-chip-blue { background: rgb(30 58 138 / 0.4); color: rgb(191 219 254); }