/**
 * Inommo Design System - Reusable Components
 * Version: 1.0.0
 * 
 * This file contains styled components with functional color coding.
 * Components include: cards, buttons, badges, forms, navigation, etc.
 */

/* ============================================
   CARDS - FUNCTIONAL COLOR VARIANTS
   ============================================ */

/* Base card improvements */
.card {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

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

[data-bs-theme="dark"] .card {
    border-color: rgba(255, 255, 255, 0.15);
    background-color: var(--surface-secondary);
}

/* Groups Card */
.card-groups {
    border-left: 4px solid var(--color-groups-primary);
}

.card-groups .card-header {
    background-color: var(--color-groups-light);
    border-bottom-color: var(--color-groups-primary);
}

[data-bs-theme="dark"] .card-groups .card-header {
    background-color: var(--color-groups-light);
    color: var(--color-groups-dark);
}

/* Projects Card (also for Activities & Tasks) */
.card-projects,
.card-activities,
.card-tasks {
    border-left: 4px solid var(--color-projects-primary);
}

.card-projects .card-header,
.card-activities .card-header,
.card-tasks .card-header {
    background-color: var(--color-projects-light);
    border-bottom-color: var(--color-projects-primary);
}

[data-bs-theme="dark"] .card-projects .card-header,
[data-bs-theme="dark"] .card-activities .card-header,
[data-bs-theme="dark"] .card-tasks .card-header {
    background-color: var(--color-projects-light);
    color: var(--color-projects-dark);
}

/* Messages Card */
.card-messages {
    border-left: 4px solid var(--color-messages-primary);
}

.card-messages .card-header {
    background-color: var(--color-messages-light);
    border-bottom-color: var(--color-messages-primary);
}

[data-bs-theme="dark"] .card-messages .card-header {
    background-color: var(--color-messages-light);
    color: var(--color-messages-dark);
}

/* Finance Card */
.card-finance {
    border-left: 4px solid var(--color-finance-primary);
}

.card-finance .card-header {
    background-color: var(--color-finance-light);
    border-bottom-color: var(--color-finance-primary);
}

[data-bs-theme="dark"] .card-finance .card-header {
    background-color: var(--color-finance-light);
    color: var(--color-finance-dark);
}

/* ============================================
   METRIC CARDS (Dashboard)
   ============================================ */
.metric-card {
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    color: white;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

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

.metric-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.metric-card .metric-icon {
    font-size: 2.5rem;
    opacity: 0.9;
    margin-bottom: var(--spacing-sm);
}

.metric-card .metric-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    margin-bottom: var(--spacing-xs);
}

.metric-card .metric-value {
    font-size: var(--text-4xl);
    font-weight: var(--font-extrabold);
    margin-bottom: var(--spacing-sm);
}

.metric-card .metric-link {
    color: white;
    text-decoration: none;
    font-size: var(--text-sm);
    opacity: 0.9;
    transition: opacity var(--transition-fast);
}

.metric-card .metric-link:hover {
    opacity: 1;
}

/* Metric card color variants */
.metric-card-groups {
    background: linear-gradient(135deg, var(--color-groups-primary) 0%, var(--color-groups-dark) 100%);
}

.metric-card-projects,
.metric-card-activities,
.metric-card-tasks {
    background: linear-gradient(135deg, var(--color-projects-primary) 0%, var(--color-projects-dark) 100%);
}

.metric-card-messages {
    background: linear-gradient(135deg, var(--color-messages-primary) 0%, var(--color-messages-dark) 100%);
}

.metric-card-finance {
    background: linear-gradient(135deg, var(--color-finance-primary) 0%, var(--color-finance-dark) 100%);
}

/* ============================================
   BUTTONS - FUNCTIONAL COLOR VARIANTS
   ============================================ */

/* Groups Buttons */
.btn-groups {
    background-color: var(--color-groups-primary);
    border-color: var(--color-groups-primary);
    color: white;
}

.btn-groups:hover,
.btn-groups:focus {
    background-color: var(--color-groups-hover);
    border-color: var(--color-groups-hover);
    color: white;
}

.btn-outline-groups {
    color: var(--color-groups-primary);
    border-color: var(--color-groups-primary);
}

.btn-outline-groups:hover,
.btn-outline-groups:focus {
    background-color: var(--color-groups-primary);
    border-color: var(--color-groups-primary);
    color: white;
}

/* Projects Buttons (also for Activities & Tasks) */
.btn-projects,
.btn-activities,
.btn-tasks {
    background-color: var(--color-projects-primary);
    border-color: var(--color-projects-primary);
    color: white;
}

.btn-projects:hover,
.btn-projects:focus,
.btn-activities:hover,
.btn-activities:focus,
.btn-tasks:hover,
.btn-tasks:focus {
    background-color: var(--color-projects-hover);
    border-color: var(--color-projects-hover);
    color: white;
}

.btn-outline-projects,
.btn-outline-activities,
.btn-outline-tasks {
    color: var(--color-projects-primary);
    border-color: var(--color-projects-primary);
}

.btn-outline-projects:hover,
.btn-outline-projects:focus,
.btn-outline-activities:hover,
.btn-outline-activities:focus,
.btn-outline-tasks:hover,
.btn-outline-tasks:focus {
    background-color: var(--color-projects-primary);
    border-color: var(--color-projects-primary);
    color: white;
}

/* Messages Buttons */
.btn-messages {
    background-color: var(--color-messages-primary);
    border-color: var(--color-messages-primary);
    color: white;
}

.btn-messages:hover,
.btn-messages:focus {
    background-color: var(--color-messages-hover);
    border-color: var(--color-messages-hover);
    color: white;
}

.btn-outline-messages {
    color: var(--color-messages-primary);
    border-color: var(--color-messages-primary);
}

.btn-outline-messages:hover,
.btn-outline-messages:focus {
    background-color: var(--color-messages-primary);
    border-color: var(--color-messages-primary);
    color: white;
}

/* Finance Buttons */
.btn-finance {
    background-color: var(--color-finance-primary);
    border-color: var(--color-finance-primary);
    color: white;
}

.btn-finance:hover,
.btn-finance:focus {
    background-color: var(--color-finance-hover);
    border-color: var(--color-finance-hover);
    color: white;
}

.btn-outline-finance {
    color: var(--color-finance-primary);
    border-color: var(--color-finance-primary);
}

.btn-outline-finance:hover,
.btn-outline-finance:focus {
    background-color: var(--color-finance-primary);
    border-color: var(--color-finance-primary);
    color: white;
}

/* ============================================
   BADGES - FUNCTIONAL COLOR VARIANTS
   ============================================ */
.badge-groups {
    background-color: var(--color-groups-primary);
    color: white;
}

.badge-projects,
.badge-activities,
.badge-tasks {
    background-color: var(--color-projects-primary);
    color: white;
}

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

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

/* Subtle badge variants */
.badge-groups-subtle {
    background-color: var(--color-groups-light);
    color: var(--color-groups-dark);
    border: 1px solid var(--color-groups-primary);
}

.badge-projects-subtle,
.badge-activities-subtle,
.badge-tasks-subtle {
    background-color: var(--color-projects-light);
    color: var(--color-projects-dark);
    border: 1px solid var(--color-projects-primary);
}

.badge-messages-subtle {
    background-color: var(--color-messages-light);
    color: var(--color-messages-dark);
    border: 1px solid var(--color-messages-primary);
}

.badge-finance-subtle {
    background-color: var(--color-finance-light);
    color: var(--color-finance-dark);
    border: 1px solid var(--color-finance-primary);
}

.bg-messages-subtle {
    background-color: var(--color-messages-light) !important;
    color: var(--color-messages-dark) !important;
}

/* ============================================
   PROGRESS BARS
   ============================================ */
.progress {
    border-radius: var(--radius-full);
    height: 8px;
    background-color: rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] .progress {
    background-color: rgba(255, 255, 255, 0.1);
}

.progress-bar {
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
}

.bg-groups,
.progress-bar-groups {
    background-color: var(--color-groups-primary) !important;
}

.bg-projects,
.bg-activities,
.bg-tasks,
.progress-bar-projects,
.progress-bar-activities,
.progress-bar-tasks {
    background-color: var(--color-projects-primary) !important;
}

.bg-messages,
.progress-bar-messages {
    background-color: var(--color-messages-primary) !important;
}

.bg-finance,
.progress-bar-finance {
    background-color: var(--color-finance-primary) !important;
}

/* ============================================
   NAVIGATION ENHANCEMENTS
   ============================================ */
.navbar {
    box-shadow: var(--shadow-sm);
}

.navbar-brand {
    font-weight: var(--font-bold);
    font-size: var(--text-xl);
}

.nav-link {
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
}

.nav-link:hover {
    transform: translateY(-1px);
}

/* Color indicators for navigation */
.nav-link .text-groups {
    color: var(--color-groups-primary);
}

.nav-link .text-projects,
.nav-link .text-activities,
.nav-link .text-tasks {
    color: var(--color-projects-primary);
}

.nav-link .text-messages {
    color: var(--color-messages-primary);
}

.nav-link .text-finance {
    color: var(--color-finance-primary);
}

/* ============================================
   FORMS
   ============================================ */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-projects-primary);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

