/* Inter font stack */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* HTMX loading indicators */
.htmx-indicator {
    display: none;
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline;
    opacity: 1;
}

/* Toggle switch - can't easily do with pure Tailwind */
.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.toggle input { display: none; }
.toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 12px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle-slider::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.toggle input:checked + .toggle-slider { background: #22c55e; }
.toggle input:checked + .toggle-slider::after { transform: translateX(20px); }
.toggle-label { font-size: 14px; font-weight: 500; }
.toggle.disabled { cursor: not-allowed; opacity: 0.5; }
.toggle.disabled input { pointer-events: none; }

/* Modal overlay */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}
.modal-overlay.active { display: flex; }

/* Searchable select dropdown */
.search-select { position: relative; }
.search-select-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
    background: #fff; border: 1px solid #e2e8f0; border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px; overflow-y: auto; display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.search-select.open .search-select-dropdown { display: block; }
.search-select.open .form-control { border-radius: 8px 8px 0 0; }
.search-select-item {
    padding: 8px 14px; cursor: pointer; font-size: 14px;
    border-bottom: 1px solid #f1f5f9; transition: background 0.15s;
}
.search-select-item:last-child { border-bottom: none; }
.search-select-item:hover, .search-select-item.active { background: #eef2ff; }
.search-select-item .item-name { font-weight: 500; }
.search-select-item .item-id { font-size: 11px; color: #94a3b8; font-family: monospace; }
.search-select-empty,
.search-select-loading { padding: 12px 14px; color: #94a3b8; font-size: 13px; text-align: center; }
.search-select-selected { display: flex; align-items: center; gap: 8px; }
.search-select-selected .selected-tag {
    background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 4px;
    padding: 2px 8px; font-size: 12px; display: inline-flex; align-items: center; gap: 4px;
}
.search-select-selected .selected-clear {
    cursor: pointer; font-size: 14px; color: #94a3b8; line-height: 1;
}
.search-select-selected .selected-clear:hover { color: #334155; }

/* Expandable detail row */
.detail-row { display: none; }
.detail-row.open { display: table-row; }
.detail-btn.open { background: #e2e8f0; }

/* Sidebar toggle for mobile */
@media (max-width: 768px) {
    .sidebar-nav { display: none; }
    .sidebar-nav.open { display: block; }
}