:root {
    /* Standard Variables (Notion Light) */
    --notion-bg-default: #FFFFFF;
    --notion-text-default: #37352F;
    /* Notion ships #787774, which lands at 4.14:1 on the surface tone and fails
       WCAG AA. Two shades darker clears 4.5:1 on both --notion-bg-default and
       --notion-surface while reading as the same gray. */
    --notion-text-muted: #70706D;
    --notion-surface: #F7F6F3;
    --notion-border: #E9E9E7;
    --notion-hover: rgba(55, 53, 47, 0.08);
    /* Notion's interactive blue — used for primary buttons, focus and active states.
       The -rgb triple lets Tailwind compose opacity variants (bg-accent/20). */
    --notion-accent: #2383E2;
    --notion-accent-rgb: 35 131 226;
    /* Notion's #2383E2 only reaches 3.88:1 with white text, so filled buttons
       use a darker step. The base accent stays for tints, rings and icons. */
    --notion-accent-solid: #1A72CC;
    --notion-accent-hover: #1668BE;
    --notion-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    
    /* Exact Pill Palette (Light Mode) */
    --color-text-default: #37352F; --color-bg-default: #FFFFFF; --color-pill-default: #FFFFFF;
    --color-text-gray: #9B9A97; --color-bg-gray: #EBECED; --color-pill-gray: #EBECED;
    --color-text-brown: #64473A; --color-bg-brown: #E9E5E3; --color-pill-brown: #E9E5E3;
    --color-text-orange: #D9730D; --color-bg-orange: #FAEBDD; --color-pill-orange: #FAEBDD;
    --color-text-yellow: #DFAB01; --color-bg-yellow: #FBF3DB; --color-pill-yellow: #FBF3DB;
    --color-text-green: #0F7B6C; --color-bg-green: #DDEDEA; --color-pill-green: #DDEDEA;
    --color-text-blue: #0B6E99; --color-bg-blue: #DDEBF1; --color-pill-blue: #DDEBF1;
    --color-text-purple: #6940A5; --color-bg-purple: #EAE4F2; --color-pill-purple: #EAE4F2;
    --color-text-pink: #AD1A72; --color-bg-pink: #F4DFEB; --color-pill-pink: #F4DFEB;
    /* Notion ships #E03E3E (4.26:1 on white). Losing P&L figures are the most
       safety-critical text in the app, so this is nudged to clear AA. */
    --color-text-red: #D22F2F; --color-bg-red: #FBE4E4; --color-pill-red: #FBE4E4;

    /* Isolated Pill Colors (Light Mode) */
    --pill-text-default: #2f2e2d; --pill-bg-default: #FFFFFF;
    --pill-text-gray: #302f2e; --pill-bg-gray: #EBECED;
    --pill-text-brown: #4b3024; --pill-bg-brown: #E9E5E3;
    --pill-text-orange: #4a260e; --pill-bg-orange: #FAEBDD;
    --pill-text-yellow: #4c3420; --pill-bg-yellow: #FBF3DB;
    --pill-text-green: #1e392a; --pill-bg-green: #DDEDEA;
    --pill-text-blue: #203a52; --pill-bg-blue: #DDEBF1;
    --pill-text-purple: #3f2254; --pill-bg-purple: #EAE4F2;
    --pill-text-pink: #4b2538; --pill-bg-pink: #F4DFEB;
    --pill-text-red: #542e40; --pill-bg-red: #FBE4E4;
}

[data-theme="dark"] {
    /* Standard Variables (Notion Dark) */
    --notion-bg-default: #191919;
    --notion-text-default: rgba(255, 255, 255, 0.9);
    --notion-text-muted: rgba(151, 154, 155, 0.95);
    --notion-surface: #202020;
    --notion-border: #2F2F2F;
    --notion-hover: rgba(255, 255, 255, 0.055);
    --notion-accent: #2383E2;
    --notion-accent-rgb: 35 131 226;
    /* Same solid step as light: contrast against white text is a property of
       the button, not the theme, and #2383E2 only reaches 3.88:1. */
    --notion-accent-solid: #1A72CC;
    --notion-accent-hover: #3B8FE8;
    
    /* Exact Pill Palette (Dark Mode) */
    --color-text-default: rgba(255,255,255,0.9); --color-bg-default: #2F3437; --color-pill-default: #2F3437;
    --color-text-gray: rgba(151,154,155,0.95); --color-bg-gray: #454B4E; --color-pill-gray: #454B4E;
    --color-text-brown: #937264; --color-bg-brown: #434040; --color-pill-brown: #434040;
    --color-text-orange: #FFA344; --color-bg-orange: #594A3A; --color-pill-orange: #594A3A;
    --color-text-yellow: #FFDC49; --color-bg-yellow: #59563B; --color-pill-yellow: #59563B;
    --color-text-green: #4DAB9A; --color-bg-green: #2a3731; --color-pill-green: #354C4B;
    --color-text-blue: #529CCA; --color-bg-blue: #364954; --color-pill-blue: #364954;
    --color-text-purple: #9A6DD7; --color-bg-purple: #443F57; --color-pill-purple: #443F57;
    --color-text-pink: #E255A1; --color-bg-pink: #533B4C; --color-pill-pink: #533B4C;
    --color-text-red: #FF7369; --color-bg-red: #3d2a2e; --color-pill-red: #594141;

    /* Isolated Pill Colors (Dark Mode) */
    --pill-text-default: #f0efed; --pill-bg-default: #373736;
    --pill-text-gray: #f0efed; --pill-bg-gray: #686761;
    --pill-text-brown: #f5edea; --pill-bg-brown: #745a47;
    --pill-text-orange: #fcebde; --pill-bg-orange: #8f5937;
    --pill-text-yellow: #f9f3dc; --pill-bg-yellow: #896b31;
    --pill-text-green: #e8f1ec; --pill-bg-green: #406e53;
    --pill-text-blue: #e6f2fc; --pill-bg-blue: #3d6592;
    --pill-text-purple: #f3ebf9; --pill-bg-purple: #6e5482;
    --pill-text-pink: #fae9f1; --pill-bg-pink: #824f67;
    --pill-text-red: #fce9e7; --pill-bg-red: #9b5049; /* darkened to clear 4.5:1 */
}

/* Custom Icons using Mask to support theme colors */
.icon-flip-up {
    mask-image: url('https://lh3.googleusercontent.com/d/1erQPWK0ZcNpcQ2TbExL3-DdJlK_ydDrx');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--notion-text-muted);
}
.icon-flip-down {
    mask-image: url('https://lh3.googleusercontent.com/d/1fKPnUaDAGYeOSw_h18M4WxSM4Xn580qB');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--notion-text-muted);
}
.group-hover\/row\:opacity-100 button:hover .icon-flip-up,
.group-hover\/row\:opacity-100 button:hover .icon-flip-down {
    background-color: var(--notion-text-default);
}

/* Tooltip styles */
.tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
}

.tooltip-text {
    visibility: hidden;
    width: 220px;
    background-color: var(--notion-bg-default);
    color: var(--notion-text-default);
    text-align: left;
    border-radius: 6px;
    padding: 10px 12px;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 100%;
    transform: translateY(-50%) translateX(10px);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    border: 1px solid var(--notion-border);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    pointer-events: none;
    white-space: normal;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(-50%) translateX(15px);
}

.tooltip-left .tooltip-text {
    left: auto;
    right: 100%;
    transform: translateY(-50%) translateX(-10px);
}

.tooltip-left:hover .tooltip-text {
    transform: translateY(-50%) translateX(-15px);
}

/* Custom Drag Handle Tooltip */
.group\/drag:hover .group-hover\/drag\:block {
    display: block !important;
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent var(--notion-border) transparent transparent;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(-50%) translateX(15px);
}

/* Left-aligned tooltips for rightmost elements */
.tooltip-container.tooltip-left .tooltip-text {
    left: auto;
    right: 100%;
    transform: translateY(-50%) translateX(-10px);
}

