/* ==============================================
   KRYSTAL COMPANY APPS - UNIFIED DESIGN SYSTEM
   ============================================== */

:root {
    /* === PRIMARY BRAND COLORS === */
    --krystal-primary: #1e3d59;        /* Deep Navy Blue */
    --krystal-primary-light: #2d5a87;  /* Lighter Navy */
    --krystal-primary-dark: #0f1c2e;   /* Darker Navy */

    /* === SECONDARY COLORS === */
    --krystal-gold: #d4af37;           /* Premium Gold */
    --krystal-gold-light: #e6c758;     /* Light Gold */
    --krystal-gold-dark: #b8941f;      /* Dark Gold */

    /* === ACCENT COLORS === */
    --krystal-blue: #4a90e2;           /* Bright Blue */
    --krystal-teal: #17a2b8;           /* Professional Teal */
    --krystal-success: #28a745;        /* Success Green */
    --krystal-warning: #ffc107;        /* Warning Yellow */
    --krystal-danger: #dc3545;         /* Error Red */

    /* === NEUTRAL COLORS === */
    --krystal-white: #ffffff;
    --krystal-light: #f8f9fa;
    --krystal-lighter: #e9ecef;
    --krystal-gray: #6c757d;
    --krystal-dark-gray: #495057;
    --krystal-dark: #212529;

    /* === BACKGROUND COLORS === */
    --krystal-bg-primary: #f5f6fa;     /* Main background */
    --krystal-bg-card: #ffffff;        /* Card background */
    --krystal-bg-sidebar: #1e3d59;     /* Sidebar background */
    --krystal-bg-navbar: #1e3d59;      /* Navbar background */

    /* === TYPOGRAPHY === */
    --krystal-font-family: 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --krystal-font-size-base: 16px;
    --krystal-font-size-sm: 14px;
    --krystal-font-size-lg: 18px;
    --krystal-font-size-xl: 20px;
    --krystal-font-size-xxl: 24px;

    --krystal-font-weight-light: 300;
    --krystal-font-weight-normal: 400;
    --krystal-font-weight-medium: 500;
    --krystal-font-weight-semibold: 600;
    --krystal-font-weight-bold: 700;

    --krystal-line-height-base: 1.6;
    --krystal-line-height-sm: 1.4;
    --krystal-line-height-lg: 1.8;

    /* === SPACING === */
    --krystal-spacing-xs: 0.25rem;     /* 4px */
    --krystal-spacing-sm: 0.5rem;      /* 8px */
    --krystal-spacing-md: 1rem;        /* 16px */
    --krystal-spacing-lg: 1.5rem;      /* 24px */
    --krystal-spacing-xl: 2rem;        /* 32px */
    --krystal-spacing-xxl: 3rem;       /* 48px */

    /* === BORDERS & RADIUS === */
    --krystal-border-radius-sm: 4px;
    --krystal-border-radius: 8px;
    --krystal-border-radius-lg: 12px;
    --krystal-border-radius-xl: 16px;
    --krystal-border-width: 1px;
    --krystal-border-color: #dee2e6;

    /* === SHADOWS === */
    --krystal-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --krystal-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    --krystal-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
    --krystal-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);

    /* === TRANSITIONS === */
    --krystal-transition-fast: 0.15s ease;
    --krystal-transition: 0.3s ease;
    --krystal-transition-slow: 0.5s ease;
}

/* ==============================================
   GLOBAL STYLES
   ============================================== */

* {
    box-sizing: border-box;
}

body {
    font-family: var(--krystal-font-family);
    font-size: var(--krystal-font-size-base);
    font-weight: var(--krystal-font-weight-normal);
    line-height: var(--krystal-line-height-base);
    color: var(--krystal-dark);
    background-color: var(--krystal-bg-primary);
    margin: 0;
    padding: 0;
}

/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ==============================================
   TYPOGRAPHY
   ============================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--krystal-font-family);
    font-weight: var(--krystal-font-weight-semibold);
    line-height: var(--krystal-line-height-sm);
    color: var(--krystal-primary);
    margin-top: 0;
    margin-bottom: var(--krystal-spacing-md);
}

h1 { font-size: 2.5rem; font-weight: var(--krystal-font-weight-bold); }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: var(--krystal-spacing-md);
    color: var(--krystal-dark-gray);
}

a {
    color: var(--krystal-blue);
    text-decoration: none;
    transition: var(--krystal-transition-fast);
}

a:hover {
    color: var(--krystal-primary);
    text-decoration: underline;
}

/* ==============================================
   NAVIGATION
   ============================================== */

