/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM CSS - Unified Softex Design System

   File: design-system.css
   Version: 2.0.0
   Date: 2026-01-31

   REQUIRES: softex-design-tokens.css (must be loaded first)

   This file provides backward compatibility for existing pages
   while using the new Softex design tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Colors - Map to Softex tokens */
    --color-primary: var(--softex-primary);
    --color-primary-light: var(--softex-primary-light);
    --color-primary-dark: var(--softex-primary-dark);
    --color-primary-subtle: var(--softex-primary-alpha-10);

    /* Responsive Breakpoints */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    /* Module Colors - Using Softex primary */
    --color-portfolio: var(--softex-primary);
    --color-workspace: var(--softex-primary-dark);
    --color-mywork: var(--softex-primary-light);
    --color-kpi: var(--softex-primary-dark);
    --color-techstack: var(--softex-primary);
    --color-admin: var(--softex-primary-dark);

    /* Semantic Colors - Map to Softex */
    --color-success: var(--softex-success);
    --color-warning: var(--softex-warning);
    --color-danger: var(--softex-danger);
    --color-info: var(--softex-info);

    /* Grays - Map to Softex text colors */
    --gray-50: var(--softex-bg-page);
    --gray-100: var(--softex-border);
    --gray-200: var(--softex-border);
    --gray-300: var(--softex-border-dark);
    --gray-400: var(--softex-text-muted);
    --gray-500: var(--softex-text-muted);
    --gray-600: var(--softex-text-secondary);
    --gray-700: var(--softex-text-secondary);
    --gray-800: var(--softex-text-primary);
    --gray-900: var(--softex-text-primary);

    /* Spacing - Map to Softex */
    --spacing-xs: var(--softex-space-2);
    --spacing-sm: var(--softex-space-4);
    --spacing-md: var(--softex-space-6);
    --spacing-lg: var(--softex-space-8);
    --spacing-xl: 48px;

    /* Typography */
    --font-family-base: var(--softex-font-body);
    --font-main: var(--softex-font-body);
    --font-body: var(--softex-font-body);
    --font-heading: var(--softex-font-heading);

    --font-size-xs: var(--softex-text-xs);
    --font-size-sm: var(--softex-text-sm);
    --font-size-base: var(--softex-text-base);
    --font-size-lg: var(--softex-text-lg);

    /* Border Radius - Map to Softex */
    --radius-sm: var(--softex-radius-sm);
    --radius-md: var(--softex-radius-md);
    --radius-lg: var(--softex-radius-lg);
    --radius-xl: var(--softex-radius-xl);
    --radius-2xl: var(--softex-radius-2xl);
    --radius-full: var(--softex-radius-full);

    /* Shadows - Map to Softex */
    --shadow-sm: var(--softex-shadow-sm);
    --shadow-md: var(--softex-shadow-md);
    --shadow-lg: var(--softex-shadow-lg);
    --shadow-xl: var(--softex-shadow-xl);

    /* Transitions */
    --transition-base: var(--softex-transition-fast);
    --transition-slow: var(--softex-transition-slow);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODULE COLOR CLASSES
