:root, [data-theme="dark"] {
    --bg: #1a1a1a;
    --card: #2d2d2d;
    --text: #e0e0e0;
    --accent: #4a9eff;
    --secondary: #666;
    --danger: #ff4d4d;
    --gold: #ffd700;
    
    --border: #444;
    --border-light: #333;
    --input-bg: #111;
    --hover-bg: #2a2a2a;
    --table-hover: #252525;
    --muted-text: #888;
    --table-header-bg: #1a1a1a;
    --gradient-start: rgba(255, 215, 0, 0.08);
    --gradient-end: rgba(26, 26, 26, 1);
    --search-icon-color: %23888;
}[data-theme="light"] {
    --bg: #f4f4f5;
    --card: #ffffff;
    --text: #111827;
    --accent: #0056b3;
    --secondary: #4b5563;
    --danger: #dc2626;
    --gold: #b48600;
    
    --border: #d1d5db;
    --border-light: #e5e7eb;
    --input-bg: #ffffff;
    --hover-bg: #f3f4f6;
    --table-hover: #f9fafb;
    --muted-text: #6b7280;
    --table-header-bg: #f3f4f6;
    --gradient-start: rgba(180, 134, 0, 0.08);
    --gradient-end: rgba(255, 255, 255, 1);
    --search-icon-color: %236b7280;
}[data-theme="hc"] {
    --bg: #000000;
    --card: #000000;
    --text: #ffffff;
    --accent: #00ffff;
    --secondary: #ffffff;
    --danger: #ff0000;
    --gold: #ffff00;
    
    --border: #ffffff;
    --border-light: #ffffff;
    --input-bg: #000000;
    --hover-bg: #333333;
    --table-hover: #111111;
    --muted-text: #cccccc;
    --table-header-bg: #000000;
    --gradient-start: rgba(0, 0, 0, 0);
    --gradient-end: rgba(0, 0, 0, 1);
    --search-icon-color: %23ffffff;
}

[data-theme="terminal"] {
    --bg: #000000;
    --card: #050505;
    --text: #33ff00;
    --accent: #33ff00; 
    --secondary: #00aa00;
    --danger: #ff3333;
    --gold: #ffcc00;
    
    --border: #33ff00;
    --border-light: #004400;
    --input-bg: #000000;
    --hover-bg: #002200;
    --table-hover: #001a00;
    --muted-text: #00cc00;
    --table-header-bg: #000000;
    --gradient-start: rgba(51, 255, 0, 0.15);
    --gradient-end: rgba(0, 0, 0, 1);
    --search-icon-color: %2333ff00;
}

/* Terminal Theme specific overrides */
[data-theme="terminal"] body, 
[data-theme="terminal"] input, 
[data-theme="terminal"] textarea,[data-theme="terminal"] button {
    font-family: "Courier New", Courier, monospace !important;
}
[data-theme="terminal"] .add-form,
[data-theme="terminal"] .location-box,
[data-theme="terminal"] .nav-search-input,
[data-theme="terminal"] .nav-link,
[data-theme="terminal"] .tag-badge,[data-theme="terminal"] .modal-content,
[data-theme="terminal"] .input-group label.file-upload-btn {
    border-radius: 0 !important;
}
[data-theme="terminal"] .stash-btn {
    color: #000 !important;
    background: #33ff00 !important;
    border-radius: 0;
    text-transform: uppercase;
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background: var(--bg); 
    color: var(--text); 
    margin: 0; 
    padding: 20px; 
    transition: background-color 0.3s, color 0.3s;
}

.container { max-width: 1000px; margin: auto; }

/* --- Header --- */
.header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px; 
}

.api-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
}

/* --- Navigation Bar & Search --- */
.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 10px;
    margin-bottom: 20px;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