.krystal-navbar {
    background: linear-gradient(135deg, var(--krystal-primary) 0%, var(--krystal-primary-light) 100%);
    box-shadow: var(--krystal-shadow);
    padding: var(--krystal-spacing-sm) 0;
}

.krystal-navbar .navbar-brand {
    font-size: var(--krystal-font-size-xl);
    font-weight: var(--krystal-font-weight-bold);
    color: var(--krystal-white) !important;
    text-decoration: none;
}

.krystal-navbar .navbar-brand:hover {
    color: var(--krystal-gold-light) !important;
}

.krystal-navbar .nav-link {
    color: var(--krystal-white) !important;
    font-weight: var(--krystal-font-weight-medium);
    padding: var(--krystal-spacing-sm) var(--krystal-spacing-md);
    transition: var(--krystal-transition);
}

.krystal-navbar .nav-link:hover {
    color: var(--krystal-gold-light) !important;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--krystal-border-radius);
}

/* ==============================================
   SIDEBAR
   ============================================== */

.krystal-sidebar {
    background: linear-gradient(180deg, var(--krystal-primary) 0%, var(--krystal-primary-dark) 100%);
    min-height: 100vh;
    box-shadow: var(--krystal-shadow-lg);
    padding: var(--krystal-spacing-lg);
}

.krystal-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.8);
    font-weight: var(--krystal-font-weight-medium);
    padding: var(--krystal-spacing-md);
    margin-bottom: var(--krystal-spacing-xs);
    border-radius: var(--krystal-border-radius);
    transition: var(--krystal-transition);
    display: flex;
    align-items: center;
}

.krystal-sidebar .nav-link:hover {
    color: var(--krystal-white);
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.krystal-sidebar .nav-link.active {
    color: var(--krystal-white);
    background: linear-gradient(135deg, var(--krystal-gold) 0%, var(--krystal-gold-light) 100%);
    box-shadow: var(--krystal-shadow);
}

.krystal-sidebar .nav-link i {
    margin-right: var(--krystal-spacing-sm);
    width: 20px;
}

/* ==============================================
   CARDS
   ============================================== */

.krystal-card {
    background: var(--krystal-bg-card);
    border: none;
    border-radius: var(--krystal-border-radius-lg);
    box-shadow: var(--krystal-shadow);
    transition: var(--krystal-transition);
    overflow: hidden;
}

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

.krystal-card-header {
    background: linear-gradient(135deg, var(--krystal-light) 0%, var(--krystal-lighter) 100%);
    border-bottom: var(--krystal-border-width) solid var(--krystal-border-color);
    padding: var(--krystal-spacing-lg);
    font-weight: var(--krystal-font-weight-semibold);
    color: var(--krystal-primary);
}

.krystal-card-body {
    padding: var(--krystal-spacing-lg);
}

/* ==============================================
   BUTTONS
   ============================================== */

.krystal-btn {
    font-family: var(--krystal-font-family);
    font-weight: var(--krystal-font-weight-medium);
    border-radius: var(--krystal-border-radius);
    padding: var(--krystal-spacing-sm) var(--krystal-spacing-lg);
    transition: var(--krystal-transition);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.krystal-btn-primary {
    background: linear-gradient(135deg, var(--krystal-primary) 0%, var(--krystal-primary-light) 100%);
    color: var(--krystal-white);
}

.krystal-btn-primary:hover {
    background: linear-gradient(135deg, var(--krystal-primary-dark) 0%, var(--krystal-primary) 100%);
    transform: translateY(-1px);
    box-shadow: var(--krystal-shadow);
}

.krystal-btn-gold {
    background: linear-gradient(135deg, var(--krystal-gold) 0%, var(--krystal-gold-light) 100%);
    color: var(--krystal-dark);
}

.krystal-btn-gold:hover {
    background: linear-gradient(135deg, var(--krystal-gold-dark) 0%, var(--krystal-gold) 100%);
    transform: translateY(-1px);
    box-shadow: var(--krystal-shadow);
}

.krystal-btn-outline {
    background: transparent;
    border: 2px solid var(--krystal-primary);
    color: var(--krystal-primary);
}

.krystal-btn-outline:hover {
    background: var(--krystal-primary);
    color: var(--krystal-white);
}

.krystal-btn i {
    margin-right: var(--krystal-spacing-xs);
}

/* ==============================================
   FORMS
   ============================================== */

.krystal-form-control {
    font-family: var(--krystal-font-family);
    border: var(--krystal-border-width) solid var(--krystal-border-color);
    border-radius: var(--krystal-border-radius);
    padding: var(--krystal-spacing-sm) var(--krystal-spacing-md);
    transition: var(--krystal-transition);
    background-color: var(--krystal-white);
}

.krystal-form-control:focus {
    border-color: var(--krystal-blue);
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
    outline: none;
}

.krystal-form-label {
    font-weight: var(--krystal-font-weight-medium);
    color: var(--krystal-primary);
    margin-bottom: var(--krystal-spacing-xs);
}

/* ==============================================
   ALERTS
   ============================================== */

.krystal-alert {
    border: none;
    border-radius: var(--krystal-border-radius);
    padding: var(--krystal-spacing-md);
    margin-bottom: var(--krystal-spacing-md);
    font-weight: var(--krystal-font-weight-medium);
}

.krystal-alert-success {
    background-color: rgba(40, 167, 69, 0.1);
    color: var(--krystal-success);
    border-left: 4px solid var(--krystal-success);
}

.krystal-alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: #856404;
    border-left: 4px solid var(--krystal-warning);
}

.krystal-alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--krystal-danger);
    border-left: 4px solid var(--krystal-danger);
}

