/**
 * CTM Design System
 * Cinema Technology Magazine - Consistent UI Design
 * Version: 1.0
 * 
 * This design system ensures consistent styling across all CTM pages,
 * inspired by the pipeline dashboard design.
 */

/* ========== COLOR PALETTE ========== */
:root {
    /* Primary Colors */
    --ctm-gradient-start: #667eea;
    --ctm-gradient-end: #764ba2;
    --ctm-primary: #4299e1;
    --ctm-primary-dark: #3182ce;
    --ctm-primary-darker: #2c5aa0;
    
    /* Secondary Colors */
    --ctm-secondary: #48bb78;
    --ctm-secondary-dark: #38a169;
    --ctm-secondary-darker: #2f855a;
    
    /* Neutral Colors */
    --ctm-dark: #2d3748;
    --ctm-gray: #718096;
    --ctm-gray-light: #cbd5e0;
    --ctm-gray-lighter: #e2e8f0;
    --ctm-gray-lightest: #f7fafc;
    --ctm-light: #edf2f7;
    
    /* Status Colors */
    --ctm-success: #48bb78;
    --ctm-warning: #ed8936;
    --ctm-danger: #f56565;
    --ctm-info: #4299e1;
    
    /* Workflow Status Colors */
    --ctm-status-idea: #dc3545;          /* Red */
    --ctm-status-commissioned: #fd7e14;  /* Orange */
    --ctm-status-received: #28a745;      /* Green */
    --ctm-status-editing: #ffc107;       /* Yellow */
    --ctm-status-review: #17a2b8;        /* Cyan */
    --ctm-status-approved: #20c997;      /* Teal */
    --ctm-status-design: #6f42c1;        /* Purple */
    --ctm-status-proofing: #e83e8c;      /* Pink */
    --ctm-status-published: #007bff;     /* Blue */
    --ctm-status-hold: #6c757d;          /* Gray */
    --ctm-status-cancelled: #343a40;     /* Dark Gray */
    
    /* Typography */
    --ctm-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --ctm-font-size-base: 1rem;
    --ctm-font-size-sm: 0.9rem;
    --ctm-font-size-lg: 1.2rem;
    --ctm-font-size-xl: 1.4rem;
    --ctm-font-size-xxl: 1.8rem;
    --ctm-font-size-xxxl: 2.5rem;
    --ctm-line-height: 1.6;
    
    /* Spacing */
    --ctm-spacing-xs: 5px;
    --ctm-spacing-sm: 10px;
    --ctm-spacing-md: 15px;
    --ctm-spacing-lg: 20px;
    --ctm-spacing-xl: 30px;
    --ctm-spacing-xxl: 40px;
    
    /* Border Radius */
    --ctm-radius-sm: 8px;
    --ctm-radius-md: 10px;
    --ctm-radius-lg: 15px;
    --ctm-radius-xl: 20px;
    --ctm-radius-round: 50%;
    
    /* Shadows */
    --ctm-shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --ctm-shadow-md: 0 8px 25px rgba(0,0,0,0.1);
    --ctm-shadow-lg: 0 10px 30px rgba(0,0,0,0.1);
    --ctm-shadow-xl: 0 15px 35px rgba(0,0,0,0.15);
    
    /* Transitions */
    --ctm-transition: all 0.3s ease;
    --ctm-transition-fast: all 0.15s ease;
}

/* ========== CONTAINER AND LAYOUT ========== */
.ctm-container {
    background: linear-gradient(135deg, var(--ctm-gradient-start) 0%, var(--ctm-gradient-end) 100%);
    min-height: 100vh;
    padding: var(--ctm-spacing-lg);
}

.ctm-container-simple {
    background: var(--ctm-gray-lightest);
    min-height: 100vh;
    padding: var(--ctm-spacing-lg);
}

/* ========== HEADER COMPONENTS ========== */
.ctm-header {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--ctm-radius-lg);
    padding: var(--ctm-spacing-xl);
    margin-bottom: var(--ctm-spacing-xl);
    box-shadow: var(--ctm-shadow-lg);
}

.ctm-title {
    font-size: var(--ctm-font-size-xxxl);
    font-weight: 700;
    color: var(--ctm-dark);
    margin-bottom: var(--ctm-spacing-sm);
    text-align: center;
}

