/**
 * Android Asset Kit Generator - Frontend Styles
 * Uses QS Tools Hub global variables for consistency
 * Fallbacks provided for standalone usage
 * Inspired by iOS Icons & Splash Generator design
 */

/* Main Container */
.qsaak-wrap {
    width: 100%;
    max-width: 100%;
    color: var(--qs-text-primary, #202124);
    background: var(--qs-bg-primary, #ffffff);
    border: var(--qs-border-width, 1px) solid var(--qs-border-light, #e8eaed);
    border-radius: var(--qs-radius-xl, 16px);
    padding: var(--qs-space-lg, 1.5rem);
    box-shadow: var(--qs-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.1));
    margin-bottom: var(--qs-space-md, 1rem);
    box-sizing: border-box;
}

.qsaak-wrap h2 {
    margin: 0 0 var(--qs-space-sm, 0.5rem);
    font-size: var(--qs-font-2xl, 1.5rem);
    font-weight: var(--qs-weight-semibold, 600);
    color: var(--qs-text-primary, #202124);
    line-height: var(--qs-leading-tight, 1.25);
}

.qsaak-wrap .desc {
    margin: 0 0 var(--qs-space-lg, 1.5rem);
    color: var(--qs-text-secondary, #5f6368);
    font-size: var(--qs-font-sm, 0.875rem);
    line-height: var(--qs-leading-normal, 1.5);
}

/* Notices */
.qsaak-notice {
    border-radius: var(--qs-radius-lg, 12px);
    padding: var(--qs-space-md, 1rem);
    margin-bottom: var(--qs-space-md, 1rem);
    border: var(--qs-border-width, 1px) solid;
}

.qsaak-notice-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.qsaak-notice-error strong {
    color: #7f1d1d;
}

.qsaak-notice-error ul {
    margin: var(--qs-space-sm, 0.5rem) 0 0;
    padding-left: var(--qs-space-lg, 1.5rem);
}

.qsaak-notice-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.qsaak-notice-success strong {
    color: #14532d;
}

.qsaak-notice-success p {
    margin: var(--qs-space-sm, 0.5rem) 0;
}

/* Form Container */
.qsaak-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--qs-space-md, 1rem) var(--qs-space-lg, 1.5rem);
    align-items: center;
    background: var(--qs-bg-secondary, #f8f9fa);
    border: var(--qs-border-width, 1px) solid var(--qs-border-light, #e8eaed);
    border-radius: var(--qs-radius-lg, 12px);
    padding: var(--qs-space-lg, 1.5rem);
    margin-bottom: var(--qs-space-md, 1rem);
}

.qsaak-form label {
    font-weight: var(--qs-weight-semibold, 600);
    font-size: var(--qs-font-sm, 0.875rem);
    color: var(--qs-text-primary, #202124);
}

.qsaak-form label.small {
    font-weight: var(--qs-weight-normal, 400);
    font-size: var(--qs-font-sm, 0.875rem);
    display: inline-flex;
    align-items: center;
    gap: var(--qs-space-xs, 0.375rem);
    cursor: pointer;
}

.qsaak-form .row {
    display: flex;
    gap: var(--qs-space-md, 1rem);
    align-items: center;
    flex-wrap: wrap;
}

/* Form Inputs */
.qsaak-form input[type="text"] {
    width: 100%;
    border: var(--qs-border-width, 1px) solid var(--qs-input-border-color, #dadce0);
    background: var(--qs-bg-primary, #ffffff);
    color: var(--qs-text-primary, #202124);
    padding: var(--qs-input-padding-y, 0.625rem) var(--qs-input-padding-x, 0.75rem);
    border-radius: var(--qs-input-border-radius, 8px);
    outline: none;
    transition: border-color var(--qs-transition-fast, 150ms ease), 
                box-shadow var(--qs-transition-fast, 150ms ease);
    font-size: var(--qs-font-sm, 0.875rem);
}

.qsaak-form input[type="text"]:focus {
    border-color: var(--qs-input-focus-border, #1a73e8);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}

.qsaak-form input[type="file"] {
    width: 100%;
    border: var(--qs-border-width, 1px) dashed var(--qs-border-medium, #dadce0);
    background: var(--qs-bg-primary, #ffffff);
    color: var(--qs-text-secondary, #5f6368);
    padding: var(--qs-space-md, 1rem);
    border-radius: var(--qs-radius-lg, 12px);
    cursor: pointer;
    font-size: var(--qs-font-sm, 0.875rem);
}

.qsaak-form input[type="file"]::file-selector-button {
    border: none;
    background: linear-gradient(90deg, #a4c639, #77b829);
    color: var(--qs-text-inverse, #ffffff);
    padding: var(--qs-space-sm, 0.5rem) var(--qs-space-md, 1rem);
    margin-right: var(--qs-space-md, 1rem);
    border-radius: var(--qs-radius-md, 8px);
    cursor: pointer;
    font-weight: var(--qs-weight-medium, 500);
    transition: filter var(--qs-transition-fast, 150ms ease);
}

.qsaak-form input[type="file"]::file-selector-button:hover {
    filter: brightness(1.1);
}

.qsaak-form input[type="color"] {
    appearance: none;
    -webkit-appearance: none;
    height: 40px;
    width: 56px;
    padding: 0;
    border: var(--qs-border-width, 1px) solid var(--qs-border-medium, #dadce0);
    background: var(--qs-bg-primary, #ffffff);
    border-radius: var(--qs-radius-md, 8px);
    cursor: pointer;
}

.qsaak-form input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: var(--qs-radius-sm, 4px);
}

.qsaak-form input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: var(--qs-radius-sm, 4px);
}

.qsaak-form input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #a4c639;
    cursor: pointer;
}

.qsaak-form input[type="range"] {
    width: 240px;
    height: 4px;
    accent-color: #a4c639;
}

#qsaakPadVal,
#qsaakRadiusVal {
    color: var(--qs-text-secondary, #5f6368);
    min-width: 44px;
    text-align: right;
    font-size: var(--qs-font-sm, 0.875rem);
    font-weight: var(--qs-weight-medium, 500);
}

/* Buttons */
.qsaak-wrap .button,
.qsaak-wrap .button-primary {
    background: linear-gradient(90deg, #a4c639, #77b829);
    border: none;
    color: var(--qs-text-inverse, #ffffff) !important;
    border-radius: var(--qs-btn-border-radius, 9999px);
    padding: var(--qs-btn-padding-y, 0.625rem) var(--qs-btn-padding-x, 1rem);
    font-weight: var(--qs-weight-semibold, 600);
    font-size: var(--qs-btn-font-size, 0.875rem);
    box-shadow: var(--qs-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.1));
    transition: transform var(--qs-transition-fast, 150ms ease),
                box-shadow var(--qs-transition-base, 300ms ease),
                filter var(--qs-transition-fast, 150ms ease);
    cursor: pointer;
    text-decoration: none;
}

.qsaak-wrap .button:hover,
.qsaak-wrap .button-primary:hover {
    filter: brightness(1.05);
    box-shadow: var(--qs-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12));
    transform: translateY(-1px);
}

.qsaak-wrap .button:active,
.qsaak-wrap .button-primary:active {
    transform: translateY(0);
}

/* Results Section */
.qsaak-results {
    margin-top: var(--qs-space-lg, 1.5rem);
    background: var(--qs-bg-secondary, #f8f9fa);
    border: var(--qs-border-width, 1px) solid var(--qs-border-light, #e8eaed);
    border-radius: var(--qs-radius-lg, 12px);
    padding: var(--qs-space-lg, 1.5rem);
}

.qsaak-results h3 {
    margin: 0 0 var(--qs-space-md, 1rem);
    font-size: var(--qs-font-xl, 1.25rem);
    font-weight: var(--qs-weight-semibold, 600);
    color: var(--qs-text-primary, #202124);
}

#qsaakGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--qs-space-md, 1rem);
}

/* Asset Cards */
.qsaak-asset {
    border: var(--qs-border-width, 1px) solid var(--qs-border-light, #e8eaed);
    background: var(--qs-bg-primary, #ffffff);
    border-radius: var(--qs-radius-lg, 12px);
    padding: var(--qs-space-md, 1rem);
    transition: transform var(--qs-transition-fast, 150ms ease),
                box-shadow var(--qs-transition-base, 300ms ease),
                border-color var(--qs-transition-fast, 150ms ease);
}

.qsaak-asset:hover {
    transform: translateY(-2px);
    border-color: #a4c639;
    box-shadow: var(--qs-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12));
}

.qsaak-asset strong {
    display: block;
    margin-bottom: var(--qs-space-sm, 0.5rem);
    font-size: var(--qs-font-sm, 0.875rem);
    font-weight: var(--qs-weight-semibold, 600);
    color: var(--qs-text-primary, #202124);
}

.qsaak-asset canvas {
    width: 100%;
    height: auto;
    background: var(--qs-gray-900, #202124);
    border-radius: var(--qs-radius-md, 8px);
    border: var(--qs-border-width, 1px) solid var(--qs-border-light, #e8eaed);
}

.qsaak-asset .meta {
    font-size: var(--qs-font-xs, 0.75rem);
    color: var(--qs-text-secondary, #5f6368);
    margin-top: var(--qs-space-sm, 0.5rem);
}

.qsaak-asset .btns {
    margin-top: var(--qs-space-sm, 0.5rem);
    display: flex;
    gap: var(--qs-space-sm, 0.5rem);
    flex-wrap: wrap;
}

/* Actions */
.actions {
    margin-top: var(--qs-space-md, 1rem);
    display: flex;
    gap: var(--qs-space-md, 1rem);
    align-items: center;
    flex-wrap: wrap;
}

#qsaakZipStatus {
    color: var(--qs-text-secondary, #5f6368);
    font-size: var(--qs-font-sm, 0.875rem);
}

/* Responsive */
@media (max-width: 768px) {
    .qsaak-form {
        grid-template-columns: 1fr;
    }
    
    #qsaakGrid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}