/*
 * KashiOne — Soft SaaS Theme Overrides
 * Loaded AFTER MudBlazor.min.css to override Material defaults.
 * Uses MudBlazor CSS variables where possible for dark mode compatibility.
 */

/* ============================================
   CSS Custom Properties
   ============================================ */
:root {
    --kashi-primary: #594AE2;
    --kashi-primary-light: #7B6FE8;
    --kashi-primary-pale: rgba(89, 74, 226, 0.06);
    --kashi-primary-rgb: 89, 74, 226;
    --kashi-gradient: linear-gradient(135deg, #594AE2 0%, #7B6FE8 100%);

    --kashi-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
    --kashi-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
    --kashi-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --kashi-shadow-lg: 0 8px 30px rgba(89, 74, 226, 0.10);

    --kashi-radius-xs: 8px;
    --kashi-radius-sm: 12px;
    --kashi-radius-md: 14px;
    --kashi-radius-lg: 20px;
    --kashi-radius-pill: 100px;

    --kashi-border: #ECEAF2;
    --kashi-border-input: 1.5px solid #ECEAF2;
    --kashi-focus-ring: 0 0 0 3px rgba(89, 74, 226, 0.12);

    --kashi-transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ============================================
   MudBlazor Variable Overrides
   ============================================ */
:root {
    --mud-palette-primary: #594AE2;
    --mud-palette-primary-rgb: 89, 74, 226;
    --mud-palette-primary-darken: #4336B5;
    --mud-palette-secondary: #7B6FE8;
    --mud-palette-secondary-rgb: 123, 111, 232;
}

/* ============================================
   Global Component Overrides
   ============================================ */

/* --- Cards & Papers --- */
.mud-card {
    border-radius: var(--kashi-radius-lg) !important;
    box-shadow: var(--kashi-shadow-sm) !important;
    transition: box-shadow var(--kashi-transition);
}

.mud-paper {
    border-radius: var(--kashi-radius-md) !important;
}

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

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

/* --- Buttons --- */
.mud-button-root {
    border-radius: var(--kashi-radius-sm) !important;
    transition: all var(--kashi-transition) !important;
}

.mud-button-filled {
    box-shadow: 0 2px 8px rgba(var(--kashi-primary-rgb), 0.20) !important;
}

.mud-button-filled:hover {
    box-shadow: 0 4px 14px rgba(var(--kashi-primary-rgb), 0.28) !important;
    transform: translateY(-1px);
}

.mud-button-outlined {
    border-width: 1.5px !important;
}

/* Buttons: never uppercase */
.mud-button-root {
    text-transform: none !important;
}

/* Buttons without icon: more horizontal padding for visual balance */
.mud-button-text:not(:has(.mud-button-icon-start)):not(:has(.mud-button-icon-end)),
.mud-button-outlined:not(:has(.mud-button-icon-start)):not(:has(.mud-button-icon-end)),
.mud-button-filled:not(:has(.mud-button-icon-start)):not(:has(.mud-button-icon-end)) {
    padding-inline: 16px;
}

.mud-fab {
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(var(--kashi-primary-rgb), 0.30) !important;
}

.mud-fab:hover {
    transform: translateY(-2px) scale(1.03);
}

/* --- Icon Buttons --- */
.mud-icon-button {
    border-radius: var(--kashi-radius-sm) !important;
}

/* --- Text Fields (Outlined variant) --- */

/* Border: softer color, rounder, thinner */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--kashi-radius-sm) !important;
    border-width: 1.5px !important;
    border-color: var(--kashi-border) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.mud-input-outlined.mud-input-adorned-start .mud-input-outlined-border {
    border-radius: var(--kashi-radius-sm) !important;
}

/* Focus: primary border + soft ring — uses :focus-within for MudBlazor v8 */
.mud-input-outlined:focus-within .mud-input-outlined-border,
.mud-input-control .mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-width: 2px !important;
    border-color: #594AE2 !important;
    box-shadow: 0 0 0 3px rgba(89, 74, 226, 0.12) !important;
}

