/**
 * Developer CSS - Custom styling for additional features
 * This file contains developer-specific CSS that won't conflict with designer CSS
 * Use this file for all custom developer styling needs
 */

/* ========================================
   LAYOUT BUILDER MODAL FIXES
   ======================================== */

/* Fix missing close button in Layout Builder modals */
.ui-dialog .ui-dialog-titlebar {
  position: relative;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  z-index: 10;
}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover {
  background: #c82333;
}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close::before {
  content: "×";
  font-size: 1.5rem;
  font-weight: bold;
}

/* Ensure the modal has proper styling */
.ui-dialog {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  overflow: hidden;
  border: none;
}

.ui-dialog .ui-dialog-content {
  padding: 1.5rem;
  background: white;
}

/* Layout Builder specific modal fixes */
.layout-builder-modal .ui-dialog-titlebar-close {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* If using Layout Builder Modal module */
.layout-builder-modal-dialog .ui-dialog-titlebar-close {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Alternative close button styling for Layout Builder */
.ui-dialog[aria-describedby*="layout-builder"] .ui-dialog-titlebar-close,
.ui-dialog[aria-describedby*="block-"] .ui-dialog-titlebar-close {
  display: block !important;
  background: #6c757d !important;
  color: white !important;
  border: none !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-align: center !important;
}

.ui-dialog[aria-describedby*="layout-builder"] .ui-dialog-titlebar-close:hover,
.ui-dialog[aria-describedby*="block-"] .ui-dialog-titlebar-close:hover {
  background: #5a6268 !important;
}

/* Ensure close button text is visible */
.ui-dialog-titlebar-close .ui-button-text {
  display: block !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: white !important;
}

/* Force visibility of close button */
.ui-dialog-titlebar-close {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* ========================================
   LAYOUT BUILDER INTERFACE STYLING
   ======================================== */

/* Layout Builder form wrapper */
.layout-builder-form {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* Layout Builder actions form - targeting the actual form */
form[data-drupal-selector="edit-actions"] {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Form wrapper styling */
.form-wrapper.mb-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem 0;
}

/* All submit buttons in Layout Builder */
input[data-drupal-selector*="edit-submit"],
input[data-drupal-selector*="edit-discard"],
input[data-drupal-selector*="edit-revert"] {
  background: linear-gradient(135deg, #007bff, #0056b3) !important;
  color: white !important;
  border: none !important;
  padding: 0.5rem 1rem !important;
  margin: 0.25rem 0.5rem 0.25rem 0 !important;
  border-radius: 4px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
  min-width: auto !important;
  width: auto !important;
  text-align: center !important;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Save layout button - specific targeting */
input[data-drupal-selector="edit-submit"][value*="Save"],
input[name="op"][value*="Save"] {
  background: linear-gradient(135deg, #28a745, #1e7e34) !important;
  margin-right: 1rem !important;
}

input[data-drupal-selector="edit-submit"][value*="Save"]:hover,
input[name="op"][value*="Save"]:hover {
  background: linear-gradient(135deg, #1e7e34, #155724) !important;
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Discard changes button */
input[data-drupal-selector*="edit-discard"],
input[name="op"][value*="Discard"] {
  background: linear-gradient(135deg, #dc3545, #c82333) !important;
}

input[data-drupal-selector*="edit-discard"]:hover,
input[name="op"][value*="Discard"]:hover {
  background: linear-gradient(135deg, #c82333, #a71e2a) !important;
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Revert to defaults button */
input[data-drupal-selector*="edit-revert"],
input[name="op"][value*="Revert"] {
  background: linear-gradient(135deg, #6c757d, #545b62) !important;
}

input[data-drupal-selector*="edit-revert"]:hover,
input[name="op"][value*="Revert"]:hover {
  background: linear-gradient(135deg, #545b62, #3e444a) !important;
  box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Bootstrap button overrides */
.btn.btn-primary.form-submit {
  background: linear-gradient(135deg, #28a745, #1e7e34) !important;
  border: none !important;
  padding: 0.5rem 1rem !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  min-width: auto !important;
  width: auto !important;
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2) !important;
  font-size: 0.875rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.btn.btn-primary.form-submit:hover {
  background: linear-gradient(135deg, #1e7e34, #155724) !important;
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Layout Builder message styling */
.layout-builder__message,
.messages--warning {
  background: linear-gradient(135deg, #fff3cd, #ffeaa7) !important;
  border: 1px solid #ffc107 !important;
  border-left: 4px solid #ffc107 !important;
  padding: 1rem !important;
  margin-bottom: 1rem !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  color: #856404 !important;
}

/* Form actions container */
.js-form-wrapper.form-wrapper.mb-3 {
  background: #f8f9fa;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  margin: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: #000;
}

#layout-builder-modal * textarea,
#layout-builder-modal *:not(div) textarea {
  min-height: 300px;
}

/* Ensure buttons stay in one line when possible */
.js-form-wrapper.form-wrapper.mb-3 input[type="submit"],
.js-form-wrapper.form-wrapper.mb-3 button,
.js-form-wrapper.form-wrapper.mb-3 .button {
  margin: 0 0.5rem 0 0 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Remove extra margins from form elements */
.js-form-wrapper.form-wrapper.mb-3>* {
  margin-bottom: 0 !important;
}

/* Layout Builder specific form actions */
.layout-builder .js-form-wrapper.form-wrapper.mb-3 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  padding: 0.5rem !important;
}

/* Layout Builder tools styling */
div[role="region"][aria-label*="Layout Builder tools"] {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Content preview toggle */
.form-type-checkbox label {
  font-weight: 500;
  color: #495057;
}

/* Responsive design */
@media (max-width: 768px) {
  .form-wrapper.mb-3 {
    flex-direction: column;
    align-items: stretch;
  }

  input[data-drupal-selector*="edit-submit"],
  input[data-drupal-selector*="edit-discard"],
  input[data-drupal-selector*="edit-revert"] {
    width: 100% !important;
    margin: 0.25rem 0 !important;
  }
}

/* Layout Builder action buttons container */
.layout-builder__message {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Layout Builder buttons styling */
.layout-builder__message .button,
.layout-builder__message .form-submit,
.layout-builder__message input[type="submit"] {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  margin: 0.25rem 0.5rem 0.25rem 0;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  min-width: 120px;
  text-align: center;
}

.layout-builder__message .button:hover,
.layout-builder__message .form-submit:hover,
.layout-builder__message input[type="submit"]:hover {
  background: linear-gradient(135deg, #0056b3, #004085);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

/* Save layout button - primary action */
.layout-builder__message .button--primary,
.layout-builder__message .form-submit[value*="Save"],
.layout-builder__message input[value*="Save"] {
  background: linear-gradient(135deg, #28a745, #1e7e34);
  margin-right: 1rem;
}

.layout-builder__message .button--primary:hover,
.layout-builder__message .form-submit[value*="Save"]:hover,
.layout-builder__message input[value*="Save"]:hover {
  background: linear-gradient(135deg, #1e7e34, #155724);
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

/* Discard changes button - secondary action */
.layout-builder__message .button--danger,
.layout-builder__message .form-submit[value*="Discard"],
.layout-builder__message input[value*="Discard"] {
  background: linear-gradient(135deg, #dc3545, #c82333);
}

.layout-builder__message .button--danger:hover,
.layout-builder__message .form-submit[value*="Discard"]:hover,
.layout-builder__message input[value*="Discard"]:hover {
  background: linear-gradient(135deg, #c82333, #a71e2a);
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

/* Revert to defaults button */
.layout-builder__message .button[value*="Revert"],
.layout-builder__message .form-submit[value*="Revert"],
.layout-builder__message input[value*="Revert"] {
  background: linear-gradient(135deg, #6c757d, #545b62);
}

.layout-builder__message .button[value*="Revert"]:hover,
.layout-builder__message .form-submit[value*="Revert"]:hover,
.layout-builder__message input[value*="Revert"]:hover {
  background: linear-gradient(135deg, #545b62, #3e444a);
  box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

/* Layout Builder actions form styling */
.layout-builder__message .form-actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Layout Builder warning message */
.layout-builder__message .messages--warning {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  color: #856404;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* Layout Builder info message */
.layout-builder__message .messages--status {
  background: #d1ecf1;
  border: 1px solid #bee5eb;
  color: #0c5460;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* Layout Builder unsaved changes warning */
.messages--warning {
  background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  border-left: 4px solid #ffc107;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Layout Builder sections and blocks styling */
.layout-builder-add-section,
.layout-builder-add-block {
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  margin: 1rem 0;
  transition: all 0.3s ease;
}

.layout-builder-add-section:hover,
.layout-builder-add-block:hover {
  border-color: #007bff;
  background: #e7f3ff;
}

.layout-builder-add-section .layout-builder__link,
.layout-builder-add-block .layout-builder__link {
  color: #007bff;
  font-weight: 500;
  text-decoration: none;
  font-size: 1rem;
}

.layout-builder-add-section .layout-builder__link:hover,
.layout-builder-add-block .layout-builder__link:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* Section configuration styling */
.layout-builder-configure-section {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  margin: 1rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.layout-builder-configure-section .layout-builder__link {
  color: #6c757d;
  padding: 0.5rem;
  display: inline-block;
}

/* Responsive design for buttons */
@media (max-width: 768px) {
  .layout-builder__message .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .layout-builder__message .button,
  .layout-builder__message .form-submit,
  .layout-builder__message input[type="submit"] {
    width: 100%;
    margin: 0.25rem 0;
  }
}

/* ========================================
   LOGIN PAGE STYLING
   ======================================== */

/* Hide header and footer on login page for cleaner look */
.page-user-login header,
.page-user-login footer {
  display: none;
}

/* Login page body styling */
.page-user-login {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* Main content area for login */
.page-user-login .layout-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* Login form wrapper - target the actual form container */
.page-user-login .content {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Login form styling */
.page-user-login .user-login-form {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  margin-top: 0;
}

/* Login form title area */
.page-user-login .user-login-form::before {
  content: "Welcome Back";
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  text-align: center;
  margin-bottom: 0.5rem;
}

.page-user-login .user-login-form::after {
  content: "Please sign in to your account";
  display: block;
  font-size: 1rem;
  color: #666;
  text-align: center;
  margin-bottom: 2rem;
}

/* Hide the local tasks (Log in / Reset password tabs) */
.page-user-login .tabs {
  display: none;
}

/* Form field styling */
.page-user-login .form-item {
  margin-bottom: 1.5rem;
  position: relative;
}

.page-user-login .form-item label {
  display: block;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.page-user-login .form-item input[type="text"],
.page-user-login .form-item input[type="password"],
.page-user-login .form-item input[type="email"] {
  width: 100%;
  padding: 1rem 1.2rem;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: #fff;
  box-sizing: border-box;
}

.page-user-login .form-item input[type="text"]:focus,
.page-user-login .form-item input[type="password"]:focus,
.page-user-login .form-item input[type="email"]:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
}

/* Login button styling */
.page-user-login .form-actions {
  margin-top: 2rem;
  text-align: center;
}

.page-user-login .form-submit,
.page-user-login .btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: none !important;
  padding: 1rem 2.5rem !important;
  border-radius: 12px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.page-user-login .form-submit:hover,
.page-user-login .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.page-user-login .form-submit:active,
.page-user-login .btn-primary:active {
  transform: translateY(0);
}

/* Password reset link styling */
.page-user-login .user-login-form .item-list ul,
.page-user-login .password-reset-links {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0 0;
  text-align: center;
}

.page-user-login .user-login-form .item-list li,
.page-user-login .password-reset-links li {
  margin: 0.5rem 0;
}

.page-user-login .user-login-form .item-list a,
.page-user-login .password-reset-links a {
  color: #667eea;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.page-user-login .user-login-form .item-list a:hover,
.page-user-login .password-reset-links a:hover {
  color: #764ba2;
  text-decoration: underline;
}

/* Error messages */
.page-user-login .messages--error {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.2);
}

/* Success messages */
.page-user-login .messages--status {
  background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 5px 15px rgba(81, 207, 102, 0.2);
}

/* Required field indicators */
.page-user-login .form-required::after {
  content: " *";
  color: #ff6b6b;
  font-weight: bold;
}

/* Add a "Forgot Password?" link at the bottom */
.page-user-login .user-login-form::after {
  content: "";
}

.page-user-login .form-actions::after {
  content: "Forgot your password?";
  display: block;
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: #667eea;
  cursor: pointer;
  transition: color 0.3s ease;
}

.page-user-login .form-actions::after:hover {
  color: #764ba2;
  text-decoration: underline;
}

/* Override any Bootstrap conflicting styles */
.page-user-login .form-control {
  background-color: #fff !important;
  border: 2px solid #e1e5e9 !important;
  border-radius: 12px !important;
  padding: 1rem 1.2rem !important;
}

.page-user-login .form-control:focus {
  border-color: #667eea !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .page-user-login .layout-container {
    padding: 1rem;
    min-height: 100vh;
  }

  .page-user-login .user-login-form {
    padding: 2rem 1.5rem;
    border-radius: 15px;
  }

  .page-user-login .user-login-form::before {
    font-size: 1.5rem;
  }
}

/* ========================================
   ADDITIONAL DEVELOPER UTILITIES
   ======================================== */

/* Debug helper classes (remove in production) */
.dev-debug {
  border: 2px solid red !important;
  background: rgba(255, 0, 0, 0.1) !important;
}

.dev-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dev-shadow {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Custom button styles for developer use */
.dev-btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dev-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

/* Custom form styling utilities */
.dev-form-modern input,
.dev-form-modern select,
.dev-form-modern textarea {
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  transition: all 0.3s ease;
}

.dev-form-modern input:focus,
.dev-form-modern select:focus,
.dev-form-modern textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Loading animations */
.dev-loading {
  position: relative;
}

.dev-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #667eea;
  border-radius: 50%;
  animation: dev-spin 1s linear infinite;
  transform: translate(-50%, -50%);
}

@keyframes dev-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ========================================
   END DEVELOPER CSS
   ======================================== */