/* Awssome UI 2.0 — base: canvas, type ramp, links, scrollbars. */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body,
body.app-default {
    background-color: var(--ui-canvas) !important;
    color: var(--ui-ink);
    font-family: var(--ui-font-body);
    font-size: 14px;
    letter-spacing: -0.003em;
}

::selection {
    background: var(--ui-brand-200);
    color: var(--ui-ink);
}

/* Display type: every heading and every large bold utility uses Host Grotesk,
   tight tracking, so page titles read as one family across the app. */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.font-bold_36, .font-bold_32, .font-bold_30, .font-bold_28,
.font-bold_24, .font-bold_22, .font-bold_20,
.font-black_36, .font-black_30, .font-black_28, .font-black_24,
.font-extrabold_28, .font-extrabold_24,
.page-heading {
    font-family: var(--ui-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.022em;
    color: var(--ui-ink);
}

h1, .h1 { line-height: 1.15; }
h2, .h2, h3, .h3 { line-height: 1.2; }

.font-bold_28, .font-bold_30, .font-bold_32, .font-bold_36 {
    line-height: 1.15 !important;
}

.font-semibold_18, .font-bold_18, .font-bold_16 {
    letter-spacing: -0.012em;
}

/* Secondary copy: one calm grey instead of five competing ones */
.text-muted,
.text-gray-400,
.text-gray-500,
.text-gray-600 {
    color: var(--ui-muted) !important;
}

.aws-color-neutral-400,
.aws-color-neutral-500 {
    color: var(--ui-subtle) !important;
}

.aws-color-neutral-600,
.aws-color-neutral-700 {
    color: var(--ui-muted) !important;
}

.aws-color-neutral-800,
.aws-color-neutral-900,
.aws-color-neutral-950,
.text-dark,
.text-gray-800,
.text-gray-900 {
    color: var(--ui-ink) !important;
}

a {
    color: var(--ui-primary-hover);
    transition: color var(--ui-fast) var(--ui-ease);
}

a:hover {
    color: var(--ui-primary-press);
}

.aws-link,
a.aws-link {
    color: var(--ui-primary-hover) !important;
    text-decoration: none;
    font-family: var(--ui-font-semibold);
}

.aws-link:hover {
    color: var(--ui-primary-press) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Focus: always visible for keyboard users, never for mouse clicks */
:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Thin, quiet scrollbars */
/* Chromium 121+ ignores every ::-webkit-scrollbar rule once a standard scrollbar-* property
   is set (and then draws the native Windows bar with arrow buttons), so the standard pair is
   only for engines without ::-webkit-scrollbar (Firefox). */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #D6D6DA transparent;
    }
}

/* Keen's style.bundle sets scrollbar-width/color on div, span, ul, ol, pre (+ :hover); reset
   them to auto in Chromium so the ::-webkit-scrollbar styling below is honoured. */
@supports selector(::-webkit-scrollbar) {
    html, body, div, span, ol, ul, pre, textarea,
    div:hover, span:hover, ol:hover, ul:hover, pre:hover {
        scrollbar-width: auto !important;
        scrollbar-color: auto !important;
    }

    /* Legacy utilities that set these with !important (custom-style .scroll-thin) or with an
       id (custom.css #kt_app_sidebar_menu_wrapper): out-rank them explicitly. */
    #kt_app_sidebar_menu_wrapper,
    #kt_app_sidebar_menu_wrapper:hover,
    html body .scroll-thin, html body .scroll-thin:hover,
    html body .scroll, html body .scroll:hover,
    html body .scroll-y, html body .scroll-y:hover,
    html body .hover-scroll-y, html body .hover-scroll-y:hover,
    html body .hover-scroll-overlay-y, html body .hover-scroll-overlay-y:hover {
        scrollbar-width: auto !important;
        scrollbar-color: auto !important;
    }

    #kt_app_sidebar_menu_wrapper::-webkit-scrollbar-thumb,
    html body .hover-scroll-overlay-y::-webkit-scrollbar-thumb,
    html body .scroll-y::-webkit-scrollbar-thumb {
        background: #D6D6DA !important;
        border-radius: 8px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

    #kt_app_sidebar_menu_wrapper::-webkit-scrollbar {
        width: 6px;
    }

    /* Sidebar: thumb only while the pointer is over the menu, like macOS overlay bars */
    #kt_app_sidebar_menu_wrapper:not(:hover)::-webkit-scrollbar-thumb {
        background: transparent !important;
    }
}

*::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    background: #D6D6DA;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

hr,
.separator {
    border-color: var(--ui-line) !important;
    opacity: 1;
}

.aws-separator.dashed {
    border-style: solid !important;
    border-color: var(--ui-line-soft) !important;
}

/* Skeletons shimmer gently instead of blinking */
.aws-skeleton-line {
    background: linear-gradient(90deg, var(--ui-fill) 0%, #ECECEF 50%, var(--ui-fill) 100%) !important;
    background-size: 200% 100% !important;
    animation: ui-shimmer 1.4s linear infinite;
    border-radius: var(--ui-r-xs) !important;
}

@keyframes ui-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (max-width: 767.98px) {
    .font-bold_28, .font-bold_30, .font-bold_32, .font-bold_36 {
        font-size: 24px !important;
    }

    .font-bold_24, .font-bold_22 {
        font-size: 20px !important;
    }
}