/* static/css/style.css */

/* --- Import Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans+JP&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* Define CSS Variables (Custom Properties) */
:root {
    /* Colors */
    --color-background: #121212; 
    --color-surface: #1e1e1e;    
    --color-surface-variant: #2c2c2c; 
    --color-text: #e0e0e0;       
    --color-text-muted: #9e9e9e; 
    --color-border: #424242;     
    --color-border-light: #535353; 
    
    --color-primary: #bb86fc;    
    --color-primary-dark: #9e54fc;
    --color-primary-darker: #7f39fb;
    --color-secondary-background: var(--color-surface-variant); 
    --color-section-background: var(--color-surface); 

    /* --- Japanese Color Convention --- */
    --color-profit-text: #f44336; /* Red for Profit/Gain */
    --color-loss-text: #4caf50;   /* Green for Loss */
    --color-error-text-orig: var(--color-profit-text); 
    --color-success-text-orig: var(--color-loss-text); 
    /* --- End Japanese Color Convention --- */

    --color-long-term-border: #f57c00; 
    --color-long-term-badge-bg: var(--color-long-term-border);
    --color-long-term-badge-text: #ffffff; 
    --color-trading-badge-bg: #546e7a; 
    --color-trading-badge-text: #ffffff;
    --color-closed-badge-bg: #616161; 
    --color-closed-badge-text: #ffffff;
    --color-watchlist-border: #03a9f4; /* Light Blue for Watchlist */
    --color-watchlist-badge-bg: var(--color-watchlist-border);
    --color-watchlist-badge-text: #ffffff;
    
    --color-button-disabled-bg: #424242;
    --color-button-disabled-border: #535353;
    --color-selected-border: var(--color-primary);
    --color-selected-bg: rgba(187, 134, 252, 0.12); 
    
    --color-overlay-bg: rgba(0, 0, 0, 0.75); 
    --color-overlay-text: #ffffff;
    
    --color-error-bg: rgba(244, 67, 54, 0.2);
    --color-error-border: var(--color-profit-text);

    /* Dark Theme Chart Variables */
    --color-chart-dark-bg: #1e1e1e; 
    --color-chart-dark-bg-alt: #2c2c2c; 
    --color-chart-dark-text: var(--color-text); 
    --color-chart-dark-text-muted: var(--color-text-muted); 
    --color-chart-dark-border: var(--color-border); 
    --color-chart-dark-grid: var(--color-border);   
    --color-chart-ma-line-dark: #ffa726; 
    --color-chart-current-price-line: #64b5f6; 
    --color-chart-crosshair-dark: #9e9e9e; 
    --color-chart-target-gain-bg: rgba(244, 67, 54, 0.15);  
    --color-chart-target-loss-bg: rgba(76, 175, 80, 0.15);  


    /* Spacing */
    --space-unit: 8px;
    --space-xxs: calc(var(--space-unit) * 0.25); /* 2px */
    --space-xs: calc(var(--space-unit) * 0.5);  /* 4px */
    --space-sm: var(--space-unit);   /* 8px */
    --space-md: calc(var(--space-unit) * 1.5);  /* 12px */
    --space-lg: calc(var(--space-unit) * 2);  /* 16px */
    --space-xl: calc(var(--space-unit) * 3);  /* 24px */
    --space-xxl: calc(var(--space-unit) * 4); /* 32px */


    /* Borders & Shadows */
    --border-radius-sm: 4px; 
    --border-radius-md: 8px; 
    --border-radius-lg: 12px; 
    --border-radius-pill: 16px; 
    --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0,0,0,0.22);
    --box-shadow-md: 0 3px 4px rgba(0,0,0,0.3), 0 3px 3px rgba(0,0,0,0.22);
    --box-shadow-selected: 0 0 0 2px var(--color-primary); 

    /* Fonts */
    --font-family-sans: "IBM Plex Sans JP", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-mono: "IBM Plex Mono", Consolas, Menlo, Monaco, "Courier New", monospace;
    --font-family-condensed: "IBM Plex Sans Condensed", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --font-size-base: 16px; 
    --font-size-display: 2rem;    /* 32px - For very important values like P/L */
    --font-size-headline: 1.5rem; /* 24px - For main titles like company name */
    --font-size-title: 1.125rem;  /* 18px - For sub-titles or key figures */
    --font-size-body: 1rem;       /* 16px - Default body text */
    --font-size-label: 0.875rem;  /* 14px - For labels or less important text */
    --font-size-caption: 0.75rem; /* 12px - For very small text, like ticker or details */
    
    --line-height-base: 1.5; 
    --line-height-tight: 1.2;
    --line-height-normal: 1.4; 

    /* Z-indexes */
    --z-index-dialog-backdrop: 1000; 
    --z-index-dialog: 1010;          
}

