@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");

:root {
  --bulma-primary-h: 213deg;
  --bulma-primary-s: 97%;
  --bulma-primary-l: 45%;
  --bulma-link-h: 258deg;
  --bulma-link-s: 82%;
  --bulma-link-l: 54%;
  --bulma-info-h: 212deg;
  --bulma-info-s: 90%;
  --bulma-info-l: 58%;
  --bulma-success-h: 157deg;
  --bulma-success-s: 80%;
  --bulma-success-l: 35%;
  --bulma-success: hsl(157deg, 80%, 35%);
  --bulma-warning-h: 33deg;
  --bulma-warning-s: 80%;
  --bulma-warning-l: 67%;
  --bulma-warning: hsl(33deg, 80%, 67%);
  --bulma-danger: #a71a1a;
  --bulma-body-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  /*Add sidebar variables*/
  --sidebar-width: 250px;
  --sidebar-collapsed-width: 60px;
  --info-bar-width: 300px;
  --info-bar-collapsed-width: 50px;

  /*Colours*/
  --menu-item-hover-color: #34495e;
  --menu-item-selected-color: #3498db;
  --submenu-background-color: #4d6a86;

  /* Theme Colors - Light Mode (Default) */
  --theme-body-bg: #f8fafc;
  --theme-body-text: #1e293b;
  --theme-secondary-text: #64748b;
  --theme-tertiary-text: #94a3b8;
  --theme-border: #e2e8f0;
  --theme-border-light: #f1f5f9;
  --theme-hover-bg: #f8fafc;
  --theme-focus: #3b82f6;
  --theme-focus-ring: rgba(59, 130, 246, 0.1);
  
  /* Surface colors */
  --theme-surface-primary: #ffffff;
  --theme-surface-secondary: #f8fafc;
  --theme-surface-tertiary: #f1f5f9;
  
  /* Link colors */
  --theme-link: #3498db;
  --theme-link-hover: #2980b9;
  
  /* Accent bar */
  --theme-accent-bar: #856eff;
  
  /* Table colors */
  --theme-table-header-bg: #f8fafc;
  --theme-table-header-text: #64748b;
  --theme-table-row-bg: #ffffff;
  --theme-table-row-hover: #f8fafc;
  
  /* Code block colors */
  --theme-code-bg: rgba(0, 0, 0, 0.05);
  --theme-code-text: inherit;
  
  /* Modal colors */
  --theme-modal-bg: rgba(0, 0, 0, 0.9);
  --theme-modal-content-bg: #ffffff;
  
  /* Card colors */
  --theme-card-bg: #ffffff;
  --theme-card-border: #e2e8f0;
  --theme-card-header-bg: #f8f9fa;
  --theme-card-message-bg: #f8fafc;
  
  /* Input colors */
  --theme-input-bg: #ffffff;
  --theme-input-border: #e2e8f0;
  --theme-input-text: #1e293b;
  
  /* Dropdown colors */
  --theme-dropdown-bg: #ffffff;
  --theme-dropdown-border: #ddd;
  --theme-dropdown-item-hover: #f8f9fa;
  --theme-dropdown-item-selected: #e3f2fd;
  
  /* Notification colors */
  --theme-notification-bg: #f8fafc;
  
  /* Mermaid diagram colors */
  --theme-mermaid-bg: #fafafa;
  --theme-mermaid-border: #e2e8f0;
  --theme-mermaid-controls-bg: #f8fafc;
  
  /* Search colors */
  --theme-search-bg: #f8f9fa;
  --theme-search-border: #ddd;
  
  /* Scrollbar colors */
  --theme-scrollbar-track: #f1f5f9;
  --theme-scrollbar-thumb: #cbd5e1;
  --theme-scrollbar-thumb-hover: #94a3b8;
  
  /* Shadow colors */
  --theme-shadow-sm: rgba(0, 0, 0, 0.1);
  --theme-shadow-md: rgba(0, 0, 0, 0.15);
  --theme-shadow-lg: rgba(0, 0, 0, 0.5);
}

/* Dark Mode Theme Colors */
[data-theme="dark"] {
  --theme-body-bg: #1e1e1e;
  --theme-body-text: #e5e7eb;
  --theme-secondary-text: #9ca3af;
  --theme-tertiary-text: #6b7280;
  --theme-border: #3f3f3f;
  --theme-border-light: #333333;
  --theme-hover-bg: #2a2a2a;
  --theme-focus: #60a5fa;
  --theme-focus-ring: rgba(96, 165, 250, 0.2);
  
  /* Surface colors */
  --theme-surface-primary: #2a2a2a;
  --theme-surface-secondary: #242424;
  --theme-surface-tertiary: #1e1e1e;
  
  /* Link colors */
  --theme-link: #60a5fa;
  --theme-link-hover: #93c5fd;
  
  /* Accent bar - orange in dark mode */
  --theme-accent-bar: #fb923c;
  
  /* Table colors */
  --theme-table-header-bg: #242424;
  --theme-table-header-text: #9ca3af;
  --theme-table-row-bg: #2a2a2a;
  --theme-table-row-hover: #333333;
  
  /* Code block colors */
  --theme-code-bg: rgba(255, 255, 255, 0.1);
  --theme-code-text: #e5e7eb;
  
  /* Modal colors */
  --theme-modal-bg: rgba(0, 0, 0, 0.95);
  --theme-modal-content-bg: #2a2a2a;
  
  /* Card colors */
  --theme-card-bg: #2a2a2a;
  --theme-card-border: #3f3f3f;
  --theme-card-header-bg: #242424;
  --theme-card-message-bg: #242424;
  
  /* Input colors */
  --theme-input-bg: #242424;
  --theme-input-border: #3f3f3f;
  --theme-input-text: #e5e7eb;
  
  /* Dropdown colors */
  --theme-dropdown-bg: #2a2a2a;
  --theme-dropdown-border: #3f3f3f;
  --theme-dropdown-item-hover: #333333;
  --theme-dropdown-item-selected: #1e3a5f;
  
  /* Notification colors */
  --theme-notification-bg: #242424;
  
  /* Mermaid diagram colors */
  --theme-mermaid-bg: #242424;
  --theme-mermaid-border: #3f3f3f;
  --theme-mermaid-controls-bg: #2a2a2a;
  
  /* Search colors */
  --theme-search-bg: #242424;
  --theme-search-border: #3f3f3f;
  
  /* Scrollbar colors */
  --theme-scrollbar-track: #1e1e1e;
  --theme-scrollbar-thumb: #4a4a4a;
  --theme-scrollbar-thumb-hover: #5a5a5a;
  
  /* Shadow colors */
  --theme-shadow-sm: rgba(0, 0, 0, 0.3);
  --theme-shadow-md: rgba(0, 0, 0, 0.4);
  --theme-shadow-lg: rgba(0, 0, 0, 0.8);
}

