/* OpenMetrix Design System */
/* Prefix: om- (to avoid Tailwind conflicts) */

/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
    /* Primary palette */
    --om-primary-50: #eef2ff;
    --om-primary-100: #e0e7ff;
    --om-primary-200: #c7d2fe;
    --om-primary-300: #a5b4fc;
    --om-primary-400: #818cf8;
    --om-primary-500: #6366f1;
    --om-primary-600: #4f46e5;
    --om-primary-700: #4338ca;
    --om-primary-800: #3730a3;
    --om-primary-900: #312e81;

    /* Semantic colors */
    --om-success: #059669;
    --om-success-light: #d1fae5;
    --om-error: #dc2626;
    --om-error-light: #fee2e2;
    --om-warning: #d97706;
    --om-warning-light: #fef3c7;
    --om-info: #2563eb;
    --om-info-light: #dbeafe;

    /* Platform brand colors */
    --om-facebook: #1877F2;
    --om-google: #4285F4;
    --om-ga4: #E37400;

    /* Sidebar */
    --om-sidebar-width: 16rem;
    --om-sidebar-collapsed: 4rem;
    --om-sidebar-active-bg: #eef2ff;
    --om-sidebar-active-border: #6366f1;

    /* Transitions */
    --om-transition: 150ms ease;
}

/* ============================================
   BUTTONS
   ============================================ */
.om-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    border-radius: 0.375rem;
    transition: all var(--om-transition);
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}

.om-btn:focus-visible {
    outline: 2px solid var(--om-primary-500);
    outline-offset: 2px;
}

.om-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.om-btn svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Primary */
.om-btn-primary {
    background-color: var(--om-primary-600);
    color: #fff;
}
.om-btn-primary:hover:not(:disabled) {
    background-color: var(--om-primary-700);
}

/* Secondary */
.om-btn-secondary {
    background-color: #fff;
    color: #374151;
    border-color: #d1d5db;
}
.om-btn-secondary:hover:not(:disabled) {
    background-color: #f9fafb;
}

/* Danger */
.om-btn-danger {
    background-color: var(--om-error);
    color: #fff;
}
.om-btn-danger:hover:not(:disabled) {
    background-color: #b91c1c;
}

/* Ghost */
.om-btn-ghost {
    background-color: transparent;
    color: #6b7280;
}
.om-btn-ghost:hover:not(:disabled) {
    background-color: #f3f4f6;
    color: #374151;
}

/* Sizes */
.om-btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    gap: 0.375rem;
}
.om-btn-sm svg {
    width: 0.875rem;
    height: 0.875rem;
}

.om-btn-lg {
    padding: 0.625rem 1.5rem;
    font-size: 1rem;
    gap: 0.625rem;
}
.om-btn-lg svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ============================================
   CARDS
   ============================================ */
.om-card {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.om-card-hover {
    transition: all var(--om-transition);
    cursor: pointer;
}
.om-card-hover:hover {
    border-color: var(--om-primary-300);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.om-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #111827;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    transition: border-color var(--om-transition), box-shadow var(--om-transition);
}
.om-input:focus {
    outline: none;
    border-color: var(--om-primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.om-input::placeholder {
    color: #9ca3af;
}
.om-input.is-error {
    border-color: var(--om-error);
}
.om-input.is-error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.om-select {
    display: block;
    width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #111827;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color var(--om-transition), box-shadow var(--om-transition);
}
.om-select:focus {
    outline: none;
    border-color: var(--om-primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.om-input.om-sm,
.om-select.om-sm {
    font-size: 0.8rem;
    line-height: 0.8rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.om-checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid #d1d5db;
    color: var(--om-primary-600);
    cursor: pointer;
    accent-color: var(--om-primary-600);
}
.om-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ============================================
   STATUS BADGES
   ============================================ */
.om-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}
.om-status svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.om-status--success {
    background-color: var(--om-success-light);
    color: #065f46;
}
.om-status--error {
    background-color: var(--om-error-light);
    color: #991b1b;
}
.om-status--warning {
    background-color: var(--om-warning-light);
    color: #92400e;
}
.om-status--info {
    background-color: var(--om-info-light);
    color: #1e40af;
}
.om-status--neutral {
    background-color: #f3f4f6;
    color: #4b5563;
}

/* ============================================
   SIDEBAR
   ============================================ */
.om-sidebar-section-label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 0.5rem 0.75rem 0.25rem;
}

.om-sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    transition: all var(--om-transition);
    text-decoration: none;
    border-left: 3px solid transparent;
    margin-left: -3px;
}
.om-sidebar-link:hover {
    background-color: #f9fafb;
    color: #111827;
}
.om-sidebar-link svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #9ca3af;
    flex-shrink: 0;
    margin-right: 0.75rem;
    transition: color var(--om-transition);
}

.om-sidebar-link--active {
    background-color: var(--om-sidebar-active-bg);
    color: var(--om-primary-700);
    border-left-color: var(--om-sidebar-active-border);
}
.om-sidebar-link--active svg {
    color: var(--om-primary-500);
}

/* ============================================
   WIZARD / STEPPER
   ============================================ */
.om-wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.5rem 0;
}

.om-wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    max-width: 10rem;
}

.om-wizard-step-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    border: 2px solid #d1d5db;
    background-color: #fff;
    color: #9ca3af;
    transition: all var(--om-transition);
    position: relative;
    z-index: 1;
}
.om-wizard-step-circle svg {
    width: 1.25rem;
    height: 1.25rem;
}

.om-wizard-step--active .om-wizard-step-circle {
    border-color: var(--om-primary-600);
    background-color: var(--om-primary-600);
    color: #fff;
}

