/* Action Menu Styles - responsive, contrast, shadows, smooth transitions */
:root {
  --menu-bg: #ffffff;
  --menu-bg2: #f7f9fc;
  --menu-text: #0b132b; /* deep navy text for contrast */
  --menu-border: #0b5ed7; /* bootstrap primary tone */
  --menu-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  --menu-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
  --menu-hover-bg: #eef3ff;
  --menu-focus-ring: rgba(11, 94, 215, 0.35);
  --menu-danger: #dc3545;
  --menu-danger-bg: #fff5f6;
  --menu-danger-border: #c92a38;
}

html[data-bs-theme="dark"], html[data-theme="dark"] {
  --menu-bg: #121826;
  --menu-bg2: #0f172a;
  --menu-text: #e6edf7;
  --menu-border: #60a5fa; /* lighter primary on dark */
  --menu-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  --menu-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.55);
  --menu-hover-bg: #1e293b;
  --menu-focus-ring: rgba(96, 165, 250, 0.45);
  --menu-danger: #ff6b6b;
  --menu-danger-bg: #25151a;
  --menu-danger-border: #ff6b6b;
}

.action-menu {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.action-item {
  --_bg1: var(--menu-bg);
  --_bg2: var(--menu-bg2);
  background: linear-gradient(180deg, var(--_bg1), var(--_bg2));
  color: var(--menu-text);
  border: 2px solid var(--menu-border);
  border-radius: .75rem;
  padding: .4rem .6rem;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  box-shadow: var(--menu-shadow);
  text-decoration: none;
  font-weight: 600;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 200ms ease, transform 160ms ease;
}

.action-item .bi { font-size: 1rem; }
.action-item .label { white-space: nowrap; }

.action-item:hover { 
  background: linear-gradient(180deg, var(--menu-hover-bg), var(--menu-bg));
  transform: translateY(-1px);
  box-shadow: var(--menu-shadow-hover);
}

.action-item:focus-visible { 
  outline: 0; 
  box-shadow: 0 0 0 .2rem var(--menu-focus-ring), var(--menu-shadow);
}

/* Primary/neutral variant (default) */
.action-item--primary { }

/* Accent variant for Preview/Ekspor if needed */
.action-item--accent { border-color: #0ea5e9; }

/* Danger for Logout */
.action-item--danger {
  color: var(--menu-danger);
  border-color: var(--menu-danger-border);
  background: linear-gradient(180deg, var(--menu-danger-bg), var(--menu-bg));
}
.action-item--danger:hover {
  filter: brightness(1.02);
}

/* Button element support */
button.action-item { cursor: pointer; }

/* Responsive sizing */
@media (max-width: 480px) {
  .action-item { padding: .35rem .5rem; font-size: .875rem; border-radius: .6rem; }
  .action-menu { gap: .4rem; }
}

/* High-density layout for very small screens */
@media (max-width: 360px) {
  .action-item .label { display: none; }
}

/* ===== Contrast fix: action items on dark blueblack navbar ===== */
/* Ensure visible white text for action items rendered on dark navbar */
.navbar.sb-bg-blueblack .action-item,
.navbar.sb-bg-blueblack .action-item .label,
.navbar.sb-bg-blueblack .action-item .bi {
  color: #FFFFFF !important;
}

/* Remove special dark overrides: keep all action items white on blueblack navbar */
.navbar.sb-bg-blueblack .action-menu a[title="Ekspor ke MS. Word"],
.navbar.sb-bg-blueblack .action-menu a[title="Ekspor ke MS. Word"] .label,
.navbar.sb-bg-blueblack .action-menu a[title="Ekspor ke MS. Word"] .bi { color: #FFFFFF !important; background: transparent !important; border-color: #FFFFFF !important; }

/* Strong black labels: specific items requested (except landing/login markup does not include them) */
.action-item .label.label-strong { font-weight: 700 !important; }
.navbar.sb-bg-blueblack .action-menu a[title="Download Template"] .label.label-strong,
.navbar.sb-bg-blueblack .action-menu a[title="Preview Kurikulum"] .label.label-strong { color: #FFFFFF !important; }
.navbar.sb-bg-blueblack .action-menu [title="Logout"] .label { color: #000000 !important; }