/* Hover: slightly darker border */
.mud-input-outlined:hover:not(:focus-within):not(.mud-disabled) .mud-input-outlined-border {
    border-color: #D5D3E0 !important;
}

/* Placeholder text: softer */
.mud-input > input::placeholder,
.mud-input > textarea::placeholder {
    color: #9994AD !important;
    opacity: 1 !important;
}

/* ---- Label "above input" (CSS-only) ----
   Moves the floating label fully above the input border,
   left-aligned, styled like the mockup: small, uppercase, bold, light. */

/* Position label above the input field, not on the border */
.mud-input-label.mud-input-label-outlined {
    transform: translate(0, -20px) scale(0.85) !important;
    transform-origin: top left !important;
    font-weight: 600 !important;
    color: #9994AD !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 13px !important;  /* scaled by 0.85 → ~11px visual */
    background: transparent !important;
    padding: 0 !important;
    left: 2px !important;
}

/* When focused: primary color label */
.mud-input-control:focus-within .mud-input-label,
.mud-input-control .mud-input-outlined.mud-focused .mud-input-label {
    color: var(--kashi-primary) !important;
}

/* When has error: error color label */
.mud-input-control .mud-input-outlined.mud-input-error .mud-input-label {
    color: var(--mud-palette-error) !important;
}

/* Hide the notch (gap in top border created by <legend>) */
.mud-input-outlined .mud-input-outlined-border legend {
    max-width: 0 !important;
    padding: 0 !important;
    transition: none !important;
}

/* Add top padding to input container so label has room above.
   Only for outlined variant with a label present.
   The label uses position:absolute so it needs space above the input. */
.mud-input-control:has(.mud-input-label-outlined) {
    padding-top: 8px !important;
}

/* Dense variant needs less padding */
.mud-input-control.mud-input-control-margin-dense:has(.mud-input-label-outlined) {
    padding-top: 6px !important;
}

/* Don't add padding when there's no label */
.mud-input-control:not(:has(.mud-input-label)) {
    padding-top: 0 !important;
}

