/* ============================================================
   Liquid Glass Design System
   Áp dụng toàn cục cho Internal Management System.
   Load SAU style.css để override Bootstrap components.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

:root {
    --bs-primary: #3b8e7f;
    --bs-primary-rgb: 59, 142, 127;
    --bs-link-color: #32796d;
    --bs-link-color-rgb: 50, 121, 109;
    --bs-link-hover-color: #286158;
    --bs-link-hover-color-rgb: 40, 97, 88;
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-strong: rgba(255, 255, 255, 0.72);
    --glass-bg-soft: rgba(255, 255, 255, 0.38);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-border-soft: rgba(255, 255, 255, 0.35);
    --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.18);
    --glass-shadow-sm: 0 4px 16px rgba(31, 38, 135, 0.12);
    --glass-blur: 18px;
    --glass-radius: 18px;
    --glass-radius-sm: 12px;
    --glass-radius-lg: 26px;
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    --glass-accent-1: #78c2b5;
    --glass-accent-2: #3b8e7f;
    --cosmic-orange-1: #78c2b5;
    --cosmic-orange-2: #3b8e7f;
    --glass-text: #1f2937;
    --glass-muted: #4b5563;
}

[data-theme="dark"] {
    --glass-bg: rgba(22, 27, 45, 0.5);
    --glass-bg-strong: rgba(22, 27, 45, 0.72);
    --glass-bg-soft: rgba(22, 27, 45, 0.32);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-border-soft: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --glass-text: #e5e7eb;
    --glass-muted: #9ca3af;
}

/* ---------- Animated aurora background ---------- */
.lg-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background: #e5e7eb;
    background-attachment: fixed;
}

[data-theme="dark"] .lg-bg {
    background:
        radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.35), transparent 46%),
        radial-gradient(circle at 85% 15%, rgba(217, 70, 239, 0.22), transparent 46%),
        radial-gradient(circle at 50% 88%, rgba(20, 184, 166, 0.22), transparent 46%),
        linear-gradient(135deg, #0b1020, #131a2e, #0d1424);
}

.lg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0;
    will-change: transform;
}

.lg-blob-1 {
    width: 42vw; height: 42vw;
    background: radial-gradient(circle, rgba(59, 142, 127, 0.9), transparent 70%);
    top: -10vw; left: -8vw;
    animation: lg-float-1 22s ease-in-out infinite;
}

.lg-blob-2 {
    width: 38vw; height: 38vw;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.8), transparent 70%);
    bottom: -12vw; right: -6vw;
    animation: lg-float-2 26s ease-in-out infinite;
}

.lg-blob-3 {
    width: 34vw; height: 34vw;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.8), transparent 70%);
    top: 35%; left: 45%;
    animation: lg-float-3 30s ease-in-out infinite;
}

@keyframes lg-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(6vw, 4vw) scale(1.12); }
}
@keyframes lg-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-5vw, -3vw) scale(1.1); }
}
@keyframes lg-float-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-4vw, 5vw) scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
    .lg-blob { animation: none; }
}

/* ---------- Glass utility ---------- */
.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
    color: var(--glass-text);
}

.glass-strong {
    background: var(--glass-bg-strong);
}

/* ---------- Body ---------- */
body {
    background: #e5e7eb;
    color: var(--glass-text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

/* ---------- Navbar (glass) ---------- */
.navbar.glass-nav {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 20px rgba(31, 38, 135, 0.12);
    color: var(--glass-text);
}
.navbar.glass-nav .navbar-brand,
.navbar.glass-nav .nav-link {
    color: var(--glass-text);
}
.navbar.glass-nav .navbar-brand { font-weight: 800; letter-spacing: 0.3px; }
.navbar.glass-nav .nav-link {
    border-radius: 10px;
    margin: 0 0.15rem;
    transition: background-color 0.25s, color 0.25s, transform 0.2s;
}
.navbar.glass-nav .nav-link:hover {
    background-color: rgba(59, 142, 127, 0.16);
    color: var(--glass-text);
    transform: translateY(-1px);
}
.navbar.glass-nav .nav-link.active {
    background: linear-gradient(135deg, var(--glass-accent-1), var(--glass-accent-2));
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(59, 142, 127, 0.35);
}
.navbar.glass-nav .navbar-toggler { border-color: var(--glass-border); color: var(--glass-text); }
.navbar.glass-nav .dropdown-menu { margin-top: 0.5rem; }

/* User dropdown button -> glass pill */
.navbar.glass-nav #userDropdown {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--glass-text);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
}
.navbar.glass-nav #userDropdown:hover { background: var(--glass-bg-strong); }

/* Global search input */
.navbar.glass-nav #globalSearch {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    color: var(--glass-text);
    border-radius: 999px;
}

