/* ============================================
   ContractIQ Component Library Styles
   ============================================ */

/* === CSS Variables === */
:root {
    /* Light Mode Colors - Slate palette for professional look */
    --cq-slate-50: #f8fafc;
    --cq-slate-100: #f1f5f9;
    --cq-slate-200: #e2e8f0;
    --cq-slate-300: #cbd5e1;
    --cq-slate-400: #94a3b8;
    --cq-slate-500: #64748b;
    --cq-slate-600: #475569;
    --cq-slate-700: #334155;
    --cq-slate-800: #1e293b;
    --cq-slate-900: #0f172a;

    /* Accent Colors */
    --cq-blue-50: #eff6ff;
    --cq-blue-100: #dbeafe;
    --cq-blue-500: #3b82f6;
    --cq-blue-600: #2563eb;
    --cq-blue-700: #1d4ed8;

    --cq-green-50: #f0fdf4;
    --cq-green-100: #dcfce7;
    --cq-green-600: #16a34a;
    --cq-green-700: #15803d;

    --cq-amber-50: #fffbeb;
    --cq-amber-100: #fef3c7;
    --cq-amber-200: #fde68a;
    --cq-amber-600: #d97706;
    --cq-amber-700: #b45309;
    --cq-amber-800: #92400e;

    --cq-red-50: #fef2f2;
    --cq-red-100: #fee2e2;
    --cq-red-200: #fecaca;
    --cq-red-500: #ef4444;
    --cq-red-600: #dc2626;
    --cq-red-700: #b91c1c;

    /* AI colors - using blue tones for professional look */
    --cq-ai-50: #f0f9ff;
    --cq-ai-100: #e0f2fe;
    --cq-ai-500: #0ea5e9;
    --cq-ai-600: #0284c7;
    --cq-ai-700: #0369a1;

    /* Typography - Use global typography variables */
    --cq-font-sans: var(--font-sans, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    --cq-font-mono: var(--font-mono, 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace);

    /* Spacing */
    --cq-radius-sm: 6px;
    --cq-radius-md: 8px;
    --cq-radius-lg: 12px;
    --cq-radius-xl: 16px;

    /* Shadows */
    --cq-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --cq-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --cq-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Transitions */
    --cq-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --cq-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Semantic Colors (Light Mode) */
    --cq-bg-card: white;
    --cq-bg-elevated: var(--cq-slate-50);
    --cq-bg-hover: var(--cq-slate-100);
    --cq-border: var(--cq-slate-200);
    --cq-border-subtle: var(--cq-slate-100);
    --cq-text-primary: var(--cq-slate-900);
    --cq-text-secondary: var(--cq-slate-700);
    --cq-text-muted: var(--cq-slate-500);
}

/* Dark Mode - Only when data-theme is dark */
[data-theme="dark"] {
    --cq-slate-50: #222834;
    --cq-slate-100: #2a3140;
    --cq-slate-200: #334155;
    --cq-slate-300: #475569;
    --cq-slate-400: #64748b;
    --cq-slate-500: #94a3b8;
    --cq-slate-600: #cbd5e1;
    --cq-slate-700: #e2e8f0;
    --cq-slate-800: #f1f5f9;
    --cq-slate-900: #f8fafc;

    /* Dark mode accent backgrounds */
    --cq-blue-50: rgba(59, 130, 246, 0.15);
    --cq-blue-100: rgba(59, 130, 246, 0.25);
    --cq-green-50: rgba(16, 185, 129, 0.15);
    --cq-green-100: rgba(16, 185, 129, 0.25);
    --cq-amber-50: rgba(245, 158, 11, 0.15);
    --cq-amber-100: rgba(245, 158, 11, 0.25);
    --cq-red-50: rgba(239, 68, 68, 0.15);
    --cq-red-100: rgba(239, 68, 68, 0.25);
    --cq-ai-50: rgba(14, 165, 233, 0.15);
    --cq-ai-100: rgba(14, 165, 233, 0.25);

    /* Semantic Colors (Dark Mode) */
    --cq-bg-card: #1a1e27;
    --cq-bg-elevated: #222834;
    --cq-bg-hover: #2a3140;
    --cq-border: #334155;
    --cq-border-subtle: rgba(255, 255, 255, 0.1);
    --cq-text-primary: #f1f5f9;
    --cq-text-secondary: #cbd5e1;
    --cq-text-muted: #64748b;

    /* Dark mode shadows */
    --cq-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
    --cq-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
    --cq-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);
}


