/* ===================================================
   CENTRALIZED DROPDOWN STYLING
   ===================================================

   This file provides consistent styling for all dropdowns and select elements
   across the application. It replaces app-specific dropdown styling with a
   global implementation.
*/

/* Import centralized systems */
@import url("spacing.fcb7e2c7ab0a.css");
@import url("typography.9e7f37dc291d.css");
@import url("borders.d5d3bb34e628.css");
@import url("colour_scheme.58fe2f46e64e.css");
@import url("shadows.2216235621bb.css");
@import url("number_input.a08bdb004c43.css");

/* ===================================================
   BASE DROPDOWN COMPONENTS
   =================================================== */

/* Form Select Wrapper */
.form-select-wrapper {
  position: relative;
  display: inline-block;
}

/* Form Select */
.form-select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.5rem !important;
  cursor: pointer;
}

/* ===================================================
   SEARCH DROPDOWN COMPONENTS
   =================================================== */

/* Common search dropdown pattern used in join forms and analytics filters */
.search-dropdown-container {
  position: relative;
}

/* Generic search dropdown styling - used for username and student search */
.search-dropdown {
  position: absolute;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  background-color: var(--bg-white);
  z-index: var(--z-index-modal);
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  box-shadow: var(--shadow-dropdown);
  display: none;
}

.search-dropdown.show {
  display: block;
}

.search-dropdown .dropdown-item {
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}

.search-dropdown .dropdown-item:hover {
  background-color: var(--bg-light);
}

.search-dropdown .dropdown-item.active {
  background-color: var(--color-light-hover);
}

/* Selected state for search inputs */
input.search-selected,
.form-control.search-selected {
  border-color: var(--color-primary);
}

/* Legacy support for existing ID-based selectors */
#username_search_dropdown,
#student_search_dropdown {
  position: absolute;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  background-color: var(--bg-white);
  z-index: var(--z-index-modal);
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  box-shadow: var(--shadow-dropdown);
}

#username_search_dropdown .dropdown-item,
#student_search_dropdown .dropdown-item {
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}

#username_search_dropdown .dropdown-item:hover,
#student_search_dropdown .dropdown-item:hover {
  background-color: var(--bg-light);
}

#username_search_dropdown .dropdown-item.active {
  background-color: var(--color-light-hover);
}

/* ===================================================
   CONTEXT MENU BASE STYLES
   =================================================== */

/* Base context menu container */
.context-menu {
  background-color: var(--bg-white);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 150px;
  z-index: 1000;
}

/* Context menu header */
.context-menu-header {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-light);
  border-bottom: 1px solid var(--color-border);
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Scrollable items container */
.context-menu-items {
  max-height: 200px;
  overflow-y: auto;
}

/* Context menu item - works with divs or anchors */
.context-menu-item,
.context-menu a {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text-dark);
  border-bottom: 1px solid var(--bg-light);
}

.context-menu-item:last-child,
.context-menu a:last-child {
  border-bottom: none;
}

.context-menu-item:hover,
.context-menu a:hover {
  background-color: var(--bg-gray-200);
}

/* Context menu separator */
.context-menu-separator,
.menu-separator {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-1) 0;
}

/* Disabled state */
.context-menu-item.disabled {
  color: var(--color-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.context-menu-item.disabled:hover {
  background-color: var(--bg-white);
}

/* Delete/danger option */
.context-menu-item.delete-option,
.context-menu a.delete-option {
  color: var(--color-text-error);
}

.context-menu-item.delete-option:hover,
.context-menu a.delete-option:hover {
  background-color: var(--bg-danger-light);
}

/* Position modifiers */
.context-menu.context-menu--fixed {
  position: fixed;
}

.context-menu.context-menu--absolute {
  position: absolute;
}

.context-menu.context-menu--hidden {
  display: none;
}

/* ===================================================
   DJANGO ADMIN SPECIFIC STYLES
   =================================================== */

/* Django Select Elements */
select[name$="priority"],
select[name$="task_type"] {
  min-width: 150px;
}