/* ---------- Cards ---------- */
.card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
    color: var(--glass-text);
    margin-bottom: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(31, 38, 135, 0.22);
}
.card-header {
    background: var(--glass-bg-soft) !important;
    border-bottom: 1px solid var(--glass-border-soft);
    border-radius: var(--glass-radius) var(--glass-radius) 0 0 !important;
    font-weight: 600;
    color: var(--glass-text);
}
.card-body { background: transparent !important; color: var(--glass-text); }

/* Content banners/cards use the same defined silver edge as the note cards.
   Scope this to page content so the persistent dock keeps its own glass
   border and active indicator styling. Colored dashboard tiles retain theirs. */
body.has-dock > main#appMainContent .card:not(.quick-actions-card):not(.bg-info):not(.bg-success) {
    border: 2px solid #adb5bd !important;
}

[data-theme="dark"] body.has-dock > main#appMainContent .card:not(.quick-actions-card):not(.bg-info):not(.bg-success) {
    border-color: #6c757d !important;
}

/* Keep note titles and metadata readable on the light glass header. */
.note-view-header,
.note-view-header h1,
.note-view-header h2,
.note-view-header h3,
.note-view-header h4,
.note-view-header h5,
.note-view-header h6,
.note-view-header small,
.note-view-header .ms-2 {
    color: #111827 !important;
}

/* Bootstrap .text-white must not wash out note title/date metadata. */
.note-view-header.bg-primary.text-white,
.note-view-header.bg-primary.text-white h1,
.note-view-header.bg-primary.text-white h2,
.note-view-header.bg-primary.text-white h3,
.note-view-header.bg-primary.text-white h4,
.note-view-header.bg-primary.text-white h5,
.note-view-header.bg-primary.text-white h6,
.note-view-header.bg-primary.text-white small,
.note-view-header.bg-primary.text-white .utc-time,
.note-view-header.bg-primary.text-white .ms-2 {
    color: #111827 !important;
}

/* Final override for the view-note header. */
body .note-view-header,
body .note-view-header *:not(.badge) {
    color: #111827 !important;
}
[data-theme="dark"] .note-view-header,
[data-theme="dark"] .note-view-header h1,
[data-theme="dark"] .note-view-header h2,
[data-theme="dark"] .note-view-header h3,
[data-theme="dark"] .note-view-header h4,
[data-theme="dark"] .note-view-header h5,
[data-theme="dark"] .note-view-header h6,
[data-theme="dark"] .note-view-header small,
[data-theme="dark"] .note-view-header .ms-2 {
    color: #f9fafb !important;
}

[data-theme="dark"] .card {
    border: 1px solid var(--glass-border);
}
[data-theme="dark"] .card-body { background: transparent !important; }

/* ---------- Stat / dashboard cards ---------- */
.card.bg-primary, .card.bg-success, .card.bg-info, .card.bg-warning, .card.bg-danger {
    background: var(--glass-bg-strong) !important;
    color: var(--glass-text);
    border: 1px solid var(--glass-border);
}

/* ---------- Modals ---------- */
.modal-content {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius-lg);
    box-shadow: 0 20px 60px rgba(31, 38, 135, 0.3);
    color: var(--glass-text);
}
.modal-header {
    border-bottom: 2px solid rgba(30, 64, 175, 0.28) !important;
    box-shadow: 0 2px 0 rgba(255, 255, 255, 0.22), 0 5px 14px rgba(15, 23, 42, 0.1);
}
.modal-body {
    border-top: 1px solid rgba(255, 255, 255, 0.42);
}
.modal-footer {
    border-top: 2px solid rgba(30, 64, 175, 0.2) !important;
    box-shadow: 0 -3px 12px rgba(15, 23, 42, 0.06);
}

/* ---------- Dropdown menus ---------- */
.dropdown-menu {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius-sm);
    box-shadow: var(--glass-shadow);
    color: var(--glass-text);
    padding: 0.4rem;
}
.dropdown-item { border-radius: 8px; color: var(--glass-text); }
.dropdown-item:hover, .dropdown-item:focus {
    background: rgba(59, 142, 127, 0.16);
    color: var(--glass-text);
}
.dropdown-divider { border-color: var(--glass-border-soft); }

