/* ============================================================================
   KT-COOL — CryoLynx-inspired visual layer for KineticTherapy (SYSTEM-WIDE)
   ----------------------------------------------------------------------------
   Pure presentation. Loaded globally in _LayoutEres and scoped to `.content-body`
   (the wrapper every app page uses), so the whole system gets one consistent
   look. No IDs, handlers or behaviour are touched — selectors only restyle what
   is already there. Adapts to both template themes via [data-theme-version="dark"].
   Reference aesthetic: CryoLynxUX (glass + animated gradient field).
   ========================================================================== */

:root {
    --kta: #4F46E5;   /* indigo */
    --ktb: #0EA5E9;   /* sky    */
    --ktc: #2DD4BF;   /* teal   */
    --kt-grad: linear-gradient(135deg, var(--kta) 0%, var(--ktb) 55%, var(--ktc) 100%);
    --kt-glow: 0 18px 44px rgba(14, 165, 233, .18);
    --kt-hairline: rgba(79, 70, 229, .16);
    --kt-surface: rgba(255, 255, 255, .72);
    --kt-text: #0f172a;
    --kt-muted: #64748b;
}
[data-theme-version="dark"] {
    --kt-hairline: rgba(148, 163, 255, .14);
    --kt-surface: rgba(30, 41, 59, .55);
    --kt-text: #f1f5f9;
    --kt-muted: rgba(241, 245, 249, .6);
    --kt-glow: 0 18px 50px rgba(14, 165, 233, .12);
}

/* The ambient field uses z-index:-1 (below content, above the body bg) so we do
   NOT have to give .content-body a stacking context. Giving .content-body a
   z-index previously trapped modals declared INSIDE the page (e.g. the recording
   modal) beneath the body-level .modal-backdrop, making them look disabled. */

/* ---------------------------------------------------------------- blobs -- */
.kt-bg-field {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}
.kt-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(95px);
    opacity: .30;
    will-change: transform;
}
.kt-blob--a {
    width: 520px; height: 520px;
    background: radial-gradient(circle at 30% 30%, var(--ktb) 0%, transparent 62%);
    top: -160px; left: -110px;
    animation: ktDriftA 20s ease-in-out infinite alternate;
}
.kt-blob--b {
    width: 460px; height: 460px;
    background: radial-gradient(circle at 70% 70%, var(--kta) 0%, transparent 62%);
    top: 18vh; right: -150px;
    animation: ktDriftB 26s ease-in-out infinite alternate;
}
.kt-blob--c {
    width: 430px; height: 430px;
    background: radial-gradient(circle at 50% 50%, var(--ktc) 0%, transparent 62%);
    bottom: -160px; left: 32%;
    opacity: .22;
    animation: ktDriftA 32s ease-in-out infinite alternate;
}
[data-theme-version="dark"] .kt-blob { opacity: .24; }
@keyframes ktDriftA { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(60px,40px) scale(1.08); } }
@keyframes ktDriftB { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-55px,55px) scale(1.1); } }