.om-wizard-step--completed .om-wizard-step-circle {
    border-color: var(--om-primary-600);
    background-color: var(--om-primary-600);
    color: #fff;
}

.om-wizard-step-label {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #9ca3af;
    text-align: center;
}
.om-wizard-step--active .om-wizard-step-label {
    color: var(--om-primary-700);
    font-weight: 600;
}
.om-wizard-step--completed .om-wizard-step-label {
    color: var(--om-primary-600);
}

.om-wizard-connector {
    flex: 1;
    height: 2px;
    background-color: #d1d5db;
    margin: 0 -0.5rem;
    position: relative;
    top: -0.75rem;
    align-self: flex-start;
    margin-top: 1.25rem;
}
.om-wizard-connector--completed {
    background-color: var(--om-primary-600);
}

/* ============================================
   EMPTY STATE
   ============================================ */
.om-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}
.om-empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: #f3f4f6;
    color: #9ca3af;
    margin-bottom: 1rem;
}
.om-empty-state-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}
.om-empty-state-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}
.om-empty-state-text {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1rem;
    max-width: 24rem;
}

/* ============================================
   PLATFORM BADGES
   ============================================ */
.om-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: #f3f4f6;
    color: #374151;
}
.om-platform-badge svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
.om-platform-badge--facebook {
    background-color: #e7f0fd;
    color: #1877F2;
}
.om-platform-badge--google_ads {
    background-color: #e8f0fe;
    color: #4285F4;
}
.om-platform-badge--ga4 {
    background-color: #fef3e2;
    color: #E37400;
}

/* ============================================
   TOOLTIP (CSS-only, attr-based)
   ============================================ */
.om-tooltip {
    position: relative;
}
.om-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
    color: #fff;
    background-color: #1f2937;
    border-radius: 0.375rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--om-transition);
    z-index: 50;
}
.om-tooltip::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 0.25rem);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1f2937;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--om-transition);
    z-index: 50;
}
.om-tooltip:hover::after,
.om-tooltip:hover::before {
    opacity: 1;
}

/* ============================================
   RADIO CARD
   ============================================ */
.om-radio-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all var(--om-transition);
    background-color: #fff;
}
.om-radio-card:hover {
    border-color: var(--om-primary-300);
}
.om-radio-card--selected {
    border-color: var(--om-primary-500);
    background-color: var(--om-primary-50);
}
.om-radio-card input[type="radio"] {
    display: none;
}
.om-radio-card-check {
    display: none;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--om-primary-600);
    margin-left: auto;
    flex-shrink: 0;
}
.om-radio-card--selected .om-radio-card-check {
    display: block;
}

/* ============================================
   QUICK ACTIONS DROPDOWN
   ============================================ */
.om-quick-actions {
    position: relative;
}
.om-quick-actions-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    width: 12rem;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    z-index: 40;
    overflow: hidden;
}
.om-quick-actions-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #374151;
    text-decoration: none;
    transition: background-color var(--om-transition);
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
}
.om-quick-actions-item:hover {
    background-color: #f3f4f6;
}
.om-quick-actions-item svg {
    width: 1rem;
    height: 1rem;
    color: #6b7280;
    flex-shrink: 0;
}
.om-quick-actions-item--danger {
    color: var(--om-error);
}
.om-quick-actions-item--danger svg {
    color: var(--om-error);
}
.om-quick-actions-divider {
    border-top: 1px solid #e5e7eb;
    margin: 0.25rem 0;
}

/* ============================================
   FILTER PILLS
   ============================================ */
.om-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background-color: var(--om-primary-50);
    color: var(--om-primary-700);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}
.om-filter-pill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color var(--om-transition);
    border: none;
    background: none;
    padding: 0;
    color: var(--om-primary-500);
}
.om-filter-pill-remove:hover {
    background-color: var(--om-primary-200);
    color: var(--om-primary-800);
}
.om-filter-pill-remove svg {
    width: 0.75rem;
    height: 0.75rem;
}

/* ============================================
   EXPLORER LAYOUT
   ============================================ */
.om-explorer-layout {
    display: flex;
    height: calc(100vh - 4rem - 3rem);
    gap: 0;
}
.om-explorer-sidebar {
    width: 20rem;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid #e5e7eb;
    background-color: #fff;
    padding: 1rem;
}
.om-explorer-results {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ============================================
   ACCORDION
   ============================================ */
.om-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
}
.om-accordion-header svg {
    transition: transform var(--om-transition);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes om-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.om-spin {
    animation: om-spin 1s linear infinite;
}

@keyframes om-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.om-pulse {
    animation: om-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================
   UTILITY: SEARCH INPUT WITH ICON
   ============================================ */
.om-search-wrapper {
    position: relative;
}
.om-search-wrapper svg {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
    pointer-events: none;
}
.om-search-wrapper .om-input {
    padding-left: 2.25rem;
}

/* ============================================
   TABLE HEADER (sortable)
   ============================================ */
.om-th-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}
.om-th-sort:hover {
    color: #374151;
}
.om-th-sort svg {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.5;
}
.om-th-sort--active svg {
    opacity: 1;
    color: var(--om-primary-600);
}

/* ============================================
   DASHBOARD STUDIO
   ============================================ */
.om-studio-drag-handle {
    cursor: move;
    border-radius: 0.5rem 0.5rem 0 0;
    transition: background-color var(--om-transition);
}

.om-studio-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 16px 16px;
    border-color: transparent transparent #d1d5db transparent;
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity var(--om-transition);
}
.om-studio-resize-handle:hover {
    border-color: transparent transparent var(--om-primary-400) transparent;
}

/* Show resize handle on widget hover (in edit mode) */
div:hover > .om-studio-resize-handle {
    opacity: 1;
}