/* ---------- Buttons ---------- */
.btn { border-radius: 12px; transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: linear-gradient(135deg, var(--glass-accent-1), var(--glass-accent-2));
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(59, 142, 127, 0.35);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59, 142, 127, 0.45); }
.btn-success,
.btn-info {
    background: linear-gradient(135deg, var(--glass-accent-1), var(--glass-accent-2));
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(107, 140, 255, 0.28);
}
.btn-success:hover,
.btn-info:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-success:hover { filter: brightness(1.08); }
.btn-danger { background: linear-gradient(135deg, rgba(239,68,68,0.92), rgba(220,38,38,0.92)); border: none; color: #fff; }
.btn-secondary { background: rgba(100,116,139,0.85); border: 1px solid var(--glass-border); color: #fff; backdrop-filter: blur(8px); }
.btn-light { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--glass-text); backdrop-filter: blur(8px); }
.btn-outline-secondary { border-color: var(--glass-border); color: var(--glass-text); }
.btn-outline-secondary:hover { background: rgba(59,142,127,0.14); color: var(--glass-text); }
.btn-outline-primary,
.btn-outline-success,
.btn-outline-info {
    border-color: var(--glass-accent-2);
    color: var(--glass-accent-2);
    background: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-success:hover,
.btn-outline-success:active,
.btn-outline-info:hover,
.btn-outline-info:active {
    background: linear-gradient(135deg, var(--glass-accent-1), var(--glass-accent-2));
    border-color: transparent;
    color: #fff;
}

/* Consistent teal-gradient modal chrome for notes, documents and search. */
.modal-content .modal-header {
    background: linear-gradient(135deg, var(--glass-accent-1), var(--glass-accent-2));
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.62) !important;
}
.modal-content .modal-header .btn-close {
    filter: brightness(0) invert(1);
}
.modal-content .modal-footer {
    background: rgba(255, 255, 255, 0.72);
}

/* Quick create/edit modals have tabs between their header and form body. */
#quickCreateNoteModal .nav-tabs,
#quickCreateDocModal .nav-tabs {
    border-bottom: 2px solid rgba(30, 64, 175, 0.22);
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
}

.note-view-header {
    border-bottom: 2px solid rgba(30, 64, 175, 0.2) !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
}

/* ---------- Forms ---------- */
.form-control, .form-select {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--glass-text);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.form-control:focus, .form-select:focus {
    background: var(--glass-bg-strong);
    border-color: var(--glass-accent-1);
    box-shadow: 0 0 0 0.2rem rgba(59, 142, 127, 0.25);
    color: var(--glass-text);
}
.form-control::placeholder { color: var(--glass-muted); opacity: 0.8; }
.form-label { color: var(--glass-text); font-weight: 500; }

