/**
 * @file
 * Styles for Impact Issue form enhancements.
 */

/* Helper Text */
.pps-impact-helper-text {
  margin-bottom: 15px;
  padding: 12px 15px;
  background: #e7f4ff;
  border-left: 4px solid #007cba;
  border-radius: 4px;
  font-size: 14px;
}

.pps-impact-helper-text p {
  margin: 0;
  color: #004085;
}

.pps-impact-helper-text strong {
  color: #003366;
  font-weight: 600;
}

/* Enhanced Tab Styling */
.horizontal-tabs-list .horizontal-tab-button a,
.tabs__tab a {
  position: relative;
  transition: all 0.3s ease;
}

.horizontal-tabs-list .horizontal-tab-button.selected a,
.tabs__tab.is-active a {
  font-weight: 600;
}

/* Field Group Tabs Enhancement */
.field-group-tabs-wrapper {
  margin-bottom: 30px;
}

.field-group-tab {
  padding: 20px;
}

.field-group-tab .description {
  margin-bottom: 20px;
  padding: 10px 15px;
  background: #f0f8ff;
  border-left: 3px solid #17a2b8;
  border-radius: 4px;
  font-size: 14px;
  color: #004085;
}

/* Inside APTA Helper */
.inside-apta-helper {
  margin-bottom: 10px;
  padding: 8px 12px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  font-size: 13px;
  color: #856404;
}

.inside-apta-helper strong {
  color: #664d03;
  font-weight: 600;
}