/* ============================================
   CqExpansionPanel Styles
   ============================================ */

.cq-panel {
    background: var(--cq-bg-card);
    border: 1px solid var(--cq-border);
    border-radius: var(--cq-radius-xl);
    box-shadow: var(--cq-shadow-sm);
    overflow: hidden;
    font-family: var(--cq-font-sans);
    font-size: var(--text-base, 13px);
}

.cq-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--cq-bg-elevated);
    border-bottom: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: background var(--cq-transition);
}

.cq-panel__header:hover {
    background: var(--cq-bg-hover);
}

.cq-panel--expanded .cq-panel__header {
    border-bottom-color: var(--cq-border-subtle);
}

.cq-panel__header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cq-panel__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--cq-text-muted);
    cursor: pointer;
    border-radius: var(--cq-radius-sm);
    transition: color var(--cq-transition), background var(--cq-transition);
}

.cq-panel__toggle:hover {
    color: var(--cq-text-secondary);
    background: var(--cq-bg-hover);
}

.cq-panel__chevron {
    width: 18px;
    height: 18px;
    transition: transform var(--cq-transition-slow);
}

.cq-panel--collapsed .cq-panel__chevron {
    transform: rotate(-90deg);
}

.cq-panel__icon {
    font-size: var(--text-xl, 18px);
    color: var(--cq-text-muted);
}

.cq-panel__title {
    margin: 0;
    font-size: var(--text-base, 13px);
    font-weight: var(--font-semibold, 600);
    color: var(--cq-text-primary);
    letter-spacing: -0.01em;
}

.cq-panel__count {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: var(--text-sm, 11px);
    font-weight: var(--font-medium, 500);
    color: var(--cq-text-secondary);
    background: var(--cq-bg-hover);
    border-radius: 9999px;
}

.cq-panel__header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cq-panel__total {
    text-align: right;
}

.cq-panel__total-label {
    display: block;
    font-size: var(--text-xs, 10px);
    font-weight: var(--font-medium, 500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cq-text-muted);
    margin-bottom: 2px;
}

.cq-panel__total-value {
    display: block;
    font-family: var(--cq-font-mono);
    font-size: var(--text-md, 14px);
    font-weight: var(--font-semibold, 600);
    color: var(--cq-text-primary);
    letter-spacing: -0.02em;
}

.cq-panel__body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--cq-transition-slow);
}

.cq-panel--collapsed .cq-panel__body {
    grid-template-rows: 0fr;
}

.cq-panel__content {
    overflow: hidden;
    padding: 1rem;
}


/* ============================================
   CqToolbar Styles
   ============================================ */

.cq-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    font-family: var(--cq-font-sans);
}

.cq-toolbar__primary,
.cq-toolbar__secondary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cq-toolbar__divider {
    width: 1px;
    height: 24px;
    background: var(--cq-slate-200);
    margin: 0 8px;
}

/* Button Base */
.cq-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-family: var(--cq-font-sans);
    font-size: var(--text-base, 13px);
    font-weight: var(--font-medium, 500);
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--cq-radius-md);
    cursor: pointer;
    transition: all var(--cq-transition);
    white-space: nowrap;
}

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

.cq-btn__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Primary Button */
.cq-btn--primary {
    background: var(--cq-slate-900);
    color: white;
    box-shadow: var(--cq-shadow-md), 0 2px 10px -1px rgb(15 23 42 / 0.2);
}

.cq-btn--primary:hover:not(:disabled) {
    background: var(--cq-slate-800);
    transform: translateY(-1px);
}

.cq-btn--primary:active:not(:disabled) {
    transform: translateY(0);
}

/* Secondary Button */
.cq-btn--secondary {
    background: white;
    color: var(--cq-slate-700);
    border-color: var(--cq-slate-200);
}

.cq-btn--secondary:hover:not(:disabled) {
    background: var(--cq-slate-50);
    border-color: var(--cq-slate-300);
}

/* Danger Button */
.cq-btn--danger {
    background: transparent;
    color: var(--cq-red-600);
    border-color: var(--cq-red-200);
}

.cq-btn--danger:hover:not(:disabled) {
    background: var(--cq-red-50);
    border-color: var(--cq-red-300);
}

