/* Universal reset — the "*" selector matches EVERY element on the page. */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Page-wide defaults: the wraps all visible content, and most text properties are inherited by the elements inside it. */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-primary); background: #fff; font-size: 16px; line-height: 1.6; } /* Links: strip the browser's default underline + blue, so links inherit the surrounding text colour and we can style them deliberately per context. */ a { text-decoration: none; color: inherit; } /* Design tokens: reusable values (colours, sizes) defined once here and referenced everywhere with var(). Change a value here, and it updates across the whole site. */ :root { --theme: #1D9E75; --theme-dark: #0F6E56; --theme-light: #E1F5EE; --border: #e5e5e5; --bg-secondary: #f8f8f7; --text-primary: #1a1a1a; --text-secondary: #666; --radius-md: 8px; --radius-lg: 12px; --ts1: #085041; --bg-ts1: #E1F5EE; --ts2: #0C447C; --bg-ts2: #E6F1FB; --ts3: #3C3489; --bg-ts3: #EEEDFE; } /*---------------------------------------------------------------------------------------- MAIN SHELLS ETC --------------------------------------------------------------------------------------*/ .main { height: auto; overflow: visible; } .content { display: flex; flex-direction: column; flex: 1; /* take all height left under the top nav */ min-height: 0; /* allow the inner .main to scroll instead of growing the page */ overflow: hidden; background: transparent; justify-content: center; margin: 0 auto; max-width: 800px; } .content-wide { max-width: 1000px; } /* App shell: a single grid pins the top nav across the top, a fixed-width sidebar on the left, and lets the content area scroll on its own. The minmax(0, 1fr) row is what allows the content to scroll instead of stretching the page taller than the viewport. */ .main-private { display: grid; grid-template-columns: 210px 1fr; /* sidebar | content */ grid-template-rows: auto minmax(0, 1fr); /* nav | body */ grid-template-areas: "nav nav" "sidebar content"; height: 100dvh; } .nav { grid-area: nav; } .sidebar { grid-area: sidebar; } .content-private { grid-area: content; overflow-y: auto; background: #fff; padding: 24px 28px; } /*---------------------------------------------------------------------------------------- TOP NAVIGATION BAR --------------------------------------------------------------------------------------*/ .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 40px; border-bottom: 1px solid var(--border); background: #fff; } .nav-logo { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; } .nav-logo-mark { width: 28px; height: 28px; background: var(--theme); border-radius: 6px; display: flex; align-items: center; justify-content: center; } .nav-links { display: flex; gap: 28px; font-size: 14px; color: var(--text-secondary); } .nav-links .active { color: var(--text-primary); font-weight: 500; } .nav-auth { justify-self: end; display: inline-flex; align-items: center; gap: 8px; } /*---------------------------------------------------------------------------------------- SIDE NAVIGATION BAR --------------------------------------------------------------------------------------*/ .sidebar { /* width comes from the .main-private grid column track */ border-right: 1px solid var(--border); background: var(--bg-secondary); display: flex; flex-direction: column; } .sidebar-logo { display: flex; align-items: center; gap: 8px; padding: 18px 16px 14px; border-bottom: 1px solid var(--border); } .sidebar-logo span { font-size: 14px; font-weight: 500; } .nav-section { padding: 16px 8px 0; } .nav-label { font-size: 10px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.06em; text-transform: uppercase; padding: 0 8px 6px; } .nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-md); margin-bottom: 1px; font-size: 13px; color: var(--text-secondary); cursor: pointer; } .nav-item:hover { background: #fff; color: var(--text-primary); } .nav-item.active { background: #fff; color: var(--theme); font-weight: 500; } .nav-divider { border: none; border-top: 1px solid var(--border); margin: 12px; } .sidebar-bottom { margin-top: auto; padding: 12px; border-top: 1px solid var(--border); } .avatar-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--theme-light); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: var(--theme-dark); flex-shrink: 0; } .avatar-name { font-size: 12px; font-weight: 500; } .avatar-role { font-size: 11px; color: var(--text-secondary); } /*---------------------------------------------------------------------------------------- User logo ----------------------------------------------------------------------------------------*/ .user-logo { width: 30px; height: 30px; border-radius: 50%; background: var(--theme-light); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: var(--theme-dark); flex-shrink: 0; } .user-logo-lg { width: 35px; height: 35px; font-size: 12px } /*---------------------------------------------------------------------------------------- BUTTONS --------------------------------------------------------------------------------------*/ /* Base button: a small pill with a light outline and transparent fill. Used on both and