@import url('https://fonts.googleapis.com/css2?family=Aclonica&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    --bg-color: #ffffff;
    --card-bg: #f8fafc;
    --text-color: #000000;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --accent-blue: #3b82f6;
    --accent-purple: #8b5cf6;
    --accent-orange: #f97316;
    --code-font: 'Courier New', Courier, monospace;
}

body {
    font-family: "Google Sans", sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
}

/* Header Container */
.header-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    flex-wrap: wrap; 
    gap: 15px;
}

.brand-header {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #000000;
    text-decoration: none;
    letter-spacing: -1px;
}

.brand-header:hover { 
    color: #333; 
}

/* Navigation Links */
.header-nav {
    display: flex;
    gap: 20px;
}

.nav-link {
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    color: #64748b;
    text-decoration: none;
    font-size: 15px;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.nav-link:hover {
    color: #000;
}

.nav-link.active {
    color: #000;
    border-bottom: 2px solid #000;
}

.user-header-controls { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}

.user-status { 
    font-family: 'Lato', sans-serif; 
    color: #64748b; 
    font-size: 14px; 
}

.user-status strong { 
    color: #000; 
}

/* Main Container Layouts */
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-bottom: 20px;
}

/* Header Filter Inputs (Search / Dropdowns) */
.header-filter-input {
    border: 1px solid #cbd5e1;
    background: #fff;
    padding: 6px;
    border-radius: 4px;
    font-family: inherit;
    color: #333;
}
.header-filter-input:focus { border-color: #000; outline: none; }

/* --- CARDS --- */
.card { 
    background-color: var(--card-bg); 
    border-radius: 12px; 
    padding: 20px; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    border: 1px solid #e2e8f0; 
    box-sizing: border-box;
}

.full-height-card { 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    box-sizing: border-box; 
    padding: 0; 
    overflow: hidden; 
}

.card-header-row { 
    padding: 20px 20px 10px 20px; 
    flex-shrink: 0; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid #e2e8f0; 
    flex-wrap: wrap;
    gap: 15px;
}

.card-header-row > div {
    flex-grow: 1; 
    display: flex;
    justify-content: flex-end;
}

h2 { 
    margin: 0; 
    font-family: 'Lato', sans-serif; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-size: 1.2rem; 
    margin-bottom: 15px;
}

.full-height-card h2 { 
    margin-bottom: 0; 
}

h2 > div {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

/* Controls */
.btn { 
    padding: 10px 20px; 
    border: none; 
    border-radius: 6px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: all 0.2s; 
    font-size: 14px; 
    font-family: 'Lato', sans-serif; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
}
.btn:hover { opacity: 0.9; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-black { background-color: #000000; color: white; border: 1px solid #000000; text-decoration: none; }
.btn-black:hover { background-color: #333333; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 4px; }
.btn-outline { background-color: transparent; border: 1px solid #cbd5e1; color: #334155; }
.btn-outline:hover { background-color: #e2e8f0; color: #0f172a; border-color: #94a3b8; }
.btn-logout { background-color: #cbd5e1; color: #334155; text-decoration: none; padding: 6px 15px; font-size: 12px; border-radius: 4px; }
.btn-logout:hover { background-color: #94a3b8; color: white; }
.full-width { width: 100%; }

/* Inputs */
.form-input { 
    width: 100%; 
    padding: 10px; 
    margin: 5px 0 15px 0; 
    border: 1px solid #cbd5e1; 
    border-radius: 6px; 
    box-sizing: border-box; 
    font-family: inherit; 
}
.form-input:focus { border-color: #000; outline: none; }

label { font-size: 12px; font-weight: bold; color: #64748b; text-transform: uppercase; display: block; margin-bottom: 4px; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Notifications */
.notification-area { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; }
.notification-toast { background: #fff; border-left: 4px solid #000; padding: 15px 20px; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 12px; min-width: 250px; animation: slideIn 0.3s ease-out forwards; opacity: 0; transform: translateX(100%); }
.notification-toast.success { border-color: var(--accent-green); }
.notification-toast.error { border-color: var(--accent-red); }
.notification-toast.info { border-color: var(--accent-blue); }
.notification-toast i { font-size: 18px; }
.notification-toast.success i { color: var(--accent-green); }
.notification-toast.error i { color: var(--accent-red); }
.notification-toast.info i { color: var(--accent-blue); }
.notification-msg { font-size: 13px; font-weight: 600; color: #333; }

@keyframes slideIn { to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(10px); } }

/* Action Buttons (Generic icons) */
.btn-icon-only { background: transparent; color: #94a3b8; border: none; cursor: pointer; padding: 5px; }
.btn-icon-only:hover { color: #333;}

.account-email {
    font-weight: bold;
    color: #1e293b;
}

/* Shared Mobile Utilities */
@media (max-width: 900px) {
    body { height: auto; overflow: auto; overflow-x: hidden; padding: 15px 10px; }
    .container { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; max-width: 100%; padding-bottom: 0; }
    .full-height-card { height: auto; min-height: 400px; }
    .brand-header { font-size: 2.2rem; }
}

@media (max-width: 600px) {
    .header-container { flex-direction: column; align-items: center; gap: 15px; text-align: center; }
    .user-header-controls { width: 100%; justify-content: center; }
    .card-header-row { flex-direction: column; align-items: flex-start; }
    .card-header-row > div { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
    .notification-area { left: 20px; right: 20px; }
    .notification-toast { min-width: 0; width: 100%; box-sizing: border-box; }
}

/* --- DARK MODE SETTINGS --- */
body.dark-mode {
    --bg-color: #0f172a;
    --card-bg: #1e293b;
    --text-color: #f8fafc;
}

/* Base Header Overrides */
body.dark-mode .brand-header { color: #f8fafc; }
body.dark-mode .brand-header:hover { color: #cbd5e1; }
body.dark-mode .nav-link { color: #94a3b8; }
body.dark-mode .nav-link:hover, body.dark-mode .nav-link.active { color: #f8fafc; border-bottom-color: #f8fafc; }
body.dark-mode .user-status { color: #94a3b8; }
body.dark-mode .user-status strong { color: #f8fafc; }

/* Cards and Borders */
body.dark-mode .card, body.dark-mode .config-card { border-color: #334155; }
body.dark-mode .header-container, body.dark-mode .card-header-row, body.dark-mode h2 { border-color: #334155; }

/* Buttons */
body.dark-mode .btn-black { background-color: #f8fafc; color: #0f172a; border-color: #f8fafc; }
body.dark-mode .btn-black:hover { background-color: #e2e8f0; }
body.dark-mode .btn-outline { border-color: #475569; color: #cbd5e1; }
body.dark-mode .btn-outline:hover { background-color: #334155; color: #f8fafc; border-color: #64748b; }
body.dark-mode .btn-logout { background-color: #334155; color: #cbd5e1; }
body.dark-mode .btn-logout:hover { background-color: #475569; color: #f8fafc; }

/* Theme Toggle Switch */
.theme-toggle-btn {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 18px;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle-btn:hover { color: #000; }
body.dark-mode .theme-toggle-btn { color: #94a3b8; }
body.dark-mode .theme-toggle-btn:hover { color: #f8fafc; }

/* Inputs */
body.dark-mode .form-input, body.dark-mode select.form-input, body.dark-mode .table-input, body.dark-mode .header-filter-input { 
    background-color: #0f172a !important; border-color: #334155 !important; color: #f8fafc !important; 
}
body.dark-mode .form-input:focus, body.dark-mode .table-input:focus, body.dark-mode .header-filter-input:focus { border-color: #64748b !important; outline: none; }
body.dark-mode .readonly-input { background-color: #334155 !important; color: #94a3b8 !important; border-color: #475569 !important; }
body.dark-mode .table-input:hover { background-color: #1e293b !important; }

/* Dropdown styling for dark mode (replaces black arrow with light-grey arrow) */
body.dark-mode select.form-input, body.dark-mode select.table-input, body.dark-mode select.header-filter-input {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23cbd5e1%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
}

/* Placeholder text color for dark mode */
body.dark-mode ::placeholder {
    color: #8190a5; /* A lighter gray that's readable but not distracting */
    opacity: 1; /* Override Firefox's default opacity */
}

/* Tables */
body.dark-mode table th { background-color: #1e293b !important; color: #cbd5e1 !important; border-bottom-color: #334155 !important; }
body.dark-mode table td { border-bottom-color: #334155 !important; color: #f8fafc !important; }
body.dark-mode table tr:hover td { background-color: #334155 !important; }

/* Text & Badges */
body.dark-mode .prod-title { color: #f8fafc !important; }
body.dark-mode .sku-badge, body.dark-mode .size-badge, body.dark-mode .badge { 
    background-color: #334155 !important; color: #cbd5e1 !important; 
}
body.dark-mode .last-updated, body.dark-mode .last-updated-text { color: #cbd5e1 !important; }
body.dark-mode .currency-prefix, body.dark-mode .currency-symbol { color: #cbd5e1 !important; }

/* Modals */
body.dark-mode .modal-content { background-color: #1e293b; color: #f8fafc; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
body.dark-mode .modal-header { border-color: #334155; }
body.dark-mode .modal-content p { color: #cbd5e1; }

/* Notifications */
body.dark-mode .notification-toast { background: #1e293b; border-color: #334155; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
body.dark-mode .notification-msg { color: #f8fafc; }

/* Dashboard Stats & Big Cards */
body.dark-mode .nav-card { background-color: #1e293b; border-color: #334155; }
body.dark-mode .nav-card:hover { border-color: #475569; box-shadow: 0 12px 20px rgba(0,0,0,0.2); }
body.dark-mode .stat-card { background-color: #1e293b; border-color: #334155; }
body.dark-mode .stat-value { color: #f8fafc; }
body.dark-mode .stats-section-title { border-left-color: #f8fafc; color: #cbd5e1; }

/* Action Icons (Table buttons) */
body.dark-mode .btn-icon-link, body.dark-mode .btn-icon-save, body.dark-mode .btn-icon-delete, body.dark-mode .btn-icon-refresh {
    color: #cbd5e1;
}
body.dark-mode .btn-icon-link:hover, body.dark-mode .btn-icon-save:hover, body.dark-mode .btn-icon-delete:hover, body.dark-mode .btn-icon-refresh:hover {
    color: #f8fafc;
}

/* Feed Builder Stats & Tabs */
body.dark-mode .stat-block { background-color: #1e293b; border-color: #334155; }
body.dark-mode .stat-block.total { background-color: #0f172a; }
body.dark-mode .stat-block.accepted, body.dark-mode .stat-block.rejected { background-color: #0f172a; }
body.dark-mode .feed-selector { background-color: #0f172a; border-color: #334155; }
body.dark-mode .feed-selector::before { background-color: #1e293b; }
body.dark-mode .feed-tab { color: #64748b; }
body.dark-mode .feed-tab.active { color: #f8fafc; }
body.dark-mode .feed-tab:hover:not(.active) { color: #cbd5e1; }

/* Pricing Engine Logs & Editor */
body.dark-mode #log-window, body.dark-mode #terminal { background-color: #0f172a; color: #cbd5e1; border-color: #334155; }
body.dark-mode .preset-toolbar { background-color: #0f172a; border: 1px solid #334155; }
body.dark-mode .btn-preset { background-color: #1e293b; color: #cbd5e1; border-color: #475569; }
body.dark-mode .btn-preset:hover { background-color: #334155; color: #f8fafc; border-color: #64748b; }
body.dark-mode .editor-wrapper, body.dark-mode #sku-editor, body.dark-mode #mismatch-editor { background-color: #0f172a; color: #f8fafc; border-color: #334155; }
body.dark-mode .line-numbers { background-color: #1e293b; color: #64748b; border-color: #334155; border-right-color: #334155; }

/* Switches */
body.dark-mode .slider { background-color: #475569; }
body.dark-mode input:checked + .slider { background-color: var(--accent-green); }
body.dark-mode .switch-label { color: #f8fafc; }

/* Zalando Manager & Proxy */
body.dark-mode .password-text { background-color: #0f172a; color: #cbd5e1; }
body.dark-mode .proxy-status-box { background-color: #0f172a; border-color: #334155; }
body.dark-mode .proxy-row .value { color: #f8fafc; }
body.dark-mode .add-code-form { background-color: #0f172a; border-color: #334155; }
body.dark-mode .account-email { color: #f8fafc !important; }
body.dark-mode #codes-list-body code { color: #f8fafc !important; }
body.dark-mode span[style*="background:#dcfce7"] { background-color: rgba(16, 185, 129, 0.15) !important; color: #34d399 !important; border-color: rgba(16, 185, 129, 0.3) !important; }
body.dark-mode span[style*="background:#fee2e2"] { background-color: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; }
body.dark-mode .status-badge.online { color: #34d399; background-color: rgba(16, 185, 129, 0.15); }
body.dark-mode .status-badge.offline, body.dark-mode .status-badge.error { color: #f87171; background-color: rgba(239, 68, 68, 0.15); }
body.dark-mode .status-badge.warning { color: #fbbf24; background-color: rgba(245, 158, 11, 0.15); }
body.dark-mode .status-badge.loading { color: #cbd5e1; background-color: rgba(100, 116, 139, 0.2); }
body.dark-mode .size-pill.std { background-color: #1e293b; border-color: #475569; color: #e2e8f0; }
body.dark-mode .size-pill.oos { background-color: #0f172a; color: #475569; }
body.dark-mode .size-pill.bad { background-color: #334155; border-color: #475569; color: #94a3b8; }
body.dark-mode .status-success { color: #34d399; background-color: rgba(16, 185, 129, 0.15); }
body.dark-mode .status-error { color: #f87171; background-color: rgba(239, 68, 68, 0.15); }
body.dark-mode .status-warning { color: #fbbf24; background-color: rgba(245, 158, 11, 0.15); }
body.dark-mode .status-release { color: #e879f9; background-color: rgba(217, 70, 239, 0.15); }
body.dark-mode .status-default { color: #cbd5e1; background-color: rgba(100, 116, 139, 0.2); }

/* Stock Manager Info & Search */
body.dark-mode .current-info-compact { background-color: #0f172a; border-color: #334155; }
body.dark-mode .info-value, body.dark-mode #res-title, body.dark-mode .search-title, body.dark-mode .prod-title-large { color: #f8fafc; }
body.dark-mode .inventory-table input[type="checkbox"], body.dark-mode #agree-terms { background-color: #0f172a; border-color: #475569; }
body.dark-mode .inventory-table input[type="checkbox"]:checked, body.dark-mode #agree-terms:checked { background-color: var(--accent-green); border-color: var(--accent-green); }
body.dark-mode .search-input { background-color: #0f172a; border-color: #334155; color: #f8fafc; }
body.dark-mode .search-input:focus { border-color: #64748b; }

/* History Feed & Cross Lister Platforms */
body.dark-mode .history-item { border-bottom-color: #334155; }
body.dark-mode .hist-top strong { color: #f8fafc; }
body.dark-mode .hist-detail, body.dark-mode .history-empty { color: #cbd5e1; }
body.dark-mode .hist-icon { background-color: #0f172a; color: #94a3b8; }
body.dark-mode .platform-content { background-color: #0f172a; border-color: #334155; }
body.dark-mode .platform-toggle:hover .platform-content { background-color: #1e293b; border-color: #475569; }
body.dark-mode .platform-toggle input:checked + .platform-content { background-color: #1e293b; border-color: var(--accent-green); }
body.dark-mode .plat-name, body.dark-mode .stat-row strong { color: #f8fafc; }
body.dark-mode .checkbox-indicator { border-color: #475569; }

/* Terms & Agreement text */
body.dark-mode .terms-container label { color: #cbd5e1; }
body.dark-mode .terms-container a { color: #f8fafc; }