/**
 * Aspect Ratio Columns Styles
 * Shared styles for aspect ratio column rendering
 * Used by AspectRatioSelector, AspectRatioUtils, and PresetAddViewRenderer
 * Note: Variables are defined in css-variables.css
 */

/* ========================================
   COLUMN CONTAINER
   ======================================== */

.resolution-master-aspect-ratio-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    background: var(--overlay-dark-20);
    border: 1px solid var(--color-gray-800);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
}

/* ========================================
   COLUMN HEADER
   ======================================== */

.resolution-master-aspect-ratio-column-icon {
    color: var(--color-primary);
    margin-bottom: var(--spacing-2);
}

.resolution-master-aspect-ratio-column-title {
    color: var(--color-primary);
    font-size: var(--font-base);
    font-weight: bold;
    margin-bottom: var(--spacing-3);
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--color-gray-800);
    width: 100%;
    text-align: center;
}

/* ========================================
   PRESET LIST (Scrollable)
   ======================================== */

.resolution-master-aspect-ratio-column-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    flex-shrink: 0;
    scrollbar-gutter: stable;
}

/* ========================================
   PRESET ITEMS
   ======================================== */

.resolution-master-aspect-ratio-preset-item {
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--overlay-light-05);
    border: 1px solid var(--color-gray-800);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-all);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.resolution-master-aspect-ratio-preset-item:hover {
    background: var(--overlay-light-15);
    border-color: var(--color-gray-600);
}

/* Selected state */
.resolution-master-aspect-ratio-preset-item.selected {
    background: var(--bg-primary-30);
    border-color: var(--color-primary);
}

.resolution-master-aspect-ratio-preset-item.selected:hover {
    background: var(--bg-primary-30);
    border-color: var(--color-primary);
}

/* Hidden built-in preset - only red border, nothing else changes */
/* Using .resolution-master-preset-is-hidden instead of .hidden to avoid conflicts with global CSS */
.resolution-master-aspect-ratio-preset-item.resolution-master-preset-is-hidden {
    border-color: var(--color-error) !important;
}

.resolution-master-aspect-ratio-preset-item.resolution-master-preset-is-hidden:hover {
    border-color: var(--color-error) !important;
}

/* Always show action button for hidden presets (so user can unhide them) */
.resolution-master-aspect-ratio-preset-item.resolution-master-preset-is-hidden .resolution-master-aspect-ratio-preset-action-btn {
    opacity: 1 !important;
}

/* Preset item for column view (flexible height) */
.resolution-master-aspect-ratio-preset-item-column {
    position: relative;
    min-height: 38px;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* ========================================
   PRESET ITEM CONTENT
   ======================================== */

.resolution-master-aspect-ratio-preset-item-name {
    color: var(--color-gray-100);
    font-size: var(--font-lg);
    font-weight: normal;
    margin-bottom: var(--spacing-1);
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100px;
}

/* Selected state name */
.resolution-master-aspect-ratio-preset-item.selected .resolution-master-aspect-ratio-preset-item-name {
    color: var(--color-white);
    font-weight: bold;
}

.resolution-master-aspect-ratio-preset-item-dims {
    color: var(--color-gray-500);
    font-size: var(--font-base);
}

/* Selected state dimensions */
.resolution-master-aspect-ratio-preset-item.selected .resolution-master-aspect-ratio-preset-item-dims {
    color: var(--color-primary);
}

/* Custom preset icon */
.resolution-master-aspect-ratio-preset-custom-icon {
    width: var(--spacing-12);
    height: var(--spacing-12);
    margin-left: var(--spacing-3);
    vertical-align: middle;
}

/* ========================================
   ACTION BUTTONS (Delete/Toggle)
   ======================================== */

.resolution-master-aspect-ratio-preset-action-btn {
    position: absolute;
    top: var(--spacing-2);
    right: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-size: var(--font-xs);
    cursor: pointer;
    opacity: 0;
    transition: var(--transition-opacity), var(--transition-bg);
}

.resolution-master-aspect-ratio-preset-item:hover .resolution-master-aspect-ratio-preset-action-btn {
    opacity: 1;
}

.resolution-master-aspect-ratio-preset-action-btn.delete {
    background: rgba(255, 80, 80, 0.8);
}

.resolution-master-aspect-ratio-preset-action-btn.hide {
    background: rgba(255, 200, 0, 0.8);
}

.resolution-master-aspect-ratio-preset-action-btn.unhide {
    background: rgba(80, 255, 80, 0.8);
}

.resolution-master-aspect-ratio-preset-action-icon {
    width: var(--spacing-12);
    height: var(--spacing-12);
    display: block;
}

/* ========================================
   SCROLL INDICATORS
   ======================================== */

/* Vertical scroll indicator (↓ Scroll for more) */
.resolution-master-aspect-ratio-column-scroll-indicator {
    color: var(--color-gray-500);
    font-size: var(--font-xs);
    margin-top: var(--spacing-2);
    text-align: center;
    padding: var(--spacing-2);
}

/* Horizontal scroll indicator (→ Scroll right for more) */
.resolution-master-aspect-ratio-horizontal-scroll-indicator {
    flex-shrink: 0;
    color: var(--color-gray-300);
    font-size: var(--font-xs);
    text-align: center;
    padding: var(--spacing-4);
    border-top: 1px solid var(--color-gray-700);
    cursor: pointer;
}

/* ========================================
   CUSTOM SCROLLBAR
   ======================================== */

.resolution-master-aspect-ratio-scrollable::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

.resolution-master-aspect-ratio-scrollable::-webkit-scrollbar-track {
    background: var(--overlay-dark-20);
    border-radius: var(--radius-md);
}

.resolution-master-aspect-ratio-scrollable::-webkit-scrollbar-thumb {
    background: var(--color-gray-600);
    border-radius: var(--radius-lg);
    border: 2px solid var(--overlay-dark-20);
}

.resolution-master-aspect-ratio-scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-500);
}