/* ================================================================= */
/* LAKAN GLOBAL CLASSES                                              */
/* Shared utility classes used across multiple pages and components  */
/* Prefix: lk-                                                       */
/* ================================================================= */

/* ── Page wrapper ── */
.lk-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-family: var(--lk-font-sans);
}

.lk-page ::-webkit-scrollbar { width: 8px; }
.lk-page ::-webkit-scrollbar-track { background: transparent; }
.lk-page ::-webkit-scrollbar-thumb {
    background-color: rgba(62, 109, 102, 0.2);
    border-radius: 20px;
}

/* ── Fade-in animation ── */
@keyframes lk-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lk-animate-in {
    opacity: 0;
    animation: lk-fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lk-animate-delay-1 { animation-delay: 0.05s; }
.lk-animate-delay-2 { animation-delay: 0.12s; }
.lk-animate-delay-3 { animation-delay: 0.2s; }
.lk-animate-delay-4 { animation-delay: 0.28s; }
.lk-animate-delay-5 { animation-delay: 0.36s; }

/* ── Primary action button ── */
.lk-btn-primary {
    padding: 0.625rem 1.5rem;
    background: var(--lk-primary);
    border: none;
    border-radius: 0.5rem;
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(62, 109, 102, 0.3);
    transition: var(--lk-transition);
    white-space: nowrap;
}

.lk-btn-primary:hover {
    background: var(--lk-primary-dark);
    box-shadow: 0 4px 16px rgba(62, 109, 102, 0.4);
    transform: translateY(-1px);
}

.lk-btn-primary .mud-icon-root {
    font-size: 1.125rem !important;
}

.lk-btn-primary[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* ── Actions bar (shared layout) ── */
.lk-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-bottom: -0.5rem;
}

.lk-actions-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.lk-actions-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* ── Toggle button (icon-only action) ── */
.lk-toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 36px;
    border: 1px solid var(--lk-border-color);
    border-radius: var(--lk-border-radius);
    background: var(--lk-surface);
    color: var(--lk-text-muted);
    cursor: pointer;
    margin-right: 0.5rem;
    transition: var(--lk-transition);
}

.lk-toggle-button:hover {
    background: var(--lk-primary-light);
    color: var(--lk-primary);
}

/* --- Page Header: Prefix header-avatar --- */
.lk-header-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--lk-primary-light);
}

.lk-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.lk-header-avatar-initials {
    font-family: var(--lk-font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--lk-primary);
    line-height: 1;
}

/* ── Patient View layout container ── */
.pv2 {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    animation: lk-fadeInSubtle 0.4s ease-out;
}

@keyframes lk-fadeInSubtle {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Backward-compatible alias (used by mobile inline styles) */
@keyframes pv2FadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════
   DARK MODE
   ═══════════════════════════════════ */

.dark-theme .lk-page {
    color: #e2e8f0;
}

.dark-theme .lk-toggle-button {
    color: #a0aec0;
    border-color: #4a5568;
    background: #2d3748;
}

.dark-theme .lk-toggle-button:hover {
    background: rgba(62, 109, 102, 0.15);
    color: #a0d5cc;
}

/* ── Dark mode: ActionsBar scoped overrides ── */
.dark-theme .actions-search {
    background: #1a202c;
    border-color: #4a5568;
}

.dark-theme .actions-search:not(.expanded):hover {
    background: rgba(62, 109, 102, 0.15);
}

.dark-theme .actions-search:not(.expanded):hover .actions-search-trigger {
    color: #a0d5cc;
}

.dark-theme .actions-search:focus-within {
    border-color: var(--lk-primary);
    background: #2d3748;
}

.dark-theme .actions-search-input {
    color: #f7fafc;
}

.dark-theme .actions-view-toggle {
    border-color: #4a5568;
    background: #2d3748;
}

.dark-theme .actions-view-toggle-btn {
    color: #a0aec0;
}

.dark-theme .actions-view-toggle-btn:not(:last-child) {
    border-right-color: #4a5568;
}

.dark-theme .actions-view-toggle-btn:hover {
    background: rgba(62, 109, 102, 0.15);
    color: #a0d5cc;
}

.dark-theme .actions-view-toggle-btn.active {
    background: var(--lk-primary);
    color: white;
}

.dark-theme .actions-search-clear {
    color: #718096;
}

.dark-theme .actions-search-clear:hover {
    color: #e2e8f0;
}

.dark-theme .pv2 {
    --lk-surface: #1e2a2f;
    --lk-background: #151e22;
    --lk-border-color: rgba(255, 255, 255, 0.08);
    --lk-text: #f7fafc;
    --lk-text-muted: #a0aec0;
}

/* ═══════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════ */

@media (max-width: 640px) {
    .lk-page {
        padding: 1rem;
        gap: 1rem;
    }

    .pv2 {
        padding: 1rem 1rem 2rem;
    }
}

/* ── LkActionsMenu (compact reusable) ── */

.lk-actions-menu-popover {
    border-radius: var(--lk-border-radius) !important;
    border: 1px solid var(--lk-border-color) !important;
    background: var(--lk-surface);
    overflow: hidden;
    animation: zenDropIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 170px;
}

.lk-actions-menu-popover .mud-list-item {
    padding: 0.15rem 0.4rem !important;
    min-height: unset !important;
}

.lk-actions-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0;
    font-family: var(--lk-font-sans);
    font-size: 0.8125rem;
}

.lk-actions-icon {
    width: 26px;
    height: 26px;
    border-radius: var(--mud-xs-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lk-actions-icon.primary { background: var(--lk-primary-light); color: var(--lk-primary); }
.lk-actions-icon.primary .mud-icon-root { color: var(--lk-primary) !important; }
.lk-actions-icon.indigo { background: var(--lk-tertiary-light); color: var(--lk-tertiary); }
.lk-actions-icon.indigo .mud-icon-root { color: var(--lk-tertiary) !important; }
.lk-actions-icon.gold { background: var(--lk-secondary-light); color: var(--lk-secondary); }
.lk-actions-icon.gold .mud-icon-root { color: var(--lk-secondary) !important; }
.lk-actions-icon.danger { background: var(--lk-danger-color-background); color: var(--lk-icon-destructive); }
.lk-actions-icon.danger .mud-icon-root { color: var(--lk-icon-destructive) !important; }

.lk-actions-text {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--lk-text);
}