/* Ghost Button */
.cq-btn--ghost {
    background: transparent;
    color: var(--cq-slate-600);
    border-color: transparent;
}

.cq-btn--ghost:hover:not(:disabled) {
    background: var(--cq-slate-100);
    color: var(--cq-slate-900);
}

/* Icon-only Button */
.cq-btn--icon {
    padding: 8px;
}

.cq-btn--icon .cq-btn__icon {
    width: 18px;
    height: 18px;
}


/* ============================================
   CqMessageBar Styles
   ============================================ */

.cq-message-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--cq-radius-lg);
    font-family: var(--cq-font-sans);
    border: 1px solid;
}

.cq-message-bar__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--cq-radius-md);
    flex-shrink: 0;
}

.cq-message-bar__icon,
.cq-message-bar__icon-svg {
    width: 18px;
    height: 18px;
}

.cq-message-bar__content {
    flex: 1;
    min-width: 0;
}

.cq-message-bar__title {
    font-weight: 600;
    margin-right: 8px;
}

.cq-message-bar__text {
    font-size: var(--text-base, 13px);
}

.cq-message-bar__dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--cq-radius-sm);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--cq-transition), background var(--cq-transition);
}

.cq-message-bar__dismiss:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

.cq-message-bar__dismiss svg {
    width: 16px;
    height: 16px;
}

.cq-message-bar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

/* Message Bar Variants */
.cq-message-bar--info {
    background: var(--cq-blue-50);
    border-color: var(--cq-blue-100);
    color: var(--cq-blue-700);
}

.cq-message-bar--info .cq-message-bar__icon-wrapper {
    background: var(--cq-blue-100);
}

.cq-message-bar--info .cq-message-bar__title {
    color: var(--cq-blue-800);
}

.cq-message-bar--success {
    background: var(--cq-green-50);
    border-color: var(--cq-green-100);
    color: var(--cq-green-700);
}

.cq-message-bar--success .cq-message-bar__icon-wrapper {
    background: var(--cq-green-100);
}

.cq-message-bar--warning {
    background: var(--cq-amber-50);
    border-color: var(--cq-amber-200);
    color: var(--cq-amber-700);
}

.cq-message-bar--warning .cq-message-bar__icon-wrapper {
    background: var(--cq-amber-100);
    color: var(--cq-amber-600);
}

.cq-message-bar--warning .cq-message-bar__title {
    color: var(--cq-amber-800);
}

.cq-message-bar--error {
    background: var(--cq-red-50);
    border-color: var(--cq-red-100);
    color: var(--cq-red-700);
}

.cq-message-bar--error .cq-message-bar__icon-wrapper {
    background: var(--cq-red-100);
}

.cq-message-bar--ai {
    background: var(--cq-ai-50);
    border-color: var(--cq-ai-100);
    color: var(--cq-ai-700);
}

.cq-message-bar--ai .cq-message-bar__icon-wrapper {
    background: var(--cq-ai-100);
    color: var(--cq-ai-600);
}

.cq-message-bar--ai .cq-message-bar__title {
    color: var(--cq-ai-700);
}


/* ============================================
   CqDataGrid Styles
   ============================================ */

.cq-grid-wrapper {
    overflow-x: auto;
    font-family: var(--cq-font-sans);
    font-size: var(--text-base, 13px);
}

.cq-grid {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.cq-grid__head {
    border-bottom: 1px solid var(--cq-border-subtle);
}

.cq-grid__th {
    padding: 10px 16px;
    font-size: var(--text-xs, 10px);
    font-weight: var(--font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cq-text-muted);
    background: transparent;
    white-space: nowrap;
}

.cq-grid__th--selection,
.cq-grid__td--selection {
    padding-left: 16px;
    padding-right: 8px;
}

.cq-grid__th--actions {
    text-align: center;
}

.cq-grid__sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    transition: color var(--cq-transition);
}

.cq-grid__sort-btn:hover {
    color: var(--cq-text-secondary);
}

.cq-grid__sort-icon {
    width: 12px;
    height: 12px;
    transition: transform var(--cq-transition);
}

.cq-grid__sort-icon--desc {
    transform: rotate(180deg);
}

.cq-grid__row {
    border-bottom: 1px solid var(--cq-border-subtle);
    transition: background var(--cq-transition);
}

