:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f8f8;
    --text-primary: #1a1a1a;
    --text-secondary: #333333;
    --text-tertiary: #555555;
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --border-color: #d1d5db;
    --border-light: #e5e7eb;
    --hover-bg: #eff6ff;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --accent-success: #059669;
    --accent-warning: #d97706;
    --accent-danger: #dc2626;
    --accent-info: #0284c7;
    --button-text: #ffffff;
    --button-text-light: #1a1a1a;
    --tooltip-bg: rgba(0, 0, 0, 0.95);
    --tooltip-text: #ffffff;
    --overlay-bg: rgba(0, 0, 0, 0.5);
    /* Role-specific colors */
    --role-keyholder: #3b82f6;
    --role-keyholder-bg: #dbeafe;
    --role-lockee: #dc2626;
    --role-lockee-bg: #fee2e2;
    --role-assist-keyholder: #059669;
    --role-assist-keyholder-bg: #dcfce7;
    --role-assist-lockee: #f97316;
    --role-assist-lockee-bg: #ffedd5;
    --role-default: #6b7280;
    --role-default-bg: #f3f4f6;
}

html[data-theme="dark"] {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --text-primary: #f3f4f6;
    --text-secondary: #e5e7eb;
    --text-tertiary: #d1d5db;
    --color-primary: #60a5fa;
    --color-primary-dark: #3b82f6;
    --border-color: #374151;
    --border-light: #4b5563;
    --hover-bg: #111f3a;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --accent-success: #34d399;
    --accent-warning: #fbbf24;
    --accent-danger: #f87171;
    --accent-info: #38bdf8;
    --button-text: #ffffff;
    --button-text-light: #1a1a1a;
    --tooltip-bg: rgba(15, 23, 42, 0.95);
    --tooltip-text: #f1f5f9;
    --overlay-bg: rgba(0, 0, 0, 0.7);
    /* Role-specific colors */
    --role-keyholder: #60a5fa;
    --role-keyholder-bg: rgba(96, 165, 250, 0.1);
    --role-lockee: #f87171;
    --role-lockee-bg: rgba(248, 113, 113, 0.1);
    --role-assist-keyholder: #34d399;
    --role-assist-keyholder-bg: rgba(52, 211, 153, 0.1);
    --role-assist-lockee: #fbbf24;
    --role-assist-lockee-bg: rgba(251, 191, 36, 0.1);
    --role-default: #9ca3af;
    --role-default-bg: rgba(156, 163, 175, 0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg-primary); color: var(--text-primary); transition: background 0.3s, color 0.3s; }

/* ===== UTILITY CLASSES ===== */