.ctm-subtitle {
    font-size: var(--ctm-font-size-lg);
    color: var(--ctm-gray);
    text-align: center;
    margin-bottom: var(--ctm-spacing-xl);
}

.ctm-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--ctm-spacing-lg);
}

.ctm-page-title {
    font-size: var(--ctm-font-size-xxl);
    font-weight: 600;
    color: var(--ctm-dark);
    margin: 0;
}

/* ========== CARD COMPONENTS ========== */
.ctm-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--ctm-radius-lg);
    padding: var(--ctm-spacing-xl);
    margin-bottom: var(--ctm-spacing-xl);
    box-shadow: var(--ctm-shadow-md);
    transition: var(--ctm-transition);
}

.ctm-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ctm-shadow-xl);
}

.ctm-card-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--ctm-spacing-lg);
    padding-bottom: var(--ctm-spacing-md);
    border-bottom: 2px solid var(--ctm-gray-lighter);
}

.ctm-card-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--ctm-radius-round);
    background: linear-gradient(135deg, var(--ctm-primary), var(--ctm-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--ctm-spacing-md);
    color: white;
    font-size: var(--ctm-font-size-xl);
}

.ctm-card-title {
    font-size: var(--ctm-font-size-xl);
    font-weight: 600;
    color: var(--ctm-dark);
    margin: 0;
}

.ctm-card-description {
    color: var(--ctm-gray);
    margin-bottom: var(--ctm-spacing-lg);
    line-height: var(--ctm-line-height);
}

/* ========== ARTICLE CARDS ========== */
.ctm-article-card {
    background: white;
    border-radius: var(--ctm-radius-sm);
    padding: var(--ctm-spacing-md);
    margin-bottom: var(--ctm-spacing-md);
    box-shadow: var(--ctm-shadow-sm);
    border-left: 5px solid var(--ctm-primary);
    transition: var(--ctm-transition);
    position: relative;
}

.ctm-article-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ctm-shadow-md);
}

/* Status-specific borders */
.ctm-article-card.idea { border-left-color: var(--ctm-status-idea); }
.ctm-article-card.commissioned { border-left-color: var(--ctm-status-commissioned); }
.ctm-article-card.received { border-left-color: var(--ctm-status-received); }
.ctm-article-card.editing { border-left-color: var(--ctm-status-editing); }
.ctm-article-card.review { border-left-color: var(--ctm-status-review); }
.ctm-article-card.approved { border-left-color: var(--ctm-status-approved); }
.ctm-article-card.design { border-left-color: var(--ctm-status-design); }
.ctm-article-card.proofing { border-left-color: var(--ctm-status-proofing); }
.ctm-article-card.published { border-left-color: var(--ctm-status-published); }
.ctm-article-card.hold { border-left-color: var(--ctm-status-hold); }
.ctm-article-card.cancelled { border-left-color: var(--ctm-status-cancelled); }

/* ========== STATISTICS ========== */
.ctm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ctm-spacing-lg);
    margin-bottom: var(--ctm-spacing-xl);
}

.ctm-stat-card {
    background: var(--ctm-gray-lightest);
    border-radius: var(--ctm-radius-md);
    padding: var(--ctm-spacing-lg);
    text-align: center;
    border: 1px solid var(--ctm-gray-lighter);
    transition: var(--ctm-transition);
}

.ctm-stat-card:hover {
    background: var(--ctm-light);
    transform: translateY(-3px);
}

.ctm-stat-number {
    font-size: var(--ctm-font-size-xxxl);
    font-weight: 700;
    color: var(--ctm-primary);
    margin-bottom: var(--ctm-spacing-xs);
}

.ctm-stat-label {
    font-size: var(--ctm-font-size-base);
    color: #4a5568;
    font-weight: 500;
}

/* ========== WORKFLOW STAGES ========== */
.ctm-workflow-stages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--ctm-spacing-lg);
    margin-bottom: var(--ctm-spacing-xl);
}

.ctm-workflow-stage {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--ctm-radius-lg);
    padding: var(--ctm-spacing-xl);
    box-shadow: var(--ctm-shadow-md);
    transition: var(--ctm-transition);
    border-left: 5px solid var(--ctm-primary);
}

.ctm-workflow-stage:hover {
    transform: translateY(-5px);
    box-shadow: var(--ctm-shadow-xl);
}

