/* TechNet Support Platform — Custom Styles */

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* ===== Mobile-first responsive fixes ===== */

/* Prevent horizontal overflow on all pages (using clip to preserve sticky positioning) */
html, body { overflow-x: clip; max-width: 100vw; }

/* Force long words/strings to break inside content areas */
.word-break-all,
.markdown-body,
.markdown-render,
td, th,
.ticket-content,
.response-content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Code blocks: horizontal scroll instead of breaking layout */
.markdown-body pre,
.markdown-body code,
pre, code {
    overflow-wrap: anywhere;
    word-break: break-all;
}
.markdown-body pre {
    overflow-x: auto;
    max-width: 100%;
}

/* Inline code should wrap */
.markdown-body code {
    word-break: break-all;
}

/* Tables inside content: scrollable wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Focus visible */
:focus-visible {
    outline: 2px solid #4F46E5;
    outline-offset: 2px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: #4b5563; }

/* Line clamp utility */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Buttons */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: #4F46E5;
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    transition: all .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.btn-primary:hover { background-color: #4338CA; box-shadow: 0 4px 12px rgba(79,70,229,.3); }

/* Navigation */
.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    transition: all .15s;
}
.nav-link:hover { background: #f3f4f6; color: #4F46E5; }
.dark .nav-link:hover { background: #374151; color: #818cf8; }
.nav-active { background: #EEF2FF !important; color: #4F46E5 !important; font-weight: 600 !important; }
.dark .nav-active { background: rgba(79,70,229,0.2) !important; color: #818cf8 !important; }

.mobile-nav-link {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.75rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    transition: all .15s;
}
.dark .mobile-nav-link { color: #d1d5db; }
.mobile-nav-link:hover { background: #f3f4f6; color: #4F46E5; }
.dark .mobile-nav-link:hover { background: #374151; }

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn { animation: fadeIn .2s ease-out; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}
.animate-pulse { animation: pulse-dot 2s cubic-bezier(.4,0,.6,1) infinite; }

/* Priority indicators */
.priority-critical { border-left: 3px solid #ef4444; }
.priority-high     { border-left: 3px solid #f97316; }
.priority-medium   { border-left: 3px solid #eab308; }
.priority-low      { border-left: 3px solid #22c55e; }

/* SLA breach row highlight */
.sla-breached { background: rgba(239,68,68,.04); }
.dark .sla-breached { background: rgba(239,68,68,.08); }

/* Ticket status indicators */
.status-dot-open        { background: #3b82f6; }
.status-dot-in_progress { background: #f59e0b; }
.status-dot-waiting     { background: #8b5cf6; }
.status-dot-resolved    { background: #10b981; }
.status-dot-closed      { background: #9ca3af; }

/* Print */
@media print {
    nav, footer, .no-print { display: none !important; }
    body { background: white !important; color: black !important; }
    main { padding: 0 !important; }
}

/* Transition page content */
main { animation: fadeIn .15s ease-out; }

/* EasyMDE dark mode */
.dark .CodeMirror {
    background: #1f2937;
    color: #f9fafb;
    border-color: #374151;
}
.dark .editor-toolbar { border-color: #374151; background: #111827; }
.dark .editor-toolbar a { color: #9ca3af !important; }
.dark .editor-toolbar a:hover, .dark .editor-toolbar a.active { background: #374151 !important; color: #fff !important; }
.dark .editor-preview { background: #1f2937; color: #f9fafb; }
.dark .CodeMirror-cursor { border-left-color: #f9fafb; }

/* Responsive table */
@media (max-width: 768px) {
    .responsive-hide { display: none; }
    /* Ensure main content never exceeds viewport */
    main { max-width: 100vw; overflow-x: clip; }
    /* Tables in content areas: horizontal scroll */
    table { display: block; overflow-x: auto; max-width: 100%; }
    /* Card content areas */
    .prose, .prose-sm { max-width: 100% !important; }
}

/* Loading spinner */
.spinner {
    width: 20px; height: 20px;
    border: 2px solid rgba(79,70,229,.2);
    border-top-color: #4F46E5;
    border-radius: 50%;
    animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Tooltip */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #f9fafb;
    font-size: 11px;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
    z-index: 100;
}
[data-tooltip]:hover::after { opacity: 1; }