/*
 * Windows 95 Retro Component Library
 * Complete UI components for consistent retro styling
 */

/* =============================================================================
   CORE VARIABLES AND BASE STYLES
   ============================================================================= */
:root {
    --retro-gray: #c0c0c0;
    --retro-dark-gray: #808080;
    --retro-light-gray: #dfdfdf;
    --retro-shadow: #404040;
    --retro-blue: #000080;
    --retro-light-blue: #c1d3f3;
    --retro-white: #ffffff;
    --retro-black: #000000;
    --retro-font: "MS Sans Serif", Tahoma, sans-serif;
}

/* =============================================================================
   RETRO CONTAINERS AND PANELS
   ============================================================================= */
.retro-panel {
    background: var(--retro-gray) !important;
    border: 2px solid !important;
    border-color: var(--retro-light-gray) var(--retro-shadow) var(--retro-shadow) var(--retro-light-gray) !important;
    padding: 16px !important;
    font-family: var(--retro-font) !important;
}

.retro-panel-inset {
    background: var(--retro-white) !important;
    border: 2px solid !important;
    border-color: var(--retro-shadow) var(--retro-light-gray) var(--retro-light-gray) var(--retro-shadow) !important;
    padding: 8px !important;
    font-family: var(--retro-font) !important;
}

.retro-window {
    background: var(--retro-gray) !important;
    border: 2px solid !important;
    border-color: var(--retro-light-gray) var(--retro-shadow) var(--retro-shadow) var(--retro-light-gray) !important;
    margin-bottom: 16px !important;
}

.retro-window-title {
    background: var(--retro-blue) !important;
    color: var(--retro-white) !important;
    font-family: var(--retro-font) !important;
    font-weight: bold !important;
    padding: 4px 8px !important;
    margin: -2px -2px 8px -2px !important;
    font-size: 14px !important;
}

.retro-window-content {
    padding: 16px !important;
}

/* =============================================================================
   RETRO BUTTONS
   ============================================================================= */
