/* ============================================================================
   WellApp Design System 2026 — Components
   ----------------------------------------------------------------------------
   Új, opt-in osztályok: .ds-btn, .ds-card, .ds-input, .ds-modal, .ds-kpi-card,
   .ds-badge, .glass.

   FONTOS: A névteret szándékosan `.ds-` prefixszel látjuk el a Sprint 1 alatt,
   hogy ne ütközzön a meglévő `.btn`, `.card`, `.kpi-card` stb. osztályokkal,
   amelyeket az admin/dashboard/dashboard.css és company/dashboard/dashboard.css
   használ. Ez biztosítja a 0-regression deploy-t. Sprint 2-3 alatt a régi
   osztályokat fokozatosan átvezetjük a `.ds-*` változatokra.

   Forrás: docs/DESIGN_SYSTEM_2026.md (Sprint 1, fejezet 6 + 7)
   ============================================================================ */

/* ============================================================================
   GLASSMORPHISM
   ============================================================================ */
.glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.glass-strong {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

@supports not (backdrop-filter: blur(12px)) {
    .glass,
    .glass-strong {
        background: var(--color-bg-elevated);
    }
}

@media (max-width: 640px) {
    .glass {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* ============================================================================
   BUTTON — .ds-btn
   ============================================================================ */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    line-height: 1.2;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out-expo);
    min-height: 44px;                        /* WCAG 2.5.8 touch target */
    border: 1px solid transparent;
    text-decoration: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.ds-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-glow);
}

.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Variants */
.ds-btn-primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}
.ds-btn-primary:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
}

.ds-btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.ds-btn-secondary:hover {
    background: var(--color-primary-light);
}

.ds-btn-ghost {
    background: transparent;
    color: var(--color-text);
}
.ds-btn-ghost:hover {
    background: var(--color-bg-muted);
}

.ds-btn-critical {
    background: var(--color-critical);
    color: var(--color-text-inverse);
}
.ds-btn-critical:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
}

.ds-btn-success {
    background: var(--color-success);
    color: var(--color-text-inverse);
}
.ds-btn-success:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
}

/* Size variants */
.ds-btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    min-height: 36px;
}

.ds-btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
    min-height: 52px;
}

.ds-btn-block {
    width: 100%;
}

/* ============================================================================
   CARD — .ds-card
   ============================================================================ */
.ds-card {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: all var(--duration-normal) var(--ease-out-expo);
}

.ds-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.ds-card-flat {
    box-shadow: none;
    transition: none;
}
.ds-card-flat:hover {
    box-shadow: none;
    transform: none;
}

.ds-card-glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    transition: all var(--duration-normal) var(--ease-out-expo);
}

.ds-card-glass:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}

.ds-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    gap: var(--space-3);
}

.ds-card-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.ds-card-body {
    color: var(--color-text);
}

/* ============================================================================
   KPI STAT CARD — .ds-kpi-card
   ============================================================================ */
.ds-kpi-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-out-expo);
}

.ds-kpi-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.ds-kpi-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
    text-transform: none;
    letter-spacing: 0;
}

.ds-kpi-value {
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
}

.ds-kpi-delta {
    font-size: var(--text-xs);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    width: fit-content;
    font-weight: var(--weight-semibold);
}
.ds-kpi-delta.up    { color: var(--color-success);  background: rgba(4, 120, 87, 0.12); }
.ds-kpi-delta.down  { color: var(--color-critical); background: rgba(185, 28, 28, 0.12); }
.ds-kpi-delta.flat  { color: var(--color-text-muted); background: var(--color-bg-muted); }

/* Bal oldali színes csík (kategória jelző) */
.ds-kpi-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-primary);
}
.ds-kpi-card.success::before  { background: var(--color-success); }
.ds-kpi-card.warning::before  { background: var(--color-warning); }
.ds-kpi-card.critical::before { background: var(--color-critical); }
.ds-kpi-card.accent::before   { background: var(--color-accent); }

/* ============================================================================
   INPUT — .ds-input
   ============================================================================ */
.ds-input {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    transition: all var(--duration-normal) var(--ease-out-expo);
    min-height: 44px;
}

.ds-input:hover {
    border-color: var(--color-border-strong);
}

.ds-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.ds-input::placeholder {
    color: var(--color-text-subtle);
}

.ds-input:disabled {
    background: var(--color-bg-muted);
    color: var(--color-text-subtle);
    cursor: not-allowed;
}

.ds-input.input-error,
.ds-input[aria-invalid="true"] {
    border-color: var(--color-critical);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
}

.ds-input-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.ds-input-helper {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.ds-input-helper.error {
    color: var(--color-critical);
}

/* ============================================================================
   MODAL — .ds-modal
   ============================================================================ */
.ds-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: var(--z-modal);
    animation: fadeIn var(--duration-normal) var(--ease-out-expo);
}

.ds-modal {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    max-width: 32rem;
    width: 100%;
    box-shadow: var(--shadow-xl);
    animation: slideUp var(--duration-slow) var(--ease-out-expo);
    max-height: 90vh;
    overflow-y: auto;
    color: var(--color-text);
}

.ds-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
    gap: var(--space-4);
}

.ds-modal-title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.ds-modal-close {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--text-2xl);
    line-height: 1;
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast) var(--ease-out-expo);
}

.ds-modal-close:hover {
    color: var(--color-text);
}

.ds-modal-body {
    color: var(--color-text);
}

.ds-modal-footer {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* ============================================================================
   BADGE — .ds-badge
   ============================================================================ */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    background: var(--color-bg-muted);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.ds-badge-primary {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: transparent;
}

.ds-badge-success {
    background: rgba(4, 120, 87, 0.12);
    color: var(--color-success);
    border-color: transparent;
}

.ds-badge-warning {
    background: rgba(146, 64, 14, 0.12);
    color: var(--color-warning);
    border-color: transparent;
}

.ds-badge-critical {
    background: rgba(185, 28, 28, 0.12);
    color: var(--color-critical);
    border-color: transparent;
}

.ds-badge-info {
    background: rgba(30, 64, 175, 0.12);
    color: var(--color-info);
    border-color: transparent;
}

/* ============================================================================
   CONTAINER — .ds-container
   ============================================================================ */
.ds-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-4);
}

@media (min-width: 640px)  { .ds-container { max-width: 640px;  padding-inline: var(--space-6); } }
@media (min-width: 768px)  { .ds-container { max-width: 768px; } }
@media (min-width: 1024px) { .ds-container { max-width: 1024px; padding-inline: var(--space-8); } }
@media (min-width: 1280px) { .ds-container { max-width: 1280px; } }
@media (min-width: 1536px) { .ds-container { max-width: 1440px; } }

/* ============================================================================
   SKELETON — loading state
   ============================================================================ */
.ds-skeleton {
    background: linear-gradient(90deg, var(--color-bg-muted) 0%, var(--color-bg-sunken) 50%, var(--color-bg-muted) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

/* ============================================================================
   UTILITY HELPERS (minimális, nem konfliktál a Tailwind-del)
   ============================================================================ */
.ds-text-muted   { color: var(--color-text-muted); }
.ds-text-subtle  { color: var(--color-text-subtle); }
.ds-text-primary { color: var(--color-primary); }
.ds-text-success { color: var(--color-success); }
.ds-text-warning { color: var(--color-warning); }
.ds-text-critical{ color: var(--color-critical); }