/* ==========================================================================
   CheckMyCTC – Website Image Optimizer
   All rules are scoped to .wio so the global site styles are never changed.
   ========================================================================== */
.wio {
    --wio-green: #16a34a;
    --wio-green-2: #15803d;
    --wio-green-soft: #ecfdf3;
    --wio-green-line: #bbf7d0;
    --wio-bg: #f6f8f7;
    --wio-card: #ffffff;
    --wio-border: #e3e8e5;
    --wio-text: #10231a;
    --wio-muted: #5f6f67;
    --wio-shadow: 0 1px 2px rgba(16, 35, 26, .06), 0 4px 14px rgba(16, 35, 26, .05);
    --wio-radius: 12px;
    --wio-danger: #dc2626;
    --wio-warn: #b45309;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--wio-text);
    background: var(--wio-bg);
    font-size: 14px;
    min-height: 60vh;
    padding-bottom: 3rem;
}

/* Dark mode: follows the same switches the rest of CheckMyCTC uses */
html[data-bs-theme="dark"] .wio, html.dark-mode .wio, body.dark-mode .wio,
html.dark .wio, body.dark .wio, [data-theme="dark"] .wio {
    --wio-green-soft: #0f2a1b;
    --wio-green-line: #1f5133;
    --wio-bg: #0e1311;
    --wio-card: #161d1a;
    --wio-border: #26302b;
    --wio-text: #e6efe9;
    --wio-muted: #9db0a6;
    --wio-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --bs-body-color: #e6efe9;
    --bs-body-bg: #161d1a;
    --bs-border-color: #26302b;
    --bs-secondary-color: #9db0a6;
    --bs-tertiary-bg: #1b2420;
    color-scheme: dark;
}

.wio a { color: var(--wio-green-2); }
.wio .text-body-secondary { color: var(--wio-muted) !important; }
.wio .wio-link { color: var(--wio-green-2); font-weight: 500; }
.wio code { color: var(--wio-green-2); background: var(--wio-green-soft); padding: .1rem .35rem; border-radius: 5px; word-break: break-all; }

/* Typography */
.wio .wio-h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.wio .wio-h2 { font-size: 1.3rem; font-weight: 600; }
.wio .wio-lead { font-size: 1.05rem; color: var(--wio-muted); max-width: 640px; margin-top: .8rem; }
.wio .wio-mini-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--wio-muted); }

/* Cards */
.wio .wio-card { background: var(--wio-card); border: 1px solid var(--wio-border); border-radius: var(--wio-radius); box-shadow: var(--wio-shadow); }
.wio a.wio-card { color: inherit; text-decoration: none; transition: border-color .15s; }
.wio a.wio-card:hover { border-color: var(--wio-green); }
.wio .wio-empty i { color: var(--wio-green); }

