/*
 * Project styles that Tailwind utilities cannot express. Everything else is Metronic component
 * classes + Tailwind utilities, compiled into custom/metronic/css/styles.css (extra/metronic).
 * Keep this file small: a rule belongs here only if it styles markup we do not author (toastr,
 * the JSON viewer) or needs a keyframe / pseudo-element.
 */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-var.woff2') format('woff2');
}

/* ---------------------------------------------------------------- scrollbars */
* { scrollbar-width: thin; scrollbar-color: #d7dbe4 transparent; }
.dark * { scrollbar-color: #3a3c47 transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: #d7dbe4; border-radius: 3px; }
.dark *::-webkit-scrollbar-thumb { background-color: #3a3c47; }

/* ---------------------------------------------------------------- spinner */
.k8-spinner {
    display: inline-block;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 9999px;
    animation: k8-spin .7s linear infinite;
    vertical-align: -0.125em;
}
@keyframes k8-spin { to { transform: rotate(360deg); } }

/* Live status dot (transient states: creating, deleting, upgrading) */
.k8-pulse { position: relative; }
.k8-pulse::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 9999px;
    border: 2px solid currentColor;
    opacity: .5;
    animation: k8-pulse 1.6s ease-out infinite;
}
@keyframes k8-pulse { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------------------------------------------------------------- AkrElement dialogs */
.k8-dialog { opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.k8-dialog.show { opacity: 1; pointer-events: auto; }
.k8-dialog .k8-dialog-panel { transform: translateY(8px) scale(.99); transition: transform .18s ease; }
.k8-dialog.show .k8-dialog-panel { transform: none; }

/* Terminal-style output (cluster logs, kubectl output) */
.k8-log {
    background: #0f1117;
    color: #d6dae4;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------------------------------------------------------------- toastr */
#toast-container > div {
    width: 360px;
    opacity: 1;
    border-radius: .75rem !important;
    padding: 14px 16px 14px 16px !important;
    background-image: none !important;
    box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .25) !important;
    animation: k8-toast-in .28s cubic-bezier(.16, 1, .3, 1) both;
}
#toast-container > div:hover { box-shadow: 0 10px 30px -10px rgba(15, 23, 42, .35) !important; }
@keyframes k8-toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

#toast-container > .toast-success-custom,
#toast-container > .toast-error-custom,
#toast-container > .toast-info-custom,
#toast-container > .toast-warning-custom {
    background-color: #ffffff;
    color: #252f4a;
    border: 1px solid #e9ebf1;
    border-left-width: 4px;
}
.dark #toast-container > div { background-color: #1b1c22; color: #e4e5ec; border-color: #2d2f39; }
#toast-container > .toast-success-custom { border-left-color: #17c653; }
#toast-container > .toast-error-custom   { border-left-color: #f8285a; }
#toast-container > .toast-info-custom    { border-left-color: #1b84ff; }
#toast-container > .toast-warning-custom { border-left-color: #f6b100; }
#toast-container .toast-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
#toast-container .toast-message { font-size: 13px; color: inherit; opacity: .85; word-break: break-word; }
#toast-container .toast-close-button { color: #99a1b7; text-shadow: none; opacity: 1; font-weight: 400; top: -4px; right: -6px; }
#toast-container .toast-close-button:hover { color: #252f4a; }
#toast-container .toast-progress { height: 2px; opacity: .35; bottom: 0; }
#toast-container > .toast-success-custom .toast-progress { background-color: #17c653; }
#toast-container > .toast-error-custom   .toast-progress { background-color: #f8285a; }
#toast-container > .toast-info-custom    .toast-progress { background-color: #1b84ff; }
#toast-container > .toast-warning-custom .toast-progress { background-color: #f6b100; }

/* ---------------------------------------------------------------- JSON viewer (vendor markup) */
.json-viewer { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

/* ---------------------------------------------------------------- rendered Markdown (guides) */
/* Rendered Markdown. The HTML comes from the .md files, not from us, so it is styled by element here. */
.k8-prose { color: var(--tw-gray-700); font-size: .9375rem; line-height: 1.75; overflow-wrap: break-word; }
.k8-prose > :first-child { margin-top: 0; }
.k8-prose h1, .k8-prose h2, .k8-prose h3, .k8-prose h4 { color: var(--tw-gray-900); font-weight: 600; line-height: 1.3; scroll-margin-top: 5rem; }
.k8-prose h1 { font-size: 1.875rem; margin: 0 0 1.25rem; }
.k8-prose h2 { font-size: 1.375rem; margin: 2.5rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--tw-gray-200); }
.k8-prose h3 { font-size: 1.125rem; margin: 2rem 0 .75rem; }
.k8-prose h4 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
.k8-prose p, .k8-prose ul, .k8-prose ol, .k8-prose pre, .k8-prose table, .k8-prose blockquote { margin: 0 0 1.125rem; }
.k8-prose ul { list-style: disc; padding-inline-start: 1.5rem; }
.k8-prose ol { list-style: decimal; padding-inline-start: 1.5rem; }
.k8-prose li { margin: .375rem 0; padding-inline-start: .25rem; }
.k8-prose li::marker { color: var(--tw-gray-500); }
.k8-prose a { color: var(--tw-primary); font-weight: 500; }
.k8-prose a:hover { text-decoration: underline; }
.k8-prose strong { color: var(--tw-gray-900); font-weight: 600; }
.k8-prose hr { margin: 2rem 0; border-color: var(--tw-gray-200); }
.k8-prose img { max-width: 100%; height: auto; margin: 1.25rem 0; border: 1px solid var(--tw-gray-200); border-radius: .75rem; }
.k8-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; padding: .125rem .375rem; border-radius: .375rem; background: var(--tw-gray-100); color: var(--tw-gray-800); border: 1px solid var(--tw-gray-200); }
.k8-prose pre { padding: 1rem 1.125rem; overflow-x: auto; border-radius: .75rem; background: #0f1117; color: #d6dae4; font-size: .8125rem; line-height: 1.6; }
.k8-prose pre code { padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; }
.k8-prose blockquote { padding: .25rem 0 .25rem 1rem; border-inline-start: 3px solid var(--tw-primary); color: var(--tw-gray-600); }
.k8-prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .875rem; }
.k8-prose th, .k8-prose td { padding: .5rem .75rem; border: 1px solid var(--tw-gray-200); text-align: start; vertical-align: top; }
.k8-prose th { background: var(--tw-gray-100); color: var(--tw-gray-900); font-weight: 600; }