/* ----------------------------------------------------------- hero bits -- */
.kt-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 13px; border-radius: 999px;
    border: 1px solid var(--kt-hairline);
    background: var(--kt-surface);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--kt-muted); margin-bottom: 8px;
}
.kt-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ktc); box-shadow: 0 0 10px var(--ktc); }
.kt-title { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; color: var(--kt-text) !important; margin-bottom: 2px; }
.kt-grad-text { background: var(--kt-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kt-sub { color: var(--kt-muted); font-size: .88rem; margin: 0; }

/* breadcrumb -> quiet uppercase trail */
.content-body .page-titles { background: transparent; box-shadow: none; padding: 0 0 4px; margin-bottom: 10px; }
.content-body .breadcrumb-item, .content-body .breadcrumb-item a { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--kt-muted); }
.content-body .breadcrumb-item.active a { color: var(--ktb); }

/* "+ Add New" toolbar bars float above card rows below them */
.content-body .form-head { position: relative; z-index: 60; }

/* ---------------------------------------------------------- glass cards -- */
.content-body .card {
    position: relative;
    background: var(--kt-surface);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: none; border-radius: 22px;
    box-shadow: 0 8px 30px rgba(2, 6, 23, .07);
    transition: transform .2s ease, box-shadow .2s ease;
}
.content-body .card::before {
    content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 1px;
    background: linear-gradient(135deg, rgba(79, 70, 229, .35), rgba(14, 165, 233, .18) 45%, rgba(45, 212, 191, .3));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.content-body .card:hover { box-shadow: var(--kt-glow); }
.content-body .card .card-header { background: transparent; border-bottom: 1px solid var(--kt-hairline); }
.content-body .card .card-title, .content-body .card h3, .content-body .card h4 { color: var(--kt-text) !important; font-weight: 700; letter-spacing: -.01em; }

/* gentle entrance (opacity/transform only — chart/table layout safe) */
.content-body .card { animation: ktRise .5s cubic-bezier(.22, .8, .36, 1) both; }
.content-body .row > div:nth-child(1) .card { animation-delay: .03s; }
.content-body .row > div:nth-child(2) .card { animation-delay: .08s; }
.content-body .row > div:nth-child(3) .card { animation-delay: .13s; }
.content-body .row > div:nth-child(4) .card { animation-delay: .18s; }
@keyframes ktRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .content-body .card, .kt-blob { animation: none !important; } }

/* ---------------------------------------------------- gradient stat tiles - */
.content-body .card.gradient-bx { border-radius: 22px; cursor: pointer; overflow: hidden; backdrop-filter: none; -webkit-backdrop-filter: none; }
.content-body .card.gradient-bx::before { display: none; }
.content-body .card.gradient-bx.bg-danger    { background: linear-gradient(135deg, #e11d48 0%, #fb7185 100%) !important; box-shadow: 0 14px 34px rgba(225, 29, 72, .32); }
.content-body .card.gradient-bx.bg-success   { background: linear-gradient(135deg, #059669 0%, #34d399 100%) !important; box-shadow: 0 14px 34px rgba(5, 150, 105, .32); }
.content-body .card.gradient-bx.bg-info      { background: linear-gradient(135deg, #0369a1 0%, #38bdf8 100%) !important; box-shadow: 0 14px 34px rgba(3, 105, 161, .32); }
.content-body .card.gradient-bx.bg-secondary { background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%) !important; box-shadow: 0 14px 34px rgba(124, 58, 237, .32); }
.content-body .card.gradient-bx.bg-primary   { background: linear-gradient(135deg, #4338ca 0%, #60a5fa 100%) !important; box-shadow: 0 14px 34px rgba(67, 56, 202, .32); }
.content-body .card.gradient-bx::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; top: -110px; right: -60px; background: radial-gradient(circle, rgba(255, 255, 255, .28) 0%, transparent 70%); pointer-events: none; }
.content-body .card.gradient-bx:hover { transform: translateY(-4px) scale(1.01); }
.content-body .card.gradient-bx .border.rounded-circle { border-color: rgba(255, 255, 255, .35) !important; background: rgba(255, 255, 255, .12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .25s ease; }
.content-body .card.gradient-bx:hover .border.rounded-circle { transform: rotate(8deg) scale(1.06); }
.content-body .card.gradient-bx p { letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; font-weight: 600; opacity: .85; }
.content-body .card.gradient-bx h2 { text-shadow: 0 2px 14px rgba(0, 0, 0, .18); }

/* ---------------------------------------------------------------- tables - */
.content-body table.dataTable thead th, .content-body .table thead th {
    text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; font-weight: 700;
    color: var(--kt-muted); border-bottom: 1px solid var(--kt-hairline) !important;
}
.content-body table.dataTable tbody td, .content-body .table tbody td { border-color: var(--kt-hairline) !important; color: var(--kt-text); vertical-align: middle; }
.content-body table.dataTable tbody tr, .content-body .table tbody tr { transition: background-color .15s ease; }
.content-body table.dataTable tbody tr:hover, .content-body .table-hover tbody tr:hover { background: rgba(14, 165, 233, .07); }

/* action icons in list tables -> soft icon buttons */
.content-body table td a > i.fa {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.content-body table td a > i.fa:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(2, 6, 23, .14); }
.content-body table td a > i.fa-eye { background: rgba(14, 165, 233, .12); color: var(--ktb) !important; }
.content-body table td a > i.fa-trash, .content-body table td a > i.fa-trash-o { background: rgba(225, 29, 72, .1); }
.content-body table td a > i.fa-pencil, .content-body table td a > i.fa-edit, .content-body table td a > i.fa-pen { background: rgba(124, 58, 237, .12); }

/* status pills */
.content-body .badge.border-success { background: rgba(45, 212, 191, .12); border-color: transparent !important; color: #0d9488 !important; border-radius: 999px; box-shadow: 0 0 0 1px rgba(13, 148, 136, .25), 0 0 14px rgba(45, 212, 191, .25); }
.content-body .badge.border-danger { background: rgba(225, 29, 72, .1); border-color: transparent !important; color: #e11d48 !important; border-radius: 999px; box-shadow: 0 0 0 1px rgba(225, 29, 72, .25); }

/* gradient CTA */
.kt-btn-glow { background: var(--kt-grad) !important; border: none !important; color: #fff !important; box-shadow: 0 10px 26px rgba(14, 165, 233, .38); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.kt-btn-glow:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(14, 165, 233, .5); filter: brightness(1.05); }

/* toolbar filter inputs sit on glass */
.content-body .form-head .form-group .form-control, .content-body .form-head .default-select {
    border-radius: 12px; border: 1px solid var(--kt-hairline); background: var(--kt-surface);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.content-body .form-head .col-form-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--kt-muted); }

/* chart / nav-tabs -> pill switcher */
.content-body .card-tabs .nav-tabs { border: 1px solid var(--kt-hairline); border-radius: 999px; padding: 3px; background: var(--kt-surface); }
.content-body .card-tabs .nav-tabs .nav-link { border-radius: 999px; font-weight: 600; border: none; }
.content-body .card-tabs .nav-tabs .nav-link.active { background: var(--kt-grad); color: #fff !important; box-shadow: 0 6px 16px rgba(14, 165, 233, .35); }

/* recent-patient avatars + timeline rows */
.content-body .profile-initials { background: var(--kt-grad) !important; box-shadow: 0 6px 14px rgba(14, 165, 233, .35); }
.content-body .timeline-panel { border-radius: 14px; transition: background-color .15s ease; padding: 8px; }
.content-body .timeline-panel:hover { background: rgba(14, 165, 233, .07); }

/* ====== DROPDOWN STACKING SAFEGUARD (system-wide) ======
   Glass cards create stacking contexts (backdrop-filter), so any expanded
   list must be pinned above them. select2 appends to <body> already; this
   covers bootstrap-select / native .dropdown-menu rendered inline. */
.dropdown-menu, .select2-container, .select2-dropdown, .bootstrap-select .dropdown-menu { z-index: 1061 !important; }
.content-body .form-head .dropdown-menu, .content-body .form-head .select2-dropdown {
    border-radius: 14px; border: 1px solid var(--kt-hairline); background: #fff; box-shadow: 0 18px 44px rgba(2, 6, 23, .18); overflow: hidden;
}
[data-theme-version="dark"] .content-body .form-head .dropdown-menu, [data-theme-version="dark"] .content-body .form-head .select2-dropdown { background: #1e293b; }

/* ----------------------------------------------------- auth (login/reg) -- */
/* These pages use .authincation / .auth-form (not .content-body) and the blank
   layout, so they're styled here directly. */
.authincation { position: relative; z-index: 1; }
.authincation-content {
    position: relative;
    background: var(--kt-surface);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: none !important;
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(2, 6, 23, .18);
    overflow: hidden;
}
.authincation-content::before {
    content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 1px;
    background: linear-gradient(135deg, rgba(79, 70, 229, .5), rgba(14, 165, 233, .25) 50%, rgba(45, 212, 191, .45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.authincation-content .auth-form { padding: 2.4rem 2.2rem; }
.authincation-content .auth-form > * { position: relative; z-index: 1; }
.authincation .auth-form h4 { color: var(--kt-text) !important; font-weight: 800; letter-spacing: -.02em; }
.authincation .auth-form .form-label { font-weight: 600; color: var(--kt-muted); font-size: .8rem; letter-spacing: .02em; }
.authincation .auth-form .form-control {
    border-radius: 12px;
    border: 1px solid var(--kt-hairline);
    background: rgba(255, 255, 255, .65);
    padding: .7rem .9rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
[data-theme-version="dark"] .authincation .auth-form .form-control { background: rgba(15, 23, 42, .4); color: var(--kt-text); }
.authincation .auth-form .form-control:focus { border-color: var(--ktb); box-shadow: 0 0 0 .2rem rgba(14, 165, 233, .22); }
.authincation .auth-form .btn-primary {
    background: var(--kt-grad) !important;
    border: none !important;
    border-radius: 12px;
    padding: .7rem 1.2rem;
    font-weight: 600;
    box-shadow: 0 12px 28px rgba(14, 165, 233, .4);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.authincation .auth-form .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(14, 165, 233, .52); filter: brightness(1.04); }
.authincation .auth-form a { color: var(--ktb); }
.authincation .auth-form .new-account p { color: var(--kt-muted); }

/* ---------------------------------------------------------------- modals - */
/* Modals are often declared as siblings AFTER .content-body, so style globally. */
.modal-content { border: none; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(2, 6, 23, .35); }
.modal-header { background: linear-gradient(135deg, #4F46E5, #0EA5E9 60%, #2DD4BF) !important; border-bottom: none; }
.modal-header .modal-title, .modal-header h1, .modal-header h5 { color: #fff !important; font-weight: 700; }
.modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2.2); opacity: .9; }
.modal-content .form-control, .modal-content .form-select { border-radius: 11px; }
[data-theme-version="dark"] .modal-content { background: #1e293b; }