/* Buttons */
.wio .btn-wio { background: var(--wio-green); border: 1px solid var(--wio-green); color: #fff; font-weight: 500; }
.wio .btn-wio:hover, .wio .btn-wio:focus { background: var(--wio-green-2); border-color: var(--wio-green-2); color: #fff; }
.wio .btn-wio:disabled { opacity: .55; }
.wio .btn-wio-outline { border: 1px solid var(--wio-green); color: var(--wio-green-2); background: transparent; font-weight: 500; }
.wio .btn-wio-outline:hover { background: var(--wio-green-soft); color: var(--wio-green-2); }
.wio .btn-soft { background: var(--wio-card); border: 1px solid var(--wio-border); color: var(--wio-text); }
.wio .btn-soft:hover { border-color: var(--wio-green); color: var(--wio-green-2); }
.wio .form-control:focus, .wio .form-select:focus, .wio .form-check-input:focus { border-color: var(--wio-green); box-shadow: 0 0 0 .2rem rgba(22, 163, 74, .18); }
.wio .form-check-input:checked { background-color: var(--wio-green); border-color: var(--wio-green); }
.wio .form-range::-webkit-slider-thumb { background: var(--wio-green); }
.wio .form-range::-moz-range-thumb { background: var(--wio-green); }

/* Hero */
.wio .wio-hero { background: linear-gradient(180deg, var(--wio-green-soft), transparent); border-bottom: 1px solid var(--wio-border); }
.wio .wio-pill { display: inline-block; background: var(--wio-card); border: 1px solid var(--wio-green-line); color: var(--wio-green-2); border-radius: 999px; padding: .3rem .8rem; font-size: 12px; font-weight: 600; }
.wio .wio-checks { list-style: none; padding: 0; margin: 0; }
.wio .wio-checks li { margin-bottom: .35rem; }
.wio .wio-checks i { color: var(--wio-green); margin-right: .45rem; }
.wio .wio-demo-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--wio-border); font-size: 13px; }
.wio .wio-demo-row span:first-child { color: var(--wio-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wio .wio-demo-row b { color: var(--wio-green-2); }
.wio .wio-step-num { float: right; font-weight: 700; color: var(--wio-green-line); font-size: 1.6rem; line-height: 1; }
.wio .wio-accordion .accordion-item { background: var(--wio-card); border-color: var(--wio-border); }
.wio .wio-accordion .accordion-button { background: var(--wio-card); color: var(--wio-text); font-weight: 500; }
.wio .wio-accordion .accordion-button:not(.collapsed) { background: var(--wio-green-soft); color: var(--wio-green-2); box-shadow: none; }
.wio .wio-site-card .badge { font-weight: 500; }
.wio .wio-site-card > a:hover { color: inherit; }
.wio .wio-site-card:hover { border-color: var(--wio-green); }
.wio .wio-site-foot { border-top: 1px solid var(--wio-border); }
.wio .wio-privacy { background: var(--wio-green-soft); border: 1px solid var(--wio-green-line); border-radius: var(--wio-radius); }
.wio .wio-privacy > i { color: var(--wio-green-2); }

/* Website bar + tabs */
.wio .wio-sitebar { background: var(--wio-card); border-bottom: 1px solid var(--wio-border); margin-bottom: 1.5rem; }
.wio .wio-back { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--wio-border); color: var(--wio-text); }
.wio .wio-site-switch { font-weight: 600; font-size: 1rem; padding: .25rem .5rem; color: var(--wio-text); border: 0; }
.wio .wio-tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: thin; }
.wio .wio-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem .9rem; color: var(--wio-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.wio .wio-tab:hover { color: var(--wio-text); }
.wio .wio-tab.active { color: var(--wio-green-2); border-bottom-color: var(--wio-green); }

/* Stats */
.wio .wio-stat { padding: 1rem 1.1rem; height: 100%; }
.wio .wio-stat .v { font-size: 1.35rem; font-weight: 700; line-height: 1.25; margin-top: .2rem; }
.wio .wio-stat .s { font-size: 12px; color: var(--wio-muted); }
.wio .wio-stat.hl { background: var(--wio-green-soft); border-color: var(--wio-green-line); }
.wio .wio-stat.hl .v { color: var(--wio-green-2); }

/* Progress */
.wio .wio-progress { height: 12px; border-radius: 999px; background: var(--wio-border); overflow: hidden; }
.wio .wio-progress > div { height: 100%; background: var(--wio-green); transition: width .4s ease; }
.wio .wio-progress.lg { height: 18px; }

/* Toolbar */
.wio .wio-toolbar { background: var(--wio-bg); padding: .75rem 0; }
@media (min-width: 992px) { .wio .wio-toolbar { position: sticky; top: 0; z-index: 5; } }
.wio .btn-check:checked + .btn-soft { border-color: var(--wio-green); background: var(--wio-green-soft); box-shadow: 0 0 0 1px var(--wio-green) inset; }
.wio .btn-check:focus-visible + .btn-soft { box-shadow: 0 0 0 .2rem rgba(22, 163, 74, .25); }
.wio .wio-selection { background: var(--wio-green-soft); border: 1px solid var(--wio-green-line); border-radius: 10px; padding: .55rem .8rem; }

/* Gallery */
.wio .wio-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.wio .wio-img { position: relative; background: var(--wio-card); border: 1px solid var(--wio-border); border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.wio .wio-img:hover { border-color: #9ad5b0; }
.wio .wio-img.selected { border-color: var(--wio-green); box-shadow: 0 0 0 2px var(--wio-green); }
.wio .wio-thumb { aspect-ratio: 4 / 3; background: repeating-conic-gradient(var(--wio-border) 0 25%, transparent 0 50%) 50% / 16px 16px; display: flex; align-items: center; justify-content: center; }
.wio .wio-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wio .wio-img .form-check-input { position: absolute; top: 8px; left: 8px; width: 1.25rem; height: 1.25rem; margin: 0; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.wio .wio-img .wio-status { position: absolute; top: 8px; right: 8px; }
.wio .wio-img .meta { padding: .55rem .65rem .65rem; font-size: 12px; }
.wio .wio-img .name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wio .wio-img .folder { color: var(--wio-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wio .wio-img .sizes { display: flex; justify-content: space-between; margin-top: .3rem; }
.wio .wio-img .saved { color: var(--wio-green-2); font-weight: 600; }
.wio .wio-img .err { color: var(--wio-danger); margin-top: .25rem; line-height: 1.3; }
.wio .badge.st-pending, .wio .badge.st-restored { background: #e5e7eb; color: #374151; }
.wio .badge.st-optimized { background: var(--wio-green); color: #fff; }
.wio .badge.st-skipped { background: #dbeafe; color: #1e40af; }
.wio .badge.st-failed { background: #fee2e2; color: #991b1b; }
.wio .wio-skeleton { aspect-ratio: 4/3.9; border-radius: 10px; background: linear-gradient(90deg, var(--wio-border) 0, var(--wio-card) 50%, var(--wio-border) 100%); background-size: 200% 100%; animation: wio-shimmer 1.4s linear infinite; }
@keyframes wio-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .wio .wio-skeleton { animation: none; } .wio .wio-progress > div { transition: none; } }

/* Folder tree */
.wio .wio-tree { list-style: none; padding-left: 0; margin: 0; }
.wio .wio-tree .wio-tree { padding-left: 1.4rem; }
.wio .wio-tree li { padding: .15rem 0; }
.wio .wio-tree .toggle { width: 22px; border: 0; background: none; color: var(--wio-muted); padding: 0; }

/* Steps (connect) */
.wio .wio-steps { display: flex; gap: .5rem; flex-wrap: wrap; }
.wio .wio-steps .st { display: flex; align-items: center; gap: .45rem; color: var(--wio-muted); font-weight: 500; font-size: 13px; }
.wio .wio-steps .st .n { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--wio-border); display: inline-flex; align-items: center; justify-content: center; background: var(--wio-card); }
.wio .wio-steps .st.on { color: var(--wio-green-2); }
.wio .wio-steps .st.on .n { background: var(--wio-green); border-color: var(--wio-green); color: #fff; }
.wio .wio-steps .sep { flex: 0 0 24px; border-top: 1px solid var(--wio-border); align-self: center; }
.wio .wio-token { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--wio-green-soft); border: 1px dashed var(--wio-green); border-radius: 8px; padding: .6rem .8rem; word-break: break-all; }

/* Log list */
.wio .wio-log { list-style: none; padding: 0; margin: 0; max-height: 420px; overflow: auto; }
.wio .wio-log li { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem .2rem; border-bottom: 1px solid var(--wio-border); font-size: 13px; }
.wio .wio-log li .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wio .table { --bs-table-bg: transparent; color: var(--wio-text); }
.wio .wio-warning { background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; border-radius: 10px; }
html[data-bs-theme="dark"] .wio .wio-warning, .dark-mode .wio .wio-warning, .dark .wio .wio-warning, [data-theme="dark"] .wio .wio-warning { background: #2a1a0c; border-color: #6b3a12; color: #fed7aa; }

/* Toasts */
.wio-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 1080; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); font-family: 'Poppins', system-ui, sans-serif; }
.wio-toast { background: #10231a; color: #fff; border-radius: 10px; padding: .7rem .9rem; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.2); display: flex; gap: .6rem; align-items: flex-start; }
.wio-toast.ok i { color: #4ade80; }
.wio-toast.err { background: #7f1d1d; }
.wio-toast.warn { background: #78350f; }

@media (max-width: 575.98px) {
    .wio .wio-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .wio .wio-stat .v { font-size: 1.1rem; }
    .wio .wio-tab span { display: none; }
    .wio .wio-tab i { font-size: 1.1rem; }
}