/* ========================================
   JOBCENTER - APP SPECIFIC STYLES
   Built on TGN Design System
   Version 1.0
======================================== */

/* ========================================
   CUSTOM PROPERTIES - JobCenter Specific
======================================== */
:root {
    /* Primary Brand Colors - TGN Blue */
    --primary: #2980b9;
    --primary-light: #3498db;
    --primary-dark: #1a5276;

    /* Override font family for JobCenter */
    --font-family: 'Comfortaa', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;

    /* JobCenter specific accent colors */
    --jobcenter-success: var(--tgn-accent-green);
    --jobcenter-warning: var(--tgn-accent-orange);
    --jobcenter-danger: var(--tgn-accent-red);
    --jobcenter-info: var(--tgn-accent-blue);
}

/* ========================================
   THEME OVERRIDES
======================================== */
[data-theme="light"] {
    /* Light theme uses TGN defaults */
}

[data-theme="dark"] {
    /* Dark theme uses TGN dark mode defaults */
}

/* ========================================
   TYPOGRAPHY - JobCenter Specific
======================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    font-weight: var(--tgn-font-semibold);
}

body {
    font-family: var(--tgn-font-secondary);
}

/* ========================================
   JOBCENTER COMPONENTS
======================================== */

/* Job Card - Uses TGN Glass Card as base */
.jobcenter-job-card {
    /* Inherits from tgn-glass-card */
}

/* Application Button - Uses TGN Primary Button */
.jobcenter-apply-btn {
    /* Inherits from tgn-btn-primary */
}

/* JobCenter Navigation - Uses TGN Glass Nav */
.jobcenter-nav {
    /* Inherits from tgn-glass-nav */
}

/* JobCenter specific utilities */
.jobcenter-container {
    max-width: var(--tgn-container-xl);
    margin: 0 auto;
    padding: var(--tgn-space-4);
}

/* Job Status Badges */
.jobcenter-badge-active {
    background: rgba(var(--tgn-accent-green-rgb), 0.15);
    color: var(--tgn-accent-green);
    padding: var(--tgn-space-1) var(--tgn-space-3);
    border-radius: var(--tgn-radius-full);
    font-size: var(--tgn-text-xs);
    font-weight: var(--tgn-font-semibold);
}

.jobcenter-badge-closed {
    background: rgba(var(--tgn-accent-red-rgb), 0.15);
    color: var(--tgn-accent-red);
    padding: var(--tgn-space-1) var(--tgn-space-3);
    border-radius: var(--tgn-radius-full);
    font-size: var(--tgn-text-xs);
    font-weight: var(--tgn-font-semibold);
}

.jobcenter-badge-pending {
    background: rgba(var(--tgn-accent-orange-rgb), 0.15);
    color: var(--tgn-accent-orange);
    padding: var(--tgn-space-1) var(--tgn-space-3);
    border-radius: var(--tgn-radius-full);
    font-size: var(--tgn-text-xs);
    font-weight: var(--tgn-font-semibold);
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */
@media (max-width: 768px) {
    .jobcenter-container {
        padding: var(--tgn-space-3);
    }
}

/* ========================================
   ACCESSIBILITY
======================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}