/* assets/style.css — shared theme for all stockagents pages.
   Include with: <link rel="stylesheet" href="assets/style.css">
   Swap the placeholder logo for a real image by editing the .logo-mark
   markup in each page's header (see README for the one-line change). */

:root {
    --color-primary: #4b7f52;       /* header green */
    --color-primary-dark: #34592f;   /* darker green, hover/accents */
	--color-button: #ffeaa7;		/* yellow button text */
    --color-bg: #f4f1e8;             /* earthy cream page background */
    --color-card: #ffffff;
    --color-accent: #8a6d3b;         /* brown accent */
    --color-text: #2c2c28;
	--color-title: #ffeaa7;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
}

/* --- Header bar --- */
.site-header {
    background: var(--color-primary);
    color: var(--color-title); /* was #fff;*/
    padding: 14px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.site-header .brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-header .logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--color-primary-dark);
    font-size: 1.2em;
    line-height: 1;
} 

.site-header .site-title {
	font-weight: 700;
    font-size: 1.15em;
    letter-spacing: 0.02em;
}

.site-header nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    flex-wrap: wrap;
}

.site-header nav a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9em;
    opacity: 0.92;
}

.site-header nav a:hover {
    opacity: 1;
    text-decoration: underline;
}

.site-header .user-info {
    font-size: 0.85em;
    opacity: 0.85;
}

/* --- Buttons, accent touches --- */
button, .btn-edit {
    background: var(--color-primary);
	color: var(--color-button);
}
button:hover, .btn-edit:hover {
    background: var(--color-primary-dark);
}

a {
    color: var(--color-primary-dark);
}