.retro-btn {
    background: var(--retro-gray) !important;
    border: 2px solid !important;
    border-color: var(--retro-light-gray) var(--retro-shadow) var(--retro-shadow) var(--retro-light-gray) !important;
    color: var(--retro-black) !important;
    font-family: var(--retro-font) !important;
    font-size: 14px !important;
    padding: 4px 16px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.retro-btn:hover {
    background: #b0b0b0 !important;
    color: var(--retro-black) !important;
    text-decoration: none !important;
}

.retro-btn:active {
    border-color: var(--retro-shadow) var(--retro-light-gray) var(--retro-light-gray) var(--retro-shadow) !important;
}

.retro-btn-primary {
    background: var(--retro-blue) !important;
    color: var(--retro-white) !important;
    border-color: #0000a0 #6060ff #6060ff #0000a0 !important;
}

.retro-btn-primary:hover {
    background: #0000a0 !important;
    color: var(--retro-white) !important;
}

.retro-btn-success {
    background: #008000 !important;
    color: var(--retro-white) !important;
    border-color: #006000 #60ff60 #60ff60 #006000 !important;
}

.retro-btn-danger {
    background: #800000 !important;
    color: var(--retro-white) !important;
    border-color: #600000 #ff6060 #ff6060 #600000 !important;
}

.retro-btn-small {
    font-size: 12px !important;
    padding: 2px 8px !important;
}

.retro-btn-large {
    font-size: 16px !important;
    padding: 8px 24px !important;
}

/* =============================================================================
   RETRO TABLES
   ============================================================================= */
.retro-table {
    border: 2px solid !important;
    border-color: var(--retro-shadow) var(--retro-light-gray) var(--retro-light-gray) var(--retro-shadow) !important;
    background: var(--retro-white) !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-family: var(--retro-font) !important;
}

.retro-table th {
    background: var(--retro-blue) !important;
    color: var(--retro-white) !important;
    font-family: var(--retro-font) !important;
    font-weight: normal !important;
    padding: 4px 8px !important;
    border: 2px solid #000060 !important;
    font-size: 14px !important;
}

.retro-table td {
    background: var(--retro-white) !important;
    border: 1px solid var(--retro-dark-gray) !important;
    padding: 4px 8px !important;
    font-family: var(--retro-font) !important;
    font-size: 14px !important;
}

.retro-table tr:hover td {
    background: var(--retro-light-blue) !important;
}

.retro-table-striped tbody tr:nth-child(even) td {
    background: #f8f8f8 !important;
}

/* =============================================================================
   RETRO FORMS
   ============================================================================= */
.retro-form-group {
    margin-bottom: 12px !important;
}

.retro-label {
    font-family: var(--retro-font) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    color: var(--retro-black) !important;
    display: block !important;
    margin-bottom: 4px !important;
}

.retro-input {
    background: var(--retro-white) !important;
    border: 2px solid !important;
    border-color: var(--retro-shadow) var(--retro-light-gray) var(--retro-light-gray) var(--retro-shadow) !important;
    font-family: var(--retro-font) !important;
    font-size: 14px !important;
    padding: 2px 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.retro-input:focus {
    outline: none !important;
    background: var(--retro-white) !important;
}

.retro-textarea {
    background: var(--retro-white) !important;
    border: 2px solid !important;
    border-color: var(--retro-shadow) var(--retro-light-gray) var(--retro-light-gray) var(--retro-shadow) !important;
    font-family: var(--retro-font) !important;
    font-size: 14px !important;
    padding: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical !important;
}

.retro-select {
    background: var(--retro-white) !important;
    border: 2px solid !important;
    border-color: var(--retro-shadow) var(--retro-light-gray) var(--retro-light-gray) var(--retro-shadow) !important;
    font-family: var(--retro-font) !important;
    font-size: 14px !important;
    padding: 2px !important;
    width: 100% !important;
}

.retro-checkbox {
    margin-right: 8px !important;
}

.retro-radio {
    margin-right: 8px !important;
}

/* =============================================================================
   RETRO NAVIGATION AND BREADCRUMBS
   ============================================================================= */
.retro-breadcrumb {
    background: var(--retro-gray) !important;
    border: 2px solid !important;
    border-color: var(--retro-light-gray) var(--retro-shadow) var(--retro-shadow) var(--retro-light-gray) !important;
    padding: 4px 8px !important;
    margin-bottom: 8px !important;
    font-family: var(--retro-font) !important;
    font-size: 14px !important;
}

.retro-breadcrumb a {
    color: var(--retro-blue) !important;
    text-decoration: none !important;
}

.retro-breadcrumb a:hover {
    text-decoration: underline !important;
}

.retro-nav-tabs {
    border-bottom: 2px solid var(--retro-shadow) !important;
    margin-bottom: 8px !important;
}

.retro-nav-tab {
    background: var(--retro-gray) !important;
    border: 2px solid !important;
    border-color: var(--retro-light-gray) var(--retro-shadow) var(--retro-shadow) var(--retro-light-gray) !important;
    border-bottom: none !important;
    padding: 4px 12px !important;
    margin-right: 2px !important;
    display: inline-block !important;
    font-family: var(--retro-font) !important;
    font-size: 14px !important;
    color: var(--retro-black) !important;
    text-decoration: none !important;
}

.retro-nav-tab.active {
    background: var(--retro-white) !important;
    border-bottom: 2px solid var(--retro-white) !important;
    margin-bottom: -2px !important;
}

.retro-nav-tab:hover {
    background: #b0b0b0 !important;
    color: var(--retro-black) !important;
    text-decoration: none !important;
}

/* =============================================================================
   RETRO PAGINATION
   ============================================================================= */
.retro-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 16px !important;
    gap: 4px !important;
}

.retro-page-link {
    background: var(--retro-gray) !important;
    border: 2px solid !important;
    border-color: var(--retro-light-gray) var(--retro-shadow) var(--retro-shadow) var(--retro-light-gray) !important;
    color: var(--retro-black) !important;
    font-family: var(--retro-font) !important;
    padding: 2px 8px !important;
    text-decoration: none !important;
    display: inline-block !important;
    min-width: 24px !important;
    text-align: center !important;
}

.retro-page-link:hover {
    background: #b0b0b0 !important;
    color: var(--retro-black) !important;
    text-decoration: none !important;
}

.retro-page-link.active {
    background: var(--retro-blue) !important;
    color: var(--retro-white) !important;
    border-color: #000040 #8080ff #8080ff #000040 !important;
}

.retro-page-link.disabled {
    background: #e0e0e0 !important;
    color: var(--retro-dark-gray) !important;
    cursor: not-allowed !important;
}

/* =============================================================================
   RETRO ALERTS AND MESSAGES
   ============================================================================= */
.retro-alert {
    border: 2px solid !important;
    border-color: var(--retro-light-gray) var(--retro-shadow) var(--retro-shadow) var(--retro-light-gray) !important;
    padding: 8px 12px !important;
    margin-bottom: 16px !important;
    font-family: var(--retro-font) !important;
    font-size: 14px !important;
}

.retro-alert-info {
    background: #e6f3ff !important;
    color: #003d82 !important;
}

.retro-alert-success {
    background: #e6ffe6 !important;
    color: #004000 !important;
}

.retro-alert-warning {
    background: #fff3e6 !important;
    color: #804000 !important;
}

.retro-alert-danger {
    background: #ffe6e6 !important;
    color: #800000 !important;
}

/* =============================================================================
   RETRO CARDS (Alternative to Bootstrap cards)
   ============================================================================= */
.retro-card {
    background: var(--retro-white) !important;
    border: 2px solid !important;
    border-color: var(--retro-shadow) var(--retro-light-gray) var(--retro-light-gray) var(--retro-shadow) !important;
    margin-bottom: 16px !important;
}

.retro-card-header {
    background: var(--retro-gray) !important;
    border-bottom: 2px solid var(--retro-shadow) !important;
    padding: 8px 12px !important;
    font-family: var(--retro-font) !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

.retro-card-body {
    padding: 12px !important;
    font-family: var(--retro-font) !important;
    font-size: 14px !important;
}

.retro-card-footer {
    background: var(--retro-gray) !important;
    border-top: 2px solid var(--retro-shadow) !important;
    padding: 8px 12px !important;
    font-family: var(--retro-font) !important;
    font-size: 12px !important;
}

/* =============================================================================
   RETRO LIST GROUPS
   ============================================================================= */
.retro-list-group {
    border: 2px solid !important;
    border-color: var(--retro-shadow) var(--retro-light-gray) var(--retro-light-gray) var(--retro-shadow) !important;
}

.retro-list-item {
    background: var(--retro-white) !important;
    border-bottom: 1px solid var(--retro-dark-gray) !important;
    padding: 8px 12px !important;
    font-family: var(--retro-font) !important;
    font-size: 14px !important;
    color: var(--retro-black) !important;
    text-decoration: none !important;
    display: block !important;
}

.retro-list-item:hover {
    background: var(--retro-light-blue) !important;
    color: var(--retro-black) !important;
    text-decoration: none !important;
}

.retro-list-item:last-child {
    border-bottom: none !important;
}

.retro-list-item.active {
    background: var(--retro-blue) !important;
    color: var(--retro-white) !important;
}

/* =============================================================================
   RETRO UTILITIES
   ============================================================================= */
.retro-text-center {
    text-align: center !important;
}

.retro-text-left {
    text-align: left !important;
}

.retro-text-right {
    text-align: right !important;
}

.retro-font {
    font-family: var(--retro-font) !important;
}

.retro-text-small {
    font-size: 12px !important;
}

.retro-text-large {
    font-size: 16px !important;
}

.retro-mb-1 { margin-bottom: 4px !important; }
.retro-mb-2 { margin-bottom: 8px !important; }
.retro-mb-3 { margin-bottom: 12px !important; }
.retro-mb-4 { margin-bottom: 16px !important; }

.retro-mt-1 { margin-top: 4px !important; }
.retro-mt-2 { margin-top: 8px !important; }
.retro-mt-3 { margin-top: 12px !important; }
.retro-mt-4 { margin-top: 16px !important; }

.retro-p-1 { padding: 4px !important; }
.retro-p-2 { padding: 8px !important; }
.retro-p-3 { padding: 12px !important; }
.retro-p-4 { padding: 16px !important; }

/* =============================================================================
   RETRO RESPONSIVE GRID (Simple alternative to Bootstrap grid)
   ============================================================================= */
.retro-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -8px !important;
}

.retro-col {
    padding: 0 8px !important;
    flex: 1 !important;
}

.retro-col-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; }
.retro-col-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
.retro-col-3 { flex: 0 0 25% !important; max-width: 25% !important; }
.retro-col-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
.retro-col-6 { flex: 0 0 50% !important; max-width: 50% !important; }
.retro-col-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
.retro-col-9 { flex: 0 0 75% !important; max-width: 75% !important; }
.retro-col-12 { flex: 0 0 100% !important; max-width: 100% !important; }