/* ---------- Alerts (giữ ý nghĩa màu, bo góc + lấp lánh) ---------- */
.alert {
    border-radius: var(--glass-radius-sm);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--glass-shadow-sm);
    color: var(--glass-text);
}
.alert-danger { border-left: 4px solid #ef4444; }
.alert-success { border-left: 4px solid #10b981; }
.alert-warning { border-left: 4px solid #f59e0b; }
.alert-info { border-left: 4px solid #3b8e7f; }

/* ---------- Tables ---------- */
.table {
    --bs-table-bg: transparent;
    color: var(--glass-text);
}
.table thead th {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    color: var(--glass-text);
    font-weight: 600;
}
.table tbody tr { transition: background-color 0.2s; }
.table tbody tr:hover { background: rgba(59, 142, 127, 0.10); }
.table td, .table th { border-color: var(--glass-border-soft); }

/* ---------- List group ---------- */
.list-group-item {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border-soft);
    color: var(--glass-text);
    border-radius: 12px !important;
    margin-bottom: 0.4rem;
}

/* ---------- Badges ---------- */
.badge { border-radius: 999px; padding: 0.35em 0.7em; font-weight: 600; }

/* ---------- Footer ---------- */
footer.bg-light {
    background: transparent !important;
    color: var(--glass-muted);
    border-top: 1px solid var(--glass-border-soft);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ---------- Misc polish ---------- */
.shadow-sm { box-shadow: var(--glass-shadow-sm) !important; }
.text-muted { color: var(--glass-muted) !important; }

/* ---------- Render optimization: skip offscreen cards ---------- */
.note-card-wrapper {
    content-visibility: auto;
    contain-intrinsic-size: 280px;
}

html { scroll-behavior: smooth; }

/* Pagination / breadcrumb friendliness */
.breadcrumb { background: var(--glass-bg-soft); border-radius: 12px; padding: 0.5rem 1rem; }

/* Spinner glass */
.spinner-border { color: var(--glass-accent-1); }

/* =========================================================
   FLOATING LIQUID-GLASS DOCK NAVBAR
   ========================================================= */
body.has-dock { padding-top: 92px; }

/* Keep the permanent mini-chat node in every Turbo page so its handlers are
   not lost when navigating away from and back to the chat route. */
body[data-page="chat"] #floatingChatWidget { display: none !important; }

/* The chat route owns the available viewport instead of collapsing to the
   input row when its parent has no definite height. */
body[data-page="chat"] > main#appMainContent {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    height: calc(100vh - 122px);
    min-height: 0;
    margin: 0 !important;
    padding: 12px;
    box-sizing: border-box;
}

body[data-page="chat"] .chat-container {
    width: 100%;
    height: 100%;
    min-width: 0;
}

body[data-page="chat"] .chat-main {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
}

body.has-dock > footer.bg-light {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1020;
    height: 30px;
    margin: 0 !important;
    padding: 4px 1rem !important;
    font-size: 0.78rem;
    line-height: 20px;
    box-sizing: border-box;
}

.lg-dock-nav {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1030;
    width: max-content;
    max-width: 96vw;
}

/* Liquid-glass wrapper layers (from liquid-glass snippet, adapted) */
.liquidGlass-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    font-weight: 600;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(31, 38, 135, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.liquidGlass-effect {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    -webkit-backdrop-filter: blur(12px) saturate(170%);
    backdrop-filter: blur(12px) saturate(170%);
    filter: url(#glass-distortion);
    overflow: hidden;
}

.liquidGlass-tint {
    z-index: 1;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.45);
}

.liquidGlass-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    box-shadow: inset 1px 1px 1px 0 rgba(255, 255, 255, 0.6),
        inset -1px -1px 1px 0 rgba(255, 255, 255, 0.35);
    border-radius: inherit;
}

/* Dock layout */
.lg-dock {
    /* Keep the dock itself pill-shaped, even though dropdowns must overflow. */
    position: relative;
    --dock-motion: cubic-bezier(0.4, 0, 0.2, 1);
    --dock-glass: rgba(220, 226, 233, 0.58);
    font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
    box-sizing: border-box;
    border-radius: 999px !important;
    padding: 0.45rem 0.9rem;
    gap: 0.35rem;
    overflow: visible; /* allow dropdowns to overflow */
    transition:
        background-color 400ms var(--dock-motion),
        box-shadow 400ms var(--dock-motion);
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(220, 226, 233, 0.62) 48%,
            rgba(247, 249, 251, 0.72) 100%);
    border: 1px solid rgba(255, 255, 255, 0.68);
    box-shadow:
        0 14px 34px rgba(92, 103, 116, 0.18),
        0 3px 10px rgba(40, 48, 58, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    backdrop-filter: blur(16px) saturate(125%);
}

.lg-dock button,
.lg-dock input {
    font-family: inherit;
}

/* The glass has its own clipping shell. The dock stays overflow-visible so
   Bootstrap dropdowns can open outside the pill. */
.lg-dock-glass {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: 999px !important;
    clip-path: inset(0 round 999px);
    pointer-events: none;
}

.lg-dock-glass > .liquidGlass-effect,
.lg-dock-glass > .liquidGlass-tint,
.lg-dock-glass > .liquidGlass-shine {
    border-radius: 999px !important;
}

.lg-dock-inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    gap: 0.4rem;
}

.lg-brand {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--glass-text);
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    transition: color 0.2s;
}
.lg-brand:hover { color: var(--glass-accent-1); }

.lg-menu {
    position: relative;
    isolation: isolate;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    align-items: center;
    gap: 0.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Compact quick actions replace the old Search menu item in the dock. */
.dock-quick-actions {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    list-style: none;
    margin: 0;
    padding: 0 0.15rem;
}
.dock-quick-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--glass-text);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition: color 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms ease;
}
.dock-quick-action:hover,
.dock-quick-action:focus-visible {
    color: var(--glass-accent-2);
    background: rgba(255, 255, 255, 0.12);
    outline: none;
    transform: scale(1.12);
}
.dock-quick-action:active { transform: scale(1.04); }
.lg-actions .dock-quick-action,
.dock-mobile-search .dock-quick-action {
    color: var(--glass-accent-2);
}
.dock-mobile-search { display: none; }
.dock-mobile-search .dock-quick-action span { display: none; }

/* Mobile create shortcut: one compact plus button opens the two create
   actions, keeping the primary dock limited to four destinations. */
.mobile-quick-create {
    display: none;
}

.mobile-quick-create-menu[hidden] {
    display: none !important;
}

/* Search starts as a small input-only modal on narrow screens. Results are
   allowed to add height only after the user enters a query. */