/* Filled variant labels — similar treatment */
.mud-input-filled .mud-input-label {
    font-weight: 600 !important;
    color: #9994AD !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.mud-input-filled:focus-within .mud-input-label,
.mud-input-filled.mud-focused .mud-input-label {
    color: var(--kashi-primary) !important;
}

/* Select / Picker / Autocomplete — focus border fix (uses :focus-within for v8) */
.mud-select:focus-within .mud-input-outlined-border,
.mud-autocomplete:focus-within .mud-input-outlined-border,
.mud-picker:focus-within .mud-input-outlined-border,
.mud-input-control .mud-select.mud-focused .mud-input-outlined-border,
.mud-input-control .mud-autocomplete.mud-focused .mud-input-outlined-border,
.mud-input-control .mud-picker.mud-focused .mud-input-outlined-border {
    border-width: 2px !important;
    border-color: #594AE2 !important;
    box-shadow: 0 0 0 3px rgba(89, 74, 226, 0.12) !important;
}

/* --- Select / Autocomplete dropdowns --- */
.mud-popover.mud-popover-open {
    border-radius: var(--kashi-radius-sm) !important;
    box-shadow: var(--kashi-shadow-md) !important;
    border: none !important;
    overflow: hidden !important;
}

.mud-popover.mud-popover-open .mud-list {
    overflow-x: hidden !important;
}

/* List items inside popover */
.mud-list-item {
    transition: background var(--kashi-transition) !important;
}

/* --- Chips --- */
.mud-chip {
    border-radius: var(--kashi-radius-pill) !important;
    font-weight: 500 !important;
    transition: all var(--kashi-transition) !important;
}

.mud-chip-filled.mud-chip-color-default {
    background-color: var(--kashi-primary-pale) !important;
    color: var(--kashi-primary) !important;
}

/* --- Tabs --- */
.mud-tabs-header {
    border-radius: var(--kashi-radius-sm) var(--kashi-radius-sm) 0 0;
}

.mud-tab {
    border-radius: var(--kashi-radius-sm) var(--kashi-radius-sm) 0 0 !important;
    transition: background var(--kashi-transition), color var(--kashi-transition) !important;
    font-weight: 500 !important;
}

.mud-tab:hover:not(.mud-tab-active) {
    background: rgba(var(--kashi-primary-rgb), 0.03) !important;
}

/* --- Table / DataGrid --- */
.mud-table .mud-table-container {
    border-radius: var(--kashi-radius-md);
}

.mud-table-head .mud-table-cell {
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.5px !important;
    color: var(--mud-palette-text-secondary) !important;
}

.mud-table-row:hover {
    background: rgba(var(--kashi-primary-rgb), 0.02) !important;
}

/* --- Switches --- */
.mud-switch .mud-switch-track {
    border-radius: 14px !important;
}

/* --- Checkboxes --- */
.mud-checkbox .mud-icon-root {
    border-radius: 6px;
}

/* --- Hover + Focus overlay: circular + subtle for switches, checkboxes --- */
.mud-switch .mud-button-root,
.mud-checkbox .mud-button-root {
    border-radius: 50% !important;
}

.mud-switch .mud-button-root:hover,
.mud-switch .mud-button-root:focus-visible,
.mud-switch .mud-button-root.mud-focused,
.mud-checkbox .mud-button-root:hover,
.mud-checkbox .mud-button-root:focus-visible,
.mud-checkbox .mud-button-root.mud-focused,
.mud-icon-button:hover,
.mud-icon-button:focus-visible,
.mud-icon-button.mud-focused {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

/* --- Dialogs --- */
.mud-dialog:not(.mud-dialog-fullscreen) {
    border-radius: var(--kashi-radius-lg) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
}

.mud-dialog .mud-dialog-title {
    font-weight: 700 !important;
}

.mud-dialog .mud-dialog-actions {
    padding: 16px 24px 24px 24px !important;
}

/* MudBlazor's dialog overlay is made fully transparent. All visual backdrop
   effects (blur + dimming) live on a persistent layer managed by
   dialog-animations.js so the GPU compositor never drops them mid-close. */
.mud-dialog-container > .mud-overlay {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
}

/* Dialog entrance animation (panel only — backdrop handled by JS layer) */
@keyframes dialogFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.mud-dialog-container .mud-dialog {
    animation: dialogFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}


/* --- Alerts --- */
.mud-alert {
    border-radius: var(--kashi-radius-sm) !important;
}

.mud-alert-filled {
    border-radius: var(--kashi-radius-sm) !important;
}

.mud-alert-outlined {
    border-width: 1.5px !important;
    border-radius: var(--kashi-radius-sm) !important;
}

/* --- Snackbar --- */
.mud-snackbar {
    border-radius: var(--kashi-radius-sm) !important;
    box-shadow: var(--kashi-shadow-md) !important;
}

/* --- Tooltips --- */
.mud-tooltip {
    border-radius: var(--kashi-radius-xs) !important;
}

/* --- Avatars --- */
.mud-avatar-rounded {
    border-radius: var(--kashi-radius-sm) !important;
}

/* --- Breadcrumbs --- */
.mud-breadcrumbs li {
    font-weight: 500;
}

/* --- Section titles (editable-section-header) --- */
.editable-section-header .mud-typography {
    font-weight: 700 !important;
}

/* Card headers / card titles */
.mud-card-header .mud-card-header-content .mud-typography-h5,
.mud-card-header .mud-card-header-content .mud-typography-h6 {
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

/* --- Expansion Panels --- */
.mud-expand-panel {
    border-radius: var(--kashi-radius-md) !important;
    box-shadow: var(--kashi-shadow-xs) !important;
    margin-bottom: 8px;
}

.mud-expand-panel .mud-expand-panel-header .mud-expand-panel-text {
    font-weight: 600 !important;
}

/* --- Progress bars --- */
.mud-progress-linear-bar {
    border-radius: 8px !important;
}

.mud-progress-linear {
    border-radius: 8px !important;
}

/* --- Date Picker / Time Picker --- */
.mud-picker .mud-picker-container {
    border-radius: var(--kashi-radius-md) !important;
}

/* --- Menu --- */
.mud-menu .mud-popover-open {
    border-radius: var(--kashi-radius-sm) !important;
}

/* --- Rating --- */
.mud-rating .mud-icon-root {
    transition: transform 0.2s ease !important;
}

.mud-rating .mud-icon-root:hover {
    transform: scale(1.15);
}

/* ============================================
   Hero Sections with Gradient
   ============================================ */
.hero-gradient,
.custom-hero-gradient {
    background: var(--kashi-gradient) !important;
    color: white;
}

.mud-appbar.hero-gradient {
    background: var(--kashi-gradient) !important;
}

/* ============================================
   Custom utility classes
   ============================================ */
.bg-gradient-primary {
    background: var(--kashi-gradient) !important;
    color: white;
}

.text-gradient {
    background: var(--kashi-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hover-lift {
    transition: transform var(--kashi-transition), box-shadow var(--kashi-transition);
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--kashi-shadow-lg) !important;
}

.glass-container {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--kashi-radius-md);
}

/* ============================================
   Custom card & section helpers
   ============================================ */
.custom-section {
    background: var(--mud-palette-surface);
    border-radius: var(--kashi-radius-lg);
    padding: 24px;
    box-shadow: var(--kashi-shadow-sm);
    margin-bottom: 24px;
}

.custom-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid var(--kashi-border);
}

.custom-section-title {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ============================================
   Notes / Timeline styles
   ============================================ */
.note-item {
    background: var(--mud-palette-background);
    border-radius: var(--kashi-radius-sm);
    padding: 16px;
    border-left: 3px solid var(--kashi-primary);
    transition: all 0.2s ease;
    margin-bottom: 12px;
}

.note-item:hover {
    box-shadow: var(--kashi-shadow-sm);
    transform: translateX(4px);
}

.note-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.note-item-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
}

.note-item-meta {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.note-item-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
}

/* ============================================
   Timeline styles
   ============================================ */
.custom-timeline {
    position: relative;
}

.timeline-item {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: -24px;
    width: 2px;
    background: var(--kashi-border);
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--kashi-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
    box-shadow: var(--kashi-shadow-sm);
}

.timeline-content {
    flex: 1;
}

.timeline-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    margin-bottom: 4px;
}

.timeline-time {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

/* ============================================
   Stat cards
   ============================================ */
.stat-card {
    background: var(--mud-palette-background);
    border-radius: var(--kashi-radius-sm);
    padding: 20px;
    text-align: center;
    border: 1.5px solid var(--kashi-border);
}

.stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--kashi-primary);
    margin-bottom: 8px;
}