/* Display & Layout */
.u-flex { display: flex; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-flex-between { display: flex; justify-content: space-between; align-items: center; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-wrap { display: flex; flex-wrap: wrap; }
.u-grid { display: grid; }

/* Spacing Utilities */
.u-gap-2 { gap: 8px; }
.u-gap-3 { gap: 10px; }
.u-gap-4 { gap: 12px; }
.u-gap-5 { gap: 15px; }
.u-gap-6 { gap: 20px; }

.u-p-2 { padding: 8px; }
.u-p-3 { padding: 12px; }
.u-p-4 { padding: 15px; }
.u-p-5 { padding: 20px; }

.u-px-2 { padding-left: 8px; padding-right: 8px; }
.u-px-3 { padding-left: 12px; padding-right: 12px; }.u-px-1 { padding-left: 2px; padding-right: 2px; }.u-py-1 { padding-top: 4px; padding-bottom: 4px; }
.u-py-2 { padding-top: 8px; padding-bottom: 8px; }
.u-py-3 { padding-top: 12px; padding-bottom: 12px; }

.u-m-0 { margin: 0; }
.u-m-1 { margin: 4px; }
.u-m-2 { margin: 8px; }
.u-m-3 { margin: 12px; }
.u-mt-1 { margin-top: 3px; }
.u-mt-2 { margin-top: 8px; }
.u-mt-3 { margin-top: 12px; }
.u-mt-4 { margin-top: 15px; }
.u-mt-5 { margin-top: 20px; }
.u-mt-6 { margin-top: 25px; }
.u-mt-7 { margin-top: 30px; }
.u-mb-1 { margin-bottom: 3px; }
.u-mb-2 { margin-bottom: 8px; }
.u-mb-3 { margin-bottom: 12px; }
.u-mb-4 { margin-bottom: 15px; }
.u-mb-5 { margin-bottom: 20px; }
.u-mb-8 { margin-bottom: 30px; }
.u-ml-auto { margin-left: auto; }
.u-ml-6 { margin-left: 25px; }
.u-mr-2 { margin-right: 8px; }
.u-my-4 { margin-top: 15px; margin-bottom: 15px; }
.u-pb-5 { padding-bottom: 20px; }
.u-p-10 { padding: 40px; }

/* Alignment */
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }
.u-justify-center { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-rounded { border-radius: 6px; }

/* Width & Height */
.u-w-full { width: 100%; }
.u-flex-1 { flex: 1; }
.u-h-full { height: 100%; }
.u-max-w-sm { max-width: 400px; }
.u-max-w-md { max-width: 500px; }

/* Typography */
.u-text-sm { font-size: 0.85em; }
.u-text-base { font-size: 1em; }
.u-text-lg { font-size: 1.1em; }
.u-text-xl { font-size: 1.2em; }
.u-text-2xl { font-size: 1.8em; }
.u-text-3xl { font-size: 3em; }
.u-text-4xl { font-size: 4em; }
.u-font-500 { font-weight: 500; }
.u-font-600 { font-weight: 600; }
.u-font-700 { font-weight: 700; }

.u-text-primary { color: var(--text-primary); }
.u-text-secondary { color: var(--text-secondary); }
.u-text-tertiary { color: var(--text-tertiary); }

/* Line Height */
.u-leading-tight { line-height: 1.25; }
.u-leading-normal { line-height: 1.5; }
.u-leading-relaxed { line-height: 1.75; }

/* Display & Visibility */
.u-hidden { display: none; }
.u-block { display: block; }

/* Borders */
.u-border-t { border-top: 1px solid var(--border-color); }
.u-border-b { border-bottom: 1px solid var(--border-color); }
.u-border { border: 1px solid var(--border-color); }
.u-border-2 { border: 2px solid; }
.u-border-left-4 { border-left: 4px solid; }

/* Input & Select styles */
.input-full { width: 100%; }
select { padding: 6px 10px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); border-radius: 4px; width: 100%; }
input[type="text"],
input[type="password"],
input[type="number"] { padding: 8px 12px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); border-radius: 4px; width: 100%; }

/* Border Radius */
.u-rounded-sm { border-radius: 3px; }
.u-rounded-md { border-radius: 5px; }

/* Grid utilities */
.u-grid-cols-2 { grid-template-columns: 1fr 1fr; }
.u-grid-auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.u-grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.u-col-span-full { grid-column: 1 / -1; }

/* Overflow */
.u-overflow-y-auto { overflow-y: auto; }
.u-max-h-200 { max-height: 200px; }
.u-max-h-180 { max-height: 180px; }

/* Button and form utilities */
.role-btn { padding: 15px 20px; border: 2px solid transparent; background: transparent; border-radius: 8px; cursor: pointer; font-size: 1em; font-weight: bold; }
.role-btn.selected { border-color: var(--color-primary); background: var(--hover-bg); }
.btn-primary-full { display: block; width: 100%; padding: 8px 12px; background: var(--color-primary); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; font-weight: 600; margin-top: 8px; }
.btn-warning-sm { margin-top: 8px; padding: 6px 12px; background: var(--accent-warning); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; }