@media (max-width: 767px) {
    #searchModal {
        position: fixed;
        inset: 0;
        padding: 0;
        overflow: hidden !important;
        overscroll-behavior: none;
        touch-action: none;
        -webkit-overflow-scrolling: auto;
    }

    #searchModal + .modal-backdrop,
    .modal-backdrop {
        touch-action: none;
        overscroll-behavior: none;
    }

    #searchModal .modal-dialog {
        position: fixed;
        top: max(0.75rem, env(safe-area-inset-top));
        left: 0.75rem;
        width: calc(100vw - 1.5rem);
        max-width: calc(100vw - 1.5rem);
        min-height: 0;
        margin: 0;
        touch-action: none;
        overflow: hidden;
    }

    /* Mobile search is a fixed overlay, not a draggable Bootstrap dialog. */
    #searchModal.fade .modal-dialog,
    #searchModal.show .modal-dialog {
        transform: none !important;
        transition: none !important;
    }

    #searchModal .modal-dialog.modal-dialog-centered {
        display: block;
        min-height: 0;
    }

    #searchModal .modal-content {
        height: auto;
        max-height: calc(100dvh - 1.5rem);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #searchModal.has-query .modal-content {
        height: min(calc(100dvh - 1.5rem), 34rem);
    }

    #searchModal .modal-body {
        padding: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        touch-action: none;
    }

    #searchModal .input-group {
        height: 3.5rem;
        min-height: 3.5rem;
        flex-wrap: nowrap;
    }

    #searchModal .form-control {
        min-width: 0;
        font-size: 1rem;
    }

    #searchModal:not(.has-query) #quickSearchResults,
    #searchModal:not(.has-query) #quickSearchTips {
        display: none !important;
    }

    #searchModal.has-query #quickSearchResults {
        flex: 1 1 0;
        min-height: 0;
        max-height: none !important;
        overflow-y: scroll;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: auto;
        touch-action: none;
    }

    #searchModal.has-query #quickSearchResults * {
        touch-action: none;
    }

    #searchModal.has-query #quickSearchTips {
        display: block;
        padding: 0.6rem 0.75rem !important;
    }

    .mobile-quick-create {
        position: fixed;
        right: 1rem;
        bottom: calc(4.9rem + env(safe-area-inset-bottom));
        z-index: 1060;
        display: block;
    }

    .mobile-quick-create-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 50%;
        background: linear-gradient(135deg, #78c2b5 0%, #3b8e7f 100%);
        color: #fff;
        font-size: 1.35rem;
        line-height: 1;
        box-shadow: 0 8px 20px rgba(50, 121, 109, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.65);
        cursor: pointer;
        transition: transform 180ms cubic-bezier(.22, 1, .36, 1),
            box-shadow 180ms ease;
    }

    .mobile-quick-create-button:hover,
    .mobile-quick-create-button:focus-visible,
    .mobile-quick-create-button.is-open {
        transform: scale(1.08);
        box-shadow: 0 10px 24px rgba(50, 121, 109, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.72);
        outline: none;
    }

    .mobile-quick-create-button.is-open i {
        transform: rotate(45deg);
    }

    .mobile-quick-create-button i {
        transition: transform 180ms cubic-bezier(.22, 1, .36, 1);
    }

    .mobile-quick-create-menu {
        position: absolute;
        right: 0;
        bottom: 3.55rem;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.45rem;
        min-width: max-content;
        padding: 0.45rem;
        border: 1px solid rgba(255, 255, 255, 0.78);
        border-radius: 1rem;
        background: rgba(238, 246, 255, 0.9);
        box-shadow: 0 12px 28px rgba(40, 74, 130, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(18px) saturate(135%);
        -webkit-backdrop-filter: blur(18px) saturate(135%);
    }

    .mobile-quick-create-option {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        min-height: 2.25rem;
        padding: 0.45rem 0.7rem;
        border: 0;
        border-radius: 0.7rem;
        background: transparent;
        color: #1f4b45;
        font-size: 0.78rem;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
    }

    .mobile-quick-create-option:hover,
    .mobile-quick-create-option:focus-visible {
        background: rgba(82, 145, 238, 0.16);
        color: #32796d;
        outline: none;
    }
}

/* One measured indicator lives behind the active dock item. */
.lg-menu [data-dock-indicator] {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    border-radius: 99em;
    background-color: color-mix(in srgb, var(--dock-glass) 36%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--glass-border) 60%, transparent),
        inset 2px 1px 0 -1px rgba(255, 255, 255, 0.75),
        inset -1.5px -1px 0 -1px rgba(255, 255, 255, 0.55),
        inset -2px -6px 1px -5px rgba(255, 255, 255, 0.4),
        inset -1px 2px 3px -1px rgba(0, 0, 0, 0.12),
        inset 0 -4px 1px -2px rgba(0, 0, 0, 0.08),
        0 3px 6px rgba(31, 38, 135, 0.08);
    transform: translate3d(0, 0, 0);
    transform-origin: center;
    will-change: transform, width, height;
    transition:
        transform 520ms cubic-bezier(0.4, 0, 0.2, 1),
        width 520ms cubic-bezier(0.4, 0, 0.2, 1),
        height 520ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 120ms ease;
}