.stat-label {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ============================================
   Badges (glassmorphism)
   ============================================ */
.custom-badge {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: var(--kashi-radius-pill);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Meta items */
.meta-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: var(--kashi-radius-sm);
    transition: all 0.2s ease;
}

.meta-item:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(4px);
}

.meta-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.meta-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
    font-weight: 500;
}

.meta-value {
    font-size: 16px;
    font-weight: 500;
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .custom-section {
        padding: 16px;
        border-radius: var(--kashi-radius-sm);
    }

    .meta-item {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================
   Dark mode adjustments
   ============================================ */
.mud-theme-dark .note-item {
    background: var(--mud-palette-surface);
    border-left-color: var(--kashi-primary-light);
}

.mud-theme-dark .stat-card {
    background: var(--mud-palette-surface);
    border-color: rgba(255, 255, 255, 0.08);
}

.mud-theme-dark .custom-section {
    background: var(--mud-palette-surface);
}

.mud-theme-dark .mud-chip-filled.mud-chip-color-default {
    background-color: rgba(123, 111, 232, 0.12) !important;
    color: var(--kashi-primary-light) !important;
}

/* Dark mode: label + input border adjustments */
.mud-theme-dark .mud-input-label-outlined {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-secondary) !important;
}

.mud-theme-dark .mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.mud-theme-dark .mud-input-outlined:hover:not(.mud-focused):not(.mud-disabled) .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.20) !important;
}

.mud-theme-dark .mud-input > input::placeholder,
.mud-theme-dark .mud-input > textarea::placeholder {
    color: var(--mud-palette-text-secondary) !important;
}