.tooltip-container.tooltip-left .tooltip-text::after {
    right: auto;
    left: 100%;
    border-color: transparent transparent transparent var(--notion-border);
}

.tooltip-container.tooltip-left:hover .tooltip-text {
    transform: translateY(-50%) translateX(-15px);
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--notion-bg-default); }
::-webkit-scrollbar-thumb { background: var(--notion-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--notion-text-muted); }

.loader {
    display: inline-block;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 2px solid var(--notion-border);
    border-bottom-color: var(--notion-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Trade Log row hover effect */
.trade-row:hover td { background-color: var(--notion-surface); }

/* Rich Text Editor Styles */
.rich-editor-content[contenteditable]:empty::before {
    content: attr(data-placeholder);
    color: var(--notion-text-muted);
    cursor: text;
}
.rich-editor-content ul { list-style-type: disc; padding-left: 1.5rem; margin-top: 0.25rem; margin-bottom: 0.25rem; }
.rich-editor-content ol { list-style-type: decimal; padding-left: 1.5rem; margin-top: 0.25rem; margin-bottom: 0.25rem; }
.rich-editor-content b, .rich-editor-content strong { font-weight: 600; color: var(--notion-text-default); }
.rich-editor-content i, .rich-editor-content em { font-style: italic; }
.rich-editor-content u { text-decoration: underline; }
.rich-editor-content strike, .rich-editor-content s { text-decoration: line-through; color: var(--notion-text-muted); }
.rich-editor-content a { color: var(--notion-text-muted); text-decoration: underline; cursor: pointer; }
.rich-editor-content img, .rich-editor-content iframe { max-width: 100%; border-radius: 4px; margin-top: 0.75rem; margin-bottom: 0.75rem; border: 1px solid var(--notion-border); }
.rich-editor-content [style*="background-color"] { padding: 0.1rem 0.3rem; border-radius: 3px; color: var(--notion-text-default); }

/* Drag and Drop Visual Feedback */
#csv-form.drag-over {
    border-color: var(--notion-text-muted);
    background-color: var(--notion-hover);
    transform: scale(1.01);
}

/* Hide number input arrows */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Cropping Interface */
#crop-box {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    transition: border-radius 0.2s ease;
}

#crop-box div {
    /* No shadow for cleaner look */
}

#aspect-ratio-menu button.active {
    background-color: var(--notion-hover);
    color: var(--notion-accent);
}

/* Loader Animation — see the .loader rule above; kept on tokens so the
   spinner stays visible in dark mode. */
@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.screenshot-item img {
    user-select: none;
    -webkit-user-drag: none;
}
input[type=number] { -moz-appearance: textfield; }

/* Outline removals */
input:focus { outline: none !important; box-shadow: none !important; }

/* SortableJS Styles for Fluid Drag (Zero trace) */
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
.sortable-ghost { opacity: 0 !important; }
.sortable-drag, .sortable-fallback { 
    z-index: 9999 !important;
    background-color: var(--notion-bg-default) !important; 
    border: 1px solid var(--notion-border) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
    cursor: grabbing !important;
    opacity: 1 !important;
    border-radius: 4px !important;
    pointer-events: none;
}

/* Trade Log Column Dragging */
#tradelog-header-row th.cursor-grab {
    cursor: grab;
}
#tradelog-header-row th.cursor-grab:active {
    cursor: grabbing;
}
#tradelog-header-row .sortable-ghost {
    opacity: 0.3 !important;
    background-color: var(--notion-hover) !important;
}
#tradelog-header-row .sortable-drag {
    cursor: grabbing !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
}

@media (max-width: 768px) {
    #screenshot-panels-container {
        grid-template-columns: 1fr !important;
    }
}

