/* ==========================================
   VEZIR FLUX - MATERIAL DESIGN THEME
   Material Design styled wrappers for Flux components
   ========================================== */

/* === MATERIAL INPUT === */
.material-input {
  --flux-input-padding: 12px 16px;
  --flux-input-font-size: 1rem;
  --flux-input-border: 1px solid #e0e0e0;
  --flux-input-border-radius: 4px;
  --flux-input-bg: #fff;
  --flux-input-color: rgba(0, 0, 0, 0.87);

  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.material-input:hover:not(:disabled) {
  --flux-input-border: 1px solid #bdbdbd;
}

.material-input:focus {
  --flux-input-border: 2px solid var(--flux-primary);
  --flux-input-focus-outline: none;
}

.material-input--error {
  --flux-input-border: 1px solid var(--flux-danger);
}

.material-input--error:focus {
  --flux-input-border: 2px solid var(--flux-danger);
}

/* === MATERIAL BUTTON === */
.material-button {
  --flux-button-padding: 8px 16px;
  --flux-button-font-size: 0.875rem;
  --flux-button-font-weight: 500;
  --flux-button-border-radius: 4px;

  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02857em;
}

/* === CONTAINED VARIANT === */
.material-button--contained.material-button--primary {
  --flux-button-bg: var(--flux-primary);
  --flux-button-color: #fff;
  --flux-button-hover-bg: var(--flux-primary-hover);
  --flux-button-border: none;

  background-color: var(--flux-primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2),
              0 2px 2px 0 rgba(0,0,0,0.14),
              0 1px 5px 0 rgba(0,0,0,0.12);
}

.material-button--contained.material-button--primary:hover:not(:disabled) {
  --flux-button-hover-bg: var(--flux-primary-hover);

  background-color: var(--flux-primary-hover) !important;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2),
              0 4px 5px 0 rgba(0,0,0,0.14),
              0 1px 10px 0 rgba(0,0,0,0.12);
}

.material-button--contained.material-button--secondary {
  --flux-button-bg: var(--flux-secondary);
  --flux-button-color: #fff;
  --flux-button-hover-bg: var(--flux-secondary-hover);

  background-color: var(--flux-secondary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2),
              0 2px 2px 0 rgba(0,0,0,0.14),
              0 1px 5px 0 rgba(0,0,0,0.12);
}

.material-button--contained.material-button--secondary:hover:not(:disabled) {
  background-color: var(--flux-secondary-hover) !important;
}

.material-button--contained.material-button--success {
  --flux-button-bg: var(--flux-success);
  --flux-button-color: #fff;
  --flux-button-hover-bg: var(--flux-success-hover);

  background-color: var(--flux-success) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2),
              0 2px 2px 0 rgba(0,0,0,0.14),
              0 1px 5px 0 rgba(0,0,0,0.12);
}

.material-button--contained.material-button--success:hover:not(:disabled) {
  background-color: var(--flux-success-hover) !important;
}

.material-button--contained.material-button--danger {
  --flux-button-bg: var(--flux-danger);
  --flux-button-color: #fff;
  --flux-button-hover-bg: var(--flux-danger-hover);

  background-color: var(--flux-danger) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2),
              0 2px 2px 0 rgba(0,0,0,0.14),
              0 1px 5px 0 rgba(0,0,0,0.12);
}

.material-button--contained.material-button--danger:hover:not(:disabled) {
  background-color: var(--flux-danger-hover) !important;
}

.material-button--contained.material-button--warning {
  --flux-button-bg: var(--flux-warning);
  --flux-button-color: #fff;
  --flux-button-hover-bg: var(--flux-warning-hover);

  background-color: var(--flux-warning) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2),
              0 2px 2px 0 rgba(0,0,0,0.14),
              0 1px 5px 0 rgba(0,0,0,0.12);
}

.material-button--contained.material-button--warning:hover:not(:disabled) {
  background-color: var(--flux-warning-hover) !important;
}

/* === OUTLINED VARIANT === */
.material-button--outlined.material-button--primary {
  --flux-button-bg: transparent;
  --flux-button-color: var(--flux-primary);
  --flux-button-border: 1px solid var(--flux-primary);
  --flux-button-hover-bg: rgba(59, 130, 246, 0.04);

  background-color: transparent !important;
  color: var(--flux-primary) !important;
  border: 1px solid var(--flux-primary) !important;
}

.material-button--outlined.material-button--primary:hover:not(:disabled) {
  background-color: rgba(59, 130, 246, 0.08) !important;
}

.material-button--outlined.material-button--secondary {
  --flux-button-bg: transparent;
  --flux-button-color: var(--flux-secondary);
  --flux-button-border: 1px solid var(--flux-secondary);
  --flux-button-hover-bg: rgba(100, 116, 139, 0.04);

  background-color: transparent !important;
  color: var(--flux-secondary) !important;
  border: 1px solid var(--flux-secondary) !important;
}

.material-button--outlined.material-button--secondary:hover:not(:disabled) {
  background-color: rgba(100, 116, 139, 0.08) !important;
}

.material-button--outlined.material-button--success {
  --flux-button-bg: transparent;
  --flux-button-color: var(--flux-success);
  --flux-button-border: 1px solid var(--flux-success);
  --flux-button-hover-bg: rgba(16, 185, 129, 0.04);

  background-color: transparent !important;
  color: var(--flux-success) !important;
  border: 1px solid var(--flux-success) !important;
}

