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

/* =============================================================================
   CORE VARIABLES AND BASE STYLES
   ============================================================================= */
:root {
    /* Earth theme colors */
    --retro-gray: #ebe7e1;
    --retro-dark-gray: #d4cdc4;
    --retro-light-gray: #f5f2ed;
    --retro-shadow: #d4cdc4;
    --retro-blue: #6b5d4d;
    --retro-light-blue: #ddd8d0;
    --retro-white: #f5f2ed;
    --retro-black: #3d3529;
    --retro-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

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

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

.retro-window-title {
    background: var(--retro-gray);
    color: var(--retro-black);
    font-family: var(--retro-font);
    font-weight: 600;
    padding: 14px 16px;
    margin: 0;
    font-size: 15px;
    border-bottom: 2px solid var(--retro-dark-gray);
}

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

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

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

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

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

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

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

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

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

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

/* =============================================================================
   RETRO TABLES
   ============================================================================= */
.retro-table {
    border: 1px solid var(--app-border, #d4cdc4);
    background: var(--window-bg, #f5f2ed);
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.retro-table th {
    background: var(--bark, #6b5d4d);
    color: var(--cloud, #f0ece7);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 600;
    padding: 12px 16px;
    border: 1px solid var(--app-border, #d4cdc4);
    font-size: 14px;
}

.retro-table td {
    background: var(--window-bg, #f5f2ed);
    border: 1px solid var(--app-border, #d4cdc4);
    padding: 10px 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    color: var(--earth, #3d3529);
}

.retro-table tr:hover td {
    background: var(--app-hover, #ddd8d0);
}

.retro-table-striped tbody tr:nth-child(even) td {
    background: var(--toolbar-bg, #ebe7e1);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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%;
        max-width: 100%;
    }
}

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

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

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

/* =============================================================================
   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);
    border: 2px solid;
    border-color: var(--retro-shadow) var(--retro-light-gray) var(--retro-light-gray) var(--retro-shadow);
    font-family: var(--retro-font);
    font-size: 14px;
    padding: 2px 4px;
    width: 100%;
    box-sizing: border-box;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* =============================================================================
   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;
        color: #e0e0e0;
    }
    
    .retro-empty-state-title {
        color: #ffffff;
    }
    
    .retro-empty-state-message {
        color: #b0b0b0;
    }
}