/* ============================================
   DSEG7 Seven-Segment Display Font
   ============================================ */
@font-face {
    font-family: 'DSEG7Classic';
    src: url('fonts/DSEG7Classic-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DSEG7Classic';
    src: url('fonts/DSEG7Classic-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   Retro Ham Radio Workshop Theme
   Inspired by vintage ham radio shacks
   ============================================ */

[data-theme="retro"] {
    /* Warm wood background tones */
    --bg-primary: #14100c;
    --bg-secondary: #1e1812;
    --bg-card: #2a2118;
    --bg-card-hover: #342a1f;

    /* Amber/warm accent colors */
    --accent-primary: #c8952a;
    --accent-primary-light: #daa84a;
    --accent-secondary: #a07828;
    --accent-gradient: linear-gradient(135deg, #c8952a 0%, #a07828 100%);

    /* Status colors — warm palette */
    --color-received: #3ab060;
    --color-received-bg: rgba(58, 176, 96, 0.12);
    --color-progress: #c8952a;
    --color-progress-bg: rgba(200, 149, 42, 0.12);
    --color-not-received: #7a6e60;
    --color-not-received-bg: rgba(122, 110, 96, 0.12);
    --color-issued: #a07828;
    --color-issued-bg: rgba(160, 120, 40, 0.12);
    --color-error: #c45040;

    /* Warm text colors */
    --text-primary: #e8dcc8;
    --text-secondary: #a89880;
    --text-muted: #7a6e60;

    /* Borders — warm subtle */
    --border-color: rgba(180, 140, 90, 0.12);
    --border-radius: 8px;
    --border-radius-lg: 14px;

    /* Shadows — warm tones */
    --shadow-sm: 0 2px 8px rgba(20, 10, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(20, 10, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(20, 10, 0, 0.5);
    --shadow-glow: 0 0 30px rgba(200, 149, 42, 0.2);
}

/* ============================================
   Typography — Monospace instrument panel
   ============================================ */
[data-theme="retro"] body {
    font-family: 'Courier New', 'Consolas', monospace;
}

[data-theme="retro"] .logo h1,
[data-theme="retro"] .search-card h2,
[data-theme="retro"] .completion-text,
[data-theme="retro"] .changelog-header h2 {
    font-family: 'Courier New', 'Consolas', monospace;
    letter-spacing: 0.05em;
}

/* ============================================
   Seven-Segment Display Numbers
   Applies DSEG7 to all numeric content
   ============================================ */

/* Stat card numbers (main stats grid) */
[data-theme="retro"] .stat-number {
    font-family: 'DSEG7Classic', 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-shadow: 0 0 4px rgba(200, 149, 42, 0.3);
}

/* Progress bar percentage text */
[data-theme="retro"] .progress-text {
    font-family: 'DSEG7Classic', 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: 0 0 3px rgba(200, 200, 150, 0.2);
}

/* Progress stat values (checked / total counts) */
[data-theme="retro"] .stat-value {
    font-family: 'DSEG7Classic', 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-shadow: 0 0 3px rgba(200, 149, 42, 0.3);
}

/* Diploma card progress percentage text */
[data-theme="retro"] .diploma-progress-text {
    font-family: 'DSEG7Classic', 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-shadow: 0 0 3px rgba(200, 200, 150, 0.2);
}

/* Diploma percent ring text (circular indicator) */
[data-theme="retro"] .diploma-percent-ring .ring-text {
    font-family: 'DSEG7Classic', 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #daa84a;
    text-shadow: 0 0 3px rgba(218, 168, 74, 0.2);
}

/* Diploma progress badge (e.g. "12/45") */
[data-theme="retro"] .diploma-progress-badge {
    font-family: 'DSEG7Classic', 'Courier New', monospace;
    font-weight: 400;
    letter-spacing: 0.05em;
}

/* Timing info & ETA */
[data-theme="retro"] .server-timing-info {
    font-family: 'DSEG7Classic', 'Courier New', monospace;
    color: #a89880;
    text-shadow: 0 0 2px rgba(168, 152, 128, 0.15);
}

[data-theme="retro"] .progress-eta {
    font-family: 'DSEG7Classic', 'Courier New', monospace;
    color: #a89880;
    text-shadow: 0 0 2px rgba(168, 152, 128, 0.15);
}

/* Pagination page info (numbers) */
[data-theme="retro"] .page-info {
    font-family: 'DSEG7Classic', 'Courier New', monospace;
    letter-spacing: 0.05em;
}

/* Version badge */
[data-theme="retro"] .version-badge {
    font-family: 'DSEG7Classic', 'Courier New', monospace;
    letter-spacing: 0.05em;
}


/* ============================================
   Header — Warm workshop glow
   ============================================ */
[data-theme="retro"] .header-bg {
    background: linear-gradient(135deg, #c8952a 0%, #8a6420 100%);
    opacity: 0.08;
}

[data-theme="retro"] .header-bg::before {
    background: radial-gradient(circle at 30% 50%, rgba(200, 149, 42, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(160, 120, 40, 0.2) 0%, transparent 50%);
}

/* ============================================
   Cards — Instrument panel look
   ============================================ */
[data-theme="retro"] .search-card,
[data-theme="retro"] .stat-card,
[data-theme="retro"] .diploma-card {
    border: 1px solid rgba(180, 140, 90, 0.15);
    box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.04),
        0 2px 8px rgba(10, 5, 0, 0.3);
}

[data-theme="retro"] .diploma-card:hover {
    border-color: var(--accent-primary);
    box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.06),
        0 4px 16px rgba(200, 149, 42, 0.12);
}

[data-theme="retro"] .stat-card:hover {
    box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.06),
        0 4px 16px rgba(200, 149, 42, 0.1);
}

/* ============================================
   Search Input — Vintage display feel
   ============================================ */
[data-theme="retro"] #callsignInput {
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    background: #18130e;
    border-color: rgba(180, 140, 90, 0.2);
}

[data-theme="retro"] #callsignInput:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(200, 149, 42, 0.15),
        inset 0 0 10px rgba(200, 149, 42, 0.05);
}

[data-theme="retro"] #callsignInput::placeholder {
    font-family: 'Courier New', 'Consolas', monospace;
    letter-spacing: 0.1em;
}

/* ============================================
   Buttons — Warm metallic
   ============================================ */
[data-theme="retro"] .search-btn {
    background: linear-gradient(135deg, #c8952a 0%, #a07828 100%);
    box-shadow: 0 2px 8px rgba(200, 149, 42, 0.2);
}

[data-theme="retro"] .search-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #daa84a 0%, #c8952a 100%);
    box-shadow: 0 4px 16px rgba(200, 149, 42, 0.3);
}

[data-theme="retro"] .filter-btn {
    font-family: 'Courier New', 'Consolas', monospace;
}

[data-theme="retro"] .filter-btn.active {
    background: linear-gradient(135deg, #c8952a 0%, #a07828 100%);
}

[data-theme="retro"] .sort-select {
    font-family: 'Courier New', 'Consolas', monospace;
}

/* ============================================
   S-Meter Bar-Graph Progress Bars
   Ham radio signal meter style
   ============================================ */

/* --- Main parsing progress bar (S-Meter) --- */
[data-theme="retro"] .progress-bar-container {
    background: #0e0b08;
    border: 1px solid rgba(180, 140, 90, 0.2);
    border-radius: 6px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6),
        inset 0 0 12px rgba(0, 0, 0, 0.3);
    height: 32px;
    position: relative;
    overflow: visible;
}

/* S-meter scale labels above the main bar */
[data-theme="retro"] .progress-bar-container::before {
    content: 'S1 3 5 7 9 +20 +60';
    position: absolute;
    top: -16px;
    left: 2px;
    right: 2px;
    font-family: 'Courier New', monospace;
    font-size: 0.55rem;
    color: #7a6e60;
    pointer-events: none;
    display: block;
    text-align: justify;
    text-align-last: justify;
    word-spacing: 0.1em;
}

/* Tick marks at bottom of main bar */
[data-theme="retro"] .progress-bar-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: repeating-linear-gradient(90deg,
            rgba(180, 140, 90, 0.3) 0px,
            rgba(180, 140, 90, 0.3) 1px,
            transparent 1px,
            transparent 10%);
    pointer-events: none;
    z-index: 2;
}

[data-theme="retro"] .progress-bar {
    border-radius: 4px;
    background-image:
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 7px,
            rgba(0, 0, 0, 0.95) 7px,
            rgba(0, 0, 0, 0.95) 10px),
        linear-gradient(90deg,
            #2a8a2a 0%,
            #30a030 20%,
            #3ab030 40%,
            #40b830 58%,
            #c8952a 68%,
            #e07030 78%,
            #e84030 88%,
            #ff2020 100%) !important;
    background-size: 100% 100%, calc(10000% / var(--progress, 100)) 100% !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 0 8px rgba(200, 149, 42, 0.3),
        0 0 16px rgba(200, 149, 42, 0.1);
    transition: width 0.3s ease;
}

[data-theme="retro"] .progress-bar::after {
    display: none;
}

[data-theme="retro"] .progress-text {
    text-shadow: 0 0 6px rgba(200, 149, 42, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.8);
}

/* --- Diploma card progress bars (S-Meter mini) --- */
[data-theme="retro"] .diploma-progress-bar-container {
    background: #0e0b08;
    border: 1px solid rgba(180, 140, 90, 0.15);
    border-radius: 4px;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    height: 18px;
    position: relative;
    overflow: visible;
}

/* Mini S-meter scale above diploma bars */
[data-theme="retro"] .diploma-progress-bar-container::before {
    content: 'S1 3 5 7 9 +20 +60';
    position: absolute;
    top: -13px;
    left: 1px;
    right: 1px;
    font-family: 'Courier New', monospace;
    font-size: 0.45rem;
    color: #5a5040;
    pointer-events: none;
    display: block;
    text-align: justify;
    text-align-last: justify;
    word-spacing: 0.05em;
}

/* Segmented bar fill — all variants */
[data-theme="retro"] .diploma-progress-bar {
    border-radius: 3px;
    background-image:
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 5px,
            rgba(0, 0, 0, 0.92) 5px,
            rgba(0, 0, 0, 0.92) 7px),
        linear-gradient(90deg,
            #2a8a2a 0%,
            #30a030 20%,
            #3ab030 40%,
            #40b830 58%,
            #c8952a 68%,
            #e07030 78%,
            #e84030 88%,
            #ff2020 100%) !important;
    background-size: 100% 100%, calc(10000% / var(--progress, 100)) 100% !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 0 6px rgba(200, 149, 42, 0.2);
    transition: width 0.5s ease;
}

/* In retro mode, all bar variants use the same S-meter gradient */
[data-theme="retro"] .diploma-progress-bar.progress-bar-success,
[data-theme="retro"] .diploma-progress-bar.progress-bar-warning,
[data-theme="retro"] .diploma-progress-bar.progress-bar-almost,
[data-theme="retro"] .diploma-progress-bar.progress-bar-default {
    background-image:
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 5px,
            rgba(0, 0, 0, 0.92) 5px,
            rgba(0, 0, 0, 0.92) 7px),
        linear-gradient(90deg,
            #2a8a2a 0%,
            #30a030 20%,
            #3ab030 40%,
            #40b830 58%,
            #c8952a 68%,
            #e07030 78%,
            #e84030 88%,
            #ff2020 100%) !important;
    background-size: 100% 100%, calc(10000% / var(--progress, 100)) 100% !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
}

[data-theme="retro"] .diploma-progress-text {
    text-shadow: 0 0 4px rgba(200, 149, 42, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ============================================
   Percentage Ring — Mixer Knob (Potentiometer)
   ============================================ */
[data-theme="retro"] .diploma-percent-ring {
    width: 48px;
    height: 58px;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    gap: 0;
    overflow: visible;
}

/* Hide the SVG */
[data-theme="retro"] .diploma-percent-ring svg {
    display: none;
}

/* Knob body */
[data-theme="retro"] .diploma-percent-ring::before {
    content: '';
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%,
            #4a4540 0%,
            #2a2520 40%,
            #1a1510 70%,
            #0e0a08 100%);
    border: 2px solid #3a3530;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(80, 70, 55, 0.3),
        inset 0 1px 2px rgba(80, 70, 55, 0.2);
    position: relative;
    z-index: 1;
}

/* Indicator line (white mark on the knob) */
/* Rotates from -135deg (0%) to +135deg (100%) = 270deg sweep */
[data-theme="retro"] .diploma-percent-ring::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    width: 2px;
    height: 16px;
    background: linear-gradient(to bottom, #ffffff 0%, #e0d8cc 60%, transparent 100%);
    border-radius: 1px;
    transform-origin: center 18px;
    transform: translateX(-50%) rotate(calc(-135deg + var(--progress, 0) * 2.7deg));
    z-index: 2;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
}

/* Percentage text below knob */
[data-theme="retro"] .diploma-percent-ring .ring-text {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'DSEG7Classic', monospace;
    font-size: 0.55rem;
    font-weight: 700;
    color: #daa84a;
    text-shadow: 0 0 4px rgba(218, 168, 74, 0.4);
    z-index: 2;
    white-space: nowrap;
}

[data-theme="retro"] .diploma-percent-ring .ring-bg,
[data-theme="retro"] .diploma-percent-ring .ring-fill {
    display: none;
}

/* ============================================
   Status Badges — Warm tones
   ============================================ */
[data-theme="retro"] .diploma-card.received .diploma-status {
    background: rgba(58, 176, 96, 0.12);
    color: #3ab060;
}

[data-theme="retro"] .diploma-card.in_progress .diploma-status {
    background: rgba(200, 149, 42, 0.12);
    color: #daa84a;
}

[data-theme="retro"] .diploma-card.not_received .diploma-status {
    background: rgba(122, 110, 96, 0.12);
    color: #7a6e60;
}

[data-theme="retro"] .diploma-card.issued .diploma-status {
    background: rgba(160, 120, 40, 0.12);
    color: #c8952a;
}

[data-theme="retro"] .diploma-card.error .diploma-status {
    background: rgba(196, 80, 64, 0.12);
    color: #c45040;
}

/* ============================================
   Status Icons Background
   ============================================ */
[data-theme="retro"] .diploma-card.received .diploma-status-icon {
    background: rgba(58, 176, 96, 0.1);
}

[data-theme="retro"] .diploma-card.in_progress .diploma-status-icon {
    background: rgba(200, 149, 42, 0.1);
}

[data-theme="retro"] .diploma-card.not_received .diploma-status-icon {
    background: rgba(122, 110, 96, 0.1);
}

[data-theme="retro"] .diploma-card.issued .diploma-status-icon {
    background: rgba(160, 120, 40, 0.1);
}

/* ============================================
   Radar Animation — Amber
   ============================================ */
[data-theme="retro"] .radar {
    border-color: var(--accent-primary);
}

[data-theme="retro"] .radar::before {
    background: var(--accent-primary);
}

[data-theme="retro"] .radar::after {
    background: linear-gradient(90deg, var(--accent-primary), transparent);
}

@keyframes radarPulseRetro {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(200, 149, 42, 0.4),
            0 0 0 0 rgba(200, 149, 42, 0.2);
    }

    50% {
        box-shadow: 0 0 0 15px rgba(200, 149, 42, 0),
            0 0 0 30px rgba(200, 149, 42, 0);
    }
}

[data-theme="retro"] .radar {
    animation: radarPulseRetro 2s ease-out infinite;
}

/* ============================================
   Changelog Modal — Warm
   ============================================ */
[data-theme="retro"] .changelog-modal {
    box-shadow: 0 25px 60px rgba(20, 10, 0, 0.6),
        0 0 40px rgba(200, 149, 42, 0.1);
}

[data-theme="retro"] .changelog-version {
    background: linear-gradient(135deg, #c8952a, #a07828);
}

[data-theme="retro"] .changelog-close-btn {
    background: linear-gradient(135deg, #c8952a, #a07828);
}

[data-theme="retro"] .changelog-close-btn:hover {
    background: linear-gradient(135deg, #daa84a, #c8952a);
}

/* ============================================
   Footer
   ============================================ */
[data-theme="retro"] .footer a {
    color: #daa84a;
}

/* Telegram Feedback Link — Retro */
[data-theme="retro"] .telegram-feedback-link {
    background: rgba(200, 149, 42, 0.08);
    border-color: rgba(200, 149, 42, 0.2);
    color: #daa84a;
}

[data-theme="retro"] .telegram-feedback-link:hover {
    background: rgba(200, 149, 42, 0.15);
    border-color: rgba(200, 149, 42, 0.4);
    box-shadow: 0 4px 15px rgba(200, 149, 42, 0.15);
    color: #e8c060;
}

[data-theme="retro"] .footer-tg-link {
    color: #daa84a !important;
}

[data-theme="retro"] .footer-tg-link:hover {
    color: #e8c060 !important;
}



/* ============================================
   Toast
   ============================================ */
[data-theme="retro"] .toast {
    background: #2a2118;
    border: 1px solid rgba(180, 140, 90, 0.2);
}

/* ============================================
   New Search Button
   ============================================ */
[data-theme="retro"] .new-search-btn {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

[data-theme="retro"] .new-search-btn:hover {
    background: var(--accent-primary);
    color: #14100c;
}

/* ============================================
   Pagination
   ============================================ */
[data-theme="retro"] .page-btn:hover:not(:disabled) {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* ============================================
   Version Badge
   ============================================ */
[data-theme="retro"] .version-badge {
    background: rgba(200, 149, 42, 0.12);
    color: #daa84a;
}

/* ============================================
   Status Indicator
   ============================================ */
[data-theme="retro"] .status-dot.online {
    background: #3ab060;
    box-shadow: 0 0 8px rgba(58, 176, 96, 0.5);
}

/* ============================================
   Theme Toggle Button
   ============================================ */
.theme-toggle {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.theme-toggle:hover {
    transform: scale(1.1);
    border-color: var(--accent-primary);
    background: var(--bg-card-hover);
    box-shadow: var(--shadow-glow);
}

.theme-toggle .theme-icon-modern,
.theme-toggle .theme-icon-retro {
    display: none;
}

/* По умолчанию — современная тема, показываем иконку переключения на ретро */
.theme-toggle .theme-icon-retro {
    display: inline;
}

[data-theme="retro"] .theme-toggle .theme-icon-retro {
    display: none;
}

[data-theme="retro"] .theme-toggle .theme-icon-modern {
    display: inline;
}