/* Dark mode color-scheme for better browser native support (Safari, scrollbars, form controls) */
@supports (color-scheme: dark) {
  [data-theme="dark"] {
    color-scheme: dark;
  }
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  background-color: var(--theme-body-bg);
  color: var(--theme-body-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Global scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--theme-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
  border-radius: 6px;
  border: 2px solid var(--theme-scrollbar-track);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb-hover);
}

.telos-logo {
  height: 50px;
}

a.is-primary,
button.is-primary,
input.is-primary {
  color: white;
}

td a {
  color: inherit;
}

form {
  display: contents;
}

/* Override Bulma's is-danger classes with our hex color */
.is-danger {
  background-color: var(--bulma-danger) !important;
}

.is-danger.is-light {
  background-color: rgba(211, 47, 47, 0.1) !important;
  color: var(--bulma-danger) !important;
}

.is-danger.is-outlined {
  background-color: transparent !important;
  border-color: var(--bulma-danger) !important;
  color: var(--bulma-danger) !important;
}

/* Priority color classes with maximum specificity - URGENT priority colors */
.has-text-danger,
i.has-text-danger,
i.fa.has-text-danger,
i.fas.has-text-danger,
.icon.has-text-danger,
td i.has-text-danger,
div i.has-text-danger {
  color: #a71a1a !important; /* Red for danger */
}

.has-text-danger-40,
i.has-text-danger-40,
i.fa.has-text-danger-40,
i.fas.has-text-danger-40,
.icon.has-text-danger-40,
td i.has-text-danger-40,
div i.has-text-danger-40 {
  color: #d32f2f !important; /* Darker red for urgent priority */
}

.has-text-danger-60,
i.has-text-danger-60,
i.fa.has-text-danger-60,
i.fas.has-text-danger-60,
.icon.has-text-danger-60,
td i.has-text-danger-60,
div i.has-text-danger-60 {
  color: #f44336 !important; /* Medium red for high priority */
}

.has-text-warning,
i.has-text-warning,
i.fa.has-text-warning,
i.fas.has-text-warning,
.icon.has-text-warning,
td i.has-text-warning,
div i.has-text-warning {
  color: #f0ad4e !important; /* Orange for medium priority */
}

.has-text-success,
i.has-text-success,
i.fa.has-text-success,
i.fas.has-text-success,
.icon.has-text-success,
td i.has-text-success,
div i.has-text-success {
  color: #5cb85c !important; /* Green for low priority */
}

.has-text-grey,
i.has-text-grey,
i.fa.has-text-grey,
i.fas.has-text-grey,
.icon.has-text-grey,
td i.has-text-grey,
div i.has-text-grey {
  color: #64748b !important; /* Grey for no priority */
}

/* Additional defensive rule to override any Bulma conflicts */
.ticket-list-row i[class*="has-text-"],
.kanban-card i[class*="has-text-"],
.ticket-child-row i[class*="has-text-"],
.ticket-parent-link i[class*="has-text-"] {
  color: inherit !important;
}

/* Force priority colors on Font Awesome icons in ticket contexts */
.ticket-list-row i.has-text-danger-40,
.kanban-card i.has-text-danger-40,
.ticket-child-row i.has-text-danger-40,
.ticket-parent-link i.has-text-danger-40 {
  color: #d32f2f !important;
}

.ticket-list-row i.has-text-danger-60,
.kanban-card i.has-text-danger-60,
.ticket-child-row i.has-text-danger-60,
.ticket-parent-link i.has-text-danger-60 {
  color: #f44336 !important;
}

.ticket-list-row i.has-text-warning,
.kanban-card i.has-text-warning,
.ticket-child-row i.has-text-warning,
.ticket-parent-link i.has-text-warning {
  color: #f0ad4e !important;
}

.ticket-list-row i.has-text-success,
.kanban-card i.has-text-success,
.ticket-child-row i.has-text-success,
.ticket-parent-link i.has-text-success {
  color: #5cb85c !important;
}

