/*
 * LaunchCompass
 * Copyright (c) 2026 Robert Morgan / RMC Software Solutions, LLC
 * All rights reserved.
 * 
 * This software is proprietary and confidential.
 * Unauthorized copying, modification, distribution, or use is strictly prohibited.
 * 
 * File: wwwroot\css\dials.css
 * Author: Robert Morgan
 * Version: 1.0.0
 * Created: 01/28/2026
 * Modified: 01/28/2026
 * Released: 00/00/0000
 * 
 * Description:
 *     Size variants for compass and targeting dial components.
 *     Provides small, medium, large, and extra-large dial sizes with responsive breakpoints.
 * 
 * MVVM Role: Styling
 * Architecture: Component Styles | Responsive
*/

/* wwwroot/css/dials.css */
/* Shared styles for Compass Dial and Targeting Dial */

.compass-rose,
.targeting-dial {
    width: 180px;
    height: 180px;
}

    .compass-rose svg,
    .targeting-dial svg {
        width: 100%;
        height: 100%;
    }

/* Size variants for Settings control */
.dial-small .compass-rose,
.dial-small .targeting-dial {
    width: 140px;
    height: 140px;
}

.dial-medium .compass-rose,
.dial-medium .targeting-dial {
    width: 200px;
    height: 200px;
}

.dial-large .compass-rose,
.dial-large .targeting-dial {
    width: 260px;
    height: 260px;
}

/* Extra large for Shooting page single dial mode */
.dial-xlarge .compass-rose,
.dial-xlarge .targeting-dial {
    width: 320px;
    height: 320px;
}

/* Responsive adjustments */
@media (max-width: 360px) {
    .compass-rose,
    .targeting-dial {
        width: 160px;
        height: 160px;
    }

    .dial-xlarge .compass-rose,
    .dial-xlarge .targeting-dial {
        width: 280px;
        height: 280px;
    }
}

@media (min-width: 768px) {
    .compass-rose,
    .targeting-dial {
        width: 220px;
        height: 220px;
    }

    .dial-xlarge .compass-rose,
    .dial-xlarge .targeting-dial {
        width: 380px;
        height: 380px;
    }
}

/* Dual dial stacked layout */
.dial-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

    .dial-stack .compass-rose,
    .dial-stack .targeting-dial {
        width: 160px;
        height: 160px;
    }

/* Labels for stacked dials */
.dial-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
    text-align: center;
}