.lg-menu [data-dock-indicator].is-visible {
    opacity: 1;
}

/* Liquid-glass surface for the measured indicator. */
.lg-menu [data-dock-indicator] {
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.58) 0%,
            rgba(214, 220, 228, 0.46) 52%,
            rgba(248, 249, 250, 0.58) 100%),
        rgba(210, 217, 225, 0.34);
    -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.06);
    backdrop-filter: blur(22px) saturate(180%) brightness(1.06);
    /* Do not distort the indicator box itself; keep its pill geometry stable. */
    filter: none;
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 rgba(71, 85, 105, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        0 4px 12px rgba(15, 23, 42, 0.18),
        0 0 12px rgba(255, 255, 255, 0.24);
}

/* Bright refraction bands make the active glass readable without moving the
   icon/text layout. */
.lg-menu [data-dock-indicator]::before,
.lg-menu [data-dock-indicator]::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
}
.lg-menu [data-dock-indicator]::before {
    inset: 0;
    border: 0;
    background:
        radial-gradient(circle at 50% 12%,
            rgba(255, 255, 255, 0.82) 0%,
            rgba(255, 255, 255, 0.20) 28%,
            rgba(255, 255, 255, 0) 62%),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0) 46%);
    mix-blend-mode: screen;
    opacity: 0.92;
}
.lg-menu [data-dock-indicator]::after {
    inset: 1px 0 0;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0) 32%),
        linear-gradient(0deg,
            rgba(59, 142, 127, 0.06) 0%,
            rgba(59, 142, 127, 0) 55%);
    opacity: 0.9;
}
[data-theme="dark"] .lg-menu [data-dock-indicator] {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.48);
}

.lg-menu > li > a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 1.25rem;
    position: relative;
    z-index: 1;
    color: var(--glass-text);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    background: transparent;
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lg-menu > li > a:hover {
    color: var(--glass-text);
    background: transparent !important;
    box-shadow: none;
    transform: scale(1.04);
}
[data-theme="dark"] .lg-menu > li > a:hover { color: var(--glass-text); }
.lg-menu > li > a.active {
    color: var(--glass-accent-2) !important;
}
.lg-menu > li > a.active:hover {
    color: var(--glass-accent-2) !important;
    transform: scale(1.04);
}

.lg-menu > li > a .bi {
    display: inline-block;
    transform-origin: center;
    transition: scale 200ms cubic-bezier(0.5, 0, 0, 1);
}
.lg-menu > li > a:hover .bi,
.lg-menu > li > a:focus-visible .bi { scale: 1.2; }
.lg-menu > li > a:hover .bi,
.lg-menu > li > a:focus-visible .bi { color: inherit; }
.lg-menu > li > a.active .bi { scale: 1; }
.lg-menu > li > a.active .bi,
.lg-menu > li > a.active:hover .bi { color: var(--glass-accent-2) !important; }

/* Legacy cards fade in by default.  That animation retriggers on every Turbo
   page swap, so keep cards stable and reserve motion for the dock indicator. */
body.has-dock .card {
    animation: none !important;
}

/* Images embedded in note content must stay within the note card. */
.note-content-full {
    overflow: hidden;
    line-height: 1.6;
}
.note-content-full > p {
    margin: 0 0 0.45rem;
    line-height: 1.45 !important;
}
.note-content-full > p.note-image-line {
    margin: 0.55rem 0 !important;
    line-height: 0;
}
.note-content-full img {
    display: block;
    width: auto !important;
    max-width: min(100%, 560px) !important;
    max-height: 360px;
    height: auto !important;
    object-fit: contain;
    margin: 0.55rem 0;
    padding: 0.25rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    cursor: zoom-in;
}
.note-content-full p.note-image-line img {
    margin: 0 !important;
}
.note-inline-image-preview {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(15, 23, 42, 0.76);
    cursor: zoom-out;
}
.note-inline-image-preview img {
    max-width: 96vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.75rem;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
    cursor: default;
}

/* Note actions live in the note header; timestamps and the old back button
   are intentionally removed from the visible layout. */
.note-view-footer {
    display: none !important;
}

.note-view-actions .btn {
    white-space: nowrap;
}

