/* ========================================
   DRUPAL ADMIN INTERFACE COMPATIBILITY
======================================== */

/**
 * This file contains CSS rules to ensure proper compatibility
 * between the custom theme and Drupal's administrative interface.
 * It addresses z-index conflicts and layout issues.
 */

/* ========================================
   ADMIN TOOLBAR Z-INDEX FIXES
======================================== */

/* Force admin toolbar to always stay on top */
#toolbar-administration,
.toolbar-bar,
.toolbar-tray,
.toolbar-menu,
.toolbar-icon,
.toolbar-menu-administration,
.toolbar-tray-horizontal,
.toolbar-tray-vertical {
  z-index: 999999 !important;
}

/* Admin overlay elements */
.ui-dialog,
.ui-widget-overlay,
.dropbutton-wrapper.open .dropbutton-widget,
.contextual .trigger,
.contextual-links {
  z-index: 999998 !important;
}

/* ========================================
   THEME HEADER ADJUSTMENTS FOR ADMIN
======================================== */

/* Lower theme header z-index when admin toolbar is present */
body.toolbar-horizontal .header,
body.toolbar-vertical .header {
  z-index: 500 !important;
}

/* Adjust header position for horizontal admin toolbar */
body.toolbar-horizontal .header {
  top: 39px;
}

body.toolbar-horizontal.toolbar-tray-open .header {
  top: 78px;
}

/* Ensure header doesn't interfere with vertical toolbar */
body.toolbar-vertical.toolbar-tray-open .header {
  left: 240px;
  right: 0;
  width: calc(100% - 240px);
}

/* ========================================
   MAIN CONTENT ADJUSTMENTS
======================================== */

/* Adjust main content margin for admin toolbar */
body.toolbar-horizontal .main-content {
  margin-top: 120px; /* 80px theme header + 40px admin toolbar */
}

body.toolbar-horizontal.toolbar-tray-open .main-content {
  margin-top: 160px; /* 80px theme header + 80px expanded admin toolbar */
}

body.toolbar-vertical.toolbar-tray-open .main-content {
  margin-left: 240px;
  width: calc(100% - 240px);
}

/* ========================================
   ADMIN PAGE SPECIFIC OVERRIDES
======================================== */

/* On admin pages, reduce header prominence */
body.path-admin .header {
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(5px);
}

/* Hide custom header on certain admin pages where it might interfere */
body.path-admin.page-node-add .header,
body.path-admin.page-node-edit .header {
  display: none;
}

/* Adjust content margins when header is hidden */
body.path-admin.page-node-add .main-content,
body.path-admin.page-node-edit .main-content {
  margin-top: 78px; /* Only admin toolbar margin */
}

/* ========================================
   RESPONSIVE ADMIN COMPATIBILITY
======================================== */

/* Mobile admin toolbar adjustments */
@media screen and (max-width: 767px) {
  body.toolbar-horizontal .header {
    top: 39px;
  }

  body.toolbar-horizontal .main-content {
    margin-top: 120px;
  }

  /* Hide mobile menu toggle when admin toolbar is present */
  body.toolbar-horizontal .mobile-menu-toggle {
    display: none;
  }
}

/* Tablet adjustments */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body.toolbar-vertical.toolbar-tray-open .header {
    left: 240px;
    width: calc(100% - 240px);
  }
}

/* ========================================
   CONTEXTUAL LINKS AND OVERLAYS
======================================== */

/* Ensure contextual links appear above theme elements */
.contextual-region .contextual {
  z-index: 999997 !important;
}

/* Quick edit and other overlay elements */
.quickedit-toolbar,
.quickedit-toolbar-container {
  z-index: 999996 !important;
}

/* CKEditor overlays */
.cke_dialog,
.cke_dialog_background_cover {
  z-index: 999995 !important;
}

/* ========================================
   ADMIN MENU DROPDOWN FIXES
======================================== */

/* Ensure admin menu dropdowns appear correctly */
.toolbar-tray-horizontal .toolbar-menu,
.toolbar-tray-horizontal .menu-item {
  z-index: 999999 !important;
}

