/* ========================================
   MATERIAL DESIGN 3 - FORMS & BUTTONS
   Abie Messenger
   ======================================== */

/* ========================================
   FORM CONTAINERS
   ======================================== */
.user-form,
.form-row {
  margin-bottom: 20px;
}

.form-row label {
  display: block;
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 8px;
}

/* ========================================
   TEXT FIELDS (Outlined Style)
   ======================================== */
.user-form input,
.user-form select,
.form-row input,
.form-row select {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  font-family: var(--md-sys-typescale-body-large-font-family);
  font-size: var(--md-sys-typescale-body-large-font-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  color: var(--md-sys-color-on-surface);
  background: transparent;
  margin-bottom: 16px;
  transition:
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    border-width var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.user-form input::placeholder,
.form-row input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

.user-form input:hover,
.user-form select:hover,
.form-row input:hover,
.form-row select:hover {
  border-color: var(--md-sys-color-on-surface);
}

.user-form input:focus,
.user-form select:focus,
.form-row input:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  padding: 15px; /* Compensate for thicker border */
}

/* Search input special */
.search-input {
  margin-bottom: 12px;
}

/* Form actions container */
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* ========================================
   BUTTONS - MD3 STYLES
   ======================================== */

/* Filled Button (Primary) */
.btn-primary {
  flex: 1;
  padding: 16px 24px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
  cursor: pointer;
  transition:
    box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.btn-primary:hover {
  box-shadow: var(--md-sys-elevation-level1);
}

.btn-primary:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-primary:active::before {
  opacity: var(--md-sys-state-pressed-opacity);
}

.btn-primary:disabled {
  background: var(--md-sys-color-on-surface);
  color: var(--md-sys-color-surface);
  opacity: 0.12;
  cursor: not-allowed;
  box-shadow: none;
}

/* Smaller Primary Button */
.btn-primary-small {
  padding: 10px 20px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-label-medium-font-family);
  font-size: var(--md-sys-typescale-label-medium-font-size);
  font-weight: var(--md-sys-typescale-label-medium-font-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
  cursor: pointer;
  white-space: nowrap;
  transition:
    box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}

.btn-primary-small::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.btn-primary-small:hover {
  box-shadow: var(--md-sys-elevation-level1);
}

.btn-primary-small:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

/* Tonal Button (Secondary) */
.btn-secondary {
  flex: 1;
  padding: 16px 24px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
  cursor: pointer;
  transition:
    box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}

.btn-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.btn-secondary:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.btn-secondary:active {
  transform: scale(0.98);
}

.btn-secondary:active::before {
  opacity: var(--md-sys-state-pressed-opacity);
}

/* Success Button (Tertiary) */
.btn-success {
  padding: 12px 24px;
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
  cursor: pointer;
  transition:
    box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}

.btn-success::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.btn-success:hover {
  box-shadow: var(--md-sys-elevation-level1);
}

.btn-success:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

/* Danger Button (Error) */
.btn-danger {
  width: 100%;
  padding: 16px 24px;
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
  cursor: pointer;
  transition:
    box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}

.btn-danger::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.btn-danger:hover {
  box-shadow: var(--md-sys-elevation-level1);
}

.btn-danger:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.btn-danger:active {
  transform: scale(0.98);
}

/* Small Delete Button */
.btn-delete {
  padding: 8px 16px;
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-label-medium-font-family);
  font-size: var(--md-sys-typescale-label-medium-font-size);
  font-weight: var(--md-sys-typescale-label-medium-font-weight);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.btn-delete:hover {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}

.btn-delete:disabled {
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
  opacity: 0.38;
  cursor: not-allowed;
}

/* ========================================
   ROLE BUTTONS (Filter Chips Style)
   ======================================== */
.role-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.role-btn {
  padding: 8px 16px;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}

.role-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.role-btn:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.role-btn.active,
.role-btn.selected {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}

/* Add role button */
.role-btn-add {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-color: transparent;
}

.role-btn-add:hover {
  box-shadow: var(--md-sys-elevation-level1);
}

/* Small Role Buttons */
.role-buttons-small {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.role-btn-small {
  padding: 6px 12px;
  border: none;
  border-radius: var(--md-sys-shape-corner-small);
  font-family: var(--md-sys-typescale-label-medium-font-family);
  font-size: var(--md-sys-typescale-label-medium-font-size);
  font-weight: var(--md-sys-typescale-label-medium-font-weight);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.role-btn-small.role-btn-add {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

.role-btn-small.role-btn-add:hover {
  background: var(--md-sys-color-success);
  color: var(--md-sys-color-on-success);
}

.role-btn-small.role-btn-remove {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.role-btn-small.role-btn-remove:hover {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}

/* ========================================
   OUTLINED BUTTON
   ======================================== */
.btn-outlined {
  padding: 16px 24px;
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}

.btn-outlined::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-primary);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.btn-outlined:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.btn-outlined:hover {
  border-color: var(--md-sys-color-primary);
}

/* ========================================
   TEXT BUTTON
   ======================================== */
.btn-text {
  padding: 10px 16px;
  background: transparent;
  color: var(--md-sys-color-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}

.btn-text::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-primary);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.btn-text:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

/* ========================================
   ICON BUTTON
   ======================================== */
.btn-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}

.btn-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  border-radius: inherit;
}

.btn-icon:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.btn-icon:active::before {
  opacity: var(--md-sys-state-pressed-opacity);
}

/* Filled Icon Button */
.btn-icon-filled {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.btn-icon-filled:hover {
  box-shadow: var(--md-sys-elevation-level1);
}

/* Tonal Icon Button */
.btn-icon-tonal {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* ========================================
   FAB (Floating Action Button)
   ======================================== */
.btn-fab {
  width: 56px;
  height: 56px;
  padding: 0;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-large);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--md-sys-elevation-level3);
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}

.btn-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  border-radius: inherit;
}

.btn-fab:hover {
  box-shadow: var(--md-sys-elevation-level4);
}

.btn-fab:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.btn-fab:active::before {
  opacity: var(--md-sys-state-pressed-opacity);
}

/* Small FAB */
.btn-fab-small {
  width: 40px;
  height: 40px;
  font-size: 20px;
  border-radius: var(--md-sys-shape-corner-medium);
}

/* Extended FAB */
.btn-fab-extended {
  width: auto;
  padding: 16px 20px;
  gap: 8px;
}

.btn-fab-extended span {
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
}