.krystal-alert-info {
    background-color: rgba(23, 162, 184, 0.1);
    color: var(--krystal-teal);
    border-left: 4px solid var(--krystal-teal);
}

/* ==============================================
   TABLES
   ============================================== */

.krystal-table {
    width: 100%;
    background: var(--krystal-white);
    border-radius: var(--krystal-border-radius);
    overflow: hidden;
    box-shadow: var(--krystal-shadow);
}

.krystal-table th {
    background: var(--krystal-primary);
    color: var(--krystal-white);
    font-weight: var(--krystal-font-weight-semibold);
    padding: var(--krystal-spacing-md);
    text-align: left;
}

.krystal-table td {
    padding: var(--krystal-spacing-md);
    border-bottom: 1px solid var(--krystal-lighter);
}

.krystal-table tbody tr:hover {
    background-color: rgba(30, 61, 89, 0.05);
}

/* ==============================================
   BADGES
   ============================================== */

.krystal-badge {
    display: inline-block;
    padding: var(--krystal-spacing-xs) var(--krystal-spacing-sm);
    font-size: var(--krystal-font-size-sm);
    font-weight: var(--krystal-font-weight-medium);
    border-radius: var(--krystal-border-radius);
    text-align: center;
}

.krystal-badge-primary {
    background-color: var(--krystal-primary);
    color: var(--krystal-white);
}

.krystal-badge-success {
    background-color: var(--krystal-success);
    color: var(--krystal-white);
}

.krystal-badge-warning {
    background-color: var(--krystal-warning);
    color: var(--krystal-dark);
}

.krystal-badge-danger {
    background-color: var(--krystal-danger);
    color: var(--krystal-white);
}

/* ==============================================
   UTILITIES
   ============================================== */

.krystal-text-primary { color: var(--krystal-primary) !important; }
.krystal-text-gold { color: var(--krystal-gold) !important; }
.krystal-text-muted { color: var(--krystal-gray) !important; }

.krystal-bg-primary { background-color: var(--krystal-primary) !important; }
.krystal-bg-gold { background-color: var(--krystal-gold) !important; }
.krystal-bg-light { background-color: var(--krystal-light) !important; }

.krystal-shadow-sm { box-shadow: var(--krystal-shadow-sm) !important; }
.krystal-shadow { box-shadow: var(--krystal-shadow) !important; }
.krystal-shadow-lg { box-shadow: var(--krystal-shadow-lg) !important; }

.krystal-rounded { border-radius: var(--krystal-border-radius) !important; }
.krystal-rounded-lg { border-radius: var(--krystal-border-radius-lg) !important; }

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

@media (max-width: 768px) {
    .krystal-sidebar {
        position: fixed;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100vh;
        z-index: 1000;
        transition: var(--krystal-transition);
    }

    .krystal-sidebar.show {
        left: 0;
    }

    .krystal-card {
        margin-bottom: var(--krystal-spacing-lg);
    }

    .krystal-table {
        font-size: var(--krystal-font-size-sm);
    }
}

/* ==============================================
   ANIMATIONS
   ============================================== */

@keyframes krystal-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.krystal-fade-in {
    animation: krystal-fade-in 0.6s ease-out;
}

@keyframes krystal-slide-in {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.krystal-slide-in {
    animation: krystal-slide-in 0.4s ease-out;
}

/* ==============================================
   BRAND LOGO STYLES
   ============================================== */

.krystal-logo {
    display: inline-flex;
    align-items: center;
    font-weight: var(--krystal-font-weight-bold);
    color: var(--krystal-primary);
    text-decoration: none;
}

.krystal-logo i {
    margin-right: var(--krystal-spacing-sm);
    color: var(--krystal-gold);
}

.krystal-logo:hover {
    color: var(--krystal-primary-light);
}