/* Basic Reset & Font */
body {
    font-family: var(--font-family-sans);
    margin: 0;
    padding: 0;
    line-height: var(--line-height-base);
    background-color: var(--color-background);
    color: var(--color-text);
    font-size: var(--font-size-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; 
}

/* --- Dashboard Layout --- */
.dashboard-layout { 
    padding: var(--space-lg); 
}

.status-report-section,
.position-section {
    margin-bottom: var(--space-xl); 
}
.position-section:last-child { 
    margin-bottom: 0;
}

.section-header {
    font-family: var(--font-family-condensed); 
    font-size: var(--font-size-headline); 
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg); 
    padding-bottom: var(--space-md); 
    border-bottom: 1px solid var(--color-border);
    font-weight: 500; 
    letter-spacing: 0.025em;
}


.error-message { 
    color: var(--color-error-text-orig); 
    padding: var(--space-md);
    text-align: center;
}


/* --- Status Report Card --- */
.status-report-panel {
    display: flex; 
    flex-direction: column; 
    background-color: var(--color-surface);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg); 
    border: 1px solid var(--color-border);
    box-shadow: var(--box-shadow-sm);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
    gap: var(--space-lg); 
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs); 
}

.stat-label {
    font-family: var(--font-family-condensed);
    font-size: var(--font-size-label); 
    color: var(--color-text-muted);
}

.stat-value {
    font-family: var(--font-family-mono); 
    font-size: var(--font-size-title); 
    font-weight: 500; 
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.stat-value.gain { color: var(--color-profit-text); } 
.stat-value.loss { color: var(--color-loss-text); }   
.stat-value.neutral { color: var(--color-text-muted); }


/* --- Position Cards Area --- */
.data-area { /* Renamed from positions-area to be more generic */
    margin-top: var(--space-xl); 
}

/* Container for position cards within each section */
.positions-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: var(--space-lg); 
    box-sizing: border-box; 
    width: 100%; 
}


/* Card style */
.position-panel {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md); 
    box-shadow: var(--box-shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out, transform 0.15s ease-in-out, border-color 0.2s ease-in-out, opacity 0.3s ease-out;
}

.position-panel.long-term {
    border-left: 5px solid var(--color-long-term-border); 
}
.position-panel.closed {
    opacity: 0.6; 
    border-left: 5px solid var(--color-closed-badge-bg); 
}
.position-panel.closed:hover {
    opacity: 0.75; 
}
/* Style for watchlist cards */
.position-panel.watchlist {
    border-left: 5px solid var(--color-watchlist-border);
    /* opacity: 0.9; Optional: slightly different opacity for watchlist */
}


.position-panel.clickable {
    cursor: pointer;
}

.position-panel.clickable:hover,
.position-panel.clickable:focus-within { 
    border-color: var(--color-primary);
    box-shadow: var(--box-shadow-md); 
    transform: translateY(-4px); 
    outline: none; 
}

.position-panel.long-term.clickable:hover,
.position-panel.long-term.clickable:focus-within {
     border-left-color: var(--color-long-term-border); 
}
.position-panel.closed.clickable:hover,
.position-panel.closed.clickable:focus-within {
     border-left-color: var(--color-closed-badge-bg); 
     opacity: 0.75;
}
.position-panel.watchlist.clickable:hover,
.position-panel.watchlist.clickable:focus-within {
     border-left-color: var(--color-watchlist-border);
}