.form-label {
    font-weight: var(--font-medium);
    margin-bottom: var(--spacing-sm);
}

/* Dark mode form controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] textarea {
    background-color: var(--surface-secondary);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e9ecef;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] textarea:focus {
    background-color: var(--surface-tertiary);
    border-color: var(--color-projects-primary);
    color: #e9ecef;
    box-shadow: 0 0 0 0.25rem rgba(77, 171, 247, 0.25);
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] textarea:disabled {
    background-color: var(--surface-primary);
    color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   ALERTS
   ============================================ */
.alert {
    border-radius: var(--radius-lg);
    border-left-width: 4px;
}

/* ============================================
   LIST GROUPS
   ============================================ */
.list-group-item {
    transition: all var(--transition-fast);
}

.list-group-item:hover {
    background-color: rgba(0, 0, 0, 0.02);
    transform: translateX(4px);
}

[data-bs-theme="dark"] .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ============================================
   MODALS
   ============================================ */
.modal-content {
    border-radius: var(--radius-xl);
    border: none;
    box-shadow: var(--shadow-2xl);
}

.modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: var(--spacing-lg);
}

[data-bs-theme="dark"] .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.modal-title {
    font-weight: var(--font-bold);
}

/* ============================================
   NOTIFICATION LEGACY BUTTONS
   ============================================ */