.cq-grid__row:last-child {
    border-bottom: none;
}

.cq-grid__row:hover {
    background: var(--cq-bg-hover);
}

.cq-grid__row--selected {
    background: var(--cq-blue-50) !important;
}

.cq-grid__row--empty:hover {
    background: transparent;
}

.cq-grid__td {
    padding: 12px 16px;
    font-size: var(--text-base, 13px);
    color: var(--cq-text-secondary);
    vertical-align: middle;
}

.cq-grid__td--empty {
    padding: 32px 16px;
}

.cq-grid__td--actions {
    padding: 8px 16px;
}

/* Selection Controls */
.cq-grid__radio {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 2px solid var(--cq-text-muted);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: all var(--cq-transition);
}

.cq-grid__radio:hover {
    border-color: var(--cq-text-secondary);
}

.cq-grid__radio--selected {
    border-color: var(--cq-blue-500);
    background: var(--cq-blue-500);
}

.cq-grid__radio-dot {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
}

.cq-grid__checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--cq-blue-500);
}

/* Row Actions */
.cq-grid__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--cq-transition);
}

.cq-grid__row:hover .cq-grid__actions {
    opacity: 1;
}

.cq-grid__action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--cq-text-muted);
    border-radius: var(--cq-radius-sm);
    cursor: pointer;
    transition: all var(--cq-transition);
}

.cq-grid__action-btn:hover {
    background: var(--cq-bg-hover);
    color: var(--cq-text-secondary);
}

.cq-grid__action-btn--danger:hover {
    background: var(--cq-red-50);
    color: var(--cq-red-600);
}

.cq-grid__action-btn svg {
    width: 16px;
    height: 16px;
}

/* Empty State */
.cq-grid__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--cq-text-muted);
}

.cq-grid__empty-icon {
    width: 36px;
    height: 36px;
    opacity: 0.5;
}

/* Cell Formatting */
.cq-currency {
    font-family: var(--cq-font-mono);
    font-weight: var(--font-semibold, 600);
    font-size: var(--text-base, 13px);
    color: var(--cq-text-primary);
    letter-spacing: -0.02em;
}

.cq-bool--true {
    color: var(--cq-green-600);
}

.cq-bool--false {
    color: var(--cq-text-muted);
}

/* Badge Styles */
.cq-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--text-xs, 10px);
    font-weight: var(--font-medium, 500);
    border-radius: var(--cq-radius-sm);
    white-space: nowrap;
}

/* Common badge colors - add more as needed */
.cq-badge--active,
.cq-badge--complete,
.cq-badge--approved {
    background: var(--cq-green-50);
    color: var(--cq-green-700);
}

.cq-badge--pending,
.cq-badge--in-progress,
.cq-badge--draft {
    background: var(--cq-amber-50);
    color: var(--cq-amber-700);
}

.cq-badge--inactive,
.cq-badge--cancelled,
.cq-badge--rejected {
    background: var(--cq-red-50);
    color: var(--cq-red-700);
}

.cq-badge--ai,
.cq-badge--new {
    background: var(--cq-ai-100);
    color: var(--cq-ai-700);
}

/* AI Indicator */
.cq-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--text-sm, 11px);
    font-weight: var(--font-medium, 500);
    background: var(--cq-ai-100);
    color: var(--cq-ai-700);
    border-radius: var(--cq-radius-sm);
}

.cq-ai-badge__icon {
    width: 12px;
    height: 12px;
}


/* ============================================
   Utility Classes
   ============================================ */

.cq-text-muted {
    color: var(--cq-slate-500);
}

.cq-text-small {
    font-size: var(--text-base, 13px);
}

.cq-text-mono {
    font-family: var(--cq-font-mono);
}

.cq-mt-2 { margin-top: 8px; }
.cq-mt-4 { margin-top: 16px; }
.cq-mt-6 { margin-top: 24px; }
.cq-mb-2 { margin-bottom: 8px; }
.cq-mb-4 { margin-bottom: 16px; }
.cq-mb-6 { margin-bottom: 24px; }

.cq-flex { display: flex; }
.cq-items-center { align-items: center; }
.cq-gap-2 { gap: 8px; }
.cq-gap-3 { gap: 12px; }


/* ============================================
   Font Import (add to your _Host.cshtml or index.html)
   ============================================ */
/*
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet">
*/