/* ==========================================================
   1. GLOBAL SYSTEM DESIGN TOKENS
   ========================================================== */
:root {
    --bg-color: #f2f2f7;
    --card-bg: #ffffff;
    --accent-color: #007aff;
    --success-color: #34c759;
    --danger-color: #e74c3c;
    --text-main: #1c1c1e;
    --text-sub: #8e8e93;
    --border-color: #e5e5ea;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
}

html {
    width: 100%;
    height: 100%;
}

body { 
    background-color: var(--bg-color); 
    color: var(--text-main); 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%; /* Prevents iOS text scaling bug */
}

.mobile-viewport { 
    width: 100% !important; 
    max-width: 400px; 
    margin: 0 auto;
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    min-height: 100vh; 
    padding-bottom: 20px; 
}

/* ==========================================================
   2. HEADER & NAVIGATION
   ========================================================== */
.header { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    margin-bottom: 6px; 
    text-align: center; 
}

.header-logo-box { padding: 6px 0 4px 0; }
.logo-main { font-size: 30px; font-weight: 900; letter-spacing: 2px; color: var(--text-main); line-height: 1; }
.logo-sub { font-size: 10px; font-weight: 700; letter-spacing: 3.5px; color: var(--text-sub); margin-top: 2px; text-transform: uppercase; }

.nav-menu { display: flex; gap: 8px; background: #e5e5ea60; padding: 4px; border-radius: 10px; }
.nav-link { flex: 1; text-align: center; background: transparent; color: var(--text-main); padding: 10px 8px; border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 600; transition: all 0.2s; }
.nav-link:hover { background: var(--card-bg); box-shadow: 0 2px 4px rgba(0,0,0,0.04); }
.nav-link.primary { background: var(--accent-color); color: white; }

/* ==========================================================
   3. CARDS & PERCENTAGE LABELS
   ========================================================== */
.stock-card, .form-card { 
    background: var(--card-bg); 
    border-radius: 0px; 
    padding: 18px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); 
    border: 1px solid var(--border-color); 
    display: flex; 
    flex-direction: column; 
}

.stock-card { gap: 5px; }
.form-card { padding: 24px; border-radius: 20px; }

.card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.symbol { font-size: 18px; font-weight: 700; }
.company-name { font-size: 16px; color: var(--text-sub); margin-top: 2px; }
.price-box { text-align: right; }
.current-price { font-size: 18px; font-weight: 600; }

.percentage { font-size: 16px; font-weight: 600; margin-top: 2px; }
.percentage.gain { color: var(--success-color) !important; }
.percentage.loss { color: var(--danger-color) !important; }
.percentage.neutral { color: var(--text-sub) !important; }

/* Smart SVG Chart Line Dynamic Matching */
.stock-card svg polyline, .stock-card svg circle { stroke: var(--success-color); fill: none; }
.stock-card svg circle { fill: var(--success-color); }
.stock-card:has(.percentage.loss) svg polyline, .stock-card:has(.percentage.loss) svg circle { stroke: var(--danger-color); }
.stock-card:has(.percentage.loss) svg circle { fill: var(--danger-color); }

.card-details { font-size: 16px; border-top: 1px solid #f2f2f7; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; color: var(--text-sub); }

.btn-delete {
    background: none;
    border: 1px solid #ff3b30;
    color: #ff3b30;
    font-size: 13px; 
    padding: 4px 10px; 
    border-radius: 6px; 
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.btn-delete:hover { background: #ff3b30; color: #ffffff; }

.btn-action { 
    font-size: 13px; 
    padding: 4px 10px; 
    border-radius: 6px; 
    text-decoration: none; 
    cursor: pointer; 
    display: inline-block; 
    color: #fff; 
    border: 1px solid transparent; 
}
.btn-buy { background: #34c759; }
.btn-sell { background: #ff9500; }

/* ==========================================================
   4. STATUS BADGES, FORMS & BUTTONS
   ========================================================== */
/* Updated Badge Style: Rectangular with Outline */
/* Updated Badge Style: Matching button height and presence */
.badge { 
    font-weight: 700;           /* Increased weight to match buttons */
    padding: 5px 10px;         /* Increased vertical padding to match buttons */
    border-radius: 6px; 
    font-size: 13px; 
    text-transform: uppercase; 
    border: 1px solid currentColor; 
    background: transparent;
    display: inline-block;      /* Ensures padding calculates correctly */
    line-height: 1.2;           /* Forces consistent height */
}

/* Badge Colors */
.badge.watched { 
    background-color: rgba(13, 71, 161, 0.1); 
    border-color: #0d47a1; 
    color: #0d47a1; 
    font-weight: 700;
}
.badge.bought { 
    background-color: rgba(40, 167, 69, 0.2); 
    border-color: #28a745; 
    color: #1e7e34; 
    font-weight: 700;
}
.badge.sold { 
    background-color: rgba(202, 44, 32, 0.1); 
    border-color: #ca2c20; 
    color: #ca2c20; 
    font-weight: 700;
}
.badge.re-opened { 
    background-color: rgba(74, 20, 140, 0.1); 
    border-color: #4a148c; 
    color: #4a148c; 
    font-weight: 700;
}

.form-group { margin-bottom: 16px; display: flex; flex-direction: column; }
.form-group label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-sub); margin-bottom: 6px; }
.form-group input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--border-color); background: #f9f9fc; font-size: 15px; }

.btn-primary { width: 100%; background: var(--accent-color); color: #ffffff; padding: 14px; border-radius: 12px; font-size: 16px; font-weight: 600; border: none; }

/* ==========================================================
   5. FLOATING ACTION BUTTON
   ========================================================== */
.btn-refresh { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    background-color: var(--accent-color); 
    color: white; 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); 
    text-decoration: none; 
    font-size: 24px; 
    z-index: 1000; 
}
.btn-refresh:active { transform: scale(0.9); }

.fab-container {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}

.fab-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border: none;
    cursor: pointer;
    font-size: 20px;
}

.fab-refresh { background-color: #007bff; color: white; } /* Blue for Hard Refresh */
.fab-update  { background-color: #34c759; color: white; } /* Green for Price Update */
.fab-add     { background-color: #ff9500; color: white; } /* Orange for Add */

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.refreshing { animation: spin 1s linear infinite; }

.card-alert-green { 
    background-color: #f1fff4 !important; 
    border: 2px solid #34c759 !important; 
}
.card-alert-red   { 
    background-color: #fff1f1 !important; 
    border: 2px solid #ff3b30 !important; 
}
/* Ensure smooth transition for color changes */
.stock-card { transition: background-color 0.3s ease; }