.notification-content button,
.notification-content input[type="button"],
.notification-content input[type="submit"],
.notification-content .activ,
.notification-content .refus {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin: 5px 5px 5px 0;
}

.notification-content .activ {
    background-color: #198754;
    /* Success green */
    border: 1px solid #198754;
}

.notification-content .activ:hover {
    background-color: #157347;
    border-color: #146c43;
}

.notification-content .refus {
    background-color: #dc3545;
    /* Danger red */
    border: 1px solid #dc3545;
}

.notification-content .refus:hover {
    background-color: #bb2d3b;
    border-color: #b02a37;
}

/* Default buttons in notifications use Message Theme (Purple) */
.notification-content button,
.notification-content input[type="button"],
.notification-content input[type="submit"] {
    background-color: var(--color-messages-primary);
    border: 1px solid var(--color-messages-primary);
}

.notification-content button:hover,
.notification-content input[type="button"]:hover {
    background-color: var(--color-messages-hover);
    border-color: var(--color-messages-hover);
}

/* ============================================
   QUILL EDITOR DARK MODE
   ============================================ */
[data-bs-theme="dark"] .ql-toolbar,
[data-bs-theme="dark"] .ql-container {
    background-color: var(--surface-secondary) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-bs-theme="dark"] .ql-editor {
    background-color: var(--surface-secondary) !important;
    color: #e9ecef !important;
}

[data-bs-theme="dark"] .ql-editor.ql-blank::before {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-bs-theme="dark"] .ql-stroke {
    stroke: #e9ecef !important;
}

[data-bs-theme="dark"] .ql-fill {
    fill: #e9ecef !important;
}

[data-bs-theme="dark"] .ql-picker-label {
    color: #e9ecef !important;
}

[data-bs-theme="dark"] .ql-toolbar button:hover,
[data-bs-theme="dark"] .ql-toolbar button.ql-active {
    background-color: var(--surface-tertiary) !important;
}

[data-bs-theme="dark"] .ql-picker-options {
    background-color: var(--surface-secondary) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-bs-theme="dark"] .ql-picker-item {
    color: #e9ecef !important;
}

[data-bs-theme="dark"] .ql-picker-item:hover {
    background-color: var(--surface-tertiary) !important;
}