/* ============================================
   COMPONENTS
   Botons, inputs, targetes
   ============================================ */

/* ===== BOTONS ===== */
.et_pb_button {
    display: inline-block;
    background-color: var(--mg-btn-bg);
    color: var(--mg-btn-text);
    border: var(--mg-btn-border);
    padding: var(--mg-btn-padding);
    font-family: var(--mg-font-primary);
    font-size: var(--mg-btn-font-size);
    font-weight: var(--mg-btn-font-weight);
    text-transform: var(--mg-btn-text-transform);
    letter-spacing: var(--mg-btn-letter-spacing);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--mg-box-shadow);
    transition: var(--mg-transition-base);
    line-height: 1;
}

.et_pb_button:hover {
    background-color: var(--mg-btn-bg-hover);
    color: var(--mg-btn-text-hover);
    /* border: var(--mg-btn-border-hover); */
    box-shadow: var(--mg-box-shadow-hover);
    text-shadow: var(--mg-text-shadow-strong);
}

.et_pb_button:active {
    background-color: var(--mg-btn-bg-active);
    color: var(--mg-btn-text-active);
    transform: translate(2px, 2px);
    box-shadow: none;
}

.et_pb_button:focus {
    outline: none;
    border: var(--mg-btn-border-focus);
    box-shadow: var(--mg-box-shadow-focus);
}

.et_pb_button:disabled {
    background-color: var(--mg-btn-bg-disabled);
    color: var(--mg-btn-text-disabled);
    border-color: var(--mg-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Variants de botons */
.btn-primary {
    background-color: var(--mg-primary);
    color: var(--mg-bg-primary);
    border-color: var(--mg-primary-light);
}

.btn-primary:hover {
    background-color: var(--mg-primary-light);
    color: var(--mg-bg-primary);
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--mg-secondary);
    color: var(--mg-secondary);
}

.btn-secondary:hover {
    background-color: var(--mg-secondary-dark);
    border-color: var(--mg-secondary-light);
    color: var(--mg-bg-primary);
}

/* ===== INPUTS ===== */
input {
    background-color: var(--mg-bg-secondary);
    color: var(--mg-text-primary);
    border: var(--mg-border-width) var(--mg-border-style) var(--mg-border-color);
    /* padding: calc(var(--mg-btn-padding) / 2)!important; */
	padding: var(--mg-btn-padding)!important;
    font-family: var(--mg-font-primary);
    font-size: var(--mg-font-size-base);
    width: 100%;
    /* max-width: 300px; */
    transition: var(--mg-transition-base);
}

input:focus {
    outline: none;
    border-color: var(--mg-border-color-focus);
    box-shadow: var(--mg-box-shadow-focus);
    background-color: var(--mg-bg-tertiary);
}

input::placeholder {
    color: var(--mg-text-muted);
    opacity: 0.7;
}

input:disabled {
    background-color: var(--mg-text-disabled);
    color: var(--mg-text-muted);
    border-color: var(--mg-text-muted);
    cursor: not-allowed;
}

/* Fix per a Select2 en contenidors estrets */
.select2-container {
    display: block;
    margin-top: 5px;
}

.select2-container--default .select2-selection--single {
    height: 40px !important;
    padding: var(--mg-btn-padding)!important;
    border: var(--mg-border-width) var(--mg-border-style) var(--mg-border-color);
	border-radius: 0px;
}

.select2-search--dropdown .select2-search__field {
	width: 95%;
}

._select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px !important;
}

._select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
}

/* ===== TARGETES ===== */
.card {
    background-color: var(--mg-bg-secondary);
    border: var(--mg-border-width) var(--mg-border-style) var(--mg-border-color);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--mg-box-shadow);
}

.card-header {
    border-bottom: var(--mg-border-width) var(--mg-border-style) var(--mg-border-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    font-family: var(--mg-font-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.card-footer {
    border-top: var(--mg-border-width) var(--mg-border-style) var(--mg-border-color);
    padding-top: 1rem;
    margin-top: 1rem;
}

/* ===== ALERTES ===== */
.alert {
    padding: 1rem;
    border: var(--mg-border-width) var(--mg-border-style) var(--mg-border-color);
    margin-bottom: 1rem;
    background-color: var(--mg-bg-tertiary);
}

.alert-success {
    border-color: var(--mg-success);
    color: var(--mg-success);
}

.alert-error {
    border-color: var(--mg-error);
    color: var(--mg-error);
}

.alert-warning {
    border-color: var(--mg-warning);
    color: var(--mg-warning);
}

.alert-info {
    border-color: var(--mg-info);
    color: var(--mg-info);
}

/* ===== ICONES ===== */
:root {
    /* Paleta bàsica d'icones */
    --mg-icon-color: var(--mg-primary);
    --mg-icon-color-hover: var(--mg-primary-bright);
    --mg-icon-color-active: var(--mg-primary-bright);
    --mg-icon-color-disabled: var(--mg-primary-dark);
    
    /* Mides */
    --mg-icon-size-sm: 16px;
    --mg-icon-size-md: 24px;
    --mg-icon-size-lg: 32px;
    --mg-icon-size-xl: 48px;
    
    /* Efectes */
    --mg-icon-glow: drop-shadow(0 0 2px currentColor);
    --mg-icon-glow-strong: drop-shadow(0 0 3px currentColor)
                           drop-shadow(0 0 6px currentColor);
    --mg-icon-pixel: image-rendering: pixelated;  /* Per icones pixel art */
}

/* Classe base per icones */
.icon {
    display: inline-block;
    width: var(--mg-icon-size-md);
    height: var(--mg-icon-size-md);
    color: var(--mg-icon-color);
    fill: currentColor;  /* Per SVG */
    transition: var(--mg-transition-base);
}

/* Variants */
.icon-sm { width: var(--mg-icon-size-sm); height: var(--mg-icon-size-sm); }
.icon-lg { width: var(--mg-icon-size-lg); height: var(--mg-icon-size-lg); }
.icon-xl { width: var(--mg-icon-size-xl); height: var(--mg-icon-size-xl); }

.icon:hover {
    color: var(--mg-icon-color-hover);
    filter: var(--mg-icon-glow);
}

.icon.active {
    color: var(--mg-icon-color-active);
    filter: var(--mg-icon-glow-strong);
}

.icon.disabled {
    color: var(--mg-icon-color-disabled);
    filter: none;
    opacity: 0.5;
}

.icon-pixel {
    image-rendering: pixelated;
    image-rendering: crisp-edges;  /* Alternativa */
}

/* Estils específics per tipus d'icones */
.icon-folder { color: var(--mg-primary); }
.icon-file { color: var(--mg-primary-light); }
.icon-executable { color: var(--mg-primary-bright); filter: var(--mg-icon-glow); }

/* Per icones d'estat */
.icon-success { color: var(--mg-primary-bright); }
.icon-warning { color: var(--mg-warning); }  /* Si uses ambre */
.icon-error { color: var(--mg-error); }      /* Vermell lleu */