/**
 * AAUrl Application-Specific Stylesheet
 * Styles specific to the AAUrl URL shortener application
 * 
 * This file contains:
 * - QR code styling
 * - Short code display styling
 * - Other AAUrl-specific UI elements
 * 
 * Requires: aau-common.css
 */

/* CSS Variables for AAUrl-specific styling */
:root {
    --qr-gradient-start: #e8f5e9;
    --qr-gradient-end: #c8e6c9;
    --qr-border: #a5d6a7;
    --qr-text: #1b5e20;
    --qr-heading: #2e7d32;
    
    /* Domain color palette - distinct shades for different domains */
    --domain-color-1: #667eea;  /* Purple-blue */
    --domain-color-2: #2d9cdb;  /* Sky blue */
    --domain-color-3: #27ae60;  /* Green */
    --domain-color-4: #f39c12;  /* Orange */
    --domain-color-5: #e74c3c;  /* Red */
    --domain-color-6: #9b59b6;  /* Purple */
    --domain-color-7: #16a085;  /* Teal */
    --domain-color-8: #d35400;  /* Dark orange */
}

/* QR Code Gradient Card */
.qr-gradient-card {
    background: linear-gradient(135deg, var(--qr-gradient-start) 0%, var(--qr-gradient-end) 100%);
    color: var(--qr-text);
    border: 1px solid var(--qr-border);
}

.qr-gradient-card h3 {
    color: var(--qr-heading);
}

/* Short Code Display Styling */
.short-code {
    background: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
}

.short-code:hover {
    background: #e9ecef;
    transform: translateY(-1px);
}

/* Domain-specific colors for short URLs */
.short-code[data-domain-id="1"] {
    color: var(--domain-color-1);
    border-left: 3px solid var(--domain-color-1);
}

.short-code[data-domain-id="2"] {
    color: var(--domain-color-2);
    border-left: 3px solid var(--domain-color-2);
}

.short-code[data-domain-id="3"] {
    color: var(--domain-color-3);
    border-left: 3px solid var(--domain-color-3);
}

.short-code[data-domain-id="4"] {
    color: var(--domain-color-4);
    border-left: 3px solid var(--domain-color-4);
}

.short-code[data-domain-id="5"] {
    color: var(--domain-color-5);
    border-left: 3px solid var(--domain-color-5);
}

.short-code[data-domain-id="6"] {
    color: var(--domain-color-6);
    border-left: 3px solid var(--domain-color-6);
}

.short-code[data-domain-id="7"] {
    color: var(--domain-color-7);
    border-left: 3px solid var(--domain-color-7);
}

.short-code[data-domain-id="8"] {
    color: var(--domain-color-8);
    border-left: 3px solid var(--domain-color-8);
}

/* Domain badges with matching colors */
.domain-badge[data-domain-id="1"] {
    background-color: var(--domain-color-1) !important;
    color: white !important;
}

.domain-badge[data-domain-id="2"] {
    background-color: var(--domain-color-2) !important;
    color: white !important;
}

.domain-badge[data-domain-id="3"] {
    background-color: var(--domain-color-3) !important;
    color: white !important;
}

.domain-badge[data-domain-id="4"] {
    background-color: var(--domain-color-4) !important;
    color: white !important;
}

.domain-badge[data-domain-id="5"] {
    background-color: var(--domain-color-5) !important;
    color: white !important;
}

.domain-badge[data-domain-id="6"] {
    background-color: var(--domain-color-6) !important;
    color: white !important;
}

.domain-badge[data-domain-id="7"] {
    background-color: var(--domain-color-7) !important;
    color: white !important;
}

.domain-badge[data-domain-id="8"] {
    background-color: var(--domain-color-8) !important;
    color: white !important;
}