.ticket-list-row i.has-text-grey,
.kanban-card i.has-text-grey,
.ticket-child-row i.has-text-grey,
.ticket-parent-link i.has-text-grey {
  color: #64748b !important;
}

.has-background-danger {
  background-color: var(--bulma-danger) !important;
}

/* Border color classes for priority indicators */
.has-border-black {
  border-color: #000000 !important;
}

.has-border-danger {
  border-color: var(--bulma-danger) !important;
}

.has-border-warning {
  border-color: var(--bulma-warning) !important;
}

.has-border-success {
  border-color: var(--bulma-success) !important;
}

.has-border-grey {
  border-color: #64748b !important;
}

/* MARKDOWN */

article>*+*,
article blockquote>*+*,
article li+li,
article li>*+* {
  margin-top: 0.5em;
}

article a {
  position: relative;
}

article a:hover::after {
  content: '(' attr(href) ')';
  white-space: nowrap;
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
  font-family: var(--bulma-body-family);
  display: inline-block;
  padding-left: 0.5em;
  position: absolute;
  color: var(--theme-body-text);
  background: var(--theme-surface-primary);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

article h1 {
  font-size: 133%;
  font-weight: 700;
}

article h2 {
  font-size: 121%;
  font-weight: 600;
}

article h3 {
  font-size: 110%;
  font-weight: 500;
}

article ul {
  list-style: disc;
  margin-left: 1.5em;
}

article ul>li.check {
  list-style: none;
}

article ul>li>input[type=checkbox] {
  margin-left: -1.5em;
}

article li input[type=checkbox] {
  margin-right: 0.5em;
  vertical-align: middle;
}

article li.check p {
  display: inline;
}

article li.check p+p {
  display: block;
}

article ul ul {
  list-style: circle;
}

article ul ul ul {
  list-style: square;
}

article ol {
  margin-left: 1.5em;
}

article blockquote {
  border-left: 0.5em solid var(--theme-border);
  padding-left: 0.5em;
}

article u {
  color: #007bff;
  background-color: rgba(0, 123, 255, 0.1);
  padding: 2px 4px;
  border-radius: 3px;
  text-decoration: none;
  font-weight: 500;
}

article u[data-name="Kappa" i],
article u[data-name="Delta" i] {
  color: #ff6b00;
  background-color: rgba(255, 107, 0, 0.1);
}

article u::before {
  content: '@';
}

.kappa-avatar,
.delta-avatar {
  border-radius: 20%;
  height: 22px;
  width: auto;
  margin-right: 5px;
  vertical-align: middle;
}

/* Member Avatar Styles */
.member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--theme-border);
  background-color: var(--theme-surface-secondary);
  transition: background 0.3s ease, border 0.3s ease;
  vertical-align: middle;
}

.member-avatar-small {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--theme-border);
  background-color: var(--theme-surface-secondary);
  transition: background 0.3s ease, border 0.3s ease;
  vertical-align: middle;
  flex-shrink: 0;
}

.member-avatar-medium {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--theme-border);
  background-color: var(--theme-surface-secondary);
  transition: background 0.3s ease, border 0.3s ease;
  vertical-align: middle;
}

.member-avatar-large {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--theme-border);
  background-color: var(--theme-surface-secondary);
  transition: background 0.3s ease, border 0.3s ease;
  vertical-align: middle;
}

.member-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--theme-surface-secondary);
  border: 1px solid var(--theme-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-secondary-text);
  font-size: 14px;
  transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
  vertical-align: middle;
}

.member-avatar-placeholder.member-avatar-small {
  width: 24px;
  height: 24px;
  min-width: 24px;
  font-size: 12px;
}

.member-avatar-placeholder.member-avatar-medium {
  width: 40px;
  height: 40px;
  font-size: 16px;
}

.member-avatar-placeholder.member-avatar-large {
  width: 48px;
  height: 48px;
  font-size: 20px;
}

.member-avatar-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.member-avatar-stack {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}

.member-avatar-stack .member-avatar,
.member-avatar-stack .member-avatar-placeholder {
  margin-left: -8px;
  border: 2px solid var(--theme-surface-primary);
  transition: transform 0.2s ease, background 0.3s ease, border 0.3s ease;
}

.member-avatar-stack .member-avatar:first-child,
.member-avatar-stack .member-avatar-placeholder:first-child {
  margin-left: 0;
}

.member-avatar-stack .member-avatar:hover,
.member-avatar-stack .member-avatar-placeholder:hover {
  transform: translateY(-2px);
  z-index: 10;
}

.member-avatar-with-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
  vertical-align: middle;
}

.member-avatar-with-name .member-avatar,
.member-avatar-with-name .member-avatar-placeholder {
  flex-shrink: 0;
}

.member-avatar-with-name span {
  line-height: 1.2;
}

/* TABLES */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  border: 1px solid var(--theme-border);
  overflow: hidden;
}

th {
  --bulma-text-strong: var(--theme-table-header-text);
  background: var(--theme-table-header-bg);
  padding: 12px 16px;
  text-align: left;
  font-size: 0.85rem;
  color: var(--theme-table-header-text);
  border-bottom: 1px solid var(--theme-border);
}

tr {
  background-color: var(--theme-table-row-bg);
}

tr:hover {
  background-color: var(--theme-table-row-hover);
}

table td {
  padding: 10px;
  vertical-align: middle;
  max-width: 200px;
  color: var(--theme-body-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--theme-border);
}

td.icon-only {
  width: 1px;
  text-align: center;
}

td.small {
  width: 125px;
  max-width: 125px;
}

