/* Awssome UI 2.0 — surfaces: cards, tabs, modals, dropdowns, alerts, toasts. */

/* Cards: white, hairline, 20px radius, barely-there shadow */
.card,
.card.aws-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-r-xl) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.card.card-flush,
.card.shadow-none,
.card.bg-transparent {
    border: 0 !important;
    box-shadow: none !important;
}

.card > .card-header {
    border-bottom: 1px solid var(--ui-line-soft) !important;
    min-height: 64px;
    padding: 0 24px;
}

.card > .card-body {
    padding: 24px;
}

.card > .card-footer {
    border-top: 1px solid var(--ui-line-soft) !important;
    background: transparent;
}

.card .card-title,
.card .card-title h3 {
    font-family: var(--ui-font-display) !important;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.card.aws-counter-card {
    border-radius: var(--ui-r-xl) !important;
    transition: box-shadow var(--ui-base) var(--ui-ease), transform var(--ui-base) var(--ui-ease);
}

.card.aws-counter-card:hover {
    box-shadow: var(--ui-shadow-md) !important;
}

/* Segmented tabs (Apple-style): grey track, white active pill */
.aws-nav-tabs,
.nav.aws-nav-tabs {
    background: var(--ui-fill) !important;
    border-radius: var(--ui-r-md) !important;
    padding: 4px !important;
    gap: 2px;
    display: inline-flex;
    flex-wrap: wrap;
    border: 0 !important;
}

.aws-nav-tabs .nav-link {
    font-family: var(--ui-font-semibold) !important;
    font-size: 13.5px !important;
    color: var(--ui-muted) !important;
    border-radius: var(--ui-r-sm) !important;
    padding: 7px 14px !important;
    margin: 0 !important;
    background: transparent;
    transition: background var(--ui-fast) var(--ui-ease), color var(--ui-fast) var(--ui-ease);
}

.aws-nav-tabs .nav-link:hover {
    color: var(--ui-ink) !important;
}

.aws-nav-tabs .nav-link.active {
    background: var(--ui-surface) !important;
    color: var(--ui-ink) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 1px rgba(0, 0, 0, .04) !important;
}

.aws-nav-tabs .nav-link.active .svg-icon.path-fill-icon svg path {
    fill: var(--ui-primary) !important;
}

.aws-nav-tabs .nav-link.active .svg-icon.path-stroke-icon svg path {
    stroke: var(--ui-primary) !important;
}

.aws-nav-tabs.aws-neutral-tabs {
    background: transparent !important;
    padding: 0 !important;
    gap: 8px;
}

.aws-nav-tabs.aws-neutral-tabs .nav-link {
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-r-pill) !important;
    background: var(--ui-surface) !important;
    color: var(--ui-ink) !important;
}

.aws-nav-tabs.aws-neutral-tabs .nav-link.active {
    background: var(--ui-ink) !important;
    border-color: var(--ui-ink) !important;
    color: #fff !important;
}

/* Underline tabs */
.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
    border-bottom-color: var(--ui-primary) !important;
    color: var(--ui-ink) !important;
}

/* Modals */
/* Tint lives on the base class, not only on .show: Bootstrap drops .show before the 150ms fade-out,
   and the base style.bundle backdrop is solid #000, which flashed the whole screen black on close. */
.modal-backdrop {
    background: rgba(20, 20, 24, .44);
    backdrop-filter: blur(2px);
}

.modal-backdrop.show {
    opacity: 1 !important;
}

.modal-content {
    border: 0 !important;
    border-radius: var(--ui-r-2xl) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    overflow: hidden;
}

.modal-header {
    border-bottom: 0 !important;
    padding: 24px 28px 8px !important;
}

.modal-header .modal-title,
.modal-content h2 {
    font-family: var(--ui-font-display) !important;
    letter-spacing: -0.02em;
}

.modal-body {
    padding: 16px 28px 24px !important;
}

.modal-footer {
    border-top: 1px solid var(--ui-line-soft) !important;
    padding: 16px 28px !important;
    gap: 8px;
}

.modal.fade .modal-dialog {
    transform: translateY(12px) scale(.98);
    transition: transform var(--ui-base) var(--ui-ease);
}

.modal.show .modal-dialog {
    transform: none;
}

/* SweetAlert */
.swal2-container .swal2-popup {
    border-radius: var(--ui-r-2xl) !important;
    padding: 28px !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

.swal2-container .swal2-title {
    font-family: var(--ui-font-display) !important;
    letter-spacing: -0.02em;
    color: var(--ui-ink) !important;
}

.swal2-container .swal2-styled.swal2-confirm {
    background: var(--ui-primary) !important;
    border-radius: var(--ui-r-md) !important;
}

/* Dropdown menus (Bootstrap + Keen) */
.dropdown-menu,
.menu-sub-dropdown {
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-r-lg) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    padding: 6px !important;
}