/* ========== BUTTONS ========== */
.ctm-btn {
    padding: 12px 20px;
    border-radius: var(--ctm-radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: var(--ctm-transition);
    border: none;
    cursor: pointer;
    font-size: var(--ctm-font-size-sm);
    display: inline-block;
}

.ctm-btn-primary {
    background: linear-gradient(135deg, var(--ctm-primary), var(--ctm-primary-dark));
    color: white;
}

.ctm-btn-primary:hover {
    background: linear-gradient(135deg, var(--ctm-primary-dark), var(--ctm-primary-darker));
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(66, 153, 225, 0.4);
    color: white;
    text-decoration: none;
}

.ctm-btn-secondary {
    background: var(--ctm-gray-lighter);
    color: #4a5568;
}

.ctm-btn-secondary:hover {
    background: var(--ctm-gray-light);
    transform: translateY(-2px);
    color: #4a5568;
    text-decoration: none;
}

.ctm-btn-success {
    background: linear-gradient(135deg, var(--ctm-secondary), var(--ctm-secondary-dark));
    color: white;
}

.ctm-btn-success:hover {
    background: linear-gradient(135deg, var(--ctm-secondary-dark), var(--ctm-secondary-darker));
    transform: translateY(-2px);
    color: white;
    text-decoration: none;
}

.ctm-btn-danger {
    background: linear-gradient(135deg, var(--ctm-danger), #e53e3e);
    color: white;
}

.ctm-btn-danger:hover {
    background: linear-gradient(135deg, #e53e3e, #c53030);
    transform: translateY(-2px);
    color: white;
    text-decoration: none;
}

.ctm-btn-group {
    display: flex;
    gap: var(--ctm-spacing-sm);
    flex-wrap: wrap;
}

/* ========== BADGES AND STATUS INDICATORS ========== */
.ctm-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ctm-badge-primary { background: var(--ctm-primary); color: white; }
.ctm-badge-success { background: var(--ctm-success); color: white; }
.ctm-badge-warning { background: var(--ctm-warning); color: white; }
.ctm-badge-danger { background: var(--ctm-danger); color: white; }
.ctm-badge-info { background: var(--ctm-info); color: white; }

.ctm-status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: var(--ctm-radius-round);
    margin-right: var(--ctm-spacing-sm);
}

.ctm-status-active { background: var(--ctm-success); }
.ctm-status-pending { background: var(--ctm-warning); }
.ctm-status-completed { background: var(--ctm-primary); }
.ctm-status-error { background: var(--ctm-danger); }

/* ========== ACTIVITY FEED ========== */
.ctm-activity-feed {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--ctm-radius-lg);
    padding: var(--ctm-spacing-xl);
    box-shadow: var(--ctm-shadow-lg);
}

.ctm-activity-item {
    display: flex;
    align-items: center;
    padding: var(--ctm-spacing-md);
    background: var(--ctm-gray-lightest);
    border-radius: var(--ctm-radius-md);
    margin-bottom: var(--ctm-spacing-sm);
    border-left: 4px solid var(--ctm-primary);
    transition: var(--ctm-transition-fast);
}

.ctm-activity-item:hover {
    background: var(--ctm-light);
    transform: translateX(5px);
}

.ctm-activity-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ctm-radius-round);
    background: var(--ctm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--ctm-spacing-md);
    color: white;
}

.ctm-activity-content {
    flex: 1;
}

.ctm-activity-text {
    font-weight: 500;
    color: var(--ctm-dark);
    margin-bottom: var(--ctm-spacing-xs);
}

.ctm-activity-time {
    font-size: var(--ctm-font-size-sm);
    color: var(--ctm-gray);
}

/* ========== FORMS ========== */
.ctm-form-group {
    margin-bottom: var(--ctm-spacing-lg);
}

.ctm-form-label {
    display: block;
    font-weight: 600;
    color: var(--ctm-dark);
    margin-bottom: var(--ctm-spacing-xs);
}

.ctm-form-control {
    width: 100%;
    padding: var(--ctm-spacing-sm) var(--ctm-spacing-md);
    border: 2px solid var(--ctm-gray-lighter);
    border-radius: var(--ctm-radius-sm);
    font-size: var(--ctm-font-size-base);
    transition: var(--ctm-transition-fast);
}