table .column {
  background: #b8a3a3;
  vertical-align: middle;
  border: 1px solid #3377cf;
  display: flex;
  align-items: center;
  min-height: 100%;
  padding: 16px
}

.table-row-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

td .ticket-slug {
  font-family: monospace;
  font-size: 1rem;
  color: var(--theme-secondary-text);
}

.info-bar .fa,
.info-bar .fas {
  width: 1rem;
}

.subscription-info a {
  color: var(--theme-secondary-text);
  padding: 0px;
}

.card-header .icon,
.card-header i.fas {
  margin-right: 0.5rem;
}

.card-message {
  background-color: var(--theme-card-message-bg);
  padding: 8px 20px;
  border-bottom: 1px solid var(--theme-border);
}

.card-message a {
  font-size: 0.85rem;
  color: var(--theme-link);
}

.filter-select {
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--theme-input-border);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--theme-input-text);
  background-color: var(--theme-input-bg);
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  min-width: 140px;
}

[data-theme="dark"] .filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}

/* Select element styling for dark mode */
select.filter-select,
.select select.filter-select {
  background-color: var(--theme-input-bg);
  color: var(--theme-input-text);
  border-color: var(--theme-input-border);
}

[data-theme="dark"] select.filter-select,
[data-theme="dark"] .select select.filter-select {
  background-color: var(--theme-input-bg);
  color: var(--theme-input-text);
  border-color: var(--theme-input-border);
  color-scheme: dark;
}

.filter-select option {
  background-color: var(--theme-input-bg);
  color: var(--theme-input-text);
}

[data-theme="dark"] .filter-select option {
  background-color: var(--theme-input-bg);
  color: var(--theme-input-text);
}

/* Filter icons checkbox styling for dark mode */
.filter-icons input[type="checkbox"] {
  accent-color: var(--theme-link);
}

[data-theme="dark"] .filter-icons input[type="checkbox"] {
  color-scheme: dark;
}

/* Icon color feedback for checked/unchecked state in dark mode */
[data-theme="dark"] .filter-icons i {
  color: var(--theme-tertiary-text);
  transition: color 0.2s ease;
}

[data-theme="dark"] .filter-icons input[type="checkbox"]:checked + i {
  color: var(--theme-link);
}

[data-theme="dark"] .filter-icons label:hover i {
  color: var(--theme-secondary-text);
}

button.link {
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: 1em;
  margin: 0;
  padding: 0;
  transition-duration: var(--bulma-duration);
  transition-property: background-color, border-color, color;
}

button.link:hover {
  color: var(--theme-focus);
  text-decoration: underline;
}

.ticket-status-none {
  border-color: var(--theme-secondary-text);
  color: var(--theme-secondary-text);
}

/* Ticket status classes */
.ticket-status-draft {
  border-color: #94a3b8;
  /* slate/gray */
  color: #94a3b8;
}

.ticket-status-new,
.ticket-status-open {
  border-color: #3273dc;
  /* blue */
  color: #3273dc;
}

.status-ok,
.ticket-status-processing {
  border-color: #bb7b2e;
  /* orange */
  color: #bb7b2e;
}

.ticket-status-resolved {
  border-color: #800080;
  color: #800080;
}

.status-good,
.ticket-status-closed {
  border-color: #48c774;
  /* green */
  color: #48c774;
}

.status-bad,
.ticket-status-stale,
.ticket-status-blocked {
  border-color: #f14668;
  /* red */
  color: #f14668;
}


/* Shared ticket details styling */
.ticket-details .detail-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--theme-secondary-text);
}

.ticket-details .detail-item {
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--theme-border);
  cursor: pointer;
}

.stage-details .detail-item {
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--theme-border);
}

/* Hide edit icons by default */
.ticket-details .detail-header .fa-pencil {
  display: none;
}

/* Show edit icon when hovering over the detail-item */
.ticket-details .detail-item:hover .detail-header .fa-pencil {
  display: block;
}

.ticket-details .select-box {
  order: 0;
  flex: 1;
  padding: 0.25rem;
  border: 1px solid var(--theme-input-border);
  border-radius: 0.25rem;
  background-color: var(--theme-input-bg);
  color: var(--theme-input-text);
  font-size: 0.9rem;
}

.ticket-details .select-box:focus {
  outline: none;
  border-color: var(--theme-focus);
  box-shadow: 0 0 0 1px var(--theme-focus);
}