/* Notion Prose Markdown Rules */
.notion-prose * {
    margin: 0;
    padding: 0;
}
.notion-prose p {
    margin-bottom: 0.5rem;
}
.notion-prose p:last-child {
    margin-bottom: 0;
}
.notion-prose h1 {
    font-size: 1.875rem; /* 3xl */
    line-height: 2.25rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.notion-prose h2 {
    font-size: 1.5rem; /* 2xl */
    line-height: 2rem;
    font-weight: 700;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}
.notion-prose h3 {
    font-size: 1.25rem; /* xl */
    line-height: 1.75rem;
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.notion-prose ul {
    list-style-type: disc;
    list-style-position: inside;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}
.notion-prose ol {
    list-style-type: decimal;
    list-style-position: inside;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}
.notion-prose blockquote {
    border-left-width: 4px;
    border-color: var(--notion-border);
    padding-left: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-style: italic;
    color: var(--notion-text-muted);
}
.notion-prose code {
    background-color: var(--notion-bg-default);
    border: 1px solid var(--notion-border);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-family: monospace;
    color: var(--notion-text-default);
}
.notion-prose pre {
    background-color: var(--notion-surface);
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--notion-border);
}
.notion-prose pre code {
    background-color: transparent;
    border: none;
    padding: 0;
    color: inherit;
}

/* Hide scrollbar for clean inputs */
textarea {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
textarea::-webkit-scrollbar {
    display: none;
}

/* Hover triggers */
.hover-trigger .hover-target {
    display: none;
}
.hover-trigger:hover .hover-target {
    display: inline-flex;
}

/* --- Boot loader ---------------------------------------------------------
 *
 * Shown while auth and the initial data load resolve. Deliberately the brand
 * mark rather than a generic spinner, so the wait reads as part of the app.
 *
 * The fade-in is delayed ~180ms: a warm cache resolves faster than that, and
 * a loader that appears and vanishes inside a few frames reads as a glitch.
 * Slow loads still get it almost immediately.
 */
#app-loader {
    animation: ah-loader-in 0.25s ease 0.18s both;
}

#app-loader.is-hiding {
    animation: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

@keyframes ah-loader-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Slow, shallow bob — enough to feel alive, not enough to draw the eye away. */
.ah-loader-mark {
    animation: ah-loader-bob 1.6s ease-in-out infinite;
    opacity: 0.85;
}

@keyframes ah-loader-bob {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-5px) scale(1.04); }
}

.ah-loader-dots span {
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: var(--notion-text-muted);
    display: inline-block;
    animation: ah-loader-dot 1.2s ease-in-out infinite;
}

/* Staggered so the three dots read as a wave rather than a flash. */
.ah-loader-dots span:nth-child(2) { animation-delay: 0.15s; }
.ah-loader-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ah-loader-dot {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    50%      { opacity: 0.9;  transform: translateY(-3px); }
}

/* Motion is decorative here; the loader still communicates state without it. */
@media (prefers-reduced-motion: reduce) {
    #app-loader { animation: none; opacity: 1; }
    .ah-loader-mark { animation: none; }
    .ah-loader-dots span { animation: none; opacity: 0.6; }
}

/* --- Trade panel summary layout -----------------------------------------
 *
 * One column by default (the original layout), two once the panel is wide
 * enough to carry them.
 *
 * A container query, not a media query: the panel is normally 55% of the
 * window but can be toggled fullscreen, so viewport width is a poor proxy for
 * how much room these rows actually have. Browsers without container query
 * support simply keep the single-column layout.
 */
#trade-panel-content {
    container-type: inline-size;
    container-name: tradepanel;
}

.ah-trade-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* Rows keep a 1rem gutter for vertical breathing room; columns get less,
       since each row is a fixed 128px label plus a short value and the two
       columns already read as distinct without the extra space. */
    gap: 1rem 0.75rem;
}

/* 550px: at the common ~1150px window the panel is 626px, which the original
   640px threshold missed by 14px and left single-column on a panel with obvious
   room. 550 still leaves each column ~245px — the 128px label plus room for the
   widest value ("$29,741.50"). */
@container tradepanel (min-width: 550px) {
    .ah-trade-summary {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
    /* The horizontal rule only separates the groups when they are stacked.
       Across two columns it would cut through both. */
    .ah-trade-divider {
        display: none;
    }
}