/* IDNT Support — Custom styles (MudBlazor handles everything else) */

:root {
    --idnt-primary: #265fac;
    --idnt-surface-light: #f5f5f5;
}

#app {
    min-height: 100vh;
}

/* ── Light mode body (default) ── */
body {
    background: #ededed !important;
}
html.dark body {
    background: #111 !important;
}

/* ── AppBar and Drawer ── */
/* Light: MudBlazor PaletteLight handles these via theme vars */
/* Dark: override with hardcoded dark colors */
html.dark .mud-appbar { background: rgb(28, 29, 32) !important; }
html.dark .mud-drawer { background: rgb(28, 29, 32) !important; }

/* Drawer buttons/icons: white text on themed drawer background (light mode) */
.mud-drawer .mud-button,
.mud-drawer .mud-icon-button { color: rgb(255, 255, 255); }

/* SVG icons inside popovers: use text color in light mode */
.mud-popover .mud-icon-root.mud-svg-icon { fill: var(--mud-palette-text-primary); }
html.dark .mud-popover .mud-icon-root.mud-svg-icon { fill: currentColor; }

.mud-layout { padding: 16px; }
.mud-layout:has(.ticket-chat-container) { padding: 0; }

/* Stat cards on dashboard */
.stat-card {
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid transparent;
}
.stat-card--primary { border-left-color: var(--idnt-primary); }
.stat-card--info { border-left-color: #0284c7; }
.stat-card--warning { border-left-color: #ea580c; }
.stat-card--success { border-left-color: #16a34a; }
.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
}
.stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

/* Ticket number badge */
.ticket-number {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    padding: 2px 6px;
    background: rgba(0,0,0,0.06);
    border-radius: 4px;
}

/* Timestamp style */
.timestamp {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Filter bar */
.filter-bar {
    border-radius: 8px;
}

/* Chat bubbles — internal notes */
.internal-note .mud-chat-bubble {
    background: #fff3e0 !important;
    border: 1px solid #ffe0b2;
}

/* Typing indicator animation */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}
.typing-indicator span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    animation: typing-dot 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* Bold helper */
.fw-bold { font-weight: 600 !important; }

/* Clickable table rows */
.mud-table tbody .mud-table-row { cursor: pointer; }

/* Hide username and org dropdown on small screens */
@media (max-width: 600px) {
    .appbar-user-name { display: none; }
    .appbar-org-menu { display: none; }
    .mud-container--gutters { padding-left: 0 !important; padding-right: 0 !important; }
    .mud-container--gutters.py-6 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .mud-table td, .mud-table th { text-align: left !important; }
    .mud-table td::before { text-align: left !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Markdown Editor ── */
.md-editor {
    border: none;
    border-radius: 0;
    overflow: hidden;
    background: #fefefe;
}
html.dark .md-editor {
    background: #292c31;
}
.md-editor--compact .md-textarea { min-height: 40px; }

.md-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,0.08));
    background: #e0e0e0;
    flex-wrap: wrap;
}
html.dark .md-toolbar {
    background: #111111;
}
.md-toolbar-group { display: flex; gap: 2px; }
.md-toolbar-divider { width: 1px; height: 20px; background: var(--mud-palette-lines-default, rgba(0,0,0,0.12)); margin: 0 4px; }
.md-toolbar-spacer { flex: 1; }
.md-toolbar .mud-icon-button { color: var(--mud-palette-text-secondary, #475569); }
html.dark .md-toolbar .mud-icon-button { color: var(--mud-palette-text-secondary, #94a3b8); }
.md-toolbar .mud-icon-button:hover { background: var(--mud-palette-action-default-hover, rgba(0,0,0,0.06)); }

.md-body { display: flex; min-height: 120px; }
.md-body--split { min-height: 200px; }
.md-edit-pane { flex: 1; display: flex; flex-direction: column; position: relative; }
.md-preview-divider { width: 1px; background: var(--mud-palette-lines-default, rgba(0,0,0,0.08)); }
.md-preview-pane { flex: 1; padding: 12px 16px; overflow-y: auto; max-height: 400px; }

.md-textarea {
    width: 100%;
    min-height: 80px;
    border: none;
    outline: none;
    resize: none;
    padding: 12px 16px;
    font-family: 'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary, #1e293b);
    background: transparent;
    overflow-y: auto;
}
.md-textarea::placeholder { color: var(--mud-palette-text-disabled, #94a3b8); }
.md-textarea.md-dragover { background: rgba(38, 95, 172, 0.05); outline: 2px dashed var(--idnt-primary); }

.md-upload-progress { position: absolute; top: 0; left: 0; right: 0; z-index: 1; }

/* ── WYSIWYG contenteditable ── */
.md-wysiwyg {
    width: 100%;
    min-height: 80px;
    border: none;
    outline: none;
    padding: 12px 16px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary, #1e293b);
    background: transparent;
    overflow-y: auto;
    max-height: 500px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.md-editor--compact .md-wysiwyg { min-height: 40px; }
.md-wysiwyg:focus { outline: none; }
.md-wysiwyg:empty::before {
    content: attr(placeholder);
    color: var(--mud-palette-text-disabled, #94a3b8);
    pointer-events: none;
}
.md-wysiwyg.md-dragover {
    background: rgba(38, 95, 172, 0.05);
    outline: 2px dashed var(--idnt-primary);
    outline-offset: -2px;
}
.md-wysiwyg img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 4px 0;
}
.md-wysiwyg pre {
    background: #f1f5f9;
    border-radius: 6px;
    padding: 12px;
    overflow-x: auto;
    margin: 8px 0;
}
html.dark .md-wysiwyg pre { background: #1e293b; }
.md-wysiwyg pre code { background: transparent; padding: 0; font-size: 0.85rem; }
.md-wysiwyg code {
    background: rgba(0,0,0,0.06);
    padding: 2px 5px;
    border-radius: 3px;
    font-family: 'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
}
html.dark .md-wysiwyg code { background: rgba(255,255,255,0.08); }
.md-wysiwyg blockquote {
    border-left: 3px solid var(--idnt-primary, #265fac);
    padding-left: 12px;
    margin: 8px 0;
    color: #475569;
}
html.dark .md-wysiwyg blockquote { color: #94a3b8; }
.md-wysiwyg table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.md-wysiwyg th, .md-wysiwyg td {
    border: 1px solid rgba(0,0,0,0.12);
    padding: 6px 10px;
    text-align: left;
}
.md-wysiwyg th { background: #f1f5f9; font-weight: 600; }
html.dark .md-wysiwyg th { background: #1e293b; }

/* Mode toggle button active state */
.md-mode-toggle--active { background: rgba(38, 95, 172, 0.12) !important; color: var(--idnt-primary, #265fac) !important; }

/* ── Command overlay ── */
.cmd-overlay {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 0;
}
html.dark .cmd-overlay {
    background: #1e1e2e;
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.4);
}
.cmd-overlay-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.85rem;
}
.cmd-overlay-item:hover,
.cmd-overlay-item.selected {
    background: rgba(38, 95, 172, 0.1);
}
html.dark .cmd-overlay-item:hover,
html.dark .cmd-overlay-item.selected {
    background: rgb(24, 51, 94);
}
.cmd-name {
    font-family: 'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-weight: 600;
    color: var(--idnt-primary, #265fac);
    min-width: 80px;
}
html.dark .cmd-name { color: #7eb3ff; }
.cmd-desc {
    color: var(--mud-palette-text-secondary, #475569);
    flex: 1;
}
html.dark .cmd-desc { color: #94a3b8; }
.cmd-badge {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(38, 95, 172, 0.15);
    color: var(--idnt-primary, #265fac);
    font-weight: 600;
}
html.dark .cmd-badge { background: rgba(100, 160, 255, 0.2); color: #7eb3ff; }

/* ── Ephemeral command messages ── */
.chat-command-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 4px 0;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary, #475569);
    font-family: 'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    justify-content: center;
}
html.dark .chat-command-result { color: #94a3b8; }
.chat-command-result .cmd-icon { font-size: 1rem; }
.chat-command-result .cmd-icon.success { color: #22c55e; }
.chat-command-result .cmd-icon.error { color: #ef4444; }

/* ── Markdown Rendered Content ── */
.markdown-content h1 { font-size: 1.5em; font-weight: 700; margin: 0.5em 0 0.3em; }
.markdown-content h2 { font-size: 1.3em; font-weight: 600; margin: 0.5em 0 0.3em; }
.markdown-content h3 { font-size: 1.1em; font-weight: 600; margin: 0.5em 0 0.3em; }
.markdown-content p { margin: 0.4em 0; }
.markdown-content code {
    background: #e8eaed;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.9em;
}
html.dark .markdown-content code { background: #2d333b; }
.markdown-content pre {
    background: #f1f3f5;
    color: #1e293b;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 8px 0;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-all;
}
html.dark .markdown-content pre { background: #1e293b; color: #e2e8f0; }
.markdown-content pre code { background: none; padding: 0; color: inherit; }
.markdown-content blockquote {
    border-left: 3px solid var(--idnt-primary);
    padding-left: 12px;
    margin: 8px 0;
    color: #475569;
}
html.dark .markdown-content blockquote { color: #6b7280; }
.markdown-content table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.markdown-content th, .markdown-content td { border: 1px solid #e5e7eb; padding: 8px 12px; text-align: left; }
html.dark .markdown-content th, html.dark .markdown-content td { border-color: #374151; }
.markdown-content th { background: #f1f3f5; font-weight: 600; }
html.dark .markdown-content th { background: #1e293b; }
.markdown-content img { max-width: 100%; border-radius: 8px; margin: 8px 0; }

/* ── Image Lightbox ── */
.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: lightbox-fade-in 0.15s ease-out;
}
@keyframes lightbox-fade-in { from { opacity: 0; } to { opacity: 1; } }
.image-lightbox img {
    max-width: 95vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.image-lightbox-close {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.image-lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }
.markdown-content a { color: var(--idnt-primary); text-decoration: underline; }
.markdown-content ul, .markdown-content ol { padding-left: 24px; margin: 0.4em 0; }
.markdown-content hr { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0; }
html.dark .markdown-content hr { border-top-color: #374151; }

/* ── Ticket reference links ── */
.ticket-ref {
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.9em;
    background: rgba(59, 130, 246, 0.1);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--idnt-primary);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.ticket-ref:hover { background: rgba(59, 130, 246, 0.2); text-decoration: underline; }
.ticket-ref.denied {
    color: #9ca3af;
    background: rgba(156, 163, 175, 0.1);
    cursor: not-allowed;
    text-decoration: line-through;
}
html.dark .ticket-ref { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
html.dark .ticket-ref:hover { background: rgba(96, 165, 250, 0.25); }
html.dark .ticket-ref.denied { color: #6b7280; background: rgba(107, 114, 128, 0.15); }

/* ── Linked tickets sidebar ── */
.linked-ticket-item { position: relative; }
.ticket-ref-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--idnt-primary);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 4px 6px;
    border-radius: 4px;
    flex: 1;
    min-width: 0;
    transition: background 0.15s;
}
.ticket-ref-link:hover { background: rgba(59, 130, 246, 0.08); text-decoration: none; }
html.dark .ticket-ref-link:hover { background: rgba(96, 165, 250, 0.1); }
.ticket-ref-number {
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
    font-weight: 600;
    font-size: 0.85em;
    white-space: nowrap;
}
.ticket-ref-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.75;
}
.linked-ticket-remove { opacity: 0; transition: opacity 0.15s; }
.linked-ticket-item:hover .linked-ticket-remove { opacity: 1; }

/* ── Responsive: stack editor/preview vertically on mobile ── */
@media (max-width: 768px) {
    .md-body--split { flex-direction: column; }
    .md-preview-divider { width: auto; height: 1px; }
    .md-preview-pane { max-height: 250px; }
}

/* Print */
@media print {
    .mud-appbar, .mud-drawer, .mud-snackbar-provider { display: none !important; }
    .mud-main-content { margin: 0 !important; padding: 0 !important; }
}

/* ── Feedback Widget ── */
.feedback-widget {
    margin: 16px auto; padding: 16px 20px; max-width: 480px;
    border-radius: 8px; background: rgba(var(--mud-palette-primary-rgb), 0.06);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.15);
    text-align: center;
}
.feedback-widget.loading { display: flex; justify-content: center; padding: 24px; }
.feedback-widget.submitted { background: rgba(var(--mud-palette-success-rgb), 0.06); border-color: rgba(var(--mud-palette-success-rgb), 0.15); }
.feedback-header { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; font-weight: 500; }
.feedback-header .feedback-by { font-weight: 400; color: var(--mud-palette-text-secondary); font-size: 0.85rem; margin-left: 4px; }
.feedback-stars { display: flex; justify-content: center; gap: 2px; margin: 8px 0; }
.feedback-stars.readonly { pointer-events: none; }
.feedback-comment { margin-top: 8px; }
.feedback-comment-display { margin-top: 8px; font-style: italic; color: var(--mud-palette-text-secondary); font-size: 0.9rem; }

html.dark .feedback-widget { background: rgba(var(--mud-palette-primary-rgb), 0.1); border-color: rgba(var(--mud-palette-primary-rgb), 0.25); }
html.dark .feedback-widget.submitted { background: #1c1d20; border-color: rgba(var(--mud-palette-success-rgb), 0.25); }

/* ── KPI Dashboard ── */
.kpi-card { border-radius: 12px !important; text-align: center; }
.kpi-label { font-size: 0.85rem; color: var(--mud-palette-text-secondary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-value { font-size: 1.8rem; font-weight: 700; line-height: 1.2; margin-bottom: 4px; }
.kpi-trend { font-size: 0.8rem; font-weight: 500; }
.trend-good { color: #22c55e; }
.trend-bad { color: #ef4444; }
.trend-neutral { color: var(--mud-palette-text-secondary); }

/* Satisfaction star indicators */
.star-filled { color: #f59e0b; }
.star-empty { color: #9ca3af; }

/* ── Recording in Composer ── */
.recorder-composer-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}
.recorder-composer-content.denied {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.recorder-composer-content.recording {
    gap: 8px;
}

.recorder-camera-preview {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: 8px;
    background: #000;
}

.recorder-video-preview {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: 8px;
    background: #000;
}

.recording-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ef5350;
    flex-shrink: 0;
    animation: pulse-dot 1s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

.recording-time {
    font-family: monospace;
    font-size: 0.9rem;
    min-width: 80px;
}

/* ── Inline Media Players ── */
.media-attachment {
    max-width: 100%;
}

.inline-video-player {
    max-width: 100%;
    min-width: 280px;
    max-height: 300px;
    border-radius: 8px;
    background: #000;
}

.inline-audio-player {
    width: 100%;
    min-width: 280px;
    max-width: 400px;
    border-radius: 4px;
}

/* ── Nav menu light-mode overrides ── */
html:not(.dark) .mud-navmenu .mud-primary-text {
    color: rgb(223, 229, 233) !important;
}
html:not(.dark) .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: rgb(254, 255, 255) !important;
}