@media (max-width: 767px) {
    .note-view-header {
        flex-wrap: wrap;
        gap: 0.45rem;
        padding: 0.7rem 0.8rem !important;
    }

    .note-view-header > div:first-child {
        min-width: 0;
        flex: 1 1 100%;
    }

    .note-view-header h3 {
        font-size: 1.2rem;
        overflow-wrap: anywhere;
    }

    .note-view-actions {
        width: 100%;
        justify-content: flex-end;
        gap: 0.3rem !important;
    }

    .note-view-actions .btn,
    .note-view-actions .btn-sm {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0 !important;
        border-radius: 0.65rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
    }

    .note-view-actions .btn i,
    .note-view-actions .btn-sm i {
        margin: 0;
        font-size: 1rem;
    }

    .note-view-actions form {
        display: inline-flex;
    }

    /* Open the note editor in a stable centered position. The generic mobile
       bottom-sheet transform made the first edit open appear to jump below
       the viewport, especially after a previous modal had been dragged. */
    #quickCreateNoteModal.modal.show {
        align-items: center !important;
    }

    #quickCreateNoteModal .modal-dialog,
    #quickCreateNoteModal.modal.fade .modal-dialog,
    #quickCreateNoteModal.modal.show .modal-dialog {
        margin: 1rem auto !important;
        transform: none !important;
        transition: none !important;
    }

    #quickCreateNoteModal .modal-content {
        transform: none !important;
        opacity: 1 !important;
    }
}

.lg-actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    white-space: nowrap;
    gap: 0.5rem;
    margin-left: 0.3rem;
}

.lg-search {
    flex: 0 1 190px;
    width: 190px;
    min-width: 0;
    max-width: 190px;
    height: 42px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(59, 142, 127, 0.18);
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
    font-weight: 500;
    color: var(--glass-text);
}
.lg-search:focus {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 142, 127, 0.12);
}
[data-theme="dark"] .lg-search {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .lg-search::placeholder { color: rgba(229, 231, 235, 0.6); }

.lg-user-btn {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    color: var(--glass-text) !important;
    padding: 0 !important;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
}
.lg-user-btn::after { display: none !important; }
.lg-user-btn .lg-username,
.lg-user-btn > .badge { display: none !important; }
.lg-user-btn > img,
.lg-user-btn > .rounded-circle { flex: 0 0 auto; }
.lg-user-btn:hover { background: rgba(255, 255, 255, 0.75) !important; }
[data-theme="dark"] .lg-user-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
.lg-username { white-space: nowrap; }

/* Dropdown menus inside the dock */
.lg-dock .dropdown-menu {
    margin-top: 0.6rem;
    border-radius: 1rem;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 18px 50px rgba(31, 38, 135, 0.25);
    overflow: hidden;
}
[data-theme="dark"] .lg-dock .dropdown-menu { background: rgba(17, 24, 39, 0.82); }
.lg-dock .dropdown-item { border-radius: 0.6rem; margin: 0.15rem 0.3rem; width: auto; }
.lg-dock .dropdown-item:hover,
.lg-dock .dropdown-item:focus,
.lg-dock .dropdown-item:active {
    background: linear-gradient(135deg, var(--glass-accent-1), var(--glass-accent-2));
    color: #fff;
}

/* Dark mode tint + shine for the dock */
[data-theme="dark"] .lg-dock .liquidGlass-tint { background: rgba(17, 24, 39, 0.5); }
[data-theme="dark"] .lg-dock .liquidGlass-shine {
    box-shadow: inset 1px 1px 1px 0 rgba(255, 255, 255, 0.18),
        inset -1px -1px 1px 0 rgba(255, 255, 255, 0.08);
}

/* Stronger dock glass: blur the page behind it and keep the surface readable. */
.lg-dock .liquidGlass-effect {
    -webkit-backdrop-filter: blur(24px) saturate(112%) contrast(0.96);
    backdrop-filter: blur(24px) saturate(112%) contrast(0.96);
}
.lg-dock .liquidGlass-tint {
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.62),
            rgba(211, 218, 226, 0.54),
            rgba(246, 248, 250, 0.60));
}
[data-theme="dark"] .lg-dock .liquidGlass-tint {
    background: rgba(17, 24, 39, 0.56);
}
.lg-dock-glass {
    background: rgba(219, 225, 232, 0.28);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);
}
[data-theme="dark"] .lg-dock-glass {
    background: rgba(17, 24, 39, 0.12);
}