.position-panel.clickable:focus-visible { 
    outline: 2px solid var(--color-primary); 
    outline-offset: 2px; 
}


/* Card header */
.position-panel header {
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    padding: var(--space-md); 
    border-bottom: 1px solid var(--color-border); 
}

.position-panel header .header-content {
    flex-grow: 1; 
}


.position-panel header .company-name {
    font-family: "IBM Plex Sans JP", "IBM Plex Sans", sans-serif; 
    font-size: var(--font-size-title); 
    font-weight: 500; 
    color: var(--color-text);
    margin: 0 0 var(--space-xs) 0; 
    line-height: var(--line-height-tight);
}

.position-panel header .ticker-symbol {
    font-family: var(--font-family-mono); 
    font-size: var(--font-size-label); 
    color: var(--color-text-muted);
    margin: 0;
    line-height: var(--line-height-normal);
}
.position-panel header .category-info {
    font-family: var(--font-family-condensed);
    font-size: var(--font-size-caption);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
    font-style: italic;
}


/* Position Type Badge */
.position-type-badge {
    font-family: var(--font-family-condensed);
    font-size: var(--font-size-caption); 
    font-weight: 500;
    padding: var(--space-xs) var(--space-sm); 
    border-radius: var(--border-radius-pill);
    margin-left: var(--space-sm); 
    flex-shrink: 0; 
    align-self: center; 
}
.position-panel.long-term .position-type-badge {
    background-color: var(--color-long-term-badge-bg);
    color: var(--color-long-term-badge-text);
}
.position-panel.trading .position-type-badge {
    background-color: var(--color-trading-badge-bg);
    color: var(--color-trading-badge-text);
}
.position-panel.closed .position-type-badge {
    background-color: var(--color-closed-badge-bg);
    color: var(--color-closed-badge-text);
}
.position-panel.watchlist .position-type-badge {
    background-color: var(--color-watchlist-badge-bg);
    color: var(--color-watchlist-badge-text);
}


/* Card body */
.position-panel .card-body {
    flex: 1;
    padding: var(--space-md); 
    display: flex;
    flex-direction: column;
    gap: var(--space-sm); 
}

.position-panel .card-body p { 
    margin: 0; 
    font-size: var(--font-size-label); 
    line-height: var(--line-height-normal);
    color: var(--color-text-muted); 
}
.position-panel .card-body p strong { 
    color: var(--color-text);
    font-weight: 500;
}


/* --- Visual Hierarchy Sections --- */
.main-metrics {
    margin-bottom: var(--space-md);
    text-align: center; 
}
.position-panel .gain-loss-value {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-display); 
    font-weight: 700; 
    margin-bottom: 0; 
    line-height: 1;
}
.position-panel .gain-loss-percent {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-title); 
    font-weight: 500;
    margin-top: var(--space-xxs);
    margin-bottom: var(--space-md); 
}

.gauge-container {
    width: 100%;
    height: 10px; 
    background-color: var(--color-surface-variant); 
    border-radius: var(--border-radius-pill);
    overflow: hidden; 
    margin-top: var(--space-xs); 
    margin-bottom: var(--space-lg); 
}

.gauge-fill {
    height: 100%;
    border-radius: var(--border-radius-pill);
    transition: width 0.3s ease-out, background-color 0.3s ease-out;
    width: 0%; 
}

.key-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-md);
}
.key-figures p { 
    font-size: var(--font-size-body); 
    color: var(--color-text); 
    font-weight: 500;
}
.key-figures p .label-prefix { 
    font-family: "IBM Plex Sans JP", "IBM Plex Sans", sans-serif;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-right: var(--space-xs);
}
.key-figures p strong {
    font-family: var(--font-family-mono);
    font-weight: 500; 
}


.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: var(--space-sm) var(--space-md);
}