.ticket-details .detail-content.priority-edit {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tag.is-outlined {
  background: transparent;
  border-width: 1px;
  border-style: solid;
}

/* Dark mode adjustments for status colors to maintain visibility */
[data-theme="dark"] .ticket-status-draft {
  border-color: #a8b5c7;
  color: #a8b5c7;
}

[data-theme="dark"] .ticket-status-new,
[data-theme="dark"] .ticket-status-open {
  border-color: #60a5fa;
  color: #60a5fa;
}

[data-theme="dark"] .status-ok,
[data-theme="dark"] .ticket-status-processing {
  border-color: #fb923c;
  color: #fb923c;
}

[data-theme="dark"] .ticket-status-resolved {
  border-color: #c084fc;
  color: #c084fc;
}

[data-theme="dark"] .status-good,
[data-theme="dark"] .ticket-status-closed {
  border-color: #4ade80;
  color: #4ade80;
}

[data-theme="dark"] .status-bad,
[data-theme="dark"] .ticket-status-stale,
[data-theme="dark"] .ticket-status-blocked {
  border-color: #f87171;
  color: #f87171;
}

/* Bulma tag colors - dark mode adjustments */
[data-theme="dark"] .tag.is-light {
  background-color: var(--theme-surface-secondary);
  color: var(--theme-body-text);
}

[data-theme="dark"] .tag.is-info {
  background-color: #3b82f6;
  color: white;
}

[data-theme="dark"] .tag.is-info.is-light {
  background-color: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

[data-theme="dark"] .tag.is-success {
  background-color: #22c55e;
  color: white;
}

[data-theme="dark"] .tag.is-success.is-light {
  background-color: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

[data-theme="dark"] .tag.is-warning {
  background-color: #f59e0b;
  color: white;
}

[data-theme="dark"] .tag.is-warning.is-light {
  background-color: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

[data-theme="dark"] .tag.is-danger {
  background-color: #ef4444;
  color: white;
}

[data-theme="dark"] .tag.is-danger.is-light {
  background-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

[data-theme="dark"] .tag.is-primary {
  background-color: var(--theme-link);
  color: white;
}

[data-theme="dark"] .tag.is-primary.is-light {
  background-color: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
}

/* Background color utilities - dark mode */
[data-theme="dark"] .has-background-danger-light {
  background-color: rgba(239, 68, 68, 0.15) !important;
}

[data-theme="dark"] .has-background-warning-light {
  background-color: rgba(245, 158, 11, 0.15) !important;
}

[data-theme="dark"] .has-background-success-light {
  background-color: rgba(34, 197, 94, 0.15) !important;
}

[data-theme="dark"] .has-background-info-light {
  background-color: rgba(59, 130, 246, 0.15) !important;
}

/* Text color utilities - dark mode adjustments */
[data-theme="dark"] .has-text-danger {
  color: #f87171 !important;
}

[data-theme="dark"] .has-text-warning {
  color: #fbbf24 !important;
}

[data-theme="dark"] .has-text-success {
  color: #4ade80 !important;
}

[data-theme="dark"] .has-text-info {
  color: #60a5fa !important;
}


.app-list-header {
  display: flex;
  gap: 36px;
}

.app-list-tab {
  padding: 12px 0;
  color: var(--theme-secondary-text);
  font-weight: 500;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-list-tab:hover {
  color: var(--theme-body-text);
}

/* Update to use is-active */
.app-list-tab.is-active {
  color: var(--theme-link);
}

.app-list-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--theme-link);
}

.app-list-tab[title]:hover::after {
  content: attr(title);
  display: block;
  position: absolute;
  z-index: 1;
  left: -100%;
  right: -100%;
  font-size: 12px;
  top: 85%;
  bottom: initial;
  height: initial;
  background: transparent;
  text-align: center;
  white-space: nowrap;
}

.app-ticket-count {
  font-size: 0.75rem;
  background: var(--theme-surface-secondary);
  color: var(--theme-secondary-text);
  padding: 2px 8px;
  border-radius: 12px;
}

.menu-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.menu-list li {
  margin-bottom: 0.5rem;
}

.menu-list a,
.menu-list button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0;
  border: none;
  background: none;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font: inherit;
}

.menu-list i {
  margin-right: 0.5rem;
}

/* Optional hover state */
.menu-list a:hover,
.menu-list button:hover {
  background-color: var(--theme-hover-bg);
}

.text-content {
  position: relative;
  min-height: 200px;
}

/* Blueprint Chunk Markdown Styles */
.blueprint-markdown {
  /* Reset Bulma styles */
  all: revert;
  font-family: var(--bulma-body-family);
  line-height: 1.5;
  color: inherit;
}

.blueprint-markdown h1,
.blueprint-markdown h2,
.blueprint-markdown h3 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 1em 0 0.5em 0;
  color: inherit;
}

.blueprint-markdown h2 {
  font-size: 1.3em;
}

.blueprint-markdown h3 {
  font-size: 1.1em;
}

.blueprint-markdown p {
  margin: 1em 0;
  line-height: 1.6;
}

.blueprint-markdown ul {
  list-style: disc;
  margin-left: 1.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.blueprint-markdown ol {
  list-style: decimal;
  margin-left: 1.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.blueprint-markdown li {
  margin: 0.3em 0;
}

.blueprint-markdown code {
  background-color: var(--theme-code-bg);
  color: var(--theme-code-text);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
}

.blueprint-markdown pre {
  background-color: var(--theme-code-bg);
  padding: 1em;
  border-radius: 4px;
  overflow-x: auto;
  margin: 1em 0;
}

.blueprint-markdown pre code {
  background-color: transparent;
  padding: 0;
}

.blueprint-markdown blockquote {
  border-left: 4px solid var(--theme-border);
  padding-left: 1em;
  margin: 1em 0;
  color: var(--theme-secondary-text);
}

/* Card header title with breadcrumb navigation */
.card-header-title .fa-angle-right {
  color: var(--theme-tertiary-text);
  font-size: 0.85em;
  vertical-align: middle;
}

.card-header-title {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  padding-right: 10px;
  flex-shrink: 0;
}

.card-header-title span {
  display: inline;
  vertical-align: middle;
}

/* New tags container below the header */
.card-tags-container {
  padding: 0.5rem 1rem !important;
  background-color: var(--theme-surface-secondary) !important;
  border-bottom: 1px solid var(--theme-border) !important;
}

/* MERMAID DIAGRAMS - Enhanced UX */

/* Enhanced container with collapsible functionality */
.mermaid-enhanced-container {
  margin: 1rem 0;
  border: 1px solid var(--theme-mermaid-border);
  border-radius: 8px;
  background-color: var(--theme-mermaid-bg);
  overflow: hidden;
  box-shadow: 0 2px 4px var(--theme-shadow-sm);
}

/* Header with controls */
.mermaid-controls {
  background-color: var(--theme-mermaid-controls-bg);
  border-bottom: 1px solid var(--theme-mermaid-border);
}

.mermaid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
}

.mermaid-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.mermaid-toggle:hover {
  background-color: var(--theme-hover-bg);
}

.mermaid-toggle:focus {
  outline: 2px solid var(--theme-focus);
  outline-offset: 2px;
}

.mermaid-toggle-icon {
  margin-right: 6px;
  transition: transform 0.3s ease;
  font-size: 0.75rem;
  color: var(--theme-secondary-text);
}

.mermaid-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--theme-secondary-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mermaid-actions {
  display: flex;
  gap: 4px;
}

.mermaid-btn {
  background: none;
  border: 1px solid var(--theme-border);
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--theme-secondary-text);
  font-size: 0.75rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mermaid-btn:hover {
  background-color: var(--theme-hover-bg);
  border-color: var(--theme-border);
  color: var(--theme-body-text);
}

.mermaid-btn:focus {
  outline: 2px solid var(--theme-focus);
  outline-offset: 2px;
}

/* Export button specific styling */
.mermaid-export-btn:hover {
  background-color: #ecfdf5;
  border-color: #10b981;
  color: #10b981;
}

.mermaid-export-btn:focus {
  outline-color: #10b981;
}

/* Content area with smooth transitions */
.mermaid-content {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
  opacity: 1;
}

.mermaid-enhanced-container.collapsed .mermaid-content {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.mermaid-enhanced-container.collapsed .mermaid-toggle-icon {
  transform: rotate(180deg);
}

/* Original container styling preserved */
.mermaid-container {
  padding: 1rem;
  overflow-x: auto;
  width: 100%;
  position: relative;
}

.mermaid-container pre.mermaid {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  overflow: visible;
  text-align: center;
  width: 100%;
}

/* Mermaid diagram styling with zoom support */
.mermaid svg {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease;
  transform-origin: center center;
}

.mermaid-container .mermaid svg {
  width: 100%;
  height: auto;
  min-height: 200px;
}

/* Fitted diagram styling */
.fitted-diagram .mermaid-container {
  overflow: visible;
  /* Allow scaled SVG to be visible */
}

.fitted-diagram .mermaid svg {
  width: auto;
  /* Let transformed SVG determine its own width */
  max-width: none;
  /* Remove max-width constraint for fitted diagrams */
}

/* Scrollable diagram styling */
.scrollable-diagram .mermaid-container {
  border: 1px solid var(--theme-mermaid-border);
  border-radius: 6px;
  background: var(--theme-mermaid-controls-bg);
  /* Custom scrollbars for better UX */
  scrollbar-width: thin;
  scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
}

.scrollable-diagram .mermaid-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scrollable-diagram .mermaid-container::-webkit-scrollbar-track {
  background: var(--theme-scrollbar-track);
  border-radius: 4px;
}

.scrollable-diagram .mermaid-container::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
  border-radius: 4px;
}

.scrollable-diagram .mermaid-container::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb-hover);
}

/* Tall diagram styling */
.tall-diagram .mermaid-container {
  border: 1px solid var(--theme-mermaid-border);
  border-radius: 6px;
  background: var(--theme-mermaid-controls-bg);
}

/* Oversized diagram indicators */
.oversized-diagram .mermaid-navigation {
  background-color: #fef3c7;
  border-color: #f59e0b;
}

.oversized-diagram .mermaid-navigation::before {
  content: "⚠️ Large diagram - use controls below or fullscreen view";
  font-size: 0.75rem;
  color: #92400e;
  margin-right: 0.5rem;
}

/* Navigation controls */
.mermaid-navigation {
  background-color: var(--theme-mermaid-controls-bg);
  border-top: 1px solid var(--theme-mermaid-border);
  padding: 8px 12px;
}

.mermaid-zoom-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

.zoom-label {
  font-size: 0.75rem;
  font-weight: 500;
}

/* Metadata section */
.mermaid-metadata {
  background-color: var(--theme-mermaid-controls-bg);
  border-top: 1px solid var(--theme-mermaid-border);
  padding: 6px 12px;
  font-size: 0.75rem;
  color: var(--theme-secondary-text);
}

.mermaid-timestamp {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Responsive design */
@media (max-width: 768px) {
  .mermaid-enhanced-container {
    margin: 0.5rem 0;
  }

  .mermaid-header {
    padding: 6px 8px;
  }

  .mermaid-container {
    padding: 0.5rem;
  }

  .mermaid-actions {
    gap: 2px;
  }

  .mermaid-btn {
    padding: 4px 6px;
    font-size: 0.7rem;
  }

  .mermaid-zoom-controls {
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* Accessibility - High contrast mode */
@media (prefers-contrast: high) {
  .mermaid-enhanced-container {
    border-color: #000;
  }

  .mermaid-controls,
  .mermaid-navigation,
  .mermaid-metadata {
    background-color: #fff;
    border-color: #000;
  }

  .mermaid-toggle,
  .mermaid-btn {
    border-color: #000;
    color: #000;
  }

  .mermaid-toggle:hover,
  .mermaid-btn:hover {
    background-color: #f0f0f0;
  }
}



/* Full-viewport modal for Mermaid diagrams */
.mermaid-fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--theme-modal-bg);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  /* Ensure it covers everything */
  right: 0;
  bottom: 0;
}

/* Prevent scrolling when modal is open */
body.modal-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

.mermaid-fullscreen-content {
  background: var(--theme-modal-content-bg);
  padding: 1rem;
  border-radius: 8px;
  width: 98vw;
  height: 95vh;
  max-width: 98vw;
  max-height: 95vh;
  overflow: hidden;
  position: relative;
  box-shadow: 0 25px 50px var(--theme-shadow-lg);
  display: flex;
  flex-direction: column;
}

.mermaid-fullscreen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--theme-border);
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 1rem;
}