.nav-menu {
    display: flex; 
    gap: 5px; 
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.nav-menu::-webkit-scrollbar { display: none; }

.nav-link {
    color: var(--muted-text);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.nav-link:hover {
    background: var(--hover-bg);
    color: var(--text);
}

.nav-link.active {
    background: rgba(74, 158, 255, 0.1);
    color: var(--accent);
}

.nav-search-input {
    padding: 8px 15px 8px 35px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background-color: var(--input-bg);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');
    background-repeat: no-repeat;
    background-position: 12px center;
    color: var(--text);
    font-size: 0.85rem;
    width: 200px;
    transition: width 0.3s, border-color 0.2s;
}

.nav-search-input:focus {
    width: 260px;
    outline: none;
    border-color: var(--accent);
}

/* --- Portfolio Summary --- */
#portfolio-summary {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    border: 1px solid var(--border);
    border-right: 4px solid var(--gold);
    border-left: none;
    padding: 8px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: none;
    justify-content: flex-end;
    align-items: baseline;
    gap: 12px;
}

.summary-title {
    margin: 0;
    color: var(--gold);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1rem;
    font-weight: bold;
}

#total-value-display {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text);
    margin-left: 6px;
}

/* --- Form --- */
.add-form { 
    background: var(--card); 
    padding: 20px; 
    border-radius: 12px; 
    margin-bottom: 40px; 
    border: 1px solid var(--border); 
}

.form-row { display: grid; gap: 15px; margin-bottom: 15px; }
.form-row.mt-15 { margin-top: 15px; }
.row-1 { grid-template-columns: 2fr 1fr 1fr 0.5fr; }
.row-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 15px; }
.row-3 { grid-template-columns: 2fr 1fr; margin-top: 15px; align-items: center; }

.price-stack { display: flex; flex-direction: column; gap: 15px; }
.input-group { display: flex; flex-direction: column; height: 100%; }

.input-group label { 
    font-size: 0.75rem; 
    margin-bottom: 5px; 
    color: var(--secondary); 
    text-transform: uppercase; 
    letter-spacing: 0.05rem; 
}

input, textarea { 
    padding: 10px; 
    border-radius: 4px; 
    border: 1px solid var(--border); 
    background: var(--input-bg); 
    color: var(--text); 
    font-size: 0.9rem; 
    width: 100%; 
    box-sizing: border-box; 
}

textarea { resize: none; height: 100%; min-height: 100px; }

/* Custom File Upload Buttons */
.input-group label.file-upload-btn {
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 12px 15px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: none; /* Overrides the global uppercase label */
    letter-spacing: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    margin: 0;
}

.input-group label.file-upload-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 20px;
}
.checkbox-group input { width: auto; margin: 0; }
.checkbox-group label {
    margin: 0;
    color: var(--muted-text);
    cursor: pointer;
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: normal;
}

.input-error {
    border: 2px solid var(--danger) !important;
    transition: all 0.2s ease-in-out;
}

.submit-area { display: flex; justify-content: flex-end; margin-top: 10px; }
.stash-btn { 
    background: var(--accent); 
    color: #fff; 
    padding: 12px 30px; 
    border: none; 
    border-radius: 6px; 
    font-weight: bold; 
    cursor: pointer; 
}

[data-theme="hc"] .stash-btn {
    border: 2px solid #ffffff;
    color: #000;
}