.ctm-form-control:focus {
    outline: none;
    border-color: var(--ctm-primary);
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

.ctm-form-help {
    font-size: var(--ctm-font-size-sm);
    color: var(--ctm-gray);
    margin-top: var(--ctm-spacing-xs);
}

/* ========== TABLES ========== */
.ctm-table {
    width: 100%;
    background: white;
    border-radius: var(--ctm-radius-sm);
    overflow: hidden;
    box-shadow: var(--ctm-shadow-sm);
}

.ctm-table thead {
    background: linear-gradient(135deg, var(--ctm-primary), var(--ctm-primary-dark));
    color: white;
}

.ctm-table th {
    padding: var(--ctm-spacing-md);
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--ctm-font-size-sm);
    letter-spacing: 0.5px;
}

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

.ctm-table tbody tr:hover {
    background: var(--ctm-gray-lightest);
}

/* ========== ALERTS ========== */
.ctm-alert {
    padding: var(--ctm-spacing-md) var(--ctm-spacing-lg);
    border-radius: var(--ctm-radius-sm);
    margin-bottom: var(--ctm-spacing-lg);
    border-left: 4px solid;
}

.ctm-alert-success {
    background: #f0fdf4;
    border-color: var(--ctm-success);
    color: #166534;
}

.ctm-alert-warning {
    background: #fffbeb;
    border-color: var(--ctm-warning);
    color: #92400e;
}

.ctm-alert-danger {
    background: #fef2f2;
    border-color: var(--ctm-danger);
    color: #991b1b;
}

.ctm-alert-info {
    background: #eff6ff;
    border-color: var(--ctm-info);
    color: #1e40af;
}

/* ========== MODALS ========== */
.ctm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.ctm-modal {
    background: white;
    border-radius: var(--ctm-radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--ctm-shadow-xl);
}

.ctm-modal-header {
    padding: var(--ctm-spacing-lg);
    border-bottom: 2px solid var(--ctm-gray-lighter);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ctm-modal-title {
    font-size: var(--ctm-font-size-xl);
    font-weight: 600;
    color: var(--ctm-dark);
    margin: 0;
}

.ctm-modal-body {
    padding: var(--ctm-spacing-lg);
}

.ctm-modal-footer {
    padding: var(--ctm-spacing-lg);
    border-top: 2px solid var(--ctm-gray-lighter);
    display: flex;
    justify-content: flex-end;
    gap: var(--ctm-spacing-sm);
}

/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 768px) {
    .ctm-container {
        padding: var(--ctm-spacing-sm);
    }
    
    .ctm-workflow-stages {
        grid-template-columns: 1fr;
    }
    
    .ctm-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .ctm-btn-group {
        flex-direction: column;
    }
    
    .ctm-btn {
        width: 100%;
        text-align: center;
    }
    
    .ctm-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ctm-spacing-md);
    }
}

/* ========== UTILITY CLASSES ========== */
.ctm-mt-1 { margin-top: var(--ctm-spacing-xs); }
.ctm-mt-2 { margin-top: var(--ctm-spacing-sm); }
.ctm-mt-3 { margin-top: var(--ctm-spacing-md); }
.ctm-mt-4 { margin-top: var(--ctm-spacing-lg); }
.ctm-mt-5 { margin-top: var(--ctm-spacing-xl); }

.ctm-mb-1 { margin-bottom: var(--ctm-spacing-xs); }
.ctm-mb-2 { margin-bottom: var(--ctm-spacing-sm); }
.ctm-mb-3 { margin-bottom: var(--ctm-spacing-md); }
.ctm-mb-4 { margin-bottom: var(--ctm-spacing-lg); }
.ctm-mb-5 { margin-bottom: var(--ctm-spacing-xl); }

.ctm-text-center { text-align: center; }
.ctm-text-left { text-align: left; }
.ctm-text-right { text-align: right; }

.ctm-fw-bold { font-weight: 700; }
.ctm-fw-semibold { font-weight: 600; }
.ctm-fw-normal { font-weight: 400; }

.ctm-text-primary { color: var(--ctm-primary); }
.ctm-text-success { color: var(--ctm-success); }
.ctm-text-warning { color: var(--ctm-warning); }
.ctm-text-danger { color: var(--ctm-danger); }
.ctm-text-muted { color: var(--ctm-gray); }