/* ============================================================
   UI refresh — softer, more modern look & better UX
   Shared by layouts/app and layouts/auth
   ============================================================ */

html {
    scroll-behavior: smooth;
}

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

/* Cards / portlets: rounder corners, softer elevation */
.kt-portlet {
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(40, 42, 60, 0.06);
    transition: box-shadow 0.2s ease;
}

.kt-portlet:hover {
    box-shadow: 0 6px 22px rgba(40, 42, 60, 0.09);
}

.kt-portlet .kt-portlet__head {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* Buttons: rounder, smoother feedback */
.btn {
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease,
        box-shadow 0.15s ease, transform 0.1s ease;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary,
.btn-brand {
    box-shadow: 0 4px 12px rgba(54, 108, 243, 0.25);
}

.btn-primary:hover,
.btn-brand:hover {
    box-shadow: 0 6px 16px rgba(54, 108, 243, 0.35);
}

.badge {
    border-radius: 6px;
}

/* Form controls: clearer focus state */
.form-control {
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
    border-color: #366cf3;
    box-shadow: 0 0 0 3px rgba(54, 108, 243, 0.12);
}

/* Keyboard accessibility: visible focus outline */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #366cf3;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Dropdowns: softer, floating look */
.dropdown-menu {
    border: 1px solid rgba(40, 42, 60, 0.06);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(40, 42, 60, 0.14);
    overflow: hidden;
}

/* Alerts & modals: rounder corners */
.alert {
    border-radius: 10px;
}

.modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 16px 48px rgba(40, 42, 60, 0.18);
}

/* Sticky header: subtle depth when minimized */
.kt-header.kt-header--fixed {
    transition: box-shadow 0.2s ease;
}

.kt-header--minimize-active .kt-header.kt-header--fixed {
    box-shadow: 0 2px 16px rgba(40, 42, 60, 0.1);
}

/* Breadcrumbs bar: glassy pill */
.kt-subheader .kt-subheader__main {
    border-radius: 8px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Tables: gentle row hover */
.table tbody tr {
    transition: background-color 0.12s ease;
}

.table-hover tbody tr:hover {
    background-color: rgba(54, 108, 243, 0.04);
}

/* Footer: link hover feedback + tidy payment logos */
.kt-footer a {
    transition: color 0.2s ease;
}

.kt-footer .kt-footer__top a:hover,
.kt-footer .kt-footer__menu a:hover {
    color: #ffffff !important;
}

.footer-payment-logo {
    background: white;
    height: 30px;
    margin: 0 5px 5px;
    border-radius: 4px;
}

.footer-payment-logo--padded {
    padding: 1px;
}

/* ------------------------------------------------------------
   Tables & pagination polish (dashboard and listing pages)
   ------------------------------------------------------------ */

/* Table headers: quieter, clearer hierarchy */
.kt-portlet .table thead td,
.kt-portlet .table thead th {
    color: #74788d;
    font-weight: 600;
    border-top: none;
    border-bottom: 1px solid #ebedf2;
}

/* Rows: a touch more breathing room, aligned content */
.kt-portlet .table td {
    vertical-align: middle;
}

.kt-portlet .table tbody td {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

/* Parameter chips: softer than default grey */
.table .badge-pill.badge-secondary {
    background-color: #f0f3ff;
    color: #5d637e;
    font-weight: 500;
}

/* Position badges: consistent width so the column lines up */
.table td .badge:last-child {
    min-width: 2.5rem;
}

/* Pagination: rounder, lighter */
.pagination .page-link {
    border: none;
    border-radius: 6px;
    margin: 0 2px;
    color: #5d637e;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pagination .page-link:hover {
    background-color: rgba(54, 108, 243, 0.08);
    color: #366cf3;
}

.pagination .page-item.active .page-link {
    background-color: #366cf3;
    box-shadow: 0 2px 8px rgba(54, 108, 243, 0.3);
}

/* ------------------------------------------------------------
   Auth pages (login / signup) polish
   ------------------------------------------------------------ */

.kt-login .form-control {
    border-radius: 8px;
}

.kt-login .kt-login__actions .btn {
    border-radius: 8px;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .btn,
    .btn-glowing,
    .arrows .arrow {
        animation: none !important;
        transition: none !important;
    }
}