.extra-info-item { 
    font-size: var(--font-size-caption); 
    color: var(--color-text-muted);
    padding-top: 0;
    border-top: none; 
}
.extra-info-item p {
    margin: var(--space-xxs) 0; 
    font-size: inherit; 
    line-height: var(--line-height-tight);
}
.countdown-days {
    font-weight: 600;
    margin-left: var(--space-xs); 
    display: inline; 
}

/* External Links Styling */
.external-links {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border-light);
}
.external-link {
    font-family: var(--font-family-condensed);
    font-size: var(--font-size-label);
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
.external-link:hover,
.external-link:focus {
    color: var(--color-primary-dark);
    text-decoration: underline;
}


/* --- Dark Theme Dialog Styles --- */
.detail-dialog {
    margin: auto;
    width: clamp(320px, 90vw, 800px); 
    max-height: 90vh; 
    height: auto; 
    padding: 0;
    border: 1px solid var(--color-chart-dark-border);
    border-radius: var(--border-radius-lg); 
    box-shadow: 0 8px 24px rgba(0,0,0,0.3); 
    background-color: var(--color-chart-dark-bg);
    color: var(--color-chart-dark-text);
    z-index: var(--z-index-dialog); 
}

.detail-dialog[open] {
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; 
    overflow-x: hidden; 
}

.detail-dialog::backdrop {
    background: var(--color-overlay-bg);
    z-index: var(--z-index-dialog-backdrop); 
}

.detail-dialog header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-chart-dark-border);
    background-color: var(--color-chart-dark-bg);
    color: var(--color-chart-dark-text);
    margin-bottom: 0;
    flex-shrink: 0; 
    display: flex; 
    justify-content: space-between;
    align-items: center;
}
.detail-dialog header h2 {
    font-family: "IBM Plex Sans JP", "IBM Plex Sans", sans-serif;
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--color-chart-dark-text);
    flex-grow: 1; 
    padding-right: var(--space-md); 
}

.detail-dialog .close-button {
    position: static; 
    color: var(--color-chart-dark-text-muted);
    background: transparent;
    border: none;
    font-size: 1.8rem; 
    padding: 0; 
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
    flex-shrink: 0;
}
.detail-dialog .close-button:hover {
    color: var(--color-chart-dark-text);
}

/* Toolbar Styles */
.chart-toolbar {
    display: flex;
    flex-wrap: wrap; 
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background-color: var(--color-chart-dark-bg); 
    border-bottom: 1px solid var(--color-chart-dark-border);
    flex-shrink: 0; 
}

.toolbar-button {
    font-family: var(--font-family-condensed);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-chart-dark-text-muted);
    background-color: var(--color-chart-dark-bg-alt);
    border: 1px solid var(--color-chart-dark-border);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.toolbar-button:hover {
    background-color: var(--color-chart-dark-border);
    color: var(--color-chart-dark-text);
}

.toolbar-button.active {
    background-color: var(--color-chart-current-price-line); 
    color: var(--color-chart-dark-bg); 
    border-color: var(--color-chart-current-price-line);
    font-weight: 600;
}

.toolbar-button.reset-button {
    margin-left: auto; 
}


.detail-dialog #messageArea {
    padding: var(--space-lg); 
    margin-top: 0;
    color: var(--color-chart-dark-text);
    text-align: center;
    flex-shrink: 0; 
}
.detail-dialog #messageArea.error { 
    color: var(--color-error-text-orig); 
    background-color: rgba(220, 53, 69, 0.1); 
    border-radius: var(--border-radius-sm);
}


/* Dialog chart container - Dark Theme */
.dialog-chart-container { 
    flex-grow: 1; 
    display: flex;
    flex-direction: column; 
    overflow: hidden; 
    min-height: 250px; 
}

.dialog-chart {
    flex-grow: 1; 
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-md);
    box-sizing: border-box;
    background-color: var(--color-chart-dark-bg-alt);
}

.dialog-chart svg {
    width: 100%;
    height: 100%; 
    display: block;
    user-select: none;
}