/* Responsive */
@media (max-width: 1440px) and (min-width: 1101px) {
    .lg-dock { padding: 0.32rem 0.55rem; }
    .lg-dock-inner { gap: 0.15rem; }
    .lg-brand {
        padding: 0.3rem 0.5rem;
        font-size: 0.94rem;
        letter-spacing: 0.15px;
    }
    .lg-menu { gap: 0; }
    .lg-menu > li > a {
        gap: 0.28rem;
        padding: 0.42rem 0.55rem;
        font-size: 0.92rem;
    }
    .lg-actions {
        gap: 0.3rem;
        margin-left: 0.15rem;
    }
    .lg-search { flex-basis: 175px; max-width: 175px; }
}

@media (max-width: 1220px) and (min-width: 769px) {
    .lg-search { display: none; }
    .lg-menu > li > a { padding-inline: 0.48rem; }
}

@media (max-width: 1100px) {
    .lg-search { display: none; }
}
@media (max-width: 768px) {
    body.has-dock {
        padding-top: 0;
        padding-bottom: calc(66px + env(safe-area-inset-bottom));
    }

    body.has-dock > main {
        margin-top: 1rem !important;
        margin-bottom: 0 !important;
    }

    body.has-dock > footer.bg-light,
    body.has-dock #floatingChatWidget {
        display: none !important;
    }

    .lg-dock-nav {
        top: auto;
        right: auto;
        bottom: max(10px, env(safe-area-inset-bottom));
        left: 50%;
        width: calc(100vw - 20px);
        max-width: 430px;
        transform: translateX(-50%);
        z-index: 1050;
    }

    .lg-dock {
        width: 100%;
        max-width: none;
        padding: 0.2rem;
        border-radius: 1.2rem !important;
    }

    .lg-dock-glass,
    .lg-dock-glass > .liquidGlass-effect,
    .lg-dock-glass > .liquidGlass-tint,
    .lg-dock-glass > .liquidGlass-shine {
        border-radius: 1.2rem !important;
    }

    .lg-dock-glass {
        clip-path: inset(0 round 1.2rem);
    }

    .lg-dock-inner,
    .lg-menu {
        width: 100%;
    }

    .lg-brand,
    .lg-actions,
    .lg-menu > li:nth-child(n + 5) {
        display: none !important;
    }

    .lg-menu > li:nth-child(-n + 4) {
        display: block !important;
    }

    /* Keep the four core destinations visible on mobile regardless of any
       extra admin/chat items or DOM ordering changes. */
    .lg-menu > li.dock-primary-item {
        display: block !important;
        min-width: 0;
    }

    .lg-menu > li.dock-mobile-search {
        display: block !important;
        min-width: 0;
    }

    .dock-mobile-search .dock-quick-action {
        width: 100%;
        height: 100%;
        flex-direction: column;
        gap: 0.2rem;
        font-size: 1rem;
    }

    .dock-mobile-search .dock-quick-action span {
        display: inline;
        font-size: 0.72rem;
        font-weight: 600;
    }

    .lg-menu {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.2rem;
    }

    .lg-menu > li {
        min-width: 0;
    }

    .lg-menu > li > a {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        flex-direction: column;
        gap: 0.1rem;
        padding: 0.22rem 0.1rem;
        border-radius: 0.95rem;
        font-size: 0.58rem;
        line-height: 1.05;
        overflow: hidden;
    }

    .lg-menu > li > a .bi {
        font-size: 1rem;
        line-height: 1;
    }

    .lg-menu > li > a:hover,
    .lg-menu > li > a.active:hover {
        transform: none;
    }

    .lg-menu > li > a:hover .bi,
    .lg-menu > li > a:focus-visible .bi {
        scale: 1.08;
    }

    /* Mobile performance profile: retain the glass look with an opaque tint,
       but remove the expensive SVG distortion and fixed backdrop blur that
       repeatedly re-rasterize the full page while scrolling. */
    .lg-dock {
        transition: none !important;
        box-shadow: 0 5px 16px rgba(15, 23, 42, 0.16) !important;
    }

    .lg-dock .liquidGlass-effect {
        filter: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .lg-dock .liquidGlass-tint {
        background: rgba(248, 250, 252, 0.96) !important;
    }

    .lg-dock .liquidGlass-shine {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    }

    .lg-menu [data-dock-indicator] {
        filter: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: linear-gradient(120deg,
            rgba(255, 255, 255, 0.62),
            rgba(226, 232, 240, 0.42)) !important;
        border-width: 1.5px !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            inset 0 -1px 0 rgba(100, 116, 139, 0.28),
            0 4px 12px rgba(72, 82, 94, 0.24) !important;
    }

    .lg-menu > li > a {
        transition: transform 100ms ease !important;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .lg-menu > li > a:active {
        transform: scale(0.96) !important;
    }

    body[data-page="chat"] > main#appMainContent {
        height: calc(100dvh - 66px - env(safe-area-inset-bottom));
        padding: 0;
    }

}