/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Standardized Form Input Styles - Only apply to inputs without DaisyUI classes */
input:not([class*="input"]):not([class*="btn"]):not([type="checkbox"]):not([type="radio"]), 
textarea:not([class*="textarea"]), 
select:not([class*="select"]) {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #d1d5db; /* gray-300 */
  border-radius: 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  background-color: white;
  transition: all 0.2s ease-in-out;
  font-family: inherit;
  box-sizing: border-box;
}

input:not([class*="input"]):not([class*="btn"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), 
select:not([class*="select"]) {
  height: 3rem; /* Fixed height for consistent icon alignment */
}

textarea:not([class*="textarea"]) {
  min-height: 6rem; /* Minimum height for textareas */
  resize: vertical;
}

input:not([class*="input"]):not([class*="btn"]):hover, 
textarea:not([class*="textarea"]):hover, 
select:not([class*="select"]):hover {
  border-color: #3b82f6; /* blue-500 */
}

input:not([class*="input"]):not([class*="btn"]):focus, 
textarea:not([class*="textarea"]):focus, 
select:not([class*="select"]):focus {
  outline: none;
  border-color: #8b5cf6; /* purple-500 */
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

input:not([class*="input"]):not([class*="btn"]):disabled, 
textarea:not([class*="textarea"]):disabled, 
select:not([class*="select"]):disabled {
  background-color: #f3f4f6; /* gray-100 */
  border-color: #e5e7eb; /* gray-200 */
  color: #9ca3af; /* gray-400 */
  cursor: not-allowed;
}

/* Label styles */
label {
  display: block;
  font-weight: 600;
  color: #374151; /* gray-700 */
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

/* Input group with icons */
.input-group {
  position: relative;
}

.input-group input + i,
.input-group select + i {
  position: absolute;
  left: 0.75rem;
  top: 3.25rem; /* Label height + margin + half input height */
  color: #9ca3af; /* gray-400 */
  pointer-events: none;
  z-index: 10;
  font-size: 1rem;
  transform: translateY(-50%);
}

.input-group textarea + i {
  position: absolute;
  left: 0.75rem;
  top: 2.5rem; /* Label height + margin + padding */
  color: #9ca3af; /* gray-400 */
  pointer-events: none;
  z-index: 10;
  font-size: 1rem;
}

.input-group input, 
.input-group textarea, 
.input-group select {
  padding-left: 2.5rem;
}

/* Focus state for icons - using :focus-within since icon comes after input */
.input-group:focus-within i {
  color: #8b5cf6; /* purple-500 */
}

/* Checkbox and radio button styles */
input[type="checkbox"], 
input[type="radio"] {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  accent-color: #8b5cf6; /* purple-500 */
  padding: 0;
  vertical-align: middle;
  flex-shrink: 0;
}

/* File input styles */
input[type="file"] {
  padding: 0.5rem;
  border: 2px dashed #d1d5db;
  background-color: #f9fafb;
}

input[type="file"]:hover {
  border-color: #3b82f6;
  background-color: #f0f9ff;
}

input[type="file"]:focus {
  border-color: #8b5cf6;
  background-color: #faf5ff;
}

/* Error states */
input.error, 
textarea.error, 
select.error {
  border-color: #ef4444; /* red-500 */
}

input.error:focus, 
textarea.error:focus, 
select.error:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Success states */
input.success, 
textarea.success, 
select.success {
  border-color: #10b981; /* green-500 */
}

input.success:focus, 
textarea.success:focus, 
select.success:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Button and Submit Input Styles - Only apply to buttons without DaisyUI classes */
button:not([class*="btn"]), 
input[type="submit"]:not([class*="btn"]), 
input[type="button"]:not([class*="btn"]), 
input[type="reset"]:not([class*="btn"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-family: inherit;
  box-sizing: border-box;
  width: auto; /* Override the global input width:100% */
  height: auto; /* Override the global input height */
  
  /* Default button styling */
  background-color: #3b82f6; /* blue-500 */
  color: white;
}

button:not([class*="btn"]):hover, 
input[type="submit"]:not([class*="btn"]):hover, 
input[type="button"]:not([class*="btn"]):hover, 
input[type="reset"]:not([class*="btn"]):hover {
  background-color: #2563eb; /* blue-600 */
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  border-color: transparent; /* Ensure hover doesn't show default input border */
}

button:not([class*="btn"]):focus, 
input[type="submit"]:not([class*="btn"]):focus, 
input[type="button"]:not([class*="btn"]):focus, 
input[type="reset"]:not([class*="btn"]):focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
  border-color: transparent;
}

button:not([class*="btn"]):active, 
input[type="submit"]:not([class*="btn"]):active, 
input[type="button"]:not([class*="btn"]):active, 
input[type="reset"]:not([class*="btn"]):active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

button:not([class*="btn"]):disabled, 
input[type="submit"]:not([class*="btn"]):disabled, 
input[type="button"]:not([class*="btn"]):disabled, 
input[type="reset"]:not([class*="btn"]):disabled {
  background-color: #9ca3af; /* gray-400 */
  color: white;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Ensure Tailwind classes override these defaults */
.bg-pink-600 {
  background-color: #db2777 !important;
}

.bg-pink-700 {
  background-color: #be185d !important;
}

.text-white {
  color: white !important;
}

/* Dashboard sidebar improvements */
#dashboard-sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#dashboard-sidebar nav {
  flex: 1;
  overflow-y: auto;
}

#dashboard-sidebar .menu li a,
#dashboard-sidebar .menu li .link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  transition: background-color 0.2s ease;
}

#dashboard-sidebar .menu li a:hover,
#dashboard-sidebar .menu li .link:hover {
  background-color: #f1f5f9; /* slate-100 */
}

/* Ensure user info in sidebar doesn't get too compressed */
#dashboard-sidebar .user-info {
  min-width: 0;
}

#dashboard-sidebar .user-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}