@import url("https://fonts.googleapis.com/css?family=Inter:wght@100;200;300;400;500;600;700;800;900");

:root {
    /* Backgrounds */
    --vidplex--bg-main: #ffffff;
    --vidplex--bg-secondary: #f9fafb;
    --vidplex--bg-hover: #f3f4f6;

    /* Text */
    --vidplex--text-primary: #111827;
    --vidplex--text-secondary: #4b5563;
    --vidplex--text-muted: #9ca3af;

    /* Borders & dividers */
    --vidplex--border-default: #e5e7eb;
    --vidplex--border-subtle: #f3f4f6;

    /* Primary action */
    --vidplex--primary: #06af66;
    --vidplex--primary-hover: #059a59;
    --vidplex--primary-active: #047a44;
    --vidplex--primary-focus: rgba(6, 175, 102, 0.35);

    /* Secondary action */
    --vidplex--secondary: #6b7280;
    --vidplex--secondary-hover: #4b5563;

    /* Success */
    --vidplex--success-text: #16a34a;
    --vidplex--success-bg: #dcfce7;
    --vidplex--success-border: #86efac;

    /* Warning */
    --vidplex--warning-text: #d97706;
    --vidplex--warning-bg: #fef3c7;
    --vidplex--warning-border: #fcd34d;

    /* Error */
    --vidplex--error-text: #dc2626;
    --vidplex--error-bg: #fee2e2;
    --vidplex--error-border: #fca5a5;
    --vidplex--error-shadow: rgba(220, 38, 38, 0.25);

    /* Info variant (green-toned instead of blue) */
    --vidplex--info-text: #047a44; /* darker green for readability */
    --vidplex--info-bg: #d1f5e1; /* very light green background */
    --vidplex--info-border: #86d8a1; /* soft green border */

    /* Disabled variant based on primary */
    --vidplex--primary-disabled-bg: #c7f0de; /* lightened green for background */
    --vidplex--primary-disabled-text: #8fd4a4; /* muted green for text */
    --vidplex--primary-disabled-border: #8fd4a4; /* muted border */

    /* Input fields */
    --vidplex--input-bg: #ffffff; /* stays white */
    --vidplex--input-border: #d1d5db; /* neutral gray border */
    --vidplex--input-border-hover: #06af66; /* primary green on hover */
    --vidplex--input-border-focus: #047a44; /* darker primary for focus */

    /* Disabled input */
    --vidplex--input-disabled-bg: #f9fafb; /* light gray */
    --vidplex--input-disabled-text: #93c5fd; /* muted gray-greenish tone */

    --vidplex--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.vidplex__dashboard {
    background-color: var(--vidplex--bg-main);
    font-family: "Inter";
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;

    & ul {
        list-style: none;
    }
    & ul,
    & li,
    & figure,
    & h3,
    & h4,
    & p {
        margin: 0;
        padding: 0;
    }

    & input,
    & textarea,
    & select {
        width: 100%;
        padding: 12px 16px;
        font-size: 14px;
        line-height: 1.4;

        color: var(--vidplex--text-primary);
        background-color: var(--vidplex--input-bg);

        border: 1px solid var(--vidplex--input-border);
        border-radius: 6px;

        outline: none;
        transition:
            border-color 0.15s ease,
            box-shadow 0.15s ease,
            background-color 0.15s ease;
    }
    & input:hover,
    & textarea:hover,
    & select:hover {
        border-color: var(--vidplex--input-border-hover);
    }
    & input:focus,
    & textarea:focus,
    & select:focus {
        border-color: var(--vidplex--input-border-focus);
        box-shadow: 0 0 0 3px var(--vidplex--primary-focus);
    }
    & input:disabled,
    & textarea:disabled,
    & select:disabled {
        background-color: var(--vidplex--input-disabled-bg);
        color: var(--vidplex--input-disabled-text);
        cursor: not-allowed;
    }
    & ::placeholder {
        color: var(--vidplex--text-muted);
        opacity: 1;
    }
    & select {
        appearance: none;
        background-image: linear-gradient(
                45deg,
                transparent 50%,
                var(--vidplex--text-muted) 50%
            ),
            linear-gradient(
                135deg,
                var(--vidplex--text-muted) 50%,
                transparent 50%
            );
        background-position:
            calc(100% - 16px) center,
            calc(100% - 11px) center;
        background-size: 5px 5px;
        background-repeat: no-repeat;
        padding-right: 32px;
    }

    & .display__none {
        display: none !important;
    }
    & .vidplex__pro-crown {
        color: #ffa500;
    }
    & .toasts {
        position: sticky;
        top: 36px;
        z-index: 2;
    }
    & .error {
        border-radius: 4px;
        color: var(--vidplex--error-text);
        background-color: var(--vidplex--error-bg);
        transition: all 0.3s ease;

        &:not(.visibility__hidden) {
            padding: 10px 16px;
            margin-bottom: 26px;

            &:before {
                content: "❌";
                margin-right: 4px;
            }
        }
    }
    & .success {
        border-radius: 4px;
        color: var(--vidplex--success-text);
        background-color: var(--vidplex--success-bg);
        transition: all 0.3s ease;

        &:not(.visibility__hidden) {
            padding: 10px 16px;
            margin-bottom: 26px;

            &:before {
                content: "✅";
                margin-right: 4px;
            }
        }
    }
    & .info {
        border-radius: 4px;
        color: var(--vidplex--info-text);
        background-color: var(--vidplex--info-bg);
        transition: all 0.3s ease;

        &:not(.visibility__hidden) {
            padding: 10px 16px;
            margin-bottom: 26px;

            &:before {
                content: "ℹ️";
                margin-right: 4px;
            }
        }
    }
    & .visibility__hidden {
        visibility: hidden;
        opacity: 0;
        height: 0;
    }
    & .help__text {
        color: var(--vidplex--info-text);
        padding: 6px 0;
        display: block;
    }

    & .plan__details {
        padding: 20px;
        border: 1px solid var(--vidplex--border-default);
        color: var(--vidplex--text-muted);

        & .account__management {
            margin-top: 16px;
            display: inline-block;
            color: var(--vidplex--primary);
            :hover {
                color: var(--vidplex--primary-hover);
            }
        }
    }
    & .plan__details .plan__type {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;

        & .plan__pill {
            background-color: var(--vidplex--bg-secondary);
            color: var(--vidplex--text-muted);
            padding: 4px 10px;
            border-radius: 100px;
            &.pro {
                background-color: #ffa500;
                color: var(--vidplex--bg-main);
            }
        }
    }
    & .plan__details .plan__description {
        margin-top: 12px;

        & .upsell__features {
            margin-top: 16px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
        }

        & svg {
            width: 16px;
            height: 16px;
            color: var(--vidplex--primary);
            vertical-align: middle;
        }
    }

    & .license__management {
        padding: 20px;
        margin: 22px 0;
        border: 1px solid var(--vidplex--border-default);

        & a {
            color: var(--vidplex--primary);
            :hover {
                color: var(--vidplex--primary-hover);
            }
        }
    }

    & .upsell__notice {
        padding: 20px;
        border: 1px solid #06af6682;
        background-color: var(--vidplex--primary-disabled-bg);
        color: var(--vidplex--text-secondary);
        display: flex;
        gap: 16px;
        border-radius: 4px;

        & .pro__crown {
            display: flex;
            padding: 5px;
            background-color: var(--vidplex--primary);
            color: var(--vidplex--bg-main);
            width: 36px;
            height: 36px;
            border-radius: 100px;
            justify-content: center;
            align-items: center;

            & svg {
                width: 22px;
                height: 22px;
            }
        }

        & p {
            margin: 6px 0 12px;
        }

        & .upsell__btn {
            padding: 8px 18px;
            border-radius: 5px;
            background-color: var(--vidplex--primary);
            color: var(--vidplex--bg-main);
            display: inline-block;
            text-decoration: none;

            &:hover {
                background-color: var(--vidplex--primary-hover);
            }
        }
    }
}

/* Tabs */
.vidplex__dashboard .tabs__holder {
    display: flex;
    border-bottom: 1px solid var(--vidplex--border-default);

    & .tab__item {
        padding: 14px 38px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        color: var(--vidplex--text-muted);

        transition: color 0.3s ease;

        &:not(.is-active) {
            cursor: pointer;
        }

        &.is-active {
            color: var(--vidplex--text-primary);
            border-bottom: 1px solid var(--vidplex--primary);
            margin-bottom: -1px;
        }
        &.is-active svg {
            color: var(--vidplex--text-primary);
        }
    }
    & svg {
        width: 18px;
        height: 18px;
        color: var(--vidplex--text-muted);
    }
}
.vidplex__dashboard .tabs__content {
    padding: 40px 26px;
    max-width: 1024px;
    margin: 0 auto;
    min-height: 560px;
}
.vidplex__dashboard .tab__content:not(.is-active) {
    display: none;
}

/* Pages */
.vidplex__page {
    position: relative;
}
.vidplex__page.card__layout {
    padding: 36px 28px;
    border: 1px solid var(--vidplex--border-subtle);
    box-shadow: var(--vidplex--shadow-sm);
    border-radius: 20px;
}

.vidplex__page .icon__primary-boxed {
    width: 44px;
    height: 44px;
    background-color: var(--vidplex--bg-secondary);
    color: var(--vidplex--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;

    & svg {
        width: 22px;
        height: 22px;
    }
}
/* Overview */
.vidplex__page.overview__page {
    & a {
        color: var(--vidplex--primary)
    }
    & h3 {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
    }
    & .stat__item {
        border: 1px solid var(--vidplex--border-default);
        padding: 12px;
        font-size: 13px;
    }
    & .muted-text {
        color: var(--vidplex--text-muted);
    }
    & .stats__cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;

        & .stat__icon {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 100px;
            background-color: var(--vidplex--bg-secondary);
            color: var(--vidplex--primary);
            margin-right: 6px;

            & svg {
                width: 18px;
                height: 18px;
            }
        }
    }
    & .numbers {
        display: inline-block;
        vertical-align: middle;
    }

    & .intro,
    & .getting-started {
        margin: 26px 0;
        padding: 26px 0;
        border-top: 1px solid var(--vidplex--border-default);
        border-bottom: 1px solid var(--vidplex--border-default);
    }

    & .features li:not(:first-child) {
        margin-top: 16px;
    }

    & .getting-started li:not(:first-child) {
        margin-top: 10px;
    }
    & .getting-started h4 {
        margin-bottom: 10px;
    }
    & .getting-started h5 {
        font-size: 13px;
        margin: 0 0 6px 0;
    }
}
/* API key */
.vidplex__page.api__page .header,
.vidplex__page.channels__page .header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.vidplex__page.api__page .body,
.vidplex__page.channels__page .body {
    margin-top: 26px;
    position: relative;
}
.vidplex__page.api__page .api-key__input {
    padding-right: 40px;
}
.vidplex__page.api__page .view__field {
    position: absolute;
    right: 0;
    top: 0;
    & svg {
        padding: 8px;
        margin-top: 4px;
    }
}
.vidplex__page.api__page .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 16px;

    & svg {
        width: 16px;
        height: 16px;
        transition: all 0.3s ease;
    }

    & a {
        display: flex;
        gap: 5px;
        align-items: center;
        text-decoration: none;
        color: var(--vidplex--primary);

        &:hover {
            color: var(--vidplex--primary-hover);

            & svg {
                transform: scale(1.2);
            }
        }
    }

    & .button__wrapper {
        display: flex;
        align-items: center;
        gap: 6px;
    }
}
.vidplex__page.api__page #vidplex-save-api-key,
.vidplex__page.channels__page #vidplex-add-channel {
    padding: 14px 32px;
    border: none;
    background-color: var(--vidplex--primary);
    color: var(--vidplex--bg-main);
    border-radius: 5px;

    &:hover {
        background-color: var(--vidplex--primary-hover);
    }

    &.disabled {
        background-color: var(--vidplex--primary-disabled-bg);
        color: var(--vidplex--primary-disabled-text);
    }
}
.vidplex__page.api__page #vidplex-save-api-key:not(.disabled),
.vidplex__page.channels__page #vidplex-add-channel:not(.disabled) {
    cursor: pointer;
}
.vidplex__page.api__page .actions .spinner__icon {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.vidplex__page.api__page .actions .spinner__icon {
    color: var(--vidplex--primary-active);
    animation: spinner 1s linear infinite;
}
@keyframes spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* Channels */
.vidplex__page.channels__page .input__holder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.vidplex__page.channels__page .input__holder .channel__input {
    flex: 6;

    &.has-error {
        border-color: var(--vidplex--error-border);

        &:focus {
            border-color: var(--vidplex--error-border);
            box-shadow: var(--vidplex--error-shadow);
        }
    }
}
.vidplex__page.channels__page .input__holder #vidplex-add-channel {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding: 12px 28px;
}
.vidplex__page.channels__page .channel__list {
    margin-top: 44px;
}
.vidplex__page.channels__page .channel__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--vidplex--border-subtle);
    padding: 20px 16px;
    border-radius: 12px;

    &:not(:first-child) {
        margin-top: 20px;
    }

    &:hover {
        border-color: var(--vidplex--input-border-focus);
    }

    & .actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    & .action {
        padding: 6px;
        border-radius: 10px;
        cursor: pointer;
        line-height: 1;

        &:hover {
            background-color: var(--vidplex--input-disabled-bg);
            color: var(--vidplex--primary-active);
        }
    }
    & .sync__status {
        text-align: right;
        margin-right: 16px;
    }
    & .loading {
        display: flex;
        animation: spin 1s linear infinite;
    }
    & svg {
        width: 18px;
        height: 18px;
    }
}
.vidplex__page.channels__page .channel__data {
    display: flex;
    align-items: center;
    gap: 10px;

    & .channel__thumbnail {
        width: 48px;
        height: 48px;
        border-radius: 100px;
    }
    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 100px;
    }
}
/* Setting Page */
.vidplex__page.settings__page {
    & input {
        max-width: 150px;
    }
    & select {
        max-width: 250px;
    }

    & .spin {
        animation: spin 1s linear infinite;
    }
    & .disabled {
        cursor: not-allowed !important;
        pointer-events: none;
    }

    & .disclaimer-notice {
        display: flex;
        gap: 6px;
        border-left: 3px solid var(--vidplex--primary);
        background-color: var(--vidplex--bg-secondary);
        padding: 12px;
        color: var(--vidplex--text-secondary);
        align-items: center;
        font-size: 14px;

        & .icon__wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        & svg {
            width: 26px;
            height: 26px;
        }
    }

    & .vidplex__btn-primary {
        padding: 10px 26px;
        border: none;
        outline: none;
        box-shadow: unset;
        border-radius: 5px;
        background-color: var(--vidplex--primary);
        color: var(--vidplex--bg-main);
        cursor: pointer;

        &:hover {
            background-color: var(--vidplex--primary-hover);
        }
    }
    & .btn__icon {
        display: inline-flex;
        vertical-align: sub;
        & svg {
            width: 16px;
            height: 16px;
        }
    }

    & .settings__group {
        border: 1px solid var(--vidplex--border-default);

        &:first-of-type {
            margin-top: 26px;
        }
        &:not(:first-child) {
            margin-bottom: 16px;
        }
    }
    & .group__header {
        padding: 8px 16px;
        font-weight: 600;
        background-color: var(--vidplex--bg-hover);
        border-bottom: 1px solid var(--vidplex--border-default);
    }
    & .group__header .group__icon {
        vertical-align: middle;
        margin-right: 5px;
    }
    & .group__header .group__icon svg {
        width: 16px;
        height: 16px;
    }
    & .group__body {
        padding: 20px 16px;
    }
    & .group__body .setting {
        display: flex;
        gap: 26px;

        &:not(:first-child) {
            border-top: 1px solid var(--vidplex--border-default);
            margin-top: 20px;
            padding-top: 20px;
        }

        & > div {
            flex: 1;
        }
        & > div + div {
            flex: 3;
        }

        & .setting__title {
            font-weight: 600;
        }

        & .help__text {
            color: var(--vidplex--text-muted);
        }
    }

    & .toggle__btn {
        width: 44px;
        height: 24px;
        border-radius: 100px;
        border: none;
        position: relative;

        &[data-checked="true"] {
            background-color: var(--vidplex--primary-active);

            & .circle {
                transform: translate(23px, 4px);
            }
        }
    }
    & .toggle__btn .circle {
        position: absolute;
        width: 16px;
        height: 16px;
        top: 0;
        left: 0;
        background: #fff;
        border-radius: 100px;
        transform: translate(4px, 4px);
        transition: transform 0.3s ease;
    }

    & .btn__wrapper {
        margin-top: 26px;
        padding: 26px 0;
        position: sticky;
        bottom: 0;
        background-color: var(--vidplex--bg-main);
    }
    & .disabled {
        opacity: 0.6;
    }
}
/* License page */
.vidplex__page.license__page {
    & .fs-permissions,
    & .fs-freemium-licensing {
        display: none;
    }
    & .fs-license-key-container {
        width: 100% !important;

        & i {
            top: 12px !important;
        }
    }

    & h3 {
        font-size: 14px;
        font-weight: 600;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}