/**
 * Maxim API Plugin - Common Patterns
 * Pattern comuni riutilizzabili
 * 
 * @version 1.0.0
 * @requires components-core.css
 */

/* =========================================================================
   COMMON GRADIENTS
   ========================================================================= */

.maxim-bg-gradient-primary {
    background: linear-gradient(135deg, var(--maxim-primary) 0%, var(--maxim-primary-light) 100%);
}

.maxim-bg-gradient-secondary {
    background: linear-gradient(135deg, var(--maxim-secondary) 0%, var(--maxim-secondary-light) 100%);
}

.maxim-bg-gradient-success {
    background: linear-gradient(135deg, var(--maxim-success) 0%, var(--maxim-success-light) 100%);
}

.maxim-bg-gradient-gray {
    background: linear-gradient(135deg, var(--maxim-gray-100) 0%, var(--maxim-bg-surface) 100%);
}

/* =========================================================================
   CARD PATTERNS
   ========================================================================= */

/* Card with gradient header */
.maxim-card-pattern-gradient .maxim-card-header {
    background: linear-gradient(135deg, var(--maxim-gray-50) 0%, var(--maxim-bg-surface) 100%);
}

/* Card with left border accent */
.maxim-card-pattern-accent {
    border-left: 4px solid var(--maxim-primary);
}

/* Card hover patterns */
.maxim-card-pattern-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--maxim-shadow-large);
}

.maxim-card-pattern-hover-glow:hover {
    box-shadow: 0 0 20px var(--maxim-primary-bg-30);
}

/* =========================================================================
   BUTTON PATTERNS
   ========================================================================= */

/* Gradient buttons */
.maxim-btn-gradient-primary {
    background: linear-gradient(135deg, var(--maxim-primary) 0%, var(--maxim-primary-light) 100%);
    border: none;
    color: white;
}

.maxim-btn-gradient-primary:hover {
    background: linear-gradient(135deg, var(--maxim-primary-dark) 0%, var(--maxim-primary) 100%);
}

/* Icon buttons */
.maxim-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.maxim-btn-icon.small {
    width: 32px;
    height: 32px;
}

.maxim-btn-icon.large {
    width: 48px;
    height: 48px;
}

/* =========================================================================
   STATUS PATTERNS
   ========================================================================= */

/* Status with background */
.maxim-status-pattern-pill {
    padding: var(--maxim-space-1) var(--maxim-space-3);
    border-radius: var(--maxim-radius-full);
    font-size: var(--maxim-font-size-small);
    font-weight: var(--maxim-font-weight-medium);
}

.maxim-status-pattern-pill.success {
    background: var(--maxim-success-bg);
    color: var(--maxim-success);
}

.maxim-status-pattern-pill.warning {
    background: var(--maxim-warning-bg);
    color: var(--maxim-warning);
}

.maxim-status-pattern-pill.error {
    background: var(--maxim-error-bg);
    color: var(--maxim-error);
}

/* =========================================================================
   LAYOUT PATTERNS
   ========================================================================= */

/* Centered content pattern */
.maxim-pattern-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    text-align: center;
}

/* Empty state pattern */
.maxim-pattern-empty-state {
    padding: var(--maxim-space-8);
    text-align: center;
    color: var(--maxim-text-muted);
}

.maxim-pattern-empty-state-icon {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: var(--maxim-space-4);
}

.maxim-pattern-empty-state-title {
    font-size: var(--maxim-font-size-large);
    font-weight: var(--maxim-font-weight-medium);
    margin-bottom: var(--maxim-space-2);
}

.maxim-pattern-empty-state-text {
    font-size: var(--maxim-font-size-base);
}

/* =========================================================================
   ICON PATTERNS
   ========================================================================= */

/* Icon with background */
.maxim-icon-pattern-circle {
    width: 40px;
    height: 40px;
    background: var(--maxim-gray-100);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.maxim-icon-pattern-square {
    width: 40px;
    height: 40px;
    background: var(--maxim-gray-100);
    border-radius: var(--maxim-radius-medium);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.maxim-list-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

/* =========================================================================
   TABLE PATTERNS
   ========================================================================= */

/* Striped table rows */
.maxim-pattern-table-striped tbody tr:nth-child(even) {
    background-color: var(--maxim-gray-50);
}

/* Hoverable table rows */
.maxim-pattern-table-hover tbody tr:hover {
    background-color: var(--maxim-gray-100);
}

/* =========================================================================
   FORM PATTERNS
   ========================================================================= */

/* Form with icon */
.maxim-pattern-form-icon {
    position: relative;
}

.maxim-pattern-form-icon .maxim-form-control {
    padding-left: 40px;
}

.maxim-pattern-form-icon-left {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--maxim-text-muted);
}

/* =========================================================================
   GENERICI RIUTTILIZZABILI
   ========================================================================= */
   
/* Container pattern - contenitore centrato con max-width */
.maxim-container {
    max-width: var(--maxim-container-xlarge);
    margin: 0 auto;
    padding: var(--maxim-space-8);
}

/* Clickable header pattern - header interattivo */
.maxim-clickable-header {
    display: flex;
    align-items: center;
    padding: var(--maxim-space-5) var(--maxim-space-6);
    background: var(--maxim-bg-surface);
    cursor: pointer;
    transition: background var(--maxim-transition-fast);
}

.maxim-clickable-header:hover {
    background: var(--maxim-bg-muted);
}

/* Icon rotation utility */
.maxim-rotate-icon {
    transition: transform var(--maxim-transition-fast);
    font-style: normal;
}

[aria-expanded="true"] .maxim-rotate-icon {
    transform: rotate(180deg);
}

/* Actions footer pattern */
.maxim-actions-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--maxim-space-4);
}

.maxim-actions-group {
    display: flex;
    gap: var(--maxim-space-3);
}

/* =========================================================================
   SCROLLABLE LIST
   ========================================================================= */

/* Lista con scroll verticale */
.maxim-list.scrollable {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollbar personalizzata con colore primary */
.maxim-scrollbar-primary::-webkit-scrollbar {
    width: 8px;
}

.maxim-scrollbar-primary::-webkit-scrollbar-track {
    background: var(--maxim-gray-100);
    border-radius: 4px;
}

.maxim-scrollbar-primary::-webkit-scrollbar-thumb {
    background: var(--maxim-primary);
    border-radius: 4px;
}

.maxim-scrollbar-primary::-webkit-scrollbar-thumb:hover {
    background: var(--maxim-primary-dark);
}