@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ─── OBS Browser Source overlays ─────────────────────────────────── */
body.overlay-mode,
body.overlay-mode .page,
body.overlay-mode .content {
    background: transparent !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* An alert widget's box is absolutely positioned by the layout renderer (left/top/width/
   height come from the widget's canvas coordinates) — this just fills that box and
   fades/scales in, regardless of where on the canvas it happens to sit.
   Uses a CSS *animation* rather than a *transition* deliberately: a transition on a
   freshly-inserted element only animates if the browser has already painted the "from"
   state before the "to" state is applied, which isn't reliably guaranteed across a
   Blazor Server render round-trip. An animation's keyframes are self-contained and play
   on insertion regardless. */
.overlay-widget-alert {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 0 1.2rem;
    box-sizing: border-box;
    border-radius: 14px;
    background: rgba(18, 18, 28, 0.92);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    box-shadow: 0 8px 28px rgba(0,0,0,.45);
    border: 2px solid var(--overlay-accent, #9147ff);
    animation: overlayAlertIn .35s cubic-bezier(.34,1.56,.64,1) forwards;
}

.overlay-widget-alert.hiding {
    animation: overlayAlertOut .3s ease forwards;
}

@keyframes overlayAlertIn {
    from { opacity: 0; transform: scale(.85); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes overlayAlertOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(.85); }
}

.overlay-alert-icon { font-size: 1.6rem; line-height: 1; }
.overlay-alert-icon-img { height: 40px; max-width: 80px; object-fit: contain; }

/* Chat widget: scrolls its own overflow, newest message at the bottom, each line fades
   in with the same "animation, not transition" reasoning as the alert widget above. */
.overlay-widget-chat {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    padding: .5rem .75rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .3rem;
    overflow: hidden;
}

.overlay-chat-line {
    animation: overlayChatLineIn .25s ease forwards;
    word-break: break-word;
    line-height: 1.3;
}

@keyframes overlayChatLineIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.overlay-chat-platform {
    display: inline-block;
    font-size: .65em;
    font-weight: 700;
    padding: .05rem .35rem;
    border-radius: 4px;
    color: #fff;
    margin-right: .35rem;
    vertical-align: middle;
}

.overlay-chat-username {
    font-weight: 700;
    margin-right: .35rem;
}

/* Frame widget — just an image filling its box; opacity is set inline per-widget. */
.overlay-widget-frame {
    width: 100%;
    height: 100%;
}

/* Shared by "Now Playing" and "Latest Follow" — a small persistent info box with an
   accent-colored left edge, distinct from the alert widget's transient popup. */
.overlay-widget-infobox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .9rem;
    border-radius: 10px;
    border-left: 4px solid #9147ff;
    overflow: hidden;
}

.overlay-infobox-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.overlay-infobox-text { min-width: 0; }
.overlay-infobox-title {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.overlay-infobox-subtitle {
    font-size: .8em;
    opacity: .8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Text widget — static (wraps/centers normally) or a looping right-to-left marquee.
   The marquee trick: padding-left:100% starts the text just past the right edge of the
   box, then the keyframe slides it left by its own width — looping via infinite. */
.overlay-widget-text {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 .6rem;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.overlay-text-inner {
    width: 100%;
    text-align: center;
    white-space: normal;
    word-break: break-word;
}

.overlay-text-inner.scrolling {
    width: auto;
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation-name: overlayTextScroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes overlayTextScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* Follower/viewer count and uptime widgets — a row of pill-like stat boxes, one per
   connected platform (or a single box for uptime). */
.overlay-widget-stats {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .7rem;
    border-radius: 10px;
    overflow: hidden;
}

.overlay-stat-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.overlay-stat-icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #9147ff;
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
}

.overlay-stat-icon.icon-kick { background-color: #53fc18; }
.overlay-stat-icon.icon-twitch { background-color: #9147ff; }
.overlay-stat-icon.icon-youtube { background-color: #ff0000; }
.overlay-stat-icon.icon-tiktok { background-color: #000000; }

.overlay-stat-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.overlay-stat-empty {
    opacity: .7;
}

.overlay-uptime-dot {
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background: #e74c3c;
    flex-shrink: 0;
    animation: overlayUptimePulse 1.5s ease-in-out infinite;
}

@keyframes overlayUptimePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* ─── Overlay layout canvas editor ─────────────────────────────────── */
.overlay-preview-frame {
    background-image: linear-gradient(45deg, #444 25%, transparent 25%), linear-gradient(-45deg, #444 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #444 75%), linear-gradient(-45deg, transparent 75%, #444 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #2a2a36;
    border-radius: 8px;
    overflow: hidden;
}

.overlay-canvas-frame {
    position: relative;
    background-image: linear-gradient(45deg, #444 25%, transparent 25%), linear-gradient(-45deg, #444 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #444 75%), linear-gradient(-45deg, transparent 75%, #444 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #2a2a36;
    border-radius: 8px;
    overflow: hidden;
    user-select: none;
}

.overlay-canvas-widget {
    position: absolute;
    box-sizing: border-box;
    border: 2px dashed rgba(255,255,255,.55);
    background: rgba(145,71,255,.15);
    cursor: move;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-canvas-widget.selected {
    border: 2px solid #9147ff;
    background: rgba(145,71,255,.3);
}

.overlay-canvas-widget-label {
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    pointer-events: none;
}

.overlay-canvas-resize-handle {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: #9147ff;
    border: 2px solid #fff;
    border-radius: 3px;
    cursor: nwse-resize;
    opacity: 0;
    pointer-events: none;
}

.overlay-canvas-widget.selected .overlay-canvas-resize-handle {
    opacity: 1;
    pointer-events: auto;
}

/* Built-in frame color swatches — checkerboard shows through each preset's transparent
   center the same way the real overlay would. */
.overlay-frame-swatch {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 2px solid transparent;
    overflow: hidden;
    background-image: linear-gradient(45deg, #444 25%, transparent 25%), linear-gradient(-45deg, #444 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #444 75%), linear-gradient(-45deg, transparent 75%, #444 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
    background-color: #2a2a36;
    cursor: pointer;
    padding: 0;
}

.overlay-frame-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay-frame-swatch.selected {
    border-color: #9147ff;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ─── Platform icons ─────────────────────────────────────────────── */
.icon-twitch, .icon-youtube, .icon-kick, .icon-tiktok {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72%;
}
.icon-twitch  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z'/%3E%3C/svg%3E"); }
.icon-youtube { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z'/%3E%3C/svg%3E"); }
.icon-kick    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 3v18h3.5v-7l8 7H22L13 12l9-9h-4.5L9.5 10V3z'/%3E%3C/svg%3E"); }
.icon-tiktok  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E"); }

/* ─── Dark theme ──────────────────────────────────────────────────── */

[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] body {
    background-color: #12121c;
    color: #dde1e7;
}

/* Top bar */
[data-theme="dark"] .top-row {
    background-color: #1c1c2e !important;
    border-bottom-color: #2e2e48 !important;
}

/* Cards */
[data-theme="dark"] .card {
    background-color: #1c1c2e;
    border-color: #2e2e48;
    color: #dde1e7;
}

[data-theme="dark"] .card-header {
    background-color: #22223a;
    border-bottom-color: #2e2e48;
    color: #b8bdd6;
}

/* Tables */
[data-theme="dark"] .table {
    color: #dde1e7;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-top-color: #2e2e48;
    border-color: #2e2e48;
}

[data-theme="dark"] .table thead th {
    border-bottom-color: #2e2e48;
}

[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > td,
[data-theme="dark"] .table-light > th {
    background-color: #22223a !important;
    color: #b8bdd6;
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04);
    color: #fff;
}

/* List groups */
[data-theme="dark"] .list-group-item {
    background-color: #1c1c2e;
    border-color: #2e2e48;
    color: #dde1e7;
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea.form-control {
    background-color: #22223a;
    border-color: #3d3d5c;
    color: #dde1e7;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #26263e;
    border-color: #5a5aa8;
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(90, 90, 168, .25);
}

[data-theme="dark"] .form-control::placeholder {
    color: #5a5a78;
}

[data-theme="dark"] .form-label,
[data-theme="dark"] label {
    color: #b8bdd6;
}

[data-theme="dark"] .input-group-text {
    background-color: #22223a;
    border-color: #3d3d5c;
    color: #b8bdd6;
}

[data-theme="dark"] .form-check-input {
    background-color: #22223a;
    border-color: #3d3d5c;
}

[data-theme="dark"] .form-check-input:checked {
    background-color: #5a5aa8;
    border-color: #5a5aa8;
}

/* Buttons */
[data-theme="dark"] .btn-outline-secondary {
    color: #9ea7b8;
    border-color: #3d3d5c;
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:focus {
    background-color: #2e2e48;
    border-color: #5a5a78;
    color: #fff;
}

[data-theme="dark"] .btn-outline-secondary:active,
[data-theme="dark"] .btn-outline-secondary.active {
    background-color: #3a3a58;
    color: #fff;
}

[data-theme="dark"] .btn-outline-danger {
    color: #e07878;
    border-color: #804848;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background-color: #5a2a2a;
    border-color: #e07878;
    color: #fff;
}

[data-theme="dark"] .btn-outline-success {
    color: #6ec86e;
    border-color: #3e6a3e;
}

[data-theme="dark"] .btn-outline-success:hover {
    background-color: #1e4a1e;
    border-color: #6ec86e;
    color: #fff;
}

[data-theme="dark"] .btn-outline-warning {
    color: #d4a840;
    border-color: #6a5420;
}

[data-theme="dark"] .btn-outline-warning:hover {
    background-color: #4a3800;
    border-color: #d4a840;
    color: #fff;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Modal */
[data-theme="dark"] .modal-content {
    background-color: #1c1c2e;
    border-color: #3d3d5c;
    color: #dde1e7;
}

[data-theme="dark"] .modal-header {
    border-bottom-color: #2e2e48;
}

[data-theme="dark"] .modal-footer {
    border-top-color: #2e2e48;
}

/* Dropdown */
[data-theme="dark"] .dropdown-menu {
    background-color: #1c1c2e;
    border-color: #3d3d5c;
}

[data-theme="dark"] .dropdown-item {
    color: #dde1e7;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: #22223a;
    color: #fff;
}

[data-theme="dark"] .dropdown-divider {
    border-top-color: #2e2e48;
}

/* Alerts */
[data-theme="dark"] .alert-info {
    background-color: #162840;
    border-color: #1e3850;
    color: #90c8e8;
}

[data-theme="dark"] .alert-warning {
    background-color: #2a2010;
    border-color: #3e3018;
    color: #d4a840;
}

[data-theme="dark"] .alert-danger {
    background-color: #2a1218;
    border-color: #3e1e24;
    color: #e07878;
}

[data-theme="dark"] .alert-success {
    background-color: #0e2a12;
    border-color: #183e1c;
    color: #6ec86e;
}

/* Warning badge — force dark text; our .text-dark override would make it light on yellow */
[data-theme="dark"] .badge.bg-warning {
    color: #1a1201 !important;
}

/* Success badge — default green is too dark for white text at badge font-size */
[data-theme="dark"] .badge.bg-success {
    background-color: #1e9e52 !important;
    color: #f3fff6 !important;
}

/* TikTok badge — bg-dark is invisible on dark card (#1c1c2e) */
.badge.bg-tiktok {
    background-color: #2d2d3e !important;
    border: 1px solid #4a4a6a;
    color: #e0e0e0;
}

/* Settings sticky bar — light mode override (dark mode hardcoded in razor.css) */
[data-theme="light"] .settings-sticky-bar {
    background-color: #f7f7f7;
    border-bottom-color: #d6d5d5;
}

/* Card header nav links */
.card-header-link {
    opacity: .55;
    text-decoration: none;
    transition: opacity .15s ease;
}
.card-header-link:hover {
    opacity: 1;
}

/* Helpers */
[data-theme="dark"] .text-muted {
    color: #7a8298 !important;
}

[data-theme="dark"] .text-dark {
    color: #dde1e7 !important;
}

[data-theme="dark"] .text-body {
    color: #dde1e7 !important;
}

[data-theme="dark"] .bg-light {
    background-color: #22223a !important;
    color: #b8bdd6;
}

[data-theme="dark"] .bg-white {
    background-color: #1c1c2e !important;
}

[data-theme="dark"] hr {
    border-color: #2e2e48;
}

[data-theme="dark"] .border {
    border-color: #2e2e48 !important;
}

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand) {
    color: #82b4f5;
}

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):hover {
    color: #aaccff;
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #12121c;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3d3d5c;
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #5a5a7a;
}