/* Label and form utilities */
.label-block { display: block; margin-bottom: 8px; }
.label-form { display: block; font-size: 0.9em; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.label-flex { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.label-flex-sm { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }

/* Top/bottom padding */
.u-pt-4 { padding-top: 15px; }
.u-pb-4 { padding-bottom: 15px; }
.u-py-4 { padding-top: 15px; padding-bottom: 15px; }
.u-mt-2 { margin-top: 5px; }

/* Text alignment */
.u-text-right { text-align: right; }
.u-text-left { text-align: left; }
.u-text-center { text-align: center; }

/* Min/Max width */
.u-min-w-20 { min-width: 80px; }

/* Field containers */
.export-fields-container { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 5px; padding: 10px; max-height: 200px; overflow-y: auto; }
.export-field-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.85em; }
.export-field-label input { cursor: pointer; }

/* Card & Container Styles */
.card { background: var(--bg-secondary); padding: 15px; border-radius: 8px; }
.card-primary { background: var(--bg-primary); padding: 15px; border-radius: 8px; }
.card-hover { background: var(--hover-bg); padding: 15px; border-radius: 8px; }
.card-lg { background: var(--bg-secondary); padding: 20px; border-radius: 12px; }
.card-sm { background: var(--bg-primary); padding: 10px; border-radius: 6px; }

.card-bordered { border: 1px solid var(--border-color); }
.card-bordered-left { border-left: 4px solid; }

/* Modal & Dialog */
.modal-box { width: 90%; max-width: 400px; }
.modal-lg { width: 90%; max-width: 700px; }
.modal-section { padding: 20px; }
.modal-sm { width: 90%; max-width: 300px; }

/* Button Styles */
.btn-flex { width: 100%; padding: 8px 12px; font-size: 0.9em; }
.btn-flex-lg { width: 100%; padding: 10px 15px; font-size: 0.95em; }
.btn-primary { background: var(--color-primary); color: var(--button-text); }
.btn-success { background: var(--accent-success); color: var(--button-text); }
.btn-warning { background: var(--accent-warning); color: #1a1a1a; }
.btn-danger { background: var(--accent-danger); color: var(--button-text); }
.btn-info { background: var(--accent-info); color: var(--button-text); }
.btn-secondary { background: var(--bg-secondary); color: var(--text-primary); }

/* Borders & Dividers */
.u-border-top { border-top: 1px solid var(--border-color); }
.u-border-bottom { border-bottom: 1px solid var(--border-color); }
.u-border-light { border: 1px solid var(--border-light); }
.u-border { border: 1px solid var(--border-color); }
.u-rounded-sm { border-radius: 3px; }
.u-rounded { border-radius: 6px; }
.u-rounded-lg { border-radius: 8px; }
.u-rounded-xl { border-radius: 12px; }

/* Cursor & Interaction */
.u-cursor-pointer { cursor: pointer; }
.u-select-none { user-select: none; }
.u-text-right { text-align: right; }

/* Font Weight */
.u-font-bold { font-weight: 700; }
.u-font-semibold { font-weight: 600; }

/* Transitions */
.u-transition { transition: all 0.2s ease; }
.u-transition-smooth { transition: all 0.3s ease; }

/* Visibility & Overflow */
.u-overflow-auto { overflow: auto; }
.u-overflow-hidden { overflow: hidden; }
.u-overflow-y-auto { overflow-y: auto; }
.u-max-h-300 { max-height: 300px; }
.u-max-h-600 { max-height: 600px; }

/* Word Break & Wrapping */
.u-word-break { word-break: break-word; }
.u-max-w-200 { max-width: 200px; }
.u-whitespace-nowrap { white-space: nowrap; }

.container { max-width: 1400px; margin: 0 auto; padding: 20px; }
header { background: var(--bg-secondary); border-radius: 12px; padding: 30px; margin-bottom: 30px; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 20px; }
.header-content { grid-column: 1; grid-row: 1 / 3; }
header h1 { font-size: 2.5em; color: var(--color-primary); margin-bottom: 5px; }
header p { color: var(--text-secondary); font-size: 1.1em; }
.header-controls { grid-column: 2; grid-row: 1; display: flex; gap: 10px; flex-wrap: wrap; align-content: flex-start; justify-self: end; }
.header-btn { background: var(--color-primary); color: var(--button-text); border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer; font-size: 1em; font-weight: 600; }
.header-btn:hover { background: var(--color-primary-dark); }
.status-badge { padding: 6px 12px; border-radius: 6px; font-size: 0.85em; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; color: white; }
.status-badge.api { background: var(--accent-success); }
.status-badge.file { background: var(--accent-warning); color: #1a1a1a; }
.status-badge.loading { background: var(--color-primary); }
.status-badge.error { background: var(--accent-danger); }

.metadata-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; }
.metric-card { background: var(--bg-secondary); border-radius: 12px; padding: 25px; box-shadow: var(--shadow); text-align: center; }
.metric-card.hidden { display: none; }
.metric-card h3 { color: var(--color-primary); font-size: 0.9em; text-transform: uppercase; }
.metric-card .value { font-size: 2.5em; font-weight: bold; color: var(--color-primary); cursor: pointer; }
.metric-card .value:hover::after { content: " ⎘"; }
.metric-card .subtext { font-size: 0.85em; color: var(--text-tertiary); }

.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 30px; margin-bottom: 30px; }
.chart-container { background: var(--bg-secondary); border-radius: 12px; padding: 30px; box-shadow: var(--shadow); }
.chart-container.hidden { display: none; }
.chart-container h2 { color: var(--color-primary); margin-bottom: 20px; border-bottom: 2px solid var(--color-primary); padding-bottom: 10px; }
.canvas-wrapper { position: relative; height: 300px; }

.tab-navigation { display: flex; gap: 10px; margin-bottom: 30px; border-bottom: 2px solid var(--border-color); flex-wrap: wrap; }
.tab-button { padding: 12px 25px; border: none; background: transparent; color: var(--color-primary); font-size: 1em; font-weight: bold; cursor: pointer; border-bottom: 3px solid transparent; }
.tab-button.active { color: var(--color-primary-dark); border-bottom-color: var(--color-primary-dark); }
.tab-content { display: none; }
.tab-content.active { display: block; }

.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--overlay-bg); }
.modal.show { display: block; }
.modal.active { display: block; }
.modal-content { background: var(--bg-secondary); margin: 5% auto; padding: 30px; border-radius: 12px; width: 90%; max-width: 700px; max-height: 90vh; overflow-y: auto; }
.close-btn { background: none; border: none; font-size: 2em; cursor: pointer; color: var(--text-secondary); }
.settings-tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--border-light); flex-wrap: wrap; }
.settings-tab { padding: 10px 15px; border: none; background: transparent; cursor: pointer; border-bottom: 3px solid transparent; }
.settings-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.settings-panel { display: none; }
.settings-panel.active { display: block; }
.settings-group { margin-bottom: 20px; }
.settings-group label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.settings-group input[type="text"], .settings-group input[type="password"], .settings-group select { padding: 8px 12px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); border-radius: 5px; font-size: 0.9em; }
.settings-group input[type="text"]:focus, .settings-group input[type="password"]:focus, .settings-group select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1); }
.export-btn { background: var(--color-primary); color: var(--button-text); border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-weight: 500; }
.export-btn:hover { background: var(--color-primary-dark); opacity: 0.9; }
.export-btn.danger { background: var(--accent-danger); color: white; }
.export-btn.danger:hover { background: #dc2626; }
.filter-section { background: var(--bg-secondary); border-radius: 8px; padding: 15px; margin-bottom: 20px; border: 1px solid var(--border-color); }
.filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.filter-input, .filter-select { padding: 8px 12px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); border-radius: 5px; font-size: 0.9em; }
.filter-input:focus, .filter-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1); }
.search-box { width: 100%; padding: 12px 16px; border: 2px solid var(--border-light); background: var(--bg-primary); color: var(--text-primary); border-radius: 8px; font-size: 1em; margin-bottom: 15px; }
.search-box:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.data-table th { cursor: pointer; user-select: none; transition: background 0.2s; }
.data-table th.sortable::after { content: ' ↕'; opacity: 0.6; font-size: 0.8em; }
.data-table th.sorted-asc::after { content: ' ↑'; opacity: 1; }
.data-table th.sorted-desc::after { content: ' ↓'; opacity: 1; }