.mermaid-fullscreen-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--theme-body-text);
}

.mermaid-fullscreen-help {
  flex: 1;
  text-align: center;
}

.mermaid-help-text {
  color: var(--theme-secondary-text);
  font-size: 0.75rem;
  line-height: 1.2;
}

.mermaid-fullscreen-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mermaid-fullscreen-zoom-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

.mermaid-fullscreen-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--theme-secondary-text);
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.mermaid-fullscreen-close:hover {
  color: var(--theme-body-text);
  background-color: var(--theme-hover-bg);
}

.mermaid-fullscreen-diagram {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  flex: 1;
  overflow: hidden;
}

.mermaid-fullscreen-svg-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  position: relative;
  user-select: none;
  /* Ensure scrollbars are visible when needed */
  scrollbar-width: thin;
  scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
}

.mermaid-fullscreen-svg-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.mermaid-fullscreen-svg-container::-webkit-scrollbar-track {
  background: var(--theme-scrollbar-track);
}

.mermaid-fullscreen-svg-container::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
  border-radius: 4px;
}

.mermaid-fullscreen-svg-container::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb-hover);
}

.mermaid-fullscreen-svg-container svg {
  transition: transform 0.3s ease;
  max-width: none;
  max-height: none;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 100px;
  min-height: 100px;
  /* Ensure SVG is centered by default */
  margin: auto;
  transform-origin: center center;
}