.toolbar-tray-horizontal .menu-item .menu {
  z-index: 999999 !important;
  position: relative;
}

/* Fix any box-shadow issues with dropdowns */
.toolbar-tray-horizontal {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* ========================================
   LOCAL TASKS (ADMIN TABS) STYLING
======================================== */

/**
 * Style the primary local tasks (View, Edit, Delete, Revisions)
 * to match the theme's brand colors and design system.
 * Uses specific selectors to avoid affecting other links.
 */

/* Container styling for local tasks */
body.path-admin .block--id-artifactinfo-primary-local-tasks {
  background: rgba(26, 26, 26, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 20px;
  margin-top: 50px;
  border: 1px solid rgba(168, 166, 161, 0.2);
}

/* Hide the visually-hidden heading but keep it accessible */
body.path-admin .block--id-artifactinfo-primary-local-tasks h2.visually-hidden {
  /* Keep Drupal's visually-hidden class intact for accessibility */
}

/* Style the tabs list */
body.path-admin .block--id-artifactinfo-primary-local-tasks ul {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

body.path-admin .block--id-artifactinfo-primary-local-tasks li {
  margin: 0;
  padding: 0;
}

/* Style the tab links */
body.path-admin .block--id-artifactinfo-primary-local-tasks ul li a {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background-color: transparent;
  color: #A8A6A1;
  text-decoration: none;
  font-family: var(--font-family-body, "Montserrat", sans-serif);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: var(--letter-spacing-wide, 0.025em);
  border: 2px solid rgba(168, 166, 161, 0.3);
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Hover state for tab links */
body.path-admin .block--id-artifactinfo-primary-local-tasks ul li a:hover {
  background-color: rgba(168, 166, 161, 0.1);
  border-color: #A8A6A1;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(168, 166, 161, 0.2);
}

/* Active/current tab styling */
body.path-admin .block--id-artifactinfo-primary-local-tasks ul li a.is-active,
body.path-admin .block--id-artifactinfo-primary-local-tasks ul li a[aria-current="page"] {
  background-color: #A8A6A1;
  color: #000000;
  border-color: #A8A6A1;
  font-weight: var(--font-weight-semibold, 600);
}

/* Active tab hover state */
body.path-admin .block--id-artifactinfo-primary-local-tasks ul li a.is-active:hover,
body.path-admin .block--id-artifactinfo-primary-local-tasks ul li a[aria-current="page"]:hover {
  background-color: #FFFFFF;
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

/* Focus states for accessibility */
body.path-admin .block--id-artifactinfo-primary-local-tasks ul li a:focus {
  outline: 2px solid #A8A6A1;
  outline-offset: 2px;
  background-color: rgba(168, 166, 161, 0.1);
}

body.path-admin .block--id-artifactinfo-primary-local-tasks ul li a.is-active:focus,
body.path-admin .block--id-artifactinfo-primary-local-tasks ul li a[aria-current="page"]:focus {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* Subtle animation effect */
body.path-admin .block--id-artifactinfo-primary-local-tasks ul li a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(168, 166, 161, 0.1), transparent);
  transition: left 0.5s ease;
}

body.path-admin .block--id-artifactinfo-primary-local-tasks ul li a:hover::before {
  left: 100%;
}

/* Responsive adjustments for mobile */
@media screen and (max-width: 768px) {
  body.path-admin .block--id-artifactinfo-primary-local-tasks {
    padding: 10px 15px;
    margin-bottom: 15px;
  }

  body.path-admin .block--id-artifactinfo-primary-local-tasks ul {
    gap: 10px;
  }

  body.path-admin .block--id-artifactinfo-primary-local-tasks ul li a {
    padding: 8px 15px;
    font-size: var(--font-size-xs, 0.75rem);
  }
}

/* Extra small screens */
@media screen and (max-width: 480px) {
  body.path-admin .block--id-artifactinfo-primary-local-tasks ul {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body.path-admin .block--id-artifactinfo-primary-local-tasks ul li a {
    justify-content: center;
    text-align: center;
  }
}