/* Top Users Styles */
.top-users-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; margin-bottom: 30px; }
.user-card { background: var(--bg-secondary); border-radius: 10px; padding: 18px; box-shadow: var(--shadow); border-left: 4px solid var(--color-primary); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.user-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); }
.user-rank { display: inline-block; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: var(--button-text); width: 32px; height: 32px; border-radius: 50%; text-align: center; line-height: 32px; font-weight: bold; font-size: 0.9em; margin-right: 10px; }
.user-name { font-weight: 600; font-size: 1.05em; color: var(--text-primary); margin: 8px 0; }
.user-stats { font-size: 0.85em; color: var(--text-tertiary); line-height: 1.6; }
.user-stats strong { color: var(--color-primary); }

/* Period Comparison Styles */
.comparison-container { background: var(--bg-secondary); border-radius: 12px; padding: 25px; margin-bottom: 30px; box-shadow: var(--shadow); }
.comparison-header { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.comparison-period { flex: 1; min-width: 200px; }
.comparison-period label { display: block; font-size: 0.85em; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.comparison-period input { width: 100%; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--bg-primary); color: var(--text-primary); }
.comparison-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
.comparison-item { background: var(--bg-primary); padding: 15px; border-radius: 8px; border-top: 3px solid var(--color-primary); }
.comparison-item h4 { font-size: 0.8em; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 8px; }
.comparison-values { display: flex; gap: 10px; align-items: center; }
.comparison-value { font-size: 1.3em; font-weight: bold; color: var(--color-primary); }
.comparison-delta { font-size: 0.85em; padding: 4px 8px; border-radius: 4px; }
.comparison-delta.positive { background: rgba(5, 150, 105, 0.15); color: var(--accent-success); }
.comparison-delta.negative { background: rgba(220, 38, 38, 0.15); color: var(--accent-danger); }

/* Date Picker Enhancement */
.date-range-picker { background: var(--hover-bg); border-radius: 8px; padding: 15px; margin-bottom: 15px; }
.date-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: flex-end; }
.date-inputs label { font-size: 0.8em; font-weight: 600; color: var(--text-secondary); }
.date-preset-btn { background: var(--color-primary); color: var(--button-text); border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 0.8em; font-weight: 500; }
.date-preset-btn:hover { background: var(--color-primary-dark); }
.date-preset-btn.active { background: var(--color-primary-dark); color: var(--button-text); }