.mermaid-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #ef4444;
  font-size: 1.1rem;
  font-weight: 500;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .mermaid-fullscreen-content {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    padding: 0.5rem;
  }

  .mermaid-fullscreen-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .mermaid-fullscreen-help {
    order: 2;
  }

  .mermaid-fullscreen-controls {
    order: 3;
    justify-content: center;
  }

  .mermaid-help-text {
    font-size: 0.7rem;
  }

  .mermaid-fullscreen-zoom-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Image Fullscreen Modal Styles */
.image-fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--theme-modal-bg);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  /* Ensure it covers everything */
  right: 0;
  bottom: 0;
}

.image-fullscreen-content {
  background: var(--theme-modal-content-bg);
  padding: 1rem;
  border-radius: 8px;
  width: 98vw;
  height: 95vh;
  max-width: 98vw;
  max-height: 95vh;
  overflow: hidden;
  position: relative;
  box-shadow: 0 25px 50px var(--theme-shadow-lg);
  display: flex;
  flex-direction: column;
}

.image-fullscreen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--theme-border);
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 1rem;
}

.image-fullscreen-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--theme-body-text);
  margin: 0;
  /* Truncate long filenames with ellipses */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  flex-shrink: 1;
}

.image-fullscreen-help {
  flex: 1;
  text-align: center;
}

.image-help-text {
  color: var(--theme-secondary-text);
  font-size: 0.75rem;
  line-height: 1.2;
}

.image-fullscreen-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.image-fullscreen-zoom-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

.image-btn {
  background: var(--theme-surface-secondary);
  border: 1px solid var(--theme-border);
  border-radius: 4px;
  color: var(--theme-body-text);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 6px 8px;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.image-btn:hover {
  background: var(--theme-hover-bg);
  border-color: var(--theme-border);
  color: var(--theme-body-text);
  text-decoration: none;
}

.image-btn:active {
  background: var(--theme-border);
  transform: translateY(1px);
}

.image-fullscreen-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--theme-secondary-text);
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.image-fullscreen-close:hover {
  color: var(--theme-body-text);
  background-color: var(--theme-hover-bg);
}

.image-fullscreen-display {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  flex: 1;
  overflow: hidden;
}

.image-fullscreen-img-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  position: relative;
  user-select: none;
  /* Ensure scrollbars are visible when needed */
  scrollbar-width: thin;
  scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
}

.image-fullscreen-img-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.image-fullscreen-img-container::-webkit-scrollbar-track {
  background: var(--theme-scrollbar-track);
}

.image-fullscreen-img-container::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
  border-radius: 4px;
}

.image-fullscreen-img-container::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb-hover);
}

