/* Theme Components for Lynx CPSR Application
 * Updated to match the clean enterprise design system (Linear/Notion/Vercel style)
 */

/* ─────────────────────────────────────────────────────────────
   Page Section Header Styles
   All variants share the same neutral surface; only the accent
   left-border colour differs — keeps sections visually cohesive.
───────────────────────────────────────────────────────────── */
.header-cyan,
.header-purple,
.header-green,
.header-orange,
.header-red {
    background: #F8FAFC;
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
}

.header-cyan   { border-left: 4px solid #0891B2; }
.header-purple { border-left: 4px solid #7C3AED; }
.header-green  { border-left: 4px solid #059669; }
.header-orange { border-left: 4px solid #D97706; }
.header-red    { border-left: 4px solid #DC2626; }

/* ─────────────────────────────────────────────────────────────
   Title Styles
───────────────────────────────────────────────────────────── */
.title-cyan    { color: #0891B2; font-weight: 700; }
.title-purple  { color: #7C3AED; font-weight: 700; }
.title-green   { color: #059669; font-weight: 700; }
.title-orange  { color: #D97706; font-weight: 700; }
.title-red     { color: #DC2626; font-weight: 700; }

/* ─────────────────────────────────────────────────────────────
   Card Styles
───────────────────────────────────────────────────────────── */
.card-themed {
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 12px;
    background: #fff;
}

.card-shadow-purple { box-shadow: 0 2px 8px rgba(124, 58, 237, 0.10); }
.card-shadow-cyan   { box-shadow: 0 2px 8px rgba(8, 145, 178, 0.10); }
.card-shadow-green  { box-shadow: 0 2px 8px rgba(5, 150, 105, 0.10); }
.card-shadow-orange { box-shadow: 0 2px 8px rgba(217, 119, 6, 0.10); }
.card-shadow-red    { box-shadow: 0 2px 8px rgba(220, 38, 38, 0.10); }

/* ─────────────────────────────────────────────────────────────
   Card Header Styles — unified neutral surface, colored bottom border
───────────────────────────────────────────────────────────── */
.card-header-purple,
.card-header-cyan,
.card-header-green,
.card-header-orange,
.card-header-red {
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    border-radius: 8px 8px 0 0;
    padding: 0.875rem 1.25rem;
}

.card-header-purple { border-bottom-color: #7C3AED; }
.card-header-cyan   { border-bottom-color: #0891B2; }
.card-header-green  { border-bottom-color: #059669; }
.card-header-orange { border-bottom-color: #D97706; }
.card-header-red    { border-bottom-color: #DC2626; }

/* ─────────────────────────────────────────────────────────────
   Button Styles (flat solid, no gradient)
───────────────────────────────────────────────────────────── */
.btn-purple {
    background: #7C3AED;
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.btn-green {
    background: #059669;
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.btn-orange {
    background: #D97706;
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.btn-cyan {
    background: #0891B2;
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.btn-red {
    background: #DC2626;
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.btn-gray {
    background: #6B7280;
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

/* ─────────────────────────────────────────────────────────────
   Small Button Variants
───────────────────────────────────────────────────────────── */
.btn-purple-sm {
    background: #7C3AED;
    color: white;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-green-sm {
    background: #059669;
    color: white;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-orange-sm {
    background: #D97706;
    color: white;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-gray-sm {
    background: #6B7280;
    color: white;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: background 0.15s;
}

/* ─────────────────────────────────────────────────────────────
   Hover Effects
───────────────────────────────────────────────────────────── */
.btn-purple:hover, .btn-purple-sm:hover { background: #6D28D9; color: white; }
.btn-green:hover,  .btn-green-sm:hover  { background: #047857; color: white; }
.btn-orange:hover, .btn-orange-sm:hover { background: #B45309; color: white; }
.btn-cyan:hover                         { background: #0E7490; color: white; }
.btn-red:hover                          { background: #B91C1C; color: white; }
.btn-gray:hover,   .btn-gray-sm:hover   { background: #4B5563; color: white; }

/* ─────────────────────────────────────────────────────────────
   Form Input Styles
───────────────────────────────────────────────────────────── */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="file"],
textarea,
select {
    background-color: white !important;
    color: #1F2937 !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    background-color: white !important;
    color: #1F2937 !important;
    border-color: #0FA8A8 !important;
    box-shadow: 0 0 0 3px rgba(15, 168, 168, 0.12) !important;
}

/* Dark modal form overrides */
.modal-content.bg-dark .form-control,
.modal-content.bg-dark .form-select,
.modal-content.bg-dark input[type="text"],
.modal-content.bg-dark textarea,
.modal-content.bg-dark select {
    background-color: #1F2937 !important;
    color: #E2E8F0 !important;
    border: 1px solid #374151 !important;
}

.modal-content.bg-dark .form-control:focus,
.modal-content.bg-dark .form-select:focus,
.modal-content.bg-dark input:focus,
.modal-content.bg-dark textarea:focus,
.modal-content.bg-dark select:focus {
    background-color: #1F2937 !important;
    color: #E2E8F0 !important;
    border-color: #0FA8A8 !important;
    box-shadow: 0 0 0 3px rgba(15, 168, 168, 0.2) !important;
}

.modal-content.bg-dark .form-control::placeholder,
.modal-content.bg-dark textarea::placeholder,
.modal-content.bg-dark input::placeholder {
    color: #64748B !important;
}

.form-input-purple { border: 2px solid #7C3AED; border-radius: 8px; background: white !important; color: #1F2937 !important; }
.form-input-cyan   { border: 2px solid #0891B2; border-radius: 8px; background: white !important; color: #1F2937 !important; }
.form-input-green  { border: 2px solid #059669; border-radius: 8px; background: white !important; color: #1F2937 !important; }
.form-input-orange { border: 2px solid #D97706; border-radius: 8px; background: white !important; color: #1F2937 !important; }

/* ─────────────────────────────────────────────────────────────
   Form Group Containers — neutral surface, colored accent border
───────────────────────────────────────────────────────────── */
.form-group-purple,
.form-group-cyan,
.form-group-green,
.form-group-orange {
    background: #F8FAFC;
    padding: 1.25rem;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
}

.form-group-purple { border-left: 3px solid #7C3AED; }
.form-group-cyan   { border-left: 3px solid #0891B2; }
.form-group-green  { border-left: 3px solid #059669; }
.form-group-orange { border-left: 3px solid #D97706; }

/* ─────────────────────────────────────────────────────────────
   Form Label Styles
───────────────────────────────────────────────────────────── */
.form-label-purple { color: #7C3AED; font-weight: 600; }
.form-label-cyan   { color: #0891B2; font-weight: 600; }
.form-label-green  { color: #059669; font-weight: 600; }
.form-label-orange { color: #D97706; font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
   Icon Container Styles
───────────────────────────────────────────────────────────── */
.icon-container-purple,
.icon-container-green,
.icon-container-orange,
.icon-container-red {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.icon-container-purple { background: #EDE9FE; color: #7C3AED; }
.icon-container-green  { background: #D1FAE5; color: #059669; }
.icon-container-orange { background: #FEF3C7; color: #D97706; }
.icon-container-red    { background: #FEE2E2; color: #DC2626; }

/* ─────────────────────────────────────────────────────────────
   Card Body
───────────────────────────────────────────────────────────── */
.card-body-padded { padding: 1.5rem; }

/* ─────────────────────────────────────────────────────────────
   Badge Styles (pill badges, flat)
───────────────────────────────────────────────────────────── */
.badge-purple { background: #EDE9FE; color: #5B21B6; padding: 0.375rem 0.75rem; border-radius: 6px; font-size: 0.8125rem; font-weight: 600; }
.badge-green  { background: #D1FAE5; color: #065F46; padding: 0.375rem 0.75rem; border-radius: 6px; font-size: 0.8125rem; font-weight: 600; }
.badge-orange { background: #FEF3C7; color: #92400E; padding: 0.375rem 0.75rem; border-radius: 6px; font-size: 0.8125rem; font-weight: 600; }
.badge-red    { background: #FEE2E2; color: #991B1B; padding: 0.375rem 0.75rem; border-radius: 6px; font-size: 0.8125rem; font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
   Stats Cards — neutral surface, colored left accent
───────────────────────────────────────────────────────────── */
.stats-card-purple,
.stats-card-red,
.stats-card-orange,
.stats-card-green {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.stats-card-purple { border-left: 4px solid #7C3AED; }
.stats-card-red    { border-left: 4px solid #DC2626; }
.stats-card-orange { border-left: 4px solid #D97706; }
.stats-card-green  { border-left: 4px solid #059669; }

/* ─────────────────────────────────────────────────────────────
   Section Divider
───────────────────────────────────────────────────────────── */
.section-divider {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #E5E7EB;
}

/* ─────────────────────────────────────────────────────────────
   Icon Colors
───────────────────────────────────────────────────────────── */
.icon-orange { color: #D97706; }
.icon-purple { color: #7C3AED; }
.icon-white  { color: white; }

/* ─────────────────────────────────────────────────────────────
   Responsive
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .header-cyan, .header-purple, .header-green, .header-orange, .header-red {
        padding: 1rem 1.25rem;
    }

    .card-header-purple, .card-header-cyan, .card-header-green,
    .card-header-orange, .card-header-red {
        padding: 0.875rem 1rem;
    }

    .card-body-padded { padding: 1rem; }

    .form-group-purple, .form-group-cyan, .form-group-green, .form-group-orange {
        padding: 1rem;
    }
}