/* Collapsible Section */
.section-header { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; padding: 12px 0; }
.section-header .toggle-icon { display: inline-block; width: 20px; text-align: center; transition: transform 0.2s; }
.section-header.collapsed .toggle-icon { transform: rotate(-90deg); }
.collapsible-content { max-height: 1000px; overflow: hidden; transition: max-height 0.3s ease; }
.collapsible-content.collapsed { max-height: 0; }

/* Chart Drill-down */
.chart-container.drillable { cursor: pointer; }
.chart-container.drillable h2 { position: relative; }
.chart-container.drillable h2::after { content: ' (click to filter)'; font-size: 0.7em; opacity: 0.6; }
.drill-breadcrumb { background: var(--hover-bg); padding: 10px 15px; border-radius: 6px; margin-bottom: 15px; font-size: 0.9em; }
.drill-breadcrumb button { background: none; border: none; color: var(--color-primary); cursor: pointer; text-decoration: underline; font-weight: 600; }

/* Filter Buttons */
.filter-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-light); }
.filter-button { padding: 6px 12px; border: 1px solid var(--color-primary); background: var(--bg-primary); color: var(--color-primary); border-radius: 20px; cursor: pointer; font-size: 0.85em; transition: all 0.2s; font-weight: 500; }
.filter-button:hover { background: var(--color-primary); color: var(--button-text); transform: scale(1.05); }
.filter-button:active { transform: scale(0.98); }

/* Virtual Scroll */
.virtual-table-wrapper { max-height: 600px; overflow-y: auto; }
.virtual-table-spacer { height: 0; }

/* User Detail Modal */
.user-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.user-detail-section { background: var(--hover-bg); padding: 15px; border-radius: 8px; }
.user-detail-section h3 { color: var(--color-primary); font-size: 0.9em; text-transform: uppercase; margin-bottom: 12px; }
.user-detail-stat { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-light); }
.user-detail-stat:last-child { border-bottom: none; }
.user-detail-label { color: var(--text-tertiary); }
.user-detail-value { font-weight: 600; color: var(--color-primary); }