@media (max-width: 768px) {
    .retro-col,
    .retro-col-1,
    .retro-col-2,
    .retro-col-3,
    .retro-col-4,
    .retro-col-6,
    .retro-col-8,
    .retro-col-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* =============================================================================
   RETRO FORM LAYOUTS
   ============================================================================= */
.retro-form-horizontal .retro-form-group {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}

.retro-form-horizontal .retro-label {
    flex: 0 0 25% !important;
    margin-bottom: 0 !important;
    margin-right: 12px !important;
}

.retro-form-horizontal .retro-input,
.retro-form-horizontal .retro-select,
.retro-form-horizontal .retro-textarea {
    flex: 1 !important;
}

/* =============================================================================
   FORM WRAPPER CLASSES (for template tag compatibility)
   ============================================================================= */
.retro-input-wrapper input,
.retro-input-wrapper input[type="text"],
.retro-input-wrapper input[type="number"],
.retro-input-wrapper input[type="date"],
.retro-input-wrapper input[type="email"],
.retro-input-wrapper input[type="password"] {
    background: var(--retro-white) !important;
    border: 2px solid !important;
    border-color: var(--retro-shadow) var(--retro-light-gray) var(--retro-light-gray) var(--retro-shadow) !important;
    font-family: var(--retro-font) !important;
    font-size: 14px !important;
    padding: 2px 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.retro-textarea-wrapper textarea {
    background: var(--retro-white) !important;
    border: 2px solid !important;
    border-color: var(--retro-shadow) var(--retro-light-gray) var(--retro-light-gray) var(--retro-shadow) !important;
    font-family: var(--retro-font) !important;
    font-size: 14px !important;
    padding: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical !important;
}

.retro-select-wrapper select {
    background: var(--retro-white) !important;
    border: 2px solid !important;
    border-color: var(--retro-shadow) var(--retro-light-gray) var(--retro-light-gray) var(--retro-shadow) !important;
    font-family: var(--retro-font) !important;
    font-size: 14px !important;
    padding: 2px !important;
    width: 100% !important;
}

.retro-checkbox-wrapper input[type="checkbox"] {
    margin-right: 8px !important;
}

/* =============================================================================
   EMPTY STATE COMPONENT
   ============================================================================= */

.retro-empty-state {
    text-align: center !important;
    padding: 60px 20px !important;
    background: var(--retro-gray) !important;
    border: 2px solid !important;
    border-color: var(--retro-light-gray) var(--retro-shadow) var(--retro-shadow) var(--retro-light-gray) !important;
    margin: 20px auto !important;
    max-width: 500px !important;
}

.retro-empty-state-icon {
    font-size: 64px !important;
    margin-bottom: 20px !important;
    opacity: 0.6 !important;
}

.retro-empty-state-title {
    font-family: var(--retro-font) !important;
    font-size: 18px !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
    color: var(--retro-black) !important;
}

.retro-empty-state-message {
    font-family: var(--retro-font) !important;
    font-size: 14px !important;
    color: var(--retro-dark-text) !important;
    margin-bottom: 20px !important;
}

.retro-empty-state-action {
    margin-top: 20px !important;
}

/* Inline version for simple cases */
.retro-empty-state-inline {
    text-align: center !important;
    padding: 40px 20px !important;
    color: var(--retro-dark-text) !important;
    font-family: var(--retro-font) !important;
    font-size: 16px !important;
}

/* Empty state in tables */
.retro-table-wrapper .retro-empty-state {
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.retro-table-wrapper .retro-empty-state-icon {
    font-size: 48px !important;
}

/* =============================================================================
   DARK MODE SUPPORT (Optional)
   ============================================================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --retro-gray: #404040;
        --retro-white: #2d2d2d;
        --retro-light-gray: #606060;
        --retro-shadow: #202020;
    }
    
    /* Empty state dark mode adjustments */
    .retro-empty-state {
        background: #2d2d2d !important;
        color: #e0e0e0 !important;
    }
    
    .retro-empty-state-title {
        color: #ffffff !important;
    }
    
    .retro-empty-state-message {
        color: #b0b0b0 !important;
    }
}