@import url('stat-cards.css');
@import url('toast.css');

.app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 0;
  color: inherit;
}

.app-icon svg,
.app-icon-svg {
  flex-shrink: 0;
}

.search-icon .app-icon svg,
.search-icon.app-icon svg {
  width: 16px;
  height: 16px;
}

.stat-icon .app-icon svg,
.stat-icon.app-icon svg {
  width: 28px;
  height: 28px;
}

.nav-btn-icon .app-icon svg,
.nav-btn-icon.app-icon svg,
.nav-btn-icon .nav-unified-icon {
  width: 26px;
  height: 26px;
}

.nav-icon-unified .nav-unified-icon,
.nav-btn-icon .nav-unified-icon {
  stroke: currentColor;
  color: inherit;
}

/* Sidebar icon color pattern */
.nav-btn-icon.nav-icon-unified,
.nav-btn[data-nav-tone] .nav-btn-icon {
  color: #14b8a6;
}

.nav-btn[data-nav-tone="teal"] .nav-btn-icon { color: #14b8a6; }
.nav-btn[data-nav-tone="amber"] .nav-btn-icon { color: #f59e0b; }
.nav-btn[data-nav-tone="green"] .nav-btn-icon { color: #22c55e; }
.nav-btn[data-nav-tone="gold"] .nav-btn-icon { color: #ca8a04; }
.nav-btn[data-nav-tone="indigo"] .nav-btn-icon { color: #6366f1; }
.nav-btn[data-nav-tone="sky"] .nav-btn-icon { color: #0ea5e9; }
.nav-btn[data-nav-tone="sand"] .nav-btn-icon { color: #d4a373; }
.nav-btn[data-nav-tone="lime"] .nav-btn-icon { color: #65a30d; }
.nav-btn[data-nav-tone="pink"] .nav-btn-icon { color: #ec4899; }
.nav-btn[data-nav-tone="orange"] .nav-btn-icon { color: #f97316; }
.nav-btn[data-nav-tone="rose"] .nav-btn-icon { color: #f43f5e; }
.nav-btn[data-nav-tone="fuchsia"] .nav-btn-icon { color: #d946ef; }
.nav-btn[data-nav-tone="violet"] .nav-btn-icon { color: #8b5cf6; }
.nav-btn[data-nav-tone="yellow"] .nav-btn-icon { color: #eab308; }
.nav-btn[data-nav-tone="purple"] .nav-btn-icon { color: #a855f7; }
.nav-btn[data-nav-tone="cyan"] .nav-btn-icon { color: #06b6d4; }
.nav-btn[data-nav-tone="emerald"] .nav-btn-icon { color: #10b981; }
.nav-btn[data-nav-tone="blue"] .nav-btn-icon { color: #3b82f6; }
.nav-btn[data-nav-tone="coral"] .nav-btn-icon { color: #fb7185; }
.nav-btn[data-nav-tone="magenta"] .nav-btn-icon { color: #e879f9; }
.nav-btn[data-nav-tone="azure"] .nav-btn-icon { color: #38bdf8; }
.nav-btn[data-nav-tone="slate"] .nav-btn-icon { color: #64748b; }

.nav-btn.active .nav-btn-icon {
  color: #4f46e5;
}

.close-btn.icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  line-height: 0;
}

.close-btn.icon-only svg {
  width: 18px;
  height: 18px;
}

.tab .app-icon {
  margin-right: 6px;
}

.tab .app-icon-svg,
.tab svg.app-icon-svg {
  width: 18px;
  height: 18px;
  stroke: var(--primary, #2dd6ba);
}

.page-title > .app-icon,
.page-title .app-icon[data-icon] {
  margin-right: 8px;
  vertical-align: middle;
}

.page-title .app-icon-svg {
  stroke: currentColor;
}

.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

button .app-icon svg,
.btn .app-icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0;
  flex-shrink: 0;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  color: var(--gray-600, #4b5563);
  transition: background 0.15s, color 0.15s;
}

.action-btn:hover {
  background: var(--gray-100, #f3f4f6);
  color: var(--primary, #2dd6ba);
}

.action-btn.delete:hover,
.action-btn.icon-only.delete:hover {
  color: #ef4444;
}

.action-btn.icon-only {
  line-height: 0;
  min-width: 32px;
  min-height: 32px;
}

.action-btn.icon-only svg {
  width: 16px;
  height: 16px;
}

/* Hover tooltips for icon / action buttons (scoped — avoid breaking positioned controls like login password toggle) */
.action-btn[data-tip],
.btn-icon[data-tip],
.btn-edit[data-tip],
.btn-delete[data-tip],
.settings-btn[data-tip],
.close-popup[data-tip],
.close-btn[data-tip],
.date-nav-btn[data-tip],
.icon-only[data-tip] {
  position: relative;
}

.action-btn[data-tip]:hover::after,
.btn-icon[data-tip]:hover::after,
.btn-edit[data-tip]:hover::after,
.btn-delete[data-tip]:hover::after,
.settings-btn[data-tip]:hover::after,
.close-popup[data-tip]:hover::after,
.close-btn[data-tip]:hover::after,
.date-nav-btn[data-tip]:hover::after,
.icon-only[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 6px;
  background: #1e293b;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10050;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.action-btn[data-tip]:hover::before,
.btn-icon[data-tip]:hover::before,
.btn-edit[data-tip]:hover::before,
.btn-delete[data-tip]:hover::before,
.settings-btn[data-tip]:hover::before,
.close-popup[data-tip]:hover::before,
.close-btn[data-tip]:hover::before,
.date-nav-btn[data-tip]:hover::before,
.icon-only[data-tip]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1e293b;
  pointer-events: none;
  z-index: 10050;
}

.notification-bell .app-icon-svg,
.mobile-menu-btn .app-icon-svg {
  stroke: currentColor;
}

.notification-bell {
  color: var(--gray-700, #374151);
}

.mobile-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gray-700, #374151);
}

.stat-icon .app-icon-svg {
  stroke: var(--primary, #2dd6ba);
}

.empty-state-icon.app-icon svg,
.empty-state-icon .app-icon svg,
.empty-state-icon > .app-icon svg {
  width: 48px;
  height: 48px;
  opacity: 0.45;
}

.page-title .app-icon svg,
.card-title .app-icon svg,
h1 .app-icon svg,
h2 .app-icon svg,
h3 .app-icon svg,
h4 .app-icon svg {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.35em;
  vertical-align: -0.15em;
}

button .app-icon svg,
.btn .app-icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0;
  flex-shrink: 0;
}

.toast-icon .app-icon svg {
  width: 18px;
  height: 18px;
}

.badge-icon .app-icon svg {
  width: 12px;
  height: 12px;
}