/* ============================================
   DigiSign Theme - Component Styling
   ============================================
   
   MudBlazor component customizations.
   Uses variables from theme-core.css.
   NO gradients - clean, solid colors for better performance.
*/

/* ==================== GLOBAL STYLES ==================== */

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--background);
    color: var(--text-primary);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--neutral-100);
}

::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}

/* Text selection */
::selection {
    background: rgba(var(--accent-rgb), 0.3);
    color: var(--text-primary);
}

::-moz-selection {
    background: rgba(var(--accent-rgb), 0.3);
    color: var(--text-primary);
}

/* Focus states - Removed problematic outline that didn't respect input boundaries */
*:focus-visible {
    outline: none !important;
}

/* Add subtle focus indication only for interactive elements that need it */
button:focus-visible,
a:focus-visible,
.mud-button-root:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
    transition: box-shadow var(--transition-fast);
}

/* ==================== BUTTONS ==================== */

.mud-button-root {
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-base);
}

.mud-button-filled-primary {
    background-color: var(--button-primary) !important;
    color: var(--text-inverse) !important;
}

.mud-button-filled-primary:hover {
    background-color: var(--button-primary-hover) !important;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.mud-button-filled-primary:active {
    background-color: var(--button-primary-active) !important;
    transform: translateY(0);
}

.mud-button-filled-secondary {
    background-color: var(--button-secondary) !important;
    color: var(--text-inverse) !important;
}

.mud-button-filled-secondary:hover {
    background-color: var(--button-secondary-hover) !important;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.mud-button-outlined {
    border-color: var(--border-dark) !important;
}

.mud-button-outlined:hover {
    background-color: rgba(var(--primary-rgb), 0.05) !important;
}

/* ==================== CARDS & PAPER ==================== */

.mud-paper {
    background-color: var(--surface) !important;
    border-radius: var(--radius-lg) !important;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.mud-paper.mud-elevation-1 {
    box-shadow: var(--shadow-sm) !important;
}

.mud-paper.mud-elevation-2 {
    box-shadow: var(--shadow-md) !important;
}

.mud-paper.mud-elevation-4 {
    box-shadow: var(--shadow-lg) !important;
}

.mud-card {
    background-color: var(--surface) !important;
}

.mud-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg) !important;
}

/* ==================== INPUTS & TEXT FIELDS ==================== */

.mud-input-root {
    border-radius: var(--radius-md) !important;
}

.mud-input-outlined {
    border-color: var(--border) !important;
}

.mud-input-outlined:hover {
    border-color: var(--border-dark) !important;
}

.mud-input-outlined.mud-input-focused {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.mud-input-label {
    color: var(--text-secondary) !important;
}

.mud-input-helper-text {
    color: var(--text-secondary) !important;
}

/* ==================== TABLES ==================== */

.mud-table-root {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}

.mud-table-container {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border);
}

.mud-table-head {
    background-color: var(--neutral-100) !important;
}

.mud-table-cell {
    border-bottom-color: var(--border-light) !important;
}

.mud-table-row:hover {
    background-color: rgba(var(--accent-rgb), 0.05) !important;
    transition: background-color var(--transition-fast);
}

/* ==================== ALERTS ==================== */

.mud-alert {
    border-radius: var(--radius-lg) !important;
    border-left: 4px solid;
}

.mud-alert-filled-success {
    background-color: var(--success) !important;
    border-left-color: var(--success-dark) !important;
}

.mud-alert-filled-error {
    background-color: var(--error) !important;
    border-left-color: var(--error-dark) !important;
}

.mud-alert-filled-warning {
    background-color: var(--warning) !important;
    border-left-color: var(--warning-dark) !important;
}

.mud-alert-filled-info {
    background-color: var(--info) !important;
    border-left-color: var(--info-dark) !important;
}

.mud-alert-outlined-success {
    border-color: var(--success) !important;
    color: var(--success-dark) !important;
}

.mud-alert-outlined-error {
    border-color: var(--error) !important;
    color: var(--error-dark) !important;
}

/* ==================== DIALOGS ==================== */

.mud-dialog {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
}

.mud-dialog-title {
    background-color: var(--primary);
    color: var(--text-inverse);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    padding: var(--spacing-lg) !important;
    font-weight: 600;
}

.mud-dialog-content {
    padding: var(--spacing-lg) !important;
}

.mud-dialog-actions {
    padding: var(--spacing-md) var(--spacing-lg) !important;
    border-top: 1px solid var(--border);
}

/* ==================== APP BAR ==================== */

.mud-appbar {
    background-color: var(--appbar-bg) !important;
    color: var(--text-inverse) !important;
    box-shadow: var(--shadow-sm) !important;
}

.mud-appbar .mud-icon-button {
    color: var(--text-inverse) !important;
}

/* ==================== DRAWER / NAVIGATION ==================== */

.mud-drawer {
    background-color: var(--drawer-bg) !important;
}

.mud-drawer .mud-navmenu {
    background-color: transparent !important;
}

.mud-nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.mud-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-inverse) !important;
}