═══════════════════════════════════════════════════════════════════════════ */
.module-portfolio {
    --module-color: var(--softex-primary);
    --module-gradient: linear-gradient(135deg, var(--softex-gradient-from), var(--softex-gradient-to));
}
.module-workspace {
    --module-color: var(--softex-primary-dark);
    --module-gradient: linear-gradient(135deg, var(--softex-primary), var(--softex-primary-dark));
}
.module-mywork {
    --module-color: var(--softex-primary-light);
    --module-gradient: linear-gradient(135deg, var(--softex-primary-light), var(--softex-primary));
}
.module-kpi {
    --module-color: var(--softex-primary-dark);
    --module-gradient: linear-gradient(135deg, var(--softex-primary-dark), var(--softex-primary));
}
.module-techstack {
    --module-color: var(--softex-primary);
    --module-gradient: linear-gradient(135deg, var(--softex-gradient-from), var(--softex-gradient-to));
}
.module-admin {
    --module-color: var(--softex-primary-dark);
    --module-gradient: linear-gradient(135deg, var(--softex-primary-dark), var(--softex-primary));
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL LAYOUT ELEMENTS
═══════════════════════════════════════════════════════════════════════════ */
.premium-page {
    min-height: calc(100vh - 60px);
    background: var(--softex-bg-page);
    padding: var(--softex-space-6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM CARDS - Using Softex glassmorphism
═══════════════════════════════════════════════════════════════════════════ */
.card-premium {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--softex-radius-2xl);
    box-shadow: var(--softex-shadow-card);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-premium:hover {
    box-shadow: 0 25px 30px -5px rgba(99, 102, 241, 0.15);
    transform: translateY(-8px);
}

.dark .card-premium {
    background: rgba(26, 27, 46, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION CARDS (Inner cards)
═══════════════════════════════════════════════════════════════════════════ */
.section-card {
    background: var(--softex-bg-card);
    border: 1px solid var(--softex-border);
    border-radius: var(--softex-radius-xl);
    padding: var(--softex-space-4);
    margin-bottom: var(--softex-space-4);
    transition: var(--softex-transition-fast);
}

.section-card:hover {
    box-shadow: var(--softex-shadow-md);
    border-color: var(--softex-primary-alpha-20);
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--softex-space-2);
    font-size: var(--softex-text-sm);
    font-weight: var(--softex-font-bold);
    color: var(--softex-text-primary);
    margin-bottom: var(--softex-space-4);
    padding-bottom: var(--softex-space-2);
    border-bottom: 2px solid var(--softex-border);
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--module-color, var(--softex-primary));
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM BUTTONS - PILL SHAPED (Softex Design)
═══════════════════════════════════════════════════════════════════════════ */
.btn-premium-outline {
    background: transparent;
    border: 2px solid var(--softex-border);
    color: var(--softex-text-secondary);
    border-radius: var(--softex-radius-full); /* PILL SHAPE */
    padding: 10px 24px;
    font-weight: var(--softex-font-semibold);
    transition: var(--softex-transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--softex-space-2);
    text-decoration: none;
}

.btn-premium-outline:hover {
    background: var(--softex-primary-alpha-5);
    border-color: var(--softex-primary-alpha-20);
    color: var(--softex-primary);
}

.btn-premium-danger-outline {
    background: transparent;
    border: 2px solid var(--softex-danger);
    color: var(--softex-danger);
    border-radius: var(--softex-radius-full); /* PILL SHAPE */
    padding: 10px 24px;
    font-weight: var(--softex-font-semibold);
    transition: var(--softex-transition-fast);
}

.btn-premium-danger-outline:hover {
    background: var(--softex-danger);
    color: var(--softex-text-inverse);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM FORMS - PILL SHAPED INPUTS
═══════════════════════════════════════════════════════════════════════════ */
.form-premium-label {
    font-size: var(--softex-text-sm);
    font-weight: var(--softex-font-extrabold);
    color: var(--softex-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--softex-space-2);
    display: block;
}

textarea.form-premium-control {
    border-radius: var(--softex-radius-xl); /* Rounded, not pill for textarea */
    min-height: 100px;
    resize: vertical;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGES - PILL SHAPED
═══════════════════════════════════════════════════════════════════════════ */
.badge-premium {
    padding: 6px 14px;
    font-size: var(--softex-text-xs);
    font-weight: var(--softex-font-bold);
    border-radius: var(--softex-radius-full); /* PILL SHAPE */
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY HELPERS
═══════════════════════════════════════════════════════════════════════════ */
.text-gradient {
    background: var(--softex-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: var(--softex-font-extrabold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMBS
═══════════════════════════════════════════════════════════════════════════ */
.breadcrumb-premium {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    font-size: var(--softex-text-sm);
    gap: var(--softex-space-2);
    align-items: center;
}

.breadcrumb-premium-item {
    display: flex;
    align-items: center;
    gap: var(--softex-space-2);
    color: var(--softex-text-muted);
}

.breadcrumb-premium-link {
    color: var(--softex-text-muted);
    text-decoration: none;
    font-weight: var(--softex-font-semibold);
    transition: var(--softex-transition-fast);
}

.breadcrumb-premium-link:hover {
    color: var(--softex-primary);
}

.breadcrumb-premium-separator {
    color: var(--softex-border-dark);
    font-size: 0.75rem;
}

.breadcrumb-premium-item.active {
    color: var(--softex-text-primary);
    font-weight: var(--softex-font-bold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOFTEX UI COMPONENTS (Replacing old Nifty)
═══════════════════════════════════════════════════════════════════════════ */

/* Base Text Colors */
.clr-text-primary { color: var(--softex-text-primary); }
.text-xxs { font-size: 0.65rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS & CONTAINERS
═══════════════════════════════════════════════════════════════════════════ */
.softex-mode-card {
    background: var(--softex-bg-card);
    border: 1px solid var(--softex-border);
    border-radius: var(--softex-radius-xl);
    box-shadow: var(--softex-shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.softex-mode-card:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04);
}

.border-top-custom {
    border-top: 4px solid var(--border-top-color, var(--softex-primary)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AVATARS
═══════════════════════════════════════════════════════════════════════════ */
.softex-avatar-legacy {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--softex-bg-input);
    color: var(--softex-text-secondary);
    font-weight: var(--softex-font-bold);
    border-radius: 10px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS - LEGACY SUPPORT (Pill Shaped)
═══════════════════════════════════════════════════════════════════════════ */
.softex-legacy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: var(--softex-radius-full); /* ALWAYS PILL */
    font-weight: var(--softex-font-bold);
    font-size: var(--softex-text-sm);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}

.softex-legacy-btn-primary {
    background: var(--softex-primary);
    color: var(--softex-text-inverse);
    box-shadow: var(--softex-shadow-primary);
}

.softex-legacy-btn-primary:hover {
    background: var(--softex-primary-dark);
    color: var(--softex-text-inverse);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--softex-primary-rgb), 0.3);
}

.softex-legacy-btn-outline-primary {
    background: var(--softex-bg-card);
    border-color: var(--softex-primary);
    color: var(--softex-primary);
}

.softex-legacy-btn-outline-primary:hover {
    background: var(--softex-primary-alpha-5);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABS (Pill Shaped)
═══════════════════════════════════════════════════════════════════════════ */
.softex-legacy-tabs {
    display: inline-flex;
    background: var(--softex-bg-input);
    padding: 4px;
    border-radius: var(--softex-radius-xl);
    gap: 4px;
}

.softex-legacy-tab-item {
    padding: 10px 20px;
    border-radius: var(--softex-radius-lg);
    color: var(--softex-text-secondary);
    font-weight: var(--softex-font-bold);
    font-size: var(--softex-text-sm);
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    background: transparent;
}

.softex-legacy-tab-item:hover {
    color: var(--softex-primary);
    background: rgba(255,255,255,0.5);
}

.softex-legacy-tab-item.active {
    background: var(--softex-bg-card);
    color: var(--softex-primary);
    box-shadow: var(--softex-shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM ELEMENTS - PILL SHAPED
═══════════════════════════════════════════════════════════════════════════ */
.softex-legacy-input,
.softex-legacy-select {
    border-radius: var(--softex-radius-full); /* PILL SHAPE */
    border: 1px solid var(--softex-border-dark);
    padding: 12px 20px;
    font-size: var(--softex-text-base);
    background-color: var(--softex-bg-input);
    box-shadow: var(--softex-shadow-sm);
    transition: all 0.2s;
    width: 100%;
    outline: none;
}

.softex-legacy-input:focus,
.softex-legacy-select:focus {
    border-color: var(--softex-primary);
    box-shadow: 0 0 0 4px var(--softex-primary-alpha-10);
}

textarea.softex-legacy-input {
    border-radius: var(--softex-radius-xl); /* Rounded, not pill for textarea */
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATUS PILLS
═══════════════════════════════════════════════════════════════════════════ */
.softex-status-pill-legacy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--softex-space-2);
    padding: 6px 16px;
    border-radius: var(--softex-radius-full);
    font-size: var(--softex-text-xs);
    font-weight: var(--softex-font-extrabold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 110px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.softex-status-pill-legacy i {
    font-size: 5px;
}

/* Status Variations */
.softex-status-active {
    background-color: var(--softex-success-bg);
    color: var(--softex-success);
    border-color: rgba(21, 128, 61, 0.2);
}

.softex-status-planning {
    background-color: var(--softex-info-bg);
    color: var(--softex-info);
    border-color: rgba(29, 78, 216, 0.2);
}

.softex-status-completed {
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--softex-gradient-from);
    border-color: rgba(99, 102, 241, 0.2);
}

.softex-status-risk {
    background-color: var(--softex-warning-bg);
    color: var(--softex-warning);
    border-color: rgba(194, 65, 12, 0.2);
}

.softex-status-offtrack {
    background-color: var(--softex-danger-bg);
    color: var(--softex-danger);
    border-color: rgba(220, 38, 38, 0.2);
}

.softex-status-onhold {
    background-color: var(--softex-bg-input);
    color: var(--softex-text-muted);
    border-color: rgba(156, 163, 175, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BACKWARD COMPATIBILITY - Map old Nifty classes to Softex
═══════════════════════════════════════════════════════════════════════════ */

/* Map nifty-card to softex style (Glassmorphism) */
.nifty-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--softex-radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--softex-shadow-card);
    padding: var(--softex-space-6);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .nifty-card {
    background: rgba(26, 27, 46, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.nifty-card:hover {
    box-shadow: 0 25px 30px -5px rgba(99, 102, 241, 0.15);
    transform: translateY(-8px);
}

/* Map nifty-btn to pill shape */
.nifty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: var(--softex-radius-full); /* ALWAYS PILL */
    font-weight: var(--softex-font-bold);
    font-size: var(--softex-text-sm);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}

.nifty-btn-primary {
    background: var(--softex-primary);
    color: var(--softex-text-inverse);
    box-shadow: var(--softex-shadow-primary);
}

.nifty-btn-primary:hover {
    background: var(--softex-primary-dark);
    color: var(--softex-text-inverse);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--softex-primary-rgb), 0.3);
}

.nifty-btn-outline-primary {
    background: var(--softex-bg-card);
    border-color: var(--softex-primary);
    color: var(--softex-primary);
}

.nifty-btn-outline-primary:hover {
    background: var(--softex-primary-alpha-5);
    transform: translateY(-1px);
}

/* Map nifty-input to pill shape */
.nifty-input, .nifty-select {
    border-radius: var(--softex-radius-full); /* PILL SHAPE */
    border: 1px solid var(--softex-border-dark);
    padding: 12px 20px;
    font-size: var(--softex-text-base);
    background-color: var(--softex-bg-input);
    box-shadow: var(--softex-shadow-sm);
    transition: all 0.2s;
}

.nifty-input:focus, .nifty-select:focus {
    border-color: var(--softex-primary);
    box-shadow: 0 0 0 4px var(--softex-primary-alpha-10);
    outline: none;
}

/* Map nifty-tabs */
.nifty-tabs {
    display: inline-flex;
    background: var(--softex-bg-input);
    padding: 4px;
    border-radius: var(--softex-radius-xl);
    gap: 4px;
}

.nifty-tab-item {
    padding: 10px 20px;
    border-radius: var(--softex-radius-lg);
    color: var(--softex-text-secondary);
    font-weight: var(--softex-font-bold);
    font-size: var(--softex-text-sm);
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    background: transparent;
}

.nifty-tab-item:hover {
    color: var(--softex-primary);
    background: rgba(255,255,255,0.5);
}

.nifty-tab-item.active {
    background: var(--softex-bg-card);
    color: var(--softex-primary);
    box-shadow: var(--softex-shadow-sm);
}

/* Map nifty-avatar */
.nifty-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--softex-bg-input);
    color: var(--softex-text-secondary);
    font-weight: var(--softex-font-bold);
    border-radius: 10px;
    flex-shrink: 0;
}

/* Map nifty-status-pill */
.nifty-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--softex-space-2);
    padding: 6px 16px;
    border-radius: var(--softex-radius-full);
    font-size: var(--softex-text-xs);
    font-weight: var(--softex-font-extrabold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 110px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.nifty-status-pill i {
    font-size: 5px;
}

.nifty-status-active {
    background-color: var(--softex-success-bg);
    color: var(--softex-success);
    border-color: rgba(21, 128, 61, 0.2);
}

.nifty-status-planning {
    background-color: var(--softex-info-bg);
    color: var(--softex-info);
    border-color: rgba(29, 78, 216, 0.2);
}

.nifty-status-completed {
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--softex-gradient-from);
    border-color: rgba(99, 102, 241, 0.2);
}

.nifty-status-risk {
    background-color: var(--softex-warning-bg);
    color: var(--softex-warning);
    border-color: rgba(194, 65, 12, 0.2);
}

.nifty-status-offtrack {
    background-color: var(--softex-danger-bg);
    color: var(--softex-danger);
    border-color: rgba(220, 38, 38, 0.2);
}

.nifty-status-onhold {
    background-color: var(--softex-bg-input);
    color: var(--softex-text-muted);
    border-color: rgba(156, 163, 175, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEPRECATED NIFTY VARIABLES - REMOVED (now in nifty-core.css only)
   For backward compatibility, see: wwwroot/css/nifty-core.css
═══════════════════════════════════════════════════════════════════════════ */