/* Shared dashboard shell styles. Loaded by every protected page (dashboard,
   settings, billing, editor, apps, etc.). Page-specific styles live in
   their own page or inline.
   -------------------------------------------------------------------------- */

body {
    font-family: 'Inter', sans-serif;
}

/* Subtle thin scrollbars */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
* { scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent; }

/* Save indicator (used in editor) */
.save-indicator {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    transition: all 0.3s;
}
.save-indicator.saving { background: #fef3c7; color: #78716c; }
.save-indicator.saved  { background: #ecfdf5; color: #065f46; }

/* Skeleton loading shimmer */
.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}
@keyframes skeleton-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   Modal — appModal.confirm / .prompt / .alert / .custom.
   Same DOM as the legacy implementation. CSS lives here so it's cached and
   doesn't need to be injected on every modal open.
   ========================================================================== */
.mkm-backdrop {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    opacity: 0; transition: opacity 150ms ease;
}
.mkm-backdrop.mkm-open { opacity: 1; }
.mkm-shell {
    background: #fff; border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    width: 100%; max-width: 420px; max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
    transform: scale(0.96); opacity: 0;
    transition: transform 180ms ease, opacity 180ms ease;
}
.mkm-backdrop.mkm-open .mkm-shell { transform: scale(1); opacity: 1; }
.mkm-header {
    padding: 16px 20px; border-bottom: 1px solid #f1f5f9;
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.mkm-title { flex: 1; font-size: 15px; font-weight: 600; color: #0f172a; line-height: 1.3; }
.mkm-close {
    background: none; border: none; color: #94a3b8; cursor: pointer;
    font-size: 20px; padding: 4px; line-height: 1; border-radius: 6px;
}
.mkm-close:hover { background: #f1f5f9; color: #475569; }
.mkm-body { padding: 20px; overflow-y: auto; flex: 1; color: #334155; font-size: 14px; line-height: 1.55; }
.mkm-body.mkm-body-compact { padding: 16px 20px; }
.mkm-message { white-space: pre-wrap; color: #475569; }
.mkm-footer {
    padding: 12px 20px; border-top: 1px solid #f1f5f9;
    display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0;
}
.mkm-btn {
    padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
    cursor: pointer; border: 1px solid transparent;
    transition: background 150ms, opacity 150ms;
}
.mkm-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.mkm-btn-primary   { background: #0f172a; color: #fff; }
.mkm-btn-primary:hover:not(:disabled)   { background: #1e293b; }
.mkm-btn-danger    { background: #dc2626; color: #fff; }
.mkm-btn-danger:hover:not(:disabled)    { background: #b91c1c; }
.mkm-btn-secondary { background: #fff; color: #475569; border-color: #e2e8f0; }
.mkm-btn-secondary:hover:not(:disabled) { background: #f8fafc; }
.mkm-input {
    width: 100%; margin-top: 10px; padding: 9px 12px;
    border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: 14px; outline: none; color: #0f172a; background: #fff;
    transition: border-color 150ms; font-family: inherit;
}
.mkm-input:focus { border-color: #0f172a; }
.mkm-input::placeholder { color: #94a3b8; }
.mkm-textarea {
    width: 100%; margin-top: 10px; padding: 9px 12px;
    border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: 14px; outline: none; color: #0f172a; background: #fff;
    resize: vertical; min-height: 72px; font-family: inherit;
}
.mkm-textarea:focus { border-color: #0f172a; }
@media (max-width: 480px) {
    .mkm-shell { max-width: 100%; }
    .mkm-header, .mkm-body, .mkm-footer { padding-left: 16px; padding-right: 16px; }
}

/* Brand display font — used for the app logo / wordmark only. */
.brand-name {
    font-family: 'Stack Sans Notch', 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Brand theme — Wanded "magic blue / sapphire wizardry"
   Primary: blue-600 (#2563eb). Header: subtle slate → deep navy → slate.
   ========================================================================== */
:root {
    --brand-primary:        #2563eb;     /* blue-600 */
    --brand-primary-hover:  #1d4ed8;     /* blue-700 */
    --brand-primary-light:  #60a5fa;     /* blue-400 */
    --brand-accent:         #dbeafe;     /* blue-100 */
    --brand-header-bg:      linear-gradient(90deg, #0f172a 0%, #1e3a8a 50%, #0f172a 100%);
}

/* ==========================================================================
   Dashboard shell — left nav (10rem / 160px) + right Mo chat + main content.
   ========================================================================== */
/* Header is fixed (so it stays put on scroll). Push body content down by
   the header's height so nothing renders underneath it. dash-nav and
   dash-chat are fixed-positioned and use top:48px directly — body padding
   doesn't affect them. */
body.dash-shell-active { padding-top: 3rem; }

/* Apps shell sub-bar — sticky beneath the main header on data-shell="apps"
   pages. Provides chrome that's visually distinct from app content. */
body.apps-shell-active #apps-shell-bar { box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04); }
#apps-shell-bar select:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }

.dash-view { transition: margin 0.2s ease; }
body.dash-shell-active .dash-view {
    margin-left: 10rem;     /* 160px — was 208px */
    margin-right: 320px;
}
body.dash-nav-collapsed.dash-shell-active .dash-view { margin-left: 48px; }
body.dash-chat-collapsed.dash-shell-active .dash-view { margin-right: 0; }
body.dash-nav-collapsed.dash-chat-collapsed.dash-shell-active .dash-view {
    margin-left: 48px;
    margin-right: 0;
}
#dash-nav, #dash-chat { transition: width 0.2s ease, transform 0.2s ease; }
/* Note: NO overflow:hidden when collapsed — the toggle handle sticks out
   the right edge and would otherwise be clipped. Hidden labels/badges are
   already hidden via display:none below, so overflow doesn't need to clip. */
body.dash-nav-collapsed #dash-nav { width: 48px; }
body.dash-nav-collapsed #dash-nav .dash-nav-label { display: none; }
body.dash-nav-collapsed #dash-nav .dash-nav-section-label { display: none; }
body.dash-nav-collapsed #dash-nav .dash-nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
body.dash-nav-collapsed #dash-nav .dash-nav-item[style*="padding-left"] { padding-left: 0 !important; }
body.dash-nav-collapsed #dash-nav .dash-nav-item svg { margin: 0; }
body.dash-nav-collapsed #dash-nav .nav-badge-collapsed { display: none; }
body.dash-nav-collapsed #dash-nav .overflow-y-auto { padding: 12px 6px; }
body.dash-nav-collapsed #dash-nav .border-t { padding: 8px 6px; }
body.dash-nav-collapsed .dash-view { margin-left: 48px; }
body.dash-nav-collapsed.dash-chat-collapsed .dash-view { margin-left: 48px; }

/* Faint separator between nav items so the list reads as discrete entries
   rather than a wall of buttons. Last-of-section drops the line. */
#dash-nav .dash-nav-item {
    border-bottom: 1px solid #f1f5f9;
    border-radius: 0 !important;
}
#dash-nav .dash-nav-section-label + .dash-nav-item,
#dash-nav .dash-nav-item:first-child { border-top: 1px solid #f1f5f9; }

/* Collapse toggle — slim tab attached to the right edge of the nav. */
#dash-nav-toggle {
    position: absolute;
    right: -1px;
    top: 13px;
    width: 14px;
    height: 36px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-left: 1px solid #e2e8f0;
    border-radius: 5px 0px 0px 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0px;
    cursor: pointer;
    z-index: 41;
    opacity: 1;
    transition: background 150ms, border-color 150ms;
}
#dash-nav-toggle:hover {
    background: #faf5ff;
    border-color: var(--brand-primary-light);
}
#dash-nav-toggle svg {
    width: 12px; height: 12px;
    color: #64748b;
    transition: transform 0.2s, color 150ms;
    flex-shrink: 0;
}
#dash-nav-toggle:hover svg { color: var(--brand-primary); }
body.dash-nav-collapsed #dash-nav-toggle svg { transform: rotate(180deg); }
body.dash-chat-collapsed #dash-chat { transform: translateX(100%); }

.dash-nav-item.active {
    background: linear-gradient(90deg, #faf5ff 0%, #f5f3ff 100%);
    color: var(--brand-primary);
    font-weight: 500;
    border-left: 2px solid var(--brand-primary);
}

/* Chat-toggle FAB — sparkles + subtle breathing animation. Visible when
   the Mo panel is collapsed. */
#dash-chat-toggle {
    position: fixed;
    right: 16px; bottom: 16px;
    z-index: 41;
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c026d3 100%);
    color: #fff; border: none; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px -2px rgba(124, 58, 237, 0.45),
                0 0 0 0 rgba(192, 38, 211, 0.45);
    animation: dash-fab-pulse 3.2s ease-in-out infinite;
}
#dash-chat-toggle:hover {
    box-shadow: 0 6px 16px -2px rgba(124, 58, 237, 0.6),
                0 0 0 6px rgba(192, 38, 211, 0.15);
    animation-play-state: paused;
}
#dash-chat-toggle svg {
    animation: dash-fab-twinkle 2.4s ease-in-out infinite;
    transform-origin: center;
}
@keyframes dash-fab-pulse {
    0%, 100% { box-shadow: 0 4px 12px -2px rgba(124, 58, 237, 0.45), 0 0 0 0 rgba(192, 38, 211, 0.45); }
    50%      { box-shadow: 0 4px 14px -2px rgba(124, 58, 237, 0.55), 0 0 0 8px rgba(192, 38, 211, 0); }
}
@keyframes dash-fab-twinkle {
    0%, 100% { transform: scale(1) rotate(0deg);    opacity: 1; }
    50%      { transform: scale(1.15) rotate(8deg); opacity: 0.92; }
}
@media (prefers-reduced-motion: reduce) {
    #dash-chat-toggle, #dash-chat-toggle svg { animation: none; }
}
body.dash-chat-collapsed #dash-chat-toggle { display: flex; }
body:not(.dash-shell-active) #dash-chat-toggle { display: none !important; }

/* Mobile responsive */
@media (max-width: 768px) {
    body.dash-shell-active .dash-view { margin-left: 0 !important; margin-right: 0 !important; }
    body.dash-shell-active #dash-nav  { display: none !important; }
    body.dash-shell-active #dash-chat { display: none !important; }
    body.dash-shell-active.dash-nav-open  #dash-nav  { display: flex !important; width: 260px; z-index: 50; }
    body.dash-shell-active.dash-nav-open  #dash-nav .dash-nav-label,
    body.dash-shell-active.dash-nav-open  #dash-nav .dash-nav-section-label { display: block !important; }
    body.dash-shell-active.dash-nav-open  #dash-nav .dash-nav-item {
        justify-content: flex-start !important;
        padding-left: 12px !important; padding-right: 12px !important;
    }
    body.dash-shell-active.dash-nav-open  #dash-nav .overflow-y-auto { padding: 12px 10px !important; }
    body.dash-shell-active.dash-chat-open #dash-chat {
        display: flex !important; width: 100%; z-index: 50; left: 0; right: 0;
    }
    body.dash-nav-collapsed.dash-shell-active .dash-view { margin-left: 0 !important; }
    #dash-nav-toggle { display: none !important; }
    #dash-mobile-nav-btn, #dash-mobile-chat-btn { display: flex !important; }
}
@media (min-width: 769px) {
    #dash-mobile-nav-btn, #dash-mobile-chat-btn { display: none !important; }
}

/* Toast (simpler than the legacy in-page implementation) */
#shell-toast {
    position: fixed; top: 16px; right: 16px;
    z-index: 9998;
    background: #0f172a; color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    max-width: 320px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}
#shell-toast.shown { opacity: 1; transform: translateY(0); }