.material-button--outlined.material-button--success:hover:not(:disabled) {
  background-color: rgba(16, 185, 129, 0.08) !important;
}

.material-button--outlined.material-button--danger {
  --flux-button-bg: transparent;
  --flux-button-color: var(--flux-danger);
  --flux-button-border: 1px solid var(--flux-danger);
  --flux-button-hover-bg: rgba(239, 68, 68, 0.04);

  background-color: transparent !important;
  color: var(--flux-danger) !important;
  border: 1px solid var(--flux-danger) !important;
}

.material-button--outlined.material-button--danger:hover:not(:disabled) {
  background-color: rgba(239, 68, 68, 0.08) !important;
}

.material-button--outlined.material-button--warning {
  --flux-button-bg: transparent;
  --flux-button-color: var(--flux-warning);
  --flux-button-border: 1px solid var(--flux-warning);
  --flux-button-hover-bg: rgba(245, 158, 11, 0.04);

  background-color: transparent !important;
  color: var(--flux-warning) !important;
  border: 1px solid var(--flux-warning) !important;
}

.material-button--outlined.material-button--warning:hover:not(:disabled) {
  background-color: rgba(245, 158, 11, 0.08) !important;
}

/* === TEXT VARIANT === */
.material-button--text.material-button--primary {
  --flux-button-bg: transparent;
  --flux-button-color: var(--flux-primary);
  --flux-button-border: none;
  --flux-button-hover-bg: rgba(59, 130, 246, 0.04);

  background-color: transparent !important;
  color: var(--flux-primary) !important;
  border: none !important;
}

.material-button--text.material-button--primary:hover:not(:disabled) {
  background-color: rgba(59, 130, 246, 0.08) !important;
}

.material-button--text.material-button--secondary {
  --flux-button-bg: transparent;
  --flux-button-color: var(--flux-secondary);
  --flux-button-border: none;
  --flux-button-hover-bg: rgba(100, 116, 139, 0.04);

  background-color: transparent !important;
  color: var(--flux-secondary) !important;
  border: none !important;
}

.material-button--text.material-button--secondary:hover:not(:disabled) {
  background-color: rgba(100, 116, 139, 0.08) !important;
}

.material-button--text.material-button--success {
  --flux-button-bg: transparent;
  --flux-button-color: var(--flux-success);
  --flux-button-border: none;
  --flux-button-hover-bg: rgba(16, 185, 129, 0.04);

  background-color: transparent !important;
  color: var(--flux-success) !important;
  border: none !important;
}

.material-button--text.material-button--success:hover:not(:disabled) {
  background-color: rgba(16, 185, 129, 0.08) !important;
}

.material-button--text.material-button--danger {
  --flux-button-bg: transparent;
  --flux-button-color: var(--flux-danger);
  --flux-button-border: none;
  --flux-button-hover-bg: rgba(239, 68, 68, 0.04);

  background-color: transparent !important;
  color: var(--flux-danger) !important;
  border: none !important;
}

.material-button--text.material-button--danger:hover:not(:disabled) {
  background-color: rgba(239, 68, 68, 0.08) !important;
}

.material-button--text.material-button--warning {
  --flux-button-bg: transparent;
  --flux-button-color: var(--flux-warning);
  --flux-button-border: none;
  --flux-button-hover-bg: rgba(245, 158, 11, 0.04);

  background-color: transparent !important;
  color: var(--flux-warning) !important;
  border: none !important;
}

.material-button--text.material-button--warning:hover:not(:disabled) {
  background-color: rgba(245, 158, 11, 0.08) !important;
}

/* === BUTTON SIZES === */
.material-button--sm {
  --flux-button-padding: 4px 10px;
  --flux-button-font-size: 0.8125rem;
}

.material-button--lg {
  --flux-button-padding: 12px 22px;
  --flux-button-font-size: 0.9375rem;
}

/* === MATERIAL TABLE === */
.material-table {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.material-table--elevated .flux-table-wrapper {
  box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2),
              0 1px 1px 0 rgba(0,0,0,0.14),
              0 1px 3px 0 rgba(0,0,0,0.12);
  border-radius: 4px;
}

/* === MATERIAL SEARCH INPUT === */
.material-search-input {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === MATERIAL DATE INPUT === */
.material-date-input {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === MATERIAL SELECT === */
.material-select {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === MATERIAL FORM === */
.material-form {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === MATERIAL FORM GROUP === */
.material-form-group {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === MATERIAL FORM FIELD === */
.material-form-field .flux-form-field-label {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.00938em;
  color: rgba(0, 0, 0, 0.6);
}

/* === MATERIAL CARD === */
.material-card {
  border-radius: 4px;
}

.material-card--elevated {
  box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2),
              0 1px 1px 0 rgba(0,0,0,0.14),
              0 1px 3px 0 rgba(0,0,0,0.12);
}

/* === MATERIAL ALERT === */
.material-alert {
  border-radius: 4px;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === MATERIAL TABS === */
.material-tabs {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === MATERIAL CHECKBOX === */
.material-checkbox {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === MATERIAL SWITCH === */
.material-switch {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === MATERIAL TEXTAREA === */
.material-textarea {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === MATERIAL BADGE === */
.material-badge {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: 0.02857em;
}

/* === MATERIAL PAGINATION === */
.material-pagination {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}