.image-fullscreen-img-container img {
  transition: transform 0.3s ease;
  max-width: none;
  max-height: none;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 100px;
  min-height: 100px;
  /* Ensure image is centered by default */
  margin: auto;
  transform-origin: center center;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .image-fullscreen-content {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    padding: 0.5rem;
  }

  .image-fullscreen-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .image-fullscreen-title {
    max-width: none;
    font-size: 1rem;
  }

  .image-fullscreen-help {
    order: 2;
  }

  .image-fullscreen-controls {
    order: 3;
    justify-content: center;
  }

  .image-help-text {
    font-size: 0.7rem;
  }

  .image-fullscreen-zoom-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Pinned Tickets Styles */
.pinned-tickets-section {
  margin-bottom: 2rem;
}

.pinned-tickets-container {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem;
}

.pinned-ticket-card {
  padding: 0.5rem;
  box-sizing: border-box;
}

.pinned-ticket-card .card {
  height: auto;
  box-shadow: 0 2px 8px var(--theme-shadow-sm);
  border: 1px solid var(--theme-border);
  transition: box-shadow 0.2s ease;
  background-color: var(--theme-card-bg);
}

.pinned-ticket-card .card:hover {
  box-shadow: 0 4px 12px var(--theme-shadow-md);
}

.pinned-ticket-header {
  background-color: var(--theme-card-header-bg);
  border-bottom: 1px solid var(--theme-border);
  cursor: pointer;
}

.pinned-ticket-title {
  color: var(--theme-body-text);
  text-decoration: none;
  font-weight: 600;
}

.pinned-ticket-title:hover {
  color: var(--theme-link);
  text-decoration: underline;
}

.pinned-ticket-toggle {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.pinned-ticket-arrow {
  transition: all 0.2s ease;
}

.pinned-ticket-content {
  max-height: 400px;
  overflow-y: auto;
  transition: all 0.3s ease;
}

.pinned-ticket-content.is-hidden {
  display: none;
}

.pinned-ticket-description {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Responsive design */
@media screen and (max-width: 768px) {
  .pinned-ticket-card {
    width: 100% !important;
  }

  .pinned-tickets-container {
    flex-direction: column;
  }
}

@media screen and (min-width: 769px) {
  .pinned-ticket-card {
    width: 50%;
  }
}

/* Global Search Dropdown */
.header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}

.global-search {
  position: relative;
  min-width: 300px;
}

.search-container {
  position: relative;
}

.search-input {
  width: 100%;
  padding: 8px 16px 8px 40px;
  border: 1px solid var(--theme-search-border);
  border-radius: 24px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
  background-color: var(--theme-search-bg);
  color: var(--theme-input-text);
}

.search-input:focus {
  border-color: var(--theme-link);
  box-shadow: 0 0 0 3px var(--theme-focus-ring);
  background-color: var(--theme-input-bg);
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--theme-secondary-text);
  pointer-events: none;
  font-size: 14px;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--theme-dropdown-bg);
  border: 1px solid var(--theme-dropdown-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--theme-shadow-md);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 4px;
}

.search-loading,
.search-no-results {
  padding: 16px;
  text-align: center;
  color: var(--theme-secondary-text);
  font-size: 14px;
}

.search-item {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid var(--theme-border-light);
  text-decoration: none;
  color: var(--theme-body-text);
  transition: background-color 0.2s ease;
}

.search-item:hover {
  background-color: var(--theme-dropdown-item-hover);
  text-decoration: none;
  color: var(--theme-body-text);
}

.search-item-selected {
  background-color: var(--theme-dropdown-item-selected) !important;
  text-decoration: none;
  color: var(--theme-body-text);
}

.search-item:last-child {
  border-bottom: none;
}

.search-item-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--theme-body-text);
}

.search-item-meta {
  font-size: 12px;
  color: var(--theme-secondary-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-item-slug {
  font-family: 'Courier New', monospace;
  background-color: var(--theme-surface-tertiary);
  color: var(--theme-secondary-text);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.search-item-meta .search-item-app {
  font-style: italic;
}

/* Application search result styling */
.search-item.search-item-app {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-item-icon {
  flex-shrink: 0;
}

.search-item-icon .app-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 500;
  font-size: 0.85rem;
}

.search-item-content {
  flex: 1;
  min-width: 0;
}

.search-item.search-item-app .search-item-title {
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive design */
@media screen and (max-width: 768px) {
  .header-main {
    flex-direction: column;
    gap: 1rem;
  }

  .global-search {
    width: 100%;
    min-width: auto;
  }
}
/* ========================================
   APPLICATION SEARCH DROPDOWN
   ======================================== */

.application-search-dropdown {
  position: relative;
  width: 100%;
}

.application-search-dropdown .input {
  width: 100%;
  cursor: text;
}

.application-dropdown-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 4px;
}

.application-dropdown-items {
  padding: 0;
}

.application-dropdown-section {
  padding: 0;
}

.application-dropdown-section-header {
  padding: 8px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #7a7a7a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e8e8e8;
}

.application-dropdown-item {
  display: block;
  padding: 10px 12px;
  color: #363636;
  text-decoration: none;
  transition: background-color 0.15s ease;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
}

.application-dropdown-item:last-child {
  border-bottom: none;
}

.application-dropdown-item:hover {
  background-color: #f5f5f5;
}

.application-dropdown-item-selected {
  background-color: #3273dc;
  color: white;
}

.application-dropdown-item-selected:hover {
  background-color: #2366d1;
  color: white;
}

.application-dropdown-divider {
  margin: 0;
  border: none;
  border-top: 2px solid #dbdbdb;
  height: 0;
}

/* Scrollbar styling for dropdown */
.application-dropdown-results::-webkit-scrollbar {
  width: 8px;
}

.application-dropdown-results::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 4px;
}

.application-dropdown-results::-webkit-scrollbar-thumb {
  background: #dbdbdb;
  border-radius: 4px;
}

.application-dropdown-results::-webkit-scrollbar-thumb:hover {
  background: #b5b5b5;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
  .application-dropdown-results {
    max-height: 300px;
  }
}