/* Crosshair - Dark Theme */
.crosshair-line {
    stroke: var(--color-chart-crosshair-dark);
    stroke-width: 0.5px;
    stroke-dasharray: 3, 3;
    pointer-events: none;
}

/* D3 Chart Styles - Dark Theme */
.axis path,
.axis line {
    fill: none;
    stroke: var(--color-chart-dark-text-muted);
    shape-rendering: crispEdges;
}

.axis text {
    font-family: var(--font-family-mono); 
    font-size: var(--font-size-xs);
    fill: var(--color-chart-dark-text-muted);
}

.grid-line {
    stroke: var(--color-chart-dark-grid);
    stroke-opacity: 0.1; 
    shape-rendering: crispEdges;
}

/* Target Price Regions Styling (Japanese Convention) */
.target-region {
    pointer-events: none; 
}
.target-gain-region {
    fill: var(--color-chart-target-gain-bg); 
}
.target-loss-region {
    fill: var(--color-chart-target-loss-bg); 
}


/* Candlestick Colors (Japanese Convention) - Dark Theme */
.candlestick.up {
    /* fill: var(--color-profit-text); */ 
    /* stroke: var(--color-profit-text); */
}

.candlestick.down {
    /* fill: var(--color-loss-text); */ 
    /* stroke: var(--color-loss-text); */
}

.candlestick-wick {
    stroke-width: 1px;
}

/* Moving Average Line Style - Dark Theme */
.ma-line { 
    fill: none;
    stroke: var(--color-chart-ma-line-dark); 
    stroke-width: 1.5px;
}

/* Price Indicator Lines and Labels (Acquisition & Current) */
.price-indicator .price-line {
    stroke-width: 1.5px;
    stroke-dasharray: "4, 4";
}

.price-indicator .acquisition-price-line {
    stroke: var(--color-chart-ma-line-dark); 
}
.price-indicator .current-price-line {
    stroke: var(--color-chart-current-price-line); 
}

.price-indicator .price-label-bg {
    stroke-width: 1px;
    stroke-opacity: 0.7;
}
.price-indicator .acquisition-price-label-bg {
    fill: var(--color-chart-ma-line-dark);
    stroke: var(--color-chart-ma-line-dark);
}
.price-indicator .current-price-label-bg {
    fill: var(--color-chart-current-price-line);
    stroke: var(--color-chart-current-price-line);
}


.price-indicator .price-label {
    font-family: var(--font-family-mono);
    font-weight: 500;
    fill: var(--color-chart-dark-bg); 
    text-anchor: start; 
}


/* --- STYLES for PositionCard Gain/Loss (Japanese Convention) --- */
.position-panel .gain-loss-value {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-display); 
    font-weight: 700; 
    margin-bottom: var(--space-xxs); 
}
.position-panel .gain-loss-percent {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-title); 
    font-weight: 500; 
    margin-bottom: var(--space-sm); 
}

.position-panel .gain-loss-value.gain,
.position-panel .gain-loss-percent.gain {
    color: var(--color-profit-text); /* Red for Profit */
}

.position-panel .gain-loss-value.loss,
.position-panel .gain-loss-percent.loss {
    color: var(--color-loss-text); /* Green for Loss */
}

.position-panel .gain-loss-value.neutral,
.position-panel .gain-loss-percent.neutral {
    color: var(--color-text-muted);
}

/* --- STYLES for Status Report Card (Japanese Convention) --- */
.status-report-panel {
    display: flex; 
    flex-direction: column; 
    background-color: var(--color-surface);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg); 
    border: 1px solid var(--color-border);
    box-shadow: var(--box-shadow-sm);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
    gap: var(--space-lg); 
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs); 
}

.stat-label {
    font-family: var(--font-family-condensed);
    font-size: var(--font-size-label); 
    color: var(--color-text-muted);
}

.stat-value {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-title); 
    font-weight: 500; 
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.stat-value.gain { color: var(--color-profit-text); } 
.stat-value.loss { color: var(--color-loss-text); }   
.stat-value.neutral { color: var(--color-text-muted); }