/* Main Featured Article */
.inline-entity-form.main-featured {
  position: relative;
  background: linear-gradient(135deg, #f8f0ff 0%, #fff 100%);
  border: 2px solid #7b3f99;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
}

.main-featured-label {
  position: absolute;
  top: -12px;
  left: 20px;
  background: #7b3f99;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Inline Entity Form Enhancements */
.inline-entity-form {
  margin-bottom: 20px;
  padding: 15px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.inline-entity-form:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.inline-entity-form legend {
  font-weight: 600;
  color: #212529;
  font-size: 16px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e9ecef;
}

/* IEF Table Styling */
.ief-entity-table {
  width: 100%;
  margin-top: 15px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  overflow: hidden;
}

.ief-entity-table thead {
  background: #f8f9fa;
}

.ief-entity-table th {
  padding: 10px;
  font-weight: 600;
  color: #495057;
  border-bottom: 2px solid #dee2e6;
}

.ief-entity-table td {
  padding: 10px;
  border-bottom: 1px solid #e9ecef;
}

.ief-entity-table tbody tr:hover {
  background: #f8f9fa;
}

/* Field Multiple Table Enhancement (for paragraphs) */
.field-multiple-table {
  margin-top: 15px;
}

.field-multiple-table .draggable {
  background: white;
  border: 1px solid #dee2e6;
  margin-bottom: 10px;
  border-radius: 4px;
}

.field-multiple-table .draggable:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Paragraphs Subform */
.paragraphs-subform {
  padding: 15px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  margin-bottom: 15px;
}

.paragraphs-subform .paragraph-type-title {
  font-weight: 600;
  color: #495057;
  margin-bottom: 10px;
}

/* Validation Messages Enhancement */
.messages--warning {
  border-left: 4px solid #ffc107;
  background: #fff3cd;
  color: #856404;
  padding: 12px 15px;
  margin: 15px 0;
  border-radius: 4px;
}

.messages--warning h2 {
  color: #664d03;
  font-size: 16px;
  margin-bottom: 8px;
}

/* Form Actions Enhancement */
.form-actions {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid #dee2e6;
}

.form-actions input.form-submit {
  margin-right: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .inline-entity-form {
    padding: 10px;
  }
  
  .main-featured-label {
    position: static;
    display: inline-block;
    margin-bottom: 10px;
  }
}

/* Keyboard Navigation Indicator */
.keyboard-focus {
  outline: 3px solid #007cba;
  outline-offset: 2px;
}

/* Loading States */
.ajax-progress-throbber {
  display: inline-block;
  margin-left: 10px;
}

.ajax-new-content {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Print Styles */
@media print {
  .form-actions,
  .messages {
    display: none;
  }
  
  .inline-entity-form {
    page-break-inside: avoid;
  }
}

/* Custom Accordion Styling for Article Fields */
.pps-impact-accordion-field {
  position: relative;
}

.pps-impact-article-accordion {
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: white;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.pps-impact-article-accordion:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Accordion Header */
.pps-impact-accordion-header {
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  position: relative;
}

.accordion-toggle {
  padding: 12px 15px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #495057;
  transition: background-color 0.3s ease;
}

.accordion-toggle:hover {
  background: #e9ecef;
}

.accordion-toggle:focus {
  outline: 2px solid #007cba;
  outline-offset: -2px;
  background: #e9ecef;
}

.accordion-icon {
  margin-right: 8px;
  font-size: 12px;
  color: #6c757d;
  transition: transform 0.3s ease;
  min-width: 12px;
}

.accordion-title {
  flex-grow: 1;
  font-weight: 600;
}

/* Removed accordion-summary - title now includes everything */

/* Accordion Content - Works with fieldset structure */
.pps-impact-article-accordion.accordion-collapsed .fieldset__wrapper > *:not(.pps-impact-accordion-header) {
  display: none;
}

.pps-impact-article-accordion.accordion-expanded .fieldset__wrapper > *:not(.pps-impact-accordion-header) {
  display: block;
}

/* Hide the fieldset legend since we have our own header */
.pps-impact-article-accordion .fieldset__legend {
  display: none;
}

.pps-impact-article-accordion .fieldset__wrapper {
  padding: 0;
}

.pps-impact-article-accordion.accordion-expanded .fieldset__wrapper {
  padding: 0 0 15px 0;
}

/* First Article Special Styling */
.pps-impact-article-accordion[data-delta="0"] {
  border-left: 4px solid #007cba;
}

.pps-impact-article-accordion[data-delta="0"] .pps-impact-accordion-header {
  background: linear-gradient(135deg, #e7f4ff 0%, #f8f9fa 100%);
}

/* Removed star icon from first article */

/* Smooth Transitions */
.pps-impact-article-accordion.accordion-expanded .accordion-icon {
  transform: rotate(0deg);
}

.pps-impact-article-accordion.accordion-collapsed .accordion-icon {
  transform: rotate(-90deg);
}

/* Empty state now handled by JavaScript in the title */

/* Focus Management */
.pps-impact-article-accordion.accordion-expanded {
  border-color: #007cba;
}

/* Animation for Expand/Collapse */
@keyframes accordionExpand {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pps-impact-article-accordion.accordion-expanded .fieldset__wrapper > *:not(.pps-impact-accordion-header) {
  animation: accordionExpand 0.3s ease-out;
}

/* Layout improvements for moved sidebar content */

/* Expand layout container for Impact Issue forms */
.node-impact-issue-form .layout-container,
.node-impact-issue-edit-form .layout-container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Expand main page content area */
.node-impact-issue-form .page-content,
.node-impact-issue-edit-form .page-content {
  max-width: none !important;
  width: 100% !important;
}

/* Layout node form adjustments */
.node-impact-issue-form .layout-node-form,
.node-impact-issue-edit-form .layout-node-form {
  display: block !important; /* Remove side-by-side layout */
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* FORCE 80% width layout with higher specificity */
body.path-node form.node-impact-issue-form .layout-region--node-main,
body.path-node form.node-impact-issue-edit-form .layout-region--node-main {
  width: 80% !important;
  max-width: 1200px !important; /* Cap maximum width */
  min-width: 600px !important; /* Ensure minimum usability */
  float: none !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  padding: 0 20px !important; /* Inner padding for content */
}

/* Force consistent width for region content */
body.path-node form.node-impact-issue-form .layout-region--node-main .layout-region__content,
body.path-node form.node-impact-issue-edit-form .layout-region--node-main .layout-region__content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* FORCE sidebar to match main region width exactly */
body.path-node form.node-impact-issue-form .layout-region--node-secondary,
body.path-node form.node-impact-issue-edit-form .layout-region--node-secondary {
  display: block !important;
  width: 80% !important;
  max-width: 1200px !important; /* Same cap as main region */
  min-width: 600px !important; /* Same minimum as main region */
  float: none !important;
  clear: both !important;
  margin: 30px auto 0 auto !important;
  box-sizing: border-box !important;
  padding: 0 20px !important; /* Same padding as main region */
  order: 2 !important;
}

/* Force sidebar content to match */
body.path-node form.node-impact-issue-form .layout-region--node-secondary .layout-region__content,
body.path-node form.node-impact-issue-edit-form .layout-region--node-secondary .layout-region__content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure the layout container still allows full width for centering */
.node-impact-issue-form .layout-container,
.node-impact-issue-edit-form .layout-container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Expand form fields and content areas */
.node-impact-issue-form .horizontal-tabs,
.node-impact-issue-edit-form .horizontal-tabs {
  width: 100% !important;
  max-width: none !important;
}

.node-impact-issue-form .horizontal-tabs-panes,
.node-impact-issue-edit-form .horizontal-tabs-panes {
  width: 100% !important;
  max-width: none !important;
}

/* Expand text areas and CKEditor instances */
.node-impact-issue-form textarea,
.node-impact-issue-edit-form textarea {
  width: 100% !important;
  max-width: none !important;
}

.node-impact-issue-form .ck-editor__editable,
.node-impact-issue-edit-form .ck-editor__editable {
  min-height: 300px !important;
}

/* Make tables responsive and full width */
.node-impact-issue-form .field-multiple-table,
.node-impact-issue-edit-form .field-multiple-table {
  width: 100% !important;
  max-width: none !important;
}

/* Sidebar accordion styling at bottom of form */
.node-impact-issue-form .layout-region--node-secondary .accordion,
.node-impact-issue-edit-form .layout-region--node-secondary .accordion {
  border-top: 2px solid #dee2e6;
  padding-top: 20px;
  margin-top: 20px;
}

.node-impact-issue-form .layout-region--node-secondary .entity-meta,
.node-impact-issue-edit-form .layout-region--node-secondary .entity-meta {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 0;
  margin-bottom: 20px;
}

/* Style the accordion items in the sidebar */
.node-impact-issue-form .layout-region--node-secondary .accordion__item,
.node-impact-issue-edit-form .layout-region--node-secondary .accordion__item {
  border-bottom: 1px solid #e9ecef;
}

.node-impact-issue-form .layout-region--node-secondary .accordion__item:last-child,
.node-impact-issue-edit-form .layout-region--node-secondary .accordion__item:last-child {
  border-bottom: none;
}

/* Form actions stay at bottom */
.node-impact-issue-form .form-actions,
.node-impact-issue-edit-form .form-actions {
  margin-top: 10px;
  border-top: 0 !important;
  background: white !important;
  padding: 5px;
}

/* High specificity responsive adjustments */
@media (max-width: 1200px) {
  /* Use more width on smaller screens */
  body.path-node form.node-impact-issue-form .layout-region--node-main,
  body.path-node form.node-impact-issue-edit-form .layout-region--node-main,
  body.path-node form.node-impact-issue-form .layout-region--node-secondary,
  body.path-node form.node-impact-issue-edit-form .layout-region--node-secondary {
    width: 90% !important;
    max-width: none !important;
    min-width: 400px !important;
  }
}

@media (max-width: 768px) {
  /* Use most of the width on mobile devices */
  body.path-node form.node-impact-issue-form .layout-region--node-main,
  body.path-node form.node-impact-issue-edit-form .layout-region--node-main,
  body.path-node form.node-impact-issue-form .layout-region--node-secondary,
  body.path-node form.node-impact-issue-edit-form .layout-region--node-secondary {
    width: 95% !important;
    max-width: none !important;
    min-width: 300px !important;
    padding: 0 10px !important;
  }
  
  body.path-node form.node-impact-issue-form .layout-region--node-secondary,
  body.path-node form.node-impact-issue-edit-form .layout-region--node-secondary {
    margin: 20px auto 0 auto !important;
  }
  
  body.path-node form.node-impact-issue-form .layout-region--node-secondary .entity-meta,
  body.path-node form.node-impact-issue-edit-form .layout-region--node-secondary .entity-meta {
    padding: 10px !important;
  }
}

/* ULTRA HIGH SPECIFICITY - Clean production layout */
html body.path-node.node-type-impact-issue div.layout-container main.page-content form.node-impact-issue-form div.layout-node-form div.layout-region.layout-region--node-main,
html body.path-node.node-type-impact-issue div.layout-container main.page-content form.node-impact-issue-edit-form div.layout-node-form div.layout-region.layout-region--node-main {
  width: 80% !important;
  max-width: 1200px !important;
  min-width: 600px !important;
  margin: 0 auto !important;
  float: none !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 0 20px !important;
}

html body.path-node.node-type-impact-issue div.layout-container main.page-content form.node-impact-issue-form div.layout-node-form div.layout-region.layout-region--node-secondary,
html body.path-node.node-type-impact-issue div.layout-container main.page-content form.node-impact-issue-edit-form div.layout-node-form div.layout-region.layout-region--node-secondary {
  width: 80% !important;
  max-width: 1200px !important;
  min-width: 600px !important;
  margin: 30px auto 0 auto !important;
  float: none !important;
  display: block !important;
  clear: both !important;
  box-sizing: border-box !important;
  padding: 0 20px !important;
}

/* Force the containers to not constrain */
html body.path-node.node-type-impact-issue div.layout-container,
html body.path-node.node-type-impact-issue main.page-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.path-node.node-type-impact-issue form.node-impact-issue-form div.layout-node-form,
html body.path-node.node-type-impact-issue form.node-impact-issue-edit-form div.layout-node-form {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
}

/* Debugging - add borders to see the regions clearly */
body.path-node form.node-impact-issue-form .layout-region--node-main,
body.path-node form.node-impact-issue-edit-form .layout-region--node-main {
  background: rgba(0, 124, 186, 0.02);
}

body.path-node form.node-impact-issue-form .layout-region--node-secondary,
body.path-node form.node-impact-issue-edit-form .layout-region--node-secondary {
  background: rgba(40, 167, 69, 0.02);
}