/* [FIX] wc-overlay-card-screenshot: static height corrected from 197px to
 * 152px to match the 3:1 width:height ratio (card content width 456px =
 * 480px card - 24px padding -> 456/3 = 152px). Previously mismatched the
 * runtime value set in widgetCenterOverlay.js:_buildScreenshot(), causing
 * a flash of wrong ratio before JS override. Applies to both screenshot
 * and non-screenshot (fallback icon) cards, since both use the same bin. */

.widget-edit-toolbar,
.widget-edit-mode-icon-row,
.widget-edit-mode-toolbar-bar {
    background-color: rgba(0, 0, 0, 1.0);
    border-radius: 16px 16px 0 0;
    padding: 3px;
}

/* [FIX] wc-edit-toolbar-overflow: icon row was overflowing small
 * widgets (e.g. 176px xtile tiles) because 4-5 buttons at the old
 * sizing (28px min + 6px padding each side = ~40px per button, 8px
 * spacing between) could add up to ~190px+, wider than the widget
 * itself. Tightened padding/spacing/min-size here so a full 5-button
 * row (Add, Settings, Reset, Remove, Uninstall) fits inside the
 * smallest widgets without spilling past the rounded card edge. */
.widget-edit-mode-icon-row {
    spacing: 4px;
}

.widget-edit-mode-drag-handle {
    background-color: rgba(0, 0, 0, 1.0);
    border-radius: 0 0 16px 16px;
}

.widget-edit-mode-grip {
    color: #ffffff;
    icon-size: 56px;
    font-size: 56px;
}

.widget-edit-mode-action {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 1.0);
    padding: 3px;
    border-radius: 5px;
    min-width: 22px;
    min-height: 22px;
}

.widget-edit-mode-action:hover {
    background-color: rgba(255,255,255,0.15);
}

.widget-edit-mode-action-icon {
    icon-size: 14px;
    color: #ffffff;
}

.widget-edit-mode-tooltip {
    background-color: rgba(0,0,0,0.90);
    color: #ffffff;
    border-radius: 6px;
    padding: 4px 8px;
}

.widget-edit-mode-guide-line {
    background-color: rgba(245, 166, 35, 0.9); 
}

.widget-edit-mode-placeholder-valid {
    background-color: rgba(53, 132, 228, 0.20);
    border: 2px dashed rgba(53, 132, 228, 0.9);
    border-radius: 12px;
}

.widget-edit-mode-placeholder-invalid {
    background-color: rgba(224, 27, 36, 0.20);
    border: 2px dashed rgba(224, 27, 36, 0.9);
    border-radius: 12px;
}

.wc-overlay {
    background-color: rgba(20, 20, 20, 0.97);
}

.wc-overlay-header {
    padding: 16px 24px;
    spacing: 16px;
}

.wc-overlay-tabs {
    spacing: 8px;
}

.wc-overlay-tab {
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: bold;
}

.wc-overlay-tab:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.wc-overlay-tab-active {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.15);
}

.wc-overlay-sortbar {
    padding: 8px 0;
    spacing: 8px;
}

.wc-overlay-sortbar-label {
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 4px;
}

.wc-overlay-search {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 6px 14px;
    caret-color: #ffffff;
}

.wc-overlay-search:focus {
    border-color: rgba(255, 255, 255, 0.35);
    background-color: rgba(255, 255, 255, 0.12);
}

.wc-overlay-search StIcon {
    icon-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 4px;
}

.wc-overlay-close {
    color: #ffffff;
    padding: 8px;
    border-radius: 999px;
}

.wc-overlay-close:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.wc-overlay-content {
    padding: 8px 24px 24px 24px;
}

.wc-overlay-scroll {
    overflow-y: scroll;
}

.wc-overlay-grid {
    spacing: 16px;
}

.wc-overlay-row {
    spacing: 16px;
}

.wc-overlay-card {
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px;
    spacing: 6px;
    width: 480px;
}

.wc-overlay-card-screenshot {
    height: 152px; /* 3:1 ratio (456px content width / 3) */
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.35);
}

.wc-overlay-card-screenshot-fallback {
    color: rgba(255, 255, 255, 0.35);
}

.wc-overlay-card-title {
    color: #ffffff;
    font-weight: bold;
    font-size: 15px;
}

.wc-overlay-card-desc {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
}

.wc-overlay-card-widgetlist {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-style: italic;
}

.wc-overlay-card-author {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
}

.wc-overlay-card-controls {
    spacing: 6px;
}

.wc-overlay-toggle,
.wc-overlay-icon-button {
    color: #ffffff;
    padding: 6px;
    border-radius: 6px;
}

.wc-overlay-icon-text-box {
    spacing: 6px;
}

.wc-overlay-toggle:hover,
.wc-overlay-icon-button:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.wc-overlay-load-button {
    color: #ffffff;
    background-color: #3584e4;
    border-radius: 6px;
    padding: 6px 14px;
    font-weight: bold;
}

.wc-overlay-load-button:hover {
    background-color: #62a0ea;
}

.wc-overlay-empty {
    color: rgba(255, 255, 255, 0.5);
    padding: 32px;
}

.wc-overlay-loading {
    spacing: 12px;
    padding: 32px;
}

.wc-overlay-loading-label {
    color: rgba(255, 255, 255, 0.5);
}

.wc-overlay-settings {
    spacing: 16px;
}

.wc-overlay-settings-launcher {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 32px 48px;
}

.wc-overlay-settings-launcher:hover {
    background-color: rgba(255, 255, 255, 0.16);
}

.wc-overlay-settings-launcher-content {
    spacing: 12px;
}

.wc-overlay-settings-launcher-content StIcon {
    color: #ffffff;
}

.wc-overlay-settings-launcher-label {
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
}

.wc-pref-switch {
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.18);
}

.wc-pref-switch:checked {
    background-color: #3584e4;
}

.wc-pref-switch-knob {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background-color: #ffffff;
    margin: 3px;
}

.wc-pref-switch:checked .wc-pref-switch-knob {
    margin-left: 23px;
}