/* User Performance Scorecards */
.user-performance-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 30px; }
.user-scorecard { background: var(--bg-secondary); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); border-left: 4px solid var(--color-primary); transition: transform 0.2s, box-shadow 0.2s; }
.user-scorecard:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
.user-scorecard.top-performer { border-left-color: #fbbf24; background: linear-gradient(135deg, var(--bg-secondary), rgba(251, 191, 36, 0.05)); }
.user-scorecard-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; border-bottom: 1px solid var(--border-light); padding-bottom: 10px; }
.user-scorecard-name { font-size: 1.1em; font-weight: 700; color: var(--text-primary); }
.user-scorecard-rank { font-size: 0.8em; font-weight: 600; background: var(--color-primary); color: var(--button-text); padding: 3px 8px; border-radius: 12px; }
.user-scorecard-rank.gold { background: #fbbf24; color: #1a1a1a; }
.user-scorecard-rank.silver { background: #a8a9ad; color: #1a1a1a; }
.user-scorecard-rank.bronze { background: #cd7f32; color: white; }
.user-scorecard-metric { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 0.95em; }
.user-scorecard-metric-label { color: var(--text-tertiary); }
.user-scorecard-metric-value { font-weight: 600; color: var(--color-primary); font-size: 1.1em; }
.user-scorecard-bar { width: 100%; height: 4px; background: var(--border-light); border-radius: 2px; margin-top: 3px; overflow: hidden; }
.user-scorecard-bar-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--accent-info)); border-radius: 2px; transition: width 0.3s ease; }
.user-scorecard-trend { display: flex; align-items: center; gap: 5px; padding: 6px 0; margin-top: 10px; font-size: 0.9em; }
.user-scorecard-trend.positive { color: var(--accent-success); }
.user-scorecard-trend.negative { color: var(--accent-danger); }
.user-scorecard-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-light); font-size: 0.85em; color: var(--text-tertiary); text-align: center; }
.user-performance-controls { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.sort-button { padding: 8px 14px; border: 1px solid var(--color-primary); background: var(--bg-primary); color: var(--color-primary); border-radius: 6px; cursor: pointer; font-size: 0.9em; transition: all 0.2s; font-weight: 500; }
.sort-button:hover { background: var(--color-primary); color: var(--button-text); }
.sort-button.active { background: var(--color-primary-dark); color: var(--button-text); }
.user-performance-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; }
.user-performance-stat-box { background: var(--hover-bg); padding: 15px; border-radius: 8px; border-left: 3px solid var(--color-primary); }
.user-performance-stat-box h3 { font-size: 0.85em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 8px; }
.user-performance-stat-box .value { font-size: 1.8em; font-weight: bold; color: var(--color-primary); }

/* Draggable Card */
.metric-card.draggable { cursor: grab; }
.metric-card.draggable:active { cursor: grabbing; opacity: 0.8; }
.metric-card.drag-over { background: var(--hover-bg); }

.footer { text-align: center; color: var(--text-secondary); padding: 20px; }

.loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid var(--border-color); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.api-section { background: var(--hover-bg); border-left: 4px solid var(--color-primary); padding: 15px; margin-bottom: 15px; border-radius: 4px; }
.input-group { margin-bottom: 12px; }
.input-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9em; color: var(--text-secondary); }
/* Universal input styling to ensure theme consistency */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1) !important;
}

.input-group input { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--bg-primary); color: var(--text-primary); }
.input-group input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1); }
.input-group small { display: block; margin-top: 4px; color: var(--text-tertiary); font-size: 0.85em; }

.data-table th:hover { opacity: 0.9; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h2 { color: var(--color-primary); margin: 0; }

/* Tooltip Styles */
[title], [data-tooltip] { cursor: help; position: relative; }
[title]::after { content: attr(title); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); padding: 8px 12px; background: var(--tooltip-bg); color: var(--tooltip-text); border-radius: 6px; font-size: 0.85em; white-space: nowrap; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity 0.2s; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
[title]:hover::after { opacity: 1; }
[title]::before { content: ''; position: absolute; bottom: 117%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--tooltip-bg); opacity: 0; transition: opacity 0.2s; z-index: 1000; }
[title]:hover::before { opacity: 1; }
.user-scorecard-metric-label { border-bottom: 1px dotted var(--color-primary); display: inline-block; }
.sort-button { border-bottom: 1px dotted var(--border-color); }
.sort-button:hover { border-bottom: 1px dotted transparent; }

/* Credential Onboarding Modal */
.role-btn { transition: all 0.3s ease; }
.role-btn.selected { border-color: var(--color-primary) !important; background: var(--color-primary) !important; color: var(--button-text) !important; }
.role-btn:hover { opacity: 0.8; }

/* Export button styling (reused for credential modal) */
.export-btn { 
    padding: 10px 16px;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--button-text);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 600;
    transition: all 0.2s;
}
.export-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.export-btn.danger {
    background: var(--accent-danger);
    border-color: var(--accent-danger);
    color: white;
}