.delete-btn { 
    background: var(--danger); 
    color: #fff; 
    border: none; 
    padding: 5px 10px; 
    border-radius: 4px; 
    cursor: pointer; 
}
[data-theme="hc"] .delete-btn { border: 2px solid #fff; color: #000; }

/* --- Clickable Tag Cloud --- */
.suggested-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.tag-badge {
    background: var(--hover-bg);
    color: var(--muted-text);
    border: 1px solid var(--border);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tag-badge:hover {
    background: rgba(74, 158, 255, 0.1);
    color: var(--accent);
    border-color: var(--accent);
}

/* --- Table Styles --- */
.location-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.location-table th, .location-table td {
    padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border-light);
}
.location-table th {
    color: var(--secondary); font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.05rem; background: var(--table-header-bg); position: sticky; top: 0;
}

.sortable-col {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
    white-space: nowrap;
}
.sortable-col:hover {
    color: var(--text);
}
.location-table tbody tr:hover { background: var(--table-hover); }
.location-table td { color: var(--text); }

.item-name-cell { font-weight: 500; }
.item-qty-cell { color: var(--muted-text) !important; font-weight: bold; }

/* --- Collapsible Boxes --- */
.location-box {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 8px; margin-bottom: 15px; overflow: hidden;
}

.location-header {
    background: var(--hover-bg); padding: 15px 20px; font-size: 1.1rem;
    font-weight: bold; color: var(--gold); cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid transparent; transition: background 0.2s;
}

.location-header:hover { filter: brightness(1.2); }
.location-header::after {
    content: '▼'; font-size: 0.8rem; color: var(--muted-text); transition: transform 0.3s;
}
.location-box[open] .location-header { border-bottom: 1px solid var(--border); }
.location-box[open] .location-header::after { transform: rotate(180deg); }

.location-contents {
    padding: 15px; max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
}

.location-contents::-webkit-scrollbar { width: 6px; }
.location-contents::-webkit-scrollbar-track { background: var(--input-bg); }
.location-contents::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* --- Settings Modal --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7); display: none;
    justify-content: center; align-items: center; z-index: 1000;
}
.modal-content {
    background: var(--card); padding: 30px; border-radius: 12px;
    border: 1px solid var(--border); width: 90%; max-width: 400px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.theme-btn {
    display: block; width: 100%; padding: 15px; margin-bottom: 10px;
    background: var(--input-bg); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; cursor: pointer; font-size: 1rem; text-align: left;
    transition: all 0.2s; font-weight: bold;
}
.theme-btn:hover { background: var(--hover-bg); border-color: var(--accent); }
.theme-btn.active { border-color: var(--accent); border-width: 2px; }

/* --- Hamburger Dropdown Menu --- */
.dropdown {
    position: relative;
    display: inline-block;
}

.hamburger-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text);
    cursor: pointer;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.hamburger-btn:hover {
    background: var(--hover-bg);
    border-color: var(--border);
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: var(--card);
    min-width: 220px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.7);
    border-radius: 8px;
    border: 1px solid var(--border);
    z-index: 1000;
    margin-top: 8px;
    overflow: hidden;
}

.dropdown-content.show {
    display: flex;
    flex-direction: column;
}

.dropdown-item {
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

.dropdown-item:hover {
    background: var(--hover-bg);
    color: var(--accent);
}

.dropdown-item.text-danger {
    color: var(--danger);
}

.dropdown-item.text-danger:hover {
    color: #fff;
    background: var(--danger);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .row-1, .row-2, .row-3 { grid-template-columns: 1fr; }
    .checkbox-group { justify-content: flex-start; padding-top: 5px; }
    .header > div { flex-direction: column; align-items: flex-start !important; gap: 10px; }
    .nav-wrapper { flex-direction: column; align-items: stretch; }
    .nav-search-input { width: 100%; }
    .nav-search-input:focus { width: 100%; }
    #portfolio-summary { justify-content: flex-start; }
}

/* --- Image Gallery Pop-Out Effect --- */
.gallery-img {
    height: 120px; 
    width: 120px; 
    object-fit: cover; 
    border-radius: 8px; 
    border: 1px solid var(--border); 
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    z-index: 1;
}

.gallery-img:hover {
    transform: scale(2.5); /* Makes it 2.5x bigger! */
    z-index: 100; /* Forces it to pop OVER everything else */
    box-shadow: 0 15px 30px rgba(0,0,0,0.8); /* Deep 3D shadow */
    border-color: var(--accent); /* Highlights the border in blue */
}