.mud-nav-link-active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-inverse) !important;
    font-weight: 600;
}

/* ==================== CHIPS ==================== */

.mud-chip {
    border-radius: var(--radius-full) !important;
    font-weight: 500 !important;
    transition: all var(--transition-base);
}

.mud-chip.mud-chip-color-primary {
    background-color: var(--primary) !important;
    color: var(--text-inverse) !important;
}

.mud-chip.mud-chip-color-secondary {
    background-color: var(--secondary) !important;
    color: var(--text-inverse) !important;
}

.mud-chip:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* ==================== MENUS ==================== */

.mud-menu-paper {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--border);
}

.mud-menu-item:hover {
    background-color: rgba(var(--accent-rgb), 0.1) !important;
}

/* ==================== PROGRESS INDICATORS ==================== */

.mud-progress-circular.mud-primary-text .mud-progress-circular-circle {
    stroke: var(--primary) !important;
}

.mud-progress-linear.mud-progress-linear-color-primary .mud-progress-linear-bar {
    background-color: var(--primary) !important;
}

.mud-progress-linear.mud-progress-linear-color-secondary .mud-progress-linear-bar {
    background-color: var(--secondary) !important;
}

/* ==================== BADGES ==================== */

.mud-badge-dot {
    box-shadow: 0 0 0 2px var(--surface), var(--shadow-sm);
}

.mud-badge.mud-badge-color-primary .mud-badge-content {
    background-color: var(--primary) !important;
}

/* ==================== TABS ==================== */

.mud-tabs-toolbar {
    border-bottom: 2px solid var(--border) !important;
}

.mud-tab {
    color: var(--text-secondary) !important;
    transition: color var(--transition-base);
}

.mud-tab:hover {
    color: var(--primary) !important;
}

.mud-tab.mud-tab-active {
    color: var(--primary) !important;
    font-weight: 600 !important;
}

.mud-tab-slider {
    background-color: var(--primary) !important;
    height: 3px !important;
}

/* ==================== SWITCHES & TOGGLES ==================== */

.mud-switch.mud-switch-checked .mud-switch-thumb {
    background-color: var(--accent) !important;
}

.mud-switch.mud-switch-checked .mud-switch-track {
    background-color: rgba(var(--accent-rgb), 0.5) !important;
}

/* ==================== SLIDERS ==================== */

.mud-slider.mud-slider-primary .mud-slider-thumb {
    background-color: var(--primary) !important;
}

.mud-slider.mud-slider-primary .mud-slider-track-active {
    background-color: var(--secondary) !important;
}

/* ==================== SNACKBARS / TOASTS ==================== */

.mud-snackbar {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}

.mud-snackbar-content-message {
    font-weight: 500;
}

/* ==================== OVERLAYS ==================== */

.mud-overlay-scrim {
    background-color: rgba(var(--primary-rgb), 0.4) !important;
    backdrop-filter: blur(4px);
}

/* ==================== TOOLTIPS ==================== */

.mud-tooltip {
    background-color: var(--primary-dark) !important;
    color: var(--text-inverse) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md);
}

/* ==================== PAGINATION ==================== */

.mud-pagination-item.mud-pagination-item-active {
    background-color: var(--primary) !important;
    color: var(--text-inverse) !important;
}

/* ==================== BREADCRUMBS ==================== */

.mud-breadcrumb-item {
    color: var(--text-secondary) !important;
}

.mud-breadcrumb-item.mud-breadcrumb-item-active {
    color: var(--primary) !important;
}

/* ==================== LINKS ==================== */

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--link-hover);
}

/* ==================== LOADING STATES ==================== */

.mud-skeleton {
    background-color: var(--neutral-200) !important;
}