.dropdown-item,
.menu-sub-dropdown .menu-link {
    border-radius: var(--ui-r-sm) !important;
    padding: 9px 12px !important;
    font-size: 14px;
    color: var(--ui-ink) !important;
}

.dropdown-item:hover,
.menu-sub-dropdown .menu-link:hover {
    background: var(--ui-fill) !important;
}

/* Tooltips and popovers */
.tooltip .tooltip-inner {
    background: var(--ui-ink) !important;
    color: #fff !important;
    border-radius: var(--ui-r-sm) !important;
    font-size: 12.5px;
    padding: 7px 10px;
    box-shadow: var(--ui-shadow-md);
}

.popover {
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-r-lg) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

/* Alerts & banners */
.alert {
    border-radius: var(--ui-r-lg) !important;
    border: 1px solid transparent;
}

.aws-banner {
    border-radius: var(--ui-r-lg) !important;
}

/* iziToast */
.iziToast {
    border-radius: var(--ui-r-lg) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    font-family: var(--ui-font-body) !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-line) !important;
    /* Clip the progress bar to the rounded corners. */
    overflow: hidden;
}

/* Plugin draws a 3px-radius inset/drop shadow layer behind the toast; it shows as square
   corners and a dark rim under our rounded card. Our own box-shadow replaces it. */
.iziToast::after {
    content: none !important;
}

.iziToast > .iziToast-progressbar {
    background: transparent;
}

.iziToast > .iziToast-progressbar > div {
    background: var(--ui-subtle);
    border-radius: 0;
    opacity: .5;
}

.iziToast.iziToast-color-green > .iziToast-progressbar > div { background: var(--ui-green-600); }
.iziToast.iziToast-color-red > .iziToast-progressbar > div { background: var(--ui-red-500); }
.iziToast.iziToast-color-orange > .iziToast-progressbar > div { background: var(--ui-primary); }

.iziToast > .iziToast-body .iziToast-title {
    font-family: var(--ui-font-semibold) !important;
    color: var(--ui-ink) !important;
}

/* Progress */
.progress {
    background: var(--ui-fill) !important;
    border-radius: var(--ui-r-pill) !important;
    height: 8px;
}

.progress .progress-bar {
    background: var(--ui-primary);
    border-radius: var(--ui-r-pill);
}

/* Accordions */
.accordion-item {
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-r-lg) !important;
    overflow: hidden;
    margin-bottom: 8px;
}

.accordion-button:not(.collapsed) {
    background: var(--ui-fill-2) !important;
    color: var(--ui-ink) !important;
    box-shadow: none !important;
}

/* Global loader */
#awsLoader .aws-loader {
    background: rgba(247, 247, 248, .6) !important;
    backdrop-filter: blur(2px);
}

/* Kanban/board tab variant: legacy SCSS paints the active tab near-black; keep the
   segmented look (white pill, ink label) everywhere. Higher specificity on purpose. */
.aws-nav-tabs.aws-nav-tabs-kanban .nav-link {
    line-height: 1.4;
    padding: 7px 14px !important;
    margin: 0 !important;
}

.aws-nav-tabs.aws-nav-tabs-kanban .nav-link.active {
    background-color: var(--ui-surface) !important;
    color: var(--ui-ink) !important;
}

.aws-nav-tabs.aws-nav-tabs-kanban .nav-link.active .svg-icon.path-fill-icon svg,
.aws-nav-tabs.aws-nav-tabs-kanban .nav-link.active .svg-icon.path-fill-icon svg path {
    fill: var(--ui-primary) !important;
}

.aws-nav-tabs.aws-nav-tabs-kanban .nav-link.active .svg-icon.path-stroke-icon svg path {
    stroke: var(--ui-primary) !important;
}

/* Every modal is a bottom sheet on phones (design guide: modals are full-width sheets under
   576px). Page files may still refine a specific modal; this is the shared baseline. */
@media (max-width: 575.98px) {
    .modal .modal-dialog:not(.modal-fullscreen) {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100%;
        height: auto !important;
        display: flex;
        align-items: flex-end;
    }

    .modal .modal-dialog:not(.modal-fullscreen) .modal-content {
        width: 100%;
        border-radius: var(--ui-r-2xl) var(--ui-r-2xl) 0 0 !important;
        max-height: 92dvh;
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .modal.fade .modal-dialog:not(.modal-fullscreen) {
        transform: translateY(24px);
    }

    .modal.show .modal-dialog:not(.modal-fullscreen) {
        transform: none;
    }
}