/* board/static/board/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@700;800&display=swap');

@import url('components.css');
@import url('auth.css');

:root {
    --color-sidebar-bg: #ffffff;
    --color-sidebar-hover: #f8fafc;

    --color-primary: #047857;
    --color-primary-dark: #064e3b;
    --color-primary-light: #ecfdf5;

    --color-bg-main: #f8fafc;
    --color-surface: #ffffff;

    --color-text-dark: #0f172a;
    --color-text-muted: #64748b;

    --color-border: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);

    --radius-md: 10px;
    --radius-lg: 16px;
    --transition: all 0.2s ease-in-out;

    --sidebar-width: 280px;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, sans-serif; }
html, body {
    height: 100%; width: 100%; overflow: hidden;
    background-color: var(--color-bg-main); color: var(--color-text-dark);
    animation: globalFadeIn 0.5s ease-out forwards;
}

@keyframes globalFadeIn { from { opacity: 0; } to { opacity: 1; } }

a { text-decoration: none; color: inherit; }
h1, h2, h3 { font-weight: 700; color: var(--color-text-dark); }

.app-wrapper { display: flex; height: 100vh; width: 100vw; }

.main-content {
    flex-grow: 1; padding: 2.5rem 3.5rem; overflow-y: auto; background-color: var(--color-bg-main);
}

.container-fluid { max-width: 1400px; margin: 0 auto; }
.section-title { font-size: 1.6rem; margin-bottom: 2rem; font-weight: 700; color: var(--color-text-dark); letter-spacing: -0.5px; }

.btn-primary {
    background-color: var(--color-primary); color: white; border: none; padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md); font-weight: 600; cursor: pointer; transition: var(--transition);
    display: flex; justify-content: center; align-items: center; gap: 8px;
}
.btn-primary:hover { background-color: var(--color-primary-dark); box-shadow: var(--shadow-hover); }

.input-base {
    padding: 0.85rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    font-size: 1rem; outline: none; transition: var(--transition); width: 100%; background-color: var(--color-surface);
}
.input-base:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }